Está claro que tutoriales hay muchos, pero no todos son iguales, ni están enfocados para un mismo público. En este caso, yo creo que se trata de tutoriales sencillos pensados para empezar de cero, para quien no tenga ningún conocimiento de Javascript, incluso dirÃa que para quienes el HTML es solo una forma de mostrar texto.
Empieza por lo más básico, luego nos introduce los objetos, funciones, tipos básicos, arrays, formularios y validaciones, trabajar con frames. Lo dicho, para empezar creo que es muy adecuado. JavaScript Cake: Tutorials and Scripts
VÃa / dzone
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
Muy buena librería javascript que nos permite visualizar imágenes como la galería de carátulas que ofrece el iPhone. La transición entre imágenes será mediante una rotación en 3D (un lado es más alto que otro mientras se va colocando en la posición correcta).
Muestra etiquetas y efecto de reflejo, y su uso es muy sencillo: tan solo habría que ejecutar un script similar a este:
jQuery Silver es un buscador de enlaces en el contenido de la página. Su uso es muy sencillo, se abre una ventana mediante shortcuts, y en ella se pueden realizar búsquedas de enlaces. Permite buscar en etiquetas A e INPUT.
Quizás a simple vista no sea muy útil, pero puede venir bien para aplicaciones más elaboradas. jQuery Silver
Vía / DZone
Interesante script que permite sincronizar scrolls en diferentes divs para que al mover uno el resto también se muevan
jQuery.fn.synchronizeScroll = function() {
var elements = this;
if (elements.length <= 1) return;
elements.scroll(
function() {
var left = $(this).scrollLeft();
var top = $(this).scrollTop();
elements.each(
function() {
if ($(this).scrollLeft() != left) $(this).scrollLeft(left);
if ($(this).scrollTop() != top) $(this).scrollTop(top);
});
});
}
Buen truco, o mejor dicho, implementación, para crear un objeto en Javascript en el que las funciones son referenciadas mediante un string. Puede ser muy útil cuando tenemos en un string el nombre de la función que queremos ejecutar, pero no queremos usar eval.
Para ello lo que creamos es un array de funciones, y el array, implementado como una tabla hash (los indices son strings), hace referencia a una función.
var obj = {
funciones : new Array(),
creaMetodo : function(nombre, fn) {
this.funciones[nombre] = fn;
},
ini : function() {
this.creaMetodo("prueba", function(){alert(1);});
}
}
Ahora podremos referenciar a la función ejecutando:
