Skip to content

Instantly share code, notes, and snippets.


Joe Critchley joecritch

View GitHub Profile
joecritch /
Last active Apr 6, 2018
PHP sanity check

PHP Sanity Check

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

joecritch / updatein.js
Last active Oct 10, 2017
Immutable tree "updateIn"
View updatein.js
function updateIn(tree, indexPath, replacement, childrenKey = 'children', depth = 0) {
function insert(ins) {
return tree
.slice(0, indexPath[depth])
.concat(tree.slice(indexPath[depth] + 1));
const lastDepth = indexPath.length - 1;
  • 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é)

View StylesheetLoader.js
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 / html_for_international_calling coes.htm
Last active Dec 15, 2020 — forked from andyj/html_for_international_calling coes.htm
HTML <select> international calling codes for each country... with emojis
View html_for_international_calling coes.htm
<!-- 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 / _redbox.php
Last active Jun 22, 2017
PHP redbox for errors
View _redbox.php
$errors = array();
function redbox($no, $str, $file, $line) {
global $errors;
$errors[] = array(
'no' => $no,
'str' => $str,
'file' => $file,
'line' => $line,
joecritch / gist:4e79fab2b084921e40fb71c60e159b9d
Last active Apr 20, 2017
A Day of React: ES features to know
View gist:4e79fab2b084921e40fb71c60e159b9d
# 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":
- Arrows and lexical 'this'
- Template Strings
- Destructuring
- Default + Rest + Spread
joecritch /
Last active Jul 26, 2016
A request for a code review of how to go about unit testing dynamic-like config data

Mocking config data in tests


  • 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 / object-assign-to-spread.js
Created Jul 14, 2016
Converts all Object.assign calls to { ... obj } spread.
View object-assign-to-spread.js
// Highly based on an example from
module.exports = function(file, api) {
var j = api.jscodeshift;
var root = j(file.source);
const update = path =>
flatten( =>
p.type === 'ObjectExpression'