Archive: October, 2017

132

sparkline
                    5th                     10th                     15th                     20th                     25th                     30th     
12am      
4am
8am                              
12pm                                      
4pm                                      
8pm                  

map

Tuesday, October 31st, 2017

Speak and repeat

Rachel and Drew are starting a new service called Notist. It’s going to be a place where conference speakers can collate their materials. They’ve also got a blog.

The latest blog post, by Rachel, is called Do I need to write a brand new talk every time?

New presenters often feel that they need to write a brand-new talk for each conference they are invited to. Unless your job is giving presentations, or you are being paid very well for each talk you give, it is unlikely that you will be able to keep this up if you do more than a couple of talks per year.

It’s true. When I first started giving talks, I felt really guilty at the thought of “recycling” a talk I had already given. “Those people have paid money to be here—they deserve a brand new talk”, I thought. But then someone pointed out to me, “Y’know, it’s actually really arrogant to think that anyone would’ve seen any previous talk of yours.” Good point.

Giving the same talk more than once also allows me to put in the extra effort into the talk prep. If I’m going through the hair-tearing-out hell of trying to wrestle a talk into shape, I’m inevitably going to ask, “Why am I putting myself through this‽” If the answer to that question is “So you can give this talk just once”, I’d probably give up in frustration. But if I know that I’ll have an opportunity to present it more than once, improving it each time, then that gives me the encouragement to keep going.

I do occasionally give a one-off specially-commissioned talk, but those are the exceptions. My talk on the A element at CSS Day’s HTML Special was one of those. Same with my dConstruct talk back in 2008. I just gave a new talk on indie web building blocks at Mozilla’s View Source event, but I’d quite like to give that one again (if you’re running an event, get in touch if that sounds like something you’d like).

My most recent talk isEvaluating Technology. I first gave it at An Event Apart in San Francisco exactly a year ago. I’ll present it for the final time at An Event Apart in Denver in a few weeks. Then it will be retired; taken out to the woodshed; pivoted to video.

I’m already starting to think about my next talk. The process of writing a talk is something else that Rachel has written about. She’s far more together than me. My process involves lots more procrastination, worry, panic, and pacing. Some of the half-baked ideas will probably leak out as blog posts here. It’s a tortuous process, but in the end, I find the satisfaction of delivering the final talk to be very rewarding.

Here’s the thing, though: until I deliver the talk for the first time in front of an audience—no matter how much I might have practiced it—I have literally no idea if it’s any good. I honestly can’t tell whether what I’ve got is gold dust or dog shit (and during the talk prep, my opinion of it can vacillate within the space of five minutes). And so, even though I’ve been giving talks for many years now, if it’s brand new material, I get very nervous.

That’s one more reason to give the same talk more than once instead of creating a fresh hell each time.

Inter UI font family

A nice free and open source font designed for digital interfaces:

Inter UI is a font for highly legible text on computer screens.

Never Use Futura

The book draws together the many and varied uses of Futura that make it a universal language while simultaneously confirming its unique typographic voice. The book is a playful yet passionate rebuttal to the perceived dominance of Helvetica as the typeface of modern design.

‘Neopets’: Inside Look at Early 2000s Internet Girl Culture - Rolling Stone

Girls on Neopets took what they needed from the site and used the skills acquired there to further develop a burgeoning digital girls’ culture, whether it be in expanding their guild pages into personal sites, teaching others to code, or exchanging those skills for economic gain in Neopets.

I have anecdotal evidence from a few people that Neopets was their introduction to web design and development.

Turning another website into a Progressive Web App.

Turning another website into a Progressive Web App.

Airplanes and Ashtrays – CSS Wizardry

Whenever you plan or design a system, you need to build in your own ashtrays—a codified way of dealing with the inevitability of somebody doing the wrong thing. Think of what your ideal scenario is—how do you want people to use whatever you’re building—and then try to identify any aspects of it which may be overly opinionated, prescriptive, or restrictive. Then try to preempt how people might try to avoid or circumvent these rules, and work back from there until you can design a safe middle-ground into your framework that can accept these deviations in the safest, least destructive way possible.

ES2015+ cheatsheet

A one-stop-shop with a quick overview of the new JavaScript features in ES-whatever-we’re-calling-it-now.

Netflix functions without client-side React, and it’s a good thing - JakeArchibald.com

A great bucketload of common sense from Jake:

Rather than copying bad examples from the history of native apps, where everything is delivered in one big lump, we should be doing a little with a little, then getting a little more and doing a little more, repeating until complete. Think about the things users are going to do when they first arrive, and deliver that. Especially consider those most-likely to arrive with empty caches.

And here’s a good way of thinking about that:

I’m a fan of progressive enhancement as it puts you in this mindset. Continually do as much as you can with what you’ve got.

All too often, saying “use the right tool for the job” is interpreted as “don’t use that tool!” but as Jake reminds us, the sign of a really good tool is its ability to adapt instead of demanding rigid usage:

Netflix uses React on the client and server, but they identified that the client-side portion wasn’t needed for the first interaction, so they leaned on what the browser can already do, and deferred client-side React. The story isn’t that they’re abandoning React, it’s that they’re able to defer it on the client until it’s was needed. React folks should be championing this as a feature.

On platforms and sustainability – confused of calcutta

JP Rangaswami also examines the rise of the platforms but he’s got some ideas for a more sustainable future:

A part of me wants to evoke Jane Jacobs and Christopher Alexander when it comes to building sustainable platforms. The platform “community” needs to be cared for and looked after, the living spaces they inhabit need to be designed to last. Multipurpose rather than monoculture, diverse rather than homogeneous . Prior industrial models where entire communities would rely on a single industry need to be learnt from and avoided. We shouldn’t be building the rust belts of the future. We should be looking for the death and life of great platforms, for a pattern language for sustainable platforms.

André Staltz - The Web began dying in 2014, here’s how

This is the clickbaitiest of titles, but the post has some good sobering analysis of how much traffic driven by a small handful players. It probably won’t make you feel very cheery about the future.

(For some reason, this article uses all-caps abbreviations for company names, as though a stock ticker started generating hot takes: GOOG, FB, AMZN, etc. It’s a very odd writing style for a human.)

Sunday, October 29th, 2017

Five thoughts on design and AI by Richard Pope - IF

I like Richard’s five reminders:

  1. Just because the technology feels magic, it doesn’t mean making it understandable requires magic.
  2. Designers are going to need to get familiar with new materials to make things make sense to people.
  3. We need to make sure people have an option to object when something isn’t right.
  4. We should not fall into the trap of assuming the way to make machine learning understandable should be purely individualistic.
  5. We also need to think about how we design regulators too.

The meaning of AMP

Ethan quite rightly points out some semantic sleight of hand by Google’s AMP team:

But when I hear AMP described as an open, community-led project, it strikes me as incredibly problematic, and more than a little troubling. AMP is, I think, best described as nominally open-source. It’s a corporate-led product initiative built with, and distributed on, open web technologies.

But so what, right? Tom-ay-to, tom-a-to. Well, here’s a pernicious example of where it matters: in a recent announcement of their intent to ship a new addition to HTML, the Google Chrome team cited the mood of the web development community thusly:

Web developers: Positive (AMP team indicated desire to start using the attribute)

If AMP were actually the product of working web developers, this justification would make sense. As it is, we’ve got one team at Google citing the preference of another team at Google but representing it as the will of the people.

This is just one example of AMP’s sneaky marketing where some finely-shaved semantics allows them to appear far more reasonable than they actually are.

At AMP Conf, the Google Search team were at pains to repeat over and over that AMP pages wouldn’t get any preferential treatment in search results …but they appear in a carousel above the search results. Now, if you were to ask any right-thinking person whether they think having their page appear right at the top of a list of search results would be considered preferential treatment, I think they would say hell, yes! This is the only reason why The Guardian, for instance, even have AMP versions of their content—it’s not for the performance benefits (their non-AMP pages are faster); it’s for that prime real estate in the carousel.

The same semantic nit-picking can be found in their defence of caching. See, they’ve even got me calling it caching! It’s hosting. If I click on a search result, and I am taken to page that has a URL beginning with https://www.google.com/amp/s/... then that page is being hosted on the domain google.com. That is literally what hosting means. Now, you might argue that the original version was hosted on a different domain, but the version that the user gets sent to is the Google copy. You can call it caching if you like, but you can’t tell me that Google aren’t hosting AMP pages.

That’s a particularly low blow, because it’s such a bait’n’switch. One of the reasons why AMP first appeared to be different to Facebook Instant Articles or Apple News was the promise that you could host your AMP pages yourself. That’s the very reason I first got interested in AMP. But if you actually want the benefits of AMP—appearing in the not-search-results carousel, pre-rendered performance, etc.—then your pages must be hosted by Google.

So, to summarise, here are three statements that Google’s AMP team are currently peddling as being true:

  1. AMP is a community project, not a Google project.
  2. AMP pages don’t receive preferential treatment in search results.
  3. AMP pages are hosted on your own domain.

I don’t think those statements are even truthy, much less true. In fact, if I were looking for the right term to semantically describe any one of those statements, the closest in meaning would be this:

A statement used intentionally for the purpose of deception.

That is the dictionary definition of a lie.

Update: That last part was a bit much. Sorry about that. I know it’s a bit much because The Register got all gloaty about it.

I don’t think the developers working on the AMP format are intentionally deceptive (although they are engaging in some impressive cognitive gymnastics). The AMP ecosystem, on the other hand, that’s another story—the preferential treatment of Google-hosted AMP pages in the carousel and in search results; that’s messed up.

Still, I would do well to remember that there are well-meaning people working on even the fishiest of projects.

Except for the people working at the shitrag that is The Register.

(The other strong signal that I overstepped the bounds of decency was that this post attracted the pond scum of Hacker News. That’s another place where the “well-meaning people work on even the fishiest of projects” rule definitely doesn’t apply.)

Can You Afford It?: Real-world Web Performance Budgets – Infrequently Noted

Alex looks at the mindset and approaches you need to adopt to make a performant site. There’s some great advice in here for setting performance budgets for JavaScript.

JavaScript is the single most expensive part of any page in ways that are a function of both network capacity and device speed. For developers and decision makers with fast phones on fast networks this is a double-whammy of hidden costs.

Seeing Earth from Outer Space

A lovely interactive photo essay charting the results of what happens when evolution produces a life form that allows a planet to take selfies.

Saturday, October 28th, 2017

Pier beer.

Pier beer.

Checked in at Brighton Electric. It’s been a while since @SalterCane had a practice. map

Checked in at Brighton Electric. It’s been a while since @SalterCane had a practice.

Friday, October 27th, 2017

Blown away by @EmilyGorcenski’s @ViewSourceConf talk. Absolutely outstanding!

Listening to @LeaVerou talk about learnability, and nodding my head in agreement so vigorously that I might do myself an injury.

Listening to @LeaVerou talk about learnability, and nodding my head in agreement so vigorously that I might do myself an injury.

Transpiled for-of Loops are Bad for the Client - daverupert.com

This story is just a personal reminder for me to repeatedly question what our tools spit out. I don’t want to be the neophobe in the room but I sometimes wonder if we’re living in a collective delusion that the current toolchain is great when it’s really just morbidly complex. More JavaScript to fix JavaScript concerns the hell out of me.

Yes! Even if you’re not interested in the details of Dave’s story of JavaScript optimisation, be sure to read his conclusion.

I am responsible for the code that goes into the machine, I do not want to shirk the responsibility of what comes out. Blind faith in tools to fix our problems is a risky choice. Maybe “risky” is the wrong word, but it certainly seems that we move the cost of our compromises to the client and we, speaking from personal experience, rarely inspect the results.

upfront conversation with Amber Wilson - #upfront

Amber shares her story of becoming a web developer and a public speaker. She is an inspiration to me!

Checked in at RSA. Talkin’ ’bout the indie web. map

Checked in at RSA. Talkin’ ’bout the indie web.

Thursday, October 26th, 2017

Met up with my pal Anthony, who I haven’t seen in about 15 years …and listened to him play some tunes, just like old times.

Met up with my pal Anthony, who I haven’t seen in about 15 years …and listened to him play some tunes, just like old times.

Checked in at Barbican Centre. Listening to Cameron. map

Checked in at Barbican Centre. Listening to Cameron.

Listening to @TimOReilly describe a future/present like @bruces’s Maneki Neko.

https://adactio.com/extras/manekineko/

Wednesday, October 25th, 2017

This new @beerleft is good stuff!

This new @beerleft is good stuff!

Really looking forward to speaking at @ViewSourceConf on Friday.

Tickets still available!

https://viewsourceconf.org/london-2017/

In the Ballardian Barbican.

In the Ballardian Barbican.

Checked in at Barbican Centre. Absolutely loved Julia Whitney’s talk at Leading Design. map

Checked in at Barbican Centre. Absolutely loved Julia Whitney’s talk at Leading Design.

Monday, October 23rd, 2017

Running from an Ottolenghi book signing to a Sadies gig. Cakes’n’drugs’n’rock’n’roll.

It’s like Christmas has come early with these goodies from @LauraKalbag and @RachelAndrew.

It’s like Christmas has come early with these goodies from @LauraKalbag and @RachelAndrew.

Voice Guidelines | Clearleft

I love what Ben is doing with this single-serving site (similar to my design principles collection)—it’s a collection of handy links and resources around voice UI:

Designing a voice interface? Here’s a useful list of lists: as many guiding principles as we could find, all in one place. List compiled and edited by Ben Sauer @bensauer.

BONUS ITEM: Have him run a voice workshop for you!

If your company needs help with pattern libraries, performance or progressive web apps, @Clearleft can help

https://clearleft.com/posts/507

Reading Broken Monsters by Lauren Beukes.

Buy this book

Sunday, October 22nd, 2017

Pattern Libraries, Performance, and Progressive Web Apps

Ever since its founding in 2005, Clearleft has been laser-focused on user experience design.

But we’ve always maintained a strong front-end development arm. The front-end development work at Clearleft is always in service of design. Over the years we’ve built up a wealth of expertise on using HTML, CSS, and JavaScript to make better user experiences.

Recently we’ve been doing a lot of strategic design work—the really in-depth long-term engagements that begin with research and continue through to design consultancy and collaboration. That means we’ve got availability for front-end development work. Whether it’s consultancy or production work you’re looking for, this could be a good opportunity for us to work together.

There are three particular areas of front-end expertise we’re obsessed with…

Pattern Libraries

