Javascript on Melabit

Swift contro Python, ovvero mele contro pere

Mon, 03 Oct 2022 06:00:00 +0000

– Fonte: Martina Leuderalbert su Unsplash.

Alle elementari la maestra mi aveva insegnato a non sommare le mele con le pere, cioè a non mettere insieme (o paragonare) cose e fatti molto diversi fra loro. Non ha quindi senso sommare 3 litri di acqua con 5 chilogrammi di farina o chiedersi se 40 metri sono più o meglio di 20 secondi.

Quello che diceva la mia maestra lo dicono, sono sicuro, le maestre di tutto il mondo, ma c’è sempre qualcuno assente a queste lezioni.

Il Golia della programmazione moderna

Uno di questi è stato di sicuro Ari Joury che, nonostante il suo dottorato in fisica delle particelle, non si è fatto scrupoli a pubblicare su Medium questo Swift was poised to replace Python. Then it tanked.

Cosa dice l’articolo? Che nel mondo del machine learning i linguaggi di programmazione più usati sono Matlab, R, Julia e soprattutto Python. Quest’ultimo, nato originariamente per sviluppare dei piccoli script senza troppe pretese, è diventato oggi un vero “Golia della programmazione moderna”, tanto da essere usato estensivamente da aziende come Dropbox, Instagram e Pinterest per i loro servizi online.

Grazie alla disponibilità di librerie come TensorFlow o PyTorch (nonché, aggiungo io, di librerie di base come Pandas o NumPy), Python è diventato anche il linguaggio di elezione di chi si occupa di machine learning e di analisi dei dati.

La crescita di Python sembra bloccata da un paio di anni, ma la sua enorme diffusione lo farà rimanere comunque un attore centrale anche nel prossimo futuro.

Entra in scena Swift

Fin qui tutto vero e condivisibile. Magari si potrebbe eccepire qualcosina sull’importanza di R nell’ambito dell’analisi dei dati, ma non voglio essere puntiglioso.

Il guaio è che se uno si limita a scrivere queste cose non se lo fila nessuno, chi vorrà mai leggere l’ennesimo articolo generico sulle virtù di Python per il machine learning (e non) o su quale linguaggio è destinato a soppiantarlo?¹ Ci vuole un colpo d’ala.

Per fortuna c’è sempre Apple che, come il nero, va bene su tutto e, soprattutto, garantisce sempre un bel po’ di click. E allora perché non mettere in mezzo Swift?

Swift è un linguaggio di programmazione sviluppato da Apple con l’obiettivo specifico di sostituire Objective-C come linguaggio di elezione per lo sviluppo delle applicazioni per iOS e per macOS. Swift è facile da imparare e la sua sintassi leggibile ricalca quella di Python, è vero, così come quella di Julia e di tanti altri linguaggi di programmazione moderni.²

Swift però non ha mai preteso di essere, come sostiene il nostro Ari, il nuovo “Re della Programmazione”. Ad Apple non interessa posizionare Swift come uno strumento di programmazione general purpose, le interessa solo che venga usato per programmare le applicazioni per i suoi sistemi operativi. Del resto, il fatto che manchi di una versione per Windows taglia fuori una fetta così importante di potenziali utenti da rendere impossibile a priori una pretesa tanto assurda.

A maggior ragione Swift non ha mai preteso di essere il nuovo strumento principe per il machine learning, come il buon Ari sotto sotto ci vuole far intendere. È vero che Google ha provato a supportare Swift all’interno di TensorFlow (di cui Google è il principale sviluppatore), ma questo esperimento, come succede con tanti altri prodotti dell’azienda di Mountain View, è stato interrotto nel 2021. È ragionevole pensare, infatti, che chi sviluppa in Swift preferisce usare gli strumenti per il machine learning integrati in macOS/iOS piuttosto che prodotti di terze parti.

Io sono più popolare di te

Ma la cosa più sconcertante è pretendere di confrontare la popolarità (o meno) dei linguaggi di programmazione utilizzando una metrica fasulla come la percentuale di domande poste ogni mese su StackOverflow relativamente ad uno o ad un altro linguaggio. In base a questa percentuale, la popolarità di Python è cresciuta costantemente fino alla fine del 2020, per poi stabilizzarsi al 16% del totale delle domande su StackOverflow, mentre quella di Swift dopo aver raggiunto un massimo del 3% è in declino e ora si aggira nei dintorni dell'1.5%.

Perché è una metrica fasulla? Perché finché siamo sui grandi numeri e confrontiamo la popolarità di Python con quella di JavaScript può anche avere senso basarsi sul numero di domande poste su StackOverflow per valutarne la diffusione.

Ma se buttiamo nel calderone anche la terna HTML, CSS e PHP, che sono ancora oggi tre strumenti fondamentali per chi fa sviluppo web, troviamo che questi ultimi sono in costante declino, senza però che la decadenza (su StackOverflow) di PHP venga compensata da un incremento corrispondente nell’interesse verso JavaScript.

Anche Wordpress, che piaccia o non piaccia sta dietro il 40% dei siti web, secondo la metrica di StackOverflow sarebbe in calo. Idem per MySQL.

E allora la spiegazione può essere un’altra: più che la diffusione, le domande su StackOverflow ci fanno vedere la complessità del linguaggio e la qualità della sua documentazione: HTML, CSS e PHP (o Wordpress e MySQL) sono prodotti ben assestati, per loro esistono ottime guide sul web che ne spiegano diffusamente i segreti. Di conseguenza non è necessario cercare risposte più o meno occasionali su StackOverflow, e comunque quelle che ci sono già bastano ed avanzano.

Python e JavaScript, al contrario, hanno una sintassi di base piuttosto semplice ma per essere usati al meglio hanno bisogno di un gran numero di librerie aggiuntive, che sono spesso più complesse del linguaggio base e che vengono aggiornate ed espanse di continuo. La documentazione relativa non tiene sempre il passo dello sviluppo, per cui il modo migliore per imparare ad usare al meglio le centinaia e centinaia di API disponibili è quello di rivolgersi a qualche esperto su StackOverflow, spingendo così in alto la popolarità dei due linguaggi.³

