Archive: September, 2017

141

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

Saturday, September 30th, 2017

Friday, September 29th, 2017

“It sounds like a party in Dracula’s house” says @ambrwlsn90 upon hearing Leopold Kraus, the surf rock band I played in in the ’90s.

Photon Design System

Most design systems I link to are for websites, so interesting to see this one for a web browser: Firefox.

There are guidelines for tone of voice and motion design as well as the usual guidelines for typography, colour, and interface elements.

Exclusive Design Principles ⚒ Nerd

This is a fascinating exercise—take a good set of design principles and test them for reversibility. The results are entirely plausible.

I’ve taken this exercise to the extreme. The philosophy behind inclusive design is that the thing you create works for everybody, no matter the context. The idea behind this experiment in Exclusive Design is that you design something for one specific person, in a controlled environment, in a specific context. Tailor made.

Maybe I should add these to my collection.

  1. Provide a unique experience
  2. Ignore situation
  3. Be inconsistent/innovative
  4. Take control
  5. Offer the best possible solution
  6. Prioritise identity
  7. Add nonsense

We are dead stars looking back up at the sky.

—Dr. Michelle Thaller

https://vimeo.com/95180201

Trees of deep time are a portal to the past – and the future | Aeon Essays

From the library of Alexandria to the imagined canals of mars to the spots on the sun, this is a beautifully written examination of the chronology contained within the bristlecone pine.

The oldest of the living bristlecones were just saplings when the pyramids were raised. The most ancient, called Methuselah, is estimated to be more than 4,800 years old; with luck, it will soon enter its sixth millennium as a living, reproducing organism. Because we conceive of time in terms of experience, a life spanning millennia can seem alien or even eternal to the human mind. It is hard to grasp what it would be like to see hundreds of generations flow out from under you in the stream of time, hard to imagine how rich and varied the mind might become if seasoned by five thousand years of experience and culture.

There is only the briefest passing mention of the sad story of Don Currey.

Thursday, September 28th, 2017

Checked in at The Joker. with Jessica map

Checked in at The Joker. with Jessica

Акула

Myself and Jessica were on our way over to Ireland for a few days to visit my mother. It’s a straightforward combination of three modes of transport: a car to Brighton train station; a train to Gatwick airport; a plane to Cork.

We got in the taxi to start the transport relay. “Going anywhere nice?” asked the taxi driver. “Ireland”, I said. He mentioned that he had recently come back from a trip to Crete. “Lovely place”, he said. “Great food.” That led to a discussion of travel destinations, food, and exchange rates. The usual taxi banter. We mentioned that we were in Iceland recently, where the exchange rate was eye-watering. “Iceland?”, he said, “Did you see the Northern Lights?” We hadn’t, but we mentioned some friends of ours who travelled to Sweden recently just to see the Aurorae. That led to a discussion of the weirdness of the midnight sun. “Yeah”, he said, “I was in the Barents Sea once and it was like broad daylight in the middle of the night.” We mentioned being in Alaska in Summer, and how odd the daylight at night was, but now my mind was preoccupied. As soon as there was a lull in the conversation I asked “So …what brought you to the Barents Sea?”

He paused. Then said, “You wouldn’t believe me if I told you.”

Then he told us.

“We were on a secret mission. It was the ’80s, the Cold War. The Russians had a new submarine, the Typhoon. Massive, it was. Bigger than anything the Americans had. We were there with the Americans. They had a new camera that could see through smoke and cloud. The Russians wouldn’t know we were filming them. I was on a support ship. But one time, at four in the morning, the Russians shot at us—warning shots across the bow. I remember waking up and it was still so light, and there were this explosions of water right by the ship.”

“Wow!” was all I could say.

“It was so secret, that mission”, he said, “that if you didn’t go on it, you’d have to spend the duration in prison.”

By this time we had reached the station. “Do you believe me?” he asked us. “Yes”, we said. We paid him, and thanked him. Then I added, “And thanks for the story.”

map

Checked in at Trollburger. with Jessica

Wednesday, September 27th, 2017

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

Canonical test podcasts (Joe Clark)

Are you the creator, programmer, or quality-tester of a podcasting application? This page provides a range of podcasts that exemplify a range of atypical use case from merely uncommon to exceedingly fringe. If your app can handle all these, you’re doing well.

Singapore

I was in Singapore last week. It was most relaxing. Sure, it’s Disneyland With The Death Penalty but the food is wonderful.

chicken rice fishball noodles laksa grilled pork

But I wasn’t just there to sample the delights of the hawker centres. I had been invited by Mozilla to join them on the opening leg of their Developer Roadshow. We assembled in the PayPal offices one evening for a rapid-fire round of talks on emerging technologies.

We got an introduction to Quantum, the new rendering engine in Firefox. It’s looking good. And fast. Oh, and we finally get support for input type="date".

But this wasn’t a product pitch. Most of the talks were by non-Mozillians working on the cutting edge of technologies. I kicked things off with a slimmed-down version of my talk on evaluating technology. Then we heard from experts in everything from CSS to VR.

