Journal

3099 sparkline

Monday, September 30th, 2024

Preventing automated sign-ups

The Sessiongoes through periods of getting spammed with automated sign-ups. I’m not sure why. It’s not like they do anything with the accounts. They’re just created and then they sit there (until I delete them).

In the past I’ve dealt with them in an ad-hoc way. If the sign-ups were all coming from the same IP addresses, I could block them. If the sign-ups showed some pattern in the usernames or emails, I could use that to block them.

Recently though, there was a spate of sign-ups that didn’t have any patterns, all coming from different IP addresses.

I decided it was time to knuckle down and figure out a way to prevent automated sign-ups.

I knew what I didn’t want to do. I didn’t want to put any obstacles in the way of genuine sign-ups. There’d be no CAPTCHAs or other “prove you’re a human” shite. That’s the airport security model: inconvenience everyone to stop a tiny number of bad actors.

The first step I took was the bare minimum. I added two form fields—called “wheat” and “chaff” —that are randomly generated every time the sign-up form is loaded. There’s a connection between those two fields that I can check on the server.

Here’s how I’m generating the fields in PHP:

$saltstring = 'A string known only to me.';
$wheat = base64_encode(openssl_random_pseudo_bytes(16));
$chaff = password_hash($saltstring.$wheat, PASSWORD_BCRYPT);

See how the fields are generated from a combination of random bytes and a string of characters never revealed on the client? To keep it from goint stale, this string—the salt—includes something related to the current date.

Now when the form is submitted, I can check to see if the relationship holds true:

if (!password_verify($saltstring.$_POST['wheat'], $_POST['chaff'])) {
// Spammer!
}

That’s just the first line of defence. After thinking about it for a while, I came to conclusion that it wasn’t enough to just generate some random form fieldvalues;I needed to generate random form fieldnames.

Previously, the names for the form fields were easily-guessable: “username”, “password”, “email”. What I needed to do was generate unique form field names every time the sign-up page was loaded.

First of all, I create a one-time password:

$otp = base64_encode(openssl_random_pseudo_bytes(16));

Now I generate form field names by hashing that random value with known strings ( “username”, “password”, “email” ) together with a salt string known only to me.

$otp_hashed_for_username = md5($saltstring.'username'.$otp);
$otp_hashed_for_password = md5($saltstring.'password'.$otp);
$otp_hashed_for_email = md5($saltstring.'email'.$otp);

Those are all used for form field names on the client, like this:

<input type= "text" name= "<?php echo $otp_hashed_for_username;?>" >
<input type= "password" name= "<?php echo $otp_hashed_for_password;?>" >
<input type= "email" name= "<?php echo $otp_hashed_for_email;?>" >

(Remember, thename—or the ID—of the form field makes no difference to semantics or accessibility; the accessible name is derived from the associatedlabelelement.)

The one-time password also becomes a form field on the client:

<input type= "hidden" name= "otp" value= "<?php echo $otp;?>" >

When the form is submitted, I use the value of that form field along with the salt string to recreate the field names:

$otp_hashed_for_username = md5($saltstring.'username'.$_POST['otp']);
$otp_hashed_for_password = md5($saltstring.'password'.$_POST['otp']);
$otp_hashed_for_email = md5($saltstring.'email'.$_POST['otp']);

If those form fields don’t exist, the sign-up is rejected.

As an added extra, I leave honeypot hidden forms named “username”, “password”, and “email”. If any of those fieldsarefilled out, the sign-up is rejected.

I put that code live and the automated sign-ups stopped straight away.

It’s not entirely foolproof. It would be possible to create an automated sign-up system that grabs the names of the form fields from the sign-up form each time. But this puts enough friction in the way to make automated sign-ups a pain.

You can view source onthe sign-up pageto see what the form fields are like.

I used the same technique onthe contact pageto prevent automated spam there too.

Thursday, September 26th, 2024

The datalist element on iOS

Thedatalistelement is good.It was a bit bumpy there for a while, but browser implementations have improved over time. Now it’s by far the simplest and most robust way to createan autocompleting combobox widget.

Hook up aninputelement with adatalistelement using thelistandidattributes andyou’re done.You can even use a bit of Ajax to dynamically update theoptionelements inside thedatalistin response to the user’s input. The browser takes care of all the interaction. If you try to roll your own combobox implementation, it’s almost certainly going to involve a lot of JavaScript and still probably won’t account for all use cases.

