
Spectacle: Write Your Slide Decks in JSX - spectaclejs
http://spectacle.surge.sh
======
skrebbel
Nice! Feature request: Use replaceState so I don't need to hit back seventy
times when I'm done reading slides on the internet.

~~~
carlosdp
This, so very necessary. It's the one major qualm I have with many JS slide
show packages.

~~~
thekenwheeler
Done & Pushed. Great call guys.

~~~
carlosdp
nice turn around time!

------
briandear
This is actually the coolest demo of what React is all about. I was on the
fence, but this is so awesome; I'm jumping into React. To the OP; thanks!

------
discardorama
Am I the only one who's annoyed by animations when I switch back to the slide?
I can understand animating the slide when I first land on it; but animating it
again when I hit the left arrow is wasteful, IMHO. Just show me the slide,
because in all likelihood I'm just flipping backwards to get to a particular
slide as fast as possible.

~~~
thekenwheeler
Good point. I'll split the transition prop into transistionIn and
transitionOut so that you could set one direction to have no transitions.
Realistically I don't even use transitions in my presentations, but folks seem
to like them sooo....

~~~
seivan
That's clever! Nice work btw, love the little DSL it becomes, very clear and
readable!

------
cbhl
This reminds me of slid.es (now slides.com) and reveal.js
([https://github.com/hakimel/reveal.js](https://github.com/hakimel/reveal.js))
which its based on.

That said, Spectacle doesn't seem to allow mouse / scroll wheel navigation
yet?

~~~
thekenwheeler
Not yet, as I'm still working out some of the feature set, but I'll file an
issue for addition.

------
Semiapies
This worked well on my old Nexus 7 (in Chrome), which a lot of similar systems
haven't worked on. I've lost track of how many swipe-for-next-slide systems
_haven 't_ worked for me, lately.

Some of the slides looked like they had a tiny bit cut off at the bottom,
though.

~~~
thekenwheeler
Thats awesome. I've done a lot with swipey things in the past. The cut off
should be fixed in the next patch, with height conditional scaling.

~~~
mcintyre1994
Just a heads up, I was going to post the opposite comment - no navigation on
Firefox on the nexus 7. I did see this first and check Chrome, that works fine
(although I get a constant loader in the tab bar - is that a known side effect
of something?).

This is really nice in Chrome on the tablet though, I agree! :)

------
evmar
Not sure if it's an intentional effect, but the "full width" is a bit more
than full for me:
[http://i.imgur.com/S3jrA7S.jpg](http://i.imgur.com/S3jrA7S.jpg)

~~~
thekenwheeler
Oh no! Could I trouble you for what env this occurs in? Does a refresh fix it?

~~~
evmar
Sorry for the terrible bug report. I just had a good guess: my laptop has a
higher-DPI display so I have Chrome adjust all websites to ~130% larger to
make them match a normal website. I can reproduce the problem from my desktop
if I zoom the page a bit.

~~~
thekenwheeler
That is a very strange and very valid bug. Head scratcher, but I'll get it
worked out.

------
jfolkins
"EASY THERE PAL"

------
eterm
Neat!

p.s. On the "click me" demo, the state is preserved when going back then
forward, but not preserved when going forward then back. - Is that a design
decision or unintended effect?

~~~
judofyr
For me it's only preserved if I press left-right or right-left quickly. I'm
guessing it's intentional.

It would be nice if it kept the state though.

~~~
thekenwheeler
The component in question is using component local state, so that resets on
mount/unmount. That said, it would be very easy to embed one that instead used
flux, and state would be preserved.

------
TTPrograms
I can appreciate the advantages in terms of portability of something like
this, but it's sort of funny watching trivial animations choke on a desktop
with a beefy discrete graphics card in 2015. Maybe that's just Chrome on
Ubuntu, though.

I guess you could put everything in a webgl canvas? Otherwise I guess we'd
either need to build DOM layout engines better optimized for on-line layout
updates or make them more parallelizable?

~~~
thekenwheeler
Hmm I'll take a look. Is there any particular animation choking? Or all of
them? It runs like butter on my Macbook Air in Chrome.

~~~
TTPrograms
I'm seeing pretty consistent drops to ~12 FPS on all animations - very well
could be an Ubuntu issue then.

------
CJefferson
Yet another javascript slide system which fails at what I consider one of of
primary requirement of a slide system:

Actually displaying the content of each slide, when viewed at different aspect
ratios.

I can't imagine doing a presentation with this -- all it takes is one weird
aspect ratio projector and half your talk disappears off the bottom.

~~~
thekenwheeler
Is there an particular set of aspect ratios this is failing at that I can test
against? This is 0.0.1 so theres still a couple of loose ends.

~~~
CJefferson
Just grab the bottom left corner, drag around, and see bits of slides
disappear.

I have fixed this in my slide library by choosing a single ratio, and using
css3 zoom to fit that best in the browser window. Is less "weby", but better
for displaying same slide to everyone.

------
brianzelip
hey it's another Ken Wheeler joint. What's up mothaforka?!

Have been letting Colin Megill's 'Inline Styles are the Future of CSS' vid [0]
marinate in my brain recently. Keep up the good work!

[0][https://www.youtube.com/watch?v=NoaxsCi13yQ](https://www.youtube.com/watch?v=NoaxsCi13yQ)

------
papercruncher
Sweet! The source is very nicely laid out as well, can serve as a realistic
example of building a modern ReactJS app

~~~
thekenwheeler
Thanks! I write React full time at a very large company, so we've had some
time to develop some cool best practices and solve some of the challenges
something like this presents.

------
moondowner
PDF export, excellent! Not many presentation libraries take this in
consideration...

------
TheSmoke
loved it. extremely smooth and not confusing at all.

------
jaunkst
no right arrow?

~~~
mattkirman
I assume you're meaning the message on the first slide? Hit the right arrow on
your keyboard.