The highlight for me was meeting Hui Jing and watching her presentation on CSS layout. It was fantastic! Entertaining and informative, it was presented with gusto. I think it got everyone in the room very excited about CSS Grid.

The Singapore stop was the only I was able to make, but Hui Jing has been chronicling the whole trip. Sounds like quite a whirlwind tour. I’m so glad I was able to join in even for a portion. Thanks to Sandra and Ali for inviting me along—much appreciated.

I’ll also be speaking at Mozilla’s View Source in London in a few weeks, where I’ll be talking about building blocks of the Indie Web:

In these times of centralised services like Facebook, Twitter, and Medium, having your own website is downright disruptive. If you care about the longevity of your online presence, independent publishing is the way to go. But how can you get all the benefits of those third-party services while still owning your own data? By using the building blocks of the Indie Web, that’s how!

‘Twould be lovely to see you there.

The Coming Software Apocalypse - The Atlantic

The title is pure clickbait, and the moral panic early in this article repeats the Toyota myth, but then it settles down into a fascinating examination of abstractions in programming. On the one hand, there’s the problem of the not enough abstraction: having to write in code is such a computer-centric way of building things. On the other hand, our world is filled with dangerously abstracted systems:

When your tires are flat, you look at your tires, they are flat. When your software is broken, you look at your software, you see nothing.

So that’s a big problem.

Bret Victor, John Resig and Margaret Hamilton are featured. Doug Engelbart and J.C.R. Licklider aren’t mentioned but their spirits loom large.

Tuesday, September 26th, 2017

plainJS - The Vanilla JavaScript Repository

Some more useful snippets of JavaScript. The functions and helpers are particularly handy if you’re weaning yourself off jQuery.

Essential Vanilla JavaScript Functions

The title is overkill, but these functions ported from PHP to JavaScript could be useful (especially for dealing with arrays).

Folklore.org: The Original Macintosh

Anecdotes about the development of Apple’s original Macintosh, and the people who made it.

Like a real-life Halt And Catch Fire.

No Planes Go (Upsideclown)

A near-future tale of post-Brexit Kafkaesque isolationism in the skies.

It turned out that taking back control also meant creating an aerial deadzone. Nothing can fly in here without a Library of Alexandria’s worth of paperwork, and nothing can fly out without the same.

Occasionally, people e-mail me to say something along the lines of “I’ve come up with something to replace HTML!”.

Five years ago, Hixie outlined the five metrics that a competitor to the web would have to score well in:

  1. Be completely devoid of any licensing requirements.
  2. Be vendor-neutral.
  3. Be device-neutral and media-neutral.
  4. Be content-neutral.
  5. Be radically better than the existing Web.

You come at the king, you best not miss.

The Woman Who Smashed Codes - Jason Fagone - Hardcover

This book—released today—looks right up my alley.

After World War I, Smith used her talents to catch gangsters and smugglers during Prohibition, then accepted a covert mission to discover and expose Nazi spy rings that were spreading like wildfire across South America, advancing ever closer to the United States. As World War II raged, Elizebeth fought a highly classified battle of wits against Hitler’s Reich, cracking multiple versions of the Enigma machine used by German spies.

Monday, September 25th, 2017

Was researching and had to 386 the Wikipedia article on PWAs.

https://en.wikipedia.org/w/index.php?title=Progressivewebapp&action=history

jakearchibald/navigation-transitions

I honestly think if browsers implemented this, 80% of client-rendered Single Page Apps could be done as regular good ol’-fashioned websites.

Having to reimplement navigation for a simple transition is a bit much, often leading developers to use large frameworks where they could otherwise be avoided. This proposal provides a low-level way to create transitions while maintaining regular browser navigation.

The Decentralized Social Web

Excellent presentation slides on all things Indie Web.

Checked in at Jacob's Ladder Restaurant. Chowder and Murphys — with Jessica map

Checked in at Jacob’s Ladder Restaurant. Chowder and Murphys — with Jessica

Network Information API

It looks like this is landing in Chrome. The navigator.connection.type property will allow us to progressively enhance based on connection type:

A web application that makes use of a service worker to cache resources during installation might have different bundles of assets that it might cache: a list of crucial assets that are cached unconditionally, and a bundle of larger, optional assets that are only cached ahead of time when navigator.connection.type is 'ethernet' or 'wifi'.

There are potential security issues around fingerprinting that are addressed in this document.

Constellation charts

Refresh to get a new randomly generated constellation.

A lovely bit of creative JS from Emily

Why it’s tricky to measure Server-side Rendering performance

A good analysis, but my takeaway was that the article could equally be called Why it’s tricky to measure Client-side Rendering performance. In a nutshell, just looking at metrics can be misleading.

Pre-classified metrics are a good signal for measuring performance. At the end of the day though, they may not properly reflect your site’s performance story. Profile each possibility and give it the eye test.

And it’s always worth bearing this in mind:

The best way to prioritize content by building a static site. Ask yourself if the content needs JavaScript.

Short Trip - Alexander Perrin

Well, this is simply delightful.

