 Courses from Paul Mcbride

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

typescript

A queue is FIFO (First In First Out) list. When you remove elements from the queue, oldest item is removed first. In this lesson we'll cover how to implement a queue using TypeScript. Queue based questions are common in technical interviews, so it useful to be familiar with how they work.

Build a Queue data structure in TypeScript

A stack is LIFO (Last In First Out) list. When you remove elements from the list, the most recently added item is removed first. In this lesson we'll cover how to implement a stack using TypeScript. Stack based questions are common in technical interviews, so it useful to be familiar with how they work.

Create the Stack data structure using TypeScript

We'll learn how to calculate the number of Nodes in a Linked List.

Return the Length of a Linked List

In this lesson we'll learn how to search through a Linked List to find the index of a Node with a given value.

Find the Index of a Linked List Node by Value

We'll learn how to get the value of a Node in a Linked List at a given Index.

Get the Value of a Linked List Node by Index

We'll learn how to remove a Node from a Linked List at a given Index.

Delete a Linked List Node at a given Index in TypeScript

We'll learn to how add a new elements to a linked list at a specific index.

Insert values into a TypeScript Linked List with insertAt

In this lesson we'll cover the basic elements of a linked list and how to append nodes to one.

Create a Linked List in 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

Sometimes in a React component we need to derive some values by mapping or filtering props. This is a useful technique but can cause performance issues of you are processing a lot of data, or the component is rendered regularly. In this lesson you'll learn how to avoid this pitfall using the `useMemo` hook. 

Efficiently Derive Values in React using useMemo

A common struggle with building React apps is having to pass props through a deeply nested component tree. In this lesson you'll learn how to avoid prop drilling using the `useContext` hook.

Avoid Prop Drilling using Context in React

In this lesson, we'll cover how to create a custom React hook for managing the state of any input. This is one of the most powerful features of react hooks as it allows you to easily share functionality in a reusable way.

Reduce Code Redundancy with Custom React Hooks

The useRef is a hook for creating values that persist across renders. In this lesson we'll learn how to use the useRef hook to measure the width of an element as it changes.

Create a Persistent Reference to a Value Using React useRef Hook

The useEffect hook in React is used for running side effects. This can be anything from adding event listeners to logging to the console. In this lesson, we use it to track the mouse position.

Run Side Effects with React useEffect

With the release of the hotly anticipates hooks api in React, we can now store state in functional components. In this lesson we cover how the `useState` hook works with a very basic example.

Store State in React Functional Components with useState

With the release of the React Hooks API, it is now possible to store state in functional components. In this playlist, we'll take an initial look at the `useState` hook as well as a few others. In one of the later lessons, we'll build a custom hook, a tool for easily sharing functionality with more that one component.

An Introduction to React Hooks

Gatsby is an incredible tool for building static web apps using React. In this lesson, you will learn how to use Gatsby's node API's to render paginated news items.

Display Paginated Posts using Gatsby 

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

Sometimes a CLI tool is the quickest way to get a job done. In this lesson we will learn how to create an interactive CLI tool that has input validation using Node.js and Inquirer.

Create an Interactive Node.js Command Line Tool using Inquirer

Now by Zeit has recently been updated and now supports multi-language monorepos. In this lesson we'll build and deploy a simple app with an API powered by Node.js and Go.

