Learn Chrome-devtools, Reactfire and Script-kit

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

How often do you avoid scripting something because it takes too much effort?\n\nScript Kit makes it easy to create and run scripts that solve your daily problems. Create a new script from the prompt then your script opens in the editor of your choice. Write a few lines of JavaScript. Then run the script from the prompt.\n\nSimply put, Script Kit helps you script away the friction of your day.

script-kit

Create, read, update, delete. Four actions that every developer becomes intimately familiar with over their career. Script Kit aims to make this process as pleasant as possible using a `db` helper and what better way to show it off than a Todos app?

You will also learn how to create and switch between tabs through Script Kit's `onTab` and `setTab` methods. 

[Install todos](https://scriptkit.com/api/new?name=todos&url=https://gist.githubusercontent.com/johnlindquist/3bdc967ffbd2f6d72491d07bf720f7e2/raw/a37b0058b502d6ba4bebd7a31a30be8789f5a146/todos.js")

```js
// Name: Todos

import "@johnlindquist/kit"

let { todos, write } = await db({ todos: [] })

onTab("Todos", async () => {
  while (true) {
    let todo = await arg("Toggle todo:", todos)
    let t = _.find(todos, todo)
    t.tag = t.tag === "open" ? "done" : "open"
    await write()
  }
})

onTab("New", async () => {
  let name = await arg("New todo:")
  todos.push({ name, id: uuid(), tag: "open" })
  await write()
  setTab("Todos")
})

onTab("Remove", async () => {
  let todo = await arg("Remove todo:", todos)
  _.remove(todos, todo)
  await write()
  setTab("Todos")
})
```


Build a Multi-Tab Todos App in Script Kit

When you want to collect news sources, airline ticket prices, or any events from sites that don't offer APIs, you can use scrapers to grab elements from off the page. 

Script Kit includes a `scrapeSelector()` helper that takes the URL you want to scrape and the selector you want from the page. Using the `// Schedule` metadata, you can also have this script run in the background on a Chron schedule and collect the data for you.


[Install scrape-tech-news](https://scriptkit.com/api/new?name=scrape-tech-news&url=https://gist.githubusercontent.com/johnlindquist/acd397a2ed487ef2a06c00d2951bed63/raw/3942107d2c92abc2c0317d15b0b3d025c5643ef0/scrape-tech-news.js")

```js
// Name: Scrape Tech News
// Schedule: 0 11 * * *

import "@johnlindquist/kit"

let h3s = await scrapeSelector(
  "https://news.google.com/topics/CAAqJggKIiBDQkFTRWdvSUwyMHZNRGRqTVhZU0FtVnVHZ0pWVXlnQVAB?hl=en-US&gl=US&ceid=US%3Aen",
  "h3"
)

let filePath = home("tech.md")
await ensureFile(filePath)
let contents =
  `

## ${new Date()}

` + h3s.map(h3 => `### ${h3}`).join("\n")
await appendFile(filePath, contents)
```

Scrape a Website on a Schedule with Script Kit

We put a lot of work into browsing the internet every day, it would be a pity to lose it all by closing all of our tabs. 

Script Kit can collect all of the tabs you currently have open in Chrome using its `getTabs` method and store them anywhere you want. 

This particular script converts the tabs to markdown links and stores them in a text file on your file system, but you could convert and store them using any approach you can think of.


[Install save-tabs](https://scriptkit.com/api/new?name=save-tabs&url=https://gist.githubusercontent.com/johnlindquist/4713a161a9ec48932b05436ba6a1a123/raw/33f753586d1a158dfb69d07f29850b6013d59f8b/save-tabs.js")

```js
// Name: Save Tabs

import "@johnlindquist/kit"

let tabs = await getTabs()

let tabsMd = tabs
  .map(tab => `* [${tab.title || tab.url}](${tab.url})`)
  .join("\n")

let notes = await editor(tabsMd)

let filePath = home("tab-notes.md")
await ensureFile(filePath)
await appendFile(filePath, notes)

edit(filePath)
```


Save Chrome Tabs in a Markdown File and Take Notes with Script Kit

Sometimes you just want to select and modify some text you have written somewhere on your system. To help you with this, Script Kit provides a `getSelectedText` and `setSelectedText`. Between these two helpers, your script and use and/or modify the text however you want. 

Applying an npm tool like `title-case` can help when you're not entirely sure when certain words need to be capitalized. In fact, I used the title case script on the title of this lesson!

[Install title-case](https://scriptkit.com/api/new?name=title-case&url=https://gist.githubusercontent.com/johnlindquist/0f8323d6aa599cfd62034351f9d38e8c/raw/625d0afd57ccbf8bf64c62bd135474cecf98c58b/title-case.js")

```js
// Name: Title Case

import "@johnlindquist/kit"

let { titleCase } = await npm("title-case")

let selectedText = await getSelectedText()
let titleText = titleCase(selectedText)

await setSelectedText(titleText)

// This Is the Title of My Next Blog Post
```


Apply Title Case to Text Anywhere Using Script Kit

Developers often keep their dev projects in a specific directory like "dev", "projects", or something similar. Script Kit allows you quickly read all the files of any directory then display them in a list so you can open them in your editor.


[Install open-project](https://scriptkit.com/api/new?name=open-project&url=https://gist.githubusercontent.com/johnlindquist/91cf994e450ecd5d45bce9aef9b345a1/raw/880be2d827b9602afe59d4e230e6753288f5bbb8/open-project.js")

```js
// Name: Open Project

import "@johnlindquist/kit"

let dirs = await readdir(home("dev"))

let selectedDir = await arg(
  "Open Project:",
  dirs.map(dir => ({
    name: dir,
    description: home("dev", dir),
    value: home("dev", dir),
  }))
)

edit(selectedDir)
```

List and Launch Dev Projects with Script Kit

We all have various tasks we need to accomplish with images. Whether it's resizing, optimizing, organizing, uploading, or anything else. Script Kit provides a `drop` component so you can simply drag and drop images into a script and process them in whatever way matches your workflow.


[Open drop-image in Script Kit](https://scriptkit.com/api/new?name=drop-image&url=https://gist.githubusercontent.com/johnlindquist/fe5b06f81cfea0d2dd94f743bc40ed15/raw/40a1b6ab271f7f664d7e54c4b779b056c6195b1c/drop-image.js")

```js
// Name: Drop Image

import "@johnlindquist/kit"

let files = await drop()
let imagePath = files[0].path

let Jimp = await npm("jimp")

let image = await Jimp.read(imagePath)
let newImagePath = path.resolve(
  path.dirname(imagePath),
  `new-${path.basename(imagePath)}`
)
await image
  .resize(parseInt(await arg("Width:"), 10), 100)
  .write(newImagePath)

```


Manipulate Images With Drag and Drop in Script Kit

Chrome allows developers to execute JavaScript using Apple Events. When you enable this feature, you can write scripts that can access and modify the page you're currently browsing. 

You can get the site's contents, update storage, or do any action you would typically do through an extension of the Chrome Dev Tools.

```jsx
let value = await applescript(`
tell application "Google Chrome" to tell window 1
	get execute active tab javascript "

${js}

"
end tell
`)
```

Control Chrome From Script Kit using Apple Events

Many developers use Chrome's Dev Tools as a playground for testing out data and JavaScript features. Script Kit enables you to launch Chrome Dev Tools instantly by simply using the `dev` method. Any data you pass into `dev` will show up in the console so you can inspect and play with the data in any way that you want.

[Install dev-tools-demo](https://scriptkit.com/api/new?name=dev-tools-demo&url=https://gist.githubusercontent.com/johnlindquist/6dcaf61e92819114c7478fefd24a71f8/raw/c2e69bfcff581f7929b881638627201b549d23f1/dev-tools-demo.js")

```js
// Name: Dev Tools Demo

import "@johnlindquist/kit"

let response = await get(
  `https://api.github.com/users/johnlindquist/repos`
)
dev(response.data)
```


Instantly Launch Chrome Dev Tools with Script Kit

This lesson walks through a script that can query a Hacker News API and display the information in Script Kit. 

Learn to do several things using Script Kit's global API methods, such as how to make and inspect data requests using `get` and `inspect`, how to display lists of data using `arg`, and how to display previews of the current selection.

[Install Hacker News Script](https://scriptkit.com/api/new?name=hackernews&url=https://gist.githubusercontent.com/johnlindquist/8728c8f56dd88951127810f0dea818d2/raw/8be4d28aa695f7842b610be258db7cd2e823a239/hackernews.js)

Write a Script with Script Kit to Browse Hacker News

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

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

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

Speed up your bug-fixing process dramatically with Cursors Composer. Take a warning from your logs, search for relevant terms, then seamlessly import both the warning and search results into Composer. Add documentation and apply fixes to all search results in one go. This streamlined workflow resolves multiple issues rapidly, saving valuable development time.

Batch Fix Every File in Search Results with Cursor's Composer

 We map over the initial set of results then use `Promise.all` to efficiently fetch the details of each pokemon rendered in the table. This allows us to add more columns to our pokemon table.

Fetch and display row details with Promise.all in Tanstack Table

map over the initial set of results then use `Promise.all` to efficiently fetch the details of each pokemon rendered in the tanstack table

Create a custom hook to fetch remote data by passing a promise to the React 19 `use` hook. Then render this data in Tanstack Table by memoizing the results and passing them to `useReactTable`.

Render remote data in a Tanstack Table with React 19's use hook and a promise

Create a custom hook using React 19’s use to fetch data with a promise. Render it in a Tanstack Table by memoizing and using useReactTable.

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

The GitHub CLI allows you to search issues and filter on different criteria like amount of comments. This allows you to search for real-world situations and pains/solutions people have using different technology. 

With the GitHub CLI in hand we'll drop 100s of issues as context in Googles AI Studio and have Gemini determine the 10 most frequently asked questions. This will give us a sense of how people use a library and where people get hung up.

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. 

What you can 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.

Inside of Cursor with their Composer AI agent, we can search for the files we want, tell the agent to download them, and inspect them for better understanding of 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.