webdev

alexwlchan - Using static websites for tiny archives blog webdev

Alex writes about creating HTML files in folders to browse files in various ways.

This allowed me to radically simplify the folder structure, and stop chasing the perfect hierarchy. In these mini-websites, I use very basic folders – files are either grouped by year or by first letter of their filename. I only look at the folders when I’m adding new files, and never for browsing. When I’m looking for files, I always use the website. The website can use keyword tags to let me find files in multiple ways, and abstract away the details of the underlying folders.

Why HTML?

I’m deliberately going low-scale, low-tech. There’s no web server, no build system, no dependencies, and no JavaScript frameworks. I’m writing everything by hand, which is very manageable for small projects. Each website is a few hundred lines of code at most.

It reminded me of a time when I had to present a project I'd worked on as part of a job interview. I created a number of linked HTML files that walked through various parts of the code. It had the benefit that if a question was asked I could directly open up the relevant file and dive into the code. The interviewers didn't seem impressed but I ended up getting the job, so I guess it worked.

Read from link
Wes Bos - How is this Website so fast!? webdev

Wes Bos inspects McMaster-Carr a tools and parts shop with a website that's buttery smooth. No seriously try it.

The developers seemed to have pulled out all the stops to accomplish this. There are some simple methods like using CDN caching, client caching through ServiceWorkers and preloading assets in <head> including dns-prefetch but also lesser known, or more obscure ones like using sprites to load images to reduce the number of HTTP requests. The videos covers some more, but I'll be using some of these in my site builds in the future.

Read from link
Blake Watson - HTML for People webdev

Seeing Blake Watson's HTML for People reminded me of learning to build a plain HTML website at school. The bulk of the guide covers the basics of HTML in an easy to consume format with short incremental examples. The guide also uses Simple.css to avoid having to learn any extra styling while still keeping the HTML content simple, although there's an extended bit that covers CSS and PHP.

Read from link
Bypassing airport security via SQL injection interesting webdev

Ian Carroll published a write-up together with Sam Curry on how they were able to add arbitrary crew members to bypass security screening or ride in a jump seat in the cockpit of an aircraft. They used SQL Injection (that seems to use MD5 password hashes!) on FlyCASS, a software system small airlines use to manage authorisation for their crew members at airports.

What was more shocking to me was seeing TSA allegedly trying to cover up the error.

The TSA press office said in a statement that this vulnerability could not be used to access a KCM checkpoint because the TSA initiates a vetting process before issuing a KCM barcode to a new member. However, a KCM barcode is not required to use KCM checkpoints, as the TSO can enter an airline employee ID manually. After we informed the TSA of this, they deleted the section of their website that mentions manually entering an employee ID, and did not respond to our correction. We have confirmed that the interface used by TSOs still allows manual input of employee IDs.

This post was discovered through Arne Bahlo's newsletter.

Read from link
There is no EU cookie banner law blog webdev

As annoying as cookie banners are I like seeing them because they give me the choice to deny being tracked but also because I get to see all the vendors a company would have otherwise sold my data too. The longer the list the further I tend to stay away from site unless absolutely necessary. The linked write-up on Bite Code! is a neat summary on why the banners don't have to be as bothersome as they typically are especially because we could have had a standard Do Not Track HTTP header!

There has been for years a proposal for a standard, designed in 2009 (!), still available in all the popular web browsers (except safari) that can make for a seamless experience: the DNT header.

Almost no website have implemented it, because companies WANT to nag you, hopping to trick you into being tracked. They know nobody would click yes on those settings.

So now it's deprecated.

Companies are making your life hard by choice. They got told by the EU they could not be secret abusers anymore, so now they decided to be irritating on top.

Read from link
Don't. Even. Publish. Stuff. That. ONLY. Supports. Dark. Mode. programming webdev

I was not aware of how much of an accessibility issue having only a dark colour scheme posed. I know there are preferences but seeing the replies on Nai's Mastodon post about the difficulty of reading white text on a dark background for some with astigmatism was surprising.

But there are some people (like me) who may be visually impaired. Astigmatism, for example, can make reading text that is white on dark a real PITA. An effect known as "halation" occurs, where each letter behaves as if it were a flashlight, gaining its own halo of light and making all text read more blurry than normal.

No matter how good your glasses are, astigmatism still causes you to see a little blurry—it's something you get used to. But this damn effect makes all the text read as if you don't have your glasses on, or even worse, leading to much more tired eyes or even pain.

Linked in the thread is a Vice article in which the author also shares similar difficulty reading dark colour schemes with astigmatism but also why dark backgrounds work for others.

My own very-astigmatic eyes are exhausted by dark mode, but for many others, dark themes are an accessibility benefit. White backgrounds emphasize floaters, those tiny spots of fibers that appear in some people’s vision. People with disorders like photophobia or keratoconus, conditions that cause high sensitivity to light, might read more easily with dark themes.

Read from link
SVG Tutorial: Learn how to code images in HTML with SVG programming webdev

SVG is an interesting and versatile text-based image format. Now I know it's not the Christmas season, but Hunor Márton Borbély has put together an advent calendar for SVG examples, and I've only now started working through them. It's very interactive and informative. I know I'll definitely be using these examples as references in the future.

Read from link