Learn Figma, Mac and Svelte

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

JavaScript community has been shaken recently by a release of Svelte 3 and for a good reason - it's a completely different approach than React or Vue. To quote the docs:

"[Svelte](https://svelte.dev/) is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app."

**The best part?** If you have 26 spare minutes you can learn the basics of Svelte 3 and start building your own apps with it!

Enjoy!



The magical disappearing UI framework

 - The web's JavaScript bloat crisis, solved. Svelte turns your templates into tiny, framework-less vanilla JavaScript.
 - Simple and familiar. Build apps out of composable, easy-to-write blocks using languages you already know.
 - Super fast, rock solid. Compile-time static analysis ensures the browser does no more work than it needs to.

svelte

Up and running with Svelte 3

Bash makes automation easy. Just a few lines of code can take care of repetitive tasks for you and your teammates. 

In this course, we’ll dive deep into the automation potential of bash. You’ll learn to leverage common hooks that open up interesting automation possibilities, like git hooks, adding functions and aliases in your bash_profile, and running scheduled jobs in launchd.

For example, we’ll write a git hook that checks package.json for changes, and if there are changes, the hook runs npm install for you automatically. 

Along the way, you’ll also learn:

- more advanced bash commands like exec
- syntax such as redirecting stdout and stderr to the same destination
- timesaving tricks like brace expansions

Automation is all about saving you time — and at only 52 minutes, this course is well worth yours. Enjoy!

Bash is a Unix shell and command language written by Brian Fox for the GNU Project as a free software replacement for the Bourne shell. Bash is a command processor that typically runs in a text window, where the user types commands that cause actions. Bash can also read and execute commands from a file, called a shell script.

bash

Advanced Bash Automation for Web Developers

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

Joe Previte is an active egghead instructor and blogger. This is a collection of screencast versions of selected blog posts. You can find his blog here: [joeprevite.com](https://joeprevite.com/)

Joe's Blog Posts as Screencasts

Creating forms is one of the simplest and most complicated things at the same time. A basic form consists of many different things happening, we have to retain the value, we have to keep watch of validation and we have to show error messages when something is invalid, this is on both the fields and on the entire form itself if we send a request off to the backend service.

So we're going to create a form using just the normal svelte features. Then we'll look into creating a form using the svelte forms lib. 

Create forms in Svelte with Svelte Forms Lib

`launchd` is a robust scheduled job automation tool on macOS that allows you to schedule a task to be run at recurring times. It's macOS's take on Linux's `cron`. In this lesson, we’ll schedule a simple bash script that empties the Trash to run every Monday morning at 10am. 

First, we’ll create a plist file (a plist file is just XML) with our job configuration. In here, we’ll specify our bash script as the program to run. Then we move plist file to the `~/Library/LaunchAgents` folder. Then we’ll use launchctl to load our configuration file, which will make the job active. We'll manually activate our job to ensure it's working with `launchctl kickstart`. 

Schedule Timed Jobs on macOS with `launchd`

AppleScript is a peculiar language with a COBOL-like desire to read like English, but it's the key to automating UIs on the Mac. We'll use it together with bash to make Terminal open a new window to run any shell command.

Run a Command-line App in a New Terminal Window using Bash and AppleScript

In [the previous lesson](https://egghead.io/lessons/bash-run-a-command-line-app-in-a-new-terminal-window-using-bash-and-applescript "Run a command-line app in a new terminal window") we created a bash script that runs a given command line in a new Terminal window. Now we'll see how to use Automator to make an instance of that available as a menu item in Finder.

Turn a command-line app into a menu item in Finder

Svelte is a new approach to building user interfaces. 

Instead of doing the vast majority of work at the runtime as other frameworks do, Svelte shifts that work into the _compile_ step which happens when you build your app. As such, you're shipping heavily optimized code to your users.

In this quick lesson we are going to learn how to create a brand new project with Svelte 3 from scratch.

Create a new project with Svelte 3

In most Web applications we want to be able to render different HTML markup depending on values passed in from JavaScript code.

In this lesson we are going to learn how to render JavaScript variable in HTML markup when using Svelte 3.

Add data to HTML markup using Svelte 3

In Svelte 3, the same as in regular HTML we can add CSS styles to a component and this is what we're going to learn in this lesson.

Important note - styles are _scoped to the component_ which means that if we style a `h1` tag in component A, it won't automatically affect `h1` tags in component B.

Add styles to Svelte 3 component

It's highly unlikely that we'd like to have an entire app in a single file. Instead, what we'd like to do is to spread our code across multiple components and render them in one another.

In this lesson we are going to learn how to create a `<Surname />` Svelte 3 component which we're going to use in our main `App.svelte` file to display a user's surname.

Create a new Svelte 3 component to render it inside of another component

One of the key advantages of having a component system is the ability to render the component differently based on what kind of properties (shortened to 'props' in Svelte) were passed in to the component.

In this lesson we are going to learn how to declare properties inside of a Svelte component and how to pass in data to be rendered inside of a `<UserInfo />` component. We're also going to learn how to use default props which are used if a value for a property was not passed in.

Declare and pass in properties to a Svelte 3 component

Svelte automatically updates the DOM when your component's state changes. Often, some parts of a component's state need to be computed from other parts. This is where _reactive declarations_ come in.

In this lesson we are going to learn how to use reactive declarations to re-compute (and render) square of a counter value in a simple counter example whenever user clicks on a button.

Use reactive declarations to compute component state in Svelte 3

Quite often we need to be able to loop over and render a list of data that (for example) is returned from the backend. 

In this lesson we are going to learn how to use `each` block from Svelte to iterate over a list of data and render a list of European cities. We're also going to learn how to get the current `index` while iterating over a list, as well as how to destructure a currently iterated over element of the array.

Loop over and render a list of data using an `each` block in Svelte 3

The whole magic of webapps is that users can interact with our code via various DOM events and Svelte is no exception in that regard.

In this quick lesson we're going to learn how to use DOM events in Svelte 3 as well as how to use event _modifiers_ to alter DOM event behaviour (such as `once` and `preventDefault`)

Use DOM events and event modifiers in Svelte 3

Every Svelte component has a lifecycle that starts when it is created, and ends when it is destroyed. There are a handful of functions that allow you to run code at key moments during that lifecycle.

The one you'll use most frequently is `onMount`, which runs after the component is first rendered to the DOM. 

In this lesson we're going to learn how to use `onMount` to fetch and render data from Star Wars API.

Use an onMount lifecycle method to fetch and render data in Svelte 3

Not all application state belongs inside your application's component hierarchy. Sometimes, you'll have values that need to be accessed by multiple unrelated components, or by a regular JavaScript module.

In Svelte, we do this with _stores_. In this lesson we're going to learn how to create a `writable` store and how to use it to allow `Incrementer` and `Decrementer` components modify the value of the store

Use Svelte 3 stores to share data between multiple unrelated components

Sometimes we don't want to have a complicated `update` function to change a value of our store. We know exactly what we want to change the value to - we can just use the `store.set` function to do that.

In this lesson we're going to learn how to set a value to a Svelte 3 store by using the `store.set` function to set the value of a counter without having to increment/decrement it one by one.

Topics

Instructors

Content Type

Free or Pro