Cleaning out some old boxes trying to find an old work contract I came across a sticker sheet I got back when HTML5 became a standard that has all the icons on there the W3C defined as part of the “web reboot”:

I posted it around on social media to see who can remember them all and to indulge a bit in nostalgia. As these are official icons ratified by a standards body, they should be pretty known, right? Personally, I also forgot about a lot of them, but here is the info:

The first column is all the HTML5 logo – that one is pretty known.

Top row: Star, Multimedia, Semantics
Middle row: Offline Storage, Device Access, 3D Effects
Bottom row: Performance, Styling, Connectivity

The star is a bit of a weird one, but it is listed as a “supporting element” on the official logo site.

Now, bad enough that we forgot, but what does AI think? So I asked Grok what these icons mean and here is the hilariously wrong hallucinated answer:

Question: “Explain the meaning of the icons on this photo”

Searched for “HTML5 CSS3 JavaScript icons sticker sheet”

Overview:

This photo shows a sheet of glossy, die-cut stickers featuring minimalist geometric icons commonly associated with web development technologies. These are likely from a developer sticker pack (such as those sold on sites like Redbubble, Etsy, or CSS Weekly), designed for laptops, water bottles, or notebooks to represent programming languages, frameworks, and tools. The icons are arranged in a 3×3 grid (with the top-left being the prominent HTML5 logo), and they follow standard visual identities for these technologies. Below, I’ll describe each icon’s position, appearance, and meaning, reading left-to-right and top-to-bottom for clarity.

Position	Icon Description	Meaning
Top-Left	Red/orange shield-like shape with “5” inside (HTML5 logo)	HTML5: The foundational markup language for structuring web content, including elements like audio, video, and semantic tags. This is the official W3C logo for HTML5.
Top-Middle	Black circle with a white five-pointed star inside	jQuery: A popular JavaScript library for simplifying DOM manipulation, event handling, and animations. The starburst design is its official logo.
Top-Right	Black rectangle with a smaller white rectangle inset on the top-right corner (like a code editor tab)	Sublime Text: A widely used code editor known for its speed, syntax highlighting, and plugin ecosystem. The tab-like icon mimics its interface.
Middle-Left	Smaller red/orange HTML5 shield (variant or duplicate)	HTML5 (variant): Same as top-left; possibly a size variation or emphasis in the sticker set.
Middle-Middle	Black circle with a right-pointing arrow emerging from the right side (Ethernet-like)	Node.js: A JavaScript runtime for building server-side applications using an event-driven, non-blocking I/O model. The arrow evokes network connections.
Middle-Right	Black shape resembling Japanese katakana “mu” (ム) or a sideways “W”	Vue.js: A progressive JavaScript framework for building user interfaces and single-page applications. This stylized “V” is its official logo.
Bottom-Left	Even smaller red/orange HTML5 shield (another variant)	HTML5 (variant): Repeated for emphasis or multiple sizes in the pack.
Bottom-Middle	Black six-pointed cogwheel or gear (hexagon with rounded teeth)	npm: Node Package Manager, the default package manager for Node.js, used for installing and managing JavaScript dependencies. The gear symbolizes tools and configuration.
Bottom-Right	Black shape like a stylized “R” in a diamond or a slanted bracket with a line	React: A JavaScript library for building dynamic user interfaces, developed by Facebook. The “R” in a hexagon/diamond is its official logo.

Then again, Grok inside X was closer:

These are stickers of the HTML5 logo and its feature badges from W3C, representing web tech aspects:

• Red shield with 5: HTML5 (semantics/structure)
• Circle with star: Offline & Storage (local data, app cache)
• Clapperboard: Multimedia (audio/video)
• Upward arrows: Performance & Integration (web workers, etc.)
• Power symbol: Connectivity (WebSockets)
• Wave symbol: Device Access (geolocation, camera)
• Hexagon arrow: Geolocation
• Flower gear: Styling (CSS3)
• Shield with 3: CSS3
• Abstract arrow: 3D Graphics & Effects (canvas, SVG)

