ARDUINO-SASS

Una libreria di stili per i prodotti Web Arduino

Stefania Mellai

Cos'è Arduino?

Hardware

Software

Community

Una parte fondamentale di Arduino è la sua Community, che si esprime attraverso gli Arduino User Groups, workshop organizzati nei Fablab o Marker/Hacker spaces, Eventi come ArduinoDay o Maker Faire. La community puo proporre contributi al nostro software open source, sengalare problemi o proporre miglioramenti o nuove funzionalita attraverso GitHub o attraverso il forum ufficiale. Il forum e in gran parte tenuto vivo e moderato da appassionati volontari. Arduino coinvolge inoltre di tanto in tanto i suoi utenti piu affezionati in programmi di betatesting.

Arduino User Groups
Workshops @ Fablabs, Hacker spaces, maker spaces
Eventi: Maker faire, Arduino Day
Contributi al software
Programmi di beta testing

Arduino e il Web

arduino.cc

create.arduino.cc

La gestione di tutto questo ecosistema, costituisce probabilmente un caso non tanto diffuso nell'esperienza dello sviluppo Web.
è forse piu comune che uno sviluppatore web lavori per una società di consulenza, una web agency o anche come freelance e abbia a che fare con clienti diversi, ognuno con la sua brand identity.
Oppure che lavori per una società che produce un software solo.
Personalmente, in ogni altra azienda in cui ho lavorato, ho lavorato ad un unico software. Nel caso di Arduino invece il cliente è sempre lo stesso ed è rappresentato dai nostri stessi utenti.
Abbiamo una quantità non indifferente di prodotti anche molto diversi tra loro (anche per quanto riguarda le tecnologie e i linguaggi in cui sono costruiti) che però devono condividere la brand identity, lo stile degli elementi dell-interfaccia grafica e anche riproporre intere parti esattamente uguali (header e footer ad esempio).
Oltre a quelli che ho presentato, abbiamo anche altri tool di amministrazione privati che, sebbene meno rifiniti nel design, cercano di rispettare un minimo di coerenza con il resto dell'ecosistema web.
Fin'ora le maggiori sfide su cui abbiamo lavorato in questo senso sono: il sistema di autenticazione centralizzato, la condivisione di header e footer e la realizzazione dello stile di componenti grafici riutilizzabili.

Pallottole d'argento

“There is no single development, in either technology or management technique, which by itself promises even one order-of-magnitude improvement within a decade in productivity, in reliability, in simplicity.“

Ho appena finito di leggere questo libro, The mythical man-month, di Frederick Brooks.
è probabilmente il più grande classico di ingegneria del software, citato in tantissimi altri libri e articoli. La prima edizione è stata pubblicata nel 75, ed è poi uscita una riedizione nel ventennale, con dei capitoli aggiuntivi.
Il libro discute sull'efficacia dell' "uomo mese" come unità di misura del lavoro necessario a completare un certo dipo di task e, in particolare, mette in evidenza quanto tale unità di misura sia un modello inadeguato o quanto meno troppo semplicistico se applicato al software.
Da questo libro viene infatti la legge di Brooks, che sostiene che aggiungere forza lavoro a un progetto software in ritardo, lo farà tardare ancora di più.
Questo è dovuto alla natura intrinsecamente complessa del software stesso, ma soprattutto al fatto che la gestione della comunicazione tra le persone che lavorano ad uno stesso progetto richieda sempre piu tempo ed energie man mano che il numero delle persone coinvolte cresce.
La produzione del software è davvero paragonabile ad un parto, infatti, come tutti sanno, non si può portare a compimento una gravidanza in un mese semplicemente mettendo insieme nove donne.

1975 - 1995
Legge di Brooks: Aggiungere forza lavoro ad un progetto software in ritardo, lo farà ritardare ancora di più. O anche 9 donne non fanno un bambino in un mese.
mese - uomo unità di misura -> estrema semplificazione
La natura del software fa si che non verrà mai inventato niente che faccia per la produttività, semplicità e affidabilità del software ciò che le evoluzioni in campo elettronico hanno fatto per l'hardware

Uno dei capitoli aggiunti nell'edizione del 95 si intitola: "no silver bullet".
In questo capitolo Brooks spiega che, nonostante spesso compaiano nuovi linguaggi di programmazione, framework e tool che promettono di incrementare la produttività o la semplicità o l'affidabilità del software in modo decisivo, non potrà mai davvero comparire nessun tipo di innovazione che faccia miracoli in questo campo.
Il software è come un lupo mannaro, anche ciò che all'inizio ci sembrava innocuo, rassicurante e amichevole può, da un momento all'altro, trasformarsi in un mostro. E non abbiamo proiettili d'argento a nostra disposizione.
Questo è particolarmente vero per quanto riguarda il CSS, perché, come sappiamo, a volte ci succede di rimuovere delle funzionalità e ci dimentichiamo di rimuovere il css che era associato a quella funzionalità e
questo zombie potrebbe non avere nessun effetto sul resto dell'applicazione, oppure potrebbe invece produrre qualche effetto, ma non sappiamo di preciso su quante altre parti dell'applicazione ed è difficile uscire dal tunnel e ci ritroviamo con una code base davvero sporca e sempre più difficile da mantenere.
Persino in javascript è molto più semplice scoprire se una funzione non viene più utilizzata, facendo una semplice ricerca.