Safari on iOS—and therefore all browsers on iOS—didn’t supportdatalistfor quite a while. But once it finally shipped, it worked really nicely. Theoptions showed up just like automplete suggestions above the keyboard.

But that broke a while back.

The suggestions still appeared, but if you tapped on one of them, nothing happened. Theinputelement didn’t get updated. You had to tap on a little downward arrow inside theinputin order to see the list ofoptions.

That was really frustrating for anybody on iOS usingThe Session.By far the most common task on the site is searching for a tune, something that’s greatly (progressively) enhanced with a dynamically-updatingdatalist.

I just updated to iOS 18 specifically to see if this bug has been fixed, andit has:

Fixed updating the input value when selecting anoptionfrom adatalistelement.

Hallelujah!

But now there’s some additional behaviour that’s a little weird.

As well as showing theoptions in the autocomplete list above the keyboard, Safari on iOS—and therefore all browsers on iOS—also pops up theoptions as a list (as if you had tapped on that downward arrow). If the list is more than a fewoptions long, it completely obscures theinputelement you’re typing into!

I’m not sure if this is a bug or if it’s the intended behaviour. Itfeelslike a bug, but I don’t know if I shouldfile something.

For now, I’ve updated thedatalistelements onThe Sessionto only ever hold threeoptionelements in order to minimise the problem. Seeing as the autosuggest list above the keyboard only ever shows a maximum of three suggestions anyway, this feels like a reasonable compromise.

Tuesday, September 17th, 2024

Last Minute

I went along to this year’sState Of The Browserconference on Saturday. It was great!

Technically I wasn’t just an attendee. I was on the substitution bench.Daveasked if I’d be able to jump in and give my talk ondeclarative designshould any of the speakers have to drop out. “No problem!”, I said. If everything went according to plan, I wouldn’t have to do anything. And if someone did have to pull out, I’d be the hero that sweeps in to save the day. Win-win.

As it turned out, everything went smoothly. All the speakers delivered their talks impeccably and the vibes were good.

Dave very kindly gave shout-outs to lots of other web conferences. Quite a few of the organisers were in the audience too. That offered me a nice opportunity to catch up with some of them, swap notes, and commiserate on how tough it is running an event these days.

Believe me, it’s tough.

Something that I confirmed that other conference organisers are also experiencing is last-minute ticket sales. This is something that happened with UX London this year. For most of the year, ticket sales were trickling along. Then in the last few weeks before the event we sold more tickets than we had sold in the six months previously.

Don’t get me wrong: I’m very happy we sold those tickets. But it was a very stressful few months before that. It felt like playing poker, holding on in the belief that those ticket sales would materialise.

Lots of other conferences are experiencing this.Front Conferencehad to cancel this year’s event because of the lack of ticket sales in advance. I know for a fact that some upcoming events are feeling the same squeeze.

When I was in Ireland I had a chat with a friend of mine who works at the Everyman Theatre in Cork. They’re experiencing something similar. So maybe it’s not related to the tech industry specifically.

Anyway, all that is to say that I echo Sophie’s entreaty:you should go to conferences.Andbuy your tickets early.

Soon I’ll be gearing up to start curating the line up for next year’s UX London (I’m very proud ofthis year’s eventand it’s going to be tough to top it). I hope I won’t have to deal with the stress of late ticket sales, but I’m mentally preparing for it.

Tuesday, September 10th, 2024

What price?

I’ve noticed a really strange justification from people when I ask them about their use of generative tools that use large language models (colloquially and inaccurately labelled as artificial intelligence).

I’ll point out that the training data requires the wholesale harvesting of creative works without compensation. I’ll also point out the ludicrously profligate energy use required not just for the training, but for the subsequent queries.

And here’s the thing: people will acknowledge those harms but they will justify their actions by saying “these things will get better!”

First of all, there’s no evidence to back that up.

If anything, as the well gets poisoned by their own outputs, large language models may well end up eating their own slop and getting their own version of mad cow disease. So this might be as good as they’re ever going to get.

And when it comes to energy usage, all the signals from NVIDIA, OpenAI, and others are that power usage is going toincrease,not decrease.

But secondly, what the hell kind of logic is that?

