Spectacle: Write Your Slide Decks in JSX | Hacker News Reader

Spectacle: Write Your Slide Decks in JSX

spectacle.surge.sh

112 pointsspectaclejs39 comments

Nice! Feature request: Use replaceState so I don't need to hit back seventy times when I'm done reading slides on the internet.

Good call

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

Done & Pushed. Great call guys.

awesome! works like a charm :)

nice turn around time!

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!

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.

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....

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

Or actually, maybe a different idea. Thoughts on using a modifier key like shift or something to navigate without animations?

I think that'd be better :)

This reminds me of slid.es (now slides.com) and 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?

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

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.

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.

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! :)

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

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

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.

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

"EASY THERE PAL"

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?

I believe its due to the mount cycle of TransitionGroup. Especially if you navigate before a transition is over, then an unmount doesn't occur, and the state isn't cleared.

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.

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.

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?

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.

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

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.

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.

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.

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

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

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.

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

loved it. extremely smooth and not confusing at all.

no right arrow?

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

Reply on news.ycombinator.com