Benvenuto su Programmazione Web Italia
Codice, metodologie e idee dal mondo dello Sviluppo Web

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

Introduzione

La gestione di popup e finestre modali è sempre stata una sfida per gli sviluppatori web. Tradizionalmente, questi elementi richiedevano combinazioni di HTML, CSS e JavaScript creati ad hoc dallo sviluppatore per funzionare correttamente. Con l'introduzione dell'elemento <dialog> in HTML5, questa complessità viene ridotta, offrendo una soluzione nativa e standard per creare finestre di dialogo accessibili e facili da gestire. In questo articolo esploreremo come utilizzare <dialog> e quali vantaggi offre...

Gestire le operazioni asincrone in JavaScript attraverso le Promise: una introduzione passo dopo passo alla programmazione asincrona.

Introduzione alle operazioni asincrone

Cos'è una operazione asincrona?

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

Tipologie di programmazione, Matematica e Scienza, Dijkstra e il goto... Un post sulla storia e sui concetti generali della Programmazione

Programmazione strutturata

Lo scopo della programmazione strutturata è la destrutturazione 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...

Gestire eventi che accadono o si susseguono ad intervalli di tempo molto frequenti in maniera efficente e senza appesantire la nostra app

Introduzione

Nella programmazione JavaScript, capita spesso di dover gestire eventi che accadono o si susseguono ad intervalli di tempo molto frequenti; per esempio lo scroll del mouse, il resize della finestra o la digitazione di alcuni caratteri all'interno di un campo di testo. Nel primo caso in elenco, lo scroll della rotellina del mouse per visualizzare il contenuto below-the-fold può generare decine se non centinaia (dipende dalla velocità di scroll) di eventi. Se il nostro compito, come programmatori, è quello di mettersi all'ascolto di questi eventi e lanciare l'esecuzione di un metodo ad ognuno di essi, potremmo incorrere in seri problemi di performance con rallentamenti visibili nelle applicazioni e conseguente degradazione della user experience.

Qui entrano in gioco due tecniche fondamentali: throttle e debounce. Entrambe servono a limitare il numero di volte in cui una funzione viene eseguita, ma lo fanno in modi diversi e con scopi differenti. In questo articolo vedremo ciascuna di queste tecniche, quando usarle e come implementarle.

Un approccio allo sviluppo software che si ispira al modo in cui gli organismi viventi crescono e si sviluppano in Natura seguendo una crescita equilibrata e interdipendente tra tutte le parti coinvolte

Introduzione

Concetto di sviluppo "organico" (o "evoluzionistico")

Lo sviluppo software è spesso percepito come un processo tecnico e lineare; cosa accadrebbe se lo considerassimo, invece, come qualcosa di più naturale e fluido? Da questa idea nasce il concetto di Sviluppo Organico, un approccio che si ispira al modo in cui gli organismi viventi crescono e si sviluppano in Natura seguendo uno sviluppo equilibrato e interdipendente tra tutte le parti che li compongono.

Proprio come un organismo non può crescere concentrandosi su una sola parte alla volta (un braccio, una gamba o un suo organo specifico) anche un software dovrebbe...

Migliorare l'efficienza del caricamento delle pagine web ritardando il caricamento delle immagini e degli iframe non ancora visibili a schermo

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

Attraverso le Custom Properties è ora possibile definire e riutilizzare delle variabili all'interno dei nostri fogli di stile.

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

Le funzioni generatrici (generators), introdotte con ECMAScript 6, permettono di eseguire, interrompere e riprendele l'esecuzione del loro codice... Come utilizzarle nel nostro progetto.

Introduzione

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

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

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

Il selettore :has() in CSS4

Il selettore :has() è una delle 4 pseudo-classi funzionali (insieme a: :is(); :where() e :not()) e 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 permette di ottenere il "parent" degli elementi definiti attraverso il parametro.

Provo a fare un semplice esempio chiarificatore...

a:has(img)

L'istruzione CSS qui sopra seleziona tutti gli elementi <a> che hanno al loro interno un elemento <img>...

Esistono tante guide per fare il setup di un progetto NodeJS/Express, in questa vorrei però aggiungere la descrizione di qualche strumento e metodologia spesso utilizzati in ambito professionale.

Introduzione

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 (come, per esempio, il versionamento del codice) che spesso troviamo applicate in ambienti di lavoro professionali. Non ci focalizzeremo, quindi, sulla sola implementazione tecnica, ma agiremo a più ampio spetto introducendo concetti e pratiche utili quando si scrive codice all'interno di un team...