--- title: Best developer posts — June 2021 | daily.dev description: The most upvoted daily.dev posts from June 2021, curated by the daily.dev community. canonical: https://daily.dev/posts/best-of/2021/06 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/posts/best-of/2021/06 og:type: website og:site_name: daily.dev og:title: Best developer posts — June 2021 | daily.dev og:description: The most upvoted daily.dev posts from June 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 — June 2021 1. 1 [](https://daily.dev/posts/announcing-daily-dev-3-0--afklgabhb "Announcing daily.dev 3.0 🦄") Article daily.dev Changelog · 5y Announcing daily.dev 3.0 🦄 Daily.dev 3.0 is the fastest version we have ever created. The browser extension is getting a serious revamp with a brand new UI. The new design aims to improve accessibility and make it easier to use daily.dev on both desktop, tablet, and mobile. In the coming weeks, we will ship a new set of features and improvements. 308 38 2. 2 [](https://daily.dev/posts/introducing-github-copilot-your-ai-pair-programmer-8c1qkefzk "Introducing GitHub Copilot: your AI pair programmer") Article GitHub Blog · 5y Introducing GitHub Copilot: your AI pair programmer GitHub Copilot is a new AI pair programmer that helps you write better code. It draws context from the code you’re working on, suggesting whole lines or entire functions. As you type, it adapts to the way you write code to help you complete your work faster. 240 21 3. 3 [](https://daily.dev/posts/javascript-async-await-tutorial-learn-callbacks-promises-and-async-await-in-js-by-making-ice-cre-rhf7y34-n "JavaScript Async/Await Tutorial – Learn Callbacks, Promises, and Async/Await in JS by Making Ice Cream 🍧🍨🍦") Article freeCodeCamp · 5y JavaScript Async/Await Tutorial – Learn Callbacks, Promises, and Async/Await in JS by Making Ice Cream 🍧🍨🍦 Learn Callbacks, Promises, and Async/Await in JS by Making Ice Cream. Joy Shaheb is the author of the popular JavaScript tutorial series, The Async Cauldron. She is also the co-founder of the AsyncCauldron.com. 152 17 4. 4 [](https://daily.dev/posts/frontend-toolbox---a-list-of-handpicked-resources-for-frontend-developers-0pmilfenr "Frontend Toolbox - A list of handpicked resources for frontend developers") Article Product Hunt · 5y Frontend Toolbox - A list of handpicked resources for frontend developers There are lots of tools to choose from, and it’s hard to find the right ones. So I created this list – so you save time by easily finding the best stuff out there. Embed this post on your site and share it with your friends. 135 10 5. 5 [](https://daily.dev/posts/5-bad-coding-practices-that-make-other-developers-hate-your-code-y5arrkjzl "5 bad coding practices that make other developers hate your code") Article The Software House · 5y 5 bad coding practices that make other developers hate your code Bad programming practices are so evil that every developer will hate your work. Always shorten and abbreviate the names as much as possible, so the next developer working on your code will have to guess what you were thinking about. Use chained functions, nested conditional statements, over-bloat design patterns and clever one-liners. 130 11 6. 6 [](https://daily.dev/posts/blog---next-js-11-v-zjbijch "Blog - Next.js 11") Article Next.js · 5y Blog - Next.js 11 Next.js 11 includes Conformance, a system that provides carefully crafted solutions to support optimal UX. Next.js Live (Preview Release): Code in the browser, with your team, in real time. Webpack 5 is now enabled by default for all Next.JS applications. 124 6 7. 7 [](https://daily.dev/posts/top-front-end-development-trends-you-should-follow-in-2021-p0icg9unu "Top Front-End Development Trends You Should Follow in 2021") Article Geek Culture · 5y Top Front-End Development Trends You Should Follow in 2021 Front-end development standards and trends change faster than they can be implemented. JavaScript will continue its Reign as the most popular programming language in the world. Single Page Apps (SPAs) are not SEO-friendly which is critical for growing your online businesses. Gatsby is the single fastest-growing framework, according to the Gatby Market Report (May 2021) 119 4 8. 8 [](https://daily.dev/posts/7-tools-for-faster-frontend-development-in-2022-0eu-w83ts "7 Tools for Faster Frontend Development in 2022") Article Bits and Pieces · 5y 7 Tools for Faster Frontend Development in 2022 116 10 9. 9 [](https://daily.dev/posts/how-to-use-async-await-to-write-better-javascript-code-spon9ss9p "How to Use Async/Await to Write Better JavaScript Code") Article freeCodeCamp · 5y How to Use Async/Await to Write Better JavaScript Code Learn Callbacks, Promises, and Async/Await in JS by Making Ice Cream. Joy Shaheb is the author of the popular JavaScript tutorial series, The Async Cauldron. She is also the co-founder of the AsyncCauldron.com. 103 6 10. 10 [](https://daily.dev/posts/best-free-and-open-source-javascript-animation-libraries-jwvipq68g "Best Free and Open Source JavaScript Animation Libraries") Article Tuts+ · 5y Best Free and Open Source JavaScript Animation Libraries There are many elements on a webpage that can be animated to make it come alive. In this article, I show you eight of the best free and open-source JavaScript animation libraries that you can use in your projects today. Mo.js is an excellent library for adding JavaScript-based motion graphics to your website. 100 11 11. 11 [](https://daily.dev/posts/introducing-the-new-github-issues-wtzyfmslj "Introducing the new GitHub Issues") Article GitHub Blog · 5y Introducing the new GitHub Issues Since last year’s GitHub Universe, we’ve shipped more than 20,000 improvements to GitHub for developers, open source communities, and enterprise teams. Maintainers can now limit who can approve and request changes on pull requests. You can also close issues and block users via your phone. 90 8 12. 12 [](https://daily.dev/posts/7-essential-books-for-programmers-zmqegxg-6 "7 Essential Books for Programmers") Article Hashnode · 5y 7 Essential Books for Programmers The Pragmatic Programmer offers tips on improving your programming output. Charles Petzold’s code is an entry point to all things tech, and it is necessary to complete your education as an accomplished programmer. The book is not a one-time read, but rather a workshop in good practices. The tips are practical and best learned through practice. 88 8 13. 13 [](https://daily.dev/posts/how-to-design-a-system-to-scale-to-your-first-100-million-users-yjqw3922f "How to design a system to scale to your first 100 million users") Article gitconnected · 5y How to design a system to scale to your first 100 million users How to design a system to scale to your first 100 million users. Think Big, Do Small, Learn Fast by Anh Dang. The High-Performance Series is a series of articles on high-performance computing. Read the first one here: http://www.techcrunch.com/2013/06/27/how-to-design-a-system-to scale to-your-first-100-million- users. 86 4 14. 14 [](https://daily.dev/posts/everything-new-in-react-18-ymsj-nnjn "Everything New in React 18") Article JavaScript in Plain English · 5y Everything New in React 18 React 18 Alpha is here and includes many new features and improvements. The new root API allows you to use all of the react 18 improvements including concurrent features. Suspense lets you suspend something until it’s ready to be rendered. The startTransition API helps in keeping the current webpage responsive and being able to do heavy non-blocking UI updates. 86 2 15. 15 [](https://daily.dev/posts/learn-next-js-and-make-react-development-simpler-tc-6il-b0 "Learn Next.js and Make React Development Simpler") Article freeCodeCamp · 5y Learn Next.js and Make React Development Simpler Learn Next.js and Make React Development Simpler with our React Development guide. Visit Nextjs.com to learn more about React development. For more information on Nextjs, visit the Nextjs website. For information on React Development, visit React Development.com. for more information about the React development guide, click here. 86 3 16. 16 [](https://daily.dev/posts/tools-for-web-developers-to-work-smarter-and-not-harder-wxya1rxaj "Tools for Web Developers To Work Smarter and not Harder") Article Hashnode · 5y Tools for Web Developers To Work Smarter and not Harder The Web Developer is a browser extension that comes bundled with various web developer tools. Quokka makes prototyping,learning and testing JavaScript and Typescript code blazingly fast. Google Lighthouse is an open-source, automated development tool for testing/improving the quality of your web pages. 85 14 17. 17 [](https://daily.dev/posts/3-tips-to-improve-your-mental-health-as-a-developer-mn-02cwyw "3 Tips to Improve Your Mental Health as a Developer") Article Hacker Noon · 5y 3 Tips to Improve Your Mental Health as a Developer Sam Walpole is a fullstack .NET and JavaScript web developer. He has been struggling with low mood for the past month. He shares his tips on how to improve your mental health as a developer. The only meaningful measure of success is against yourself, so don't compare yourself to others. 85 13 18. 18 [](https://daily.dev/posts/useful-front-end-boilerplates-and-starter-kits-smashing-magazine-u0zzwdhky "Useful Front-End Boilerplates And Starter Kits — Smashing Magazine") Article Smashing Magazine · 5y Useful Front-End Boilerplates And Starter Kits — Smashing Magazine We don’t need to write everything from scratch every single time. With boilerplates and starter kits, we can set up our projects faster, and get to work immediately. This collection is by no means complete, but rather a selection of things that the team at Smashing found useful. 81 4 19. 19 [](https://daily.dev/posts/nice-avatar-react-component-for-generating-avatars-zlvmkmd5w "Nice avatar — React component for generating avatars") Article Product Hunt · 5y Nice avatar — React component for generating avatars react-nice-avatar can easily generate an avatar for your users with no efforts. Embed this avatar into your users' profiles. Use this avatar to help people with reading comprehension and vocabulary. Share this avatar with your social media accounts. Send it to your friends by sending a message to their accounts. 75 6 20. 20 [](https://daily.dev/posts/how-to-improve-software-architecture-skills-daily-cvxxgirmf "How to Improve Software Architecture Skills Daily") Article gitconnected · 5y How to Improve Software Architecture Skills Daily Find 2 or more solutions for each problem you meet. List the trade-offs and choose a solution. Have a technical discussion with a non-tech person improves communication & technical understanding. In conclusion I suggested 3 exercises you can do in the scope of every development task you are doing. 69 9 21. 21 [](https://daily.dev/posts/top-5-git-tips-tricks-wn-hjnntw "Top 5 Git Tips & Tricks") Article Hashnode · 5y Top 5 Git Tips & Tricks 5 Git tips to help you level up your workflow and bring you one step closer to Git mastery. Modify the previous commit without changing the commit message. Let autocorrect take care of your speed, but at the same time you can’t remember how many times you typed “git status” 67 13 22. 22 [](https://daily.dev/posts/the-plan-for-react-18-react-blog-7hiuruixv "The Plan for React 18 – React Blog") Article React · 5y The Plan for React 18 – React Blog React 18 will be our next major version. We’ve published a React 18 Alpha so that library authors can try it and provide feedback. React 18 will include out-of-the-box improvements, new APIs, and a new streaming server renderer with built-in support for React. 65 6 23. 23 [](https://daily.dev/posts/gitlive-extend-git-with-real-time-collaborative-superpowers-eydykd4-o "GitLive — Extend Git with real-time collaborative superpowers") Article Product Hunt · 5y GitLive — Extend Git with real-time collaborative superpowers Extend your IDE with the real-time features remote development teams need to work together effectively. See what your teammates are working on and get notified of merge conflicts before you commit. Make video calls and code together live, VS Code to JetBrains Embed Collect. 65 9 24. 24 [](https://daily.dev/posts/the-front-end-developer-s-guide-to-back-end-development-kqxh0kszz "The Front-end Developer’s Guide to Back-end Development") Article JavaScript in Plain English · 5y The Front-end Developer’s Guide to Back-end Development In this tutorial, we’ll set up a simple and secure back-end API service on Google Cloud Platform using Node.js and Express. The Front-end Developer’s Guide to Back-end Development Jamie Curnow will explain the basics of an HTTP API service. 63 1 25. 25 [](https://daily.dev/posts/how-to-review-code-as-a-junior-developer-hdpvgbng9 "How to Review Code as a Junior Developer") Article Pinterest Engineering · 5y How to Review Code as a Junior Developer Emma Catlin is a Software Engineer at Pinterest. She learned how to code review as a junior developer. She says there are multiple benefits to reviewing code as aJunior Developer. It can help you learn the code base and build a feedback circle. It also gives you a hint of who to ask if you have any questions. 58 5 [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/06#page","url":"https://daily.dev/posts/best-of/2021/06","name":"Best Developer Posts — June 2021","description":"The most upvoted daily.dev posts from June 2021, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/posts/best-of/2021/06#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/announcing-daily-dev-3-0--afklgabhb","name":"Announcing daily.dev 3.0 🦄"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/introducing-github-copilot-your-ai-pair-programmer-8c1qkefzk","name":"Introducing GitHub Copilot: your AI pair programmer"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/javascript-async-await-tutorial-learn-callbacks-promises-and-async-await-in-js-by-making-ice-cre-rhf7y34-n","name":"JavaScript Async/Await Tutorial – Learn Callbacks, Promises, and Async/Await in JS by Making Ice Cream 🍧🍨🍦"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/frontend-toolbox---a-list-of-handpicked-resources-for-frontend-developers-0pmilfenr","name":"Frontend Toolbox - A list of handpicked resources for frontend developers"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/5-bad-coding-practices-that-make-other-developers-hate-your-code-y5arrkjzl","name":"5 bad coding practices that make other developers hate your code"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/blog---next-js-11-v-zjbijch","name":"Blog - Next.js 11"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/top-front-end-development-trends-you-should-follow-in-2021-p0icg9unu","name":"Top Front-End Development Trends You Should Follow in 2021"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/7-tools-for-faster-frontend-development-in-2022-0eu-w83ts","name":"7 Tools for Faster Frontend Development in 2022"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/how-to-use-async-await-to-write-better-javascript-code-spon9ss9p","name":"How to Use Async/Await to Write Better JavaScript Code"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/best-free-and-open-source-javascript-animation-libraries-jwvipq68g","name":"Best Free and Open Source JavaScript Animation Libraries"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/introducing-the-new-github-issues-wtzyfmslj","name":"Introducing the new GitHub Issues"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/7-essential-books-for-programmers-zmqegxg-6","name":"7 Essential Books for Programmers"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/how-to-design-a-system-to-scale-to-your-first-100-million-users-yjqw3922f","name":"How to design a system to scale to your first 100 million users"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/everything-new-in-react-18-ymsj-nnjn","name":"Everything New in React 18"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/learn-next-js-and-make-react-development-simpler-tc-6il-b0","name":"Learn Next.js and Make React Development Simpler"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/tools-for-web-developers-to-work-smarter-and-not-harder-wxya1rxaj","name":"Tools for Web Developers To Work Smarter and not Harder"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/3-tips-to-improve-your-mental-health-as-a-developer-mn-02cwyw","name":"3 Tips to Improve Your Mental Health as a Developer"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/useful-front-end-boilerplates-and-starter-kits-smashing-magazine-u0zzwdhky","name":"Useful Front-End Boilerplates And Starter Kits — Smashing Magazine"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/nice-avatar-react-component-for-generating-avatars-zlvmkmd5w","name":"Nice avatar — React component for generating avatars"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/how-to-improve-software-architecture-skills-daily-cvxxgirmf","name":"How to Improve Software Architecture Skills Daily"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/top-5-git-tips-tricks-wn-hjnntw","name":"Top 5 Git Tips & Tricks"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/the-plan-for-react-18-react-blog-7hiuruixv","name":"The Plan for React 18 – React Blog"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/gitlive-extend-git-with-real-time-collaborative-superpowers-eydykd4-o","name":"GitLive — Extend Git with real-time collaborative superpowers"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/the-front-end-developer-s-guide-to-back-end-development-kqxh0kszz","name":"The Front-end Developer’s Guide to Back-end Development"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/how-to-review-code-as-a-junior-developer-hdpvgbng9","name":"How to Review Code as a Junior Developer"}]},{"@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":"June 2021"}]}]} ```