Ulzurrun de Asanza i Sàez

Category: JavaScript

Posts about JavaScript and their frameworks (both frontend and backend).

How to write WordPress Themes with SASS, TypeScript, and HMR

Not interested in all the details? I shared a twentytwenty child theme with SASS, TypeScript, and HMR applying all the ideas in this post that you can use as a starting point.

Modern front-end developer experience is nicer than the one we had in 2007 when WordPress came out.

Regular WordPress themes require reloading the entire page when any JavaScript or CSS changes. However, with tools like Vite we can achieve a state-of-the-art developer experience.

In this post I will guide you through all the steps required to add SASS, TypeScript, and HMR support to any WordPress theme.

A Twenty Twenty child theme with SASS stylesheet and HMR, and early preview of what we will achieve by the end of the post.
Read more →

Throttle and debounce visualized

throttle and debounce are two functions widely used in frontend applications but they are confusing and oftentimes used interchangeably even though they are not the same thing. In this article we’ll review both and clarify their differences (or go directly to the interactive demo showcasing the differences).

Read more →

Geoblink Design System

There are days when you know you are working on something amazing. You would love to share it with the world, but cannot. I felt that every single day at the office for months, knowing that someday – eventually – I would be able to share this project. Finally – today – Geoblink’s Design System has been open sourced (GitHub repository).

Geoblink’s Design System is open source.

Read more →

Peach Maps – Searchable Apple Maps on your browser before official API is released

Two days ago I found out that Apple website featured an Apple Maps map to show this year’s WWDC location so I checked out its API and built a quick demo which allows you to search addresses and display them on Apple Maps: Peach Maps ? (source code).

I added a search form which uses OpenStreetMap to get the results. The project only uses static files so it can be easily hosted on any server.


Little tip about version control in Mongoose

Did you ever encountered this message when working with Mongoose?

VersionError: No matching document found.

This is a good explanation about version control in Mongoose, what it is and why it is useful.

If you are inserting content into the database with MongoDB driver and updating it using Mongoose, be careful! __v won’t be set and if any of your document attributes is an array you can get easily in trouble.

Sending emails with NodeJS

Recently I’ve started a small project powered by NodeJS and it needs a way to send transactional emails (emails that are sent because an event is triggered). In my case the event is “clicking «I forgot my password» link”. Moreover, I want my project be easily deployed on a PaaS like Heroku so I prefer not relying on utilities like sendmail, or at least making it easy to move from sendmail to a third-party service like Postmark or Sendgrid.

With this two things in mind I looked for the best way to send mails in NodeJS and I  found something that maybe is not the best but it’s really easy to set up and use: an open source module named Nodemailer.

Using it is as easy as installing it via npm, creating a transport and calling a method.

Installing

Just run:

[code=bash]
npm install nodemailer
[/code]

I strongly recommend adding it to the dependencies in your package.js, but it is not required.

Creating a transport and sending an email

A transport is just a method to send emails. You can create a transport to send emails via Postmark (for those transactional emails, for instance) and a different transport to send emails via Sendgrid (to send newsletters). The transport is in charge to actually send the email.

If we want to send an email via sendmail we just create the appropriate transport:

[code=js]
// Require nodemailer.
var nodemailer = require( ‘nodemailer’ );

// Message we’ll send.
var sendmail_email = {
from: “SENDER-EMAIL-ADDRESS”,
to: “RECEIVER-EMAIL_ADDRESS”,
subject: “Hello world!”,
text: “Sendmail is working.”
};

// Sendmail transport.
var transport_sendmail = nodemailer.createTransport( “sendmail” );

// Send email.
transport_sendmail.sendMail( sendmail_email, function( error, message ) {
if ( error ) console.log( error );
else console.log( ‘Message sent’ );
} );
[/code]

If you try this your email will probably get marked as spam. That’s one of the reasons to rely on a third-party service. Let’s create a transport to send the emails with Postmark.

