Archives

• musikele

Here's the long list of articles I wrote in these years, in Italian and English.
 

VueJS basics

Dec 17, 2017 • musikele

It has been a long week for me, I’m studying very hard VueJS - this time by coding real examples - and I confirm that there are some very good concepts backed in.

Separation of data and methods

This is a basic html containing some VueJS markup:

<html>
  ...
  <body>
  	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
  	<div id="app">
  	  <h2>{{ message }}</h2>
      <p>{{ sayHelloTo(name) }}</p>
  	</div>
  </body>
</html>

This is a basic VueJS element:

new Vue({
  el: '#app',
  data: {
    message: 'Hello from Vue!',
    name: 'Michele'
  },
  methods: {
    sayHelloTo: function(name) {
      return `Hello, ${this.name}!`
    }
  }
})

Let’s describe this snippet:

  • the el references the DOM element with the #app id. This element will be Vuezed.
  • the data object contains the data that can be used inside the HTML: for example, we used the message property in the Html.
  • the methods property contains the methods you can use in your html. These are useful for calculations or for actions, like clicking on a button.

I acutally like a lot: a clear separations of data and methods.

This is a concept that comes from the functional programming world, that is, separate the data from the functions that interact with this data.

However, Vue is not functional in the classic sense of the definition, because you use the this keyword to access data & you’re not forced to write pure functions, etc etc.

A word on this

Have you noticed that from the methods section, if you want to access data properties, you use this ?

In fact, Vue proxies the this keyword so that you can access to data without writing this.data.message.

However, for this to work you must write 90% of the time the old ES5 function() declaration: this is expecially clear in VueJS components, an argouments we’ll talk in another post.

Dovrei partecipare al programma Erasmus?

Dec 4, 2017 • musikele

Anche io ho partecpato al programma Erasmus, era il 2006, l’anno dei mondiali e io ero a Siviglia. Non avete idea di quanto sia appagante vincere un mondiale all’estero.

Basandomi sui miei ricordi: prima di partire hai paura, il primo mese che stai lì ti chiedi ma chi te l’ha fatto fare mentre cerchi casa, fai la spesa, ti iscrivi ai corsi; il secondo mese è insieme al primo il più duro, pensi di aver fatto la cazzata più grande della tua vita, non capisci la gente quando parla, non sai cosa fare e dove andare, un po’ ti senti solo se non hai nessuno (e io partii da solo)…

Poi venne fuori la faccia di bronzo. Un giorno sentii parlare in italiano in autobus e chiesi “hey, sei Erasmus? ma dove diavolo uscite la sera?”; un altro giorno incontrai degli studenti spagnoli che festeggiavano un’Italian Day con dolci italiani (disgustosi e mai mangiati prima) e in pratica finii a uscirci insieme e a correggergli i compiti, etc etc.

Il terzo mese inizi a pensare che l’Erasmus è una figata pazzesca, il quarto il quinto e il sesto speri non finisca mai e inizi a progettare fughe, rimpatriate, anche se già sai che tante cose dovranno necessariamente finire lì.

E in tutto questo c’è che ti lasci con la ragazza o ne trovi una nuova, si conoscono persone di tutto il mondo, si imparano nuove lingue e si girano continenti. Anche i sentimenti si mettono a dura prova.

Dal punto di vista accademico ho avuto un problemaccio con lo spagnolo andaluso, In pratica i primi tre mesi di corso non ho capito nulla. Io, mai bocciato, in Spagna feci un solo esame su tre preventivati, ma quando tornai in Italia superai quei due esami con 30&lode.

Chiunque dovrebbe fare l’Erasmus. Anche chi non va all’università. Specialmente chi è fidanzato/a. Specialmente chi ha paura.

Tutti.

Quest’articolo era, in principio, un commento a un post su facebook. In bocca al lupo a tutti quelli che parteciperanno al programma.

Alla scoperta di VueJS

Dec 3, 2017 • musikele

E’ domenica, il Napoli non gioca, che fare? Dopo aver acceso il camino ho iniziato a guardarmi un po’ di VueJS.

