DEV Community: Alex Tomás

Cómo personalizar tu perfil GitHub con un archivo README

Alex Tomás — Thu, 18 Feb 2021 09:43:14 +0000

GitHub lanzó recientemente una función que permite a los usuarios crear un archivo README a nivel de perfil para mostrarlo de manera destacada en tu perfil de GitHub sustituyendo a la pantalla tradicional con tus repositorios.

En este artículo te explicaré cómo acceder a esta nueva función. También compartiré algunos perfiles curiosos de GitHub que he visto en otros usuarios que te podrán dar ideas para generar tu propio perfil personalizado 😜.

Pasos para crear tu perfil personalizado en GitHub

¿Has probado alguna vez a crear un repositorio en GitHub con tu mismo nombre de usuario? Por ejemplo, mi usuario en GitHub es alextomas80, entonces, para mostrarte ésta nueva funcionalidad voy a crearme un nuevo repositorio que se llame así: alextomas80.

Crear nuevo repositorio

Primero debemos acceder a la url para crear nuevo repositorio, desde aquí.

Luego rellenamos el campo Repository name, quedando así:

¡Eh! ¡Espera! ¿Qué es eso? Te habrás dado cuenta del aviso que te ha aparecido, ¿no?

You found a secret! alextomas80/alextomas80 is a ✨special ✨ repository that you can use to add a README.md to your GitHub profile. Make sure it’s public and initialize it with a README to get started.

¡Premio! GitHub ya te informa de esa nueva funcionalidad especial que te comentaba. Ahora sólo tenemos que editar nuestro README.md.

Ver nuestro perfil personalizado con README.md

Si has dejado activada la opción Add a README file ya tendrás tu propio fichero, que únicamente tendremos que editar. En el caso de que no lo hayas activado, tendrás que crear el fichero. Fácil.

Una vez creado el nuevo repo especial te redireccionará a su url, en mi caso me lleva a https://github.com/alextomas80/alextomas80

Aquí vemos varias cosas:

Nuestro README.md de ejemplo auto generado al crear el repo.
Un aviso indicándonos, una vez más, que es un repo especial (alextomas80/alextomas80 is a special repository. Its README.md will appear on your public profile! Send feedback) dónde nos invita a editar nuestro README o bien mirar como ha quedado nuestro perfil.

Antes de crear el repositorio especial mi perfil se veía de la siguiente manera:

Una vez creado el repo especial se ve de la siguiente manera:

Como verás, el contenido del fichero README.md del repo especial lo inserta automáticamente arriba del todo, en mi caso, de momento no es gran cosa ya que hemos usado el README.md por defecto que nos ha generado Github, pero bueno, ¡es un comienzo! 😀

Modificar README.md para darle forma a nuestro perfil

Vale, vamos a darle un poco de vida a nuestro repositorio y le pondremos un poco de información. Accede a tu repo especial y editamos el README.md. Recuerda que es un fichero .md por lo tanto todo lo que soporte la sintaxis Markdown podrás insertar en él.

Así se ve nuestro README.md por defecto.

Y ahora lo vamos a editar un poco a nuestro gusto. El mío de momento lo voy a dejar de la siguiente forma:

Guardamos el README.md creando un commit desde la propia web de Github:

Recuerda que te puedes clonar el repo en tu equipo y trabajar de forma local como seguramente habrás hecho muchas veces. En mi caso, para el ejemplo, lo he hecho todo desde la web.

Y podemos ver por fin el resultado:

Ejemplos de otros usuarios con perfiles personalizados

Miguel Ángel Durán

https://github.com/midudev

Software Engineer Full Stack

Monica Powell

https://github.com/M0nica

Building tech to elevate people. Founder of React Ladies a community for React JS developers.

Kautuk Kundan

https://github.com/kautukkundan

I build interesting things || Data Engineer • Indie Developer

Tanner Linsley

https://github.com/tannerlinsley

Co-Founder, Open source fanatic, React Junkie, Javascripter

Conclusión

¿Ya tienes tu perfil personalizado en Github? ¿No? ¿A qué esperas? Si eres creativo/a verás como no dejas indiferente a nadie. 😉

Si te gusta mi contenido, puedes "invitarme" a un café ☕️ para apoyarme. 👇🏻

Y esto es todo. Espero que te pueda servir 😉

Crear un componente en Svelte y publicarlo en NPM

Alex Tomás — Mon, 15 Feb 2021 17:08:01 +0000

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 el color corporativo. Resulta que ese botón lo quieres utilizar en diferentes proyectos de ese mismo cliente, y el botón va a ser siempre IGUAL. ¿Qué hacemos?

Pues aquí tenemos tres opciones, a mi modo de ver:

Crear el botón las X veces que nos haga falta para los diferentes proyectos. *Esto está "bien" pero... ¿y si se cambia, por ejemplo, el borde del botón (border-radius)? Lo tendrías que cambiar en todos los botones que te hayas creado en los diferentes proyectos. Ñeeee, bueno 💩 *
Si tu proyecto va a usar siempre la misma tecnología, por ejemplo Svelte, podrías crearte un componente, publicarlo en un package de NPM y re-utilizarlo allá donde te haga falta. Es lo que veremos en este artículo 🚀
Pero... ¿si ese mismo proyecto lo vas a usar con diferentes frameworks? por ejemplo, lo quieres usar en React, Svelte y otro en Vue. ¿Qué hacemos?. La respuesta es webcomponents. Te dejo aquí un artículo que escribí hace unos días para crear webcomponents con StencilJS.

Entonces, ahora vamos a ir a la segunda opción y haremos lo siguiente:

Nos crearemos un componente botón con Svelte.
Lo probaremos localmente.
Lo publicaremos en un package de NPM.
Lo probaremos de nuevo instalando la dependencia.

¿Qué vamos a necesitar?

Tener cuenta en NPM.
Tener Node y NPM instalados en tu equipo.
Ganas de experimentar 🙃

¿Qué componente haremos?

Posiblemente tengas cientos de paquetes en NPM de botones. La idea no es reinventar la rueda, sino conocer el flujo de la creación de un componente y la publicación del paquete. Más adelante te animo que intentes crearte un componente que te solucione A TÍ algún problema concreto. Eso te ayudará a aprender y entender todos los conceptos.

Para nuestro ejemplo crearé un componente que se llamará <At-Button />.

Iniciamos el proyecto

Bien, lo primero que necesitaremos es una carpeta vacía para iniciar nuestro ¡pequeño gran proyecto!. Desde la consola, por ejemplo, creamos una carpeta y accedemos a la misma, en mi ejemplo la llamaré svelte-custom-button:

mkdir svelte-custom-button
cd svelte-custom-button

Ahora iniciamos nuestro package.json. No es necesario que lo escribas a mano, con el siguiente comando lo hará casi todo por tí:

npm init -y

Esto va a crear un archivo package.json y nos rellenará la información sobre el paquete, como el nombre, autor, descripción, las dependencias que utiliza, la versión etc...

Tendrás la siguiente respuesta:

$ npm init -y
Wrote to /RUTA_DE_TU_PROYECTO/svelte-custom-button/package.json:
{
  "name": "svelte-custom-button",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "alextomas80 <XXXXXXXXXXX@gmail.com>",
  "license": "MIT"

En mi caso author ya está completo porque estoy logeado en npm con mi usuario alextomas80.

Puedes rellenar o modificar los campos como el name, description, keywords, author y license conforme consideres.

Nota: En el name he añadido mi usuario de npm, en mi caso @alextomas80, añade el tuyo ahí.

El siguiente paso será la instalación de dependencias que usará nuestro paquete.

npm install -D rollup rollup-plugin-node-resolve rollup-plugin-svelte svelte

Nuestro package.json debe de estar de la siguiente forma (yo he cambiado la descripción y keywords):

{
  "name": "@alextomas80/svelte-custom-button",
  "version": "1.0.0",
  "description": "Ejemplo básico de creación de componente Svelte y paquete en NPM",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "svelte",
    "ejemplo"
  ],
  "author": "alextomas80 <XXXXXXXXXXX@gmail.com>",
  "license": "MIT",
  "devDependencies": {
    "rollup": "^2.39.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-svelte": "^7.1.0",
    "svelte": "^3.32.3"
  }
}

Creación del componente

Vamos a necesitar una carpeta que se llamará src en la raíz del directorio, y dentro un archivo index.js. En ella contendremos el punto de inicio de nuestro proyecto y el componente de ejemplo.

Nuestro src/index.js quedará de la siguiente forma:

// src/index.js
import AtButton from './AtButton.svelte';
export default AtButton;

Y como te habrás imaginado, ahora debemos de crear nuestro componente AtButton.svelte, quedando de momento algo así:

