Learn Puppeteer, Purescript and React-storybook

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

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

PureScript is a small strongly, statically typed language inspired by Haskell and compiles to JavaScript. This means no run-time errors, human readable output, ADTs, and pattern matching (and more!) all at your fingertips.

In this course we will use an [online editor](http://try.purescript.org/) to show basics into PureScript with an instant visual representation, investigate the type system and ways to reason about common programing problems with PureScript. 

As we explore the type system and common problems that are faced when programming in PureScript we will learn plenty of functional programming concepts as PureScript is a purely functional language.

PureScript is a small strongly typed programming language that compiles to JavaScript.

purescript

Functional Programming Concepts in Purescript

PureScript types are very extensive and we are going to experiment with type constructors and how to make then use them.

Basic Data Constructors in PureScript

In this lesson, we show how to setup React Storybook into an existing React project. We’ll go through common configuration files and how to adjust them.

Add React Storybook to a Project 

Components trigger actions via function props to notify of events that occur within the Component. We can inspect those events using React Storybook.

Inspect Component Events with React Storybook

Deserializing and serializing JSON manually is a boring, error-prone way to be able to handle JSON. This example shows how you can use Generics in Purescript to automatically derive de/serializers so that once you've written your type definition, you only need a few lines of code to handle JSON.

Automatically de/serialize JSON with Purescript-Foreign-Generics

In Purescript, we can use set data structures using Purescript-Set, but many of its functions come with an Ord typeclass constraint. In this lesson, we'll learn how to understand the typeclass constraints on a function and how to create instances of typeclasses.

Use Sets with Ord Typeclass instances



[React Storybook](https://github.com/kadirahq/react-storybook) is a UI component development environment for React.
With that, you can develop UI components without running your app.

Here I show how to get started with React Storybook.
For more information, have a look at our [documentation](https://getstorybook.io/docs).

Getting Started with React Storybook

React Component stories can be dynamically loaded into React Storybook instead of doing it manually every time.

Load React Storybook Stories Dynamically

PureScript has a REPL (a console you can type expressions into) called `pulp`. In this lesson, we will show how you can use `pulp` to test your modules and functions. We will use code as we would in a file, like `import`ing modules. We will also use REPL specific syntax like `:type` (or `:t` for short) to view type definitions and `:reset` to re-compile changes to our files.

Technologies talked about in this lesson:

[Pulp](https://github.com/bodil/pulp) by [@bodil](https://twitter.com/bodil)
[Psci](https://github.com/purescript/purescript/wiki/PSCi)
[Purescript](https://github.com/purescript/purescript)

Using PureScript's psci with pulp

Currying is a significant aspect of functional programming. It allows you to break down one function that takes many arguments into a series of functions that take part of the arguments; this will enable you to build and compose functions together easily.

In this lesson, we will look at what currying is doing under the hood in PureScript, as it is used extensively. 

Join in by going to [the online PureScript editor](http://try.purescript.org/).


Use One Function Argument at a Time with Currying and Partial Application in PureScript

JavaScript does its error-checking at runtime, but PureScript has a compiler, which makes sure that your program has no errors before it converts it all into JavaScript.

PureScript's compiler uses a type system to catch errors so that you aren’t accidentally mismatching your types. We will learn the very basics of type declarations, how they work in a statically typed language like PureScript, and see simple examples of them in action. 

Join in by going to [PureScripts online editor](http://try.purescript.org/)


Specify Function Arguments using Types in PureScript

Pattern matching in functional programming languages is a way to break up expressions into individual cases. 

We are going to go through how to pattern match in PureScript with simple patterns, guards, array patterns and record patterns.

Join in by going to [the online PureScript editor](http://try.purescript.org/).


Break up Expressions into Cases in PureScript using Simple Pattern Matching 

Story is the smallest unit of React Storybook. A story describes a React Component, and its various states and variations. Stories can describe complex components with dynamic properties and data loaded from a service. In this lesson we will write our first React Storybook story.

Write the First React Storybook Story

Algebraic Data Types are a fundamental part of modeling data in Purescript. In this lesson, we'll look at some common methods of defining and using them.

Model problems using Algebraic Data Types (ADTs)

In this lesson, we will learn how to run Purescript with a simple log statement. We use pulp to compile Purescript down to readable javascript.

Use Purescript and pulp to make hello world

In this lesson, you will learn about type alias using records and instances. You'll see how to create a type alias and be able to display its values to a show function utilizing an instance for its type.

Types Alias and Instances in PureScript

React Storybook allows for easy snapshot testing integration with Facebook's Jest testing framework. Snapshot testing allows you to capture the state of your UI and then notify you when that UI has been altered. We can easily create and update snapshots with Storybook!





Jest Snapshot Testing with React Storybook

In PureScript, you pattern match against the base case to achieve recursion. 

In this lesson, you will learn exactly how to do that by implementing a recursive solution to a factorial function.

Recursion in Purescript

More in-depth information into Partials "Why have a Partial type class?"
https://github.com/purescript/documentation/blob/master/guides/The-Partial-type-class.md


Topics

Instructors

Content Type

Free or Pro