--- title: Best Community Picks posts — May 2023 | daily.dev description: The most upvoted Community Picks posts from May 2023, curated by the daily.dev community. canonical: https://daily.dev/sources/community/best-of/2023/05 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/community/best-of/2023/05 og:type: website og:site_name: daily.dev og:title: Best Community Picks posts — May 2023 | daily.dev og:description: The most upvoted Community Picks posts from May 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 Community Picks — May 2023 1. 1 [](https://daily.dev/posts/frontend-developer-roadmap-3yxhfdqd6 "Frontend Developer Roadmap") Article Community Picks · 3y Frontend Developer Roadmap Front-end development is the development of visual and interactive elements of a website that users interact with directly. It's a combination of HTML, CSS and JavaScript, where HTML provides the structure, CSS the styling and layout, and JavaScript the dynamic behaviour and interactivity. 589 72 2. 2 [](https://daily.dev/posts/usehooks-q0mtmslia "useHooks") Article Community Picks · 3y useHooks There’s no better way to learn useHooks than by building it yourself. Use LocalStorage to track the dimensions of the browser window with useWindowSize. Track and manage the visibility of your DOM elements within the viewport. 441 20 3. 3 [](https://daily.dev/posts/realtime-colors-zhqmygxfd "Realtime Colors") Article Community Picks · 3y Realtime Colors Realtime Colors is a tool that allows users to visualize their chosen colors and fonts on a real website. It saves time by eliminating the need to implement different color variations, provides a realistic color palette distribution, and is simple to use with just a few button presses. The tool is free to use, offers customizable color palettes, and allows users to export their choices in various formats. 312 26 4. 4 [](https://daily.dev/posts/the-art-of-code-review-zb8zs5lio "The Art of Code Review") Article Community Picks · 3y The Art of Code Review Code review is an important part of software development that ensures code quality, reduces technical debt, and promotes knowledge sharing. Being a polite and helpful reviewer is important to maintain a healthy working relationship. It's also important to focus on the logic behind changes rather than insignificant details. For big changes, it's recommended to break them down into smaller, manageable pieces and use intermediate code reviews to facilitate the review process. 307 25 5. 5 [](https://daily.dev/posts/why-we-re-bad-at-css-xay7hnmqw "Why we're bad at CSS") Article Community Picks · 3y Why we're bad at CSS CSS is more like putting their hand in the pain box from Dune while some product manager has a gom jabbar to their neck, daring them to pull their hand out. Despite the latest advancements in CSS, many are still stuck in this kind of BEM mindset, trying to encapsulate everything. 212 19 6. 6 [](https://daily.dev/posts/api-design-practice-eje1ivsav "API Design Practice") Article Community Picks · 3y API Design Practice Learn about API Design goals, aligning resource APIs with the business domain, and conducting design workshops. 213 2 7. 7 [](https://daily.dev/posts/smolcss-9qwgpgj43 "SmolCSS") Article Community Picks · 3y SmolCSS SmolCSS create an intrinsically responsive grid layout, optionally using a CSS custom property to extend to variable contexts. Each column will resize at the same rate, and items will begin to break to a new row if the width reaches the --min value. The smol stacked layout is a grid feature that can often replace older techniques that relied on absolute positioning. 170 8 8. 8 [](https://daily.dev/posts/tool-for-front-end-teams-mpkt6bwws "Tool for front-end teams") Article Community Picks · 3y Tool for front-end teams Backlight empowers front-end teams to build and ship great design systems. Design systems boost productivity, quality and scalability of a product. But they're often costly and time-consuming to build. Backlight renders pull-requests visually for effortless checks and reviews. 149 8 9. 9 [](https://daily.dev/posts/refine-new---introducing-the-fastest-way-to-create-react-apps-ovfcgubvu "⚡refine.new - Introducing the Fastest Way to Create React Apps") Article Community Picks · 3y ⚡refine.new - Introducing the Fastest Way to Create React Apps Discover how refine.new is transforming the way developers create React apps with its fast and easy-to-use browser tool. Learn about the benefits of using refine and refine.new, including time-saving, high-quality code, enterprise-grade applications, and open-source availability. 138 9 10. 10 [](https://daily.dev/posts/tamagui-1-0-tamagui-vjwfe5ljk "Tamagui 1.0 🎉 — Tamagui") Article Community Picks · 3y Tamagui 1.0 🎉 — Tamagui Tamagui is a suite of React components and hooks that optimize React code and provide customizable styles and themes. It consists of Tamagui Core, Tamagui Static, and Tamagui UI. The key feature of Tamagui's performance gains is view flattening or tree-flattening. Tamagui Core is a complete cross-platform style library, while Tamagui Static is an optimizing compiler for frontend React code. There are several new components in Tamagui, and upcoming features include dynamic inline evaluation, container queries, and more. Tamagui is funded by Github Sponsors. 137 10 11. 11 [](https://daily.dev/posts/css-diner-t4swsvolh "CSS Diner") Article Community Picks · 3y CSS Diner Learn how to use CSS Selectors to apply styles to specific elements. Play a game to practice your selector skills. 133 24 12. 12 [](https://daily.dev/posts/the-best-alternatives-to-github-copilot-in-2023-8oss5gtza "The Best Alternatives to GitHub Copilot in 2023") Article Community Picks · 3y The Best Alternatives to GitHub Copilot in 2023 GitHub Copilot is an AI-powered tool created by GitHub that helps developers write code faster and more efficiently. It uses machine learning to provide autocomplete-style suggestions and even complete code snippets to the developer as they work in their text editor. It can also suggest improvements to existing code and help with tasks like debugging and refactoring. 132 22 13. 13 [](https://daily.dev/posts/the-interactive-guide-to-rendering-in-react-attrd90wy "The Interactive Guide to Rendering in React") Article Community Picks · 3y The Interactive Guide to Rendering in React React is a library for building user interfaces. Rendering in React occurs when there is a state change. React calculates state changes using a batching algorithm. StrictMode allows for extra renders in order to check for components' purity. 120 4 14. 14 [](https://daily.dev/posts/tailwind-variants-36xnbfjl5 "Tailwind Variants") Article Community Picks · 3y Tailwind Variants Tailwind Variants is a feature-rich, fully typed and safe utility library for handling TailwindCSS style conflicts. It works with any framework. 117 22 15. 15 [](https://daily.dev/posts/naming-conventions-in-react-js-reznhwvec "Naming Conventions in React JS") Article Community Picks · 3y Naming Conventions in React JS Naming conventions are important because they make code more readable and organized. The naming convention is how you name every single thing in your project. A well-named file or folder can help you and other developers find and understand your code more quickly. In React applications, there are 3 most common naming conventions: Camel case for file names, pascal case for component names. 116 9 16. 16 [](https://daily.dev/posts/gowithphp-com-6jiebggfg "Gowithphp.com") Article Community Picks · 3y Gowithphp.com A post that discusses the advantages of using PHP for web development. 115 20 17. 17 [](https://daily.dev/posts/zero-dependency-build-free-javascript-framework-tj4ao0ej8 "Zero-Dependency, Build-Free JavaScript Framework") Article Community Picks · 3y Zero-Dependency, Build-Free JavaScript Framework Strawberry is a tiny frontend framework that gives you reactivity and composability. It does this with zero-dependencies, without a build step, and it fits in less than 3KB when gzipped. The ideal way of using Strawberry is by copying the source code into your project directory as opposed to linking it. 113 11 18. 18 [](https://daily.dev/posts/how-to-fix-memory-leaks-in-react-cxzgakvwn "How to Fix Memory Leaks in React") Article Community Picks · 3y How to Fix Memory Leaks in React Learn about the primary causes of memory leaks in React and how to fix them using different methods. 113 7 19. 19 [](https://daily.dev/posts/this-page-is-hosted-on-my-android-phone-uxjy6lo7c "This page is hosted on my Android phone") Article Community Picks · 3y This page is hosted on my Android phone This blog is running on my $180 Android phone running Android 11\. This post describes how I turned my Android device into a web server which can be accessed from a public URL. It is an application for Android that emulates a terminal and Linux environment. Unlike other similar apps, it does not require rooting or any additional setup. 104 6 20. 20 [](https://daily.dev/posts/corentinth-it-tools-collection-of-handy-online-tools-for-developers-with-great-ux--6i8tbgbda "CorentinTh/it-tools: Collection of handy online tools for developers, with great UX.") Article Community Picks · 3y CorentinTh/it-tools: Collection of handy online tools for developers, with great UX. Handy online tools for developers and IT professionals. Includes self-hosting instructions, recommended VSCode extensions, unit testing with Vitest, linting with ESLint, and creating new tools. 100 11 21. 21 [](https://daily.dev/posts/the-next-js-app-directory-and-server-components-explained-qdahcpxud "The Next.js App Directory and Server Components Explained") Article Community Picks · 3y The Next.js App Directory and Server Components Explained Next.js 13 introduces several new features, including App Directory Routing, Server Components, and UI components. The routing in the /app directory is different from the /page directory, as it is folder-based rather than file-based. Layouts can be implemented using the new layout.tsx file in the /app directory. Server Components are non-interactive by nature and do not require client-side JavaScript. Client Components can be used to opt-out of server components and have access to client features. 99 4 22. 22 [](https://daily.dev/posts/typescript-interface-ltmzvqnmu "Typescript: Interface") Article Community Picks · 3y Typescript: Interface Learn about interfaces in TypeScript, including how to declare an interface, add new fields to an existing interface, and the difference between type and interface. 96 3 23. 23 [](https://daily.dev/posts/how-to-structure-scalable-next-js-project-architecture-svivsvvx4 "How to structure scalable Next.js project architecture") Article Community Picks · 3y How to structure scalable Next.js project architecture Learn how to structure and scale a Next.js project, including setting up folder structures, configuring linting and code formatting, and implementing pre-commit hooks. 96 8 24. 24 [](https://daily.dev/posts/docker-essentials-beginner-s-container-guide-icvihj2wr "Docker Essentials: Beginner's Container Guide") Article Community Picks · 3y Docker Essentials: Beginner's Container Guide Explore the basics of Docker and why it's crucial in today's tech world. Learn about Docker's history, how it works, its benefits, and its client-server architecture. 93 8 25. 25 [](https://daily.dev/posts/introducing-storage-on-vercel-vercel-qtded2cdb "Introducing storage on Vercel – Vercel") Article Community Picks · 3y Introducing storage on Vercel – Vercel Vercel has introduced storage solutions including Vercel KV, Vercel Postgres, and Vercel Blob, making it easier to manage frontend storage needs without worrying about infrastructure. 90 13 [See all Community Picks archives](/sources/community/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/sources/community/best-of/2023/05#page","url":"https://daily.dev/sources/community/best-of/2023/05","name":"Best Community Picks Posts — May 2023","description":"The most upvoted Community Picks posts from May 2023, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/community/best-of/2023/05#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/frontend-developer-roadmap-3yxhfdqd6","name":"Frontend Developer Roadmap"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/usehooks-q0mtmslia","name":"useHooks"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/realtime-colors-zhqmygxfd","name":"Realtime Colors"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/the-art-of-code-review-zb8zs5lio","name":"The Art of Code Review"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/why-we-re-bad-at-css-xay7hnmqw","name":"Why we're bad at CSS"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/api-design-practice-eje1ivsav","name":"API Design Practice"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/smolcss-9qwgpgj43","name":"SmolCSS"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/tool-for-front-end-teams-mpkt6bwws","name":"Tool for front-end teams"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/refine-new---introducing-the-fastest-way-to-create-react-apps-ovfcgubvu","name":"⚡refine.new - Introducing the Fastest Way to Create React Apps"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/tamagui-1-0-tamagui-vjwfe5ljk","name":"Tamagui 1.0 🎉 — Tamagui"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/css-diner-t4swsvolh","name":"CSS Diner"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/the-best-alternatives-to-github-copilot-in-2023-8oss5gtza","name":"The Best Alternatives to GitHub Copilot in 2023"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/the-interactive-guide-to-rendering-in-react-attrd90wy","name":"The Interactive Guide to Rendering in React"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/tailwind-variants-36xnbfjl5","name":"Tailwind Variants"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/naming-conventions-in-react-js-reznhwvec","name":"Naming Conventions in React JS"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/gowithphp-com-6jiebggfg","name":"Gowithphp.com"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/zero-dependency-build-free-javascript-framework-tj4ao0ej8","name":"Zero-Dependency, Build-Free JavaScript Framework"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/how-to-fix-memory-leaks-in-react-cxzgakvwn","name":"How to Fix Memory Leaks in React"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/this-page-is-hosted-on-my-android-phone-uxjy6lo7c","name":"This page is hosted on my Android phone"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/corentinth-it-tools-collection-of-handy-online-tools-for-developers-with-great-ux--6i8tbgbda","name":"CorentinTh/it-tools: Collection of handy online tools for developers, with great UX."},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/the-next-js-app-directory-and-server-components-explained-qdahcpxud","name":"The Next.js App Directory and Server Components Explained"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/typescript-interface-ltmzvqnmu","name":"Typescript: Interface"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/how-to-structure-scalable-next-js-project-architecture-svivsvvx4","name":"How to structure scalable Next.js project architecture"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/docker-essentials-beginner-s-container-guide-icvihj2wr","name":"Docker Essentials: Beginner's Container Guide"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/introducing-storage-on-vercel-vercel-qtded2cdb","name":"Introducing storage on Vercel – Vercel"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Sources","item":"https://daily.dev/sources"},{"@type":"ListItem","position":3,"name":"Community Picks","item":"https://daily.dev/sources/community"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/community/best-of"},{"@type":"ListItem","position":5,"name":"May 2023"}]}]} ```