 Resources from Basarat Ali Syed in 2024

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

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

Develop React Applications with Mobx and 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

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

typescript

Build Algorithms using Typescript

In this course we demonstrate how to get started with Microsoft Playwright. We follow this up with various features of Playwright that make it extremely easy for you to test and automate modern web applications. 

Bite-size video tutorials for badass web developers.

egghead

Use Playwright to Test and Automate Web 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. 

Cascading Style Sheets bring order and beauty to our applications.

Maintainable CSS using TypeStyle

There is a particular arithmetic series that shows up time and time again in analysis of naïve implementations of many common programming challenges.

In this lesson we show why the time complexity is Quadratic, so you don't have to keep analyzing it over and over.

Sum of the most common algorithmic arithmetic series

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.

Serialize objects to JSON

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.

Using TypeScript for pure JavaScript

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.

Add responsive styles using TypeStyle Media Queries

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.

Style CSS pseudo-classes using TypeStyle

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.

Style CSS pseudo elements with TypeStyle

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

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

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.

Topics

Instructors

Content Type

Basarat Ali Syed