At the same time, I don't want to know too much about people. I don't want to stalk them around the web. I refuse to care how long they spend with me. I can't be bothered setting up a foolproof system that captures 100% accurate information.

After trying several analytics plugins for WordPress, I've decided to have a go at writing my own⁰.

Before embarking on this, please do read "You Don't Need Analytics on Your Blog" and the slightly more provocative "You do not need “analytics” for your blog because you are neither a military surveillance unit nor a commodity trading company". Both give excellent examples of why this is at best foolish and at worse injurious. Proceed with caution in your heart.

Background

As a consequence of the way the web works, every time you click on a link the website's owner gets the following pieces of information.

• The time you clicked,
• The page you visited,
• The name of the web browser you use,
• The URl of the page which you clicked to get here,
• The IP address your computer has.

There are a few other things sent along but they're not interesting to me.

Using that information, I can construct a reasonably accurate view of how many times a post has been viewed and how many people viewed it.

Defining a page view

If a web page is loaded, that counts as a view. I'm not going to track whether the user stayed for more than 30 seconds or closed their browser in disgust after reading the headline. If the page is loaded, that's a view.

But what if one person repeatedly hits refresh on the same post? To deal with that, I'll need a concept of a visitor.

Defining a visitor

The "normal" way of doing things is to stick a cookie in the user's browser and track them that way. I can't be bothered with that. And, besides, it doesn't account for a person reading on their laptop and then moving to their phone.

So I'm going to use a proxy by creating a cryptographic hash of the visitor's IP address and the browser's User Agent string.

Of course, a household might have one IP address and multiple people with the same phone. But, equally, one person might rove over several WiFi networks in the course of one browsing session, getting a different IP each time.

The aim is to be reasonably accurate.

Hashing the contents means I don't need to store the user's IP address. Once hashed, the information becomes a string like db050e7b853e5856 which is functionally impossible to crack back to an IP address & UA string¹.

This also means that I can redefine the concept of a page view. If the same visitor refreshed the page multiple times, it will only count as a single visit.

I'll reset the counter at midnight in my local timezone. If someone visits just before midnight and then just after, it'll count as two visits. Oh well.

Where did they come from?

Generally speaking, there are two ways that visitors share their referrer. One is the "referer" header (yes, it is misspelled). It contains a URl of the referring site or application. For example, if someone clicked from a search result it might say https://yahoo.com.

The other way is using "Urchin Tracking Module" query strings. At the end of the URl they visit, they might append something like ?utm_source=alices-newsletter.

Some sites, like Reddit, might use multiple subdomains - old.reddit.com or out.reddit.com - so some deduplication may be necessary.

Where in the world are they?

A user's IP address is somewhat accurate method of detecting their location. Yes, users could be proxying through a VPN or using a SIM card from a foreign country. But this isn't an exercise in precise tracking. Rough and ready is fine.

There are a variety of GeoIP Databases which are updated semi-regularly. I'm only interested in the country of origin, I don't care about finer resolution than that.

Again, the aim isn't precise targetting. I'd just like to know that people in Sudan ever read my blog posts.

What else could we use?

It might be nice to know if someone is using a small-screen or large device. But my CSS is responsive, so I don't care.

Similarly, their Internet connection speed might be available. But, again, I try to optimise things so that isn't necessary to know.

Do I need to know if someone speaks Hungarian? No. There's nothing useful I can do with that information.

Could I extract their operating system, device, and browser from their User-Agent? I guess. Would I use the information that X% of my readers use Firefox on Linux? Doubtful!

Collect the information

There are two main methods of collecting these data.

First is a "no JavaScript" solution. This tells the browser to request an image which has a query string to send along the details of the page requested.

<noscript>
    <img src="/tracking.php?ID=<?php echo $postID ?>" alt="" width=1 height=1 class=hidden>
</noscript>

The downside is that there's no way to capture referer information. If each page were dynamically generated, I could grab it from PHP's $_SERVER superglobal. But my website is heavily cached, so that isn't possible.

It is possible to use JavaScript to dynamically send the information for collection:

let formData = new FormData();
formData.append("HTTP_REFERER", document.referrer);
formData.append("ID",  <?php echo $postID ?>);

fetch("/tracking.php", {
    method: "POST",
    body: formData,
});

This approach has three distinct advantages.

1. It works whether the user has JS enabled or not.
2. Repeated requests for the same page will usually reload the image from cache, so won't double-count.
3. It doesn't count hits from bots. They typically don't execute JavaScript or don't request images.

Bot Detection

Not all traffic originates from humans. There are lots of bots which crawl the web. Some are useful - like search engines building up a map. Others are harmful - like AI agents aggressively scraping content to plagiarise.

There are lots of identifiable bots out there - and more which obfuscate themselves. There are some, like Lighthouse which cloak themselves.

I'm not trying to eliminate everything which could be a bot. I am trying for reasonably accurate. So I eliminate any User-Agent which contains:

"/bot|crawl|spider|seo|lighthouse|facebookexternalhit|preview|HeadlessChrome/i"

There are some big lists of bots you can use - but they don't seem to trigger my analytics because they aren't requesting the images or executing the JS.

What bits of the site to measure?

I only care about how many visitors my posts and pages get. I don't need to know if someone visited a tag page, or scrolled back to page 100 of posts from 2019. Those sorts of deep pages are usually only accessed by bots anyway.

I also don't want to count visits from me, myself, and I.

So the tracking is only inserted on single pages which are viewed by non-admins:

if ( is_singular() && !current_user_can( "edit_posts" ) ) {
    …
}

Oddities

Sometimes, the URl requested will look something like: https://shkspr-mobi.translate.goog - that just means Google has translated it.

Sometimes, the referer will look something like: android-app://com.google.android.gm/ - that just means they clicked from an Android app.

Sometimes, the URl requested will include a fragment or a query string - they can be ignored.

Sometimes, the utm_ will contain all sorts of weird stuff. It isn't always possible to pull out exactly where it has come from.

Sometimes, the referer and utm_ will disagree. Ah well, never mind.

Sometimes, RSS views are counted and sometimes not. Perhaps I should fix that?

Sometimes, users block trackers or use a text-only browser. That's fine, they can keep their secrets.

Saving the data

I started this by just shoving what I collected into a CSV.

