Learn Figma, Http and Jasmine

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

In this course, we will learn the fundamentals of the Hypertext Transport Protocol (HTTP) by exploring several popular HTTP APIs such as the GitHub API. Starting with the basic structure of an HTTP request and response, we will then delve into the specifics of each element of the request/response messages. Using concrete examples from these APIs, we will cover request methods, response status codes, messages headers, and message bodies. Along the way, you'll learn about specific message headers, such as `Cache-Control`, and `Cookie`  and how they control the behavior of clients/browsers and HTTP API services.

This course uses HTTPie, if you would like to follow along with the instructor you can download the client [here](https://httpie.org/).

The Hypertext Transfer Protocol (HTTP) is an application-level protocol for distributed, collaborative, hypermedia information systems. It is a generic, stateless, protocol which can be used for many tasks beyond its use for hypertext, such as name servers and distributed object management systems, through extension of its request methods, error codes and headers.

http

Understand the Basics of HTTP

As developers, we're often working closely with APIs to make requests in the browser or on the backend with a server, but we might not always know exactly how those requests work or how they should look.

Postman is a tool that lets us create, manage, and test API endpoints all within a UI so we can wrangle our APIs and understand how they work.

Create, Manage, and Test API Requests with Postman

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 

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

express

In this lesson, we'll learn how to add https (and remove http) support to the localhost version of our express application. By adding https support, we'll be able to prevent a MITM (in this case Charles Proxy) from reading our session id, mitigating the attack known as "session hijacking".

Add https to a Localhost Express App to Prevent MITM Attacks

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

In this course, we'll learn how to exploit and then mitigate several common Web Security Vulnerabilities: Man in the Middle (MITM), Cross Site Request Forgery (CSRF), and Cross Site Scripting (XSS).

The goal of this course is to introduce you to these attacks from the point of view of an attacker, and then as the defender of a sample application, and to gain first hand experience with how these attacks works. You'll also learn several security "rules of thumb" along the way and discover modern defenses against these attacks that drastically reduce their likelihood of succeeding!

By the end of this course, you’ll know how to recognize these vulnerabilities in your own application and have strategies to mitigate and defend against all of them. You'll feel more confident in your ability to write secure code, and my hope is that you'll be inspired to continue your security journey and help make the internet a safer place for all of us.

Course Overview: Web Security Essentials

In this lesson, we'll learn how to use Charles Proxy to “sniff” the web traffic flowing an example website using an attack known as a Man in the Middle attack, or MITM. Because our example website is using http and not https, you'll “discover” a vulnerable piece of user data called a session id being transmitted in cleartext across every request. This info will become the central piece of data that we'll learn how to protect throughout this course.

Simulate Man in the Middle Attacks and Inspect Network Traffic with Charles Proxy

In the previous lesson, we disabled http in favor of https. In this lesson, we'll learn that the default protocol for web browser is http, and we therefore need to provide an http endpoint that redirects the browser to https. We'll do that by setting up a small express application whose sole responsibility is to redirect http urls to https. In doing so, we'll accidentally reintroduce the transmission of our session id over http, which we'll need to fix in our next lesson.

Redirect All HTTP Traffic to HTTPS in Express to Ensure All Responses are Secure

In this lesson, we'll will learn how to set the `secure` flag on our session id cookie to ensure it is only transmitted over https connections. This will effectively mitigate the Session Hijacking vulnerability we introduced in the previous lesson.

Set the Secure Cookie Flag to Ensure Cookies are Only Sent Over Secure Connections

In this lesson, we'll learn how to add HSTS headers to an express application so that all requests after the first request made to the application are https. We'll also learn about the HSTS preload list which will ensure that even the first request is secure. Even though we secured our session id cookie in the previous lesson, ensuring all requests go over https ensure that even if we add another cookie and forget to set it to Secure, we'll still not be transmitting it in cleartext over an http connection.

Add HSTS Headers to Express Apps to Ensure All Requests are https Requests

In this lesson, we'll learn what a Cross Site Request Forgery (CRSF) vulnerability is by learning how to exploit a CSRF vulnerable site by making malicious requests on behalf of a logged in user. We'll construct a malicious payload that automatically gets POSTed to the vulnerable site simply by visiting the attacker website while being logged into the target website.

Create a Proof of Concept Exploit of a CSRF Vulnerable Website

In this lesson, we'll learn what the SameSite cookie flag is, what it’s various settings are, and how it can be used to prevent most forms of CSRF vulnerabilities. We'll then demonstrate how it protects against the exploit we crafted in the previous lesson.

Mitigate CSRF Attacks by Setting the SameSite Cookie Flag in Express

In this lesson, we'll learn what CSRF tokens are, and how they are used to defeat Cross Site Request Forgery vulnerabilities. Even though we've defeated CSRF through the use of SameSite cookies, adding CSRF tokens are an important "defense in depth" strategy to ensure that browsers that don't support SameSite cookies can still be protected against CSRF.

Add CSRF Token Middleware to an Express Server to Mitigate CSRF

In this lesson, we'll learn how to set the httpOnly flag on our session id cookie to ensure it is inaccessible from javascript, thereby defeating theft of the session id from the XSS attack we crafted in the previous lesson. However, we'll still leave ourselves open to other dangers from XSS, which we'll exploit in our next lesson!

Set the httpOnly Cookie Flag in Express to Ensure Cookies are Inaccessible from JavaScript

In this lesson, we'll learn what CSP is and how it can be used to prevent inline scripts from being executed on our vulnerable website. First, we'll deploy CSP in "report only" mode, which will send violations to the endpoint you specify without blocking execution. Then, we'll run CSP in regular mode, which we'll use to completely block inline scripts from executing.

Prevent Inline Script Execution by Implementing Script-Src CSP Headers in Express

In this lesson, we'll learn how to set the script-src CSP to use nonces. Using nonces will disallow both inline scripts and remote scripts from executing unless the script tag has a nonce attribute that matches the nonce provided by the CSP header. This will mitigate the vulnerability we discovered in the previous lesson and will effectively block all javascript from running except the scripts you explicitly added, and is an effective defense against javascript powered XSS!

Topics

Instructors

Content Type