--- title: Best DEV posts — December 2021 | daily.dev description: The most upvoted DEV posts from December 2021, curated by the daily.dev community. canonical: https://daily.dev/sources/devto/best-of/2021/12 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/devto/best-of/2021/12 og:type: website og:site_name: daily.dev og:title: Best DEV posts — December 2021 | daily.dev og:description: The most upvoted DEV posts from December 2021, 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 — December 2021 1. 1 [](https://daily.dev/posts/if-else-in-css-iozc-msr2 "if/else in CSS") Article DEV·5y if/else in CSS There are no conditional statements in CSS, but this may soon change with new @when and @else operator. Currently, the only way to perform a conditional statement was to use media queries. The new proposal looks much cleaner and very similar to many programming languages. It's not supported by any browser at this moment, it's not even listed on caniuse.com . 117 4 2. 2 [](https://daily.dev/posts/best-vs-code-extensions-for-web-development-e6xvg9f4f "Best VS code Extensions for Web Development") Article DEV·5y Best VS code Extensions for Web Development VSCode Extension helps you to boost your Productivity in Web Development. This post is for everyone including beginners including frontend and backend developers. We will show you how to use VSCode to improve your productivity on the front end and backend of your website. 109 6 3. 3 [](https://daily.dev/posts/typescript---beyond-the-basics-lc-bemcak "Typescript - beyond the basics") Article DEV·5y Typescript - beyond the basics Typescript is awesome, but i have seen many repositories which dont really use, but abuse typescript. I hope that you can leverage the knowledge from this blog post to refactor some of your existing code and:catch some bugs at build time.benefit from better intellisense.and write lesser types by using type inference. 57 4 4. 4 [](https://daily.dev/posts/why-i-no-longer-use-graphql-for-new-projects-2vhpgnlfw "Why I no longer use GraphQL for new projects") Article DEV·5y Why I no longer use GraphQL for new projects GraphQL provides a lot of flexibility on the client side but this means that we cannot optimize as aggressively on the server. Traditional REST API is familiar to many engineers. It's one extra thing someone has to learn before they can be productive. There is an argument that we should just start off with GraphQL if that's ultimately where we want to get to. 55 7 5. 5 [](https://daily.dev/posts/7-awesome-ways-to-screenshot-your-code-nlesh6dp2 "7 Awesome Ways to Screenshot Your Code") Article DEV·5y 7 Awesome Ways to Screenshot Your Code There will probably be a need to capture a screen of code, whether it is yours or someone else's. For example, you may use that for reference in an article, to ask for help on a forum, to display your skills on Twitter, or to save valuable information for later use. I found seven awesome ways to take screenshots of your code. 54 2 6. 6 [](https://daily.dev/posts/my-roadmap-in-web-3-wp5hxcxig "My roadmap in web 3") Article DEV·5y My roadmap in web 3 A Web 3.0 from september 24, of 2021\. I got curious about the term from the hype on twitter but it was more hype than truly helpful information. I decided to investigate and learn about blockchain, crypto, smart contracts and decentralized apps (dapps) The following lists express the order of my learning process. 53 7. 7 [](https://daily.dev/posts/react-hooks-zero-to-hero-qapr2j9l "React Hooks : Zero to Hero") Article DEV·5y React Hooks : Zero to Hero React hooks are like Anchor ( same as what ships drop in the ocean to attach the ship and ocean floor) between React state (ocean floor) and life-cycle features ( ship ) Only work with function based components, not with class based components. Can't nest hooks inside loops, conditions or nested functions. 53 1 8. 8 [](https://daily.dev/posts/kickass-vs-code-extensions-to-make-your-life-easy-0engm9cqn "Kickass VS Code Extensions To Make Your Life Easy") Article DEV·5y Kickass VS Code Extensions To Make Your Life Easy These extensions can drastically improve your workflow and make your IDE more attractive. Here is a list of some of the extensions that could be useful for primarily front-end developers who want to get the most out of their VS Code. Live Server: A live reload feature reflected on a local server with whatever it is you’re coding. 44 1 9. 9 [](https://daily.dev/posts/using-notion-to-organise-programming-topics-5oncr38hg "Using Notion to organise programming topics") Article DEV·5y Using Notion to organise programming topics Commonplace books (or commonplaces) are a way to compile knowledge, usually by writing information into books. Commonplaces are used by readers, writers, students, and scholars as an aid for remembering useful concepts or facts. Notion is my preferred tool to implement a commonplace book for code related knowledge. 39 1 10. 10 [](https://daily.dev/posts/react-admin-dashboard-with-recharts-sqfuv6qtr "React Admin Dashboard with Recharts") Article DEV·5y React Admin Dashboard with Recharts 37 1 11. 11 [](https://daily.dev/posts/react-practices-for-beginners-n1llfpten "React practices for Beginners") Article DEV·5y React practices for Beginners React is arguably one of the most used Frameworks out there today. Everyday people are opting this framework for its UI first approach. It's safe to say that the React Library has matured over the years and the whole ecosystem is still growing. Here are some practices that you can opt and avoid while getting comfortable in the React bubble. 36 1 12. 12 [](https://daily.dev/posts/css-hamburger-menu-icons-o77l-7-1e "CSS Hamburger Menu Icons") Article DEV·5y CSS Hamburger Menu Icons I created some hamburger menu icon animations using CSS. Since there are a few designs, I created a collection in this codepen collection. A few pens from the collected is linked below. Take a look, I just used CSS, to mimic the use of checkbox effect I used JavaScript. 32 2 13. 13 [](https://daily.dev/posts/how-i-received-4-salary-raises-in-2-years-as-a-software-engineer-19bxpxvss "How I received 4 salary raises in 2 years as a Software Engineer") Article DEV·5y How I received 4 salary raises in 2 years as a Software Engineer In this essay, I'll talk about skills, experiences, opportunities, and mindset. Basically how I became better at my own craft. My focus was always on the journey and I didn't intend to grow at the company. My experience may not help you "climb" the Career Ladder. But I hope you can steal some ideas and use them in your favor. 31 1 14. 14 [](https://daily.dev/posts/react-memo-is-your-friend-vmvciehcv "React.memo() is your friend") Article DEV·5y React.memo() is your friend React.memo() gives us the ability to memoize a React component. Memoization is a general concept which basically means caching the results of some kind of computation for later use. It is an optimization technique which is used quite extensively in the programming world. When memoization is used, there must be a criteria which would dicate when the cached results are no longer valid. 31 2 15. 15 [](https://daily.dev/posts/taiga-ui-a-year-in-open-source-v8bmjmizk "Taiga UI: A year in Open Source") Article DEV·5y Taiga UI: A year in Open Source Taiga UI is a huge Angular components library. We at Tinkoff were developing it closed-source for a couple of years before finally going public with a second major version. It’s been a year since our open source release and today I want to look back at this part of our journey. 26 16. 16 [](https://daily.dev/posts/agrippa-1-3-is-out--fogxnvqmy "Agrippa 1.3 is out 🎉🎉🎉") Article DEV·5y Agrippa 1.3 is out 🎉🎉🎉 The third minor version of Agrippa, the React component CLI, is finally out! Since v1.2.0 came out, we've grown by 120% (154 stars) over the course of just over 40 days. The new version was in the works for longer than the previous two; integration tests were a challenge to implement. 24 1 17. 17 [](https://daily.dev/posts/why-i-no-longer-use-the-mit-license-for-new-projects-qfh4563ya "Why I no longer use the MIT license for new projects") Article DEV·5y Why I no longer use the MIT license for new projects There is a fundamental difference between permissive licenses and copyleft licenses alone. All open source licenses have its place and use cases. You should choose licenses based on what you want to accomplish. You shouldn't be worried if someone makes a commercial product or copy the entire thing if you use a permissive license for your project. 23 1 18. 18 [](https://daily.dev/posts/how-i-built-4-blogs-in-15-minutes-262k7zzls "How I built 4 blogs in 15 minutes") Article DEV·5y How I built 4 blogs in 15 minutes Static Site Generators (SSGs) are a quick and easy way to get a simple blog up and running in just a few minutes. Next.js is a JavaScript framework built on top of React, a JavaScript library for building user interfaces. Gatsby is another React-based SSG which also integrates GraphQL and Netlify as a CMS. Hugo is different from the previous two SSGs in that it's not React- based, but written in Go. 22 19. 19 [](https://daily.dev/posts/box-shadow-vs-drop-shadow-in-css--vjveg9l "Box shadow vs. drop shadow in CSS") Article DEV·5y Box shadow vs. drop shadow in CSS We can use box-shadow to add shadows to our HTML elements. But did you know that we can achieve the same using drop-shadow filter. You simply have to pass the shadow value in the drop- shadow function. If we were to add box-Shadow on a PNG image you will see the shape of box- shadow is rectangular/box. 21 3 20. 20 [](https://daily.dev/posts/number-formatting-in-javascript-redj7mskv "Number formatting in JavaScript") Article DEV·5y Number formatting in JavaScript The toLocaleString() method converts a number into a string, using locale format. By default, it uses locale from web browser language but you can specify it manually. Format numbers, currencies, and units without any 3rd party localization library. It allows you to format numbers into any popular units with proper formatting for locale. 21 2 21. 21 [](https://daily.dev/posts/my-secret-trick-for-writing-great-react-components-55zwktvhw "My secret trick for writing great React components") Article DEV·5y My secret trick for writing great React components Every React component should serve only one purpose. If it ends up growing, it should be decomposed into smaller subcomponents. I do not write a single test for my React components. I just create a pure function with all the logic, save it in a file and just use it in my components. 20 2 22. 22 [](https://daily.dev/posts/one-page-crm-admin-dashboard-using-html5-css3-and-javascript-soz3h-wbv "One-page CRM Admin Dashboard using HTML5, CSS3 and JavaScript") Article DEV·5y One-page CRM Admin Dashboard using HTML5, CSS3 and JavaScript Carrotsuite-admin-ui is a CRM admin dashboard built with pure HTML5, CSS3 and JavaScript. The complete code is online and it is entirely free both for private and commercial use. The admin dashboard has, among others, the following features:Clean and responsive design.Subtle animations with pure CSS3. 19 1 23. 23 [](https://daily.dev/posts/mistakes-to-avoid-as-a-backend-developer-jvzaxqdhx "Mistakes to Avoid As a Backend Developer") Article DEV·5y Mistakes to Avoid As a Backend Developer A backend engineer is an individual who deals with the server-side, database, and configurations. This developer must have good knowledge of data structure and algorithms to implement the data in the right way. If you are a backend developer, there are things you need to do to ensure your software responds as fast as possible. 19 24. 24 [](https://daily.dev/posts/why-turborepo-will-be-the-first-big-trend-of-2022-jvo1fiaml "Why TurboRepo Will Be The First Big Trend of 2022") Article DEV·5y Why TurboRepo Will Be The First Big Trend of 2022 TurboRepo was acquired by Vercel recently and I caught up on Jared Palmer's excellent intro demo to see what the fuss is all about. Here are quick notes for those too busy to view the whole thing, followed by personal reflections at the end. In 1976, Stuart Feldman made Make, the build system that secretly runs \~all open source tools. @Vercel snapped it up last month. 18 25. 25 [](https://daily.dev/posts/four-tricky-javascript-concepts-in-one-line-of-code-oef8pt2op "Four tricky JavaScript concepts in one line of code") Article DEV·5y Four tricky JavaScript concepts in one line of code A colleague asked me to explain a line of code he found on Stack Overflow. It was a good example of four mid to advanced concepts in JavaScript. Here are four ways to use these concepts in your code. The code in question is this line:const result = (({ a, c }) => ({ a , c }))({ a : 1, b : 2, c : 3 , d : 4 }); 18 1 [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/12#page","url":"https://daily.dev/sources/devto/best-of/2021/12","name":"Best DEV Posts — December 2021","description":"The most upvoted DEV posts from December 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/12#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/if-else-in-css-iozc-msr2","name":"if/else in CSS"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/best-vs-code-extensions-for-web-development-e6xvg9f4f","name":"Best VS code Extensions for Web Development"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/typescript---beyond-the-basics-lc-bemcak","name":"Typescript - beyond the basics"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/why-i-no-longer-use-graphql-for-new-projects-2vhpgnlfw","name":"Why I no longer use GraphQL for new projects"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/7-awesome-ways-to-screenshot-your-code-nlesh6dp2","name":"7 Awesome Ways to Screenshot Your Code"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/my-roadmap-in-web-3-wp5hxcxig","name":"My roadmap in web 3"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/react-hooks-zero-to-hero-qapr2j9l","name":"React Hooks : Zero to Hero"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/kickass-vs-code-extensions-to-make-your-life-easy-0engm9cqn","name":"Kickass VS Code Extensions To Make Your Life Easy"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/using-notion-to-organise-programming-topics-5oncr38hg","name":"Using Notion to organise programming topics"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/react-admin-dashboard-with-recharts-sqfuv6qtr","name":"React Admin Dashboard with Recharts"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/react-practices-for-beginners-n1llfpten","name":"React practices for Beginners"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/css-hamburger-menu-icons-o77l-7-1e","name":"CSS Hamburger Menu Icons"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/how-i-received-4-salary-raises-in-2-years-as-a-software-engineer-19bxpxvss","name":"How I received 4 salary raises in 2 years as a Software Engineer"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/react-memo-is-your-friend-vmvciehcv","name":"React.memo() is your friend"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/taiga-ui-a-year-in-open-source-v8bmjmizk","name":"Taiga UI: A year in Open Source"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/agrippa-1-3-is-out--fogxnvqmy","name":"Agrippa 1.3 is out 🎉🎉🎉"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/why-i-no-longer-use-the-mit-license-for-new-projects-qfh4563ya","name":"Why I no longer use the MIT license for new projects"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/how-i-built-4-blogs-in-15-minutes-262k7zzls","name":"How I built 4 blogs in 15 minutes"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/box-shadow-vs-drop-shadow-in-css--vjveg9l","name":"Box shadow vs. drop shadow in CSS"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/number-formatting-in-javascript-redj7mskv","name":"Number formatting in JavaScript"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/my-secret-trick-for-writing-great-react-components-55zwktvhw","name":"My secret trick for writing great React components"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/one-page-crm-admin-dashboard-using-html5-css3-and-javascript-soz3h-wbv","name":"One-page CRM Admin Dashboard using HTML5, CSS3 and JavaScript"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/mistakes-to-avoid-as-a-backend-developer-jvzaxqdhx","name":"Mistakes to Avoid As a Backend Developer"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/why-turborepo-will-be-the-first-big-trend-of-2022-jvo1fiaml","name":"Why TurboRepo Will Be The First Big Trend of 2022"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/four-tricky-javascript-concepts-in-one-line-of-code-oef8pt2op","name":"Four tricky JavaScript concepts in one line of code"}]},{"@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":"December 2021"}]}]} ```