├── config.yml
├── crowdin.yml
├── .github
└── workflows
│ ├── ping-api.yml
│ └── yaml-validation.yml
├── accounts.yml
├── react2025.yml
├── README.md
├── js2025.yml
├── homepage.yml
├── how_to_help.yml
├── surveys.yml
├── css2020.yml
├── html2023.yml
├── js2020.yml
├── demo2022.yml
├── ai2025.yml
├── graphql2022.yml
├── demo_survey.yml
├── state_of_graphql.yml
├── css2021.yml
└── js2021.yml
/config.yml:
--------------------------------------------------------------------------------
1 | id: en-US
2 | label: English
3 | translators: []
4 | active: true
5 |
--------------------------------------------------------------------------------
/crowdin.yml:
--------------------------------------------------------------------------------
1 | files:
2 | - source: '*.yml'
3 | translation: /%two_letters_code%/%original_file_name%
4 |
--------------------------------------------------------------------------------
/.github/workflows/ping-api.yml:
--------------------------------------------------------------------------------
1 | name: Ping API on Commit
2 |
3 | on:
4 | push:
5 | branches:
6 | - "**" # Trigger on any branch
7 |
8 | jobs:
9 | ping-api:
10 | runs-on: ubuntu-latest
11 |
12 | steps:
13 | - name: Get Repository Name
14 | id: repo_name
15 | run: echo "::set-output name=name::$(basename $GITHUB_REPOSITORY)"
16 |
17 | - name: Ping API
18 | env:
19 | I18N_SECRET_KEY: ${{ secrets.I18N_SECRET_KEY }} # Set your secret in repository settings
20 | ACTIONS_ENDPOINT_URL: ${{ secrets.ACTIONS_ENDPOINT_URL }} # Set your secret in repository settings
21 | run: |
22 | curl -X GET "$ACTIONS_ENDPOINT_URL?locale=${{ steps.repo_name.outputs.name }}&secretKey=$I18N_SECRET_KEY"
23 |
--------------------------------------------------------------------------------
/.github/workflows/yaml-validation.yml:
--------------------------------------------------------------------------------
1 | # This is a basic workflow to help you get started with Actions
2 |
3 | name: YAML Validation
4 |
5 | # Controls when the workflow will run
6 | on:
7 | # Triggers the workflow on push or pull request events but only for the main branch
8 | push:
9 | branches: [main]
10 | pull_request:
11 | branches: [main]
12 |
13 | # Allows you to run this workflow manually from the Actions tab
14 | workflow_dispatch:
15 |
16 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel
17 | jobs:
18 | # This workflow contains a single job called "validate-yaml"
19 | validate-yaml:
20 | # The type of runner that the job will run on
21 | runs-on: ubuntu-latest
22 |
23 | # Steps represent a sequence of tasks that will be executed as part of the job
24 | steps:
25 | - uses: actions/checkout@v2
26 | - name: YAML Lint
27 | uses: ibiqlik/action-yamllint@v3.0.4
28 | with:
29 | config_data: |
30 | extends: default
31 | rules:
32 | line-length: disable
33 | new-line-at-end-of-file: disable
34 | trailing-spaces: disable
35 | document-start: disable
36 | empty-lines: disable
37 | truthy: disable
38 |
--------------------------------------------------------------------------------
/accounts.yml:
--------------------------------------------------------------------------------
1 | locale: en-US
2 | translations:
3 | - key: accounts.error_incorrect_password
4 | t: Incorrect password
5 | - key: accounts.error_email_required
6 | t: Email required
7 | - key: accounts.error_email_already_exists
8 | t: Email already exists
9 | - key: accounts.error_invalid_email
10 | t: Invalid email
11 | - key: accounts.error_minchar
12 | t: Your password is too short
13 | - key: accounts.error_unknown
14 | t: Unknown error
15 | - key: accounts.error_user_not_found
16 | t: User not found
17 | - key: accounts.error_username_already_exists
18 | t: Username already exists
19 | - key: accounts.enter_username_or_email
20 | t: Enter username or email
21 | - key: accounts.error_internal_server_error
22 | t: Internal server error
23 | - key: accounts.error_token_expired
24 | t: Invalid password reset token
25 | - key: accounts.username_or_email
26 | t: Username or email
27 | - key: accounts.enter_username
28 | t: Enter username
29 | - key: accounts.username
30 | t: Username
31 | - key: accounts.enter_email
32 | t: Enter email
33 | - key: accounts.email
34 | t: Email
35 | - key: accounts.enter_password
36 | t: Enter password
37 | - key: accounts.password
38 | t: Password
39 | - key: accounts.choose_password
40 | t: Choose password
41 | - key: accounts.change_password
42 | t: Change password
43 | - key: accounts.reset_your_password
44 | t: Reset your password
45 | - key: accounts.set_password
46 | t: Set password
47 | - key: accounts.enter_new_password
48 | t: Enter new password
49 | - key: accounts.new_password
50 | t: New password
51 | - key: accounts.forgot_password
52 | t: Forgot password
53 | - key: accounts.sign_up
54 | t: Sign up
55 | - key: accounts.sign_in
56 | t: Log in
57 | - key: accounts.switch_to_sign_up
58 | t: Don't have an account ? Sign up
59 | - key: accounts.switch_to_sign_in
60 | t: Already have an account? Log in
61 | - key: accounts.sign_out
62 | t: Sign out
63 | - key: accounts.cancel
64 | t: Cancel
65 | - key: accounts.info_email_sent
66 | t: Email sent.
67 | - key: accounts.info_password_changed
68 | t: Password changed.
69 | - key: accounts.please_pick_password
70 | t: Please pick a new password to continue.
71 | - key: accounts.please_log_in
72 | t: Please log in or sign up to begin.
73 | - key: accounts.logged_in_as
74 | t: Logged in using your email address
75 | - key: accounts.logged_in_as_guest
76 | t: Logged in as Guest
77 | - key: accounts.questions
78 | t: >
79 | If you have any questions about how we use your data, or would like
80 | us to remove your data from our records,
81 | please get in touch.
82 |
83 | - key: accounts.token_verified
84 | t: Token verification successful, redirecting…
85 |
86 | - key: accounts.your_surveys
87 | t: Your Surveys
88 |
--------------------------------------------------------------------------------
/react2025.yml:
--------------------------------------------------------------------------------
1 | locale: en-US
2 | translations:
3 | ###########################################################################
4 | # General
5 | ###########################################################################
6 |
7 | - key: general.results.description
8 | t: The 2025 edition of the annual survey about the latest trends in the React ecosystem.
9 |
10 | ###########################################################################
11 | # Introduction
12 | ###########################################################################
13 |
14 | - key: general.react2025.survey_intro
15 | t: |
16 | Given that it originally came out of a company whose motto was “move fast and break things”, it's ironic that React's approach could be summarized as “slow and steady”.
17 |
18 | The React team has done a remarkable job of evolving the framework into its current modern state, progressively introducing innovations like Server Components and then letting the community adopt them (or not!) at its own pace.
19 |
20 | This year, it's time for the long-awaited Compiler to make its official debut. And things are also moving on the administrative front, with the recently-introduced [React foundation](https://react.dev/blog/2025/10/07/introducing-the-react-foundation).
21 |
22 | So whether you're on the cutting edge of new React features, or adopting innovations at a slower pace, join us once again to figure out where React is going by taking this year's State of React survey!
23 |
24 | - key: features.features_intro.react2025
25 | t: |
26 | Welcome to the survey! This first part is all about sharing your experience with various React features:
27 |
28 |
29 | - **Never heard of it**: it's your first time seeing this – or you've heard of it but have no idea what it does.
30 |
31 | - **Heard of it**: you've read or learned about this, but haven't actually used it yet.
32 |
33 | - **Used it**: you've used this at least once, even if it was just to play around.
34 |
35 |
36 | By the way, if you want to tell us more about any of your choices, just click that little "comment" icon!
37 |
38 | - key: tools.tools_intro.react2025
39 | t: |
40 | This next part of the survey is all about the various libraries and frameworks that make up the React ecosystem.
41 |
42 | ###########################################################################
43 | # FAQ/About
44 | ###########################################################################
45 |
46 | - key: faq.survey_design_react2025
47 | t: How was this survey designed?
48 | - key: faq.survey_design_react2025.description
49 | t: >
50 | The survey was designed with input from the community through an [open feedback thread](https://github.com/Devographics/surveys/issues/262).
51 |
52 | - key: faq.results_released_react2025
53 | t: When will the results be released?
54 | - key: faq.results_released_react2025.description
55 | t: The survey will run from October 25 to November 25, and the survey results will be released shortly after that.
56 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # locale-en-US
2 |
3 | This repo contains the English language files for the State of JS/CSS/HTML/etc. surveys, which serve as a base to translate all the other languages. You can view a list of [all the locales repos here](https://github.com/orgs/Devographics/repositories?q=locale-&type=all&language=&sort=name).
4 |
5 | ## How To Help
6 |
7 | #### 1. Becoming a Translator
8 |
9 | To start helping translate the survey, you should [join the Discord](https://discord.com/invite/zRDb35jfrt) and DM me (`SachaG`) your GitHub username, along with the locale code (`fr-FR`, `zh-Hant`, etc.) for the language you'd like to help with.
10 |
11 | I will then give you maintainer rights over a repo containing all the translation `yaml` files, and from now on you can manage it yourself along with other members of the translation team.
12 |
13 | #### 2. Finding Things to Translate
14 |
15 | You can either browse the survey-taking app, survey results site, etc. and find untranslated strings this way, or else use our API to get extra data such as the completion percentage for a locale or a list of all the untranslated strings:
16 |
17 | - https://graphiql.devographics.com/
18 |
19 | Here is a sample query:
20 |
21 | ```graphql
22 | query GetLocaleData {
23 | locale(localeId: ru_RU) {
24 | completion
25 | totalCount
26 | translatedCount
27 | translators
28 | untranslatedKeys
29 | }
30 | }
31 | ```
32 |
33 | #### 3. Getting Credit
34 |
35 | Every translator will be credited on any site that makes use of the translations, starting with the survey-taking app. In order to receive credit, add your GitHub username to the `translators` array in each locale's `config.yml` file.
36 |
37 | Here is an example for the `de-DE` locale:
38 |
39 | - https://github.com/Devographics/locale-de-DE/blob/main/config.yml#L3
40 |
41 | #### 4. Pushing Your Changes Live
42 |
43 | There is currently no automated hook to update the production apps when a translation is updated, so for now the best way is to DM me on Discord to let me know when you're finished.
44 |
45 | ## Translation Files
46 |
47 | #### Surveys App
48 |
49 | These strings are related to the app that you use to fill out the actual survey.
50 |
51 | - `surveys.yml`
52 | - `accounts.yml`
53 | - `state_of_js_2020_survey.yml`
54 |
55 | #### Results App
56 |
57 | These strings only appear in the static site that displays the survey results and stats.
58 |
59 | - `results.yml`
60 | - `state_of_css_2020.yml`
61 | - `state_of_js_2020.yml`
62 |
63 | #### Both
64 |
65 | These strings appear in both.
66 |
67 | - `common.yml`
68 | - `state_of_css.yml`
69 | - `state_of_js.yml`
70 |
71 | #### Other
72 |
73 | - `homepage.yml`
74 |
75 | ## Joining Translation Teams
76 |
77 | It's recommended you join the [translation team](https://github.com/orgs/Devographics/teams/translators/teams) for the language you want to translate.
78 |
79 | ## Local Development
80 |
81 | There is currently no easy way to see your strings in context while developing locally. We are working on it.
82 |
83 | ## Getting Help
84 |
85 | Join [our Discord](https://discord.gg/zRDb35jfrt).
86 |
--------------------------------------------------------------------------------
/js2025.yml:
--------------------------------------------------------------------------------
1 | locale: en-US
2 | translations:
3 | ###########################################################################
4 | # General
5 | ###########################################################################
6 |
7 | - key: finish.share_message.js2025
8 | t: The State of JS 2025 survey is now open! {link}
9 |
10 | - key: general.results.description
11 | t: The 2025 edition of the annual survey about the latest trends in the JavaScript ecosystem.
12 |
13 | ###########################################################################
14 | # Survey Intro
15 | ###########################################################################
16 |
17 | - key: general.js2025.survey_intro
18 | t: >
19 | JavaScript, you OK? You've barely created any new front-end frameworks this year.
20 |
21 |
22 | After a decade of rapid iteration, it seems clear that the ecosystem has stabilized over the last few years. For example, did you know that “newcomer” Svelte is *9 years old*? Which, in JavaScript framework years, is basically ancient!
23 |
24 |
25 | Instead, the main battle has moved to the realm of meta-frameworks, with Astro making a serious attempt at Next.js's crown – while over in build-tool land, it seems only a matter of time until Vite overtakes webpack.
26 |
27 |
28 | Or maybe something else entirely will appear out of the Rust ecosystem and suddenly take over, bringing a premature end to our well-deserved era of peace and quiet.
29 |
30 |
31 | Whatever happens, one thing's for sure: you can help us figure it all out by taking this year's State of JavaScript survey!
32 |
33 | ###########################################################################
34 | # Survey FAQ
35 | ###########################################################################
36 |
37 | - key: faq.how_long_will_survey_take_js2025
38 | t: How long will answering the survey take?
39 | - key: faq.how_long_will_survey_take_js2025.description
40 | t: >
41 | Depending on how many questions you answer (all questions can be skipped),
42 | filling out the survey should take around 15-20 minutes.
43 |
44 | - key: faq.survey_design_js2025
45 | t: How was this survey designed?
46 | - key: faq.survey_design_js2025.description
47 | t: >
48 | This survey was designed as the results of an [open design process](https://github.com/Devographics/surveys/issues/307) involving browser vendors and the web development community.
49 |
50 | - key: faq.results_released_js2025
51 | t: When will the results be released?
52 | - key: faq.results_released_js2025.description
53 | t: The survey will run from October 1 to November 1, 2025, and the survey results will be released shortly after.
54 |
55 | ###########################################################################
56 | # Overview
57 | ###########################################################################
58 |
59 | - key: overview_1_frontend_fatigue.js2025
60 | t: |
61 | Front-end Frameworks
62 |
63 | - key: overview_2_whats_next.js2025
64 | t: |
65 | Meta Frameworks
66 |
67 | - key: overview_3_back_in_business.js2025
68 | t: |
69 | Back-end Frameworks
70 |
71 | - key: overview_4_build_it.js2025
72 | t: |
73 | Build Tools
74 |
75 | - key: overview_5_static_typing.js2025
76 | t: |
77 | Static Typing
78 |
79 | - key: overview_6_other_languages.js2025
80 | t: |
81 | Other Languages
82 |
83 | - key: overview_7_conclusion.js2025
84 | t: |
85 | ### Now Open
86 | ## State of React 2025
87 |
--------------------------------------------------------------------------------
/homepage.yml:
--------------------------------------------------------------------------------
1 | locale: en-US
2 | translations:
3 | ###########################################################################
4 | # Homepage
5 | ###########################################################################
6 |
7 | - key: homepage.hand_coded
8 | t: Hand-coded in Japan.
9 | - key: homepage.leave_issue
10 | t: Report an issue
11 | - key: homepage.get_in_touch
12 | t: Get in touch
13 |
14 | - key: homepage.previous_years
15 | t: "Previous Years:"
16 |
17 | - key: homepage.take_survey
18 | t: Take Survey
19 |
20 | - key: homepage.view_results
21 | t: View Results
22 |
23 | - key: homepage.results_coming_soon
24 | t: Results Coming Soon…
25 |
26 | - key: share.help_spread
27 | t: Help Spread the Word!
28 |
29 | - key: homepage.other_surveys
30 | t: "Other Surveys:"
31 |
32 | - key: homepage.survey_open_now
33 | t: Currently Open
34 |
35 | - key: homepage.survey_preview
36 | t: Preview Survey
37 |
38 | - key: homepage.most_recent_survey
39 | t: Most Recent
40 |
41 | - key: homepage.current_survey
42 | t: Current Survey
43 |
44 | - key: homepage.past_surveys
45 | t: Past Surveys
46 |
47 | - key: homepage.view_questions
48 | t: View Questions
49 |
50 | - key: homepage.preview_questions
51 | t: Preview Questions
52 |
53 | # newsletter
54 | - key: newsletter.stay_tuned
55 | t: Don't Miss the Next Survey
56 | - key: newsletter.leave_your_email
57 | t: Leave us your email and we’ll let you know when the next survey takes place.
58 | - key: newsletter.email
59 | t: Your Email
60 | - key: newsletter.submit
61 | t: Notify Me
62 | - key: newsletter.thanks
63 | t: Thanks for signing up!
64 |
65 | # languages
66 | - key: languages.available_languages
67 | t: "Available languages:"
68 | - key: languages.help_us_translate
69 | t: Help us translate the survey in your language →
70 |
71 | # partners
72 | - key: homepage.with_support_from
73 | aliasFor: sponsors.with_support_from
74 |
75 | # footer
76 | - key: homepage.made_by_devographics
77 | aliasFor: general.made_by_devographics
78 | - key: homepage.netlify_link
79 | aliasFor: general.netlify_link
80 |
81 | - key: homepage.join_discord
82 | aliasFor: general.join_discord
83 | - key: homepage.astro_link
84 | t: Powered by [Astro](https://astro.build/)
85 |
86 | # creators
87 | - key: creators.heading
88 | t: Creators We Support
89 |
90 | - key: creators.description
91 | t: |
92 | Our surveys are only possible because of the developer community's ongoing support, and it's only natural that we also give back when we can.
93 |
94 |
95 | These are some of the awesome content creators and organizations we support financially, in exchange for raising awareness around the surveys.
96 |
97 | - key: creators.stephanie_walter.description
98 | t: |
99 | Stéphanie Walter is an accomplished UX Researcher, Designer, and Writer living in Luxembourg with a knack for making otherwise complex topics clear and easy to understand.
100 |
101 | - key: creators.afor_digital.description
102 | t: |
103 | Afor is a key figure in the Spanish-language web development streaming community, and her talent for making programming content compelling have led to her well-deserved success.
104 |
105 | - key: creators.shruti_kapoor.description
106 | t: |
107 | Between blogging, producing YouTube videos, speaking at conferences, and generally being an all-around great person, Shruti has been a mainstay of the React ecosystem for a while now.
108 |
109 | - key: creators.codebar.description
110 | t: |
111 | Codebar is an amazing organization that puts together workshops that would usually cost thousands of dollars, and makes them available for free online in order to build a more inclusive developer community.
112 |
113 | # calendar
114 |
115 | - key: calendar.heading
116 | t: |
117 | {currentYear} Surveys
118 | - key: calendar.feedbackAt
119 | t: Feedback start
120 | - key: calendar.startedAt
121 | t: Survey start
122 | - key: calendar.endedAt
123 | t: Survey end
124 | - key: calendar.releasedAt
125 | t: Results release
126 | - key: calendar.past_editions
127 | t: Past Surveys
128 | - key: calendar.ongoing_editions
129 | t: Ongoing Surveys
130 | - key: calendar.upcoming_editions
131 | t: Upcoming Surveys
132 | - key: calendar.no_editions
133 | t: No surveys.
134 | - key: calendar.give_feedback
135 | t: Suggest questions →
136 | - key: calendar.take_survey
137 | t: Take survey →
138 | - key: calendar.view_results
139 | t: View results →
140 |
--------------------------------------------------------------------------------
/how_to_help.yml:
--------------------------------------------------------------------------------
1 | # NOTE: not ready for translation currently
2 | locale: en-US
3 | translations:
4 |
5 | - key: how_to_help.content
6 | t: >
7 | Although the State of JavaScript and CSS do earn some revenue, they still rely primarily on volunteer work. If you'd like to join the project and help out, here are a few things we always need help with.
8 |
9 | ### Translation
10 |
11 | The surveys are now translated in 20+ languages, but a lot of the translations are incomplete or out of date. If you'd like to help, [join our Discord](https://discord.gg/tuWRUWVyJs) and give your GitHub username in the **#translations** channel.
12 |
13 | ### Outreach
14 |
15 | It's no secret that audiences for developer surveys in general tend to skew male, white, and U.S.-based. If you'd like to help us balance things out a bit, we could definitely use your help!
16 |
17 | Outreach efforts include things like reaching out to organizations focused on helping minoritized populations negotiate the tech world, submitting links to the survey to various online communities, emailing blogs or magazines about the survey, and generally trying to diversify the survey's audience. If you'd like to help, [join our Discord](https://discord.gg/tuWRUWVyJs)'s **#outreach** channel (feel free to mute every other channel if you'd like).
18 |
19 | Specifically, we'd love some help reaching out to organizations focused on:
20 |
21 |
22 | - BIPOC developers
23 |
24 |
25 | - LGBTQ+ developers
26 |
27 |
28 | - Women developers
29 |
30 |
31 | - Developers with disabilities
32 |
33 |
34 | - Developers in under-represented countries (China, Brazil, India, Japan, etc.)
35 |
36 |
37 | ### Writing & Analysis
38 |
39 | Even though we try and surface interesting insights every year, we know there is no way to cover everything in a single report. If you're a data scientist or just curious about tech trends, we would love to see your own spin on our data! This can be a great way to broaden the dialog around the survey, especially when it comes to highlighting under-represented communities like the ones mentioned above.
40 |
41 | You can either use the chart customization feature (pencil icon next to some charts) and our [public GraphQL API](https://api.stateofjs.com/) to create new visualizations, or [join our Discord](https://discord.gg/tuWRUWVyJs) and get in touch to ask for the full JSON dataset.
42 |
43 | ### Coding
44 |
45 | The entirety of our codebases are open-source, and we welcome contributions. I suggest first [getting familiar with how the surveys are run](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb), and then [dropping by the Discord](https://discord.gg/tuWRUWVyJs) to let me know what you'd like to work on.
46 |
47 | ### Deals & Partnerships
48 |
49 | In the future, we want to explore providing deals or discounts on products to our survey respondents as a way of rewarding survey participants and incentivizing new audiences to take part in the survey,
50 |
51 | ### Financial Support
52 |
53 | #### Grants & Funding
54 |
55 | Of course, another way to help is to simply provide funding. For example, thanks to a grant received from Google we've been able to hire an expert to do a full accessibility audit of the project.
56 |
57 | #### Chart Sponsorships
58 |
59 | If you'd like to support the survey on a smaller scale, you can also now
60 |
61 | #### Recommended Resources
62 |
63 | If you create content relevant to our audience, you can also purchase one of the "Recommended Resources" links displayed at the bottom of each page. We also make these spots available for free for
64 |
65 | Recommended Resources
66 | Chart sponsorships
67 | Discounts
68 | Other partnerships
69 |
70 | #### A Note About Paid Work
71 |
72 | I have talked mainly about volunteer work here but we also have a small budget to pay consultants or experts, and are working on finding partners to subsidize more work. More specifically, we prefer paying for tasks that:
73 |
74 |
75 | - Are **limited in scope**, since the budget will probably be limited too.
76 |
77 |
78 | - Require **special expertise** that would not be easily provided by volunteers.
79 |
80 |
81 | - Are **self-contained** and don't require too much follow-up work since we might not have time to do it.
82 |
83 |
84 | Good examples include: illustrations & branding work, usability or accessibility audits, data visualization work, outreach work, etc.
85 |
86 | So although we can't promise much, if you'd like to contribute to the project but can't afford to work on a volunteer basis, don't hesitate to [join the Discord](https://discord.gg/tuWRUWVyJs) and get in touch!
--------------------------------------------------------------------------------
/surveys.yml:
--------------------------------------------------------------------------------
1 | locale: en-US
2 | translations:
3 | ###########################################################################
4 | # General
5 | ###########################################################################
6 |
7 | - key: general.title
8 | t: Devographics Surveys
9 | - key: general.description
10 | t: The State of JavaScript, State of CSS, State of HTML, and other developer surveys.
11 |
12 | - key: general.no_preview_surveys
13 | t: No surveys to preview
14 | - key: general.global_nav
15 | t: Global
16 | - key: general.survey_status_preview
17 | t: Preview
18 | - key: general.survey_status_open
19 | t: Open
20 | - key: general.survey_status_closed
21 | t: Closed
22 | - key: general.survey_status_hidden
23 | t: Hidden
24 |
25 | - key: general.pick_up_to
26 | t: Pick up to {limit} items.
27 |
28 | - key: general.privacy_policy
29 | t: Privacy Policy
30 | - key: general.privacy_policy.description
31 | t: >
32 | ### 1. Data Collection
33 |
34 | In addition to the data collected through a survey's questions, we collect your device, browser, OS, browser version, and referrer.
35 |
36 | Note that all questions are entirely optional, and we never link any identifiable information (such as email addresses) to your survey answers.
37 |
38 | ### 2. Email Collection
39 |
40 | We may optionally collect your email to:
41 |
42 |
43 | 1. Generate a magic log-in link, after which we discard your email and only keep a one-way hash in our user database.
44 |
45 | 2. Contact you once survey results are available, as well as when we launch future editions of a survey and for infrequent announcements. You can unsubscribe from our mailing list at any time, and your email is discarded from our records once it is sent to our email newsletter provider.
46 |
47 | 3. Send you a recap list of features or tools you want to learn more about. We will discard your address once the email has been sent out through our transactional email provider.
48 |
49 |
50 | Whenever we do collect your email address for the above purposes, it is never linked to your responses for a survey or to your user account, and it is never stored on our own servers or databases.
51 |
52 | ### 3. Cookies
53 |
54 | We set a log-in cookie, and our hosting provider (Vercel) may also sets its own cookie. We do not set any other cookie or use client-side analytics or ads.
55 |
56 | ### 4. Data Use
57 |
58 | We process the data and then use it to publish reports. We also make the entire dataset publicly available.
59 |
60 | ### 5. Data/Account Deletion
61 |
62 | You can email us at [hello@stateofjs.com](mailto:hello@stateofjs.com) if you'd like us to delete all or part of your data.
63 |
64 | ###########################################################################
65 | # Other UI Strings
66 | ###########################################################################
67 |
68 | - key: textlist.placeholder
69 | t: Item {index}…
70 |
71 | - key: feature.unimplemented
72 | t: No browser implementation yet
73 |
74 | - key: general.skip_question
75 | t: Skip
76 |
77 | - key: general.unskip_question
78 | t: Answer Question
79 |
80 | - key: general.skip_question.description
81 | t: Skip question and mark it as completed
82 |
83 | - key: general.unskip_question.description
84 | t: Unskip question and answer it
85 |
86 | - key: years.less_than_one_year
87 | t: Less than one year
88 |
89 | - key: years.years
90 | t: years
91 |
92 | - key: likert.happiness.option.0
93 | t: Very Unhappy
94 | - key: likert.happiness.option.1
95 | t: Unhappy
96 | - key: likert.happiness.option.2
97 | t: Neutral
98 | - key: likert.happiness.option.3
99 | t: Happy
100 | - key: likert.happiness.option.4
101 | t: Very Happy
102 |
103 | - key: likert.agreement.option.0
104 | t: Strongly Disagree
105 | aliases:
106 | - likert.option.0
107 | - key: likert.agreement.option.1
108 | t: Disagree
109 | aliases:
110 | - likert.option.1
111 | - key: likert.agreement.option.2
112 | t: Neutral
113 | aliases:
114 | - likert.option.2
115 | - key: likert.agreement.option.3
116 | t: Agree
117 | aliases:
118 | - likert.option.3
119 | - key: likert.agreement.option.4
120 | t: Strongly Agree
121 | aliases:
122 | - likert.option.4
123 |
124 | - key: general.numeric_input.invalid_input
125 | t: Please make sure you enter a valid number.
126 |
127 | - key: general.numeric_input.unit.years
128 | t: years
129 | - key: general.numeric_input.unit.years_old
130 | t: years old
131 | - key: general.numeric_input.unit.hours
132 | t: hours
133 |
134 | - key: general.check_all
135 | t: >
136 | Check all that apply.
137 |
138 | ###########################################################################
139 | # Errors & Messages
140 | ###########################################################################
141 |
142 | - key: error.duplicate_response
143 | t: Sorry, you already have a session in progress for this survey.
144 |
145 | - key: error.report_issue
146 | t: Report issue
147 |
148 | - key: success.data_saved
149 | t: Data Saved
150 | - key: success.data_saved.description
151 | t: Your data has been saved.
152 |
153 | ###########################################################################
154 | # Accounts
155 | ###########################################################################
156 |
157 | - key: accounts.create_account
158 | t: Continue with Account
159 | - key: accounts.create_account.description
160 | t: Having an account lets you **access your own data in the future** and be notified when survey results are published.
161 | - key: accounts.create_account.note
162 | t: If you **already have an account** we will send you a magic log-in link by email.
163 | - key: accounts.create_account.action
164 | t: Continue with Account
165 | - key: accounts.your_email
166 | t: Your Email
167 |
168 | - key: accounts.upgrade_account.action
169 | t: Upgrade your account
170 | - key: accounts.upgrade_account.description
171 | t: Upgrading your account with an email address will let you access your survey response after you end your session.
172 |
173 | - key: accounts.continue_as_guest
174 | t: Continue as Guest
175 | - key: accounts.continue_as_guest.description
176 | t: Taking the survey anonymously means you **won't be able to access your data again** after you end your session.
177 | - key: accounts.continue_as_guest.action
178 | t: Continue as Guest
179 |
180 | - key: accounts.magic_link.no_email
181 | t: Please enter your email
182 | - key: accounts.magic_link.success
183 | t: Check your inbox! We sent you a magic link, just click it to confirm your account and log in.
184 | # Open known mail provider directly in browser with the right search params
185 | - key: accounts.magic_link.browser
186 | t: Click to open your inbox.
187 |
188 | ###########################################################################
189 | # FAQ
190 | ###########################################################################
191 |
192 | - key: general.faq
193 | t: FAQ
194 | - key: faq.create_account
195 | t: Why do I need to create an account?
196 | - key: faq.create_account.description
197 | t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published.
198 | - key: faq.anonymous_survey
199 | t: Can I take the survey anonymously?
200 | - key: faq.anonymous_survey.description
201 | t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access.
202 | - key: faq.questions_required
203 | t: Is answering every question required?
204 | - key: faq.questions_required.description
205 | t: No, every question of the survey is optional and can freely be skipped.
206 | - key: faq.data_published
207 | t: Will my data be made public?
208 | - key: faq.data_published.description
209 | t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.).
210 | - key: faq.survey_design
211 | t: How are the surveys designed?
212 | - key: faq.survey_design.description
213 | t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb).
214 | - key: faq.results_released
215 | t: When will the results be released?
216 | - key: faq.results_released.description
217 | t: Results are generally released a few weeks after the survey closes.
218 | - key: faq.survey_deadline
219 | t: When will the survey close?
220 | - key: faq.survey_deadline.description
221 | t: This survey is scheduled to run until {date}
222 | - key: faq.team
223 | t: Who runs this survey?
224 | - key: faq.team.description
225 | t: This survey is run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers.
226 |
227 | ###########################################################################
228 | # Form Controls
229 | ###########################################################################
230 |
231 | - key: bracket.vs
232 | t: VS
233 | - key: bracket.start_over
234 | t: Start Over
235 | - key: bracket.winner
236 | t: >
237 | Winner:
238 | - key: bracket.round
239 | t: Round
240 | - key: bracket.empty_bracket
241 | t: Pending result (complete the previous round first)
242 | - key: bracket.result
243 | t: Result
244 | - key: bracket.cancel
245 | t: Cancel
246 |
247 | - key: experience.leave_comment
248 | t: Leave a Comment (optional)
249 | - key: experience.leave_comment_short
250 | t: Leave a Comment
251 | - key: experience.tell_us_more
252 | t: "You answered “{response}”. Tell us more about your choice:"
253 | - key: experience.tell_us_more_generic
254 | t: "Tell us more about your answer:"
255 | - key: experience.tell_us_more_no_value
256 | t: "You didn't pick any response. Tell us why:"
257 |
258 | - key: user_info.gender.snowball_sampling
259 | t: >
260 | ### Help us share this survey with more women!
261 |
262 |
263 | We are hoping to increase participation of women in the survey, and one approach we're trying (known as “[snowball sampling](https://github.com/Devographics/surveys/issues/258)”) is asking women respondents such as yourself to share the link to this survey with other women developers.
264 |
265 |
266 | If you're able to help with this, here is a special share link you can use so we can track the success of this initiative:
267 |
268 | ###########################################################################
269 | # Response
270 | ###########################################################################
271 |
272 | - key: response.completion
273 | t: "{completion}% completed"
274 |
275 | - key: response.details
276 | t: Started on {startedAt}, {completion}% completed.
277 |
278 | ###########################################################################
279 | # Reading List
280 | ###########################################################################
281 |
282 | - key: readinglist.prompt
283 | t: >
284 | You picked “{option}”. If you'd like to learn more about this feature at the end of the survey, you can click the "+" icon in the corner above to add it to your **reading list**.
285 |
286 | - key: readinglist.add_to_list
287 | t: Add to Your Reading List
288 |
289 | - key: readinglist.remove_from_list
290 | t: Remove from Reading List
291 |
292 | - key: readinglist.added_to_list
293 | t: Added “{label}” to your reading list.
294 |
295 | - key: readinglist.title
296 | t: Reading List
297 |
298 | - key: readinglist.description
299 | t: >
300 | Save items here using the "+" button, and you'll get a list of links to learn more about them at the end of the survey.
301 |
302 | - key: readinglist.description2
303 | t: >
304 | Items you're interested are saved here, and you'll get a list of links to learn more about them at the end of the survey.
305 |
306 | - key: readinglist.empty
307 | t: >
308 | You don't have any items in your reading list.
309 | Try going back to the survey and adding features or libraries you'd like
310 | to learn more about using the "+" button.
311 |
312 | - key: readinglist.autogenerated
313 | t: >
314 | You didn't add any items to your reading list using the “+” button, so instead here's an auto-generated list of resources based on your survey answers.
315 |
316 | - key: readinglist.results
317 | t: >
318 | Here are some resources to learn more about the items in your reading list.
319 |
320 | - key: readinglist.homepage_link
321 | t: Homepage
322 |
323 | - key: readinglist.receive_copy
324 | t: >
325 | Enter your email to get a copy of your reading list straight in your inbox:
326 | - key: readinglist.send_by_email
327 | t: Send
328 | - key: readinglist.email_sent
329 | t: Thanks! Your reading list is on its way to your inbox.
330 |
331 | ###########################################################################
332 | # Score & Knowledge Ranks
333 | ###########################################################################
334 |
335 | - key: knowledge_rank.your_rank
336 | t: "Your Rank:"
337 | - key: knowledge_rank.rank1
338 | t: Novice
339 | - key: knowledge_rank.rank2
340 | t: Apprentice
341 | - key: knowledge_rank.rank3
342 | t: Intermediate
343 | - key: knowledge_rank.rank4
344 | t: Expert
345 | - key: knowledge_rank.rank5
346 | t: Scholar
347 | - key: knowledge_rank.rank6
348 | t: Elite
349 |
--------------------------------------------------------------------------------
/css2020.yml:
--------------------------------------------------------------------------------
1 | locale: en-US
2 | translations:
3 | ###########################################################################
4 | # Introduction
5 | ###########################################################################
6 |
7 | - key: introduction.css2020
8 | t: |
9 |
10 | Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to.
11 |
12 | Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems.
13 |
14 | And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names.
15 |
16 | Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS!
17 |
18 | ### Team
19 |
20 | The State of CSS Survey is created and maintained by:
21 |
22 | - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding
23 | - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations
24 |
25 | ### Download Our Data
26 |
27 | You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations!
28 |
29 | ### Other Links
30 |
31 | - [State of CSS Homepage](https://stateofcss.com)
32 | - [State of JS](https://stateofjs.com)
33 |
34 | ### Thanks
35 |
36 | Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/).
37 |
38 | Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations.
39 |
40 | ### Credits & Stuff
41 |
42 | The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com)
43 |
44 | And now, let's see what CSS has been up to this year!
45 |
46 | – Sacha and Raphaël
47 |
48 | ###########################################################################
49 | # Tshirt
50 | ###########################################################################
51 |
52 | - key: sections.tshirt.title
53 | t: T-shirt
54 |
55 | - key: sections.tshirt.description
56 | t: |
57 | ## Support the survey and look good in the process!
58 |
59 | A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈!
60 |
61 | What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques.
62 |
63 | So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can!
64 |
65 | - key: tshirt.about
66 | t: About the T-shirt
67 |
68 | - key: tshirt.description
69 | t: |
70 | The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two!
71 |
72 | We use a high-quality, super-soft tri-blend shirt with a slim fit.
73 | This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos).
74 |
75 | - key: tshirt.getit
76 | t: Get It
77 |
78 | - key: tshirt.price
79 | t: USD $24 + shipping
80 |
81 | ###########################################################################
82 | # Sections Introductions
83 | ###########################################################################
84 |
85 | - key: sections.user_info.description
86 | t: |
87 | This year's survey reached **11,492** people in **102** countries. For the first time this year,
88 | we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers.
89 |
90 | - key: sections.features.description
91 | t: |
92 | CSS has seen a surge of new features in recent years, so as you'd expect adoption is
93 | lagging a bit behind as the community takes its time to absorb new properties.
94 |
95 | - key: sections.units_selectors.description
96 | t: |
97 | We're willing to bet you'll find a few things you didn't know about in this section!
98 |
99 | - key: sections.technologies.description
100 | t: |
101 | The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap
102 | now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS
103 | movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic.
104 |
105 | - key: sections.other_tools.description
106 | t: |
107 | No big surprises here, but it's worth highlighting the appearance of development-focused browsers
108 | like Polypane and Sizzy, which go a step further than traditional devtools.
109 |
110 | - key: sections.environments.description
111 | t: |
112 | One of CSS's core strengths is its ability to adapt to different environment, yet for a variety
113 | of reasons media like print and email remain unexplored by a majority of CSS developers. Might they
114 | turn out to be the next frontier of CSS…?
115 |
116 | - key: sections.resources.description
117 | t: |
118 | The “other answers” results in this section highlight the richness and diversity of the CSS community,
119 | and feature many outstanding blogs and podcasts which we are looking forward to officially adding
120 | to the survey next year!
121 |
122 | - key: sections.opinions.description
123 | t: |
124 | These opinions paint a picture of a language getting more mature, but also more complex. And perhaps
125 | –at least while we struggle to keep up with the pace of change– a little less enjoyable?
126 |
127 | ###########################################################################
128 | # Notes
129 | ###########################################################################
130 |
131 | - key: blocks.gender.note
132 | t: |
133 | 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.
134 |
135 | - key: blocks.css_missing_features.note
136 | t: |
137 | You can explore the full dataset of answers to this question in [this side project](https://whatsmissingfromcss.com/).
138 |
139 | - key: blocks.source.note
140 | t: >
141 |
142 | This chart aggregates a mix of referrers, URL parameters, and freeform answers.
143 |
144 | - State of JS: the [State of JS](https://stateofjs.com) mailing list.
145 |
146 | - State of CSS: the State of CSS mailing list; also matches `email`, `by email`, etc.
147 |
148 | - Work: matches `work`, `colleagues`, `coworkers`, etc.
149 |
150 | ###########################################################################
151 | # Awards
152 | ###########################################################################
153 |
154 | - key: award.feature_adoption_delta_award.comment
155 | t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool.
156 |
157 | - key: award.tool_usage_delta_award.comment
158 | t: No other tool comes even close to Tailwind CSS's dramatic **{value}** progression over the last year.
159 |
160 | - key: award.tool_satisfaction_award.comment
161 | t: PostCSS's **{value}** retention ratio shows that you can't beat doing one thing really, really well.
162 |
163 | - key: award.tool_interest_award.comment
164 | t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year.
165 |
166 | - key: award.most_write_ins_award.comment
167 | t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall.
168 |
169 | ###########################################################################
170 | # Conclusion
171 | ###########################################################################
172 |
173 | - key: sections.conclusion.description
174 | t: |
175 | If a JavaScript developer writes a line of CSS code, are they now a CSS developer?
176 |
177 | This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`.
178 |
179 | So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right?
180 |
181 | Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem.
182 |
183 | Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins.
184 |
185 | So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond!
186 |
187 | ###########################################################################
188 | # Picks
189 | ###########################################################################
190 |
191 | - key: picks.my_2020_pick
192 | t: "My 2020 Pick: "
193 | - key: picks.intro
194 | t: We asked members of the CSS community to share their “pick of the year”
195 |
196 | - key: picks.shadeed9.bio
197 | t: Author of debuggingcss.com
198 | - key: picks.shadeed9.description
199 | t: |
200 | Container queries are a long-time awaited feature for us,
201 | and I’m thrilled that the Chrome team is working on support for it natively!
202 |
203 | - key: picks.argyleink.bio
204 | t: CSS at Google
205 | - key: picks.argyleink.description
206 | t: |
207 | The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty
208 |
209 | - key: picks.sachagreif.bio
210 | t: Creator of this survey
211 | - key: picks.sachagreif.description
212 | t: |
213 | With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade.
214 |
215 | - key: picks.christianoliff.bio
216 | t: Front-end developer for Trimble MAPS
217 | - key: picks.christianoliff.description
218 | t: |
219 | One thing I've really started using and appreciating this year though is Purge CSS- an awesome tool for removing unused CSS. It can greatly reduce the size of your CSS, and its fast and easy to use.
220 |
221 | - key: picks.kilianvalkhof.bio
222 | t: Web developer and creator of Polypane
223 | - key: picks.kilianvalkhof.description
224 | t: |
225 | `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs.
226 |
227 | - key: picks.walterstephanie.bio
228 | t: User Centered Designer & CSS Lover
229 | - key: picks.walterstephanie.description
230 | t: |
231 | A series of YouTube videos that explain all the new cool CSS features to build modern designs.
232 |
233 | - key: picks.piccalilli_.bio
234 | t: Freelance designer & dev who runs piccalil.li
235 | - key: picks.piccalilli_.description
236 | t: |
237 | This blog is an absolute gold mine of CSS knowledge. Michelle is a CSS legend and every post or tutorial they write is heaped with useful content.
238 |
239 | - key: picks.sarasoueidan.bio
240 | t: Independent UI/design engineer
241 | - key: picks.sarasoueidan.description
242 | t: |
243 | My pick is a person, namely Rachel Andrew. She taught CSS Grid to a whole generation of developers.
244 |
245 | - key: picks.5t3ph.bio
246 | t: Software Engineer @ Microsoft
247 | - key: picks.5t3ph.description
248 | t: |
249 | In this conference talk, Manuel Matuzovic provides thoughtfully
250 | crafted examples that are engaging, approachable, and actionable.
251 |
252 | - key: picks.hugogiraudel.bio
253 | t: Non-binary accessibility & diversity advocate
254 | - key: picks.hugogiraudel.description
255 | t: |
256 | Fela is an amazing piece of software.
257 | It’s pretty powerful, relatively easy to use and very performant
258 |
259 | - key: picks.foolip.bio
260 | t: Software Engineer @ Google
261 | - key: picks.foolip.description
262 | t: |
263 | Sergio has recently fixed lots of Flexbox in WebKit and even some in Chromium,
264 | notably bringing flex gap to WebKit,
265 | which means that soon it will be available on all modern browsers.
266 |
267 | - key: picks.jina.bio
268 | t: Design systems advocate and practitioner
269 | - key: picks.jina.description
270 | t: |
271 | The media query to reduce motion, which helps avoid
272 | triggering dizziness and discomfort.
273 |
--------------------------------------------------------------------------------
/html2023.yml:
--------------------------------------------------------------------------------
1 | locale: en-US
2 | translations:
3 | ###########################################################################
4 | # General
5 | ###########################################################################
6 |
7 | - key: general.results.description
8 | t: The 2023 edition of the annual survey about the latest trends in the HTML ecosystem.
9 |
10 | - key: introduction.html2023
11 | t: >
12 | While JavaScript was taking over the web, and CSS was gaining new superpowers year over year,
13 | it could seem like HTML was content to stay dormant, happy to cede center stage to its younger siblings.
14 | After all once you've learned about ``s and ``s 1 through 6, what else is there to know?
15 |
16 |
17 | Quite a lot, as it turns out! Once again we drafted [Lea Verou](https://lea.verou.me/) to put her in-depth
18 | knowledge of the web platform to work, and help us craft a survey that ended up reaching far
19 | beyond pure HTML to cover accessibility, web components, and much more.
20 |
21 |
22 | This partly explains why this report has taken so long to come out – there was
23 | just a *lot* of new data to process! Hopefully you'll find that the result was worth the wait.
24 |
25 |
26 | Beyond the data included here, we've also improved our **chart customization** feature to let you tailor
27 | each data visualization to an even greater degree. If you find any interesting
28 | insights in the process, be sure to let us know!
29 |
30 |
31 | You can learn more about all this in [this post](https://dev.to/sachagreif/discover-the-state-of-html-2023-survey-results-n10), or by watching a [quick YouTube video](https://www.youtube.com/watch?v=G-rFwp2zUT4)
32 |
33 |
34 | With all this out of the day, welcome to the results for the first ever State of HTML survey.
35 | After this, I'm willing to bet you won't look at good old HTML quite the same way ever again!
36 |
37 | ###########################################################################
38 | # Tshirt
39 | ###########################################################################
40 |
41 | - key: sections.tshirt.title
42 | t: T-shirt
43 |
44 | - key: sections.tshirt.description
45 | t: |
46 | ## Support the Survey With the State of HTML T-Shirt
47 |
48 | Do you miss the the good old days of the mid-90s, when HTML was king and VHS tape covers featured futuristic, colorful artwork?
49 |
50 | 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.
51 |
52 | - key: tshirt.about
53 | t: About the T-shirt
54 |
55 | - key: tshirt.description
56 | t: |
57 | We use a high-quality, super-soft tri-blend shirt with a slim fit printed by our partners at Cotton Bureau.
58 |
59 | - key: tshirt.getit
60 | t: Get It
61 |
62 | - key: tshirt.price
63 | t: USD $32 + shipping
64 |
65 | - key: tshirt.designer.heading
66 | t: About the Designer
67 |
68 | - key: tshirt.designer.name
69 | t: Christopher Kirk-Nielsen
70 |
71 | - key: tshirt.designer.bio
72 | t: |
73 | 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)!
74 |
75 | ###########################################################################
76 | # Sections Introductions
77 | ###########################################################################
78 |
79 | - key: sections.user_info.description.html2023
80 | t: |
81 | Welcome to the State of HTML survey results. This first-ever edition reached **20,904** participants from all around the world.
82 |
83 | - key: sections.features.description.html2023
84 | t: |
85 | HTML features and other browser APIs
86 |
87 | ###########################################################################
88 | # Other Content
89 | ###########################################################################
90 |
91 | - key: features.all_features
92 | t: All Features
93 | - key: features.all_features.description
94 | t: |
95 | 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.
96 |
97 |
98 | Note that you can also find a more specific breakdown of the same data in each feature sub-section.
99 |
100 | - key: features.forms_features
101 | t: Forms Experience & Sentiment
102 |
103 | - key: features.interactivity_features
104 | t: Interactivity Experience & Sentiment
105 |
106 | - key: features.content_features
107 | t: Content Experience & Sentiment
108 |
109 | - key: features.web_components_main_features
110 | t: Web Components Experience & Sentiment
111 |
112 | - key: features.accessibility_features
113 | t: Accessibility Experience & Sentiment
114 |
115 | - key: features.mobile_web_apps_features
116 | t: Mobile Web Apps Experience & Sentiment
117 |
118 | ###########################################################################
119 | # Sponsors
120 | ###########################################################################
121 |
122 | - key: sponsors.frontendmasters.description
123 | t: Advance your skills with in-depth, modern front-end engineering courses.
124 | - key: sponsors.google_chrome.description
125 | t: Thanks to the Google Chrome team for supporting our work.
126 | - key: sponsors.tokyodev.description
127 | t: Find your dream developer job in Japan today.
128 | - key: sponsors.renderatl.description
129 | t: The tech conference focused on all things web.
130 |
131 | ###########################################################################
132 | # Conclusion
133 | ###########################################################################
134 |
135 | - key: conclusion.html2023.lea_verou.bio
136 | t: W3C Technical Architecture Group Member & MIT CSAIL Researcher
137 | - key: conclusion.html2023.lea_verou
138 | t: >
139 | *Phew!* This survey has taken a monumental effort by dozens of people across six continents. Not only did it set a new record for the most responses in a “State of…” survey debut, its data collection UI pioneered innovations that gave us unparalleled insight into developer attitudes, and will ripple far beyond its scope.
140 |
141 |
142 | Some argue that improving HTML is futile, but the survey resoundingly demonstrates the contrary. **Developers crave more interactive HTML elements**: not only were interactive elements like `