<?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>Forem: Francisco Juan</title>
    <description>The latest articles on Forem by Francisco Juan (@juansev).</description>
    <link>https://forem.com/juansev</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%2F1465057%2Fa06f90a9-e81e-4284-994c-51e274ea32ff.jpeg</url>
      <title>Forem: Francisco Juan</title>
      <link>https://forem.com/juansev</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/juansev"/>
    <language>en</language>
    <item>
      <title>[Boost]</title>
      <dc:creator>Francisco Juan</dc:creator>
      <pubDate>Mon, 26 Jan 2026 01:06:06 +0000</pubDate>
      <link>https://forem.com/juansev/-3hn7</link>
      <guid>https://forem.com/juansev/-3hn7</guid>
      <description>&lt;div class="ltag__link"&gt;
  &lt;a href="/sylwia-lask" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__pic"&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" alt="sylwia-lask"&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="https://dev.to/sylwia-lask/why-nan-nan-makes-perfect-sense-i-promise-2lke" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__content"&gt;
      &lt;h2&gt;Why NaN !== NaN Makes Perfect Sense (I Promise)&lt;/h2&gt;
      &lt;h3&gt;Sylwia Laskowska ・ Jan 25&lt;/h3&gt;
      &lt;div class="ltag__link__taglist"&gt;
        &lt;span class="ltag__link__tag"&gt;#javascript&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#node&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#frontend&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;


</description>
      <category>javascript</category>
      <category>node</category>
      <category>frontend</category>
    </item>
    <item>
      <title>npm vs npx: whats the difference?</title>
      <dc:creator>Francisco Juan</dc:creator>
      <pubDate>Mon, 26 Jan 2026 00:48:09 +0000</pubDate>
      <link>https://forem.com/juansev/npm-vs-npx-whats-the-difference-44oi</link>
      <guid>https://forem.com/juansev/npm-vs-npx-whats-the-difference-44oi</guid>
      <description>&lt;p&gt;Hello there!&lt;/p&gt;

&lt;p&gt;If you are starting on Node.js ecossistem its very usually confusing with the differences understanding &lt;strong&gt;npm&lt;/strong&gt; and &lt;strong&gt;npx&lt;/strong&gt;. What do they? What the diffence? Where do they live?&lt;/p&gt;

&lt;h2&gt;
  
  
  npm
&lt;/h2&gt;

&lt;p&gt;The &lt;strong&gt;npm&lt;/strong&gt; is the package manager of node, (Node Package Manager).&lt;/p&gt;

&lt;p&gt;You use &lt;strong&gt;npm&lt;/strong&gt; maining for &lt;strong&gt;install dependences&lt;/strong&gt; and &lt;strong&gt;run scripts&lt;/strong&gt; of project, those one writed into manifest package.json&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;What is a manifest?&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install &lt;/span&gt;react &lt;span class="c"&gt;# Installing a normal package&lt;/span&gt;
npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-D&lt;/span&gt; eslint &lt;span class="c"&gt;# Installing a developer package&lt;/span&gt;
npm run dev &lt;span class="c"&gt;# Running a dev script from `package.json`&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In the end, the npm do this sequence:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;download the package&lt;/li&gt;
&lt;li&gt;add it into &lt;code&gt;node_modules&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;register into &lt;code&gt;package.json&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  npx
&lt;/h2&gt;

&lt;p&gt;The &lt;strong&gt;npx&lt;/strong&gt; was made for &lt;strong&gt;execution of packages&lt;/strong&gt;, with no need of a global installation.&lt;/p&gt;

&lt;p&gt;Examples:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx create-react-app my-app
npx eslint &lt;span class="nb"&gt;.&lt;/span&gt;
npx prisma migrate dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;For curious devs, you already must seen the .bin folder into &lt;code&gt;node_modules&lt;/code&gt;, if you open that, you can see the execution binaries of your package, usually it be of packages that you can run on your CLI.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;On running npx, it:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;use local version of package (if it exists)&lt;/li&gt;
&lt;li&gt;or download the package temporarily, execute, and discard&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It's like, getting of example create-react-app, the npx download temporarily the create-react-app package, runs it, without installing global avoiding the risks of conflicts with other global versions.&lt;/p&gt;

