--- title: Best developer posts — June 2022 | daily.dev description: The most upvoted daily.dev posts from June 2022, curated by the daily.dev community. canonical: https://daily.dev/posts/best-of/2022/06 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/posts/best-of/2022/06 og:type: website og:site_name: daily.dev og:title: Best developer posts — June 2022 | daily.dev og:description: The most upvoted daily.dev posts from June 2022, 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 2022 1. 1 [](https://daily.dev/posts/the-companion-widget-wkf1r6kin "The Companion Widget") Article daily.dev · 4y The Companion Widget The companion allows you to upvote, comment and bookmark articles from the daily.dev feed directly on an article! Have a play with the companion app, then leave a comment letting us know what you think! 2.3K 316 2. 2 [](https://daily.dev/posts/portfolio-ideas---an-open-source-repository-for-inspiration-4ln4rnfyy "Portfolio Ideas - An open-source repository for inspiration") Article Hashnode · 4y Portfolio Ideas - An open-source repository for inspiration Portfolio ideas is a repository of incredible developer portfolios you can draw inspiration from. It is also a beginner-friendly open-source project for developers looking to contribute for the first time. To add a portfolio, you can either create a new table or copy an already existing table and edit it. 508 52 3. 3 [](https://daily.dev/posts/github-copilot-is-generally-available-to-all-developers-ldkzyy-z2 "GitHub Copilot is generally available to all developers") Article GitHub Blog · 4y GitHub Copilot is generally available to all developers GitHub Copilot is an editor extension that suggests code in real time. It's free to use for verified students and maintainers of popular open source software. Starting today, it’s now available to all developers, and we’ll offer it to companies later this year. 370 41 4. 4 [](https://daily.dev/posts/build-beautiful-ui-components-with-nextui-wrrl5pppi "Build beautiful UI components with NextUI") Article asayer · 4y Build beautiful UI components with NextUI NextUI is a modern React UI framework that allows you to make beautiful and fast websites/applications regardless of your design experience. You can create beautiful UI in your React and Nextjs application with just a little customization in the App.jsx to load the NextUI provider. It has many cool features, which is why it is loved and used by many developers. 294 16 5. 5 [](https://daily.dev/posts/5-tips-for-writing-cleaner-code-vyqikwvqn "5 Tips For Writing Cleaner Code") Article Hashnode · 4y 5 Tips For Writing Cleaner Code Nesting in code is something we do all the time, and although there's nothing inherently wrong with nesting, it can sometimes make code harder to read. The "Return Early" design pattern allows us to use the if statement as a guard clause to check for errors and return before executing any further code. 283 18 6. 6 [](https://daily.dev/posts/google-programmers-how-one-idiot-hired-a-couple-more-idiots-yjt0g4wik ""Google" programmers. How one idiot hired a couple more idiots") Article Community Picks · 4y "Google" programmers. How one idiot hired a couple more idiots Ivan Belokamentsev is the founder of PVS-Studio, a Russian IT company. He changed the recruitment plan for programmers to make them write code on a computer, not on a sheet of paper. The change made a huge difference in the productivity of his team. 279 45 7. 7 [](https://daily.dev/posts/the-next-gen-web-framework---5kr5epsn "The next-gen web framework.") Article Hacker News · 4y The next-gen web framework. Fresh is a next generation web framework, built for speed, reliability, and simplicity. Just-in-time rendering on the edge. Island based client hydration for maximum interactivity. Zero runtime overhead: no JS is shipped to the client by default. TypeScript support out of the box. 270 17 8. 8 [](https://daily.dev/posts/you-might-not-need-an-effect-md7gt5hkx "You Might Not Need an Effect") Article Community Picks · 4y You Might Not Need an Effect Removing unnecessary Effects will make your code easier to follow, faster to run, and less error-prone. Effects are an escape hatch from the React paradigm. They let you synchronize your components with some external system like a non-React widget, network, or the browser DOM. 256 14 9. 9 [](https://daily.dev/posts/better-scrolling-through-modern-css-la8pq-kjj "Better scrolling through modern CSS") Article Hashnode · 4y Better scrolling through modern CSS scrollbars are a very mundane thing that every website and every app has. They don't get much love from developers, but we should be paying a little more attention to them. Let's look at some of the things we can do in 2022 to improve the scrolling experience. 256 13 10. 10 [](https://daily.dev/posts/my-wonderful-html-email-workflow-yg2abwz7f "My Wonderful HTML Email Workflow") Article Josh W Comeau · 4y My Wonderful HTML Email Workflow MJML is a responsive email framework from Mailjet. It essentially provides a layer of abstraction over raw HTML. The MJML language provides a set of common tags you can use to structure your email. As long as you follow the MJML conventions, your email should render properly across all email clients. 245 12 11. 11 [](https://daily.dev/posts/automate-your-life-with-python-1yayonyod "Automate Your Life with Python") Article freeCodeCamp · 4y Automate Your Life with Python We just published a Python automation course on the freeCodeCamp.org YouTube channel. Learn how to automate boring and repetitive tasks such as creating an Excel report, sending text messages, extracting tables from websites, interacting with websites, and more. You will learn how to use a few different Python libraries to help with automation such as Path, Selenium, XPath. 239 9 12. 12 [](https://daily.dev/posts/write-better-commits-build-better-projects-q7m-vt0h1 "Write Better Commits, Build Better Projects") Article GitHub Blog · 4y Write Better Commits, Build Better Projects Commits in Git repositories are more than just save points or logs of incremental progress in a larger project. Over time, commits should tell a story of the history of your repository and how it came to be the way that it currently is. It’s been my experience that commits are most effective when they’re tweaked and polished to deliberately convey a message. 227 14 13. 13 [](https://daily.dev/posts/how-we-built-daily-dev-the-150k-developer-community-u3rtdicxi "How we built daily.dev, the 150k+ developer community") Article gitconnected · 4y How we built daily.dev, the 150k+ developer community daily.dev is the top news resource for programmers and one of the largest communities with 150k+ active developers. CEO Nimrod Kramer shares their mission of building a platform where developers grow together, and how they have achieved explosive growth over the past few years. Click here to read the full interview with the CEO and Co-Founder. 221 28 14. 14 [](https://daily.dev/posts/vslook---customize-the-look-of-your-vscode--ei9rwvp87 "VSLook - Customize the look of your VSCode 😎") Article Product Hunt · 4y VSLook - Customize the look of your VSCode 😎 217 5 15. 15 [](https://daily.dev/posts/give-up-github-the-time-has-come--te0xssdh "Give Up GitHub: The Time Has Come!") Article Hacker News · 4y Give Up GitHub: The Time Has Come! GitHub profits from those proprietary products (sometimes from customers who use it for problematic activities). GitHub profits primarily from those who wish to use GitHub tools for in-house proprietary software development. If you aren't the customer, you're the product. The FOSS development methodology is GitHub's product, which they've proprietarized. 215 40 16. 16 [](https://daily.dev/posts/bradtraversy-50projects50days-50-mini-web-projects-using-html-css-js-e-sprwxhn "bradtraversy/50projects50days: 50+ mini web projects using HTML, CSS & JS") Article Pointer · 4y bradtraversy/50projects50days: 50+ mini web projects using HTML, CSS & JS 50 Projects in 50 Days - HTML/CSS and JavaScript and JavaScript. This is the main repository for all of the projects in the course. We are only accepting pull requests and looking at issues for bug fixes so that the code stays inline. All of these projects are part of the course and are available for download. 213 13 17. 17 [](https://daily.dev/posts/fresh-1-0-jex-9ypia "Fresh 1.0") Article Hacker News · 4y Fresh 1.0 Fresh is a new full stack web framework for Deno. By default, web pages built with Fresh send zero JavaScript to the client. The framework has no build step which allows for an order of magnitude improvement in deployment times. Fresh is a routing framework and templating engine that renders pages as they are requested, on a server. It also provides an interface for seamlessly rendering some components on the client for maximum interactivity. 197 15 18. 18 [](https://daily.dev/posts/6-best-frontend-communities-to-join-in-2022-urmc4r-yi "6 Best Frontend Communities to Join in 2022") Article Honeypot · 4y 6 Best Frontend Communities to Join in 2022 In 2022, there are lots of online developer communities that can scale your learning experience and speed. WeLearnJS is a slack community of JavaScript developers with more than 12,000 members as of June 2022\. Reactiflux is an online Discord community of React developers with a massive size of more than 185,000. 191 24 19. 19 [](https://daily.dev/posts/the-end-of-localhost-gxzfwfez1 "The End of Localhost") Article Hashnode · 4y The End of Localhost Dev environments should be cattle, not pets. It looks likely that in future, most development will not be done on localhost. The time wasted fixing bugs between dev and prod environments goes from 1-4 hours a week down to 0\. Many Bigcos who have invested in their developer productivity already work entirely in the cloud. 181 13 20. 20 [](https://daily.dev/posts/css-grid-layout-module-scmijro4u "CSS Grid Layout Module") Article Towards Dev · 4y CSS Grid Layout Module CSS grid allows for more standardized code that works across browsers. A grid layout consists of a parent element, with one or more child elements. To make an HTML element behave as a grid container, you have to set the display property to grid . The grid-template-columns property defines the number of columns in your grid layout. 179 5 21. 21 [](https://daily.dev/posts/the-end-of-localhost-s9-w05wu "The End of Localhost") Article swyx · 4y The End of Localhost Dev environments should be cattle, not pets. It looks likely that most development will not be done on localhost in future. Fast gigabit internet is cheap and everywhere (5G or mesh wifi) Dev machines (laptops, tablets, VR) are cheap and have multiday battery life. Your apps build in a second regardless of scale. 175 23 22. 22 [](https://daily.dev/posts/stack-overflow-developer-survey-2022-zettktjgh "Stack Overflow Developer Survey 2022") Article Hacker News · 4y Stack Overflow Developer Survey 2022 Research companies that have advertised on sites I visit 14.8% have emailed me 8.39% 208\. Academic researcher Start a free trial 66.98% 1,661\. Ask developers I know/work with 69.96% 1.735.Visit developer communities like Stack Overflow 65.04% 1,.613.Read ratings or reviews on third party sites like G2Crowd 28.91% 717. 171 6 23. 23 [](https://daily.dev/posts/build-a-low-code-dashboard-for-your-startup-vz-n8vy0z "Build a Low-Code Dashboard for Your Startup") Article freeCodeCamp · 4y Build a Low-Code Dashboard for Your Startup We just published a course on the freeCodeCamp.org YouTube channel that will teach you how to create a dashboard to help manage your site or startup. In this course you will learn how to use low code tools and APIs to build a customer support dashboard. You will learn to create the dashboard using the Appsmith platform, MongoDB, the SMTP API, and the Discord web hook. 168 3 24. 24 [](https://daily.dev/posts/how-browsers-work-wfjdwfunv "How browsers work") Article Community Picks · 4y How browsers work How browsers work Behind the scenes of modern web browsers. Tali Garsiel's primer on the internal operations of WebKit and Gecko. Chrome, Firefox and Safari make up around 71% of global desktop browser usage. Android Browser, iPhone and Chrome constitute around 54% of usage. 167 9 25. 25 [](https://daily.dev/posts/javascript-design-patterns-explained-with-examples-emzcjhocn "JavaScript Design Patterns –Explained with Examples") Article freeCodeCamp · 4y JavaScript Design Patterns –Explained with Examples Design patterns were popularized by the book "Design Patterns: Elements of Reusable Object-Oriented Software" The book explores the capabilities and pitfalls of object-oriented programming. It describes 23 useful patterns that you can implement to solve common programming problems. These patterns are classified into three main categories: creational, structural, and behavioral patterns. 160 3 [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/2022/06#page","url":"https://daily.dev/posts/best-of/2022/06","name":"Best Developer Posts — June 2022","description":"The most upvoted daily.dev posts from June 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/posts/best-of/2022/06#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/the-companion-widget-wkf1r6kin","name":"The Companion Widget"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/portfolio-ideas---an-open-source-repository-for-inspiration-4ln4rnfyy","name":"Portfolio Ideas - An open-source repository for inspiration"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/github-copilot-is-generally-available-to-all-developers-ldkzyy-z2","name":"GitHub Copilot is generally available to all developers"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/build-beautiful-ui-components-with-nextui-wrrl5pppi","name":"Build beautiful UI components with NextUI"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/5-tips-for-writing-cleaner-code-vyqikwvqn","name":"5 Tips For Writing Cleaner Code"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/google-programmers-how-one-idiot-hired-a-couple-more-idiots-yjt0g4wik","name":"\"Google\" programmers. How one idiot hired a couple more idiots"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/the-next-gen-web-framework---5kr5epsn","name":"The next-gen web framework."},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/you-might-not-need-an-effect-md7gt5hkx","name":"You Might Not Need an Effect"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/better-scrolling-through-modern-css-la8pq-kjj","name":"Better scrolling through modern CSS"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/my-wonderful-html-email-workflow-yg2abwz7f","name":"My Wonderful HTML Email Workflow"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/automate-your-life-with-python-1yayonyod","name":"Automate Your Life with Python"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/write-better-commits-build-better-projects-q7m-vt0h1","name":"Write Better Commits, Build Better Projects"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/how-we-built-daily-dev-the-150k-developer-community-u3rtdicxi","name":"How we built daily.dev, the 150k+ developer community"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/vslook---customize-the-look-of-your-vscode--ei9rwvp87","name":"VSLook - Customize the look of your VSCode 😎"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/give-up-github-the-time-has-come--te0xssdh","name":"Give Up GitHub: The Time Has Come!"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/bradtraversy-50projects50days-50-mini-web-projects-using-html-css-js-e-sprwxhn","name":"bradtraversy/50projects50days: 50+ mini web projects using HTML, CSS & JS"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/fresh-1-0-jex-9ypia","name":"Fresh 1.0"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/6-best-frontend-communities-to-join-in-2022-urmc4r-yi","name":"6 Best Frontend Communities to Join in 2022"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/the-end-of-localhost-gxzfwfez1","name":"The End of Localhost"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/css-grid-layout-module-scmijro4u","name":"CSS Grid Layout Module"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/the-end-of-localhost-s9-w05wu","name":"The End of Localhost"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/stack-overflow-developer-survey-2022-zettktjgh","name":"Stack Overflow Developer Survey 2022"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/build-a-low-code-dashboard-for-your-startup-vz-n8vy0z","name":"Build a Low-Code Dashboard for Your Startup"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/how-browsers-work-wfjdwfunv","name":"How browsers work"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/javascript-design-patterns-explained-with-examples-emzcjhocn","name":"JavaScript Design Patterns –Explained with Examples"}]},{"@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 2022"}]}]} ```