Learn Puppeteer, Reason and Xstream

OpenGraph images are the images you see when you paste a link into a social platform and it "unfurls" into an image, title, and description. This happens on Twitter, Discord, Slack, and many other platforms. This collection goes over everything from designing OpenGraph images in Figma, to implementing them in CodeSandbox, to returning headless browser screenshots from Netlify Functions, and finally using Cloudinary as a write-through cache. 

You will come away from this collection with the ability to ship an API that you can use on any of your sites, and also on-demand, that can generate images for not only OpenGraph unfurls, but also for Instagram, GitHub, and more. Using headless browsers with playwright to generate our images means we get full access to all the responsive power of CSS and all the logical power of JS to handle layout, importing assets like pngs, choosing different fonts, and more.

The image below is generated via the project you'll build and deploy in this course

![An example opengraph image](https://relaxed-payne-d1bfbe.netlify.com/opengraph?title=Building%20an%20OpenGraph%20image%20generation%20API%20with%20Cloudinary%20Netlify%20Functions%20and%20React&tags=figma,netlify%20functions,playwright&author=chrisbiscardi)

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

Building an OpenGraph image generation API with Cloudinary, Netlify Functions, and React

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

End-to-end testing assures you of a few things: that all the integrated pieces of an application properly function, all those pieces work together as expected, and your tests include and simulate real-user scenarios — something unit and integration tests just don't do.

This course introduces you to two great tools for E2E testing: 

* Puppeteer opens and runs applications in a Chromium browser and performs the actions it's given.
* Jest asserts that the integrated pieces work as expected and that add-on libraries like Faker and pixelmatch take our tests to the next level.

Over 9 lessons, we will create common application features and use Puppeteer and Jest to run different types of tests against them. You'll get practice using these tools to render content, mimic user activity, automate tests, and measure the overall performance of your application.

jest

End to End Testing with Google's Puppeteer and Jest

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

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

Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.

tailwind

This lessons shows how to dynamically add a red border to an input when a validation error pops occurs using ReasonReact, Tailwind, and re-classnames.

Dynamically style an input border with Tailwind and ReasonReact

Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome or Chromium.

puppeteer

When taking screenshots, it's important that the browser is big enough to show all of the content in the DOM that we want to screenshot. We can do this by setting the viewport.

Setting the viewport on a Playwright headless browser

A live stream where Sean shows John what it takes to port Reason to JavaScript

Convert an App Built with Reason & ReasonReact into JavaScript & React.

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream.

cycle

This lesson is the first in an introduction to Cycle.js. We will see how to build from scratch a toy version of Cycle.js. See how to use RxJS to create simple web apps, and how to separate logic from effects.

Separate Logic from Effects in Cycle.js

In this lesson we are going to set up our basic app, set our environment variables, define our targeted viewport, and install Jest, Puppeteer, and Faker. We'll use these features to write our end to end tests. 

Topics

Instructors

Content Type