Imparare Coding con Manuel
Imparare Coding con Manuel
Benvenuti su Imparare Coding con Manuel! La mission di questo progetto è quella di poter condividere con quante più persone possibili video di qualità su diverse tematiche legate al coding.
Sia che tu sia alle prime armi o un programmatore con un pochino più di espereinza e vuoi dare solo una rinfrescata alle tue skill, ho creato e sto creando le risorse che ti servono per imparare a scrivere e comprendere codice o, semplicemente, migliorarti.
Non ho grandi team alle spalle, tutto quanto quello che vedi è progettato, prodotto e gestito esclusivamente da me. Oltre al canale di KZread, sul mio sito trovi approfondimenti sulla programmazione e nella community su Discord puoi richiedere supporto.
La programmazione è un'abilità preziosa che ti può aiutare a sviluppare il pensiero critico, ad essere più creativo e innovativo.
Iscriviti al canale e inizia ora il tuo percorso per imparare a programmare!
Al tuo successo ☕
Manuel
Пікірлер
Non capisco, se facciamo una commit sulla branch testing git in automatico riporta head sulla branch master? Se questo è vero perchè dobbiamo utilizzare git checkout per ritornare su master e fare una nuova commit, non possiamo fare direttamente la nuova commit? 7:37 7:45 scusa l'ignoranza :)
Ottima guida, chiara ed equilibrata tra teorico e pratico. Hai guadagnato un iscritto :D Una domanda sui dati nidificati che aggiungi con i microdati e RDFa: Crei due div per semplificare la lettura? Si potrebbe nidificarli dentro un unico div, quindi aggiungendo uno span coi relativi itemscope e itemtype, creare Person, chiudere lo span e proseguire con la compilazione del primo itemscope?
buonasera, ero curioso di quale fosse il nome della magnifica estensione che ti aiuta a completare il codice con il suggerimento potrei sapere il nome?? grazie mille
Ciao! L'estensione è GitHub Copilot
In 10 minuti ho capito più cose su react, rispetto ad altri video lunghi ore . Complimenti !
Che tema e font utilizzi su vs code ?
Ciao Manuel, serie eccellente e grande lavoro da parte tua. Hai piani per una serie anche su PHP?
Ciao, che tema è settings utilizzi su vs code?
Grazie mille, con i tuoi video su HTML sto colmando le mie lacune
Mi fa molto piacere. Grazie per aver commentato e buon corso ✨
Spiegato meglio di cosi , non si può .... Immenso Manuel !!!
Grazie mille 🙏🏻
Ottimo, grazie e... sì con le esercitazioni. Più esercitazioni!
Ottimo contenuto, grazie! 👏 Io personalmente faccio molta fatica a farmi piacere le forzature imposte da TypeScript, ma penso sia solo un mio limite😅 Al momento preferisco in fase di scrittura codice essere più libero e non preoccuparmi dei tipi di dato, delle interfacce, ecc e casomai perdere più tempo in fase di debug e andare a fare le correzioni necessarie.. TypeScript lo trovo un po' troppo seccante e costrittivo in fase di scrittura. Idee per fatmelo piacere di piu? 😂
Hai fatto un lavoro incredibile, il sito con gli approfondimenti è fenomenale. Grazie!
Grazie Antonino, sono contento che lo sforzo merita
Ciao Manuel,, io nell'esercizio 2 ho utilizzato il metodo indexOf(): (ho usato lo stesso array dell'esercizio 1 per pigrizia) const bandPreferite = ["Royal Blood", "Queen", "The Glitch Mob", "Linkin Park", "Nightwish"]; function trovaIndiceElemento(indice) { return bandPreferite.indexOf(indice); } console.log(trovaIndiceElemento("Queen")); Nell'esercizio 3, facendo una ricerca su google, ho trovato il metodo reduce(), ma ho preferito usare forEach() in questo modo: const prezzi = [1.55, 3, 9.99, 3.59, 0.47, 7.12]; let totale = 0; prezzi.forEach((numero) => totale += numero); console.log(totale);
Ciao! Andiamo con ordinen: Esercizio 2: L'utilizzo di indexOf() è assolutamente corretto e una scelta efficiente per trovare l'indice di un elemento in un array. La tua funzione trovaIndiceElemento è concisa e funziona perfettamente. Esercizio 3: Anche qui la tua soluzione con forEach() è valida e funzionale. Tuttavia, vorrei presentarti un paio di alternative che potrebbero essere interessanti da conoscere: Come hai scoperto, reduce() è un metodo potente per "ridurre" un array a un singolo valore. Ecco come potresti usarlo per sommare i prezzi: const totale = prezzi.reduce((accumulatore, prezzoCorrente) => accumulatore + prezzoCorrente, 0); Se preferisci un approccio più tradizionale, puoi utilizzare un ciclo for...of: let totale = 0; for (const prezzo of prezzi) { totale += prezzo; } Tutte e tre le soluzioni sono valide e la scelta dipende spesso dalle preferenze personali e dal contesto specifico. È sempre utile conoscere diverse opzioni per poter scegliere quella più adatta in ogni situazione. Il bello della programmazione è anche questo. Spero che queste informazioni ti siano state utili! Se hai altre domande o curiosità, non esitare a chiedere. 😊
Domanda: se il selettore :root applica gli stili al tag html, perche' non posso utilizzare direttamente il selettore html? Ne approfitto per complimentarmi dei tuoi corsi che sono una miniera d'oro! Grazie!
Ottima domanda! Sebbene sia vero che :root e html si riferiscano allo stesso elemento, ci sono alcune differenze: - :root è una pseudo-classe quindi ha più specificità rispetto al selettore di elemento HTML, :root avrà quindi la precedenza in caso di conflitto - :root è spesso usato per definire variabili CSS a livello globale che possiamo riutilizzare all'interno del documento, mentre html è più comunemente usato per dare stili globali ai suoi discendenti (font-size, colore sfondo ecc.) Spero sia chiaro. Grazie mille per i complimenti :)
Che tema usi per VSC?
Ciao! Uso GitHub Dark
spiegazione chiara e professionale!
Ciao Manuel, rinnovo i miei complimenti per i tuoi corsi e mi chiedevo se hai ancora in programma di pubblicare il corso sull'accessibilità che avevi annunciato alla fine di questo video?
Il lavoro mi ha decisamente rallentanto, ma confermo che il corso è ancora in programma
grazie per il corso!!
Buonasera Manuel ottimo video, volevo chiederti quando vai a chiamare il setFormState..non sarebbe piu corretto partire dallo stato precedente? Quindi: setFormState((old) => ({...old, [e.target.name]: e.target.value})) ? Così da modificare sempre lo stato più aggiornato?
Ciao! Ottima domanda e osservazione! Hai assolutamente ragione. Utilizzare il callback form di setFormState che prende lo stato precedente (old) è la pratica migliore per aggiornare lo stato in React, specialmente in situazioni in cui: 👉 Aggiornamenti multipli: Se hai più componenti che aggiornano lo stato contemporaneamente, o se lo stesso componente può innescare aggiornamenti multipli in rapida successione (ad esempio, durante la digitazione in un campo di input), utilizzare il callback garantisce che ogni aggiornamento si basi sullo stato più recente. 👉 Stato derivato: Se il nuovo valore di stato dipende dal valore precedente, il callback è essenziale. Nel tuo esempio, se e.target.value dovesse essere calcolato in base ad altri valori nello stato, il callback assicurerebbe di avere accesso ai valori più aggiornati. 👉 Ottimizzazioni: In alcuni casi, React può ottimizzare le prestazioni quando si utilizza il callback, saltando il re-render se il nuovo stato è identico al precedente.
I'm !false.
Manuel Number One!
Grazie mille per il supporto
Complimenti Manuel, seguirò sicuramente l'intero corso sulle RegEx. Mi servono perché sto cercando di sviluppare un parser per codice NC Siemens ed ho bisogno di riconoscere molti pattern all'interno dei sorgenti. Grazie
Grazie Giuliano! Mi fa piacere sapere che il corso ti sarà utile. Pensa che quando lo presentai qualcuno disse che era inutile.
Buon lavoro! Una nota: non dovresti usare un indice come chiave: il valore della chiave deve essere costante (ad esempio, id) -- in modo che React possa sempre identificare gli elementi. L'indice, invece, può essere dinamico, perché l'ordine degli elementi nella lista può cambiare.
Hai assolutamente ragione riguardo all'uso degli indici come chiavi in React. È una pratica sconsigliata perché, come hai detto, se l'ordine degli elementi nella lista cambia, React potrebbe avere difficoltà a determinare quali elementi sono stati aggiunti, rimossi o spostati. Usare un identificatore unico e stabile, come un ID, è la scelta migliore per garantire prestazioni ottimali e un comportamento affidabile dell'applicazione. Grazie mille per il prezioso contributo
Grazie per il tuo lavoro!
Grazie a te per aver speso del tempo a guardare :)
in un mio progettino ho avuto un problema con la gestione dell'errore di useSWR: anche quando la chiamata di rete andava male, utente non trovato con status 404 o 405, invece di rendermi un errore mi passava il contenuto dell'errore nel parametro data... quindi le informazioni che cercavo di estrapolare da data erano assenti, sostituite dal message dell'errore, il codice non si fermava all'errore, ed essendo non definiti quei parametri che cercavo diestrapolare, andava tutto in errore. ho dovuto modificare il fetcher rendendolo simile a quello usato con useEffect
Capisco il problema che hai riscontrato con useSWR. In genere, quando una richiesta fallisce, useSWR dovrebbe impostare lo stato error con i dettagli dell'errore e lasciare data come undefined. Tuttavia, a volte l'API, anche in caso di errore, restituisce una risposta con un corpo contenente un messaggio di errore. useSWR interpreta questa risposta come dati validi, anche se in realtà rappresenta un errore. La scelta migliore è quella di modificare il fetcher.
Ciao Manuel! Prima di tutto grazie per il tuo contenuto, hai meritato un nuovo iscritto al tuo canale! Vorrei farti una domanda... perché alcuni video di KZread gli incorpora e altri no? Questione di privacy di KZread su video specifici? Ad esempio su quelli che non mi visualizza esce scritto sull'iFrame "Video non disponibile. Guarda su KZread" e mi rimanda attraverso il link nell'iFrame alla piattaforma di KZread. Grazie mille! Morena😊
Ciao Morena! Grazie mille per il tuo nuovo iscrizione al mio canale! Mi fa davvero piacere che tu apprezzi i miei contenuti. Per quanto riguarda la tua domanda, è vero che alcuni video di KZread possono essere incorporati in siti web, mentre altri no. Questo dipende da diversi fattori, tra cui: Le impostazioni di privacy del video: Il proprietario del video può scegliere se renderlo incorporabile o meno. Se il video non è incorporabile, non potrai incorporarlo in un sito web. Il tipo di video: Alcuni tipi di video, come quelli con contenuti protetti da copyright o quelli con restrizioni di età, non possono essere incorporati. Il sito web in cui vuoi incorporare il video: KZread ha alcune restrizioni sui siti web in cui i video possono essere incorporati. Ad esempio, i video non possono essere incorporati in siti web che contengono contenuti illegali o offensivi. Se un video non è incorporabile, vedrai un messaggio come "Video non disponibile. Guarda su KZread" nell'iFrame. Cliccando sul link nell'iFrame, sarai reindirizzato alla pagina del video su KZread. Spero che questa spiegazione ti sia stata d'aiuto! Se hai altre domande, non esitare a chiedere.
per php??
devi avere PHP installato sul sistema e indicare nelle impostazioni di Visual Studio Code dove si trova l'eseguibile per poter abilitare la beautificazione.
grazie mille Manuel. bel corso completo. mi chiedevo... fai anche corsi in presenza in qualche istituto? Corsi serali post lavoro? Grazie ancora
I corsi in presenza non sono un'attività che svolgo con continuità. Capita che qualche accademia ogni tanto mi chiami e faccia qualche corso per loro. Questo potrebbe avvenire sia in remoto che in presenza. Corsi serali mai fatti. Solitamente offro per i fatti miei formazione 1-to-1, ma a causa del lavoro inteso dell'ultimo periodo è un'attività che ho sospeso
Argomento che chiederei oltre tutti questi che sono molto interessanti è l'event loop
Hai perfettamente ragione. Ho dei colloqui in questi giorni e la domanda è lì tutta bella scintillante: ✨✨ cosa sai dirmi dell'event loop? ✨✨
@@codingconmanuel partirei intanto col dire che javascript è un linguaggio orientato agli eventi e single thread non bloccante ed è stato quindi necessario implementare un sistema per eseguire le azioni scaturite dagli eventi e in generale comunque tutte le chiamate asincrone. Il tutto funziona con una parte di memoria dove viene messo il codice che viene eseguito e uno stack o pila che si voglia dire (dico uno ma se non ricordo male ce ne sono due con priorità diverse) dove vengono per l'appunto impilate le funzioni asincrone. L'event loop controlla questa pila e se la parte di memoria di esecuzione del codice è vuota ne prende una e la sposta li per farla eseguire.
@@codingconmanuel successivamente si può fare il classico esempio console.log('start'); setTimeout(()=>console.log('call back'),0); console.log('end'); e chiedere l'output e il motivo dell'ordine delle stampe
Risposta più che valida. Complimenti per la capacità di riassumere un concetto così complesso in poche righe
@@codingconmanuel e poi a sto punto chiederei e con async e await che succede? ma poi ho paura che il loop diventi il colloquio 🤣😂😆😅
Anche sulla compilazione qualcosa da dire avrei
Se vuoi puoi argomentare :)
@@codingconmanuel dal video sembra che la compilazione serva solo a trasformare il codice sorgente in codice macchina, ma questo non è. Java viene compilato in bytecode ad esempio, typescript addirittura compilato in javascript. Il vantaggio della compilazione prima della distribuzione di un software è quello di avere una prima analisi del software che evita alcuni errori rilevati poi solo in runtime. Comunque capisco che l'argomento era un altro
sull'hoisting manca l'esempio con var secondo me, perchè anche con l'esempio della arrow function vedrete che l'errore cambia a seconda se si usa const o var, invece con una variabile vedrete che con var non darà errore
Hai assolutamente ragione, aggiungere un esempio con var sarebbe stato utile per comprendere meglio l'hoisting! Grazie per il suggerimento. Ecco una spiegazione rapida: Quando usi var: console.log(x); // Risultato: undefined var x = 5; console.log(x); // Risultato: 5 La variabile x dichiarata con var viene, per tradurre alla lettera "issata", il che significa che la sua dichiarazione viene spostata in cima al suo contesto di esecuzione. Tuttavia, solo la dichiarazione viene issata, non l'assegnazione, quindi all'inizio x è undefined. Ora confrontiamolo con let e const: console.log(y); // Risultato: ReferenceError: y is not defined let y = 5; console.log(z); // Risultato: ReferenceError: z is not defined const z = 5; Con let e const, provare ad accedere alle variabili prima della loro dichiarazione genera un errore perché si trovano in una "zona morta temporale" (Temporal Dead Zone) fino alla loro inizializzazione. Questi esempi dimostrano come l'hoisting con var permette l'accesso alle variabili prima che siano inizializzate, restituendo undefined, a differenza di let e const che generano un errore. Ciò detto ricordo che var, nella programmazione JavaScript moderna, viene usato meno spesso, specialmente da quando let e const sono state aggiunte in ES6. Il motivo del declino nell'uso di var si può riassumere in due punti: 1. Scope: var ha uno scope funzionale, il che significa che le variabili dichiarate con var sono accessibili all'interno dell'intera funzione in cui sono dichiarate, indipendentemente dai blocchi di codice (come if o cicli). Al contrario, let e const hanno uno scope di blocco, rendendole accessibili solo all'interno del blocco in cui sono dichiarate. Questo aiuta a prevenire errori dovuti a sovrapposizioni o riutilizzi involontari di variabili. 2. Hoisting: Le variabili dichiarate con var sono soggette a hoisting, il che significa che possono essere usate prima della loro dichiarazione effettiva nel codice, sebbene inizialmente avranno il valore undefined. Questo può portare a confusioni e bug difficili da tracciare. let e const sono anch'esse soggette a hoisting, ma non si può accedere a queste variabili prima della loro dichiarazione effettiva nel codice a causa della cosiddetta "temporal dead zone", riducendo così gli errori. var ha senso usarlo, oggi, solo nel caso di: 1. Compatibilità con vecchi browser 2. Specifiche tecniche particolari In generale, l'uso di let e const è raccomandato per una programmazione più sicura e prevedibile. var è più come un vecchio cimelio di versioni precedenti di JavaScript, e il suo uso è spesso evitato in progetti nuovi o durante la revisione di codice legacy.
@@codingconmanuel perfetto
perchè per la ricorsione si deve dare importanza al concetto di termine di ricorsione per l'iterazione no? Il concetto di fine ricorsione è ovviamente importante ma trovo della stessa importanza il concetto di fine iterazione
Sia nella ricorsione che nell'iterazione, il concetto di "terminazione" è fondamentale per evitare cicli infiniti e per assicurarsi che il codice faccia esattamente quello che ci aspettiamo in un numero finito di passaggi. La differenza chiave tra ricorsione e iterazione sta nel modo in cui gestiscono la terminazione: 🔁 Ricorsione: Il termine di ricorsione, o "caso base", è essenziale perché impedisce alla funzione di chiamare se stessa all'infinito. Ogni chiamata ricorsiva si avvicina sempre di più al caso base e, una volta raggiunto, la ricorsione si interrompe. La definizione stessa della funzione ricorsiva incorpora questo meccanismo di terminazione. 👀 Iterazione: Nell'iterazione, il controllo di terminazione viene eseguito all'inizio o alla fine di un ciclo (come nei cicli while o for). Qui, devi definire esplicitamente una condizione che determina quando il ciclo deve fermarsi. Questa condizione viene verificata ad ogni iterazione del ciclo. Anche se il principio di avere un "punto di fine" è comune a entrambi i metodi, la loro implementazione e controllo sono molto diversi. Nella ricorsione, il termine è un requisito strutturale critico del processo di chiamata, mentre nell'iterazione è più un controllo di flusso esterno che decide la cessazione del ciclo. Proprio per questo, il caso base nella ricorsione tende ad essere enfatizzato più del controllo di terminazione nell'iterazione, ma come hai giustamente notato, entrambi sono cruciali per il corretto funzionamento del codice.
Grazie mille! Adoro i tuoi video e spieghi molto bene. Piccolo consiglio: fai degli shorts oppure video da 5 minuti dove entri nel dettaglio con qualche argomento specifico(esempio useparams oppure outlet), sono argomenti molto ricercati e andresti ancora di più dritto al punto. Grande comunque 😁
Grazie mille ✨il tuo consiglio è ben accetto. Ci stavo giusto giusto pensando dato che alcuni commenti alla quale rispondo possono essere tranquillamente materiale per qualche micro pillola.
@@codingconmanuel ti posso fare una richiesta? Potresti fare un video dove spieghi il loader? Nello specifico, se l'utente prova ad andare sulla Dashboard (ad esempio) ma non è loggato, il loader lo manda sulla home o sulla pagina di login. Ed inoltre, come si verifica che l'utente sia loggato oppure no? Sono una new entry in questo mondo e devo capire un po' di cose 😅
Grazie Manu... Best teacher ever!!!
Grazie per il supporto
ma useEffect esattamente quando devo usarlo?
Gli effetti collaterali o side effects in React sono quelle operazioni che influenzano i componenti al di fuori del sistema di rendering dichiarativo di React. Un esempio di side effect sono le operazioni asincrone, modifiche dirette al DOM, utilizzo di un timer o in generale tutte quelle attività che non si adattano al flusso principale del rendering del componente. La documentazione di React è piena di esempi ti consiglio di farci un giretto.
puoi cosigliarmi esercizzi con soluzione ? a me non entra in testa
Cosa non ti è chiaro esattamente?
@@codingconmanuel chat gpt mi è venuto d'aiuto, posso sviluppare tutti gli esercizi possibili grazie 🙉
Ti è chiaro quindi cosa fanno i cicli?
@@codingconmanuel si ripetono finché non esce falso in teoria;in pratica devo ancora focalizzare
Ti faccio un esempio pratico: per generare dei biglietti, devo chiamare un'API che crea il PDF. L'endpoint richiede un codice specifico per ogni evento acquistato. Gli utenti possono comprare un numero indefinito di biglietti per un numero indefinito di eventi. Ogni volta che ciò avviene, devo ripetere la logica un numero indefinito di volte. Un ciclo è perfetto per questo compito: esegue la stessa logica più volte fino a quando una condizione non risulta falsa, ad esempio, quando non ci sono più codici da elaborare. Con la pratica, questo concetto diventerà ancora più chiaro. Questo è un caso reale di un bug che ho risolto stamattina :)
ciao, però nn c e come iniziare a programmare (come impostare vsc, che file creare, come far comunicare i vari file ecc...)
Questa è la seconda lezione di un corso gratuito composto da 18 lezioni kzread.info/head/PL6PilnEO6HWa-G6DfaXm0mm-J1HDaJ2fA Mentre per quanto riguarda il setup di Visual Studio Code c'è un video dedicato nel canale kzread.info/dash/bejne/hY6F0pSmgrm7YMo.html Sul canale di sono 200 video, sono sicuro che troverai quello che cerchi
ciao manuel, perchè nel img è visibile uno spazio bianco ? anche nel ho notato , c'entra qualcosa l'user agent ?
Bellissima domanda! Intanto parto con lo sfatare il mito che si tratti di un bug. Il browser si comporta come dovrebbe comportarsi. Il motivo principale è che il tag img è un elemento inline. Come tale viene quindi considerato come testo. Il testo ha una linea sulla quale poggia chiamata baseline. Sotto questa linea ci vanno porzioni di alcune lettere (es. g, y, p, q, ecc.) Quando noi inseriamo un'immagine in un div, questa copre l'area fino alla baseline, l'area sottostante rimane vuota creando quel fastidioso spazio bianco. Problema che si può facilmente risolvere in tre modi: 1. Modificando la proprietà display a block 2. Impostando la proprietà vertical-align a bottom 3. Impostare la proprietà line-height a 0 Per quanto riguarda l', la i sta per inline quindi già sai perché succede anche con lui :)
Cavoli! Grazie mille, finalmente le ho capite!!! Seguiro' tutto il corso TS! Grazie ancora 🙏
Grazie a te ✨
Allora, sono un tolkeniano e sono un webdesigner in cerca di corsi per aggiornarmi e migliorarmi... e poi inizia questo video. Con quella maglietta. Complimenti :)
In un altro video ne ho anche un'altra. Non bella come questa, ma comunque degna di nota. Ti attendo in quel video 🤣
@@codingconmanuel contaci ☺
Mi aggiungo ai cmplimenti, bel corso.Una domanda dalle slides sembrerebb e che ci siano degli spazi tra".." o "..." e i nomi degli oggetti. potresti chiarire? perche' quando scrivi in console sembra che non ci siano.
Non ci sono spazi tra i ".." e "..." e i due hash. Vorrei pensare che nelle slide li ho messi per una questione di leggibilità, ma è molto più probabile che si tratti di una svista :)
Vabene anche tinypng come compressore di img ?
Tinypng è stato un mio fedele alleato per tanti anni, avevo anche il plug-in di Photoshop per il salvataggio in batch. Ora mi mandano le immagini già ottimizzate e in quei rari casi dove devo intervenire vado di Squoosh.
Ciao Manu, ti ho scoperto per caso, devo ringraziarti per il modo in cui spieghi, chel o trovo addirittura molto meglio dei docenti di Udemy o altri youtuber! Sei il mio preferito 🙌🏽🙌🏽🙌🏽🙌🏽
Che dire se non un gigantesco GRAZIE!
Ciao Manuel, ma se invece fai semplicemente npm intall senza --save? Di default è come se facessi npm install --save?
Scusa la domanda che sarà sicuramente banale, ma perchè l'icone dei social mi vengono gigantissime nonostante abbia seguito i tuoi passi alla lettera!🙁
Uhm... se hai seguito tutta alla lettera non dovrebbero esserci problemi, se hai usato icone diverse potrebbero esserci delle diciture in SVG che forzano la dimensione dell'icona. Scrivimi su Discord se vuoi, proviamo a risolvere insieme :)