Cleaver – 30-second slideshows for hackers(jdan.github.io)

294 pointsby iherediavor 9 Jahren49 comments

jdan.github.io

Cleaver – 30-second slideshows for hackers

http://jdan.github.io/cleaver/

49 comments

Hi HN! Cool to see this posted here.

I made this in college because I would always make slides last minute before class presentations or talks at my school's CS club, and fiddling with google slides/powerpoint seemed like overkill. I hope you find it useful as I have over the years.

I've attempted to rewrite it 5 or 6 times based on whatever cool technology I was distracted with, but never merged anything upstream (Spectacle https://github.com/FormidableLabs/spectacle is already a wonderful React solution).

A couple other folks maintain cleaver now (they're great), but lemme know if you have any questions!

H4CK3RM4Nvor 9 Jahren

I have to ask what this offers over a LaTeX/Beamer setup. I'm fairly happy using LaTeX for anything I'm sharing, but I'm curious about alternatives.

kurigevor 9 Jahren

Sure, when throwing some slides together last minute the first thing that comes to mind is "LaTeX".

sporkenfangvor 9 Jahren

Maybe you might want to spend some time with LaTeX then. Honestly, it's one of the most useful things I learned in school.

ralmeidavor 9 Jahren

I second that, it's extremely powerful, but not the tool I would reach for a quick last-minute presentation, as well.

asafiravor 9 Jahren

I'm with ralmeida here; do you actually make super fast slides with LaTeX? That has definitely not been my experience.

sporkenfangvor 9 Jahren

Yeah after 1-2 presentations I built a template and just drop stuff into each slide I have defined. Then if I need more slides I copy the framework bit for a single slide. Super easy.

tedmistonvor 9 Jahren

Cool project.

Dropbox Paper recently added a similar feature called Presentation mode. It treats --- as slide breaks and intelligently does font sizing of headers, recognizes headers as "soft slides", etc. It takes very little to no effort to go from doc to minimal presentation.

https://www.dropbox.com/help/paper/presentation-mode

callumlockevor 9 Jahren

That link is broken

tedmistonvor 9 Jahren

For whatever reason it's working again for me. Maybe Dropbox was doing maintenance.

tedmistonvor 9 Jahren

Try this - https://www.dropbox.com/help/9281

djsumdogvor 9 Jahren

I use Reveal.js for my presentations. The standard docs do have you putting all the slides in one big file, but I re-used slides between presentations so I created a little build systems with sets of slides, as well as individual slides, for different talk types:

https://github.com/bigsense/presentations

tedmistonvor 9 Jahren

Does it support any kind of Markdown import / include? For instance, the OS X app Marked lets you do this.

main.md:

    blah

    <<[another_file.md]

    blah

djsumdogvor 9 Jahren

I believe it does. The full docs are pretty extensive:

    https://github.com/hakimel/reveal.js

IIRC, at the time you had to serve the presentation from a web server for the includes to work correctly (not sure if that's still the case). That combined with me needing to reuse slides and create sets led me down the path I did, but there are probably easier ways to do that now.

nxc18vor 9 Jahren

This looks great. I love the simplicity on mobile and it has some nice touches (e.g. top progress bar).

I'm working on a project that needs something similar to this - embedded html presentations - but I'm faced with a problem I haven't found an easy solution to yet.

Markdown is great if there is just text or maybe only an image and text, but it falls down pretty hard with oddly shaped images or multiple images.

I'm considering making a js script to reformat things to look reasonable (e.g. Two column text + image with a tall image). Is there anything like this that exists currently?

cbhlvor 9 Jahren

If you're interested in this, you may also like reveal.js, which backs slides.com:

http://lab.hakim.se/reveal-js/

(previous discussion: https://news.ycombinator.com/item?id=6450223)

prezjordanvor 9 Jahren

One of cleaver's maintainers wrote a "theme" which will render your cleaver document (just markdown with some dashes in it) into reveal.js!

https://github.com/sudodoki/reveal-cleaver-theme

I am unsure what the authoring experience for reveal.js is like in 2017, so perhaps it can already do this :)

EDIT: Looks like they do support markdown. https://github.com/hakimel/reveal.js#markdown

ams6110vor 9 Jahren

These kinds of tools have been around forever. There are probably literally hundreds of ways do do slides from plain text. An older one is MagicPoint[1].

Nicely done though.

[1] https://en.wikipedia.org/wiki/MagicPoint

dstrootvor 9 Jahren

Except this one works great on mobile. Most do not work very well on my iPhone.

yogsotothvor 9 Jahren

Shameless plug. I made a very similar tool a few time ago:

https://github.com/yogsototh/mkdocs

Mostly a very minimal script which use pandoc. From markdown generate presentations (html with reveal.js/pdf with beamer) and documents (html/pdf).

zoom6628vor 9 Jahren

I have used mkdocs! Very cool. I actually used it to produce a newsletter. SO much easier to write the whole newsletter in md and push it to "site" which we then published via email.

Thanks for writing it. Slick, simple, and delivers.

ArlenBalesvor 9 Jahren

Based on the title, I genuinely thought this was a site that hosted 30 second slideshows for hackers. Something like "Learn X in Y time".

zckvor 9 Jahren

I have a similar project, but for presenting org files inside of Emacs: https://bitbucket.org/zck/zpresent.el .

The benefit is that it's org files, so you have all your standard org features, like easily adding new items and reordering things. It also, unlike other org presentation modes, presents from inside Emacs.

jsnathanvor 9 Jahren

Another simple tool of this kind to try out is Marp [1]. It has a live preview, and slides are exported to PDF.

[1]: https://yhatt.github.io/marp/

poptartmanvor 9 Jahren

Forgive me if it's obvious, but I'm new to programming and I'm trying to understand how this works.

I've been looking through the github repo for a while now and I can't find the code that is responsible for parsing the markdown syntax into the html tags which are rendered on the page. Can someone point me to where that logic is occuring?

grzmvor 9 Jahren

Cleaver uses the marked library for markdown processing. The conversion happens in renderSlide:

https://github.com/jdan/cleaver/blob/master/lib/index.js#L27...

  /**
   * Renders a slide.
   *
   * @param {string} content Markdown content to be rendered as a slide
   * @return {string} The formatted slide
   */
  Cleaver.prototype.renderSlide = function (content) {
    return marked(content);
  };

prezjordanvor 9 Jahren

grzm covered it well! But let me know if you have any other questions or are generally curious about how the code is structured. I learned a lot myself while writing it.

I'm @jdan on twitter if that's a better avenue for you (DMs are open)

blipmusicvor 9 Jahren

Md slides day? Nice to see another option. I use Keynote/Powerpoint only if I absolutely have to nowadays (collaboration). The simplicity of plain text -> slides really speaks to me.

Here's another: https://remarkjs.com/

There are even commercial apps, such as Deckset (macOS).

thesephistvor 9 Jahren

I wrote something like this when I was in high school because I got tired of powerpoint being hard to work with across platforms (Linux...). I ended up using it for a couple class presentations, which I enjoyed because it forces you to focus on content vs. unnecessary style and it's just a URL to link to instead of a maybe-compatible .pptx.

HTML based, styled with CSS. Not quite markdown, but a parser would be quick to make, I guess? https://github.com/thesephist/tesseract

dogasvor 9 Jahren

Since it appears to be markdown slides day on HN, I am getting close to releasing a beta of Ultradeck (https://ultradeck.co). Currently the marketing site mentions that Ultradeck is a desktop app, but I have since pivoted and it will be a webapp. I am targeting a beta launch next month!

zoom6628vor 9 Jahren

I really like this. Have messed with the other forms of this approach over the years but this looks like the simplest. My need is to create a tool that makes easier for people to quickly throw together presentations from some boilerplate and some code, screenshots, links etc. This looks like 80% of what i need. For anything more sophisticated i would use mkdocs which i already use. BTW i prefer to use typora for my md editing. Its (so far) the nicest tool with which to work in md directly on windows. I use MOU on osx, and downloading macdown today.

pathsjsvor 9 Jahren

If you want a little more customizability, make sure to try https://www.madoko.net/

jtrafficvor 9 Jahren

This is rad! I got so excited about reveal.js and webslides recently (http://lab.hakim.se/reveal-js/#/ and https://github.com/webslides/WebSlides) but this is superior in my view because of Markdown.

prezjordanvor 9 Jahren

For what it's worth reveal.js supports markdown (https://github.com/hakimel/reveal.js#markdown) so be sure to give it another look

accordionclownvor 9 Jahren

moreover, it's had a web-based editor for years now...

> https://slides.com

i think it started out being free for everybody, but now a free account is available only for public slide-decks. (when it was free for everyone, i think all decks were public, so it's not as if they ripped back functionality.)

obowersavor 9 Jahren

Another option in this space:

https://github.com/regebro/hovercraft

Always liked hovercraft as it makes impress.js much more usable. Will have to properly kick the tires on Cleaver

MaxLeitervor 9 Jahren

Hovercraft doesn't seem to work on mobile.

diminotenvor 9 Jahren

It's funny, another thing like this just showed up on /r/programming: https://github.com/gitpitch/gitpitch

sleepychuvor 9 Jahren

Neat, might give this a try next time I need to do a presentation.

Presently I use tex for this.

sametmaxvor 9 Jahren

Jupyter, does this, but better IMO. Not only you can create slide shows with markdown, but the code is executable and include code completion when your write it.

magic_beansvor 9 Jahren

This looks awesome! Clean and easy. I like it!!

juanpabloajvor 9 Jahren

http://platon.io/

anotheryouvor 9 Jahren

put some keywords in the title, I'll never find that bookmark again...

kiflayvor 9 Jahren

for some reason it is not working for me. I run "cleaver Desktop/{Name}/Presentation/testCleaver.md" but i can't see the basic.html output

eptcykavor 9 Jahren

What has this got to do with hackers?

prezjordanvor 9 Jahren

(a) It's markdown (b) I was 19 years old when I came up with that subtitle

blkhawkvor 9 Jahren

I would try it but I am anti-node - sad

MildlySeriousvor 9 Jahren

What's your preferred alternative for tooling around JS and frontend development?

blkhawkvor 9 Jahren

well this example has very little front end and shouldn't need much of a back end to sync data between systems that want to access it. If i were to build something like this i would go with a very limited stack - say only jquery and some js libraries in front end. The back end would be a couple of dozen lines of code that does nothing but use a sqlite instance to store the slideshow data. the front end would be local first and store its data in local storage.