Crash Test Dummies

Posted by & filed under Web development.

Crash test dummie reading "Crash Testing for Dummies"No, this isn’t a post about the band. It’s about real crash testing, also known as progressive enhancement testing.

Of course, this had to be Another Progressive Enhancement Post, didn’t it!

Ever thought about why car manufacturers test their cars under crash conditions? Is it because people deliberately drive their cars into walls or ditches? No; not usually, anyway. They test the safety of their cars because we live in an unpredictable world where things go wrong, all the time. Exceptional circumstances surround us every single day. Often we experience near misses – sometimes we’re no so lucky.

In fact, things go wrong on the roads so often that we’ve created thousands laws and guidelines that try to minimise the possibility of these exceptional circumstances occurring. We have speed limits and training before anyone can get behind the wheel of a car. We have street lighting and pedestrian crossings, kerbstones and crash barriers.

Yet things still go wrong on our roads. Sometimes through carelessness and stupidity, sometimes though negligence. Sometimes the blame can’t really be applied to anyone in particular.

Car manufacturers invest in making their cars safe, so that when the unexpected happens – which, at some point, it will – the occupants and other road users are kept as safe as possible. We expect nothing less, and safety features are rightly promoted to help sell cars. That’s good; we should strive to create a safer world where possible.

Yet on the web it’s a different story. No-one believes that things never go wrong online. In fact in my experience there’s rarely a web browsing session where something didn’t break. Images fail to load, sites respond so slowly they appear to be down, JavaScript throws an error because two scripts from different 3rd parties can’t co-exist, web fonts don’t load and so text is invisible. The list of what could – and often does – go wrong when loading websites goes on, and on, and on.

What’s happening here? Do we as web developers, designers, business owners not realise the inherent unpredictability of the Internet? Do we not understand that the web was designed to be like this – to keep going even if all that is delivered to the browser is the HTML? No, many of us understand but sweep this reality under the carpet.

We are dummies.

We’re dummies because we chase after the latest JavaScript framework-du-jour without considering if it supports the core principles of the web. We overload our pages with unoptimised images and gargantuan CSS files generated by a pre-processor. We fail to deliver first and foremost what our users fundamentally require – the content.

We’re dummies because we leave the crash testing to our users – the very people we should be protecting from those exceptional circumstances! And then we have the gall to complain that they aren’t using the latest browser or operating system, or that their device is underpowered. Here’s the reality for you: even when browsing conditions are optimal, things still often go wrong.

So, in my opinion are JavaScript frameworks bad? Do I detest CSS pre-processors? Do I have an allergy to beautiful imagery online? No, of course not. It’s our use of these tools which I rail against. Enhance your pages as mush as you want, but start from the beginning. Semantic HTML content and forms.

Don’t be a dummy.

Sunday is Link Day!

Posted by & filed under Link Day.

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/

Wednesday is Link Day!

Posted by & filed under Link Day.

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

The tough truth of reality

Posted by & filed under Web development.

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

Posted by & filed under 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/