When I was building the search engine for my blog, one feature I wanted to implement was syntax highlighting within the search input field. I wanted special operators (i.e. has:noalt, which shows posts that contain one or more images without alt text) to have a different background colour indicating that a given segment of text had some semantic meaning.

Here is an example of the GitHub search feature which has semantic syntax highlighting:

In the above image, the "capjamesg/indieweb-etherpad-archiver-v2" text is set in a light blue font; the text background is in a darker blue. This text is highlighted because it follows "repo:". This part of the query means that I want to scope my search to focus on a specific repository, "capjamesg/indieweb-etherpad-archiver-v2".

By highlighting the text that is part of the search query, I have a visual indication that what I have typed has some special meaning to the software.

Regex101 has a similar semantic syntax highlighting feature in the regular expression form field on their website:

Various characters in the above screenshot appear with coloured backgrounds; each one has semantic meaning.

The status quo

There doesn’t appear to be a semantic way to implement text highlighting in a native input tag. GitHub uses an input tag as the text and a lot of other code; a cursory read doesn’t make it obvious exactly what is going on. Regex101 uses a contenteditable div and gives every character in it a span tag. Both of these involve more code than I would like, all of which I would have to maintain.

I also explored an implementation of an input field that involved clipped background gradients, but there turned out to be many limits: maintaining state while scrolling, glitches in positioning the background, the requirement to use a monospaced font for the input so I can use ch to estimate where characters are in the input field.

What I would like

In my dream browser implementation, I would like to be able to apply the following styles:

• Text colour
• Background colour

I tried to use the CSS Custom Highlight API on an input field but it didn’t work. It feels like this API could be a stepping stone to highlighting text in an input field?

For my use case, which is to style a text input field, I would like to be able to specify the character indices at which a highlight should start and end. I can then use JavaScript with my own grammar parser to determine what character indices should be highlighted, and in what colour (I may want to use one colour for filter keywords, for example, and another for sort keywords).

Security

I suspect there are security considerations for this idea: what if the input field has white text that hides from a user what is in the form field? A malicious site could make it seem like there is no text in a form field visibly even if there is such text. With that said, I wanted to write down my thoughts to start a discussion.

Related discussions

• CSS Working Group Issue #4603

I am using Duolingo to learn a bit of German. I have been using the app for a while and enjoy the exercises. With that said, I am not a fan of Duolingo’s changing application icons on iOS.

I don’t like that an application can set its own home screen icon without my permission. I further do not appreciate that there doesn’t seem to be a way to change the app icon in some states. For example, there is an icon where the application mascot, Duo, appears with a plaster. I find the icon relatively distressing.

This weekend I figured out a workaround to reset the icon (at least on my home screen). Now, I have an Apple Shortcut that does one thing: open Duolingo. Because you can set custom icons for Apple Shortcuts and add them to your home screen, you can create a Shortcut that opens Duolingo using whatever icon you like, including the original application icon.

Here is what my Shortcut looks like on my home screen:

ALT

Two app icons on an iOS homescreen: Pocket Casts on the left, and Duolingo on the right.

Whereas my current Duolingo app shows the plaster icon, my Shortcut shows the icon I chose.

This approach has a limit: because it isn’t the original application icon, I am unsure if you will see the red application notification icons on the icon. This is acceptable for my use of the app; my phone is mostly in Do Not Disturb so I don’t see the notification icons anyway.

Furthermore, your custom application icon will not be used as the icon in push notifications. Indeed, my solution doesn't actually replace the application icon; it only lets you use your own icon on your home screen.

Here is how the Shortcut is set up:

ALT

My Duolingo Shortcut with a single step: Open Duolingo.

To change your app icon, create a new Shortcut with one step: to open an application. Choose Duolingo as the application to open. Set the name of the Shortcut to “Duolingo”. Next, download a copy of the Duolingo app icon and save it to your device.

Then, click the share icon in the Shortcuts application:

Click “Add to Home Screen”:

ALT

The Share task tray with several buttons, including one that says "Add to Home Screen" indicated by a plus icon.

Click "Image" to choose a custom image as an icon:

ALT

The home screen icon editor interface. "Image" is selected, which has three options: Choose Photo, Take Photo, and Choose File.

Click “Choose Photo” if you saved the app icon as a photo. Choose the app icon you want to use. Then, click “Add” to add the shortcut to your device:

ALT

The Duolingo app icon is set in the home screen app icon preview page.

