Wilson Page wilsonpage

Wilson Page

Front-end Software Engineer

[email protected] | +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

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.

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:

	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 => {

	!((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; }

	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');


	function MyClass(external) {
	this.external = external;
	}

	MyClass.prototype.publicMethod = function() {};
	MyClass.prototype.privateMethod = function() {};

	module.exports = function () {
	var myClass = new MyClass(this);