-
Notifications
You must be signed in to change notification settings - Fork 7
/
css2020.yml
272 lines (198 loc) · 13.8 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
271
272
locale: es-ES
translations:
###########################################################################
# Introduction
###########################################################################
- key: introduction.css2020
t: |
<span class="first-letter">O</span>lvida todo lo que sabes sobre CSS. O al menos, prepárate para reconsidera la mayoría. Sí como yo, has estado escribiendo CSS más de una década, CSS en 2020 no se parece en nada a lo que estás acostumbrado.
En vez de breakpoints, ahora podemos usar CSS Grid para hacer layouts dinámicos y flexibles que se adaptan a cualquier tamaño de pantalla con unas pocas líneas de código. En vez de apoyarnos en hojas de estilos globales, CSS-in-JS nos deja poner los estilos directamente en los componentes, para poder usar temas.
Y por si fuese poco, Tailwind CSS ha irrumpido en la escena y, a través del uso de utility-first CSS, nos ha forzado a replantearnos el dogma tradicional de los nombres de clases semánticos.
Tanto si todos estos cambios hacen que quieras escribir un blog entusiasta o un twit furioso, aquí estamos para presentarte los datos, resaltando las tendencias, que ¡esperemos que te guíen a través de otro año lleno de acontecimientos en el mundo de CSS!
### Team
La encuesta sobre el Estado de CSS ha sido creada y está mantenida por:
- [Sacha Greif](https://twitter.com/sachagreif): Diseño, texto, código
- [Raphaël Benitte](https://twitter.com/benitteraphael): Análisis de datos, visualización de datos
### Download Our Data
Puedes [descargar los datos en bruto en formato JSON de esta encuesta](https://www.kaggle.com/sachag/state-of-css). ¡Haznos saber si acabas creando tus propios gráficos!
### Other Links
- [State of CSS Homepage](https://stateofcss.com)
- [State of JS](https://stateofjs.com)
### Thanks
Gracias a toda la gente que nos ha ayudado a diseñar la encuesta, incluidos [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/), y [Kilian Valkhof](https://kilianvalkhof.com/).
Además, nuestro agradecimiento a [Alexey Pyltsyn](https://github.com/lex111) por su ayuda con las traducciones.
### Credits & Stuff
Este sitio está en IBM Plex Mono. ¿Preguntas? ¿Comentarios? [¡Contáctanos!](mailto:hello@stateofjs.com)
Y ahora, ¡vemos a lo que se ha dedicado CSS este año!
<span class="conclusion__byline">– Sacha y Raphaël</span>
###########################################################################
# Tshirt
###########################################################################
- key: sections.tshirt.title
t: Camiseta
- key: sections.tshirt.description
t: |
## ¡Apoya la encuesta y presume de camiseta!
Un anuncio rápido antes de los resultados de la encuesta. ¡Os presentamos nuestra propia 🎈🎉👕 Camiseta sobre el Estado de CSS 👕🎉🎈!
Lo que hace a esta camiseta realmente especial es que es la única camiseta que además te enseña CSS.
Así que tanto si vas a una conferencia, a una entrevista de trabajo o a trabajar, ¡esta camiseta demostrará tu maestría con CSS cómo ninguna otra!
- key: tshirt.about
t: Sobre la Camiseta
- key: tshirt.description
t: |
La camiseta tiene el logo del "Estado de CSS" junto con los fragmentos de CSS usados para crear cada forma. ¡Quién sabe, puede que aprendas un par de trucos útiles!
Usamos una camiseta ajustada de alta calidad, con un tejido extra suave con tres materiales (algodón, poliéster y rayón).
Al seer la camiseta ajustada, si prefieres que te quede algo suelta, te recomendamos que pidas una talla más de la que habitualmente llevas (yo llevo una M en las fotos).
- key: tshirt.getit
t: Consíguela
- key: tshirt.price
t: USD $24 + transporte
###########################################################################
# Sections Introductions
###########################################################################
- key: sections.user_info.description
t: |
La encuesta de este año a llegado a 11.492 personas en 102 países. Por primera vez este año,
hemos sido capaces de traducir las preguntas de la encuesta a múltiples idiomas gracias a un increíble equipo de voluntarios.
- key: sections.features.description
t: |
CSS ha visto como han surgido un montón de características nuevas en los últimos años, así que como te imaginas
la adopción es lenta según la comunidad va poco a poco absorbiéndolas.
- key: sections.units_selectors.description
t: |
¡Estamos dispuestos a apostar que vas a encontrar, en esta sección, cosas que no conocías!
- key: sections.technologies.description
t: |
El ecosistema de CSS está sufriendo una renovación de clases, ya que antiguos pilares como Bootstrap
tienen que hacer sitio a nuevos actores como Tailwind CSS. Sin hablar ya del nuevo movimiento CSS-in-JS
el cual, pese a que aún tiene que entrar en el día a día de CSS, se está moviendo realmente rápido.
- key: sections.other_tools.description
t: |
No nos ha sorprendido, y merece la pena mencionarla, la aparición de navegadores enfocados al desarrollo
como Polypane y Sizzy, que van un paso más allá de las clásicas herramientas de desarrollo.
- key: sections.environments.description
t: |
Una de las fortalezas de CSS es su capacidad para adaptarse a diferentes entornos, y aún así, por diferentes
razones, medios como la impresión y los correos electrónicos permaneces inexplorados por la mayoría de los desarrolladores.
¿Puede que estos sean la siguiente frontera para CSS…?
- key: sections.resources.description
t: |
¡Los resultados de "otras respuestas" en esta sección demuestran lo rico y variado de la comunidad CSS,
y muestran muchos blogs y podcast relevantes que estamos deseando añadir oficialmente a la encuesta
del año que viene!
- key: sections.opinions.description
t: |
Estas opiniones describen un panorama de un lenguaje que está madurando, y haciéndose más complejo. Y a lo mejor
-al menos mientras nos esforzamos por mantenernos actualizados- ¿un poco más difícil de disfrutar?
###########################################################################
# Notes
###########################################################################
- key: blocks.gender.note
t: |
Si estás interesado en saber más, [hemos escrito un post](https://dev.to/sachagreif/is-our-survey-biased-against-women-49oj) que habla del desarrollo de la encuesta con respecto al género.
- key: blocks.css_missing_features.note
t: |
Puedes explorar las respuestas completas relacionadas con esta pregunta en [este otro proyecto](https://whatsmissingfromcss.com/).
- key: blocks.source.note
t: >
Esta gráfica aglutina una mezcla de referencias, parámetros de URLs y respuestas libres.
- State of JS: lista de correo del [Estado de JS](https://stateofjs.com).
- State of CSS: la lista de correo del 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: 2020 ha sido el año en el que CSS Grid finalmente ha dado el paso de nueva tecnología a herramienta consolida.
- key: award.tool_usage_delta_award.comment
t: Ninguna otra herramienta se acerca al rápido crecimiento que ha tenido Tailwind CSS en el último año.
- key: award.tool_satisfaction_award.comment
t: El ratio de satisfacción con PostCSS demuestra que puedes vencer haciendo algo realmente bien.
- key: award.tool_interest_award.comment
t: Los módulos de CSS han generado el mayor interés entre los desarrolladores este año.
- key: award.most_write_ins_award.comment
t: Muchas preguntas aceptan respuestas escritas, y PhpStorm ha sido quien ha recibido más menciones.
###########################################################################
# Conclusion
###########################################################################
- key: sections.conclusion.description
t: |
¿Si los desarrolladores de JavaScript escriben una línea de CSS, son ahora desarrolladores de CSS?
Este *kōan* sobre programación, ilustra una clara tendencia en el desarrollo web: así como a cada vez más desarrolladores de CSS les están pidiendo que aprendan JavaScript, más desarrolladores de JavaScript se están dando cuenta de que puede que haya algo más en esto del CSS que `font-weight: bold;`.
Así que preguntar sobre “el Estado de CSS” es una pregunta engañosa en si misma: ¡depende de a quién preguntes, vas a recibir respuestas completamente distintas! Y ¿cómo saber cual es la correcta?
Aquí tienes otro *kōan* para tí: la respuesta correcta es que no hay una respuesta correcta. Cada una de las muchas herramientas, metodologías, frameworks y librerías mostradas aquí, tienen su espacio en el basto ecosistema del front-end.
¿Estás construyendo una aplicación compleja con React? Styled Components es una gran opción. ¿Estás diseñando una página web estática? ¡No te puedes equivocar si usas Sass! He incluso aunque Bootstrap haya perdido parte de su encanto inicial, sigue ganando si hablamos del número de temas y plugins que tiene.
Así que mientras mantenemos un ojo en los nuevos y brillantes juguetes que aparecen todas las semanas en GitHub, no debemos olvidarnos de herramientas, técnicas, y sobre todo, gente que ha portado la antorcha de CSS hasta ahora.¡Necesitamos a todo el mundo si queremos seguir avanzando en 2021, y los años venideros!
###########################################################################
# Picks
###########################################################################
- key: picks.my_2020_pick
t: "Mi selección para 2020: "
- key: picks.intro
t: Hemos pedido a la comunidad de CSS que compartan su “elección del año”
- key: picks.shadeed9.bio
t: Autor de debuggingcss.com
- key: picks.shadeed9.description
t: |
Queries al contenedor es una característica largamente esperada por nosotros,
y me siento entusiasmado de deciros que ¡el equipo de Chrome está trabajando para soportarlo de forma nativa!
- key: picks.argyleink.bio
t: CSS en Google
- key: picks.argyleink.description
t: |
La humilde caja de CSS es más dinámica cada día, y para mí 2020 fue sobre todo sobre lados lógicos, en vez de lados físicos. ¿Contenido contextual internacional libre, espaciado y atajos? por favor & gracias
- key: picks.sachagreif.bio
t: Creador de esta encuesta
- key: picks.sachagreif.description
t: |
Con este post, Amelia Wattenberger no solo corrió una milla extra, ¡corrió todo un maratón! Las animaciones y preguntas se aseguran de que finalmente entiendas como funciona la cascada en CSS.
- key: picks.christianoliff.bio
t: Desarrollador front-end en Trimble MAPS
- key: picks.christianoliff.description
t: |
Una cosa que he empezado a usar y a apreciar este año es Purge CSS- una increíble herramienta para limpiar el CSS que no se usa. Puede reducir considerablemente el tamaño de tu CSS, y es rápida y fácil de usar.
- key: picks.kilianvalkhof.bio
t: Desarrollador Web y creador de Polypane
- key: picks.kilianvalkhof.description
t: |
Aunque `content-visibility` está marcando una gran diferencia en el rendimiento de mis aplicaciones web, creo que debería ser trabajo del navegador optimizar esto, en vez de los desarrolladores.
- key: picks.walterstephanie.bio
t: Diseñador centrado en el usuario & amante de CSS
- key: picks.walterstephanie.description
t: |
Una serie de videos en YouTube que explican todas las nuevas características de CSS para crear diseños modernos.
- key: picks.piccalilli_.bio
t: Diseñador freelance y desarrollador que hace piccalil.li
- key: picks.piccalilli_.description
t: |
Este blog es una mina de oro de conocimiento sobre CSS. Michelle es una leyenda de CSS y cada post y tutorial que escriben, está lleno de contenido útil.
- key: picks.sarasoueidan.bio
t: Ingeniero independiente de diseño e interfaces
- key: picks.sarasoueidan.description
t: |
Mi elección es una persona llamada Rachel Andrew. Enseña CSS Grid a toda una nueva generación de desarrolladores.
- key: picks.5t3ph.bio
t: Ingeniero de Software en Microsoft
- key: picks.5t3ph.description
t: |
En esta charla, Manuel Matuzovic provee ejemplos concienzudos,
que enganchan y son fácilmente abordables.
- key: picks.hugogiraudel.bio
t: Non-binary accessibility & diversity advocate
- key: picks.hugogiraudel.description
t: |
Fela es una increíble pieza de código.
Es muy potente, relativamente fácil de usar y con un alto rendimiento.
- key: picks.foolip.bio
t: Software Engineer en Google
- key: picks.foolip.description
t: |
Sergio recientemente a arreglado un montón de Flexbox en WebKit e incluso algo en Chromium,
cerrando notablemente la brecha para WebKit,
lo que significa que pronto estará en todos los navegadores modernos.
- key: picks.jina.bio
t: Devoto diseñador de sistemas y practicante
- key: picks.jina.description
t: |
La media query para reducir el movimiento, que ayuda
a evitar mareos e incomodidades.