Starred Articles

Web of State of the Browser Day Out

Adactio: Links — Wed, 18 Mar 2026 16:47:10 +0000

A lovely post from Remy about State Of The Browser and Web Day Out.

Back from ffconf – And Why We Need Events like This

Marc Thiele's Journal — Mon, 13 Nov 2023 20:54:00 +0000

ffconf is an event in Brighton founded and organised by Remy Sharp and his wife Julie Sharp. I know both for a long time and we share a lot of common things when it comes to running events. We run events, because we love running those and bringing people together for which we curate a set of speakers for a certain amount of time. In their case for one day at beginning of November. Julie and Remy, as well as I, come out of a very tough time for event organisers that don’t take their budgets out of a companies yearly marketing budget. We rely on people buying tickets and partnerships with companies who like what we do, who see a sense in sponsoring as they might have a benefit and who keep our events alive with their money.

What makes events like ffconf so important for me is not only the personal curation and with this often much more interesting talks, but also the personal connection people have with those events and the kind of people you meet and are able to exchange with.

Last week Friday, at ffconf, I had so many lovely conversations before, during and after the event that are fantastic input, motivation and thoughts that are different to mine and give me other perspectives. For me personally that is so much value and I hope that events like ffconf stay for a long, long time. What you can do to make sure that this is the case? Well, if you attend events like ffconf, Patterns Day, or mine, beyond tellerrand you can:

Get your tickets early – organisers need to plan and work with the incoming money
Check their sponsorship prospectus – often times sponsorship starts at a lower cost than you think and even the smallest packages help big times
Tell other people about it – there is no big marketing budget, so you, spreading the word, means the world

Especially the last part is an investment in the future of these events.

Thanks a lot to Julie, Remy and their team for this years joyful event and in my case also to Andy Davies, who made it possible that I could be part.

Reply via Email

Vibe coding and Robocop

Adactio: Links — Sat, 19 Jul 2025 08:58:39 +0000

The short version of what I want to say is: vibe coding seems to live very squarely in the land of prototypes and toys. Promoting software that’s been built entirely using this method would be akin to sending a hacked weekend prototype to production and expecting it to be stable.

Remy is taking a very sensible approach here:

I’ve used it myself to solve really bespoke problems where the user count is one.

Would I put this out to production: absolutely not.

adactio.com/links/22028

White Next Contest – Entries List and Poll

ZX SPECTRUM NEXT — Thu, 01 May 2025 01:04:30 +0000

UPDATE – 11/05/2025 – Poll will be reset and extended. Someone today attempted to abuse the polling system and entered a lot of votes under a continuous loop. This user has been now banned and the poll will be reset (auto-cleanup of votes happens every day) and extended for 11 days. Next attempt at abuse will ban the favoured program from competition

Entry: Next Point
Developer: Victor Morilla
Type: Game / Sports
Platform: Spectrum Next

Download here

Entry: SCN Driver
Developer: Simon N Goodwin
Type: Device Driver / SuperBASIC extension
Platform: QL Next

Read the documentation / details and download here

Entry: ZNC Compiler Suite
Developer: Chris Taylor
Type: Native Programming Language suite (Compiler/Editor/Optimiser/Assembler)
Platform: Spectrum Next

Read the documentation / details and download here

Entry: Jetman In Space
Developer: Maciej Miklas
Type: Arcade Game
Platform: Spectrum Next

Read the documentation / details and download here

Entry: SSX (Sam Coupe Screen Viewer)
Developer: Robert Morrison
Type: DOT Command / Utility
Platform: Spectrum Next

Read the documentation / details and download here

Entry: Eternal Battle
Developer: SaNchez / Alexandr Udotov
Type: Arcade Game
Platform: Spectrum Next

Read the documentation / details and download here

Entry: Next Fractal Explorer
Developer: Matthew Thompson
Type: Mandelbrot Set Plotter
Platform: Spectrum Next

Read the documentation / details and download here

Entry: Next2Net
Developer: Martyn Hill
Type: Hardware Interface
Platform: QL Next

An early version of the Next2Net adapter was shown during Crash Live! 2024. Documentation and schematics are here

Entry: PCQLTransfer
Developer: Johan Engdahl
Type: Network utility
Platform: QL Next

When downloading the file below pay attention to unzip the QL portion within a QXL.WIN container as it will lose its headers if you do not

Download Here

Selection process

Public votes will carry a 70% weight of the results while the Next team’s votes will carry a 30% weight.

Voting will close on May 29th at midnight GMT and final results will be announced during the SpecNext and KS3 talk at RetCon 2025 in Barnhill Community Centre and Social Club, Ayles Road, Hayes, UB4 9HG

Link for the above event: https://retconfestival.co.uk/

Since we only had ONE entry for hardware, we will give Martyn an honourable mention at this point (but please do vote for him) and redo a hardware-only contest in June 2025!

Reading List 339

Bruce Lawson's personal site — Fri, 11 Apr 2025 12:51:11 +0000

This reading list is courtesy of Vivaldi browser, who pay me decent money to fight for a better web and don’t moan at me for reading all this stuff. We just released Vivaldi 7.3, which has Proton VPN integrated into Desktop. So try it, unless you enjoy having a browser that’s like a data-mining tortoise.

Cascade Layers, Container Queries, Scope and more! – In the 8th episode of the For A Better Web podcast, I chat with Miriam Suzanne, a CSS expert and independent contributor to the CSS Working Group.
Customizable select elements – MDN docs.
CSS Form Control Styling Level 1 – this working draft defines various ways of styling form controls and their different parts.
Carousels with CSS – if you absolutely must use a carousel, do it this way. But remember that the English for “carousel” is “merry-go-fuckyourself” – which is what it says to your users.
Better typography with text-wrap pretty – WebKit isn’t the first implementation, but it promises to be the most comprehensive.
Model Context Protocol has prompt injection security problems by Simon Willison, who is one of the very few people I trust on the subject of AI.
Markdown and the Slow Fade of the Formatting Fetish.
Item Flow, Part 1: A new unified concept for layout – “This article explains what Item Flow is, and its impact on both Flexbox and Grid” by from WebKit team.
Audiences are still skeptical about generative AI in the news – “Nearly half of Americans say they don’t want news from generative artificial intelligence… Twenty percent of people say publishers shouldn’t use AI at all.”
History of the Web: Chris Lilley – Brian Kardell interviews Chris Lilley about his early (pre-W3C) involvement in PNG, CGM, HTML 2; and then some early CSS, SVG and WebFont history.
iPhones were already losing ground in China. Then came Trump’s tariffs
Do politics belong at web events? asks Remington Sharp
Why do AI company logos look like buttholes? – an in-depth probe into this question

Reading List 338

Bruce Lawson's personal site — Fri, 21 Mar 2025 14:04:31 +0000

This reading list is courtesy of Vivaldi browser, who pay me decent money to fight for a better web and don’t moan at me for reading all this stuff. We just released Vivaldi 7.2, which The Register called “noticeably quicker than alternatives including Chrome and Brave”. So try it, unless you enjoy having a browser that’s like a data-mining tortoise.

UK Regulator’s Final Verdict: Apple’s Browser Engine Ban Harms Competition – Nearly 4 years after I thought speaking to the CMA about Apple would be a fun lockdown project, a historic decision. We’ve written it up in full, and thanks to all the orgs and individual devs who helped us.
EU Cracks Down on Apple for Anti-Competitive Behavior – Here’s What Apple Told Us in Response – TL;DR: “Boo hoo, nasty regulators, poor us, security … sob”
Devs: draw your line – Remy Sharp notes “Facebook and TikTok had been given access to read what medication I’m on by the development team responsible for the Pharmacy2U web site.”
Let’s knock down social media’s walled gardens – Sir Uncle Timbo writes “I envisioned the web as a place for the shared benefit of all — by reclaiming our data we can make that happen”
Hands on with Ghost’s New ActivityPub Beta The more the merrier in the Social Web!
Understanding the European Accessibility Act (EAA) by Léonie Watson
Minding the gaps: A new way to draw separators in CSS – an interesting proposal from the Microsoft CSS folks
Extracting content from an LCP “protected” ePub – by Terence Eden
Popping preconceived popover ponderings – Scott O’Hara on how the popover attribute is just one ingredient in making accessible popups. It does a lot, but not everything you might need. that’s on purpose.
Online Safety Act – In which an ethical erotica producer blocks UK visitors from listening to audio: “As per the Online Safety Act, text is not in scope but audio is. You are legally allowed to read the stories I write here without verifying your age, and I am legally allowed to show them to you … However the UK government has decided that it would be harmful to children if you were also allowed to hear them as audio … Deliberately breaking accessibility features on my website ranks among the most depressing things I have ever done.”
Invoker Commands Future (Explainer) – outlines potential future enhancements to Invoker Commands.
Docs: Opensource alternative to Notion or Outline – a collaborative note taking, wiki and documentation platform that scales, “the result of a joint effort led by the French (DINUM) and German governments”
Y Combinator urges the White House to support Europe’s Digital Markets Act – “YC argues in the letter that the DMA opens up key avenues to create opportunities for American startups in AI, search, and consumer apps, and prevents Big Tech companies from boxing out smaller ventures.”
Data Broker Brags About Having Highly Detailed Personal Information on Nearly All Internet Users – “The advertising industry is immensely powerful, and disturbingly opaque.”
Ban behavioural data extraction for advertising – UK citizens are invited to sign this Parliamentary petition.
Google Being Forced To Sell Chrome is Not Good for the Web – “Google does all kinds of shitty stuff. They are surely the worst offenders of user surveillance on the web. Let’s not let them off the hook on that. Let’s see the DOJ get involved in that stuff. But forcing a sale of Chrome is not the way” writes Chris Coyier
A well-funded Moscow-based global ‘news’ network has infected Western artificial intelligence tools worldwide with Russian propaganda – “An audit found that the 10 leading generative AI tools advanced Moscow’s disinformation goals by repeating false claims from the pro-Kremlin Pravda network 33 percent of the time”
Become an irreplaceable 10x developer in 30 seconds flat – “Introducing rust-stakeholder – a CLI tool that generates absolutely meaningless but impressive-looking terminal output to convince everyone you’re a coding genius without writing a single line of useful code.”