Secondo la logica basata sul numero di domande su StackOverflow anche C e C++, i linguaggi usati per la programmazione di sistema (e non) su Linux e Windows, sarebbero in declino, e lo stesso succede a concetti di base come algoritmo, architettura, classe o database. Ma sono in declino perché c’è davvero poco interesse o solo perché anche per loro c’è abbondanza di documentazione di ottimo livello, senza doversi ridurre a porre sempre delle nuove domande su StackOverflow?

Nel mio piccolo lo faccio anch'io: quando programmo in R uso pochissimo StackOverflow, perché posso usare l'ottimo help in linea di RStudio e perché la documentazione che accompagna le librerie aggiuntive di R è centralizzata sul [CRAN](https://cran.r-project.org/) (_The Comprehensive R Archive Network_) ed è di altissima qualità. E quando tutto questo non basta, posso trovare decine di siti e di blog che spiegano benissimo gli aspetti più ostici del linguaggio. Quando passo a Python (un linguaggio che, sia chiaro, mi piace parecchio), StackOverflow diventa quasi una necessità, perché la frammentazione e la mancanza di sistema di gestione centralizzata delle librerie di Python rendono molto più complicato trovare documentazione aggiornata di qualità.

Decaduto o semplice?

Swift è un linguaggio semplice con una ottima documentazione ufficiale, un eccellente strumento di apprendimento del linguaggio (e non solo) come Swift Playgrounds e un numero relativemente ridotto di librerie aggiuntive, c’è davvero bisogno di passare un sacco di tempo su StackOverflow per usarlo al meglio?

Guardando il grafico relativo al numero di domande relative a Swift ci si accorge che i picchi di interesse corrispondono alle date di presentazione della versione 1.0 (giugno 2014) e al rilascio delle versioni 2.0 (settembre 2015), 3.0 (settembre 2016) e 5.0 (marzo 2019) e, come è naturale, dopo ogni presentazione l’interesse tende a decadere, proprio perché per usare il linguaggio c’è davvero poco da chiedere su StackOverflow.

A supporto di questa tesi c’è il risultato di questa semplice query SQL, con la quale ho provato a calcolare il numero di domande poste su StackOverflow ogni anno. Di SQL ne so pochissimo per cui dovete prendere i risultati con le pinze, ma sembra che il numero di domande su StackOverflow sia in progressiva diminuzione, da un massimo di 2.2 milioni di domande nel 2016 a 1.6 milioni nel 2021.

Una volta raggiunta una base di conoscenza sufficientemente ampia non ha molto senso porre sempre delle nuove domande (che su StackOverflow sono fortemente scoraggiate) ma ci si può limitare ad utilizzare il materiale già esistente. Questo almeno per le tecnologie più stabili, come possono essere HTML, CCS, PHP, Wordpress, MySQL… oppure Swift. Quando invece abbiamo a che fare con strumenti in rapidissima evoluzione, come Python o JavaScript, StackOverflow diventa davvero il modo migliore per imparare.

Conclusioni

C’è bisogno di dilungarsi ancora? Non credo, dico solo che basarsi su ipotesi fantasiose o metriche poco affidabili per ipotizzare scenari catastrofici per Swift (o, al contrario, scenari entusiasmanti per Julia⁴) mi pare francamente insensato.

– Fonte: Dilbert di Scott Adams.

Capo: Non si possono confrontare mele e arance.

Dilbert: È chiaramente sbagliato, perché li hai appena confrontati e dichiarati diversi.

Wally: Mele e arance sono entrambi alimenti che crescono sugli alberi. Sarebbe assolutamente valido confrontarli dal punto di vista nutrizionale.

Dilbert: Ho notato che molte delle cose che escono dalla tua bocca non hanno senso.

Capo: Parli come mia moglie.

Wally: Non puoi paragonare tua moglie al tuo subordinato. Sono mele e arance.

Capo: Cosa sta succedendo qui?

Wally: Non lo so, ma non lo paragonerei a lavoro.

Ari sembra avere le idee un po’ confuse sul futuro di Python, dato che su Medium ha anche pubblicato Why Python is not the programming language of the future, oppure Bye-bye Python. Hello Julia! e perfino Why TensorFlow for Python is dying a slow death. ↩︎
E non è un caso, perché alla base di tutti questi linguaggi c’è sempre il buon vecchio BASIC, il primo linguaggio di programmazione davvero per tutti, che è stato il linguaggio di base dei computer personali degli anni ‘80 su cui si sono fatti le ossa tutti i grandi nomi dell’informatica di quegli anni. ↩︎
Le sole domande sulla libreria pandas di Python (una libreria fondamentale per chi usa Python per l’analisi dei dati) assommano al 3% del totale, le principali librerie per il machine learning (TensorFlow, Keras, PyTorch, scikit-learn, OpenCV, NLTK) fanno un altro 2%, mentre quelle su Django e Flask (le principali librerie Python per lo sviluppo di applicazioni per il web) sono quasi al 2.5% del totale generale. Chiaramente queste domande vengono anche conteggiate come domande relative a Python. ↩︎
Perché sì, l’interesse per Julia sembra essere in aumento su StackOverflow, ma parliamo di non più dello 0.16% (1/10 dei valori di Swift) e anche in questo caso i picchi corrispondono al rilascio delle varie versioni del linguaggio. ↩︎

Viaggetto

Sat, 07 Oct 2017 06:00:00 +0000

Per fortuna internet non è solo sciocchezze o vere e proprie truffe, ogni tanto si possono trovare vere e proprie oasi di bellezza e di maestria tecnica.

Se avete qualche minuto libero godetevi questo viaggetto in treno, sono sicuro che non ve ne pentirete. Funziona su tutti i browser che supportano WebGL, anche quelli per tablet e smartphone.

Una linea di codice

Thu, 07 Sep 2017 18:00:00 +0000

A proposito di programmazione, cosa si può fare con una linea di codice? A volte si può fare moltissimo, come dimostra questa singola linea di codice JavaScript.

[code language=“javascript” htmlscript=true]


[/code]

Sono appena 128 caratteri, meno di un tweet, che però riescono a produrre questa bella immagine dinamica.

Ma come fa?

Alex Kras ha accettato la sfida e ha scritto un bellissimo articolo, Reverse Engineering One Line of JavaScript, in cui descrive il suo viaggio nei meandri di un codice solo apparentemente semplice.

È una splendida dimostrazione di capacità tecnica, sia di chi ha scritto il codice originale ma anche di chi si è dato tanto da fare per decodificarlo e per descriverne il funzionamento fin nei minimi particolari.

Capire tutti i dettagli dell’articolo non è facile, ma non credo che sia la cosa più importante. Ciò che importa è l’idea generale, è provare a mettersi nella testa di un programmatore per capire il suo modo di ragionare, è rendersi conto di quello che si può fare con una conoscenza più o meno approfondita di un linguaggio di programmazione (e delle basi matematiche che gli stanno dietro).

Il nostro codice non sarà mai così elegante e compatto? Che importa, l’importante è iniziare a provarci. Tanto si può solo migliorare.

Per la cronaca, questo è il codice finale dopo la decodifica.

[code language=“javascript” ] const DELAY = 64; // approximately 15 frames per second 15 frames per second * 64 seconds = 960 frames var n = 1; var p = document.getElementById(“p”); // var draw = “for(n+=7,i=delay,P=‘p.\n’;i-=1/delay;P+=P[i%2?(i%2*j-j+n/delay^j)&1:2])j=delay/i;p.innerHTML=P”;

/**
 * Draws a picture
 * 128 chars by 32 chars = total 4096 chars
 */
var draw = function() {
    var i = DELAY; // 64
    var P ='p.\n'; // First line, reference for chars to use
    var j;
 
    n += 7;
 
    while (i > 0) {
 
        j = DELAY / i;
        i -= 1 / DELAY;
 
        let index;
        let iIsOdd = (i % 2 != 0);
 
        if (iIsOdd) {
            let magic = ((i % 2 * j - j + n / DELAY) ^ j); // < ------------------
            let magicIsOdd = (magic % 2 != 0); // &1
            if (magicIsOdd) { // &1
                index = 1;
            } else {
                index = 0;
            }
        } else {
            index = 2;
        }
 
        switch (index) { // P += P[index];
            case 0:
                P += "p"; // aka P[0]
                break;
            case 1:
                P += "."; // aka P[1]
                break;
            case 2:
                P += "\n"; // aka P[2]
        }
    }
    //Update HTML
    p.innerHTML = P;
};
 
setInterval(draw, 64);

[/code]

Incredibile, no?

I più volonterosi possono anche provare a giocare con il codice, modificandolo a loro piacimento. Si può ad esempio cambiare colore e dimensioni del testo, inserendo queste righe nella sezione CSS (e poi andando a leggere qui per capire perché).

#p {
    color: blue;
    font-size: 10px;
}

