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

Hapi.js + Vue.js inicializar el frontend
|

Hapi.js + Vue.js inicializar el frontend

ByLuis

El backend ya está algo configurado, por lo que voy a empezar a configurar el frontend.

Instalaré varias librerías:

  • Vue.js
  • Webpack: configurado para que funcione con HMR
  • Eslint: para que no haya errores Javascript
  • Stylelint: lo mismo para CSS
  • Buefy: una librería que combina Bulma y Vue
  • Sass loader

En vez de ir instalando una a una, usando el siguiente package.json y ejecutando npm i, lo tendremos todo instalado.

{
  "name": "hapi-frontend",
  "version": "1.0.0",
  "description": "Hapi.js frontend",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --mode development --config webpack.config.dev.js",
    "build": "webpack --mode production --config webpack.config.production.js"
  },
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.5.4",
    "babel-eslint": "^10.0.2",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.0.0",
    "eslint": "^6.0.1",
    "eslint-plugin-html": "^6.0.0",
    "eslint-plugin-vue": "^5.2.3",
    "mini-css-extract-plugin": "^0.7.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
    "stylelint": "^10.1.0",
    "stylelint-config-standard": "^18.3.0",
    "stylelint-webpack-plugin": "^0.10.5",
    "vue-hot-reload-api": "^2.3.3",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^15.7.0",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.35.3",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^3.7.2",
    "webpack-merge": "^4.2.1"
  },
  "dependencies": {
    "buefy": "^0.7.10",
    "vue": "^2.6.10"
  }
}

Como se puede ver, existen dos scripts dentro de npm: build que compila el js y extrae los CSS, y dev, que arranca el servidor de webpack habilitando HMR (🎶 ¡ya no puedo vivir sin él! 🎶).

Ambas configuraciones de webpack usan un script en común (webpack.config.common.js):

const webpack = require( 'webpack' );
const path = require( 'path' );
// Carga los ficheros .vue
const VueLoaderPlugin = require( 'vue-loader/lib/plugin' );
// Configura stylelint
const StyleLintPlugin = require( 'stylelint-webpack-plugin' );

// Para obtener un path para los alias
function resolve( dir ) {
	return path.join( __dirname, '.', dir );
}

module.exports = {
	mode: 'production',
	// Fichero inicial del proyecto
	entry: './js/main.js',
	// Fichero final para incluir
	output: {
		filename: 'js/main.js',
		publicPath: '/dist/',
	},
	module: {
		// Reglas para los ficheros
		rules: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				loader: 'babel-loader',
			},
			{
				test: /\.vue$/,
				loader: 'vue-loader',
			},
			{
				test: /\.css$/,
				use: [
					'css-loader',
					'sass-loader',
				],
			},
		],
	},
	plugins: [
		new webpack.HotModuleReplacementPlugin(),
		new VueLoaderPlugin(),
		new StyleLintPlugin( {
			files: [ '**/*.{vue,htm,html,css,sss,less,scss,sass}' ],
		} ),
	],
	resolve: {
		extensions: [ '.js', '.vue', '.json' ],
		alias: {
			'@': resolve( '' ),
		},
	},
};

El frontend se gestiona desde el fichero main.js, que inicializará Vue y añadirá el componente principal:

import Vue from 'vue';
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';

import App from './components/App.vue';

import '@/assets/scss/main.scss';

Vue.use( Buefy );

new Vue( {
	el: '#app',
	components: {
		App,
	},
	render: ( c ) => c( 'app' ),
} );

// accept replacement modules
if ( module.hot ) {
	module.hot.accept();
}

Y ya por último el componente App.vue, que muestra simplemente un poco de HTML

<template>
	<header class="hero">
		<div class="hero-head">
			<h1>{{ title }}</h1>
		</div>
	</header>
</template>

<script>
export default {
	data() {
		return {
			title: "Demo site",
		};
	},
};
</script>

<style lang="scss" scoped>
	div {

		h1 {
			color: #fff;
		}
	}
</style>

Bueno, ha sido un resumen rápido, pero bajándote el código seguro que lo entiendes fácil

Muestra las fechas de forma amigable con jQuery

ByLuis

Interesante script realizado con jQuery que nos permite mostrar las fechas con un formato más cercano al usuario, en vez de mostrar la fecha en sí, mostraría hace cuanto ocurrió esa fecha.

prettyDate("2008-01-28T20:24:17Z") // => "2 hours ago"
prettyDate("2008-01-27T22:24:17Z") // => "Yesterday"
prettyDate("2008-01-26T22:24:17Z") // => "2 days ago"
prettyDate("2008-01-14T22:24:17Z") // => "2 weeks ago"
prettyDate("2007-12-15T22:24:17Z") // => undefined

En el ejemplo vemos que el último caso devuelve undefined, por lo que en esa circunstancia no modificará la fecha.

El autor también nos ofrece un ejemplo para modificar la fecha de nuestros enlaces en los posts. Si tenemos el siguiente enlace:

<a href="/2008/01/blah/57/" title="2008-01-28T20:24:17Z">January 28th, 2008</a>

podríamos acceder a los enlaces y mediante el title podemos modificar la fecha:

$("a").prettyDate();
setInterval(function(){ $("a").prettyDate(); }, 5000);

JavaScript Pretty Date

Paginación mediante Javascript

ByLuis

Sencillo pero efectivo método para paginar contenidos mediante Javascript. Puede ser muy útil cuando el diseño no permite grandes espacios para contenidos.
El funcionamiento es muy sencillo, se ocultan los contenidos y mediante los botones de paginación se van mostrando. La verdad es que no sería necesaria esta librería, porque como ya he dicho el método es muy sencillo y nosotros mismos lo podríamos implementar, incluso mejorar, porque usa la librería cssQuery unicamente para obtener los elementos, mientras que podríamos hacerlo nosotros mismos con un getElementsByTagName, si es que nuestras necesidades no son obtener elementos mediante sus estilos, rel u otras cosas.
Javascript pagination in yer face

| |

Laboratorio: control para direcciones IP

ByLuis

Algo que me suele gustar bastante es que cuando tengo que introducir una dirección IP en un formulario o ventana de Windows, no tenga que estar dándole al tabulador para cambiar de caja de texto. Lo mismo es aplicable cuando se trata de un serial number. Tambien suelo agradecer que hacer un copy/paste, no tenga que ir haciéndolo caja a caja.
control-ip.png

Siempre viene bien hacernos un control para direcciones IP, que permita pegar toda la dirección ip y que se rellenen las cajas correctamente y que al pulsar el punto se mueva de caja, y la verdad es que tampoco es muy difícil de hacer.

Read More “Laboratorio: control para direcciones IP”

| |

Laboratorio: realizar drag and drop de elementos HTML

ByLuis

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.
drag.png
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”