diff --git a/content/post/2021/03/exploring-the-alternet.md b/content/post/2021/03/exploring-the-alternet.md new file mode 100644 index 00000000..5fae7fb7 --- /dev/null +++ b/content/post/2021/03/exploring-the-alternet.md @@ -0,0 +1,66 @@ +--- +title: Exploring the AlterNet +subtitle: The Web sucks. Long live the Web! +date: 2021-03-24 +categories: + - webdesign +--- + +Web 2.0 is a monstrosity that never should have been evolved the way it did. It is now officially impossible to develop a new web browser, and Google's most-used Chrome keeps on kicking people in the nuts by [removing privacy-focused extensions](https://www.bleepingcomputer.com/news/security/google-removes-privacy-focused-clearurls-chrome-extension/) from the Chrome Web Store - because it's "not in line with their business model". Did you know the W3C specification set is [114 million words long](https://drewdevault.com/2020/03/18/Reckless-limitless-scope.html)? That's simply insane. + +Lately, I've been implementing the [Webmention](/post/2021/03/the-indieweb-mixed-bag/) and Pingback W3C protocols in [my jamstack-augmented microservice](https://github.com/wgroeneveld/serve-my-jams), and I've come to realize that, although Webmention is the post-modernistic hailed and IndieWeb-backed successor to Pingbacks, they technically both suffer form the same problems. I honestly do _not_ see any real difference between `POST`-ing an encoded form or an XML-formatted message. The specs are full of ambiguities that leave the door wide open to (1) interpretation and (2) a proliferation of wildly diverging implementations. + +Don't get me wrong, I love JavaScript. I used to be that guy that constantly yells "check it out, `const()={wait...]`!" But the more I tried implementing something inherently _simple_, the more I realized how many different ways the same problem can be tackled in just one language. And then I used `.replaceAll()` in an older version of Node. Many programming languages evolve by borrowing ideas from each other, but really, why would JS need classes? [As Rob Pike argues](https://www.youtube.com/watch?v=rFejpH_tAHM&t=91s), keeping things simple in a language can be quite complex. I hope Go will keep it together. + +First, there was CSS. Then CSS2. Then things got complicated, and people started using Bootstrap. Next, Font Awesome. Now, the consensus is to ditch that in favor for ``. Then, flexbox. Material stuff. CSS3. Scratch that, use SASS instead! Hey, what's [Tailwind CSS](https://tailwindcss.com/)? The fact that these frameworks evolve more rapidly than I can think might be an indicator of something...[^old] + +[^old]: That I'm getting "too old for this shit"? + +According to the HTTP Archive, the average size of a webpage in kilobytes [has gone up to 2038.4](https://httparchive.org/reports/state-of-the-web#bytesTotal). Try opening up any news site, blockers on (Firefox' Enhanced Tracking Protection, uBlock Origin), and count how many things get blocked on average. It's simply _disgusting_. Some more nauseating trends: + +- Corporate blogs full of nonsensical bullshit. Come work for us! +- Like? Share? Plus? Click here! CLICK, DAMN IT! +- Cookies? No? Well then our site won't work. Sorry. +- Hey, fill in your e-mail address, we have a mailing list! No spam! Pinkie swear. +- You sure about the cookies? No? +- Cookies? Can't save, sorry, that's broken. It's a feature! +- Infinite scrolls make my head hurt. +- Your browser is not supported. Download Google Chrome here! +- Click me! `https://www.amazon.com/dp/exampleProduct/ref=sxin_0_pb?__mk_de_DE=ÅMÅŽÕÑ&keywords=tea&pd_rd_i=exampleProduct&pd_rd_r=8d39e4cd-1e4f-43db-b6e7-72e969a84aa5&pd_rd_w=1pcKM&pd_rd_wg=hYrNl&pf_rd_p=50bbfd25-5ef7-41a2-68d6-74d854b30e30&pf_rd_r=0GMWD0YYKA7XFGX55ADP&qid=1517757263&rnid=2914120011` No? Oh sorry, I meant `https://www.amazon.com/dp/exampleProduct`! Thanks for your data, though[^data]! + +[^data]: The [ClearURLs plugin](https://github.com/ClearURLs/Addon) - where I got the example URL from - can take care of this for you. But the point is that these things should not be needed! + +## Back to the 90s Web, then. + +As Max [likes to call it](https://mxb.dev/blog/the-return-of-the-90s-web/): things come around full circle. I don't see this happening very soon for the mainstream web, but yes, there has been a movement. Leaner blogs, the "host it yourself" approach, the blogroll comeback page, and even [guestbooks](https://kevq.uk/guestbook/). + +Then there's the ActivityPub protocol - an even more complicated set of agreements coded in a bunch of REST services. It gave birth to Mastodon (where I learned a lot about these efforts, thanks!), [Pixelfed](https://pixelfed.org) as a federated alternative to Instagram, and they're working on [BookWyrm](https://www.bookwyrm.social/), a social reading and reviewing platform on the same protocol that hopefully proves to be more interesting than the now ad-ridden Goodreads. + +I've joined [The 512KB Club](https://512kb.club/), averaging out at `248.4 KB` for an article. That'll teach them! We could go back in time and look at my awesome [1998 webpage](/museum/1998/) that includes vibrant `.gif` images and of course `` tags. Silly as it is, I still like that: it's simple. Yes, applets existed, but besides that, there wasn't much to it - yet. My minimalistic blog now could be considered avant-garde while I wish it was mainstream. + +A few other outstanding initiatives are taking ground, such as [the Small Web](https://ar.al/2020/08/07/what-is-the-small-web/). Even if [Google tried](https://moralvolcano.wordpress.com/2014/01/17/google-leads-a-covert-war-against-rss-anonymity-on-the-web/), RSS is still not dead, and it allows me to read what I want in the same simplified layout. And then there are [tilde.town](http://tilde.town/)-alike initiatives: shared computers one can `ssh` into and leave messages - build a community. Sadly, the community will be mostly limited to Linux geeks. Of course [Bulletin Board Systems still exist](https://bytecellar.com/bbsing/) and that's fun too. But one thing does stand out even more. + +## Revolutionize Internet Browsing + +Abandon the http protocol entirely. That is [Project Gemini's plan](https://thenewstack.io/souped-up-gopher-project-geminis-plan-to-revolutionize-internet-browsing/) to revolutionize internet browsing. A `gemini://` website-uhm, "capsule" - sorry, is a _very simple_ page that only allows plain text and basic linking. That's it. A sample source page looks like this: + +``` +# Welcome! + +That's right. Oh, inline links do not work. +But hey, that's life. + +=> https://brainbaking.com my site + +## Subsection + +Neat! +``` + +No italics/bold, no scripting (well... there's the return of the `cgi-bin` dir), and a very simple way to parse and render the page. This makes creating your own Gemini client and server almost as easy as baking bread. [There's already a lot of them](https://github.com/kr1sp1n/awesome-gemini) in many different programming languages. I honestly would have preferred a unified Markdown syntax instead of yet another derivative, but hey. Required TLS certificates for static pages is another head scratcher. + +If you're keen to check it out, there are [Gemini proxy webpages](https://proxy.vulpes.one/gemini/gemini.circumlunar.space/) on http that render a Gemini capsule. [Lagrange](https://github.com/skyjake/lagrange) is my user friendly Gemini client of choice. I've gone ahead and registered `wouter.gr` - who knows in the coming weeks I'll host a capsule myself. + +I must admit I'm very intrigued by these initiatives, but this does not fix the issue at hand. It's still a very esoteric platform that started in 2019. Http will never simply vanish - unless Google says so. Searching capabilities are still a bit shaky too. And the biggest problem is: writing on gemini means writing for virtually nobody. Drew fixed this by letting Hugo spit out a gemini-compatible `.gmi` file, stripping out unsupported markup. If you're interested, read more at `gemini://drewdevault.com/2020/09/27/Gemini-and-Hugo.gmi`. + +You'll have to figure out for yourself how to actually get there! diff --git a/themes/brainbaking-minimal/assets/js/brainbaking.js b/themes/brainbaking-minimal/assets/js/brainbaking.js index 9342c320..7e08eefd 100644 --- a/themes/brainbaking-minimal/assets/js/brainbaking.js +++ b/themes/brainbaking-minimal/assets/js/brainbaking.js @@ -28,23 +28,6 @@ document.addEventListener("DOMContentLoaded",function() { })(); new SimpleLightbox('.lbox'); - new Headroom(document.querySelector(".navbar"), { - offset: 100, - tolerance: { - up: 10, - down: 0 - }, - classes : { - initial : "headroom", - pinned : "headroom-pinned", - unpinned : "headroom-unpinned", - top : "headroom-top", - notTop : "headroom-not-top", - bottom : "headroom-bottom", - notBottom : "headroom-not-bottom", - frozen: "headroom-frozen" - } - }).init(); const meel = document.querySelector('.meel'); const enc = "kcihsf@pfowbpoywbu.qca " diff --git a/themes/brainbaking-minimal/assets/sass/_bootstrap-nav.sass b/themes/brainbaking-minimal/assets/sass/_bootstrap-nav.sass index fa6ad4fa..139b8479 100644 --- a/themes/brainbaking-minimal/assets/sass/_bootstrap-nav.sass +++ b/themes/brainbaking-minimal/assets/sass/_bootstrap-nav.sass @@ -1,14 +1,3 @@ -.headroom - will-change: transform - @include transition (transform, 0.2s, linear) - - &-pinned - transform: translateY(0%) - - &-unpinned - transform: translateY(-100%) - - .navbar-icon font-size: 125% display: inline-block !important @@ -20,7 +9,7 @@ nav width: 100% - position: fixed + position: absolute top: 0 background-color: rgba(243, 243, 243, 0.8) font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important diff --git a/themes/brainbaking-minimal/layouts/partials/js.html b/themes/brainbaking-minimal/layouts/partials/js.html index 6b98a406..e78b033a 100644 --- a/themes/brainbaking-minimal/layouts/partials/js.html +++ b/themes/brainbaking-minimal/layouts/partials/js.html @@ -1,4 +1,3 @@ - {{- $mainScriptPath := "js/brainbaking.js" }} {{- $scripts := resources.Get $mainScriptPath | resources.ExecuteAsTemplate $mainScriptPath . | babel | resources.Minify | resources.Fingerprint "sha512" }} diff --git a/themes/brainbaking-minimal/static/js/headroom.min.js b/themes/brainbaking-minimal/static/js/headroom.min.js deleted file mode 100644 index 433069fd..00000000 --- a/themes/brainbaking-minimal/static/js/headroom.min.js +++ /dev/null @@ -1,7 +0,0 @@ -/*! - * headroom.js v0.11.0 - Give your page some headroom. Hide your header until you need it - * Copyright (c) 2020 Nick Williams - http://wicky.nillia.ms/headroom.js - * License: MIT - */ - -!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).Headroom=n()}(this,function(){"use strict";function t(){return"undefined"!=typeof window}function d(t){return function(t){return t&&t.document&&function(t){return 9===t.nodeType}(t.document)}(t)?function(t){var n=t.document,o=n.body,s=n.documentElement;return{scrollHeight:function(){return Math.max(o.scrollHeight,s.scrollHeight,o.offsetHeight,s.offsetHeight,o.clientHeight,s.clientHeight)},height:function(){return t.innerHeight||s.clientHeight||o.clientHeight},scrollY:function(){return void 0!==t.pageYOffset?t.pageYOffset:(s||o.parentNode||o).scrollTop}}}(t):function(t){return{scrollHeight:function(){return Math.max(t.scrollHeight,t.offsetHeight,t.clientHeight)},height:function(){return Math.max(t.offsetHeight,t.clientHeight)},scrollY:function(){return t.scrollTop}}}(t)}function n(t,s,e){var n,o=function(){var n=!1;try{var t={get passive(){n=!0}};window.addEventListener("test",t,t),window.removeEventListener("test",t,t)}catch(t){n=!1}return n}(),i=!1,r=d(t),l=r.scrollY(),a={};function c(){var t=Math.round(r.scrollY()),n=r.height(),o=r.scrollHeight();a.scrollY=t,a.lastScrollY=l,a.direction=ls.tolerance[a.direction],e(a),l=t,i=!1}function h(){i||(i=!0,n=requestAnimationFrame(c))}var u=!!o&&{passive:!0,capture:!1};return t.addEventListener("scroll",h,u),c(),{destroy:function(){cancelAnimationFrame(n),t.removeEventListener("scroll",h,u)}}}function o(t,n){n=n||{},Object.assign(this,o.options,n),this.classes=Object.assign({},o.options.classes,n.classes),this.elem=t,this.tolerance=function(t){return t===Object(t)?t:{down:t,up:t}}(this.tolerance),this.initialised=!1,this.frozen=!1}return o.prototype={constructor:o,init:function(){return o.cutsTheMustard&&!this.initialised&&(this.addClass("initial"),this.initialised=!0,setTimeout(function(t){t.scrollTracker=n(t.scroller,{offset:t.offset,tolerance:t.tolerance},t.update.bind(t))},100,this)),this},destroy:function(){this.initialised=!1,Object.keys(this.classes).forEach(this.removeClass,this),this.scrollTracker.destroy()},unpin:function(){!this.hasClass("pinned")&&this.hasClass("unpinned")||(this.addClass("unpinned"),this.removeClass("pinned"),this.onUnpin&&this.onUnpin.call(this))},pin:function(){this.hasClass("unpinned")&&(this.addClass("pinned"),this.removeClass("unpinned"),this.onPin&&this.onPin.call(this))},freeze:function(){this.frozen=!0,this.addClass("frozen")},unfreeze:function(){this.frozen=!1,this.removeClass("frozen")},top:function(){this.hasClass("top")||(this.addClass("top"),this.removeClass("notTop"),this.onTop&&this.onTop.call(this))},notTop:function(){this.hasClass("notTop")||(this.addClass("notTop"),this.removeClass("top"),this.onNotTop&&this.onNotTop.call(this))},bottom:function(){this.hasClass("bottom")||(this.addClass("bottom"),this.removeClass("notBottom"),this.onBottom&&this.onBottom.call(this))},notBottom:function(){this.hasClass("notBottom")||(this.addClass("notBottom"),this.removeClass("bottom"),this.onNotBottom&&this.onNotBottom.call(this))},shouldUnpin:function(t){return"down"===t.direction&&!t.top&&t.toleranceExceeded},shouldPin:function(t){return"up"===t.direction&&t.toleranceExceeded||t.top},addClass:function(t){this.elem.classList.add.apply(this.elem.classList,this.classes[t].split(" "))},removeClass:function(t){this.elem.classList.remove.apply(this.elem.classList,this.classes[t].split(" "))},hasClass:function(t){return this.classes[t].split(" ").every(function(t){return this.classList.contains(t)},this.elem)},update:function(t){t.isOutOfBounds||!0!==this.frozen&&(t.top?this.top():this.notTop(),t.bottom?this.bottom():this.notBottom(),this.shouldUnpin(t)?this.unpin():this.shouldPin(t)&&this.pin())}},o.options={tolerance:{up:0,down:0},offset:0,scroller:t()?window:null,classes:{frozen:"headroom--frozen",pinned:"headroom--pinned",unpinned:"headroom--unpinned",top:"headroom--top",notTop:"headroom--not-top",bottom:"headroom--bottom",notBottom:"headroom--not-bottom",initial:"headroom"}},o.cutsTheMustard=!!(t()&&function(){}.bind&&"classList"in document.documentElement&&Object.assign&&Object.keys&&requestAnimationFrame),o}); \ No newline at end of file