<!-- src/AtButton.svelte -->
<div>Botón de ejemplo</div>

Esto es un fichero de Svelte como seguramente conoces. Puedes importar librerías u otros elementos sin problemas. Así como poner estilos y demás (ahora luego lo veremos).

package.json

Tenemos que hacer unos pequeños cambios al package.json:

    // ...
    "main": "dist/index.js",
    "module": "dist/index.mjs",
    "svelte": "src/index.js",
    "scripts": {
        "build": "rollup -c",
        "dev": "rollup -c -w"
    },
    // ...

En main vamos a establecer el output después de correr el script build
En module vamos a definir lo mismo pero como salida un archivo .mjs, para que Node distinga entre módulos creados con CommonJS y ES6.
En svelte, vamos a definir la ruta de nuestro archivo index.js creado anteriormente.
Y por último definimos los scripts como para crear el build o correr en desarrollo.

Nota: la carpeta dist que hasbrás visto que apunta en main y module se generará automáticamente.

El package.json debería quedar así:

{
  "name": "@alextomas80/svelte-custom-button",
  "version": "1.0.0",
  "description": "Ejemplo básico de creación de componente Svelte y paquete en NPM",
  "main": "dist/index.js",
  "module": "dist/index.mjs",
  "svelte": "src/index.js",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w"
  },
  "keywords": [
    "svelte",
    "ejemplo"
  ],
  "author": "alextomas80 <XXXXXXXXXXX@gmail.com>",
  "license": "MIT",
  "devDependencies": {
    "rollup": "^2.39.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-svelte": "^7.1.0",
    "svelte": "^3.32.3"
  }
}

Creamos el fichero rollup.config.js

Si has trabajado con Svelte en alguna otra ocasión, conocerás este archivo:

import svelte from "rollup-plugin-svelte";
import resolve from "rollup-plugin-node-resolve";

const pkg = require("./package.json");

export default {
    input: "src/AtButton.svelte",
    output: [
        { file: pkg.module, format: "es" },
        { file: pkg.main, format: "umd", name: "Name" },
    ],
    plugins: [svelte(), resolve()],
};

¿Cómo puedo probar mi componente localmente?

Antes de publicar el componente en el paquete de NPM, lo suyo sería probarlo para ver como queda y si estamos satisfechos con el resultado. Entonces, vamos a probarlo en un proyecto nuevo de Svelte. Para ello, nos crearemos un nuevo componente de Svelte, yo en mi caso me voy a crear un proyecto llamado svelte-playground ejecutando el siguiente comando:

npx degit sveltejs/template svelte-playground

Luego accedemos al proyecto e instalamos las dependencias:

cd svelte-playground
npm install

Bien. Ya tenemos lo siguiente:

Un proyecto (svelte-custom-button) con nuestro componente, listo para ser probado.
Un proyecto Svelte (svelte-playground) para probar el componente que enviaremos a NPM.

Primero, accedemos al proyecto del componente svelte-custom-button y ejecutamos:

npm link

Y recibirás una respuesta similar a:

npm WARN svelte-custom-button@1.0.0 No repository field.

audited 17 packages in 0.711s

3 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
/usr/local/lib/node_modules/svelte-custom-button -> /RUTA_DE_TU_PROYECTO/svelte-custom-button

Y luego, en el proyecto svelte-playground ejecutaremos npm link /la-ruta/de/tu-paquete, en mi caso:

npm link /RUTA_DE_TU_PROYECTO/svelte-custom-button

Con esto podremos probar localmente nuestro paquete. ¡Perfecto! ¡Y en tiempo real!

Usar componente localmente

Accede a tu proyecto svelte-playground y corre el proyecto con el comando npm run dev, con lo que verás la pantalla generada por Svelte en http://localhost:5000/:

Y ahora editaremos nuestro fichero src/App.svelte dejándolo así:

<script>
    export let name;
    // Importamos nuestro componente Botón
    import AtButton from "@alextomas80/svelte-custom-button";
</script>

<main>
    <h1>Hello {name}!</h1>
    <p>
        Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn
        how to build Svelte apps.
    </p>

    <!-- Usamos el componente -->
    <AtButton />
</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4em;
        font-weight: 100;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

¡Y entonces tendremos nuestro botón! Quedando así:

Bueno, no es un gran componente, pero por lo menos ya lo vemos.

Editar componente localmente a tiempo real

Vamos a darle estilo a nuestro botón. Volvemos al proyecto svelte-custom-button y dejaremos nuestro componente de la siguiente manera:

<script>
    // Le enviaremos al botón la propiedad `title`, en caso de no recibirla le ponemos valor por defecto
    export let title = "Botón";
</script>

<div class="boton">{title}</div>

<style>
    /* Aplicamos unos pocos estilos al botón */
    .boton {
        background-color: coral;
        border-radius: 3px;
        cursor: pointer;
        display: inline-block;
        padding: 10px 20px;
        transition: 0.3s ease;
    }
    .boton:hover {
        background-color: darkorange;
    }
</style>

Si accedes de nuevo a http://localhost:5000/ deberías ver los cambios reflejados automáticamente. El botón debería quedarte así:

Y si ahora le pasamos la propiedad title a nuestro <AtButton /> podemos personalizar el título del mismo:

<AtButton title="Enviar formulario" />

Quedando:

Publicar el paquete en NPM

¡Perfecto! Ya tenemos nuestro componente, nos gusta y ahora lo queremos publicar en un paquete en NPM para usarlo en futuros proyectos. Bien, es muy fácil.

Deberás estar logeado en npm. Si no lo sabes si lo estás ejecuta: npm whoami (en mi caso me responde alextomas80, que es mi usuario de npm). Doy por hecho que tienes cuenta en NPM! 😂

Si no estás logeado: npm login

Es recomendable haber creado en el directorio raíz el archivo README.md con la información de nuestro paquete. Así otros usuarios podrán conocer la información de uso, propiedades, configuraciones etc etc...

npm publish --access public

Y si todo va bien deberías obtener lo siguiente:

Ahora si tu perfil de npm (https://www.npmjs.com/settings/alextomas80/packages) verás que te aparecerá tu paquete. En el caso de que no lo haga, a veces tarda unos minutos en aparecer, puedes buscarlo directamente en el buscador, en mi caso buscaría @alextomas80/svelte-custom-button que será el nombre del paquete.

¿Cómo puedo probar mi componente desde NPM?

¡Muy fácil! Esto lo habrás hecho cientos de veces, bueno, igual alguna menos 😌 Accede a la información del paquete, en nuestro ejemplo: https://www.npmjs.com/package/@alextomas80/svelte-custom-button

Ahí nos indica como hacer la instalación a través de NPM:

npm i @alextomas80/svelte-custom-button

Y el uso es igual que el de antes:

<script>
    import AtButton from "@alextomas80/svelte-custom-button";
</script>

<main>
    <AtButton title="Acceder al panel" />
</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }
</style>

Quedando de nuevo nuestro botón como lo teníamos:

Nota: Si no te sigue refrescando el componente desde el paquete local tendrás que hacer unlink. Accede al directorio del proyecto svelte-custom-button y ejecuta npm unlink y lo mismo en el proyecto Svelte svelte-playground ejecutando npm unlink /RUTA_DE_TU_PROYECTO/svelte-custom-button. Yo por lo menos tuve que hacerlo porque me seguía refrescando los cambios locales y no veía el componente de NPM 🙈

Repo de ejemplo: https://github.com/alextomas80/svelte-component-package-npm

Y esto es todo. Espero que te pueda servir 😉

El operador SPREAD en JavaScript

Alex Tomás — Mon, 15 Feb 2021 11:24:43 +0000

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 expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected."

Lo que quiere decir que este operador distribuye los elementos dentro de un iterable (cadena de texto, array o cualquier cosa que se pueda recorrer) dentro de un receptor. ¿Sigue sonando a chino verdad? Vamos a verlo con ejemplos de uso:

Copiar un array

Podemos utilizar el operador spread para copiar arrays:



let animales = ['perro', 'caballo', 'gato', 'oso', 'jirafa'];
console.log(animales); // Resultado -> 'perro', 'caballo', 'gato', 'oso', 'jirafa'

let copiaDeAnimales = [...animales];
console.log(copiaDeAnimales); // Resultado -> 'perro', 'caballo', 'gato', 'oso', 'jirafa'

Copiar un array y añadirle elementos

Podemos hacer copias de arrays y además añadir elementos al array, tanto al principio como al final de éste.



let poblaciones = ['Benicasim', 'Castellón', 'Alcocebre'];
console.log(poblaciones);
// Resultado -> ["Benicasim", "Castellón", "Alcocebre"]

