David Moulton davidcmoulton

A good writer is a good thinker
Getting personal the why and how of designing for people
Give them what they need not what they want
Responsive images
Rethinking publishing
Beyond the browser with hybrid apps
Is Blink the new IE6?
Mystery speaker: Christian Heilmann
Enhancing responsiveness with flexbox

Setting up Lens

This is a work in progress, and is not a finished document.

This post douments how I've managed to set up Lens to run locally, and how I've been able bring into my Lens document a new node type, populated by the content of a custom element in the XML. It also includes some description and examples of what constitutes a Lens article node, and some more general notes on ways in to the code.

Prerequisites

The top level prerequisites to get you started are listed below. There will be some more you'll come across along the way, for specific, optional tasks.

git
nodejs

Axiom

A web page doesn't have to look exactly the same, or be experienced exactly the same in all browsers. When designing and building websites, it's to incorporate the advantages of modern web techniques for those browsers that support them, as long as the design and build is done in such a way that the core content and functionality is available to older browsers too. u

Introduction

Web standards, best practices and code conventions are the three different levels of coding goodness required to build a good quality site with respect to its client side code.

Web standards

Web standards describe the flavour of code to be used to build the website. These are the set of finalised or emerging standards from bodies that are recognised as owning the standards for a particular web technology. These are the W3C, WHAT-WG and ECMA.

	<!DOCTYPE html>
	<html class="no-js" lang="en">
	<head>
	<meta charset="UTF-8">
	<title>SVG with png fallback</title>
	<!-- Modernizr must have svg feature test included! -->
	<script src="PATH_TO_MODERNIZR"></script>
	<style>
	.image {
	/* Dimensions for this demo only. */

	(function (window, undefined) {
	// Counts all DOM elements by name & logs resulting object to console.
	var forEach = Array.prototype.forEach,
	counter = {},

	incrementElementCount = function (elementName) {
	if (counter.hasOwnProperty(elementName)) {
	counter[elementName] += 1;
	} else {
	counter[elementName] = 1;