Youssef Benlemlih
Youssef Benlemlih
  • 29
  • 61 982
How To Actually Learn Web Dev in 2025 (Step-By-Step Roadmap)
Get UIKits with 10,000 free mins: bit.ly/3Pgdd6T
Take Advantage of ZEGOCLOUD: bit.ly/3BR55qq
Top 15 React Projects with Source Code: bit.ly/3W0SPup
ZEGOCLOUD SDK &API allows you to easily build video call apps/voice call apps/live streaming apps/chat apps in low code within minutes.
Follow this Roadmap to become a frontend developer in 2025.
⏳ Timestamps
00:00 Intro
00:20 Easy Roadmap
02:11 Zegocloud
03:14 Advanced Roadmap
10:49 Watch Next
🔗 Links
Git Cheat Sheet: www.youssefbee.com/resources/git-cheat-sheet
Newsletter: www.youssefbee.com/newsletter
My Resource Collection: www.youssefbee.com/resources/frontend-kit
มุมมอง: 697

วีดีโอ

TanStack Router Full Course (With Common Patterns & Best Practices)
มุมมอง 446วันที่ผ่านมา
Use TanStack Router for seamless React navigation with TypeScript, dynamic routes, and secure URL validation. ⏳ Timestamps 00:00 Why TanStack Router 00:41 What's You'll Learn 01:35 Setup 06:26 Add A Second Page 09:04 Use Path Parameters 10:50 Navigate Between Pages 12:37 Custom Link Components 13:52 Dynamic Navigation 15:44 Search Parameters with Zod 21:38 Thanks for Watching 🔗 Links GitHub Cod...
How To Find ANY Bug with Git Bisect
มุมมอง 1.5Kหลายเดือนก่อน
Learn how to use Git Bisect to EASILY find bugs in your code... Take it a step further by automating the whole process 🕺 ⏳ Timestamps 00:00 Intro 00:23 A Project With A Bug 01:23 Simple Bisect 03:12 The Git Bisect Run Command 04:01 Add A Test 05:37 Automated Bug Finding 🔗 Links Git Cheat Sheet: www.youssefbee.com/resources/git-cheat-sheet Newsletter: www.youssefbee.com/newsletter My Resource Co...
Must-Know React Pattern for Snappy UIs
มุมมอง 2.2Kหลายเดือนก่อน
A tutorial on implementing debounced values in React to prevent excessive backend calls and UI flickering by creating a custom useDebounceValue hook for controlling state updates. ⏳ Timestamps 00:00 Intro 00:06 The Problem 01:27 Create useDebounce Value 03:44 Make The Hook Reusable 04:17 Watch Next 🔗 Links Code: github.com/youssefbenlemlih/react-patterns/tree/main/debounced-values Free Frontend...
How I Built My Tech Blog 🚀 (Libraries, Tools, SEO, Deployment)
มุมมอง 747หลายเดือนก่อน
A personal website project built with a modern tech stack including NextJS, Contentlayer2, Mantine, ShikiJs, and TailwindCSS. Features include rich content management, code syntax highlighting, SEO optimization, and newsletter integration. Styled with a combination of Mantine components and Tailwind CSS. Deployed on Vercel for optimal performance. Complete codebase available on GitHub as a temp...
A New React Framework Just Dropped… I'm Impressed!
มุมมอง 9Kหลายเดือนก่อน
TanStack Start, a new React Library, is finally Here. Let's see how it stands up against NextJS 🤩! ⏳ Timestamps 00:00 Intro 00:38 TanStack Start is Here! 01:35 Code Example 03:04 Website is now Open Source 03:30 Watch Next 🔗 Links TanStack Start: tanstack.com/start/latest My Website's Code: github.com/youssefbenlemlih/website My Resource Collection: www.youssefbee.com/frontend-kit
Senior Devs Use These React Hooks
มุมมอง 7K2 หลายเดือนก่อน
Hooks have hanged the way we build React applications. They got rid of a lot of code complexity by encouraging composition over inheritance But where the magic really shines is with custom hooks. So today I want to share must-know hooks that I personally can't go without. By the way, you can find all these hooks in usehook-ts or other react hook libraries (like useHooks, aHooks or react-hookz)....
Advanced React Patterns: Handling Modals (3 Ways)
มุมมอง 3.4K2 หลายเดือนก่อน
Modals are UI elements that users are used to in modern websites Having created modals in so many react projects, I noticed that there are 3 patterns that always repeat, when it comes to create modals. So today I want to share 3 React Patterns that you can use to easily implement modals as well as some edge cases that you should watch out for. ⏳ Timestamps 00:00 Intro 01:02 Pattern #1 01:26 Pat...
React Query Full Course (With Common Patterns & Best Practices)
มุมมอง 8K2 หลายเดือนก่อน
React Query Full Course (With Common Patterns & Best Practices)
STOP Using 'style' in React
มุมมอง 2.8K7 หลายเดือนก่อน
STOP Using 'style' in React
React useState: Usage, Examples & Pitfalls
มุมมอง 2958 หลายเดือนก่อน
React useState: Usage, Examples & Pitfalls
Reviewing your React Code: Episode #3
มุมมอง 9K9 หลายเดือนก่อน
Reviewing your React Code: Episode #3
I Tried The NextJS App Router. It's Awesome.
มุมมอง 1969 หลายเดือนก่อน
I Tried The NextJS App Router. It's Awesome.
Reviewing your React Code: Episode #2
มุมมอง 2.8K10 หลายเดือนก่อน
Reviewing your React Code: Episode #2
Reviewing your React Code: Episode #1
มุมมอง 1.8K10 หลายเดือนก่อน
Reviewing your React Code: Episode #1
The Problem with TypeScript Enums
มุมมอง 31611 หลายเดือนก่อน
The Problem with TypeScript Enums
Git Merge vs. Rebase: When to use each?
มุมมอง 287ปีที่แล้ว
Git Merge vs. Rebase: When to use each?
4 Quick Tips To Code Faster
มุมมอง 246ปีที่แล้ว
4 Quick Tips To Code Faster
Update All NPM Dependencies: Fast & Easy!
มุมมอง 3.8Kปีที่แล้ว
Update All NPM Dependencies: Fast & Easy!