You will now have a Duolingo app icon that looks like this:

ALT

My Duolingo shortcut.

You can then remove the original Duolingo app from your home screen and keep your shortcut.

While this approach is a workaround, it satisfies the requirement of allowing me to use a custom Duolingo app icon.

State of the Browser was electric. This is how I summarised my experience at the annual State of the Browser event in London in my notes. I like to capture moments as they happen, then write about them later. The note is the essence of a blog post; the starting point. The note blossoms at home.

State of the Browser is a conference about the web. There is always a nice mix between web technologies, standards, and designing for the web. This year was no different. The day started by learning about CSS anchor positioning and ended with a demo of an interactive video game on the web, between which everything from accessibility compliance to introversion as covered.

What makes State of the Browser distinct is that the talks generally peel back layers of the web, allowing the audience an insight into a part of the web they may not see. This was exemplified by Jason Williams’ talk “Temporal: It’s about time”, which was all about how the Temporal API standard was developed. If I heard correctly, work on the standard – which provides a more reliable, intuitive way to work with dates and times in the browser – has taken around ten years. There are four thousand tests that accompany the standard.

In learning about how much time was spent on the Temporal API – no pun intended – I can’t help but feel in awe of the work that goes into web standards: all the discussion, scoping, writing, implementing, documenting, testing, and adopting that goes into making parts of the web better. And when a new standard is available and implemented, all developers can use it with their applications.

One thought I had at the conference is that I am starting to look forward to new releases in the browser. The more I learn about HTML, CSS, and native JavaScript APIs the more I am excited about the cutting edge. Anchor positioning is implemented in most major browsers. Work is being done on masonry layouts. The technology that powers the web is improving. Behind every change and improvement are people. State of the Browser uniquely brings together many people who make, use, and appreciate standards. I appreciate that I can go to the conference and hear stories from the people who are actively building the web platform.

Mike Hall’s talk “Lessons from building for the bottom of the web” was all about his experience building a website that had to work with 2.5G connections. It was fascinating to hear the design considerations behind that. The project team wanted to deliver a web page that was no heavier than 128 KB, including images. They succeeded in their goal through many creative optimisations and technical decisions. It made me think about how light I could make a web page. What would an “ultra-light” version of a web page look like, I wonder?

I have lots to say about every talk I saw, but I will end by reflecting on one more talk: “The Plateau of Accessibility Compliance: Where do we go from here?” by Chad Gowler. This talk opened my mind to the work that is being done in the video games industry on accessibility. Gowler showed a video game that had an “arachnophobia mode” that allowed users to change the appearance of spiders if they preferred. In another example, Gowler showed the plethora of accessibility options made for one game – so many that the page kept going on and on as they scrolled through the instructions.

I loved the mix of talks, and thoroughly enjoyed meeting so many interesting people. Indeed, one of the best parts of the event is the conversations with other participants – at the start of the event, in the breaks, at lunch, and at the pub at the end of the day.

The synopsis for all the talks mentioned above is available on the State of the Browser website. I suspect talks will be available on the London Web Standards YouTube channel at some point. Thanks to Dave for organising the event, and for the whole team that made the event happen.

Tickets for the next event will be available on the 2027 State of the Browser website. The in-person Super Organised Bird tickets have already sold out, but more tickets should be available soon.

My blog has an offline mode that lets you view articles you have previously read on my website. This mode allows you to read something on my website even if you don’t have an internet connection. If the page you want to view has not been cached, you will see a custom page that lists articles you can read:

ALT

A page with the heading "You Are Offline" with a list of articles and pages that can be viewed offline.

How it works

My offline mode works using a service worker (see code) that is based on Jeremy Keith’s examples of service workers (example one, example two; NB: I may be missing some examples; See also: Minimum viable service worker). Jeremy wrote a book that documents how you can add offline support to your website: Going Offline. I haven’t read this book, but all the code snippets and blog posts that Jeremy has posted has helped me get to something that works for me.

When you visit my website, a service worker is registered. This service worker maintains a cache using the JS Cache API. When the service worker is first registered, a selection of articles I have written are automatically cached. This means that if you only visited my website once or twice, you would still have something to read. My offline page is also cached.

This service worker intercepts web requests to my website. If I am reading the code correctly (it has been years since looked at this, and my work is largely based on Jeremy’s examples), a fetch request is made to my site first. If the request is successful, the result is cached for later. If the request fails and there is a cached version of the page available, the cached page is returned. If the user is offline and no cached page is available, the /offline page is displayed. [1]

