Javascript

DOM Tool: transforma HTML en código DOM

ByLuis December 4, 2006

A la hora de generar nuevo cÃ³digo HTML mediante Javascript, nos enfrentamos a la decisiÃ³n de utilizar innerHTML o DOM. El problema de usar DOM es que nos puede llevar mucho tiempo generar el cÃ³digo Javascript necesario para crear el HTML necesario.
Todo este proceso se puede hacer de forma mucho mÃ¡s sencilla mediante DOM Tool, una aplicaciÃ³n que nos devolverÃ¡ el cÃ³digo Javascript necesario para pasar un HTML que introduciremos mediante un formulario.
Ya no hay excusas para no usar DOM.
DOM Tool
VÃa / dzone

Javascript

Hapi.js+Vue.js Crear servidor backend

ByLuis April 27, 2019June 9, 2019

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

Javascript

Agiliza la carga de tu Javascript

ByLuis February 23, 2007

Una serie de consejos para que la carga de los javacripts no se demoren demasiado y hagan al usuario esperar, algo que no suele gustar, sobre todo ahora que cada vez hay mas efectos y funcionalidades que hacen que las pÃ¡ginas tarden mÃ¡s en cargarse.

Usa la extensiÃ³n para Firefox Web-developer Toolbar o OctaGate SiteTimer para ver que es lo que se estÃ¡ comiendo el ancho de banda.
Comprime tus scripts con Rhino, aunque es recomendable tener una versiÃ³n para pruebas sin comprimir ya que mirar un cÃ³digo comprimido es bastante complicado.
Situa el script al final del documento, asÃ no habrÃ¡ que esperar a que se cargue el script para ver el contenido de la pÃ¡gina.
Carga los scripts cuando realmente los necesites:

function $import(src){
var scriptElem = document.createElement('script');
scriptElem.setAttribute('src',src);
scriptElem.setAttribute('type','text/javascript');
document.getElementsByTagName('head')[0].appendChild(scriptElem);
}
// import with a random query parameter to avoid caching
function $importNoCache(src){
var ms = new Date().getTime().toString();
var seed = "?" + ms;
$import(src + seed);
}

Eso sÃ, retrasa la ejecuciÃ³n de los scripts para que de tiempo a cargarse.

Cachea tus scripts, cÃ¡mbialo a un fichero php y modifica el header para que tenga cachÃ©.

Speed Up Your Javascript Load Time

VÃa / dzone

Javascript

Indicar calidad de la password con Javascript

ByLuis November 12, 2007

Ya hace tiempo comentamos como indicar la calidad de una contraseÃ±a mediante Javascript y esta vez vamos a mostraros otro ejemplo de cÃ³mo hacerlo.

En esta ocasiÃ³n se van a usar dos scripts, uno de ellos estÃ¡ basado en el algoritmo de Javascript Password Strength Meter, el cual mide que la contraseÃ±a tenga mÃ¡s de 8 caracteres, tenga minÃºsculas y mayÃºsculas, algÃºn nÃºmero, use caracteres especiales y use L33t.
En este caso el formulario se realiza con Ext Form, una gran librerÃa, pero no me gusta que el formulario se cree mediante javascript.
Password Meter
VÃa / WebAppers

Javascript

curvyCorners: esquinas redondeadas mediante Javascript

ByLuis September 5, 2006

Ahora que estÃ¡n tan de moda las esquinas redondeadas, vemos una librerÃa javascript que nos ofrece esta posibilidad sin tener que usar imÃ¡genes.
Tan solo identificando las capas que queremos modificar y ejecutando un pequeÃ±o script, redondearemos las esquinas de nuestras capas, ya tengan borde o imagen de fondo, mostrando ademÃ¡s efecto anti-aliasing.

Me parece que nos va a facilitar la vida a muchos.
curvyCorners
VÃa / Bitelia

Javascript

Nitobi UI: elementos UI para javascript

ByLuis February 25, 2009

Impresionante librería para incluir elementos UI en nuestras aplicaciones javascript. Contiene los siguientes elementos:

Grid: tabla con celdas estilo hoja de cálculo
TreeGrid: igual que el anterior pero permite desplegar filas
ComboBox: un combo mas interactivo, como los de auto-sugerencias
TabStrip: gestión de pestañas
Tree: árbol de datos, tipo directorios/ficheros
FishEye: aumentar elementos con efecto “ojo de pez”
Callout: mensajes popup en plan bocadillo
Spotlight: resaltar elementos DOM, muy útil para realizar guías interactivas
Calendar: calendarios
Toolkit: herramientas varias para Ajax

Nitobi UI

Javascript

Texto explicativo en las cajas de los formularios

ByLuis November 23, 2007

Dentro de una serie de artÃculos sobre Javascript he encontrado este script que permite mostrar un texto explicativo en las cajas de texto y que desaparezca cuando el usuario ha escrito algo.

Primeramente necesitamos el HTML que se mostrarÃ¡, se trata de un formulario normal, pero el texto explicativo, mediante estilos, en vez de aparecer debajo como se verÃa sin estilos, al darle posiciÃ³n absoluta, se mostrarÃ¡ sobre la caja de texto.

<style type="text/css">
.helptext {
position: absolute;
color: #999999;
z-index: 10;
font-size: small;
overflow: hidden;
}
</style>
<form action="" method="post">
<input type="text" name="login" value="" onkeyup="UpdateHelpText(this);" onmouseup="UpdateHelpText(this);" />
<div class="helptext" id="label_login" onclick="ChangeFocus(this);">
Enter Login Name
</div>
  
<input type="password" name="password" value="" onkeyup="UpdateHelpText(this);" onmouseup="UpdateHelpText(this);" />
<div class="helptext" id="label_password" onclick="ChangeFocus(this);">
Enter Password
</div>
  
<input type="submit" name="submit" value="Login" onclick="return false;" />
</form>
<script type="text/javascript" language="JavaScript">
UpdateHelpText(document.getElementsByName('login')[0]);
UpdateHelpText(document.getElementsByName('password')[0]);
</script>

Acto seguido, se necesitan las funciones javascript, en este caso son dos, una de ella que pasa el foco a la caja de texto cuando se pincha en el texto explicativo (recordad que estÃ¡ encima de la caja de texto):

function ChangeFocus(el) {
while (el.tagName != 'INPUT')
el = el.previousSibling;
el.focus();
}

Y la otra funciÃ³n que oculta el texto explicativo dependiendo del contenido de la caja de texto:

function UpdateHelpText(el)
{
var label = el;
while (label.tagName != 'DIV')
label = label.nextSibling;
if (el.value == '') {  // Field is empty; show text
label.style.left = getElementAbsPosX(el) + 'px';
label.style.top = (getElementAbsPosY(el) - 7) + 'px';
label.style.visibility = 'visible';
}
else { // Field is not empty; hide text
if (label)
label.style.visibility = 'hidden';
}
}

Advanced JavaScript III

VÃa / AjaxLine

Similar Posts