Blog questions challenge

Ana Rodrigues — Mon, 24 Feb 2025 00:00:00 +0000

I'm somewhat frustrated at myself for how long it took me to finish off this post that Remy kindly tagged me in. The last time I participated in something like this was the "My Typical Day" write-up. Reading it now is an interesting stroll down memory lane.

This challenge also reminded me of Manu's wonderful People & Blogs newsletter, which comes out every Friday, and which I had the privilege of being featured in many weeks ago.

Why did you start blogging in the first place?

I started blogging as a pre-teen in the early 2000s. At that time, I was at the peak of my confidence, before the weird teenage years hit. I was already building fan websites, but I wanted to create something personal about myself. I wanted a space where I could share everything I was enjoying at the time.

At that age, the things you like become badges of honor - listing your favorite bands and films was a way of defining your personality and making yourself known to your peers. Having a personal website felt like the perfect way to do this. I felt like the coolest person on the planet because hardly anyone my age knew how to create websites back then.

Throughout the years I always had a blog but it wouldn’t always be the same blog. As I grew I would delete and start again. So I’ve maintained a blog for years but stopped when I got my first job in tech. I picked up blogging again about 10 years ago, and haven’t stopped.

What platform are you using to manage your blog, and why did you choose it? Have you blogged on other platforms before?

Currently, I use 11ty because my blog has evolved beyond just a blog - it's become a whole thing. I chose 11ty because I wanted extensive control over the markup, template customization, and being able to add my own features. It's remarkably simple to use and handles everything I throw at it, making it almost fail-proof.

My blogging journey across platforms:

Hand made HTML for many years.
Started with Blogspot during university, where I had a surprisingly popular blog in Portuguese documenting my journey through young adulthood, university, and my chaotic love life. It gained thousands of followers through Blogspot's follow feature.
When I returned to blogging around 2014, I started with self-hosted WordPress as I was feeling burned out and needed an easy way back in.
Later moved from WordPress to Jekyll.
Finally settled on 11ty, where I am now.

While any blogging platform is fine to use, I personally crave the control over editing templates and customizing features, which is why 11ty works so well for me.

How do you write your posts?

I typically start in one of two ways:

Open my editor directly.
When frustrated, start in a basic document (like Google Docs) for initial word-vomit drafting.

As a non-native English speaker, I spend considerable time reviewing my grammar. I think faster than I type, so I need to ensure my written thoughts are coherent and connected. After editing and reviewing, I copy the content into my editor, usually creating either:

A markdown file for simple text posts
An HTML page for posts requiring fancy features

I've tried tools like Grammarly but found them unnecessary for my needs. Most often, it's just basic punctuation that needs fixing, which I've gotten better at handling on my own. And now I probably jinxed myself and anyone reading this will find lots of mistakes.

When do you feel most inspired to write?

My inspiration usually comes from frustration or when I need to process something in my life. While I wish I could say I had a perfect morning routine (5 AM wake-up, cold shower, coffee while gazing out the window after a morning run), the reality is quite different. Nowadays, most of my writing happens in the evening after spending the whole day processing thoughts and feelings about something. I spend the day mentally chewing on a thought, letting it build up, and then finally sit down to write about it in the evening. It's less about serene inspiration and more about processing emotions and experiences.

Do you publish immediately after writing, or do you let it simmer as a draft?

I do both. If it is a technical post, I will post immediately and then crawl back to edit/update it. A personal post I let it sit in the drafts at least overnight and read it the following morning.

What's your favourite post on your blog?

My favourite posts are my worst hits. I think my favourite posts also change every once in a while but right now my favourite posts are:

Ergh, looks like I peaked in 2021.

Any future plans for your blog? Maybe a redesign, a move to another platform, or adding a new feature?

Yes, I’m the worst at daydreaming what I would do to my blog if I didn’t have to work and had all the spare time to work on it.

I want to tidy up the layout and do a big code refactor. There’s still code lingering from an automated conversion tool I used from Wordpress to Jekyll from many years ago.

I keep lying to myself and tell myself that I will only day have a fully IndieWeb powered machine thing going on my blog. One day.

I have so much content to update like my blogroll, my bookmarks, talks section and more.

But, in the end, what’s the point of spicing it all up if it leaves me with no time to actually write on it?

Next?

I’m aware I’m slow but I love these types of chains. Next, I would tag Calum, Suze and Georgie, if they wish to do so.

Blog Questions Challenge

as days pass by — Mon, 03 Feb 2025 19:17:00 +0000

The latest thing circulating around people still blogging is the Blog Questions Challenge; Jon did it (and asked if I was) and so have Jeremy and Ethan and a bunch of others, so clearly it is time I should get on board, fractionally late as ever.¹

Why did you start blogging in the first place?

Some other people I admired were doing it. I think the person I was most influenced by to start doing it was Simon Willison, who is also still at it², but a whole bunch of people got on board at around that same time, back in the early days when you be a medium-sized fish in a small pool just by participating. Mark Pilgrim springs to mind as well -- that's a good example of having influence, when the "standard format" of permalinks got sort of hashed out collectively to be /2025/02/03/blog-questions-challenge, which a lot of places still adhere to (although it feels faintly quaint, these days).

Interestingly, a lot of the early posts on this site are short two-sentence half-paragraph things, throwaway thoughts, and that all got sucked up by social media... but social media hadn't been invented, back in 2002.

Also interestingly: the second post on this here blog³ was bitching at Mozilla about the Firefox release schedule. Nothing new under the sun.⁴

What platform are you using to manage your blog and why did you choose it? Have you blogged on other platforms before?

Cor. When it started, this site was being run by Castalian, which was basically "classic ASP but Python instead of VBScript", a thing I built. This is because I was using ASP at work on Windows machines, so that was the model for "dynamic web pages" that I understood, but I wasn't on Windows⁵ and so I built it myself. No idea if it still works and I very much doubt it since it's old enough to buy all the drinks these days.

After that it was Movable Type for a bit and then, because I'd discovered the idea of funky caching⁶ it was Vellum, that model (a) in Python and (b) written by me. Then for a while it was "Thort", which was based on CouchDB⁷, and then it was WordPress, and then in 2014 I switched from WP to a static build based on Pelican, which it still is to this day. Crikey, that was over ten years ago!⁸ I like static site generators: I even wrote 10 Popular Static Site Generators a few years ago for WebsiteSetup which I think is still pretty good.

How do you write your posts? For example, in a local editing tool, or in a panel/dashboard that’s part of your blog?

In my text editor, which is Sublime Text. The static setup is here on my machine; I write a post, I type make kryogenix, and it runs a whole little series of scripts which invoke Pelican to build the static HTML for the blog, do a few things that I've added (such as add footnote handling⁹, make og:image links and images¹⁰, and sort of handle webmentions but that's broken at the moment) and then copy it up to my actual website (via git) to be published.

It's all a bit lashed together, to be honest, but this whole website is like that. It is something like an ancient city, such as London or Rome; what this site is mostly built on is the ruins of the previous history of the city. Sometimes the older bits poke through because they're still actually OK, or they never got updated; sometimes they've been replaced with the new shiny. You should see the .htaccess file, which operates a bewildering set of redirects through about six different generations of URLs so all the old links still work.¹¹

When do you feel most inspired to write?

