Learn Faunadb, Puppeteer and Vim

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 application serves as an introduction to building products with a JAMStack and Serverless approach. We cover everything from the beginning:

* starting with the Gatsby client
* handling authentication with Netlify Identity
* Shipping a GraphQL server on Netlify Functions
* Building in access control with a serverless capable database

It uses tools that remove as many of the barriers as possible while also allowing upgrading in the future. Netlify Functions can grow into AWS Lambda, Netlify Identity can grow into Auth0 or Cognito, and FaunaDB can grow into DynamoDB.

Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

Building a Serverless JAMStack Todo app with Netlify, Gatsby, GraphQL, and FaunaDB

Vim is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple OS X.

Vim Videos for Beginners

This collection is a sequel to the [Building a Serverless JAMStack Todo app with Netlify, Gatsby, GraphQL, and FaunaDB](https://egghead.io/playlists/building-a-serverless-jamstack-todo-app-with-netlify-gatsby-graphql-and-faunadb-53bb) collection. In this collection we take the TODO application we built and convert it to run using Netlify Identity, AWS Lambda (using the serverless framework) and DynamoDB. We cover

* Fauna vs DynamoDB and when to use each
* Setting up AWS accounts
* Creating DynamoDB tables and data modeling differences between Fauna and Dynamo
* Converting our Netlify Functions deployment to a Serverless Framework deployment
* Implementing Custom authorizer functions on AWS

It uses tools that remove as many of the barriers as possible. Netlify Functions grows into Serverless Framework adn AWS Lambda, Netlify Identity is kept around, and FaunaDB can grows into DynamoDB.



FaunaDB is a global serverless database that gives you ubiquitous, low latency access to app data, without sacrificing data correctness. It eliminates layers of app code for manually handling data anomalies, security, and scale, creating a friendlier dev experience for you and better app experience for your users.

faunadb

Converting a Serverless App to run on AWS Lambda and DynamoDB with Serverless Framework

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

FaunaDB is a global serverless database that gives you ubiquitous, low latency access to app data, without sacrificing data correctness. It eliminates layers of app code for manually handling data anomalies, security, and scale, creating a friendlier dev experience for you and better app experience for your users.

Fauna is inspired by [Calvin](https://blog.acolyer.org/2019/03/29/calvin-fast-distributed-transactions-for-partitioned-database-systems/), has [built-in GraphQL integration](https://docs.fauna.com/fauna/current/api/graphql/), and a query language based on lambda calculus. Be sure to check out the [Jepsen analysis](https://jepsen.io/analyses/faunadb-2.5.4) and the associated [chart of consistency models](https://jepsen.io/consistency)

The Complete Guide to FaunaDB

Vim is a classic text editor that saw its first incarnation in 1976. Used around the world across most platforms, the ability to drop into a computer, open a command prompt and type `vim` is a simple yet powerful concept.

In this course we will take a tour of Vim, and learn the essentials you need to know to start being productive with this powerful text editor. We will learn about basic movement through a file in Vim without a mouse, loading and saving files, commanding the Vim editor, and get started customizing Vim to suit your needs.

Learn to Use VIM

FaunaDB is a Calvin inspired hosted database marketed towards JAMStack and serverless users. It is geo-replicated across multiple providers (AWS, GCP, and soon Azure), uses a lambda calculus based query language (FQL) or the built-in GraphQL support, and is quick to get started with. Don't worry about the vocabulary here (Consistency, lambda calculus, etc), FaunaDB can be quickly put to work without reading any papers and without knowing what lambda calculus is.

* [Calvin Paper](http://cs.yale.edu/homes/thomson/publications/calvin-sigmod12.pdf) (warning: pdf link)
  - [Morning Paper Overview of Calvin Paper](https://blog.acolyer.org/2019/03/29/calvin-fast-distributed-transactions-for-partitioned-database-systems/) if you don't want to read the whole paper
* [jepsen report](https://jepsen.io/analyses/faunadb-2.5.4)

An Introduction to FaunaDB

FQL is the main query language for interacting with FaunaDB. It supports all JSON types, plus some additional types like Ref, Date, and Set. FQL is based in expressions and as such everything returns a value. This makes it easy to compose logic into larger queries.

Code shown in the shell:

```
Match(Index("all_customers"))
```

Overview of the FaunaDB Query Language

When working with FQL it's often the case that you'll encounter `Ref`s. `Ref`s don't have any fields on them though! So how do we access the fields? `Get`.

```
Collections()
```

```
Collection("customers")
```

```
Ref(Collection("customers"), "244075679454331401")
```

```
Get(Ref(Collection("customers"), "244075679454331401"))
```

```
Get(Collection("customers"))
```



Refs and Get in FaunaDB

FQL Page objects have additional fields like `before`, and `data`, that may make it seem like you need to `Select` to get at the underlying array of results. However, FQL supports passing Page objects directly to functions that operate on arrays and the function will transparently operate on the contained `data` field.

```
Paginate(Match(Index("all_customers")))
```

```
Drop(1, Paginate(Match(Index("all_customers"))))
```

```
Take(1, Paginate(Match(Index("all_customers"))))
```

FQL Page objects can be arguments to array functions

`Ref`s are opaque. To access the fields on a document associated with a Ref, we first need to run `Get` on our results and then we can access fields using `Select`

```
Map(
  Paginate(Match(Index("all_customers"))),
  Lambda("X", Get(Var("X")))
)
```

```
Map(
  Paginate(Match(Index("all_customers"))),
  Lambda("X", Select(["data", "firstName"], Get(Var("X"))))
)
```

Accessing fields through Refs with Select

We walk through creating a new Database in the FaunaDB console complete with some demo data. We do some exploration of the data, introducing concepts like Collections and Indexes, before showing an example FQL query that runs against the database. This sets us up to talk about FQL in future videos

Creating your first FaunaDB database

Overview of the FaunaDB Query Language (FQL)

When working with FQL it's often the case that you'll encounter Refs. Refs don't have any fields on them though! So how do we access the fields? Get.

```
Collections()
```

```
Collection("customers")
```

```
Ref(Collection("customers"), "244075679454331401")
```

```
Get(Ref(Collection("customers"), "244075679454331401"))
```

```
Get(Collection("customers"))
```

Getting fields out of Refs with Get

FQL Page objects have additional fields like before, and data, that may make it seem like you need to Select to get at the underlying array of results. However, FQL supports passing Page objects directly to functions that operate on arrays and the function will transparently operate on the contained data field.

```
Paginate(Match(Index("all_customers")))
```

```
Drop(1, Paginate(Match(Index("all_customers"))))
```

```
Take(1, Paginate(Match(Index("all_customers"))))
```

FQL Page objects can be arguments to Array functions

Lambdas allow you to use functions like Map or Filter effectively in FQL. In this lesson we should the Lambda syntax by operating on some paginated results.

```
Paginate(Match(Index("all_customers")))
```

```
Map(
  Paginate(Match(Index("all_customers"))),
  Lambda("X", Get(Var("X")))
)
```

Using FQL Lambda in Array functions

`Ref`s are opaque. To access the fields on a document associated with a `Ref`, we first need to run `Get` on our results and then we can access fields using `Select`

```
Map(
  Paginate(Match(Index("all_customers"))),
  Lambda("X", Get(Var("X")))
)
```

```
Map(
  Paginate(Match(Index("all_customers"))),
  Lambda("X", Select(["data", "firstName"], Get(Var("X"))))
)
```

FaunaDB supports access keys with four sets of permissions, or roles. You need an access token to use a language driver like the Go driver to access FaunaDB. It is not exposed by default. The four roles are: Admin, Server, Server-ReadOnly, and Client. We'll go over what these roles are and how to choose one for your use case.

Creating an access token and choosing a role for it

You can use array and object literals to compose multiple selections into a single query, such as within a lambda.

```
Map(
  Paginate(Match(Index("all_customers"))),
  Lambda(
    "X",
    Select(["data", "firstName"], Get(Var("X")))
  )
)
```

with arrays

```
Map(
  Paginate(Match(Index("all_customers"))),
  Lambda(
    "X",
    [
      Select(["data", "firstName"], Get(Var("X"))),
      Select(["data", "lastName"], Get(Var("X")))
    ]
  )
)
```

with objects

```
Map(
  Paginate(Match(Index("all_customers"))),
  Lambda(
    "X",
    [
      Select(["data", "firstName"], Get(Var("X"))),
      Select(["data", "lastName"], Get(Var("X")))
    ]
  )
)
``````
Map(
  Paginate(Match(Index("all_customers"))),
  Lambda(
    "X",
    {
      firstName: Select(["data", "firstName"], Get(Var("X"))),
      lastName: Select(["data", "lastName"], Get(Var("X")))
    }
  )
)
```

Topics

Instructors

Content Type

Free or Pro

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

Building a Serverless JAMStack Todo app with Netlify, Gatsby, GraphQL, and FaunaDB

Vim Videos for Beginners

Converting a Serverless App to run on AWS Lambda and DynamoDB with Serverless Framework

End to End Testing with Google's Puppeteer and Jest

The Complete Guide to FaunaDB

Learn to Use VIM

An Introduction to FaunaDB

Overview of the FaunaDB Query Language

Refs and Get in FaunaDB

FQL Page objects can be arguments to array functions

Accessing fields through Refs with Select

An Introduction to FaunaDB

Creating your first FaunaDB database

Overview of the FaunaDB Query Language (FQL)

Getting fields out of Refs with Get

FQL Page objects can be arguments to Array functions

Using FQL Lambda in Array functions

Accessing fields through Refs with Select

Creating an access token and choosing a role for it

Selecting multiple fields in an FQL query