Archive: October, 2019

175

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

map

Thursday, October 31st, 2019

Indy maps

Remember when I wrote about adding travel maps to my site at the recent Indie Web Camp Brighton? I must confess that the last line I wrote was an attempt to catch a fish from the river of the lazy web:

It’s a shame that I can’t use the lovely Stamen watercolour tiles for these static maps though.

In the spirit of Cunningham’s Law, I was hoping that somebody was going to respond with “It’s totally possible to use Stamen’s watercolour tiles for static maps, dumbass—look!” (to which my response would have been “thank you very much!”).

Alas, no such response was forthcoming. The hoped-for schooling never forthcame.

Still, I couldn’t quite let go of the idea of using those lovely watercolour maps somewhere on my site. But I had decided that dynamic maps would have been overkill for my archive pages:

Sure, it looked good, but displaying the map required requests for a script, a style sheet, and multiple map tiles.

Then I had a thought. What if I keep the static maps on my archive pages, but make them clickable? Then, on the other end of that link, I can have the dynamic version. In other words, what if I had a separate URL just for the dynamic maps?

These seemed like a good plan to me, so while I was travelling by Eurostar—the only way to travel—back from the lovely city of Antwerp where I had been speaking at Full Stack Europe, I started hacking away on making the dynamic maps even more dynamic. After all, now that they were going to have their own pages, I could go all out with any fancy features I wanted.

I kept coming back to my original goal:

I was looking for something more like the maps in Indiana Jones films—a line drawn from place to place to show the movement over time.

I found a plug-in for Leaflet.js that animates polylines—thanks, Iván! With a bit of wrangling, I was able to get it to animate between the lat/lon points of whichever archive section the map was in. Rather than have it play out automatically, I also added a control so that you can start and stop the animation. While I was at it, I decided to make that “play/pause” button do something else too. Ahem.

If you’d like to see the maps in action, click the “play” button on any of these maps:

You get the idea. It’s all very silly really. It’s right up there with the time I made my sparklines playable. But that’s kind of the point. It’s my website so I can do whatever I want with it, no matter how silly.

First of all, the research department for adactio.com (that’s me) came up with the idea. Then that had to be sold in to upper management (that’s me too). A team was spun up to handle design and development (consisting of me and me). Finally, the finished result went live thanks to the tireless efforts of the adactio.com ops group (that would be me). Any feedback should be directed at the marketing department (no idea who that is).

inessential: You Choose: Follow-Up

It came to my attention after writing my blog post about how we choose the web we want that the pessimism is about not being able to make a living from blogging.

Brent gives an in-depth response to this concern about not making a living from blogging. It’s well worth a read. I could try to summarise it, but I think it’s better if you read the whole thing for yourself.

It’s a Halloween Homebrew Website Club at @Clearleft this evening from 6pm to 7:30pm!

You can frighten Mark Zuckerberg and Jack Dorsey by having your own website.

Replying to a tweet from @MoritzGiessmann

I’ll be in The Joker this evening for hot wings and craft beer, from about 8pm.

There’s also Homebrew Website Club at @68MiddleSt from 6pm to 7:30pm.

Neither are particularly Halloweeny though.

Replying to a tweet from @adactio

Oh, wait, I see: that is expected behaviour. But a transparent border shouldn’t render (but does create an extra pixel of space for the gradient to begin repeating …got it!).

Replying to a tweet from @jaffathecake

If the ‘border’ is actually the gradient repeating …why does changing the border colour actually change the border colour?

border-bottom: 1px solid red;, for example

Wednesday, October 30th, 2019

Checked in at Jolly Brewer. 🎶 — with Jessica map

Checked in at Jolly Brewer. 🎶 — with Jessica

Interactive web animation with SVG by Cassie Evans | CSSCAMP 2019 - YouTube

Cassie’s excellent talk on SVG animation is well worth your time.

Interactive web animation with SVG by Cassie Evans | CSSCAMP 2019

Replying to a tweet from @Minette_78

+1

I was revisiting this yesterday and thought of you:

https://www.nicolefenton.com/words-as-material/

Replying to a tweet from @PyroHornet

Breitbart isn’t a news source.

That’s kinda the point.

Replying to a tweet from @PyroHornet

That may be the worst take I have ever heard.

inessential: You Choose

You can entertain, you can have fun, you can push the boundaries of the form, if you want to. Or you can just write about cats as you develop your voice. Whatever you want!

I couldn’t agree more with this sentiment:

You choose the web you want. But you have to do the work.

A lot of people are doing the work. You could keep telling them, discouragingly, that what they’re doing is dead. Or you could join in the fun.

Tuesday, October 29th, 2019

Replying to a tweet from @briankardell

The spec is literally the reason why microformats2 didn’t end up using data-* attributes. It isn’t “advice” in the spec; it is the spec. It specifies how data-* attributes should and shouldn’t be used.

Replying to a tweet from @cameronmoll

Or in the case of Facebook legitimising Breitbart…

Persuade your team to put commitment above alignment and trust it’ll end up being the alt-right decision.

Ba-doom tish!

Replying to a tweet from @briankardell

What thread?

Periodic background sync

Yesterday I wrote about how much I’d like to see silent push for the web:

I’d really like silent push for the web—the ability to update a cache with fresh content as soon as it’s published; that would be nifty! At the same time, I understand the concerns. It feels more powerful than other permission-based APIs like notifications.

Today, John Holt Ripley responded on Twitter:

hi there, just read your blog post about Silent Push for acthe web, and wondering if Periodic Background Sync would cover a few of those use cases?

Periodic background sync looks very interesting indeed!

It’s not the same as silent push. As the name suggests, this is about your service worker waking up periodically and potentially fetching (and caching) fresh content from the network. So the service worker is polling rather than receiving a push. But I’ll take it! It’s definitely close enough for the kind of use-cases I’ve been thinking about.

Interestingly, periodic background sync also ties into the other part of what I was writing about: permissions. I mentioned that adding a site the home screen could be interpreted as a signal to potentially allow more permissions (or at least allow prompts for more permissions).

Well, Chromium has a document outlining metrics for attempting to gauge site engagement. There’s some good thinking in there.

Nicole Fenton | Words as Material

If we want design to communicate, we need to communicate in the design process.

I might get that framed.

Using the Platform | TimKadlec.com

Tim ponders the hard work that goes into adding standards to browsers, giving us a system with remarkable longevity.

So much care and planning has gone into creating the web platform, to ensure that even as new features are added, they’re added in a way that doesn’t break the web for anyone using an older device or browser. Can you say the same for any framework out there?

His parting advice is perfect:

