 Resources from Basarat Ali Syed in 2021

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

typescript

We cover CSS keyframes and how to create them using TypeStyle. We then show how to use the keyframes function to create an animation. We also discuss a few other CSS properties in the `animation` namespace.

Use TypeStyle keyframes to create CSS animations

You can increase the browser support of your CSS using fallback values and vendor prefixes. This lesson covers using vendor prefixes and fallback values (single prop multiple values) with TypeStyle. It also shows best practices for maintaining variables in the presence of vendor prefixing.

Use fallback values in TypeStyle for better browser support

Cascading Style Sheets bring order and beauty to our applications.

You can easily use TypeStyle to build static html files with encapsulated CSS. You can use this pattern to generate email and pdf template files. Since TypeStyle supports cssRaw all your css can be easily inlined into a single file making it easy to work with template rendering engines.

Generate static css + html files using TypeStyle

Here we show how to return CSS + HTML as a server response. And then rehydrate it on the client. Server side rendering is great for SEO and first load performance.

TypeStyle supports server side rendering CSS out of the box.

Render HTML/CSS server-side using TypeStyle

We will demonstrate composing classes using the utility classes function. `classes` is also what we recommend for theming. Using pure CSS classes means that the component consumers are free to customize the component using any technology (not just TypeStyle). `classes` is also what is recommended for conditionally applied TypeStyle CSS class names. 

Compose CSS classes using TypeStyle

`this` is probably the most tricky thing to use in JavaScript and therefore TypeScript. Fortunately there is a TypeScript compiler flag `noImplicit` `this` that can help catch unsafe usages so beginners don't get caught off guard.

Catch unsafe use of "this" in TypeScript functions

Programming language design does have a concept of bottom type that is a natural outcome as soon as you do code flow analysis. TypeScript does code flow analysis (😎) and so it needs to reliably represent stuff that might never happen. This is what the never type is all about.

Use the never type to avoid code with dead ends using TypeScript

In this lesson we cover the key reason why programming languages need generics. We then show how use them effectively with TypeScript. We show plenty of examples where generics prevent common programming mistakes.

Generics using TypeScript

TypeScript tries to infer as much about your code as it can.

But sometimes there really is not enough context for it to infer reliably. If it tried to do such inference it would potentially result in more nuisance than help. So instead it infers the type `any`. This type can catch people off guard as it provides very little type safety. Fortunately TypeScript has a flag to make it easier to catch such unsafe code at development time.


Increase TypeScript's type safety with noImplicitAny

You can create an easy to chain API using TypeScript classes. Learn about the `this` return type annotation and how it plays with function chaining and class inheritance.

 Create a fluent API using TypeScript classes

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

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.

Topics

Instructors

Content Type