--- title: Best Hashnode posts — August 2022 | daily.dev description: The most upvoted Hashnode posts from August 2022, curated by the daily.dev community. canonical: https://daily.dev/sources/hashnode/best-of/2022/08 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/hashnode/best-of/2022/08 og:type: website og:site_name: daily.dev og:title: Best Hashnode posts — August 2022 | daily.dev og:description: The most upvoted Hashnode posts from August 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 Hashnode — August 2022 1. 1 [](https://daily.dev/posts/system-design-the-complete-course-g81uw5ava "System Design: The complete course") Article Hashnode · 4y System Design: The complete course System design is one of the earliest decisions we can make when building a system. System design meets the needs of your business or organization through coherent and efficient systems. The OSI Model can be seen as a universal language for computer networking. It's based on the concept of splitting up a communication system into seven abstract layers, each one stacked upon the last. 676 25 2. 2 [](https://daily.dev/posts/i-stopped-using-visual-studio-code-foc6hgmmn "I stopped using Visual Studio Code") Article Hashnode · 4y I stopped using Visual Studio Code WebStorm is a paid product compared to VSC, which is free. It runs projects without hesitation and has no issue refactoring a widely used import. 374 97 3. 3 [](https://daily.dev/posts/the-60-30-10-color-rule-for-web-design-rr7l2tb3h "The 60:30:10 color rule for web design") Article Hashnode · 4y The 60:30:10 color rule for web design Color plays such an important rule in the design of your websites or apps. The 60% is the neutral or primary color this should be the base color of your design. The 30% is secondary color this is the complementary color and will support the main color. 204 9 4. 4 [](https://daily.dev/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 5. 5 [](https://daily.dev/posts/from-side-project-to-startup---things-i-learned-in-a-year--ldu9yfc16 "From Side Project to Startup - things I learned in a year.") Article Hashnode · 4y From Side Project to Startup - things I learned in a year. Akash and Akash started Peerlist as a side project while working full-time as a cofounder. They have a vision of 5 years but a plan of 3 months. The goal is clear to both of them, but our plans are always changing. 145 9 6. 6 [](https://daily.dev/posts/web-3-for-beginners-t-g10-8n1 "Web 3 for Beginners") Article Hashnode · 4y Web 3 for Beginners The first day was an introduction to Web 3 - the'read-write-own' web (current mainstream internet) Benefits of Web 3 Enhanced data security allow simple login with a crypto wallet. Outages are avoided Signing up on Web 2.0 vs Web 3.0. 113 5 7. 7 [](https://daily.dev/posts/unit-testing-with-jest-react-and-typescript-ou7u32p0p "Unit testing with Jest, React, and TypeScript") Article Hashnode · 4y Unit testing with Jest, React, and TypeScript Software testing is critical to lower the chances of our program failing by running tests with the end-user in mind. Testing-library/react is a testing utility tool that's built to test the actual DOM tree rendered by React on the browser. The goal of the library is to help you write tests that resemble how a user would use your application. 112 3 8. 8 [](https://daily.dev/posts/how-i-got-my-1st-job-as-a-developer-by-making-simple-projects-seem-big-xvyw-0tbi "How I got my 1st job as a developer by making simple projects seem big") Article Hashnode · 4y How I got my 1st job as a developer by making simple projects seem big Julia is a self-taught front-end developer in his thirties who switched career into tech after studying Japanese and musicology while working part-time at a casino. She created a simple calculator using JavaScript using HTML, SCSS, JavaScript, hosted on GitHub pages to run the app. She later updated the code and created some mixins to familiarize herself with it. 108 4 9. 9 [](https://daily.dev/posts/15-easy-steps-to-create-a-kickass-linkedin-profile-nf5av6cda "15 Easy Steps to Create a Kickass LinkedIn Profile") Article Hashnode · 4y 15 Easy Steps to Create a Kickass LinkedIn Profile LinkedIn is the world's largest networking platform for professionals. 830 million people across 200+ countries use LinkedIn, with India accounting for 118 million users. 105 5 10. 10 [](https://daily.dev/posts/a-complete-guide-to-debugging-javascript-in-chrome-5kwwbq-aq "A Complete Guide to Debugging Javascript in Chrome") Article Hashnode · 4y A Complete Guide to Debugging Javascript in Chrome Chrome DevTools is a comprehensive developer toolkit with various web authoring and debugging tools. It is built directly into the Chrome browser and gives developers a deeper understanding of their applications. This article teaches you how to debug JavaScript code using the Chrome Dev tools. 77 11. 11 [](https://daily.dev/posts/how-to-debug-better-with-chrome-gbykxrsyy "How to Debug Better with Chrome") Article Hashnode · 4y How to Debug Better with Chrome Google Chrome is probably the most widely used and popular web browser among developers. It has gradually become the preferred web browser for most developers to test and debug their websites and web apps. Google Chrome provides developers with the ability to debug most web applications with the built-in developer tools (aka DevTools) within the browser. 70 6 12. 12 [](https://daily.dev/posts/javascript-callbacks-explained-in-5-minutes-xdqnh3kmi "JavaScript Callbacks Explained in 5 Minutes") Article Hashnode · 4y JavaScript Callbacks Explained in 5 Minutes Let's cover the basics of callbacks in about 5 minutes with a handful of examples. Callbacks are an essential part of understanding JavaScript especially when dealing with asynchronous code. Let's create our own version of the forEach() function to get a clearer idea of how callbacks work. 69 2 13. 13 [](https://daily.dev/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 14. 14 [](https://daily.dev/posts/web-based-all-in-one-gradient-editor--h-n1e1vfy "Web-based all-in-one gradient editor.") Article Hashnode · 4y Web-based all-in-one gradient editor. Gradientify is a free online tool that provides 100+ trendy, beautiful, carefully crafted gradients for your apps, blog, UI design or to be used as content backgrounds. It is open source and you can use it for free without attribution. Save gradients, Search gradient by Hex, add new gradients and add newGradients and dark mode. 60 1 15. 15 [](https://daily.dev/posts/here-s-what-every-react-developer-needs-to-know-about-typescript---part-1-0ifotp5rn "Here's what every React Developer needs to know about TypeScript - Part 1") Article Hashnode · 4y Here's what every React Developer needs to know about TypeScript - Part 1 TypeScript is an open source language developed and maintained by Microsoft. It is a multi-paradigm language (like JavaScript) Allows the use of static types Extra features (generics, interfaces, tuples, etc) Allows for gradual adoption\*. 59 1 16. 16 [](https://daily.dev/posts/mongodb-schema-design-best-practices-fmen-92bk "MongoDB schema design best practices") Article Hashnode · 4y MongoDB schema design best practices MongoDB is a document-oriented NoSQL database that can store large amounts of data in a JSON format. It has a faster execution than RDBMS. This article will help you understand the theoretical core concepts of MongoDB that can be used to improve scalability and performance. 52 17. 17 [](https://daily.dev/posts/graphql-api-design-m05izabfr "GraphQL API design") Article Hashnode · 4y GraphQL API design GraphQL is a specification for a new type of API design developed by Facebook to solve some problems encountered by mobile clients. It allows clients to request only what they need via a query language interface. 50 18. 18 [](https://daily.dev/posts/get-started-with-flexbox-gzy4hmu31 "Get Started With Flexbox") Article Hashnode · 4y Get Started With Flexbox This one-dimensional layout allows elements to be placed inside a container with evenly distributed space. This layout makes elements responsive, which means they change their behaviour depending on the type of device that is displaying them. It gives elements flexibility as well as appropriate position and symmetry. 50 19. 19 [](https://daily.dev/posts/i-made-a-discord-bot-using-javascript-in-4days--zcekol0du "I made a Discord bot using JavaScript in 4days!") Article Hashnode · 4y I made a Discord bot using JavaScript in 4days! Fueler is a new age portfolio tool that helps skilled individuals prove themselves by showcasing their work. It just takes 30 seconds to setup your profile on Fueler and its totally free. The idea came when I discovered slash commands in discord and here I could easily categorize them inside slash commands. 44 7 20. 20 [](https://daily.dev/posts/learn-how-to-build-a-microservice-using-node-js-and-rabbitmq--fjc4txiwy "Learn how to build a microservice using Node.js and RabbitMQ.") Article Hashnode · 4y Learn how to build a microservice using Node.js and RabbitMQ. Learn how to build a microservice using Node.js and RabbitMQ. This tutorial will teach you about microservices and how to create a simple e-commerce microservice architecture with two services; product and order. In the following section, we will look at some of the prerequisites for this tutorial. Make another folder for the routes, call it routes, then inside it, have a file routes. 40 2 21. 21 [](https://daily.dev/posts/how-open-source-can-boost-your-career-as-a-developer--ksceayvka "How open source can boost your career as a developer?") Article Hashnode · 4y How open source can boost your career as a developer? Many junior or entry-level developers struggle to get opportunities because of little or no work experience. Becoming a contributor at that early stage has its advantages, like people getting to know you better, your contributions to the project can be easily felt. A lot of top projects with over 30,000+ stars we use and love today once started small and un-noticed. 40 1 22. 22 [](https://daily.dev/posts/fabric-the-new-architecture-0szwdwqa2 "Fabric: The new Architecture") Article Hashnode · 4y Fabric: The new Architecture Fabric is the React Native forerunner to the old legacy renderer. Fabric takes a different approach to how UI view instances will be created in a React Native application. The new Fabric architecture changes none of this but builds on it, making the experience even more platform specific. 40 23. 23 [](https://daily.dev/posts/simplifying-closures-in-javascript-zmlfr1vfl "Simplifying Closures in JavaScript") Article Hashnode · 4y Simplifying Closures in JavaScript Lexical Scoping defines the scope of a variable according to the position of that variable declared in the source code. This refers to the variables defined between its curly brackets. Once we use the let keyword in the for-loop, it will create a new lexical scope in each iteration. This means that the previous value of j is copied from the previous scope to the new one. 40 24. 24 [](https://daily.dev/posts/docusaurus-2-0-meta-s-static-site-generator-to-build-beautiful-documentation-websites-kr5y6mza1 "Docusaurus 2.0 🥳️: Meta's static site generator to build beautiful documentation websites") Article Hashnode · 4y Docusaurus 2.0 🥳️: Meta's static site generator to build beautiful documentation websites Docusaurus 2.0 is a documentation static-site-generator, based on Node.js and React. It allows you to focus on content: just write Markdown files. It is already powering many great docs sites you know: React-Native, Redux, Tauri, Electron, Courier, Figma. 38 10 25. 25 [](https://daily.dev/posts/creating-a-business-card-for-the-terminal-qjtjomvg9 "Creating a business card for the terminal") Article Hashnode · 4y Creating a business card for the terminal The original idea, as far as I can tell, comes from bitandbang, and that's the one we'll be using and crediting for this article. We won't be creating the card from scratch as the heavy lifting is already done by bitand Bang. 39 4 [See all Hashnode archives](/sources/hashnode/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/sources/hashnode/best-of/2022/08#page","url":"https://daily.dev/sources/hashnode/best-of/2022/08","name":"Best Hashnode Posts — August 2022","description":"The most upvoted Hashnode posts from August 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/hashnode/best-of/2022/08#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/system-design-the-complete-course-g81uw5ava","name":"System Design: The complete course"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/i-stopped-using-visual-studio-code-foc6hgmmn","name":"I stopped using Visual Studio Code"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/the-60-30-10-color-rule-for-web-design-rr7l2tb3h","name":"The 60:30:10 color rule for web design"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/build-your-first-electron-app-ocqinw-yx","name":"Build your first Electron app"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/from-side-project-to-startup---things-i-learned-in-a-year--ldu9yfc16","name":"From Side Project to Startup - things I learned in a year."},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/web-3-for-beginners-t-g10-8n1","name":"Web 3 for Beginners"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/unit-testing-with-jest-react-and-typescript-ou7u32p0p","name":"Unit testing with Jest, React, and TypeScript"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/how-i-got-my-1st-job-as-a-developer-by-making-simple-projects-seem-big-xvyw-0tbi","name":"How I got my 1st job as a developer by making simple projects seem big"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/15-easy-steps-to-create-a-kickass-linkedin-profile-nf5av6cda","name":"15 Easy Steps to Create a Kickass LinkedIn Profile"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/a-complete-guide-to-debugging-javascript-in-chrome-5kwwbq-aq","name":"A Complete Guide to Debugging Javascript in Chrome"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/how-to-debug-better-with-chrome-gbykxrsyy","name":"How to Debug Better with Chrome"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/javascript-callbacks-explained-in-5-minutes-xdqnh3kmi","name":"JavaScript Callbacks Explained in 5 Minutes"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/create-a-new-react-app-with-vite-qhvdtezry","name":"Create a new React app with Vite"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/web-based-all-in-one-gradient-editor--h-n1e1vfy","name":"Web-based all-in-one gradient editor."},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/here-s-what-every-react-developer-needs-to-know-about-typescript---part-1-0ifotp5rn","name":"Here's what every React Developer needs to know about TypeScript - Part 1"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/mongodb-schema-design-best-practices-fmen-92bk","name":"MongoDB schema design best practices"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/graphql-api-design-m05izabfr","name":"GraphQL API design"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/get-started-with-flexbox-gzy4hmu31","name":"Get Started With Flexbox"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/i-made-a-discord-bot-using-javascript-in-4days--zcekol0du","name":"I made a Discord bot using JavaScript in 4days!"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/learn-how-to-build-a-microservice-using-node-js-and-rabbitmq--fjc4txiwy","name":"Learn how to build a microservice using Node.js and RabbitMQ."},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/how-open-source-can-boost-your-career-as-a-developer--ksceayvka","name":"How open source can boost your career as a developer?"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/fabric-the-new-architecture-0szwdwqa2","name":"Fabric: The new Architecture"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/simplifying-closures-in-javascript-zmlfr1vfl","name":"Simplifying Closures in JavaScript"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/docusaurus-2-0-meta-s-static-site-generator-to-build-beautiful-documentation-websites-kr5y6mza1","name":"Docusaurus 2.0 🥳️: Meta's static site generator to build beautiful documentation websites"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/creating-a-business-card-for-the-terminal-qjtjomvg9","name":"Creating a business card for the terminal"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Sources","item":"https://daily.dev/sources"},{"@type":"ListItem","position":3,"name":"Hashnode","item":"https://daily.dev/sources/hashnode"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/hashnode/best-of"},{"@type":"ListItem","position":5,"name":"August 2022"}]}]} ```