--- title: Best Community Picks posts — December 2022 | daily.dev description: The most upvoted Community Picks posts from December 2022, curated by the daily.dev community. canonical: https://daily.dev/sources/community/best-of/2022/12 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/community/best-of/2022/12 og:type: website og:site_name: daily.dev og:title: Best Community Picks posts — December 2022 | daily.dev og:description: The most upvoted Community Picks posts from December 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 Community Picks — December 2022 1. 1 [](https://daily.dev/posts/super-useful-css-resources---2bztdgt6 "Super Useful CSS Resources 🌈") Article Community Picks · 4y Super Useful CSS Resources 🌈 A collection of 70 hand-picked, web-based tools which are actually useful. Each will generate pure CSS without the need for JS or any external libraries. Full credit goes to the authors behind each of these apps (where possible I've linked to their GH/ socials) The collection includes Property Generators - Animations - Backgrounds. 374 20 2. 2 [](https://daily.dev/posts/awesome-dev-tool-tips--rriv8zu39 "Awesome Dev Tool Tips 🔥") Article Community Picks · 4y Awesome Dev Tool Tips 🔥 The command pallet gives you full access to every command available within the dev tools, and is super valuable for quick navigation. For an app built with a framework, you'll probably see a lot of irrelevant files. For certain common console commands, you can watch values in real-time using Live Expressions. 304 18 3. 3 [](https://daily.dev/posts/the-complete-guide-to-system-design-in-2022-lfzjtayhf "The complete guide to System Design in 2022") Article Community Picks · 4y The complete guide to System Design in 2022 System Design is the process of defining the architecture, interfaces, and data for a system that satisfies specific requirements. System design meets the needs of your business or organization through coherent and efficient systems. The complete guide to System Design Interview in 2022 is available. 219 9 4. 4 [](https://daily.dev/posts/chrome-extensions-of-the-month---december-2022--qpgs3k5u "Chrome Extensions of the Month - December 2022") Article Community Picks · 4y Chrome Extensions of the Month - December 2022 DeepL Translate Translate lets you translate from one language to another. StayFree is analytics, self-control, productivity, and web addiction controller extension. Nova is one of the best new tab extensions for Chrome with a minimalistic, light and dark theme. 210 39 5. 5 [](https://daily.dev/posts/10-games-to-learn-javascript-rjy-kqgyc "10 games to learn JavaScript") Article Community Picks · 4y 10 games to learn JavaScript CodinGame CodinGame is a multi-language platform where you can learn several languages, including JavaScript. The cool thing about it is that you can use it as a multiplayer game, which is excellent as you can compete against your friends or coworkers. CheckIO CheckIO is an excellent text-based game with some fantastic graphics. 147 10 6. 6 [](https://daily.dev/posts/building-a-music-player-in-react-cj9vvnkvu "Building a Music Player in React") Article Community Picks · 4y Building a Music Player in React The missing projects are the music player and video player. Both of the projects will give you the opportunity to handle audio and video. You will learn many things such as handling audio for playing and pausing audio. Today, we are going to build a music player in React. 130 12 7. 7 [](https://daily.dev/posts/important-javascript-concepts-fue7jx8r2 "Important JavaScript concepts") Article Community Picks · 4y Important JavaScript concepts The important JavaScript concepts that programmers need to be familiar with are covered in this article. Many developers obtain surprising outputs when unfamiliar with the idea of hoisting in Javascript. The above programs work as below and the output will be undefined. The main benefits of using IIFE are data privacy and quick code execution. 128 10 8. 8 [](https://daily.dev/posts/vite-4-0-is-out--as9udfgh4 "Vite 4.0 is out!") Article Community Picks · 4y Vite 4.0 is out! Vite 4.0 is out! Vite 3 was released five months ago. Vite is now using Rollup 3, which allowed us to simplify Vite's internal asset handling. 128 9 9. 9 [](https://daily.dev/posts/why-use-nextjs--wkvj6vhdh "Why use NextJS?") Article Community Picks · 4y Why use NextJS? Next.js allows you to develop fast and user-friendly web applications and static websites using React.js. It is a ReactJS framework for building server-rendered web applications. It includes a number of features out of the box, such as Automatic code splitting, filesystem-based routing, hot code reloading and universal rendering. 106 17 10. 10 [](https://daily.dev/posts/generate-pretty-code-app-screenshots--jsimt7baz "Generate Pretty Code / App Screenshots 📸") Article Community Picks · 4y Generate Pretty Code / App Screenshots 📸 The following free tools will generate nicely formatted screenshots of code, device mockups and embedded info. Generate Pretty Code / App Screenshots. The App Launchpad (requires sign up) makes it easy to build beautiful screenshots for your app, optimised for publishing to Google Play and Apple Store. 106 7 11. 11 [](https://daily.dev/posts/ci-cd-tutorial-for-developers-tmtoqdj5g "CI/CD Tutorial For Developers") Article Community Picks · 4y CI/CD Tutorial For Developers Continuous integration (CI) and continuous delivery (CD) helps IT organizations streamline their development process by automating manual tasks related to code deployment. Continuous delivery automates the release process and ensures that code is always in a releasable state. CI/CD can also be as simple as moving away from software delivery practices to cloud-native ones. 105 1 12. 12 [](https://daily.dev/posts/how-to-become-a-front-end-developer-efhgtlx9c "How to Become a Front-End Developer") Article Community Picks · 4y How to Become a Front-End Developer Front-end development involves building the visual and interactive elements of websites and applications that users interact with. As a front-end developer, you will be responsible for designing and implementing the user interface of web and mobile applications. You can learn web development from basics to advanced topics through online courses and programs. 88 24 13. 13 [](https://daily.dev/posts/how-to-solve-coding-issues-using-chatgpt-zezeypp1m "How to solve coding issues using ChatGPT") Article Community Picks · 4y How to solve coding issues using ChatGPT The most direct way to avoid a side effect is to use a separate process. So how would you do that if the job is assigned to you? I will use the npm command. So let’s ask the omniscient again: This looks like a clean solution to me. 87 14 14. 14 [](https://daily.dev/posts/how-to-make-a-better-responsive-web-design-twvhxj6bv "How to Make a Better Responsive Web Design") Article Community Picks · 4y How to Make a Better Responsive Web Design responsive web design and adaptive web design are two approaches to creating websites that work well on a wide range of devices and screen sizes. Responsive web design involves creating a single layout that adjusts itself automatically to fit the size of the screen it is being displayed on. Adaptive design requires the browser to load the appropriate layout. 85 14 15. 15 [](https://daily.dev/posts/avoiding-5-common-git-mistakes-in-a-team-environment-qnfhjn2su "Avoiding (5) common Git mistakes in a team environment") Article Community Picks · 4y Avoiding (5) common Git mistakes in a team environment Intruduction Git is an incredibly powerful tool for managing software projects, but it can also be tricky to use in a team setting. In this article, we will explore five common mistakes that developers make when using Git. The five biggest mistakes include not using branches effectively and not communicating with the team. 83 1 16. 16 [](https://daily.dev/posts/responsive-navbar-without-javascript-foecp0utf "Responsive Navbar without Javascript") Article Community Picks · 4y Responsive Navbar without Javascript The major CSS section will be explained, and the remaining code will be provided in the code pen at the end of this blog. I'll use the :has() selector for the toggle effect; you can see which browsers support it here. The bars and cross icons will likewise be toggled by this checkbox. 71 5 17. 17 [](https://daily.dev/posts/a-cheatsheet-for-git-2xmu77rx "A Cheatsheet For Git") Article Community Picks · 4y A Cheatsheet For Git A Cheatsheet For Git Here is a cheat sheet for some commonly used Git commands. Set your name to be used as the commit author git config --global user. Create aliases for commonly used commands. 70 6 18. 18 [](https://daily.dev/posts/why-i-m-optimistic-about-javascript-s-future-tdcrvbbzl "Why I'm Optimistic About JavaScript's Future") Article Community Picks · 4y Why I'm Optimistic About JavaScript's Future The three major browser engines (Chromium/Chrome, Gecko/Firefox, and Webkit/Safari) now have the best cross-browser support for JavaScript, CSS and Web APIs we’ve ever seen. This post will outline recent improvements to the web platform across the browser, server, and edge. 64 2 19. 19 [](https://daily.dev/posts/conditional-wrapping-in-react-sovkgayui "Conditional wrapping in React") Article Community Picks · 4y Conditional wrapping in React Conditional wrapping in React is something you do not always need, but I wrote this article for those looking for it. In some cases, they explain a service, but in others, they need to link to a detail page. When a specific flag is set, the component should get a parent wrapper to display it in a different variant. 65 4 20. 20 [](https://daily.dev/posts/applying-design-patterns-in-react-strategy-pattern-sy8tqkkwb "Applying Design Patterns in React: Strategy Pattern") Article Community Picks · 4y Applying Design Patterns in React: Strategy Pattern The problem: Shotgun Surgery Shotgun Surgery is a code smell where making any modifications requires making many small changes to many different places. With this solution, we simply need to add a new strategy class, and we don't need to modify any of the existing code. By doing so, we're satisfying S.O.L. 63 3 21. 21 [](https://daily.dev/posts/12-days-of-web-rcqtacopw "12 Days of Web") Article Community Picks · 4y 12 Days of Web CSS:has() is behind a flag in Firefox and supported in Chrome, Edge, and Safari. It can match an ancestor element based on containing a specific descendant, but it can also match antecedent elements based on subsequent content. In the following pseudo-code, you can select any that has a later sibling. 62 1 22. 22 [](https://daily.dev/posts/understanding-javascript-promises--lqmd-jrak "Understanding JavaScript Promises👩‍💻👨‍💻") Article Community Picks · 4y Understanding JavaScript Promises👩‍💻👨‍💻 Promises are handy in complex logic applications and provide better error handling than callbacks. Promises are the perfect choice for handling multiple callbacks at once. In JavaScript, we use to catch errors. It only handles errors that may happen between methods. The Pyramid of Doom is also known as callback hell. 58 2 23. 23 [](https://daily.dev/posts/system-design-basics-what-is-an-api-gateway--u6nmxeh43 "System Design Basics: What is an API Gateway?") Article Community Picks · 4y System Design Basics: What is an API Gateway? API gateway is a server that acts as a single point of entry for a set of microservices. It receives client requests, forwards them to the appropriate microservice, and then returns the server’s response to the client. This enables microservices to focus on their individual tasks and improves the overall performance of the system. 55 24. 24 [](https://daily.dev/posts/how-i-built-a-vue-js-ecommerce-store-with-a-node-js-backend-9kpggkgko "How I Built a Vue.js Ecommerce Store with a Node.js Backend") Article Community Picks · 4y How I Built a Vue.js Ecommerce Store with a Node.js Backend Vue.js has been rising in popularity since it was first released due to its many advantages. It can be used to build a variety of apps, including websites, mobile apps, or desktop apps. For the backend, you’ll learn how to use Medusa, an open source Node.js commerce engine. 53 6 25. 25 [](https://daily.dev/posts/javascript-events-bubbling-capturing-and-propagation--autogzmx "JavaScript Events: Bubbling, Capturing, and Propagation") Article Community Picks · 4y JavaScript Events: Bubbling, Capturing, and Propagation JavaScript Events: Bubbling, Capturing, and Propagation are examples of how events travel through the Document Object Model (DOM) tree. The DOM tree is the structure which contains parent/child/sibling elements in relation to each other. You can set listeners to watch for these events that will trigger your desired functionality. 53 3 [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/2022/12#page","url":"https://daily.dev/sources/community/best-of/2022/12","name":"Best Community Picks Posts — December 2022","description":"The most upvoted Community Picks posts from December 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/community/best-of/2022/12#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/super-useful-css-resources---2bztdgt6","name":"Super Useful CSS Resources 🌈"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/awesome-dev-tool-tips--rriv8zu39","name":"Awesome Dev Tool Tips 🔥"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/the-complete-guide-to-system-design-in-2022-lfzjtayhf","name":"The complete guide to System Design in 2022"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/chrome-extensions-of-the-month---december-2022--qpgs3k5u","name":"Chrome Extensions of the Month - December 2022"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/10-games-to-learn-javascript-rjy-kqgyc","name":"10 games to learn JavaScript"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/building-a-music-player-in-react-cj9vvnkvu","name":"Building a Music Player in React"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/important-javascript-concepts-fue7jx8r2","name":"Important JavaScript concepts"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/vite-4-0-is-out--as9udfgh4","name":"Vite 4.0 is out!"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/why-use-nextjs--wkvj6vhdh","name":"Why use NextJS?"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/generate-pretty-code-app-screenshots--jsimt7baz","name":"Generate Pretty Code / App Screenshots 📸"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/ci-cd-tutorial-for-developers-tmtoqdj5g","name":"CI/CD Tutorial For Developers"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/how-to-become-a-front-end-developer-efhgtlx9c","name":"How to Become a Front-End Developer"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/how-to-solve-coding-issues-using-chatgpt-zezeypp1m","name":"How to solve coding issues using ChatGPT"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/how-to-make-a-better-responsive-web-design-twvhxj6bv","name":"How to Make a Better Responsive Web Design"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/avoiding-5-common-git-mistakes-in-a-team-environment-qnfhjn2su","name":"Avoiding (5) common Git mistakes in a team environment"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/responsive-navbar-without-javascript-foecp0utf","name":"Responsive Navbar without Javascript"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/a-cheatsheet-for-git-2xmu77rx","name":"A Cheatsheet For Git"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/why-i-m-optimistic-about-javascript-s-future-tdcrvbbzl","name":"Why I'm Optimistic About JavaScript's Future"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/conditional-wrapping-in-react-sovkgayui","name":"Conditional wrapping in React"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/applying-design-patterns-in-react-strategy-pattern-sy8tqkkwb","name":"Applying Design Patterns in React: Strategy Pattern"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/12-days-of-web-rcqtacopw","name":"12 Days of Web"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/understanding-javascript-promises--lqmd-jrak","name":"Understanding JavaScript Promises👩‍💻👨‍💻"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/system-design-basics-what-is-an-api-gateway--u6nmxeh43","name":"System Design Basics: What is an API Gateway?"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/how-i-built-a-vue-js-ecommerce-store-with-a-node-js-backend-9kpggkgko","name":"How I Built a Vue.js Ecommerce Store with a Node.js Backend"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/javascript-events-bubbling-capturing-and-propagation--autogzmx","name":"JavaScript Events: Bubbling, Capturing, and Propagation"}]},{"@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":"December 2022"}]}]} ```