Moving from sendmail to Postmark

  1. Sign up for a Postmark account. It’s pretty easy but to sign the emails you’ll need a non-public email address (and to verify it you’ll also need access to its DNS records). I’ve used an email address @sumolari.com to test this. Setting up Postmark is really easy – it’s just following the steps that will be shown after signing up.
  2. Note the API key provided to you by Postmark. This API key will be used as username and password when authenticating to Postmark.
  3. Create a transport:

[code=js]
// Require nodemailer.
var nodemailer = require( ‘nodemailer’ );

// Message we’ll send.
var postmark_email = {
from: “SENDER-EMAIL-ADDRESS”,
to: “RECEIVER-EMAIL_ADDRESS”,
subject: “Hello world!”,
text: “Postmark is working.”
};

// Postmark transport.
var transport_postmark = nodemailer.createTransport( “postmark”, {
auth: {
user: “YOUR-API-KEY-HERE”,
pass: “YOUR-API-KEY-HERE”
}
});

// Send email.
transport_postmark.sendMail( postmark_email, function( error, message ) {
if ( error ) console.log( error );
else console.log( ‘Message sent’ );
} );
[/code]

As you can see just by changing the transport we can move from service to service which is really convenient (no one wants to be forced to use a service just because it was the one used at the beginning of project’s life cycle).


WP Carousel 1.0.1

En unos pocos minutos estará disponible la versión 1.0.1 de WP Carousel. Esta versión no incluye ninguna novedad, sino que está centrada en arreglar algunos errores que han afectado a algunos usuarios. Entre los cambios que tiene esta versión se encuentran:

Como de costumbre, se puede actualizar desde el Panel de Administración de WordPress o descargar el plugin desde WordPress.org.


Ya disponible WP Carousel 1.0

WP Carousel 1.0Hará cosa de una par de horas he liberado la documentación de WP Carousel 1.0 y la nueva versión del plugin. Las novedades ya se han podido ir viendo en las Betas, así que no voy a hacer un recorrido completo por el plugin, sino a resumir brevemente las novedades.

Guardado AJAX, nuevos themes por defecto, galería de Addons y preguntas frecuentes

A partir de ahora, las opciones también se guardan inmediatamente sin salir de la página como los elementos del carrusel. Además cada vez que se guarden las opciones o se haga clic en cualquier botón para guardar los cambios, se creará una copia de seguridad, accesible desde el gestor de copias de seguridad. Desde ese mismo gestor se pueden ver por fechas y por carruseles todas las copias de seguridad, además se pueden ver los elementos que había en cada copia y se pueden restaurar con un sólo clic. Como en anteriores versiones, se puede extraer todo el contenido a través del código de exportación e importarlo a través de la página correspondiente.

WP Carousel 1.0 ofrece muchos nuevos themes por defecto, algunos de ellos basados en excelentes diseños creados por profesionales y ofrecidos de forma gratuita en 365psd.com. Además, para promocionar las capacidades de la nueva API de Extras y Themes de WP Carousel 1.0, he creado una galería de Addons, disponible para cualquier usuario. Quien quiera puede enviar su propio Addon para ser revisado y si supera un pequeño test para evitar scripts maliciosos, aparecerá en la galería.

Para facilitar el uso del plugin, la pestaña de ayuda muestra ahora las preguntas más frecuentes, además de las líneas exactas que se deben modificar para cambiar ciertos parámetros internos.

jCarousel, modo vertical y vídeos en el carrusel

En WP Carousel 1.0 se permite usar jCarousel como motor de carruseles. Este script permite, entre otras cosas, la disposición vertical de los carruseles. Los themes por defecto soportan en general esta característica, así como el nuevo script.

Además de imágenes y textos, en WP Carousel 1.0 también se pueden mostrar vídeos, siempre que el theme esté adaptado a esta característica. Mostrar un vídeo es tan fácil como completar un campo personalizado o simplemente dejar que WP Carousel tome el primer vídeo del artículo.

Para desarrolladores

