Egghead Instructor Basarat Ali Syed

Basarat Ali Syed

That #TypeScript guy. Helping #JavaScript - TS upgrades. YouTuber, Book Author, Presenter, OSS Dev .



Support Basarat's Free Lessons
become a member today

Browse Basarat Ali Syed's lessons.

showing 40 lessons...

Generate static css + html files using TypeStyle

Use fallback values in TypeStyle for better browser support

Render HTML/CSS server-side using TypeStyle

Use TypeStyle keyframes to create CSS animations

Load raw CSS in TypeStyle

Compose CSS classes using TypeStyle

Style CSS pseudo elements with TypeStyle

Style CSS pseudo-classes using TypeStyle

Add responsive styles using TypeStyle Media Queries

Reusable styles using TypeStyle mixins

Add type safety to CSS using TypeStyle

Binary Search Algorithm using TypeScript

Quicksort algorithm using TypeScript

Create random integers in a given range

Find the repeated item in an array using TypeScript

Merge sort algorithm using TypeScript

Insertion sort algorithm using TypeScript

Bubble sort using TypeScript

Determine if a string is a palindrome

Determine if two strings are an anagram

Deep Copy aka Clone objects using TypeScript

Case insensitive sorting for string arrays

Create high quality npm packages using TypeScript

Generics using TypeScript

Sort arrays in TypeScript

Getting started with Jest using TypeScript

Serialize objects to JSON

Understand the FizzBuzz coding problem and its solution

Using ES6 and ESNext with TypeScript

Create a fluent API using TypeScript classes

Using TypeScript for pure JavaScript

Create stateful React Components using TypeScript

Increase TypeScript's type safety with noImplicitAny

Create stateless React components using TypeScript

Bootstrap a TypeScript + React Project

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

Make usages of "this" safe in class methods

Catch unsafe use of "this" in TypeScript functions

Simplify asynchronous callback functions using async/await

Render Basic SVG Components in React

css tutorial about Generate static css + html files using TypeStyle

Generate static css + html files using TypeStyle

3:08 css

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.

css tutorial about Use fallback values in TypeStyle for better browser support

Use fallback values in TypeStyle for better browser support

2:42 css

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.

css tutorial about Render HTML/CSS server-side using TypeStyle

Render HTML/CSS server-side using TypeStyle

5:20 css

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.

css tutorial about Use TypeStyle keyframes to create CSS animations

Use TypeStyle keyframes to create CSS animations

3:13 css

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.

css tutorial about Load raw CSS in TypeStyle

Load raw CSS in TypeStyle

1:51 css

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.

css tutorial about Compose CSS classes using TypeStyle

Compose CSS classes using TypeStyle

4:05 css

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.

css tutorial about Style CSS pseudo elements with TypeStyle

Style CSS pseudo elements with TypeStyle

2:33 css

Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of an element.

In this lesson we show how you can insert new content into the DOM using CSS pseudo elements. We also cover using other pseudo element selectors to change default browser behaviors.

css tutorial about Style CSS pseudo-classes using TypeStyle

Style CSS pseudo-classes using TypeStyle

2:51 css

TypeStyle is a very thin layer on top of CSS. In this lesson we show how to change styles based on pseudo classes e.g. :focus :hover and :active which matches very closely with what you would write with raw CSS.

css tutorial about Add responsive styles using TypeStyle Media Queries

Add responsive styles using TypeStyle Media Queries

2:20 css

Media queries are very important for designs that you want to work on both mobile and desktop browsers. TypeStyle gives media queries special attention, making it easy to write them using CSS in JS.

In this lesson we show TypeStyle's media function. We also demonstrate how you can add non standard media queries if you want. Finally we show how organizing media queries this way is encapsulated under CSS class names.

css tutorial about Reusable styles using TypeStyle mixins

Reusable styles using TypeStyle mixins

2:17 css

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.

css tutorial about Add type safety to CSS using TypeStyle

Add type safety to CSS using TypeStyle

4:13 css

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

typescript tutorial about Binary Search Algorithm using TypeScript

Binary Search Algorithm using TypeScript

3:05 typescript

Binary search is a very fundamental algorithm in Computer Science. It powers BSTs (binary search trees) which form the basis of modern databases and immutable data structures. Binary search works very much the way humans intuitively search for a name in a yellow pages directory (if you have ever seen one) or the dictionary.

In this lesson we learn how to implement a Binary Search Algorithm using TypeScript / Javascript, and we describe the problem that it solves.

typescript tutorial about Quicksort algorithm using TypeScript

Quicksort algorithm using TypeScript

5:49 typescript

Quicksort (also called partition sort and pivot sort) is arguably the most used sorting algorithm. It is the one commonly implemented internally in language runtimes.

We’ll be covering step by step a recursive approach to solving the quick sort algorithm with TypeScript / Javascript and why exactly it’s called quick sort.

typescript tutorial about Create random integers in a given range

Create random integers in a given range

1:53 typescript

In this lesson, using TypeScript / Javascript, we learn how to solve a common problem given to new developers in interviews, generate a random number between two integers.

typescript tutorial about Find the repeated item in an array using TypeScript

Find the repeated item in an array using TypeScript

1:44 typescript

Say you have an array that has at least one item repeated. How would you find the repeated item. This is a question commonly presented to beginner developers. Here we discuss the elegant solution to this problem.

typescript tutorial about Merge sort algorithm using TypeScript

Merge sort algorithm using TypeScript

5:39 typescript

MergeSort is a famous example of a divide and conquer algorithm.