When the muse seizes me. Sometimes that's a lot; sometimes not. I do quite a lot of paid writing as part of my various day jobs for others, and quite a lot of creative writing as part of running a play-by-post D&D campaign, and that sucks up a reasonable amount of the writing energy, but there are things which just demand going on the website. Normally these days it's things where I want them to be a reference of some kind -- maybe of a useful tech thing, or some important thought, or something interesting -- for myself or for others.

Alternatively you might think the answer is "while in the pub, which leads to making random notes in an email to myself from my phone and then writing a blog post when I get home" and while this is not true, it's not not true either. I do not want to do a histogram of posting times from this site because I am worried that I will find that the majority are at, like, 11.15pm.

Do you publish immediately after writing, or do you let it simmer a bit as a draft?

Always post immediately. I have discovered about myself that, for semi-ephemeral stuff like posts here or projects that I do for fun, that I need to get them done as part of that initial burst of inspiration and energy. If I don't get it done, then my enthusiasm will fade and they will linger half-finished for ever and never get completed. I don't necessarily like this, but I've learned to live with it. If I think of an idea for a post and write a note about it and then don't do it, when I rediscover the note a week later it will not seem anything like as compelling. So posts are mostly written as one long stream-of-consciousness to capitalise on the burning of the creative fire before it gets doused by time or work or everything going on in the world. Carpe diem, I guess.¹²

What’s your favourite post on your blog?

Maybe It's Cold Outside, or Monkey Island 2, for about the fifth time, or Charles Paget Wade and the Underthing for writing, although each of them have little burrs in the wording that I want to polish when I re-read them. The series of birthday posts have been going on since the beginning, one every year, which probably wins for consistency. For technical stuff, maybe Some thoughts on soonsnap and little big details (now sadly defunct) or The thing and the whole of the thing: on DRM in HTML. I like my own writing, mostly. Arrogant, I know.

Any future plans for your blog? Maybe a redesign, a move to another platform, or adding a new feature?

Not really at the moment, but, as above, these things tend to arrive in a blizzard of excitement and implementation and then linger forever once done. But right now... it all seems to work OK. Ask me when I get back from the pub.

Next?

Well, I should probably point back at some of the people who inspired me to do this or other things and keep doing so to this day. So Simon, Remy, and Bruce, perhaps!

In my defence, it was my birthday. ↩
although no longer at simon.incutio.com -- what even was Incutio? ↩
I resisted the word "blog" for a long time, calling it a "weblog", and the activity being "weblogging", because "blog" is such an ugly word. Like most of the fights I was picking in the mid 2000s, this also seems faintly antiquated and passé now. Sic transit gloria mundi and all that. ↩
or "nihil sub sole novum", since we're doing Latin quotes today ↩
and Windows's relationship with Python has always been a bit unsteady, although it's better these days now that Microsoft are prepared to acknowledge that other people can have ideas ↩
you write the pages in an online form, but then a server process builds a static HTML version of them; the advanced version of this where pages were only built on request was called "funky caching" back then ↩
if a disinterested observer were to consider this progression, they might unfairly but accurately conclude that whatever this site runs on is basically a half-arsed system I built based on the latest thing I'm interested in, mightn't they? ↩
tempus fugit. OK, I'll stop now. ↩
like this! ↩
an idea I stole shamelessly from Zach Leatherman ↩
Outgoing links are made to continue to work via unrot.link from the excellent Remy Sharp ↩
I was lying about not doing this any more, obviously ↩

Conference line-ups

Adactio: Journal — Thu, 16 Jan 2025 14:28:13 +0000

When I was looking back at 2024, I mentioned that I didn’t give a single conference talk (though I did host three conferences—Patterns Day, CSS Day, and UX London).

I almost spoke at a conference though. I was all set to speak at an event in the Netherlands. But then the line-up was announced and I was kind of shocked at the lack of representation. The schedule was dominated by white dudes like me. There were just four women in a line-up of 30 speakers.

When I raised my concerns, I was told:

We did receive a lot of talks, but almost no women because there are almost no women in this kind of jobs.

Yikes! I withdrew my participation.

I wish I could say that it was one-off occurrence, but it just happened again.

I was looking forward to speaking at DevDays Europe. I’ve never been to Vilnius but I’ve heard it’s lovely.

Now, to be fair, I don’t think the line-up is finalised, but it’s not looking good.

Once again, I raised my concerns. I was told:

Unfortunately, we do not get a lot of applications from women and have to work with what we have.

Even though I knew I was just proving Brandolini’s law, I tried to point out the problems with that attitude (while also explaining that I’ve curated many confernce line-ups myself):

It’s not really conference curation if you rely purely on whoever happens to submit a proposal. Surely you must accept some responsibility for ensuring a good diverse line-up?

The response began with:

I agree that it’s important to address the lack of diversity.

…but then went on:

I just wanted to share that the developer field as a whole tends to be male-dominated, not just among speakers but also attendees.

At this point, I’m face-palming. I tried pointing out that there might just be a connection between the make-up of the attendees and the make-up of the speaker line-up. Heck, if I feel uncomfortable attending such a homogeneous conference, imagine what a woman developer would think!

Then they dropped the real clanger:

While we always aim for a diverse line-up, our main focus has been on ensuring high-quality presentations and providing the best experience for our audience.

Double-yikes! I tried to remain calm in my response. I asked them to stop and think about what they were implying. They’re literally setting up a dichotomy between having a diverse line-up and having a good line-up. Like it’s inconceivable you could have both. As though one must come at the expense of the other. Just think about the deeply embedded bias that would enable that kind of worldview.

Needless to say, I won’t be speaking at that event.

This is depressing. It feels like we’re backsliding to what conferences were like 15 years ago.

I can’t help but spot the commonalaties between the offending events. Both of them have multiple tracks. Both of them have a policy of not paying their speakers. Both of them seem to think that opening up a form for people to submit proposals counts as curation. It doesn’t.

Don’t get me wrong. Having a call for proposals is great …as long as it’s part of an overall curation strategy that actually values diversity.

You can submit a proposal to speak at FFconf, for example. But Remy doesn’t limit his options to what people submit. He puts a lot of work into creating a superb line-up that is always diverse, and always excellent.

By the way, you can also submit a proposal for UX London. I’ve had lots of submissions so far, but again, I’m not going to limit my pool of potential speakers to just the people who know about that application form. That would be a classic example of the streetlight effect:

The streetlight effect, or the drunkard’s search principle, is a type of observational bias that occurs when people only search for something where it is easiest to look.

It’s quite depressing to see this kind of minimal-viable conference curation result in such heavily skewed line-ups. Withdrawing from speaking at those events is literally the least I can do.

I’m with Karolina:

What I’m looking for: at least 40% of speakers have to be women speaking on the subject of their expertise instead of being invited to present for the sake of adjusting the conference quotas. I want to see people of colour too. In an ideal scenario, I’d like to see as many gender identities, ethnical backgrounds, ages and races as possible.

A long-awaited talk

Adactio: Journal — Tue, 14 Jan 2025 16:26:34 +0000

Back in 2019 I had the amazing experience of going to CERN and being part of a team building an emulator of the first ever browser.

Remy was on the team too. He did the heavy lifting of actually making the thing work—quite an achievement in just five days!

Coming into this, I thought it was hugely ambitious to try to not only recreate the experience of using the first ever web browser (called WorldWideWeb, later Nexus), but to also try to document the historical context of the time. Now that it’s all done, I’m somewhat astounded that we managed to achieve both.

Remy and I were both keen to talk about the work, which is why we did a joint talk at Fronteers in Amsterdam that year. We’re both quite sceptical of talks given by duos; people think it means it’ll be half the work, when actually it’s twice the work. In the end we come up with a structure for the talk that we both liked:

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.

You can watch the video of that talk in Amsterdam. You can also read the transcript.

After putting so much work into the talk, we were keen to give it again somewhere. We had the chance to do that in Nottingham in early March 2020. (cue ominous foreboding)

The folks from local Brighton meetup Async had also asked if we wanted to give the talk. We were booked in for May 2020. (ominous foreboding intensifies)

We all know what happened next. The Situation. Lockdown. No conferences. No meetups.

But technically the talk wasn’t cancelled. It was just postponed. And postponed. And postponed. Before you know it, five years have passed.

Part of the problem was that Async is usually on the first Thursday of the month and that’s when I host an Irish music session in Hove. I can’t miss that!

But finally the stars aligned and last week Remy and I finally did the Async talk. You can watch a video of it.

I really enjoyed giving the talk and the discussion that followed. There was a good buzz.

It also made me appreciate the work that we put into stucturing the talk. We’ve only given it a few times but with a five year gap between presentations, I can confidentally say that’s it’s a timeless topic.

Train coding

Adactio: Journal — Mon, 14 Oct 2024 14:50:32 +0000

When I went up to London for the State of the Browser conference last month, I shared the train journey with Remy.

