Author: chris

Business / project management

“Case studies and experiments demonstrating the impact of performance optimization on user experience and business metrics.”: http://wpostats.com/

It’s always the right time to revisit the beans-up-noses article: https://medium.com/uie-brain-sparks/beans-and-noses-21c16ac5cade

Uncle Bob chimes in on Volkswagen: http://blog.8thlight.com/uncle-bob/2015/10/14/VW.html

“Welcome to Traction Stack, a curated directory of marketing resources from six years of research for Traction, the bestselling book that helps businesses and projects of all kinds get traction.”: http://tractionstack.com/

Prevent feature creep: http://www.productstrategymeanssayingno.com/

How to avoid personalisation project pitfalls: https://econsultancy.com/blog/66819-how-to-avoid-personalisation-project-pitfalls/

Mobile

Google tells business leaders not to concentrate on mobile apps: http://uk.businessinsider.com/google-exec-says-mobile-apps-confuse-consumers-2015-11

And the stats show that hoping your mobile app will become popular is like hoping you’ll win the lottery: https://medium.com/swlh/mobile-app-developers-are-suffering-a5636c57d576

Case study on having push notifications in a web app: https://developers.google.com/web/showcase/case-study/beyond-the-rack

A good overview of the different ways of implementing web apps for mobile: https://medium.com/@franciov/installable-pinned-or-progressive-apps-5b4997ecbf49

Wait, what? Mobile browser traffic is 2X bigger than app traffic, and growing faster: http://venturebeat.com/2015/09/25/wait-what-mobile-browser-traffic-is-2x-bigger-than-app-traffic-and-growing-faster/

A publishing company abandons native apps: https://atavistinsider.atavist.com/goodbye-native-mobile-apps/

Design

From pages to patterns – practical tips for moving to modular design: http://alistapart.com/article/from-pages-to-patterns-an-exercise-for-everyone

Lovely UI: a collection of mobile UI elements: http://www.lovelyui.com/

Loads of responsive navigation examples: http://navnav.co/

Not sure if I’ve linked to this Designing for Performance book; if not I apologise: http://designingforperformance.com/

Using web fonts the best way: https://helloanselm.com/2015/using-webfonts-in-2015/

gov.uk design principles: https://www.gov.uk/design-principles

Even the U.S. government has a style guide now: https://playbook.cio.gov/designstandards/

Design thinking comes of age: https://hbr.org/2015/09/design-thinking-comes-of-age

Web field manual – lots of good design resources: http://webfieldmanual.com/

Performance

Adding custom performance metrics: https://speedcurve.com/blog/user-timing-and-custom-metrics/

Transcript and slides for Scott Jehl’s talk “Delivering Responsibly”: https://www.filamentgroup.com/lab/delivering-responsibly.html

Fantastic idea – Facebook will slow down their network every Tuesday so employees can experience the web as most of the world does: http://uk.businessinsider.com/facebook-2g-tuesdays-to-slow-employee-internet-speeds-down-2015-10?op=1?r=US&IR=T

The ad industry is starting to realise they are a big part of the performance problem: http://www.iab.com/news/lean/

Consumers still value performance over content: http://www.marketingcharts.com/online/consumers-still-value-performance-over-content-in-the-website-experience-60553/attachment/limelight-consumer-website-experience-expectations-oct2015/

Zeldman, the godfather of the web, reflects on performance over the years: http://www.zeldman.com/2015/10/21/web-performance-today/

Great front-end performance primer for full-stack (i.e. back-end) devs: http://www.nateberkopec.com/2015/10/07/frontend-performance-chrome-timeline.html

Calculate a performance budget: http://www.performancebudget.io/

Web font anti-patterns: http://bramstein.com/writing/web-font-anti-patterns.html

Accessibility

Ever wondered what screen readers actually sound like? Here: http://thepaciellogroup.github.io/AT-browser-tests/

Accessibility wins – showcasing good accessibility: http://a11ywins.tumblr.com/