Oppure modificare le le strighe "p" e ".", rispettivamente alle linee 39 e 42 del codice JavaScript, per cambiare i caratteri mostrati sullo schermo. Ancora più interessante è variare il valore di DELAY nella prima riga del codice JavaScript e vedere l’effetto che fa.

Sembra solo un giochetto un po’ stupido, ma si impara a programmare (anche) così.

Emulare online: sempre più in Alto

Sat, 20 May 2017 06:00:00 +0000

Non c’è solo il Macintosh. Il web è pieno di emulatori di tutti i tipi, con i quali si possono usare vecchie macchine e vecchi sistemi operativi direttamente nel browser, senza installare nulla sul proprio computer.

L’idea iniziale per questo post era quella di proporre un lista ragionata dei migliori emulatori online, ma poi ho deciso di lasciar perdere, ci sono già delle liste ben fatte ed è inutile ripetersi. La mia preferita è una lista molto dettagliata di emulatori in JavaScript, che è di sicuro il modo più moderno ed efficace (anche se magari non il più efficiente) per realizzare un emulatore online, oggi.

Interessanti anche le liste contenute in Roundup: Retro Computers in Your Browser e in A Big List of Browser-Based Emulators and Ports of Classic Games, che però contengono parecchi link ormai defunti, oltre che un po’ di emulatori che richiedono Flash, Java o qualche strano plugin per funzionare.

Senza dimenticare la Software Library dell’Internet Archive, dove si trova un po’ di tutto, anzi il vero problema è proprio quello di riuscire ad orientarsi fra la tantissima roba disponibile.

Se proprio devo consigliare un paio di cose da provare, sceglierei Apple //jse e PCjs Machines, facili e comodi da usare e con tantissimo software di buona qualità disponibile.

Ma fin qui, diciamolo, non c’è niente di particolarmente eccitante, in fondo l’Apple II si poteva emulare tranquillamente anche in un widget di Dashboard!

Perché non provare invece qualcosa di più interessante, una macchina ormai quasi dimenticata, ma senza la quale non ci sarebbero i computer come li conosciamo (e li usiamo) oggi?

Parlo di sua maestà, l’Alto, sviluppato al Palo Alto Research Center (PARC) della Xerox nei primi anni ‘70. Il primo computer personale, ma anche il primo computer che conteneva, anche se in modo ancora acerbo, gli elementi di una interfaccia utente grafica, parecchi anni prima del Lisa e del Macintosh.

Dell’Alto non è stato venduto nemmeno un esemplare – tutti gli esemplari prodotti sono stati usati all’interno della Xerox oppure regalati(!) a università e centri di ricerca USA, oltre che alla Casa Bianca e alla Camera dei Rappresentanti – ma rimane lo stesso una pietra miliare nella storia dell’informatica.

