The tough truth of reality

I make no secret of the fact I’m a huge progressive enhancement believer. The fundamental reason why I believe the vast majority of web sites (yes, and web apps) should be written using progressive enhancement principles is that we just don’t know how they will be accessed.

We live in a time where many of us have powerful multi-core computers in our pockets, ridiculously fast Internet connections, high resolution screens, advanced web browsers supporting the latest web technologies. But even if we are one of those luck few, things go wrong.

Networks drop packets, servers go down, DNS fails. Resources on pages (most notably JavaScript) can fail to load or fail to run because of all manner of errors – both within and outside our control. Why would you not want to build your site in such a way that makes it as robust as possible?

This is how many developers believe the modern world looks:

spectrum-lies

The vertical axis is the capabilities of networks, devices and browsers. The horizontal access is time. As time goes on networks, devices and browsers get better, faster, more fully-featured. That’s true, these things do make progress.

But this belief gives developers a false sense of security, thinking they don’t need to worry about the same things they worried about in the past: crappy network connections, devices with hardly any RAM, browsers that don’t support modern JavaScript APIs etc. They put their trust in The Blessed Void Of Obsolescence.

But the harsh reality is more like this:

spectrum-truth

We should think about the massive possible spectrum of circumstances under which a user could interact with our sites.

Because even with a modern device things still go wrong. A user with the latest version of Google Chrome will get frustrated if your site doesn’t work because a CDN fails to deliver a crucial JavaScript file. All they will know is that your site doesn’t work.

Progressive enhancement is not about “what if users turn JavaScript off” but “what happens when the page is loaded in sub-optimal circumstances”.

Wednesday is Link Day

A super bumper jumbo crop for you :0)

UX

Interface writing – code for humans: http://nicolefenton.com/interface-writing/

The best interface is no interface: http://www.nointerface.com/book/

Making companies competitive by expanding design’s role: http://www.uie.com/articles/expanding_design/ (more UIE goodness)

Style guides best practices, a presentation by Brad Frost: http://www.slideshare.net/bradfrostweb/style-guide-best-practices?sf9856760=1

Wonderful presentation by Jared Spool on building delightful UX: https://www.youtube.com/watch?v=ewpz2gR_oJQ

Performance and progressive enhancement

The Guardian reports on advertising affecting web page performance (if you can find the article amongst all the ads…): http://www.theguardian.com/media/2015/jul/19/ad-tech-online-experience-facebook-apple-news

And CNN Money is also talking about web performance: http://money.cnn.com/2015/06/16/technology/web-slow-big/index.html

Progressive enhancement, by the government: https://www.gov.uk/service-manual/making-software/progressive-enhancement.html

Don’t add the clever thing: http://christianheilmann.com/2015/07/08/slimming-down-the-web-remove-code-to-fix-things-dont-add-the-clever-thing/

10 ways to minimise reflows: http://www.sitepoint.com/10-ways-minimize-reflows-improve-performance/

Designing with progressive enhancement (talk, slides): http://sixtwothree.org/posts/designing-with-progressive-enhancement

Cache efficiency study by Facebook: https://code.facebook.com/posts/964122680272229/web-performance-cache-efficiency-exercise/

Offline first – the final frontier?: http://offlinefirst.org/

The web’s cruft problem: http://developer.telerik.com/featured/the-webs-cruft-problem/

There was a lot of discussion about progressive enhancement following a couple of conferences in June, here are the best articles I saw about it:

Assumptions (by Remy Sharp): https://remysharp.com/2015/07/02/assumptions

Baseline (by my man-crush Jeremy Keith): https://adactio.com/journal/9206

Thriving in unpredictability (by Tim Kadlec): http://timkadlec.com/2015/06/thriving-in-unpredictability/

Availability (by Stuart Langridge): http://www.kryogenix.org/days/2015/06/28/availability/ (also see http://www.kryogenix.org/code/browser/why-availability/)

Accessibility

WAI-ARIA screen reader compatibility tables: http://www.powermapper.com/tests/screen-readers/aria/index.html