cassidoo/HTML-CSS-Tutorial: Tutorial for HTML and CSS

Here’s a great free curriculum for teaching HTML and CSS.

Sunday, September 24th, 2017

Checked in at Rob Roy Bar. Murphys and tunage — with Jessica map

Checked in at Rob Roy Bar. Murphys and tunage — with Jessica

Saturday, September 23rd, 2017

Checked in at MacIntyre Coffee. with Jessica map

Checked in at MacIntyre Coffee. with Jessica

Progressive Web Apps? No, we are building Alien Web Apps | Condé Nast Technology

There’s a lot of misinformation on the internet as to how to build a PWA and how “appy” and SPA-y one must be.

Yes!

This simply isn’t true. Disappointingly, It is what most of the documentation, blog posts and public discourse seem to imply.

Preach it!

I’m so, so happy to see some pushback against the misinformation that progressive web apps automatically imply client-side rendered single page apps built from scratch. There’s so much value to be had in turbo-charging an existing site into a progressive web app.

But what we don’t need is yet another TLA like Alien Web Apps.

[selectors] Functional pseudo-class like :matches() with 0 specificity · Issue #1170 · w3c/csswg-drafts

A really interesting proposal from Lea that would allow CSS authors to make full use of selectors but without increasing specificity. Great thoughts in the comments too.

Designing Websites for iPhone X | WebKit

This could be a one-word article: don’t.

More specifically, don’t design websites for any specific device. That way lies pain (and it is not the way of the web).

But read on for a textbook example of how not to introduce new CSS properties. Apple proposed the new syntax that they’re shipping. Now it’s getting standardised …with a different name. So basically Apple are shipping the equivalent of a vendor-prefixed property without the vendor prefix.

Visions - A Literary Science Fiction Magazine

This forthcoming sci-fi quarterly publication looks intriguing:

Each issue contains a part of a previously untranslated novel as well as essays looking at the world through the lens of different writers.

I’m loving their typeface. It’s called Marvin. It was specially made for the magazine, and available to download and use for personal use for free.

Marvin gets its distinctive voice not only from its Art Nouveau vibe but also from its almost geometrically perfect construction. Its roundness and familiarity with Bauhaus typefaces shows its roots in geometric sans serifs at the same time.

The story of its (re)construction is fascinating. (Thanks for the heads-up, Jason.)

Friday, September 22nd, 2017

CloseBrace | A Brief, Incomplete History of JavaScript

Another deep dive into web history, this time on JavaScript. The timeline of JS on the web is retroactively broken down into four eras:

  • the early era: ~1996 – 2004,
  • the jQuery era: ~2004 – 2010,
  • the Single Page App era: ~2010 - 2014, and
  • the modern era: ~2014 - present.

Nice to see “vanilla” JavaScript making a resurgence in that last one.

It’s 2017, the JavaScript ecosystem is both thriving and confusing as all hell. No one seems to be quite sure where it’s headed, only that it’s going to continue to grow and change. The web’s not going anywhere, which means JS isn’t going anywhere, and I’m excited to see what future eras bring us.

The First Web Apps: 5 Apps That Shaped the Internet as We Know It

A great bit of web history spelunking in search of the first websites that allowed users to interact with data on a server. Applications, if you will. It’s well written, but I take issue with this:

The world wide web wasn’t supposed to be this fun. Berners-Lee imagined the internet as a place to collaborate around text, somewhere to share research data and thesis papers.

This often gets trotted out (“the web was intended for scientists sharing documents”), but it’s simply not true that Tim Berners-Lee was only thinking of his immediate use-case; he deliberately made the WWW project broad enough to allow all sorts of thitherto unforeseen uses. If he hadn’t …well, the web wouldn’t have been able to accommodate all those later developments. It’s not an accident that the web was later used for all sorts of unexpected things—that was the whole idea.

Anyway, apart from that misstep, the rest of the article is a fun piece, well worth reading.

How much storage space is my Progressive Web App using? | Dean Hume

You can use navigator.storage.estimate() to get a (vague) idea of how much space is available on a device for your service worker caches.

Checked in at Kouzina map

Checked in at Kouzina

Idle Words: Anatomy of a Moral Panic

The real story in this mess is not the threat that algorithms pose to Amazon shoppers, but the threat that algorithms pose to journalism. By forcing reporters to optimize every story for clicks, not giving them time to check or contextualize their reporting, and requiring them to race to publish follow-on articles on every topic, the clickbait economics of online media encourage carelessness and drama.

Thursday, September 21st, 2017

Understanding the WebView Viewport in iOS 11 - Ayogo Health Inc.

One more reason not to use sticky headers on mobile.

My foreword for Design Systems. — Ethan Marcotte

Ethan’s foreword for Alla’s brilliant book.

(I know the book is brilliant because I was reviewer throughout. Pre-order it now.)

Talking about talking CSS

I had the great pleasure of finally meeting Hui Jing when Mozilla invited me along to Singapore to speak at their developer roadshow. Hui Jing is speaking at each one of the events on the roadshow, and documenting the journey here.

