Programmazione Web Italia Codice, metodologie e idee dal mondo dello Sviluppo WebPWI Programmazione Web ItaliaHTMLCSSJSEng.NodeSecuritySegui su:
Sei in:
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...
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!
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...
... 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...
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!
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!
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...
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() 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...
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..
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...
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.
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...
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.
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.
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...
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?"
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...