Tuesday is Link Day

Business, teamwork and marketing

Interesting article about assessing developer (and designer, I guess) performance: https://medium.com/javascript-scene/assessing-employee-performance-1a8bdee45c1a

There’s a new version of the web developers SEO cheat sheet: https://moz.com/blog/seo-cheat-sheet

Working with other: the sliding scale of giving a f**k (language warning): http://bit.ly/1Gn8XKc

Seth Godin on making faster decisions: http://sethgodin.typepad.com/seths_blog/2015/05/how-to-go-faster.html

Beware of calendars: https://medium.com/@monteiro/the-chokehold-of-calendars-f70bb9221b36

“Writing for the web with style and purpose”: http://www.nicelysaid.co/

Voice and tone – writing email newsletters (and more): http://voiceandtone.com/


The big news over the last couple of weeks has been Facebook Instant Articles, which FB have been touting as the answer to – get this – slow websites. Lots of articles about this news.

Facebook has made performance a high priority for the entire web: http://alistapart.com/column/instant-web

There needs to be a cultural change (Jeremy Keith): https://adactio.com/journal/8956

Tim Kadlec: performance is a cultural problem: http://timkadlec.com/2015/05/choosing-performance/

Facebook and the media: united, they attack the web: https://www.baldurbjarnason.com/notes/media-websites-vs-facebook/ (fantastic article)

Thoughts on the business motivations behind Facebook Instant Articles: http://www.theawl.com/2015/05/what-could-go-wrong

Other performance articles

Parts 1 and 2 of a 3 part series on page weight:

1 – understanding page weight: http://mobiforge.com/research-analysis/understanding-web-page-weight

2 – measuring page weight: http://mobiforge.com/design-development/measuring-page-weight

Very detailed case study of a performance rewrite for Base Creative: http://jaicab.com/2015/05/18/making-a-difference-with-performance/

Mobile first – perhaps the PC is the limiting factor in web tech: http://ben-evans.com/benedictevans/2015/5/14/mobile-first

Who initiates images downloads in IE? http://bigqueri.es/t/who-initiates-image-downloads/568

Animation performance tips: https://ada.is/blog/2015/04/26/animation-perf/


Practical ARIA examples: http://heydonworks.com/practical_aria_examples/

Accessibility resources: http://www.iandevlin.com/blog/2015/05/accessibility/accessibility-resources

21st May was Global Accessibility Awareness Day. Videos of the talks given will soon be available at http://www.inclusivedesign24.org/

Design and UX

The 10 commandments of good web form design: http://mono.company/journal/design-practice/the-10-commandments-of-good-form-design-on-the-web/

One from the archives: applying good design principles to the humble airline boarding pass: http://petesmart.co.uk/rethink-the-airline-boarding-pass/

“Hamburger” menus mystify most people (BBC): http://www.bbc.co.uk/news/magazine-31602745

Hamburger wars, a presentation by Michael Ryan: http://www.slideshare.net/ryaninteractive/hamburger-wars-5-2015

Brad Frost’s call-to-arms: http://bradfrost.com/blog/post/perform/

Fantastic article about why design is everyone’s responsibility: http://www.uie.com/articles/designing_without_a_designer/ (remember: design is not just how it looks, but how it works)

Sometimes we need to slow users down a bit: http://alistapart.com/article/meta-moments-thoughtfulness-by-design

Gerry McGovern say it like it is: http://www.gerrymcgovern.com/new-thinking/if-you-love-customer-your-organization-will-hate-you

UX is UI: https://medium.com/@mikeatherton/ux-is-ui-105460807734

Conducting an interface inventory: http://bradfrost.com/blog/post/conducting-an-interface-inventory/

Using Consistency To Improve The User Experience Across Desktop And Mobile : http://usabilitygeek.com/using-consistency-to-improve-the-user-experience-across-desktop-and-mobile/

Functional animations in UX design: http://www.smashingmagazine.com/2015/05/14/functional-ux-design-animations/

Code For America style guide (love the musical note values for layout): https://style.codeforamerica.org/