ChatGPT didn’t fare much better:

This photo shows a set of stickers with various tech and developer-related icons, primarily centered around HTML5 and associated technologies or communities.

Here’s a breakdown of the icons from left to right, top to bottom:

---

Left Column (Orange Shield Icons)

These three icons are HTML5 logos in various sizes. The HTML5 logo, introduced by the W3C, represents:

• HTML5 specification.

• A broader family of open web technologies including CSS, JavaScript APIs, etc.

---

Middle Column

These are less universal, but they are often associated with web development or design systems. Here’s what they most likely represent:

1. Star Icon – Could represent a “favorite” or “featured” element. Often used in design or rating systems.

2. Power Button / G Symbol – This resembles a power button and is sometimes stylized to look like a “G”, possibly referencing Gadget, Game, or Grid.

3. Flower-like Icon – This may symbolize a framework, modular system, or settings/gear-like function.

   • It resembles some older logos from Mozilla or lesser-known JS frameworks.

4. Curved Bracket + Slash () Icon – Resembles the CSS3 logo in a stylized form, indicating stylesheets or front-end design.

---

Right Column

These icons resemble stylized badges or logos for web-related APIs, technologies, or conceptual tools:

1. Chevron Up Arrows – Often represents “ranking up” or progress, could be symbolic of increasing levels or navigation.

2. Broken Television/Display – May represent video, media, or an error state (e.g., “no signal”).

3. 3D Hexagon – May represent WebGL, 3D rendering, or a JavaScript 3D library like Three.js.

4. Chain Links / Detach Icon – Looks like a “disconnect” or “unlink” symbol, possibly referring to APIs, modules, or external linking.

---

Summary

• The most recognizable symbol is the HTML5 logo (left column).

• The rest are likely conceptual or stylized representations of web development components, maybe from a sticker pack made for developers.

• Some might come from Mozilla or open web campaigns from around the early 2010s.

Microsoft Copilot at least got the styling right, but was very chipper about it:

Absolutely! This sticker sheet is a fun mix of tech-related symbols, many of which are tied to web development, software engineering, or digital design. Here’s a breakdown of what each icon likely represents:
—-

### Top Row
1. HTML5 Logo (Red & White) – Represents HTML5, the fifth version of the HyperText Markup Language used to structure content on the web.

2. White Star in Black Circle – Could symbolize a “favorite” or “featured” item, often used in UI design or rating systems.

3. Clapperboard Icon – Typically associated with video or media content—might represent a video editor, media player, or production tool.
—-

### ⚙️ Second Row
4. Three Upward Chevrons – Often used to indicate “upload,” “expand,” or “elevate.” Could also be a stylized logo for a tech brand.

5. HTML5 Logo (Again) – Repetition suggests emphasis on web development themes.

6. Power Symbol in Black Circle – Universally recognized as the “power” button—used to turn devices on/off.
—-

### Third Row
7. Broken TV Screen Icon – Might represent a glitch, error, or retro tech aesthetic. Could be symbolic of debugging or outdated tech.

8. 3D Hexagon Outline – Hexagons are popular in design and often used in blockchain or engineering contexts. The 3D effect suggests depth or complexity.

9. HTML5 Logo (Third Time) – Clearly a central theme—HTML5 is foundational to modern web development.
—-

### Bottom Row
10. Gear with Star Center – Gears represent settings or engineering. The star could imply a featured tool or premium functionality.

11. Stylized “E” (CSS3-like) – Likely a nod to CSS3, the style sheet language used to design and format web pages.

12. Angular Symbol with Overlapping Shapes – This resembles the Angular framework logo, used for building dynamic web applications.
—-

### Overall Theme
The sheet seems to celebrate web technologies, UI/UX design, and digital creativity. It’s the kind of thing a developer might slap on their laptop to show off their tech stack or aesthetic.

Want help identifying any specific frameworks or tools these might be linked to?

I suppose we still have a long way to go to a standardised web – or we just forgot to enforce it…

