I Am The Very Model Of A Modern Web Developer

Posted by & filed under Web development, Web world.

I am the very model of a modern web developer
I build my sites in Ember or in React or in Angular
The download size is massive but development is easier
My grunt and gulp and NPM all prove that I am geekier

I am the very model of a modern web developer
My animations cause offence in anyone vestibular
A carousel with massive pictures should be seen as de rigeur
And light grey text with background white will make my content sexier

Some people say my websites should all be enhanced progressively
But my developmental choices have been made deliberately
A 12 meg payload is a guarantee of exclusivity
I don’t want Luddite users who refuse to upgrade from 2G

I have a brand, you could say I’m an Internet celebrity
But try to load my site on anything but super fast 4G
You’ll just get empty pages on your Android or your iPhone 3
Upgrade your phone, you pauper, or you’ll never get a byte from me

With apologies to Gilbert and Sullivan.

HTML Matters

Posted by & filed under Web development.

Rant time. No-one can deny that web development tooling has improved in leaps and bounds over the last few years. I’ll sound like a moaning old man if I talk about how primitive things were in the old days, so I won’t.

But despite this wealth of tools, loads of good quality information online, and access to resources and training why do I still regularly see HTML like this in new web projects:

<div class="footer">
<span><img src="twitter.gif" /></span>
<span><img src="facebook.gif" /></span>
<span><img src="instagram.gif" /></span>
</div>

It appears modern web developers have within their grasp a panoply of development and build tools – NPM, bower, gulp, grunt etc – but don’t have access to HTML elements which have been implemented in browsers for years. HTML matters!

It matters because structure matters. Meaning matters. Semantics matter (but don’t go overboard). Accessibility matters. For many projects, SEO matters.

A web page is, at it’s core, a structured document. Pile on all the fancy-pants JavaScript frameworks you want, but you’re still delivering HTML to a rendering engine built in a browser. If you’re making no effort to use appropriate HTML elements to mark up your content then you need to sharpen up your skills.

Wednesday is Link Day

Posted by & filed under Link Day.

It’s been a while, so here’s a humongous list of goodies for y’all.

Performance

Performance Testing Dictionary, a free book (registration required): http://info.soasta.com/PerformanceTestingDictionary.html

Yes, a performance budget builder: http://bradfrost.com/blog/post/performance-budget-builder/

Measuring performance (using the navigation timing API): https://davidwalsh.name/measuring-performance

Aligning app performance to business success (podcast): http://www.thecloudcast.net/2016/01/the-cloudcast-236-aligning-app.html?m=1

Performance advice from experts: https://www.keycdn.com/blog/web-performance-advice/

A good case study on performance improving the bottom line: http://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/

The “average page” is a myth: https://www.igvita.com/2016/01/12/the-average-page-is-a-myth/

Accessibility

This 1939 Chart Explains How Color Affects Legibility: http://www.fastcodesign.com/3052263/infographic-of-the-day/this-1939-chart-explains-how-color-affects-legibility

What’s coming up for Microsoft Edge in 2016. Number 2 on the list: Accessibility: https://blogs.windows.com/msedgedev/2016/02/03/2016-platform-priorities/

What to do when you get sued for your inaccessible website: http://www.karlgroves.com/2016/01/18/what-to-do-when-you-get-sued-revisited/

The BBC gives advice on how to design for accessibility: http://www.bbc.co.uk/gel/guidelines/how-to-design-for-accessibility

The business case for issue prevention: Extreme Accessibility: http://www.karlgroves.com/2016/01/10/the-business-case-for-issue-prevention-extreme-accessibility/

Accessibility for business and pleasure: https://www.paciellogroup.com/blog/2016/01/accessibility-for-business-and-pleasure/

The browser accessibility tree: https://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/

Progressive Enhancement

A simple enhancement for ordering items by, who else, Jeremy “My Man Crush” Keith: https://adactio.com/journal/10195

