--- title: Best Hashnode posts — July 2022 | daily.dev description: The most upvoted Hashnode posts from July 2022, curated by the daily.dev community. canonical: https://daily.dev/sources/hashnode/best-of/2022/07 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/hashnode/best-of/2022/07 og:type: website og:site_name: daily.dev og:title: Best Hashnode posts — July 2022 | daily.dev og:description: The most upvoted Hashnode posts from July 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 — July 2022 1. 1 [](https://daily.dev/posts/jokes-only-programmers-will-understand-lgwoewtug "Jokes only programmers will understand") Article Hashnode · 4y Jokes only programmers will understand To understand these jokes, you have to be a programmer, and if you're not don't worry. Laugh and also share them with your friends that are programmers. It isn't an easy thing to become a programmer. You need some minutes to at least laugh and forget the stress you've been through. 433 45 2. 2 [](https://daily.dev/posts/javascript-object-destructuring-tips-amgdv225h "JavaScript object destructuring tips") Article Hashnode · 4y JavaScript object destructuring tips Destructuring is an extremely useful way of extracting properties from objects. Destructuring also works on arrays, but let's focus on objects for this one. We can omit the double use binding of the name properties and destructure the properties like this. With destructuring, we can also target nested properties. 316 17 3. 3 [](https://daily.dev/posts/please-start-writing-better-git-commits-med-dxgcl "Please Start Writing Better Git Commits") Article Hashnode · 4y Please Start Writing Better Git Commits The Problem With Your Current Commits: They're not informative enough. Smaller, atomic commits are much easier to understand and can be rolled back without affecting other working code. If you want to take it a step further, you could follow the Conventional Commits specification. Be sure to follow me for more like this! 173 6 4. 4 [](https://daily.dev/posts/the-pros-and-cons-of-tailwindcss-hieo-qjhl "The Pros and Cons of TailwindCSS") Article Hashnode · 4y The Pros and Cons of TailwindCSS Tailwind is a front-end CSS framework that has taken off more than any other recently. Instead of creating a set of selectors and bespoke classes to style your code, you use a large set of single-purpose utility classes. In essence, you add nearly all your style right into your frontend HTML, React, or Vue code. 154 9 5. 5 [](https://daily.dev/posts/how-to-internationalize-your-react-app-d1s72cthl "How to Internationalize your React App") Article Hashnode · 4y How to Internationalize your React App App internationalization is the process of making your app's content available in multiple languages. Most businesses avoid internationalization because it is too difficult and time-consuming to implement. The process of designing a product — in this case, a React app — to be used in different locales is known as internationalization. 144 2 6. 6 [](https://daily.dev/posts/let-s-bun--sl11lwmwz "Let's Bun!") Article Hashnode · 4y Let's Bun! Bun.js is a Node-API tool that implements most of Node- API (N-API) Bun.js natively supports a growing list of Node core modules along with globals like Buffer and process. Every file is transpiled . TypeScript & JSX just work. & just work bun.js automatically loads environment variables from .env files Web APIs like fetch , WebSocket , and ReadableStream are builtin. 122 4 7. 7 [](https://daily.dev/posts/json-web-token---guide-msrs3ktap "JSON Web Token - Guide") Article Hashnode · 4y JSON Web Token - Guide JSON Web Token (JWT) is a secure way to transmit information between parties as a JSON object. This information is trustworthy because it is digitally signed. Once the user is logged in, each subsequent request will include the JWT, allowing the user to access routes, services, and resources with that token. 108 3 8. 8 [](https://daily.dev/posts/improve-your-web-development-skills-by-building-these-5-projects-rvbn1zpdy "Improve Your Web Development Skills By Building These 5 Projects") Article Hashnode · 4y Improve Your Web Development Skills By Building These 5 Projects The best way to practice and improve your web development skills is to start building web projects. I have listed a few types of projects for you to build so that you can get better at web development. Build an application that displays data from an external API. Try to build a real-world application and don't make it as a mockup/dummy website. 92 8 9. 9 [](https://daily.dev/posts/using-the-native-web-share-javascript-api-bz1clipzk "Using the native web share JavaScript API") Article Hashnode · 4y Using the native web share JavaScript API The native share function can be invoked with JavaScript. It's mainly built for mobile devices, but some desktop variants like Safari also support it. The code to determine it looks like this: console.log( 'native share available' ); inside this function, we can invoke the native share or use our fallback share mechanism. You can even attach callbacks to our native share API. 81 14 10. 10 [](https://daily.dev/posts/stackflex-the-last-day-you-ll-copy-paste-code-plboyuqkf "StackFlex — The last day you'll copy-paste code") Article Hashnode · 4y StackFlex — The last day you'll copy-paste code StackFlex adds a little button to save code snippets you view in the browser. The app is designed to be minimal and dark because most programmers prefer dark mode and minimal, easy-to-use designs. Library users can search, view, edit and delete updated items from the library. 79 5 11. 11 [](https://daily.dev/posts/write-git-commit-messages-that-your-colleagues-will-love-5maj6-vw8 "Write Git Commit Messages That Your Colleagues Will Love") Article Hashnode · 4y Write Git Commit Messages That Your Colleagues Will Love Git commit messages are how we communicate to our future selves. They help you understand why a certain line of code was added to the code base. By writing good Git commit messages you are future-proofing yourself and your colleagues. A commit message consists of two parts: the subject line and the body. 72 8 12. 12 [](https://daily.dev/posts/react-cleaner-use-of-settimeout-h4yezsutz "React cleaner use of setTimeout") Article Hashnode · 4y React cleaner use of setTimeout React can create some nasty edge-cases when manipulating data after x time. The component might be unmounted by then, but the timeout is still trying to activate. The general rule of advice is to keep track of the timeouts you create in your code and clean them. To clean your timeouts, we can leverage the useEffect cleanup function. 50 9 13. 13 [](https://daily.dev/posts/this-website-is-open-source-w1gqku8pb "This website is open source") Article Hashnode · 4y This website is open source When I rewrote my website in Astro, I decided to make it an open source project. This means people can use the source code, but only while maintaining the same license. This ensures it will stay a free project forever. There are many great readers out there who often see little mistakes, and I would love for them to have a way to contribute. 50 3 14. 14 [](https://daily.dev/posts/clean-architecture-in-frontend-state-in-angular-ww65nn5bv "Clean Architecture in Frontend – State in Angular") Article Hashnode · 4y Clean Architecture in Frontend – State in Angular Clean Architecture is a way to isolate an application from frameworks, UI, and databases. It leverages SOLID principles and shows how to put them together on a larger scale. The application layers have a hierarchy. Entities are on the top, and UI is on the bottom. A layer must not have a dependency on any other underlying layer. 47 4 15. 15 [](https://daily.dev/posts/linux-boot-process-odmjj1cft "Linux Boot Process") Article Hashnode · 4y Linux Boot Process This blog will give you a better understanding of how things work behind the scenes of Linux booting. In the following steps/stages: BIOS + UEFI, Initial RAM disk-initramfs, Master Boot Loader (MBR), Kernel, Command Shell, and X Windows System. 48 16. 16 [](https://daily.dev/posts/render-a-3d-model-in-the-browser-with-three-js-and-next-js-ourdl7low "Render a 3D Model in the Browser with Three.js and Next.Js") Article Hashnode · 4y Render a 3D Model in the Browser with Three.js and Next.Js Three.js is a JavaScript library used to create and display 3D graphics in your web browser using WebGL and JavaScript as a part of the website. In this blog, we will learn how to render a 3D model in the browser with 360o view using Three. JS and Next.js. 47 17. 17 [](https://daily.dev/posts/5-webstorm-plugins-to-boost-your-productivity-ebet3zexz "5 WebStorm Plugins To Boost Your Productivity") Article Hashnode · 4y 5 WebStorm Plugins To Boost Your Productivity WebStorm comes with a set of built-in features that make every programmer’s life much easier. Even such a great tool can become even more amazing with a little optimization. I thought I would share with you my pick of the tools that really improved my productivity in WebStorm. 47 1 18. 18 [](https://daily.dev/posts/are-you-struggling-with-css--mu1xmoumg "Are you Struggling with CSS?") Article Hashnode · 4y Are you Struggling with CSS? To become average and fairly good at CSS is not difficult. Focus on layouts, tweak them, play, and experiment with them. The border property is your saviour. Leverage the power of the dev tools. Don't underestimate thePower of simplicity. Real work can be worthwhile and we need to gain experience. 45 1 19. 19 [](https://daily.dev/posts/how-to-write-custom-react-hooks-g211qhlgk "how to write custom react hooks") Article Hashnode · 4y how to write custom react hooks Custom hooks are nothing more than a normal javascript function whose name starts with "use" The main reason for creating custom hooks is to follow the "DRY" (Don't repeat yourself) principle. To implement such a feature, we can simply create this custom hook, and call it whenever and wherever we want. For this tutorial, we will be creating a simple react app which will render a random dad joke. 41 20. 20 [](https://daily.dev/posts/how-to-communicate-as-a-software-engineer-z3ogy1fsz "How to communicate as a software engineer") Article Hashnode · 4y How to communicate as a software engineer The security team decided that increasing the session length was an acceptable risk for the payoff of a better user experience and less frequent session timeouts. Currently users cannot log it and we are working on rolling back the update. We'll keep the team updated with our progress. 40 21. 21 [](https://daily.dev/posts/basic-git-commands-you-should-know-yruulsiyo "Basic Git Commands You Should Know") Article Hashnode · 4y Basic Git Commands You Should Know There are roughly about 160 Git commands in total, learning all these is a nightmare for almost all developers out there. Using a terminal/command line to work with Git might be a bit intimidating to most beginner developers since they either do not know or keep forgetting what "commands" to type in to perform the desired actions. 37 22. 22 [](https://daily.dev/posts/i-built-3-hackathon-projects-in-3-months-and-won-1500-in-prizes-olditgqko "I built 3 Hackathon projects in 3 months, and won 1500$ in Prizes") Article Hashnode · 4y I built 3 Hackathon projects in 3 months, and won 1500$ in Prizes In the first half of 2022 from mid-February to mid-May, I tried out a new venture - hackathons. My entries got nominated as runner-ups, so I decided to create an article to inspire you. Below I will list each of the projects I built, include the feature list, and describe the tech stack I used. I will also provide links to my full hackathon articles, links to the live deployed projects, and links to open-source code. 37 9 23. 23 [](https://daily.dev/posts/presenting-show-off---showcase-your-setup--qarc55scz "Presenting Show Off ✨ - Showcase your setup!") Article Hashnode · 4y Presenting Show Off ✨ - Showcase your setup! Show Off is a great place to showcase all the gadgets and software you use and share them with your friends and fans. Add affiliate links to the items and make it easy to earn when the user clicks through your collection. Share & Embed with the unique link that you get for your collection, you can use it to share. 36 24. 24 [](https://daily.dev/posts/learn-scroll-motion-effects-in-framer-with-react-ftpfhzapo "Learn Scroll Motion Effects in Framer with React") Article Hashnode · 4y Learn Scroll Motion Effects in Framer with React Framer lets you apply code to a layer that will override the layer’s props when it is displayed in the Preview window. In React, an override is what is known as a higher-order component. Parallax is an effect applied to content as it scrolls that creates the illusion of depth by moving background layers more slowly than layers in the foreground. 33 2 25. 25 [](https://daily.dev/posts/pasteme---paste-codes-from-your-terminal--vps8hn-z "PasteMe - Paste Codes From Your Terminal") Article Hashnode · 4y PasteMe - Paste Codes From Your Terminal PasteMe is a modern open-source RESTful pastebin service that allows users to paste their source codes, snippets, and code blocks right from their command-line interfaces and terminals. You can paste your source codes in different popular themes as well as different languages. The service is available for Windows and Linux distributions. 31 1 [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/07#page","url":"https://daily.dev/sources/hashnode/best-of/2022/07","name":"Best Hashnode Posts — July 2022","description":"The most upvoted Hashnode posts from July 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/07#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/jokes-only-programmers-will-understand-lgwoewtug","name":"Jokes only programmers will understand"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/javascript-object-destructuring-tips-amgdv225h","name":"JavaScript object destructuring tips"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/please-start-writing-better-git-commits-med-dxgcl","name":"Please Start Writing Better Git Commits"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/the-pros-and-cons-of-tailwindcss-hieo-qjhl","name":"The Pros and Cons of TailwindCSS"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/how-to-internationalize-your-react-app-d1s72cthl","name":"How to Internationalize your React App"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/let-s-bun--sl11lwmwz","name":"Let's Bun!"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/json-web-token---guide-msrs3ktap","name":"JSON Web Token - Guide"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/improve-your-web-development-skills-by-building-these-5-projects-rvbn1zpdy","name":"Improve Your Web Development Skills By Building These 5 Projects"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/using-the-native-web-share-javascript-api-bz1clipzk","name":"Using the native web share JavaScript API"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/stackflex-the-last-day-you-ll-copy-paste-code-plboyuqkf","name":"StackFlex — The last day you'll copy-paste code"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/write-git-commit-messages-that-your-colleagues-will-love-5maj6-vw8","name":"Write Git Commit Messages That Your Colleagues Will Love"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/react-cleaner-use-of-settimeout-h4yezsutz","name":"React cleaner use of setTimeout"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/this-website-is-open-source-w1gqku8pb","name":"This website is open source"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/clean-architecture-in-frontend-state-in-angular-ww65nn5bv","name":"Clean Architecture in Frontend – State in Angular"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/linux-boot-process-odmjj1cft","name":"Linux Boot Process"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/render-a-3d-model-in-the-browser-with-three-js-and-next-js-ourdl7low","name":"Render a 3D Model in the Browser with Three.js and Next.Js"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/5-webstorm-plugins-to-boost-your-productivity-ebet3zexz","name":"5 WebStorm Plugins To Boost Your Productivity"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/are-you-struggling-with-css--mu1xmoumg","name":"Are you Struggling with CSS?"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/how-to-write-custom-react-hooks-g211qhlgk","name":"how to write custom react hooks"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/how-to-communicate-as-a-software-engineer-z3ogy1fsz","name":"How to communicate as a software engineer"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/basic-git-commands-you-should-know-yruulsiyo","name":"Basic Git Commands You Should Know"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/i-built-3-hackathon-projects-in-3-months-and-won-1500-in-prizes-olditgqko","name":"I built 3 Hackathon projects in 3 months, and won 1500$ in Prizes"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/presenting-show-off---showcase-your-setup--qarc55scz","name":"Presenting Show Off ✨ - Showcase your setup!"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/learn-scroll-motion-effects-in-framer-with-react-ftpfhzapo","name":"Learn Scroll Motion Effects in Framer with React"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/pasteme---paste-codes-from-your-terminal--vps8hn-z","name":"PasteMe - Paste Codes From Your Terminal"}]},{"@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":"July 2022"}]}]} ```