Learn Figma, Github 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

SSH provides a secure way for your to [connect to and authenticate with GitHub's servers](https://help.github.com/en/github/authenticating-to-github/about-ssh). While HTTPS connections use usernames and passwords as credentials, SSH instead uses public and private key pairs. These can be generated on your system using a CLI like [`ssh-keygen`](https://help.github.com/en/github/authenticating-to-github/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent) and then associated with your GitHub account using the public key.

In some cases, you may need to connect to more than one GitHub account from the same system. For example, you may have [separate accounts for personal and professional projects](https://ryanharris.dev/managing-ssh-keys-for-github/), which can be difficult to manage manually. Using `ssh-agent` and a SSH configuration file, you can alleviate this pain point by automatically determining which key to use based on your GitHub repository's `git` URL.

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

Secure GitHub connections with SSH

Github Actions are an awesome tool from Github that allows us to automate tasks using code-based workflow configuration files. There's also a large marketplace that comes stocked with many useful tools that are ready out of the box.

But sometimes the options available don't completely solve our needs or maybe we're working with a new technology that's simply not available as an Action yet. Luckily, Github allows anyone to create their own Actions using common technologies like Javascript via Node.

We'll learn how to create a new Javascript-based Github Action running on Node. We'll first walk through a simple Hello World example, learn how to test it locally, version control it, use it in the wild, and move on to more advanced solutions that include using packages from npm!

GitHub fosters a fast, flexible, and collaborative development process that lets you work on your own or with others.

github

Create a New Github Action to Automate Code Tasks with Javascript

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

Handy tips for boosting your productivity in GitHub. These are bite-sized things you can take advantage of today to boost your efficiency by 1% or more. What are you waiting for? Check 'em out! 

GitHub Tips & Tricks

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

GitHub Actions are a powerful workflow tool that allows you to write and use custom code to execute workflows. It's like a serverless CI/CD platform built directly into GitHub. We have access to GitHub's registries, our own repos, multiple platforms (Mac, Windows, Linux), runtimes (VMs and Containers), and languages (JS, Rust, Go, etc) to perform any action we want. We can trigger workflows using GitHub's own events, our custom events, or even scheduled events like a cronjob.

GitHub Actions at Work

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

Publishing a JavaScript library for public use requires some extra steps. You need to think about how people will use the library. From end users, to contributors your library now has a variety of people outside of yourself potentially making use of the code that you've released into the wild.

From Github and npm, to releasing beta versions, semantic versioning, code coverage, continuous integration, and providing your library with a solid set of unit tests, there are a ton of things to learn.

This series will guide you through a set of steps to publish a JavaScript open source library.

You might also enjoy [this article about contributing to open source](https://egghead.io/articles/get-started-contributing-to-javascript-open-source).

How to Write an Open Source JavaScript Library

“Feel free to submit a PR!” - words often found in GitHub issues, but met with confusion and fear by many. Getting started with contributing open source is not always straightforward and can be tricky. With this series, you’ll be equipped with the the tools, knowledge, and understanding you need to be productive and contribute to the wonderful world of open source projects. Much of this series speaks about GitHub, but most of the concepts are generally applicable to contributing to any open source project, regardless of where it’s hosted.

So enjoy the course and start contributing to the projects you use and love today!

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

How to Contribute to an Open Source Project on GitHub

In this lesson, we’ll apply our knowledge of `getopts` and create a script that opens a PR on Github, all without leaving your terminal. We’ll use `getopts` to take 3 options: username, password or token, and PR title. We’ll use any input after that as the body of the PR. We’ll validate the input and then use `curl` to POST it to Github. 

Create a Bash Script to Open a Pull Request on Github using getopts

In this video you'll learn Git-based deployment for web applications for both front-end and back-end resources using AWS Amplify and the Amplify Console.

Hosting & Continuous Deployment for Front End and Serverless Back Ends using AWS Amplify

GitHub Actions can be triggered to run on a schedule using cron syntax. In this video we go over what that means and how to write cron syntax. We also show a tool and a series of examples to aid in writing and debugging cron.

* https://crontab.guru/

Scheduling GitHub Actions with cron

GitHub Actions can feel daunting. Here's a walkthrough setting up your first action that runs some command line scripts on every push to master.

Using your first GitHub Action

GitHub Actions are a powerfully flexible workflow automation tool that lets you respond to GitHub events, your own arbitrary events (like webhooks), or scheduled events with workflows that run on Windows, Mac, or Linux in VMs and Containers. It's like a serverless CI/CD platform built into GitHub.

Introduction to GitHub Actions

If you make a mistake in a commit message but HAVEN'T pushed it yet, you can change that commit message with --amend:

`git commit --amend -m "New message"`

This won't change any of the files in your commit - but will rewrite the commit with the new message.

Change a Commit Message that Hasn't Been Pushed Yet

If we make a change to the same function both locally and remotely, then when we try to pull down the remote changes, we'll run into a conflict - and git won't pull the remote changes down.

So first, we'll use `git stash` to stash the local changes, and then `git pull` to get the remote changes.  To apply the stashed changed, we'll then use `git stash pop`

Since we changed the same function however, we'll get a merge conflict!  So we'll fix the merge conflict, and then add and commit that change.

Finally, we'll drop the change from the stash with: `git stash drop stash@{0}`

Use `git stash` to Save Local Changes While Pulling

If we try to make a pull request on github that has a conflict, there are a few ways to fix it.

We're going to first back out of the pull request, and then merge `master` into our feature branch.

We'll manage the merge conflict locally, and then do a new pull request (which will not have the conflict)

Fix a Pull Request that has a Merge Conflict

We've made a pull request and now we can clean up the branches by deleting the feature branch.

Branches are just pointers to commits - so we can safely delete branches without losing the underlying commits (once the commits are merged back into master).

So we'll use the github interface to delete the branch remotely, and to delete it locally we'll use `git remote prune origin --dry-run` and then `git remote prune origin`

That will tell us that the remote is gone, and we can finally clean up the feature branch with: `git branch -d feature-branch`

Cleanup and Delete Branches After a Pull Request

We make a .env file and accidentally push it to github.  

In order to remove the .env file, we first have to add it to our .gitignore file - but that's not enough, because the .env file will still be on the branch on github.

So we can remove all of our files from our git cache with:

`git rm -r --cached .`

and then add back all the files we want with:

`git add -A`

(that will exclude the .env file this time - because of the .gitignore file).

Then we can commit that change (which is effectively the same as removing the .env file), and push it, which will remove the .env file from the mater branch.

IMPORTANT! If you have secrets in a file that you remove in this way, you should still consider those secrets compromised, because anyone could have pulled them already - and they are also still in the git history.

git Ignore a File that has Already been Committed and Pushed

If we want to completely remove a file from github - including all history - there is a tool that we can use called the BFG.

The github help article is here:

https://help.github.com/en/github/authenticating-to-github/removing-sensitive-data-from-a-repository

And the BGF itself is available here:

https://rtyley.github.io/bfg-repo-cleaner/

We'll start by downloading the BFG jar file, and then cloning a mirror of our repo with:

`git clone --mirror [repo-url]`

Then we can delete our .env file with:

`java -jar ~/Downloads/bfg-1.13.0.jar --delete-files .env my-repo.git`

which will delete the .env file. Then we can use the following command to prune the entire history and garbage collect the remains:

`git reflog expire --expire=now --all && git gc --prune=now --aggressive`

And finally, use `git push` to push that change to github, and remove the .env file from all of the history on github as well.

Topics

Instructors

Content Type