“JavaScript web apps considered valuable”: http://molily.de/javascript-web-apps/

“Why I hate your single page app”: https://medium.com/@stilkov/why-i-hate-your-single-page-app-f08bb4ff9134#.foqjt3t2x

“Don’t tell me what my browser can’t do”: https://medium.com/@codepo8/don-t-tell-me-what-my-browser-can-t-do-b95ab0d3cacd#.13211xmd5

Progressive web apps by Google (I may have linked to this before): https://developers.google.com/web/progressive-web-apps

Mobile

Mobile and Multi-device design: a free e-book (on Apple devices only, bah): https://itunes.apple.com/us/book/mobile-multi-device-design/id916423134?mt=11

The world’s poorest households are more likely to have a mobile phone than a toilet: http://qz.com/594455/the-worlds-poorest-households-are-more-likely-to-have-a-mobile-phone-than-a-toilet/

As mobile screen size increases, so does activity: http://www.lukew.com/ff/entry.asp?1956

Launch an Android app from the web and cleanly fallback to web: https://paul.kinlan.me/launch-app-from-web-with-fallback/

Development

Shared before, but still great. Offline access to documentation: http://devdocs.io/

Give developers autonomy. Couldn’t agree more: http://mikehadlow.blogspot.co.il/2014/06/heisenberg-developers.html

Want to write software for your car? It’s coming: https://www.w3.org/2014/automotive/vehicle_spec.html

The history of Open Source, and a glimpse at its future: https://medium.com/@nayafia/we-re-in-a-brave-new-post-open-source-world-56ef46d152a3#.hn8q4llo1

The woes of date input (yep, got that t-shirt): http://html5doctor.com/the-woes-of-date-input/

“Paid a great deal to be terrible at development most of the time”: https://www.exratione.com/2016/01/paid-a-great-deal-to-be-terrible-at-development-most-of-the-time/

The art of debugging (presentation and video): https://remysharp.com/2015/10/14/the-art-of-debugging

Martin Fowler on feature toggles: http://martinfowler.com/articles/feature-toggles.html

Control CSS filters with HTML attributes: http://specro.github.io/Philter/

Developer fallacies: https://medium.com/@Heydon/developer-fallacies-70a381fb493c#.ojg3yezas

The sad state of entitled web developers: https://medium.com/swlh/the-sad-state-of-entitled-web-developers-e4f314764dd#.n6ps2t69q

Most developers have never seen a successful project: http://www.theregister.co.uk/2015/11/11/most_developers_never_seen_successful_project/?mt=1452522136493

Testing

Via Beth: what’s next for manual testers: https://www.utest.com/articles/the-present-and-future-of-manual-testing

On screen reader testing: http://clearleft.com/thinks/362

Design/CSS/UX

“Design without touching the surface”: http://leapfrog.nl/blog/archives/2016/02/07/design-without-touching-the-surface/

Great talk by Jen Simmons about getting out of our design rut: https://www.youtube.com/watch?v=ZNpn7FBp_9U

CSS best practices presentation: http://fantasai.inkedblade.net/style/talks/best-practices/

The Goldilocks approach to responsive design: http://goldilocksapproach.com/

About notifications and no-UI: https://www.rehabstudio.com/thinking/losing-our-heads/

The dangerous UI team: http://blog.ometer.com/2016/01/26/the-dangerous-ui-team/

JavaScript

We need to really understand promises: http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html

Offline with ServiceWorkers and UpUp: https://dev.opera.com/articles/offline-with-upup-service-workers/

2016 – the year of streams: https://jakearchibald.com/2016/streams-ftw/

Definitive guide on charts in JavaScript: http://www.fusioncharts.com/javascript-charts-guide/

const and immutable objects in ES6: https://ada.is/blog/2015/07/13/immutable/

Regex in JavaScript made easy: https://github.com/VerbalExpressions/JSVerbalExpressions