Sembra incredibile ma esiste un emulatore online dell’Alto, lento, anzi lentissimo, e soggetto a continui crash, ma comunque molto utile per conoscere un oggetto affascinante (ed imprescindibile) della storia della tecnologia.

Per usare l’emulatore bisogna cliccare prima su questo link e poi sul disco di boot (Boot Disk), rappresentato dall’icona del disco rigido con il pallino verde, che compare nella finestra di testo a sinistra del monitor dell’Alto.

Una volta completato l’avvio del sistema comparirà la scritta “Xerox Alto Executive/12”, con alcuni dati relativi al sistema operativo in esecuzione, e poi il prompt dei comandi (l’equivalente del Terminale del Mac), rappresentato da un >. Spostando il mouse sull’immagine del monitor si può finalmente provare ad usare l’Alto (preferibilmente scegliendo il tasto di zoom, in modo da ingrandire l’immagine del monitor su tutta la finestra del browser).

Un comando fondamentale per interagire con l’Alto è il ?, che mostra il contenuto del disco montato nell’emulatore. L’Alto usa però la tastiera americana, per inserire il ? con tastiera italiana dobbiamo premere contemporaneamente SHIFT e -.

Comparirà (lentamente!) una lista dei file presenti sul disco, quasi tutti giochi, insieme ad una freccia tremolante che rappresenta il puntatore del mouse, la prima indicazione che stiamo usando un sistema con una interfaccia grafica.

I programmi eseguibili hanno il suffisso .Run (più o meno come il suffisso .exe che indica i programmi eseguibili su Windows). Per lanciare un programma basta scrivere una parte univoca del nome (il sistema operativo non distingue fra maiuscole e minuscole), anche senza estensione, e premere Invio.

Per cominciare, consiglio di lanciare il programma Ti55.Run, un emulatore (dentro l’emulatore!) di una calcolatrice Texas Instruments TI-55, utilizzabile completamente con il mouse. Per uscire dall’emulatore basta schiacciare il tasto (virtuale) OFF che “spegne” la calcolatrice.

Non male anche il gioco del labirinto, maze, nel quale si usa il mouse per tracciare il percorso che congiunge il quadratino chiaro lampeggiante di partenza a quello nero di arrivo. E dove, come in un labirinto reale, per tornare sui propri passi bisogna proprio rifare il percorso al contrario. Oppure pinball, l’intramontabile flipper della nostra (o almeno della mia) giovinezza, che però è così lento da essere praticamente inutilizzabile, trek, un gioco spaziale che ha bisogno di un manuale di 20 pagine per poter essere usato, o turkey, un gioco del 15 grafico in cui le tessere vengono mosse con il mouse.

Se qualcosa va storto (e qualcosa va spesso storto), la cosa più semplice è ricaricare la finestra del browser e far ripartire l’emulatore da zero.

Purtroppo l’emulatore online dell’Alto contiene praticamente solo giochi. Per provare altre applicazioni fondamentali dell’Alto, come Bravo, il primo editor grafico di testi, o Draw, un programma di grafica vettoriale, ci vuole qualcosa di più.

Appuntamento alla prossima volta.

Bibliografia

Per saperne di più sull’Alto, consiglio fortemente la lettura di questo articolo di BYTE, pubblicato nel numero di settembre 1981. BYTE è stata per tutti gli anni ‘80 e i primi anni ‘90 la rivista fondamentale nel campo del personal computing (e non solo), con un livello di dettaglio e di approfondimento degli articoli che sarebbe assolutamente impensabile oggi.

Molto interessante anche l’introduzione alla storia del restauro di un vecchio Alto appartenuto ad Alan Kay (il padre della programmazione ad oggetti e del Dynabook, il computer educativo ideale da cui discendono i notebook e i tablet di oggi).

Emulare il Macintosh online

Sun, 23 Apr 2017 06:00:00 +0000

Il retrocomputing – il recupero, il restauro e la conservazione di vecchi computer e del relativo software e documentazione, un tema a metà fra l’archeologia informatica e la semplice nostalgia (ma personalmente propendo per la prima alternativa) – è un argomento piuttosto caldo in questi ultimi giorni.

Ne ho parlato pochi giorni fa a proposito del sito Storie di Apple, che cerca di recuperare la storia, nota e semisconosciuta, dell’azienda di Cupertino.

Ne hanno parlato in tanti in questa settimana,¹ dopo che il benemerito Internet Archive ha annunciato, proprio il giorno di Pasqua, l’attivazione di un emulatore online del primo Macintosh, il computer che ha cambiato la storia della tecnologia. La collezione attuale di sistemi operativi, applicazioni e giochi per i primi Macintosh è piuttosto ristretta, ma è probabile che cresca rapidamente.

L’emulatore (si tratta di PCE.js, la versione in JavaScript dell’emulatore PCE originale) può essere usato direttamente nel browser, indipendentemente dal sistema operativo sottostante e senza installare niente sul proprio computer. Una cosa che trovo sempre straordinaria, un segno chiarissimo della potenza dei computer attuali (emulare non è mai uno scherzo) e della trasformazione sempre più spinta del browser web in un vero e proprio sistema operativo.

Ma l’annuncio pasquale contiene una seconda parte trascurata da quasi tutti i commentatori, che però a me fa molto più gola. Dove viene detto che l’Internet Archive contiene ormai anche un’ampia collezione di Macworld Magazine – compreso il primissimo numero con Steve Jobs e il Macintosh 128K in copertina – e di libri relativi al Macintosh (questi sono solo quelli pubblicati nel 1984 o nel 1985). Tutti disponibili anche in pdf, per poter essere scaricati e sfogliati più comodamente sul proprio computer o tablet.²

Come questo numero di Macworld, che non potrebbe essere stato meno profetico.