My offline page lists articles and web pages that have been cached in your browser, listed in descending order by the date the URL was added to the cache. This allows you to see what is available to read while you are offline.

Looking at this page now, I think I want to separate the list of articles available for offline reading into two lists: a list of blog posts and a list of pages. I may work on this at some point.

The reason I am so reliant on Jeremy’s examples is that service workers aren’t the easiest to work with. I am not an expert on service workers; I have used them sparingly, and I can't say what I have follows best practices since it is a few years since I am not up to date on service workers. I encourage you to do your own reading and experimentation while playing around with them. I found working from examples to be the easiest way to get something that worked.

You are free to copy mine in its entirety if you would like, as it is licensed under the same CC0 1.0 Universal license as Jeremy’s original work. You’ll need to update the list of URLs to add to the cache to be posts that exist on your website, and update the /offline link to wherever you end up storing your offline page. You will also need to add the registration code to every page on your site:

<script>
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
            navigator.serviceWorker.register('/service-worker.js');
        });
    }
</script>

Experience

I love having an offline mode.

I think I have only used the offline mode once when I was at an IndieWeb event, sitting in a cafe with my WiFi off. I was writing a blog post and had my WiFi off in part because the connection was bad in the cafe and also in part because I wanted to focus on writing. I needed to consult a page on my website though. Offline mode lets me do that.

While I haven't used the feature much, given how much I consult my website on a day to day basis it is reassuring that I can access some of it offline (ideal if I am using my phone).

I have been working on a new project for sharing contacts at events that stores all data locally. For this, too, I am using a service worker to add an offline mode. This means I can use the website even if I have variable or no connectivity.

Designing an offline mode has several parts: the technical infrastructure behind it (in this case, the service worker), the offline mode experience, and, in more complex cases, additional technical decisions that need to be made if a site has an offline mode (i.e. synchronisation for applications that need to send data back to a server). For a blog like this, the service worker does most of the heavy lifting, and my offline page does the rest.

See Also

• IndieWeb offline wiki page
• IndieWeb offline-first wiki page
• IndieWeb service worker page

[1]: If a request is for an image, the cache is checked first, then the network and then finally an “Offline” placeholder image is displayed.

What happened was, soon after New Year’s, friends and colleagues in the UK and Germany started letting us know that their emails to us were bouncing. Our “textuality.com” family domain is a Google Workspace (or whatever they call it this year) for email and docs and so on. Its Web presence, including DNS, has for many years been handled by a local outfit I’ll call “CWH” for some absurdly low monthly price, and has been trouble-free.

So, what could be wrong? We investigated and discovered that Google was offering a new-and-improved MX-record option, although they emphasized that the old setup should still work. Anyhow, we installed the New Thing and it didn’t help.

So, we filed a ticket with CWH tech support and somebody got back to us pretty quick, saying they’d changed a firewall setting that was blocking connections to Germany. I detect the scent of GDPR, but whatever.
Euro-email: Bounce, bounce.

CWH: Probably an MX-record issue, and we should wait for DNS propagation. Several days passed and bounce, bounce, bounce.
Us: “Not DNS propagation.”
CWH: “Still could be.”

So we VPN’ed to Germany and discovered we couldn’t ping Textuality’s IP address. Smells like a firewall to me. We told CWH that.

CWH: We have made some changes to firewall settings.
EMail: bounce, bounce, bounce.
VPN+Ping: Request timeout, request timeout, request timeout.

CWH: Try traceroute?
VPN+Traceroute: 14 hops, no joy.

CWH: Your VPN settings must be wrong. Here are instructions to use Windows PC VPN correctly.
Us: Thanks but no.

CWH: Your MX records are configured incorrectly.
Us: No, they are correct per Google guidance. We sent an email beginning “Please believe us.”

CWH: It must be DNSSEC. Check to see if your registrar implements DNSSEC.
Us: We are using your DNS servers.

CWH: Perhaps your registrar is broadcasting an old record?
Us: Our registrar doesn’t do DNSSEC.

At this point we consulted a friend who’s an expert on DNS and Email and even DNSSEC. He verified that not only could you not ping Textuality from Germany, you also couldn’t ping CWH or its name servers. Firewall firewall firewall!

CWH: “I did test the site access using a 3rd party application, and it seems to be accessible on all parts.”
Us: Look at the output, it shows we can’t be reached from anywhere in Germany.

