Tags: list

143

sparkline

Thursday, November 21st, 2019

Request with Intent: Caching Strategies in the Age of PWAs – A List Apart

Aaron outlines some sensible strategies for serving up images, including using the Cache API from your service worker script.

Sunday, November 17th, 2019

Responsible JavaScript: Part III – A List Apart

This chimes nicely with my recent post on third-party scripts. Here, Jeremy treats third-party JavaScript at technical debt and outlines some solutions to staying on top of it.

Convenience always has a price, and the web is wracked by our collective preference for it. JavaScript, in particular, is employed in a way that suggests a rapidly increasing tendency to outsource whatever it is that We (the first party) don’t want to do. At times, this is a necessary decision; it makes perfect financial and operational sense in many situations.

But make no mistake, third-party JavaScript is never cheap. It’s a devil’s bargain where vendors seduce you with solutions to your problem, yet conveniently fail to remind you that you have little to no control over the side effects that solution introduces.

Tuesday, November 5th, 2019

Become a Front-End Master in 2020 With These 10 Project Ideas | CSS-Tricks

The title sounds clickbaity, but this is a thoughtful list of project ideas from Chris (partly prompted by the way other lists seem to involve nothing but JavaScript frameworks).

Wednesday, October 16th, 2019

The lines of code that changed everything.

We construct top-10 lists for movies, games, TV—pieces of work that shape our souls. But we don’t sit around compiling lists of the world’s most consequential bits of code, even though they arguably inform the zeitgeist just as much.

This is a fascinating way to look at the history of computing, by focusing in on culturally significant pieces of code. The whole list is excellent, but if I had to pick a favourite …well, see if you can guess what it is.

Thursday, October 3rd, 2019

A Modern CSS Reset - Andy Bell

Some very smart ideas in here for resetting default browser styles, like only resetting lists that have classes applied to them:

ul[class],
ol[class] {
  padding: 0;
}

I select only lists that do have a class attribute because if a plain ol’ <ul> or <ol> gets used, I want it to look like a list. A lot of resets, including my previous ones, aggressively remove that.

Monday, July 1st, 2019

8 DOM features you didn’t know existed - LogRocket Blog

If you ignore the slightly insulting and condescending clickbaity title, this is a handy run-down of eight browser features with good support:

  1. extra arguments in addEventListener(),
  2. scrollTo(),
  3. extra arguments in setTimeout() and setInterval(),
  4. the defaultChecked property for checkboxes,
  5. normalize() and wholeText for strings of text,
  6. insertAdjacentElement() and insertAdjacentText(),
  7. event.detail, and
  8. scrollHeight and scrollWidth.

Sunday, June 23rd, 2019

Rotating Space Station Numbers

Ever wondered what would happen if you threw a ball inside an orbital habitat? Well, wonder no more!

You can adjust the parameters of the space station, or choose from some pre-prepared examples: an O’Neill cylinder, a Stanford torus, a Bernal sphere, Rama, a Culture orbital

Thursday, April 11th, 2019

Nothing Fails Like Success – A List Apart

On an individual and small collective basis, the IndieWeb already works. But does an IndieWeb approach scale to the general public? If it doesn’t scale yet, can we, who envision and design and build, create a new generation of tools that will help give birth to a flourishing, independent web? One that is as accessible to ordinary internet users as Twitter and Facebook and Instagram?

Saturday, April 6th, 2019

Accessibility for Vestibular Disorders: How My Temporary Disability Changed My Perspective · An A List Apart Article

This is a fascinating insight into what it’s like to use the web if you’ve got vertigo (which is way more common than you might think):

Really, there are no words to describe just how bad a simple parallax effect, scrolljacking, or even background-attachment: fixed would make me feel. I would rather jump on one of those 20-G centrifuges astronauts use than look at a website with parallax scrolling.

Every time I encountered it, I would put the bucket beside me to good use and be forced to lie in bed for hours as I felt the room spinning around me, and no meds could get me out of it. It was THAT bad.

Thursday, March 28th, 2019

Responsible JavaScript: Part I · An A List Apart Article

As I pick apart yet another bundle not unlike a tangled ball of Christmas tree lights, it’s become clear that the web is drunk on JavaScript. We reach for it for almost everything, even when the occasion doesn’t call for it. Sometimes I wonder how vicious the hangover will be.

