Dev Leonardo
Dev Leonardo
  • 197
  • 703 709
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!
มุมมอง: 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)
NEW GitHub Copilot Workspace Demo
มุมมอง 13K3 หลายเดือนก่อน
NEW GitHub Copilot Workspace Demo
shadcn/ui is great! But what if...
มุมมอง 7K3 หลายเดือนก่อน
shadcn/ui is great! But what if...
How to Review a Pull Request on GitHub
มุมมอง 1.4K4 หลายเดือนก่อน
How to Review a Pull Request on GitHub
TanStack Router: Code Based Routing
มุมมอง 1.5K4 หลายเดือนก่อน
TanStack Router: Code Based Routing
Building Together Our DIscord Bot
มุมมอง 1084 หลายเดือนก่อน
Building Together Our DIscord Bot
A 3D Viewer for Any Website
มุมมอง 2134 หลายเดือนก่อน
A 3D Viewer for Any Website
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
Support Open Source with your Company
มุมมอง 416 หลายเดือนก่อน
Support Open Source with your Company
Friendly and Effective Code Reviews
มุมมอง 2816 หลายเดือนก่อน
Friendly and Effective Code Reviews
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

ความคิดเห็น

  • @goozman101
    @goozman101 10 ชั่วโมงที่ผ่านมา

    Thank you for this video. It pointed me to the missing piece.

  • @lsaavedr
    @lsaavedr 2 วันที่ผ่านมา

    thanks 😂 ❤

  • @emanuelegurini
    @emanuelegurini 3 วันที่ผ่านมา

    We want a series where you start creating animations using vanilla CSS

    • @DevLeonardo
      @DevLeonardo 3 วันที่ผ่านมา

      I don't think it's gonna happen anytime soon 😂

  • @a.aashishjairammabd7220
    @a.aashishjairammabd7220 5 วันที่ผ่านมา

    Bro i need this website link

  • @hulashmahto99
    @hulashmahto99 7 วันที่ผ่านมา

    Nice

  • @KralekGiftshop
    @KralekGiftshop 8 วันที่ผ่านมา

    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

    • @DevLeonardo
      @DevLeonardo 8 วันที่ผ่านมา

      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

  • @goncaloshred
    @goncaloshred 9 วันที่ผ่านมา

    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?

    • @DevLeonardo
      @DevLeonardo 8 วันที่ผ่านมา

      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.

  • @SeanCassiere
    @SeanCassiere 9 วันที่ผ่านมา

    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 😋.

    • @DevLeonardo
      @DevLeonardo 8 วันที่ผ่านมา

      Thanks for the comment! The search params API works so smooth that I see why everyone is using it a lot :D

  • @madisopabul
    @madisopabul 9 วันที่ผ่านมา

    trash dont watch video safe time

  • @Sarlasnw
    @Sarlasnw 9 วันที่ผ่านมา

    That's helped me a lot! Thank you, bro.

  • @Bifimax
    @Bifimax 9 วันที่ผ่านมา

    great explaination need more videos like this

  • @carlosenriquecastanedaguti8130
    @carlosenriquecastanedaguti8130 10 วันที่ผ่านมา

    Excelent explanation, thanks very much for your video.

  • @snletwang6994
    @snletwang6994 11 วันที่ผ่านมา

    Thanks Dev Leonardo, I was really stuck on few concepts for my work,, you are a saviour bro!1

    • @DevLeonardo
      @DevLeonardo 11 วันที่ผ่านมา

      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

  • @juiced9432
    @juiced9432 15 วันที่ผ่านมา

    I don't understand why the bar / foo in _hiddenLayout render any parent layout?

  • @leandrorodriguez4444
    @leandrorodriguez4444 17 วันที่ผ่านมา

    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 ?

  • @xhappybunnyx
    @xhappybunnyx 18 วันที่ผ่านมา

    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!

  • @rogformer
    @rogformer 18 วันที่ผ่านมา

    Does not work in 2024.

  • @cb73
    @cb73 18 วันที่ผ่านมา

    There are downsides but… compared to what?

  • @djtoon8412
    @djtoon8412 21 วันที่ผ่านมา

    can we get a react version with tanstack router

    • @DevLeonardo
      @DevLeonardo 19 วันที่ผ่านมา

      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

  • @eduardoferras5228
    @eduardoferras5228 22 วันที่ผ่านมา

    Very good, thank you for the video, it helped a lot, especially for the examples

  • @asdetodo20
    @asdetodo20 22 วันที่ผ่านมา

    Gracias pibe

  • @DevLeonardo
    @DevLeonardo 23 วันที่ผ่านมา

    Have a look at the repo: github.com/Balastrong/myntenance (you can leave a ⭐ while you're there)

  • @nasko235679
    @nasko235679 23 วันที่ผ่านมา

    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.

  • @s_the_first
    @s_the_first 24 วันที่ผ่านมา

    "if your component has a problem, it is... YOUR problem". Lol. You are correct. But this is a good thing. Funny tho...

  • @hiranga
    @hiranga 25 วันที่ผ่านมา

    ah this helps 💪🏾💪🏾

  • @0xy23
    @0xy23 26 วันที่ผ่านมา

    this tanstack router content is a gold of mine! Please make more videos about this library please

    • @DevLeonardo
      @DevLeonardo 25 วันที่ผ่านมา

      Thank you! Do you have any topic in particular you'd like me to cover?

  • @sourabhsingh4515
    @sourabhsingh4515 28 วันที่ผ่านมา

    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 🤣🤣

  • @jilherme
    @jilherme 29 วันที่ผ่านมา

    thanks, cherry-pick is what I needed. Never used it before, nice to know

  • @n8900498
    @n8900498 หลายเดือนก่อน

    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

  • @wzup23
    @wzup23 หลายเดือนก่อน

    Dude thank you!

  • @Roamer_sea_manila
    @Roamer_sea_manila หลายเดือนก่อน

    Amazing, thank you.

  • @user-oo6hz8hg6g
    @user-oo6hz8hg6g หลายเดือนก่อน

    thank you very much helped a lot

  • @ganeshbabu8263
    @ganeshbabu8263 หลายเดือนก่อน

    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.

    • @DevLeonardo
      @DevLeonardo 25 วันที่ผ่านมา

      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 :)

  • @l0gic23
    @l0gic23 หลายเดือนก่อน

    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

  • @uprisingalpha2065
    @uprisingalpha2065 หลายเดือนก่อน

    navigate({ search: (prev: ItemFilters) => ({ ...prev, [name]: value }) }); what is search for ?

  • @supremeleader5516
    @supremeleader5516 หลายเดือนก่อน

    thanks

  • @uprisingalpha2065
    @uprisingalpha2065 หลายเดือนก่อน

    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 ?

  • @matteoperonidev
    @matteoperonidev หลายเดือนก่อน

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

  • @isenewotheophilus6485
    @isenewotheophilus6485 หลายเดือนก่อน

    My take on your video: It's BS

  • @thebarnowlsmusic
    @thebarnowlsmusic หลายเดือนก่อน

    dopeeeeee thx for sharing this.

  • @adusparx
    @adusparx หลายเดือนก่อน

    Perfect video

  • @KevinVandyTech
    @KevinVandyTech หลายเดือนก่อน

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

    • @DevLeonardo
      @DevLeonardo หลายเดือนก่อน

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

  • @ricoowenene9897
    @ricoowenene9897 หลายเดือนก่อน

    Legend!

  • @synapty
    @synapty หลายเดือนก่อน

    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
    @cachipum หลายเดือนก่อน

    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
      @cachipum หลายเดือนก่อน

      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

    • @nathankrasney
      @nathankrasney หลายเดือนก่อน

      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

    • @cachipum
      @cachipum หลายเดือนก่อน

      @@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

  • @andyting6094
    @andyting6094 หลายเดือนก่อน

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

  • @aarondz789
    @aarondz789 หลายเดือนก่อน

    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
      @dimasadnan4873 หลายเดือนก่อน

      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-dv1nb หลายเดือนก่อน

    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
    @KaraTilki20 หลายเดือนก่อน

    Thanks a lot