She’s being very modest about her talk: it was superb! Entertaining and informative in equal measure, delivered with gusto. Seriously, frontend conference organisers, try to get Hui Jing to speak about CSS at your event—you won’t regret it.

Removing the White Bars in Safari on iPhone X

You could add a bunch of proprietary CSS that Apple just pulled out of their ass.

Or you could make sure to set a background colour on your body element.

I recommend the latter. Because reasons.

Fix Twitter by Jonathan Suh

Make Twitter Great Again:

Fix Twitter is a browser extension to always show “replying to” in replies and threads along with an option to restore the old-school @-mentions.

Web truths: CSS is not real programming | Christian Heilmann

A lot of “CSS is not real programming” arguments are a basic misunderstanding what CSS is there to achieve. If you want full control over and interface and strive for pixel perfection – don’t use it. If you want to build an interface for an inclusive and diverse web, CSS is a great tool.

Christian does a good job of describing the much-misunderstood declarative nature of CSS.

Also:

In any case, belittling people who write CSS and considering them not real developers is arrogant nonsense.

Killing Old Service Workers for the Greater Good – Hackages Blog

Ooh, this is a tricky scenario. If you decide to redirect all URLs (from, say, a www subdomain to no subdomain) and you have a service worker running, you’re going to have a bad time. But there’s a solution here to get the service worker to remove itself.

The server-side specifics are for NGINX but this is also doable with Apache.

Chrome to force .dev domains to HTTPS via preloaded HSTS

Well, I guess it’s time to change all my locally-hosted sites from .dev domains to .test. Thanks, Google.

Mozilla Developer Roadshow - Singapore - YouTube

I had the honour of being invited along to kick off the first leg of Mozilla’s Developer Roadshow in Singapore.

Singapore snacks.

Singapore snacks.

Checked in at Kuan Food Court. One last visit to our friendly neighbourhood food court on the corner — with Jessica map

Checked in at Kuan Food Court. One last visit to our friendly neighbourhood food court on the corner — with Jessica

Checked in at Botanist. with Jessica map

Checked in at Botanist. with Jessica

Checked in at a noodle story. with Jessica map

Checked in at a noodle story. with Jessica

Checked in at Drury Lane. with Jessica map

Checked in at Drury Lane. with Jessica

Wednesday, September 20th, 2017

Singapore snacks.

Singapore snacks.

Checked in at Haron Satay. Wing night! — with Jessica map

Checked in at Haron Satay. Wing night! — with Jessica

map

Checked in at ArtScience Museum. with Jessica

Checked in at Coco Shake Shack. with Jessica map

Checked in at Coco Shake Shack. with Jessica

Checked in at Ah-Tai Hainanese Chicken Rice. with Jessica map

Checked in at Ah-Tai Hainanese Chicken Rice. with Jessica

map

Checked in at Maxwell Fuzhou Oyster Cake. Delicious oyster cake! — with Jessica

Checked in at Roasted Delights map

Checked in at Roasted Delights

Checked in at The Populus Coffee & Food Co.. with Jessica map

Checked in at The Populus Coffee & Food Co.. with Jessica

Tuesday, September 19th, 2017

Listening to @hj_chen talk about CSS layout is a real joy!

Listening to @hj_chen talk about CSS layout is a real joy!

Singapore snacks.

Singapore snacks.

Infusion: An Inclusive Documentation Builder

Two of my favourite things together at last: pattern libraries and service workers. Infusion is a tool for generating pattern libraries that also work offline.

Thinking about it, it makes total sense that a pattern library should be a progressive web app.

Here’s the transcript of a talk I’ve been giving this year on technology, the web, and asking questions:

https://adactio.com/articles/12839

Evaluating Technology

A presentation from the Beyond Tellerrand conference held in Düsseldorf in May 2017. I also presented a version of this talk at An Event Apart, Smashing Conference, Render, Frontend United, and From The Front.

Lor Mee for me.

Lor Mee for me.

Checked in at Tiong Bahru Lor Mee map

Checked in at Tiong Bahru Lor Mee

Checked in at Mavrx Coffee Apothecary. with Jessica map

Checked in at Mavrx Coffee Apothecary. with Jessica

Monday, September 18th, 2017

Singapore snacks.

Singapore snacks.

Bugfixing on the rooftop. (the majesty of Singapore’s skyline goes unheeded because CSS Grid isn’t working right in a print stylesheet)

Bugfixing on the rooftop.

(the majesty of Singapore’s skyline goes unheeded because CSS Grid isn’t working right in a print stylesheet)

Dolmen of light.

Dolmen of light.

Disneypore.

Disneypore.

Dumplings, dumplings, dumplings…

Dumplings, dumplings, dumplings…

Fish ball noodle. 🍜

Fish ball noodle. 🍜

Checked in at The Lokal. with Jessica map

Checked in at The Lokal. with Jessica

Carrot cake. Not carrot. Not cake. But yummy!

Carrot cake. Not carrot. Not cake. But yummy!

Sunday, September 17th, 2017

Tame your Service Worker before your Progressive Web App go into the wild by Maxim Salnikov

