Present with Hand-Drawn Style Animations Using Excalidraw Animate + HTML

pirothat — Wed, 13 Aug 2025 05:26:37 +0000

Excalidraw

It turns out you can even animate your drawings:
https://dai-shi.github.io/excalidraw-animate/

I came across this while looking for alternatives to draw.io for creating AWS architecture diagrams.

The catch? You can’t export as GIF, which means you can’t directly attach it to Google Slides.

While researching workarounds, I found a bunch of open-source tools like Reveal.js.
But for something this simple, I figured I could just build my own in HTML — so I did, with a quick “vibe coding” session.

I’m planning to use it for informal or lightweight presentations.

Here’s the code

<!doctype html>
<meta charset="utf-8">
<title>Excalidraw Animate – 20 Slides with Replay & Counter</title>
<style>
  html,body{margin:0;height:100%;background:#fff;font-family:sans-serif}
  .slide{position:fixed;inset:0;display:none;justify-content:center;align-items:center}
  .slide.active{display:flex}
  object{max-width:90vw;max-height:90vh}

  /* ─ Replay button (bottom-left) ─ */
  .replay-btn{
    position:absolute;bottom:14px;left:14px;
    border:0;background:none;cursor:pointer;user-select:none;
    font-size:22px;line-height:1;color:#555;
    opacity:0.15;transition:opacity .2s,transform .2s;
  }
  .slide:hover .replay-btn,.replay-btn:hover{
    opacity:0.85;transform:scale(1.15);
  }

  /* ─ Counter (bottom-right) ─ */
  #counter{
    position:fixed;bottom:16px;right:16px;
    font-size:14px;color:#666;
    opacity:0.4;transition:opacity .2s;
    user-select:none;
  }
  #counter:hover{opacity:0.8}
</style>

<div id="deck"></div>
<div id="counter"></div>

<script>
(() => {
  /* ===== Config ===== */
  const NUM_SLIDES = 20;
  const FILE_PREFIX = 'frame';   // frame01.svg, frame02.svg …
  const PAD_LENGTH  = 2;         // 01, 02 …

  /* ===== Create slides ===== */
  const deck = document.getElementById('deck');
  for (let i = 1; i <= NUM_SLIDES; i++) {
    const slide = document.createElement('div');
    slide.className = 'slide' + (i === 1 ? ' active' : '');

    const obj = document.createElement('object');
    obj.type = 'image/svg+xml';
    obj.data = `${FILE_PREFIX}${String(i).padStart(PAD_LENGTH,'0')}.svg`;
    slide.appendChild(obj);

    const btn = document.createElement('button');
    btn.className = 'replay-btn';
    btn.textContent = '↺';
    btn.onclick = () => { obj.data = obj.data; };
    slide.appendChild(btn);

    deck.appendChild(slide);
  }

  /* ===== Navigation & counter ===== */
  const slides  = [...document.querySelectorAll('.slide')];
  const counter = document.getElementById('counter');
  let idx = 0;
  const updateCounter = () => { counter.textContent = `${idx+1} / ${slides.length}`; };
  updateCounter();

  const show = n => {
    slides[idx].classList.remove('active');
    idx = (n + slides.length) % slides.length;
    slides[idx].classList.add('active');
    updateCounter();
  };

  document.addEventListener('keydown', e => {
    if (['ArrowRight','L',';'].includes(e.key)) show(idx + 1);
    if (['ArrowLeft' ,'H',','].includes(e.key)) show(idx - 1);
  });
})();
</script>

How to use

Steps

Create animated SVG files with Excalidraw Animate (name them frame01.svg to frame20.svg).
Paste the HTML code above into an index.html file.
Put your SVG files in the same folder as index.html.
Open index.html in your browser and go fullscreen.

Navigation

← / → keys to move between slides

Bottom-left ↺ button to replay the current slide

Bottom-right counter shows “current / total” at all times

Note

I used this setup for our internal presentation day at the end of June — it worked great!

The "New-Car Effect" of AWS Certifications: Your First Rep to Mastery

pirothat — Wed, 14 May 2025 10:38:11 +0000

The badge isn’t the point—practice is.

Over the past three years I earned every AWS certification.

My certification triathlon study loop was simple:

Watch one AWS Black Belt video on the target domain
Drill through domain-specific question sets
Review every miss (and every hit) the next morning

That tight loop carried me across the finish line for every exam.

Do You Really Need a Certification Triathlon?

I think the answer is yes—at least for your first rep.

"The New-Car Effect"

Buy a car, and suddenly you see the same model everywhere.
I refer to this phenomenon as "the New-Car Effect".

Certifications work the same way: once my head was packed with VPC quirks and Lambda limits, blog posts, conference talks, and even hallway chats lit up with “Hey, I know this!” moments.

That learning tuned my attention, and it wasn’t limited to AWS services; even general foundational computer-science concepts started jumping out at me.

“Use It Three Times and It’s Yours”

A skill sticks after three meaningful reps, even if the first one happens on paper.

Since AWS exams don’t include a hands-on lab, Rep #1 takes place in the multiple-choice arena: you architect in your head, choose an answer, and a wrong pick costs nothing but a red X.

Badge in hand, I volunteered for two bite-sized projects—Rep #2 and Rep #3—where whiteboard sketches became CloudFormation stacks and IAM policies. That’s when theory clicked into muscle memory.

Takeaway

Certs don’t replace experience; they accelerate it.

The exam delivers a low-risk Rep #1, and the New-Car Effect immediately tunes your radar—you start noticing tickets, hallway questions, and side projects that echo the blueprint you just drilled. Grab those chances: Rep #2 and Rep #3 will show up almost automatically, and the badge will turn into working muscle faster than any other route.

DEV Community: pirothat