Progressive enhancement

Myth-busting progressive enhancement: http://www.sitepoint.com/javascript-dependency-backlash-myth-busting-progressive-enhancement/

Progressive enhancement for non-online experiences, in this example an airport: http://christianheilmann.com/2015/05/24/the-ryanair-approach-to-progressive-enhancement/

The true cost of progressive enhancement: https://medium.com/@AaronGustafson/the-true-cost-of-progressive-enhancement-d395b6502979

Jeremy Keith (my hero) hits the nail on the head with regard to browser support: https://adactio.com/journal/8982


Solved by Flexbox – examples using Flexbox to implement tricky common layouts: https://philipwalton.github.io/solved-by-flexbox/

10 principles for effective front-end development by Harry Roberts: http://www.thedotpost.com/2014/11/harry-roberts-10-principles-for-effective-frontend-development

JavaScript for Cats: http://jsforcats.com/ If a cat can learn JavaScript then so can you.

Also: Good (re)introduction to JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript

I’ve only just heard of this comic, but it’s a goodie: http://notinventedhe.re/on/2015-5-19

Thoughts on migrating to a microservices architecture: http://boringgeek.com/thoughts-on-migrating-to-a-microservices-architecture/

“Browserhacks is an extensive list of browser specific CSS and JavaScript hacks”: http://browserhacks.com/

Christian Heilmann (from Microsoft) video presentation about using the latest JavaScript features without breaking everything: https://channel9.msdn.com/Events/WebPlatformSummit/2015/Advancing-JavaScript-without-breaking-the-web

This is so true; curiosity is a highly-important part of being a good developer: http://boyd.multerer.com/posts/2015/05/curious_programmer

A developer at Twitter talks about technical debt: https://phuu.net/2015/05/12/technical-debt.html

Free ebooks from Microsoft: http://www.microsoftvirtualacademy.com/ebooks

An introduction to graphical effects in CSS: http://blogs.adobe.com/dreamweaver/2015/04/an-introduction-to-graphical-effects-in-css.html

PPK lights a fire under web developers’ current obsession with tools: http://www.quirksmode.org/blog/archives/2015/05/tools_dont_solv.html


I’m not sure of the usefulness of this, but the idea is good: http://mobilewebtest.eu/

Guide to online research and testing tools: http://boxesandarrows.com/your-guide-to-online-research-and-testing-tools/

In other news

A Qualitative Study of Internet Non-Use in Great Britain and Sweden (PDF) : http://spir.aoir.org/index.php/spir/article/download/10/pdf

Remember the 5K competition? I do, and it was 15 years ago! Sheesh, I’m old… http://alistapart.com/blog/post/fifteen-years-ago-in-ala-much-ado-about-5k

Fantastic guide to the WWW from the BBC: http://www.bbc.co.uk/guides/z2nbgk7

Incognitube: the least watched YouTube videos: http://www.incognitube.com/

Wednesday is Link Day

Here we are again, a lovely set of links for you to enjoy.


A beginners guide to high-performance website (free 89-page course): http://gomakethings.com/wicked-fast-websites/

Think you know web performance? Take the quiz: http://www.webspeedgeek.com/quiz/content/home.aspx (but check out the leaderboard, some Very Clever People on there)

Open source performance dashboard: http://www.peterhedenskog.com/blog/2015/04/open-source-performance-dashboard/

Performance bookmarklet, Chrome and Firefox extension: https://github.com/micmro/performance-bookmarklet

Free course on browser rendering optimization: https://www.udacity.com/course/browser-rendering-optimization–ud860

More weight doesn’t mean more wait: http://www.filamentgroup.com/lab/weight-wait.html but this does not mean that page weight doesn’t matter

Tips for surviving Google’s “Mobilegeddon”: http://www.aaron-gustafson.com/notebook/tips-for-surviving-googles-mobilegeddon/

Design and accessibility

Revisiting the Priority+ pattern: http://bradfrost.com/blog/post/revisiting-the-priority-pattern/ (also contains links to other useful navigation patterns)

