slide decks powered via markdown and react

slide decks powered via markdown and react

[ad_1]

I have been giving shows for years. I love many others began with
PowerPoint as a result of “that is how you’re making shows.” I moved on from that to
Prezi when I used to be in school and I wowed the entire crowds. I
moved on from that as it felt too gimmicky for the forms of shows I
was once making. I attempted Google Slides and that was once cool as a result of it is web-tech, however
was once a bit of restricted and did not glance all that great. Sooner or later I landed at
slides.com. I have been with slides for just about my
whole tool building presentation occupation. You can to find just about 100% of
the general public shows I have made on
my slides web page (together with
my first meetup communicate).

I have been lovely pleased with slides as a result of it is truly simple to create
shows and I have by no means been one to spend a ton of time on my slides. I
simply wish to lead them to temporarily and concentrate on training my presentation to
be in contact successfully what I would like. Nevertheless it surely has some shortcomings and
barriers, and there are a few things concerning the WYSIWYG interface that truly
worm me. So I have at all times been searching for a greater enjoy growing
slides. (Now could be as just right a time as any to confess that I have by no means used Keynote. However
I did not wish to pay for it and I do not believe that I would be prepared to spend the
time running at the slides to make it any higher than slides anyway).

More than likely the most important instance of the restrictions of slides that truly bothers me
is the trouble of together with interactive parts at the web page. I at all times recognize
individuals who’s slides are made with HTML, CSS, and JS as a result of they are able to simply upload
their interactive demos without delay to their slides which will increase “the wow
issue” along with being usually extra enticing. For a selected instance,
my slides for my “Merely React”
keynote at ChainReact had a number of demos that have been recorded video which isn’t
superior, however I additionally had a subject matter the place I could not replay the movies
(watch right here).
So the demos kinda fell flat just a little.

When grasp Ken Wheeler introduced
spectacle I used to be tremendous excited! It
is so superior! I by no means were given into it even though as a result of I am simply too lazy and wasn’t
prepared to make the effort to make slides out of React code and customise it to
what I would like it to be. So even though I have attempted it a couple of instances, it by no means truly took
off for me.

Input MDX

A couple of months in the past John Otander launched the preliminary
model of a brand new instrument (and
specification) known as
MDX. Months later
Tim Neutkens
introduced MDX all through the Zeit Day 2018 Keynote
and the sector’s collective minds have been blown
(for instance).

Here is a fast instance of what is imaginable with MDX:

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

# Checkout this cool graph!

> That is markdown, for actual

<InteractiveGraph />

**That is proper!** We are rendering a **React Part** in Markdown!

There is a bunch that is superior from this. I have been short of one thing like this
for rather a while! Again when I used to be running at the web page for
glamorous
(glamorous.rocks), I sought after to make the entire doctors in
markdown to enable you internationalize, however I additionally sought after interactivity
to be imaginable, so I got here up with
a great bizarre syntax
to make this imaginable. It is lovely cool, and in reality works very similar to MDX at a
elementary stage (makes use of
a customized fancy plugin
for commentary), however it is method hacky and
restricted. This MDX factor is the REAL DEAL!

Input mdx-deck

Just lately, the (significantly) superb Brent Jackson
created and introduced
one thing completely superb: mdx-deck

gif showing mdx-deck demo

It has got the convenience of slides that I really like as a result of it is simply markdown. Could not be
a lot more uncomplicated than that! Then, to most sensible that off, if I would like one thing to be
interactive, I will merely make that interactive factor a React element, then
import that without delay into my slide!! How superior is that!? Approach superior is the
solution!

mdx-deck has some lovely candy options too:

You mix this with
Netlify’s superb GitHub Integration
and put your slides in a GitHub mission and you might be off to the races with an
robotically deployed slide deck!

Conclusion

I am recently running on porting my slides for
“Merely React”. You’ll be able to see the
present state of
the slides deployed on netlify right here (and
the pdf). I am lovely jazzed
concerning the skill to have such a very simple strategy to create shows within the
browser which might be simple to run in the community, deployed to the information superhighway, create a PDF model,
and utterly interactive. That is simply terrific.

Give it a glance and take a look at it to your subsequent presentation. I feel you’ll be able to adore it.
Just right good fortune!



[ad_2]

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Back To Top
0
Would love your thoughts, please comment.x
()
x