The great and good of the accessibility world are putting together an Album for Accessibility: http://www.heydonworks.com/article/an-album-for-a11y

Styling forms accessibly: http://www.uxbooth.com/articles/styling-forms-accessibly/

The business case for (accessible) issue prevention: http://blog.tenon.io/the-business-case-for-issue-prevention/

The accessibility cheatsheet: http://bitsofco.de/2015/the-accessibility-cheatsheet/

Tools and resources

Control and manage real smartphones from your browser: https://openstf.github.io/

Awesome geek podcasts! Awesome! https://github.com/cv/awesome-geek-podcasts/blob/master/README.md

Lightweight, standalone JavaScript input masking: https://github.com/estelle/input-masking/

Get started with CSS (a free course by Russ Weakley, CSS guru): https://www.sitepoint.com/premium/courses/getting-started-with-css-2903

New W3C mobile checker tool: http://www.w3.org/blog/validator/2015/06/23/the-new-w3c-mobile-checkers-alpha-release-be-mobile-friendly/

Free book on JavaScript: http://eloquentjavascript.net/

And another one: http://speakingjs.com/

Know your HTTP (posters to print): https://github.com/bigcompany/know-your-http

Performance tools, a good list by CSS Tricks: https://css-tricks.com/performance-tools/

Accessibility testing plugin for Chrome: https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd

Automated accessibility testing: http://pa11y.org/

Accessibility visualisation toolkit: http://khan.github.io/tota11y/

New performance tools in Firefox: https://hacks.mozilla.org/2015/06/new-performance-tools-in-firefox-developer-edition-40/

Development

Everyone knows about http://youmightnotneedjquery.com/, so here’s http://youmightnotneedjqueryplugins.com/

.Net Framework 4.6 is coming, with lots of goodies: http://blogs.msdn.com/b/dotnet/archive/2015/07/20/announcing-net-framework-4-6.aspx

Yet Another Weekly Email: http://softwareleadweekly.com/

Developer or user convenience, who should pay? Good stuff from Aaron Gustafson: http://www.aaron-gustafson.com/notebook/who-should-pay/

A website for code reviews: https://www.antipattern.io/

The boring front-end developer: http://thebfed.com/

Layers and legacies: a warning about old code: https://medium.com/message/why-the-great-glitch-of-july-8th-should-scare-you-b791002fff03

Comparisons between software and medicine: http://farmerandfarmer.org/medicine/index.html

The whole of JavaScript in one picture: https://github.com/coodict/javascript-in-one-pic/blob/master/README.md

.Net extensions galore: https://github.com/calbucci/CalbucciLib.ExtensionsGalore

Useful JavaScript debugging tips you didn’t know: https://raygun.io/blog/2015/06/useful-javascript-debugging-tips-you-didnt-know/

No good can come of bad code: http://alistapart.com//column/no-good-can-come-of-bad-code

The role of a senior developer: http://mattbriggs.net/blog/2015/06/01/the-role-of-a-senior-developer/

And finally…

You know (and hopefully love) http://alistapart.com/, so check out http://alistafart.com/

An old-skool synth in JavaScript: http://nicroto.github.io/viktor/

Finally, a solution to providing comments without feeding the trolls: https://github.com/tessalt/echo-chamber-js

3D maps of every London Underground station: http://www.ianvisits.co.uk/blog/2015/07/12/3d-maps-of-every-underground-station-ab/

Stories about the internet (more interesting than it sounds): http://citizen-ex.com/stories/

The untold story of the invention of the game cartridge: http://www.fastcompany.com/3040889/the-untold-story-of-the-invention-of-the-game-cartridge

For the pedants among you: http://grammarist.com/words/impactful/

Progressive enhancement matters

I’m a bit of a progressive enhancement nut. Some people think it doesn’t matter. It does. A lot. Here’s a very recent example.

I just tried to pay for a quick weekend break next year, booked through TripAdvisor. The “pay now “button didn’t work.

TripAdvisor fail

Why did it fail? Because it’s not a submit button:

<input class="ftlPaymentButtonInner sprite-btn-yellow-43-active" value="Continue to PayPal" type="button" name="submit" onclick=" clearAllGhostText();   ftl.sendActionRecord('VR_CLICK_SUBMIT_PMT_PP_REDIRECT');  return payment.submitPayPalPayment(this);" onmouseout="$(this).addClass('sprite-btn-yellow-43-active'); $(this).removeClass('sprite-btn-yellow-43-hover');" onmouseover="$(this).addClass('sprite-btn-yellow-43-hover'); $(this).removeClass('sprite-btn-yellow-43-active');" >

And how could this be fixed? Probably as simply as this:

<input class="ftlPaymentButtonInner sprite-btn-yellow-43-active" value="Continue to PayPal" type="submit" name="submit" onclick=" clearAllGhostText();   ftl.sendActionRecord('VR_CLICK_SUBMIT_PMT_PP_REDIRECT');  return payment.submitPayPalPayment(this);" onmouseout="$(this).addClass('sprite-btn-yellow-43-active'); $(this).removeClass('sprite-btn-yellow-43-hover');" onmouseover="$(this).addClass('sprite-btn-yellow-43-hover'); $(this).removeClass('sprite-btn-yellow-43-active');" >

Hardly advanced web development.

By the way this happened on a Windows 8 laptop with 12GB RAM, using the latest version of Chrome.

To most people this failure would have completely put them off paying, and it certainly didn’t impress me. However I was determined to pay, so I switched to my phone and paid on there. Job done, but it certainly wasn’t a good experience.

So, you still don’t think progressive enhancement matters?

Making the ShopTalk Show theme tune

I’m a regular listener to the ShopTalk Show podcast, a really great show about web design and development hosted by Chris Coyier and Dave Rupert. A couple of years ago, not long after the show started, I offered Chris and Dave a very rough piece of music as a theme tune, and they’ve been using it ever since.

But the time has come to refresh the theme tune, and the guys asked me to record a new version. Specifically they wanted it “rootsier”, and around 20 seconds in length. Here is the new version:

If you’re interested in how I recorded it then read on!

Chris and Dave wanted me to incorporate a recording of a crowd shouting the show motto “Just Build Websites”. I heard in my head exactly how that sample could be used at the end of the tune, so I knew what I was aiming for.

I busked a quick bit of music in the style they wanted. I grabbed my guitar, started strumming an A chord, and very quickly had a chord progression I was happy with, including the ending that could include the “Just Build Websites” sample. I wrote the music down on the back of an envelope (as that’s a traditional thing to do) and added some ideas for an arrangement:

00-music

Now I could start recording. I used the fantastic free Audacity software, as I wouldn’t need any fancy effects. It handles simple multitrack recording, and is really easy to use.

Click track

First I laid down a click track, to ensure I was keeping in time with myself. I recorded enough bars for a lengthy click intro before I start playing, and of course enough bars to go right to the end of the recording. If you’re playing along to a click track like this it’s a good idea to have at least 4 bars before you start playing. It gives your hands time to get from the keyboard to the instrument, and lets you settle into the tempo.

01-click-track

Acoustic 1

Then I grabbed my trusty Line6 Variax 500 and chose the Martin D-28 6-string acoustic guitar sample sound. That’s the main guitar you hear at the beginning.

02-acoustic-1

The Variax is great as it gives a really good impersonation of a real guitar. Yes, anyone with a good ear can hear it’s not a real Martin D-28, but then it didn’t cost ten grand. Plus it comes with a massive range of other stringed instrument samples, a couple of which I talk about below.

The first acoustic took a few takes to get right, but I wasn’t happy with the sound, so decided to add a second acoustic guitar.

Acoustic 2

This time I chose a Gibson J-200 and double-tracked the first acoustic, but using my fingertip instead of a pick. I panned the second acoustic to the left and pulled the levels down. This gave me a nice stereo spread of sound.

Bouzouki

I knew for the main body of the piece I wanted a ringing guitar sound, probably double-stringed and higher than the guitars. I don’t have a bouzouki (although I think that will be my next instrument purchase; Jeremy will be pleased) but by choosing a Martin D 12-28 12-string guitar sample and putting a capo up on (I think) 5th fret it was a reasonable rendition.