There are some great service worker optimisation tips in these slides.

Checked in at Old Airport Road Market & Food Centre. with Jessica map

Checked in at Old Airport Road Market & Food Centre. with Jessica

Checked in at Botanist. with Jessica map

Checked in at Botanist. with Jessica

Checked in at Marina Bay Sands Hotel map

Checked in at Marina Bay Sands Hotel

Checked in at Nylon Coffee Roasters. with Jessica map

Checked in at Nylon Coffee Roasters. with Jessica

Saturday, September 16th, 2017

Singapore swim.

Singapore swim.

Singapore snacks.

Singapore snacks.

Checked in at Smith Street Taps. Beer and satay. map

Checked in at Smith Street Taps. Beer and satay.

Checked in at Yuan Fa Claypot Rice map

Checked in at Yuan Fa Claypot Rice

Checked in at Tian Tian Hainanese Chicken Rice 天天海南鸡饭 map

Checked in at Tian Tian Hainanese Chicken Rice 天天海南鸡饭

map

Checked in at Terminal 1. with Jessica

Friday, September 15th, 2017

Going to Singapore. brb

Thursday, September 14th, 2017

Basic grid layout with fallbacks using feature queries

A really nice example of progressive enhancement: creating a layout with inline-block, then flexbox, then Grid.

Drinking toast.

Drinking toast.

Brighton CodePen Meetup / Wednesday, October 4 6:00 PM - 9:00 PM

There’s going to be a CodePen meetup in Brighton as part of the Brighton Digital Festival. Should be fun! See you there.

Sonic sparklines

I’ve seen some lovely examples of the Web Audio API recently.

At the Material conference, Halldór Eldjárn demoed his Poco Apollo project. It generates music on the fly in the browser to match a random image from NASA’s Apollo archive on Flickr. Brian Eno, eat your heart out!

At Codebar Brighton a little while back, local developer Luke Twyman demoed some of his audio-visual work, including the gorgeous Solarbeat—an audio orrery.

The latest issue of the Clearleft newsletter has some links on sound design in interfaces:

I saw Ruth give a fantastic talk on the Web Audio API at CSS Day this year. It had just the right mixture of code and inspiration. I decided there and then that I’d have to find some opportunity to play around with web audio.

As ever, my own website is the perfect playground. I added an audio Easter egg to adactio.com a while back, and so far, no one has noticed. That’s good. It’s a very, very silly use of sound.

In her talk, Ruth emphasised that the Web Audio API is basically just about dealing with numbers. Lots of the examples of nice usage are the audio equivalent of data visualisation. Data sonification, if you will.

I’ve got little bits of dataviz on my website: sparklines. Each one is a self-contained SVG file. I added a script element to the SVG with a little bit of JavaScript that converts numbers into sound (I kind of wish that the script were scoped to the containing SVG but that’s not the way JavaScript in SVG works—it’s no different to putting a script element directly in the body). Clicking on the sparkline triggers the sound-playing function.

It sounds terrible. It’s like a theremin with hiccups.

Still, I kind of like it. I mean, I wish it sounded nicer (and I’m open to suggestions on how to achieve that—feel free to fork the code), but there’s something endearing about hearing a month’s worth of activity turned into a wobbling wave of sound. And it’s kind of fun to hear how a particular tag is used more frequently over time.

Anyway, it’s just a silly little thing, but anywhere you spot a sparkline on my site, you can tap it to hear it translated into sound.

Deploying ES2015+ Code in Production Today — Philip Walton

The reality is transpiling and including polyfills is quickly becoming the new norm. What’s unfortunate is this means billions of users are getting trillions of bytes sent over the wire unnecessarily to browsers that would have been perfectly capable of running the untranspiled code natively.

Phil has a solution: serve up your modern JavaScript using script type="module" and put your transpiled fallback in script nomodule.

Most developers think of <script type="module"> as way to load ES modules (and of course this is true), but <script type="module"> also has a more immediate and practical use-case—loading regular JavaScript files with ES2015+ features and knowing the browser can handle it!

Full-Stack Developers | Brad Frost

In my experience, “full-stack developers” always translates to “programmers who can do frontend code because they have to and it’s ‘easy’.” It’s never the other way around. The term “full-stack developer” implies that a developer is equally adept at both frontend code and backend code, but I’ve never in my personal experience witnessed anyone who truly fits that description.

Is there any value in people who cannot write JavaScript?

When every new website on the internet has perfect, semantic, accessible HTML and exceptionally executed, accessible CSS that works on every device and browser, then you can tell me that these languages are not valuable on their own. Until then we need to stop devaluing CSS and HTML.

I couldn’t agree more.

Wednesday, September 13th, 2017

Beany beans and greeny greens, all from the garden.

Beany beans and greeny greens, all from the garden.

A bounty of borlotti beans.

A bounty of borlotti beans.

Jeremy Keith - Closing Keynote: Evaluating Technology on Vimeo

Here’s the closing keynote I gave at Frontend Conference in Zurich a couple of weeks back.

