La mejor manera de presentar contenido en redes sociales es gracias a los thumbnails dinámicos, quedan mucho mejor al compartir contenido!

Cómo crear sliders con CSS Scroll Snap

## Los sliders...¡Ay, qué problema! ##

¿Recordáis hace unos años (aunque hoy en día se siguen utilizando) la cantidad librerías de slider que existían para JavaScript? Las más famosas eran [OwlCarousel](https://owlcarousel2.github.io/OwlCarousel2/) o [Flexslider](http://flexslider.woothemes.com/), pero las hay de más pequeñas como [Simple Slider](https://supersimpleslider.com/). Todas estas librerías ayudaban a estandarizar en todos los navegadores (sí, también en Internet Explorer...) los efectos de *slider* de elementos, que comenzaron a hacerse tan populares a principios de la década del 2010. Podían ser sliders de muchos elementos, o bien de un sólo elemento (los cuales se utilizaban mucho en las pantallas de *Home* de muchas webs para presentar contenido). Y si bien no en todas el rendimiento era el mismo, sí que había un impacto en la WebPerformance, que si bien hace unos cuantos años era mínimo, hoy en día gracias a los cambios en el algoritmo de Google y a la importancia de las [Web Vitals](https://web.dev/vitals/), este impacto se debe tener en cuenta.

A día de hoy, el algoritmo que utiliza Google para valorar cada página indexada en su buscador, pasa por la nota que tenga cada página de los Web Vitals. Los Web Vitals (ya hablaremos con detalle de estas métricas en otro artículo) se tratan de las puntuaciones del LCP (Largest Contentful Paint), FID (First Input Delay) y CLS (Cumulative Layout Shift). Esta última métrica, consiste en los "saltos" que da la página debido a la carga de contenido, y cuantos menos "saltos" realice, mejor. Estos "saltos" pueden venir por contenido cargado via JavaScript, imágenes sin tamaño predefinido, o lo que nos interesa, por los sliders de elementos. Por definición, los sliders de elementos (sobretodo los horizontales) contribuyen a aumentar el valor del CLS, lo cual no es bueno. Además, la mayoría de librerías que se utilizan para conseguir estos *sliders* aportan poco valor en relación a la carga en la WebPerformance. Es decir, hacen lo que deben hacer, pero tienen un impacto negativo demasiado alto en relación a lo que hacen. Como todo en programación, la situación ha mejorado hasta tal punto, que hoy se puede realizar un slider simplemente con HTML y CSS, sin necesidad de JavaScript (lo cual implica no tener impactos negativos en el LCP o FID), consiguiendo así reducir el tamaño de nuestro bundle al no tener que utilizar una librería específica para realizar esta funcionalidad.

## CSS Scroll Snap: our new very best friend ##

La propiedad CSS [Scroll Snap](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type) es ideal para solucionar todo esto de manera nativa. Es una propiedad que, en realidad, es bastante antigua. El primer draft es del año 2013, aunque con una especificación diferente. La especificación actual permite conseguir un slider de elementos HTML, y cuadrar su *width* con las dimensiones de la pantalla, sea en el eje vertical o horizontal. Se pueden conseguir sliders, antes únicamente disponibles con JavaScript, de manera nativa, como el siguiente ejemplo:

<iframe height="265" style="width: 100%;" scrolling="no" title="CSS Scroll Snap - List of Items X" src="https://codepen.io/Xaconi/embed/oNBmMqQ?height=265&theme-id=dark&default-tab=result" frameborder="no" loading="lazy" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/Xaconi/pen/oNBmMqQ'>CSS Scroll Snap - List of Items X</a> by Nicolas Giacconi
  (<a href='https://codepen.io/Xaconi'>@Xaconi</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

Si intentas hacer scroll horizontal, verás que el contenido siempre se ajusta para que cuadre con los items del container. Esto se consigue gracias a la propiedad Scroll Snap. Esta propiedad hace que un contenedor cambie dinámicamente su scroll y que se alinee con el punto de ajuste de los items de su interior. El punto de ajuste, como verás más delante, se trata del punto con el cual queremos que se alinee el scroll del contenedor. Si investigas el contenido del siguiente CodePen verás como se consigue, pero a modo de explicación, aquí te dejo la *chuleta* de la propiedad `scroll-snap-type`, con el primer parámetro:

* `none`: el contenedor no tiene en cuenta ningún punto de ajuste de los items del interior.
* `x`: el contenedor calculará el punto de ajuste de los items de su interior en base al eje x.
* `y`: el contenedor calculará el punto de ajuste de los items de su interior en base al eje y.

Y también el segundo:

* `mandatory`: el contenedor estará obligado a cuadrar su scroll con el punto de ajuste de los items de su interior.
* `proximity`: el contenedor cuadrará su scroll con el punto de ajuste de los items de su interior, aunque no de manera obligatoria.

Según la especificación de la propiedad, la nomenclatura es la siguiente:

```css
scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ];
```

Combinando estos parámetros, podemos crear sliders sencillos, tanto en el eje horizontal como en el vertical. A continuación puedes ver ejemplos de sliders de un único item, en horizontal y en vertical:

<iframe height="265" style="width: 100%;" scrolling="no" title="CSS Scroll Snap - One Item X" src="https://codepen.io/Xaconi/embed/jOydedN?height=265&theme-id=dark&default-tab=result" frameborder="no" loading="lazy" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/Xaconi/pen/jOydedN'>CSS Scroll Snap - One Item X</a> by Nicolas Giacconi
  (<a href='https://codepen.io/Xaconi'>@Xaconi</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

<iframe height="265" style="width: 100%;" scrolling="no" title="CSS Scroll Snap - One Item Y" src="https://codepen.io/Xaconi/embed/YzNBJML?height=265&theme-id=dark&default-tab=result" frameborder="no" loading="lazy" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/Xaconi/pen/YzNBJML'>CSS Scroll Snap - One Item Y</a> by Nicolas Giacconi
  (<a href='https://codepen.io/Xaconi'>@Xaconi</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## Definiendo los puntos de ajuste y la parada ##

A pesar de que lo normal es querer enseñar los items del contenedor al 100%, pueden darse casos en que esto no sea posible. Por ejemplo, si los items ocupan el 75% de espacio de un contenedor, lo ideal es querer enseñar el item centrado y de manera completa, y los dos items adyacentes de manera parcial. Esto es posible con la propiedad `scroll-snap-align`.

* `none`: el comportamiento del scroll no tiene en cuenta ningún punto de ajuste.
* `start`: el comportamiento del scroll tiene en cuenta como punto de ajuste el inicio de cada item.
* `center`: el comportamiento del scroll tiene en cuenta como punto de ajuste el centro de cada item.
* `end`: el comportamiento del scroll tiene en cuenta como punto de ajuste el final de cada item.

Partiendo del ejemplo anteriormente explicado, quedaría así:

<iframe height="265" style="width: 100%;" scrolling="no" title="CSS Scroll Snap - Scroll Snap Align Center" src="https://codepen.io/Xaconi/embed/MWJLzJb?height=265&theme-id=dark&default-tab=result" frameborder="no" loading="lazy" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/Xaconi/pen/MWJLzJb'>CSS Scroll Snap - Scroll Snap Align Center</a> by Nicolas Giacconi
  (<a href='https://codepen.io/Xaconi'>@Xaconi</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

Por último, y enfocándonos más en Mobile, siempre es posible que el usuario haga Scroll con mucha insistencia, haciendo un sólo *swipe* pero intentando llegar al final del slider de un sólo movimiento. Para los sliders en donde no se quiera que esto se aplique, o sea, los sliders donde se quieran enseñar todos sus items y que ninguno se pase por alto, hay que añadir la propiedad `scroll-snap-stop`. Esta propiedad define si el usuario, al hacer scroll, puede saltarse los items del slider.

* `normal`: al hacer scroll, el slider cuadrará su posición teniendo en cuenta la propiedad `scroll-snap-align` del item donde llegue el scroll.
* `always`: al hacer scroll, el slider cuadrará su posición teniendo en cuenta la propiedad `scroll-snap-align` del siguiente item donde empiece el scroll.

Esta propiedad su utiliza mucho para sliders de imágenes, donde se quiere dar importancia a todas y que ninguna se quede sin visualizar. A continuación un ejemplo:

<iframe height="265" style="width: 100%;" scrolling="no" title="CSS Scroll Snap - Scroll Snap Stop" src="https://codepen.io/Xaconi/embed/KKaJrGW?height=265&theme-id=dark&default-tab=result" frameborder="no" loading="lazy"  allowfullscreen="true">
  See the Pen <a href='https://codepen.io/Xaconi/pen/KKaJrGW'>CSS Scroll Snap - Scroll Snap Stop</a> by Nicolas Giacconi
  (<a href='https://codepen.io/Xaconi'>@Xaconi</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## Aplicando la solución... y entendiendo las limitaciones... ##

¡A partir de todo lo explicado, ya podemos montar sliders básicos con cualquier listado de elementos HTML! Pero...esta solución sirve sólo para sliders básicos. Si queremos algo más complejo, sí que hacen falta librerías que permitan añadir puntos de manejo (los típicos bullets) o puntos de control (las típicas flechas de navegación). Pero en este punto hace falta valorar si estos requisitos son estrictamente necesarios, o si bien podemos pasar sin añadir ninguna librería a nuestro bundle, minimizar su tamaño, y así conservar las métricas originales de Web Vitals.

Aparte de esto, hay que entender que esta propiedad puede no funcionar en todos los navegadores. Hay que tener esto en cuenta a pesar el 93% de aceptación que tiene esta propiedad en [CanIUse](https://caniuse.com/?search=scroll-snap-type). 

¡Nada más por ahora! ¡Si te ha gustado el artículo o tienes otras ideas para las imágenes que se utilizan para compartir links en redes sociales, [escríbeme por Twitter](https://twitter.com/Xaconi) o [comparte el artículo](https://twitter.com/intent/tweet?text=Cómo%20crear%20sliders%20con%20CSS%20Scroll%20Snap&url=https://xaconi.dev/como-crear-sliders-con-css-scroll-snap) para que llege a cuanta más gente mejor!

Cómo crear thumbnails dinámicos en NextJS

## ¿Cómo destacar tus posts en redes sociales? ##

Dicen que una imagen vale más que mil palabras...y eso a la hora de compartir contenido en redes sociales es vital! Me pasa mucho cuando navego en Twitter y veo gente compartiendo links. Estos links, tienen imágenes destacadas que pueden aumentar mucho el **CTR** (*Click Through Rate*) y generar así más porcentaje de conversión. Obviamente, la imagen debe ser explicativa del contenido, debe ser de buena calidad, debe adaptarse a las diferentes redes sociales pero...¿qué pasa con los links de posts o contenido que no tienen o no pueden tener imagen destacada? 🤔

Estos links son más complicados de "vender" en redes sociales y la larga, lo que se acaba haciendo es asignarle una imagen más genérica, o bien el logo de la web a la cual pertenece el link. Pero desde hace tiempo me he fijado en un caso concreto de web que ha conseguido resolver esto de una manera más original, consiguiendo que (al menos yo) preste más atención a sus posts compartidos en redes sociales. Y esto no sólo ayuda (y queda bien) en redes sociales, sino también en cualquier *microbrowser* que se utilize. Pero...¿qué es un **microbrowser**?

## Utilizas microbrowsers cada día... pero aún no lo sabes... ##

Los microbrowsers se utilizan todos los días, por casi todo el mundo que tenga un móvil/tablet/PC. Cada vez que se comparte un enlace por una red social como Facebook o Twitter, cuando se comparte un link por plataformas como Slack, Microsoft Teams, o directamente en servicios de mensajería como WhatsApp, Skype o Telegram. Siempre que se comparte un enlace en alguna de estas plataformas, la propia plataforma hace un *fetch* del enlace haciendo una query GET, y obteniendo resultados limitados para enseñarlos de forma más o menos elegante al usuario de la plataforma. Por eso, en vez de un texto solo con todo el link, la plataforma te enseña la imagen destacada que ha obtenido de la query GET al enlace, el *title* y la meta descripción. Esto es lo que hace un microbrowser, y se utilizan para formatear contenido de manera resumida en la plataforma donde se comparta el link.

<img loading="lazy" src="/posts/microbrowsers-post.png" alt="Compartir links con imágenes destacadas VS compartir links sin imágenes destacadas" width="650" height="350" />

A pesar de que se realice una query GET, esto no quiere decir que la plataforma reciba toda la página del link como si fuera una visita más a ese link. Los microbrowsers tienen las siguientes limitaciones:

* El parsing que se hace del HTML es limitado, y se realiza un filtro de algunas etiquetas.
* No tienen en cuenta *cookies*
* No ejecutan JavaScript
* Algunos no se llevan bien con redirecciones 301 o 302
* Hacen constar la visita a los trackers (Google Analytics, Facebook Pixel, etc.) como tráfico directo, no como *referral*. 

En resumen, los microbrowsers hacen fetch de la información básica del link compartido, y esta información es la siguiente:

* Título del link, que puede venir por las etiquetas *title* o bien por las etiquetas de meta datos *og:title*, siempre dentro de la etiqueta *head*.
* Descripción del link, que debe venir por el valor de la etiqueta *og:description*, siempre dentro de la etiqueta *head*.
* Imagen destacada del link, que puede venir por el valor de las etiquetas *og:image*, *og:image:secure_url* o *twitter:image:src*. Para el caso de link compartido en Twitter, también se puede especificar la etiqueta *twitter:card* para que Twitter sepa el formato visual que tendrá el link cuando se comparta. 

En este blog, ya se habían integrado estas etiquetas para que cuando se compartan links en redes sociales, el contenido sea visualmente atractivo. Pero volviendo al principio de este post, ¿qué pasa con los links que no tengan imagen destacada? ¿De qué manera se pueden destacar en redes sociales?

## DEV.to lo ha clavado ##

La web [DEV.to](https://dev.to) es una plataforma de referencia para la publicación de contenido técnico relacionado con el desarrollo y la programación. Es una web que recomiendo mucho ya que ha conseguido una comunidad muy fiel y sobretodo muy pacífica con todo tipo de contenidos (algo complicado hoy en día en internet).

Casi siempre encuentro contenido de esta web compartido en mi timeline de Twitter, y muchas veces me he fijado en que, si bien algunos links disponen de una imagen destacada (subida por el propio autor del post), otras veces la imagen destacada que aparece es una donde sale el título del post, el autor, la fecha de publicación y algunas etiquetas donde salen logos del lenguaje de programación del que se habla en el post. Desde que la vi por primera vez, pensé que se trataba de una solución muy ingeniosa y que conseguia destacar los posts de una manera sencilla y efectiva. Pero...¿cómo lo hacen?

<img loading="lazy" src="/posts/microbrowsers_dev_to.png" alt="Así se comparte el contenido en DEV.to...y mola un montón" width="585" height="540" />

## Generando thumbnails dinámicos con Node y NextJS ##

Inspeccionando el código de DEV.to (tanto con el Developer Tools de Chrome, como su código fuente disponible en [GitHub](https://github.com/forem/forem)) he visto que se utiliza una función específica para generar la imagen del thumbnail. Adaptarlo a un stack JavaScript como el que utiliza este blog no parece un problema. La funcionalidad básica a cumplir es la siguiente: conseguir una URL donde, al hacer una query GET, se nos devuelva una imagen PNG con el título del Post que se quiere compartir, el nombre del blog, mi imagen personal y la fecha de publicación. Para realizar todo esto, decido tirar por la funciones serverless que ofrece NextJS, que se adaptan perfectamente para casos como éste. Tan sólo tengo que crear una función en JavaScript dentro de `/pages/api/` para que la función pase a ser tratada como una función serverless (o Lambda en Amazon Web Services), y que así pueda obtener resultados de devolución diferentes al de los típicos componentes de React o páginas de NextJS. Además, la función deberá tener en cuenta que tendrá como parámetro de entrada, el slug del Post cuya imagen querramos devolver, así sabremos el Post que debemos buscar dentro de la función. El planteamiento básico es el siguiente:

```javascript
export default async (req, res) => {
    const postSlug = req.query.post;
    const post = searchPostBySlug(postSlug);

    const postThumbnail = generateThumbnail(post);
    res.writeHead(200, {
        "Content-Type": "image/png",
        "Content-Length": Buffer.byteLength(screenShotBuffer),
    });
}
```

* Buscamos el post del slug que recibimos
* Generamos el thumbnail que querramos enseñar al compartir el link
* Devolvemos el thumbnail con las cabeceras de imagen correspondientes

¿Easy-peasy no? Pues no corramos tanto. Para que podamos estilar la imagen al compartir el link y que ésta quede con unos estilos similares a DEV.to, hay que tener en cuenta que esta función no trabaja sobre el navegador, sino directamente sobre el servidor, sólo con Node, y que ya podemos olvidarnos de parsear HTML y ya no digamos CSS. Aunque... hay una alternativa. La mejor manera de maquetar y estilar la imagen tal y como la queremos, es con HTML y CSS, por lo tanto, hay que conseguir que desde el servidor y con Node, tengamos una herramienta para parsear e interpretar todo este contenido. Esa harramienta sería básicamente, tener un navegador como Chrome pero directamente incrustado en el servidor, listo para parsear el HTML y CSS que le pasemos. Lo que necesitamos es el paquete ```chrome-aws-lambda``` y la versión *headless* del Chrome, el paquete ```puppeteer-core```. Con estos dos paquetes de NPM podremos pasar contenido HTML y CSS y obtener el resultado como si un navegador fuera... pero directamente des del servidor. Por eso, nuestra función serverless pasaría a ser la siguiente para obtener la imagen que queremos:

```javascript
import fs from 'fs';
import path from 'path';

import { getPostBySlug } from '../../services/postsService';

import chromium from 'chrome-aws-lambda';

export default async (req, res) => {
    const postSlug = req.query.post.replace('.jpg', '');
    const post = await getPostBySlug(postSlug);

    const imageAvatar = fs.readFileSync('./public/xaconi.jpg');
    const base64Image = new Buffer.from(imageAvatar).toString('base64');
    const dataURI = 'data:image/jpeg;base64,' + base64Image;
    const originalDate = new Date(post.attributes.date);
    const formattedDate = `${originalDate.getDate()}/${('0' + (originalDate.getMonth()+1)).slice(-2)}/${originalDate.getFullYear()}`;

    const browser = await chromium.puppeteer.launch({
        args: [...chromium.args, "--hide-scrollbars", "--disable-web-security"],
        defaultViewport: chromium.defaultViewport,
        executablePath: await chromium.executablePath,
        headless: true,
        ignoreHTTPSErrors: true,
    });

    const tags = post.attributes.tags?.map((tag) => {
        return `#${tag}`
    }).join(' | ') || "";

    const page = await browser.newPage();
    page.setViewport({ width: 1128, height: 600 });
    page.setContent(`<html>
        
    </html>`);
    const screenShotBuffer = await page.screenshot();
    res.writeHead(200, {
        "Content-Type": "image/png",
        "Content-Length": Buffer.byteLength(screenShotBuffer),
    })
    res.end(screenShotBuffer);
}
```

Cargamos directamente las imágenes que nos hacen falta dentro de la estructura HTML (la imagen de mi avatar solamente) y cargamos el navegador headless que hará de intérprete para el código HTML y CSS que le pasemos. Ajustamos las variables que vamos a utilizar en la estructura HTML, y se la pasamos al navegador para que la interprete. Al final, el código HTML es lo de menos (y muy personal al final), lo que importa es que lo que le pasemos al navegador headless, se maquete tal y como se haría en un navegador normal. El código HTML que he utilizado yo es el siguiente, pero vosotros podéis maquetar la imagen a compartir como queráis:

```javascript
// ...

page.setContent(`<html>
    <body>
        <div class="social-image-content">
            <h1>
                ${ post.attributes.title }
            </h1>
            <div class="social-image-footer">
                <div class="social-image-footer-left">
                    <img src="${ dataURI }" />
                    <span>Xaconi.dev · ${ formattedDate } </span>
                </div>
                <div class="social-image-footer-right">
                    ${tags}
                </div>
            </div>
        </div>
    </body>
    <style>
        html, body {
            height : 100%;
        }
        body {
            align-items : center;
            display : flex;
            height : 600px;
            justify-content : center;
            margin: 0;
            width : 1128px;
            background-color: #e2e2e2;
        }
        .social-image-content {
            border : 2px solid black;
            border-radius : 5px;
            box-sizing: border-box;
            display : flex;
            flex-direction : column;
            height : calc(100% - 80px);
            margin : 40px;
            padding : 20px;
            width : calc(100% - 80px);
            position: relative;
            background-color: white;
        }
        .social-image-content::after {
            content: ' ';
            position: absolute;
            top: 7px;
            left: 7px;
            width: 100%;
            background-color: black;
            height: 100%;
            z-index: -1;
            border-radius: 5px;
        }
        .social-image-content h1 {
            font-size: 72px;
            margin-top: 90px;
        }
        .social-image-footer {
            display : flex;
            flex-direction : row;
            margin-top : auto;
        }
        .social-image-footer-left {
            align-items: center;
            display: flex;
            flex-direction: row;
            font-size : 28px;
            font-weight : 600;
            justify-content: center;
            line-height: 40px;
        }
        .social-image-footer-left img {
            border : 2px solid black;
            border-radius : 50%;
            height : 40px;
            margin-right : 10px;
            width : 40px;
        }
        .social-image-footer-right {
            align-items: center;
            display: flex;
            flex-direction: row;
            height : 40px;
            justify-content: center;
            margin-left : auto;
            font-size : 28px;
        }
        * {
            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
            Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
            font-weight : 600;
        }
    </style>
</html>`);

// ...
```

Finalmente, tendremos que colocar la llamada a esta función serverless en las etiquetas correspondientes del HTML para que los microbrowsers, al leer la información básica del post, reciban esta imagen.

```html
<html>
    <head>
        
        <meta property="og:image" content="https://xaconi.dev/api/social-image/como-crear-thumbnails-dinamicos-en-next-js.jpg">
        <meta property="og:image:secure_url" content="https://xaconi.dev/api/social-image/como-crear-thumbnails-dinamicos-en-next-js.jpg">
        <meta name="twitter:image:src" content="https://xaconi.dev/api/social-image/como-crear-thumbnails-dinamicos-en-next-js.jpg">
        
        </head>
        <body>
            
        </body>
</html>
```

**¿Pues con esto ya estaríamos no?** Ya tenemos el código de generación del thumbnail en una función serverless, y esta función puede ser llamada haciendo una query GET desde cualquier navegador. Tan sólo hay que llamarla en las etiquetas metas descritas anteriormente para que conste como imagen destacada de los links compartidos en redes sociales. Ajustando esto en el componente que haga el render de la etiqueta head en nuestra web, y ya lo tendremos...no? Pues no, queda por arreglar alguna que otra cosilla...

## Haciendo Deploy, bugs en Vercel... y cuidando el tamaño de nuestro bundle... ##

Éste blog está alojado en [Vercel](https://vercel.com/), que es un servicio de alojamiento para páginas estáticas, que utilicen frameworks como React, NextJS, Angular, Vue, etc. o bien SSG como Gatsby o Jekyll. Es un servicio ideal para blogs como éste ya que ofrece una free-tier muy interesante, además de obtener a cambio Analytics, ayudar con la performance, CDN, y sobretodo... permitir funciones serverless. El equipo de Vercel (antes Zeit) son los creadores del framework NextJS, por lo que si tenéis una aplicación web basada en NextJS, Vercel es un servicio que recomiendo totalmente. 

Pero haciendo deploy de este proyecto, en concreto de la funcionalidad que genera thumbnails dinámicos, me encontré bastantes problemas. Por un lado, Vercel impone un tamaño máximo de 50MB para las funciones serverless. Es mucho, pero teniendo en cuenta que cargamos todo un Chrome (por mucho que sea headless) en una sola función, vamos muy justos. Aunque no nos pasamos, me encontré con lo que parece ser un bug de Vercel. Al hacer Deploy, Vercel me devolvía un mensaje de error avisándome de que la función serverless encargada de generar el thumbnail que hemos implementado, se pasaba del límite de 50MB establecido. A pesar de que revisé que todo el bundle no pasaba de 50MB, el error persistía.

Al final, consultando un hilo de una issue de [GitHub](https://github.com/vercel/vercel/issues/4739), vi que a otra gente le pasaba exactamente lo mismo, a pesar de que no se pasaban del dicho límite. ¿La solución? Pasar la carpeta de /api, desde dentro de /pages a la raíz del proyecto. Esto hacía que las funciones serverless que tuviéramos hasta ese momento, pasasen de ser funciones serverless de NextJS, a funciones serverless normales. Y haciendo este cambio, el Deploy en Vercel era posible. Para probarlo en mi entorno de desarrollo local, tuve que cambiar el comando de ejecución, pasando de `npm run dev` a `vercel dev` del Vercel CLI. Más allá de esto no había ningún otro cambio a realizar en el proyecto, todo seguía igual. Y así conseguí poder hacer Deploy de esta funcionalidad en Vercel.

## Código de ejemplo y demo ##

En el repositorio de este blog podéis encontrar el ejemplo del código final, o bien podéis consultar directamente [el link del thumbnail de mi primer post](https://xaconi.dev/api/social-image/bienvenidos-a-mi-blog.jpg). También os dejo en un CodePen un ejemplo de maquetación editable para que podáis jugar con la maquetación final del thumbnail. La gracia de poder editar la maquetación es que al final, como es parseada e interpretada por un Chrome headless, el resultado final de la imagen es el mismo.

<iframe height="265" style="width: 100%;" scrolling="no" title="Thumbnail dinámico" src="https://codepen.io/Xaconi/embed/preview/xxgEWwW?height=265&theme-id=dark&default-tab=css,result" frameborder="no" loading="lazy">
  See the Pen <a href='https://codepen.io/Xaconi/pen/xxgEWwW'>Thumbnail dinámico</a> by Nicolas Giacconi
  (<a href='https://codepen.io/Xaconi'>@Xaconi</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

Y poco más que decir... Con poco código se pueden conseguir cosas bastante chulas, y en este caso, se nota la diferencia entre compartir un link sin un thumbnail que sirva de imagen destacada, en comparacíón con otros como los de DEV.to, donde siempre se nota el contenido a compartir en redes sociales. Podéis jugar con la maquetación final para que tenga el aspecto que vosotros queráis. Otro caso es el de hacer una captura de pantalla del post del link directamente con el Chrome headless y guardar la imagen para ofrecerla como imagen destacada en redes sociales. Personalmente me gusta más una maquetación única, pero está claro que requiere más trabajo.

¡Nada más por ahora! ¡Si te ha gustado el artículo o tienes otras ideas para las imágenes que se utilizan para compartir links en redes sociales, [escríbeme por Twitter](https://twitter.com/Xaconi) o [comparte el artículo](https://twitter.com/intent/tweet?text=C%C3%B3mo%20crear%20thumbnails%20din%C3%A1micos%20en%20NextJS&url=https://xaconi.dev/como-crear-thumbnails-dinamicos-en-next-js) para que llege a cuanta más gente mejor!

Bienvenida a mi blog y explicación del tech-stack que lleva.

Bienvenidos a mi blog!

## Bienvenido! ##

**Bienvenido/a a mi humilde blog!** Si estás aquí es porque mi continuo Spam en Twitter ha surtido efecto 😅!. Desde hace tiempo que sopeso la idea de crear un blog para obligarme a aprender nuevas cosas acerca del desarrollo web, que es mi profesión. Hoy en día lo que se lleva es todo lo relacionado con el desarrollo FrontEnd (con React dominando el mercado, pero también con Vue, Angular y Svelte) pero más allá de eso, quiero aprender las buenas prácticas en proyectos con estas tecnologías, así como también aspectos que sean más de BackEnd (con microservicios/functions) y también sobre paradigmas de programación y metodologías de trabajo. Quizás intente abarcar demasiado, pero mi objetivo es ese.

Y como me pasaba cuando estaba cursando la carrera, no hay mejor manera de aprender algo que *tener que explicarlo a otra persona*. De esta manera espero expandir mi base de conocimiento hacia tecnologías que no utilizo en mi trabajo del día a día. Espero poder mantener una periodicidad adecuada y quiero empezar siendo realista, con un artículo al més, siempre en castellano en el blog, y una versión en inglés en [Dev.to](https://dev.to/), y ver cómo es el recibimiento.

Con esta entradilla, quería aprovechar también para comentar el primer artículo y como tengo a mano todo lo realizado para poner en marcha este blog, os comento qué hay detrás y cómo pretendo mejorarlo.

Mi intención era poder tener un blog pequeño y lo más simple posible en poco tiempo. Después de valorar opciones de SSG (Static Site Generator) como [Gatsby](https://www.gatsbyjs.com/) o [11ty](https://www.11ty.dev/) me dí cuenta que en realidad no era eso lo que quería, sino que al final si me esforzaba un poco más en desarrollarlo yo mismo me serviría como un campo de pruebas para probar pequeños experimentos con la tecnología FrontEnd que escogiese. No quería que un entorno SSG *out-of-the-box* me limitara en lo que quería hacer a nivel técnico, así que al final me decanté por utilizar [React](https://es.reactjs.org/) con [NextJS](https://nextjs.org/), **EL framework de React**. Da herramientas para simplificar aspectos como SSR (Server Side Rendering), SSG (Static Site Generation) y ISG (Incremental Static Generation) con sólo un par de funciones. Por ejemplo, con el siguiente código tenemos suficiente para que NextJS haga una build de una página y genere un estático para que el TTFB (Time to First Byte) sea increíblemente bajo.

```javascript
export async function getStaticProps() {
    const posts = getAllPosts();
    return {
        props: {
            posts
        },
    }
}
```

En otro artículo explicaré las bondades de NextJS con profundidad, ya que lo merece.

A partir de ése stack y un poco de maquetación (que irá mejorando poco a poco lo prometo 🙏), ya tenía la base para mi blog. El sistema de posts es lo más simple del mundo. Una colección de ficheros Markdown en la carpeta `/posts` de mi repo los cuales tienen el contenido de los articulos, y los meta datos de estos con el formato Front-Matter que utilizan SSG como Hugo, 11y, Jekyll, etc. Los artículos los proceso con el paquete [markdown-to-jsx](https://www.npmjs.com/package/markdown-to-jsx), aunque en el futuro podría cambiar (dependiendo de la cantidad de bloques que tenga que personalizar, que ya tengo pensados unos cuantos). Un poco de CSS, un poco de fixes para a11y (accesibilidad) y SEO, y ya lo tenemos 🎉🎉🎉!

Intentaré dejar repositorios dedicados para cada artículo, ya que con ejemplos de código se ven mejor los conceptos. Pero además, el propio blog es open-source y el código está disponible para todo aquel que quiera revisarlo y modificarlo. De hecho, si encontráis alguna errata en algún artículo, podéis hacer una `Pull Request` en el repo público del blog y así me ayudáis a que el contenido sea de más calidad.

Nada más por ahora, espero seguir escribiendo y que os vaya gustando todo lo que publique! 👋

Mis Posts

Cómo crear sliders con CSS Scroll Snap

Cómo crear thumbnails dinámicos en NextJS

Bienvenidos a mi blog!