Sunday, February 7th, 2016

Design without touching the surface – Leapfroglog

My concern is that by encouraging the practice of doing UX design without touching the surface of a product, we get shitty designs. In a process where UX and UI are seen as separate things the risk is one comes before the other. The UX designer draws the wireframes, the UI designer gets to turn them into pretty pictures, with no back-and-forth between the two. An iterative process can mitigate some of the damage such an artificial division of labour produces, but I think we still start out on the wrong foot. I think a better practice might entail including visual considerations from the very beginning of the design process (as we are sketching).

Surma.link – New ways to make your web app jank with Houdini – An introduction

This is a really good primer on all the pieces that make up the Houdini approach to CSS—giving authors access to low-level APIs for rendering.

As is often repeated here, it’s still early days and caution is advised, but it’s still a good idea to wrap your head around what’s coming down the standards pipe.

There’s even more specs in Houdini’s list of drafts, but the future of those is rather uncertain and they are not much more than a placeholder for an idea at this point. Examples include custom overflow behaviors, CSS syntax extension API, extension of native scroll behavior and similar ambitious things that allow you to screw up your web app even worse than ever before. Rejoice!

Thursday, February 4th, 2016

Together • Ludwig Wendzich

Bootstrap is a product of Twitter. If you want your team to work like Twitter’s team, then by all means use Bootstrap. Pick up their design language. Their tool chain. Their decisions. Don’t be surprised when it feels off every time you use it. It will.

The same goes for Material Design. Foundation. These are all products built by other teams to work for their process. Their structure.

Finding the right tool is not what I am advocating for. Making it is.

The Many Faces Of… Punch Dancing

Last time I was in Austin I met up with Trent who got very animated when as he described a childhood strapping shinguards to his arms and recreating the montage fighting/dancing scenes from the finest of 80s movies.

That explains where this website is coming from.

Generate Mozilla Security Recommended Web Server Configuration Files

This is useful if you’re making the switch to HTTPS: choose your web server software and version to generate a configuration file.

Developer Resources : Microsoft Edge Dev

Microsoft are officially on board with implementing Service Workers in Edge:

Roadmap Priority: High — We intend to begin development soon.

Short note on improving usability of scrollable regions

Three very easy to implement additions to scrollable areas of your web pages: tabindex="0", role="region", and an aria-label attribute.

Link rel=serviceworker - Chrome Platform Status

Ooh, I really like this idea! Pointing to your Service Worker the same way you point to your style sheet makes a lot of sense to me.

Wednesday, February 3rd, 2016

Jeremy Kard

You can do anything with CSS these days.

Monday, February 1st, 2016

Making A Service Worker: A Case Study – Smashing Magazine

Lyza has written an excellent deep dive into Service Workers, complete with code.

I’m really chuffed that she gave me a shout-out to my exhortation:

So if you decide to play around with Service Workers, please, please share your experience.

By the way, I like her point about this being a good opportunity to use ES6/ES2015/HipsterScript features like arrow functions in the browser: any browser that supports Service Workers also supports the latest JavaScript.

A simple HTML5 Progress bar | Charlotte Jackson, Front-end developer

I love this little markup pattern: simple, accessible and elegant …with some quirky CSS gotchas around styling non-standard prefixed pseudo-elements. They came from the Shadow DOM …dun dun DUN!

Links, Buttons, Submits, and Divs, Oh Hell | Adrian Roselli

Use the right element for the job.

  • Does the Control Take Me to Another Page? Use an Anchor.
  • Does the Control Change Something on the Current Page? Use a Button.
  • Does the Control Submit Form Fields? Use a Submit.

The accessibility stack: making a better layer cake » Simply Accessible

A great description of a solid architectural approach to building on the web (and not just for accessibility either).

Friday, January 29th, 2016

Taking part in the IndieWeb

The slides from Calum’s presentation at Front-end London.

Thursday, January 28th, 2016

AMBER

This is intriguing—a Pinboard-like service that will create local copies of pages you link to from your site. There are plug-ins for WordPress and Drupal, and modules for Apache and Nginx.

Amber is an open source tool for websites to provide their visitors persistent routes to information. It automatically preserves a snapshot of every page linked to on a website, giving visitors a fallback option if links become inaccessible.

The End of Big Data | Motherboard

A great piece of near-future sci-fi from James.

I enforce from orbit, making sure all the mainframes that used to track and store every detail of our lives are turned off, and stay off. And as the sun comes up over Gloucestershire this morning, there they are, resplendent in the mist-piercing light of RITTER’s multispectral sensors: terabytes of storage laid out around the scalped doughnut of the former GCHQ building. Enough quantum storage to hold decades of the world’s pillow talk. Drums of redundant ethernet cable stacked stories-high. Everything dismantled, disconnected, unshielded. Everything damp with morning dew.

Wednesday, January 27th, 2016

Introducing Soundslice offline mode | The Soundslice Blog

Adrian documents how he’s using Service Workers on Soundslice. I could imagine doing something similar for The Session.

Tuesday, January 26th, 2016

Responsive Image Breakpoints Generator by Cloudinary

A very handy tool for figuring out breakpoints for responsive images.

Upload an image in its largest size, play around with the settings, and then generate the breakpoints, the markup, and the resized images for each breakpoint.

Performance Budget Builder

A nifty tool from Brad to help calculate and allocate performance budgets. Click around and edit the numbers.

EnhanceConf line-up by Simon McManus

This is shaping up to be a great affordable one-day event in London on March 4th. The format will be similar to Responsive Day Out.

I suggest you grab a ticket.