There is no fold: http://www.lukew.com/ff/entry.asp?1946

Practical ARIA examples: http://heydonworks.com/practical_aria_examples/

Accessibility is not what you think: https://boagworld.com/accessibility/accessibility-is-not-what-you-think/

In search of a living design system: https://the-pastry-box-project.net/jina-bolton/2015-March-28 (contains great examples)

Using flexbox today: http://chriswrightdesign.com/experiments/using-flexbox-today/

10 methods for optimizing your forms for mobile devices: http://speckyboy.com/2015/03/30/10-methods-for-optimizing-your-forms-for-mobile-devices/

Web tech

There’s a new browser on the block: https://www.microsoft.com/en-us/windows/browser-for-doing?wt.mc_id=MM13J6

Microsoft have launched a new developer site specifically about their new Edge browser: http://dev.modern.ie/

Visual Studio 2015 now has a network tool: http://blogs.msdn.com/b/visualstudio/archive/2015/05/04/introducing-visual-studio-s-network-tool.aspx

Build cross-platform desktop apps with web technologies: http://electron.atom.io/


Think of starting your own software company? Here’s the handbook: http://www.singlefounderhandbook.com/

Clarifying what is meant by “minimum viable product”: http://blog.heyimcat.com/ (scroll down to the article named “It’s called ‘ship’ not ‘sh*t’” – the email system doesn’t like profane language)

“There is a difference in how well businesses decision makers think industries are able to provide application technologies and how well consumers believe the same industries are actually delivering”: http://www.gerrymcgovern.com/new-thinking/bridging-senior-management-disconnect-digital by the very, very clever Gerry McGovern

The one-minute test: https://medium.com/@jmspool/the-one-minute-test-68738cb111ea a great idea for the end of any meeting

The web’s grain by Frank Chimero: http://www.frankchimero.com/writing/the-webs-grain/ (I put this under “business” as it’s something that managers should read so they understand what the web is really about)

A/A testing: http://kadavy.net/blog/posts/aa-testing/ – important points about “statistically significant” numbers


Reference for HTML characters: http://htmlarrows.com/

Package a web app as a native app across Android, iOS and Windows: http://www.manifoldjs.com/

Explore and master Chrome DevTools: http://discover-devtools.codeschool.com/

9 truths that computer programmers know that most people don’t: http://macleodsawyer.com/2015/03/06/nine-truths-computer-programmers-know-that-most-people-dont/

Progressive enhancement with handlers and enhancers: https://hiddedevries.nl/en/blog/2015-04-03-progressive-enhancement-with-handlers-and-enhancers (bonus link:http://performerjs.org/)

And finally…

Pay a granny to knit for you: http://www.granniesinc.co.uk/

Saturday is Link Day

For several years I have been sharing links with work colleagues, giving my emails the snazzy name of ” is Link Day!”. The day, of course, is the day I send the email. I have been silly in not also sharing these links on my blog, not because of the thousands of regular reads I have (ha!) but because I regularly find really useful resources I easily forget about. So, without further ado, is my latest Link Day:

Performance/UX/Responsive design

Google have expanded their Web/Fundamentals section with great information on website performance: https://developers.google.com/web/fundamentals/performance/

Incredibly detailed case study of a performance audit for several sites by speed genius Paul Irish: http://www.paulirish.com/2015/advanced-performance-audits-with-devtools/

Improve mobile UX with these six podcasts: http://www.uie.com/brainsparks/2015/03/06/improve-your-mobile-ux-with-these-six-podcasts-2/

An oldie but a goodie. Leeds lad Harry Roberts gives a great overview of performance tweaks to make on websites: http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/

The BBC news site is now fully responsive: http://responsivenews.co.uk/post/114413142693/weve-made-it

Presentation by Bruce Lawson on responsive images: http://brucelawson.github.io/talks/2015/respimg/ (can’t find a video, sorry)

Jeffrey Zeldman on progressive enhancement, and what it means for wearables: https://the-pastry-box-project.net/jeffrey-zeldman/2015-March-21

