TwitterTicker es un plugin para jQuery que nos permite añadir un ticker de los ultimos updates que se hacen en un cuenta de Twitter. Las entradas se irán mostrando una a una en el mismo espacio mediante fading.
Su uso es muy sencillo, se crea una capa contenedora y se ejecuta el siguiente código:
$(document).ready(function() {
$("#twitter").twitterTicker({
userName: "jquery",
numTweets: 5,
delay: 4000,
loaderText: "Loading tweets..."
});
});Vía / Script & Style
El backend ya está algo configurado, por lo que voy a empezar a configurar el frontend.
Instalaré varias librerías:
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
Ahora que están tan de moda las esquinas redondeadas, vemos una librerÃa javascript que nos ofrece esta posibilidad sin tener que usar imágenes.
Tan solo identificando las capas que queremos modificar y ejecutando un pequeño script, redondearemos las esquinas de nuestras capas, ya tengan borde o imagen de fondo, mostrando además efecto anti-aliasing.
Me parece que nos va a facilitar la vida a muchos.
curvyCorners
VÃa / Bitelia
The xcolor plugin is an easy-to-use jQuery extension to manipulate colors in all imaginable combinations. This plugin implements an extensiv color parser and a featureful set of color-manipulation methods. There is also an animate() extension to smooth CSS colors.Another useful method isReadable() completes the whole, by allowing you to check if a …
Una colección interesante de código Javascript, sin tener que usar frameworks de Javascript, teniendo en cuenta, que a mi parecer es conveniente antes saber Javascript y luego aprender un framework.
De los scrips que nos muestran, me gustarÃa destacar:
function addLoadListener(fn){
if(typeof window.addEventListener !='undefined') {
window.addEventListener('load',fn,false);
} else if(typeof document.addEventListener !='undefined') {
document.addEventListener('load',fn,false);
} else if(typeof window.attachEvent !='undefined') {
window.attachEvent('onload',fn);
} else {
var oldfn=window.onload
if(typeof window.onload !='function') {
window.onload=fn;
} else {
window.onload=function(){oldfn();fn();}
}
}
}function addEvent(obj,type,fn){
if(obj.addEventListener) {
obj.addEventListener(type,fn,false);
} else if(obj.attachEvent){
obj["e"+type+fn]=fn;
obj[type+fn]=function(){obj["e"+type+fn](window.event);}
obj.attachEvent("on"+type,obj[type+fn]);
}
}
function removeEvent(obj,type,fn) {
if(obj.removeEventListener) {
obj.removeEventListener(type,fn,false);
else if(obj.detachEvent){
obj.detachEvent("on"+type,obj[type+fn]);
obj[type+fn]=null;
obj["e"+type+fn]=null;
}
}function giT(evt){
var elem;
if (evt.target) {
elem = (evt.target.nodeType == 3) ?
evt.target.parentNode :
evt.target;
} else {
elem = evt.srcElement;
}
return elem;
}El otro día me dio por pensar cuantos updates debería tener Twitter cada segundo viendo el número de actualizaciones que había por lo de #manifiesto. Para intentar calcularlo creé un script que cada 10 minutos escribiera un tweet en una cuenta guarra de Twitter. Guardé los datos en una BD de SQLite para luego trabajar con los datos obtenidos.
Pues los datos que obtuve durante 1 semana es que cada 10 minutos hay una media de 230.000 updates, cada segundo una media de 380 updates, cada hora 1.380.000 updates. Incluso se puede ver una caída en el servicio.
Ejemplo bastante completo que nos explica cómo hacer un botón que nos permite mostrar el código fuente mediante javascript y CSS.