Using the tabindex attribute: https://www.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/

A11y Rocks! An album for accessibility: https://heydon.selz.com/item/560c04b8b798720c187917e6

Simple guide to web accessibility testing: http://www.softwaretestinghelp.com/what-is-web-accessibility-testing/

Super-quick accessibility testing – just add a CSS file: http://www.karlgroves.com/2013/09/07/diagnostic-css-super-quick-web-accessibility-testing/

Progressive enhancement

Jake Archibald on implementing modern progressive enhancement: https://vimeo.com/144768071

Flipkart changed from having a native app to a progressive website: http://tech-blog.flipkart.net/2015/11/progressive-web-app/

Building an offline page for the Guardian: https://www.theguardian.com/info/developer-blog/2015/nov/04/building-an-offline-page-for-theguardiancom

There are no “buts” in progressive enhancement (slides): http://www.slideshare.net/AaronGustafson/there-are-no-buts-in-progressive-enhancement-redev-2015

Jason Garber bangs on about it. You must be getting the message by now, yes? http://sixtwothree.org/posts/designing-experience-layers

Good collection of resources: http://dsgnwrks.pro/resources/why-you-we-should-care-about-disabled-javascript/

A big deal: Google advocates progressive enhancement to help with SEO: http://googlewebmastercentral.blogspot.co.uk/2015/10/deprecating-our-ajax-crawling-scheme.html

Resources, tools, libraries, all that good stuff

Bing have a mobile friendliness checker: https://blogs.bing.com/webmaster/2015/11/12/mobile-friendly-test

There’s a whole new post-CMS world out there: http://www.thenewdynamic.org/

“The one-stop place to find the information and tools you need to help you learn, build, and move the web forward.”: http://www.w3.org/developers/

Fantastic interactive site showcasing Firefox’s dev tools: http://devtoolschallenger.com/

See who’s tracking you online with this Firefox add-on: https://www.mozilla.org/en-US/lightbeam/

Firefox also have a really useful screenshot command: http://meyerweb.com/eric/thoughts/2015/10/22/firefoxs-screenshot-command/

The search engine for source code: http://nerdydata.com/ (limited results, but I quickly found a site using one of my Open Source libraries)

Load testing for websites and APIs: https://loadfocus.com

An image comparison tool, can be put into a build process to check for visual regression: http://yahoo.github.io/blink-diff/

Passwordless authentication: https://auth0.com/blog/2015/09/30/auth0-passwordless-email-authentication-and-sms-login-without-passwords/

Lots of documentation in one place: http://devdocs.io/

Geek life

What’s that? A browser API for taking payments? Yes please: https://github.com/WICG/web-payments-browser-api

New HTML elements proposed: <panel> and <panelset>: http://radar.oreilly.com/2015/11/panels-and-panel-sets.html

A think-piece on the changing form of the browser: http://rehabstudio.com/thinking/the-changing-form-of-the-web-browser/

Technical debt: more than just code: https://the-pastry-box-project.net/kate-daly/2015-October-11

FLIF – free lossless image format: http://flif.info/

HTTP is obsolete. It’s time for the distributed, permanent web: https://blog.neocities.org/its-time-for-the-permanent-web.html

Google is 2 billion lines of code, in one repository: http://www.wired.com/2015/09/google-2-billion-lines-codeand-one-place/

Designing for accountability, designing for broken-ness: http://russelldavies.typepad.com/planning/2015/09/designing-for-accountability-designing-for-broken-ness.html

Development

Guidelines on implementing REST, from the NSA (TL;DNR: put a back-door in it for us … not really :0): http://jaco.by/2015/11/06/the-nsas-guidelines-for-implementation-of-rest/

The Terence McGhee Software Ninja Class Hierarchy: http://terencemcghee.com/FileStore/Tech/1D0C454A70AC3AEF01BB1BAAD94C8753.html

Uncle Bob on making things future proof: http://blog.8thlight.com/uncle-bob/2015/10/30/futureproof.html