Use the platform until you can’t, then augment what’s missing. And when you augment, do so with care because the responsibility of ensuring the security, accessibility, and performance that the platform tries to give you by default now falls entirely on you.

Using ES6 modules for progressive enhancement | Blog | Decade City

It looks like modules could be a great way to serve modern JavaScript to modern browsers, and serve polyfills or older code to older browsers.

Replying to a tweet from @danbri

I would like to see it done without data-* attributes.

(But this isn’t about what I would like—it’s about implementing standards correctly.)

HTML isn’t short of existing extension mechanisms: microdata, class, etc.

Replying to a tweet from @ade_oshineye

…these attributes are not a generic extension mechanism for publicly-usable metadata.

https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes

Wondering if I know anyone on the Google search team I can chat to about this abuse of data-* attributes:

https://developers.google.com/search/reference/robotsmetatag#data-nosnippet-attr

(this usage is explicitly forbidden in HTML).

Official Google Webmaster Central Blog [EN]: More options to help websites preview their content on Google Search

Google’s pissing over HTML again, but for once, it’s not by making up rel values:

A new way to help limit which part of a page is eligible to be shown as a snippet is the “data-nosnippet” HTML attribute on span, div, and section elements.

This is a direct contradiction of how data-* attributes are intended to be used:

…these attributes are intended for use by the site’s own scripts, and are not a generic extension mechanism for publicly-usable metadata.

Replying to a tweet from @johnholtripley

Indeed it would! Thanks for that!

Happy 50th birthday, internet née ARPANET!

LO

“Talked to SRI Host to Host”

— IMP log, 1969-10-29 22:30, Charles S. Kline, Boelter Hall, UCLA

Monday, October 28th, 2019

Replying to a tweet from @hello_anwen

Congratulations!!

Replying to a tweet from @Wordridden

What!?

We’re having enchiladas!?

Woo-hoo!

Silent push for the web

After Indie Web Camp in Berlin last year, I wrote about Seb’s nifty demo of push without notifications:

While I’m very unwilling to grant permission to be interrupted by intrusive notifications, I’d be more than willing to grant permission to allow a website to silently cache timely content in the background. It would be a more calm technology.

Phil Nash left a comment on the Medium copy of my post explaining that Seb’s demo of using the Push API without showing a notification wouldn’t work for long:

The browsers allow a certain number of mistakes(?) before they start to show a generic notification to say that your site sent a push notification without showing a notification. I believe that after ~10 or so notifications, and that’s different between browsers, they run out of patience.

He also provided me with the name to describe what I’m after:

You’re looking for “silent push” as are many others.

Silent push is something that is possible in native apps. It isn’t (yet?) available on the web, presumably because of security concerns.

It’s an API that would ripe for abuse. I mean, just look at the mess we’ve made with APIs like notifications and geolocation. Sure, they require explicit user opt-in, but these opt-ins are seen so often that users are sick of seeing them. Silent push would be one more permission-based API to add to the stack of annoyances.

Still, I’d really like silent push for the web—the ability to update a cache with fresh content as soon as it’s published; that would be nifty! At the same time, I understand the concerns. It feels more powerful than other permission-based APIs like notifications.

Maybe there could be another layer of permissions. What if adding a site to your home screen was the first step? If a site is running on HTTPS, has a service worker, has a web app manifest, and has been added to the homescreen, maybe then and only then should it be allowed to prompt for permission to do silent push.

In other words, what if certain very powerful APIs were only available to progressive web apps that have successfully been added to the home screen?

Frankly, I’d be happy if the same permissions model applied to web notifications too, but I guess that ship has sailed.

Anyway, all this is pure conjecture on my part. As far as I know, silent push isn’t on the roadmap for any of the browser vendors right now. That’s fair enough. Although it does annoy me that native apps have this capability that web sites don’t.

It used to be that there was a long list of features that only native apps could do, but that list has grown shorter and shorter. The web’s hare is catching up to native’s tortoise.

Manicule.

Manicule.

Sunday, October 27th, 2019

Tune Out USUCK FM and Free Yourself to Write – Chip on Your Shoulder

Freewriting—beating your inner critic by lowering your standards:

The trick is to type so fast that the clacking of the keys drowns out that voice.

A World We Built to Burn | emptywheel

The climate crisis as technical debt:

What we’re dealing with is hundreds of years of something that software world calls technical debt. Technical debt is the shortcuts and trade-offs engineers use to get something done either cheaper or in less time, which inevitably creates the need to fix systems later, often at great cost or difficulty.

Some technical debt is understood up front, some comes from builders being ignorant of the system they are working in. Most of our planet’s infrastructure is mired in huge amounts of technical debt, most of which we didn’t know we were signing up for at the time, some of which we’re just incurring recklessly as we go along, unable to face the scale of the problem and pushing it off on the next generation.

Saturday, October 26th, 2019

Checked in at Brussels Central Station (Station Brussel-Centraal). with Jessica map

Checked in at Brussels Central Station (Station Brussel-Centraal). with Jessica

Catch you later, Antwerp.

Catch you later, Antwerp.

Friday, October 25th, 2019

Replying to a tweet from @Una

  • Kindred by Octavia Butler
  • The Fifth Season by N.K. Jemisin
  • Ancillary Justice by Ann Leckie
  • The Calculating Stars by Mary Robinette Kowal
  • The Power by Naomi Alderman
  • The Future Home Of The Living God by Louise Erdrich

Replying to a tweet from @sebdedeyne

Thank you, Sebastian! Here are some links to the resources mentioned:

https://adactio.com/journal/14697

Picture 1 Picture 2
map

Checked in at Grand Café De Rooden Hoed. with Jessica

Replying to a tweet from @orionrush

I think you’re conflating hamburger menus with progressive disclosure: one is a subset of the other. Saying any progressive disclosure pattern is basically a hamburger menu is like saying all animals are basically fish. 🍔 🦒 🦔 🦓 🐟

Offline Page Descriptions | Erik Runyon

Here’s a nice example of showing pages offline. It’s subtly different from what I’m doing on my own site, which goes to show that there’s no one-size-fits-all recipe when it comes to offline strategies.

Latest Firefox Brings Privacy Protections Front and Center Letting You Track the Trackers - The Mozilla Blog

I really like this latest addition in Firefox to show how many tracking scripts are being blocked. I think it’s always good to make the invisible visible (one of the reasons why I like RequestMap so much).

The difference between HTML, CSS, and JavaScript | Zell Liew

HTML lets you create the structure of a website.

CSS lets you make the website look nice.

JavaScript lets you change HTML and CSS. Because it lets you change HTML and CSS, it can do tons of things.

Replying to a tweet from @orionrush

