Learn 11ty, Browserify and Cloudinary

Learn how to make flexible customized Twitch Scenes using the static site generator Eleventy (11ty), CSS, and ComfyJS.

Throughout this course, you'll create scenes for preshow, host, and main desktop display streaming purposes. Using ComfyJS, we'll add embedded chat and be able to create responses to chat commands. Finally, we'll see how to actually setup the scenes in OBS to prepare to use them for your stream.

Bonus: you'll learn a bit more about CSS grid layout, and also the "cicada principle" to be able to show the commands randomly across the scene!

Eleventy was created to be a JavaScript alternative to Jekyll. It’s zero-config by default but has flexible configuration options. Eleventy works with your project’s existing directory structure.

Eleventy uses independent template engines. We don’t want to hold your content hostage. If you decide to use something else later, having your content decoupled in this way will make migration easier.

11ty

Develop Custom Twitch Scenes and Setup in OBS

Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

gulp

Building upon the `watch` task that we begin this lesson with, we’ll look at how to create a local development server using the `app` directory as the web root. By using Browsersync to achieve this, we can also instruct all connected browsers to automatically reload each time our bundle is re-generated. Browsersync has a public `.stream()` method that is designed exactly for this purpose.

Gulp and Browserify - Adding Live Reload with Browsersync

Babel has support for the latest version of JavaScript through syntax transformers. These plugins allow you to use new syntax, right now without waiting for browser support.

babel

What is already a nice workflow using Gulp, Browserify, Watchify & Browsersync to enable auto rebuilds & live browser reloading can be further improved by adding Babelify. A simple wrapper around the popular transpiler Babel, Babelify can ‘transform’ source files as they pass through our stream to enable certain Javascript features not yet available in the Browser or Node. We end the lesson by looking at how to generate & extract sourcemaps using `exorcist`.

Gulp and Browserify - Adding Babel & Source Maps

Browserify lets you require('modules') in the browser by bundling up all of your dependencies.

browserify

Let's look at the basics of setting up Gulp and Browserify. Creating a Gulp task from scratch, we'll cover how to utilise the Browserify API to generate a single `bundle.js` file, catch and log any errors that occur in the compilation process, transform the stream into a format that can be consumed by `gulp.dest` and finish by writing the bundle to a `dist` directory.

Gulp and Browserify - Initial Setup

Beginning with a single Gulp task capable of generating a one-time Browserify bundle, we enable file-watching and incremental rebuilds by incorporating Watchify. We add a second task `watch` & refactor our initial code to enable the bulk of it to be re-used. We’ll look at exactly how to ‘wire’ these tools together and how the relationship between Watchify & Browserify can manifest into a seriously efficient workflow.

Gulp and Browserify - Hooking up Watchify

Our Twitch Scenes will use the static site generator Eleventy (11ty) to leverage templating features for creating the scenes. This lesson covers the base project which is available in the project repo under `/lessons/00-base`.

This lesson includes templating for the stream details and initial styling of the details section within the scene layout. The primary templating language in use is [Nunjucks](https://mozilla.github.io/nunjucks/templating.html).

Setup Eleventy Project for Creating Twitch Scenes

cloudinary

Media is an important part in creating a good UX for potential customers of your store, but when serving large unoptimized images, you can end up giving them a poor experience with long page loads.

We can instead use Cloudinary to automatically optimize our images and resize them on the fly with Cloudinary's programmable media API to deliver a more performant online store.

* [Cloudinary URL-Gen for JS - cloudinary.com](https://cloudinary.com/documentation/sdks/js/url-gen/index.html)

Optimize Media with Cloudinary to Deliver Smaller and Performant Images

🚨The Cloudinary UIX has been deprecated. If you are using it, you need to replace it with the App. [Here](https://hygraph.com/docs/guides/integrations/connect-cloudinary#migration) is a step-by-step guide on how to do it. 🚨

We will take an existing UI extension, Cloudinary, clone it down, and create our own instance, installing it into our GraphCMS content editor. Once we add that Cloudinary asset as a field, we will select those images directly from our Cloudinary account and serve those images right inside of our app.

Add and Configure Cloudinary UI Extension to Add Images From a Cloudinary Media Library

strapi

To be able to render images in our markdown files, we are going to use Cloudinarly's provider on Strapi. In the Marketplace in our app on Strapi, we can copy the install command and use it in our app. `npm install @strapi/provider-upload-cloudinary`. 

In our `config` folder, we will create a new `plugins.js` file and past in some code. (You'll be able to snag that from the github link below). We'll also setup our `env` folder for our cloudinary variables. 

Search

Search Results