Fondamenti di web design 17: NESTING in SASS, potenza degli annidamenti

Nidificazione

La NIDIFICAZIONE se chiediamo in inglese ad Alexa di tradurci il termine NESTING è una tendenza dell’ uomo moderno ma anche uno stile di vita che ci vede privilegiare ambienti caldi e accoglienti a ricreare magari inconsciamente le condizioni iniziali della nostra nascita, simulando il rientro nel ventre materno, ma parlando di SASS diventa una risorsa che ci farà apprezzare il perché di questa interessante tecnologia! Immaginiamo di avere una sezione di articoli o più sezioni ognuna delle quali deve essere modellata o stilizzata in un determinato modo. Per esempio noi potremmo fare riferimento alla nostra pagina web per inserire delle classi nel foglio HTML all’ interno dei DIV inseriti e poi richiamarli nel file SCSS, vediamo il file HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SASS</title>
    <link rel="stylesheet" href="css/stylesass.css" type="text/css">
</head>
<body>
    <div class="opzione1"><h1>FWD</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus quia accusamus quasi magni in quos nihil, suscipit perspiciatis voluptatibus praesentium voluptas autem nobis quidem, totam ipsum. Officia sint rerum animi.</p>
    </div>
    <div class="opzione2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis vel rem magnam tempore doloremque! Architecto cumque eius explicabo delectus. Animi laboriosam asperiores cum dolore doloremque nobis voluptatibus facilis omnis accusamus!</div>
    <div class="opzione3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem amet ipsam deserunt reiciendis, minima corporis autem voluptates cupiditate, obcaecati beatae veritatis sed neque dolores fugiat ipsum consequatur, nobis officiis voluptas.</div>    
</body>
</html>

A questo punto stilizziamo le classi nel file corrispondente con estensione SCSS opzione1, opzione2 e opzione tre, magari mostrando un esempio di NESTING su opzione1:

$backgroundselezionato:red;
$colorselezionato:#ff9900;
$colorselezionato1:#ccc;
$colorselezionato2:red;
$fontselezionato:verdana;

body {
    background-color:$backgroundselezionato;
    color:$colorselezionato;
    font-family: $fontselezionato;
    }

    .opzione1 {
    color:$colorselezionato1;
    h1
    {
        font-size: 40px;
    }
    p
    {
        font-size: 30px;
        color: $colorselezionato;
    }
    }
    
    .opzione2 {
            color:$colorselezionato;
    }
    
    .opzione3 {
            color:$colorselezionato1;
    }

Il vantaggio di questo modo di scrivere codice é palese. Immaginiamo quanto ci semplificheremo la vita nel caso di elenchi annidati all’ interno di una UL che magari ha anche dei link, definendo un solo blocco di codice posso risovere tutto all’ interno di un unico contenitore, raggruppando e organizzando meglio le informazioni, il file CSS corrispondente generato in automatico dopo il salvataggio del file matrice sarà:

body {
  background-color: red;
  color: #ff9900;
  font-family: verdana;
}

.opzione1 {
  color: #ccc;
}

.opzione1 h1 {
  font-size: 40px;
}

.opzione1 p {
  font-size: 30px;
  color: #ff9900;
}

.opzione2 {
  color: #ff9900;
}

.opzione3 {
  color: #ccc;
}
/*# sourceMappingURL=stylesass.css.map */

che dal punto di vista della nostra comprensione che avevamo dei CSS non stravolge nulla, semplicemente gestire gli annidamenti ci consente di avere una semplificazione magari su zone precise del documento per cui se volessi stilizzare un elenco aprirei prima un blocco UL senza chiuderlo, all’ interno ci inserirei degli UL che non chiuderò perchè magari andrò a formattare delle ancore al suo interno con gli hover e gli underline che necessitano, TAG A che potrò chiudere come blocco di codice e subito dopo chiuderò anche gli LI e gli UL, tutto all’ interno di una stessa area o blocco di codice. Poi il PREPROCESSOR farà tutto il lavoro sporco andando a frammentare le informazioni come vuole la tradizione dei CSS! Ovviamente all’ interno della nostra classe opzione1 avrò tutti gli elementi modellati da SCSS in corrispondenza della pagina statica, per cui le intestazioni e i paragrafi di riferimento o altro comprese eventuali ancore, che possono essere ulteriormente nidificate nelle loro più svariate proprietà.

