Programmazione Web Italia

14/03/2025

In termini di sicurezza e scalabilità, i JSON Web Token (JWT) emergono come la chiave per garantire un’autenticazione sicura, efficiente e senza soluzione di continuità. Scopri come questa tecnologia può rivoluzionare il modo in cui gestisci l’accesso alle tue risorse online!

Scopri i JSON Web Token (JWT) - autenticazione stateless per le tue applicazioni web!

I JWT e l'autenticazione token-based: cosa sono e come funzionano i JSON Web Token. Esempi pratici, vantaggi e svantaggi, best practice dell'autenticazione senza stato

17/01/2025

IL TAG IN HTML5 - ESEMPI E SPIEGAZIONE SU COME GENERARE FINESTRE DI DIALOGO
Una modalità nativa per gestire i dialogi modali (o non modali) all'interno delle nostre applicazioni... Finalmente si possono evitare soluzioni custom o di terze parti e focalizzarsi maggiormente sulle funzionalità core!

Leggi l'articolo:

Come utilizzare il nuovo tag di HTML5 per generare finestre modali e non modali. I vantaggi di una soluzione nativa ed esempi di codice

10/01/2025

Quando il nostro codice deve rimanere in ascolto di eventi che vengono generati troppo frequentemente, è possibile un notevole calo delle prestazioni e conseguente deterioramento dell'esperienza utente. Uno sviluppatore deve saper agire di conseguenza togliendo dal suo cappello virtuale due degli strumenti più utili in questi casi: il debouncing e il throttling!

Gestire le prestazioni e mantenere la user experience quando si deve ascoltare e reagire ad eventi che vengono generati troppo frequentemente. Una guida al throttiling e al debouncing in JavaScript con esempi pratici e codice!

01/01/2025

Come progettare e sviluppare un software attraverso un approccio simile a quello che vediamo in Natura.

Scopri come adottare una metodologia che pone in primo piano la struttura del progetto, le relazioni tra i suoi componenti e i requisiti da soddisfare, sviluppandoli in maniera organica, coesa e olistica.

Sviluppare un software attraverso un apprioccio simile a quello che vediamo in Natura: una metodologia che pone in primo piano la struttura del progetto, le relazioni tra i suoi componenti e i requisiti da soddisfare, sviluppandoli in maniera organica, coesa e olistica.

19/12/2024

Ottimizza le tue immagini con l'attributo 'srcset' in HTML5!

Utilizza l'attributo 'srcset' per il caricamento delle immagini responsive e rendi il tuo sito più veloce e ottimizzato.
Con 'srcset', puoi fornire diverse versioni della stessa immagine, in modo che i dispositivi carichino automaticamente quella più adatta, migliorando così le prestazioni e l'esperienza utente.

Un esempio:



Cosa fa l'attributo 'srcset'?
L’attributo 'srcset' permette di specificare una lista di immagini alternative, insieme a una descrizione delle loro dimensioni. In base alla risoluzione o alla densità del display dell'utente, il browser sceglierà l'immagine più appropriata da caricare. Questo migliora l'efficienza del caricamento, riducendo i tempi di download e ottimizzando la qualità dell'immagine per il dispositivo.

Nell'esempio proposto
- src: è l'immagine di fallback, ossia quella che verrà caricata se il browser non supporta 'srcset' o non trova immagini adatte
- srcset: definisce un elenco di immagini con le dimensioni relative specificate in pixel (con w per la larghezza)
per es: immagine-media.jpg 1000w: questa immagine è larga 1000 pixel
- alt: testo alternativo che descrive l’immagine per motivi di accessibilità e SEO

Come funziona?
Il browser utilizza il valore di 'srcset' in combinazione con le dimensioni effettive del display dell’utente per decidere quale immagine caricare. Le variabili principali che influenzano la scelta sono:
larghezza del viewport (espressa in pixel).
densità del display (espressa come rapporto tra i pixel del dispositivo e quelli CSS, ad esempio 1x, 2x o 3x per i display Retina).

Un monitor con 800px di larghezza caricherà probabilmente immagine-piccola.jpg (500w), perché è la più vicina al valore richiesto.
Un dispositivo ad alta densità (es. smartphone con display Retina, densità 2x) e larghezza del viewport di 400px potrebbe caricare immagine-media.jpg (1000w), perché serve un’immagine con più dettagli.

E' il browser che decide l'immagine più adatta...

Come migliorare ulteriormente?
Puoi aggiungere anche l’attributo 'sizes' per specificare in modo più dettagliato come dimensionare le immagini in base al layout.



- sizes indica lo spazio disponibile (in viewport width, vw) per l’immagine.
Fino a 600px di larghezza: l'immagine occupa tutto il viewport (100vw).
Fino a 1200px: occupa metà del viewport (50vw).
Altrimenti, occupa un terzo del viewport (33vw).

Così il browser può scegliere ancora più accuratamente quale immagine caricare!

09/12/2024

Novità JavaScript: Promise.withResolvers()

E' ora disponibile una soluzione più semplice per creare e gestire le Promise con i relativi metodi resolve e reject. Con Promise.withResolvers(), introdotto di recente, il tuo codice diventa più pulito e leggibile!
Promise.withResolvers() è un’API sperimentale di JavaScript che permette di creare una Promise già associata ai metodi resolve e reject. Questo consente di gestire più agevolmente la risoluzione o il rifiuto della Promise stessa senza la necessità di definire resolve e reject all'interno dell'esecuzione di una nuova Promise. La sintassi è semplice...

Come funziona?
Promise.withResolvers() è un metodo statico che restituisce un oggetto contenente:
1. una Promise da risolvere o rifiutare
2. i metodi resolve e reject per gestirla comodamente