For our weekly WeAreDevelopers Live Show I wanted to have a way to include a time progress bar into the page we show. The problem there was that these are markdown files using GitHub Pages and whilst I do use some scripting in them, I wanted to make sure that I could have this functionality in pure CSS so that it can be used on GitHub without having to create an html template. And this is it:

The bars support dark and light mode and should be pretty bullet proof. You can check out the demo page to see the effect in action with the liquid source code or play with the few lines of CSS in this codepen. Fork the repo to use it in your pages or just copy the `_includes` folder.

Using the CSS time progress bar

You can use as many bars as you want to in a single page. The syntax to include a bar in a markdown file is the following:

{​% include cssbar.html duration="2s" id="guesttopic" styleblock="yes" %​}

• The `duration` variable defines how long the progress should take
• The `id` variable is necessary to and has to be unique to make the functionality work
• If the `styleblock` is set, the include will add a `style` with the necessary css rules so you don’t have to add them to the main site styles. You only need to do that in one of the includes.

Using the bar in HTML documents

You can of course also use the bar in pure HTML documents, as shown in the codepen. The syntax is:

<div class="progressbar" style="--duration: 2s;">
    <input type="checkbox" id="progress">
    <label for="progress">start</label>
</div>

Don’t forget to set a unique id both in the checkbox and the label and define the duration in the inline style.

Drawbacks

• This is a bit of a hack as it is not accessible to non-visual users and abuses checkboxes to keep it CSS only. It is keyboard accessible though.
• In a better world, I’d have used an HTML `progress` element and styled that one…

When I still worked for a US company, I traveled every few weeks to the US, so much so that I had gold status on several airlines. Ever since the Covid pandemic hit and I got laid off by my last employer as part of a 10k employee cut, I stuck to Europe. Other reasons were my partner hating aircraft and long trips and – * gestures vaguely at everything *.

But, I am always up to support folk, which is why I am coming back over the pond to speak at All Things Open on the 12-14th of October 2025 in Raleigh, North Carolina.

To this end, I am preparing a fire and brimstone talk on AI and open technology called With AIs Wide Open…. Here’s what I challenged myself with in terms of talk outline:

We are in the middle of a revolution of human and computer interaction. We’re also in the middle of a ridiculous hype that burns money, up-ends the lives of people and changes the market we work in. How can we survive this change and come out as winners? How can we ensure that decades of open efforts aren’t being taken over by corporate greed and hidden in closed environments? In this talk Chris Heilmann shows how this “revolution” isn’t new but has been tried before and gives you active advice on how to make yourself indispensable in a world of agents and services. Open isn’t dead, open just needs to lead the way. AI is here to stay and it is up to you to see it as a threat or as a chance to steer it into a good future.

So, if you’re East Coast and want to meet, see you at all things open. As you may have already heard, we’re also planning a US edition of the WeAreDevelopers World Congress next year, so if you’re a speaker at the event or have a booth, hit me up for opportunities in that regard.

This is the U-1206. It was the peak of submarine technology at the end of the Second World War. Right now it lies at 70 metres depth slightly North West of England.

You might say this is an impressive feat for a submarine to be submerged that long. Alas, it is isn’t by design but aided by lots of bullet holes caused by allied aircraft.

The reason is advancing technology for the convenience of maintainers without testing it properly.

You see, the U-1206 was the first submarine to be equipped with a flushable toilet instead of a septic tank. Cleaning out the tank means having to ascend. Ascending for submarines is bad as it makes them an easier target for aircraft. So, German engineering ingenuity prevailed and the U-1206 got a toilet that can flush whatever goes into it out into the ocean, making it Mother Nature’s problem.

On 14 April 1945, 24 days before the end of the war and 8 days after the submarine got into commission things went wrong.

Captain Karl-Adolf Schlitt used the facilities and ran into the issue of getting rid of a captain’s log. The toilet wouldn’t flush.