We work with technology every day. And every day it seems like there’s more and more technology to understand: graphic design tools, build tools, frameworks and libraries, not to mention new HTML, CSS and JavaScript features landing in browsers. How should we best choose which technologies to invest our time in? When we decide to weigh up the technology choices that confront us, what are the best criteria for doing that? This talk will help you evaluate tools and technologies in a way that best benefits the people who use the websites that we are designing and developing. Let’s take a look at some of the hottest new web technologies like service workers and web components. Together we will dig beneath the hype to find out whether they will really change life on the web for the better.

Tuesday, September 12th, 2017

The Human World of the Upper Paleolithic

Perhaps the most permanent action that any human being has accomplished in the history of our species is when one of our ancestors placed this cave bear skull on a rock, where still it sits, tens of thousands of years later.

An astonishing dose of perspective delivered via a lovely bit of hypertext by Matt.

Party Discipline | Tor.com

There are some delightfully dark touches to this Cory Doctorow coming-of-age near-future short story of high school students seizing the means of production.

Teaching and Brainstorming Inclusive Technical Metaphors - Features - Source: An OpenNews project

Some great ideas here about using metaphors when explaining technical topics.

I really like these four guidelines for good metaphors:

  • Complete
  • Memorable
  • Inclusive
  • Accessible

V6: The Archive | Rob Weychert

Rob has redesigned his site and it’s looking lovely. Here’s the first part of a three-part series on the rationale behind the relaunch:

I don’t pretend everything I do or say online is worthy of preservation. But while I’m still breathing, I want to be the one who decides what gets preserved and what doesn’t. And I want it all to be available in one place. Owning and operating my own site is the only way.

Hell, yeah!

Monday, September 11th, 2017

So You Want To Be a Senior Developer? | CSS-Tricks

I like Chris’s list of criteria for the nebulous role of senior developer:

  • A senior front end developer has experience.
  • A senior front-end developer has a track record of good judgment.
  • A senior developer has positive impact beyond the code.
  • A senior developer is helpful, not all-knowing.
  • A senior front-end developer is a force multiplier.

Web Matters

An organisation has formed here in the UK as a response to the increasing threats to the web:

We are called to come together in response to growing political and social uncertainty, direct threats to the profession, and a lack of vocal and proactive representation to organise as a representative, independent, and politically responsible industry body.

The inaugural AGM is happening in Edinburgh tomorrow. Get along to that if you can. Otherwise, there’s always Slack.

I like their manifesto; let’s put it to the test-o.

No space left on device – running out of Inodes – Ivan Kuznetsov

This blog post saved my ass—the Huffduffer server was b0rked and after much Duck-Duck-Going I found the answer here.

I’m filing this away for my future self because, as per Murphy’s Law, I’m pretty sure I’ll be needing this again at some point

The Coral Project

A Mozilla-backed project for journalists, publishers, and online communities. The Talk part of it is aiming to fix online comments. The Washington Post is going to try it out.

Betting on the Web

Along the lines of John’s recent post, Henrik makes the business case for progressive web apps.

He also points out how they can be much better than native apps for controlling hardware.

They can be up and running in a fraction of the time whether or not they were already “installed” and unlike “apps” can be saved as an app on the device at the user’s discretion!

Essentially they’re really great for creating “ad hoc” experiences that can be “cold started” on a whim nearly as fast as if it were already installed.

Why strong sound design is critical to successful products - O’Reilly Media

From Designing Products with Sound by Amber Case and Aaron Day:

Sound eases cognitive burdens.

Sound is also a powerful brand differentiator.

Sound is emotional.

Finally, sound impacts productivity.

But also:

Not every product needs sound design.

[FoR&AI] The Seven Deadly Sins of Predicting the Future of AI – Rodney Brooks

Most technologies are overestimated in the short term. They are the shiny new thing. Artificial Intelligence has the distinction of having been the shiny new thing and being overestimated again and again, in the 1960’s, in the 1980’s, and I believe again now.

Rodney Brooks is not bullish on the current “marketing” of Artificial Intelligence. Riffing on Arthur C. Clarke’s third law, he points out that AI—as currently described—is indistinguishable from magic in all the wrong ways.

This is a problem we all have with imagined future technology. If it is far enough away from the technology we have and understand today, then we do not know its limitations. It becomes indistinguishable from magic.

Watch out for arguments about future technology which is magical. It can never be refuted. It is a faith-based argument, not a scientific argument.

Growing role of artificial intelligence in our lives is ‘too important to leave to men’

Here’s a snowclone I can get behind: X is too important to be left to men.

I am convinced that it is not the girls that must change, but rather society’s view of “computing” and the whole culture of the computing industry.

With the advent of artificial intelligence, this is about to get really serious. There are worrying signs that the world of big data and machine learning is even more dominated by men than computing in general. This means that the people writing the algorithms for software that will control many automated aspects of our daily lives in the future are mainly young, white men.

Friday, September 8th, 2017

Even Racists Got the Blues – The Geeky Gaeilgeoir

The perils of self-translation.

I’m often baffled by the number of people who seem to think that you can translate from one language to another simply by pulling the words of one language from a dictionary and plugging them into the syntax of the other. It just doesn’t work that way, friends.