We caught the design systems bug years ago, way back when Natalie started pioneering pattern libraries as our primary deliverable (or pattern portfolios, as we called them then). This approach has proven effective time and time again. We’ve spent years now refining our workflow and thinking around modular design. Fractal is the natural expression of this obsession. Danielle and Mark have been working flat-out on version 2. They’re very eager to share everything they’ve learned along the way …and help others put together solid pattern libraries.

Danielle Huntrods Mark Perkins

Performance

Thinking about it, it’s no surprise that we’re crazy about performance at Clearleft. Like I said, our focus on user experience, and when it comes to user experience on the web, nothing but nothing is more important than performance. The good news is that the majority of performance fixes can be done on the front end—images, scripts, fonts …it’s remarkable how much a good front-end overhaul can make to the bottom line. That’s what Graham has been obsessing over.

Graham Smith

Progressive Web Apps

Over the years I’ve found myself getting swept up in exciting new technologies on the web. When Clearleft first formed, my head was deep into DOM Scripting and Ajax. Half a decade later it was HTML5. Now it’s service workers. I honestly think it’s a technology that could be as revolutionary as Ajax or HTML5 (maybe I should write a book to that effect).

I’ve been talking about service workers at conferences this year, and I can’t hide my excitement:

There’s endless possibilities of what you can do with this technology. It’s very powerful.

Combine a service worker with a web app manifest and you’ve got yourself a Progressive Web App. It’s not just a great marketing term—it’s an opportunity for the web to truly excel at delivering the kind of user experiences previously only associated with native apps.

Jeremy Keith

I’m very very keen to work with companies and organisations that want to harness the power of service workers and Progressive Web Apps. If that’s you, get in touch.

Whether it’s pattern libraries, performance, or Progressive Web Apps, we’ve got the skills and expertise to share with you.

How to write a talk - Notist

Rachel describes her process of putting technical talks together:

This method of creating a talk is the one that I find gets me from blank page to finished slide deck most effectively.

She also acknowledges that many other processes are available.

If you are stuck, and your usual method isn’t working, don’t be afraid to try a different approach even if just to get the ideas moving and take you away from staring at the blank page! You might discover that some types of talk benefit from an alternate starting point. There really are no rules here, other than that you do end up with a talk before you need to walk out on that stage.

Saturday, October 21st, 2017

Salvage (Upsideclown)

A tale of the Fermi paradox featuring data preservation via tardigrade as a means of transmitting information beyond the great filter.

Friday, October 20th, 2017

Yo, @Aizlewood, check it!

Yo, @Aizlewood, check it!

Thursday, October 19th, 2017

Checked in at Cafè Sant Pere. Nightcap — with Jessica map

Checked in at Cafè Sant Pere. Nightcap — with Jessica

Checked in at Mudanzas. Cerveza y fuet — with Jessica map

Checked in at Mudanzas. Cerveza y fuet — with Jessica

Tapas in El Xampanyet.

Tapas in El Xampanyet.

Design Systems | susan jean robertson

Susan reviews Alla’s superb book on design systems:

If you’re interested in or wanting to create a design system or improve the one you have or get buy in to take your side project at work and make it part of the normal work flow, read this book. And even better, get your colleagues to do the same, so you’ll have a shared understanding before you begin the hard work to build your own system.

Susan also published her highlights from the book. I really like that!

The Story of CSS Grid, from Its Creators · An A List Apart Article

It must be the day for documenting the history of CSS. Here’s an article by Aaron on the extraordinary success story of CSS Grid. A lot of the credit for that quite rightly goes to Rachel and Jen:

Starting with Rachel Andrew coming in and creating a ton of demos and excitement around CSS Grid with Grid by Example and starting to really champion it and show it to web developers and what it was capable of and the problems that it solves.

Then, a little bit later, Jen Simmons created something called Labs where she put a lot of demos that she created for CSS Grid up on the web and, again, continued that momentum and that wave of enthusiasm for CSS Grid with web developers in the community.

Checked in at El Pintxo de Petrixol. Gildas and txakoli. — with Jessica map

Checked in at El Pintxo de Petrixol. Gildas and txakoli. — with Jessica

Building a CSS-only image gallery (with fallbacks)

A great step-by-step walkthrough of building a really nice image gallery without any JavaScript.

The end result is really impressive but there’s still the drawback that the browser history will be updated every time you click on an image thumbnail (because the functionality relies on ID attributes referenced via :target). Depending on your use-case, that may or may not be desirable.

A Look Back at the History of CSS | CSS-Tricks

The evolution of CSS, as told by the author of the excellent History of the Web newsletter.

Alt-texts: The Ultimate Guide - Axess Lab

Great advice for writing usable alt attributes. This gem seems obvious in hindsight but I hadn’t considered it before:

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.

Seafood stew.

Seafood stew.

Mozilla Developer Roadshow Asia Jeremy Keith - YouTube

At the 14 minute mark I had to deal with an obstreperous member of the audience. He wasn’t heckling exactly …he just had a very bad experience with web components, and I think my talk was triggering for him.

Mozilla Developer Roadshow Asia: Jeremy Keith
The telescope that first observed the atmosphere of Titan.

