-
Notifications
You must be signed in to change notification settings - Fork 1
/
css2020.yml
270 lines (196 loc) · 13.7 KB
/
css2020.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
locale: en-US
translations:
###########################################################################
# Introduction
###########################################################################
- key: introduction.css2020
t: |
<span class="first-letter">E</span>quece todo o que sabes sobre CSS. Ou, alo menos, prepárate para reconsiderar unha boa parte. Se coma min, estiveches escribindo CSS por máis dunha década, CSS en 2020 non se parece nada ao que estabas acostumado.
En vez de breakpoints, agora podemos usar CSS Grid para facer layouts dinámicos e flexibles que se adaptan a calquera tamaño de pantalla cunhas poucas liñas de código. En vez de apoiarnos en follas de estilo globais, CSS-in-JS nos deixa dispor os estilos nos compoñentes para construír sistemas temáticos de deseño.
Asemade, Tailwind CSS irrompeu na escena e, co uso de utility-first CSS, nos forza a replantearnos o dogma tradicional dos nomes semánticos de clase.
Tanto si todos estes cambios fan que queiras escribir un blog entusiasta o un twit furioso, aquí estamos para presentarche os datos, resaltar as tendencias e confiar en que felizmente te guíen a través doutro ano cheo de acontecementos no mundo CSS!
### Equipo
A enquisa sobre o Estado de CSS foi creada e está mantida por:
- [Sacha Greif](https://twitter.com/sachagreif): Deseño, texto, código
- [Raphaël Benitte](https://twitter.com/benitteraphael): Análise de datos, visualización de datos
### Descarga nosos datos
Podes descargalos datos da enquisa [en bruto en formato JSON](https://www.kaggle.com/sachag/state-of-css). E fainos saber si acabas creando os teus propios gráficos!
### Otras ligazóns
- [State of CSS Homepage](https://stateofcss.com)
- [State of JS](https://stateofjs.com)
### Grazas!
Grazas a toda a xente que nos ten axudado a deseñar a enquisa, incluidos [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyke](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/), e [Kilian Valkhof](https://kilianvalkhof.com/).
Ademáis, o noso agradecemento a [Alexey Pyltsyn](https://github.com/lex111) pola súa axuda coas traducións.
### Creditos & Stuff
O sitio está configurado en IBM Plex Mono. Preguntas? Comentarios? [¡Contáctanos!](mailto:[email protected])
E agora, imos ver ao que se dedicou CSS este ano!
<span class="conclusion__byline">– Sacha e Raphaël</span>
###########################################################################
# Tshirt
###########################################################################
- key: sections.tshirt.title
t: Camiseta
- key: sections.tshirt.description
t: |
## Apoia a enquisa e ten un bo aspecto no proceso!
Un anuncio rápido antes dos resultados da enquisa. Presentamos a nosa propia 🎈🎉👕 camiseta sobre o Estado de CSS 👕🎉🎈!
O que fai desta camiseta algo realmente especial é que é a úneca camiseta que además ensiñache CSS.
Así que tanto si vas a unha conferencia, a unha entrevista de traballo ou a traballar, esta camiseta demostrará o teu dominio CSS como ningunha outra peza!
- key: tshirt.about
t: Sobre a camiseta
- key: tshirt.description
t: |
A camiseta ten o logo de "Estado de CSS" xunto coos fragmentos de CSS empregados para crear cada forma. Quén sabe, pode que até aprendas un par de trucos útiles!
Usamos unha camiseta axustada de alta calidade, cun tecido extra suave con tres materiais (algodón, poliéster e rayón).
Ao ser axustada, se prefires que te quede algo solta, te recomendamos que pidas unha talla máis da que levas habitualmente (eu levo unha M nas fotos).
- key: tshirt.getit
t: Consíguea
- key: tshirt.price
t: USD $24 + transporte
###########################################################################
# Sections Introductions
###########################################################################
- key: sections.user_info.description
t: |
A enquisa deste ano chegou a 11.492 persoas en 102 países. Por primeira vez este ano,
fumos capaces de traducir as preguntas da enquisa a múltiples idiomas grazas a un incríble equipo de voluntarios.
- key: sections.features.description
t: |
CSS viu como xurdian montóns de novas características nos últimos anos, así que como podes supor
a adopción é lenta segundo a comunidade vai absorbéndoas pouco a pouco.
- key: sections.units_selectors.description
t: |
¡Estamos dispostos a apostar que vas a atopar, nesta sección, cousas que non coñecías!
- key: sections.technologies.description
t: |
O ecosistema CSS está a sufrir unha renovación, e os soportes máis antigos coma Bootstrap teñen que acomodar agora aos máis novos como TailwindCSS. Sen falar de todo o movemento CSS-in-JS que, inda que *aínda* non se converteu na corrente principal de CSS, está a manterse bastante activo non obstante.
- key: sections.other_tools.description
t: |
Non nos sorprende, e merece a pena mencionala, a aparición de navegadores enfocados ao desenvolvemento
como Polypane e Sizzy, que van un paso máis alá das clásicas ferramentas de desenvolvemento.
- key: sections.environments.description
t: |
Unha das fortalezas de CSS é a súa capacidade para adaptarse a diferentes entornos, e inda así, por diferentes
razóns, medios como a impresión e os correos electrónicos permanecen inexplorados pola maioría dos desenvolvedores.
Pode que estes sexan a seguinte fronteira para CSS…?
- key: sections.resources.description
t: |
Os resultados de "outras respostas" nesta sección demostran o rico e variado da comunidade CSS,
e mostran moitos blogs e podcasts relevantes que estamos desexando engadir oficialmente na enquisa
do ano que ven!
- key: sections.opinions.description
t: |
Estas opinións describen un panorama dunha linguaxe que maduran, e faise máis complexa. E ata que pode
-alo menos mentras nos esforzamos por manternos actualizados- un poco menos divertido?
###########################################################################
# Notes
###########################################################################
- key: blocks.gender.note
t: |
Si estás interesado en saber máis, [escribimos este post](https://dev.to/sachagreif/is-our-survey-biased-against-women-49oj) que aborda a dinámica de xénero da enquisa..
- key: blocks.css_missing_features.note
t: |
Podes explorar as respostas completas relacionadas con esta pregunta [neste outro proxecto](https://whatsmissingfromcss.com/).
- key: blocks.source.note
t: >
Esta gráfica aglutina unha mezcla de referencias, parámetros de URLs e respostas libres.
- State of JS: lista de correo de [Estado de JS](https://stateofjs.com).
- State of CSS: lista de correo de Estado de CSS; también coincide con 'email', 'by email', etc.
- Work: coincide con `work`, `colleagues`, `coworkers`, etc.
###########################################################################
# Awards
###########################################################################
- key: award.feature_adoption_delta_award.comment
t: Cun **{value}** de progresión, 2020 foi o ano no que CSS Grid deu finalmente o paso de nova tecnoloxía a ferramenta consolida.
- key: award.tool_usage_delta_award.comment
t: Cun **{value}** de progression, ningunha outra ferramenta se acerca ao rápido crecemento que experimentou Tailwind CSS no último ano.
- key: award.tool_satisfaction_award.comment
t: O ratio de **{value}** de satisfacción de PostCSS demostra que se pode gañar facendo algo realmente ben.
- key: award.tool_interest_award.comment
t: Cun **{value}**, os módulos de CSS veñen de xerar o maior interese entre os desenvolvedores este ano.
- key: award.most_write_ins_award.comment
t: Moitas preguntas aceptan respostas escritas, e cun **{value}** PhpStorm foi o que recibiu máis mencións.
###########################################################################
# Conclusion
###########################################################################
- key: sections.conclusion.description
t: |
Se os desenvolvedores de JavaSCript escriben unha liña de CSS, son agora desenvolvedores de CSS?
Este *kōan* sobre programación, ilustra unha clara tendencia no desenvolvemento web: así como a cada vez máis desenvolvedores de CSS se lle pide que aprendan JavaScript, máis desenvolvedores de JavaScript se están a dar de conta de que pode que haxa algo máis nisto do CSS que `font-weight: bold;`.
Así que preguntar sobre «O Estado de CSS» é unha pregunta engañosa en si mesma: depende de a quen preguntes, vas a recibir respostas completamente distintas! E, cómo saber cal é a correcta?
Aquí tes outro *kōan* para tí: a resposta correcta é que non hai unha resposta correcta. Cada unha das moitas ferramentas, metodoloxías, frameworks e librarías amosadas aquí, teñen o seu espazo no basto ecosistema do front-end.
Estás construindo unha aplicación complexa con React? Styled Components é unha gran opción. Estás deseñando unha páxina web estática? No te podes equivocar si usas Sass! E inda que Bootstrap perdeu parte do seu factor de marca orixinal, segue gañando en canto ao número de temas e plugins dos que dispon.
Así que mentres mantemos un ollo nos novos e relocentes xoguetes que aparecen tódalas semanas en GitHub, non debemos olvidarnos de ferramentas, técnicas, e sobre todo, xente que portou a antorcha de CSS hasta agora.¡Necesitamos a todo o mundo si queremos seguir avanzando en 2021, e nos vindieros anos!
###########################################################################
# Picks
###########################################################################
- key: picks.my_2020_pick
t: "Miña selección do 2020: "
- key: picks.intro
t: Pedímoslle á comunidade de CSS que compartan a súa «elección do ano»
- key: picks.shadeed9.bio
t: Autor de debuggingcss.com
- key: picks.shadeed9.description
t: |
Consultas ao contedor é unha característica largamente esperada por nós,
e sintome entusiasmado de decirvos que: o equipo de Chrome está traballando para soportalo de forma nativa!
- key: picks.argyleink.bio
t: CSS en Google
- key: picks.argyleink.description
t: |
A humilde caixa de CSS é máis dinámica cada día, e para mín o 2020 foi sobre todo a prol dos lados lóxicos, en vez dos lados físicos. Contido contextual internacional libre, espaciado e atallos? por favor & gracias.
- key: picks.sachagreif.bio
t: Creador desta enquisa
- key: picks.sachagreif.description
t: |
Con este post, Amelia Wattenberger non só correu unha milla extra, correu toda unha maratón! As animacións e preguntas se aseguran de que por fin entendas como funciona a cascada en CSS.
- key: picks.christianoliff.bio
t: Desenvolvedor front-end en Trimble MAPS
- key: picks.christianoliff.description
t: |
Unha cousa que empecei a usar e a apreciar este ano é Purge CSS- unha incríble ferramenta para limpar o CSS que non se usa. Puode reducir considerablemente o tamaño do teu CSS, e é rápida e fácil de usar.
- key: picks.kilianvalkhof.bio
t: Desenvolvedor Web e creador de Polypane
- key: picks.kilianvalkhof.description
t: |
Inda que `content-visibility` está marcando unha gran diferencia no rendemento das miñas aplicacións web, creo que debería ser traballo do navegador optimizar isto, en vez dos desenvolvedores.
- key: picks.walterstephanie.bio
t: Deseñador centrado no usuario & amante de CSS
- key: picks.walterstephanie.description
t: |
Unha serie de vídeos en YouTube que explican todas as novas características de CSS para crear deseños modernos.
- key: picks.piccalilli_.bio
t: Deseñador freelance e desenvolvedor que fai piccalil.li
- key: picks.piccalilli_.description
t: |
Este blog é unha mina de ouro de coñecemento sobre CSS. Michelle é unha lenda de CSS e cada post e tutorial que escriben, está cheo de contido útil.
- key: picks.sarasoueidan.bio
t: Enxeñeiro independiente de deseño e interfaces
- key: picks.sarasoueidan.description
t: |
A miña elección é unha persona chamada Rachel Andrew. Enseña CSS Grid a toda unha nova xeración de desenvolvedores.
- key: picks.5t3ph.bio
t: Enxeñeiro de Software en Microsoft
- key: picks.5t3ph.description
t: |
En esta charla, Manuel Matuzovic provee exemplos concienzudos,
que enganchan e son fácilmente abordables.
- key: picks.hugogiraudel.bio
t: Defensor da accesibilidade e da diversidade non-binarios
- key: picks.hugogiraudel.description
t: |
Fela é unha incríble peza de código.
É moi potente, relativamente fácil de usar e cun alto rendemento.
- key: picks.foolip.bio
t: Enxeñeiro de Software en Google
- key: picks.foolip.description
t: |
Sergio fixou recentemente un montón de Flexbox en WebKit e incluso algo en Chromium,
cerrando notablemente a fenda para WebKit,
o que significa que pronto estará en todos os navegadores modernos.
- key: picks.jina.bio
t: Devoto deseñador de sistemas e practicante
- key: picks.jina.description
t: |
A consulta ao medio -media query- para reducir o movemento, que axuda
a evitar mareos e incomodidades.