Recent carykh’s Adobe Animate’s circles aren’t real circles video demonstrates how Adobe Animate approximates circles with Bézier curves. At the end of the video Cary demonstrated what happens to the shape if control points are pushed to extreme, but using imprecise mouse manipulation, the effect wasn’t quite precise. The effect can be achieved with SVG¹ quite easily and so I present it below:

As I looked more into the subject I’ve decided to write a full series about approximating circles with Bézier curves with different degrees. The subject is more complex than one might imagine and it wouldn’t quite fit as a single post. That’s why I’ve decided to split it into multiple articles with this post acting as a table of contents.² In subsequent weeks I’ll publish the following:

• ‘Drawing circles with polygons’ which turns out to be more involved with more than one way of doing it. I will also present mathematically ‘best’ way to draw a polygon so that it resembles circle the most.
• ‘Drawing circles with quadratic Bézier curves’ with discussion of smoothness and mathematical derivation of the best parameters to use depending on number of segments in the curve.
• ‘Drawing circles with cubic Bézier curves’ which allow for more degrees of freedom and thus looking at more constraints and trade-offs in drawing a circle approximation.

Introduced last century, favicons help users identify tabs in a crowded browser. Originally limited to the ICO format, they can now leverage Scalable Vector Graphics (SVG). This vector format not only scales perfectly to different sizes but also unlocks dynamic features which this article explores, namely:

• colour scheme preference detection,
• language preference detection and
• animations.

When Linux desktop adoption is discussed, some point out the lack of graphical user interfaces (GUI) and the necessity of using command-line interface (CLI) tools or editing text files as a reason more people don’t use Linux-based systems. Such characterisation misses how much Linux has changed. The notion that the terminal is a major barrier is outdated and ignores the fact that most users never need to touch it. An assertion that users should not need the terminal for common tasks is different from a claim Linux distributions lack GUIs.

The Good

First, let’s recognise how Linux has improved. In the ’90s and ’00s one had to manually edit cryptic modelines to get their display working. A mistake could lead to a damaged monitor. Nowadays, the main complication is picking a distribution which includes Nvidia drivers.

And that’s not the only thing that has changed. Installing software often required interacting with the CLI; now graphical software managers — which work not unlike app stores many users are familiar with — are common. Handling WiFi used to require messing with wpa_supplicant; now it’s done through an icon in the system tray.

Bambu Lab, a company once celebrated for its high-quality and user-friendly 3D printers, has recently hit a trifecta of questionable behaviour: enshittification of their products, threatening legal action to silence critics and violation of free software licences. Fortunately, several organisations have stepped in to fight for customer rights and free software. Among those, Software Freedom Conservancy (SFC) is asking for volunteers and donations to help fight Bambu’s corporate overreach.

It is unclear why Americans write dates in month-day-year format. What is clear is that it makes little sense and differs from the way most of the world writes dates resulting in confusion. While human puzzlement is well-documented (something I’ve written about as well), equally critical is how screen readers and machine translation behave.

When handling dates in a free-form text, software relies on fragile heuristics. For example, DeepL and Google Translate decide seemingly randomly whether to treat dates the British or American way as demonstrated on figure below. The behaviour can change depending on the use of padding zero, existence of other dates in the translated fragment or surrounding text.

The previous article covered how to create a custom font with a chosen SVG image. While icon fonts are convenient for visual presentation, they can create accessibility challenges. For example, if the font isn’t loaded — whether due to browser settings or temporary network glitch — users are left with an unappealing missing character symbols. Additionally, screens may announce a cryptic symbol name when reading the web page, confusing users.

This article describes a method of addressing those issues through the use of ligatures. It’s building on the previous tutorial and assumes the custom icon font has already been created.

The advent of web fonts popularised the use of icon fonts, i.e. fonts that consist solely of symbols and images rather than letters. Icon fonts such as Pictos, Font Awesome and Lucide have become well-known alternatives to image sprites, offering greater convenience and versatility. However, despite the abundant choice, pre-made sets don’t always meet the requirements of a specific website.

This article demonstrates how to create a custom icon font using FontForge. It describes the steps of importing an SVG image into a glyph in a web font. A tailor-made font lets you select icons that perfectly match your website’s needs.

CMYK is a subtractive colour model commonly used in printing. Letters in the acronym stand for the four colours used in the model: Cyan, Magenta, Yellow and… uhm… blacK? The myth goes that using ‘B’ for black would be confusing (on account of blue and brown existing), so powers that be decided to use the last letter of the word ‘black’ in the acronym. This is not quite true.

In fact, K in CMYK stands for Key or Key Plate.

I’ve previously written about escaping special characters in HTML using character entities. This article discusses another method of achieving a similar result: CDATA sections. It explains what CDATA is, how it’s used in XML, SVG, MathML etc., when it can be included in HTML5 file and how it impacts XHTML.

What is CDATA?

A CDATA section in an XML document instructs the parser to interpret the enclosed text literally, as pure character data, not as markup. It starts with the <![CDATA[ sequence and ends with the ]]> sequence. Within a CDATA section, characters which normally have special meaning — namely less-than sign and ampersand — are processed verbatim without the need to escape them. It provides a convenient way to embed¹ styles and scripts without having to worry about special characters as seen in Fig. 1:

Dear Reader, I have a question: should external (or outbound) links be styled differently from internal ones? For example, in a sentence like: ‘the recent events made me reconsider my earlier position on the matter,’ should the first link (to an external website) have a different style than the second (to another page on the same website)? I’d love to hear your thoughts in comments below. I’m particularly interested in existing UX research on the subject.

At the time of writing, this website uses an icon after the link to indicate it sends the user to a third-party website. This is inspired by Wikipedia which uses the same design. It adds information but also visual clutter and cognitive load. It doesn’t appear to be a common feature on the Internet. Hence my inquiry.

Rather than leaving you, Dear Reader, with only a question, I’ll now present how to achieve this styling using three different CSS methods. The effect needs two elements: selecting external links and changing their appearance.