VueJS, Un framework minore?

In questo mondo dominato da Angular e React, c’è ancora spazio per altri framework frontend?

Ti faccio un’altra domanda: quando ai suoi tempi c’era solo JQuery, riuscivi a pensare che sarebbe mai nata un’altra libreria per il frontend?

Penso di aver sentito parlare la prima volta di Vue che c’era solo Angular 1 in giro, e tutti gli altri framework sgomitavano per diventare famosi. C’è chi ce l’ha fatta, tipo React, e chi invece ci prova ancora e non ci riesce, tipo Ember.

La differenza, molto spesso, la fa l’azienda che sponsorizza: Google per Angular, e Facebook per React.

Nel caso di Vue, le aziende sponsorizzatrici non sono proprio dei nomi di primo piano: StLib, un’azienda che realizza un framework per codice serverless, non la conoscevo prima di oggi. Quindi, già su questo, partiamo svantaggiati.

Cosa mi ha colpito di VueJS

L’approccio di VueJS è molto semplice, e questo è uno dei principali punti di forza:

  • non c’è bisogno di partire da un boilerplate, ma basta un file html linkato a uno script js;
  • non c’è bisogno di conoscere la programmazione super avanzata, ma bastano le conoscenze di un normale programmatore;
  • Somiglia in tutto e per tutto al primo angular, quello che ho imparato a conoscere dannatamente e bene, e che funzionava alla grande;
  • la documentazione è chiarissima e sin dall’inizio si entra nel vivo di VueJS.

Non mi sono ancora addentrato molto, ma ho notato che il sistema dei componenti è semplicissimo e soprattutto si può iniziare a lavorare senza mettere in mezzo i vari webpack, systemjs, browserify e compagnia cantando.

A questo punto una domanda me la sono fatta anch’io:

VueJS è un framework moderno?

Nel senso, ha quelle caratteristiche di un framework post-angular1 (utilizzo di un virtual dom, utilizzo di paradigmi reactive, server-side rendering…) ?

Il team di Vue ha scritto un’analisi tecnica molto profonda di Vue vs ogni-altra libreria-frontend sul mercato, soffermandosi specialmente su React perchè è quella cui somiglia di più. La velocità non deve essere presa in considerazione come fattore determinante, perchè Vue e React hanno numeri molto simili; quello che cambia è in dettagli come la curva di apprendimento, cosa accade all’intera applicazione un componente si aggiorna, etc.

Questo vuol dire che si, Vue è una libreria frontend che si occupa solo della view, lasciando ad altre librerie il compito del routing o di altre cose belle (autenticazione, autorizzazione, chiamate http…).

Sono solo all’inizio

A parte il primo tutorial, che mi ha lasciato un’ottima impressione, c’è ancora tanto da guardare. Vorrei provare a sviluppare qualcosa di meno semplice così da farmi un’idea di come funziona quando le linee di codice aumentano. Resisterà VueJS alla prova della complessità?

Nei prossimi articoli proverò ad entrare più nel dettaglio di come funziona Vue. Keep reading!

Batman ha ispirato il ... Comic Sans: storia di un Font che tutti odiano

Dec 1, 2017 • musikele

La storia che sto per raccontare riguarda uno degli aspetti più mitologici dell’informatica intera: il Comic Sans, il carattere più odiato in assoluto, ma allo stesso tempo uno dei più usati al mondo.

L’inizio: Microsoft Bob

Microsoft Bob meriterebbe un articolo a parte, in quanto fu uno dei primi progetti di Microsoft gestiti direttamente da Melinda Gates (la moglie di Bill) e, contemporaneamente, uno dei progetti più fallimentari.

L’idea dietro a Bob era di creare un’interfaccia alternativa a Windows 3.1 e Windows 95, un’interfaccia che fosse giocosa, facile da usare per gli utenti che non avevano dimestichezza coi computer, come gli anziani.

Si navigava all’interno di questo salone di casa, e per leggere un libro si cliccava sul libro, così come per aprire il calendario, etc.

