- 29
- 61 982
Youssef Benlemlih
Germany
เข้าร่วมเมื่อ 21 ก.ย. 2013
Self-proclaimed "React"-Guy
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
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)
React useState: Usage, Examples & Pitfalls
มุมมอง 2958 หลายเดือนก่อน
React useState: Usage, Examples & Pitfalls
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
Update All NPM Dependencies: Fast & Easy!
มุมมอง 3.8Kปีที่แล้ว
Update All NPM Dependencies: Fast & Easy!
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.
Great video, thanks a lot
Thanks
Nice!
I didn't expect the creator of TanStack Router himself to watch the video.. crazy! Thanks for your comment 😊
Alternately... import { useDeferredValue } from 'react';
thank you for sharing. This trick so helpfull to newbie.
Thank you so much. I love the way you share knowledge.
This video helps me a lot man thank you
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.
Hey, thanks a lot for your valuable feedback 🙌☺️
Really cool concept the only issue i have is vim in vscode Σ(ಠ_ಠ) just use vim or nvim dammit 😂
In same day found two really underrated and useful git commands. 1. git worktree 2. git bisect Thanks, nicely explained
Wow Git Worktree looks cool! I should definitely take it for a spin, thanks!
Yeah, it's pretty handy when you have to switch between feature branches with different dependencies
🇲🇦🇲🇦😊
Bravo youssef
Hi I love cuisine
What are the odds! What kind of cuisine are you interested in?
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.
Thanks for the tip.. I'll definitely look into that 👌
nahh....server action in nextjs is much simplier and straight forward
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.).
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 🕺
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.
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.
Wise words!
Use Laravel Inertia With React ♥
I should give this one a try, I heard so many good things about laravel
"If your JS Framework is stable, it's outdated..." 😁
Sadly...
Cool stuff
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
Yeah you could also do the optimistic updates inside the custom queries
Thank you very much for this superb tutorial
Solid start might be a good competitor for next js
I'm an extensive user of mantine ui. Almost all of these hooks are present in that library.
Yeah the hooks in mantine are a gem, really cool!
I just came clicked here to say l dont think this click bait title mentality is healthy for the JS community.
What is clickbaity here? The content of the video literally matches the title and thumbnail
I like NextJS more, it handles the Routes in folder structure as well as for the api and slug (nested pages)
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)
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.
Remix could not replace Next how Tenstack will.
Don't waste your time learning JS framework
Enough my framework is only chatgpt
I see now JS community is busy producing stupid frameworks instead of solving actual problems
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!?
@@SogMosee Yeah exactly. Took them so long to add toReversed and toSorted methods. My God! Why always a new framework??!!
i wouldnt call any tanstack framework “stupid” 🫣
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!
Nice
looks promising, not sure about killing the NextJS... we need ISR in this
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
Yes, please upload the video on how to set up your website. Thanks.
My Modern Website TechStack (ReactJS, NextJS, Contentlayer2, MDX, Mantine, ShikiJs, Tailwind): th-cam.com/video/RK_zYdOrOXg/w-d-xo.html
@youssefbenlemlih, you're the best, man. Thank you.
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
You talking about "ship fast" marketing developer, software devs are always looking for quality software
but you will need 5 yrs of real experience to trully understand that
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.
Another day another js framework.
That's how it goes 😅
Thansk for the overview Youssef!
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.
Just use jotai or zustand
Thank you for a great content!
Radix ui, create context. Thank me later
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
Great content! Very interested in the implementation of these hooks from scratch
Great video! I'd add to the list react-use-measure, founding it useful with aniamtions.
Thanks Youssef, great vid.
Sure, Youssef 😏
Awesome! Thanks!
Goated video, thanks!