--- title: Best developer posts — November 2022 | daily.dev description: The most upvoted daily.dev posts from November 2022, curated by the daily.dev community. canonical: https://daily.dev/posts/best-of/2022/11 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/posts/best-of/2022/11 og:type: website og:site_name: daily.dev og:title: Best developer posts — November 2022 | daily.dev og:description: The most upvoted daily.dev posts from November 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 — November 2022 1. 1 [](https://daily.dev/posts/advanced-typescript-wcrx-pslb "Advanced TypeScript") Article Community Picks · 4y Advanced TypeScript Mapped types are a great way of transforming existing types into new types. We create the helper type that takes a type and maps all properties to be of return type. 707 25 2. 2 [](https://daily.dev/posts/say-bye-bye-to-bad-javascript-practices-yrf1pq4d9 "Say bye bye to bad javascript practices") Article Medium · 4y Say bye bye to bad javascript practices Some small practices in programming can have a continuously negative impact on the code we write and the product we create as the end result. It’s important to share what they are and why you should avoid them at all costs. Here are a few tips and reminders to help you write code comments like a pro. 673 66 3. 3 [](https://daily.dev/posts/an-interactive-guide-to-flexbox-cki6efp-g "An Interactive Guide to Flexbox") Article Josh W Comeau · 4y An Interactive Guide to Flexbox Flexbox is a remarkably powerful layout mode. It uses fluid principles to create a layout that flows seamlessly. When we truly understand how it works, we can build dynamic layouts that respond automatically. We'll build an intuition for how the Flexbox algorithm works, by learning about each of these properties. 508 42 4. 4 [](https://daily.dev/posts/an-animated-guide-for-node-js-event-loop-xgluhlxak "An animated guide for Node.js event loop") Article DEV · 4y An animated guide for Node.js event loop Node.js is single-threaded, but what does it mean in practical terms? We will explore it by following this piece of code step by step. The V8 JavaScript engine manages a call stack, an essential piece that tracks which part of our program is running. The event loop connects the queue with the call stack. 455 18 5. 5 [](https://daily.dev/posts/the-full-stack-software-design-architecture-map-vapc2byio "The Full-stack Software Design & Architecture Map") Article Community Picks · 4y The Full-stack Software Design & Architecture Map The Full-stack Software Design & Architecture Map. How to Learn Software Design and Architecture is taken from Solid Book - The Software Architecture & Design Handbook w/ TypeScript + Node.js. The map is a little bit more detailed, and as a result, the map is more useful. 366 14 6. 6 [](https://daily.dev/posts/react---best-practices-2z3qjna8o "React - Best Practices") Article Community Picks · 4y React - Best Practices In JavaScript, you can adopt ES6 syntax to make your code cleaner. Don't Forget key Prop With map in JSX Always assign a unique value to the prop to every JSX element while mapping from an array. Use Ternary Operator instead of if/else if Statements makes your code bulky. 347 30 7. 7 [](https://daily.dev/posts/5-websites-to-learn-frontend-web-development-faster-il-idgy1a "5 websites to learn Frontend-web development faster") Article Community Picks · 4y 5 websites to learn Frontend-web development faster In this article, I have curated 5 resourceful sites that will help you better you web development skills really fast. Exercism gives you the same path of study with extra challenges to help you grow faster. Below is a roadmap to master the fundamentals of JavaScript using this site. 338 31 8. 8 [](https://daily.dev/posts/javascript-under-the-hood-advanced-concepts-developers-should-know-xrzlgfa-f "JavaScript Under The Hood: Advanced Concepts Developers Should Know") Article Community Picks · 4y JavaScript Under The Hood: Advanced Concepts Developers Should Know In JavaScript, the scope goes from outer to inner. This means that variables declared in the outer scope can be accessed in all inner scope, not vice versa. When console.log (sport) was run, it attempted to locate the variable declaration in the favoriteSport function. The external reference point is determined by where your function is lexically positioned. For example, favoriteSport() is Lexically positioned not within function otherSport. 243 7 9. 9 [](https://daily.dev/posts/javascript-design-patterns-z7nr1izeg "Javascript Design Patterns") Article gitconnected · 4y Javascript Design Patterns Singleton design pattern exposes a single instance that can be used by multiple components. Singleton Pattern can be considered the basics of global state management libraries such as Redux or React Context. The factory pattern is preferred in cases where the object creation process depends on dynamic factors. 225 4 10. 10 [](https://daily.dev/posts/fun-with-console-log--cpkf7vhin "Fun with console.log() 💿") Article Community Picks · 4y Fun with console.log() 💿 The method prints objects/ arrays as a neatly formatted tables. Sections can be collapsed and expanded in the console, but you can also have a section collapsed by default, by using instead of. 210 20 11. 11 [](https://daily.dev/posts/clean-code-in-typescript-xvdhkkjjx "Clean Code in TypeScript") Article Medium · 4y Clean Code in TypeScript Code smells or bad code doesn't mean that the code is not usable, but as a programmer, I think we should produce reusable, readable, and refactorable software. I will not repeat the mistakes in the last article, if you haven’t read it, please check it out. 208 4 12. 12 [](https://daily.dev/posts/twitter-architecture-2022-vs-2012-tlw9m09k7 "Twitter Architecture 2022 vs 2012") Article ByteByteGo · 4y Twitter Architecture 2022 vs 2012 The diagram below shows how data is encapsulated and de-encapsulated when transmitting over the network. Each layer can rely on the headers for processing instructions and does not need to know the meaning of the data from the last layer. 204 1 13. 13 [](https://daily.dev/posts/creating-a-music-streaming-backend-like-spotify-using-mongodb-4aekw6jk8 "Creating a Music Streaming Backend Like Spotify Using MongoDB") Article Analytics Vidhya · 4y Creating a Music Streaming Backend Like Spotify Using MongoDB Creating a Music Streaming Backend like Spotify using MongoDB. This article was published as a part of the Data Science Blogathon. In this article, I will show you how to handle uploading songs to the database, streaming music, user authentication, the ability to choose your favorite songs, and a recommendation engine. We will add our code in a new file named ‘auth.ts’ in a new file.ts. 197 1 14. 14 [](https://daily.dev/posts/css-best-practices-16-ways-to-improve-your-css-skills-quickly-84zxcpdzg "CSS Best Practices: 16 Ways to Improve Your CSS Skills Quickly") Article Torque · 4y CSS Best Practices: 16 Ways to Improve Your CSS Skills Quickly By adhering to basic guidelines for writing CSS, you can make sure you produce clean, legible, and easily supportable code. Make your code readable and make it more comfortable to understand, maintain, and work with. If there is an existing style guide, stick with that. 189 10 15. 15 [](https://daily.dev/posts/html-cheat-sheet-sxysw2dic "HTML Cheat Sheet") Article Community Picks · 4y HTML Cheat Sheet HTML Cheat Sheet contains useful code examples and web developer tools, markup generators and more on a single page. These pages were created as a quick guide for those who already know how to work with these languages. The page was created in 2020 with the latest HTML5 rules and will be updated regularly. 188 13 16. 16 [](https://daily.dev/posts/is-react-going-anywhere--kk7qnx1wi "Is React going anywhere?") Article Community Picks · 4y Is React going anywhere? React will be 10 years old on the 29th of May 2023 (finally recruiters are able to ask for 10 years of experience, without being a laughing stock) React is getting old, and when applications start to get old, you start finding issues, loads of them. 184 23 17. 17 [](https://daily.dev/posts/a-visual-guide-to-ssh-tunnels-with-labs--r3ltzdw76 "A Visual Guide to SSH Tunnels (with labs)") Article Pointer · 4y A Visual Guide to SSH Tunnels (with labs) SSH is yet another example of an ancient technology that is still in wide use today. With nothing but standard tools, you can achieve the following: Access internal VPC endpoints through a public-facing EC2 instance. Expose any local server from a home/private network to the outside First, we need to prepare the server - a machine with the SSH daemon and a simple web service listening on 127.0.1:80\. The web service is a simple online service. 185 4 18. 18 [](https://daily.dev/posts/why-you-should-never-use-px-to-set-font-size-in-css-v3sat4lss "Why you should never use px to set font-size in CSS") Article Community Picks · 4y Why you should never use px to set font-size in CSS CSS Tricks: Why you should never use px to set font-size in CSS is an important, and poorly understood topic. If you pick the wrong unit, you risk overriding your users’ preferences, making it stands for “root em,” and the root of a webpage is the tag. 178 10 19. 19 [](https://daily.dev/posts/yangshun-tech-interview-handbook-curated-coding-interview-preparation-materials-for-busy-software-uaaqgaw3j "yangshun/tech-interview-handbook: 💯 Curated coding interview preparation materials for busy software engineers") Article Pointer · 4y yangshun/tech-interview-handbook: 💯 Curated coding interview preparation materials for busy software engineers Over 500,000 people have benefitted from this handbook. Best practice questions for coding interviews - Grind 75 - the next evolution of Blind 75, bigger and better. How to prepare for coding interview best practices. 179 1 20. 20 [](https://daily.dev/posts/moving-letters-pc-smwbxr "Moving Letters") Article Community Picks · 4y Moving Letters Text animated with JavaScript & anime and anime. Text animated with CNN & anime. Use this to help you with reading comprehension and vocabulary. Use the weekly Newsquiz to test your knowledge of stories you saw on CNN.com and iReport. 176 19 21. 21 [](https://daily.dev/posts/the-difference-between-the-shell-and-the-terminal-b9zn-weru "The Difference Between the Shell and the Terminal") Article DEV · 4y The Difference Between the Shell and the Terminal The shell and the terminal are different from each other but are often used interchangeably. When using a command line interface, we use text commands to make our programs work instead of a Graphical User Interface. The shell is a program that takes commands from the keyboard and gives them to the kernel to perform. 166 9 22. 22 [](https://daily.dev/posts/ep34-session-cookie-jwt-token-sso-and-oauth--iurijm82 "EP34: Session, cookie, JWT, token, SSO, and OAuth") Article ByteByteGo · 4y EP34: Session, cookie, JWT, token, SSO, and OAuth The Black Friday sale is now up! Use code BF2022 at checkout for 30% off my system design interview online course. This week’s system design refresher: System design interview course (Black Friday Sale) Token, Cookie, Session What is CDN? 166 5 23. 23 [](https://daily.dev/posts/is-flutter-better-than-react-native--aic74lmxo "Is Flutter better than React Native?") Article Community Picks · 4y Is Flutter better than React Native? Flutter and React Native are natural competitors as two of the most used multi-platform mobile app frameworks. The answer lies not in the technical aspects of React Native and Flutter at all. Hiring developers is famously difficult right now, but the pool of developers to draw from is far larger than Flutter's. 164 14 24. 24 [](https://daily.dev/posts/the-math-behind-nesting-rounded-corners-cjir-j7zt "The Math Behind Nesting Rounded Corners") Article Community Picks · 4y The Math Behind Nesting Rounded Corners The Math Behind Nesting Rounded Corners is the math behind nesting rounded corners. To nest one circle inside of another, the inner circle needs a smaller radius than the outer circle. 161 5 25. 25 [](https://daily.dev/posts/typescript-for-react-developers-why-typescript-is-useful-and-how-it-works-mcyri5hoo "TypeScript for React Developers – Why TypeScript is Useful and How it Works") Article freeCodeCamp · 4y TypeScript for React Developers – Why TypeScript is Useful and How it Works The idea behind this article is to go through the basics of TS and understand the benefits of TypeScript. In the second section of this article, I will cover the specifics of TS with React. This should help you decide if you want those benefits or not. 155 9 [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/11#page","url":"https://daily.dev/posts/best-of/2022/11","name":"Best Developer Posts — November 2022","description":"The most upvoted daily.dev posts from November 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/posts/best-of/2022/11#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/advanced-typescript-wcrx-pslb","name":"Advanced TypeScript"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/say-bye-bye-to-bad-javascript-practices-yrf1pq4d9","name":"Say bye bye to bad javascript practices"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/an-interactive-guide-to-flexbox-cki6efp-g","name":"An Interactive Guide to Flexbox"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/an-animated-guide-for-node-js-event-loop-xgluhlxak","name":"An animated guide for Node.js event loop"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/the-full-stack-software-design-architecture-map-vapc2byio","name":"The Full-stack Software Design & Architecture Map"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/react---best-practices-2z3qjna8o","name":"React - Best Practices"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/5-websites-to-learn-frontend-web-development-faster-il-idgy1a","name":"5 websites to learn Frontend-web development faster"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/javascript-under-the-hood-advanced-concepts-developers-should-know-xrzlgfa-f","name":"JavaScript Under The Hood: Advanced Concepts Developers Should Know"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/javascript-design-patterns-z7nr1izeg","name":"Javascript Design Patterns"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/fun-with-console-log--cpkf7vhin","name":"Fun with console.log() 💿"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/clean-code-in-typescript-xvdhkkjjx","name":"Clean Code in TypeScript"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/twitter-architecture-2022-vs-2012-tlw9m09k7","name":"Twitter Architecture 2022 vs 2012"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/creating-a-music-streaming-backend-like-spotify-using-mongodb-4aekw6jk8","name":"Creating a Music Streaming Backend Like Spotify Using MongoDB"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/css-best-practices-16-ways-to-improve-your-css-skills-quickly-84zxcpdzg","name":"CSS Best Practices: 16 Ways to Improve Your CSS Skills Quickly"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/html-cheat-sheet-sxysw2dic","name":"HTML Cheat Sheet"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/is-react-going-anywhere--kk7qnx1wi","name":"Is React going anywhere?"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/a-visual-guide-to-ssh-tunnels-with-labs--r3ltzdw76","name":"A Visual Guide to SSH Tunnels (with labs)"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/why-you-should-never-use-px-to-set-font-size-in-css-v3sat4lss","name":"Why you should never use px to set font-size in CSS"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/yangshun-tech-interview-handbook-curated-coding-interview-preparation-materials-for-busy-software-uaaqgaw3j","name":"yangshun/tech-interview-handbook: 💯 Curated coding interview preparation materials for busy software engineers"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/moving-letters-pc-smwbxr","name":"Moving Letters"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/the-difference-between-the-shell-and-the-terminal-b9zn-weru","name":"The Difference Between the Shell and the Terminal"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/ep34-session-cookie-jwt-token-sso-and-oauth--iurijm82","name":"EP34: Session, cookie, JWT, token, SSO, and OAuth"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/is-flutter-better-than-react-native--aic74lmxo","name":"Is Flutter better than React Native?"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/the-math-behind-nesting-rounded-corners-cjir-j7zt","name":"The Math Behind Nesting Rounded Corners"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/typescript-for-react-developers-why-typescript-is-useful-and-how-it-works-mcyri5hoo","name":"TypeScript for React Developers – Why TypeScript is Useful and How it Works"}]},{"@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":"November 2022"}]}]} ```