Also, for all the remaining messages in the email trail, we prefixed our input with bold face extra-large text reading: Systems located in Germany cannot ping Textuality.com’s IP address, nor can they ping the IP addresses of textuality.com’s designated name servers. This is the problem.

CWH: Let’s try migrating you to a different server; try pinging these hostnames.
VPN+Ping: Nope.

CWH: Are you sure it’s not your VPN settings?
Us: Are you sure it’s not your GDPR settings?
CWH: Raising your issue to Tier 3.

20 hours pass, then we get email from:

Nash Burns!

…who said “This has been fixed.” It was. Nash’s email signature was “Nash(Rajaneesh) B”. What a great name, though. Thanks, Nash.

Am we mad?

Not really. Consumer-facing tech support is hard. None of their suggestions were unreasonable. Doing GDPR correctly is hard. They’ve been just fine for years and were having a bad week. Could we expect better from any of CWH’s local competitors? Probably not.

It wasn’t funny at the time, but looking back, it kind of is.

I love making incremental improvements to my website. All the changes I make to this website build up to what you see. This has me thinking that websites are both a place to reflect on, discuss, and make change, as well as being something that can, and does, change over and with time. My website grows with me.

While exploring my website, I noticed in the past that the bold typeface in the headings and in my website name looked a bit different in Safari to Firefox. This week, I learned why: I didn’t supply a bold typeface for my website. This meant that both browsers were trying to create a bold effect rather than relying on the typeface itself to supply bold characters. This has now been fixed. My site, which uses the Standard web font, now loads the bold version of the web font too.

Today I also set out to fix how links appear in italics in my blog posts. Links are styled in blue with an underline, but the colour rules for the em tag were overriding the colour of links within the em tag. This meant that links in em tags preserved their underline, but had the same colour as the surrounding text. This, too, is now fixed. It felt good to finally make this change. Small changes collectively make a big difference.

I also have a new “Make a Website” page. I wrote this page to be a short introduction to how to make a website, referring to the excellent resources others have made on the topic, as well as communities of people building websites. I now link to this page both on my home page and my website sidebar. If you have been looking for a sign to start a website, this is it. The web is wonderful.

On a side note, I learned that Ghost, which I use for publishing blog posts – my static site generator reads posts from Ghost, stored as text files – does not allow emojis in permalinks. I learned this while trying to set the permalink for 🌸 to be the eponymous emoji. This is probably for the best: emojis in permalinks do not, on reflection, necessarily fit into how I think about URL design:

In a sense, URLs are user experience. I use them to navigate through websites. As a site creator, clearly defining URLs helps me know what is where. This is important to me. I want the experience of searching for a page – either for reference, or as I develop my site – to be as intuitive as possible.

Finally, I created a new “for you” page. It reads:

This entire website is for both me and you.

Thank you for visiting!

I much prefer my for you page to any one I have seen so far.

Related is what Sir. Tim Berners-Lee says of the web: “This is for everyone”.

Note: My site styles may be cached for you, so to see any changes to the typeface you may need to do a hard refresh of a page. One day I will figure out how to clear the styles that power my offline mode from readers' caches when I update the styles. That, however, is a task for another day.

At Front End Study Hall yesterday there was a discussion about what endeavours are similar to web development. There was a particularly rich discussion (documented in the afore-linked notes) related to gardening and web development. My takeaway from the discussion was that building for the web has more in common with other tasks than I had thought about before.

I have been thinking about one-off pages on my website that I use to document different ideas, like my ideas list or my patterns list. I keep thinking about how I should present these. Should I have a page that lists all of the pages? But what if a page isn’t ready yet? The benefit of the current way I share these pages – either directly with friends or, more commonly, by linking to them in a blog post when they are relevant – seems to work well. With the current system, I share when I am ready.

I sometimes think of these one-off pages as “wiki-like pages”, in the sense that they are updated over time – they grow. I don’t consider these pages a digital garden because they aren’t heavily linked. Many of my one-off pages stem from some notes I have taken in Apple Notes that I think, after reaching some point of maturity, should have a URL. You could call them “slash pages”, but I am not a fan of that term.

The reason I think about all these words is that they have a certain weight to them. A wiki implies something different than a digital garden, just as a page implies something different to a blog post. While “wiki-like pages” made sense to me for one-off, growing pages, “page” may be the best way for me to think of these for now.