&lt;p&gt;Now, when you run inside of your working directory, and you already have this package installed into your project scope, the npx only runs it, like the prisma and eslint into examples.&lt;/p&gt;

&lt;h2&gt;
  
  
  Difference in the practice
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;npm&lt;/strong&gt; → install and manage dependences&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;npx&lt;/strong&gt; → run package binary&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;A simple rule to remember is:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;npm install and npx runs&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Since npx, make no sense install tools globally.&lt;/p&gt;

&lt;p&gt;If this post help you, tell us more examples, your uses, etc.&lt;/p&gt;

&lt;p&gt;very thank you!&lt;/p&gt;

&lt;p&gt;a main()&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
    <item>
      <title>npm vs npx: qual a diferença?</title>
      <dc:creator>Francisco Juan</dc:creator>
      <pubDate>Mon, 26 Jan 2026 00:23:02 +0000</pubDate>
      <link>https://forem.com/juansev/npm-vs-npx-qual-a-diferenca-31e5</link>
      <guid>https://forem.com/juansev/npm-vs-npx-qual-a-diferenca-31e5</guid>
      <description>&lt;p&gt;Se você está começando no ecossistema do Node.js, é bem comum confundir e nem entender o &lt;strong&gt;npm&lt;/strong&gt; e &lt;strong&gt;npx&lt;/strong&gt;. O que eles fazem? Qual a diferença? Onde moram? De que vivem?&lt;/p&gt;

&lt;h2&gt;
  
  
  npm
&lt;/h2&gt;

&lt;p&gt;O &lt;strong&gt;npm&lt;/strong&gt; é o gerenciador de pacotes do node, (Node Package Manager).&lt;/p&gt;

&lt;p&gt;Você usa o npm principalmente para &lt;strong&gt;instalar dependências&lt;/strong&gt; e &lt;strong&gt;rodar scripts&lt;/strong&gt; do projeto, aqueles scripts declarados no manifesto package.json.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install &lt;/span&gt;react &lt;span class="c"&gt;# Instalando um package normal&lt;/span&gt;
npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-D&lt;/span&gt; eslint &lt;span class="c"&gt;# Instalando um package de desenvolvimento&lt;/span&gt;
npm run dev &lt;span class="c"&gt;# Rodando o script dev declarado no package.json&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;No fim do dia, o npm faz essa sequência:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;baixa os pacotes&lt;/li&gt;
&lt;li&gt;adiciona ao &lt;code&gt;node_modules&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;registra no &lt;code&gt;package.json&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  npx
&lt;/h2&gt;

&lt;p&gt;O &lt;strong&gt;npx&lt;/strong&gt; serve para &lt;strong&gt;executar pacotes&lt;/strong&gt;, sem ter que instalar globalmente.&lt;/p&gt;

&lt;p&gt;Exemplos:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx create-react-app meu-app
npx eslint &lt;span class="nb"&gt;.&lt;/span&gt;
npx prisma migrate dev

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;O npx:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;usa a versão local do pacote (se existir)&lt;/li&gt;
&lt;li&gt;ou baixa temporariamente, executa e descarta&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;É como se, pegando como exemplo o create-react-app, ele baixasse temporáriamente o pacote create-react-app, e o executasse, sem ter que instalar globalmente e correr riscos de conflitos de versões posteriormente.&lt;/p&gt;

&lt;p&gt;Já quando você chama ele dentro do seu working directory, e você já tem esse pacote instalado localmente no escopo do projeto, ele apenas executa ele, como eh o caso do prisma e do eslint dos exemplos.&lt;/p&gt;

&lt;h2&gt;
  
  
  Diferença na prática
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;npm&lt;/strong&gt; → instalar e gerenciar dependências&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;npx&lt;/strong&gt; → executar comandos de pacotes&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Uma regra simples de lembrar:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;npm instala, npx executa&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Desde o npx, quase não faz mais sentido instalar ferramentas globalmente.&lt;/p&gt;

&lt;p&gt;Se esse post te ajudou, deixa um comentário ou complementa com mais exemplos, valeuzasso!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>jsdev</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
