From aa612a7e826b758153873e42739c3021bccd33d6 Mon Sep 17 00:00:00 2001
From: JNKristiansen <j.kristiansen19@gmail.com>
Date: Mon, 16 Dec 2024 18:10:29 +0100
Subject: [PATCH] WIP

---
 html2024.yml  | 526 ++++++++++++++++++++++++++++++++++++++++
 js2023.yml    |   2 +-
 js2024.yml    | 660 ++++++++++++++++++++++++++++++++++++++++++++++++++
 react2024.yml | 539 +++++++++++++++++++++++++++++++++++++++++
 4 files changed, 1726 insertions(+), 1 deletion(-)
 create mode 100644 html2024.yml
 create mode 100644 js2024.yml
 create mode 100644 react2024.yml

diff --git a/html2024.yml b/html2024.yml
new file mode 100644
index 0000000..17d887a
--- /dev/null
+++ b/html2024.yml
@@ -0,0 +1,526 @@
+locale: en-US
+translations:
+    ###########################################################################
+    # General
+    ###########################################################################
+
+    - key: general.results.description
+      t: The 2024 edition of the annual survey about the latest trends in the HTML ecosystem.
+
+    - key: general.html2024.survey_intro
+      t: |
+
+          HTML was the original web technology, and the fact that it's more relevant than ever three decades later is kind of amazing. 
+
+          But despite its name, this surveys goes far beyond just HTML to encompass all areas of the web platform as a whole – and there is *a lot* to cover! 
+
+          So as you might expect, designing a survey like this one always involves tough choices. This year, we decided to focus on new and upcoming features to help you stay up to date; as well as areas that browser vendors are most interested in.
+
+          This means that your answers might end up having a direct impact on the roadmap of the browser you're using right now. Which is why I'm so excited to open this second edition of the State of HTML survey!
+
+    - key: features.features_intro_html2024
+      t: |
+          Welcome to the survey! This first part is all about sharing your experience with various web platform features:
+
+
+          - **Never heard of it**: it's your first time seeing this – or you've heard of it but have no idea what it does. 
+
+          - **Heard of it**: you've read or learned about this, but haven't actually used it yet. 
+
+          - **Used it**: you've used this at least once, even if it was just to play around. 
+
+
+          By the way, if you want to tell us more about any of your choices, just click that little "comment" icon!
+
+    ###########################################################################
+    # Introduction
+    ###########################################################################
+
+    - key: introduction.html2024
+      t: |
+          <span class="first-letter">D</span>espite its name, this survey is about a lot more than just HTML. 
+
+          Don't get me wrong – HTML itself is more relevant than ever today, which is quite impressive for a 30-year old technology. Even so, we've  tried to broaden the survey's scope even more to the web platform as a whole.  
+
+          From browser APIs, to web development pain points, to accessibility strategies, to analytics and performance tools, there's a *lot* to cover. 
+
+          To make it easier to find your way through all these new features, we are now integrating a feature's [Baseline status](https://web-platform-dx.github.io/web-features/) whenever possible – look for a little blue or green dot next to its name.
+
+          And if you find all this raw data a bit lacking in context, you can now also browse through the **comments** left by respondents on each question. 
+
+          So let's dive right in and see what the web platform has been up to in 2024!
+
+          <span class="conclusion__byline">– Sacha Greif</span>
+
+    ###########################################################################
+    # Tshirt
+    ###########################################################################
+
+    - key: sections.tshirt.title
+      t: T-shirt
+
+    - key: sections.tshirt.description
+      t: |
+          ## Support the Survey With the State of HTML T-Shirt
+
+          Do you miss the the good old days of the mid-90s, when HTML was king and VHS tape covers featured futuristic, colorful artwork? 
+
+          The bad news is that even with 2024's technology, you can't yet go back in time to relive those glory days. But what you *can* do is wear this awesome original retro t-shirt, designed by none other than the talented Christopher Kirk-Nielsen.
+
+    - key: tshirt.about
+      t: About the T-shirt
+
+    - key: tshirt.description
+      t: |
+          We use a high-quality, super-soft tri-blend shirt with a slim fit printed by our partners at Cotton Bureau.
+
+    - key: tshirt.getit
+      t: Get It
+
+    - key: tshirt.price
+      t: USD $32 + shipping
+
+    - key: tshirt.designer.heading
+      t: About the Designer
+
+    - key: tshirt.designer.name
+      t: Christopher Kirk-Nielsen
+
+    - key: tshirt.designer.bio
+      t: |
+          Originally from France but now based in the United States, Chris is not just an amazing front-end developer, but also a talented illustrator who specializes in retro visuals. In fact, we encourage you to also check out his [other t-shirt designs](https://chriskirknielsen.com/designs)!
+
+    ###########################################################################
+    # Sections Introductions
+    ###########################################################################
+
+    - key: sections.user_info.description.html2024
+      t: |
+          Welcome to the State of HTML survey results. This year's edition reached **5,402** participants from all around the world.
+
+    - key: sections.features.description.html2024
+      t: |
+          HTML features and other browser APIs
+    ###########################################################################
+    # Charts
+    ###########################################################################
+
+    # user_info
+
+    - key: user_info.country.takeaway.html2024
+      t: >
+          Germany had a great showing this year, and while it didn't overtake the U.S. for number one it definitely punched above its weight.
+
+    - key: user_info.locale.takeaway.html2024
+      t: >
+          Many thanks to our volunteer translators for making the surveys available in so many different languages!
+
+    - key: user_info.completion_stats.takeaway.html2024
+      t: >
+          Despite the survey's length, an overwhelming majority of respondents took the time to complete it from start to finish!
+
+    - key: user_info.age.takeaway.html2024
+      t: >
+          State of HTML respondents had a median age of 35 – close to State of CSS's 34, and quite a bit older than State of JS's 31.
+
+    - key: user_info.years_of_experience.takeaway.html2024
+      t: >
+          The difference between surveys also holds when looking at years of web development experience: an average of 12 years here, compared to 9 years for State of JS respondents.
+
+    - key: user_info.company_size.takeaway.html2024
+      t: >
+          The larger the company, the higher the salary. Although if you're good enough, our data shows that you can earn a decent living no matter your company's size.
+
+    - key: user_info.yearly_salary.takeaway.html2024
+      t: >
+          While we often hear tales of six-figure salaries out of Silicon Valley, the reality is that most front-end developers throughout the world earn far less, as becomes apparent when directly comparing the U.S. and the rest of the world.
+
+    - key: user_info.higher_education_degree.takeaway.html2024
+      t: >
+          While having a degree will ensure you earn more, turns out it doesn't necessarily have to be related to programming – a good sign for the many among us who discovered a passion for web development further along in life.
+
+    - key: user_info.gender.takeaway.html2024
+      t: >
+          Unlike past surveys, we didn't observe a significant income difference between genders this time. 
+
+          That being said, this lone datapoint does not mean we should disregard the challenges faced by women in our industry.
+
+    - key: user_info.race_ethnicity.takeaway.html2024
+      t: >
+          Non-white respondents were more likely to be younger and have less experience – which hopefully points to a ongoing diversification of the industry.
+
+    - key: user_info.disability_status.takeaway.html2024
+      t: >
+          Thanks to the continued efforts of accessibility advocates, we now accept the fact that disabilities (permanent or not) should be taken into account as part of the design & development process.
+
+    - key: user_info.source.takeaway.html2024
+      t: >
+          A majority of respondents knew about the survey from previous years, but many also found it through a banner on the [2024 State of CSS survey results](https://2024.stateofcss.com/). 
+
+          And for the first time, Mastodon overtook X as a traffic source, possibly due to the later penalizing tweets containing outbounds links.
+
+    # features
+
+    - key: features.all_features
+      t: Features
+
+    - key: features.all_features.takeaway.html2024
+      t: >
+          Landmark elements (`<main>`, `<nav>`, etc.) unsurprinsingly ranked first as the most used feature, while the *least* used was Isolated Web Apps. 
+
+          `<datalist>` had the highest proportion positive sentiment (47.%), while `<model>` ranked first for negative sentiment at 9%.
+
+    - key: features.reading_list.takeaway.html2024
+      t: >
+          The Reading List lets you save items you want to learn more about after the survey is complete, and the item that was added the most was the new Customizable Select feature.
+
+    # forms
+
+    - key: features.forms_features.takeaway.html2024
+      t: >
+          With forms being one of the main ways users interact with the web, it should come as no surprise that they present their set of challenges. 
+
+          One feature to keep an eye on is Customizable Select, which by virtue of being brand new is one of the least used form features, yet ranks second when ranked by positive sentiment.
+
+    - key: features.forms_pain_points.takeaway.html2024
+      t: >
+          Styling form inputs continues to be developers' top form-related pain point, especially when it comes to `<select>` elements. 
+
+          Speaking of `<select>`, the lack of “combobox” behavior (search, autofill, etc.) was also deeply felt since it often forces apps to rely on JavaScript workarounds
+
+    # interactivity
+
+    - key: features.interactivity_features.takeaway.html2024
+      t: >
+          Despite low usage and a “Limited Availability” baseline status, the new Popover API scored first in terms of positive sentiment, which makes sense for such a useful feature.
+
+    - key: features.interactivity_pain_points.takeaway.html2024
+      t: >
+          Styling form inputs continues to be developers' top form-related pain point, especially when it comes to `<select>` elements. 
+
+          Speaking of `<select>`, the lack of “combobox” behavior (search, autofill, etc.) was also deeply felt since it often forces apps to rely on JavaScript workarounds.
+
+    # content
+
+    - key: features.content_features.takeaway.html2024
+      t: >
+          The `srcset` and `sizes` attributes collected 81 freeform comments, with 58% of those corresponding to a negative sentiment. As one respondent put it, “you have to look up the syntax every time you use it.”
+
+    - key: features.content_pain_points.takeaway.html2024
+      t: >
+          SVG (especially styling them with CSS) and image management are the top two pain points when it comes to dealing with content.
+
+    # web_components
+
+    - key: features.web_components_features.takeaway.html2024
+      t: >
+          While Web Components have their adepts, they remain a contested technology. Web Components features had an average of 7% of negative opinions, versus 4% for all other features combined.
+
+    - key: features.web_components_libraries.takeaway.html2024
+      t: >
+          Svelte may not be known as a web components library, but it turns out that it works quite well with them – unlike React, which appears far lower down in the rankings.
+
+    - key: features.using_web_components_pain_points.takeaway.html2024
+      t: >
+          The difficulty of styling and customizing web components remains the top obstacle to using them more broadly. Another barrier to entry is how hard it is to integrate them with JavaScript frontend libraries.
+
+    - key: features.making_web_components_pain_points.takeaway.html2024
+      t: >
+          Despite its cool name, Shadow DOM continues to frustrate web component makers, with many throwing up their hands at the excessive complexity of the whole process.
+
+    # accessibility
+
+    - key: features.accessibility_features.takeaway.html2024
+      t: >
+          The accessibility features mentioned in this year's survey proved to be straightforward enough to use, which translated into a very low negative sentiment overall.
+
+    - key: features.accessibility_disabilities.takeaway.html2024
+      t: >
+          It was comforting to see developers account for a wide range of disabilities while making websites, with visual disabilities taking the top ranks.
+      aliases:
+          - accessibility.accessibility_disabilities.takeaway.html2024
+
+    - key: features.accessibility_techniques.takeaway.html2024
+      t: >
+          It's nice to see that alt text is widely implemented, and if nothing else this chart can serve as a handy shortlist of accessibility patterns to implement in your own projects.
+      aliases:
+          - accessibility.accessibility_techniques.takeaway.html2024
+
+    - key: features.accessibility_screenreaders.takeaway.html2024
+      t: >
+          It should come as no surprise that developers are more likely to use screenreaders if they come bundled with their browser or OS.
+      aliases:
+          - accessibility.accessibility_screenreaders.takeaway.html2024
+
+    - key: features.accessibility_tools.takeaway.html2024
+      t: >
+          Lighthouse and browser devtools in general topped the rankings, overtaking more specialized tools such as Axe or WAVE.
+      aliases:
+          - accessibility.accessibility_tools.takeaway.html2024
+
+    - key: features.accessibility_pain_points.takeaway.html2024
+      t: >
+          Accessibility presents a unique challenge in that developers must not only overcome technical issues such as testing difficulties, but also organizational obstacles such as low prioritization or lack of client demand.
+      aliases:
+          - accessibility.accessibility_pain_points.takeaway.html2024
+
+    # mobile_web_apps_features
+
+    - key: features.mobile_web_apps_features.takeaway.html2024
+      t: >
+          Usage for mobile and desktop web app features was low overall, with an average of only 6% of respondents having used these features, versus 30% for all other features combined.
+
+    - key: features.native_apps_tools.takeaway.html2024
+      t: >
+          While building native apps with web technologies presents its set of challenges and limitations, it was still the most popular method among respondents.
+      aliases:
+          - mobile_web_apps.native_apps_tools.takeaway.html2024
+
+    - key: features.mobile_web_apps_pain_points.takeaway.html2024
+      t: >
+          iOS's dominant marketshare combined with its locked-down nature means there isn't much recourse when web platform issues crop up.
+
+    # other_tools
+
+    - key: other_tools.site_generators.takeaway.html2024
+      t: >
+          While Next.js isn't a traditional static site generator, its support for more dynamic rendering methods in addition to build-time rendering makes it a very polyvalent choice – just like Astro, which boasts a similar feature set.
+
+    - key: other_tools.validation_tools.takeaway.html2024
+      t: >
+          Validation tools might not be as popular as they once were, but they're still a useful item to have in your web developer toolbelt.
+
+    - key: other_tools.performance_tools.takeaway.html2024
+      t: >
+          Similar to the accessibility tools chart, Lighthouse and browser devtools top the ranking, once again showing that polyvalent tools tend to be more popular than their more specialized counterparts.
+
+    - key: other_tools.analytics_tools.takeaway.html2024
+      t: >
+          Google Analytics might still dominate, but more privacy-friendly alternative such as Plausible or Fathom are gaining ground.
+
+    - key: other_tools.browsers.takeaway.html2024
+      t: >
+          Once you look beyond the big four browsers, there's actually a surprising amount of variety in this space, with new entrants like Arc, Brave, and Zen; and developer-focused options such as Polypane.
+
+    - key: other_tools.web_platform_resources.takeaway.html2024
+      t: >
+          MDN and Can I Use have earned their spot as key resources for the web development community – but keep an eye out for the WebDX group's work around [Web Features](https://web-platform-dx.github.io/web-features-explorer/), a promising new initiative.
+
+    # usage
+
+    - key: usage.html_interoperability_features.takeaway.html2024
+      t: >
+          There are few things more frustrating than knowing a new browser API would solve your problem perfectly, but that you can't use it because of poor support. 
+
+
+          Thankfully, with initiatives like [Interop](https://web.dev/blog/interop-2024) one can hope that the Popover API and Anchor Positioning soon join the ranks of the features we all use without giving it a second thought.
+
+    - key: usage.html_functionality_features.takeaway.html2024
+      t: >
+          While poor browser support is certainly a problem, even well-supported features can see lower usage if they are hard to customize to developer needs, or just plain hard to master.
+
+    - key: usage.html_missing_elements.takeaway.html2024
+      t: >
+          It might seem weird that omnipresent UI controls such as tabs or datatables still don't have a corresponding native HTML element. 
+
+
+          But getting these complex behaviors right while accounting for all edge cases takes time, so for now all we can do is wait and hope these elements make their way to the browser one day.
+
+    - key: usage.html_css_js_balance.takeaway.html2024
+      t: >
+          We still spend far more time writing JavaScript (or TypeScript) than anything else. While there's nothing wrong with that, the web platform as a whole's ongoing progress will hopefully help balance things out a bit in the near future.
+
+    - key: usage.what_do_you_use_html_for.takeaway.html2024
+      t: >
+          While “classic” use cases like blogs or homepages still represent a sizable part of the modern web developer's workload, the largest chunk by far is now web apps – which in turn explains why the web platform has been adapting to this new state of things.
+
+    - key: usage.industry_sector.takeaway.html2024
+      t: >
+          Programming & Technical Tools topped the rankings, which makes sense for a developer-focused survey. 
+
+
+          It's also interesting to note that E-commerce came in third, as this is a sector that faces the double challenge of building highly performant sites that also need to feature complex user interactions.
+
+    # opinions
+
+    - key: opinions.accessibility_is_valued.takeaway.html2024
+      t: >
+          It's great to see accessibility being properly valued in the workplace – at least among survey respondents. 
+
+
+          And while there is surely a self-selection bias in effect, the efforts of accessibility advocates have also contributed a lot in moving the needle.
+
+    - key: opinions.keeping_informed_is_challenging.takeaway.html2024
+      t: >
+          New features are great, but only if you can actually know what they are, and how to use them.
+
+
+          A majority of respondents experience this challenge on a daily basis, as reflected in the data.
+
+    - key: opinions.browser_interoperability_is_obstacle.takeaway.html2024
+      t: >
+          While browser interoperability has traditionally been a major web development pain point, it does seem like the situation is finally getting better – and it'll be interesting to see how this chart evolves over time.
+
+    - key: opinions.web_platform_right_direction.takeaway.html2024
+      t: >
+          There's reason to be hopefuly about the web platform, and this optimism is reflected in this year's data.
+
+    ###########################################################################
+    # Other Content
+    ###########################################################################
+
+    - key: features.all_features.description
+      t: |
+          This chart recaps all of the survey's feature questions. The main bars represent a respondent's experience; and they are then further subdivided according to that respondent's sentiment. You can change the grouping to alternate between both. 
+
+
+          Note that you can also find a more specific breakdown of the same data in each feature sub-section.
+
+    - key: features.forms_features
+      t: Forms Experience & Sentiment
+
+    - key: features.interactivity_features
+      t: Interactivity Experience & Sentiment
+
+    - key: features.content_features
+      t: Content Experience & Sentiment
+
+    - key: features.web_components_features
+      t: Web Components Experience & Sentiment
+      aliases:
+          - web_components_main_features
+
+    - key: features.accessibility_features
+      t: Accessibility Experience & Sentiment
+
+    - key: features.mobile_web_apps_features
+      t: Native Web Apps Experience & Sentiment
+
+    ###########################################################################
+    # Sponsors
+    ###########################################################################
+
+    - key: sponsors.frontendmasters.description
+      t: Advance your skills with in-depth, modern front-end engineering courses.
+    - key: sponsors.google_chrome.description
+      t: Thanks to the Google Chrome team for supporting our work.
+    - key: sponsors.tokyodev.description
+      t: Find your dream developer job in Japan today.
+    - key: sponsors.renderatl.description
+      t: The tech conference focused on all things web.
+
+    ###########################################################################
+    # Conclusion
+    ###########################################################################
+
+    - key: conclusion.html2024.patrick_brosset.bio
+      t: Product Manager on the Edge team at Microsoft
+    - key: conclusion.html2024.patrick_brosset
+      t: >
+          We tend to take HTML for granted, and consider it to be mostly complete. But the elements and browser features it comes with have evolved tremendously over the years, and continue to evolve. As HTML-first architectures are gaining traction, we're getting the capabilities to build them the right way. It's never been a better time to be an HTML developer.
+
+          There's more to do though. New problem areas emerge all the time and the platform needs to keep up with new needs.
+
+          ### Adding New Features…
+
+          New HTML elements, such as datatables, tabs, or switches, are dearly needed, but it's important to strike the right balance between complex components that do it all; and simpler but robust and styleable primitives from which we can build.
+
+          ### …While Improving Old Ones
+
+          It's also important to keep improving what we already have. Existing features such as `<select>`, date and time `<input>`, or `<details>` don't always have the right level of stylability and customization – while other features like CSP or Shadow DOM are too complex to use. 
+
+          Accessibility, although now better recognized as something developers and organizations need to care about, remains hard to test and complex to improve.
+
+          ### Browser Compatibility
+
+          On top of this, the browser compatibility and interoperability of our HTML features continues to be a major obstacle to web developers. Having to support older versions of browsers is a pain. This year, results show that this is especially true for newer features like Popover, anchor positioning, and multi-page View Transitions, but also for `<dialog>` and for PWAs. These features are getting adopted, and developers need them to work everywhere.
+
+          ### The Challenge of Keeping Up
+
+          So, yes, there's more to do. But, things _are_ happening. In fact, they're happening so fast that it can be challenging to stay informed. Resources like MDN, Caniuse.com, Web.dev, or the W3C website are a tremendous help, but there is an opportunity for more tools that help us keep up. 
+
+          On the other hand, talking about new features too early can be frustrating for developers who can't use them yet. That's why it's important to keep maintaining high-quality platform data such as [browser-compat-data](https://github.com/mdn/browser-compat-data/) and [web-features](https://github.com/web-platform-dx/web-features/), which let us communicate about features in a developer-friendlier way.
+
+          ### A Bright Future for HTML
+
+          To close, it's heartwarming that most respondents agree that, overall, interoperability is now much less of an issue than it used to be, with clear improvements being felt in recent years. And, with the increasing number of capabilities we're getting, building performant, accessible, and interactive HTML-first UIs is becoming easier all the time, making it possible to reduce JavaScript usage to where it truly matters, and letting web servers and browsers communicate how they were meant to: with HTML!
+
+    ###########################################################################
+    # FAQ/About
+    ###########################################################################
+
+    - key: faq.how_long_will_survey_take_html2024
+      t: How long will answering the survey take?
+    - key: faq.how_long_will_survey_take_html2024.description
+      t: >
+          Depending on how many questions you answer (all questions can be skipped),
+          filling out the survey should take around 10-15 minutes.
+
+    - key: faq.learn_more_html2024
+      t: Where can I learn more?
+    - key: faq.learn_more_html2024.description
+      t: You can learn more about this survey in [our announcement post](https://dev.to/sachagreif/the-state-of-html-2024-survey-is-now-open-3i4j).
+
+    - key: faq.survey_design_html2024
+      t: How was this survey designed?
+    - key: faq.survey_design_html2024.description
+      t: >
+          This survey was designed as the results of an [open design process](https://github.com/Devographics/surveys/issues/246) involving browser vendors and the web development community.
+
+    - key: faq.results_released_html2024
+      t: When will the results be released?
+    - key: faq.results_released_html2024.description
+      t: The survey will run from September 12 to October 1, 2024, and the survey results will be released shortly after.
+
+    - key: faq.who_should_take_survey_html2024
+      t: Who should take this survey?
+    - key: faq.who_should_take_survey_html2024.description
+      t: >
+          This is an open survey for anybody who makes websites or web apps, whether regularly or occasionally, as part of their job, as a student, or just for fun!
+
+    - key: faq.data_used_html2024
+      t: How will this data be used?
+    - key: faq.data_used_html2024.description
+      t: >
+          All data collected will be released openly for any developer or company to consult.
+          Browser vendors also [use this data](https://web.dev/blog/interop-2024) to prioritize focus areas and inform their roadmaps.
+
+    - key: faq.survey_goals_html2024
+      t: What are the survey's goals?
+    - key: faq.survey_goals_html2024.description
+      t: >
+          The survey's goals are to measure awareness of new HTML features and browser APIs, and help developers keep track of how their usage is evolving.
+
+    - key: about.content
+      t: |
+          The 2024 State of HTML survey ran from September 12 to November 5 2024, and collected 5,402 responses. 
+
+          The survey was designed collaboratively through [an open GitHub thread](https://github.com/Devographics/surveys/issues/246) and during [WebDX Community Group](https://www.w3.org/groups/cg/webdx/) meetings. 
+
+          The survey infrastructure is run by [Sacha Greif](https://sachagreif.com/) and [Eric Burel](https://www.lbke.fr/), with help from a team of open-source contributors and consultants. 
+
+          This year's logo and t-shirt were designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/).
+
+          ### Survey Goals
+
+          This survey was created to identify upcoming trends in the web development ecosystem in order to help developers make technological choices. 
+
+          As such, the survey is focused on anticipating what's coming over the next few years rather than analyzing what's popular now, which is why the features or technologies that are currently most widespread are not always included. 
+
+          It should also be taken as a **snapshot of a specific subset of developers**, and is not meant to speak for the entire ecosystem. 
+
+          The survey was openly accessible online and respondents were not filtered or selected in any way.
+
+          ### Project Funding
+
+          Funding from this project comes from a variety of sources:
+
+          - **T-shirt sales**. 
+
+          - **Sponsored links**: the links to recommended resources at the bottom of each page are provided by our partner [Frontend Masters](https://frontendmasters.com/).
+
+          - **Other Funding**: [Google](https://www.google.com/) and [TokyoDev](https://www.tokyodev.com/) also funded work on the survey.
+
+          ### Technical Overview
+
+          You can find a more in-depth technical overview of how the surveys are run [here](https://dev.to/sachagreif/how-the-devographics-surveys-are-run-2024-edition-1p6a).
diff --git a/js2023.yml b/js2023.yml
index 3c024d0..6437ee9 100644
--- a/js2023.yml
+++ b/js2023.yml
@@ -53,7 +53,7 @@ translations:
       t: Kjøp den
 
     - key: tshirt.price
-      t: USD $32 + shipping
+      t: USD $32 + frakt
 
     - key: tshirt.designer.heading
       t: Om designeren
diff --git a/js2024.yml b/js2024.yml
new file mode 100644
index 0000000..cff2a03
--- /dev/null
+++ b/js2024.yml
@@ -0,0 +1,660 @@
+locale: nb-NO
+translations:
+    ###########################################################################
+    # General
+    ###########################################################################
+
+    - key: general.results.description
+      t: 2024-utgaven av den årlige undersøkelsen om de nyeste trendene i JavaScript-økosystemet.
+
+    ###########################################################################
+    # Survey Intro
+    ###########################################################################
+
+    # JS 2023
+    - key: general.js2024.survey_intro
+      t: >
+          Mens vi prøvde å bestemme oss for hvilke frontend-rammeverk vi skulle bruke, har JavaScript gått gjennom en liten evolusjon selv. 
+
+
+          Nye TC39-forslag skaper riplinger i miljøene, mens andre forslag er under implementering i nettlesere allerede. Og TypeScripts popularitet gjør muligheten for typestøtte direkte i Javascript på et tidspunkt i fremtiden til en reell mulighet.. 
+
+
+          Én ting er sikkert – selv om JavaScript i 2024 fortsatt føles likt som før, er det ingen garanti for at vi vil kunne si det samme om språket vi skriver om fem år.
+
+
+          Frem til da kan du være med på å forme veien videre ved å delta i årets State of JavaScript-undersøkelse!
+
+    ###########################################################################
+    # Survey FAQ
+    ###########################################################################
+
+    - key: faq.how_long_will_survey_take_js2024
+      t: Hvor lang tid tar å besvare undersøkelsen?
+    - key: faq.how_long_will_survey_take_js2024.description
+      t: >
+          Avhengig av hvor mange spørsmål du svarer på (alle spørsmål er valgfrie),
+          bør det ta omtrent 15-20 minutter å fullføre undersøkelsen.
+
+    - key: faq.survey_design_js2024
+      t: Hvordan ble undersøkelsen utformet?
+    - key: faq.survey_design_js2024.description
+      t: >
+          Denne undersøkelsen ble utformet som resultatene av en [åpen designprosess](https://github.com/Devographics/surveys/issues/252) som involverte nettleserleverandører og webutviklingssamfunnet.
+
+    - key: faq.results_released_js2024
+      t: Når blir resultatene publisert?
+    - key: faq.results_released_js2024.description
+      t: Undersøkelsen vil pågå fra 10. november til 12. desember 2024, og resultatene vil bli publisert noen uker senere.
+
+    ###########################################################################
+    # Introduction
+    ###########################################################################
+
+    - key: introduction.js2024
+      t: |
+
+          <span class="first-letter">L</span>et's take a second to consider something: 2024's top three front end framework were all launched over a decade ago. 
+
+          Now sure, all three have evolved a lot along the way, and the patterns of 2014 would seem downright antiquated today. But given the JavaScript ecosystems's reputation as a constantly-churning whirlwind of change, it can be nice to know that some things do remain constant. 
+
+          Speaking of constants – reaching beyond the survey's existing audience remains frustratingly hard despite renewed outreach efforts, and something we'll definitely need to keep working on. 
+
+          In the meantime, we've also added a new **Metadata** appendix that will tell you more about survey respondents and the survey itself. And don't forget you can also apply any of these new variables to other charts using the **Query Builder**. 
+
+          With all this out of the way, let's discover what JavaScript has been up to this year!
+
+          <span class="conclusion__byline">– Sacha Greif</span>
+
+    ###########################################################################
+    # Tshirt
+    ###########################################################################
+
+    - key: sections.tshirt.title
+      t: T-skjorte
+
+    - key: sections.tshirt.description
+      t: |
+          ## Støtt undersøkelsen med State of JavaScript T-skjorte
+
+          Mellom dårlig videokvalitet, klumpete kassetter og behovet for å spole tilbake, er det ikke mye å savne fra VHS-epoken. Men en ting vi *savner* er de fantastiske 90-talls visuene som pleide å pryde blanke VHS-kassetter.
+
+          Men nå, takket være den talentfulle Christopher Kirk-Nielsen, kan du nyte all denne retroen samtidig som du feirer kjærligheten din for JavaScript!
+
+    - key: tshirt.about
+      t: Om t-skjorten
+
+    - key: tshirt.description
+      t: |
+          Vi bruker en høykvalitets og supermyk t-skjorte med en slim fit, med print fra vår parner, Cotton Bureau.
+
+    - key: tshirt.getit
+      t: Kjøp den
+
+    - key: tshirt.price
+      t: USD $32 + frakt
+
+    - key: tshirt.designer.heading
+      t: Om designeren
+
+    - key: tshirt.designer.name
+      t: Christopher Kirk-Nielsen
+
+    - key: tshirt.designer.bio
+      t: |
+          Opprinnelig fra Frankrike, men nå basert i USA, er Chris ikke bare en fantastisk front-end utvikler, men også en talentfull illustratør som spesialiserer seg på det retrovisuelle. Vi oppfordrer deg også til å sjekke ut hans [andre t-skjortedesign](https://chriskirknielsen.com/designs)!
+
+    ###########################################################################
+    # Sections
+    ###########################################################################
+
+    - key: sections.user_info.description
+      t: |
+          I år deltok **14 015** personer i undersøkelsen. For å fremheve 
+          ulike perspektiver og gi dypere innsikt, har vi gjort en spesiell innsats for å introdusere nye måter å analysere og presentere dataene våre på.
+
+    - key: sections.features.description
+      t: |
+          I år la vi særlig vekt på å identifisere utvikleres utfordringer med JavaScript. Som forventet toppet **mangelende typestøtte** og **inkonsistens mellom nettlesere** listene, hvor hver av dem påvirker nesten en tredjedel av utviklerne.
+
+    - key: sections.libraries.description
+      t: |
+          We reworked our charts to highlight not just developer experience, but *sentiment*. Be sure to explore these new grouping and sorting options to figure out which libraries get the most love… or the least!
+
+    - key: sections.other_tools.description
+      t: |
+          While the JavaScript conversation often seems to boild down to which framework to pick, it's worth remembering that there's a whole galaxy of other tools, services, and platforms to explore beyond that!
+
+    - key: sections.usage.description
+      t: |
+          Once again it seems like TypeScript has established itself as the default, at least among survey respondents. But apart from that, JavaScript usage remains as varied as ever!
+
+    - key: sections.resources.description
+      t: |
+          Rather than provide predefined lists of options for survey respondents to pick from, we decided to simply offer raw text fields. This led to quite a few new entrants in this year's Resources section!
+
+    - key: sections.awards.description
+      t: |
+          This year's awards were dominated by one very specific project… how quickly will you guess what it is?
+
+    ###########################################################################
+    # Charts
+    ###########################################################################
+
+    - key: options.features_categories.language
+      aliasFor: sections.language.title
+    - key: options.features_categories.browser_apis
+      aliasFor: sections.browser_apis.title
+    - key: options.features_categories.other_features
+      aliasFor: sections.other_features.title
+
+    ###########################################################################
+    # Notes
+    ###########################################################################
+
+    - key: blocks.gender.note
+      t: |
+          If you're interested in learning more, we [wrote a blog post](https://dev.to/sachagreif/is-our-survey-biased-against-women-49oj) that addresses the survey's gender dynamics.
+
+    - key: blocks.source.note
+      t: >
+
+          This chart aggregates a mix of referrers, URL parameters, and freeform answers. 
+
+          - State of JS: the [State of JS](https://stateofjs.com) mailing list.
+
+          - State of CSS: the State of CSS mailing list; also matches `email`, `by email`, etc.
+
+          - Work: matches `work`, `colleagues`, `coworkers`, etc.
+
+    ###########################################################################
+    # Awards
+    ###########################################################################
+
+    - key: award.feature_adoption_delta_award.comment
+      t: With a **{value}** progression in 2022, **top-level await** has quickly become an integral part of JavaScript.
+
+    - key: award.tool_usage_delta_award.comment
+      t: |
+          Faithful to its name, **Vite** continues to grow at a record pace, adding **{value}** year-over-year in usage!
+
+    - key: award.tool_satisfaction_award.comment
+      t: Vitest takes the top spot, with **{value}** of developers willing to use it again!
+
+    - key: award.tool_interest_award.comment
+      t: Staying in the Vite ecosystem, this year **Rolldown** is the technology developers are most interested in with a **{value}** interest ratio.
+
+    - key: award.most_write_ins_award.comment
+      t: With **{value}** mentions, Angular meta-framework **Analog** was the library that received the most write-ins from respondents.
+
+    - key: award.most_commented_tool_award.comment
+      t: Angular may not be the newest kid on the block, but it's still the talk of the town with **{value}** comments from respondents!
+
+    - key: award.most_loved_tool_award.comment
+      t: With **{value}** of all developers having a positive opinion of it, Vite once more gets the prize for most-loved technology!
+
+    ###########################################################################
+    # Conclusion
+    ###########################################################################
+
+    - key: conclusion.js2024.fernando_herrera
+      t: |
+          <span class="first-line">Several years ago, another State of JS survey put Astro on my radar.</span>
+
+          I decided to try it and after spending a few hours with it, I fell in love with the technology. It was almost love at first sight! Suddenly, I saw myself rebuilding my website, administrative tools, and other projects with Astro. Now, I can say that Astro is my favourite framework by far.
+
+          JavaScript is a dynamic and exciting ecosystem continually growing with many libraries and frameworks. From reusable components to client-side, server-side, and static solutions, there are countless ways to achieve your goals using Vanilla JavaScript, community packages, libraries, or frameworks—each offering new opportunities for innovation. Of course, it can feel overwhelming, but this diversity makes JavaScript powerful, giving you anywhere from one to hundreds of clever ways to succeed.
+
+          Don’t be afraid to dive in and experiment with different tools—whether it’s Vitest or Jest, React or Solid, Node or Deno, Next.js or Astro – or something entirely new like [Brisa](https://brisa.build/). 
+
+          Stay curious, as no other language offers the community, flexibility, and creativity that JavaScript does!
+
+    - key: conclusion.js2024.fernando_herrera.bio
+      t: Developer, educator, and YouTuber
+
+    - key: conclusion.js2024.theo_browne
+      t: |
+          <span class="first-line">Javascript is moving to the server, and we’re uneasy about it.</span>
+
+          In last year’s survey, we saw quickly growing adoption of server-rendered frameworks like Next, Nuxt, Remix, and SvelteKit. This year, we shifted to server-first patterns such as Partial Hydration and Islands, which doubled in their adoption.
+
+          Frame-, err, libraries like htmx show that web devs aren’t the only ones benefiting from utilizing the server. SPAs aren’t going anywhere (take a look at [Inertia](https://inertiajs.com/) for proof), but as these new patterns continue to improve, the market seems to be following along.
+
+          This move has not been unanimously loved. React’s continued to grow, but React developers are increasingly concerned about its direction. Getting here has been… rough, but progress is being made every day.
+
+          We’re also seeing more options appear outside of the React ecosystem. From [Nuxt](https://roe.dev/blog/nuxt-server-components) to [SolidStart](https://docs.solidjs.com/solid-start/reference/server/use-server) to [Astro](https://astro.build/blog/astro-480/#experimental-astro-actions), all of the best React Server Component features are rolling out to every developer.
+
+          And of course, Vite has continued to dominate, and is the choice for app developers and framework authors alike. Hard to imagine where we’d be today without it!
+
+    - key: conclusion.js2024.theo_browne.bio
+      t: Creator of Ping, uploadthing, create-t3-app, and video creator
+
+    ###########################################################################
+    # Picks
+    ###########################################################################
+
+    - key: picks.my_pick
+      t: "My 2024 Pick: "
+    - key: picks.intro
+      t: We asked members of the JavaScript community to share their “pick of the year”
+
+    - key: picks.jack_herrington.name
+      t: TanStack
+    - key: picks.jack_herrington.bio
+      t: Coder & YouTuber
+    - key: picks.jack_herrington.description
+      t: |
+          Tanstack, a banquet of practical, high quality, battle tested libraries, culminating in the TanStack Start framework.
+
+    - key: picks.josefine_schaefer.name
+      t: Arisa Fukuzaki
+    - key: picks.josefine_schaefer.bio
+      t: Accessibility Engineer
+    - key: picks.josefine_schaefer.description
+      t: |
+          Arisa is am amazing tech educator, mentor, docs & DevRel engineer who's super passionate about JS frameworks, community work and supporting women in tech. She's one to watch!
+
+    - key: picks.cassie_evans.name
+      t: gsap-video-export
+    - key: picks.cassie_evans.bio
+      t: Does a little bit of everything at GSAP
+    - key: picks.cassie_evans.description
+      t: |
+          Chris made this super handy tool to export your GSAP animations to video. It's made my life much easier and my videos much smoother - no more low quality screen recordings for me!
+
+    - key: picks.tania_rascia.name
+      t: Cassidy Williams
+    - key: picks.tania_rascia.bio
+      t: Self-taught principal engineer, accomplished tech blogger, and professionally trained chef
+    - key: picks.tania_rascia.description
+      t: |
+          Cassidy's been writing on her blog since 2009, has an incredibly unique style and so many cool, niche interests (I'm proud to own her StackOverflow copy/paste keyboard!). She puts out a great newsletter every week, makes the best developer memes, and does it all while being a new mom, which is beyond impressive.
+
+    - key: picks.salma_alam_naylor.name
+      t: The Breedling
+    - key: picks.salma_alam_naylor.bio
+      t: Live streamer, software engineer, and developer educator
+    - key: picks.salma_alam_naylor.description
+      t: |
+          Web technology isn't just for websites. The Breedling is an in-browser visualisation tool to accompany live music gigs by the band of the same name, mixing video and RIVE animations with WebGL shaders, utilising an old BBC experimental library VideoContext.
+
+    - key: picks.wes_bos.name
+      t: Transformers.js
+    - key: picks.wes_bos.bio
+      t: Podcaster and educator
+    - key: picks.wes_bos.description
+      t: |
+          Transformers.js is a library for working on AI models in JavaScript. It does it all - Computer vision, audio, image generation, chat-bot generation, and more.
+
+          It works in the browser, via WASM or WebGPU, and on the server with Node.js, Bun or Deno. Running AI models on device is pretty exciting, and this library is a great way to get started without all the pain of trying to get Python running.
+
+    - key: picks.shaundai_person.name
+      t: Shruti Kapoor
+    - key: picks.shaundai_person.bio
+      t: Front end Senior Software Engineer (Netflix) and course instructor
+    - key: picks.shaundai_person.description
+      t: |
+          My Pick of the Year is my friend Shruti Kapoor. Shruti has a way of explaining even the trickiest technical JS concepts in very easy-to-understand way.  In her fun and engaging YouTube videos and conference talks, she teaches her audience the most critical parts of JavaScript development without a lot of fluff.
+
+    - key: picks.michelle_bakels.name
+      t: v0
+    - key: picks.michelle_bakels.bio
+      t: Software developer, community builder, and React Miami organizer at G2i
+    - key: picks.michelle_bakels.description
+      t: |
+          While AI coding companions are here to stay, they can still run into issues with keeping up with the latest developments in our ecosystem. v0 isn’t only the best tool for generating UI, but it also has the strongest context for providing valuable and relevant coding assistance in our current state of JavaScript.
+
+    - key: picks.sacha_greif.name
+      t: Bluesky
+    - key: picks.sacha_greif.bio
+      t: Maintainer, State of JS
+    - key: picks.sacha_greif.description
+      t: |
+          With X's slow descent into madness, it felt like the front end community had been left without a home. So it's great to see so many of us finally converging towards a new platform in the form of Bluesky.
+
+    - key: picks.dominik_dorfmeister.name
+      t: Knip
+    - key: picks.dominik_dorfmeister.bio
+      t: Software Engineer @ Sentry, React Query maintainer
+    - key: picks.dominik_dorfmeister.description
+      t: |
+          Knip is an amazing tool that analyzes your code and tells you what you can get rid of. It’s fast (so you can run it in CI), understands many frameworks and libraries out of the box, and works seamlessly in monorepos, too.
+
+    - key: picks.sebastien_lorber.name
+      t: Rspack
+    - key: picks.sebastien_lorber.bio
+      t: This Week In React creator, Docusaurus maintainer
+    - key: picks.sebastien_lorber.description
+      t: |
+          The Rspack bundler is an almost drop-in replacement for Webpack. Implemented in Rust, it's much faster than Webpack and consumes less memory. All Webpack projects should try it out immediately, considering how easy it is to adopt!
+
+    ###########################################################################
+    # Sponsors
+    ###########################################################################
+
+    - key: sponsors.frontendmasters.description
+      t: Advance your skills with in-depth, modern front-end engineering courses.
+    - key: sponsors.google_chrome.description
+      t: Thanks to the Google Chrome team for supporting our work.
+    - key: sponsors.tokyodev.description
+      t: Find your dream developer job in Japan today.
+    - key: sponsors.renderatl.description
+      t: The tech conference focused on all things web.
+    - key: sponsors.gitnation.description
+      t: |
+          Subscribe to the GitNation Multipass: access 11 remote conferences, 300+ hours of content, and hands-on workshops on JavaScript, React, Vue, and Node.
+
+    ###########################################################################
+    # FAQ/About
+    ###########################################################################
+
+    - key: about.content
+      t: |
+          The 2024 State of JavaScript survey ran from November 22 to December 12 2024, and collected 23,540 responses. The results were published on June 20, 2024. The survey is run by [Devographics](https://devographics.com/), a collective consisting of me ([Sacha Greif](https://sachagreif.com/)) and [Eric Burel](https://www.lbke.fr/), as well as invited experts and open-source contributors. 
+
+          The State of JavaScript logo and t-shirt were designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/).
+
+          ### Survey Goals
+
+          This survey was created to identify upcoming trends in the web development ecosystem in order to help developers make technological choices. 
+
+          As such, the survey is focused on anticipating what's coming over the next few years rather than analyzing what's popular now, which is why features or technologies may sometimes be omitted even if they are currently widespread 
+
+          It should also be taken as a **snapshot of a specific subset of developers**, and is not meant to speak for the entire ecosystem. 
+
+          ### Survey Design
+
+          The survey was designed in part based on last year's survey, with an open feedback period where the survey outline was discussed [on GitHub](https://github.com/Devographics/surveys/issues?q=is%3Aissue+is%3Aopen+label%3A%22State+of+JS+2024%22). 
+
+          All survey questions were optional. 
+
+          ### Survey Audience
+
+          The survey was openly accessible online and respondents were not filtered or selected in any way. Respondents were primarily a mix of respondents from past surveys (alerted through a dedicated mailing list) and social media traffic. 
+
+          Note that frameworks, libraries, etc. were free to encourage their audience to participate in the survey and some of them did take advantage of this via banners, tweets, etc. A detailed breakdown of traffic sources is included in the "Sources" chart. 
+
+          ### Project Funding
+
+          Funding from this project comes from a variety of sources:
+
+          - **T-shirt sales**. 
+
+          - **Sponsored links**: the links to recommended resources at the bottom of each page are provided by our partners [Frontend Masters](https://frontendmasters.com/) and [RenderATL](https://www.renderatl.com/).
+
+          - **Direct Funding**: this year, [Google](https://www.google.com/) funded my work on the survey. 
+
+          Any contribution or sponsorship is greatly appreciated. we would especially like to work closely with more browser vendors, since they play such a central role in the web ecosystem.  
+
+          ### Technical Overview
+
+          You can find a more in-depth technical overview of how the surveys are run [here](https://dev.to/sachagreif/how-the-devographics-surveys-are-run-2024-edition-1p6a).
+
+    ###########################################################################
+    # Takeaways
+    ###########################################################################
+
+    # user_info
+
+    - key: user_info.country.takeaway.js2024
+      t: >
+          As usual, the U.S. represented a large share of respondents, and also topped the ranking in terms of median income.
+
+    - key: user_info.age.takeaway.js2024
+      t: >
+          With an mean age of 33.5 years old, the average State of JS respondent turned out to be slightly younger than State of CSS (34.9) and State of HTML (35.8).
+
+
+          Interestingly, younger respondents were far more likely to suffer from cognitive and visual impairments, while older respondents were more affected by hearing and mobility impairments.
+
+    - key: user_info.years_of_experience.takeaway.js2024
+      t: >
+          51% of respondents had 10 years of experience or less – which means a majority of survey takers haven't known the world before modern JavaScript frameworks.
+
+    - key: user_info.company_size.takeaway.js2024
+      t: >
+          Larger companies continue to represent a sizeable proportion of respondents, while company size continues to be correlated with income level.
+
+    - key: user_info.yearly_salary.takeaway.js2024
+      t: >
+          While we often hear tales of six-figure salaries out of Silicon Valley, the reality is that most front-end developers throughout the world earn far less, as becomes apparent when directly comparing the U.S. and the rest of the world.
+
+    - key: user_info.job_title.takeaway.js2024
+      t: >
+          It seems like the JavaScript ecosystem features as many different job titles as front end frameworks. But one clear trend is that anything with "engineer" in it will earn you more – even compared to CEOs, CTOs, and founders. "Developers" on the other hand are clearly at the bottom of the ladder, and might consider printing new business cards…
+
+    - key: user_info.higher_education_degree.takeaway.js2024
+      t: >
+          While having a degree will ensure you earn more, turns out it doesn't necessarily have to be related to programming.
+
+    - key: user_info.gender.takeaway.js2024
+      t: >
+          Despite [extra outreach efforts](https://dev.to/sachagreif/state-of-js-2024-outreach-and-diversity-report-c4g) this year, we only saw a small increase in the proportion of women and non-binary respondents compared to 2023, from 5% to 7%.
+
+    - key: user_info.race_ethnicity.takeaway.js2024
+      t: >
+          Non-white respondents were more likely to be younger and have less experience – which hopefully points to a ongoing diversification of the industry.
+
+    - key: user_info.disability_status.takeaway.js2024
+      t: >
+          Whether permanent or temporary, disabilities are a part of our daily lives for many of us – especially as we age, in the case of hearing and mobility impairments. 
+
+
+          And while some disabilities did not affect respondent's ability to earn a living, it does seem like visual impairments in particular are correlated with lower income.
+
+    # features
+
+    - key: features.language_pain_points.takeaway.js2024
+      t: >
+          When asked what aspect of JavaScript they struggled with the most, respondents overwhelmingly mentioned the lack of a built-in type system – with browser support issues a distant second.
+
+    - key: features.browser_apis_pain_points.takeaway.js2024
+      t: >
+          Unsurprisingly, poor browser support was the top obstacle regarding browsers and their APIs. Safari was also highlighted as a common pain point, and so was the overall lack of documentation about browser features.
+
+    - key: features.reading_list.takeaway.js2024
+      t: >
+          The Reading List lets you save items you want to learn more about after the survey is complete. 
+
+          This year, `error.cause`, Logical Assignment, and `Object.groupBy()` were the features that most triggered respondents' curiosity.
+
+    # tools
+
+    - key: tools.all_tools_experience.takeaway.js2024
+      t: >
+          Webpack is the most-used JavaScript tool, but not the most-loved. That title instead belongs to Vite, with 56% of positive opinions (note that remaining neutral was also an option this year). Astoundingly, Vite was also the third most used tool overall despite having only been around for a relatively short time!
+
+
+          React on the other hand came in second not only in the most-used list, but also in the most-loved rankings – which is quite the staying power for a project that is over 10 years old! It's also worth nothing that React sports the highest proportion of users actively picking a sentiment.
+
+    - key: tools.tools_arrows.takeaway.js2024
+      t: >
+          JavaScript libraries commonly display a "boomerang" pattern over time: boosted by early positivity (line goes right), usage increases (line shoots up), but users then get confronted with more edge cases and real-world issues, and opinions can become more negative (line veers left).
+
+
+          So it's always interesting to see projects that manage to buck this trend, such as Vue and Angular, which have both managed to gain positive opinions again even after a couple years of less favorable results.
+
+    - key: tools.tier_list.takeaway.js2024
+      t: >
+          While there is sadly no single "S-tier" stack yet, SvelteKit and Astro both seem like safe bets to start a project – possibly with Vitest for testing and pnpm to manage your monorepo.
+
+    - key: tools.scatterplot_overview.takeaway.js2024
+      t: >
+          It's notable that there were only three libraries that captured over 50% of respondent usage while maintaining a >50% retention percentage: React, Jest, and Vite – the sign of a relatively fragmented ecosystem.
+
+    # front end frameworks
+
+    - key: tools.front_end_frameworks_ratios.takeaway.js2024
+      t: >
+          Last year's big story was Vue overtaking Angular in raw usage among our respondents. Despite Angular's progress this year, Vue managed to keep its number two spot – as well a gain a whopping three spots in terms of retention percentage!
+
+          Meanwhile, Svelte usage is increasing at a steady pace, while it continues to top the rankings in terms of overall positive opinions.
+
+    - key: tools.front_end_frameworks_pain_points.takeaway.js2024
+      t: >
+          As the incumbent, React has to bear the cross of being the target of most complaints. 
+
+
+          Excessive complexity, choice overload, poor performance, and breaking changes were also commonly cited as major pain points.
+
+    # meta frameworks
+
+    - key: tools.meta_frameworks_ratios.takeaway.js2024
+      t: >
+          Next.js continues to loom high above the competition in terms of raw usage. Yet looking at retention tells a different story – if not for Gatsby, Next.js would be dead last. 
+
+
+          This speaks to the success of Astro and SvelteKit in particular, who so far have managed to keep their users very happy.
+
+    - key: tools.meta_frameworks_pain_points.takeaway.js2024
+      t: >
+          Just like React in its own category, Next.js as the leader also takes the brunt of the criticism.
+
+    # testing
+
+    - key: tools.testing_ratios.takeaway.js2024
+      t: >
+          It's rare to see a trend as clear as Vitest's ascencion through the ranks over the past few years. While it may "only" be number four in terms of usage, it already tops the interest, retention, and overall positivity rankings – and shows no sign of conceding the top spot anytime soon.
+
+    - key: tools.testing_pain_points.takeaway.js2024
+      t: >
+          Mocking is the biggest pain point presented by testing, closely followed by the hassle of complex setups and configurations, and the burden of slow-running tests.
+
+    # mobile desktop
+
+    - key: tools.mobile_desktop_ratios.takeaway.js2024
+      t: >
+          Over the past decade, building mobile and desktop apps has become far more common – yet that doesn't mean developers are necessarily happy with their tools. 
+
+
+          While Tauri and Expo stand out at the top of the retention chart, everything else has a lower ratio compared to good old Native Apps.
+
+    - key: tools.mobile_desktop_pain_points.takeaway.js2024
+      t: >
+          JavaScript codebases still struggle to compete against pure native apps in terms of performance. And it seems like both Electron and React Native have their share of drawbacks.
+
+    # build tools
+
+    - key: tools.build_tools_ratios.takeaway.js2024
+      t: >
+          Just like its sibling Vitest, Vite is also gaining market share at record speed. Also make sure to keep an eye on new entrants Rolldown and Rspack, who are both starting off very high in the charts.
+
+    - key: tools.build_tools_pain_points.takeaway.js2024
+      t: >
+          Excessive configuration has traditionally been the bane of build tools – yet it's also often that very complexity that makes them powerful.
+
+    # build tools
+
+    - key: tools.monorepo_tools_ratios.takeaway.js2024
+      t: >
+          Monorepos have yet to cross over into the mainstream of the web development ecosystem – yet for those who are brave enough to explore this new frontier, pnpm seems like the clear front-runner.
+
+    - key: tools.monorepo_tools_ratios.takeaway.js2024
+      t: >
+          Monorepos are still too hard to set up properly. And package management in itself is something that we still haven't gotten quite right… but then again, who has?
+
+    # usage
+
+    - key: usage.js_ts_balance.takeaway.js2024
+      t: >
+          We're now firmly in the TypeScript era. 67% of respondents stated they write more TypeScript than JavaScript code – while the single largest group consisted of people who *only* write TypeScript.
+
+    - key: usage.compiled_code_balance.takeaway.js2024
+      t: >
+          It should come as no surprise that in 2024, almost all of our JavaScript code goes through a build step. While bundlers and build tools certainly add complexity to our development process, they are most likely here to stay.
+
+    - key: usage.ai_generated_code_balance.takeaway.js2024
+      t: >
+          For all the talk of AI-assisted coding, most of us still only use AI tools sparingly. And in fact, a whole 20% do not use them whatsoever to produce code.
+
+    - key: usage.usage_type.takeaway.js2024
+      t: >
+          It's always good to know in what context respondents are writing JavaScript code, and the vast majority are using it as part of their day job.
+
+    - key: usage.what_do_you_use_js_for.takeaway.js2024
+      t: >
+          Virtually every respondent stated that they use JavaScript for frontend development, which makes sense given the language's origins.
+
+    - key: usage.industry_sector.takeaway.js2024
+      t: >
+          While the largest industry sector consisted of developers building tools for other developers, the highest-paying one turned out to be Advertising.
+
+    - key: usage.js_app_patterns.takeaway.js2024
+      t: >
+          Despite modern JavaScript meta-frameworks now supporting intricate rendering strategies, the most common application patterns remained the most traditional ones: single-page apps and server-side rendering.
+
+    - key: usage.top_js_pain_points.takeaway.js2024
+      t: >
+          Code architecture is always a concern once a codebase gets past a certain size, so it makes sense that it topped the rankings of overall JavaScript pain points, followed by state and dependency management.
+
+    - key: usage.js_new_features.takeaway.js2024
+      t: >
+          There are currently quite a few [TC39 proposals](https://github.com/tc39/proposals) that are on the verge of becoming a reality. Temporal and Decorators stood out this year as the ones respondents were most excited about.
+
+    - key: usage.top_currently_missing_from_js.takeaway.js2024
+      t: >
+          While the lack of native static typing has long been felt by the community, it's interesting to see Signals making an entrance at number 3 on this list, despite not being part of the most popular front end framework.
+
+    - key: usage.native_types_proposal.takeaway.js2024
+      t: >
+          It's clear that survey respondents want native types, and that they hope to seem them implemented with a TypeScript-like syntax. 
+
+
+          This year's question phrasing sadly did not make a clear distinction between runtime types and TypeScript-like type-as-annotations, so it remains to be seen which of these two paths will gain the community's favor.
+
+    # resources
+
+    - key: resources.courses.takeaway.js2024
+      t: >
+          Udemy has done a great job of drafting popular instructors such as Brad Traversy or Colt Steele to boost its roster of JavaScript courses, and so has Frontend Masters (disclaimer: Frontend Masters financially supports this survey).
+
+
+          It's also worth mentioning You Don't Know JS, a great book available online for free.
+
+    - key: resources.newsletters.takeaway.js2024
+      t: >
+          Newsletters are a great way to stay up to date with the ever-changing JavaScript landscape, and Cooperpress' JavaScript Weekly continues to lead the field.
+
+    - key: resources.podcasts.takeaway.js2024
+      t: >
+          While Syntax retains its crown for now, a new challenge might come in the form of video creators such as The Primeagen and Midudev, who can easily generate audio content in addition to traditional streams.
+
+    - key: resources.video_creators.takeaway.js2024
+      t: >
+          Fireship, Theo, The Primeagen, stand atop the video creator rankings. But it's worth highlighting how vibrant the Spanish-language ecosystem has become, starting with (but not limited to!) Midudev in fourth place overall.
+
+
+          Note that the second tab shows the same rankings, but manually filtered down to Spanish-language creators only.
+
+    - key: resources.people.takeaway.js2024
+      t: >
+          English has long been the dominant language of the tech industry, but in our corner of the world at least Spanish is stepping up to the challenge, with Midudev and Fernando Herrera topping the rankings of most influential developers for non-video channels.
+
+    # metadata
+
+    - key: user_metadata.source.takeaway.js2024
+      t: >
+          The majority of respondents knew about the survey from previous years. It's also worth highlighting that the [Angular](https://angular.dev/) and [Nuxt](https://nuxt.com/) homepages featured banners pointing their users to the survey; and that Bluesky came in at number 5 despite this being the first time appearing as a traffic source for the survey. 
+
+
+          We also made special outreach efforts ([full report here](https://dev.to/sachagreif/state-of-js-2024-outreach-and-diversity-report-c4g)) focused on attracting more women developers, but their effectiveness wasn't quite what we had hoped for.
+
+    - key: user_metadata.past_surveys.takeaway.js2024
+      t: >
+          This chart shows which other Devographics surveys this year's respondents had previously taken part in. 
+
+
+          The fact that a sizeable segment of this year's respondents had also taken other surveys points to web development not being quite as fragmented as one might think – even if you primarily write JavaScript, keeping up with CSS and the web platform is still key!
+
+
+          Note that we can only generate this datapoint for respondents taking the survey while logged-in. Guest respondents appear as “No Answer”.
+
+    - key: user_metadata.past_same_survey_count.takeaway.js2024
+      t: >
+          This chart shows how many times this year's respondents had taken part in a State of JS survey before.
+
+
+          The fact that the largest bucket consists of new respondents means we are successfully reaching a new population, which mitigates bias that might carry over from our existing audience. But it also points to the challenges of getting people to consistently fill out a survey year after year.
+
+
+          Note that we can only generate this datapoint for respondents taking the survey while logged-in. Guest respondents appear as “No Answer”.
diff --git a/react2024.yml b/react2024.yml
new file mode 100644
index 0000000..67dbbd2
--- /dev/null
+++ b/react2024.yml
@@ -0,0 +1,539 @@
+locale: en-US
+translations:
+    ###########################################################################
+    # General
+    ###########################################################################
+
+    - key: general.results.description
+      t: The 2024 edition of the annual survey about the latest trends in the React ecosystem.
+
+    ###########################################################################
+    # Introduction
+    ###########################################################################
+
+    - key: general.react2024.survey_intro
+      t: |
+          Let's face it: neither you or I have the dedication, patience, and sheer force of will it would take to properly keep up with the React ecosystem, as new APIs, new libraries, and even new versions are introduced week after week. 
+
+          Thankfully for all of our sakes, one individual has willingly taken on that burden: I'm talking about none other than [This Week in React](https://thisweekinreact.com/)'s Sebastien Lorber. 
+
+          Sebastien has lent us his knowledge to make sure this year's survey covers all bases. This means that by taking this survey not only will you help provide the community with valuable insights, but you will also get a chance to catch up with any developments you might've missed.
+
+          So once again, please join me for this year's State of React!
+
+    - key: features.features_intro.react2024
+      t: |
+          Welcome to the survey! This first part is all about sharing your experience with various React features:
+
+
+          - **Never heard of it**: it's your first time seeing this – or you've heard of it but have no idea what it does. 
+
+          - **Heard of it**: you've read or learned about this, but haven't actually used it yet. 
+
+          - **Used it**: you've used this at least once, even if it was just to play around. 
+
+
+          By the way, if you want to tell us more about any of your choices, just click that little "comment" icon!
+
+    - key: tools.tools_intro.react2024
+      t: |
+          This next part of the survey is all about the various libraries and frameworks that make up the React ecosystem.
+
+    - key: introduction.react2024
+      t: |
+
+          <span class="first-letter">R</span>eact has been around for 11 years, which seems hard to even grasp when you look at the current pace of web development. 
+
+          The reason why we're still talking about React today is that it's somehow been able to keep up, always evolving to meet the challenges thrown at it by its users. 
+
+          In fact, not content with merely keeping up, React is even leading the way on new innovative patterns such as Server Components and the upcoming Compiler. 
+
+          That being said, please note that this data was collected between **October 27** and **November 15, 2024**, which does mean that React 19 –as well as any other development that may have taken place after that time period– isn't covered. 
+
+          Even so, there's still a lot to explore here, from component libraries, to state management techniques, to application patterns. So let's discover the results of the first ever State of React community survey together!
+
+          *This in an unofficial survey unaffiliated with Meta, Vercel, or the React team.*
+
+          <span class="conclusion__byline">– Sacha Greif</span>
+
+    ###########################################################################
+    # Tshirt
+    ###########################################################################
+
+    - key: sections.tshirt.title
+      t: T-shirt
+
+    - key: sections.tshirt.description
+      t: |
+          ## Support the Survey With the official State of React T-Shirt
+
+          Is it a library? A framework? An unknown element on the verge of mutating into a dangerous, unstable entity? Whatever your feelings about React, you will find them reflected in this design that echoes anime and science-fiction.
+
+    - key: tshirt.about
+      t: About the T-shirt
+
+    - key: tshirt.description
+      t: |
+          We use a high-quality shirt printed by our partners at Cotton Bureau.
+
+    - key: tshirt.getit
+      t: Get It
+
+    - key: tshirt.price
+      t: USD $32 + shipping
+
+    - key: tshirt.designer.heading
+      t: About the Designer
+
+    - key: tshirt.designer.name
+      t: Christopher Kirk-Nielsen
+
+    - key: tshirt.designer.bio
+      t: |
+          Originally from France but now based in the United States, Chris is not just an amazing front-end developer, but also a talented illustrator who specializes in retro visuals. In fact, we encourage you to also check out his [other t-shirt designs](https://chriskirknielsen.com/designs)!
+
+    ###########################################################################
+    # Content
+    ###########################################################################
+
+    # user_info
+
+    - key: sections.user_info.description.react2024
+      t: |
+          **13,003** respondents took part in the first ever State of React survey. A small sample of the overall community to be sure, but still large enough to provide us with valuable data!
+
+    - key: user_info.country.takeaway
+      t: |
+          The majority of respondents came from the **U.S.** and **Europe**.
+
+    - key: user_info.locale.takeaway
+      aliasFor: user_info.locale.description
+
+    - key: user_info.completion_stats.takeaway
+      aliasFor: user_info.completion_stats.description
+
+    # features
+
+    - key: sections.features.description.react2024
+      t: |
+          We asked respondents about their thoughts on **28** distinct features, from omnipresent hooks such as `useState`, to more niche APIs like `useDeferredValue`. Be sure to try and sort by “sentiment”!
+
+    - key: features.all_features
+      t: All Features
+
+    - key: features.all_features.takeaway
+      t: |
+          This chart recaps all of the survey's feature questions. The main bars represent a respondent's experience; and they are then further subdivided according to that respondent's sentiment. You can change the grouping to alternate between both.
+
+    - key: features.reading_list.takeaway
+      t: >
+          **30%** of respondents added at least one item to their reading list while taking the survey in order to learn more about them later. Here is a breakdown of their picks.
+
+    - key: features.main_apis_items
+      t: Main APIs Experience & Sentiment
+    - key: features.main_apis_pain_points.takeaway
+      t: >
+          Among the most common React APIs, `forwardRef` was by far the one generating the most pain for developers, with `memo` a close second. Thankfully the React team is in the process of rolling out better alternatives to both.
+
+    - key: features.hooks_items
+      t: Hooks Experience & Sentiment
+    - key: features.hooks_pain_points.takeaway
+      t: >
+          Unsurpringly, `useEffect` and `useCallback` were cited as the most problematice React hooks, in large part due to the management of dependency arrays.
+
+    - key: features.new_apis_items
+      t: New APIs Experience & Sentiment
+    - key: features.new_apis_pain_points.takeaway
+      t: >
+          While React's ability to keep evolving and stay relevant over time is one of its best assets, it also comes at a cost and new APIs such as **Server Components** can definitely be tough to adopt.
+
+    # libraries
+
+    - key: sections.libraries.description.react2024
+      t: |
+          We reworked our charts to highlight not just developer experience, but *sentiment*. Be sure to explore these new grouping and sorting options to figure out which libraries get the most love… or the least!
+
+    - key: tools.all_tools_experience
+      t: Libraries Experience & Sentiment
+    - key: tools.all_tools_experience.takeaway
+      t: >
+          Among React libraries and frameworks, **Next.js** and **TanStack Query** lead the way in terms of overall positivity.
+
+          Note that some items such as `useState` and `fetch` were also included in order to provide a baseline, even though they're not libraries themselves.
+
+    - key: tools.scatterplot_overview
+      t: Libraries Retention vs Usage
+    - key: tools.scatterplot_overview.takeaway
+      t: >
+          Among libraries and frameworks, **Next.js** was the only item boasting both high retention and high usage. On the other hand, while even more respondents had used **Create React App**, a lot fewer were willing to keep using it going forward.
+
+    # component libraries
+
+    - key: tools.component_libraries_experience
+      t: Component Libraries Experience & Sentiment
+    - key: tools.component_libraries_experience.takeaway
+      t: >
+          **React Aria** and **Radix** lead the rankings in terms of positivity, proving that the headless approach to component libraries has a lot going for it.
+
+    # state management
+
+    - key: tools.state_management_experience
+      t: State Management Experience & Sentiment
+    - key: tools.state_management_experience.takeaway
+      t: >
+          Beyond **useState**, the state management solution with the highest positivity ratio is **Zustand**. And while **Redux** still boasts a large userbase, it isn't quite as beloved.
+
+    # data loading
+
+    - key: tools.data_loading_experience
+      t: Data Loading Experience & Sentiment
+    - key: tools.data_loading_experience.takeaway
+      t: >
+          **TanStack Query** has been making waves for a while now, and it turns out its reputation is reflected in the data since it's the data loading method respondents felt the most positive about, right after the native `fetch` API.
+
+    # back-end infrastructure
+
+    - key: tools.meta_frameworks_experience
+      t: Meta-Frameworks Experience & Sentiment
+    - key: tools.meta_frameworks_experience.takeaway
+      t: >
+          While you'll certainly have no trouble finding people complaining about **Next.js**, it still managed to top the positivity rankings for meta-frameworks, followed by **Remix** and **Astro**.
+
+    #other_tools
+
+    - key: sections.other_tools.description.react2024
+      t: |
+          React is known for focusing on UI rendering while being fairly agnostic about the other parts of your app, and that's reflected in the vibrant ecosystem that has emerged to fill these gaps!
+
+    # usage
+
+    - key: sections.usage.description.react2024
+      t: |
+          No matter what version you use, application pattern you adopt, or industry sector you belong to, there's no wrong way to use React!
+
+    - key: usage.js_app_patterns.takeaway
+      t: >
+          Despite the focus on static site generation, server-side rendering, and server components, it's interesting to note that the vast majority of React users still work on Single Page Applications.
+
+    - key: usage.react_version.takeaway
+      t: >
+          Note that the survey was conducted **before** the announcement or release of React 19.
+
+    # resources
+
+    - key: sections.resources.description.react2024
+      t: |
+          One of the big reason for React's continued dominance is the sheer amount of documentation, blog posts, videos, and other resources it has accumulated over the years. Here's just a small sample!
+
+    - key: resources.learning_methods.takeaway
+      t: |
+          The React team has done a great job with the new React docs site, so it shouldn't be surprised that it has become the number one way people learn about the framework.
+
+    - key: resources.blogs_news_magazines.takeaway
+      t: |
+          While this list is populated by many usual suspects, it's worth celebrating the presence of React-specific media such as **This Week in React** or **React Status**.
+
+    - key: resources.sites_courses.takeaway
+      t: |
+          While **Stack Overflow** has gone through its own share of AI-related trouble recently, it still tops the rankings for now.
+
+    - key: resources.podcasts.takeaway
+      t: |
+          **Syntax** continues to assert its dominance over the dev podcast landscape. Also interesting to note the lack of any active React-specific podcast in the top 10.
+
+    - key: resources.video_creators.takeaway
+      t: |
+          While **Theo** and **Web Dev Simplified** both featured React content, it's interesting to note that despite not typically covering React, **The Primeagen** still comes in at #3.
+
+    - key: resources.people.takeaway
+      t: |
+          When it comes to being an influential figure in the React community, it's no surprise that **Dan Abramov** tops the rankings – Although **Kent C. Dodds** and **Theo** both seem to be challenging for the crown.
+
+    #awards
+    - key: sections.awards.description.react2024
+      t: |
+          This year's awards were dominated by one very specific project… how quickly will you guess what it is?
+
+    ###########################################################################
+    # Charts
+    ###########################################################################
+
+    - key: options.features_categories.language
+      aliasFor: sections.language.title
+    - key: options.features_categories.browser_apis
+      aliasFor: sections.browser_apis.title
+    - key: options.features_categories.other_features
+      aliasFor: sections.other_features.title
+
+    ###########################################################################
+    # Notes
+    ###########################################################################
+
+    - key: blocks.gender.note
+      t: |
+          If you're interested in learning more, we [wrote a blog post](https://dev.to/sachagreif/is-our-survey-biased-against-women-49oj) that addresses the survey's gender dynamics.
+
+    - key: blocks.source.note
+      t: >
+
+          This chart aggregates a mix of referrers, URL parameters, and freeform answers. 
+
+          - State of JS: the [State of JS](https://stateofjs.com) mailing list.
+
+          - State of CSS: the State of CSS mailing list; also matches `email`, `by email`, etc.
+
+          - Work: matches `work`, `colleagues`, `coworkers`, etc.
+
+    ###########################################################################
+    # Awards
+    ###########################################################################
+
+    - key: award.feature_adoption_delta_award.comment
+      t: With a **{value}** progression in 2022, **top-level await** has quickly become an integral part of JavaScript.
+
+    - key: award.tool_usage_delta_award.comment
+      t: |
+          **Vite** continues to be the fastest-growing library out there, with a **{value}** year-over-year increase in usage!
+
+    - key: award.tool_satisfaction_award.comment
+      t: Vite once again takes the top spot, with **{value}** of developers willing to use it again!
+
+    - key: award.tool_interest_award.comment
+      t: Did you guess Vite? Close, but this year **Vitest** is the technology developers are most interested in with a **{value}** interest ratio.
+
+    - key: award.most_write_ins_award.comment
+      t: With **{value}** mentions, **Bun** was the most mentioned technology overall in freeform questions.
+
+    - key: award.most_commented_tool_award.comment
+      t: With **{value}** comments, React showed that it's once again the most-discussed library around.
+
+    - key: award.most_loved_tool_award.comment
+      t: With **{value}** of all developers having a positive opinion of it, Vite concludes its sweep of these awards by being the most-loved technology around!
+
+    ###########################################################################
+    # Conclusion
+    ###########################################################################
+
+    - key: conclusion.react2024.josh_comeau
+      t: |
+
+          <span class="first-line">What a year!</span>
+
+          With the introduction of React Server Components, I’d say this has been the biggest year for React since 2018, when React Hooks were first introduced.
+
+          In the 5 years since 2018, Hooks have reached overwhelming adoption. A whopping 99.5% of survey respondents have adopted `useState`, and less than 2% are unhappy about it. Class components still exist, but they’ve been relegated to legacy codebases and the occasional error boundary component.
+
+          I wonder, though… Will we all be using Server Components 5 years after their release, in 2028? I’m not so sure. The Server Components paradigm requires deep integration with the bundler and router. It’s not something that most developers can start incrementally adopting in their current React codebase.
+
+          React developers like to keep up-to-date; 71% of survey respondents said they were using React 18, the newest version available when this data was collected. At the same time, the most widely-used React environment is still Create React App, despite being officially deprecated and not having a release since April 2022. We’ll happily update React when a new version comes out, but we’re not about to switch to a different environment; 37% of survey respondents have never even used SSR (Server Side Rendering), even though it’s been an option for over a decade now!
+
+          If I had to guess, I’d say that in 2028, there will be two Reacts in wide circulation with roughly equivalent usage. The “full-stack” version, with Server Components and Server Actions, and the client-only Single Page App version.
+
+          We live in interesting times! I’m excited to see how React and its ecosystem evolves over the coming years. ❤️
+
+    - key: conclusion.react2024.josh_comeau.bio
+      t: Software engineer and educator. Creator of [The Joy of React](https://www.joyofreact.com/)
+
+    ###########################################################################
+    # Picks
+    ###########################################################################
+
+    - key: picks.my_pick
+      t: "My 2024 Pick: "
+    - key: picks.intro
+      t: We asked members of the React community to share their “pick of the year”
+
+    # https://zustand-demo.pmnd.rs
+    - key: picks.jack_herrington.name
+      t: Zustand
+    - key: picks.jack_herrington.bio
+      t: Principal Engineer and YouTuber
+    - key: picks.jack_herrington.description
+      t: |
+          Simple, elegant, extensible state management that "just works" (tm). Nowadays, you might not need state management, but if you do, Zustand is a great place to start.
+
+    # https://react.dev/reference/rsc/server-components
+    - key: picks.alex_sidorenko.name
+      t: React Server Components
+    - key: picks.alex_sidorenko.bio
+      t: Making short videos about Next.js on Twitter
+    - key: picks.alex_sidorenko.description
+      t: |
+          Eleven years ago, React reimagined web development by challenging established practices. Now, React is doing this again with RSC. 
+
+          P.S. Shout out to the Next.js team for pushing this new vision forward.
+
+    # https://youtube.com/watch?v=zqhE-CepH2g
+    - key: picks.sam_selikoff.name
+      t: |
+          "Mind the Gap" – Ryan Florence's talk at Big Sky Dev Con 2024
+    - key: picks.sam_selikoff.bio
+      t: Videos for frontend developers on Build UI and YouTube, co-host of the Frontend First podcast
+    - key: picks.sam_selikoff.description
+      t: |
+          Ryan masterfully shows how React's new "use server" and "use client" directives let us build rich features on both sides of the network, using the same unified paradigm. A must-watch for any React developer.
+
+    # https://www.remotion.dev/
+    - key: picks.sebastien_lorber.name
+      t: Remotion
+    - key: picks.sebastien_lorber.bio
+      t: Creator of [This Week in React](https://thisweekinreact.com/)
+    - key: picks.sebastien_lorber.description
+      t: |
+          The idea of creating programmatic videos in React continues to fascinate me. Remotion is a rather discreet project, which continues to grow slowly but steadily, successfully adopted by DevRels, educators, indie makers and larger companies (notably GitHub's Unwrapped video campaign).
+
+    # https://buildui.com/posts/instant-search-params-with-react-server-components
+    - key: picks.aurora_scharff.name
+      t: Instant Search Params with React Server Components
+    - key: picks.aurora_scharff.bio
+      t: Web developer and consultant at Inmeta
+    - key: picks.aurora_scharff.description
+      t: |
+          This blog post goes through a problem you would must likely encounter when building a proper app with the Next.js App Router: handling search params. It’s surprisingly hard to make interactions behave “perfectly”, and the post end with the solution: useOptimistic. It also teaches you about transitions with lots of sandbox demos.
+
+    # https://mui.com/blog/introducing-pigment-css/
+    - key: picks.josh_comeau.name
+      t: Pigment CSS
+    - key: picks.josh_comeau.bio
+      t: Software engineer and educator. Creator of [The Joy of React](https://www.joyofreact.com/)
+    - key: picks.josh_comeau.description
+      t: |
+          The Material UI team is building a next-gen CSS-in-JS library that pulls the styled API into the React Server Components era. There’s no shortage of CSS-in-JS tools out there, but this one checks all of the boxes for me.
+
+    # https://www.propelauth.com/post/nextjs-challenges
+    - key: picks.carl_vitullo.name
+      t: It’s not just you, Next.js is getting harder to use
+    - key: picks.carl_vitullo.bio
+      t: Solopreneur currently hosting [This Month in React](https://podcasts.apple.com/us/podcast/this-month-in-react/id1661733526), and community lead at [Reactiflux](https://www.reactiflux.com/)
+    - key: picks.carl_vitullo.description
+      t: |
+          This was a great blog post! I think it captures the current zeitgeist in React, clearly articulates a frustration that's been simmering in the ecosystem through 2024.
+
+    # https://sonner.emilkowal.ski
+    - key: picks.miguel_angel_duran.name
+      t: Sonner
+    - key: picks.miguel_angel_duran.bio
+      t: Twitch Coding Streamer & Content Creator
+    - key: picks.miguel_angel_duran.description
+      t: |
+          Sonner is the best toast component for React. Beautiful by default, highly configurable, and with a simple API to use in any project. Wonderful work by Emil.
+
+    # https://docs.expo.dev/router/introduction/
+    - key: picks.lydia_hallie.name
+      t: Expo Router
+    - key: picks.lydia_hallie.bio
+      t: Independent software engineer and technical content creator
+    - key: picks.lydia_hallie.description
+      t: |
+          Expo Router earns my pick for its incredible potential in both the web and native space. It's the first framework to leverage React's full power to operate across all platforms, making React a true platform-agnostic renderer. Its file-based architecture makes it simpler for web developers to adapt to native platforms, speeding up development, and reducing the time to ship across all devices.
+
+    #
+    # - key: picks.xxx.name
+    #   t:
+    # - key: picks.xxx.bio
+    #   t:
+    # - key: picks.xxx.description
+    #   t: |
+
+    ###########################################################################
+    # Sponsors
+    ###########################################################################
+
+    - key: sponsors.frontendmasters.description
+      t: Advance your skills with in-depth, modern front-end engineering courses.
+    - key: sponsors.google_chrome.description
+      t: Thanks to the Google Chrome team for supporting our work.
+    - key: sponsors.tokyodev.description
+      t: Find your dream developer job in Japan today.
+    - key: sponsors.renderatl.description
+      t: The tech conference focused on all things web.
+
+    ###########################################################################
+    # FAQ/About
+    ###########################################################################
+
+    # React 2023
+
+    - key: faq.data_used_react2024
+      t: How will this data be used?
+    - key: faq.data_used_react2024.description
+      t: >
+          All data collected will be released openly for anybody to consult. Developers or companies may use it to prioritize focus areas and inform their roadmaps.
+
+    - key: faq.survey_goals_react2024
+      t: What are the survey's goals?
+    - key: faq.survey_goals_react2024.description
+      t: >
+          The survey's goals are to measure awareness and popularity of React APIs, as well as libraries in the React ecosystem.
+
+    - key: faq.who_should_take_survey_react2024
+      t: Who should take this survey?
+    - key: faq.who_should_take_survey_react2024.description
+      t: >
+          This is an open survey for anybody who uses React, whether regularly or occasionally, as part of their job, as a student, or just for fun!
+
+    - key: faq.how_long_will_survey_take_react2024
+      t: How long will answering the survey take?
+    - key: faq.how_long_will_survey_take_react2024.description
+      t: >
+          Depending on how many questions you answer (all questions are optional),
+          filling out the survey should take around 15-20 minutes.
+
+    - key: faq.survey_design_react2024
+      t: How was this survey designed?
+    - key: faq.survey_design_react2024.description
+      t: >
+          The survey was designed with input from the community through an [open feedback thread](https://github.com/Devographics/surveys/issues/250).
+
+    - key: faq.results_released_react2024
+      t: When will the results be released?
+    - key: faq.results_released_react2024.description
+      t: The survey will run from October 19 to November 19, and the survey results will be released shortly after that.
+
+    - key: about.content
+      t: |
+          The 2024 State of React survey ran from October 27 to November 15 2024, and collected 13,003 responses. The results were published on July 20, 2024. The survey is run by [Devographics](https://devographics.com/), a collective consisting of me ([Sacha Greif](https://sachagreif.com/)) and [Eric Burel](https://www.lbke.fr/), as well as invited experts and open-source contributors. 
+
+          The State of React logo and t-shirt were designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/).
+
+          ### Survey Goals
+
+          This survey was created to identify upcoming trends in the React ecosystem in order to help developers make technological choices. 
+
+          As such, the survey is focused on anticipating what's coming over the next few years rather than analyzing what's popular now, which is why features or technologies may sometimes be omitted even if they are currently widespread 
+
+          It should also be taken as a **snapshot of a specific subset of developers**, and is not meant to speak for the entire React ecosystem. 
+
+          ### Survey Design
+
+          The survey was designed in part based on last year's survey, with an open feedback period where the survey outline was discussed [on GitHub](https://github.com/Devographics/surveys/issues/85). 
+
+          All survey questions were optional. 
+
+          ### Survey Audience
+
+          The survey was openly accessible online and respondents were not filtered or selected in any way. Respondents were primarily a mix of respondents from past surveys (alerted through a dedicated mailing list) and social media traffic. 
+
+          Note that frameworks, libraries, etc. were free to encourage their audience to participate in the survey and some of them did take advantage of this via banners, tweets, etc. A detailed breakdown of traffic sources is included in the "Sources" chart. 
+
+          ### Project Funding
+
+          Funding from this project comes from a variety of sources:
+
+          - **T-shirt sales**. 
+
+          - **Sponsored links**: the links to recommended resources at the bottom of each page are provided by our partner [Frontend Masters](https://frontendmasters.com/).
+
+          - **Direct Funding**: this year, [Google](https://www.google.com/) and [TokyoDev](https://www.tokyodev.com/) funded my work on the surveys. 
+
+          Any contribution or sponsorship is greatly appreciated. we would especially like to work closely with more browser vendors, since they play such a central role in the web ecosystem.  
+
+          ### Technical Overview
+
+          You can find a more in-depth technical overview of how the surveys are run [here](https://dev.to/sachagreif/how-the-devographics-surveys-are-run-2024-edition-1p6a).
+
+          **Note: This is *not* an official React survey, and the survey team is not affiliated with Meta, Vercel, or the React team.**
+
+          ### Special Thanks
+
+          Special thanks for their ongoing support to Paul McMahon, Marc Grabanski, and Justin E. Samuels.