11 ms·
Eagle.js: A hackable slideshow framework built with Vue.js
- decentrality 8y agoWould 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.
- bronco21016 8y agoWould also allow a solution for LMS (learning management system) that employees can actually use on a mobile device.
- imglorp 8y agoNo, that's not allowed. And it needs to be in broken Flash with slides you can't skip.
- jjoonathan 8y agoAlso 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.
- mgkimsal 8y agoyou got an email?
- imglorp 8y agoWe 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?
- deskamess 8y agoExactly... if they skip slides, did they learn?
- ThePadawan 8y agoI 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.
- Natividad165 8y agoA slideshow framework for hackers. Slideshow system built on top of the Vue.js Supports animations, themes, interactive widgets (for web demos) Easy to reuse components, slides and styles across presentations All APIs public, maximum hackability https://liteblue.me https://liteblue.me
- zulko 8y agoAuthor 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.
- deleted 8y ago[deleted]
- d2161 8y agolol this slideshow thing is pretty cool
- yaodingyd 8y agoThank you!
- jppope 8y agofantastic contribution! Good shit!
- Nekorosu 8y agoA hackable slideshow framework for hackers on hacker news. :) From now on everyone should call their project hackable if it has a public API.
- iamzozo 8y agoThis phrase hack the hell out of me.. :)
- yaodingyd 8y agoBy 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.
- mimischi 8y agoIs 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.
- llao 8y agoI use reveal.js a lot and hack around with plain html and css if needed.
- peteforde 8y agoThis 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?
- sverhagen 8y agoNo specific endorsement besides that it's made by a local (to me) guy: https://slidewriter.io/ https://slidewriter.io/
- erikig 8y agoThis is awesome, thanks for sharing. I love the use of markdown, emojis, code format and auto-embed from web sources!
- Kagerjay 8y agoSurprised slides.com wasn't mentioned yet, I've seen many software developers at conferences use this as their presentation tool. https://slides.com/ https://slides.com/ (shameless plug) - Example slidedeck I made last week on "Userscripts and tampermonkey". https://slides.com/vincentntang/userscripts-with-tampermonkey/live#/ 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 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 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.
- andy_ppp 8y agoTo be honest I've found fullpage.js to be very slick and can do a lot more. See here: https://alvarotrigo.com/fullPage/#examples 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.
- sylentmode 8y agoYou 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.
- andy_ppp 8y agoSorry, 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.
- sylentmode 8y agoThe very first package dependency is jquery
- andy_ppp 8y agoIt'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/package.json https://github.com/alvarotrigo/fullPage.js/blob/master/packa...
- bronn31 8y agoFormidable Labs also has a similar project written in React: https://github.com/FormidableLabs/spectacle https://github.com/FormidableLabs/spectacle
- anthelios 8y agoThis 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 http://www.ipet.io/demo/demo
- Insanity 8y agoThe 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!
- jaequery 8y agoThis 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!
- speps 8y agoPermalink demo doesn't work.
- yaodingyd 8y agoThanks for the feedback! Will fix it later
- jordan801 8y agoI 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!
- lobo_tuerto 8y agoPug 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.
- yaodingyd 8y agoYou 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.
- mnr 8y agoIt says that scrolling up should go to the previous slide, but it advances to the next slide for me. (using Apple Magic Mouse 1)
- yaodingyd 8y agoCan you add an issue on github?
- palerdot 8y agoYou should replace `Ctrl + >` to 'Cmd + >' for Mac browsers. It looks cool overall.