Learn Elm, Figma and Twit

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

elm-ui is a novel iteration on declarative styling where you can use Elm types and functions to define your UI in a declarative way. The novel part is that it does not require you to know CSS to be used, you can start building layouts right away!

You'll learn how to:
- use a declarative mindset for building UIs
- position elements on the screen
- create layouts with rows and columns
- build a form with elm-ui

Elm is a programming language that provides a clean functional syntax for writing HTML web applications. It promises zero runtime exceptions, fast rendering, time-travel debugging, and much more.

Declarative UIs without CSS with elm-ui

In this course we’ll learn how to create Twitter bots. We’ll first learn how to interface with the Twitter API using Twit.js, which allows us to post statuses, search tweets, and interact with followers. We’ll create several example bots that show the diversity of possibilities, using powerful tools such as RiTa.js, Google’s Cloud Vision API, and Tracery. We’ll learn how to tweet data from Google Spreadsheets, and to compose and tweet a song for an audio bot. We’ll also learn how to host our bot logic on Heroku and Docker. 

Twitter API Client for node

Supports both the REST and Streaming API.

twit

Create your own twitter bots

Elm is a beginner friendly functional reactive programming language for building web applications. It contains a small but powerful set of language constructs, such as, static types, algebraic data types, immutability, and pure functions. Elm provides and requires the use of a specific architecture that’s well suited for sensible application construction. Elm’s type system and architecture may feel constraining at first, but they ultimately provide the programmer with some neat benefits including comprehensible code, and a much improved refactoring experience.

In this course you will learn the basic fundamentals of Elm so that you can start building applications today.

Start Using Elm to Build Web Applications

In this video, you will learn how to bootstrap a Basic Figma plugin using the Figma app

Bootstrap a Figma Plugin

In this video, you will learn how to send and receive data from Figma to use it in your plugin

Communicate between the plugin and Figma 

In this video, you will learn how, in your plugin, to change the text value of a selected text node in Figma 

Change the text value of a select node

Now you have your plugin built and ready it's time to publish it.

In this video, you will learn to publish your Figma plugin to the public

Publish a Figma Plugin

Figma is a web-based collaborative interface design tool that we can use to prototype the look and feel of our OpenGraph cards. We dive into a few of the basic features using [Ryan Warner's](https://twitter.com/ryanwarnercodes) community [social branding templates](https://twitter.com/ryanwarnercodes/status/1239578329340170240), such as text placement, using the eyedropper and color tools, as well as pulling in gradients as images to fit our working area.

* [Social Branding Template](https://www.figma.com/community/file/820337605519256142)
* [Gradient Magic](https://www.gradientmagic.com/)

Designing OpenGraph unfurls in Figma

Figma Auto Layout gives our designs superpowers. By adding auto-layout to our button component, we can change the text within the button while automatically maintaining consistent horizontal and vertical padding, just like we would in code.

Build an Adaptive Button with Figma Auto Layout

Keyboard shortcuts speed up our workflow, and make us aware of some features we didn't know existed. Figma has an awesome in app menu for exploring the keyboard shortcuts available to us.

Figma Keyboard Shortcuts

We are going to go ahead and install globally create-elm-app (because it has the best DX so far) and show how would you typically start any production-ready Elm app, and also add elm-ui as a dependency and show the first elements with elm-ui.

Bootstrap an elm-ui Application with create-elm-app

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

How to create an app icon from scratch, generate the required sizes, and add to your iOS app.

Image editing - [Figma](https://www.figma.com/) is a free online design tool used in the video. You can use any design tool you like, such as Photoshop, Sketch etc, as long as the output is a 1024x1024 .png image.

Asset generator - [Iconizer](https://raphaelhanneken.com/iconizer/) is a free mac app for generating the correct sized assets from your icon.

Design and Add a Custom App Icon with Figma to Your React Native iOS App 

To showcase the power of elm-ui, in this lesson we will show how incredibly easy it is to center an element both horizontally and vertically on a screen with elm-ui, since this is a typical problem while doing regular CSS.

Center an elm-ui Element Horizontally and Vertically

In this lesson we will start to get to know the row and column functions in elm-ui to help us layout our application. We will choose the mobile first approach in which we will display everything in one column, show how to handle two columns and explain that later when we do responsible we will be able to play a bit more with this. Since the concept of margin does not exist in elm-ui, in this lesson we learn how to solve it by using spacing and we will talk about padding in a future lesson.

Model a Layout with row, column and spacing with elm-ui

We will use the pink box element that we had from previous lessons while implementing our fancy dashboard and we will turn it into our Card "component", the piece of UI that we are going to repeat and that will have its own state later on the course. 

To do this, we'll first manipulate the background color and text color, then change the height and width of the card. We will want to change the title for each of the cards and to do so we will accept a title argument that will be passed down to our text element within the card to be displayed.

Use View Functions to Create Reusable Pieces of UI in Elm

Since we mentioned in a previous lesson that there is no concept of "margin" in elm-ui, we are goint to learn how to se `padding`, `paddingXY` and `paddingEach` to compensate for that, and a little trick defining a value edges that is going to be pretty useful.

Use padding, paddingXY and paddingEach with elm-ui

We will style the heading of `viewCards` to look more like a real heading. If you inspect the console right now, you'll find that the `el` element we are using for our text corresponds to a div in HTML. 

We will go further away than using only text to display our content and introduce the modules `Element.Font` and `Element.Region` to fix the headlines and other text of our dashboard, adding an additional "breakdown" heading that is going to serve as a divider between sections.

Style Text with elm-ui Headlines, Typographies, and Fonts

In this lesson, we will explain when you would need to reach for the `text` function, why it is different from `textColumn` and `paragraph` and when to use each one as they serve different purposes for displaying text in the UI. Basically, `el` and `text` elements **do not wrap text by default**, so we need to use `paragraph` when we want text to overflow and still be visible to read. We will add a new "subtitle" section below our Breakdown subheading

Topics

Instructors

Content Type