DEV Community: paolotiu

Make users feel special by giving them their own subdomains.

paolotiu — Mon, 23 Aug 2021 14:49:02 +0000

Have you ever wondered how to enable users to create their own subdomain? For example slack workspaces (space.slack.com) or hashnode blogs (name.hashnode.dev).
Well, Vercel makes it very easy since they have support for wildcard domains.

What are Wildcard Domains?

You can think of a wildcard domain as a catch-all for subdomains.
If I go to foo.domain.com it will go to the same page as bar.domain.com.
Then on the client side, you can serve different content for different subdomains. This will make more sense later.

Setting one up on Vercel is super easy and it has built-in HTTPS.

Adding Wildcard Domains

First, you need to have a domain available. You can buy one from any domain registrar like namecheap or porkbun.
For this example, I'll use shopeetracker.com. It's a throwaway domain that I don't use anymore.

Next, go to your projects Domains tab, enter a wildcard domain, and follow the instructions stated. For example, my domain is shopeetracker.com and I got it from Namecheap.
Then I'll input *.shopeetracker.com and configure my nameservers.

Once you have done that you're all set! Pretty easy right?

Detecting the subdomain

Detecting the subdomain happens at the client-side since we don't have access to the window object on the server-side.
Using a simple helper function we can extract the subdomain from the URL.

export const getPageData = async () => {
  const { host } = window.location;
  const splitHost = host.split('.');
  const isDev = host.includes('localhost');

  if (splitHost.length === 3 || (isDev && splitHost.length === 2)) {
    // This is your the subdomain
    // Ex. if foo.domain.com then page === 'foo'
    const page = splitHost[0];
    if (page === 'www') {
      return null;
    }

    // You can do your fetching logic here for each subdomain

    return page;
  }

  return null;
};

Demo

A running example can be found on https://shopeetracker.com, and the source code is available in a Github Repo.

Conclusion

Providing custom subdomains can make users feel special. And with wildcard domains, it can be done quickly.
If you tried this out in any of your projects hit me up on Twitter.
I also have a newsletter.

Resources

How to get secure cookies working with Nginx

paolotiu — Mon, 09 Aug 2021 08:25:35 +0000

Background

As I was setting up my Node server in a VPS, I got confused as to why my cookies weren't being set.
After some time I figured out that it works in the development environment, but not in the production environment.
I kept prodding around to find out that when I set the secure option to true the cookies weren't being sent.

Note: I'm using express-sessions my code roughly looks like this.

app.use(
  session({
    secret: process.env.SESSION_SECRET as string,
    resave: false,
    saveUninitialized: false,
    name: 'sid',
    store: new RedisStore({ client: redisClient }),
    proxy: process.env.NODE_ENV === 'production',
    cookie: {
      httpOnly: true,
      secure: process.env.NODE_ENV === 'production',
      maxAge: 1000 * 60 * 60 * 24 * 365, // 1 year
    },
  })
);

After hours of fiddling, researching, failing, and crying, I finally found the solution.

The Solution

Apparently, you need to add the directive proxy_set_header X-Forwarded-Proto https; to your nginx file.

For example:

location / {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-NginX-Proxy true;

    proxy_pass http://127.0.0.1:4000/;
    proxy_set_header X-Forwarded-Proto https;
}

And that's it! So much confusion just for one line.

Conclusion

I mainly wrote this article out of frustration with the hours spent, hoping someone else won't go through that.

As always you can follow me on Twitter, and I have a newsletter if you're into that.

Resources

Related Github Issue

👻 Jotai - State Simply Managed

paolotiu — Tue, 03 Aug 2021 04:38:58 +0000

As I refine my stack more and more, one of the values I look for is simplicity.
Simplicity allows me to move quick and iterate much faster. Jotai provides that for me.

Why Jotai?

With so many state management libraries out there, why should Jotai even be considered?

Structure

Jotai structures state in a bottom-up approach which consists of atoms.
This is contrary to the way redux/zustand structures their state (a top-down approach).
Your preference may vary, but the way Jotai does it is more straightforward to me.

Setup

Using Jotai for the first time is quick --- very quick. Actually, let me show you.

First create a primitive atom

import { atom } from 'jotai';

const countAtom = atom(0);

Then use that atom anywhere in your component

It works as you would expect useState to work.

import { countAtom } from '../jotai.ts'

