Fondamenti di CSS: display e position

Ai folli che si stanno addentrando nel meraviglioso mondo di CSS come me, voglio dare un consiglio per evitare inutili mal di testa. Ogni volta che si affronta un problema di indentazione e/o impaginazione, bisogna tenere sempre ben a mente 2 fondamentali proprietà CSS: display e position.

Display – La migliore definizione che ho trovato è in assoluto questa su StackOverflow.com. I 3 valori “inline”, “block” e “inline-block” sono quelli storici e più usati, il nuovo valore “flex” è quello da studiare subito dopo. I valori “table”, “table-row” e “table-cell” li troveree spesso ma sono abusati. Una volta assorbiti i fondamenti, ricordatevi che alcuni tag HTML sono per default elementi-blocchi (lista completa) mentre i rimanenti sono elementi inline (lista completa).

Position – Causerà parecchi grattacapi. La migliore spiegazione che ho trovato è questa. Come si evince dal tutorial, “position” ha un doppio legame anche con le proprietà “float” e “clear”. Queste 3 proprietà insieme verranno molto usate.

Imparare la teoria “su carta” di queste proprietà è stupendo, fa sembrare tutto semplice, ma quando ci si trova con decine di layer innestati, ognuno con definizioni differenti, si fa molta fatica a seguire il significato logico dei vari elementi HTML. Se ogni volta che vi scontrate con codice HTML + CSS sentite una forte sensazione di frustrazione interna, sappiate che è un disagio assolutamente NORMALE!!!

L’informatica c’ha fatto CIAONE…

Qualche giorno fa ho letto questo articolo molto triste per il settore informatico: La fine della legge di Moore. Non credo bisogna spiegare cosa sia la legge di Moore, lo sanno tutti. L’arresto tecnologico parte dal 2010, anno che a mio personalissimo avviso segnala anche l’inizio della crisi del software, dove la differenza di prestazioni tra una CPU del 2010 e una del 2016 è praticamente trascurabile per quanto riguarda la velocità pura; consumi e temperature sono però state migliorate. La Intel nel 2014 aveva già mostrato i primi cedimenti ritardando l’uscita delle CPU per computer Desktop, dato che il settore è in forte crisi, e quel segnale era piuttosto inequivocabile. Ma quello che voglio analizzare non è tanto l’aspetto tecnologico, quanto l’aspetto sociale della vicenda.

La situazione veramente triste (secondo me) è che oggi con l’avvento del cloud computing, non solo i client necessitano di minore potenza di elaborazione, ma non ci si preoccupa neanche più di ottimizzare l’infrastruttura tecnologica lato server. Si presume che una server farm non abbia ne problemi di spazio, ne di riscaldamento, ne di elettricità, quando sarà necessaria nuova potenza di elaborazione si aggiungono nuovi processori e nuova memoria nei rack: Francesco Totti direbbe “j’ha fatto er Cucchiaio“. Il progresso tecnologico del singolo “chip” si è più o meno ormai arrestato, quindi si è deciso di iniziare a investire seriamente sul calcolo parallelo e distribuito. Utilizzando server, tanti tanti server.

Cioè siamo tornati agli anni ’60! E tutto grazie a perverse logiche di business. Speriamo che andando avanti a qualcuno venga in mente di riesumare le audiocassette perchè inizio a sentirne nostalgia 🙂

CSS è fantastiglioso!

OK, OK, dovevo fare una cosa semplicissima con CSS: posizionare 2 elementi dietro l’altro in orizzontale e centrarli verticalmente. Facile direte voi … LA MINCHIA rispondo io!

vertical-align: Ironia sul web
vertical-align: Ironia sul web

Da buon neofita di CSS, come prima soluzione ho usato il comando vertical-align con valore middle, ovviamente il browser m’ha risposto picche (è s’è fatto pure ‘na risata). Come si può vedere dall’immagine allegata sulla destra, su questo argomento alcune persone particolarmente goliardiche hanno scatenato la loro ironia e ci si sono divertite alla grande 🙂 Ho iniziato a cercare, a ricercare e a ricercare ancora su Internet una possibile soluzione e dopo circa 37-38 ore di navigazione ininterrotta mi è venuto il dubbio che fosse un problema piuttosto comune. Può sembrare strano ma è esattamente così: questo è uno scoglio su cui ci si scontrano inizialmente praticamente tutti gli sviluppatori. Alla fine ho trovato questa pagina che spiega un paio di barbatrucchi semplici semplici, ma è frustrante constatare come l’HTML, dopo oltre 20 anni di onorato servizio, risulti ancora così “arretrato”.

A quanto pare i browser più recenti hanno risolto questi problemi di allineamento e orientamento usando il nuovo parametro FlexBox, che sarà la prossima funzionalità che andrò a studiare non appena mi riprendo da questo trip.

Giochicchiando con WebGL – Parte II

L’intestazione colorata ed animata con WebGL che ho creato qualche giorno fa, generava colori casuali ogni volta che si cambiava pagina o si aggiornava quella corrente: questo comportamento non mi piaceva. Ho ripreso il codice, ora quando viene abbandonata la pagina, intercettando l’evento onnload, salvo i colori attuali all’interno di un cookie di sessione. Alla successiva creazione della nuova istanza WebGL, leggo il cookie e se ci trovo dentro i vecchi colori, evito di generare quelli randomici. In questo modo durante la navigazione del sito, l’animazione simula una pseudo-continuità nel tempo.

