Introducción A lo largo de los años me he encontrado en proyectos que tienen diferentes áreas dentro de ese mismo proyecto (web, app, panel de administración…) y se tiene que mantener el aspecto de ciertos componentes en todas las partes de la aplicación. Un ejemplo sencillo sería el típico botón con…

Spread Operator, ¿qué es? El spread operator que incorpora ECMAScript 6 en JavaScript es un operador que simplifica la recogida de valores en una estructura de datos. Su representa con tres puntos: ... La definición que nos da MDN es: “Spread syntax allows an iterable such as an array expression or string to be…

¿Cómo puedo eliminar un elemento de un array? Seguro que te has hecho esta pregunta muchas veces y la has buscado en Google. Son cosas básicas que no le damos importancia pero que siempre se nos olvida que tenemos más de una forma diferente. Aquí las tienes: Método shift El método shift()…

Aquí tienes dos formas de unir objetos fácilmente en JavaScript. Olvídate de complicarte la vida con librerías como lodash. Una tarea tan sencilla como esta se soluciona fácilmente: const animales = { hamster: '🐹', koala: '🐨', leon: '🦁', perro: '🐶' }; const insectos = { mosca: '🪰', abeja: '🐝', mosquito: '🦟', hormiga: '🐜' }; const resultado = { ...animales, ...nombres }; const resultado2 = Object.assign({}, animales, nombres);

La desestructuración es una característica muy conveniente al desarrollar con JavaScript, es una expresión que nos permite desempaquetar valores de arrays u objetos en grupos de variables, permitiéndonos simplificar y crear código más legible. Desestructuración de objetos La sintaxis básica sería: let { variable1, variable2 } = { variable1: ..., variable2: ... } …

{#if …} El HTML como tal no tiene una forma de expresar lógica, como podría ser los condicionales y bucles. Svelte lo hace. Para renderizar condicionalmente algún marcado, lo envolvemos en un bloque if: <script> let user = { loggedIn: false }; function toggle() { user.loggedIn = !user.loggedIn; } </script> {#if user.loggedIn}…

Introduction In this article we will see how to create an image gallery in Svelte (carousel gallery) in a very simple way, creating your own component and without the need for external plugins or libraries. Let’s go! 💃🏻 Create a new Svelte project To create a project in Svelte, let’s remember, with the following command: npx…

Introducción En este artículo veremos como crear una galería de imágenes en Svelte (carousel gallery) de una forma muy sencilla, creando tu propio componente y sin necesidad de plugins o librerías externas. ¡Así que vamos a empezar! 💃🏻 Crear un nuevo proyecto Svelte Para crear un proyecto en Svelte, recordemos, con el siguiente comando: npx degit…

Índice de contenidos Introducción ¿Qué es Netlify? ¿Qué son los plugins de Netlify? Mis plugins favoritos Image Optim Inline critical CSS Minify HTML Submit sitemap Checklinks ¿Dónde puedo cómo de optimizada está mi web? PageSpeed Insights Web.dev Conclusiones Introducción ¿Qué es Netlify? Netlify es una plataforma que nace para automatizar proyectos webs estáticos. Aúna…