The telescope that first observed the atmosphere of Titan.

A night at the observatory.

A night at the observatory.

Barcelona at night.

Barcelona at night.

Checked in at La Torna. with Jessica map

Checked in at La Torna. with Jessica

Wednesday, October 18th, 2017

Boquerones!

Boquerones!

Passing this message on to the good people at the @Shopify sponsor stand at @SmashingConf Barcelona:

https://adactio.com/journal/12718

Tuesday, October 17th, 2017

Checked in at Palau de la Música Catalana. Cerveza y jamon. — with Jessica map

Checked in at Palau de la Música Catalana. Cerveza y jamon. — with Jessica

Waiting in the wings to speak at Smashing Conf Barcelona.

Waiting in the wings to speak at Smashing Conf Barcelona.

Checked in at Palau de la Música Catalana. Smashing Conf. map

Checked in at Palau de la Música Catalana. Smashing Conf.

Checked in at Le Cucine Mandarosso. Having a great lunchtime chat with Sarah. map

Checked in at Le Cucine Mandarosso. Having a great lunchtime chat with Sarah.

@20 (Ftrain.com)

Paul Ford marks two decades of publishing on his own site.

Some days I want to erase this whole thing—much of the writing is sloppy and immature, and I was, too. But why bother to hit the red button? The path of the Internet has seen fit to do that for me.

The Era of Newshammer - daverupert.com

Dave has redesigned his site. Now it’s extra Dave-y.

Monday, October 16th, 2017

It’s @mrseaves in Barcelona.

It’s @mrseaves in Barcelona.

Sunday, October 15th, 2017

Having some serious FOMO for #ScienceHackDay SF — sounds like @ArielWaldman has created something quite special (again).

Checked in at Duque Brewpub. with Jessica map

Checked in at Duque Brewpub. with Jessica

Lisboa.

Lisboa.

Rooftops.

Rooftops.

The tiled background images of Lisbon.

The tiled background images of Lisbon.

Wandering around Lisbon.

Wandering around Lisbon.

Octopus salad. 🐙

Octopus salad. 🐙

Checked in at Fábrica Coffee Roasters. with Jessica map

Checked in at Fábrica Coffee Roasters. with Jessica

Checked in at Manteigaria. with Jessica map

Checked in at Manteigaria. with Jessica

Saturday, October 14th, 2017

Checked in at Grapes & Bites. with Jessica map

Checked in at Grapes & Bites. with Jessica

Checked in at Duque Brewpub. with Jessica map

Checked in at Duque Brewpub. with Jessica

Boats.

Boats.

Checked in at Manteigaria. Pastéis de nata. — with Jessica map

Checked in at Manteigaria. Pastéis de nata. — with Jessica

Hello, Lisbon.

Hello, Lisbon.

Checked in at O Surf & Turf. Ceviche! — with Jessica map

Checked in at O Surf & Turf. Ceviche! — with Jessica

Goodbye, Braga. I like your style.

Goodbye, Braga. I like your style.

A day without syndicating to Twitter:

https://adactio.com/notes/archive/2017/10/13

Checked in at Theatro Circo. Day two of Mirror Conf. map

Checked in at Theatro Circo. Day two of Mirror Conf.

Friday, October 13th, 2017

Beers by the church.

Beers by the church.

Listening to @EduardoBoucas talk at @MirrorConf about his Speed Tracker project—I’m a big fan:

https://adactio.github.io/speedtracker/

The tiled background images of Braga.

The tiled background images of Braga.

Getting ready to speak at Mirror Conf.

Getting ready to speak at Mirror Conf.

Technology isn’t destiny, no matter how inexorable its evolution may seem.

— The Dream Machine

Thursday, October 12th, 2017

I won’t be syndicating my notes to Twitter tomorrow. https://adactio.com/notes/

I won’t be syndicating my notes to Twitter tomorrow.

https://adactio.com/notes/

Checked in at Theatro Circo. Listening to Frank. — with Brad map

Checked in at Theatro Circo. Listening to Frank. — with Brad

Waiting with @brad_frost for @frank_chimero to kick off @MirrorConf.

Waiting with @bradfrost for @frankchimero to kick off @MirrorConf.

Wednesday, October 11th, 2017

Checked in at GNRation. Listening to Portuguese music. — with Jessica map

Checked in at GNRation. Listening to Portuguese music. — with Jessica

Going to Portugal. brb

Getting excited about my new talk for @ViewSourceConf at the end of the month.

You should come and see it…

https://viewsourceconf.org/

Failing to distinguish between a tractor trailer and the bright white sky | booktwo.org

James talks about automation and understanding.

Just because a technology – whether it’s autonomous vehicles, satellite communications, or the internet – has been captured by capital and turned against the populace, doesn’t mean it does not retain a seed of utopian possibility.

Paperclip Maximizer

Play the part of an AI pursuing its goal without care for existential threats. This turns out to be ludicrously addictive. I don’t want to tell you how long I spent playing this.

