Tags: html

596

sparkline

Monday, June 11th, 2018

Designing Web Content for watchOS - WWDC 2018 - Videos - Apple Developer

If you don’t fancy watching this video, Eric Runyon has written down the salient points about what it means for developers now that websites can be viewed on the Apple Watch. Basically, as long as you’re writing good, meaningful markup and you’ve got a sensible font stack, you’re all set.

Or, as Tim puts it:

When we build our sites in a way that allows people using less-capable devices, slower networks and other less than ideal circumstances, we end up better prepared for whatever crazy device or technology comes along next.

Friday, June 8th, 2018

Registering service workers

In chapter two of Going Offline, I talk about registering your service worker wrapped up in some feature detection:

<script>
if (navigator.serviceworker) {
  navigator.serviceworker.register('/serviceworker.js');
}
</script>

But I also make reference to a declarative way of doing this that isn’t very widely supported:

<link rel="serviceworker" href="/serviceworker.js">

No need for feature detection there. Thanks to the liberal error-handling model of HTML (and CSS), browsers will just ignore what they don’t understand, which isn’t the case with JavaScript.

Alas, it looks like that nice declarative alternative isn’t going to be making its way into browsers anytime soon. It has been removed from the HTML spec. That’s a shame. I have a preference for declarative solutions where possible—they’re certainly easier to teach. But in this case, the JavaScript alternative isn’t too onerous.

So if you’re reading Going Offline, when you get to the bit about someday using the rel value, you can cast a wistful gaze into the distance, or shed a tiny tear for what might have been …and then put it out of your mind and carry on reading.

Thursday, May 31st, 2018

Design Patterns on CodePen

This ever-growing curated collection of interface patterns on CodePen is a reliable source of inspiration.

Know your ARIA: ‘Hidden’ vs ‘None’ | scottohara.me

When to use aria-hidden="true", and when you might need display: none:

aria-hidden by itself is not enough to completely hide an element from all users, if that is the end goal.

When to use role="presentation" (or role="none"):

Where aria-hidden can be used to completely hide content from assistive technology, modifying an element’s role to “none” or “presentation” removes the semantics of the element, but does not hide the content from assistive technologies.

Saturday, May 26th, 2018

CSS and Markup in Javascript is an Evolutionary Dead End

The bet to make is that we’re going to see more use of specialized languages. And HTML and CSS are the grandaddy specialized languages that have enough social consensus and capital investment to be the seeds of the next generation.

Saturday, May 19th, 2018

The Slow Death of Internet Explorer and the Future of Progressive Enhancement · An A List Apart Article

Oliver Williams makes the case—and shows the code—for delivering only HTML to old versions of Internet Explorer, sparing them from the kind of CSS and JavaScript that they can’t deal with it. Seems like a sensible approach to me (assuming you’re correctly building in a layered way so that your core content is delivered in markup).

Rather than transpiling and polyfilling and hoping for the best, we can deliver what the person came for, in the most resilient, performant, and robust form possible: unadulterated HTML. No company has the resources to actively test their site on every old version of every browser. Malfunctioning JavaScript can ruin a web experience and make a simple page unusable. Rather than leaving users to a mass of polyfills and potential JavaScript errors, we give them a basic but functional experience.

Wednesday, May 9th, 2018

CodePen Challenge - May 2018 - HTML Buddies

I really like this month’s CodePen challenge, all about HTML elements that go well together. First up: del and ins.

Sunday, May 6th, 2018

HTML5 Constraint Validation

The slides from a presentation by Drew on all the functionality that browsers give us for free when it comes to validating form inputs.

Half the battle of the web platform is knowing what technology is out there, ready to use. We’re all familiar with the ability to declare validation constraints in our HTML5 forms, but were you aware there’s a JavaScript API that goes along with it?

Monday, April 23rd, 2018

Animating Progress - Snook.ca