If you’re saying that a hamburger icon is a common convention, the data from usability testing disagrees.

But good point about the positioning of the close icon—I’ve fixed that now (the open/close trigger is persistent). Thanks for that!

Why Are Accessible Websites so Hard to Build? | CSS-Tricks

I reckon a lot of websites have bad accessibility not because folks don’t care, but because they don’t know there’s an issue in the first place.

The headline is begging the question (I don’t think accessible websites are so hard to build), but I agree with Robin’s idea:

What if our text editors caught accessibility issues and showed them to us during development?

This is something that Hidde has been talking about recently too, looking at content management systems.

Thursday, October 24th, 2019

Replying to a tweet from @erunyon

Oh, I thought that was loooong fixed!

Design muscles

Look. Observe. See.

Picture 1 Picture 2 Picture 3 Picture 4

Seafood feast in Antwerp.

Replying to a tweet from @Heilemann

This is the work of the graduates of the Plantin Institute of Typography:

https://plantininstitute.be/

Picture 1 Picture 2 Picture 3 Picture 4

I. like. big. type and I cannot lie…

Picture 1 Picture 2 Picture 3

Exploring the Museum Plantin-Moretus in Antwerp.

Markup.

Markup.

Checked in at Museum Plantin-Moretus / Prentenkabinet (Museum Plantin-Moretus | Prentenkabinet). with Jessica map

Checked in at Museum Plantin-Moretus / Prentenkabinet (Museum Plantin-Moretus | Prentenkabinet). with Jessica

Checked in at Caffe Mundi. with Jessica map

Checked in at Caffe Mundi. with Jessica

Replying to a tweet from @andybudd

A Mind At Play: How Claude Shannon Invented The Information Age by Jimmy Soni and Rob Goodman. I picked it up that time we were in Ada’s Technical Bookstore together in Seattle—I can bring it into the Clearleft studio on Monday if you like.

Wednesday, October 23rd, 2019

Reading 1666: Plague, War, and Hellfire by Rebecca Rideal.

Replying to a tweet from @andybudd

Citation needed.

Replying to a post on adactio.com

More on those ideas here:

https://indieweb.org

It would be fun to have an Indie Web Camp in Dublin some time!

Replying to a tweet from @zonua

It’s because I want to own my own data. I consider my site to be the canonical link and the Twitter version to be the copy. I include links in both directions.

Replying to a post on adactio.com

You can do it with Wordpress too:

https://indieweb.org/WordPresswithBridgy

Replying to a tweet from @zonua

I use the Twitter API to post from my own website (and include a link back):

https://adactio.com/journal/6826

Going to Antwerp. brb

Unexpected @Clearleft product placement from @MaryRobinette.

Unexpected @Clearleft product placement from @MaryRobinette.

Replying to a tweet from @stubbornella

Ah, right!

Tuesday, October 22nd, 2019

Replying to a tweet from @stubbornella

Better support server-side rendering or better support rehydration?