Keep your eye on the prize: remember that money (and superintelligence) is just a means to an end …and that end is making more paperclips.

Tuesday, October 10th, 2017

So proud to have been involved in a small way with @craftui’s superb Design Systems book. http://designsystemsbook.com

So proud to have been involved in a small way with @craftui’s superb Design Systems book.

http://designsystemsbook.com

Checked in at O'Shio. with Jessica map

Checked in at O’Shio. with Jessica

Monday, October 9th, 2017

Service Worker Registration  |  Web Fundamentals  |  Google Developers

Hmm …seems like I should probably wait for the load event before triggering navigator.serviceworker.register().

Defining design principles at EMBL | Journal | The Personal Disquiet of Mark Boulton

Mark describes the process he favours for creating (discovering?) design principles, like the ones for EMBL (I must remember to add those to the collection).

All you do is be mindful of when the team repeats design desires. This could be several members of the team say the same thing in a slightly different way, or that you keep circling around and around a problem but struggle to articulate it. By being mindful at all times to this a team can quickly pull together principles that are derived from doing the work on their particular problem rather than principles which are imposed on the work. An important difference.

Microsoft Edge for iOS and Android: What developers need to know - Microsoft Edge Dev Blog

This is such a strange announcement from Microsoft. It’s worded as though they chose to use the WebKit engine on iOS. But there is no choice: if you want to put a browser on iOS, you must use the WKWebView control. Apple won’t allow any other rendering engine (that’s why Chrome on iOS is basically a skin for Safari; same for Opera on iOS). It’s a disgraceful monopolistic policy on Apple’s part.

A word to the Microsoft marketing department: please don’t try to polish the turd in the shit sandwich you’ve been handed by Apple.

FriendChip Beacons - With support of Eddystone and Physical Web

I quite like the idea of broadcasting my URL from a friendchip bracelet.

Cosy.

Cosy.

“async” attribute on img, and corresponding “ready” event · Issue #1920 · whatwg/html

It looks like the async attribute is going to ship in Chrome for img elements:

This attribute would have two states:

  • “on”: This indicates that the developer prefers responsiveness and performance over atomic presentation of content.
  • “off”: This indicates that the developer prefers atomic presentation of content over responsiveness.

Sunday, October 8th, 2017

map

Checked in at Rob Roy Bar. with Jessica

Saturday, October 7th, 2017

Notifications

I’ve written before about how I use apps on my phone:

If I install an app on my phone, the first thing I do is switch off all notifications. That saves battery life and sanity.

The only time my phone is allowed to ask for my attention is for phone calls, SMS, or FaceTime (all rare occurrences). I initiate every other interaction—Twitter, Instagram, Foursquare, the web. My phone is a tool that I control, not the other way around.

To me, this seems like a perfectly sensible thing to do. I was surprised by how others thought it was radical and extreme.

I’m always shocked when I’m out and about with someone who has their phone set up to notify them of any activity—a mention on Twitter, a comment on Instagram, or worst of all, an email. The thought of receiving a notification upon receipt of an email gives me the shivers. Allowing those kinds of notifications would feel like putting shackles on my time and attention. Instead, I think I’m applying an old-school RSS mindset to app usage: pull rather than push.

Don’t get me wrong: I use apps on my phone all the time: Twitter, Instagram, Swarm (though not email, except in direst emergency). Even without enabling notifications, I still have to fight the urge to fiddle with my phone—to check to see if anything interesting is happening. I’d like to think I’m in control of my phone usage, but I’m not sure that’s entirely true. But I do know that my behaviour would be a lot, lot worse if notifications were enabled.

I was a bit horrified when Apple decided to port this notification model to the desktop. There doesn’t seem to be any way of removing the “notification tray” altogether, but I can at least go into System Preferences and make sure that absolutely nothing is allowed to pop up an alert while I’m trying to accomplish some other task.

It’s the same on iOS—you can control notifications from Settings—but there’s an added layer within the apps themselves. If you have notifications disabled, the apps encourage you to enable them. That’s fine …at first. Being told that I could and should enable notifications is a perfectly reasonable part of the onboarding process. But with some apps I’m told that I should enable notifications Every. Single. Time.

Instagram Swarm

Of the apps I use, Instagram and Swarm are the worst offenders (I don’t have Facebook or Snapchat installed so I don’t know whether they’re as pushy). This behaviour seems to have worsened recently. The needling has been dialed up in recent updates to the apps. It doesn’t matter how often I dismiss the dialogue, it reappears the next time I open the app.

Initially I thought this might be a bug. I’ve submitted bug reports to Instagram and Swarm, but I’m starting to think that they see my bug as their feature.

In the grand scheme of things, it’s not a big deal, but I would appreciate some respect for my deliberate choice. It gets pretty wearying over the long haul. To use a completely inappropriate analogy, it’s like a recovering alcoholic constantly having to rebuff “friends” asking if they’re absolutely sure they don’t want a drink.

