<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Paweł</title>
    <description>The latest articles on DEV Community by Paweł (@pst).</description>
    <link>https://dev.to/pst</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F609106%2F0b957efc-f5fc-4bf6-af4b-8adcc2c04e7d.jpg</url>
      <title>DEV Community: Paweł</title>
      <link>https://dev.to/pst</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/pst"/>
    <language>en</language>
    <item>
      <title>Are you already lost in your node_modules?</title>
      <dc:creator>Paweł</dc:creator>
      <pubDate>Mon, 12 Apr 2021 06:25:01 +0000</pubDate>
      <link>https://dev.to/pst/are-you-already-lost-in-your-nodemodules-2c12</link>
      <guid>https://dev.to/pst/are-you-already-lost-in-your-nodemodules-2c12</guid>
      <description>&lt;p&gt;&lt;a href="https://i.giphy.com/media/ghutdpgRkhkxq/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/ghutdpgRkhkxq/giphy.gif" alt="lost in dependencies"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It doesn’t matter if you work with React or Angular or Node.JS after some time when your project is getting bigger and more complex, it is no longer so easy to follow updates of your project dependencies. This problem continues and with so many updates and versions popping out, it will never end. Of course, this is understandable as projects will never be perfect, &lt;strong&gt;bugfixes&lt;/strong&gt;, &lt;strong&gt;security vulnerabilities&lt;/strong&gt; or &lt;strong&gt;compatibility issues&lt;/strong&gt; will keep popping up. &lt;/p&gt;

&lt;p&gt;I noticed this quite some time ago in my work, that &lt;code&gt;npm update&lt;/code&gt; could be improved. &lt;strong&gt;Upgrading dependencies&lt;/strong&gt; to their latest versions might often break your project if some of your dependencies contain breaking changes. I wanted to be able to upgrade my node_modules safely in a project, therefore I decided to search for an app, which in simpler and more user-friendly way will allow to track what is happening with my project dependencies.&lt;/p&gt;

&lt;p&gt;Let's have a look into the app. &lt;br&gt;
&lt;a href="https://i.giphy.com/media/l0IsIZw8doJm3ysRq/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/l0IsIZw8doJm3ysRq/giphy.gif" alt="OK, I'm listening"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;npm-gui&lt;/code&gt; is a handy tool for managing javascript project dependencies, which are listed in &lt;strong&gt;package.json&lt;/strong&gt;. Under the hood it will use transparently &lt;em&gt;npm&lt;/em&gt; or &lt;em&gt;yarn&lt;/em&gt; commands to install, remove or update dependencies.&lt;/p&gt;

&lt;p&gt;Below you can see a screenshot of &lt;code&gt;npm-gui&lt;/code&gt;.  &lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fghaebn19q1u3zjsvcsao.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fghaebn19q1u3zjsvcsao.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The newest version (v.3) of npm-gui has been released last month, and apart from showing you what could be updated, it also allows you to track size of individual bundles or &lt;strong&gt;critical security bugs.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Whichever framework you use, if you are a web developer looking for a way to simplify managing your dependencies, you must check out this app. &lt;/p&gt;

&lt;p&gt;Try it out simply by using command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npx npm-gui
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This command will start application npm-gui without installing it. The new window in a browser will appear and all you have to do is click the &lt;em&gt;open&lt;/em&gt; button to navigate to your project within npm-gui.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh6lelo3lpicweufza2by.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh6lelo3lpicweufza2by.gif" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/goKkfkinQTdM4/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/goKkfkinQTdM4/giphy.gif" alt="Brilliant!"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Feel free to leave your comments below. And if you have any features suggestions create an issue on project's page on GitHub.&lt;/p&gt;

&lt;p&gt;And if you like it &lt;strong&gt;star&lt;/strong&gt; this project!&lt;br&gt;
&lt;em&gt;&lt;a href="https://github.com/q-nick/npm-gui" rel="noopener noreferrer"&gt;Click to see the app at GitHub&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>angular</category>
      <category>react</category>
      <category>node</category>
    </item>
  </channel>
</rss>
