Learn 11ty, Reason and Xstream

Eleventy, or 11ty,  is a simple yet very powerful static site generator. It does not require any config to get started.

This what it will take you to get an 11ty project running.

```
npm install -g @11ty/eleventy
echo '# Page header' > README.md
eleventy
```

After watching this collection you will be able to:

* Bootstrap a simple 11ty website
* Use 11ty layouts
* Chaining multiple 11ty layouts
* Use 11ty Collections
* Create pages from data

...and much more

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

Getting Started with Eleventy

This course foremost will teach you about the syntax and semantics of the programming language Reason or also referred to as ReasonML. In addition, the course touches on best practices recommended by the official documentation. Each lesson is focusing on a specific feature, concept or best practice and can be watched independently. Still, the whole course is carefully crafted, and each lesson builds up on the previous ones.

Simple, fast & type safe code that leverages the JavaScript & OCaml ecosystems.

reason

Get Started with Reason

Node.js is a well established server runtime that many companies are using worldwide. Express.js is a server framework for Node.js used by over 5 million projects. ReasonML is a type-safe functional language that compiles to Javascript.

This playlist collects the basic pieces of information a programmer needs to get started building servers in ReasonML on Node.js and Express.js. Follow along to learn how to get the speed of Node, combined with the added type-safety of Reason.

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

Making an HTTP server in ReasonML on top of Node.js

Ongoing playlist.

Don't be afraid to watch videos at 1.25x if the pace is too slow!

ReasonML Applications for the React Developer

Start from a blank project and build up to an Eleventy site that includes a blog collection and is prepared to source content from a headless CMS. You'll also learn how to add Sass as the styling solution, complete with triggering 11ty to re-compile when the Sass changes.

These lessons will help explain key 11ty features and concepts to help you make the most of this amazing static site generator.

By the last lesson, you'll have learned how to:
- define custom `input` and `output` directories
- create a layout that accesses front matter variables
- watch for Sass changes and include CSS in the build proces
- create an 11ty collection using `tags`
- define front matter for an entire collection
- make and apply a filter to a collection
- generate pages from an external data source, such as a CMS or API

Build An Eleventy (11ty) Site From Scratch

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

Throughout the last year, the use of React hooks has taken the world of web development. Hooks provide users with an easy way to handle interactivity within ReactJS applications, so it's no surprise that the latest release of the ReasonReact library makes great use of them. 

In this lesson, we'll get started using ReasonReact `0.7.x` by scaffolding out an application using the [BuckleScript](https://bucklescript.github.io/) command-line tool. Once scaffolded, we'll go through the steps needed in order to properly run our application within a development environment that is ripe for productivity!