I don’t think there’s malice at work here. I think it’s just that I’m an edge-case scenario. They’ve thought about the situation where someone doesn’t have notifications enabled, and they’ve come up with a reasonable solution: encourage that person to enable notifications. After all, who wouldn’t want notifications? That question, if it’s asked at all, is only asked rhetorically.

I’m trying to do the healthy thing here (or at least the healthier thing) in being mindful of my app usage. They sure aren’t making it easy.

The model that web browsers use for notifications seems quite sensible in comparison. If you arrive on a site that asks for permission to send you notifications (without even taking you out to dinner first) then you have three options: allow, block, or dismiss. If you choose “block”, that site will never be able to ask that browser for permission to enable notifications. Ever. (Oh, how I wish I could apply that browser functionality to all those sites asking me to sign up for their newsletter!)

That must seem like the stuff of nightmares for growth-hacking disruptive startups looking to make their graphs go up and to the right, but it’s a wonderful example of truly user-centred design. In that situation, the browser truly feels like a user agent.

Virginia Heffernan on Learning to Read the Internet, Not Live in It | WIRED

A beautiful piece of writing from Virginia Heffernan on how to cope with navigating the overwhelming tsunami of the network.

The trick is to read technology instead of being captured by it—to maintain the whip hand.

Friday, October 6th, 2017

Today’s oyster.

Today’s oyster.

Checked in at Lucky Beach. Lunch on the beach. map

Checked in at Lucky Beach. Lunch on the beach.

Thursday, October 5th, 2017

Creating accessible menus-Part 1

James has been tweaking the accessibility of his site navigation. I’m looking forward to the sequel.

Swarm.

Swarm.

Instagram.

Instagram.

The Nature of Code

A web book with interactive code examples.

How can we capture the unpredictable evolutionary and emergent properties of nature in software? How can understanding the mathematical principles behind our physical world help us to create digital worlds? This book focuses on the programming strategies and techniques behind computer simulations of natural systems using Processing.

The best hypertext system is the one you have with you.

Wednesday, October 4th, 2017

Marking six decades of our space age.

Happy anniversary, Sputnik-1!

18F: Digital service delivery | Building a large-scale design system: How we created a design system for the U.S. government

Maya Benari provides an in-depth walkthrough of 18F’s mission to create a consistent design system for many, many different government sites.

When building out a large-scale design system, it can be hard to know where to start. By focusing on the basics, from core styles to coding conventions to design principles, you can create a strong foundation that spreads to different parts of your team.

There’s an interface inventory, then mood boards, then the work starts on typography and colour, then white space, and finally the grid system.

The lessons learned make for good design principles:

  • Talk to the people
  • Look for duplication of efforts
  • Know your values
  • Empower your team
  • Start small and iterate
  • Don’t work in a vacuum
  • Reuse and specialize
  • Promote your system
  • Be flexible

This Future Looks Familiar: Watching Blade Runner in 2017 | Tor.com

If you subtract the flying cars and the jets of flame shooting out of the top of Los Angeles buildings, it’s not a far-off place. It’s fortunes earned off the backs of slaves, and deciding who gets to count as human. It’s impossible tests with impossible questions and impossible answers. It’s having empathy for the right things if you know what’s good for you. It’s death for those who seek freedom.

A thought-provoking first watch of Blade Runner …with an equally provocative interpretation in the comments:

The tragedy is not that they’re just like people and they’re being hunted down; that’s way too simplistic a reading. The tragedy is that they have been deliberately built to not be just like people, and they want to be and don’t know how.

That’s what really struck me about Kazuo Ishiguro’s Never Let Me Go: the tragedy is that these people can’t take action. “Run! Leave! Go!” you want to scream at them, but you might as well tell someone “Fly! Why don’t you just fly?”

Tuesday, October 3rd, 2017

INCREDIBLE DOOM

A print & web comic series about 90’s kids making life-threatening decisions over the early internet.

The first issue is online and it’s pretty great.

CSS Grid PlayGround | Mozilla

A ten-part tutorial on CSS Grid from Mozilla.

Getting the blog back together

Simon has revived his blog …and he’s importing his writings from not-his-blog too.

Robtober 2017 | Rob Weychert

What an excellent example of a responsive calendar!

JavaScript Systems Music

A massively in-depth study of boundary-breaking music, recreated through the web audio API.

  1. Steve Reich - It’s Gonna Rain (1965)
  2. Brian Eno - Ambient 1: Music for Airports, 2/1 (1978)
  3. Brian Eno - Discreet Music (1975)

You don’t have to be a musician or an expert in music theory to follow this guide. I’m neither of those things. I’m figuring things out as I go and it’s perfectly fine if you do too. I believe that this kind of stuff is well within reach for anyone who knows a bit of programming, and you can have a lot of fun with it even if you aren’t a musician.

One thing that definitely won’t hurt though is an interest in experimental music! This will get weird at times.

An Epitaph for Newsvine » Mike Industries

Newsvine has closed. Mike reflects on what he built, with a particular eye to the current online news situation.

