--- title: Best DEV posts — July 2021 | daily.dev description: The most upvoted DEV posts from July 2021, curated by the daily.dev community. canonical: https://daily.dev/sources/devto/best-of/2021/07 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/devto/best-of/2021/07 og:type: website og:site_name: daily.dev og:title: Best DEV posts — July 2021 | daily.dev og:description: The most upvoted DEV posts from July 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 — July 2021 1. 1 [](https://daily.dev/posts/the-ultimate-cheat-sheet-list-for-web-developers-dq615hjqi "The Ultimate Cheat sheet List For Web Developers") Article DEV · 5y The Ultimate Cheat sheet List For Web Developers Cheat sheets are a great way to help you remember all the things you need to know about Web development. These cheat sheets include HTML, CSS, and JAVASCRIPT. Cheatsheets can also be used to teach you how to structure tables, lists, forms. 146 19 2. 2 [](https://daily.dev/posts/git-it-right-git-cheatsheet--fnjjwklqk "Git it Right🔥🔥🚀(Git CheatSheet)") Article DEV · 5y Git it Right🔥🔥🚀(Git CheatSheet) 114 3 3. 3 [](https://daily.dev/posts/vite-is-too-fast--vy2ewfdjl "Vite is too fast!") Article DEV · 5y Vite is too fast! Vite is a build tool created by Evan You (creator of Vue) It provides faster developement experience with instant server start, super fast Hot Module Replacement (HMR) and out of the box support for TypeScript as well. Vite pre-bundles dependencies using esbuild. 101 8 4. 4 [](https://daily.dev/posts/how-to-stay-focused-as-a-self-taught-frontend-web-developer--fua0yut-r "How to stay focused 🔍 as a self taught Frontend Web Developer 💻") Article DEV · 5y How to stay focused 🔍 as a self taught Frontend Web Developer 💻 Staying focused is one of the hardest tasks when pursuing a new hobby, goal or project. With these few tips, I can help you stay on track, or prevent you from listening to that doubtful little voice in the back of your head telling you to quit. Don't worry about, React vs Vue vs Angular. They'll come to you when you need 'em. 92 12 5. 5 [](https://daily.dev/posts/internet-explorer-finally-dies-062lnpfsv "Internet Explorer finally dies") Article DEV · 5y Internet Explorer finally dies Internet Explorer 11 will be retired and go out of support on June 15, 2022\. Popular JavaScript frameworks have already dropped support, including Vue 3 and Preact 11\. The list of companies that have dropped support is growing by the day, and includes Adobe, Dailymotion, Skillshare, LinkedIn, Twitter, SAP, among many others. 81 12 6. 6 [](https://daily.dev/posts/full-stack-netflix-app-7-hours-free-tutorial--wxojnq5o7 "Full Stack Netflix App (7 hours free tutorial)") Article DEV · 5y Full Stack Netflix App (7 hours free tutorial) "MERN Stack Netflix Clone with an Admin Panel" tutorial. I used Express API, MongoDB, React functional components, hooks with context API. If you want to learn more about web development and practice with real-world projects, you can check my channel out. 81 4 7. 7 [](https://daily.dev/posts/to-typescript-or-to-not--nr4bgssku "To Typescript Or To Not?") Article DEV · 5y To Typescript Or To Not? Typescript has over 19 million weekly downloads on NPM. The language is widely used in software products such as Slack, Medium, Asana, or Visual Studio Code. Microsoft (duh!), JetBrains, eBay, Ericsson, airbnb or Ubisoft are all open about using TypeScript. 75 7 8. 8 [](https://daily.dev/posts/moving-away-from-reactjs-and-vuejs-on-front-end-using-clean-architecture-aiog5in7g "Moving away from ReactJs and VueJs on front-end using Clean Architecture") Article DEV · 5y Moving away from ReactJs and VueJs on front-end using Clean Architecture This article is an English translation of the original in my blog: Alejándonos de ReactJs y VueJs en el front end usando Clean Architecture. Clean Architecture is the ability to uncouple our application of the delivery mechanism to the user, that is, from the UI framework or library. 63 3 9. 9 [](https://daily.dev/posts/14-vs-code-shortcuts-to-supercharge-your-productivity-7ccs6zry3 "14 VS Code Shortcuts to Supercharge Your Productivity") Article DEV · 5y 14 VS Code Shortcuts to Supercharge Your Productivity Software engineers tend to be extremely efficient beings. Our goal is to optimize everything, not just the code. We don't want to spend 10 seconds looking for something on the GUI. Why would we, when we can do it in 0,1s by using the powerful keyboard shortcuts? Let me share with you the shortcuts I use every day. I bet you don't know many of them! 62 8 10. 10 [](https://daily.dev/posts/5-visual-studio-code-hacks-that-you-will-thank-me-for-and-they-re-not-common-points-like-install-p-tbcln2a-z "5 Visual Studio Code Hacks That You Will Thank Me For (And They're Not Common Points Like "Install Prettier Extension")") Article DEV · 5y 5 Visual Studio Code Hacks That You Will Thank Me For (And They're Not Common Points Like "Install Prettier Extension") Some VS Code hacks which I don't usually see being shared around. Open Files Automatically In A New Tab. Change Color of Comments in VS Code. Generate Custom Snippet. Zooming out by pressing ctrl + '-' or '+' to get a larger view of files. 48 1 11. 11 [](https://daily.dev/posts/javascript-hoisting-6lxwv-y7w "JavaScript Hoisting") Article DEV · 5y JavaScript Hoisting JavaScript hoisting refers to the process where the compiler allocates memory for variable and function declarations prior to execution of code \[1\]. That means that declarations are moved to the top of their scope before code execution regardless of whether its scope is global or local. The code snippets below show hoisting in action: declare the function first and use/invoke it after. 45 2 12. 12 [](https://daily.dev/posts/i-created-8-free-dashboard-templates-built-with-tailwind-for-react-next-vue-and-nuxt--yam3sj1mq "I created 8 free dashboard templates built with Tailwind for React, Next, Vue and Nuxt.") Article DEV · 5y I created 8 free dashboard templates built with Tailwind for React, Next, Vue and Nuxt. Salvia-kit is an open source dashboard tool for React, Next.js, Vue.js and Nuxt. It is fully customizable and without external dependencies. You can export it and integrate it in your project. There are 33 repositories and each dashboard has 4 templates. 37 3 13. 13 [](https://daily.dev/posts/javascript-loading-techniques-performance-qbksxlumz "JavaScript loading techniques & Performance") Article DEV · 5y JavaScript loading techniques & Performance In this blog post, we will go through the techniques to include external script files to your HTML and look at how this can affect the performance. We will compare which technique is preferable and efficient over others in varying situations. This blog post assumes you are familiar with basic HTML, CSS and JavaScript syntax. 37 1 14. 14 [](https://daily.dev/posts/css-structure-wkb-x7saw "CSS Structure") Article DEV · 5y CSS Structure One of the struggles developers encounters while writing CSS is the fact that the property you are looking for can be in any line inside a class selector. To help to solve that problem I thought about a structure to organize the styles so you can know where to write and search the properties you need. Write CSS that is easy to read and everyone can understand. 36 15. 15 [](https://daily.dev/posts/11-git-commands-i-use-every-day-s-wva2q3j "11 Git Commands I Use Every Day") Article DEV · 5y 11 Git Commands I Use Every Day Git has everything you need to make you safe from losing your code changes. Here are some tips on how to use git to get the most out of your code. Use git to check out a new branch for every task you start, and to make changes to existing ones. 36 16. 16 [](https://daily.dev/posts/optimize-node-js-performance-with-clustering-tbmoaktkl "Optimize Node.js performance with clustering") Article DEV · 5y Optimize Node.js performance with clustering The Node.js cluster module acts as a load balancer to distribute the load to the child processes running simultaneously on a shared port. The master process listens to a socket and sends the work to interested workers. The workers then process the incoming requests. This is the power of the cluster module where workers share the load. 33 2 17. 17 [](https://daily.dev/posts/python-cheatsheet--cuc01mke2 "Python Cheatsheet 🔥") Article DEV · 5y Python Cheatsheet 🔥 Cheatsheets are good when you want to revise some of the concepts, but not an idle way to start learning Python. VSCODE extension: Making a virtual env: Why Virtual env? Comments in python Data Types: Naming conventions: Printing in Python: Numbers in Python. Using with variables: Variables makes it easy to understands the code. 31 4 18. 18 [](https://daily.dev/posts/nocodb-the-open-source-airtable-alternative--6erhfs8q1 "NocoDB ✨ The Open Source Airtable Alternative ✨") Article DEV · 5y NocoDB ✨ The Open Source Airtable Alternative ✨ NocoDB is a free & open source Airtable alternative. Turns any database into a smart-spreadsheet Website. Works with S3, Minio, GCP, Azure, DigitalOcean, Linode, OVH, BackBlaze. NocoDB has been the fastest growing open source project for Q2. 29 19. 19 [](https://daily.dev/posts/javascript-s-forgotten-keyword-with--intcmc4jk "JavaScript's Forgotten Keyword (with)") Article DEV · 5y JavaScript's Forgotten Keyword (with) The "with" keyword can be used to inject arbitrary objects into a scope chain. It can also introduce security vulnerabilities. It is forbidden in strict mode for a reason. It adds some interesting capabilities to the language, but ultimately it is not a must-use keyword. 28 5 20. 20 [](https://daily.dev/posts/i-made-a-vscode-plugin-that-can-write-each-part-of-react-component-in-multiple-split-editors-on-the--fw27bbj7h "I made a vscode plugin that can write each part of React component in multiple split editors on the same screen") Article DEV · 5y I made a vscode plugin that can write each part of React component in multiple split editors on the same screen Split Editors is a feature of a new vscode plugin for Vue called Volar. It divides React component code into several categories in a single file. Split editors then fold the unrelated code separately. The more detailed the code categories are, the better effect of split editors will be. 28 2 21. 21 [](https://daily.dev/posts/regex-101-a7ltgounj "Regex 101") Article DEV · 5y Regex 101 In this blog we are going to talk about Regular Expressions or we can also call it REGEX.REGEX is sequence of characters which are in a certain patter. These patterns help us find or find and replace or validate things like email, usernames and passwords. 27 22. 22 [](https://daily.dev/posts/dockerize-your-node-app-q4gnsekd "Dockerize your Node app") Article DEV · 5y Dockerize your Node app This article is part of the Dockerize series. Make sure to checkout the Introduction where I go over some concepts we are going to use. Today we'll dockerize our Node application, very similar to how we dockerized our React app in the last part by taking advantage of builder pattern with multi stage builds. 26 1 23. 23 [](https://daily.dev/posts/mern-app-node-js-react-redux-ant-design-crud-auth-u2e2em54q "Mern App ( Node.js / React / Redux / Ant Design ) Crud & Auth") Article DEV · 5y Mern App ( Node.js / React / Redux / Ant Design ) Crud & Auth Starter Antd Admin (Crud & auth) App based on Mern Stack. App built for DigitalOcean MongoDB Hackathon. Based on mern stack (Express.js / MongoDb / React / Redux / AntD) with generic crud and auth , admin management. 25 1 24. 24 [](https://daily.dev/posts/3-5-years-as-a-front-end-engineer---things-i-learn-and-what-next--a0ulis-vbj "3.5 Years as a Front-end Engineer - Things I Learn and What Next?") Article DEV · 5y 3.5 Years as a Front-end Engineer - Things I Learn and What Next? Software engineers/developers face a moment where they have to rethink, reshape, and eventually replan their careers. This article is an attempt to maintain my expertise (and improve it) and be ready for everything in the future. In this article, I'll share my learning so far from the Fundamentals of Software Architecture by Mark Richards and Neal Ford. 25 25. 25 [](https://daily.dev/posts/i-tracked-every-minute-of-my-time-for-the-last-4-months-here-are-7-totally-unexpected-results-82hxmxuf4 "I tracked every minute of my time for the last 4 months. Here are 7 totally unexpected results") Article DEV · 5y I tracked every minute of my time for the last 4 months. Here are 7 totally unexpected results The author spent 4 months tracking his time using an app called Toggl. The results amazed him in ways that he would never have expected, so he decided to write about them. The biggest impact was in how he was spending his time while doing the tracking. Saved a lot of time from unexpected places. 25 4 [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/07#page","url":"https://daily.dev/sources/devto/best-of/2021/07","name":"Best DEV Posts — July 2021","description":"The most upvoted DEV posts from July 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/07#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/the-ultimate-cheat-sheet-list-for-web-developers-dq615hjqi","name":"The Ultimate Cheat sheet List For Web Developers"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/git-it-right-git-cheatsheet--fnjjwklqk","name":"Git it Right🔥🔥🚀(Git CheatSheet)"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/vite-is-too-fast--vy2ewfdjl","name":"Vite is too fast!"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/how-to-stay-focused-as-a-self-taught-frontend-web-developer--fua0yut-r","name":"How to stay focused 🔍 as a self taught Frontend Web Developer 💻"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/internet-explorer-finally-dies-062lnpfsv","name":"Internet Explorer finally dies"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/full-stack-netflix-app-7-hours-free-tutorial--wxojnq5o7","name":"Full Stack Netflix App (7 hours free tutorial)"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/to-typescript-or-to-not--nr4bgssku","name":"To Typescript Or To Not?"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/moving-away-from-reactjs-and-vuejs-on-front-end-using-clean-architecture-aiog5in7g","name":"Moving away from ReactJs and VueJs on front-end using Clean Architecture"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/14-vs-code-shortcuts-to-supercharge-your-productivity-7ccs6zry3","name":"14 VS Code Shortcuts to Supercharge Your Productivity"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/5-visual-studio-code-hacks-that-you-will-thank-me-for-and-they-re-not-common-points-like-install-p-tbcln2a-z","name":"5 Visual Studio Code Hacks That You Will Thank Me For (And They're Not Common Points Like \"Install Prettier Extension\")"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/javascript-hoisting-6lxwv-y7w","name":"JavaScript Hoisting"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/i-created-8-free-dashboard-templates-built-with-tailwind-for-react-next-vue-and-nuxt--yam3sj1mq","name":"I created 8 free dashboard templates built with Tailwind for React, Next, Vue and Nuxt."},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/javascript-loading-techniques-performance-qbksxlumz","name":"JavaScript loading techniques & Performance"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/css-structure-wkb-x7saw","name":"CSS Structure"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/11-git-commands-i-use-every-day-s-wva2q3j","name":"11 Git Commands I Use Every Day"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/optimize-node-js-performance-with-clustering-tbmoaktkl","name":"Optimize Node.js performance with clustering"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/python-cheatsheet--cuc01mke2","name":"Python Cheatsheet 🔥"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/nocodb-the-open-source-airtable-alternative--6erhfs8q1","name":"NocoDB ✨ The Open Source Airtable Alternative ✨"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/javascript-s-forgotten-keyword-with--intcmc4jk","name":"JavaScript's Forgotten Keyword (with)"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/i-made-a-vscode-plugin-that-can-write-each-part-of-react-component-in-multiple-split-editors-on-the--fw27bbj7h","name":"I made a vscode plugin that can write each part of React component in multiple split editors on the same screen"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/regex-101-a7ltgounj","name":"Regex 101"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/dockerize-your-node-app-q4gnsekd","name":"Dockerize your Node app"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/mern-app-node-js-react-redux-ant-design-crud-auth-u2e2em54q","name":"Mern App ( Node.js / React / Redux / Ant Design ) Crud & Auth"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/3-5-years-as-a-front-end-engineer---things-i-learn-and-what-next--a0ulis-vbj","name":"3.5 Years as a Front-end Engineer - Things I Learn and What Next?"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/i-tracked-every-minute-of-my-time-for-the-last-4-months-here-are-7-totally-unexpected-results-82hxmxuf4","name":"I tracked every minute of my time for the last 4 months. Here are 7 totally unexpected results"}]},{"@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":"July 2021"}]}]} ```