Jeremy Keith's Blog, page 36

Inertia

When I���ve spoken in the past about evaluating technology, I���ve mentioned two categories of tools for web development. I still don���t know quite what to call these categories. Internal and external? Developer-facing and user-facing?

The first category covers things like build tools, version control, transpilers, pre-processers, and linters. These are tools that live on your machine���or on the server���taking what you���ve written and transforming it into the raw materials of the web: HTML, CSS, and JavaScript.

The second category of tools are those that are made of the raw materials of the web: CSS frameworks and JavaScript libraries.

I think the criteria for evaluating these different kinds of tools should be very different.

For the first category, developer-facing tools, use whatever you want. Use whatever makes sense to you and your team. Use whatever���s effective for you.

But for the second category, user-facing tools, that attitude is harmful. If you make users download a CSS or JavaScript framework in order to benefit your workflow, then you���re making users pay a tax for your developer convenience. Instead, I firmly believe that user-facing tools should provide some direct benefit to end users.

When I���ve asked developers in the past why they���ve chosen to use a particular JavaScript framework, they���ve been able to give me plenty of good answers. But all of those answers involved the benefit to their developer workflow���efficiency, consistency, and so on. That would be absolutely fine if we were talking about the first category of tools, developer-facing tools. But those answers don���t hold up for the second category of tools, user-facing tools.

If a user-facing tool is only providing a developer benefit, is there any way to turn it into a developer-facing tool?

That���s very much the philosophy of Svelte. You can compare Svelte to other JavaScript frameworks like React and Vue but you���d be missing the most important aspect of Svelte: it is, be design, in that first category of tools���developer-facing tools:

Svelte takes a different approach from other frontend frameworks by doing as much as it can at the build step���when the code is initially compiled���rather than running client-side. In fact, if you want to get technical, Svelte isn���t really a JavaScript framework at all, as much as it is a compiler.

You install it on your machine, you write your code in Svelte, but what it spits out at the other end is HTML, CSS, and JavaScript. Unlike Vue or React, you don���t ship the library to end users.

In my opinion, this is an excellent design decision.

I know there are ways of getting React to behave more like a category one tool, but it is most definitely not the default behaviour. And default behaviour really, really matters. For React, the default behaviour is to assume all the code you write���and the tool you use to write it���will be sent over the wire to end users. For Svelte, the default behaviour is the exact opposite.

I���m sure you can find a way to get Svelte to send too much JavaScript to end users, but you���d be fighting against the grain of the tool. With React, you have to fight against the grain of the tool in order to not send too much JavaScript to end users.

But much as I love Svelte���s approach, I think it���s got its work cut out for it. It faces a formidable foe: inertia.

If you���re starting a greenfield project and you���re choosing a JavaScript framework, then Svelte is very appealing indeed. But how often do you get to start a greenfield project?

React has become so ubiquitous in the front-end development community that it���s often an unquestioned default choice for every project. It feels like enterprise software at this point. No one ever got fired for choosing React. Whether it���s appropriate or not becomes almost irrelevant. In much the same way that everyone is on Facebook because everyone is on Facebook, everyone uses React because everyone uses React.

That���s one of its biggest selling points to managers. If you���ve settled on React as your framework of choice, then hiring gets a lot easier: ���If you want to work here, you need to know React.���

The same logic applies from the other side. If you���re starting out in web development, and you see that so many companies have settled on using React as their framework of choice, then it���s an absolute no-brainer: ���if I want to work anywhere, I need to know React.���

This then creates a positive feedback loop. Everyone knows React because everyone is hiring React developers because everyone knows React because everyone is hiring React developers because…

At no point is there time to stop and consider if there���s a tool���like Svelte, for example���that would be less harmful for end users.

This is where I think Astro might have the edge over Svelte.

Astro has the same philosophy as Svelte. It���s a developer-facing tool by default. Have a listen to Drew���s interview with Matthew Phillips:

Astro does not add any JavaScript by default. You can add your own script tags obviously and you can do anything you can do in HTML, but by default, unlike a lot of the other component-based frameworks, we don���t actually add any JavaScript for you unless you specifically tell us to. And I think that���s one thing that we really got right early.