Un esempio concreto

function fetchData() {

// Ecco il nostro metodo, che resituisce gli handler utilizzati in seguito
const { promise, resolve, reject } = Promise.withResolvers();

// Simulazione di una richiesta asincrona
setTimeout(() => {
const success = Math.random() > 0.5;
if (success) {
resolve("Dati ricevuti con successo!");
} else {
reject("Errore nella ricezione dei dati.");
}
}, 1000);
return promise;
}

fetchData()
.then(data => console.log(data))
.catch(error => console.error(error));

Perché usarlo?
✅ Rende il codice più leggibile.
✅ Evita boilerplate, eliminando la necessità di creare manualmente una Promise e legarne i metodi.
✅ Perfetto per scenari dove è richiesto un controllo esplicito su resolve e reject.

Attenzione!
Promise.withResolvers() è una funzionalità recente, quindi assicurati di utilizzare una versione aggiornata del tuo ambiente JavaScript o controlla la compatibilità con i tuoi tool.

05/12/2024

Scopri il nuovo attributo "loading" in HTML5 e migliora le prestazioni e il caricamento delle pagine web in maniera nativa!

Senza ricorrere a soluzioni di terze parti, ora è più semplice gestire la priorità delle risorse da caricare.

www.progweb.it/html-attributo-loading-lazy-load

Ottimizza il caricamento delle risorse e l'esperienza utente direttamente in HTML. Vantaggi, esempi, best practice e compatibilità con i browser più diffusi dell'attributo "loading" in HTML5

04/12/2024

Una DONNA è in grado di programmare?
In Programmazione Web Italia pensiamo di sì!

Che tu sia alle prime armi, o sia già una sviluppatrice web affermata, lasciati guidare dalla nostra ambasciatrice Marisa nel mondo della programmazione web e scommettiamo che troverai spunti e idee che non conoscevi o alle quali non avevi ancora pensato!

Metti un "Mi piace" e segui la nostra pagina per rimanere aggiornata sul MONDO DELLA PROGRAMMAZIONE WEB!

Dimenticavo: i contenuti sono tutti in italiano! ;)

Tutti gli articoli sono disponibili sul nostro portale: www.progweb.it

03/12/2024

🎯 Ottimizza il caricamento delle immagini e delle risorse con l’attributo 'fetchpriority' in HTML5!

Con l’attributo 'fetchpriority', introdotto recentemente in HTML5, puoi influenzare la priorità di caricamento delle risorse, come immagini o script.

COME FUNZIONA?
Aggiungendo 'fetchpriority' alle tue risorse, puoi specificare se devono essere caricate con una priorità maggiore o minore rispetto al comportamento di default.

Esempio: una immagine da caricare con priorità maggiore


VANTAGGI
1. Ottimizza il caricamento delle immagini essenziali (ad esempio, immagini above-the-fold).
2. Riduce il tempo di rendering della pagina migliorando l’esperienza utente.
3. Funziona perfettamente insieme a tecniche di lazy-loading per bilanciare le performance.

⚠️ Nota bene
Usalo con attenzione: dare priorità troppe risorse può rallentare il caricamento di quelle davvero critiche.
"Se tutto è prioritario, nulla è prioritario."

COME VIENE INTERPRETATO DAI BROWSER
L'attributo 'fetchpriority' fornisce ai browser un suggerimento sulla priorità con cui dovrebbero scaricare una determinata risorsa, ma è importante sapere che la decisione finale spetta al browser stesso.

Risorse con priorità alta (fetchpriority="high")
Quando il browser incontra un elemento con fetchpriority="high", tenta di assegnargli una priorità elevata nella coda di caricamento.

Risorse con priorità bassa (fetchpriority="low")
Le risorse con priorità bassa vengono scaricate dopo quelle essenziali. Questo è utile per elementi che non influenzano immediatamente l'aspetto o la funzionalità della pagina, come immagini below-the-fold o risorse caricate in background.

Comportamento di default (fetchpriority assente)
Se non specificato, il browser assegna automaticamente una priorità basata sul contesto, ad esempio la posizione dell’elemento nella pagina o l’uso di attributi come loading="lazy".

COMPATIBILITÀ
Non tutti i browser attualmente supportano pienamente 'fetchpriority'. Ad esempio, i più recenti browser basati su Chromium (come Chrome ed Edge) hanno iniziato ad adottare questa funzionalità. In altri browser, l'attributo viene semplicemente ignorato senza causare errori.

Hai mai utilizzato questo attributo? Con quali risultati?

28/11/2024

Gli ultimi 15 anni di battaglia tra i Social Media più popolari, riassunti in un video!

Chi è il Social più popolare?
Quali Social sono stati sconfitti?

Chi si ricorda oggi di Google+ e MySpace? E Facebook è sempre stato il Social più utilizzato?

28/11/2024

In CSS esiste una tecnica per troncare un testo eccessivamente lungo aggiungendo dei puntini di sospensione raggiunto un limite prefissato.

Esempio
In HTML avremo:
Questo testo è troppo lungo, deve essere accorciato!

A video il risultato sarà:
"Questo testo è troppo lungo, deve..."

Di seguito ti mostro come fare...

Per un testo su una singola riga
Utilizza la proprietà text-overflow insieme a white-space e overflow (vedi la prima immagine codice)

Per un testo su più righe
Puoi utilizzare line-clamp (vedi la seconda immagine codice)

Nota: La tecnica con -webkit-line-clamp funziona principalmente su browser basati su WebKit (come Chrome, Edge, Safari). Per supportare browser meno moderni, possono essere necessari workaround con JavaScript.

Marisa