# 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._




Work in public

Talk to people

Build a diverse network

Seek discomfort

Be interested

# Be open
I have noticed that the more open I am in conversation the more the other people open up too. This leads to a strong bond developing much more quickly, and as a side benefit makes it easier to [[Be interested]].

This was confirmed by research at Harvard ([source](https://hbr.org/2018/05/the-surprising-power-of-questions)), which states that “transparency is an essential part of forging meaningful connections.” Opening up is so effective that researchers now leverage it to quickly build relationships between study participants by giving them question sheets with sensitive questions to ask each other.

Being open can be uncomfortable, which is another reason to [[Seek discomfort]]. [[Work in public]] is kind of a scaled version of this applied to my entire work life.




Have an aptitude for serendipity

Get more parts on the table

Invest in force multipliers

Sell your story

Personal brand as moat

# Build a diverse network

The more people I know, and the more diverse their perspectives are, the more parts I can theoretically access. ([[Get more parts on the table]]) This requires me to [[Be open]] to new perspectives and to [[Seek discomfort]].

The more I talk to my big diverse network ([[Talk to people]]) and [[Work in public]], the higher the chance that one of them serendipitously connects my ideas to something I had not considered before. ([[Have an aptitude for serendipity]])

It also makes it easier to [[Iterate as fast as possible]]. I can solicit good feedback quicker, which lets me speed up some of my iteration loops.

> _”This is not the wisdom of the crowd, but the wisdom of someone in the crowd. It’s not that the network itself is smart; it’s that the individuals get smarter because they’re connected to the network.” — Where good ideas come from_




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!_

 🤯🤯🤯




Invent by combining things in new ways

Sketching exercises

# Get more parts on the table

> _“The trick to having good ideas is not to sit around in glorious isolation and try to think big thoughts. The trick is to get more parts on the table." — Where good ideas come from_

The more "parts you have on the table", the easier it is to [[Invent by combining things in new ways]] and explore the [[Adjacent possible]]. The more connections you make, the more good ideas you can have. The more good ideas you have, the more you [[Have an aptitude for serendipity]] and the more you [[Always be shipping]]!

[[Build a diverse network]] and [[Work in public]] are two ways to increase the amount of parts I have on the table. The bigger and more diverse my friend group and the more I [[Talk to people]], the higher the chance somebody has that unique part on their table that connects my ideas to their thoughts. A good way of knowing if you’re on the right track is to [[Seek discomfort]].




Always be shipping

Solve your own problems

# Have an aptitude for serendipity

My career is almost entirely based on serendipitous connections. While they are random chance, of course, the one thing I take credit for is having (what I like to call) an “aptitude for serendipity”. I try to create as many opportunities for luck to strike me as possible.

Some ways I try to influence serendipity are:

* [[Iterate as fast as possible]] and [[Get more parts on the table]] so I have a higher chance of inventing something novel. ([[Invent by combining things in new ways]])
* [[Always be shipping]] so serendipity has as many chances as possible to strike one of them.
* [[Work in public]], [[Talk to people]] and [[Build a diverse network]] so more people have a chance of stumbling upon my ideas and connecting them with their own thoughts.

Personally, publishing open source projects has been a great way to do this. There is no downside, assuming you [[Solve your own problems]], and the upside could be career-defining. My career was defined by react-boilerplate being posted and upvoted to the HackerNews frontpage!




Iterate as fast as possible

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]]




Be open

# Seek discomfort

If I am uncomfortable, by definition that means I am doing something new, something outside of my comfort zone. The chance for [[Get more parts on the table]] when doing something new is infinitely higher than when doing something I always do. 

In an ideal world this would be habitual: discomfort should be the default and (ironically) too much comfort would make me uncomfortable.

Some ways I try to do this are [[Be open]], [[Talk to people]] and [[Work in public]].




Non-technical regrets at Spectrum

# Sell your story

[[🌱]]

Buying art is a lot about connection to the artist—when somebody comes over and asks about your painting choices, you want to be able to tell the artists story.

People connect because of shared experiences and stories. Thus, a part of what an artist sells is their own story.

This applies to any creative person, and is a big part of the reason why indiehackers are so interesting to follow. (which of course makes them more likely to succeed because they [[Build a diverse network]], [[Talk to people]], [[Work in public]] etc)

Thus, an important things you can do to further your creative careers is to tell your story.




Lower your inhibitions

# Talk to people

Having lots of friends and a diverse audience ([[Build a diverse network]]) is great to [[Get more parts on the table]], but completely useless if I don't talk to them. By bouncing my thoughts off of them, they might be able to connect some of them to something I had not considered before.

The scaled version of this is [[Work in public]]. That makes it possible for my audience to serendipitously stumble upon my thoughts without me having to do an active action. ([[Have an aptitude for serendipity]])

To build meaningful connections, it is important [[Be interested]] and [[Be open]].




# 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?

Work in public

Links to this note

What do you think?