L’uso dei PREFISSI

Posso prendere un font-size come proprietà e fare in modo che diventi egli stesso un contenitore? Si, utilizzando i prefissi, vediamo lo stesso codice di prima ampliato per creare un contenitore dentro a un contenitore con l’uso dei prefissi abbreviando font-size a font e anche rendendo sintetiche le altre voci:

$backgroundselezionato:red;
$colorselezionato:#ff9900;
$colorselezionato1:#ccc;
$colorselezionato2:red;
$fontselezionato:verdana;

body {
    background-color:$backgroundselezionato;
    color:$colorselezionato;
    font-family: $fontselezionato;
    }

    .opzione1 {
    color:$colorselezionato1;

    h1
    {
        font-size: 40px;
    }

    p
    {
        color: $colorselezionato;
        font:
    {
            size:30px;
            weight:bold;
            family:verdana;
    }
    }

    }

che nel CSS diventa un lineare:

body {
  background-color: red;
  color: #ff9900;
  font-family: verdana;
}

.opzione1 {
  color: #ccc;
}

.opzione1 h1 {
  font-size: 40px;
}

.opzione1 p {
  color: #ff9900;
  font-size: 30px;
  font-weight: bold;
  font-family: verdana;
}

/*# sourceMappingURL=stylesass.css.map */

La rappresentazione della E COMMERCIALE (&) per richiamare i PSEUDOSELETTORI

Inseriamo un ancora nella pagina e stilizziamola nel file corrispondente SCSS con il seguente codice scss aggiunto appena sotto il body:

a {
color:red;
&:hover {
  color:rgb(94, 255, 0);
}

La & (e commerciale) sostituisce la A e consente una nidificazione! Provare per vedere l’effetto che fa! La nidificazione ricorda un pò un gioco di matriosche che contengono se stesse quasi all’ infinito, volendo proprio essere cinematografici nella didattica!

Fondamenti di web design 12: FLEXBOX, analisi delle proprietà FIGLI

In generale la questione FLEX é molto interessante perché predispone tutta una serie di funzionalità per ordinare gli elementi, per differenziarli tenendo conto del ridimensionamento della pagina, per fissare delle dimensione base degli stessi e per allineare un elemento a livello verticale alla base piuttosto che al centro piuttosto che alla fine (flex-end, center e flex-end). Questa ricchezza di opzioni sicuramente ci deve focalizzare di più su una tecnologia si ricca ma anche complessa perché ogni propietà funziona congiuntamente con altri elementi dell’ elemento padre e in alcuni casi vanno settate le altezze, lo studio quindi varia da caso a caso e va soprattutto testato sul campo con il codice. Le propeità dei box figli a cui accenneremo ora sono:

flex-grow
flex-shrink
flex-basis
flex-self
flex-order

La proprietà flex-grow specifica quanto crescerà l’elemento rispetto al resto degli elementi flessibili all’interno dello stesso contenitore. Vediamo la propietà flex-grow in action:

<!DOCTYPE html>
<html>
<head>
<style>
#main {
  width: 350px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
}

#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}
</style>
</head>
<body>

<h1>The flex-grow Property</h1>

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
</div>

<p><b>Note:</b> Internet Explorer 10 and earlier versions do not support the flex-grow property.</p>

</body>
</html>

Vediamo ancora un altro esempio sempre sulla dimensionalità di un elemento rispetto agli altri:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-grow Property</h1>

<p>Make the third flex item grow eight times faster than the other flex items:</p>

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>

</body>
</html>

di default possiamo applicare anche questa proprietà senza specificarla in quanto flex ha tre parametri jolly che si possono usare per definire i settaggi, nel primo numero prende in considerazione flex-grow, nel secondo flex-shrink che è la funzione opposta e il terzo parametro come valore é flex-basis, vediamo un esempio dove viene settato solo il primo parametro nel contenitore padre:

<!DOCTYPE html>
<html>
<head>
<style> 
#main {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  display: flex;
}

#main div {
  -ms-flex: 1;  /* IE 10 */  
  flex: 1;
}
</style>
</head>
<body>

<h1>The flex Property</h1>

<div id="main">
  <div style="background-color:coral;">RED</div>
  <div style="background-color:lightblue;">BLUE</div>  
  <div style="background-color:lightgreen;">Green div with more content.</div>
</div>

