Siempre había escuchado quejas de la web de Renfe, y ayer, tras un tweet de
@MarkVillacampa
, me dio curiosidad por examinar por encima el código Javascript de la web. Lo que verás a continuación te sorprenderá (o no). Abro hilo.
💥ROADMAP FRONTEND JAVASCRIPT 2022💥
A continuación, una ruta cronológica de tecnologías Javascript para aprender Frontend, saber en que lugar estás y en que podrías seguir enfocándote en aprender.
⚠ Disclaimer:
Cuida tus soft skills. Es una ruta subjetiva.
¡Vamos allá!
🧵🔽
Recuerden que ahora mismo, en algún sitio, alguna persona está subiendo un `node_modules` a GitHub.
A todos nos pasa la primera vez.
Intenta no seguir siendo esa persona.
💻Para todos los que están empezando en el mundo de la programación y sientan que:
💔No saben nada
💔Nunca llegarán a saber lo necesario
💔Son unos «impostores»
Llevo +15 años en el mundo del desarrollo web, y todos los días tengo esa sensación. No eres el problema.
(1/3)
💻 Extensiones interesantes para VSCode
✨ Import Cost: Al importar dependencias Javascript instaladas con npm, indica el tamaño de la misma (incluso en gzip, tamaño con el que suele viajar por Internet). Soporta import / require.
🧵⬇
📜 Si estás en fase de aprendizaje en Desarrollo web o simplemente quieres profundizar y perfeccionarte en temas como HTML, SVG, CSS, Javascript, Vue, Terminal de Linux o WebComponents, aquí tienes unas cheatsheets en formato PDF listas para descargar:
➡
Recuerden que si están aprendiendo desarrollo web (o perfeccionando), pueden descargar mis cheatsheets:
🏷️HTML5
🎨CSS
🤖Javascript
✌️ Vue
🧱WebComponents
👨🏽💻Terminal de Linux
Están organizadas por bloques temáticos y en PDF.
¡Y son gratuitas!
⚡Más info:
Recuerda que si estás aprendiendo o perfeccionándote en desarrollo web, por aquí puedes aprender:
🎟 HTML5
🎨CSS (nativo)
💅PostCSS
🤖Javascript
📦NPM
🧩WebComponents
🖥 Terminal de Linux
🖖VueJS
⚡Automatizadores (Vite, Rollup...)
➡
Yo:
"Aunque uses sólo HTML/CSS o uses Javascript, hay que conocer y aprender a utilizar etiquetas semánticas como <section>, <footer>, <header>, etc..."
Alguien en algún lugar del planeta tierra:
<div>
<div>
<div>
<div>
</div>
</div>
</div>
</div>
En la última versión de VSCode (1.70), hay una característica experimental que muestra un "sticky" en la parte superior que indica donde nos encontramos (clase, método, etc...).
✨Puede activarse en F1 / Settings, añadiendo:
`"editor.experimental.stickyScroll.enabled": true`
💛¡Las bases del DOM en un hilo!💛
📜Se conoce como DOM a la forma de referirnos a la estructura del documento HTML.
Mediante el DOM podemos cambiar el HTML/CSS dinámicamente desde Javascript y hacer cosas mágicas🧙♂️
¡Te explico en un par de tweets como dominarlo!
🧵⬇
¡Ojo! Esto que ves aquí es un reloj⌚Casio F-91W que dibujamos ayer en Twitch sólo con código, sin utilizar imágenes (ni SVG). ¡Sólo
#HTML
y
#CSS
! ¿Qué te parece?
(¡Estamos a 5 de llegar a los 1K! ¡Únete!)
🟣
⚡Más info:
🤖¡Convertir objetos en arrays en Javascript!
Es posible que quieras convertir una estructura de objeto en un array (para aprovechar los métodos funcionales de arrays como .map(), .filter(), etc...) o viceversa.
¡Veamos cómo hacerlo de forma simple y nativa!
🧵⬇
📃¡Recuerda que puedes descargar estos PDF de forma gratuita (donación opcional) desde mi página de documentación!
✨Etiquetas HTML/SVG
✨Propiedades CSS
✨API Javascript
✨Vue (API de Opciones)
✨Comandos de terminal
✨WebComponents
<🧵> Links en los siguientes tweets
👇👇👇
💛¿Aún no entiendes las «Arrow function» de Javascript?
Desde hace tiempo, Javascript incorpora una forma compacta y cómoda de escribir funciones en Javascript, denominada arrow function, fat arrow o "funciones flecha".
¡Te las explico (y sus curiosidades)!
🧵🔽
💙¿Qué es mejor FLEX o GRID? 💙
Estás haciendo un diseño o estructura con CSS y te entra la duda... ¿Uso Flex o uso Grid? ¿Cuál es mejor?
¡Te explico cómo saber que usar en cada caso!
🧵Abro hilo
¿Cuántas cosas de este código CSS no reconoces?
Lo que ves aquí es CSS nativo y *casi* todo está soportado en la última versión de Chrome Canary con características experimentales activadas.
Se acercan grandes cambios en el mundo de
#CSS
...
3 consejos rápidos de desarrollo web:
- No seas fanboy de frameworks/lenguajes de programación. Todos tenemos preferencias, pero no es lo importante
- Menos cursos y más proyectos/práctica. Lee documentación
- CSS no será programación, pero aprender a leerlo te abre la mente
Es habitual encontrarnos este meme sobre
#Javascript
. Es gracioso porque aparentemente da resultados ilógicos e impredecibles.
Sin embargo, tienen su lógica si entendemos que está pasando. Y como no es tan común encontrar tweets donde lo expliquen, voy a intentarlo.
Abro hilo.
Un programador estándar probando con CSS:
justify-items ...................... mmmmh, no
align-items ........................ no
align-content .................... tampoco
justify-content .................. ✅
💎¿Te gusta el desarrollo y programación web?
📜Aquí tienes unas chuletas con mucha información resumida y esquematizada de HTML, CSS, Javascript, VueJS, WebComponents o terminal de Linux, listas para descargar e imprimir:
➡
🔃RT si lo consideras útil
💫¿Qué significa SPA, MPA, SSG y SSR?
1️⃣ SPA (Single-Page App): Modelo donde se descargan los recursos HTML/CSS/JS en una primera petición, y luego se trabaja sin recargar la página: en una sola página (de ahí su nombre).
El más popular dentro del ecosistema Javascript.
🧵⬇
🧪«Tabla periódica de los elementos HTML5»
¿Existe alguna etiqueta
#HTML
que no conoces? Aquí las tienes todas, organizadas temáticamente. Pulsando en cada elemento, te llevará a una explicación del mismo.
➡
⚡Más info:
📒En
#Javascript
, los arrays tienen una serie de métodos para hacer operaciones con sus elementos:
✅.forEach()
✅.every()
✅.some()
✅.map()
✅.filter()
✅.flatMap() / .flat()
✅.find() / .findIndex()
✅.reduce() / .reduceRight()
¡Te los explico!
➡
💣¡No uses sólo etiquetas <div>!💣
Se conoce como «HTML semántico» al uso de etiquetas HTML que refuerzan y dan sentido a la información que contienen.
Por desconocimiento, es habitual que sólo se usen etiquetas <div>.
¡Hay formas de mejorarlo! Te lo explico:
🧵⬇
🧲¿CONOCES todos los import que puedes hacer en Javascript?
Quizás sólo has usado algunos, ¡pero existen varios! Te los explico:
1️⃣ Imports específicos
2️⃣ Imports por defecto
3️⃣ Imports íntegros
4️⃣ Imports globales
5️⃣ Bare imports
6️⃣ URL imports
7️⃣ Imports dinámicos
🧵⬇
🧡Validaciones de formularios SIN JAVASCRIPT🧡
En un formulario web, sin las validaciones oportunas, el usuario puede insertar información de cualquier manera... Y muchas veces, así no nos sirve.
¡Te explico como validar datos sólo con HTML!
(y algunas cosas más)
🧵🔽
¡Recuerda que por aquí tienes varias cheatsheets en PDF para descargar!
1️⃣ Etiquetas HTML
2️⃣ Propiedades CSS
3️⃣ Javascript
4️⃣ Vue (API de opciones)
5️⃣ Comandos de terminal
6️⃣ WebComponents
➡
✨¡Recuerda que HTML es más que etiquetas `<div>`!
🧪Si quieres aprender todas esas etiquetas HTML que no conoces aún, aquí tienes la Tabla periódica de los elementos HTML5. Agrupados por temática, haciendo click, obtendrás más info sobre esa etiqueta.
📘En 2023... ¡La forma de escribir CSS está CAMBIANDO! ¡Y mucho!
✨Se avecinan muchos cambios (y muy potentes)
✨Mejor soporte en navegadores
✨Escribimos menos código para hacer más cosas
✨¡Nativo! Sin preprocesadores, librerías o similar
🧵¡Te las voy explicando!👇
Sistemas de maquetación
#CSS
como Flex o Grid se aplican directamente de elementos padres a hijos. Con `display: contents` puedes ignorar un elemento intermedio (wrapper o contenedor) de modo que esa relación se aplique de "abuelo" a nieto:
🌌¡Crea tus propias etiquetas HTML!
🧲¿Alguna vez te has preguntado si sería posible crearte tus propias etiquetas HTML a las que darle funcionalidad?
Reutilizar y simplificar tu código HTML desde Javascript, sin librerías ni frameworks.
Hay una forma. Te explico como:
🧵⬇
💛¡Aprende a manipular CSS desde Javascript!💙
En algunas ocasiones necesitamos crear CSS dinámico (o controlarlo) desde Javascript y mediante el DOM.
Existen 4️⃣ formas de hacerlo, ¡te las explico! ¡Sin usar librerías! Todo de forma nativa
🧵⬇
📚ROADMAP FRONTEND 2023
🧠¿En qué debo enfocarme?
✨Ruta de aprendizaje recomendada
✨No tienes que profundizar, pero si conocer bases
✨Especialízate cuando encuentres lo que te interesa
✨Es subjetiva (es mi opinión)
La explico en siguientes tweets👇
🌱¿Conocías la etiqueta <template> de HTML?
✨Se trata de una etiqueta de HTML con la que puedes crear tus propias plantillas que luego puedes reutilizar con Javascript.
¡Te lo explico!
🧵👇
📢¡Buscamos alumnos interesados en
#FrontEnd
!
Curso intensivo GRATUITO de emprendimiento juvenil
Requisitos obligatorios:
🇪🇸 🇮🇨 Residente en España
3️⃣0️⃣ Menor de 30 años
👔💼Desempleado
🕑⌛Decidido a formarse en el sector
➡
Más info: manz
@emezeta
.com
Me gustaría descubrir más streamers que se dedican a programación o desarrollo en Twitch (frontend, backend, videojuegos, linux...)
🧵¿Encajas? Preséntate en el hilo, pon tu link y lo que sueles hacer en general.
📒¿Nunca entendiste las expresiones regulares en
#Javascript
? ¡Te las explico paso a paso!
✨¿Qué son las expresiones regulares?
✨Propiedades o flags
✨Búsqueda de textos (test)
✨Captura de textos (exec)
✨Caracteres especiales y sus significados
➡
¡Estoy super contento de anunciar que ya tenemos listo y publicado el rediseño de LenguajeJS!
Una web donde encontrarás documentación gratuita sobre múltiples temáticas relacionadas con el desarrollo web.
🧵Te cuento algunos detalles
⚡¿Estás aprendiendo frontend y necesitas una estructura sencilla y cómoda para crear pequeños proyectos Javascript? ¡Usa mkweb!
✨Usa Vite (cambios en vivo de forma ultra rápida)
✨Linters de Javascript y CSS preconfigurados
✨PostCSS con Nesting CSS
¿Quieres saber más?
🧵⬇
📙¿La etiqueta HTML más infravalorada?
La etiqueta `<datalist>` nos permite ampliar y potenciar con datos otras etiquetas de formulario.
✨Por ejemplo, podemos convertir un <input> de texto en un híbrido con <select>, abierto a nuevas opciones, con filtro de autocompletado:
🧵