Spectacle Presentation Deck

This past Saturday I presented at React Camp, which was a part of Open Camps NYC. I used a presentation deck called Spectacle, created by Formidable Labs. I chose to use the Spectacle boilerplate because of its flexibility. What was so cool about Spectacle is that it is written with React. The presentation went really well. The slide deck looked great. I (and others) had been concerned that my font would not be large enough, but there was totally no problem there. Everything was blown up beautifully.

Everything went swimmingly, but the creation of the presentation itself was not so smooth. The day I found out that my presentation had indeed been accepted was the day I got really sick. But I was deternmined to present and to get well by Saturday. I spent the whole week in bed writing and trying to acquaint myself with Spectacle V4, which had just been released. I was probably the only person who was imminently presenting using V4 lol!

I finally finished the presentation late Thursday evening. I made sure that all my changes were committed. I pushed it to surge.sh, but the deployment failed. I did it several times, and it continued to fail. Then I realized that I had forgotten to run a build. I ran the build, and then something very strange happened. When I copied and pasted the url I was given, I was redirected to a youtube video! I tried again, and was presented with:

friends-io-surge

Then I went to visit my repo on Github, and this is what I saw:

Security Vulnerability

This is a new feature on Github. It’s called security alerts.

Github Repo Dependency Graph

In fact, the day I completed my presentation was the day Github wrote a post announcing the release of this new feature. They enabled dependency graphs on all Github repositories, which permits Github to notify the owner of the repository when they detect a vulnerability in a dependency and (purportedly) suggest known fixes from the Github community. (I did not receive any suggestions from Github.) Public repositories will automatically have their dependency graphs enabled. For private repositories, however, you need to opt in to security alerts in your repository settings or by permitting access in the dependency graph section of your repository’s insights tab. To learn more, please visit Introducing security alerts on GitHub.

it was the middle of the night, I didn’t know what this all meant, and went into a panic. There was no suggestion what to do. Just reference to a tar. I was still trying to get to know Spectacle, I was not feeling well, and I needed to deploy my project!

First I created two issues on the Spectacle repo. But then I realized that probably no one would respond there immediately. So I reached out to Ken Wheeler, the creator of Spectacle, on Twitter. He checked out the situation, figured out which dependency was causing the vulnerability (surge.sh), and told me to uninstall it and push the changes to Github. The security alert disappeared. So if you are using V4 of the Spectacle presentation deck and end up with a security alert, remove the surge dependency. Package name and version details can be found in your package.json file. I ended up using gh-pages for deployment instead.

I committed my changes, created a new gh-pages branch, and checked out into it with git checkout -b gh-pages. Then I pushed to remote with git push -u origin gh-pages and went to see what the published site looked like. My images weren’t showing up.

I have to say that I only quickly glanced over Spectacle’s webpack configs, and just went with what I usually would do with my own custom configs. This is what I did:

I placed my images in the Spectacle assets directory.

Then I created an index.js file where I exported all my images so I could import them into index.js in the presentation directory. It looked like this:

export GetAngular from "./GetAngular.png";
export XHP from "./XHP.jpg";
export markDormRoom from "./markDormRoom.jpg";
export XSS from "./XSS.png";
export JSX from "./JSX.png";

Next I imported those images into index.js in the presentation directory like so:

// Import images
import GetAngular from "../assets/GetAngular.png";
import XHP from "../assets/XHP.jpg";
import markDormRoom from "../assets/markDormRoom.jpg";
import XSS from "../assets/XSS.png";
import JSX from "../assets/JSX.png";

And in the body of the presentation, I interpolated the image variable(s) like so:

<Image src={GetAngular} />

Of course it didn’t work out of the box as it did with my own configs because there was no explicit creation of an image path in the Spectacle webpack production config. In addition, the url-loader was used in both the webpack dev config AND the webpack production config. Still not quite sure why they went that way, but that is why my set up initially didn’t work.

So I took my chances and reached out to Ken again on Twitter. After a few attempts at trying to get through to my thick skull with a fix, I finally caught on, and this is what I had to add to my webpack.config.production.js under loader: "url-loader?limit=8192", to make my configuration work:

options: {
    useRelativePath: true
}

That was it! Worked like a charm.

It will be interesting to see what exactly is generated on build in terms of images when I create my next presentation. Right now I know that one of the sets of images in my dist directory should not be there. Perhaps I’ll create a dummy presentation when I have a moment to find out and then add the updated information here.

I will most definitely be using this slide deck again. It was amazing. AND Ken Wheeler was amazing. As I stated on Twitter several times after,

I found out from Ken that his wife was giving birth during this time. It turned out to be a girl! YES! AMAZING.

What a wild week it was.

Related links:

Introducing security alerts on GitHub

Spectacle on Github

Evolution in Design and Development on Github