#tutorial #angular 14 #novità
In questo video tutorial ho creato una semplice applicazione in Angular 14 senza utilizzare i moduli, ma sfruttando esclusivamente i nuovi componenti standalone.

Tra gli argomenti che tratto nel video:

➡️ avvio dell'applicazione tramite standalone components
➡️ come usare direttive e componenti in standalone components
➡️ gestire la dependency injection
➡️ creare routes, nested routes e gestire la navigazione
➡️ gestire lazy loading di routes e nested routes

Livello: intermedio / avanzato

Link al video
https://www.youtube.com/watch?v=mVCQgk9_RRg

#tutorial #angular #update

In questo video vi parlo della nuova funzionalità "inject" di Angular 14:

• How to use the inject function
• Built-in and Custom Services
• Injection Token
• useFactory
• use inject in functions

https://www.youtube.com/watch?v=4jHg9_Jb7RM&lc=UgwwWaQk_tSliBJ2VnV4AaABAg

#tutorial #tip #video
Riassunto della puntata di Twitch di ieri sera : D

LogRocket è uno strumento per monitorare e analizzare applicazioni front-end / #javascript.

• registra tutte le sessioni degli utenti
• crea automaticamente dei video per ogni sessione (non è proprio un video ma l'applicazione viene caricata in un iframe)
• infatti è possibile debuggare XHR, JS, Assets e ispezionare il DOM
• acquisire tutte le info degli utenti (IP, browser, and more...)
• debuggare errori
• e molto altro (come generare heatmap e altre chicche)

Nel video mostro velocemente come funziona:
https://youtu.be/V96dsYKMR58

Ciao Devs,
il mio regalo di Natale è il nuovo blog in cui condividerò un sacco di materiale. Ci ho lavorato per settimane ed ecco la prima beta.

VI condivido quindi il post che scriverò a breve su LinkedIn per condividere il primissimo tutorial su Angular.

Qualunque feedback è ben accetto sia dal punto di vista dei contenuti che sul blog ♥️

---

#new_blog #angular #tutorial #beginner
I finally have a new blog in which I will mainly publish two types of content:
➡️ Snippets, Quick Posts, Notes
➡️ Step-by-Step Tutorials that you can use to practice and learn stuff
It's completely built from scratch in Astro and Tailwind and I will talk about it in another post.
Anyway today I want to share the first tutorial about Angular for absolute beginners, and I would like to test the blog too.

If you have never used Angular this is a good starting point.
In this step-by-step tutorial you will learn:
➡️ How to use a code playground (StackBlitz)
➡️ what is the interpolation
➡️ the differences between attribute and structural directives
➡️ familiarize yourself with Angular.

So you will develop your first hello world web application in Angular (v.15) by the creation of a simple counter.
You will learn how to create dinamic HTML templates, work with CSS, the concept of interpolation, the differences between attribute / structural directives and familiarize yourself with the framework.
⭐️⭐️⭐️
Please report any issues to me in the comments and let me know what you think
⭐️⭐️⭐️
https://www.fabiobiondi.dev/tutorials/angular/angular-basics/1-angular-hello-world

#react #tutorial #italian
Esistono molte strategie e librerie famosissime per gestire il CSS in applicazioni React, solo per citarne alcune "styled components" o "emotion", ma sono molto invasive, creano un debito tecnico e stravolgono totalmente la fisionomia dei vostri componenti React.

Ho creato quindi un semplice video per comprendere le differenze tra la gestione di CSS globale e la creazione di CSS locali accessibili solo da specifici componenti tramite l'utilizzo di CSS module.

CSS module è una tecnica gestita direttamente tramite una semplice configurazione del module bundler, come WebPack (usato in CRA), Vite ma supportato anche da Next, che simula CSS locale rinominando le classi in fase di build, assegnando un nome univoco e rendendole accessibili solo ai componenti che le importano.

https://www.youtube.com/watch?v=loXH8NCL2go

---

➡️ Vuoi saperne di più su React ? ⬅️

Potrebbe interessarti il mio video corso
"React Pro: creare real world applications"
https://www.fabiobiondi.dev/video-courses/react-pro-real-world-applications

#next #studio #tutorial
In queste ultime settimane sto studiando e facendo un po' di esperimenti con le nuove API di Next 13 e i React server component.
Ho iniziato a pubblicare degli articoli su LinkedIn e sul mio gruppo Facebook.
Tuttavia su telegram ho dei limiti di caratteri e non posso quindi postare gli articoli nella loro interezza.

Se siete curiosi, trovate già un paio di post con dei video animati, in cui descrivo :
1) come gestire un preloader dell'intera pagina
2) come gestire preloader separati per i singoli componenti server, migliorando nettamente la user experience, utilizzando la funzionalità Suspense di React

Li trovate nel mio gruppo Facebook (gli ultimi due post)

https://www.facebook.com/groups/fabiobiondi.training

#qwik #tutorial
Ciao devs,
stavolta ho scritto un nuovo tutorial sul mio sito:

➡️ how to create a debounced input in Qwik Framework
➡️ how useTask$ lifecycle hook works
➡️ how to create a custom reusable hook in Qwik

