--- title: Best developer posts — July 2022 | daily.dev description: The most upvoted daily.dev posts from July 2022, curated by the daily.dev community. canonical: https://daily.dev/posts/best-of/2022/07 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/posts/best-of/2022/07 og:type: website og:site_name: daily.dev og:title: Best developer posts — July 2022 | daily.dev og:description: The most upvoted daily.dev 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 daily.dev — July 2022 1. 1 [](https://daily.dev/posts/fantastic-css-border-animation-sqthqwkmj "Fantastic CSS border animation") Article Medium · 4y Fantastic CSS border animation In this article we will use CSS to create a variety of wonderful border effects. The most commonly used one is solid , dashed which appears in the picture above dashed. CSS border also supports none , hidden , dotted , double , groove , ridge , inset , and outset other styles. 846 37 2. 2 [](https://daily.dev/posts/modern-web-app-design-patterns-rq-gjl21w "Modern Web App Design Patterns") Article Community Picks · 4y Modern Web App Design Patterns Design patterns are descriptive, not prescriptive. They can guide you when facing a problem other developers have encountered many times before. They are not a blunt tool for jamming into every scenario. Patterns.dev aims to be a catalog of patterns (for increasing awareness) rather than a checklist (what you must do) 830 39 3. 3 [](https://daily.dev/posts/linux-commands-lxa3hnkwq "LINUX Commands") Article Community Picks · 4y LINUX Commands List your jobs. & Run a job in the background. Suspend the current (foreground) job. Unsuspend a job: bring it into the foreground. bg Make a suspended job run in thebackground. ls List files in a directory. mv Rename (“move”) a file. rmdir Delete (remove) an empty directory and its contents. shred Completely erase a file when the file is deleted. 624 29 4. 4 [](https://daily.dev/posts/bun-is-a-fast-all-in-one-javascript-runtime-hca8xwb6f "Bun is a fast all-in-one JavaScript runtime") Article Changelog · 4y Bun is a fast all-in-one JavaScript runtime Bun is a modern JavaScript runtime like Node or Deno. It was built from scratch to focus on three main things:Start fast (it has the edge in mind) New levels of performance (extending JavaScriptCore, the engine) Being a great and complete tool (bundler, transpiler, package manager) 550 20 5. 5 [](https://daily.dev/posts/12-apis-that-you-as-a-developer-will-love-it-fslrjddga "12 APIs that you as a developer will love it") Article Community Picks · 4y 12 APIs that you as a developer will love it API stands for “Application Programming Interface,” which is a way to communicate between different software services. I created a list of cool, free and easy to use APIs that I like to use, that I will share with you. I hope you like it! 538 30 6. 6 [](https://daily.dev/posts/learn-game-development-with-javascript-sg0jattk7 "Learn Game Development with JavaScript") Article freeCodeCamp · 4y Learn Game Development with JavaScript You will learn to make 2D games with HTML, CSS & plain vanilla JavaScript, using no frameworks and no libraries. Frank Dvorak has created many popular JavaScript courses on a variety of platforms. He will teach you to use everything you learned to make a single final game. 436 14 7. 7 [](https://daily.dev/posts/algorithms-you-should-know-before-you-take-system-design-interviews-hausfehkz "Algorithms you should know before you take system design interviews") Article ByteByteGo · 4y Algorithms you should know before you take system design interviews System Design Interview books cover a range of important algorithms. I put together a list and explained why they are important. It’s very difficult to rank algorithms by importance objectively. understanding “how those algorithms are used in real-world systems’ is generally more important than the implementation details in a system design interview. 434 8 8. 8 [](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 9. 9 [](https://daily.dev/posts/how-to-use-three-js-and-react-to-render-a-3d-model-of-your-self-pko-8ymri "How to Use Three.js And React to Render a 3D Model of Your Self") Article Community Picks · 4y How to Use Three.js And React to Render a 3D Model of Your Self In this article, we’ll cover how to render and configure 3D assets created in a 3D software program like Blender or Maya in a React project using react-three-fiber. To get a customized 3D model of yourself, We well use Ready Player Me, a free-to-use 3D avatar creator. 419 20 10. 10 [](https://daily.dev/posts/the-software-architecture-handbook-4deq4jdyd "The Software Architecture Handbook") Article freeCodeCamp · 4y The Software Architecture Handbook In this article we'll talk about what architecture is within the software world, some of the main concepts to know about it. For each topic I'll give a brief and superficial introduction and code/pseudo-code examples. The most commonly used are REST, SOAP and GraphQl. Most often the HTTP protocol is used. But other protocols and content formats are perfectly possible. 398 18 11. 11 [](https://daily.dev/posts/fundamental-software-architectural-patterns-m1iyxrmnz "Fundamental Software Architectural Patterns") Article Pointer · 4y Fundamental Software Architectural Patterns Architectural patterns are essentially reusable solutions to common problems. Partitioning a system into separate layers, organizing components within them by related criteria, allows developers and teams to work better together. The scope is broader for the architectural patterns while design patterns represent a way to structure classes to build the best internal structure. 384 14 12. 12 [](https://daily.dev/posts/git-commands---cheat-sheet-for-all-developers-9t9ol9m4s "Git Commands - Cheat Sheet for All Developers") Article Honeypot · 4y Git Commands - Cheat Sheet for All Developers Git is a powerful tool for all developers, but some commands are easily forgotten or unknown for junior developers. Here is a comprehensive recap of the Git commands you might need in your everyday developer life. I’ve added complementary links if you want to dig deeper or need specific support for your problem. 354 8 13. 13 [](https://daily.dev/posts/ep17-design-patterns-cheat-sheet-also--yqp84ggw7 "EP17: Design patterns cheat sheet. Also...") Article ByteByteGo · 4y EP17: Design patterns cheat sheet. Also... In the US, tech companies usually run payrolls via Automatic Clearing House (ACH) The RDFI operates on the receiver’s bank accounts based on the instructions in the ACH files. Since 2018, it's possible to choose Same Day ACH so funds can be transferred on the same business day. 338 6 14. 14 [](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 15. 15 [](https://daily.dev/posts/copilot-works-so-well-because-it-steals-open-source-code-and-strips-credit-cxvof8poe "Copilot works so well because it steals open source code and strips credit") Article The Next Web · 4y Copilot works so well because it steals open source code and strips credit The Software Freedom Conservancy announced its withdrawal from GitHub today. The SFC is upset that Microsoft and OpenAI trained an AI system called Copilot on data that was published under an open-source license. The only way to get access to Copilot is through a special invitation from Microsoft or paid subscription. 304 45 16. 16 [](https://daily.dev/posts/github-city---create-a-3d-city-from-your-github-contributions--rug3csvay "GitHub City - Create a 3D city from your GitHub contributions!") Article Product Hunt · 4y GitHub City - Create a 3D city from your GitHub contributions! 299 16 17. 17 [](https://daily.dev/posts/awesome-selfhosted-awesome-selfhosted-a-list-of-free-software-network-services-and-web-applications-2wrd-48qx "awesome-selfhosted/awesome-selfhosted: A list of Free Software network services and web applications which can be hosted on your own servers") Article Pointer · 4y awesome-selfhosted/awesome-selfhosted: A list of Free Software network services and web applications which can be hosted on your own servers This is a list of Free Software network services and web applications which can be hosted on your own server(s) Non-Free software is listed on the non-Free page. Awesome-Selfhosted is the practice of hosting and managing applications on your OWN server. 294 10 18. 18 [](https://daily.dev/posts/diagram-as-code-c1udvr6fx "Diagram as Code") Article ByteByteGo · 4y Diagram as Code 273 16 19. 19 [](https://daily.dev/posts/defensive-css-uthcb69hj "Defensive CSS") Article Hacker News · 4y Defensive CSS 271 14 20. 20 [](https://daily.dev/posts/7-tips-for-clean-react-typescript-code-you-must-know-uhlxvoj2i "7 Tips for Clean React TypeScript Code you Must Know") Article Community Picks · 4y 7 Tips for Clean React TypeScript Code you Must Know Clean code isn't code that just works. It refers to neatly organized code which is easy to read, simple to understand and a piece of cake to maintain. Let's take a look at some of the best practices for clean code in React. Provide explicit types for all values. Take the previous state into account while updating the state. 248 2 21. 21 [](https://daily.dev/posts/how-to-use-lottie-animations-react-js--l8etpb-ny "How to use Lottie animations & React JS?") Article Community Picks · 4y How to use Lottie animations & React JS? Lottie is a library created by Airbnb to facilitate the creation of animations for different platforms. Lottie files work on any device and can be scaled without loss of quality, just like an SVG file. The big difference between animated GIFs and Lotte files is that GIFs are made up of images and Loti files are generated through code in a JSON file. 227 9 22. 22 [](https://daily.dev/posts/front-end-interview-question-xci1q60wy "Front End Interview Question") Article DEV · 4y Front End Interview Question The assignment had little to no restrictions to it. You can use libraries however you like them to fill in the code. You have 1 hour to complete it. I had to build it on my own machine while the interviewer was watching. It is extra curricular points to know the answers to these kind of questions, so if you don't that is okay. 215 6 23. 23 [](https://daily.dev/posts/leonardomso-33-js-concepts-33-javascript-concepts-every-developer-should-know--hr62diqsf "leonardomso/33-js-concepts: 📜 33 JavaScript concepts every developer should know.") Article Community Picks · 4y leonardomso/33-js-concepts: 📜 33 JavaScript concepts every developer should know. This repository was created with the intention of helping developers master their concepts in JavaScript. It is based on an article written by Stephen Curtis and you can read it here. Feel free to submit a PR adding a link to your own recaps or reviews. All the translations for this repo will be listed below. The Ultimate Guide to Execution Contexts, Hoisting, Scopes, and Closures in JavaScript. 210 6 24. 24 [](https://daily.dev/posts/how-to-authenticate-a-user-with-face-recognition-in-react-js-abomrxe7f "How to Authenticate a User with Face Recognition in React.js") Article freeCodeCamp · 4y How to Authenticate a User with Face Recognition in React.js In this tutorial, we'll discuss different authentication techniques you can use to authenticate users. These include email-password authentication, phone auth, OAuth, passwordless magic links, and at last facial authentication. We'll also build a project that teaches you how to integrate facial recognition-based authentication in your React web application Magic link authentication Magic links. 195 5 25. 25 [](https://daily.dev/posts/how-to-center-a-div-with-css-10-different-ways-q4liy7pw4 "How to Center a Div with CSS – 10 Different Ways") Article freeCodeCamp · 4y How to Center a Div with CSS – 10 Different Ways In this article, you'll learn 10 different ways to center a div. We will explore how to center divs using the CSS position property, CSS Flexbox, and CSS Grid. After reading this whole article, I am confident that you will start centering divs like a pro. 193 6 [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/07#page","url":"https://daily.dev/posts/best-of/2022/07","name":"Best Developer Posts — July 2022","description":"The most upvoted daily.dev posts from July 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/posts/best-of/2022/07#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/fantastic-css-border-animation-sqthqwkmj","name":"Fantastic CSS border animation"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/modern-web-app-design-patterns-rq-gjl21w","name":"Modern Web App Design Patterns"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/linux-commands-lxa3hnkwq","name":"LINUX Commands"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/bun-is-a-fast-all-in-one-javascript-runtime-hca8xwb6f","name":"Bun is a fast all-in-one JavaScript runtime"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/12-apis-that-you-as-a-developer-will-love-it-fslrjddga","name":"12 APIs that you as a developer will love it"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/learn-game-development-with-javascript-sg0jattk7","name":"Learn Game Development with JavaScript"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/algorithms-you-should-know-before-you-take-system-design-interviews-hausfehkz","name":"Algorithms you should know before you take system design interviews"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/jokes-only-programmers-will-understand-lgwoewtug","name":"Jokes only programmers will understand"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/how-to-use-three-js-and-react-to-render-a-3d-model-of-your-self-pko-8ymri","name":"How to Use Three.js And React to Render a 3D Model of Your Self"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/the-software-architecture-handbook-4deq4jdyd","name":"The Software Architecture Handbook"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/fundamental-software-architectural-patterns-m1iyxrmnz","name":"Fundamental Software Architectural Patterns"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/git-commands---cheat-sheet-for-all-developers-9t9ol9m4s","name":"Git Commands - Cheat Sheet for All Developers"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/ep17-design-patterns-cheat-sheet-also--yqp84ggw7","name":"EP17: Design patterns cheat sheet. Also..."},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/javascript-object-destructuring-tips-amgdv225h","name":"JavaScript object destructuring tips"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/copilot-works-so-well-because-it-steals-open-source-code-and-strips-credit-cxvof8poe","name":"Copilot works so well because it steals open source code and strips credit"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/github-city---create-a-3d-city-from-your-github-contributions--rug3csvay","name":"GitHub City - Create a 3D city from your GitHub contributions!"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/awesome-selfhosted-awesome-selfhosted-a-list-of-free-software-network-services-and-web-applications-2wrd-48qx","name":"awesome-selfhosted/awesome-selfhosted: A list of Free Software network services and web applications which can be hosted on your own servers"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/diagram-as-code-c1udvr6fx","name":"Diagram as Code"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/defensive-css-uthcb69hj","name":"Defensive CSS"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/7-tips-for-clean-react-typescript-code-you-must-know-uhlxvoj2i","name":"7 Tips for Clean React TypeScript Code you Must Know"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/how-to-use-lottie-animations-react-js--l8etpb-ny","name":"How to use Lottie animations & React JS?"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/front-end-interview-question-xci1q60wy","name":"Front End Interview Question"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/leonardomso-33-js-concepts-33-javascript-concepts-every-developer-should-know--hr62diqsf","name":"leonardomso/33-js-concepts: 📜 33 JavaScript concepts every developer should know."},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/how-to-authenticate-a-user-with-face-recognition-in-react-js-abomrxe7f","name":"How to Authenticate a User with Face Recognition in React.js"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/how-to-center-a-div-with-css-10-different-ways-q4liy7pw4","name":"How to Center a Div with CSS – 10 Different Ways"}]},{"@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":"July 2022"}]}]} ```