TorontoJS May 2025 Talk

Welcome to the repository for my TorontoJS May 2025 talk! Here you'll find resources and projects related to the presentation.

SVGs didn't listen...Until I spoke JavaScript

For context, here is the video:

---

I'm not sure how many projects related to the talk I will share in this repo but here are some:

Presentation App

This section details the custom presentation application built for the talk.

Context:

Initially I was making the presentation using Figma only to discover that if you need to use video files you have to purchase the pro plan. Since this would have been likely the only time that I would use video in Figma I decided to vibe a code a different solutions.

First I converted the existing videos into 1920x1080 slides using the command below:

ffmpeg -i input.mp4 \\
  -vf "scale=w=1920:h=1080:force_original_aspect_ratio=decrease,\\
       pad=1920:1080:(ow-iw)/2:(oh-ih)/2:color=#27272A" \\
  -c:a copy output.mp4

---

How do I start it?

On the root folder of torontojs-may2025 project, make sure you have the packages installed using:

pnpm i

Then you can enter

pnpm run start:presentation

to serve the files.

Follow the instructions opening the provided URL in your browser. (possibly localhost:3000)

How does it work?

While opening the browser you might have a surprise pop up in your computer. Well that's not by accident. That is actually showing my notes in the ./presentation-app/notes.txt file. (I haven't changed anything there so you can see what my actual notes were 😅).

You can navigate the slides using h key and l key implying vim bindings.

---

More projects and resources related to this talk may be added here in the future. Stay tuned!