Learn Babel, Gulp and Jekyll

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

**Note**:  Due to Netlify changing their handling, the path in `fs.readFileSync` is affected. Update to:
```js
const script = fs.readFileSync(path.resolve(__dirname, "image.js"), "utf-8");
```

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

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

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.

Configure webpack to Load JavaScript Files through Babel with babel-loader

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

We transpile our JavaScript code so we can use modern language features, even if browser support isn't quite where we need it to be. This includes proposed features that aren't yet part of the official language specification. In this lesson, we'll see how we can support the proposed class property syntax for JavaScript with a Babel plugin.

Support Proposed JavaScript Features with Babel Plugins

One approach to building high performance applications with `webpack` is to take advantage of code-splitting to only load the needed JavaScript on initial load and asynchronously load additional JavaScript bundles when needed. In this lesson, we'll create add some code-splitting to our placeholder application and configure our project to support the dynamic `import()` syntax.

Asynchronously Load webpack Bundles through Code-splitting and React Suspense

In this lesson, we'll add React and ReactDOM to our project and create an entry point for the React application. We'll also configure Babel with the React preset so Babel can transpile our JSX into JavaScript that will run in a browser.

Configure babel for React with preset-react

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

Jekyll is a parsing engine bundled as a ruby gem used to build static websites from dynamic components such as templates, partials, liquid code, markdown, etc. Jekyll is known as "a simple, blog aware, static site generator".

jekyll