( Feels like browsers have done a good job of supporting server-side rendering since http://info.cern.ch/hypertext/WWW/TheProject.html )

203221 – Web Share API: should prefer URL to text when both available

That unusual behaviour I wrote about with the Web Share API in Safari on iOS is now officially a bug—thanks, Tess!

Replying to a tweet from @wordswithamanda

Awwww! ❤️

Monday, October 21st, 2019

Indy web

It was Indie Web Camp Brighton on the weekend. After a day of thought-provoking discussions, I thoroughly enjoyed spending the second day tinkering on my website.

For a while now, I’ve wanted to add maps to my monthly archive pages (to accompany the calendar heatmaps I added at a previous Indie Web Camp). Whenever I post anything to my site—a blog post, a note, a link—it’s timestamped and geotagged. I thought it would be fun to expose that in a glanceable way. A map seems like the right medium for that, but I wanted to avoid the obvious route of dropping a load of pins on a map. Instead I was looking for something more like the maps in Indiana Jones films—a line drawn from place to place to show the movement over time.

I talked to Aaron about this and his advice was that a client-side JavaScript embedded map would be the easiest option. But that seemed like overkill to me. This map didn’t need to be pannable or zoomable; just glanceable. So I decided to see if how far I could get with a static map. I timeboxed two hours for it.

After two hours, I admitted defeat.

I was able to find the kind of static maps I wanted from Mapbox—I’m already using them for my check-ins. I could even add a polyline, which is exactly what I wanted. But instead of passing latitude and longitude co-ordinates for the points on the polyline, the docs explain that I needed to provide …cur ominous thunder and lightning… The Encoded Polyline Algorithm Format.

Go to that link. I’ll wait.

Did you read through the eleven steps of instructions? Did you also think it was a piss take?

  1. Take the initial signed value.
  2. Multiply it by 1e5.
  3. Convert that decimal value to binary.
  4. Left-shift the binary value one bit.
  5. If the original decimal value is negative, invert this encoding.
  6. Break the binary value out into 5-bit chunks.
  7. Place the 5-bit chunks into reverse order.
  8. OR each value with 0x20 if another bit chunk follows.
  9. Convert each value to decimal.
  10. Add 63 to each value.
  11. Convert each value to its ASCII equivalent.

This was way beyond my brain’s pay grade. But surely someone else had written the code I needed? I did some Duck Duck Going and found a piece of PHP code to do the encoding. It didn’t work. I Ducked Ducked and Went some more. I found a different piece of PHP code. That didn’t work either.

At this point, my allotted time was up. If I wanted to have something to demo by the end of the day, I needed to switch gears. So I did.

I used Leaflet.js to create the maps I wanted using client-side JavaScript. Here’s the JavaScript code I wrote.

It waits until the page has finished loading, then it searches for any instances of the h-geo microformat (a way of encoding latitude and longitude coordinates in HTML). If there are three or more, it generates a script element to pull in the Leaflet library, and a corresponding style element. Then it draws the map with the polyline on it. I ended up using Stamen’s beautiful watercolour map tiles.

Had some fun at Indie Web Camp Brighton on the weekend messing around with @Stamen’s lovely watercolour map tiles. (I was trying to create Indiana Jones style travel maps for my site …a different kind of Indy web.)

That’s what I demoed at the end of the day.

But I wasn’t happy with it.

Sure, it looked good, but displaying the map required requests for a script, a style sheet, and multiple map tiles. I made sure that it didn’t hold up the loading of the rest of the page, but it still felt wasteful.

So after Indie Web Camp, I went back to investigate static maps again. This time I did finally manage to find some PHP code for encoding lat/lon coordinates into a polyline that worked. Finally I was able to construct URLs for a static map image that displays a line connecting multiple points with a line.

I’ve put this maps on any of the archive pages that also have calendar heat maps. Some examples:

If you go back much further than that, the maps start to trail off. That’s because I wasn’t geotagging everything from the start.

I’m pretty happy with the final results. It’s certainly far more responsible from a performance point of view. Oh, and I’ve also got the maps inside a picture element so that I can swap out the tiles if you switch to dark mode.

It’s a shame that I can’t use the lovely Stamen watercolour tiles for these static maps though.

Replying to a tweet from @cassiecodes

You got this!

Had some fun at Indie Web Camp Brighton on the weekend messing around with @Stamen’s lovely watercolour map tiles. (I was trying to create Indiana Jones style travel maps for my site …a different kind of Indy web.)

Had some fun at Indie Web Camp Brighton on the weekend messing around with @Stamen’s lovely watercolour map tiles.

(I was trying to create Indiana Jones style travel maps for my site …a different kind of Indy web.)

Sunday, October 20th, 2019

Replying to a tweet from @hankchizljaw

See you there!

Own Your Content on Social Media Using the IndieWeb—zachleat.com

A terrific—and fun!—talk from Zach about site deaths, owning your own content, and the indie web.

Oh, and he really did create MySpaceBook for the talk.

Saturday, October 19th, 2019

Kicking off Indie Web Camp Brighton!

Kicking off Indie Web Camp Brighton!

Friday, October 18th, 2019

Reading The Calculating Stars by Mary Robinette Kowal.

Quitting Analytics

What over a decade of number-crunching analytics has taught me is that spending an hour writing, sharing, or helping someone is infinitely more valuable than spending that hour swimming through numbers. Moreover, trying to juice the numbers almost invariably divorces you from thinking about customers and understanding people. On the surface, it seems like a convenient proxy, but it’s not. They’re just numbers. If you’re searching for business insights, talking to real people beats raw data any day. It’s not as convenient, but when is anything worth doing convenient?

Planning this weekend’s Indie Web Camp Brighton. Feel free to drop in any time over the weekend: https://indieweb.org/2019/Brighton

Planning this weekend’s Indie Web Camp Brighton.

Feel free to drop in any time over the weekend: https://indieweb.org/2019/Brighton

Web talk

At the start of this month I was in Amsterdam for a series of back-to-back events: Indie Web Camp Amsterdam, View Source, and Fronteers. That last one was where Remy and I debuted talk we’d been working on.

The Fronteers folk have been quick off the mark so the video is already available. I’ve also published the text of the talk here:

How We Built The World Wide Web In Five Days

This was a fun talk to put together. The first challenge was figuring out the right format for a two-person talk. It quickly became clear that Remy’s focus would be on the events of the five days we spent at CERN, whereas my focus would be on the history of computing, hypertext, and networks leading up to the creation of the web.

Now, we could’ve just done everything chronologically, but that would mean I’d do the first half of the talk and Remy would do the second half. That didn’t appeal. And it sounded kind of boring. So then we come up with the idea of interweaving the two timelines.

That worked remarkably well. The talk starts with me describing the creation of CERN in the 1950s. Then Remy talks about the first day of the hack week. I then talk about events in the 1960s. Remy talks about the second day at CERN. This continues until we join up about half way through the talk: I’ve arrived at the moment that Tim Berners-Lee first published the proposal for the World Wide Web, and Remy has arrived at the point of having running code.

At this point, the presentation switches gears and turns into a demo. I do not have the fortitude to do a live demo, so this was all down to Remy. He did it flawlessly. I have so much respect for people brave enough to do live demos, and do them well.

But the talk doesn’t finish there. There’s a coda about our return to CERN a month after the initial hack week. This was an opportunity for both of us to close out the talk with our hopes and dreams for the World Wide Web.

I know I’m biased, but I thought the structure of the presentation worked really well: two interweaving timelines culminating in a demo and finishing with the big picture.

There was a forcing function on preparing this presentation: Remy was moving house, and I was already going to be away speaking at some other events. That limited the amount of time we could be in the same place to practice the talk. In the end, I think that might have helped us make the most of that time.

We were both feeling the pressure to tell this story well—it means so much to us. Personally, I found that presenting with Remy made me up my game. Like I said:

It’s been a real treat working with Remy on this. Don’t tell him I said this, but he’s kind of a web hero of mine, so this was a real honour and a privilege for me.

This talk could have easily turned into a boring slideshow of “what we did on our holidays”, but I think we managed to successfully avoid that trap. We’re both proud of this talk and we’d love to give it again some time. If you’d like it at your event, get in touch.

In the meantime, you can read the text, watch the video, or look at the slides (but the slides really don’t make much sense in isolation).

Wednesday, October 16th, 2019

2001 A Space Odyssey, Epilogue. Featuring Frank Poole on Vimeo

This is quite a beautiful homage to Kubrick’s masterpiece.

Replying to a post on www.robinrendle.com

❤️

IndieWeb Link Sharing | Max Böck - Frontend Web Developer

Max describes how he does bookmarking on his own site—he’s got a bookmarklet for sharing links, like I do. But he goes further with a smart use of the “share target” section in his web app manifest, as described by Aaron.

By the way, Max’s upcoming talk at the Web Clerks conference in Vienna sounds like it’s going to be unmissable!

Replying to a post on adactio.com

Ooh, and then the day after Indie Web Camp Brighton, it’s the revivalist Brighton Bloggers meetup!

https://brightondigitalfestival.co.uk/events/brighton-bloggers-meetup

Ah, memories!

https://www.flickr.com/groups/10359578@N00/pool/

Reminder: Indie Web Camp Brighton is this weekend:

https://indieweb.org/2019/Brighton

Sign up (for free) here:

https://ti.to/adactio/indie-webcamp-brighton-2019

It’s going to be inspiring, fun, and productive—guaranteed!

From Gref-Völsing’s, home of the Frankfurter Rindswurst since 1894.

From Gref-Völsing’s, home of the Frankfurter Rindswurst since 1894.

How We Built The World Wide Web In Five Days

This talk about recreating the first ever web browser was a joint presentation with Remy Sharp, delivered at the Fronteers conference in Amsterdam in October 2019.

The lines of code that changed everything.

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

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

Beyond automatic accessibility testing: 6 things I check on every website I build - Manuel Matuzović

Six steps that everyone can do to catch accessibility gotchas:

  1. Check image descriptions
  2. Disable all styles
  3. Validate HTML
  4. Check the document outline
  5. Grayscale mode
  6. Use the keyboard

The Web Share API in Safari on iOS

I implemented the Web Share API over on The Session back when it was first available in Chrome in Android. It’s a nifty and quite straightforward API that allows websites to make use of the “sharing drawer” that mobile operating systems provide from within a web browser.

I already had sharing buttons that popped open links to Twitter, Facebook, and email. You can see these sharing buttons on individual pages for tunes, recordings, sessions, and so on.

I was already intercepting clicks on those buttons. I didn’t have to add too much to also check for support for the Web Share API and trigger that instead:

if (navigator.share) {
  navigator.share(
    {
      title: document.querySelector('title').textContent,
      text: document.querySelector('meta[name="description"]').getAttribute('content'),
      url: document.querySelector('link[rel="canonical"]').getAttribute('href')
    }
  );
}

That worked a treat. As you can see, there are three fields you can pass to the share() method: title, text, and url. You don’t have to provide all three.

Earlier this year, Safari on iOS shipped support for the Web Share API. I didn’t need to do anything. ‘Cause that’s how standards work. You can make use of APIs before every browser supports them, and then your website gets better and better as more and more browsers add support.

But I recently discovered something interesting about the iOS implementation.

When the share() method is triggered, iOS provides multiple ways of sharing: Messages, Airdrop, email, and so on. But the simplest option is the one labelled “copy”, which copies to the clipboard.

Here’s the thing: if you’ve provided a text parameter to the share() method then that’s what’s going to get copied to the clipboard—not the URL.

That’s a shame. Personally, I think the url field should take precedence. But I don’t think this is a bug, per se. There’s nothing in the spec to say how operating systems should handle the data sent via the Web Share API. Still, I think it’s a bit counterintuitive. If I’m looking at a web page, and I opt to share it, then surely the URL is the most important piece of data?

I’m not even sure where to direct this feedback. I guess it’s under the purview of the Safari team, but it also touches on OS-level interactions. Either way, I hope that somebody at Apple will consider changing the current behaviour for copying Web Share data to the clipboard.

In the meantime, I’ve decided to update my code to remove the text parameter:

if (navigator.share) {
  navigator.share(
    {
      title: document.querySelector('title').textContent,
      url: document.querySelector('link[rel="canonical"]').getAttribute('href')
    }
  );
}

If the behaviour of Safari on iOS changes, I’ll reinstate the missing field.

By the way, if you’re making progressive web apps that have display: standalone in the web app manifest, please consider using the Web Share API. When you remove the browser chrome, you’re removing the ability for users to easily share URLs. The Web Share API gives you a way to reinstate that functionality.

Tuesday, October 15th, 2019

So… I just met Dieter Rams wandering around the market hall in Frankfurt.

I just about managed to stammer out something in German about being delighted to see him.

That was unexpected, awkward, and delightful in equal measure.

Jeremy Keith & Remy Sharp - How We Built the World Wide Web in Five Days on Vimeo

Here’s the talk that Remy and I gave at Fronteers in Amsterdam, all about our hack week at CERN. We’re both really pleased with how this turned out and we’d love to give it again!

GitSheet

A handy translation of git commands into English.

Manton Reece - Saying goodbye to Facebook cross-posting

Facebook and even Instagram are at odds with the principles of the open web.

Related: Aaron is playing whack-a-mole with Instagram because he provides a servie to let users export their own photographs to their own websites.

Monday, October 14th, 2019

Something for the weekend

Your weekends are valuable. Spend them wisely. I have some suggestion on how you might spend next weekend, October 19th and 20th, depending on where you are in the world.

If you’re in the bay area, or anywhere near San Francisco, I highly recommend that you go to Science Hack Day—two days of science, hacking, and fun. This will be the last one in San Francisco so don’t miss your chance.

If you’re in the south of England, or anywhere near Brighton, come along to Indie Web Camp. Saturday will feature discussions on owning your data. Sunday will be a day of doing. I’ve written about previous Indie Web Camps before, and I really can’t recommend it highly enough!

Do me a favour and register for a spot—it’s free—so I’ve got some idea of numbers. Looking forward to seeing you there!

The World-Wide Work. — Ethan Marcotte

Here’s the transcript of Ethan’s magnificent closing talk from New Adventures. I’m pretty sure this is the best conference talk I’ve ever had the honour of seeing.

The rise of research ops — a view from the inside | Clearleft

I moderated this panel in London last week, all about the growing field of research ops—I genuinely love moderating panels. Here, Richard recounts some of the thought nuggets I prised from the mind casings of the panelists.

Paris Web 2019 - 10 octobre après-midi - Amphithéâtre - YouTube

Here’s the livestream of the talk I gave at Paris Web—Going Offline, complete with French live-captioning and simultaneous interpretation in .

Ne vous laissez plus déPOSSEder de vos contenus !

I saw Nicholas give this great talk at Paris Web on site deaths, the indie web, and publishing on your own site. That talk was in French, but these slides are (mostly) in English—I was able to follow along surprisingy easily!

Replying to a tweet from @ohhelloana

Congratulations!

Checked in at Weinterasse Rollanderhof. Weißburgunder vom Kalkstein — with Jessica map

Checked in at Weinterasse Rollanderhof. Weißburgunder vom Kalkstein — with Jessica

Guten Tag, Frankfurt.

Guten Tag, Frankfurt.

Sunday, October 13th, 2019

Going to Frankfurt. brb

100 words in a 100 days – Monique Dubbelman

I was chatting with Monique after her Paris Web talk on doing 100 days of code. I told her about my 100 days project and now she’s doing it too!

The “P” in Progressive Enhancement stands for “Pragmatism” - Andy Bell

With a Progressive Enhancement mindset, support actually means support. We’re not trying to create an identical experience: we’re creating a viable experience instead.

Also with Progressive Enhancement, it’s incredibly likely that your IE11 user, or your user on a low-powered device, or even your user on a poor connection won’t notice that they’re experiencing a “minor” experience because it’ll just work for them. This is the magic, right there. Everyone’s a winner.

Saturday, October 12th, 2019

map

Checked in at Les Enfants Rouges. Mackerel followed by guinea fowl

Checked in at The Quiet Man. Session — with Jessica map

Checked in at The Quiet Man. Session — with Jessica

Friday, October 11th, 2019

Chagall’s ceiling.

Chagall’s ceiling.

Picture 1 Picture 2

Digging Degas.

Checked in at Café Campana. In the musée d’Orsay — with Jessica map

Checked in at Café Campana. In the musée d’Orsay — with Jessica

Thursday, October 10th, 2019

Picture 1 Picture 2

Indoor aviation.

Wednesday, October 9th, 2019

Bonjour, Paris!

Bonjour, Paris!

Replying to a tweet from @paulrobertlloyd

€★

Reading Motherfoclóir: Dispatches From A Not So Dead Language by Darach O’Séaghdha.

Going to Paris. brb

Tuesday, October 8th, 2019

Great talk by @Shiiinobee at Codebar Brighton! (You should hire her!)

Great talk by @Shiiinobee at Codebar Brighton!

(You should hire her!)

You really don’t need all that JavaScript, I promise

The transcript of a fantastic talk by Stuart. The latter half is a demo of Portals, but in the early part of the talk, he absolutely nails the rise in popularity of complex front-end frameworks:

I think the reason people started inventing client-side frameworks is this: that you lose control when you load another page. You click on a link, you say to the browser: navigate to here. And that’s it; it’s now out of your hands and in the browser’s hands. And then the browser gives you back control when the new page loads.

Southern Mosaic

A beautiful audio and visual history of the Lomax’s journey across:

On March 31 1939, when John and Ruby Lomax left their vacation home on Port Aransas, Texas, they already had some idea of what they would encounter on their three-month, 6,502 mile journey through the southern United States collecting folk songs.

Replying to a tweet from @SaraSoueidan

I’m still chasing payment from the @Confront _SE conference in Malmö—it’s been a year now.

Sunday, October 6th, 2019

Dark mode

I had a very productive time at Indie Web Camp Amsterdam. The format really lends itself to getting the most of a weekend—one day of discussions followed by one day of hands-on making and doing. You should definitely come along to Indie Web Camp Brighton on October 19th and 20th to experience it for yourself.

By the end of the “doing” day, I had something fun to demo—a dark mode for my website.

Y’know, when I first heard about Apple adding dark mode to their OS—and also to CSS—I thought, “Oh, great, Apple are making shit up again!” But then I realised that, like user style sheets, this is one more reminder to designers and developers that they don’t get the last word—users do.

Applying the dark mode styles is pretty straightforward in theory. You put the styles inside this media query:

@media (prefers-color-scheme: dark) {
...
}

Rather than over-riding every instance of a colour in my style sheet, I decided I’d do a little bit of refactoring first and switch to using CSS custom properties (or variables, if you will).

:root {
  --background-color: #fff;
  --text-color: #333;
  --link-color: #b52;
}
body {
  background-color: var(--background-color);
  color: var(--text-color);
}
a {
  color: var(--link-color);
}

Then I can over-ride the custom properties without having to touch the already-declared styles:

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #111416
    --text-color: #ccc;
    --link-color: #f96;
  }
}

