 Resources from Basarat Ali Syed in 2021

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

Developing logic-rich applications is a key skill to have.

The TypeScript–React combination helps you unlock that skill, and it’s a great developer experience in terms of writing understandable and refactorable HTML. But the default state management for React has a long way to go to feel simple and maintainable — and that’s where MobX makes your life so much easier. MobX keeps things simple without using complicated setups like `provider` and `connect` that provide way too little value for all the mental overhead. 

In this course, you’ll see how to model your React application logic using simple JavaScript classes — and with the help of MobX, make those classes the beating heart of your React applications. You’ll learn:

- that you don't need advanced annotations and TypeScript features to use MobX
- how to easily refactor code through TypeScript
- how to use TypeScript to track the flow of state as properties change

Develop React Applications with Mobx and TypeScript

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

typescript

Algorithms are the basic construction of the computer programs that you are writing every day. They take language syntax and the machine uses that information to carry out our commands. While "everything is an algorithm!" is basically a true statement, we also have quite a bit of thought and effort put into defining formal algorithms. Understanding these formal algorithms helps you as a developer so that you won't need to re-invent the wheel every time you sit down to solve a problem.

They also come up quite a bit as "whiteboard problems" in programming job interviews, so understanding algorithms is a big win for you as a coder.

You will review many common algorithms using [TypeScript](/q/typescript) as the language. Even if you don't prefer TypeScript, they will easily translate into [JavaScript](/q/javascript) or practically any other language

Build Algorithms using Typescript

Mastering asynchronous code execution is fundamental to becoming a great TypeScript developer. You will learn how [TypeScript](/q/typescript) enables you to write asynchronous code with complete type safety and great runtime support thanks to TypeScript’s understanding of the async / await pattern.

You will learn concepts like Promises, generators and how they enable the runtime environment to allow authoring asynchronous code just as beautifully as synchronous code.

Async/Await using TypeScript

Cascading Style Sheets bring order and beauty to our applications.

Having your CSS co-located with your UI code provides the same sort of advantages in refactor ability and maintainability that React provides for the DOM using JSX. TypeStyle allows you to do that with the additional safety of TypeScript.

In this course we will cover core CSS concepts like CSS Properties, media queries, keyframes, pseduo-states and show how they can be represented in your JavaScript code using TypeStyle. 

Maintainable CSS using TypeStyle

React provides are a powerful paradigm for creating UI applications with JavaScript. TypeScript can greatly increase the maintainability of React applications by opening up syntax for self-documenting code.

In this course, we will cover how to set up a React application with TypeScript and use TypeScript for React applications


Use TypeScript to develop React Applications

Tips and tricks on using React with TypeScript

Bite-size video tutorials for badass web developers.

egghead

React with 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.

Determine if two strings are an anagram

A common interview question is to write  a function that converts  a  string into an integer e.g. `"123"` => `123`.  This  function  is commonly  called  `atoi` because  we  are  converting  an  ASCII  string  into  an  integer.

In this lesson we cover the proper way to do this in JavaScript which is `parseInt` along with implementing it using basic ascii math.

Parse a string to an integer

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

Case insensitive sorting for string arrays

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. 

Binary Search Algorithm using 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. 

Create random integers in a given range

How can you most efficiently maintain the lowest value in a list of items. How about maintaining the largest value?

In this lesson we cover a naïve solution to this problem followed by an efficient solution that utilizes a data structure we have already covered before.

Minimum / Maximum Maintenance algorithm implementation using JavaScript / TypeScript

In a singly linked list each node in the list stores the contents of the node and a reference (or pointer in some languages) to the next node in the list. It is one of the simplest way to store a collection of items.

In this lesson we cover how to create a linked list data structure and how to use its strengths to implement an O(1) FIFO queue.

Implement a singly linked list in TypeScript

A balanced binary tree is something that is used very commonly in analysis of computer science algorithms. In this lesson we cover how to determine the maximum number of items it can accommodate.

We follow this with a discussion on the maximum height of a binary tree given we need to accommodate `n` items.


Find Max Items and Max Height of a Completely Balanced Binary Tree

Once you are familiar with the Heap data structure, a number of programming challenges can magically become super simple. Sorting is just one of those challenges.

In this lesson we cover the heap sort algorithm, why is it called *heap* sort and how to implement it using JavaScript / TypeScript.

Implement the Heapsort algorithm using TypeScript / JavaScript

A stack is an abstract data type that stores a collection of elements, with two principal operations: 
* push: adds an element to the collection
* pop: removes the most recently added element that was not yet removed. 

The order in which elements are poped is `Last In First Out` aka. `LIFO`. In this lesson we discuss how to implement it using JavaScript / TypeScript.

Stack implementation using TypeScript

A queue is an abstract data type that serves as a collection of elements, with two principal operations: enqueue, which adds an element to the collection, and dequeue, which removes the earliest added element. The order in which elements are dequeued is `First In First Out` aka. `FIFO`. The term `queue` takes it name from the real world queues e.g. "a queue at the ticket counter". 

A good target is to implement these operations with a time complexity of O(1). In this lesson we discuss how to implement it using JavaScript / TypeScript.

Queue implementation using TypeScript

Heap is a data structure that can fundamentally change the performance of fairly common algorithms in Computer Science.

The heap data structure is called a heap because it satisfies the heap property. The heap property states, that if P is a parent node of C, then the value of node P is less than the value of node C.

In this lesson we discuss the key operations of the Heap data structure along with their performance. We then implement the data structure using TypeScript / JavaScript.

Implement the heap data structure using JavaScript

Shuffling is a common process used with randomizing the order for a deck of cards.
The key property for a perfect shuffle is that each item should have an equal probability to end up in any given index.

In this lesson we discuss the concept behind the simple modern fisher yates shuffle and implement it in JavaScript / TypeScript.

Shuffle an array

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.

Basarat Ali Syed

Topics

Instructors

Content Type