<a href="https://www.freepik.com/free-ai-image/view-3d-young-school-student_133758575.htm" target="_blank" rel="noreferrer noopener">3d young school student (Opens in a new tab)</a> by <a href="https://freepik.com" target="_blank" rel="noreferrer noopener">Freepik (Opens in a new tab)</a>, <a href="https://www.freepik.com/free-vector/flat-abstract-wireframe-background_16133537.htm" target="_blank" rel="noreferrer noopener">Flat abstract wireframe background (Opens in a new tab)</a> by <a href="https://freepik.com" target="_blank" rel="noreferrer noopener">Freepik (Opens in a new tab)</a>, Tailwind logotype from <a href="https://tailwindcss.com/brand" target="_blank" rel="noreferrer noopener">Tailwind Official Brand page (Opens in a new tab)</a>, semi-random coding text generated with <a href="https://carbon.now.sh" target="_blank" rel="noreferrer noopener">Carbon (Opens in a new tab)</a>

Tailwind Level up

Level up your Tailwind game

Custom

Tailwind

UI/UX

<a href="https://www.freepik.com/free-psd/3d-rendering-graphic-design_31283887.htm" target="_blank" rel="noreferrer noopener">3D rendering of graphic design (Opens in a new tab)</a> by <a href="https://www.freepik.com/author/freepik" target="_blank" rel="noreferrer noopener">Freepik (Opens in a new tab)</a>, <a href="https://www.freepik.com/free-vector/geometric-circle-background-desktop-wallpaper-with-multicolors-vector_18220903.htm" target="_blank" rel="noreferrer noopener">Vector geometric background (Opens in a new tab)</a> by <a href="https://www.freepik.com/author/rawpixel-com" target="_blank" rel="noreferrer noopener">rawpixel.com (Opens in a new tab)</a> via <a href="https://freepik.com" target="_blank" rel="noreferrer noopener">Freepik (Opens in a new tab)</a>, blurred code image created with <a href="https://carbon.now.sh" target="_blank" rel="noreferrer noopener">Carbon (Opens in a new tab)</a>, Next.js logo from <a href="https://nextjs.org" target="_blank" rel="noreferrer noopener">Next.js official website (Opens in a new tab)</a>, Disqus logo from <a href="https://disqus.com/brand/" target="_blank" rel="noreferrer noopener">Disqus Brand and Logos official material (Opens in a new tab)</a>

Next.js theme switch and Disqus embed

In <a href="https://www.oh-no.ooo/articles/a-blasting-august-with-blaugust" target="_blank" rel="noreferrer noopener">my last post about the amazing Blaugust event (Opens in a new tab)</a>, I've been mentioning my issue with setting up my <a href="https://nextjs.org" target="_blank" rel="noreferrer noopener">Next.js (Opens in a new tab)</a> site combined with <a href="https://www.npmjs.com/package/next-themes" target="_blank" rel="noreferrer noopener">next-themes (Opens in a new tab)</a> and <a href="https://disqus.com/" target="_blank" rel="noreferrer noopener">Disqus (Opens in a new tab)</a> commenting platform.

This article is here to make sure I can share my solution, as for as simple it was it might help some people that stumble upon it. Let's start first with what issue I had, what I've done, so that we can walk together through the solution!

## What was the issue
After following the <a href="https://dev.to/luisca/step-by-step-guide-to-adding-dark-mode-and-multiple-themes-to-your-nextjs-app-15lh" target="_blank" rel="noreferrer noopener">Step-By-Step Guide to Adding Dark Mode and Multiple Themes to Your Next.js App (Opens in a new tab)</a> written by <a href="https://dev.to/luisca" target="_blank" rel="noreferrer noopener">Luis Cadillo (Opens in a new tab)</a> (thank you pal!), I found myself with a neat Dark mode but my Disqus embed (installed through <a href="https://www.npmjs.com/package/disqus-react" target="_blank" rel="noreferrer noopener">disqus-react npm package (Opens in a new tab)</a>) would not update its theme properly, despite its theme settings being on `Auto`.

<figure>
 <img src="//images.ctfassets.net/hzu7wkrk7tly/3UqieaGPLVgDYj3UwVSHnF/6a048c82fd500213b31979933da29d7a/buggy_disqus_theme.png?fm=avif&r=50" class="big-picture" />
 <figcaption>
 Buggy Disqus theme change at the bottom of my articles
 </figcaption>
 </figure>

I checked that the settings in `<sitename>.disqus.com/admin/settings/general/` were correct, but that didn't help.

<figure>
 <img src="https://images.ctfassets.net/hzu7wkrk7tly/6UJHYV3ekkdBDgjEnGE9yP/f02cdaa0483280661ac222555af511a1/Screenshot_2023-08-05_at_1.22.38.png?fm=avif&r=25&w=600" class="big-picture" />
 <figcaption>
 Disqus settings for automatic detection of the color scheme.
 </figcaption>
 </figure>

## The solution

My initial challenge was understanding how Disqus determined which theme to show in the page. Browsing the documentation I stumbled on a piece of useful information:

<blockquote>
Light vs. dark color scheme 
A light or dark color scheme is automatically selected based on your site's stylesheets.
 
 
How is the color scheme determined? 
<ul>
 <li>The light scheme is loaded when the text color Disqus inherits from your site has >= 50% gray contrast: between color: #000000; and color: #787878;</li>

 <li>The dark scheme is loaded in all other instances.</li>
</ul>
<div class="text-right">— <a href="https://help.disqus.com/en/articles/1717201-disqus-appearance-customizations" target="_blank" rel="noreferrer noopener">Disqus Appearance Customization (Opens in a new tab)</a></div>
</blockquote>

This allowed me to understand how the color scheme in Disqus was determined, but not yet why my changes wouldn't work. White text on a white background isn't quite the 'Auto' mode I was hoping for!

Searching for some help in <a href="https://stackoverflow.com/" target="_blank" rel="noreferrer noopener">StackOverflow (Opens in a new tab)</a>, I found my very same problem but no answer to it: <a href="https://stackoverflow.com/questions/75921829/disqus-theme-not-matching-background-when-changing-blog-theme-from-dark-to-light" target="_blank" rel="noreferrer noopener">Disqus theme not matching background when changing blog theme from dark to light (Opens in a new tab)</a>. Despite not finding a solution, I found some comfort in seeing that other peeps had my same problem and that it wasn't just me being... well... dumb xD

A little bit more digging and googling around brought me to another StackOverflow post, <a href="https://stackoverflow.com/questions/75787047/disqus-comments-dark-mode-renders-with-white-background?rq=2" target="_blank" rel="noreferrer noopener">Disqus comments Dark mode renders with white background (Opens in a new tab)</a> where <a href="https://stackoverflow.com/users/10312920/ken-mueller" target="_blank" rel="noreferrer noopener">Ken Mueller (Opens in a new tab)</a> mentions to "Remove the &lt;meta name="color-scheme" content="dark" /&gt; from your document.".

Now, I didn't have such a thing in my Next.js ecosystem, but I noticed that next-themes applied a `style="color-scheme: dark;"` to my main HTML tag.

```html
<html lang="en" class="dark" style="color-scheme: dark;">
```

<figure>
 <img src="https://images.ctfassets.net/hzu7wkrk7tly/7gl5NhSwwFZc4LgivqyAsN/7a8d2bb8d723d383321339d100e41862/Screenshot_2023-08-05_at_12.43.25.png?fm=avif&r=25&w=600" />
 <figcaption>
 My Chrome inspector showing that the HTML tag in my website had this extra <code>style="color-scheme: dark;"</code> property.
 </figcaption>
</figure>

Since messing around with the inspector costs nothing, I've simply tried to remove the content of `style` and don't you know... it worked!

Checking <a href="https://www.npmjs.com/package/next-themes" target="_blank" rel="noreferrer noopener">next-themes documentation (Opens in a new tab)</a>, reading the codebase and bashing my head a little, I seem to understand that this HTML style change comes from the `enableColorScheme` setting of next-themes, which by default is set as `true`, but for my case would need to be set `false`.

```typescript
const MyApp = ({ Component, pageProps }: AppProps) => {
 return (
 <>
 <ThemeProvider attribute="class" enableColorScheme={false}>
 <Provider store={store}>
 <Component {...pageProps} />
 </Provider>
 </ThemeProvider>
 </>
 );
};

export default MyApp;
```

Wohoo! Works like a charm!

But no, wait!

Now if I am in an article page and I want to switch the theme there, my `<DiscussionEmbed>` component from <a href="https://www.npmjs.com/package/disqus-react" target="_blank" rel="noreferrer noopener">disqus-react (Opens in a new tab)</a> won't update automatically! So what do we do now?

I happen to have this component wrapped in a container for easier setup on my page, and I know that React would re-render a component should its key change... so 1 + 1 I had my 2:

```typescript
const DisqusComments: FC<DisqusCommentsProps> = ({ url, slug, title }) => {
 // Import the name of the theme with useTheme() hook
 // from next-themes
 const { theme } = useTheme(); 

 const disqusConfig = {
 url: url,
 identifier: slug,
 title: title,
 };

 // Use it as a key={theme} for the DiscussionEmbed component
 // so that it will re-render should the theme change
 return (
 <div className="my-14">
 <DiscussionEmbed key={theme} shortname={"oh-no"} config={disqusConfig} />
 </div>
 );
};

export default DisqusComments;
```

Basically, I'll use the name of the theme to determine whether the Disqus component should re-render, and should someone change the theme in an article page, __the Disqus comment section will reload with the correct theme__!

At last, all I wanted!

<figure>
 <img src="//images.ctfassets.net/hzu7wkrk7tly/37HN4qOVbiyzNuHZEKBPaa/490dbc65f7935bb6555b17fe6a4bcabd/Disqus_comment_section_light_dark_theme.png?fm=avif&r=25" class="big-picture" />
 <figcaption>
 My website Disqus section adapting to both dark and light color schemes. Yay!
 </figcaption>
</figure>

Let me know if this helped you somehow, if you had the same issue or if somehow it brought you some help understanding a bit more about the problem for your own specific case!

So, you want to have both a light and dark theme in your Next.js website, but your Disqus embed doesn't seem to change its theme accordingly... Maybe this will help!

Fixing Disqus Auto theme switching when using Next.js and next-themes

React

Next.js

Disqus

Fixing Disqus 'Auto' theme switching when using Next.js + next-themes

<a href="https://www.freepik.com/free-psd/gaming-blank-banner-background_41972388.htm" target="_blank" rel="noreferrer noopener">Monitor, keyboard and mouse (Opens in a new tab)</a>, <a href="https://www.freepik.com/free-vector/realistic-3d-shapes-floating-background_13397766.htm" target="_blank" rel="noreferrer noopener">Background 3D composition (Opens in a new tab)</a> by [Freepik](https://www.freepik.com/author/freepik); Blurred <a href="https://unsplash.com/photos/rCbdp8VCYhQ" target="_blank" rel="noreferrer noopener">starry sky (Opens in a new tab)</a> by <a href="https://unsplash.com/@andyjh07" target="_blank" rel="noreferrer noopener">Andy Holmes (Opens in a new tab)</a> via <a href="https://unsplash.com/" target="_blank" rel="noreferrer noopener">Unsplash (Opens in a new tab)<a/>

Blaugust 2023

New to blogging? Veteran of long time content creation? Looking for inspiration on what to write, vlog or stream about? __Blaugust__ has something for you no matter what!

As of now, I've only written a few posts here and there (taking quite some time to rewrite them into something presentable) and I find myself struggling with some consistency in publishing the things I learn about. 

Work, sometimes, gets the best of me and well, life is there too! 😱😆 This is not my first attempt at working on my own website and try to collect a nice bunch of material to showcase when I apply to new workplaces, __but it's possibly the latest best effort that brought a lot of joy into my life and redeemed a lot of love that I have for my own profession__, which before anything has been my favourite hobby ever since I was 10. 🥰

When working on something that is only for me and not for anyone else, events like Blaugust speak to me as a great incentive into pushing myself and try to create something-anything, even when the day seems a bit too short for anything productive.

## So, what is Blaugust exactly?

Without any attempt to write it better than the creator of the event

<blockquote>
 Blaugust is a month-long event that takes place in August each year that focused on blogging and other serialized content. The goal is to stoke the fires of creativity and allow bloggers and other content creators to mingle in a shared community while pushing each other to post more regularly.
 <div class="text-right"></div>— <a href="https://aggronaut.com/2023/07/12/blaugust-2023-is-coming/" target="_blank" rel="noreferrer noopener">Blaugust 2023 is coming (Opens in a new tab)</a> by <a href="https://aggronaut.com/author/belghast/" target="_blank" rel="noreferrer noopener">Belghast (Opens in a new tab)</a>
 </blockquote>

And the beautiful sharing community is something you don't want to miss out! So far I have had such a great time on Discord chatting with a lot of people and seeing what is everyone up to. 😎

I really invite anyone even-so-remotely-interested in joining this event and <a href="https://aggronaut.com/2023/07/12/blaugust-2023-is-coming/" target="_blank" rel="noreferrer noopener">read more about Blaugust from the original post (Opens in a new tab)</a>. You even get an achievement by reading the manual, yay xD

<hr />

## Shoutout to Juhis 🎉

It's thanks to <a href="https://hamatti.org/about/" target="_blank" rel="noreferrer noopener">Juhis (Juha-Matti Santala, hamatti.org) (Opens in a new tab)</a> that I find myself in this amazing community!

Juhis has always been involved in a lot of amazing activities and this is one of the greatest ones I'm also trying to be part of! Ever since I met him in our previous common workplace, __Juhis has always been a great inspiration as a developer, community manager, event organizer, workshop host and speaker__! *When I grow up I wanna be like Juhis* (even if I'm older, technical details 😆) A lot of the things I have confidence in doing today are thanks to him, and I'm glad I can always learn from this amazing person! Thank you so much! 🌻

