Skip to content

Instantly share code, notes, and snippets.

View wilsonpage's full-sized avatar

Wilson Page wilsonpage

View GitHub Profile

Wilson Page

Front-end Software Engineer

wilsonpage@me.com | +44 772 338 0068 | @wilsonpage | github.com/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
wilsonpage / storage.js
Created September 11, 2015 14:25
Simple localStorage like wrapper around indexeddb
function Storage(name) {
this.ready = new Promise((resolve, reject) => {
var request = window.indexedDB.open(location.origin);
request.onupgradeneeded = e => {
this.db = e.target.result;
this.db.createObjectStore('store');
};
request.onsuccess = e => {
@wilsonpage
wilsonpage / umd-module.es6.js
Created June 17, 2015 13:26
A module wrapper that supports AMD, CommonJS and Window Globals
!((define)=>{define((require,exports,module)=>{
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:{}};
c(n=>w[n],m.exports,m);w[n]=m.exports;};})('moduleName',this));
document.addEventListener('navigationstart', e => {
e.waitUntil(new Promise(resolve => {
// Do animation however you please:
// - WebAnimations https://w3c.github.io/web-animations/
// - CSS transitions
// - CSS @keyframe
// - rAF
resolve(); // ... then call resolve when complete
});
@navigation-enter(0.5s) {
html {
background-color: transparent;
animation: fade-in 0.5s;
}
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
@wilsonpage
wilsonpage / my-manager.js
Created May 1, 2015 18:29
Running a service in Window or Worker
threads.manager({
my-service: {
src: 'window.html',
type: 'window'
},
// my-service: {
// src: 'worker.js',
// type: 'worker'
// }
var XFooPrototype = {
createdCallback: function() {
this.createShadowRoot({ mode: 'open' });
new MutationObserver(() => distribute(this)).observe(this, { childList: true });
distribute(this);
}
}
function distribute(host) {
var slots = host.shadowRoot.querySelectorAll('content');
@wilsonpage
wilsonpage / credit.md
Last active August 29, 2015 14:19 — forked from annevk/credit.md

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.

function MyClass(external) {
this.external = external;
}
MyClass.prototype.publicMethod = function() {};
MyClass.prototype.privateMethod = function() {};
module.exports = function () {
var myClass = new MyClass(this);
@wilsonpage
wilsonpage / version-controlled-packages-in-gaia.md
Last active March 3, 2020 08:30
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.

Global

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: