Segui su:
Programmazione Web Italia

Tutti i Post

Attributo "loading" in HTML5: migliora performance e UX con il lazy load nativo!

Attributo loading in HTML5: migliora performance e UX con il lazy load nativo!

Migliorare le prestazioni e il caricamento delle pagine web in maniera nativa senza ricorrere a soluzioni di terze parti ora è più semplice che mai. Impara ad utilizzare l'attributo "loading" di HTML5 per le immagini e gli iframe!

Introduzione

Breve descrizione dell'attributo "loading"

L'attributo loading in HTML5 è stato introdotto per migliorare l'efficienza del caricamento delle pagine web. Questo attributo, applicabile alle immagini (<img>) e agli iframe (<iframe>), consente agli sviluppatori di specificare come e quando questi elementi devono essere caricati rispetto alla visualizzazione del contenuto da parte dell'utente (per esempio: se l'immagine non è ancora visibile perchè ancora below-the-fold). La sua funzione principale è ottimizzare l'utilizzo delle risorse, ritardando il caricamento degli elementi non essenziali fino a quando non diventano visibili nel viewport a seguito dell'attività di scrolling dell'utente. In questo modo, si riducono i tempi di caricamento iniziali della pagina, migliorando sia l'esperienza utente (UX) sia il posizionamento nei motori di ricerca, che premiano le pagine con prestazioni elevate.

Perché è importante per il caricamento delle immagini e degli iframe

Il caricamento delle immagini e degli iframe può avere un impatto significativo sulle prestazioni di una pagina web. Elementi visivi di grandi dimensioni o contenuti esterni, come quelli incorporati tramite iframe, possono rallentare il tempo necessario per rendere la pagina ...[Continua]

Pubblicato il

Variabili in CSS: scopri le Custom Properties e migliora il codice dei tuoi fogli di stile!

Variabili in CSS: scopri le Custom Properties e migliora il codice dei tuoi fogli di stile!

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!

Introduzione alle variabili in CSS

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.

Cosa sono le variabili in CSS?

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]

Pubblicato il

JavaScript Promise: impara a gestire eventi asincroni! (con aggiornamento al metodo "Promise.withResolvers")

Impara a gestire efficacemente eventi asincroni con le JavaScript Promise!

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! ;)

Cos'è una operazione asincrona?

Le funzioni generatrici in JavaScript

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"

In un codice sincrono le istruzioni vengono eseguite in ordine una dopo l'altra

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]

Pubblicato il

Cosa sono i Generator in JavaScript? Scopri tutte le potenzialità dei Generatori!

Cosa sono i Generator in JavaScript? Scopri tutte le potenzialità dei Generatori!

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.

Introduzione

Le funzioni generatrici in JavaScript

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".

Differenza tra una funzione ordinaria e una funzione generatrice

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]

Pubblicato il

La Security by Design - scopri quali sono i 10 paradigmi della Sicurezza Web

La Security by Design - scopri quali sono i 10 paradigmi della Sicurezza Web

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?

Il concetto di Security by Design

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]

Pubblicato il

Tech Review dei principali portali e-commerce di moda in Italia

Tech Review dei principali portali e-commerce di moda in Italia

Confronto tra i maggiori portali di e-commerce di moda italiani in termini di: Performance 🚀, Accessibilità ♿, Best Practice ⭐, SEO 🔎 e Sicurezza 🛡.

Analisi tecnica dei portali e-commerce

Categoria: PRINCIPALI E-COMMERCE DI MODA ITALIANI


L'analisi è stata svolta con l'ausilio di strumenti quali Google Lighthouse e Mozilla Observatory.


Risultati generali

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...

Pubblicato il

Un esempio di Curriculum Vitae efficace per trovare lavoro come software developer

Un esempio di Curriculum Vitae efficace per trovare lavoro come software developer

