Thomas Osmonson is a staff product engineer based in the midwest.

About

Thomas Osmonson is a staff engineer based in the midwest.

A staff product engineer with an affinity for clouds, slow moments, the wilderness, and light.

Thomas Osmonson

A staff engineer working to help build the user owned internet. With an affinity for clouds, slow moments, the wilderness, and light.

A small batch vodka hand distilled in Northeast Minneapolis.

Outpost Vodka was the first spirit to come out of Wander North Distillery, located in the arts district of Northeast Minneapolis. They believe in using locally sourced ingredients to craft high-quality spirits. You might call that “grain to glass.” They call it good sense.

I designed two versions of the artwork and packaging for the spirit, a clear, silkscreened design and a dark, paper label for their smaller bottles.

A micro-distillery's first craft spirit.

Outpost Vodka

Plotly creates leading open source tools for composing, editing, and sharing interactive data visualization via the Web.

Plotly is a technical computing company headquartered in Montreal, Canada. They are transforming how scientists, engineers, and business analysts visualize data through precedent setting open-source software. 

I have worked with Plotly for a few years. I have implemented designs for their marketing pages, designed and developed websites for their conferences, and assited with their documentation & support systems.

Visualize Data, Together.

Plotly

An encrypted cryptocurrency portfolio management tool.

Coins is an encrypted cryptocurrency portfolio management tool created on top of Blockstack. Built from the ground up to measure your performance at varying scales, from fine-grain to high-level insights. I lead the branding, design, and frontend development (UI engineering) of this project with my good friend Chase Wackerfuss.

Coins

Album artwork for a band from Duluth, MN.

Many of my best friends are musicians. While I have a deep love for music, I myself have very little musical ability (outside of playing the didgeridoo). In an effort to contribute to the musical renaissance that my friends are a part of, I have designed some art for a few of their projects. In addition to the design, I have done the photography for a few of these albums. 

This is the album artwork for the first EP, everything breaks, from paloma paloma, a group based out of Duluth, Minnesota.

You can listen to their EP here: palomapaloma.bandcamp.com

Everything breaks.

Paloma Paloma

Tamarack & Co is my photography studio based out of Minneapolis, MN.

Tamarack & Co. is the name I operate my photography studio under. The studio has a primary focus in street and travel photography. The name comes from my favorite tree, Larix laricina, or more commonly known as the Tamarack.

I strive to capture authentic moments that unfold in front me wherever I might be. I wanted to create an online portfolio that would render quickly without sacrificing image quality.

A photography studio.

Tamarack & Co

During my teenage years, I spent a lot of time both watching Star Trek and playing on the computer. These are pieces of digital art I did pre-2012.

“I... a universe of atoms, an atom in the universe.”

Space Art

a publisher's emblem or imprint, usually on the title page of a book.

a statement at the end of a book, typically with a printer's emblem, giving information about its authorship and printing.

What is this, why is it here, and how was it made?

hide

Colophon

A collection of frontend development, visual design, and photography projects.

show

Select Work

Throw me a line, say hey.

Contact

One of the oldest autumn festivals in Minnesota.

Sever's Fall Festival is one of the oldest autumn festivals in Minnesota. They are most known for their corn maze which has a different theme each year. In 2016 they started an initiative to rebrand themselves, moving away from being only known as a corn maze to being known as the fall festival they are.

I refreshed their branding and designed and developed a new website for them.

The Midwest's original Fall Festival.

Sever's Fall Festival

A product that combines a CMS, CRM and event management tool.

Symposia is an event management platform that I helped create. It has a focus on being more configurable and customizable than other off-the-shelf products to manage events. I was the lead designer, front-end developer, and I created the name and branding associated with the product. 

A headless event management platform.

Symposia

A custom designed and developed email template.

IDUN is a modern boutique storefront that offers collections from MYKITA, Young Frankk, Le Mont St. Michel and others. They wanted to up their emails to the next level after a period of rapid growth in popularity. They had been using various off-the-shelf templates through their email platform but felt that it was lacking and did not provide them with enough control.

I took their existing brand and extended it into a 100% custom email template with abstracted out components to provide them with as much flexibility they needed.

A modern boutique located in St. Paul, MN.

Shop IDUN

Website, branding and photography for an internet based radio show.

A vinyl-only internet radio show.

For the Love of Vinyl


At Blockstack we have mostly made the switch from using netlify to using Vercel for all of our pull request (PR) deploy previews.
Netlify is good, but with many of our projects using Next.js, the experience with vercel is smoothing on the whole than it is with Netlify.
Various projects will either use the official Vercel github addon, while increasingly I've been moving projects over to a combination
of this GitHub action and a custom script to comment on the relevent PR. With this action and custom script, it gaves us the ability
to have better control over what the comment says and what it provides someone who might be reading it. I have looked pretty
in-depth at the Deploy Summary integration that Vercel offers, but after trying it out, felt as though it gave very little
ability to control how it works. Even after reading most of the source code, I am no closer towards: enabling it in specific projects,
controlling how it comments, or even how to turn it on.