Oh, and don't forget to check <a href="https://hamatti.org/posts/blaugust-2023-here-we-come/" target="_blank" rel="noreferrer noopener">Juhis' article about Blaugust (Opens in a new tab)</a>!

## Get to know more about this year's participants!

One of the kindest souls in the community, <a href="https://indiecator.org/about-indiecator/" target="_blank" rel="noreferrer noopener">Magi (Opens in a new tab)</a>, recently published <a href="https://indiecator.org/2023/08/02/blaugust-2023-participant-appreciation-post/" target="_blank" rel="noreferrer noopener">an appreciation blog post about all the participants of this year's Blaugust (Opens in a new tab)</a>. Their post is incredibly heartwarming and I appreciate a lot the kind words they've addressed toward my Notion blogpost! 😍

<hr />

## The goal

While I don't believe I have it in me to create 31 posts in 31 days (and I'd already be long behind by now 😱), I'm giving myself an approachable deadline of *at least one post per week* and have four new posts in this site by the end of August. Seems reasonable and should combine pretty well with my work! I'll also figure out how many achievements I've gotten from the challenge once the month is out!

## My biggest learning so far

Although the event just started, I've already discovered something interesting about myself!

For some reason, I've never thought about browsing posts about my favourite videogames, and amazingly enough, it was really refreshing to read more about Path of Exile instead of simply watching YouTube videos as I'd always do. I see that a lot of amazing content goes under the radar when I limit myself to only one input approach and it reminds me that there's far more than mindless Instagram scrolling that I could do to spend my time!

And it's kinda weird, I am okay both reading and watching videos about development, but for some reason I've never thought that reading about video games was also a possibility! LOL. 🤯

## So far so good!

Although I might not have written or rewritten-and-published as many articles as I was hoping to during this week, __I've managed to come up with a somewhat okay dark theme for this website__! I've felt so accomplished as it was something I had in my backlog for a long long time! ✨ __It also put me against some small challenges with Disqus embeds__, for which I'm going soon to write an article about — thinking of sharing it also on <a href="https://dev.to" target="_blank" rel="noreferrer noopener">dev.to (Opens in a new tab)</a> to contribute to its amazing community :D Yay, me!

Having a hard time finding will to work on your blogging website? Blaugust might just be that little spice of inspiration you were looking for!

A Blasting August with Blagust

Inspiration

Productivity

A Blasting August with Blaugust

<a href="https://www.freepik.com/free-vector/gradient-liquid-abstract-background_13346239.htm" target="_blank" rel="noreferrer noopener">Vector Liquid Background (Opens in a new tab)</a> by <a href="https://www.freepik.com/author/pikisuperstar" target="_blank" rel="noreferrer noopener">pikistar (Opens in a new tab)</a> via <a href="https://freepik.com" target="_blank" rel="noreferrer noopener">Freepik (Opens in a new tab)</a>, <a href="https://www.freepik.com/free-psd/3d-illustration-people-working-marketing_42937458.htm" target="_blank" rel="noreferrer noopener">People working marketing (Opens in a new tab)</a> by <a href="https://freepik.com" target="_blank" rel="noreferrer noopener">Freepik (Opens in a new tab)</a>

Learning React

One of those things that you don't know enough, and then when you know somewhat you tend to use a bit too much is React beloved and behated <a href="https://react.dev/reference/react/useMemo" target="_blank" rel="noreferrer noopener">useMemo hook (Opens in a new tab)</a>. In my quest of trying to understand more the features of React that I use on a regular basis, I find myself in need to write more about this hook, clarifying what is it, when to use it and when not.

So, let's get started and unravel this madness!

## What is useMemo?

Introduced in React 16.8, the useMemo hook is a built-in feature designed to memoize values and prevent unnecessary recalculations and re-renders, meaning that instead of calculating things on the fly, it will first check if that computation has already done and take the value already stored.

... Wait wait wait! __memoization what?!__ What's that?!

<a href="https://www.freecodecamp.org/news/author/gercocca/" target="_blank" rel="noreferrer noopener">Germán Cocca (Opens in a new tab)</a> makes a great job at explaining this concept <a href="https://www.freecodecamp.org/news/memoization-in-javascript-and-react/" target="_blank" rel="noreferrer noopener">in his article about Memoization in Javascript and React (Opens in a new tab)</a>, and I will not try to rewrite it when he's already told it better than I ever can!

<blockquote>
In programming, memoization is an optimization technique that makes applications more efficient and hence faster. It does this by storing computation results in cache, and retrieving that same information from the cache the next time it's needed instead of computing it again.
 
In simpler words, it consists of storing in cache the output of a function, and making the function check if each required computation is in the cache before computing it.
 
 <div class="text-right">— <a href="https://www.freecodecamp.org/news/author/gercocca/" target="_blank" rel="noreferrer noopener">Germán Cocca (Opens in a new tab)</a> in <a href="https://www.freecodecamp.org/news/memoization-in-javascript-and-react/" target="_blank" rel="noreferrer noopener">What is Memoization? How and When to Memoize in JavaScript and React (Opens in a new tab)</a></div>
</blockquote>

So far so good. Yes?! __Nope__.

I have heard that *useMemo should not always be used* and this explanation makes me think instead that it always sounds like a good idea, so let's continue digging up a bit more more, but let's go the long route and let's see first how to implement it.

## How to use useMemo

The basic syntax for useMemo is

```javascript
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
````

This line of code contains the function used to calculate the value and the dependency array. For example, consider a component that filters a list of items based on a search term:

```javascript
import React, { useMemo } from 'react';

const FilteredList = ({ items, searchTerm }) => {
 const filteredItems = useMemo(() => {
 return items.filter(item => item.toLowerCase().includes(searchTerm.toLowerCase()));
 }, [items, searchTerm]);

 return (
 <ul>
 {filteredItems.map(item => (
 <li key={item}>{item}</li>
 ))}
 </ul>
 );
};

```

In this example, we use useMemo to memoize the filtered list of items and avoid recalculating the filtered list every time the component renders. *Still sounds pretty good and still like I should actually be using it more than I actually do.* 🤔

Browsing various examples online, as you can see from the first snippet of code in this article, however, I find the emerging written pattern of using useMemo *only for expensive calculations*, *computed expensive value*, *expensive operations*, and I finally start understanding that there is something particularly in mind for which useMemo is recommended.

But what is an expensive calculation in JavaScript?

## Expensive calculations

Expensive calculations are __tasks that require a significant amount of processing time and resources__: they might be time-consuming, memory-intensive, or computationally complex. What seems to fit in this category is:

- __Manipulating large strings__, such as parsing and transforming text
- __Transforming large datasets through iteration__, while performing multiple calculations on the data
- __Sorting or filtering large arrays__
- __Fetching data through APIs/databases__
- __Processing and manipulating big files__
- __Rendering a top component__ with a significant number of nested components and elements
- __Recursive algorithms__, advanced statistical calculations, matrices, weird formulas etc. etc. etc.

<blockquote data-appearance="suggestion">
<a href="https://react.dev/reference/react/useMemo" target="_blank" rel="noreferrer noopener">React useHook official documentation (Opens in a new tab)</a> has a section <a href="https://react.dev/reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive" target="_blank" rel="noreferrer noopener">How to tell if a calculation is expensive? (Opens in a new tab)</a> where it teaches us to use the console by adopting <code>console.time()</code> and <code>console.timeEnd()</code> to better determine the cost of our operations.</blockquote>

Not all these operations are inherently worthy of useMemo though! There are at least a few things to consider.

### 1. How often is the operation performed?

If the operation is performed frequently or triggered by state/props changes, and the result doesn't change as often, memoizing the result can prevent redundant recalculations, therefore improving overall performance.

For example, if you have a big array of strings that needs to be formatted in a particular way, and you might want to list all of them in a nice HTML list, using useMemo might help avoiding slow renders in the UI.

### 2. How reusable is the result of useMemo?

The result is used within the component or passed down as props to child components; if the result is used multiple times, useMemo can indeed help avoid unnecessary recalculation.

Think of a large file that you want to use in different sections of your app; it's definitely worth contemplating memoizing it.

### 3. Is it worth the memory consumption?

As the memoized values are stored in memory until the component unmounts or the dependencies change, memoizing large datasets will definitely increase memory consumption; __if the fetching from caching is faster than the recomputation of the calculations, perhaps useMemo might have a valid purpose__.

If you're fetching a big list and your interface freezes, perhaps yes, it's time to think about useMemo.

<hr/>

In all of the above cases, and even more critical than for `useEffect`, __the dependencies of the memoized function need to be properly evaluated__ to make sure that useMemo recalculates the memoized value only when necessary, as performance might otherwise ironically drop.

In his article <a href="https://maxrozen.com/understanding-when-use-usememo" target="_blank" rel="noreferrer noopener">Understand when to use useMemo (Opens in a new tab)</a>, <a href="https://twitter.com/RozenMD" target="_blank" rel="noreferrer noopener">Max Rozen (Opens in a new tab)</a> puts it up in simple words:

<blockquote>
 Don't use useMemo until you notice parts of your app are frustratingly slow. Premature optimisation is the root of all evil, and throwing useMemo everywhere is premature optimisation.
 <div class="text-right">— <a href="https://twitter.com/RozenMD" target="_blank" rel="noreferrer noopener">Max Rozen (Opens in a new tab)</a> in <a href="https://maxrozen.com/understanding-when-use-usememo" target="_blank" rel="noreferrer noopener">Understand when to use useMemo (Opens in a new tab)</a></div>
</blockquote>

## "Premature optimization is the root of all evil"

<blockquote data-appearance="warning" class="text-sm">This paragraph might be a tad too long and expanding on a topic that is not quite the purpose of this article; feel free to move to the next header if you already have a grasp about premature optimization. </blockquote>

Calling premature optimization *the root of all evil* seems to be something rather common, and <a href="https://effectiviology.com/itamar-shatz/" target="_blank" rel="noreferrer noopener">Dr. Itamar Shatz (Opens in a new tab)</a> in his article about <a href="https://effectiviology.com/premature-optimization/" target="_blank" rel="noreferrer noopener">Premature Optimization: Why It’s the “Root of All Evil” and How to Avoid It (Opens in a new tab)</a> says that

<blockquote>
 Premature optimization involves trying to improve something — especially with the goal of perfecting it — when it’s too early to do so.

 <div class="text-right">— <a href="https://effectiviology.com/itamar-shatz/" target="_blank" rel="noreferrer noopener">Dr. Itamar Shatz (Opens in a new tab)</a> in <a href="https://effectiviology.com/premature-optimization/" target="_blank" rel="noreferrer noopener">Premature Optimization: Why It’s the “Root of All Evil” and How to Avoid It (Opens in a new tab)</a></div>
</blockquote>

His article also shows that the famous *Premature optimization is the root of all evil* sentence is a quote from the computer scientist <a href="https://profiles.stanford.edu/donald-knuth" target="_blank" rel="noreferrer noopener">Donald Knuth (Opens in a new tab)</a>, from his article <a href="https://dl.acm.org/doi/10.1145/356635.356640" target="_blank" rel="noreferrer noopener">Structured Programming with go to Statements (Opens in a new tab)</a>. The article is a reminder to developers not to spend too much time or resources optimizing parts of a program before they need to and especially before they have a working version.

According to Donald Knuth, premature optimization leads to wasted effort, as you might end up optimizing parts of the code that don't have a significant impact on the overall performance, or even optimizing code that eventually gets removed or significantly changed.

His recommendations are to __first build a functional system__, __then identify any performance issues__, and __finally optimize critical parts that actually need optimization__, without forgetting that readability and maintainability are often more important than minor efficiency gains, especially in early development stages.

Dr. Itamar Shatz lists out the <a href="https://effectiviology.com/premature-optimization/#Dangers_of_premature_optimization" target="_blank" rel="noreferrer noopener">dangers of premature optimization (Opens in a new tab)</a> in a few yet impactful points, which I recommend reading from his article.

<hr />

I have now some ideas on where useMemo could come at hand as well as potential dangers of premature optimization, but I still feel like the constraints for which it's recommended are still a bit unable to give a clear line. Perhaps it'd be beneficial to go the other route and analyze when _not_ to use useMemo.

## When not to use useMemo

By what we've figured out before, if an operation is relatively simple, doesn't consume much processing time, and doesn't depend on frequently changing data, __using useMemo will add unnecessary overhead without significant performance gains__.

Therefore

- if a component doesn't have any expensive calculations and doesn't render frequently
- or the expensive operation is isolated to a specific part of the component that doesn't impact the overall rendering performance
- or the expensive operation varies significantly between the instances where the component is used
- and we're trying to accommodate all sorts of devices that might not have a lot of memory available
- and the performance improvement is not noticeable by end-users

... __we might find ourselves perhaps not in need of useMemo__.

We also need to consider that adding useMemo to memoize some calculations can make writing unit tests more complicated, and while it's not a reason to avoid useMemo, it's definitely worth to weigh the benefits of memoization also against the ease of testing and maintaining the code.

## Example implementations

From all this reading and writing, I can deduct that there are plausible usages where you expect to process a lot of data, that won't change as often, such as:

```javascript
// Plausible usage of useMemo
import React, { useMemo } from 'react';

const BigProcessedList = ({ data }) => {
 const processedData = useMemo(() => {
 return data.map((item) => {
 // Simulating an expensive computation
 for (let i = 0; i < 1e6; i++) {}
 return item * 2;
 });
 }, [data]);

 return (
 <ol>
 {processedData.map((item, index) => (
 <li key={`${index}__${item}`}>{item}</li>
 ))}
 </ol>
 );
};

