Post di Godfred Obeng

🚀 Oggi sviluppo parallelo frontend backend. Il bello di usare TypeScript sia per Angular che per NestJS è che mi creo i DTO e le interfacce una sola volta per entrambi i framework 😀 ❣ Più avanti mi creerò dei pacchetti npm privati, che mi serviranno per i microservizi che sono incapsulati ma devono condividere alcuni servizi. Ad esempio il MessageService che ho creato deve girare su tutti i microservizi, è un servizio fondamentale perché crea un'istanza ClientProxy di ciascun microsv e attraverso il broker di messaggi permette di scambiare dati tra le varie app in modalità req/res o ad ascolto/emissione di eventi (come fanno i websocket). Poi c'è un gateway che a sua volta fa da proxy vs. i microsv da un lato, ed espone API REST e GraphQL dall'altro. Come broker ho scelto NATS che è scritto in Go e ha delle performance impressionanti (latenza infinitesima). Piccola nota sulle API GraphQL. Create da Facebook nel 2012 per esigenze interne, rilasciate come open source nel 2015. A differenza di REST (1) utilizza

🔍 Sviluppo Frontend: quale framework fa al caso tuo? React.js, sviluppato da Facebook, e Angular, creato da Google, sono due potenti strumenti utilizzati per la creazione di interfacce utente dinamiche e reattive. Mentre React è noto per la sua flessibilità e il vasto supporto della community, Angular offre una solida struttura e un approccio all’avanguardia basato su moduli autonomi. 📊 Approfondire questo confronto ti aiuterà a individuare il framework più adatto alle tue esigenze e progetti specifici. Esplora entrambi e arricchisci il tuo bagaglio di competenze nello sviluppo frontend!

HTMX valido sostituto a Vue, React o Angular? Perché no! Vantaggi rispetto a frame-work più complessi come Vue, React o Angular: - Semplicità e leggerezza: Non richiede tool di build complessi o dipendenze pesanti. - Rendering lato server: Mantiene la logica sul server, migliorando SEO e prestazioni. - Minimo uso di JavaScript: Interazioni dinamiche gestite tramite attributi HTML, riducendo la necessità di codice JS (anzi INESISTENTE QUASI). - Incrementale: Può essere introdotto gradualmente su progetti esistenti senza riscrivere tutto. - Performance: Tempi di caricamento più rapidi senza dover caricare grandi bundle JavaScript. - Manutenzione semplice: Ridotta complessità del codice e minori problemi di gestione dello stato. - Udite udite, POSSO USARLO CON QUALSIASI SOLUZIONE BE che si occupa della maggior parte del rendering HTML, senza la necessità di trasformare la mia web app in una SPA, evitando così il rischio di compromettere le performance. BOOM!

Il web senza JavaScript? Impensabile. Dai primi anni di Netscape e Internet Explorer, JavaScript si è affermato come il linguaggio scripting d’eccellenza per la gestione e la creazione di interazioni dinamiche sulle pagine web. Grazie a framework come React, Angular e Vercel, gli sviluppatori possono creare applicazioni web performanti. La scelta del framework giusto, considerando anche l'integrazione di plugin per funzionalità critiche, è fondamentale per il successo del progetto. È, dunque, fondamentale valutare attentamente le opzioni disponibili #JavaScript #WebDevelopment #Frameworks

Sviluppatori web ho una domanda per voi: Come gestite le date in Angular? Siccome nei json le date sono in formato stringa, ogni volta mi capita di richiamare dei metodi dell'oggetto "Date" dimenticandomi di fare il new Date("stringa")... Avete un metodo funzionale che consenta, in automatico, di convertire le stringhe in Date oppure l'unica via di scampo è fare un mappatura nei services? 🤨 #angular #date #json #typescript

