Jacco Meijer

Content modeling with variants

The efficiency of a variant field in a content model.

Content modeling

Adding a 'variant' atrribute can reduce the number of models needed when modeling for a marketing site.

When modeling for an app this is not true. Mainly because an app works with fixed layouts and layouts for a marketing site must be flexible.

Content modeling for an app

For apps with a lot of fixed content it is practical to have a Screen model with an uiModels field. The uiModels field holds an array of models that are close to the models used for the UI components.

Both the Screen model and the uiModels contain fixed ids. These ids bind the content to specific usage in the app.

For each screen of the app a Screen entry is added. For each UI element on that screen a uiModel entry is added to the uiModels field.

Content modeling for a marketing site

A 'variant' field is notably efficient when used in an environment with a text editor that allows for content models to be embedded in the text. The Contentful rich text editor is a good example.

Setting up models for a site it is obvious to start with a Page model. This model contains the text editor. The page model also holds fields for things like url and SEO.

Next, two models that can be embedded are defined. One model for topics and one model for lists of topics.

Topic model

The Topic model contains the standard fields of any 'call to action'. A heading, an abstract and an action.

Adding a 'variant' field to this model gives an editor control over how the topic is displayed.

List model

The List model contains a list of topics.

Adding a 'variant' field to this model gives an editor control over what list is used. The number of columns, the headers, etc. The 'topicVariant' field controls which variant is used for the topics in the list.

Composing pages

At this point three models are defined. All three can be embedded in the text.

Adding a 'variant' field to the Page model gives an editor control over how to display a link to a Page.

With just three models and the variant field a great variety of pages can be created. The more variants each model has, the more powerful this design becomes.

Next

Adding a 'colors' atrribute to the interface allows for theming components. The post below explains how.

React component themes and CSS variables

Creating React components with flexible themes by using CSS variables.


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.