How I End My Incomplete Coding Sessions

Ryan Florence -

I've got kids, work from home, have employees, etc. So I've had to learn to code in small blocks of time.

It's actually super simple, I make a "YOU WERE HERE" comment with everything that's in my brain RIGHT THAT SECOND:

// YOU WERE HERE: you need the whole dang manifest,
// not just the EntryManifest, but in the browser
// you'll only have the EntryManifest
//
// - right now just create a full dang entry manifest
//   out of everything
// - that's what the browser has (or will have, we'll
//   have to go to the manifest endpoint go get it
//   WHILE dealing with links
// - would be cool to figure out how not to block for
//   that manifest request but deal with that later
let { preload, block } = createLinkArgs(assetManifest);

The second thing I do is commit ALL THE TIME. Even code that doesn't work yet. This way I can also look at my dirty working tree, or my last couple commits to remember which code I most recently touched. Before pushing my code or making a PR I go rebase and squash everything into one commit (or however many make sense, but it's rarely more than 3).

Finally, I keep notes along with a constantly evolving checklist as I code. Checklist is always at the top that contains my best guess for how to implement the feature.

For example, here are my notes RIGHT THIS SECOND as I type this post out:

# Route Module Links

- [x] refactor transition block
- [-] Document request
  - [x] send preload/block/data to link
  - [x] server render `<Links/>`
  - [ ] implement blocks (just CSS really, use rel=stylesheet, that's it)
- [ ] Hydration - verify it works
- [ ] Browser Transition
  - [ ] call links in transition
  - [ ] send preload/block/data to link
  - [ ] render preloads
  - [ ] await blocked links before completing transition (use `onload`)
  - [ ] do tricks w/ rendering current/next link tags
    - [ ] style change "rel" from "preload" to "stylesheet"
    - [ ] image just leave as preload, the `<img>` tag will get it from the cache
- Errors can be ignored
  - Preload route loader errors will just be browser cached, so they will do the right thing on the transition
  - Everything else is just preload, so whatever error handling needs to happen needs to happen where it's used as if it wasn't preloaded
  - For now I guess? Maybe it would be cool to have nice error handling all wired up for you on assets. Stylesheet fails to load? ErrorBoundary. Image fails to load? ErrorBoundary. I dunno.

---

## Manifests

- Seems like we could operate on just one type (`BuildManifest`)
- we make various types that just transform or create partials from it
- Need just one type since both server and client use it, server has
  full build manifest, client has an entry manifest that gets patched.
- I think they all have the same information, just in different shapes

## Server

- preload: just put preload in there! Nothing special to do
- block
  - style: just put a normal style link in there, no preload
  - image: use preload, probably almost never want to block for this, but you can in the browser, use placeholders!
  - script: not implemented yet, put it in your routes dependencies from npm like anything else, we'll code split it out and load it asynchronously already

## Browser

- preload: nothing to do in the transition

- In the transition block

  - get the links
  - filter out the non-blockers
  - await the blocking assets
    - when we go pending, make sure assets are rendered in the `<Links/>`
  - when complete

    - css: just flip from `rel=preload` to `rel=stylesheet` to avoid as second request
    - image: leave it as a preload, the `<img/>` that asks for it will trigger the browser to use the cache
    -

  - after getting data for a route (not after all routes, do as much in parallel as possible)
  - block on all the `block.<type>` calls
  - the rest can just be dumped in there at render time

- Automatically block on stylesheets? Probably not, maybe an interaction loads it

https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/

- put all the links in preloads
- then `onload` set their rels to "stylesheet" or whatever
- give them all keys and concat with "current" links
- while pending, half are preload, half are not
- after pending, old ones are gone, new ones flip over to real things 🤯


`` `
import css from "url:./something.css";

export let links: Links = ({ block }) => {
  return [
    block.style(css),
    block.script(randomScript)
    block.image(randomScript)
    block.font(randomScript)
  ];
};

let links = useLinks();
preloads.assets = [];
preloads.loadedAssets = [{ rel, as, href }];
`` `

As I code, I make notes about what I'm doing or learning, what issues I'm bumping into. That in turn leads to adjusting or completing items in the checklist.

All this is to say, when I get back to my editor and read my "YOU WERE HERE" comments my brain gets right back to where it was I'm right back at it.


Hi, I'm Ryan! I've been a webmaster since that was a thing. You might know me from React Router, Remix and Reach UI. You can follow me on Twitter, GitHub and YouTube.