How to add a moving RGB effect to your text using styled-components

Creating a chameleon text effect


I recently created a [new page on this website](/fancy-pants). From an early time in my frontend journey, I have been amazed by the websites that are featured on [awwwards](https://www.awwwards.com/awwwards/collections/freelance-portfolio/) and I wanted to create something <Highlight><Sparkles>fancy</Sparkles></Highlight> like them.

Here's how I did it.

## What we want to build

Let's take a look again at what we're trying to build here:

<Heavy>
  <ChromaHighlight>Hello there!</ChromaHighlight>
</Heavy>

let's break down what's happening here:

- text color transitions from one color to another
- as soon as it reaches the "target" color, we change it again to keep it changing

## Changing colors

We can animate the color changing of the text by using `transition`:

```css
transition-property: color;
transition-duration: 5s;
transition-timing-function: linear;

/* or in one line */
transition: color 5s linear;
```

And since I'm using `styled-components`, we can put this in a re-usable CSS string:

```jsx
import { css } from "styled-components";

const WaveMixin = css`
  transition-property: color;
  transition-duration: 5s;
  transition-timing-function: linear;
`;
```

But this doesn't do anything at the moment — to actually change the color, we will need to update the color of the `<span>` that we are targeting _after_ it has been rendered to the screen.

Let's start writing our little wrapper component for this:

```jsx
// usage
<Highlight>Hello there!</Highlight>;

const Highlight = ({ children }) => {
  return <Wave>{children}</Wave>;
};

// import styled, { css } from "styled-components";
const WaveMixin = css`
  transition-property: color;
  transition-duration: 5s;
  transition-timing-function: linear;
`;

const Wave = styled.span`
  ${WaveMixin}
`;
```

And now we change the color once the component has mounted:

```jsx {3-11,14-19,21-23}
<Highlight>Hello there!</Highlight>;

let root: HTMLElement;

const getNewColor = () => {
  const h = random(1, 360);
  const s = random(80, 90);
  const l = random(50, 60);

  return `hsl(${h}, ${s}%, ${l}%)`;
};

const Highlight = ({ children }) => {
  const changeColor = () => {
    const newColor = getNewColor();

    if (root === undefined) root = document?.documentElement;
    root.style.setProperty("--color-chameleon", newColor);
  };

  useEffect(() => {
    changeColor();
  }, []);

  return <Wave>{children}</Wave>;
};

const WaveMixin = css`
  color: var(--color-chameleon);
  transition-property: color;
  transition-duration: 5s;
  transition-timing-function: linear;
`;

const Wave = styled.span`
  ${WaveMixin}
`;
```

<Heavy>
  <HighlightWithUseEffect>Hello there!</HighlightWithUseEffect>
</Heavy>

Huh, that didn't seem to work out 🤔 but that's because the transition already ran since the above live example was already "mounted" by the time you scrolled down to it.

## A wild custom hook appeared!

To keep changing the color after a pre-defined interval, we'll be defining our very own `useInterval` custom hook:

```jsx
const useInterval = (callback, delay) => {
  const savedCallback = useRef();

  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  useEffect(() => {
    const handler = (...args) => savedCallback.current(...args);

    if (delay !== null) {
      const intervalId = setInterval(handler, delay);
      return () => clearInterval(intervalId);
    }
  }, [delay]);
};
```

Let's now use this hook to change the color of our text just as it completes its transition.

```jsx {1,15-17}
import { useInterval } from "utils/hooks";

const Highlight = ({ children }) => {
  const changeColor = () => {
    const newColor = getNewColor();

    if (root === undefined) root = document?.documentElement;
    root.style.setProperty("--color-chameleon", newColor);
  };

  useEffect(() => {
    changeColor();
  }, []);

  useInterval(() => {
    changeColor();
  }, 5000);

  return <Wave>{children}</Wave>;
};
```

<Heavy>
  <HighlightWithUseInterval>Hello there!</HighlightWithUseInterval>
</Heavy>

Voila! ✨

There we go. What's great is that you can also use this to highlight link, like so:

<Heavy>
  <ChromaHighlight link>
    <a href="#">This is a link</a>.
  </ChromaHighlight>
</Heavy>

## Wrapping up

I'm really glad with how the effect turned out, and it was also easier to accomplish because I was using CSS-in-JS. It's great to see how powerful tools like [styled-components](https://styled-components.com) can be!
You can [check the effect out in action](/fancy-pants) and see it in all its glory 😄

Have a good one 👋


Building this website with Next.js, TypeScript and Styled-components

Over-engineering a Blog


I've always wanted to have a personal blog (and maintain it!) but I was just never able to get around to it. It's 2020 and I didn't want to push this any further.

I'd experimented with [Jekyll](https://jekyllrb.com/) before. It's a dead-simple way to host your own blog, but having worked with React over the past couple of years I just didn't feel content with just a markdown blog.

I'd also peeked at [Medium](https://medium.com), but their move to a paywall just didn't fit with me. [DEV](https://dev.to) also looked like a really good option, but I increasingly wanted to host something that was really _made by me_.

## React with Client-Side rendering

The easiest solution would have been to run `yarn create react-app my-app` and then going berserk (_I'm a yarn user btw /s_). If I decided to not go the [CRA](https://create-react-app.dev/) route and instead use only the packages that I actually need by building everything from scratch, I did have the following benefits:

- I wouldn't have [over 1500 dependencies](https://news.ycombinator.com/item?id=19195148), some of which I _probably_ don't need for a blog
- Let's talk about the first point again

However, using a stock React app also has a one pretty decently sized issue that one notices little by little over time: the dreaded blankness of our HTML while our JavaScript is still being loaded.

## The Problem of Client-Side Rendering

Whenever you've hit refresh on a vanilla React app, you've probably noticed this: a blank page gets loaded, and there is a (considerable at times) delay when the things start "popping up" on the screen. You check if your WiFi connection is fast enough, but that's not the problem 🙁

A quick refresher on how React works: Our page's HTML loads first, and the HTML defines the JS files that need to be loaded for React to take over things. In the time that the page HTML has been loaded and the JS is yet to be finish loading, the client only sees what has already been loaded at this point, the HTML (and if we've taken care of it, the CSS too!). This problem is especially highlighted when the client has a poor/slow internet connection (you can also experience this in the browser by going over to the **Network** tab in your browser's console and selecting an option there, like **slow 3G**).

## The Renaissance of Static

To be precise, static websites never really _went away_. But their introduction into the React ecosystem was pretty much exactly what developers were looking for. So, what exactly are "static" websites and why does just about everyone seem to be in love with them?

Static websites allow your web application to be _server-side rendered_ (SSR). What this means is that instead of your application consisting of just barebones HTML which needs all of its accompanying JS to be loaded so that the app can be rendered properly, your app gets _pre-rendered_: using all the data that is available statically, the app (or rather, the DOM) is rendered and we can get access to the (static) app as HTML and CSS.

Now that our webpage (or at least some parts of it) is available as HTML, our website can be loaded _much_ faster, since there is no waiting time period for the JS to load first!

### IDE Tooling

One thing that I've learnt over the last couple of years is that it is almost _always_ better to put in some of that extra effort right in the beginning even if it might seem like overkill since it pays off over the future. This was primarily my takeaway from when rewriting my work codebase using TypeScript; in the early stages it was an absolute pain to learn a not-so-pleasing-to-the-eyes-at-first syntax.

One of my goals with the rewrite of my website was that I wanted to be able to play around with it. This meant being able to use third-party packages; and TypeScript allows your [IDE](/uses) to use types from respective packages with VSCode's IntelliSense.

In the process of making a more complete specification of the tooling that I wanted to include in my project, I ended up with a spin-off: [<TextGradient><Heavy>sreetamdas/stack</Heavy></TextGradient>](https://github.com/sreetamdas/stack), a modern-day-tech stack boilerplate for `React + TypeScript + Styled Components` projects.

### CSS-in-JS

I've tried out CSS Modules, but CSS-in-JS just seemed more comfortable.

### Framework

This was a decision between Gatsby and Next.js, and being able to support non-static sites with Next.js was a big reason for going with it. Gatsby does bring with it its huge ecosystem of plugins, as well as top-class support for GraphQL (something that I've been looking forward to working with) but Next.js is an absolute delight to play around with, so I went ahead with my choice.

And that's about it! That's the primary stack for this personal website. It's open-sourced, so feel free to check it out and contribute if you'd like 😁


RSS feeds are a great way for people to notify their readers that they've published new content! Here's how to add an RSS feed for a Next.js site

RSS Feed in a Next.js site


RSS feeds are a great way for people to notify their readers that they've published new content! Instead of having to actively go and visit the websites to check if there are any new posts, the RSS alerts you when a website has been updated.

Here's how we can add a RSS feed to a Next.js site:

- Install the `Feed` package
- Get all our posts' data
- Create our RSS feed
- Call our function inside of `getStaticProps`

As I'll mention later, these above steps are what I used for my particular so your blog might require a slightly implementation, though the overall process remains the same!

### Install packages

```shell
yarn add feed

# if you're using npm
npm i feed
```

### Get posts' data

This step will vary depending on how/where you're storing your content — you may be using MDX like I am, or a CMS like [Sanity](https://www.sanity.io).

In my case, I manage _most_ of my content using MDX, each with a `meta` variable with metadata about the post.

```js
export const getBlogPostsData = async () => {
  // path where the MDX files are
  const DIR = path.join(process.cwd(), "src", "content", "blog");
  const files = fs
    .readdirSync(DIR)
    .filter((file) => file.endsWith(".mdx"));

  const META = /export\s+const\s+meta\s+=\s+(\{(\n|.)*?\n\})/;
  const postsData = files.map((file) => {
    // grab the metadata
    const name = path.join(DIR, file);
    const contents = fs.readFileSync(name, "utf8");
    const match = META.exec(contents);
    if (!match || typeof match[1] !== "string")
      throw new Error(`${name} needs to export const meta = {}`);
    const meta = eval("(" + match[1] + ")");

    // remove the ".mdx" from the filename
    const slug = file.replace(/\.mdx?$/, "");

    return {
      ...meta,
      slug,
    };
  });

  return postsData;
};
```

Again, you will need to modify this particular method as per your own preference, so please keep that in mind!

### Create an RSS feed

Thanks to the `Feed` package, this part is greatly simplified; you can check out the [docs](https://github.com/jpmonette/feed#example), and here's what your function to create your RSS feed will look like:

```js
import { Feed } from "feed";
import { getBlogPostsData } from "utils/blog";

const generateRssFeed = async () => {
  const posts = await getBlogPostsData();
  const siteURL = process.env.SITE_URL;
  const date = new Date();
  const author = {
    name: "Sreetam Das",
    email: "sreetam@sreetamdas.com",
    link: "https://twitter.com/_SreetamDas",
  };

  const feed = new Feed({
    title: "Sreetam Das' blog",
    description: "",
    id: siteURL,
    link: siteURL,
    image: `${siteURL}/logo.svg`,
    favicon: `${siteURL}/favicon.png`,
    copyright: `All rights reserved ${date.getFullYear()}, Sreetam Das`,
    updated: date,
    generator: "Feed for Node.js",
    feedLinks: {
      rss2: `${siteURL}/rss/feed.xml`,
      json: `${siteURL}/rss/feed.json`,
      atom: `${siteURL}/rss/atom.xml`,
    },
    author,
  });

  posts.forEach((post) => {
    const url = `${siteURL}/blog/${post.slug}`;

    feed.addItem({
      title: post.title,
      id: url,
      link: url,
      description: post.summary,
      content: post.summary,
      author: [author],
      contributor: [author],
      date: new Date(post.publishedAt),
    });
  });
};
```

and finally, we write the feed out to our filesystem

```js {1,48-51}
import fs from "fs";
import { Feed } from "feed";
import { getBlogPostsData } from "utils/blog";

const generateRssFeed = async () => {
  const posts = await getBlogPostsData();
  const siteURL = process.env.SITE_URL;
  const date = new Date();
  const author = {
    name: "Sreetam Das",
    email: "sreetam@sreetamdas.com",
    link: "https://twitter.com/_SreetamDas",
  };

  const feed = new Feed({
    title: "Sreetam Das' blog",
    description: "",
    id: siteURL,
    link: siteURL,
    image: `${siteURL}/logo.svg`,
    favicon: `${siteURL}/favicon.png`,
    copyright: `All rights reserved ${date.getFullYear()}, Sreetam Das`,
    updated: date,
    generator: "Feed for Node.js",
    feedLinks: {
      rss2: `${siteURL}/rss/feed.xml`,
      json: `${siteURL}/rss/feed.json`,
      atom: `${siteURL}/rss/atom.xml`,
    },
    author,
  });

  posts.forEach((post) => {
    const url = `${siteURL}/blog/${post.slug}`;

    feed.addItem({
      title: post.title,
      id: url,
      link: url,
      description: post.summary,
      content: post.summary,
      author: [author],
      contributor: [author],
      date: new Date(post.publishedAt),
    });
  });

  fs.mkdirSync("./public/rss", { recursive: true });
  fs.writeFileSync("./public/rss/feed.xml", feed.rss2());
  fs.writeFileSync("./public/rss/atom.xml", feed.atom1());
  fs.writeFileSync("./public/rss/feed.json", feed.json1());
};
```

### Run our function inside `getStaticProps`

Sweet! now that we have everything ready, we just need to make sure that our function is run at build time — so you can call it in the `getStaticProps` function of one of your pages, like `index.jsx`:

```jsx
export const getStaticProps = async (_context) => {
  await generateRssFeed();

  return {
    // ...
  };
};
```

and that's it! whenever our site is built and deployed, our RSS feed will be created and updated as well. You can check out the result live [here](https://sreetamdas.com/rss/feed.xml)!


Colors — an MDX file


# Colors!

This is an **MDX** file!
This is an **MDX** file!
This is a [link](https://www.google.com):

<MDXTitle color="yellow">Colors!</MDXTitle>

<MDXLink href="/">This is a link!</MDXLink>


How hard can implementing the perfect dark mode be? A journey through blocking scripts, IIFEs, CSS variables and much more

The Perfect Dark Mode

Year in Review — 2020


2020 was a weird year for us all, but here's everything that I was able to do this year anyway:

## Finally launched my blog!

At the beginning of 2020, I set out to redo my personal website. I was fairly impressed with how I’d built it ([over-engineered](/blog/over-engineering-a-blog) and such), and also with how my blog post — which was a big motivation for revamping my website in the first place — had started to take shape. After months of work (and procrastination), I published my blog post in late November.

I crossposted it to [dev.to](https://dev.to/sreetamdas/the-perfect-dark-mode-2d7g) and [Hashnode](https://sreetamdas.hashnode.dev/the-perfect-dark-mode), and posted it on [Reddit](https://www.reddit.com/r/reactjs/comments/jywex9/the_perfect_dark_mode_in_nextjs/) as well. It also got picked up by [React Status](https://react.statuscode.com/issues/217) and the [Stack Overflow newsletter](https://stackoverflow.blog/2020/12/11/17089/#h-links-from-around-the-web)!

I'd planned quite a bit for its release, but that still didn't prepare me for the sheer number of people who read my blog post — between all three platforms that I posted on, over <Highlight>15 thousand</Highlight> checked out the post!

Here's what I wanna say to you — if you've got _that one article_ that you've been sitting on for weeks/months, get it out there! You'd be surprised at how many people find it intriguing :&rpar;

## Became more active on Twitter

There's tons of great content on Twitter _if you're following the right people_ — I realised that in a year without much physical interaction with people, Twitter is a great outlet for thinking out loud; I got loads of feedback and motivation from people. Heck, I even got a job interview just because I was following someone who posted about it! The highlight of it all was getting followed by [@Netlify](https://twitter.com/Netlify) and [@cassidoo](https://twitter.com/cassidoo)!

## Got a new job!

Late last year I [started working](https://twitter.com/_SreetamDas/status/1326004455397969920) at [Remote](https://remote.com), a company that is everything I'd ever dreamed of. It really does "walk the talk" of working remote and async!

We also have a [public handbook](https://handbook.remote.com) that I recommend checking out! ([Our number one value is kindness](https://www.notion.so/remotecom/Values-d43475e8895c4b7c811490aef64782b3) 🙂)

## A Year of Firsts

Working from home (for so long!) was a first for a lot of us, but in addition, I also:

- got a [chance to speak at a conf](https://twitter.com/_SreetamDas/status/1342839171287666691) for the first time (which got [postponed to March '21](https://reactday.in) 😭)
- got to [play in VR](https://twitter.com/_SreetamDas/status/1336932419497197569) (thanks [@Remote](https://remote.com)!) It is one thing to read up and/or watch LTT videos about it, but nothing prepares you for the moment when you get to experience it firsthand

![Magicforce Smart 2 with Gateron Browns](/blog/year-in-review-2020/oculus.jpg)

- took part in [Advent of Code](https://adventofcode.com), albeit I could only keep up for nine days; You can find my solutions [here](https://gist.github.com/sreetamdas/a094dc7cc17b75dc7563e04240cf5618)
- Got more into mechanical keyboards
  ![Magicforce Smart 2 with Gateron Browns](/blog/year-in-review-2020/keyboard.jpg)

- started doing the [New York Times Mini Crossword](https://www.nytimes.com/crosswords/game/mini) _almost_ regularly
- treated myself for 2020 with the [Sony WH-1000XM4](https://www.sony.com/electronics/headband-headphones/wh-1000xm4)

![Sony WH-1000XM4](/blog/year-in-review-2020/headphones.jpg)

- released [Karma](https://marketplace.visualstudio.com/items?itemName=SreetamD.karma): a custom theme for VSCode, and I'm so so proud that it was good enough for 2500+ people to install it!

![Karma: a VSCode theme](/blog/year-in-review-2020/karma.png)

I'm not great at keeping resolutions, but I came up with a list of things that I hope to do in 2021:

- Become better at fullstack develop and build an app, no matter the size
- Learn in public
- Help more people learn how to code (and get better myself)
- Be more consistent with posts on my blog and my newsletter
- Hopefully get to speak at offline events and also conquer my stage fright (or whatever's left of it)
- Get better at CSGO ([reach out](https://twitter.com/_SreetamDas) to me if you wanna [play](https://steamcommunity.com/id/sreetamdas) along with me!)
- ~~Improve my Remote work setup (should have some updates soon!)~~ I received my setup! You can also check out my [/uses](/uses) page!

![My setup](/blog/year-in-review-2020/setup.jpg)
