This Week on the Front End—June 4th, 2015

frontendweekly

#1

Welcome to a new, weekly roundup of news from the world of the front-end web—complementing This Week in JavaScript and This Week in .Net.

The aim is to keep track of interesting news, views and demos relating to front-end web development, such as HTML, CSS, Design, accessibility and so on.

Of course, JavaScript is part of the front end, so we'll try not to step on the toes of the jsweekly team of @Pullo and @Paul_Wilkins, but instead, peep about between their toes, so to speak, picking up any little crumbs they may have missed. stuck_out_tongue

You'll be able to track all versions over time via the frontendweekly tag.


News and Views

Progressive Entrapment

The age of Web Standards has come, and, to some extent, gone. Take progressive enhancement—the philosophy that advocates creating a usable interface for all devices, which is then enhanced for modern devices. There's something of a rift between those who believe in progressive enhancement and those who feel it's a load of old cobblers. See this recent forum discussion for example, and Craig Buckler's response.

There's another interesting article on this subject by Aaron Gustafson, who looks at the true cost of progressive enhancement. It's worth reading if you feel progressive enhancement just isn't worth the effort and cost (you fool).

Hey programmers: you're not as valuable as designers. Suck it up. stuck_out_tongue

In Brief

CSS

Huh, I thought there was nothing more to discover in CSS, but here are some amazing articles that prove me wrong.

Noah Blon discusses some pretty cool ways to color SVGs in CSS background images, and some other guy with a weird username discusses transitions on elements of unknown sizes.

Amelia Bellamy-Royds shows some amazing things you can do with color filters over on CSS-Tricks.

Never say die … David Walsh discusses the usefulness of flexbox, demonstrating how to build the faces of a die.

Been there, :visited that … Joel Califa breathes new life into the long forgotten :visited pseudo class, presenting a cool trick for spicing up your styling.

TL;DR—VW;VH. Long version: here are some really handy bits-of-co.de explaining viewport units.

Russ Weakley presents a great little video on scalable backgrounds in CSS. Trust me—this one's really off the scale.

JavaScript

While all those fancy-pants programmers reading jsweekly revel in the latest fancy-pants libraries and whatnot, perhaps you are a designer wanting to dip your toe into JavaScript? Rachel Smith has some handy tips for her designer/CSS-wielding friends wanting to learn JavaScript.

HTML

Here's a very clever guide to coding a live, dynamic Twitter feed in an HTML email. (Finally! How have we survived without this?)

You know those annoying people who walk around with a clipboard? Well, now even HTML5 is doing it.

If you're like me (you poor thing), you're probably a bit overwhelmed by all the new HTML5/browser APIs. Here's a nice, layman's intro to Web Components on the CTRL+CLICK CAST podcast (a great podcast to subscribe to).

Design

I often come across app interfaces that are totally confusing. I wonder, is it just me? Apparently not! Benjamin Berger presents The User is King, a really useful, two-part guide to good interface design.

On SitePoint, Clark Wimberly looks at how to dig into someone's brain … or something … by looking at 5 Simple UX Principles to Guide your Product Design.

You know that feeling of emptiness you get sometimes? Embrace that emptiness … at least if you're a web designer.

Brian Pullen looks at the problems around doing design reviews, and how to conduct them properly.

Hey, can you keep a secret? Here's some secrets of Photoshop's Layers panel.

If Helvetica Neue isn't your type, see what you think of the San Francisco typeface, which Apple uses for its new watches and is planning to use for iOS 9 and OS X.

Responsive typography is a tricky issue to deal with, but here's a nice guide to how you can set it up.

What's on your desktop? If you think your computer's desktop is ugly, wait to you see these ones. (You might think yours is even uglier now. smile )

Content

Content. You remember that stuff? You squeeze it in between all that cool technology we love to play with. Chloe Dalby discusses 4 principles for designing future-proof content.

The Coolness

Here's a sickeningly cool demo for the week …

Off the Wall

Do you remember those awkward moments when your mother kissed you at the school gates, or told an embarrassing story about you in public? Watch the same thing happen to Paul Irish, as his mother dishes up a bunch of embarrassing things about him on the ShopTalk Show podcast.

If you have a messy desk, you're a slob. But you're in good company.

Apologies

There are no links to anything on material design this week. We apologize for any inconvenience.


If you like this kind of news, I recommend you sign up to SitePoint's free, daily Versioning newsletter. (If you already are signed up, I wink at you, because I know you already understand.)

And if you have any links you'd like me to put in the next edition, please just message me [beware of the dog, though].


This is a discussion forum, so if you have any comments, observations or questions about the links above, please fire away!


On Our Radar: Show us your library, and other ways to win!