A clarified presentation of TheRide's bus stop time tables, with a development focus on static generation.

Ann Arbor Bus Info


For the last couple years I've been developing side projects, and I've been adding the same components to `components/` over and over. At first I was copy+pasting them. At some point I made a template repo that I'd clone from, but that still had the problem of me needing to go back to copy+paste new stuff to it. Finally, in the middle of the summer of 2022, I sat down and resolved to make my own package.

The component library has taken a lot of inspiration from my work a [Dropbox](https://dropbox.com). The keystone of the system is the `Block`, and to call it CSS in JavaScript _I_ feel would be misleading, but it's true the styles are added in the React components.

```jsx
<Block color={color} colorTint="light" paddingTop="0.5">
    {children}
</Block>
```

If there was a goal for this project other than speeding up the MVP development on my side-projects, it'd be to push TypeScript to it's typing limimts. I'm constantly trying to make the props flexible while remaining typesafe. I feel like at this point I've used it all, from union types, to generics, to template strings; resulting in some nonsense like

```
export type Directions<T extends string, V> = Partial<
    Mapping<DirectionOptions<T>, V>
>;

export type ForBreakpoints<
    T,
    E extends keyof Breakpoints = 'mobile' | 'tablet' | 'wide' | 'desktop'
> = T | Partial<Pick<Record<keyof Breakpoints, T>, E>>;

export type SpacingPropsValue = ForBreakpoints<SpacingValues>;

export type PaddingProps = Directions<'padding', SpacingPropsValue>;
```

as a type-safe way of accomplishing

```
<Block paddingTop={{mobile: "1", tablet: "2"}} paddingBottom="2">
    Hello World
</Block>
```

[annarborbus.info](https://annarborbus.info) is a great example of a website I build using onion.

![landing page of website using onion design system {1524x1270}](/images/onion_example.png)


A design system for me and my side-projects.

Onion

Hacker News but none of the context and all the comments.

Hacker Noise

Scale

An iOS app that fits how I feel about routines, complete with Siri Shortcuts support.

Redue

This project was a solution to two problems people in my life had. On made an off-hand comment that they wish they could take notes in their DoorDash on the things they've liked from places. The other said lamented that they had no good way to keep track of all the coffee shops their friends suggested they check out.

![Noted homepage {2560x1335}](/images/noted_homepage.png)

I also went as far as modifying the emails, which was a first for me in a [NextAuth](https://next-auth.js.org) project. This was born because of the way [NextAuth](https://next-auth.js.org) cookies work with the way some mobile email clients open links in an embedded browser.

![Noted login email {949x443}](/images/noted_login.png)

Ultimately I decided to shut Noted down, but if you want to talk about it let me know!

### More Images
![Noted place page {2557x1331}](/images/noted_place.png)

![Noted default labels page {2556x1334}](/images/noted_labels.png)

![Noted favorites page {2559x1333}](/images/noted_favorites_selected.png)


A site which helps you keep track of the places you've been. You can take notes and label them for later reference.

Noted

One of the official names for this emoji 🚮 is "Put Litter in Its Place" and I thought that'd be a fun theme for a game so here we are.

Put Litter in Its Place

A website for knowing local date times around the world

LocalDateTime.zone

Pair programming is integral part of many software development lifecycles. When pairing, you may want to track each committer's contributions. Using guet enables that functionality without changing the normal git workflow.

Projects