Learn Babel, Parti-corgi and Sequelize

An inclusive community of content creators helping each other grow.

parti-corgi

How to Livestream Code and Design on Twitch

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

Converting all of our modern JavaScript into ES5 compatible syntax is a great way to use modern features while targeting older browsers. What happens when the browsers natively support these language features? Then it no longer makes sense to transform that code or to include polyfills that will go unused. In this lesson, we’ll add the `@babel/polyfill` package and configure `babel-preset-env`

Target specific browsers with babel-preset-env and the babel pollyfill

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

We take the opengraph image we wrote in codesandbox and copy it into our serverless function. We use Rollup to compile the component into an IIFE (immediately invoked function expression) that can run in our headless browser environment and cover a wide set of rollup plugins that we need for compatibility. We end the lesson having successfully screenshot our opengraph react component from our Netlify Function

Compiling a React to an IIFE with Rollup to execute and render in a headless browser

Many streamers use colorful banners on their stream pages that reflect their branding. Here's how you can create and use them.

* [Panel Maker](https://nerdordie.com/resources/free-resources/customizable-twitch-panels/)

Creating Panel Banners on Twitch

A short look at what I do before I change from my "Starting Soon" scene to my "live scene" and a brief overview of what to except from the collection

Introduction to Livestreaming

We cover some of the twitch interface and open a twitch account

Starting a Twitch account to livestream

We introduce OBS and compare it to SLOBS, download and set up our first scene including desktop capture and audio tips.

Introduction to OBS and creating your first scene

We cover how to get your stream key, how to use that stream key to test bandwidth and CPU usage settings, and go live on Twitch for the first time.

Going live on Twitch for the first time and testing bandwidth

While there are many useful tools and toys to pull together for a livestream, the truth is you don't need any of them to start.

What gear do I need to livestream?

It's likely that you will have many streams where no one is there, or people are there and they aren't telling you they are. Does it matter?

What if nobody comes to watch my livestream?

https://www.elgato.com/en/gaming/stream-deck

What is a Streamdeck?

[Streamlabs](https://streamlabs.com/) has two major halves: Streamlabs OBS, which is an OBS competitor, and Streamlabs-the-SaaS, which includes tools like chatbots, polls, giveaways, and loyalty rewards.

WTF is Streamlabs?

We can write our package using the latest JavaScript syntax with a compilation step. In this lesson we will install `babel-cli` and `babel-preset-latest` and wire up a `build` script to compile our code using the babel “latest” preset when source files change. This means those using our package can use it in any version of JavaScript even though we are using the latest syntax for our source code.

Set up compilation of source code using babel with npm scripts

Sequelize is a promise-based ORM for Node.js and io.js. It supports the dialects PostgreSQL, MySQL, MariaDB, SQLite and MSSQL and features solid transaction support, relations, read replication and more.

sequelize

Sequelize attribute getters and setters are a convenient way to encapsulate extra logic for model properties. In this video, we'll cover adding getters and setters to enhance and even virtualize a column.

Sequelize: Getters, Setters and Virtual Columns

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

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

Models in the Node.js ORM, Sequelize, can be expanded with both class level and instance level functions. This video will show you how to extend your models to add helpers or business logic, and explain the methods execution scope.

Sequelize: Class & Instance Methods

Babel is a compiler that lets us right future JavaScript not yet fully in browsers (ES6 / ES2015, ES7 / ES2016, etc) and transpile it back into code that can be used now. We'll walk through installing babel, writing some future JS syntax, transpiling it, and running it in a browser.

**This lesson is out of date and uses an older version of Babel.**

Writing next generation JavaScript with Babel 5 (out of date)

Javascript and database systems tend to be at odds with regard to how tables and columns should be named. Sequlize provides all the tools necessary to satisfy naming conventions in both your Node.js code and in your SQL database.

Sequelize: Model & Column Casing

Webpack loaders are how you tell webpack to resolve your dependencies and you can use a loader built for the babel transpiler to easily enable ES6 code in your project. Full sourcemap support is also available using webpack's devtool property.

Webpack Loaders, Source Maps, and ES6

In this lesson, we’ll install Babel and use it from the terminal to see how it can take JavaScript that uses modern language features and output JavaScript that will run in down-level browsers.

Transform Modern JavaScript Features with Babel

webpack is a tool to build JavaScript modules in your application. To start using webpack from its cli or api, follow the Installation instructions. webpack simplifies your workflow by quickly constructing a dependency graph of your application and bundling them in the right order. webpack can be configured to customise optimisations to your code, to split vendor/css/js code for production, run a development server that hot-reloads your code without page refresh and many such cool features.

webpack

In this lesson, we'll configure webpack to use the Babel loader for our JavaScript files, allowing us to transpile our source files and generate a bundle for deploying our application.

Topics

Instructors

Content Type