
**Building a stars/rating component and need to support fractional values like 4.2 or 3.7 but don't want to use images? This post explains how to make fractional stars using just CSS and inline SVGs.**


I was working on displaying reviews on an ecommerce site when needing a component displaying the customers ratings. The previous version of the website used multiple png images overlayed on top of each other, contributing to unnessecary requests and [CLS](https://web.dev/cls/) issues. The criteria for the new component was:

- Should use inline SVG:s instead of images
- The number of stars should be dynamic
- Should support fractional values

## Final component

Here's the component we are building:

<Rating />

The code:

```jsx
import IconStar from 'star.svg';

const Rating = ({ value, max, className }) => {
	/* Calculate how much of the stars should be "filled" */
  const percentage = Math.round((value / max) * 100);

  return (
    <div className={styles.container}>
    {
      /* Create an array based on the max rating, render a star for each */
    }
      {Array.from(Array(max).keys()).map((_, i) => (
        <IconStar key={i} className={styles.star} />
      ))}
    {
      /* Render a div overlayed on top of the stars that should not be not filled */
    }
      <div className={styles.overlay} style={{ width: `${100 - percentage}%` }} />
    </div>
  );
}
```

The component basically consists of two parts:

1. A list of star icons based on the max rating (`max` prop)
2. An "overlay" div that will be responsible for changing the color of the stars underneath. This is the magic that makes the fractional part work. 

The overlay is just a plain div the same size as the part of the stars that should be a different color/unfilled. We calculate the width of the div by first dividing the rating with the maximum, then subtracting that value from 100.

```jsx
const percentage = Math.round((value / max) * 100);

<div className={styles.overlay} style={{ width: `${100 - percentage}%` }} />
```

Add the styles below in order to lay out the stars:

```css
.container {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.star {
  width: 18px;
  margin-right: 2px;
  display: flex;
  color: #f8d448;

  &:last-of-type {
    margin-right: 0;
  }
}

.overlay {
  background-color: black;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
```

Now the overlay is just plain black though, lets change that:

## Using mix-blend-mode to change SVG color

The final step is making the overlay div only affect the star SVGs beneath, not the background. We can do this by using the CSS `mix-blend-mode` property with the `color` value.

The color spec reads as following:

<Warning type="info">Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images.</Warning>

Tinting color images is exactly what we want to do, so let's add the property and see what happens:

```css
.overlay {
  background-color: black;
  mix-blend-mode: color;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
```

This is exactly what we want! It changes the hue and saturation of the stars, but keeps the backgrund color unchanged. You can play with the background-color to change the tint of the stars. For example if I use background-color: red instead I get a red tint instead of gray stars.

The browser support is pretty good (supported in all modern browsers) but for older browsers we can fall back to opacity instead:

```css
.overlay {
  background-color: black;
  mix-blend-mode: color;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;

  @supports not(mix-blend-mode: color) {
    opacity: 0.7;
  }
}
```

You can find the full source code [here](https://github.com/samuelkraft/samuelkraft-next/blob/master/components/blog/rating.tsx). Let me know if you found this CSS tip useful by pressing the heart below 👇


**Apple recently announced the latest version of Safari on iOS 15 with a completely new design featuring a bottom floating tab bar. What does this mean for web developers and designers?**

Safari on iOS has had a problem for a long time when it comes to building websites and web apps with bottom-aligned navigation due to the browser toolbar's dynamic height. As you scroll the toolbar disappears making any element that is fixed to the bottom of the screen look great, but as soon as you try to tap any link inside the browser toolbar appears again. 

<video playsInline autoPlay loop muted width="708" style={{ width: '100%' }}>
    <source src="/blog/safari-15-bottom-tab-bars-web/twitter-bad.mp4" type="video/mp4" />
    Sorry, your browser doesn't support embedded videos.
</video>

This makes for a really poor UX so designers and developers have mostly resorted to user "hamburger" menus instead. This is a shame as bottom tab bars increase discoverability by not hiding links behind a tap and are also easier to reach one-handed on todays large mobile devices.

## Updates with Safari 15

The new Safari 15 now has a tab bar floating at the bottom of the screen. At first it might seem like this makes it even harder to create tab bar navigations, and by browsing the web using iOS 15 it's easy to spot issues like this:

<video playsInline autoPlay loop muted width="708" style={{ width: '100%' }}>
    <source src="/blog/safari-15-bottom-tab-bars-web/pinterest-bad.mp4" type="video/mp4" />
    Sorry, your browser doesn't support embedded videos.
</video>

## Fixing Tab Bar Overlap with Safe Areas

Thankfully solving this issue is very easy by using the `env()` CSS function together with `safe-area-inset-bottom`. This API was shipped with iOS 11 making it possible to customize how websites render when using devices with a notch. By inspecting pinterests code we can see that their tab bar has a fixed position anchored to the bottom, the relevant parts look something like this:

```jsx
.tabbar {
	position: fixed;
	bottom: 0;
}
```

To respect the safe area and make sure that nothing from the browser UI overlaps let's add another bottom property with `env(safe-area-inset-bottom)` as a value. This function works like a CSS variable, returning the minimum amount of inset needed to keep your UI from overlapping with the browser's. We keep the old style rule as a fallback browsers that do not support it:

```jsx{4}
.tabbar {
  position: fixed;
  bottom: 0;
  bottom: env(safe-area-inset-bottom);
}
```

Now when scrolling nothing overlaps:

<video playsInline autoPlay loop muted width="708" style={{ width: '100%' }}>
    <source src="/blog/safari-15-bottom-tab-bars-web/pinterest-good.mp4" type="video/mp4" />
    Sorry, your browser doesn't support embedded videos.
</video>

Be sure to use `env()` every time something is anchored to the bottom of the screen or overlap will likely appear. `env()` can also be combined with css `calc()` or `min()` and `max()`, so if your design needs more padding you can add it like this:

```jsx{4}
.tabbar {
  position: fixed;
  bottom: 0;
  bottom: calc(1rem + env(safe-area-inset-bottom));
}
```

You can learn more about respecting the safe-area in [this excellent article](https://webkit.org/blog/7929/designing-websites-for-iphone-x/) published on the webkit blog or Apple's WWDC session called [Design for Safari 15](https://developer.apple.com/videos/play/wwdc2021/10029/?time=777&t=66) (Relevent part starts around 13 minutes in).

The best way to see if you got it right is to use a physical device with iOS 15, but if you don't have access to one you can download the Xcode 13 beta from [Apples developer portal](https://developer.apple.com/download/) and use an iOS 15 simulator by going to `Xcode > Open Developer Tool > Simulator`

## Tab Bar UX in iOS 15

Remember the issue in previous versions of Safari where you had to click twice when using bottom tab bars? Once for showing the safari toolbar and another tap for actually triggering your link? That is no longer an issue 🙌. Safari 15 now respects and follows links or buttons, which is a big improvement! Check out how much better Twitter's tabbar works when switching tabs on Safari 15:

<video playsInline autoPlay loop muted width="708" style={{ width: '100%' }}>
    <source src="/blog/safari-15-bottom-tab-bars-web/twitter-good.mp4" type="video/mp4" />
    Sorry, your browser doesn't support embedded videos.
</video>

Even if tab bars now technically work better than before we still have to consider the design and UX to create something that people understand and that looks good. The browser UI is now very bottom-heavy and placing more actions next to it might feel cluttered. What do you think? Let me know on twitter [@samuelkraft](https://twitter.com/samuelkraft).

I'm excited to see how everyone adapts to the new UI and if we will see a return of tab bars on the web or not.



__Framer Motion makes it super easy to create great looking animations, but what if you want to have different animations for different screen sizes? In pure css you can just use a media query but did you know that by utilising the Window.matchMedia API you can use media queries in javascript too? This way we can write responsive animations for javascript animation libraries like Framer Motion & React Spring.__

## Using media queries in javascript

The easiest way to get started with the [window.matchMedia API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) in React is to create a custom hook. A lot of UI frameworks like [Material UI](https://material-ui.com/components/use-media-query/) and [Chakra UI](https://chakra-ui.com/docs/hooks/use-media-query) already exposes such a hook, but here's what it could look like if you would write your own:

```jsx
export function useMediaQuery(query) {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const media = window.matchMedia(query);
    if (media.matches !== matches) {
      setMatches(media.matches);
    }
    const listener = () => {
      setMatches(media.matches);
    };
    media.addListener(listener);
    return () => media.removeListener(listener);
  }, [matches, query]);

  return matches;
}
```

It takes a media query string (the same way you would write it in css) and returns `true` if the query matches the current screen. If the screen is resized the value will update. Use it in code like this:

```jsx
 const isSmall = useMediaQuery('(min-width: 480px)');
```

A good idea is to set up custom hooks matching the media queries you already use in your css so you don't have to remember the pixel values (was it 479 or 480?):

```jsx
export const useIsSmall = () => useMediaQuery('(min-width: 480px)');
export const useIsMedium = () => useMediaQuery('(min-width: 768px)');

/* etc.. /*
```

## Responsive Animation with Variants

Now that we have our hooks setup lets put it all together by making an example using variants to conditionally change based on the media query.

```jsx
import { motion } from 'framer-motion'
import { useIsSmall } from 'src/hooks/utils'

const Component = () => {
	const isSmall = useIsSmall() /* or useMediaQuery('(min-width: 480px)'); */
 
	const variants = isSmall
	? {
	    animate: {
	      opacity: 1,
	      scale: 1,
				y: 0,
	    },
	    exit: {
	      opacity: 1,
	      scale: 1,
				y: 500,
	    },
	  }
	: {
	    animate: {
	      opacity: 1,
	      scale: 1,
	      y: 0,
	    },
	    exit: {
	      opacity: 0,
	      scale: 0.9,
	      y: -10,
	    },
	  };
	
	return (
		<motion.div initial="exit" animate="animate" exit="exit">Animated</div>
	);
}
```

That's it 🙌. You can also use the variable inline `<motion.div animate={isSmall ? { y: 500} : { y: 1000}} />` but I find that using it together with variants is the cleanest way most of the time.




**Ever wanted to use Notion as a blog CMS? This guide will walk you through how to setup Notion for blogging and how to access the data using Notions public API.**

Notions public API is finally here! I put together [an example repo](https://github.com/samuelkraft/notion-blog-nextjs) on creating a blog using **Notion as a CMS** hours after the release and was blown away by the interest so here's a guide explaining how to set it up yourself using the new api & Next.js.

## Getting started

If you're new to the notion API the first thing you need to do in order to start using it is to retrieve a `NOTION_TOKEN` by following their [Getting Started guide](https://developers.notion.com/docs/getting-started). When following the guide create either a table or a list as the database for your content. After finishing you should have a `NOTION_TOKEN` as well as a database id.

Create a Next.js project by following the [Next.js app setup](https://nextjs.org/learn/basics/create-nextjs-app/setup). The neat thing about using Next.js is that you can statically render all blog posts, while still updating them with *incremental static generation* making your blog super snappy ⚡️.

<Warning type="info">
  This guide assumes you are using Next.js but you can use plain javascript or whatever framework you wish, the Notion code is the same.
</Warning>

Save your `NOTION_TOKEN` and `NOTION_TABLE_ID` to a `.env.local` file in your projects root directory, then install their javascript client by running `yarn add @notionhq/client` .

## Fetching data using Notions javascript client

Let's create a new file called `lib/notion.js` which will contain all our API usage. To fetch our data we first need to create a client and supply it with the token we received earlier

```jsx
import { Client } from "@notionhq/client";

const notion = new Client({
  auth: process.env.NOTION_TOKEN,
});
```

Then we need to add the functions we need. To get a list of our posts we need to be able to query a specific database (`getDatabase`), to get the information for a specific post we need to get a specific page (`getPage`), and to actually get the content of the page we need get its blocks (`getBlocks`).   

```jsx{7-25}
import { Client } from "@notionhq/client";

const notion = new Client({
  auth: process.env.NOTION_TOKEN,
});

export const getDatabase = async (databaseId) => {
  const response = await notion.databases.query({
    database_id: databaseId,
  });
  return response.results;
};

export const getPage = async (pageId) => {
  const response = await notion.pages.retrieve({ page_id: pageId });
  return response;
};

export const getBlocks = async (blockId) => {
  const response = await notion.blocks.children.list({
    block_id: blockId,
    page_size: 50,
  });
  return response.results;
};
```

## Showing a list of posts

Add a function called `getInitialProps` to `pages/index.js` where you use the getDatabase function to fetch all posts. The response will contain a [Database Object](https://developers.notion.com/reference/database) containing information like the database title, when it was last edited as well as its properties (in our case blogposts).

<Warning type="info">
  If you're new to Next.js getStaticProps allows you to pre-render the page at build time using the props returned by the function. Combining this with the revalidate prop will allow the page to get updated in the background as new traffic comes in without the need to rebuild your entire site. Learn more about <a href="https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration">Incremental Static Generation</a>.
</Warning>

```jsx
import Link from "next/link";
import { getDatabase } from "../lib/notion";
import { Text } from "./[id].js";

export const databaseId = process.env.NOTION_DATABASE_ID

export default function Home({ posts }) {
  return (  
    <ol className={styles.posts}>
      {posts.map((post) => (
        <li key={post.id}>
          <Link href={`/${post.id}`}>
             <Text text={post.properties.Name.title} />
          </Link>
        </li>
      ))}
    </ol> 
  );
}

export const getStaticProps = async () => {
  const database = await getDatabase(databaseId);

  return {
    props: {
      posts: database,
    },
		// Next.js will attempt to re-generate the page:
    // - When a request comes in
    // - At most once every second
    revalidate: 1, // In seconds
  };
};
```

<Warning type="info">
We're using the post id as slug for sake of simplicity in this tutorial. For SEO purposes it would be better to use a prettier slug based on the title. You can do this by either manually adding a slug property to each post in Notion or generating a slug with a package like <a href="https://www.npmjs.com/package/slugify">slugify</a>.
</Warning>

Uhm, what is that `<Text />` component you might ask? Notion has a lot of rich text tools allowing you to **format** <ins>text</ins> ~~like~~ *this,* so instead of just returning a plain text value each text-like field returns an array of [Rich text objects](https://developers.notion.com/reference/rich-text) like this:

```jsx
{
  annotations: {
    bold: false,
    italic: false,
    strikethrough: false,
    underline: false,
    code: false,
    color: 'default'
  },
  href: null,
  plain_text: "Hello world!",
  text: {
    content: "Hello world!",
    link: null
  },
  type: "text"
}
```

In order to handle links and annotations let's create a component that we can re-use for all types of text:

```jsx
import styles from './text.module.css'

export const Text = ({ text }) => {
  if (!text) {
    return null;
  }
  return text.map((value) => {
    const {
      annotations: { bold, code, color, italic, strikethrough, underline },
      text,
    } = value;
    return (
      <span
        className={[
          bold ? styles.bold : "",
          code ? styles.code : "",
          italic ? styles.italic : "",
          strikethrough ? styles.strikethrough : "",
          underline ? styles.underline : "",
        ].join(" ")}
        style={color !== "default" ? { color } : {}}
      >
        {text.link ? <a href={text.link.url}>{text.content}</a> : text.content}
      </span>
    );
  });
};
```

```css
.bold {
  font-weight: bold;
}

.code {
  font-family: monospace;
  background-color: rgb(242, 242, 242);
  padding: 2px 4px;
  border-radius: 2px;
}

.italic {
  font-style: italic;
}

.strikethrough {
  text-decoration: line-through;
}

.underline {
  text-decoration: underline;
}
```

## Showing a specific post

Let's create a `pages/[id].js` page that will show the content of each blog post

```jsx
import { Fragment } from "react";
import { getDatabase, getPage, getBlocks } from "../lib/notion";
import { databaseId } from "./index.js";
import Text from 'components/text'

const renderBlock = (block) => {
  const { type, id } = block;
  const value = block[type];

  switch (type) {
    case "paragraph":
      return (
        <p>
          <Text text={value.text} />
        </p>
      );
    case "heading_1":
      return (
        <h1>
          <Text text={value.text} />
        </h1>
      );
    case "heading_2":
      return (
        <h2>
          <Text text={value.text} />
        </h2>
      );
    case "heading_3":
      return (
        <h3>
          <Text text={value.text} />
        </h3>
      );
    case "bulleted_list_item":
    case "numbered_list_item":
      return (
        <li>
          <Text text={value.text} />
        </li>
      );
    case "to_do":
      return (
        <div>
          <label htmlFor={id}>
            <input type="checkbox" id={id} defaultChecked={value.checked} />{" "}
            <Text text={value.text} />
          </label>
        </div>
      );
    case "toggle":
      return (
        <details>
          <summary>
            <Text text={value.text} />
          </summary>
          {value.children?.map((block) => (
            <Fragment key={block.id}>{renderBlock(block)}</Fragment>
          ))}
        </details>
      );
    case "child_page":
      return <p>{value.title}</p>;
    case "image":
      const src =
        value.type === "external" ? value.external.url : value.file.url;
      const caption = value.caption ? value.caption[0].plain_text : "";
      return (
        <figure>
          <img src={src} alt={caption} />
          {caption && <figcaption>{caption}</figcaption>}
        </figure>
      );
    default:
      return `❌ Unsupported block (${
        type === "unsupported" ? "unsupported by Notion API" : type
      })`;
  }
};

export default function Post({ page, blocks }) {
  if (!page || !blocks) {
    return <div />;
  }
  return (   
    <article>
      <h1>
        <Text text={page.properties.Name.title} />
      </h1>
      <section>
        {blocks.map((block) => (
          <Fragment key={block.id}>{renderBlock(block)}</Fragment>
        ))}
      </section>
    </article>
  );
}

export const getStaticPaths = async () => {
  const database = await getDatabase(databaseId);
  return {
    paths: database.map((page) => ({ params: { id: page.id } })),
    fallback: true,
  };
};

export const getStaticProps = async (context) => {
  const { id } = context.params;
  const page = await getPage(id);
  const blocks = await getBlocks(id);

  // Retrieve block children for nested blocks (one level deep), for example toggle blocks
  // https://developers.notion.com/docs/working-with-page-content#reading-nested-blocks
  const childBlocks = await Promise.all(
    blocks
      .filter((block) => block.has_children)
      .map(async (block) => {
        return {
          id: block.id,
          children: await getBlocks(block.id),
        };
      })
  );
  const blocksWithChildren = blocks.map((block) => {
    // Add child blocks if the block should contain children but none exists
    if (block.has_children && !block[block.type].children) {
      block[block.type]["children"] = childBlocks.find(
        (x) => x.id === block.id
      )?.children;
    }
    return block;
  });

  return {
    props: {
      page,
      blocks: blocksWithChildren,
    },
    revalidate: 1,
  };
};
```

That's a lot, so let's break it down starting from the bottom.

Just as on the index page we are using getStaticProps to get the data so the page can be statically rendered. In order to know which post to render we'll use the `context` parameter which contains route parameters for the current page. With the post id we can then use our two notion functions `getPage()` and `getBlocks()` and return the results as props to our component.

For performance reasons any nested child blocks won't be returned with the original call. If you need to get a complete representation including child blocks (for example toggle blocks) then you need to run the getBlocks function for each block containing the `has_children` property. When you have received all the children you can then merge the original blocks array with the childblock data (`blocksWithChildren`).


When using dynamic routes we also need to specify a list of availables routes and we'll do that with `getStaticPaths` by mapping over the pages and returning the page id's.

## Rendering Notion blocks

The `blocks` prop contains a list of all the blocks as [Block Objects](https://developers.notion.com/reference/block). We have created a `renderBlock()` function that will take care of displaying the different blocks.

```jsx
switch (type) {
  case "paragraph":
    return (
      <p>
        <Text text={value.text} />
      </p>
    );
  case "heading_1":
    return (
      <h1>
        <Text text={value.text} />
      </h1>
    );
  case "heading_2":
		…
```

Open up the index page in your browser and click a post and you should see a working page displaying your content!

## Notion API unsupported blocks

During the Notion API beta unfortunately not all block types are supported. The supported block types are:

- `paragraph`
- `heading_1`
- `heading_2`
- `heading_3`
- `bulleted_list_item`
- `numbered_list_item`
- `to_do`
- `toggle`

*Update 2020/08/24* - New media block types added:
- `child_page`
- `image`
- `embed`
- `video`
- `file`
- `pdf`
- `bookmark`

If you use a block that is not supported the page will display `❌ Unsupported block`. At this time there's no way of getting around this other than using their private API which is not recommended and can change at any time. If you need more blocks than those available right now I would wait a little bit longer until all block types are available.

## Styling

This guide intentionally comes without any styles as you would probably just rip it out anyways. If you want inspiration I put together some very bare-bones styles [in my example repo at GitHub](https://github.com/samuelkraft/notion-blog-nextjs).

## That's it!

You now have a blog powered by Notion! If you add a new blogpost or edit a post then the page will automatically get updated on the second hit thanks to Next.js incremental static regeneration. Check out my [live example here](https://notion-blog-nextjs-coral.vercel.app) and let me know if you enjoyed this post by pressing ❤️ below or pinging me [on twitter](https://twitter.com/samuelkraft)

<Image
  alt="Blog powered by Notion and Next.js"
  caption="Blog powered by Notion and Next.js"
  src={'/blog/building-a-notion-blog-with-public-api/screenshot.png'}
  width={2216}
  height={1504}
/>



Mapbox is one of the nicest way to embed custom dynamic maps in an app as there are lots of customisation options. I'm using their service on my route exploration website [Trail Router](https://routes.kevchentw.com) to display running & hiking routes from gpx files. In this post I'll go over how I used Mapbox's [static image api](https://docs.mapbox.com/help/glossary/static-images-api/) and [Node Canvas](https://github.com/Automattic/node-canvas) to create custom og sharing images like the example below:

<Image
  alt="Nyckelviken Trail Route"
  caption="Custom Open Graph Image for Nyckelviken Trail Route"
  src={'/blog/mapbox-static-image-api/nyckelviken.png'}
  width={1012}
  height={516}
/>

The code used looks like this:
```jsx
const fs = require('fs')
const path = require('path')
const gp = require('geojson-precision')
const simplify = require('simplify-geojson')
const polyline = require('@mapbox/polyline')
const { createCanvas, loadImage } = require('canvas')
const { routes } = require('../utils/gpxutils.js')

const width = 1012
const height = 516

async function generate() {
  await Promise.all(
    routes.map(async route => {
      // simplify the geojson and strip extra points from coordinates to fit mapbox's api
      const geoJson = simplify(gp(route.geoJson, 4), 0.0001)
      // Encode our geoJson to a polyline - replace any "?" with encoded value or mapbox will break
      const poly = polyline.fromGeoJSON(geoJson.features[0].geometry).replace(/\?/g, '%3F')
      // Mapbox wants a hash-less hex value
      const color = route.color.replace('#', '')
      const padding = '80, 80, 120'
      const mapboxImage = `https://api.mapbox.com/styles/v1/mapbox/outdoors-v11/static/path-5+${color}-1(${poly})/auto/${width}x${height}?padding=${padding}&access_token=${process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN}`

      const canvas = createCanvas(width, height)
      const context = canvas.getContext('2d')

      // Load the mapbox image onto a canvas
      const map = await loadImage(mapboxImage)
      context.drawImage(map, 0, 0)

      // Add gradient in the bottom so overlayed text is visible
      const gradient = context.createLinearGradient(0, height * 0.7, 0, height)
      gradient.addColorStop(0, 'rgba(0,0,0,0)')
      gradient.addColorStop(1, 'rgba(0,0,0,0.5)')
      context.fillStyle = gradient
      context.fillRect(0, height * 0.7, width, height)

      // Add image in top corner
      const logo = await loadImage('./public/logo.png')
      context.drawImage(logo, 40, 40)

      const titleY = 470
      const labelY = titleY - 45
      const distanceX = 40
      const elevationX = width * 0.25 + distanceX
      const stifaX = width * 0.5 + distanceX
      const ratingX = width * 0.75 + distanceX

      // Add titles
      context.fillStyle = '#fff'
      context.font = 'bold 30pt Proxima Nova'
      context.fillText(`${Math.round(route.distance * 10) / 10} km`, distanceX, titleY)
      context.fillText(`${Math.round(route.elevation)} m`, elevationX, titleY)
      context.fillText(`${Math.round(route.elevation / route.distance)}`, stifaX, titleY)
      context.fillText(`${route.rating}/5`, ratingX, titleY)

      // Add labels
      context.font = 'bold 16pt Proxima Nova'
      context.fillText(`DISTANCE`, distanceX, labelY)
      context.fillText(`ELEVATION`, elevationX, labelY)
      context.fillText(`STIFA`, stifaX, labelY)
      context.fillText(`RATING`, ratingX, labelY)

      const buffer = canvas.toBuffer('image/png')
      fs.writeFileSync(path.join(process.cwd(), `public/og/${route.slug}.png`), buffer)
    }),
  )
}

generate()
```

That's quite a lot to take in so let's break it down step by step!

## Setup

In order to use Mapbox static image api you first need an access token. If you don't already have one you can get one from your [account page](https://account.mapbox.com/access-tokens/). 

The [Static Image API](https://docs.mapbox.com/help/glossary/static-images-api/) allows us to request a static map by providing a couple of parameters like coordinates & zoom level, but you can also add layers like paths and geoJson. 

Here's an example of a map generated with the following code:

```js
https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/
-122.337798,37.810550,9.67,0.00,0.00/1000x600?access_token=${MAPBOX_ACCESS_TOKEN}
```

<Image
  alt="Mapbox Static Api Example image"
  src={'/blog/mapbox-static-image-api/example.png'}
  width={1000}
  height={600}
/>

First we have specified the style of the map, in this case `streets-v11`. [Their documentation](https://docs.mapbox.com/api/maps/styles/#mapbox-styles) lists all the available styles. I've mainly used the `outdoors-v11` style but you can also desig a custom one specific for your needs. 

In this example we have used specific coordinates to specify what we want rendered but we can also make our map automatically fit the bounds to whatever is displayed, like geoJson or a path with the `auto` paramter.

## Using Mapbox's static api with geoJson

Our route data is in the form of a geoJson object. Check out my article [Building a mapping platform with React and Mapbox GL](https://kevchentw.com/blog/trailroutes) for details how to parse geoJson from gpx files.

The api supports geoJson using a `geoJson=({})` parameter, however it only accepts 8,192 or fewer characters. Even after simplifying the geojson and removing redundant coordinates to get it below the limit I did not manage to get it working. Instead I opted for the [Path](https://docs.mapbox.com/api/maps/static-images/#path) parameter which looks like this and accepts an encoded polyline:

```jsx
path-{strokeWidth}+{strokeColor}-{strokeOpacity}+{fillColor}-{fillOpacity}({polyline})
```

## Encoding geoJson to polyline

To create a polyline from geoJson we can use mapbox's polyline package. In order to make the polyline a bit more lean we can also simplify it with simplify-geojson and geojson-precision.

```jsx
const gp = require('geojson-precision')
const simplify = require('simplify-geojson')
const polyline = require('@mapbox/polyline')

routes.map(async route => {
  // simplify the geojson and strip extra points from coordinates to fit mapbox's api
  const geoJson = simplify(gp(route.geoJson, 4), 0.0001)
  // Encode our geoJson to a polyline - replace any "?" with encoded value or mapbox will break
  const poly = polyline.fromGeoJSON(geoJson.features[0].geometry).replace(/\?/g, '%3F')
})
```

<Warning type="info">
  It took me a while to figure out that the api does not accept polylines containing question marks "<strong>?</strong>" as that breaks the url parameters. Be sure to replace all instances with it's encoded counterpart.
</Warning>

Another thing we need to do is remove the `#` from the color we wish to have, specify the width and height and how much padding we want.

```jsx{10-15}
const gp = require('geojson-precision')
const simplify = require('simplify-geojson')
const polyline = require('@mapbox/polyline')

routes.map(async route => {
  // simplify the geojson and strip extra points from coordinates to fit mapbox's api
  const geoJson = simplify(gp(route.geoJson, 4), 0.0001)
  // Encode our geoJson to a polyline - replace any "?" with encoded value or mapbox will break
  const poly = polyline.fromGeoJSON(geoJson.features[0].geometry).replace(/\?/g, '%3F')
  // Mapbox wants a hash-less hex value
  const color = route.color.replace('#', '')
  // Extra padding in the bottom to make space for text
  const padding = '80, 80, 120'
  const width = 1012
  const height = 516
})
```

Now let's use the polyline in the api url and we have a working map 🎉

```jsx{16}
const gp = require('geojson-precision')
const simplify = require('simplify-geojson')
const polyline = require('@mapbox/polyline')

routes.map(async route => {
  // simplify the geojson and strip extra points from coordinates to fit mapbox's api
  const geoJson = simplify(gp(route.geoJson, 4), 0.0001)
  // Encode our geoJson to a polyline - replace any "?" with encoded value or mapbox will break
  const poly = polyline.fromGeoJSON(geoJson.features[0].geometry).replace(/\?/g, '%3F')
  // Mapbox wants a hash-less hex value
  const color = route.color.replace('#', '')
  // Extra padding in the bottom to make space for text
  const padding = '80, 80, 120'
  const width = 1012
  const height = 516
  const mapboxImage = `https://api.mapbox.com/styles/v1/mapbox/outdoors-v11/static/path-5+${color}-1(${poly})/auto/${width}x${height}?padding=${padding}&access_token=${MAPBOX_ACCESS_TOKEN}`
})
```

## Adding text on the image with node canvas

In order to add metadata like distance, elevation and logo on top of the image we can use [node-canvas](https://github.com/Automattic/node-canvas). It implements the web canvas API as closely as possible and is perfect for this use case. 

If you have ever used Sketch, Photoshop or another application that uses layers you can think of canvas the same way. What is written first (bottom of the layers list in sketch) is the bottom layer, and everthing after that is stacked on top. 

<Image
  alt="Sketch layers example"
  caption="Layers in Sketch"
  src={'/blog/mapbox-static-image-api/layers.png'}
  width={1406}
  height={592}
/>

In the code below I am adding a gradient *before* I add the text, that way the gradient will be positioned beneath the text in the final image.

I have commented what each line does in the code below. 

```jsx
// Create a canvas context the same size as out mapbox image
const canvas = createCanvas(width, height)
const context = canvas.getContext('2d')

// Load the mapbox image onto a canvas
const map = await loadImage(mapboxImage)
context.drawImage(map, 0, 0)

// Add gradient in the bottom so overlayed text is visible
const gradient = context.createLinearGradient(0, height * 0.7, 0, height)
gradient.addColorStop(0, 'rgba(0,0,0,0)')
gradient.addColorStop(1, 'rgba(0,0,0,0.5)')
context.fillStyle = gradient
context.fillRect(0, height * 0.7, width, height)

// Add logo in top left corner
const logo = await loadImage('./public/logo.png')
context.drawImage(logo, 40, 40)

// Specify the positions of the text overlays
const titleY = 470
const labelY = titleY - 45
const distanceX = 40
const elevationX = width * 0.25 + distanceX
const stifaX = width * 0.5 + distanceX
const ratingX = width * 0.75 + distanceX

// Add titles
context.fillStyle = '#fff'
context.font = 'bold 30pt Proxima Nova'
context.fillText(`${Math.round(route.distance * 10) / 10} km`, distanceX, titleY)
context.fillText(`${Math.round(route.elevation)} m`, elevationX, titleY)
context.fillText(`${Math.round(route.elevation / route.distance)}`, stifaX, titleY)
context.fillText(`${route.rating}/5`, ratingX, titleY)

// Add labels
context.font = 'bold 16pt Proxima Nova'
context.fillText(`DISTANCE`, distanceX, labelY)
context.fillText(`ELEVATION`, elevationX, labelY)
context.fillText(`STIFA`, stifaX, labelY)
context.fillText(`RATING`, ratingX, labelY)

const buffer = canvas.toBuffer('image/png')
// Write the image to a specified directory
fs.writeFileSync(path.join(process.cwd(), `public/og/${route.slug}.png`), buffer)
```

That's it! Find the full source code [here](https://github.com/samuelkraft/routes/blob/master/scripts/generate-images.js) and check out a few examples of images I generated:

<Image
  alt="A-trail + Gröna Trail Route"
  caption="A-trail + Gröna Trail Route"
  src={'/blog/mapbox-static-image-api/grona_atrail.png'}
  width={1012}
  height={516}
/>

<Image
  alt="Nyckelviken Trail Route"
  caption="Nyckelviken Trail Route"
  src={'/blog/mapbox-static-image-api/nyckelviken.png'}
  width={1012}
  height={516}
/>

<Image
  alt="Booleden + Värmdöleden Trail Route"
  caption="Booleden + Värmdöleden Trail Route"
  src={'/blog/mapbox-static-image-api/booleden_varmdoleden.png'}
  width={1012}
  height={516}
/>

If you liked this post please let me know by pressing ❤️ below!


I built <a href="https://routes.kevchentw.com">Trail Routes</a> as a way to share some of the best running & hiking routes I've discovered, and in this post I will outline the build process.

## The goal
My goal was to show a list of routes I enjoy coupled with basic information like distance, elevation gain and my rating. The routes should be visible on a map, and clicking a route should display more information about it, including an elevation map. There should be a way to download each route as a gpx file.
<Warning type="info">
    A gpx file is basically an xml file consisting of coordinates that forms a route. It can also contain other information like heart rate data and elevation if created from an activity. You can transfer gpx files to most modern sport watches and get navigation features.
</Warning> 

I opened up Sketch to create a logo and a few mockups of the interface:

<Image
  alt="Trail Routes logo"
  caption="Logotype"
  src={'/blog/trailroutes/logo.png'}
  width={1416}
  height={707}
/>
<Image
  alt="Trail Routes main view mockup"
  caption="Main view"
  src={'/blog/trailroutes/trailroutes-mockup.png'}
  width={1416}
  height={707}
/>
<Image
    alt="Trail Routes detail view mockup"
    caption="Detail view"
    src={'/blog/trailroutes/trailroutes-mockup-detail.png'}
    width={1416}
    height={707}
/>

## Getting the route data
I create all my routes with Stravas Route builder tool which uses Mapbox so that seemed like a great choice for me as well. In order to display things on a Mapbox map you need the data as a geoJson object. My first idea was to use the strava API to fetch the routes I've created, which then returns the data in a mapbox-friendly format. This didn't work very well because I have created TONS of routes on Strava, and unfortunately there's no way to tag or categorise them so I started looking at alternatives. 

That's when I found Mapbox's package [toGeoJson](https://github.com/mapbox/togeojson) that takes a GPX file and converts it to geoJson, just what is needed! The code below looks at a public/gpx folder, maps over the files and pulls out the geoJson and creates a slug for each route.

```jsx
import toGeoJson from '@mapbox/togeojson'
import { DOMParser } from 'xmldom'
import path from 'path'
import fs from 'fs'

const ROUTES_PATH = path.join(process.cwd(), 'public', 'gpx')

const routes = routeFilePaths.map(filePath => {
    const source = new DOMParser().parseFromString(fs.readFileSync(path.join(ROUTES_PATH, filePath), 'utf8'))
    const geoJson = toGeoJson.gpx(source)
    const slug = filePath.replace('.gpx', '')

    return {
        geoJson, slug	
    }
})
```

## Calculate geoJson distance with Turf.js

The gpx files from Strava only contains cordinates and some basic metadata, but we're missing distance and total elevation. Luckily we can use an amazing open-source project called [Turf.js](http://turfjs.org) to do lots of advanced analysis on our geoJson. Look how easily we can calculate the total distance of the geoJson using [@turfjs/length](https://www.npmjs.com/package/@turf/length):

```jsx{5,14-15,18}
import toGeoJson from '@mapbox/togeojson'
import { DOMParser } from 'xmldom'
import path from 'path'
import fs from 'fs'
import length from '@turf/length'

const ROUTES_PATH = path.join(process.cwd(), 'public', 'gpx')

const routes = routeFilePaths.map(filePath => {
    const source = new DOMParser().parseFromString(fs.readFileSync(path.join(ROUTES_PATH, filePath), 'utf8'))
    const geoJson = toGeoJson.gpx(source)
    const slug = filePath.replace('.gpx', '')

    // Calculate distance using geoJson
    const distance = length(geoJson)

    return {
        geoJson, slug, distance
    }
})
```

## Parse elevation data from geoJson

The original gpx file from strava contains the current elevation for each point, so in order to calculate the total elevation gain we simply map over the coordinates and sum the difference between each as explained in [this article](https://www.gpsvisualizer.com/tutorials/elevation_gain.html). Credit to Taylor Callsen's [initial implemention](https://github.com/tcallsen/geoCalcLineElevation).

```jsx{9-16,19}
const routes = routeFilePaths.map(filePath => {
    const source = new DOMParser().parseFromString(fs.readFileSync(path.join(ROUTES_PATH, filePath), 'utf8'))
    const geoJson = toGeoJson.gpx(source)
    const slug = filePath.replace('.gpx', '')

    // Calculate distance using geoJson
    const distance = length(geoJson)

    // Calculate elevation gain using coordinate data
    const { coordinates } = geoJson.features[0].geometry
    let elevation = 0
    coordinates.forEach((coord, index) => {
      if (index === coordinates.length - 1) return // stop 1 point early since comparison requires 2 points
      const elevationDifference = coordinates[index + 1][2] - coordinates[index][2]
      if (elevationDifference > 0) elevation += elevationDifference
    })

    return {
        geoJson, slug, distance, elevation
    }
})
```

That's a lot of parsing and calculation! 😅 I now realized that my choice of using Next.js was a perfect fit for the project. All the parsing can be done at build time inside getInitialProps, and then I can serve a static cached version of the site for all visitors. 

## Displaying geoJson with Mapbox GL and React

I used the excellent guide from the Mapbox docs on [creating a mapbox react component](https://docs.mapbox.com/help/tutorials/use-mapbox-gl-js-with-react/). Mapbox's outdoor map is perfect for this use-case and can be accessed by setting the style to outdoors:
```jsx{3}
const map = new mapboxgl.Map({
    container: mapContainer.current,
    style: 'mapbox://styles/mapbox/outdoors-v11',
    center: [lng, lat],
    zoom,
  })
```

We want to add all our geoJson to the map when it has finished loading by mapping over the routes in a `map.on('load')` callback. 

There's two steps to displaying geoJson on the map:

1. Add the source
2. Add a layer using that source

```jsx
map.on('load', () => {
  routes.forEach((route: Route) => {
    const { slug } = route
	// 1. Add the source using the slug as unique id
    map.addSource(slug, {
      type: 'geojson',
      data: route.geoJson,
    })

    // 2. Add a layer displaying our route
    map.addLayer({
      id: slug,
      type: 'line',
      source: slug, // same id as above
      layout: {
        'line-join': 'round',
        'line-cap': 'round',
      },
      paint: {
        'line-color': 'red',
        'line-width': 4,
      },
    })
})
```

We should now have a map showing all our routes 🎉 Right now the color is hardcoded to red, in order differentiate we need to specify a color for each route. In my case I'm saving some extra metadata in a javascript file including a custom color for each:

```js{8,14}
const colors = require('tailwindcss/colors')

export const meta = {
  nyckelviken: {
    description: '…',
    rating: 5,
    location: 'Nacka · Stockholm',
    color: colors.blue[500],
  },
  hellasgarden_gula: {
    description: '…',
    rating: 5,
    location: 'Nacka · Stockholm',
    color: colors.yellow[300],
  }
}
```
```jsx{10}
map.addLayer({
  id: slug,
  type: 'line',
  source: slug,
  layout: {
    'line-join': 'round',
    'line-cap': 'round',
  },
  paint: {
    'line-color': color,
    'line-width': 4,
  },
})
```

## Updating our mapbox map with react

The final feature for our map component is to be able to click each route and the map to zoom in to just that route.
In order to get a bigger click area than just the line we added before we can add a transparent fill inside each route:

```jsx
// Add a fill layer as source for hover, or we lose our click target when inside the path
map.addLayer({
  id: `${slug}-fill`,
  type: 'fill',
  source: slug,
  paint: {
    'fill-color': 'transparent',
    'fill-outline-color': 'transparent',
  },
})
```

Then when we hover and click that element we can trigger an action, in this case updating our query.

```jsx

map.on('mouseenter', `${slug}-fill`, () => {
  // Change the cursor style as a UI indicator.
  map.getCanvas().style.cursor = 'pointer'
  // Increase width of route path
  map.setPaintProperty(slug, 'line-width', 6)
})

map.on('mouseleave', `${slug}-fill`, () => {
  map.getCanvas().style.cursor = ''
  map.setPaintProperty(slug, 'line-width', 4)
})

map.on('click', `${slug}-fill`, () => {
  const coords = route.geoJson.features[0].geometry.coordinates
  // Calculate the bounds to know where to zoom to
  const bounds = coords.reduce((b, coord) => {
    return b.extend(coord)
  }, new mapboxgl.LngLatBounds(coords[0], coords[0]))

  // Fit map to bounds/route
  map.fitBounds(bounds, {
    padding: 20,
  })
	
  // Update the query
  router.push({ query: { route: slug } })
})
```

Now we just need to remove the other routes from the map. We could do this in the onclick above - but that won't work if we link directly to a specific route (e.g. <a href="https://routes.kevchentw.com/?route=nyckelviken">https://routes.kevchentw.com/?route=nyckelviken</a>). In order to solve this we can add a useEffect instead with the current query as a dependency. Every time the route/query is updated our function will run and update the visible route on the map. The simplest way i found to remove the non-active routes was not to remove the layers but to simply update the layer's visibility to none. In order to get access to our `map` object that's only accessible in the original effect we can save it in a local state variable. 

```jsx

const router = useRouter()
const queryRoute = router.query.route

const [stateMap, setStateMap] = useState(null)

useEffect(() => {
  const map = new mapboxgl.Map({
    container: mapContainer.current,
    style: 'mapbox://styles/mapbox/outdoors-v11',
    center: [lng, lat],
    zoom,
  })
	
	setStateMap(map) // save our map to state to get acces in other useEffects

	return () => map.remove()
}, [])

useEffect(() => {
    if (queryRoute && stateMap) {
      routes.forEach((route: Route) => {
        const { slug } = route
				
		  // Set the current query route as visible
      if (slug === queryRoute) {
        stateMap.setLayoutProperty(slug, 'visibility', 'visible')
        stateMap.setLayoutProperty(`${slug}-fill`, 'visibility', 'visible')

        const coords = route.geoJson.features[0].geometry.coordinates
        const bounds = coords.reduce((b, coord) => {
          return b.extend(coord)
        }, new mapboxgl.LngLatBounds(coords[0], coords[0]))

        // Fit map to bounds/route
        stateMap.fitBounds(bounds, {
          padding: 20,
        })
      } else {
		  // Hide the rest of the routes
          stateMap.setLayoutProperty(slug, 'visibility', 'none')
          stateMap.setLayoutProperty(`${slug}-fill`, 'visibility', 'none')
        }
      })
    } else {
	  // if no selected route then show all routes and restore the zoom to intial bounds
      routes.forEach((route: Route) => {
        const { slug } = route
        if (stateMap) {
          stateMap.setLayoutProperty(slug, 'visibility', 'visible')
          stateMap.setLayoutProperty(`${slug}-fill`, 'visibility', 'visible')
          stateMap.flyTo({
            center: [lng, lat],
            essential: true,
            zoom,
          })
        }
      })
    }
  }, [queryRoute, stateMap])
```

That's it for the map component!

## Styling with Tailwind CSS

To finalise the app I added the list of routes as a sidebar and styled it with [Tailwind CSS](https://tailwindcss.com). When you click a route and the query changes I used Framer Motion to add a slide animation showing a detail view with the meta information. One issue I had was that the original list was often longer than the detail view and when simply moving it to the side it would still take up space and increase the scrollable portion of the page. The solution to this is to add a `transitionEnd` property to our animation setting the element to display none.

```jsx
<motion.div
  animate={
    queryRoute
      ? {
          x: '-30%',
          scale: 0.95,
          transitionEnd: {
            display: 'none', // Completely remove sidebar from the DOM when animation finishes
          },
        }
      : { x: 0, scale: 1, display: 'block' }
  }
  transition={{ ease: 'easeOut', duration: 0.2 }}
>
	// sidebar content
</motion.div>

{queryRoute && (
	<motion.div
	    className="w-full absolute top-0 min-h-screen bg-white -ml-5 -mr-5 px-5"
	    initial={{ x: 430 }}
	    animate={{ x: 0 }}
	    transition={{ ease: 'easeOut', duration: 0.2 }}
	  >
		// detail view content
	</motion.div>
)}
```

## Wrapping up

The last thing I did was create some nice assets, like a favicon and a meta sharing image. Check out <a href="https://routes.kevchentw.com">Trail Routes</a> and let me know if you enjoyed this write-up by pressing like below!

<Image
alt="Trail Routes og image"
caption="Sharing image"
src={'/blog/trailroutes/og.png'}
width={1012}
height={506}
/>


Parallax scrolling has gotten a bad rap, but I believe that's in part because of the very poor implementations out there. As with everything, if we're mindful and make it subtle it can help convey our message more clearly. There's a simple thing you can do to greatly improve the effect: Use a spring-based easing.

Let's take a look at the [Epic React course](https://epicreact.dev) landing page:

<video playsInline autoPlay loop muted width="710" style={{ width: '100%', maxWidth: 710, marginBottom: 20}}>
    <source src="/blog/spring-parallax-framer-motion-guide/epicreact.mp4" type="video/mp4" />
    Sorry, your browser doesn't support embedded videos.
</video>

This is an example of a parallax transition implemented the right way. If you scroll super-quickly you will still see the animation, and if you use a mouse-wheel it never stutters. This is because the animation is eased and not mapped 1:1 to the actual scroll. This way the effect looks super nice! (And most importantly, it makes sense on this landing page and helps deliver the message).

Another website that does this right is [Quill.chat](http://quill.chat), notice how when you scroll through the site you get a sense of joy when the elements smoothly slide into view with just the right velocity. Had they not eased the movement if wouldn't have felt as good.

<video playsInline autoPlay loop muted width="710" style={{ width: '100%', maxWidth: 710, marginBottom: 20}}>
    <source src="/blog/spring-parallax-framer-motion-guide/quill.mp4" type="video/mp4" />
    Sorry, your browser doesn't support embedded videos.
</video>

## I'm convinced - How to implement parallax spring easing with react?

You can implement parallax scrolling in a lot of different ways, for this example I'm using my favourite animation framework Framer Motion to create a reusable `<Parallax />` component. You can do similar things with other frameworks like react-spring or as descibed [here](https://developers.google.com/web/updates/2016/12/performant-parallaxing) by Paul Lewis & Robert Flack on the google developer blog. If you already know the basics of parallax scrolling feel free to skip to the section adding the spring easing.

Let's start by creating a component that accept children as a prop.

```tsx
import { ReactNode } from 'react'

type ParallaxProps = {
  children: ReactNode
}

const Parallax = ({ children }: ParallaxProps): JSX.Element => {
  return children
})

export default Parallax
```

Next up we'll import `useViewportScroll` from framer-motion in order to get how far on the page we have scrolled. We'll use this as the input to another framer-motion hook called `useTransform` in order to calculate our parallax values which we'll add to a `motion.div`.

## Using Framer Motion useTransform

[useTransform](https://www.framer.com/api/motion/motionvalue/#usetransform) takes an input value and a transformer, and outputs a new value. For example:

```tsx
  // The output value will always be double that of `x`.
  const y = useTransform(x, value => value * 2)
```

Lets start by using some random values to see that it's working:

```tsx{2,9-12}
import { ReactNode } from 'react'
import { motion, useViewportScroll, useTransform } from 'framer-motion'

type ParallaxProps = {
  children: ReactNode
}

const Parallax = ({ children }: ParallaxProps): JSX.Element => {
  const { scrollY } = useViewportScroll()
  const y = useTransform(scrollY, [100, 200], [0, 500])

  return <motion.div style={{ y }}>{children}</motion.div>
})

export default Parallax
```

In order to find out the correct values we need to add some calculations. The idea is that the component should be centered in it's container when we've scrolled to the middle of the screen, but offset by x pixels when scrolled in either direction.

In order to do this we need two values: what the offsetTop of our element is and the height of the screen. Let's add a ref to our element and use `useLayoutEffect` to save those values when the component is about to mount.

```tsx{1,6,9-12,16-36,39}
import { useState, useRef, useLayoutEffect, ReactNode } from 'react'
import { motion, useViewportScroll, useTransform } from 'framer-motion'

type ParallaxProps = {
  children: ReactNode
  offset?: number
}

const Parallax = ({ children, offset = 50 }: ParallaxProps): JSX.Element => {
  const [elementTop, setElementTop] = useState(0)
  const [clientHeight, setClientHeight] = useState(0)
  const ref = useRef(null)

  const { scrollY } = useViewportScroll()

  // start animating our element when we've scrolled it into view
  const initial = elementTop - clientHeight
  // end our animation when we've scrolled the offset specified
  const final = elementTop + offset

  const y = useTransform(scrollY, [initial, final], [offset, -offset])

  useLayoutEffect(() => {
    const element = ref.current
    // save our layout measurements in a function in order to trigger
    // it both on mount and on resize
    const onResize = () => {
      // use getBoundingClientRect instead of offsetTop in order to
      // get the offset relative to the viewport
      setElementTop(element.getBoundingClientRect().top + window.scrollY || window.pageYOffset)
      setClientHeight(window.innerHeight)
    }
    onResize()
    window.addEventListener('resize', onResize)
    return () => window.removeEventListener('resize', onResize)
  }, [ref])

  return (
    <motion.div ref={ref} style={{ y }}>
      {children}
    </motion.div>
  )
})

export default Parallax
```

There's a lot going on here so let's break it down.

<ol>
  <li>We've added an <em>offset</em> prop to specify how strong we want our effect to be.</li>

  <li>We create a ref that we'll use to measure our element</li>

  <li>We setup our state where we'll save elementTop and clientHeight.</li>

  <li>We add a useLayoutEffect where we set those values so we can calculate the start and end for our transformer.</li>

  <li>Finally we put it all together in the useTransform function to get our new <em>y</em> value.</li>
</ol>

## Adding spring easing with useSpring

In order to get the smooth easing we talked about earlier we need to transform our new `y` value with a spring. We can do it with the useSpring hook.

```tsx{2,21-23}
import { useState, useRef, useLayoutEffect, ReactNode } from 'react'
import { motion, useViewportScroll, useTransform, useSpring } from 'framer-motion'

type ParallaxProps = {
  children: ReactNode
  offset?: number
}

const Parallax = ({ children, offset = 50 }: ParallaxProps): JSX.Element => {
  const [elementTop, setElementTop] = useState(0)
  const [clientHeight, setClientHeight] = useState(0)
  const ref = useRef(null)

  const { scrollY } = useViewportScroll()

  // start animating our element when we've scrolled it into view
  const initial = elementTop - clientHeight
  // end our animation when we've scrolled the offset specified
  const final = elementTop + offset

  const yRange = useTransform(scrollY, [initial, final], [offset, -offset])
  // apply a spring to ease the result
  const y = useSpring(yRange, { stiffness: 400, damping: 90 })

  useLayoutEffect(() => {
    const element = ref.current
    // save our layout measurements in a function in order to trigger
    // it both on mount and on resize
    const onResize = () => {
      // use getBoundingClientRect instead of offsetTop in order to
      // get the offset relative to the viewport
      setElementTop(element.getBoundingClientRect().top + window.scrollY || window.pageYOffset)
      setClientHeight(window.innerHeight)
    }
    onResize()
    window.addEventListener('resize', onResize)
    return () => window.removeEventListener('resize', onResize)
  }, [ref])

  return (
    <motion.div ref={ref} style={{ y }}>
      {children}
    </motion.div>
  )
})

export default Parallax
```

## Parallax accessibility: useReducedMotion

When designing products with motion we have to be careful and think about people who might have problems viewing things that move around. Some people can get dizzy or nauseous. You can specify this by a setting in you operating system, for example on MacOS the setting is in "Accessibility > Reduce Motion".

Luckily there's a Media Query for this called `prefers-reduced-motion`, and a useful hook exported by framer motion called `useReducedMotion`.

If the user prefers reduced motion we will render the children directly without our parallax container:

```tsx{2,10,34-37}
import { useState, useRef, useLayoutEffect, ReactNode } from 'react'
import { motion, useViewportScroll, useTransform, useSpring, useReducedMotion } from 'framer-motion'

type ParallaxProps = {
  children: ReactNode
  offset?: number
}

const Parallax = ({ children, offset = 50 }: ParallaxProps): JSX.Element => {
  const prefersReducedMotion = useReducedMotion()
  const [elementTop, setElementTop] = useState(0)
  const [clientHeight, setClientHeight] = useState(0)
  const ref = useRef(null)

  const { scrollY } = useViewportScroll()

  const initial = elementTop - clientHeight
  const final = elementTop + offset

  const yRange = useTransform(scrollY, [initial, final], [offset, -offset])
  const y = useSpring(yRange, { stiffness: 400, damping: 90 })

  useLayoutEffect(() => {
    const element = ref.current
    const onResize = () => {
      setElementTop(element.getBoundingClientRect().top + window.scrollY || window.pageYOffset)
      setClientHeight(window.innerHeight)
    }
    onResize()
    window.addEventListener('resize', onResize)
    return () => window.removeEventListener('resize', onResize)
  }, [ref])

  // Don't parallax if the user has "reduced motion" enabled
  if (prefersReducedMotion) {
    return <>{children}</>
  }

  return (
    <motion.div ref={ref} style={{ y }}>
      {children}
    </motion.div>
  )
}

export default Parallax
```

## Wrapping up

Our finished component:

<div style={{ background: 'var(--boxBg)', padding: 100 }}>
  <Parallax>
    <p style={{background: 'var(--brand)', color: 'white', padding: 10, textAlign: 'center', borderRadius: 5, fontWeight: 700}}>Parallax</p>
  </Parallax>
</div>

We've learned how we can create a parallax effect with Framer Motion, improve it by applying a spring easing and taking care of the accesibility aspect with useReducedMotion. Check out the full source code of our Framer Motion example in my [git repo](https://github.com/samuelkraft/samuelkraft-next/blob/master/components/parallax.tsx), and make sure to ❤️ the post below if you liked it, or reach out to me on [twitter](https://twitter.com/samuelkraft) for any comments or questions!





Back in 2013 I created this [CodePen](https://codepen.io/samuelkraft/pen/Farhl) of the chat bubble UI from iOS 7's messages app. It has since received an impressive 50k views and 170+ likes, apparently people like to build chat apps 😉. In this post I'll walk you through how it works, while also improving my previous code a bit.

Here's what we're building:

<Messages />

I'm building this in a Next.js/react app with css modules & sass. If you're looking for a more bare-bones css solution check out the codepen above.

Let's start by creating a list of messages, we'll add a `sent` key to our objects in order to differentiate between you own sent messages and the received messages. Add a .shared class for each message, and another class based on the sent key.

```tsx
import cn from 'classnames'
import styles from './messages.module.scss'

const messages = [
  { text: "Hey there! What's up", sent: true },
  { text: 'Checking out iOS7 you know..' },
  { text: 'Check out this bubble!', sent: true },
  { text: "It's pretty cool!" },
  { text: "And it's in css?" },
  { text: "Yeah it's pure CSS &amp; HTML", sent: true },
  { text: "(ok.. almost, I added a tiny bit of JS to remove sibling message tails)", sent: true },
  { text: "Wow that's impressive. But what's even more impressive is that this bubble is really high." },
]

const Messages = (): JSX.Element => (
  <ol className={styles.list}>
    {messages.map(({ text, sent }) => (
      <li key={text} className={cn(styles.shared, sent ? styles.sent : styles.received)}>{text}</li>
    ))}
  </ol>
)

export default Messages
```

That's all we need for the markup, let's create our css (or scss) file and add some styling!

We start by adding some basic styles like a max-width to contain our messages, remove the default list styling and change the display to flex. We do this because then we can make our messages collapse/decrease in width based on the message length by using the `align-self` property. If all messages were block elements they would always be the same size regardless of content.

If you don't already have a theme setup this is also a good place to add some css variables for the message colors and our page background-color. We need to know our page's background-color as we're going to overlay two different elements, one of which should mimic our background to achieve our effect.

```scss
.list {
  --sentColor: #0b93f6;
  --receiveColor: #e5e5ea;
  --bg: #fff;

  display: flex;
  flex-direction: column;
  max-width: 450px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

[data-theme='dark'] {
  .list {
    --bg: #161515;
  }
}
```

<Warning type="info">
  If you don't know your background-color or if your background is an image I'm pretty sure you can accomplish the same effect with css <Link href="https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image">mask-image</Link> and a background-gradient. Let me know if this is something you'd like to see, or why not open a <Link href="https://github.com/samuelkraft/samuelkraft-next">PR</Link>?
</Warning>

There are some shared styles both sending and receiving messages should have, so let's make a .shared class. It's styles are pretty basic; we set the max-width of each message to a little bit more than half of our list width, add some padding and margin etc.

Really the only tricky part about this component are the bubble "tails". We will render them using [psuedo-elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) to not add unnecessary items to the DOM. For each tail we are using two psuedo elements, :before for the colored part and :after overlayed on top to "cut out" the colored part.

Since all tails will all have the same size and be positioned absolutely at the bottom of our bubbles let's add that to our shared class.

```scss
.shared {
  position: relative; /* Setup a relative container for our psuedo elements */
  max-width: 255px;
  margin-bottom: 15px;
  padding: 10px 20px;
  line-height: 24px;
  word-wrap: break-word; /* Make sure the text wraps to multiple lines if long */
  border-radius: 25px;

  &:before {
    width: 20px;
  }

  &:after {
    width: 26px;
    background-color: var(--bg); /* All tails have the same bg cutout */
  }

  &:before,
  &:after {
    position: absolute;
    bottom: 0;
    height: 25px; /* height of our bubble "tail" - should match the border-radius above */
    content: '';
  }
}
```

Let's continue to the specific messages, starting with the 'sent' styles. As mentioned before we want to make sure our message collapses if it's a very short one and we can do this by adding  `align-self: flex-end` . Our element will then only take up as much space as the content needs (maxing out at 255px which we set in our shared class), aligned to flex-end which in this case is right. For our receiving message we'll instead use `align-self: flex-start` as we want those aligned to the left.

## Styling our tails

If we take a closer look at the tails we're trying to accomplish we'll notice that there are basically two curved shapes. One curved shape extending from the bottom edge (the colored section, marked as blue below) and another one extending from the outer edge (our cutout/backgrund, marked as green below). Hover the message below and see how the blue creates our tail shape when overlaid with the green one.

<div style={{ padding: '50px', backgroundColor: 'var(--boxBg)', borderRadius: '5px', textAlign: 'center' }}>
  <TailBreakdown />
  <p style={{margin: 0, opacity: 0.75}}>Hover to arrange tail 👆</p>
</div>

Let's recreate these shapes with our pseudo elements. Start by setting the color of our bordered shape, then set the curve using border-radius, we can mimic the iOS one using different values for the horizontal and vertical axis. Then tweak the `right` value until it's positioned correctly.

Now we need to hide the parts that extend to the right of the bubble. We do this by almost recreating the same shape but filled with our background-color instead, and position it over the previous shape.

```scss
.sent {
  align-self: flex-end;
  color: white;
  background: var(--sentColor);

  &:before {
    right: -7px;
    background-color: var(--sentColor);
    border-bottom-left-radius: 16px 14px;
  }

  &:after {
    right: -26px;
    border-bottom-left-radius: 10px;
  }
}
```

For our received messages we do the same thing but to the left instead of to the right and change the colors.

```scss
.received {
  align-self: flex-start;
  color: black;
  background: var(--receiveColor);

  &:before {
    left: -7px;
    background-color: var(--receiveColor);
    border-bottom-right-radius: 16px 14px;
  }

  &:after {
    left: -26px;
    border-bottom-right-radius: 10px;
  }
}
```

We're almost there but there's one tiny detail left. Notice that when there are multiple messages in a row from the same person there's a tail for each message? We only want to add a tail for the most recent message in that case. Unfortunately there is no "previous sibling selector" in css so we have to go back to our markup and add a `noTail` class. We'll add the class if the next message's sent key is the same as the current message.

```typescript
{messages.map(({ text, sent }, i) => {
  const isLast = i === messages.length - 1
  const noTail = !isLast && messages[i + 1]?.sent === sent
  return (
    <li key={text} className={cn(styles.shared, sent ? styles.sent : styles.received, noTail && styles.noTail)}>
      {text}
    </li>
  )
})}
```
Back in our css we can now hide the tail when the class is applied. We can also optionally decrease the margin a bit so our messages feel more "connected".

```scss
.noTail {
  margin-bottom: 2px;

  &:before,
  &:after {
    opacity: 0;
  }
}
```
That's it! We can now display a list of nicely styled messages, and based on the "sent" key the messages will either display as sending or receiving. If there are multiple messages in a row from the same person only the most recent message will get a tail.

## ✨ Bonus: Animating our messages!

Building a chat app? We can easily animate our component with just a couple of lines of code using [Framer Motion](https://www.framer.com/motion/)!

Wrap your messages in `AnimatePresence` and then make each message a `motion.li`. Apply the `layout` prop to make our messages magically animate smoothly when messages are added or removed. Then specify how the enter animation should look like by adding the initial state (slightly offset with 0 opacity) and the entered state (reset position and full opacity). This time I'm generating the messages with [random-words](https://www.npmjs.com/package/random-words) to make sure our component works with different types of content. [See the full source code on my GitHub](https://github.com/samuelkraft/samuelkraft-next/blob/master/components/animatedmessages.tsx).

```tsx
import { motion, AnimatePresence } from 'framer-motion'
import styles from './messages.module.scss'

const transition = {
  type: 'spring',
  stiffness: 200,
  mass: 0.2,
  damping: 20,
}

const variants = {
  initial: {
    opacity: 0,
    y: 300,
  },
  enter: {
    opacity: 1,
    y: 0,
    transition,
  },
}

const Messages = (): JSX.Element => (
  <AnimatePresence>
    <ol className={styles.list}>
      {messages.map(({ text, sent }) => (
          <motion.li
            key={text}
            className={cn(styles.shared, sent ? styles.sent : styles.received)}
            initial="initial"
            animate="enter"
            variants={variants}
            layout
          >
            {text}
          </motion.li>
        ))}
    </ol>
  </AnimatePresence>
)
```

That's it! If this helped press the like button below or let me know on [twitter](https://twitter.com/samuelkraft).

<AnimatedMessages />



Despite its funny name, If you’ve ever used an iOS device you’ll recognise the [UISegmentedControl](https://developer.apple.com/documentation/uikit/uisegmentedcontrol):

<div style={{ padding: '20px', border: '1px solid var(--border)', borderRadius: '5px', textAlign: 'center' }}>
  <video playsInline autoPlay loop muted width="375" style={{ width: '100%', maxWidth: 375, marginBottom: 20}}>
      <source src="/blog/segmented-control-framer-motion/segmented-control-ios-two.mp4" type="video/mp4" />
      Sorry, your browser doesn't support embedded videos.
  </video>
  <video playsInline autoPlay loop muted width="375" style={{ width: '100%', maxWidth: 375}}>
      <source src="/blog/segmented-control-framer-motion/segmented-control-ios-five.mp4" type="video/mp4" />
      Sorry, your browser doesn't support embedded videos.
  </video>
</div>

In this post I’ll show how to recreate it for web using React and Framer Motion resulting in this (try it out by clicking below!):

<div style={{ padding: '80px 7px 50px', border: '1px solid var(--border)', borderRadius: '5px', textAlign: 'center' }}>
  <SegmentedControl items={["Upcoming", "Past"]} />
  <br />
  <SegmentedControl items={["H", "D", "W", "M", "Y"]} />
</div>

## Our stack

I’m using a Next.js/React/Typescript/SASS/CSS Modules stack but any react project works fine, as we are use Framer Motion for the animations.

## Our finished component

```tsx
import { useState } from 'react'
import { motion, AnimateSharedLayout } from 'framer-motion'
import styles from './segmentedcontrol.module.scss'

type SegmentedControlProps = {
  items: Array<string>
}

const SegmentedControl = ({ items }: SegmentedControlProps): JSX.Element => {
  const [activeItem, setActiveitem] = useState(0)
  return (
    <AnimateSharedLayout>
      <ol className={styles.list}>
        {items.map((item, i) => {
          const isActive = i === activeItem
          return (
            <motion.li
              className={isActive || i === activeItem - 1 ? styles.itemNoDivider : styles.item}
              whileTap={isActive ? { scale: 0.95 } : { opacity: 0.6 }}
              key={item}
            >
              <button onClick={() => setActiveitem(i)} type="button" className={styles.button}>
                {isActive && <motion.div layoutId="SegmentedControlActive" className={styles.active} />}
                <span className={styles.label}>{item}</span>
              </button>
            </motion.li>
          )
        })}
      </ol>
    </AnimateSharedLayout>
  )
}

export default SegmentedControl
```

```scss
/* CSS variables from my global config */
:root {
  --boxBg: #f3f3f3;
  --activeBg: #292929;
  --text: #000;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-theme='dark'] {
  --boxBg: #1f1e1d;
  --activeBg: #292929;
  --text: #fff;
}
```

```scss
.list {
  display: inline-flex;
  margin: 0;
  padding: 3px;
  list-style: none;
  background-color: var(--boxBg);
  border-radius: 10px;
}

.item {
  position: relative;
  margin-bottom: 0;
  line-height: 1;

  &:after {
    position: absolute;
    top: 15%;
    right: -0.5px;
    display: block;
    width: 1px;
    height: 70%;
    background-color: var(--border);
    transition: opacity 200ms ease-out;
    content: '';
  }

  &:last-of-type {
    &:after {
      display: none;
    }
  }
}

.itemNoDivider {
  composes: item;

  &:after {
    opacity: 0;
  }
}

.button {
  position: relative;
  margin: 0;
  padding: 7px 30px;
  color: var(--text);
  line-height: 1;
  background: transparent;
  border: none;
  outline: none;

  &:hover,
  &:focus {
    cursor: pointer;
  }
}

.label {
  position: relative;
  z-index: 2;
}

.active {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background-color: var(--inputBg);
  border-radius: 7px;
  box-shadow: var(--shadow);
  content: '';
}
```

There are a few things happening here so let’s walk it through.

First we make sure our component accepts an array of items as props, then we initialise our state to keep track of which item is selected with react `useState`.

```tsx
import { useState } from 'react'

type SegmentedControlProps = {
  items: Array<string>
}

const SegmentedControl = ({ items }: SegmentedControlProps): JSX.Element => {
  const [activeItem, setActiveitem] = useState(0)
  return ()
}

```

<Warning type="info">
In a real-world use case you might opt to keep track of the active item by the page pathname so that you can link to a specific page, in that case you'd get the current pathname with your respective routing solution and then compare it to your items. For Next.js something like:


```tsx
/* example.com/two */

import { useRouter } from 'next/router'

const { pathname } = useRouter()

const items = ['one', 'two', 'three']
{items.map(item => {
  const activeItem = pathname.contains(item)
})}

```
</Warning>

Moving on we wrap our component with `AnimateSharedLayout` from [Framer Motion](https://www.framer.com/motion/), it’s a dead simple way of animating between different elements or components. If you’ve used keynote you can think of it like the “Magic Move” transition. In this example we’re using it to animate our active background state when switching items.

We'll map over our items, get the current active tab by comparing the item index to our state, and for each item return a `motion.li`. [Motion components](https://www.framer.com/api/motion/component/) are used to specify how we want our animation to look like by passing props like `animate` (how the animation will finish), `initial` (our initial state of the animation), `exit` (how our animation looks like when the component dismounts) etc. There are also helper props for things like hover and taps like `whileHover` and `whileTap`. In this example we're using the `whileTap` prop for two things depending on if the item is active or not. If it's active, scale the active state down slightly so the user sees that the UI responds otherwise change the opacity slightly.

If showing more than 2 items, we want to show dividers between the items. We can do this in CSS by using an :after psuedo element. That way we don't need to add any extra elements to the original DOM. Let's change classNames for our motion.li depending on if the divider should be visible or not. There are two scenarios where it should not be visible: 1: when the current item is selected and 2: it's the item before the current selected one. This is because we're positioning the divider to the right of each item (`right: -0.5px`). Our last item does not need any divider so we can remove it with the `:last-of-type` selector. Let's also add an opacity transition so that the dividers fade smootly when switching items.

```tsx
return (
  <AnimateSharedLayout>
    <ol className={styles.list}>
      {items.map((item, i) => {
        const isActive = i === activeItem
        return (
          <motion.li
            className={isActive || i === activeItem - 1 ? styles.itemNoDivider : styles.item}
            whileTap={isActive ? { scale: 0.95 } : { opacity: 0.6 }}
            key={item}
          >
            …
          </motion.li>
        )
      })}
    </ol>
  </AnimateSharedLayout>
)
```
```scss
.item {
  position: relative;
  margin-bottom: 0;
  line-height: 1;

  &:after {
    position: absolute;
    top: 15%;
    right: -0.5px;
    display: block;
    width: 1px;
    height: 70%;
    background-color: var(--border);
    transition: opacity 200ms ease-out;
    content: '';
  }

  &:last-of-type {
    &:after {
      display: none;
    }
  }
}

.itemNoDivider {
  composes: item; /* css modules syntax, compiles to something like "class="item itemNoDivider" */

  &:after {
    opacity: 0;
  }
}
```



We'll add a button inside each item in order to change item on click. If the current item is the active item we add a `motion.div` for rendering the active background styles. This is where we are telling AnimatePresence which element to animate by passing a `layoutId`. It can be any string but needs to match for all elements that should share the same transition. Let's add some styling to the active div and put our item text inside a span in order to position it above the background div with CSS.

```tsx
<button onClick={() => setActiveitem(i)} type="button" className={styles.button}>
  {isActive && <motion.div layoutId="SegmentedControlActive" className={styles.active} />}
  <span className={styles.label}>{item}</span>
</button>
```

```scss
.button {
  position: relative;
  margin: 0;
  padding: 7px 30px;
  color: var(--text);
  line-height: 1;
  background: transparent;
  border: none;
  outline: none;

  &:hover,
  &:focus {
    cursor: pointer;
  }
}

.label {
  position: relative;
  z-index: 2;
}

.active {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background-color: var(--activeBg);
  border-radius: 7px;
  box-shadow: var(--shadow);
  content: '';
}
```

When clicking to change items our background will now animate magically 🪄. If you try to click the same item that's already active it will scale down slightly. If there are more than 2 items, we'll have dividers between the items that are not siblings to the active one. When switching items the dividers will fade smoothly.

## Our complete component

<div style={{ padding: '80px 7px 50px', border: '1px solid var(--border)', borderRadius: '5px', textAlign: 'center' }}>
  <SegmentedControl items={["One", "Two", "Three"]} />
</div>

The full source code is [available on my GitHub](https://github.com/samuelkraft/samuelkraft-next/blob/master/components/segmentedcontrol.tsx).

Creating transitions is super fun with Framer Motion and I am especially excited for the possibilities around AnimatedSharedLayout. It makes it extremely easy to create fluid interfaces and I'll be showing more examples of this in the future!

If this helped press the ❤️ below or let me know on [Twitter](https://twitter.com/samuelkraft)



How you tried to automate any daily tasks of your programming? You should!

A git workflow I do every day is code something, stash it, checkout latest master, create a new branch, push my new code and create a mr/pr for it. This gets tedious over time given I usually do it 5+ times a day. [Git aliases](https://git-scm.com/book/en/v2/Git-Basics-Git-Aliases) to the rescue!

My workplace uses gitlab and they support [push options](https://docs.gitlab.com/ee/user/project/push_options.html), one of which is creating a Merge Request (Pull Request equivalent for GitHub). Thanks to this you can easily create a Gitlab merge request using the CLI. Let me present you the alias `git newmr`, allowing you to do all of the above things with one command!

```bash
git config --global alias.newmr "!f() { git stash save && git checkout master && git pull && git checkout -b $1 && git stash apply && git add . && git commit -m $1 && git push -u origin HEAD -o merge_request.create; }; f"
```

I can trigger the command with `git newmr <branchname>` and it:

1. Stashes the current changes
2. Checks out and pulls the latest master branch
3. Creates a new branch based on `<branchname>`
4. Applies the stash
5. Commits changes
6. Pushes the new branch as a remote
7. Creates a PR/MR

At my workplace we use [Jira](https://www.atlassian.com/software/jira) for issue tracking, and by setting the branch name to the issue number the issue will automatically close on jira when the branch is merged. Example: `git newmr TL-1337`.

## Creating your own

Creating a custom [git alias](https://git-scm.com/book/en/v2/Git-Basics-Git-Aliases) is super easy. Looking at the example on the linked page adding a “unstage” alias is as easy as:

```bash
git config --global alias.unstage 'reset HEAD --'
```

In our case we want do do a lot of different things and pass parameters and that's were basic git aliases start to limit us. Luckily there is a solution to this!

## Escaping to the shell

We can access the shell by using the ! (bang). We can now have a lot more possibility including multiple commands and passing parameters. Let's add the commands we're looking for based on the list above. $1 means the first parameter we pass, so let's add it as our branch name and commit message. The -o option in our git push is gitlabs push option, in this case we’re using it to create a merge request.

```bash
git config --global alias.newmr "!f() { git stash save && git checkout master && git pull && git checkout -b $1 && git stash apply && git add . && git commit -m $1 && git push -u origin HEAD -o merge_request.create; }; f"
```

After running the command above you can use it with `git newmr <branch_name>` ✌️✨

## Adopting it for GitHub

If you are using GitHub you can can use [their cli](https://cli.github.com/manual/gh_pr_create) instead of push options for creating the pull request with `gh pr create`.

First install the GitHub cli with brew

```bash
brew install gh
```

Then add our alias, note that I've  renamed it to `git newpr` to separate it from the gitlab version.

```bash
git config --global alias.newpr "!f() { git stash save && git checkout master && git pull && git checkout -b $1 && git stash apply && git add . && git commit -m $1 && git push -u origin HEAD && gh pr create; }; f"
```

## Editing you aliases or troubleshooting

All your aliases are stored in the global git config located in `~home/<username>/.gitconfig`. My complete file now looks like this:

```bash
[user]
  name = Kuan-Yin Chen
  email = samuelkraft@me.com
[alias]
  newmr = "!f() { git stash save && git checkout master && git pull && git checkout -b $1 && git stash apply && git add . && git commit -m $1 && git push -u origin HEAD -o merge_request.create; }; f"
  newpr = "!f() { git stash save && git checkout master && git pull && git checkout -b $1 && git stash apply && git add . && git commit -m $1 && git push -u origin HEAD && gh pr create; }; f"
```

Do you have any other tips for custom aliases? Let me know on [Twitter](https://twitter.com/samuelkraft)!



Click around on this webpage and you'll notice a small transition between each page. In this post I'll show you how to create this page transition using Framer Motion.

## Let's get started

We'll start by installing framer motion

```bash
yarn add framer-motion
```

Then create a new component, PageTransition.tsx to house our transition. We want to animate any children of this component so we'll pass children as a prop.

```tsx
import { ReactNode } from 'react'

const PageTransition = ({ children }: { children: ReactNode }): JSX.Element => <div>{children}</div>

export default PageTransition
```

Use this component as a wrapper to any pages you want to animate. In my case I'll add it to my [Page component](https://github.com/samuelkraft/samuelkraft-next/blob/master/components/page.tsx#L29), which sets the layout and shows my footer on all pages.

```tsx{5}
const Page = ({ children }: PageProps): JSX.Element => (
  <div className={styles.container}>
    <Header />
    <main className={styles.main}>
      <PageTransition>{children}</PageTransition>
    </main>
    <Footer />
  </div>
)
```

Framer motion have a couple of different apis to use, and since we want to animate the entry of our children we'll use [AnimatePresence](https://www.framer.com/api/motion/animate-presence/) and [motion components](https://www.framer.com/api/motion/component/). AnimatePresence will animate components when they are added or removed from the React tree. Let's replace our placeholder div with AnimatePresence and nest a motion component that will contain our animation logic.

```tsx
import { ReactNode } from 'react'
import { AnimatePresence, motion } from 'framer-motion'

const PageTransition = ({ children }: { children: ReactNode }): JSX.Element => (
  <AnimatePresence>
    <motion.div>
      {children}
    </motion.div>
  </AnimatePresence>
)

export default PageTransition
```

[Motion components](https://www.framer.com/api/motion/component/) are used to specify how we want our animation to look like by passing props like animate (how the animation will finish), initial (our initial state of the animation), exit (how our animation looks like when the component dismounts) etc.

As an example, passing these values we can animate our component from hidden to visible:

```tsx
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />
```

In our specific case we want to animate the entry of the page as if it was sliding up. We can do this by changing our initial prop's y value, and then resetting it in animate.

```tsx
<motion.div initial={{opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }}>
```

Navigate to a different page and our animation is working! However the transition needs some love. Framer motion automatically applies a transition based on what you're animating, as an example if you're just animating opacity it's automatically an easing and in the case of transforms it uses a spring. Let's change our transition by applying our own custom easing function. I recommend [cubic-bezier.com](http://cubic-bezier.com) as a great interactive website where you can create your own easings. We want our transition to start fast and then ease out so let's add a transition property with a duration and our custom easing:

```tsx
<motion.div
  initial={{opacity: 0, y: 8 }}
  animate={{
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.4,
      ease: [0.61, 1, 0.88, 1],
    }
  }}
>
```

Now the transition feels a lot better ✌️.

## Improving organisation

We can improve this code further by using framer [variants](https://www.framer.com/api/motion/component/#animationprops.variants), it allows us to keep our animation logic outside out render function in an object organised by name.

Let's create a variable and add our logic. We can name our variants whatever we want, in this case I'll call them 'initial' and 'enter'.

```tsx
const variants = {
  initial: {
    opacity: 0,
    y: 8,
  },
  enter: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.4,
      ease: [0.61, 1, 0.88, 1],
    },
  },
}
```

In our motion component we'll then pass our variant variable and can then simply reference our variant names in intial & animate:

```tsx
<motion.div initial="initial" animate="enter" variants={variants}>
  {children}
</motion.div>
```

Our complete final example now looks like this:
```tsx
import { ReactNode } from 'react'
import { AnimatePresence, motion } from 'framer-motion'

const variants = {
  initial: {
    opacity: 0,
    y: 8,
  },
  enter: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.4,
      ease: [0.61, 1, 0.88, 1],
    },
  },
}

