Ho trovato un interessante plugin per jQuery che ci permette di identificare i colori delle immagini, e volendo anche di usarli direttamente nella nostra pagina web: Chameleon.js!
Non è particolarmente difficile da usare, e ci permette di fare parecchie operazioni.
Scaricate la libreria dal sito, e includetela nella pagina insieme a jQuery; avete bisogno anche di una immagine (prendetene una un pò colorata per vedere bene l'effetto).
Non parliamo ovviamente di comandi di sistema, ma di comandi che è possibile dare in una pagina web quando è in modalità designMode.
Per fare questo, useremo la funzione execCommand!
Cosa importante, il contenitore su cui eseguire comandi deve essere editable; e per questo c'è l'apposito attributo HTML contenteditable.
Partendo da una classica lista HTML, vogliamo filtrarla scrivendo dentro ad una input text.
Possiamo farlo in Javascript in maniera abbastanza semplice.
Ho cominciato a studiarmi un pò Mustache per Javascript, caricando i dati tramite AJAX.
Oltre a Mustache.js, avremmo bisogno anche di jQuery; infine useremo un file di template esterno (giusto per fare un esempio più completo.
Mustache.js lo potete scaricare da GitHub (ho dovuto copiarlo in locale, il caricamento remoto non mi funzionava).
Specifichiamo cha parliamo della versione di 2 di Vue.js.
Lo sto cominciando a vedere adesso, quindi non so quante differenze ci siano con la versione 1.
Comunque, vediamo come effettuare richieste AJAX e di conseguenza riepire una tabella.
Socket.io ha la possibilità di inviare messaggi a tutti i client connessi (broadcasting) in maniera veramente easy.
Penso sia più facile visualizzare un esempio; partiamo dal Javascript:
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var clients = 0;
app.get('/', function (req, res) {
res.sendFile('index.html', {root: __dirname});
});
io.on('connection', function (socket) {
clients++;
io.sockets.emit('broadcast', {description: clients + ' clients connected!'});
socket.on('disconnect', function () {
clients--;
io.sockets.emit('broadcast', {description: clients + ' clients connected!'});
});
});
http.listen(3000, function () {
console.log('listening on *:3000');
});Con Socket.io è possibile intercettare / emettere eventi, ed agire di conseguenza.
Ne vediamo tre esempi.
Il primo riguarda l'evento message, che è un evento built-in del framework:
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function (req, res) {
res.sendFile('index.html', {root: __dirname});
});
io.on('connection', function (socket) {
console.log('A user connected');
setTimeout(function () {
socket.send("Messaggio dopo 3 secondi");
}, 3000);
socket.on('disconnect', function () {
console.log('A user disconnected');
});
});
http.listen(3000, function () {
console.log('listening on *:3000');
});Socket.io è un framework per Node.js per la costruzione di applicazioni realtime.
Il suo uso di base non è molto difficile, ed è tutto in linea con il modo di programmare di Node.js.
Oggi vediamo un'introduzione.
Iniziamo con il creare il progetto:
$ mkdir TestSocket
$ cd TestSocket
$ npm initMithril è un framework per Javascript per la costruzione di siti single-page.
E' un framework completo e al contempo molto leggero.
Vediamo qualche esempio, cominciando dal classico Hello world:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mithril</title>
</head>
<body>
<script src="//unpkg.com/mithril/mithril.js"></script>
<script>
var root = document.body;
m.render(root, "Hello world");
</script>
</body>
</html>Le applicazioni create con Electron, arrivano già con un menu "pre-confezionato".
Ovviamente è possibile crearne uno personalizzato.
Vediamo come crearne uno (se volete avere una base su Electron, leggete questo articolo):
const {app, BrowserWindow, Menu, dialog} = require('electron');
const path = require('path');
const url = require('url');
let win;
const template = [
{
label: 'File',
submenu: [
{
label: 'Apri',
click() {
dialog.showOpenDialog({properties:
[
'openFile',
'openDirectory',
'multiSelections'
]}
)
}
}
]
},
{
label: 'Edit',
submenu: [
{role: 'undo'},
{role: 'redo'},
{type: 'separator'},
{role: 'cut'},
{role: 'copy'},
{role: 'paste'},
{role: 'pasteandmatchstyle'},
{role: 'delete'},
{role: 'selectall'}
]
},
{
label: 'View',
submenu: [
{role: 'reload'},
{role: 'forcereload'},
{role: 'toggledevtools'},
{type: 'separator'},
{role: 'resetzoom'},
{role: 'zoomin'},
{role: 'zoomout'},
{type: 'separator'},
{role: 'togglefullscreen'}
]
},
{
role: 'window',
submenu: [
{role: 'minimize'},
{role: 'close'}
]
},
{
role: 'help',
submenu: [
{
label: 'My Blog',
click() {
require('electron').shell.openExternal('https://www.mattepuffo.com')
}
}
]
}
];
if (process.platform === 'darwin') {
template.unshift({
label: app.getName(),
submenu: [
{role: 'about'},
{type: 'separator'},
{role: 'services', submenu: []},
{type: 'separator'},
{role: 'hide'},
{role: 'hideothers'},
{role: 'unhide'},
{type: 'separator'},
{role: 'quit'}
]
});
// Edit menu
template[1].submenu.push(
{type: 'separator'},
{
label: 'Speech',
submenu: [
{role: 'startspeaking'},
{role: 'stopspeaking'}
]
}
);
// Window menu
template[3].submenu = [
{role: 'close'},
{role: 'minimize'},
{role: 'zoom'},
{type: 'separator'},
{role: 'front'}
];
}
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
function createWindow() {
win = new BrowserWindow({width: 800, height: 600});
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}));
// win.webContents.openDevTools();
win.on('closed', () => {
win = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (win === null) {
createWindow();
}
});
Attivate e disattivate il menu per vedere le differenze con quello base.
Ovviamente potete modificarlo a vostro piacimento.
Enjoy!
Creative Commons Attribution-Noncommercial-Share Alike 2.5.
.
';