### Resources
* [ReasonML Docs](https://reasonml.github.io/docs/)
* [ReasoNReact Docs](https://reasonml.github.io/reason-react/en/)
* [BuckleScript Docs](https://bucklescript.github.io/)

Up and Running with React Hooks inside of a ReasonML 

Any React developer will agree that 2019 was the year of that hooks took the library by storm. Luckily for us, the ReasonRect library makes it possible to hooks within the context of a ReasonML application.

In this lesson we will take a test drive of the `useReducer` hook within a ReasonML application. By the end, we'll have learned how to define our actions using variants, use records to shape our state, and more!

### Resources
* [ReasonReact Docs] (https://reasonml.github.io/reason-react/en/)
* [ReasonReact Blog - Support for hooks in 0.7.0 Release](https://reasonml.github.io/reason-react/blog/2019/04/10/react-hooks)



Use ReasonMLs Variant & Record types with ReasonReact's useReducer hook to Manage State

When working with traditional React, we often pass functional stateless components the `props` object as an argument. Although there are a few minor differences when working in the context of Reason, the act of passing `props` to a component is done in an extremely similar manner.

In this lesson, we will get a first-hand look at just how similar these processes are by walking through the steps of creating a React Component in ReasonReact. By the end, you'll have developed an understanding of ReasonReact's "named args" syntax which it uses for creating components and you'll have created a re-usable Layout component that can be used to share layout throughout an application.

### Documentation
* [ReasonReact Homepage](https://reasonml.github.io/reason-react/)
* [ReasonReact Docs - Components](https://reasonml.github.io/reason-react/docs/en/components)


Create a Layout Component for Displaying Child Components Inside of a ReasonReact App

One of the key benefits of BuckleScript is the ease in which it makes the process of porting JavaScript libraries so they can be used within the context of a ReasonML application. The Reason Package Index, or [redex](https://redex.github.io/), provides a central place for browsing all available packages. Additionally, creating your own BuckleScript bindings is a straight forward process that also provides value in the form of knowledge surrounding the inner-workings of the library at hand.

In this lesson, we learn how to integrate the emotion css-in-js libray into our project by installing the `bs-css` package. Once installed, we'll create a `.re` file for our style rules and see how we can add global css, as well as styles for specific css classes which we'll target using React's `className` prop.

### Link
* [ReasonReact Docs](https://reasonml.github.io/reason-react/docs)
* [`bs-css` - GitHub](https://github.com/SentiaAnalytics/bs-css)
* [`bs-css` - Redex](https://redex.github.io/package/bs-css)


Implement a Sticky Footer within a ReasonReact App Using the bs-css BuckleScript Package

ReasonML is a fantastic way to write Javascript! But it doesn't yet have a built-in async / await syntax. Furthermore the built-in libraries for working with Javascript promises are awkward to work with, and produce code that's hard to read. This lesson will teach the viewer how to use the "bs-let" language extension (called a PPX) to achieve readable, easy to write promise-based code.

Async / Await in ReasonML

Although ReasonML has built-in libraries for working with JSON, they are low-level and difficult to use by hand. The Decco library offers automatically generated JSON decoders, and produce a result that keeps the programmer safe at runtime by telling them whether the data they got matched the shape of the data they expected. 

Automatically decode JSON into records in ReasonML using Decco

This lesson shows how the Serbet server library for ReasonML and Node.js makes handling JSON request bodies, and responding with JSON request bodies a simple task.

Handle JSON request bodies and send JSON responses from a Node.js server using ReasonML

Decco is a great library for automatically generating JSON encoders and decoders, but most real-world projects will quickly run into the need to add custom data types that Decco doesn't ship with support for. This lesson shows how to simply add a custom data type by implementing a codec that reads and writes Javascript dates as floats.

Write a simple custom JSON decoder for Decco in ReasonML

Decco is a language extension that automatically generates JSON encoders and decoders from type signatures. When adding adding custom Decoders, the error messages that the compiler produces can be quite confusing. This lesson shows the viewer how to use explicit type signatures to narrow down where an error might be coming from in custom codec code. This same pattern can be applied whenever confusing error messages come from code that is written without explicit type signatures.

Working with cryptic error messages from ReasonML when writing custom Decco decoders.

This lesson shows how to use the `serbet` npm package to write a simple Node.js http server in ReasonML by implementing a simple "hello world" endpoint. Serbet is a convenient wrapper around Express.js. It's a young library, but its patterns are already used in production code.

Make a basic server with ReasonML and Node.js

The BuckleScript compiler recently reached a new milestone with version 7. In this lesson, we walk through the process of upgrading an existing application to the latest version using `yarn` (or `npm`).


### Resources

[BuckleScript Blog - What's new in v7](https://bucklescript.github.io/blog/2019/11/18/whats-new-in-7)

[BuckleScript Blog - Holiday Release Post](https://bucklescript.github.io/blog/2019/12/20/release-7-02)

!![BuckleScript Docs](https://bucklescript.github.io/docs/)

Migrate an Existing BuckleScript Project to bs-platform v7

In this video, you will learn to bootstrap an eleventy project.

we'll start from an empty directory, initialize it as an npm package, install `@11ty/eleventy` package and create the website entry point.

Eleventy can compile multiple file formats, HTML, markdown, liquid, and njk.

Check out the eleventy [docs](https://www.11ty.dev/docs/) for more information.

Bootstrap an eleventy project

In this video, you will learn how to use the eleventy layouts feature.
Eleventy Layouts are special templates that can be used to wrap other content.


for more information check the layouts [docs](https://www.11ty.dev/docs/layouts/)

Use eleventy layouts

In this video, you will learn how to use layout chaining with eleventy.
Layouts in eleventy can use other layouts. You can also use a different template engine across layouts. This is very handy if we want to wrap some pages with extra markup but not all the pages.


for more information check out the eleventy [docs](https://www.11ty.dev/docs/layout-chaining/)

Use Layout Chaining in eleventy

In this video, you will learn how to create pages from data in eleventy. a data source can be a JSON file or a js file.

for more information check out the eleventy [docs](https://www.11ty.dev/docs/pages-from-data/)

Create pages from data in eleventy

In this video, you will learn how to use the collection feature in eleventy.
Collections will allow to group content under one tag and loop through it in your template files

for more information check out the eleventy [docs](https://www.11ty.dev/docs/collections/)

Topics

Instructors

Content Type