threepointone

// murmurhash2 via https://gist.github.com/raycmorgan/588423

export default function doHash(str, seed) {
  var m = 0x5bd1e995;
  var r = 24;
  var h = seed ^ str.length;
  var length = str.length;
  var currentIndex = 0;

  while (length >= 4) {

threepointone

architectures and whatnot

1. plain ol' React

let state = initial
render(view(state), element)

• view is pure!

threepointone

// the big idea is to have a generator that runs 
// for the existence of the component's life.  

// so to answer the question "how many", assume a generator per component.
// this could be 10s, worst case 100s? 

// assume I'm using the super redux-saga library + some helpers (run, start, stop), 
// but this pattern would hold for js-csp, or any other generator type thing 

threepointone

[based on a true story]

So. Your friend's about to teach you how to make a website. Great!

You make a file, and you save it as 'index.html'. Why it's called 'index' isn't really explained to you, but whatever.

You type the following.

hello world

threepointone

// inifinite scrolling of content without extra wrappers 
const { render, findDOMNode  } = ReactDOMFiber

class App extends React.Component {
  render() {
  // wrap the root element with an Intersection Observer, exposing .observe for children
    return <Intersection>
      <div style={{ height: 200, overflow: 'auto' }}>
        <Page offset={0} count={10} />
      </div>

threepointone

// this is a generic runner for iterators 
// for every yield, it checks to see if any time is remaining 
// on the idle loop, and executes more work if so. 
// else, it queues up for the next idle period 

function go(it, callback){
  requestIdleCallback(deadline => {
    let val = it.next()
    while(!val.done){
      if(deadline.timeRemaining() <= 0){

threepointone

// consider the following code 

// a.js

class A extends Component {
  state = { B : undefined }
  componentWillMount(){
    import('./b.js').then(B => 
      this.setState({ B }))    
  }

threepointone

/* global React, ReactDOMFiber */
/* @jsx deferElement */
const { render, unstable_deferredUpdates  } = ReactDOMFiber

class Deferred extends React.Component {
  state = { next: false }
  componentDidMount() {
    unstable_deferredUpdates(() =>
      this.setState(state => ({ next: true })))
  }

threepointone

(also know as lies and/or alternative facts)

js

• setImmediate - doesn't set anything immediately, waits for a tick before executing
• setTimeout(fn, n) - never sets the timeout to exactly n
• Math.random() - computers cannot generate random numbers
• Promise - is a lie when rejected
• Array.reduce - accumulates, does not reduce (via @sbmadhav)

threepointone

function ensure(moduleId, fn, done){
  if(__webpack_modules__[moduleId]) {       //eslint-disable-line no-undef
    return done(undefined, __webpack_require__(moduleId))        //eslint-disable-line no-undef
  } 
  fn().then(Module => done(undefined, Module), done)
}


// usage
ensure(require.resolveWeak('./x.js'),