Thoughts, talks, notes, and everything in-between. Personal blog of Fotis Papadogeorgopoulos.
Historically, in a browser, programmatic access to cookies has revolved around the document.cookie API, which is simply a string getter/setter. To read a single cookie from that string, you must parse the whole string into a structured format. To write a single cookie to that string, you would have the cookie in a structured format and serialise it to a string, prior to setting document.cookie .…
Summary This post introduces @svg-use , a set of tools and bundler plugins, to ergonomically load SVG files as components, via SVG’s <use href> mechanism. First, we look at the current landscape for embedding SVG icons in JS frontends, and especially React components. For the most part, this involves inlining SVG as JS code (also called SVG-in-JS). We analyse the problem space in order to find the…
The :focus-visible CSS pseudo-class is a standard way of only showing focus styles for users of input modalities that rely on it. This post gives some background on what it is, and how you might use it without causing harm to users on non-supporting browsers. Background on focus “Focus indicator” broadly refers to focus styling around an interactive element, which is the current element that the…
A “change password” form often has a field for the user’s old/current password, as well as a field for them to select a new one, and perhaps one to confirm it. Autocomplete, such as that of passwords by the browser or password managers, often gets tripped up in these cases, prompting to autocomplete the old password for all fields, or not displaying a prompt to generate a password correctly. We…
Recently, at work, one of our tests started failing. Our site is available in 11 languages, and the months for Azerbaijani (with the Latin script) had inconsistent capitalisation! After investigating, and a little bit of good guessing, it turned out to be an issue with the localisation data in the browser and Node. This post digs into how I went about investigating that issue, with some diversions…
I recently set up pi-hole , a local DNS sinkhole. It redirects lookups for ad-related domains into the void (and any other domain, via a blocklist). This post is not about pi-hole itself though. Rather, it is about adding HTTPS for the local web interface. Let’s define the problem better. The pi-hole runs on a Raspberry Pi, on the local network. It does not listen on the public internet, and its…
At work, I spend much of my time consulting with co-workers about accessibility. This is the second in a series of posts about common topics that come up, or other things I want to share. Let’s dive right in! Expandable Menus A common topic is menus that expand and collapse, toggling a set of items (typically navigation links below) them. When people run into this, and want to make it more…
At work, I spend much of my time consulting about accessibility. This is done largely internally, taking the form of threads on Slack, direct messages, in-person over tea, or long PR descriptions. Calling those pieces of writing ad-hoc blog posts might be more apt. Some of that writing ends up being shared around. However, I find that I end up writing a lot of the same things, with little point of…
This is an enhanced transcript for a talk I gave at ClojuTre 2019. I have included relevant graphics and code snippets. Clicking on the timestamps in the transcript will play the video at that specific time. Topic Accessibility on the web takes effort. The responsibility is split amongst development, design, and really anything that touches the product. On development and design, many of the…
Helsinki recently launched the City as a Service campaign. This post explores how to make it more accessible. Table of Contents Motivation What we'll be doing Missing image alternative text Missing focus outlines Video modal button Colour contrast Document hierarchy Issues with carousel operation Wrapping up Thanks Motivation Helsinki, and the tech industry in it, wishes to attract more workers.…
A while back, I read the slides and notes of a talk by Mu-An Chiou , titled “Details on <details>” . It’s a fantastic overview of how to use the <details> element of HTML. In short, details , and its pair summary , are a way to implement native collapsible sections, without relying on Javascript. Toggling content is one of the most common actions on the web, so being able to provide that without…
At some point through writing my first post on this blog , I realised that I wanted to have code examples. I had taken a “write first, add the infrastructure later” approach, because I wanted to finish writing instead of going down some rabbit holes. So I finished the write-up, and reached the part where I would touch up the code examples. There were two main things I wanted to have: Syntax…
Recently, a co-worker, Juhis , asked me about the pattern of linking to specific headings in a document: This is a pattern I see often in documentation sites, where the headings are linked from a Table of Contents. Users might want to refer back or save a link to a section for posterity. Exposing that link next to the heading can help that goal. Markup The name attribute has been deprecated in…
The road so far A few months back, I spent a good amount of time working at the website for Futurice’s Tech Weeklies. Tech Weeklies is our, well, weekly gathering, where we share thoughts about tech and everything related. We have a great mix of people at the office, and I love seeing what everyone is passionate about! It’s one of my favourite parts of working here. Given that background, and…