# About these notes
Hi, I’m [Max](https://mxstbr.com)! 👋

These are my [[Evergreen notes]], which I [[Write to think]]. They are written for myself and they contain my opinions and principles. I am sharing these publicly because I strongly believe in [[Work in public]].

Just do me one tiny favour while reading them: if anything here triggers interesting thoughts in your mind (whether you agree, disagree or take it further) send me [an email](mailto:contact@mxstbr.com) or [a direct message on Twitter](https://twitter.com/messages/compose?recipient_id=2451223458) and let’s talk!

These notes are “Choose your own adventure”: there is no index of all of them anywhere. Click on whatever links strike your fancy and see where they lead you!

At the moment, I’m thinking a lot about life (particularly [[Invest in force multipliers]]) and React (particularly [[Gatsby is inventing a new category of websites]] and [[strict-ui]]), so any of those notes might be interesting places to jump in.

✌️

---

_Note that I did not build this system, [Andy Matuschak](https://andymatuschak.org) did for [his own exceptionally interesting notes](https://notes.andymatuschak.org). He was kind enough to let me use it._




About these notes

# Evergreen notes
See [Evergreen notes](https://notes.andymatuschak.org/Evergreen_notes) in Andy’s notes for a deep explanation of evergreen notes, how they differ and why you want to take them. The quick pitch is:

*  [Evergreen notes should be atomic](https://notes.andymatuschak.org/Evergreen_notes_should_be_atomic) 
*  [Evergreen notes should be concept-oriented](https://notes.andymatuschak.org/Evergreen_notes_should_be_concept-oriented) 
*  [Evergreen notes should be densely linked](https://notes.andymatuschak.org/Evergreen_notes_should_be_densely_linked)

I have found writing these notes a satisfying process that helps me think much more clearly, particularly when following Andy’s example and doing it every day during [[My morning routine]]. ([[Thinking practice]])




Gatsby

The benefits of a dynamic website

# Gatsby is inventing a new category of websites
Imagine a static site generator that can rebuild a website with fresh data in less than five seconds (or even one second).

Combined with a CDN that deploys to hundreds of locations around the world in ~200ms ([Fastly](https://www.fastly.com/network-map)), new data would be live for all visitors in less than ten seconds.

That would make it possible for many (now) dynamic sites to be built as static ones, with all [[The benefits of static websites]] (performance, scalability, uptime, cost,…) included! 

While it’s technically a set of static HTML files on a CDN in the end, the architecture is neither truly static or dynamic, but something in-between.

That is what [[Gatsby]] is working towards—and [we are getting close](https://www.gatsbyjs.org/blog/2020-01-27-announcing-gatsby-builds-and-reports/). 🤯

----

I was sold on this idea when I realised that we could have architected [[Spectrum]], a public real-time chat app, like this. Here is what I wrote in our Slack at the time:

> _If build + deployment of new content is fast and stable enough (< 1s?) new content is available super quickly everywhere around the world, no matter where the db is—it’s just a bunch of static HTML files after all. In theory, we could’ve built Spectrum with that architecture and made it much more scalable, performant and stable!_

 🤯🤯🤯




Iterate as fast as possible

Work in public

My morning routine

Thinking practice

Have a great morning routine

Invest in the best tools

My mental models

# Invest in force multipliers


Force multipliers are anything that increase your effectiveness by (ideally many) multiples. Adding new or improving your force multipliers is a great way to move faster towards your goal.

These are some force multipliers I am thinking about at the moment:

* [[Get more parts on the table]]
	* [[Build a diverse network]] and [[Talk to people]]
	* [[Work in public]]
	* [[Seek discomfort]]
* [[Have an aptitude for serendipity]]
* [[Iterate as fast as possible]]
* [[Invest in the best tools]]
* [[Have a great morning routine]]
* [[Thinking practice]]




Have an aptitude for serendipity

Get more parts on the table

Invest in force multipliers

Talk to people

Build a diverse network

Be open

Seek discomfort

Sell your story

# Work in public

By sharing as much as possible publicly and being transparent ([[Be open]]), I invite serendipity to help me. ([[Have an aptitude for serendipity]]) Since I [[Build a diverse network]], whenever I [[Talk to people]] the chance is high that one of them connects my ideas to something I had not considered before.

This is a big force multiplier and a core part of how I want to work. ([[Invest in force multipliers]])




# Write to think

Thinking clearly is difficult but important. Writing about what I am thinking through helps me stay focused and sort out my ideas. It is also immediately apparent if I write about anything I do not fully understand, which helps me check myself.

As part of [[Have a great morning routine]], I copied Andy Matuschak’s [[Thinking practice]] into [[My morning routine]], and I love it. Making writing to think a core part of my day is very satisfying.




Layout in React

Use spacer components

Do not allow arbitrary CSS to be passed into your components

# strict-ui

An opinionated abstraction on top of CSS-in-JS that makes it simpler to build component-based systems.

*Overarching principle:* Components should only affect themselves but nothing around them.

Update: I have a  [working prototype of these ideas in a PR](https://github.com/system-ui/theme-ui/pull/719) . The next step is using it and seeing how it feels.

## Rules
Ordered roughly by controversiality:

1. No box-sizing. Always use border-box.
2. No inline images. All imgs are inline-block or block.
3. No float except for imgs. Use layout component (see [[Layout in React]]) from the parent instead.
4. No random values (padding: ‘17px’, color: ‘#fafbfc'), only tokens and scales from the theme (padding: 2, color: 'primary').
5. No flexbox properties (justify-content, align-items, etc). Use layout components instead.
6. No grid properties (grid-column, grid-template, etc). Use layout components instead.
7. No margin. See [Margin considered harmful](https://mxstbr.com/thoughts/margin).

Potential other ideas:

1. No display? Particularly flex and grid should instead be delegated to layout components, but what does that mean for block vs. inline? Probably still need those maybe?
2. No child or type pseudoselectors? (:nth-child, :nth-of-type, etc) What are they useful for that can'’ be done trivially in JS-land instead? Is it useful to disallow them?
3. No right / left properties? Instead only have start / end / horizontal / vertical which would work more easily with i18n and RTL languages.
4. What about z-index? Could limit to a certain number of steps
5. A full theme / scale interface (things like fonts.body are required)? Would help with the notion of swapping / interoperability
6. The text-spacing-hack included in Seek’’ design system Braid (see  [this talk](https://www.youtube.com/watch?v=jnV1u67_yVg) )




@mxstbr's working notes

About these notes

What do you think?