browsers – Terence Eden’s Blog

To download this page, click here

@edent — Sun, 08 Aug 2021 11:16:10 +0000

What's going on behind the scenes?

Here's the code. Note - it doesn't require thousands of imported NPM libraries, a complex Docker set-up, or any AI-on-the-blockchain.

Download this page

HTML 5 introduced a new attribute for the anchor element - download.

Rather than having to set your server up with Content Disposition headers - you can tell the browser that a click should result in a download, rather than displaying the contents in the browser.

This is usually used for things like downloading images. For example:

Download a kitten photo!!!

The mere presence of download in the anchor tells the browser to open up the "save" dialogue.

If you add a value to the attribute, you can tell the browser what the file should be called:

Download a random puppy!

If the href value is empty, the browser understands that to mean "the current page". When combined with download - the browser requests the page and delivers it as a download.

Why is this useful?

At work, we were discussing how we could a "Download this page" link to pages. Normally, it would have involved telling the user how to use File ➡ Save As on a variety of systems. Or reconfiguring the back-end so that adding a GET parameter to a URl would trigger a download.

But, with this little scrap of code, we don't need to change anything. It's an extra line of HTML somewhere on the page.

It's a pity there's no way to automatically in-line all the content of a page to make a self-contained asset. There's a feature request on Chromium to make this possible. But, for now, it works really well for downloading pages which are mostly text.

🛈 Please don't use the phrase "Click Here" on your links.

I know how many microphones and cameras you have

@edent — Tue, 22 Dec 2020 12:46:47 +0000

A curious little data leak, but one I struggle to care about. Perhaps useful for a bit of fingerprinting?

Websites can access your system's camera and microphone. That's how modern video conferencing works in the browser. In an effort to retain user privacy, the browser asks the user for permission to use the camera and mics. No audio or video will be sent until the user agrees.

But some metadata gets shared before you agree!

Visit the WebRTC Detection Experiment site. You'll notice that without you agreeing, the site is able to determine how many microphones you have:

And how many cameras you have:

Having two cameras is perhaps a reasonable proxy for being a mobile phone / tablet. One main cam, one selfie cam.

Multiple microphones could be an indicator that the user is on a laptop. Built in microphone and an external USB microphone. Although some phones also present multiple microphones.

The names of the devices aren't sent until after you agree to the permission prompt.

There are inconsistencies between browsers:

	FireFox	Chrome
Laptop	3 mics, 1 camera	1 mic, 1 camera
Android	1 mic, 2 cameras	3 mics, 2 cameras

It is useful to present to the user a selection of input devices. But does the site need to know how many devices are attached before permission has been granted?

The way the iPhone does it, is to present a fake set of data - one mic and one camera - until permission has been granted. Then it shows the real information.

Personally, I think the browser should only indicate a boolean to the site that AV inputs are available. Once permission is granted, then the site can request the number of devices and their names.

What do you reckon?

This blog strips off for CSS Naked Day

@edent — Thu, 09 Apr 2020 06:15:35 +0000

Half-a-dozen years ago, I proposed that web developers spend one day a year browsing without JavaScript. It's a great way to see how the web works when things break.

Similarly, April 9th is CSS Naked Day. A chance to throw off the shackles of good design, and see the raw beauty of your HTML. Today is intended for websites to remove their own style sheets - as this blog has done.

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of HTML, semantic markup, a good hierarchy structure, and of course, a good old play on words. It's time to show off your for what it really is.

But I'd like to go a step further. Turn off page styles while browsing the web. Do it now! On Firefox, it's easy:

You can't change user styles in Chrome. Because Google hates giving users a choice. So open up the Developer tools and paste this into the console:

for (var style in styles = document.styleSheets)
    styles[style].disabled = true;

Take a look around the web. Who is using CSS when they could be using semantic HTML? Which sites hide loads of crap from users. What weird things are being stuffed in their markup? How well does your site work if there's a glitch and the CSS doesn't load? What would the web be like if it were unstyled?

Zoom's forced app is irresponsible

@edent — Tue, 17 Mar 2020 12:46:14 +0000

Due to COVID19, I'm using a wide range of video conferencing services. Those of us who have work-supplied laptops usually have locked-down hardware. No unauthorised apps can be installed.

That's not a problem for Google Hangouts - it just works in any browser. No need to install plugins or apps. Voice and video just work.

But Zoom - one of the most used VC services - falsely claims that users need to install an app to use it. I've had frustrated colleagues express their displeasure that they can't install an app and, therefore, have to dial in on a phone and can't see any slides.

Here's the thing. Zoom supports web browsers. It just hides it really well. Only after attempting to download the app, and then waiting for a few seconds, do you get this tiny message saying you can join in the browser:

That's annoying and, frankly, irresponsible. People urgently need to get on calls and Zoom is deliberately making it hard to do. WebRTC works. It works really well across browsers. I'm sure the Zoom app is marvellous. But it is useless if people can't install it.

If you want to share a direct link to a call, use this:

https://whatever.zoom.us/wc/join/123456?pwd=

Replace the whatever with your company name and 123456 with your Zoom's conference ID.