<p><b>Note:</b> Internet Explorer 9 and earlier versions do not support the flex property.</p>

<p><b>Note:</b> Internet Explorer 10 supports an alternative, the -ms-flex property. IE11 and newer versions fully support the flex property (do not need the -ms- prefix).</p>

</body>
</html>

La proprietà flex-shrink specifica come l’articolo si restringerà rispetto al resto degli articoli flessibili all’interno dello stesso contenitore. Esempio:

<!DOCTYPE html>
<html>
<head>
<style> 
#main {
  width: 350px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
}

#main div {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100px;
}

#main div:nth-of-type(2) {
  flex-shrink: 3;
}
</style>
</head>
<body>

<h1>The flex-shrink Property</h1>

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
</div>

<p><b>Note:</b> Internet Explorer 10 and earlier versions do not support the flex-shrink property.</p>

</body>
</html>

Ovviamente stiamo parlando di restringimento, perché a pieno schermo non noterò anomalie di larghezza, vediamo un altro esempio:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-shrink Property</h1>

<p>Do not let the third flex item shrink as much as the other flex items:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

</body>
</html>

A questo punto passiamo ad analizzare il flex-basis che mostrerà sempre lo stesso ridimensionamento anche sul resize. La proprietà base flessibile specifica la lunghezza iniziale di un elemento flessibile:

<!DOCTYPE html>
<html>
<head>
<style>
#main {
  width: 300px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
}

#main div {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50px;
}

#main div:nth-of-type(2) {
  flex-basis: 100px;
}
</style>
</head>
<body>

<h1>The flex-basis Property</h1>

<p>Set the initial length of the flex items to 50 pixels, with an exception; set the initial length of the second flex item to 100 pixels:</p>
<div id="main">
  <div style="background-color:coral;">50px</div>
  <div style="background-color:lightblue;">100px</div>
  <div style="background-color:khaki;">50px</div>
  <div style="background-color:pink;">50px</div>
  <div style="background-color:lightgrey;">50px</div>
</div>

<p><b>Note:</b> Internet Explorer 10 and earlier versions do not support the flex-basis property.</p>

</body>
</html>

vediamo anche un altro esempio dinamico basato sullo stesso principio:

<!DOCTYPE html>
<html>
<head>
<style>
#main {
  width: 350px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
}

#main div {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">Red DIV</div>
  <div style="background-color:lightblue;" id="myBlueDiv">Blue DIV</div>
</div>

<p>Click the "Try it" button to set the value of the flexBasis property to "200px" for the blue div element</p>

<button onclick="myFunction()">Try it</button>

<p><b>Note:</b> Internet Explorer 10 and earlier versions earlier versions do not support the flexBasis property.</p>

<script>
function myFunction() {
  document.getElementById("myBlueDiv").style.flexBasis = "200px";
}
</script>

</body>
</html>

Ora passiamo ad analizzare align-self. La proprietà align-self specifica l’allineamento per l’elemento selezionato all’interno del contenitore flessibile:

<!DOCTYPE html>
<html>
<head>
<style> 
#main {
  width: 220px;
  height: 300px;
  border: 1px solid black;
  display: flex;
  align-items: flex-start;
}

#main div {
  flex: 1;
}

#myBlueDiv {
  align-self: center;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">RED</div>
  <div style="background-color:lightblue;" id="myBlueDiv">BLUE</div>  
  <div style="background-color:lightgreen;">Green div with more content.</div>
</div>

<p><b>Note:</b> The align-self property overrides the container's align-items property.</p>

<p><b>Note:</b> Internet Explorer 10 and earlier versions do not support the align-self property.</p>

</body>
</html>

vediamo un altro esempio:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-self Property</h1>

<p>The "align-self: center;" aligns the selected flex item in the middle of the container:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

<p>The align-self property overrides the align-items property of the container.</p>

</body>
</html>

Per ordinare gli elementi uso la proprietà order che appunto specifica l’ordine di un articolo flessibile rispetto al resto degli articoli flessibili all’interno dello stesso contenitore:

<!DOCTYPE html>
<html>
<head>
<style> 
#main {
  width: 400px;
  height: 150px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex; /* Safari */
  display: flex;
}

#main div {
  width: 70px;
  height: 70px;
}

/* Safari 6.1+ */
div#myRedDIV   {-webkit-order: 2;}
div#myBlueDIV  {-webkit-order: 4;}
div#myGreenDIV {-webkit-order: 3;}
div#myPinkDIV  {-webkit-order: 1;}

