Uso correcto de los selectores en jQuery

ByLuis

Quien dice en jQuery dice en cualquier otro framework de javascript o lenguaje de programación, el tema es no malgastar recursos. jQuery permite encontrar elementos mediante la clase, por ejemplo:

$('.boton')

Esto es muy cómodo, pero también tiene mal rendimiento, ya que el script debe buscar en todos los elementos HTML y encontrar aquél que tenga class=”boton”. ¿Cómo deberíamos usar los selectores?.:

  • Si el elemento tiene un ID, hay que usar el ID, pero tampoco es plan de añadir ids a todos los elementos.
  • Indica el tipo de elemento, por ejemplo $(‘input.boton’), así limitaremos la búsqueda a los elementos input. Si no solo hay un tipo de elemento, sino varios, los indicaremos todos: $(‘input.boton, a.boton’)
  • Guía a jQuery por la ruta de elementos que puede seguir: $(‘#formulario .boton’)
  • Usa otro elemento para limitar la búsqueda: $(‘#formulario’).find(‘.boton’)

Avoid Bare Class Selectors In jQuery

Similar Posts

Hapi.js + Vue.js ejemplo mínimo de frontend: formulario login

Hapi.js + Vue.js ejemplo mínimo de frontend: formulario login

ByLuis

Esta parte es solo frontend, aún no está configurado para que interactúe con el servidor.

Lo más destacado de este ejemplo es el uso de vue-router, paquete que permite la realización de SPA de forma sencilla. Como la aplicación será gestionada por un único fichero (index.html), es necesario configurar el servidor de webpack para que gestione las URLs que acceden a otras partes de la aplicación para que no devuelva un error 404.

Esto es fácil, tan solo hay que añadir historyApiFallback y ponerlo a true en la configuración del servidor.

devServer: {
	inline: true,
	hot: true,
	port: 9999,
	historyApiFallback: true,
},

Si usas Apache u otro servidor deberás usar una configuración distinta.

Lógicamente habrá que instalar el paquete vue-router.

Vale, ya está todo instalado, ahora solo hace falta configurar vue-router para que acepte distintas URLs y que muestre distintos controladores según sea el caso.

Para ello creamos un fichero router.js que posteriormente añadiremos a nuestra instancia de Vue:

Es fácil de entender, importamos los distintos controladores y configuramos las rutas (‘/‘ y ‘/login‘), a las que les asignaremos el controlador correspondiente.

Para indicar a Vue que vamos a usar vue-router, debemos importarlo en la instancia de la aplicación:

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

Vue.use( VueRouter );

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

El siguiente paso es modificar el controlador principal de la aplicación (App.vue) para que muestre la cabecera (que tendrá su propio controlador) y la vista principal de vue-router (<router-view>):

<template>
	<div>
		<v-header />
		<router-view />
	</div>
</template>

<script>
import header from '@/js/components/layout/Header';

export default {
	name: 'App',
	components: {
		'v-header': header,
	},
};
</script>

Como no soy diseñador, pues usaré Buefy (basado en Bulma) y Material Design icons (no sé por qué le tengo algo de manía a FontAwesome).

Existe un paquete especial para usar Material Design en vue (vue-material-design-icons), que para funcionar con Buefy necesitará usar la fuente de letras de Material Design (@mdi/fonts). Instalamos todo y ya estará todo listo para empezar a diseñar nuestra página.

La cabecera (<v-header>) mostrará el logo, el menú principal y otro secundario para loguearse. No explicaré ni las clases Bulma (que yo casi ni conozco) y cómo se muestra el menú al clickar en el burger icon, ya que estos tutoriales son para llevar yo un diario de cómo desarrollar una app web con Hapi.js y Vue.js.

El controlador de la cabecera nos quedará así:

<template>
	<header>
		<nav
			class="navbar"
			role="navigation"
			aria-label="main navigation"
		>
			<div class="navbar-brand">
				<a
					class="navbar-item"
					href="https://sentidoweb.com"
				>
					<img src="/assets/images/logo.svg">
				</a>

				<a
					role="button"
					class="navbar-burger burger"
					aria-label="menu"
					aria-expanded="false"
					:class="{ 'is-active' : showNav }"
					@click="showNav = !showNav"
				>
					<span aria-hidden="true" />
					<span aria-hidden="true" />
					<span aria-hidden="true" />
				</a>
			</div>

			<div :class="[ { 'is-active' : showNav }, 'navbar-menu' ]">
				<div class="navbar-start">
					<router-link class="navbar-item" to='/'>Home</router-link>
				</div>

				<div class="navbar-end">
					<div class="navbar-item">
						<div class="buttons">
							<router-link class="button is-light" to='/login'>Log in</router-link>
						</div>
					</div>
				</div>
			</div>
		</nav>
	</header>
</template>

<script>
export default {
	data() {
		return {
			showNav: false,
		};
	},
};
</script>

Tan solo mencionar cómo vue-router gestiona la navegación, para ello hace uso de <router-link>:

<router-link class="navbar-item" to='/'>Home</router-link>

El resto del código es simplemente la página principal y el formulario “tonto”.

Hapi.js + Vue.js accediendo a mongodb

Hapi.js + Vue.js accediendo a mongodb

ByLuis

Como ya dije, esta aplicación estará basada en Mongodb, y usaremos mongoose como ODM.

El primer paso es instalar mongoose:

npm i mongoose

Una vez instalado crearemos un controlador que nos permita usar la BD en toda la aplicación Hapi.js. Para ello haremos uso de los decorate del servidor. Los decorations permite extender objectos ofrecidos por Hapi.js, en nuestro caso server y request. Usando un plugin nos conectaremos a mongodb usando mongoose y añadiremos ese objecto con los decorate.

Creamos el fichero /plugins/db.js con el siguiente código:

/**
 * DB controller
 *
 * It uses Mongoose and "stores" it in the server and the request using `decorate`
 */
const mongoose = require( 'mongoose' );

exports.plugin = {
	name: 'db',
	register: async function( server, options ) {
		mongoose.connect( options.url, { useNewUrlParser: true } );
		const db = mongoose.connection;
		// eslint-disable-next-line
		db.on( 'error', console.error.bind( console, 'connection error:' ) );
		db.once( 'open', function() {
			server.decorate( 'server', 'db', mongoose );
			server.decorate( 'request', 'db', mongoose );
			// eslint-disable-next-line
			console.log( 'DB connected' );
		} );
	},
};

Para configurar la conectividad a mongodb tendremos que añadir los datos a la /config/index.js

const config = {
	server: {
		port: 3001,
	},
	website: {
		name: `WP Desk`,
	},
	db: {
		url: 'mongodb://localhost/wpdesk',
	},
};

Y en el manifiest usado por glue, tendremos que añadir el nuevo plugin y las nuevas opciones de conexión:

const manifest = {
	server: {
		port: Config.get( '/server/port' ),
	},
	register: {
		plugins: [
			{
				plugin: './api/home',
			},
			{
				plugin: './plugins/db',
				options: Config.get( '/db' ),
			},
		],
	},
};

Ya tenemos casi todo configurado, ahora vamos a empezar con un ejemplo creando un esquema de moongose que nos permite acceder a colecciones de mongodb.

Lo más común es tener una colección de usuarios, que tendrá los siguientes campos:

  • userName: de tipo String,
  • firstName: de tipo String,
  • lastName: de tipo String,
  • email: de tipo String,
  • role: que referencia a otro elemento de otra colección,
  • isEnabled: de tipo Boolean,
  • password: de tipo String,
  • resetPassword: un objeto representado por:
    • hash: de tipo String,
    • active: de tipo Boolean,

También crearemos un método estático que devuelva todos los elementos de la colección users para realizar pruebas:

/**
 * User model based on Mongoose
 */
const mongoose = require( 'mongoose' );
const Schema = mongoose.Schema;

// Mongoose schema
const userSchema = new mongoose.Schema( {
	userName: String,
	firstName: String,
	lastName: String,
	email: String,
	role: Schema.Types.ObjectId,
	isEnabled: Boolean,
	password: String,
	resetPassword: {
		hash: String,
		active: Boolean,
	},
} );

/**
 * User static model findAll
 *
 * @returns {array}
 */
userSchema.static( 'findAll', async function() {
	const result = await new Promise( ( resolve, reject ) => {
		this.model( 'User' ).find( {} ).exec( ( error, data ) => {
			if ( error ) {
				reject( error );
			}
			resolve( data );
		} );
	} );
	return result;
} );

const User = mongoose.model( 'User', userSchema );

module.exports = User;

Ya está todo, ahora solo modificamos el handler de la ruta home.js para mostrar los valores de findAll:

/**
 * Route handler
 *
 * @param {object} request
 * @param {object} h Hapi object
 * @returns {object}
 */
handler: async( request, h ) => { // eslint-disable-line
	try {
		const result = await User.findAll();
		return result;
	} catch ( error ) {
		return { error: 500 };
	}
},

Puedes bajarte el código aquí

Colección de calendarios Javascript

ByLuis

En muchas aplicaciones web, la utilización de un campo fecha suele ser algo habitual. Es preferible que el usuario no tenga que escribir ninguna fecha, sino que esta se tenga que introducir mediante un control de tipo calendario, evitando así que ocurran ciertos errores y facilitando la labor al usuario. Tened en cuenta que hay diversos formatos DD/MM/YYYY, MM/DD/YYYY, DD-MM-YYYY, …

Espero que esta lista de calendarios realizados mediante Javascript os pueda ser de utilidad:

  • The DHTML / JavaScript Calendar: visible mediante popup o en plano, adecuado para seleccionar fecha y hora, válido para la mayoría de los navegadores, admite CSS, themes, navegación por teclado, muestra los días de los meses adyacentes, traducido a varios idiomas, días especiales resaltados de distinta manera.cal1.png
  • Calendar Popup: se muestra un popup mediante ventana o usando capas, implementado para que tenga el aspecto de Microsoft Outlook, fácil de usar.cal2.png
  • Zapatec Calendar: script comercial, muy completo, admite varios meses, válido para la mayoría de los navegadores, permite varios formatos de fecha y multiple selección de días.cal3.png
  • ScriptCalendar: versión comercial, basado en objetos, fácil de usar y de modificar, válido para la mayoría de los navegadores.cal4.png
  • CalendarXP: versión comercial, muy completo que a parte del calendario pequeño, muestra un calendario grande que admite más detalles.cal5.png
  • Tigra Calendar: el que más me ha gustado, cada campo es seleccionable, se puede adjuntar a un campo existente, meses seleccionables mediante scrolling y muchas cosas más.cal6.png
  • Epoch Calendar: básico, de aspecto atractivo y válido para ser usado en aplicaciones AJAX.cal7.png