//  Write the CSV.
$line = [date("c"), $ID, $UA, $referer, $domain, $country, $user];
//  Date-based filename.
$filename = "log-" . date("Y-m-d") . ".csv";
//  Append mode.
$handle = fopen( $filename, "a" );
fputcsv( $handle, $line );
fclose( $handle );

Nothing fancy. Something easily grepable with the ability to query it in more detail if I need. At the number of hits that my site gets, it is less than 1MB per day.

I've since moved it into a single MySQL table. That might not be sustainable with hundreds of thousands of rows. But that's tomorrow's problem.

Accuracy

I've been running this for a couple of days - simultaneously with my other, more professional, stats plugin. It is within 5% accuracy. It appears to slightly exaggerate the number of visitors and undercount my page-views. That's good enough for my purposes and probably good for my ego!

Putting it all together

You can take a look at all the code on my GitLab repo.

What does it look like?

If you've made it this far, you can have a little pictorial treat! Aren't you lucky?

What's next?

For now, a simple table structure is fine. I've shoved it in a basic database. Sure, I don't have any indexes or fancy stuff like that. But modern computers are pretty fast.

Eventually I'll need to create some new tables which will consolidate the data. Perhaps a table for individual posts, using date and country? Or maybe referer? I'll have to see.

I also need a way to get historic data into it. I've blog stats going back to 2009 which I am anxious not to lose.

And, yeah, I'll need a better front-end than manually running SQL queries.

Above all, I want to keep it simple enough that my puny mortal brain can understand it after several years of not touching anything. I want to build something which can run without constant maintenance.

Remember, this is only an exercise in self-learning, self-hosting, and self-respect.

I am not a serious bit-twiddler. I can't create JS shaders which produce intricate 3D worlds in a scrap of code. But I can use slightly obscure JavaScript APIs!

There's something deliciously creepy about Numbers Stations - the weird radio frequencies which broadcast seemingly random numbers and words. Are they spies communicating? Commands for nuclear missiles? Long range radio propagation tests? Who knows!

So I decided to build one. Play with the demo.

Obviously, even the most extreme opus compression can't fit much audio into 1KB. Luckily, JavaScript has you covered! Most modern browsers have a built-in Text-To-Speech (TTS) API.

Here's the most basic example:

m = new SpeechSynthesisUtterance;
m.text = "Hello";
speechSynthesis.speak(m);

Run that JS and your computer will speak to you!

In order to make it creepy, I played about with the rate (how fast or slow it speaks) and the pitch (how high or low).

m.rate=Math.random();
m.pitch=Math.random()*2;

It worked disturbingly well! High pitched drawls, rumbling gabbling, the languid cadence of a chattering friend. All rather creepy.

But what could I make it say? Getting it to read out numbers is pretty easy - this will generate a random integer:

s = Math.ceil( Math.random()*1000 );

But a list of words would be tricky. There's not much space in 1,024 bytes for anything complex. The rules say I can't use any external resources; so are there any internal sources of words? Yes!

Object.getOwnPropertyNames( globalThis );

That gets all the properties of the global object which are available to the browser! Depending on your browser, that's over 1,000 words!

But there's a slight problem. Many of them are quite "computery" words like "ReferenceError", "URIError", "Float16Array". I wanted all the single words - that is, anything which only has one capital letter and that's at the start.

const l = (n) => {
    return ((n.match(/[A-Z]/g) || []).length === 1 && (n.charAt(0).match(/[A-Z]/g) || []).length === 1);
};

//   Get a random result from the filter
s = Object.getOwnPropertyNames( globalThis ).filter( l ).sort( ()=>.5-Math.random() )[0]

Rather pleasingly, that brings back creepy words like "Event", "Atomics", and "Geolocation".

Of course, Numbers Stations don't just broadcast in English. The TTS system can vocalise in multiple languages.

//   Set the language to Russian
m.lang = "ru-RU";

OK, but where do we get all those language strings from? Again, they're built in and can be retrieved randomly.

var e = window.speechSynthesis.getVoices();
m.lang = e[ (Math.random()*e.length) |0 ]

If you pass the TTS the number 555 and ask it to speak German, it will read out fünfhundertfünfundfünfzig.

And, if you tell the TTS to speak an English word like "Worker" in a foreign language, it will pronounce it with an accent.

Randomly altering the pitch, speed, and voice to read out numbers and dissociated words produces, I think, a rather creepy effect.

If you want to test it out, you can press this button. I find that it works best in browsers with a good TTS engine - let me know how it sounds on your machine.

🅝🅤🅜🅑🅔🅡🅢 🅢🅣🅐🅣🅘🅞🅝

With the remaining few bytes at my disposal, I produced a quick-and-dirty random pattern using Unicode drawing blocks. It isn't very sophisticated, but it does have a little random animation to it.

You can play with all the js1024 entries - I would be delighted if you voted for mine.

So, is it possible to build a TOTP⁰ code generator without using any external JS libraries? Yes! And it is (relatively) simple.

Here's the code that I've written. It is slightly verbose and contains a lot of logging so you can see what it is doing. I've annotated it with links to the various specifications so you can see where some of the decisions come from. I've compared the output to several popular TOTP code generators and it appears to match. You probably shouldn't use this in production, and you should audit it thoroughly.

I'm sure there are bugs to be fixed and performance enhancements to be made. Feel free to leave a comment here or on the repo if you spot anything.

I consider this code to be trivial but, if it makes you happy, you may consider it licensed under MIT.