Resources

Old-school PC fonts: http://int10h.org/oldschool-pc-fonts/fontlist/

Online regular expression tester: https://regex101.com/

Stupid hackathon. Featuring my favourite Chrome extension “Non-Ad Block”: http://www.stupidhackathon.com/

A feature detection library in 1KB: http://featurejs.com/

Images and sketches of popular mobile devices (from Facebook): https://facebook.github.io/design/devices.html

And finally…

Remember Command and Conquer? Here it is in HTML5: http://www.adityaravishankar.com/projects/games/command-and-conquer/

A briefish history of the web (in 3 parts): https://briankardell.wordpress.com/2015/11/22/a-briefish-history-of-the-web-universe-part-i-the-pre-web/

Play a drum machine with your keyboard. And record it. Yes: http://sampulator.com/

And if that wasn’t good enough, here’s a TR-808: http://codepen.io/pixelass/full/adyLPR

Free philosophy e-books. Cos I know you love ’em: http://www.openculture.com/free-philosophy-ebooks

What Tor’s data looks like as it flows around the world: http://www.wired.com/2016/01/heres-what-tors-data-looks-like-as-it-flows-around-the-world/

The web is OK: http://www.charlotteis.co.uk/the-web-is-okay/

Tuesday is Link Day!

Posted by & filed under Link Day.

Performance

Presentation on “Smaller, faster websites” by Mat Marquis: https://bocoup.com/weblog/smaller-faster-websites

The website obesity crisis (presentation): http://idlewords.com/talks/website_obesity.htm

What developers should know about performance: https://medium.com/@christophelimpalair/developers-what-you-should-know-about-web-performance-550cef1040d8

What I’ve learned from monitoring four years of web page bloat: http://www.soasta.com/blog/page-bloat-2015-web-performance-monitoring/

Articles about how web performance affects revenue: https://wpostats.com/tags/revenue/

Avoiding Temptations that Harm Website Performance: http://calendar.perfplanet.com/2015/avoiding-temptations-that-harm-website-performance/

Progressive enhancement

Jeremy Keith hits a million nails on the head: “Server-side rendering is not a fallback; client-side rendering is an enhancement.” https://adactio.com/journal/9963

What “progressive web apps” mean for the web: http://developer.telerik.com/featured/what-progressive-web-apps-mean-for-the-web/

Interaction is an enhancement – an excerpt from Aaron Gustafson’s new book: http://alistapart.com/article/interaction-is-an-enhancement

The article that first described progressive enhancement: http://hesketh.com/progressive_enhancement_and_the_future_of_web_design.html

Reimagining Single-Page Applications With Progressive Enhancement: http://www.smashingmagazine.com/2015/12/reimagining-single-page-applications-progressive-enhancement/

Accessibility

The modern web is broken for people with disabilities: https://www.thoughtworks.com/insights/blog/modern-web-fundamentally-broken-people-disabilities

Mozilla accessibility QA engineer tells us what the basics of accessibility are: https://www.marcozehe.de/2015/12/14/the-web-accessibility-basics/

Learn about accessibility in just 20 minutes: http://accessibility.parseapp.com/

On accessibility and the lack of proper HTML: http://www.iandevlin.com/blog/2016/01/opinion/on-accessibility-and-the-lack-of-proper-html

Free web accessibility tools round-up: https://medium.com/bread-crumbs/free-web-accessibility-tools-round-up-b83a33797789

Mobile

Why you shouldn’t bother creating a mobile app: https://medium.com/inside-birdly/why-you-shouldn-t-bother-creating-a-mobile-app-328af62fe0e5

The App-ocalypse: Can Web standards make mobile apps obsolete?: http://arstechnica.com/information-technology/2015/12/the-app-ocalypse-can-web-standards-make-mobile-apps-obsolete/

Instant Loading Web Apps with An Application Shell Architecture: https://developers.google.com/web/updates/2015/11/app-shell