Oh my word, Kathy Sierra has a new book out: http://www.amazon.com/Badass-Making-Awesome-Kathy-Sierra/dp/1491919019/ref=sr_1_1?ie=UTF8&qid=1425149544&sr=8-1&keywords=badass&tag=rnwap-20 (here’s a trailer video: https://vimeo.com/122214185)

Lots of performance tooling resources: http://perf-tooling.today/

Strategies for staying on top of web performance: https://css-tricks.com/strategies-for-staying-on-top-of-web-performance/


There is ample evidence to suggest that increasing accessibility of a website increases interaction and conversion. Here’s a list of sites that get accessibility right: http://a11ywins.tumblr.com/

Penman Ross (16 years old!) nails why progressive enhancement matters: http://alistapart.com/article/let-links-be-links

Yet another company in a lawsuit over web accessibility: http://the-digital-reader.com/2015/03/20/scribd-faces-setback-in-lawsuit-over-accessibility/


Anna Debenham has put together a great set of resources about Style Guides: http://styleguides.io/

A set of lovely loaders in pure CSS: http://connoratherton.com/loaders

Huge set of design patterns for inspiration: http://www.pttrns.com/

“A collaborative research project aimed at designing better tools and practices for learning web development”: http://openhtml.org/


Free course on JavaScript design patterns: https://www.udacity.com/course/ud989

Interactive tutorial and reference site for the Markdown formatting language: http://thisismarkdown.com/

If you want to get into Angular don’t forget accessibility: http://simplyaccessible.com/article/spangular-accessibility/

Good writeup of use of flexbox for a site header: http://www.lottejackson.com/blog/with-a-spoonful-of-flexbox

Open source book on JavaScript development: https://github.com/getify/You-Dont-Know-JS

Business, teamwork and general interest

We know strategy is important, and execution of that strategy more important still. So why do they often unravel? https://hbr.org/2015/03/why-strategy-execution-unravelsand-what-to-do-about-it Contains the great line “no Gantt chart survives contact with reality”.

Don’t say the solution is easy until you’ve worked out what the problem is: http://curtismchale.ca/2014/10/21/dont-say-its-easy-you-have-no-idea-yet-if-it-is-easy/

The illusion of free: an essay by Laura Kalbag: http://alistapart.com/column/the-illusion-of-free

And finally

“A website should be so easy to use a drunk user could use it”. This guy will test that for you: http://theuserisdrunk.com/

You may not have heard of “the mother of all demos” (fascinating story: http://en.wikipedia.org/wiki/The_Mother_of_All_Demos) but it’s now an opera: http://www.wired.com/2015/03/epic-demo-computer-history-now-opera/

“Public shaming as a blood sport has to stop”. Monica Lewinsky on the price of shame: http://www.ted.com/talks/monica_lewinsky_the_price_of_shame

BusinessTown, inspired by Richard Scarry: http://welcometobusinesstown.tumblr.com/

Submarine cable map 2015: http://submarine-cable-map-2015.telegeography.com/

Spotlight: jQuery plugin

Recently I worked on a website help system, the main feature of which was to highlight particular elements on areas of the page. You know the kind of thing: ‘Click the highlighted search button to search your data’. The designs I was given showed the web page covered by a semi-transparent grey overlay, except for the areas that needed highlighting.

Here’s the problem. The shapes of the un-highlighted bits weren’t just rectangles; they were circles. So my immediate idea of using a bunch of absolutely-positioned <div> elements with opacity:0.6 wasn’t going to cut it.

I decided to use the <canvas> element, and after some digging found this excellent page on the Mozilla developer docs site that explains the different modes available for compositing multiple shapes in a single canvas element. This was the answer.

<canvas> is supported by IE9 and above, which was acceptable for the project I was working on. If you need support for older IEs then this looks like a good solution.

Anyway, I thought this kind of approach might be useful for others so I’ve written a small jQuery plugin called Spotlight which allows you to put a spotlight on elements on your page. See a quick demo here.

See the plugin on GitHub.

Progressive Enhancement

I recently sent this as email to a colleague. You’ll be glad to know we sorted things out :0)