async function generateTOTP( 
    base32Secret = "QWERTY", 
    interval = 30, 
    length = 6, 
    algorithm = "SHA-1" ) {

    //  Are the interval and length valid?
    if ( interval <  1 ) throw new Error( "Interval is too short" );
    if ( length   <  1 ) throw new Error( "Length is too low"     );
    if ( length   > 10 ) throw new Error( "Length is too high"    );

    //  Is the algorithm valid?
    //  https://datatracker.ietf.org/doc/html/rfc6238#section-1.2
    algorithm = algorithm.toUpperCase();
    if ( algorithm.match( "SHA-1|SHA-256|SHA-384|SHA-512" ) == null ) throw new Error( "Algorithm not known" );

    //  Decode the secret
    //  The Base32 Alphabet is specified at https://datatracker.ietf.org/doc/html/rfc4648#section-6
    const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ234567";
    let bits = "";

    //  Some secrets are padded with the `=` character. Remove padding.
    //  https://datatracker.ietf.org/doc/html/rfc3548#section-2.2
    base32Secret = base32Secret.replace( /=+$/, "" )

    //  Loop through the trimmed secret
    for ( let char of base32Secret ) {
        //  Ensure the secret's characters are upper case
        const value = alphabet.indexOf( char.toUpperCase() );

        //  If the character doesn't appear in the alphabet.
        if (value === -1) throw new Error( "Invalid Base32 character" );

        //  Binary representation of where the character is in the alphabet
        bits += value.toString( 2 ).padStart( 5, "0" );
    }

    //  Turn the bits into bytes
    let bytes = [];
    //  Loop through the bits, eight at a time
    for ( let i = 0; i < bits.length; i += 8 ) {
        if ( bits.length - i >= 8 ) {
                bytes.push( parseInt( bits.substring( i, i + 8 ), 2 ) );
        }
    }

    //  Turn those bytes into an array
    const decodedSecret = new Uint8Array( bytes );
    console.log( "decodedSecret is " + decodedSecret )

    //  Number of seconds since Unix Epoch
    const timeStamp = Date.now() / 1000; 
    console.log( "timeStamp is " + timeStamp )

    //  Number of intervals since Unix Epoch
    //  https://datatracker.ietf.org/doc/html/rfc6238#section-4.2
    const timeCounter = Math.floor( timeStamp / interval );
    console.log( "timeCounter is " + timeCounter )

    //  Number of intervals in hexadecimal
    const timeHex = timeCounter.toString( 16 );
    console.log( "timeHex is " + timeHex )

    //  Left-Pad with 0
    paddedHex = timeHex.toString(2).padStart( 16, "0" );
    console.log( "paddedHex is " + paddedHex )

    //  Set up a buffer to hold the data
    const timeBuffer = new ArrayBuffer( 8 );
    const timeView   = new DataView( timeBuffer );

    //  Take the hex string, split it into 2-character chunks 
    const timeBytes = paddedHex.match( /.{1,2}/g ).map(
        //  Convert to bytes
        byte => parseInt( byte, 16 )
    );

    //  Write each byte into timeBuffer.
    for ( let i = 0; i < 8; i++ ) {
         timeView.setUint8(i, timeBytes[i]);
    }
    console.log( "timeView is ",  new Uint8Array( timeView   ) );
    console.log( "timeBuffer is", new Uint8Array( timeBuffer ) );

    //  Use Web Crypto API to generate the HMAC key
    //  https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/importKey
    const key = await crypto.subtle.importKey(
        "raw",
        decodedSecret,
        { 
            name: "HMAC", 
            hash: algorithm 
        },
        false,
        ["sign"]
    );

    //  Sign the timeBuffer with the generated HMAC key
    //  https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/sign
    const signature = await crypto.subtle.sign( "HMAC", key, timeBuffer );

    //  Get HMAC as bytes
    const hmac = new Uint8Array( signature );
    console.log( "hmac is ", hmac );

    //  https://datatracker.ietf.org/doc/html/rfc4226#section-5.4
    //  Use the last byte to generate the offset
    const offset = hmac[ hmac.length - 1 ] & 0x0f;
    console.log( "offset is " + offset )

    //  Bit Twiddling operations
    const binaryCode = 
        ( ( hmac[ offset     ] & 0x7f ) << 24 ) |
        ( ( hmac[ offset + 1 ] & 0xff ) << 16 ) |
        ( ( hmac[ offset + 2 ] & 0xff ) <<  8 ) |
        ( ( hmac[ offset + 3 ] & 0xff ) );

    //  Turn the binary code into a decimal string
    stringOTP = binaryCode.toString();
    console.log( "stringOTP is " + stringOTP );

    //  Count backwards from the last character for the length of the code
    otp = stringOTP.slice( -length) 
    console.log( "otp is " + otp );
    //  Pad with 0 to full length
    otp = otp.padStart( length, "0" );
    console.log( "padded otp is " + otp );

    //  All done!
    return otp;
}


// Generate a TOTP code
( async () => {
    console.log( await generateTOTP( "4FCDTLHR446DPFCKUA46UFIAYTQIDSZ2", 30, 6, "SHA-1" ) );
} )();

It works with the three specified algorithms, generating between 1 and 10 digits, and works with any positive integer interval. Not all combinations are sensible; a one digit code valid for two minutes would be silly. But it is up to you to use this responsibly.

I hope I've shown that you don't need to rely on 3rd party libraries to do your cryptography; you can do it all in the browser instead.

You can grab the code from Codeberg.

Spoiler alert: yes!

Basic Globe

Here's a basic example which I've trimmed down from this example.

When you load the below code, you'll get a globe which you can spin and zoom. Nifty!

<!DOCTYPE html>
<html>
    <head>
        <title>Globe Projection using OpenFreeMap</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@5.0.0/dist/maplibre-gl.css">
        <script src="https://unpkg.com/maplibre-gl@5.0.0/dist/maplibre-gl.js"></script>
        <style>
            body { margin: 0;padding: 0; }
            html, body, #map { height: 100%; }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script type="module">
            const map = new maplibregl.Map({
                container: "map",
                style: "https://tiles.openfreemap.org/styles/liberty",
                zoom: 2,
                center: [0.123, 51.2345],
                pitch: 0,
                canvasContextAttributes: { antialias: true }
            });

            map.on('style.load', () => {
                map.setProjection({
                    type: 'globe',
                });
            });
        </script>
    </body>
</html>

Adding Markers

In most respects, this acts like a normal MapLibre GL map. To add a marker, add this code:

const marker = new maplibregl.Marker()
    .setLngLat([12.345, 54.321])
    .addTo(map);

GeoJSON Clusters

Now for the big one! On OpenBenches we display markers and clusters of markers. On a flat map, it looks like this:

We want to turn it into this beauty:

Here's the code, adapted from the tutorial:

const map = new maplibregl.Map({
    container: "map",
    style: "https://tiles.openfreemap.org/styles/liberty",
    zoom: 2,
    center: [0.123, 51.2345],
    pitch: 0,
    canvasContextAttributes: { antialias: true }
});

map.on('style.load', () => {
    map.setProjection({
        type: 'globe',
    });
});

