Learn Chrome-devtools, Mac and Reactfire

WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. 

aria

Debug Computed Accessibility Properties with Chrome Dev Tools

In this lesson, we use the element inspector in Chrome to test and improve our contrast to meet WCAG AA Contrast Ratio Standards.

Resources:
- [WebAIM - Contrast and Color Accessibility](https://webaim.org/articles/contrast/)

Debugging Accessible Contrast with Chrome Dev Tools

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.

chrome-devtools

Lighthouse is a tool that analyses web apps and web pages, collecting modern performance metrics and insights on developer best practices.

It's built directly into the Chrome DevTools and in this quick lesson we're going to learn how to run the audit, how to read its results and why you should always run the Lighthouse audit in Incognito mode.



Run a Lighthouse audit in Chrome Devtools

Sometimes you encounter a backend issue which seems to occur only on your computer, with a very specific sets of headers, cookies etc. Because of that, it's useful to have a way of easily sharing network requests sent by your browser with other members of your team.

In this quick lesson we're going to learn how to copy a network request as `fetch` (so we can test it in the Chrome DevTools console/in a node.js script) or as cURL (so we can test it in a terminal).

Copy a network request as fetch or cURL with Chrome DevTools

Sometimes when debugging our CSS styles it's useful to be able to see what a DOM element is going to look like in a given state (e.g. `:focus`, `:active, `:hover`) etc.

Unfortunately it's not possible to both hover over an element and debug it in Chrome DevTools at the same time (since we only have a single cursor!).

In this quick lesson we're going to learn how to address this problem by explicitly forcing an element state to `:hover` with DevTools

Force a DOM element state in Chrome DevTools

Switching project contexts causes needless friction and opportunities for distraction as we try to pull up related tabs and applications. I learned a trick from [David Sparks](https://www.macsparky.com/) on how to use the Mac automation software [Keyboard Maestro](https://www.keyboardmaestro.com/main/) to create palettes of shortcuts grouped by context. This has been an awesome boost to my productivity!

Seamlessly Switch Project Contexts with Keyboard Maestro

In this lesson, we explore using Chrome's DevTools to detect unwanted visual instability on a page.

We can do this using the new "Experience" heading under recorded "Performance" metrics.

To truly see the impact of "[Cumulative Layout Shift](https://web.dev/cls/)", we can make use of DevTools' "Network throttling" feature to see any visual instability with the naked eye.



Use Chrome DevTools to Detect Cumulative Layout Shift

Check out the new and currently experimental "CSS Overview" feature in Chrome's DevTools.

Use it to get an overview of details such as colors, fonts, media queries, and even unused declarations.

Explore a Site's CSS with Chrome DevTools CSS Overview

Good accessibility is crucial in modern web apps. Keyboard navigation plays an important role in that undertaking. In this lesson we're going to explore how we can use the Chrome Devtools to easily debug the current active element on our DOM.

Use Chrome Devtools to debug the current active DOM element

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

Even though the default scoped styles in Angular components are really useful, sometimes we do want to apply styles across the whole app. We may also want to make classes available globally. Luckily, Angular provides a nice way to do this in the `styles.css` file.

Add Global Styles in Angular

In other frameworks, CSS modules and CSS-in-JS are both quite popular. One of the reasons for this is the ability to add scoped styling to your app. This prevents inadvertently overwriting styles due to a shared global class somewhere. You won't hear much about these options in the Angular community, and that's because Angular comes with a scoped CSS option right out of the box. In this lesson, I'll show you how this works.

Use Scoped Component Styles in Angular

Sometimes we need to pass data from a child component to a parent component. We could pass the source down to the child as an input and modify it there, but that's not a good practice. In Angular, we can use Outputs and EventEmitters to accomplish this instead. The child component emits an event with the data that the parent listens for. The parent can then process the event data however it needs to. In this video, you'll learn how to do just that with a reactive form that needs to send its value up to its parent component.

Communicate Between Components with Outputs & EventEmitters

PostgreSQL is a powerful, open source object-relational database system.

postgres

YugabyteDB is an open source, high-performance distributed SQL database for powering global, internet-scale applications.YugabyteDB is also a cloud-native database, so it can be deployed across both public and private clouds, including  Kubernetes environments. In regards to serving as a backend for microservices, YugabyteDB brings together three must-haves: a PostgreSQL-compatible SQL API, low-latency read performance, and globally distributed write scalability. YugabyteDB with its global data distribution brings data close to users for multi-region and multi-cloud deployments. 

In this lesson we will see how we can create YugabyteDB cluster locally on our Mac for dev environment and prototyping 

Set up YugabyteDB Distributed SQL Cluster Locally on MacOS

Miscellaneous one-off lessons on debugging, productivity hacks, and JavaScript tricks.

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Tips and Tricks

Sometimes you'd like to measure how two implementations compare in regards to run time.  In this lesson you will learn how to quickly do this using Console.time and constole.timeEnd.

Benchmark functions runtime in chrome console

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

express

In this lesson we will learn how to see your node server's code in chrome dev tools and also to add debug points to debug your nodejs app easily.

Debug a NodeJS App in Chrome Dev Tools

Frontend runtime optimization is heavily impacted by rendering.  Understanding the way the JS engine and the browser work is crucial for optimizing applications and understading how to avoid performance pitfalls.
This collection explains about the Critical Rendering Path, performance bottlenecks and practical solutions.

Critical Rendering Path

When building a web app, sometimes we need to approach it top-down. Modern browser devtools allow us to set breakpoints not only on the JS code but also on the DOM as well, so we can easily pin down which lines of code are to be executed deep inside the code base, by pausing the execution based on DOM changes.

In this lesson, we will learn how to set and remove DOM breakpoints in Chrome DevTools.

Set and remove DOM Breakpoints

In this video, we'll learn how to modify the default screenshot keyboard shortcut on macOS so that it copies our screenshot to our clipboard. This comes in handy if you share screenshots often.

Change Default Screenshot Key to Copy to Clipboard

Joe Previte is an active egghead instructor and blogger. This is a collection of screencast versions of selected blog posts. You can find his blog here: [joeprevite.com](https://joeprevite.com/)

Joe's Blog Posts as Screencasts

When the contrast between foreground and background colors is not sufficient it can be hard to distinguish outlines, borders, edges, and details and text can be hard to read. The minimum recommended contrast ratio is 4.5:1 for most text. Very large text (120-150% larger than the default body text) can be slightly lower at 3:1. 

The contrast ratio of 4.5:1 was chosen because it compensates for the loss in contrast sensitivity usually experienced by users with vision loss equivalent to approximately 20/40 vision which is commonly reported as typical visual acuity of people at about age 80.

## References
* https://webaim.org/articles/contrast/
* https://webaim.org/resources/contrastchecker/
* [Accessible Color Picker Chrome browser extension](https://chrome.google.com/webstore/detail/accessible-color-picker/bgfhbflmeekopanooidljpnmnljdihld?hl=en-US)
* https://color.review/

Use Sufficient Color Contrast in Web Page Design

You know when you're deep in the code trenches and need someone to challenge your assumptions? That's exactly what this is about.

Instead of waiting for someone to poke holes in your master plan, you can paste that strategy straight into AI Studio and let it pressure test your ideas. We're talking about using this tool to validate everything from your feature proposals to your ambitious refactoring strategies.

The real magic happens when you hit that microphone button. Now you're in a real-time verbal sparring match. It's like rubber duck debugging but the duck actually pushes back and makes you defend every architectural decision you've made.

Here's the workflow:
1. Drop your master plan into the system instructions
2. Tell the AI to challenge every assumption
3. Hit that mic and defend your choices like you mean it
4. Watch your plan either emerge stronger or get rightfully dismantled

This approach is perfect when you're:
- Stuck in your own head with a complex problem
- Need to validate if your approach holds water
- Want to catch edge cases before they catch you
- Looking for opportunities you might have missed because you're too close to the code

It's like having a senior dev on call 24/7, ready to challenge your ideas and push you to think deeper about your solutions.

Now go forth and get your ideas challenged. Your projects will thank you for it.


An Uncomfortable and Challenging Conversation with AI Studio

In this lesson, you'll learn how to effectively brainstorm your project ideas before working with AI agents. We'll cover:

1. The importance of having a clear plan before starting work with AI agents
2. Using traditional brainstorming techniques to gather your thoughts
3. Leveraging video recording to capture your brainstorming session
4. How to review and analyze websites for inspiration
5. Documenting likes, dislikes, and potential features for your project
6. Using AI tools (like AI Studio) to organize and process your recorded brainstorming session

The lesson emphasizes a modern approach to brainstorming that combines traditional techniques with video recording, making it easier to later process your ideas through AI tools. This method helps ensure that no ideas are lost and that your thoughts can be effectively organized by AI for future reference.

How to Brainstorm Your Project Features to Prepare for AI Agents

Many people share .cursorrules files, but trying to craft your own from scratch is a huge pain. Instead, this lesson shows you how to grab ALL community-created .cursorrules files to build a custom rule set for your projects. We'll use Gitingest and Google AI Studio to gather these examples and generate an awesome starting point customized to your specific project.

Generate Custom .cursorrules for Your Project Based on Community Examples

In this lesson, you'll learn how to leverage the GitHub CLI to efficiently search through issues across multiple repositories and use that data with AI Studio for deeper insights.

The lesson covers:

- Using GitHub CLI to search for specific issues across repositories
- Filtering issues based on criteria like comment count
- Extracting issue content and comments
- Using the collected data as context in AI Studio
- Creating practical applications like FAQs from issue discussions

The example demonstrates creating a Framer Motion FAQ by searching GitHub for issues with multiple comments, but the technique can be applied to any framework or library.

This workflow helps developers:
- Research common problems and solutions
- Understand recurring issues in specific technologies
- Generate useful documentation from real-world problems
- Make better use of existing GitHub discussions

This approach combines the power of GitHub's vast knowledge base with AI tools to create valuable insights for development work.

Search 100s of Issues with GitHub CLI as Context for AI Studio

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.

Search

Search Results