Props for props: how I made a royally unusual talk for JAMstack Conf London

There were 4 lightning talks at the reception of this year's JAMstack Conf London. This is the story of how I found myself giving one of them wearing gold sunglasses with an attached crown, and directing the slides with a sceptre.

It all began when the call for the talks said they'd take place in a pub in the evening. So, I thought I'd propose something fun; technical but not too hard for the audience to follow, like a story. This is the proposal I sent over:

"Once upon a time there was a widowed king named King Markdown. Old King Markdown and his subjects preferred their content to be static, linear and mostly text. One day the king met Princess JavaScript of the Most Serene Kingdom of XML. The Princess and her people preferred their content to be colorful, dynamic, and interactive. King Markdown and Lady JavaScript fell deeply in love despite their differences. But how could the content creators of their respective kingdoms ever build JAMstack sites together? For this, a hero would be needed. More than a hero—a Prince."

You can imagine my surprise when I received this email from conference MC Phil Hawksworth:

LOL. Really? They took it seriously. Cool! Ok so...

1. This is great
2. I actually have to write this talk now
3. These are the conference day speakers 😮
4. I have 11 days

If you'd like to see how the talk turned out, check out the slides or view the code.

Keep reading to see how I designed and built the talk in the days hence, along with some lessons learned about putting together talks on short notice as a highly fallible human being.

The 4 P's

I have a framework for writing and delivering highly-organized and well-rehearsed talks without any stress. It's called The 4 P's.

• Panic
• Procrastinate
• Perspire
• Perform

If I just follow the 4 P's, everything will be fine.

🤮🤮🤮🤮

Panic

If panic sounds like a bad thing, that's because it is. But panic is also one place creative ideas come from. Once I start to panic about giving a talk, my brain is forced to come up with crazy ways to make it happen, without caring (yet) if they will actually work.

Often, that creative energy takes me to interesting places, both mentally and physically. For instance, there is a costume store called Circus in between my yoga studio and my office, which I walked by the day after I got Phil's email. As soon as I walked in, lo and behold I saw these matching sunglasses and sceptre.

YES. YES! I'll dress up like a king for the talk. I WILL BE KING MARKDOWN.

I had zero content at this point yet possessed an unshakeable confidence that the talk would require me to spend 30€ at a place called Circus. So I did.

Back at my office, I didn't start writing the talk so much as I went panic-shopping again. I bought a Logitech Spotlight on Amazon for 90€ because I had seen swyx tweet about it and it looked cool. Justifiable procrastination, amirite?

swyx 🌟

@swyx

got a @Logitech Spotlight Presentation Remote

1 min charge, 3 hr life

3D movement to 2D highlight without sensor bar

i’ve needed a clicker a few times in my speaking career, the highlighting is just gravy :)

15:37 PM - 12 May 2019

If the audience hates the talk, at least I can distract them with this fancy pointer, like they're cats!

The Logitech Spotlight is pretty cool though. It lets you highlight and magnify parts of the presentation just by pointing at the screen and dragging around a circle. It has a built-in accelerometer and requires no external sensor. The Spotlight also has next and previous buttons that can be configured to send custom keystrokes when you double-click them.

I still had no plan and no content, but I had stuff.

Procrastinate

I did nothing for a week except get a haircut.

Perspire

In the 55-hour period from July 7 @ 12pm to July 9 @ 7pm I spent about 30 hours building and rehearsing the talk.

But why did it take that long to build a 10-minute lightning talk?

Yes, why indeed?

MDX Deck

Since I was giving a talk about MDX, I knew I couldn't just build my slides in Keynote or Google Slides like some sort of traveling hypocrite. I had to build them in MDX. That single decision opted me into building an entire single-purpose React application, including a half-dozen new React components and all the custom CSS to go along with them.

Thankfully, there's this great tool that exists called MDX Deck. MDX Deck lets you write slides in markdown and embed React components using JSX syntax (this is what MDX is). I'd just used it to write a talk for JAMstack Paris. It has a presentation mode with support for speaker notes too.

I highly recommend MDX Deck BUT remember you are still coding your slides. There is no drag-and-drop positioning or text-resizing. No flashy transitions. There are some themes and layouts out-of-the-box, but you need to build on top of that with React, styled-components, and all that implies.

$ npm ls --parseable | wc -l
993

This talk brought to you by 993 NPM packages!

These are some of the components I extended or created:

• Horizontal: a layout that takes a customizeable width
• Appear: to make children appear incrementally without taking up space before they're visible and making the first child visible on initial render
• Character: the base component for the king and the princess that renders an image and wires up hover and click handlers
• Code: to show code with syntax highlighting
• Provider and Footer: to put a footer with twitter handles and the slide number at the bottom of every slide

