In web-development circles, it is a well-known fact that trying to validate an email using a regular expression is… complex. The full set of modern email standards allows for such wonderful addresses as: chief.o'brien+ds9@spásárthach.भारत So determining whether or not your user has entered a valid email address becomes an ever-increasing challenge. But what if you have the opposite issue? Suppose you have a form which takes something which mustn't be an email address? For example - imagine y…
Continue reading →
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 journey. I had a sea of broken images. Even though the page had fully loaded, the images were set to "lazy" loading. When my browser sees <img src="example.jpg" loading="lazy" /> it defers downloading the picture until it is about …
Continue reading →
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 only be navigated by keyboard. What would the world look like if Engelbart never invented the mouse? Or if Johnson never published his work on touchscreens? Anyway, there are two ways to do this. The first is to …
Continue reading →
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 "call me!" - the HTML is: <a href="tel:+441234815259">call me!</a> You can use tel: in just the same way you'd use http: or mailto:. It tells the User Agent to open the correct program to deal …
Continue reading →
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 human text. Suppose you saw this text written for a human: Our opening hours are: Weekdays 10 until 7. Weekend 10 until 10 (Early closing 9 o'clock Sunday). Not the most straightforward…
Continue reading →
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 possible to do some pretty extravagant styling of the individual <options> you can even change how they look when they're selected. But it's impossible to get them to wrap using a flexbox or…
Continue reading →
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: <div class="calendars"> <div class="calendar"> <div class="calendar-year">2018</div> <div…
Continue reading →
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 stupid way to solve the problem. Here's a screencast of the demo in action: https://shkspr.mobi/blog/wp-content/uploads/2023/02/fucking-stupid-css-encryption-lol.mp4 Type the password and the page…
Continue reading →
A bit of a thought experiment - similar to my Minimum Viable XSS and SVG injection investigations. I recently found a popular website which echoed back user input. It correctly sanitised < to < to prevent any HTML injection. Except… It let through <h2> elements unaltered! Why? I suspect because the output was: <h2>Your search for ... returned no results</h2> And, somehow, the parser was getting confused. OK, what can we do with this little vector? The first thought is to u…
Continue reading →
How do you show two languages simultaneously in HTML? If you want to show text in a foreign language, the markup is simple: <html lang="en-GB"> ... As Caesar said: <i lang="la">veni vidi vici</i> That says the page is in British English (en-GB) but the specific phrase is in Latin (la). But how can you offer an in-text translation of that phrase into the page's native language? Here are a few options - and their drawbacks. Title Text <i…
Continue reading →
The set of HTML <ruby> elements allow us to add pronunciation above text. For example: "When you visit the zoo, be sure to see the panda - 熊(Xióng)猫(māo)." This is written as: <ruby>熊<rp>(</rp><rt>Xióng</rt><rp>)</rp></ruby><ruby>猫<rp>(</rp><rt>māo</rt><rp>)</rp></ruby>. That is, the word or character which needs text above it is wrapped in <ruby>. The pronunciation is wrapped in <rt>. The <rp> e…
Continue reading →
Introducing Paper Prototype CSS. When I first started designing the OpenBenches website, I wanted to make it look deliberately crappy. I didn't want the people testing it getting too hung up on what it looked like. I've found that some beta testers can only focus on whether the colours are right, or if things should be placed on the left or right. So I wanted something which mimicked "Paper Prototyping". A website which looked vaguely hand-drawn. As though it were scraps of paper and…
Continue reading →