Is programming poetry? https://medium.com/unpublishable-elsewhere/is-programming-poetry-aa137a2ac3ca#.gb2egezd1

Who Dictates Software Quality: Client or Coder?: http://www.bitnative.com/2014/01/28/who-chooses-quality-client-or-coder/

Front-end developer handbook: http://www.frontendhandbook.com/

The configuration complexity clock: http://mikehadlow.blogspot.dk/2012/05/configuration-complexity-clock.html

Programming sucks: http://www.stilldrinking.org/programming-sucks

CSS

Experiments from Jen Simmons: http://labs.thewebahead.net/

Create and maintain style guides using CSS comments: https://github.com/jonathantneal/mdcss

Nice example of a generic CSS system: http://corpuscss.com/

Making the cascade your friend: http://simurai.com/blog/2015/09/09/back-to-the-roots/

Free e-book – transforms in CSS by Eric Meyer: http://www.oreilly.com/free/transforms-in-css.csp

Flexbox cheatsheet: http://jonibologna.com/flexbox-cheatsheet/

JavaScript

Some useful JavaScript utilities, including a C#-like stringFormat: https://github.com/michd/js-util

Making a site work offline with Service Worker: https://css-tricks.com/serviceworker-for-offline/

Using the oninput event handler with onkeyup/onkeydown as its fallback: https://mathiasbynens.be/notes/oninput (note to self: do this)

Stats on the performance of different JavaScript frameworks on mobile devices: https://joreteg.com/blog/viability-of-js-frameworks-on-mobile (I don’t hide the fact I’m unconvinced by the current obsession with frameworks)

Content aware image cropping: https://github.com/jwagner/smartcrop.js

The definitive source of the best JavaScript libraries, frameworks, and plugins.: https://www.javascripting.com/

Copy text to the users clipboard: http://zenorocha.github.io/clipboard.js/

12 rules for professional JavaScript: https://medium.com/@housecor/12-rules-for-professional-javascript-in-2015-f158e7d3f0fc

The looping evolution: http://developer.telerik.com/featured/the-javascript-looping-evolution/

Write a flowchart in text, see it instantly updated: http://adrai.github.io/flowchart.js/

And finally…

Convert images to LEGO: https://github.com/Wildhoney/Legofy

The wah wah machine. If this doesn’t make you smile you have no soul: http://www.wahwahmachine.com/

Like maps? Go down a mappy rabbit hole: https://mapzen.com/blog/escape-from-mercator

Magic playlist – song suggestions based on what you like: http://magicplaylist.co/

Visualise events in history (powered by Wikipedia): http://histography.io/

A new way to choose what to read next: http://www.openingthebook.com/whichbook/

Business / Working Life

Data is not an asset, it’s a liability: https://www.richie.fi/blog/data-is-a-liability.html

Strategic procrastination: https://the-pastry-box-project.net/erin-mckean/2015-September-11

Putting on the shipping goggles: https://signalvnoise.com/posts/3931-putting-on-the-shipping-goggles (if you’re not a regular reader of Signal vs Noise then you should be)

Reduce the distance between the people who make decisions about the product and the people who build the product: http://alistapart.com/column/the-distance-to-here

Everything is broken: https://medium.com/message/everything-is-broken-81e5f33a24e1

Fluid coupling: When exactly did enterprises become late adopters of technology? http://www.asymco.com/2015/08/31/fluid-coupling/

Preparing organisations to become design-infused: https://medium.com/uie-brain-sparks/preparing-organizations-to-become-design-infused-8a0d93b50d36

New, responsive design reduces bounce rate at asda.com by 37%: http://www.retailtimes.co.uk/new-responsive-design-reduces-bounce-rate-at-asda-com-by-37/

Design

Little Big Details: taking inspiration from the little details that make designs great: http://littlebigdetails.com/

Predictive personas: http://blog.invisionapp.com/predictive-personas/ quote: ‘…the question they should be asking themselves isn’t, “If I interviewed a user, would this describe her?” The question should be, “If I found a person like this, would she become a user?”’