All in all, I have about a dozen custom properties for colours—variations for text, backgrounds, and interface elements like links and buttons.

By using custom properties and the prefers-color-scheme media query, I was 90% of the way there. But the devil is in the details.

I have SVGs of sparklines on my homepage. The SVG has a hard-coded colour value in the stroke attribute of the path element that draws the sparkline. Fortunately, this can be over-ridden in the style sheet:

svg.activity-sparkline path {
  stroke: var(--text-color);
}

The real challenge came with the images I use in the headers of my pages. They’re JPEGs with white corners on one side and white gradients on the other.

header images

I could make them PNGs to get transparency, but the file size would shoot up—they’re photographic images (with a little bit of scan-line treatment) so JPEGs (or WEBPs) are the better format. Then I realised I could use CSS to recreate the two effects:

  1. For the cut-out triangle in the top corner, there’s clip-path.
  2. For the gradient, there’s …gradients!
background-image: linear-gradient(
  to right,
  transparent 50%,
  var(—background-color) 100%
);

Oh, and I noticed that when I applied the clip-path for the corners, it had no effect in Safari. It turns out that after half a decade of support, it still only exists with -webkit prefix. That’s just ridiculous. At this point we should be burning vendor prefixes with fire. I can’t believe that Apple still ships standardised CSS properties that only work with a prefix.

