Currently browsing: Javascript

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.

Beware: This post was published 2 years ago and its content may be outdated.
#14448

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

Beware: This post was published 2 years ago and its content 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:

npm install nodemailer

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:

// 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’ );
} );

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:
// 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’ );
} );

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

Beware: This post was published 5 years ago and its content 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.

Ya disponible WP Carousel 1.0

Beware: This post was published 5 years ago and its content may be outdated.

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

Beware: This post was published 5 years ago and its content 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

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

Beware: This post was published 5 years ago and its content 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 →

Ya podemos añadir el botón oficial de Twitter

Beware: This post was published 6 years ago and its content may be outdated.

Estilos del botón de TwitterDesde ayer está disponible el nuevo botón de Twitter, que permite compartir enlaces a través de Twitter. La principal ventaja es que nos permite llevar la cuenta de cuántas veces se ha compartido el enlace, además de que tras enviar el Tweet el usuario verá un lista de usuarios sugeridos para seguir, lista de usuarios que definiremos nosotros a la hora de crear el botón.

No es nada complicado implementar el botón, básicamente tenemos que ir a la página del botón de Twitter (aunque podemos crear nuestros propios botones a través de la API, pero es más complicado) y elegir entre uno de los tres aspectos que nos ofrecen. Podemos especificar el texto del Tweet o dejar que sea el título de la página que se va a compartir, al igual que podemos especificar la URL del enlace o dejar que sea la URL de la página. También podemos definir el idioma del botón. A continuación nos piden que especifiquemos una serie de cuentas que se sugerirán al usuario, la idea es que sean las cuentas de aquellos que contribuyen publicando contenidos en la página web. Finalmente veremos un código HTML, basta con copiarlo y pegarlo en la página que queramos para mostrar el botón.

Por último os dejo el vídeo de presentación del botón.

[youtube]http://www.youtube.com/watch?v=LB0hrJ_ZZzc[/youtube]

jCarousel, el nuevo StepCarousel de WP Carousel 0.6

Beware: This post was published 6 years ago and its content may be outdated.

WP Carousel 0.6Estos días he estado probando diversos scripts para crear carruseles y finalmente ya me he decidido por uno. El ganador ha sido jCarousel, un script de Jan Sorgalla que es realmente interesante. Para comenzar, es mucho más fácil de inicializar con pocas opciones de configuración, además de que permite más opciones que StepCarousel, como por ejemplo el tan pedido modo vertical o la posibilidad de elegir la animación que queramos para el carrusel.

Por otro lado, y en lo referente a fechas de lanzamiento, me temo que tardaré más de lo que esperaba en terminar WP Carousel 0.6, de hecho creo que durante unos cuantos días (sino unas semanas) voy a pararme un poco y pensar detenidamente cómo llevar a cabo las novedades que tenía planeadas, sobretodo el tema de la nueva API de themes y la posible nueva API de Extras.

Por último, la imagen que tenéis a la izquierda es una captura de la UI de WP Carousel 0.6 donde se ven los 3 principales cambios que tenía planeados: poder contraer los elementos del carrusel, mostrar una miniatura de la imagen que se mostrará en el carrusel (sólo páginas y artículos) y darle un nuevo aspecto a los checkboxes para hacerlos más entendibles (he optado por darles un aspecto similar a los botones del iPhone porque así podía mostrar un texto al estar activos y otro diferente al no estarlo).

Ventajas de usar CSS

Beware: This post was published 6 years ago and its content may be outdated.

Código CSSMuchas veces se dice que no siempre el camino fácil es el mejor. Esto se puede aplicar a muchas cosas, y el CSS (Cascading Style Sheets) no iba a ser menos. Seguramente si acabáis de entrar en el mundo del diseño web os habréis sentido tentados a usar tablas (<table>) en lugar de capas (<div>) y a usar el atributo style en lugar de archivos CSS. A continuación voy a exponer mis 10 razones por las cuales es mejor usar CSS que no hacerlo. Read more →