--- title: Best DEV posts — January 2022 | daily.dev description: The most upvoted DEV posts from January 2022, curated by the daily.dev community. canonical: https://daily.dev/sources/devto/best-of/2022/01 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/devto/best-of/2022/01 og:type: website og:site_name: daily.dev og:title: Best DEV posts — January 2022 | daily.dev og:description: The most upvoted DEV posts from January 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 DEV — January 2022 1. 1 [](https://daily.dev/posts/git-cheat-sheet-50-commands-free-pdf-and-poster--dp7qawzrp "Git Cheat Sheet 📄 (50 commands + Free PDF and poster)") Article DEV · 5y Git Cheat Sheet 📄 (50 commands + Free PDF and poster) Free Git Commands Cheat Sheet PDF to make it easy to copy and paste in commands. A physical A3 poster for your office wall - so you can quickly look up commands, and keep them at the top of your head. The cheat sheet contains 50 commonly used Git commands on the following topics: setting up Git, starting a project, making a change and stashing. 244 15 2. 2 [](https://daily.dev/posts/git-organized-a-better-git-flow-asg5ufp29 "Git Organized: A Better Git Flow") Article DEV · 5y Git Organized: A Better Git Flow When building a new feature, create commits as you go to save your work and fix bugs. Merge branch into main once PR is approved. Don't worry too much about writing descriptive commit messages just yet. The purpose of these commits are to make sure you don't lose work and provide some guideposts. 177 6 3. 3 [](https://daily.dev/posts/8-techniques-to-write-cleaner-javascript-code-rc0vlsf-u "8 techniques to write cleaner JavaScript code") Article DEV · 5y 8 techniques to write cleaner JavaScript code In this article, we're going to look at 8 different techniques to help you write cleaner JavaScript code. Pure Functions are a function that always returns the same output, given the same input(s) Fewer or Named parameters are a good way to make your code cleaner. 162 8 4. 4 [](https://daily.dev/posts/productivity-tips-from-developers-to-developers-ri2d0egom "Productivity Tips From Developers to Developers") Article DEV · 5y Productivity Tips From Developers to Developers Avoid coding first, most likely what you are solving has already been solved. Abstraction is at the core of programming. Caching is a performance optimization and cause of many subtle bugs. There is no one way to do something and learn early on to formulate your options, pros and cons. 135 4 5. 5 [](https://daily.dev/posts/i-am-back-with-100-dark-mode-css-loaders-eg7tbcrrg "I am back with 100 "Dark Mode" CSS loaders") Article DEV · 5y I am back with 100 "Dark Mode" CSS loaders I can only view about a third of them on my phone (safari is defo the new Internet Explorer! 🤣), can’t wait to get back to my PC and enjoy these properly as they are always mega entertaining and interesting! The dark side is strong with this one! 107 8 6. 6 [](https://daily.dev/posts/figma-for-developers-snpijy-j7 "Figma for Developers") Article DEV · 5y Figma for Developers Figma is a free and widely-used UI design tool. It lets developers and designers understand each other's tools and priorities. Figma files are organized by Pages (think screens of your application), which each contain Frames. Prototype allows the designer to hook all the Frames together into a clickable prototype. 88 5 7. 7 [](https://daily.dev/posts/terminal-setup---make-your-mac-terminal-awesome-tchvgpzux "Terminal Setup - Make your Mac terminal awesome") Article DEV · 5y Terminal Setup - Make your Mac terminal awesome I recently installed my new MacBook and set up my terminal. Here I'll show you how to do the same for your MacBook. Easy to configure and modify. Optimized to work as a developer. You will notice the toolbar at the top (Cpu, Ram, Network) to always have an overview of the hardware consumption. 85 5 8. 8 [](https://daily.dev/posts/vs-code-extension-that-generates-documentation-using-ai-dfywh-kbi "VS Code Extension that Generates Documentation Using AI") Article DEV · 5y VS Code Extension that Generates Documentation Using AI There's a fairly new extension on the VS Code marketplace called AI Doc Writer for JavaScript, TypeScript, and Python. I put it to the test to see how good it really is. Here's how it fared on some JS code:. The function is used to collect the data from the repository. :return: A matrix of the dataset. ''' response = get( "https://raw.github.com/yashLadha/" + "The\_Math\_of\_Intelligence/master/Week1/ADRvs" + "Rating.csv" ) lines = \[\] for item in lines: item = item.split(",") data.pop(0 75 6 9. 9 [](https://daily.dev/posts/the-open-source-alternative-to-notion--cdsxopk69 "⭐️ The Open Source Alternative To Notion ⭐️") Article DEV · 5y ⭐️ The Open Source Alternative To Notion ⭐️ AppFlowy is a free and open source workplace management tool. It is built on top of Flutter and Rust. The app is available on GitHub and can be downloaded from the AppFlowy repository. It can also be used on Apple's iOS and Android operating systems. 61 5 10. 10 [](https://daily.dev/posts/i-ve-read-the-pragmatic-programmer-wxypjqozf "I've read... The Pragmatic Programmer") Article DEV · 5y I've read... The Pragmatic Programmer The Pragmatic Programmer is a book about becoming a true professional in their craft. It was published twenty years ago, but it's fascinating to see the struggles we still face day in and day out discussed even then. It's definitely a must-read book for programmers and even people managing programmers. 48 4 11. 11 [](https://daily.dev/posts/target-blank-is-a-security-risk--kuknbk38m "target="_blank" is a security risk?") Article DEV · 5y target="\_blank" is a security risk? When we open a new tab link window.opener get triggered which made a limited access to the specific tab opened. As we all use target="\_blank" to open the link into new tab of a window but everyone should know a risk inside it. Do not forget to add relation attribute in your link tag rel=noopener noreferrer. 36 5 12. 12 [](https://daily.dev/posts/started-2022-by-updating-portfolio-website-gyclq0-qy "Started 2022 by updating portfolio website") Article DEV · 5y Started 2022 by updating portfolio website 33 1 13. 13 [](https://daily.dev/posts/a-printable-pdf---git-cheatsheet-iyhctjkhv "A printable, PDF - Git cheatsheet") Article DEV · 5y A printable, PDF - Git cheatsheet I'd like to share two printable cheatsheets with you. The first cheatsheet shows a common development workflow when working on a development project. The second shows you a common, distributed development pattern and visualizes how several maintainers work on the same codebase. I hope you'll find these useful. 33 2 14. 14 [](https://daily.dev/posts/typescript-vs-code-tricks-for-beginners-10-things-i-wish-i-knew-when-starting-out-q3xqtlduk "TypeScript & VS Code tricks for beginners: 10 things I wish I knew when starting out") Article DEV · 5y TypeScript & VS Code tricks for beginners: 10 things I wish I knew when starting out TypeScript is supposed to make your development life easier, but I vividly recall my earliest memories of TypeScript involving a lot of cursing, confusion about errors, and wondering why anyone would ever waste time writing out all types. I used to write type definitions for hours and complain that I definitely didn't feel my productivity getting any better. Today, I love TypeScript and usually find projects written in plain old JavaScript to be injurious to my mental health. 32 15. 15 [](https://daily.dev/posts/asynchronous-loops-in-javascript---using-foreach-map-and-for-loop-qs-p-izuc "Asynchronous loops in Javascript - using forEach, map and for loop") Article DEV · 5y Asynchronous loops in Javascript - using forEach, map and for loop Asynchronous operations are crucial when working with web applications. In this post, we are going to see how to use loops with async/await. The forEach loop executes all of the iterations simultaneously. The map function behaves exactly the same as forEach in terms of async operations. 32 1 16. 16 [](https://daily.dev/posts/my-646-mistake-with-php--clcjttsc "My $646 mistake with PHP") Article DEV · 5y My $646 mistake with PHP I pinged the Places API 17,000 times in one hour. A while loop in PHP will run until it gets a false back. I was using the $response\['next\_page\_token'\] from the initial request which will always return true. The value that I put in the while loop always returns true and therefore sends the whileloop into an infinite loop. 31 17. 17 [](https://daily.dev/posts/some-best-practices-of-javascript-for-clean-and-better-code-quality--hqezvfkyf "Some Best Practices of Javascript for clean and better code quality...") Article DEV · 5y Some Best Practices of Javascript for clean and better code quality... JavaScript is a very popular and widely used programming language. It's community is growing so is the Javascript. As the new features is being added frequenty, it is hard to write optimized and clean code. Today I'm going to show you some of the best practice that you can follow. 24 18. 18 [](https://daily.dev/posts/game-programming-fundamentals-9p-1d76y8 "Game Programming Fundamentals") Article DEV · 5y Game Programming Fundamentals Game Mechanics are the reason why games reach huge audiences today. In order to better understand the game mechanics, we have to think of a system. There are various sub-parts that this system controls. The game industry is a field that includes many different industries such as mathematics, art, psychology and even cinema. 19 19. 19 [](https://daily.dev/posts/javascript-the-hard-parts-part-1-wrlxfndaq "JavaScript The Hard Parts-Part 1") Article DEV · 5y JavaScript The Hard Parts-Part 1 The code that you write in JavaScript is wrapped with a big thing called execution context. execution context is created to run the code of a function and has 2 parts: thread of execution and memory. JavaScript also has something called the call stack, which keeps track of what the function is currently running. 19 20. 20 [](https://daily.dev/posts/css-tips-on-images-you-need-to-know-rak--tcps "CSS tips on Images you need to know") Article DEV · 5y CSS tips on Images you need to know 5 properties to keep in mind while working with images. Transform: scaleX(-1) / scaleY (-1) to flip your image horizontally and vertically. Object-fit : cover - allows the image to fill the entire dimensions while maintaining its aspect ratio. Filter: drop-shadow - used to add shadows to images with no background. 17 21. 21 [](https://daily.dev/posts/setup-nginx-for-load-balancer-pbcm94jhb "Setup NGINX For Load Balancer") Article DEV · 5y Setup NGINX For Load Balancer Set up nginx loadbalancing on your VPS. Use the nginx upstream module to set up a round robin load balancer. Nginx uses a round-robin algorithm by default if no other method is defined. The least connections method directs the server with the least active connections at that time. 14 1 22. 22 [](https://daily.dev/posts/how-to-start-using-typescript-nibuhzm5j "How to Start Using Typescript") Article DEV · 5y How to Start Using Typescript Typescript is a superset of JavaScript that lets developers write code in a safer way. TypeScript places a lot of emphasis on the type of variables being used in the code. It also has a special type called any which is used to avoid type checking errors on a variable. 14 23. 23 [](https://daily.dev/posts/5-html-input-types-you-are-missing--vfluxehlx "5 HTML Input types you are missing!") Article DEV · 5y 5 HTML Input types you are missing! input tags in HTML are a way of getting an input from the user. The commonly used input types are text, password, email, number etc. Here are 5 input types that every Web Developer must know! You can now have a color picker in your webpage. Just set type property as color in input tag. 12 24. 24 [](https://daily.dev/posts/git-shortcuts-alias--ptxdsvpug "Git shortcuts (alias)") Article DEV · 5y Git shortcuts (alias) Shortcuts and aliases I was compiling as I was setting up a new laptop, and thought I'd share them. Shortcuts: (1) Git alias or (2) Git+Shell alias. Make git shortcuts in a git alias - pattern (note: --global is normally used for a dev's user account) 12 [See all DEV archives](/sources/devto/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/devto/best-of/2022/01#page","url":"https://daily.dev/sources/devto/best-of/2022/01","name":"Best DEV Posts — January 2022","description":"The most upvoted DEV posts from January 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/devto/best-of/2022/01#items","numberOfItems":24,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/git-cheat-sheet-50-commands-free-pdf-and-poster--dp7qawzrp","name":"Git Cheat Sheet 📄 (50 commands + Free PDF and poster)"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/git-organized-a-better-git-flow-asg5ufp29","name":"Git Organized: A Better Git Flow"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/8-techniques-to-write-cleaner-javascript-code-rc0vlsf-u","name":"8 techniques to write cleaner JavaScript code"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/productivity-tips-from-developers-to-developers-ri2d0egom","name":"Productivity Tips From Developers to Developers"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/i-am-back-with-100-dark-mode-css-loaders-eg7tbcrrg","name":"I am back with 100 \"Dark Mode\" CSS loaders"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/figma-for-developers-snpijy-j7","name":"Figma for Developers"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/terminal-setup---make-your-mac-terminal-awesome-tchvgpzux","name":"Terminal Setup - Make your Mac terminal awesome"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/vs-code-extension-that-generates-documentation-using-ai-dfywh-kbi","name":"VS Code Extension that Generates Documentation Using AI"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/the-open-source-alternative-to-notion--cdsxopk69","name":"⭐️ The Open Source Alternative To Notion ⭐️"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/i-ve-read-the-pragmatic-programmer-wxypjqozf","name":"I've read... The Pragmatic Programmer"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/target-blank-is-a-security-risk--kuknbk38m","name":"target=\"_blank\" is a security risk?"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/started-2022-by-updating-portfolio-website-gyclq0-qy","name":"Started 2022 by updating portfolio website"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/a-printable-pdf---git-cheatsheet-iyhctjkhv","name":"A printable, PDF - Git cheatsheet"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/typescript-vs-code-tricks-for-beginners-10-things-i-wish-i-knew-when-starting-out-q3xqtlduk","name":"TypeScript & VS Code tricks for beginners: 10 things I wish I knew when starting out"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/asynchronous-loops-in-javascript---using-foreach-map-and-for-loop-qs-p-izuc","name":"Asynchronous loops in Javascript - using forEach, map and for loop"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/my-646-mistake-with-php--clcjttsc","name":"My $646 mistake with PHP"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/some-best-practices-of-javascript-for-clean-and-better-code-quality--hqezvfkyf","name":"Some Best Practices of Javascript for clean and better code quality..."},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/game-programming-fundamentals-9p-1d76y8","name":"Game Programming Fundamentals"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/javascript-the-hard-parts-part-1-wrlxfndaq","name":"JavaScript The Hard Parts-Part 1"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/css-tips-on-images-you-need-to-know-rak--tcps","name":"CSS tips on Images you need to know"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/setup-nginx-for-load-balancer-pbcm94jhb","name":"Setup NGINX For Load Balancer"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/how-to-start-using-typescript-nibuhzm5j","name":"How to Start Using Typescript"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/5-html-input-types-you-are-missing--vfluxehlx","name":"5 HTML Input types you are missing!"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/git-shortcuts-alias--ptxdsvpug","name":"Git shortcuts (alias)"}]},{"@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":"DEV","item":"https://daily.dev/sources/devto"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/devto/best-of"},{"@type":"ListItem","position":5,"name":"January 2022"}]}]} ```