const PageTransition = ({ children }: { children: ReactNode }): JSX.Element => (
  <AnimatePresence>
    <motion.div initial="initial" animate="enter" variants={variants}>
      {children}
    </motion.div>
  </AnimatePresence>
)

export default PageTransition
```

Feel free to play with transitions and easings, maybe add an exit animation as well? As you've noticed framer motion makes it super easy to create fun and performant transitions. 👌



My site is a place to learn and try new tech, so after seeing Lee Robinsons post on [Using the Spotify API with Next.js](https://leerob.io/blog/spotify-api-nextjs) this was definitely something I wanted to try out. The goal was to add a "Now playing" widget to the footer showing what I'm currently listening to on Spotify.

A few years back I purchased the first version of  Apple Watch, and I remember that the "Now playing" complication had a very pleasant animation with "bars" jumping up and down. This tutorial shows how to create a similar animation perfect for visualizing music. This is what we're building: (psst, if I'm listening to music right now you can watch a live example in the footer…)

<div style={{ padding: '50px', backgroundColor: 'var(--boxBg)', borderRadius: '5px', textAlign: 'center' }}>
  <NowPlayingIcon />
</div>

## Let's get started

This animation is written in css modules with sass in a Next.js/Typescript project but can easily be adjusted to pure css by not using nesting & creating unique classes.

Let's start by creating a wrapper div that will contain our bars, then we'll add a span tag for every bar:

```tsx
import styles from './nowplaying.module.scss'

