Una cosa que he visto en una web que estoy usando y que me ha gustado bastante es que el alto de los textarea se adapta al contenido para evitar que aparezca el scroll vertical.
En plan rapidito he hecho un script jQuery que realizaría esta función:
$(document).ready(function () {
$('textarea').keypress(function() {
var ta = $(this);
var fontSize = ta.css('font-size').replace('px', '')*1.3; // Le añado un ratio para que sea más eficiente
var taWidth = ta.width();
var taHeight = ta.height();
var content = ta.attr('value').split('\n');
var lines = content.length;
for (var i=0; i<content.length; i++) {
if (content[i].length * fontSize > taWidth) lines += parseInt(content[i].length * fontSize / taWidth);
}
var ratioHeight = taHeight / fontSize;
if (lines * fontSize > taHeight) ta.height((lines * fontSize)+150); // Le sumo 150 para darle un margen y que no se agrande constantemente
});
});
Vamos a empezar con una serie de tutoriales sobre AJAX con ejemplos prácticos, menos este que es el tÃpico “Hola Mundo”. Antes de nada es necesario que conozcáis algo sobre AJAX y nada mejor que la lista que os pasamos hace tiempo: Recursos AJAX para principiantes.
Ya hace tiempo hicimos referencia a una página que nos ofrecÃa enlaces a libros gratuitos sobre informática, y como el saber no ocupa lugar, y seguro que nuestro disco duro tiene “lugar” vacio sufiente, aquà os dejo un enlaces a libros gratuitos organizados por categorÃas:
Últimamente los frameworks de Javascript que aparecen son cada vez más numerosos, y aunque ya en alguna ocasión hemos hablado de esto, no está mal recordar y añadir otros puntos por los que deberÃamos usar estas librerÃas o frameworks.
No reinventes la rueda: no pierdas en tiempo en hacer algo que ya han hecho otros y que además dan buen resultado.
Haz más con menos código: estas librerÃas suelen permitir encadenar código, por lo que con menos código se consigue menos espacio, mejor mantenimiento y menos tiempo de desarrollo.
Ahorra tiempo: por mucho que te guste programar en Javascript, ahorrarás tiempo al realizarlo mediante estas librerÃas.
No eres el mejor programador: por mucho que tu ego te diga que eres bueno, los hay mejores. Además, estas librerÃas suelen estar apoyadas por una comunidad que hace mejorar el trabajo.
Velocidad: estas librerÃas suelen ser muy rápidas a la hora de realizar las acciones. Visita esta página para comprobarlo.
El código se entiende mejor: el código base de Javascript puede ser más complicado de leer y entender.
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: asyncfunction( 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-lineconsole.log( 'DB connected' );
} );
},
};
Para configurar la conectividad a mongodb tendremos que añadir los datos a la /config/index.js
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 schemaconst 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', asyncfunction() {
const result = awaitnewPromise( ( 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:
Para aquellos que aún no lo sepan, Android es un conjunto de software para dispositivos móviles: sistema operativo, middleware y aplicaciones key mobile.
Pues venga, a ponerse a picar que los pisos están muy caros.
Empezar a desarrollar para Android es muy sencillo, tan solo tienes que tener el SDK de Android, tener instalado Eclipse, por ejemplo la versión Classic y añadir un plugin para Eclipse que ofrecen, para lo cual hay que:
En Eclipse ir a Help > Software Updates > Find and Install.
Seleccionar Search for new features to install y pinchar en Next.
Seleccionar New Remote Site.
Añadir esta URL: https://dl-ssl.google.com/android/eclipse/.
Selecionar Android Plugin > Eclipse Integration > Android Development Tools.
Una vez instalado el plugin, debemos indicar la ruta del SDK, para lo cual iremos a Window > Preferences y en la opción de Android modificaremos la ruta del SDK.
Ya lo tenemos todo listo, ahora solo nos falta crear un nuevo proyecto Android (File > New > Project) y modificar el código base que nos ofrece.
En el ejemplo que vamos a hacer tan solo escribiremos una frase en el terminal, para lo cual editaremos el fichero principal del proyecto, en mi caso como he llamado al proyecto prueba el fichero es prueba.java:
package com.sentidoweb;
import android.app.Activity;
import android.widget.TextView;
import android.os.Bundle;
public class prueba extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
TextView tv = new TextView(this);
tv.setText("Sentido Web");
setContentView(tv);
}
}
Existe un plugin para jquery que hace esto mismo, se puede descargar desde http://plugins.jquery.com/project/autogrow
Salu2