But crucially, unlike Svelte, Astro allows you to use the same syntax as the incumbent, React. So if you���ve learned React���because that���s what you needed to learn to get a job���you don���t have to learn a new syntax in order to use Astro.

I know you probably can���t take an existing React site and convert it to Astro with the flip of a switch, but at least there���s a clear upgrade path.

Astro reminds me of Sass. Specifically, it reminds me of the .scss syntax. You could take any CSS file, rename its file extension from .css to .scss and it was automatically a valid Sass file. You could start using Sass features incrementally. You didn���t have to rewrite all your style sheets.

Sass also has a .sass syntax. If you take a CSS file and rename it with a .sass file extension, it is not going to work. You need to rewrite all your CSS to use the .sass syntax. Some people used the .sass syntax but the overwhelming majority of people used .scss

I remember talking with Hampton about this and he confirmed the proportions. It was also the reason why one of his creations, Sass, was so popular, but another of his creations, Haml, was not, comparitively speaking���Sass is a superset of CSS but Haml is not a superset of HTML; it���s a completely different syntax.

I���m not saying that Svelte is like Haml and Astro is like Sass. But I do think that Astro has inertia on its side.

Ten episodes of the Web History podcast

For over a year now I���ve been recording the audio versions of Jay Hoffman���s excellent Web History series on CSS Tricks.

We���re up to ten chapters now. The audio version of each chapter is between 30 and 40 minutes long. That���s around 400 minutes of my voice: a good six and a half hours of me narrating the history of the web. That���s like an audio book!

The story so far covers:

BirthBrowsersThe WebsiteSearchPublishingWeb DesignStandardsCSSCommunityBrowser Wars

…with more to come.

The audio is available as a podcast. You can subscribe to the RSS feed. It���s also available from Apple and Spotify.

That���ll give you plenty to listen to while you wait for the next season of the Clearleft podcast.

Memories of Ajax

I just finished watching The Billion Dollar Code, a German languge miniseries on Netflix. It���s no Halt and Catch Fire, but it combines ���90s nostalgia, early web tech, and an opportunity for me to exercise my German comprehension.

It���s based on a true story, but with amalgamated characters. The plot, which centres around the preparation for a court case, inevitably invites comparison to The Social Network, although this time the viewpoint is from that of the underdogs trying to take on the incumbent. The incumbent is Google. The underdogs are ART+COM, artist-hackers who created the technology later used by Google Earth.

Early on, one of the characters says something about creating a one-to-one model of the whole world. That phrase struck me as familiar…

I remember being at the inaugural Future Of Web Apps conference in London back in 2006. Discussing the talks with friends afterwards, we all got a kick out of the speaker from Google, who happened to be German. His content and delivery was like a wonderfully Stranglovesque mad scientist. I���m sure I remember him saying something like ���vee made a vun-to-vun model of the vurld.���

His name was Steffen Meschkat. I liveblogged the talk at the time. Turns out he was indeed on the team at ART+COM when they created Terravision, the technology later appropriated by Google (he ended up working at Google, which doesn���t make for as exciting a story as the TV show).

His 2006 talk was all about Ajax, something he was very familiar with, being on the Google Maps team. The Internet Archive even has a copy of the original audio!

It���s easy to forget now just how much hype there was around Ajax back then. It prompted me to write a book about combining Ajax and progressive enhancement.

These days, no one talks about Ajax. But that���s not because the technology went away. Quite the opposite. The technology became so ubiquituous that it no longer even needs a label.

A web developer today might ask ���what���s Ajax?��� in the same way that a fish might ask ���what���s water?���

Writing on web.dev

Chrome Dev Summit kicked off yesterday. The opening keynote had its usual share of announcements.

There was quite a bit of talk about privacy, which sounds good in theory, but then we were told that Google would be partnering with ���industry stakeholders.��� That���s probably code for the kind of ad-tech sharks that have been making a concerted effort to infest W3C groups. Beware.

