Dev Leonardo

Dev Leonardo

Hello! I'm Leonardo and talk about Open Source, Web Development, and GitHub - I'm a Frontend Developer, GitHub Star ⭐️ and Microsoft MVP 🔷

My goal is to become better developers together, by sharing my own experience and point of view.

I'm far from being an expert, and that's the fun part! The more I learn, the more I can share!

Typescript is the language that will appear most often in my content as I currently work as a Frontend Developer.
I like to use Visual Studio Code and I'm also a contributor to the official project on GitHub, which means I also share some tips and tricks from time to time.

If you haven't done it yet, click the subscribe button and join me on this fantastic adventure, let's build awesome things together ;)

My 2023 Recap

My 2023 Recap

Пікірлер

  • @matteoperonidev
    @matteoperonidevКүн бұрын

    Wow, folder path color extension is really cool! 🤩 Thank you! ✌️

  • @isenewotheophilus6485
    @isenewotheophilus6485Күн бұрын

    My take on your video: It's BS

  • @thebarnowlsmusic
    @thebarnowlsmusic3 күн бұрын

    dopeeeeee thx for sharing this.

  • @adusparx
    @adusparx6 күн бұрын

    Perfect video

  • @KevinVandyTech
    @KevinVandyTech8 күн бұрын

    Yo, let's get this example in the official docs

  • @DevLeonardo
    @DevLeonardo7 күн бұрын

    Thanks, that would be amazing! The code might need some polishing but we can talk about that in a PR later 👀

  • @ricoowenene9897
    @ricoowenene98978 күн бұрын

    Legend!

  • @synapty
    @synapty9 күн бұрын

    Well, shouldn't it be exactly the other way around? Humans should write tests (first) that specify the expected software behavior and co-pilot (or whatever-AI) should then generate the code that fulfills the test.

  • @cachipum
    @cachipum10 күн бұрын

    man, with all respect, I think you didn't get it, the shadcn site and documentation is the actual library! they are updating it constantly on github, much better than any components library, and since lots of people use it, is easy to debug and fix any issue. apart from that, it helps you learn and understand better your frontend, code, and the web platform, since radix ui is built on top of the web standards. With some time it is easy to notice that this is the best solution, good luck trying to customize other component libraries. And shadcn is also superior when you need to setup or prototype something quicky, it mostly works out of the box

  • @cachipum
    @cachipum10 күн бұрын

    btw forgot to mention that vercel funded the dev who wrote shacn/ui, that means also a lot to help deciding which ui path you need to follow... but as always, you are free to pick your own flavor, I applaud that, just stating my points for shadcn

  • @andyting6094
    @andyting609411 күн бұрын

    Imagine find a video more useful than the official documentation. First time using router and this helps a lot. Much thanks for sharing.

  • @aarondz789
    @aarondz78912 күн бұрын

    Hello, I also directly use the return value of useSearch as the value of input, and then use navigate in onChange to modify the search value, but my input box is very laggy. I don't know why.

  • @dimasadnan4873
    @dimasadnan48735 күн бұрын

    I think we should use debouncer in a case like in the video, because using onChange will basically keep firing the navigate function for every change in the input and we usually do not want that (mostly because the lag issue like you mentioned). With debouncer, we can set the navigate func to fire off for example if there are no more change in the input after 1 seconds or so. CMIIW.

  • @smithrockford-dv1nb
    @smithrockford-dv1nb12 күн бұрын

    The problem is that all other libraries (MUI, next-ui, etc) all look bad by comparison. Vercel has mastered the look, and shadcn/ui is the only one that looks close.

  • @KaraTilki20
    @KaraTilki2013 күн бұрын

    Thanks a lot

  • @lacomparte
    @lacomparte15 күн бұрын

    Do you know why a double quote is added when move to navigate with the query param is a number ex) navigate({ to: '/abc', search: { code: '123' }})

  • @DevLeonardo
    @DevLeonardo14 күн бұрын

    How is your validateSearch defined? I see you're passing { code: '123' } which is a string, not a number.

  • @DevLeonardo
    @DevLeonardo15 күн бұрын

    If you're interested in doing the challenges you can sign up for free with my referral link! 👉 app.codecrafters.io/join?via=Balastrong You can subscribe to a paid plan later! Thanks for your support and happy coding!

  • @griffinkirkland9087
    @griffinkirkland908715 күн бұрын

    Can you talk about finding projects that pay you to contribute?

  • @hakuna_matata_hakuna
    @hakuna_matata_hakuna17 күн бұрын

    am now afraid of updaing the depndancies because all the radix ones wil update and something will bvreak . parkui better imo snec they only use ark ui which they also maintain , it also workswith solid ans sveltte

  • @sid06
    @sid0619 күн бұрын

    Thanks for mentioning this, it has been very valuable for making my decision (I will stick with JoyUI).

  • @elarnetamayomanglicmot7309
    @elarnetamayomanglicmot730921 күн бұрын

    Keep up the good work bro!!. ' The elevator to success is out of order. You'll have to use the stairs... one step at a time. ' - Joe Girard

  • @DevLeonardo
    @DevLeonardo21 күн бұрын

    Thank you! ❤️

  • @Bineeshvp-wq3zn
    @Bineeshvp-wq3zn22 күн бұрын

    for a private repo is that not possible to setup the secretes? bcz there is no settings tab available for the private repo.

  • @GatoNordico
    @GatoNordico24 күн бұрын

    I think it depends on who’s the intended user. I would say shadcn is a great starting point for someone who wants to have the flexibility to modify their ui components. And as you highlighted this flexibility comes with a cost, which in this case is not monetary…

  • @wizz1e80
    @wizz1e8025 күн бұрын

    Wonderful content But you didn't show how to make layouts in the code based routing

  • @BoobaGreen
    @BoobaGreen25 күн бұрын

    coooooooool

  • @eduardcapanu
    @eduardcapanu26 күн бұрын

    ciao Leonardo, i miei complimenit per il video, li sto seguendo da un po' e vorrei fare anche io qualcuno su ReactJS, ti potrei chiedere che app usi per la registrazione video dello schermo e del viso in un cerchio? Grazie in anticipo <3

  • @DevLeonardo
    @DevLeonardo25 күн бұрын

    Ciao Eduard, grazie! Per registrare uso OBS, il cerchio va configurato ma ci sono parecchi tutorial in giro.

  • @dcaballero_97
    @dcaballero_9727 күн бұрын

    Thanks so much. You make it easy and look easy for us too lol

  • @mkkavinda7016
    @mkkavinda701627 күн бұрын

    hey, whats the vscode extension that u're using for suggestions in terminal?

  • @StephenBeale
    @StephenBeale27 күн бұрын

    just what I needed, short and succinct and got the job done - much appreciated!

  • @AlexanderTalaveraKarslake
    @AlexanderTalaveraKarslake28 күн бұрын

    Thanks for your contribution. I have been so heartbroken by this library. Everyone BEWARE, it doesn't work on iphone. After dedicating much time to building an app that works perfectly accross my computer and my android phone, I realized from my testing and friends testing that everything is broken on the iphone. If you liked the drawer/dialog, let me tell you, from urlparam bugs to screen flickering, to layers being broken and buttons not working (I'm a senior frontend dev with experience and this is an issue with the lack of maintenance to the library), the whole thing is completely unstable.

  • @wadoudazer6906
    @wadoudazer690628 күн бұрын

    What about solution , i hate the way chakra material and mantine works with classic css or css in js (emotion) i really like tailwind

  • @jamiuadeleye
    @jamiuadeleye8 күн бұрын

    Tailwind also works well with mantine.

  • @angstrom1058
    @angstrom105829 күн бұрын

    "Dependency Hell" Thanks for pointing this out.

  • @AustinWhitbeck
    @AustinWhitbeck29 күн бұрын

    Hello! Super glad to have come across your video. Been learning the TanStack Forms the last couple days (been using TanStack React Query for a good while and it's great!). Have been understanding and getting through it pretty quickly but I seem to be running into an issue with the setters when it comes to arrays. Your video explained it great! Just as I thought it worked based on reading their docs. However, still running into an issue where the .setValue() is setting the state, but then it clears back to the default value immediately the next time I log the field.state.value. Consoles go as follows: onClick={() => { console.log( 'contactsField before pushValue:', contactsField.state.value, ); contactsField.pushValue(''); console.log( 'contactsField after pushValue:', contactsField.state.value, ); }} And logs as follows: before: [] after: [''] and the next click: before: [] after: [' '] Any thoughts as to why it's somehow clearing the state? Thanks for your help and the video!

  • @DevLeonardo
    @DevLeonardo28 күн бұрын

    Hey! Do you have StrictMode enabled? If yes, there's a known issue about that (see github.com/TanStack/form/issues/704 ) For now you can remove the strict mode until it gets fixed :)

  • @AustinWhitbeck
    @AustinWhitbeck28 күн бұрын

    @@DevLeonardo Awesome! I'll take a look into that. Thanks again for the great video and for pointing me there. I appreciate you!

  • @aarondz789
    @aarondz78929 күн бұрын

    I think tanstack is future.It's really cool.

  • @joshuaclaracay7602
    @joshuaclaracay760229 күн бұрын

    the only dev that explains tanstack services so wellll, like godaaaamn

  • @austincodes
    @austincodes29 күн бұрын

    If there is a problem with shadcn you can make a pull request. If you are using MUI are forced to fix a bunch of random breaking changes because you wanted a newer version for a single component or bug fix. MUI and things it are terrible

  • @MrPkmonster
    @MrPkmonsterАй бұрын

    Hello, could your suggest alternative library instead of shadcn ? Thank you

  • @xxxxxxxxxxxxxxxxxxxxxxxxx981
    @xxxxxxxxxxxxxxxxxxxxxxxxx98116 күн бұрын

    nextui is good and it's an actual library. it has a premium side, but it's optional

  • @SirJagerYT
    @SirJagerYT6 күн бұрын

    DaisyUI

  • @alvarouribe8416
    @alvarouribe8416Ай бұрын

    I love you 😂

  • @yudhistiratama9332
    @yudhistiratama9332Ай бұрын

    hello, i want to ask, i got some error said "Error: React functionality useState is not available in this environment." what should i do? *already search for this error, but got nothing

  • @yudhistiratama9332
    @yudhistiratama9332Ай бұрын

    or just because iam using next on it, thats why the error msg appear?

  • @DevLeonardo
    @DevLeonardoАй бұрын

    Using the library with React Server Components (in Nextjs for example) requires an extra configuration step. You can find more in the docs: tanstack.com/form/latest/docs/framework/react/guides/ssr

  • @DfromTC
    @DfromTCАй бұрын

    Not correct

  • @Me-zd5tn
    @Me-zd5tnАй бұрын

    Maybe this is tricky but what if I want the probability to chage based on the results of a Google Form? That can be done?

  • @Me-zd5tn
    @Me-zd5tnАй бұрын

    Maybe this is tricky but what if I want the probability of every item be a result of a Google Form? For example, I made a form where the users can choose between items A, B and C and I want the system to generate the probability ratio base on how many times people choose those options. Meaning that, if in a group of ten people A was chosen 5 times, it has a 50% chance to be selected in my gacha system and if B was chosen 3 times, it would have a 30% chance to appear

  • Ай бұрын

    Thank you ever so much. Sort and useful. I do not have the instruction Git Abort Merge, I do have Git clone, Git merge, etc. Do you know if I need to install or activate anything else? Thank you in advance

  • @pofiabel9526
    @pofiabel9526Ай бұрын

    Hi! exactly what i needed, just that after loging-in, all the routes nested in _authenticated, are now turning up as 404 Not found, but when i take it out of _authenticated, it becomes found : ( please help!

  • @pofiabel9526
    @pofiabel9526Ай бұрын

    Resolved.

  • @DevLeonardo
    @DevLeonardoАй бұрын

    Great to hear it's resolved! For context, what was the issue? Anyway, you can find the code of the project shown on the video here if you want a reference: github.com/Balastrong/tanstack-router-demo/tree/04-authenticated-routes

  • @pofiabel9526
    @pofiabel9526Ай бұрын

    Nope ... Turned out not resolved 😭. Now I need that help please. When I login, I realised the is loggedIn state changes to true, but then it does not update immediately in the context, which was resulting the 404, so only when I reload the tab, then the state in the context is updated, which shouldn't be so. Any help is appreciated.

  • @hamzaboutssaroute9652
    @hamzaboutssaroute9652Ай бұрын

    thanks for your clear explanation

  • @airixxxx
    @airixxxxАй бұрын

    Thanks for the video, there's not a lot of videos about it yet. Do you think this library can be used in prod as is right now, or it needs to mature to compete with the likes of React Hook Form?

  • @DevLeonardo
    @DevLeonardoАй бұрын

    Not ready yet for production but I think it has good potential and I'd keep an eye on it 👀 Personally I'm using it on a side project (the survey generator shown in video) mostly with the purpose of testing/benchmarking what the new features can do and to support the library development. It should reach v1 soon so let's see what happens :D

  • @artu-hnrq
    @artu-hnrqАй бұрын

    I like it!

  • @vetedde
    @veteddeАй бұрын

    Thanks! Vere helpful!

  • @jjtthh5872
    @jjtthh5872Ай бұрын

    tks for solving my problem

  • @SimonsTechClub
    @SimonsTechClubАй бұрын

    If your interested in AI vs Software Developers: Read my blog about why AI could replace programmers, Uncle Bob and Github Copilot Workspace: aisoftwaredevelopers.blogspot.com/2024/05/on-april-29-2024-github-launched-github.html

  • @SimonsTechClub
    @SimonsTechClubАй бұрын

    Great content! The detailed workflow of the new tool briefly and practically shown in about 6 minutes. Thank you!