Tags: frontend

Battling BEM – 5 common problems and how to avoid them

We tend to use a variant of BEM in our CSS at Clearleft. Glad to see that when we’ve hit these issues, we’ve taken the same approach.

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!

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.

Jeremy Kard

You can do anything with CSS these days.

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!

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).

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.

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.

The elements of HTML

A complete list of HTML elements, past and present. They’re all hyperlinked to the relevant specs.

Developer Fallacies | HeydonWorks

Some of the explanations get a little ranty, but Heydon’s collection of observed fallacies rings true:

  • The gospel fallacy
  • The Luddite fallacy
  • The scale fallacy
  • The chocolate fireguard fallacy
  • The pull request fallacy
  • The ‘made at Facebook’ fallacy
  • The Bob the Builder fallacy
  • The real world fallacy
  • The Daphne and Celeste fallacy

I’ve definitely had the Luddite fallacy and the scale fallacy thrown in my face as QEDs.

The ‘made at Facebook’ fallacy is pretty much identical to what I’ve been calling the fallacy of assumed competency: copying something that large corporation X is doing just because large corporation X is doing it.

Revisiting the Float Label pattern with CSS — That Emil is Emil Björklund

A clever technique by Emil to implement the “float label” pattern using CSS. It all hinges on browsers supporting the :placeholder-shown pseudo-class which, alas, is not universal.

I was hoping that maybe @supports could come to the rescue (so that a better fallback could be crafted), but that tests for properties and values, not selectors. Damn!

The Art of Debugging

I was just helping out with some debugging at work and it reminded me of this great talk/post by Remy:

  1. Replicate: see the bug
  2. Isolate: understand the bug
  3. Eliminate: fix the bug

RWD Interview with Jeremy Keith and Trent Walton

Myself and Trent answer some questions on responsive design for Justin’s excellent newsletter.

JavaScript web apps considered valuable · molily

A response to a rant I linked to recently.

The solution for bad JavaScript web apps is not to abandon them altogether, but to make better ones.

I couldn’t agree more. The tools have evolved and we now have frameworks and practices that allow us to render from the server and use the same code to render on the client, progressively enhancing from a solid robust base.

JavaScript is the best technology to build excellent interactivity in the browser. Still, the most important skill of a client-side JavaScript developer is to know when not to solve a problem with client-side JavaScript. It’s always more robust to solve a problem further down in the stack.

The problem is that I don’t see a willingness from developers to embrace this way of thinking. Instead I see it dismissed as being unrealistic or more expensive.

Still, it always takes time for behaviour to change so maybe things will only get better. I certainly hope so.

Don’t tell me what my browser can’t do! by Christian Heilmann

A great piece by Christian on taking a responsible, customer-focused approach to building on the web.

You don’t have to support old browsers and terrible setups. But you are not allowed to block them out. It is a simple matter of giving a usable interface to end users. A button that does nothing when you click it is not a good experience. Test if the functionality is available, then create or show the button.

Yes, this is an argument for progressive enhancement. No, that does not mean you can’t use JavaScript.

You can absolutely expect JavaScript to be available on your end users computers in 2016. At the same time it is painfully naive to expect it to work under all circumstances.

Why I hate your Single Page App by Stefan Tilkov

A linkbaity title for a ranty post. But it’s justified.

My point is that from an architectural perspective, most single page apps are the result of making the wrong choices and missing important opportunities.

Feature.js

A lightweight alternative to Modernizr. It doesn’t add classes to your markup so it’s up to what you do with the results of any test.

It’s perfect for cutting the mustard on a case-by-case basis.

Delicious Changes | The Official Delicious Blog

The first big change you’ll notice is our transition from the javascript front-end framework that has been powering the content at https://www.delicious.com. The engineers who crafted this version of the site are incredibly talented, and their code is amazing. It’s beautiful and powerful, but it has posed several significant challenges for us. For example, the search engines have a real problem reading our content, hindering users’ efforts to use Google or Bing to find what they’re looking for on Delicious.

WTF Opera Mini?!

The proxy browser Opera Mini is one of the most popular mobile browsers in the world, and rightly so. Ire Aderinokun has put together a handy collection—based on caniuse.com data—of all the features that are unavailable or only partially available in that browser. The point here is not to avoid using these features, but to make sure you’ve got a solid fallback in place:

This isn’t about bashing the problem, but figuring out the solution.

Using System Fonts in the Browser

We have some new font keywords that are basically shortcuts to using the system fonts on a device. This article explains the details.

Reimagining Single-Page Applications With Progressive Enhancement – Smashing Magazine

Some really great thinking here by Heydon on how to make single page apps but using HTML for the views instead of relying on client-side JavaScript for the rendering. He explains the code he’s using, but what really matters here isn’t the specific solution; it’s the approach. Smart!

Simply Jonathan: Multiple values for checkboxes

Following on from the post by Aaron that I linked to, more details about sending (and receiving) values from multiple checkboxes with the same name.

12 Little-Known CSS Facts (The Sequel)

I somehow missed this when it was first published last Summer: a collection of twelve obscure CSS knowledge grenades.

You learn something new every day. I just learned twelve somethings.

The Problem with Progressive Enhancement by Alex Lande

I think that “Do we want to support users without JS?” is the wrong question. Progressive enhancement has benefits that reach far beyond that user group.

Specifically:

  1. Performance—”Progressively enhanced behaviors like using links that point to real URLs, or server-side form submission handling, allow users to perform important actions before JavaScript loads.”
  2. Resilience—”If users can perform critical tasks when your JS breaks, it’s a minor inconvenience instead of a show stopper.”
  3. Business, Business, Business.

Affirming User Choice With Checkboxes, From the Notebook of Aaron Gustafson

Well, this is timely! Just today I was having a really good natter with Charlotte about using checkboxes, specifically sending multiple values to the server:

You’ll notice that the name given to each of these checkbox input elements is the same: “reservation-requested-device[]”. The square brackets (“[]”) at the end of the name are the magic bit that allows the values of each chosen “reservation-requested-device” checkbox to be submitted as the value of “reservation-requested-device”.

See, I wasn’t sure whether that was just a PHP thing (the only server-side input-handling I’ve had much experience of) or whether it was a more general way of sending multiple values.

Update: It seems that the square brackets are indeed a PHP thing. Multiple values will be sent in any case. See this test case.

ScrollReveal

A nice self-contained script for animating items into view as the document scrolls.

I’d like be interested to hear what Graham thinks of this code—he’s my go-to person for smooth scroll-based animations.

(I’m very confused by the tagline for ScrollReveal—”Easy scroll animations for web and mobile browsers”—eh? Mobile browsers are web browsers …”web” is not a synonym for “desktop”.)

Content and Display Patterns | Brad Frost

Brad follows up with his thoughts on Dan’s article, emphasising the importance of a developer’s role in not just slavishly recreating what’s in a static comp, but seeing through to the underlying pattern beneath:

It’s so incredibly crucial to treat development as a key part of the design process.

“Content & Display Patterns,” an article by Dan Mall

A really terrific article from Dan on building pattern libraries. In summary:

  1. Naming things is hard,
  2. Separation of content and presentation is A Good Thing.

There are some really good insights here into getting just the right level of abstraction for a component—not too tightly tied to a specific visual display, but also not too tightly tied to a specific kind of content type:

When thinking about patterns, content strategists are primarily thinking about Content patterns, designers are primarily thinking about Display patterns, and front-end developers are responsible for bringing the two together.

(And it’s great to see Charlotte’s excellent article get a shout-out in the “Related reading” section at the end,)

Simple inline error message pattern

This is my go-to method for adding validation messages to forms—I think I first heard about it from Derek—so it’s nice to see it corroborated by Steve:

Add the error message as a child of the label element associated with an input.

jordanmoore/Modern-Default-HTML

This is so weird—Jordan Moore’s boilerplate responsive HTML template is exactly the same as mine! What are the odds‽

