--- title: Best developer posts of 2021 | daily.dev description: The most upvoted daily.dev posts of 2021, curated by the daily.dev community. canonical: https://daily.dev/posts/best-of/2021 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/posts/best-of/2021 og:type: website og:site_name: daily.dev og:title: Best developer posts of 2021 | daily.dev og:description: The most upvoted daily.dev posts of 2021, 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 — 2021 1. 1 [](https://daily.dev/posts/new-sidebar---xy--p5tn "New sidebar 🔥") Article daily.dev Changelog · 5y New sidebar 🔥 daily.dev is introducing a completely re-designed sidebar for daily.dev. With the new sidebar, you can reach almost every part of the app in one click. We've invested a lot of time and effort into this new layout and we're sure you'll love it. 1.1K 178 2. 2 [](https://daily.dev/posts/devcard--w5oh-hzey "#DevCard 🤩") Article daily.dev Changelog · 5y #DevCard 🤩 Show off how many articles you've read, your top read topics and your favorite publications. Share your DevCard using the hashtag #DevCard.Generate your #Dev card here: https://app.daily.dev/devcard. New #Devcard will appear at the bottom of the page. 654 113 3. 3 [](https://daily.dev/posts/17-killer-websites-for-web-developers-wlofd5xb7 "17 Killer Websites for Web Developers") Article JavaScript in Plain English · 5y 17 Killer Websites for Web Developers The Unsplash API is a modern JSON API that surfaces all of the info you’ll need to build any experience for your users. Embeddable Widget Apps for Notion is a tool to add 3rd party apps to your Notion Document. Smart Mockup is the fastest web-based mockup tool. 635 36 4. 4 [](https://daily.dev/posts/aura-theme-v2-0-0-is-out-now--vxeug565s "Aura Theme v2.0.0 is out now! 🥳 🎉") Article DEV · 5y Aura Theme v2.0.0 is out now! 🥳 🎉 The entire project was recreated from scratch using TypeScript Color schemes have been improved Added Aura CLI Added Aura API New ports have been added, the current full list of ports is: Visual Studio Code, Sublime Text, Windows Terminal andGNOME Terminal. You can reach me here or on GitHub if you need some help. 636 73 5. 5 [](https://daily.dev/posts/welcome-to-fleet--d9i97wouk "Welcome to Fleet!") Article JetBrains · 5y Welcome to Fleet! Fleet is a lightweight editor but with a twist. It provides syntax highlighting, simple code completion, and all the things you’d expect from an editor. But wait, there’s more! Fleet is also a fully functional IDE bringing smart completion, refactorings, navigation, debugging, and everything else. 612 82 6. 6 [](https://daily.dev/posts/adding-the-daily-devcard-to-your-github-profile-dxe0jkvmp "Adding the daily DevCard to your GitHub profile") Article daily.dev · 5y Adding the daily DevCard to your GitHub profile Ole-Martin created a GitHub action to pull the latest DevCard automatically. In this article, we’ll show you how you can leverage his amazing action to showcase your DevCard on your GitHub profile as well. The easiest way to add your Dev card is by visiting the DevCard page and generating your card. 608 89 7. 7 [](https://daily.dev/posts/clean-architecture-on-frontend-sew4z9pjr "Clean Architecture on Frontend") Article DEV · 5y Clean Architecture on Frontend The Clean Architecture is a way of separating responsibilities and parts of functionality according to their proximity to the application domain. It is often referred to as a three-layer architecture, because the functionality in it is divided into layers. In this post we'll talk about what the clean architecture is in general and get familiar with such concepts as domain, use case and application layers. Then we'll discuss how this applies to the frontend and whether it's worth it at all. 369 25 8. 8 [](https://daily.dev/posts/my-custom-css-reset-5w1hsb5j "My Custom CSS Reset") Article Josh W Comeau · 5y My Custom CSS Reset This tutorial explains how to use your own custom CSS reset. It includes all of the little tricks I've discovered to improve both the user experience and the CSS authoring experience. We'll dig into each rule, and you'll learn what it does and why you might want to use it. 366 28 9. 9 [](https://daily.dev/posts/writing-clean-javascript-es6-edition-djk0jktgq "Writing Clean JavaScript — ES6 Edition") Article Geek Culture · 5y Writing Clean JavaScript — ES6 Edition Clean code is not just code that works, but rather code that can be easily read, reused, and refactored by others. This article focuses on writing clean JavaScript ES6 code which is not framework-specific. Most of the mentioned examples can apply to almost any other programming language. 326 29 10. 10 [](https://daily.dev/posts/frontend-interview-cheatsheet-that-helped-me-get-offers-from-amazon-linkedin-mkrzeakvl "🔥 Frontend Interview Cheatsheet That Helped Me Get Offers From Amazon & LinkedIn") Article ITNEXT · 5y 🔥 Frontend Interview Cheatsheet That Helped Me Get Offers From Amazon & LinkedIn Vitalii Shevchuk: Frontend Interview Cheatsheet That Helped Me Get Offers From Amazon & LinkedIn. If you are preparing for a frontend interview and want to quickly refresh your frontend domain knowledge, this cheatsheet will save you a lot of time. Enjoy reading, and feel free to dive deeper by clicking the topic link. 322 7 11. 11 [](https://daily.dev/posts/4-javascript-concepts-that-every-developer-should-know-whm7kjtpr "4 JavaScript Concepts That Every Developer Should Know") Article JavaScript in Plain English · 5y 4 JavaScript Concepts That Every Developer Should Know In this post, I will discuss four of the most important JavaScript concepts. IIFE IIFE, aka, Immediately Invoked Function Expression, are JavaScript functions defined as expressions that are immediately invoked and executed as soon as they are defined. Scope Scope determines which variables you have (or do not have) access to in different contexts. Closures are helpful to employ when you would like to pass variables, arrays, or methods from an outer function to an inner function. 315 14 12. 12 [](https://daily.dev/posts/tailwind-css-v3-0-tailwind-css-knchiuxts "Tailwind CSS v3.0 – Tailwind CSS") Article Hacker News · 5y Tailwind CSS v3.0 – Tailwind CSS Tailwind CSS v3.0 is here, bringing incredible performance gains, huge workflow improvements, and a seriously ridiculous number of new features. Every color out of the box, including all of the extended palette colors like cyan, rose, fuchsia, and lime, and fifty shades of grey gray. Colored box shadows for fun glow and reflection effects, and more natural shadows on colored backgrounds. 309 25 13. 13 [](https://daily.dev/posts/announcing-daily-dev-3-0--afklgabhb "Announcing daily.dev 3.0 🦄") Article daily.dev Changelog · 5y Announcing daily.dev 3.0 🦄 Daily.dev 3.0 is the fastest version we have ever created. The browser extension is getting a serious revamp with a brand new UI. The new design aims to improve accessibility and make it easier to use daily.dev on both desktop, tablet, and mobile. In the coming weeks, we will ship a new set of features and improvements. 308 38 14. 14 [](https://daily.dev/posts/10-projects-you-can-do-to-become-a-frontend-master-mh-6nunzd "10+ Projects You Can Do to Become a Frontend Master") Article DevDojo · 5y 10+ Projects You Can Do to Become a Frontend Master Learn about firebase, authentication, real-time database and etc. by building a chat app. Build a blog and share content regularly to increase your online presence. Learn about styled-components, routing in Next JS, implementing MDX, and using dynamic routes. Use Spotify 2.0, your own Spotify version. 281 23 15. 15 [](https://daily.dev/posts/es6-handbook-the-complete-guide-dsyovcz-z "ES6 Handbook: The Complete Guide") Article DevDojo · 5y ES6 Handbook: The Complete Guide This blog is all about ES6\. It includes all the topics related with examples. Before reading further, I want to specify that this was not a blog post initially. These are just my personal notes that I use as a reference guide, so I apologize for any misspells here :) 278 11 16. 16 [](https://daily.dev/posts/typescript-4-4-cheat-sheet-d2cdnfpyx "TypeScript 4.4 Cheat Sheet") Article SitePen · 5y TypeScript 4.4 Cheat Sheet CNN.com will feature iReporter photos in a weekly Travel Snapshots gallery. Visit CNN.com/Travel each week for a new gallery of snapshots from around the world. Visit iReport.com for a weekly snapshot of the world's most popular destinations. iReport: Share your photos of the week with us. 260 9 17. 17 [](https://daily.dev/posts/blog---next-js-12-qp57ir0e "Blog - Next.js 12") Article Next.js · 5y Blog - Next.js 12 Next.js 12 includes a brand new Rust compiler that takes advantage of native compilation. We've optimized bundling and compiling with \~3x faster refresh locally and \~5x faster builds for production. Native Next.js APIs are now supported, as well as Suspense AVIF Support. 255 22 18. 18 [](https://daily.dev/posts/7-useful-html-attributes-you-may-not-know-yjelg5jdx "7 useful HTML attributes you may not know") Article DEV · 5y 7 useful HTML attributes you may not know This is a list of HTML attributes that many beginners don't know, but that can be helpful. The multiple attribute allows the user to enter multiple values on an element. The spellcheck attribute is another global attribute that you can use to check spelling and grammar on HTML elements such as input fields. 251 18 19. 19 [](https://daily.dev/posts/learn-in-1-hour-design-patterns-2n-cekp7u "Learn in 1 Hour: Design Patterns") Article JetBrains · 5y Learn in 1 Hour: Design Patterns This week's Hour of Code is about design patterns. Design patterns are reusable templates for commonly occurring problems in software design. At JetBrains Academy, you can get an introduction to design patterns and learn five types of the most common creational patterns. Click the links below to open the educational topics that will allow you to not only read a detailed theory about a specific design pattern but also apply your skills straight to practice. 248 7 20. 20 [](https://daily.dev/posts/18-awesome-linux-themes-for-your-inspiration--vj94wnm2v "18 Awesome Linux Themes For Your Inspiration 🎨😍") Article Hashnode · 5y 18 Awesome Linux Themes For Your Inspiration 🎨😍 The other day I was browsing Reddit and bookmarked some neat custom-made, one-of-a-kind interfaces from fellow Unix users. I decided to share my findings, so you can get some inspiration, too. To find out the configuration details of each setup, click on the author's username. 245 16 21. 21 [](https://daily.dev/posts/thank-you-github-82x17kchg "Thank you, GitHub") Article GitHub Blog · 5y Thank you, GitHub I’m moving on to my next adventure, and Thomas Dohmke will be GitHub’s next CEO. I will become Chairman Emeritus, which fulfills my lifelong ambition of having a title in Latin. My heartfelt thanks to every Hubber and every developer who makes GitHub what it is, every day. 243 10 22. 22 [](https://daily.dev/posts/how-to-hack-any-website-7pldm9aa9 "How To Hack Any Website") Article System Weakness · 5y How To Hack Any Website Niveet Palan explains how to hack any website. He covers Subdomain enumeration, Authentication bypasses, IDOR vulnerability, File Inclusion, SSRF, Cross-site Scripting, Command Injection. This is the third and final installment to this series. 242 9 23. 23 [](https://daily.dev/posts/introducing-github-copilot-your-ai-pair-programmer-8c1qkefzk "Introducing GitHub Copilot: your AI pair programmer") Article GitHub Blog · 5y Introducing GitHub Copilot: your AI pair programmer GitHub Copilot is a new AI pair programmer that helps you write better code. It draws context from the code you’re working on, suggesting whole lines or entire functions. As you type, it adapts to the way you write code to help you complete your work faster. 240 21 24. 24 [](https://daily.dev/posts/advanced-javascript-design-patterns-hakr-ecpz "Advanced Javascript Design Patterns") Article DEV · 5y Advanced Javascript Design Patterns Design Patterns are the solutions to commonly occurring problems in software design. These patterns are easily re-usable and are expressive. We will be discussing all these design patterns using Javascript es6 classes. I have covered here 20+ design patterns explanations in javascript. If you wish to learnAdvanced react component patterns, please find it here. 237 5 25. 25 [](https://daily.dev/posts/how-i-structure-html-for-better-seo-results-quwh15yzv "How I Structure HTML for Better SEO Results") Article gitconnected · 5y How I Structure HTML for Better SEO Results Stephan Romhart explains how to use semantic HTML 5 tags for better machine readability. He also explains how he organize his CSS for websites without a framework. In his 20 years of web development experience, he’s developed a standard CSS approach for myself. He says that most websites can be built with the following boilerplate. 236 9 [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/2021#page","url":"https://daily.dev/posts/best-of/2021","name":"Best Developer Posts of 2021","description":"The most upvoted daily.dev posts of 2021, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/posts/best-of/2021#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/new-sidebar---xy--p5tn","name":"New sidebar 🔥"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/devcard--w5oh-hzey","name":"#DevCard 🤩"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/17-killer-websites-for-web-developers-wlofd5xb7","name":"17 Killer Websites for Web Developers"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/aura-theme-v2-0-0-is-out-now--vxeug565s","name":"Aura Theme v2.0.0 is out now! 🥳 🎉"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/welcome-to-fleet--d9i97wouk","name":"Welcome to Fleet!"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/adding-the-daily-devcard-to-your-github-profile-dxe0jkvmp","name":"Adding the daily DevCard to your GitHub profile"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/clean-architecture-on-frontend-sew4z9pjr","name":"Clean Architecture on Frontend"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/my-custom-css-reset-5w1hsb5j","name":"My Custom CSS Reset"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/writing-clean-javascript-es6-edition-djk0jktgq","name":"Writing Clean JavaScript — ES6 Edition"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/frontend-interview-cheatsheet-that-helped-me-get-offers-from-amazon-linkedin-mkrzeakvl","name":"🔥 Frontend Interview Cheatsheet That Helped Me Get Offers From Amazon & LinkedIn"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/4-javascript-concepts-that-every-developer-should-know-whm7kjtpr","name":"4 JavaScript Concepts That Every Developer Should Know"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/tailwind-css-v3-0-tailwind-css-knchiuxts","name":"Tailwind CSS v3.0 – Tailwind CSS"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/announcing-daily-dev-3-0--afklgabhb","name":"Announcing daily.dev 3.0 🦄"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/10-projects-you-can-do-to-become-a-frontend-master-mh-6nunzd","name":"10+ Projects You Can Do to Become a Frontend Master"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/es6-handbook-the-complete-guide-dsyovcz-z","name":"ES6 Handbook: The Complete Guide"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/typescript-4-4-cheat-sheet-d2cdnfpyx","name":"TypeScript 4.4 Cheat Sheet"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/blog---next-js-12-qp57ir0e","name":"Blog - Next.js 12"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/7-useful-html-attributes-you-may-not-know-yjelg5jdx","name":"7 useful HTML attributes you may not know"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/learn-in-1-hour-design-patterns-2n-cekp7u","name":"Learn in 1 Hour: Design Patterns"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/18-awesome-linux-themes-for-your-inspiration--vj94wnm2v","name":"18 Awesome Linux Themes For Your Inspiration 🎨😍"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/thank-you-github-82x17kchg","name":"Thank you, GitHub"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/how-to-hack-any-website-7pldm9aa9","name":"How To Hack Any Website"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/introducing-github-copilot-your-ai-pair-programmer-8c1qkefzk","name":"Introducing GitHub Copilot: your AI pair programmer"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/advanced-javascript-design-patterns-hakr-ecpz","name":"Advanced Javascript Design Patterns"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/how-i-structure-html-for-better-seo-results-quwh15yzv","name":"How I Structure HTML for Better SEO Results"}]},{"@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":"2021"}]}]} ```