In this lesson we cover the merge sort algorithm, how it gets its name, and how to implement it using TypeScript / JavaScript.

typescript tutorial about Insertion sort algorithm using TypeScript

Insertion sort algorithm using TypeScript

3:43 typescript

Insertion sort is a very intuitive algorithm as humans use this pattern naturally when sorting cards in our hands.

In this lesson, using TypeScript / Javascript, we’ll cover how to implement this algorithm, why this algorithm gets its name, and the complexity of our implementation of the insertion algorithm.

typescript tutorial about Bubble sort using TypeScript

Bubble sort using TypeScript

3:25 typescript

Bubble sort is considered the simplest sorting algorithm to implement. We’ll approach the problem in two ways. Once using a set number of iterations, and next using an idiomatic approach.

We’ll be covering this problem using TypeScript / Javascript

typescript tutorial about Determine if a string is a palindrome

Determine if a string is a palindrome

3:35 typescript

A palindrome is a string that reads the same forward and backward, for example, radar, toot, and madam. In this lesson we discuss how to approach the palindrome problem using TypeScript / JavaScript.

We also discuss a more complex algorithmic challenge of writing a function to check if any permutation of a given string is a palindrome.

typescript tutorial about Determine if two strings are an anagram

Determine if two strings are an anagram

3:52 typescript

The anagram test is commonly used to demonstrate how an naive implementation can perform significant order of magnitudes slower than an efficient one. We’ll also briefly go over why each implementation is not as efficient as you could make it.

A word is an anagram of another if you can rearrange its characters to produce the second word. Here we’ll write multiple increasingly more efficient functions that given two strings determines if they are anagrams of each other.

typescript tutorial about Deep Copy aka Clone objects using TypeScript

Deep Copy aka Clone objects using TypeScript

2:25 typescript

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.

typescript tutorial about Case insensitive sorting for string arrays

Case insensitive sorting for string arrays

1:33 typescript

We look at the default Array.prototype.sort behavior and discuss how you can do case insensitive string sorting. This isn’t as straightforward as it seems, Javascript by default sorts capitalized words before lowercase. In this lesson we’ll learn exactly how to deal with this behavior using TypeScript.

typescript tutorial about Create high quality npm packages using TypeScript

Create high quality npm packages using TypeScript

3:54 typescript

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.

typescript tutorial about Generics using TypeScript

Generics using TypeScript

5:16 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.

typescript tutorial about Sort arrays in TypeScript

Sort arrays in TypeScript

3:54 typescript

In this lesson we cover all the details of how to sort a list of items using TypeScript. There are a few things that will catch beginner developers off guard, such as the .sort method mutating your array, and how the .sort method doesn’t sort numbers how you’d expect. In this lesson we’ll be going over these gotcha’s and how to work around them.

We’ll also present a few tricks to make your sort logic more readable and maintainable using TypeScript.

typescript tutorial about Getting started with Jest using TypeScript

Getting started with Jest using TypeScript

3:17 typescript

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.

typescript tutorial about Serialize objects to JSON

Serialize objects to JSON

4:32 typescript

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate.

Doing JSON serialization and deserialization in JavaScript and TypeScript is super easy as it is a format essentially designed for this language. This lesson covers the JSON.stringify primitive provided by JavaScript runtimes.

typescript tutorial about Understand the FizzBuzz coding problem and its solution

Understand the FizzBuzz coding problem and its solution

4:19 typescript

The FizzBuzz problem is commonly presented as the lowest level of comprehension required to illustrate adequacy in computer programming.

In this lesson you learn about the problem as well as its solution in TypeScript. We will also cover some tricks on approaching the problem and coding interview questions in general.

typescript tutorial about Using ES6 and ESNext with TypeScript

Using ES6 and ESNext with TypeScript

2:49 typescript

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.

typescript tutorial about  Create a fluent API using TypeScript classes

Create a fluent API using TypeScript classes

3:09 typescript

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.

typescript tutorial about Using TypeScript for pure JavaScript

Using TypeScript for pure JavaScript

2:15 typescript

TypeScript can actually be used just as a JavaScript -> JavaScript Transpiler e.g. ES6 -> ES5. This allows you to easily maintain your old JavaScript code base along with potentially uplifting to a TypeSafe version using a single compiler.

typescript tutorial about Create stateful React Components using TypeScript

Create stateful React Components using TypeScript

2:56 typescript

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

typescript tutorial about Increase TypeScript's type safety with noImplicitAny

Increase TypeScript's type safety with noImplicitAny

2:24 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.

typescript tutorial about Create stateless React components using TypeScript

Create stateless React components using TypeScript

1:13 typescript

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.

typescript tutorial about Bootstrap a TypeScript + React Project

Bootstrap a TypeScript + React Project

5:54 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.

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

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

1:24 typescript

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.

typescript tutorial about Make usages of "this" safe in class methods

Make usages of "this" safe in class methods

0:59 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.

typescript tutorial about Catch unsafe use of "this" in TypeScript functions

Catch unsafe use of "this" in TypeScript functions

1:04 typescript

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.

typescript tutorial about Simplify asynchronous callback functions using async/await

Simplify asynchronous callback functions using async/await

1:48 typescript

Learn how to write a promise based delay function and then use it in async await to see how much it simplifies code over setTimeout.

Lets say you want to call a function after 1s, 2s, 3s. You can use setTimeout, or you can wrap it up into a simple delay function that works with async/await

react tutorial about Render Basic SVG Components in React

Render Basic SVG Components in React

1:35 react

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?