--- title: Best developer posts — April 2021 | daily.dev description: The most upvoted daily.dev posts from April 2021, curated by the daily.dev community. canonical: https://daily.dev/posts/best-of/2021/04 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/posts/best-of/2021/04 og:type: website og:site_name: daily.dev og:title: Best developer posts — April 2021 | daily.dev og:description: The most upvoted daily.dev posts from April 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 — April 2021 1. 1 [](https://daily.dev/posts/20-javascript-shorthand-to-save-time-gofp614ie "20 JavaScript shorthand to save time") Article DevDojo · 5y 20 JavaScript shorthand to save time Data Structures: Why do we need Data Structures? Why does it make sense to use data structures to build data structures? Why is it so important to have a data structure that can be used to build a database of data? Why should we use data Structures to create data structures for data? 139 13 2. 2 [](https://daily.dev/posts/how-to-create-a-kickass-github-profile-page-iaiul1-1n "How To Create A Kickass GitHub Profile Page") Article Hashnode · 5y How To Create A Kickass GitHub Profile Page In this article, you'll see how to create a catchy, good-looking Github profile page. By the end of the tutorial, your README will automatically with your latest blog articles/YouTube videos. Click on the video below or click this link to watch the tutorial. 104 7 3. 3 [](https://daily.dev/posts/new-javascript-features-ecmascript-2021-with-examples--dobujqrhx "New JavaScript Features ECMAScript 2021 (with examples)") Article Hashnode · 5y New JavaScript Features ECMAScript 2021 (with examples) ECMAScript 2021 is the version of ECMAScript corresponding to this year. There are some useful and awesome features that have been incorporated. The new feature allows that numeric literals use underscores as separators to help to improve readability using a visual separation between groups of digits. The Promise.any() method returns a promise that will resolve as soon as one of the promises is resolved. 94 4 4. 4 [](https://daily.dev/posts/create-a-mern-stack-app-with-a-serverless-backend-s2aobyso0 "Create a MERN Stack App with a Serverless Backend") Article freeCodeCamp · 5y Create a MERN Stack App with a Serverless Backend MERN Stack App with a Serverless Backend. Create a MERN stack app with a serverless backend. Use the MERN App Manager to help you create your own Stack App. The MERN app manager can also be used to test your Stack App's functionality. 77 4 5. 5 [](https://daily.dev/posts/3-services-to-deploy-your-node-js-app-for-free-xqgg9ij-h "3 services to deploy your Node.js app for free") Article LogRocket · 5y 3 services to deploy your Node.js app for free In this tutorial, we will see how to deploy a Node.js API built with Express and MySQL to three different services. All the services listed in this post are absolutely free, and the best part that is you don’t need to reach for your credit card — it will not be required. 70 5 6. 6 [](https://daily.dev/posts/top-10-javascript-projects-for-resume--pvdd7zk0 "Top 10 Javascript projects for Resume 🚀🚀") Article DEV · 5y Top 10 Javascript projects for Resume 🚀🚀 Do you want to Kick-start a career in Cyber Security and want to know how hackers hack in real life? Join Now 200+ Members already Joinedhttps://t.me/infosecbugbountyhttps://www.facebook.com/InfosecCyberSecurity/ Join Now. 67 7 7. 7 [](https://daily.dev/posts/you-may-not-know-js-lkblvhewe "You (may not) Know JS") Article Hashnode · 5y You (may not) Know JS JavaScript is a weakly-typed language, it converts two different typed variables when you use its operators. Type coercion is the process of converting value from one type to another. The best practice is to not learn that whole table and stick with using strict comparison. JavaScript got a couple of new features that make use of type coercion to work. 64 5 8. 8 [](https://daily.dev/posts/top-16-browser-extensions-for-increased-developer-productivity-y0dnkydhq "Top 16 Browser Extensions For Increased Developer Productivity") Article Hashnode · 5y Top 16 Browser Extensions For Increased Developer Productivity In this article, you can see the top 16 browser extensions for developers. This curated list of the best browser extensions aims to help improve your productivity and save you time. The "BlockSite" extension is excellent for blocking distractions and staying focused. The Pomodoro Assistant extension allows you to use a timer to break down work into intervals. 64 12 9. 9 [](https://daily.dev/posts/how-to-write-a-good-readme-file-for-your-github-project-ei-aqa9-q "How to Write a Good README File for Your GitHub Project") Article freeCodeCamp · 5y How to Write a Good README File for Your GitHub Project Hillary Nyakundi: How to Write a Good README File for Your GitHub Project. She explains how to write a good README file for your GitHub project. She also shows you how to use GitHub's README tool to help you with your project. Read more here: http://www.gitHub.com/news/features/how-to-write-a-good-readme-file-for-your-GitHub-project. 61 2 10. 10 [](https://daily.dev/posts/great-20-css-toggle-example-bwxyouxod "GREAT 20+ CSS TOGGLE EXAMPLE") Article DevDojo · 5y GREAT 20+ CSS TOGGLE EXAMPLE Checkout our latest product - the ultimate tailwindcss page creator. If You Like This Article then check Out more Examples 50+ CSS Toggle Switches. If you like this article, please share it with your friends. Back to Mail Online home. Back To the page you came from. 61 4 11. 11 [](https://daily.dev/posts/free-resources-for-front-end-devs-in-2021--jziamgv9c "FREE Resources for Front-End Devs in 2021⚡") Article DevDojo · 5y FREE Resources for Front-End Devs in 2021⚡ This post has an unlimited amount of every type of resource covering everything you will need. You only need this post to become a Front-end Developer. Hashnode is the easiest way to start a developer blog on your personal domain. The MDN Web Docs site provides information about Open Web technologies including HTML and CSS. 57 8 12. 12 [](https://daily.dev/posts/my-visual-studio-code-setup-htlkns2ys "My Visual Studio Code Setup") Article DEV · 5y My Visual Studio Code Setup Rithik Samanthula is a Front-End Web Developer. He shares his favorite extensions and themes for Visual Studio Code. Rithik also shares his tips on how to get the most out of Visual Studio. He also shares some of his favorite tools and tools he has used. 54 3 13. 13 [](https://daily.dev/posts/how-to-write-cleaner-react-code-3y6l0otb1 "How to Write Cleaner React Code") Article freeCodeCamp · 5y How to Write Cleaner React Code Reed Barger: How to Write Cleaner React Code. How to write cleaner code for React.com? Read more at Reed Barger’s blog, Cleaning React Code, and see the rest of the article here. Click here for more information on how to write React code. 55 14. 14 [](https://daily.dev/posts/vs-code-extensions-to-boost-productivity-with-previews--oj0rded5t "VS code extensions to boost productivity (with previews)") Article DEV · 5y VS code extensions to boost productivity (with previews) Linked Editing VS code now has a built-in, called linked editing, separate from auto rename tag extension for editing a tag when its matching closing tag is modified. Indent-rainbow increases the readability of your code and makes it easy to browse throught your work. Material Icon Theme makes icons more obvious to the eye. 54 10 15. 15 [](https://daily.dev/posts/vanilla-javascript-code-snippets-pc-jw4832 "Vanilla JavaScript Code Snippets") Article Smashing Magazine · 5y Vanilla JavaScript Code Snippets In a new series of posts, we highlight some of the useful tools and techniques for developers and designers. This time, let’s look at vanilla JavaScript code snippets. Snippets are resources and lightweight libraries to help you solve a problem without a large overhead or third-party dependencies. 53 4 16. 16 [](https://daily.dev/posts/devbook-search-engine-for-developers-afxd2soyr "Devbook — Search Engine for Developers") Article Product Hunt · 5y Devbook — Search Engine for Developers Devbook is a search engine for developers that helps them to find the resources they need and answer their questions faster. Fast, accessible right from a code editor, and fully controllable with just a keyboard. Embed this page into your site and share it with your friends. 52 2 17. 17 [](https://daily.dev/posts/7-javascript-best-practices-to-improve-code-quality-bfj6-dvzk "7 JavaScript Best Practices to Improve Code Quality") Article DZone · 5y 7 JavaScript Best Practices to Improve Code Quality Since 2015, with the release of ES6, a new version of the ECMAScript spec has been released each year. Each iteration adds new features, new syntax, and Quality of Life improvements to the language. JavaScript engines in most browsers and Node.js quickly catch up, and it’s only fair that your code should catch up. 50 2 18. 18 [](https://daily.dev/posts/free-ultimate-react-resources-zero-to-hero-in-react-uw4tjpd21 "Free ultimate React resources. Zero to Hero in React") Article Hashnode · 5y Free ultimate React resources. Zero to Hero in React React is a JavaScript library for building present day applications. React is utilized for taking care of the view layer and can be utilized for advancement of both web and mobile applications. This post will contain various type of resources like YouTube videos, eBook, Courses and MORE. 49 19. 19 [](https://daily.dev/posts/css-flexbox-tutorial-with-flexbox-properties-cheat-sheet--otkymwohu "CSS Flexbox Tutorial with Flexbox Properties Cheat Sheet 🎖️") Article freeCodeCamp · 5y CSS Flexbox Tutorial with Flexbox Properties Cheat Sheet 🎖️ CSS Flexbox Tutorial with Flexbox Properties Cheat Sheet 🎖️ Joy Shaheb shares her Flexbox tips and tricks. Follow her on Twitter @JoyShaheb and @CssFlexbox for more Flexbox tutorials and tips. Visit her site Flexbox.com for more. 48 2 20. 20 [](https://daily.dev/posts/let-s-create-an-image-pop-out-effect-with-svg-clip-path-avixf-xqz "Let’s Create an Image Pop-Out Effect With SVG Clip Path") Article CSS-Tricks · 5y Let’s Create an Image Pop-Out Effect With SVG Clip Path A cool pop-out effect by Mikael Ainalem showcases the clip-path: path() in CSS. The effect looks cool, but there are some issues with the path value. We’re going to re-create this effect using standard, widely-supported CSS techniques so that it not only works, but is truly responsive. 48 5 21. 21 [](https://daily.dev/posts/17-javascript-methods-and-shorthands-must-know-ystlurlfd "17 Javascript methods and shorthands must know") Article Hashnode · 5y 17 Javascript methods and shorthands must know Here I'll tell you about 13 important JavaScript methods, tricks and tips respectively. The most clear justification for learning JavaScript is on the off chance that you have any desires for turning into a web designer. Regardless of whether you haven't got your heart set on a tech vocation, being capable in JavaScript will empower you to develop sites without any preparation. 46 2 22. 22 [](https://daily.dev/posts/3-ways-to-write-elegant-javascript-code-mjuuglulq "3 Ways to Write Elegant JavaScript Code") Article JavaScript in Plain English · 5y 3 Ways to Write Elegant JavaScript Code Zachary Dorcinville shares three ways to modularize and improve maintainability of your code. TypeScript alleviates many of the issues that make JavaScript an unsafe language in some cases. Separation of Concerns is always important to separate the concerns of functionality in a codebase. 44 3 23. 23 [](https://daily.dev/posts/200-ultimate-resources-for-front-end-development-in-2021-eefqrsx6o "200+ Ultimate Resources for Front-End Development in 2021") Article Hashnode · 5y 200+ Ultimate Resources for Front-End Development in 2021 This post has nearly unlimited amount of every type of resources covering everything you will need. You only need this post to become a Front-end Developer. You will need a check list for marking what all you have learned. You can see the below image for how the checklist will look like. 43 5 24. 24 [](https://daily.dev/posts/daily-dev-is-launching-new-clubhouse-like-channels-for-audio-chats-ddwlfdb8m "daily.dev is launching new Clubhouse-like channels for audio chats") Article daily.dev · 5y daily.dev is launching new Clubhouse-like channels for audio chats Fireside Chats will be a new way for daily.dev community to interact on the latest programming news. Users will be able to join voice chats on trending news, AMAs and interviews. Opening a new FireSide Chat will be available only to users who gained certain reputation points. However, joining an existing room will be open for all. 43 20 25. 25 [](https://daily.dev/posts/the-react-roadmap-10-steps-to-become-a-react-developer-in-2021-zkzlxyinu "The React Roadmap 🏁 10 Steps to Become a React Developer in 2021") Article DevDojo · 5y The React Roadmap 🏁 10 Steps to Become a React Developer in 2021 Learn how to become a confident React developer in 10 easy steps. Commit to 4-5 hours of focused coding per weekday. Use the Pomodoro technique for optimal time management. Read through ReactJS.org from front to back to get familiar with the concepts you need. 41 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/04#page","url":"https://daily.dev/posts/best-of/2021/04","name":"Best Developer Posts — April 2021","description":"The most upvoted daily.dev posts from April 2021, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/posts/best-of/2021/04#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/20-javascript-shorthand-to-save-time-gofp614ie","name":"20 JavaScript shorthand to save time"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/how-to-create-a-kickass-github-profile-page-iaiul1-1n","name":"How To Create A Kickass GitHub Profile Page"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/new-javascript-features-ecmascript-2021-with-examples--dobujqrhx","name":"New JavaScript Features ECMAScript 2021 (with examples)"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/create-a-mern-stack-app-with-a-serverless-backend-s2aobyso0","name":"Create a MERN Stack App with a Serverless Backend"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/3-services-to-deploy-your-node-js-app-for-free-xqgg9ij-h","name":"3 services to deploy your Node.js app for free"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/top-10-javascript-projects-for-resume--pvdd7zk0","name":"Top 10 Javascript projects for Resume 🚀🚀"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/you-may-not-know-js-lkblvhewe","name":"You (may not) Know JS"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/top-16-browser-extensions-for-increased-developer-productivity-y0dnkydhq","name":"Top 16 Browser Extensions For Increased Developer Productivity"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/how-to-write-a-good-readme-file-for-your-github-project-ei-aqa9-q","name":"How to Write a Good README File for Your GitHub Project"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/great-20-css-toggle-example-bwxyouxod","name":"GREAT 20+ CSS TOGGLE EXAMPLE"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/free-resources-for-front-end-devs-in-2021--jziamgv9c","name":"FREE Resources for Front-End Devs in 2021⚡"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/my-visual-studio-code-setup-htlkns2ys","name":"My Visual Studio Code Setup"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/how-to-write-cleaner-react-code-3y6l0otb1","name":"How to Write Cleaner React Code"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/vs-code-extensions-to-boost-productivity-with-previews--oj0rded5t","name":"VS code extensions to boost productivity (with previews)"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/vanilla-javascript-code-snippets-pc-jw4832","name":"Vanilla JavaScript Code Snippets"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/devbook-search-engine-for-developers-afxd2soyr","name":"Devbook — Search Engine for Developers"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/7-javascript-best-practices-to-improve-code-quality-bfj6-dvzk","name":"7 JavaScript Best Practices to Improve Code Quality"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/free-ultimate-react-resources-zero-to-hero-in-react-uw4tjpd21","name":"Free ultimate React resources. Zero to Hero in React"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/css-flexbox-tutorial-with-flexbox-properties-cheat-sheet--otkymwohu","name":"CSS Flexbox Tutorial with Flexbox Properties Cheat Sheet 🎖️"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/let-s-create-an-image-pop-out-effect-with-svg-clip-path-avixf-xqz","name":"Let’s Create an Image Pop-Out Effect With SVG Clip Path"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/17-javascript-methods-and-shorthands-must-know-ystlurlfd","name":"17 Javascript methods and shorthands must know"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/3-ways-to-write-elegant-javascript-code-mjuuglulq","name":"3 Ways to Write Elegant JavaScript Code"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/200-ultimate-resources-for-front-end-development-in-2021-eefqrsx6o","name":"200+ Ultimate Resources for Front-End Development in 2021"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/daily-dev-is-launching-new-clubhouse-like-channels-for-audio-chats-ddwlfdb8m","name":"daily.dev is launching new Clubhouse-like channels for audio chats"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/the-react-roadmap-10-steps-to-become-a-react-developer-in-2021-zkzlxyinu","name":"The React Roadmap 🏁 10 Steps to Become a React Developer in 2021"}]},{"@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":"April 2021"}]}]} ```