In fin dei conti l’idea era carina, ma aveva un grande problema: dietro un’interfaccia così giocosa il font utilizzato è un vetusto Times New Roman. brutto eh?

(sono segretamente convinto che sia stato questo il vero motivo dell’insuccesso commerciale.)

Vincent Connaire: l’uomo che progettò Comic Sans

Vincent Connaire è un designer che nel 1993 iniziò a lavorare per Microsoft.

Connaire entrò subito in contatto col team di Microsoft Bob e fece notare che un’interfaccia così giocosa non poteva avere un font tanto serio, quindi propose di ideare un font più uniforme allo stile comunicativo di Bob.

L’idea fu inizialmente accettata e Connaire si ispirò ai fumetti che amava di più, tra cui un Batman - The dark knight returns del 1986 che aveva sulla sua scrivania. I caratteri dei fumetti generalmente vengono disegnati a mano, e fanno parte del processo di creazione. Il processo artigianale che c’è dietro a ogni dialogo di un fumetto fa sì che nessuno, fino ad oggi, si sia mai lamentato dei font dei fumetti.

Qui sotto riporto una tavola di Batman, per farvi capire da dove nasce l’ispirazione.

(Ti ricordo che all’epoca Internet non c’era, o meglio esisteva da 1 anno: molto difficile trovare ispirazione on line. Io ricordo che dovetti installare non solo Netscape ma anche i driver TCP/IP a mano, coi floppy, su Windows 3.1).

Il Comic Sans

Fu così che nacque il Comic Sans, un carattere fortemente ispirato ai fumetti, che però non devi MAI utilizzare se vuoi disegnare fumetti per professione, pena il licenziamento.

Tuttavia, quando il font era ormai pronto, il team di Microsoft Bob lo scartò: non perchè fosse brutto, bensì perchè il progetto era ormai completato e tutte le textbox erano state ottimizzate per il Times New Roman. Modificare il font significava entrare in ogni possibile textbox e aggiustarle per rendere il testo visualizzabile correttamente, cosa non proprio praticabile (all’epoca non esistevano reponsive design – la risoluzione “normale” era 800x600, credo…).

Quindi, se il Comic Sans non venne al mondo tramite Microsoft Bob, come si è diffuso?

Come è diventato il font più conosciuto al mondo: 3D Movie Maker

In un’epoca in cui Microsoft aveva il monopolio totale di ogni cosa fosse installata sui vostri pc, i programmatori di un altro progetto Microsoft decisero di usare il Comic Sans per le vignette di aiuto di un software chiamato 3D Movie Maker, un applicativo per bambini che permetteva di inserire personaggi in un ambiente virtuale (nel 1995, eh!).

Su youtube esistono dei filmati che mostrano 3D Movie Maker in azione.

Da quel momento in poi, l’ascesa di Comic Sans fu inarrestabile: fu inserito in Windows 95, fu uno dei caratteri di default di Microsoft Publisher e del neonato Internet Explorer 3.0.

Il Comic Sans è stato usato in molte situazioni sconvenienti. Ad esempio, il font stato usato per il testo di un memoriale di guerra, ai lati delle ambulanze, nei CV. In rete esistono centinaia di pagine sull’uso sconveniente del font, ad esempio su BuzzFeed.

Io personalmente posso dire di aver sostenuto esami all’università la cui traccia era scritta in Comic Sans.

E ora?

Beh, dovrebbe essere chiaro, non devi usarlo. Per. nessun. motivo. al. mondo.

Ci sono pochissimi motivi per cui dovresti usare il comic sans, e te li elenco qui:

  • Se la tua audience ha meno di 2 anni.
  • Se la tua audience è composta da dislessici. E’ infatti noto che i dislessici trovano più facile leggere il comic sans rispetto agli altri font.

Questo articolo non sarebbe mai nato senza il primo capitolo di un libro che purtroppo ho perso in aereo: Sei proprio il mio Typo, di Simon Garfield.

Per altre storie bizzarre sui font, questo è il libro che fa per te;)

Newer >> << Older