(I was once asked to contribute a boilerplate starter for

The Website Obesity Crisis

As promised, Maciej has posted the transcript of his excellent Web Directions talk on performance.

So, so good.

The App-ocalypse: Can Web standards make mobile apps obsolete? | Ars Technica

I really, really want to like this article—it’s chock full of confirmation bias for me. But it’s so badly-written …I mean like, just the worst.

Here’s an actual sentence:

So with a capable, HTML-based platform and a well-designed program that makes good use of CSS, one site could support phones, tablets, PCs, and just about anything else with one site.

So, yeah, I’m still linking to it, but instead of it being for the content, it’s because I want to lament the dreadful state of technology writing.

JavaScript: 2015 in Review

Use a framework if you must but never presume it’s viable over the long-term. Newer and better alternatives will appear before you’re half-way through your project. Never forget frameworks are an option — you don’t have to use one.

Touch Keyboard Type ‘Cheat Sheet’ - Labs - Baymard Institute

A useful primer on which combinations of attributes and values work best for which form fields: type, autocomplete, autocorrect, and autocapitalize.

getify/You-Dont-Know-JS

Graham—whose opinion I trust completely—has been raving about these books. And Kyle Simpson is a super-smart guy. So I reckon I should make these JavaScript tomes my holiday reading.

Photo upload and progressive enhancement for FixMyStreet / mySociety

Matthew describes a very nice bit of progressive enhancement for drag’n’drop file uploads (similar to the CSS Tricks article I linked to recently).

It uses the Dropzone JS which looks like it aligns nicely with the progressive enhancement approach.

Building the UX London website by Charlotte Jackson

Charlotte talks through some of the techniques she used when she was building the site for this year’s UX London, with a particular emphasis on improving perceived performance.

More Responsive Tapping on iOS | WebKit

This solution to the mobile tap delay by the WebKit team sounds like what I was hoping for:

Putting touch-action: manipulation; on a clickable element makes WebKit consider touches that begin on the element only for the purposes of panning and pinching to zoom. This means WebKit does not consider double-tap gestures on the element, so single taps are dispatched immediately.

It would be nice to know whether this has been discussed with other browser makers or if it’s another proprietary addition.

Interactive Storytelling | Codrops

I think this might be the most tasteful, least intrusive use of scroll events to enhance a Snowfallesque story. It’s executed superbly.

You can read all about the code. Interestingly, it’s using canvas to render the maps even though the maps themselves are being stored as SVG.

(There’s a caveat saying: “This is a highly experimental project and it might not work in all browsers. Currently there is no IE support.” I don’t think that’s true: the story works just in IE …that browser just doesn’t get the mapping enhancements.)

What Progressive Web Apps Mean for the Web - Telerik Developer Network

A hands-on look at building a progressive web app with Service Workers, manifest files, HTTPS, and all that good stuff. This is nice and balanced, extolling the virtues but also warning about the potential difficulties in implementing this stuff.

One nitpick though: there’s talk of graceful degradation, and while I get that that’s the outcome, I think it’s better to think in terms of progressive enhancement, which is the approach.

Maciej Ceglowski - The Website Obesity Crisis on Vimeo

A superb talk on performance, advertising, and the future of the web. No doubt a transcript will appear in due time on Maciej’s site and when it does, I will enjoy it all over again.

Trust me: you’ll want to watch this.

The web accessibility basics – Marco’s Accessibility Blog

Marco gives a run-down of the basics of getting accessibility right on the web. Nothing here is particularly onerous but you’d surprised how often developers get this wrong (or simply aren’t aware of it).

He finishes with a plea to avoid unnecessary complexity:

If there’s one wish I have for Christmas from the web developer community at large, it is this: Be good citizens of the web, and learn proper HTML before you even so much as touch any JavaScript framework. Those frameworks are great and offer a lot of features, no doubt. But before you use hundreds of kilobytes of JavaScript to make something clickable, you may want to try if a simple button element doesn’t do the trick just as fine!

Simplified JavaScript Jargon

An A-Z of JavaScript jargon (although some of the “explanations” could do with de-jargonifying themselves).

HIKE - Introduction to accessibility concepts for the Web

It really isn’t hard to get the basics of accessibility right on the web …and yet those basics are often neglected.

Here’s a handy shortlist to run through, HIKE:

  • H stands for headings and semantic markup.
  • I stands for images and labels.
  • K stands for keyboard navigation.
  • E asks for you to ACT with a little extra love for custom components and more.

(ACT = ARIA, Colour Contrast, Text Size)

IonicaBizau/gridly

Grid frameworks don’t get much more minimal than this—eleven lines of CSS:

.row { display: flex; }
.col { flex: 1; }
@media (max-width: 48em) {
    .row { flex-direction: column; }
    .col { flex: 0 0 100%; }
}
.col-tenth { flex: 0 0 10%; }
.col-fifth { flex: 0 0 20%; }
.col-quarter { flex: 0 0 25%; }
.col-third { flex: 0 0 33.3333334%; }
.col-half { flex: 0 0 50%; }

Should’ve been a gist really.

Putting My Patterns through Their Paces ◆ 24 ways

Ethan demonstrates progressive enhancement at the pattern level using flexbox.

I’ve found that thinking about my design as existing in broad experience tiers – in layers – is one of the best ways of designing for the modern web.

HTML Developers: Please Consider | HTML5 Doctor

The best ARIA role is the one you don’t need to use.

Autumn-Earth/serviceWorker.js

Here’s a really nice addition to my Service Worker script—opportunistically add non-critical CSS, JavaScript, and fonts to a cache as you go.

Progressive Enhancement—Ain’t Nobody Got Time for that | GlückPress

Two sides of a debate on progressive enhancement…

Andrey “Rarst” Savchenko wrote Progressive enhancement — JS sites that work:

If your content website breaks down from JavaScript issue — it is broken.

Joe Hoyle disagrees:

Unlike Rarst, I don’t value progressive enhancement very highly and don’t agree it’s a fundamental principle of the web that should be universally employed. Quite frankly, I don’t care about not supporting JavaScript, and neither does virtually anyone else. It’s not that it doesn’t have any value, or utility - but in a world where we don’t have unlimited resources and time, one has to prioritise what we’ll support and not support.

Caspar acknowledges this:

I don’t have any problem buying into pragmatism as the main and often pressing reason for not investing into a no-JS fallback. The idealistic nature of a design directive like progressive enhancement is very clear to me, and so are typical restrictions in client projects (budgets, deadlines, processes of decision making).

But concludes that by itself that’s not enough reason to ditch such a fundamental technique for building a universal, accessible web:

Ain’t nobody got time for progressive enhancement always, maybe. But entirely ditching principle as a compass for resilient decision making won’t do.

See also: Mike Little’s thoughts on progressive enhancement and accessibility.

briangonzalez/fontprep

The missing font generator for Mac OS X.

Very handy for subsetting fonts for the web. It doesn’t (yet) export WOFF2 unfortunately.

The web will always be a moving target : Eclectic Dreams

Caution:

It would be convenient to think that because we live in a world where people’s browsers are regularly updating, that we live in a world where the web is in a reliable state.

Reminder:

The web is a continually moving target. It probably changed in the time it took me to write this. If you work with web stuff you need to embrace this fact. It will be the only constant in your career.

Do not panic:

On the web progressive enhancement is and will always be, the methodology of choice. It makes your site robust to the shifting sands of the web front end.

Cutting the Mustard Revisited — sixtwothree.org

Jason revisits some cutting-the-mustard techniques, as started by the BBC and refined by Jake. This kind of feature-testing is indispensable for progressive enhancement.

Personally though, I’m still uncomfortable with the assumptions baked into equating particular features with particular browsers …maybe I’ve known PPK too long.

I much prefer to cut the mustard on a case-by-case basis by feature testing the actual APIs I’m about to use in a script. I realise that might be harder to scale, and it’s more verbose, but it’s the only way to be absolutely sure.

The “Blur Up” Technique for Loading Background Images | CSS-Tricks

Quite a few moving parts in this technique from Emil, but it’s very clever.

Learn to Code HTML & CSS - Beginner & Advanced

This looks like a great resource for anyone setting out to learn how to make websites.

Gethtml - all the html elements

The A-Z of HTML, with an example for each and every element. Comprehensive and impressive.

philipwalton/flexbugs

A list of known bugs (and workarounds) in flexbox implementations. This is going to be handy to refer back to.

Bliss.js — Heavenly JavaScript!

A small little JavaScript helper from Lea.

The helper library for people who don’t like helper libraries.

Flexbox Grid Finesse | HeydonWorks

Great tips from Heydon on building a real design system using flexbox. Perfect for those times when you can’t predict the amount of content that will be in layout …so, pretty much always.

There’s even a trick in here that kinda sorta gives us element queries.

Universal React ◆ 24 ways

I have no hands-on experience with React, but this tutorial by Jack Franklin looks like a great place to start. Before the tutorial begins he succinctly and clearly outlines the perfect architecture for building on the web today:

  • The user visits www.yoursite.com and the server executes your JavaScript to generate the HTML it needs to render the page.
  • In the background, the client-side JavaScript is executed and takes over the duty of rendering the page.
  • The next time a user clicks, rather than being sent to the server, the client-side app is in control.
  • If the user doesn’t have JavaScript enabled, each click on a link goes to the server and they get the server-rendered content again.

YES!!!

Y’know, I had a chance to chat briefly with Jack at the Edge conference in London and I congratulated him on the launch of a Go Cardless site that used exactly this technique. He told me that the decision to flip the switch and make it act as a single page app came right at the end of the project. I think that points to a crucial mindset that’s reiterated here:

Now we’ll build the React application entirely on the server, before adding the client-side JavaScript right at the end.

Progressive enhancement needs better advocacy • Zetafleet

A rousing call to arms for progressive enhancement. I agree with the sentiment, but I’m less comfortable making assumptions about the reasons why developers don’t use progressive enhancement:

However, what’s actually happening is that “universal access to content” is being subversively replaced with “universal access for a limited subset of users that I care about”.

Honestly, I think that plenty of developers just aren’t thinking about it—especially if they’re relying on a particular tool or framework to save them time and effort (which is not a crime). So that’s why I agree with the title of this piece: let’s talk about this more; let’s make sure developers understand what they’re doing when they make JavaScript a requirement for basic functionality.

I particularly like the point in here about content blockers like NoScript:

In fact, it’s probably more likely that a user will try browsing the Web today without scripting than at any other time since the 1990s.

WTF is Solid?- Solid

The new style guide and pattern library for Buzzfeed.

It all looks pretty reasonable on the surface but if you poke around in the CSS, you’ll find 1157 uses of !important. Yikes!

The whole point of having an agreed-upon codebase in a pattern library is so that developers need never reach for nuclear options like !important, so I’m afraid, for me, this is a demonstration of what not to do (in terms of CSS—the output of the HTML in the styleguide looks perfectly fine).

Solid uses immutable, atomic CSS classes…

CSS is “mutable”. By design. I don’t think we should be working against that.

Performance Calendar » Reducing Single Point of Failure using Service Workers

This is a nifty use of Service Workers—using a cache to mitigate unresponsive Content Delivery Networks.

The stuff in here about Promise.race is particularly useful for “lie-fi” scenarios: instead of thinking about the network connection in a binary way (either it’s available or it isn’t), considering the scenario of a crappy network connection seems more realistic.

Creating a Web Type Lockup | CSS-Tricks

A really great idea from Chris: using SVG to create the web equivalent of type lockups that can scale with all the control you want, while still maintaining accessibility.

Speaking of accessibility, Emil’s comment is very useful indeed.

Flexbox’s Best-Kept Secret

I’m filing this one away for future reference: combining flexbox with margin:auto is a magical combination.

Using auto margins with Flexbox is an effective way to get all of the flexibility of css floats, without the nastiness of breaking elements out of the document’s normal flow.

Remember this, future self!

Flexbox Froggy - A game for learning CSS flexbox

This is superb!

Flexbox can be tricky to get your head around, but this exercise does a great job of walking you through each step in a fun way. I highly recommend trying all 24 levels.

Drag and Drop File Uploading | CSS-Tricks

This is a terrific example of progressive enhancement in action: going from a simple file input to a lovely interactive drag’n’drop interface.

The code uses jQuery but it could be easily adapted to vanilla JavaScript, and anyway, it’s not so much the code that matters, it’s the approach.

Blocked! - O’Reilly Radar

Following on from that Wired article I linked to about disabling JavaScript, Simon St. Laurent brings in another factor—content blockers on iOS:

Apple offers its users the power to turn off much of the Web: fonts, styles, scripts, and more.

He rightly points out that the answer to building a robust, resilient web has been here all along:

Turning off web fonts, CSS, and images will frustrate designers and limit user interface possibilities, but turning off JavaScript might mean that we have to reconsider the architecture of our applications. Without JavaScript, the Web returns to its foundations of HTTP requests returning pages, with links and form submissions as the backbone of application structure.

HTML5: The New Flash

A new presentation from the wonderfully curmudgeonly Steven Pemberton, the Nosferatu of the web. Ignore the clickbaity title.

I don’t agree with everything he says here, but I strongly agree with his preference for declarative solutions over (or as well as) procedural ones. In short: don’t make JavaScript for something that could be handled in markup.

This part really, really resonated with me:

The web is the way now that we distribute information. We will need the web pages we create now to be readable in 100 years time, just as we can still read 100-year-old books.

Requiring a webpage to depend on a particular 100-year-old implementation of Javascript is not exactly evidence of future-thinking.

Troubleshooting rendering performance issues - YouTube

Harry packs a lot of great tips and tricks into one short video about performance troubleshooting. It’s also a great lesson in unlocking some handy features in Chrome’s developer tools.

Great stuff!

A look at detecting, pinpointing, measuring, and fixing rendering performance issues.

Five Goofy Things Medium Did That Break Accessibility — Medium Engineering

Some mea culpas from a developer at Medium. They share so that we may learn.

Tips for Creating and Exporting Better SVGs for the Web

Sara enumerates some handy tips aimed squarely at designers exporting SVGs. It focuses on Illustrator in particular but I’m sure a lot of this could equally apply to Sketch.

Instant Loading Web Apps With An Application Shell Architecture | Web Updates - Google Developers

Outlining the architectural thinking required to create what the Google devrel folks are calling progressive apps.

Browsers without service worker support should always be served a fall-back experience. In our demo, we fall back to basic static server-side rendering…

Yay!

…but this is only one of many options.

Hmmm. In my opinion, sending usable HTML on first request isn’t an implementation detail—it’s crucial. But on the whole, this approach is very sensible indeed.

Google+ | Google Web Showcase - Google Developers

Paul gives the lowdown on the Google+ responsive relaunch. They set themselves this performance budget:

  • 60K of HTML,
  • 60K of CSS,
  • 60K of JavaScript,
  • 60 frames per second animations, and
  • 0.6 seconds latency.

And this bit is crucial:

One of our major rules was that all our pages needed to be both server-side and client-side rendered. With server-side rendering we make sure that the user can begin reading as soon as the HTML is loaded, and no JavaScript needs to run in order to update the contents of the page.

Aerotwist - The Cost of Frameworks

Here’s Paul’s write-up of his excellent talk at FF Conf.

Previously I’ve used the term “developer convenience” when describing the benefits of using a framework. Paul uses the term “ergonomics” to describe those benefits. I like that. I worry sometimes that the term “developer convenience” sounds dismissive, which isn’t at all my intention—making our lives as developers less painful is hugely important …but it’s just not as important as improving the lives of the end users (in my opinion …and Paul’s).

As I look at frameworks, I see the ergonomic benefits (and those are important, I agree!), but I can’t help but feel that, for many developers, investing in knowledge of the web platform itself is the best long-term bet. Frameworks come and go, it just seems to be the ebb and flow of the web, and, as I said above, they do contribute ideas and patterns. But if you ever find that the one you use no longer works for you, or has a bug that remains unfixed, being able to understand the platform that underpins it will help enormously.

You should use [insert library/framework], it’s the bestestest! / Paul Lewis - YouTube

This was one of favourite talks at this year’s FF Conf. But I will readily admit there’s a hefty dollop of confirmation bias in my enjoyment.

Best viewed with - Velocity Amsterdam 2015 // Speaker Deck

Are we doomed to see history repeat itself? With the amount of client-side MVC frameworks and the upcoming implementation of the ES6 syntax, will we soon be seeing a repeat of the “browser wars.” Will more websites only work in a select number of browsers with the capabilities to run their code?

Three years with CSS Grid Layout

Rachel outlines the history of the CSS Grid Layout spec so far:

The process works, as slow as it may seem to us who wait anxiously to be able to take advantage of these techniques. I am happy that we are waiting for something that I really believe has the ability to completely change how we do layout on the web.

An Offline Experience with Service Workers | Brandon Rozek

A great walkthrough of setting up a Service Worker for a blog. The code is here but more importantly, as Brandon says:

I wouldn’t be able to implement this myself if it wasn’t for some of the awesome people I mentioned earlier sharing their experience. So share, share, share!

Moodboard — a small JavaScript library for presenting image moodboards on the web

A lovely little script from Nat to create a nice montage of images. It works by progressively enhancing a regular series of images in the markup.

jonathantneal/mdcss

A tool for generating a pattern library from Markdown comments in CSS. This isn’t the way that I tend to work, but I can see how it would be quite handy.

Making a Simple Site Work Offline with ServiceWorker | CSS-Tricks

Another clear explanation by Nicolas of using Service Worker, this time on CSS Tricks.

NC.gov Styleguide

The comprehensive style guide and pattern library for North Carolina.

From Pages to Patterns: An Exercise for Everyone · An A List Apart Article

I’m so proud of Charlotte right now: last week she gave a conference talk and today she has an article published in A List Apart. Superb work on both fronts!

She does a great job of talking through a collaborative exercise to help teams move from thinking in pages to thinking in patterns.

Delivering Responsibly

The full transcript of Scott’s excellent presentation on performance and progressive enhancement.

<input> I ♡ you, but you’re bringing me down – Monica Dinculescu

The sad history of input elements.

I wish I could share in the closing optimism:

Now imagine the future where Web Components are supported natively, and someone else is allowed to write a <better-input>, an element that is a real, encapsulated DOM element, and not just a div soup. Imagine using this <better-input> that isn’t implemented differently in each browser, that looks the same everywhere, and that probably also knows how to bake you a cherry pie.

But I all I can think is:

Now imagine the future where Web Components are supported natively, and everyone is allowed to write a million variations of <my-idea-of-a-better-input>, an element that is an inaccessible div soup under the hood.

Using Quantity Queries to write content-aware CSS - tomango

Another take on the kind of quantity queries that Charlotte has been experimenting with for a while now. It all goes back to the nth-child stuff that Heydon was talking about at Responsive Day Out

The State of JavaScript on Android in 2015 is… poor - Discourse Meta

There’s something quite Kafkaesque about reading through the comments on Jeff Atwood’s request for an alternative to Ember.js …for rendering some text on a screen.

Every now and then someone pipes up with “server-rendered HTML?”, there’s a pause, and then a response of “naahhhhh.”

Surreal.

Accelerated Mobile Pages - I’ve Got More Questions than Answers by Andy Davies

Andy examines Google’s AMP project from a performance perspective and is left puzzled by its reliance on JavaScript and custom elements for rendering media.

But he shares my hope that AMP could serve as a demo of what the web could be if we developers had the will and political clout to see it through:

I wonder if what AMP really does is remind us how we’ve failed to build a performant web… we know how to, but all too often we just choose not to (or lose the argument) and fill our sites with cruft that kills performance, and with it our visitors’ experience.

Official Google Webmaster Central Blog: Deprecating our AJAX crawling scheme

It’s official: hash bang URLs are an anti-pattern, and if you want your content indexed by Google, use progressive enhancement:

Since the assumptions for our 2009 proposal are no longer valid, we recommend following the principles of progressive enhancement.

Performance Budget Calculator

A handy little for calculating your performance budget based on how long you want your page to take to load on a particular connection.

Responsive News — AMP and Responsive Web Design

Tom’s thoughts on what AMP means for developers and publishers. He was initially sceptical but now he’s cautiously optimistic. Like me, he’s hoping that AMP can force the hand of those third-party advertisers to get their act together.

Publisher’s development teams are very capable of creating fast experiences for mobile users, but they don’t have the clout to coordinate all the additional cruft that is added to the page. However, if all the different publishers dev team’s got together and put their weight behind a single implementation, then we can force third parties to change their habits.

Responsive Field Day

All the videos from the excellent Responsive Field Day are now available. Even better, the audio is also available for your huffduffing pleasure!

All the presentations and panels were great. Sophie Shepherd’s terrific talk has really stuck with me.

Jeremy Keith - Responsive Field Day 2015 - YouTube

Here’s the 20 minute talk I gave at the inaugural Responsive Field Day in Portland.

Miranj: Collateral Damage

Websites should not come with minimum software requirements.