let nuevasPoblaciones = ['Oropesa', ...poblaciones];
console.log(nuevasPoblaciones);
// Resultado -> ["Oropesa", "Benicasim", "Castellón", "Alcocebre"]

let masPoblacionesNuevas = [...poblaciones, 'Madrid'];
console.log(masPoblacionesNuevas);
// Resultado -> ["Benicasim", "Castellón", "Alcocebre", "Madrid"]

Concatenar arrays

De una forma sencilla, podemos concatenar arrays (esto lo vimos en el artículo Dos formas de unir objetos en JavaScript):



let peces = ['emperador', 'salmón'];
let insectos = ['hormiga', 'mosquito'];
console.log([...peces, ...insectos]);
// Resultado -> ["emperador", "salmón", "hormiga", "mosquito"]

Esto también funciona con arrays de diferentes tipos de datos, por ejemplo:



let numeros = [1, 2, 3];
let meses = ['enero', 'febrero', 'marzo'];
console.log([...numeros, ...meses]);
// Resultado -> [1, 2, 3, "enero", "febrero", "marzo"]

Funciones



let algunosNumeros = [12, 56, 88];

const addNumeros = (a, b, c) => {
    console.log(a + b + c);
}

addNumeros(...algunosNumeros);
// Resultado -> 156

Copiar objetos



const usuario = {
    nombre: 'Alex',
    apellido: 'Tomás',
    edad: 40
}

const copiaDeUsuario = {...usuario};
console.log(copiaDeUsuario);
// Resultado
// Object {
//   apellido: "Tomás",
//   edad: 40,
//   nombre: "Alex"
// }

Concatenar y añadir nuevas propiedades a un objeto

Tal como se puede hacer con los arrays, pasa con los objetos:



const coche = {
    marca: 'Peugeot',
    modelo: '207',
}
const caracteristicas = {
    color: 'Azul',
    cv: '115',
}

const automovil = {...coche, ...caracteristicas};
console.log(automovil);
// Resultado
// Object {
//   color: "Azul",
//   cv: "115",
//   marca: "Peugeot",
//   modelo: "207"
// }

const extras = {...automovil, 'aacc': true };
console.log(extras);
// Resultado
// Object {
//   aacc: true,
//   color: "Azul",
//   cv: "115",
//   marca: "Peugeot",
//   modelo: "207"
// }

Puedes ver el código funcionando en este Codepen.

Y esto es todo. Espero que te pueda servir 😉

¿Cómo manejar los estilos CSS y SCSS en una aplicación Svelte?

Alex Tomás — Mon, 15 Feb 2021 10:46:33 +0000

¿Cómo añadir estilos en Svelte?

Una vez más, Svelte sorprende por su sencillez. Al igual que pasa con el código HTML. Recuerda que un archivo Svelte hasta ahora habíamos visto dos bloques, el <script> y el propio html:

<script>
    /* Código JS aquí */>
</script>

<p>Aquí irá tu fantástico HTML 😉</p>

Ahora entra en escena el <style>:

<script>
    /* Código JS aquí */>
</script>

<p>Aquí irá tu fantástico HTML 😉</p>
<style>
    p {
        color: green;
        font-family: 'Comic Sans MS', cursive;
        font-size: 3em;
    }
</style>

Es importante destacar que estas reglas tienen como alcance el componente. Es decir, no cambiaría los estilos de los párrafos <p> en ninguna otra parte de la aplicación.

Entonces, si tenemos otro componente hijo, con un párrafo, por ejemplo tenemos el siguiente componente llamado Hijo.svelte:

<!-- Hijo.svelte -->
<p>Esto es un componente hijo</p>

Y el código anterior:

<script>
    import Hijo from './Hijo.svelte';
</script>

<p>Aquí irá tu fantástico HTML 😉</p>
<Hijo />
<style>
    p {
        color: green;
        font-family: 'Comic Sans MS', cursive;
        font-size: 3em;
    }
</style>

El resultado sería la línea Aquí irá tu fantástico HTML 😉 de color verde pero no afectaría al párrafo del componente hijo.

Estilos globales

Vale. Este concepto espero haya quedado claro. Los estilos de un componente sólo tienen alcance dentro de sí mismo, no afecta al resto. Pero... ¿y si quiero estilos globales de CSS en toda mi aplicación?

A fin de no repetir código CSS en todos los componentes, es muy recomendable usar estilos globales para mantener una armonía general. Por ejemplo, tener todos los enlaces de un mismo color.

En Svelte esto también es muy sencillo. Nos creamos un archivo CSS en nuestra carpeta src (por ejemplo estilo.css) y lo importamos en nuestro App.svelte de la siguiente forma:

<!-- App.svelte -->
<script>
    import './estilo.css';
</script>

<p>Mi párrafo de ejemplo con un <a href="#">enlace</a>.</p>

/* src/estilo.css */

a {
    color: green;
}
a:hover {
    color: red;
}

De esta forma tan sencilla tendrías estilos globales para toda tu aplicación y no necesitarías definir el color de los enlaces en cada componente 😜

Usar preprocesadores de CSS

Pero... ¡que es un preprocesador?

Los preprocesadores CSS son herramientas para los desarrolladores de sitios web que traducen un código de hojas de estilo no estándar (SASS/SCSS/LESS...) a un código CSS estándar, entendible por los navegadores.

Vamos a ver como usar SCSS con Svelte.

¿Qué es SCSS?

SCSS es un procesador CSS. Así de fácil. Es un con CSS vitaminado 🚀

Ventajas de SCSS

El uso de SCSS tiene, a mi modo de ver, ciertas ventajas:

Reduce el tiempo para crear y mantener el CSS.
Permite tener una organización modular de los estilos (vital para proyectos grandes).
Proporciona estructuras avanzadas, como variables, listas, funciones y estructuras de control.
Permite generar distintos tipos de salida, comprimida, normal o minimizada, trabajando tanto en desarrollo como en producción, además se hace una forma muy fácil.
Comunidad muy importante de usuarios.

Desventajas de utilizar SASS

Pero no todo es bonito, SASS tiene algunas desventajas (pero nada alarmantes):

Hay que aprender a utilizar una nueva herramienta, lo que para algunos supone una desventaja.
Hay un tiempo de consumo en el proceso de generación o compilación del CSS, sobre todo si es el archivo SCSS es muy grande. No es mucho tiempo, pero sí que existe esa pequeña demora.
Tiene una sintaxis más compleja que CSS.

Instalar dependencias

Necesitamos instalar un par de dependencias, nada complicado:

npm install svelte-preprocess node-sass

Y hacer un par de cambios en nuestro rollup.config.js:

// importamos la librería
import preprocess from 'svelte-preprocess';

/* ... */

// ... y añadimos el "preprocess" como un plugin:
export default {
  /* ... */
  plugins: [
    svelte({
      /* ... */
      preprocess: preprocess()
    })
  }),
  /* ... */
}

Guardamos cambios y hacemos la prueba de antes, pero con SCSS.

<!-- App.svelte -->
<script>
    import './estilo.scss';
</script>

<p>Mi párrafo de ejemplo con un <a href="#">enlace</a>.</p>

/* src/estilo.scss */

a {
    color: green;
    &:hover {
        color: red;
    }
}

Nota la diferencia entre CSS y SCSS del ejemplo anterior y este 😌 Esto es sólo una pincelada de SCSS, pero te invito a que revises la documentación oficial de SASS y te enamorarás y no podrás dejar de usar preprocesadores.

Tienes más artículos del curso de Svelte 👉🏻 aquí 👈🏻.

Y esto es todo. Espero que te pueda servir 😉

Svelte, nuevo chico en la oficina

Alex Tomás — Mon, 15 Feb 2021 10:44:23 +0000

¿Qué es Svelte?

Svelte es un framework para JavaScript, similar a otros frameworks como pueden ser Vue, React o Angular. Sin embargo, a diferencia de estos frameworks populares que necesitan incluir su propia lógica con tu aplicación, en Svelte no se incluye nada (o casi nada) adicional, dejando el código final producido de tu aplicación mucho más ligero.

Ventajas de Svelte:

Más rápido que otros frameworks
Simplicidad de código
Curva de aprendizaje muy baja
Reactividad
Menor tamaño de la app generada

Hola Mundo con Svelte 🌍

Svelte utiliza el principio de SFC (Single File Component), lo que significa que el HTML, JS y CSS va todo en un mismo archivo. Esto lo ha popularizado mucho Vue y, en Svelte, podemos ver que es incluso un poco más sencillo.

Así pues... ¿cómo escribiríamos un Hola Mundo con este framework? ¡Fácil!

<script>
    let name = 'World';
</script>

<h1>Hello {name}!</h1>

Con este ejemplo tan básico ya se pueden ver las primeras diferencias si lo comparamos, por ejemplo, con React. Fíjate.

