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.
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.
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.
@@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.
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.
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.
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.
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!)