Since we had already moved into the direction of a more bespoke action for our deploy previews, it was not much more work to add in
similar features to what the Deploy Summary integration offers. Around the same time as I was thinking about this, I ran across this
tooling called `microlink.io`, which offers many on demand services such as screenshots and dynamic open graph card generation.
They have a generous free plan, and I decided it would make the perfect tool to enable the screenshots of pages changed in a given PR.

This post will give a brief overview of how we mirrored some of the functionality in the Deploy Preview integration while also
customizing the message of the comment generated.

## Getting started

Some background on github actions, and the zeit addon.




Learn how to create a customizable deploy preview script that uses github actions to show which pages have changed in a given PR.

Better next.js PR previews with Github Actions

Ineffable 2020


Out of the box, Next.js with MDX does not support something very common: frontmatter. Frontmatter is YAML at the top of any
markdown document. It's very useful in adding page meta-data such as a title, description, or anything else.

### Final loader

```jsx
const fm = require('gray-matter');
const remark = require('remark');
const strip = require('strip-markdown');

const getHeadings = mdxContent => {
  const regex = /\n(#+)(.*)/gm;
  const found = mdxContent.match(regex);
  const getLevel = string => string.split('#');
  const headings =
    found && found.length
      ? found.map(f => {
          const md = f.split('# ')[1];
          let content = md;
          remark()
            .use(strip)
            .process(md, (err, file) => {
              if (err) throw err;
              content = file.contents.toString().trim();
            });
          const level = getLevel(f).length;
          return { content, level };
        })
      : [];
  return headings;
};

// @see https://github.com/expo/expo/blob/master/docs/common/md-loader.js
async function mdxFrontmatterLoader(src) {
  const callback = this.async();
  const { content, data } = fm(src);
  const headings = getHeadings(content);
  const code =
    `import { MarkdownWrapper } from '@components/mdx-wrapper';
export default function Layout({ children, ...props }){
  return (
    <MarkdownWrapper frontmatter={${JSON.stringify({
      ...data,
      headings,
    })}} {...props}>
      {children}
    </MarkdownWrapper>
)
}

` + content;

  return callback(null, code);
}

module.exports = mdxFrontmatterLoader;
```


Frontmatter with MDX in Next.js


One of my favorite indicators of a well crafted website or application is when you can see that the layout has knowledge
of the content it contains. What I mean by this is that it's smart enough to know that there are images present, and even
if they have yet to load, there's a space for them. Without this space, you'll experience page shift, when the image
eventually loads, the content you might be reading will jump to accommodate the newly loaded image.

In a recent project, I had implemented a new version of our documentation site, built with next.js and mdx, and wanted to
make sure the images were handled in this way. In previous projects, such as this site, most of the images existed within
the content management system, Prismic, which provided the dimensions of the images in the API response.

Since I was using MDX, that meant I had access to [Remark](https://remark.js.org/) and [Rehype](https://github.com/rehypejs/rehype),
pre- and post-processors of markdown. If you're unfamiliar with the Unified ecosystem, the gist is that these libraries
allow someone to write plugins that effect the markdown in some meaningful way. You can use a plugin that will find all
instances of a link, and if the `href` is pointing to an external destination, then it will add `target="_blank" rel="no"`
to them automatically. Another example: there is a remark plugin that will wrap all of your headings and content between
headings with `<section>`'s, for better accessibility.



```js
import visit from 'unist-util-visit';
import lqip from 'lqip-modern';

const isRelative = (node) => node && node.properties && node.properties.src && node.properties.src.startsWith('/');

const getAspectRatio = (dimensions) => {
  if (!dimensions) return;
  const { width, height } = dimensions;
  return (height / width) * 100;
};

const rehypeImageSize = (options) => {
  const pathPrefix = options?.pathPrefix || 'public';
  async function transformer(tree) {
    const nodes = [];
    visit(tree, 'element', (node) => {
      if (node.tagName !== 'img') {
        return;
      } else {
        nodes.push(node);
      }
    });
    await pAll(
      nodes.map((node) => () => visitor(node)),
      { concurrency: 25 }
    );
    return tree;
  }
  async function visitor(node: any) {
    if (isRelative(node)) {
      const output = await lqip(`${pathPrefix}/${node.properties.src}`);
      const dimensions = {
        width: output.metadata.originalWidth,
        height: output.metadata.originalHeight,
      };
      node.properties['dimensions'] = dimensions;
      node.properties['aspectRatio'] = getAspectRatio(dimensions);
      node.properties['preview'] = output.metadata.dataURIBase64;
    }
    return node;
  }
  return transformer;
};

module.exports = rehypeImageSize;
```


Learn how to write your own remark plugin to scrape data from images to use in your next.js/mdx application.

Processing images with Rehype and MDX


This is a technical companion post to the write up published on the Blockstack blog, which you can find here.


