--- title: Best Hashnode posts — June 2022 | daily.dev description: The most upvoted Hashnode posts from June 2022, curated by the daily.dev community. canonical: https://daily.dev/sources/hashnode/best-of/2022/06 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/hashnode/best-of/2022/06 og:type: website og:site_name: daily.dev og:title: Best Hashnode posts — June 2022 | daily.dev og:description: The most upvoted Hashnode posts from June 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 — June 2022 1. 1 [](https://daily.dev/posts/portfolio-ideas---an-open-source-repository-for-inspiration-4ln4rnfyy "Portfolio Ideas - An open-source repository for inspiration") Article Hashnode·4y Portfolio Ideas - An open-source repository for inspiration Portfolio ideas is a repository of incredible developer portfolios you can draw inspiration from. It is also a beginner-friendly open-source project for developers looking to contribute for the first time. To add a portfolio, you can either create a new table or copy an already existing table and edit it. 508 52 2. 2 [](https://daily.dev/posts/5-tips-for-writing-cleaner-code-vyqikwvqn "5 Tips For Writing Cleaner Code") Article Hashnode·4y 5 Tips For Writing Cleaner Code Nesting in code is something we do all the time, and although there's nothing inherently wrong with nesting, it can sometimes make code harder to read. The "Return Early" design pattern allows us to use the if statement as a guard clause to check for errors and return before executing any further code. 283 18 3. 3 [](https://daily.dev/posts/better-scrolling-through-modern-css-la8pq-kjj "Better scrolling through modern CSS") Article Hashnode·4y Better scrolling through modern CSS scrollbars are a very mundane thing that every website and every app has. They don't get much love from developers, but we should be paying a little more attention to them. Let's look at some of the things we can do in 2022 to improve the scrolling experience. 256 13 4. 4 [](https://daily.dev/posts/the-end-of-localhost-gxzfwfez1 "The End of Localhost") Article Hashnode·4y The End of Localhost Dev environments should be cattle, not pets. It looks likely that in future, most development will not be done on localhost. The time wasted fixing bugs between dev and prod environments goes from 1-4 hours a week down to 0\. Many Bigcos who have invested in their developer productivity already work entirely in the cloud. 181 13 5. 5 [](https://daily.dev/posts/introduction-to-vite-the-next-generation-frontend-tooling-3ee-9lslq "Introduction to Vite: The Next Generation Frontend Tooling") Article Hashnode·4y Introduction to Vite: The Next Generation Frontend Tooling Vite is the next generation frontend tooling. It is a solution to slow server starts because it uses native ESM to serve code. Most tools like webpack, Parcel and Rollup are bundle-based. This means the code has to be completely bundled before it can be served. Vite only needs to transform and serve source code on demand. 113 3 6. 6 [](https://daily.dev/posts/role-based-authorization-in-nodejs-ut5ipeo80 "Role-Based Authorization in NodeJs") Article Hashnode·4y Role-Based Authorization in NodeJs Authentication and authorization in Express.js can be achieved easily using middleware functions. To make things easier we made available some starter files if you would like to code along. The finished version lies on the main branch while the starter files are on the starter branch. We made everything simple enough so just anyone whether a beginner or intermediate developer can follow along. 106 4 7. 7 [](https://daily.dev/posts/why-developers-must-start-blogging-and-how-to-start--lfa1wcb3q "Why developers must start blogging and how to start?") Article Hashnode·4y Why developers must start blogging and how to start? This article mainly targets developers willing to write but reluctant about it or unsure how to get started. If you are a blogger, please leave a comment below sharing your experience and expertise on this topic. In this article, we will discuss why a developer must consider blogging, their benefits, and most importantly, how to getting started with it. 87 6 8. 8 [](https://daily.dev/posts/how-to-increase-your-visibility-as-a-developer-juv7-3pbl "How To Increase Your Visibility as a Developer") Article Hashnode·4y How To Increase Your Visibility as a Developer Developers can increase their visibility and opportunities by joining a community. Join Hackathons, meet-ups, conferences or any other coding-related events. Find a mentor and create videos or blog posts to help you grow your audience. Get into open source projects by becoming one of those developers that assist with coding new features. 83 5 9. 9 [](https://daily.dev/posts/patterns-that-every-developer-should-know-bkpits1nm "Patterns That Every Developer Should Know") Article Hashnode·4y Patterns That Every Developer Should Know This article uses TypeScript for code examples, which is a change from my usual habit of using C#. I want my articles to be as helpful to as many people as possible, and TypeScript is probably the most commonly understood language around that has static typing. Even if you never have to use any of these patterns, it is important to know what they look like and the problems that they solve. 80 1 10. 10 [](https://daily.dev/posts/graphql-vs-rest-putting-it-to-rest-xzzscpq4a "GraphQL vs REST: putting it to rest") Article Hashnode·4y GraphQL vs REST: putting it to rest GraphQL allows users to request data from several resources using a single request. Rather than making multiple requests to fetch data, you can use it to make ad-hoc queries to a single endpoint. GraphQL allows client to specify the precise type of data to be received from the server. 75 8 11. 11 [](https://daily.dev/posts/don-t-be-afraid-of-typescript-nyc-4ip4q "Don't be afraid of TypeScript") Article Hashnode·4y Don't be afraid of TypeScript TypeScript is a programming language built on top of JavaScript. It is a superset of JavaScript to be correct. TypeScript allows us, developers, to create more robust and secure applications to provide a better experience for the end-user. We will use a template to structure functions, so it will help it know what is expected from us. 68 6 12. 12 [](https://daily.dev/posts/it-s-ok-to-learn-programming-slower--tk8k-q-79 "It's OK to Learn Programming Slower 🐌") Article Hashnode·4y It's OK to Learn Programming Slower 🐌 Learn to program for the sake of learning to program. Work in shorter increments and make use of tools like white noise machines and pomodoro timers. Be curious and have a sense of adventure! The only reason you will get angry when you stumble with a topic is because you're in a rush. 63 6 13. 13 [](https://daily.dev/posts/steps-to-build-a-professional-next-js-portfolio-rcju8laug "Steps To Build A Professional Next.js Portfolio") Article Hashnode·4y Steps To Build A Professional Next.js Portfolio In this blog I am going to explain all necessary steps to create a multiple pages portfolio/website using React, Next.js and Tailwind with JavaScript. We will use React because its preferable when dealing with or building multiple pages, server-rendered websites. Tailwind works by scanning all of your HTML files, JavaScript components, and any other templates for class names. 58 3 14. 14 [](https://daily.dev/posts/node-js-orms-overview-and-comparison-ieoz9i28 "Node.js ORMs overview and comparison") Article Hashnode·4y Node.js ORMs overview and comparison ORM is a library to access the database, high-level library where you can define models, relations. Ideal ORM allows to define queries and then combine and reuse them to construct more complex queries. I'll share my experience of working with 6 popular ORMs including knex which is query builder. 56 1 15. 15 [](https://daily.dev/posts/i-went-deep-down-the-npm-docs-to-learn-more-about-package-json-pxzsjerpj "I went deep down the NPM docs to learn more about Package.json") Article Hashnode·4y I went deep down the NPM docs to learn more about Package.json Package.json is the document which contains the most important metadata like packages, scripts which is required to both run and publish the project. NPM requires you to give all the info enclosed in json format. The name property should be equal or less than 241 characters. The allowed characters are ABCDEFGHIJKLMNOPQRSTUVWXYZ. 42 1 16. 16 [](https://daily.dev/posts/this-article-will-solve-80-of-your-css-problems-cascading-explained--u4xhpavha "This Article Will Solve 80% of Your CSS Problems ('Cascading' Explained)") Article Hashnode·4y This Article Will Solve 80% of Your CSS Problems ('Cascading' Explained) Cascading is the first word of the acronym, yet it is one of the most overlooked and misunderstood feature of the styling language. The browser follows a set of rules to determine the winner (called the cascaded value ), and this set ofrules is exactly what is called the cascade. 38 3 17. 17 [](https://daily.dev/posts/best-way-to-solve-a-problem-nti7acnyp "Best way to solve a problem") Article Hashnode·4y Best way to solve a problem Problem solving is the process of devising solutions to overcome obstacles in pursuit of a goal. It's also an act of defining a problem, determining the cause of the problem, identifying, designing, and implementing a solution to the defined problem. This article lays more emphasis on problem-solving techniques in programming. 31 1 18. 18 [](https://daily.dev/posts/this-article-is-written-by-an-ai--no7dcqntm "This article is written by an AI 👀") Article Hashnode·4y This article is written by an AI 👀 React is a JavaScript library that allows you to build user interfaces with JavaScript. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. It can also be used to create more complex views, such as a shopping cart or a blog. 31 3 19. 19 [](https://daily.dev/posts/split-bill-ogy9m9ytf "Split-bill") Article Hashnode·4y Split-bill The SplitWise app is used by two roommates to split their bills. I thought it would be great to build an open-source website for the same purpose. I have used Vercel for the front end and Heroku for the backend. There are three demo users you can use to use the website. 30 20. 20 [](https://daily.dev/posts/css-logos-github-logo-yge6krxva "CSS Logos: GitHub logo") Article Hashnode·4y CSS Logos: GitHub logo The GitHub logo contains Octocat, their mascot, and it is not an easy shape to re-create. I tried to use as few elements as possible to challenge myself. The logo is made up of a round shape containing a cutoutOctocat. The body is a cylinder shape but has some weird rounded edges that are pretty difficult to create. 29 6 21. 21 [](https://daily.dev/posts/important-css-properties-that-are-very-handy--5srb88gf "Important CSS properties that are very handy.") Article Hashnode·4y Important CSS properties that are very handy. There are some hidden properties that can save us lots of time while coding. Inline-flex makes the flex container behave like an inline element instead of a block element. The align-self property specifies the alignment for the selected item inside the flexible container. We will discuss 4 CSS properties and 1 HTML entity. 29 2 22. 22 [](https://daily.dev/posts/creating-a-react-native-ecommerce-app-with-medusa-gtzpxgtrb "Creating a React Native Ecommerce app with Medusa") Article Hashnode·4y Creating a React Native Ecommerce app with Medusa Medusa is an open source headless commerce platform that allows you to create stores in a few minutes. It includes every feature a store needs such as order management, customers, payments, products, discounts, and a lot more. In this tutorial, you are going to create two screens, one for all products and the other for the product info. 29 23. 23 [](https://daily.dev/posts/i-tutorial-hell-ufwxevput "I ❤️ Tutorial Hell") Article Hashnode·4y I ❤️ Tutorial Hell When learning something new you're going to have to have someone help guide you. The good tutorial-folx spend a lot of time getting things correct so they can explain them fluidly and easily. The coding is formatted, sequential, and oftentimes high quality. It's good to go back and re-do the tutorial with even more add-ons, fixes, and changes. 27 2 24. 24 [](https://daily.dev/posts/golang-introduction-build-a-mini-twitter-clone-gbgwk-koa "Golang introduction: build a mini Twitter clone") Article Hashnode·4y Golang introduction: build a mini Twitter clone This article is for those who want to quickly glance over Golang and build a small project. It serves as an introduction into the language. Go excels in the back end with Goroutines and Channels. It offers quick development with a minimalist C-like language. 27 25. 25 [](https://daily.dev/posts/css-logos-daily-dev-logo-ogpwomn-e "CSS Logos: daily dev Logo") Article Hashnode·4y CSS Logos: daily dev Logo In this article, I recreat my employer's logo in CSS. I'll use SCSS since it's easier to make it visually explained. The logo itself looks like some basic shapes, as seen below. The square has rounded corners and a square inside. The line in the middle has some trapezoid borders. 27 4 [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/06#page","url":"https://daily.dev/sources/hashnode/best-of/2022/06","name":"Best Hashnode Posts — June 2022","description":"The most upvoted Hashnode posts from June 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/06#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/portfolio-ideas---an-open-source-repository-for-inspiration-4ln4rnfyy","name":"Portfolio Ideas - An open-source repository for inspiration"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/5-tips-for-writing-cleaner-code-vyqikwvqn","name":"5 Tips For Writing Cleaner Code"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/better-scrolling-through-modern-css-la8pq-kjj","name":"Better scrolling through modern CSS"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/the-end-of-localhost-gxzfwfez1","name":"The End of Localhost"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/introduction-to-vite-the-next-generation-frontend-tooling-3ee-9lslq","name":"Introduction to Vite: The Next Generation Frontend Tooling"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/role-based-authorization-in-nodejs-ut5ipeo80","name":"Role-Based Authorization in NodeJs"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/why-developers-must-start-blogging-and-how-to-start--lfa1wcb3q","name":"Why developers must start blogging and how to start?"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/how-to-increase-your-visibility-as-a-developer-juv7-3pbl","name":"How To Increase Your Visibility as a Developer"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/patterns-that-every-developer-should-know-bkpits1nm","name":"Patterns That Every Developer Should Know"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/graphql-vs-rest-putting-it-to-rest-xzzscpq4a","name":"GraphQL vs REST: putting it to rest"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/don-t-be-afraid-of-typescript-nyc-4ip4q","name":"Don't be afraid of TypeScript"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/it-s-ok-to-learn-programming-slower--tk8k-q-79","name":"It's OK to Learn Programming Slower 🐌"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/steps-to-build-a-professional-next-js-portfolio-rcju8laug","name":"Steps To Build A Professional Next.js Portfolio"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/node-js-orms-overview-and-comparison-ieoz9i28","name":"Node.js ORMs overview and comparison"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/i-went-deep-down-the-npm-docs-to-learn-more-about-package-json-pxzsjerpj","name":"I went deep down the NPM docs to learn more about Package.json"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/this-article-will-solve-80-of-your-css-problems-cascading-explained--u4xhpavha","name":"This Article Will Solve 80% of Your CSS Problems ('Cascading' Explained)"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/best-way-to-solve-a-problem-nti7acnyp","name":"Best way to solve a problem"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/this-article-is-written-by-an-ai--no7dcqntm","name":"This article is written by an AI 👀"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/split-bill-ogy9m9ytf","name":"Split-bill"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/css-logos-github-logo-yge6krxva","name":"CSS Logos: GitHub logo"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/important-css-properties-that-are-very-handy--5srb88gf","name":"Important CSS properties that are very handy."},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/creating-a-react-native-ecommerce-app-with-medusa-gtzpxgtrb","name":"Creating a React Native Ecommerce app with Medusa"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/i-tutorial-hell-ufwxevput","name":"I ❤️ Tutorial Hell"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/golang-introduction-build-a-mini-twitter-clone-gbgwk-koa","name":"Golang introduction: build a mini Twitter clone"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/css-logos-daily-dev-logo-ogpwomn-e","name":"CSS Logos: daily dev Logo"}]},{"@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":"June 2022"}]}]} ```