Oppure questa Chilton’s guide to Macintosh repair and maintenance che, molto prima di iFixit, insegnava come mettere le mani nel proprio (costoso!) Macintosh.

Ma non è finita qui.

Fra questi, Ian Paul, The Internet Archive brings Apple’s classic Macintosh to your browser su Macworld, Andrew Cunningham, Classic Mac OS and dozens of apps can now be run in a browser window su ArsTechnica, Tim Hardwick, Internet Archive Offers In-Browser Emulation of Classic Macintosh Software, Circa 1984-1989, Charley Locke, Aw Yiss: You Can Now Play Old-School Mac Games in Your Browser su Wired. In italiano, a parte un breve articolo su Applicando, Il primo Mac del 1984 si può emulare online e il commento stimolante come sempre del mio amico Lux, Segni del tempo, non ho trovato altro. ↩︎
Perché, se è vero che il browser sta diventando un sistema operativo, ci sono cose che secondo me funzionano ancora molto meglio sul desktop (anche scollegati dalla rete), e la lettura dei pdf è fra quelle. ↩︎

Regolarizziamo

Mon, 20 Feb 2017 18:00:00 +0000

Le espressioni regolari sono uno degli argomenti più ostici che ci si può trovare ad affrontare quando si usa un computer. Purtroppo sono anche una delle cose più utili, in particolare quando si cerca qualcosa che è sepolto nel disco rigido o quando si devono estrarre informazioni da grosse moli di dati.

Ma prima di tutto, cos’è una espressione regolare, o come si dice normalmente in gergo informatico, una regexp?

Definizione. Una espressione regolare è una sequenza di caratteri che definisce uno schema di ricerca (search pattern) di informazioni strutturate in modo più o meno preciso.

Ecco, la chiave di tutto sta proprio nella espressione “più o meno preciso”. Cercare una parola precisa in un file è piuttosto facile, molto meno facile è cercare tutte le possibili variazioni della stessa parola, oppure intere classi di parole.

Arrivato a questo punto dovrei fare qualche esempio più o meno complicato di uso delle espressioni regolari per risolvere qualche problema pratico, come scambiare il nome con il cognome in una lista di indirizzi, aggiungere http://, o meglio https://, a tutti gli indirizzi web presenti in un file, cercare i numeri degli ordini di acquisto di una azienda e trasformarli in un formato standardizzato.

Ma non mi sogno nemmeno di farlo, scappereste quasi tutti a gambe levate. Perché le espressioni regolari si apprezzano solo quando servono veramente, quando permettono di risparmiare tempo e fatica facendo svolgere al computer, invece che a noi, le noiose operazioni ripetitive per le quali è così portato.

Imparare ad usare le espressioni regolari

E allora come si può imparare ad usare queste benedette espressioni regolari?

Ci sono decine di libri e di tutorial che ne trattano, ne ho elencati alcuni nella bibliografia. Devo però ammettere che i libri e la maggior parte dei tutorial non li ho mai non dico letti ma nemmeno guardati, mi annoierebbero troppo con le loro sequenze di regole e regolette, terra-terra e quasi inutili o così acrobatiche da essere incomprensibili.

Molto meglio i siti web che insegnano ad usare in pratica le espressioni regolari: inserisci da una parte l’espressione regolare e dall’altra il testo in cui cercare e l’applicazione mette in evidenza tutte le sequenze di caratteri che soddisfano l’espressione inserita (le occorrenze), con una spiegazione più o meno dettagliata di quello che succede.

Fra tutti i siti di questo tipo, il mio preferito è regex101, veloce e con spiegazioni chiare e prive di inutili dettagli. Al secondo posto Debuggex, ottimo ma più complesso da usare, soprattutto le prime volte. Non male anche RegExr, che però interpreta le espressioni regolari inserite utilizzando il motore JavaScript del browser, che non è sempre compatibile al 100% con le espressioni regolari di altri linguaggi.

Ci sporchiamo le mani?

Tutto qui? Per ora si, questa voleva essere solo una piccolissima introduzione al mondo oggettivamente complicato delle espressioni regolari. Più o meno come mettere il dito nell’acqua per vedere se è fredda.

Se l’argomento interessa, si può andare avanti con l’esplorazione, magari partendo da problemi pratici non troppo banali (affrontabili con tecniche meno complesse), ma nemmeno tanto complicati da risultare ostici.

Che ne dite? Aspetto il vostro feedback nei commenti.

Bibliografia

Libri

Fitzgerald, Introducing Regular Expressions (O’Reilly 2012).
Goyvaerts, Regular Expressions Cookbook, 2a edizione (O’Reilly 2012).
López, Romero, Mastering Python Regular Expressions (Packt 2014).

Tutorial

RegexOne: learn regular expressions with simple, interactive exercises.
Regular-Expressions.info: the premier website about regular expressions.
Regex Tutorial: from regex 101 to advanced regex.
Guida alla sintassi delle espressioni regolari (con esempi).
Guida alle espressioni regolari (regex).
Using Grep & Regular Expressions to Search for Text Patterns in Linux.
Sculpting text with regex, grep, sed, awk, emacs and vim.

Servizi online

regex101: an online regex tester and debugger.
Debuggex, an online visual regex tester.
RegExr: learn, build, & test regex.

Non trovo le parole

Fri, 04 Dec 2015 06:00:00 +0000

Non trovo le parole per descrivere al meglio questo sito (e la tecnologia che c’è dietro).

Le animazioni sono realistiche, lo scroll velocissimo e naturale, tutto succede nel browser senza pause o impuntature. Perfino la musica, anche se ripetitiva, è affascinante.

Altro che Flash, qui si dimostra al meglio la potenza e la flessibilità dell’HTML5. Questo è il futuro.

Programmare l'inutilità

Mon, 23 Nov 2015 06:00:00 +0000