It’s like saying “It’s okay for me to drive my gas-guzzling SUV now, because in the future I’ll be driving an electric vehicle.”

The logic is completely backwards! If large language modelsaregoing to improve their ethical shortcomings (which is debatable, but let’s be generous), then that’s all the more reason toavoidusing the current crop of egregiously damaging tools.

You don’t get companies to change their behaviour by rewarding them for it. If you really want better behaviour from the purveyors of generative tools, you should be boycotting the current offerings.

I suspect that most people know full well that the “they’ll get better!” defence doesn’t hold water. But you can convince yourself of anything when everyone around is telling you that this is the future baby, and you’d better get on board or you’ll be left behind.

Baldur reminds us thatthis is how people talked about asbestos:

Every time you had an industry campaign against an asbestos ban, they used the same rhetoric. They focused on the potential benefits – cheaper spare parts for cars, cheaper water purification – and doing so implicitly assumed that deaths and destroyed lives, were a low price to pay.

This is the same strategy that’s being used by those who today talk about finding productive uses for generative models without even so much as gesturing towards mitigating or preventing the societal or environmental harms.

It reminds me of the classic Ursula Le Guin short story,The Ones Who Walk Away from Omelasthat depicts:

…the utopian city of Omelas, whose prosperity depends on the perpetual misery of a single child.

Once citizens are old enough to know the truth, most, though initially shocked and disgusted, ultimately acquiesce to this one injustice that secures the happiness of the rest of the city.

It turns out that most people will blithely accept injustice and suffering not for a utopia, but just for some bland hallucinated slop.

Don’t get me wrong: I’m not saying large language models aren’t without their uses. I love seeing whatSimonandMattare doing when it comes to coding. And large language models can be great fortransformingcontent from one format to another, like transcribing speech into text. But the balance sheet just doesn’t add up.

As Molly White put it:AI isn’t useless. But is it worth it?:

Even as someone who has used them and found them helpful, it’s remarkable to see the gap between what they can do and what their promoters promise they will someday be able to do. The benefits, though extant, seem to pale in comparison to the costs.

Sunday, September 8th, 2024

Manual ’till it hurts

I’ve beengoing buildless—or as Brad crudely puts it,raw-dogging websiteson a few projects recently. Not just obviously simple things likeClearleft’s Browser Supportpage, but sites like:

They also have0 dependencies.

Like Max says:

Funnily enough, many build tools advertise their superior “Developer Experience” (DX). For my money, there’s no better DX than shipping code straight to the browser and not having to worry about some crypticnode_moduleserror in between.

Making websites without a build step is a gift to your future self. When you open that project six months or a year or two years later, there’ll be no faffing about withnpmupdates, installs, or vulnerabilities.

Need to edit the CSS? You edit the CSS. Need to change the markup? You change the markup.

It’s remarkably freeing. It’s also very, very performant.

If you’re thinking that your next project couldn’t possibly be made without a build step, let me tell you about a phrase I first heard in theindie webcommunity: “Manual ‘till it hurts”. It’s basically a two-step process:

  1. Start doing what you need to do by hand.
  2. When that becomes unworkable, introduce some kind of automation.

It’s remarkable how often you never reach step two.

I’m not saying premature optimisation is the root of all evil. I’m just saying it’s premature.

Start simple. Get more complex if and when you need to.

You might never need to.

Monday, September 2nd, 2024

Belfast, Brighton, Cork, Boston, Pittsburgh, Saint Augustine

I’ve been on a sabbatical from work for the past six weeks.

AtClearleft,you’re eligible for a sabbatical after five years. For some reason I haven’t taken one until now, 19 years into my tenure at the agency. I am an idiot.

My six-week sabbatical has been lovely, alternating between travel and homebodying.

Belfast

The first week was spent in Belfast at the excellentBelfast Trad Fest.There were workshops in the morning, sessions in the afternoon, and concerts in the evening. Non-stop music!

This year’s event was a little bit special for me. The festival runs an excellentbursary sponsorship programmefor young people who otherwise wouldn’t be able to attend:

The bursary secures a place for a young musician to attend and experience a week-long intensive and immersive summertime learning course of traditional music, song and dance and can be transformative.

Back in April,I did a month-long funding drive on The Session:

Starting from today, and for the whole month of April, any donations made to The Session, which normally go towards covering the costs of running the site, will instead go towards sponsoring bursary places for this year’s Belfast Summer school.

