Select Box Factory es un script que nos permite añadir combos en nuestra página web con un estilo propio y que además añade funcionalidades:
En mi blog personal, me ocurre que cuando quiero mostrar código en un post tengo que modificarlo para que quede bonito, poniéndole estilos, etc… La verdad es que es bastante aburrido y no es algo que me guste mucho hacer, me da mucha pereza.
Supongo que hay más gente que se encuentra en mi situación y me entenderán. La solución es usar unas librerías que me modifiquen el código y lo muestre con colores y tabulado. No me he puesto a buscar en Google, pero habrá ya alguna, de todas formas, siempre está bien saber cómo se podría hacer.
En este caso vamos a explicar como realizar un pequeño parser de código PHP, con tan solo unas funcionalidades: reconoce comentarios, palabras reservadas, funciones, variables y texto entrecomillado, a parte de realizar una mínima tabulación. No reconoce código HTML, ni realiza otras cosas, aunque las ampliaciones son posibles.
Para obtener datos de un HTML, en vez de hacerlo con expresiones regulares, hacerlo mediante DOMDocument:
$oldSetting = libxml_use_internal_errors( true );
libxml_clear_errors();
$html = new DOMDocument();
$html->loadHtmlFile( $url );
$xpath = new DOMXPath( $html );
$links = $xpath->query( '//a' );
foreach ( $links as $link ) {
echo $link->getAttribute( 'href' ), "\n";
}
libxml_clear_errors();
libxml_use_internal_errors( $oldSetting ); Se utiliza libxml_use_internal_errors para evitar HTML mal formados
Me pregunto si para obtener tan solo un dato del HTML (title por ejemplo) es mejor el DOM o las expresiones regulares.
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í
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.
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.
Speed Up Your Javascript Load Time
VÃa / dzone
XRegExp es una ampliación de Javascript para las expresiones regulares, las cuales en Javascript flaquean a la hora de los modificadores.
En este caso, añade los modificadores s y x, lo cual amplÃa el uso que podemos darle a las expresiones regulares. El modificador s permite que el punto “.”, que representa a cualquier carácter, represente también al salto de lÃnea, el cual suele ignorar. El modificar x ignora los espacios en la expresión regular, y asà poder crear unas expresiones regulares más legibles.
XRegExp
VÃa / dzone