//  Load GeoJSON
async function load_GeoJSON() {
    const response = await fetch( "geo.json" )
    var benches_json = await response.json();
    return benches_json;
}

//  Asynchronous function to add custom layers and sources
async function addCustomLayersAndSources() {
    //  Get the data
    var geo_data = await load_GeoJSON();
    //  Load the GeoJSON
    if (!map.getSource('geo_data')) {
        map.addSource('geo_data', {
            type: 'geojson',
            data: geo_data,
            cluster: true,
            clusterMaxZoom: 17, // Max zoom to cluster points on
            clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
        });
    }

    //  Custom point marker
    if ( map.listImages().includes("marker-icon") == false ) {
        var image = await map.loadImage('/marker.png');
        map.addImage('marker-icon', image.data);
    }

    //  Add the clusters
    if (!map.getLayer('clusters')) {
        map.addLayer({
            id: 'clusters',
            type: 'circle',
            source: 'geo_data',
            filter: ['has', 'point_count'],
            paint: {
                // Use step expressions (https://maplibre.org/maplibre-style-spec/expressions/#step)
                // with three steps to implement three types of circles:
                //   * Blue, 20px circles when point count is less than 100
                //   * Yellow, 30px circles when point count is between 100 and 750
                //   * Pink, 40px circles when point count is greater than or equal to 750
                'circle-color': [
                    'step', ['get', 'point_count'],
                        '#51bbd655',
                    100, '#f1f07555',
                    750, '#f28cb155'
                ],
                'circle-radius': [
                    'step', ['get', 'point_count'],
                        20,
                    100, 30,
                    750, 40
                ],
                'circle-stroke-width': [
                    'step', ['get', 'point_count'],
                        1,
                    100, 1,
                    750, 1
                ],
                'circle-stroke-color': [
                    'step', ['get', 'point_count'],
                        '#000',
                    100, '#000',
                    750, '#000'
                ],
            }
        });

        //  Show number of markers in each cluster
        map.addLayer({
            id: 'cluster-count',
            type: 'symbol',
            source: 'geo_data',
            filter: ['has', 'point_count'],
            layout: {
                'text-field': '{point_count_abbreviated}',
                'text-font': ['Noto Sans Regular'],
                'text-size': 25
            }
        });

        //  Show individual markers
        map.addLayer({
            id: 'unclustered-point',
            source: 'geo_data',
            filter: ['!', ['has', 'point_count']],
            type: 'symbol',
            layout: {
                "icon-overlap": "always",
                'icon-image': 'marker-icon',  // Use the PNG image
                'icon-size': .1              // Adjust size if necessary
            }
        });
    }
}

//  Start by drawing the map
map.on('load', async () => {
    await addCustomLayersAndSources();
});

Obviously, there's a lot more you can do - but I hope this shows just how quickly you can get a clustermap working on a globe.

I went to type in my 2FA code on a website - but no numbers appeared on screen. Obviously, I was an idiot and had forgotten to press the NumLock button. D'oh! I toggled it on and typed again. No numbers appeared. I switched to another tab, my numbers appeared when I typed them. So I was reasonably confident that my keyboard was working.

I swapped back to the 2FA entry and tried again. Still nothing. Then I tried typing the numbers using the number row on my keyboard. My 2FA code appeared.

WHAT IN THE SAINTED NAME OF ALPHONSE CHAPANIS IS GOING ON?!?!?

Developers often use JavaScript to "improve" the standard features of HTML. For example, using <input type="number"> has some accessibility concerns and using inputmode="numeric" is great for showing a number key board on mobile, but not much else.

So a developer wants a reliable way to make sure a user can only type numbers. Fair enough.

There are two ways to do this - a right way and a wrong way - using KeyboardEvent.

One way is to listen for the character being sent from the keyboard - known as the key.

The other is to listen for the button being pressed on the keyboard - known as the code.

A good demo of this is at keyjs.dev - play around with it to see what keyboard buttons your browser can detect.

When I press 7 on the top row of my keyboard, the key is 7 and the code is Digit7.

But when I press 7 on my number pad, the key is 7 but the code is Numpad7.

The JavaScript on the website was rejecting any key code which wasn't a "Digit"!

Perhaps I am a weirdo for insisting on both having and using my numpad? Perhaps developers need to test on something other than MacBooks? Perhaps JavaScript was a mistake and the Web would be better without it?

Either way, don't be like that website. Let users type in using whatever keys they like.

What's causing this?

Try opening this link to a window size detector in a background tab. Then visit that tab.

On Chrome, this is what I see.

If I hit the refresh button on that tab, the Outer window size snaps back:

What's going on?

According to the specification:

The outerWidth attribute must return the width of the client window. If there is no client window this attribute must return zero.

This is where I get confused. The inner width & height are the amount of space the the browser has to display web content - so ignores the browser bar, menu bars, window decorations etc. The outer width & height are the total amount of space the browser window has.

How can a browser window have no outer size, but simultaneously have an inner size???!?!

There is a client window. The tab may be rendering away in the background - but its parent still has a non-zero size.

There has been a bug report open on Chrome about this since 2017.

Firefox takes a different approach. On desktop, both outer and inner are reported correctly for background tabs. On mobile, both outer and inner dimensions are set to zero. This may change as it is a potential fingerprinting target.

So, web developers, please don't rely on window.innerHeight and window.outerHeight - users may be opening your site in the background, which causes the browser to lie to you.

I've been doing this for a long time. It is a natural part of my workflow. For anything longer than an email, it's the perfect orientation. Most Linux apps work just fine like this - although menu buttons tend to hide behind overflows.

Websites though, ah! That's where the problem begins. Lots of websites think "Vertical Screen == Mobile User"!

This is a minor problem - and one of my own making - but I thought it worth explaining the problems it brings, why it occurs, & how to stop it.

Examples

Here are some typical websites viewed on my 24″ vertical monitor. On the left if how it renders, and on the right how it should render.

Problems

Generally, there are several problems I encounter:

• Navigation is hidden behind a burger / ☰ menu.
• Some elements, like carousels, only work with touchscreen controls.
• Images are served as low resolution, for 6 inch screens and then blown up to 24 inches.
• Lots of wasted space taken up with "hero images" and finger-friendly buttons.
• Some content simply not available to mobile users.

Why this occurs

