Péter Schmíz peterschmiz

Lesson's learnt building the Guardian

Below is a collection of my favourite responses I gathered from Guardian engineers when asked the question: What have you learnt starting from scratch and building a mobile-first next generation web platform for the Guardian?

Daithi O Crualaoich

Work with great people.
Deploy like crazy. This means the team has to control the infrastructure as well as code.
Design is not a service. Designers have to sit in the team.
Infrastructure is intrinsically unreliable. Discard and replace is the robust strategy.
Use your CDN for HTML too.
Don't always do as you are told.

The issue:

..mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.

(from a new defunct https://developers.google.com/mobile/articles/fast_buttons article)

touch-action CSS property can be used to disable this behaviour.

touch-action: manipulation The user agent may consider touches that begin on the element only for the purposes of scrolling and continuous zooming. Any additional behaviors supported by auto are out of scope for this specification.

Update (August 2016)

Please take a look at these updated instructions on Github to troubleshoot issues you have with Windows and Tessel 2.

	/*
	* Copyright (c) 2010 Tobias Schneider
	* This script is freely distributable under the terms of the MIT license.
	*/

	(function(){
	var UPC_SET = {
	"3211": '0',
	"2221": '1',
	"2122": '2',

	/**
	* An implementation for Mergesort. Less efficient
	* than Quicksort. Again, you'd just use Array.sort
	* but if you found yourself unable to use that
	* there's always this option.
	*
	* Tests with:
	*
	* var array = [];
	* for(var i = 0; i < 20; i++) {

	<canvas id= "c"> </canvas>
	<button id="reset">new colours</button>
	<div id="info">
	<div id="top">
	<a target="_blank" id="site" href="http://lonely-pixel.com">my website</a>
	<a id="close" href="">close</a>
	</div>
	<p>
	<br>
	- Alter particles/groups with the GROUPS variable.<br><br>

	<!DOCTYPE html>
	<html>
	<head>
	<title>HTML5 Web audio capture + Speech Recognition</title>
	<link href="http://www.smartjava.org/examples/webaudio-filters/css/bootstrap.css" rel="stylesheet"/>
	</head>

	<body>
	<div class="container">
	<h1 class="pagination-centered">HTML5 Web audio capture + Speech Recognition</h1><br />

	function getUrlParams(search) {
	const hashes = search.slice(search.indexOf('?') + 1).split('&')
	const params = {}
	hashes.map(hash => {
	const [key, val] = hash.split('=')
	params[key] = decodeURIComponent(val)
	})
	return params
	}

	<!DOCTYPE html>
	<html>

	<head>
	<title>Sine Wave</title>
	<script type="text/javascript">
	function showAxes(ctx,axes) {
	var width = ctx.canvas.width;
	var height = ctx.canvas.height;
	var xMin = 0;