SVG filters allow you to create complex visual effects directly within your SVG graphics using a variety of filter primitives. You can apply effects like blurring, color manipulation, and even custom distortions to your SVG elements.

SVG Filters

<p class="ripple-text">SVG Filters</p>

<svg style="position: absolute; width: 0px; height: 0px; pointer-events: none;">
  <filter id="water-ripple">
    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.05"
      numOctaves="2"
      result="ripple"
    >
      <animate
        attributeName="baseFrequency"
        dur="10s"
        values="0.02;0.05;0.02"
        repeatCount="indefinite"
      ></animate>
    </feTurbulence>
    <feDisplacementMap
      in="SourceGraphic"
      in2="ripple"
      scale="5"
    ></feDisplacementMap>
  </filter>
</svg>

.ripple-text {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: bold;
  text-align: center;
  filter: url(#water-ripple);
}

• Originally discovered at: SVG Filters are just amazing!
• MDN SVG Filters documentation https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_filters
• SVG filters demo: https://yoksel.github.io/svg-filters/

From Chrome 145 onwards, 100vw will automatically subtract the size of the (vertical) scrollbar from it if you have forced the html element to always show a vertical scrollbar (using overflow[-y]: scroll) or if you reserve space for it (using scrollbar-gutter: stable).

— Via https://www.bram.us/2026/01/15/100vw-horizontal-overflow-no-more/

We invented AI to write pretty poems and draw cute pictures, so I have more time to take care of my laundry. It should be the other way around, right?

— Julian Hespenheide (Excerpt from an answer of an interview to Julian Hespenheide by Tim Rodenbröker)

This might sound funny at first, but technological limitation to me is anti-consumerist at best: Do companies hold back their inventions to turn more profit each cycle? How many billion people out there have the most advanced technology on them just for scrolling through Instagram and sending funny emojis on WhatsApp? Those devices are technically unlimited in every sense, yet no one takes the time to use them to any of their respective extents.

— Julian Hespenheide (Excerpt from an answer of an interview to Julian Hespenheide by Tim Rodenbröker)

<svg xmlns="http://w3.org/2000/svg" viewBox="0 0 100 100">
  <text y=".9em" font-size="90">👾</text>
</svg>

Reference:

More description SVG favicons and favicons maintain general:

• https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them
• https://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7 ← Good one 👌

The command :source % in Vim reloads the Vim configuration file (such as ~/.vimrc) into the current session, updating any changes you’ve made to it. The :source command executes the VimScript commands contained in a file, and % is a shortcut that represents the name of the file currently open in the buffer.

:source %

Since you worked so hard to get here, I’ll bet you’re expecting a large reward. Well, with all the time I’ve spent down here, I’ve come to realize a few things…That the journey is its own reward and mastery is the greatest treasure of them all!,
Well, okay, so gold is pretty nice too!
— Yang (Excerpt from the Spelunky book, Part IV titled Spelunky Transcended)

The last few months have been… intense. Work has taken most of my energy — long hours, deadlines, and that feeling of constantly trying to keep up with everything happening in tech. It’s been rewarding in its own way, but also draining. Somewhere along the way, I stopped doing one of the things that used to help me process it all: writing here.

I’ve missed that. Writing helps me keep my ideas organized, documenting experiments, and sharing the things that spark my curiosity — whether it’s a weird JavaScript quirk, a new framework, or some small tool I hacked together just for fun. Lately, though, I’ve realized I need to make space for that again.

So, I’m back. I want to use this space to explore programming and technology the way I used to — through curiosity and play. I’ve been especially drawn to creative coding and game development lately: using code not just to build useful things, but to express ideas, tell stories, and experiment visually. There’s something magical about combining logic and art, and I want to dive into that world — shaders, pixel art, procedural generation, all of it. I’m excited to share what I learn, the projects I tinker with, and the ideas that inspire me.

See you soon.

content-visiblity Without Jittery Scrollbars

/* Defer rendering for the 2nd+ article */
body > main > *+* {
  content-visibility: auto;
}

<script type="module">
  let observer = new IntersectionObserver(
    (entries, o) => {
      entries.forEach((entry) => {
        let el = entry.target;
        // Not currently in intersection area.
        if (entry.intersectionRatio == 0) {
          return;
        }
        // Trigger rendering for elements within
        // scroll area that haven't already been
        // marked.
        if (!el.markedVisible) {
          el.attributeStyleMap.set(
            "content-visibility",
            "visible"
          );
          el.markedVisible = true;
        }
      });
    },
    // Set a rendering "skirt" 50px above
    // and 100px below the main scroll area.
    { rootMargin: "50px 0px 100px 0px" }
  );

  let els =
    document.querySelectorAll("body > main > *+*");
  els.forEach((el) => { observer.observe(el); });
</script>

I found this great (and long) article on The Neuron about How AI is impacting education, at least in the USA and other developed countries WTF is going on with AI and education?, and I found this part particularly interesting. I took the liberty of copy/pasting an excerpt here for future reference, but I encourage you to read the full article:

Here is a 4-step workflow for learning a new skill with AI

This workflow shows how to apply these principles when you want to learn something new and challenging, integrating the wisdom of Make It Stick in a human-led way.

• Step 1: Engage (The Blank Page)

  • Goal: Activate your brain, and define “the struggle” (what are you trying to do?).
    • This is the most critical step, and it happens away from the AI.
    • Before you write a single prompt, you must first engage with the problem using only your own mind.
  • Do the Hard Thing First (Generation): Spend at least 20-30 minutes wrestling with the concept, problem, or skill.
    • Try to write the code. Draft the argument. Sketch the model. Fail. Get stuck.
    • This initial, unaided effort warms up the relevant neural networks and creates a “mental hook” for new information to stick to.
  • Articulate Your Ignorance: Clearly write down what you know, what you think you know, and precisely where you are stuck.
    • This act of articulation is a powerful learning tool in itself.
    • And guess what? Once this is done, this becomes your prompt.

The above tactic is a way to provide “context engineering” in practice: you are providing the AI with all of the context, all of your thinking, all of your knowns and unknowns, in order to solve the specific problem. Ideally you have everything you need right in front of you, and the AI can push you over the edge.

• Step 2: Spar (The Dialogue)

  • Goal: Use AI to get guidance, not answers.
    • Now, you bring your well-defined struggle (your prompt) to the AI.
    • You are not asking it to do the work; you are asking it to be your thinking partner.
    • You are directing the conversation based on your initial struggle.
  • Play Different Roles: Instead of just asking questions, assign the AI a role that forces a deeper level of thinking.
    • The Socratic Tutor: “Don’t give me the solution. Ask me questions that will lead me to it.”
    • The Devil’s Advocate: “Here is my argument. Vigorously challenge it and expose its weakest points.”
    • The Pattern Spotter: “I’m working on problems A, B, and C. What is the underlying principle that connects them?”

In a practical work environment, you don’t have time to do this every time; often, you just need the answer. But even if you have to run something quickly into production, still take some time to return to this process at the end of your workday and engage with the AI to learn more about how it solved the problem.

• Step 3: Synthesize (The Forge)

  • Goal: Take ownership of the knowledge.
    • This is where you turn the insights from your AI dialogue into your own durable knowledge.
      • This step is about actively making the information yours.
    • Close the Box and Reconstruct (Retrieval): After your AI session, close the tab.
      • On a blank document or piece of paper, summarize the key insights in your own words.
      • If you can’t do this from memory, you haven’t learned it.
    • Apply and Modify: Go back to your original work from Step 1 and apply what you’ve learned.
      • Don’t copy-paste. Rewrite the code, redraft the argument.
      • YOU must be the one to integrate the new knowledge.

Again, if you want to improve your skillset at work (or in school), or guide your students to do the same, this step MUST be part of the process. The physicist Richard Feynman said “What I cannot create, I do not understand.” In the same spirit, what you cannot explain, you don’t understand.

• Step 4: Architect (The System)

  • Goal: Design your own long-term learning plan.
    • You must become the architect of your own learning schedule.
    • Use the AI as a consultant to help you design this system.
  • Design Your Spacing: Ask the AI: “Based on our conversation, what are the 3-5 core concepts I should review? Help me formulate a single, challenging question for each one that I can put in my calendar to revisit in 3 days, 1 week, and 1 month from now.”
    • You then put these questions in your actual calendar. This is human-led spacing.
  • Design Your Interleaving: Ask the AI: “I am currently learning [Skill X], [Skill Y], and [Skill Z]. Help me design a mini-project for the end of the week that will force me to combine all three in a novel way.” You use the AI’s creativity to structure a practice that you will then undertake.