![Dev Leonardo](/img/default-banner.jpg)
- 197
- 703 709
Dev Leonardo
Italy
เข้าร่วมเมื่อ 18 ก.พ. 2009
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 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 ;)
They animated shadcn!
Are you building the latest AI-powered revolutionary SaaS startup? You probably need shiny animated components in your landing page!
Check this out👇
Following the success of shadcn, numerous "component collections" have popped up, with components designed to be copy-pasted entirely into your app.
This time it's Magic UI, a collection of animated components using the library framer motion, mostly designed for landing pages or user-facing content in general.
_______________________________
Support my work: github.com/sponsors/Balastrong ❤️
Hit like and subscribe for more content! :D
Beginner-Friendly Open Source Projects: github.com/DevLeonardoCommunity
Join the Discord community! Here's the invite: discord.gg/bqwyEa6We6
You can also follow me on the other platforms:
Twitter: Balastrong
dev.to: dev.to/balastrong
GitHub: github.com/Balastrong
Home: leonardomontini.dev/
TikTok: www.tiktok.com/@balastrong
Instagram: devbalastrong
_______________________________
TIMESTAMPS
0:00 Magic UI
01:58 Biggest MagicUI Advantage
03:49 The philosophy of a tool
06:09 Installing Magic UI
07:43 Confetti!
Check this out👇
Following the success of shadcn, numerous "component collections" have popped up, with components designed to be copy-pasted entirely into your app.
This time it's Magic UI, a collection of animated components using the library framer motion, mostly designed for landing pages or user-facing content in general.
_______________________________
Support my work: github.com/sponsors/Balastrong ❤️
Hit like and subscribe for more content! :D
Beginner-Friendly Open Source Projects: github.com/DevLeonardoCommunity
Join the Discord community! Here's the invite: discord.gg/bqwyEa6We6
You can also follow me on the other platforms:
Twitter: Balastrong
dev.to: dev.to/balastrong
GitHub: github.com/Balastrong
Home: leonardomontini.dev/
TikTok: www.tiktok.com/@balastrong
Instagram: devbalastrong
_______________________________
TIMESTAMPS
0:00 Magic UI
01:58 Biggest MagicUI Advantage
03:49 The philosophy of a tool
06:09 Installing Magic UI
07:43 Confetti!
มุมมอง: 280
วีดีโอ
TanStack Router: Route/Location Masking
มุมมอง 247วันที่ผ่านมา
In React, you might want to show a shorter URL to the user, hiding some query params or parts of the URL entirely. Let's talk about route masking with TanStack Router 🎭 It's not a super common practice, but sometimes it helps. Here are a couple of examples: 1)You want to navigate to a page with some parameters already set. You can pass them into query params, but you don't need to show that to ...
React useOptimistic hook in Nextjs 14
มุมมอง 14414 วันที่ผ่านมา
What if you could make your backend respond in 0ms? ⚡️ In a real scenario, some api calls will most often be successful (hopefully) so here's the trick, bring some optimism in your application and instantly update the UI as if the operation went through. You can't have a slow backend, if you don't even wait for the response 🧠 I tested the useOptimistic hook introduced in React 18 in my new Next...
Your next side project won't fail this time 💡
มุมมอง 10821 วันที่ผ่านมา
My new side project will help your next side project stay alive a little bit longer, hopefully. It's an Open Source Nextjs app, integrated with GitHub, to keep track of plans and ideas. The goal is to have all things about side projects organized in one place, so you can write down your shower thoughts and try to be a little bit more accountable about that fancy idea you just had and were super...
The Missing Shadcn Component 🪄
มุมมอง 550หลายเดือนก่อน
Look up in the sky! It's a bird! It's a plane! It's an Autocomplete! Code: github.com/Balastrong/shadcn-autocomplete-demo (happy if you leave a star on the repo ⭐️) Support my work: github.com/sponsors/Balastrong ❤️ Hit like and subscribe for more content! :D Beginner-Friendly Open Source Projects: github.com/DevLeonardoCommunity Join the Discord community! Here's the invite: discord.gg/bqwyEa6...
I like camelCase
มุมมอง 86หลายเดือนก่อน
Some public APIs respond in camelCase 🐫 and some other in snake_case 🐍 What happens if your application gets data from both? Join me in this crusade for consistency ⚔️ Code: github.com/Balastrong/camelize-demo Support my work: github.com/sponsors/Balastrong ❤️ Hit like and subscribe for more content! :D Beginner-Friendly Open Source Projects: github.com/DevLeonardoCommunity Join the Discord com...
TanStack Table: Backend Pagination, Filter & Sort with TanStack Query + TanStack Router
มุมมอง 2.1Kหลายเดือนก่อน
With server side pagination, the browser has to handle local state with filters and sorting. Wanna do that on query params to have shareable URLs? TanStack provides such a great DX! I created a React example using Query, Router and Table. TanStack Query manages your async state. In this case it takes responsibility for providing fresh data every time your filters are changed. TanStack Router is...
Building an HTTP Server and other Code Challenges
มุมมอง 84หลายเดือนก่อน
👉 Sign Up (referral): app.codecrafters.io/join?via=Balastrong The best way to get better at programming is and remains one: practice. With CodeCrafters you're guided into building some popular tools, learning about their mechanics and underlaying concepts. Today let's begin together building an HTTP server :D Support my work: github.com/sponsors/Balastrong ❤️ Hit like and subscribe for more con...
TanStack Router: Block navigation with unsaved changes
มุมมอง 4692 หลายเดือนก่อน
"You have un saved changes, are you sure you want to leave?" ⚠️ TanStack Router has a hook to conditionally block navigation, let's give it a look! This can be really useful if your user has partially filled a form without submitting it and you want to make sure data is saved before leaving. You can either use the browser window.confirm to signal the disruptive action, or use a custom UI seamle...
TanStack Form: Dynamic Arrays in React
มุมมอง 4612 หลายเดือนก่อน
TanStack Form: Dynamic Arrays in React
🌈 2 Colorful vscode Extensions to Paint your Workflow
มุมมอง 8112 หลายเดือนก่อน
🌈 2 Colorful vscode Extensions to Paint your Workflow
TanStack Form: Advanced Validation in React
มุมมอง 8592 หลายเดือนก่อน
TanStack Form: Advanced Validation in React
GitHub README powering 4 Online Multiplayer Games
มุมมอง 2523 หลายเดือนก่อน
GitHub README powering 4 Online Multiplayer Games
TanStack Form: Simple Validation (with shadcn/ui & React)
มุมมอง 2.1K3 หลายเดือนก่อน
TanStack Form: Simple Validation (with shadcn/ui & React)
How to Review a Pull Request on GitHub
มุมมอง 1.4K4 หลายเดือนก่อน
How to Review a Pull Request on GitHub
TanStack Router: Layout Sharing/Nesting & Custom 404
มุมมอง 2.6K4 หลายเดือนก่อน
TanStack Router: Layout Sharing/Nesting & Custom 404
Learn React, Angular and Vue... all at once!
มุมมอง 2064 หลายเดือนก่อน
Learn React, Angular and Vue... all at once!
TanStack Router: Authenticated Routes (Guards)
มุมมอง 5K5 หลายเดือนก่อน
TanStack Router: Authenticated Routes (Guards)
TanStack Router: Query Parameters & Validation
มุมมอง 2.8K5 หลายเดือนก่อน
TanStack Router: Query Parameters & Validation
TanStack Router: Path Parameters & Loader
มุมมอง 3.4K5 หลายเดือนก่อน
TanStack Router: Path Parameters & Loader
TanStack Router: Setup & Routing in React
มุมมอง 7K5 หลายเดือนก่อน
TanStack Router: Setup & Routing in React
Restore deleted or lost files with git
มุมมอง 1.5K6 หลายเดือนก่อน
Restore deleted or lost files with git
15 Minutes of Reading Documentation 📖 for 15 Days
มุมมอง 2246 หลายเดือนก่อน
15 Minutes of Reading Documentation for 15 Days
Thank you for this video. It pointed me to the missing piece.
thanks 😂 ❤
We want a series where you start creating animations using vanilla CSS
I don't think it's gonna happen anytime soon 😂
Bro i need this website link
Nice
Nice extantion. Thanks for the developer and for the video. Is there a way to use the curent year in the number or add number lenght. For example: I want a number with format 24001, 24002, 24003, ... where the first digits are the curent year
Thank you! Unfortunately that's not possible as the extension does not really read your cards and their data, the only thing that sees is the unique id
First of all thanks a lot for the great video! I've been using optimistic hook for a while, but the custom hook that you've created seems to be quite handy! I would like to ask you, how would you manage the optimistic state on a like button? Would you pass the whole array of userIds that have liked to the hook or just some simple boolean "isLiked"? I'm still a new developer and I was passing the whole array of userIds that have liked some content, but doesn't seem to be the best practise as I'd be exposing all the userIds to the client, right?
If you want to display a counter you should do the math (count the userIds) on your server and only return the final number. Everything that is handled in the useOptimistic hook (as every other hook) is already client side. Your client value should just be the number and the optimistic update only do +1 to that number.
Great video! When we released the route masking feature back during the beta, we really only considered that Instagram-style dialog-to-page type navigation as its only real production use case. We of course knew about the search param hiding capability, but we never thought that it'd be anything someone would want to do. Now about 8 months since we went 1.0, with people wanting to put everything in their URL search params, the declarative route masking works so well 😋.
Thanks for the comment! The search params API works so smooth that I see why everyone is using it a lot :D
trash dont watch video safe time
That's helped me a lot! Thank you, bro.
great explaination need more videos like this
Excelent explanation, thanks very much for your video.
Thanks Dev Leonardo, I was really stuck on few concepts for my work,, you are a saviour bro!1
Love to hear that! ❤️ Don't forget to subscribe if you haven't already, a new video on TanStack Router is scheduled for tomorrow :D
I don't understand why the bar / foo in _hiddenLayout render any parent layout?
i dont understand i keep having an issue in the vite.config.ts file when i do import { TanStackRouterVite } from '@tanstack/router-vite-plugin'; Module '"@tanstack/router-vite-plugin"' has no exported member 'TanStackRouterVite'.ts(2305) import TanStackRouterVite i didnt clone the repository i started my own, from an existing small project. im using vite, when i run the application the empty files that i created are actually being filled with the route, the autogen file is also working. im just getting this annoying error from the vite.config.ts any suggestiongs ?
I've read so many threads saying basically this but seeing the live demo removed the fear that I was misunderstanding something. Love this, thank you!
Does not work in 2024.
There are downsides but… compared to what?
can we get a react version with tanstack router
It can be an interesting project but for now the only "key" feature I'm using on the router is be path params, which you can find here for the TanStack Router version: th-cam.com/video/xUrbLlcrIXY/w-d-xo.html
Very good, thank you for the video, it helped a lot, especially for the examples
Gracias pibe
Have a look at the repo: github.com/Balastrong/myntenance (you can leave a ⭐ while you're there)
A lot of the components (or primitives whatever) also don't work together. Let's say you want to insert a DropdownMenu inside a NavigationMenu. Everything spazzes out and the component starts getting rerendered constantly. Yeah, it can be annoying and time-consuming to write your own components but after spending days trying to stitch up a dropdown multi-nested navigation from shadCN components and failing, I'd say I would've been better off doing it from scratch.
"if your component has a problem, it is... YOUR problem". Lol. You are correct. But this is a good thing. Funny tho...
ah this helps 💪🏾💪🏾
this tanstack router content is a gold of mine! Please make more videos about this library please
Thank you! Do you have any topic in particular you'd like me to cover?
the developer of shadcn must be his classmate that's why he is just telling us what we already know and we don't care about those things 🤣🤣
thanks, cherry-pick is what I needed. Never used it before, nice to know
Do you have a repo for your code you using to demonstrate, I am very new to React and wish to follow your tutorial using your code
Dude thank you!
Amazing, thank you.
thank you very much helped a lot
i change color to peacock color but now i want my default color back, how to get back to my default color without disable or uninstall peacock color extension.
Colors for visual studio code are defined in .vscode/settings.json and peacock is just a shortcut to write there. You can customize the colors manually or remove them entirely on that file :)
Woukd you be willing to make a video, targeted to children that help connect project based learning withbinterest based projects... For example, this pokemon ptoject is a great interst project for kids and connecting their interest in pokemon to their interest in programming or introducing that programing in the toolbag can help their other interests... Magic can happen... Or something... Would be great to show such a video to my kid who is interested.... Connecting that to your playlists might be just the ticket to have new potential developers get started and stay interested
navigate({ search: (prev: ItemFilters) => ({ ...prev, [name]: value }) }); what is search for ?
thanks
Hey! i'm a big fan of you from korea. i understood that make main nav from __route file and use <Outlet/> for component rendering. But my question is , can't i use <Outlet /> on any other path component ? for example, when i go into /pokemon. there is a sub nav. (like as shown in the above your video)and also i go into /pokemon/$id. there is also sub nav , and pokemon details . how can i make code ?
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
You copy paste the shadcn component code into your code. fixing shadcn bug on github is useless for your all ready copy paste shadcn code ...... So using shadcn in production seem problematic
@@nathankrasney if you are working with incompetent developers yeah, for sure, but these components are so simple that even a student is able to understand their code
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