It is a truth universally acknowledged that a programmer in possession of some HTML will eventually try to parse it with a regular expression. This makes many people very angry and is widely regarded as a bad move. In the bad old days, it was somewhat understandable for a PHP coder to run a quick-and-dirty preg_replace() on a scrap of code. They probably could control the input and there wasn't …
Continue reading →
A few days ago, I wrote a shitty pretty-printer for PHP 8.4's new Dom\HTMLDocument class. I've since re-written it to be faster and more stylistically correct. It turns this: <html lang="en-GB"><head><title id="something">Test</title></head><body><h1 class="top upper">Testing</h1><main><p>Some <em>HTML</em> and an <img src="example.png" alt="Alternate Text"></p>Text not in an…
Continue reading →
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? Suppo…
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…
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…
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…
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:…
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…
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> …
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: …
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 …
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…
Continue reading →