La nueva API de Themes y Extras permite mostrar formularios para configurar el contenido de forma sencilla. Ahora un Extra puede dar la opción de seleccionar el orden de su contenido o de seleccionar elementos a través de filtros más complejos que por un identificador.

Por si fuera poco, se han añadido los Extras grupales, que permiten añadir no sólo un elemento individual, sino un grupo de elementos, como podrían ser artículos de una determinada categoría.

Como Extras de ejemplo se incluye un Extra para mostrar el contenido de otro carrusel del sitio web, uno para mostrar artículos con un determinado post_type o pertenecientes a una taxonomía personalizada específica, así como la integración con el plugin para WordPress TheCartPress, que permite crear una tienda online de forma fácil y rápida.

La documentación está traducida al inglés, y en combinación con los Extras y los Themes incluidos por defecto, permite expandir WP Carousel a un nuevo nivel.

Descarga

El plugin se puede descargar desde WordPress.org o instalar y actualizar directamente desde el panel de administración de WordPress.


WP Carousel 1.0 – Beta 2 disponible

Siguiendo con el desarrollo de WP Carousel, hoy os traigo la segunda Beta de la versión 1.0. En esta versión me he centrado en arreglar fallos sueltos que había en la versión anterior y en añadir un par de características nuevas.

Los bugs resueltos en esta Beta son:

Orden aleatorio en WP Carousel 1.0En cuanto a las nuevas características, la primera novedad es que ahora WP Carousel soporta el orden aleatorio en los artículos extraídos de categorías, tags o autores. Los elementos del carrusel serán ordenados al azar, de modo que puede darse el caso de que un elemento ordenado al azar aparezca en el carrusel antes de un elemento no añadido al azar. El orden aleatorio está pensado para carruseles en los que sólo hay contenido ordenado de forma aleatoria. Esta nueva opción se encuentra en la sección de orden de los elementos, junto con el orden cronológico y el orden cronológico inverso.

También he añadido la posibilidad de seleccionar el tamaño de las miniaturas de las imágenes, para lo cual tan sólo es necesario modificar una línea del archivo wp-carousel.php.

Por lo que respecta a la pestaña de ayuda, he añadido bastante más información a la misma, de modo que muchas de las dudas que surgen al comenzar a usar WP Carousel están resueltas ahí (cosas como la prioridad de las imágenes, de dónde sale el texto del carrusel, qué línea modificar para habilitar el modo de integración externa o cuáles son los campos personalizados que utiliza WP Carousel).

Taxonomías personalizadas en WP Carousel 1.0Por último, he añadido dos nuevos Extras por defecto: Custom Post Type y Custom Taxonomy que permiten mostrar, respectivamente, un artículo con un post type personalizado o artículos pertenecientes a cualquier taxonomía personalizada. La única pega es que en cualquiera de los dos casos es necesario indicar la ID del elemento, aunque tampoco es demasiado molesto teniendo en cuenta que se puede añadir artículos de cualquier taxonomía, sea del tipo que sea.

A aquellos que utilicéis la Beta 1, os recomiendo actualizar a la Beta 2. Aquellos interesados en las nuevas características también pueden actualizar a la Beta 2, aunque guardando siempre una copia de seguridad del contenido anterior, por si las moscas.

Descarga: WP Carousel 1.0 – Beta 2.


Presentando… WP Carousel 1.0

Han pasado más de siete largos meses desde que liberé la última versión de WP Carousel. Casi ocho meses en los que he tenido tiempo más que suficiente para decir por dónde continuar el desarrollo de WP Carousel y cómo hacerlo. Siete meses en los que además de trabajar en otros proyectos he podido continuar el desarrollo de WP Carousel y terminar una nueva versión (al menos la primera beta de una nueva versión). Pero ésta no es una versión cualquiera… es la versión 1.0 de WP Carousel. Han pasado casi ocho meses, pero después de ver las novedades, veréis que ha valido la pena la espera. Read more →