Learn Flux, Puppeteer and Vim

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

Vim is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple OS X.

Vim Videos for Beginners

Vim is a classic text editor that saw its first incarnation in 1976. Used around the world across most platforms, the ability to drop into a computer, open a command prompt and type `vim` is a simple yet powerful concept.

In this course we will take a tour of Vim, and learn the essentials you need to know to start being productive with this powerful text editor. We will learn about basic movement through a file in Vim without a mouse, loading and saving files, commanding the Vim editor, and get started customizing Vim to suit your needs.

Learn to Use VIM

The Vim editor is a text editor that lives inside of your terminal. Learn how to start Vim, and more importantly how to exit out of the editor! 

Intro to Vim

Learn how to efficiently move around Vim and stop reaching for your mouse

Moving around in Vim

Vim likes to keep you in normal mode at all times. But this can be difficult when trying to delete or change some text in a file. Thankfully Vim has build commands to make this a breeze

Vim's built-in commands

One of Vim's most unique features are it's different modes. Learn how to use these modes and speed up your editing

Vim's different modes

We've learned how to add text in Vim using insert mode, now what about saving that file? We'll go over how to use Vim's write command. 

Saving Files in Vim

We've gone over some of the basic Vim key commands, but what else can you do with them? We'll go over how you can compose them and to create more powerful commands

Combining Vim commands 

Sometimes you just need to copy some code from one file to another. Vim allows you to do this, in a quick and efficient way. 

Copy and Paste inside of Vim

Vim's defaults leave the editor in a pretty minimal state. Let's look at some of options we can configure to make Vim feel more like a traditional editor

Configure VIM

Now that you know how to enable features in Vim, let's store all of them in one place so we don't need to constantly set them all the time.

The Vim Config file

Vim has the ability to extend its functionality through plugins that can be installed either manually or through plugin managers. We'll setup the [vim-plug](https://github.com/junegunn/vim-plug) manager to install plugins for our `.vimrc` 

Introduction to Vim Plugins

Actions contain no functionality, but rather describe an event in our application.  In this lesson we will describe our Actions as they relate to our application.  These Actions will then be available for triggering in our Views and for execution in our Store.

React Flux: Actions

In Flux our Components are referred to as Views, but they are the same familiar Components associated with any React development.  In Flux, however, we have the benefit of the architecture to keep us from having to pass down through a long chain of children Components any functionality that may be embedded in our Stores.  In this Lesson we will wire up all of our Components in record time utilizing the architecture we've already established.

React Flux: Components/Views

Stores are where the real work in our application is done.  Dispatchers broadcast Actions to all Stores, and the Stores registered to listen for those Actions will perform any logic needed to update our Views.  In this lesson we will establish our first Store and register the Actions we wish to respond to.

React Flux: Stores

Our build process during this series will utilize both gulp and browserify.  In this lesson we will take a moment to setup our environment and all of the tooling required to begin developing our Flux Application.  We've kept the build process very simple so porting it to grunt should be a breeze, but this also serves as a simple primer for those who may not be familiar with gulp.

React Flux: Development Environment Setup

Organizing modules and components is a critical aspect of the development of any single-page web application (SPA). In this lesson we will look at refactoring the Flux React store into a more module structure.

React Flux: Project Organization

Flux has four major components: Stores, Dispatchers, Views, and Actions.  These components interact less like a typical MVC and more like an Event Bus.  In this lesson we will start by creating our Dispatcher which queues up our Actions as Promises and executes them as they are received.  We'll also create an AppDispatcher which, unlike the Dispatcher, is more specific to our application.

React Flux: Overview and Dispatchers

As your React Flux application grows, it is inevitable that you start to see functionality and code repeated. With React, you can easily keep things DRY by using mixins.

React Flux: Remove Duplicate Code with Mixins

With this lesson, we will bring it all together, using what we've learned in the series to fisnish out the React Flux architecture example.

The completed code for this series can be found [here on Github](https://github.com/eggheadio/egghead-react-flux-example).

Search

Search Results