jasonrhodes

Jason Rhodes / Speaking and Writing CV

This is a list of links to slides, videos, and other information about tech talks I've given, as well as links to blog posts and articles I've written. They're in reverse chronological order. All of my slide decks can be found on my Speaker Deck profile, as well.

Blog Posts and Articles

• How to Draw an Owl with React: A Migration Story
• Getting Started with React: Angular Edition
• Easy Heroku-like git deployments with Dokku and Digital Ocean
• Hey Baltimore JavaScripters, What's Up? --> The start of CharmCityJs

jasonrhodes

What's new with React, 2018 edition

Slides: https://speakerdeck.com/rhodesjason/whats-new-with-react-2018-edition

Links:

• Fiber demo: https://claudiopro.github.io/react-fiber-vs-stack-demo/
• React 16 blog post (fragments, portals, error boundaries, fiber): https://reactjs.org/blog/2017/09/26/react-v16.0.html
• React 16.3 blog post: https://reactjs.org/blog/2018/03/29/react-v-16-3.html
• Dan Abramov's awesome JSConf Iceland talk about Async Rendering (Time Slicing/Suspense): https://www.youtube.com/watch?v=v6iR3Zk4oDY
• More from the React team re: async rendering: https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

jasonrhodes

// You can chain a list of this type of "chainable" http function with "callback hell"
chainA({ cb: (results) => 
  chainB({ results, cb: () => 
    chainC({ cb: (results) => 
      chainD({ results }) 
    }) 
  }) 
})

// But I want a helper with this API:

jasonrhodes

import { Route } from 'react-router-dom'

export default function Redirect({ to, from, ...rest }) {
  return <Route path={from} {...rest} render={({ location }) => (
    <Redirect to={{ ...location, pathname: to }} />
  )} />
}

jasonrhodes

/**
 * This file: https://github.com/facebook/react/blob/fb85cf2e9c52a4b2999144a89a6ee8256aec55c7/packages/react/src/ReactContext.js
 * if you remove the <flow> stuff and the "calculate changed bits" stuff, it appears to be
 * a function that, when called, returns an object literal with some weird circular references?
 *
 * How is this working / what am I missing here?
 */
export function createContext(defaultValue) {
  const context = {
    $$typeof: REACT_CONTEXT_TYPE,

jasonrhodes

Say you have a function that takes a single argument like this:

// return a string date that is "n" days before "right now"
function backInTime(n) {
  return subtract(new Date(), n, 'days').toString();
}

So if you call this (on Thurs, Feb 22) a few times in a row (pretending each one takes a full second to run) you would get:

jasonrhodes

#!/bin/sh
#
# To enable this hook, rename this file to "post-merge".

# We could probably run composer update here, but this is safer for now

if git diff --name-only HEAD^1 | grep composer.json >/dev/null
then
	echo ' '
	echo '#############################################################################'

jasonrhodes

The Rules

1. Action creators must return something "simple". A plain object, a simple function call, or at worst: a thunk.
2. Internal API call logic must be encapsulated and abstracted away out of sight
   • authorization token decoration
   • refresh and retry logic
   • logout on fail logic
3. External API calls are subject to the same async processing as internal API calls (pending, success, fail events at minimum)
4. Internal API results trigger notifications for success and fail, according to a limited set of rules
5. Calls can be correctly chained (i.e. failures exit the chain), with access to previous call's response

jasonrhodes

<?php

/**
 * Load WordPress
 * 
 */

define('WP_USE_THEMES', true);
require 'vendor/wordpress/wordpress/wp-blog-header.php';

jasonrhodes

function getNameWithLetAndConst(options) {
  // `name` scoped to its nearest parent block (here: the function-block)
  let name = 'Jill'
  
  if (options.test) {
    // `combined` is scoped to its nearest parent block (here: the if-block)
    // because of how block-scoping works, `name` is also available here
    const combined = `${name}-tested`   
    
    if (options.someCondition) {