import React from 'react';

export default () => {
    let name = 'World';
    return <h1>Hello {name}!</h1>;
};

Diferencias:

No se importa la libraría svelte. Al ser compilado, Svelte lo hará por nosotros.
Más declarativo al no tener que indicarle que queremos exportar ese componente ni el marcado que queremos renderizar.
Separación de conceptos. El marcado y el comportamiento e inicialización de datos están separados.

Queda más limpio con Svelte, ¿verdad?

¿Quieres añadirle estilos? 🎨

Muy fácil. Recuerda que es SFC. Entonces le añades los estilos que necesites:

<style>
    h1 {
        color: #ff0;
        text-transform: uppercase;
    }
</style>

Por lo que el ejemplo completo sería:

<script>
    let name = 'World';
</script>

<h1>Hello {name}!</h1>

<style>
    h1 {
        color: #ff0;
        text-transform: uppercase;
    }
</style>

Conclusiones

Este artículo es sólo la punta del iceberg de lo que es capaz de hacer Svelte. Te recomiendo que visites la web oficial porque, sin duda, dará más de que hablar.

Por cierto, ésta web se ha hecho con Svelte 🤪. Escribiré como la hice, que además, el blog está hecho con documentos Markdown.

Cómo eliminar todas las carpetas node_modules y liberar espacio

Alex Tomás — Mon, 15 Feb 2021 10:42:45 +0000

Si tienes un equipo con poca memoria, bien porque sea un SSD con poca capacidad o lo que sea, cada GB puede ser oro. Si a eso le sumas que tienes en tu ordenador muchos proyectos con sus respectivas carpetas node_modules, puede que tengas varios GB ocupados y no eres consciente.

Algunos proyectos puede que no tengan muchas dependencias y bueno, ocupen unos pocos megas, pero hay otros, coomo en mi caso, que puede que ocupen ¡varios cientos de megas! 😭

Así pues, puedes liberar mucha memoria de tu ordenador eliminando esas carpetas, sobre todo de proyectos que no tengas que trabajar día a día.

¿Cuánto ocupan los directorios node_modules?

En mi caso, tengo todos los proyectos en la carpeta Proyectos dentro de mi usuario. Así que vamos a ver el comando que buscará en todos los proyectos las carpetas node_modules dentro de ~/Proyectos y me dirá el tamaño que ocupa cada una y el total.

Si tienes Mac/Linux usa el siguiente comando:



cd ~/Proyectos
find . -name "node_modules" -type d -prune | xargs du -chs

# Ejemplo de output:
# 255M  ./StencilJS/test-with-react/node_modules
#  15M  ./StencilJS/custom-components-stencil/node_modules
# 191M  ./StencilJS/test-with-vue/node_modules

Estos son algunos directorios de ejemplo para mi caso. Como verás sólo dos de ellos me ocupan más de 400 megas, y ya te digo yo que tengo más de uno y de dos proyectos así. En total, según el comando de antes, tengo 8,8GB ocupados sólo de carpetas node_modules 🤬😭 Vaya locura....

Si tienes Windows, usa este comando:



cd Proyectos
FOR /d /r . %d in (node_modules) DO @IF EXIST "%d" echo %d"

Borrar definitivamente las carpetas node_modules

NOTA:, cuando eliminas la carpeta node_modules de un proyecto tendrás que volver a hacer un npm install cuando quieras trabajar de nuevo en él. No es un mal mayor, vaya.

Perfecto, ¿te ha pasado como a mí? ¿tienes varios gigas ocupados y quieres/necesitas recuperar ese espacio? Bien, es muy sencillo y tienes dos opciones.

Entrar en cada proyecto y hacer un rm -Rf node_modules
Usar el siguiente comando para eliminar todas las carpetas node_modules del directorio en el que te encuentres, en mi caso ~/Proyectos



cd ~/Proyectos
find . -name 'node_modules' -type d -prune -print -exec rm -rf '{}' \;

Si tienes Windows, puedes utilizar el siguiente comando.



cd Proyectos

FOR /d /r . %d in (node_modules) DO @IF EXIST "%d" rm -rf "%d"

Recuerda

Asegúrate de qué quieres eliminar antes de ejecutar el comando.
Sé cuidadoso/a, el proceso es "irreversible".
Recuerda que tendrás que hacer npm install en el proyecto que quieras volver a trabajar.
¡Disfruta del espacio libre! 🎉

¡Eso es todo! Ahora ya tengo 8,8 gigas de espacio libre de nuevo. Aprovecha y haces una limpieza de proyectos, que tal vez sean pruebas o bien ya no necesites, y liberas un poco de espacio.

Artículo original: Cómo eliminar todas las carpetas node_modules y liberar espacio

Y esto es todo. Espero que te pueda servir 😉

Crear WebComponents con StencilJS y reutilizarlos en diferentes proyectos

Alex Tomás — Mon, 15 Feb 2021 10:40:40 +0000

Me ha pasado en varias ocasiones la necesidad de re-utilizar un componente en varios proyectos. ¿La solución? Copiar-pegar el componente y llevármelo al proyecto que lo necesite, y tal vez, ajustar alguna cosa para que funcione. ¿Te suena?

Artículo original: Crear WebComponents con StencilJS y reutilizarlos en diferentes proyectos

Tal vez esto te funciona cuando el componente en cuestión, por ejemplo un botón, te lo llevas de un proyecto React a otro proyecto React, pero... ¿qué haces si un proyecto es de React, otro de Angular u otro de Vue? Tocaría re-hacer ese botón para cada proyecto. Es decir, estarás haciendo tres veces la misma funcionalidad. No suena bien, ¿no? 💩

Bueno, si te sientes identificado/a con ésta situación, me alegro de no ser el único.

¿Qué tal te suena si hacemos ese mismo botón una sóla vez y lo aprovechamos para nuestros proyectos? Venga, vamos a ello.

Índice de contenidos

Introducción
¿Qué es StencilJS?
Crear un proyecto con StencilJS
Creación de un componente botón reusable con StencilJS
Añadir estilos CSS a un webcomponent
¿Cómo ver un webcompoent creado con Stencil?
Generando la distribución
Distribuir nuestro webcomponent en un package de Github
Integración en un proyecto con React
Integración en un proyecto con Vue
Conclusiones

Introducción

En este artículo vamos a ver con un ejemplo práctico cómo implementar un componente con StencilJS (el botón comentado anteriormente), lo publicaremos como un package en Github y luego lo integraremos en nuestras aplicaciones, haremos una prueba de integración en Vue y otro en React. ¿Suena bien? ¡Al lío!

¿Qué es StencilJS?

StencilJS es una herramienta de los creadores de Ionic, que definen como «El generador mágico de web components reusables». Es decir, StencilJS permite crear de forma sencilla y sin grandes esfuerzos web components nativos.

Crear un proyecto con StencilJS

Lo primero que haremos, como es obvio, crear el proyecto, muy fácil:

npm init stencil

Lo que automáticamente nos preguntará que tipo de proyecto es:

Nos salen tres opciones de tipos de proyecto. Vamos a seleccionar la opción component ya que lo que queremos crear es una colección de componentes. Como nombre del proyecto pondremos custom-components-stencil (por ejemplo):

Perfecto, ya hemos creado nuestro primer proyecto con Stencil 🚀, ahora abrimos el proyecto con nuestro IDE favorito y empezamos:

cd custom-components-stencil
npm install
npm start

Bien, una vez arrancado el proyecto nos dirá la URL en la que está funcionando nuestro ejemplo, en mi caso en http://localhost:3333/ donde veremos un ejemplo básico que nos ofrece por defecto StencilJS.

Creación de un componente botón reusable con StencilJS

Llegados a este punto tenemos ya instalado nuestro primer proyecto StencilJS. Ahora vamos a crear nuestro primer webcomponent de tipo botón reusable.

Lo primero, nos fijaremos en el archivo src/index.html donde veremos que Stencil ya nos ofrece un ejemplo de uso de un componente llamado my-component, pégale un vistazo a la carpeta src/components/my-component que es donde está definido. Básicamente es un div que recibe tres props (first, middle, last) y los pinta por pantalla.

Bien, vamos a crear nuestro componente. Seguiremos los siguientes pasos:

Creamos a carpeta dentro de src que llamaremos at-button (at es de Alex Tomás 😜)
Dentro de src/components/at-button creamos un archivo con formato .tsx que llamaremos at-button.tsx ya añadimos lo siguiente:

import { Component, Prop, h } from '@stencil/core';

@Component({
    tag: 'at-button',
    styleUrl: 'at-button.css',
    shadow: true,
})
export class ATButton {
    @Prop() text: string;

