joecritch

PHP Sanity Check

This is a rudimentary script that checks for runtime errors, such as undefined variables in template partials.

joecritch

function updateIn(tree, indexPath, replacement, childrenKey = 'children', depth = 0) {
  function insert(ins) {
    return tree
      .slice(0, indexPath[depth])
      .concat([ins])
      .concat(tree.slice(indexPath[depth] + 1));
  }

  const lastDepth = indexPath.length - 1;

joecritch

• Context: I'm trying to load a jQuery plugin asynchronously, with Webpack code splitting. (I definitely don't want this as part of my main bundle, haha!)
• I didn't use singlechunk.js because I want jQuery to be cached as its own dependency (in case I need to lazy load a different plugin somewhere else)
• I'm currently using multichunks-but-blocking.js, but the waterfall shows that it waits for jQuery to finish downloading before attempting intl-tel-input.
• Is there a way to download both jquery and intl-tel-input chunks in parallel, then execute once they're both downloaded? I'm guessing I might be able to use Promise.all, but struggling to get my head around what's meant to be static, etc.

(p.s. I can't use import() because I'm using Bublé)

joecritch

import Barba from 'barba.js';
import createBehavior from '../helpers/createBehavior';

const StylesheetLoader = createBehavior('StylesheetLoader', {
  getStylesheetHrefs(container) {
    const hrefs = container.getAttribute('data-StylesheetLoader-hrefs');
    if (hrefs) {
      return JSON.parse(hrefs);
    }
    return [];

joecritch

<!-- country codes (ISO 3166) and Dial codes. -->
<select name="country_code">
  <option value="44" selected>🇬🇧 United Kingdom (+44)</option>
  <option value="1">🇺🇸 United States (+1)</option>
  <optgroup label="Other countries">
    <option value="213">🇩🇿 Algeria (+213)</option>
    <option value="376">🇦🇩 Andorra (+376)</option>
    <option value="244">🇦🇴 Angola (+244)</option>
    <option value="1264">🇦🇮 Anguilla (+1264)</option>
    <option value="1268">🇦🇬 Antigua &amp; Barbuda (+1268)</option>

joecritch

<?php
$errors = array();

function redbox($no, $str, $file, $line) {
  global $errors;
  $errors[] = array(
    'no' => $no,
    'str' => $str,
    'file' => $file,
    'line' => $line,

joecritch

# ECMAScript features to know for "A Day of React"

- **You'll need to know ES5, then some features from ES2015.**

Learn the following from the ES2015 specification (See "Learn ES2015": https://babeljs.io/learn-es2015/)

- Arrows and lexical 'this'
- Template Strings
- Destructuring
- Default + Rest + Spread

joecritch

Mocking config data in tests

Structure

• Each option has a set of values, which come from the app state
• Options also each have a config, which are defined in configs.js (potentially a large list, with 'dynamic' data-like variations)

The tests

We're testing the summarise function. To isolate my tests, I've mocked the option configs. This means we don't have to couple the test to certain option configs, which allows an author to change the settings (e.g. option names) freely.

joecritch

// Highly based on an example from https://medium.com/@cpojer/effective-javascript-codemods-5a6686bb46fb

module.exports = function(file, api) {
  var j = api.jscodeshift;
  var root = j(file.source);

  const update = path =>
    j(path).replaceWith(j.objectExpression(
      flatten(path.value.arguments.map(p =>
        p.type === 'ObjectExpression'

joecritch

Links from "Intro to React" talk

by Joe Critchley, at The Dev Bakery, Altrincham

REPLs

• "Bin" style DOM-REPL for React — http://react.run
• JSBin! (Turn on "React (JSX)" support — http://jsbin.com
• Babel REPL - https://babeljs.io/repl/