```

Another plausible example would be:

```javascript
// Plausible good use of useMemo
import React, { useMemo } from 'react';

const EmployeeList = ({ employees, filter }) => {
 const filteredEmployees = useMemo(() => {
 return employees.filter(emp => emp.department === filter);
 }, [employees, filter]);

 return (
 <ul>
 {filteredEmployees.map((employee) => (
 <li key={employee.id}>{employee.name}</li>
 ))}
 </ul>
 );
};
```

... And potentially, there could be so many bad/unrecommended implementations where there's no big computation needed and therefore useMemo is bringing no real benefit to the end user:

```javascript
// Unoptimal use of useMemo
import React, { useMemo } from 'react';

const CombinedStringComponent = ({ propA, propB }) => {
 const combinedProps = useMemo(() => {
 return `${propA} ${propB}`;
 }, [propA, propB]);

 return (
 <div>{combinedProps}</div>
 );
};
```

Ultimately, the trend with useMemo seems to be that as soon as people get to know more about it, they want to implement it, whereas __it'd make more sense to leave it for only when the app clearly shows benefits from implementing it__. It sounds like a pretty good news to me as it means that most likely I don't have to change anything in this website as I don't seem to see anything particularly too slow... *yay!* 😂

I've truly enjoyed writing about this and I can't help but recommend strongly to read the sources/resources attached to the article; if you feel like I've miswritten something (which can very well be the cause as my best corrections often come days after I rewrote something), don't hesitate to mention that in the comments below!

But before I leave...

## A brief note about useMemo vs. useCallback

You'll also hear this one too! And while `useCallback` is gonna be a topic for another day, let's just iron this one last thing out before we call it a day!

__useCallback__ is similar to useMemo, but __instead of memoizing the result of a function, it memoizes the actual function itself__, which is particularly useful when you have a component that receives a function as a prop and you want to prevent unnecessary re-rendering of child components that depend on that function. This means that if the dependencies of useCallback don't change, __the same function instance is used, avoiding unnecessary re-renders of child components that depend on it__.

Now out! Bye! :D

The useMemo hook is both famous and infamus at the same time. Let's figure out together when we should or should not use it :D

Performance optimization with useMemo

JavaScript

<a href="https://www.freepik.com/free-psd/concept-mobile-application-cloud-services-male-character-sits-big-cloud-sign-with-phone-3d-illustration_26314276.htm" target="_blank" rel="noreferrer noopener">Concept mobile application and cloud services character (Opens in a new tab)</a> by <a href="https://www.freepik.com" target="_blank" rel="noreferrer noopener">Freepik (Opens in a new tab)</a>, <a href="https://www.freepik.com/free-vector/realistic-white-monochrome-background_16223330.htm" target="_blank" rel="noreferrer noopener">Realistic white monochrome background (Opens in a new tab)</a> by <a href="https://www.freepik.com" target="_blank" rel="noreferrer noopener">Freepik (Opens in a new tab)</a>

Typescript

Sometimes I wonder whether I love or hate Typescript. I see the benefits of implementing it in the majority of frontend solutions, but I struggle with the syntax and the mumbo jumbo names that don't tell me anything. "Generics" would be one of those, as the name kindly suggests too, it's a name that could mean anything 🤷 When I find myself in the situation where I think I have grasped something but I haven't quite, the best solution is to try to write something about it to bring in clarity!

## So what are Generics?

Generics in TypeScript provide a way to create reusable data structures (arrays, stacks, queues, linked lists etc.), components and functions that can work with different data types.

Take for example:

```typescript
interface Dictionary<T> {
 [key: string]: T;
}
````

With generics you can create a container type that can hold different types of values based on needs, e.g.:

```typescript
const myDictionary: Dictionary<number> = {
 age: 30,
 height: 180,
};

const myOtherDictionary: Dictionary<string> = {
 name: 'John',
 city: 'New York',
};
```

This is useful when you want to create a __flexible and type-safe container__, such as a dictionary or a set. You'll be guaranteed, whether the structure will accommodate strings or numbers, that it will follow the interface `Dictionary` and expect an object with keys whose value will reflect the data you use it with (=== if you have `Dictionary<string>` the values of the keys can only be `string`, if you have `Dictionary<number>` the values of the keys can only be `number`).

Let's make another practical example; let's say you want to have a function that allows you to print whatever type of array in a particular format, like an ordered list. In this case, __the type of the data passed is not relevant to you__, you only care that it's presented in an ordered list.

```typescript
function printArray<T>(array: T[]): string {
 const items: string = array.map(item => `<li>${item}</li>`).join('');
 return `<ol>${items}</ol>`;
}
```

Now you can use this function to format the arrays before appending them to a div:

```typescript
function printArray<T>(array: T[]): string {
 const items: string = array.map(item => `<li>${item}</li>`).join('');
 return `<ol>${items}</ol>`;
}

// An example function to append HTML content to a div element
function appendToDiv(containerId: string, content: string): void {
 const container = document.getElementById(containerId);
 if (container) {
 container.innerHTML = content;
 }
}

// Our data types
const numbers: number[] = [1, 2, 3, 4, 5];
const strings: string[] = ['apple', 'banana', 'orange'];

// Our data types formatted through the printArray function
const numbersListHTML: string = printArray(numbers);
const stringsListHTML: string = printArray(strings);

// Append the lists to an hypotetical div container that shows the list
appendToDiv('orderedLists', numbersListHTML);
appendToDiv('orderedLists', stringsListHTML);
```

In the example, `printArray` doesn't care whether the array inputted is a numeric or a string one, but it makes sure to guarantee type safety based on the data type you pass to it.

Not bad, right?

<hr/>

## What is a somewhat more practical application of generics in the real-life coding world?

Generics can be useful when working with promises and asynchronous operations, allowing you to specify the type of the resolved value.

```typescript
// Function that returns a promise to fetch data from an API
function fetchData<T>(url: string): Promise<T> {
 return fetch(url)
 .then(response => {
 if (!response.ok) {
 throw new Error('Network response was not ok');
 }
 return response.json() as Promise<T>;
 })
 .catch(error => {
 console.error('Error fetching data:', error);
 throw error;
 });
}

// Usage
interface UserData {
 id: number;
 name: string;
 email: string;
}

const apiUrl = 'https://api.example.com/users/1';

fetchData<UserData>(apiUrl)
 .then(data => {
 // Here, 'data' will be of type UserData
 console.log('User Data:', data);
 })
 .catch(error => {
 console.error('Error fetching user data:', error);
 });
```

While this example is not perfect, it offers us a great way to dynamically query for various URLs, and for each case we have the possibility to provide the type we expect to receive: we query for `https://api.example.com/users/1` - we expect to receive a response containing user information - so we provide the interface `UserData` to the function `fetchData<UserData>(apiUrl)` and if the request doesn't fail, our response will be already using the correct interface. Neat!

<hr />

## Challenges with Generics

Not all that shines is gold, and the same can be said about generics. While they offer this __great versatility__, you can imagine __they also provide a lot of complexity to a codebase__, as they will require developers to pay better attention to the data flow and make sure that things won't go as unexpected.

Together with the broader learning curve proposed to developers, there are also various limitations of type inferring that might make generics limiting to a practical application. No idea about those limits, will let you know when I stumble on those :D 

## Long story short

If you use them, make sure it makes sense on why you're using them and that they actually bring benefits on what you're doing. __If you're working on a npm package that needs to accommodate different solutions__ (idk, a table with columns that can sort according to the data type provided, where you might not know ahead of time what values will be entered), __generics might be very well what you're looking for__! Bear in mind however, that they will always create an extra layer of complexity that you need to account for your code and for all your team mates!

Let's figure out together what do we do with all those weird Ts in Typescript :D Believe it or not, they can let you work with different data types in a safe and reusable way, so you can build cool stuff with confidence!

Generics in TypeScript and how to use them

ELI5

Generics in Typescript and how to use them

<a href="https://www.freepik.com/free-psd/3d-female-character-reading-book_13678507.htm" target="_blank" rel="noreferrer noopener">Person sitting on books (Opens in a new tab)</a> and <a href="https://www.freepik.com/free-vector/realistic-3d-shapes-floating-background_13397766.htm" target="_blank" rel="noreferrer noopener">Background 3d composition (Opens in a new tab)</a> by <a href="https://www.freepik.com/author/freepik" target="_blank" rel="noreferrer noopener">Freepik (Opens in a new tab)</a>, <a href="https://www.freepik.com/free-psd/website-coding-icon-3d-illustration_28638422.htm" target="_blank" rel="noreferrer noopener">Cute round interface (Opens in a new tab)</a> by <a href="https://www.freepik.com/author/ekayasadesign" target="_blank" rel="noreferrer noopener">Ekayasa.Design (Opens in a new tab)</a>

Learning JavaScript

The good perk of having a lot of people who code around you is that you end up discussing things that you don't get to see on a day-to-day basis as a simpleton frontend developer.

This time, I landed on the __concept of symbols in JavaScript__, which is something I don't have to deal with at work, but something that JavaScript offers and it'd be nice to understand what it is and why it is :D

## What is a Symbol?

__A symbol is a unique and immutable data type in JavaScript__.

If that doesn't tell you anything (which indeed didn't for me), know that a symbol is one of the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#primitive_values" target="_blank" rel="noreferrer noopener">JavaScript primitive data types (Opens in a new tab)</a> just as string, boolean, integer etc. but it works like a *special identifier to access object properties*, and it can be used more or less like a property key.

Let's imagine that we have an object where we store a person's `name`, an `id` and their `age`.

```javascript
let person = {
 name: "Sophia",
 id: 12345678,
 age: 24, // (yes, I'm a trailing comma person)
};
```

If we want to access the value of the `id` property, we'd just do:

```javascript
console.log(person.id); // will give us 12345678
```

It is fair to assume that `id` won't change as often as the other characteristics of a person, and tailor our work around that assumption.

Let's try to use a symbol as a key by creating it. This can be done using the `Symbol()` constructor:

```javascript
let symbolIDKey = Symbol("id");
let person = {
 name: "Sophia",
 [symbolIDKey] = 12345678,
 age: 30,
};
console.log(person[symbolIDKey]); // outputs 12345678
```

You could, in theory, use no `"id"` parameter (properly referred as __descriptor__), but if you were to use more than one symbol key, it'd be more challenging to know which is which.

## Why symbols then?

Using symbols as object keys will provide you with a unique and guaranteed way of accessing object properties, __even if other code adds or modifies properties with the same key__.

For example:

```javascript
let symbolIDKey = Symbol("id");
let person = {
 name: "Sophia",
 [symbolIDKey] = 12345678,
 age: 30,
};
```

Some other code, for whatever reason, will try to do

```javascript
person.id = 00000000;
```

You will be left with

```javascript
let symbolIDKey = Symbol("id");
let person = {
 name: "Sophia",
 [symbolIDKey] = 12345678,
 age: 30,
 id: 00000000,
};

console.log(person.id); // will output 00000000
console.log(person[symbolIDKey]); // will output our more expected 12345678
```

The symbol key is allowing us to preserve the original value even if some other code might try to alter the property `id`.

> With symbols you can add private properties to an object that are not intended to be modified or accessed directly by other code.

But beware! Symbols keys are not enumerated, which means that __they do not show up in the list of keys of the object__ if you try to access them by loops and mappings.

You cannot even access the symbol keys of an object with <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys" target="_blank" rel="norefferer noopener">`keys()` (Opens in a new tab)</a> nor with <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" target="_blank" rel="norefferer noopener">`getOwnPropertyNames()` (Opens in a new tab)</a>!

You will need to be aware of the structure of your object and if you need to access the symbol keys, you'll have to use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols" target="_blank" rel="norefferer noopener">`getOwnPropertySymbols()` (Opens in a new tab)</a>.

...

And that's it! I don't see myself using this approach anytime soon, but it's good to know that, should I be concerned with the integrity of the data I work with, there are ways for me to preserve some information in the flimsy world that JavaScript often creates for us.

JavaScript symbols are a unique and immutable data type that can be used as object property keys to prevent external code to unexpectedly modify properties. That's it, but if it doesn't yet make sense to you, reading the article might actually help.

Javascript Symbols

JavaScript Symbols