So he called in an engineer to fix it. This one deduced that it must be a valve that’s closed and released one of them in the wall, promptly flushing the compartment with a mix of fresh sea water and other things. This would be bad enough, but the flooding also unearthed another design flaw: the toilet was located above the batteries of the submarine. Water – let’s call it that – seeped through the ceiling onto the batteries and caused a shortage and the release of Chlorine Gas. The submarine had to make an emergency ascend, got spotted by Allied Aircraft and sunk. Three people died, 46 got captured.

Just a reminder that using state of the art technology to release your shit as fast as possible out into the world is not a good idea. Especially when people handling that technology haven’t been properly trained on it.

With the fate of Goo.gl in the balance and many URL shortening/redirection services being either expensive or spammy, I wondered if I could find a free/cheap way of achieving the same. So I got myself a short domain (CLXI.org) and looked at using a GitHub repo with pages to redirect URLs. Turns out, this is pretty straight forward.

I’ve put together all the tips here in a repository that you can fork and get started: https://github.com/codepo8/gh-pages-urlshortener
You can see the experience in action here – one of them: https://codepo8.github.io/gh-pages-urlshortener/go/chris10s or https://clxi.org/go/wad

Redirecting on GitHub pages

In order to redirect any pages from a GitHub page, you need to load the right gem and set it up. You do that in your `_config.yml` file:

gems:
  - jekyll-redirect-from
whitelist:
  - jekyll-redirect-from
plugins:
  - jekyll-redirect-from

If you now add a markdown file called `offwego.md` to the page and you can give it this Frontmatter to redirect it:

---
redirect_to:
  - https://christianheilmann.com
---

You can try this here: https://clxi.org/offwego .

However, this is a simple server redirect – like you would do on your own server. The user won’t be notified and has no chance to cancel the redirect. If that is what you want, you are done. I wanted to give people more options.

Building an own redirect with preview

Instead of creating lots of markdown files in the root folder I use a /go/ folder to store them. In GitHub pages the best way to do that is to create a collection. I created a folder called `_go` and added it to the `_config.yml` file:

collections:
  go:
    output: true

Make sure to set the `output` to `true`.

This now allows me to add lots of markdown files there. In order to make them look differently and provide more control over the redirection, I created a template file. To this end, create a `_layouts` folder and add a `redirection.html` in there. The final template has a lot of features we don’t need to cover here, but the main trick was to make the HTTP redirection a variable both in time – the {{page.delay}} bit – and in the URL to send folks to ({{page.goto}}):

<meta http-equiv="refresh" content="{{page.delay}}; url={{page.goto}}">

That way I can now add markdown files in in the `_go` folder and define both the time and the place to redirect to in the frontmatter:

---
goto: https://christianheilmann.com
layout: redirect
delay: 10
---

I choose the `redirect` layout, the `goto` URL as mine and a delay of ten seconds.

This is as far as meta redirects get us. I also wanted to add a preview progress bar and a chance to cancel the redirect. One of the annoying bits about a meta redirect is that you can’t cancel it. HTML rules supreme and even removing it with JavaScript won’t make a difference.

Adding a chance to cancel the redirect and other fancy bits

To get more granular control, I use JavaScript instead to redirect. This could break, but it gives the user more options.

The script is no magic and I pipe in the data from the frontmatter:

let countdown = document.getElementById("countdown");
let bar = document.getElementById("progressBar");
let full = bar.max;
let delay = {{page.delay}};
let interval = setInterval(() => {
    delay--;
    countdown.textContent = delay;
    bar.value = full - delay;
    if (delay <= 0) {
        window.location.href = "{{page.goto}}";
        clearInterval(interval);
    }
}, 1000);
document.querySelector("button").addEventListener("click", () => {
    clearInterval(interval);
    document.querySelector("section").innerHTML = `
        <h1>Redirect Cancelled</h1>
        <p>You can close this page now or go to
        <a href="{{page.goto}}">{{page.goto}}</a> yourself.
        </p>`;
});

And that’s that, now you can see the place the link is going to and you can cancel if you want to. Both in dark and light mode. Here’s the progress bar in action:

Cancelling the redirect (this time showing the light mode):

Feel free to fork, add comments and improve on GitHub!