In pochi paragrafi un Curriculum Vitae deve essere in grado di descriverci a persone che di noi nulla sanno... Anni di studio e lavoro condensati in una o due facciate, massimo. Un foglio (o file PDF) messo in competizione con tanti altri, generalmente tutti uguali. Come far emergere le nostre peculiarità e le nostre competenze?
Qui di seguito una serie di suggerimenti ed una proposta di template. Ma la prima regola rimane... NO file Word!

Introduzione

Lo scopo di questo articolo è quello di aiutare a redigere un Curriculum Vitae sintetico, facile da consultare ed efficace nel comunicare, a chi lo legge, le nostre competenze e la nostra personalità. Il Curriculum che andremo a redigere è focalizzato sulla descrizione delle competenze di uno sviluppatore software, ma può essere facilmente adattato ad ogni altra figura professionale interessata ad applicare questi suggerimenti.

Sarà un CV molto focalizzato sulle caratteristiche personali di chi lo redige: ad una classica sezione "Su di me" affiancheremo delle frasi d'effetto (considerazioni o citazioni) e una sezione basata sui progetti personali del candidato. In questo modo potranno emergere la personalità e la peculiare visione che il candidato ha circa la propria attività, non limitando il testo ad una sterile elencazione di competenze tecniche.

La sezioni, i titoli e i paragrafi, gli elenchi sono fatti in modo tale da essere il più possibile chiari anche ai software di analisi automatica, caratteristica che si traduce in maggiore efficenza e tempo risparmiato al candidato.

Il CV sarà il più possibile sintetico (massimo 2 facciate) ma esaustivo, riportando solo i dettagli più salienti e lasciando spazio ad eventuali approfondimenti da discutere in sede di colloquio. Continua...

Pubblicato il

Tabella dinamica in HTML, Javascript e CSS - parte 2:
popolare una tabella HTML con dati ottenuti da sorgenti remote

Tabella dinamica in HTML, Javascript e CSS - parte 2: popolare una tabella HTML con dati ottenuti da sorgenti remote

Nella parte precedente...

... 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.

Popolare una tabella HTML con dati ottenuti da sorgenti remote

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...

Pubblicato il

I tre paradigmi di programmazione: strutturata, ad oggetti e funzionale

I tre paradigmi di programmazione: strutturata, ad oggetti e funzionale

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.

Programmazione strutturata

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...

Pubblicato il

Tabella dinamica in HTML, Javascript e CSS - Parte 1:
una tabella statica

Tabella dinamica in HTML, Javascript e CSS - Parte 1: una tabella statica

Funzionalità come il sorting e la paginazione permettono di interagire con una tabella in maniera più veloce ed efficente, spesso ci si affida a soluzioni di terzi, ma in questa guida vorrei farvi provare a sviluppare una tabella dinamica partendo da zero e utilizzando solo le versioni vanilla di HTML, JavaScript e CSS. Spero di esservi utile!

Introduzione

La nostra tabella dinamica si svilupperà in maniera progressiva partendo da una semplice soluzione statica con i dati tabellari scritti a mano dallo sviluppatore, procedendo con l'inserimento di dati ottenuti attraverso una chiamata HTTP e aggiungendo, infine, funzionalità più avanzate come la paginazione, il sorting e il filtering. Le varie sezioni saranno elaborate in momenti differenti e potrebbero non essere ancora disponibili: incoraggiate il mio lavoro condividendo questa pagina o mettendo un like!

Una semplice tabella statica HTML

Per iniziare e per ripassare un poco l'argomento, sviluppiamo una semplice tabella HTML utilizzando i tag previsti nelle specifiche HTML5. Qui di seguito scrivo il codice che definisce una tabella per un insieme di ipotetici utenti. Continua...

Pubblicato il

Il selettore :has() in CSS - descrizione ed esempi pratici

Il selettore :has() in CSS - descrizione ed esempi pratici

Il selettore :has(), proposto nelle specifiche CSS level 4, fin dalla fine del 2023 è adottato dalla maggior parte dei browser: è giunto il momento di capire come utilizzare questa nuova opportunità.

Il selettore :has() in CSS4