Come tanti ricevo ogni giorno una o più email che mi propongono di visitare questo o quel sito. Non è sempre tempo perso, spesso si trovano delle vere e proprie gemme.

Altre volte però scopro siti o applicazioni la cui utilità è perlomeno dubbia.

img2css

La palma del programma più inutile degli ultimi mesi vorrei assegnarla a img2css, una applicazione web scritta in JavaScript che converte una immagine bitmap (in formato png, jpg o simili) in un file CSS, che può qundi essere inserito direttamente in una pagina web.

In teoria l’idea è ottima, perché permette di integrare un’immagine in una pagina web senza bisogno di collegamenti a file esterni, ma nella pratica fallisce miseramente.

Anche con immagini semplicissime il file CSS generato diventa di dimensioni abnormi, ed è molto più pesante da gestire e da trasmettere in rete rispetto all’immagine originale.

Proviamo img2css

Proviamo ad usare img2css con una immagine semplicissima composta da un quadrato di 10x10 pixel con bordo nero e interno bianco. L’immagine si può creare da Terminale tramite convert, uno dei comandi più potenti di ImageMagick, in grado non solo (come dice il nome) di convertire le immagini da un formato grafico all’altro, ma anche di generare delle immagini ex-novo in praticamente qualunque formato conosciuto.

Il comando

	$ convert -size 10x10 xc:white -fill white \
	-stroke black -draw "rectangle 0,0 9,9" square_10x10.png

produce l’immagine , che occupa esattamente 127 byte (per maggiore chiarezza l’immagine è visualizzata al doppio della dimensione originale).

Convertendo l’immagine con img2css, il codice CSS corrispondente

<div style="height:1px;width:1px;box-shadow:#000 0 0, #000 1px 0, #000 2px 0, #000 3px 0, #000 4px 0, #000 5px 0, #000 6px 0, #000 7px 0, #000 8px 0, #000 9px 0, #000 0 1px, #000 1px 1px, #000 2px 1px, #000 3px 1px, #000 4px 1px, #000 5px 1px, #000 6px 1px, #000 7px 1px, #000 8px 1px, #000 9px 1px, #000 0 2px, #000 1px 2px, #fff 2px 2px, #fff 3px 2px, #fff 4px 2px, #fff 5px 2px, #fff 6px 2px, #fff 7px 2px, #000 8px 2px, #000 9px 2px, #000 0 3px, #000 1px 3px, #fff 2px 3px, #fff 3px 3px, #fff 4px 3px, #fff 5px 3px, #fff 6px 3px, #fff 7px 3px, #000 8px 3px, #000 9px 3px, #000 0 4px, #000 1px 4px, #fff 2px 4px, #fff 3px 4px, #fff 4px 4px, #fff 5px 4px, #fff 6px 4px, #fff 7px 4px, #000 8px 4px, #000 9px 4px, #000 0 5px, #000 1px 5px, #fff 2px 5px, #fff 3px 5px, #fff 4px 5px, #fff 5px 5px, #fff 6px 5px, #fff 7px 5px, #000 8px 5px, #000 9px 5px, #000 0 6px, #000 1px 6px, #fff 2px 6px, #fff 3px 6px, #fff 4px 6px, #fff 5px 6px, #fff 6px 6px, #fff 7px 6px, #000 8px 6px, #000 9px 6px, #000 0 7px, #000 1px 7px, #fff 2px 7px, #fff 3px 7px, #fff 4px 7px, #fff 5px 7px, #fff 6px 7px, #fff 7px 7px, #000 8px 7px, #000 9px 7px, #000 0 8px, #000 1px 8px, #000 2px 8px, #000 3px 8px, #000 4px 8px, #000 5px 8px, #000 6px 8px, #000 7px 8px, #000 8px 8px, #000 9px 8px, #000 0 9px, #000 1px 9px, #000 2px 9px, #000 3px 9px, #000 4px 9px, #000 5px 9px, #000 6px 9px, #000 7px 9px, #000 8px 9px, #000 9px 9px;"></div>

occupa 1259 byte, circa 10 volte in più del file png di partenza. Le cose peggiorano rapidamente se si usano immagini più complesse. Questa immagine da 20x20 pixel , composta da alcuni rettangoli concentrici colorati e generata tramite

$ convert -size 20x20 xc:white -fill white \
-stroke black  -draw "rectangle 0,0 19,19" \
-stroke red    -draw "rectangle 2,2 17,17" \
-stroke green  -draw "rectangle 4,4 15,15" \
-stroke blue   -draw "rectangle 6,6 13,13" \
-stroke yellow -draw "rectangle 8,8 11,11" concentric_color.png

occupa solo 481 byte in formato png, che diventano ben 6.491 byte quando di converte l’immagine in CSS con img2css.

Con immagini reali a colori, o peggio ancora fotografie (ad esempio questa), le immagini CSS possono diventare anche 150-200 volte più grandi di quella originale, mettendo in ginocchio il browser (e il computer!) durante il processo di conversione o quando si copia il file CSS ottenuto in una pagina web.

Provare per credere, ma se poi il Mac si pianta non prendetevela con me.

Dentro il codice

Il programma img2css è molto semplice ed è composto poche centinaia di linee di codice JavaScript. Ma è perfino troppo lungo per quello che fa.

In fondo si tratta solo di determinare il codice RGB di ogni pixel dell’immagine, convertirlo in formato esadecimale ed associarlo alle coordinate orizzonantali e verticali del pixel considerato.

Ogni pixel viene quindi convertito nella sequenza #AAA Xpx Ypx, dove #AAA indica il colore in esadecimale (la stringa può essere composta da 3 o 6 numeri a seconda del colore RGB determinato) e Xpx Ypx indicano le coordinate orizzonantali e verticali del pixel.

Tutto questo si può fare tranquillamente da Terminale, con poche righe di codice ben piazzate.

img2css da Terminale

Per convertire un file grafico in una sequenza di colori RGB si può usare ancora convert di ImageMagick,