Il risultato è che potrete invocare una funzione dopo un certo lasso di tempo dal termine della digitazione:

useDebounce(inputSignal, 1000, doSomething);

Fatemi sapere che ne pensate .

https://www.fabiobiondi.dev/blog/2023-08/qwik-debounce-custom-hook

#tutorial #video #angular
Come promesso Vi condivido il primo tutorial (parte del nuovo corso su E2E test con Cypress che sarà rilasciato a breve) in cui mostro come:
• creare un progetto standalone in Angular v.16
• installare e configurare Cypress V.13
• lanciare i primi test di esempio
• scrivere i primi test per verificare il corretto funzionamento della pagina di benvenuto

Le stesse procedure le potete adottare per React, Vue, Java o per testare qualunque applicazione web, perciò anche se non usate Angular vi farà capire il funzionamento di Cypress.

Fatemi sapere che ne pensate : )

#test #frontend #tutorial
La risoluzione di problematiche software risulta spesso complessa e dispendiosa in termini di tempo!

ℹ️ Gli E2E Test consentono di acquisire una solida metodologia per il test e il debug di applicazioni e siti web.

🎥 In questo video vi mostro un esempio pratico di come i test, in questo caso E2E, ci possano aiutare a scovare dei bug ed, eventualmente, a fixarli prima di andare in produzione.

Una breve sessione in cui:
➡️ aggiorniamo il codice di un'applicazione web (#angular in questo caso)
❌ si genera un problema inaspettato
👀 lo identifichiamo grazie ai test
✅ fixiamo il problema

È solo un banale esempio ma spero sia chiaro come l'introduzione di pratiche di testing nel ciclo di sviluppo vi permetta di rilasciare prodotti più stabili, affidabili e con molti meno bug

E, se non fosse ancora chiaro dopo i miei 4000 messaggi 😅, domani uscirà finalmente il mio nuovo video corso:
“Scrivere Test E2E con Cypress.io”

https://fblink.it/corso-cypress

#tutorial #angular #test #e2e
Appena pubblicato un nuovo video tutorial per scrivere i primi test E2E con Cypress per un'applicazione Angular.

Nel video:
➡️ Creeremo un progetto Standalone con Angular (v.16)
➡️ Si installa e configura Cypress (v.13) con TypeScript
➡️ Scriveremo il primo test E2E

https://www.youtube.com/watch?v=PDNI6fggY6k
----
Se vuoi saperne di più su Cypress, ho rilasciato pochi giorni fa un video corso completo su fabiobiondi.dev 😅

#next #tutorial
Ciao dev,
Ho aggiornato la playlist YouTube su Next 13/14 con 4 nuovi video dedicati al nuovo "router"
Nei prossimi giorni arriveranno quelli su Server Component

https://youtube.com/playlist?list=PLUioGv_6G9YJVuTEPhRAanjcoYpStkZmS&si=3XdYEYMCdOwLeldS

#cdn #frontend #tutorial (🇮🇹)
Ho creato un video tutorial di 20 minuti per l'utilizzo di una CDN in applicazioni FrontEnd (nello specifico ImageEngine)

L'uso delle CDN è un'ottima strategia per:
➡️ Migliorare i tempi di caricamento
➡️ Ridurre il carico del server
➡️ Migliorare la UX
➡️ SEO
➡️ Scalabilità
➡️ Sicurezza
➡️ Risparmio sui costi sui server
➡️ Gestione picchi di traffico improvvisi

Se non avete mai provato ad utilizzare una CDN è l'occasione giusta per farlo.
Nel tutorial utilizzo hashtag#angular ma i concetti sono pressoché identici per ogni framework / libreria: hashtag#React, hashtag#Next, Astro, Qwik Framework, WordPress... è indifferente!

🏁 IMAGE ENGINE: DEVELOPER PROGRAM
ImageEngine è una CDN che si specializza nell'ottimizzazione automatica delle immagini e in questi giorni potete iscrivervi alla "DEVELOPER PROGRAM" a titolo completamente gratuito..

Non so per quanto tempo sarà attivo questo programma, ma oggi puoi creare un account, senza costi e senza carta di credito, in pochi minuti.

1) Guarda il video tutorial
2) Visita la pagina "Developer Program" di ImageEngine (link nei commenti⬇️)
3) Crea un account gratuito (link nei commenti)
4) Inizia a sfruttare la CDN di ImageEngine

——
🙏 SUPPORTATE IMAGE ENGINE
ImageEngine è una startup emergente che sta cercando di farsi spazio tra i BIG.
Il Programma "Developer" gratuito è proprio nato per avvicinare un po' di sviluppatori.
Iscrivetevi per supportarli. Non vi costa nulla e in più potrete sfruttare il loro servizio.

Grazie ♥️

TUTORIAL
https://www.youtube.com/watch?v=wF9czCYpgYk

#angular #tutorial 🇮🇹 #signals

10 minuti di tutorial sul funzionamento dei nuovi Signal Inputs introdotti da Angular v.17.1.

SPOILER: FANTASTICO!