I was really hoping to hit £1000, which would cover bursary sponsorship for eight students. In the end though,the members of The Session contributed a whopping £3000!

Needless to say, I was thrilled! The Trad Fest team were very happy too—they very kindly gave me a media pass for the duration of the event, which meant I could go to any of the concerts for free. I made full use of this.

That said, one of the absolute highlights of the week wasn’t a concert, buta session.Piper Mick O’Connor and fiddler Sean Smyth leda session out at the American Barone evening that was absolutely sublime. There was a deep respect for the music combined with a lovely laidback vibe.

Brighton

There were no shortage of sessions onceJessicareturned from Belfast to Brighton. In fact, when we got the train back from Gatwick we hopped in a cab straight to a session instead of going home first. Can’t stop, won’t stop.

The weather hadn’t been great in Belfast, which was fine because we were mostly indoors. But once we got back to Brighton we were treated to a week of glorious sunshine.

Needless to say, Jessica did plenty of swimming. I even went in the ocean myself on one of the hottest days.

I also went into the air.Andytook me up in a light aircraft fora jolly jauntover the south of England. We flew fromGoodwoodover the New Forest, and around the Isle of Wight where we landed for lunch. Literally a flying visit.

I can attest that Andy is an excellent pilot. No bumpy landings.

Cork

Our next sojourn took us back to the island of Ireland, but this time we were visiting the Republic. We spent a week in the mightiest of all the Irish counties, Cork.

Our friends Dan and Sue came over from the States and a whole bunch of us went on a road trip down to west Cork, a beautiful part of the country that I shamefully hadn’t visited before. Sue did a magnificent job navigating the sometimes tiny roads in a rental car, despite Dan being a nervous Nellie in the passenger seat.

We hada lovely couple of days in Glengarriff,even though the weather wasn’t great. On the way back to Cork city, we just had to stop off in Baltimore—Dan and Sue live in the other Baltimore. I wasn’t prepared forthe magnificent and rugged coastline(quite different to its Maryland counterpart).

Boston

We wereback in Brightonfor just one day before it was time for us to head to our next destination. We flew to Boston and spent a few days hanging around in Cambridge with our dear friendsEthanandLiz.It was a real treat to just pass the time with good people. It had been far too long.

I did manage to squeeze inan Irish music sessionin the legendary Druid pub. ’Twas a good night.

Pittsburgh

From Boston we went on to Pittsburgh forFrostapalooza.I’ve already told youall about how great that was:

It was joyous!

Saint Augustine

After all the excitement of Frostapalooza, Jessica and I went on to spend a week decompressing in Saint Augustine, Florida.

We went down to the beach every day. We went in the water most days. Sometimes the water was a bit too choppy for a proper swim, but it was still lovely and warm. And there was one day when the water was just perfectly calm.

When we weren’t on the beach, we were probably eating shrimp.

It was all very rela xing.

Brighton

I’ve spent the sixth and final week of my sabbatical back in Brighton. The weather has remained good so there’s been plenty of outdoor activities, including a kayaking trip down the river Medway in Kent. I may have done some involuntary wild swimming at one point.

I have very much enjoyed these past six weeks. Music. Travel. Friends. It’s all been quite lovely.

Me dressed in denim playing my red mandolin in a pub flanked by two women playing fiddle. A selfie of me in a cockpit with a headset on sitting next to Andy Budd who is flying, complete with aviator sunglasses. Me standing near a sign in the woods with a robin redbreast perched on it. Tiny figures in the distance at the bottom of a tapered tower on a cliff top. Checked in at Harvard Yard. Parkin the cah* in the Hahvahd Yahd (* butt) — with Jessica A man playing banjo and a woman playing bass ukulele on lawn furniture outdoors. A profile shot of me on stage with my mandolin singing with one arm extended. A woman stands holding her shoes on a sandy beach under a dramatic cloudy sky.

Tuesday, August 20th, 2024

Frostapalooza

SoFrostapaloozahappened on Saturday.

It was joyous!

It all started back in July of last year when I got an email fromBrad:

Next summer I’m turning 40, and I’m going to use that milestone as an excuse to play a big concert with and for all of my friends and family. It’ll sorta be like The Last Waltz, but with way more web nerds involved.