Design/UX

Dark Patterns: fighting user deception worldwide: http://darkpatterns.org/

A rant: how are website still screwing up these user experiences: http://www.troyhunt.com/2016/01/its-2016-already-how-are-websites-still.html

Simple inline error message pattern: https://www.paciellogroup.com/blog/2016/01/simple-inline-error-message-pattern/

Three principles for using design successfully. No 1: Start with design, and don’t just end with it: http://blogs.wsj.com/accelerators/2014/02/21/john-maeda-three-principles-for-using-design-successfully/

Brad Frost is writing a book on Atomic Design, which you can read for free here: http://atomicdesign.bradfrost.com/

How to make sense of any mess, a free online book on information architecture: http://www.howtomakesenseofanymess.com/

Beyond the style guide: https://24ways.org/2015/beyond-the-style-guide/

How to do a UX review: https://24ways.org/2015/how-to-do-a-ux-review/

Business

Psychological pricing strategies (mammoth set of tactics!): http://www.nickkolenda.com/psychological-pricing-strategies/

The perfect storm in digital law: http://alistapart.com/article/the-perfect-storm-in-digital-law

What customer experience excellence looks like: “Customer experience is 10% technology and 90% culture”: http://www.gerrymcgovern.com/new-thinking/what-customer-experience-excellence-looks

Helping VIPs care about performance: https://24ways.org/2015/helping-vips-care-about-performance/

Teams/general development

Rachel Andrew on confidence and getting overwhelmed: https://medium.com/@rachelandrew/web-industry-confidence-and-overwhelm-e161313405c8

What RESTful actually means: https://codewords.recurse.com/issues/five/what-restful-actually-means

What do we ask in Stack Overflow: http://jkunst.com/r/what-do-we-ask-in-stackoverflow/

Yahoo gets rid of QA: http://spectrum.ieee.org/view-from-the-valley/computing/software/yahoos-engineers-move-to-coding-without-a-net

JavaScript

A useful JavaScript glossary: https://github.com/HugoGiraudel/SJSJ

Microsoft open sourcing the Chakra JavaScript engine: https://blogs.windows.com/msedgedev/2015/12/05/open-source-chakra-core/

An “operating system”, with lots of apps, in JS: http://os.js.org/

“Every JavaScript project you should be looking into”: http://www.javascriptoo.com/

Amiga emulator in JavaScript, with games: http://scriptedamigaemulator.net/

The service worker cookbook: “a collection of working, practical examples of using service workers in modern web apps”: https://serviceworke.rs

You don’t need jQuery: https://github.com/oneuijs/You-Dont-Need-jQuery

4 JavaScript design patterns you should know: https://scotch.io/bar-talk/4-javascript-design-patterns-you-should-know

Use React? here’s a cheat sheet: http://reactcheatsheet.com/

CSS

Flexbox Froggy – learn flexbox with a fun game: http://flexboxfroggy.com/

Flexbox support is pretty good, except for IE: http://caniuse.com/#feat=flexbox

And there’s now an IE 8/9 polyfill: https://github.com/10up/flexibility

Web components that can be built purely using css, NO Javascript: http://technical.nailfashionsweden.se/web-components-that-can-be-built-purely-using-css-no-javascript/

“Just add water” CSS animations: https://daneden.github.io/animate.css/

Tools and resources

Security Panel debuts in Chrome DevTools: https://developers.google.com/web/updates/2015/12/security-panel

Dictionaries and Word Lists for Programmers: http://organicdonut.com/2015/12/dictionaries-and-word-lists-for-programmers/

Some good videos to watch, mostly JavaScript: http://fettblog.eu/top-talks-to-watch-2015/

Big list of “free for development” services: https://github.com/ripienaar/free-for-dev

Use console.table for easier logging: https://umaar.com/dev-tips/82-console-table/