There is no royal road, but there is a road

Sfruttare software già esistente
Crescita organica dei progetti, disciplina nel mantenere il codice pulito
Modularità / Riuso

Arduino Sass

Collezione di mixin e placeholders SASS
Include Bourbon
Usato in oltre 10 siti in produzione
Installabile con npm
In continua evoluzione, versionato

Installazione

							
							npm install --save git+ssh://git@github.com/bcmi-labs/sass.git#x.x.x

Libreria CSS VS SASS

Utilizzo

Import di variabili:

								
								@import 'node_modules/arduino-sass/src/variables';

Import mixin singolo:

								
								@import 'node_modules/arduino-sass/src/buttons';

Import completo:

								
								@import 'node_modules/arduino-sass/src/arduino-sass';

Variabili

							
							$teal5: #005c5f;
							$typonine-mono-regular: 'Typonine Mono Regular', 'Lucida Grande', Lucida, Verdana, sans-serif;

							
								.demo-text {
								  color: $teal5;
								  font-family: $typonine-mono-regular;
								}

"A good programmer is someone who always looks both ways before crossing a one-way street." - Doug Linder

Mixin

Usati per elementi configurabili

button
spinner
toggle
...

								
								@mixin spinner($color, $background, $size, $border: $size / 6, $duration: 2s) {
								  @include size($size - 2 * $border);
								  box-shadow: inset 0 0 0 $size / 12;
								  color: $background;
								  font-size: 6px;
								  margin: $border;
								  ...

								
								@include spinner($orange, $teal0, 100px);

								
								@include spinner($orange, $sunflower, 100px);

Placeholder

Usati per elementi non configurabili

checkbox
radio button
sidebar
pagination
...

								
								%ardu-pagination {
								  $separator-color: rgba($teal1, .25);
								
								  display: flex;
								  flex-wrap: wrap;
								  justify-content: center;
								  list-style: none;
								  margin: 30px 0 0;
								  padding: 0;
								
								  .move-page {
									flex-grow: 1;
									...

							
							.demo-pagination {
								@extend %ardu-pagination;
							}

Risultato compilato

								
								.notification, .success_notification, .error_notification {
								  border-radius: 2px;
								  color: $white;
								  font-family: $typonine-sans-regular;
								  font-size: 16px;
								  ...
								}
								
								.success_notification {
								  background-color: $notifysuccess;
								}
								
								.error_notification {
								  background-color: $notifyerror;
								}

Placeholder

								
								.success_notification {
								  border-radius: 2px;
								  color: $white;
								  font-family: $typonine-sans-regular;
								  font-size: 16px;
								  ...
								  background-color: $notifysuccess;
								}
								
								.error_notification {
								  border-radius: 2px;
								  color: $white;
								  font-family: $typonine-sans-regular;
								  font-size: 16px;
								  ... 
								  background-color: $notifyerror;
								}

Mixin

Browser supportati

Dati ultimo anno

Tutti

Internet Explorer

Sviluppi Futuri

Integrazione nuovi moduli
Sito Web interno con
guida ed esempi

Ringraziamenti

Le pene dello sviluppatore
(by Brooks)

Tendere alla perfezione è la parte più difficile di imparare a programmare
Gli obiettivi vengono definiti da terzi e spesso dipendiamo da cose (soprattutto programmi) che non possiamo controllare
Ogni lavoro creativo porta con sé ore noiose di duro lavoro; programmare non fa eccezione
Il software è perennemente a rischio obsolescenza, ancora prima di essere completato

Le gioie dello sviluppatore
(by Brooks)

Il piacere di costruire qualcosa
Il piacere di fare qualcosa di utile per altri (a volte, NDR)
Il fascino di modellare qualcosa simile ad un rompicapo, fatto di pezzi mobili interconnessi
La gioia di imparare sempre qualcosa di nuovo, attraverso un lavoro non ripetitivo
La delizia di lavorare in un mezzo di puro pensiero, che esiste, lavora e si muove in un modo che non è proprio degli oggetti materiali

ARDUINO-SASS

Una libreria di stili per i prodotti Web Arduino

Stefania Mellai

Cos'è Arduino?

Hardware

Software

Community

Arduino e il Web

arduino.cc

create.arduino.cc

Pallottole d'argento

Arduino Sass

Installazione

Utilizzo

Variabili

Mixin

Usati per elementi configurabili

Placeholder

Usati per elementi non configurabili

Browser supportati

Sviluppi Futuri

Ringraziamenti

Le pene dello sviluppatore (by Brooks)

Le gioie dello sviluppatore (by Brooks)

Le pene dello sviluppatore
(by Brooks)

Le gioie dello sviluppatore
(by Brooks)