Il selettore :has() consente agli sviluppatori di selezionare elementi del DOM che contengono al loro interno elementi che rispondono al selettore passato come parametro nella funzione: :has(). E' essenzialmente un selettore che permentte di ottenere il "parent" degli elementi definiti attraverso il parametro.

Provo a fare un semplice esempio chiarificatore Continua...

Pubblicato il

Setup di un progetto Node / Express

Setup di un progetto Node / Express

Esistono tante guide per fare il setup di un progetto Node / Express, in questa vorrei però aggiungere la descrizione di qualche strumento e metodologia applicati in ambito professionale. Spero che questo contribuisca alla condivisione dell'articolo..

Cosa faremo

Procederemo al setup di un piccolo progetto Web, alla fine dell'articolo avremo un server in ascolto su una specifica rotta e un semplice messaggio testuale come risposta. La funzionalità è decisamente minima, ma sufficiente per illustrare alcuni degli strumenti e mettere in pratica certe metodologie di sviluppo che spesso troviamo applicate in ambienti di lavoro professionali. Come anticipato, non ci focalizzeremo sulla sola implementazione tecnica, ma agiremo a più ampio spetto introducento concetti e pratiche provenienti dall'ambito professionale. Continua...

Pubblicato il

Architettura del Software: definizione e obiettivi

Architettura del Software: definizione e obiettivi

Tutti abbiamo almeno una idea vaga di cosa si intende per "Architettura del Software", ma penso che solo alcuni abbiano in mente concetti, pratiche e vantaggi precisi che ne derivano.

Architettura del Software: una definizione

Con Architettura del Software ci riferiamo alla struttura di un sistema software e alla progettazione delle interfacce dei suoi componenti; comprende le decisioni di progettazione che determinano quali parti compongono l'applicazione e come queste interagiscono e lavorano assieme per raggiungere gli obiettivi richiesti. Queste decisioni includono la struttura del filesystem (i file e le cartelle), la scelta dei framework da adottare, la definizione delle interfacce tra le diverse componenti che costituiscono l'applicazione, la gestione dei dati, la distribuzione delle responsabilità tra i moduli e altro ancora.
Un'architettura ben progettata facilita la manutenzione, l'aggiornamento e l'aggiunta di funzionalità del software nel tempo ponendo la giusta attenzione ad aspetti quali: la scalabilità, la sicurezza, la manutenibilità e la flessibilità per garantire che il software possa crescere Continua...

Pubblicato il

L'attributo 'ping' del tag <a> in HTML5

L'attributo 'ping' del tag <a> in HTML5

Fin dalla sua pubblicazione HTML5 ha introdotto alcuni attributi che, seppur interessanti, non sono mai stati usati o compresi fino in fondo, l'attributo 'ping' è secondo me uno di questi.

Cos'è l'attributo "ping"?

L'attributo "ping", introdotto in HTML5, è un attributo poco utilizzato del tag <a>. Molto semplicemente, serve a specificare una serie di URL che verranno richiamati automaticamente quando un link viene seguito dall'utente (al "click", per intenderci). Questo attributo può essere utile in diverse situazioni, in particolare per scopi di monitoraggio e analisi.

Utilizzo: come utilizzare l'attributo "ping"

Spesso è utile sapere se un utente ha cliccato un dato link (tipicamente un link che punta ad una risorsa esterna al nostro sito, sulla quale non abbiamo controllo). In questi casi, il comportamento Continua...

Pubblicato il

Le Closure in JavaScript

Le Closure in JavaScript

Tutte le volte che ho dovuto affrontare il discorso CLOSURE in JS finivo per avere una impressione riassumibile nella frase: "Tutto molto bello, ma... QUINDI?"

Cosa sono le closure in JavaScript?

Una closure è la capacità di una funzione, definita all'interno di un'altra funzione contenitrice, di accedere allo scope della funzione esterna, anche dopo che questa ha cessato la sua esecuzione. Attraverso le closure (ed ad un apposito handler), insomma, posso accedere allo scope (metodi e attributi) di una funzione (quella contenitrice) da un qualsiasi ambito esterno.

Ecco un esempio di closure. Continua...

Pubblicato il