I always like getting together with Remy. We usually end up discussing sci-fi books we’re reading, commiserating with one another about conference-organising, discussing the minutiae of browser APIs, or talking about the big-picture vision of the World Wide Web.

On this train ride we ended up talking about the march of time and how death comes for us all …and our websites.

Take The Session, for example. It’s been running for two and a half decades in one form or another. I plan to keep it running for many more decades to come. But I’m the weak link in that plan.

If I get hit by a bus tomorrow, The Session will keep running. The hosting is paid up for a while. The domain name is registered for as long as possible. But inevitably things will need to be updated. Even if no new features get added to the site, someone’s got to install updates to keep the underlying software safe and secure.

Remy and I discussed the long-term prospects for widening out the admin work to more people. But we also discussed smaller steps I could take in the meantime.

Like, there’s the actual content of the website. Now, I currently share exports from the database every week in JSON, CSV, and SQLite. That’s good. But you need to be tech nerd to do anything useful with that data.

The more I talked about it with Remy, the more I realised that HTML would be the most useful format for the most people.

There’s a cute acronym in the world of digital preservation: LOCKSS. Lots Of Copies Keep Stuff Safe. If there were multiple copies of The Session’s content out there in the world, then I’d have a nice little insurance policy against some future catastrophe befalling the live site.

With the seed of the idea planted in my head, I waited until I had some time to dive in and see if this was doable.

Fortunately I had plenty of opportunity to do just that on some other train rides. When I was in Spain and France recently, I spent hours and hours on trains. For some reason, I find train journeys very conducive to coding, especially if you don’t need an internet connection.

By the time I was back home, the code was done. Here’s the result:

The Session archive: a static copy of the content on thesession.org.

If you want to grab a copy for yourself, go ahead and download this .zip file. Be warned that it’s quite large! The .zip file is over two gigabytes in size and the unzipped collection of web pages is almost ten gigabytes. I plan to update the content every week or so.

I’ve put a copy up on Netlify and I’m serving it from the subdomain archive.thesession.org if you want to check out the results without downloading the whole thing.

Because this is a collection of static files, there’s no search. But you can use your browser’s “Find in Page” feature to search within the (very long) index pages of each section of the site.

You don’t need to a web server to click around between the pages: they should all work straight from your file system. Double-clicking any HTML file should give a starting point.

I wanted to reduce the dependencies on each page to as close to zero as I could. All the CSS is embedded in the the page. Likewise with most of the JavaScript (you’ll still need an internet connection to get audio playback and dynamic maps). This keeps the individual pages nice and self-contained. That means they can be shared around (as an email attachment, for example).

I’ve shared this project with the community on The Session and people are into it. If nothing else, it could be handy to have an offline copy of the site’s content on your hard drive for those situations when you can’t access the site itself.

The selectmenu Element is No More…Long Live select!

CSS-Tricks — Mon, 23 Sep 2024 15:43:05 +0000

I was looking over an older article Patrick Brosset penned for us introducing , a new proposal at the time for a more style-able cousin to . I enjoyed looking at the boilerplate from Adam’s demo as a first glance:

select {
  &, &::picker(select) {
    appearance: base-select;
  }
  
  &::picker(select) {
    transition: 
      display allow-discrete 1s, 
      opacity 1s, 
      overlay 1s allow-discrete
    ;
  }
  
  &:not(:open)::picker(select) {
    opacity: 0;
  }
  
  &:open::picker(select) {
    opacity: 1;
    
    @starting-style {
      opacity: 0;
    }
  }
}

