Tags: frontend

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…


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


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


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.

18F — Introducing the U.S. Web Design Standards

The story behind the newly-released pattern library for the US government.

The anatomy of responsive images - JakeArchibald.com

This is the best moment to write a blog post:

I just had my responsive images epiphany and I’m writing it all down before I forget everything.

Writing something down (and sharing it) while you’re still figuring it out is, in my opinion, more valuable than waiting until you’ve understood something completely—you’ll never quite regain that perspective on what it’s like to have beginner’s mind.

The tough truth of reality by Chris Taylor

Progressive enhancement is not about “what if users turn JavaScript off” but “what happens when the page is loaded in sub-optimal circumstances”.

Where to Put Your Search Role by Adrian Roselli

This is a very handy tip. I had been putting form role="search" all over The Session. Turns out that’s overriding the default role of “form”. Oops!

GOV.UK elements

I really like the clear styling of checkboxes and radio buttons in the GDS pattern library. Fitts’s law in action.

Lightning Design System

A nice combination of style guide and pattern library, with plenty of documentation.

A fictional conversation about progressive enhancement

So a web app is defined as a system that requires the JavaScript excesses for it to work. And the argument for the JavaScript excesses is that we need it to build web apps. That sounds a teeny bit circular to me.

180: Panel on “Inline Styles” - ShopTalk on Huffduffer

Shop Talk Show is trying a new panel format. They got me on to join in the discussion about adding inline styles with JavaScript instead of using Cascading Style Sheets.

Doing Science On The Web – Infrequently Noted

Alex recounts the sordid history of vendor prefixes and looks to new ways of allowing browsers to ship experimental features without causing long-term harm.

Making Charts with CSS | CSS-Tricks

What a lovely bit of progressive enhancement—styling data tables to display as charts.

CSS element() function - Vincent De Oliveira

Fire up Firefox and try out these demos: the CSS element value is pretty impressive (although there are currently some serious performance issues).

To put it simply, this function renders any part of a website as a live image. A. Live. Image!

CSS counter property By Charlotte Jackson

This is nifty little piece of CSS for numbering nested lists. I don’t think I’ve come across the counter value or the counter-reset and counter-increment properties before (or if I did, I’ve completely forgotten about it).

Confidence and Overwhelm

Following on from her great conversation with Jen on The Web Ahead podcast, Rachel outlines a strategy to avoid feeling overwhelmed by the deluge of tools, frameworks, libraries, and techniques inundating front-end developers every day:

Learn your core skills well. Understand HTML and CSS, be able to build a layout without leaning on a framework. Get a solid understanding of how a website actually gets from the server to a browser, an understanding of security and accessibility. These are the basics, the constants. These things change slowly. These things sit underneath all the complexity and the tooling, the CMSs and the noise of thousands of people all trying to make their mark on this industry.

She also makes this important point:

As you are doing this don’t forget to share what you know.

Dave Shea – – beyond tellerrand DÜSSELDORF 2015 on Vimeo

A wonderful, wonderful history of the web from Dave at this year’s Beyond Tellerrand conference. I didn’t get to see this at the time—I was already on the way back home—so I got Dave to give me the gist of it over lunch. He undersold it. This is a fascinating story, wonderfully told.

So gather round the computer, kids, and listen to Uncle Dave tell you about times gone by.

Performance update #2: Electric Boogaloo | Vox Product Blog

It’s really great to see the performance improvements being made by the Vox team. This is the one that I think will make the most difference:

Our Revenue Team is increasing focus on the impact our advertising has on user experience and overall performance. One of their biggest initiatives has been to change the way ads load from synchronous to asynchronous, which has been underway for several months and is nearing deployment.

The Language of Modular Design · An A List Apart Article

Alla has taken the ideas she presented in her superb talk at Responsive Day Out and published them as a great article in A List Apart.

Designing for Performance by Lara Callender Hogan

Lara’s fantastic book is now available online in HTML for free. Have a read and then order a copy of the print book for your library.

