Learn Microsoft, Puppeteer 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

End-to-end testing assures you of a few things: that all the integrated pieces of an application properly function, all those pieces work together as expected, and your tests include and simulate real-user scenarios — something unit and integration tests just don't do.

This course introduces you to two great tools for E2E testing: 

* Puppeteer opens and runs applications in a Chromium browser and performs the actions it's given.
* Jest asserts that the integrated pieces work as expected and that add-on libraries like Faker and pixelmatch take our tests to the next level.

Over 9 lessons, we will create common application features and use Puppeteer and Jest to run different types of tests against them. You'll get practice using these tools to render content, mimic user activity, automate tests, and measure the overall performance of your application.

jest

End to End Testing with Google's Puppeteer and Jest

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

In this lesson we are going to set up our basic app, set our environment variables, define our targeted viewport, and install Jest, Puppeteer, and Faker. We'll use these features to write our end to end tests. 

Setup and Install Dependencies for Testing with Google's Puppeteer

Now that we have our setup and environment ready for using Puppeteer to test our create-react-app, we can write our first tests. We will test our h1 and navigation, to make sure that they load correctly. In this lesson, we will be able to watch puppeteer open up a browser and evaluate our tests in real time. 

Test HTML Content on a Webpage with Puppeteer

In this lesson we are going to test a form submission by replicating keyboard input, mouse clicks, and touchscreen events. This will be done with random user information generated by Faker. We will test this in different contexts, including an iPhone 6 environment.

Replicate User Activity with Faker and Puppeteer

In this lesson we are going to test that a cookie is saved to the document whenever our login form is submitted. Then we will also learn how to set cookies from within our tests. 

Work with Document Cookies in Tests with Puppeteer

In this lesson we are going to write two tests that check our application for any console logs an page errors. We will also learn how we can log these out to our terminal. 

Check for Console Logs and Exceptions with Puppeteer

In this lesson we are going to take a screenshot and a pdf of our application. We'll add this to conditionally run when one of our tests fail. This way we can see what our test was seeing when it failed. These screenshots can help debug why tests fail. 

Save Screenshots of Applications with Puppeteer

In this lesson, we are going to fetch the Star Wars api from a React lifecycle method. Then inside of our tests we will intercept the request and abort it. Finally we'll test that our error message works as intended. 

Handle Page Requests in Tests with Puppeteer 

Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome or Chromium.

puppeteer

In this lesson we are going to send commands to the chromium browser with Puppeteer. These commands will enable us to calculate both the total number of CSS stylesheets used on the page and the ruleUsage for each of those stylesheets. With these metrics we will be able to calculate the percentage of unused CSS on the page. 

Get the Percentage of Unused CSS on a Page with Google's Puppeteer

In this lesson we are going to use the firstPaintTime metric from chrome's load times, as well as the navigation start from the W3C window metrics, to calculate how long it takes a page to paint. We will set up a quick function and test it out on google.com

Calculate a Page's First Paint Time with Puppeteer

In this lesson we are going to use Google's Puppeteer to gather metrics about a page's load time. We'll use a high level date subtraction method as well as gather data from the window performance timing. Then see how throttling the network to 3G affects the page's load time. 

Get a Page's Load Time with Puppeteer

It can be helpful when automating tests, metrics, and integration tools to know not only how much JavaScript there is on a page but to calculate how much is not being used. We are able to calculate the percentage of JS used by getting metrics from the window object. 

Get the Percentage of Unused JS on a page with Puppeteer

Take your end to end tests to the next level by comparing your current application's view with an already accepted screenshot. With the combination of running a live chromium browser, taking a screenshot and running a pixelmatch test, we are able to make sure our UI matches exactly as intended. We will make the test pass and then have it fail by adding an extra p tag to our App.js

Visual Differing Tests with Puppeteer and PixelMatch

The goal of this course is to teach you how to use the tools to write end to end tests. End to end testing involves assuring that all the integrated pieces of an application function and work together as expected. These types of tests simulate real user scenarios, essentially testing how a real user would use the application. They fill the gaps that unit and integration tests just can't cover.

Puppeteer is a core piece of these tools. When used correctly it can open and run applications inside a chromium browser and perform the actions it's given. Jest is used to assert that the integrated pieces work as expected and other add-on libraries such as faker and pixelmatch, take our tests to the next level. 



Course Introduction: Testing with Puppeteer and Jest

Microsoft Windows is a group of several graphical operating system families, all of which are developed, marketed, and sold by Microsoft. Each family caters to a certain sector of the computing industry.

microsoft

For a production Windows server it makes sense to run NodeJS applications as a Windows service.  This way they can be automatically restarted if the server is rebooted.

It also makes it easier to use monitoring tools like datadog to detect if there are issues with the service which is critical for production systems.

Install a Node.js Application as a Windows Service

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

express

To replicate your production application its helpful when developing a local NodeJS Express application is running under SSL. 

There are some web technologies which do not play nicely with standard http and its likely to become more common e.g. Web Push Notifications.

This lesson will show you how to create a local SSL certificate for localhost and then convert it into a format that will work with Express.  It will also show you how to make sure that Chrome will trust it.

This lesson is for Windows as it uses a powershell command, as well as the Microsoft Management Console (MMC)
 

Create Local SSL Certificates for an Express App on Windows

In this lesson you will learn how to attach Event Handlers to buttons and input fields. Event handlers normally follows the `on:[event]` format. If you are making use of two way binding you should use `bind:` instead, for example an input field could use bind:value.

Use Event Handlers in Svelte 2

Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.

flutter

We will setup our first command-line Dart application. We will use the Chocolatey package manager to install the SDK and write our first  program. This will form the basis for future lessons.

Get Chocolatey → https://chocolatey.org/docs/installation

Get the gist of commands → https://gist.github.com/creativebracket/128dafcbbfdc1d6946231a931f95cb1b