$ convert square_10x10.png -compress none square_10x10.ppm

ottenendo un file in formato ppm, in cui ciascun pixel dell’immagine è rappresentato da tre numeri interi decimali, corrispondenti ai tre colori RGB del pixel stesso (il formato grafico ppm è molto inefficiente, ma è utilissimo dal punto di vista didattico perché mostra chiaramente come è fatto un file grafico).

Le sequenze di tre numeri decimali sono disposte per righe orizzontali a partire dalla quarta riga del file. Le prime tre righe contengono rispettivamente il numero magico che definisce il tipo di file, le dimensioni dell’immagine in pixel e il valore massimo del colore RGB del file.

La rappresentazione in formato ppm del quadrato di 10x10 pixel con bordo nero e interno bianco mostrato sopra è

P3
10 10
255
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 
0 0 0 0 0 0 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 0 0 0 0 0 0 
0 0 0 0 0 0 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 0 0 0 0 0 0 
0 0 0 0 0 0 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 0 0 0 0 0 0 
0 0 0 0 0 0 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 0 0 0 0 0 0 
0 0 0 0 0 0 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 0 0 0 0 0 0 
0 0 0 0 0 0 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 0 0 0 0 0 0 
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Sequenze di dati come questa possono essere facilmente analizzate e trasformate tramite awk, uno dei tanti potenti strumenti specifici disponibili nei sistemi operativi basati su Unix.

Basta uno script awk di poche righe per convertire le informazioni RGB decimali contenute nel file ppm in formato esadecimale

#!/usr/bin/awk -f

/^255/  { while (getline == 1)
          { for (i = 1; i <= NF; i += 3)
              printf "0x%02X%02X%02X ", $i, $(i+1), $(i+2);
              printf "\n"
          }
        }

Eseguendo lo script img2css.awk sul file ppm precedente si ottiene

$ ./img2css.awk square_10x10.ppm 
0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 
0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 
0x000000 0x000000 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0x000000 0x000000 
0x000000 0x000000 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0x000000 0x000000 
0x000000 0x000000 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0x000000 0x000000 
0x000000 0x000000 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0x000000 0x000000 
0x000000 0x000000 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0x000000 0x000000 
0x000000 0x000000 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0x000000 0x000000 
0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 
0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000

Per riprodurre l’output prodotto da img2css, è sufficiente modificare leggermente il modo in cui lo script stampa i valori dei colori RGB, aggiungere la stampa della le coordinate di ciascun pixel e inserire le parti iniziali e finali del tag <div>, ottenendo

#!/usr/bin/awk -f

BEGIN   { out = sprintf("<div></div>");
          print out;
        }

che produce un output equivalente a quello di img2css

$ ./img2css_v2.awk square_10x10.ppm
<div style="height:1px;width:1px;box-shadow:#000000 0 0px, #000000 1px 0px, #000000 2px 0px, #000000 3px 0px, #000000 4px 0px, #000000 5px 0px, #000000 6px 0px, #000000 7px 0px, #000000 8px 0px, #000000 9px 0px, #000000 0 1px, #000000 1px 1px, #000000 2px 1px, #000000 3px 1px, #000000 4px 1px, #000000 5px 1px, #000000 6px 1px, #000000 7px 1px, #000000 8px 1px, #000000 9px 1px, #000000 0 2px, #000000 1px 2px, #FFFFFF 2px 2px, #FFFFFF 3px 2px, #FFFFFF 4px 2px, #FFFFFF 5px 2px, #FFFFFF 6px 2px, #FFFFFF 7px 2px, #000000 8px 2px, #000000 9px 2px, #000000 0 3px, #000000 1px 3px, #FFFFFF 2px 3px, #FFFFFF 3px 3px, #FFFFFF 4px 3px, #FFFFFF 5px 3px, #FFFFFF 6px 3px, #FFFFFF 7px 3px, #000000 8px 3px, #000000 9px 3px, #000000 0 4px, #000000 1px 4px, #FFFFFF 2px 4px, #FFFFFF 3px 4px, #FFFFFF 4px 4px, #FFFFFF 5px 4px, #FFFFFF 6px 4px, #FFFFFF 7px 4px, #000000 8px 4px, #000000 9px 4px, #000000 0 5px, #000000 1px 5px, #FFFFFF 2px 5px, #FFFFFF 3px 5px, #FFFFFF 4px 5px, #FFFFFF 5px 5px, #FFFFFF 6px 5px, #FFFFFF 7px 5px, #000000 8px 5px, #000000 9px 5px, #000000 0 6px, #000000 1px 6px, #FFFFFF 2px 6px, #FFFFFF 3px 6px, #FFFFFF 4px 6px, #FFFFFF 5px 6px, #FFFFFF 6px 6px, #FFFFFF 7px 6px, #000000 8px 6px, #000000 9px 6px, #000000 0 7px, #000000 1px 7px, #FFFFFF 2px 7px, #FFFFFF 3px 7px, #FFFFFF 4px 7px, #FFFFFF 5px 7px, #FFFFFF 6px 7px, #FFFFFF 7px 7px, #000000 8px 7px, #000000 9px 7px, #000000 0 8px, #000000 1px 8px, #000000 2px 8px, #000000 3px 8px, #000000 4px 8px, #000000 5px 8px, #000000 6px 8px, #000000 7px 8px, #000000 8px 8px, #000000 9px 8px, #000000 0 9px, #000000 1px 9px, #000000 2px 9px, #000000 3px 9px, #000000 4px 9px, #000000 5px 9px, #000000 6px 9px, #000000 7px 9px, #000000 8px 9px, #000000 9px 9px;"></div>

perfettamente funzionante, come si può verificare inserendo pari pari il tag <div> ottenuto in un documento html (come questo):

Conclusioni

È chiaro che usare convert ed awk non risolve il problema di fondo, le immagini CSS generate rimangono comunque molto più grosse di quelle originali, ma almeno sono prodotte con poche righe di codice ed usando solo degli strumenti standard di Unix.