/* Standard syntax */
div#myRedDIV   {order: 2;}
div#myBlueDIV  {order: 4;}
div#myGreenDIV {order: 3;}
div#myPinkDIV  {order: 1;}
</style>
</head>
<body>

<h1>The order Property</h1>

<div id="main">
  <div style="background-color:coral;" id="myRedDIV"></div>
  <div style="background-color:lightblue;" id="myBlueDIV"></div>
  <div style="background-color:lightgreen;" id="myGreenDIV"></div>
  <div style="background-color:pink;" id="myPinkDIV"></div>
</div>

<p><b>Note:</b> Internet Explorer 10 and earlier versions do not support the order property.</p>

<p><b>Note:</b> Safari 6.1 (and newer) supports an alternative, the -webkit-order property.</p>

</body>
</html>

L’ideale per capire bene il potenziale offerto da FLEX e mettere in piedi dei progetti e lavorarci perché c’è molta teoria che rischia di essere pura astrazione se non diventa caso reale da testare.

Figure professionali per il DEVELOPER PLATFORM usando il framework ASP NET: parte 3, personalizzare l’editor Visual Studio Code

Dopo aver visto i comandi da finestra terminale e da riga di comando con il comando dotnet seguito da qualche cosa e anche come installare pacchetti aggiuntivi con NuGet, approfondiamo Visual Studio Code, l’editor leggero e snello che ci consentirà di programmare in C# senza appesantire troppo il nostro hard disk, editor che abbiamo imparato a conoscere da https://umbriawayincrementa.wordpress.com/2020/09/03/figure-professionali-per-il-developer-platform-usando-il-framework-asp-net-parte-2-entrare-nel-vivo-con-i-comandi-dotnet-da-finestra-terminale-e-usifruire-di-pacchetti-aggiuntivi-con-nuget/. L’editor si può scaricare da https://code.visualstudio.com/ e l’errore che si fa spesso è quello di considerare questo editor in apparenza limitato alle potenzialità offerte da un ambiente integrato come Visual Studio. Grazie all’ uso di estensioni può supportare una enorme quantità di linguaggi e risolvere problemi tecnici tra i più svariati, nonchè migliorare la qualità della nostra programmazione manuale, basti pensare ad Emmet per esempio, indirizzo https://emmet.io/ ; Una volta aperto Visual Studio sulla sinistra presenta alcune voci di menù come la sezione HELP dove ci conviene dare una sbirciatina a INTRODUCTORY VIDEOS mentre sulla destra ci sono ulteriori approfondimenti da spulciare alla voce INTERACTIVE PLAYGROUND. Anche INTERFACE OVERVIEW è da visionare perchè spiega i cinque link a incona sulla barra laterale sinistra. Certamente l’ultimo riquadro delle estensioni è molto importante. Esiste una finestra terminale che si lancia con CTRL + ò da dove posso lanciare i miei comandi dotnet. Posso cambiare anche il tema e i colori anche usando la COMMAND PALETTE in alto e cercando THEME. Si lavora molto con gli short-cut ossia con le combinazioni di tasti. Per lavorare in C# devo installare l’estensione specifica e ricaricare per rendere effettiva l’installazione. Anche OMNISHARP va installato perchè invia il codice dall’ editor al compilatore funzionando da PONTE. In questo modo scrivendo il codice mi verrà suggerito il metodo che voglio applicare. Quando scrivo il codice se erro nella digitazione ho la possibilità di capire che cosa c’è che non funziona posizionandomi sopra e azionando omnisharp che indicherà l’anomalia da correggere. Poi abbiamo dei FIX utili per il refactoring con delle lampadine visualizzate che per esempio ci indicheranno delle using non più necessarie. Facciamo un piccolo riassunto sugli accessi rapidi:

  • con F1 apro la command palette di Visual Studio Code per le interrogazioni veloci
  • per aprire e chiudere il terminale integrato in Visual Studio Code CTRL+ò
  • Mostrare i fix per migliorare il codice e correggere gli errori si usa CTRL+.
  • Compilare l’applicazione CTRL + SHIFT + B
  • Per aumentare e ridurre lo zoom UI CTRL++ e CTRL +-

A questo punto dobbiamo investigare le capacità di debugging dell’ editor. Un BUG è un errore che abbiamo commesso e che dobbiamo correggere. Il debugger è uno strumento software che va a scandagliare il codice a caccia di errori. L’interazione è anche bidirezionale perchè posso forzare la chiusura del flusso in punti specifici per capire se fino a quel punto vi erano anomalie. Con F5 si avvia l’applicazione di debug. In alto compare una barra fluttuante che ci consente di stoppare o riavviare l’applicazione. Il breakpoint è un punto di interruzione così il debug si arresterà proprio in quel punto. Con F9 fisso i punti di stop. In questo modo posso ispezionare gli oggetti anche nei sottolivelli di difficoltà composti da altri oggetti e da altre proprietà. CTRL + S salva le modifiche e F5 ripristina l’applicazione. CTRL + SHIFT + F5 ricompila il codice e rende effettive eventuali modifiche. I breakpoint sono così definiti in wikipedia: “nell’ambito dello sviluppo del software, un breakpoint è un punto di interruzione nel codice di un programma, normalmente usato per scopi di debugging. Un breakpoint è sostanzialmente uno strumento che consente di eseguire un programma con la possibilità di interromperlo in punto desiderato oppure quando si verificano determinate condizioni, allo scopo di acquisire informazioni su un programma in esecuzione. In particolare, il programmatore può analizzare eventuali file di log, lo stato delle variabili o dei registri, e così via, per verificare se il programma funziona come previsto o, in caso contrario, per risalire alla causa del malfunzionamento (bug)”. Il pannello WATCH sulla sinistra è molto importante perchè copiando il metodo sul pannello scopriamo se la condizione VERA per esempio e non crea problemi.Con CTRL + T posso cercare codice specifico all’ interno dei file con il simbolo del cancelletto. Cont CTRL + SHIFT + O ricerco con il simbolo di chiocciola ma non tutte le ricerche fanno uso di simboli come per esempio il contenuto dei file XML. Tutto ciò per migliorare la navigabilità dell’ applicazione al posto di impazzire manualmente cercando i file individualmente.Con CTRL + P non ho prefissi e simboli e posso cercare direttamente i file. CTRL + G posso cercare per riga di codice, ricerca molto utile quando il compilatore segnala errori su un file alla riga Numero X per esempio. ALT freccia a destra o ALT e freccia a sinistra posso navigare tra le classi e i rispettivi file che la utilizzano, tutto ciò ci responsabilizza sull’ enorme varietà di tecniche messe a disposizione dall’ editor per navigare il codice senza fare diecimila click sui file, con gli short-cut e le scorciatoie da tastiera possiamo davvero velocizzare la nostra programmazione. RIASSUMENDO con Umbriaway Consulting: per aprire un nuovo progetto, clicchiamo il menu File > Open Folder…, oppure premiamo i tasti Ctrl+K e subito dopo Ctrl+O (questo è quel che si chiama un “accordo”). Infine selezioniamo la directory principale del progetto ASP.NET Core, ovvero quella in cui si trova il file .csproj. All’apertura di un qualsiasi file C#, se abbiamo già installato l’estensione C#, ci verrà proposto di creare la configurazione necessaria per avviare e debuggare l’applicazione con Visual Studio Code. Accettando, verrà creata una sottodirectory .vscode che contiene tutta la configurazione di build e avvio del progetto corrente. L’applicazione può essere così avviata in debug con il tasto F5. Visual Studio Code possiede una Command Palette, che consiste di una casella di testo polivalente che è richiamabile con varie scorciatoie da tastiera. In base alla scorciatoia usata, la Command Palette offre funzionalità diverse: Con F1 si predispone alla ricerca ed esecuzione di uno dei comandi disponibili in Visual Studio Code. Alcuni di questi comandi sono anche richiamabili dai menu (ad esempio: impostazione del tema per cambiare i colori e lo stile dell’interfaccia); con Ctrl+P permette di cercare e aprire file in base al nome; con Ctrl+T si attiva la ricerca per simbolo in tutta l’applicazione. Un simbolo è un elemento nel codice sorgente che possiede un nome, come ad esempio una classe, un metodo, una proprietà, un campo privato, una costante, un’enumerazione, un’interfaccia e così via; con Ctrl+Shift+O si cerca tra i simboli locali, ovvero definiti nel file di codice C# attualmente aperto; con Ctrl+G si può saltare alla riga indicata del file attualmente aperto.