Originally it was slated for July of 2024, which was kind of awkward for me because it would clash withBelfast Trad Festbut I said to mark me down as interested. Then when the date got moved to August of 2024, it became more doable. I knew thatJessicaand I would be making a transatlantic trip at some point anyway to see her parents, so we could try to combine the two.

In fact, the tentative plans we had to travel to the States in April of 2024 for the total solar eclipse ended up getting scrapped in favour of Brad’s shindig. That’s right—we chose rock’n’roll over the cosmic ballet.

Over the course of the last year, things began to shape up. There were playlists. There were spreadsheets. Dot voting was involved.

Anyone with any experience of playing live music was getting nervous. It’s hard enough to rehearse and soundcheck for a four piece, but Brad was planning to have over 40 musicians taking part!

We did what we could from afar, choosing which songs to play on, recording our parts and sending them onto Brad. Meanwhile Brad was practicing like hell with the core band. With Brad on bass and his brother Ian on drums for the whole night, we knew that the rhythm section would be tight.

A few months ago we booked our flights. We’d fly into to Boston first to hang out withEthanand Liz (it had been too long!), then head down to Pittsburgh for Frostapalooza before heading on to Florida to meet up with Jessica’s parents.

When we got to Pittsburgh, we immediately met up withChrisand together we headed over to Brad’s for a rehearsal. We’d end up spending a lot of timeplaying music with Chrisover the next couple of days. I loved every minute of it.

The evening before Frostapalooza, Brad threw a party at his place. It was great to meet so many of the other musicians he’d roped into this.

Then it was time for the big day. We had a whole afternoon to soundcheck, but we needed it. Drums, a percussion station, a horn section…not to mention all the people coming and going on different songs. Fortunately the tech folks at the venue were fantastic and handled it all with aplomb.

We finished soundchecking around 5:30pm. Doors were at 7pm. Time to change into our rock’n’roll outfits and hang out backstage getting nervous and excited.

Right before showtime,Brad gave a heartfelt little speech.

Then the fun really began.

I wasn’t playing on the first few songs so I got to watch the audience’s reaction as they realised what was in store. Maybe they thought this would be a cute gathering of Brad and his buddies jamming through some stuff. What they got was an incredibly tight powerhouse of energy from a seriously awesome collection of musicians.

I had the honour of playing on five songs over the course of the night. I had an absolute blast! But to be honest, I had just as much fun being in the audience dancing my ass off.

Oh, I was playing mandolin. I probably should’ve mentioned that.

Me on stage with my mandolin.

The first song I played on wasThe Weightby The Band. There was a real Last Waltz vibe as Brad’s extended family joined him on stage, along with me and and Chris.

The Band - The Weight Later I hopped on stage asone excellent songsegued into another—Mapsby Yeah Yeah Yeahs.

Yeah Yeah Yeahs - Maps (Official Music Video)

I’ve loved this song since the first time I heard it. In the dot-voting rounds to figure out the set list, this was my super vote.

You know the way it starts with that single note tremelo on the guitar? I figured that would work on the mandolin. And I know how to tremelo.

Jessica was on bass. Jessi Hall was on vocals. It. Rocked.

I stayed on stage for Radiohead’sThe National Anthemcomplete with horns, musical saw, andtwobasses played by Brad and Jessica absolutely killing it. I added a little texture over the singing with some picked notes on the mandolin.

The National Anthem

Then it got truly epic. We playedWake Upby Arcade Fire. So. Much. Fun! Again, I laid down some tremelo over the rousing chorus. I’m sure no one could hear it but it didn’t matter. Everyone was just lifted along by the sheer scale of the thing.

Arcade Fire - Wake Up (Official Audio)

That was supposed to be it for me. But during the rehearsal the day before, I played a little bit on Fleetwood Mac’sThe Chainand Brad said, “You should do that!”

The Chain (2004 Remaster)

So I did. I think it worked. I certainly enjoyed it!

With that, my musical duties were done and I just danced and danced, singing along to everything.

At the end of the night, everyone got back on stage. It was a tight fit. We then attempted to sing Bohemian Rhapsody together. It was a recipe for disaster…but amazingly,it worked!

That could describe the whole evening. It shouldn’t have worked. It was far too ambitious. But not only did it work, it absolutely rocked!

