Skip to content

Instantly share code, notes, and snippets.


Wilson Page wilsonpage

View GitHub Profile

Wilson Page

Front-end Software Engineer | +44 772 338 0068 | @wilsonpage |

I am a front-end software engineer based in London. For the past three years I have been working at Mozilla. For the first two years I worked on a mobile operating system called FirefoxOS. I've spent the past year in the Connected Devices team developing new products.

Prior to Mozilla I was at the Financial Times working on large web-applications including the award winning FT Web App and The Economist Web App.

I most enjoy working at the view/presentation layer, producing fast, responsive interfaces, with the level of polish users expect from high-end applications today. I strive to make seemingly complex problems simple and easy to digest, breaking down large issues into

wilsonpage / storage.js
Created Sep 11, 2015
Simple localStorage like wrapper around indexeddb
View storage.js
function Storage(name) {
this.ready = new Promise((resolve, reject) => {
var request =;
request.onupgradeneeded = e => {
this.db =;
request.onsuccess = e => {
wilsonpage / umd-module.es6.js
Created Jun 17, 2015
A module wrapper that supports AMD, CommonJS and Window Globals
View umd-module.es6.js
module.exports = 'stuff';
});})((typeof define)[0]=='f'&&define.amd?define:((n,nn,w)=>{return(typeof
module)[0]=='o'?c=>{c(require,exports,module);}:(c)=>{var m={exports:{}};
View my-navigation-transitions.js
document.addEventListener('navigationstart', e => {
e.waitUntil(new Promise(resolve => {
// Do animation however you please:
// - WebAnimations
// - CSS transitions
// - CSS @keyframe
// - rAF
resolve(); // ... then call resolve when complete
View gist:3cfff759c592344449e2
@navigation-enter(0.5s) {
html {
background-color: transparent;
animation: fade-in 0.5s;
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
wilsonpage / my-manager.js
Created May 1, 2015
Running a service in Window or Worker
View my-manager.js
my-service: {
src: 'window.html',
type: 'window'
// my-service: {
// src: 'worker.js',
// type: 'worker'
// }
View gist:d5520bd8d22327633e33
var XFooPrototype = {
createdCallback: function() {
this.createShadowRoot({ mode: 'open' });
new MutationObserver(() => distribute(this)).observe(this, { childList: true });
function distribute(host) {
var slots = host.shadowRoot.querySelectorAll('content');

After Ryosuke, Travis, Wilson, William, and I discussed the problem for an hour over a burrito, William came up with this approach. All hail William.

View gist:ecfcd25203cc7ca91851
function MyClass(external) {
this.external = external;
MyClass.prototype.publicMethod = function() {};
MyClass.prototype.privateMethod = function() {};
module.exports = function () {
var myClass = new MyClass(this);
wilsonpage /
Last active Mar 3, 2020
Version controlled packages in Gaia

Version controlled packages in Gaia

If you are a Gaia hacker, you have two choices when using Bower controlled packages: global or local.


You can use shared/ just like any other Gaia shared piece of code. This means you always get the latest version of that package, this means that you run the risk of code changing, you're not depending on a locked version.

Updating packages in Gaia should be done/reviewed by the package owner. This is because they will have the best knowledge as to which apps are likely to be affected by the update, and whether any app changes are required to avoid breakage. The update steps, like all Bower controlled shared dependencies, are as follows: