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 website uses .mobi - you may also be familiar with .com for commercial entities, or .de for German pages. The World Wide Web uses HyperText Markup…
Continue reading →
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 are two abominations here. There's no need to interrupt the reading experience by bisecting a page and displaying the page numbers. And there's no need to put footnotes at the a…
Continue reading →
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 best quality photo of bigfoot!" /> There are two slightly different ways to style the text. The simplest way is to give the image some CSS relating to its font, colour,…
Continue reading →
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 make a website? A few hours later, I launched the NO-HT.ML website. Proving, once and for all, that you don't need HTML to make a beautiful responsive, and useful website which everyone will love. Go t…
Continue reading →
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 it. Open Graph Protocol (OGP) is one of those products. The value-proposition is simple. It's hard for computers to pick out the main headline, image, and other data …
Continue reading →
How I miss the days when phone manufacturers were innovative. Nowadays everything is just a boring black rectangle. Tawanda Nyahuye👨💻@towernterHow to end a frontend developer's career pic.x.com/aysi0pghh5❤️ 5,760💬 162♻️ 006:19 - Fri 06 May 2022 I imagine that this (concept) device would probably just put the browser only on one row / column. Probably sensible, but utterly BORING! Let's imagine a few bonkers devices. Here's a daft concept phone with a punch-hole camera cutting out its screen…
Continue reading →
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 be interpreted correctly by screen readers. They may read out "Vertical Pipe", which isn't very user friendly. Similarly, robots may not attach the correct semantics to the…
Continue reading →
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 canadd more bulletsby pressing enterHow 🆒 is that?!Same goesfor numbered listsclick here and type a new lineSplelcheck is enabled using spellcheck="true" so ya myte cee som wigggly rred linees underr sertin wordz.You can e…
Continue reading →
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: pink 1px; draws a pink outline around text. This has a pink outline! Nifty! But what happens if you apply to emoji? Smile 😁, Star ⭐, Melon 🍈 Nothing…
Continue reading →
Scratching my own itch. Here's how to make a "beta" ribbon in CSS. Place this HTML at the end of your document: <hr id="beta" aria-label="Warning this page is a beta."> (Doesn't have to be <hr> - use whatever makes sense in your design.) Then, add this CSS: #beta { float: left; top: 1.5em; left: -3em; position: absolute; /* or fixed if you want it to always be visible */ transform: rotate(-45deg); background: red; color: white; font-weight: bold; …
Continue reading →
(You may already know this, but I didn't. Every day is a school day.) HTML has the concept of the lang attribute. It allows you to say that a specific element contains text in a specific human language. For example, this page starts with: <html lang="en-GB"> That says the entire page is written in English, with the sub-type of Great Britain. This means your browser might offer to translate the page, if that isn't a language you can read. Or it might read the page aloud in a …
Continue reading →
(Written mostly to settle a good-natured disagreement.) One of the great advantages of HTML is that it can call on external resources. Your index.html can load a style.css and display a picture.jpg. But... it doesn't have to use external resources. (I know this isn't news to some of you - but everyone has to start somewhere.) Here are three techniques for inlining external assets. Easy Mode The normal way of adding a stylesheet to HTML is something like: <link…
Continue reading →
