Mary Rose Cook's notebook

The public parts of my notebook.

My homepage.

Mario Kart on the Switch with my family

Mario Kart on the Switch with my family


#notebook

Fatal Attraction

Fatal Attraction

A good thriller. It's elevated by Glenn Close's performance. She doesn't become a psycho right away. First, she becomes a powerless, needy woman.



Then she takes the power back.



#notebook

The right information in the right place just changes your life

The right information in the right place just changes your life

The "information wants to be free" quote from Stewart Brand:


On the one hand information wants to be expensive, because it's so valuable. The right information in the right place just changes your life. On the other hand, information wants to be free, because the cost of getting it out is getting lower and lower all the time. So you have these two fighting against each other.


The famous part is the "information wants to be free" part. It's interesting. But my favourite part is, " the right information in the right place just changes your life".


#notebook

Patrick Collison, Tim Ferriss's podcast

Patrick Collison, Tim Ferriss's podcast


1869f87a-edca-4737-b3fe-cad55c90559f.mp3


Original: Patrick Collison — CEO of Stripe (#353)


#notebook

Books I read in 2018

Books I read in 2018

The Lean Startup, Eric Ries


A useful how-to for an approach to making sure the problem you're solving is one that it's valuable to solve, and making sure the solution you're creating actually solves the problem. Sometimes the descriptions were a bit wooly, making it hard to pin down the ideas.


The Odyssey, Homer


Read it in parallel with my dad. I loved talking about it with him. His feeling is that the gods are manifestations of the characters' emotions and desires.


I loved discovering the origins of so many tropes and symbols and myths.


Some of the phrasings were magical.


"The sun went down and all the ways grew dark."


"Athene, the goddess of the flashing eyes."


Arbitrary Stupid Goal, Tamara Shopsin


An account of growing up in the West Village in New York. The biographical specifics never branched out for me into any greater truths about the world.


The Swimming-Pool Library, Alan Hollinghurst


A novel about the lives of gay men in the '40s and '80s. Beautiful prose.


Principles, Ray Dalio


A memoir by the founder of a large investment firm. Lays out the author's approach to self-improvement. Makes a case for the value of quantifying the unquantifiable and analysing the unanalyzable. Helped me solidify my approach to improvement: do, reflect, adjust. I also loved the stuff about trying to face reality.


The New New Thing, Michael Lewis


Grit, Angela Duckworth


About the psychological trait of grit: perseverance plus long-term passion for a topic. The main thing I took from this is that success in an endeavour is about long-term dedication to a goal, as well as short-term persistence through adversity. But, overall, Mindset provided a much richer and more useful approach to the same terrain.


The No-Cry Sleep Solution, Elizabeth Pantley


Guess what happened this year.


Creative Selection, Ken Kocienda


A memoir written by an engineer who worked on the iPhone keyboard and on Safari. Fascinating descriptions of parts of the design process at Apple. Plus failed attempts to tie these methods into some sort of philosophy.


Perennial Seller, Ryan Holiday


Some helpful stuff about making sure to solve a real problem.


The Death of Grass, John Christopher


A novel that is a systemic exploration of what happens in a world where most of the crops are killed by a disease. Badly executed: the system and the ideas poked through the characters and story all over the place. The Day of the Triffids maintains the facade of a novel much better.


Domain Modelling Made Functional, Scott Wlaschin


Domain driven design seems to often be enmeshed with object-oriented techniques. This book is a nice alternative that links it to functional techniques.


Also a lucid account of taking some business processes and implementing them with a functional approach.


The Paying Guests, Sarah Waters


A novel about a formerly rich mother and daughter who take in lodgers in order to stave off ruin. Waters's first novel, Tipping the Velvet, was one of my favourites as a teenager. The Paying Guests is the first book of hers that I've liked in a long time. I think perhaps because it captures a similar romantic frisson. It also manages a slow, painful narrowing of the world as things get bad for the characters.


Your Baby Week By Week, Caroline Fertleman


Can you guess?


The Art of Game Design, Jesse Schell


Very much from the school of let's-not-make-an-overfitted-grand-theory-and-instead-let's-use-many-different-models-(lenses)-to-find-insights. Solid.


Your Self-Confident Baby, Magda Gerber


The baby book that fit my brain the best. Help your child feel secure in your love. They can then use that as a base from which to build their own competence.


Jonathan Strange & Mr Norrell, Susanna Clarke


A novel about magicians. Once it reached magical lands, I lost interest.


City of Thieves, David Benioff


A novel set during the siege of Leningrad. Two men go on a mission that takes them all over the city. It was interesting to read about what it's like to live under siege. I like WWII and I like reading about crisis situations, so this was right up my alley. But I didn't find the story very meaningful.


Robinson Crusoe, Daniel Defoe


I enjoyed some of the descriptions of building subsistence. But I got tired of the minutiae of enacted plans.


The Information: A History, a Theory, a Flood, James Gleick


Taught me quite a lot about the history of communication. I found the parts about Claude Shannon's work particularly interesting.


Learning Javascript Design Patterns, Addy Osmani


You Don't Know JS: Up & Going, Kyle Simpson


Peak, K. Anders Ericsson


About deliberate practice. It has useful tips on practicing effectively. But its main value was to shunt me further towards believing that I can learn anything.


#notebook

The mental models of magicians, Freyja

The mental models of magicians, Freyja

From: https://autotranslucence.wordpress.com/2018/03/30/becoming-a-magician/


For several years I competed in bodypainting at the highest level of competition in the world. Every year I would fly to Austria and compete in the World Championships and by the latter years I would consistently rank in the top four or five. This wasn’t unusual; I was aiming for first place and never got it, but most of the time I understood pretty concretely what a first place piece would look like. It felt like incremental improvements from where I was at that point; faster painting, more detailed realism; a competent assistant, some element of luck in how my presentation was perceived by the judges and how everyone else performed that year. I knew the styles, strengths and weaknesses of the other people who consistently ranked in the top ten pretty intimately; I often predicted accurately whether they would move up or down in the rankings each year. You could say that my model of ‘how to succeed at a bodypainting competition’ was technically sufficient, and the thing I needed to work on was merely fine-tuning all the pieces until I ranked higher than everyone else one year.


And then came Sanatan Dinda. An Indian visual artist from Kolkata, he didn’t even make the finals the first year he competed, and the next year he placed second with a style that broke half a dozen of the implicit rules of ‘good artwork’ at the competition. He used a monochromatic or even black and white palette. His pieces weren’t flashy, sparkly, or even very ‘pretty’ in a standard sense. He left vast parts covered in brown, or muddy purple, or some other unappealing background colour. But yet the third year he came he won the entire competition by something like ten percent of the total awarded points over the next artist in second place.


His first piece brought people to tears. It was brutal and glorious and technical perfection, but not just that. There was some sort of soul in it that suddenly made all the other bodypaint works seem lacking. His second piece did something similar. I didn’t win that year (obviously; he did) but I didn’t even mind because I was so glad that work like his existed and that the World Bodypainting Festival had, in some way, helped facilitate that art existing.


The thing that confused me though was this – I could not work out how he did it. Like, I had zero mental model of how he created that piece in the same timeframe we all had; how he came up with it, designed it, practiced it. Even though he placed first and I placed fifth and logically we both existed on a scale of ‘competence at bodypainting’ it seemed like the skills required were completely different. You could not simply scale up my abilities and get Sanatan’s. You would have had to step back and build something completely different altogether. When I speak to Sanatan (I haven’t picked his brain relentlessly, but I have asked him a bunch of questions when I’ve had the chance) I don’t get any closer to a mental model that would allow me to paint like that. It seems to require completely different mental inputs entirely.


The feeling I get, as a very good bodypainter looking at Sanatan’s work, is that I am looking at magic. And that, in fact, is my definition of magic – competence so much more advanced than yours with such alien mental models that you cannot predict the outcomes of the model at all. If you asked me to imitate the work of any of the top 20 bodypainters, I could give you a fair imitation, given enough time and access to reference images. With his work I have no idea.


And yet, ten years ago when I encountered the website of the World Bodypainting Festival, as not-yet-a-bodypainter, literally every image on the website was in that category for me. I look at those pieces now and could replicate any of them, but at the time they seemed incredibly complex, technical and inscrutable – I couldn’t break down what steps the artist might have taken or why. I just saw them as unattainable.


One of my heuristics for growth is to seek out the magicians, and find the magic. Often without noticing, your progress in aspects of life or all of it unconsciously becomes linear. You made a certain amount of money last year, so you aim to make some ‘reasonable’ proportion more this year. But you are largely using the same tools to get 2x as you used to get x, and so you end up with diminishing marginal returns as you wring the remaining juice out of the initial strategy. The ‘describe the version of you that seems impossible right now’ trick I described above is largely an attempt to bypass that part of my brain that dismisses the work of magicians as crazy and starts allowing it to make the necessary shifts required to become the kind of magician I am envisioning.


The way to extraordinary growth and changes often involves a fundamental ontological or ‘lens’ shift in how you see the world. Magicians are wearing not just better, but fundamentally differently shaped lenses to the rest of us. And regardless of your skills and experience, it is likely that you are a magician to someone else. As someone who has a well-defined felt sense of how various foods affects their body, and can cook simple, healthy food well, I can seem like a magician to someone lacking a similar mental framework who ricochets between spartan self-denial and uncontrollable junk binges.


Meeting magicians is the first step to becoming one – when you are attempting to learn implicit knowledge that by definition you don’t understand, it is important to have a bunch of examples in front of you to feed your brain’s pattern-recognition systems. This will start to change your worldview without the controlling ‘you’ explicitly approving or denying every new belief or framework. Magicians or their work often seem to have a subconscious glow that I am drawn to, particularly if they use a type of magic that I recognise is on my critical path and thus something I’m currently seeking. Concrete steps I take to find them include asking my most interesting friends to introduce me to their most interesting friends, going down similar rabbit holes with the bibliographies of books that excite me, and generally living in ‘explore’ mode at various points in life, while recognising that not every avenue will lead to a jackpot.


#notebook

Leave No Trace

Leave No Trace


Very good.


#notebook

V&A - Design/Play/Disrupt

V&A - Design/Play/Disrupt

Lauren and I went to this exhibition about games at the V&A. It was really good.


Journey

thatgamecompany prototyped the mechanics of Journey in 2D in Flash with minimal graphics. They had the capes flying behind the player, the multiplayer collaboration, and the movement. It's amazing that they were able to trust such a low-fidelity prototype.



The designers made a timeline of the whole game. It included what was happening in each layer of the game at each point. The layers: intensity, area, act, monomyth stage, life stage, growth stage, relationship stage, mood, multiplayer focus, player conscious, spiritual journey, single player moments, multiplayer mechanics, ancestor plot, guardian plot, cloth sand plot, ruins plot, cloth creature, tapestries, idiot proof messages.



The Last of Us

I'd read in Making Crash Bandicoot (fascinating, highly recommended) that Naughty Dog use a dialect of Lisp for game scripting. I guess they still use it.



An early timeline for the game. I think the narrative of the released game is substantially different.



The pink cards are locations. The square white cards are plot points. The square white cards with blue outlines might be a parallel plot line in an earlier version of the game. The larger white cards are the acts. There are also blue cards with "H" and "M" on them. I'm not sure what they are.


Splatoon

The idea comes not from the design, but from the function. The design comes after.


Satoru Iwata


Jenny Jiao Hsia

Hsia often creates paper prototypes of her games, or versions in other media (images, comics) to find what she's trying to make.


#notebook

Animal Collective, Hip Sponge

Animal Collective, Hip Sponge

The time is now, now is the time

Eye on the prize, I got my eye on the prize


#notebook

Mary and Jacob with hands

Mary and Jacob with hands


#notebook

The Bay Area

The Bay Area













#notebook

Ares and Aphrodite, from The Odyssey

Ares and Aphrodite, from The Odyssey

Presently the bard struck up and lifted his fine voice in song. His theme was the love of Ares and Aphrodite of the beautiful diadem, how they first made love secretly in her husband Hephaestus’ palace; how Ares gave her many gifts and how he dishonoured the Lord Hephaestus’ marriage-bed. But the Sun (270) had witnessed their loving embraces and came to inform Hephaestus, who, when he heard the bitter truth, went straight to his workshop with his heart full of evil plans, laid his great anvil on the block and forged a network of chains which could neither be broken nor undone, to bind them there. His fury with Ares inspired him as he worked, and when the snare was finished he went to the room where his marriage-bed stood and threw the netting right round the legs. A number of further lengths were attached to the rafter overhead and hung down like fine spiders’ webs, quite invisible even to the blessed gods. It was a masterpiece of cunning work.


When he had surrounded the bed in this way and set his trap, he made a pretence of leaving for the pleasant town of Lemnos, his favourite place on earth. Meanwhile Ares of the Golden Reins had not kept watch for nothing. Directly he saw Hephaestus, the illustrious Master-craftsman, leave, he made his way to his house, filled with a passionate desire for Aphrodite of the lovely diadem. She had recently returned from seeing her (290) mighty Father, Zeus, and had just sat down when Ares came in at the door, clasped her hand and greeted her fondly.


‘Come, my beloved,’ he said, ‘let us go to bed and find pleasure in love, for

Hephaestus is no longer around. He has gone to somewhere in Lemnos, to visit his barbarous Sintian friends.’ Aphrodite desired nothing better than to sleep with him; so the two went to bed and lay down. Immediately the netting which Hephaestus’ ingenuity had contrived fell around them in such a way that they could not move or lift a limb. They found too late (300) that there was no escape. And now the great lame god himself approached. For the Sun, acting as his spy, had given him word; and he hurried home in anguish. Standing there in the entrance, in the grip of fierce anger, he let out a terrible yell and called aloud to all the gods.


‘Father Zeus and you other blessed gods who live for ever, come here and see a comic and cruel thing. Zeus’ Daughter Aphrodite has always despised me for my lameness, and now she has given her heart to this butcher Ares just because he is (310) good-looking and sound of limb, while I was born a weakling. And whom have I to blame for that, if not my father and my mother? I wish they had never begotten me! But see where these two have crept into my bed and are sleeping in each other’s loving arms. The sight is like a sword in my heart. Yet I have an idea that they won’t be eager to prolong that embrace, no, not for a moment, not for all their love. Theirs is a sleep that both will soon be tired of. But my cunning meshes are going to keep them just where they are, till her Father hands me back every one of the gifts I made him to win this brazen bitch, who may (320) be his daughter and a lovely creature but is the slave of her passions.’


At his words the gods came thronging to the house with the bronze floor. Up came Poseidon the Sustainer of the Earth; Hermes, the Swift Runner; and Apollo, Lord of the Bow; but the goddesses, out of modesty, all stayed at home. So there they stood in front of the doors, the immortals who are the source of all our blessings; and when they caught sight of Hephaestus’ clever device a fit of unquenchable laughter seized the blessed gods.


‘Bad deeds don’t prosper,’ said one of them with a glance at his neighbour; ‘the tortoise catches up the hare. See how our (330) slow-moving Hephaestus has caught Ares, though no god on Olympus can run as fast. Hephaestus may be lame, but he has won the day by his cunning. And now Ares will have to pay him an adulterer’s fine.’


This was the kind of comment made. The Lord Apollo, Son of Zeus, turned to Hermes and said: ‘Hermes, Son of Zeus, Guide and Giver of good things, would you care, though tied down by those unyielding chains, to lie in bed by golden Aphrodite’s side?’


To which the Guide, the Giant-slayer replied: ‘Lord Apollo, royal Archer, I only wish I could. Though the chains that kept (340) me prisoner were three times as many, and though all you gods and all the goddesses were looking on, yet would I gladly sleep by golden Aphrodite’s side.’


At his words laughter arose among the immortal gods. But Poseidon did not laugh; he kept begging the great craftsman Hephaestus to free Ares from the net. ‘Let him go,’ he said, and his words flew, ‘and I promise you that he shall make full and proper atonement, as required by you, in the presence of the immortal gods.’


‘Poseidon, Girdler of the Earth,’ replied the illustrious lame (350) god, ‘do not press me. Pledges for the worthless are worthless. How could I throw you, in chains while the immortal gods looked on if Ares were to wriggle out of his debt as well as out of his chains?’


‘Hephaestus,’ said Poseidon the Earthshaker, ‘if Ares does repudiate his debt and abscond, I myself will pay you the fine.’


‘To such an offer from you,’ replied the great lame god, ‘I cannot and I must not answer no.’


With that the mighty Hephaestus undid the chains, and the (360) two of them, freed from the shackles that had proved so strong, leaped up and fled, Ares to Thrace, and laughter-loving Aphrodite to Paphos in Cyprus, where she has her sacred sanctuary and altar fragrant with incense. There the Graces bathed her and anointed her with the celestial oil that is like a bloom on the limbs of the immortal gods. And they dressed her in lovely clothes that were a marvel to behold.


This was the song that the famous minstrel sang, to the delight of Odysseus and the rest of his audience, the Phaeacians, those famous and intrepid mariners.


#notebook

What's worked in CS

What's worked in CS

http://danluu.com/butler-lampson-1999/


#notebook

Run Mac OS 6 in the browser

Run Mac OS 6 in the browser

https://archive.org/details/mac_MacOS_6.0.8


#notebook

Aged 3

Aged 3


#notebook

Me holding Will's daughter, and him holding my son

Me holding Will's daughter, and him holding my son


#notebook

First Reformed

First Reformed

I saw this with my Dad. It was very good.



#notebook

Designing Into the Breach was a UI problem

Designing Into the Breach was a UI problem

Into the Breach is a turn-based strategy game. Two of the four years' of development were spent on designing the UI.



This UI makes the game feel like a rich, 3D object that you can interact with. Three examples.


One. Almost every control and display of information can be moused over to show an explanatory panel. These panels give detail, but are still clear. To increase clarity, they often include animations.



Two. When considering whether to make a certain unit do a certain attack, the effect that will result is shown in full: on the target tile, with the target unit and its surroundings.



Three. When the player selects a level, they can mouse over for a brief summary of the level, click to see the level, then click again to confirm their choice. This helps the player cope with lots of information. They start with a summary, dive into a more detailed view, then make their choice and see the result.



The production values are extremely high. All those animations in the info panels. The way that, when the player chooses a level by clicking on the preview, the miniature in the preview zooms to become the actual level.


The developers decided that they wanted to show what every enemy was doing on every turn. The rules of a game can be seen in a hierarchy: axioms at the bottom. Corollaries that follow from those axioms one level up. Corollaries that follow from those above that. And so on.


The designers seem to be trying to make both the axioms and the first level of corollaries clear. The player can take this action - an axiom. When the player takes that action, this will happen - a corollary. It would be possible for the UI to show the player absolutely everything. This would amount to the UI telling the player what sequence of actions to take to reach the optimal win. But that would be no fun. The designers avoid confusion about the rules, permitting fun in the discovery of strategies.


The developers often eschewed depth or interesting mechanics in order to retain clarity. If a mechanic was hard to explain, or hard to depict, they dropped it.


Source: https://www.rockpapershotgun.com/2018/03/05/into-the-breach-interface-design/


#notebook

The Annunciation, with Saint Emidius, Crivelli

The Annunciation, with Saint Emidius, Crivelli


#notebook

Agony in the Garden, Giovanni Bellini

Agony in the Garden, Giovanni Bellini


#notebook

The Wind That Shakes the Barley

The Wind That Shakes the Barley


#notebook

Miami Vice

Miami Vice


I love the way Mann used digital cameras to make the movement and colours much more lifelike.


#notebook

Human universals

Human universals





#notebook

Jacob

Jacob


#notebook

Miss Bala

Miss Bala


A film about a beauty queen who gets mixed up in the Mexican drug war. Really very well directed. The film captures the sensation of the main character as a person at the a point in the world, with people and events approaching and receding. Which is rather similar what life can feel like.


#notebook

Bennet Foddy talking to Steve Gaynor about game design, cricket and draws

Bennet Foddy talking to Steve Gaynor about game design, cricket and draws

S2E10_ToneControl_BennettFoddy.mp3


[Starts at 53m 50s.]


Foddy: There had never been a good video game adaptation [of cricket]. The context of a video game is totally wrong for cricket. Cricket is about trying to concentrate for five days with no break.


Gaynor: It is? Wait, tell me more about cricket.


Foddy: When you're batting, you're there for as long as it takes. Sometimes, one batsman's out at the crease for two or three days. He has to face hundreds of deliveries and...


Gaynor: Why??


Foddy: That's the game. Because he's got a big wide bat. And because in baseball you have to run if you hit the ball in play, but in cricket you do not have to run. You just have to defend your wicket. It's not that difficult of a task to do once. But to do it five hundred times is a difficult task. But we would never play a video game that took that amount of endurance. I had an idea of how I could redesign the game, capturing some of what I liked about cricket.


Gaynor: Wait...so...one batter is there...


Foddy: There's two batsmen. They are at opposite ends. Every time you hit it you try to run to the facing end.


Gaynor: So you have two batsmen. Are they hitting the balls at the same time at each other?


Foddy: No. No, only one at a time.


Gaynor: So you're saying it can take that many days because it can take that many days for either of them to get it through the wicket once.


Foddy: No, there's ten wickets on each side. So to win the game of cricket, I have to get ten players out twice. Each time is an innings. If we can do that within five days, we win. If we run out of time, it's a draw.


Gaynor: Jesus.


Foddy: Which is very, very common.


Gaynor: So, it's the second most popular game in the world after soccer? Why do people love ties so much?


Foddy: No a draw is not the same as a tie. You can also have a tie in cricket. That's very rare.


Gaynor: Oh, come on.


Foddy: That's when you get all the people out, their innings is over and the scores are tied.


Gaynor: [Laughs.]


Foddy: This is the biggest cultural difference between European and American game designers. I had a conversation with some of the folks from Riot, and Chris Hecker who was trying to design the matchmaking system for SpyParty. Chris was like, 'The problem is...your ranking in Sniper might be really good and your ranking as Sniper might be really bad.' [Meaning: Everyone should have to play both roles an equal number of times so their skills are fairly judged.] And I said well why don't you just make it so that a match is [each person playing each role once]. And he's like, 'Well, then you could have a draw.' And I'm like, 'Fine! Let's have draws.' And Chris and the two guys from Riot immediately turned around in unison and say, 'Draws are boring.' It's just an axiom of American game design, because your sports don't allow draws. And also because of like, you know, rugged libertarianism and manifest destiny and capitalism and entrepreneurialism and empire.


#notebook

Holding my friend's daughter

Holding my friend's daughter


#notebook

Steve Jobs, The Lost Interview

Steve Jobs, The Lost Interview

Steve Jobs - The Lost Interview - YouTube


#notebook

Steve Jobs, Computerworld Information Technology Awards Program interview

Steve Jobs, Computerworld Information Technology Awards Program interview

Steve Jobs - Interview 1995 Unabridged, Full Length - YouTube


#notebook

Lobe.ai

Lobe.ai

I greatly admire Mike Matas's work.


Matas has started a new startup. A visual interface to train image-based deep learning models.


Lobe - Deep Learning Made Simple


#notebook

Finnish island

Finnish island


#notebook

Western

Western


#notebook

Spelunky: verbs and traits

Spelunky: verbs and traits

In order to learn more about emergence, I analysed the verbs and object traits in Spelunky.


Verbs

I think this gets most of them. All the verbs in the fiction (throw, jump, hit etc) are domain-specific versions of these.



Traits


#notebook

Apple ads

Apple ads


1976


1976



1977


1981


#notebook

Apple: ten different approaches

Apple: ten different approaches

Apple designers come up with 10 entirely different mock ups of any new feature. Not, Lopp said, “seven in order to make three look good”, which seems to be a fairly standard practice elsewhere. They’ll take ten, and give themselves room to design without restriction. Later they whittle that number to three, spend more months on those three and then finally end up with one strong decision.


Pixel Perfect Mockups. This, Lopp admitted, causes a huge amount of work and takes an enormous amount of time. But, he added, “it removes all ambiguity.” That might add time up front, but it removes the need to correct mistakes later on.


— Helen Walters


#notebook

Splatoon 2

Splatoon 2



#notebook

Alan Kay on high quality research funding

Alan Kay on high quality research funding

http://worrydream.com/2017-12-30-alan/


#notebook

Bret Victor podcast interview

Bret Victor podcast interview


Bret%20Victor%20podcast.mp3


#notebook

Be proud of your death count. The more you die, the more you're learning.

Be proud of your death count. The more you die, the more you're learning.


#notebook

Steve Yegge on Jeff Bezos

Steve Yegge on Jeff Bezos

Amazon War Story #1


#notebook

The slides for Kay's talk about using your less healthy desires to drive you to get better at programming

The slides for Kay's talk about using your less healthy desires to drive you to get better at programming


#notebook

L'incoronazione di Poppea, Monteverdi

L'incoronazione di Poppea, Monteverdi


#notebook

How people use their Nintendo Switches

How people use their Nintendo Switches


#notebook

Simple React patterns, Lucas Reis

Simple React patterns, Lucas Reis


Loading data cleanliness


Solo render function pattern

const PlanetView = ({ name, climate, terrain }) => (
  <div>
    <h2>{name}</h2>
    <div>Climate: {climate}</div>
    <div>Terrain: {terrain}</div>
  </div>
);



Patterns for when the model code doesn't need to be reused

Mixed component pattern



export default class Dagobah extends React.Component {
  state = { loading: true };

  componentDidMount() {
    fetch("https://swapi.co/api/planets/5")
      .then(res => res.json())
      .then(
        planet => this.setState({ loading: false, planet }),
        error => this.setState({ loading: false, error })
      );
  }

  renderLoading() {
    return <div>Loading...</div>;
  }

  renderError() {
    return <div>I'm sorry! Please try again.</div>;
  }

  renderPlanet() {
    const { name, climate, terrain } = this.state.planet;
    return (
      <div>
        <h2>{name}</h2>
        <div>Climate: {climate}</div>
        <div>Terrain: {terrain}</div>
      </div>
    );
  }

  render() {
    if (this.state.loading) {
      return this.renderLoading();
    } else if (this.state.planet) {
      return this.renderPlanet();
    } else {
      return this.renderError();
    }
  }
}



Container/view pattern


class PlanetView extends React.Component {
  renderLoading() {
    return <div>Loading...</div>;
  }

  renderError() {
    return <div>I'm sorry! Please try again.</div>;
  }

  renderPlanet() {
    const { name, climate, terrain } = this.props.planet;
    return (
      <div>
        <h2>{name}</h2>
        <div>Climate: {climate}</div>
        <div>Terrain: {terrain}</div>
      </div>
    );
  }

  render() {
    if (this.props.loading) {
      return this.renderLoading();
    } else if (this.props.planet) {
      return this.renderPlanet();
    } else {
      return this.renderError();
    }
  }
}

class DagobahContainer extends React.Component {
  state = { loading: true };

  componentDidMount() {
    fetch("https://swapi.co/api/planets/5")
      .then(res => res.json())
      .then(
        planet => this.setState({ loading: false, planet }),
        error => this.setState({ loading: false, error })
      );
  }

  render() {
    return <PlanetView {...this.state} />;
  }
}

export default DagobahContainer;



Container/branch/view pattern


const LoadingView = () => <div>Loading...</div>;

const ErrorView = () => <div>Please try again.</div>;

const PlanetView = ({ name, climate, terrain }) => (
  <div>
    <h2>{name}</h2>
    <div>Climate: {climate}</div>
    <div>Terrain: {terrain}</div>
  </div>
);

const PlanetBranch = ({ loading, planet }) => {
  if (loading) {
    return <LoadingView />;
  } else if (planet) {
    return <PlanetView {...planet} />;
  } else {
    return <ErrorView />;
  }
};

class DagobahContainer extends React.Component {
  state = { loading: true };

  componentDidMount() {
    fetch("https://swapi.co/api/planets/5")
      .then(res => res.json())
      .then(
        planet => this.setState({ loading: false, planet }),
        error => this.setState({ loading: false, error })
      );
  }

  render() {
    return <PlanetBranch {...this.state} />;
  }
}

export default DagobahContainer;



Patterns for when the view needs to be decoupled from the model


Higher order component pattern


const withDagobah = PlanetViewComponent =>
  class extends React.Component {
    state = { loading: true };

    componentDidMount() {
      fetch("https://swapi.co/api/planets/5")
        .then(res => res.json())
        .then(
          planet => this.setState({ loading: false, planet }),
          error => this.setState({ loading: false, error })
        );
    }

    render() {
      return <PlanetViewComponent {...this.state} />;
    }
  };

export default withDagobah(PlanetBranch);




const hoc = withPlanet('tatooine')(PlanetView);

Render props pattern (AKA Children as function pattern)

class Dagobah extends React.Component {
  state = { loading: true };

  componentDidMount() {
    fetch("https://swapi.co/api/planets/5")
      .then(res => res.json())
      .then(
        planet => this.setState({ loading: false, planet }),
        error => this.setState({ loading: false, error })
      );
  }

  render() {
    return this.props.render(this.state);
  }
}

export default () => (
  <Dagobah
    render={({ loading, error, planet }) => {
      if (loading) {
        return <LoadingView />;
      } else if (planet) {
        return <PlanetView {...planet} />;
      } else {
        return <ErrorView />;
      }
    }}
  />
);



Context


Provider pattern

import React from "react";
import PropTypes from "prop-types";

const contextTypes = {
  dagobah: PropTypes.shape({
    loading: PropTypes.bool,
    error: PropTypes.object,
    planet: PropTypes.shape({
      name: PropTypes.string,
      climate: PropTypes.string,
      terrain: PropTypes.string
    })
  })
};

// provider

export class DagobahProvider extends React.Component {
  state = { loading: true };

  componentDidMount() {
    fetch("https://swapi.co/api/planets/5")
      .then(res => res.json())
      .then(
        planet => this.setState({ loading: false, planet }),
        error => this.setState({ loading: false, error })
      );
  }

  static childContextTypes = contextTypes;

  getChildContext() {
    return { dagobah: this.state };
  }

  render() {
    return this.props.children;
  }
}

// higher order component

const withDagobah = PlanetViewComponent =>
  class extends React.Component {
    static contextTypes = contextTypes;

    render() {
      const { props, context } = this;
      return <PlanetViewComponent {...props} {...context.dagobah} />;
    }
  };

const DagobahPlanet = withDagobah(PlanetView);



#medianotes #notebook

The Knick, Steven Soderbergh

The Knick, Steven Soderbergh


#notebook

Why project-based learning fails, James Koppel

Why project-based learning fails, James Koppel

  1. Write the networking component of a larger system.
  2. Write test cases for a small existing program that tempts you to make classic testing mistakes.
  3. Coordinate with coach to build something, committing pseudocode. The coach deliberately misunderstands your instructions and sees if you pick them up on it.
  4. Write small project in a team where tasks are divided up extremely small. Each person writes tests for another's code. (Integrates skills of 2 and 3.)

#notebook #medianotes

Chris Hecker interview

Chris Hecker interview

DN36_Chris_Hecker.mp3


DN37_Chris_Hecker.mp3


#notebook

Peak, Anders Ericsson and Robert Pool

Peak, Anders Ericsson and Robert Pool

Review

Some excellent techniques for deliberate practice. Includes plenty of supporting for skill being born of practice, not talent. A good accompaniment to Mindset.


Naive practice


Purposeful practice


Deliberate practice


#notebook #medianotes

Principles, Ray Dalio

Principles, Ray Dalio

#notebook

The Benjamin Franklin Method of Reading Programming Books

The Benjamin Franklin Method of Reading Programming Books


About this time I met with an odd volume of the Spectator. It was the third. I had never before seen any of them. I bought it, read it over and over, and was much delighted with it. I thought the writing excellent, and wished, if possible, to imitate it. With this view I took some of the papers, and, making short hints of the sentiment in each sentence, laid them by a few days, and then, without looking at the book, try'd to compleat the papers again, by expressing each hinted sentiment at length, and as fully as it had been expressed before, in any suitable words that should come to hand. Then I compared my Spectator with the original, discovered some of my faults, and corrected them.


— Benjamin Franklin, Autobiography



#notebook

Index pages: home, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12