Hapi.js + Vue.js avatar

ByLuis

En esta nueva versión se ha añadido el poder subir el avatar, recortando la imagen usando la librería Cropper.js y para ello también se usará Vuex para guardar el avatar y que se actualice en toda la app.

Para subir la imagen se usará el siguiente método.

this.cropper
	.getCroppedCanvas( this.outputOptions )
	.toBlob( blob => {
		new ApiFectch()
			.updateAvatar( blob )
			.then( response => {
				if ( response.response ) {
					success( response.message );
					this.avatar = avatar + '?cache=' + new Date();
					this.$store.commit( `user/${ USER_SET_AVATAR }`, new User().getAvatarURL( userData.username ) + '?cache=' + ( new Date() ) );
				} else {
					error( response.message );
				}
			} );
	} );

Para manejar todo habrá que usar Vuex con módulos, por ejemplo, para el módulo user:

import { USER_SET_AVATAR, USER_SET_USERNAME } from '../mutation-types';

const state = {
	avatar: null,
	username: null,
};

const mutations = {
	/**
	 * Sets avatar
	 *
	 * @param {Object} mutationState Vuex state.
	 * @param {String} avatar Avatar string.
	 */
	[ USER_SET_AVATAR ]( mutationState, avatar ) {
		mutationState.avatar = avatar;
	},

	/**
	 * Sets username
	 *
	 * @param {Object} mutationState Vuex state.
	 * @param {String} username User name.
	 */
	[ USER_SET_USERNAME ]( mutationState, username ) {
		mutationState.username = username;
	},
};

export default {
	namespaced: true,
	state,
	mutations,
};

Aquí está el código

Similar Posts

|

FireQuery

ByLuis

This is a very cool extension for Firebug (add-on for an add-on?) that expands Firebug’s capabilities with jQuery. For instance, a built in jQueryify button, showing attached event handlers in the Content / DOM tree view, and highlighting all elements in a jQuery collection. I don’t think it’s new but I hadn’t seen it until I finally watched Remy S …

Post original

| | |

Recursos sobre idiomas, países y demás

ByLuis

Leyendo una entrada de Korsarios.net sobre la lista de países en SQL, recordé que no hace mucho yo también me tuve que crear una lista parecida, pero esta vez de idiomas. Por eso hemos pensado que no estaría mal ofrecer una serie de recursos sobre idiomas y países, que podamos usar en nuestras páginas web.

Suele ser muy útil cuando queremos mostrar un desplegable con los todos los países que existen. Existe el estándar ISO 3166 para definir los países y sus subdivisiones, codificados mediante dos letras, tres letras o de forma numérica.

También puede ser necesario disponer la lista de países en la base de datos, para eso nada mejor que lo que nos ofrece Korsarios.net, las sentencias sql para la lista de países en español y en inglés.

En otras ocasiones puede que necesitemos ir a distintas páginas según el idioma o país desde dónde se visite la página. El idioma se puede detectar mediante PHP o Javascript. Aunque el idioma no siempre es siempre lo más característico, porque puede tratarse de algo específico del país y no del idioma (por ejemplo, una tienda). Para ello lo mejor es detectar el país según la IP, habiendo dos formas, mediante acceso a BD o sin acceso a BD.

En el caso de que querer la lista de idiomas, tendremos que tener en cuenta el ISO 639, codificado con dos letras y tres letras. Como no, siempre es bueno también tener todos los datos de los idiomas en la BD, en este caso somos nosotros quienes os ponemos en disposición el sql necesario:
Idiomas sql

Facebook sliders mediante Mootools

ByLuis

Facebook pone a disposición de sus usuarios unos sliders para poder controlar el valor de ciertos elementos. Para aquellos que estén interesados en usarlos, podrán echar mano de este ejemplo realizado con Mootools, cuyo uso es muy sencillo.
facebook_sliders.png
Hay que tener en cuenta que no es un script accesible, porque no existe una alternativa estándar al control, ya que el slider es una capa y si no hay javascript o entorno gráfico, el valor no se podría cambiar. El script es bueno y añadirle la parte de accesibilidad no implica mucha complicación.
Facebook Sliders With Mootools and CSS
Vía / CSS Globe

Geolocalización por IP mediante Javascript y JSON

ByLuis

Sencillo script que nos devuelve un JSON con la geolocalización según la IP, usando los datos sacados de iplocationtools.com:

function getLocation(){
script = document.createElement('script')
script.src = 'http://www.nitinh.com/ip_query.php?callback=initialize'
document.body.appendChild(script)
}
function initialize(obj){
document.getElementById('spanLocation').innerHTML = obj['City'] + ', ' + obj['RegionName'] + ', ' + obj['CountryName'];
}

IP Address Geolocation Javascript API : JSON

Vía / korayem

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í