--- title: Best Hacker Noon posts — July 2023 | daily.dev description: The most upvoted Hacker Noon posts from July 2023, curated by the daily.dev community. canonical: https://daily.dev/sources/hackernoon/best-of/2023/07 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/hackernoon/best-of/2023/07 og:type: website og:site_name: daily.dev og:title: Best Hacker Noon posts — July 2023 | daily.dev og:description: The most upvoted Hacker Noon posts from July 2023, 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 Hacker Noon — July 2023 1. 1 [](https://daily.dev/posts/adding-dark-mode-to-your-website-using-a-single-line-of-html-aaj5mgb0g "Adding Dark Mode to Your Website Using a Single Line of HTML") Article Hacker Noon·3y Adding Dark Mode to Your Website Using a Single Line of HTML Using a Single Line of HTML, I wanted to explore how I can add dark mode to my website. I decided to keep it simple, and use the system-wide preference for the colour mode. 73 8 2. 2 [](https://daily.dev/posts/dark-themed-ui-design-tips-4hkdahypd "Dark-Themed UI Design Tips") Article Hacker Noon·3y Dark-Themed UI Design Tips A dark mode has been deemed a requirement for UI by both Apple and Google. Reduced brightness in a dark environment offers safety and can reduce eye strain. The use of digital technology is increasing with tech revolutionization. We spend almost 10 hours of the day sitting in front of a digital screen. 72 2 3. 3 [](https://daily.dev/posts/exploring-the-trending-web-designs-of-2023-8kfcljtux "Exploring the Trending Web Designs of 2023") Article Hacker Noon·3y Exploring the Trending Web Designs of 2023 The Trending Web Designs of 2023 are all about exploring and experimenting. We have curated the ultimate list of the top 10 web design trends 2023 Edition. The top 10 Web Design Trends 2023 edition has been curated by HackerNoon. 65 3 4. 4 [](https://daily.dev/posts/optimizing-seo-in-next-js-techniques-for-better-search-engine-visibility-gj8f3fkfk "Optimizing SEO in Next.js: Techniques for Better Search Engine Visibility") Article Hacker Noon·3y Optimizing SEO in Next.js: Techniques for Better Search Engine Visibility Optimizing SEO in Next.js: Techniques for Better Search Engine Visibility.js is a powerful React framework. It provides developers with a solid foundation for building performant and SEO-friendly web applications. In this blog post, we will explore advanced techniques for optimizing SEO in next.js. 57 2 5. 5 [](https://daily.dev/posts/understanding-the-javascript-event-loop-everything-you-need-to-know--qxiyba4wy "Understanding the Javascript Event Loop (Everything You Need to Know)") Article Hacker Noon·3y Understanding the Javascript Event Loop (Everything You Need to Know) JavaScript operates on a single thread, allowing it to process instructions one at a time. The call stack is an array where the JavaScript interpreter keeps track of the code you're running. 42 2 6. 6 [](https://daily.dev/posts/understanding-react-s-useeffect-hook-a-deep-dive-ch4nadr8p "Understanding React's useEffect Hook: A Deep Dive") Article Hacker Noon·3y Understanding React's useEffect Hook: A Deep Dive Understanding React's useEffect Hook has revolutionized how we handle side effects in our functional components. In this guide, we'll demystify its use cases and how it has made side effects management a breeze compared to the lifecycle methods of class components. 39 7. 7 [](https://daily.dev/posts/building-your-first-coding-project-and-avoid-tutorial-hell-oywf437m7 "Building Your First Coding Project and Avoid Tutorial Hell") Article Hacker Noon·3y Building Your First Coding Project and Avoid Tutorial Hell Building Your First Coding Project and Avoid tutorial hell is real. The goal of this project is to get you used to the process of building something from scratch. 35 2 8. 8 [](https://daily.dev/posts/how-to-create-a-solar-system-in-javascript-with-three-js--dsfho0o4u "How to Create a Solar System in JavaScript With Three.js 🌌") Article Hacker Noon·3y How to Create a Solar System in JavaScript With Three.js 🌌 Using Three.js, we can create a Solar System in JavaScript with three-dimensional graphics. The code is available on GitHub and can be used to create a solar system using 3D graphics. We need a scene, a camera, and a visualization tool: Adding a Starry Sky We could simply use a texture to draw the stars. 34 9. 9 [](https://daily.dev/posts/how-multi-processing-helped-me-speed-up-my-javascript-application-by-4x-zb6ewynes "How Multi-Processing Helped Me Speed Up My JavaScript Application By 4x") Article Hacker Noon·3y How Multi-Processing Helped Me Speed Up My JavaScript Application By 4x HackerNoon JavaScript has been inherently designed as a single-threaded beast. But in the wild terrains of computing, the predators known as 'multiprocessing&apos are waiting to be tamed. 30 10. 10 [](https://daily.dev/posts/design-of-a-scraping-platform-obgpyn1qx "Design of a Scraping Platform") Article Hacker Noon·3y Design of a Scraping Platform Design of a Scraping Platform can be split into 2 categories that require different infrastructure and techniques. The system only has one functional requirement: it must be able to execute arbitrary scrapers on schedule. Scrapyd deploy eggified Python packages Packages may include dependencies in the egg file and different scrapers may use different versions. 25 1 11. 11 [](https://daily.dev/posts/advanced-react-router-v6-techniques-going-beyond-the-basics-0lw4evgx6 "Advanced React Router V6 Techniques: Going Beyond the Basics") Article Hacker Noon·3y Advanced React Router V6 Techniques: Going Beyond the Basics Advanced React Router V6 Techniques: Going Beyond the Basics Too Long; Didn't Read React Router is an amazing tool that enables us to create dynamic and smooth navigation in our React applications. There are some lesser-known techniques that can elevate your routing abilities to a whole new level. 23 2 12. 12 [](https://daily.dev/posts/how-to-create-a-personal-webdev-ide-in-next-js-tndlafqya "How to Create a Personal WebDev IDE in Next.js") Article Hacker Noon·3y How to Create a Personal WebDev IDE in Next.js We'll explore the process of building a functional web development Integrated Development Environment (IDE) using React within a Next.js application. We'll focus on creating an IDE that offers support for HTML, CSS, and JavaScript. Subsequently, we'll enhance the IDE by adding the capability to execute our code. 19 1 13. 13 [](https://daily.dev/posts/understanding-the-differences-between-real-dom-virtual-dom-and-shadow-dom-il2c8oslx "Understanding the Differences Between Real DOM, Virtual DOM, and Shadow DOM") Article Hacker Noon·3y Understanding the Differences Between Real DOM, Virtual DOM, and Shadow DOM The HTML tree of a website is represented by an object called. In this object, there is a model of the HTML tree's elements, conveniently accessible by. DOM (Document Object Model) document object dot notation. You can also use this dot notation to manipulate the DOM. 19 14. 14 [](https://daily.dev/posts/how-to-publish-a-react-component-as-a-package-to-npm-c7hgyqjld "How to Publish a React Component as a Package to Npm") Article Hacker Noon·3y How to Publish a React Component as a Package to Npm How to Publish a React component as an NPM package is a great way to share your code with the wider community. It's possible to publish packages as public as well as private packages on the NPM registry. The create-react-library command initializes your project to be published along with an example app. 19 15. 15 [](https://daily.dev/posts/building-a-pricing-page-and-charging-visitors-a-nextjs-guide--bgmaahewq "🔥 Building a pricing page and charging visitors — A NextJS Guide 🤯 🤯") Article Hacker Noon·3y 🔥 Building a pricing page and charging visitors — A NextJS Guide 🤯 🤯 Visitors can press the "Purchase" button and go to a checkout page. Once completed, we will send the customers to a success page and save the customers. We will show you how to build a page with multiple pricing tiers in this article. 19 16. 16 [](https://daily.dev/posts/creating-a-node-js-server-with-postgres-and-knex-on-express-vmcvnk5rz "Creating a Node.js Server With Postgres and Knex on Express") Article Hacker Noon·3y Creating a Node.js Server With Postgres and Knex on Express Creating a Node.js Server With Postgres and Knex on Express is a guide on setting up a node.js server. All within the Express.js framework, this guide will help you get the most out of your Node.JS server. 17 17. 17 [](https://daily.dev/posts/node-js-background-jobs-for-modern-developers-interview-with-startups-of-the-year-nominee-defer-znloatcfa "Node.js Background Jobs for Modern Developers – Interview With Startups of the Year Nominee, Defer") Article Hacker Noon·3y Node.js Background Jobs for Modern Developers – Interview With Startups of the Year Nominee, Defer Node.js Background Jobs for Modern Developers - Interview With Startups of the Year Nominee, Defer Too Long; Didn't Read Defer. The company has been nominated in HackerNoon's annual Startup of the year awards in Paris, France. 17 18. 18 [](https://daily.dev/posts/hacking-time-management-and-task-prioritization-2lsunoe3u "Hacking Time Management and Task Prioritization") Article Hacker Noon·3y Hacking Time Management and Task Prioritization Hacking Time Management and Task Prioritization are critical skills that can make or break your productivity, work-life balance, and overall career progression. The Pareto Principle or the 80/20 rule, can be a game-changer in prioritizing tasks. 14 19. 19 [](https://daily.dev/posts/web-scraping-using-a-headless-browser-in-nodejs-wb9ulsav8 "Web scraping using a headless browser in NodeJS") Article Hacker Noon·3y Web scraping using a headless browser in NodeJS Web scraping using a headless browser in NodeJS Too Long; Didn't Read Web scraping collects and extracts unstructured data from a website to a more readable structured format like CSV and more. Organizations set restrictions for web scraping guiding how users are allowed to collect data which on every website has a guiding principle. 13 20. 20 [](https://daily.dev/posts/exploring-the-shap-e-3d-model-generator-s0sd9qt8o "Exploring the Shap-e 3D Model Generator") Article Hacker Noon·3y Exploring the Shap-e 3D Model Generator Shap-e is an AI model that transforms input conditions into detailed 3D shapes. By employing neural networks, Shap-e understands the relationship between input conditions and the shape of the object. This makes it an invaluable tool for a range of applications including 3D modeling, computer graphics, virtual reality, and even scientific simulations. 11 21. 21 [](https://daily.dev/posts/angular-16-a-new-way-to-get-route-information-in-angular-icf7witfg "Angular 16: A New Way to Get Route Information in Angular") Article Hacker Noon·3y Angular 16: A New Way to Get Route Information in Angular New feature allows you to access the current routing parameters through the \`@ input\` property. The introduction of this new way to obtain routing information in Angular has significantly improved the development experience. Stay tuned for further enhancements and updates to enhance your Angular development journey. 11 22. 22 [](https://daily.dev/posts/understanding-chakra-ui-4qheyz3cc "Understanding Chakra UI") Article Hacker Noon·3y Understanding Chakra UI Chakra UI is an open-source library that provides a large collection of simple and accessible components for building fast and visually appealing User Interfaces in ReactJS. It provides a set of "pre-built" components that can be used to organize the visual hierarchy of your application. 11 23. 23 [](https://daily.dev/posts/sveltekit-and-appwrite-cloud-how-to-build-a-list-app-lnsoky6qc "Sveltekit and Appwrite Cloud: How to build a list app") Article Hacker Noon·3y Sveltekit and Appwrite Cloud: How to build a list app Appwrite uses Appwrite’s API to create a list app with features like task creation and deletion and storing the data in Appwrite Cloud. Sveltekit and Appwrite use Appwrite and Tailwind CSS to create the list app. 11 24. 24 [](https://daily.dev/posts/docker-for-beginners-containerizing-a-nextjs-application-7u2cecxwu "Docker for Beginners: Containerizing a Nextjs Application") Article Hacker Noon·3y Docker for Beginners: Containerizing a Nextjs Application Docker for Beginners: Containerizing a Nextjs Application is an absolute beginner approach. I am not advising to use it in production. This is something new to me and I am still exploring Docker. If you're reading this, maybe you can help me make some improvements to this approach. 9 25. 25 [](https://daily.dev/posts/world-s-worst-tech-employers-a5bkfakew "World’s Worst Tech Employers") Article Hacker Noon·3y World’s Worst Tech Employers World’s Worst Tech Employers: HackerNoon. The only question that is left is: who would be the winner? If I had to make a top 5 list of the most hated American tech giants, here is how I would place them. 10 2 [See all Hacker Noon archives](/sources/hackernoon/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/hackernoon/best-of/2023/07#page","url":"https://daily.dev/sources/hackernoon/best-of/2023/07","name":"Best Hacker Noon Posts — July 2023","description":"The most upvoted Hacker Noon posts from July 2023, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/hackernoon/best-of/2023/07#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/adding-dark-mode-to-your-website-using-a-single-line-of-html-aaj5mgb0g","name":"Adding Dark Mode to Your Website Using a Single Line of HTML"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/dark-themed-ui-design-tips-4hkdahypd","name":"Dark-Themed UI Design Tips"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/exploring-the-trending-web-designs-of-2023-8kfcljtux","name":"Exploring the Trending Web Designs of 2023"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/optimizing-seo-in-next-js-techniques-for-better-search-engine-visibility-gj8f3fkfk","name":"Optimizing SEO in Next.js: Techniques for Better Search Engine Visibility"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/understanding-the-javascript-event-loop-everything-you-need-to-know--qxiyba4wy","name":"Understanding the Javascript Event Loop (Everything You Need to Know)"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/understanding-react-s-useeffect-hook-a-deep-dive-ch4nadr8p","name":"Understanding React's useEffect Hook: A Deep Dive"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/building-your-first-coding-project-and-avoid-tutorial-hell-oywf437m7","name":"Building Your First Coding Project and Avoid Tutorial Hell"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/how-to-create-a-solar-system-in-javascript-with-three-js--dsfho0o4u","name":"How to Create a Solar System in JavaScript With Three.js 🌌"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/how-multi-processing-helped-me-speed-up-my-javascript-application-by-4x-zb6ewynes","name":"How Multi-Processing Helped Me Speed Up My JavaScript Application By 4x"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/design-of-a-scraping-platform-obgpyn1qx","name":"Design of a Scraping Platform"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/advanced-react-router-v6-techniques-going-beyond-the-basics-0lw4evgx6","name":"Advanced React Router V6 Techniques: Going Beyond the Basics"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/how-to-create-a-personal-webdev-ide-in-next-js-tndlafqya","name":"How to Create a Personal WebDev IDE in Next.js"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/understanding-the-differences-between-real-dom-virtual-dom-and-shadow-dom-il2c8oslx","name":"Understanding the Differences Between Real DOM, Virtual DOM, and Shadow DOM"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/how-to-publish-a-react-component-as-a-package-to-npm-c7hgyqjld","name":"How to Publish a React Component as a Package to Npm"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/building-a-pricing-page-and-charging-visitors-a-nextjs-guide--bgmaahewq","name":"🔥 Building a pricing page and charging visitors — A NextJS Guide 🤯 🤯"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/creating-a-node-js-server-with-postgres-and-knex-on-express-vmcvnk5rz","name":"Creating a Node.js Server With Postgres and Knex on Express"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/node-js-background-jobs-for-modern-developers-interview-with-startups-of-the-year-nominee-defer-znloatcfa","name":"Node.js Background Jobs for Modern Developers – Interview With Startups of the Year Nominee, Defer"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/hacking-time-management-and-task-prioritization-2lsunoe3u","name":"Hacking Time Management and Task Prioritization"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/web-scraping-using-a-headless-browser-in-nodejs-wb9ulsav8","name":"Web scraping using a headless browser in NodeJS"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/exploring-the-shap-e-3d-model-generator-s0sd9qt8o","name":"Exploring the Shap-e 3D Model Generator"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/angular-16-a-new-way-to-get-route-information-in-angular-icf7witfg","name":"Angular 16: A New Way to Get Route Information in Angular"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/understanding-chakra-ui-4qheyz3cc","name":"Understanding Chakra UI"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/sveltekit-and-appwrite-cloud-how-to-build-a-list-app-lnsoky6qc","name":"Sveltekit and Appwrite Cloud: How to build a list app"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/docker-for-beginners-containerizing-a-nextjs-application-7u2cecxwu","name":"Docker for Beginners: Containerizing a Nextjs Application"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/world-s-worst-tech-employers-a5bkfakew","name":"World’s Worst Tech Employers"}]},{"@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":"Hacker Noon","item":"https://daily.dev/sources/hackernoon"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/hackernoon/best-of"},{"@type":"ListItem","position":5,"name":"July 2023"}]}]} ```