Read on Twitter
Todo el 2020 hice puro React (y algo de Vue, pero eso es para otro tweet). Ya lo había utilizado, pero no diario y con un equipo grande y en equipos y proyectos internacionales.
Ahí les van 3 tips:
— Aprenden bien JSX
— Prueben Next.js
— Olviden todo lo que saben de CSS
Ahí les van 3 tips:
— Aprenden bien JSX
— Prueben Next.js
— Olviden todo lo que saben de CSS
Aunque sigo usando mi propio y privado setup de SCSS+CSSComb+BEM, he disfrutado mucho usar React con alternativas:
— Styled components
— Tailwind
— CSS Modules
— CSS Vanilla
Si lo que están programando no tiene diseño de Marketing (landings/sitios web) prueben soltar SASS.
— Styled components
— Tailwind
— CSS Modules
— CSS Vanilla
Si lo que están programando no tiene diseño de Marketing (landings/sitios web) prueben soltar SASS.
No le tengan miedo a JSX.
Hoy es mucho más fácil tener componentes pequeños, optimizados y con buen markup gracias a Fragments[0] y Destructuring Assignements [1] y con Hooks[2].
[0] https://en.reactjs.org/docs/fragments.html
[1] https://zaiste.net/posts/javascript-destructuring-assignment-default-values/
[2] https://reactjs.org/docs/hooks-intro.html
Hoy es mucho más fácil tener componentes pequeños, optimizados y con buen markup gracias a Fragments[0] y Destructuring Assignements [1] y con Hooks[2].
[0] https://en.reactjs.org/docs/fragments.html
[1] https://zaiste.net/posts/javascript-destructuring-assignment-default-values/
[2] https://reactjs.org/docs/hooks-intro.html
Finalmente, Next.js es un buen level up de CreateReactApp, donde puedes escribir backend en node con functiones lambda/serverless.
También recomiendo Gatsby si tienen que hacer páginas Web estáticas, pero tiene su grado de complejidad de configuración para cosas complejas.
También recomiendo Gatsby si tienen que hacer páginas Web estáticas, pero tiene su grado de complejidad de configuración para cosas complejas.
+1 No le tengan miedo a los ambientes de deploy.
Suban algo de código a las plataformas populares y prueben lo fácil que es hacer updates, meter variables de entorno, regresar una versión, que todo funcione.
AWS Lambda, Firebase, Vercel, Netlify, Heroku, Digital Ocean, Linode.
Suban algo de código a las plataformas populares y prueben lo fácil que es hacer updates, meter variables de entorno, regresar una versión, que todo funcione.
AWS Lambda, Firebase, Vercel, Netlify, Heroku, Digital Ocean, Linode.
+2 Configuren su IDE para que funcione con ESLint, Prettier, EditorConfig, CSSComb*.
No va a escribir el código por ti, pero te va a devolver muchos minutos al día para hacer más cosas y seguir escribiendo lo mismo que el equipo.
CSSComb no es muy popular, pero lo amo.
No va a escribir el código por ti, pero te va a devolver muchos minutos al día para hacer más cosas y seguir escribiendo lo mismo que el equipo.
CSSComb no es muy popular, pero lo amo.
+3 Si no tienen un sistema de CI/DI y quieren verse un poquito más pro, pueden configurar un GitHub Action que pruebe los Pull Requests y la versión de Dev/Stage/Prod.
No es muy complicado y les va advertir de errores antes de que aparezcan en el deploy.
No es muy complicado y les va advertir de errores antes de que aparezcan en el deploy.
+4 Abracen los formatos del futuro. Nextjs tienen un excelente componente para imágenes, pero si no lo quieren usar empiecen a jugar con Webp (añadiendo fallbacks).
https://developers.google.com/speed/webp/download
Lo tienen a un comando de distancia:
cwebp -q 100 imagen.png -o imagen.webp
https://developers.google.com/speed/webp/download
Lo tienen a un comando de distancia:
cwebp -q 100 imagen.png -o imagen.webp
Y ya, descansen, los tqm.
**Regresa furiosamente a programar**
**Regresa furiosamente a programar**
BTW este es mi archivo de configuración de CSSComb:
https://gist.github.com/chepetime/6d3ed6a9a9f637cd7df743b541450b0c
Añadan la extensión de VSCode y vean cómo su CSS/SCSS se ve mucho más limpio.
https://gist.github.com/chepetime/6d3ed6a9a9f637cd7df743b541450b0c
Añadan la extensión de VSCode y vean cómo su CSS/SCSS se ve mucho más limpio.
Aaaaaaah creo que lo más importante es:
¡Lean más sobre javascript y ES6!
Es fantástico recordar que antes tomaba escribir +10 líneas manejar estructuras de datos en Javascript, y ahora te toma n 2 o solo una si eres fancy.
Map, filter, find y reduce son tus mejores amigos.
¡Lean más sobre javascript y ES6!
Es fantástico recordar que antes tomaba escribir +10 líneas manejar estructuras de datos en Javascript, y ahora te toma n 2 o solo una si eres fancy.
Map, filter, find y reduce son tus mejores amigos.
