--- title: Best developer posts — August 2022 | daily.dev description: The most upvoted daily.dev posts from August 2022, curated by the daily.dev community. canonical: https://daily.dev/posts/best-of/2022/08 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/posts/best-of/2022/08 og:type: website og:site_name: daily.dev og:title: Best developer posts — August 2022 | daily.dev og:description: The most upvoted daily.dev posts from August 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 — August 2022 1. 1 [](https://daily.dev/posts/i-made-100-css-loaders-for-your-next-project-uhgzkxrmh "I made 100 CSS loaders for your next project") Article Community Picks · 4y I made 100 CSS loaders for your next project Each loader is done using a single element. Add a class to your div and start loading! Table of content The Classic The Infinity The Dots The Bars The Spinner The Continuous The Progress The Wobbling The Shapes The Pulsing That's it! 1.6K 97 2. 2 [](https://daily.dev/posts/javascript-visualized-the-javascript-engine-fev6jy-eo "JavaScript Visualized: the JavaScript Engine") Article Community Picks · 4y JavaScript Visualized: the JavaScript Engine JavaScript is based on the V8 engine used by Node.js and Chromium-based browsers. The engine tries to avoid parsing code that's not necessary right away. The optimized machine code can simply be re-used in order to speed things up. V8 is open source and has some great documentation on how it works under the hood. 1K 35 3. 3 [](https://daily.dev/posts/system-design-the-complete-course-g81uw5ava "System Design: The complete course") Article Hashnode · 4y System Design: The complete course System design is one of the earliest decisions we can make when building a system. System design meets the needs of your business or organization through coherent and efficient systems. The OSI Model can be seen as a universal language for computer networking. It's based on the concept of splitting up a communication system into seven abstract layers, each one stacked upon the last. 676 25 4. 4 [](https://daily.dev/posts/javascript-visualized-event-loop-k-rdpazu9 "JavaScript Visualized: Event Loop") Article Community Picks · 4y JavaScript Visualized: Event Loop JavaScript is single-threaded: only one task can run at a time. When we invoke a function, it gets added to something called the call stack. The call stack is part of the JS engine, this isn't browser specific. 533 13 5. 5 [](https://daily.dev/posts/full-docker-course-free--8eq24dgjw "Full Docker Course [FREE]") Article Community Picks · 4y Full Docker Course \[FREE\] The course is a mix of animated theoretic explanations and hands-on demo’s to follow along. You will have a deep understanding of the concepts and a great overall big picture of how Docker is used in the whole software development process. It's a handy way to quickly look something up or refresh your knowledge at work. 512 8 6. 6 [](https://daily.dev/posts/console-log-alternatives-you-didn-t-know-mxck-zrxe "console.log alternatives you didn't know") Article DevDojo · 4y console.log alternatives you didn't know Using the destruction power of javascript objects, you can use destructuring. You can change the log function to any other name you want. This method is used to measure time. It's used to check if a condition is true. If it's not, it will throw an error. 478 38 7. 7 [](https://daily.dev/posts/100-underline-overlay-animations-the-ultimate-css-collection-y9cfouc5v "100 underline/overlay animations | The ultimate CSS collection") Article Community Picks · 4y 100 underline/overlay animations | The ultimate CSS collection The All Sides The Thick The Sliding The Below requires us to know the width of the element so it's more suitable for monospace fonts. The below doesn't work on Firefox due to a known bug The 3D Warning. 465 19 8. 8 [](https://daily.dev/posts/visual-studio-code-s-new-editor-sticky-scroll-feature-igpnrefk1 "Visual Studio Code's New Editor Sticky Scroll Feature") Article Community Picks · 4y Visual Studio Code's New Editor Sticky Scroll Feature Sticky Scroll has been introduced in the July release (a\_lthough we are in the middle of August\_) of Visual Studio Code, specifically in version 1.70. 427 21 9. 9 [](https://daily.dev/posts/git-concepts-i-wish-i-knew-years-ago-ax4qymjhd "Git Concepts I Wish I Knew Years Ago") Article Community Picks · 4y Git Concepts I Wish I Knew Years Ago Mastering Git will make a huge difference in how you manage code and your own day-to-day workflow. Because Git commands are a bit archaic and hard to remember, this guide will be broken up by concepts and expected behavior instead. If you don't have the basic git commands mastered, start with the official documentation. Limit force pushing to your own branches, before opening a pull request. 404 15 10. 10 [](https://daily.dev/posts/use-google-like-a-pro-b1nqqe7sq "Use Google like a pro") Article Community Picks · 4y Use Google like a pro Use quotes to force an exact-match search: "what is javascript" Use the OR operator to get the results related to one of the search terms. You can use the (\*) wildcards as placeholders, which will be replaced by any word or phrase. 400 18 11. 11 [](https://daily.dev/posts/i-stopped-using-visual-studio-code-foc6hgmmn "I stopped using Visual Studio Code") Article Hashnode · 4y I stopped using Visual Studio Code WebStorm is a paid product compared to VSC, which is free. It runs projects without hesitation and has no issue refactoring a widely used import. 374 97 12. 12 [](https://daily.dev/posts/beautify-github-profile-nwxwqexa1 "Beautify GitHub profile") Article Community Picks · 4y Beautify GitHub profile README is a lightweight markup language that is intended for readability and to make the code look just like the output. README file generators can help you build your GitHub profile with minimum effort and ease. There are some cool dynamic features you can add to your readme file and take your profile to a completely next level. There is a Vs Code extension called WakaTime. 364 15 13. 13 [](https://daily.dev/posts/speech-recognition-with-javascript-p3djbooza "Speech Recognition with JavaScript") Article Community Picks · 4y Speech Recognition with JavaScript Speech recognition API was added to the specs and we got partial support on Chrome, Safari, Baidu, Android webview, iOS safari, samsung internet and Kaios browsers (see browser support in detail) The implementation I made currently supports English and Spanish just to showcase. 336 11 14. 14 [](https://daily.dev/posts/lodash-is-dead-long-live-radash--3qy5nb-hz "Lodash is dead. Long live Radash.") Article Medium · 4y Lodash is dead. Long live Radash. Lodash was created in 2009 (as Underscore) and rose to power after a fork (as Lodash) around 2012-2013\. The language was too unsafe, unmaintainable, and unwieldy. The addition of optional chaining and null coalescing alone makes a large handful of Lodash functions obsolete. The source code is maintained with understandability for newcomers as a top priority. 327 27 15. 15 [](https://daily.dev/posts/why-react-re-renders-iftwro8ck "Why React Re-Renders") Article Josh W Comeau · 4y Why React Re-Renders This tutorial is written to help beginner-intermediate React developers get more comfortable with React. It's the only “trigger” in React for a component to re-render. In React, every state change in React forces an application-wide render, but this isn't true. In this case, it sees that our paragraph has a text node that changed from 0 to 1. 306 18 16. 16 [](https://daily.dev/posts/how-to-use-multithreading-in-node-js-miwi0gr8y "How To Use Multithreading in Node.js") Article Community Picks · 4y How To Use Multithreading in Node.js Since JavaScript is single-threaded, it blocks the main thread and no other code executes until the task completes. To understand this, you will create a Node.js program with an infinite loop so that it doesn’t exit when run. Using nano or your preferred text editor, create and open the process.js file: nano process. 301 14 17. 17 [](https://daily.dev/posts/algorithms-in-javascript-with-visual-examples--pozvzdpro "Algorithms in JavaScript with visual examples.") Article Community Picks · 4y Algorithms in JavaScript with visual examples. Recursion is a way to represent the time and space complexity of an algorithm. Every time the first element of array will be sliced, because we have already cheked it for odd or even. 293 15 18. 18 [](https://daily.dev/posts/please-stop-using-local-storage-nvkjpsixv "Please Stop Using Local Storage") Article Community Picks · 4y Please Stop Using Local Storage Local storage is just one big old JavaScript object that you can attach data to (or remove data from) Local storage provides at least 5MB of data storage across all major web browsers. This is a fairly low limit for people building apps that are data intensive or need to function offline. If the app you're using doesn't fit the above description: don't use local storage. 287 22 19. 19 [](https://daily.dev/posts/bye-bye-heroku-d8oqtwlmf "Bye Bye Heroku") Article DEV · 4y Bye Bye Heroku Heroku is a cloud programming platform designed to help build and deploy online applications. Founded in 2007, it is now one of the largest PaaS platforms in existence. Starting November 28, 2022, we plan to stop offering free product plans and start shutting down free dynos and data services. 285 46 20. 20 [](https://daily.dev/posts/free-alternatives-to-heroku-ts-bgrotu "Free Alternatives to Heroku") Article DEV · 4y Free Alternatives to Heroku Heroku has brought an end to free dynos and Postgres databases. Other free platforms can be used to host Django (Python) powered web applications for free. Fly and Render seems to offer Postgres on a free plan. Railway doesn't have a free tier, but basic usage is quite cheap. 285 13 21. 21 [](https://daily.dev/posts/understanding-usememo-and-usecallback-ptqrzzj8g "Understanding useMemo and useCallback") Article Josh W Comeau · 4y Understanding useMemo and useCallback The main thing that React does is keep our UI in sync with our application state. The tool that it uses to do this is called a “re-render” Each re-render is a snapshot of what the application's UI should look like at a given moment in time. For example, let's suppose our example also features a digital clock. We could potentially run into some performance problems if we wind up doing this work gratuitously. 280 12 22. 22 [](https://daily.dev/posts/software-engineer-interview-the-interview-study-guide-for-software-engineers-dlmeakbpn "Software Engineer Interview: The Interview Study Guide For Software Engineers") Article Community Picks · 4y Software Engineer Interview: The Interview Study Guide For Software Engineers Ben Rogojan created a checklist on his last round of interviews that covers many of the popular topics. To help you keep track of your progress, we've compiled a comprehensive checklist of the same problems listed below. 270 11 23. 23 [](https://daily.dev/posts/the-css-hack-you-need-to-know--sbyq2um5f "The CSS Hack You Need To Know!") Article Dev Genius · 4y The CSS Hack You Need To Know! The Attr() selector allows our CSS style sheet code to communicate with our HTML. The selector allows us to read in attribute values specific to the targeted HTML tag or element. A common practice implementation for this type of feature would be to use an additional span within an element. The span value is updated as required. 267 11 24. 24 [](https://daily.dev/posts/building-a-chat-app-with-socket-io-and-react--zpd-2zyts "Building a chat app with Socket.io and React 🚀") Article Community Picks · 4y Building a chat app with Socket.io and React 🚀 Socket.io is a popular JavaScript library that allows us to create real-time, bi-directional communication between web browsers and a Node.js server. To develop a chat app you would need to be aware of new messages as soon as they arrive. To read this article you'll need to have a basic knowledge of React.io. 245 11 25. 25 [](https://daily.dev/posts/micro-frontend-with-react-and-next-js-goe5wsium "Micro-frontend with React and Next.js") Article LogRocket · 4y Micro-frontend with React and Next.js The bottom line is that you should split your project up so that the user experience won't be disturbed. It should look like this: We have to expose our component to make it globally available for another micro-frontend. We will use the exported component of fe1 and the function of fe2\. Let’s treat fe3 as a consumer. Let's treat fe2 as a customer. Let�’S treat fe1 as a consumers. 242 7 [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/08#page","url":"https://daily.dev/posts/best-of/2022/08","name":"Best Developer Posts — August 2022","description":"The most upvoted daily.dev posts from August 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/posts/best-of/2022/08#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/i-made-100-css-loaders-for-your-next-project-uhgzkxrmh","name":"I made 100 CSS loaders for your next project"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/javascript-visualized-the-javascript-engine-fev6jy-eo","name":"JavaScript Visualized: the JavaScript Engine"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/system-design-the-complete-course-g81uw5ava","name":"System Design: The complete course"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/javascript-visualized-event-loop-k-rdpazu9","name":"JavaScript Visualized: Event Loop"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/full-docker-course-free--8eq24dgjw","name":"Full Docker Course [FREE]"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/console-log-alternatives-you-didn-t-know-mxck-zrxe","name":"console.log alternatives you didn't know"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/100-underline-overlay-animations-the-ultimate-css-collection-y9cfouc5v","name":"100 underline/overlay animations | The ultimate CSS collection"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/visual-studio-code-s-new-editor-sticky-scroll-feature-igpnrefk1","name":"Visual Studio Code's New Editor Sticky Scroll Feature"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/git-concepts-i-wish-i-knew-years-ago-ax4qymjhd","name":"Git Concepts I Wish I Knew Years Ago"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/use-google-like-a-pro-b1nqqe7sq","name":"Use Google like a pro"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/i-stopped-using-visual-studio-code-foc6hgmmn","name":"I stopped using Visual Studio Code"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/beautify-github-profile-nwxwqexa1","name":"Beautify GitHub profile"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/speech-recognition-with-javascript-p3djbooza","name":"Speech Recognition with JavaScript"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/lodash-is-dead-long-live-radash--3qy5nb-hz","name":"Lodash is dead. Long live Radash."},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/why-react-re-renders-iftwro8ck","name":"Why React Re-Renders"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/how-to-use-multithreading-in-node-js-miwi0gr8y","name":"How To Use Multithreading in Node.js"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/algorithms-in-javascript-with-visual-examples--pozvzdpro","name":"Algorithms in JavaScript with visual examples."},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/please-stop-using-local-storage-nvkjpsixv","name":"Please Stop Using Local Storage"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/bye-bye-heroku-d8oqtwlmf","name":"Bye Bye Heroku"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/free-alternatives-to-heroku-ts-bgrotu","name":"Free Alternatives to Heroku"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/understanding-usememo-and-usecallback-ptqrzzj8g","name":"Understanding useMemo and useCallback"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/software-engineer-interview-the-interview-study-guide-for-software-engineers-dlmeakbpn","name":"Software Engineer Interview: The Interview Study Guide For Software Engineers"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/the-css-hack-you-need-to-know--sbyq2um5f","name":"The CSS Hack You Need To Know!"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/building-a-chat-app-with-socket-io-and-react--zpd-2zyts","name":"Building a chat app with Socket.io and React 🚀"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/micro-frontend-with-react-and-next-js-goe5wsium","name":"Micro-frontend with React and Next.js"}]},{"@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":"August 2022"}]}]} ```