Forget about the mobile Internet: http://ben-evans.com/benedictevans/2015/9/1/forget-about-mobile-internet

The gov.uk style guide: http://govuk-elements.herokuapp.com/ (other examples available on http://styleguides.io/)

Style guide from Salesforce: https://www.lightningdesignsystem.com/

Improving the checkout experience with animations: https://medium.com/bridge-collection/improve-the-payment-experience-with-animations-3d1b0a9b810e (but read the article below…)

Design safer animation for motion sensitivity: http://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity

Design patterns: http://ui-patterns.com/patterns

Front-end principles for designers: http://jonyablonski.com/2015/front-end-principles-for-designers/

The language of modular design: http://alistapart.com/article/language-of-modular-design

How modern web design works: http://thetomorrowlab.com/2014/04/modern-web-design-works/

Progressive enhancement / Performance

Bruce Lawson’s talk “Ensuring a performant web for the next billion people”: https://dev.opera.com/articles/making-sites-work-opera-mini/ (Opera Mini is a popular browser for those with low-powered and low-bandwidth devices)

Aaron Gustafson with a timely reminder that we don’t really control our web pages: https://www.aaron-gustafson.com/notebook/more-proof-we-dont-control-our-web-pages/

Jeremy Keith’s presentation on progressive enhancement from May: https://adactio.com/articles/9465 (video and full transcript)

Preloading, prefetching, prebrowsing: https://css-tricks.com/prefetching-preloading-prebrowsing/

Embracing the network: modern techniques for building resilient front ends: https://speakerdeck.com/patrickhamann/embracing-the-network-coldfront-september-2015(slide deck, no video published yet)

A beginners guide to website speed optimisation: https://kinsta.com/learn/page-speed/

User experience / Usability / Accessibility

The psychological speed of mobile interfaces: https://medium.com/ui-collection/the-psychological-speed-of-mobile-interfaces-df25276295dd (this is much the same as “perceived performance” which I bang on about)

The device context continuum – where does the common device context continuum start and end? http://blog.cloudfour.com/on-the-device-context-continuum/ (hint: it doesn’t)

Hello, my name is <Error>: http://alistapart.com/article/hello-my-name-is-error

Living with bull: http://tinyurl.com/bullshoot

How to write an error message: https://medium.com/@thomasfuchs/how-to-write-an-error-message-883718173322

Visual ARIA bookmarklet: http://whatsock.com/training/matrices/visual-aria.htm

Development

Fantastic introductory article about JavaScript promises: http://www.html5rocks.com/en/tutorials/es6/promises/

Learning JavaScript in 2015 (from scratch): https://medium.com/@_cmdv_/i-want-to-learn-javascript-in-2015-e96cd85ad225

Learn JavaScript essentials: https://medium.com/javascript-scene/learn-javascript-b631a4af11f2

Really interesting look at why SoundCloud started using microservices, by their director of engineering: http://philcalcado.com/2015/09/08/how_we_ended_up_with_microservices.html

5 questions every unit test must answer: https://medium.com/javascript-scene/what-every-unit-test-needs-f6cd34d9836d

Package built on PhantomJS to generate screenshots at different sizes: https://github.com/sindresorhus/pageres-cli

6 tips for Chrome devtools: https://css-tricks.com/six-tips-for-chrome-devtools/

Client-side MVC is not a silver bullet: https://medium.com/@thomasfuchs/client-side-mvc-is-not-a-silver-bullet-b74ebc6d2c9a

Freebies

Free e-book from Smashing Magazine: https://shop.smashingmagazine.com/products/best-of-nine-smashing-years

Fill Murray: placeholder images of Bill Murray: http://www.fillmurray.com/

And finally…

Old maps: http://www.oldmapsonline.org/

Interactive cubic Bezier curve editor (more fun than it sounds): http://cubic-bezier.com/

Big list of naughty strings: https://github.com/minimaxir/big-list-of-naughty-strings

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/