I see the ::picker(select) there that’s driving all of it. If I sneak a peek at Una’s post, I see that there are more ways to select different with additional CSS features for selecting the existing parts rather than moving forward with a completely new element. That’s cool, as one of Una’s demos shows how we still get the default or </code>). </blockquote> So using the <code>:blank</code> pseudo-class will look something like this <div class="highlight js-code-highlight"> <pre class="highlight css"><code>input:blank{ background: red; } textarea:blank{ color: green; } </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> Enter fullscreen mode Exit fullscreen mode </div> </div> </div> ✨ NOTE1: Since this is a syntactic proprety of CSS using <code>textarea:blank</code> will be ruled out as an invalid selector by the CSS Parser. So instead we will use <code>textarea[blank]</code>. Just keep in mind that in the rest of this post I will use <code>:blank</code> and <code>[blank]</code> interchangeably. ✨ NOTE2: This is actually what <a href="https://github.com/csstools/css-blank-pseudo/blob/HEAD/README-POSTCSS.md">PostCSS</a> does underneath the hood. It replaces all occurences of <code>:blank</code> with <code>[blank]</code>. Let's think about how we can achieve this. We need : 1. Some way to access our stylesheet(s). 2. Detect selectors of the form <code>selector[blank]</code>. 3. Bind our the blank pseudo-class to the selected elements. 4. Update styles when value of input is changed. 👋 Beginner's Tip: This is a good time to open <a href="https://codepen.io/pen/">codepen</a> and start experimenting. These are our requirements. Let's talk about how we can tackle each and everyone: 1. Some way to access our stylesheet => <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model"><code>CCSOM</code></a> 2. Detect <code>:blank</code> function => use a regex 3. Bind our the blank pseudo-class to the selected elements => Add an attribute to the selected inputs 4. Update the value of the state of the input when the the value is changed via JS => listen for the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input event</code></a> <h3> <a href="https://dev.to/issammani/polyfills-what-are-they-2ha5#1-access-our-stylesheets" class="anchor"> </a> 1. Access our stylesheets </h3> First we need to access our CSS Stylesheets. We do so by using CCSOM, specifically by accessing the <code>styleSheets</code> prop on the document. <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code>for(let styleSheet of document.styleSheets) { for(let cssRule of styleSheet.cssRules) { console.log(cssRule.cssText); // Prints each css rule in our stylesheets } } </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> Enter fullscreen mode Exit fullscreen mode </div> </div> </div> More on <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSSRule"><code>CSSRule</code></a> <h3> <a href="https://dev.to/issammani/polyfills-what-are-they-2ha5#2-locate-selectors-with-raw-blank-endraw-pseudoclass" class="anchor"> </a> 2. Locate selectors with <code>:blank</code> pseudo-class </h3> Now that we have access to all the CSS rules we can check if any of them have the <code>:blank</code> pseudo-class. <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code>const blankRegex = /(.*)\[blank\]/; for(let styleSheet of document.styleSheets) { for(let cssRule of styleSheet.cssRules) { const match = cssRule.selectorText.match(blankRegex); if(match) {console.log(match[1]);} // Prints matched selector name i.e input, textarea without the [blank] } } </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> Enter fullscreen mode Exit fullscreen mode </div> </div> </div> 🛑 Refactor detoure Let's try to refactor our code so that it doesn't get messy. Let's start by defining a function that's responsible for returning an array of selectors. <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code>const extractBlankSelectors = () => { const blankRegex = /(.*)\[blank\]/; // Returns an array of of all CSSRules const cssRules = [...document.styleSheets] .map(styleSheet => [...styleSheet.cssRules]) .flat(); // Returns an array with our desired selectors const blankSelectors = cssRules.map(cssRule => cssRule.selectorText) .reduce((acc, curr) => acc.concat(curr.split(",")), []) .map(selectorText => selectorText.match(blankRegex) ? selectorText.match(blankRegex)[1] : null) .filter(selector => !!selector); return blankSelectors; }; </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> Enter fullscreen mode Exit fullscreen mode </div> </div> </div> Here I used a functional approach instead of using for loops as before, but you can achieve the same with the nested for loops. If this looks weird or confusing to you here a nice <a href="https://opensource.com/article/17/6/functional-javascript">article</a> talking about this. Also feel free to ask in the comments section. 🛑Refactor detour end <h3> <a href="https://dev.to/issammani/polyfills-what-are-they-2ha5#34-bind-our-the-blank-pseudoclass-to-the-selected-elements-and-watch-for-change-" class="anchor"> </a> 3,4. Bind our the blank pseudo-class to the selected elements and watch for change ! </h3> Now that we have access to the the desired selectors via <code>extractBlankSelectors</code> we can easily select and add attributes to our target elements. <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code>.... const bindBlankElements = () => { // Select all elements from DOM that match our SelectorList const elements = document.querySelectorAll(extractBlankSelectors().join(',')); elements.forEach(element => { // Add blank attribute if value is empty if(element.value === '') { element.setAttribute('blank', ''); } // Attach an input event listener element.addEventListener('input', (ev) => { element.value === '' ? element.setAttribute('blank', '') : element.removeAttribute('blank', ''); }); }); }; </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> Enter fullscreen mode Exit fullscreen mode </div> </div> </div> Initially we select all the elements returned from <code>extractBlankSelectors</code>. Then for each one of them: <ul> <li>Add blank attribute if the value is empty.</li> <li>Attach an input event listener. On eah input the callback checks wether the input value is empty or not and applies the <code>blank</code> attribute accordingly.</li> </ul> Here is a codepen to try it out live: </iframe> Et voilà ! We are all done ! <h2> <a href="https://dev.to/issammani/polyfills-what-are-they-2ha5#conclusion" class="anchor"> </a> Conclusion </h2> As you can see polyfills are a super important concept, that helped the web move forward and developers use new features without the fear of breaking compatibility. If you enjoyed reading this like, share and/or leave a comment. Feedback is always welcome ! Live long and prosper 🖖 <h2> <a href="https://dev.to/issammani/polyfills-what-are-they-2ha5#useful-links" class="anchor"> </a> Useful links </h2> <ul> <li><a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills">A List of cross browser polyfills</a></li> <li><a href="https://remysharp.com/2010/10/08/what-is-a-polyfill/">Remy Sharp's original post about polyfills</a></li> <li><a href="">A third link</a></li> </ul> </article> <article> <h1>Polyfills - What are they ?</h1> DEV Community — Fri, 12 Feb 2021 13:35:10 +0000 The web is full of weird terminology, that can be especially daunting for newcomers. The idea behind this blog post and ( hopefully 🤞 ) upcoming blog posts is to demistify "fancy" terms. In this article we will discuss polyfills. <h1> <a href="https://dev.to/issammani/polyfills-what-are-they-2ha5#in-plain-english" class="anchor"> </a> In plain english </h1> Polyfills are pieces of code that aim to make new features available on browsers ( or JS environments in general ) that don't or won't support said features. Two things to keep in mind: <ul> <li>Not all features are polyfillable ( new syntactic features cannot be polyfilled e.g. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">spread syntax(...)</a>.</li> <li>A polyfill only runs, when the feature is missing. Otherwise it should use the native implementation.</li> </ul> <h1> <a href="https://dev.to/issammani/polyfills-what-are-they-2ha5#a-brief-history" class="anchor"> </a> A brief history... </h1> The word polyfill was initially introduced [ coined and popularized] by <a href="https://remysharp.com/2010/10/08/what-is-a-polyfill/">Remy Sharp</a> in 2009. The word itself originates from the name Polyfilla, a british product used to fill cracks and holes in walls. <blockquote> Polyfilla is a UK product known as Spackling Paste in the US. With that in mind: think of the browsers as a wall with cracks in it. These polyfills help smooth out the cracks and give us a nice smooth wall of browsers to work with. -- Remy Sharp </blockquote> Enough history. I said brief, didn't I ! <h1> <a href="https://dev.to/issammani/polyfills-what-are-they-2ha5#polyfills-vs-transpilers" class="anchor"> </a> Polyfills vs Transpilers </h1> Before digging any deeper, let's try to make the difference between the terms Polyfill and Transpiler clear. Remember how I said there is no way to polyfill new js syntax. Well a transpiler ( transformer + compiler ) does just that. It transforms new syntax into equivalent old syntax that is supported by old browsers. So unlike a polyfill, the code you write is transpiled into alternate code, that would eventually run in the browser. Keep in mind that a transpiler like babel will use, depending on your target browsers, underneath the hood polyfills to support new features. If you are still unsure about the difference, here is an <a href="https://stackoverflow.com/a/48149493">SO</a> response that goes into a bit more detail. <h1> <a href="https://dev.to/issammani/polyfills-what-are-they-2ha5#lets-write-our-own-polyfill" class="anchor"> </a> Let's write our own polyfill </h1> All right, let's dig in. As I mentioned before a polyfill is just a piece of code, that aims to make some functionality available across all browsers. Usually a good polyfill will check if the target feature already is supported in the browser. If so do nothing da! Otherwise use the available APIs to mimic the behavior of this new feature. <h2> <a href="https://dev.to/issammani/polyfills-what-are-they-2ha5#js-raw-elementclosestselectorlist-endraw-" class="anchor"> </a> JS : <code>Element.closest(selectorList)</code> </h2> According to <a href="">MDN</a>: <blockquote> The <code>closest()</code> method traverses the <code>Element</code> and its parents (heading toward the document root) until it finds a node that matches the provided selector string. Will return itself or the matching ancestor. If no such element exists, it returns <code>null</code>. </blockquote> So basically given an HTML Element the <code>closest()</code> method returns the closest element in the elements tree that matches at least one of the selectors in the selectorList. Assume we have the following HTML DOM: <div class="highlight js-code-highlight"> <pre class="highlight html"><code>... <div class="level-1"> <div class="level-2"> <p class="level-3"> Polyfills are awesome 🎉 </div> </div> ... </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> Enter fullscreen mode Exit fullscreen mode </div> </div> </div> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code>const paragraph = document.querySelector('p'); paragraph.closest('.level-1'); // Returns <div class="level-1">...</div> paragraph.closest('.level-1, .level-2'); // Returns <div class="level-2">...</div> paragraph.closest('.level-3'); // Returns paragrah itself paragraph.closest('.level-bla'); // Returns null </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> Enter fullscreen mode Exit fullscreen mode </div> </div> </div> All right ! Now that we know how this function works , we can start implementing. 👋 Beginner's Tip: This is a good time to open <a href="https://codepen.io/pen/">codepen</a> and start experimenting. Let's think about the problem for a second (or more). We need: <ol> <li>A way to traverse the DOM upwards.</li> <li>To check if element matches the selectorList.</li> </ol> Now, let's talk solutions: <ol> <li>A way to traverse the DOM upwards *=> use a while loop and the <a href=""><code>.parentElement</code></a> prop.</li> <li>To check if element matches the selectorList => use the <a href=""><code>.matches()</code></a> method. </li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code>const closest = (element, selectorList) => { while(element && !element.matches(selectorList)) { element = element.parentElement; } return element; }; </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> Enter fullscreen mode Exit fullscreen mode </div> </div> </div> So in the snippet above, we are defining a function that takes two arguments: <code>element</code> and <code>selectorList</code>. Then we are looping until one of two things happen: <ul> <li> <code>element</code> is null, and therefore we have reached the root element.</li> <li> <code>element.matches(selectorList)</code> returns true, and therefore we found the closest element that matches our <code>selectorList</code>.</li> </ul> We can check that this beahves the same way on our previous test set. <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code>... const paragraph = document.querySelector('p'); closest(paragraph, '.level-1'); // Returns <div class="level-1">...</div> closest(paragraph,'.level-1, .level-2'); // Returns <div class="level-2">...</div> closest(paragraph,'.level-3'); // Returns paragrah itself closest(paragraph,'.level-bla'); // Returns null </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> Enter fullscreen mode Exit fullscreen mode </div> </div> </div> The last step is to add the function to the Element's <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes"><code>prototype</code></a>, so that it's available to all instances of the <code>Element</code> object: <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code>Element.prototype.closest = (selectorList) => { let element = this; while(element && !element.matches(selectorList)) { element = element.parentElement; } return element; }; </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> Enter fullscreen mode Exit fullscreen mode </div> </div> </div> One last detail, is that we would rather prefer if our polyfill somehow adds this function to the prototype only if the browser doesn't support it. In other words, we would rather use the browser's native implementation if it's available. A simple if will do ! <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code>if(!Element.prototype.closest) { Element.prototype.closest = (selectorList) => { let element = this; while(element && !element.matches(selectorList)) { element = element.parentElement; } return element; }; } </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> Enter fullscreen mode Exit fullscreen mode </div> </div> </div> ✨ NOTE: This is by no means a production-ready polyfill. For simplicity I assumed a lot of things. A production-ready polyfill would also account for the fact that <code>.matches()</code> may not exist and also check different browser vendor prefixes. A more complete version can be found <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill">here</a> <h2> <a href="https://dev.to/issammani/polyfills-what-are-they-2ha5#css-raw-blank-endraw-" class="anchor"> </a> CSS: <code>:blank</code> </h2> As of the time of writing the <code>:blank</code> pseudo-class has very <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:blank">low</a> support . In this section we will try to write a rough polyfill (not complete by any means) just to demonstrate the idea of polyfilling CSS functionality. Again I will quote the MDN definition ( as one normally does ! ) : <blockquote> The :blank CSS pseudo-class selects empty user input elements (e.g. <code><input></code> or <code><textarea></code>). </blockquote> So using the <code>:blank</code> pseudo-class will look something like this <div class="highlight js-code-highlight"> <pre class="highlight css"><code>input:blank{ background: red; } textarea:blank{ color: green; } </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> Enter fullscreen mode Exit fullscreen mode </div> </div> </div> ✨ NOTE1: Since this is a syntactic proprety of CSS using <code>textarea:blank</code> will be ruled out as an invalid selector by the CSS Parser. So instead we will use <code>textarea[blank]</code>. Just keep in mind that in the rest of this post I will use <code>:blank</code> and <code>[blank]</code> interchangeably. ✨ NOTE2: This is actually what <a href="https://github.com/csstools/css-blank-pseudo/blob/HEAD/README-POSTCSS.md">PostCSS</a> does underneath the hood. It replaces all occurences of <code>:blank</code> with <code>[blank]</code>. Let's think about how we can achieve this. We need : 1. Some way to access our stylesheet(s). 2. Detect selectors of the form <code>selector[blank]</code>. 3. Bind our the blank pseudo-class to the selected elements. 4. Update styles when value of input is changed. 👋 Beginner's Tip: This is a good time to open <a href="https://codepen.io/pen/">codepen</a> and start experimenting. These are our requirements. Let's talk about how we can tackle each and everyone: 1. Some way to access our stylesheet => <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model"><code>CCSOM</code></a> 2. Detect <code>:blank</code> function => use a regex 3. Bind our the blank pseudo-class to the selected elements => Add an attribute to the selected inputs 4. Update the value of the state of the input when the the value is changed via JS => listen for the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input event</code></a> <h3> <a href="https://dev.to/issammani/polyfills-what-are-they-2ha5#1-access-our-stylesheets" class="anchor"> </a> 1. Access our stylesheets </h3> First we need to access our CSS Stylesheets. We do so by using CCSOM, specifically by accessing the <code>styleSheets</code> prop on the document. <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code>for(let styleSheet of document.styleSheets) { for(let cssRule of styleSheet.cssRules) { console.log(cssRule.cssText); // Prints each css rule in our stylesheets } } </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> Enter fullscreen mode Exit fullscreen mode </div> </div> </div> More on <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSSRule"><code>CSSRule</code></a> <h3> <a href="https://dev.to/issammani/polyfills-what-are-they-2ha5#2-locate-selectors-with-raw-blank-endraw-pseudoclass" class="anchor"> </a> 2. Locate selectors with <code>:blank</code> pseudo-class </h3> Now that we have access to all the CSS rules we can check if any of them have the <code>:blank</code> pseudo-class. <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code>const blankRegex = /(.*)\[blank\]/; for(let styleSheet of document.styleSheets) { for(let cssRule of styleSheet.cssRules) { const match = cssRule.selectorText.match(blankRegex); if(match) {console.log(match[1]);} // Prints matched selector name i.e input, textarea without the [blank] } } </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> Enter fullscreen mode Exit fullscreen mode </div> </div> </div> 🛑 Refactor detoure Let's try to refactor our code so that it doesn't get messy. Let's start by defining a function that's responsible for returning an array of selectors. <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code>const extractBlankSelectors = () => { const blankRegex = /(.*)\[blank\]/; // Returns an array of of all CSSRules const cssRules = [...document.styleSheets] .map(styleSheet => [...styleSheet.cssRules]) .flat(); // Returns an array with our desired selectors const blankSelectors = cssRules.map(cssRule => cssRule.selectorText) .reduce((acc, curr) => acc.concat(curr.split(",")), []) .map(selectorText => selectorText.match(blankRegex) ? selectorText.match(blankRegex)[1] : null) .filter(selector => !!selector); return blankSelectors; }; </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> Enter fullscreen mode Exit fullscreen mode </div> </div> </div> Here I used a functional approach instead of using for loops as before, but you can achieve the same with the nested for loops. If this looks weird or confusing to you here a nice <a href="https://opensource.com/article/17/6/functional-javascript">article</a> talking about this. Also feel free to ask in the comments section. 🛑Refactor detour end <h3> <a href="https://dev.to/issammani/polyfills-what-are-they-2ha5#34-bind-our-the-blank-pseudoclass-to-the-selected-elements-and-watch-for-change-" class="anchor"> </a> 3,4. Bind our the blank pseudo-class to the selected elements and watch for change ! </h3> Now that we have access to the the desired selectors via <code>extractBlankSelectors</code> we can easily select and add attributes to our target elements. <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code>.... const bindBlankElements = () => { // Select all elements from DOM that match our SelectorList const elements = document.querySelectorAll(extractBlankSelectors().join(',')); elements.forEach(element => { // Add blank attribute if value is empty if(element.value === '') { element.setAttribute('blank', ''); } // Attach an input event listener element.addEventListener('input', (ev) => { element.value === '' ? element.setAttribute('blank', '') : element.removeAttribute('blank', ''); }); }); }; </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> Enter fullscreen mode Exit fullscreen mode </div> </div> </div> Initially we select all the elements returned from <code>extractBlankSelectors</code>. Then for each one of them: <ul> <li>Add blank attribute if the value is empty.</li> <li>Attach an input event listener. On eah input the callback checks wether the input value is empty or not and applies the <code>blank</code> attribute accordingly.</li> </ul> Here is a codepen to try it out live: </iframe> Et voilà ! We are all done ! <h2> <a href="https://dev.to/issammani/polyfills-what-are-they-2ha5#conclusion" class="anchor"> </a> Conclusion </h2> As you can see polyfills are a super important concept, that helped the web move forward and developers use new features without the fear of breaking compatibility. If you enjoyed reading this like, share and/or leave a comment. Feedback is always welcome ! Live long and prosper 🖖 <h2> <a href="https://dev.to/issammani/polyfills-what-are-they-2ha5#useful-links" class="anchor"> </a> Useful links </h2> <ul> <li><a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills">A List of cross browser polyfills</a></li> <li><a href="https://remysharp.com/2010/10/08/what-is-a-polyfill/">Remy Sharp's original post about polyfills</a></li> <li><a href="">A third link</a></li> </ul> </article> <article> <h1>The web didn’t change; you did</h1> Adactio: Links — Thu, 11 Feb 2021 15:00:15 +0000 <blockquote> The problem with developing front end projects isn’t that it’s harder or more complicated, it’s that you made it harder and more complicated. </blockquote> Yes! THIS! <blockquote> Web development did not change. Web development grew. There are more options now, not different options. </blockquote> You choose complexity. You can also choose simplicity. <a href="https://adactio.com/links/17811">adactio.com/links/17811</a> </article> <article> <h1>Week Notes №3 ending 14 Jun 2019</h1> Zach Leatherman — Fri, 14 Jun 2019 05:00:00 +0000 <h2 id="monday-june-10">Monday June 10 <a class="direct-link" href="https://www.zachleat.com/web/notes/week/2019/06/14/#monday-june-10">#</a></h2> <ul> <li><a href="https://twitter.com/rem/status/1138111172048248832">Remy Sharp reminded us that that Disqus’ JavaScript is a trojan horse for all kinds of tracking and fourth-party JavaScript</a>. Notably a lot of this is <a href="https://twitter.com/zachleat/status/1138127857119584256">blocked by default in Firefox (without an ad-blocker)</a>. Firefox’s site performance gets a huge head start on Chrome because of Mozilla’s excellent decision to block this extra junk.</li> <li><a href="https://github.com/zloirock/core-js/issues/548"><code>core-js</code> decided to console log a message on postinstall to ask for project donations</a> and spurred a big discussion on best practices for open source sustainability. I empathize with what they’re trying to do but I think the execution was a bit off—I’ve seen this message in my console so many times that it’s feeling a bit like spam.</li> <li>Ryan Frazier is using <a href="https://pianomanfrazier.com/post/lilypond-in-markdown/">Eleventy to render sheet music</a>! WHAT.</li> <li>The <a href="https://changelog.com/jsparty/79">JS Party episode that I was on</a> was published.</li> <li>I wrote a post about <a href="https://www.zachleat.com/web/facepile/">Facepile image performance and lazy loading webmention avatar images</a>.</li> </ul> <h2 id="tuesday-june-11">Tuesday June 11 <a class="direct-link" href="https://www.zachleat.com/web/notes/week/2019/06/14/#tuesday-june-11">#</a></h2> <ul> <li>I finally got a little bit of time to play with Nuxt. I’m becoming a big fan of Vue and it works great but goodness Nuxt loads a fair bit of JavaScript for the Hello World demo.</li> <li>I switched my site to use <code>brotli</code> instead of <code>zopfli</code> compression. I’d take a wild guess that it’s about 10% better? Here’s <a href="https://github.com/zachleat/zachleat.com/commit/4e8f33e3ca55b16df5268721098224f1021b1bb3">how I did it</a>.</li> <li>Update: Remy Sharp removed Disqus from his site and blogged about it in <a href="https://remysharp.com/2019/06/11/ejecting-disqus">Ejecting Disqus</a>. He replaced it with <a href="https://commento.io/">Commento</a>.</li> </ul> <h2 id="wednesday-june-12">Wednesday June 12 <a class="direct-link" href="https://www.zachleat.com/web/notes/week/2019/06/14/#wednesday-june-12">#</a></h2> <ul> <li>I found an XSS problem in my webmentions. I needed to adjust my use of sanitize-html in my build to make sure that it was escaping all of the webmention output. Max Boeck updated his <a href="https://github.com/maxboeck/eleventy-webmentions/"><code>eleventy-webmentions</code></a> project with this fix as well. <a href="https://twitter.com/zachleat/status/1138797014928568325">(via Twitter)</a></li> </ul> <h2 id="thursday-june-13">Thursday June 13 <a class="direct-link" href="https://www.zachleat.com/web/notes/week/2019/06/14/#thursday-june-13">#</a></h2> <ul> <li>I did a <a href="https://www.smashingmagazine.com/smashing-tv/five-whys-of-web-font-loading-performance/">Smashing TV Webinar</a>. It was an updated version (a minor release) of a talk that I gave at <a href="https://www.zachleat.com/web/five-whys/">Performance.now()</a> last year. I published the <a href="https://www.zachleat.com/web/smashingtv/">new, updated slides</a>. The video is free to Smashing members!</li> <li>We (Filament Group) launched <a href="https://www.filamentgroup.com/">a redesign of our web site</a>! <a href="https://twitter.com/scottjehl/status/1138899549840392197">Scott Jehl has more about it on Twitter</a>. (Still using Eleventy 😎)</li> <li><a href="https://www.hawksworx.com/">Phil Hawksworth</a> did a big update to his very popular <a href="https://eleventyone.netlify.com/">Eleventy starter project, EleventyOne</a>. It’s great! <a href="https://twitter.com/philhawksworth/status/1139136281563283457">(via Twitter)</a></li> </ul> <h2 id="friday-june-14">Friday June 14 <a class="direct-link" href="https://www.zachleat.com/web/notes/week/2019/06/14/#friday-june-14">#</a></h2> <ul> <li>I noticed that the much renowned photographer <a href="https://normanposselt.com/">Norman Posselt</a> published an <a href="https://www.instagram.com/p/ByPXtDWC4m1/">Instagram sneak preview of the portrait</a> he took of me directly after my talk at Beyond Tellerrand!</li> <li>New awesome Eleventy site: <a href="https://every-layout.dev/">Every Layout: Relearn CSS Layout</a> from <a href="https://twitter.com/heydonworks">Heydon Pickering</a> and <a href="https://andy-bell.design/">Andy Bell</a>.</li> <li>Another new awesome Eleventy site: <a href="https://ffconf.org/">ffconf.org</a>, a very popular long-running conference series organized by Left Logic. Thanks <a href="https://remysharp.com/">Remy Sharp</a>!</li> </ul> </article> <article> <h1>Speaking online</h1> Adactio: Journal — Mon, 04 Jan 2021 15:43:19 +0000 I really, really missed speaking at conferences in 2020. I managed to squeeze in just one meatspace presentation before everything shut down. That was in Nottingham, where myself and <a href="https://remysharp.com/">Remy</a> reprised our double-bill talk, <a href="https://adactio.com/articles/15975"><cite>How We Built The World Wide Web In Five Days</cite></a>. That was pretty much all the travelling I did in 2020, apart from <a href="https://adactio.com/journal/16518">a joyous jaunt to Galway</a> to celebrate my birthday shortly before the Nottingham trip. It’s kind of hilarious to look at <a href="https://adactio.com/archive/2020/map">a map of the entirety of my travel in 2020</a> compared to previous years. Mind you, one of my goals for 2020 was to reduce my carbon footprint. Mission well and truly accomplished there. But even when travel was out of the question, conference speaking wasn’t entirely off the table. I gave a brand new talk at <a href="https://aneventapart.com/event/online-0820">An Event Apart Online Together: Front-End Focus</a> in August. It was called <cite>Design Principles For The Web</cite> and <a href="https://adactio.com/articles/17733">I’ve just published a transcript of the presentation</a>. I’m really pleased with how it turned out and I think it works okay as an article as well as a talk. <a href="https://adactio.com/articles/17733">Have a read</a> and see what you think (or you can <a href="http://adactio.s3.amazonaws.com/audio/articles/aea2020designprinciplesfortheweb.mp3">listen to the audio</a> if you prefer). Giving a talk online is …weird. It’s very different from public speaking. The public is theoretically there but you feel like you’re just talking at your computer screen. If anything, it’s more like recording a podcast than giving a talk. Luckily for me, <a href="https://podcast.clearleft.com/">I like recording podcasts</a>. So I’m going to be doing a new online talk this year. It will be at <a href="https://aneventapart.com/event/spring-summit-2021">An Event Apart’s Spring Summit</a> which runs from April 19th to 21st. <a href="https://store.aneventapart.com/register/2021/spring-summit">Tickets are available now</a>. I have a pretty good idea what I’m going to talk about. Web stuff, obviously, but maybe a big picture overview this time: the past, present, and future of the web. Time to <a href="https://adactio.com/journal/14363">prepare a conference talk</a>. </article> <article> <h1>Upgrades and polyfills</h1> Adactio: Journal — Wed, 11 Nov 2020 12:44:56 +0000 I started getting some emails recently from people having issues using <a href="https://thesession.org/">The Session</a>. The issues sounded similar—an interactive component that wasn’t, well …interacting. When I asked what device or browser they were using, the answer came back the same: Safari on iPad. But not a new iPad. These were older iPads running older operating systems. Now, remember, even if I wanted to recommend that they use a different browser, <a href="https://adactio.com/journal/17428">that’s not an option</a>: <blockquote> Safari is the only browser on iOS devices. I don’t mean it’s the only browser that ships with iOS devices. I mean it’s the only browser that can be installed on iOS devices. You can install something called Chrome. You can install something called Firefox. Those aren’t different web browsers. Under the hood they’re using Safari’s rendering engine. They have to. </blockquote> It gets worse. Not only is there no choice when it comes to rendering engines on iOS, but the rendering engine is also tied to the operating system. If you’re on an old Apple laptop, you can at least install an up-to-date version of Firefox or Chrome. But you can’t install an up-to-date version of Safari. An up-to-date version of Safari requires an up-to-date version of the operating system. It’s the same on iOS devices—you can’t install a newer version of Safari without installing a newer version of iOS. But unlike the laptop scenario, you can’t install any version of Firefox of Chrome. It’s disgraceful. It’s particularly frustrating when an older device can’t upgrade its operating system. Upgrades for Operating system generally have some hardware requirements. If your device doesn’t meet those requirements, you can’t upgrade your operating system. That wouldn’t matter so much except for the Safari issue. Without an upgraded operating system, your web browsing experience stagnates unnecessarily. <a href="https://en.wikipedia.org/wiki/For_Want_of_a_Nail">For want of a nail</a>… <ul> <li>A website feature isn’t working so</li> <li>you need to upgrade your browser which means</li> <li>you need to upgrade your operating sytem but</li> <li>you can’t upgrade your operating system so</li> <li>you need to buy a new device.</li> </ul> <a href="https://developer.apple.com/app-store/review/guidelines/#2.5.6">Apple doesn’t allow other browsers to be installed on iOS devices</a> so people have to buy new devices if they want to use the web. Handy for Apple. Bad for users. Really bad for the planet. It’s particularly galling when it comes to iPads. Those are exactly the kind of casual-use devices that shouldn’t need to be caught in the wasteful cycle of being used for a while before getting thrown away. I mean, I get why you might want to have a relatively modern phone—a device that’s constantly with you that you use all the time—but an iPad is the perfect device to just have lying around. You shouldn’t feel pressured to have the latest model <a href="https://www.lifewire.com/obsolete-ipad-4138570">if the older version still does the job</a>: <blockquote> An older tablet makes a great tableside companion in your living room, an effective e-book reader, or a light-duty device for reading mail or checking your favorite websites. </blockquote> Hang on, though. There’s another angle to this. Why should a website demand an up-to-date browser? If the website has been built using the tried and tested approach of progressive enhancement, then everyone should be able to achieve their goals regardless of what browser or device or operating system they’re using. On <a href="https://thesession.org/">The Session</a>, I’m using progressive enhancement and feature detection everywhere I can. If, for example, I’ve got some JavaScript that’s going to use <code>querySelectorAll</code> and <code>addEventListener</code>, I’ll first test that those methods are available. <pre><code>if (!document.querySelectorAll || !window.addEventListener) { // doesn't cut the mustard. return; } </code></pre> I try not to assume that anything is supported. So why was I getting emails from people with older iPads describing an interaction that wasn’t working? A JavaScript error was being thrown somewhere and—because of JavaScript’s brittle error-handling—that was causing all the subsequent JavaScript to fail. I tracked the problem down to a function that was using some DOM methods—<code>matches</code> and <code>closest</code>—as well as the relatively recent JavaScript <code>forEach</code> method. But I had <a href="https://remysharp.com/2010/10/08/what-is-a-polyfill/">polyfills</a> in place for all of those. Here’s <a href="https://github.com/jonathantneal/closest/blob/master/src/index.js">the polyfill I’m using for <code>matches</code> and <code>closest</code></a>. And here’s <a href="https://gist.github.com/hufyhang/c303ce1b80c7b6f8a73e">the polyfill I’m using for <code>forEach</code></a>. Then I spotted the problem. I was using <code>forEach</code> to loop through the results of <code>querySelectorAll</code>. But the polyfill works on arrays. Technically, the output of <code>querySelectorAll</code> isn’t an array. It looks like an array, it quacks like an array, but it’s actually a node list. So I added <a href="https://vanillajstoolkit.com/polyfills/nodelistforeach/">this polyfill from Chris Ferdinandi</a>. That did the trick. I checked with the people with those older iPads and everything is now working just fine. For the record, <a href="https://gist.github.com/adactio/e2bcd49379d4385e577924ec3339aeb1">here’s the small collection of polyfills I’m using</a>. Polyfills are supposed to be temporary. At some stage, as everyone upgrades their browsers, I should be able to remove them. But as long as some people are stuck with using an older browser, I have to keep those polyfills around. I wish that Apple would allow other rendering engines to be installed on iOS devices. But if that’s a hell-freezing-over prospect, I wish that Safari updates weren’t tied to operating system updates. Apple may argue that their browser rendering engine and their operating system are deeply intertwingled. That line of defence worked out great for Microsoft in the ‘90s. </article> <article> <h1>How To Drive Traffic To Your Website - Side Project Edition</h1> DEV Community — Wed, 04 Nov 2020 07:11:30 +0000 You've been working on your side project for nearly 6 months now, launch date's today. You're super excited to show the world what you've been working on, you hit the launch button and...no traffic or users at all. It's a common problem. Us IndieHackers know where to advertise our products, but not all of us know how to post our products. I've split up this blog post to two categories: 👉 How to get a huge traffic boost for a short period of time with little to no work. 👉 How to get steady traffic by using long-term strategies. <h1> <a href="https://dev.to/moeminm/how-to-drive-traffic-to-your-website-side-project-edition-451g#huge-traffic-boosts" class="anchor"> </a> Huge Traffic Boosts </h1> This is a great way to not only gain traffic, but also to validate your idea (if you haven't already). There are hundreds of directories all over the internet that you can post your side project to and in return get huge traffic boosts. Let me go over where to post your side projects, the pros and cons of posting on said websites, and how to post on said websites. <h3> <a href="https://dev.to/moeminm/how-to-drive-traffic-to-your-website-side-project-edition-451g#where-to-post-your-side-projects" class="anchor"> </a> Where To Post Your Side Projects </h3> <ul> <li><a href="https://www.reddit.com/">Reddit</a></li> <li><a href="https://news.ycombinator.com/">HackerNews</a></li> <li><a href="https://www.producthunt.com/">ProductHunt</a></li> <li><a href="https://betalist.com/">Betalist</a></li> <li><a href="https://betapage.co/">Betapage</a></li> <li> <a href="https://www.sideprojectors.com/">Sideprojectors</a>, yes, you can showcase your projects on Sideprojectors.</li> <li><a href="https://launched.io/SubmitStartup">Launched</a></li> <li><a href="https://www.saashub.com/">SaaSHub</a></li> </ul> There are hundreds more websites you can submit your side projects to, but let's keep it simple for the sake of keeping this blog post short and sweet. <h3> <a href="https://dev.to/moeminm/how-to-drive-traffic-to-your-website-side-project-edition-451g#pros-and-cons-of-posting-on-directories" class="anchor"> </a> Pros and Cons of Posting On Directories </h3> Pros: <ul> <li>Free huge traffic boost and all that comes with it. Be it sales, newsletter subscriptions, etc.</li> </ul> Cons: <ul> <li>Short term traffic. You could very well succeed on Reddit, HackerNews, and ProductHunt and you'd be set for a good week or so, but it'll be drought season afterwards.</li> <li>Wrong audience. You're not necessarily targeting the 'optimal' audience by posting your side project on all these websites. </li> </ul> Should you do it? Short answer, yes. Long answer, yes. Despite the low quality of traffic, you'll still be seeing a good portion of your target audience on these platforms. You're not really paying to submit on these platforms, so do it, if it works, good on you. If not, you should have a backup plan (second category in this blog post). <h3> <a href="https://dev.to/moeminm/how-to-drive-traffic-to-your-website-side-project-edition-451g#how-to-post-on-these-platforms" class="anchor"> </a> How To Post On These Platforms </h3> I've been waiting for this section. Let's assume you're releasing a website performance monitoring tool called Monitr. Things you should not do: ❌ Do not post your URL on all platforms meaninglessly. Yup, that's it. So how do you share your product? Well, on websites such as ProductHunt, BetaPage and so on, there really isn't much you can do other than post the URL, but on community-based websites such as IndieHackers, Reddit, and HackerNews, there's so much room for creativity. i.e. A post about website performance and its role in improve organic traffic with a link at the end of the article. More often than not, well thought out articles will rise to the top and your link will gain exposure. If not, you've added value to the community and you aren't really spamming your link. The mods will not be on your back. Repurpose the content, you've written the blog post, will you go post that 1000+ article on Facebook/Twitter? No, try to make a simple graphic that will hook people and add your website's link within that graphic and the first comment. People on Facebook generally have low attention spans, so if you don't really grab their attention in the first few seconds they see your post, they're gone. The point of this sub-section is to tell you to learn the platform before mindlessly spamming your links. <h1> <a href="https://dev.to/moeminm/how-to-drive-traffic-to-your-website-side-project-edition-451g#steady-traffic-using-longterm-strategies" class="anchor"> </a> Steady Traffic Using Long-Term Strategies </h1> My #1 lesson learned from my side projects which you can read all about <a href="https://blog.moeminmamdouh.com/how-i-failed-2-side-projects-in-under-a-year-and-lessons-learned">here</a>. What do I mean by long-term strategies? SEO. SEO is a waiting game. You post your content, and you wait to rank on Google, but you don't just go posting about anything, you need to be smart about what you're writing about. <h3> <a href="https://dev.to/moeminm/how-to-drive-traffic-to-your-website-side-project-edition-451g#pick-high-volume-low-competition-keywords" class="anchor"> </a> Pick high volume, low competition keywords. </h3> For example, my last article <a href="https://blog.moeminmamdouh.com/20-free-design-resources-for-developers">20+ Free Design Resources for Developers</a> targeted the keywords 'free design resources'. According to Google Keywords, it receives 1k-10k search queries per month and has low competition, and well, it was a great pick. I'm currently the 10th result on Google for that keyword. <h3> <a href="https://dev.to/moeminm/how-to-drive-traffic-to-your-website-side-project-edition-451g#write-valuable-posts" class="anchor"> </a> Write valuable posts </h3> If you provide value, you will get noticed. I went ahead and posted my free design resources article on IndieHackers, dev.to, and HN just for the fun of it. I get around ~250 visitors from posting on there. Great, I head to bed, wake up and check my notifications only to find this: <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ZFNRIGhm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1604472876194/lKGEdkJFO.png" class="article-body-image-wrapper"></a> So what's so surprising? Well, the traffic sources. I only posted on 3 websites. But I open up the acquisition tab and to my surprise, my 2nd most traffic source is from a website that featured my article that I didn't even know about. <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--t4PYY4Ul--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1604473073706/DsH_DxO5S.png" class="article-body-image-wrapper"></a> 174 visitors came from traffic sources I did not submit my article to. The article was picked because it received attention on the 3 websites I posted to. Here are the stats for the article on IndieHackers and dev.to <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--PXv2fZa2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1604473233181/1Q82l3LSp.png" class="article-body-image-wrapper"></a> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--6K90Xkjs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1604473303797/YWjWoKvz2.png" class="article-body-image-wrapper"></a> So I post the article hoping for some short term traffic, but what I didn't know is that it brought longer short term traffic. But wait, wasn't this a short term strategy? Yes, but also no. You're also building backlinks this way. When a high domain authory website such as daily.dev features your website and links back to your website, that is great news. <h3> <a href="https://dev.to/moeminm/how-to-drive-traffic-to-your-website-side-project-edition-451g#setup-search-console-and-keep-track-of-your-organic-traffic" class="anchor"> </a> Setup Search Console and Keep Track Of Your Organic Traffic </h3> Search Console takes longer times to crawl new websites so you may find the results to be a little off at the beginning, that's fine. Set it up anyway, it's a very helpful tool. You get to see what keywords you're gaining impressions for, how many clicks you're getting, and what keywords are getting those clicks. SEO is a long and tiring game, but once you start seeing results it's a great feeling. You no longer have to worry about constantly trying to find sources of traffic, they just roll in. Let me know your traffic game in the comments below and I hope you enjoyed this article! </article> </main></body></html>