This took quite a few takes to get right as my fingers didn’t want to do what I told them. Sometimes that’s just the way it goes. Here are the two acoustics and bouzouki tracks.

04-bouzouki

Bass

The time had come to lay down the Groove Machine. Ahem, I mean record the bass. I’ve got a beautiful 1978 Fender Precision bass, and a couple of takes later I had it done.

05-bass-before

Bass almost always needs come compression to even out the levels. I applied some basic compression to the bass track:

06-bass-compressor

And ended up with something looking much fuller, although a couple of peaks were uncomfortably high:

07-bass-after

Here’s a simple trick. If you see a peak which is really high, like the ones in the red circles above, it’s likely that there are just one or two waves which are high. Zoom right in and select the high waves:

08-zoom-selection

Then pull the levels down by a notch:

09-amplify

This is before:

10-peak-before

And this is after:

11-peak-after

I’ve found that this doesn’t affect the sound in any noticeable way, but help to stop clipping.

Banjo

To round out the “rootsy” nature of the recording I added a banjo part, using the Gibson Mastertone sample in the Variax. It’s pretty low in the mix, and it’s not complicated, as I ain’t a good finger picker. But it’s a nice little addition to the piece, particularly at the beginning.

When I say I’m not a good finger-picker I mean I’m really awful, so getting this banjo part OK was Hard Work. I lost count of how many takes it took, but it was well over 20.

Just Build Websites (JBW)

Now I was ready to add the JBW sample. The problem was the words are said faster than the tempo of the tune. When I was busking the chord progression I tried playing the music fast enough to fit the speed the words are said, but it sounded manic.

You can see here the peaks of the JBW track don’t match with the peaks of the bass track above.

12-jbw-raw

What I needed to do was cut the words apart, so they are spoken at the same tempo as the music. I toyed with stretching the JBW sample, but it sounded awful.

Cutting the JBW sample into parts was easy, but then I got a horrible “clipped” effect after the first two words, because there was artificially-inserted silence. What to do? Add reverb? Nope, that sounded horrible and false. Instead, I copied parts of the sample and shifted it along to mask the gap. Here you can see how I lined the words up with the bass notes, then covered the gap with my fake echo:

13-jbw-echo

I pulled the level of the fake echo down until it was reasonably unobtrusive, but still masked the gap:

Drums

Next I used my Alesis DM5 digital drum kit to lay down a drum line. It’s mostly pretty simple, but I did do a sweet triplet fill before the last two notes:

The drum sound was a bit dry, so I added some small room reverb:

14-drums-reverb

Mixing

As the levels were getting set as I added the tracks there wasn’t much to do in terms of mixing. I did find the bass got lost, particularly in small headphones. By the way, it’s a good idea to check your mix not just on studio monitors, but on headphones. I used Grado SR60 and RHA MA350 (I think) in-ear headphones. A bit of EQ on the bass soon made it pop out again:

15-bass-eq

After exporting my mix to 2 tracks I “topped and tailed” the resulting file to remove empty space at the beginning and fade out nicely at the end. Then I encoded to MP3 and emailed it to Chris and Dave. Job done.

Nearly.

The second acoustic was slightly out of tune one one or two notes, so I re-recorded that. And I wasn’t happy with two of the notes on the bass as well, so I re-recorded that. Dave also made a great suggestion of adding a little banjo intro. My amazing (not) finger-picking skills once again saved the day:

As this banjo was stuck out on its own I added a touch of reverb to beef it up.

Now, listening to the individual parts you may thing “hmm, these are a bit raw”. You’re right, they are. As part of that “rootsy” feel I didn’t want to overall piece to feel too polished – I wanted it to sound like a bunch of guys messing around with some recording gear late one night after a few beers. Hopefully I’ve achieved that, and hopefully the listeners to the ShopTalk Show will like it. I certainly enjoyed recording it.

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/

Performance

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/

Accessibility

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

Development

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

Testing

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/