
WebSlides – Making HTML presentations easy - RealGeek
https://github.com/jlantunez/webslides/
======
jagger27
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.

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

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

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

~~~
hakakadera
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

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

------
jvehent
[https://github.com/hakimel/reveal.js/](https://github.com/hakimel/reveal.js/)
is my framework of choice when making slides.

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

~~~
brnkrygs
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](http://lab.hakim.se/reveal-js/#/2)

(Hi from a fellow enthusiast)

------
franciscop
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/](https://webslides.tv/)

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

------
reimertz
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](https://reimertz.github.io/lagom)

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

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

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

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

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

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

~~~
jlantunez
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/](https://medium.com/p/fa7a9e37ff97/)
Thanks!

------
pythonaut_16
Here's another pretty cool one using Elixir and Phoenix Channels (Websockets):
[https://github.com/ernie/venture](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.

~~~
davidbanham
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)

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

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

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

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

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

~~~
captn3m0
Another similar effort: [https://github.com/robbie-cao/awesome-
slides](https://github.com/robbie-cao/awesome-slides)

------
eranation
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!

------
geraldbauer
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](https://github.com/henrythemes/jekyll-talks-theme) (using the s6 (html)
slidekit -> [https://github.com/slidekit](https://github.com/slidekit) ).

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

~~~
arunc
You mean, like asciidoc?

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

------
geraldbauer
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](https://github.com/slideshow-
templates) Ready-to-fork (use) packs include: deck.js, impress.js (3D!),
reveal.js, g5, s6, s5, and more.

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

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

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

~~~
viraptor
What do you use it for?

~~~
explorigin
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).

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

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

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

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

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

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

