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 ;)
Пікірлер
Wow, folder path color extension is really cool! 🤩 Thank you! ✌️
My take on your video: It's BS
dopeeeeee thx for sharing this.
Perfect video
Yo, let's get this example in the official docs
Thanks, that would be amazing! The code might need some polishing but we can talk about that in a PR later 👀
Legend!
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.
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
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
Imagine find a video more useful than the official documentation. First time using router and this helps a lot. Much thanks for sharing.
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.
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.
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.
Thanks a lot
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' }})
How is your validateSearch defined? I see you're passing { code: '123' } which is a string, not a number.
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!
Can you talk about finding projects that pay you to contribute?
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
Thanks for mentioning this, it has been very valuable for making my decision (I will stick with JoyUI).
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
Thank you! ❤️
for a private repo is that not possible to setup the secretes? bcz there is no settings tab available for the private repo.
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…
Wonderful content But you didn't show how to make layouts in the code based routing
coooooooool
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
Ciao Eduard, grazie! Per registrare uso OBS, il cerchio va configurato ma ci sono parecchi tutorial in giro.
Thanks so much. You make it easy and look easy for us too lol
hey, whats the vscode extension that u're using for suggestions in terminal?
just what I needed, short and succinct and got the job done - much appreciated!
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.
What about solution , i hate the way chakra material and mantine works with classic css or css in js (emotion) i really like tailwind
Tailwind also works well with mantine.
"Dependency Hell" Thanks for pointing this out.
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!
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 :)
@@DevLeonardo Awesome! I'll take a look into that. Thanks again for the great video and for pointing me there. I appreciate you!
I think tanstack is future.It's really cool.
the only dev that explains tanstack services so wellll, like godaaaamn
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
Hello, could your suggest alternative library instead of shadcn ? Thank you
nextui is good and it's an actual library. it has a premium side, but it's optional
DaisyUI
I love you 😂
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
or just because iam using next on it, thats why the error msg appear?
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
Not correct
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?
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
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!
Resolved.
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
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.
thanks for your clear explanation
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?
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
I like it!
Thanks! Vere helpful!
tks for solving my problem
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
Great content! The detailed workflow of the new tool briefly and practically shown in about 6 minutes. Thank you!