---
ARGOMENTI:
00:00 Creazione Componenti
02:00 Signal Inputs
03:14 Signal Effects
03:45 OpenWeatherMap API
07:00 Signal e Conditional Blocks
09:00 Signal Require
10:10: Computed Signals


https://youtu.be/lb4W4MJ4awg

Nel corso Angular Evolution trovate il codice sorgente.
Il video è disponibile alla fine del capitolo 05

#tutorial #frontend #rendering
Una veloce introduzione per comprendere i pattern di rendering attualmente più diffusi tra i framework front-end di ultima generazione.

Nel video analizzeremo le differenze tra:
• CSR: Client Side Rendering
• SSR: Server Side Rendering
• SSG: Static Side Generation

https://www.youtube.com/watch?v=IXmteRzUaxo

#angular #tutorial
Un nuovo tutorial per mettere in pratica i concetti appresi nelle lezioni principali.

Creare un tooltip effect usando i signals e stili dinamici in Angular

https://www.learnbydo.ing/courses/angular/basics/40_styling/demo-tooltip

#angular18 #router #tutorial

Ciao raga,
ho pubblicato 3 nuove lezioni nel libro Angular Basics:

• Angular Router: come creare un'applicazione Angular 18 multi-view in pochi minuti
• Router & Lazy Loading
• Styling with Tailwind and Daisy UI

Avrei gentilmente la necessità di feedback e revisioni.
Se trovate errori o qualcosa che non quadra potreste segnalarmeli?

Grazie mille e buon weekend

https://www.learnbydo.ing/courses/angular/basics/80-router

#ngrx #tutorial
NGRX e Redux sono davvero complessi?
Negli ultimi anni, sono stati fatti grandi miglioramenti per semplificare l'uso di Redux, sia con Redux Toolkit in React che con NGRX in Angular.

Ok, non è sicuramente il pattern più facile da adottare ma i vantaggi sono moltissimi (ne ho già parlato in diversi post e comunque puoi trovare tutto nel libro su NGRX: www.ngrx.it

Ad ogni modo, in questa slide puoi vedere un'anteprima rapida di quanto sia facile oggi usare NGRX v.18 in applicazioni Angular:


1️⃣ l'utility "createFeature", fornita da NGRX, permette di creare reducer, azioni e selettori in un unico costrutto (un po' come createSlice in Redux Toolkit).
NOTA: e non sono più necessari i createFeatureSelectors!

2️⃣ aggiungere il reducer / feature allo store utilizzando "provideState"

3️⃣ i componenti posso quindi utilizzare i selettori per recuperare porzioni dello stato (come Signal) e possono dispatchare azioni (per notificare che qualcosa è successo)

Questo è tutto!
Che ne pensi? Ancora troppo complesso? 😅

La slide in alta risoluzione in formato PDF è disponibile gratuitamente sul sito: ngrx.it

#tutorial #typescript
PROMISE COMBINATORS
Come eseguire due Promise e invocare una singola callback?
Possiamo sfruttare alcune funzionalità fornite da JS chiamate Promise Combinators.

💻 Per esempio
const users = axios.get('api1')
const posts = axios.get('api2')
Promise.all([users, posts]).then(result => result[0].data, result[1].data)

Tuttavia, se una delle Promise fallisce, Promise.all() fallirà e otterremo un errore da gestire nel blocco . catch().

💡SOLUZIONE: Promise.allSettled
Diversamente da Promise.all(), che fallisce se una delle Promise genera errore, Promise.allSettled() attende che tutte le Promise vengano soddisfatte ( risolte o rifiutate) e fornisce un risultato per ognuna di esse, indipendentemente dal fatto che siano state soddisfatte (successo) o rifiutate (fallimento).

Ho scritto 5 articoli sulle promise:
• Promise Introduction
• fetch
• Fetch data with Axios
• Promise Combinators
• async await

BONUS: Oltre agli esempi in puro TypeScript, troverete anche molti esempi in react

LINKS
5 new articles about Promises available on the TypeScript cookbook:
https://www.learnbydo.ing/courses/typescript/typescript-for-frontend-developers/200-promises

#ngrx #video #tutorial #italiano 🇮🇹
Pensi che NGRX sia davvero così complicato e overkill?
Ti farò ricredere. Ecco un video in cui ti mostro quanto sia facile iniziare.

E se questo fosse solo il primo video di una playlist gratuita?
E se fosse in ITALIANO? Come del resto questo video

Fammi sapere che ne pensi.

PS: ormai lo sai che ho pubblicato un libro online in inglese su NGRX e che lo trovi su www.ngrx.it?

#tutorial #deploy #angular #react
Io e Giorgio Boa abbiamo pubblicato un nuovo articolo sul blog di LearnByDo.ing su come effettuare il deploy di applicazioni Angular / Analog e React su Zephyr Cloud.

Come funziona:
1. si crea la build localmente:
"npm eseguire build"

2. il deploy è eseguito in pochi secondi

3. Viene assegnato un URL alla vostra applicazione / sito web

Qui l'articolo:
https://www.learnbydo.ing/diary/2025-01-25-deploy-angular-and-react-applications-to-zephyr-cloud