|

Efecto fadding como en Flash con jQuery

ByLuis

Un efecto llamativo que se suele hacer con Flash es realizar una transición entre dos imágenes cuando se posiciona sobre ella.
fadding.png
El efecto es sencillo, disponemos de una cabecera (H1) en el que hay un elemento con posicionamiento absoluto y que contiene la imagen final, y un enlace (el que se suele usar para ir al home) que tiene la imagen original mediante estilos.
El proceso es el siguiente: cuando se posiciona el ratón sobre el enlace se crea efecto fadeout y cuando se sale se crea el efecto fadein. Ambos efectos se hacen con tiempo de retardo para dar continuidad.
Todo el código en el post original.
Creating a fading header
Vía / CSS Globe

Similar Posts

Explicación para el ‘obtect literal’ en Javascript

ByLuis

Muchas veces nuestra forma de aprender Javascript (o cualquier otra cosa) es encontrándonos con cosas desconocidas en scripts que estamos viendo e intentando comprender.

Una de estas nuevas posibilidades que nos ofrece Javascript son los “obtect literal”. Que sustituyen la falta de clases en Javascript, y nos facilita el uso de variables globales entre otras cosas.

Alguna vez te habrás encontrado con algo parecido al siguiente código y lo habrás querido comprender, una sencilla explicación nos la ofrece Wait till I come.

miObjeto={
miVariable:'valor',
init:function(){
},
hazAlgo:function(){
}
}

Show love to the object literal

Vía / DOM Scripting Task Force

|

fleXcroll: scroll bars personalizados para tu web

ByLuis

Librería que nos permite usar scrolls personalizados en nuestras páginas web, ya sean verticales u horizontales. Aunque hay que intentar que no aparezcan en nuestra página, en caso de que sea necesario, porque los hay que son totalmente necesarios, quizás se puedan personalizar con este script.
fleXcroll.png
Por lo poco que he visto del código (que no está fácil de seguir porque está ofuscado), veo que fija el tamaño de la capa y con la propiedad overflow muestra los scrolls. Dibuja los scrolls personalizados encima y mediante ellos realiza el scroll de la capa, usando scrollTop y scrollLeft (que creo que antes no funcionaba del todo bien en Opera 8 y en la versión 9 lo han solucionado). Algo que yo no solía hacer y que he visto como lo hace aquí, es capturar el evento selectstart y hacer que devuelva false, para que cuando se haga el drag del scroll no se seleccione la imagen que usamos para personalizar el control.
FleXcroll, Flexible and Accessible Custom Scroll Bars
Vía / aNieto2K

Mejora tus técnicas de programación en Javascript

ByLuis

Ya hemos publicado anteriormente una referencia a un artículo de new earth online y hoy vamos a hablar sobre otro de sus grandes artículos.

En este caso se trata de cómo mejorar nuestra forma de programar con Javascript. Una de las ventajas o inconvenientes de Javascript, según quien lo vea, es que se puede usar en cualquier parte de la página web y que no existe ningún método obligatorio de uso. Pero aún así, hay veces que es mejor seguir ciertos pasos para tener un código mejor y más limpio:

  • Separa el contenido de la funcionalidad, por ejemplo, si vas a añadir un evento a un objeto (onclick) añádelo mediante el evento window.onload usando un archivo js.
  • Una cosa que ya hemos comentado anteriormente es ver cómo funciona tu aplicación web si no está activado Javascript.
  • Realiza código compatible con los distintos navegadores. Desgraciadamente, a veces es necesario detectar el navegador y resolver según el navegador que sea.
  • Declara las variables usando var, si no lo haces puedes tener problemas en las funciones recursivas, por ejemplo si en una función tienes un for con una variable i y dentro de ese for vuelves a llamar a la misma función, al llegar al mismo bucle puedes tener problemas.

Javascript Best Practices

Vía / dzone

Consejos para jQuery

ByLuis

Últimamente hablo mucho de jQuery, y no es para menos, ya que este framework de Javascript es muy bueno y la gente realiza grandes plugins que nos ayudan en nuestros desarrollos. En este caso se trata de varios consejos que nos serán muy útiles a la hora de desarrollar:

  • Carga la librería desde Google Code
  • Almacena en variables los selectors que vayas a usar en varias ocasiones
  • Evita la manipulación DOM lo máximo que puedas, es mejor realizar una llamada “gorda” que varias pequeñas
  • Usa preferiblemente IDs en vez de nombres de clase cuando realices búsquedas
  • Realiza la captura de eventos correctamente, muchas capturas suele ser ineficiente
  • Usa los nombres de clase para guardar el estado de un objeto
  • Incluso mejor que el anterior, usa el método data() para guardar datos en un objeto
  • Aprende a crear tus propios selectores
  • Usa noConflict() para renombrar el objeto jQuery y no tener problemas con otras librerías
  • Aprende a controlar cuando se cargan las imágenes
  • Usa .lenght en un selector para saber si un objeto existe
  • Añade una clase al objeto HTML para modificar elementos por CSS cuando el documento se haya cargado

Improve your jQuery – 25 excellent tips

Vía / Intenta

Hapi.js+Vue.js Crear servidor backend

Hapi.js+Vue.js Crear servidor backend

ByLuis

El primer paso va a ser crear el entorno del servidor, para ello creamos un directorio e inicializamos el proyecto ejecutando:

npm init

Rellenamos todos los datos que nos van pidiendo para configurar el proyecto.

Ya tenemos el proyecto creado, ahora iremos instalando las librerías que necesitamos, en este caso hapi y glue.

npm i @hapi/hapi
npm i @hapi/glue

¿Qué es glue? Glue es un plugin que permite configurar el servidor de forma fácil.

Ahora creamos el fichero index.js e insertamos el siguiente código:

const Glue = require( '@hapi/glue' );

const manifest = {
	server: {
		port: 3001,
	},
};

const options = {
	relativeTo: __dirname,
};

const startServer = async function() {
	try {
		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();

Fácil de entender, ¿no? Creamos el servidor usando Glue con el manifest y las opciones, y arrancamos el servidor.

Listo, accedemos a http://localhost:3001 para comprobar que funciona. Nos devolverá error 404 porque por ahora no hay definidas routes.

¿Cómo se arranca el servidor? podríamos usar directamente node, pero mejor usaremos nodemon. Primero lo instalamos:

npm i --save-dev nodemon

Y ejecutaremos lo siguiente para arrancar el servidor:

npm run start

Puedes obtener el código en GitHub hapi-vue-demo 0.1.0