What really stood out for me was how nice and kind everyone was. There was nary an ego to be found. I had never met most of these people before but we all came together and bonded over this shared creation. It was genuinely special.

Days later I’m still buzzing from it all. I’m so, so grateful to Brad and Melissa for pulling off this incredible feat, and for allowing me to be a part of it.

They’ve had a shitty few years. I know we all had a shitty time over the past few years, butthe shit kept on coming for them:

And then in the middle of this traumatic medical emergency, our mentally-unstable neighbor across the street began accosting my family, flipping off our toddler and nanny, racially harassing my wife, and making violent threats. We fled our home for fear of our safety because he was out in the street exposing himself, shouting belligerence, and threatening violence.

After that, Brad started working withProject Healthy Minds.In fact, all the proceeds from Frostapalooza go to that organisation along withNextStep Pittsburgh.

Just think about that. Confronted with intimidation and racism, Brad and Melissa still managed to see the underlying systemic inequality, and work towards making things better for the person who drove them out of their home.

Good people, man. Good people.

I sincererly hope they got some catharsis from Frostapalooza. I can tell you that I felt frickin’ great after being part of an incredible event filled with joy and love and some of the best music I’ve ever heard.

There’sa write-up of Frostapalooza on CSS TricksandWill Browar has posted his incredible photographs from the night—some seriously superb photography!

Tuesday, July 16th, 2024

Ad tech

Back when South by Southwest wasn’t terrible, there used to be an annual panel called Browser Wars populated with representatives from the main browser vendors (except for Apple, obviously, who would never venture onto a stage outside of their own events).

I remember getting into a heated debate with the panelists during the 2010 edition. I was mad about web fonts.

Just to set the scene, web fonts didn’t exist back in 2010. That’s what I was mad about.

There was no technical reason why we couldn’t have web fonts. The reason why we didn’t get web fonts for years and years was because browser makers were concerned about piracy and type foundries.

That’s nice and all, but as I said during that panel, I don’t recall any such concerns being raised for photographers when theimgelement was shipped. Neither was the original text-only web held back by the legimate fear by writers of plagiarism.

My point was not that these concerns weren’t important, but that it wasn’t the job of web browsers to shore up existing business models. To use standards-speak, these concerns are orthogonal.

I’m reminded of this when I see browser makers shoring up the business of behavioural advertising.

I subscribe to the RSS feed ofupdates to Chrome.Not all of it is necessarily interesting to me, but all of it is supposedly aimed at developers. And yet, in amongst the posts about APIs and features, there’ll be something about the Orwellianly-titled“privacy sandbox”.

This is only of interest to one specific industry: behavioural online advertising driven by surveillance and tracking. I don’t see any similar efforts being made for teachers, cooks, architects, doctors or lawyers.

It’s a ludicrous situation that I put down to the fact that Google, the company that makes Chrome, is also the company that makes its money from targeted advertising.

But thenMozilla started with the same shit.

Now, it’s one thing to roll out a new so-called “feature” to benefit behavioural advertising. It’s quite another to make it enabled by default. That’s a piece ofdeceptive designthat has no place in Firefox. Defaults matter. Browser makers know this. It’s no accident that this “feature” was enabled by default.

This disgusts me.

It disgusts me all the more that it’s all for nothing. Notice that I’ve repeatly referred tobehaviouraladvertising. That’s the kind that relies on tracking and surveillance to work.

There is another kind of advertising. Contextual advertising is when you show an advertisement related to thecontentof the page the user is currently on. The advertiser doesn’t need to know anything about the user, just the topic of the page.

Conventional wisdom has it that behavioural advertising is much more effective than contextual advertising. After all, why would there be such a huge industry built on tracking and surveillance if it didn’t work? See, for example,this footnote by John Gruber:

So if contextual ads generate, say, one-tenth the revenue of targeted ads, Meta could show 10 times as many ads to users who opt out of targeting. I don’t think 10× is an outlandish multiplier there — given how remarkably profitable Meta’s advertising business is, it might even need to be higher than that.

Seems obvious, right?

But the idea that behavioural advertising works better than contextual advertising has no basis in reality.

If you think you know otherwise,Jon Bradshaw would like to hear from you:

