Is Tech Too Easy to Use? ⇢ The New York Times

Reminded again that real blood & skin is at stake here.

Of all the buzzwords in tech, perhaps none has been deployed with as much philosophical conviction as “frictionless.” Over the past decade or so, eliminating “friction” — the name given to any quality that makes a product more difficult or time-consuming to use — has become an obsession of the tech industry, accepted as gospel by many of the world’s largest companies.

— Kevin Roose

Risking a Homogeneous Web

Another take on Microsoft's decision to drop EdgeHTML and move to a Blink/Chromium based browser. This one from Tim Kadlec.

I don’t think Microsoft using Chromium is the end of the world, but it is another step down a slippery slope. It’s one more way of bolstering the influence Google currently has on the web.

We need Google to keep pushing the web forward. But it’s critical that we have other voices, with different viewpoints, to maintain some sense of balance. Monocultures don’t benefit anyone.

— Tim Kadlec

While we Blink, we loose the Web

Losing [browser] engines is like losing languages. People may wish that everyone spoke the same language, they may claim it leads to easier understanding, but what people fail to consider is that this leads to losing all the culture and way of thought that that language produced. If you are a Web developer smiling and happy that Microsoft might be adopting Chrome, and this will make your work easier because it will be one less browser to test, don’t be! You’re trading convenience for diversity.

— Andre Alves Garzia

24 ways ♦ christmas-tastic

It's that time of year again when the 24 ways team treat us to a month of fab articles on all things web design and development related.

Enjoy!


Just markup

Telling other people working on the web and doing a great job building web sites that they are useless because they focus on HTML and CSS is very wrong.

— Michael Scharnagl | justmarkup

Inlining or Caching? Both Please! ⇢ Scott Jehl (Filament Group)

How clever is this from the Filament Group! Such a clever pattern to cache inlined resources (eg. critical CSS) that could be retrieved later by a service worker.

I wonder if the new Service Worker and Caching APIs could enable caching for inline code.

As it turns out, they can!

— Scott Jehl

A frontend workshop environment

While certainly not prescriptive, Brad Frost gives a few compelling reasons for building UI code in a dedicated workshop environment instead of authoring directly inside of an application environment.

Working in a dedicated workshop environment provides a clear separation between the UI design system and the specific application(s) it serves. This helps everyone think of the UI as its own entity that can power multiple applications. Creating UI code within a specific application codebase couples the UI and application code, making it harder to pull apart if and when the need comes to send that UI code to other properties.

— Brad Frost

Measuring Performance With Server Timing

For those of you that have looked at performance testing you will be aware of the TTFB, or Time To First Byte. While that's important to know how quick the browser gets anything at all from your server, it doesn't tell us what on the server is affecting that number.

There’s very little browser optimisations can do to improve a page that is simply slow to build on the server. That cost is incurred between the browser making the request for the file and receiving the response.

— Drew McLellan

It’s about keeping the web accessible, not making it so

I recently asked a friend who happens to be blind if he’d share some sites that were built really well – sites that were beautifully accessible. You know what he said? “I don’t use the web. Everything is broken.”

Everything is broken. And it’s broken because we broke it.

— Ben Callahan

Confessional Gold Dust

I can't tell you how much I appreciate honesty like this from people I admire and respect. Pure gold dust from Jeremy Keith.

It’s not just that I find this stuff hard, but that I also feel like it’s stuff I’m supposed to know, rather than stuff I want to know.

— Jeremy Keith

Google Analytics Alternatives

In all honesty I'm one of those website owners that really doesn't need website analytics. So I've removed Google Analytics from my website.

I think if I ever consider using analytics again, I'll take a look at Fathom:

It will track users on a website, the key actions they are taking, and give you a non-nerdy breakdown of their journey. It’ll do so with user-centric rights and privacy, and without selling, sharing or giving away the data you collect.


Grid to Flex

Una says: "CSS grid is AMAZING! However, if you need to support users of IE11 and below, or Edge 15 and below, grid won't really work as you expect (more info here). This site is a solution for you so you can start to progressively enhance without fear!"


"Why there is no CSS4 - explaining CSS Levels" ⇢ Rachel Andrew

Are you one of those wondering what's with the "CSS3" and now "CSS4" spiel? Well, here's a helpful article by Rachel Andrew to set the record straight.


Mozilla Developer Roadshow Asia: Jeremy Keith (Youtube)

Thoroughly enjoyed and appreciated this talk by Jeremy Keith. 4 really great questions to ask ourselves when deciding which technologies to use for a new software project:

  1. How well does it work?
  2. How well does it fail?
  3. Who benefits?
  4. What are the assumptions?

Software, like all technologies, is inherently political. Code inevitably reflects the choices, biases and desires of its creators.

— Jamais Cascio

Technology is neither good nor bad; nor is it neutral.

— Melvin Kranzberg

Alt-texts: The Ultimate Guide

The whole article's good. I'll definitely be implementing the following nugget.

End the alt-text with a period. This will make screen readers pause a bit after the last word in the alt-text, which creates a more pleasant reading experience for the user.

— Daniel Göransson

Creating accessible menus-Part 1

Brilliant. Be sure to read part 2 of James's post as well.

I can’t stress enough how the majority of your accessible needs can be met by just ensuring that you have clean, standards-based markup.

— James Williamson

A Five Minutes Guide to Better Typography

A very nicely put together guide when working with typography in your web project.


CSS & SVG Animation by codebar

Fab CSS & SVG Animation tutorial by codebar. Here's the finished masterpiece.


