 Resources from Basarat Ali Syed in 2022

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Learn the fundamentals of creating, resolving and rejecting promises using TypeScript. We also cover the fundamentals of a `.then` chain.

We will see how the Promise constructor takes an executor callback which will be called at runtime with two arguments (resolve and reject).

Promise Fundamentals using TypeScript

async / await should really be thought as a better way to use Promises reliably and safely with less chances of programming errors.

This lesson covers the fundamentals of annotating a function as async. An `async` function gets the chance to use the `await` keyword. This lesson covers the usages of these keywords.

Write Async Functions with the async/await Operators

The great thing about asynchronous programming is that you can do multiple things in parallel. E.g. you can make multiple network requests, or read multiple files from the file system. 

This lesson covers how to write parallel as well as serial async code.

Execute Promises in Parallel and Serial using async / await

The `for-await-of` syntax is similar to the `for-of` iteration. The key difference is that it automatically awaits any promises generated by the iterator. This lesson covers how to consume async data sources easily with `for-await-of`.

`for-await-of` essentially allows you to use `async/await` in a generator function.

Asynchronous Iteration using for-await-of

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

React is great for diffing between Virtual-DOM and rendering it to the dom. It also offers a naïve solution for diffing state in terms of `setState`. However it is slightly verbose and not easy to scale. MobX offers a very simple and effective solution to manage state in React components.

Using MobX to Isolate a React Component State

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

The goal of this course is to give you a solid understanding of how  `async / await` works and how to use it effectively with TypeScript.

To start, we will look at `Promise` basics and see how `.then` and `.catch` are greatly simplified by `async / await`. We will then look at methods for executing asynchronous code in serial (the default), in parallel (with `Promise.all`), and Async iteration.

All with the added benefit of code analysis and error checking by TypeScript. Here's a little intro to the course material. I hope you enjoy the course!

async / await using TypeScript Course Overview

In this lesson we test the functionality of a React components using Jest and Ezyme.

Test React components and dom using Enzyme

The maximum subarray problem is one of the nicest examples of dynamic programming application.

In this lesson we cover an example of how this problem might be presented and what your chain of thought should be to tackle this problem efficiently.

Maximum Contiguous Subarray algorithm implementation using TypeScript / JavaScript

Cypress is an E2E testing tool designed specifically to be easy to use for frontend developers. In this lesson we test the functionality of a React application using Cypress.

Test React Applications with Cypress

In this lesson we take a deeper look at `@actions` how they allow you to perform mutation in a controlled manner. We also see how MobX gives you application wide amazing `PureComponent` performance nearly for free without having to use complicated JavaScript patterns or immutable data libraries.

 Understand and Control Mutations with MobX Dev Tools and @action in React

MobX provides a neat little `@computed` decorator to exploit the *I know when you change* nature of observables for performance, fun and profit. 

In this lesson we look at an example use case for `@computed` getters and their performance advantages.

Optimize Performance in a React App with MobX @computed Properties

In this lesson we look at a maintainable `state classes` pattern for MobX-React applications. Modelling the real world is the core reason of existence for Classes and Mobx makes using these classes / their properties and their methods really easy for reactive (UI is just a reaction of the state) React applications.

Maintainable Application State React Class Pattern using MobX

The state class pattern can easily be expanded to allow you to create component-ui / component-state pairs that provide reuseable functionality for your applications. 

In this lesson we look at an example of creating a reuseable input component. 

We also mention a re-useable form state management library that uses the state class pattern. 

Creating Reusable State Class Driven React Components

MobX is independent of React and really you can use whatever testing framework you want with it. Testing MobX is essentially as easy as testing simple JavaScript. 

This lesson demonstrates an example of testing mobx application state with Jest.

Test a React Applications using MobX with Jest

Developing logic rich applications is becoming more and more common nowadays. The TypeScript-React combination enables a great developer experience in terms of writing understandable and refactorable HTML. However the default state management for React leaves much to be desired in terms of *simplicity* and *maintainability*. MobX can great enhance your state management developer experience as we cover in this course.

React with Mobx and TypeScript course introduction

Playwright is a framework for reliable end-to-end testing of modern web apps.

playwright

In this lesson we demo how you can quickly get setup and start using Microsoft Playwright for cross browser Web Application testing.

Setting up Microsoft Playwright

In this lesson we look at how you can add playwright to your existing web application. Along the way we also look at other neat stuff like beforeEach, describe, async web-first matchers and the hasText locator option.

Adding Playwright to your Web App

This lesson covers the basics of Playwright's testing API such as the page object, locator, locator methods and expect.

Playwright Tests API Basics

Visual Studio Code is an integrated development environment (IDE) built and maintained by Microsoft. It is offered free of charge.

vscode

We look at the various features of the VSCode Extension for Playwright and how it can help you with your testing workflow.

Playwright VSCode Extension

In this lesson we look at how you can do simple VRT (visual regression testing) using Playwright tests.

Visual Regression Testing with Playwright

In this lesson we look at how you can use the playwright inspector to debug any issues in your tests. We run through a sample test and guide you through the various portions of the playwright inspector UI.