Bradshaw challenges industry to provide proof that data-driven targeting actually makes advertising more effective – or in fact makes it worse. He’s spoiling for a debate – and has three deep, recent studies that show: broad reach beats targeting for incremental growth; that the cost of targeting outweighs the return; and that second and third party data does not outperform a random sample. First party data does beat the random sample – but contextual ads massively outperform even first party data. And they are much, much cheaper. Now, says Bradshaw, let’s see some counter-evidence from those making a killing.

If targeted advertising is going to get preferential treatment from browser makers, I too would like to see some evidence that it actually works.

Further reading:

Wednesday, July 10th, 2024

Directory enquiries

I was having a discussion with some of my peers a little while back. We were collectively commenting on the state of education and documentation for front-end development.

A lot of the old stalwarts have fallen by the wayside of late.CSS Trickshasn’t been the same since it got bought out by Digital Ocean.A List Apartgoes through fallow periods. Even the Mozilla Developer Network is looking tosquander its trustby addinginaccurate “content” generated by a large language model.

The most obvious solution is to start up a brand new resource for front-end developers. But there are two probems with that:

  1. It’s really, really, really hard work, and
  2. It feels a bit927.

I actually think there areplenty of good articles and resources on front-end developmentbeing published. But they’re not being published in any one specific place. People are publishing them on their own websites.

Ahmed,Josh,Stephanie,Andy,Lea,Rachel,Robin,Michelle…I could go on, but you get the picture.

All this wonderful stuff is distributed across the web. If you have a well-stocked RSS reader, you’re all set. But if you’re new to front-end development, how do you know where to find this stuff?I don’t think you can rely on search,unless you have a taste forslop.

I think the solution lies not with some hand-wavey “AI” algorithm that burns a forest for every query. I think the solution lies with human curation.

I take inspiration from Phil’s fantastic project,ooh.directory.Imagine taking that idea of categorisation and applying it to front-end dev resources.

Whether it’s a post onweb.dev,Smashing Magazine,orsomeone’s personal site,it could be included and categorised appropriately.

Now, there would still be alotof work involved, especially in listing and categorising the articles that are already out there, but it wouldn’t be nearly as much work as trying to create those articles from scratch.

I don’t know what the categories should be. Does it make sense to have top-level categories for HTML, CSS, and JavaScript, with sub-directories within them? Or does it make more sense to categorise by topics like accessibility, animation, and so on?

And this being the web, there’s no reason why one article couldn’t be tagged to simultaneously live in multiple categories.

There’s plenty of meaty information architecture work to be done. And there’d be no shortage of ongoing work to handle new submissions.

A stretch goal could be the creation of “playlists” of hand-picked articles. “Want to get started with CSS grid layout? Read that article over there, watch this YouTube video, and study this page on MDN.”

What do you think? Does this one-stop shop of hyperlinks sound like it would be useful? Does it sound feasible?

I’m just throwing this out there. I’d love it if someone were to run with it.

Thursday, July 4th, 2024

Teaching and learning

Looking back onten years of codebar Brighton,I’m remembering how much I got out of being a coach.

Something that I realised very quickly is that there is no one-size-fits-all approach to coaching. Every student is different so every session should adapt to that.

Broadly speaking I saw two kinds of students: those that wanted to get results on screen as soon as possible without worrying about the specifics, and those who wanted to knowwhysomething was happening andhowit worked. In the first instance, you get to a result as quickly as possible and then try to work backwards to figure out what’s going on. In the second instance, you build up the groundwork of knowledge and then apply it to get results.

Both are equally valid approaches. The only “wrong” approach as a coach is to try to apply one method to someone who’d rather learn the other way.

Personally, I always enjoyed the groundwork-laying of the second approach. But it comes with challenges. Because the results aren’t yet visible, you have to do extra work to conveywhythe theory matters. As a coach, you need to express infectious enthusiasm.

Think about the best teachers you had in school. I’m betting they displayed infectious enthusiasm for the subject matter.

The other evergreen piece of advice is to show, don’t tell. Or at the very least, intersperse your telling with plenty of showing.

Bret Viktor demonstrates this when he demonstratesscientific communication as sequential art:

This page presents a scientific paper that has been redesigned as a sequence of illustrations with captions. This comic-like format, with tightly-coupled pictures and prose, allows the author to depict and describe simultaneously — show and tell.

