 Courses from Craig Mckeachie

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

Creating your own services in AngularJS can be confusing.  What are the differences between an AngularJS module's Service, Provider and Factory functions? This lesson shows how Angular's provider function is just a configurable JavaScript module.

Services, Factories, and Providers: Creating a Provider

Creating your own services in AngularJS can be confusing.  What are the differences between an AngularJS module's Service, Provider, Factory, and Value functions? This lesson shows how Angular's value function allows you to use register a plain JavaScript object as an AngularJS service.

Services, Factories, and Providers: Creating a Value Object

Creating your own services in AngularJS can be confusing.  What are the differences between an AngularJS module's Service, Provider and Factory functions? This lesson shows how Angular's factory function is just the JavaScript module design pattern.

Services, Factories, and Providers: Creating a Factory

Creating your own services in AngularJS can be confusing.  What are the differences between an AngularJS module's Service, Provider and Factory functions? This lesson shows how Angular's service function is just a constructor function.

Services, Factories, and Providers: Creating a Service

I often find myself wondering how to use certain APIs in certain situations, and I have a couple of keywords that I try and search up on Google. And what you can really do in this situation is turn to GitHub and see how other people have actually used this code on public projects. The GitHub CLI enables us to run searches like this, and we can take the results and work on them programmatically. And inside of Cursor with their Composer AI agent, we can search for the files we want, and we can tell the agent to download them and then work on them and inspect them and teach us how those things work together.

Search All of GitHub's Code and Pass the Results to AI Agents in Cursor

Implement virtual scrolling to handle large datasets in an HTML table. Start with a basic table that renders 10,000 rows of data. The browser can struggle with this amount of DOM nodes to render at one time, especially on low end devices. 

We implement tanstack react virtual to render only the necessary amount of rows the user is viewing. The implementation includes proper column sizing, accessibility considerations, and convenient scroll controls, resulting in a smooth and performant table experience regardless of the dataset size.

Create a row virtualized HTML table with Tanstack Virtual

Learn how to implement virtual scrolling in React tables using TanStack Table and Tanstack Virtual with the useWindowVirtualizer React hook.

The most difficult tasks will require the strongest AI models. And those models simply aren't available as AI agents inside of your tooling. So the best workflows are to drag and drop the files you need to be changed and analyzed inside of a reasoning model such as OpenAI's O1 Pro, then letting it create a giant plan for your dumber AI agents to work on. The key here is that instead of just copying and pasting the entire plan into Cursors Composer or your AI agent, it's to create a file inside of your project and ask your agent to tackle the plan one step at a time. This allows you ample opportunity between each step to test and verify the micro steps along the way. Otherwise, as I've experienced many times, a session can go way off track and you burn a lot of time and burn a lot of AI requests Cursors Composer and it starts churning through a plan Cursors Composer and making lots of unwanted changes. Cursors Composer and it's to guide an AI agent to hold its hand along the way, especially through the most complex tasks. Cursors Composer and the most complex tasks Cursors Composer and the most complex tasks require a step-by-step plan.

Planning AI Agent Sessions with Reasoning Models

AI agents will inevitably make mistakes—it's just a matter of when. A key tool in your toolbox, once they do make mistakes after working on a problem for a while, is to use **git diff** to capture all of the changes they've made. 

Once you have those changes in a text file, you have a portable document that you can test against other AI models. This allows you to move the problem into smarter reasoning models with smaller context windows, helping you isolate and focus on the issue at hand.

**git diff** has been invaluable when working with AI agents because they'll often make many good changes but also slip in one tiny error. Finding that one small mistake is **git diff**’s superpower.

Leverage Git Diff to Fix AI Agents' Mistakes

AI agents are notorious for getting tasks done, but also taking some shortcuts in TypeScript, and falling back to using things like Any, which you might not want in your codebase. This creates a scenario when it's done all of the work, you've tested and verified everything, but it's left you with many things untyped. So in this situation, when you run git commit, you can set up a commit hook to expose all of the linting, expose all of the TypeScript errors. And then you just let the AI agent run that commit hook and it can find all of the mistakes that it made. And go through And fix everything without you ever having to touch the code. This lesson covers a real world scenario of a commit hook running based on a refactor that was made when extracting some types. And it shows how running commit with an agent, if you allow the commit to give exhaustive information on what went wrong, the agent can continue on and make all the changes for you.

Commit Hooks are Critical with AI Agents in Cursor

If you ever want to see data represented in a certain way, such as a chart or a graph, to better understand what's going on in the world, you can use AI's to grab the most recent data and then convert it into any visual format you want. This is enabled in AI studio with Gemini through what's called grounding from web search, structured output formatting data, and code execution, which can run Python and generate charts. This lesson is going to walk you through the challenges of using grounding, especially when working with numbers which need to be accurate. How you can use image recognition and convert that to structured output. And then the challenges of using code execution. Especially when AI's are confident that the code ran even though the code failed. At the end, we still get to generating a chart through the online editor and then we take it also to set up in Cursor in a local environment where we can run all the way through YOLO mode and just click around some buttons and get our chart.

Generate Charts from Current Events with Gemini's Structured Output and Code Execution

Warning: AI's make mistakes. Some of them can be _very_ costly. Terminal have access to your most private information, especially if you're using a "work computer". Please proceed with extreme caution!

Cursor's new "YOLO" feature It allows you to enter an AI prompt and then just sit back and watch as an AI will run terminal commands automatically. The AI will automatically install packages, automatically start and stop dev servers, and even check the output of the terminal commands to run subsequent terminal commands and attempt to fix them.

Traditionally, this is some of the most critical, but also some of the most boring work that a developer has to do, especially when it comes to memorizing all of the various syntax and all of their various commands that you need to know. In larger projects, it's even really easy to forget which commands are even available. So handing all this work over to an AI is a natural step in the evolution of development. But again, please be extremely cautious with these features as there are a million ways that everything could go terribly, horribly wrong.

AI YOLO - Sit Back and Watch Cursor Automatically Run Terminal Commands

GitIngest (https://gitingest.com/) is an awesome tool that allows you to batch together files from a GitHub repo in order to use them with AI tools. This lesson walks through use Git Ingest against a repository that's too large for an AI, so it configures options to narrow down to only the files that you need for your task. Then we'll use Gemini's latest Flash 2.0 model to generate a new project based on the examples we grabbed from the GitHub repo.

Use Gemini to Analyze a GitHub Repo with GitIngest

Learn how to set up a Custom ESLint Rule in your codebase to check for custom patterns.

I’ll show you how to create a simple rule that checks for class names starting with uppercase letters. I will also introduce you to the high-level concepts of AST and show you how to use [Eslint Explorer](https://explorer.eslint.org/) so you can use it to inspect your own codebase and write the rules you need.


Set up a Custom ESLint Rule

Learn to set up a Custom ESLint Rule to check for custom patterns in your codebase.

Manage column visibility in tables using [Tanstack Table](https://tanstack.com/table/v8/docs/guide/columns). Toggle each column's visibility with checkboxes, set some as non-hideable, or hide them by default. Adjust properties in the table code to control displayed columns. 

Install [Shadcn's Switch](https://ui.shadcn.com/docs/components/switch) component to render nice looking switches instead of plain html check boxes.


Hide and Show Columns with Tanstack Table

Learn to hide and show columns in an HTML table with Tanstack Table. Render switch components with shadcn. 

Craig McKeachie

Search Results

Services, Factories, and Providers: Creating a Provider

Services, Factories, and Providers: Creating a Value Object

Services, Factories, and Providers: Creating a Factory

Services, Factories, and Providers: Creating a Service