etc. Media query - Media query should be used to set width and height according to the breakpoints. 135 12 5. 5 [](https://daily.dev/posts/how-to-become-a-senior-developer-in-3-simple-steps-tx-xawahv "How To Become A Senior Developer In 3 Simple Steps") Article DEV · 5y How To Become A Senior Developer In 3 Simple Steps Developers need to transcend themselves if they want to survive in the software industry. To effectively become a senior developer, you must develop a higher level of self-awareness, both technical and personal. Here are the fundamental lessons you need to learn to avoid mistakes to get to senior level. 111 3 6. 6 [](https://daily.dev/posts/how-i-structure-my-react-js-projects-y1xdgruej "How I structure my React.js projects") Article DEV · 5y How I structure my React.js projects Structuring React applications into files and folders is an opinionated topic, because there is no right or wrong way to do it. I decided to share how I have structured my projects lately.Warning: Highly opinionated! Let's get started.Single file. React projects usually start with an src/ folder and one src/App.tsx file with an App component. At some point, your app has more features, more lines, and you will need to make smaller standalone components. 101 1 7. 7 [](https://daily.dev/posts/array-cheatsheet-javascript-s4izmbb3d "Array cheatsheet Javascript") Article DEV · 5y Array cheatsheet Javascript An array is a variable which can contain several independent data, indexed by a number, called index. The index of an array is thus the element allowing to access the data stored in it. Variables in Javascript allow only one data to be stored at a time. Javascript proposes a data structure allowing to store all these data in a "common variable": the array. 96 4 8. 8 [](https://daily.dev/posts/7-ways-to-improve-your-logic-in-programming-uohysnhhd "7 Ways To Improve Your Logic In Programming") Article DEV · 5y 7 Ways To Improve Your Logic In Programming Programming is all about finding the right solution to the problem. With the help of programming, we split the big problems into smaller ones. The more complex issues you try to solve, the more you improve your logical thinking in programming. In this article, we will see 7 techniques to improve your logic; or we can say "Problem Solving" 96 4 9. 9 [](https://daily.dev/posts/do-not-put-skill-bars-on-your-resume--szhoudbov "Do not put skill bars on your resume!") Article DEV · 5y Do not put skill bars on your resume! skill bars are an illogical style of presentation and completely meaningless. They are subjective and unreliable because people are bad in rating themselves. When considering graphics can't be read by machines (ATS systems), skill bars seem to be quite a large waste of space. The only thing what matters in the skill section is what you have worked with before. 94 7 10. 10 [](https://daily.dev/posts/git-cheatsheet-v2qchblck "GIT CHEATSHEET") Article DEV · 5y GIT CHEATSHEET Git is the free and open-source distributed version control system that's responsible for everything GitHub related that happens locally on your computer. This cheat sheet features the most important and commonly used Git commands for easy reference. Use these commands to help you understand Git and its features. 92 6 11. 11 [](https://daily.dev/posts/deep-dive-into-node-js-architecture-drkpfctea "Deep dive into Node.js Architecture") Article DEV · 5y Deep dive into Node.js Architecture Node.js is a single-threaded, asynchronous, event-driven runtime environment for running Javascript code on the server. It uses a mechanism called synchronous event demultiplexing to handle concurrent non-blocking resources in an efficient way. In this article, we are going to deep dive into the architecture and understand the asynchronous nature of node.js. 78 1 12. 12 [](https://daily.dev/posts/tap-bar-with-liquid-animation-using-css-and-javascript-grn-unnn2 "Tap bar with liquid animation using CSS and JavaScript") Article DEV · 5y Tap bar with liquid animation using CSS and JavaScript In this article, we will create a tap bar that you can use in your mobile projects. In the HTML code, the "bar" class is the container of our tap bar and "bar-item" class are the buttons that trigger the animations. Let's first look at what are we building: 75 3 13. 13 [](https://daily.dev/posts/javascript---everything-you-always-wanted-to-know-about-localstorage-but-you-were-afraid-to-ask--bkmakgytv "javascript - Everything you always wanted to know about localStorage (but you were afraid to ask)") Article DEV · 5y javascript - Everything you always wanted to know about localStorage (but you were afraid to ask) LocalStorage is a read-only property of the window interface that allows us to access the Storage for the Document’ origin (aka the browser). It let us save key-value pairs on the user browser. This was introduced on HTML 5 and everything it’s stored as a String, but I will show you how to save JSON objects. 57 3 14. 14 [](https://daily.dev/posts/top-10-websites-to-find-remote-jobs-seu-631la "Top 10 Websites to find Remote Jobs") Article DEV · 5y Top 10 Websites to find Remote Jobs Remote work means working from anywhere other than the office. We Work Remotely is the largest remote work community in the world. PowerToFly is a mostly tech-focused jobs board site specifically designed for women. Jobspresso is an easy-to-use remote jobs website to find quality remote careers. 56 15. 15 [](https://daily.dev/posts/how-to-create-modern-cards-using-react-and-tailwind-o00pdqjlq "How to Create Modern Cards using React and Tailwind") Article DEV · 5y How to Create Modern Cards using React and Tailwind In today's example we will make a simple card, but in my opinion it has a very different design when compared to many libraries and frameworks. The framework we are going to use today is Tailwind CSS and along with this framework we will use other tools such as classnames and react-icons. 52 1 16. 16 [](https://daily.dev/posts/you-probably-don-t-need-that-usestate-useeffect-7x9it2isi "You (probably) don't need that useState + useEffect") Article DEV · 5y You (probably) don't need that useState + useEffect React's useState and useEffect hooks were a godsend for the React community. However, like any tool, these can easily be abused. The problem with the above use case is that we are keeping track of some redundant state, specifically items and itemsLength. These pieces of data can instead be derived functionally from data. 50 1 17. 17 [](https://daily.dev/posts/features-of-clean-code-architecture-node-js-lsxh3bihh "Features of clean code architecture | Node.js") Article DEV · 5y Features of clean code architecture | Node.js Software architecture is primarily the structure of the software components to be arranged in a purposeful and efficient system. The goal of software architecture is to minimize the human effort required to build and maintain software systems. Clean code architecture, created by Robert Cecil Martin (a.k.a Uncle Bob), shines. 45 18. 18 [](https://daily.dev/posts/get-lazy-with-lazygit-nclrvgcvb "Get lazy with lazygit") Article DEV · 5y Get lazy with lazygit lazygit is a terminal UI for git commands written in Go. It's easy to download and install, so definitely give it a go! With lazygit you can quickly see through the changed files and stage/unstage them accordingly. As well as, you can see the changes on each file very easily. 34 1 19. 19 [](https://daily.dev/posts/the-1-best-design-pattern-for-managing-forms-in-react-rt5pnixzh "The #1 Best Design Pattern for Managing Forms in React") Article DEV · 5y The #1 Best Design Pattern for Managing Forms in React React-Hook-Form is the best way to manage forms in React. Form libraries usually have a relatively small bundle size and make a world of difference for code organization. The 3 Layer Approach is the basic approach to split a complicated form into three parts. Using RHF with RHF is the official way to get started with form management. 34 1 20. 20 [](https://daily.dev/posts/my-sleek-and-modern-linux-development-machine-in-2021-tb7lozio "My sleek and modern Linux development machine in 2021") Article DEV · 5y My sleek and modern Linux development machine in 2021 This is a follow-up to a post about my Linux development machine in 2019\. I'm detailing essential aspects of my setup and hoping it will inspire more people to use Linux. I also wrote about the state of Linux on the desktop. Check it out if you are interested in Linux. You might be surprised. 32 21. 21 [](https://daily.dev/posts/spring-boot-architecture-i0tz38i5 "Spring Boot Architecture") Article DEV · 5y Spring Boot Architecture Spring Boot is a more user-friendly version of the Spring Framework. With Spring Boot, you can create autonomous and easy to run applications. Spring Boot Architecture has four layers: Presentation Layer, Business Layer, Persistence Layer and Database layer. Spring Initializr will generate the application for you in an instant. 29 22. 22 [](https://daily.dev/posts/bulletproof-react-is-a-hidden-treasure-of-react-best-practices--guufkovyy ""bulletproof-react" is a hidden treasure of React best practices!") Article DEV · 5y "bulletproof-react" is a hidden treasure of React best practices! The GitHub repository "bulletproof-react" is published as an example of React application architecture. The directory structure tends to vary from project to project. The root of a real project will have a mix of markdown documentation, CI settings, and Docker settings. The source code of the application and the non-components will be mixed in the same hierarchy. 29 2 23. 23 [](https://daily.dev/posts/next-js-portfolio-template-gh-a-yvri "Next.js Portfolio Template") Article DEV · 5y Next.js Portfolio Template After a few months of development, I have finally put together a multi-themed website that will greatly increase your chances of getting attention from recruiters. The template has several API calls, that is handled by the SWR (stale-while-revalidate), the list includes: Medium, Spotify, GitHub and GitHub. 26 1 24. 24 [](https://daily.dev/posts/typescript-generics-for-react-developers-c0byd6cdp "Typescript generics for React developers") Article DEV · 5y Typescript generics for React developers Typescript documentation is hard to read. I want to re-write it in a way that is actually understandable by a casual reader. Let’s start with a component without generics, and introduce them only when we need them. We’re going to implement a page with a bunch of identical-looking selects for multiple categories. 25 25. 25 [](https://daily.dev/posts/modern-angular-xb1mry87z "Modern Angular") Article DEV · 5y Modern Angular Modern Tools are tools that can and should be used when building Angular applications and Angular libraries. These tools tend to focus on a more architectural side of software development. Modern Tools take advantage of the latest improvements in the JavaScript ecosystem to improve productivity, consistency, reliability, scalability and developer experience. 25 [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/2021/11#page","url":"https://daily.dev/sources/devto/best-of/2021/11","name":"Best DEV Posts — November 2021","description":"The most upvoted DEV posts from November 2021, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/devto/best-of/2021/11#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/advanced-javascript-design-patterns-hakr-ecpz","name":"Advanced Javascript Design Patterns"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/mac-os-for-the-web--boyfwimy3","name":"Mac OS for the Web!"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/codesandbox-black-the-best-vscode-theme-ever--8g2blexvu","name":"CodeSandbox Black, the best VSCode theme ever!"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/responsive-design-css-tips-osgsrngb8","name":"Responsive Design CSS tips"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/how-to-become-a-senior-developer-in-3-simple-steps-tx-xawahv","name":"How To Become A Senior Developer In 3 Simple Steps"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/how-i-structure-my-react-js-projects-y1xdgruej","name":"How I structure my React.js projects"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/array-cheatsheet-javascript-s4izmbb3d","name":"Array cheatsheet Javascript"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/7-ways-to-improve-your-logic-in-programming-uohysnhhd","name":"7 Ways To Improve Your Logic In Programming"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/do-not-put-skill-bars-on-your-resume--szhoudbov","name":"Do not put skill bars on your resume!"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/git-cheatsheet-v2qchblck","name":"GIT CHEATSHEET"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/deep-dive-into-node-js-architecture-drkpfctea","name":"Deep dive into Node.js Architecture"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/tap-bar-with-liquid-animation-using-css-and-javascript-grn-unnn2","name":"Tap bar with liquid animation using CSS and JavaScript"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/javascript---everything-you-always-wanted-to-know-about-localstorage-but-you-were-afraid-to-ask--bkmakgytv","name":"javascript - Everything you always wanted to know about localStorage (but you were afraid to ask)"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/top-10-websites-to-find-remote-jobs-seu-631la","name":"Top 10 Websites to find Remote Jobs"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/how-to-create-modern-cards-using-react-and-tailwind-o00pdqjlq","name":"How to Create Modern Cards using React and Tailwind"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/you-probably-don-t-need-that-usestate-useeffect-7x9it2isi","name":"You (probably) don't need that useState + useEffect"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/features-of-clean-code-architecture-node-js-lsxh3bihh","name":"Features of clean code architecture | Node.js"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/get-lazy-with-lazygit-nclrvgcvb","name":"Get lazy with lazygit"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/the-1-best-design-pattern-for-managing-forms-in-react-rt5pnixzh","name":"The #1 Best Design Pattern for Managing Forms in React"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/my-sleek-and-modern-linux-development-machine-in-2021-tb7lozio","name":"My sleek and modern Linux development machine in 2021"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/spring-boot-architecture-i0tz38i5","name":"Spring Boot Architecture"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/bulletproof-react-is-a-hidden-treasure-of-react-best-practices--guufkovyy","name":"\"bulletproof-react\" is a hidden treasure of React best practices!"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/next-js-portfolio-template-gh-a-yvri","name":"Next.js Portfolio Template"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/typescript-generics-for-react-developers-c0byd6cdp","name":"Typescript generics for React developers"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/modern-angular-xb1mry87z","name":"Modern Angular"}]},{"@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":"November 2021"}]}]} ```