<story><title>JavaScript for Impatient Programmers</title><url>https://exploringjs.com/impatient-js/index.html</url></story><parent_chain><item><author>toyg</author><text>I don&amp;#x27;t (think I) have much of a problem with JS syntax, generally speaking, but I&amp;#x27;m often baffled by the surrounding ecosystem of build tools and &amp;quot;helpers&amp;quot;. There are a million tutorials, all doing things slightly differently without really explaining why, and stuff breaks so often...&lt;p&gt;Any recommendation for something covering that sort of thing (npm, yarn, webpack...) in a more structured and in-depth way than &amp;quot;here&amp;#x27;s how to make a todo list in 10 minutes with some magical command that may or may not still work 3 months later&amp;quot;?</text></item></parent_chain><comment><author>IshKebab</author><text>I agree. Even just finding out what the tools are is ridiculously hard. Here&amp;#x27;s a list:&lt;p&gt;* NPM: Package &amp;#x2F; dependency manager. Also has some basic support for running scripts.&lt;p&gt;* Yarn: Very similar alternative to NPM.&lt;p&gt;* Babel: Transpiles modern Javascript to &amp;quot;old&amp;quot; Javascript, in case you need to support IE9 but want to use async&amp;#x2F;await or whatever. If you only support modern browsers you don&amp;#x27;t need this.&lt;p&gt;* Webpack: &lt;i&gt;Originally&lt;/i&gt; it was for &amp;quot;bundling&amp;quot; Javascript files. You don&amp;#x27;t want to write all your code in a single file, but you often want to deliver it that way. Webpack reads the &amp;#x27;import&amp;#x27; statements of all your files, and them converts them into a single file with emulated modules. Also helps when you are targeting a browser that doesn&amp;#x27;t support modules natively. However Webpack also comes with a load of &amp;quot;loaders&amp;quot; that can transform input files in various ways, e.g. allowing importing CSS files from Javascript, compiling Typescript, etc. So now it is kind of a big ugly build system.&lt;p&gt;* Node: The Javascript engine extracted from Chrome, plus a load of native APIs that let you do stuff you can&amp;#x27;t do in the browser because of security (write files, make TCP connections, etc).&lt;p&gt;* Electron: Basically Chrome plus Node. You can set it up so that your web pages can access the Node APIs inside Chrome, but you can also have them talk to an actual Node process via IPC.</text></comment>
<story><title>JavaScript for Impatient Programmers</title><url>https://exploringjs.com/impatient-js/index.html</url></story><parent_chain><item><author>toyg</author><text>I don&amp;#x27;t (think I) have much of a problem with JS syntax, generally speaking, but I&amp;#x27;m often baffled by the surrounding ecosystem of build tools and &amp;quot;helpers&amp;quot;. There are a million tutorials, all doing things slightly differently without really explaining why, and stuff breaks so often...&lt;p&gt;Any recommendation for something covering that sort of thing (npm, yarn, webpack...) in a more structured and in-depth way than &amp;quot;here&amp;#x27;s how to make a todo list in 10 minutes with some magical command that may or may not still work 3 months later&amp;quot;?</text></item></parent_chain><comment><author>m0ck</author><text>As a backend developer getting his foot into frontend I feel you. Configuring TSLint with Prettier and all the plugins was tiresome only to learn few months  later it&amp;#x27;s getting deprecated and you should move to ESlint. This article helped me bit, it explains &amp;quot;what is what&amp;quot; in modern JS ecosystem &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;medium.com&amp;#x2F;the-node-js-collection&amp;#x2F;modern-javascript-explained-for-dinosaurs-f695e9747b70&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;medium.com&amp;#x2F;the-node-js-collection&amp;#x2F;modern-javascript-...&lt;/a&gt;</text></comment>