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.

Four years ago I bought a course called Three.js Journey by Bruno Simon, but for one reason or another I haven’t finished it yet. I’ve watched (and re-watched) a few lessons, then leave it for a while, and then come back again. I was even one of the beta testers when the course went live. I need to put a closure on this.

So in my own journey on becoming a game developer I decided to go back to this course and finish it, also want to learn how to program shaders for real, so I will be doing some shader experiments and posting them here in a way to document my progress.

I’m absolutely convinced that constraints are the most powerful driver for good ideas.
— Tim Rodenbroeker, on Efficiency vs. effectiveness: What happens when design ditches big tech?

A really good article about bringing your projects to the finish line, by Aaron Francis in The ReadME Project. Finish your projects: Don’t let fear, or that last 10%, hold you back.

The bare minimum setup for enabling your site to use native view transitions in HTML and CSS:

<meta name="view-transition" content="same-origin" />

@view-transition {
  navigation: auto;
}

Ref URL: https://www.amitmerchant.com/bare-minimum-view-transitions/

Since a long time ago I’ve wanted to start developing a game, and now that my 7 years old kid asked for a game as his next birthday I think is a good time to start. I have no problem learning a new language like Python, C# or Rust, but as a web developer I wanted to start by using my main programming language, Javascript.

So, to start learning (and to get my hands dirty), I want to replicate the game made by Drew Conley Build a Multiplayer Game with JavaScript & Firebase.

More coming soon…

Becoming a good engineer is about collecting experience. Each project, even small ones, is a chance to add new techniques and tools to your toolbox.
— Addy Osmani Becoming a good engineer is about collecting experience.

You can automatically transform input values to number and date with the valueAsNumber and valueAsDate function on inputs objects.

// This will always return NaN since valueAsNumber is not available on text inputs
<input type="text" onChange={e => console.log(e.target.valueAsNumber)} />

// Return the value as an integer or a float
// depending on the input's step attribute
<input type="number" onChange={e => console.log(e.target.valueAsNumber)} />

// Return the date as a UNIX timestamp, i.e. new Date().getTime()
<input type="date" onChange={e => console.log(e.target.valueAsNumber)} />

// Return the date as a JS Date object
<input type="date" onChange={e => console.log(e.target.valueAsDate)} />

Ref URL: https://devlog.willcodefor.beer/pages/use-valueasnumber-and-valueasdate-on-inputs/

https://developer.chrome.com/docs/css-ui/animate-to-height-auto#animate_the_details_element

@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }
    
    details {
        transition: height 0.5s ease;
        height: 2.5rem;
        
        &[open] {
            height: auto;
            overflow: clip; /* Clip off contents while animating */
        }
    }
}