I love everything about this article and I can’t wait for part two.

What we tend to forget is that the environment websites and web apps occupy is one and the same. Both are subject to the same environmental pressures that the large gradient of networks and devices impose. Those constraints don’t suddenly vanish when we decide to call what we build “apps”, nor do our users’ phones gain magical new powers when we do so.

Needless to say, I endorse this message:

Whether you think of your site as an “app” or not, adding a service worker to it is perhaps one of the most responsible uses of JavaScript that exists today.

Friday, February 1st, 2019

Ch-ch-ch-changes

It’s browser updatin’ time! Firefox 65 just dropped. So did Chrome 72. Safari 12.1 is shipping with iOS 12.2.

It’s interesting to compare the release notes for each browser and see the different priorities reflected in them (this is another reason why browser diversity is A Good Thing).

A lot of the Firefox changes are updates to dev tools; they just keep getting better and better. In fact, I’m not sure “dev tools” is the right word for them. With their focus on layout, typography, and accessibility, “design tools” might be a better term.

Oh, and Firefox is shipping support for some CSS properties that really help with print style sheets, so I’m disproportionately pleased about that.

In Safari’s changes, I’m pleased to see that the datalist element is finally getting implemented. I’ve been a fan of that element for many years now. (Am I a dork for having favourite HTML elements? Or am I a dork for even having to ask that question?)

And, of course, it wouldn’t be a Safari release without a new made up meta tag. From the people who brought you such hits as viewport and apple-mobile-web-app-capable, comes …supported-color-schemes (Apple likes to make up meta tags almost as much as Google likes to make up rel values).

There’ll be a whole bunch of improvements in how progressive web apps will behave once they’ve been added to the home screen. We’ll finally get some state persistence if you navigate away from the window!

Updated the behavior of websites saved to the home screen on iOS to pause in the background instead of relaunching each time.

Maximiliano Firtman has a detailed list of the good, the bad, and the “not sure yet if good” for progressive web apps on iOS 12.2 beta. Thomas Steiner has also written up the progress of progressive web apps in iOS 12.2 beta. Both are published on Ev’s blog.

At first glance, the release notes for Chrome 72 are somewhat paltry. The big news doesn’t even seem to be listed there. Maximiliano Firtman again:

Chrome 72 for Android shipped the long-awaited Trusted Web Activity feature, which means we can now distribute PWAs in the Google Play Store!

Very interesting indeed! I’m not sure if I’m ready to face the Kafkaesque process of trying to add something to the Google Play Store just yet, but it’s great to know that I can. Combined with the improvements coming in iOS 12.2, these are exciting times for progressive web apps!

Wednesday, January 16th, 2019

Security Checklist

Exactly what it sounds like: a checklist of measures you can take to protect yourself.

Most of these require a certain level of tech-savviness, which is a real shame. On the other hand, some of them are entirely about awareness.

Thursday, December 27th, 2018

Audio I listened to in 2018

I wrapped up last year with a list of some of the best audio I listened to in 2017. This year I huffduffed about 260 pieces of audio, so I could do a similar end-of-year list for 2018. But I thought I’d do something a little different this time.

It seems like podcasting is going from strength to strength with each passing year. Some friends of mine started new podcasts in 2018. Matt started Hobby Horse, where he talks to people about their tangential obsessions. Meanwhile Khoi started Wireframe, a jolly good podcast about design.

Apart from the trend of everyone having their own podcast these days, there’s also been a trend for quite short and manageable “seasons” of podcasts. See, for example, Horizon Line by Atlas Obscura, which is just four episodes long. Given the cherry-picking nature of my usual audio consumption (the very reason I made Huffduffer in the first place), this trend suits me quite well. There have been a few podcast runs in 2018 that I can recommend in their entirety.

The Secret History Of The Future is a collaboration between Seth Stevenson and Tom Standage, one of my favourite non-fiction authors. They look at modern technology stories through the lens of the past, much like Standage has done in books like The Victorian Internet. There are annoying sponsor blurbs to skip past, but apart from that, it’s a top-notch podcast.

