Skip to content

Instantly share code, notes, and snippets.


Joe Critchley joecritch

View GitHub Profile
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 / MyComponent.js
Last active Aug 25, 2020
Passing specific props in React / JSX
View MyComponent.js
class MyComponent extends React.Component {
render() {
const {location, todos, users} = this.props;
// ... do things with your variables!
return (
<MyChild {...{location, todos, user}} />
// equivalent to:
// <MyChild location={location} todos={todos} user={user} />
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'
joecritch / gist:1476393
Created Dec 14, 2011
Basic auth middleware for Node.js Express
View gist:1476393
function basic_auth (req, res, next) {
if (req.headers.authorization &&'Basic ') === 0) {
// fetch login and password
if (new Buffer(req.headers.authorization.split(' ')[1], 'base64').toString() == 'usernamehere123:passwordhere123') {
console.log('Unable to authenticate user');
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 / _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