    render() {
        return <button class='button'>{this.text}</button>;
    }
}

Bueno, bueno, esto son muchas cosas, pero que no cunda el pánico. Veamos cuales son las partes del componente:

Decorador @Component es donde especificamos el nombre del componente y su fichero de estilos.
La @Prop text va a ser la propiedad que le enviaremos al componente. Estas propiedades por defecto son inmutables desde dentro del componente. Para hacerlas mutables hay que anotarlas con @Prop({ mutable: true }), pero no va a ser el caso.
El método render, que devuelve la descripción necesaria para pintar el componente. Cómo verás usamos sintaxis JSX. Si no conoces JSX pásate por este enlace de la documentación de React que explica qué es JSX.

Recuerda crear el fichero de estilos en src/components/at-button/at-button.css

Añadir estilos CSS a un webcomponent

Muy sencillo. Al añadir en el decorador @Component el nombre del archivo CSS, añadimos las clases que queramos. En nuestro caso le hemos añadido la clase button a nuestro botón. Por lo tanto, le añadimos un estilo básico (recuerda que estamos aprendiendo la funcionalidad de los webcomponentes, no en la estética 🙃):

.button {
    background-color: teal;
    border-radius: 30px;
    border: none;
    box-shadow: 2px 2px 9px 2px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    padding: 10px 30px;
    color: white;
}
.button:hover {
    background-color: rgb(0, 146, 146);
}

Vale, perfecto. ¿En qué punto estamos?

Hemos iniciado el proyecto con Stencil.
Tenemos un webcomponent creado que se llama at-button.
Le hemos dado estilos css.

¿Y ahora como lo puedo ver?

¿Cómo ver un webcompoent creado con Stencil?

Recuerda, que al principio del artículo, al crear el proyecto teníamos el comando npm run start o npm start para ver el proyecto en nuestro navegador. Vale, pero antes vamos a editar el fichero src/index.html y lo dejaremos de la siguiente manera:

<!DOCTYPE html>
<html dir="ltr" lang="en">
    <head>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
        />
        <title>Stencil Component Starter</title>

        <script
            type="module"
            src="/build/custom-components-stencil.esm.js"
        ></script>
        <script nomodule src="/build/custom-components-stencil.js"></script>
    </head>
    <body>
        <at-button text="¡Hola mundo!"></at-button>
    </body>
</html>

Si vamos a nuestro localhost que nos indica Stencil al arrancar el proyecto deberíamos ver nuestro botón:

Generando la distribución

¡Ya tienes tu primer webcomponent creado con StencilJS! ¿Y hora como lo vamos a usar en otros proyectos? Lo primero que tenemos que hacer, es compilar todo:

npm run build

Lo que te debe generar la carpeta dist y loader. Perfecto, vamos a crear nuestro packageen Github.

Distribuir nuestro webcomponent en un package de Github

Lo primero que necesitaremos será tener creado un repositorio, si no lo tienes creado, hazlo (no voy a detenerme en como crear un repo y en subir los cambios en él ya que no es el objeto de este artículo 😌).

En mi caso el proyecto estará público en la siguiente URL: https://github.com/alextomas80/stencil-webcomponents

Perfecto. Ya tengo mi proyecto compilado y subido a Github. Ahora vamos a crear nuestro package.

Generar token en Github para crear un package

Aquí vien un poco de magia. Lo primero que necesitamos es un archivo llamado .npmrc donde añadiremos lo siguiente:

//npm.pkg.github.com/:_authToken=TU_TOKEN
registry=https://npm.pkg.github.com/USUARIO

En mi caso será:

//npm.pkg.github.com/:_authToken=d7a031caf35....🤫
registry=https://npm.pkg.github.com/alextomas80

Para crear un token para publicar un package en tu repositorio necesitarás acceder en Github a Settings > Developer settings > Personal access tokens

Y necesitaremos hacer un cambio en nuestro package.json:

{
    "name": "custom-components-stencil"
}

Lo cambiaremos por nuestro usuario y nombre que le hayas puesto a tu repositorio, en mi caso quedaría de la siguiente forma:

{
    "name": "@alextomas80/stencil-webcomponents"
}

Bien, tenemos todo listo, ahora sí, para enviar nuestro package a Github 🤞🏻

npm publish --access public

Y deberíamos de obtener una respuesta similar a ésta:

¡Sí! ¡Ahora sí! Tienes tu package creado con éxito. ¿Cómo comprobarlo? Accede a la URL de tu repositorio terminado en packages: https://github.com/alextomas80/stencil-webcomponents/packages

Integración en un proyecto con React

Es hora de ver que todo esto ha servido para algo y funciona. Vamos a utilizar nuestro webcomponent at-button en un proyecto que vamos a crear con react de una forma rápida. No me voy a entretener mucho con esto:

Creamos nuestro proyecto de ejemplo:

npx create-react-app test-with-react

Arrancamos el proyecto y veremos la pantalla de bienvenida típica de React:

npm run start

Ahora instalemos nuestro package con nuestro webcomponent. Si volvemos a Github y consultamos nuestro package veremos que nos indica como podemos instalarlo.

Así que usaremos NPM para ello:

npm install @alextomas80/stencil-webcomponents@0.0.1

Bien. Ahora vamos a usarlo. Para ello vamos a pegar un vistazo a la documentación de Stencil para la integración con React, es muy sencillo, yo te lo resumo:

Abrimos el archivo src/index.js y lo dejamos de la siguiente manera:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

// Importamos nuestro package que hemos creado en los anteriores pasos
import {
    applyPolyfills,
    defineCustomElements,
} from '@alextomas80/stencil-webcomponents/loader';

ReactDOM.render(<App />, document.getElementById('root'));

applyPolyfills().then(() => {
    defineCustomElements();
});

Y ahora sí, por fin, vamos a usar y ver nuestro at-button. Abrímos el archivo src/App.js y añadimos nuestro botón de la siguiente manera:

<at-button text="Mi WebComponent en React" />

Con lo que veremos, por fín, nuestro botón de la siguiente manera y estilo:

¡Bien! Como verás tiene el mismo estilo que le dimos al componente cuando lo creamos con Stencil. Y además le podemos pasar la propiedad text para definir el texto que tendrá el botón. Una maravilla. Pero... ¿no habíamos dicho que el fin de este artículo es el de crear un componente y usarlo en React y Vue?

Integración en un proyecto con Vue

Creamos nuestro proyecto de ejemplo Vue:

vue create test-with-vue

Seleccionamos las opciones que nos pide (versión de Vue, etc etc, no me voy a entretener en esta parte). Arrancamos el proyecto y veremos la pantalla de bienvenida típica de Vue:

npm run serve

Y vamos a hacer exactamente lo mismo que con ejemplo de React. Vamos a instalar nuestro package con NPM:

npm install @alextomas80/stencil-webcomponents@0.0.1

Vamos a pegar un vistazo de nuevo a la documentación de Stencil para la integración con Vue, también es muy fácil y muy similar a React:

Abrimos el archivo src/main.js y lo dejamos de la siguiente manera:

import { createApp } from 'vue';
import App from './App.vue';

// Importamos nuestro package que hemos creado en los anteriores pasos
import {
    applyPolyfills,
    defineCustomElements,
} from '@alextomas80/stencil-webcomponents/loader';

applyPolyfills().then(() => {
    defineCustomElements();
});

createApp(App).mount('#app');

Y ya podemos usarlo. Para ello vamos al archivo del ejemplo src/App.vue y añadimos:

<at-button text="Mi WebComponent en Vue" />

¡Y ahí tenemos de nuevo exactamente el mismo botón!

Conclusiones

Con este sencillo ejemplo has podido ver y probar el potencial que nos ofrece Stencil y las posibilidades que nos brinda. Podemos crear componentes rápidamente y completamente reutilizables en cualquier tipo de aplicación ya sea de una u otra tecnología, o incluso sin que tengan uns framework JavaScript por detrás como hemos hecho.

Así pues, si lo que quieres es tener tu libraría de componentes, compartirla con diferentes proyectos y además trabajar en ellos diferentes compañeros de equipo... te recomiendo totalmente su uso.

Y esto es todo. Espero que te pueda servir 😉

Desestructuración de objetos en JavaScript

Alex Tomás — Sun, 14 Feb 2021 19:23:22 +0000

Artículo original en Desestructuración de objetos en JavaScript

¿Qué es la desestructuración en JavaScript?

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: ... }

Supongamos que tenemos el siguiente ejemplo de un objeto en JavaScript:

const usuario = {
    id: 123,
    nombre: 'Alex',
    apellidos: 'Tomás',
    url: 'https://alextomas.com'
};

Antiguamente, para obtener la una propiedad del objeto usuario haríamos algo como:

