Getting closer to design tools

Show an example using TypeScript and GIFs to provide inline documentation.

Idea: instead of documenting thousands of open source libraries, what if we would focus our efforts on teaching (with very high quality material) how to read and understand the source code of libraries?

— André Staltz (@andrestaltz) January 10, 2020

Design tools have been around for a long time. Even before computers people were building beutiful works through printing presses. Logic has been around for just as long, even longer. These two mediums have seen a tremendous amount of growth in the last decade.

In order to get closer to design tools we need to look at constructing UI from the point of view of a designer.

If you’ve worked with frameworks like React Native there’s no cascade. This is important, people still ship impressive applications so don’t let the absence of the cascade hinder you.

High level tooling

Declarative

Thankfully, in the last decade we’ve seen a rise in more declarative tooling on the web with component models being favored now more than ever.

Going back to the web specifically the mental model of how we construct UI is not the same. Let’s see what we get when we take a CSS API and wrap it up in a delcarative manner.

States or Variants

Some components have similar features that usually change themeable properties.

Tools like jsxstyle took me down this path and with the rise of CSS in JS libraries I was intrigued to look into this pattern myself. Brent Jackson’s Box component with theming and styling.

What is a design tool? Composing objects together.

What is HTML? Composing content together.

What is JSX? Composing content and logic together 🤯

JSX is the solution. It’s the perfect balance of logic and composition

We just need constraints. Remember how design tools offered us a constrained easy way to design?

The native framework we are given today is like giving a designer a pencil. There’s so much to think about right away that by the time we figure out the DSL or methodology someone chose. This is not to say it’s bad and we don’t want to hinder innovation, but these practices have been around for a long time. We should look to constraints so that we can focus on what’s most important, the user experience.

1<Stack alignment />