--- title: Best DevDojo posts — December 2021 | daily.dev description: The most upvoted DevDojo posts from December 2021, curated by the daily.dev community. canonical: https://daily.dev/sources/devdojo/best-of/2021/12 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/devdojo/best-of/2021/12 og:type: website og:site_name: daily.dev og:title: Best DevDojo posts — December 2021 | daily.dev og:description: The most upvoted DevDojo 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 DevDojo — December 2021 1. 1 [](https://daily.dev/posts/using-notion-to-organise-programming-topics-gbpup2kr6 "Using Notion to organise programming topics") Article DevDojo · 5y Using Notion to organise programming topics When it comes to software development, having a commonplace book is one of the best things we can do to keep track of things, and to help not forget concepts. Notion is my preferred tool to implement a commonplace books for code related knowledge. I divide my notes into the following parts:Core topics,Study and practice,App and business ideas, andSimplification. The note will be highlighted, and when I am looking for what I'm looking for I would be able to open it and see. 132 8 2. 2 [](https://daily.dev/posts/15-awesome-css-animation-libraries-you-need-to-know--aqjx7hwz5 "15 awesome CSS animation libraries you need to know.") Article DevDojo · 5y 15 awesome CSS animation libraries you need to know. CSS animations provide three major advantages over traditional script-driven animation techniques. They're simple to use for simple animations; you don't even need to know JavaScript to make them. Even with moderate system load, the animations work well. Transitions from one CSS style configuration to another can be animated using CSS animations. 70 4 3. 3 [](https://daily.dev/posts/flowbite---tailwind-css-components-lm7anjegr "Flowbite - Tailwind CSS components") Article DevDojo · 5y Flowbite - Tailwind CSS components Flowbite is an open source component library built with Tailwind CSS. It features commonly used elements such as buttons, modals, dropdowns, and even plugins, such as datepickers. It is supposed to help you build websites faster by having a set of web components to work with. 44 3 4. 4 [](https://daily.dev/posts/nextjs-typescript-and-tailwind-a-match-made-in-heaven-a5sat20dp "NextJS+Typescript and Tailwind: A match made in heaven") Article DevDojo · 5y NextJS+Typescript and Tailwind: A match made in heaven Next.js is a React framework with features like hybrid static and server rendering, TypeScript support, smart bundling, route pre-fetching, and more. Tailwind CSS is a utility-first CSS framework that is being used to create markup-based designs. In this tutorial, we'll learn how to build up Next.js with TypeScript and TailwindCSS. 43 2 5. 5 [](https://daily.dev/posts/how-to-become-a-web-developer-in-2022-with-coach-gandalf-wwddrzqxr "How to become a web developer in 2022, with coach Gandalf") Article DevDojo · 5y How to become a web developer in 2022, with coach Gandalf In this blog post, I'll be discussing why you shouldn't trust on new year's resolutions, how overrated motivation is, and tools to help you succeed in the path of learning web development. I will ask coach Gandalf for his opinions on different topics and he will pour his wisdom and bluntness over us during the whole post. 22 5 6. 6 [](https://daily.dev/posts/5-design-tips-every-web-dev-should-follow-yrqjdcaih "5 design tips every web dev should follow") Article DevDojo · 5y 5 design tips every web dev should follow The most important part of building a brand and website is keeping your target audience in mind. All design choices need to answer how you can best serve them and create a positive, memorable and unique experience for them. Don't use a CSS framework. Use language and imagery that will appeal to them and reflect values they can relate to. 16 7. 7 [](https://daily.dev/posts/tailwindcss-v3-released-a-look-at-the-new-features--mkuw8892s "TailwindCSS v3 released! A look at the new features 🎨") Article DevDojo · 5y TailwindCSS v3 released! A look at the new features 🎨 Tailwind CSS v3.0 just got released and they have added a lot of cool features, so let's have a look at them. JIT is now inbuilt so it is way faster now and enables some cool new features like stackable variants, arbitrary value support. There are many new colors now and they are 22 in total! 15 8 8. 8 [](https://daily.dev/posts/next-seo-a-better-way-to-manage-seo-for-next-js--tmxsuiflh "Next SEO: A better way to Manage SEO for Next.js 🔍") Article DevDojo · 5y Next SEO: A better way to Manage SEO for Next.js 🔍 The Next.js head tags are a good way to add the meta tags, title, description, open graph image, etc. We are going to see how to simplify this process using a package called next seo. The package is an external library so we need to install it. 12 2 9. 9 [](https://daily.dev/posts/html-tips-tricks-1-2-yyjusq5ah "HTML Tips & Tricks 1/2") Article DevDojo · 5y HTML Tips & Tricks 1/2 Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. Native autocomplete is a list of pre-defined options for an element. Clear forms with a native button will use forms to send data and alert user that the transfer was successful. 12 3 10. 10 [](https://daily.dev/posts/the-ultimate-html-css-cheatsheet-86kc-kvui "The Ultimate HTML & CSS Cheatsheet") Article DevDojo · 5y The Ultimate HTML & CSS Cheatsheet There are six headings available in HTML, H1 is the largest among all, and H6 is the smallest. There are several container tags in HTML. You can do certain things like creating italic, bold, strong text to make your document look more attractive and understandable. 12 11. 11 [](https://daily.dev/posts/free-resources-for-blogging-as-a-developer-qdks07-t "Free resources for blogging as a developer") Article DevDojo · 5y Free resources for blogging as a developer UnDraw is the ultimate tailwindcss page creator with more than 200,000 free vector images. Oh My Zsh is a delightful, open-source, community-driven framework for managing your Zsh configuration. Dev.to is an online community for sharing and discovering great ideas, having debate and making friends. 11 3 12. 12 [](https://daily.dev/posts/which-css-framework-should-you-use--em2uavovf "Which CSS framework should you use?") Article DevDojo · 5y Which CSS framework should you use? A CSS framework is a software framework designed to make HTML/CSS web design easier and more standards-compliant. Many prominent CSS frameworks are design-oriented, with parts that may be reused in the building of any website or app. Bootstrap is the most widely used free and open source CSS framework. 11 2 13. 13 [](https://daily.dev/posts/shallow-copy-and-deep-copy-in-js--aisvkfx5 "Shallow Copy and Deep Copy in JS") Article DevDojo · 5y Shallow Copy and Deep Copy in JS Shallow Copy means creating new references to the primitive values inside the object, copying them. A shallow copy refers to the fact that only one level is copied, and that will work fine for an array or object containing only primitive values. For objects and arrays containing other objects or arrays, copying these objects requires a deep copy. Changes made to be nested references will change the data nested in the original object or array. 10 1 14. 14 [](https://daily.dev/posts/5-web-design-trends-you-need-to-know-before-2022-een3ywgws "5 web design trends you need to know before 2022") Article DevDojo · 5y 5 web design trends you need to know before 2022 Web design trends will never go away. Every year, new trends in these areas emerge. As a web designer, keeping up with the latest trends can enable you to make minor changes to maintain your site current. Today, we're looking at the top 2022 trends and inspirations. 10 [See all DevDojo archives](/sources/devdojo/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/devdojo/best-of/2021/12#page","url":"https://daily.dev/sources/devdojo/best-of/2021/12","name":"Best DevDojo Posts — December 2021","description":"The most upvoted DevDojo posts from December 2021, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/devdojo/best-of/2021/12#items","numberOfItems":14,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/using-notion-to-organise-programming-topics-gbpup2kr6","name":"Using Notion to organise programming topics"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/15-awesome-css-animation-libraries-you-need-to-know--aqjx7hwz5","name":"15 awesome CSS animation libraries you need to know."},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/flowbite---tailwind-css-components-lm7anjegr","name":"Flowbite - Tailwind CSS components"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/nextjs-typescript-and-tailwind-a-match-made-in-heaven-a5sat20dp","name":"NextJS+Typescript and Tailwind: A match made in heaven"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/how-to-become-a-web-developer-in-2022-with-coach-gandalf-wwddrzqxr","name":"How to become a web developer in 2022, with coach Gandalf"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/5-design-tips-every-web-dev-should-follow-yrqjdcaih","name":"5 design tips every web dev should follow"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/tailwindcss-v3-released-a-look-at-the-new-features--mkuw8892s","name":"TailwindCSS v3 released! A look at the new features 🎨"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/next-seo-a-better-way-to-manage-seo-for-next-js--tmxsuiflh","name":"Next SEO: A better way to Manage SEO for Next.js 🔍"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/html-tips-tricks-1-2-yyjusq5ah","name":"HTML Tips & Tricks 1/2"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/the-ultimate-html-css-cheatsheet-86kc-kvui","name":"The Ultimate HTML & CSS Cheatsheet"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/free-resources-for-blogging-as-a-developer-qdks07-t","name":"Free resources for blogging as a developer"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/which-css-framework-should-you-use--em2uavovf","name":"Which CSS framework should you use?"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/shallow-copy-and-deep-copy-in-js--aisvkfx5","name":"Shallow Copy and Deep Copy in JS"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/5-web-design-trends-you-need-to-know-before-2022-een3ywgws","name":"5 web design trends you need to know before 2022"}]},{"@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":"DevDojo","item":"https://daily.dev/sources/devdojo"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/devdojo/best-of"},{"@type":"ListItem","position":5,"name":"December 2021"}]}]} ```