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.
A device agnostic approach to inlining CSS | Blog | Decade City
I very much agree with Orde’s framing here: I don’t think it makes much sense to talk about “above the fold” CSS …but it makes a lot of sense to talk about critical CSS.
And, yeah, it’s another example of progressive enhancement.
Improving accessibility on GOV.UK search | Technology at GDS
Alice Bartlett shares her experience of getting aria-live regions to work in a meaningful way.
CSS Guidelines – High-level advice and guidelines for writing sane, manageable, scalable CSS
Harry has written down his ideas and recommendations for writing CSS.
RWD Podcast Episode #15 : Jeremy Keith — Responsive Web Design
I had a good ol’ chat with Justin Avery from Responsive Web Design Weekly. We talk about performance, Responsive Day Out, and yes, progressive enhancement.
Tablesaw - A Flexible Tool for Responsive Tables
Those lovely people at Filament Group share some of their techniques for making data tables work across a range of screen sizes.
We Work in a World of Assumptions – The Pastry Box Project
Dan Donald gets to the heart of progressive enhancement:
Assumptions in themselves don’t have to be inherently bad but let’s recognise them for what they are. We know very little but that can hopefully enable us to be far more flexible and understanding in what we create.
A lot can change in 6 years - Allen Pike
An astute comparison of the early years of the web with the early years of the app store. If there’s anything to this, then the most interesting native apps are yet to come. App Store 2.0?
How we make RWD sites load fast as heck
Scott shares the code that Filament Group are using to determine which style declarations are critical (and can be inlined) and which are non-critical (and can be loaded asynchronously). It makes quite a difference in perceived performance.
By the way, I really, really like the terminology of “critical” and “non-critical” CSS, rather than “above the fold” and “below the fold” CSS.
RWD Bloat - daverupert.com
Dave wanted to figure out if having a responsive site necessarily meant taking a performance hit, so he ran the numbers on his own site. It turns out all of performance-related issues are not related to responsive design.
Ten facets of web development that you can choose to focus on. One of them is from me …but other nine are worth paying attention to.
Full-width pinned layouts with flexbox
Zoe uses one little case study to contrast two different CSS techniques: display-table and flexbox. Flexbox definitely comes out on top when it comes to true source-order independence.
I can relate to every single word that Bastian has written here.
The longer I look at boilerplates, build tools, frameworks and ways to make my life as a developer easier, the more I long for the basics.
Radio-Controlled Web Design · An A List Apart Article
Let’s Talk About RTL
Some very handy techniques for working with right-to-left text.
A Maintainable Style Guide - Ian Feather
The challenges of maintaining a living breathing front-end style guide for an always-evolving product (the Lonely Planet website in this case).
GitHub’s CSS · @mdo
Mark Otto talks through the state of Github’s CSS and the processes behind updating it. There’s a nice mix of pragmatism and best practices, together with a recognition that there’s always room for improvement.
What’s the design process at GDS? | Government Digital Service
A look behind the scenes of gov.uk. I like their attitude to Photoshop comps:
We don’t want a culture of designs being “thrown over a wall” to a dev team. We don’t make “high fidelity mock ups” or “high fidelity wireframes”. We’re making a Thing, not pictures of a Thing.
We don’t have a UX Team. If the problem with your service is that the servers are slow and the UX Team can’t change that, then they aren’t in control of the user experience and they shouldn’t be called the user experience team.
Smart Fixed Navigation
Here’s an intriguing approach to offering a navigation control that adapts as the user scrolls.
I’m not too keen on the way it duplicates the navigation in the markup though. I might have a play to see if I can find a way to progressively enhance up from a link-to-footer pattern to achieve this.
How to build the sensory web by John Allsopp
John peers behind the surface veneer of the web’s current screen-based setting:
The challenge for us as developers and designers for the web becomes less about screens and pixels and buttons and much more about how the web augments our lives, both actively and passively; how it makes us know ourselves and our homes and workplaces and environments better.
The Developer’s Dystopian Future – The Pastry Box Project
My interest in rich client-side apps has almost entirely reversed, and now I’m more interested in doing good ol’ server rendering with the occasional side of progressive enhancement, just like we did it in 2004.
This post resonates with me 100%.
What it means to be a Front-end Developer in 2014 – The Pastry Box Project
I can very much relate to what Dan is talking about here. I have no idea what I do any more.
No doubt we’ll always feel we’re behind the curve as there always seems like more to learn. That’s OK. No-one knows it all, but it is hard knowing what people expect of you.
How are apps made? by Craig Mod
With the usual caveat that I wish this were published on Craig’s own site, I particularly like this passage:
Apps, too, are ephemeral. Some of the most ephemeral software we’ve ever produced. Ephemeral if for no other reason than because of their gated homes. Our apps cower below the fickle whim of App Store Gods, struck down for no reasonable reasons or for very reasonable reasons. It doesn’t matter which, the end result is always the same: gone, forever.
Getting Back That Lovin’ Feeling on Sparkbox
A lovely little tale of empowerment through HTML and CSS.
Comparing two ways to load non-critical CSS
Scott’s trying to find out the best ways to load critical CSS first and non-critical CSS later. Good discussion ensues.
Using Encapsulation for Semantic Markup on CSS-Tricks
I really hope that this is the kind of usage we’ll see for web components: enhancements for the browsers that support them without a good ol’ fashioned fallback for older browsers.
It’s OK not to use tools by Jonas Downey of Basecamp
Today, a basic HTML/CSS site seems almost passé. But why? Is it because our new tools are so significantly better, or because we’ve gone overboard complicating simple things?
He’s right, y’know.
Open-Source Projects by Filament Group
Those smart people at Filament Group have gathered their open-source code into one handy place. Useful!
Data attributes and progressive enhancement - Simply Accessible
Derek’s excellent advice on avoiding over-reliance on data attributes has this brilliant nugget of insight:
In the web front-end stack — HTML, CSS, JS, and ARIA — if you can solve a problem with a simpler solution lower in the stack, you should. It’s less fragile, more foolproof, and just works
Peter Nixey - How to be a great software developer
I’m not sure if I agree completely with every point, but this is a great shortlist of things you can do to make your code more resilient and understandable (thereby making you, by any sensible definition, a better programmer).
Creating Style Guides · An A List Apart Article
A great article by Susan on getting started with creating a styleguide for any project.
I’ve seen firsthand how style guides save development time, make communication regarding your front end smoother, and keep both code and design consistent throughout the site.
Confessions Of A CSS Expert
Funny because it’s true:
The thing I regret the most is how my class addiction affected my relationship with HTML.
Bruce Lawson’s personal site : Notes on accessibility of Web Components
Bruce’s thoughts on ensuring accessibility in Web Components. He thinks that the vocabulary of ARIA is up to the job, so that’s good enough for me.
Section for peer-reviewed Custom Elements · Issue
Some sensible thoughts from Addy on how Web Components might be peer-reviewed.
Aerotwist - Web Components and the Three Unsexy Pillars
A healthy dose of scepticism about Web Components, looking at them through the lenses of accessibility, security, and performance.
I share some of this concern: Web Components might look like handy ready-made out-of-the-box solutions, but the truth is that web developers have to do much more of the hard graft that was traditionally left to the browser.
Making ubuntu.com responsive: intro | Ubuntu Design Blog
Yaili is documenting the process of retrofitting ubuntu.com to be responsive. I’ll be avidly reading each post in this series.
Device-Agnostic by Trent Walton
A terrific post from Trent, touching on all the important facets of building for the web: universality, progressive enhancement, performance …great stuff!
The Pastry Box Project, Scott Jehl, Friday, 7 March 2014
Scott writes an absolutely spot-on skewering of the idea that progressive enhancement means you’re going to spend your time catering to older browsers. The opposite is true.
Progressive Enhancement frees us to focus on the costs of building features for modern browsers, without worrying much about leaving anyone out. With a strongly qualified codebase, older browser support comes nearly for free.
Mobile-first and IE8 Solution – Introducing grunt-legacssy (Updated) | Robin Plus
A handy way of automating the creation of old-IE stylesheets using Grunt. This follows on from Jake’s work in using preprocessors and conditional comments to send a different stylesheet to IE8 and below—one that doesn’t contain media queries. It’s a clever way of creating mobile-first responsive sites that still provide large-screen styles to older versions of IE.
Platformed. — Unstoppable Robot Ninja
The importance of long-term thinking in web design. I love this description of the web:
a truly fluid, chaotic design medium serving millions of imperfect clients
An interesting pattern for handling complex data tables in responsive designs. It’s a desktop-down approach, but pretty smart.
Robin Rendle › A Visual Lexicon
Some great thoughts in here about web development workflow and communication between designers and developers.
I believe that the solution is made up of a variety of tools that encourage conversation and improve our shared lexicon. Tools such as styleguides, pattern libraries, elemental and modular systems that encourage access not only by developers, but by designers, shareholders and editors as well.
Getting Started With Pattern Libraries ∙ An A List Apart Blog Post
A great post from Anna on the front-end styleguides she’s worked on for A List Apart and Code for America. ‘Twas a pleasure working with her on the Code for America project.
A-mer-ica! Fuck yeah!
You Might Not Need jQuery
Don’t get me wrong: jQuery is great, but for a lot of projects, you might not need 90% of the functionality it provides. So try starting with vanilla JS and only pulling in jQuery if and when you need it.
A List Apart Pattern Library
Another front-end style guide for the collection. This time it’s from A List Apart. Lovely stuff!
Why is Progressive Enhancement so unpopular? — All in the head
Like Drew, I’ve noticed some real hostility to the idea of progressive enhancement recently. Like Drew, I don’t really understand where this attitude comes from. It’s not like progressive enhancement prevents you from doing anything you would do otherwise: it’s just another way of approaching the way you build for the web.
I hope I’m wrong, but I suspect that some developers are letting their tools dictate their principles—the tail wagging the dog (where the tail is Angular, Ember, etc.).
Flexbox for forms - German for black
Here’s a clever use of flexbox: have a form field stretch to fill up most of the space and a button fill up what’s left.
A handy one-stop-shop for documentation on web technologies.
Fast Enough - TimKadlec.com
Some sensible thinking from Tim on measuring performance gains.
Bulletproof Accessible Icon Fonts | Filament Group, Inc., Boston, MA
An in-depth look at using icon fonts without any nasty edge-cases ruining your day.
Another good ol’ rant from Tom. It’s a bit extreme but the underlying lamentation with the abandonment of progressive enhancement is well founded.
The (other) Web we lost
John shares his concerns about the increasing complexity involved in developing for the web.
Building for the device agnostic web | Talks | Decade City
Some excellent practical advice on progressive enhancement.
The lie of the API by Ruben Verborgh
I agree completely with the sentiment of this article (although the title is perhaps a bit overblown): you shouldn’t need a separate API—that’s what you’re existing URL structure should be.
I’m not entirely sure that content negotiation is the best way to go when it comes to serving up different representations: there’s a real value in being able to paste a URL into a browser window to get back a JSON or XML representation of a resource.
But this is spot-on about the ludicrous over-engineered complexity of most APIs. It’s ridiculous that I can enter a URL into a browser window to get an HTML representation of my latest tweets, but I have to sign up for an API key and jump through OAuth hoops, and agree to display the results in a specific way if I want to get a JSON representation of the same content. Ludicrous!
Responsive scrollable tables | 456 Berea Street
I like this CSS solution to sideways-scrolling tables for small viewports. It’s not going to be right for every situation but it’s a handy trick to keep up your sleeve.
Jeremy Keith – The Power Of Simplicity – border:none
This is the talk I gave at the border:none event in Nuremberg last month. I really enjoyed it. This was a chance to gather together some thoughts I’ve been mulling over for a while about how we approach front-end development today …and tomorrow.
Warning: it does get quite ranty towards the end.
Also: it is only now that the video is released that I see I spent the entire talk looking like a dork with a loop of wire sticking out of the back of my head.
Grade components, not browsers—Filament Group, Inc., Boston, MA
I really like Scott’s approach to defining what “support” means in terms of browsers—it makes a lot sense to break things down to the component level.
Pattern Library | MailChimp
The markup for the patterns that Mailchimp use on their products. I love getting a glimpse of how companies handle this kind of stuff internally.
Chloe Weil — Our Ragged History
In describing her approach to building the wonderful Julius Cards project, Chloe touches on history, digital preservation, and the future of the web. There are uncomfortable questions here, but they are questions we should all be asking ourselves.
I hate carousels, but if you’re going to have one, this progressively enhanced approach looks pretty good.
Responsive design, screens, and shearing layers — Unstoppable Robot Ninja
A wonderful piece by Ethan taking issue what the criticism that responsive design is over-reliant on screen size. Instead, he says, it begins with screen size, but there’s no limit to where we can go from there.
Responsive design might begin with the screen, but it doesn’t end there.
Responsive App Design
Dan Bricklin—co-creator of the original VisiCalc spreadsheet—turns his attention to responsive design, specifically for input-centric tasks.
“Now with Responsive!,” an article by Dan Mall
Dan gives some insight into what it took to make his personal site responsive. Stay tuned: there’ll be more of this.
If it doesn’t work on mobile, it doesn’t work | hacker journalist
A great presentation from Brian Boyer on NPR’s mobile strategy. Spoiler: it’s responsive design.
The Web Ahead 56: The Nature of the Web with Jeremy Keith on Huffduffer
I had a lot of fun chatting with Jen on this week’s episode of The Web Ahead. Wind me up and let me loose; I ended up rambling on about blogging, the indie web movement, progressive enhancement, and just about everything in between.
Do as Little as Possible ∙ An A List Apart Column
I heartily concur with Lyza’s mini-manifesto:
I think we need to try to do as little as possible when we build the future web …putting commonality first, approaching differentiation carefully.
It’s always surprised me how quickly developers will reach for complex, potentially over-engineered solutions, when—in my experience—that approach invariably creates more problems than it solves.
Simplicity is powerful.
Progressive Enhancement: It’s About the Content
A cogent definition and spirited defence of progressive enhancement:
Progressive Enhancement is an extension of our shared values on the web and goes to the root of the web. I believe—and hope you agree—that the web is for everybody and should be accessible regardless of the device a user brings to the party.
Here’s the CSS and markup you need to make third-party iframes responsive. Handy!
Progressive Enhancement. Still Alive and Kickin’
Go, Dan, go!
‘Sfunny, I was talking about just this kind of thing at An Event Apart today.
Is HTML Relevant in the Age of Web Apps? by John Allsopp
John addresses the price of increasing complexity in front-end development.
Yes, tooling can make our life easier. We type fewer keystrokes, and commit more code. But as software engineers learned a long time ago, most of the life of an applications is not in its initial development. It’s in maintaining it. This is something we on the web have had the luxury of being able to largely ignore up to now. After all, how many of the things you build will last years, decades?
My Metaphorical Job Title - That Emil
Get out my head, Emil! This is pretty much exactly how I feel about my work, especially this bit:
In trying to be the best web developer I can, I feel a need to understand the web. That involves a lot of what some of my friends who are not in the web business think my job is about, i.e. “clicking on funny links all day”. I read copiously about new and old technologies. I bookmark them, I try to classify them, see them in the light of history as well as projected future. Follow up on them. Try them out. Even if they’re not specifically about what I do for a living, the nature of them might have a bearing on my understanding of how other people use the web.
SVG and image tag tricks
A very, very clever hack to provide fallback images to browsers that don’t support SVG. Smart.
JS Bin’s 5th birthday and news
Happy birthday, JS Bin!
Remy has some important news. No, it’s not the competition to recreate animated gifs with canvas; scroll down past that…
Remy will be working on JS Bin full time. To make this possible, JS Bin will have Pro accounts. But don’t worry; all the functionality available today will continue to be available in the future.
But Pro accounts will get a bunch of nifty extra features (and if you’re in education, you get Pro for free).
Sign me up!
A handy collection of links to web-related podcasts. Go forth and huffduff.
Being Practical - TimKadlec.com
Yet another timely reminder from Tim, prompted by the naysayers commenting on his previous excellent post on progressive enhancement, universal access, and the nature of the web.
Create a responsive ad unit - AdSense Help
Looks like Google are offering responsive (or at least adaptive) ad sizes.
Crippling the web - TimKadlec.com
A great call-to-arms from Tim, simply asking that we create websites that take advantage of the amazing universality of the web:
The web has the power to go anywhere—any network, any device, any browser. Why not take advantage of that?
Inevitably there is pushback in the comments from developers still in the “denial” stage of coming to terms with what the web is.
Responsive design: we are not there yet
A call for developers to let standards bodies know what we want:
It is important that we as developers focus on the right things again. If you encounter a bug, you should not only fix it for your site; you should reach out to browser vendors and web standards people to fix this in a long-term solution. It might cost you a few minutes, but brings a lot of improvement to the whole developer community.
Media Query Events Example
A page to demonstrate the conditional CSS technique I documented a while back.
Responsive Navigation: Examples of Navigation in Responsive Design
A nice collection of navigation patterns for responsive designs. The demos aren’t using a mobile-first approach, and they’re reliant on jQuery, but they could be easily adapted.
Progressive enhancement is still important by Jake Archibald
Progressive Enhancement: Still Not Dead. - That Emil
There’s something fundamental and robust about being able to request a URL and get back at least an HTML representation of the resource: human-readable, accessible, fault tolerant.
Web Fonts and the Critical Path - Ian Feather
The battle between web fonts and performance. Ian Feather outlines some possible solutions, but of course, as always, the answer is “it depends”.
Leveraging Advanced Web Features in Responsive Design
A terrific case study in progressive enhancement: starting with a good ol’ form that works for everybody and then adding on features like Ajax, SVG, the History API …the sky’s the limit.
James Somers – Web developer money
A well-written piece on the nature of work and value on the web, particularly in the start-up economy.
Best Practices for Designing a Pragmatic RESTful API by Vinay Sahni
Design principles for APIs.
An API is a user interface for developers. Put the effort in to ensure it’s not just functional but pleasant to use.
The State Of Responsive Web Design on Smashing Mobile
A comprehensive look at the current state of things in the world of responsive design, with a look to possible future APIs.
Text-align: Justify and RWD
Here’s a nifty trick: using text-align: justify to get a nice responsive grid layout.
Progressive enhancement in the Government Service Design manual
A nice description of progressive enhancement by Norm, as applied at GDS.
A handy plugin for Chrome that always you to inspect media query breakpoints and take screenshots at any of them.
I know jQuery. Now what?
A terrific piece by Remy—based on a talk he gave—on when he uses jQuery and, more importantly, when he doesn’t. His experiences and conclusions pretty much mirror my own, but of course Remy is far more thoughtful and smart than I.
Really good stuff.
On pattern portfolios | Clear Thinking - The Clearleft Blog
Jon gives some insight into how and why we use pattern portfolios as deliverables at Clearleft.
Responsive Nav — Responsive Navigation Plugin
Responsive Deliverables by Dave Rupert
Dave talks about the kind of deliverables that get handed over in a responsive project. Sounds a lot like what we do at Clearleft.
Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients’ needs.
Check you’re wearing trousers first by Robert Heaton
Some cautionary tales of over-engineering solutions before doing some quick user-testing to establish what the real problems are.
It’s a pleasant delusion to believe that all our problems require hard solutions.
Responsive Day Out by Laura Kalbag
A terrific, in-depth round-up and recollection of the Responsive Day Out by Laura that ties all of the strands together.