🇺🇦 Слава Україні! Consulta como ayudar a Ucrania y pide a tu gobierno que se movilice supportukrainenow.org.

Todos los vídeos

Integrar TypeScript, SCSS, PostCSS...

Con svelte-preprocess podemos integrar otro tipo de tecnologías a un proyecto de Svelte, para escribir nuestros componentes usando cosas que no son CSS o JavaScript, como SCSS, Less, TypeScript, CoffeeScript, Pug...

Duración: 8:03 Serie: Svelte Tema: Desarrollo web

Hasta aquí (por ahora)

Ponemos aquí punto y final a esta temporada listando las cosas que se han quedado fuera de la temporada 1 y por las que recomendaría profundizar si se quiere mirar más todavía sobre Svelte. Son cosas que tal vez si hago una segunda temporada de este curso explique.

Duración: 2:59 Serie: Svelte Tema: Desarrollo web

Exportar a Web Components

Svelte tiene la capacidad de exportar un proyecto usando WebComponents, algo que puede venir bien si lo que queremos fabricar es una biblioteca de componentes reusables, porque se pueden usar con otros frameworks. Sin embargo, es necesario entender las restricciones que tiene usar Web Components, y también comprender de qué modo se debe configurar el proyecto de Svelte para poder usar Web Components.

Duración: 9:49 Serie: Svelte Tema: Desarrollo web

Actualizar de Rollbar a Vite 3

En este vídeo os cuento los pasos que habría que dar para actualizar un proyecto de Rollbar a Vite. También se puede actualizar de Vite 2 a Vite 3, pero la lista de cambios será menor, por lo que no habrá mucho que hacer. 00:00 Introducción 01:41 Actualizar las dependencias del package.json npm i --save-dev vite @sveltejs/vite-plugin-svelte "build": "vite build", "dev": "vite dev", "preview": "vite preview" 03:45 Cambiar el rollbar.config.js por vite.config.js import { defineConfig } from "vite" import { svelte } from "@sveltejs/vite-plugin-svelte" export default defineConfig({ plugins: [svelte()], }) 05:55 Mover el archivo index.html y tocar sus styles y scripts 08:07 Importar el CSS global desde JavaScript 09:20 Despliegue en subcarpetas

Duración: 10:52 Serie: Svelte Tema: Desarrollo web

Directivas svelte:window, svelte:head, svelte:body

Los componentes svelte:window, svelte:head y svelte:body son unas directivas que nos permiten importar en un componente, de forma respectiva, la ventana, la cabeza y el cuerpo del documento HTML, con el objetivo de poder inyectar eventos sobre estos elementos, así como agregar etiquetas DOM a la cabeza de la página.

Duración: 3:43 Serie: Svelte Tema: Desarrollo web

Slots (parte 2 de 2)

Un componente de Svelte no tiene por qué tener un único slot para introducir descendencia, sino que podremos fabricar componentes donde haya varios slots, aunque en ese caso existen algunas restricciones a tener en cuenta: que cada slot tenga un nombre único, y que cada slot vaya asociado con un nodo DOM diferente. También en este vídeo, la noción de los fragmentos.

Duración: 7:01 Serie: Svelte Tema: Desarrollo web

Slots (parte 1 de 2)

Los slots son huecos que tienen los componentes y que pueden ser rellenados por los componentes descendientes. La idea es permitir crear componentes más reusables, o componentes de alto nivel, donde se pueden proporcionar a un componente ya no solo atributos, sino también todo un nodo DOM descendiente.

Duración: 5:17 Serie: Svelte Tema: Desarrollo web

Reactividad experta con el operador $

El operador $ (dolar o peso) sirve para declarar secciones que tienen que re-evaluarse cuando un componente se actualice y se repinte. Esto es necesario cuando tenemos propiedades en un componente que no se actualizan directamente, pero que son derivadas de otras propiedades que sí se van a actualizar.

Duración: 8:23 Serie: Svelte Tema: Desarrollo web

Importar hojas de estilo externas

Cuando todo vaya a ser global, será más eficiente tener una hoja de estilos externa que importemos desde JavaScript. Esta técnica también la podemos usar para importar hojas de estilo procedentes de npm, que se ponen en el bloque script, por raro que parezca.

Duración: 5:12 Serie: Svelte Tema: Desarrollo web

Estilos globales

Cómo aprovechar los estilos globales para que unos componentes puedan crear estilos que no tengan modificadores locales y así ser funcionales en toda la aplicación, un recurso que podemos usar para definir el look and feel global de la aplicación, como pueda ser tipografía y colores principales.

Duración: 5:35 Serie: Svelte Tema: Desarrollo web