When we look at how the average person’s news and media diet has changed over the last decade or so, we can trace it directly back to the way these and other modern organizations have begun feeding us our news. Up until 10 or 15 years ago, we essentially drank a protein shake full of news. A good amount of fruits and vegetables, some grains, some dairy, some tofu, and then a little bit of sugar, all blended together. Maybe it wasn’t the tastiest thing in the world but it kept us healthy and reasonably informed. Then, with cable news we created a fruit-only shake for half the population and a vegetable-only shake for the other half. Then with internet news, we deconstructed the shake entirely and let you pick your ingredients, often to your own detriment. And finally, with peer-reinforced, social news networks, we’ve given you the illusion of a balanced diet, but it’s often packed with sugar, carcinogens, and other harmful substances without you ever knowing. And it all tastes great!

There’s also this interesting litmus test for budding entrepreneurs:

We didn’t know for sure if it was going to work, but the day we decided we’d be happy to have tried it even if it failed was the day we ended up quitting our jobs (incidentally, if you are thinking about leaving your job for a new risky thing, this is the acid test I recommend).

A good science fiction story… - daverupert.com

Dave applies two quotes from sci-fi authors to the state of today’s web.

A good science fiction story should be able to predict not the automobile but the traffic jam.

—Frederik Pohl

The function of science fiction is not only to predict the future, but to prevent it.

—Ray Bradbury

Huxley!

Huxley!

Monday, October 2nd, 2017

Picked up a family heirloom when I was back in Ireland: a fifth edition (1921) of The Theory Of Relativity by Albert Einstein.

Picked up a family heirloom when I was back in Ireland: a fifth edition (1921) of The Theory Of Relativity by Albert Einstein.

Web Components: The Long Game – Infrequently Noted

One of the things we’d hoped to enable via Web Components was a return to ctrl-r web development. At some level of complexity and scale we all need tools to help cope with code size, application structure, and more. But the tender, loving maintainance of babel and webpack and NPM configurations that represents a huge part of “front end development” today seems…punitive. None of this should be necessary when developing one (or a few) components and composing things shouldn’t be this hard. The sophistication of the tools needs to get back to being proportional with the complexity of the problem at hand.

I completely agree with Alex here. But that’s also why I was surprised and disheartened when I linked to Monica’s excellent introduction to web components that a package manager seemed to be a minimum requirement.

Essential Image Optimization

Following on from Amber’s introduction, here’s a really in-depth look at image formats, compression and optimisation techniques from Addy.

This is a really nicely put together little web book released under a Creative Commons licence.

When Should You Use Which Image Format? JPG? PNG? SVG?

Amber has been investigating which image formats make sense for which situations.

Choosing image format is only one step towards optimising images on the web. There are many, many other steps to consider, and so, so much to learn!

eBay’s Font Loading Strategy | eBay Tech Blog

Here’s the flow that eBay use for the font-loading. They’ve decided that on the very first page view, seeing a system font is an acceptable trade-off. I think that makes sense for their situation.

Interestingly, they set a flag for subsequent visits using localStorage rather than a cookie. I wonder why that is? For me, the ability to read cookies on the server as well as the client make them quite handy for situations like this.

When the news goes sideways – James Donohue – Medium

The BBC has been experimenting with some alternative layouts for some articles on mobile devices. Read on for the details, but especially for the philosophical musings towards the end—this is gold dust:

Even the subtext of Google’s marketing push around Progressive Web Apps is that mobile websites must aspire to be more like native apps. While I’m as excited about getting access to previously native-only features such as offline support and push notifications as the next web dev, I’m not sure that the mobile web should only try to imitate the kind of user interfaces that we see on native.

Do mobile websites really dream of being native apps, any more than they dreamt of being magazines?

How to Trick Yourself into Writing a Book in Five Easy Steps

Great advice from Jen on writing a book:

  1. Write emails to Ted. Try to find a little comfort zone inside the larger uncomfortable task.
  2. Don’t write a Book. Write Chapters. Break a large chore into smaller tasks and focus on one at a time.
  3. Trap yourself. Set up a workspace that limits distraction and procrastination.
  4. Don’t despair the zero-word-count days. Give yourself credit for behind-the-scenes work, even self-care.
  5. Get amnesia. Keep your eye on the prize.

A Personal Computer for Children of All Ages (PDF)

Alan Kay’s initial description of a “Dynabook” written at Xerox PARC in 1972.

Draggable JS – JavaScript drag and drop library

This looks like a very nice little JavaScript library for drag’n’drop. The site works as an example of the functionality in action.

Brought to you by Shopify, the company enabling Breitbart.

CSS and SVG animation workshop by codebarbrighton

There were two days of Codebar workshopping on the weekend as part of the Brighton Digital Festival. Cassie talked people through this terrific CSS animation tutorial, making this nifty Brighton-based piece.  

Sunday, October 1st, 2017

Roasting pork, apples, and onions. 🐷🍏

Roasting pork, apples, and onions. 🐷🍏