SpaceHolder – A space-themed image placeholder service: https://spaceholder.cc/

How to use Chrome DevTools like a Pro: https://medium.com/jotform-form-builder/how-to-use-chrome-devtools-like-a-pro-b9bd414870e3

Each year this online advent calendar has fantastic articles: https://24ways.org

And so does this performance-specific advent calendar: http://calendar.perfplanet.com/

And finally

History of the web: http://www.w3.org/2012/08/history-of-the-web/origins.htm

See websites in old – I mean REALLY old – browsers: http://oldweb.today/WWW/20151225064327/http://info.cern.ch/hypertext/WWW/TheProject.html

GCHQ going open source? https://github.com/GovernmentCommunicationsHeadquarters

zty.pe, a typing game: http://zty.pe/

For the geek in your life: Star Wars Kama Sutra: http://www.amazon.com/dp/1519483058/

Unit testing in WordPress

Posted by & filed under Open source software, Web development, WordPress.

One of the things I really appreciate about developing in the .Net stack is the fantastic unit test support. Using mocking libraries like moq and leaning on the power of nunit to handle my dependencies means I can write unit tests that truly do test just the unit under test. True unit tests are useful for three very important reasons:

  1. That the code is doing what it should
  2. That the code handles unexpected inputs correctly
  3. That after refactoring the code continues to do what it did before

A robust, extensive suite of tests – both unit and integration tests – are crucial for good quality software and, fortunately, have been pretty common in the .Net development world for a long while.

When developing for WordPress, however, it’s not always been that way. I remember not so many years ago that test of any kind wasn’t something often talked about in the WordPress community. I guess we were focussed on getting code shipped.

Things have changed, and automated testing is now a recognised part of the WordPress development workflow. One of the problems with the WordPress Unit Test Suite, as pointed out by Greg Boone, is that it’s not actually a suite of unit tests – it has dependencies like a MySQL database, so would be more correctly called a suite of integrations tests. Pippin also calls these kind of tests “unit”, but they are definitely integration tests.

I’m at risk of over-egging this point, so please read this good description of the difference between unit and integration tests.

To ensure the large WordPress plugin I’m currently building is as good as it can be I want to build a suite of (true) unit tests. That means I need way of mocking WordPress functions (such as do_action, apply_filters and wp_insert_post) and globals such as $current_user and – crucially – $wpdb. It turns out there are a few options, which I’ve briefly investigated. I’ll be using WP_Mock and the PHPUnit test double features.

The well-known WP_Mock from the clever guys at 10up is the backbone of mocking WordPress. It allows you to mock any WordPress function with some simple syntax:

\WP_Mock::wpFunction( 'get_permalink', array(
            'args' => 42,
            'times' => 1,
            'return' => 'http://example.com/foo'
        ) );

This will mock the get_permalink method when the only argument is the integer 42, ensuring it is only called once, and returning the string ‘http://example.com/foo’. Clever stuff.

There are other static methods in the WP_Mock class which allow you to:

  • Mock a method which returns the same value (a pass-through method)
  • Mock the calling of filters and actions
  • Mock the setting of actions and filters

Mocking $wpdb turns out to be pretty simple, as I can use the built-in test double functionality in PHPUnit. Sample code in the MockPress project wiki shows I can do this:

// in my test setUp method:
global $wpdb;
unset($wpdb);

// whenever I want to mock a $wpdb function I set up the method to mock:
$wpdb = $this->getMock('wpdb', array('get_var'));
// and set the value I want to be returned from my mock method:
$wpdb->expects($this->once())->method('get_var')->will($this->returnValue(1);

// now I can check the mock returns what I want:
$result = $wpdb->get_var("select anything from anywhere");
$this->assertEquals(1, $result);

I now just have to ensure my code is written in such a way as to make unit testing easy! I can highly recommend The Art of Unit Testing by Roy Osherove if you want to get into this deeply.