In order to apply the CSS clip-path and gradient, I needed to save out the images again, this time without the effects baked in. I found the original Photoshop file I used to export the images. But I don’t have a copy of Photoshop any more. I haven’t had a copy of Photoshop since Adobe switched to their Mafia model of pricing. A quick bit of searching turned up Photopea, which is pretty much an entire recreation of Photoshop in the browser. I was able to open my old PSD file and re-export my images.

LEGO clone trooper Brighton bandstand Scaffolding Tokyo Florence

Let’s just take a moment here to pause and reflect on the fact that we can now use CSS to create all sorts of effects that previously required a graphic design tool like Photoshop. I could probably do those raster scan lines with CSS if I were smart enough.

dark mode

This is what I demo’d at the end of Indie Web Camp Amsterdam, and I was pleased with the results. But fate had an extra bit of good timing in store for me.

The very next day at the View Source conference, Melanie Richards gave a fantastic talk called The Tailored Web: Effectively Honoring Visual Preferences (seriously, conference organisers, you want this talk on your line-up). It was packed with great insights and advice on impementing dark mode, like this little gem for adjusting images:

@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(.8) contrast(1.2);
  }
}

Melanie also pointed out that you can indicate the presence of dark mode styles to browsers, although the mechanism is yet to shake out. You can do it in CSS:

:root {
  color-scheme: light dark;
}

But you can also do it in HTML:

That allows browsers to swap out replaced content; interface elements like form fields and dropdowns.

Oh, and one other addition I added after the fact was swapping out map imagery by using the picture element to point to darker map tiles:

<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://api.mapbox.com/styles/v1/mapbox/dark-v10/static...">
<img src="https://api.mapbox.com/styles/v1/mapbox/outdoors-v10/static..." alt="map">
</picture>

light map dark map

So now I’ve got a dark mode for my website. Admittedly, it’s for just one of the eight style sheets. I’ve decided that, while I’ll update my default styles at every opportunity, I’m going to preservethe other skins as they are, like the historical museum pieces they are.

If you’re on the latest version of iOS, go ahead and toggle the light and dark options in your system preferences to flip between this site’s colour schemes.

Replying to a tweet from @csswizardry

If the link with rel="stylesheet" came before the links with rel="preload" would that make a difference?

How to be a more productive developer | Go Make Things

Like Michael Pollan’s food rules, but for JavaScript:

  1. Plan your scripts out on paper.
  2. Stop obsessing over tools.
  3. Focus on solving problems.
  4. Maintain a library of snippets that you can reuse.

Replying to a tweet from @ChrisFerdinandi

For clearleft.com the font-loading strategy is to self-host woff2 with link rel="preload" as="font" in the HTML and font-display: fallback in the CSS.

For adactio.com the font-loading strategy is to not use web fonts. 🙂

Replying to a tweet from @adactio

Also: https://webpagetest.org/result/191006_NG_26598228105505e271a92fb74c840d4f/

Also:

https://webpagetest.org/result/191006NG26598228105505e271a92fb74c840d4f/