But once Una was on-screen, the topics shifted to the kind of design and development updates that don���t have sinister overtones.

My favourite moment was when Una said:

We���re also partnering with Jeremy Keith of Clearleft to launch Learn Responsive Design on��web.dev. This is a free online course with everything you need to know about designing for the new responsive web of today.

This is what���s been keeping me busy for the past few months (and for the next month or so too). I���ve been writing fifteen pieces���or ���modules������on modern responsive web design. One third of them are available now at web.dev/learn/design:

IntroductionMedia queriesInternationalizationMacro layoutsMicro layouts

The rest are on their way: typography, responsive images, theming, UI patterns, and more.

I���ve been enjoying this process. It���s hard work that requires me to dive deep into the nitty-gritty details of lots of different techniques and technologies, but that can be quite rewarding. As is often said, if you truly want to understand something, teach it.

Oh, and I made one more appearance at the Chrome Dev Summit. During the ���Ask Me Anything��� section, quizmaster Una asked the panelists a question from me:

Given the court proceedings against AMP, why should anyone trust FLOC or any other Google initiatives ostensibly focused on privacy?

(Thanks to Jake for helping craft the question into a form that could make it past the legal department but still retain its spiciness.)

The question got a response. I wouldn���t say it got an answer. My verdict remains:

I���m not sure that Google Chrome can be considered a user agent.

The fundamental issue is that you���ve got a single company that���s the market leader in web search, the market leader in web advertising, and the market leader in web browsers. I honestly believe all three would function better���and more honestly���if they were separate entities.

Monopolies aren���t just damaging for customers. They���re damaging for the monopoly too. I���d love to see Google Chrome compete on being a great web browser without having to also balance the needs of surveillance-based advertising.

Publishing The State Of The Web

Back in April I gave a talk at An Event Apart Spring Summit. The talk was called The State Of The Web, and I���ve published the transcript. I���ve also published the video.

I put a lot of work into this talk and I think it paid off. I wrote about preparing the talk. I also wrote about recording it. I also published links related to the talk. It was an intense process, but a rewarding one.

I almost called the talk The Overview Effect. My main goal with the talk was to instil a sense of perspective. Hence the references to the famous Earthrise photograph.

On the one hand, I wanted the audience to grasp just how far the web has come. So the first half of the talk is a bit of a trip down memory lane, with a constant return to just how much we can accomplish in browsers today. It���s all very positive and upbeat.

Then I twist the knife. Having shown just how far we���ve progressed technically, I switch gears the moment I say:

The biggest challenges facing the World Wide Web today are not technical challenges.

Then I dive into those challenges, as I see them. It turns out that technical challenges would be preferable to the seemingly intractable problems of today���s web.

I almost wish I could���ve flipped the order: talk about the negative stuff first but then finish with the positive. I worry that the talk could be a bit of a downer. Still, I tried to finish on an optimistic note.

I won���t spoil it any more for you. Watch the video or have a read of The State Of The Web.

Four days

I had an extra long weekend recently. It was four days of being a culture vulture. It was also four days of ever-increasing risk assessment.

It began on Thursday morning with the first Salter Cane band practice in eighteen months. That was pretty safe���three of us in a room, reminding ourselves of how the songs go. I honestly thought it could���ve been a disaster and that I wouldn���t remember anything, but thanks to a little bit of last-minute revision the evening before, it actually went really well. And boy, did it feel good to plug in and play those songs again.

Later that day, Jessica went up to London. We spent that evening in the Royal Opera House, watching a ballet, The Dante Project. We wore masks. Not everyone else did.

[image error]

The next day, the indoor gatherings continued. We went to the IMAX to see Dune. The opportunity was too good to pass up. It was wonderful! But again, while we wore masks for the duration, not everyone else did.

[image error]

Still, I reckon the ventilation was reasonably good in both the Royal Opera House and the BFI���s IMAX cinema. But that evening we checked into the Clayton Crown Hotel in Cricklewood, venue for the Return To London Town festival of Irish traditional music.

