--- title: Best developer posts — April 2022 | daily.dev description: The most upvoted daily.dev posts from April 2022, curated by the daily.dev community. canonical: https://daily.dev/posts/best-of/2022/04 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/posts/best-of/2022/04 og:type: website og:site_name: daily.dev og:title: Best developer posts — April 2022 | daily.dev og:description: The most upvoted daily.dev posts from April 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 — April 2022 1. 1 [](https://daily.dev/posts/free-open-source-tailwind-css-components-tqkhcla01 "Free Open Source Tailwind CSS Components") Article Changelog · 4y Free Open Source Tailwind CSS Components HyperUI is a collection of free Tailwind CSS components that can be used in your next project. With a range of components, you can build your next marketing website, admin dashboard, ecommerce store and much more. HyperUI is an open source collection of Tailwind components. 1K 84 2. 2 [](https://daily.dev/posts/warp-the-terminal-for-the-21st-century-yganuhkmc "Warp: The terminal for the 21st century") Article Hacker News · 4y Warp: The terminal for the 21st century A new terminal developed in Rust, I instantly fell in love when I tried it. There's just no going back from the incredible navigation workflows you can achieve with this tool. If the terminal had been invented today, this what we would get. Bravo! @warpdotdev. 462 59 3. 3 [](https://daily.dev/posts/the-front-end-developer-s-guide-to-the-terminal-yydefkoh1 "The Front-End Developer's Guide to the Terminal") Article Josh W Comeau · 4y The Front-End Developer's Guide to the Terminal Modern front-end frameworks like React, Angular, and Vue rely heavily on the terminal. If you're not comfortable with command line interfaces, you'll struggle to run a local development server or build your application. We don't really need to know 98% of the stuff you can do with a terminal. Instead, we should focus on the most-important critical fundamentals. 456 27 4. 4 [](https://daily.dev/posts/the-complete-guide-to-regular-expressions-regex--4wkqhdpap "The Complete Guide to Regular Expressions (Regex)") Article DEV · 4y The Complete Guide to Regular Expressions (Regex) A Regular Expression is a syntax that allows you to match strings with specific patterns. A regular expression adds the ability to use quantifiers, pattern collections, special characters, and capture groups to create extremely advanced search patterns. Regex can be used any time you need to query string-based data, such as analyzing command line output. 355 14 5. 5 [](https://daily.dev/posts/introducing-json-hero-an-open-source-beautiful-json-viewer-for-the-web-that-lets-you-browse-searc-j2mqwvq0d "Introducing JSON Hero: an open-source, beautiful JSON viewer for the web that lets you browse, search and navigate your JSON files at speed. 🚀") Article Hashnode · 4y Introducing JSON Hero: an open-source, beautiful JSON viewer for the web that lets you browse, search and navigate your JSON files at speed. 🚀 Johannes Schulte has created a tool to make reading and understanding JSON easier and more efficient than a Wall-O-Text. JSON Hero is a remix React app that runs on Cloudflare Workers, written in Typescript. It can automatically infer the content of the selected item and give you intelligent previews for dates and times. 342 21 6. 6 [](https://daily.dev/posts/those-html-elements-you-never-use-uq1mwumvi "Those HTML Elements You Never Use") Article DEV · 4y Those HTML Elements You Never Use There are over a hundred elements in HTML that can be applied to pieces of text to give them special meaning in a document. In this article, I dive deep into the HTML documentation, to come out with a handy bag of elements that will improve your website in not one, but two very important ways. 319 35 7. 7 [](https://daily.dev/posts/commit-like-a-pro-q51yuvnnc "Commit Like a Pro") Article Hashnode · 4y Commit Like a Pro Committing changes is a common action that many developers do most of the time in case of contribution. You stage your changes and commit them so then they will be trackable in the history. In this article, we are going to talk about some common conventions and git commit best practices in order to make perfect commits. 316 17 8. 8 [](https://daily.dev/posts/json-visio-llr-zs7mr "JSON Visio") Article Changelog · 4y JSON Visio 254 20 9. 9 [](https://daily.dev/posts/build-5-web-apps-in-10-hours-using-next-js-react-js-tailwind-css--qpthdhwra "Build 5 Web Apps in 10 Hours using Next.js, React.js & Tailwind CSS.") Article Hashnode · 4y Build 5 Web Apps in 10 Hours using Next.js, React.js & Tailwind CSS. This post tutorial shows you how to build 5 Web Apps in 10 hours. All of the web apps are part of the Frontend Mentor challenge projects. The goal is to make it look like the design given by the Front End Mentor. Here are the links to all the projects that we will build. 201 14 10. 10 [](https://daily.dev/posts/10-books-every-senior-engineer-should-read-luuq-2vzp "10 Books Every Senior Engineer Should Read") Article Semaphore · 4y 10 Books Every Senior Engineer Should Read Engineers are natural readers. They take enormous pleasure in learning about new things. Books are the perfect medium to cover complex ideas in depth. This list contains a mixture of classic, timeless texts and modern game-changing publications. Anyone interested in software development would enrich their skillset by reading them. 199 6 11. 11 [](https://daily.dev/posts/the-array-methods-coming-to-javascript-in-2022-2halxlkl0 "The Array Methods Coming to JavaScript in 2022") Article Hacker Noon · 4y The Array Methods Coming to JavaScript in 2022 A new specification has been written which will give us a host of new ways to copy and then change an array. This proposal is called the "Change Array by Copy" proposal. Currently, these features are not supported in any major browser or Node.JS version. We can expect them to be supported soon though since this specification has reached Stage 3 in the Javascript proposal process. 184 12 12. 12 [](https://daily.dev/posts/how-to-detect-dead-code-in-a-frontend-project-oqwgwn-j3 "How to detect dead code in a frontend project") Article LogRocket · 4y How to detect dead code in a frontend project Using ESLint to detect and remove dead code in your frontend project.Using webpack for dead code detection.Using TypeScript to detect dead code.Detect unused dependencies with depcheck.Using the no-unused-vars rule to detect unused variables in our files. 184 9 13. 13 [](https://daily.dev/posts/3-design-patterns-every-developer-should-learn-iq36fcddz "3 Design Patterns Every Developer Should Learn") Article Bits and Pieces · 4y 3 Design Patterns Every Developer Should Learn When numerous algorithms for a given strategy (interface) are required, this pattern comes in handy. Singleton Design Pattern is used when only one instance of a class is required. Observer Design Pattern enables you to set up a subscription mechanism that permits other entities to be alerted of each occurrence on the entity to which you are subscribed. 171 10 14. 14 [](https://daily.dev/posts/z4nzu-hackingtool-all-in-one-hacking-tool-for-hackers-gpooy5ieh "Z4nzu/hackingtool: ALL IN ONE Hacking Tool For Hackers") Article Pointer · 4y Z4nzu/hackingtool: ALL IN ONE Hacking Tool For Hackers All in One Hacking tool For Hackers. Kali Linux in WIndows10 Without VirtualBox YOUTUBE. New Tools Reverse Engineering RAT Tools Web Crawling Payload Injector. SocialMedia Bruteforce Android Hacking tools. Hash cracking tools Wifi Deauthenticate SocialMedia Finder. 166 2 15. 15 [](https://daily.dev/posts/i-design-you-build---frontend-challenge-4-supabase-version--hildepmm0 "I Design, You Build! - Frontend Challenge #4 (Supabase version)") Article Hashnode · 4y I Design, You Build! - Frontend Challenge #4 (Supabase version) This is the first prizes giveaway for "I Design, You Build" series. There will be AWESOME SWAG prizes to rewards 5 winners that has the best submission (I will be the judge) The judging period will be 1 month time from the today! Dateline for submission will be 7 May 2022. 163 16. 16 [](https://daily.dev/posts/web-design-principles-544p5rlco "Web design principles") Article Dev Genius · 4y Web design principles Choosing the right colour is very important and you can’t just choose your favourite colour. A colourful website does not mean using all the different colours, be consistent and choose a single colour as your theme colour. When picking colours think about the mood of your colour palette. Typography is another important part of a website. 158 18 17. 17 [](https://daily.dev/posts/git-commands-c3u6ckk28 "Git commands") Article Hashnode · 4y Git commands Git is a free and open-source distributed version control system that's responsible for everything GitHub related that happens locally on your system. GitHub is a web-based platform where you can share your work with other developers and showcase your learnings. Git is used if you need to rewrite the history of a project. 148 5 18. 18 [](https://daily.dev/posts/how-to-solve-coding-problems-like-a-pro-vvmin4o8p "How To Solve Coding Problems Like A Pro") Article Hashnode · 4y How To Solve Coding Problems Like A Pro According to Indeed, an American worldwide employment website for job listings, problem-solving skills are the 4th most important skill required as a programmer. In this article, I'll work you through 4 step framework on how to solve problems like a professional. We'll also solve a real problem to solidify our understanding. 145 16 19. 19 [](https://daily.dev/posts/article-modal-rvq3q47gc "Article Modal") Article daily.dev Changelog · 4y Article Modal When you click on a card in one of the feeds to comment, we will now show you our new article modal, instead of a new page. We have introduced next and previous article buttons, coupled with left and right arrow key navigation. We also made the UI far more intuitive with a nice big "read article" button once you have read the TLDR and decide this article is worth a read! 143 32 20. 20 [](https://daily.dev/posts/18-github-repositories-to-become-a-css-master--r-ixiotle "18 GitHub Repositories to Become a CSS Master 🎨🧙‍♂️") Article Hashnode · 4y 18 GitHub Repositories to Become a CSS Master 🎨🧙‍♂️ A while ago I wrote an article about the repositories you need to master JavaScript. It got some great feedback, so I decided to make a sequel about CSS as well. I have further sorted all the resources into categories from learning the basics to style guides, best practices, useful tricks, and additional resources you can study. 137 12 21. 21 [](https://daily.dev/posts/automatic-dark-mode-with-javascript-qcjioaz8b "Automatic Dark Mode With JavaScript") Article Medium · 4y Automatic Dark Mode With JavaScript Detecting Users’ OS Dark Mode Preference Using matchMedia() using JavaScript. For many users, dark mode provides a more eye-friendly interface with fewer white tones that can cause eyestrain. In JavaScript, you can takes advantage of the Window interface’s match media() method to check the value of the prefers-color-scheme CSS feature. 135 4 22. 22 [](https://daily.dev/posts/css-tips-n0uz1lonu "CSS Tips") Article Pointer · 4y CSS Tips Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility. 132 25 23. 23 [](https://daily.dev/posts/devtooly---directory-of-tools-organized-by-category-for-frontend-devs-azvwzeckb "devtooly - Directory of tools organized by category for frontend devs") Article Product Hunt · 4y devtooly - Directory of tools organized by category for frontend devs 132 8 24. 24 [](https://daily.dev/posts/how-long-since-google-said-a-google-drive-linux-client-is-coming--ejncalvyc "How long since Google said a Google Drive Linux client is coming?") Article Hacker News · 4y How long since Google said a Google Drive Linux client is coming? 125 11 25. 25 [](https://daily.dev/posts/node-js-18-is-now-available--hepdul0bf "Node.js 18 is now available!") Article Node.js · 4y Node.js 18 is now available! Node.js 18 is now available. Highlights include the update of the V8 JavaScript engine to 10.1, global fetch enabled by default, and a core test runner module. The Node:test module facilitates the creation of JavaScript tests that report results in TAP format. 126 9 [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/04#page","url":"https://daily.dev/posts/best-of/2022/04","name":"Best Developer Posts — April 2022","description":"The most upvoted daily.dev posts from April 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/posts/best-of/2022/04#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/free-open-source-tailwind-css-components-tqkhcla01","name":"Free Open Source Tailwind CSS Components"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/warp-the-terminal-for-the-21st-century-yganuhkmc","name":"Warp: The terminal for the 21st century"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/the-front-end-developer-s-guide-to-the-terminal-yydefkoh1","name":"The Front-End Developer's Guide to the Terminal"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/the-complete-guide-to-regular-expressions-regex--4wkqhdpap","name":"The Complete Guide to Regular Expressions (Regex)"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/introducing-json-hero-an-open-source-beautiful-json-viewer-for-the-web-that-lets-you-browse-searc-j2mqwvq0d","name":"Introducing JSON Hero: an open-source, beautiful JSON viewer for the web that lets you browse, search and navigate your JSON files at speed. 🚀"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/those-html-elements-you-never-use-uq1mwumvi","name":"Those HTML Elements You Never Use"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/commit-like-a-pro-q51yuvnnc","name":"Commit Like a Pro"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/json-visio-llr-zs7mr","name":"JSON Visio"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/build-5-web-apps-in-10-hours-using-next-js-react-js-tailwind-css--qpthdhwra","name":"Build 5 Web Apps in 10 Hours using Next.js, React.js & Tailwind CSS."},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/10-books-every-senior-engineer-should-read-luuq-2vzp","name":"10 Books Every Senior Engineer Should Read"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/the-array-methods-coming-to-javascript-in-2022-2halxlkl0","name":"The Array Methods Coming to JavaScript in 2022"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/how-to-detect-dead-code-in-a-frontend-project-oqwgwn-j3","name":"How to detect dead code in a frontend project"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/3-design-patterns-every-developer-should-learn-iq36fcddz","name":"3 Design Patterns Every Developer Should Learn"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/z4nzu-hackingtool-all-in-one-hacking-tool-for-hackers-gpooy5ieh","name":"Z4nzu/hackingtool: ALL IN ONE Hacking Tool For Hackers"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/i-design-you-build---frontend-challenge-4-supabase-version--hildepmm0","name":"I Design, You Build! - Frontend Challenge #4 (Supabase version)"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/web-design-principles-544p5rlco","name":"Web design principles"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/git-commands-c3u6ckk28","name":"Git commands"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/how-to-solve-coding-problems-like-a-pro-vvmin4o8p","name":"How To Solve Coding Problems Like A Pro"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/article-modal-rvq3q47gc","name":"Article Modal"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/18-github-repositories-to-become-a-css-master--r-ixiotle","name":"18 GitHub Repositories to Become a CSS Master 🎨🧙‍♂️"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/automatic-dark-mode-with-javascript-qcjioaz8b","name":"Automatic Dark Mode With JavaScript"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/css-tips-n0uz1lonu","name":"CSS Tips"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/devtooly---directory-of-tools-organized-by-category-for-frontend-devs-azvwzeckb","name":"devtooly - Directory of tools organized by category for frontend devs"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/how-long-since-google-said-a-google-drive-linux-client-is-coming--ejncalvyc","name":"How long since Google said a Google Drive Linux client is coming?"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/node-js-18-is-now-available--hepdul0bf","name":"Node.js 18 is now available!"}]},{"@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":"April 2022"}]}]} ```