--- title: Best developer posts — August 2021 | daily.dev description: The most upvoted daily.dev posts from August 2021, curated by the daily.dev community. canonical: https://daily.dev/posts/best-of/2021/08 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/posts/best-of/2021/08 og:type: website og:site_name: daily.dev og:title: Best developer posts — August 2021 | daily.dev og:description: The most upvoted daily.dev posts from August 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 — August 2021 1. 1 [](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 2. 2 [](https://daily.dev/posts/no-more-import-in-react-oyoumwmjk "No More ../../../ Import in React") Article DEV · 5y No More ../../../ Import in React Absolute imports make the component more readable and clean. Steps to configure absolute Import in Create React App without any third-party packages. For JET Brains IDEs like WebStorm, PhpStorm, RubyMine and etc, we need to add some additional configurations as below. 194 15 3. 3 [](https://daily.dev/posts/top-5-javascript-animation-libraries-2021-ceqimpfxk "Top 5 JavaScript animation libraries 2021") Article DEV · 5y Top 5 JavaScript animation libraries 2021 Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. Vivus allows you to animate SVGs, giving them the appearence of being drawn. Typeit.js allows creating awesome typing animation in your website. ScrollOut detects changes in scroll for reveal, parallax, and CSS Variable effects. 187 21 4. 4 [](https://daily.dev/posts/100-things-you-should-know-as-a-software-engineer-uwi-mb-am "100 Things You Should Know as a Software Engineer") Article Hashnode · 5y 100 Things You Should Know as a Software Engineer Premature optimization is the root of all evil. It is quite rare that you ever need to build something from scratch. Use code comments to explain why you are doing something. 100% line/branch coverage doesn't mean your code is bug-free. Write your tests to covers all functional requirements, not to cover lines/branches. 180 12 5. 5 [](https://daily.dev/posts/6-awesome-css-layout-generators-n3cv8p4-m "🔥 6 Awesome CSS Layout Generators") Article Hashnode · 5y 🔥 6 Awesome CSS Layout Generators 6 awesome CSS layout generators/tools that will help you in rapid prototyping and front-end development of CSS layouts for your projects. Quickly design web layouts, and get HTML and CSS code. Learn CSS Grid visually and build web layouts with this interactive CSS Grid Generator. 141 20 6. 6 [](https://daily.dev/posts/planner-a-beautiful-open-source-task-management-app-n0joujl0b "Planner: A Beautiful Open-Source Task Management App") Article It's Foss · 5y Planner: A Beautiful Open-Source Task Management App Planner is an open-source to-do list app that helps you organize and collect your ideas/tasks. It was originally tailored for a seamless experience with elementary OS, hence, for the best user experience, you can try installing an elementary OS theme and icons. Unfortunately, it is not available for any other platform but Linux. 136 3 7. 7 [](https://daily.dev/posts/skills-required-to-be-a-full-stack-developer-a-checklist--djilbesu "Skills required to be a full stack developer: a checklist") Article DEV · 5y Skills required to be a full stack developer: a checklist The skills list required to be a full stack developer is long and it can be hard to know exactly what skills you need. The often shared online resource for this kind of thing is roadmap.sh but, while it is extensive, I think the amount covered here is too much to be helpful to new developers. I have my own list, it’s a bare minimum required skills list and it looks like this: 120 9 8. 8 [](https://daily.dev/posts/noteli---an-open-source-cli-tool-to-take-notes-kud1d-i2g "Noteli - An open source CLI tool to take notes") Article Product Hunt · 5y Noteli - An open source CLI tool to take notes Noteli is an Open Source CLI tool made especially for note-taking. Built using powers of TypeScript and security of Auth0 with MongoDB. Noteli would help developers to take notes quickly from the shell without wasting time through GUI :P Embed Collect Embed collect. 113 7 9. 9 [](https://daily.dev/posts/7-trending-projects-on-github-for-javascript-developers-wg-97wojj "7 Trending projects on GitHub for JavaScript developers") Article Hashnode · 5y 7 Trending projects on GitHub for JavaScript developers Web Development for Beginners is a 12-week, 24-lesson curriculum all about JavaScript, CSS, and HTML basics. D3 is a JavaScript library for visualizing data using web standards. Mammoth is designed to convert .docx documents, such as those created by Microsoft Word, Google Docs, and LibreOffice, and convert them to HTML. 113 2 10. 10 [](https://daily.dev/posts/essential-concepts-in-js-dn9-wydba "Essential Concepts in JS") Article DEV · 5y Essential Concepts in JS Javascript is a language that can do almost anything you want it to do today with much ease. It is different from C/C++ in that it is interpreted line-by-line, rather than a program being read at once. It can only perform one single task at a time. It queues different tasks into different queues based on type. 108 5 11. 11 [](https://daily.dev/posts/14-best-chrome-developer-tools-2021-6cpmqnpaj "14 Best Chrome Developer Tools 2021") Article Honeypot · 5y 14 Best Chrome Developer Tools 2021 Google Chrome is one of the most popular and reliable browsers. Chrome’s biggest selling point is its smooth integration with other Google apps. With this list, you’ll discover a few more gems to add to your toolbar. Web Developer extension is like a pocket knife, you can inspect elements and start debugging your website(s) 107 19 12. 12 [](https://daily.dev/posts/best-vs-code-setup-9ozh9vgay "Best VS Code setup") Article DEV · 5y Best VS Code setup This story is intended for Javascript or Typescript dev. It includes extensions which I describe, but most likely you can use all of them. I have been spending a lot ( so much ) time creating the best coding setup. It's free to use, but you will have the best opportunity to make your coding process so lovely. 105 11 13. 13 [](https://daily.dev/posts/best-react-developer-tools-2021-lsrba5uqz "Best React Developer Tools 2021") Article Honeypot · 5y Best React Developer Tools 2021 Europe's IT worker shortage is projected to grow, meaning job openings for React developers are on the up and up. It's always important to stay up to date with the latest in the world of React to be a competitive player in the job market. Let's talk about what React developer tools are being used in 2021 and why you should include them in your stack. 102 8 14. 14 [](https://daily.dev/posts/the-greatest-react-developer-i-ever-met-ebjxm24wf "The Greatest React Developer I Ever Met") Article JavaScript in Plain English · 5y The Greatest React Developer I Ever Met Mohammad Faisal shares the story of one of the greatest engineers he has seen in his life. He was not the fastest but he cared about best practices. His code was so beautiful that a junior developer had absolutely no problem understanding what was going on there. He left the company due to conflict with management. 101 12 15. 15 [](https://daily.dev/posts/new-in-chrome-93-taqoz3wio "New in Chrome 93") Article Chrome Developers · 5y New in Chrome 93 Chrome 93 will ship on September 21\. New PWA features include CSS Module Scripts and Multi-Screen Window Placement API. Installed PWAs can register as URL handlers, making it possible for users to jump straight into your PWA. The PWA Summit is coming up October 6-7. 95 4 16. 16 [](https://daily.dev/posts/you-want-enabling-css-selectors-not-disabling-ones-5ydaz-l2o "You want enabling CSS selectors, not disabling ones") Article CSS-Tricks · 5y You want enabling CSS selectors, not disabling ones An enabling selector is what I call a selector that does a job without disabling the particular rule. Let's say we have list items and we want to add the margin to every one except the last one. First, we add margin-bottom to all elements. Then, we disable the bottom margin on the last element. 93 5 17. 17 [](https://daily.dev/posts/github-s-engineering-team-has-moved-to-codespaces-y1q66fqdg "GitHub’s Engineering Team has moved to Codespaces") Article GitHub Blog · 5y GitHub’s Engineering Team has moved to Codespaces GitHub is making Codespaces available to Team and Enterprise Cloud plans on GitHub.com. Codespaces provides software teams a faster, more collaborative development environment in the cloud. GitHub’s Engineering Team has moved to Codespaces. Adopting Codespaces has provided us with an opportunity to improve our overall development experience. 92 9 18. 18 [](https://daily.dev/posts/front-end-system-design-guide-nbutlkc-v "Front-End System Design Guide") Article JavaScript in Plain English · 5y Front-End System Design Guide System Design is the process of designing the elements of a system such as the architecture, modules and components. It also includes the different interfaces of those components and the data that goes through that system. The purpose of the System Design process is to provide sufficient detailed data and information about the system and its system elements. 84 1 19. 19 [](https://daily.dev/posts/from-zero-to-web-developer-hwtqizguv "From zero to Web developer") Article Hashnode · 5y From zero to Web developer Web development is the work involved in developing a website or a web application. There are multiple paths you can take while learning web development. This is the one I would take if I had to do it all over again. These steps are going from the very beginning, so it's suited for beginners. 84 8 20. 20 [](https://daily.dev/posts/javascript-clean-code-tips-good-practices-xk-a0rxzd "Javascript Clean Code Tips & Good Practices") Article Hashnode · 5y Javascript Clean Code Tips & Good Practices Code should be written in such a way that is self-explanatory, easy to understand, and easy to modify or extend for the new features. Don't turn naming into a riddle game. Use default arguments instead of short-circuiting or conditionals. The smaller the function the better it is to understand and refactor. 77 11 21. 21 [](https://daily.dev/posts/mongodb-complete-guide--e-v3qpaz "MongoDB — Complete Guide") Article Faun · 5y MongoDB — Complete Guide MongoDB is a cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with optional schemas. MongoDB is built for modern application developers and for the cloud era. NoSQL is used to store structured as well as unstructured data. 77 5 22. 22 [](https://daily.dev/posts/microfrontends-with-react-0dno1mmxp "Microfrontends With React") Article DEV · 5y Microfrontends With React Micro Frontends allows you to develop, deploy and maintain applications individually. Like Uber where booking and payment services are individually developed and deployed. It means, your application is divided into various individual applications and easy to maintain. We will see a React Website using Micro Frontends where we create three applications, Blogs App, Header App and Container App.Please download full source code from our GitHub. 76 5 23. 23 [](https://daily.dev/posts/i-built-a-saas-startup-in-2-months-here-s-what-i-learned--aebkt9hb8 "I Built A SaaS Startup In 2 Months, Here's What I Learned.") Article Hashnode · 5y I Built A SaaS Startup In 2 Months, Here's What I Learned. Upsocial aims to be an all-in-one social media dashboard built for content creators. It uses social media API's to track and store your profile and content growth over time, and display that information in a simple dashboard. Upsocial uses all of my favourite technologies, and is 100% serverless. It takes advantage of some of the same technologies that Hashnode utilizes too! 76 3 24. 24 [](https://daily.dev/posts/how-to-decide-css-units-for-responsive-website--ck19a-r8q "How to decide CSS units for responsive website?") Article DEV · 5y How to decide CSS units for responsive website? Px unit is fixed in size no matter what screen size you choose. If there's no defined parent then by default body is considered the parent. vw stands for the viewport width which means vw is always relative to the 1% of the width of root, irrespective of parent element's width. vh stands for viewprot height like vw it's also relative to 1% height of root/document. 76 5 25. 25 [](https://daily.dev/posts/how-to-link-javascript-to-html-qrk-ez75y "How to Link JavaScript to HTML") Article Honeypot · 5y How to Link JavaScript to HTML JavaScript (JS) empowers web developers to create dynamic web experiences. Utilising Javascript in HTML when developing dynamic web app experiences is a key skill of web devs. HTML’s script tag makes linking JavaScript to HTML simple. The ability to link JS to HTML has made the web a truly dynamic place where anything is possible. 72 14 [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/08#page","url":"https://daily.dev/posts/best-of/2021/08","name":"Best Developer Posts — August 2021","description":"The most upvoted daily.dev posts from August 2021, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/posts/best-of/2021/08#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/writing-clean-javascript-es6-edition-djk0jktgq","name":"Writing Clean JavaScript — ES6 Edition"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/no-more-import-in-react-oyoumwmjk","name":"No More ../../../ Import in React"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/top-5-javascript-animation-libraries-2021-ceqimpfxk","name":"Top 5 JavaScript animation libraries 2021"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/100-things-you-should-know-as-a-software-engineer-uwi-mb-am","name":"100 Things You Should Know as a Software Engineer"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/6-awesome-css-layout-generators-n3cv8p4-m","name":"🔥 6 Awesome CSS Layout Generators"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/planner-a-beautiful-open-source-task-management-app-n0joujl0b","name":"Planner: A Beautiful Open-Source Task Management App"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/skills-required-to-be-a-full-stack-developer-a-checklist--djilbesu","name":"Skills required to be a full stack developer: a checklist"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/noteli---an-open-source-cli-tool-to-take-notes-kud1d-i2g","name":"Noteli - An open source CLI tool to take notes"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/7-trending-projects-on-github-for-javascript-developers-wg-97wojj","name":"7 Trending projects on GitHub for JavaScript developers"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/essential-concepts-in-js-dn9-wydba","name":"Essential Concepts in JS"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/14-best-chrome-developer-tools-2021-6cpmqnpaj","name":"14 Best Chrome Developer Tools 2021"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/best-vs-code-setup-9ozh9vgay","name":"Best VS Code setup"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/best-react-developer-tools-2021-lsrba5uqz","name":"Best React Developer Tools 2021"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/the-greatest-react-developer-i-ever-met-ebjxm24wf","name":"The Greatest React Developer I Ever Met"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/new-in-chrome-93-taqoz3wio","name":"New in Chrome 93"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/you-want-enabling-css-selectors-not-disabling-ones-5ydaz-l2o","name":"You want enabling CSS selectors, not disabling ones"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/github-s-engineering-team-has-moved-to-codespaces-y1q66fqdg","name":"GitHub’s Engineering Team has moved to Codespaces"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/front-end-system-design-guide-nbutlkc-v","name":"Front-End System Design Guide"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/from-zero-to-web-developer-hwtqizguv","name":"From zero to Web developer"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/javascript-clean-code-tips-good-practices-xk-a0rxzd","name":"Javascript Clean Code Tips & Good Practices"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/mongodb-complete-guide--e-v3qpaz","name":"MongoDB — Complete Guide"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/microfrontends-with-react-0dno1mmxp","name":"Microfrontends With React"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/i-built-a-saas-startup-in-2-months-here-s-what-i-learned--aebkt9hb8","name":"I Built A SaaS Startup In 2 Months, Here's What I Learned."},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/how-to-decide-css-units-for-responsive-website--ck19a-r8q","name":"How to decide CSS units for responsive website?"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/how-to-link-javascript-to-html-qrk-ez75y","name":"How to Link JavaScript to HTML"}]},{"@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":"August 2021"}]}]} ```