Replying to a tweet from @slightlylate

Very belated happy birthday! https://webpagetest.org/result/191006_VT_de2e6e1d553e84e44d97a368b69b788e/ (and I gave this a star too: https://bugs.chromium.org/p/chromium/issues/detail?id=988301) Thanks again for a thought-provoking talk!

Very belated happy birthday!

https://webpagetest.org/result/191006VTde2e6e1d553e84e44d97a368b69b788e/

(and I gave this a star too: https://bugs.chromium.org/p/chromium/issues/detail?id=988301)

Thanks again for a thought-provoking talk!

Saturday, October 5th, 2019

Replying to a tweet from @slightlylate

Responsive implicitly means no such thing.

One Web 4 Life.

Replying to a tweet from @slightlylate

It’s not “nobody” but I agree that it’s Sturgeon’s Law in action; 90% of responsive sites are crap because 90% of websites are crap because 90% of everything is crap.

do you know your tags?

Test your knowledge of the original version of HTML—how many elements can you name?

Friday, October 4th, 2019

Replying to a tweet from @slightlylate

You shall have my sword!

(Seriously, I very much want never-slow mode to become a thing. Whatever the AMP team are paying/blackmailing the search team with, do that for never-slow sites!)

Replying to a tweet from @slightlylate

Mobile-first responsive design works.

The alternative is far worse—separate code bases; separate m. sites? Never again!

Fact-checking @SlightlyLate: it’s true that desktop-first responsive design didn’t work—that never worked—mobile-first responsive design has always been the smart move. Don’t tar all responsive design with a desktop brush.

Replying to a tweet from @scottjehl

Alas, the latest update to iOS buries “Add to Home Screen” even more …and it was already pretty hard to find if you don’t grok “rectangle icon with arrow sticking out the top”.

Jello!!!

Jello!!!

Replying to a tweet from @HenriHelvetica

You’re welcome, Helvetica.

Replying to a tweet from @andreasbovens

Replying to a tweet from @TejasKumar_

Replying to a tweet from @HenriHelvetica

Designing a focus style | Zell Liew

A deep dive info focus styles with this conclusion:

The default focus ring works. There are problems with it, but it can be good enough, especially if you can’t dedicate time and energy to create a custom focus ring.

Why Progressive Web Apps Are The Future of Mobile Web [2019 Research]

PWAs just work better than your typical mobile site. Period.

But bear in mind:

Maybe simply because the “A” in PWA stands for “app,” too much discussion around PWAs focuses on comparing and contrasting to native mobile applications. We believe this comparison (and the accompanying discussion) is misguided.

Thursday, October 3rd, 2019

Replying to a tweet from @gregwhitworth

I was quoting @Zeynep from the Web At 30 event earlier this year.

Replying to a tweet from @xhafan

Oh, yes, Turbolinks is very exciting!

…at least until @JaffaTheCake’s proposal for navigation transitions becomes a reality:

https://github.com/jakearchibald/navigation-transitions

(and no, Portals definitely don’t cut it here).

Replying to a tweet from @ChrisFerdinandi

I agree that Chrome has the edge on Firefox for JavaScript work (while Firefox definitely leads in CSS tooling) …but a little birdie from Mozilla told me that some exciting improvements are coming soon!

Travel talk

It’s been a busy two weeks of travelling and speaking. Last week I spoke at Finch Conf in Edinburgh, Code Motion in Madrid, and Generate CSS in London. This week I was at Indie Web Camp, View Source, and Fronteers, all in Amsterdam.

The Edinburgh-Madrid-London whirlwind wasn’t ideal. I gave the opening talk at Finch Conf, then immediately jumped in a taxi to get to the airport to fly to Madrid, so I missed all the excellent talks. I had FOMO for a conference I actually spoke at.

I did get to spend some time at Code Motion in Madrid, but that was a waste of time. It was one of those multi-track events where the trade show floor is prioritised over the talks (and the speakers don’t get paid). I gave my talk to a mostly empty room—the classic multi-track experience. On the plus side, I had a wonderful time with Jessica exploring Madrid’s many tapas delights. The food and drink made up for the sub-par conference.

I flew back from Madrid to the UK, and immediately went straight to London to deliver the closing talk of Generate CSS. So once again, I didn’t get to see any of the other talks. That’s a real shame—it sounds like they were all excellent.

The day after Generate though, I took the Eurostar to Amsterdam. That’s where I’ve been ever since. There were just as many events as in the previous week, but because they were all in Amsterdam, I could savour them properly, instead of spending half my time travelling.

Indie Web Camp Amsterdam was excellent, although I missed out on the afternoon discussions on the first day because I popped over to the Mozilla Tech Speakers event happening at the same time. I was there to offer feedback on lightning talks. I really, really enjoyed it.

I’d really like to do more of this kind of thing. There aren’t many activities I feel qualified to give advice on, but public speaking is an exception. I’ve got plenty of experience that I’m eager to share with up-and-coming speakers. Also, I got to see some really great lightning talks!

Then it was time for View Source. There was a mix of talks, panels, and breakout conversation corners. I saw some fantastic talks by people I hadn’t seen speak before: Melanie Richards, Ali Spittal, Sharell Bryant, and Tejas Kumar. I gave the closing keynote, which was warmly received—that’s always very gratifying.

After one day of rest, it was time for Fronteers. This was where myself and Remy gave the joint talk we’ve been working on:

Neither of us is under any illusions about the nature of a joint talk. It’s not half as much work; it’s more like twice the work. We’ve both seen enough uneven joint presentations to know what we want to avoid.

I’m happy to say that it went off without a hitch. Remy definitely had the tougher task—he did a live demo. Needless to say, he did it flawlessly. It’s been a real treat working with Remy on this. Don’t tell him I said this, but he’s kind of a web hero of mine, so this was a real honour and a privilege for me.

I’ve got some more speaking engagements ahead of me. Most of them are in Europe so I’m going to do my utmost to travel to them by train. Flying is usually more convenient but it’s terrible for my carbon footprint. I’m feeling pretty guilty about that Madrid trip; I need to make ammends.

I’ll be travelling to France next week for Paris Web. Taking the Eurostar is a no-brainer for that one. Straight after that Jessica and I will be going to Frankfurt for the book fair. Taking the train from Paris to Frankfurt will be nice and straightforward.

I’ll be back in Brighton for Indie Web Camp on the weekend of October 19th and 20th—you should come!—and then I’ll be heading off to Antwerp for Full Stack Fest. Anywhere in Belgium is easily reachable by train so that’ll be another Eurostar journey.

After that, it gets a little trickier. I’ll be going to Berlin for Beyond Tellerrand but I’m not sure I can make it work by train. Same goes for Web Clerks in Vienna. Cities that far east are tough to get to by train in a reasonable amount of time (although I realise that, compared to many others, I have the luxury of spending time travelling by train).

Then there are the places that I can only get to by plane. There’s the United States. I’ll be speaking at An Event Apart in San Francisco in December. A flight is unavoidable. Last time we went to the States, Jessica and I travelled by ocean liner. But that isn’t any better for the environment, given the low-grade fuel burned by ships.

And then there’s Ireland. I make trips back there to see my mother, but there’s no alternative to flying or taking a ferry—neither are ideal for the environment. At least I can offset the carbon from my flights; the travel equivalent to putting coins in the swear jar.

Don’t get me wrong—I’m not moaning about the amount of travel involved in going to conferences and workshops. It’s fantastic that I get to go to new and interesting places. That’s something I hope I never take for granted. But I can’t ignore the environmental damage I’m doing. I’ll be making more of an effort to travel by train to Europe’s many excellent web events. While I’m at it, I can ask Paul for his trainspotter expertise.

Replying to a tweet from @JoubranJad

Oh, I see! I thought you were saying that an app shell is a prerequisite for any good progressive web app.

Replying to a tweet from @JoubranJad

Totally agree that getting something on the screen as quickly as possible is a prerequisite …but an app shell is not the only way to do that. Conflating the two is confusing.

Replying to a tweet from @JoubranJad

But if you agree it’s not the only way, why did you describe it as a prerequisite?

It’s 2019 and Safari only supports the CSS clip-path property with a -webkit prefix.

It has been this way for over five years now.

Death to vendor prefixes!

If the pinnacle of our ambition when building for the web on mobile is to imitate native apps, we have set our sights way too low.

https://adactio.com/journal/11130

Listening to @JoubranJad’s @FronteersConf talk, and I’m afraid I fundamentally disagree with his assertion that an app shell is a prerequisite for a good progressive web app. It’s one approach. Other excellent approaches are available.

A Modern CSS Reset - Andy Bell

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

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

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

Blog service workers and the chicken and the egg

This is a great little technique from Remy: when a service worker is being installed, you make sure that the page(s) the user is first visiting get added to a cache.

Photopea | Online Photo Editor

I found myself needing to open some old Photoshop files recently, but I haven’t had Photoshop installed on my computer for years (not since Adobe moved to the Mafia pricing model). It turns out there’s an online recreation of Photoshop!

I remember when this was literally the example people would give for the limitations of the web: “Well, you can’t build something like Photoshop in the browser…”

map

Checked in at Pathé Tuschinski. Fronteers — with Remy, Phil

Wednesday, October 2nd, 2019

Just had one last run-through with @Rem of our talk for @FronteersConf tomorrow: How We Built the World Wide Web in Five Days.

https://worldwideweb.cern.ch/

Replying to a tweet from @GermainSouquet

Thank you—glad you liked it!

map

Checked in at Bar De Vlieg. Meatball Wednesday! — with Jessica

The streets of Amsterdam.

The streets of Amsterdam.

Replying to a tweet from @els

But what does it mean!!??

The perfect responsive menu (2019) | Polypane responsive browser

I don’t know about “perfect” but this pretty much matches how I go about implementing responsive navigation (but only if there are too many links to show—visible navigation is almost always preferable).

Same-Site Cookies By Default | text/plain

This is good news. I have third-party cookies disabled in my browser, and I’m very happy that it will become the default.

It’s hard to believe that we ever allowed third-party cookies and scripts in the first place. Between them, they’re responsible for the worst ills of the World Wide Web.

What Makes a Mid-Level Developer? | Amber’s Website

I love the way that Amber is documenting her journey—I think this is so useful for others making the progression from junior to mid-level developer.

Unloading the rainbow.

Unloading the rainbow.

Brighton Bloggers 2019 meet-up – orbific.com

Some reminiscing at a recent Homebrew Website Club prompted James to organise a Brighton bloggers meetup …ten years on from the last one!

Mark your calendar: October 21st.

While you’re making your calendar, be sure to put in the dates for Indie Web Camp Brighton: October 19th and 20th. It would be lovely see some Brighton bloggers there!

alex-jeremy

Some photos from a lively discussion between Alex Russell and me at View Source in Amsterdam led Remy to create this meme generator.

You can see some results here and here.

This is not to be confused with a certain other photo which has led to its own memification here and here.

Replying to a tweet from @LeaVerou

See you soon!

Tuesday, October 1st, 2019

Replying to a tweet from @MatteoBalocco

Thank you so much! I think that might be my favourite talk I’ve ever given.

In the last 24 hours, #ViewSourceConf has provided me with two of my favourite tweets:

https://twitter.com/TejasKumar_/status/1178722987115237377

https://twitter.com/torgo/status/1179056621072334848

They really capture my soul, y’know?

Heartfelt thanks to @SandraPersing and @AliSpivak for putting together a great #ViewSourceConf—and to @Asignia for live-captioning it!

Replying to a tweet from @keinegurke_

Is that Do Androids Dream Of Electric Sheep? I think in Ubik he also invented 80% of the Internet Of Things with a door that demands payment before opening.

Feeling good about the closing keynote I just gave at #ViewSourceConf. The audience were very gracious, sticking around after two days of knowledge-packed talks by @Shrell, @SoMelanieSaid, @TejasKumar, @ASpittel, @HJChen, and more!

Replying to a tweet from @seaotta

Here’s a list of links to the books and articles referenced in the talk:

https://adactio.com/journal/14697

I’ve read exactly one of those books (hint: it’s the one that’s a comic book).

@AnjanaVakil Here’s that edition of The History Of The Web newsletter about JavaScript, with some yummy references and citations:

https://thehistoryoftheweb.com/the-10-day-programming-language-is-a-myth/

Picture 1 Picture 2 Picture 3

Me &Dees &Kirsty &Tantek &Valerie

Replying to a tweet from @ioana_cis

So much fun!

I think the best panel discussion at #ViewSourceConf was me and @SlightlyLate having a lively debate by the cloakroom, like two weasels in a sack squealing about web standards.

But we agreed on a solution:

Step 1: destroy capitalism.

Fellow #ViewSourceConf attendees: as announced on the excellent standards panel, there’ll be an Indie Web Camp in Brighton, England on October 19th and 20th—you should come!

https://indieweb.org/2019/Brighton

Replying to a tweet from @Asignia

I really appreciate your hard work—thank you!

@JoryDotCom Question for the panel: where does the money for standards work come from? (And does money buy influence?) #ViewSourceConf

Me and @BruceL — this year’s models.

Me and @BruceL — this year’s models.