- 201
- 746 001
Dev Leonardo
Italy
Registrace 18. 02. 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 ;)
GitHub introduces Sub-Issues & more!
You probably used to track multiple GitHub issues manually, in the body of another issue. Good news: creating sub-issues is now a supported feature! 🚀
This update comes with some other improvements, such as Issue Types, a redefined Issue Search and more!
Bad news: it's still behind a feature flag.
Good news: you can request your Organization to join the private beta in one of those discussions:
Sub issues: github.com/orgs/community/discussions/131957
Issue types: github.com/orgs/community/discussions/112806
It's also a great chance to share feedback to help giving shape to these new features!
Also, have a look at Issue Form Templates: czcams.com/video/hNs5Gg_fEEs/video.html
_______________________________
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
00:00 SubIssues & More
00:24 Issue Type
01:44 Sub Issues
03:34 Issue Search
04:48 Enable the new features
05:21 Issue Form Templates
This update comes with some other improvements, such as Issue Types, a redefined Issue Search and more!
Bad news: it's still behind a feature flag.
Good news: you can request your Organization to join the private beta in one of those discussions:
Sub issues: github.com/orgs/community/discussions/131957
Issue types: github.com/orgs/community/discussions/112806
It's also a great chance to share feedback to help giving shape to these new features!
Also, have a look at Issue Form Templates: czcams.com/video/hNs5Gg_fEEs/video.html
_______________________________
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
00:00 SubIssues & More
00:24 Issue Type
01:44 Sub Issues
03:34 Issue Search
04:48 Enable the new features
05:21 Issue Form Templates
zhlédnutí: 142
Video
Why values on my React form do not update?
zhlédnutí 180Před 14 dny
Might seem like a bug, it's a feature instead. The explanation goes down to... javascript! As simple as that! We're so used to javascript frameworks doing all sort of things that we forget that displaying the value of a javascript variable in the DOM has to be explicitly done, it's not a default js behaviour. When you want to push the performance and optimize your code, it makes sense to avoid ...
How TanStack releases multiple times a day
zhlédnutí 305Před 21 dnem
Tanstack (query, router, form, etc...) releases multiple times a day, thanks to GitHub Actions, delivering features and bugfixes almost instantly to millions of developers. Is it safe? Is it automated? Sure, let's see how! tanstack.com/ Support my work: github.com/sponsors/Balastrong ❤️ Hit like and subscribe for more content! :D Beginner-Friendly Open Source Projects: github.com/DevLeonardoCom...
They animated shadcn!
zhlédnutí 1,5KPřed měsícem
Are you building the latest AI-powered revolutionary SaaS startup? You probably need shiny animated components in your landing page! Check this out: magicui.design/ 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 fram...
TanStack Router: Route/Location Masking
zhlédnutí 517Před měsícem
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
zhlédnutí 288Před měsícem
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 💡
zhlédnutí 139Před měsícem
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 🪄
zhlédnutí 913Před 2 měsíci
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...
Convert snake_case to camelCase
zhlédnutí 92Před 2 měsíci
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
zhlédnutí 3,5KPřed 2 měsíci
TanStack Table: Backend Pagination, Filter & Sort with TanStack Query TanStack Router
Building an HTTP Server and other Code Challenges
zhlédnutí 108Před 2 měsíci
Building an HTTP Server and other Code Challenges
TanStack Router: Block navigation with unsaved changes
zhlédnutí 664Před 3 měsíci
TanStack Router: Block navigation with unsaved changes
TanStack Form: Dynamic Arrays in React
zhlédnutí 587Před 3 měsíci
TanStack Form: Dynamic Arrays in React
🌈 2 Colorful vscode Extensions to Paint your Workflow
zhlédnutí 1,1KPřed 3 měsíci
🌈 2 Colorful vscode Extensions to Paint your Workflow
TanStack Form: Advanced Validation in React
zhlédnutí 1,1KPřed 3 měsíci
TanStack Form: Advanced Validation in React
GitHub README powering 4 Online Multiplayer Games
zhlédnutí 317Před 3 měsíci
GitHub README powering 4 Online Multiplayer Games
TanStack Form: Simple Validation (with shadcn/ui & React)
zhlédnutí 2,5KPřed 4 měsíci
TanStack Form: Simple Validation (with shadcn/ui & React)
How to Review a Pull Request on GitHub
zhlédnutí 1,9KPřed 4 měsíci
How to Review a Pull Request on GitHub
TanStack Router: Layout Sharing/Nesting & Custom 404
zhlédnutí 3,2KPřed 5 měsíci
TanStack Router: Layout Sharing/Nesting & Custom 404
Learn React, Angular and Vue... all at once!
zhlédnutí 240Před 5 měsíci
Learn React, Angular and Vue... all at once!
TanStack Router: Authenticated Routes (Guards)
zhlédnutí 6KPřed 6 měsíci
TanStack Router: Authenticated Routes (Guards)
TanStack Router: Query Parameters & Validation
zhlédnutí 3,4KPřed 6 měsíci
TanStack Router: Query Parameters & Validation
TanStack Router: Path Parameters & Loader
zhlédnutí 4,2KPřed 6 měsíci
TanStack Router: Path Parameters & Loader
TanStack Router: Setup & Routing in React
zhlédnutí 9KPřed 6 měsíci
TanStack Router: Setup & Routing in React
I actually like to be able to customize my components easily
Soo helpful thank you so much
You should show the before like you did but the after too so it can be more useful
Straight to the point, no annoying music, simple example and that's it. Man, I'm feeling like a PRO now, thank you!
If you have an issue with a component, you can literally re-install the component via the cli, get the latest version and boom, you're good.
Hi Buddy! Have you figured out how to generate a nav from the your top level routes? It seems like this would be a great way to make your navs based on the routes you generate. Make sense?
Thank you very much
thanks man
I have this problem that I can't use router.invalidate() inside my hook because it's not inside router provider.
Hey can you talk a bit about how can I comment my repository code from readme....i wanna keep some code there without appearing on profile
Very helpful video! Thank you.
a
I have questions out of this video that the mern stack is dead and does creating projects help to get you a job if you are an intern or fresher
I dont have the nr command i dont see that part
It's not about Tanstack Router, that's a shortcut for "npm run" from a tool called ni, I talked about it here: czcams.com/video/NiTmtiBgJKI/video.html
This missing feature was basically the reason why we decided to move from Github to Notion for most task management...
wao this is precious, thanks man
How to create a separate route for not found? like /404 or something.
You can create a 404 page and add a redirect/or navigate in the defaultNotFoundComponent in your router
@@DevLeonardo I Got it but still thanks my friend
Hi, Nice video. Not sure the debug point is not coming to vs code . Do we have special settings done ? Any help would be appreciated
How to debug react code in webstorm?
The explanation is superb!
What extension are you using to colorize your line indentations (See 0:47)? Or is it a built-in setting in VS Code? Edit: Found it - it's called indent-rainbow
Yep, it's that one!
What is the extension used for add color in the code window for differentiate tag start and end points
is it possible to use this inside a form from react-hook-form
Thanks! That was very informative man!
LOVE FROM PAKISTAN
router.invalidate() is not updated the login data, means on clicking the login sign in button, signout button is not displayed
Is tanstack form better than RHF?
They're two different libraries at different stages, I'd say give it a try and see if you like one more than the other for your needs :)
Visual studio 2022 has the better option of fixing merge conflicts. They have the check boxes there that automatically adds changes to the next line if you accept both. Hoping vs code make that
Complicated...
0:42 The ownership of the code is the best feature of shadcn/ui. I rather try to resolve the problem by myself than create issue, wait author/contributor verify the issue, fix it, then release it. I even created the PR to fix the bug, but it never got merge. Or got merge but never released. In the end of the day, I need to maintain a fork of the library by myself. Is it less work compare to maintain shadcn/ui components? 2:48 You can config the tsserver to ignore some pattern from auto/suggest import ("typescript.preferences.autoImportFileExcludePatterns": []) Yes, upgrade deps for long run project is always a pain.
Hi buddy. Your tutorials are great. I have learned so much from watching your videos. I was wondering if you could do a video on routes that work with modals and drawers. It seems to me this would require both file-based and code-based routing. I am currently building a project with shadcn and it would be great to be able to have a modal element that has an outlet. So far, I have not been able to figure it out.
You should be able to achieve that even on a file-based project, with a modal having its own route. Plus if you want you can use route masking to make the URL cleaner, here's a video on that: czcams.com/video/yTx7zYpq4ok/video.html
Purchased the pro version 🎉thankss
Glad you like it! I should have asked them for a referral link or a sponsored video 😂
Thanks man! That was meaningful and straightforward!
it doesn't hurts linking magic ui in the description
It's literally the first result on Google for "magic ui" but you're also right, I forgot to add it. There it is: magicui.design/ ❤️
Thanks for your sharing. It helps me a lot in my new project.
Cool! What are you working at? :D
Thank you for this video. It pointed me to the missing piece.
Great to hear! What were you missing? :)
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 ?