Read to the end for a wonderfully delicious twist in the tale.

Amadán.

A Progressive Web Approach to a Networked Economy - Web Directions

John makes the point that unless you’re one of the big, big players, your native app is really going to struggle to find an audience. But that’s okay—a progressive web app might be exactly what you need.

In short, using native apps as a path to reaching a large number of potential customers and benefitting from crucial network effects is close to impossible.

But, in the meantime, the Web has responded to the very significant impact that native apps had on user behaviour.

For me, the strength of the web has never been about how it can help big companies—it’s about how it can amplify and connect the niche players.

UI Sounds: From Zero To Hero | Icons8 Blog

Following on from Ruth’s piece, here are some more thoughts on sound in UI from Roman Zimarev, the creator of icon sounds.

He makes a distinction between notification sounds and interaction sounds, as well as talking about sound identity in branding.

A Simple Design Flaw Makes It Astoundingly Easy To Hack Siri And Alexa

This article about a specific security flaw in voice-activated assistants raises a bigger issue:

User-friendliness is increasingly at odds with security.

This is something I’ve been thinking about for a while. “Don’t make me think” is a great mantra for user experience, but a terrible mantra for security.

Our web browsers easily and invisibly collect cookies, allowing marketers to follow us across the web. Our phones back up our photos and contacts to the cloud, tempting any focused hacker with a complete repository of our private lives. It’s as if every tacit deal we’ve made with easy-to-use technology has come with a hidden cost: our own personal vulnerability. This new voice command exploit is just the latest in a growing list of security holes caused by design, but it is, perhaps, the best example of Silicon Valley’s widespread disregard for security in the face of the new and shiny.

Thursday, September 7th, 2017

Compilers are the New Frameworks - tomdale.net

If you’re interested in predicting the future of the web, just look at what high-performance native systems look like, then figure out how we can apply those ideas in the browser.

I like that Tom encourages learning from native, but not at the expense of the web (hint, hint, Google devrels encouraging slavish imitation of native apps in progressive web apps with no regard for URLs).

Our job now is figuring out how to adapt the ideas of high-performance native code while preserving what makes the web great: URLs, instant loading, and a security model that allows us to forget that we run thousands and thousands of untrusted scripts every day.

New A List Apart wants you! · An A List Apart Article

We’re getting rid of advertisers and digging back to our roots: community-based, community-built, and determinedly non-commercial.

I approve!

A List Apart has given me so, so much over the years that becoming a supporter is quite literally the least I can do.

And so can you!

The Web in 2050 · Jacques Mattheij

This is the way the web ends
This is the way the web ends
This is the way the web ends
Not with a bang but a duopoly.

The Uncomfortable - a collection of deliberately inconvenient objects

These are ingenious. I think the chain fork is my favourite, but the uncomfortable broom is pretty great too.

Then there’s the inflatable doorknob.

Now and Then Cobh

Time-shifted photographs of my hometown in Ireland.

Wednesday, September 6th, 2017

Write.as — Spread your ideas

This looks like a really nice writing interface. It currently exports to Medium, Tumblr, and Twitter …but it would be really nice if it could post to a micropub endpoint.

The Law of Least Power and Defunct StackOverflow Answers - Web Directions

I love John’s long-zoom look at web development. Step back far enough and you can start to see the cycles repeating.

Underneath all of these patterns and practices and frameworks and libraries are core technologies. And underlying principles.

These are foundations – technological, and of practice – that we ignore, overlook, or flaunt at our peril.

Form Validation with Web Audio | CSS-Tricks

An interesting idea from Ruth—using subtle sounds to augment inline form validation.

There aren’t any extremely established best practices for this stuff. The best we can do is make tasteful choices and do user research. Which is to say, the examples in this post are ideas, not gospel.

Tuesday, September 5th, 2017

thebaer/MMRA: Make Medium Readable Again — a browser extension

I’ve gotten a little tired of showing up to a Medium-powered site on a non-medium.com domain and getting badgered to Sign Up! or Get Updates! when I’m already a Medium user.

A Chrome extension to Make Medium Readable Again by:

  • Keeping the top navigation bar from sticking around
  • Hiding the bottom “Get Updates” bar completely
  • (Optionally) hiding the clap / share bar
  • (Optionally) loading all post images up front, instead of lazy loading as you scroll

Shame there isn’t a mobile version to get rid of the insulting install-our-app permabutton.

From blockchain to drones, we need to stop obsessing about tech megatrends | WIRED UK

Perhaps the blockchain is the technology equivalent of the panda. You hear an awful lot about it without ever being clear what exactly it’s for and why we should care if it disappears.

Russell Davies on the megafauna of technology.

The other big hitters are probably drones, robots, AI and self-driving cars. It used to be smartphones and 3D printing, but they’ve become too ubiquitous and banal. You can’t be charismatic if you’re everywhere.

AMPersand. — Ethan Marcotte

