DEV Community: Ishfaq Maknoo

How to Update and Fix Vulnerabilities in Global Packages

Ishfaq Maknoo — Sat, 12 Jul 2025 14:37:53 +0000

If you're working on Javascript-based projects, chances are you've installed some packages globally-tools like eslint, nodemon, typescript and others.

Over time it's easy to forget about these global packages. But here's the thing:they can became outdated and vulnerable to security issues. Just like local project dependencies, global packages need regular updates.

Below are a few simple steps to help you check and update globally installed packages using npm and pnpm.

Check global installed packages

# For npm
npm list -g --depth=0

# For pnpm
pnpm list -g --depth=0

This lists all globally installed packages along with their versions.

Check outdated Global packages

# For npm
npm outdated -g --depth=0

# For pnpm
pnpm outdated -g

This shows which global packages have versions available.

Update a specific Global package

# For npm
npm i -g <package-name>

# For pnpm
pnpm update -g <package-name>

Replace with the name of the package you want to update.

Update all Global packages at once

If you want to update everything in one go, try:
🐧 For Linux, macOS, and Git Bash (Unix Shells):

# For npm
npm outdated -g --parseable --depth=0 | cut -d: -f4 | xargs npm install -g

# For pnpm
npm outdated -g --parseable --depth=0 | cut -d: -f4 | xargs pnpm update -g

🪟 For Windows PowerShell:

# For npm
npm outdated -g --depth=0 | ForEach-Object {
  ($_ -split '\s+')[0] | ForEach-Object { npm install -g $_ }
}

# For pnpm
npm outdated -g --depth=0 | ForEach-Object {
  ($_ -split '\s+')[0] | ForEach-Object { pnpm update -g $_ }
}

This command will find all outdated global packages and update them automatically.

Keeping global packages up to date helps you avoid bugs, take advantage of new features, and—most importantly—stay protected from known security vulnerabilities.

What About Yarn?

Yarn (especially v2 and above) doesn’t support global packages the same way as npm or pnpm. Instead, it encourages using tools per project to avoid conflicts.

If you want to run a CLI tool with Yarn, use:

yarn dlx <package-name>
yarn dlx create-vite

yarn dlx -p typescript -p ts-node ts-node --transpile-only -e "console.log('hello!')"

Details

This command will install a package within a temporary environment, and run its binary script if it contains any. The binary will run within the current cwd.

By default Yarn will download the package named command, but this can be changed through the use of the -p,--package flag which will instruct Yarn to still run the same command but from a different package.

Using yarn dlx as a replacement of yarn add isn't recommended, as it makes your project non-deterministic (Yarn doesn't keep track of the packages installed through dlx - neither their name, nor their version).

Angular Dev Tools

Ishfaq Maknoo — Wed, 19 May 2021 09:52:12 +0000

⚡ We now have Angular Chrome Developer Tools, a new way to debug angular apps ⚡

Easily navigate between component hierarchy, properties directives and more,

We can deliberately update property value from Angular Dev Tools

The Angular Developer tools support on Angular Version 9+

Install now to:
‣ Visualize the structure of your apps
‣ Explore, inspect & edit components Left-pointing magnifying glass
‣ Profile performance Bar chart

Install here → [http://goo.gle/install-angular-devtools]
Read Full Documentation → [https://angular.io/guide/devtools]

Chrome Angular Developer Tool

Create Float labels with few lines of CSS only

Ishfaq Maknoo — Tue, 20 Apr 2021 09:46:49 +0000

When it has to create stylish form, we always want to style our input tags to give the best look and feel,

Let's write few lines of code to make this magic happen,

<div class="group">
  <input type="text" required>
  <label>Name</label>
</div>

This is all for our markup,

Simple and easy, one div tag wrapping our input tag and label,

Important use required attribute on input, and make sure label goes under input tag, for the best practices I am using the label, it could be anything span etc,

so far so good, let's wrap up with adding few styles to make it stand out

.group{
  position:relative;
  margin:20px;
 }
.group input {
  padding:12px;
  width:300px;
  border:1px solid #ddd;
  outline:none;
  font-family:inherit;
  font-size:16px;
}
.group label{
 position: absolute;
 top:13px;
 left:12px;
 font-size:16px;
 pointer-events:none;
 transition: all 0.3s ease;
}
input:focus + label, input:valid + label{
 top: -11px;
 background-color: #fff;
 padding: 2px 4px;
 color: #54565d;
 font-size: 13px;
}

That's it no javascript, simple and easy...

Let's understand what we did here,

For the .group class we have added position to relative and some spacing around it,

For the input tag we did some basic styling which is self-understood,

For the label we have added position to absolute so that it can move relative to parent group class, and set position from left and top,

pointer-events:none; is used to prevent click on label part, & we have used transition to allow smoothness,

input:focus + label, input:valid + label
when we click on input we are adding label to float our label upside using top: -11px,
and if the input:valid label styles will remain as it is,

If you have covered till now, then I must say you have got good patience ;)

https://codepen.io/imaknoo/pen/GRrYqwE

let's start git from basics

Ishfaq Maknoo — Tue, 30 Mar 2021 09:45:57 +0000

What is git?

Well according to Wikipedia, git is software for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development. Its goals include speed, data integrity, and support for distributed, non-linear workflows (thousands of parallel branches running on different systems),

Enough theory, let's start doing some practical stuff,

Step 01:- Visit https://github.com/login to log in or create a new account,

Step 02:- https://github.com/new to create a new repository, I have created one as todolist (if you already have created one, feel free to skip this step)

Note:- You can either make the repository publically accessible or keep it private,

Hit the create repository button, and you are all set...

Congratulations you have created a new repository on GitHub,

Step 03:- Time to commit your local changes (from your local machine to GitHub)

From your local machine open your favourite terminal, I am using windows I have PowerShell opened,

Navigate your repository,

git init (Initialized empty Git repository in your working directory)

git remote add origin(add new remote in my case it is, https://github.com/ishfaqmaknoo/todolist )

git status (displays the state of the working directory)

So far so good, now let's add few more commands to push our code from local to staging to the remote repository

git add . (adds all the files to staging area)

we can also add each file manually by doing
(git add main.js ) this will add only the main.js file to the staging area,

let's finally push our local changes to the remote repository

git commit -m (Takes the staged snapshot and commits it to the project history. Combined with git add, this defines the basic workflow for all Git users.)

git push origin master (You are ready to push your first commit to the remote repository. )

Congrats, we are done with the big picture...

Commands:- Get used to these basic commands,

git init
git status
git add .
git commit -m "commit message"
git push origin master