My monitor's native resolution is 1080x1920. But I find the fonts slightly too small at that resolution - given how far I sit from the screen. I use Pop_OS Linux, which lets me scale the fonts rather than the screen resolution.

A scale factor of 1.5 translates to an effective screen resolution of 720x1280.

User Agent "sniffing" is considered an antipattern and is discouraged. So most websites don't bother to check if I'm browsing on an iPhone or Android, instead, they use JavaScript or CSS to get my screen resolution.

They - somewhat reasonably - see a 720p screen in a vertical orientation and assume it is a small screen device.

How to tackle this (user side)

Zoom out! That's the obvious answer. If I hit CTRL+- 3 times, my resolution becomes 1080x1920. But that can leave some sites too small to read properly. I need to zoom out the page, and zoom in the font.

I have tried "Fractional Scaling" - it works OK on Wayland, but leaves all the fonts looking soft and fuzzy.

So I've set my font scaling to 1.36, which gives me a resolution of 864x1536 - which is enough to stop most sites assuming I'm on a tiny mobile phone.

But this shouldn't be my problem to solve.

How to tackle this (website side)

STOP NAÏVELY USING SCREEN RESOLUTION!

OK, there's no way to get the physical size of a user's screen. That functionality just doesn't exist in either JavaScript or CSS.

But you can get the Dots Per Inch (DPI). Well, sort of...

CSS allows you to get the DPI of the screen.

If I go to Lea Verou's https://DPI.lv/ I see that my monitor's resolution is correctly detected as 1080x1920! No matter what zoom level or font scaling I use - it is always the correct resolution.

var dppx = window.devicePixelRatio;
var screenWidth  = screen.width  * dppx;
var screenHeight = screen.height * dppx;

That's how you get the real resolution, unencumbered by whatever the OS is doing to the scaling.

If I go to a different DPI detector, I can see exactly how many pixels there are per inch. My vertical monitor is detected as 120px/inch.

This isn't quite right. And different browser engines calculate this differently. On Linux, I got these results with the three main rendering engines:

• Chrome: 5.14px/mm.
• Firefox: 4.73px/mm.
• Webkit: 3.78px/mm.

When I physically measure the screen, it's about 3.62px/mm!

Obviously that's not incredibly accurate - but it is useful in giving a web developer a rough idea of physical screen size.

Lots of websites use large Javascript libraries. They often include them by using a 3rd party Content Delivery Network like so:

<script src="https://cdn.example.com/js/library-v1.2.3.js"></script>

There are, supposedly, a couple of advantages to doing things this way.

1. Users may already have the JS library in their cache from visiting another site.
2. Faster download speeds of large libraries from CDNs.
3. Latest software versions automatically when the CDN updates.

I think these advantages are overstated and lead to some significant disadvantages.

Cacheing

I get the superficial appeal of this. But there are dozens of popular Javascript CDNs available. What are the chances that your user has visited a site which uses the exact same CDN as your site?

How much of an advantage does that really give you?

Speed

You probably shouldn't be using multi-megabyte libraries. Have some respect for your users' download limits. But if you are truly worried about speed, surely your whole site should be behind a CDN - not just a few JS libraries?

Versioning

There are some CDN's which let you include the latest version of a library. But then you have to deal with breaking changes with little warning.

So most people only include a specific version of the JS they want. And, of course, if you're using v1.2 and another site is using v1.2.1 the browser can't take advantage of cacheing.

Reliability

Is your CDN reliable? You hope so! But if a user's network blocks a CDN or interrupts the download, you're now serving your site without Javascript. That isn't necessarily a bad thing - you do progressive enhancement, right? But it isn't ideal.

If you serve your JS from the same source as your main site, there is less chance of a user getting a broken experience.

Privacy

What's your CDN's privacy policy? Do you need to tell your user that their browsing data are being sent to a shadowy corporation in a different legal jurisdiction?

What is your CDN doing with all that data?

Security

British Airways' payments page was hacked by compromised 3rd party Javascript. A malicious user changed the code on site which wasn't in BA's control - then BA served it up to its customers.

What happens if someone hacks your CDN?

You gain extra security by using SubResource Integrity. That lets you write code like:

<script src="https://cdn.example.com/js/library-v1.2.3.js"
   integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
   crossorigin="anonymous"></script>

If even a single byte of that JS file is changed, the hash won't match and the browser should refuse to run the code.

Of course, that means that you could end up with a broken experience on your site. So just serve the JS from your own site.

So what?

This isn't the biggest issue on the web. And I'm certainly guilty of misusing CDNs like this.

Back when there were only a few CDNs, and their libraries didn't change rapidly, there was an advantage to using them.

Nowadays, in an era of rampant privacy and security violations, I think using 3rd party sources for Javascript should be treated as an anti-pattern.

1. BA had 3rd party JS on its payment page
   <script src="https://example.com/whatever.js"></script>
2. The 3rd party's site was hacked, and the JS was changed.
3. BA's customers ran the script, which then harvested their credit card details as they were typed in.

This should have been a wake-up call to the industry. Don't load unauthenticated code on your website - and especially not on your payments page.

If you absolutely have to load someone else's code, check to see if it has been altered. This is done using SubResource Integrity (SRI).

SRI tells the user's browser to check that the code hasn't been changed since the website was published. It looks like this:

<script src="https://example.com/whatever.js"
        integrity="sha384-eP2mZH+CLyffr1fGYsgMUWJFzVwB9mkUplpx9Y2Y3egTeRlmzD9suNR+56UHKr7v" 
        crossorigin="anonymous"></script>

If even a single bit of the code has changed since it was added to the page, the browser refuses to run it.

Who isn't using this

Deliveroo

Gig-economy food flingers add in code from CDNJS.

What's especially annoying about this, is that the CDNJS website has a "one-click copy" for SRI.

Spotify

Their payment page loads code from live.adyen.com Adyen are their payment provider - so if they get hacked, credit card details are going to get compromised. But how much easier is it for an attacker to subtly change their JavaScript than to hack their entire mainframe?

The Guardian

Despite being a tofu-knitting member of the bourgeoisie, I am yet to subscribe to teh Gruan. If I did, I'd risk their affiliate tracker going rogue and stealing my organic credit card details. Bonus points for leaving a handy pointer to their internal Google docs...

Fanduel

Sports betting site running unverified scripts from external sources. They've also got external style-sheets

