Reducing Javascript on petermolnar.eu

Why? JS is cool, ya' know. It's what the cool kids do.

A long time ago a phrase emerged in some web development circles: the semantic and accessible web. This included a theory that in every single case you should first do a working page in HTML only. No CSS, no Javascript, to make sure that everyone - including screen readers - can access the site correctly. Including everything, so comments, forms, everything. Yes, it was, and still is, possible, but it won't be fancy.

As the years passed, everything got 'smarter'; and while Google can now index most of the JavaScript content¹, JS got a little overused, even for things like in-browser templating². This, in my opinion, should not happen, as I share the opinion of @tantek: js;dr³.

Update then I got rid of the animated menu completely; it's pure HTML and responsive CSS now. I'm only leaving the reference to the advanced checkbox hack from Tim Pietrusky⁴ now, because it's still brilliant.

Replaced: limiting image width & height

Since I have photos on the site, I prefer relatively nice quality for them. The problem is that these are usually larger than the viewport, so there has to be a limitation to fit the window.

Original: JavaScript

window.addEventListener('load', function() {
    var vh = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)

    var adaptimg = document.getElementsByClassName('adaptimg');
    [].forEach.call(adaptimg, function (el) {
        //var w = el.offsetWidth;
        var h = el.offsetHeight;

        if ( h > vh ) {
            el.style.height = vh + 'px';
            el.style.width = 'auto';
        }
    });
});

Replacement: native CSS

There are some interesting CSS units which can now be considered supported: vw, vh, vmin, vmax⁵.

.adaptimg {
  position: relative;
  display: block;
  max-height: 100vh;
  max-width: 98%;
  width: auto;
  height: auto;
  margin: 0.6em auto 0.6em auto;
  padding: 0;
}

The special cases are here to stay

~~Sadly, srcset⁶ is not supported by many, so Picturefill⁷ is here to stay for now.~~ I've added a larger default image and got rid of Picturefill. The older machines, which would not run new enough browsers to support srcset simple won't have large enough resolution for this to be an issue - with the exception of the holy grail of the ThinkPads, the ThinkPad R50p⁸

~~Syntax highlighting is a tricky thing, and so far, for my greatest surprise, the best, most lightweight and fastest one I've found is a JS implementation, called prism JS⁹.~~

I've switched to Pandoc¹⁰ to generate HTML from Markdown from the previous Parsedown¹¹. While Parsedown is 1-2 magnitude faster, Pandoc can generate anything from Markdown, and it has built-in syntax highlighting.

The third thing to stay is the JS for WP-Slimstat¹², because I'm curious on who visits my site, and the server logs don't give me enough information.

Thankfully, these are all loaded from my own domain. I'm avoiding including JS from 3rd party, even if it's coming from Google, for two main reasons:

they are a security risk¹³
some parts of the world my have the origin block - like China vs Google -, thus you're crippling your own site for a few billion potential visitors

Also, stick to vanilla JS¹⁴. You don't need jQuery anymore¹⁵ - or at least you might not need jQuery anymore¹⁶.