Stephen Hay | The Back(side) of the Class | CSS Day on Vimeo

A great presentation from Stephen. He takes a thoughtful look at our processes and tools.


Huge have released their tool for generating front-end style guides.

Efficient Web Type, c. 1556

A long zoom and then a deep dive into web typography.

NTH-TEST | nth-child and nth-of-type Tester

A tool for getting instant visual feedback on your nth-child selectors. Considering that the way I figure out nth-child selectors is to try randomly changing numbers until it works, this should be quite useful for me.

You might not need jQuery plugins

From the people who brought you youmightnotneedjquery.com comes youmightnotneedjqueryplugins.com.

Don’t get me wrong—jQuery is great (some of the plugins less so) but the decision about whether to use it or not on any particular project should be an informed decision made on a case-by-case basis …not just because that’s the way things have always been done.

These sites help to inform that decision.

The Ushahidi Platform ~ Pattern Library

A really nicely-documented pattern library.

Edge Conference 2015 - 5 Progressive Enhancement - YouTube

Here’s the video of the panel I participated in at Edge conference, expertly moderated by Lyza.

Thanks to the video editing, you can’t see the face I’m making when the guy from Facebook talks about user-agent sniffing as a totally cool and reliable way of working.

Designing with Progressive Enhancement — sixtwothree.org

The full text of Jason’s great talk at this year’s CSS Summit. It’s a great read, clearing up many of the misunderstandings around progressive enhancement and showing some practical examples of progressive enhancement working at each level of the web’s technology stack

Contextual Styling: UI Components, Nesting, and Implementation Detail by Harry Roberts

Smart thinking from Harry here on a common issue when it comes to naming and styling. As he points out, the solution is not technical, but lies in how you form your mental model:

The design issue here is solved by subtly inverting the problem.

tota11y – an a11y visualization toolkit

A handy little bookmarklet for doing some quick accessibility checks.

Thriving in Unpredictability - TimKadlec.com

This is the way to approach building for the web:

I want to make as few of those assumptions as possible. Because every assumption I make introduces fragility. Every assumption introduces another way that my site can break.

It’s progressive enhancement, but like Stuart, Tim is no longer planning to use that term.

as days pass by — Availability

Stuart writes up his thoughts on progressive enhancement following the great discussions at Edge Conf:

So I’m not going to be talking about progressive enhancement any more. I’m going to be talking about availability. About reach. About my web apps being for everyone even when the universe tries to stop it.

When Responsive Images Get Ugly by Taylor Hunt on CodePen

This is a deep, deep dive into responsive images and I can only follow about half of it, but there are some really useful suggestions in here (I particularly like the ideas for swapping out images for print).

Practical Questions around Web Components - Ian Feather

An in-depth look at where web components stand today, together with some very good questions about where they might be heading tomorrow.

The W3C Mobile Checker

A new handy little performance testing tool from the W3C along the lines of Page Speed Insights.

A Practical Guide to SVGs on the web

Handy tips for creating, optimising, and using SVG on the web, be it in CSS or HTML.

Tiny two way data binding

I really like this approach that Remy is taking: write some code to one thing, and just one thing. I much prefer my JavaScript to be small pieces loosely joined rather than monolithic.

More of this kind of thing, please!

Progressive Apps: Escaping Tabs Without Losing Our Soul – Infrequently Noted

I really like Alex’s framing of best-of-breed progressively enhanced websites as “progressive apps” (although Bruce has some other ideas about the naming).

It’s a shame that the add-to-homescreen part isn’t standardised yet though.

A Complete Guide to SVG Fallbacks | CSS-Tricks

An up-to-date round-up of the various techniques available when you want to provide a fallback for SVG.

Viewport vs Percentage Units - bitsofco.de

A comparison of when to use percentages and when to use vw/vh in your CSS.

Dev.Opera — Making websites that work well on Opera Mini

Using Progressive Enhancement makes your site better for all users and enables the 275 million users of Opera Mini worldwide.

How we built the new gocardless.com — GoCardless Blog

