I think one of the worst hit by the LLM mania is Stack Overflow. Not only has its content been essentially stolen and regurgitated by ChatGPT in an, admittedly, convenient and easy-to-understand package, but LLMs have made it easier than ever before to give yourself credability via a bot network of reasonable sounding answers that get reasonable sounding praise.

So I'd like to just highlight one of my favorites posts. No fat to be trimmed, just a simple, honest answer to a simple, earnest question.

Question

How can I display a child process's output in real time with Ruby?

Answer

IO.popen("s3sync.rb …").each do |line|
  print line
end

Beautiful. Source

I'm sure fjall-rs isn't the first tech blog to implement a dynamic reading progress bar, but it's the first the caught my eye. Implementing it was trivially easy, though there are some browser pitfalls to be aware of. Here it is, in full:

// Animate the progress bar
let progressBar = document.querySelector(".progress-bar");
if (progressBar) {
 let html = document.querySelector("html");
 let header = document.querySelector("header");
 const updateProgressBar = () => {
  // This is the only way I found to deal with the mobile address bar
  let effectiveScrollHeight = html.scrollHeight - window.innerHeight;
  // Only enable this when the post is big enough
  if (effectiveScrollHeight > 200) {
   let newHeight = Math.round(
    100 * (html.scrollTop / effectiveScrollHeight)
   );
   progressBar.style.width = `${newHeight}%`;
  } else {
   progressBar.style.width = "0";
  }
 };

 document.addEventListener("scroll", () => {
  updateProgressBar();
 });
 // Scroll events don't always fire when the window resizes
 document.addEventListener("resize", () => {
  updateProgressBar();
 });
}

.progress-bar {
  position: fixed;
  left: 0;
  top: 0;
  height: 3px;
  background: #5ca3ff;
  /* so you can click through */
  pointer-events: none;
  /* raise above everything else */
  z-index: 100;
  /* make the transition nice and smooth */
  transition: width 1s ease-in-out;
}

And I think the result is quite pleasing:

I just added in the ability to render videos in my blog, and in so doing came across a question I hadn't considered before: how do I reserve space for a video that loads after the page does? Also, are videos loaded after page load, or what's the deal there?

Turns out: yes! You can reserve space for a video. In my case, I want my video to take up 100% of the available width and let the height work itself out. So do that I used the aspect-ratio property and calculate on in my template with the video's width and height. The result is what you see below, and here's the zola shortcode I made:

{%- set path = page.path ~ path -%}
{%- set aspect_ratio = width / height -%}
<video loop autoplay muted
  {%if title%}title="{{ title }}"{%endif%}
  style="aspect-ratio: {{aspect_ratio}}"
>
  <source src="{{ path }}" type="video/mp4">
</video>

Which I can embed in my markdown documents like so:

video(title="Progress bar", path="assets/demo.mp4", width=786, height=200)

A tad manual, but it avoids big page reflows, so I don't mind.