Kevin, I have been a "Front of the Front End" developer for 5 years now. This is always the most intimidating part of any project for me. Thank you *so* much for this video. Your way of explaining things is so friendly and accessible. I learned more in this 15 minutes than I have in the countless hours I've spent on tutorials in the last decade. Thanks again!
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.
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!
Perfect comment. Sometimes people use stuff just because it’s the “done thing” with no understanding of why, or how we got here. If you understand what these tools are doing under the hood and what problems they are solving you’ll also understand situations where they are also just unnecessary complication.
@ thanks. Yeah. I also just recently learned and understood the evolution and progression of ES, which is also crucial to know, especially if you're trying to get into this by patching together code and approaches you find here and there. Having a primer that lays all that out would be invaluable
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
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
Hi Kevin, If you are getting an existing project that already has a package.json and a package-lock.json file, it's very much recommended to use the npm ci command instead of npm install. I think the ci stands for continuous integration and is meant to always and reliably produce exactly the same result (especially in build pipelines and stuffs). And because of that npm ci never changes the package.json and package-lock.json file and accidentally change anything. You should only use npm install when you want to install or update packages. When you just want to existing project to run, use npm ci.
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
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. 👀
14:20 Small note: terminating the job (halting the terminal) on macOS is the same as on Windows and Linux - control + C. On mac, command + C is used for copy.
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.
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.
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.
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 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.
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.
@@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.
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!)
![[#2024MAMA] ROSÉ (로제), Bruno Mars - APT. | Mnet 241122 방송](http://i.ytimg.com/vi/dgGqD28J6aQ/mqdefault.jpg)
Kevin, I have been a "Front of the Front End" developer for 5 years now. This is always the most intimidating part of any project for me. Thank you *so* much for this video. Your way of explaining things is so friendly and accessible. I learned more in this 15 minutes than I have in the countless hours I've spent on tutorials in the last decade. Thanks again!
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!
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!
Perfect comment. Sometimes people use stuff just because it’s the “done thing” with no understanding of why, or how we got here. If you understand what these tools are doing under the hood and what problems they are solving you’ll also understand situations where they are also just unnecessary complication.
@ thanks. Yeah. I also just recently learned and understood the evolution and progression of ES, which is also crucial to know, especially if you're trying to get into this by patching together code and approaches you find here and there.
Having a primer that lays all that out would be invaluable
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
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
Absolutely stellar! Short, concise, easy to understand. Just what I needed 👍 Thank you senpai Powell
Thank you, Kevin! This was simple enough and yet comprehensive enough.
I needed this video a while ago. I bet it'll help a lot of people
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
Hi Kevin,
If you are getting an existing project that already has a package.json and a package-lock.json file, it's very much recommended to use the npm ci command instead of npm install. I think the ci stands for continuous integration and is meant to always and reliably produce exactly the same result (especially in build pipelines and stuffs). And because of that npm ci never changes the package.json and package-lock.json file and accidentally change anything. You should only use npm install when you want to install or update packages. When you just want to existing project to run, use npm ci.
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!
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. 👀
😂
14:20 Small note: terminating the job (halting the terminal) on macOS is the same as on Windows and Linux - control + C. On mac, command + C is used for copy.
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 for this video, Kevin! I'm a little less scared of node, npm and all that stuff after watching this video
Please continue doing stuff like this
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.
Thanks for this content Kevin!!
Thank you sir. It is very important for beginer.
Great topic, thanks 👍
To confirm on a Mac you can drag and drop a directory into terminal - you can do it in the Visual Studio terminal also.
Awesome video, thanks. I'd like more content on Astro!!!
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
They always forget about us. It's called linuxism!
Thanks 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.
Maybe you can add video-guide how to add your js module to npm to use it in your projects via npm install?
Great video for beginners. Please make some video advanced or intermediate developer
You can pull up where you need to go by finding the folder and typing cmd in the address bar of the explorer window.
FWIW, yes, on Mac Terminal, you can drag and drop folders to get the path, just like what you did.
Good to know, thanks!
kepow! that's awesome 😎
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 :)
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.
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! ❤
Getting a gem from huge bundle of diamonds 😊. From TH-cam suggestions.
Just keep doing sir......
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" 😅
Thank you. How much does pnpm vary from this?
3:49 Man I did not know that feature
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
Patience Fork
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 🤩
How can I get your background that's really beautiful
I should note that the version is a SemVer, which are supposed to begin at version 0.1.0, not 0.0.1
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.
Oh no, Kevin’s going to the dark side... I can feel the tailwind videos coming.
That isn't going to happen 😆
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 still don’t know why I need this. I handcode without libraries or bootstraps. Why do I need npm?
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
Please create one for pnpm and it's comparison with npm.
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.
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
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!)
Are you gay?
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 👏👏