Alcuni anni fa si parlava in senso negativo di bloatware, di quei programmi inutilmente grossi e tanto poco ottimizzati da richiedere grosse risorse hardware anche per svolgere funzioni relativamente semplici.

A volte i programmatori dimenticano due concetti fondamentali della buona programmazione, cercare la semplicità e usare lo strumento più adatto per il compito specifico, e si perdono in inutili (e stucchevoli) esercitazioni di stile. Succede a chi propone banalmente di usare file CSS enormi al posto di semplici immagini grafiche, ma succede anche in tanti altri casi ben peggiori.

A parte questo, il post è stato anche un’occasione per parlare di awk, uno strumento poco conosciuto ma molto otente, in particolare quando si tratta di analizzare e trasformare dati contenuti in file di testo.

Uno strumento che è diventato parte integrante da anni della mia routine di lavoro quotidiana. Sarebbe bello poterne riparlare.

I limiti di Wordpress.com: generatori di siti web statici

Sat, 09 Aug 2014 06:00:00 +0000

Come ho già scritto qualche giorno fa, ci sono letteralmente decine di generatori di siti web statici, quasi quante sono le distribuzioni di Linux. Io nei miei bookmark ne ho una trentina.

Come orientarsi in questa moltitudine?

Per le distribuzioni di Linux esiste Distrowatch, un sito popolarissimo che cerca di classificarle tutte. Analogamente, esistono almeno due siti che cercano di elencare tutti i generatori di siti web statici: StaticGen e Static Site Generators. L’approccio dei due è totalmente diverso anche se le informazioni riportate sono praticamente le stesse.

Il primo ordina di default i generatori di siti statici in base alla popolarità, ma si possono applicare vari filtri basati sul linguaggio di programmazione, la valutazione degli utenti e persino gli issue, i problemi riscontrati dagli utenti.

L’altro è apparentemente una tabella ordinata alfabeticamente (in questo momento elenca ben 289 sistemi diversi!), ma cliccando sulle intestazioni si può ordinarla in base al linguaggio di programmazione, alla valutazione degli utenti o alla data in cui il sistema è stato aggiornato per l’ultima volta. Quest’ultima è una informazione utilissima, se un sistema non è aggiornato da anni non vale la pena perderci tempo.

Provando ad applicare un po’ di filtri si copre che esiste perfino un generatore, StatiKiss Framework, basato su Bash, ma il sito web ufficiale contenente la documentazione non risponde. In realtà esisteva un’altro sistema interessante basato su Bash, NanoBlogger, il cui sviluppo è stato però sospeso all’inizio del 2013. Evidentemente Bash non va bene per sviluppare siti web.

Si può trovare anche Zodiac, un generatore di siti statici scritto in AWK, un linguaggio perfetto per la manipolazione di file di testo, sviluppato fra gli altri da Brian Kernighan, uno dei padri di Unix e del linguaggio C. A leggere il README Zodiac sembra semplice da usare, supporta markdown e la struttura delle directory in cui sono organizzati i documenti utilizzati per generare il sito è ragionevole. Ma purtroppo la popolarità di Zodiac è scarsa, scarsissima. Si potrebbe di certo usare per un progetto personale e soprattutto per imparare, ma è impensabile volere sostituire Wordpress con qualcosa come Zodiac. A chi rivolgersi, dove cercare aiuto e documentazione se si volesse fare qualcosa di non previsto dal programmatore, ad esempio gestire un sistema di commenti?

Fra i generatori di siti web statici ci sono persino due sistemi scritti in .NET. Ma vogliamo farci veramente del male?

Ma lasciamo perdere le curiosità. Quali sono invece i top player? Quali sono i sistemi più popolari, più diffusi e, si spera, più affidabili? Facile, il primo in assoluto è Jekyll, un generatore sviluppato in Ruby, un linguaggio di programmazione che è più o meno la risposta giapponese a Python, molto diffuso per sviluppare applicazioni web. Seguono Octopress (un derivato semplificato di Jekyll, il cui sviluppo però è fermo dal 2011), Pelican in Python, Middleman ancora in Ruby e Hexo in JavaScript.

Ci sono comunque altri generatori interessanti, alcuni con nomi veramente curiosi, Ruhoh, Hugo, Pico, Calepin, DropPages, Pancake, Anchor CMS, Hyde, Sculpin, HTMLy,Dropplets, Chronicle. Esiste persino il venerabile (ha quasi 10 anni!) Dir2web, l’unico prodotto italiano che conosca.

Non mancato anche i prodotti a pagamento come Kirby e Statamic. O come Cactus, che è pure specifico per il solo Mac.

Per questi ultimi no grazie, il web nasce e deve rimanere multipiattaforma, sistemi sviluppati per uno specifico sistema operativo non mi vanno bene a priori. E trovo pure irragionevole cercare di vendere questi prodotti: se devo pagare per Statamic, quanto dovrei dare agli sviluppatori di Apache? Sei uno sviluppatore e vuoi guadagnarci? Distribuisci gratis il prodotto, dimostra nei fatti che è buono, fai in modo che diventi il più popolare possibile e poi vendi il supporto. Cercare di vendere software come questi, che subiscono la concorrenza di sistemi equivalenti, gratuiti e di qualità analoga se non migliore, è veramente sciocco.

Ancora un ebook

Fri, 31 Jan 2014 10:00:00 +0000

Dopo alcuni giorni di offerte minori, anche oggi Packt Publishing offre (gratis) un ebook allettante per chi sviluppa o vuole sviluppare su iOS: iPhone JavaScript Cookbook di Arturo Fernandez Montoro, pubblicato nel 2011.

PS: La data di pubblicazione è importante perché gli strumenti di sviluppo cambiano così in fretta che un qualunque libro di questo tipo rischia dopo pochi anni di diventare obsoleto.