It works remarkably well. I remember how well it worked when Google first launched their Chrome web browser. They releaseda 40 page comic book illustrated by Scott McCloud.There is no way I would’ve read a document that long about how browser engines work, but I read that comic cover to cover.

Thisvisual introduction to machine learningis another great example of simultaneous showing and telling.

So showing augments telling. But interactivity can augment showing.

Here are some great examples of interactive explainers:

Lea describes what can happen whentoo much theory comes before practice:

Observing my daughter’s second ever piano lesson today made me realize how this principle extends to education and most other kinds of knowledge transfer (writing, presentations, etc.). Her (generally wonderful) teacher spent 40 minutes teaching her notation, longer and shorter notes, practicing drawing clefs, etc. Despite his playful demeanor and her general interest in the subject, she was clearly distracted by the end of it.

It’s easy to dismiss this as a 5 year old’s short attention span, but I could tell what was going on: she did not understandwhythese were useful, nor how they connect to her end goal, which is toplay music.

The codebar website has someexcellent advice for coaches,like:

  • Do not take over the keyboard! This can be off-putting and scary.
  • Encourage the students to type and not copy paste.
  • Explain that there are no bad questions.
  • Explain to students that it’s OK to make mistakes.
  • Assume that anyone you’re teaching has no knowledge but infinite intelligence.

Notice how so much of the advice focuses on getting the students to do things, rather than have them passively sit and absorb what the coach has to say.

Lea alsogives some great advice:

  1. Always explainwhysomething is useful. Yes, even when it’s obvious to you.
  2. Minimize the amount of knowledge you convey before the next opportunity to practice it. For non-interactive forms of knowledge transfer (e.g. a book), this may mean showing an example, whereas for interactive ones it could mean giving the student a small exercise or task.
  3. Prefer explaining in context rather than explaining upfront.

It’s interesting that Lea highlights the advantage of interactive media like websites over inert media like books. The canonical fictional example of an interactive explainer is the Young Lady’s Illustrated Primer in Neal Stephenson’s novelThe Diamond Age.Andy Matuschakdescribes its appeal:

When it wants to introduce a conceptual topic, it begins with concrete hands-on projects: Turing machines, microeconomics, and mitosis are presented through binary-coding iron chains, the cipher’s market, and Nell’s carrot garden. Then the Primer introduces extra explanation just-in-time, as necessary.

That’s not how learning usually works in these domains. Abstract topics often demand that we start with some necessary theoretical background; only then can we deeply engage with examples and applications. With the Primer, though, Nell consistently begins each concept by exploring concrete instances with real meaning to her. Then, once she’s built a personal connection and some intuition, she moves into abstraction, developing a fuller theoretical grasp through the Primer’s embedded books.

(Andy goes on to warn of the dangers of copying the Primer too closely. Its tricks verge on gamification, and its ultimate purpose isn’t purely to educate. There’s a cautionary tale there about the power dynamics in any teacher/student relationship.)

There’s kind of apriority of constituencieswhen it comes to teaching:

Consider interactivity over showing over telling.

Thinking back onall the talks I’ve given,I start to wonder if I’ve been doing too much telling and showing, but not nearly enough interacting.

Then again, I think that talks aren’t quite the same as hands-on workshops. I think of giving a talk as being more like a documentarian. You need to craft a compelling narrative, and illustrate what you’re saying as much as possible, but it’s not necessarily the right arena for interactivity.

That’s partly a matter of scale. It’s hard to be interactive with every person in a large audience.Marcin managed to do itbut that’s very much the exception.

Workshops are a different matter though. When I’m recruiting hosts forUX Londonworkshops I always encourage them to be as hands-on as possible. A workshop should not be an extended talk. There should be more exercises than talking. And wherever possible those exercises should be tactile, ideally not sitting in front of a computer.

My own approach to workshops has changed over the years. I used to prepare a book’s worth of material to have on hand, either as one giant slide deck or multiple decks. But I began to realise that the best workshops are the ones where the attendees guide the flow, not me.

So now I show up to a full-day workshop with no slides. But I’m not unprepared. I’ve got decades of experience (andlinks) to apply during the course of the day. It’s just that instead of trying to anticipate which bits of knowledge I’m going to need to convey, I apply them in a just-in-time manner as and when they’re needed. It’s kind of scary, but as long as there’s a whiteboard to hand, or some other way to illustrate what I’m telling, it works out great.

Older »