--- title: Best Hashnode posts — March 2022 | daily.dev description: The most upvoted Hashnode posts from March 2022, curated by the daily.dev community. canonical: https://daily.dev/sources/hashnode/best-of/2022/03 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/hashnode/best-of/2022/03 og:type: website og:site_name: daily.dev og:title: Best Hashnode posts — March 2022 | daily.dev og:description: The most upvoted Hashnode posts from March 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 Hashnode — March 2022 1. 1 [](https://daily.dev/posts/how-to-create-a-legendary-github-profile--ilw54eg1c "How to Create a Legendary GitHub Profile?") Article Hashnode · 5y How to Create a Legendary GitHub Profile? I just started blogging here on Hashnode a few weeks ago. Only after I posted my first article realized that Hashnode is much more about than just writing. The greatest opportunity actually is reading. I read whenever I am travelling, smoking or walking on the street and sometimes even on the toilet. I am constantly browsing the Recent section of the Hashnode app. 195 15 2. 2 [](https://daily.dev/posts/how-to-design-better-apis-ft5u2bjel "How to design better APIs") Article Hashnode · 5y How to design better APIs When creating an API from scratch, you need to get many details right. From basic security considerations to using the right HTTP methods, implementing authentication, deciding which requests and responses you should accept and return, ... the list goes on. In this post, I'm trying my best to compress everything I know about what makes a good API. 149 13 3. 3 [](https://daily.dev/posts/css-tricks-to-create-that-dark-futuristic-web3-look-vbi5cpmig "CSS Tricks to Create that Dark Futuristic Web3 Look") Article Hashnode · 5y CSS Tricks to Create that Dark Futuristic Web3 Look The Graph, ARCx Money, Buildspace, Rabbithole, Sushi Swap, and Rare Blocks all have some common designs that achieve this look. Here are some simple styles you can add to your app:Gradient Glowing effect Bright and white text over a dark background Semi transparent backgrounds A quick and easy transition on hover. 148 8 4. 4 [](https://daily.dev/posts/react-useeffect-cleanup-ayts9cxyg "React useEffect cleanup") Article Hashnode · 4y React useEffect cleanup React's useEffect hook is a super hook to run side effects. The hook comes with a cleanup function, which you might not always need, but it can come in handy. Some use-cases for this are to clean up subscriptions, clean up modals and clear timeouts. 95 19 5. 5 [](https://daily.dev/posts/writing-cleaner-css-using-bem-methodology-pqtamxngt "Writing Cleaner CSS using BEM Methodology") Article Hashnode · 5y Writing Cleaner CSS using BEM Methodology The Block Element Modifier methodology (abbreviated BEM) is a popular naming convention for HTML and CSS classes. It helps to keep your code organized and maintainable. BEM is mostly used when you have a project that has multiple pages, HTML selectors and a large code structure. 90 4 6. 6 [](https://daily.dev/posts/react-useeffect-hook-usages-you-must-know-rvpc0rlcj "React useEffect Hook usages you must know") Article Hashnode · 4y React useEffect Hook usages you must know React is a JavaScript-based user interface library. React components are isolated reusable pieces of code logic with their own UI. React provides many standard in-built hooks to manage states, isolate side effects, create references, improve performance, etc. We can also create custom hooks, which are just JavaScript functions with access to many React features. We will learn six usages of useEffect hook to run and clean up a side effect. 63 3 7. 7 [](https://daily.dev/posts/you-can-t-do-everything--azm5lbln3 "You can't do everything*") Article Hashnode · 4y You can't do everything\* Developer: I've personally found myself taking on too many hobbies than I know what to do with. There is simply, no sustainable way to do everything. Accepting that you can't do everything is your secret ticket to getting ridiculously good at smaller set of hobbies you focus on. 54 6 8. 8 [](https://daily.dev/posts/5-secret-features-of-json-you-didn-t-know-about--rdcf3onza "5 Secret features of JSON you didn't know about 🤯") Article Hashnode · 5y 5 Secret features of JSON you didn't know about 🤯 The default stringifier also minifies the JSON, which looks ugly. It can do cool stuff like revive data, use a custom format to encode/decode data, hide certain properties in stringified data, and format your data. Let's dive into some of the cool features. 50 4 9. 9 [](https://daily.dev/posts/local-storage-and-session-storage-javascript--obyeugmff "Local Storage and Session Storage (JavaScript)") Article Hashnode · 5y Local Storage and Session Storage (JavaScript) Local storage and session storage store key-value pairs. Local storage stores an array as a string, while session storage stores a pair. To get an array from local storage, we use JSON.parse. In order to remove a particular key- value pair, we can use localStorage.remove. 42 2 10. 10 [](https://daily.dev/posts/gitlive-now-works-with-any-git-repository-in-vs-code--s5rjojd-r "GitLive now works with any Git repository in VS Code!") Article Hashnode · 4y GitLive now works with any Git repository in VS Code! GitLive now works with any Git repository in VS Code. The offline mode uses the data from your local Git repository only. The changes from the branches shown in the GitLive tab also appear for your current file in the gutter of your editor. It even shows you when the changes conflict with your own - a kind of early warning system for merge conflicts. 40 2 11. 11 [](https://daily.dev/posts/css-logos-netflix-logo-lzcoveo4a "CSS Logos: Netflix logo") Article Hashnode · 4y CSS Logos: Netflix logo The Netflix logo is built up by three sticks of the same size; however, the middle one casts a shadow and is skewed. We'll leverage borders for the two side pillars and pseudo-elements to make the skew stick + the rounded bottom section. The result is the following CodePen. 33 3 12. 12 [](https://daily.dev/posts/10-amazing-games-to-learn-css-fh5zb32dn "10 amazing games to learn CSS") Article Hashnode · 5y 10 amazing games to learn CSS There are some fun ways to learn this monster called CSS. Learning CSS can be quite a challenge, and you will have to get your hands dirty. This article will highlight ten amazing games you can play to learn CSS. Once you've mastered these games, you can enter some CSS challenges and battles. 32 5 13. 13 [](https://daily.dev/posts/building-clis-with-react-ink-yaujan6ak "🧑‍💻 Building CLIs with React Ink") Article Hashnode · 5y 🧑‍💻 Building CLIs with React Ink React Ink is a library that lets you build command-line apps with React. It uses Yoga to build Flexbox layouts in the terminal, so most CSS-like props are available in Ink as well. In this post, we’ll explore how Ink works by building a cool little CLI, that fetches info about Pokemon using PokeAPI! 30 5 14. 14 [](https://daily.dev/posts/how-to-create-a-custom-scrollbar-with-css-in-5-mins-8aoofy31p "How to create a custom scrollbar with CSS in 5 mins") Article Hashnode · 4y How to create a custom scrollbar with CSS in 5 mins Using CSS we can add personality to our site’s design with custom scrollbars. The code below will work with most modern browsers and operating systems. To create a custom scrollbar, we must first define the size of the scrollbar. We can style it by adding background colors, shadows, border radius, and borders. 28 15. 15 [](https://daily.dev/posts/desma---a-design-system-manager-for-all-your-projects-xabe6szju "Desma - A design system manager for all your projects") Article Hashnode · 5y Desma - A design system manager for all your projects Desma is a design system manager where you can create, preview and host all your designs in one single place. The idea of desma is to save multiple features that a design can hold at once. The database relational model consists of User, DesignSystem, Palette, Fonts, Spacing and Color. 27 2 16. 16 [](https://daily.dev/posts/introducing-hyperdocs---the-simplest-way-to-build-docs-for-your-project--afvjxyeez "Introducing Hyperdocs - The simplest way to build docs for your project.") Article Hashnode · 5y Introducing Hyperdocs - The simplest way to build docs for your project. Hyperdocs is a documentation generating tool that fetches markdown files from a docs folder from GitHub, generates it on the server and sends it to the client. It also provides a blog for each project created so that you can make your new release announcements and other news there. It provides a feedback collection system that helps you gather feedback from your project. 22 2 17. 17 [](https://daily.dev/posts/moodflix---your-mood-our-suggestions-ugxlnzroe "Moodflix - Your mood, Our suggestions") Article Hashnode · 4y Moodflix - Your mood, Our suggestions Moodflix is a Netflix-clone built with React and Framer Motion. The frontend is written in React and SCSS and the backend is in .NET 6 and .NET Core 6 and Minimal API. The API receives the base64 string image from the Frontend and sends it to the Azure Face API directly. Backend gets a list of movies based on the user's mood. 21 6 18. 18 [](https://daily.dev/posts/css-logos-hashnode-logo-6-eqhtwdu "CSS Logos: Hashnode logo") Article Hashnode · 4y CSS Logos: Hashnode logo I wanted to start this CSS challenge a while ago by recreating some fantastic logos in CSS only. I'll be starting with Hashnode, as I re-created this recently for the CSS Hashnode challenge. The mask option is a powerful tool to mask out parts of your elements. The background shows through the logo, excellent! 20 5 19. 19 [](https://daily.dev/posts/how-i-made-postman-clone-using-html-css-javascript-hjx8x3xgn "How I made Postman Clone using HTML, CSS & JavaScript") Article Hashnode · 5y How I made Postman Clone using HTML, CSS & JavaScript Postman is a popular application programming interface that makes it easy for developers to create, share, test and document APIs. In this tutorial, we are going to build a website using Postman and Bootstrap. For this project, we will use the Visual Studio Code. 19 2 20. 20 [](https://daily.dev/posts/from-an-ex-amazon-team-lead-5-mistakes-i-made-as-a-junior-software-engineer-rqwqeanas "From an ex-Amazon team lead: 5 mistakes I made as a junior software engineer") Article Hashnode · 4y From an ex-Amazon team lead: 5 mistakes I made as a junior software engineer Former Amazon Web Services engineer shares 5 mistakes he made as a junior software engineer. He says he had entitlement, focused on minutiae in code reviews, and didn't ask for a promotion. He learned to be more transparent about his career goals and aspirations, and seized promotion opportunities. He also learned to focus on the business value and impact of his work. 18 1 21. 21 [](https://daily.dev/posts/free-resources-to-learn-rust-in-2022--nwnieynwp "Free resources to learn Rust in 2022 🦀") Article Hashnode · 4y Free resources to learn Rust in 2022 🦀 Rust is the most loved programming language, according to the Stack Overflow Developer Survey 2021\. For the sixth year in a row, it has won the title. This article contains free resources to assist you in getting started with Rust. Each resource includes a brief summary to help you in making the best choice. 17 22. 22 [](https://daily.dev/posts/css-interview-questions-vglusqucg "CSS Interview Questions") Article Hashnode · 4y CSS Interview Questions Cascading Stylesheet Sheet is a stylesheet language that determines how the elements and content should look on the page. CSS is used to develop a consistent look and feel to the webpage. In today's world of tech, it's not easy to land a job while it's impossible to know answers to all questions that an interviewer may ask you. 17 1 23. 23 [](https://daily.dev/posts/css-vs-css-modules-jpxqdyy8n "CSS Vs CSS Modules") Article Hashnode · 5y CSS Vs CSS Modules React allows you to create different components for your application. Since each component has its own stylesheet, you wouldn't want those stylesheets to override one another. The goal of CSS Modules is to protect overlapping class names. The best part is, it is actually simple and straightforward. 17 24. 24 [](https://daily.dev/posts/create-infinite-scroll-in-react-n9ea4r4wq "Create Infinite Scroll In React") Article Hashnode · 5y Create Infinite Scroll In React Infinite scroll works in much the same way that normal website browsing works, behind the scenes. There are mainly three components of infinite scroll. Fetching data from the paginated api, maintaining the data state on the website and detecting user scroll. We will use react-infinite-scroll-hook in this blog. 17 25. 25 [](https://daily.dev/posts/the-story-behind-how-we-started-medusa-byrgmlexb "The Story Behind How We Started Medusa") Article Hashnode · 4y The Story Behind How We Started Medusa Sebastian Rindom, the CEO & Co-founder of Medusa, did an interview with Flagsmith. He talked about how Medusa started, why create a headless commerce solution, why make it open-source, and more. Medusa has risen quickly in popularity over the past months getting +9,000 starts on GitHub in only 6 months. 16 2 [See all Hashnode archives](/sources/hashnode/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/hashnode/best-of/2022/03#page","url":"https://daily.dev/sources/hashnode/best-of/2022/03","name":"Best Hashnode Posts — March 2022","description":"The most upvoted Hashnode posts from March 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/hashnode/best-of/2022/03#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/how-to-create-a-legendary-github-profile--ilw54eg1c","name":"How to Create a Legendary GitHub Profile?"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/how-to-design-better-apis-ft5u2bjel","name":"How to design better APIs"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/css-tricks-to-create-that-dark-futuristic-web3-look-vbi5cpmig","name":"CSS Tricks to Create that Dark Futuristic Web3 Look"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/react-useeffect-cleanup-ayts9cxyg","name":"React useEffect cleanup"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/writing-cleaner-css-using-bem-methodology-pqtamxngt","name":"Writing Cleaner CSS using BEM Methodology"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/react-useeffect-hook-usages-you-must-know-rvpc0rlcj","name":"React useEffect Hook usages you must know"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/you-can-t-do-everything--azm5lbln3","name":"You can't do everything*"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/5-secret-features-of-json-you-didn-t-know-about--rdcf3onza","name":"5 Secret features of JSON you didn't know about 🤯"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/local-storage-and-session-storage-javascript--obyeugmff","name":"Local Storage and Session Storage (JavaScript)"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/gitlive-now-works-with-any-git-repository-in-vs-code--s5rjojd-r","name":"GitLive now works with any Git repository in VS Code!"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/css-logos-netflix-logo-lzcoveo4a","name":"CSS Logos: Netflix logo"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/10-amazing-games-to-learn-css-fh5zb32dn","name":"10 amazing games to learn CSS"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/building-clis-with-react-ink-yaujan6ak","name":"🧑‍💻 Building CLIs with React Ink"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/how-to-create-a-custom-scrollbar-with-css-in-5-mins-8aoofy31p","name":"How to create a custom scrollbar with CSS in 5 mins"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/desma---a-design-system-manager-for-all-your-projects-xabe6szju","name":"Desma - A design system manager for all your projects"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/introducing-hyperdocs---the-simplest-way-to-build-docs-for-your-project--afvjxyeez","name":"Introducing Hyperdocs - The simplest way to build docs for your project."},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/moodflix---your-mood-our-suggestions-ugxlnzroe","name":"Moodflix - Your mood, Our suggestions"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/css-logos-hashnode-logo-6-eqhtwdu","name":"CSS Logos: Hashnode logo"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/how-i-made-postman-clone-using-html-css-javascript-hjx8x3xgn","name":"How I made Postman Clone using HTML, CSS & JavaScript"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/from-an-ex-amazon-team-lead-5-mistakes-i-made-as-a-junior-software-engineer-rqwqeanas","name":"From an ex-Amazon team lead: 5 mistakes I made as a junior software engineer"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/free-resources-to-learn-rust-in-2022--nwnieynwp","name":"Free resources to learn Rust in 2022 🦀"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/css-interview-questions-vglusqucg","name":"CSS Interview Questions"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/css-vs-css-modules-jpxqdyy8n","name":"CSS Vs CSS Modules"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/create-infinite-scroll-in-react-n9ea4r4wq","name":"Create Infinite Scroll In React"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/the-story-behind-how-we-started-medusa-byrgmlexb","name":"The Story Behind How We Started Medusa"}]},{"@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":"Hashnode","item":"https://daily.dev/sources/hashnode"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/hashnode/best-of"},{"@type":"ListItem","position":5,"name":"March 2022"}]}]} ```