Ecco il nuovo codice sorgente TypeScript

Internet, il passaparola e il virale

Jeff Duntemann, l’autore del primo libro di programmazione che ho letto nella mia vita, quello sul Borland Pascal (per dovere di cronaca in realtà il primo che ho acquistato era sul C++), nel 1998 ha scritto sul suo blog questo post che cito per intero:

We’re getting to the day where almost any software application or utility you could describe is out there somewhere—in many cases freely downloadable from half a dozen places. A friend of mine is putting together a small conference for independent Catholic priests and bishops, and wanted to know if I’d seen any software for managing conference, attendees, fees, schedules and stuff. Sure as..er..heck, I found a package in about ten minutes. I mentioned in VDM that I’d like to have a software gizmo that magnified the cursor region so I could bulls-eye the mouse pointer into those teeny little Explorer interface plus/minus boxes. Sunuvugun, four or five such things already exist. When there were fewer things in the world, word-of-mouth was easy. Now there are a near-infinite number of things in the world, and no one has the breadth of attention to be able to snag word-of-mouth on more than a tiny fraction of it. I’m quite sure that managing word of mouth is the key to making money with software distributed on the Web. Many people say they know how to do this. I’ve seen no evidence that anyone does. I think about it a lot, and if I come up with any useful idea you’ll see them here.

Continua a leggere “Internet, il passaparola e il virale”

Calcolo delle normali in WebGL

Mi sono divertito a creare questo esperimento e se ho smanettato bene WebGL, credo non sia possibile far calcolare le normali direttamente al vertex shader, nel caso la mesh 3D modifichi la propria forma (come nel mio esempio). Con il vertex shader puoi accedere solo alla coordinata attualmente in trasformazione e non mi pare esistano barbatrucchi per fare un lookup su altri vertici, operazione necessaria per il calcolo delle normali delle facce. Sono pressochè sicuro esistano vari metodi per “simulare” il calcolo utilizzando texture mapping come base dati, ma è una tecnica che ho deciso di non esplorare per adesso. Probabilmente in WebGL 2 sarà integrato anche un geometry shader dove questo limite verrà superato, o forse no perchè è un qualcosa di particolarmente pesante. Ad ogni modo, far eseguire il calcolo delle normali direttamente alla GPU, invece che alla CPU (anzi a JavaScript che è un compilatore just-in-time di una macchina virtuale), è particolarmente vantaggioso grazie all’elevato grado di parallelizzazione nei calcoli vettoriali.

Continua a leggere “Calcolo delle normali in WebGL”

Dalla Business Logic alla Graphical User Interface…

Oggi l’attività principale di uno sviluppatore sembra sia diventata disegnare interfacce grafiche. Una volta ci si concentrava sulla logica di business, cercando di creare applicazioni architetturalmente solide, armoniche e funzionali, ma oggi questa pratica sembra ormai del tutto in disuso. Sono un programmatore di vecchia data e ricordo che durante la “golden age” informatica, quando Windows regnava incontrastato, l’interfaccia grafica delle applicazioni era piuttosto standard, gli unici arricchimenti stilistici venivano fatti per rendere il programma più facilmente fruibile. Anzi, paradossalmente, quando si incontravano software particolarmente accattivanti dal punto di vista grafico, li si etichettava come scarsi a livello ingegneristico (nello strato di business logic appunto): si erano concentrati sull’apparenza che serviva a coprire le magagne tecniche. Avrete presente il famoso detto “non si giudica un libro dalla copertina“.

Ma oggi l’interfaccia grafica È il programma!

Continua a leggere “Dalla Business Logic alla Graphical User Interface…”

Giochicchiando con WebGL

WebGL è veramente forte!!! L’idea di poter integrare in una pagina web tutta la potenza di OpenGL utilizzando un semplice editor di testo, con accelerazione hardware tra l’altro, lo rende particolarmente interessante. Oggi volevo sperimentare l’integrazione di un tag <canvas>, con contesto WebGL appunto, all’interno di una pagina HTML e mi è venuto in mente di modificare l’header del mio template WordPress, che è questo qua: Phosphor WordPress template.

Invece di un’intestazione con sfumatura statica ho deciso di creare un semplice scriptino TypeScript che mi ciclasse colori casuali dentro 2 triangoli. Tutto molto semplificato e leggero da eseguire su ogni browser. Ecco il codice sorgente se può interessare: Codice sorgente TypeScript.

Utilizzare il tag canvas in questa maniera è un tentativo amichevole di resuscitare le vecchie applet Java ormai morte e sepolte … poverine 🙂

Ciao (Giz)mondo!

Benvenuto in WordPress nel mio sito web! 🙂 Mi sono ricordato della console portatile Gizmondo rilasciata nel 2005 e plonkata nel 2006, Sony e Nintendo hanno veramente tremato dalla paura 😀 Visto il fallimento del mio precedente sito, m’è sembrato doveroso dedicare il primo post del nuovo blog ad un celebre fallimento mondiale forse poco conosciuto.

Un blog dedicato all’informatica ed ad altre oscenità da nerd, divertitevi se vi interessa, un saluto