When I consider how I want to share these pages, the best system is the one I have right now – the one where I link to pages in a blog post every so often, when I am ready. The one where I can put a URL on something without the pressure of it showing up on a list of all the pages I garden. My system is a bit inefficient, but it is maybe good enough? It is good enough for now, at least.

On reflection, there is something joyful about being able to casually share a new page in a blog post, where the page is most appropriate. The one-off pages I garden aren’t a notebook so much as they are an amalgamation of bullet points, a potential starting point – a place with more information. In blogs, I refine and define and synthesise and reflect. In pages, I often want to get the notes down so they have a home. So that I can build on the idea later.

Indeed, building on things feels very much in the spirit of having a website. We’re always building on what we have. I garden where I can. As Jeremy said in the aforementioned Front End Study Hall discussion about gardening and web development: “the joy of the thing is in the development - you cannot plan for it.”

In the spirit of talking about one-off pages, this may be a fun time to share I have a page on this website that lists songs that are related to rhubarb pie. If you have any suggestions that I can add to the list, please do let me know!

This is my (late) contribution to the January 2026 Grizzly Gazette Carnival on the topic “How I ___”, where contributors are invited to fill in the blank. I saw the Carnival a few days ago and, after some thinking, the idea “How I find links” came to mind.

Whenever I am on a video call, I love helping to find links. If someone shares a document, I will ask for them to share the link so everyone on the call has access to the same resource. If someone mentions a document but doesn’t have the URL to hand, I will try my best to find the link and share it in the meeting notes or chat channel as soon as I can. I proactively find links because having relevant link fast means that the discussion can keep going without someone – often the speaker – stopping to find the link.

There are a few ways I find links. One of the most valuable tools is the Firefox address bar, which can read my browser history. If I know the link I am looking for, I will type in as many words as I think I need to find the link via the address bar autosuggest feature. With the right query, and provided I have opened the link, I will be able to find it. The utility of the address bar is in part aided by my love of opening and skimming links shared in discussions I am in.

The more links I have seen, the more likely I am to be able to find the one that is relevant to the discussion, especially using the address bar browser history search feature. I love skimming information both to take it in and create a mental bookmark of where specific piece of information may be.

If someone references an asynchronous discussion in a call and wants to share it – for example, a Slack thread – I will try to find the relevant link to the thread and share it with everyone. Sharing a direct link to the discussion means everyone is on the same page without having to tag someone in a thread (tagging may not always be appropriate, especially if a link is for reference only). Slack filters help immeasurably in finding a thread that mentions a piece of information. For example, in: and from: let you search within a channel and messages published by a specific author, respectively. In general, fast search tools with filters help me find links faster.

When I am looking for a thread, and in general, I try to remember whatever exact keyword will help me find the piece of information. Often, this is a word or two. My recall is aided if someone mentions a resource I have encountered recently.

My inspiration for this topic in part came from reading Thomas’ “20 Social Roles” blog post, which outlines various informal roles people have in digital social environments. The “Infovore” role resonates a lot with me:

The Infovore is someone who collects information and knowledge, which can be on a specific interest or domain, or out to things of potential interest. Quite often they have a system for recall or retrieval of this information / knowledge. The Infovore is often curious with broad and deep interests that wants to hold on to things they run across and have them within easy reach.

The Infovore is the person who people turn to and ask the question, starting with, “have you seen anything on…”.

My system for recall is usually my browser history or Slack (or the relevant chat). If a resource is one I have not yet encountered but think I can find (i.e. an MDN article on a web development topic), I will use Google. The inurl: filter is especially helpful when I am looking to narrow my search to something more specific. I occasionally use intitle: too, but I find inurl and a relevant keyword matches most of my searches.

I sometimes need help finding information. Indeed, finding information in a community or organisation is a social activity. Everyone has a different piece of the map. If I don’t know how to find something, I will try to refer someone to the person that does.

Context is important, too. I can usually help people in the same community or organisation find a link, but it would be harder for me to find a resource with little shared context.

I love helping people find things, and learning how to use information retrieval tools to help people find what they are looking for. My observations above are a brief summary of how I find links. It is hard to write down everything because my workflow varies. With that said, I thought I’d document some of my tips! TL;DR: knowing my tools, opening lots of links and skimming as much as I can, staying and on top of new information all help me find links for people who need them.

I’m curious: do you have any tools or workflows for finding links you have encountered? If you do, feel free to email me at readers [at] jamesg [dot] blog.