Hacker News new | past | comments | ask | show | jobs | submit login
Eagle.js: A hackable slideshow framework built with Vue.js (github.com/zulko)
176 points by lobo_tuerto on Sept 24, 2018 | hide | past | favorite | 38 comments



Would be 10x more awesome if an "auto-play" mode were possible, with associated audio-file, and pre-programmed transitions.

Would take sound file attachment, and array of minute/second offsets; once timed to audio file, this would be better than YouTube videos, and supplement conference talks.


Author here (very happy to see this on HN). I have done exactly that (automated "next slide" and audio playing at specific slides) but haven't contributed back to the repo yet. It took just a few lines of code in my slideshow, without requiring to modify the library (one example of why I claim that it is "hackable").

I defined a Vue component "next-step(after=5)" which triggers a next slide after 5 seconds, and an "audio(source, timeSegment)" component which just plays an audio. Then your slideshow looks like that:

  slide(steps=2)
    next-step(:after="2" v-if="step === 2")
    audio("hello.mp3")
    
    h1 Slide Title
Maybe not as good as a built-in solution, but good enough and very easy to tweak for everyone's needs.


Would also allow a solution for LMS (learning management system) that employees can actually use on a mobile device.


No, that's not allowed. And it needs to be in broken Flash with slides you can't skip.


Also should require hunting down juuust the right version of internet explorer, which is not the version it claims compatibility with but rather the version listed in the middle of paragraph three of the emailed instructions.


you got an email?


We jest, but seriously, maybe there's an HN moment here.

Outsourced corporate training/indoctrination software honestly seems to satisfy the legal department to the point they can say "ass covered, check," but does not go as far as the victims learning anything useful to the company or their career.

What kind of market would there be for corp training tools that actually satisfy everyone without resembling a force-feeding tube?


Exactly... if they skip slides, did they learn?


I once had to sign a document saying I listened to an instructional safety video.

I was required to view that video on the company-provided machine.

That machine did not allow sound output.

So I viewed the 2 minute video which only showed section headings fading into each other every 20 seconds and dutifully signed the document.

According to my colleagues, this was the expected and accepted behavior.


This seems like it could actually hit the sweet spot I've been looking for. It won't make people dizzy (Prezi) and it supports reasonably sophisticated branches and interactions - making it useful as both a presentation tool and something you can send as a companion to a presentation, after the fact.

Other than Prezi, Reveal and Eagle, are the other presentation tools we should check out?


No specific endorsement besides that it's made by a local (to me) guy: https://slidewriter.io/


This is awesome, thanks for sharing. I love the use of markdown, emojis, code format and auto-embed from web sources!


Surprised slides.com wasn't mentioned yet, I've seen many software developers at conferences use this as their presentation tool.

https://slides.com/

(shameless plug) - Example slidedeck I made last week on "Userscripts and tampermonkey".

https://slides.com/vincentntang/userscripts-with-tampermonke...

From my experience, prezi is terrible. Transitions can make you sick if used incorrectly. Too many places to hide information. Making it difficult for both the presenter and user.

------------------------------------------------------------------

The reason I like slides.com:

0) Free tier is really good. I get 250 MB of storage. In one 10 min slide deck, I only used 3 MB. Meaning I could have a LOT of presentations before upgrading plans. You would want a paid tier starting off for private decks / offline decks

1) I get my own marketable endpoint name. https://slides.com/vincentntang

2) Slides.com is easy to remember for anyone looking at the URL to follow along

3) Slides lets you use ←→↑↓ arrows to change pacing of your slides. For instance, you might predict someone will ask you a question on a specific slide. Add a ↓ to have a digression branch. You can branch as much as you want to, in any direction you want. Plus get a snapshot overview of what the entire branch looks like. https://i.imgur.com/Jmm0qWs.png

4) Editing is simple. My first time using it, I had no intention of presenting. I literally made a 10 min presentation while sitting in someone else's 1 hour presentation. Hadn't ever used slides.com either

5) I can download an HTML export of those slides. The only exception is it doesn't download anything embedded as an iframe (e.g. codepen embeds), but its good to know that you can do offline presentations / have backups as needed.


Formidable Labs also has a similar project written in React: https://github.com/FormidableLabs/spectacle


The sample was actually a good sample!

What I mean is, it demonstrates the code which is important in a readme if you want other people to adopt your product. But, it was also rather funny and kept me engaged throughout it.

I hardly ever make slideshows beyond just black text + white background (or one of the default themes) which I tend to do with google docs as it's the standard at work.

But it's a neat product, good job!


This looks like a good solution for a developer. Most people who create slide shows won't be tech-savvy enough to use it, so an interface (dare I say wizard) to get anyone started with a few slides i.e. images and text with sound default values would lower the barrier to adopt this.

I understand that a value is to have the slide show available as a link for someone to view at their leisure.

For the use case of a live presentation one could look into some audience interaction. Here's a side project I contributed to [0] which I used myself to poll the audience and and present the results in real-time. As a presenter you had the problem that you needed to switch between Powerpoint and the web browser, which confused the presenter. If it "just works" then there could be some value in doing something similar.

A problem with live presentation that any such solution faces is that speaking publicly and giving presentations is a nerve-wracking experience for most mortals. So:

a) Powerpoint / Keynote are viewed as safer bets (no connection issues, older projectors will have smaller resolutions and scaling content can be trickier)

b) The presentation will have too much text (a safety net for the presenter to make sure they don't get lost but a poorer experience for the audience) - maybe some constraints would nudge the presenter to create a better presentation (analogy: PechaKucha)

Anyway, thanks for sharing!

[0] http://www.ipet.io/demo/demo


Is anyone using this or Reveal.js for non-programming/creative talks? I'm in science and haven't tried either solution yet, because it never feels right to only show either a bullet list or a single image on a slide.

Obviously getting a gridded layout via grid/flexbox is possible, but isn't this a common need that was solved by someone else?

Edit: just had a closer look at Eagle.js and it does support a gridded layout via its .quarter class.


I use reveal.js a lot and hack around with plain html and css if needed.


A hackable slideshow framework for hackers on hacker news. :) From now on everyone should call their project hackable if it has a public API.


By hackable we actually mean this library is not that easy to use for non-developer, because it requires you to be familiar with Vue and modern front-end app work flow. It's not "inject script tag, write some html and it just works" kind of library, it offers a set of raw and minimal APIs.


This phrase hack the hell out of me.. :)


I wouldn't use Pug to show a demo. I don't know how intuitive it is to people that haven't used it. Seems like you're going to turn off audiences that are not using node/pug.

But, other than that it looks interesting!


Pug is wonderful, and this project is aimed at programmers since you need to know your way around Vue.js if you want to make anything with it.

From their docs:

"If you are not familiar with Vue.js you will find eagle.js harder to use than, say, Reveal.js, but on the long term eagle.js makes it easier to organize your slides and implement new ideas."

In any case Pug is really easier on the eyes as it's a lot less code to read/parse.


You don't have to use pug at all. Pug is more like Zulko's personal choice. You can go with any templating options as long as Vue loader supports.


To be honest I've found fullpage.js to be very slick and can do a lot more.

See here: https://alvarotrigo.com/fullPage/#examples

It also supports mouse wheel and touchpad and tablet navigation which I'm not sure this does. The latest versions work with plain old HTML too and doesn't even rely on jQuery any more.


You can’t do that with “plain old HTML”, you would at least need css. I assume you mean JavaScript.

Slideshows and scrolling websites are not the same thing.


Sorry, I wasn't clear. I linked to a Javascript library so I assumed you'd understand that I meant that the markup is in the page and you enhance it with this library. Crazy old fashioned idea I know.


The very first package dependency is jquery


It's been removed very recently but it can still hook in if you include it.

It actually has zero dependancies now: https://github.com/alvarotrigo/fullPage.js/blob/master/packa...


This is really sweet. I feel slideshows necessarily doesn't even have to be for just slideshows, it can even be done effectively as a webpage too!


It says that scrolling up should go to the previous slide, but it advances to the next slide for me. (using Apple Magic Mouse 1)


Can you add an issue on github?


You should replace `Ctrl + >` to 'Cmd + >' for Mac browsers. It looks cool overall.


Permalink demo doesn't work.


Thanks for the feedback! Will fix it later


fantastic contribution! Good shit!


lol this slideshow thing is pretty cool


Thank you!




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: