-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathhtml2023.yml
259 lines (177 loc) · 13.9 KB
/
html2023.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
locale: en-US
translations:
###########################################################################
# General
###########################################################################
- key: general.results.description
t: The 2023 edition of the annual survey about the latest trends in the HTML ecosystem.
- key: introduction.html2023
t: >
While JavaScript was taking over the web, and CSS was gaining new superpowers year over year,
it could seem like HTML was content to stay dormant, happy to cede center stage to its younger siblings.
After all once you've learned about `<div>`s and `<h>`s 1 through 6, what else is there to know?
Quite a lot, as it turns out! Once again we drafted [Lea Verou](https://lea.verou.me/) to put her in-depth
knowledge of the web platform to work, and help us craft a survey that ended up reaching far
beyond pure HTML to cover accessibility, web components, and much more.
This partly explains why this report has taken so long to come out – there was
just a *lot* of new data to process! Hopefully you'll find that the result was worth the wait.
Beyond the data included here, we've also improved our **chart customization** feature to let you tailor
each data visualization to an even greater degree. If you find any interesting
insights in the process, be sure to let us know!
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)
With all this out of the day, welcome to the results for the first ever State of HTML survey.
After this, I'm willing to bet you won't look at good old HTML quite the same way ever again!
###########################################################################
# 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.html2023
t: |
Welcome to the State of HTML survey results. This first-ever edition reached **20,904** participants from all around the world.
- key: sections.features.description.html2023
t: |
HTML features and other browser APIs
###########################################################################
# Other Content
###########################################################################
- key: features.all_features
t: All Features
- 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_main_features
t: Web Components Experience & Sentiment
- key: features.accessibility_features
t: Accessibility Experience & Sentiment
- key: features.mobile_web_apps_features
t: Mobile 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.html2023.lea_verou.bio
t: W3C Technical Architecture Group Member & MIT CSAIL Researcher
- key: conclusion.html2023.lea_verou
t: >
*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.
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 `<datalist>` or the Popover API among those accumulating the most positive sentiment across all categories, but in addition all top [missing elements](https://2023.stateofhtml.com/en-US/usage/#html_missing_elements) were interactive widgets.
However, **making simple things easy** by providing canned functionality is no longer sufficient. **Making complex things possible** by supporting thorough customization is a necessity: insufficient customizability, especially around **styling**, was by far the top recurring pain point.
As a result, form elements were also the elements [most frequently recreated](https://2023.stateofhtml.com/en-US/usage/#html_functionality_features); a lose-lose outcome that makes both developers and end-users suffer. Thankfully, there are many new initiatives to improve this, so the future looks bright.
Another big need is extensibility. It does not scale if only standards bodies have the privilege to extend HTML; and besides, generic elements cannot possibly address the enormous diversity of needs. Unfortunately, **Web Components APIs** (and especially Shadow DOM), while widely used, appear to fall short in terms of meeting developer needs and providing a smooth developer experience, as they topped the charts of worst experiences across the survey. However, the ongoing activity in this area (some of which I have been part of) leaves me hopeful that while it has been a rocky path, they are on track to reach their full potential.
Which brings me to my final point: it is important to remember that this survey is only a snapshot of developer perspectives and reflects the state of the web platform at the time. However, a primary goal of these surveys is to improve the status quo by providing better visibility into developer needs. How many of today’s pain points will be addressed tomorrow as a result? Join us later this year for the survey’s second iteration and let’s find out!
###########################################################################
# About
###########################################################################
- key: about.content
t: |
The 2023 State of HTML survey ran from September 19 to October 19 2023, and collected 20,904 responses.
The survey design effort was lead by [Lea Verou](https://lea.verou.me/) thanks to a grant from Google. Lea also oversaw the prototyping, testing, and implementation of new UI data collection elements; contributed to data processing; and helped with data visualization.
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-2023-edition-1p6a).
# HTML 2023
- key: faq.data_used_html2023
t: How will this data be used?
- key: faq.data_used_html2023.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/interop-2023/) to prioritize focus areas and inform their roadmaps.
- key: faq.survey_goals_html2023
t: What are the survey's goals?
- key: faq.survey_goals_html2023.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: faq.who_should_take_survey_html2023
t: Who should take this survey?
- key: faq.who_should_take_survey_html2023.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.how_long_will_survey_take_html2023
t: How long will answering the survey take?
- key: faq.how_long_will_survey_take_html2023.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.learn_more_html2023
t: Where can I learn more?
- key: faq.learn_more_html2023.description
t: You can learn more about this survey in [our announcement post](https://lea.verou.me/blog/2023/design-state-of-html/).
- key: faq.survey_design_html2023
t: How was this survey designed?
- key: faq.survey_design_html2023.description
t: >
The survey was designed by [Lea Verou](https://lea.verou.me), with input from browser vendors as well as groups such as the [WebDX Community Group](https://www.w3.org/community/webdx/).
- key: faq.results_released_html2023
t: When will the results be released?
- key: faq.results_released_html2023.description
t: The survey will run from September 19 to October 16, and the survey results will be released shortly after that.
# Intro for actual survey page
- key: general.html2023.survey_intro
t: |
While web developers tend to focus on JavaScript and CSS, none of what we do would be possible without HTML acting as the foundation.
It has long seemed like HTML wasn't evolving, but things may be changing.
New elements like `<selectlist>` are on the horizon, cool new features like popovers,
and a swath of related browser APIs (Web Components, PWAs, etc.).
This year, [Lea Verou](https://lea.verou.me/) took on the formidable task of leading the design of this brand new survey, from content to UX and beyond.
Building on the success of [State of JS](http://stateofjs.com/) and [State of CSS](https://stateofcss.com/), we introduce **State of HTML**;
the last missing piece that completes the trilogy, so we can track the evolution of the web platform as a whole.
Benefits to you:
- Survey results are **used by browsers** and standards groups **for roadmap prioritization**.
Your responses can help get features you care about implemented, browser incompatibilities being prioritized, and gaps in the platform being addressed.
- Learn about new and upcoming features; add features to your reading list and get a list of resources at the end!
- Get a personalized knowledge score and see how you compare to other respondents
The survey will be open for 3 weeks, but responses entered **within the first 9 days (until October 1st)** will have a much higher impact on the Web,
as preliminary data will be used for certain prioritization efforts that have deadlines before then.