[Jekyll](https://jekyllrb.com/) is a static site generator built in [Ruby](https://www.ruby-lang.org/en/) and available to generate and host websites on [GitHub Pages](https://pages.github.com/). In this course, you'll install the Jekyll gem, use the command line tool to generate a new project, inspect the scaffolded project, and finally, serve the starter website.

Install Jekyll and generate initial, scaffolded website

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

We will look at bundling your JavaScript files using Gulp, Gulp-Concat, and Gulp-Uglify

Bundling Your JavaScript Files with 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

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

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

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

A brief introduction to using GulpJS in your JavaScript application and creating your first Gulp task.

Installing and Writing a Default Task with Gulp

<p>Henry Zhu is currently a steward for Babel, and today he'll be discussing the management and lifestyle side of working on an open source project full-time.</p><p>The financial side to open source is interesting. Henry talks about where he gets his money and how he can be financially independent while still working on open source full time. Most of the money comes from donations through Open Collective and Patreon. A lot of the donations come from users, but corporations do donate as well. Henry also discusses the stability of it, and how the NPR model of asking for donations can lead to uncertainty about the next month.</p><p>Henry says he's enjoying the management and marketing side of being a steward about as much as he enjoys coding. It's a side that people don't often think about with open source. This side of it includes a lot of marketing and interacting with the greater community, as well as the other maintainers and contributors to babel.</p><p>How does Henry handle all this responsibility when there is no one above him telling him when to take a break, or when to go on vacation? Henry and Joel talk about having a positive "selfishness", and taking care of yourself so that the project can prosper. If you want to be doing it for years you have to make sure that you don't burn out.</p><hr /><h3>Transcript</h3><p><a href="https://egghead.simplecast.com/episodes/henry-zhu/transcript">"Henry Zhu, Maintainer of Babel" Transcript</a></p><h3>Resources:</h3><ul><li><a href="https://babeljs.io/">Babel</a></li><li><a href="https://www.amazon.com/Power-Habit-What-Life-Business/dp/081298160X">The Power of Habit</a></li><li><a href="https://www.amazon.com/You-Are-What-Love-Spiritual/dp/158743380X">You Are What You Love</a></li><li><a href="https://www.tinyhabits.com/">Tiny Habits</a></li><li><a href="https://kaidavis.com/articles/">Kai Davis</a></li></ul><h3>Henry Zhu:</h3><ul><li><a href="https://twitter.com/left_pad?lang=en">Twitter</a></li><li><a href="https://www.henryzoo.com/">Website</a></li><li><a href="https://github.com/hzoo">Github</a></li><li><a href="https://www.patreon.com/henryzhu">Patreon</a></li><li><a href="https://opencollective.com/babel#">Open Collective</a></li></ul><h3>Joel Hooks:</h3><ul><li><a href="https://twitter.com/jhooks">Twitter</a></li><li><a href="https://joelhooks.com/">Website</a></li></ul>


Today, Henry Zhu, the lead maintainer of Babel, discusses what it's like to work on a large and important open source project. Henry gets into how Babel receives funding, how corporations are involved in open source, stewardship of an open source project, mental and physical health, and not compromising his values.  

Henry Zhu, Maintainer of Babel

AI is amazing for generating code, but often leaves us staring at functions and libraries we've never seen before. This creates a huge problem: When things break (and they will break), we're lost. We don't understand the individual pieces, let alone how they interact. Knowing one part isn't enough; we need to see how unfamiliar components work together.

The solution? Real-world examples.

This lesson introduces ghx, a tool I built to do exactly that. ghx searches GitHub, finding actual code examples that use the specific combinations of functions and libraries that are tripping you up. Instead of generic documentation, you get concrete implementations. You can find the ghx repository at https://github.com/johnlindquist/ghx.

Here's the workflow we cover:

Identify the Unknown: Pinpoint the AI-generated code you don't understand – specific functions, libraries, or their interactions.

Search with ghx: Use ghx to search GitHub for examples using those terms together. ghx finds repos where those elements co-exist.

Consolidate Examples: ghx combines the relevant code snippets from those examples into a single, digestible file.

Ask the AI (Again, but Better!): Feed this consolidated code to an AI (like a coding-focused model in an AI studio). Now, instead of asking general questions, you can ask targeted questions based on real-world usage:

"Explain how these functions are used together in these examples."

"What are some common use cases for this combination of libraries?"

"Show me alternative code snippets that achieve the same result."

"Can you identify potential problems or areas for improvement, based on these examples?"

Iterate. Use your improved understanding to make changes, and then repeat the process to debug.

By leveraging ghx and targeted AI prompting, we transform from being lost in a sea of unfamiliar code to actively learning from how others have solved similar problems. We gain a deeper understanding of our AI-generated codebase, making debugging, modification, and future development far more manageable. This gives you the tools to understand, debug and improve your own code.

John Lindquist

How to Work with AI-Generated Code You Don't Understand with ghx and Gemini

In this less we create a custom Zod schema using `z.custom`.

The example case covers room numbers validation: it must start with an uppercase letter followed by three digits. `z.custom` allows the creation of a brand new custom schema with a callback function that returns a boolean indicating validity.

We highlight a challenge with type inference in Zod's custom schemas: callback parameter types don't get aligned automatically - type-safety must be explicitly defined using type parameters.

We run tests against various room numbers and demonstrate how to effectively validate inputs and manage error messages.


Tomasz Ducin

Create Custom Zod Schemas and Validate project-specific data

Create custom validation logic in Zod using z.custom, for primitive values, ensuring type safety and proper error messages for room numbers.


Excessive properties refer to any additional attributes that are not explicitly listed in an object schema. When creating an object based on a schema, it is important to ensure that only the defined properties are included.

In TypeScript, if an object is created with an extra property that isn't defined in the schema, TypeScript will not raise an error unless the type is explicitly annotated. When the type is annotated, TypeScript will issue an error indicating that the extra property is not allowed.

Zod provides a strict utility to enforce similar checks. This feature ensures that only specified properties are allowed in an object schema. When unnecessary properties are added at both the top level and within nested schemas, Zod will throw errors indicating unrecognized keys.

Adding an unrecognized property to a Zod schema results in an error message that specifies which keys are not recognized. Applying strict checks on nested schemas ensures that all levels of the data structure are validated correctly.


Make Excessive Object Properties Fail on Zod Validation

Prevent excessive properties in TypeScript and Zod schemas using strict checks for better data validation

In this lesson we discuss how Zod works with TypeScript to handle special types like `undefined`, `null`, `any`, `unknown`, `never` and `void`.

We modify our room booking schema to demonstrate the use of `optional` and `nullable` Zod utilities.

By using `.optional`, we allow a property to be either its _original type_ or `undefined`. With `.nullable`, we allow it to be either its _original type_ or `null`. Finally, `.nullish` allows a value to be either its _original type_, `null`, or `undefined`.

For all cases, we run tests to show how these schemas work in practice, as well as how TypeScript infers types.


Declare Lack of Value in zod (optional, nullable and nullish)

use Zod for TypeScript schemas, including handling undefined, null, and special types like optional and nullable values, as well as any, unknown never and void

In this lesson we make use of partial validation of large and nested schemas in Zod.

Instead of creating many small schemas, which can complicate maintenance, Zod allows for the extraction of specific parts of a schema using the concept of ".shape". It "unwraps" the object schema, enabling access to sub-schemas within specific properties.

Additionally, we can use the `.unwrap` to get into element schemas of altered schemas such as `.optional` or `.array`.

Simplify working with complex schemas without the need to break them into hundreds of small schemas.

Use Zod Schemas partially using shape and unwrap

Manage large and nested Zod Schemas by extracting partial validations using shape and unwrap utilities

In this lesson we cover implementing sets and maps in Zod.

Using `z.set`, a schema for string-based amenities is created. We demonstrate how validation works by intentionally introducing errors and customizing error messages for better clarity.

Next, a map is created for existing guestDetails schema using `z.map`, with string keys and an existing `z.object`-based schema. The validation process is shown again by deliberately breaking the schema, such as omitting the age property, which triggers appropriate error messages.


Validate maps and sets using Zod schemas

Use sets and maps in Zod for schema validation, ensuring type safety for both keys and values.

In this lesson we'll use a few predefined schemas which will serve as constituents to create union and intersection schemas.

Three room booking schemas are defined: _single_, _double_, and _suite_. Each schema has slight differences in the structure.

The `z.union` utility is used to create a union of these schemas, allowing for validation against any of them. Type inference (using `z.infer`) for the room booking schema produces a union of object literals, exactly like in TypeScript.

We also create an intersection using `z.intersection`, combining room booking details with discount information.

These techniques enhance data validation and allow to make `zod` aligned even more with `TypeScript`.


Define Unions and Intersections with Zod

implement unions and intersections in Zod schemas for example domain related objects, enhancing TypeScript validation with clear examples

This lesson demonstrates how to provide runtime type-safety for arrays in TypeScript applications.

First we need to understand the challenges behind ensuring array type-safety in TypeScript. We explain how TypeScript infers arrays with an undefined length, making it difficult to guarantee that array accesses are safe.

Zod schemas provide the `z.array` to define arrays of various element types. 

We compare how utilities such as `.min`, `.max` and `.nonempty` get reflected in inferred TypeScript types, and how zod processes the validation.


Declare Precise Array Types within Zod Schemas

Provide array type safety in TypeScript using Zod schemas, including handling non-empty arrays for better validation

In this lesson we make string-based schemas more specific using Zod in TypeScript. We focus on defining allowed values for a room type, showing how to use literals and enums effectively.

Zod's `z.literal` method allows us to specify a single allowed value for a string schema. For example, if we want to define a room type as `"premium"` and make it backward-type-safe in TypeScript, we can use `z.literal("premium")` to ensure that only this value is valid.

`z.enum` lets us define a set of allowed string values. This is useful when we have multiple options for room types, like `"standard",` `"premium"` or `"childrenFriendly"`. 

`z.enum` creates a union of TypeScript-compatible string literals, making it easy to validate against multiple values. Zod enums can be used to extract or exclude specific values from the enum.

Finally, zod's `z.nativeEnum` a native enum creates an equivalent of TypeScript's native `enum` ("real enums", we could say).

We can validate against all these values just like we do with literals and enums.


Work with Zod Literals and Enums Effectively

Use Zod for string schemas in TypeScript, including literals, enums, and native enums for room type validation

In this lesson, we dive into the Zod's `refine` utility, allowing defining more complex schema validation **on top of existing schemas and utilities**.

Sometimes, we need special validation rules for our applications to work correctly. The `refine` utility lets developers create their own validation rules. This method's uses a callback to check if the input is valid. We also create meaningful messages when something doesn’t meet the validation rules.

We use a practical example involving a room booking schemawith `dueDate` and `price` property refinement.


Apply Schema Custom Refinement with Zod

Enhance your TypeScript validation skills with Zod's refine utility for custom room booking schemas, focusing on date and price validation.


Search

Search Results