--- title: Best developer posts — December 2022 | daily.dev description: The most upvoted daily.dev posts from December 2022, curated by the daily.dev community. canonical: https://daily.dev/posts/best-of/2022/12 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/posts/best-of/2022/12 og:type: website og:site_name: daily.dev og:title: Best developer posts — December 2022 | daily.dev og:description: The most upvoted daily.dev 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 daily.dev — 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/finally-a-free-and-open-source-resume-builder-without-watermarks-or-limitations-ynyixf6cr "Finally, a Free (and Open Source) Resume Builder Without Watermarks or Limitations") Article DEV · 4y Finally, a Free (and Open Source) Resume Builder Without Watermarks or Limitations Free (and Open Source) Resume Builder Without Watermarks or Limitations is free. Reactive Resume is a free and open source resume builder. It's easy to use, and you can create an account to save any number of resumes. You can export your resume as a JSON to backup to your own devices. 368 30 3. 3 [](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 4. 4 [](https://daily.dev/posts/codeimage---a-tool-for-manage-and-beautify-your-code-screenshots--xs-eodvc "CodeImage - A tool for manage and beautify your code screenshots") Article Product Hunt · 4y CodeImage - A tool for manage and beautify your code screenshots Free CodeImage is a web application that allows you to manage and beautify your code screenshots. It's an open source side project born thanks to the SolidJS hackathon. It's currently maintained and is maintained by the team. 245 21 5. 5 [](https://daily.dev/posts/uiverse-io---universe-of-ui-hundreds-of-open-source-ui-elements-ejen0drwy "uiverse.io - Universe of UI; Hundreds of Open Source UI elements") Article Product Hunt · 4y uiverse.io - Universe of UI; Hundreds of Open Source UI elements All elements are open source and free to use. We make it easy to find and customize the perfect element for your project. We also offer hundreds of community-made CSS and HTML UI elements like buttons, inputs, checkboxes and cards. 223 17 6. 6 [](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 7. 7 [](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 8. 8 [](https://daily.dev/posts/learn-next-js-for-scalable-web-apps-uiwr4haqa "Learn Next.js for Scalable Web Apps") Article freeCodeCamp · 4y Learn Next.js for Scalable Web Apps Next.js is built on top of React, which is a popular JavaScript library for building user interfaces. It also includes features such as automatic code splitting and optimized performance out of the box. You will also learn how to deploy the app using Vercel and to sync up GitHub with Vercel. 211 11 9. 9 [](https://daily.dev/posts/react-js-best-practices-waoh0crtk "React JS Best Practices") Article Medium · 4y React JS Best Practices The React style guide is a set of recommendations for writing clean, maintainable code with React. Hooks are a new feature in React that allow you to use state and other React features without writing a class. The React memo higher-order component is a way to optimize the performance of your functional components. 188 14 10. 10 [](https://daily.dev/posts/rippleui---cleanest-modern-and-beatifull-tailwind-css-components-d9qeslnmi "RippleUI - Cleanest, modern and beatifull Tailwind CSS components") Article Product Hunt · 4y RippleUI - Cleanest, modern and beatifull Tailwind CSS components RippleUI is a collection of components that can be easily integrated into your project to provide a consistent, responsive design and improve the user experience of your application. This is RippleUI's first launch. RippleUI was hunted by Mauricio Siu in Design Tools. 188 27 11. 11 [](https://daily.dev/posts/20-git-commands-you-probably-didn-t-know-about--exulmgvev "20 Git Commands you (probably) didn't know about 🧙‍♂️") Article DEV · 4y 20 Git Commands you (probably) didn't know about 🧙‍♂️ A lot of these commands are incredibly powerful and can make your life a lot easier. This post outlines 20 of my favourite under-used git features, which you can use to level up your development process, impress your colleagues, help you answer git interview questions, and most importantly - have fun with! Git Web Run to instantly browse your working repository. 177 9 12. 12 [](https://daily.dev/posts/markdown-cheatsheet-kems16r-x "Markdown Cheatsheet") Article KDnuggets · 4y Markdown Cheatsheet Markdown Cheatsheet is a lightweight markup language for creating formatted text using a plain-text editor. Markdown is widely-used in blogging, documentation, collaboration. It is heavily-relied upon in the R programming language ecosystem to create reproducible documents, provide a notebook interface, and format output. 161 8 13. 13 [](https://daily.dev/posts/hour-of-code-top-5-frontend-projects-dc1vlv-br "Hour of Code: Top 5 Frontend Projects") Article JetBrains · 4y Hour of Code: Top 5 Frontend Projects JetBrains Academy has released three frontend projects for frontend developers this summer. The most popular projects are HTML, CSS, and JavaScript. These tracks include a huge variety of real-life projects to keep you engaged during your studies. To help you develop and train this useful skill, we invite you to create a Virtual Piano app. 149 7 14. 14 [](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 15. 15 [](https://daily.dev/posts/improve-your-javascript-skills-by-coding-a-card-game-b0j0qe7rv "Improve Your JavaScript Skills by Coding a Card Game") Article freeCodeCamp · 4y Improve Your JavaScript Skills by Coding a Card Game Coding a Card Game Building projects is a great way to improve your programming skills. We just published a course on the freeCodeCamp.org YouTube channel that will teach you how to create a digital card game with JavaScirpt, HTML, and CSS. 143 3 16. 16 [](https://daily.dev/posts/git-skills-you-didn-t-know-you-wanted-cyoqxfimo "Git skills you didn’t know you wanted") Article Towards Dev · 4y Git skills you didn’t know you wanted Most git beginners just learn basic commands like add, commit and push. It is easy to stick with these commands because they get the job done. In this article, you will learn additional tricks for commands that you already know to improve your experience with version control. 134 10 17. 17 [](https://daily.dev/posts/how-to-build-a-secure-api-gateway-in-node-js-igtqoba7u "How to build a secure API gateway in Node.js") Article Snyk · 4y How to build a secure API gateway in Node.js API gateways can provide a clear path for your front-end applications (e.g., websites and native apps) to all of your back-end functionality. They can act as aggregators for the microservices and as middleware to handle common concerns, such as authentication and authorization. The most popular choice for Node. 133 7 18. 18 [](https://daily.dev/posts/ai-query---generate-sql-queries-with-ai-in-seconds-jjoaf5zo6 "AI Query - Generate SQL Queries with AI in Seconds") Article Product Hunt · 4y AI Query - Generate SQL Queries with AI in Seconds The fastest way for engineers to generate queries using basic English and let AI do the heavy lifting for you. With AI Query anyone can create efficient queries, without even knowing a thing about it. AI Query is not rated yet. This is AI Query's first launch. 131 5 19. 19 [](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 20. 20 [](https://daily.dev/posts/cattocss---css-animations-library-3e1hugh7k "cattocss - CSS Animations Library") Article Product Hunt · 4y cattocss - CSS Animations Library Cattocss is a CSS animations library online where you can use the source code without installing dependencies in your web project. The fastest way to record and share videos at work is cattOCss's first launch. It is not rated yet. 130 7 21. 21 [](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 22. 22 [](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 23. 23 [](https://daily.dev/posts/build-a-real-time-chat-app-with-rust-and-react-yiq-lg-kb "Build a real-time chat app with Rust and React") Article LogRocket · 4y Build a real-time chat app with Rust and React Rust is known for its speed and reliability, while React is one of the most popular frontend frameworks for building user interfaces. In this article, we’ll demonstrate how to build a real-time chat app with Rust and React that offers functionality for chat, checking user status, and indicating when a user is typing. 125 5 24. 24 [](https://daily.dev/posts/ai-code-reviewer---ai-reviews-your-code-u-7p2lgap "AI Code Reviewer - AI reviews your code") Article Product Hunt · 4y AI Code Reviewer - AI reviews your code AI reviews your code Products Best products. Discover the best products by month. Check out launches that are coming soon. 123 18 25. 25 [](https://daily.dev/posts/i-asked-chat-gpt-to-build-a-to-do-app-have-we-finally-met-our-replacement--v7vzrd1qs "I asked Chat GPT to build a To-Do app — Have we finally met our replacement?") Article Bits and Pieces · 4y I asked Chat GPT to build a To-Do app — Have we finally met our replacement? Chat GPT asked Chat GPT to build a To-Do app - Have we finally met our replacement? Are we about to be replaced by an AI, again? We saw the release of GitHub Copilot in October of 2021 and the whole dev community went crazy again. But are they right this time around? 119 24 [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/12#page","url":"https://daily.dev/posts/best-of/2022/12","name":"Best Developer Posts — December 2022","description":"The most upvoted daily.dev posts from December 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/posts/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/finally-a-free-and-open-source-resume-builder-without-watermarks-or-limitations-ynyixf6cr","name":"Finally, a Free (and Open Source) Resume Builder Without Watermarks or Limitations"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/awesome-dev-tool-tips--rriv8zu39","name":"Awesome Dev Tool Tips 🔥"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/codeimage---a-tool-for-manage-and-beautify-your-code-screenshots--xs-eodvc","name":"CodeImage - A tool for manage and beautify your code screenshots"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/uiverse-io---universe-of-ui-hundreds-of-open-source-ui-elements-ejen0drwy","name":"uiverse.io - Universe of UI; Hundreds of Open Source UI elements"},{"@type":"ListItem","position":6,"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":7,"url":"https://daily.dev/posts/chrome-extensions-of-the-month---december-2022--qpgs3k5u","name":"Chrome Extensions of the Month - December 2022"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/learn-next-js-for-scalable-web-apps-uiwr4haqa","name":"Learn Next.js for Scalable Web Apps"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/react-js-best-practices-waoh0crtk","name":"React JS Best Practices"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/rippleui---cleanest-modern-and-beatifull-tailwind-css-components-d9qeslnmi","name":"RippleUI - Cleanest, modern and beatifull Tailwind CSS components"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/20-git-commands-you-probably-didn-t-know-about--exulmgvev","name":"20 Git Commands you (probably) didn't know about 🧙‍♂️"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/markdown-cheatsheet-kems16r-x","name":"Markdown Cheatsheet"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/hour-of-code-top-5-frontend-projects-dc1vlv-br","name":"Hour of Code: Top 5 Frontend Projects"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/10-games-to-learn-javascript-rjy-kqgyc","name":"10 games to learn JavaScript"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/improve-your-javascript-skills-by-coding-a-card-game-b0j0qe7rv","name":"Improve Your JavaScript Skills by Coding a Card Game"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/git-skills-you-didn-t-know-you-wanted-cyoqxfimo","name":"Git skills you didn’t know you wanted"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/how-to-build-a-secure-api-gateway-in-node-js-igtqoba7u","name":"How to build a secure API gateway in Node.js"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/ai-query---generate-sql-queries-with-ai-in-seconds-jjoaf5zo6","name":"AI Query - Generate SQL Queries with AI in Seconds"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/building-a-music-player-in-react-cj9vvnkvu","name":"Building a Music Player in React"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/cattocss---css-animations-library-3e1hugh7k","name":"cattocss - CSS Animations Library"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/important-javascript-concepts-fue7jx8r2","name":"Important JavaScript concepts"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/vite-4-0-is-out--as9udfgh4","name":"Vite 4.0 is out!"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/build-a-real-time-chat-app-with-rust-and-react-yiq-lg-kb","name":"Build a real-time chat app with Rust and React"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/ai-code-reviewer---ai-reviews-your-code-u-7p2lgap","name":"AI Code Reviewer - AI reviews your code"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/i-asked-chat-gpt-to-build-a-to-do-app-have-we-finally-met-our-replacement--v7vzrd1qs","name":"I asked Chat GPT to build a To-Do app — Have we finally met our replacement?"}]},{"@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":"December 2022"}]}]} ```