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!
@marshallgraphic
7 күн бұрын
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.
@palrevesz8629
7 күн бұрын
...any maybe pnpm or such 🤔
@TheThirdWorldCitizen
7 күн бұрын
True, I sometimes even forget I have this installed but when needed it’s so very useful
@Mr.RobotHead
7 күн бұрын
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.
@fettuccine794
7 күн бұрын
@@TheThirdWorldCitizen, like the name 😂😂, I'm from a 3rd world s^&^ole too !!
@PaweBystrzan
7 күн бұрын
I hate it a lot - most of projects I'm just rewriting - even forks - I always run global and lastest one.
@MikeyLeeXYZ
2 күн бұрын
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
@chrisbolson
7 күн бұрын
An excellent video, thanks. These 15 minutes show just how "modern" web development has become so complicated!
@rockethyper7728
6 күн бұрын
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
@webrevolution.
7 күн бұрын
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. 👀
@je.ro.me_101
7 күн бұрын
😂
@maerosss
6 күн бұрын
Absolutely stellar! Short, concise, easy to understand. Just what I needed 👍 Thank you senpai Powell
@YuukaleNarmo02
7 күн бұрын
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
@KevinPowell
7 күн бұрын
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 :)
@marshallgraphic
7 күн бұрын
@@KevinPowell My name is Keith, and sometimes people call me Kevin. Your name is Kevin and sometimes call you Keith. I love it!
@Newemka
7 күн бұрын
I needed this video a while ago. I bet it'll help a lot of people
@bhaveshxrawat
Күн бұрын
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
@yogibarista2818
7 күн бұрын
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.
@sharifsircar
7 күн бұрын
Where was this video 3 years ago, it's put together so well!
@KevinPowell
7 күн бұрын
Glad that you liked it, even if it was a few years late! 😅
@ed.puckett
7 күн бұрын
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.
@ohhimark9974
7 күн бұрын
dont think beginners would be using npm on linux
@thecoolnewsguy
7 күн бұрын
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
@farhan-app
7 күн бұрын
Awesome video. Would love to see more of these type of videos!
@usagiakimbo2506
6 күн бұрын
Thank you for this video, Kevin! I'm a little less scared of node, npm and all that stuff after watching this video
@Svish_
6 күн бұрын
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.
@mefesto_
7 күн бұрын
Maybe you can add video-guide how to add your js module to npm to use it in your projects via npm install?
@itsguim
7 күн бұрын
Thanks for this content Kevin!!
@Alex-ml3zx
7 күн бұрын
To confirm on a Mac you can drag and drop a directory into terminal - you can do it in the Visual Studio terminal also.
@sblanz
6 күн бұрын
Awesome video, thanks. I'd like more content on Astro!!!
@iliyanpetrov5762
4 күн бұрын
Thanks Kevin!
@KB04
7 күн бұрын
Please continue doing stuff like this
@user1_226.
7 күн бұрын
3:37 You can also click on the path, type cmd, and hit enter it will open the command prompt with the path
@hakeryk
6 күн бұрын
The best method! ❤
@verawat
5 күн бұрын
Thank you sir. It is very important for beginer.
@ronykhan3873
6 күн бұрын
Great video for beginners. Please make some video advanced or intermediate developer
@Clonephaze2327
7 күн бұрын
You can pull up where you need to go by finding the folder and typing cmd in the address bar of the explorer window.
@CLeovison
7 күн бұрын
Kevin powell on making svelte tutorial?! Fuckiiing lessgooow
@KevinPowell
7 күн бұрын
Haha, maybe one day. I am working on a sveltekit project now :D
@CLeovison
6 күн бұрын
@@KevinPowell I hope this will happen someday. Thank you so much kevin
@sudarshanpatekar5632
7 күн бұрын
3:49 Man I did not know that feature
@JasonJA88
7 күн бұрын
Oh no, Kevin’s going to the dark side... I can feel the tailwind videos coming.
@KevinPowell
7 күн бұрын
That isn't going to happen 😆
@octothorpe12
7 күн бұрын
FWIW, yes, on Mac Terminal, you can drag and drop folders to get the path, just like what you did.
@KevinPowell
7 күн бұрын
Good to know, thanks!
@ed.puckett
7 күн бұрын
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.
@tryoxiss
7 күн бұрын
I should note that the version is a SemVer, which are supposed to begin at version 0.1.0, not 0.0.1
@AlexGasol
7 күн бұрын
please, tell me you gonna make a whole serie of videos about npm, please, please, please
@KevinPowell
7 күн бұрын
I don't think I'm the right person to go any deeper than I did in this video, lol
@omkarghodke7537
7 күн бұрын
Getting a gem from huge bundle of diamonds 😊. From KZitem suggestions. Just keep doing sir......
@nabilpatel970
7 күн бұрын
Wallpaper is really cool, where can I get that?
@webrevolution.
7 күн бұрын
@@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.
@KevinPowell
7 күн бұрын
I should share it! I'll try to remember :D
@nabilpatel970
7 күн бұрын
@@KevinPowell That'll be really cool 🤩
@dandange
7 күн бұрын
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.
@KevinPowell
7 күн бұрын
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 :)
@EmblazNOR
Күн бұрын
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.
@federicobersano
7 күн бұрын
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.
@KevinPowell
7 күн бұрын
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.
@AlThePal78
7 күн бұрын
My qustion is where do you host your main site and what did you use for it as far as packages?
@AlThePal78
7 күн бұрын
additionally, do you use anything like azure etc..
@KevinPowell
7 күн бұрын
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.
@KevinPowell
6 күн бұрын
As for Azure, nope. I'm very "front of the front-end" 😅
@ochokom
5 күн бұрын
How can I get your background that's really beautiful
@JosephCodette
6 күн бұрын
kepow! that's awesome 😎
@freshpootube
3 күн бұрын
I still don’t know why I need this. I handcode without libraries or bootstraps. Why do I need npm?
@androidsamsung3207
7 күн бұрын
Please create one for pnpm and it's comparison with npm.
@VinceM1000
7 күн бұрын
Wondering about fixing vulnerabilities? I installed packages (for GULP) and it came up with 10 vulnerabilities.
@KevinPowell
7 күн бұрын
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.
@hakeryk
6 күн бұрын
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.
@Alex-ml3zx
7 күн бұрын
You use Windows??
@KevinPowell
7 күн бұрын
Yup :)
@ArabellaWilbur-c2f
6 күн бұрын
Lopez Patricia Brown Sarah Taylor Linda
@palrevesz8629
7 күн бұрын
Thank you Kevin for reminding me why I don't use Windows anymore 🤣 Linux is so nice... 🐧
@amberwatson6749
7 күн бұрын
White Michael Lee Karen Robinson Michelle
@TimHunold
7 күн бұрын
BEM IS R.I.P., why not make a post on the topic?
@KevinPowell
7 күн бұрын
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!)
@MC_DarkMaster
7 күн бұрын
npm is crap :D
@ayushKumar-9835
7 күн бұрын
Chacha is little late this time. npm is already used in the industry from a long time now.
@KevinPowell
7 күн бұрын
Yup, but a lot of people are new and haven't used it yet, this is for them :)
Пікірлер: 83