<div className={styles.icon}>
  <span />
  <span />
  <span />
</div>
```

We'll add some containing styles to our wrapper element and style each bar:

```scss
.icon {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 13px;
  height: 13px;

  span {
    width: 3px;
    height: 100%;
    background-color: orange;
    border-radius: 3px;
    content: '';
  }
}
```
Which renders:
<div style={{ padding: '50px', backgroundColor: 'var(--boxBg)', borderRadius: '5px', textAlign: 'center' }}>
  <div style={{ position: 'relative', display: 'inline-flex', justifyContent: 'space-between', width: 13, height: 13 }}>
    <span style={{width: 3, height: '100%', backgroundColor: 'var(--brand)', content: '', borderRadius: 3 }} />
    <span style={{width: 3, height: '100%', backgroundColor: 'var(--brand)', content: '', borderRadius: 3 }} />
    <span style={{width: 3, height: '100%', backgroundColor: 'var(--brand)', content: '', borderRadius: 3 }} />
  </div>
</div>

To make our bars jump we'll create a keyframe animation, transforming each bar's scaleY up and down indefinitely and apply it to our bars.

<Warning>Because our bars have border-radius set, the radius will scale as well. This isn't ideal but I feel like it's a fair trade-off instead of animating the height in order to keep our animation at 60fps. <Link href="https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/">Read more about high performance animations</Link></Warning>
<br />

```scss
@keyframes bounce {
  10% {
    transform: scaleY(0.3); /* start by scaling to 30% */
  }

  30% {
    transform: scaleY(1); /* scale up to 100% */
  }

  60% {
    transform: scaleY(0.5); /* scale down to 50% */
  }

  80% {
    transform: scaleY(0.75); /* scale up to 75% */
  }

  100% {
    transform: scaleY(0.6); /* scale down to 60% */
  }
}

