slide decks powered by markdown and react

I’ve been giving presentations for years. I like many others started with
PowerPoint because “that’s how you make presentations.” I moved on from that to
Prezi when I was in college and I wowed all the crowds. I
moved on from that because it felt too gimmicky for the kinds of presentations I
was making. I tried Google Slides and that was cool because it’s web-tech, but
was a little limited and didn’t look all that nice. Eventually I landed at
slides.com. I’ve been with slides for pretty much my
entire software development presentation career. You’ll find pretty much 100% of
the public presentations I’ve made on
my slides page (including
my first meetup talk).

I’ve been pretty happy with slides because it’s really easy to create
presentations and I’ve never been one to spend a ton of time on my slides. I
just want to make them quickly and focus on practicing my presentation to
communicate effectively what I want. But it definitely has some shortcomings and
limitations, and there are some things about the WYSIWYG interface that really
bug me. So I’ve always been on the lookout for a better experience creating
slides. (Now’s as good a time as any to admit that I’ve never used Keynote. But
I didn’t want to pay for it and I don’t think that I’d be willing to spend the
time working on the slides to make it any better than slides anyway).

Probably the biggest example of the limitations of slides that really bothers me
is the difficulty of including interactive elements on the page. I always admire
people who’s slides are made with HTML, CSS, and JS because they can just add
their interactive demos directly to their slides which increases “the wow
factor” in addition to being generally more engaging. For a specific example,
my slides for my “Simply React”
keynote at ChainReact had several demos that were recorded video which is not
awesome, but I also had an issue where I couldn’t replay the videos
(watch here).
So the demos kinda fell flat a bit.

When master Ken Wheeler announced
spectacle I was super excited! It
is so awesome! I never got into it though because I’m just too lazy and wasn’t
willing to take the time to make slides out of React code and customize it to
what I want it to be. So though I’ve tried it a few times, it never really took
off for me.

Enter MDX

A few months ago John Otander released the initial
version of a new tool (and
specification) called
MDX. Months later
Tim Neutkens
announced MDX during the Zeit Day 2018 Keynote
and the world’s collective minds were blown
(for example).

Here’s a quick example of what’s possible with MDX:

import InteractiveGraph from './my-d3-graph'

# Checkout this cool graph!

> This is markdown, for real

<InteractiveGraph />

**That's right!** We're rendering a **React Component** in Markdown!

There’s a bunch that’s awesome from this. I’ve been wanting something like this
for quite some time! Back when I was working on the website for
glamorous
(glamorous.rocks), I wanted to make all the docs in
markdown to make it easier to internationalize, but I also wanted interactivity
to be possible, so I came up with
a super weird syntax
to make this possible. It’s pretty cool, and actually works similar to MDX at a
fundamental level (uses
a custom fancy plugin
for remark), but it’s way hacky and
limited. This MDX thing is the REAL DEAL!

Enter mdx-deck

Recently, the (seriously) amazing Brent Jackson
created and announced
something absolutely amazing: mdx-deck

gif showing mdx-deck demo

It’s got the ease of slides that I love because it’s just markdown. Couldn’t be
much easier than that! Then, to top that off, if I want something to be
interactive, I can simply make that interactive thing a React component, then
import that directly into my slide!! How awesome is that!? Way awesome is the
answer!

mdx-deck has some pretty sweet features too:

You combine this with
Netlify’s amazing GitHub Integration
and put your slides in a GitHub project and you’re off to the races with an
automatically deployed slide deck!

Conclusion

I’m currently working on porting my slides for
“Simply React”. You can see the
current state of
the slides deployed on netlify here (and
the pdf). I’m pretty jazzed
about the ability to have such an easy way to create presentations in the
browser that are easy to run locally, deployed to the web, create a PDF version,
and totally interactive. This is just terrific.

Give it a look and try it for your next presentation. I think you’ll love it.
Good luck!




Source link

مدونة تقنية تركز على نصائح التدوين ، وتحسين محركات البحث ، ووسائل التواصل الاجتماعي ، وأدوات الهاتف المحمول ، ونصائح الكمبيوتر ، وأدلة إرشادية ونصائح عامة ونصائح