Tags: frontend

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.

Styleguide

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

Grid by Example

We were discussing the CSS3 grid layout module in the Clearleft office today, so naturally Rachel’s name came up. This is such a great resource for diving into this stuff.

Progressive Enhancement and Data Visualizations | CSS-Tricks

A nice little pattern for generating a swish timeline in SVG from a plain ol’ definition list in HTML.

The Practical Case for Progressive Enhancement — sixtwothree.org

You know what? Just go and read everything that Jason writes, okay?

Ruddy good stuff.

Designing Experience Layers — sixtwothree.org

The engineering benefits of building websites with a layered approach.

Why, yes, I am talking about progressive enhancement yet again! Why do you ask?

The “Web Application” Myth — Medium

Sensible words from Christian.

Web applications don’t follow new rules.

And frameworks will not help:

A lot of them are not really fixing fundamental problems of the web. What they do is add developer convenience. … This would be totally OK, if we were honest about it.

Responsible Social Share Links — Jonathan Suh

If you insist on having “social” sharing buttons, here’s a way to avoid bloating your page unnecessarily.

But you might want to reconsider whether you need them at all.

Experience Development pt. 2: Progressive Enhancement with Jeremy Keith on Huffduffer

I really enjoyed chatting with the guys on the The Dirt podcast about progressive enhancement, but my goodness; it certainly sounds like I need to switch to decaf! Yappity-yapity-yap!

Over It by Brad Frost

So keep things simple. Build to standards. Use progressive enhancement. Don’t try to send wheelbarrows full of JavaScript down the pipes unless you have to. Don’t make assumptions.

A Long Journey Reaches a Happy Conclusion: The Uncertain Web is Out In All Formats

Rob Larsen was published a book with O’Reilly called “The Uncertain Web: Web Development in a Changing Landscape”. I like it:

A refreshingly honest look at the chaotic, wonderful world of web development, with handy, practical advice for making future-friendly, backward-compatible websites.

The Shifting Definition of Front-End Developer

I don’t agree with the conclusion of this post:

Let’s define “front-end” to mean the parts of the app relating to user interface, rather than those that happen to be running in the browser’s JavaScript VM.

But I think the author definitely taps into a real issue:

The real problem is the perception that any code running in the browser is front-end code.

Let’s face it: programming something in Angular and Ember has much more in common with programming something in Rails or Django than it has with writing HTML, CSS, and JavaScript.

This is something we’re running into at Clearleft: we’ve never done backend programming (by choice), but it gets confusing if a client wants us to create something in Angular or Ember, “because that’s front end code, right?”

Front end and back end - QuirksBlog

This!

The difference between back-enders and front-enders is that the first work in only one environment, while the second have to work with myriad of environments that may hold unpleasant surprises.

Yes!

I feel that the subconscious assumption that a complex JavaScript-driven web site or web app will run in only one monolithic environment is the root cause of many problems front-enders see in back-end-driven web-based projects.

The challenge for web designers in 2015 (or how to cheat at the future)

Designing primarily in a laptop web browser and testing with a mouse rather than fingers may come to look very out of date soon.

The problem with Angular - QuirksBlog

I have doubts about Angular 1.x’s suitability for modern web development. If one is uncharitably inclined, one could describe it as a front-end framework by non-front-enders for non-front-enders.

How we use web fonts responsibly, or, avoiding a @font-face-palm by Filament Group

Smart thinking here on the eternal dilemma with loading web fonts. Filament Group have thought about how the initial experience of the first page load could be quite different to subsequent page loads.

Sass Guidelines

Advice for writing Sass. I don’t necessarily agree with everything, but on the whole, this is a solid approach.

It’s worth bearing Chris’s advice in mind.

CSS: Just Try and Do a Good Job

Good advice from Chris, particularly if you’re the one who has to live with the CSS you write.

As Obi-Wan Kenobi once said, “You must do what you feel is right, of course.”

Taking Chrome DevTools outside of the browser. — Kenneth Auchenberg

Kenneth has isolated Chrome’s dev tools into its own app. This is a big step towards this goal:

Why are DevTools still bundled with the browsers? What if clicking “inspect element” simply started an external DevTools app?

With DevTools separated from one specific browser, a natural next step would be making the DevTools app work with other browsers.

Poor Man’s Styleguide | A frontend styleguide for the pragmatic

A handy starting point for creating a front-end styleguide: a single document of HTML elements.

Implement Server-Side Rendering for SEO · Issue #9938 · emberjs/ember.js

The motivation seems entirely misplaced to me (SEO? Really?) but never mind: the end result could be the holy grail of JavaScript MVC frameworks — code that runs on the server and the client. That would get you the reach and initial rendering speed of progressive enhancement, combined with the power of client-side application logic once the page has loaded.

Watch this space.

Responsive Enhancement ◆ 24 ways

My contribution to this year’s edition of the web’s best advent calendar.

Websites of Christmas Past, Present and Future ◆ 24 ways

A superb article by Josh on planning for progressive enhancement—clearly laid out and carefully explained.

Bruce Lawson’s personal site  : On the accessibility of web components. Again.

I completely share Bruce’s concern about the year-zero thinking that’s accompanying a lot of the web components marketing:

Snarking aside, why do so few people talk about extending existing HTML elements with web components? Why’s all the talk about brand new custom elements? I don’t know.

Hear, hear!

I’m a fan of web components. But I’m increasingly worried about the messaging surrounding them.

Performance Budget Metrics - TimKadlec.com

Some good practical advice from Tim on setting a performance budget.

Use rule-based metrics to make sure you haven’t overlooked simple optimizations.

