--- title: Best developer posts of 2022 | daily.dev description: The most upvoted daily.dev posts of 2022, curated by the daily.dev community. canonical: https://daily.dev/posts/best-of/2022 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/posts/best-of/2022 og:type: website og:site_name: daily.dev og:title: Best developer posts of 2022 | daily.dev og:description: The most upvoted daily.dev 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 daily.dev — 2022 1. 1 [](https://daily.dev/posts/the-companion-widget-wkf1r6kin "The Companion Widget") Article daily.dev · 4y The Companion Widget The companion allows you to upvote, comment and bookmark articles from the daily.dev feed directly on an article! Have a play with the companion app, then leave a comment letting us know what you think! 2.3K 316 2. 2 [](https://daily.dev/posts/i-made-100-css-loaders-for-your-next-project-uhgzkxrmh "I made 100 CSS loaders for your next project") Article Community Picks · 4y I made 100 CSS loaders for your next project Each loader is done using a single element. Add a class to your div and start loading! Table of content The Classic The Infinity The Dots The Bars The Spinner The Continuous The Progress The Wobbling The Shapes The Pulsing That's it! 1.6K 97 3. 3 [](https://daily.dev/posts/javascript-visualized-the-javascript-engine-fev6jy-eo "JavaScript Visualized: the JavaScript Engine") Article Community Picks · 4y JavaScript Visualized: the JavaScript Engine JavaScript is based on the V8 engine used by Node.js and Chromium-based browsers. The engine tries to avoid parsing code that's not necessary right away. The optimized machine code can simply be re-used in order to speed things up. V8 is open source and has some great documentation on how it works under the hood. 1K 35 4. 4 [](https://daily.dev/posts/free-open-source-tailwind-css-components-tqkhcla01 "Free Open Source Tailwind CSS Components") Article Changelog · 4y Free Open Source Tailwind CSS Components HyperUI is a collection of free Tailwind CSS components that can be used in your next project. With a range of components, you can build your next marketing website, admin dashboard, ecommerce store and much more. HyperUI is an open source collection of Tailwind components. 1K 84 5. 5 [](https://daily.dev/posts/fantastic-css-border-animation-sqthqwkmj "Fantastic CSS border animation") Article Medium · 4y Fantastic CSS border animation In this article we will use CSS to create a variety of wonderful border effects. The most commonly used one is solid , dashed which appears in the picture above dashed. CSS border also supports none , hidden , dotted , double , groove , ridge , inset , and outset other styles. 846 37 6. 6 [](https://daily.dev/posts/modern-web-app-design-patterns-rq-gjl21w "Modern Web App Design Patterns") Article Community Picks · 4y Modern Web App Design Patterns Design patterns are descriptive, not prescriptive. They can guide you when facing a problem other developers have encountered many times before. They are not a blunt tool for jamming into every scenario. Patterns.dev aims to be a catalog of patterns (for increasing awareness) rather than a checklist (what you must do) 830 39 7. 7 [](https://daily.dev/posts/design-patterns-mxrfapckc "Design Patterns") Article Community Picks · 4y Design Patterns Design Patterns Design patterns are a toolkit of solutions to common problems in software design. They define a common language that helps your team communicate more efficiently. They can be categorized by their intent and divided into three groups. 828 42 8. 8 [](https://daily.dev/posts/developer-roadmaps-aimvj-l2n "Developer Roadmaps") Article Community Picks · 4y Developer Roadmaps Developer Roadmaps roadmap.sh is a community effort to create roadmaps, guides and other educational content to help guide the developers in picking up the path and guide their learnings. The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month. We are working on a solution for teams. Help us shape the platform. The project has a solution to build and build a new software that will be available. 767 44 9. 9 [](https://daily.dev/posts/netflix-system-design--backend-architecture-g2q-lrrvj "Netflix System Design- Backend Architecture") Article Community Picks · 4y Netflix System Design- Backend Architecture Netflix accounts for about 15% of the world's internet bandwidth traffic. Netflix operates in two clouds Amazon Web Services and Open Connect (Netflix content delivery network) The overall Netflix system consists of three main parts. Zuul as its API gateway is built to allow dynamic routing, traffic monitoring, and security, resilience to The Netty handlers on the front and back of the filters. 742 32 10. 10 [](https://daily.dev/posts/advanced-typescript-wcrx-pslb "Advanced TypeScript") Article Community Picks · 4y Advanced TypeScript Mapped types are a great way of transforming existing types into new types. We create the helper type that takes a type and maps all properties to be of return type. 707 25 11. 11 [](https://daily.dev/posts/the-modern-javascript-tutorial-gay6khtgj "The Modern JavaScript Tutorial") Article Hacker News · 4y The Modern JavaScript Tutorial 707 41 12. 12 [](https://daily.dev/posts/say-bye-bye-to-bad-javascript-practices-yrf1pq4d9 "Say bye bye to bad javascript practices") Article Medium · 4y Say bye bye to bad javascript practices Some small practices in programming can have a continuously negative impact on the code we write and the product we create as the end result. It’s important to share what they are and why you should avoid them at all costs. Here are a few tips and reminders to help you write code comments like a pro. 673 66 13. 13 [](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 14. 14 [](https://daily.dev/posts/javascript-patterns-workshop-q5cezwatt "JavaScript Patterns Workshop") Article Community Picks · 4y JavaScript Patterns Workshop The goal is to raise awareness to certain patterns, the problems they solve, and their implementation. The patterns covered on this website and in the workshop can guide you when facing a problem other developers have encountered many times before, but are not a blunt tool for jamming into every scenario. 655 47 15. 15 [](https://daily.dev/posts/linux-commands-lxa3hnkwq "LINUX Commands") Article Community Picks · 4y LINUX Commands List your jobs. & Run a job in the background. Suspend the current (foreground) job. Unsuspend a job: bring it into the foreground. bg Make a suspended job run in thebackground. ls List files in a directory. mv Rename (“move”) a file. rmdir Delete (remove) an empty directory and its contents. shred Completely erase a file when the file is deleted. 624 29 16. 16 [](https://daily.dev/posts/the-complete-modern-react-developer-2022-sf0bdvinq "The Complete Modern React Developer 2022") Article Hashnode · 4y The Complete Modern React Developer 2022 This course will give you the skills and knowledge to become a Software Developer across the full stack. We will be building a super basic Twitter clone that has CRUD functionality for posting, reading and deleting tweets. In this section you will learn how to setup a Node backend using both Express.js and Nestjs. And as a bonus you will also learn some DevOps when we put a MongoDB and Postgres database inside of a Docker container. 586 35 17. 17 [](https://daily.dev/posts/how-https-works-jkkouacfc "How HTTPS works") Article Community Picks · 4y How HTTPS works Follow the adventures of Certificat, Browserbird, and Compugter as they explain why HTTPS is crucial for the future of the web and how it all works together. Get to know HTTPS and why it is essential to your privacy. 575 40 18. 18 [](https://daily.dev/posts/bun-is-a-fast-all-in-one-javascript-runtime-hca8xwb6f "Bun is a fast all-in-one JavaScript runtime") Article Changelog · 4y Bun is a fast all-in-one JavaScript runtime Bun is a modern JavaScript runtime like Node or Deno. It was built from scratch to focus on three main things:Start fast (it has the edge in mind) New levels of performance (extending JavaScriptCore, the engine) Being a great and complete tool (bundler, transpiler, package manager) 550 20 19. 19 [](https://daily.dev/posts/the-60-hottest-front-end-tools-of-2021-css-tricks-he-fmztrl "The 60 Hottest Front-end Tools of 2021 | CSS-Tricks") Article CSS-Tricks · 5y The 60 Hottest Front-end Tools of 2021 | CSS-Tricks The Web Tools Weekly newsletter archives have been compiled into a list of the 60 most popular front-end tools of the past year. I’m sure there are at least one or two listed here that you can start using in your projects today. Some of these tools are super-practical, while others probably only made this list due to curiosity. 548 36 20. 20 [](https://daily.dev/posts/how-to-fetch-api-data-in-react-like-a-pro-yxoo542tx "How to Fetch API Data in React Like a Pro") Article Bits and Pieces · 4y How to Fetch API Data in React Like a Pro How to Fetch API Data in React Like a Pro Building applications the user use love is not an easy task. The technique we are going to talk about is known as render as you fetch. This simple technique is also suggested by React itself while fetching data. 541 41 21. 21 [](https://daily.dev/posts/12-apis-that-you-as-a-developer-will-love-it-fslrjddga "12 APIs that you as a developer will love it") Article Community Picks · 4y 12 APIs that you as a developer will love it API stands for “Application Programming Interface,” which is a way to communicate between different software services. I created a list of cool, free and easy to use APIs that I like to use, that I will share with you. I hope you like it! 538 30 22. 22 [](https://daily.dev/posts/javascript-visualized-event-loop-k-rdpazu9 "JavaScript Visualized: Event Loop") Article Community Picks · 4y JavaScript Visualized: Event Loop JavaScript is single-threaded: only one task can run at a time. When we invoke a function, it gets added to something called the call stack. The call stack is part of the JS engine, this isn't browser specific. 533 13 23. 23 [](https://daily.dev/posts/beautify-github-profile---create-a-beautiful-and-attractive-github-profile-very-easy-lzwj3cjeo "Beautify Github Profile - Create a beautiful and attractive github profile very easy") Article Product Hunt · 4y Beautify Github Profile - Create a beautiful and attractive github profile very easy 530 33 24. 24 [](https://daily.dev/posts/full-docker-course-free--8eq24dgjw "Full Docker Course [FREE]") Article Community Picks · 4y Full Docker Course \[FREE\] The course is a mix of animated theoretic explanations and hands-on demo’s to follow along. You will have a deep understanding of the concepts and a great overall big picture of how Docker is used in the whole software development process. It's a handy way to quickly look something up or refresh your knowledge at work. 512 8 25. 25 [](https://daily.dev/posts/an-interactive-guide-to-flexbox-cki6efp-g "An Interactive Guide to Flexbox") Article Josh W Comeau · 4y An Interactive Guide to Flexbox Flexbox is a remarkably powerful layout mode. It uses fluid principles to create a layout that flows seamlessly. When we truly understand how it works, we can build dynamic layouts that respond automatically. We'll build an intuition for how the Flexbox algorithm works, by learning about each of these properties. 508 42 [See all daily.dev archives](/posts/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/posts/best-of/2022#page","url":"https://daily.dev/posts/best-of/2022","name":"Best Developer Posts of 2022","description":"The most upvoted daily.dev posts of 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/posts/best-of/2022#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/the-companion-widget-wkf1r6kin","name":"The Companion Widget"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/i-made-100-css-loaders-for-your-next-project-uhgzkxrmh","name":"I made 100 CSS loaders for your next project"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/javascript-visualized-the-javascript-engine-fev6jy-eo","name":"JavaScript Visualized: the JavaScript Engine"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/free-open-source-tailwind-css-components-tqkhcla01","name":"Free Open Source Tailwind CSS Components"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/fantastic-css-border-animation-sqthqwkmj","name":"Fantastic CSS border animation"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/modern-web-app-design-patterns-rq-gjl21w","name":"Modern Web App Design Patterns"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/design-patterns-mxrfapckc","name":"Design Patterns"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/developer-roadmaps-aimvj-l2n","name":"Developer Roadmaps"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/netflix-system-design--backend-architecture-g2q-lrrvj","name":"Netflix System Design- Backend Architecture"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/advanced-typescript-wcrx-pslb","name":"Advanced TypeScript"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/the-modern-javascript-tutorial-gay6khtgj","name":"The Modern JavaScript Tutorial"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/say-bye-bye-to-bad-javascript-practices-yrf1pq4d9","name":"Say bye bye to bad javascript practices"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/system-design-the-complete-course-g81uw5ava","name":"System Design: The complete course"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/javascript-patterns-workshop-q5cezwatt","name":"JavaScript Patterns Workshop"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/linux-commands-lxa3hnkwq","name":"LINUX Commands"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/the-complete-modern-react-developer-2022-sf0bdvinq","name":"The Complete Modern React Developer 2022"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/how-https-works-jkkouacfc","name":"How HTTPS works"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/bun-is-a-fast-all-in-one-javascript-runtime-hca8xwb6f","name":"Bun is a fast all-in-one JavaScript runtime"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/the-60-hottest-front-end-tools-of-2021-css-tricks-he-fmztrl","name":"The 60 Hottest Front-end Tools of 2021 | CSS-Tricks"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/how-to-fetch-api-data-in-react-like-a-pro-yxoo542tx","name":"How to Fetch API Data in React Like a Pro"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/12-apis-that-you-as-a-developer-will-love-it-fslrjddga","name":"12 APIs that you as a developer will love it"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/javascript-visualized-event-loop-k-rdpazu9","name":"JavaScript Visualized: Event Loop"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/beautify-github-profile---create-a-beautiful-and-attractive-github-profile-very-easy-lzwj3cjeo","name":"Beautify Github Profile - Create a beautiful and attractive github profile very easy"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/full-docker-course-free--8eq24dgjw","name":"Full Docker Course [FREE]"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/an-interactive-guide-to-flexbox-cki6efp-g","name":"An Interactive Guide to Flexbox"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Explore","item":"https://daily.dev/posts"},{"@type":"ListItem","position":3,"name":"Best of","item":"https://daily.dev/posts/best-of"},{"@type":"ListItem","position":4,"name":"2022"}]}]} ```