--- title: Best NPM posts of 2022 | daily.dev description: The most upvoted NPM posts of 2022, curated by the daily.dev community. canonical: https://daily.dev/tags/npm/best-of/2022 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/npm/best-of/2022 og:type: website og:site_name: daily.dev og:title: Best NPM posts of 2022 | daily.dev og:description: The most upvoted NPM posts of 2022, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of NPM — 2022 1. 1 [](/posts/build-your-first-electron-app-ocqinw-yx "Build your first Electron app") Article Hashnode · 4y Build your first Electron app Electron is a free and open-source framework maintained mainly by GitHub. It powers dozens of apps, including Discord, Slack, Notion, VSCode, Spotify, and many more. The framework is designed to let developers create desktop applications using web technologies such as JavaScript, HTML, and CSS. 155 5 2. 2 [](/posts/total-typescript-beginners-typescript-tutorial-an-interactive-typescript-tutorial-for-beginners-4icjv2obg "total-typescript/beginners-typescript-tutorial: An interactive TypeScript tutorial for beginners") Article Community Picks · 4y total-typescript/beginners-typescript-tutorial: An interactive TypeScript tutorial for beginners The plan for these exercises is to develop them into a full workshop, and then bundle them into the full video course - Total TypeScript. Each exercise is split into a \*.problem.ts and a \*.solution.ts. 140 2 3. 3 [](/posts/how-to-build-a-secure-api-gateway-in-node-js-igtqoba7u "How to build a secure API gateway in Node.js") Article Snyk · 4y How to build a secure API gateway in Node.js API gateways can provide a clear path for your front-end applications (e.g., websites and native apps) to all of your back-end functionality. They can act as aggregators for the microservices and as middleware to handle common concerns, such as authentication and authorization. The most popular choice for Node. 133 7 4. 4 [](/posts/vite-4-0-is-out--as9udfgh4 "Vite 4.0 is out!") Article Community Picks · 4y Vite 4.0 is out! Vite 4.0 is out! Vite 3 was released five months ago. Vite is now using Rollup 3, which allowed us to simplify Vite's internal asset handling. 128 9 5. 5 [](/posts/what-is-bun-js-and-why-is-the-javascript-community-excited-about-it--m7kptmcko "What Is Bun.js and Why Is the JavaScript Community Excited About It?") Article Community Picks · 4y What Is Bun.js and Why Is the JavaScript Community Excited About It? Bun is the third of its kind after Node.js and Deno.js, created by Jarred Sumner using the Zig programming language. Bun advances to provide new levels of speed and enhanced complexity. 118 10 6. 6 [](/posts/alinea---open-source-headless-cms-efwcm8vaj "Alinea - Open source headless CMS") Article Product Hunt · 4y Alinea - Open source headless CMS Open source CMS Alinea is an open source content management system written in TypeScript. Installed as a single NPM package you get going without setting up databases, environments or any other services. 116 4 7. 7 [](/posts/delete-unused-node-modules-in-a-second-and-enjoy-some-free-space--nvlcwovkm "Delete unused node_modules in a second and enjoy some free space!") Article This is Learning · 4y Delete unused node\_modules in a second and enjoy some free space! The problem is mostly for active developers who have many projects in their computer, but everyone can get benefit from it. The solution is called npkill and you can find it on npm.js. This tool will navigate for your disk looking for node\_modules folders and will list all of them. 115 8 8. 8 [](/posts/best-practices-for-creating-a-modern-npm-package-umeookn-e "Best practices for creating a modern npm package") Article Community Picks · 4y Best practices for creating a modern npm package You will first learn how to create an npm package, so you can get familiar with building and publishing a package. Then you’ll learn what’s involved with making a more robust and production-ready package by setting up a test framework, a continuous integration and deployment pipeline, security checks, and automated semantic npm publish. 107 4 9. 9 [](/posts/how-to-solve-coding-issues-using-chatgpt-zezeypp1m "How to solve coding issues using ChatGPT") Article Community Picks · 4y How to solve coding issues using ChatGPT The most direct way to avoid a side effect is to use a separate process. So how would you do that if the job is assigned to you? I will use the npm command. So let’s ask the omniscient again: This looks like a clean solution to me. 87 14 10. 10 [](/posts/as-a-front-end-engineer-8-useful-npm-coding-techniques-that-you-should-use-jwlll77ls "As a Front-End Engineer: 8 Useful Npm Coding Techniques That You Should Use") Article Medium · 4y As a Front-End Engineer: 8 Useful Npm Coding Techniques That You Should Use Npm can help you achieve this goal quickly. You only need to run to quickly open's documents 2.# Open a package’s documentation page My friends, it would have saved me a lot of time if I had known this trick earlier. 87 6 11. 11 [](/posts/tabler-tabler-tabler-is-free-and-open-source-html-dashboard-ui-kit-built-on-bootstrap-tx2tjcpod "tabler/tabler: Tabler is free and open-source HTML Dashboard UI Kit built on Bootstrap") Article Hacker News · 4y tabler/tabler: Tabler is free and open-source HTML Dashboard UI Kit built on Bootstrap Tabler is a premium and open source dashboard template with a responsive and high-quality UI. Preview Tabler is fully responsive and compatible with all modern browsers. The only requirement is basic HTML and CSS (and some Liquid) knowledge. 81 2 12. 12 [](/posts/the-difference-between-npm-and-npx-command-xecjpqdrn "The Difference between npm and npx command") Article Red Stapler · 4y The Difference between npm and npx command NPM vs NPX is the package manager for the Node.js JavaScript JavaScript runtime. NPM is used to install and manage packages (i.e., libraries, frameworks, tools, etc.) that are published on the npm registry. This can make it easy to confuse the two, especially if you are not familiar with. 78 7 13. 13 [](/posts/aykutsarac-jsoncrack-com-seamlessly-visualize-your-json-data-instantly-into-graphs-paste-import-pbkvoyrsg "AykutSarac/jsoncrack.com: 🔮 Seamlessly visualize your JSON data instantly into graphs; paste, import or fetch!") Article Pointer · 4y AykutSarac/jsoncrack.com: 🔮 Seamlessly visualize your JSON data instantly into graphs; paste, import or fetch! JSON Crack is a tool that generates graph diagrams from JSON objects. These diagrams are much easier to navigate than the textual format. The tool also allows you to search the nodes. You can use the web version at jsoncrack.com or also run it locally as Docker container. 71 2 14. 14 [](/posts/heroicons-2-0-are-here-7e-ydsbtq "Heroicons 2.0 are here") Article Laravel News · 4y Heroicons 2.0 are here The makers of Tailwind CSS released Heroicons 2.0, a set of 264 hand-crafted SVG icons for the web. The icons are redrawn from scratch and feature a 24px solid set. They are available as first-party React and Vue libraries and official Figma components. 61 15. 15 [](/posts/tauri-fast-cross-platform-desktop-apps-s1ojhd-d7 "Tauri: Fast, Cross-platform Desktop Apps") Article SitePoint · 4y Tauri: Fast, Cross-platform Desktop Apps In this tutorial, we’ll explore Tauri, a modern, cross-platform framework for building desktop apps. Electron is great, but it has some significant drawbacks, which some other modern frameworks have overcome. Tauri is a modern framework that allows you to design, develop and build cross- platform apps using familiar web technologies like HTML, CSS, and JavaScript. 60 3 16. 16 [](/posts/create-a-new-react-app-with-vite-qhvdtezry "Create a new React app with Vite") Article Hashnode · 4y Create a new React app with Vite Vite: Enables Hot Module Replacement (HMR) Helps you import and manage your project and manage. With one command and a few seconds, it can generate all the above boilerplate for you and more. It’s fast, and you keep your application state if you want. HMR saves time you would otherwise spend waiting around or inputting data to recreate your app state. It reduces friction. 60 4 17. 17 [](/posts/test-driven-development-tutorial-how-to-test-your-javascript-and-reactjs-applications-qlij05pun "Test-Driven Development Tutorial – How to Test Your JavaScript and ReactJS Applications") Article freeCodeCamp · 4y Test-Driven Development Tutorial – How to Test Your JavaScript and ReactJS Applications Test-Driven Development (TDD) requires you to pre-specify the output your intended program must produce to pass the test of functioning the way you envisioned. This tutorial will show you all you need to cd path/to/addition-calculator-jest-project Step 4: Create a package, Initialize a package.json file for your project. If your package manager is Yarn, run: yarn add jest --save-dev. 60 6 18. 18 [](/posts/getting-started-with-vite-gxrhmn1of "Getting started with Vite") Article asayer · 4y Getting started with Vite Vite serves your code via native ES module imports during development and bundles it with Rollup for production. Vite is a lightning-fast cold server start and offers instant hot module replacement and true on-demand compilation. It is also highly extensible via its plugin API and JavaScript API with full typing support. 56 3 19. 19 [](/posts/send-real-time-notifications-with-socket-io-and-node-js-ute0-3snp "Send Real-Time Notifications with Socket.io and Node.js") Article Bits and Pieces · 4y Send Real-Time Notifications with Socket.io and Node.js Express.js is a fast, minimalist framework that allows us to create real-time, bi-directional communication between clients and a Node.js server. This tutorial assumes that you have a basic knowledge of building web applications with Express and Node.io. In this section, you’ll learn how to send Setting up Express.JS on anode.js on a node.js. 50 20. 20 [](/posts/building-a-pomodoro-timer-with-tauri-using-react-and-vite-bv2lqn42m "Building a Pomodoro Timer with Tauri using React and Vite") Article LogRocket · 4y Building a Pomodoro Timer with Tauri using React and Vite Tauri is a set of tools that lets you build cross-platform desktop apps using frontend frameworks. When combined with React and Vite, it can be used to build extremely fast binaries for all desktop platforms. In this post, we will build a simple Pomodoro timer, and invite you to follow along with Below are the requirements for our app. To start, head over to src/App.tsX.tsx. 47 21. 21 [](/posts/8-elements-of-securing-node-js-applications-vr8dgi3yt "8 elements of securing Node.js applications") Article Red Hat Developer · 4y 8 elements of securing Node.js applications Security practices apply to both the code itself and your software development process. Validate user input Unvalidated input can result in attacks such as command injection, SQL injection, and denial of service, disrupting your service and corrupting data. 47 1 22. 22 [](/posts/build-a-full-stack-application-with-adminjs-txt2wcpod "Build a full-stack application with AdminJS") Article LogRocket · 4y Build a full-stack application with AdminJS AdminJS is an open source Node.js admin panel that promises to do just that: AdminJS. The tutorial portion of this post will demonstrate how to use AdminJS to build a full-stack application. It offers a range of customizability, it provides a REST API that can be integrated into other applications. 46 1 23. 23 [](/posts/better-ways-to-create-react-app-jnd8ofxzi "Better ways to Create React App") Article DEV · 4y Better ways to Create React App 1394 packages in 44s 209 packages are looking for funding run \`npm fund\` for details. Vite Vite is a batteries included bundler & development server with presets for multiple frameworks, including React with or without TypeScript. Vite provides much smoother developer experience and works out of the box, but you're building a huge project or need the smallest possible footprint. If it's a little little Didn't check tbh, I used it. It has a couple of quirks that need to be understood. The output was definitely lower in weight. 46 3 24. 24 [](/posts/deno-1-28-featuring-1-3-million-new-modules-zbsm8qpsp "Deno 1.28: Featuring 1.3 Million New Modules") Article Deno · 4y Deno 1.28: Featuring 1.3 Million New Modules Deno 1.28: Featuring 1.3 million new Modules Bartek Iwańczuk, David Sherret, Andy Jiang, Ryan Dahl, and Andy Jiang. Deno's secure-by-default, opt-in permissions model means spending less time worrying about suspicious packages and more time shipping product. 43 4 25. 25 [](/posts/deno-1-27-major-ide-improvements-5wzwosehh "Deno 1.27: Major IDE Improvements") Article Community Picks · 4y Deno 1.27: Major IDE Improvements Deno 1.27 has been tagged and released with the following new features and changes. Language Server/IDE improvements inlay Hints TypeScript added support for inlay hints in Improvements to npm compatibility. Deno now supports Node-API (formerly N-API) when used within Node.js. It means that packages like parcel, sqlite3, usb or fs-xattr can now be used with Deno. The new version of Deno can be used. 43 [See all NPM archives](/tags/npm/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/npm/best-of/2022#page","url":"https://daily.dev/tags/npm/best-of/2022","name":"Best NPM Posts of 2022","description":"The most upvoted NPM posts of 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/npm/best-of/2022#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/build-your-first-electron-app-ocqinw-yx","name":"Build your first Electron app"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/total-typescript-beginners-typescript-tutorial-an-interactive-typescript-tutorial-for-beginners-4icjv2obg","name":"total-typescript/beginners-typescript-tutorial: An interactive TypeScript tutorial for beginners"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/how-to-build-a-secure-api-gateway-in-node-js-igtqoba7u","name":"How to build a secure API gateway in Node.js"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/vite-4-0-is-out--as9udfgh4","name":"Vite 4.0 is out!"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/what-is-bun-js-and-why-is-the-javascript-community-excited-about-it--m7kptmcko","name":"What Is Bun.js and Why Is the JavaScript Community Excited About It?"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/alinea---open-source-headless-cms-efwcm8vaj","name":"Alinea - Open source headless CMS"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/delete-unused-node-modules-in-a-second-and-enjoy-some-free-space--nvlcwovkm","name":"Delete unused node_modules in a second and enjoy some free space!"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/best-practices-for-creating-a-modern-npm-package-umeookn-e","name":"Best practices for creating a modern npm package"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/how-to-solve-coding-issues-using-chatgpt-zezeypp1m","name":"How to solve coding issues using ChatGPT"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/as-a-front-end-engineer-8-useful-npm-coding-techniques-that-you-should-use-jwlll77ls","name":"As a Front-End Engineer: 8 Useful Npm Coding Techniques That You Should Use"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/tabler-tabler-tabler-is-free-and-open-source-html-dashboard-ui-kit-built-on-bootstrap-tx2tjcpod","name":"tabler/tabler: Tabler is free and open-source HTML Dashboard UI Kit built on Bootstrap"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/the-difference-between-npm-and-npx-command-xecjpqdrn","name":"The Difference between npm and npx command"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/aykutsarac-jsoncrack-com-seamlessly-visualize-your-json-data-instantly-into-graphs-paste-import-pbkvoyrsg","name":"AykutSarac/jsoncrack.com: 🔮 Seamlessly visualize your JSON data instantly into graphs; paste, import or fetch!"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/heroicons-2-0-are-here-7e-ydsbtq","name":"Heroicons 2.0 are here"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/tauri-fast-cross-platform-desktop-apps-s1ojhd-d7","name":"Tauri: Fast, Cross-platform Desktop Apps"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/create-a-new-react-app-with-vite-qhvdtezry","name":"Create a new React app with Vite"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/test-driven-development-tutorial-how-to-test-your-javascript-and-reactjs-applications-qlij05pun","name":"Test-Driven Development Tutorial – How to Test Your JavaScript and ReactJS Applications"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/getting-started-with-vite-gxrhmn1of","name":"Getting started with Vite"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/send-real-time-notifications-with-socket-io-and-node-js-ute0-3snp","name":"Send Real-Time Notifications with Socket.io and Node.js"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/building-a-pomodoro-timer-with-tauri-using-react-and-vite-bv2lqn42m","name":"Building a Pomodoro Timer with Tauri using React and Vite"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/8-elements-of-securing-node-js-applications-vr8dgi3yt","name":"8 elements of securing Node.js applications"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/build-a-full-stack-application-with-adminjs-txt2wcpod","name":"Build a full-stack application with AdminJS"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/better-ways-to-create-react-app-jnd8ofxzi","name":"Better ways to Create React App"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/deno-1-28-featuring-1-3-million-new-modules-zbsm8qpsp","name":"Deno 1.28: Featuring 1.3 Million New Modules"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/deno-1-27-major-ide-improvements-5wzwosehh","name":"Deno 1.27: Major IDE Improvements"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"NPM","item":"https://daily.dev/tags/npm"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/npm/best-of"},{"@type":"ListItem","position":5,"name":"2022"}]}]} ```