span {
  width: 3px;
  height: 100%;
  background-color: orange;
  border-radius: 3px;
  animation: bounce 2.2s ease infinite alternate;
  content: '';
}
```

The infinite property basically tells our animation to keep going forever, and alternate is the short-hand for [animation-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction) saying that the animation should be played forwards first, then backwards keeping our animation smooth.

<div style={{ padding: '50px', backgroundColor: 'var(--boxBg)', borderRadius: '5px', textAlign: 'center' }}>
  <div style={{ position: 'relative', display: 'inline-flex', justifyContent: 'space-between', width: 13, height: 13 }}>
    <span style={{width: 3, height: '100%', backgroundColor: 'var(--brand)', content: '', borderRadius: 3, animation: 'bounce 2.2s ease infinite alternate' }} />
    <span style={{width: 3, height: '100%', backgroundColor: 'var(--brand)', content: '', borderRadius: 3, animation: 'bounce 2.2s ease infinite alternate'  }} />
    <span style={{width: 3, height: '100%', backgroundColor: 'var(--brand)', content: '', borderRadius: 3, animation: 'bounce 2.2s ease infinite alternate'  }} />
  </div>
</div>

We have a few problems though. First, the bars are scaling from the center instead of the bottom. We can solve this by adding a transform-origin of bottom:

```scss
span {
  width: 3px;
  height: 100%;
  background-color: orange;
  border-radius: 3px;
  transform-origin: bottom;
  animation: bounce 2.2s ease infinite alternate;
  content: '';
}
```

<div style={{ padding: '50px', backgroundColor: 'var(--boxBg)', borderRadius: '5px', textAlign: 'center' }}>
  <div style={{ position: 'relative', display: 'inline-flex', justifyContent: 'space-between', width: 13, height: 13 }}>
    <span style={{width: 3, height: '100%', backgroundColor: 'var(--brand)', content: '', borderRadius: 3, animation: 'bounce 2.2s ease infinite alternate', transformOrigin: 'bottom' }} />
    <span style={{width: 3, height: '100%', backgroundColor: 'var(--brand)', content: '', borderRadius: 3, animation: 'bounce 2.2s ease infinite alternate', transformOrigin: 'bottom' }} />
    <span style={{width: 3, height: '100%', backgroundColor: 'var(--brand)', content: '', borderRadius: 3, animation: 'bounce 2.2s ease infinite alternate', transformOrigin: 'bottom' }} />
  </div>
</div>

Now our bars are animating in height but aligned to the bottom! The last thing we need to do is change so that they are not animating at the same time. We want each bar to start animating at a different time so we'll reach for the animation-delay property. But we can't simply delay each bar, because then the animation would't look good the first few seconds. If we add a negative value to animation-delay, the animation will begin immediately but partway through its cycle. From [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay):

> For example, if you specify -1s as the animation delay time, the animation will begin immediately but will start 1 second into the animation sequence.

Let's add different animation-delays to our bars with the :nth-of-type() selector:

```scss
span {
  &:nth-of-type(2) {
    animation-delay: -2.2s; /* Start at the end of animation */
  }

  &:nth-of-type(3) {
    animation-delay: -3.7s; /* Start mid-way of return of animation */
  }
}
```

<div style={{ padding: '50px', backgroundColor: 'var(--boxBg)', borderRadius: '5px', textAlign: 'center' }}>
  <NowPlayingIcon />
</div>

Voila! We now have a smooth working animation, perfect for building a music widget like the one on this website or similar! Check out the [full source code on GitHub](https://github.com/samuelkraft/samuelkraft-next/blob/master/components/nowplaying.module.scss).



When deciding to build a website in 2021 there's a bit of a double edged sword, the choices are really endless, with new frameworks and tools getting released almost daily. For this website I wanted to try out [Next.js](https://nextjs.org), a javascript framework built on React that handles all the hard parts about server side rendering & configs. (If you've ever debugged webpack configs you'll appreciate not having to worry about that stuff anymore).

The reason I chose Next.js is how easily you can create really performant websites. With [getStaticProps](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) you can build super fast completely static pages which can also update periodically without needing to rebuild your whole site. In getStaticProps you can call any type of api or fetch data from the filesystem (like this blog), and then forward the data as props to your component. getStaticProps is run at build-time so the visitors will always get served a fast static page.

```js
export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
    // Next.js will attempt to re-generate the page:
    // - When a request comes in
    // - At most once every second
    revalidate: 1, // In seconds
  }
}
```

My initial idea for this website was to have four sections:

- Portfolio
- About me
- Blog
- Book reviews

I knew I wanted to build the blog based on MDX and the Next.js team have a really good [example repo](https://github.com/vercel/next.js/tree/canary/examples/with-mdx-remote) settings this up so I won't go through that part in further detail.

## Fetching data from Notion

Last year I started using [Notion](https://www.notion.so/) and I've grown very fond of it. It's now pretty much my [second brain](https://email.aliabdaal.com/issues/how-to-build-a-second-brain-271393), containing everything from work related things to personal health goals. I read a lot of books which I've just started reviewing and add thoughts to in Notion. It's setup as a simple table containing some pages with reviews. Why not share this on my website?

<Image
  alt="Books section in Notion"
  caption="My books section in Notion"
  src={'/blog/building-my-personal-website-with-nextjs-backed-by-notion/books-table.png'}
  width={1672}
  height={700}
/>

Notion doesn't have a public api ([yet](https://www.notion.so/api-beta)), but we can use an unofficial wrapper called [notion-api-worker](https://github.com/splitbee/notion-api-worker) or roll your own thing like Guillermo Rauch does [here](https://github.com/rauchg/blog/blob/master/lib/notion.js).

<Warning>Note: notion-api-worker uses notion's private api which could change whenever - use at your own risk</Warning>

You can host the api yourself or use the hosted one provided by splitbee like we'll be doing in the example below. Loading our list of books is as simple as creating a new file inside our pages folder, adding getStaticProps and calling the id of our table.

```jsx
export async function getStaticProps() {
  const books = await fetch('https://notion-api.splitbee.io/v1/table/<NOTION_TABLE_ID>').then(res => res.json())

  return {
    props: {
      books,
    },
  }
}
```

<Warning>
  Note: Using their hosted api will only work on published notion pages. Publishing your page on notion will obviously make it public to
  everyone. If you're not ok with keeping non-finished stuff public you can access private pages by adding your NOTION_TOKEN as described{' '}
  <Link href="https://github.com/splitbee/notion-api-worker#authentication-for-private-pages">here</Link>
</Warning>

Our books prop will contain a list of items containing all properties of your subpages. In my example I have a few properties like author, rating, date finished, genres etc.

<Image
  alt="A book in Notion"
  caption="Book properties in Notion"
  src={'/blog/building-my-personal-website-with-nextjs-backed-by-notion/book-properties.png'}
  width={1330}
  height={1052}
/>

Which maps to these types:

```jsx
export type Book = {
    Author: string
    Date: string
    Fiction: boolean
    Genres: Array<string>
    Name: string
    Rating: number
    Published: boolean
    Image: Array<{
        name: string
        rawUrl: string
        url: string
    }>
    Link: string
    id: string
}
```

To render our list of books we'll map over all the books and add some styling:

```jsx
import Link from 'next/link'
import Image from 'next/image'
import Rating from 'components/rating'
import slugifiy from 'slugify'
import styles from './books.module.scss'

