Modern front-end developer experience is nicer than the one we had in 2007 when WordPress came out.
CSS preprocessors help you reduce boilerplate and reuse mixins.
TypeScript minimizes runtime errors with its type-checking and IDE auto-completion.
The latest syntactic sugar from ECMAScript drafts makes your code simpler.
Partial content refresh when files change with HMR enables a seamless experience.
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.
This post was published 4 years ago so it may be outdated.
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).
This post was published 5 years ago so it may be outdated.
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).
This post was published 10 years ago so it may be outdated.
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.
This post was published 10 years ago so it may be outdated.
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” );
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
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.
Note the API key provided to you by Postmark. This API key will be used as username and password when authenticating to Postmark.
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.”
};
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).
This post was published 13 years ago so it may be outdated.
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:
Se ha desactivado el contador que impedía mostrar dos veces un carrusel debido a que algunos usuarios obtenían ese error aún cuando no habían mostrado más de un carrusel. Aún así persiste la limitación de no poder mostrar el mismo carrusel varias veces en la misma página.
A partir de ahora cuando un elemento no tenga extracto ni tenga valor en el campo personalizado que utiliza WP Carousel para las descripciones, se mostrará todo el contenido del elemento.
A partir de ahora los vídeos que se añadan a los contenidos personalizados funcionarán correctamente.
Se ha eliminado algo de código innecesario y se han hecho algunos cambios menores.
Como de costumbre, se puede actualizar desde el Panel de Administración de WordPress o descargar el plugin desde WordPress.org.
This post was published 13 years ago so it may be outdated.
Hará 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 WordPressTheCartPress, 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.
This post was published 13 years ago so it may be outdated.
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:
Bug que no permitía seleccionar el texto de los elementos del carrusel en el Panel de Administración (presente desde la versión 0.5)
Bug que no permitía redimensionar las áreas de texto de los elementos añadidos al carrusel en el Panel de Administración en algunos navegadores (entre ellos Firefox 4)
Diversos bugs menores en la interfaz del Gestor de Backups que aparecían al tener carruseles sin backups
Actualizado el sistema de guardado AJAX para que en caso de error también se puedan guardar backups mediante el procedimiento no-AJAX
Otros bugs menores y ligeros cambios en diversas funciones de WP Carousel
En 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).
Por ú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.
This post was published 13 years ago so it may be outdated.
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 →