reveal.js is pretty awesome. I have been using it for the last 9 months now and love it. It was a bit of hassle to set it up initially. Once you have an example, yo can replicate and be productive by copying and pasting existing one, and getting a consistent look and workflow. And the results? amazing.

    To create a new presentation

    The easiest way to create a new slides for your topic is to copy an existing folder, eg. netbox, and make modifications to your contents.

    Each folder should have the following contents:

    ├── images
    ├── index.html
    ├── my.css

    Only index.html and .md are essential. index.html is the overall HTML shell that will be loaded by browser, and .md are slide contents that will be converted from Markdown into HTML and included in index.html. You can split your contents into multiple .md files, which we will cover in more details next.

    my.css is used to make customized CSS change per each deck. There is also a common which determines the overall look (as default look). Both are included in index.html. Of course you can include/modify other CSS as your wish in index.html, just like any other web page programming.

    <!-- My css -->
    <link rel="stylesheet"
    <link rel="stylesheet"


    index.html is the entry point for browser. There are a few places you would like to update to match your topic and contents:

    1. <title>: the text shown as page title on a browser.
    2. <meta name="description" content="<>">: description text is useful when page is picked up by search engine.
    3. <meta name="autho" content="<>">: author names
    4. <p class="copyright">...</p>: your copyright text.

    slide contents

    Slide contents are written in Markdown in separate files, eg. To include a markdown file into slides:

    <section data-markdown=""  

    You can include multiple .md files in a single presentation. This gives you flexibility to organize contents into reusable chunks and present them in different combinations based on audience.

    1. data-markdown: Markdown file to include.
    2. data-separator: this is essentially a page break in Markdown file.
    3. data-vertical: contents separated by this will be included on the same page, but will be showns as vertically stacked contents, one at a time (like a sub-page).
    4. data-notes: mark the start of presenter notes. These notes are visible to presenter, but not to audience.


    1. You can follow the official guide by reveal.js.
    2. Or, using the desktape: decktape reveal <url> <filename>.pdf

    — by Feng Xia


    Dev structure

    If the Bible story happens today

    This is a common question any team/project will have to address — how to structure the knowledge we know of...

    Pandoc workflow

    Pandoc is awesome. I have been using it for the last six months now writing a reference architecture document for work. Here is some...

    Browser proxy

    This is a common trick. Say we have local machine (A), and a remote machine (B). If we can SSH from A→B, we can reroute browser traffic from A to B, much quicker than X-windows.