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 .vueconst VueLoaderPlugin = require( 'vue-loader/lib/plugin' );
// Configura stylelintconst StyleLintPlugin = require( 'stylelint-webpack-plugin' );
// Para obtener un path para los aliasfunctionresolve( 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 modulesif ( module.hot ) {
module.hot.accept();
}
Y ya por último el componente App.vue, que muestra simplemente un poco de HTML
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.
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
TableCloth es un javascript no intrusivo que permite cambiar el estilo de las tablas y el comportamiento referente al estilo. Esto quiere decir que le cambia el diseño y que existen estilos asociados a filas y columnas cuando se produce un mouseover y un click.
No es necesario incluir código en las tablas, ya sean id o class, ya que el script detecta automáticamente las tablas y las trata.
Además diferencia filas alternas y deselecciona la fila y la columna elegida cuando se hace click en cualquier parte de la página. Tablecloth
VÃa / WebAppers
HTML5 introduce una característica que puede mejorar sustancialmente las aplicaciones web, los WebSockets, los cuales permite crear un canal de comunicación bi-direccional entre el cliente y el servidor, solucionando los problemas que presenta Ajax o Comet. El ancho de banda ahorrado tiene una proporción de 500:1 y una latencia de 3:1, resultados increíbles que hacen que los de Google anden muy interesandos en esta tecnología (el ahorro en aplicaciones como GMail puede ser considerable).
Por ahora sólo funciona en Google, pero un código de ejemplo sería el siguiente:
if ("WebSocket" in window) {
var ws = new WebSocket("ws://websockets.org:8787"); //this service bounces messages back
ws.onopen = function() {
// Web Socket is connected. You can send data by send() method.
ws.send("message to send");
};
ws.onmessage = function (evt) { var received_msg = evt.data; alert(evt.data); };
ws.onclose = function() { /* websocket is closed.*/alert("WebSocket Closed!"); };
}else{
// the browser doesn't support WebSocket.
alert("Websocket is not supported in your browser");
}
jQuery File Upload Plugin es un plugin para jQuery que usando Flash nos permite subir archivos a nuestro servidor con opciones ampliadas respecto a la ventana de selección de archivos que ofrece el navegador, ya que, entre otras cosas, permite indicar el tipo de archivos que se permiten subir o subir varios archivos de una sola vez.
Yo estoy en contra de este tipo de controles, ya que no es lo que viene por defecto en el navegador, pero siendo realistas, muchos clientes, sobre todo cuando se desarrolla para empresas y su visión de una aplicación web es que haga lo mismo que una aplicación de escritorio, siempre piden que al subir un archivo se pueda indicar el tipo de archivo que se permite subir. jQuery File Upload Plugin
Vía / @benjarriola
Ultimamente están apareciendo muchas librerÃas Javascript que mejoran el trabajo con Javascript, pero no todo son cosas positivas y hay gente que muestra problemas que aparecen con el uso de estas librerÃas:
Escasa documentación: ya sea online u offline, si la librerÃa es increible, pero no hay una forma sencilla de saber cómo usarla, pues nos quedamos como estábamos.
Escaso soporte: estas librerÃas no suelen tener un sistema que ayude a los usuarios con los problemas que se encuentran.
Demasiado grandes: cargar una librerÃa que ocupa mucho, para usar un par de funciones, es mucho lo que se carga y poco lo que se usa, quizás repercute negativamente en rendimiento o en ancho de banda.
Demasiado especÃficas: sobre todo al trabajo de otra gente, por lo que a nosotros nos puede venir parcialmente bien.
Diferentes en estructura: diferentes a la forma en que lo hacemos nosotros, en vez de usar estructuras estándares a las que podemos estar todos acostumbrados.
No hay guÃas paso a paso: para poder entender las funcionalidades de las liberÃas con ejemplos.