🚀 **Utilizzare localStorage e Console Log in React per un Controllo Totale** 🎨 In questo progettino, ho utilizzato React e Tailwind CSS per creare un'app che recupera e visualizza risposte casuali da un'API. Ecco alcuni punti chiave del progetto: 📌 **Stato e Effetti**: - **useState**: Gestisce lo stato della domanda (`question`) e della risposta (`answer`). Il componente si renderizza nuovamente ogni volta che questi cambiano. - **useEffect**: Esegue il codice al primo render del componente, eseguendo una chiamata API e controllando il `localStorage` per risposte salvate. 🌐 **Chiamata API**: - **fetchAnswer**: Una funzione asincrona che utilizza `fetch` per ottenere una risposta casuale dall'API. Aggiorna lo stato e salva l'array di risposte aggiornato nel `localStorage`. 🎨 **Stile**: - Utilizziamo Tailwind CSS per creare uno stile moderno e accattivante con uno sfondo a gradiente e un design pulito. 🛠️ **Console Log**: - `console.log` è stato utilizzato per tracciare ogni passaggio e vedere le operazioni che avvengono all'interno dell'app. 📢 **Nota Importante**: Anche se `localStorage` è utile, non va abusato! Esistono metodi migliori per il salvataggio dei dati a lungo termine. Scoprirò insieme ai miei colleghi soluzioni più efficaci per la persistenza dei dati in applicazioni web. #React #TailwindCSS #WebDevelopment #API #JavaScript #Coding #Tech #WebDesign

Vorrei prendermi un momento per condividere con tutti voi i miei progressi lavorativi. Attualmente sto lavorando sulla validazione client-side di un form per un CV builder web application, utilizzando JavaScript Vanilla. Padroneggiare la validazione dei form con JavaScript Vanilla è importante perché permette di acquisire una comprensione più approfondita della validazione dei dati e di sviluppare soluzioni su misura per le specifiche esigenze del prodotto digitale. Questo approccio ha 2 grandi vantaggi: 1) Fornisce anche una base solida che facilita l'apprendimento e l'adozione di framework e librerie più avanzati in futuro; 2) Evita evita l'utilizzo di codice superfluo derivante dall'uso di librerie esterne. #JavaScript #WebDevelopment #ClientSideValidation #FormValidation #WebApplication #CodingSkills #FrontendDevelopment #CodingBestPractices #DeveloperCommunity #LearnToCode

Sappiamo che Next.js 13, ci sono stati cambiamenti significativi nel modo in cui gestire i dati statici rispetto alle versioni precedenti. Automatic revalidation: In precedenza, per aggiornare i dati statici era necessario ricostruire "l'intero sito" o specificare manualmente un tempo di aggiornamento. In Next.js 13, è possibile specificare la proprietà revalidate all'interno di getStaticProps, che indica a Next.js di rigenerare i dati statici automaticamente dopo un certo periodo di tempo, senza dover ricostruire il sito. In Next, è possibile aggiungere proprietà aggiuntive al secondo parametro della funzione di recupero modificata (ad esempio getStaticProps), come es. { next: { revalidate: 10 } }. Questo consente di configurare il comportamento del recupero dei dati in modo più avanzato. #nextjs #javascript

Mentre molte tecnologie web stanno guadagnando terreno, è impossibile ignorare l’influenza e l’importanza di framework PHP come Laravel. Laravel si è distinto come uno dei framework back-end più amati e utilizzati, offrendo un’architettura pulita, funzionalità moderne e una vasta comunità di sviluppatori che lo identifica come un valido modo per velocizzare e rendere versatile la costruzione di siti web. Nel 2024, con l’aumento della necessità di applicazioni web robuste e scalabili, imparare Laravel sarà essenziale per gli sviluppatori web che vogliono avere una competenza completa nello sviluppo full-stack. La sua integrazione semplificata con front-end come Vue.js e React lo rende una scelta ideale per creare applicazioni web dinamiche e reattive. Io lo utilizzo spesso sia nell'azienda dove lavoro per alcuni programmi gestionali e anche per creare siti e-commerce e devo dire che mi torna spesso molto utile.

Una tappa fondamentale nel percorso di ogni sviluppatore che utilizza JavaScript è acquisire padronanza dei metodi degli array. Saper gestire e manipolare gli array (così come gli oggetti) è importantissimo, soprattutto quando si ha a che fare con dati che arrivano dal server, e sapere quale metodo usare al momento giusto può fare molto la differenza, in termini di lettura, manutenibilità del codice ma anche performance. Non è passato tantissimo ma ricordo ancora quando un'operazione del genere l'avrei scritta usando un forEach(). Una volta capito che il metodo map() mi permette di ottenere lo stesso risultato in un'unica operazione (e soprattutto riducendo il numero di variabili in gioco) mi si è aperto un mondo. Conosci qualche altra situazione in cui un determinato metodo può sostituirne un altro? #javascript #vue #frontend #web #development