Jacco Meijer
Wheelroom hero image

What happened to Wheelroom?

Founded in 2018. Started to fly in 2020 and abandoned in 2021. What happened?

Wheelroom

Modelberry is the successor of Wheelroom. The original Wheelroom repository is still online as is an archived copy.

Evolving models

Wheelroom was founded in 2018 with the idea that content models evolve as a code base evolves and that models should be kept in the same repository as the code base.

React UI library

Early 2020 a React UI library was developed around the Wheelroom command line utility. The Wheelroom boilerplate based on GatsbyJs combined content from Contentful with the React UI library into a marketing website on Netlify in a matter of minutes.

Three logos: Contentful Gatsby Netlify

Success

Setting up a new site in a matter of minutes together with easy customization and universal UI library made a marketing site based on Wheelroom an easy sell.

Where the Wheelroom command line utility was solid, the UI library had a number of drawbacks.

UI library drawbacks

The UI library was build around a React clone of styled system. This design system served well for a while but eventually evolved into the Any Element.

The biggest problem with the way styled system was used were the style trees. A style tree was a Wheelroom concept which allowed styling a tree of components.

First of all it was hard to maintain the tree typings. Extending them with new functionality was too complicated. The second problem was that the trees were not as intuitive as they could be. Over time it became hard to remember which style was defined where.

New UI library

In 2021 a new UI library was developed with the lessons learned. This library uses clear component scopes and a component interface that prevents breaking changes. The library was separated from the command line utility.

Command line utility

The Wheelroom command line utility uses a javascript object for defining the content models. The content models could be pushed to Contentful and were used to generate typescript definitions and graphql queries.

This worked well (as it still does), but there was a better way.

Modelberry factory

Instead of generating typescript from a javascript object that defined the content models, typescript now is at the core.

A new command line utility was born and was named 'Modelberry factory'.

Content models are defined in typescript. TSDoc annotations are used to add additional details to the models. This way models can be pushed to Contentful. The other way around appeared easy as well. Pushing and pulling content was an obvious next step.


NPM7 and @npmcli/arborist

@npmcli/arborist is a powerful library that handles the new npm 7 workspaces. This blog is about a simple make tool that uses the library.

Comparing React app, Nextjs and Gatsby

A new React project starts with a React toolchain. Main tools in the chains are SSR, React server components and GraphQL.

Versioning strategy for npm modules

It is important to be able to bump the version of a npm package without side effects.

React component themes and CSS variables

Creating React components with flexible themes by using CSS variables.

Content modeling with variants

The efficiency of a variant field in a content model.

Green oil

Documentation

Documenting a software project is challenging. Here's a few simple guidelines that help a team writing clear documentation.

Orange yellow oil

On Javascript transpilers, bundlers and modules

There's Javascript transpilers, modules, bundles and bundlers. This is a brief overview of all of these.

Dark orange bubbles

Javascript history

In 1986 David Ungar and Randall B. Smith developed Self at Xerox PARC. Inspired by Java, Scheme and Self Brendan Eich created Javascript in 1995.

Blue waves

Agile Scrum

The Agile Scrum framework is flexible enough to be used in many different ways. Here's one way of working.

Blue water bubbles

Contentful, Netlify and Gatsby four years later

What did we learn from using Contentful for four years?

Wheelroom hero image

What happened to Wheelroom?

Founded in 2018. Started to fly in 2020 and abandoned in 2021. What happened?

Orange oil

Typescript interface for React UI components

How to define an interface for React UI components that prevents breaking changes.

Orange green oil

Naming React components

What's in a name? A clear naming strategy helps developers communicate. Most devs rather spend time writing component code than wasting time on a good component name.