--- title: Best DEV posts — August 2021 | daily.dev description: The most upvoted DEV posts from August 2021, curated by the daily.dev community. canonical: https://daily.dev/sources/devto/best-of/2021/08 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/devto/best-of/2021/08 og:type: website og:site_name: daily.dev og:title: Best DEV posts — August 2021 | daily.dev og:description: The most upvoted 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 DEV — August 2021 1. 1 [](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 2. 2 [](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 3. 3 [](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 4. 4 [](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 5. 5 [](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 6. 6 [](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 7. 7 [](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 8. 8 [](https://daily.dev/posts/react-cheatsheets-kexfbctrd "React CheatSheets") Article DEV · 5y React CheatSheets ReactJS uses virtual DOM based mechanism to fill in data (views) in HTML DOM. Virtual DOM works fast owning to the fact that it only changes individual DOM elements instead of reloading complete DOM every time. It provides a development environment configured for ease-of-use with minimal setup. 64 9. 9 [](https://daily.dev/posts/how-to-add-router-progress-bar-in-next-js-with-one-line-of-code--rxtzfj2vd "How to add router progress bar in Next.js with one line of code 🤯") Article DEV · 5y How to add router progress bar in Next.js with one line of code 🤯 Next.js pages are lazy-loaded so if you fetch some API or fetch data from a database it can take a few seconds to reach the second page. To let the user know that the page is being loaded we will add a progress bar at the top of the screen. 62 10 10. 10 [](https://daily.dev/posts/basic-concepts-of-node-js-sckpciecl "Basic Concepts of Node.js") Article DEV · 5y Basic Concepts of Node.js Node.js is an open-source JavaScript based platform for server-side programming built on Chrome's V8 JavaScript engine. It’s event driven architecture is perfect for applications with intense I/O (Inputs and Outputs), making it serve more clients with less hardware, which means more performance with less costs. 55 4 11. 11 [](https://daily.dev/posts/how-to-create-a-custom-toggle-switch-using-css-xz-ti5lrn "How to create a custom Toggle Switch using CSS") Article DEV · 5y How to create a custom Toggle Switch using CSS I've learned this technique by Marcus Burnette. You can check his Codepen, there are more such interesting pens. Let's create a simple customized toggle switch using CSS. Initially when I was trying to create this, I founded it very confusing because many developers have created this button but none of explain it how is this working. 49 1 12. 12 [](https://daily.dev/posts/lazy-loading-react-components-with-dynamic-imports-and-intersection-observer-wujnecshu "Lazy loading react components with dynamic imports and intersection observer") Article DEV · 5y Lazy loading react components with dynamic imports and intersection observer Lazy loading is a way by which we can load content only when they are needed. This is achieved by code-splitting, where we split our app into multiple chunks. The idea here is to serve the user with only the content they can view, and serve the other contents as and when the user visits them. 45 1 13. 13 [](https://daily.dev/posts/power-of-console-table-in-javascript--wtjfugtkr "Power of console.table() in JavaScript💪🏻😎") Article DEV · 5y Power of console.table() in JavaScript💪🏻😎 console.table() allows you to print out arrays and objects to the console in tabular form. The tabular representation of data works like a charm which means you will get greater insight into your data and you can just debug your code faster. console.table can be implemented in the following ways: Array of arrays or nested objects. 45 6 14. 14 [](https://daily.dev/posts/why-i-decided-to-stay-a-frontend-engineer-and-stopped-searching-full-stack-jobs-dnrnedva0 "Why I Decided To Stay A Frontend Engineer And Stopped Searching Full-Stack Jobs") Article DEV · 5y Why I Decided To Stay A Frontend Engineer And Stopped Searching Full-Stack Jobs In January 2018, I landed a job as a software engineer at a small company that had a frontend solution for their clients that was built with Angular. After one and a half year at this company, I noticed a trend in full-stack developers being eagerly employed by mid to large companies. So I decided to deepen my knowledge in C#/.NET in my spare time by creating leisure projects and learning online. In total I had three job application interviews that, almost predictable, all rejected me. 42 2 15. 15 [](https://daily.dev/posts/cleaner-data-fetching-with-react-query-jkx72lwtw "Cleaner data fetching with react-query") Article DEV · 5y Cleaner data fetching with react-query React-query provides a way of maintaining a global context of server state. It also provides an excellent caching solution with minimal configuration. Data-fetching is something I feel does not get the importance and limelight as say state management in the React world. If handled properly, we can even get rid of client side state management solutions. 38 5 16. 16 [](https://daily.dev/posts/top-10-must-know-javascript-functions-mzs2obbmg "Top 10 Must Know JavaScript Functions") Article DEV · 5y Top 10 Must Know JavaScript Functions Top 10 Must-Know JavaScript Functions: filter, map, shift, unshift, splice, some, some() and every. filter() filters an array based on the condition you provide and it returns a new array which contains items which satisfy those conditions. map() loops over an array and converts each item into something else. unshift() adds an element to the array and returns the new length of the array as result. every() true only if every single element in array satisfy our condition. slice() returns a shallow copy of a portion of an array into a newarray object selected from start to end. 37 4 17. 17 [](https://daily.dev/posts/really-why-react--5a6q1pcgu "Really, why React?") Article DEV · 5y Really, why React? React is a new React-based web framework from Facebook. It's been criticized for being over-engineered and hard-to-understand. One of the biggest issues is the lack of respect for web standards. It also uses a "funny tag syntax \[that\] is neither a string nor HTML" 35 8 18. 18 [](https://daily.dev/posts/20-react-tools-to-help-you-become-a-more-productive-programmer-g8kcgifh7 "20+ React Tools to Help You Become a More Productive Programmer") Article DEV · 5y 20+ React Tools to Help You Become a More Productive Programmer Reactide is an integrated development environment (IDE) for web developers using React. Too much freedom with React can lead to a giant waste of time. Belle is a UI framework that was built because of the difficulties with creating a decent UI with React in a short period. Profiler gives a summary of re-rendering of your app. 34 19. 19 [](https://daily.dev/posts/optimizing-react-apps-hardcore-edition-ha9flkyc8 "Optimizing React apps: Hardcore edition") Article DEV · 5y Optimizing React apps: Hardcore edition Enabling "loose" transformations in @babel/preset-env may make your application considerably smaller. I shaved off roughly 230.9 KB, or 16.2% from my bundle.Remove prop-types from your production bundle.Enable new JSX transform. 33 1 20. 20 [](https://daily.dev/posts/7-interesting-deprecated-javascript-features-fawws90h5 "7 interesting deprecated JavaScript features") Article DEV · 5y 7 interesting deprecated JavaScript features JavaScript has come a long way since its birth 26 years ago at Netscape. Some of these can still be used but it’s highly discouraged. There is no place for optimization inside it, since you can’t predict if variable will refer to a property or an outside variable. It violates lexical scope, making program analysis very hard or even infeasible. 32 4 21. 21 [](https://daily.dev/posts/nestjs-the-framework-of-nodejs-part-1--hbkmztdww "Nestjs🐺⚡ | The framework of Nodejs (Part-1)") Article DEV · 5y Nestjs🐺⚡ | The framework of Nodejs (Part-1) Nestjs is a server-side framework often confused with the term "Server-Side Angular" It centralizes all the needed technologies/tools to build perfect, reliable & durable enterprise servers using Nodejs. It provides/supports (through packages): http-server (express/fastify) GraphQL server websocket server (socket.io/ws) database orm (sequelize/mongoose/typeorm/knex/prism) request body validation using class-validator caching. 28 1 22. 22 [](https://daily.dev/posts/nextjs-performance-checklist-ehkhpw9gh "NextJS Performance Checklist") Article DEV · 5y NextJS Performance Checklist React applications with NextJS can be slow. Here's a list of things you might be able to do to improve the performance of your application. I've geared this towards NextJS for a few specifics I wanted to include, but this list can be applied more generally too. 26 1 23. 23 [](https://daily.dev/posts/5-git-tricks-every-developer-should-know-7itt1jjrd "5 Git Tricks Every Developer Should Know") Article DEV · 5y 5 Git Tricks Every Developer Should Know In this article we will discuss 5 git tips and tricks that will enhance your productivity, better your workflow and make you an overall git ninja. Let’s dive in: Remove all your local git branches but keep master. A better git log visualization on terminal. How to delete a git branch locally and from remote. 24 2 24. 24 [](https://daily.dev/posts/6-css-shorthand-properties-to-improve-your-web-application-0qukm7njm "6 CSS Shorthand properties to improve your web application") Article DEV · 5y 6 CSS Shorthand properties to improve your web application CSS is a language used to describe how a web page should look like. With CSS we can set position, colors, fonts, layout of each element in an HTML page. In this blog post I will share some tips to improve your CSS code and the performance of your web app. 20 1 25. 25 [](https://daily.dev/posts/fullstack-nodejs-reactjs-interview-experience-at-nutanix-vmot-vzxn "Fullstack (Nodejs + Reactjs) interview experience at Nutanix") Article DEV · 5y Fullstack (Nodejs + Reactjs) interview experience at Nutanix I had applied for the MTS-3 Fullstack – SAAS (Nodejs + Reactjs) on Nutanix’s career section and got the shortlisting email on 21’st April 2021\. Visit learnersbucket.com If you are preparing for your JavaScript interview. You will find DSA, System Design and JavaScript Questions. 19 [See all DEV archives](/sources/devto/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/devto/best-of/2021/08#page","url":"https://daily.dev/sources/devto/best-of/2021/08","name":"Best DEV Posts — August 2021","description":"The most upvoted DEV posts from August 2021, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/devto/best-of/2021/08#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/no-more-import-in-react-oyoumwmjk","name":"No More ../../../ Import in React"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/top-5-javascript-animation-libraries-2021-ceqimpfxk","name":"Top 5 JavaScript animation libraries 2021"},{"@type":"ListItem","position":3,"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":4,"url":"https://daily.dev/posts/essential-concepts-in-js-dn9-wydba","name":"Essential Concepts in JS"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/best-vs-code-setup-9ozh9vgay","name":"Best VS Code setup"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/microfrontends-with-react-0dno1mmxp","name":"Microfrontends With React"},{"@type":"ListItem","position":7,"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":8,"url":"https://daily.dev/posts/react-cheatsheets-kexfbctrd","name":"React CheatSheets"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/how-to-add-router-progress-bar-in-next-js-with-one-line-of-code--rxtzfj2vd","name":"How to add router progress bar in Next.js with one line of code 🤯"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/basic-concepts-of-node-js-sckpciecl","name":"Basic Concepts of Node.js"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/how-to-create-a-custom-toggle-switch-using-css-xz-ti5lrn","name":"How to create a custom Toggle Switch using CSS"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/lazy-loading-react-components-with-dynamic-imports-and-intersection-observer-wujnecshu","name":"Lazy loading react components with dynamic imports and intersection observer"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/power-of-console-table-in-javascript--wtjfugtkr","name":"Power of console.table() in JavaScript💪🏻😎"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/why-i-decided-to-stay-a-frontend-engineer-and-stopped-searching-full-stack-jobs-dnrnedva0","name":"Why I Decided To Stay A Frontend Engineer And Stopped Searching Full-Stack Jobs"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/cleaner-data-fetching-with-react-query-jkx72lwtw","name":"Cleaner data fetching with react-query"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/top-10-must-know-javascript-functions-mzs2obbmg","name":"Top 10 Must Know JavaScript Functions"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/really-why-react--5a6q1pcgu","name":"Really, why React?"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/20-react-tools-to-help-you-become-a-more-productive-programmer-g8kcgifh7","name":"20+ React Tools to Help You Become a More Productive Programmer"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/optimizing-react-apps-hardcore-edition-ha9flkyc8","name":"Optimizing React apps: Hardcore edition"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/7-interesting-deprecated-javascript-features-fawws90h5","name":"7 interesting deprecated JavaScript features"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/nestjs-the-framework-of-nodejs-part-1--hbkmztdww","name":"Nestjs🐺⚡ | The framework of Nodejs (Part-1)"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/nextjs-performance-checklist-ehkhpw9gh","name":"NextJS Performance Checklist"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/5-git-tricks-every-developer-should-know-7itt1jjrd","name":"5 Git Tricks Every Developer Should Know"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/6-css-shorthand-properties-to-improve-your-web-application-0qukm7njm","name":"6 CSS Shorthand properties to improve your web application"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/fullstack-nodejs-reactjs-interview-experience-at-nutanix-vmot-vzxn","name":"Fullstack (Nodejs + Reactjs) interview experience at Nutanix"}]},{"@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":"DEV","item":"https://daily.dev/sources/devto"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/devto/best-of"},{"@type":"ListItem","position":5,"name":"August 2021"}]}]} ```