The little chat we had last week about AngularJS has been playing on my mind. As you know I’m not against JavaScript (I love it, and have even written an Open Source JavaScript library) and I have a personal project partly planned to try out AngularJS, which looks awesome.

However, your comment that “progressive enhancement is one way to do it” (emphasis mine) bothers me. A lot. I’ve heard this attitude from a lot of developers, and I believe it’s wrong. Not because I believe every website or app (more on the difference between those two things later) should never use JavaScript, but because it ignores the fundamental layers of the web which cry out for a progressive enhancement approach. These layers are:


Here’s how a browser works (more detail).

  1. It requests a URL and receives an HTML document
  2. It parses that document and finds the assets it needs to download: images and other media, CSS, JavaScript
  3. It downloads these assets (there are rules and constraints about how this happens which vary slightly from browser to browser, but here’s the basics):
    1. CSS files get downloaded and parsed generally very quickly, meaning the page is styled
    2. JavaScript files get downloaded one-by-one, parsed then executed in turn
    3. Images and other media files are downloaded

Let’s look at the absolute fundamental layer: the HTML document.


Way back in the beginning of the web there was only the HTML document on a web page; no CSS, no JavaScript (very early HTML didn’t even have images). In fact without HTML there is no web page at all: it’s the purpose of HTML to make a web page real. And a set of URLs, for example the URLs under a domain like my-site.com, which doesn’t return at least one HTML document is arguably not a website.

Yes, URLs can also be used to download other resources such as images, PDF files, videos etc. But a website is a website because it serves HTML documents, even if those document just act as indexes of the URLs of other (types of) resources.

HTML is the fundamental building block of the web, and software which can’t parse and render HTML (we’ve not even got to CSS or JavaScript yet) can’t call itself a web browser. That would be like software which can’t open a .txt file calling itself a text editor, or software which doesn’t understand .jpg files calling itself an image editor. So we have software – web browsers – which use URLs to parse and render HTML. That is the fundamental, non-negotiable, base layer of a web page, and therefore the web.

One of the great things about all HTML parsing engines is they are very forgiving about the HTML they read. If you make a mistake in the HTML (leave out a closing tag, whatever) they will do their best to render the entire page anyway. It’s not like XML where one mistake will make the whole document invalid. In fact that’s one of the main reasons why XHTML lost in favour of the looser HTML5 standard – because when XHTML was served with its proper MIME type a single syntax mistake would make the page invalid.

And if a web browser encounters elements or attributes it doesn’t recognise it will just carry on. This is the basis on which Web Components are built.

So even serving a broken HTML page, or one with unknown elements or attributes, will probably result in a readable document.


The next layer is CSS. At this point we’ve left the fundamentals and are onto optional components. That’s right – for a working web page CSS is optional! The page might not *look* very nice, but a well-structured page of HTML will be entirely usable even with no styling, in the same way that water is entirely drinkable without any flavourings.

But most – but not every – browser supports CSS (the basics of it, at least), so why do I treat it as optional? There are a few reasons. Firstly CSS might be turned off (which is very unlikely, but possible). But more importantly the CSS file might not be available or parsable:

  • The server hosting the CSS file may be offline
  • The file may be temporarily unreadable
  • The URL for the file may be wrong
  • DNS settings may be incorrect
  • The CDN may be down
  • The file may be empty
  • The file contains something that isn’t CSS or a syntax error

There may be lots of other problems, I’m sure you can think of some.

Now, any one of those errors could also be a problem with an HTML document. In fact if the document is being served from a CMS then there are a lot more things that could go wrong. But if any of those errors happen for an HTML document then the browser doesn’t have a web page to parse and render at all. Browsers have mechanisms to handle that, because everyone knows that URLs change all the time (even if they shouldn’t):


So CSS is optional; it is layered on top of the fundamental layer (HTML) to provide additional benefits to the user – a nicely styled page.