I discovered Settling The Score this year. It’s a podcast all about film scores. The two hosts have spent the year counting down the top 25 scores in the American Film Institute’s list of (supposedly) greatest scores in American cinema history. It’s a pleasure to listen to them take a deep dive into each film and its score, analysing what works and what doesn’t. It will also make you want to rewatch the movie in question.

By far my favourite podcast listening experience this year was with Stephen Fry’s Great Leap Years. It’s just six episodes long, but it manages to tell the sweep of human history and technology in an entertaining and fascinating way. I’ll admit I’m biased because it dwells on many of my hobby horses: the printing press, the telegraph, Claude Shannon and information theory. There are no annoying sponsorship interruptions, and best of all, you’ve got the wonderful voice of Stephen Fry in your earholes the whole time. Highly recommended!

So there you have it: three podcasts from 2018 that are worth subscribing to in their entirety:

Tuesday, December 18th, 2018

The 15 Web Design Books of 2018 You Can’t Afford to Miss

How lovely! Going Offline is in very good company in this list, and Oliver has some nice words to say about it:

Starting with no assumption of JavaScript knowledge, Jeremy explains the latest strategies, the ins and outs of fetching and caching, how to enhance your website’s performance, and more.

Extremely beginner-friendly and approachable, it can be read in half a day and will help you get Service Workers up and running in no time.

But all I want for Christmas is for Shopify to stop enabling Breitbart.

Monday, October 22nd, 2018

PWA Directory

Another directory of progressive web apps, this time maintained by Google.

I quite like the way it links through to a Lighthouse report. Here’s the listing for The Session, for example, and here’s the corresponding Lighthouse report.

Monday, October 1st, 2018

Web Developer Representation in W3C · An A List Apart Article

This is an excellent initiative by the Dutch Fronteers group to have professional web developers represented in W3C working groups. In this particular case, they’re funding Rachel for the CSS working group. This sets a great precedent—I really hope the W3C goes for it!

Friday, September 14th, 2018

Breaking the Deadlock Between User Experience and Developer Experience · An A List Apart Article

Yes! Yes! Yes!

Our efforts to measure and improve UX are packed with tragically ironic attempts to love our users: we try to find ways to improve our app experiences by bloating them with analytics, split testing, behavioral analysis, and Net Promoter Score popovers. We stack plugins on top of third-party libraries on top of frameworks in the name of making websites “better”—whether it’s something misguided, like adding a carousel to appease some executive’s burning desire to get everything “above the fold,” or something truly intended to help people, like a support chat overlay. Often the net result is a slower page load, a frustrating experience, and/or (usually “and”) a ton of extra code and assets transferred to the browser.

Even tools that are supposed to help measure performance in order to make improvements—like, say, Real User Monitoring—require you to add a script to your web pages …thereby increasing the file size and degrading performance! It’s ironic, in that Alanis Morissette sense of not understanding what irony is.

Stacking tools upon tools may solve our problems, but it’s creating a Jenga tower of problems for our users.

This is a great article about evaluating technology.

Wednesday, September 5th, 2018

The Font Loading Checklist—zachleat.com

This checklist came in very handy during a performance-related workshop I was running today (I may have said the sentence “Always ask yourself What Would Zach Do?”).

  1. Start Important Font Downloads Earlier (Start a Web Font load)
  2. Prioritize Readable Text (Behavior while a Web Font is loading)
  3. Make Fonts Smaller (Reduce Web Font load time)
  4. Reduce Movement during Page Load (Behavior after a Web Font has loaded)

The first two are really straightforward to implement (with rel="preload" and font-display). The second two take more work (with subsetting and the font loading API).

Saturday, September 1st, 2018

Conversational Semantics · An A List Apart Article

I love, love, love all the little details of HTML that Aaron offers up here. And I really like how he positions non-visual user-agents like searchbots, screen readers, and voice assisants as headless UIs.

HTML is a truly robust and expressive language that is often overlooked and undervalued, but it has the incredible potential to nurture conversations with our users without requiring a lot of effort on our part. Simply taking the time to code web pages well will enable our sites to speak to our customers like they speak to each other. Thinking about how our sites are experienced as headless interfaces now will set the stage for more natural interactions between the real world and the digital one.

Monday, August 20th, 2018

Front-End Performance Checklist

A handy pre-launch go/no-go checklist to run through before your countdown.