<link rel="stylesheet" href="//d2avoc1xjbdrch.cloudfront.net/6.26.0/styles/desktop.css">

If an attacker can change the JS or CSS, they could compromise users of the site.

EasyJet

I feel a bit conflicted about this one. You can probably trust Google not to get hacked. Right?

Google supports SRI - but doesn't mention it anywhere on their Hosted Libraries site.

British Airways!

Yup! They've not learned their lesson. Three pieces of unverified code running on the payment page.

• Maxymiser is an A/B testing and analytics tool. Run by Oracle now. Most ad-blockers prevent it loading.
• Google's reCAPTCHA. If that gets hacked, half the planet is compromised.
• SiteSeal "proves" your site is secure by displaying a image. No, I don't understand that either.

This does not make the site magically secure.

All three of them are highly trustworthy. But if you're BA and you've already been bitten by bad security practices, doesn't it make sense to go full "belt-and-braces"?

...and more?

These are just a small sample of the sites I've found. SRI has been available for two years and it still isn't being used enough.

Responsible Disclosure

I've reported this issue to a few sites by using responsible-disclosure aggregator HackerOne.

Typically, my warning goes unheeded with a response like:

Based on your initial description, there do not appear to be any security implications as a direct result of this behavior, this is an Informational issue at best, unless you can prove those third-party domains can be compromised in any way.

or

This appears to be more of a risk acceptance rather than a vulnerability. Although there is no PoC for this report, I will forward the information to the customer and see where to go from there.

That's fair enough. I'm not expecting a huge payout and it is only an informative report; I can't prove that the external sites are vulnerable. But there really ought to be a concerted effort to make payment sites as secure as possible.

This needs to be taken seriously. If you're handling users' details, you need to take every possible step to keep them secure.

