making a slideshow in html

and css and javascript and all that jazz

Carston Wiebe
2025.01.31

what do you need to know?

HTML

Hypertext Markup Language
Contains all the content of the page
Lots of langle rangles

<section>
  <ul>
    <h3>HTML</h3>
    <li>Hypertext Markup Language</li>
    ...
  </ul>
</section>

CSS

Cascading Style Sheets
Describes the style of the page
Extremely ugly-looking

body > nav a {
  text-decoration:none;
}
body > nav a::hover {
  text-decoration:underline;
}
body > nav a + a::before {
  content:' • ';
  color:var(--text);
}

JAVASCRIPT

Just A Very Asinine Stupid Codebase Really It's Painful Too
Causes every bug on the page
Well-deserved reputation

if (document.readyState !== 'loading') {
  main();
} else {
  console.warn('js loaded early');
  document.addEventListener(
    'DOMContentLoaded',
    main
  );
}

personal quirks

XHTML5

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="CONTENT-TYPE" content="application/xhtml+xml; charset=UTF-8" />

pre and post js

<script type="text/javascript" src="./index.xhtml.pre.js"></script>
<script type="text/javascript" src="./index.xhtml.post.js" defer=""></script>

Locality of Behavior
Dark mode

<meta name="color-scheme" content="light dark" />

html format

How do we represent a slideshow?
- header for title slides
- section for normal slides
- footer for ending slides
- h2 as slide headers
how do we make it look good?

<header>
  <h1>making a slideshow in html</h1>
  <h2>and css and javascript and all
    that jazz</h2>
  Carston Wiebe
  <br />
  <time>2025.01.31</time>
</header>
<section>
  <h2>html format</h2>
  <ul>
    <li>How do we represent a
      slideshow?</li>
  </ul>
</section>

css reset

By default, everything looks bad
More importantly, everything looks bad differently
How do we make it our own version of bad?

But what about columns…

* {
  box-sizing:border-box;
  padding:0px;
  margin:0px;
}
table {
  border-collapse:collapse;
}
a {
  text-decoration:none;
}
html {
  font:14pt Sarala;
  color:#eeeeee;
  background-color:#222222;
}

css grid

Enter display:grid
Makes it very easy to design reactive websites
Similar to table or display:flex

section {
  display:grid;
  gap:16px;
  grid-template:
    "hed hed hed hed hed hed" auto
    "nop c11 c11 c11 c11 emp" auto
    "nop c21 c21 c22 c22 emp" auto
    "c31 c31 c32 c32 c33 c33" auto
   / 1fr 1fr 1fr 1fr 1fr 1fr;
}
section > * {
  grid-area:c11;
}
section > h2 {
  grid-area:hed;
  text-align:center;
}

*.c21 { grid-area:c21; }
*.c22 { grid-area:c22; }
*.c31 { grid-area:c31; }
*.c32 { grid-area:c32; }
*.c33 { grid-area:c33; }

other things

two options for syntax highlighting

Write a syntax highlighter yourself and add support for every language you want to use
Download a cursed 'dependency' (prism.js)

<link type="text/css" rel="stylesheet" href="./deps/prism-tomorrow-night.min.css" />
<script type="text/javascript" src="./deps/prism.min.js" defer=""></script>

adding custom fonts

Download a .TTF, .OTF, or .WOFF file
Initialize it in CSS

@font-face {
  font-family:Sarala;
  src:url('./fonts/Sarala-Regular.ttf');
}

no one wants to see the whole slideshow at once!

By default, hide all the header, section, and footer elements in CSS

header, section, footer {
  display:none;
}
*[data-open] {
  display:grid;
}

Add some event listeners to your HTML:

<body onload="changeSlide()"
      onclick="changeSlide()"
      onkeydown="changeSlide(event)">
</body>

Commit some javascript

function changeSlide(event) {
  if (!event) {
    nextSlide();
  } else {
    switch (event.keyCode) {
      case 32:  // Space.
      case 39:  // Left.
      case 74:  // j.
        nextSlide();
        break;
      case 8:   // Backspace.
      case 37:  // Right.
      case 75:  // k.
        prevSlide();
    }
  }
}