A classic example of the holy grail of web performance and robustness—start with regular HTML sent from the server, enhance once it’s in the browser …if the browser is capable of it. In this case, it’s using JavaScript (React) on both the server and the browser.

Supercharging page load (100 Days of Google Dev) - YouTube

A straight-faced Jake talks us through the step-by-step iterations for turning a JavaScript-required web thang into a progressively enhanced zippy experience, supercharged with Service Worker.

A few quick links and thoughts on big web problems – Baldur Bjarnason

The system makes the website. Don’t blame the web developer, blame the organisation. A web developer embedded in a large system isn’t the one making the websites.

To make a progressively enhanced website that performs well and loads quickly even on slow connections, you need to first make an organisation that values those qualities over others.

The web is fast by default, let’s keep it fast | hiddedevries.nl

Apart from the best practices that can often be automated, there are many human decisions that have impact on page speed. A way to make page speed part of the conversation and optimising it part of a website’s requirement, is to set a performance budget.

Making a difference with performance by Jaime Caballero

This is a great blow-by-blow account of making an agency website perform better.

I love the side-by-side comparisons with other agencies, including Clearleft—the gauntlet has been thrown down!

Style Guides with Jeremy Keith

I had a lot of fun chatting with Brad and Anna for the final episode of their small batch podcast on style guides and pattern libraries.

Instant Web · An A List Apart Column

More thoughts on the lack of a performance culture, prompted by the existence of Facebook Instant:

In my experience, the biggest barrier to a high-performance web is this: the means of production are far removed from the means of delivery. It’s hard to feel the performance impact of your decisions when you’re sitting on a T3 line in front of a 30 inch monitor. And even if you test on real devices (as you should), you’re probably doing it on a fast wifi network, not a spotty 3G connection. For most of us, even the ones I would describe as pro-performance, everything in the contemporary web design production pipeline works against the very focus required to keep the web fast.

15 Years Ago in ALA: Much Ado About 5K · An A List Apart Blog Post

Zeldman looks back at Stewart Butterfield’s brilliant 5K contest. We need more of that kind of thinking today:

As one group of web makers embraces performance budgets and the eternal principles of progressive enhancement, while another (the majority) worships at the altar of bigger, fatter, slower, the 5K contest reminds us that a byte saved is a follower earned.

The JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancement

Progressive Enhancement remains the best option for solving web development issues such as wide-ranging browser support, maintenance and future-proofing your application.

The Many Faces of The Web

Instead of coming up with all these new tools and JavaScript frameworks, shouldn’t we try to emphasize the importance of learning the underlying fundamentals of the web? Teach those who are just stepping to this medium and starting their careers. By not making our stack more and more complex, but by telling about the best practices that should guide our work and the importance of basic things.

Killer page load performance – Async

This Async event at 68 Middle Street on June 11th looks like it’s going to good (and relevant to my interests).

keyboard (div) ✿ dabblet.com

Here’s a really nifty use of the :checked behaviour pattern that Charlotte has been writing about—an interface for choosing a note from a piano keyboard. Under the hood, it’s a series of radio buttons and labels.

Everyone has JavaScript, right?

And that’s why you always use progressive enhancement!

screen shot from the TV series Arrested Development, showing a character whose catchphrase began 'And that's why...'

Accessibility and Low-Powered Devices | Brad Frost

Brad points out the importance of supporting—which is not the same as optimising for—the non-shiny devices out there.

I really like using the Kindle’s browser as a good baseline for checking that information is available and readable.

Progressive enhancement with handlers and enhancers | hiddedevries.nl

I like this declarative approach to associating JavaScript behaviours with HTML elements.

Keeping it simple: coding a carousel by Christian Heilmann

I like this nice straightforward approach. Instead of jumping into the complexities of the final interactive component, Chris starts with the basics and layers on the complexity one step at a time, thereby creating a more robust solution.

If I had one small change to suggest, maybe aria-label might work better than offscreen text for the controls …as documented by Heydon.

Let Links Be Links · An A List Apart Article

