Jeremy Keith's Blog, page 105

Extending

Contrary to popular belief, web standards aren’t created by a shadowy cabal and then handed down to browser makers to implement. Quite the opposite. Browser makers come together in standards bodies and try to come to an agreement about how to collectively create and implement standards. That keeps them very busy. They don’t tend to get out very often, but when they do, the browser/standards makers have one message for developers: “We want to make your life better, so tell us what you want and that’s what we’ll work on!”

In practice, this turns out not to be the case.

Case in point: responsive images. For years, this was the number one feature that developers were crying out for. And yet, the standards bodies—and, therefore, browser makers—dragged their heels. First they denied that it was even a problem worth solving. Then they said it was simply too hard. Eventually, thanks to the herculean efforts of the Responsive Images Community Group, the browser makers finally began to work on what developers had been begging for.

Now that same community group is representing the majority of developers once again. Element queries—or container queries—have been top of the wish list of working devs for quite a while now. The response from browser makers is the same as it was for responsive images. They say it’s simply too hard.

Here’s a third example: web components. There are many moving parts to web components, but one of the most exciting to developers who care about accessibility and backwards-compatibility is the idea of extending existing elements:

It’s my opinion that, for as long as there is a dependence on JS for custom elements, we should extend existing elements when writing custom elements. It makes sense for developers, because new elements have access to properties and methods that have been defined and tested for many years; and it makes sense for users, as they have fallback in case of JS failure, and baked-in accessibility fundamentals.

So instead of having to create a whole new element from scratch like this:

Click me!

…you could piggy-back on an existing element like this:

Click me!

That way, you get the best of both worlds: the native semantics of button topped with all the enhancements you want to add with your taco-button custom element. Brilliant! Github is using this to extend the time element, for example.

I’m not wedded to the is syntax, but I do think it’s vital that there is some declarative mechanism to extend existing elements instead of creating every custom element from scratch each time.

Now it looks like that’s the bit of web components that isn’t going to make the cut. Why? Because browser makers say it’s simply too hard.

As Bruce points out, this is in direct conflict with the design principles that are supposed to be driving the creation and implementation of web standards.

It probably wouldn’t bother me so much except that browser makers still trot out the party line, “We want to hear what developers want!” Their actions demonstrate that this claim is somewhat hollow.

I don’t hold out much hope that we’ll get the ability to extend existing elements for web components. I think we can still find ways to piggy-back on existing semantics, but it’s going to take more work:

Click me!

That isn’t very elegant and I can foresee a lot of trickiness trying to sift the fallback content (the button tags) from the actual content (the “Click me!” text).

But I guess that’s what we’ll be stuck with. The alternative is simply too hard.

100 words 034

It was a busy week with lots of commuting up and down to London, so I’ve been looking forward to a weekend of unwinding.

Jessica and I like to spend our Saturday afternoons doing our shopping for the weekend, planning out some nice leisurely meals. Today we went down to the Open Market, a recently-renovated collection of stalls under one roof selling local produce and goods. The market is also home to an excellent Greek café, where we had lunch.

I guess it’s part of the gentrification of the London Road area. If this is gentrification, bring it on.

100 words 033

Charlotte came up with a nifty trick that combines two different techniques she’s been working with.

The first building block is the pattern of using checkboxes, labels, and the :checked pseudo-class to create progressive disclosure toggles without JavaScript. There’s just one caveat with that technique though—the item being toggled must appear after the trigger label in the source order of the markup.

Enter the second building block: flexbox. With flexbox, we’re no longer at the mercy of the source order in our markup. By using flex-direction: column-reverse, the progressive disclosure trigger can be displayed after the item being toggled.

BEMphasis

I’m working on a project with a team of developers who are trying out the BEM syntax for their class names. I’ve tried BEM before, but I’m not a huge fan of underscores (for no particularly good reason) so I tend to use a modified version that avoids those characters. Still, when it comes to coding style—tabs vs. spaces, camelCasing, underscores, hyphens, or whatever—my personal opinion takes a back seat to the group consensus. And on this project, the group has opted for proper BEM all the way, and I’m more than happy to go along with that.

When it comes to naming a modified version of a component in BEM, the syntax looks like this:

component--modifier

That raises a question about how you then deploy that class name in your HTML. You could just use the modified name:

But then in your CSS you’d have to repeat all the style rules for .component selector inside your rule block for .component--modifier selector. SASS could you help out here, especially with its “extends” functionality, but the final CSS is still going to containing duplicated rules.

The alternative is to keep your CSS lean and modular, and write your HTML like this:

Now you’ve taken the duplication out of CSS and put into your markup. It looks a little weird. But, on balance, it’s probably the lesser of two evils.

It strikes me that this pattern of always having the base component class name appear anywhere you have a component--modifier class name is something that you could programmatically check for. It should be relatively straightforward to write a lint tool that looks in the value of every class attribute and, if it finds any instances of foo--bar, checks to make sure that foo is also in there.

Sounds like it could be a nice little task for Grunt or Gulp. Maybe somebody has already made it.

Mind you, it seems that most lint tools out there are focused very much on enforcing a coding style for CSS and JavaScript—not so much for HTML. I worry that this reflects the mindset of many front-end developers who view CSS and JavaScript as more important than markup …which is a bit odd considering that CSS and JavaScript are subservient to the HTML document that they’re styling and scripting.

100 words 032

We have a regular gathering at Clearleft every Thursday at 4pm. It’s our front-end pow-wow (there’s a corresponding “UX Laundromat” on Thursdays at 3pm, and every Friday at 4pm there’s a “Design …Thing”).

It’s basically like a design crit, but for code. People show what they’ve been working, whether it’s client work or personal projects. It leads to some great cross-pollination of ideas and solutions.

I wrap it up by going through links I’ve tagged with “frontend”.

Everyone’s welcome to come along, whether they’re a front-end developer or not. If any clients are in the office, they’re invited along too.

100 words 031

Spring is well and truly springing. The days are getting nice and long. The sky is often clear and blue. The temperature occasionally reaches levels conducive to T-shirt and shorts.

These are good days to be enjoyed by the sea in Brighton. Lately though, I’ve been spending quite a few of these days travelling to and from London on client work. But even then, trapped in a train travelling the vertical line of the compass, the view on the countryside outside can look downright glorious—luminously green fields filled with signs of newborn animal lives illuminated by the springtime sun.

Complete line-up for Responsive Day Out 3

The circle is now complete. The line-up for the third and final Responsive Day Out is all set.

I’ve been scheming behind the scenes to get one of my favourite speakers added to the roster, and now my dastardly scheme has paid off. I am absolutely thrilled to announce that Lyza Danger Gardner will be speaking at Responsive Day Out 3: The Final Breakpoint.

That means we’ve got a double-whammy from the trailblazers at Cloud Four with both Jason and Lyza speaking. With Jason diving deep into responsive images, that leaves Lyza free to zoom out and look at some of the big-picture implications of the work we do on the web.

To say that I’m excited to hear what she has to say would be an exercise in understatement. I am ridiculously excited about the whole day—seriously, in my emails to the speakers, I find myself using far more exclamation points than is healthy. Why, I might even have included an emoticon or two; that’s how psyched I am.

If you’ve already got your ticket for a Responsive Day Out, well done you. If you haven’t, what are you waiting for? Tickets are just £80+VAT—a bargain!

Get your ticket now and I’ll see in Brighton on June 19th for a most excellent day of design, development, UX, performance, process, and everything else responsive-related.

100 words 030

Andy Parker kindly deposited a couple of books on my desk recently. One was The Martian. I had already read that one, thanks to Tim Kadlec’s recommendation. The other was the much-hyped Ready Player One.

I read it while I was travelling to and from Bulgaria. It was the ideal travel companion—an airport novel for geeks. It’s not exactly the finest prose ever written, but it’s thoroughly enjoyable popcorn entertainment. It reads like fan fiction and I mean that in a good way. It’s like Scott Pilgrim crossed with Snowcrash. It certainly passed the time on some airplane rides.

100 words 029

It’s Monday. This Monday was an inverse of Friday.

Now I know that many people consider Mondays to be the inverse of Fridays in general—you know, the mood, the spirit of the day. But this particular Monday was literally the inverse of the previous Friday. On Friday I travelled from Brighton to Bulgaria. Today was the reverse. I began the day in a hotel room in Sofia and ended it safely ensconced back home in Brighton.

Car; plane; plane; car.

Once again there was a layover in Frankfurt—just enough time to enjoy some currywurst and pommes between flights.

100 words 028

The Thracians were one of the first peoples to settle in Bulgaria.

The Romans arrived in the first century.

Four centuries later, Bulgaria became part of the Byzantine empire.

From the fourteenth century onward, the country was part of the Ottoman empire.

That lasted until the end of the nineteenth century, when the country was liberated by Russia.

At this point for some reason, the Bulgarians thought they ought to have a monarchy.

That whole monarchy thing only lasted until the end of the second world war. Then they gave communism a whirl.

Finally they got with the democracy programme.