MSX es un ordenador de hace la tira de años que cuando eramos pequeños nos parecía increíble y que ahora nos parece paleolítico. jsMSX es un emulador realizado en Javascript y Canvas que permite ejecutar juegos para ese sistema.
En sí la aplicación no tiene mucha utilidad, pero es interesante desde el punto de vista de lo que se está consiguiendo mediante Javascript y Canvas.
jsMSX
Via / @lardissone
En este caso voy a explicar cómo añadir una ruta en el backend para gestionar usuarios.
Antes de nada vamos a instalar tres paquetes:
npm i @hapi/joi
npm i @hapi/boom
npm i bcryptTendremos que añadir la ruta al manifest de glee
const manifest = {
server: {
port: Config.get( '/server/port' ),
},
register: {
plugins: [
{
plugin: './api/home',
},
{
plugin: './api/user',
},
{
plugin: './plugins/db',
options: Config.get( '/db' ),
},
],
},
};
Ahora solo falta crear el controlador para las rutas de usuarios, dos en este caso:
Lógicamente aún no hay nada de autenticación, por lo que cualquiera puede crear un usuario realizando una llamada PUT a la URL indicando userName, email y password.
Para comprobar la validez de los datos introducidos, usaremos joi. Usando las opciones de la ruta, indicaremos las reglas que deberá cumplir cada parámetro introducido. Así, para recuperar un usuario, se comprobará que user sea string, alfanumérico y que tenga una longitud de 3 a 20 caracteres:
validate: {
params: {
user: Joi.string().alphanum().min( 3 ).max( 20 ),
},
},Así de fácil.
En el caso de comprobar los datos de entrada de la llamada PUT, en vez de usar params, usaremos payload:
validate: {
payload: {
userName: Joi.string().alphanum().min( 3 ).max( 20 ).required(),
email: Joi.string().email().required(),
password: Joi.string().min( 8 ).required(),
},
},Por último mostrar el código para crear un nuevo usuario. Primero se comprueba si existe un usuario con ese nickname o email. Si es así, se devuelve error usando boom, si no, se genera la contraseña encriptada (aquí no me he molestado mucho en ello, ya lo haré más adelante), y se crea el usuario usando el método create de moongose:
/**
* Route handler
*
* @param {object} request
* @param {object} h Hapi object
* @returns {object}
*/
handler: async( request, h ) => { // eslint-disable-line
try {
// TODO: Add role
const user = await User
.findOne( {
$or: [
{ userName: request.payload.username },
{ email: request.payload.email },
],
} )
.exec();
if ( user ) {
return Boom.badData( 'User exists' );
}
const password = await bcrypt.hash( request.payload.password, Config.get( '/hash/PASSWORD_HASH' ) );
const userData = Object.assign( {}, request.payload, { password } );
const newUser = await User.create( userData );
return newUser ?
{
response: true,
message: 'User created',
userId: newUser.id,
} :
Boom.boomify( {
response: false,
message: 'There was an error during user creation',
}, { statusCode: 400 } );
} catch ( error ) {
return Boom.badImplementation( 'Error', { error } );
}
},Como último apunte, he modificado la configuración para que admita ficheros .env con los datos necesarios.
Como siempre te puedes bajar el código aquí
CodePress permite resaltar el código de diversos lenguajes de programación en nuestras páginas web mediante Javascript. El código se puede modificar en tiempo real y permite entre otras el autocompletado de comillas, paréntesis y parecidos, la inclusión de trozos de código (por ejemplo los paréntesis y llaves en una sentencia if) y shortcuts (por ejemplo mostrar entidades html).
Los lenguajes que interpreta son PHP, Javascript, Java, Perl, SQL, HTML y CSS. Y existen fallos detectados son que los números no cambian de tamaño ya que son imágenes y que el copy/paste falla en algunas ocasiones en Internet Explorer.
CodePress
VÃa / OpenSourceCommunity.org
Dentro de la Web 2.0 se intentan hacer cosas menos web y más tipo aplicación de escritorio. Una de estas cosas es realizar un drag and drop. Esto nos puede ser útil para interactuar con elementos, por ejemplo, tenemos una lista de productos, pinchamos en uno y arrastramos en otro, obteniendo una comparativa de los productos. Bueno, las aplicaciones que le podemos dar depende de nuestras necesidades y de nuestra imaginación. Eso sÃ, la forma de realizarlo es la misma.
En el ejemplo que hemos creado, hacemos que el elemento seleccionado se posicione encima del elemento sobre el que realizamos el drop. También hay que tener en cuenta, que en este caso, el drag&drop que hacemos es pinchando-moviendo-pinchando, no pinchando-moviendo-soltando. Realmente también se podrÃa hacer asÃ, pero como lo hemos hecho válido para texto, si lo hacemos de la manera normal, se podrÃa ir seleccionando el texto según se mueve el ratón.
Read More “Laboratorio: realizar drag and drop de elementos HTML”
Vamos a explicar un pequeño script para mostrar en una capa el mapa del sitio web usando Ajax (en este caso la librerÃa jQuery).
Un efecto parecido lo podemos encontrar en periódicos online para mostrar las diferentes secciones que se pueden visitar. Por ejemplo lo podemos ver en elmundo.es (en la cabecera) y en elpais.com (en el pie de página).
Se trata de que cuando se pasa el ratón sobre el link, se muestra un menú con las secciones del periódico (mapa del sitio en nuestro caso).
Como hemos explicado en otras ocasiones de cómo usar Ajax, esta vez vamos a utilizar la librerÃa jQuery para facilitar la labor. El que sea un mapa del sitio es debido a que de cara a SEO los buscadores indexan más facilmente nuestro sitio.
También hemos pensado en la accesibilidad, para ello el enlace nos lleva a una página que muestra el mapa del sitio. Esta página que deberá ser dinámica, lo que hace es incluir en la parte del HTML donde se muestra la información principal (suponiendo que hay navegación y paneles laterales) el contenido de otro archivo, que es el que tiene el mapa del sitio. Este último archivo es el mismo que mediante Ajax se carga en la capa que se muestra en el mouseover del enlace.
Supongamos que tenemos dentro de nuestra página, el enlace en cuestión y una capa que estará oculta inicialmente mediante CSS:
<p><a href="paginasecciones.php" id="secciones">Secciones</a></p>
<div id="marco"></div>También disponemos de dos páginas, una que muestra el mapa del sitio (secciones.html) y otra que incluye a la primera dentro de su contenido (paginasecciones.php), en cuyo código deberÃa haber la siguiente función:
<?php require('secciones.html'); ?>Ahora tan solo nos falta en el onload del window añadir la funcionalidad necesaria para ocultar la capa, y añadir al enlace el evento onmouseover para cargar el contenido de la capa y mostrarla cuando se pose el ratón en el enlace, y el evento onmouseout para ocultar la capa cuando salgamos del enlace.
window.onload = function() {
var obj = $("div#marco");
obj.hide();
$("a#secciones").mouseover(
function() {
var capa = $("div#marco");
// Para evitar recargar la pagica cada vez que se muestra
if (!capa.attr("cargado")) {
capa.load("secciones.html");
capa.attr({cargado: true});
}
capa.show().slideDown("slow");
} );
$("a#secciones").mouseout(
function() {
var capa = $("div#marco");
capa.slideUp("slow");
} );
}El código es muy sencillo, lo único necesario de explicar para entenderlo es lo siguiente:
Ya hace tiempo hablamos de FUEL, un framework para desarrollar extensiones para Firefox. Ahora ya está disponible en Firefox 3, por lo que podemos ir aprendiendo y haciendo nuestras pruebas.
John Resig nos ofrece una serie de enlaces y ejemplos para empezar con FUEL: