Programmazione Web Italia Codice, metodologie e idee dal mondo dello Sviluppo WebPWI Programmazione Web ItaliaHTMLCSSJSEng.NodeSecuritySegui su:
Finalmente anche CSS introduce l'uso delle variabili (in realtà dal 2015...)! Ufficialmente chiamate Custom Properties, il loro scopo è quello di aiutare lo sviluppatore ad organizzare e gestire meglio il suo codice. Qui troverai una introduzione con dettagli d'uso ed esempi pratici!
Negli ultimi anni, le variabili in CSS (note anche come "CSS Custom Properties") hanno trasformato il modo in cui progettiamo e gestiamo lo stile dei siti web. Con l'introduzione di questa funzionalità, è diventato possibile definire dei valori riutilizzabili all'interno di un foglio di stile, portando un notevole miglioramento in termini di manutenibilità e scalabilità del codice.
Le variabili sono valori che possiamo definire una volta e riutilizzare in più punti del nostro codice e permettono di centralizzare e organizzare le proprietà che vengono usate più volte, come colori, spaziature e dimensioni dei caratteri.
Grazie alle variabili, possiamo aggiornare lo stile di un'intera interfaccia modificando un solo valore (la variabile, per l'appunto), risparmiando tempo e riducendo errori. Questo migliora la coerenza e facilita la manutenzione del codice, rendendo lo stile più flessibile e adattabile.
In CSS, una variabile è una sorta di segnaposto per un valore che può essere riutilizzato in più punti del codice. Posso definire una variabile per il colore principale della nostra interfaccia e utilizzarlo ovunque sia necessario attraverso il nome dell variabile e senza dover ripetere manualmente il valore specifico. Modificando il valore della variabile, quindi solo una volta, tutte le proprietà che richiamano tale variabile saranno ...[Continua]
Ogni promessa è debito... Ma quanto è romantico il termine Promise in JavaScript? Sapere, poi, che dietro a questa parola si nasconde il fatto di non fermare l'esecuzione single-thread del JavaScript Engine mentre si attende l'esito di una operazione asincrona rende tutto più commovente! ;)
Iniziamo prima definendo che cos'è la programmazione sincrona: in tale contesto il programma esegue tutte le istruzioni che lo compongono in maniera lineare una dopo l'altra. In altri termini, l'esecuzione attende di aver portato a termine una istruzione prima di passare a quella immediatamente successiva. Un esempio banale è il seguente, dove ogni log viene stampato a console esattamente come ce lo aspettiamo: "1", "2", "3"
console.log(1); // Prima istruzione
console.log(2); // Seconda istruzione
console.log(3); // Terza istruzione
La programmazione asincrona, invece, non è lineare e prevede che una istruzione venga eseguita dopo un'altra anche se definita precedentemente all'interno del codice. Questo è necessario quando vengono eseguiti compiti che prevedono un certo lasso di tempo per essere eseguiti (per esempio: una richiesta HTTP per ottenere delle risorse remote, una query ad un database o una operazione di I/O verso il disco rigido...). In questo caso è preferibile che l'esecuzione continui con il resto del codice senza dover attendere il risultato della prima operazione. Appena il risultato è pronto (per esempio: la richiesta HTTP ha restituito un JSON) sarà possibile riprendere...[Continua]
I generatori JavaScript sono poco conosciuti all'interno del panorama degli sviluppatori Web, ma, una volta compreso il loro funzionamento, offrono un notevole vantaggio nella gestione del codice e del flusso di dati. Dai concetti di base ai casi più specifici, in questo articolo si descriveranno le caratteristiche salienti e si proporranno differenti esempi pratici questo particolare strumento.
Le funzioni generatrici (generators) sono state introdotte con ECMAScript 6 (ES6), la loro particolarità principale è riferita al fatto che l'esecuzione del loro codice può essere interrotta e ripresa più volte generando e restituendo valori "intermedi" al metodo chiamante. Grazie alla loro capacità di sospendere e riprendere l'esecuzione, sono una scelta ottimale nel caso di iterazioni complesse, flussi di dati, implementazioni asincrone o quando si lavora con sequenze di valori o calcoli "on demand".
A differenza di una normale funzione, che restituisce un solo valore al termine della sua esecuzione, i generatori JavaScript restituiscono molteplici valori mano a mano che il loro codice viene eseguito.... [Continua]
Come e perchè integrare i principali paradigmi di sicurezza nell'implementazione del nostro sistema software fin dalle primissime fasi di progettazione. Che cosa significa il concetto di "Security by Design" e quali sono i vantaggi che offre?
La Security by Design è un approccio fondamentale nello sviluppo software che mira ad integrare l'implementazione della sicurezza fin dalle prime fasi del ciclo di vita del software. In un tale approccio, gli strumenti e le tecniche di sicurezza fanno parte integrante dello sviluppo e non sono una sua appendice da integrare una volta che il lavoro di sviluppo principale è concluso. Il costo derivante dalla applicazione di questi principi è affrontato fin dalle prime fasi di sviluppo diventando un investimento piuttosto che un debito tecnico da affrontare in un momento successivo.
I principali pilasti su cui si basa la Cybersecurity sono raccolti sotto l'acronimo CIA (Confidentiality, Integrity, Availability) e sono definiti nel modo... [Continua]
Confronto tra i maggiori portali di e-commerce di moda italiani in termini di: Performance 🚀, Accessibilità ♿, Best Practice ⭐, SEO 🔎 e Sicurezza 🛡.
Categoria: PRINCIPALI E-COMMERCE DI MODA ITALIANI
L'analisi è stata svolta con l'ausilio di strumenti quali Google Lighthouse e Mozilla Observatory.
L'accessibilità e le regole SEO sono in generale sviluppate in maniera sufficente ma senza senza politiche applicative ben definite può capitare che certe sezioni siano carenti da questi punti di vista.
Critico, invece, è il discorso sicurezza: regole basilari e di facile implementazione vengono trascurate offrendo il fianco a diverse tipologie di attacco.
In generale le performance sono gravate da una interfaccia ricca e immagini ad alta risoluzione, dovute al fatto che il prodotto venduto debba essere ben visibile fin nei suoi piccoli particolari. Un possibile ottimizzazione potrebbe derivare dall'utilizzo dei tag <picture> e source> per caricare immagini di differente grandezza a seconda delle dimensioni dello schermo. Per esempio:
Vediamo più in dettaglio i risultati delle analisi, iniziamo con le Performance... Continua...
... Abbiamo ricreato una semplice e funzionale tabella che mostra i dati di tre ipotetici utenti; una ottima soluzione in caso di tabelle molto brevi e dati statici, ma cosa succederebbe se i dati fossero nell'ordine delle decine o centinaia? E cosa succederebbe se questi dati fossero serviti tramite JSON da servizi esterni? In questi casi è necessario sviluppare una soluzione dinamica che si occupi di eseguire il fetch (reperimento) dei dati ed il conseguente popolamento dinamico della tabella.
Lo vediamo in questo capitolo.
L'obiettivo è quello di popolare la tabella in maniera dinamica attraverso dati provenienti da una sorgente remota, per fare questo sarà necessario aggiungere un file JavaScript in cui gestiremo la chiamata remota e creazione delle righe della tabella. La sorgente esterna sarà fornita dalla url: https://jsonplaceholder.typicode.com/users, un servizio a scopo didattico che fornisce una lista di utenti in formato JSON.
La situazione iniziale prevede un file HTML simile al precedente, ma in questo caso non ci sarà alcun contenuto all'interno del tag <tbody>: questo sarà aggiunto dinamicamente. Ecco il contenuto. Continua...
I principali paradigmi di programmazione si riducono a tre: programmazione strutturata, programmazione ad oggetti e programmazione funzionale. Lo scopo di questo articolo è quello di evidenziarne i caratteri salienti e i vantaggi che derivano dalla loro applicazione.
Lo scopo della programmazione strutturata è la decomposizione di una applicazione software in moduli, ogni modulo può, a sua volta, essere suddiviso ricorsivamente in componenti più piccole, fino ad arrivare alla singola funzione atomica. Questo paradigma permette di affrontare un problema complesso (la nostra applicazione) attraverso un approccio divide-et-impera separando le sue funzionalità in unità più piccole e gestendole in maniera indipendente: è un approcciò più strategico nella gestione della complessità.
Ogni funzione può essere descritta tramite l'utilizzo delle tre strutture di controllo: sequenza, selezione e iterazione, ne deriva che tutti i programmi, a prescindere dalla loro complessità, possono essere descritti utilizzando solamente questi tre principi di base.
Un altro concetto importante circa il paradigma della programmazione strutturata e il suo approccio modulare riguarda il fatto che le funzioni atomiche risultanti dalla decomposizione sono soggette a test formali volti a verificare la presenza eventuale di bug: il successo del test ci dimostra che un tale bug è presente nel sistema che stiamo progettando; al contrario il fallimento del test ci può dare una ragionevole sicurezza che certuni bug non siano presenti, nonostante non sia formalmente possibile dimostrarne Continua...