Learn Apollo, Figma and Jekyll

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

Figma is a collaborative prototyping tool that allows you to responsively design your applications, with resolution presets for all of the most popular devices. In this course, we will explore the fundamentals of Figma’s toolset that you can use for various design functions. 

We will start from scratch, then walk through scenarios you may encounter when designing a website or application. We will cover building reusable designs — known as “components” in Figma — all the way up to prototyping your designs to show screen transitions and animations between state. 

By the end of the course, you will understand the basics of Figma so you can use it to your advantage when building your next app or website.

Design, prototype, and gather feedback all in one place with Figma.

figma

The Beginner's Guide to Figma

Figma is a powerful design tool built with web technologies. Using the same technologies you can extend it with plugins.
You can use Typescript and/or javascript, you can load your favorite UI frameworks like Vue.js or React.js and build powerful plugins.

Using a plugin you can:

* Load Real Data from your server and visualize it 
* Change elements in your design programmatically 
* Convert your design to JSX or HTML, the sky is the limit

Learning these skills will help you make your design workflow faster by making Figma doing exactly what you want





JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Create a Figma Plugin Using Typescript

GraphQL is a fan favorite for good reason. It lets a client make specific, complex, and/or aggregate queries for data, and it’s user-friendly to boot.

If you’ve been meaning to learn GraphQL and start harnessing its powers, this is a great place to start.

This course is for GraphQL newbies with a basic understanding of React. It focuses on the client-side implementation of GraphQL usage using the Apollo client.

We’ll start with a guide on how to add the Apollo client to an existing project, then move on using the Query and Mutation components to fetch and manipulate data using a GraphQL API.

GraphQL Data in React with Apollo Client

Jekyll is a blog-aware static site generator. You can write text in markdown or HTML and Jekyll uses layouts to create a static website. You can tweak how you want the site URLs to look, what data gets displayed on the site, and more.

After watching the collection you'll be able to:

* Install Jeykll and run it locally
* Create a new blog post
* Install plugins to add new features to your blog

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

Create A Blog With Jekyll

Apollo provides a universal GraphQL API on top of your existing services, so you can build new application features fast without waiting on backend changes.

apollo

To query a GraphQL API, all you need to do is send an HTTP request that includes the query operation in the body of the request. In this lesson, we will use the browser’s fetch method to request the total days skied from our GraphQL API.

Fetch Data from a GraphQL API

Apollo Server is a GraphQL server that listens for incoming HTTP requests on a single endpoint.  In this lesson, we will stand up a simple GraphQL service that handles a query for total days skied during a season.

Create a GraphQL API with Apollo Server 2.0

Created by the team at Prisma, graphql-request is a lightweight package that can be used to send queries to any GraphQL API. Sending a request with graphql-request uses less syntax than a fetch request. In this lesson, we will query the totalDays field using this helper package.

Query a GraphQL API with graphql-request

Apollo Client allows you to build performant, production-ready applications that consume data from GraphQL services. In this lesson, we will query the totalDays field using Apollo Client.

Send a GraphQL Query with Apollo Client

React Apollo is a component library that we can use to rapidly build GraphQL client applications with React. In this lesson, we get our React app ready by setting up the Apollo Provider and sending our query using the Query component.

Set Up a React GraphQL Client Application with react-apollo

The Query component is used to render the state of the network request along with the data that is returned from the GraphQL API. In this lesson, we will refactor our application to include an App component that displays the resulting count returned by the totalDays field.

Display Query Results using the Query Component 

Queries get data from GraphQL services. If we want to change data, we will use GraphQL mutations. In this lesson, we’ll look at how to design GraphQL mutations to increment or decrement the number of ski days on record.

Change Data with GraphQL Mutations

We can read data from and write data to the cache directly with Apollo Client. In this video, we’ll update the UI by interacting with the cache instead of sending an additional request to the GraphQL server.

Update the Apollo Local Cache with the readQuery and writeQuery Methods

Using the GraphQL Schema Definition Language, we can define types that reflect all of the objects available on our API. In this lesson, we will create a SkiDay type and return a list of SkiDay objects with an allDays query. We will also create an enum, which describes a restricted list of allowed values for a particular field.

Create a GraphQL Object Type and Query a List of Objects

The addDay mutation should add details about each ski day. In this lesson, we’ll capture argument values from the GraphQL mutation and use this to change the ski day array.

Add Data to an Array with a GraphQL Mutation

Resolvers are functions that return data for specific fields. In this lesson, we’ll take a look at how to throw errors within resolvers if the data passed as arguments is incorrect or insufficient.

Incorporate Custom Error Handling within GraphQL Resolvers

GraphQL has five built-in scalar types that can be returned from a field: Int, Float, Boolean, String, and ID. It is also possible to create and validate your own custom scalar if you want to return a single value or leaf instead of an object from a field. In this lesson, we’ll build a custom scalar type to handle parsing and serializing dates.

Define a Custom Scalar Type for a GraphQL API

If you want to be able to parse and serialize custom scalar types sent as arguments, you’ll add the parseValue and parseLiteral functions to the custom scalar constructor. In this video, we’ll take a closer look at these functions and how they can be used to transform data passed by the client.


Parsing GraphQL Mutation Arguments with Custom Scalars

When passing arguments to a GraphQL mutation, you can send them inline, or you can wrap them in an input type. In this lesson, we’ll create an input type for the addDay mutation which will allow us to pass an entire object as an argument.

Wrap GraphQL Mutation Arguments with a GraphQL Input Type

GraphQL mutations are used to change data and can be also used to delete data. In this lesson, we’ll make changes to the removeDay mutation to delete a day from the ski days array by id. Additionally, we’ll return a custom type when we send the mutation.

Remove Items from an Array with a GraphQL Mutation

React Apollo comes with a Mutation component that can be used to send mutation operations to a GraphQL API. In this lesson, we will use the Mutation component to trigger addDay and removeDay mutations.

Topics

Instructors

Content Type