<ul className={styles.grid}>
    {books.map(({ Name: title, Author: author, Rating: rating, Image: image, id }) => {
        const slug = slugifiy(title, { lower: true })
            return (
                <li className={styles.book} key={id}>
                    <Link href={books/${slug}}>
                        <a>
                            <Image src={image[0].url} width={218} height={328} className={styles.cover} />
                            <strong className={styles.title}>{title}</strong>
                            <p className={styles.author}>{author}</p>
                            <Rating rating={rating} />
                        </a>
                    </Link>
                </li>
            )
    })}
</ul>
```

We can use Next/Image in order to automatically render an optimised image. When building our specific book pages which will show our reviews and notes I'd like to have pretty slugs instead of using the notion id directly. We can do this either by adding a slug property directly in notion, or use a package like slugify to generate one for us.

For building our book pages we'll use [Next.js dynamic routes](https://nextjs.org/docs/routing/dynamic-routes). We can do this by matching our folder stucture to our url structure. For this example we'll create a "book" folder inside "pages" and create a new file called [slug].js.

```jsx
pages/book/[slug].js → /boom/:slug (/book/vagabonding)
```

Inside [slug].js we need to specify exactly which slugs we have. We do this with the function [getStaticPaths](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation). We'll fetch our books table like before, mapping over the values to create list of possible paths including our custom slugs.

```jsx
export const getStaticPaths: GetStaticPaths = async () => {
    const bookRes = await fetch(https://notion-api.splitbee.io/v1/table/[NOTION_TABLE_ID])
    const bookData = await bookRes.json()
    const paths = bookData.map(b => /books/${slugify(b.Name, { lower: true })})
    return {
        paths,
        fallback: false,
    }
}
```

Moving on to getStaticProps we need to get our list of books again, in order to find out the notion page id for our specific slug. We can get our current page slug from context, which is the first parameter of the function. We'll use it to find the specific book from our list and then fetch that books details by it's id

```jsx
export const getStaticProps: GetStaticProps = async context => {
    const bookRes = await fetch(https://notion-api.splitbee.io/v1/table/[NOTION_TABLE_ID])
    const bookData = await bookRes.json()

    if (!bookData) {
        return {
            notFound: true,
        }
    }

    const { slug } = context.params
    const book = bookData.find(b => slugify(b.name, { lower: true }) === slug)

    const pageRes = await fetch(`https://notion-api.splitbee.io/v1/page/${book.id}
    const pageData = await pageRes.json()

      return {
        props: {
          book,
          page: pageData,
        },
        revalidate: 1,
      }
    }
```

The pageData variable contains json which you can render however you want, or you can simply use the [react-notion](https://github.com/splitbee/react-notion) package created by the same authors as notion-api-worker.

```jsx
import 'react-notion/src/styles.css'
import { NotionRenderer } from 'react-notion'

export default ({ pageData }) => (
  <div style={{ maxWidth: 768 }}>
    <NotionRenderer blockMap={pageData} />
  </div>
)
```

This will in turn render your content pretty much exactly like it appears in Notion. What's really great is that thanks to Next.js static rendering this page will be much faster than notion itself 😅

If you want to tweak the styling simply wrap NotionRenderer in a div and apply any custom styling. On my website I'm using this to tweak a few font-sizes and font-weights and set the text color to a custom variable so my site works in dark mode.

```css
.post {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    li,
    ol {
        color: var(--text);
}
```

That's it, check out an example of this on [/books](/books) and [/books/vagabonding](/books/vagabonding) or the source code available on [GitHub](https://github.com/samuelkraft/samuelkraft-next).

Let me know if you have any questions or feedback by emailing samuelkraft [at] me.com.

✌️



My personal website has taken quite a few shapes over the years. With the rise of simple website creators like squarespace or even dribbble portfolios you could ask yourself as a frontend dev; Do you even need to build your own website today? What is a personal website for?

The primary use-case is normally to show your portfolio and previous work to showcase your skills and provide easy access to contact information. A personal website can be just that, but it can also be something more. A playground for experimentation, a place to try new techniques, learn new tools, really anything you want. As Brian Lovin stated in [Incrementally correct personal websites](https://brianlovin.com/overthought/incrementally-correct-personal-websites):

> If you've been struggling with the looming task of redesigning your personal website from scratch, or rebuilding your portfolio after years of neglect, maybe it's time to approach things from a different angle the next time around.

This website's goal is just that. To be a living place for me to experiment with the latest techniques, share things I've learned with the community (check out [/books](/books) and this blog) and showcase what I do.

## A brief history

My first personal website was created back in 2012, it used **tumblr** as a cms (hello old, samuelkraft.tumblr.com) and was my first foray into creating custom tumblr themes. Learning this skill then enabled me to create a whole bunch of tumblr themes, including the first version of my wifes blog, [https://emmasjulblogg.se](https://emmasjulblogg.se) (swedish, now migrated to wordpress on digitalocean) which is now her full time job. My site now consisted of a simple visual list of work.

<Image
  alt="Personal website version 2012"
  caption="Personal website version 2012"
  src={'/blog/the-evolving-personal-website/samuelkraft-2012.png'}
  width={400}
  height={300}
/>

Growing tired of tumblr's branded url the next version was a pure html/css site hosted on a "real" hosting provider with my first domain: **samuelkraft.me**. At this time I focused most of my energy posting work on [dribbble](https://dribbble.com/samuelkraft) leading my website to a very minimal design including just social links and contact information. Unfortunately this one did not convert very well, so now I had a good reason to redesign it again 😉

<Image
  alt="Personal website version 2013"
  caption="Personal website version 2013"
  src={'/blog/the-evolving-personal-website/samuelkraft-2013.png'}
  width={400}
  height={300}
/>

Somewhere along here my website got redesigned at least twice, but I can't find any of those assets so let's fast forward to 2018. The new design put my work front and center, solving the issue of the previous one. This is the time I realized that the static nature of my personal website would be a perfect fit for **GitHub pages**. I previously purchased my domain at my hosting provider, but constant price increases made me annoyed so now I dropped them completely and bought and switched to [kevchentw.com](http://kevchentw.com) some place else instead.

<Image
  alt="Personal website version 2018"
  caption="Personal website version 2018"
  src={'/blog/the-evolving-personal-website/samuelkraft-2018.png'}
  width={2698}
  height={1634}
/>

I wanted to do something more though. I wanted my website to be more dynamic, to update more often and to be a place I can share whatever I wish. As an example I read a lot of books, and I've recently started writing reviews & summaries of them in order to remember what I've read and to make sure I really understand it. It seemed like the perfect thing to publish to my personal website. If it helps me it will probably help someone else. You can find these on [/books](/books).

Around this time javascript frameworks started getting lots of attention, and my work started to include them more and more. My personal website did not change however, what's the point in over-architecting ones personal website with a bloated js framework when one can simply host a bunch of static files? Fast forward to 2020 [Next.js](https://nextjs.org) have pretty much solved that problem. What's great about Next.js is that while based on React, it can build completely static websites including updating them on the fly periodically. This means you can ship a fast static website to the end user while still getting all the benefits and interactivity of a js framework. Couple this with [Vercel](https://vercel.com), you have dead simple hosting and amazing dev experience included. Of all the versions over the years, my current one is definitely the most technical but it has been the easiest one to build and deploy. I've summarized my experience building this version in my post [Building My Personal Website with Next.js backed by Notion](/blog/personal-website-with-next-and-notion) where I go deeper on technical details.

<Image
  alt="Personal website version 2021"
  caption="Personal website version 2021"
  src={'/blog/the-evolving-personal-website/samuelkraft-2021.png'}
  width={2584}
  height={1628}
/>

If I look back at my personal websites over the years, every new version has resulted in me learning new techniques and tools and this is for me what it's all about. This version of my personal website is my playground. It's where I can learn and keep improving. It's where I can give back to the community what I've learned. It's where I can show my work. It's [kevchentw.com](http://kevchentw.com) v2021.