const nombre = usuario.nombre;
console.log(nombre);

// Resultado -> Alex

Eso no está mal, pero podemos dejarlo más limpio con la desestructuración.

const usuario = {
    id: 123,
    nombre: 'Alex',
    apellidos: 'Tomás',
    url: 'https://alextomas.com'
};
const { id, nombre, apellidos, url } = usuario;

console.log(id, nombre, apellidos, url);

// Resultado -> 123 Alex Tomás https://alextomas.com

Las propiedades usuario.id, usuario.nombre, usuario.apellidos y usuario.url, se asignan a las variables correspondientes, sin importar su orden.

Si quieres cambiar el nombre de las variables cuando las asignas mediante desestructuración, también puedes hacerlo de la siguiente forma:

const moto = {
    tipo: 'Race',
    modelo: 'Yamaha MT09',
    matriculacion: 2018
};
const { tipo: type, modelo: model, matriculacion: year } = moto;

console.log(type, model, year);

// Resultado -> "Race" "Yamaha MT09" 2018

Así de sencillo.

Valores por defecto

const television = {
    pulgadas: 52,
    fabricante: 'LG'
};

const { pulgadas, fabricante, smart = true } = television;
console.log(pulgadas, fabricante, smart);

// Resultado -> 52 "LG" true

El resto

En caso que el objeto tenga más propiedades que el número de variables que requerimos crear, podemos guardar el resto de la información en un último parámetro utilizando tres puntos.

let mascota = {
    raza: 'perro',
    nombre: 'Max',
    edad: 8.5
};

let { raza, ...rest } = mascota;

console.log(raza)
console.log(rest)

// Resultado:

// "perro"
// Object {
//   edad: 8.5,
//   nombre: "Max"
// }

Desestructuración anidada

Puedes tener el caso de que un objeto está compuesto de otros objetos y matrices, así que también podemos usar patrones más complejos del lado izquierdo para extraer partes más profundas.

let automovil = {
    tipo: 'coche',
    marca: 'Peugeot',
    caracteristicas: {
        cv: 115,
        carburante: 'diesel'
    }
};

const { marca, caracteristicas: { cv }} = automovil;
console.log(marca, cv)

// Resultado -> "Peugeot" 115

Puedes ver el código funcionando en este Codepen.

Y esto es todo. Espero que te pueda servir 😉

Dos formas de unir objetos en JavaScript

Alex Tomás — Sun, 14 Feb 2021 18:12:04 +0000

Aquí tienes dos formas de unir objectos fácilmente en JavaScript. Olvidate 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);

El resultado para ambos objectos resultado y resultado2 sería el mismo:

Object {
  abeja: "🐝",
  hamster: "🐹",
  hormiga: "🐜",
  koala: "🐨",
  leon: "🦁",
  mosca: "🪰",
  mosquito: "🦟",
  perro: "🐶"
}

Puedes ver el codigo funcionando en este Codepen.

Artículo original en Dos formas de unir objetos en JavaScript

Y esto es todo. Espero que te pueda servir 😉

Cómo generar un sitemap dinámico para tu web app con Sapper (Svelte)

Alex Tomás — Sun, 14 Feb 2021 17:40:34 +0000

¿Qué son los sitemaps?

Un sitemap es un anglicismo que significa «Mapa del sitio», es decir, un archivo o una url que contiene todas y cada una de las páginas de una web. En este artículo te voy a explicar porqué es tan importante generar uno, cómo debes crearlo correctamente y diferentes maneras de crear uno.

Según la definición de Google:

Los sitemaps son archivos en los que se proporciona información sobre las páginas, los vídeos y otros archivos de un sitio web, así como sobre las relaciones que hay entre ellos. Los buscadores, como Google, leen estos archivos para rastrear los sitios web de forma más eficaz. Los sitemaps informan a Google de qué archivos de un sitio web son importantes según el webmaster y, además, incluyen datos importantes sobre ellos; por ejemplo, en el caso de las páginas, pueden indicar cuándo se actualizaron por última vez, cada cuánto se modifican y si tienen versiones en otros idiomas.

Con un sitemap, además, vas a poder mantener actualizada la lista de enlaces que tiene la web y pasarsela a Google para que la rastree. Es un método muy sencillo y recomendable que tu página web tenga un sitemap.

¿Cómo generar un sitemap con Sapper?

Sapper es un framework hecho con Svelte ya preparado con un enrutamiento flexible basado en sistemas de archivos y SSR. Tal vez conozcas NuxtJS con Vue... pues lo mismo, pero para Svelte 😜

Estructura de un sitemap

Los sitemap se rigen mediante unos protocolos marcados por sitemaps.org, es decir, tienen una estructura concreta. Según estas directrices, un sitemap puede configurarse de la siguiente manera:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://alextomas.com</loc>
    <lastmod>2021-01-25</lastmod>
    <priority>1</priority>
  </url>
  <url>
    <loc>https://alextomas.com/blog</loc>
    <lastmod>2021-01-19</lastmod>
    <priority>1</priority>

  </url>
</urlset>

Dentro de cada etiqueta encontramos cuatro etiquetas de información diferentes:

<loc>: URL de la página. Es una etiqueta de uso obligatorio.
<lastmod>: Indica la fecha de la última modificación textual o de programación en dicha url. Su uso no es obligatorio.
<changefreq> (opcional): Esta etiqueta indica la frecuencia en la que se realizan modificaciones textuales o de código en esa url.
<priority> (opcional): Indica en un rago de 0 a 1 la importancia que el webmaster atribuye a esa url en concreto respecto a la web en su conjunto.

Generar un sitemap de forma manual

La forma más sencilla de generar un sitemap en Sapper es haciéndolo de forma manual:

Creas un fichero llamado sitemap.xml en la carpeta static.
Escribes el listado de todos los links que quieras añadir con la siguiente estructura:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://alextomas.com</loc>
    <lastmod>2021-01-25</lastmod>
    <priority>1</priority>
  </url>
  <url>
    <loc>https://alextomas.com/blog</loc>
    <lastmod>2021-01-19</lastmod>
    <priority>1</priority>
  </url>
</urlset>

Esto está bien si no te quieres complicar demasiado o bien tu página es estática y va a tener muy pocos enlaces. Pero... ¿y si tienes un blog que va a tener cientos de entradas? Este ha sido mi caso, mi blog tiene entradas dinámicas (aquí explico cómo generar un blog con Sapper y Markdown, pégale un vistazo).

Resulta que mantener un sitemap actualizado era un fastidio, además que podía equivocarme al escribir alguna ruta, por lo que podría pasarle a Google información errónea y demás. ¿Solución?

Generar un sitemap de forma dinámica

Es una forma un poco más elaborada para generar un sitemap en Sapper pero tampoco es nada de otro mundo. Sigue los siguientes pasos y verás que no tienes problemas:

Creas un fichero en src/routes/sitemap.xml.js.
El código para la generación dinámica del sitemap es el siguiente:

// Importo el listado de posts y los guardo en la variables 'posts'
// En el artículo mencionado antes explico su uso
import posts from './blog/_posts';
// Librería para darle formato a las fechas
import moment from 'moment';

const feed = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <url>
        <loc>https://alextomas.com</loc>
        <lastmod>2021-01-25</lastmod>
    </url>
    <url>
        <loc>https://alextomas.com/work-experience</loc>
        <lastmod>2021-01-19</lastmod>
    </url>
    <url>
        <loc>https://alextomas.com/blog</loc>
        <lastmod>2021-01-19</lastmod>
    </url>
    ${posts.map((post) => mountSchemaUrl(post)).join('')} </urlset
>`;
export function get(req, res) {
    res.writeHead(200, { 'Content-Type': 'application/rss+xml' });
    res.end(feed);
}
function mountSchemaUrl({ slug, date }) {
    return `
<url>
    <loc>https://alextomas.com/blog/${slug}</loc>
    <lastmod>${moment(date).format('YYYY-MM-DD')}</lastmod>