That���s where we spent two days going to concerts, sessions, and workshops, all of them indoors. The music was great, and we had a lovely time, but I couldn���t help but feel a sense of nervousness throughout.

When we got back to Brighton, we both took lateral flow tests���thank goodness that these are freely available! We were both negative. We had dodged a viral bullet.

That was the last trip out of town we���ll be making for a while. But even for Brighton-based activities, this is the routine now: weigh up the risks, decide whether an activity is worth it, and if so, testing afterwards.

For example, the week after our trip to London, the Wednesday evening Irish music session at The Jolly Brewer pub started up again here in Brighton. It was one of the things I missed most during The Situation.

I wrote about this at the very start of the first lockdown:

I���m quite certain that one positive outcome of The Situation will be a new-found appreciation for activities we don���t have to do. I���m looking forward to sitting in a pub with a friend or two, or going to see a band, or a play or a film, and just thinking ���this is nice.���

I certainly did find myself thinking ���this is nice��� during the session, which was as wonderful as I had remembered. But I was also thinking about ventilation, and distancing, and airflow. Like I said:

Risks. Benefits. Running the numbers. Making decisions. Trying to do the right thing. Trying to stay safe but also trying to live life.

BBC feedback

I just filled out this form on the BBC website. Here���s what I wrote, based on this open letter to the BCC Upper Management and Editorial Staff.

What is your complaint about?

BBC website or apps

Which website or app is your complaint about?

BBC News website

Please give the URL, or name of the app

https://www.bbc.co.uk/news/uk-england-57853385

Are you contacting us about a previous complaint?

No

Select the best category to describe your complaint

Standards of interviewing/presenting

What is the subject of your complaint?

Innacurate reporting and unreliable source

Please enter your complaint

The article is based on a single self selected study of 80 individuals sourced from Get The L Out, a group who, prior to the survey, were already united by anti-trans views.

This study breaks the BBC���s own guidelines about using surveys as sources for claims in coverage, as it is self-selected, with a small sample size and a clear bias held by those self-selected to respond.

The article dangerously frames this as a widespread issue, whilst simultaneously acknowledging that there is no actual evidence to that effect outside of isolated claims and cherry picked individual cases.

The article routinely implies that transgender women are not women, uncritically quoting people who call transgender women men without at any point clarifying that this is ignoring their legal status as women in the UK.

Season three of the Clearleft podcast

Season three of the Clearleft podcast is done and dusted. I���m pretty happy with how the six episodes turned out.

Episode one

Coaching. There was one question at the heart of this episode: what���s the difference between training, coaching, and mentoring? I got some great answers to that question, with some good stories along the way.

Episode two

Design Engineering. It will come as no surprise that I really enjoyed this episode. This is a topic I think is growing in importance. The relevation for me was the way Trys framed it less as the intersection between design and development, and more about the gap between design and development. And remember we���re looking for a design engineer to join Clearleft.

Episode three

Design Research. A really fun deep dive, thanks to Steph. I feel like this episode set things up for the next two episodes. Oh, and we���re also looking for a design researcher to join Clearleft.

Episode four

Innovation. I had lots of great material to draw on here: a panel discussion, conference talks, and interviews. I really like the ensemble nature of the end result.

Episode five

Measuring Design. My favourite episode of the season, and probably my favourite episode of the Clearleft podcast so far. This episode builds on a hot topic from UX Fest. And just this week, Andy published a blog post that continues the debate. If you only listen to one episode of the season, make it this one.

Episode six

Design Principles. Needless to say, I enjoyed the heck out of this one. As a well-known nerd for design principles this felt kind of self-indulgent, but in the end there���s not much of me in it (thankfully). In fact it���s more like a case study of the work Clearleft did with Citizens Advice.

I also wrote a bit about each episode when they came out:

CoachingDesign EngineeringDesign ResearchInnovationMeasuring DesignDesign Principles

Six episodes might not sound like much, but it takes a lot of work to put a season together. It���s rewarding though. And I���m already looking forward to crafting the arc for season four. But that won���t be until the start of next year.