<a href="https://www.freepik.com/free-psd/3d-characters-business-fall-illustration_26314271.htm" target="_blank" rel="noreferrer noopener">3d characters business fall illustration (Opens in a new tab)</a>, <a href="https://www.freepik.com/free-psd/3d-rendering-back-school-icon_30118660.htm" target="_blank" rel="noreferrer noopener">3D Atom (Opens in a new tab)</a> and <a href="https://www.freepik.com/free-vector/realistic-3d-shapes-floating-background_13397766.htm" target="_blank" rel="noreferrer noopener">Background 3D composition (Opens in a new tab)</a> by [Freepik](https://www.freepik.com/author/freepik); Blurred <a href="https://unsplash.com/photos/rCbdp8VCYhQ" target="_blank" rel="noreferrer noopener">starry sky (Opens in a new tab)</a> by <a href="https://unsplash.com/@andyjh07" target="_blank" rel="noreferrer noopener">Andy Holmes (Opens in a new tab)</a> via <a href="https://unsplash.com/" target="_blank" rel="noreferrer noopener">Unsplash (Opens in a new tab)<a/>

Quantum

Quantum computing here, quantum computing there, quantum computing everywhere! Can we make some sense out of it? I'd like to not feel like completely out of place when people talk about it, so let's figure it out together!

<blockquote class="text-sm">I start this serie of posts about Quantum computing for personal learning, with the sake of understanding the general implications of it in our modern society and how it can impact my day-to-day life with technology. I do not claim to be an expert in the topic and this are more my notes based on what I'm learning reading articles and asking ChatGPT to simplify what I'm reading :D</blockquote>

---

__Quantum computing__ is a revolutionary new technology that harnesses the principles of __quantum mechanics__ (an intricate branch of physics that explores the wonders of the subatomic realm and tries to explain the nature of particles to discover the fundamental principles that govern our world -- we're not here today for this though) to process information at incredible speeds.

Unlike classical computers, which store and process information using bits that are either 0 or 1, quantum computers use quantum bits, or __qubits__, which can exist in multiple states simultaneously, meaning that a qubit can be both 0 and 1. ...but how?

<figure>
<img src="https://images.ctfassets.net/hzu7wkrk7tly/davATh6goeQ9CIcuMx1UZ/4aa0b207e039d24629eda7ad547d3b17/qubit.svg?r=50" class="big-picture" alt="Representation of a qubit compared to a typical bit." />
 <figcaption>Representation of a qubit compared to a typical bit. Source: <a href="https://devopedia.org/qubit" target="_blank">Devopedia</a>. Credit: <a href="https://www.volkswagenag.com/en/news/stories/2019/11/where-is-the-electron-and-how-many-of-them.html" target="_blank">Volkswagen Aktiengesellschaft 2019</a>.</figcaption>
</figure>

## Superposition

Let's talk about the idea of __superposition__, which describes __the ability of a qubit to exist in multiple states at the same time__. If a normal bit can have as a state either `0` or `1`, the state of qubit can be represented as

```javascript
|ψ⟩ = α|0⟩ + β|1⟩
```

which would require quite some explantation, but to make it briefly:

1. The symbol `|ψ⟩` represents the state of the qubit. `ψ` is just a variable name, and the `|⟩` symbols are like brackets that indicate it's a quantum state. 
2. The `α|0⟩` and `β|1⟩` terms are __probability amplitudes__. They represent the chances of finding the qubit in the states `|0⟩` and `|1⟩`
- `α` represents the probability amplitude of finding the qubit in the `|0⟩` state;
- `β` represents the probability amplitude of finding the qubit in the `|1⟩` state.

(... and yes because I also had to ask myself, probability amplitudes are quite complex numbers, but the gist of them is that the sum of α and β adds up to 1, meaning that the sum of the probabilities of all possible outcomes is always equal to 1.)

We can picture the state of a qubit like a point on a ball, called the __Bloch sphere__. The numbers α and β decide where exactly on the ball the qubit's point is. If α and β are regular numbers, then the qubit's point is on the middle of the ball's surface, like the equator. This means the qubit is equally a mix of `|0⟩` and `|1⟩`. But if α and β are complex numbers ([read more about complex numbers on Math Is Fun](https://www.mathsisfun.com/numbers/complex-numbers.html "Complex Numbers, from Math is Fun")), the qubit's point is somewhere else on the ball's surface. This means the qubit is a more general mix of `|0⟩` and `|1⟩`.

When a qubit is in superposition, it is like it's exploring all possible states at once. However, __when we measure the qubit, it *collapses* into a definite state__, either 0 or 1. The act of measurement forces the qubit to choose one of the possibilities, and from that point on, it behaves like a classical bit.

For instance, if `|α|^2 = 0.4` and `|β|^2 = 0.6`, the measurement is more likely to yield the outcome 1, but there is still a chance of obtaining the outcome 0.

__Okay but... how do you set a qubit in superposition?__

In order to do that, we can use a specific __quantum gate__ known as the __Hadamard gate (H gate)__ (more about what is a quantum gate later :D). The Hadamard gate creates an equal superposition of the `|0⟩` and `|1⟩` states for a qubit. Here's a simplified explanation of how it works:

1. Start with a qubit in the `|0⟩` state or the `|1⟩` state
2. Apply the Hadamard gate (`H` gate) to the qubit
- If the qubit is initially in the `|0⟩` state, the H gate will put it into an equal superposition of `|0⟩` and `|1⟩`. The resulting state will be `(|0⟩ + |1⟩) / √2`, meaning the qubit is in both states simultaneously
- But, if the qubit is initially in the `|1⟩` state, the H gate will again put it into an equal superposition of `|0⟩` and `|1⟩` but the resulting state will be `(|0⟩ - |1⟩) / √2`, meaning the qubit is in both states but with a phase shift (which is a far more intricate topic and I am still looking to find good and simple readings about it -- feel free to share in the comment section below!).

Reading the values of multiple qubits works similarly, with each qubit measured individually, and the outcomes combined to form a classical bit string or __a quantum state in the case of entanglement__. Which leads us to the next point...

## Entanglement

Another important concept in quantum computing is __entanglement__, which describes the phenomenon of __two or more qubits being connected in a way that allows them to affect each other's behavior__, even if they are separated by large distances. Fundamentally, entanglement creates instantaneous correlations between their measurement outcomes, taking place in three stages:

- __Preparation__: two or more qubits are brought together and interact with each other in a specific way __through a quantum gate operation__ (too long of a topic to cover here for now, but [Universal Quantum has a great article on Medium about quantum gates](https://medium.com/@universalquantum/quantum-gates-explained-without-the-maths-1c40e7d79611 "Quantum gates explained (without the maths)")).
- __Resulting State__: as a result of this interaction, the qubits become entangled and share a __joint quantum state__, which cannot be expressed as a simple combination of individual qubit states as __the entangled state encompasses the entire system as a whole rather than describing each qubit independently__.
- __Correlations__: the measurement outcomes of one qubit are instantaneously correlated with the measurement outcomes of the other(s). __These correlations hold true regardless of the physical separation between the entangled qubits__, which is often referred to as *non-locality* or *spooky action at a distance* (once again, a topic for another time). 

## Briefly about Quantum gates

This is where I start to lose it a bit after the Hadamard gate we mentioned before. Sounds like a good place where I should continue reading more until I am confident enough to write notes about the topic 😎 Anyway...

__A quantum gate is an instruction (or operation) that we can use to change the state of qubits__. Just like how math operations such as addition or multiplication transforms numbers, a quantum gate transforms the quantum state of qubits, each gate having a specific effect on the qubits: rotating the state, flipping it, or putting it in a superposition and whatsoever.

Basically, they are the building blocks that help us manipulate and utilize the power of quantum computing. Once again, [Universal Quantum has a great article on Medium about quantum gates](https://medium.com/@universalquantum/quantum-gates-explained-without-the-maths-1c40e7d79611 "Quantum gates explained (without the maths)") and I recommend checking something more by yourself (and if you feel generous, don't be afraid to share some good links with me :D)

## Briefly about Challenges

Seems fair to mention, before closing, why this technology is not yet widespread and what are the things that it needs to overcome.

One of the major challenges in building a quantum computer is the delicate nature of qubits. Because they are based on the principles of quantum mechanics, __qubits are easily affected by their environment__, and can be easily disrupted by outside factors such as temperature, noise, or even light. This makes it difficult to control and manipulate qubits, and to maintain their quantum state for long periods of time.

Despite these challenges, researchers have made significant progress in developing quantum computers in recent years. In 2019, [Google announced that its quantum computer had achieved "quantum supremacy"](https://ai.googleblog.com/2019/10/quantum-supremacy-using-programmable.html) by solving a problem that would be impossible for a classical computer to solve in a reasonable amount of time. This was a major milestone in the development of quantum computing, and showed that the technology is rapidly advancing.

---

## Conclusions

__So, what did we learn here?__

- We've learned about __qubits__, which unlike the binary bits in classical computing, can exist in multiple states at once due to __superposition__.
- We've also discovered that a specific quantum gate, the __Hadamard gate__, can set a qubit in this superposition state.
- Furthermore, qubits can be __entangled__, meaning they can affect each other instantaneously irrespective of the distance between them.
- Lastly, we've had a general discussion about __quantum gates__, the operations that manipulate the state of qubits, serving as the foundational building blocks of quantum computing.

## What next?

I'd love to continue my studies focusing more on:
- (First of all, brushing up my linear algebra, because it seems to help a lot reading documents online)
- Quantum gates
- Quantum algorithms 
- Quantum error correction 
- More about quantum supremacy
- More about challenges

Thank you for reading so far, if you did, and don't hesitate sharing good resources in the comments below if you feel like!

Quantum computing is a revolutionary new technology that uses the principles of quantum mechanics to perform calculations that are currently impossible for classical computers.

An Introduction to Quantum Computing

Technology

Drawings of various people and logo from the official <a href="https://notion.so" target="_blank" rel="noreferrer noopener">Notion.so website(Opens in a new tab)</a>

Notion.so

Like many, I like to put a lot of notes down and believe I'll eventually get back to them and find all I want 🤡.

While that has not been the case with my absolutely messy Apple notes, for the past year I've been trying to make the most of <a href="https://notion.so" target="_blank" rel="noreferrer noopener">Notion.so (Opens in a new tab)</a> and take advantage of the beautiful features it offers. From database views to kanban boards, with its easy-peasy formatting options that allow for easier skimmin'-through content, it was easy for Notion to win my attention. Darn, even a simple to-do list looks so nice and gives you such a strong sense of achievement after you write it! 😂

Let's then dive in and look into the nicest resources Notion has to offer, as well as some tricks and tips on how to use its features!

## Free templates

Let's start simple with the <a href="https://www.notion.so/templates" target="_blank" rel="noreferrer noopener">huge selection of templates that Notion offers (Opens in a new tab)</a>. These templates are mostly created by the community and come in all sorts of styles; from the kawaii-est of the cutest things to the most elegant and simplistic styles.

<figure>
 <img src="https://images.ctfassets.net/hzu7wkrk7tly/1maxoWHzwg9DGl6zsML7JM/bdc25aa3180a5611af57b1fdd396c1f3/notion_templates.png?w=1500&fm=avif&r=50" class="big-picture" />
<figcaption>
 Notion offers <a href="https://www.notion.so/templates" target="_blank" rel="noreferrer noopener">a beautiful selection of templates (Opens in a new tab)</a> that accommodates all sorts of needs, whether you want to track personal goals or be more productive at work.
 </figcaption>
 </figure>

Some of my favourites for personal use are:

- The extremely cute <a href="https://www.notion.so/templates/over-the-rainbow" target="_blank" rel="noreferrer noopener">Over the rainbow (Opens in a new tab)</a> by <a href="https://www.notion.so/@corbyn-lee-holliday" target="_blank" rel="noreferrer noopener">Corbyn Lee Holliday (Opens in a new tab)</a>
- <a href="https://www.notion.so/templates/minimal-pomodoro-tracker" target="_blank" rel="noreferrer noopener">Minimal Pomodoro Tracker (Opens in a new tab)</a> by <a href="https://www.notion.so/@raiu-rajamoney" target="_blank" rel="noreferrer noopener">Raiu Rajamoney (Opens in a new tab)</a>
- <a href="https://www.notion.so/templates/minimal-dashboard" target="_blank" rel="noreferrer noopener">Minimal dashboard (Opens in a new tab)</a> by <a href="https://www.notion.so/@maas-lalani" target="_blank" rel="noreferrer noopener">Maas Lalani (Opens in a new tab)</a>
- <a href="https://www.notion.so/templates/book-tracker-3" target="_blank" rel="noreferrer noopener">Book tracker (Opens in a new tab)</a> by <a href="https://www.notion.so/@easlo" target="_blank" rel="noreferrer noopener">Easlo (Opens in a new tab)</a>
- <a href="https://www.notion.so/templates/fitness-planner-4" target="_blank" rel="noreferrer noopener">Fitness planner (Opens in a new tab)</a> by <a href="https://www.notion.so/@jordi-rodriguez" target="_blank" rel="noreferrer noopener">Jordi Rodriguez (Opens in a new tab)</a>
- <a href="https://www.notion.so/templates/apartment-hunt" target="_blank" rel="noreferrer noopener">Apartment hunt (Opens in a new tab)</a> by <a href="https://www.notion.so/@luke-waring" target="_blank" rel="noreferrer noopener">https://www.notion.so/@luke-waring (Opens in a new tab)</a>

And some of those I'd like to try at work, if I were just a tad less lazy, are:

- <a href="https://www.notion.so/templates/daily-standup-dashboard" target="_blank" rel="noreferrer noopener">Daily standup dashboard (Opens in a new tab)</a> by <a href="https://www.notion.so/@raiu-rajamoney" target="_blank" rel="noreferrer noopener">Raiu Rajamoney (Opens in a new tab)</a>
- <a href="https://www.notion.so/templates/roadmap" target="_blank" rel="noreferrer noopener">Roadmap (Opens in a new tab)</a> by <a href="https://www.notion.so/@notion" target="_blank" rel="noreferrer noopener">Notion (Opens in a new tab)</a>
- <a href="https://www.notion.so/templates/1-1-notes" target="_blank" rel="noreferrer noopener">1:1 notes (Opens in a new tab)</a> by <a href="https://www.notion.so/@notion" target="_blank" rel="noreferrer noopener">Notion (Opens in a new tab)</a>
- <a href="https://www.notion.so/templates/notions-editorial-calendar" target="_blank" rel="noreferrer noopener">Notion's editorial calendar (Opens in a new tab)</a> by <a href="https://www.notion.so/@notion" target="_blank" rel="noreferrer noopener">Notion (Opens in a new tab)</a>
- <a href="https://www.notion.so/templates/product-requirement-document-prd" target="_blank" rel="noreferrer noopener">Product requirement document (PRD) (Opens in a new tab)</a> by <a href="https://www.notion.so/@notion" target="_blank" rel="noreferrer noopener">Notion (Opens in a new tab)</a>
- <a href="https://www.notion.so/templates/job-search-and-cover-letter-template-with-ai" target="_blank" rel="noreferrer noopener">Job Search & Cover Letter Template (with AI) (Opens in a new tab)</a> by <a href="https://www.notion.so/@katie-i" target="_blank" rel="noreferrer noopener">Katie I (Opens in a new tab)</a>

Don't forget to <a href="https://www.etsy.com/de-en/search?q=notion" target="_blank" rel="noreferrer noopener">check Etsy for an even larger collection of beautiful templates for Notion (Opens in a new tab)</a>. ✨✨✨

## (Almost) Free widgets

Now that we can put aside our worries for the stylish and organizational bits of our notes, let's embellish our dashboards with some widgets! Yes, *widgets babeeeee* 😆

A few websites offer you the possibility to register and take advantage of a few free widgets; in this era of everything montly-subscribed, it's actually nice to find something good you can use for free without having to make monthly or yearly commitments.

<a href="https://indify.co/" target="_blank" rel="noreferrer noopener">Indify.co (Opens in a new tab)</a> offers a small yet great customizable set of free widgets (*minus the life progression one, that one's creepy* - I have no need to know how much life I have left 🤔, k thx) that will make your dashboard look extremely professional with only a few clicks. 

<figure>
 <img src="https://images.ctfassets.net/hzu7wkrk7tly/10Ps8KvyxKTlP4pHPDxtOO/41fa27de627010b80e1b205f655b7d40/indify_widgets.png?w=1500&fm=avif&r=50" class="big-picture" />
<figcaption>
A set of free and premium widgets from <a href="https://indify.co/" target="_blank" rel="noreferrer noopener">Indify.co (Opens in a new tab)</a>. Among their offering, they have custom buttons, clocks, counters and (for a fee) an integration with Google Calendar.
 </figcaption>
 </figure>

While my greedy ass wishes for more widgets like these (but seriously, let us customize the life progression bars widget 😂), I commend Indify for the amazing work and will periodically check for new things!

<figure>
 <img src="//images.ctfassets.net/hzu7wkrk7tly/4142X5crnpnCOqYUZft7CA/a36be83ca3bab931f357e8c9667ff460/Screenshot_2023-07-27_at_15.20.16.png?h=400&fm=avif&r=50" />
<figcaption>
Some example widgets from <a href="https://indify.co" target="_blank" rel="noreferrer noopener">Indify.co (Opens in a new tab)</a>: buttons and counters.
 </figcaption>
 </figure>

Following similar steps (and similarly life progression bars approach for whatever reason), <a href="https://widgetbox.app" target="_blank" rel="noreferrer noopener">WidgetBox (Opens in a new tab)</a> offers a slightly bigger collection of widgets, with the minus however that only three of them are free.

<figure>
 <img src="https://images.ctfassets.net/hzu7wkrk7tly/5CyZxTNk3o6nT5c7Qta3U7/545ced96a5935d7e4c8f390b83ab7476/Screenshot_2023-07-27_at_22.14.42.png?h=400&fm=avif&r=50" class="big-picture" />
 <figcaption>
 Some example widgets from <a href="https://widgetbox.app/" target="_blank" rel="noreferrer noopener">WidgetBox (Opens in a new tab)</a>: time and calendar.
 </figcaption>
 </figure>

There are a lot of services that provide nice widgets for Notion, but as I scroll through various collections I realize that this would also be an interesting project to create my custom widgets. Perhaps in the future I'll also try to create my own set of customizable widgets :D

## Level up the database game

Notion.so databases give you a dynamic system to organize your notes efficiently: you can store, manage, and retrieve a wide array of data types, from text and images to files and find back everything you want by sorting, filtering, and custom views.

While I won't dive too much into the general topic, I recommend everyone yet unfamiliar with databases to <a href="https://www.notion.so/help/what-is-a-database" target="_blank" rel="noreferrer noopener">check the official Notion.so documentation about what is a database (Opens in a new tab)</a> to clarify any further doubt, so that we can proceed with some lesser-known features of databases.

<figure>
 <img src="https://images.ctfassets.net/hzu7wkrk7tly/5rKtV7STao8jTHm1Dq1mS6/e1ff3382260956fe89aa03c73d934c7f/notion_database_view.png?w=1500&fm=avif&r=50" class="big-picture" />
 <figcaption>
 Example of a <a href="https://notion.so" target="_blank" rel="noreferrer noopener">Notion.so (Opens in a new tab)</a> database table.
 </figcaption>
</figure>

<a href="https://thomasjfrank.com" target="_blank" rel="noreferrer noopener">Thomas Frank (Opens in a new tab)</a> gives us a neat <a href=" https://thomasjfrank.com/notion-databases-the-ultimate-beginners-guide/" target="_blank" rel="noreferrer noopener">ultimate beginners guide to Notion databases (Opens in a new tab)</a>, where I would recommend checking what he calls <a href="https://thomasjfrank.com/notion-databases-the-ultimate-beginners-guide/#forcingfunctions" target="_blank" rel="noreferrer noopener">forcing fuctions (Opens in a new tab)</a>.

### Forcing functions

Long story short, *forcing functions* are those actions you want to automate every time you add an entry to your database. Say that you're just starting with your database of movies, you might start with those that you've already seen recently and at least for the time being, while you keep submitting new entries, you want your *Seen recently* column to be automatically checked.

If this explanation doesn't quite hit it off with you, have a look at the example on Thomas Frank's website. (Really, just go there, it's a good site! 😁) And if I haven't yet convinced you about how good the site is, check also his section about __formulas__.

### Formulas

In Notion (like Excel and Google Spreadsheet), a formula allows you to perform a variety of operations like calculations, text manipulations, date/time calculations, logical comparisons and anything else that can be written with logic. You can create a formula within a database property by choosing "Formula" as the property type, as simple as that!

If formulas look intimidating and words like *syntax*, *string*, *concatenate* seem vague, I recommend checking <a href="https://www.notion.so/help/formulas" target="_blank" rel="noreferrer noopener">official Notion.so guide about formulas (Opens in a new tab)</a>, as once again, they have explained it better than I ever could.

And once you're familiar with the terminology, let's have a look at some of the most common formulas you might want for your database :D

#### Percentage Calculation

Say you're tracking your reading progress in a book, and you have properties for *Total Pages* and *Pages Read*, you can calculate the percentage of the book you've read using the following formula:

```javascript
prop("Pages Read") / prop("Total Pages") * 100
```

#### Conditional Text Formatting
You could have a database of tasks with a *Priority*, with options like *High*, *Medium*, *Low*. You could then create a *Status* formula field to change the display text based on the selected priority:

```javascript
if(prop("Priority") == "High", "😱 High Priority", if(prop("Priority") == "Medium", "😅 Medium Priority", "😇 Low Priority"))
```

This will output different texts with emojis based on the task's priority.

You might notice that it's constituted by two ternary operators:

```javascript
if (prop("Priority") == <something>, <what happens if true>, <what happens if false>)
```

Unfortunately, as of now it seems that Notion doesn't offer the classic `switch()` case that most programming language have, meaning that if you want to show more than two different outputs you'll have to do some nesting.

#### Date Aging

You might have a *Last Contacted* date field in a CRM system and want to track how long it's been since you've last contacted each person. The following formula will calculate the number of days since the *Last Contacted* date:

```javascript
round(dateBetween(now(), prop("Last Contacted"), "days"))
```

This formula calculates the difference between today's date `now()` and the "Last Contacted" date in days.

#### Age Calculation

If you have a *Birth Date* field, you can calculate a person's age with this formula:

```javascript
floor(dateBetween(prop("Birth Date"), now(), "years"))
```

#### Text Concatenation

You can concatenate, as in join together, text from different fields. For example, if you have a *First Name* and *Last Name* field, you can create a *Full Name* field with a formula:

```javascript
prop("First Name") + " " + prop("Last Name")
```

This will create a new text that combines the first name and last name, separated by a space.

#### Date Calculation

You might have a *Start Date* and an *End Date* in your project tracker. You can create a formula to automatically calculate the duration of each project:

```javascript
dateBetween(prop("End Date"), prop("Start Date"), "days")
```

This will calculate the difference between the end date and start date in days.

## Web Clipper extension

Found an interesting blog post, a recipe, or an article you want to read later? Install the <a href="https://chrome.google.com/webstore/detail/notion-web-clipper/knheggckgoiihginacbkhaalnibhilkk" target="_blank" rel="noreferrer noopener">Notion Web Clipper extension for Chrome (Opens in a new tab)</a> to save everything you want to later check comfortably from Notion!

Just click the Web Clipper extension button, choose the page in Notion where you'd like to save the content, and voila! The page link, title, and a brief description are instantly saved in Notion.

This is pretty neat for keeping track of useful resources you find online that you might want later to write about *wink wink, guess what I do* 😁

## Wrapping up

'tis nothing but a scratch in all the features and resources Notion has to offer. I hope this article inspired those that were on the fence with Notion to give it a go, and for those that already use it to consider to use it some more with its neat features!

## Coming next

I'm plannint to write more in the future about <a href="https://developers.notion.com/" target="_blank" rel="noreferrer noopener">the Notion.so API (Opens in a new tab)</a> as well as how to write your own Notion widgets, so stay tuned! 😁

If there's something you feel I should've mentioned, don't hesitate mentioning it in the comment section!

Notion.so is a versatile productivity tool that can help you organize your thoughts, manage your tasks, and collaborate with others all in one place!

Make the most out of Notion.so

Apps

<a href="https://www.freepik.com/free-psd/3d-female-character-with-question-marks_13678520.htm" target="_blank" rel="noreferrer noopener">Puzzled person (Opens in a new tab)</a> and <a href="https://www.freepik.com/free-vector/realistic-3d-shapes-floating-background_13397766.htm" target="_blank" rel="noreferrer noopener">Background 3d composition (Opens in a new tab)</a> by <a href="https://www.freepik.com/author/freepik" target="_blank" rel="noreferrer noopener">Freepik (Opens in a new tab)</a>, <a href="https://www.freepik.com/free-psd/website-coding-icon-3d-illustration_28638422.htm" target="_blank" rel="noreferrer noopener">Cute round interface (Opens in a new tab)</a> by <a href="https://www.freepik.com/author/ekayasadesign" target="_blank" rel="noreferrer noopener">Ekayasa.Design (Opens in a new tab)</a>

React issues

From version 16.8 of react, we have had the honours of using hooks to lighten up our codebase, and bring state and lifecycle methods only to the components that require it, making the class component structure not needed anymore and allowing us to use and reuse the prepacked hooks as well as the ones we make ourselves :D

While today we're not talking in details about <a href="https://react.dev/reference/react" target="_blank" rel="noreferrer noopener" title="Hooks, React official documentation website">what is a Hook, which you can find in React official documentation website (Opens in a new tab)</a>, we will spend a bit more time discussing about the common misuses of the ever so popular __useEffect hook__ that most of us know and love for its versatility.

The __useEffect hook__ is a feature of React that allows us to perform *side effects* in functional components. This can include things like modifying the DOM, fetching data, or subscribing to event listeners.

<blockquote>In JavaScript, a side effect is like an action that changes something outside its own function. Think of it as altering a global setting, updating a web page element, or requesting data online.</blockquote>

The useEffect hook in React gives you a simplified way to manage these actions in function components, bypassing the need for class-based components, simplifying overall the writing and understanding of the code and also boosting the app performance by dodging needless re-renders.

It also allows you to specify a cleanup function, which is called when the component is unmounted, to prevent memory leaks and other issues.

```javascript
import React, { useState, useEffect } from 'react';

function Example() {
 const [count, setCount] = useState(0);

 // Similar to componentDidMount and componentDidUpdate:
 useEffect(() => {
 // Update the document title using the browser API
 document.title = `You clicked ${count} times`;
 });

 return (
 <div>
 You clicked {count} times
 <button onClick={() => setCount(count + 1)}>
 Click me
 </button>
 </div>
 );
}
```

There are several common mistakes that developers make when using the useEffect hook in React. Between newsfeeds, videos and personal experiences, I've seen a few cases more often than others; let's go through some of those together :D

## 1. Failing to include a cleanup function

Sometimes we might need to take into account that an user might resize the browser window, and that things like sub-menus or advertising banners need to contemplate such resize and behave accordingly; we might be easily tempted to do the following

```javascript
import React, { useEffect } from 'react';

function MyComponent() {
 useEffect(() => {
 function handleResize() {
 console.log(window.innerWidth);
 }

 window.addEventListener('resize', handleResize);
 }, []);

 return (
 <div>
 Resize the window and check your console to see the changes.
 </div>
 );
}

export default MyComponent;

```

... and kinda be okay with it.

(In this code, our component uses useEffect to add an event listener to the window whenever the component mounts. The listener logs the window's inner width whenever the window is resized.)

But there's a problem - if the component unmounts, the event listener will still be there, potentially causing memory leaks. This is where the cleanup function comes in. __By returning a function from our useEffect__, we're telling React to call this function when the component is about to unmount.

```javascript
import React, { useEffect } from 'react';

function MyComponent() {
 useEffect(() => {
 function handleResize() {
 console.log(window.innerWidth);
 }

 window.addEventListener('resize', handleResize);

 // Add a cleanup to remove the eventListener
 // when the component is dismounted
 return () => {
 window.removeEventListener('resize', handleResize);
 }
 }, []);

 return (
 <div>
 Resize the window and check your console to see the changes.
 </div>
 );
}

export default MyComponent;

```

Adding a simple `return() => { ... }` to your useEffect will make sure that the EventListener that checks the window resize will be removed and that it will not take its toll when there's no more need for it.

<hr />

## 2. Failing to use the dependencies' array

In the previous example, as we always wanted at every resize to track the new inner width of the browser window, we didn't need to be concerned with the array of dependencies of useEffect. In a lot of other rather common scenarios, however, we want our useEffect to be triggered when specific values change.

Let's say you have a component that fetches some user data based on a __userId__ prop, and displays whether the user is online or not based on an __isOnline__ state. You would want to refetch this data whenever `userId` or `isOnline` change. We could do something like this (omitting TypeScript for simplicity):

```javascript
import React, { useState, useEffect } from 'react';

function UserProfile({ userId }) {
 const [user, setUser] = useState(null);
 const [isOnline, setIsOnline] = useState(false);

 useEffect(() => {
 async function fetchData() {
 const response = await fetch(`/api/user/${userId}`);
 const data = await response.json();
 setUser(data);

 if (data.status === "online") {
 setIsOnline(true);
 } else {
 setIsOnline(false);
 }
 }

 fetchData();
 // Our dependency array including the values we want to watch over
 }, [userId, isOnline]); 

 return (
 <div>
 <h1>{user ? user.name : 'Loading...'}</h1>
 {isOnline ? 'Online' : 'Offline'}
 </div>
 );
}

export default UserProfile;

```

The useEffect hook has `[userId, isOnline]` as its dependency array. This means that the `fetchData` function will be called not only when the component first mounts, but also whenever `userId` or `isOnline` change.

If you forget to include a dependency in the array, or include the wrong dependency, it can cause your effect to be run more or less frequently than intended:
- if you leave the array of dependencies empty, __the effect will only run once__ (...which for some cases it might be what you're looking for)
- if you add all the dependencies your editor might suggest you, __you might end up re-rendering the component more than you need__, making your app slow or with undesired outcomes - don't let the editor tell you better on this one xD

## 3. Not using `AbortController` when dealing with fetch requests

Building up from our previous example, if the component `UserProfile` would render as a result of a click on a list of users, one potential problem could be that our component could receive *old data* as a result of a delayed response.

<figure>
<img src="https://images.ctfassets.net/hzu7wkrk7tly/54yeQjNQt8GpP3STw50eVp/72ab886def596041e89e3e63a8d340bc/delayed_requests.gif" alt="Representation of an interface where clicking on different list items (user profiles) too fast might result in misleading UI results. User #1 information will load with no issues; User #2 information will still be loading as the fetch request is still on its way, User #3 information will be only briefly displayed, as finally User #2 request is fulfilled." />
 <figcaption>Representation of an interface where clicking on different list items (user profiles) too fast might result in misleading UI results. User #1 information will load with no issues; User #2 information will still be loading as the fetch request is still on its way, User #3 information will be only briefly displayed, as finally User #2 request is fulfilled.</figcaption>
</figure>

(Yay, a gif!)

We got ourselves in a very unfavorable race condition.

<blockquote>A race condition is a situation in programming where the behavior of a piece of code depends on the relative timing of multiple threads/processes.</blockquote>

Race conditions often appear when working with Promises, asynchronous functions, or any kind of deferred execution, such as setTimeout or setInterval. These issues can be mitigated by properly managing the flow of execution in asynchronous operations (for example, using async/await or chaining Promises with then).

So how do we prevent our UI from showing the response of a delayed and outdated request?! You know it, `AbortController` is here to save the day :D

```javascript
import React, { useState, useEffect } from 'react';

function UserProfile({ userId }) {
 const [user, setUser] = useState(null);
 const [isOnline, setIsOnline] = useState(false);

 useEffect(() => {
 // Create an AbortController
 const abortController = new AbortController(); 

 async function fetchData() {
 try {
 // We use abortController in our fetch request to keep track
 // of a potential abort signal
 const response = await fetch(`/api/user/${userId}`, { signal: abortController.signal });

 if (!response.ok) {
 throw new Error(response.status);
 }

 const data = await response.json();
 setUser(data);

 if (data.status === "online") {
 setIsOnline(true);
 } else {
 setIsOnline(false);
 }
 } catch (error) {
 if (error.name === 'AbortError') {
 console.log('Fetch aborted');
 } else {
 console.error('An unexpected error happened:', error);
 }
 }
 }

 fetchData();

 return () => {
 // Now if userId or isOnline change, the useEffect cleanup will
 // trigger the abortController and stop any ongoing fetch request
 // connected to it
 abortController.abort();
 };
 }, [userId, isOnline]);

 return (
 <div>
 <h1>{user ? user.name : 'Loading...'}</h1>
 {isOnline ? 'Online' : 'Offline'}
 </div>
 );
}

export default UserProfile;
```

In this updated code
- we create a new `AbortController` instance before the fetch request
- the `signal` property from the `AbortController` is passed to the fetch options
- the `abort()` method is called in the cleanup function returned by useEffect, causing the fetching to be canceled

Basically now, if the userId changes before the fetch has completed, the fetch for the previous userId will be cancelled to prevent setting state on an unmounted component or outdated fetch requests. And well, another great way to prevent memory leaks.

I'd definitely recommend have a look <a href="https://developer.mozilla.org/en-US/docs/Web/API/AbortController" target="_blank" rel="noreferrer noopener">at the documentation for AbortController on mdn web docs (Opens in a new tab)</a>, as there you get to see all sorts of examples and exhaust any curiosity about it!

One of my favourite youtubers, <a href="https://www.youtube.com/@WebDevSimplified/about" target="_blank" rel="noreferrer noopener">Web Dev Simplified (Opens in a new tab)</a>, has put this issue in better words than either I or ChatGPT will ever manage, so head out to watch his video about <a href="https://youtu.be/GGo3MVBFr1A?t=1015" target="_blank" rel="noreferrer noopener">Top 6 React Hook Mistakes Beginners Make (Opens in a new tab)</a>, you'll have a great explanation I promise!

<iframe width="100%" height="400" src="https://www.youtube-nocookie.com/embed/GGo3MVBFr1A?start=1015" data-embed-title="Top 6 React Hook Mistakes Beginners Make" data-embed-url="https://www.youtube.com/watch?v=GGo3MVBFr1A&start=1015" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

<hr />

## 4. Relying on the order of useEffect calls

__The order in which useEffect calls are executed is not guaranteed__, meaning that we should definitely not rely on the order of useEffect calls to determine the behavior of your components.

Let's say we have a blog website where we fetch user information and the user's blog posts. We might be tempted to separate the data fetching into multiple useEffects for better separation of concerns:

```typescript
import React, { useState, useEffect } from 'react';

function UserProfile({ userId }) {
 const [user, setUser] = useState(null);
 const [posts, setPosts] = useState(null);

 // Fetch user data
 useEffect(() => {
 fetch(`/api/user/${userId}`)
 .then(response => response.json())
 .then(data => setUser(data));
 }, [userId]);

 // Fetch user posts
 useEffect(() => {
 fetch(`/api/posts?userId=${userId}`)
 .then(response => response.json())
 .then(data => setPosts(data));
 }, [userId]);

 return (
 <div>
 <h1>{user ? user.name : 'Loading user...'}</h1>
 <h2>{posts ? `Posts: ${posts.length}` : 'Loading posts...'}</h2>
 </div>
 );
}

export default UserProfile;
```

While this separation may seem neat, it could lead to unnecessary multiple renders and potential issues with race conditions (one fetch completing before the other).

A better approach might be to combine the two fetch calls into a single useEffect:

```typescript
import React, { useState, useEffect } from 'react';

function UserProfile({ userId }) {
 const [user, setUser] = useState(null);
 const [posts, setPosts] = useState(null);

 // Fetch user data and user posts
 useEffect(() => {
 fetch(`/api/user/${userId}`)
 .then(response => response.json())
 .then(data => {
 setUser(data);
 return fetch(`/api/posts?userId=${userId}`);
 })
 .then(response => response.json())
 .then(data => setPosts(data));
 }, [userId]);

 return (
 <div>
 <h1>{user ? user.name : 'Loading user...'}</h1>
 <h2>{posts ? `Posts: ${posts.length}` : 'Loading posts...'}</h2>
 </div>
 );
}

export default UserProfile;
```

In this version, the single useEffect first fetches the user data, then it fetches the user's posts, leaving us with more control over the sequence of events, reducing the number of re-renders and the risk of race conditions.

<hr />

## 5. Not using useEffect at all

Some junior developers may not be aware of the useEffect hook, or may not understand when it is appropriate to use it.

### Performing side effects in the render function

Some of those instances might look as such:

```typescript
// Bad practice
function UserProfile({ userId }) {
 // Fetch will happen in the render
 const user = fetch(`/api/users/${userId}`);

 return <div>{user.name}</div>;
}
```

__The render function in React should be pure__, which means it shouldn't cause any side effects like API calls, subscriptions, or timeouts/intervals. This is because React might call the render function more times than you expect, and having side effects in the render function can lead to unexpected behavior.

And to prevent all that bad, we can simply make use of our friends useEffect and useState:

```typescript
// Better practice
function UserProfile({ userId }) {
 const [user, setUser] = useState(null);

 useEffect(() => {
 fetch(`/api/users/${userId}`)
 .then(response => response.json())
 .then(data => setUser(data));
 }, [userId]);

 return <div>{user ? user.name : 'Loading...'}</div>;
}

```

### Not Handling Dependent State Correctly

When state depends on props or another state, it might need to be updated inside a useEffect to ensure it stays in sync, otherwise we might not see updated values.

```typescript
// Bad practice
function SquareArea({ edge }) {
 // Initial value of squared depends on props
 const [squared, setSquared] = useState(edge * edge);

 return <div>{squared}</div>;
}
```

While this might initially appear okay, the problem is that the initial state of squared is set based on the value prop, but useState only sets the initial state once when the component is first rendered. So if the value prop changes in the future, squared will not get updated, because useState does not track the updates of value.

To overcome that, we can do:

```typescript
// Better practice
function SquareArea({ edge }) {
 const [squared, setSquared] = useState(edge * edge); 

 // Update the state when edge changes
 useEffect(() => {
 setSquared(edge * edge);
 }, [edge]);

 return <div>{squared}</div>;
}
```

Our beloved useEffect will take care of updating `squared` every time the `edge` prop will change :D

<hr />

As we can see, useEffect is a powerful tool we can take advantage of to make our apps snappy and sharp, but we need to be wary on how we use it if we don't want to have headaches trying to debug our own mistakes. 🤯

Let me know if I forgot to mention something!

Let's get to know the common weaknesses in using one of our favourite features of React: useEffect! 

Common useEffect mistakes

Tailwind logotype from <a href="https://tailwindcss.com/brand" target="_blank" rel="noreferrer noopener">Tailwind Official Brand page (Opens in a new tab)</a>, <a href="https://www.freepik.com/free-vector/3d-abstract-background-with-paper-cut-flower-shape_18695224.htm" target="_blank" rel="noreferrer noopener"> 3d abstract background with paper cut flower shape (Opens in a new tab)</a> by <a href="https://www.freepik.com/author/garrykillian" target="_blank" rel="noreferrer noopener">GarryKillian (Opens in a new tab)</a> via <a href="https://freepik.com" target="_blank" rel="noreferrer noopener">Freepik (Opens in a new tab)</a>

Chances are you are using VSCode, and chances are you're also using Tailwind in one of your projects. Chances are that at my first *chances are...* you went immediately *nuh-uh* and moved on (and if you're a NeoVim user I can't help you anyway, you're already doomed and lost in the recommended plugins someone chose for you and you're probably still figuring out half of them) but if I got your attention with the first two assumptions, then this post might be relevant for you!

One issue I've been having ever since using Tailwind with SCSS modules has been that VSCode goes absolutely ballistic marking every `@apply` as an unknown CSS rule, __as the editor assumes it's one `at-rule`__ from CSS. (If you are wondering what at-rules are, `@import` and `@media` might sound a bit more familiar :D)

`@apply` is a Tailwind directive that mimics in semantics a native CSS at-rule, and this one in the specific takes care of enabling Tailwind utility classes in a .scss file ... which by now we already now — *I know, we wouldn't be reading this article otherwise* — so jumping to the main thing, let me present you my favourite solution from <a href="https://byby.dev/at-rule-tailwind" target="_blank" rel="noreferrer noopener">the solutions list that this article from byby.dev (Opens in a new tab)</a> proposes.

Open the `.vscode` folder in your project, create a `tailwind_directives.json` file and add the following lines. I took the liberty of expanding from the article, which was talking specifically about the `@tailwind` directive, and take it as a chance to put <a href="https://tailwindcss.com/docs/functions-and-directives" target="_blank" rel="noreferrer noopener">all the Tailwind specific directives I could find from Tailwind's documentation (Opens in a new tab)</a>:

```json
{
 "version": 1.0,
 "atDirectives": [
 {
 "name": "@tailwind",
 "description": "Use the @tailwind directive to insert Tailwind's `base`, `components`, `utilities`, and `screens` styles into your CSS."
 },
 {
 "name": "@apply",
 "description": "Use @apply to inline any existing utility classes into your own custom CSS."
 },
 {
 "name": "@screen",
 "description": "The screen function allows you to create media queries that reference your breakpoints by name instead of duplicating their values in your own CSS. Apparently deprecated in favour of @media?!"
 },
 {
 "name": "@layer",
 "description": "Use the @layer directive to tell Tailwind which “bucket” a set of custom styles belong to. Valid layers are base, components, and utilities."
 },
 {
 "name": "@config",
 "description": "Use the @config directive to specify which config file Tailwind should use when compiling that CSS file. Do not put @config before your @import statements."
 }
 ]
}
```

Then, head to `settings.json` and add these two lines:

```json
{
// ... other stuff
 "css.customData": [".vscode/tailwind_fix.json"],
 "scss.customData": [".vscode/tailwind_fix.json"]
}
```

And voilá! Done!

Now now, you might be tempted to follow the first solution proposed by the article, which simply tells VSCode to ignore every at-rule it cannot recognise:

```json
{
// ... other stuff
 "css.lint.unknownAtRules": "ignore"
 "scss.lint.unknownAtRules": "ignore"
}
```

But! __What about typos?__ We all make them, and I wouldn't trust myself writing things correctly any day :'D Better be more specific and let pass only the things we are aware of!

Prettier

Unknown at rule @apply... k thx bye!

Title and background gradient tweaked out with the DOM Inspector from <a href="https://declare-ai.org/" target="_blank" rel="noreferrer noopener">Declare-AI official website (Opens in a new tab)</a>

Declare AI

One of the latest interesting discussions on Slack at work has been about the value proposition of <a href="https://declare-ai.org" target="_blank" rel="noreferrer noopener">declare-ai.org (Opens in a new tab)</a>, a website created (*without any assistance from a Generative AI*) by <a href="https://naildrivin5.com/bio/index.html" target="_blank" rel="noreferrer noopener">David Bryant Copeland (Opens in a new tab)</a> that recognises the excitement around AI and wants to help people inform and be informed about its uses.

(bit off topic but, I am perplexed by the fact that David's own website doesn't have any comment about AI Content Declaration; perhaps they felt they had said all about the topic in the main website. Or perhaps they just wanted to make sure it is clear to people that their work has nothing to do with any sort of AI, maybe out of frustration for the new wave of low-quality/low-effort content blatantly created with AI and not wanting their work even remotely put on the same plate)🤷.

While I recommend checking the website (as I couldn't write any better about it than you could deduct from checking the actual site), the process it proposes is as follows:

```mermaid
graph TD
 A(Was Generative AI used in any way?) -->| Yes | B(Did Generative AI produce the entire work?)
 A -->| No | X(None)
 B -->| Yes | Y(Total)
 B -->| No | C(Did Generative AI contribute creatively?)
 C -->| Yes | D(Creative Assistance)
 C -->| No | E(Non-creative Assistance)
```

<blockquote class="text-sm">Not sure if the diagram can be read in an accessible way, therefore let me repeat it here (I will use a structure that proposes first the condition that end the flow). We start asking ourselves Was Generative AI used in any way?; if the answer is no, then the answer is None (as in no contribution from generative AI). If the answer is yes, we are prompted to another question Did Generative AI produce the entire work?; answering yes will land us on Total, as in total AI contribution; if we answer no, we are asked the last question Did Generative AI contribute creatively?; yes brings us to Creative Assistance and no will bring us to Non-creative Assistance.</blockquote>

It is up to your own judgement to determine if you used the AI in a creative way, but <a href="https://declare-ai.org/1.0.0/assess.html#creative-contribution" target="_blank" rel="noreferrer noopener">the website offers you a nice way to determine what could be considered creative assistance and what not (Opens in a new tab)</a>.

And once you go through this hierarchy, <a href="https://declare-ai.org/1.0.0/declare.html" target="_blank" rel="noreferrer noopener">you can make a public declaration about it (Opens in a new tab)</a>, in the best way that suits you and with the examples proposed. It allegedly also proposes to add this information in the form of meta tags... because why not?!

Now now, will I use it? *Not yet*! I would like to see it having more popularity; but what I like to do is to be open about the source of my work! And that's why __I gladly mention at least the most important prompts I ask about to ChatGPT__ at the end of each blogpost. On this website, my go-to way to use ChatGPT is to get inspiration on how to start discussing about a topic, steal good-sounding adjectives (as my English can only benefit from expanding my vocabulary), and in general to get over a writer's block that often prevents me from sharing more here, and learn more about something.

More than often, I read what ChatGPT proposes to me, and I'm immediately like nope, definitely not that! as it often goes with a very bland structure, lots of repetition, and unneeded conclusion paragraphs that give no particular value to the topic asked. But more than once, when I want to make sure I understand something about a particular topic, __it performs as a great teacher that never gets tired__, no matter how *stupider* my questions become. And it's really a teacher that I'd wish for everyone to have.

Many feel ashamed to mention they'd use any sort of generative AI and they'd prefer to keep it hidden. Instead of having a sense of appreciation for this technology, __a lot of people tend to judge negatively the skills of people using AI__, assuming that they're lazy, not knowledgeable, not actual professionals and that they'd not be able to succeed without such tool. I personally find unfair to question people's skills' worth based on how much they like to use AI, as I don't think my critical thinking is compromised any more than it'd be if I were to acquire information from a YouTube video, an online article, a book and so on. With that premise, I use ChatGPT as __one among many sources__ to acquire knowledge and understanding of a topic, and __it never is__ for me __the only source of information__.

Rather than hide its usage, __I absolutely love the idea to share with people how it helps me go past a lot of hurdles__. Before ChatGPT, I also have never been particularly shy about sharing where I've learned something, or what sources I have browsed to learn and/or do something. I really love to share with people because I would not be the person that I am today if people didn't share the things I've digested to this day.

We seem to forget that not too long ago, we were all assuming __developers were just copying stuff from StackOverflow__ and asking questions over there. So how does that exactly differ, in terms of originality and competence, from what ChatGPT offers us these days?

<hr/>

Have you ever wondered how many people make use of ChatGPT for writing their blog posts? What's your take on the topic? __Should people be more clear to which extend they use AI or would you just be happy to have valuable content in front of your eyes, regardless of how it came to be?__ Let me hear your opinion in the comments!

CoolWebsites

Content Creation

Development

declare-ai.org - ... so, who wrote that?!

<a href="https://www.freepik.com/free-photo/various-multicolored-abstract-bubbles-texture_5028372.htm" target="_blank" rel="noreferrer noopener">Various multicolored abstract bubbles texture (Opens in a new tab)</a> by <a href="https://freepik.com" target="_blank" rel="noreferrer noopener">Freepik (Opens in a new tab)</a>

It starts as a joke

<figure>
 <img src="https://images.ctfassets.net/hzu7wkrk7tly/3I9gVOwyPeTmmgWQIku0P8/22c89df2745a36e47d7eda6a809a634b/Colossus.jpeg" class="big-picture" />
 <figcaption>
 Colossus explaining to his children the dangers of discrimination. Source: <a href="https://www.reddit.com/r/Marvel/comments/5i1asp/its_starts_as_a_joke/" target="_blank" rel="noreferrer noopener">r/Marvel (Opens in a new tab)</a>.
 </figcaption>
</figure>

It always begins as a __joke__. Listen to me, both of you.

One sees a father or a mother of whom they do not __approve--__

And their brats won’t shut up, and the parents are so __exhausted__ that they just let their children __scream__, all sticky and crying and hitting and wild.

And you say to your friends, “You should have to pass a __test__ to breed". Do you understand? "You should have to get __licensed__ to have kids.”

It starts as a joke.

Then perhaps there is __tragedy__. A postpartum mother who should’ve gotten help, but her insurance did not cover therapy.

A father who erred, because he was raised believing men are pathetic if they are caregivers.

The __first tests__ are drafted.

And you think, “Good." you think, "Those children are __safe__ now”.

The test comes out, and yes, there're some problems, but nothing that cannot be __ironed out__, yes?

But now, anyone with mental illness, with a criminal record, is __barred__ from becoming a parent. And you think, “Well, that is sensible, yes?”

Because you've never known anyone like that, so who is to tell you they are not like they are portrayed in stories?

__Sick, dangerous, criminal--__ these words expand.

Suddenly it is anyone with __diabetes__, anyone with __cancer__, because they could die and leave their children orphaned so how dare they ever try to __have__ children?

It is deaf couples, disabled couples, interracial couples, gay couples-- because don't they know how __hard__ they're making it for their children?

Then it is __whoever they want__.

You think you are working for the __greater good__. You can't even fathom the life of someone who isn't __exactly__ like you.

Then one day-- __it is you__.

Some gene, some history, some past behavior-- And suddenly, you too are __sick, dangerous, criminal__.

Because the truth is this--

--__Human hate can adapt to anything__.

You __think__ you are __safe__.

But if someone __hates__ you, they will come up with the reason __after__ the fact.

Only then do you realize what you put in __power__. Only then do you realize what you stripped away.

There is __terrible power__ in a joke, in a story, in taking the truth and making it ugly.

Do you __understand__, children?

Comics

Managing CSS styles efficiently can be a challenge, especially in projects that use Tailwind, where the nature of utility classes is to have quite a bunch of them together — inevitably having some overlap when inheriting styling from different sources.

The <a href="https://www.npmjs.com/package/tailwind-merge" target="_blank" rel="noreferrer noopener">`tailwind-merge` npm package (Opens in a new tab)</a> by <a href="https://github.com/dcastil" target="_blank" rel="noreferrer noopener">Dany Castillo (Opens in a new tab)</a> offers a solution that combines and reuses Tailwind utility classes.

From their documentation we have the following example

```typescript
import { twMerge } from 'tailwind-merge'

twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')
// → 'hover:bg-dark-red p-3 bg-[#B91C1C]'
```

that shows how Tailwind Merge combines the classes `px-2 py-1` with `p-3` and results in an overall cleaner list of classes, and explains in extremely simple terms the core of Tailwind Merge. There are more examples available in the <a href="https://www.npmjs.com/package/tailwind-merge" target="_blank" rel="noreferrer noopener">`tailwind-merge` npm package (Opens in a new tab)</a> by <a href="https://github.com/dcastil" target="_blank" rel="noreferrer noopener">Dany Castillo (Opens in a new tab)</a> <a href="https://github.com/dcastil/tailwind-merge/blob/main/docs/when-and-how-to-use-it.md" target="_blank" rel="noreferrer noopener">When and how to use it documentation page in Tailwind Merge GitHub repository (Opens in a new tab)</a>.

It's probably not the easiest to implement in an already-existing project, and the author also puts a lot of cases in favour and against using it. <a href="https://github.com/dcastil/tailwind-merge" target="_blank" rel="noreferrer noopener">The readme section in GitHub of `tailwind-merge` (Opens in a new tab)</a> contains all the information you'll need to weight in whether it's going to be the solution you were looking for in your project, or if you should approach your issues from a different perspective.

I'd personally try to use it from the get-go, as implementing it in an already-existing project would require some refactoring that might or might not be time-consuming, but it's completely harmless to have it and update its usage progressively!

Tailwind Merge: clean your code by removing conflicting styling

Logo and background image from <a href="https://www.raycast.com/" target="_blank" rel="noreferrer noopener">Raycast official website (Opens in a new tab)</a>

Raycast

A lot of tools online promise a massive productivity boost, but only a few actually keep up on that bold promise: __Raycast__ is definitely one of them and I personally am an avid user of the tool!

For those that got curious, <a href="https://raycast.com" target="_blank" rel="noreferrer noopener">Raycast (Opens in a new tab)</a> is a __virtual command center__ meant to replace the bland Mac Spotlight search with an incredible set of tools such as inline currency conversions, timezone conversions, superior file search and anything else that comes to your mind right at the tips of your fingers!

Youtuber <a href="https://www.youtube.com/@christianlempa" target="_blank" rel="noreferrer noopener">Christian Lempa (Opens in a new tab)</a> has <a href="https://www.youtube.com/watch?v=hZ2hXMi-h8I" target="_blank" rel="noreferrer noopener">a great video about Raycast (Opens in a new tab)</a> and how it helped him transform his workflow; you'll find everything I want you to know in that video and more!

<iframe width="100%" height="400" src="https://www.youtube-nocookie.com/embed/hZ2hXMi-h8I" data-embed-title="Raycast: The MacOS App That Revolutionized My Workflow" data-embed-url="https://www.youtube.com/watch?v=hZ2hXMi-h8I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

You'll find that it comes out of the box with a lot of things, but you'll immediately want to customize it to integrate the tools that you use on a daily basis, for which they have an amazing set of extensions in their official <a href="https://www.raycast.com/store" target="_blank" rel="noreferrer noopener">Raycast store (Opens in a new tab)</a>.

Some of my favourite extensions, in no particular order, are:
<ul>
 <li><a href="https://www.raycast.com/ajaypremshankar/vim-bro" target="_blank" rel="noreferrer noopener">Vim Bro - Search Vim Commands (Opens in a new tab)</a> by <a href="https://www.raycast.com/ajaypremshankar" target="_blank" rel="noreferrer noopener">Ajay Prem Shankar (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/mattisssa/spotify-player" target="_blank" rel="noreferrer noopener">Spotify Player (Opens in a new tab)</a> by <a href="https://www.raycast.com/mattisssa" target="_blank" rel="noreferrer noopener">Artem Konovalov (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/gebeto/translate" target="_blank" rel="noreferrer noopener">Google Translate (Opens in a new tab)</a> by <a href="https://www.raycast.com/gebeto" target="_blank" rel="noreferrer noopener">Slavik Nychkalo (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/vimtor/tailwindcss" target="_blank" rel="noreferrer noopener">Tailwind CSS (Opens in a new tab)</a> by <a href="https://www.raycast.com/vimtor" target="_blank" rel="noreferrer noopener">Victor Navarro (Opens in a new tab)</a> (I wonder if they misspell your last name as mine xD)</li>
 <li><a href="https://www.raycast.com/blessanm86/bitly-url-shortener" target="_blank" rel="noreferrer noopener">Bitly URL Shortener (Opens in a new tab)</a> by <a href="https://www.raycast.com/blessanm86" target="_blank" rel="noreferrer noopener">Blessan Mathew (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/eluce2/list-keyboard-maestro-macros" target="_blank" rel="noreferrer noopener">Keyboard Maestro - List Macros (Opens in a new tab)</a> by <a href="https://www.raycast.com/eluce2" target="_blank" rel="noreferrer noopener">Eric (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/FezVrasta/emoji" target="_blank" rel="noreferrer noopener">Emoji Search (Opens in a new tab)</a> by <a href="https://www.raycast.com/FezVrasta" target="_blank" rel="noreferrer noopener">Federico Zivolo (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/HenriChabrand/notion" target="_blank" rel="noreferrer noopener">Notion (Opens in a new tab)</a> by <a href="https://www.raycast.com/HenriChabrand" target="_blank" rel="noreferrer noopener">Henri (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/abielzulio/chatgpt" target="_blank" rel="noreferrer noopener">ChatGPT (Opens in a new tab)</a> by <a href="https://www.raycast.com/abielzulio" target="_blank" rel="noreferrer noopener">Abiel Zulio M (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/thomas/github-repository-search" target="_blank" rel="noreferrer noopener">GitHub Repository Search (Opens in a new tab)</a> by <a href="https://www.raycast.com/thomas" target="_blank" rel="noreferrer noopener">Thomas Paul Mann (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/mblode/google-search" target="_blank" rel="noreferrer noopener">Google Search (Opens in a new tab)</a> by <a href="https://www.raycast.com/mblode" target="_blank" rel="noreferrer noopener">Matthew Blode (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/thomas/visual-studio-code" target="_blank" rel="noreferrer noopener">Visual Studio Code (Opens in a new tab)</a> by <a href="https://www.raycast.com/thomas" target="_blank" rel="noreferrer noopener">Thomas Paul Mann (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/the-browser-company/arc" target="_blank" rel="noreferrer noopener">Arc (Opens in a new tab)</a> by <a href="https://www.raycast.com/the-browser-company" target="_blank" rel="noreferrer noopener">The Browser Company (Opens in a new tab)</a> (and damn this is such an amazing browser, it deserves its own snippet!)</li>
 <li><a href="https://www.raycast.com/raycast/github" target="_blank" rel="noreferrer noopener">GitHub (Opens in a new tab)</a> by <a href="https://www.raycast.com/raycast" target="_blank" rel="noreferrer noopener">Raycast (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/khasbilegt/1password" target="_blank" rel="noreferrer noopener">1Password (Opens in a new tab)</a> by <a href="https://www.raycast.com/khasbilegt" target="_blank" rel="noreferrer noopener">Khasbilegt.TS (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/tumtum/apple-notes" target="_blank" rel="noreferrer noopener">Apple Notes (Opens in a new tab)</a> by <a href="https://www.raycast.com/tumtum" target="_blank" rel="noreferrer noopener">Thomas (Opens in a new tab)</a></li>
</ul>

Seriously, have a look at the <a href="https://www.raycast.com/store" target="_blank" rel="noreferrer noopener">Raycast store (Opens in a new tab)</a> because if you thought of anything you'd want to launch and do with one simple command, it probably already exists!

Raycast: Supercharged productivity

When I started working with <a href="https://tailwindcss.com/" target="_blank" rel="noreferrer noopener">TailwindCSS (Opens in a new tab)</a> (mostly known as just Tailwind), I soon realized that there was a need to give a hierarchy to its utilitarian classes. While I had my structure, it seems that peeps at Tailwind have heard this feedback a few times and apparently last year they came up with their <a href="https://tailwindcss.com/blog/automatic-class-sorting-with-prettier" target="_blank" rel="noreferrer noopener">automatic class sorting plugin for Prettier (Opens in a new tab)</a>.

What you would have had before as

```html
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">...</button>
```

will become

```html
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">...</button>
```

and that's simply great! You won't have to spend time reorganizing classes, as if you have Prettier set up `onSave` you'll have the classes' sorting right at your fingertips!

## Hierarchy of the sorting

Classes in the `base` layer will be sorted first, followed by classes in the `components` layer, and then finally classes in the `utilities` layer.

From their documentation
<blockquote>
 The actual order of the different utilities is loosely based on the box model, and tries to put high impact classes that affect the layout at the beginning and decorative classes at the end, while also trying to keep related utilities together.

 <div class="text-right">— <a href="https://tailwindcss.com/blog/automatic-class-sorting-with-prettier" target="_blank" rel="noreferrer noopener">Automatic Class Sorting with Prettier
 (Opens in a new tab)</a> by <a href="https://tailwindcss.com/" target="_blank" rel="noreferrer noopener">TailwindCSS (Opens in a new tab)</a></div>
</blockquote>

To understand better how the sorting happens and if you need to keep something in mind, I recommend checking <a href="https://github.com/tailwindlabs/prettier-plugin-tailwindcss" target="_blank" rel="noreferrer noopener">the GitHub page of Tailwind Automatic Class Sorting with Prettier (Opens in a new tab)</a> together with the official page <a href="https://tailwindcss.com/blog/automatic-class-sorting-with-prettier" target="_blank" rel="noreferrer noopener">Automatic Class Sorting with Prettier (Opens in a new tab)</a>.

The article shows the names of <a href="https://twitter.com/reinink" target="_blank" rel="noreferrer noopener">Jonathan Reinink (Opens in a new tab)</a> and <a href="https://twitter.com/adamwathan" target="_blank" rel="noreferrer noopener">Adam Wathan (Opens in a new tab)</a>, so thank you peeps!

Tailwind Automatic Class Sorting with Prettier

Screenshot of a section of the page <a href="https://heyreliable.com/ultimate-google-font-pairings/" target="_blank" rel="noreferrer noopener">The Ultimate Collection of Google Font Pairings and Combinations (Displayed Beautifully with Classic Art) (Opens in a new tab)<a/> curated by Lou Levit through <a href="https://heyreliable.com/" target="_blank" rel="noreferrer noopener">Reliable (Opens in a new tab)<a/>

Font Pairing example by Hey Reliable

[The Ultimate Collection of Google Font Pairings and Combinations (Displayed Beautifully with Classic Art)](https://heyreliable.com/ultimate-google-font-pairings/) from Lou Levit through [Reliable](https://heyreliable.com/ "Reliable website") is one of those delightful ways to spend time in front of your screen and come out with fresh ideas on how to style your site.

![Font Pairing example from HeyReliable](//images.ctfassets.net/hzu7wkrk7tly/6zIqzUWDNKINzJmP3hedpU/21b444d3998b182de9f8e78d0304e737/Screenshot_2023-03-04_at_23.58.33.png)

Browse through 50 font pairings (by style or mood) and find the combinations that speak to you the most - and yes, that's completely free!

Fonts

Ultimate Google Font Pairings and Combinations

Screenshot of the website <a href="https://isthisarabic.com/" target="_blank" rel="noreferrer noopener">isthisarabic.com (Opens in a new tab)</a>, developed by <a href="https://ramiismail.com/" target="_blank" rel="noreferrer noopener">Rami Ismail (Opens in a new tab)</a>

Isthisarabic

<a href="https://isthisarabic.com" target="_blank" rel="noreferrer noopener">isthisarabic.com (Opens in a new tab)</a> is the ultimate resort of <a href="https://ramiismail.com" target="_blank" rel="noreferrer noopener">Rami Ismail (Opens in a new tab)</a> to educate people about the overall appearance of Arabic, and how media and companies do not respect the part of the population they so claim to include.

There are a lot of instances where this language presents a challenge (right-to-left layouts online, mishaps while copying and pasting texts, encoding etc.), and the additional challenge of companies disregarding proper translations does not help the world to learn more about this language and the cultures behind it.

Thank you for not giving up, Rami! I'll do my best to do my part in this! :D

P.S: He also has a great crash course on YouTube!

<iframe width="100%" height="315" src="https://www.youtube-nocookie.com/embed/X1ynZm1wI18" data-embed-title="Rami Ismail, Vlambeer - XOXO Festival (2015)" data-embed-url="https://www.youtube.com/watch?v=X1ynZm1wI18" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Accessibility

isthisarabic.com - Is this عربي? Let's figure it out!

Screenshot of the <a href="https://hypercolor.dev/" target="_blank" rel="noreferrer noopener">main page of hypercolor.dev (Opens in a new tab)<a/>

hypercolor.dev - Tailwind CSS Gradients

<a href="https://hypercolor.dev/" target="_blank" rel="noreferrer noopener">Hypercolor (Opens in a new tab)</a> is a design tool that offers a collection of gradients and allows you to create your own. If you don't have any fantasy like me when it's about colors, this is a lovely site where you can get some great inspiration!

And yes, I used one of them (Ice) for this site as well. :)

And well, since I have some spare time at hand before hitting the bed, let me share a few.

### Cold Dawn

<figure>
	<img src="https://images.ctfassets.net/hzu7wkrk7tly/1Sya7mkv1gBc2mUiEhxyjv/21a18d65cc5ee768075cb2a9c0ec6eb5/Hypercolor-ColdDawn.jpeg" alt="Cool Dawn, a gradient that goes from bottom left blue to top right yellowish. Despite the cold colors, it's still conveying some sense of warmth." />
	<figcaption>
 I call this Cool Down, because despite the cold tones, it still conveys a lot of warmth. Generated with <a href="https://hypercolor.dev/" target="_blank" rel="noreferrer noopener">Hypercolor (Opens in a new tab)</a>.
	</figcaption>
</figure>

```css
{/* Tailwind */}
bg-gradient-to-tr from-indigo-900 via-sky-300 to-lime-200

{/* plain css */}
background: linear-gradient(to right top, rgb(49, 46, 129), rgb(125, 211, 252), rgb(217, 249, 157))
```

### Still Stone

<figure>
	<img src="https://images.ctfassets.net/hzu7wkrk7tly/7KuOQsr0Ks7pYQPqcnTmhb/5aedcb2e7bd5a85a9f44ef3d81ca9b69/Hypercolor-StillStone.jpeg" alt="Still Stone, a linear gradient that conveys the idea of a cold carving stone" />
	<figcaption>
 This one is Still Stone, because it reminds me of the marbles and stones used to carve those beautiful museum-worthy statues. Generated with <a href="https://hypercolor.dev/" target="_blank" rel="noreferrer noopener">Hypercolor (Opens in a new tab)</a>.
	</figcaption>
</figure>

```css
{/* Tailwind */}
bg-[conic-gradient(at_bottom_left,_var(--tw-gradient-stops))] from-white via-stone-500 to-stone-600

{/* plain css */}
conic-gradient(at left bottom, rgb(255, 255, 255), rgb(120, 113, 108), rgb(87, 83, 78))
```

### Pastel Cotton Candy
<figure>
	<img src="https://images.ctfassets.net/hzu7wkrk7tly/1kzfNlJA8siaSaDqabWi6x/1bff5c945228045638e85172034991df/HypercolorPastelCottonCandy.jpeg" alt="Pastel Cotton Candy, a cold and muted rainbow that reminds of different flavours of cotton candy" />
	<figcaption>
 Pastel Cotton Candy proposes a cold and muted rainbow that would serve great for background purposes. Generated with <a href="https://hypercolor.dev/" target="_blank" rel="noreferrer noopener">Hypercolor (Opens in a new tab)</a>.</a>
	</figcaption>
</figure>

```css
{/* Tailwind */}
bg-gradient-to-l from-cyan-300 via-amber-200 to-purple-300

{/* plain css */}
linear-gradient(to left, rgb(103, 232, 249), rgb(253, 230, 138), rgb(216, 180, 254))
```

### Last Dawn
<figure>
	<img src="https://images.ctfassets.net/hzu7wkrk7tly/aqIG3tp5GrKE1qTTeNPYG/8facf50e11b3642b4f1e6551d2dbc527/Hypercolor-LastDawn.jpeg" alt="Last Dawn, a seemingly warm dawn-inspired gradient that shows top black tones." />
	<figcaption>
 Last Dawn represents how a seemingly warm dawn can still feel overwhelming when you're looking at it with your heart full of worries, hence the black top, as if your vision is constantly unable to see the full picture. Generated with <a href="https://hypercolor.dev/" target="_blank" rel="noreferrer noopener">Hypercolor (Opens in a new tab)</a>.
	</figcaption>
</figure>

```css
{/* Tailwind */}
bg-gradient-to-b from-neutral-700 via-orange-400 to-pink-500

{/* plain css */}
linear-gradient(rgb(64, 64, 64), rgb(251, 146, 60), rgb(236, 72, 153))

```

### Everyday
<figure>
	<img src="https://images.ctfassets.net/hzu7wkrk7tly/48QZPSGEUw4NDMF2piW8TW/555ef8157ae1683eb382b9f68c79e0a3/Hypercolor-Everyday.jpeg" alt="Everyday, a sharp conic gradient that represents both of the light and dark stages of a day" />
	<figcaption>
 Everyday has a strong conic gradient that divides in the top center, conveying to me personally the feeling of a full-cycle day. Generated with <a href="https://hypercolor.dev/" target="_blank" rel="noreferrer noopener">Hypercolor (Opens in a new tab)</a>.
	</figcaption>
</figure>

```css
{/* Tailwind */}
bg-[conic-gradient(var(--tw-gradient-stops))] from-yellow-500 via-pink-900 to-blue-400

{/* plain css */}
conic-gradient(rgb(234, 179, 8), rgb(131, 24, 67), rgb(96, 165, 250))

```

... <a href="https://hypercolor.dev/generator" target="_blank" rel="noreferrer noopener">give the gradient generator a go by yourself (Opens in a new tab)</a>, and have some fun with it!

oh-no.ooo

About me

Hello, I'm Mahdava ツ

Introduction

Check my latest Article

Level up your Tailwind game

... or look at my latest Snippet

Unknown at rule @apply... k thx bye!