Keynote, Tailwind, Laracon and Madrid

Post update: this August I will be speaking at Laracon.EU in Amsterdam with a new talk about: “The Art of Form Validation” — please expect a bunch more of magic moves.
Grab your ticket > HERE <

When Madrid was selected to hold an official Laravel Conference the organisation challenge the community and published the call-for-papers. At the time I was using TailwindCSS everywhere and whenever I could link up the library. This fresh utility-first approach was solving me a lot of headaches coding new components and especially long-time projects.

So I’ve written a talk abstract about the technique; hit the submit button, and crossed my fingers.

Some weeks later I casually received an email from Shawn McCool asking If I was interested in giving the talk in Laracon Madrid.

me at that moment
me at that moment
// me at that moment

After pulling myself together, I’ve accepted the invitation and checked the Laracon website and I’ve noticed that Adam Wathan is also a speaker.

Great, I’m going to preach to a room full of people why Tailwind it’s good, with him in the room?

Time to get started with the slides but, instead of making just a couple of introductory slides and then do a live code session, I’ve decided to take the long journey of “sliding” everything using Keynote.

Going with the 90’s vibe train I’ve picked the nostalgia of Microsoft WordArt and everyone’s favourite clip: Clippy, and made a custom theme.

Image for post
Image for post
// intro “Utility-First CSS: Build a clean Component based system”

It didn’t take long for me to hit a roadblock. I was struggling on finding a good way to show how Tailwind it’s the best solution working with demanding stakeholders.

So I’ve started to search similar talks hoping to find someone that might solve this equation. But it was only when I’ve stepped into Simon Vrachliotis’s talk at Laracon AU, when I saw that his approach it’s the perfect solution.

My instant move was reaching out to him for his blessing to use the same idea. And with his :thumbsup: a couple of days later I’ve ended up with this result:

Image for post
Image for post
// final result from the Vrachliotis’s method

This explains perfectly the issue, but I was craving to spice things up. So I took another ride from the 90’s vibe when… a wild Zubat appears, and all stakeholders requests were compared with the most annoying Pokémon.

a wild stakeholder appears
a wild stakeholder appears
// a wild stakeholder appears

Keynote it’s, in fact, great for animation, but to showcase snippets of CSS and HTML I’ve realised that this tool it’s just not ready for code highlight.

This was, I believe, when I’ve lost my mind and went full Leroy Jenkins and selectively paint the text with the Dracula color scheme — keyword by keyword; text by text; block by block.

dracula color scheme FTW
dracula color scheme FTW
// dracula color scheme FTW

A lot of hours of crafting, refining and rehearsal the presentation, I was proud of the final result. Here are the slides, and some of the best highlights:

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
dracula color scheme FTW
dracula color scheme FTW

Normally the community promotes new releases around any Laracon and Adam is no exception, so he released an alpha version of the new Tailwind version, along with the new documentation and homepage.

Time to update the slides using this new content, and after seeing the tiny component he made gradually adding Tailwind classes to the HTML and showing the preview I wonder… Can I replicate that in Keynote?

Image for post
Image for post
// tailwind homepage preview made in keynote

Time’s up! I’m in Laracon; It’s my turn to talk.

Standing on stage being wired up; feeling my legs numb; Adam with his attention on maximum; Shawn looking at me worrying that I might pass out; and go!

Image for post
Image for post
(because twitter don’t like DNT)

Note: As soon as the recording of the talk is release I will update this post

24 minutes and ~180 slides later, still shaking, I only knew I didn’t fail the expectations after hearing the feedback from the attendees. Even more, when it came from some of the most respected community members and long-time speakers.

And don’t forget that Tailwind it’s just like a very good brand of repel. It would help you with those pesky Zubats.

Image for post
Image for post
// using tailwind as a repel to scare away stakeholders

See you in Amsterdam 👋

Full-Stack Developer @MedicarePT and a Web Contortionist — something between Developer and Designer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store