![Dave Gray](/img/default-banner.jpg)
- 425
- 25 464 727
Dave Gray
United States
Приєднався 12 кві 2017
Web Development tutorials with full courses on HTML, CSS, JavaScript, React, Node.js and more!
My goal is to help you learn how to build the web. Teaching helps me learn, too. I work full-time as a Solutions Architect / Developer and part-time as a university web dev instructor. Thank you for subscribing, supporting my channel and sharing the videos you think may help others.
Keep striving for progress over perfection.
And a little progress every day goes a very long way.
Milestones:
July 20, 2020 - 1st video
Jan 1, 2021 - 1k subs
April 2021 - 4k watch hours
Nov 2021 - 10k subs
Jan 21, 2022 - Video at 100k views
Feb 16, 2022 - 100k watch hours
Feb 19, 2022 - 1m views
Dec 13, 2022 - 100k subs
Dec 2022 - Over 1m views in 1 month
April 7, 2023 - 10m views
May 26, 2023 - 1m watch hours
Sept 22, 2023 - Video at 1m views
Dec 25, 2023 - 250k subs
My goal is to help you learn how to build the web. Teaching helps me learn, too. I work full-time as a Solutions Architect / Developer and part-time as a university web dev instructor. Thank you for subscribing, supporting my channel and sharing the videos you think may help others.
Keep striving for progress over perfection.
And a little progress every day goes a very long way.
Milestones:
July 20, 2020 - 1st video
Jan 1, 2021 - 1k subs
April 2021 - 4k watch hours
Nov 2021 - 10k subs
Jan 21, 2022 - Video at 100k views
Feb 16, 2022 - 100k watch hours
Feb 19, 2022 - 1m views
Dec 13, 2022 - 100k subs
Dec 2022 - Over 1m views in 1 month
April 7, 2023 - 10m views
May 26, 2023 - 1m watch hours
Sept 22, 2023 - Video at 1m views
Dec 25, 2023 - 250k subs
Amazing New VS Code AI Coding Assistant with Open Source Models
Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Learn how you can use an amazing new vs code AI Coding Assistant with open source models and keep your code 100% local. We'll use Ollama, an open source LLM trained on code, and an open source AI Code Assistant integrated with vscode.
💖 Support me on Patreon ➜ patreon.com/davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: bit.ly/CompNextJSDev
- Advanced React: bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ discord.gg/neKghyefqh
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
GitHub: github.com/gitdagray
Twitter: yesdavidgray
LinkedIn: www.linkedin.com/in/davidagray/
Nextjs Server Actions Just Got Better with next-safe-action
(00:00) Intro
(00:23) Install Ollama
(01:20) Add an Open Source Model / LLM
(03:26) Continue for VS Code
(06:19) Code Chats & Autocompletions
(09:32) Wrap up
📚 Tutorial References:
🔗 VS Code: code.visualstudio.com/
🔗 Ollama: ollama.com/
🔗 EvalPlus Leaderboard: evalplus.github.io/leaderboard.html
🔗 CodeQwen: ollama.com/library/codeqwen
🔗 Continue: www.continue.dev/
Was this tutorial about how to set up your own local VS Code AI Coding Assistant helpful? If so, please share. Let me know your thoughts in the comments.
#ai #coding #assistant #vscode
Learn how you can use an amazing new vs code AI Coding Assistant with open source models and keep your code 100% local. We'll use Ollama, an open source LLM trained on code, and an open source AI Code Assistant integrated with vscode.
💖 Support me on Patreon ➜ patreon.com/davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: bit.ly/CompNextJSDev
- Advanced React: bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ discord.gg/neKghyefqh
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
GitHub: github.com/gitdagray
Twitter: yesdavidgray
LinkedIn: www.linkedin.com/in/davidagray/
Nextjs Server Actions Just Got Better with next-safe-action
(00:00) Intro
(00:23) Install Ollama
(01:20) Add an Open Source Model / LLM
(03:26) Continue for VS Code
(06:19) Code Chats & Autocompletions
(09:32) Wrap up
📚 Tutorial References:
🔗 VS Code: code.visualstudio.com/
🔗 Ollama: ollama.com/
🔗 EvalPlus Leaderboard: evalplus.github.io/leaderboard.html
🔗 CodeQwen: ollama.com/library/codeqwen
🔗 Continue: www.continue.dev/
Was this tutorial about how to set up your own local VS Code AI Coding Assistant helpful? If so, please share. Let me know your thoughts in the comments.
#ai #coding #assistant #vscode
Переглядів: 4 964
Відео
Nextjs Server Actions Just Got Better
Переглядів 5 тис.20 годин тому
Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap Nextjs server actions just got better with the library next-safe-action. In this video, I show the before and after code of a refactor with next-safe-action and how it helps clean up the code when using Next.js Server Actions. Support me on Patreon ➜ patreon.com/davegray ⭐ Become a full-stack web dev with Zero To Mastery Cours...
Python REST API Tutorial for Beginners | How to Build a Flask REST API
Переглядів 3,7 тис.День тому
Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap In this Python REST API Tutorial for Beginners you will learn how to build a Flask REST API. A key skill for backend web development is learning how to build a REST API. I'll use Python with Flask to show you how. Support me on Patreon ➜ patreon.com/davegray ⭐ Become a full-stack dev with Zero To Mastery Courses: - The Complet...
Next.js Modal Form w/ React-Hook-Form, ShadCN/ui Dialog, Server Actions & Validation
Переглядів 10 тис.День тому
Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap Learn how to build a Next.js Modal Form with React-Hook-Form, ShadCN/ui Dialog, Server Actions & Validation, TailwindCSS, TypeScript and more. Creating a modal form that launches from a table of results is a common use case in business applications. In this NextJS tutorial, you will learn how. 🙏 Thank you to daily.dev for spons...
Next.js Modal with Parallel & Intercepting Routes, shadcn/ui Dialog
Переглядів 9 тис.14 днів тому
Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap Build a Next.js Modal with Parallel & Intercepting Routes and the shadcn/ui Dialog component. In this tutorial, you will learn how Next.js Parallel & Intercepting Routes can work together to provide a modal and fallback route segment. Support me on Patreon ➜ patreon.com/davegray ⭐ Become a full-stack web dev with Zero To Maste...
NextJS Parallel Routes Explained with a Simple Example
Переглядів 7 тис.21 день тому
Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap NextJS Parallel Routes explained with a simple example - In this video, we'll look at how to use Next.js parallel routes and follow a simple example to increase your understanding. Learn NextJS parallel routes with this tutorial. Support me on Patreon ➜ patreon.com/davegray ⭐ Become a full-stack web dev with Zero To Mastery Co...
Next.js 15 Fixes Caching Issues | Nextjs Default Cache Changes
Переглядів 6 тис.Місяць тому
Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap Next.js 15 RC was just announced, and it fixes many of the caching issues that developers have been frustrated with. I quickly review the new cache settings and show how you can use them in Next.js 14.2 as well. Support me on Patreon ➜ patreon.com/davegray ⭐ Become a full-stack web dev with Zero To Mastery Courses: - Complete ...
Next.js Template vs Layout with Page Transition Animations
Переглядів 6 тис.Місяць тому
Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap Next.js Template vs Layout files - learn the difference in this tutorial as we apply custom page transition animations to a Next.js project. We'll use ShadCN/ui and the example code is available in the link below. Support me on Patreon ➜ patreon.com/davegray ⭐ Become a full-stack web dev with Zero To Mastery Courses: - Complet...
Hired in 30 Hours & The Power of Networking w/ Brian Morrison, Developer Educator
Переглядів 2,9 тис.Місяць тому
Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap In this interview with Brian Morrison II, Developer Educator at Clerk, Brian shares how he was laid off and hired for a new dev job in 30 hours. We talk about the power of networking, THAT Conference, new tech and more. Support me on Patreon ➜ patreon.com/davegray 👇 Brian Morrison's links: 🔗 Twitter: brianmmdev 🔗 W...
Build an AI RAG Application with LangChain & Next.js
Переглядів 12 тис.Місяць тому
Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap Learn how to build an AI RAG application with LangChain & Next.js. This tutorial introduces LangChain and shows how to use the framework to enhance your chatbots and build RAG (retrieval augmented generation) applications with Next.js. Support me on Patreon ➜ patreon.com/davegray ⭐ Become a full-stack web dev with Zero To Mast...
Best JavaScript is JS You Don't Need to Write - Interview w/ Scott Tolinski, Speaker at JSNation
Переглядів 3,4 тис.2 місяці тому
Today I'm interviewing Scott Tolinski. He will be speaking at JSNation - the main JavaScript conference of 2024! And it's is returning to Amsterdam on June 13th and 17th! Learn more at: bit.ly/3Wimb8D Use this discount code to get 10% off: "Dave Gray Discount" Find Scott online at: syntax.fm/ and tolin.ski/
Your Developer Portfolio NEEDS a Project like THIS
Переглядів 27 тис.2 місяці тому
Your Developer Portfolio NEEDS a Project like THIS
We All Have a Different Developer Roadmap - Interview with Anthony Fu, Speaker at JSNation
Переглядів 3,4 тис.2 місяці тому
We All Have a Different Developer Roadmap - Interview with Anthony Fu, Speaker at JSNation
Build Your UI Component Library in React & Next.js | ShadCN UI for Beginners
Переглядів 26 тис.2 місяці тому
Build Your UI Component Library in React & Next.js | ShadCN UI for Beginners
Python Django Full Course for Beginners | Complete All-in-One Tutorial | 3 Hours
Переглядів 63 тис.2 місяці тому
Python Django Full Course for Beginners | Complete All-in-One Tutorial | 3 Hours
Why I Don't Use Next.js Server Actions to Fetch Client-Side Data
Переглядів 21 тис.2 місяці тому
Why I Don't Use Next.js Server Actions to Fetch Client-Side Data
Web Dev vs Web Design Explained with Rus Anderson
Переглядів 2,1 тис.2 місяці тому
Web Dev vs Web Design Explained with Rus Anderson
What did Next.js Server Actions actually accomplish? And Other Questions...
Переглядів 6 тис.2 місяці тому
What did Next.js Server Actions actually accomplish? And Other Questions...
Why Beginners Need to Get Involved in Open Source with Eddie Jaoude
Переглядів 2,7 тис.3 місяці тому
Why Beginners Need to Get Involved in Open Source with Eddie Jaoude
Python Django User Authorization tutorial
Переглядів 4,5 тис.3 місяці тому
Python Django User Authorization tutorial
Tips for Web Dev Beginners with Colby Fayock of Cloudinary
Переглядів 2,6 тис.3 місяці тому
Tips for Web Dev Beginners with Colby Fayock of Cloudinary
Deploy with Docker - Step-by-step Tutorial
Переглядів 14 тис.3 місяці тому
Deploy with Docker - Step-by-step Tutorial
Django Login Form and User Authentication
Переглядів 8 тис.3 місяці тому
Django Login Form and User Authentication
Coding Advice for Beginners with Amy Dutton of RedwoodJS & Compressed.fm
Переглядів 4,2 тис.3 місяці тому
Coding Advice for Beginners with Amy Dutton of RedwoodJS & Compressed.fm
Next.js Reports tutorial with Microsoft Excel
Переглядів 13 тис.3 місяці тому
Next.js Reports tutorial with Microsoft Excel
Python Django User Registration - Full Tutorial
Переглядів 6 тис.3 місяці тому
Python Django User Registration - Full Tutorial
Python Django Challenge for Beginners with Solution
Переглядів 3,9 тис.4 місяці тому
Python Django Challenge for Beginners with Solution
Thanks for github.com/SH20RAJ/nextjs-loading-problem
❤❤❤❤❤❤❤ i want to pay you my whole college fee tbh Our college professors complicated this shi so hard. This was soo good
You need a high end computer to run that locally though. My mac m1 lags lol so I'll stick to copilot
Hmm, I have a mid PC running it without issues. I do have extra RAM though. Might make a difference.
Can confirm as well. I did the same test as Dave and it took about 1-2 minutes for the entire code to be written using codeqwen. Don't know if it's CPU or GPU that slows it down. I have 32gb RAM a 9400k and a AMD 580RX. So I guess at least my PC is not as fast as Dave's. But fun little piece of software to use. I also use Cody Free version as an alternative to Copilot, as I'm still learning programming and only do a little coding at my current job, so I don't feel it's worth forking out $ yet.
You definitely deserve your entry to the Nirvana! (The thing is: you bring so much enlightenment to our world that if you do so, you will be missed a lot! Hopefully you volunteer to reincarnate on this planet to bring your light!)
Fanatic course. I appreciate the level of detail.
thanks for the course, enjoy the coffee, you deserve it!! from @books4christ
Dave, I appreciate this a lot and definitely gonna check this out. After this, nobody's gonna use Copilot anymore.
Hello, I can see that you have python and js lessons on your channel, but what language has more opportunities to start job at least for free or for food:/? I learned python and Django before, but dropped it because people said that it's too slow, and i'm practicing MERN now, of course it feels a bit harder than Django. And i'm a bit confused now, was it right choice or wrong to drop python web
There are jobs for both. Difficult to say which would be better. Both are among the most popular programming languages.
It is so cool but it crashes my pc every few minutes. Even though my PC meets the requirements.
Hmm, I'm on a PC and that hasn't happened. Strange indeed. It does seem to be a bit power hungry according to some comments, but mine is far from a recent PC.
I am implementing a modal within a modal is this a good idea to do parallel routes?
A modal within a modal - I'd avoid if possible, but sometimes weird things are necessary. Parallel routes are a good idea for a modal - not sure about layering them.
Thank you for the great content. I have a private ollama server running in my company with dedicated video card. Is it possible to connect Continue to this server in my LAN? Ollama is not installed on my local workstation, it is on a server here in my environment.
I don't know, but if you find out, please share here. Interesting!
Thank you Dave for these great tutorials, as a non-native English speaker you speak English so evident that I can comprehend I'm stiil learning HTML and CSS Dave with your tutorials, your tutorials are so invaluable 🌻❤
Glad I can help!
very helpful tutorial, thanks a lot
Doesn't "useActionState" from React do exactly that? Why a third party hook?
Not the same. I should have emphasized the differences more. This implements Zod or other validation and abstracts away catching errors - no try/catch necessary. Also provides clearly defined error types. I'm going to do a follow up using toasts to show some additional patterns.
Is it adviced to use custom authentication endpoints or using prebuilt packages like autho0, passportjs to implement authentication and authorisation for a professional production app ? . By the way love your vedios .
Thank you! Rolling your own off is a good learning experience. That said, I prefer to use a service like Kinde for most projects.
Want to see docker, docker compose from scratch
I've tried a few models locally, and I really like having an AI assistant locally. Too bad I can't run it on my laptop. Anyone know of any good free or low cost alternatives?
Yeah running locally will take some power. If your laptop runs short on that, you might want to look at services that don't run locally.
As an answer to myself, I just found out about Chat RTX from Nvidia...it can run local LLM's and train on your local data as well. Now I only need a extension to integrate it into VS Code.
Hi Dave! I've been stuck on the trouble of having to display server error to client side. I just recently learned that in production, the server would change the error that was returned to client to a generic error message(I think this is not the issue when using action and useFormState instead of onSubmit). Should I use this on every form that uses react-hook-form and server actions? In a real world scenario, is it enough to just display a generic error message from the server? Whenever I want to do a mutation, I'm thinking of using the native form action before I switch to react-hook-form if my form is complex. Is this the right approach? Lastly, base from your experience, does it matter for UX if the error message is displayed when the form is submitted or on input blur/change.
There should be no problems displaying an error client side using what I show in this tutorial. I am going to do a follow-up to this with a toast message tutorial. There are several patterns that can be used. It won't just display a generic server message. As shown, you also get validation errors and fetch errors. You can modify the server error to show e.message so it can be very specific. I suggest sticking with react-hook-form and showing errors onBlur. It is a much preferred user experience.
Well its good. But takes away many system resources.
Could be a drawback of keeping everything local depending on machine power. I'm not usually running many other tasks while coding/chatting with it.
Awesome 😍....
Actually it's the intellisense extention that does not seem to be working, after installing is there any setting to change or anything to enable it? I hover over and I am not seeing the css,
After creating the script for prettier, am I supposed to do npm run prettier? Because the extention does not seem to be working for me.
but you need strong strong CPU
Mine isn't too strong. I'd say mid.
Thanks alot Dave, As per the request for upcoming videos I would be happy if you could provide honoJS, react / nextJs and postgress tutorial
Many possibilities there! Thanks for the request!
Legend
Thanks for a great tutorial, just have a question: is it possible to make parallel routing with diffrerent nextjs projects for example localhost:3000 and localhost:3001, localhost:3000 has sidebar of dashboard and localhost:3001 apper in dashboard if we navigate to it but sidebar stays from localhost:3000.
No, the parallel routes must be within the same project.
is this the future of IT ?? is this react library and redux stuff really practical ?? i hate seeing this and i don't understand why react is popular ?? it's really the most disgusting thing i saw in coding ? by the way , this tutorial is not helpfull and it's based on memorizing not what the actual understanding , there's much much better tutorial outthere ... i'm sorry but i first stumbled on your video and it discouraged me soooo much !!! this is not how a beginner learns this !!!
I don't feel like Redux is the popular choice going forward but so many deployed React apps still use it that it is good to know.
Thanks.Which is the best Ollama LLM for nextJS 14 free / licensed ?
I don't think you can target a framework like that unless someone specifically creates an LLM for it. Just go with the rankings for coding like I do with EvalPlus in this video.
thank you so much
You're welcome!
I was wondering if you could make a postgresql tutorial
Nice request! I've been thinking about that 🙌
Thanks Dave!
You're welcome!
Great! More of this please!
Thanks for the feedback! I do want to compare more of these solutions. I really like this one because it is local and you choose your own model - which allows you to upgrade as models improve.
@@DaveGrayTeachesCode 🙏
Did I miss something? I did not see code completion as you type your own code.
There is tab auto completion. That is the setting I changed in the config - but yeah, trying to fit it all into 10 minutes or less, I didn't demo everything.
Great work Dave!!! 🎉🎉🎉🎉❤❤❤
Thanks so much!!
thanks Dave, your always as ever on the money so to speak. Local LLMs may well be the next thing and privacy is king so this is well worth the time and investment. Thanks agai, your a ⭐cheers
You're welcome and I agree!
@@DaveGrayTeachesCode yep, I've got deepseek-coder-v2 running already, thanks to your prompting me to take a look on now windows up to now I've been running on WSL so in order to get this to work I had to first stop ollama in WSL with syttemctl commands to stop and disable but that aside, running in windows now which is terrific, its even working with dart / flutter which is amazing
Dave will ever make a course about the new nextjs futures
I'm waiting until Next.js 15 is promoted beyond release candidate. Then I will consider it.
I am using MacBook m1 and did everything as mentioned in the video. It seems like vscode is lagging after applying all the configuration. Also, auto suggestion is not working for me. Is there anything m missing?
I didn't add it to my Mac yet to compare, but installed locally shouldn't create a lag. I think you've got plenty of power, too. Maybe a quick restart of VS Code? As mentioned, I did have to restart Windows.
It's old news. 😢
Definitely not for everyone. But yeah, we do hear about things at different times.
first time hearing about this
Can we set the token size since there is a limit with copilot. Thank you another wonderful tutorial.
It will only be limited by the limits of the model you choose.
@@DaveGrayTeachesCode Thank you.
hey dave, do you use linux and if you do which distro do you use, i'm trying to switch from windows.
I used to. My favorite for a long time was Debian. Then everyone went to Ubuntu. Last I knew, Ubuntu was easiest to switch to.
@@DaveGrayTeachesCode thanks, i'll try that.
Everybody has an opinion on which Linux distro is best, and all of us are 100% right. :) I use PopOS as a daily driver and suggest you give it a try. Zorin and Mint are also often suggested for somebody just coming over from Windows. Ubuntu is a good choice as well. Depending on your hardware, you should be able to boot from a USB stick and try any of these before you commit to an installation.
I think Codeium is better even with free version
You've already had time to compare both? I want to compare others. Can you choose your own free model with Codeium? If so, it comes down to the extension features and UI comparison.
Good sir@@DaveGrayTeachesCode 1. Codeium doesn't require me to install and run a local ollama instance which hogs the compute and memory of my MBA making it unbearable to code. 2. Codeium free version doesn't give the ability to choose models but the Pro model has ability to choose GPT 4 models. Haven't tried that, don't have that kinda money but free is fast and good enough for my use case - Web dev. 3. Codeium setup is just 1 click. 🙂
Continue seems interesting, currently I testing cody, cursor & supermaven
Yes, I'm interested in comparing free options
Does this all happen locally? No posting your code to some server in Vietnam somewhere?
Right! And yes, 100% local.
@@DaveGrayTeachesCode This assumes we have a really good computer?
Thank you Dave, good quality content right there ❤
You're welcome!
Will take a look, but I'm finding hard to believe there's something out there to replace supermaven. Copilot is trash compared to it now.
Yes so many new things. I like this because you can keep changing the models as they improve and the extension is constantly being updated as well.
I agree supermaven is awesome. Switched from copilot
I tried it and instantly loved it-it's even better than my Tabnine Pro subscription! Thanks for letting me know it exists <3
Hello sir l'm learn the python from your channel but i forgot everything after some days and after a long time I'm learning again python please give some suggestions to learn python
Don't rush. Just learn one thing and then try to apply it. The more you use it, the easier it is to remember. Just learn a little something new every day.
@@DaveGrayTeachesCode ok thank you sir but in python course I couldn't understand the operators you wouldn't explain the some operators . How to understand that and were you learn python and other new technologies
@@Mrplayall8849 there are many python resources available. If what I said or taught did not stick with you, sometimes it is good to reference other sources of information. Putting all of these together will help your understanding.
I can't get past use of Ctl-C (on mac) after that step my venv is stuck and won't let me deactivate or runserver. I have deleted all and started from scratch 3 times and the same thing happens everytime after the Ctl-C command.
Hi! I noticed that the List component is re-rendered every time the value in the search field is changed. However, the request goes away after the last change of the List component - is this a feature of useSwr? Will this not work with fetch? Am I right? Thx for video and your work!