WebSlides – Making HTML presentations easy | Hacker News Reader

WebSlides – Making HTML presentations easy

github.com

188 pointsRealGeek65 comments

I have a bit of feedback: the scrolljacking doesn't work at all for me in Safari on macOS with a MacBook touchpad. All it does is activate the edge-bounce animation. Chrome is a little janky too, half activating the bounce animation and then advancing to the next slide. Firefox is fine since it doesn't do the edge-bounce.

The worst crime (to me anyway) is the history spam and this applies to all browsers. Hitting back changes the URL but not the slide that's shown, curiously. If you're going to go this route, that's fine, just update the visible slide.

I would prefer if it didn't make me jump 50 history items back to get to where I came from.

Thanks, jagger27. Touchpad is my priority right now. I'm just a CSS guy :)

It shows! The design is lovely.

With regards to the history, you can update the URL without having the history spam. I believe it's replaceState instead of pushState

Right. I actually don't mind the 50 history items, but it definitely feels like a bug when the URL changes upon hitting Back but does not update the visible slide.

Something to be aware: this is OP's first Github project. Let's be nice so it isn't the last.

for someone starting out with their first github project, one would appreciate your comment.. although one may be 100% OK for their work to be the subject of any rational analysis, it is worthwhile to know the constructive motive behind such discussion and thereby even criticism may encourage more future contributions (moving far from being the last project).

+1 for being vocal

I humbly give the finger to the idiots who downvoted this. Reflects your elitism and easy priveleged life with no idea of what its like to live elsewhere other than where you grew up.

No wonder, valley is full of bullies who just did 10000 hours of practise but 0 hours of being human.

https://github.com/hakimel/reveal.js/ is my framework of choice when making slides.

reveal.js + pandoc + some customization is what I'm sitting at right now. While I like it a lot, I could imagine that reveal.js's default layout isn't suitable for presentations with lots of details. Also haven't figured out how to jump to a particular slide.

I'm fairly sure that reveal.js URLs are hackable... the slide number is added to the URL as an anchor. Setting that in your URL bar might be a simple way to jump around to various slides. Also, ESC brings up a slide map that you can jump around on.

e.g. http://lab.hakim.se/reveal-js/#/2

(Hi from a fellow enthusiast)

Yes, pandoc can convert from markdown to many slide formats, but reveal.js is my favorite.

You can jump to a selected slide: http://htmlcheats.com/reveal-js/reveal-js-tutorial-reveal-js...

And if you're an emacs user there's https://github.com/yjwen/org-reveal/ to make the whole process a little easier using org mode.

Same. I've used that combination for all the presentations I've given since starting at $CURRENT_JOB late in 2015, and have received nothing but compliments on same. I was a little concerned about getting "why didn't you use PowerPoint?" and the like, and prepared to respond with several substantive reasons (not least of which is how much faster org-reveal is!), but it didn't even come up.

It's the only one I know of that supports speaker notes. You can actually use it on two screens.

Spectacle does so as well: http://formidable.com/open-source/spectacle/

Same. I like it so much I pay for his commercial offering, http://slides.com - which has a bunch of neat extra functionality

When presenting code, Spectacle [1] i.c.w. spectacle-code-slide [2] is pretty sweet, although a bit messy to set up (but that's true for revealjs as well).

[1] http://formidable.com/open-source/spectacle/ [2] https://github.com/thejameskyle/spectacle-code-slide

Please make the website more usable. It has a really nice design but poor UX. At least I should be able to scroll to... scroll. And hiding elements until you hover over an invisible part of the screen is totally against a good UX (discoverability). This could be okay in games or in purely artistic webpages, but if you intend your visitors to use the page and read the content it is counterproductive.

Edit: being this a project for making slides on a website with such a poor UX gives a really bad feeling for your potential clients. Will the project itself have the same problems? Will I be trying to hurry to finish the presentation and not find a button to save as PDF because it's invisible? etc

Edit: the link was changed from the website to the github.com, this comment was intended for the original URL: https://webslides.tv/

This is the ultimate article on scrolling UX:

https://bost.ocks.org/mike/scroll/

Basically, don't mess with built-in scrolling functionality - just change how your page renders based on scroll position.

I agree here. When I got to the site I thought that it was just a placeholder image until I saw your comment and tried the keyboard.

Browsing the web is pretty mouse/trackpad driven. Especially for landing sites like this. It just felt un-intuitive.

Thanks for your suggestion, franciscop. Check again (desktop view) :) https://webslides.tv/

to jlantunez (I cannot reply in your comment), better as I can see the footer now, but it is barely visible, the nav is still hidden and you should probably be listening to the scroll and then scroll the page depending on that, as that's the expected behavior on websites. on('scroll') probably doesn't work as you want to listen for intent, but google gave me really good results on this topic back in the day

I created CLI for creating simplistic presentations for my first lightning talk. It turned out pretty great so I open sourced it. It has some neat features such as live-reloading server, anonymous deployment, mirrored highlighting and cursor and speaker mode. https://reimertz.github.io/lagom

Would be awesome to get some more contributors.. hrmf, I mean, users. :)

Have you tried it on Safari? I see mostly empty pages.

I accidentally pushed a what I thought to be a fix that turned out to break everything in v0.6.4. everything is fine now in v0.6.5.

Sorry about that.

I generally use RemarkJS to create my slides (https://github.com/gnab/remark).

However, what's the difference between this tool and https://slides.com/ (and it's MIT open sourced at https://github.com/hakimel/reveal.js/) ?

EDIT: not saying you should not create this tool...but what was the motivation? (or the differentiation factors?)

Hi ohstopitu,

Slides.com is an great tool. WebSlides is a solution for making presentations, landings, and long-forms. It's also a starting point for building custom CSS frameworks.

For more on why I decided to build WebSlides check out this post: https://medium.com/p/fa7a9e37ff97/ Thanks!

Here's another pretty cool one using Elixir and Phoenix Channels (Websockets): https://github.com/ernie/venture

It also has markdown based slides but syncs the presentation to clients via websockets, and allows for interactive slides with things like Polls and live chats.

Reveal.js can also sync the presentation to clients via websockets with its multiplex plugin.

You can use the same mechanism to have the presentation on a computer connected to your projector and control the slides from your phone (or any other computer)

Yes, but why make html presentations at all? Are there any tangible benefits except for fancy animations?

Personally I'd rather make a presentation in HTML than in a magic GUI. Also works on a broader array of platforms. But your mileage may vary.

I'd say so, yes. Mostly just because HTML is ubiquitous, it means your presentation continues to live on after your talk by uploading it to your site. Plus your slides can be responsive, accessible, searchable, linkable (if you build them correctly of course).

Good karma (hypertext) and productivity (presentations, landings, and long-forms). Designers, marketers, and journalists can now focus on the content.

I think you got it backwards... right now non-tech-savvy people focus on the content with their tooling (PowerPoint, Keynote, Google Slides). Your tooling introduces a new layer of complexity: now they have to learn HTML and css to do the _exact same thing_. What you built looks great, but you have to reconsider who you're marketing it towards. I can't imagine anybody but a programmer using this.

If your goal is to build a platform for presentations like medium is for articles, isn't that what speakerdeck.com already is? If you want to build a better speakerdeck, just say that then? "A better way to create and share slides online"

This is the first release of WebSlides. I don't want to build a better Speakerdeck. WebSlides is about telling/sharing engaging stories (css, indexable content...).

One advantage is I have 5 year old) keynote presentations that keynote refuses to open (tells me file format is too old), and 3 year old PowerPoint slides the new version messes up the formatting of. I'm slightly more confident my HTML will continue to render right, and at least open!

Portability. If you have to send a presentation around, embedding fonts in PowerPoint only works if the viewer is on a Windows machine, and keynote is not an option if your viewer is on a PC.

If you're worried about portability, you can export as a PDF. You could also use LibreOffice, which is cross-platform.

I often have complex animations and embedded video that will not survive the PDF export, and am sending presentations to people who can't just be asked to install libreoffice.

PDF has two problems for me:

One is that you can't have speaker notes integrated in the presentation the same way you can with PP or reveal.js.

The other one is that it doesn't scale. You export the slides in one display ratio and it stays like that. Most web presentation formats will adjust to whatever your display is doing.

in addition to what others have said: teamwork. Coordinating a group working on Powerpoint slides is quite annoying, text-based formats are a lot easier to manage and merge, especially for technical folk familiar with git & co. Google Slides is the only GUI variant I know that deals with this by syncing changes immediately, and it has other weaknesses.

No need to download any software. No need to choose between PowerPoint or Keynote.

The coolest thing ever is when a talk at a conf has the URL for the HTML slide deck, so if you miss something on a prev slide you can go back and check, & you don't need to figure out where/if the slides were published when you want to revisit after the talk.

Still early - I've put together an "Awesome Slideshows" page -> https://github.com/slideshow-s9/awesome-slideshows listing (awesome) html presentation / slideshow templates, themes, tools and more.

Another similar effort: https://github.com/robbie-cao/awesome-slides

Very nice! Feature request - make this also friendly for simple websites, (just hide the next previous and add a navigation bar) Much simpler than bootstrap for non technical people, well done!

If you want to write your talks / presentations in plain text w/ markdown formatting I put together a ready-to-fork jekyll (github pages) theme called jekyll-talks-themes -> https://github.com/henrythemes/jekyll-talks-theme (using the s6 (html) slidekit -> https://github.com/slidekit ).

On a side note, does anyone know about something like that for simple docs?

Like if I want to migrate away for those bloated un-diffable PDFs and DOCXs to a HTML?

Preferably it should support importing from those 2 formats.

You mean, like asciidoc?

That's in python (web is preferred) but yeah it seems fitting.

For for html presentations packaged for github pages (jekyll) and writing in plaint text with markdown formatting, see the slideshow-templates org -> https://github.com/slideshow-templates Ready-to-fork (use) packs include: deck.js, impress.js (3D!), reveal.js, g5, s6, s5, and more.

This looks really useful. Is there a way to make it directly printable? It would be great if I can use it for my lectures.

That's pretty slick, nice work.

I don't make a lot of presentations, but the fact I could figure out a lot of it in minutes makes this attractive. I definitely see it as a web tool more than a marketing / management tool. If I showed our marketing dept markup they'd have a conniption fit.

Pressing "B" to black the screen is a feature that I consider critical that is missing here.

What do you use it for?

It seems that people use it to help audience focus. You would black the screen between slides. Probably you could emulate it by including blank slides in-between.

There is of course other opinion, that it can be more distracting, but it depends on material and speaker: http://www.mrmediatraining.com/2011/03/29/powerpoint-why-you...

It adds an element of professionalism to a presentation. You can hook up your lappy to the projector. Once things are tested, you black the screen while you wait for people to file in. This way the introducer can have the audience's full attention before your talk.

Also, it can be a powerful tool when you want the audience to pay attention to you and not the slides (if you need to go off-script for example).

For the first part, configuring a side screen, rather than a mirror screen works as well. Don't put the presentation on the extra screen until you want to.

Not very helpful for going off script though.

I must say that I completely missed the arrow keys and the page numbers at the bottom; the font color is way too light for the background. Maybe making that a bit more prominent would go a long way.

There's an issue where navigating to the next slide from the first slide brings you back to the first slide. I'm not sure if this is intended.

Hi, Navies. It's not an issue. It's intentional

Project looks fine - but I don't see myself switching from latex beamer any time soon.

It works great on IceCatMobile and is open source - so it has my support!

Reply on news.ycombinator.com