"A Dao of Web Design" ⇢ John Allsopp

A blast from the past I know. Written 17 years ago in fact! John Allsopp's article still has wonderful reminders and nuggets for us today.

The web’s greatest strength, I believe, is often seen as a limitation, as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.

— John Allsopp

"Essential Image Optimization" ⇢ Addy Osmani

Addy Osmani's fab reminder on the whys and hows of image compression. After all, images are still the number one cause of bloat on the web.


"Is there any value in people who cannot write JavaScript?" ⇢ Mandy Michael

I really appreciate this post from Mandy Michael. It touches on some things that Brad Frost talked about in his post about full-stack developers.

What I am very concerned about is that many still don’t see value in being skilled in CSS & HTML. This attitude is something I just don’t understand. All of us working together provide value in our industry. HTML & CSS are very important pieces of this puzzle, and I (perhaps naively) thought we had evolved to a point where we were starting to appreciate the challenges each of us face in our different areas of expertise. I guess I was wrong because this attitude is still clearly still prevalent.

— Mandy Michael

5 things CSS developers wish they knew before they started | CSS Tricks

  1. Don't underestimate CSS
  2. Share and participate
  3. Pick the right tools
  4. Get to know the browser
  5. Learn to write maintainable CSS

CSS is like a bear cub: cute and inoffensive but as he grows, he'll eat you alive.

— Andrés Galante

"I Was Told To Come Alone" ⇢ Souad Mekhennet

If only every journalist with Souad Mekhennet’s culture-straddling perspective and access would write an incisive book like this. It will haunt you, because the truth on the page is vaster than anything we’re usually offered.

— Azadeh Moaveni

"I needed colour" ⇢ Jim Carrey

Jim Carrey on some of his journey as an artist. Beautiful and profound. I think he's more 'awake' than most.


plainJS - The Vanilla JavaScript Repository

I think I'm gonna try weaning myself off the mighty jQuery. I've been very grateful for jQuery by the way - but maybe it's just time to move on.


"Accessibility for Everyone" ⇢ Laura Kalbag

Laura Kalbag's new book, "Accessibility for Everyone", looks like a cracker. Heading over to purchase mine now.


Basic grid layout with fallbacks using feature queries

Very nice real world implementation of using Grid in a progressive manner. inline-block, flexbox and then Grid.


Autoprefixer CSS online

Sometimes you want to know what Autoprefixer generates before setting up your Grunt / Gulp / NPM config task. That, or the site you’re working on doesn’t use a front-end task builder and you need to know which prefixes to manually add to your SCSS/CSS.


CSS Grid and Grid Inspector in Firefox

Very neat Grid Inspector tool for CSS Grid from the people at Firefox.

Also, another fab CSS Grid resource, Grid Garden – from Thomas Park who brought us Flexbox Froggy.


Modern JavaScript for Ancient Web Developers

Thank you Gina Trapani for this honest and articulate post. It brought a much-needed smile to this "ancient web developer's" face.


Creating my first HTTP server in Node.js

Here's hoping I get round to giving this a proper go at some stage.


Design for Humanity: A New Perspective on User Experience

A new online course by Eric Meyer.

Designing for humans is tough. We design for millions, but every interaction between our work and a user is personal, and we aren’t taught to take care with those interactions. I created this course because I want everything we design to meet the real needs and wants of real people.

— Eric A. Meyer

"Silicon Valley Has an Empathy Vacuum" ⇢ Om Malik

Silicon Valley’s biggest failing is not poor marketing of its products, or follow-through on promises, but, rather, the distinct lack of empathy for those whose lives are disturbed by its technological wizardry.

— Om Malik

Visual Studio Code

I've used and loved (still do) Sublime Text for years – but have recently really been enjoying Visual Studio Code. It's a text editor at heart but has some lovely lean IDE functionality as well. Thinking of making a switch to it completely.


Get started with variable fonts

Richard Rutter writes about variable fonts. So many variations from a single file!

In October 2016, version 1.8 of OpenType was released, and with it an extensive new technology: OpenType Font Variations. More commonly known as variable fonts, the technology enables a single font file to behave like multiple fonts. This is done by defining variations within the font, which are interpolated along one or more axes. Two of these axes might be width and weight, but the type designer can define many others too.

— Richard Rutter

Box Alignment Cheatsheet

A cheatsheet put together by Rachel Andrew comparing alignment in CSS Grid Layout and Flexbox.


Moving to HTTPS Guide

Community site to help site owners migrate to HTTPS with a simple tested process.


Frontend Guidelines Questionnaire

A one-page questionnaire put together by Brad Frost to help you establish effective frontend guidelines, so that you can write consistent & cohesive code together.


LayerSnap! Markup-based SVG Animations

The Filament Group built an open-source tool that configures SVG animations using a markup-based approach.


Resilient Web Design ⇢ Jeremy Keith

I came across this new book by Jeremy Keith. He's very kindly put it online - for free!


“Is This Helpful?” ⇢ Mike Davidson

A timely and worthwhile read…

Several years from now, I want to be able to look back on this time the same way people look at other natural disasters. Without that terrible earthquake, we would have never improved our building codes. Without that terrible flood, we would have never built those levees. Without that terrible hurricane, we would have never rebuilt this amazing city. Without that terrible disease, we would have never developed antibodies against it.

It doesn’t require giving any credit to the disaster. The disaster will always be a complete fucking disaster. But it does involve using the disaster as an opportunity to take a hard look at what got us here and rededicate our energy towards things that will get us out.