And in the same way that web browsers are forgiving about the HTML they parse, they are also forgiving about CSS. You can serve a CSS file with syntax errors and the parts the rendering engine *can* parse correctly it will, and will ignore the rest.

So if an HTML document links to a CSS file which contains partially broken syntax the page will still be partially styled.


Now we come to the top layer, the client-side script.

I don’t need to tell you that JavaScript is sexy at the moment, and rightly so – it is a powerful and fun language. And the fact it’s built into every modern web browser arguably gives it a reach far wider than any other development platform. Even Microsoft are betting their house on it, with Windows 8 apps built on HTML and JavaScript.

But what happens when JavaScript Goes Bad on a web page? Here’s the same quick list of errors for a CSS file I wrote about above:

  • The server hosting the JS file may be offline
  • The file may be temporarily unreadable
  • The URL for the file may be wrong
  • DNS settings may be incorrect
  • The CDN may be down
  • The file may be empty
  • The file contains something that isn’t JavaScript or a syntax error

Let’s stop right there and look at the final error. What happens if a browser is parsing JavaScript and finds a syntax error (not quite all errors, but a lot) or something it can’t execute? It dies, that’s what happens:

“JavaScript has a surprisingly simple way of dealing with errors ? it just gives up and fails silently”

Browser JavaScript parsing engines are still pretty forgiving, but *way* less forgiving than HTML and CSS parsers. And different browsers forgive different things. Now, you might think “Just don’t have syntax errors” but the reality is bugs happen. Even something as innocuous as a trailing comma in an array will cause older Internet Explorer to fail, but not other browsers.

So JavaScript, while powerful and cool, is also brittle and can easily break a page. Therefore it *has to be optional*.

Web apps

You might be thinking “Yes, but my site is a Web Application, so I need JavaScript.” OK, but what is a web app exactly? I can’t say it better than Jeremy Keith, so I’ll just link to his article.

Progressive enhancement

This is the crux of progressive enhancement. Here’s the recipe:

  • Start with a basic web page that functions with nothing but the HTML, using standard semantic mark-up. Yes, it will require full-page GET or POST requests to perform actions, but we’re not going to stop there – we’re going to enhance the page.
  • Add CSS to style the page nicely; go to town with CSS3 animations if you want
  • Add JavaScript to enhance the UI and provide all the modern goodies: AJAX, client-side models, client-side validation etc

The benefits are obvious:

  • If the JavaScript or CSS files (or both) fail for any reason whatsoever the page still works
  • The use of semantic HTML means the page is fully understandable by search engine spiders
  • Because everything is rendered in HTML, not built up in JavaScript, it is understandable immediately by assistive devices
  • Serving fully-rendered HTML is quicker than building that same HTML client-side
  • Built-in support for older – and newer – browsers and devices

The best web developers on the planet all argue that progressive enhancement is the best way to approach web development. I honestly have no idea why anyone would think otherwise. There’s a good article (it’s actually the first chapter of Filament Group’s “Designing With Progressive Enhancement” book) on the case for progressive enhancement here.

Modern JavaScript

There are some people who use juicy headlines (this is called “link-baiting”) which doesn’t help those developers who are trying to promote progressive enhancement, instead causing JavaScript-loving developers to proclaim “you hate JavaScript!”. You know what developers are like: they get hot-headed. It’s much better to try to think clearly and objectively about development and come up with solutions based on real data.

The reality is that most modern JavaScript libraries don’t support progressive enhancement out of the box: AngularJS included. If there were a way to render standard HTML with real links and forms and then enhance that HTML with Angular I would be all over it, but unfortunately I haven’t found anything that explains how to do it yet.

This is something which I’ve been thinking about a lot, and I did a little proof of concept for a basic data-binding system. I wonder if it would be possible to apply the same techniques to Angular.

For me personally I’m a big believer in progressive enhancement, not just for accessibility reasons but for front-end performance as well. I do recognise it will probably add time to development, however the same can be said for Test Driven Development. The goal for progressive enhancement and TDD is the same: a better, more stable foundation for systems.