If you want to follow along with this lesson, you will need to install [now-cli](https://github.com/zeit/now-cli).

Deploy a Monorepo to Now V2

webpack is a tool to build JavaScript modules in your application. To start using webpack from its cli or api, follow the Installation instructions. webpack simplifies your workflow by quickly constructing a dependency graph of your application and bundling them in the right order. webpack can be configured to customise optimisations to your code, to split vendor/css/js code for production, run a development server that hot-reloads your code without page refresh and many such cool features.

webpack

Version 4 of Webpack has a great new "zero config" mode which allows you bundle your JavaScript with, you guessed it, zero config. In this lesson you'll learn how to install Webpack and use it to bundle your code. 

Bundle JavaScript Files with a Zero Config Setup using Webpack 4

You'll learn the fundamentals of building and manipulating linked lists, a data structure that is very popular in technical interviews.

We’ll start by creating a basic linked list and then advance to inserting and deleting nodes at specific positions. We'll also learn how to retrieve node values by index, find the index of nodes by their values, and calculate the length of the linked list. 

By the end of this course, you'll have a solid grasp of implementing and managing linked lists in TypeScript.

Mock Service Worker is an API mocking library that allows you to write client-agnostic mocks and reuse them across any frameworks, tools, and environments.



Mocking WebSocket APIs with Mock Service Worker


When attempting to load the same module twice in JavaScript you'll hit a cache and code won't re-run. In scenarios where you actually do want to have state in your modules, you'll have to use a cache-busting technique by passing a query parameter to a dynamic import. This lesson walks through how to add a query parameter, how to add the appropriate types for loading dynamic modules in TypeScript, and when these techniques are valuable.

Import the Same JavaScript Module Multiple Times with Cache Busting



The include keyword in GitHub Actions empowers you to add custom variables to your matrix strategy, providing flexibility beyond standard configurations. In this video, we'll explore how include allows you to define specific combinations of variables, enhancing control over your workflow runs. You'll see how this feature enables you to tailor jobs for unique environments or scenarios not covered by the default matrix options. By leveraging include, you can efficiently manage complex build processes with greater precision. This technique helps you streamline your CI/CD pipeline, making it more adaptable to your project's evolving needs.

Use GitHub Actions Matrix Include for Complex Job Configurations

While running `zod` schema validation agains domain-rich objects, the error message saying that _a string is not a number_ might not be really useful.

Especially, when you need to provide a meaningful feeback to the user, e.g. after they have submitted a form with lots of data.

`zod` allows to customize messages on a very granular level. We can also extract repeatable customization to `zod` error maps.

Finally, in order to process an error message further (e.g. display it to the user), we need to handle the `zod` validation errors effectively. Especially, when a big object validation has failed and we could receive a handful of errors.

That's what we learn in this lesson. 🔥

Customize zod Error Messages and Handle zod Errors Effectively

customize zod validation messages, customize zod schema property messages, reuse error maps across different schemas, navigate through zod error objects

You might want to run `zod` schema checks in different styles.

Sometimes you prefer to conditionally throw the error - that's what `parse` does. But another time you'd prefer to receive a `boolean` property that determines whether the validation was successful or not - and perform further actions accordingly.

Additionally, the error-throwing API of `parse` works extremely well with [TypeScript assertion functions](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#assertion-functions). Their combination is just... perfect! 👌

That's what we learn in this lesson.

Use parse and safeParse Runtime Type-checks with zod

use zod parse function to conditionally throw ZodError, use zod safeParse to get a boolean value and run typescript type guard over success property

In this lesson we learn that TypeScript cannot guarantee correct shapes of responses. That's due to TS performing checks in compile-time, while the response will be availbale in runtime - when TS doesn't exist anymore.

In some situations, such as HTTP requests, runtime type checks such as `zod` are essential for providing quick feedback around data-related errors.

Understand where are the possible mistakes to make while using TypeScript with HTTP calls. Use `fetch` and `axios` along with `zod` schema checks.

Also, note that similar mistakes or mistakes could happen while using web storage (e.g. `localStorage`)

Validate HTTP API Response with zod, fetch and axios

use zod as an HTTP response validation tool along with fetch and axios in order to make sure that the response has expected data structure

In this lesson we learn that the `zod` schemas become the single source of truth.

We shall not update TypeScript types manually, since they are generated automatically from the schema.

Same with validation functions.

Whenever the schema changes, all the rest will update accordingly. It's an important mind shift.

Treat zod Schemas as Single Source of Truth

Zod Schemas are the single source of truth for both typescript types, and interfaces - and runtime validation functions. Schemas should be updated first.

`zod` is powerful, but writing the schemas manually for existing JSON objects, especially big ones, can be time-consuming.

But that's what `quicktype` is for! You can get 80% work done instantly! 🥳

Depending on your need - whether you want to automate the process, or do it just one time, you can:
- use an online app
- use an IDE extension
- run a CLI script
- generate a script to be executed within CI/CD environment/tooling

And this is what we learn in this lesson! 🔥🔥🔥

Get started with zod quickly!

Generate zod Schemas Automatically using Quicktype App, Extensions and Scripts

Use quicktype app, extension or scripts to automatically generate zod schemas from existing json files. Save time and get started with zod quickly!

`zod` is a powerful library allowing to run runtime type-checks.

It's complementary to TypeScript, which does type checks in compile time.

In this lesson we create few schemas that represent primitive type values, along with `zod` utilities which make these more precise. We also create object schemas and nest one inside another.

All schemas are being validated against example values. We analyze how to interpret error messages in case of failures.

Perform Runtime Type-checks on Primitives and Objects with zod

Create zod schemas to validate primitive type and object type values in runtime. Analyze the errors to see how a value doesn't correspond to schema expectations


Using Cursor Chat, you can easily reference an entire directory of files and ask it to generate anything based on those files. This opens up the possibility of using your current code as a reference guide to create new code that follows existing patterns. With this approach, the result can be a polished prompt you can use with any AI to generate consistent and reliable output.

Focus less on crafting the perfect prompt upfront - what matters most is testing and iterating based on the AI's responses. The more results you see from the prompt, the more you can reinforce the good results and prune out the bad results until your prompt is polished enough that you can rely on the prompt to give you consistent quality results.


Paul McBride

Search Results

Build a Queue data structure in TypeScript

Create the Stack data structure using TypeScript

Return the Length of a Linked List

Find the Index of a Linked List Node by Value

Get the Value of a Linked List Node by Index

Delete a Linked List Node at a given Index in TypeScript

Insert values into a TypeScript Linked List with insertAt

Create a Linked List in TypeScript

Efficiently Derive Values in React using useMemo

Avoid Prop Drilling using Context in React

Reduce Code Redundancy with Custom React Hooks

Create a Persistent Reference to a Value Using React useRef Hook

Run Side Effects with React useEffect

Store State in React Functional Components with useState

An Introduction to React Hooks

Display Paginated Posts using Gatsby

Create an Interactive Node.js Command Line Tool using Inquirer

Deploy a Monorepo to Now V2

Bundle JavaScript Files with a Zero Config Setup using Webpack 4

Create a Linked List in TypeScript