|

Javascript 1.7 en Firefox 2

ByLuis

Una de las nuevas características que nos trae Firefox 2 es el soporte para Javascript 1.7. Entre las novedades que nos encontramos está:

  • Generadores: una forma de ejecutar procesos iterativos, usando yield para “congelar” el valor de una variable y usando next() para realizar la llamada al siguiente estado.
  • Iterators: en vez de usar for…in y for each…in, nos podemos crear un iterador, mediante Iterator(), para realizarlo de una forma más sencilla.
  • Comprensión de arrays: una forma sencilla de inicializar el valor de arrays.
  • Sentencia let: para modificar el alcance de variables para un bloque de código.
  • Devolver varios valores: la posibilidad de que una función devuelva varios valores.

Más información

New in JavaScript 1.7

Javascript 1.7 en Firefox 2

Vía / SitePoint

Similar Posts

Tutoriales para crear plugins en jQuery

ByLuis

Lista de manuales/tutoriales que nos ayudan a realizar plugins para jQuery:

jQuery Plugin Development – 10 Tutorials To Get Started

Vía / CSS Globe

Sincronicar scrolls entre capas con jQuery

ByLuis

Interesante script que permite sincronizar scrolls en diferentes divs para que al mover uno el resto también se muevan

jQuery.fn.synchronizeScroll = function() {
var elements = this;
if (elements.length <= 1) return;
elements.scroll(
function() {
var left = $(this).scrollLeft();
var top = $(this).scrollTop();
elements.each(
function() {
if ($(this).scrollLeft() != left) $(this).scrollLeft(left);
if ($(this).scrollTop() != top) $(this).scrollTop(top);
});
});
}

Synchronizing Scrollbars using JQuery

jMaps: Google Maps mediante jQuery

ByLuis

jMaps es una librería de jQuery que facilita la integración de los mapas de Google Maps en nuestra web, sin necesidad de conocer el API de Google Maps.
Permiote dada una dirección válida podemos obtener su localización y al revés, buscar direcciones hacia y desde cualquier localización, añadir y quitar marcadores, polígonos, capas, publicidad de adsense…
jMaps
Vía / Script & Style

Documentación oficial de prototype: por fin!

ByLuis

prototype_logo.pngPrototype ya dispone de documentación oficial. Aprovechando el lanzamiento de la versión 1.5 de la famosa librería han publicado la documentación de la API, un blog y una sección de tutoriales.
La documentación está realmente bien. Bien organizada y bajo un diseño limpio y claro. Pero se echan de menos dos cosas: la posibilidad de que la gente envíe comentarios y ejemplos como ocurre con la documentación de PHP y un buscador. Respecto al buscador, proporcionan un bookmarklet que cumple esa función pero parece una solución forzada.
La sección de tutoriales y consejos está todavía muy vacía pero es una buena idea el que la hayan implementado. Actualmente ofrecen dos documentos: Introducción a AJAX y Cómo Prototype extiende DOM.
Y el blog, genial. Todavía esta vacío pero es lógico… lo acaban de publicar! Desde luego yo ya me he suscrito a las RSS
Vía / Anieto2k

Hapi.js+Vue.js reorganizar la configuración del servidor

Hapi.js+Vue.js reorganizar la configuración del servidor

ByLuis

Algo bastante importante en un proyecto es la configuración y cómo se gestiona. Para facilitar la gestión usaremos dos librerías dotenv y confidence, la primera permite usar ficheros .env en nuestro entorno de desarrollo para simular variables de entorno. La segunda nos ayudará a recuperar las variables de un objeto permitiendo usar filtros, por ejemplo según de las variables de entorno.

Instalaremos los paquetes:

npm i dotenv
npm i confidence

Confidence necesitará un criterio que nos permitirá obtener distintos resultados según su valor. Imaginemos que tenemos el siguiente criterio:

const criteria = {
	env: 'development',
};

Y estos datos de configuración:

{
	debugLevel: {
		$filter: 'env',
		development: INFO,
		production: ERROR,
	},
}

Si queremos acceder al nivel de debug, al ser env igual a development, obtendíamos INFO.

Vale, ¿y cómo lo usamos en el proyecto? Primero creamos una carpeta config, donde crearemos el fichero index.js que tendrá toda la configuración del servidor:

const Confidence = require( 'confidence' );
const Dotenv = require( 'dotenv' );

Dotenv.config( { silent: true } );

// NODE_ENV is used in package.json for running development or production environment
const criteria = {
	env: process.env.NODE_ENV,
};

const config = {
	port: 3001,
};

const store = new Confidence.Store( config );

exports.get = function( key ) {
	return store.get( key, criteria );
};

exports.meta = function( key ) {
	return store.meta( key, criteria );
};

Dotenv simplemente se usa para obtener de las variables de entorno de servidor el valor de NODE_ENV. Por ahora solo tendremos la variable port, pero ya estará preparado para poder añadir otras variables de configuración posteriormente.

Creamos un store de Confidence y exportaremos los métodos get y meta.

Haremos algo parecido para el manifest necesario para Glue, creando el fichero manifest.js dentro del directorio config:

const Confidence = require( 'confidence' );
const Config = require( './index' );

const criteria = {
	env: process.env.NODE_ENV,
};

const manifest = {
	server: {
		port: Config.get( '/port' ),
	},
};

const store = new Confidence.Store( manifest );

exports.get = function( key ) {
	return store.get( key, criteria );
};

exports.meta = function( key ) {
	return store.meta( key, criteria );
};

Como se puede apreciar fácilmente obtenemos el valor de port de forma bastante simple.

Y por último modificamos el fichero index.js para hacer eso de estos nuevos ficheros:

const Glue = require( '@hapi/glue' );
const Manifest = require( './config/manifest' );

const options = {
	relativeTo: __dirname,
};

const startServer = async function() {
	try {
		const manifest = Manifest.get( '/' );
		const server = await Glue.compose( manifest, options );
		await server.start();
		console.log( 'hapi days!' ); // eslint-disable-line
	} catch ( err ) {
		console.error( err ); // eslint-disable-line
		process.exit( 1 );
	}
};

startServer();

Puedes bajarte el código aquí