Artículos
108 guías y tutoriales sobre desarrollo web, JavaScript, CSS, React, Node y más.
Explorar por temática2023
Midudev Tools
Herramientas que utilizo en mi día a día
Top 5 preguntas de JavaScript en Stack Overflow
Solucionamos las 5 preguntas más populares de JavaScript en Stack Overflow
toReversed, toSpliced, toSorted y with. Nuevos métodos de Array en JavaScript explicados.
Aprende a utilizar estos nuevos métodos de Array en JavaScript que te permiten obtener un nuevo array sin modificar el original.
Cómo leer, copiar y pegar del portapapeles en JavaScript
En este artículo aprenderás a usar el portapapeles en JavaScript con ejemplos de código
Desactivar reglas de eslint
Aprende a desactivar reglas de eslint en tu código a diferentes niveles
Curso de Rust para desarrolladores JavaScript
Aprende Rust usando todos tus conocimientos que ya tienes de JavaScript
Cómo inicializar Array con valores en JavaScript
Aprende a inicializar un Array con valores en JavaScript
2022
Cómo escribir un fichero en Deno
Aprende a escribir el contenido de un fichero en Deno usando
Cómo leer el contenido de un directorio en Deno
Aprende a leer el contenido de un directorio en Deno usando la función Deno.readDir
Cómo leer el contenido de un archivo en Deno
Aprende a leer el contenido de un archivo en Deno usando la función Deno.readTextFile y Deno.readFile
Symbols en JavaScript. ¿Qué son y para qué sirven?
Los Symbols en JavaScript son un tipo de dato primitivo pero poca gente sabe su utilidad. ¡Te la explico en este artículo!
¿Por qué forEach es más rápido que for en JavaScript?
Explicamos qué razón hace que forEach de JavaScript sea más rápido que el clásico for en algunas situaciones
Cómo resolver todas las promesas en JavaScript
Cómo utilizar el método Promise.all() de JavaScript para esperar a que se resuelvan varias promesas de manera simultánea y obtener todos sus resultados.
Cómo convertir una función de callback en JavaScript a una función async/await
En este artículo, te muestro cómo convertir una función de devolución de llamada en JavaScript a una función que utiliza la palabra clave async/await. Con esta técnica, puedes hacer que tu código sea más legible y fácil de mantener.
Cómo añadir un cero a la izquierda de un número en JavaScript
Cómo usar el método padStart para añadir ceros a la izquierda de un número en JavaScript
AdventJS 2022, ¡ya está aquí! Ahora con soporte para TypeScript
AdventJS es una plataforma de retos de programación que abre el mes de Diciembre. Cada día, un nuevo reto de código.
¿Es React una biblioteca o un framework?
Aprende la diferencia entre una biblioteca y un framework y cómo afecta a React
Malas prácticas en JavaScript
Se habla mucho de las buenas prácticas en programación pero... ¿qué pasa con lo que debes evitar?
Resumen del libro "14 Hábitos de Desarrolladores Altamente Productivos"
Te cuento los 14
No todo es un objeto en JavaScript
Existe la errónea creencia que en JavaScript todo es un objeto o hereda de Object. Te explico por qué.
Qué significa ser Senior en Programación
Aprende a solucionar este típico error de JavaScript al intentar acceder a propiedades y atributos de un objeto
Type casting en TypeScript
Typecasting es una técnica que te permite la conversión de un tipo a otro
Cómo revisar que un valor es una Promesa en JavaScript
No hay un método que directamente nos diga que un valor es una Promesa pero podemos conseguirlo con unas pocas líneas de código
Cómo solucionar el error ReferenceError: window is not defined
¿Estás programando con JavaScript en el servidor y estás encontrando este error? ¡Es normal! Te cuento cómo solucionarlo
Cómo mejorar en programación
Consejos y tips para mejorar en programación. ¿Cómo seguir mejorando? ¿Qué técnicas puedes hacer para subir de nivel?
Cómo clonar un Array en JavaScript de forma correcta y sin problemas
Hacer una copia de un Array en JavaScript puede parecer algo sencillo pero lo cierto es que este tipo de datos esconde algunas trampas que hay que controlar.
Estrategia de Git: Ship / Show / Ask
Estrategia para trabajar con Git y equipos a la hora de llevar código a producción y fusionar cambios.
5 consejos para desarrolladores Junior
Te comparto 5 consejos para desarrolladores que están comenzando en el mundo de la programación
Carga scripts externos de forma asíncrona en código JavaScript
Importa de forma dinámica archivos externos desde código JavaScript de forma fácil y rápida.
Hablar es barato. ¡Enséñame el código!, reflexión sobre las palabras de Linus Torvalds
Pequeña reflexión sobre las palabras de Linus Torvalds y qué podemos aprender de ellas en programación.
2021
Retos de programación en diciembre: Advientos de Código
Calendarios de Adviento para desarrolladores. Mejora tu lógica de programación.
Métricas de Web Performance
Todas las métricas de Web Performance que debes conocer, sus valores recomendados y cómo se miden
Qué hay de nuevo en DevTools (Chrome 93)
Consultas de contenedores CSS editables, previsualización de paquetes web, mejor manejo de cadenas de texto en la Consola y más.
ES2021 / ES12: novedades de la última versión de JavaScript
Descubre todas las novedades del lenguaje JavaScript para ser más productivo y sacarle todo el partido.
ES2022 / ES13: novedades de la última versión de JavaScript
Descubre todas las novedades del lenguaje JavaScript con la especificación EcmaScript 2022, para sacarle el máximo partido al lenguaje.
Las mejores formas de centrar elementos en CSS
Descubre cómo centrar elementos en CSS tanto horizontalmente como verticalmente con propiedades que funcionan en todos los navegadores modernos.
Descarga el logo de HTML5, CSS3 y JavaScript en formato vectorial SVG
Logos oficiales y optimizados en formato SVG de los lenguajes HTML, CSS y JavaScript
Eliminar primer carácter de una cadena de texto en JavaScript
Instrucciones para eliminar el primer carácter de un string en JavaScript de diferentes maneras
Música para programar y concentrarse ✌
Encuentra tu lista de reproducción para concentrarte y mejorar tu productividad mientras estás estudiando, programando o trabajando
Lazy Loading de imágenes en HTML sin escribir JavaScript ⚡
Aprende a utilizar el Lazy Load de imágenes nativo de HTML, para mejorar el rendimiento de tu sitio web muy fácilmente.
¿Cómo funciona realmente la igualdad ==?
En JavaScript puedes usar == o === para hacer comparaciones. Deberías usar siempre el estricto pero te explico como funciona el ==.
¿Qué hay de nuevo en las DevTools de Chrome 92? Notas de la versión
Editor de Grid en CSS, soporte para redeclaraciones de const en la Consola, ver el orden de los elementos y mucho más
Buenas prácticas para escribir commits en Git
Aprende a escribir buenos mensajes de commit en Git con esta lista de buenas prácticas
Cómo usar git bisect para encontrar el commit culpable de un error
Gracias a git bisect, puedes comenzar una búsqueda entre un historial de commits para determinar cuál de ellos es el que introduce el error.
Cómo arreglar el error que dice que __dirname no está definido en archivo ES Module de Node.js
Al migrar tus archivos de Node.js de Common.js a ESModules puedes encontrar que la variable __dirname no está definida. ¡Aprende a arreglarlo!
Algolia + Firebase. ¡La extensión perfecta para hacer búsquedas en Firestore!
Aprende a integrar la base de datos Firestore de Google Firebase con la búsqueda de Algolia de forma fácil y rápida
¿Qué significa el error “Uncaught TypeError: Cannot set/read property 'XXX' of undefined/null” y cómo solucionarlo?
Aprende a solucionar este típico error de JavaScript al intentar acceder a propiedades y atributos de un objeto
Cómo usar async/await con el método .map de los Arrays
Descubre cómo puedes usar el método map a la hora de iterar Arrays y funciones asíncronas fácilmente
Cómo cargar archivos JSON con ESModules en Node.js
Con la llegada de los ECMAScript Modules a Node.js parece que se ha perdido la posibilidad de cargar archivos JSON... pero no. ¡Te cuento cómo puedes hacerlo!
Cómo añadir un buscador en tu blog JamStack con Algolia
Te voy a explicar paso a paso cómo he añadido en mi blog hecho con JamStack un buscador gracias a Algolia
Cómo usar rutas absolutas en los imports en Next.js
Evita usar rutas relativas a la hora de importar archivos en tus componentes de React en Next.js y usa rutas más fáciles de leer
Cómo crear un spinner loader con CSS 🌀
Aprende a crear un donut spinner 🍩 sólo usando CSS y en menos de un minuto. Perfecto para frontenders impacientes ⏲️.
Cómo arreglar el error "Warning: React has detected a change in the order of Hooks"
Entiende qué significa y cómo arreglar este típico error de React
Cómo arreglar el error 'gyp: No Xcode or CLT version detected' de macOS al hacer npm install
¿Estás intentando hacer un npm install y te aparece este error en la terminal? Seguramente
No sirvo para programar. ¿Programar no es para todos? ¿Vales para programador?
Te cuento mi historia sobre cómo empecé en la programación y mi experiencia al comenzar en esta carrera tras mi desastroso inicio en la universidad.
Curso de Svelte Gratis y Desde Cero 📚
Aprende Svelte desde cero, el framework más nuevo del mundo del frontend que ofrece una nueva formación de crear interfaces de usuario
Bootcamp Full Stack Gratis: Aprende Desarrollo Full Stack ⚡
¿Por qué he dejado de usar Google Analytics y tú también deberías? Además, te doy algunas alternativas que puedes utilizar en su lugar
Cómo detectar ad blockers con JavaScript
Usando un poco de JavaScript podemos detectar si el usuario de nuestro sitio está usando un AdBlocker y hacer algo al respecto.
Adiós Google Analytics. Alternativas para tener estadísticas en tu web
¿Por qué he dejado de usar Google Analytics y tú también deberías? Además, te doy algunas alternativas que puedes utilizar en su lugar
TOP 7 Libros 📚 para Aprender y Dominar JAVASCRIPT (Gratis)
Lista de libros con versiones gratuitas para aprender y dominar el lenguaje de programación Javascript
2020
Crea un calendario 📆 con tres líneas de CSS
Aprende a maquetar un calendario en HTML con unas pocas líneas de CSS gracias a la potencia de display:grid
box-sizing: border-box: ¿Qué es y para qué sirve?
Con el cambio de prestaciones de Travis para repositorios de código abierto en GitHub, el paso más lógico parece migrar a GitHub Actions. En este artículo te cuento cómo hacerlo paso a paso con proyectos de Node.js.
Las alternativas de Webpack, empaquetadores de aplicaciones web para 2021 📦
¿Existen alternativas a Webpack y Rollup? ¡Sí! Y algunas MUY interesantes. Conoce los mejores empaquetadores de apps web del momento.
Cómo arreglar el mensaje 'xcrun: error: invalid active developer path, missing xcrun' de macOS
¿Has actualizado a la última versión de macOS y te ha aparecido este error? Se puede solucionar instalando de nuevo las Command Line Developer Tools.
Resolviendo promesas en Svelte con {#await}
Aprende a usar las plantillas de Svelte para resolver tus promesas y mejorar tus componentes
Cómo servir un index.html y estáticos Javascript y CSS con Node.js
Aprender a servir un archivo index.html, cualquier página HTML o estáticos usando Node.js y sin ninguna dependencia
25 curiosidades y anécdotas sobre JavaScript por su 25 aniversario | Parte I
El pasado 4 de diciembre se cumplían 25 años del nacimiento de JavaScript pero... ¿era realmente su aniversario? ¿Es verdad que fue creado en 10 días? ¿Por qué se creó? Viendo el nombre... ¿tiene algo que ver con Java?
Cómo deshacer el último commit con git
A veces hacemos commit en git e inmediatamente nos damos cuenta que nos hemos equivocado.
Cómo crear un TimeAgo sin dependencias usando Intl.RelativeTimeFormat
Muchas veces utilizamos dependencias como Moment.js para crear la funcionalidad de Timeago en diferentes idiomas. ¿Es necesario? Aprende una forma de hacerlo totalmente nativo y sin dependencias.
Cómo instalar Node en Mac, Linux y Windows
Instala paso a paso Node en Linux y Mac usando nvm y en Windows usando nvm-windows
Curso gratis de NextJS, el framework de React
Aprende qué es NextJS, el framework de React por excelencia, creando un clon de Twitter desde cero
Las 5 mejores tipografías para programar
Elegir la mejor tipografía para tu código tiene una gran importancia para ser más productivo y trabajar de una forma más cómoda.
Fondos de pantalla de programación y desarrollo web
Fondos de pantalla de programación web: Javascript, React, CSS, HTML y más.
Cómo crear tu perfil de GitHub con README
Te explico paso a paso cómo puedes utilizar la nueva feature de GitHub para personalizar tu perfil utilizando un README.md
La mejor música para programar - {code-fi} 👨💻 🎧
Música relajante para programar y concentrarse. Beats relajantes, chill con hip hop alternativo y lofi 🎵.
Curso gratis de ReactJS 2020 con clases en vivo
Aprende qué es React, crea una aplicación desde cero, crea tus propios hooks y añade infinite scroll y testing con estas clases en vivo gratis.
Entrevista con Guillermo Rauch, CEO de Vercel ▲ (ZEIT)
Charla completa con Guillermo Rauch sobre el presente y futuro de la plataforma Vercel, las novedades de NextJS, curiosidades de React y lo que esperamos del frontend.
Cómo eliminar un fichero con Node.js
Aprende a utilizar Node para eliminar un fichero o lista de ficheros gracias a fs.unlink y fs.unlinkSync.
Cómo renderizar una lista de elementos con Svelte
Aprender a iterar una lista, como un array, y renderizar cada elemento en la interfaz del usuario utilizando el framework Svelte.
¿Cómo eliminar el código de las PropTypes antes de subir a producción?
Las PropTypes nos ayudan a detectar problemas de tipos al usar props en nuestros componentes de React pero... son inútiles en producción. Aprende a eliminar su código.
Renderizado condicional con Svelte
Aprende a realizar un renderizado condicional, esto es, mostrar diferentes elementos o componentes de Svelte dependiendo de una condición
Declaraciones reactivas y fetching de datos con Svelte
Domina completamente la reactividad en Svelte para ir más allá de las asignaciones y crear declaraciones y sentencias totalmente reactivas para poder hacer fetching de datos.
Cómo crear componentes y gestionar el estado en Svelte
Aprende a crear componentes en Svelte para reutilizar trozos de tu interfaz y a gestionar el estado de los mismos para tener reactividad.
Qué es Brotli y cómo activarlo en Express y Cloudfront usando Lambda@Edge
¿Quieres mejorar fácilmente el Time to First Byte de tu sitio? Brotli te permite mejorar el rendimiento de tu web sin hacer cambios en tu código. Aprende a usarlo en servidores Express o en Cloudfront con Amazon S3 y gana un tiempo precioso para tu usuario.
Mi configuración de editor, terminal, apps que uso y gadgets
Comparto contigo el editor que uso para programar, mi tema, mi fuente favorita, la terminal que me sirve además de todas las apps de mi sistema operativo y todos los cachivaches que me ayudan en mi día a día.
2019
React Rendering Strategies resources
Find all the links and resources from the React Rendering strategies talk by Miguel Ángel Durán on Frontend Con 2019 Warsaw
Frontend del Futuro - JSDay Canarias 2019
Todos los enlaces y recursos de la charla el Frontend del futuro de Miguel Ángel Durán en la JSDay Canarias 2019
Dev Fest Alicante - React Rendering Strategies enlaces
Todos los enlaces y recursos de la charla de React y sus estrategias de renderizado en React
React Rendering Strategies resources
Find all the links and resources from the React Rendering strategies talk by Miguel Ángel Durán
Los ocho métodos de console que debes conocer
La consola nos ofrece muchos métodos más además de console.log. Conoce los que quedan, que te ayudarán a mostrar mejores mensajes en la consola. warn, error, info, table, time, timeEnd, count y assert.
Crea un nuevo proyecto con Svelte 3
Aprende a crear desde cero y paso a paso tu proyecto con el framework Svelte.js con este pequeño tutorial en español. Para tener todas las dependencias y un entorno de desarrollo listo para empezar a trabajar.
Introducción a Svelte, un nuevo framework para tu frontend
Svelte es un nuevo framework que tiene como objetivo simplificar al máximo la creación de aplicaciones web reactivas escribiendo el mínimo número de líneas posible.
Borra todos los directorios node_modules de tu disco y libera espacio
Cómo borrar el contenido de las carpetas node_modules con las dependencias de tus proyectos para liberar espacio en tu disco
CURSO EXPRESS gratis de GraphQL, React Apollo y Apollo Server
Aprender gratis sobre GraphQL. Una introducción en español sobre como conectarlo con React usando Apollo Client y crear tu propio servidor con Apollo Server.
URLSearchParams, cómo leer los valores de la querystring sin usar Regex
Para leer los parámetros de una URL, hasta hace muy poco, teníamos que usar siempre expresiones regulares. Usando URLSearchParams esto deja de ser necesario y nos proporciona una forma sencilla de manipular esos datos.
Cómo extraer el Critical Path CSS con Puppeteer, Code Coverage y en sólo 20 líneas de código
Gracias a la potencia de Puppeeteer y usando el Code Coverage de las Chrome Developer Tools, podemos extraer muy fácilmente el CSS crítico de nuestro site
React Hooks, useEffect. Añadiendo funcionalidad en el ciclo de vida de nuestro componente - III
Usando useEffect podremos añadir funcionalidad a nuestro componente cuando se renderiza por primera vez, se actualiza cuando nueva información llega y cuando se desmonta del árbol de elementos
React hooks, cómo utilizar el hook useState
Los componentes en React pueden tener un estado interno que determina cómo se debe renderizar. Con los hooks podremos crear componentes dinámicos e interactivos muy fácilmente.
React Hooks, saca todo el potencial de React sin escribir clases
Con la nueva característica de React, llamada Hooks, podremos utilizar los componentes funcionales para sacar todo el potencial a la librería. Algo que, hasta hace poco, sólo era posible con las clases.
Lista de deseos para el futuro de Javascript
En los últimos años hemos visto una evolución brutal de Javascript como lenguaje de programación, añadiendo nuevas caracterísitcas, métodos y funcionalidades. Pero los desarrolladores de este lenguaje queremos más. Aquí una lista de mis deseos.
Personaliza el prompt de la terminal de macOS
Por defecto, la terminal de sistemas como UNIX y macOS traen bash pero su aspecto no es el más bonito. Y las apariencias importan. ¡Vamos a arreglarlo!
CSS Scroll Snap, la solución definitiva a la creación de sliders en la web - Parte II
Crea tu propio slider paso a paso, sencillo pero totalmente funcional, utilizando CSS gracias a la propiedad Scroll Snap.
prefers-color-scheme: La nueva media feature de CSS para detectar el tema del usuario
Muy pronto vamos a poder usar una nueva media query llamada prefers-color-scheme que nos permitirá cambiar los colores de nuestro sitio dependiendo si el usuario ha elegido un aspecto claro u oscuro para su OS
2018
immutable, el nuevo tipo para declarar variables en Javascript
Usando immutable podremos crear estructuras de datos en Javascript que no son reasignables y tampoco modificables.
CSS Scroll Snap, la solución definitiva a la creación de sliders en la web - Parte I
Introducción a CSS Scroll Snap. La solución definitiva a la batalla infinita entre los desarrolladores web y la creación de sliders. Por fin.
Single Line Responsibility, one line does one thing
Experience and knowledge could help you writing readable, mantainable and clean code but, following the Single Line Responsibility principle will help you to be sure you're doing it.
La mejor forma de cargar Google Analytics en tu web para performance
Muchas veces vamos a querer cargar Google Analytics en nuestra página web pero nos gustaría evitar el coste en performance que tiene. Te voy a explicar la mejor estrategia para cargar esta librería afectando lo mínimo posible la performance.
Por qué creo que Microsoft use Chromium es una buena noticia... para todos
Al parecer, Microsoft va a dejar de mantener el motor actual de Edge para empezar a utilizar Chromium, el motor de código abierto de Chrome. Todo el mundo está dando su opinión y, oye, yo no iba a ser menos. Eso sí, yo creo que igual es una buena noticia para todos. También para ti.