Remix spends a single line in the documentation on the [handle export](https://remix.run/docs/en/v1/api/conventions#handle). It simply states:

*Exporting a handle allows you to create application conventions with the `useMatches()` hook. You can put whatever values you want on it.*

That’s it, a simple object that you can export on a (nested) route. So why is this such an awesome feature? Well, you can create functionalities like their [meta export feature](https://remix.run/docs/en/v1/api/conventions#meta) and more.
## Dave, give me a practical example
To best explain how this works we’re going to build a breadcrumb-bar that you see on many websites. To do this with the handle export, we’ll first create our pages. We’ll create our page structure like this:

```markdown
.
└── app
    ├── routes
    │   ├── about.tsx
    │   └── about
    │       ├── us.tsx
    │       └── us
    │           ├── history.tsx
    │           └── values.tsx
    └── root.tsx

```

`root.tsx`, `about.tsx` and `us.tsx` all load the [Outlet component](https://reactrouter.com/docs/en/v6/api#outlet) to load their respective nested routes.

The next step is to export an object called `handle` from every nested route that looks something like this:

```jsx
// app/routes/about.tsx

import { NavLink } from 'remix';

export const handle = {
  breadcrumb: <NavLink to='/about'>About</Navlink>,
  pageTitle: 'About'
};
```

Note that we can export any value we want. Here, I’m exporting a React component for the breadcrumb itself and a string for the page title.

So we’ve added this for the about route and all its nested routes. How do we now use it? Well, I want to only load a breadcrumb-bar in one place for all nested routes. We head over to `root.tsx` to do just that. Here, I want to, not just get the data for the current route, but all it’s parents’ data as well. Once I have all these pieces of data, I can start constructing a breadcrumb.

That single line of documentation on this Remix mentions the `useMatches` hook. This hook returns an array of the currently active route, but all its active parent routes as well. Perfect for our breadcrumb-bar! Let’s have a look at how this translates to code in our `root.tsx`. When we navigate to `/about/us/history`, we get something like this:

```jsx
// app/routes/root.tsx

import { useMatches } from 'remix';

export default function App() {
  const matches = useMatches();


  /*
    matches contains an array with this data: [
      { pathname, data, params, handle }, // root route
      { pathname, data, params, handle }, // about route
      { pathname, data, params, handle }, // about/us route
      { pathname, data, params, handle } // about/us/history route
    ];
  */
};
```

There we can access the object, for every nested route (breadcrumb), we exported as `handle`. Next, we can write some JSX to loop over this list and return the breadcrumb:

```jsx
// app/routes/root.tsx

import { NavLink, useMatches } from 'remix';

export default function App() {
  const matches = useMatches();


  return <>
    <nav>
      <ul>
        {matches.map((match, index) => <li key={index}>
          {match.handle?.breadcrumb}
        </li>)}
      </ul>
    </nav>
  </>
};
```

I’ve created a [CodeSandbox](https://codesandbox.io/s/remix-handle-84nhx) (❤️) where you can see this in action:

 <iframe
  src="https://codesandbox.io/embed/remix-handle-84nhx?fontsize=14&hidenavigation=1&theme=dark"
 style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
 title="remix-handle"
 allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
 sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>

## So what else can I build with this?
Well, that depends on your creativity! Remix basically offers a way to keep data at a nested route, but access it higher up in the route in any component you want. You can then render a component or execute logic for every nested route in a single place. What you want to use it for is really up to you. Remix, I believe, uses this to aggregate exported Meta functions and write the meta-tags to the head of the document.

And that’s all! Let me know what you will use this for. Cheers!

Remix’ powerful hidden feature you might not have noticed yet

**New to [Remix](http://remix.run)? Get up to speed by reading my [first look at Remix](https://www.davebitter.com/articles/first-look-at-remix).**
## LoaderFunction
A LoaderFunction is used to fetch and load some data for a (nested) route on the server. Like [Next.js API routes](https://www.davebitter.com/articles/next-js-api-routes), Remix lets you export a special async function that can be used to fetch some data and return an object containing the data. Here is an example of how that may look like when building an overview page for some articles:

```
// app/pages/articles/overview.tsx

import { LoaderFunction } from 'remix';

export const loader: LoaderFunction = async ({ }) => {
    const { articles } = await fetch('https://website.com/api/articles').then(res => res.json())

    return {
        articles: articles
            .splice(0, 5)
            .map(({ title, slug }: ArticleData) => ({ title, slug }))
    };
};
```
Note that by naming the exported function `loader`, Remix picks it up. A great optimization you can do right of the box is just returning the data that your front-end needs. In this case, we just need the first five articles’ `title` and `slug` properties. In general, you want to just return the data you actually need for performance and security reasons. The LoaderFunction is the perfect place to do so.

Next, we want to use this data in the front-end. We export some JSX in the same file where we can access the data form the LoaderFunction by using the `useLoaderData` hook provided by Remix:

```
// app/pages/articles/overview.tsx

import { LoaderFunction, useLoaderData, Link } from 'remix';

type LoaderData = {
    articles?: Partial<ArticleData>[];
};

export const loader: LoaderFunction = async () => {
    const { articles } = await fetch('https://website.com/api/articles').then(res => res.json())

    return {
        articles: articles
            .splice(0, 5)
            .map(({ title, slug }: ArticleData) => ({ title, slug }))
    };
};

const OverviewPage = () => {
    const loaderData = useLoaderData<LoaderData | undefined>();

    return <>
        <h1>Articles</h1>

        <ul>
            {loaderData?.articles?.map(({title, slug}) => {<li key={slug}>
                <Link to={`/aricles/${slug}`} prefetch='intent'>{title}</Link>
            </li>})}
        </ul>
    </>;
}
export default OverviewPage;
```
And that’s it. Whenever this (nested) route gets requested by the user, the LoaderFunction will fetch some data and then render the JSX on the server. Note that for a nested route, the data request is code-split right out of the box. I enjoy how straightforward it is, but incredibly powerful as well!
> The web’s core interactivity consists of links and forms. The rest is secondary.
## ActionFunction
So far, Next.js does things in a similar matter. Where Remix, to me, really shines is the handling of forms. In a framework like Next.js, you’d have to create an API route, probably `preventDefault` on the form submit and post client-side to the API route. Remix, being built on web standards, take a great approach to handling forms. It can actually handle your native form submit right out of the box with ActionFunctions like so:

```
// app/pages/contact.tsx

import { Form, ActionFunction, useActionData, redirect } from 'remix';

type ActionData = {
    fieldErrors?: {
        name: string | undefined;
        question: string | undefined;
    };
    fields?: {
        name: string;
        question: string;
    };
};

export const action: ActionFunction = async ({ request }): Promise<Response | ActionData> => {
    const form = await request.formData();
    const name = form.get('name');
    const question = form.get('question');

    const fieldErrors = {
        name: validateName(name),
        question: validateQuestion(question)
    };

    const fields = { name, question };

    if (Object.values(fieldErrors).some(Boolean)) {
        return { fieldErrors, fields };
    }

    await handleNewContactRequest(fields)

    return redirect(`/contact/thank-you`);
};

const ContactPage = () => {
    const actionData = useActionData<ActionData | undefined>();

    return <>
        <h1>Contact</h1>

        <Form method='post'>
            <label htmlFor='name'>Name</label>
            <input id='name' name='name' defaultValue={actionData?.fields?.name || ''} required></input>
            {actionData?.fieldErrors?.name && <span>{actionData?.fieldErrors?.name}</span>}

            <label htmlFor='question'>Question</label>
            <input id='question' name='question' defaultValue={actionData?.fields?.question || ''} required></input>
            {actionData?.fieldErrors?.question && <span>{actionData?.fieldErrors?.question}</span>}

            <button type='submit'>Send</button>
        </Form>
    </>;
}

export default ContactPage;
```
Quite a lot is happening here. Let’s break it up into smaller pieces:

```
// app/pages/contact.tsx

import { Form } from 'remix';

<Form method='post'>
    <label htmlFor='name'>Name</label>
    <input id='name' name='name' required></input>

    <label htmlFor='question'>Question</label>
    <input id='question' name='question' required></input>

    <button type='submit'>Send</button>
</Form>
```
We use the `Form` component by Remix to have client-side form handling if client-side JavaScript is available. If not, it falls back to a regular HTML `form` element. We make sure to properly add the attribute to our `input` elements with the `name` property as we’re going to need that in the form handling. Remember, Remix is built on web standards. We need to add a form method with the value `post` to make it work.

```
// app/pages/contact.tsx

import { Form, ActionFunction, redirect } from 'remix';

type ActionData = {
    fieldErrors?: {
        name: string | undefined;
        question: string | undefined;
    };
    fields?: {
        name: string;
        question: string;
    };
};

export const action: ActionFunction = async ({ request }): Promise<Response | ActionData> => {
    const form = await request.formData();
    const name = form.get('name');
    const question = form.get('question');

    const fieldErrors = {
        name: validateName(name),
        question: validateQuestion(question)
    };

    const fields = { name, question };

    if (Object.values(fieldErrors).some(Boolean)) {
        return { fieldErrors, fields };
    }

    await handleNewContactRequest(fields)

    return redirect(`/contact/thank-you`);
};
```
Just like the LoaderFunction, we export a special async function called `action` for the ActionFunction. Because we used a form with the method `post` in this file/route, the function will handle the incoming `post` request automatically.

We can then do some basic server-side form validation to ensure we don’t send any bad data to our email service. If there is an error for one of the form fields, we return an object containing the error messages. If all is good, we call our email handling service and redirect the user to a thank you page.

```
// app/pages/contact.tsx

import { Form, useActionData } from 'remix';

type ActionData = {
    fieldErrors?: {
        name: string | undefined;
        question: string | undefined;
    };
    fields?: {
        name: string;
        question: string;
    };
};

const ContactPage = () => {
    const actionData = useActionData<ActionData | undefined>();

    return <>
        <h1>Contact</h1>

        <Form method='post'>
            <label htmlFor='name'>Name</label>
            <input id='name' name='name' defaultValue={actionData?.fields?.name || ''} required></input>
            {actionData?.fieldErrors?.name && <span>{actionData?.fieldErrors?.name}</span>}

            <label htmlFor='question'>Question</label>
            <input id='question' name='question' defaultValue={actionData?.fields?.question || ''} required></input>
            {actionData?.fieldErrors?.question && <span>{actionData?.fieldErrors?.question}</span>}

            <button type='submit'>Send</button>
        </Form>
    </>;
}
```
In case there were errors, our ActionFunction behaves like a LoaderFunction where we can access the data that has been returned. Similarly, we use the `useActionData` hook provided by Remix to access the form field errors and entered values. We can then render the form field errors on the page and make sure to set the `defaultValue` property of the `input` elements with the values the user entered.
> Remix lets you build forms [progressively enhanced](https://www.davebitter.com/articles/custom-inputs-web) without even having to think about it. Writing applications that don’t solely rely on client-side JavaScript has never been easier.
## So all this for a no client-side JavaScript?
Naturally, the visitors of your website will most likely nearly all have client-side JavaScript enabled. There is a common misconception that this is why we want to build websites and web applications without the need of client-side JavaScript. There are a few more major benefits of building with this approach.
### Performance
Firstly, not having to load a large JavaScript bundle on a user’s device and mobile network is a great advantage. As more and more of the web’s functionality is moving to client-side JavaScript, so is the bundle size increasing. Handling all this logic on the server will help greatly with combatting this.
### Reliability
Secondly, having a non-client-side JavaScript “fallback” is great for the reliability and robustness of your web application. What happens when your JavaScript doesn’t load or breaks? In most modern web applications the user won’t be able to complete their task. Having an HTML-only “fallback” available that always works is great to rely on.

Notice how I keep adding quotation marks around “fallback”. This is because it’s not really a fallback with the Progressive Enhancement mindset. Building with the Graceful Degradation mindset would indeed mean that you first build the full functionality in an ideal situation and then make sure that you can fall back on a solution if that doesn’t work.

Progressive Enhancement however flips this around. You first build a working solution with just the basics. In this case, a regular HTML form that will post to a server and be redirected or reloaded after the server is done. Then, when there is client-side JavaScript available, we can handle it on the client and enhance the user experience. The great thing about Remix is that you get most of this right out of the box.
### Reduced complexity (by moving the state to the server)
Finally, a big benefit is moving the state to the server. Notice how I never used any client-side state in this form. This not only reduces the risk of a broken application but makes the code far simpler to read and keep up to date.

Sure, this form will just post the data and be done with it. Imagine you have a form that can create/read/update/delete (CRUD) users. Whenever you modify the user list, you need to make sure that you update all the client-side state that has a copy of the “real” (server-side) state. This can become quite complex and often developers resort to techniques like Redux. This makes an application so much more complex. By doing everything on the server, **Remix will hydrate all the pages every time they load to reflect the latest state of the data**. This is such a powerful shift of responsibility!
## Concluding
Remix makes it incredibly easy to build robust, well-performing and simple web applications by using the “old” web standards with new tricks up its sleeve. I’m a big advocate for how they do this and can’t wait to explore further. For now, thanks for reading and follow me for more of these articles!

Remix LoaderFunction vs ActionFunction

[Remix](https://remix.run) is a full-stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience. This is what excited me when I first read about Remix. I'm a big advocate for progressively enhancing web applications and this framework seems to take this approach by simply using web fundamentals.

This is not a step-by-step guide on how to make a web application with Remix, but rather some features I noticed and wanted to highlight. That might come later. If you are looking for that, [Remix.run](http://Remix.run) is an amazing landing page and contains very well written documentation that will take you through all the reasons why they build this framework, what it offers and how it works. Seriously, one of the best landing pages I've seen in the past few years. Please, have a read there and come back for my view as a [Next.js](https://nextjs.org/) fanboy.
## Routing mechanism
Like Next.js, Remix uses a file-based routing system. In `/app` (where your app will live) you can create a folder called `routes`. Every file you add (e.g. `/app/routes/example` will create a route and page under `http://website.com/example`. If you're unfamiliar with this concept, please read my article [A simple, yet detailed introduction to Next.js](https://www.davebitter.com/articles/a-simple-yet-detailled-introduction-to-next-js). Next.js and Remix work nearly the same with some exceptions like creating a dynamic page (`[slug]` vs. `$slug`. If this is not the way you want to work, you can also define your routes in an object for both of these frameworks.
### Nested routes
Remix seems to heavily rely on the usage of nested routes as "partials". Let's say you are building an admin view. You might have multiple routes for several admin pages:
```
- app
    - routes
        - admin.tsx
        - admin
            - new.tsx
            - edit.tsx
                $user.tsx

```
All these admin pages might share a special navigation bar for logged in admins. Naturally, you could load a reusable component in the markup of all these pages, but that sounds more like a partial that you used to use back when building websites with templating languages like Pug or Handlebars. Remix allows you to just load the partial in `app/routes/admin.tsx` and add a Remix component called `<Outlet />` . This component serves as a placeholder where a child route can be rendered. In this case, that would be the new and edit route. I really like this approach of templating out pages.
### Scoped JS and CSS per nested route
These nested routes are not just useful as partials, but will allow Remix to also easily chunck-up your nested routes for JS and CSS bundles. Naturally, it knows what pieces to load as you load them per nested route. This makes these nested routes true small little routes and optimises the loading of resources.

This concept is fundamental to how Remix works. You can read more about nested routes [here](https://remix.run/docs/en/v1/guides/routing) and CSS scoping with `<Links />` [here](https://remix.run/docs/en/v1/guides/styling).
## Server- and client-side code
We've seen great strides by Next.js to make it easy for developers to expose server-side functions right next to client-side code. You can read more about that in my article [Next.js page generation](https://www.davebitter.com/articles/next-js-page-generation). At a first glance, Remix has an evenly convenient, if not better solution. I feel like Remix takes it to the next level by fully focussing on not having to use client-side JS as a standard, but rather an afterthought.
### Loaders
Many web applications need to fetch data. You can use `loader` functions in combination with a `useLoaderData` hook to set this up.
```jsx
import type { LoaderFunction } from "remix";
import type { User } from "@prisma/client";
import { db } from "~/utils/db.server";

type LoaderData = { users: Array<User> };
export let loader: LoaderFunction = async () => {
  const data: LoaderData = {
    users: await db.user.findMany()
  };

  return { data };
};

export default function Users() {
  const data = useLoaderData<LoaderData>();

  return (
    <ul>
      {data.map(user => (
        <li>{user.name}</li>
      ))}
    </ul>
  );
}
```
There is quite some Typescript-specific code here, but in its essence there is an async function exported called `loader`. This function fetches some data and returns an object with data. Note that you can return multiple pieces of data from various sources here. You can now access all this data using the `useLoaderData` hook. An important aspect of this is that no client-side JS is needed here. You just want some data from your server-side function and then use it to render a list on the server to serve to the client.
### Actions
So what about handling things like forms? I need to handle that on the client right? Well, not necessarily. Forms can easily be handled with a `method` attribute on the form element. Sure, you might want to make a fancy multi-step form, but this is where progressive enhancement pops up again. Just make a form with a `method` and let it post using the web standards. You then export an `action` function that will handle the posting of the form. Take a look at this code snippet of the [Jokes app tutorial](https://remix.run/docs/en/v1/tutorials/jokes) I followed in preparation for this article. You can find my full end result in [this repository](https://github.com/DaveBitter/remix-jokes).
```jsx
import type { ActionFunction } from "remix";
import { redirect } from "remix";
import { db } from "~/utils/db.server";

export const action: ActionFunction = async ({
  request
}) => {
  const form = await request.formData();
  const name = form.get("name");
  const content = form.get("content");
  // we do this type check to be extra sure and to make TypeScript happy
  // we'll explore validation next!
  if (
    typeof name !== "string" ||
    typeof content !== "string"
  ) {
    throw new Error(`Form not submitted correctly.`);
  }


  const fields = { name, content };


  const joke = await db.joke.create({ data: fields });
  return redirect(`/jokes/${joke.id}`);
};

export default function NewJokeRoute() {
  return (
    <div>
      <p>Add your own hilarious joke</p>
      <form method="post">
        <div>
          <label>
            Name: <input type="text" name="name" />
          </label>
        </div>
        <div>
          <label>
            Content: <textarea name="content" />
          </label>
        </div>
        <div>
          <button type="submit" className="button">
            Add
          </button>
        </div>
      </form>
    </div>
  );
}
```
There is a basic form (with no client-side JS) that just posts on submit. The `action` function is then called where we can then get the form data and handle it like normal. But what about validation? Naturally, you want to do this on the server, but it's considered good practice to do this on the client as well. The nice thing about having everything in this file is that we can reuse the same validation function in both places. Here's another snippet with just server-side validation implemented.
```jsx
import type { ActionFunction, LoaderFunction } from "remix";
import {
    useActionData,
    redirect,
    Form
} from "remix";
import { JokeDisplay } from "~/components/joke";
import { db } from "~/utils/db.server";
import {
    requireUserId,
    getUserId
} from "~/utils/session.server";

export const loader: LoaderFunction = async ({
    request
}) => {
    const userId = await getUserId(request);
    if (!userId) {
        throw new Response("Unauthorized", { status: 401 });
    }
    return {};
};

function validateJokeContent(content: string) {
    if (content.length < 10) {
        return `That joke is too short`;
    }
}

function validateJokeName(name: string) {
    if (name.length < 2) {
        return `That joke's name is too short`;
    }
}

type ActionData = {
    formError?: string;
    fieldErrors?: {
        name: string | undefined;
        content: string | undefined;
    };
    fields?: {
        name: string;
        content: string;
    };
};

export const action: ActionFunction = async ({
    request
}): Promise<Response | ActionData> => {
    const userId = await requireUserId(request);
    const form = await request.formData();
    const name = form.get("name");
    const content = form.get("content");
    if (
        typeof name !== "string" ||
        typeof content !== "string"
    ) {
        return { formError: `Form not submitted correctly.` };
    }


    const fieldErrors = {
        name: validateJokeName(name),
        content: validateJokeContent(content)
    };
    const fields = { name, content };
    if (Object.values(fieldErrors).some(Boolean)) {
        return { fieldErrors, fields };
    }


    const joke = await db.joke.create({
        data: { ...fields, jokesterId: userId }
    });
    return redirect(`/jokes/${joke.id}`);
};

export default function NewJokeRoute() {
    const actionData = useActionData<
        ActionData | undefined
    >();


    return (
        <div>
            <p>Add your own hilarious joke</p>
            <Form method="post">
                <div>
                    <label>
                        Name:{" "}
                        <input
                            type="text"
                            defaultValue={actionData?.fields?.name}
                            name="name"
                            aria-invalid={
                                Boolean(actionData?.fieldErrors?.name) ||
                                undefined
                            }
                            aria-describedby={
                                actionData?.fieldErrors?.name
                                    ? "name-error"
                                    : undefined
                            }
                        />
                    </label>
                    {actionData?.fieldErrors?.name ? (
                        <p
                            className="form-validation-error"
                            role="alert"
                            id="name-error"
                        >
                            {actionData.fieldErrors.name}
                        </p>
                    ) : null}
                </div>
                <div>
                    <label>
                        Content:{" "}
                        <textarea
                            defaultValue={actionData?.fields?.content}
                            name="content"
                            aria-invalid={
                                Boolean(actionData?.fieldErrors?.content) ||
                                undefined
                            }
                            aria-describedby={
                                actionData?.fieldErrors?.content
                                    ? "content-error"
                                    : undefined
                            }
                        />
                    </label>
                    {actionData?.fieldErrors?.content ? (
                        <p
                            className="form-validation-error"
                            role="alert"
                            id="content-error"
                        >
                            {actionData.fieldErrors.content}
                        </p>
                    ) : null}
                </div>
                <div>
                    <button type="submit" className="button">
                        Add
                    </button>
                </div>
            </Form>
        </div>
    );
}
```
Note that we return the validation messages if there is something wrong and render the page again accessing them with the `useActionData` hook. If the form validates fine, we can redirect to the overview page.
> This is a great example of how easy it can be to create an interactive part of your web application without the need for client-side JS for something that has web standards. Sure you can, but Remix is built in a way where you take this approach first.

## Resource routes
If I would've build the previous form without any client-side JS in Next.js, I would've had to build a Next.js API route. These are incredibly powerful. You can read more about these API routes in my article [Next.js API routes](https://www.davebitter.com/articles/next-js-api-routes). With Remix, you can do exactly the same, but even more. Remix doesn't just offer this for, for instance, JSON responses, but for any kind of response really. You can create a file with a special naming pattern like `/app/routes/jokes[.]rss.tsx`. The `[.]rss` part tells Remix that you will return a `.rss` file. In this code snippet, you can see how something like this could work.
```jsx
import type { LoaderFunction } from "remix";
import { db } from "~/utils/db.server";

export const loader: LoaderFunction = async ({
    request
}) => {
    const jokes = await db.joke.findMany({
        take: 100,
        orderBy: { createdAt: "desc" },
        include: { jokester: { select: { username: true } } }
    });


    const host =
        request.headers.get("X-Forwarded-Host") ??
        request.headers.get("host");
    if (!host) {
        throw new Error("Could not determine domain URL.");
    }
    const protocol = host.includes("localhost")
        ? "http"
        : "https";
    const domain = `${protocol}://${host}`;
    const jokesUrl = `${domain}/jokes`;


    const rssString = `
    <rss xmlns:blogChannel="${jokesUrl}" version="2.0">
      <channel>
        <title>Remix Jokes</title>
        <link>${jokesUrl}</link>
        <description>Some funny jokes</description>
        <language>en-us</language>
        <generator>Kody the Koala</generator>
        <ttl>40</ttl>
        ${jokes
            .map(joke =>
                `
            <item>
              <title>${joke.name}</title>
              <description>A funny joke called ${joke.name}</description>
              <author>${joke.jokester.username}</author>
              <pubDate>${joke.createdAt}</pubDate>
              <link>${jokesUrl}/${joke.id}</link>
              <guid>${jokesUrl}/${joke.id}</guid>
            </item>
          `.trim()
            )
            .join("\n")}
      </channel>
    </rss>
  `.trim();


    return new Response(rssString, {
        headers: {
            "Cache-Control": `public, max-age=${60 * 10
                }, s-maxage=${60 * 60 * 24}`,
            "Content-Type": "application/xml",
            "Content-Length": String(Buffer.byteLength(rssString))
        }
    });
};
```
How cool is that! The routes folder is not just for HTML pages, but you can create routes for any resource you need, hence the name resource routes.
## Nested route utility exports
I found the utility exports that Remix offers on nested routes incredibly nice to use. Previously, I mentioned you could import CSS on nested routes and have it scoped and chuncked to just that nested route. There are a variety of other Remix utilities you can use scoped to a nested route.
### SEO
You probably want to add some meta-tags to your pages. You can do this easily by exporting a `MetaFunction` on (nested) routes. Let's say you have some basic meta-tags on the root of the pages under `app/root.tsx`. You can export that function there like so:
```jsx export const meta: MetaFunction = () => {

  const description = `Learn Remix and laugh at the same time!`;
  return {
    description,
    keywords: "Remix,jokes",
    "twitter:image": "https://remix-jokes.lol/social.png",
    "twitter:card": "summary_large_image",
    "twitter:creator": "@remix_run",
    "twitter:site": "@remix_run",
    "twitter:title": "Remix Jokes",
    "twitter:description": description
  };
};
```
But you might want to update the title or description for a specific nested route. You guessed it, you can export the same function with different values there to extend this base set of meta tags. I think that's pretty sweet.
### Error handling
You can export a `CatchBoundary` and `ErrorBoundary` function for every (nested) route.
```jsx
export function CatchBoundary() {
    const caught = useCatch();


    if (caught.status === 404) {
        return (
            <div className="error-container">
                There are no jokes to display.
            </div>
        );
    }
    throw new Error(
        `Unexpected caught response with status: ${caught.status}`
    );
}

export function ErrorBoundary() {
    return (
        <div className="error-container">
            I did a whoopsies.
        </div>
    );
}
```
This will help you with two things. You can notify the user with some custom message on the page, but more importantly, you can isolate this error to just the nested route. The rest of you're application will run fine. This helps you think about how you want to handle your not so optimal flow.
## Finally, loading some client-side JS for the first time
During the Jokes app tutorial, I didn't even realize that hadn't written any client-side JS yet. I think it's really cool that Remix doesn't load any client-side JS by default. Naturally, you might need some client-side JS so you can load the `<Scripts />` component. This is the first time you will see JS files in your network tab. These optimised and chuncked files will be loaded and "hydrate" your application on the client.
## Verdict.
I'm a big advocate of Progressive Enhancement to make web applications simple, accessible and resilient. You can read some of my articles on this [here](https://www.davebitter.com/tags/progressive-enhancement). I usually put this to practice for just components. Seeing Remix take this approach to the entire application gives me hope for a future of building great web applications using web standards and progressive enhancement.

For the first time in years, I felt like a "web developer" again instead of a JS engineer. It's incredible fun to start thinking about how to leverage these standards smartly. I'm very excited about what Remix will offer and will definitely continue researching Remix and sharing it with all of you. Thanks for reading!

First look at Remix

![Number Code Input](/img/articles/number-code-input-html-css-js.gif)*Number Code Input*
As you can see, the core functionality of these inputs is to enter one number at a time. The building of that happy flow can be quite easy to do. When playing around we can see that there a quite a few more functionalities. Let's first set the requirements:
The Number Code Input should:
* automatically move to the next and stop at the last number input
* navigate from left to right with the arrow keys
* delete a single value in input and automatically going back to and delete the value of the previous input when hitting the backspace key
* delete the value of a focussed and previous input if backspace is pressed multiple times
* handle the pasting of several/all numbers in a number input
You see, this is quite a bit of functionality. As always, I will build this custom input in a progressively enhanced way on three levels. Please read more about this in my blog ["Writing progressively enhanced custom inputs for the web"](https://www.davebitter.com/articles/custom-inputs-web).
## Structural (HTML)
![Number Code Input with HTML](/img/articles/number-code-input-html.gif)*Number Code Input with HTML*

```html
<fieldset name='number-code' data-number-code-form>
    <legend>Number Code</legend>

    <input type="number" min='0' max='9' name='number-code-0' data-number-code-input='0' required />
    <input type="number" min='0' max='9' name='number-code-1' data-number-code-input='1' required />
    <input type="number" min='0' max='9' name='number-code-2' data-number-code-input='2' required />
    <input type="number" min='0' max='9' name='number-code-3' data-number-code-input='3' required />
    <input type="number" min='0' max='9' name='number-code-4' data-number-code-input='4' required />
    <input type="number" min='0' max='9' name='number-code-5' data-number-code-input='5' required />
    <input type="number" min='0' max='9' name='number-code-6' data-number-code-input='6' required />
    <input type="number" min='0' max='9' name='number-code-7' data-number-code-input='7' required />
</fieldset>
```
Let's start with the structure. As you might have read in the article I mentioned, I need to provide a working HTML version first. The Number Code Input will consist of a fieldset containing all the separate number inputs. The fieldset is used to indicate that these inputs belong together. With the `legend`, I indicate what this group is.
The inputs itself have a few needed attributes. Firstly, I declared that the input type must be a number. This is not just for validation but triggers the [number keyboard layout](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#Using_number_inputs) on devices. This increases the user experience. Next to that, I've added a `min` value of 0 and a `max` value of 9. I did this so you can only enter a single number character per input. You might see some attributes like `data-number-code-input`. This has no function right now but will be used later on by the JavaScript.
Great, the Number Code Input now allows for numbers being entered by the user. Let's proceed to the next step.
## Presentational (CSS)
![Number Code Input with HTML and CSS](/img/articles/number-code-input-html-css.gif)*Number Code Input with HTML and CSS*
```css
legend {
  font-size: 0;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}
```
Naturally, the style of the inputs is up to you. I did add a few things, besides nice visuals, to make the form a bit better. I set the `font-size` of the legend to 0 as visually we don't need it, but for screenreaders, we want to have that information available. Next to that, I hid the arrows in the input field as I did not find it needed in my use case. This is, of course, up to you.
The Number Code Input is starting to look a lot better. Now let's add some interactivity.
## Behavioural (JavaScript)
![Number Code Input with HTML, CSS and JS](/img/articles/number-code-input-html-css-js.gif)*Number Code Input with HTML, CSS and JS*
Let's take the behavioural layer one requirement at a time.
### Automatically move to the next and stop at the last number input
I need to add some logic to call focus on the next number input if the case that the current number input is not the last one
```js
const numberCodeForm = document.querySelector('[data-number-code-form]');
const numberCodeInputs = [...numberCodeForm.querySelectorAll('[data-number-code-input]')];

const handleInput = ({target}) => {
  let currentIndex = Number(target.dataset.numberCodeInput);
  const nextIndex = currentIndex + 1;

  if(nextIndex < numberCodeInputs.length) {
    numberCodeInputs[nextIndex].focus();
  }
});
```
### Navigate from left to right with the arrow keys
I need to add an event listener that triggers when a key is pressed. I then focus on the next or previous number input if there is one.
```js
const numberCodeForm = document.querySelector('[data-number-code-form]');
const numberCodeInputs = [...numberCodeForm.querySelectorAll('[data-number-code-input]')];

const handleKeyDown = e => {
  const {code, target} = e;

  const currentIndex = Number(target.dataset.numberCodeInput);
  const previousIndex = currentIndex - 1;
  const nextIndex = currentIndex + 1;

  const hasPreviousIndex = previousIndex >= 0;
  const hasNextIndex = nextIndex <= numberCodeInputs.length - 1

  switch(code) {
    case 'ArrowLeft':
    case 'ArrowUp':
      if (hasPreviousIndex) {
        numberCodeInputs[previousIndex].focus();
      }
      e.preventDefault();
      break;

    case 'ArrowRight':
    case 'ArrowDown':
      if (hasNextIndex) {
        numberCodeInputs[nextIndex].focus();
      }
      e.preventDefault();
      break;

    default:
      break;
  }
}

numberCodeForm.addEventListener('keydown', handleKeyDown);
```
### Delete a single value in an input and automatically going back to and delete the value of the previous input when hitting the backspace key
This functionality is pretty straight forward. I delete the value of the focussed number input and focus the previous number input if present.
```js
const numberCodeForm = document.querySelector('[data-number-code-form]');
const numberCodeInputs = [...numberCodeForm.querySelectorAll('[data-number-code-input]')];

const handleKeyDown = e => {
  const {code, target} = e;

  const currentIndex = Number(target.dataset.numberCodeInput);
  const previousIndex = currentIndex - 1;
  const nextIndex = currentIndex + 1;

  const hasPreviousIndex = previousIndex >= 0;
  const hasNextIndex = nextIndex <= numberCodeInputs.length - 1

  switch(code) {
    case 'Backspace':
      if (!e.target.value.length && hasPreviousIndex) {
        numberCodeInputs[previousIndex].value = null;
        numberCodeInputs[previousIndex].focus();
      }
      break;
    default:
      break;
  }
}

numberCodeForm.addEventListener('keydown', handleKeyDown);
```
### Handle the pasting of several/all numbers in a number input
Finally, when pasting a value of multiple characters I want to automatically fill out the number input based on that value. This is important as this is a common way people fill out these forms.
```js
const numberCodeForm = document.querySelector('[data-number-code-form]');
const numberCodeInputs = [...numberCodeForm.querySelectorAll('[data-number-code-input]')];

const handleInput = ({target}) => {
  const inputLength = target.value.length;
  let currentIndex = Number(target.dataset.numberCodeInput);

  if (inputLength > 1) {
    const inputValues = target.value.split('');

    inputValues.forEach((value, valueIndex) => {
      const nextValueIndex = currentIndex + valueIndex;

      if (nextValueIndex >= numberCodeInputs.length) { return; }

      numberCodeInputs[nextValueIndex].value = value;
    });

    currentIndex += inputValues.length - 2;
  }

  const nextIndex = currentIndex + 1;
});
```
## Looking back
That's it. I build a progressively enhanced Number Code Input that deals with the several requirements we set. Feel free to have a look over at [CodePen](https://codepen.io/davebitter/full/VweaZqY) to play around with the Number Code Input and look further into the source code.

Building a Number Code Input

### Progressive enhancement
Progressive enhancement is a technique we use to enhance an element when the user’s browser has certain functionalities. By far, the biggest part of progressive enhancement is enhancing elements when CSS and JavaScript are available.
The technique is simple. First, built the HTML to always offer a working solution. Then add CSS to make the element more visually appealing. Finally, add some JavaScript to enhance the user experience by adding custom interactivity.
### Progressively enhanced custom inputs
So, how to deal with custom inputs? For example a custom three-way switch shown below.
![Three way switch with HTML, CSS and JavaScript](//images.ctfassets.net/w4dg3cjf42ew/1zNvSfEft1nLo19YjfNUZz/e3f4e68aa0c8133ba17042ad2514963e/html_css_js.gif)
First, break down the functionality the input requires. As a user, you have three choices. We indicate with a color whether the value is active (green), inactive (red) or no preference (grey). The input will have to animate between the options as well.
### HTML
First start with the HTML. There are three options the user can select and only one option can be selected at a time. This is a perfect use case for HTML radio inputs. Let’s write that first.
```html
...
<form>
  <fieldset>
    <legend>Would you like to receive news updates?</legend>
    <div>
      <div>
        <input id='inactive' type='radio' name='email-preference' />
        <label for='inactive'>No</label>

        <input id='no-preference' type='radio' name='email-preference' checked />
        <label for='no-preference'>No preference</label>

        <input id='active' type='radio' name='email-preference' />
        <label for='active'>Yes</label>
      </div>
    </div>
  </fieldset>
</form>
...
```
![Three way switch with HTML only](//images.ctfassets.net/w4dg3cjf42ew/1ZF5ZS5RboxdmcDA8Q3w1S/2a6c6e530c46eb96b90ff853f7d459ca/html.gif)
### CSS
I can add styling to make it look like the design with the HTML in place. So I first add some needed wrapping `div`s and classes to the existing HTML for the CSS.
```html
...
<body data-has-js='false'>
  <form>
    <fieldset>
      <legend>Would you like to receive news updates?</legend>
      <div class='switch-wrapper'>
        <div class='switch'>
          <input id='inactive' class='switch__input' type='radio' name='email-preference' />
          <label for='inactive' class='switch__label'>No</label>

          <input id='no-preference' class='switch__input' type='radio' name='email-preference' checked />
          <label for='no-preference' class='switch__label'>No preference</label>

          <input id='active' class='switch__input' type='radio' name='email-preference' />
          <label for='active' class='switch__label'>Yes</label>

        </div>
      </div>
    </fieldset>
  </form>
</body>
...
```
After this, add CSS to style the input to look like the proposed design. Then hide the labels for the inputs because you can now use CSS to indicate the chosen value. The below sample uses SCSS, a pre-processor for CSS.
```css
...
.switch__input:checked {
  background-color: var(--color-white);

  &[data-state='active'] {
    [data-has-js='false'] & {
      background-color: var(--color-green);
    }
  }

  &[data-state='inactive'] {
    [data-has-js='false'] & {
      background-color: var(--color-red);
    }
  }

  [data-has-js='true'] & {
      background-color: transparent;
  }
}
...
```

As you may have noticed, I have added an attribute to the `body` element to check whether there is JavaScript enabled because some of the styling will just be needed for the non-JavaScript version.
![Three way switch with HTML and CSS](//images.ctfassets.net/w4dg3cjf42ew/6YU8CaGMTZWoi1SIjZ9GwI/5ed6143c2c17b8133afe66d45908759a/html_css.gif)
### JavaScript
Lastly, some JavaScript is added to make the full version including an animation and containing all the design.
I'll first add an HTML element for the, to be animated, active circle that only shows-up when there is JavaScript. I also added a few data attributes to the HTML that will be used as selectors in the JavaScript
```html
...
<body data-has-js='false'>
  <form>
    <fieldset>
      <legend>Would you like to receive news updates?</legend>
      <div class='switch-wrapper' data-switch-wrapper>
        <div class='switch'>
          <input id='inactive' class='switch__input' type='radio' name='email-preference' data-state='inactive' data-switch-input />
          <label for='inactive' class='switch__label'>No</label>

          <input id='no-preference' class='switch__input' type='radio' name='email-preference' data-switch-input checked />
          <label for='no-preference' class='switch__label'>No preference</label>

          <input id='active' class='switch__input' type='radio' name='email-preference' data-state='active' data-switch-input />
          <label for='active' class='switch__label'>Yes</label>

          <span class='switch__pill' data-switch-pill />
        </div>
      </div>
    </fieldset>
  </form>
</body>
...
```
With JavaScript, I then indicate that the client has JavaScript.
```js
document.body.setAttribute('data-has-js', true);
```
After that, all I need to do is listen for inputs by the user and animate the active circle to the active input.
```js
// Needed DOM nodes
const elements = {
  switchWrapper: document.querySelector('[data-switch-wrapper]'),
  inputs: Array.from(document.querySelectorAll('[data-switch-input]')),
  pill: document.querySelector('[data-switch-pill]')
};

// Place pill over passed node
const updatePillPosition = ({target}, animate = true) => {
  const inputIndex = elements.inputs.findIndex(input => input === target);
  const inputState = target.getAttribute('data-state');

  elements.switchWrapper.dataset.animate = animate;
  elements.pill.style.transform = `translate(${inputIndex * target.scrollWidth}px, -50%)`;
  elements.switchWrapper.dataset.state = inputState || 'default';
};

// Check for default checked node

const defaultActiveInput = elements.inputs.find(input => input.checked)

if (defaultActiveInput) { updatePillPosition({target: defaultActiveInput}, false); }

// Listen for input events on the nodes
elements.inputs.forEach(input => input.addEventListener('input', updatePillPosition));
```
And that makes final result! Always consider building progressively enhanced custom inputs for the web that also work in cases where a screenreader (no CSS) is used or JavaScript is not available.
![html+css+js](//images.ctfassets.net/w4dg3cjf42ew/5WyKR8vBL5kJXTwbiu8BOF/a97d86a406297f044fb0c80638083bf8/html_css_js.gif)
## Final thoughts
Building in a progressively enhanced way is quite a bit of work. So why is it so important? By writing semantically correct HTML, we offer an accessible website for people who, for instance, use a screenreader. By making it work without JavaScript, we make our website accessible for users that can’t or won’t load JavaScript. Our website will deliver the best possible user experience for every user.
## Demo
You can find the demo and all the code of the three-way switch we worked on over at [CodePen](https://codepen.io/davebitter/full/WNeByaW).

Writing progressively enhanced custom inputs for the web

I am a Senior Front-end Consultant, Developer Advocate, and Google Developer Expert for Web. Here, you can find my resume, a collection of my articles covering a wide range of topics and get in contact.

Progressive enhancement

The backdrop-filter property lets you apply graphical effects such as blurring or colour shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.
This introduces a new tool to progressively enhance your website or web -application.  [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) has a list of all the values you can set. Today, we will take a look at one that my co-worker and CSS wizard [Syb Wartna](https://waarissyb.nl/) and I recently used in a project. This value is blur-filter.
We made a sidebar that would reveal more information after clicking on an item. It was sort of like a modal. For the past few years, there has been one technique that everybody would use. The backdrop, or overlay, would have a slightly transparent, solid, grey colour. Let’s enhance this using the new backdrop-filter!
For this example, we are going to build a simple modal. First, we’ll create the version that just displays a backdrop:
```scss

    ...

    &[data-overlay='true'] {
        &:after {
            content: '';
            z-index: 101;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba($navy, 0.4);
        }
    }

    ...

```
![default backdrop](/img/quick-bits/backdrop-default.jpg)*Default backdrop*
Then we add one simple CSS property.
```scss

    ...

    &[data-overlay='true'] {
        &:after {
            content: '';
            z-index: 101;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba($navy, 0.4);
            backdrop-filter: blur(2px);
        }
    }

    ...

```
![blurry backdrop](/img/quick-bits/backdrop-blur.jpg)*Blurry backdrop*

And there we have it. It’s a simple way to quickly enhance the feel of your website or web-application. Just add this property below your default slightly transparent backdrop and you will offer this style as soon as it hits in the browser your user is using. Obviously, this effect is more dramatic with a less empty page. [View the demo here](/examples/backdrop-filter/modal/modal.html). This demo was built with the [Mirabeau boilerplate](https://github.com/mirabeau-nl/frontend-boilerplate). The source code for this demo can be found at [this Gist](https://gist.github.com/DaveBitter/dd0cc612ce87bd6f69fc379b101b9265) if you would like to have a look at the final working code.

Backdrop Filter

The range of different type of front-end developers is vast. A t-shaped front-end designer can be the person connecting multiple disciplines in a project team. How does this work in practice and what benefits are seen?

The front-end designer in the wild

Going for React.js can introduce quite a few new challenges like server-side render support, performance, SEO and more. In this talk, I go over how I solve those challenges by using Next.js, "The React Framework for Production" to progressively enhance your SPA.

Progressive enhancement

Articles