I wrote JavaScript to avoid JavaScript (opens in new tab)

I strongly advise against this style of justification:

  text-align: justify;
  text-justify: inter-character;

Justification is typically only particularly suitable for fairly narrow columns, combined with hyphenation. And inter-character justification is… hazardous, only to be entered into with substantial caution.

Sometimes layouts and what occurs to the inline-end [right] of the layout can also justify justification

But unless one of these conditions is true, I recommend against any form of justification, especially inter-character.

Another bit of CSS that I would like removed is the `html { cursor: default; }`. Apps can do that so that chrome uses the default cursor (and restore it to auto in content areas), but content websites shouldn’t do that. I want to see the usual I-beam when I’m hovering over text.

I do a lot of JavaScript, maintaining older and newer apps. I have been of the opinion for a decade that most apps and even static sites are way more JavaScript-heavy than they need to be and that we depend far too much on frameworks, so much so that even very good developers don’t know much actual HTML and CSS. Yeah I know it’s the old “too much abstraction” argument, but I strongly believe it. It’s a breath of fresh air when people write articles like this because it brings us down to earth. Now, I’m not saying going JS-free is appropriate for all cases or even most cases. Sometimes the customer has complex requirements or the project you’re brought in on uses JS at its core (Rails, React, Angular, any of the SPA frameworks). Heck, I’ve even written my own SPA framework because reasons. Point is, there is absolutely nothing wrong with the “old fashioned” static page apps in many cases - using forms, letting the back-end handle business logic, not having to worry about routing, etc.

Wonderful! I am so irritated with JavaScript bloat... completely unnecessary cruft 99% of the time.

I built my blog with the goal to have zero js but I had to capitulate for google analytics.

The blog is a static website deployed on a CDN and I have no access to access.log - I honestly couldn’t find any analytics solution that won’t require js.

I did almost the same last weekend. I wanted to start a blog[1] but all options seemed too much for a simple purpose that is a blog. After researching about VuePress, Sapper, Next.js, Gatsby and so on, I finally decided that it wouldn't have any kind of JavaScript. I was tempted to create yet another static site generator, but I am sticking to the old HTML + CSS duo (and, regarding CSS, classless CSS) for my blog. Yes, it has some downsides, but hey, it only needs a text editor and internet connection and the blog is blazingly fast.

[1] https://boix.dev/

> The only annoying part is still that the image dimensions are not reserved appropriately, even with present width and height attributes. So the layout can jump around if you scroll past the not yet loaded image. If you have an idea how to deal with that within picture groups, I love to hear about it.

See https://www.andyshora.com/css-image-container-padding-hack.h...

I used the trick on https://jessicakhope.com's blog-post pages. View the source on https://jessicakhope.com/blog/family-workcation-in-portland-..., for examples.

The site is static and is generated by hugo. The image container paddings are generated at compile time.

Someone must have gotten the a hold of the credentials of the device, where I put my brain dumps and made it into a blog post.

I wish more people did approach web development in this kind of minimalist most accessible and responsive way, that does not require me to trust all their scripts and simply lets me access a hypertext document to get the information I seek.

As a counterpoint, I just want to mention that I once wrote perl that wrote Javascript that wrote HTML.

And I'm not even ashamed of it.

So whenever I see an article about this topic I like to open the Network tab of Developer Tools, disable cache and refresh to see how this work out in practice.

This page loaded in just under a second, and had 1.30MB of data in total. Pretty good!

However, when looking at where all the data is there seems to be something fishy going on. Basically, for some reason it loaded both a .webp and .webm file for the sticky header animation. The webp is a 450 KiB choppy animation, the webm a 770 KiB smooth one. If we skipped the webp that would be a 33% reduction in data and presumably equivalent speed-up of page load, so why bother loading a choppy gif?

Looking into the page source I get this tag:

    <video autoplay="" loop="" muted="" playsinline="" poster="https://markentier.tech/posts/2020/10/wrote-javascript-to-avoid-javascript/pos-sticky.webp">
    <source src="https://markentier.tech/posts/2020/10/wrote-javascript-to-avoid-javascript/pos-sticky.hvec.mp4" type="video/mp4; codecs=hvc1">
    <source src="https://markentier.tech/posts/2020/10/wrote-javascript-to-avoid-javascript/pos-sticky.hvec.mp4" type="video/mp4; codecs=hevc">
    <source src="https://markentier.tech/posts/2020/10/wrote-javascript-to-avoid-javascript/pos-sticky.h264.mp4" type="video/mp4; codecs=avc1">
    <source src="https://markentier.tech/posts/2020/10/wrote-javascript-to-avoid-javascript/pos-sticky.webm" type="video/webm; codecs=vp9">
    </video>

So I'm wondering if there is a point in adding a poster like that, given that it's not going to be seen for most people and probably going to be a major part of the data budget on any page that has any number of video tags on it.

(Also, my browser acts a bit funny here: if I refresh again it only downloads the webp, but still shows the webm - despite cache being disabled. Could it be that the video tag ignores my cache settings?)

On OSX Chrome, this page is always horizontally scrollable because the navbar is wider than the rest of the content by a margin of the vertical scrollbar's width. You can set max-width: 100% on the navbar to fix this.

Nice! Pagespeed Insights is also happy with your site ;) I especially liked the new format stats, pretty impressive. Now if only I found a good node module for avif conversion...

At first glance, the title is a bit misleading I think a more accurate one could have been "I don't write Javascript to avoid it" or "I just avoid to write Javascript", etc. Anyway great that the author remarks the idea to avoid Javascript bloat but honestly that's not something new.

He used the stones to destroy the stones.

I don't like the style this site uses. Ugly color choice, typography and whitespace all over the place, and emoji ridden visual noise. Like why spend all the time picking exotic fonts and optimizing images if the presentation is simply put, awful?