Durante la codificación desarrollando en frontend a menudo me olvido de las propiedades exactas y en ese momento la búsqueda en Google toma tiempo al menos para mí. Recuerdo en la universidad como nuestros maestros se empeñaron en ensarnos todas las cosas para que pudiésemos escribirlas a mano más tarde sobre papel y sin poder recurrir a ningún recurso externo.
A día de hoy, todo eso, por suerte, quedó atrás y en los desarrollos no hay minuto que perder en intentar acordarse de alguna función, nombre de componente o directiva concreta y lo que tardas en ir a Google (o a otro buscador de tu preferencia) y preguntar por esa cuestión en concreto te lleva menos tiempo que llevarte un lápiz a la boca y empezar a pensar en todo lo que olvidaste en esos 4 duros años de tu vida. Es como si a día de hoy tuvieras que volver a aprenderte los teléfonos de todos los contactos que tienes en el smartphone…
Aún así, aunque ya no actuemos de esa forma, en muchas ocasiones desarrollando en frontend tienes que recurrir siempre a los mismos parámetros, tags, etc y por no aprendértelos tienes que gastar un tiempo más que valioso en buscarlos una y otra vez, casi cada día y por eso, y porque soy un alma única y caritativa 😎😎.
Te voy a dejar de mano todas las páginas a las que recurro para acceder a esas pequeñas cosas y que me ayudan a ahorrarme unas cuantas horas semanales de búsqueda recurrenta en la red. Estos recursos, o cheat sheets, como me gusta llamarlos te ayudarán en tus tareas de desarrollo diaria, estas son para mí, las más simples, completas y rápidas para el trabajo:
Cheat Sheets Frontend HTML
Esta hoja de trucos contiene ejemplos de código útiles y herramientas para desarrolladores, generadores de marcas y mucho más en una sola página.
Es una guía rápida muy útil para aquellos que ya saben trabajar con estos desarrollos. Si necesitas dar salida rápida para códigos HTML, CSS y lo más básico este es tu sitio.
Cheat Sheets Frontend de CSS
Esta hoja de trucos contiene las propiedades CSS, generadores de sombra de texto, selector de color y algunos fragmentos de código comunes. Todo ello con interface gráfica para poder generarlas directamente con el ratón y listo, copiar y pegar.
Diseño Grid
Este no es sólo un ahorro de tiempo, pero es realmente un salvavidas porque cada vez que estoy trabajando con el diseño de cuadrícula, la mayoría de las veces necesito una hoja de trucos. Debo de reconocer que aún me cuesta sacar las clases de forma natural, lo mismo que en flexbox, pero gracias a esta chuleta no pierdo ni un solo segundo en volver a W3Schools para hacer el repaso matutino.
FlexBox
Otra hoja de trucos basada en lo visual para CSS flexbox, esta contiene todas las propiedades de flexbox con ejemplos visuales.
JavaScript
Estos Cheat Seet contiene ejemplos muy útiles de código en una sola página. Podrás encontrar desde códigso para bucles JS, variables, objetos, tipos de datos, cadenas, eventos y muchas otras categorías, hasta plantillas de JSON multidimensionales y promises. Y, aunque cada vez se usa menos, también podrás encontrar la sección de jQuery, para esos proyectos que tienes que retomar o actualizar.
JavaScript
Como puedes saber, el desarrollo frontend del presente es muy visual y sobre todo, con mucho Javascript, por eso no está demás tener otra segunda alternativa de hoja de trucos para esta tecnología. Este Cheat Seet contiene conceptos básicos y avanzados. ES6+, explicaciones sencillas, DOM API, bucle de eventos, funciones, array, objetos, tipos y mucho más y lo mejor de todo, una colección increíble de chuletas de Javascript para que tenggas aún más referencias a las que acudir en caso de duda.
React
Y seguimos con Javascript, pero esta vez con una de los frameworks que más está subiendo últimamente y más aún para la programación y desarrollo frontend de las aplicaciones más modernas. Esta hoja de trucos contiene varios ejemplos de código para impulsar su desarrollo de React y gracias a esto podrás realizar aplicaciones con componentes básicos en cuestión de segundos. Un copia/pega muy útil y que te ayudará en tu día a día codificando.
Git
Esta hoja de trucos contiene una lista de prácticos comandos git para hacer tu vida más fácil. Ya sé que no es esencialmente para el desarrollo frontend, aunque te lo dejo por aquí porque seguro que perdiste tiempo más de una vez como realizar un merge debidamente 😜.
Conclusión
Las Cheat Sheets son lo mejor para tomar referencias rápidas y aumentar la productividad. Espero que hayas encontrado este artículo útil y que hayas disfrutado de la lectura. Y recuerda, si quieres comenzar a realizar desarrollos frontend súper visuales, no dudes en visitar nuestro Tutorial Three.Js para hacer el juego del calamar y así comenzar a practicar con esta biblioteca de Javascript.