Use quantity-based metrics as guides to help designers and developers make better decisions about what goes onto a page.

Mobile Last?

This isn’t a scientific data sample, but Jonathan’s anecdotal evidence seems to suggest that most web designers and developers are still thinking with a desktop-first mentality. Which is crazy.

Style Guide Resources

A very handy collection from Anna: articles, books, talks, podcasts, and examples of front-end style guides. If something’s missing, feel free to add it.

You’re So Smart You Turned JavaScript into XHTML

Web developers overwhelmingly rejected the draconian error-handing of XML …and yet today, web developers are embracing that very same error-handling model by rendering everything with JavaScript.

I don’t think it’s the way of the web to have your site fail and show a blank screen because some third-party dependency doesn’t load, JavaScript is turned off or because your developer left a trailing comma in a JavaScript object and didn’t test in Internet Explorer.

Overwhelmed by Code · An A List Apart Blog Post

Focus on what you want to learn; not what you think you should learn.

There is a lot of pressure out there: to learn new things, to spend all your time coding, to be the super developer. I now believe that to be impossible and unhealthy. It means you aren’t living a balanced life and it also means that you’re living under constant stress and pressure.

Responsive Images in Practice · An A List Apart Article

A great primer on using srcset and picture. I think I’ll be referring back to this a lot.

7 Principles of Rich Web Applications

High-level design principles for JavaScript on the web.

ARIA Quicktip: Labelledby vs. Describedby, From the Notebook of Aaron Gustafson

Yesterday, Aaron gave a great talk at BD Conf about forms. In one example, he was using aria-describedby. I was a bit confused by the differences between aria-describedby and aria-labelledby, so Aaron has very helpfully clarified the distinction.

Stop Breaking the Web

Angry, but true.

Don’t lock yourself into a comprehensive technology that may just die within the next few months and leave you stranded. With progressive enhancement you’ll never go wrong. Progressive enhancement means your code will always work, because you’ll always focus on providing a minimal experience first, and then adding features, functionality, and behavior on top of the content.

JS Bin: Vertical centering is impossible in CSS lol!

Four different techniques for vertical centring in CSS, courtesy of Jake.

Replacing Radio Buttons Without Replacing Radio Buttons

A great technique from Heydon for styling radio buttons however you want.

Solved By Flexbox — Cleaner, hack-free CSS

Documenting common layout issues that can be solved with Flexbox. I like the fact that some of these can be used as enhancements e.g. sticky footer, input add-ons …the fallback in older browsers is perfectly acceptable.

The boring front-end developer - Adam Silver, Front end developer, based in London

My name is Jeremy and I am a boring front-end developer.

Progressive Enhancement Basics

Some thoughts on progressive enhancement, although I disagree with the characterisation of progressive enhancement as being the opposite choice to making “something flashy that pushes the web to it’s limits”—it’s entirely possible to make the flashiest, limit-pushing sites using progressive enhancement. After all…

it’s much more a mindset than a particular development technique.

56 Experts reveal 3 beloved front-end development tools

Turns out that Brian LeRoux and I gave the same answer to this question:

  1. HTML
  2. CSS
  3. JavaScript

I think I just saved you a click.

Using ServiceWorker in Chrome today - JakeArchibald.com

It’s very early days for ServiceWorker, but Jake is on hand with documentation and instructions on its use. To be honest, most of this is over my head and I suspect it won’t really “click” until I try using it for myself.

Where it gets really interesting is in the comments. Stuart asks “What about progressive enhancement?” And Jake points out that because a ServiceWorker won’t be installed on a first visit, you pretty much have to treat it as an enhancement. In fact, you’d have to go out of your way to make it a requirement:

You could, of course, throw up a splash screen and wait for the ServiceWorker to install, creating a ServiceWorker-dependant experience. I will hunt those people down.

A Fundamental Disconnect, From the Notebook of Aaron Gustafson

I think Aaron is spot-on here. There’s a tendency to treat web development these days as just the same as any other kind of software development—which is, on the one hand, great because it shows just how far JavaScript and browsers have come …but on the other hand, that attitude is missing a crucial understanding of the fundamental nature of the web’s technology stack (that we should be treating HTML, CSS, and JavaScript as layers; not as one big ball of webby, timey-wimey stuff).

Extensible Web Summit Berlin 2014: my lightning talk on Web Components | soledad penadés

Soledad Penadés also went to the Extensible Web Summit in Berlin, where she gave a lightning talk. Sounds like it was really good.

This also includes some good advice that, again, Alex might want to consider before denouncing any disagreement on Web Components as “piffle and tosh”:

If the W3C, or any other standardisation organisation wants to attract “normal” developers to get more diverse inputs, they/we should start by being respectful to everyone. Don’t try to show everyone how superclever you are. Don’t be a jerk. Don’t scare people away, because then only the loud ones stay, and the quieter shy people, or people who have more urgent matters to attend (such as, you know, having a working business website even if it’s not using the latest and greatest API) will just leave.

Notes on notes (of smart people) about web components

Steve Faulkner responds to Alex’s response to my post about Web Components.

Steve shares my concerns …but he still refers to my post as “piffle”.

I can’t win.

Uncomfortably Excited – Infrequently Noted

Alex’s response to my post about Web Components, in which he ignores my excitement and dismisses my concerns as “piffle and tosh.”

I gotta say: I think cautious optimism and nervous excitement are healthy attitudes to have about any technology. For Alex to dismiss them so summarily makes me even more worried. Apparently you’re either with Web Components or you’re against them. Heaven forbid that you might voice any doubts or suggest any grey areas.

The beatings will continue until morale improves.