Learn Ngrx-store, Puppeteer and Python

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

As your Angular application grows, it becomes more difficult to manage application state.

NgRx can help with that!

In this course, we will learn how to convert an Angular application from using stateful services into using NgRx.

We will accomplish this by adding a new feature, including building a reducer and actions. We'll also touch on using selectors to query our state, managing collections with NgRx entity, async operations, and hiding implementation details with the facade pattern.

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

Reactive State Management in Angular with ngrx

Neural networks, with Keras, bring powerful machine learning to Python applications. They can answer questions like “How much traffic will hit my website tonight?” or answer classification questions like “Will this customer buy our product?” or “Will the stock price go up or down tomorrow?”

In this course, we’ll build a fully connected neural network with Keras. This is the most basic type of neural network you can create, but it’s powerful in application and can jumpstart your exploration of other frameworks. 

We’ll start the course by creating the primary network. Then we’ll:

- build and configure the network, then evaluate and test the accuracy of each
- save the model and learn how to load it and use it to make predictions in the future
- expose the model as part of a tiny web application that can be used to make predictions

You don’t need to know a lot of Python for this course, but some basic Python knowledge will be helpful. Enjoy!

Python is a widely used dynamically typed programming language. It allows for many different programming paradigms including object-oriented, imperative, functional programming, and procedural styles.

python

Fully Connected Neural Networks with Keras

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

In Introduction to Python, we will start at the beginning: Installing python 3 and using virtual environments. With a working environment, we will learn how to manipulate strings and numbers, and gain working knowledge of data structures and flow control. We will build on that by introducing modules and classes and learn how to interact with our python applications using command line switches, console input and files.

At the end of this course, you’ll have a great working knowledge of Python, fully capable of creating your own Python projects from scratch or jumping into an existing application with the capability to read, understand, and contribute to the application.

Check out these [**community notes for this course on Github**](https://github.com/eggheadio-projects/introduction-to-the-python-3-programming-language-notes).

Introduction to the Python 3 Programming Language

Artificial intelligence. Machine learning. Bots. Computers learning and communicating with us to do our bidding. But, where do you start? How do you get a machine to even begin to understand what you speak or type at it? There are several common machine learning algorithms that will help us begin to answer these questions.

In this course we’ll learn about common machine learning algorithms that don’t require implementing a neural network. We will not be going too much into the math behind them, but instead learn what each algorithm is good for, and how to train them. We'll also learn about a few metrics for evaluating models.

We’ll implement these in Python using `scikit-learn` using `scikit-learn`’s built-in data sets. The focus of this course is on implementation and a high-level understanding of these algorithms. 

We'll look at a few ways to evaluate our models, for both classification and regression models. We'll touch on mean squared error and coefficient of determination (for regression), and accuracy score, logarithmic loss, confusion matrices, and classification reports (for classification). 

Python 2.7 is used in the lesson videos but the code provided has Python 3 available. The only breaking change is the `print` statement API.

For additional information on installation, vocabulary, and common errors visit the `README.md` to the course code attached to each lesson.

Simple and efficient tools for data mining and data analysis

scikit-learn

Introductory Machine Learning Algorithms in Python with scikit-learn

AWS Amplify allows developers to create, configure, and deploy Serverless APIs and functions directly from their front-end environment.In this collection, you'll learn how to deploy various types of APIs and functions using the Amplify CLI. You'll also learn how to share code among various functions using Lambda layers and schedule functions to run at an interval to implement Serverless cron jobs.

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

Up and Running with AWS Amplify Functions

***Note: RxJS imports have changed since the publication of this course. The concepts being taught on RxJS are still applicable.**

Angular has many built-in features for working closely with RxJS to help you build entirely reactive applications. This course will teach you how to use Angular with RxJS. We will learn how to use the ngrx/store library to manage state in a clean, reactive "Redux style."

This course assumes you've got a working knowledge of Angular and reactive programming with RxJS. If you don't, you might want to watch the following courses to get you up to speed! 
- [Get Started with Angular](https://egghead.io/courses/get-started-with-angular) 
- [Introduction to Reactive Programming with RxJS](
https://egghead.io/series/introduction-to-reactive-programming). 
- [Step by Step Async Programming with RxJS](https://egghead.io/series/step-by-step-async-javascript-with-rxjs) 
- [Getting Started With Redux](https://egghead.io/series/getting-started-with-redux), a course by Redux's, Dan Abramov.

We also have Intermediary Angular courses if you'd like to acquire more in-depth knowledge. 
- [Dependency Injection](https://egghead.io/courses/angular-2-dependency-injection-di-explained
- [Components, Directives](https://egghead.io/courses/building-angular-components)
- [Forms](https://egghead.io/courses/intro-to-angular-forms)
- [Router](https://egghead.io/courses/intro-to-angular-router)
- [Animating Web Apps](https://egghead.io/courses/animate-angular-web-applications)



Build Redux Style Applications with Angular, RxJS, and ngrx/store

Learn how to create tuples in Python. The videos in this collection will also cover more advanced features of tuples

The Ins and Outs of Python Tuples

Sometimes you get strings instead of objects and you have to parse them out. Here's an example where the raw data I got from a Twitch chatbot message wasn't useful to me until I parsed it into a dictionary.

Turning a key/value string into a dictionary in Python

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

When taking screenshots, it's important that the browser is big enough to show all of the content in the DOM that we want to screenshot. We can do this by setting the viewport.

Setting the viewport on a Playwright headless browser

In this lesson, you'll learn how to deploy a serverless function using the Python runtime, connect it to an API endpoint, and interact with it from a React application.

Creating a full stack serverless app with Python, React hooks, and AWS Amplify Functions

Using the `open` function, and the `as` and `with` keywords, we'll open up and read from a file. At the end of this lesson, you will be able to loop through the lines of text in a file, process the text in Python, and then print them to the terminal.

Read from a File in Python

Learn how to create a tuple in Python. A tuple is an immutable data type that contains several items similar to a list. Items in a tuple can be of any data type.

Create a Tuple in Python

Learn to create a one item tuple. When creating a one item tuple, a comma has to be included after the item. Otherwise, your tuple will not return tuple as its data type. 

Create a One Item Tuple in Python

Tuples are immutable so there is no way to add or replace items in tuples. There is a way to get around this by adding two tuples into one. 

Understand Immutability with Python Tuples

Reducers are also often used for changing a single property inside of other reducers. This lesson shows how a type can enter the people reducer, but then the people reducer can use a different type to call the clock reducer and get a value back.

Use a Reducer to Change an Object's Property Inside an Array

This lesson summarizes everything the course has covered and how Angular 2, RxJS, and ngrx/store work together to achive a reactive application.

Review of Angular 2, RxJS, and Reducers from ngrx/store

The scan operator in RxJS is the main key to managing values and states in your stream. Scan behaves just as a reduce function would, but scan is able to collect values from streams over time. This lesson covers using startWith to set the initial accumulator value then using scan to update the value of the clock from the clicks and interval.

Manage State in RxJS with StartWith and Scan

While you have multiple streams flowing into your scan operator, you'll need to map each stream to the specific values you need to update your state the way that you want. This lesson covers using the map operator to determine what the click and interval should do when the state is updated.

Map Streams to Values to Affect State

Angular templates use a special Async pipe to be able to render out Observables. This lesson covers the syntax used to create an Observable in Angular and then to render it out in the template.

https://github.com/johnlindquist/rxjs-in-angular2/tree/11aa4c29a4536dad0ef26b78d8f7f503e4372f74/src

Topics

Instructors

Content Type