A superb piece by Ross Penman on the importance of being true to the spirit of the web.

With a spoonful of flexbox by Charlotte Jackson, Front-end developer

Charlotte has experimenting with a nice discrete bit of flexbox on her personal site. Here she documents what she did, and what the fallback is.

Playing With Flexbox and Quantity Queries, From the Notebook of Aaron Gustafson

Aaron documents his process of implementing Heydon’s clever quantity queries in CSS.

I am really looking forward to hearing Heydon’s talk at Responsive Day Out.

Purple: A UI kit for Heroku’s web interfaces

Hot on the heels of Github’s pattern library, here’s Heroku’s.

Home · Primer

Github’s pattern library.

As always, it’s great to see how other organisations are tackling modular reusable front-end code (though I can’t imagine why anyone other than Github would ever want to use it in production).

Responsive News — We’ve made it.

The responsive BBC News site is live! Hurrah!

Here’s a look at the highs and lows of the site’s story, emphasising the importance of progressive enhancement and all that enables: feature detection (by “cutting the mustard”), conditional loading, and a mobile-first approach.

Experiment: Using Flexbox Today - Chris Wright

Practical examples showing where you can use flexbox right now, along with some strategies on how to start doing it.

What Does My Site Cost?

A terrific little tool from Tim that puts performance into perspective by measuring how much money users are spending just to view your website on a mobile device.

A JS framework on every table - Allen Pike

The Tower of JavaScript Babel.

The Path to Performance // Speaker Deck

The slides from Katie’s recent talk.

Performance is a rising requirement for building successful websites, but successful performance begins far earlier than development. So how do you get your entire team excited by it, specifically aesthetic-heavy designers?

Quantity Queries for CSS · An A List Apart Article

A terrific bit of smart CSS thinking from Heydon Pickering.

You know he’s speaking at Responsive Day Out, right?

localFont - A localStorage solution for web font loading

A quick drag’n’drop way to base 64 encode your web fonts so you can stick ‘em in local storage.

Harnessing Flexbox For Today’s Web Apps - Smashing Magazine

More flexbox!

This time it’s a great article by Karen Menezes filled with practical examples showing where you can use flexbox today.

flexbox in 5 minutes

A really handy interactive intro to flexbox. Playing around with the properties and immediately seeing the result is a real help.

Access Optional - TimKadlec.com

It will come as no surprise that I agree with every single word that Tim has written here.

Awesomplete: Ultra lightweight, highly customizable, simple autocomplete, by Lea Verou

Lea wasn’t happy with the lack of styling and extensibility of the datalist element, so she rolled her own lightweight autocomplete/type-ahead widget, and she’s sharing it with the world.

Who Should Pay?, From the Notebook of Aaron Gustafson

When I look around, I see our community spending a lot of time coming up with new tools and techniques to make our jobs easier. To ship faster. And it’s not that I’m against efficiency, but I think we need to consider the implications of our decisions. And if one of those implications is making our users suffer—or potentially suffer—in order to make our lives easier, I think we need to consider their needs above our own.

Progressive Enhancement is not about JavaScript availability. | Christian Heilmann

A great description of progressive enhancement.

Progressive enhancement in its basic form means not making assumptions

Making the case for Progressive Javascript — The Millstone — Medium

I think we can all agree that “isomorphic JavaScript” is a terrible name for a good idea. I quite like calling it “portable JavaScript”, but here’s a good case for calling it “progressive JavaScript.”

(Right up until the end when the author says “But mainly, it’s pretty safe to assume JavaScript will just work. Everywhere.” …which is precisely the kind of unfounded assumption that leads to the very problems that isomorphic/portable/progressive JavaScript can help fix.)

Better SVG Fallback and Art Direction With The <picture> Element

Smart thinking from Sara on providing a PNG fallback to browsers that don’t support SVG. Although, actually what I like about this solution is that it’s less about providing PNG as a fallback, and more about treating PNG as the baseline and SVG as the enhancement (an approach that the picture element is perfect for).