-
Notifications
You must be signed in to change notification settings - Fork 7
/
css2023.yml
537 lines (420 loc) · 26.2 KB
/
css2023.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
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
locale: ko-KR
translations:
###########################################################################
# General
###########################################################################
- key: general.results.description
t: 2023년도 CSS 생태계의 최신 동향에 대한 연례 설문조사입니다.
- key: general.css2022.js2022_banner
t: 현재 State of 2022 설문조사가 진행 중입니다. [지금 참여해보세요](https://survey.devographics.com/survey/state-of-js/2022?source=css2022)!
- key: general.css2023.results_intro
t: |
솔직히 말하면, 최근 CSS를 따라가는 것은 벅찼어요. 감사하게도 올해는 [Chen Hui Jing](https://chenhuijing.com/)이 설문 설계를 주도해주었고, 작년에 [Lea Verou](https://lea.verou.me/)가 한 작업을 기반으로 발전시켰습니다.
우리는 운좋게도 Google Chrome 팀의 지원을 받을 수 있었어요. Google Chrome 팀은 이 결과들을 활용해서 (다른 브라우저 제공업체와 함께) 자사의 로드맵을 안내하는 데 도움을 주고 있어요.
모든 추가 도움 덕분에 우리는 여러 새로운 기능들을 소개할 수 있었어요. **차트를 커스텀**하는 기능부터 시작해서, 이제는 차트 옆에 있는 <span class="customize-chart-icon">“설정”</span> 아이콘을 클릭하여 급여, 국가 또는 다른 원하는 변수로 차트를 필터링할 수 있어요!
이 모든 것을 정리한 후에, 이제 2023년에는 CSS가 어떻게 발전했는지 살펴봅시다!
###########################################################################
# Introduction
###########################################################################
- key: introduction.css2023
t: |
<span class="first-letter">C</span>SS는 전례없는 발전의 시기를 겪고 있어요. :has(), container queries, subgrid 등 많은 새로운 기능들이 거의 매달 브라우저에 등장하고 있습니다.
이 모든 발전의 결과로 인해 일이 좀 벅찰 수 있어요. 다행히 올해는 [Chen Hui Jing](https://chenhuijing.com/)이 설문을 설계하고 CSS 정글에 대한 안내를 도와주셨어요.
설문에 관해서 얘기하자면, 브라우저 제공업체들이 [Interop](https://web.dev/interop-2023/) 계획의 일환으로 어떤 기능을 우선적으로 작업할지 결정하는 데 해당 데이터를 사용하여 도움을 받고 있다는 걸 알고 계셨나요?
마침내, 올해에는 새로운 기능을 소개합니다: 자신만의 데이터 필터로 **차트를 커스텀**할 수 있는 기능입니다. 어떤 새로운 통찰력이 얻으실지 기대가 되네요!
<span class="conclusion__byline">– Sacha Greif</span>
###########################################################################
# Tshirt
###########################################################################
- key: sections.tshirt.title
t: T-shirt
- key: sections.tshirt.description
t: |
## State of CSS 티셔츠를 통해 설문 지원하기
나쁜 비디오 품질, 불편한 카세트, 되감기 과정을 생각하면 VHS 시대에 그리워할 만한 것은 별로 없습니다. 그러나 우리가 *그리워하는* 한 가지는 빈 VHS 테이프에 새겨져 있던 멋진 90년대 시각 효과들이에요.
그런데 이제 재능있는 Christopher Kirk-Nielsen 덕분에 CSS에 대한 애정을 기리면서도 이 모든 레트로한 멋을 즐길 수 있습니다!
- key: tshirt.about
t: 티셔츠에 대해서
- key: tshirt.description
t: |
우리는 Cotton Bureau의 파트너사에서 제작한 고품질, 매우 부드러운 tri-blend 소재의 슬림 핏 티셔츠를 사용해요.
- key: tshirt.getit
t: 얻어보세요
- key: tshirt.price
t: USD $29 + 배송
- key: tshirt.designer.heading
t: 디자이너에 대해서
- key: tshirt.designer.name
t: Christopher Kirk-Nielsen
- key: tshirt.designer.bio
t: |
프랑스 출신이지만 현재는 미국에 거주하는 크리스는, 놀라운 프론트엔드 개발자일뿐만 아니라 레트로 비주얼에 특화된 재능 있는 일러스트레이터이기도 해요. 실제로 우리는 그의 [다른 티셔츠 디자인](https://chriskirknielsen.com/designs)도 확인해보는 것을 적극 권장합니다!
###########################################################################
# Sections Introductions
###########################################################################
- key: sections.user_info.description.css2023
t: |
올해의 설문은 전 세계 **9,190** 명의 개발자에게 도달했어요.
- key: sections.features.description.css2023
t: |
최근 CSS는 꾸준한 발전을 이루고 있으며,
소개된 많은 새로운 기능들이 느리지만 확실하게 개발자 커뮤니티에 채택되고 있어요.
- key: sections.css_frameworks.description.css2023
t: |
다시 한 번 Tailwind CSS는 개발자들이 계속해서 사용하고 싶어하는 주요 UI 프레임워크로 높게 평가되었으며, Open Props는 작지만 열정적인 지지층을 형성하고 있어요.
- key: sections.css_in_js.description.css2023
t: |
초기 성장 이후에는 CSS-in-JS 분야가 안정화된 것으로 보이며,
네이티브 CSS 그 자체가 그 많은 주요 장점들을 채택하고 있다는 사실이 거기에 기여한 커다란 요인일 것으로 생각됩니다.
- key: sections.other_tools.description.css2023
t: |
브라우저의 발명 후 30년이 지난 지금도, Brave와 Arc와 같은 새로운 브라우저들이나 Polypane과 같은 전문 도구들이 시장 점유율을 확보하며 혁신이 계속되고 있는 것을 볼 수 있습니다.
- key: sections.usage.description.css2023
t: |
CSS를 어떻게 사용하든, 코드가 모든 브라우저에서 작동하게 만드는 것은 여전히 고민거리라는 점을 데이터가 보여줍니다. `:has()`와 같은 새로운 기능에 대해서 특히 그렇습니다.
- key: sections.resources.description.css2023
t: |
블로그, YouTube 채널, 그리고 팟캐스트 등 다양한 매체를 통해 CSS 커뮤니티는 그 어느 때보다도 더 활기를 띠고 있어요.
###########################################################################
# Charts
###########################################################################
- key: options.features_categories.layout
aliasFor: sections.layout.title
- key: options.features_categories.shapes_graphics
aliasFor: sections.shapes_graphics.title
- key: options.features_categories.interactions
aliasFor: sections.interactions.title
- key: options.features_categories.typography
aliasFor: sections.typography.title
- key: options.features_categories.accessibility
aliasFor: sections.accessibility.title
- key: options.features_categories.other_features
aliasFor: sections.other_features.title
- key: options.features_categories.colors
aliasFor: sections.colors.title
- key: options.features_categories.selectors
aliasFor: sections.selectors.title
- key: user_info.country_low_vs_high_income.description.css2023
t: >
응답자를 저소득 국가와 고소득 국가로 나누면
두 가지의 매우 다른 국가 목록이 나오게 됩니다.
- key: user_info.higher_education_degree_by_gender.description.css2023
t: >
CSS와 관련이 없는 분야에서 고등 교육 학위를 가진 응답자들 중 여성이 예상보다 높았는데,
이는 많은 직업 전환이 일어나고 있다는 것을 잠재적으로 나타냅니다.
- key: user_info.source_by_gender.description.css2023
t: >
총 응답 수가 적어 어떤 결론을 내기 어려운 점은 있지만,
직장이나 입소문을 통해 설문에 참여한 응답자들 중에서 여성의 비율이 가장 높았습니다.
특히 Twitter나 YouTube와 같은 소셜 네트워크와 비교할 때 더 높았습니다.
- key: user_info.source_by_race_ethnicity.description.css2023
t: >
다시 표본 크기가 작다는 점을 되새기고, 인종과 민족을 고려할 때,
YouTube는 설문 조사의 가장 다양한 트래픽 소스 중 하나로서 두드러지게 나타납니다.
- key: user_info.average_income_by_company_size.description.css2023
t: >
혼자 일하는 사람들이 소규모 회사에서 일하는 사람들보다 약간 더 높은 수입을 보이는 것이 주목할 만합니다.
그럼에도 불구하고 우리는 대기업에서 일하는 응답자들이 가장 높은 수입을 가지고 있음을 발견했습니다.
- key: user_info.yearly_salary_usa_vs_the_world.description.css2023
t: >
미국의 소득을 전 세계와 비교할 때, 미국 개발자들이 높은 소득 계층에서 과도하게 나타나는 것이 명확해집니다.
###########################################################################
# Awards
###########################################################################
- key: award.feature_adoption_delta_award.comment
t: |
Flexbox에 추가된 `gap` 속성은 매우 유용하기 때문에,
2023년에 **{value}** 의 증가는 전혀 놀라운 일이 아닙니다.
# - key: award.tool_usage_delta_award.comment
# t: No other tool comes even close to Tailwind CSS's dramatic **{value}** progression over the last year.
- key: award.most_commented_feature_award.comment
t: |
**{value}** 개의 코멘트가 달리며, Subgrid만큼 많은 피드백을 이끌어낸 기능은 없었습니다.
- key: award.tool_satisfaction_award.comment
t: |
모든 CSS-in-JS 솔루션들 중에서, Open Props는 매우 높은 **{value}** 유지율을 유지한 유일한 솔루션이었습니다.
# - key: award.tool_interest_award.comment
# t: With a **{value}** ratio, CSS Modules again generated the most interest among CSS developers this year.
- key: award.most_write_ins_award.comment
t: |
**{value}** 회의 언급들 중에서, Panda는 자유 형식 질문에서 가장 많이 언급된 도구였습니다.
###########################################################################
# Conclusion
###########################################################################
- key: conclusion.css2023.chen_hui_jing
t: |
<span class="first-line">최신 CSS 기능의 이용률이 증가하는 추세인 반면, CSS 프레임워크 이용률은 하락세에 있습니다.</span>
이는 브라우저가 이전보다 훨씬 빨리 따라잡을 것이기 때문에, 사람들이 새로운 CSS 기능을 사용하길 기다릴 필요가 없다는 생각에 조금씩 익숙해져가고 있다는 신호일 수 있습니다.
중첩과 `:has()`(이것은 부모 선택자처럼 동작할 수 있지만 그 이상의 기능을 갖추고 있습니다!)와 같은 네이티브 CSS 기능에 대한 높은 인식에서 보면, 우리는 확산된 채택을 눈앞에 둔 것으로 보입니다.
이 모든 기능 중에서, 올해 제가 개인적으로 가장 좋아하는 기능은 `text-wrap: balance`입니다. 이것은 제 웹 개발 경력 동안 계속해서 받아왔던 요구사항: “제목을 조정해서 마지막 단어가 혼자 떨어지지 않게 할 수 있을까요?” 에 대한 한 줄의 해결책을 제공합니다.
많은 개발자들이 auto 및 masonry 레이아웃에 대한 애니메이션을 만들기 위해 CSS 기능이 부족하다고 느끼고 있는 것도 흥미로웠습니다. 특히 요소의 크기(특히 높이)가 명시적으로 선언되지 않았을 때 브라우저가 element dimensions을 결정하는 것은 항상 까다로웠습니다.
하지만 작년 [Lea Verou](https://lea.verou.me/)가 언급한 대로, [Interop](https://wpt.fyi/interop-2023)와 같은 발의를 브라우저에 가저오면서, 이전에는 불가능하다고 생각되던 기능들이 이제는 현실이 될 수 있습니다!
- key: conclusion.css2023.chen_hui_jing.bio
t: Developer Experience Engineer @ Interledger Foundation
###########################################################################
# Picks
###########################################################################
- key: picks.my_pick
t: "My 2023 Pick: "
- key: picks.intro
t: 우리는 CSS 커뮤니티의 멤버들에게 그들의 "올해의 선택"을 공유해달라고 요청드렸습니다.
# - key: picks.david_east.name
# t: CSS Subgrid
# - key: picks.david_east.bio
# t: Advocate for building on the web
# - key: picks.david_east.description
# t: |
# CSS Subgrid allows child elements to inherit their parents grid properties.
# Soon, it will be much easier to lay elements out to the same grid
# lines across the entire page.
# - key: picks.bramus_van_damme.name
# t: The `:has()` Selector
# - key: picks.bramus_van_damme.bio
# t: Chrome Developer Relations Engineer at Google
# - key: picks.bramus_van_damme.description
# t: |
# You might know this one as the so-called “parent selector” but that name does it
# no justice as it only covers a small part of what it can do.
# This selector has essentially changed the way I write my CSS.
- key: picks.kevin_j_powell.name
t: Ahmad Shadeed
- key: picks.kevin_j_powell.bio
t: CSS 전도사
- key: picks.kevin_j_powell.description
t: |
Ahmad의 블로그는 지식과 영감의 원천으로, 주제들에 대한 심층적인 탐험과 함께 훌륭한 시각적 자료와 이용 사례가 포함되어 있습니다.
# - key: picks.samuel_kraft.name
# t: The `:has()` Selector
# - key: picks.samuel_kraft.bio
# t: Design Engineer
# - key: picks.samuel_kraft.description
# t: |
# The new :has() selector is super powerful and unlocks new styling possibilities.
# This great article from Jen Simmons breaks it down with explanations and practical examples.
- key: picks.josh_comeau.name
t: CSS 팟캐스트
- key: picks.josh_comeau.bio
t: 강사, JavaScript 개발자들을 위한 CSS
- key: picks.josh_comeau.description
t: |
이 팟캐스트는 많은 중요하고 현대적인 CSS 기능들에 대한 즐거운 투어입니다. Una Kravets와 Adam Argyle라는 멋진 분들이 진행하고 계십니다.
- key: picks.adam_argyle.name
t: Zag.js
- key: picks.adam_argyle.bio
t: Google Chrome Developer Relations
- key: picks.adam_argyle.description
t: |
ChakraUI의 재능 있는 멤버들은 차세대 components와 아이디어들을 개발 중이며, 그들이 다른 어떤 것들을 제안할 지 기대됩니다.
# - key: picks.eric_w_bailey.name
# t: “Style with Stateful, Semantic Selectors” by Ben Myers
# - key: picks.eric_w_bailey.bio
# t: Accessibility advocate and CSS nerd
# - key: picks.eric_w_bailey.description
# t: |
# Ben demonstrates how utilizing ARIA
# attribute selectors can simply and powerfully tie appearance to state.
# - key: picks.michelle_barker.name
# t: Interop 2022
# - key: picks.michelle_barker.bio
# t: Writer and creator of front-end blog CSS { In Real Life }
# - key: picks.michelle_barker.description
# t: |
# Interop is a collaboration between all of the major browser vendors,
# agreeing 15 key areas of focus for implementation —
# including game-changing new CSS features like container queries,
# cascade layers and color functions.
- key: picks.jhey_tompkins.name
t: |
`:has()` 선택자
- key: picks.jhey_tompkins.bio
t: Fancy CSS의 CEO
- key: picks.jhey_tompkins.description
t: |
`:has()`는 container queries, anchor positioning 등과 같은 다른 API들을 함께 사용할 수 있는 마법 같은 기능입니다. 커뮤니티에서 이 기능을 사용하는 새롭고 혁신적인 방법을 어떻게 찾아낼지 기대됩니다.
# - key: picks.gift_egwuenu.name
# t: Learn CSS
# - key: picks.gift_egwuenu.bio
# t: Developer Advocate at Cloudflare
# - key: picks.gift_egwuenu.description
# t: |
# My recommended resource for anyone looking to learn CSS from the ground up,
# I also use it as a reference everytime I need to look up any CSS property.
- key: picks.ahmad_shadeed.name
t: 스크롤 애니메이션들
- key: picks.ahmad_shadeed.bio
t: Design Engineer and Writer at [ishadeed.com](https://ishadeed.com/)
- key: picks.ahmad_shadeed.description
t: |
If I went back 2 years, I'd never have imagined CSS
having scroll-driven animations. Yet, here we are!
# - key: picks.georgedoescode.name
# t:
# - key: picks.georgedoescode.bio
# t:
# - key: picks.georgedoescode.description
# t: |
# - key: picks.jen_simmons.name
# t: The `:has()` Selector
# - key: picks.jen_simmons.bio
# t: Web technologies evangelist at Apple
# - key: picks.jen_simmons.description
# t: |
# For two decades, “parent selector” was a top requested feature for CSS.
# Then in 2022, in a total surprise, the :has() pseudo-class arrived to solve this and far more.
- key: picks.sara_soueidan.name
t: |
`color-contrast()`
- key: picks.sara_soueidan.bio
t: Inclusive design engineer and educator
- key: picks.sara_soueidan.description
t: |
My vote goes to color-contrast() because I think it deserves more spotlight.
It’s one of the few features that makes it _easier_ for us (developers)
to design for our users. Cross-browser support can’t come soon enough.
- key: picks.adam_wathan.name
t: Lightning CSS
- key: picks.adam_wathan.bio
t: Creator of Tailwind CSS
- key: picks.adam_wathan.description
t: |
An extremely fast, all-in-one CSS processing tool that handles things like vendor prefixes, minification, and modern feature transpilation, all while being an amazing platform for other developers to build CSS tools on top of.
# - key: picks.christianoliff.bio
# t: Front-end developer for Trimble MAPS
# - key: picks.christianoliff.description
# t: |
# 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.
- key: picks.kilian_valkhof.name
t: Devtoolstips
- key: picks.kilian_valkhof.bio
t: Creator of Polypane, the browser for developers.
- key: picks.kilian_valkhof.description
t: |
The devtools in all browsers are super powerful. These bite-sized tips
help you get the most out of them regardless of which browser you use.
- key: picks.ahmad_awais.name
t: |
`text-wrap: balance`
- key: picks.ahmad_awais.bio
t: VP DevRel & Google Developers Advisory Board founding member
- key: picks.ahmad_awais.description
t: |
Headlines should dazzle and read like a breeze, even if screens play hard to predict.
I've battled those annoying solo words at line's end (hello, widow words!),
but guess what? Enter text-wrap: balance – one-liner-fix wizardry that's pure magic!
# - key: picks.piccalilli_.bio
# t: Freelance designer & dev who runs piccalil.li
# - key: picks.piccalilli_.description
# t: |
# 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.
# - key: picks.piccalilli_.bio
# t: Freelance designer & dev who runs piccalil.li
# - key: picks.piccalilli_.description
# t: |
# 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.
# - key: picks.sarasoueidan.bio
# t: Independent UI/design engineer
# - key: picks.sarasoueidan.description
# t: |
# My pick is a person, namely Rachel Andrew. She taught CSS Grid to a whole generation of developers.
# - key: picks.5t3ph.bio
# t: Software Engineer @ Microsoft
# - key: picks.5t3ph.description
# t: |
# In this conference talk, Manuel Matuzovic provides thoughtfully
# crafted examples that are engaging, approachable, and actionable.
# - key: picks.hugogiraudel.bio
# t: Non-binary accessibility & diversity advocate
# - key: picks.hugogiraudel.description
# t: |
# Fela is an amazing piece of software.
# It’s pretty powerful, relatively easy to use and very performant
# - key: picks.foolip.bio
# t: Software Engineer @ Google
# - key: picks.foolip.description
# t: |
# Sergio has recently fixed lots of Flexbox in WebKit and even some in Chromium,
# notably bringing flex gap to WebKit,
# which means that soon it will be available on all modern browsers.
# - key: picks.jina.bio
# t: Design systems advocate and practitioner
# - key: picks.jina.description
# t: |
# The media query to reduce motion, which helps avoid
# triggering dizziness and discomfort.
###########################################################################
# Quiz
###########################################################################
- key: quiz.quiz_dave_shea
t: "Question 01"
- key: quiz.quiz_dave_shea.question
t: >
In May 2003, Dave Shea launched a site that showcased CSS's flexibility and adaptability. What was that site's name?
- key: options.quiz_dave_shea.css_playground
t: CSS Playground
- key: options.quiz_dave_shea.style_jungle
t: Style Jungle
- key: options.quiz_dave_shea.css_zen_garden
t: CSS Zen Garden
- key: quiz.quiz_dave_shea.answer
t: >
[CSS Zen Garden](https://www.csszengarden.com/) made a big impression by demonstrating what was possible when you kept markup and styling separate.
- key: quiz.quiz_dave_shea.description
aliasFor: quiz.quiz_dave_shea.question
- key: quiz.quiz_css_spec
t: "Question 02"
- key: quiz.quiz_css_spec.question
t: >
Which of these organizations maintains the CSS specification?
- key: options.quiz_css_spec.w3c
t: W3C
- key: options.quiz_css_spec.w3schools
t: W3Schools
- key: options.quiz_css_spec.mdn
t: MDN
- key: quiz.quiz_css_spec.answer
t: >
The W3C's [CSS Working Group](https://www.w3.org/groups/wg/css) maintains the CSS spec, which is then implemented by browser vendors.
- key: quiz.quiz_css_spec.description
aliasFor: quiz.quiz_css_spec.question
###########################################################################
# Sponsors
###########################################################################
- key: sponsors.frontendmasters.description
t: Advance your skills with in-depth, modern front-end engineering courses.
- key: sponsors.polypane.description
t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease.
- key: sponsors.nijibox.description
t: UX and Product Development consulting in the heart of Tokyo.
- key: sponsors.renderatl.description
t: The largest tech conference with a dedicated Design & CSS track.
- key: sponsors.google_chrome.description
t: Thanks to the Google Chrome team for supporting our work.
###########################################################################
# FAQ/About
###########################################################################
- key: about.content
t: >
The 2023 State of CSS survey ran from June 15 to July 15 2023, and collected 9,108 responses. The survey is run by [Devographics](https://www.devographics.com/), with help from a team of open-source contributors and consultants.
The State of CSS logo and t-shirt were designed and animated by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/).
### Survey Goals
This survey, along with the [State of JavaScript](https://stateofjs.com/) survey, was created to identify upcoming trends in the web development ecosystem in order to help developers make technological choices.
As such, these surveys are 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.
Additionally, survey data is also used by browser vendors to prioritize features and inform initiatives such as [Interop 2023](https://web.dev/interop-2023/).
### Survey Design
This year, survey design was lead by [Chen Hui Jing](https://chenhuijing.com/) thanks to a funding grant from the Google Chrome team. 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.
### 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/).
- **Sponsored Charts**: starting last year, anybody can now also choose to directly sponsor a chart for $10 or more, and get their Twitter avatar displayed next to it.
- **Google**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a budget to hire Lea to help design the survey, as well as funded me directly to help support my work.
- **Nijibox**: Japan-based [Nijibox](https://nijibox.jp/) has also graciously accepted to sponsor my efforts to help make these yearly surveys more sustainable.
### 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). Our code is [open-source](https://github.com/Devographics/Monorepo/).
### Feedback
- [Report a technical issue](https://github.com/Devographics/Monorepo/issues)
- [Make a suggestion for next year](https://github.com/Devographics/surveys/issues/193)
- [Other non-technical issues](https://github.com/Devographics/surveys/issues)
- [Join our Discord](https://discord.gg/tuWRUWVyJs)