GitHub users have a username (mine is @edent) and have a user ID number (mine is #837136).

If you want to redirect a user ID to a username, you can use the little service I've cobbled together:

https://edent.github.io/github_id/#837136

That will take your browser to my GitHub page, using nothing but my ID.

Why?

• Some login services only give you the GitHub user's ID.
• GitHub users can change their username - but their ID stays the same.

How?

Inspired by Caius Durling's useful GitHub username to ID service.

Mine is a scrap of JavaScript which uses this undocumented endpoint to get user info.

<script type="text/javascript" charset="utf-8">
function get_github_name_for(id) {
    $.getJSON('https://api.github.com/user/' + id + "?callback=?", 
    function(json){
        var github_user_url = json["data"]["html_url"]
        window.location.replace(github_user_url)
        return false
    });
}
$(document).ready(function() {
    if (document.location.hash) {
        var id = document.location.hash.match(/^#(.*?)$/)[1]
        get_github_name_for(id)
    }
});
</script>

Feel free to copy it, or use https://edent.github.io/github_id/#837136 as a handy little webservice.

Here it is, an SVG calendar which always display's today's date:

The background image is derived from the Twitter TweMoji Calendar icon - CC-BY.

Text support in SVG is a little awkward, so let me explain how I did this.

SVG supports JavaScript. This will run as soon as the image is loaded.

<svg onload="init(evt)" xmlns="http://www.w3.org/2000/svg"
aria-label="Calendar" role="img" viewBox="0 0 512 512">

Next step is to get the various date strings. I'm using the en-GB locale as that's where I'm based.

<script type="text/ecmascript"><![CDATA[
function init(evt) {
  var time = new Date();
  var locale = "en-gb";

I want to display something like "Sunday 25 FEB" - the locale options allow for short and long names. So you could have "SUN 25 February".

  var DD   = time.getDate();
  var DDDD = time.toLocaleString(locale, {weekday: "long"});
  var MMM = time.toLocaleString(locale,  {month:   "short"});

Finally, we need to add the text on to the image.

  var svgDocument = evt.target.ownerDocument;

  var dayNode = svgDocument.createTextNode(DD);
  svgDocument.getElementById("day").appendChild(dayNode);

  var weekdayNode = svgDocument.createTextNode(DDDD);
  svgDocument.getElementById("weekday").appendChild(weekdayNode);

  var monthNode = svgDocument.createTextNode(MMM.toUpperCase());
  svgDocument.getElementById("month").appendChild(monthNode);

}
]]></script>

Text positioning is relatively simplistic. An X & Y position which is anchored to the bottom of the text - remember that letters with descenders like g will extend beyond the bottom of the Y co-ordinate. This is also where we set the colour of the text, its size, and a font.

A monospace font makes it easier to predict the layout.

<text id="month"
  x="32" 
  y="164" 
  fill="#fff" 
  font-family="monospace"
  font-size="140px"
  style="text-anchor: left"></text>

A word on anchoring. To centre the anchor, use style="text-anchor: middle"

A quick test shows that this works on all desktop browsers and Android browsers. I've not tested on iPhones or anything more exotic.

Enjoy!

• GitHub repo
• Discussion on HackerNews

Why? Who knows!

Obviously, it's easy to shrink an image server-side, but how do we do it in the browser?

First, let's take a bog-standard file chooser and add a <canvas> element.

<input id="userFile" type="file" accept="image/jpeg" />
<canvas id="shrink"></canvas>

Next, when the user chooses a file, draw it on the canvas at half the resolution of the original file.

var input = document.getElementById('userFile');
input.addEventListener('change', drawImage, false);

function drawImage(e) {
   // The File
   var file = e.target.files[0];
   var reader = new FileReader();

   // The Canvas
   var canvas = document.getElementById("shrink");
   var ctx = canvas.getContext('2d');

   // The Image
   var img = new Image();

   // Once the file has been read, set it as the image's source
   reader.readAsDataURL(file);
   reader.onloadend = function () {
      img.src = reader.result;
   }

   // Once the image has been set, draw it on the canvas
   img.onload = function() {
      // Scale the canvas to be half the size of the image
      // You can change the "/2" to be whatever size you want
      ctx.canvas.width  = img.width /2;
      ctx.canvas.height = img.height /2;

      // Draw the image onto the canvas
      ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height);
   }
}

Here's the clever part! We can take the 2D image on the canvas and turn that into a JPG! In this specific example, the quality is set to 75% - which reduces the files size still further. This uses .toDataURL().

var smallImage = canvas.toDataURL('image/jpeg', 0.75);

Now smallImage will contain "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDA...."

A much smaller file than the original.

This representation of the file can then be POSTed to Google Cloud Vision.

I'm tentatively calling this "International No Javascript UseR Experience Day" or INJURED for short.

A few weeks ago, a reader of my blog complained that all they saw was a blank screen. As Liz Conlan pointed out, my CSS was making the whole page invisible. My WordPress theme has a feature which renders the page blank until all the extra fonts etc have properly loaded - then it makes the page visible. That's a neat little hack to stop the page jumping around as it loads - but it fails utterly when the user doesn't have JavaScript.

Why Do This?

Firstly, let's ask how many people browse the web without JS.

According to this recent post by the UK Government's web team, approximately 1.1% of their visitors don't or can't use JavaScript.

That's a small fraction of visitors - but not an insignificant number of people to piss off if you run a major website.

Secondly, why don't people use JavaScript? There are a variety of reasons, most of which seem to fall into the following categories:

• Security. Why run untrusted code on your computer if not strictly necessary?
• Speed. On slower machines, or those with limited bandwidth, JavaScript can cause a page to render slowly.
• Privacy. JavaScript is often used to track users.
• Accessibility. Not all users have perfect vision or dexterity - JavaScript can be an annoyance, assuming their accessible browser supports it at all.
• Incompatible browser. As well as specialised browsers, many people still run outdated versions of popular web browsers.
• Network interference. Some ISPs and corporate networks will automatically degrade or disable JavaScript.

So, we have a bunch of customers / users who either can't or won't use JavaScript. Should we ignore them?

How The Other Half Live

I think it's important to see how our technology works when presented in less-than-ideal circumstances. If an astronaut on the ISS wants to load your website on their IE6 box running over slow link with huge ping times, what's their experience going to be?

I quite often use Lynx to browse the web. It's a text only browser with very few bells and whistles. Here's how it looks when trying to use Twitter. I use Lynx for 4 main reasons:

1. How does my layout work for those who use Text-To-Speech to browse the web? It's not perfect, but I can see how easy it is to navigate, whether I've used alt/title tags for images correctly.
2. When on a painfully slow connection. We've all be stuck somewhere with Internet speeds barely better than dial-up, right? With Lynx I'm not loading MBs of JS, CSS, images, Flash objects, HTML5 video. Just the information I want.
3. What does a search engine see? When a spider comes crawling, how much semantic meaning do they derive from my markup?
4. Does basic functionality work for the lowest common denominator.

It's amazing how quick the web when you're ignoring everything other than the HTML! Moreso, it's incredible how even some simple sites won't work without JavaScript.

I'm not proposing that we go back to a text-only existence, nor that we all disable JavaScript permanently. Merely that - once in a while - we experience the web without our favourite toy. Do our sites break catastrophically? Is there a more accessible way we can provide a feature?

I'm not proposing to make a website, logo, or define a specific day. I'd just like you to turn off JavaScript for a day and see if anything odd happens.

I found a curious bug this weekend, which made me think about some of the assumptions that we use when programming.

Imagine sorting an array using JavaScript.

var arr = [10, 5, 66, 8, 1, 3];
arr.sort();

So far, so normal. Create an array of numbers, then sort that array. The result should always be [1, 3, 5, 8, 10, 66].

Would we ever need to do this?

if (arr[0] < arr[5]) {
   // Do something
} else {
   // THIS SHOULD NEVER HAPPEN!
   laws_of_physics_violated(arr);
}

Sorting an array in this way should never trigger an existential crisis. But suppose it did.

A Brief Word on Android Fragmentation

Android fragmentation has never really bothered me. It's usually a case of sensibly designing a UI to flow correctly and checking the capabilities of a device. No more complex than designing for the web.

This weekend, my father and I spent the weekend building our first joint Android app - First Bid Bridge - it's a simple enough app that we decided to use a WebView and write the game logic in JavaScript.

All was going well until I tested the game on my Dad's phone. It didn't work. All the answers it produced were completely at odds with the answers on my phone.

Welcome To Facebook?

We tried this on every old phone I could find. Android 1.6, 2.3, 4.2 - they all worked. iPhone, Maemo, BlackBerry - hell, even my Internet TV worked flawlessly.

Painstakingly crawling through the logic, I found the problem. A "sorted" array was reversed on his phone! (Galaxy Ace running 2.3.6 for those who want to know.)

Diagnosing

Our app looks at a hand of cards. We split the hand into suits (Spade, Hearts, Diamonds, Clubs). We record how many cards are in each suit.

We then sort the hand by length - if two of the suits have the same length, they are sorted in the order Spades > Hearts > Diamonds > Clubs.

JavaScript allows us to define our own sorting function. Here's ours (in simplified form)

First, we sort by length:

suitsArray.sort(function(x, y)
{
    var o1 = x["length"];
    var o2 = y["length"];
    return o2-o1;
});

Then, we sort by suit order (if the lengths are the same):

suitsArray.sort(function(x, y)
{
    var length1 = x["length"];
    var length2 = y["length"];

    if (length1 == length2)
    {
        var suit1 = x["suit"];
        var suit2 = y["suit"];

        if(suit1 == "spades")
        {return false;}

        if(suit1 == "hearts")
        {return false;}

        if(suit1 == "diamonds")
        {return false;}

        return true;
    }
});

In every device I tried, this sort worked perfectly. Except on my dad's $@*&ing phone. ARGH! What was even worse, is that we were an hour's journey away from each other, so I couldn't debug on the device.

So, that's where I came up with the idea of Aggressively Defensive Programming. It may not be an original idea - but this is how it works.

Trust, but verify

"Доверяй, но проверяй" as the Russians would say.

Assume that your computer is crazy, possessed, or being zapped by cosmic radiation and check its compliance every step of the way.

Essentially, after every operation, you should verify that the operation has worked. In this case, we did this (simplified):

// The above sort

if ((arr[0]["length"] == arr[1]["length"]) && (arr[1]["suit"] == "spades")) {
   // Dammit!
   // Sort the array manually
} else {
   // Carry on as normal
}

Where Should This Be Used

There are four main scenarios where it makes sense to programs defensively.

1. Your code has a real impact on human health (aeroplane, nuclear reactor, medical device).
2. The computer you're running on is in a harsh environment and therefore liable to unpredictable behaviour (Mars Rover)
3. A multithreaded environment where your code cannot lock resources for itself.
4. You are running on an untrusted computer i.e. one other than your own.

For most of us, the first three are unlikely to trouble us. But the final one is interesting. Almost every piece of code we write will be run on a 3rd party's computer. One over which we have very little control.

But that's what we do when we release apps - or run websites. The code we have lovingly crafted is being run on machines which may have all manner of quirks.

How aggressive should we be with our defences? Do we assume that built in functions work - and only check ones we've written ourselves?

In Principia Mathematica Bertrand Russell famously provided proofs such as "1+1=2".

Is that what we need? Mathematically verify every computer our code runs on? That may be overkill. But I'm starting to come round to the idea of verifying every operation - even if just to throw an exception rather than proceeding in an error prone state.

I leave you with an instructional extract from Douglas Adam's Mostly Harmless:

On board the ship, everything was as it had been for millennia, deeply dark and Silent.

Click, hum.

At least, almost everything.

Click, click, hum.

Click, hum, click, hum, click, hum.

Click, click, click, click, click, hum.

Hmmm.

A low level supervising program woke up a slightly higher level supervising program deep in the ship's semi-somnolent cyberbrain and reported to it that whenever it went click all it got was a hum.

The higher level supervising program asked it what it was supposed to get, and the low level supervising program said that it couldn't remember exactly, but thought it was probably more of a sort of distant satisfied sigh, wasn't it? It didn't know what this hum was. Click, hum, click, hum. That was all it was getting.

The higher level supervising program considered this and didn't like it. It asked the low level supervising program what exactly it was supervising and the low level supervising program said it couldn't remember that either, just that it was something that was meant to go click, sigh every ten years or so, which usually happened without fail. It had tried to consult its error look-up table but couldn't find it, which was why it had alerted the higher level supervising program to the problem .

The higher level supervising program went to consult one of its own look-up tables to find out what the low level supervising program was meant to be supervising.

It couldn't find the look-up table .

Odd.

It looked again. All it got was an error message. It tried to look up the error message in its error message look-up table and couldn't find that either. It allowed a couple of nanoseconds to go by while it went through all this again. Then it woke up its sector function supervisor.

The sector function supervisor hit immediate problems. It called its supervising agent which hit problems too. Within a few millionths of a second virtual circuits that had lain dormant, some for years, some for centuries, were flaring into life throughout the ship. Something, somewhere, had gone terribly wrong, but none of the supervising programs could tell what it was. At every level, vital instructions were missing, and the instructions about what to do in the event of discovering that vital instructions were missing, were also missing.

Small modules of software - agents - surged through the logical pathways, grouping, consulting, re-grouping. They quickly established that the ship's memory, all the way back to its central mission module, was in tatters. No amount of interrogation could determine what it was that had happened. Even the central mission module itself seemed to be damaged.

This made the whole problem very simple to deal with. Replace the central mission module. There was another one, a backup, an exact duplicate of the original. It had to be physically replaced because, for safety reasons, there was no link whatsoever between the original and its backup. Once the central mission module was replaced it could itself supervise the reconstruction of the rest of the system in every detail, and all would be well.

Robots were instructed to bring the backup central mission module from the shielded strong room, where they guarded it, to the ship's logic chamber for installation.

This involved the lengthy exchange of emergency codes and protocols as the robots interrogated the agents as to the authenticity of the instructions. At last the robots were satisfied that all procedures were correct. They unpacked the backup central mission module from its storage housing, carried it out of the storage chamber, fell out of the ship and went spinning off into the void.

This provided the first major clue as to what it was that was wrong.

Further investigation quickly established what it was that had happened. A meteorite had knocked a large hole in the ship. The ship had not previously detected this because the meteorite had neatly knocked out that part of the ship's processing equipment which was supposed to detect if the ship had been hit by a meteorite.

The idea was that developers could created a properly threaded view of conversations.

Of course, Twitter being ultra-responsive to developers, did absolutely nothing.

Skip three years into the future, and App.net is providing all the API goodness that Twitter doesn't. This means that we can easily create new ways to view conversations.

So that is exactly what I've done.

You can play with HyperThread yourself at shkspr.mobi/hyper/.

This is a hypertree visualisation of a simple conversation. The centre node is the start of the conversation. Each reply goes off in its own thread. Clicking on a node, re-centres the tree.

As a conversation grows in complexity, the conversation fades out at the edges. Clicking down a conversation thread allows you to easily follow a thread.

Of course, with extremely long and complex threads, the tree becomes more difficult to navigate. This is something I hope to fix in future versions.

Here is a video explaining how it all works.

You can play with HyperThread yourself at https://shkspr.mobi/hyper/.

The visualisation uses The JavaScript InfoVis Toolkit.

The tree sorting algorithm is courtesy of the good folk at StackOverflow.

A few points to make here:

• This is a prototype. Some things may not work. Some essential functionality is missing.
• The layout algorithm is wonky. Sometimes the threaded layout looks really weird.
• The longer the conversation, the more complex and slower the visualisation.
• This only retrieves the first two hundred posts of any conversation.
• If posts have been deleted, the entire view may not work.
• Some threads just don't work.

Inspired in part by Lucy Pepper's Monkey.deck Lots more conversation about threading at adndev.

Well, for those of us in the UK. For the poor sods who find themselves living in the wilderness of ROW (Rest Of World) this is their BBC experience...

BBC With Adverts

The reasons for me seeing this are rather complex and involve VPNs and a co-located BES.

Regardless, what's this advert like? The text is small and indistinct. The purpose of the message is rather vague. There's no allure. Just a static banner. How very 1996. Well, gentle reader, as you know from previous excursions, I am prepared to click where no ordinary mortal would.

Click

www.BarCap.com

Oh - as the kids say - Em Gee. What is this?

For those of you with poor eyesight, Barclays have pointed me straight at the desktop version of their website. There is no mobile friendly site in view. Not even a link to say "On a mobile? Click here."

To compound the error - the site is JavaScript heavy.  Too heavy for the BlackBerry I use to view the site.  You remember BlackBerry? The incredibly popular handset that every successful business-person carries.  You know, the target demographic.

What To Do

• Make your advert interesting.
• Make your site mobile friendly - or at least suitable for your target demographic's handset

Is it really that hard?