Yesterday I was on a train. I clicked on a link and my browser loaded a long article for me to read. Halfway through reading it, the train went into a tunnel and I lost signal. That meant I couldn't see the images on the other half of the page for the rest of the […]
🆕 blog! “This link is only available by keyboard navigation”
There's a link, right here ➡️⬅️ but, if you're on a touchscreen, you can't tap on it. Using a mouse? Nope, that won't work either. The only way to navigate to it is via keyboard navigation. Hit your Tab ⭾ button! There's a little bit of me wants to build an entire website which can […]
#JavaScript doesn't have any customisable dialog boxes, so you have always had to build your own. Since #HTML5, there's the dialog element for that, which is neat, but comes with the additional problem of not blocking execution until it's closed.
So now I, wanting to replace a confirm call with a custom dialog, have to figure out how to halt my script until the dialog has been closed, and ahhhhh!!!
I tried creating a new Promise object, calling await myPromise, and resolving that promise with the dialog's OK button, but that failed because the promise doesn't have a built-in resolve function (how could it, it's supposed to be resolved externally).
AHHHHH!!!!!!
Why the fuck does JavaScript not have a proper waitUntil function? Now I have to do it dirty with while(!checkOpen(myDialog)) { }, which is just nasty.
Did you know that responsive web is not limited to text and page layout. It also allows us to define and select the image with correct size from a list of sources depending on viewport size. Best part is, all of this is part of HTML5. No JS needed.
I want to detect if a web browser is running on a device which is capable of placing a telephone call. Is that possible? I'm going to go with a cautious "no - not quite". Although there are several proxies which get you part of the way there. Here's a link to a telephone number […]
🆕 blog! “Does AI mean we don't need the Semantic Web?”
If you hang around with computerists long enough, they start talking about the Semantic Web. If you can represent human knowledge in a way that's easy for computers to understand it will be transformative for information processing. But computers, traditionally, haven't been very good at parsing ambiguous …
🆕 blog! “The limits of CSS styling select options”
Sometimes you learn the most from failures! I wanted a <select multiple> element where the <options> were laid out in a grid. I nearly got there. It's possible to have the <option>s in a horizontal row - but only on Chrome and Firefox. Here's a quick fiddle showing the results: As you can see, it's […]
This blog has a calendar showing my yearly archives. It was in a table layout - which made sense when I first designed it - but had a few spacing niggles and was hard to make responsive. Now, it behaves like this: The code is relatively straightforward. The HTML for the calendar looks like this: […]
🆕 blog! “How to password protect a static HTML page with no JS”
I recently saw Robin Moisson's method of password protecting a statically served HTML page. It's quite neat! But it does rely on JavaScript. That got me wondering if there was a way to encrypt a static page only using CSS? And... I think I've done it! I'll warn you now, this is a deeply s…
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 pin
Whenever I open Twitter in a new tab on my phone, the page layout looks weird for a few seconds. It starts out looking like the desktop view and then, after a few seconds, it snaps back to the mobile view.
What's causing this?
Try opening this link to a window size detector in a background tab. Then visit tha
(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:
That says the entire page is written in English, with the sub-type of Great Britain. T