function Counter() {
  const [count, setCount] = useAtom(countAtom)
  return (
    <h1>
      {count}
      <button onClick={() => setCount(c => c + 1)}>one up</button>
      // ...rest of code here

Performance

Jotai was born to solve the extra re-render issue in React.
Though most of the time this won't be an issue when using any popular state management libraries, it's still good.

Benchmarks

This benchmark ran my machine with Ryzen 5 2600, Windows 11 Insiders Preview inside WSL2.
The write scores are low compared to the original benchmarks.
Most likely it's either because I'm running it inside WSL2, or its a machine difference.
To see the benchmarks ran on another machine go to this pull request.

type	atoms	ops/s
read	100	6 519 582
read	1000	6 524 333
read	10000	6 594 886
write	100	394 417
write	1000	400 393
write	10000	414 026

Extra

There are a few more things as to why you should consider Jotai.

Typescript oriented
No string keys needed
Lightweight (2.4kB minfied + gzipped)
The mascot (it's cute c'mon)

Getting Started

Atoms

Atoms are at the core of Jotai, the building blocks to create your state.
I think the docs says it best.

State in Jotai is a set of atoms. An atom is a piece of state. Unlike useState in React, atoms are not tied to specific components.

Primitive atoms

These atoms are as simple as it gets. Just pass an initial value.

import { atom } from 'jotai';

const countAtom = atom(0);

Derived atoms

Derived atoms are atoms that depend on other atoms.
Whenever the atoms they depend on changes the value of these atoms also update.

There are three types of derived atoms:

Read-only atom
Write-only atom
Read-Write atom

To create a derived atom we must pass a read function and an optional write function.

const readOnlyAtom = atom((get) => get(countAtom) * 2);

const writeOnlyAtom = atom(
  null, // it's a convention to pass `null` for the first argument
  (get, set, update) => {
    // `update` is any single value we receive for updating this atom
    // It can be an object, string, int, etc.
    set(countAtom, get(countAtom) - update.value);
  }
);

const readWriteAtom = atom(
  (get) => get(countAtom) * 2,
  (get, set, newValue) => {
    set(countAtom, newValue / 2);
    // you can set as many atoms as you want at the same time
  }
);

The get is used to read other atom values. It reacts to changes of its dependencies.

The set is used to write to write an atom value.
It will invoke the write function of the target atom.

Note

The value returned by the atom function doesn't hold any state.
It creates an atom config. We call these atoms, but it's important to know that these do not hold any state.
We'll see why in our next point.

Provider

Provider is used to provide state for a component subtree.
This means that we can use atoms in different locations, and they can have different values.
Providers can be used for multiple subtrees, even nested. It works just like the React Context would.

A Provider is not needed though, without it the atom will use default state it was defined with.

Here's an example for different Provider situations:

Other Goodies

atomWithStorage

Jotai's minimalistic core API allows various utils to be built based on it.
My favorite is atomWithStorage.
It allows you to persist values in localStorage, sessionStorage, or for React Native AsyncStorage.
I find it to be perfect for theming.

The first parameter is the key within your chosen storage.

The second parameter is the initial value

import { useAtom } from 'jotai';
import { atomWithStorage } from 'jotai/utils';

const themeAtom = atomWithStorage<'dark' | 'light'>('theme', 'light');

const Page = () => {
  const [theme, setTheme] = useAtom(themeAtom);

  return (
    <>
      <h1>Welcome to {theme} mode!</h1>
      <button
        onClick={() =>
          setDarkMode((prev) => (prev === 'dark' ? 'light' : 'dark'))
        }
      >
        toggle theme
      </button>
    </>
  );
};

Integrations

Jotai can integrate with other popular libraries.
Here are some notable ones:

Getting Async

Jotai has first-class support for async. It fully leverages React Suspense.
They have fantastic docs. Check it out!

Conclusion

Jotai is my choice for global state management. Pair it with react-query, and boom!
You have straightforward state management all throughout. Don't be fooled though, simple does not mean powerful.

How about you? What's your state management solution?
You can contact me any time if you have questions or just wanna chat!

For more tips and tricks you can follow me on twitter. I also have a newsletter if you're into that.

Resources

How to get Tailwind Intellisense anywhere

paolotiu — Sat, 31 Jul 2021 15:28:28 +0000

As I was evaluating tailwind I there was one thing that pushed me over the edge -- intellisense.
The speed that I can go writing styles for my components, it was bliss. Though once I used other libraries like
clsx or HeadlessUI I kinda got annoyed by the lack of intellisense. It wasn't that bad, but enough to bug me.

For example HeadlessUI's Transition component:

Or the clsx library:

so the question is:

How to get intellisense?

Luckily after some searching I found out how.

First go open your workspace settings.

This will create a settings.json file under a .vscode folder if you don't already have one. You can define rules within it. The one we're interested about is tailwindCSS.experimental.classRegex.

In this we define an array of arrays containing regex to match a pattern.

For example using the clsx library:

{
  "tailwindCSS.experimental.classRegex": [
    ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]
}

Let's review what happened there.

The first item in the array is an expression to the match container, and the second expression is to match the class lists.

NOTE: Both expressions must contain only one capture group.

If you only have a single class list like the HeadlessUI example, you can specify a single regular expression.

{
  "tailwindCSS.experimental.classRegex": [
    "(?:enter|leave)(?:From|To)?=\\s*(?:\"|')([^(?:\"|')]*)"
  ]
}

You can also use multiple expressions for different contexts

{
  "tailwindCSS.experimental.classRegex": [
    ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
    "(?:enter|leave)(?:From|To)?=\\s*(?:\"|')([^(?:\"|')]*)"
  ]
}

I know, regex is hard, so heres a repo containing multiple use cases.
https://github.com/paolotiu/tailwind-regex-list

I encourage you to contribute if there are any other use cases that haven't been listed.
Thank you :)

Cross posting strategies

paolotiu — Tue, 27 Jul 2021 02:57:43 +0000

Hey! I recently got into blogging, mainly in hashnode. I wanted to cross post though throughout medium, DEV, personal website, etc.. I found it quite a pain to copy paste everywhere. I also have some questions.

Do you use any tools? If yes, what is it? If no, why?
How do you handle SEO. I assume you fill in the canonical url right?
How do you measure analytics throughout all platforms?

Thank you so much!

DEV Community: paolotiu

Make users feel special by giving them their own subdomains.

What are Wildcard Domains?

Adding Wildcard Domains

Detecting the subdomain

Demo

Conclusion

Resources

How to get secure cookies working with Nginx

Background

The Solution

Conclusion

Resources

👻 Jotai - State Simply Managed

Why Jotai?

Structure

Setup

First create a primitive atom

Then use that atom anywhere in your component

Performance

Benchmarks

Extra

Getting Started

Atoms

Primitive atoms

Derived atoms

Note

Provider

Other Goodies

atomWithStorage

Integrations

Getting Async

Conclusion

Resources

How to get Tailwind Intellisense anywhere

How to get intellisense?

Links:

Cross posting strategies