--- title: Best developer posts — June 2023 | daily.dev description: The most upvoted daily.dev posts from June 2023, curated by the daily.dev community. canonical: https://daily.dev/posts/best-of/2023/06 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/posts/best-of/2023/06 og:type: website og:site_name: daily.dev og:title: Best developer posts — June 2023 | daily.dev og:description: The most upvoted daily.dev posts from June 2023, 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 2023 1. 1 [](https://daily.dev/posts/patterns-tjtxlzw2b "Patterns") Article Community Picks · 3y Patterns A collection of animation techniques built using CSS or JavaScript with considerations for accessibility and user preferences. You can use the code in these examples to help ensure your projects stay on the right track. This collection includes patterns that are often tricky to implement without hurting your Core Web Vitals scores. 327 11 2. 2 [](https://daily.dev/posts/build-a-whatsapp-clone-realtime-chat-using-next-js-socket-io-tailwind-css-node-js-express-and--18ruqxvkn "Build a Whatsapp Clone (Realtime Chat) using Next.js, Socket.io, Tailwind CSS, Node.js, Express and Prisma") Article DEV · 3y Build a Whatsapp Clone (Realtime Chat) using Next.js, Socket.io, Tailwind CSS, Node.js, Express and Prisma This comprehensive WhatsApp clone comes packed with a range of awesome features to give you an authentic messaging experience. The Whatsapp Clone uses Next.js, Socket.io, Tailwind CSS, Node.js and Express and Prisma - DEV Community Features of the WhatsApp Clone. 297 18 3. 3 [](https://daily.dev/posts/javascript-shorthand-techniques-ultimate-cheat-sheet-ekmeovg8b "JavaScript Shorthand Techniques — Ultimate Cheat-Sheet") Article Medium · 3y JavaScript Shorthand Techniques — Ultimate Cheat-Sheet Learn JavaScript shorthand techniques, including the Ternary Operator, short-circuit evaluation, default parameter values, object property shorthand, destructuring assignment, arrow functions, template literals, and array methods. 237 19 4. 4 [](https://daily.dev/posts/chatgpt-js---a-powerful-client-side-javascript-library-for-chatgpt-vl2cxnmk5 "chatgpt.js - 🤖 A powerful client-side JavaScript library for ChatGPT") Article Product Hunt · 3y chatgpt.js - 🤖 A powerful client-side JavaScript library for ChatGPT chatgpt.js is a powerful client-side JavaScript library for ChatGPT. "We'd really love to know if our site makes a good first impression," says Product Hunt. 232 13 5. 5 [](https://daily.dev/posts/10-microservice-patterns-software-engineers-should-know-mwuc8h1ug "10 Microservice Patterns Software Engineers Should Know") Article Cloud Native Daily · 3y 10 Microservice Patterns Software Engineers Should Know Building scalable software requires a software engineer/architect to pick the right architecture. Monolithic architecture is usually the first choice in mind for most engineers because it is easy and does not have to deal with the distributed system complexity because a whole application is in the same giant codebase when dealing with agile software delivery. 228 11 6. 6 [](https://daily.dev/posts/the-modern-way-of-serving-images-mqvpxcixa "The modern way of serving images") Article Community Picks · 3y The modern way of serving images The HTTPArchive found at least 70% of all websites have an image as the most prominent element, yet only 34% of the web uses to create responsive & performant images. To change this, the following article will guide you through responsive image techniques, and introduce a novel technique that aims to make tags work (almost) like tags. 227 14 7. 7 [](https://daily.dev/posts/mastering-css-grid-cz0bblost "Mastering CSS Grid") Article Community Picks · 3y Mastering CSS Grid A series of concise lectures and hands-on exercises will guide you through everything you need to know about creating responsive layouts for all of your web applications. You'll learn how to enable grid, define basic layouts, and use DevTools overlays to help plan and debug grid lines and areas. 205 12 8. 8 [](https://daily.dev/posts/10-tips-to-stay-focused-on-your-personal-projects-hdymatf6c "10 Tips to stay focused on your personal Projects") Article thoughbot · 3y 10 Tips to stay focused on your personal Projects The Pomodoro Technique involves working for a set amount of time, usually 25 minutes, and then taking a short break. The Eisenhower Matrix classifies tasks based on urgency and importance, so you can prioritize the most important ones first. Set goals and estimations is one of the most effective ways to stay focused on personal projects. 185 15 9. 9 [](https://daily.dev/posts/say-goodbye-to-spread-operator-use-default-composer-fa7ytn0iv "Say Goodbye to Spread Operator: Use Default Composer") Article Community Picks · 3y Say Goodbye to Spread Operator: Use Default Composer " default-composer" is a lightweight JavaScript library that allows you to set default values for nested objects. The library replaces empty strings/arrays/objects, null, or undefined values in an existing object with the defined default values. This helps simplify programming logic and reduce the amount of code needed to set the default values. 174 41 10. 10 [](https://daily.dev/posts/best-practices-for-writing-unit-tests-8jis45r1s "Best Practices for Writing Unit Tests") Article DZone · 3y Best Practices for Writing Unit Tests Unit tests are crucial in software development as they aid in bug detection, code refactoring, documentation, and regression prevention. They allow developers to verify the correctness of individual code units, such as functions, methods, or classes. Join the DZone community and get the full member experience. 170 4 11. 11 [](https://daily.dev/posts/next-js-13-routing-mymrldo8e "Next.js 13 Routing") Article builder.io · 3y Next.js 13 Routing Next.js employs a file-system-based routing mechanism, where URL paths in the browser are determined by files and folders in the codebase. Next.js offers support for nested routes, so you can to establish a hierarchical structure within your application. For a fresh start, delete the folder to create routes from scratch. 166 5 12. 12 [](https://daily.dev/posts/the-cost-of-javascript---2023-ccxhhg1fn "The Cost Of JavaScript - 2023") Article Community Picks · 3y The Cost Of JavaScript - 2023 162 15 13. 13 [](https://daily.dev/posts/daisy-ui-3-0-released-new-components-themes-improvements-and-more--euo84im0p "Daisy UI 3.0 Released: New components, themes, improvements, and more!") Article Community Picks · 3y Daisy UI 3.0 Released: New components, themes, improvements, and more! Daisy UI has introduced loading spinners with its latest version. Spinners indicate an activity or event is currently running in the background. The new Accordion component in Daisy UI is an update on but uses radio buttons inside the hood. This makes it possible to make JS-free components more efficient, faster, and accessible. 149 15 14. 14 [](https://daily.dev/posts/devops-is-bullshit-8rpnnufin "DevOps is Bullshit") Article Community Picks · 3y DevOps is Bullshit DevOps started as a well-intentioned set of practices and culture, it has devolved into an unholy beast of division and tunnel vision. The problem is most engineers don’t want to do operations work, they want to build the product. The knowledge silos are a feature, not a bug. 145 18 15. 15 [](https://daily.dev/posts/css-the-good-parts-2app2resp "CSS: The Good Parts") Article builder.io · 3y CSS: The Good Parts CSS is like a Swiss army knife for web design. It's got the power to animate, transform, and adapt layouts with and. making it all responsive and cool. It's not just about simple styling anymore, it's about bringing your whole web game to life. Let's dive into how CSS got to where it is today. 145 1 16. 16 [](https://daily.dev/posts/god-tier-developer-roadmap-gqkjykb3k "God-Tier Developer Roadmap") Article Community Picks · 3y God-Tier Developer Roadmap 144 8 17. 17 [](https://daily.dev/posts/node-js-development-all-you-need-to-know-fyix8aefv "Node.js Development: All You Need to Know") Article Amplication · 3y Node.js Development: All You Need to Know Node.js can be considered a future-proof technology that every developer should know. It allows developers to use JavaScript on both the frontend and backend, making it the perfect choice for building scalable, high-performance applications. It was introduced in 2009 and revolutionalized the development world since it allowed developers to run JavaScript outside web browsers. 140 3 18. 18 [](https://daily.dev/posts/docker-cheat-sheet-36-docker-cli-commands-kwnkx04b5 "Docker Cheat Sheet – 36 Docker CLI Commands") Article Spacelift · 3y Docker Cheat Sheet – 36 Docker CLI Commands The command-line tool is used to interact with a Docker installation. In this article, we’ll provide a brief description for the majority of the main commands. You can use this list to learn more about Docker’s functionality, or simply find out how to use a particular feature. 138 7 19. 19 [](https://daily.dev/posts/top-typescript-utility-functions-you-need-to-know-y1ngkpcgh "Top TypeScript Utility Functions You Need to Know") Article Hacker Noon · 3y Top TypeScript Utility Functions You Need to Know TypeScript brings powerful static type checking and expressive types. One of the key strengths of TypeScript is its extensive collection of utility functions. In this blog post, we will explore some of the most useful TypeScript utility functions that can greatly improve your programming experience. 139 10 20. 20 [](https://daily.dev/posts/mongodb-cheat-sheet--bczdc5z2i "MongoDB Cheat Sheet🌱") Article Community Picks · 3y MongoDB Cheat Sheet🌱 MongoDB is a document database with the scalability and flexibility that you want with the querying and indexing that you need. A database typically has a separate file system directory to hold its data. The values of fields may include other documents, arrays, and arrays of documents. 139 14 21. 21 [](https://daily.dev/posts/next-js-13-complete-guide-to-server-components-and-the-app-directory-uictognpe "Next.js 13: complete guide to Server Components and the App Directory") Article Community Picks · 3y Next.js 13: complete guide to Server Components and the App Directory Next.js 13 is a major release of the most popular React framework. It ships with a new routing system, also called App Router. The new directory brings many improvements to the existing directory, and it's the new default way to write Next.js apps. 137 2 22. 22 [](https://daily.dev/posts/create-next-stack-hazeqdrmh "Create Next Stack") Article Community Picks · 3y Create Next Stack Where Create Next App lets you choose a single template only, Create Next Stack lets you pick and choose an array of technologies often used alongside Next.js. The tool is used to easily set up the boilerplate of new Next.JS apps. 136 15 23. 23 [](https://daily.dev/posts/why-we-chose-node-js-over-deno--o3yuqvavh "Why We Chose Node.js Over Deno?") Article Amplication · 3y Why We Chose Node.js Over Deno? Node.js was the de-facto standard for writing server-side JavaScript apps in the 2010s. Ryan Dahl introduced Deno in 2018 in his controversial JSConf EU talk titled "10 Things I Regret About Node.JS" This article gives an overview of the platforms, history, performance, security, and all other critical features. 136 21 24. 24 [](https://daily.dev/posts/why-netflix-took-a-bet-on-graphql-a7yklbfcb "Why Netflix Took a Bet on GraphQL") Article Amplication · 3y Why Netflix Took a Bet on GraphQL Netflix migrated its iOS and Android apps to a GraphQL backend in 2022\. Netflix's decision to adopt GraphQL was driven by its ambition to create a more flexible, efficient, and developer-friendly API architecture. GraphQL's declarative nature, comprehensive documentation, and robust tooling make it a developer's dream. 135 8 25. 25 [](https://daily.dev/posts/a-visual-guide-to-layouts-in-next-js-13-qhlaem2w6 "A Visual Guide to Layouts in Next.js 13") Article builder.io · 3y A Visual Guide to Layouts in Next.js 13 A layout in Next.js is a UI component that is shared between multiple pages in an application. It allows us to define a common structure and appearance for a group of pages, reducing redundancy and promoting code reusability. In version 13, Next.JS provides built-in support for layouts, making it simpler to create and manage them. 134 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/2023/06#page","url":"https://daily.dev/posts/best-of/2023/06","name":"Best Developer Posts — June 2023","description":"The most upvoted daily.dev posts from June 2023, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/posts/best-of/2023/06#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/patterns-tjtxlzw2b","name":"Patterns"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/build-a-whatsapp-clone-realtime-chat-using-next-js-socket-io-tailwind-css-node-js-express-and--18ruqxvkn","name":"Build a Whatsapp Clone (Realtime Chat) using Next.js, Socket.io, Tailwind CSS, Node.js, Express and Prisma"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/javascript-shorthand-techniques-ultimate-cheat-sheet-ekmeovg8b","name":"JavaScript Shorthand Techniques — Ultimate Cheat-Sheet"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/chatgpt-js---a-powerful-client-side-javascript-library-for-chatgpt-vl2cxnmk5","name":"chatgpt.js - 🤖 A powerful client-side JavaScript library for ChatGPT"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/10-microservice-patterns-software-engineers-should-know-mwuc8h1ug","name":"10 Microservice Patterns Software Engineers Should Know"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/the-modern-way-of-serving-images-mqvpxcixa","name":"The modern way of serving images"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/mastering-css-grid-cz0bblost","name":"Mastering CSS Grid"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/10-tips-to-stay-focused-on-your-personal-projects-hdymatf6c","name":"10 Tips to stay focused on your personal Projects"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/say-goodbye-to-spread-operator-use-default-composer-fa7ytn0iv","name":"Say Goodbye to Spread Operator: Use Default Composer"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/best-practices-for-writing-unit-tests-8jis45r1s","name":"Best Practices for Writing Unit Tests"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/next-js-13-routing-mymrldo8e","name":"Next.js 13 Routing"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/the-cost-of-javascript---2023-ccxhhg1fn","name":"The Cost Of JavaScript - 2023"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/daisy-ui-3-0-released-new-components-themes-improvements-and-more--euo84im0p","name":"Daisy UI 3.0 Released: New components, themes, improvements, and more!"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/devops-is-bullshit-8rpnnufin","name":"DevOps is Bullshit"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/css-the-good-parts-2app2resp","name":"CSS: The Good Parts"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/god-tier-developer-roadmap-gqkjykb3k","name":"God-Tier Developer Roadmap"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/node-js-development-all-you-need-to-know-fyix8aefv","name":"Node.js Development: All You Need to Know"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/docker-cheat-sheet-36-docker-cli-commands-kwnkx04b5","name":"Docker Cheat Sheet – 36 Docker CLI Commands"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/top-typescript-utility-functions-you-need-to-know-y1ngkpcgh","name":"Top TypeScript Utility Functions You Need to Know"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/mongodb-cheat-sheet--bczdc5z2i","name":"MongoDB Cheat Sheet🌱"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/next-js-13-complete-guide-to-server-components-and-the-app-directory-uictognpe","name":"Next.js 13: complete guide to Server Components and the App Directory"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/create-next-stack-hazeqdrmh","name":"Create Next Stack"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/why-we-chose-node-js-over-deno--o3yuqvavh","name":"Why We Chose Node.js Over Deno?"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/why-netflix-took-a-bet-on-graphql-a7yklbfcb","name":"Why Netflix Took a Bet on GraphQL"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/a-visual-guide-to-layouts-in-next-js-13-qhlaem2w6","name":"A Visual Guide to Layouts in Next.js 13"}]},{"@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 2023"}]}]} ```