Why the footer? It's important to have your twitter handle and the conference twitter handle or hashtag showing at all times if you want to make it easy for folks to tweet your talk.

On GitHub you can check out the code for all these components.

Creative direction

The week of procrastination wasn't entirely unproductive, it turns out. A background process running in my brain stitched together a rough idea of how the talk would work.

The Story

• The tension in the fairy tale's plot would be a dispute between the King and the Princess around what kind of content the kingdom should produce - text-heavy or interactive.
• The kingdom's content team would be called The Royal Academy of Content and the engineers on that team would save the day.
• A neighboring sovereignty called the JAMstack Kingdom would hold the secret to combining Markdown and JavaScript components 😉

The Technology

• King Markdown and Princess JavaScript will be React components.
• When hovered over, some animation will happen.
• When clicked on, the code for its React component will appear.

The Props

• The Logitech Spotlight will be fastened to the base of the Royal Sceptre and hidden so the sceptre itself appears to be driving the presentation.
• The Spotlight will trigger the hover and click events on the characters.
• The Spotlight will magnify sections of the code as I explain them.
• The Spotlight will change the props of a React component on the fly, literally "props for changing props".

This is what the screen looked like with the Royal Sceptre moving the highlight bubble away from King Markdown and toward the code that produced him.

This effect worked to focus the audience's attention, even in a noisy pub.

Live coding

For whatever reason, the challenge of telling a fairy tale with bespoke React components AND animating it with the world's most expensive clicker didn't feel like enough for a 10-minute talk at a bar.

Surely there had to be some live coding too.

The live coding ended up on Slide 16. The rendered HTML output and code of an instance of Princess JavaScript is shown side-by-side. Thanks to react-live, changing the code in the editor causes the component to re-render instantly.

I didn't have time to wire up the Royal Sceptre to type actual characters (it is possible!) so I just used my laptop keyboard to change the values instead.

Live drawing?

At one point I was rehearsing with the Royal Sceptre and I thought "wouldn't it be cool if I could draw on the slides just by pointing at them?"

I had recently come across an elegant implementation of in-browser drawing on the DEV community's offline page and read Ali Spittel's post about how she built it. Thanks Ali!

How to Create the Drawing Interaction on DEV's Offline Page

Ali Spittel ・ Jul 3 '19 ・ 4 min read

#javascript #art #showdev

I borrowed the code from her Codepen, shoehorned it into a React component, made a few tweaks so that it'd work with the Spotlight pointer*, and boom, it worked!

I made the whole surface area of the final slide drawable by using this React component as the slide's MDX layout:

<Drawable color="#ce4999" width={20}>

# Thank you!

<div style={{ fontSize: "24px" }}>
  Click and hold to draw on the page.
</div>

</Drawable>

At the end of the talk, I pointed the Logitech Spotlight Royal Sceptre at the screen and underlined the words "Thank you".

*In the published slides, you can click the mouse and hold to draw. The Spotlight cannot do that. For the real presentation, I modified the code to draw simply on hover, which can be done by waving the Spotlight around with the top button held down.

Perform

I'd never tested any of this before a real crowd before. I had no idea where the screen would actually be in the bar and if it would even be possible to point at it without turning my back to the crowd. But this is the Perform phase, with no room for Panic.

Phil was very kind and let me do some tests when I arrived at the bar. The screen was behind me but not too far. The Royal Sceptre was able to move the highlighter on it. This was good news.

Then it was go time. I put my laptop down on the bar, plugged in an HDMI cable that was too short, and spoke into the microphone at full volume, making liberal use of the Royal Sceptre. The crowd got into it and we had a lot of fun together.

On twitter, people said they enjoyed the talk. Yay!

Liquid error: internal

And another one here:

Liquid error: internal

In the end, pushing through the 4 P's and spending the time to build the talk was definitely worth it. I learned at lot about MDX and MDX deck, and it led to many fun conversations with folks who were curious about how it all worked. That gave me the motivation to write about it here.

😅😅😅😅

Conclusion

Is there a conclusion? I hope so.

The 4 P's framework is horrible, please don't write talks that way.

The Logitech Spotlight is very cool and I've only scraped the surface of how it can make very interactive presentations when combined with React and MDX.

Phil and the whole JAMstack Conf crew threw an amazing conference. They're good people. I thank them for selecting my talk and not thinking it was a fake submission.

There's no video but you can see the slides and look at the code to learn about MDX and see how everything in the talk was built.

If you have a question about MDX, MDX Deck, or (not using) the 4 P's, please ask.

Thank you for reading!