Jonathan goes down the rabbit hole of trying to animate a progress element.

Friday, April 20th, 2018

Timing

Apple Inc. is my accidental marketing department.

On April 29th, 2010, Steve Jobs published his infamous Thoughts on Flash. It thrust the thitherto geek phrase “HTML5” into the mainstream press:

HTML5, the new web standard that has been adopted by Apple, Google and many others, lets web developers create advanced graphics, typography, animations and transitions without relying on third party browser plug-ins (like Flash). HTML5 is completely open and controlled by a standards committee, of which Apple is a member.

Five days later, I announced the first title from A Book Apart: HTML5 For Web Designers. The timing was purely coincidental, but it definitely didn’t hurt that book’s circulation.

Fast forward eight years…

On March 29th, 2018, Apple released the latest version of iOS. Unmentioned in the press release, this update added service worker support to Mobile Safari.

Five days later, I announced the 26th title from A Book Apart: Going Offline.

For a while now, quite a few people have cited Apple’s lack of support as a reason why they weren’t investigating service workers. That excuse no longer holds water.

Once again, the timing is purely coincidental. But it can’t hurt.

Monday, April 16th, 2018

inessential: The View-Source Web

Lesson learned: the discoverable and understandable web is still do-able — it’s there waiting to be discovered. It just needs some commitment from the people who make websites.

Thursday, April 12th, 2018

Notes on `lang` by Taylor Hunt on CodePen

A really deep dive into the lang attribute, and the :lang() pseudo-class (hitherto unknown to me). This is all proving really useful for a little side project I’m working on.

Tuesday, April 10th, 2018

Think like it’s 1995; code like it’s 2035 - Grayscale

This is such a great write-up of the workshop I did in Hong Kong!

Jeremy, it was a pleasure to work with you and you are always welcome here in Hong Kong!

If you fancy having this one-day workshop at your company, get in touch.

Friday, April 6th, 2018

Starability - Accessible rating system demo

Accessible star ratings (progressively enhanced from radio buttons) with lots of animation options. The code is on Github.

Thursday, April 5th, 2018

Dear Developer, The Web Isn’t About You | sonniesedge.co.uk

This is absolutely brilliant!

Forgive my excitement, but this transcript of Charlie’s talk is so, so good—an equal mix of history and practical advice. Once you’ve read it, share it. I want everyone to have the pleasure of reading this inspiring piece!

It is this flirty declarative nature makes HTML so incredibly robust. Just look at this video. It shows me pulling chunks out of the Amazon homepage as I browse it, while the page continues to run.

Let’s just stop and think about that, because we take it for granted. I’m pulling chunks of code out of a running computer application, AND IT IS STILL WORKING.

Just how… INCREDIBLE is that? Can you imagine pulling random chunks of code out of the memory of your iPhone or Windows laptop, and still expecting it to work? Of course not! But with HTML, it’s a given.

Tuesday, April 3rd, 2018

How display: contents; Works

A really deep dive into display: contents from Ire.

The Way of the Web | Jeremy Keith | Hooked On Code

Here are Torre’s notes on my talk at An Event Apart Seattle. (She’s been liveblogging all the talks.)

LukeW | An Event Apart: The Way of the Web

Here are Luke’s notes from the talk I just gave at An Event Apart in Seattle.

Wednesday, March 28th, 2018

Quick Reminder that Details/Summary is the Easiest Way Ever to Make an Accordion | CSS-Tricks

Hells, yeah! Want to make an accordion widget? Use the details element as your starting point and progressively enhance from there.

Tuesday, March 27th, 2018

Design Doesn’t Care What You Think Information Looks Like | Rob Weychert

A terrific piece by Rob that is simultaneously a case study of Pro Publica work and a concrete reminder of the power of separating structure and presentation (something that I worry developers don’t appreciate enough).

Don’t get stuck on what different types of information are “supposed” to look like. They can take whatever shape you need them to.