</url>
`;
}

Es muy sencillo de entender:

Primero incluyo las páginas estáticas. En mi caso es la home, experiencia laboral y el blog. Que no van a cambiar de ruta nunca.
Luego, recorro el array de posts y llamo a la función mountSchemaUrl que me devuelve la estructura necesaria para cada enlace del post.

¿Cómo puedo ver el sitemap generado?

Si estás en modo desarrollo (npm run dev) puedes acceder a la ruta http://localhost:3000/sitemap.xml y automáticamente verás tu estupendo sitemap.xml, algo como:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://alextomas.com</loc>
    <lastmod>2021-01-25</lastmod>
  </url>
  <url>
    <loc>https://alextomas.com/work-experience</loc>
    <lastmod>2021-01-19</lastmod>
  </url>
  <url>
    <loc>https://alextomas.com/blog</loc>
    <lastmod>2021-01-19</lastmod>
  </url>
  <url>
    <loc>https://alextomas.com/blog/generar-sitemap-sapper-svelte</loc>
    <lastmod>2021-01-27</lastmod>
  </url>
  <url>
    <loc>https://alextomas.com/blog/deplegar-sapper-netlify</loc>
    <lastmod>2021-01-25</lastmod>
  </url>
  <url>
    <loc>https://alextomas.com/blog/estilos-con-svelte</loc>
    <lastmod>2021-01-24</lastmod>
  </url>
  <url>
    <loc>https://alextomas.com/blog/como-cambiar-ubicacion-nombre-capturas-mac</loc>
    <lastmod>2021-01-24</lastmod>
  </url>
  <url>
    <loc>https://alextomas.com/blog/atributos-dinamicos-en-svelte</loc>
    <lastmod>2021-01-22</lastmod>
  </url>
  <url>
    <loc>https://alextomas.com/blog/manejo-de-datos-con-svelte</loc>
    <lastmod>2021-01-21</lastmod>
  </url>
  <url>
    <loc>https://alextomas.com/blog/curso-de-svelte</loc>
    <lastmod>2021-01-20</lastmod>
  </url>
  <url>
    <loc>https://alextomas.com/blog/blog-svelte-sapper-markdown</loc>
    <lastmod>2021-01-18</lastmod>
  </url>
  <url>
    <loc>https://alextomas.com/blog/diferentes-cuentas-y-misma-clave-ssh-en-bitbucket</loc>
    <lastmod>2021-01-05</lastmod>
  </url>
  <url>
    <loc>https://alextomas.com/blog/que-es-svelte</loc>
    <lastmod>2021-01-04</lastmod>
  </url>
</urlset>

¡Enhorabuena, ya tienes tu sitemap dinámico en tu aplicación web con Sapper! 🚀

Problema al hacer export (deploy)

Cuando hagas el deploy y hagas un npm run export para generar las rutas seguramente tengas el mismo problema que tuve yo: La ruta al sitemap no me funcionaba, me daba un 404.

Solución:

En mi caso, añadiendo un enlace al sitemap en el footer fue suficiente. Al compilar, Sapper encuentra el enlace y genera el archivo sitemap.xml accesible. No se porqué pero sin el enlace me daba el error. 😭

Enviar tu sitemap directamente a Google

Para enviar tu sitemap a Google, primero deberás verificar tu sitio con el Google Search Console.

Para enviar tu sitemap:

Selecciona tu sitio web en la consola de Google Search.
Haz clic en Sitemaps en el menú a la izquierda.
En el campo Añadir un sitemap, escribe la url de tu sitemap.xml (en mi casi https://alextomas.com/sitemap.xml).
Haz clic en Enviar.

Artículo original en Cómo generar un sitemap dinámico para tu web app con Sapper (Svelte)

Y esto es todo. Espero que te pueda servir 😉

Cómo desplegar una aplicación Sapper en Netlify

Alex Tomás — Sun, 14 Feb 2021 17:36:37 +0000

En este artículo, vamos a ver qué es Sapper, cómo crear una aplicación simple y finalmente implementarla en Netlify. ¡Al lío! 🤓

Artículo original en Cómo desplegar una aplicación Sapper en Netlify

¿Qué es Sapper?

Ya hice una breve referencia a lo que era Sapper en el artículo dónde hablamos de crear un blog con sapper y markdown, pégale un vistazo.

Sapper es un framework hecho con Svelte ya preparado con un enrutamiento flexible basado en sistemas de archivos y SSR. Tal vez conozcas NuxtJS con Vue… pues lo mismo, pero para Svelte 😜

Así que si eres un desarrollador de Svelte y quieres crear una aplicación renderizada del lado del servidor rápida y robusta en Svelte, la podrás crear fácilmente con Sapper. Al igual que para la creación de aplicaciones representación del lado del servidor en React tenemos un framework muy popular llamado Next.JS .

A diferencia de las aplicaciones de una sola página (SPA), Sapper no compromete el SEO, mejora carga inicial de la aplicación.

¿Qué es Netlify?

Netlify es una plataforma de alojamiento web de próxima generación que proporciona todo lo que necesita para crear sitios web rápidos y modernos como CI / CI, funciones sin servidor, etc...

Beneficios de usar de Netlify:

Puede crear una cuenta gratuita para sus proyectos.
Precios muy bajos con muchas características.
Proporciona certificados SSL gratuitos y cuenta con administraciones de DNS integradas.
Si quieres almacenar datos, Netlify también tiene un CMS Netlify .

¿Cómo crear una aplicación en Sapper?

Necesitarás tener lo siguiente:

Última versión estable de Node JS y NPM.
Conocimiento básico de HTML, CSS y JavaScript
El conocimiento de Svelte es una ventaja adicional

La forma más fácil de crear una aplicación Sapper es clonando el repositorio con degit. Usando esta plantilla podemos crear la aplicación Sapper con dos de los paquetes de módulos más populares, que son, rollup.js y Webpack . Puedes elegir cualquiera de los dos, con el que te sientas más cómodo.

Usando Rollup:

npx degit "sveltejs/sapper-template#rollup" saper-netlify-app

Usando Webpack:

npx degit "sveltejs/sapper-template#webpack" saper-netlify-app

Una vez termine accede al directorio generado e instala las dependencias:

cd saper-netlify-app
npm install

¡Y eso es todo! Ya podemos ver nuestra aplicación Sapper con el siguiente comando:

npm run dev

Y aquí tenemos nuestra primera aplicación hecha con Sapper:

Si le echamos un vistazo al package.json en scripts veremos los siguientes:

"scripts": {
    "dev": "sapper dev",
    "build": "sapper build --legacy",
    "export": "sapper export --legacy",
    "start": "node __sapper__/build"
}

dev: para iniciar la aplicación en modo de desarrollo
build: compila la aplicación en modo de producción
export: exportar la versión estática de la aplicación (usaremos este comando para implementar la aplicación)
start: inicia la aplicación que has creado en modo de producción

Bien. Ya tenemos nuestra aplicación Sapper y sabemos como arrancarla, verla y generar los archivos estáticos para lanzarla a producción.

Git: Bitbucket, Gitlab...

Ahora vamos a crearnos nuestro repositorio para tener el código en él (puedes elegir la plataforma que quieras como Gitlab o Bitbucket). Esto daría para otro artículo, por lo que debes de estar familiarizado con el tema de crear un repositorio y hacer commits.

git init
git add .
git commit -m "Mi primer commit"
git remote add origin <your repo address>
git push -u origin master

¡Perfecto! Hasta ahora hemos hecho lo siguiente:

Hemos creado con éxito una aplicación Sapper básica.
Hemos introducido el código fuente en Git.

Implementar la aplicación Sapper en Netlify

Llega el momento de implementar nuestra aplicación Sapper en Netlify. Si todavía no eres usuario de Netlify, créate una cuenta gratuita en Netlify, es fácil y rápido.

Una vez que hayas iniciado sesión, serás redirigido a (https://app.netlify.com/)[https://app.netlify.com/].

Crear nuevo sitio desde Git

Para empezar a crear nuestro nuevo sitio deberemos hacer click sobre New site from Git:

El siguiente paso seré elegir la plataforma Git en la que tienes tu repositorio (GitHub, GitLab o Bitbucket), en nuestro caso será Bitbucket (si es la primera vez que haces este paso te pedirá que autorices tu cuenta con Netlify):

Y nos pedirá con qué repositorio queremos conectar nuestra app. En nuestro caso, para el ejemplo, será ejemplo-de-uso-sapper:

Este es el último paso de configuración, pero vamos a detenernos un poco en ver qué es cada cosa, porque es importante:

Branch to deploy: rama que se desplegará con el CI de Netlify. Esto quiere decir que cuando hagas un commit a la rama master(en este caso de ejemplo) Netlify iniciará una compilación de tu aplicación Sapper para hacer el despliegue.
Build command: cuando Netlify detecte un commit en la rama que hayas configurado como Branch to deploy ejecutará este comando.
Publish directory: directorio que se desplegará en tu aplicación.

En nuestro caso, queremos desplegar nuestra aplicación Sapper, y como vimos antes, para generar los archivos necesarios usaremos npm run export. Entonces, la configuración en Netlify debería quedar así:

¡Ya está todo! El último paso es clickar en Deploy site. Esto te generará tu aplicación y lanzará tu primer deploy de la misma.

Conclusiones de usar Netlify

Netlify me ha sorprendido por su sencillez de uso y las funcionalidades que te dan de forma gratuita. Es increíblemente sencillo crear una aplicación y desplegarla en una URL que ellos te facilitan (luego lo puedes conectar a tu dominio). Sin duda, recomiendo 100% el uso de Netlify si no quieres gastarte ni un euro y tener las útlimas tecnologías.

Código de ejemplo y demo

Demo: https://determined-thompson-ceb618.netlify.app/
Repo: https://bitbucket.org/_alextomas_/ejemplo-de-uso-sapper/src/master/

Y esto es todo. Espero que te pueda servir 😉

Cómo crear un blog con Sapper (Svelte) y Markdown

Alex Tomás — Sun, 14 Feb 2021 17:32:05 +0000

Artículo original en Cómo crear un blog con Sapper (Svelte) y Markdown

¿Qué es Sapper?

Sapper es un framework hecho con Svelte ya preparado con un enrutamiento flexible basado en sistemas de archivos y SSR. Tal vez conozcas NuxtJS con Vue... pues lo mismo, pero para Svelte 😜

¿Por qué hacer un blog con markdown?

Bueno, esta decisión fue más por aprender que por otra cosa. Puede ser una buena opción para toda persona que no tenga un hosting, o no quiera tenerlo por el motivo que sea. También me gusto el hecho de usar Markdown, texto plano de siempre con un marcado claro y sencillo.

Vamos a empezar

No te llevará más de 10 minutos. Debo decir que no me voy a detener en maquetaciones ni nada de los posts, ni del listado de posts. Sólo me voy a centrar en la lógica para obtener el listado de posts (*.md), mostrarlos y ver el detalle.

Instalar Sapper y arrancar el proyecto

npx degit "sveltejs/sapper-template#rollup" NOMBRE_DE_TU_APP

El proceso no debe llevarte mucho tiempo, apenas unos segundos. Ya que no instala las dependencias. Una vez termine, deberás acceder a la carpeta del proyecto e instalar las depenciencias:

cd NOMBRE_DE_TU_APP
npm install
npm run dev & open http://localhost:3000

Con todo esto debería abrirse el navegador y ver la plantilla de ejemplo de Sapper. Verás que ya viene un menú con 3 enlaces en la cabecera totalmente funcionales.

¡Perfecto! Seguimos.

Contenido

La carpeta donde irá nuestro contenido será dentro de src/contents. Y pondremos un archivo de ejemplo con la siguiente estructura:

---
date: 2021-01-18
summary: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies congue erat, ut tempor felis euismod imperdiet.
title: "¡Hola Alex Tomás!"
---

Este es mi primer documento con formato Markdown. Lo guardamos con el nombre que quieras, por ejemplo `primera-prueba.md`

Plugins

Podríamos cargar los archivos .md usando algo como fs.readFile() en tiempo de compilación, pero hay una forma más fácil usando import.

Para ello vamos a utilizar el plugin @jackfranklin/rollup-plugin-markdown. ¡Es magia pura!

El plugin hace posible lo siguiente:

import post1 from 'posts/example1.md'
import post2 from 'posts/example2.md'
// ...

Si tuvieramos que hacer esto uno por uno... llegaría un momento que nos volveríamos locos. 😅 Es más fácil que "algo" nos importe todos los archivos *.md de nuestra carpeta. Eso exactamente hace el plugin rollup-plugin-glob 🚀

Entonces, vamos a añadir los siguientes paquetes:

npm i -D @jackfranklin/rollup-plugin-markdown rollup-plugin-glob

Y tenemos que hacer una pequeña modificación en nuestro rollup.config.js:

// Importamos los paquetes
import markdown from '@jackfranklin/rollup-plugin-markdown'
import glob from 'rollup-plugin-glob'

// Recuerda que rollup crea multiples builds, así que fíjate de
// añadir los dos plugins tanto en `server` como en `client`
export {
  client: {
    plugins: [
      markdown(),
      glob(),
      ...
    ],
    ...
  },

  server: {
    plugins: [
      markdown(),
      glob(),
      ...
    ],
    ...
  }
}

Centralizamos los posts

Ahora que podemos importar .md, vamos a centralizar la lógica para acceder a las publicaciones, crearemos el archivo src/posts.js:

import all from './contents/*.md';

export const posts = all;

Si pusieramos un console.log(posts), varíamos algo como:

[
    {
        "metadata": {
            "title": "¡Hola Alex Tomás!",
            "summary": "Lorem ipsum dolor sit amet...",
            "date": "2021-01-18"
        },
        "html": "Este es mi primer documento con formato Markdown",
        "filename": "primera-prueba.md"
    }
]

¡Genial! Ahora sólo nos queda darle un poco de forma y crearnos un par de funciones. Vamos a realizar estas mejoras:

Ponga la metadata( title, summary, date) en el nivel superior.
Agrega un permalinkcampo. Se basará en elfilename
Ordene la lista de publicaciones dateen orden descendente (las publicaciones más recientes primero)

Dejaremos el archivo src/posts.js de la siguiente forma:

import _ from 'lodash';
import all from '../posts/*.md';

export const posts = _.chain(all)
    .map(transform)
    .orderBy('date', 'desc') // ordenamos los posts por fecha
    .value();

// función para formatear cada post
function transform({ filename, html, metadata }) {
    // el permalink es el nombre del archivo '.md'
    const permalink = filename.replace(/\.md$/, '');

    // convertimos la fecha en un Date
    const date = new Date(metadata.date);

    // devolvemos el post con el nuevo formato
    return { ...metadata, filename, html, permalink, date };
}

// función para buscar un post
export function findPost(permalink) {
    // usamos lodash para encontrar un post por su permalink (nombre de fichero):
    return _.find(posts, { permalink });
}

Nota: vamos a necesitar instalar el paquete de lodash:

npm i lodash

Listado de posts

¡Es hora de mostrar los posts que tenemos! Abrimos el archivo src/routes/index.svelte que ya nos había generado Sapper por nosotros.


<script>
    // Importamos los posts desde el fichero src/posts.js
    import { posts } from '../../posts';
</script>

<svelte:head>
    <title>Blog</title>
</svelte:head>

<h1>Recent posts</h1>

{#each posts as post}
    <article>
        <a href={`blog/${post.permalink}`}>
            <h2>{post.title}</h2>
            <p>{post.summary}</p>
        </a>
    </article>
{/each}

Básicamente lo que hacemos es:

Importamos los posts.
Con svelte:head ponemos el título en la página.
Hacemos un bucle para imprimir un article para cada post.
Añadimos un enlace con el link al post. Recuerda que el permalink es el nombre del archivo .md

Detalle de un post

Ya tenemos nuestro listado de posts en src/routes/blog/index.svelte. Ahora vamos a editar src/routes/blog/[slug].svelte, que es otra ruta que Sapper no había dejado preparado por nosotros.

¿Te has fijado en los corchetes alrededor de [slug]? Eso le dice a Sapper que slug es un parámetro dinámico. Sapper proporcionará todos los parámetros a nuestra función preload (). Ahora lo vemos.

De momento te dejo como debería quedar el archivo final:

<script context="module">
    import { findPost } from '../../posts';

    export async function preload(page, session) {
        const { slug } = page.params;
        const post = findPost(slug);
        return { post };
    }
</script>

<script>
    export let post;
</script>

<svelte:head>
    <title>{post.title}</title>
</svelte:head>

<h1>{post.title}</h1>

<div class="content">{@html post.html}</div>

Nota: La definición de context="module" es necesaria para poder utilizar la función preloadantes de que el componente sea creado. De este modo podremos obtener los parámetros pasados como props.

Así pues, podemos obtener el slugy pasarselo a la función findPost, que se encargará de encontrar el post a través de su nombre (slug). Así de fácil. Y nos lo guardará en la constante post.

Finalmente sólo nos queda pintar la información.

¡Ya está! Ya tienes un blog con una funcionalidad básica, pero que trabaja con archivos markdown.

Conclusiones

Muchas veces me ha tocado trabajar con equipos de redacción y he peleado mucho con Wordpress u otros sistemas. Es cierto que Wordpress, por ejemplo, es muy conocido y usado por redactores, pero luego vienen problemas como código copiado/pegado y estilos heredados, o bien el que no es amigo/a de las tecnologías y quiere algo básico.

Markdown es texto plano, tal cual. Su sintaxis es realmente básica para poder usarla por cualquier persona. Por tanto, te pueden mandar el archivo .md, lo copias en el directorio contents y eso es todo. Sapper hará el resto por tí. Lo mostrará en el listado de archivos y enlazará a la página de detalle.

¡No necesitarás base de datos! No toda la gente quiere o puede invertir en un hosting con base de datos, y un hosting gratuito les hace el papel. Ésta es una muy buena solución.

Y esto es todo. Espero que te pueda servir 😉