- Видео 62
- Просмотров 424 983
WebDevEducation
Великобритания
Добавлен 10 ноя 2015
Hey! I'm Tom and I've been a web developer for over a decade.
I look forward to bringing you tutorials and content around web development and increasing your value as a web developer 💵
Subscribe for weekly videos on #reactjs #nextjs #tailwindcss #javascript #typescript and more!
I look forward to bringing you tutorials and content around web development and increasing your value as a web developer 💵
Subscribe for weekly videos on #reactjs #nextjs #tailwindcss #javascript #typescript and more!
Simple way to validate search params in Next 15
⭐️ webdeveducation.com
🎓 The simple approach I'm taking moving forward with Next JS 15 to validate search params.
vasepa npm package I created / am using:
www.npmjs.com/package/vasepa
THE TANSTACK START COURSE IS NOW AVAILABLE - GET IT FOR JUST $12.99 BELOW!
www.udemy.com/course/tanstack-start/?referralCode=6B535F36A18C81060E91
🔔 Subscribe if you want more free tutorials like this one! ruclips.net/user/webdeveducation
#zod #nextjs15 #nextjs
🎓 The simple approach I'm taking moving forward with Next JS 15 to validate search params.
vasepa npm package I created / am using:
www.npmjs.com/package/vasepa
THE TANSTACK START COURSE IS NOW AVAILABLE - GET IT FOR JUST $12.99 BELOW!
www.udemy.com/course/tanstack-start/?referralCode=6B535F36A18C81060E91
🔔 Subscribe if you want more free tutorials like this one! ruclips.net/user/webdeveducation
#zod #nextjs15 #nextjs
Просмотров: 487
Видео
Shadcn datepicker - add "close on date select" functionality
Просмотров 70928 дней назад
⭐️ webdeveducation.com 🎓 Improve the shadcn date picker component by adding functionality to close the date picker when a new date is selected THE SHADCN UI COURSE IS NOW AVAILABLE - GET IT FOR JUST $12.99 BELOW! www.udemy.com/course/shadcn-ui/?couponCode=24PROMO7 🔔 Subscribe if you want more free tutorials like this one! ruclips.net/user/webdeveducation #shadcn #nextjs15 #nextjs
GitHub Copilot is now FREE*
Просмотров 2,4 тыс.Месяц назад
⭐️ webdeveducation.com 🎓 GitHub Copilot is now FREE* (with limitations) 🔔 Subscribe if you want more free tutorials like this one! ruclips.net/user/webdeveducation
5 underrated webdev channels to follow in 2025
Просмотров 583Месяц назад
WebDev Cody's list: ruclips.net/video/E2UscGfpic0/видео.html My list of underrated webdev channels to follow in 2025: @coderyan @Kulkarniankita @CandDev @DevLeonardo @rasmic
Tailwind CSS V4: What To Expect?
Просмотров 11 тыс.2 месяца назад
⭐️ webdeveducation.com 🎓 Check out the new features of Tailwind CSS v4! THE SHADCN UI COURSE IS NOW AVAILABLE - GET IT FOR JUST $12.99 BELOW! www.udemy.com/course/shadcn-ui/?couponCode=24PROMO7 🔔 Subscribe if you want more free tutorials like this one! ruclips.net/user/webdeveducation #tailwindcss #shadcn #nextjs
The shadcn AI tool you've (probably) never heard of.
Просмотров 12 тыс.6 месяцев назад
⭐️ webdeveducation.com 🎓 Easily generate color palettes for shadcn ui using the design gui ai tool. THE SHADCN UI COURSE IS NOW AVAILABLE - GET IT FOR JUST $12.99 BELOW! www.udemy.com/course/shadcn-ui/?couponCode=24PROMO7 🔔 Subscribe if you want more free tutorials like this one! ruclips.net/user/webdeveducation #shadcn #nextjs15 #nextjs
Silky Smooth Animations in Next JS is EASY 🪄
Просмотров 2,1 тыс.7 месяцев назад
⭐️ webdeveducation.com 🎓 Creating silky smooth transitions in Next JS is EASY with the help of Framer Motion. THE SHADCN UI COURSE IS NOW AVAILABLE - GET IT FOR JUST $12.99 BELOW! www.udemy.com/course/shadcn-ui/?couponCode=24PROMO7 🔔 Subscribe if you want more free tutorials like this one! ruclips.net/user/webdeveducation #cssanimation #nextjs15 #nextjstutorial
Shadcn ui dialog is BROKEN! .. Let's fix it! 🔨
Просмотров 14 тыс.7 месяцев назад
⭐️ webdeveducation.com 🎓 Shadcn ui dialog component improvements tutorial with next js 15. Fix: github.com/shadcn-ui/ui/issues/16#issuecomment-1621383437 THE SHADCN UI COURSE IS NOW AVAILABLE - GET IT FOR JUST $12.99 BELOW! www.udemy.com/course/shadcn-ui/?couponCode=24PROMO7 🔔 Subscribe if you want more free tutorials like this one! ruclips.net/user/webdeveducation #shadcn #nextjs15 #nextjstuto...
2 minute Gradient Text in Tailwind CSS ✅
Просмотров 2,3 тыс.8 месяцев назад
⭐️ webdeveducation.com 🎓 Create gradient text colors in tailwind css in 2 minutes! THE SHADCN UI COURSE IS NOW AVAILABLE - GET IT FOR JUST $12.99 BELOW! www.udemy.com/course/shadcn-ui/?couponCode=24PROMO7 Tailwind CSS Zero to Hero course for just $12.99: www.udemy.com/course/tailwind-css-zero-to-hero/?couponCode=24PROMO5 🔔 Subscribe if you want more free tutorials like this one! ruclips.net/use...
FFS (in CSS) - Fluid Font Sizes 😏
Просмотров 7768 месяцев назад
⭐️ webdeveducation.com 🎓 Create responsive / fluid font sizes in CSS in 2 simple steps! THE SHADCN UI COURSE IS NOW AVAILABLE - GET IT FOR JUST $12.99 BELOW! www.udemy.com/course/shadcn-ui/?couponCode=24PROMO7 🔔 Subscribe if you want more free tutorials like this one! ruclips.net/user/webdeveducation #css #responsivedesign #ffs
STOP choosing between shadcn ui & next ui (use BOTH)
Просмотров 8 тыс.11 месяцев назад
⭐️ webdeveducation.com 🎓 Combine shadcn ui forms with next ui components. THE SHADCN UI COURSE IS NOW AVAILABLE - GET IT FOR JUST $12.99 BELOW! www.udemy.com/course/shadcn-ui/?couponCode=24PROMO7 🔔 Subscribe if you want more free tutorials like this one! ruclips.net/user/webdeveducation #nextjs14 #nextjs #shadcn
React Recursive Components - a PRACTICAL example
Просмотров 90011 месяцев назад
⭐️ webdeveducation.com 🎓 React recursive components a practical example of rendering a react component within itself i.e. componentception 👀 🔔 Subscribe if you want more free tutorials like this one! ruclips.net/user/webdeveducation #reactjs #recursion #reacttutorial
Shadcn ui calendar is BROKEN.. let's fix it!
Просмотров 11 тыс.11 месяцев назад
⭐️ webdeveducation.com 🎓 Shadcn ui calendar component improvements tutorial with react day picker, react hooks and next js 14. THE SHADCN UI COURSE IS NOW AVAILABLE - GET IT FOR JUST $12.99 BELOW! www.udemy.com/course/shadcn-ui/?couponCode=24PROMO7 🔔 Subscribe if you want more free tutorials like this one! ruclips.net/user/webdeveducation #shadcn #nextjs14 #reacthooks
Shadcn UI mobile menu (the PROPER way)
Просмотров 23 тыс.Год назад
⭐️ webdeveducation.com 🎓 Shadcn ui mobile menu component tutorial with react hooks and next js 14. THE SHADCN UI COURSE IS NOW AVAILABLE - GET IT FOR JUST $12.99 BELOW! www.udemy.com/course/shadcn-ui/?couponCode=24PROMO7 You can see an example of this implementation in the github repo for the shadcn course: github.com/tomphill/support-me-course 🔔 Subscribe if you want more free tutorials like t...
When to use server actions in Next JS 14
Просмотров 11 тыс.Год назад
⭐️ webdeveducation.com 🎓 When to use api route / route handlers or server actions in Next JS 14 app router. 🔔 Subscribe if you want more free tutorials like this one! ruclips.net/user/webdeveducation Vercel's video on 10 mistakes developers make when using the app router: ruclips.net/video/RBM03RihZVs/видео.htmlsi=6adwKIEahSTkQv6x #nextjs14 #serveractions #nextjstutorial
Shadcn UI password input toggle in Next JS 14 (the PROPER way)
Просмотров 8 тыс.Год назад
Shadcn UI password input toggle in Next JS 14 (the PROPER way)
Next JS 14 UI streaming and partial prerendering (INSANELY easy to set up!)
Просмотров 7 тыс.Год назад
Next JS 14 UI streaming and partial prerendering (INSANELY easy to set up!)
Next JS forms with Shadcn UI (the EASY way)
Просмотров 52 тыс.Год назад
Next JS forms with Shadcn UI (the EASY way)
React JS crash course 2024 for beginners
Просмотров 9 тыс.Год назад
React JS crash course 2024 for beginners
CSS light-dark() function tutorial (CSS dark mode & CSS light mode tutorial)
Просмотров 1,1 тыс.Год назад
CSS light-dark() function tutorial (CSS dark mode & CSS light mode tutorial)
How to create an npm package with typescript (in less than 3 mins)
Просмотров 3,1 тыс.Год назад
How to create an npm package with typescript (in less than 3 mins)
File uploads in Next JS 14 just got SO MUCH EASIER!!
Просмотров 20 тыс.Год назад
File uploads in Next JS 14 just got SO MUCH EASIER!!
The BEST tailwind css feature that you're probably not using (tailwind CSS tutorial)
Просмотров 2,2 тыс.Год назад
The BEST tailwind css feature that you're probably not using (tailwind CSS tutorial)
Should we stop using "&&" for conditional rendering in React? 🤔 (my reaction)
Просмотров 3,3 тыс.Год назад
Should we stop using "&&" for conditional rendering in React? 🤔 (my reaction)
Astro JS tutorial (view transitions API)
Просмотров 1,3 тыс.Год назад
Astro JS tutorial (view transitions API)
STOP using useState for React forms (there's an alternative method)
Просмотров 12 тыс.Год назад
STOP using useState for React forms (there's an alternative method)
Next JS 13.5 - why is NOBODY talking about this??
Просмотров 8 тыс.Год назад
Next JS 13.5 - why is NOBODY talking about this??
what if i need to use useActionState hook for my form? how do i go about that?
Thank you dude. You saved me a good chunk of time.
🙏
But there are flickers, how do you deal with that?
What do you mean?
@@WebDevEducation where you click the date, it flickers as it closes, looks like it's doing multiple state changes for some reason
thank you for this video
You're welcome 🙏
Thank you, very helpful!
Phew! Finally 100% useful walkthrough
🙏
So basically you just advertise your package here, instead of showing how to truly do it in Next
Thanks. This is amazing. Can we do the same with "nuqs" library somehow? I have no idea.
I don't think nuqs validates the params within a server components
NOTE: In this scenario it's better to not actually include the .optional(), that way cfyear will always have a value and not potentially be undefined.
When we have a dropdown and inside od it we have the dialog how we can open the dialog because automatically closed the dialog when click it to open it, can you video on it please or tell me on the reply step by step ❤
keep it going! you're growing! 🎉
Are you editing / adding custom functionality to shadcn components?
I really enjoy @rasmic as well, btw any chance you're from London?
I'm from Wales :)
Hi - thank you for the video. Quick question: the fetchData call is executed twice. It is in your video (ruclips.net/video/HVFSgIVXcD4/видео.html) as well as locally when I followed the course. Why is that?
You can read more about why this happens here: react.dev/reference/react/useEffect#my-effect-runs-twice-when-the-component-mounts
I use amazon Q which free and working great
Either their funding increased or maybe they are short on training data...
Hi, thanks. Another 2 to the list would be Juxtopposed and Concept Central. It's for inspiration and ideas I'd say. I feel this is also an underrated channel :) Subbed, please continue with more great content.
Ahh thank you so much! 🙏
Best video in youtube about form validation of shadcn.
🙏
Thanks for sharing!
sir what is your opinion on supermaven and cursor?
I don't use either of them, I like to keep my AI workflow minimal and for the most part all I use is the GitHub Copilot code completions. I don't use much of the other features anymore I find everything else too intrusive. 100% personal preference though :)
Do you use GitHub Copilot?
i use codeium. It is better than copilot.
sir why you upload video after 6 months. 😐
Do you pay for codeium or use the free version?
@@WebDevEducation free version is more than enough.
I use free version of Codeium, it's good on quality in both chat and autocomplete
Thank you so much for the mention! ❤ There's a lot of value in supporting each other, as each one talks about tech with their own style and people can discover and follow who they resonate more with, it's a win for everyone :D
thank u for the shoutout my g i really appreciate it
Love your channel man 🙏
Thanks, Tom! I joined three of the RUclips channels you suggested. This is going to be really useful.
Awesome!
Which underrated channels would you add to this list?
Not just dev Code with Beto Hamad Bahram Frontend Tribe Becodemy
Awesome! Thanks for sharing!
how about the theme?
doesn't work for me , i don't know why
SUPER UNDERRATED! also the light-dark function is officially supported in all major modern browsers
Thank you so much. you saved my time. thank you
i wasted two days then thought there is you tube not just chatgpt
Any possibility of a free coupon for udemy Next.js 15 & Firebase course?
btw the form input styling has been rolled back. i think adam changed his mind about doing it
awesom explanation
Im not so sure bout how much i like the move from js config to css config. I really liked the theme() function as it was "type"-safe. with the tailwind plugin installed in ur ide it told u when using a wrong variable. now this wont be possible anymore. I also dont like the @config js in css approach. I think this update makes tailwind easier to go into. But especially for custom plugins this is a big downgrade imo
losing type safety is a good point not sure why you think the Tailwind extension won't warn when using a wrong variable. adam wathan recently did a live demo with sam selikoff and the extension works just the same as before also not sure why you think custom plugins won't work. they're trying to get custom plugins to work in a similar way as before for backward compatibility
Thanks, its useful
Thanks for useful info 👍
All looks good, sensible changes and some good new features. A lot of changes though though , a V3-> V4 utility looks essential!
Thank you Tom for the informative v4 overview
Web Dev these days is over hyped, millions of things to learn to almost switch career.
Are you a fan of these updates in v4?
YES
absolutely
shadcn have abusive relationship with relative and absolute lol
😆
If the validation values come from an API .? At that time how can we write this Form Validation? At that time the client and server were confused and I can't do that... Give us a video for that one... I have to know
In your response from API, likely within handleSubmit: form.setError("fieldNameHere", { message: "Message from api here", });
Thank you 🙏
Typescript just gets in the way
thanks.
Thank you so much for the explanation! Now it’s clear
🙏
This thumbnail cracked me up. The sweating guy accurately described me when faced with this decision.
😆
Saved me!! Thank you
i find a better solution, i put forms in the dialog so i put this : ' z-50 max-h-[90vh] overflow-auto in dialog content and this 'fixed py-10 grid place-items-center in dialog overlay
This was amazing man, im.half asleep and still understand your explanation! Thanks for the great video and sweet dreams