Still, it���s never to early to subscribe so you���ll be the first to hear the newest episodes. Subscribe to the RSS feed or on Apple, Spotify, Google, or wherever you get your podcasts.

Design principles on the Clearleft podcast

The final episode of season three of the Clearleft podcast is out. Ah, what a bittersweet feeling! On the hand it���s sad that the season has come to an end. But it feels good to look back at six great episodes all gathered together.

Episode six is all about design principles. That���s a topic close to my heart. I collect design principles.

But for this podcast episode the focus is on one specific project. Clearleft worked with Citizens Advice on a recent project that ended up having design principles at the heart of it. It worked as a great focus for the episode, and a way of exploring design principles in general. As Katie put it, this about searching for principles for design principles.

Katie and Maite worked hard on nailing the design principles for the Citizens Advice project. I was able to get some of Maite���s time for her to talk me through it. I���ve also got some thoughts from my fellow Clearlefties Andy and Chris on the topic of design principles in general.

It���s nineteen minutes long and well worth a listen.

And with that, season three of the Clearleft podcast is a wrap!

Changing Situation

The Situation persists. But it has changed. There are no longer any official restrictions to speak of here in England. Instead it���s down to everyone to figure out individually what���s right.

Everyone is evaluating the risks, making calculations and coming to different conclusions. It���s only natural that everyone���myself incuded���thinks they���ve found the Goldilocks zone. ���That person is being far too blas��! And that person is being far too cautious! But I���m doing exactly the right thing.���

With that in mind, I���m trying not to be judgemental about the decisions other people are making (apart from the decsion not to get vaccinated���I���m judgemental as hell about those selfish assholes). For example, I wear a mask when I���m on public transport. Other people don���t. I try not to judge them (although really, how hard is it to wear a piece of cloth for the duration of a bus ride? …sorry, that���s judgy).

This tendency to comparison extends to the country level too. Right now England has the highest case numbers for COVID-19 in Europe. I look at Ireland with its magnificentally low levels of vaccine hesistancy and I���m jealous: why can���t we be like that? But then I look to the United States and think, yowzah!, things could be worse.

Jessica and I have made a couple of trips to London. One involved indoor entertainment���the long-delayed premier of Akram Khan���s Creature at Sadlers Wells. We wore masks. Not everyone did. I tried not to judge. Others would judge me for just being inside the building.

The other trip to London was a dog-sitting visit, hanging out with Cider who is a very good boy.

After each excursion like that, we do a lateral flow test. So far, so negative. Having access to free testing makes a big difference to making post-hoc evaluations of risks. It boggles my mind that testing is pricy luxury in the States (there I go again, making comparisons).

We���ve also started playing tunes at a session in our local pub. We make sure to test ourselves before going. Spending an evening in a pub���even a nice chilled-out pub on a Monday evening���is still a risk. But it���s worth it. Each time we go I think ���this is nice.���

This isn���t the first time we���ve had to make risk assessments. I remember it was like this last year between the first and second wave. Can we sit outside a restaurant? Can we go see the new Christopher Nolan film?

But it feels different this time because of our vaccinations. I know the Delta variant has altered the game, but the stakes certainly aren���t the same as pre-vaccine times. So while I���m still trying to avoid catching this damned disease, I���m also trying not to let it rule every decision the way it did last year.

It���s a balancing act. It���s the same balancing act that everyone is undertaking. We���re all walking our own individual tightropes. But at least being vaccinated, the tightrope doesn���t feel quite so high off the ground.

I���m speaking at a conference in Lisbon next week. That means going to an airport. That means getting on a plane. That means spending time inside a conference venue.

But it also means I���ll be travelling to a country with a wonderfully high vaccination rate, where I���ll be able to enjoy the sunny weather and dine outdoors in the evening.

Risks. Benefits. Running the numbers. Making decisions. Trying to do the right thing. Trying to stay safe but also trying to live life.

The Situation persists. But it has changed. I look forward to it changing more. I���m in line to get a booster shot before the year is out. That���ll be another factor in my calculations.

I look forward to a time when I won���t have to keep making these calculations. That time isn���t here yet.