--- title: Best Community Picks posts — July 2024 | daily.dev description: The most upvoted Community Picks posts from July 2024, curated by the daily.dev community. canonical: https://daily.dev/sources/community/best-of/2024/07 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/community/best-of/2024/07 og:type: website og:site_name: daily.dev og:title: Best Community Picks posts — July 2024 | daily.dev og:description: The most upvoted Community Picks posts from July 2024, 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 — July 2024 1. 1 [](https://daily.dev/posts/8-frontend-tools-to-become-a-better-developer-4s0egm7lw "8 Frontend Tools to Become a Better Developer") Article Community Picks · 2y 8 Frontend Tools to Become a Better Developer Front-end developers can significantly boost their productivity and create high-quality applications by incorporating lesser-known tools into their workflows. Essential tools include Uiverse for UI elements, the Motion plugin for Figma, CSSFX for animations, Frontend Mentor for real-world coding challenges, GSAP for high-performance animations, CodePen for code experimentation, Polypane for multi-device previews, and Can I Use for browser compatibility checks. 5.4K 134 2. 2 [](https://daily.dev/posts/15-amazing-things-you-can-do-with-simple-javascript--jozlic1er "15 amazing things you can do with simple JavaScript 🤯") Article Community Picks · 2y 15 amazing things you can do with simple JavaScript 🤯 Discover the versatile and surprising capabilities of vanilla JavaScript through practical examples. Learn how to find operating system details, prevent page refreshing, redirect users to new pages, validate emails, get the current URL, and detect mobile browsers. Additional features include handling disabled JavaScript, accessing module metadata, getting timezone offsets, setting the cursor to wait, and manipulating console messages with CSS. 3.2K 115 3. 3 [](https://daily.dev/posts/100-free-frontend-challenges-rwz8jfjlf "100 FREE Frontend Challenges") Article Community Picks · 2y 100 FREE Frontend Challenges The post offers a set of 100 free frontend challenges aimed at improving web development skills, focusing on HTML & CSS, with opportunities to incorporate JavaScript and other frameworks. Each challenge involves recreating a design to build a working website or web app. The goal is to foster a project-based learning approach, encouraging developers to complete all challenges and enhance their chances of landing a web development job. 2.9K 139 4. 4 [](https://daily.dev/posts/open-source-alternatives-to-tools-you-pay-for-gxwg9u2cf "Open Source alternatives to tools you Pay for") Article Community Picks · 2y Open Source alternatives to tools you Pay for Discover a comprehensive list of 301 open source alternatives to popular paid tools such as Firebase, Docusign, Google Analytics, Calendly, and more. These tools offer similar functionalities without the high costs, empowering developers and businesses to achieve their goals economically and efficiently. 2K 60 5. 5 [](https://daily.dev/posts/8-exciting-new-javascript-concepts-you-need-to-know-5uogbl3lh "8 Exciting New JavaScript Concepts You Need to Know") Article Community Picks · 2y 8 Exciting New JavaScript Concepts You Need to Know Explore 8 new and exciting JavaScript concepts including Optional Chaining, Nullish Coalescing, BigInt, globalThis, matchAll(), Promise.allSettled(), String.prototype.at(), and Error Cause. These features help in writing modern, efficient, and scalable code. Examples are provided for each concept to demonstrate their usage. 1.8K 56 6. 6 [](https://daily.dev/posts/frontend-libraries-for-your-next-project-fi3cfgwtl "Frontend Libraries for Your Next Project") Article Community Picks · 2y Frontend Libraries for Your Next Project Choosing the right tools in web development can drastically enhance productivity and user experience. Key frontend libraries to consider include AOS for scroll animations, Chart.js for data visualization, Luxon for date and time manipulation, SweetAlert2 for customizable alerts and modals, SortableJS for drag-and-drop sorting, Floating UI for dynamic tooltips and pop-overs, and FullCalendar for comprehensive calendar functionalities. 1.5K 41 7. 7 [](https://daily.dev/posts/react-design-patterns-6mzuqvymf "React Design Patterns") Article Community Picks · 2y React Design Patterns React design patterns are essential for frontend development as they offer solutions to recurring challenges in component design. They promote consistency, modularity, and scalability by simplifying state management, logic, and element composition. Examples include custom hooks, higher-order components, and prop-based rendering techniques. These patterns not only solve technical problems but also enhance code efficiency, readability, and maintainability. This guide provides insights into various patterns like Custom Hook, HOC, Extensible Styles, Compound Components, Render Props, Control Props, Props Getters, State Initializer, and State Reducer, along with their benefits and implementation examples. 1.3K 25 8. 8 [](https://daily.dev/posts/cors-the-ultimate-guide-s7m6dkbs0 "CORS: the ultimate guide") Article Community Picks · 2y CORS: the ultimate guide CORS (Cross-Origin Resource Sharing) is a security mechanism that protects users' data from being accessed by malicious websites when different origins interact. AJAX (Asynchronous JavaScript And XML) requests from web browsers are controlled by CORS rules, ensuring data confidentiality and security. This guide explains how CORS policies are configured via HTTP response headers to allow or deny access based on origin and credentials. It also highlights the dangers of misconfigured CORS policies and provides steps to define a secure CORS policy effectively. 1K 38 9. 9 [](https://daily.dev/posts/why-the-with-method-of-javascript-array-is-a-gem--ogisx6fyi "Why the with() method of JavaScript Array is a gem?") Article Community Picks · 2y Why the with() method of JavaScript Array is a gem? The with() method in JavaScript arrays, introduced in ECMAScript 2023, allows developers to change a value at a specified index immutably, meaning the original array remains unchanged. It also supports negative indexing, which is not possible with direct indexing. The method is useful for maintaining the integrity of original data structures and enabling method chaining with other array methods like map() and filter(). 1K 66 10. 10 [](https://daily.dev/posts/10-tips-to-stay-healthy-as-a-developer-qmj0am1ht "10 tips to stay healthy as a developer") Article Community Picks · 2y 10 tips to stay healthy as a developer Software engineering often involves long hours of sitting, which can lead to unhealthy habits. Incorporate these 10 tips to improve your health as a developer: reduce sugar intake, eat slowly, avoid eating lunch at your desk, snack on healthy options, stay hydrated, get enough sleep, avoid screens before bed, sit correctly, take regular breaks, and stay physically active. Investing in your health will boost both your personal well-being and professional productivity. 979 62 11. 11 [](https://daily.dev/posts/50-basic-linux-commands-yprippziv "50 basic Linux commands") Article Community Picks · 2y 50 basic Linux commands Learn 50 essential Linux commands to master your command line skills. This list includes commands for file and directory management, process handling, system information, package management, networking, and more. Whether you're a beginner or an experienced user, these commands will help you perform various administrative tasks efficiently. 974 26 12. 12 [](https://daily.dev/posts/face-api-js-vklr6rjnm "face-api.js") Article Community Picks · 2y face-api.js face-api.js is a JavaScript API built on the tensorflow.js core for face detection and recognition in browsers. It supports multiple models like SSD MobileNetV1, Tiny Face Detector, and MTCNN, each optimized for different needs. The library also provides lightweight and fast 68-point face landmark detection, face recognition using a ResNet-34 model, and face expression recognition. It can be used both in browsers and Node.js environments and includes comprehensive examples for setup and usage. 838 20 13. 13 [](https://daily.dev/posts/dotui-zzs5vimj2 "dotUI") Article Community Picks · 2y dotUI dotUI offers a collection of accessible, mobile-friendly, and modern UI components for building React applications. Components include various input elements like Checkbox, NumberField, and Radio Group, as well as tools for handling dates and colors. The project is open-source and available on GitHub for contributions. 832 42 14. 14 [](https://daily.dev/posts/how-to-center-a-div--kppue99yc "How to center a div?") Article Community Picks · 2y How to center a div? Learn various methods to center a div in CSS, including techniques using Flexbox, Grid, absolute positioning, margin auto, and inline-block display. Each method provides examples to help achieve vertical and horizontal centering effectively. 795 64 15. 15 [](https://daily.dev/posts/19-microservices-patterns-for-system-design-interviews-qrrbtlyu2 "19 Microservices Patterns for System Design Interviews") Article Community Picks · 2y 19 Microservices Patterns for System Design Interviews The post provides an overview of 19 essential microservices design patterns that are crucial for system design interviews. These patterns address various challenges like scalability, fault tolerance, and data consistency in microservices architectures. Patterns discussed include Circuit Breaker, API Gateway, Saga, Event Sourcing, and more. The post also highlights the importance of these patterns in demonstrating problem-solving abilities in technical interviews and offers resources for preparing system design interviews. 751 9 16. 16 [](https://daily.dev/posts/next-js-full-stack-web-app-2024--49kjp9zag "Next.js Full-Stack Web App (2024)") Article Community Picks · 2y Next.js Full-Stack Web App (2024) The post introduces a Next.js full-stack starter template tailored for Next.js 14, designed to streamline the setup process for creating modern web applications. It includes features like a scalable project structure, TypeScript support, pre-configured Ant Design components, SASS module styling, social authentication, route guarding, sample APIs with MongoDB integration, and custom alias imports. Detailed setup instructions are available in the GitHub repository linked in the post. 630 16 17. 17 [](https://daily.dev/posts/patterns-for-javascript-frontend-applications-pnked6itm "Patterns For JavaScript Frontend Applications") Article Community Picks · 2y Patterns For JavaScript Frontend Applications Patterns are crucial in managing the complexity of JavaScript frontend applications, much like they were in desktop and enterprise applications. By drawing on architectural patterns like MVVM, CQRS, and Flux, developers can better manage the state and interactions within their applications. Frameworks like Angular, React, and Vue help streamline these processes through structured state-management techniques. Understanding these patterns allows for sustainable and maintainable application development. 617 7 18. 18 [](https://daily.dev/posts/understanding-apis-10-api-concepts-and-examples-zekpzowwk "Understanding APIs: 10 API Concepts and Examples") Article Community Picks · 2y Understanding APIs: 10 API Concepts and Examples APIs are vital in enabling communication between applications and data. This post explains the basics of APIs, types such as Public, Private, and Partner APIs, and details both REST and SOAP APIs. Key principles of REST APIs, differences between JSON and XML, HTTP methods, and essential concepts of API endpoints are covered. It discusses API security with authentication and authorization, and how to test APIs effectively using tools like Postman, cURL, and Swagger. 602 15 19. 19 [](https://daily.dev/posts/why-japanese-websites-look-so-different-licw6jvkb "Why Japanese Websites Look So Different") Article Community Picks · 2y Why Japanese Websites Look So Different Japanese websites often feature walls of text, bright colors, and numerous fonts due to several intertwined factors including font creation challenges, technological development and stagnation, and cultural influences. These design choices are deeply rooted in Japan's approach to web design and reflect broader societal and technological trends in the country. Understanding these nuances helps to comprehend why such designs differ significantly from Western website aesthetics. 596 27 20. 20 [](https://daily.dev/posts/git-commands-for-software-engineers-xyri6dipw "Git Commands for Software Engineers") Article Community Picks · 2y Git Commands for Software Engineers Git is a crucial tool for software engineers that supports efficient version control and collaboration. Mastering Git commands helps streamline development workflows. This guide covers important commands such as git config, git init, git commit, git push, git pull, git branch, git merge, and many others that are essential for managing codebases and coordinating with team members. 586 17 21. 21 [](https://daily.dev/posts/the-differences-between-object-and-object-in-typescript-0ovwxcgqx "The Differences Between 'Object', '{}', and 'object' in TypeScript") Article Community Picks · 2y The Differences Between 'Object', '{}', and 'object' in TypeScript In TypeScript, 'Object', '{}', and 'object' serve distinct purposes. 'Object' (uppercase) describes properties common to all JavaScript objects and can have boxable objects like string, boolean, etc. '{}' describes an object with no members and behaves similarly to 'Object' but represents a different concept. 'object' (lowercase) refers to any non-primitive type. 'Record' is also often used to represent non-primitive types and is more semantic. 575 10 22. 22 [](https://daily.dev/posts/how-to-structure-your-backend-code-in-node-js-express-js--b1yyvse3c "How to Structure Your Backend Code in Node.js (Express.js)") Article Community Picks · 2y How to Structure Your Backend Code in Node.js (Express.js) In Node.js applications using Express.js, effective codebase structuring is vital for maintainability, scalability, and easier collaboration. This guide outlines a common directory structure, explaining the purpose of each folder and file, from 'app.js' to 'node\_modules', to help manage complexity and build robust applications. 522 14 23. 23 [](https://daily.dev/posts/8-fun-linux-utilities-7jyk4tnbl "8 fun Linux utilities") Article Community Picks · 2y 8 fun Linux utilities A list of fun Linux utilities to try, including 'cmatrix' for a Matrix-like terminal experience, 'apt-get moo' for a cow easter egg, 'aafire' to light up your console, 'sl' for a train animation, 'fortune' for random quotes, 'figlet' for ASCII art banners, 'nyancat' for an animated Nyan Cat, and 'pipes.sh' for random pipe patterns. 509 20 24. 24 [](https://daily.dev/posts/25-open-source-ai-tools-to-cut-your-development-time-in-half-cdeagmk8e "25 Open Source AI Tools to Cut Your Development Time in Half") Article Community Picks · 2y 25 Open Source AI Tools to Cut Your Development Time in Half A comprehensive overview of 25 open-source AI tools designed to streamline various stages of ML/AI projects, from data preparation to deployment and monitoring. Each tool is evaluated based on factors like popularity, impact, innovation, community engagement, and relevance to emerging AI trends. The guide aids in selecting appropriate tools by examining their unique features and suitability for specific use cases, thereby enhancing productivity and project success. 479 8 25. 25 [](https://daily.dev/posts/top-15-animation-libraries-for-react-modern-javascript-apps-ddtoc09he "Top 15 Animation Libraries for React & Modern Javascript Apps") Article Community Picks · 2y Top 15 Animation Libraries for React & Modern Javascript Apps Animations enhance web applications by making them more engaging and interactive. This guide explores the top 15 animation libraries for React and modern web apps, ranging from simple CSS-based options like Animate.css to powerful JavaScript libraries such as React Spring, Framer Motion, and GSAP. Specific use cases are addressed with libraries like Remotion for video generation and Vivus for SVG animations, while advanced needs can be met with Three.js and Theatre.js. Each library is evaluated based on its best use case, pros, and cons, helping you choose the right tool for your project. 469 15 [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/2024/07#page","url":"https://daily.dev/sources/community/best-of/2024/07","name":"Best Community Picks Posts — July 2024","description":"The most upvoted Community Picks posts from July 2024, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/community/best-of/2024/07#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/8-frontend-tools-to-become-a-better-developer-4s0egm7lw","name":"8 Frontend Tools to Become a Better Developer"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/15-amazing-things-you-can-do-with-simple-javascript--jozlic1er","name":"15 amazing things you can do with simple JavaScript 🤯"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/100-free-frontend-challenges-rwz8jfjlf","name":"100 FREE Frontend Challenges"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/open-source-alternatives-to-tools-you-pay-for-gxwg9u2cf","name":"Open Source alternatives to tools you Pay for"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/8-exciting-new-javascript-concepts-you-need-to-know-5uogbl3lh","name":"8 Exciting New JavaScript Concepts You Need to Know"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/frontend-libraries-for-your-next-project-fi3cfgwtl","name":"Frontend Libraries for Your Next Project"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/react-design-patterns-6mzuqvymf","name":"React Design Patterns"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/cors-the-ultimate-guide-s7m6dkbs0","name":"CORS: the ultimate guide"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/why-the-with-method-of-javascript-array-is-a-gem--ogisx6fyi","name":"Why the with() method of JavaScript Array is a gem?"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/10-tips-to-stay-healthy-as-a-developer-qmj0am1ht","name":"10 tips to stay healthy as a developer"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/50-basic-linux-commands-yprippziv","name":"50 basic Linux commands"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/face-api-js-vklr6rjnm","name":"face-api.js"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/dotui-zzs5vimj2","name":"dotUI"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/how-to-center-a-div--kppue99yc","name":"How to center a div?"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/19-microservices-patterns-for-system-design-interviews-qrrbtlyu2","name":"19 Microservices Patterns for System Design Interviews"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/next-js-full-stack-web-app-2024--49kjp9zag","name":"Next.js Full-Stack Web App (2024)"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/patterns-for-javascript-frontend-applications-pnked6itm","name":"Patterns For JavaScript Frontend Applications"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/understanding-apis-10-api-concepts-and-examples-zekpzowwk","name":"Understanding APIs: 10 API Concepts and Examples"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/why-japanese-websites-look-so-different-licw6jvkb","name":"Why Japanese Websites Look So Different"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/git-commands-for-software-engineers-xyri6dipw","name":"Git Commands for Software Engineers"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/the-differences-between-object-and-object-in-typescript-0ovwxcgqx","name":"The Differences Between 'Object', '{}', and 'object' in TypeScript"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/how-to-structure-your-backend-code-in-node-js-express-js--b1yyvse3c","name":"How to Structure Your Backend Code in Node.js (Express.js)"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/8-fun-linux-utilities-7jyk4tnbl","name":"8 fun Linux utilities"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/25-open-source-ai-tools-to-cut-your-development-time-in-half-cdeagmk8e","name":"25 Open Source AI Tools to Cut Your Development Time in Half"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/top-15-animation-libraries-for-react-modern-javascript-apps-ddtoc09he","name":"Top 15 Animation Libraries for React & Modern Javascript Apps"}]},{"@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":"July 2024"}]}]} ```