Frontend development + UX + Accessibility

My first public talk

Me getting my slide-clicker ready before starting the talk.
Doing my best to remain calm as I’m about to begin my presentation.

This week I did my first non-work, non-study related, completely-out-of-my-own-free-will presentation in front of a crowd, something I don’t think I’ve done since I had to in high-school and at university. Thank you to the ChamGeeks meetup for bringing me in. It’s been 2 days, and I want to write down as many thoughts and feelings that I can while it’s still fresh in mind.

Edit: I waited with publishing this post for a while to see if it still resonated with me weeks later. It does :)

Up until a few years ago the idea of standing in front of a crowd and telling them, well, pretty much anything, was scary enough for me to never consider the idea seriously. But somewhere deep down that must’ve still been something that I secretly wished to do. Over the years I’ve worked as a “web designer” (I use that title loosely) I’ve been more than average interested in clean semantic markup (HTML) presented in a user-friendly and accessible format (CSS). As it turns out, when one does that for over 10 years, one learn a thing or two that perhaps isn’t common knowledge. But going from there, to actually talking for 30 minutes, while keeping the audience’s interest, still seemed like a stretch. I’d even fallen off the blogging wagon back in the noughts.

Thankfully my recent role as course developer at the EPFL Extension School gave me the opportunity to improve. Over the last 18 months I created dozens and dozens of videos, talking in front of a camera, creating slide-show videos, and live code walk-throughs. A great exercise, and what I needed to up my presentation skills and boost my confidence.

The preparation

I talked with a few friends and colleagues who’d had experience with public speaking to get a feel for how much time I’d need to invest to get ready. The general answer was 3 days, which I think was pretty spot on. Granted, I didn’t have 3 consecutive days to work on this, it was chopped up and spread over a much longer timespan. However, I did have a good running start, as I had a lot of content from the subject I did on CSS Grid for the EPFL Extension School. Thank you to them for allowing me to re-purpose a lot of the slides for this talk! So yeah, my talk is about CSS Grid.

Since I’d made those slides and videos originally, I’d picked up on a few more things that I wanted to include in my talk. In fact, there was a whole heaps of subjects I was wondering about whether to include or not.

When I’m confronted with a dilemma like this I always take to pen and paper. I just seem to be able to plan better when I can scribble wildly across big blank pages. I’ll draw circles and boxes, connected with arrows, cross out things or move them around, make little notes and sub-notes. This way a patterns usually emerges. Part of the notes this time included an idea for an entire new talk, but I managed not to get side-tracked, and boxed it off for later review.

Two pages of notes, scribbles, arrows, boxes and circles.
The brain-storming outline for my CSS Grid presentation.

Normally I would’ve probably gone down that rabbit-hole, chasing the “better” idea. But this time I happened to be in the middle of reading Questlove’s book “Creative Quest”. Early in the book he talks about the importance of setting limits, and letting creativity work within those borders. And this had really struck a chord within me. I followed his advice, and what do you know? It worked!

I also wanted to incorporate ideas from another book: []“Make It Stick: The Science of Successful Learning”](https://www.goodreads.com/book/show/18770267-make-it-stick). The most obvious one that made it into the presentation, is the concept of introducing the audience with a task before I’ve taught them anything. Make them come up with some ideas for what they think it is, make them discuss it amongst themselves, but don’t give away the answer. (Ok, so I didn’t manage not to acknowledge the right answer when they came close, so I need to practice being more strict!) The physiology behind doing this is that by thinking about a problem before being introduced to the new tools for solving it, we make use the well used neural pathways in our memory, relying on existing knowledge. When we then are presented with new information, it is easier to attach it to the already existing knowledge. It’s like walking a well used path through the forest, and then finding little new paths off to the sides. You can keep the well-known path within reach as you explore.

Practice

I knew I needed to practice the talk at home before showing up on stage. I decided it was so important that I was willing to stick with the default template for the slides in Keynote to save time. (Again setting my own limits, thanks Questlove.) I went through it 2–3 times by myself, although they were hardly real walk-throughs, as I kept stopping and changing and updating or deleting contents as I felt that the flow wasn’t right. At the fourth attempt my wife was willing to sit through it, although it’s hardly her field. Having an audience made a huge difference, and was the breakthrough I needed. I now knew I could talk through most of the slides without relying on my notes.

Speaking of notes, I had them all in the Keynote presenter notes. But because I was practising at home with only one screen, I couldn’t see them! However, as luck would have it, I used my phone as a clicker, and it turned out that the clicker app on the phone displays the notes. This was super handy for me, because I wanted to be able to move around and not have to go back to the laptop whenever I needed to take a glance at my notes.

The talk

I came off to a bit of a weak start. I hadn’t focused as much on the introduction as I had on the core section of the subject. But then I got to my quiz experiement, asking people to guess what this meant:

grid-template-columns: repeat(12, minmax(0, 1fr));

This led to a much bigger discussion than I’d anticipated, before we’d barely even gotten started. I think for next time I’ll need to put a restriction on this part, perhaps with a timer or a maximum number of suggestions. I also intended to write down the suggestions in order to bring them up at the end, but this slipped as I became to busy managing the suggestions.

Update: When presenting the same talk at the GenevaWeb meetup a couple weeks later I still included the code quiz. Then I moved onto the next slide, allowing people to think it over by themselves, rather than sparking a distracting discussion.

The rest of the talk went very well. I surprised myself by not being nervous. I can only thank the amazing ChamGeeks audience of 10 for their keen interest and making me feel so comfortable. And for buying me beer before and after! That was a nice perk I hadn’t expected.

The questions

I feared not getting any questions at all, I was even prepared to force out at least a couple questions from the audience, but that wasn’t necessary. The questions started during the talk, so I decided that it’d be ok to answer those there and then, as long as it didn’t get to out of hand.

Once we made it to the end, I opened up for more questions, which turned into more of open discussion. The downside of this was that I partially missed the opportunity for an “official” finish to my talk, but I managed to reign it in before doing one last self-promotion. Hire me!

Once that was done I received nothing but amazing feedback from my friends and peers. Ok, so they’re not an entirely objective audience, but I took those words of praise too me and soaked it up and I’m still buzzing off it now, 2 days later.

I would’ve liked to make a note of the questions I received, as they give me an overview of others’ understanding, which I can use to further refine the presentation, and also for any future blogposts, demos or other suitable content. Another note on that, is to repeat the questions I got, as it got very loud in the bar we were at, and not everybody could hear the questions that I was giving answers too.

My favourite type of feedback was when people told me that they had a-ha moments. One specific example that stuck with me was about how grid-auto-rows works. I was stoked to hear about it! I think this is because those are the things I like to pick up myself when watching talks. Rarely, if ever, is everything in a talk new and mind-blowing, but it’s great to pick up these nuggets of gold. And to be able to be the one providing it — great feeling!


This post was originally posted on my Medium account.

← Home