Hi Kevin thanks for this. I was thinking about this topic again just this morning. There is no lack of "how tos" for this NPM/Javascript development stuff. What is missing is the "higher level" hows and whys. Why install NPM? Why does NPM exist? "What am I missing between the easy world of and… well all this other stuff?" I think a demonstration of the step-by-step progression combined with an explanation of what changes and why these things are done this way now would be truly valuable for many of us. I imagine it would go something like : 1. plain JS in the HTML header. 2. JS file pulled in with tag. 3. JS file with functions "exported" pulled in with 4. same but functions broken up across multiple files, with imports/exports 5. same but now with a bundler… etc… Without understanding #3 and on, for someone who's still at #2, NPM is a head-scratcher because the environment and the JS syntax suddenly changes into something they may not be familiar with or understand. No amount of "how tos" addresses this missing part. You don't learn "what is this and why is it necessary and how does it work" from just doing it. ("How does it work?" is not the same question as "How do I do/use this?" I guess :) I had to dive into all this these last few days because I developed a little JS library and wanted to publish it so that people can use it with NPM. I am still jumping through the hoops of what that even means. "How can someone install and use this thing the old basic way and the new NPM/build/bundle/shake/crosspile/minify/etc way?" I'm a guy who was coding ecommerce frontends in 1997 using tables! Something happened around 2008-9 that I missed while looking away for a few years, and when I came "back to the web" it was like "whatdaheck is all this?" haha Anyways, thanks again. Your work is invaluable!
I strongly advise installing Node Version Manager (NVM) so you can easily flip Node and NPM versions as needed depending on the projects you are working on.
nvm-desktop is really handy on Mac and Windows. It gives you a GUI to manage installed versions, and allows you to set _different_ node versions for different projects.
THANK YOU FOR THIS!!! Although we used npm a hand-full of times during the boot camp I was a part of, I am so thankful for this deeper dive! Always a pleasure to see your videos, @Kevin
This is the first time I open your viedo when the viewcount is less than 20. I feel like this is a great achievement and I'm considering adding it to my CV. It should showcase dedication and attention towards learning of coding related stuff. 👀
Keith, I'm a junior web dev and I've had some react classes but I don't feel too confident with it. I'd love if you started doing some React videos. I know your main focus is css but your voice tone, pacing, your examples, everything you do is so amazingly well taught and crafted that I'd love to see it applied to something I need to learn better xD
Pro tip: just how Kevin dragndrop'ed the address into the terminal. you could click on the address bar to edit it and write "cmd" it will open a command prompt window with that address. 3:44
With Windows (somewhat depending on config) instead of starting a command-line, and copying the folder location you are after from file-explorer and pasting into cmd.exe, you can simply select the entire folder location in file-explorer and replace it with 'cmd' and press enter - which will open cmd.exe in the folder you are currently viewing in file-explorer.
10:18 In my opinion, having separate dependencies and devDependencies only makes sense when you're writing packages that will be used by others via npm. For "leaf projects", like your frontend, the user likely won't be using your packages directly either way, because they will probably all go through a bundler of some sort, and if you have dependencies you don't need to build your frontend, then they're probably not dependencies at all. So... I would just avoid the head-ache of deciding which is which, and just add everything as dependencies.
You didn't mention how to run npm on Linux, so I guess you assumed Linux users would already know all this! I say this in a good-natured way, and thank you for your videos.
I always run "npm config set ignore-scripts true" after installing npm. This prevents pre- and post-install scripts from running on packages and their dependents when installing. This helps prevent supply-chain attacks from packages that may have been taken over by a malicious actor. Of course, this will break packages that require pre- and post-install scripts. In this case, after verifying the security of what I'm installing, I will temporarily set ignore-scripts back to false, re-install, and then set ignore-scripts back to true. For my usage, however, keeping this true seldom causes a problem.
Hi Kevin, I've been following your channel for years and I am wondering if you've ever done any videos of your screen recording workflow; i.e. what tool do you use and what's the workflow for recording, editing etc. It would be interesting to see your approach.
@@nabilpatel970 if you have photoshop you can screenshot it from the video, open it in ps and cut out the undesired parts like the facecam and icons and stuff and ask ps ai to fill that space with relevant content.
A friend of mine which is definitely not me has never heard of 'vite' and finds that the tutorial stops making any sense from the first moment it gets mentioned. At the very end of the video we hear it is a script ...and it is used "under the hood for many other things". Obviously I could explain all this in one sentence but I like to see my friend getting frustrated at Kevin's videos.
I didn't really feel like talking about Vite specifically and what it is, it's just one of the *many* tools you can use npm for. The idea with this was for people who run across a tutorial that says to use `npm install` or `npm create` and not know what that meant, so they could use this as a starting point regardless of what that tool is.
Im wondering what to do if npm install in another folder than the root of the project? How to revert this or even if this is necessary? When i do i get another node_modules folder etc.
My personal site, and most of my projects are hosted by Netlify. As for packages, it depends on the project. I don't have much going on with my personal site, it's Eleventy, Sass, that's probably it. Most new projects of mine use Astro, PostCSS with a few of it's plugins, and depending on the size of the project, Sass as well.
npm audit fix should do it, as long as all the packages are still maintained. Has the potential to bring in a breaking change, but I've rarely run into issues with it. Sometimes, you just come across something old that has a lot of issues though, and it's probably best to avoid it at that point.
Hard topic to properly cover because it hasn't been replaced by something specific. Some people still live by it, others have gone to Tailwind, and others still have splintered into other things. It's all kind of messy and more based on personal preference now (which is a good thing I guess!)
Hi Kevin thanks for this. I was thinking about this topic again just this morning. There is no lack of "how tos" for this NPM/Javascript development stuff. What is missing is the "higher level" hows and whys. Why install NPM? Why does NPM exist? "What am I missing between the easy world of and… well all this other stuff?" I think a demonstration of the step-by-step progression combined with an explanation of what changes and why these things are done this way now would be truly valuable for many of us.
I imagine it would go something like :
1. plain JS in the HTML header.
2. JS file pulled in with tag.
3. JS file with functions "exported" pulled in with
4. same but functions broken up across multiple files, with imports/exports
5. same but now with a bundler…
etc…
Without understanding #3 and on, for someone who's still at #2, NPM is a head-scratcher because the environment and the JS syntax suddenly changes into something they may not be familiar with or understand. No amount of "how tos" addresses this missing part. You don't learn "what is this and why is it necessary and how does it work" from just doing it. ("How does it work?" is not the same question as "How do I do/use this?" I guess :)
I had to dive into all this these last few days because I developed a little JS library and wanted to publish it so that people can use it with NPM. I am still jumping through the hoops of what that even means. "How can someone install and use this thing the old basic way and the new NPM/build/bundle/shake/crosspile/minify/etc way?" I'm a guy who was coding ecommerce frontends in 1997 using tables! Something happened around 2008-9 that I missed while looking away for a few years, and when I came "back to the web" it was like "whatdaheck is all this?" haha
Anyways, thanks again. Your work is invaluable!
I strongly advise installing Node Version Manager (NVM) so you can easily flip Node and NPM versions as needed depending on the projects you are working on.
...any maybe pnpm or such 🤔
True, I sometimes even forget I have this installed but when needed it’s so very useful
nvm-desktop is really handy on Mac and Windows. It gives you a GUI to manage installed versions, and allows you to set _different_ node versions for different projects.
@@TheThirdWorldCitizen, like the name 😂😂, I'm from a 3rd world s^&^ole too !!
I hate it a lot - most of projects I'm just rewriting - even forks - I always run global and lastest one.
An excellent video, thanks. These 15 minutes show just how "modern" web development has become so complicated!
THANK YOU FOR THIS!!!
Although we used npm a hand-full of times during the boot camp I was a part of, I am so thankful for this deeper dive! Always a pleasure to see your videos, @Kevin
I was just overthinking npm when I stumbled upon this video in my home page, I can't thank you enough for all the precious knowledge you provide us
Absolutely stellar! Short, concise, easy to understand. Just what I needed 👍 Thank you senpai Powell
This is the first time I open your viedo when the viewcount is less than 20. I feel like this is a great achievement and I'm considering adding it to my CV. It should showcase dedication and attention towards learning of coding related stuff. 👀
😂
I needed this video a while ago. I bet it'll help a lot of people
Keith, I'm a junior web dev and I've had some react classes but I don't feel too confident with it. I'd love if you started doing some React videos. I know your main focus is css but your voice tone, pacing, your examples, everything you do is so amazingly well taught and crafted that I'd love to see it applied to something I need to learn better xD
I sorta hate React, so no plans to make content on it... I do know it's popular, but there are other good teachers on YT for that :)
@@KevinPowell My name is Keith, and sometimes people call me Kevin. Your name is Kevin and sometimes call you Keith. I love it!
Thank you for this video, Kevin! I'm a little less scared of node, npm and all that stuff after watching this video
Awesome video. Would love to see more of these type of videos!
Pro tip: just how Kevin dragndrop'ed the address into the terminal. you could click on the address bar to edit it and write "cmd" it will open a command prompt window with that address. 3:44
With Windows (somewhat depending on config) instead of starting a command-line, and copying the folder location you are after from file-explorer and pasting into cmd.exe, you can simply select the entire folder location in file-explorer and replace it with 'cmd' and press enter - which will open cmd.exe in the folder you are currently viewing in file-explorer.
Where was this video 3 years ago, it's put together so well!
Glad that you liked it, even if it was a few years late! 😅
Thank you sir. It is very important for beginer.
Thanks for this content Kevin!!
10:18 In my opinion, having separate dependencies and devDependencies only makes sense when you're writing packages that will be used by others via npm. For "leaf projects", like your frontend, the user likely won't be using your packages directly either way, because they will probably all go through a bundler of some sort, and if you have dependencies you don't need to build your frontend, then they're probably not dependencies at all. So... I would just avoid the head-ache of deciding which is which, and just add everything as dependencies.
Please continue doing stuff like this
Maybe you can add video-guide how to add your js module to npm to use it in your projects via npm install?
Thanks Kevin!
You didn't mention how to run npm on Linux, so I guess you assumed Linux users would already know all this! I say this in a good-natured way, and thank you for your videos.
dont think beginners would be using npm on linux
I hate this so much! Like literally I have yet to see a tutor that uses Linux but no they all use mac and windows
Awesome video, thanks. I'd like more content on Astro!!!
To confirm on a Mac you can drag and drop a directory into terminal - you can do it in the Visual Studio terminal also.
Great video for beginners. Please make some video advanced or intermediate developer
3:37 You can also click on the path, type cmd, and hit enter it will open the command prompt with the path
The best method! ❤
You can pull up where you need to go by finding the folder and typing cmd in the address bar of the explorer window.
I always run "npm config set ignore-scripts true" after installing npm. This prevents pre- and post-install scripts from running on packages and their dependents when installing. This helps prevent supply-chain attacks from packages that may have been taken over by a malicious actor. Of course, this will break packages that require pre- and post-install scripts. In this case, after verifying the security of what I'm installing, I will temporarily set ignore-scripts back to false, re-install, and then set ignore-scripts back to true. For my usage, however, keeping this true seldom causes a problem.
FWIW, yes, on Mac Terminal, you can drag and drop folders to get the path, just like what you did.
Good to know, thanks!
Kevin powell on making svelte tutorial?! Fuckiiing lessgooow
Haha, maybe one day. I am working on a sveltekit project now :D
@@KevinPowell I hope this will happen someday. Thank you so much kevin
I should note that the version is a SemVer, which are supposed to begin at version 0.1.0, not 0.0.1
Hi Kevin, I've been following your channel for years and I am wondering if you've ever done any videos of your screen recording workflow; i.e. what tool do you use and what's the workflow for recording, editing etc. It would be interesting to see your approach.
I don't have anything specific on it, but I use OBS to record. I don't use it, but I'd suggest Davinci Resolve for editing :)
3:49 Man I did not know that feature
Getting a gem from huge bundle of diamonds 😊. From TH-cam suggestions.
Just keep doing sir......
Wallpaper is really cool, where can I get that?
@@nabilpatel970 if you have photoshop you can screenshot it from the video, open it in ps and cut out the undesired parts like the facecam and icons and stuff and ask ps ai to fill that space with relevant content.
I should share it! I'll try to remember :D
@@KevinPowell That'll be really cool 🤩
A friend of mine which is definitely not me has never heard of 'vite' and finds that the tutorial stops making any sense from the first moment it gets mentioned. At the very end of the video we hear it is a script ...and it is used "under the hood for many other things". Obviously I could explain all this in one sentence but I like to see my friend getting frustrated at Kevin's videos.
I didn't really feel like talking about Vite specifically and what it is, it's just one of the *many* tools you can use npm for.
The idea with this was for people who run across a tutorial that says to use `npm install` or `npm create` and not know what that meant, so they could use this as a starting point regardless of what that tool is.
Oh no, Kevin’s going to the dark side... I can feel the tailwind videos coming.
That isn't going to happen 😆
How can I get your background that's really beautiful
please, tell me you gonna make a whole serie of videos about npm, please, please, please
I don't think I'm the right person to go any deeper than I did in this video, lol
Im wondering what to do if npm install in another folder than the root of the project? How to revert this or even if this is necessary? When i do i get another node_modules folder etc.
I still don’t know why I need this. I handcode without libraries or bootstraps. Why do I need npm?
kepow! that's awesome 😎
My qustion is where do you host your main site and what did you use for it as far as packages?
additionally, do you use anything like azure etc..
My personal site, and most of my projects are hosted by Netlify.
As for packages, it depends on the project. I don't have much going on with my personal site, it's Eleventy, Sass, that's probably it. Most new projects of mine use Astro, PostCSS with a few of it's plugins, and depending on the size of the project, Sass as well.
As for Azure, nope. I'm very "front of the front-end" 😅
Wondering about fixing vulnerabilities? I installed packages (for GULP) and it came up with 10 vulnerabilities.
npm audit fix should do it, as long as all the packages are still maintained. Has the potential to bring in a breaking change, but I've rarely run into issues with it.
Sometimes, you just come across something old that has a lot of issues though, and it's probably best to avoid it at that point.
I really don't get it and I still don't understand why this is better than just including library by placing files in folder.
Please create one for pnpm and it's comparison with npm.
You use Windows??
Yup :)
Thank you Kevin for reminding me why I don't use Windows anymore 🤣 Linux is so nice... 🐧
Lopez Patricia Brown Sarah Taylor Linda
White Michael Lee Karen Robinson Michelle
BEM IS R.I.P., why not make a post on the topic?
Hard topic to properly cover because it hasn't been replaced by something specific. Some people still live by it, others have gone to Tailwind, and others still have splintered into other things. It's all kind of messy and more based on personal preference now (which is a good thing I guess!)
npm is crap :D
Chacha is little late this time. npm is already used in the industry from a long time now.
Yup, but a lot of people are new and haven't used it yet, this is for them :)
@@KevinPowell Appreciated 👏👏