 Courses from Basarat Ali Syed

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

typescript

TypeStyle is the only current CSS in JS solution that is designed with TypeSafety and TypeScript developer ergonomics in mind. 

In this lesson we will show how easy it is to setup with zero configuration and also demonstrate its UI framework agnostic nature. We will also show how to integrate it with your application framework of choice using ReactJS as an example

Add type safety to CSS using TypeStyle

TypeStyle’s style function allows you to give multiple objects as an argument. This provides a simple extensible reuse-ability model. We cover typestyle mixin and mixin creators in this lesson. We also demonstrate that you have the full power of JavaScript at your disposal when using TypeStyle. 

Reusable styles using TypeStyle mixins

You can create copies of JavaScript objects by coping around properties e.g. `const x = {foo: 123}; const y = { foo: x.foo }`. However doing this manually for deep objects can be time consuming. In this lesson we cover one way of deep copying simple objects in TypeScript.

Deep Copy aka Clone objects using TypeScript

Cascading Style Sheets bring order and beauty to our applications.

TypeStyle tries to be an all in one CSS in JS management solution so you can always fall back to raw CSS if you ever need to migrate old code quickly. This lesson will demonstrate how to use the `cssRaw` function along with the real world use case of CSS resets e.g. `normalize.css`.

Load raw CSS in TypeStyle

The TypeScript compiler makes it super easy to create high quality NodeJS packages that can be used with compile time safety in other TypeScript packages.

Using JavaScript packages written in TypeScript can save you a lot of time digging around docs and then having to memorize the docs, in order to call the functions with the right spellings. This frees you up for a higher level of thinking and reasoning about logic and business requirements.

Create high quality npm packages using TypeScript

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

You can create a stateless React component in TypeScript by just creating a function. 

But if you want to create high quality idiomatic React + TypeScript components you should use the `React.StatelessComponent` interface. This is demonstrated in the video.

Create stateless React components using TypeScript

Setup a TypeScript + React project from scratch using webpack. Learn the reason behind every line that you need to type and become an expert.

Bootstrap a TypeScript + React Project

TypeScript is very particular about what is and isn't allowed in a TS file to protect you from common developer errors. By default if you set the compile target to ES5 it only allows you to use globally defined variables that were available in the ES5 time-frame. That said it is super easy to configure TypeScript to use ES6 or ESNext using the `lib` option. 

We also cover how to make sure that these features work across the widest range of browsers using a simple polyfill.


Using ES6 and ESNext with TypeScript

React loves svg just as much as it loves html. In this lesson we cover how simple it is to make SVG components in ReactJS.

Creating SVG components with React allows you to inline SVG. Inline SVG has an advantage that it can be styled with CSS just like the rest of your webpage and doesn't need a separate web request to load.

An additional advantage is of-course that you can use component props to customize the contents of the SVG.

Render Basic SVG Components in React

You can create stateful React Components in TypeScript by extending from the React.Component class. This parent class takes two generic parameters, Props and State. 

This lessons shows these generic parameters and React.Component in action

Create stateful React Components using TypeScript

jest

Jest is a painless JavaScript unit testing framework from Facebook. It is designed to be super easy to setup and is packed full of powerful features. In this lesson we see how easy it is to add to your TypeScript project. This will be followed by a quick example application.

Getting started with Jest using TypeScript

`this` is determined by *how you call a function*. To write class methods that can always safely use `this` you can use the TypeScript property initializer syntax along with arrow functions.

Make usages of "this" safe in class methods

The median maintenance problem is a common programming challenge presented in software engineering job interviews.

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.

Median Maintenance algorithm implementation using TypeScript / JavaScript

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 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

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.

Search Results