Cory House
@housecor.com
Courses: http://pluralsight.com
YouTube: http://youtube.com/@housecor
Consulting: http://reactjsconsulting.com ⚛️
YouTube: http://youtube.com/@housecor
Consulting: http://reactjsconsulting.com ⚛️
TypeScript syntax is often inspired by JavaScript.
In some cases, TS even uses the exact same syntax as JS for a different purpose.
The difference?
JS features focus on values.
TS features focus on types.
Here's a few examples.
In some cases, TS even uses the exact same syntax as JS for a different purpose.
The difference?
JS features focus on values.
TS features focus on types.
Here's a few examples.
June 2, 2025 at 4:32 PM
TypeScript syntax is often inspired by JavaScript.
In some cases, TS even uses the exact same syntax as JS for a different purpose.
The difference?
JS features focus on values.
TS features focus on types.
Here's a few examples.
In some cases, TS even uses the exact same syntax as JS for a different purpose.
The difference?
JS features focus on values.
TS features focus on types.
Here's a few examples.
Problem: I want to enforce a string format at compile time.
Solution: Use a template literal type.
Full "TypeScript: Deep Dive" course: dometrain.com/course/deep-...
Solution: Use a template literal type.
Full "TypeScript: Deep Dive" course: dometrain.com/course/deep-...
May 29, 2025 at 1:53 PM
Problem: I want to enforce a string format at compile time.
Solution: Use a template literal type.
Full "TypeScript: Deep Dive" course: dometrain.com/course/deep-...
Solution: Use a template literal type.
Full "TypeScript: Deep Dive" course: dometrain.com/course/deep-...
Problem: I want to ensure my switch statement handles all potential cases.
Solution: Use TypeScript's never type.
Here's how:
Full course: dometrain.com/course/deep-...
Solution: Use TypeScript's never type.
Here's how:
Full course: dometrain.com/course/deep-...
May 28, 2025 at 11:31 AM
Problem: I want to ensure my switch statement handles all potential cases.
Solution: Use TypeScript's never type.
Here's how:
Full course: dometrain.com/course/deep-...
Solution: Use TypeScript's never type.
Here's how:
Full course: dometrain.com/course/deep-...
Problem: You have complex logic for narrowing a TypeScript type that you'd like to reuse in a few spots.
Solution: Consider an assertion function.
20% off the full course: dometrain.com/course/deep-...
Solution: Consider an assertion function.
20% off the full course: dometrain.com/course/deep-...
May 24, 2025 at 5:29 PM
Problem: You have complex logic for narrowing a TypeScript type that you'd like to reuse in a few spots.
Solution: Consider an assertion function.
20% off the full course: dometrain.com/course/deep-...
Solution: Consider an assertion function.
20% off the full course: dometrain.com/course/deep-...
It’s live!
“TypeScript: Deep Dive” explores advanced TS concepts:
- Utility types
- Generics
- Mapped types
- Conditional types
- Template literal types
- Runtime validation
- Decorators
- tsconfig techniques
And over 250+ examples!
Get 20% off at launch here: dometrain.com/course/deep-...
“TypeScript: Deep Dive” explores advanced TS concepts:
- Utility types
- Generics
- Mapped types
- Conditional types
- Template literal types
- Runtime validation
- Decorators
- tsconfig techniques
And over 250+ examples!
Get 20% off at launch here: dometrain.com/course/deep-...
May 23, 2025 at 12:31 PM
It’s live!
“TypeScript: Deep Dive” explores advanced TS concepts:
- Utility types
- Generics
- Mapped types
- Conditional types
- Template literal types
- Runtime validation
- Decorators
- tsconfig techniques
And over 250+ examples!
Get 20% off at launch here: dometrain.com/course/deep-...
“TypeScript: Deep Dive” explores advanced TS concepts:
- Utility types
- Generics
- Mapped types
- Conditional types
- Template literal types
- Runtime validation
- Decorators
- tsconfig techniques
And over 250+ examples!
Get 20% off at launch here: dometrain.com/course/deep-...
LLMs are handy when working with the command line.
I wanted a count of all the exercise files in my new course.
ChatGPT provided the correct Bash command immediately.
I wanted a count of all the exercise files in my new course.
ChatGPT provided the correct Bash command immediately.
May 22, 2025 at 3:18 PM
LLMs are handy when working with the command line.
I wanted a count of all the exercise files in my new course.
ChatGPT provided the correct Bash command immediately.
I wanted a count of all the exercise files in my new course.
ChatGPT provided the correct Bash command immediately.
Just realized Vitest now has built in support for testing TypeScript types.
How? It includes expect-type now by default. Handy.
Example:
How? It includes expect-type now by default. Handy.
Example:
May 13, 2025 at 4:15 PM
Just realized Vitest now has built in support for testing TypeScript types.
How? It includes expect-type now by default. Handy.
Example:
How? It includes expect-type now by default. Handy.
Example:
There are many JS runtimes - Node, Deno, Bun, etc.
Just learned about a new one: Bare.
Bare is unique:
- Light (runs on mobile)
- No server (great for P2P apps)
- Not tied to a specific JS engine.
- Separate modules (Upgrade modules when desired. Install what you need)
More: bare.pears.com
Just learned about a new one: Bare.
Bare is unique:
- Light (runs on mobile)
- No server (great for P2P apps)
- Not tied to a specific JS engine.
- Separate modules (Upgrade modules when desired. Install what you need)
More: bare.pears.com
April 13, 2025 at 12:42 PM
There are many JS runtimes - Node, Deno, Bun, etc.
Just learned about a new one: Bare.
Bare is unique:
- Light (runs on mobile)
- No server (great for P2P apps)
- Not tied to a specific JS engine.
- Separate modules (Upgrade modules when desired. Install what you need)
More: bare.pears.com
Just learned about a new one: Bare.
Bare is unique:
- Light (runs on mobile)
- No server (great for P2P apps)
- Not tied to a specific JS engine.
- Separate modules (Upgrade modules when desired. Install what you need)
More: bare.pears.com
I've heard people say "spelling mistakes in code are harmless".
I disagree. Spelling mistakes slow reading, create confusion, and can lead to bugs.
Solution: Run cspell as part of your CI process.
Here's an example cspell just found - a misspelled style that wasn't applying.
I disagree. Spelling mistakes slow reading, create confusion, and can lead to bugs.
Solution: Run cspell as part of your CI process.
Here's an example cspell just found - a misspelled style that wasn't applying.
March 28, 2025 at 3:47 PM
I've heard people say "spelling mistakes in code are harmless".
I disagree. Spelling mistakes slow reading, create confusion, and can lead to bugs.
Solution: Run cspell as part of your CI process.
Here's an example cspell just found - a misspelled style that wasn't applying.
I disagree. Spelling mistakes slow reading, create confusion, and can lead to bugs.
Solution: Run cspell as part of your CI process.
Here's an example cspell just found - a misspelled style that wasn't applying.
Problem: Unused npm dependencies.
They make package.json harder to read, bloat node_modules, waste our time updating packages we don’t use, and create confusion about what our project requires.
Solution: npx depcheck
It lists unused dependencies.
They make package.json harder to read, bloat node_modules, waste our time updating packages we don’t use, and create confusion about what our project requires.
Solution: npx depcheck
It lists unused dependencies.
March 25, 2025 at 4:31 PM
Problem: Unused npm dependencies.
They make package.json harder to read, bloat node_modules, waste our time updating packages we don’t use, and create confusion about what our project requires.
Solution: npx depcheck
It lists unused dependencies.
They make package.json harder to read, bloat node_modules, waste our time updating packages we don’t use, and create confusion about what our project requires.
Solution: npx depcheck
It lists unused dependencies.
Problem: I want to see a list of the settings I've changed in VS Code.
Solution: Search for @modified.
This displays a list of modified settings.
I used this today because I recently changed a setting that I wanted to revert, and couldn't recall the setting's name.
Solution: Search for @modified.
This displays a list of modified settings.
I used this today because I recently changed a setting that I wanted to revert, and couldn't recall the setting's name.
March 21, 2025 at 4:39 PM
Problem: I want to see a list of the settings I've changed in VS Code.
Solution: Search for @modified.
This displays a list of modified settings.
I used this today because I recently changed a setting that I wanted to revert, and couldn't recall the setting's name.
Solution: Search for @modified.
This displays a list of modified settings.
I used this today because I recently changed a setting that I wanted to revert, and couldn't recall the setting's name.
Now that Node, Bun, and Deno can run TS files directly without compilation, using JSDoc syntax to declare TypeScript types is even harder to justify.
JSDoc syntax is more verbose, lacks full feature support, and is harder to read.
Look at this comparison. Easy choice.
JSDoc syntax is more verbose, lacks full feature support, and is harder to read.
Look at this comparison. Easy choice.
March 18, 2025 at 5:14 PM
Now that Node, Bun, and Deno can run TS files directly without compilation, using JSDoc syntax to declare TypeScript types is even harder to justify.
JSDoc syntax is more verbose, lacks full feature support, and is harder to read.
Look at this comparison. Easy choice.
JSDoc syntax is more verbose, lacks full feature support, and is harder to read.
Look at this comparison. Easy choice.
Learn TypeScript in 60 seconds.
March 14, 2025 at 12:00 PM
Learn TypeScript in 60 seconds.
I think I finally have my phone-friendly vertical video format dialed in.
I'm using an iPad with a Neewer teleprompter as my monitor so I can look directly at the code as I narrate. And Camtasia creates the slick captions.
Thoughts?
I'm using an iPad with a Neewer teleprompter as my monitor so I can look directly at the code as I narrate. And Camtasia creates the slick captions.
Thoughts?
March 11, 2025 at 5:05 PM
I think I finally have my phone-friendly vertical video format dialed in.
I'm using an iPad with a Neewer teleprompter as my monitor so I can look directly at the code as I narrate. And Camtasia creates the slick captions.
Thoughts?
I'm using an iPad with a Neewer teleprompter as my monitor so I can look directly at the code as I narrate. And Camtasia creates the slick captions.
Thoughts?
In TypeScript, interfaces and type aliases can "extend" each another.
- An interface can extend a type.
- A type alias can "extend" an interface (via a type intersection).
Clip from "TypeScript: Getting Started" on Dometrain: dometrain.com/course/getti...
- An interface can extend a type.
- A type alias can "extend" an interface (via a type intersection).
Clip from "TypeScript: Getting Started" on Dometrain: dometrain.com/course/getti...
March 11, 2025 at 3:45 PM
In TypeScript, interfaces and type aliases can "extend" each another.
- An interface can extend a type.
- A type alias can "extend" an interface (via a type intersection).
Clip from "TypeScript: Getting Started" on Dometrain: dometrain.com/course/getti...
- An interface can extend a type.
- A type alias can "extend" an interface (via a type intersection).
Clip from "TypeScript: Getting Started" on Dometrain: dometrain.com/course/getti...
Just submitted the final clips for "TypeScript: Getting Started". 🎉
The course explores primitive types, arrays, tuples, enums, interfaces, functions, classes, modules, using TS with and without a compiler, features to avoid, and much more.
Publishing this week on Dometrain!
The course explores primitive types, arrays, tuples, enums, interfaces, functions, classes, modules, using TS with and without a compiler, features to avoid, and much more.
Publishing this week on Dometrain!
March 9, 2025 at 10:51 PM
Just submitted the final clips for "TypeScript: Getting Started". 🎉
The course explores primitive types, arrays, tuples, enums, interfaces, functions, classes, modules, using TS with and without a compiler, features to avoid, and much more.
Publishing this week on Dometrain!
The course explores primitive types, arrays, tuples, enums, interfaces, functions, classes, modules, using TS with and without a compiler, features to avoid, and much more.
Publishing this week on Dometrain!
V0's system prompt specifies these naming and casing rules. I agree with all this.
For years, I used PascalCase for React components. But I now I use kebab-case instead to avoid casing issues.
For years, I used PascalCase for React components. But I now I use kebab-case instead to avoid casing issues.
January 1, 2025 at 3:01 PM
V0's system prompt specifies these naming and casing rules. I agree with all this.
For years, I used PascalCase for React components. But I now I use kebab-case instead to avoid casing issues.
For years, I used PascalCase for React components. But I now I use kebab-case instead to avoid casing issues.
I used to use Google and use Stackoverflow.
Now I ask ChatGPT.
It summarizes complex decisions quickly and lays out the information in a helpful manner.
For example, I am considering a GUID primary key. ChatGPT summarizes the tradeoffs nicely.
Now I ask ChatGPT.
It summarizes complex decisions quickly and lays out the information in a helpful manner.
For example, I am considering a GUID primary key. ChatGPT summarizes the tradeoffs nicely.
December 2, 2024 at 5:33 PM
I used to use Google and use Stackoverflow.
Now I ask ChatGPT.
It summarizes complex decisions quickly and lays out the information in a helpful manner.
For example, I am considering a GUID primary key. ChatGPT summarizes the tradeoffs nicely.
Now I ask ChatGPT.
It summarizes complex decisions quickly and lays out the information in a helpful manner.
For example, I am considering a GUID primary key. ChatGPT summarizes the tradeoffs nicely.
Next.js and React Router 7 (RR7) have fundamentally different approaches to decomposition.
In Next.js, you decompose via files.
In React Router 7, you decompose via functions.
Which do you prefer, and why?
In Next.js, you decompose via files.
In React Router 7, you decompose via functions.
Which do you prefer, and why?
November 25, 2024 at 3:22 PM
Next.js and React Router 7 (RR7) have fundamentally different approaches to decomposition.
In Next.js, you decompose via files.
In React Router 7, you decompose via functions.
Which do you prefer, and why?
In Next.js, you decompose via files.
In React Router 7, you decompose via functions.
Which do you prefer, and why?
![const config = {
entry: ["src/main.tsx"],
ignore: [
// Deliberately telling Knip to ignore all test files.
// This way, if a file or func is only used by a test, knip will report it as unused.
"src/**/*.test.*",
]
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:oqxta3otybn6tmffwkawtor3/bafkreihesandg2pwwp5hxc6b6sowpwq6jt4qghkqvirakhgzaqajrdon3u@jpeg)
React 19 RC1 is out.
Suspense siblings prerender!
When a component suspends, React commits the fallback of the nearest Suspense boundary without waiting for the sibling tree to render. Then it schedules another render for the siblings.
Details: github.com/facebook/rea...
Suspense siblings prerender!
When a component suspends, React commits the fallback of the nearest Suspense boundary without waiting for the sibling tree to render. Then it schedules another render for the siblings.
Details: github.com/facebook/rea...
November 15, 2024 at 2:09 PM
React 19 RC1 is out.
Suspense siblings prerender!
When a component suspends, React commits the fallback of the nearest Suspense boundary without waiting for the sibling tree to render. Then it schedules another render for the siblings.
Details: github.com/facebook/rea...
Suspense siblings prerender!
When a component suspends, React commits the fallback of the nearest Suspense boundary without waiting for the sibling tree to render. Then it schedules another render for the siblings.
Details: github.com/facebook/rea...
Problem: I want to test my React app's error boundaries.
Solution: Force an error via search params.
This hook throws an error when a "throwError" search param is present. I use this to test my ErrorBoundaries in my automated tests too.
Solution: Force an error via search params.
This hook throws an error when a "throwError" search param is present. I use this to test my ErrorBoundaries in my automated tests too.
![function useForceErrorViaSearchParam() {
const [searchParams] = useSearchParams();
const error = searchParams.get("throwError");
if (error) throw new Error(error);
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:oqxta3otybn6tmffwkawtor3/bafkreiacpt3ooo523ssqte3mgisq6btrqtpmadwnfggor6rvtdto3gffzy@jpeg)
November 8, 2024 at 3:38 PM
Problem: I want to test my React app's error boundaries.
Solution: Force an error via search params.
This hook throws an error when a "throwError" search param is present. I use this to test my ErrorBoundaries in my automated tests too.
Solution: Force an error via search params.
This hook throws an error when a "throwError" search param is present. I use this to test my ErrorBoundaries in my automated tests too.
Just published: Mastering Mocking in Automated Tests
I talk with @kettanaito.com about best practices for writing mocks including mocking mistakes, finding mocking boundaries, mock data, distinctions between different types of testing, and much more.
I talk with @kettanaito.com about best practices for writing mocks including mocking mistakes, finding mocking boundaries, mock data, distinctions between different types of testing, and much more.
November 7, 2024 at 6:35 PM
Just published: Mastering Mocking in Automated Tests
I talk with @kettanaito.com about best practices for writing mocks including mocking mistakes, finding mocking boundaries, mock data, distinctions between different types of testing, and much more.
I talk with @kettanaito.com about best practices for writing mocks including mocking mistakes, finding mocking boundaries, mock data, distinctions between different types of testing, and much more.
Tanstack query is awesome for fetching and caching data.
But, it's broader than that. It's an *async state* library.
Example: Here's a custom React Query hook for checking if a device's camera or audio input is available.
But, it's broader than that. It's an *async state* library.
Example: Here's a custom React Query hook for checking if a device's camera or audio input is available.
![import { useQuery } from "@tanstack/react-query";
type Status = "loading" | "error fetching" | "no devices found" | "available";
export const useMediaAvailability = (kind: MediaDeviceKind) =>
useQuery({
queryKey: ["mediaAvailability", kind],
queryFn: async (): Promise<Status> => {
try {
const mediaDevices = await navigator.mediaDevices.enumerateDevices();
const cameraDevices = mediaDevices.filter((device) => device.kind === kind);
if (cameraDevices.length && cameraDevices.some((d) => d.label)) {
return "available";
}
return "no devices found";
} catch (error) {
return "error fetching";
}
},
});](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:oqxta3otybn6tmffwkawtor3/bafkreiaodq3qaorw5kr5wgl2tzs5r27blb2eq4s253uxla3dwoagmxj5we@jpeg)
November 6, 2024 at 9:20 PM
Tanstack query is awesome for fetching and caching data.
But, it's broader than that. It's an *async state* library.
Example: Here's a custom React Query hook for checking if a device's camera or audio input is available.
But, it's broader than that. It's an *async state* library.
Example: Here's a custom React Query hook for checking if a device's camera or audio input is available.
Studio setup 2.0:
- Closed blinds (to control the light)
- New 5600K keylight & backlight
- Camera white balance at 5600K
- New camera angle (hides door)
- Recording in 4K/24p at 1/50
- Cleaner background
- Added accent lights
- Brushed my hair
Thoughts? Suggestions?
- Closed blinds (to control the light)
- New 5600K keylight & backlight
- Camera white balance at 5600K
- New camera angle (hides door)
- Recording in 4K/24p at 1/50
- Cleaner background
- Added accent lights
- Brushed my hair
Thoughts? Suggestions?
November 6, 2024 at 6:08 PM
Studio setup 2.0:
- Closed blinds (to control the light)
- New 5600K keylight & backlight
- Camera white balance at 5600K
- New camera angle (hides door)
- Recording in 4K/24p at 1/50
- Cleaner background
- Added accent lights
- Brushed my hair
Thoughts? Suggestions?
- Closed blinds (to control the light)
- New 5600K keylight & backlight
- Camera white balance at 5600K
- New camera angle (hides door)
- Recording in 4K/24p at 1/50
- Cleaner background
- Added accent lights
- Brushed my hair
Thoughts? Suggestions?