--- title: Best developer posts — March 2021 | daily.dev description: The most upvoted daily.dev posts from March 2021, curated by the daily.dev community. canonical: https://daily.dev/posts/best-of/2021/03 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/posts/best-of/2021/03 og:type: website og:site_name: daily.dev og:title: Best developer posts — March 2021 | daily.dev og:description: The most upvoted daily.dev posts from March 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 — March 2021 1. 1 [](https://daily.dev/posts/git-cheat-sheet-50-git-commands-you-should-know--ltw6krh5 "Git Cheat Sheet – 50 Git Commands You Should Know") Article freeCodeCamp · 6y Git Cheat Sheet – 50 Git Commands You Should Know Git Cheat Sheet – 50 Git Commands You Should Know. Git Cheat Sheets – How To Use The Git Cheatsheets. How to Use the Git Components. How To Utilise The Git Compressors. What Do You Do With Git? Let us know. 128 8 2. 2 [](https://daily.dev/posts/building-a-video-chat-app-with-node-js-socket-io-webrtc-rwobpbgiy "Building a Video Chat App with Node.js + Socket.io + WebRTC") Article gitconnected · 5y Building a Video Chat App with Node.js + Socket.io + WebRTC Building a Video Chat App with Node.js + Socket.io + WebRTC Taran Arora shares his tips on how to build a video chat app using JavaScript and NodeJS. It will also show you how to use PeerJS,WebRTC, and Nodemon to build the app. 121 7 3. 3 [](https://daily.dev/posts/40-free-forever-tools-for-developers-iuz8ilu93 "40 "Free Forever" Tools for Developers") Article Hashnode · 6y 40 "Free Forever" Tools for Developers Hrishikesh is co-founder of Flexiple, an exclusive freelance network for developers & designers. He is forever on the lookout for great tools that help him get work done better & easier. Here, he shares the list of his go-to "Free forever" tools. 113 4 4. 4 [](https://daily.dev/posts/the-best-approach-to-lazy-load-images-for-maximum-performance-xgjctv3gn "The best approach to lazy load images for maximum performance") Article Hashnode · 5y The best approach to lazy load images for maximum performance Native lazy loading for images and iframes was released for Chrome and other major browsers. Image lazy loading is one of the more popular approaches of optimizing websites due to the relatively easy implementation and large performance gain. Around 73% of currently used browsers support this feature which is not bad but we don't want to make the website image content inaccessible and unusable to 27% of potential users. 101 7 5. 5 [](https://daily.dev/posts/a-list-of-70-open-source-clones-of-popular-sites-40kuyrhwj "A list of 70+ open source clones of popular sites") Article Changelog · 6y A list of 70+ open source clones of popular sites 100+ open-source clones and alternatives of popular sites like Airbnb, Amazon, Instagram, Netflix, Tiktok, Spotify, Whatsapp, Youtube, etc. List contains source code, tutorials, demo links, tech stack, and GitHub stars count. Great for learning purpose! 98 3 6. 6 [](https://daily.dev/posts/git-commit-message-convention-that-you-can-follow--4tbyval0c "Git commit message convention that you can follow!") Article DEV · 5y Git commit message convention that you can follow! A typical git commit message will look like this: (): Enter fullscreen mode Exit full screen mode. "type" must be one of the following mentioned below! Build : Build related changes (eg: adding external dependencies) chore : A code change that external user won't see. feat : A new feature fix: A bug fix docs : Documentation related changes: A code that is related to styling. 95 3 7. 7 [](https://daily.dev/posts/top-2021-productivity-apps-wan0jbdmw "Top 2021 Productivity Apps") Article Hashnode · 6y Top 2021 Productivity Apps Every time I spin a new Linux distro, there is some software I cannot do without. In this post, I'll list the apps that I'm currently using to manage both my work and personal projects. All apps are cross-platform, which is kind of a must-have for me. 82 9 8. 8 [](https://daily.dev/posts/modern-javascript---iii-mul1n9jki "Modern Javascript - III") Article DevDojo · 5y Modern Javascript - III Every year, Javascript update adds new features. ES2021 (also known as ES12) is planned to be released in June this year. New features that are added each year go through a four-stage process. All the features listed below have already reached the last stage and are very much ready for release. 79 17 9. 9 [](https://daily.dev/posts/how-i-built-my-perfect-score-portfolio-website-uugk0rdkd "How I Built My Perfect Score Portfolio Website") Article Hashnode · 5y How I Built My Perfect Score Portfolio Website I recently published the fourth version of my portfolio jemimaabu.com. I've always built my portfolios from scratch with HTML and CSS, using as little JavaScript dependency as possible. With this version, I tried to make the code as performant and accessible as possible but still have an interactive site. This article will be about how I managed to achieve that. 75 2 10. 10 [](https://daily.dev/posts/15-funny-memes-for-software-developers-d46lflbgf "15 Funny Memes for Software Developers") Article Hashnode · 5y 15 Funny Memes for Software Developers I recently started a modified version of the #100daysofcode challenge. I aim to write content related to Python, Data Science, or Programming every day. Follow my progress on Twitter, Medium, Dev.to, Hashnode, or my WordPress Blog. Back to the page you came from. 74 6 11. 11 [](https://daily.dev/posts/why-i-moved-from-styled-components-to-tailwind-css-and-what-s-the-future-of-css-in-js--mxuabky-n "Why I moved from styled-components to Tailwind CSS and what's the future of CSS-in-JS?") Article daily.dev · 5y Why I moved from styled-components to Tailwind CSS and what's the future of CSS-in-JS? Styled-components is an open-source JS library that uses the power of JavaScript to create styled React components easily. Tailwind CSS follows the Atomic CSS methodology, where every class sets only one styling rule. The only difference is that you write your CSS in your JS files or even JSX. 75 9 12. 12 [](https://daily.dev/posts/50-vs-code-extensions-that-will-make-you-a-better-developer-vae-4yzrl "50 VS Code Extensions That Will Make You a Better Developer") Article JavaScript in Plain English · 6y 50 VS Code Extensions That Will Make You a Better Developer 50 VS Code Extensions That Will Make You a Better Developer. The extensions in the VS code run in their own process and are lazily loaded. There are plenty of extensions available and can be browsed in the visual studio market place. Here is the curated list of the most useful extensions that help developers to increase their productivity. 63 6 13. 13 [](https://daily.dev/posts/vscode-automations-for-frontend-developers-ijaryukci "VSCode Automations for Frontend Developers") Article Bits and Pieces · 5y VSCode Automations for Frontend Developers VSCode Automations for Frontend Developers Boost your productivity and code quality with these tools and extensions. Nethmi Wijesinghe discusses several VS Code automation tips that frontend developers should follow. Live Server, the cool extension available in VSCode, automates this for you. Turbo Console Log is the perfect choice for writing meaningful log messages. 62 3 14. 14 [](https://daily.dev/posts/svg-generators-b4re6scwy "SVG Generators") Article Smashing Magazine · 5y SVG Generators SVG generators can be used to create shapes and backgrounds, path visualizers and JSX generators. There are plenty of further options for SVG patterns — for example for repeating background images. JustCode SVG Filters is a visual tool for pretty much all nerdy SVG filtering needs. HeroPatterns provides dozens of repeating patterns. 62 7 15. 15 [](https://daily.dev/posts/improve-your-js-skills-with-theses-tips-bsx80crod "Improve your JS skills with theses tips") Article Hashnode · 5y Improve your JS skills with theses tips 62 8 16. 16 [](https://daily.dev/posts/tailwindcss-hidden-gems--rwa4enqb7 "TailwindCSS Hidden Gems 💎") Article DevDojo · 6y TailwindCSS Hidden Gems 💎 Using the space utility classes, you can easily add equal spacing between your elements instead of using margin. You can also use the divider classes to add dividers between your Elements. Instead of using custom box-shadow values to create rings around elements, can utilize these classes to display the same output. 56 5 17. 17 [](https://daily.dev/posts/create-your-app-with-flutter-in-5-days-hloxlvd1d "Create Your App With Flutter In 5 Days") Article gitconnected · 5y Create Your App With Flutter In 5 Days Flutter allows developers to create applications for iOS and Android by using a single code-base. The app development process has never been easy, but Flutter has made it far easier and simpler for developers by providing an advanced level of software development kit complied with all the widgets and plugins. 54 2 18. 18 [](https://daily.dev/posts/vs-code-theme-studio-create-your-own-vs-code-theme-easily-within-your-browser--4bhcin3t "VS Code Theme Studio — Create your own VS Code theme easily, within your browser") Article Product Hunt · 5y VS Code Theme Studio — Create your own VS Code theme easily, within your browser VS Code Theme Studio enables you to quickly and easily design your own VS Code theme in an intuitive, user-friendly, web-based interface. No more messing around with nasty JSON files, editing raw hex color codes, and tweaking settings. Embed your own theme. 53 2 19. 19 [](https://daily.dev/posts/5-awesome-react-hooks--h87oxa369 "5 Awesome React Hooks ⚛️") Article DEV · 5y 5 Awesome React Hooks ⚛️ React use lazy load image uses the Intersection Observer API to provide a performant solution to lazy loading images. UseOnClickOutside is one of the bests, with this hook, you can easily capture outside clicks from an element, very useful for a modal for example. UseDocumentTitle allows you to set the page title simple calling it from a component and passing the title string. 53 2 20. 20 [](https://daily.dev/posts/70-free-design-resources-for-developers-hnu4kijmz "70+ Free Design Resources for Developers") Article Hashnode · 5y 70+ Free Design Resources for Developers 52 4 21. 21 [](https://daily.dev/posts/15-project-ideas-for-web-developers-hqjktvn4a "15 Project Ideas for Web Developers") Article Hashnode · 5y 15 Project Ideas for Web Developers Building projects improves one's coding skills because learning by creating stuff is more efficient. This article covers project ideas for frontend, backend, and full-stack web developers. Here are some project ideas if you're looking to improve your skills in front-end technologies. The color guesser game is a simple game that allows players to guess the background color. 51 3 22. 22 [](https://daily.dev/posts/15-amazing-websites-for-ui-inspirations--a1rioefvz "15 amazing websites for UI inspirations 💖") Article Hashnode · 6y 15 amazing websites for UI inspirations 💖 51 23. 23 [](https://daily.dev/posts/build-an-api-in-node-js-using-aws-api-gateway-mongodb-and-serverless-foxlcigfv "Build an API in Node.js using AWS, API Gateway, MongoDB, and Serverless") Article JavaScript in Plain English · 5y Build an API in Node.js using AWS, API Gateway, MongoDB, and Serverless This tutorial shows you how to build a secure REST API for a Notetaking react-redux application using MongoDB database as a service. We will follow a Serverless approach using AWS Lambda, API Gateway, and the Serverless framework. In Part 1, we are going to build the backend, and to go through this tutorial, you will need the following. 49 2 24. 24 [](https://daily.dev/posts/4-javascript-es2018-features-you-should-know-ae0bfsd43 "4 JavaScript ES2018 Features You Should Know") Article Hashnode · 5y 4 JavaScript ES2018 Features You Should Know The ES2018 specification introduced four new features. These features are asynchronous iteration, rest/spread properties, Promise.prototype.finally() and regular expression improvements. This tutorial will help you learn how these features work and how to use them. Asynchronous iteration is one of the lesser discussed ES2018 features. With asynchronous iteration we get asynchronous iterables and iterators. 46 5 25. 25 [](https://daily.dev/posts/micro-frontends-what-why-and-how-kzmuyfcqt "Micro-Frontends: What, why, and how") Article gitconnected · 5y Micro-Frontends: What, why, and how Rany ElHousieny explains what Micro Frontends are and how to use them. Micro-Frontends architecture was introduced to solve multiple issues with the current SPA frontend development. Companies started to adopt the Module federation approach to migrate from a monolithic application to Microfrontends. 46 4 [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/03#page","url":"https://daily.dev/posts/best-of/2021/03","name":"Best Developer Posts — March 2021","description":"The most upvoted daily.dev posts from March 2021, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/posts/best-of/2021/03#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/git-cheat-sheet-50-git-commands-you-should-know--ltw6krh5","name":"Git Cheat Sheet – 50 Git Commands You Should Know"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/building-a-video-chat-app-with-node-js-socket-io-webrtc-rwobpbgiy","name":"Building a Video Chat App with Node.js + Socket.io + WebRTC"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/40-free-forever-tools-for-developers-iuz8ilu93","name":"40 \"Free Forever\" Tools for Developers"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/the-best-approach-to-lazy-load-images-for-maximum-performance-xgjctv3gn","name":"The best approach to lazy load images for maximum performance"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/a-list-of-70-open-source-clones-of-popular-sites-40kuyrhwj","name":"A list of 70+ open source clones of popular sites"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/git-commit-message-convention-that-you-can-follow--4tbyval0c","name":"Git commit message convention that you can follow!"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/top-2021-productivity-apps-wan0jbdmw","name":"Top 2021 Productivity Apps"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/modern-javascript---iii-mul1n9jki","name":"Modern Javascript - III"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/how-i-built-my-perfect-score-portfolio-website-uugk0rdkd","name":"How I Built My Perfect Score Portfolio Website"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/15-funny-memes-for-software-developers-d46lflbgf","name":"15 Funny Memes for Software Developers"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/why-i-moved-from-styled-components-to-tailwind-css-and-what-s-the-future-of-css-in-js--mxuabky-n","name":"Why I moved from styled-components to Tailwind CSS and what's the future of CSS-in-JS?"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/50-vs-code-extensions-that-will-make-you-a-better-developer-vae-4yzrl","name":"50 VS Code Extensions That Will Make You a Better Developer"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/vscode-automations-for-frontend-developers-ijaryukci","name":"VSCode Automations for Frontend Developers"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/svg-generators-b4re6scwy","name":"SVG Generators"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/improve-your-js-skills-with-theses-tips-bsx80crod","name":"Improve your JS skills with theses tips"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/tailwindcss-hidden-gems--rwa4enqb7","name":"TailwindCSS Hidden Gems 💎"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/create-your-app-with-flutter-in-5-days-hloxlvd1d","name":"Create Your App With Flutter In 5 Days"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/vs-code-theme-studio-create-your-own-vs-code-theme-easily-within-your-browser--4bhcin3t","name":"VS Code Theme Studio — Create your own VS Code theme easily, within your browser"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/5-awesome-react-hooks--h87oxa369","name":"5 Awesome React Hooks ⚛️"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/70-free-design-resources-for-developers-hnu4kijmz","name":"70+ Free Design Resources for Developers"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/15-project-ideas-for-web-developers-hqjktvn4a","name":"15 Project Ideas for Web Developers"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/15-amazing-websites-for-ui-inspirations--a1rioefvz","name":"15 amazing websites for UI inspirations 💖"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/build-an-api-in-node-js-using-aws-api-gateway-mongodb-and-serverless-foxlcigfv","name":"Build an API in Node.js using AWS, API Gateway, MongoDB, and Serverless"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/4-javascript-es2018-features-you-should-know-ae0bfsd43","name":"4 JavaScript ES2018 Features You Should Know"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/micro-frontends-what-why-and-how-kzmuyfcqt","name":"Micro-Frontends: What, why, and how"}]},{"@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":"March 2021"}]}]} ```