ความคิดเห็น

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

    Great intro into the library! For anyone building upon this, I'd recommend diving into using loaders to warm up TanStack Query. Navigations suddenly start feeling waayyyyy faster.

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

    Great video, thanks a lot

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

    Thanks

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

    Nice!

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

      I didn't expect the creator of TanStack Router himself to watch the video.. crazy! Thanks for your comment 😊

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

    Alternately... import { useDeferredValue } from 'react';

  • @K.Huynh.
    @K.Huynh. 13 วันที่ผ่านมา

    thank you for sharing. This trick so helpfull to newbie.

  • @K.Huynh.
    @K.Huynh. 20 วันที่ผ่านมา

    Thank you so much. I love the way you share knowledge.

  • @kidushh4426
    @kidushh4426 20 วันที่ผ่านมา

    This video helps me a lot man thank you

  • @sirajul-anik
    @sirajul-anik หลายเดือนก่อน

    Just loved it. I have been using git for a long time now, but never used git bisect before. Thanks for the tutorial. Just my thought. I am mostly lost when you are switching from the terminal section to the left sidebar section. The content is so big that it's really hard to find out what you're actually doing. Having a reasonable font size would help maybe. Best of luck for you.

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

      Hey, thanks a lot for your valuable feedback 🙌☺️

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

    Really cool concept the only issue i have is vim in vscode Σ⁠(⁠ಠ⁠_⁠ಠ⁠) just use vim or nvim dammit 😂

  • @abubakar.khawaja
    @abubakar.khawaja หลายเดือนก่อน

    In same day found two really underrated and useful git commands. 1. git worktree 2. git bisect Thanks, nicely explained

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

      Wow Git Worktree looks cool! I should definitely take it for a spin, thanks!

    • @abubakar.khawaja
      @abubakar.khawaja หลายเดือนก่อน

      Yeah, it's pretty handy when you have to switch between feature branches with different dependencies

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

    🇲🇦🇲🇦😊

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

    Bravo youssef

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

    Hi I love cuisine

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

      What are the odds! What kind of cuisine are you interested in?

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

    For anyone who is planning on implementing the debounce pattern, they should look into the native useDeferredValue hook - it may very likely be the preferred solution to your problem.

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

      Thanks for the tip.. I'll definitely look into that 👌

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

    nahh....server action in nextjs is much simplier and straight forward

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

    Not quite accurate about vite seeing as both Astro and React Router v7 aka Remix v3 (now that the proects are merged) are both bundled with Vite. There are many SSR-capable frameworks powered by Vite (Vike, etc.).

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

      With Vite I mean the typical Client Side React app you get by running: npm create vite@latest my-vue-app -- --template react-ts BTW TanStack Start is also powered by Vite 🕺

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

    Actually, all these hooks have long been available in the react-use project by siberiacancode. Take a look at it, you might find something useful for enhancing your "senior" experience.

  • @GabrielMartinez-ez9ue
    @GabrielMartinez-ez9ue หลายเดือนก่อน

    The best framework is which ever gets you where you want to be. Tons of optimizations, best practices, and best framework with an app that has 0 clients.

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

    Use Laravel Inertia With React ♥

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

      I should give this one a try, I heard so many good things about laravel

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

    "If your JS Framework is stable, it's outdated..." 😁

  • @Jef-ev4ik
    @Jef-ev4ik หลายเดือนก่อน

    Cool stuff

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

    so useMutationState only return pending user, we should use this with useQuery together? display mutation state while status is penging and after that useQuery will refetch and display real data? thanks

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

      Yeah you could also do the optimistic updates inside the custom queries

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

    Thank you very much for this superb tutorial

  • @SR-zi1pw
    @SR-zi1pw หลายเดือนก่อน

    Solid start might be a good competitor for next js

  • @aliasgar.burhani1099
    @aliasgar.burhani1099 หลายเดือนก่อน

    I'm an extensive user of mantine ui. Almost all of these hooks are present in that library.

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

      Yeah the hooks in mantine are a gem, really cool!

  • @realOo7-v6r
    @realOo7-v6r หลายเดือนก่อน

    I just came clicked here to say l dont think this click bait title mentality is healthy for the JS community.

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

      What is clickbaity here? The content of the video literally matches the title and thumbnail

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

    I like NextJS more, it handles the Routes in folder structure as well as for the api and slug (nested pages)

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

      TanStack start also has file based routing (with & co). In comparison to NextJS, it also offers typesafe navigation and you have the option to have flat routes (tanstack.com/router/latest/docs/framework/react/guide/file-based-routing#flat-routes)

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

    Looks promising, could be better than Next.js but not necessarily better than RR7/Remix. Although, I do think Next.js still has a qualitative edge with turbopack in rust.

  • @AbcXyz-fy7jf
    @AbcXyz-fy7jf หลายเดือนก่อน

    Remix could not replace Next how Tenstack will.

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

    Don't waste your time learning JS framework

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

    Enough my framework is only chatgpt

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

    I see now JS community is busy producing stupid frameworks instead of solving actual problems

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

      yeah what js community needs rn is all hands on deck in ecmascript. we need let expressions, pattern matching, and pipeline operator... think swift or rust... the hell are they waiting on!?

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

      @@SogMosee Yeah exactly. Took them so long to add toReversed and toSorted methods. My God! Why always a new framework??!!

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

      i wouldnt call any tanstack framework “stupid” 🫣

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

    ahh i that useDebounce is really amazing because I implement the same thing by using function, eventlistener and useRef for apis!. thanks for saving my extra work!

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

    Nice

  • @Boi28-i2i
    @Boi28-i2i หลายเดือนก่อน

    looks promising, not sure about killing the NextJS... we need ISR in this

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

    I love how vercel is a partner of this project 😂 it must be good but same as other frameworks it takes time to shape the community and tools which is the main thing

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

    Yes, please upload the video on how to set up your website. Thanks.

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

      My Modern Website TechStack (ReactJS, NextJS, Contentlayer2, MDX, Mantine, ShikiJs, Tailwind): th-cam.com/video/RK_zYdOrOXg/w-d-xo.html

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

      @youssefbenlemlih, you're the best, man. Thank you.

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

    when will developers realize that it's not about NextJS , React or Tailwind Being the best, it's about being good enough to get adopted on businesses

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

      You talking about "ship fast" marketing developer, software devs are always looking for quality software

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

      but you will need 5 yrs of real experience to trully understand that

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

      Yes you're right, many react devs are worshiping a cult and they expect other devs to follow suit too. Meanwhile real life companies still use the MERN stack and could be less bothered what SSR is.

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

    Another day another js framework.

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

    Thansk for the overview Youssef!

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

    I liked how you use the confirm dialog. I think I might need to utilize your approach to have a custom usehook instead of simply handing it with props.

  • @masar-at
    @masar-at หลายเดือนก่อน

    Just use jotai or zustand

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

    Thank you for a great content!

  • @JonathanDsouza-f4j
    @JonathanDsouza-f4j หลายเดือนก่อน

    Radix ui, create context. Thank me later

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

      Thank you 🙏. Wow, so I just reinvented the wheel, I guess. I checked radix's code, it's more or less the same implementation: github.com/radix-ui/primitives/blob/main/packages/react/context/src/createContext.tsx

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

    Great content! Very interested in the implementation of these hooks from scratch

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

    Great video! I'd add to the list react-use-measure, founding it useful with aniamtions.

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

    Thanks Youssef, great vid.

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

    Awesome! Thanks!

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

    Goated video, thanks!