I’ve had a few conversations with members of the Google AMP team, and I do believe they care about making the web better. But given how AMP pages are privileged in Google’s search results, the net effect of the team’s hard, earnest work comes across as a corporate-backed attempt to rewrite HTML in Google’s image. Now, I don’t know if these new permutations of AMP will gain traction among publishers. But I do know that no single company should be able to exert this much influence over the direction of the web.

.

.

A Man in a Hurry: Claude Shannon’s New York Years - IEEE Spectrum

Of course, information existed before Shannon, just as objects had inertia before Newton. But before Shannon, there was precious little sense of information as an idea, a measurable quantity, an object fitted out for hard science. Before Shannon, information was a telegram, a photograph, a paragraph, a song. After Shannon, information was entirely abstracted into bits. The sender no longer mattered, the intent no longer mattered, the medium no longer mattered, not even the meaning mattered: A phone conversation, a snatch of Morse telegraphy, a page from a detective novel were all brought under a common code. Just as geometers subjected a circle in the sand and the disk of the sun to the same laws, and as physicists subjected the sway of a pendulum and the orbits of the planets to the same laws, Claude Shannon made our world possible by getting at the essence of information.

Monday, September 4th, 2017

Material Conference 2017: Psychology and the Web - Amber Wilson - YouTube

Here’s Amber’s great talk from the great Material conference last month in Iceland.

Amber Wilson worked in the field of Psychology for many years and is now a budding Web developer at a design agency in Brighton. New to Web development, she is continually eager to improve her skills.

(The silhouettes of Jessica, me, and Joschi in the front row make it look like Mystery Science Theater 3000.)

Saturday, September 2nd, 2017

What Blade Runner is about, and the Narcissist Creator Razor ( 1 Sep., 2017, at Interconnected)

George Lucas, Ted Chiang, Greg Egan, Stanley Kubrick, Tom Stoppard, William Shakespeare, and Ridley Scott are all part of Matt’s magnificent theory that the play is the thing.

Rosencrantz and Guildenstern are replicants.

Characters look like people, except they exist for only the duration of a movie — only while they are necessary. They come with backstory and memories fully established but never experienced, partly fabricated for the job and partly drawn from real people known by the screenwriter. At the end, they vanish, like tears in rain.

Reading The Dream Machine: J.C.R Licklider And The Revolution That Made Computing Possible by M. Mitchell Waldrop.

Friday, September 1st, 2017

Getting ready to speak at Frontend Conference in Zurich in one hour.

You can watch along here:

https://www.frontendconf.ch/live

John Lanchester reviews ‘The Attention Merchants’ by Tim Wu, ‘Chaos Monkeys’ by Antonio García Martínez and ‘Move Fast and Break Things’ by Jonathan Taplin · LRB 17 August 2017

Triple the hand-wringing in this combined review of three books:

  • The Attention Merchants: From the Daily Newspaper to Social Media, How Our Time and Attention Is Harvested and Sold by Tim Wu,
  • Chaos Monkeys: Inside the Silicon Valley Money Machine by Antonio García Martínez, and
  • Move Fast and Break Things: How Facebook, Google and Amazon have Cornered Culture and What It Means for All of Us by Jonathan Taplin.

What this means is that even more than it is in the advertising business, Facebook is in the surveillance business. Facebook, in fact, is the biggest surveillance-based enterprise in the history of mankind. It knows far, far more about you than the most intrusive government has ever known about its citizens. It’s amazing that people haven’t really understood this about the company. I’ve spent time thinking about Facebook, and the thing I keep coming back to is that its users don’t realise what it is the company does. What Facebook does is watch you, and then use what it knows about you and your behaviour to sell ads. I’m not sure there has ever been a more complete disconnect between what a company says it does – ‘connect’, ‘build communities’ – and the commercial reality.

Categories land in the Web App Manifest | Aaron Gustafson

Manifest files can have categories now. Time to update those JSON files.

Yes, That Web Project Should Be a PWA · An A List Apart Article

A fantastic piece by Aaron who—once again—articulates what I’ve been thinking:

Your site—every site—should be a PWA.

He clearly explains the building blocks of progressive web apps—HTTPS, a manifest file, and a service worker—before describing different scenarios for different kinds of sites:

  • Informational
  • Periodical
  • Transactional
  • Social
  • Software
  • Institutional

Progressive Web Apps may seem overly technical or beyond the needs of your project, but they’re really not. They’re just a shorthand for quality web experiences—experiences that can absolutely make a difference in our users’ lives.

Highly recommended!

Progressively Worse Apps

This article makes a good point about client-rendered pages:

Asynchronously loaded page elements shift click targets, resulting in a usability nightmare.

…but this has nothing, absolutely nothing to do with progressive web apps.

More fuel for the fire of evidence that far too many people think that progressive web apps and single page apps are one and the same.

Checked in at Papiersaal. Frontend Conference map

Checked in at Papiersaal. Frontend Conference

A New bradfrost.com! | Brad Frost

I’m doubling down on owning my own content, so I’m excited to have a less-crusty home for it all.

It’s fun! In a world where even sites that aren’t Medium dot com are looking like Medium dot com, I’m excited to try something different.