mundi morgado mundizzle

Designer Koans

No ultimate difference

One day a designer visited Master HyperTextCascade, and inquired, “Master, how will my designs be different when I have mastered code?”

Master HyperTextCascade answered, “Before code: identify problem, research, test, ship, iterate, solve problem. After code: identify problem, research, test, ship, iterate, solve problem.”

How not to scale css

Several years ago I got curious about how css worked at scale. When I first started out, there weren’t nearly as many learning resources as there are now. CSS zen garden was amazing, at the time it showed how much you could change a design without altering the html.

In the beginning, that’s what people sold me as a feature. By writing css, you could make a change one place and have it propagate everywhere. In principle this sounds pretty good. I’m lazy so I like doing things one time. But eleven years later, my experience on both large and small teams is that this is the most terrifying thing about css.

https://twitter.com/thomasfuchs/status/493790680397803521

In the past few years a lot of very smart people have been thinking more about CSS and this has lead to some fascinating discussions around how to build ‘scalable’ ui and how that relates to CSS. When I first started to think about scalability I naturally started to read every blog post and watch every tech talk I could get

Can't share the complete code because the app's closed source and still in stealth mode, but here's how I'm using React Router and Redux in a large app with server rendering and code splitting on routes.

Server

Wildcard Express route configures a Redux store for each request and makes an addReducers() callback available to the getComponents() method of each React Router route. Each route is responsible for adding any Redux reducers it needs when it's loaded. (This isn't really necessary on the

System Design Cheatsheet

Picking the right architecture = Picking the right battles + Managing trade-offs

Basic Steps

Clarify and agree on the scope of the system

User cases (description of sequences of events that, taken together, lead to a system doing something useful)
- Who is going to use it?
- How are they going to use it?

For those of you asking about my "redux mental breakthrough":

I've struggled with how to keep the state of multiple instances of the same component class in redux. I kept thinking that I had an "unkown number" of instances and would need to somehow carve out a piece of state when the new instance was mounted.

I don't know why I was thinking this way. Thinking is hard, isn't it? (I'm in the UK and they often say "isn't it?" after asserting something and I love it, anyway....)

How to style React components

If you use sass and css-modules and want to restyle some base component without changing its code. (base component already use css-modules and exposes styles property)

I know two way how to do it.

Using composes css-modules operator. Just extend classes you need, then in javascript code combine both styles as {...baseStyle, ...myStyleSimple}

How to show migration guides in GitHub Markdown

Use the diff code highlighting tag.

  ```diff
  - foo
  + bar

Example:

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

	import React from 'react'
	import ReactDOM from 'react-dom'

	const Hello = ({name}) => <h1>Hello {name}!</h1>

	ReactDOM.render(
	<Hello name={"vjeux"}/>,
	document.body.appendChild(document.createElement("div"))
	)

	'use strict';

	// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
	// http://creativecommons.org/publicdomain/zero/1.0/

	(function() {

	// Update 'version' if you need to refresh the cache
	var staticCacheName = 'static';
	var version = 'v1::';