-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathcss2021.yml
447 lines (347 loc) · 22 KB
/
css2021.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
locale: ro-RO
namespace: css
translations:
###########################################################################
# Introduction
###########################################################################
- key: general.results.description
t: Ediția din 2021 a sondajului anual despre cele mai noi tendințe din ecosistemul CSS.
- key: introduction.css2021
t: |
<span class="first-letter">S</span>unt tâmplarii nevoiți să învețe un mod mai bun de a tăia o placă o dată la
câțiva ani? Au pictorii sindromul impostorului pentru că încă mai pictează în ulei? Sau suntem doar noi front-end
developerii cei care experimentează constant această stare de schimbare?
Având container queries și multe alte funcționalități chiar după colț, putem spune cu siguranță că lucrurile se
mișcă cu rapiditate. Și, din moment ce trebuie să ținem pasul cu ele, ne-am făcut timp să aducem și câteva
îmbunătățiri rezultatelor sondajului!
În practică, asta înseamnă că putem face referințe încrucișate între doi indicatori, cum ar fi salariul anual și
nivelul de experiență; sau genul în funcție de țară. Vei vedea unele dintre aceste defalcări incluse în rezultate,
dar te încurajăm să explorezi datele și mai în profunzime folosind [API-ul nostru](https://api.stateofjs.com/) sau
[descărcându-le](https://www.kaggle.com/sachag/state-of-css). Dă-ne de veste dacă îți faci propria vizualizare a
datelor!
Și acum să vedem ce a mai făcut CSS anul acesta!
*Notă: Suntem nevoiți să amânăm sondajul [State of JavaScript](http://stateofjs.com/) 2021 până în ianuarie 2022
din cauza lipsei de timp. Ne revedem după sărbători!*
<span class="conclusion__byline">– Sacha Greif</span>
###########################################################################
# Tshirt
###########################################################################
- key: sections.tshirt.title
t: Tricou
- key: sections.tshirt.description
t: |
## Susține sondajul cu tricoul State of CSS
Între calitatea video scăzută, casetele voluminoase și faptul că trebuia să derulezi înapoi, nu sunt prea multe
de care să-ți fie dor din era VHS. Dar un lucru care *ne* lipsește sunt imaginile minunate din anii '90 cu care
obișnuiau să fie decorate casetele VHS nescrise.
Dar acum, grație talentatului Christopher Kirk-Nielsen ne putem bucura cu toții de strălucirea retro, sărbătorind
în același timp și dragostea pentru CSS!
- key: tshirt.about
t: Despre tricou
- key: tshirt.description
t: |
Folosim un tricou dintr-un material înalt calitativ, foarte moale, care are un croi slim fit, imprimat de
partenerii noștri de la Cotton Bureau.
- key: tshirt.getit
t: Cumpără
- key: tshirt.price
t: $29 + transport
- key: tshirt.designer.heading
t: Despre designer
- key: tshirt.designer.name
t: Christopher Kirk-Nielsen
- key: tshirt.designer.bio
t: |
Originar din Franța, dar stabilit în prezent în Statele Unite, Chris nu este doar un front-end developer
extraordinar, dar și un ilustrator talentat specializat în vizualuri retro. De fapt, te încurajăm să tragi o
privire și peste [celelalte design-uri de tricou](https://chriskirknielsen.com/designs)!
###########################################################################
# Sections Introductions
###########################################################################
- key: sections.user_info.description
t: |
Sondajul din acest an a ajuns la **8.714** developeri din întreaga lume și, pentru a
evidenția diverse voci și perspective mai profunde, am depus un efort deosebit
în a oferi noi moduri de a descompune datele.
- key: sections.features.description
t: |
Dinamismul CSS nu dă niciun semn de oprire, în timp ce developerii depun efort în adoptarea noii
„recolte” de funcționalități și așteaptă cu nerăbdare inovațiile din anii următori.
- key: sections.technologies.description
t: |
Având în vedere că aproape 50% dintre respondenți folosesc cu plăcere una sau mai multe librării CSS-in-JS, este
sigur să spunem că această categorie a reușit să-și crească nișa. Poate cele două părți ale universului front-end
nu sunt până la urmă atât de îndepărtate?
- key: sections.tools_others.description
t: |
Selectarea unei tehnologii poate adesea implica o serie de alegeri dificile între priorități concurente. În acest
an am încercat să surprindem acest proces folosind un nou format de întrebări eliminatorii (tournament bracket).
- key: sections.environments.description
t: |
Accesibiltatea a fost mult timp în dezvoltarea web o temă de gândire ulterioară, dar mulți developeri își dau
seama acum că ar trebui să fie de fapt fundația pe care se sprijină toate celelalte.
- key: sections.resources.description
t: |
Punerea în lumină a blog-urilor, podcast-urilor și site-urilor este benefică, dar în acest an am decis să facem un
pas mai departe și să prezentăm efectiv oamenii care fac parte din comunitatea CSS!
- key: sections.opinions.description
t: |
Fie că e vorba de punctele dureroase care te țin în loc astăzi sau de funcționalitățile lipsă pe care sperai să le
folosești mâine, aceasta a fost șansa voastră de a dezvălui și împărtăși nemulțumiri legate de 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.animations_transforms
aliasFor: sections.animations_transforms.title
- key: options.features_categories.accessibility
aliasFor: sections.accessibility.title
- key: options.features_categories.media_queries
aliasFor: sections.media_queries.title
- key: options.features_categories.other_features
aliasFor: sections.other_features.title
###########################################################################
# Notes
###########################################################################
- key: blocks.gender.note
t: |
Dacă ești interesat să afli mai multe, [am scris un articol pe blog](https://dev.to/sachagreif/is-our-survey-biased-against-women-49oj)
care abordează dinamica de gen a sondajului.
- key: blocks.css_missing_features.note
t: |
Poți explora întregul set de date obținute din răspunsurile la această întrebare în [acest side project](https://whatsmissingfromcss.com/).
- key: blocks.source.note
t: >
Acest grafic agregă o combinație de referințe, parametri URL și răspunsuri libere.
- State of JS: lista abonaților [State of JS](https://stateofjs.com).
- State of CSS: lista abonaților State of CSS; include și `email`, `după email`, etc.
- Work: include `locul de muncă`, `colegi`, `colegi de muncă`, etc.
###########################################################################
# Awards
###########################################################################
- key: award.feature_adoption_delta_award.comment
t: Cu o evoluție de **{value}** în 2021, funcțiile CSS de comparare devin o parte esențială din toolkit-ul fiecărui developer CSS.
# - key: award.tool_usage_delta_award.comment
# t: Nici un alt instrument nu se apropie măcar de evoluția dramatică de **{value}** pe care Tailwind CSS a avut-o în ultimul an.
- key: award.tool_satisfaction_award.comment
t: PostCSS ocupă din nou primul loc, cu un grad al retenției de **{value}**.
- key: award.tool_interest_award.comment
t: Cu un raport de **{value}**, CSS Modules a generat și în acest an cel mai mare interes în rândul developerilor.
# - key: award.most_write_ins_award.comment
# t: Multe întrebări au acceptat și răspunsuri libere, iar PhpStorm a fost cel mai popular, cu **{value}** mențiuni.
###########################################################################
# Conclusion
###########################################################################
- key: conclusion.css2021
t: |
<span class="first-line">Modul în care scrii CSS este pe cale să se schimbe pentru totdeauna</span>
De mulți ani încoace, multe dintre inovațiile legate de stilizările pentru web au avut loc în alte arii: în
pre-procesoare, framework-uri JavaScript sau compilatoare. Cu siguranță, și CSS-ul în sine a avut parte de câteva
îmbunătățiri, cum sunt [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) sau
[proprietățile personalizate](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Cu toate acestea, încă apelăm
zilnic la diverse librării și la alte helpere.
Dar urmează o schimbare. Limbajul de bază CSS este zguduit și reînnoit, iar noi suntem chiar în fruntea evoluției rapide.
[Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) ne va duce într-o eră
complet nouă a design-ului responsive, iar [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer)
va ușura semnificativ utilizarea framework-urilor, a temelor și gestionarea unui codebase complex.
Dacă privim puțin mai departe, putem remarca și apariția [condiționalului @when/else](https://css-tricks.com/proposal-for-css-when/),
care ne va permite să combinăm query-uri media, container și de suport într-o singură construcție @.
Și ținem pumnii ca 2022 să fie anul în care vom vedea în sfârșit ceva mișcare pe partea de CSS nesting nativ.
Aceia dintre noi care lucrează cu instrumente ca Sass și PostCSS deja nu-și mai pot imagina un alt mod de lucru.
Toate acestea înseamnă că 2022 va fi cel mai probabil un an în care modul în care scrii CSS se va schimba
fundamental. Este o perioadă incredibil de interesantă, iar noi așteptăm cu nerăbdare toate aceste implementări
extraordinare din anul care vine.
- key: conclusion.css2021.bio
t: Developer Web developer și creator al Polypane
###########################################################################
# Picks
###########################################################################
- key: picks.my_pick
t: "Alegerea mea în 2021: "
- key: picks.intro
t: Am rugat membrii comunității CSS să ne spună care este „alegerea anului” din perspectiva lor
- key: picks.george_francis.name
t: API-ul CSS Paint
- key: picks.george_francis.bio
t: Developer, scriitor și artist generativ.
- key: picks.george_francis.description
t: |
API-ul Paint ne permite să creăm imagini în mod programatic, pe care le putem utiliza în CSS-ul nostru. Dezvăluie
o întreagă lume a creativității, iar eu sunt foarte încântat de asta!
- key: picks.cassidy_williams.name
t: Lynn Fisher
- key: picks.cassidy_williams.bio
t: Developer advocate, educator și consilier de startup-uri.
- key: picks.cassidy_williams.description
t: |
Mi-ar plăcea să o aleg pe Lynn Fisher. Ea a surprins și încântat comunitatea CSS în mod constant cu proiectele și
experimentele ei creative. Îmi place cât de multe pot învăța oamenii de la ea!
- key: picks.josh_comeau.name
t: Amelia Wattenberger
- key: picks.josh_comeau.bio
t: Developer software și creator al [CSS for JavaScript Developers](https://css-for-js.dev/).
- key: picks.josh_comeau.description
t: |
Amelia creează unele dintre cele mai uimitoare articole de blog interactive despre CSS și JS. Citește acest
articol despre cum funcționează procentele în CSS!
- key: picks.kevin_j_powell.name
t: Stephanie Eckles
- key: picks.kevin_j_powell.bio
t: Evanghelist CSS.
- key: picks.kevin_j_powell.description
t: |
Sunt în mod constant uluit de inițiativele continue ale Stephaniei care ajută la împărtășirea cunoștințelor ei
despre tehnicile moderne CSS, precum și de entuziasmul ei contagios pentru domeniu.
- key: picks.manuel_matuzovic.name
t: aspect-ratio
- key: picks.manuel_matuzovic.bio
t: Developer front-end din Viena și creator al [htmhell.dev](https://htmhell.dev).
- key: picks.manuel_matuzovic.description
t: |
Toate marile browsere au oferit suport pentru aspect-ratio în 2021. La început l-am subestimat, dar sunt atâtea
situațiile în care această proprietate este utilă!
- key: picks.gift_egwuenu.name
t: Kevin Powell
- key: picks.gift_egwuenu.bio
t: Developer frontend și creator de conținut.
- key: picks.gift_egwuenu.description
t: |
Kevin creează conținut despre CSS pe YouTube, iar mie îmi face mare plăcere să-i urmăresc clipurile. Face o treabă
foarte bună predând concepte CSS într-un mod care este ușor și distractiv de înțeles.
- key: picks.eric_w_bailey.name
t: Miriam Suzanne
- key: picks.eric_w_bailey.bio
t: Design inclusiv și susținător \#a11y.
- key: picks.eric_w_bailey.description
t: |
CSS-ul e pe cale să treacă de la bun la excepțional. Preocuparea lui Miriam pentru Container Queries și Cascade
Layers va revoluționa modul în care scriem CSS.
- key: picks.samuel_kraft.name
t: Vanilla Extract
- key: picks.samuel_kraft.bio
t: Frontend & design.
- key: picks.samuel_kraft.description
t: |
În ultima vreme, mi-a plăcut să lucrez cu Vanilla Extract. Este la fel ca CSS Modules, dar scris cu o experiență
de programator magică.
- key: picks.sacha_greif.name
t: Open Props
- key: picks.sacha_greif.bio
t: Creator al State of JS și State of CSS.
- key: picks.sacha_greif.description
t: |
E foarte tare să vezi cum funcționează bucla de feedback dintre noile funcționalități CSS și noile proiecte care
se folosesc de acestea! Cred că un bun exemplu de utilizare excepțională a proprietăților personalizate (variabile
CSS) este Open Props al lui Adam Argyle.
- key: picks.ahmad_shadeed.name
t: Container Queries
- key: picks.ahmad_shadeed.bio
t: Autor al [Debugging CSS](https://debuggingcss.com/) și al [ishadeed.com](http://ishadeed.com).
- key: picks.ahmad_shadeed.description
t: |
CSS container queries din nou! Am avut șansa să ne jucăm cu ele într-un browser. Mulțumim, Miriam Suzanne, pentru
că ai făcut ca lucrurile să avanseze! De abia aștept să le folosesc fără flag.
- key: picks.adam_argyle.name
t: CSS Noise
- key: picks.adam_argyle.bio
t: CSS la Google.
- key: picks.adam_argyle.description
t: |
Textura și efectul neregulat generate de CSS creează în design-ul tău efecte interesante și unice. Instrumentele
Noise au făcut tehnica accesibilă.
- key: picks.stephanie_walter.name
t: Miriam Suzanne
- key: picks.stephanie_walter.bio
t: Cercetător UX și iubitor de CSS.
- key: picks.stephanie_walter.description
t: |
Miriam este o artistă și o activistă ce creează software și artă care celebrează complexitatea queer a experienței
umane. Este un expert CSS și face o treabă uimitoare în ceea ce privește specificațiile pentru CSS Container Queries.
- key: picks.michelle_barker.name
t: “Building a Color Scheme” de Adam Argyle
- key: picks.michelle_barker.bio
t: Senior Front End Developer
- key: picks.michelle_barker.description
t: |
Îmi place acest articol pentru că, deși proprietățile personalizate există de ceva vreme, le duce cu adevărat la
un alt nivel și le arată puterea. Sper că îi face pe unii oameni să se gândească la ele într-un mod diferit, mai
mult decât simple variabile.
- key: picks.kilian_valkhof.name
t: prefers-reduced-data
- key: picks.kilian_valkhof.bio
t: Developer web și creator al Polypane.
- key: picks.kilian_valkhof.description
t: |
Avem nevoie de mai mulți developeri care să ceară browserelor această funcționalitate și care să realizeze ce
diferență mare poate face. Cu toate acestea, 64% dintre respondenți nu știu despre ea; avem de lucru!
###########################################################################
# Sponsors
###########################################################################
- key: sponsors.frontendmasters.description
t: Aprofundează-ți cunoștințele urmând cursuri moderne de inginerie front-end.
- key: sponsors.polypane.description
t: Browserul developerilor ambițioși. Creează cu ușurință website-uri responsive, accesibile și rapide.
- key: sponsors.google_chrome.description
t: Mulțumim echipei Google Chrome pentru susținerea muncii noastre.
###########################################################################
# FAQ/About
###########################################################################
- key: about.content
t: >
Sondajul State of CSS din 2021 a avut loc între 5 octombrie și 2 noiembrie 2021 și a colectat 8.714 răspunsuri.
Sondajul a fost organizat de mine, [Sacha Greif](https://sachagreif.com/), cu ajutorul unei echipe de colaboratori
și consultanți open-source.
Logo-ul și tricoul din acest an au fost create și animate de [Christopher Kirk-Nielsen](http://chriskirknielsen.com/).
### Obiectiv
Acest sondaj, împreună cu sondajul [State of JavaScript](https://stateofjs.com/), a fost creat pentru a identifica
tendințe viitoare din ecosistemul dezvoltării web, cu scopul de ajuta developerii să facă alegeri tehnologice.
Prin urmare, aceste sondaje se concentrează mai degrabă pe anticiparea a ceea ce va avea loc în următorii câțiva
ani decât pe analizarea a ceea ce se bucură acum de succes. Din acest motiv, funcționalitățile și tehnologiile
care sunt în prezent cele mai răspândite nu sunt întotdeauna incluse.
### Design
Sondajul a fost creat parțial pe baza sondajului de anul trecut, cu o perioadă deschisă de feedback în care schița
acestuia a fost pusă în discuție [pe GitHub](https://github.com/StateOfJS/StateOfCSS-2020/issues/8).
Toate întrebările sondajului au fost opționale.
### Audiență
Sondajul a fost accesibil online, iar respondenții nu au fost filtrați sau selectați în niciun fel. Respondenții
au fost în mare parte o combinație de respondenți ai sondajelor anterioare (anunțați pe baza unei liste dedicate
de email-uri) și trafic din social media.
### Reprezentativitate și inclusivitate
Deși credem că e important să dăm o voce fiecărei comunități, realitatea este că un sondaj deschis cum e
acesta va avea întotdeauna dificultăți în a reprezenta cu succes pe toată lumea, mai ales atunci când operează
prin sisteme care au deja propriile biasuri inerente.
Pentru a contrabalansa acest lucru, am implementat 3 strategii distincte:
- **Extinderea**: anul acesta am contactat 23 de organizații care reprezintă developerii BIPOC și LGBTQ în speranța
unei colaborări. Deși foarte puține dintre acestea au răspuns, vom continua să căutăm noi moduri prin care să
ajungem dincolo de audiența noastră curentă.
- **Analiza datelor**: prin funcționalități precum fațetele și variantele, încercăm permanent să scoatem în
evidență vocea oricărui segment demografic, indiferent cât de puțin ar reprezenta acesta în datele noastre.
- **Reducerea barierelor**: un sondaj prea lung, inaccesibil, care se încarcă greu, scris doar în limba engleză,
etc. - toate pot contribui la impunerea unei „taxe de efort” care îi exclude pe cei ce nu-și permit să o
plătească. Rezolvarea acestor probleme poate reduce bariera de intrare și, în acest proces, să aducă un public
mai divers.
### Finanțarea proiectului
Finanțarea acestui proiect provine dintr-o varietate de surse:
- **Vânzarea de tricouri**.
- **Link-uri sponsorizate**: link-urile către resursele recomandate din josul fiecărei pagini sunt furnizate de
partenerul nostru [Frontend Masters](https://frontendmasters.com/).
- **Alte finanțări**: în acest an, echipa [Google Chrome](https://www.google.com/chrome/) a alocat un mic buget
pentru a ne ajuta să angajăm un [consultant în accesibilitate](https://fossheim.io/) care să lucreze la sondaj.
Cu toate aceste finanțări, sondajul rămâne în mare parte un proiect autofinanțat, așadar orice contribuție sau
sponsorizare este foarte apreciată. Mi-aș dori să lucrez mai mult în special cu furnizorii de browsere deoarece
joacă un rol esențial în ecosistemul web.
### Prezentare tehnică
Poți găsi o prezentare tehnică detaliată despre cum se desfășoară sondajele [aici](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb).
- **Colectarea de date**: custom [Vulcan.js](http://vulcanjs.org/) app.
- **Stocarea/prelucrarea datelor**: MongoDB & MongoDB Aggregations.
- **Data API**: API Node.js GraphQL.
- **Site-ul cu rezultate**: [Gatsby](https://www.gatsbyjs.com/) React app.
- **Vizualizarea datelor**: [Nivo](https://nivo.rocks/) React dataviz library.
- **Font**: [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono) și [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue).