How to Present Like a CS Pro

A few weeks ago, I saw this in CS3211:

They use a series of code in slides

We all need code

in tech talks some time.

But presenting with code is hard.

But presenting with code is hard.

Screenshots?

But presenting with code is hard.

Updating screenshots is troublesome.

But presenting with code is hard.

Updating screenshots is troublesome.

Just type out the code?

But presenting with code is hard.

Updating screenshots is troublesome.

Formatting is painful and slow.

Is there a way to present like a CS Pro?

HTML Presentation Framework

Roadmap

  1. What is Reveal.js?
  2. Benefits of Reveal.js?
  3. Limitations of Reveal.js?

What is Reveal.js?

A framework that creates an HTML file that can be displayed on any device with a web browser.

Really really easy.

Key point 1:

Reveal.js lets you spend more time on content, less on styling.

What is Reveal.js?

Key Point 1:

Reveal.js lets you spend more time on content, less on styling.

1. You do not need to care about formatting:

in-built / customizable themes, smooth transition

2. Markdown support makes version control easier.

<section data-markdown>
  <textarea data-template>
    ## Slide 1
    A paragraph with some text and a [link](https://hakim.se).
    ---
    ## Slide 2
    ---
    ## Slide 3
  </textarea>
</section>

Key Point 1:

Reveal.js lets you spend more time on content, less on styling.

3. It supports presenter view (just press S)

Key Point 1:

Reveal.js lets you spend more time on content, less on styling.

easy formatting (inbuilt themes)

+

easy content creation (markdown)

+

essential presenter features

 

=

just focus on content

Benefits of using Reveal.js?

Key point 2:

Reveal.js is optimized for developers presenting technical content.

Benefits of using Reveal.js?

It presents code REALLY REALLY nicely and easily.

Key point 2:

Reveal.js is optimized for developers presenting technical content.

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
    );
}

1.It presents code nicely:

Copyable code invites audience to try it

Key point 2:

Reveal.js is optimized for developers presenting technical content.

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
    );
}

function SecondExample() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
    );
}

1.It presents code nicely:

No more separate screenshots for loooooong code

Key point 2:

Reveal.js is optimized for developers presenting technical content.

int flag = 0;
int a = 0;
int b = 0;

void test1()
{
  a = 1;
  b = 1;
  flag = 1;
}

void test2()
{
  std::cout << "init a: " << a << std::endl;
  std::cout << "init b: " << b << std::endl;

  while(flag == 0) {}

  std::cout << "final a: " << a << std::endl;
  std::cout << "final b: " << b << std::endl;
}

// Highlighting the relevant lines only

1.It presents code nicely:

Help audience stay focused

Key point 2:

Reveal.js is optimized for developers presenting technical content.

Key point 2:

Reveal.js is optimized for developers presenting technical content.

2. Vertical slides makes presentation structured.

Key point 2:

Reveal.js is optimized for developers presenting technical content.

2. Vertical slides makes presentation structured. 

<section>Slide 1</section>
<section>
  <section>Slide 2.1</section>
  <section>Slide 2.2</section>
</section>
Microsoft
PowerPoint		 Google slides LibreOffice
Impress		 Impress.js Reveal.js
Ownership & shareable With effort ✅ ✅ ✅ ✅
Open Source ❌ ❌ ✅ ✅ ✅
Offline ✅ ❌ ✅
(PDF)		 ✅
(local html)		 ✅
(local html & PDF)
Format hassle free ❌ ❌ ❌ ✅
(use hovercraft)		 ✅
(many ways)
Appealing With effort With effort With effort Somewhat ✅

3. It is better than competitors.

Key point 2:

Reveal.js is optimized for developers presenting technical content.

Key point 2:

Reveal.js is optimized for developers presenting technical content.

Impress.js Reveal.js
Offline Only supports local html Supports local html AND PDF export
Appealing Somewhat (impress.js.org)








  		More modern (revealjs.com)
Popularity

3. It is better than competitors.

Key point 2:

Reveal.js is optimized for developers presenting technical content.

4. It has many open source plugins - reveal-run-in-terminal

Key point 2:

Reveal.js is optimized for developers presenting technical content.

4. It has many open source plugins - simplemenu

Limitations of Reveal.js?

Key point 3:

Reveal.js is not a good fit for non-developers and complex design.

Limitations of Reveal.js?

  • Not ideal for cross-functional collaboration with non tech people
    • Target user: programming experts like you
  • Takes long to customize slides
    • Steeper learning curve than click-and-see style
    • Its most common use case is minimalistic but content-heavy presentations

Key point 3:

Reveal.js is not a good fit for non-developers and complex design.

  • But it has a freemium online editor Slides.com with many templates.

Key point 3:

Reveal.js is not a good fit for non-developers and complex design.

How to Present Like a CS Pro

Key point 1: It lets you spend more time on content, and less on styling.

• In-built themes, Markdown support, Vertical slides

What is Reveal.js?

It is an open source HTML presentation framework that enables anyone with a web browser

to create fully-featured and beautiful presentations for free.

Key point 2: It is optimized for developers presenting technical content.

• Presents code well

• Powerful plugins thanks to strong open source community

Key point 3: But it's not a good fit if you need cross-functional collaboration and complex styling.

• But it has an easy-to-use online editor.

• It is not for everyone but for you.

Zhang Ziqing  zhangziqing@u.nus.edu

As a tech expert, presenting with code is hard but often necessary.

How to Present (Feeling) Like a CS Pro

Key point 1: It lets you spend more time on content, and less on styling.

• In-built themes, Markdown support, Vertical slides

What is Reveal.js?

It is an open source HTML presentation framework that enables anyone with a web browser

to create fully-featured and beautiful presentations for free.

Try Reveal.js for your next tech talk! @revealjs.com

Key point 2: It is optimized for developers presenting technical content.

• Presents code well

• Powerful plugins thanks to strong open source community

Key point 3: But it's not a good fit if you need cross-functional collaboration and complex styling.

• But it has an easy-to-use online editor.

• It is not for everyone but for you.

Zhang Ziqing  zhangziqing@u.nus.edu

As a tech expert, presenting with code is hard but often necessary.

Extra slide for grading:

  • Intended Impact: Know what is Reveal.js.Believe Reveal.js is cool and useful. Try Reveal.js in next technical talk.
  • WIIFY: It is hard but often necessary for developers to present technical content using code.
  • Key points:
    • 1. Reveal.js lets you spend more time on content, and less on styling.
    • 2. It is optimized for developers presenting technical content
    • 3. But it's not a good fit if you need cross-functional collaboration and complex styling.
  • CTA: Reveal.js is cool and useful. Let's try Reveal.js for your next technical talk!
  • Roadmap:
    • 1. What is Reveal.js?
    • 2. What are the benefits of Reveal.js?
    • 3. What are the limitations of Reveal.js?
  • PUNCH:
    • A few weeks ago I saw long chunks of code in my CS3211 lecture and was frustrated with the format. I realize it is really hard to present code well in slides.
    • After my last presentation on Reveal.js, it was heartening to see many of us have used it in their lightning talks. Today, this talk comes back with more content, to convince you that Reveal.js is cool and you should give it a try.