Manz 🇮🇨⚡👾
@Manz
Followers
50,476
Following
1,446
Media
6,758
Statuses
30,955
@Twitch Partner | Web developer & Engineer | Content creator at | I❤️HTML/CSS/JS FullStack teacher at @eoi | «Odio quedarme a med
Santa Cruz de Tenerife
Joined June 2007
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
Silvio Santos
• 471341 Tweets
Arsenal
• 243767 Tweets
Liverpool
• 145729 Tweets
Saka
• 100066 Tweets
O SBT
• 88062 Tweets
#الهلال_النصر
• 86095 Tweets
Globo
• 73708 Tweets
#SixTONESANN
• 73335 Tweets
Descanse
• 71089 Tweets
Wolves
• 68855 Tweets
FULL TIME
• 68765 Tweets
#青島くんはいじわる
• 52918 Tweets
Diaz
• 51680 Tweets
Havertz
• 51342 Tweets
Senor Abravanel
• 51295 Tweets
PRIMPIM 1ST STEP
• 46214 Tweets
Everton
• 39088 Tweets
Maisa
• 33180 Tweets
#รักนุนิวในทุกเวอร์ชั่น
• 31526 Tweets
Greenwood
• 31308 Tweets
صلاح
• 28824 Tweets
TV Brasileira
• 28746 Tweets
#ARSWOL
• 27122 Tweets
CRAZY CONCEPT PHOTO 3
• 25287 Tweets
Raya
• 25142 Tweets
シャンティ
• 24831 Tweets
オースティン
• 19119 Tweets
Brest
• 16187 Tweets
インライ
• 13518 Tweets
Harit
• 12166 Tweets
ブライトン
• 12151 Tweets
Roberto Carlos
• 11309 Tweets
مالكوم
• 10955 Tweets
Partey
• 10495 Tweets
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.
137
3K
3K
El layout cuando quitas una propiedad CSS de un <div> que crees que no está haciendo nada...
53
396
2K
💥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á!
🧵🔽
86
582
2K
¿Quieres divertirte en la oficina?
1. Descarga la imagen
2. Ponla de fondo de pantalla (elimina iconos)
3. Desconecta cable USB del ratón
42
2K
2K
¿Quieres aprender
#frontend
y no sabes ni por donde empezar?
Ruta (2021) para aprender las bases del Front-end
#HTML
#CSS
#Javascript
🧵Abro hilo.
27
468
2K
Developah: ¿Poner una imagen en HTML? ¡Claro que sé hacerlo! ¡Eso lo sabe hacer todo el mundo!
🧵Abro hilo.
24
497
2K
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.
40
218
1K
💻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)
18
238
1K
Cuando dejas al programador backend modificar un par de líneas de CSS...
33
263
1K
💻 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.
🧵⬇
19
264
1K
Veamos... ¿Qué extensiones de VSCode necesito...?
Mi VSCode a los 10 minutos:
16
155
1K
A toda la gente nueva que llega por aquí...
Ven, ven... Aquí hablamos de frontend, CSS y Javascript
14
65
1K
📜 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:
➡
49
343
1K
Si sabes lo que es un AUTOEXEC.BAT y un CONFIG.SYS... Tengo que felicitarte por la excelente memoria para la edad que tenemos...
106
222
1K
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:
11
297
1K
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...)
➡
9
255
1K
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>
35
136
1K
¡Sigo publicando contenido frontend💪!
⚡HTML:
⚡CSS:
⚡PostCSS:
⚡Javascript:
⚡NPM:
⚡WebComponents:
⚡Vue:
24
349
1K
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`
18
150
1K
— Soy programador desde hace 10 años, CSS sólo es poner colorcitos, no será tan complicado...
El programador:
13
108
1K
💛¡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!
🧵⬇
21
234
1K
Algunos consejitos HTML/CSS/Javascript que quizás no conozcas.
🧵¡Abro hilo!
14
291
978
⬅ Izquierda: La fotografía original
➡ Derecha: Código CSS (sin usar imágenes)
🤯¿Qué te parece?
<👇> Links en el siguiente tweet
27
126
973
🤖¡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!
🧵⬇
17
207
909
📃¡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
👇👇👇
16
249
892
⬅ Izquierda: La fotografía original
➡ Derecha: Código CSS (sin usar imágenes)
🤯¿Qué te parece?
<👇> Links en el siguiente tweet
27
92
901
💛¿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)!
🧵🔽
23
192
885
💙¿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
22
206
883
Cuando te equivocas y en lugar de abrir el «Visual Studio Code», abres el «Visual Studio»:
15
145
875
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
15
125
844
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.
17
266
835
Un programador estándar probando con CSS:
justify-items ...................... mmmmh, no
align-items ........................ no
align-content .................... tampoco
justify-content .................. ✅
13
127
828
💎¿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
5
227
785
💫¿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.
🧵⬇
15
212
779
«Aprender
#Javascript
es como mirar a ambos lados de la carretera antes de cruzar, y entonces ser atropellado por un avión»
10
129
732
📒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!
➡
14
150
741
💣¡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:
🧵⬇
14
151
716
🧲¿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
🧵⬇
12
200
722
🧡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)
🧵🔽
12
174
716
¡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
➡
15
170
684
Tanto si estás aprendiendo como si ya tienes soltura, aquí tienes unas cheatsheets gratuitas en formato PDF, listas para descargar (donaciones son bien recibidas)
➡️
#html
#css
#javascript
#vuejs
#linux
#webcomponents
9
256
683
✨¡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.
6
193
682
¿Sabías que en
#CSS
vanilla puedes hacer "bucles" en los que incrementas valores sin necesidad de usar
#Javascript
?
10
121
660
Prince of Persia en tu navegador
(hecho con Phaser, Javascript)
►
#javascript
#phaser
#princeofpersia
26
143
662
🚀 Etiquetas
#HTML
Partes del documento:
<html> <head> <body>
Metadatos:
<title> <meta>
Relaciones y estilos:
<link> <base> <style>
Textos:
<p> <hr>
Listas y definiciones:
<ol> <ul> <li>
<dl> <dt> <dd>
Imágenes:
<figure> <figcaption>
Agrupaciones:
<div> <main> <span>
3
128
666
📘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!👇
15
131
658
🌌¡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:
🧵⬇
9
139
611
💛¡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
🧵⬇
10
167
613
📚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👇
11
117
608
🌱¿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!
🧵👇
7
121
614
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.
23
86
581
📒¿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
➡
11
129
576
¿Estás cansado de Google Maps?
🌎
💻Abre tu terminal:
$ npm install -g mapscii
$ mapscii
15
127
575
¡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
14
117
570
⚡¿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?
🧵⬇
10
111
562
📙¿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:
🧵
4
91
571