--- title: Best gitconnected posts — April 2022 | daily.dev description: The most upvoted gitconnected posts from April 2022, curated by the daily.dev community. canonical: https://daily.dev/sources/gc/best-of/2022/04 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/gc/best-of/2022/04 og:type: website og:site_name: daily.dev og:title: Best gitconnected posts — April 2022 | daily.dev og:description: The most upvoted gitconnected posts from April 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 gitconnected — April 2022 1. 1 [](https://daily.dev/posts/8-free-cheat-sheets-that-every-developer-should-bookmark-1pcevrpap "8 Free Cheat Sheets That Every Developer Should Bookmark") Article gitconnected · 4y 8 Free Cheat Sheets That Every Developer Should Bookmark The CSS Reference is one of the best references for CSS that is available for free. It features the most popular properties and explains them with illustrated and animated examples. The JS CheatSheet has been one of. the simplest yet most detailed cheat sheets for JavaScript that I have. come across. 61 1 2. 2 [](https://daily.dev/posts/3-web-observers-every-web-developer-should-know-utozkbmwo "3 Web Observers Every Web Developer Should Know") Article gitconnected · 4y 3 Web Observers Every Web Developer Should Know The MutationObserver interface can monitor changes in the DOM tree and is part of the DOM3 event specification. ResizeObserver reports changes to the dimensions of an Element’s content or border-box, or the bounding box of an SVGElement. PerformanceObserver and ReportingObserver are used to monitor performance measurement events. 42 3. 3 [](https://daily.dev/posts/learn-javascript-eventlistener-while-traveling-in-the-desert-vbaf-lipx "Learn Javascript EventListener while traveling in the desert") Article gitconnected · 4y Learn Javascript EventListener while traveling in the desert Javascript is a versatile language and can be used in many different environments. The most common environment is the browser but it can also be used on servers, mobile, and many others. When you are using Javascript in a browser you have access to a special set of methods. These methods provide, for example, methods to manipulate the DOM or its events. 30 3 4. 4 [](https://daily.dev/posts/understanding-blockchain-and-smart-contracts-8mrekpjox "Understanding Blockchain and Smart Contracts") Article gitconnected · 4y Understanding Blockchain and Smart Contracts In this blog post, I discuss the design of a distributed cache. Given the enormous interest in Web3 technologies, I wanted to take a deep dive into understanding the applications of blockchain, how they are built, and what system design principles underpin them. Some terms such as Merkle Trees, Proof-Of-Stake, and Proof-of-Work systems will require separate blog posts. 30 1 5. 5 [](https://daily.dev/posts/chakra-ui-crash-course-gzevm0oum "Chakra-UI Crash Course") Article gitconnected · 4y Chakra-UI Crash Course Chakra-UI is a React UI library that has tons of pre-styled components and utilities. With style props, you can use almost any CSS property as props. You can change the color mode using the useColorMode hook. To learn more please watch the video tutorial. 25 1 6. 6 [](https://daily.dev/posts/i-cloned-youtube-with-tailwind-css-in-3-days-and-you-will-learn-it-in-3-minutes--4bt8pjg9f "I cloned Youtube with Tailwind CSS in 3 days and you will learn it in 3 minutes !") Article gitconnected · 4y I cloned Youtube with Tailwind CSS in 3 days and you will learn it in 3 minutes ! I cloned Youtube with Tailwind CSS in 3 days and you will learn it in 3 minutes. Combining Tailwind with Nuxt 3, I was able to achieve the ridiculous speed of web development I have ever seen in my life. I used 3 techniques to significantly boost the speed at this step: Copy prebuilt icons from Youtube TailwindCSS color picker CSS. Polish Detail. 18 1 7. 7 [](https://daily.dev/posts/how-i-manage-my-scss-properties-uqtzzqygi "How I manage my SCSS properties") Article gitconnected · 4y How I manage my SCSS properties In SCSS, we can define variables and mixins that can be used anywhere in the project, including @media queries. I store them in an SCSS folder, separated into files whose variables serve different purposes. For example, mixins, breakpoints, and colors are stored in the \_colors.scss folder. 15 1 8. 8 [](https://daily.dev/posts/react-context-sync-vs-async-rc0ajtusd "React Context: Sync vs Async") Article gitconnected · 4y React Context: Sync vs Async The context has a user (or undefined), a sign in function that sets the default user, and, and a sign out function that removes the user. When the functions that sign the user in and out are synchronous, there are no issues, and everything works as expected. But Firebase has to make a network request, and it is not certain how long the operation will take, and if it finished at all. 14 1 9. 9 [](https://daily.dev/posts/from-zero-experience-to-a-junior-developer-in-a-few-months-uzojiqrwb "From Zero Experience to a Junior Developer in a Few Months") Article gitconnected · 4y From Zero Experience to a Junior Developer in a Few Months Aspiring software engineers fear they don’t have the experience and knowledge employers expect to see in job candidates. Getting the required skills for a Junior Developer role isn't that hard. Here is a simple strategy to build the skills to compete in the software development job market in 6–9 months. 13 10. 10 [](https://daily.dev/posts/5-ways-to-keep-your-code-clean-and-efficient-as-a-developer-r3zk3xvbf "5 Ways to Keep Your Code Clean and Efficient as a Developer") Article gitconnected · 4y 5 Ways to Keep Your Code Clean and Efficient as a Developer As a developer, it is important to keep your code clean and organized. This will help make your code more efficient and easier to understand. Comments are a great way to add clarity to your code. Indentation helps to make yourcode more readable and easier-to-understand. 13 1 11. 11 [](https://daily.dev/posts/it-s-time-to-say-goodbye-to-bootstrap-xlbdbclhu "It’s time to say goodbye to Bootstrap") Article gitconnected · 4y It’s time to say goodbye to Bootstrap 11 4 12. 12 [](https://daily.dev/posts/goodbye-html-hello-canvas--nylpm3g-b "Goodbye HTML. Hello Canvas!") Article gitconnected · 4y Goodbye HTML. Hello Canvas! Part 7: Mosaic Generator & Releasing The Library You can read the previous article here. This is the link to play the demo (NOT for smartphone) The library is a bit different from what was described before. While I don’t make a proper documentation, you can inspect the source files. 11 4 13. 13 [](https://daily.dev/posts/getting-creative-with-the-css-background-property-l8ba0cblp "Getting creative with the CSS background property") Article gitconnected · 4y Getting creative with the CSS background property Using the background property, we can create dynamic and customizable backgrounds. The background property is essentially a combination of the following properties:background-image, background-size,background-position and background-color. This article shows how to use the background to create a vignette effect. 11 14. 14 [](https://daily.dev/posts/how-to-publish-a-single-page-application-at-no-cost-with-github-pages-react-svelte-etc--2prqqjujf "How to publish a single page application at no cost with GitHub Pages (React, Svelte, etc)") Article gitconnected · 4y How to publish a single page application at no cost with GitHub Pages (React, Svelte, etc) With GitHub Pages, you can create a website and publish it at no cost. This is suitable to show off a project you’ve been working on, your portfolio (for your personal website), or your organisation/company. How to deploy a single page application to GitHub Pages is pretty simple. 11 15. 15 [](https://daily.dev/posts/classes-in-c-using-unity-ygpgx9uem "Classes in C# using Unity") Article gitconnected · 4y Classes in C# using Unity A class is basically a script, and if you are familiar with Mono Behavior in Unity, then you are already familiar with class inheritance. Attaching a script to a game object for functionality like movement, UI, shooting, etc., is possible because the attached script is inheriting mono behavior, from Unity. A custom class is a developer-defined class, which is can be used for creating modularity, and storing relevant information. 11 1 [See all gitconnected archives](/sources/gc/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/gc/best-of/2022/04#page","url":"https://daily.dev/sources/gc/best-of/2022/04","name":"Best gitconnected Posts — April 2022","description":"The most upvoted gitconnected posts from April 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/gc/best-of/2022/04#items","numberOfItems":15,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/8-free-cheat-sheets-that-every-developer-should-bookmark-1pcevrpap","name":"8 Free Cheat Sheets That Every Developer Should Bookmark"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/3-web-observers-every-web-developer-should-know-utozkbmwo","name":"3 Web Observers Every Web Developer Should Know"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/learn-javascript-eventlistener-while-traveling-in-the-desert-vbaf-lipx","name":"Learn Javascript EventListener while traveling in the desert"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/understanding-blockchain-and-smart-contracts-8mrekpjox","name":"Understanding Blockchain and Smart Contracts"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/chakra-ui-crash-course-gzevm0oum","name":"Chakra-UI Crash Course"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/i-cloned-youtube-with-tailwind-css-in-3-days-and-you-will-learn-it-in-3-minutes--4bt8pjg9f","name":"I cloned Youtube with Tailwind CSS in 3 days and you will learn it in 3 minutes !"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/how-i-manage-my-scss-properties-uqtzzqygi","name":"How I manage my SCSS properties"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/react-context-sync-vs-async-rc0ajtusd","name":"React Context: Sync vs Async"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/from-zero-experience-to-a-junior-developer-in-a-few-months-uzojiqrwb","name":"From Zero Experience to a Junior Developer in a Few Months"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/5-ways-to-keep-your-code-clean-and-efficient-as-a-developer-r3zk3xvbf","name":"5 Ways to Keep Your Code Clean and Efficient as a Developer"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/it-s-time-to-say-goodbye-to-bootstrap-xlbdbclhu","name":"It’s time to say goodbye to Bootstrap"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/goodbye-html-hello-canvas--nylpm3g-b","name":"Goodbye HTML. Hello Canvas!"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/getting-creative-with-the-css-background-property-l8ba0cblp","name":"Getting creative with the CSS background property"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/how-to-publish-a-single-page-application-at-no-cost-with-github-pages-react-svelte-etc--2prqqjujf","name":"How to publish a single page application at no cost with GitHub Pages (React, Svelte, etc)"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/classes-in-c-using-unity-ygpgx9uem","name":"Classes in C# using Unity"}]},{"@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":"gitconnected","item":"https://daily.dev/sources/gc"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/gc/best-of"},{"@type":"ListItem","position":5,"name":"April 2022"}]}]} ```