How to use the new <search> element with WordPress

By
on · · 3 comments · 200 words
The Logo for WordPress

There's a new HTML element in town! You can now use <search> to semantically mark up a search box. It's great for letting screen-readers and other assistive tech know what a form does. It's only supported in WebKit for now - other browsers will get it eventually. The WordPress default search widget hasn't yet updated, […]

Continue reading →

False Friends - HTML Elements which are also Top Level Domains

By
on · · 2 comments · 350 words · read ~168 times.
Me: Which TLDs have the same name as valid HTML5 elements? ChatGPT: As of my last knowledge update in September 2021, there are two top-level domains (TLDs) that have the same name as valid HTML5 elements: .dev: This TLD corresponds to the HTML5 element. .app: This TLD corresponds to the HTML5 element. Please note that this information is based on the state of TLDs as of September 2021. There might have been updates or changes after that date, so it's always a good idea to check official sources or domain registrars for the most current information.

In linguistics, a "False Friend" is a word which looks similar in multiple languages, but means something different in each of them. For example the word "gift" in English means "a present", in German means "poison", and in Norwegian it means "married". The Internet uses Top Level Domains (TLD) to organise information into hierarchies. This […]

Continue reading →

Stop treating eBooks like paper books

By
on · · 700 words · read ~176 times.
Screenshot of a page of an eBook. The page number splits the page in half. Footnotes are visible at the bottom of the bisected page.

As part of my never-ending quest to banish this skeuomorph from the world… I was reading a fascinating eBook recently which was, sadly, designed to mimic a legacy / paper book. To the point where the authoring software had hard-coded in page numbers and forced them to be displayed. Here's what it looked like: There […]

Continue reading →

How to style your alt text

By
on · · 1 comment · 400 words · read ~566 times.
Photo of a broken and smashed picture frame. Taken by eastbeach on Flickr.

Every day is a school day. I'd recently seen a post about highlighting images without alt text. That got me thinking. Is it possible to style alt text? Yes. Yes it is. And it's pretty simple. Well, OK, it's CSS, so simple is a relative term! Let's take a broken image like <img src="http://example.com/bigfoot.jpg" alt="The […]

Continue reading →

YOU DON'T NEED HTML!

By
on · · 3 comments · 550 words · read ~1,349 times.
Black and white text banner proclaiming that you don't need HTML.

Originally posted as part of HTML Hell's advent calendar. While browsing Mastodon late one night, I came across this excellent blog post called HTML is all you need to make a website. It describes a few websites which are pure HTML. No CSS and no JS. And I thought… do you even need HTML to […]

Continue reading →

Is Open Graph Protocol dead?

By
on · · 6 comments · 500 words · read ~1,162 times.
Robot faced Mark Zuckerberg is wearing a VR headset - it digs painfully into his smiling cheeks.

Facebook Meta - like many other tech titans - has institutional Shiny Object Syndrome. It goes something like this: Launch a product to great fanfare Spend a few years hyping it as ✨the future✨ Stop answering emails and pull requests If you're lucky, announce that the product is abandoned but, more likely, just forget about […]

Continue reading →

Designing for non-rectangular browser windows

By
on · · 8 comments · 500 words · read ~5,015 times.
A smartphone in the shape of a triangle.

How I miss the days when phone manufacturers were innovative. Nowadays everything is just a boring black rectangle. How to end a frontend developer's career pic.twitter.com/AYsI0pghh5 — Tawanda Nyahuye👨‍💻 (@towernter) May 6, 2022 I imagine that this (concept) device would probably just put the browser only on one row / column. Probably sensible, but utterly […]

Continue reading →

Different ways to do separators in horizontal text

By
on · · 3 comments · 750 words · read ~573 times.
The HTML5 Logo.

Quite often on the web, you'll see a set of "things" with a separator between them. For example, at the top of this post, you'll see Thing 1 | Something Else | Another Thing. This provides clear visual separation between logical groups. But there are a couple of problems. Firstly, the separator character may not […]

Continue reading →

Edit this blog post!

By
on · · 8 comments · 400 words · read ~473 times.
Me wearing a Google Glass headset

This is a regular HTML page. But if you click or tap on the text, you will be able to edit it! HTML is magic! This isn't a fancy styled <textarea>, it's a <div> element which uses the contenteditable global attribute. There are some nifty features - depending on your browser. You can add more […]

Continue reading →

-webkit-text-stroke and emoji

By
on · · 6 comments · 200 words · read ~387 times.
Group of emoji.

The CSS property -webkit-text-stroke is a curious beastie. MDN gives a big scary warning saying "Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web." And yet, it works everywhere. All modern browsers support it. Except on Emoji. Here's how it work. -webkit-text-stroke: […]

Continue reading →