diff --git a/README.md b/README.md index 46c069b7..f9188be4 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,11 @@ Brainbaking.com hugo site. +### TODO + +- Set Cache-Control on woff2 https://web.dev/uses-long-cache-ttl/ +- Check gzip compression of js/css files + +### Screenshot png - jpg conversion + +1. find . -name "*.png" -exec convert {} -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB {}.jpg \; +2. find ./ -name "*.png.jpg" -exec sh -c 'mv $0 `basename "$0" .png.jpg`.jpg' '{}' \; \ No newline at end of file diff --git a/config.toml b/config.toml index 88d13798..d31d8691 100644 --- a/config.toml +++ b/config.toml @@ -23,7 +23,7 @@ enableGitInfo = true accent = "#008862" accent2 = "#008fb3" showBorder = true - copyright = "No © and no tracking - sharing is caring. Brain Baking. RSS Feed." + copyright = "No © and no tracking - sharing is caring. Brain Baking. RSS Feed." [Author] name = "Wouter Groeneveld" @@ -51,31 +51,31 @@ enableGitInfo = true [[menu.main]] name = "Tech Blog" - pre = " " + pre = " " url = "/post" weight = 1 [[menu.main]] name = "Essays" - pre = " " + pre = " " url = "/essays" weight = 2 [[menu.main]] name = "Tags" - pre = " " + pre = " " url = "/tags" weight = 3 [[menu.mainright]] name = "About Me" - pre = " " + pre = " " url = "/about" weight = 4 [[menu.mainright]] name = "Teaching" - pre = " " + pre = " " url = "/teaching" weight = 5 diff --git a/content/post/2020/06/tracking-and-privacy-on-websites.md b/content/post/2020/06/tracking-and-privacy-on-websites.md index 957371e9..34c18c63 100644 --- a/content/post/2020/06/tracking-and-privacy-on-websites.md +++ b/content/post/2020/06/tracking-and-privacy-on-websites.md @@ -11,19 +11,19 @@ Thanks to another great "internet stumble", I came across [Laura Kalbag's blog]( Take a look at HLN.be, "Het Laatste Nieuws", a Belgian newspaper website. Opera informs me the SSL certificate is valid: -![Cookies on the HLN site](../cookies-hln.png) +![Cookies on the HLN site](../cookies-hln.jpg) Wait, what? **75 cookies in use**? Did I give my consent for every single one of those? You bet I did not! Luckily, I browse with "protection on" these days, and my protection of choice is not an Adblocker plugin using Google Chrome but Opera's built-in security systems. Pay special attention to the console errors in the above screenshot: `net::ERR_BLOCKED_BY_ADBLOCKER`. I do not want to know what happens when I turn it off. Where do these nasty things come from? Who's keeping an eye on me and should I be tracking the trackers? Good question. Here's another screenshot of the _Sources_ tab, to get an idea of where all the data (and thus, trackers) are coming from at hln.be: -![Resources and servers used by the HLN website](../servers-hln.png) +![Resources and servers used by the HLN website](../servers-hln.jpg) These servers are serving data when my adblocking system is turned _off_. `tentacles.smartocto.com`? A quick look at that webites says things like "make every story count" and "translate strategy into actionable notifications". Smells like they're shipping off tracking data to one of those analytics companies that feed on the information of others. Let's try another more authorative news website in Belgium, vrt.be/nws. This time, I let Opera inform me on what was blocked and what was not. It blocks both ads and trackers (image pixels, javascript). -![Opera tracker report of vrt.be](../blocks-vrt.png) +![Opera tracker report of vrt.be](../blocks-vrt.jpg) It still contains 12 blocked trackers. Most of those are downright advertisers, but others are more subtle. The most common one is of course _Google Analytics_. @@ -44,7 +44,7 @@ It is unavoidable that these endpoints can get access to your visitor's _referer I threw out Bootstrap, jQuery, and Font Awesome, and refactored my Hugo theme to utilize [Sass](/post/2020/05/hugo-extended) (reducing the mean load of an uncached page with more than `200kb`!). Next, I threw out Google Analytics in favor for [Fathom](https://usefathom.com), another small and privacy-focused self-hosted go container (netting me another `40kb`). Then, I hosted all third-party libraries I used myself. So rest assured, Google does not know you were here! This is how the Fathom dashboard looks like: -![](../fathom.png "The Fathom dashboard") +![](../fathom.jpg "The Fathom dashboard") The commenting system I self-host is Commento, a fast, privacy-focused commenting platform. It does come with cookies if you decide to login, but then again: it’s on my own SSL-verified domain. Disqus, the popular and standard static website commenting system, has been known before to be [coming with hidden costs](https://replyable.com/2017/03/disqus-is-your-data-worth-trading-for-convenience/). @@ -64,7 +64,7 @@ For Facebook integraion on my other website [Red Zuurdesem](https://redzuurdesem For the "classic" Facebook widget - well, I cheated... by taking a screenshot: -![the Facebook Widget](../fbwidget.png) +![the Facebook Widget](../fbwidget.jpg) Sometimes, the simplest solutions are the best. I bet nobody notices it's static content. I might even go out on a limb here and retake the screenshot once in a while. This gives me the freedom of throwing out the ugly Facebook JS API and token system that has to be renewed every few months (and comes with tons of "free" cookies!). Good riddance. diff --git a/static/post/2020/06/blocks-vrt.jpg b/static/post/2020/06/blocks-vrt.jpg new file mode 100644 index 00000000..af3d7913 Binary files /dev/null and b/static/post/2020/06/blocks-vrt.jpg differ diff --git a/static/post/2020/06/blocks-vrt.png b/static/post/2020/06/blocks-vrt.png deleted file mode 100644 index 9d1002df..00000000 Binary files a/static/post/2020/06/blocks-vrt.png and /dev/null differ diff --git a/static/post/2020/06/cookies-hln.jpg b/static/post/2020/06/cookies-hln.jpg new file mode 100644 index 00000000..ec31179c Binary files /dev/null and b/static/post/2020/06/cookies-hln.jpg differ diff --git a/static/post/2020/06/cookies-hln.png b/static/post/2020/06/cookies-hln.png deleted file mode 100644 index 3e074b41..00000000 Binary files a/static/post/2020/06/cookies-hln.png and /dev/null differ diff --git a/static/post/2020/06/fathom.jpg b/static/post/2020/06/fathom.jpg new file mode 100644 index 00000000..8c52aea1 Binary files /dev/null and b/static/post/2020/06/fathom.jpg differ diff --git a/static/post/2020/06/fathom.png b/static/post/2020/06/fathom.png deleted file mode 100644 index fcaf2e31..00000000 Binary files a/static/post/2020/06/fathom.png and /dev/null differ diff --git a/static/post/2020/06/fbwidget.jpg b/static/post/2020/06/fbwidget.jpg new file mode 100644 index 00000000..ac616702 Binary files /dev/null and b/static/post/2020/06/fbwidget.jpg differ diff --git a/static/post/2020/06/fbwidget.png b/static/post/2020/06/fbwidget.png deleted file mode 100644 index f510a048..00000000 Binary files a/static/post/2020/06/fbwidget.png and /dev/null differ diff --git a/static/post/2020/06/servers-hln.jpg b/static/post/2020/06/servers-hln.jpg new file mode 100644 index 00000000..c2ea2562 Binary files /dev/null and b/static/post/2020/06/servers-hln.jpg differ diff --git a/static/post/2020/06/servers-hln.png b/static/post/2020/06/servers-hln.png deleted file mode 100644 index 32f0f9b1..00000000 Binary files a/static/post/2020/06/servers-hln.png and /dev/null differ diff --git a/themes/brainbaking-minimal/assets/js/brainbaking.js b/themes/brainbaking-minimal/assets/js/brainbaking.js index a6fa387e..951dd187 100644 --- a/themes/brainbaking-minimal/assets/js/brainbaking.js +++ b/themes/brainbaking-minimal/assets/js/brainbaking.js @@ -13,11 +13,10 @@ document.addEventListener("DOMContentLoaded",function() { navbar.setAttribute('class', 'navbar-collapse collapsing'); } - document.querySelector('main').addEventListener('click', function() { - navCollapse(); - }) + document.querySelector('header').addEventListener('click', navCollapse) + document.querySelector('main').addEventListener('click', navCollapse) - document.querySelector('nav').addEventListener('click', function() { + document.querySelector('nav').addEventListener('click', () => { if(window.getComputedStyle(navtoggle)['display'] === 'none') return; if(navbar.getAttribute('class').indexOf('collapsing') >= 0) { navCollapse(); diff --git a/themes/brainbaking-minimal/assets/sass/_bootstrap-minimal.sass b/themes/brainbaking-minimal/assets/sass/_bootstrap-minimal.sass index 0344185c..0bd2b92e 100644 --- a/themes/brainbaking-minimal/assets/sass/_bootstrap-minimal.sass +++ b/themes/brainbaking-minimal/assets/sass/_bootstrap-minimal.sass @@ -25,6 +25,8 @@ h1, h2, h3, h4, h5, h6 line-height: 1.8 font-weight: 700 +.hidden + display: none pre overflow: auto diff --git a/themes/brainbaking-minimal/assets/sass/_fonts.sass b/themes/brainbaking-minimal/assets/sass/_fonts.sass index a094fc1e..604ec7b5 100644 --- a/themes/brainbaking-minimal/assets/sass/_fonts.sass +++ b/themes/brainbaking-minimal/assets/sass/_fonts.sass @@ -12,6 +12,7 @@ $font-alt-stack: 'Metropolis', sans-serif font-family: 'Source Serif Pro' font-style: normal font-weight: 400 + font-display: swap src: local('Source Serif Pro'), local('SourceSerifPro-Regular'), url(/css/sourceserifpro-latin-ext.woff2) format('woff2') unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF @@ -20,6 +21,7 @@ $font-alt-stack: 'Metropolis', sans-serif font-family: 'Source Serif Pro' font-style: normal font-weight: 400 + font-display: swap src: local('Source Serif Pro'), local('SourceSerifPro-Regular'), url(/css/sourceserifpro-latin.woff2) format('woff2') unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD @@ -46,4 +48,5 @@ $font-alt-stack: 'Metropolis', sans-serif font-family: 'Metropolis' font-style: normal font-weight: 300 + font-display: swap src: local('Metropolis Light'), local('Metropolis-Light'), url('/css/Metropolis-Light.woff2') format('woff2') diff --git a/themes/brainbaking-minimal/layouts/_default/list.html b/themes/brainbaking-minimal/layouts/_default/list.html index 9880e05e..ff78f0ac 100644 --- a/themes/brainbaking-minimal/layouts/_default/list.html +++ b/themes/brainbaking-minimal/layouts/_default/list.html @@ -58,7 +58,7 @@ {{ template "_internal/pagination.html" . }} diff --git a/themes/brainbaking-minimal/layouts/_default/single.html b/themes/brainbaking-minimal/layouts/_default/single.html index 1dd1dee9..032bdee3 100644 --- a/themes/brainbaking-minimal/layouts/_default/single.html +++ b/themes/brainbaking-minimal/layouts/_default/single.html @@ -12,7 +12,7 @@ {{ $altContent := .Content | replaceRE $reAltIn $reAltOut | safeHTML }} {{ $reAltTitleIn := "

\"([^\"]*)\"

" }} - {{ $reAltTitleOut := "
\"$3\"
$3
" }} + {{ $reAltTitleOut := "
\"$3\"
$3
" }} {{ $finalContent := $altContent | replaceRE $reAltTitleIn $reAltTitleOut | safeHTML }} {{ $finalContent }} @@ -22,7 +22,7 @@ {{ partial "single-comments" . }} diff --git a/themes/brainbaking-minimal/layouts/partials/header.html b/themes/brainbaking-minimal/layouts/partials/header.html index 8af19e63..f76f0f2b 100644 --- a/themes/brainbaking-minimal/layouts/partials/header.html +++ b/themes/brainbaking-minimal/layouts/partials/header.html @@ -22,7 +22,8 @@ {{ .Title }} -