exploring the alternet. get rid of headroom
This commit is contained in:
parent
567c83154c
commit
6ec9736568
|
|
@ -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 `<svg/>`. 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 `<marquee/>` 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!
|
||||
|
|
@ -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 = "<o ofwo-zopsz='aowz orrfsgg' vfst='aowzhc:kcihsf@pfowbpoywbu.qca'>kcihsf@pfowbpoywbu.qca</o> <o ofwo-zopsz='sbqfmdhwcb DUD ysm' vfst='vhhdg://ysmg.cdsbdud.cfu/jyg/j1/pm-twbusfdfwbh/24O319TO8708OP6961997205S66Q99941091O46R' hwhzs='Sbqfmdh aowzg kwhv am UDU ysm'><gju qzogg='wqcb wqcb-hslh' kwrhv='24' vswuvh='24'><igs lzwby:vfst='#zcqy'></igs></gju></o>"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
<script defer src='/js/headroom.min.js'></script>
|
||||
<script defer src='/js/simple-lightbox.min.js'></script>
|
||||
{{- $mainScriptPath := "js/brainbaking.js" }}
|
||||
{{- $scripts := resources.Get $mainScriptPath | resources.ExecuteAsTemplate $mainScriptPath . | babel | resources.Minify | resources.Fingerprint "sha512" }}
|
||||
|
|
|
|||
|
|
@ -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=l<t?"down":"up",a.distance=Math.abs(t-l),a.isOutOfBounds=t<0||o<t+n,a.top=t<=s.offset,a.bottom=o<=t+n,a.toleranceExceeded=a.distance>s.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});
|
||||
Loading…
Reference in New Issue