Follow this blog

CSS-ing with Attribute Selectors

This post will be given as a lightning talk with It's posted here so folks can read along. Attribute selectors are my favorite selectors. Their specificity is as low as a class. But unlike class — which only supports space-delimited strings with escaped special characters — attribute selectors give you complete control of your selection. They're so powerful, you can even use them to surgically dissect a class selector. In five minutes, I'll show you five ways to make practical use of attribute selectors. First, the syntax # Attribute selectors can target any attribute. href from an <a> tag, src from an <img> tag, aria- and data- attributes, you name it! As syntax goes, attribute selectors wrap the name of the target attribute in brackets. [href] { color: red }; This line turns anything with an href attribute red. We have to be careful because other elements like <link> also have an href attribute. Combining attributes selectors with other selectors is a common for scoping intent. a[href] { color: red }; While <links href> is display:none by default, it's a good practice to be explicit with attribute selectors. Style attributes by value # So how do we make attribute selectors useful? We can use them to identify placeholder links by scoping our href selector to anchors with empty or "#" href attributes. a[href=""], a[href="#"] { color: red } = selects an exact match for the attribute value. As shown above, we need to add a case for every exact match we want. But there are other matching techniques. We can match the beginning of a value as well. Let's add another case for insecure http links: a[href=""], a[href="#"], a[href^="http:"] { color: red } ^= matches any value that start with the provided string. Conversely, there's a $= matcher but I don't find it terribly useful. There can be any manner of appendages at the end of a URL. Fortunately, there is a *= matcher to match a character set anywhere in the attribute value. Let's use it to turn urls with a fragment identifier green: a[href=""], a[href="#"], a[href^="http:"] { color: red } + a[href*="#"] { color: green } Warning! This selector is inclusive of URLS that only have a pound value, too! Meaning are placeholder links have also turned green. Not to fear, we can solve this by ensuring that the most specific rule is declared last: + a[href*="#"] { color: green } a[href=""], a[href="#"], a[href^="http:"] { color: red } - a[href*="#"] { color: green } Style by state # Styling by attribute means we can style by state as well. Consider the disabled attribute on an input. We can use that to style input[type="text"][disabled]. We can take this approach even further, using aria attributes. One aria label used for navs is aria-current. Let's use it to style mark and style the current page: [aria-current="true"], [aria-current="page"] { color: fuchsia; } Build your own language with data attributes # Up to this point, we've only used standard element attributes. We can take that further with data attributes. data is a an attribute prefix that may be used to safely create and utilize new attributes in your code. Let's wrap all of our debugging selectors into a new data attribute selector: data-debug-links. + [data-debug-links] { a[href*="#"] { color: green } a[href=""], a[href="#"], a[href^="http:"] { color: red } + } Now we can enable or disable this link debugging style by adding the data-dubug-links selector to a descendent. There's so much more! # Thanks for watching this quick intro to to data attribute selectors. There is so much more I wish I could share, but I can't. If you'd like to learn how this can be used to build application stylesheets, checkout my post at And if you'd like to see the CSS framework I'm building with it, checkout And if you'd like to help me build it. Checkout my YouTube streaming channel at

A bargain mic for yellers

Kevin and Bobby started a new podcast: Essentially Useless. Kevin hit me up for a mic recommendation — budget: $150/person. Recommendation # Elgato Wave:3 Bobby is a yeller. Yelling is a nightmare to mix. It's also a big problem for streams — where platform compression can make digital peaks unlistenable. Elgato Wave has the only reliable (software limiter) I've tested. Limiting is something I've spent hundreds to solve with hardware. At $150, the Elgato Wave is a bargain mic for yellers looking to improve their stream. Why it I recommend it # This mic is the pinnacle of USB-mic technology, sporting a classy design, in an affordable package. Clipguard # Elgato Clipguard anti-distortion technology is the killer feature of Wave. I've never recommended a USB-only mic until the Elgato Wave announcement. That's because USB-mics aren't extensible. When I started podcasting and streaming, the first first piece of outboard gear I needed was a limiter/compressor. But that's all I've needed. To keep a strong and peak-free audio signal, I tried the DBX 286s ($229) — which I do not recommend. I eventually landed on the SoundDevices MixPre-3 ($899) — which I love. But, $229 is the entry point for solving this issue with hardware. And that's outside of the $150 budget. Elgato to the rescue with the only software-powered clipping solution I've seen that works. I'm not sure how they do it but, in my tests, Clipguard is a reliables limiter. Making it well worth the $150 price-tag. Lewitt inside # Wave was designed my Lewitt. If you don't know much about audio, Lewitt makes incredible microphones. As an A/V nerd, this is what captured my attention. I trust them just as much as industry titans Shure, Rode, and Audio-Technica. The mic has an incredibly low self-noise, sounds great, and does an admirable job (for a condenser) at rejecting background noise. Attractive # This thing looks nice and is small enough to disappear from the frame. I lke the old RCA-style look in a contemporary matte black. The competition # There is no competition in this space. Should I buy a Wave:1 or Wave:3? # The street price of the Wave:1 is $130. The Wave:3 is regularly discounted to $145. At a $15 difference, absolutely get the Wave:3. But if you can only find the Wave:3 at retail ($159), and that $30 is a deal-breaker, here's what you need to know. There are 3 major differences: Wave:1 lacks a capacitive mute button Wave:1's hardware dial only controls headphone volume (not gain or mic/pc mix) Wave:1 has a max sample rate of 48kHz Other than that, it's the same mic and all features can be controlled via Elgato WaveLink software. Compromises # The compromise with this mic is that build quality. I think that's a great compromise because folks can't feel your mic thru the stream and you won't be touching it a whole lot. Compare that to the Shure MV7 which retains a high build quality but at the expense of shit sound. Accessories # Elgato Wave Pop Filter # Elgato Wave Pop Filter ($29) is an attractive design pop filter if you want to get right up on your mic. But I had no trouble with the build-in pop filter — with the mic placed about 6" from my face at a 45 degree angle. Elgato Wave Shock Mount # Elgato Wave Shock Mount ($39) is in attractive minimal shock mount. I like it. But the included crap-plastic mount isn't terrible either. Try it without and see how it does for you. Bottom Line # Elgato Wave:3 is the best microphone for streamers and podcasters on a budget. Clipguard is worth every penny, even if the mic didn't sound great. But it does. At ~$150, it can't be beat. As an Amazon affiliate, I may make a small portion of purchases made from the links on this page.

single-threaded notes, E1

Today Jenn Creighton launched single-threaded podcast. I'm thrilled 🥳 Jenn joined me on React Podcast in November and her episode is fire. Listening to it with the Discord crew unlocked new ways for us to talk about our feelings and experiences. So, we're getting the crew together to learn even more from Jenn, with single-threaded episode parties, Wednesdays 10am PT. I'm amazed at how this first episode turned out. Jenn is a natural and Erin Fox is an incredible first guest. Jenn and Erin brought the funny and I LOL'd hard. But they were remarkably candid about their career experiences. All-in-all a killer first episode. Quote and notes # These are not direct quotes. They are summaries, as I heard them. Listen to the full episode for accurate quotes and requisite context. The provided timestamps should get you close. Your first insight into a company's culture is their interview process. You're testing for the wrong things, if your interview process tests only for high pressure situations. A 5 year plan is nonsense. Ask if your [personal] aspirations match what the company is looking for — and vice-versa? Ask for a take-home "exception" for coding challenges. It's almost always on option. Take-home challenges usually come with a time limit. Disregard it. They expect you to finish. Don't interview with your favorite company first. Save them for later in the process to get your interview skill back up. Interview on Thursday or Friday. People feel better those days. Everyone is sad on Monday. No Monday interviews. Sometimes, when you get rejected it's because the company can't properly support you and someone is looking out for you. The more I interviewed the more I learned to not put all my eggs in one basket. It took awhile, to learn when to finally get excited, but in the end it's worth it to wait. When you're waiting, or handling a rejection, do a thing you're good at. For me, that's be baking. Date lots of companies Erin's list of questions to ask companies: I thought I'd share the questions I ask when interviewing for a new job. I pulled them from experience, research, blog posts, etc. Most of them I think came from @kurtkemple's blog? Anyway, hope they help all you job seekers out there! — Erin Fox (@erinfoox) June 26, 2020 Erin's post on interview red flags. When you get positive feedback, keep it in a file for your future resume. Poppy (the things you like today) can change. Follow-up questions # In our post-episode chat, I asked Erin how her experience as a baker has informed her coding career. (personal summary, note quote) Recipes are usually paired with a story. Stories are just as important as recipes. Code stories don't get passed down as much as they should. Solutions and patterns have a history that illustrates their value. It's important to share solutions with the stories that inspired them. Keep in touch #

Comprehending YAML

YAML is a little clever for my taste but I'm starting to get it. Before yesterday's post, I had no idea how it related to JSON. In that post I personalized a few examples from the YAML docs and manually converted them. And after sleeping on my exercise, I have a better picture of what's going on. YAML infers complex types YAML infers simple types YAML shorthand can be confusing YAML patterns Arrays of arrays Arrays of objects Objects of arrays Objects of objects All mixed up YAML infers complex types # As much as possible, YAML infers complex data structures by the data it composes. - Evermore - Folklore - Lover This is a sequence and the containing Array structure is implied. ["Evermore", "Folklore", "Love"] Compare this to a YAML mapping, where the root structure is implied to be an object. Evermore: 2020 Folklore: 2020 Lover: 2019 Again, here's what that looks like in JSON. { "Evermore": 2020, "Folklore": 2020, "Lover": 2019 } So what happens if we try to mix sequences and mappings at the root level? -Evermore Folklore: 2020 Lover: 2019 It breaks: YAMLException: end of the stream or a document separator is expected at line 2, column 9: Folklore: 2020 This tracks because something can't be both an object AND an array. Understanding inference # Indentifying when you're describing an Array (sequence) and when you're describing an Object (mapping) is critically important. And it's not always clear. Can you guess what the JSON equivalent for this YAML is? - Evermore: 2020 - Folklore: 2020 - Lover: 2019 The dashes - indicate that the root structure is an array (sequence). But each array item comprises a descrete object (mapping) with a key-value pair. This is inferred from the colon : between values in each array item. So the JSON output for the YAML above is this: [ { "Evermore": 2020 }, { "Folklore": 2020 }, { "Lover": 2019 } ] An array of objects (or "sequence of mappings"). Now that I understand it, I see the dash (-) like list-items in Markdown. YAML infers simple types # Let's take an array (sequence) of objects (mappings). - Evermore: 2020 - Folklore: 2020 - Lover: 2019 The keys are strings and the values are numbers. Evermore becomes "Evermore". 2020 stays 2020. Taylor Swift becomes "Taylor Swift". Takeaways # After looking at so much JavaScript and JSON, this is a little unsettling but — in simple examples like this — there's a simplicity to the representation. YAML shorthand can be confusing # Below we have an array (sequence) of objects (mappings). - name: Taylor Swift - name: The National JSON looks like this. [ { "name": "Taylor Swift" }, { "name": "The National" } ] What does it look like to add more properties to the these objects? YAML allows us to use JSON object syntax. - { name: Taylor Swift, album_count: 9 } - { name: The National, album_count: 8 } But it's not super YAML-y. So there's an alternative that uses newlines. - name: Taylor Swift album_count: 9 - name: The National album_count: 8 This is challenging for me to interpret. Because the dash (-) is separating discrete objects (mappings) in the array (sequence). So it feels like the dash (-) is a directive for the object (mapping). But it's not, it's communicating that the containing structure is an array. Pressing into the confusion, consider this array (sequence) containing a string, number, object, and array. - Taylor Swift - 1989 - album_count: 9 nationality: American - - Big Machine - Republic This is that same file in JSON. [ "Taylor Swift", 1989, { "album_count": 9, "nationality": "American" }, ["Big Machine", "Republic"] ] Takeaways # The presence of dash (-) and colon (:) describe the surrounding structure. In the case of arrays (sequences) of objects (mappings), with multiple key-value pairs, this terseness can be unclear. At least until you've trained ourselves to see the invisble structures that (-) and (:) represent. - name: Taylor Swift album_count: 9 For me, learning to interpret the above line as an object in an array has made the biggest difference in my ability to quickly parse YAML. YAML patterns # Identifying patterns is helpful. Here are a few complex handoffs that I had trouble with. Array of arrays : sequence of sequences # - - Evermore - Folklore - Lover - - I Am Easy to Find - Sleep Well Beast - Trouble Will Find Me This YAML file is an array (sequence) containing two arrays (sequences) each with three strings (scalars). Array of objects : sequence of mappings # - name: Taylor Swift album_count: 9 - name: The National album_count: 8 This YAML file is an array (sequence) referencing two objects (mappings) each with two key-value pairs. Object of arrays : mapping of sequences # Taylor Swift: - Evermore - Folklore - Lover The National: - I Am Easy to Find - Sleep Well Beast - Trouble Will Find Me This YAML file is an object (mapping) with two key-value pairs, each key referencing an array (sequence) of strings (scalars). Object of objects : mapping of mappings # Taylor Swift: album_count: 9 label: Republic The National: album_count: 8 label: 4AD This YAML file is an object (mapping) with two key-value pairs, each key referencing another object with two key-value pairs with mixed strings and numbers (scalars) as values. All mixed up # Parse isolated patterns is a good start but the big game is reading entire YAML files. Look at this GitHub Actions workflow. name: Netlify Rebuild on: schedule: - cron: "0 21 * * MON-FRI" jobs: build: name: Netlify Rebuild runs-on: ubuntu-latest steps: - name: Curl request run: curl -X POST -d {} Here's what we can evaluate. The root structure is an object with three properties name references a string on references an object with one property schedule references an array with one object containing one property cron references a string jobs referencs an object with one property build references an object with three properties name references a string runs-on references a string steps references array with an object containing two properties name references a string run references a string Conclusion # I think I understand YAML enough to move on with my life. I hope you feel the same way. Learning how to identify the implied structures has made all the difference. Keep in touch #

A Non-Comprehensive Guide to YAML for Folks Who Like JSON Just Fine

YAML is a human friendly data serialization standard for all programming languages. I don't know precisely which humans YAML is friendly to but I'm not one of them. And it looks like the people who run in my circles are also excluded. lies — Michael Chan (@chantastic) February 10, 2021 Mapping to JSON # Between Eleventy, GitHub Actions, and a recent foray into serverless, I'm using a more YAML. And I don't understand it. This is mapping for my JSON-acquainted brain. Comments Array of strings Array of objects — one value Array of objects — many values Object of keyed arrays of strings Object of keyed objects with mixed values Array of arrays with mixed values Nodes (variables) Sample GitHub Action Takeaways Resources and further reading Comments # YAML # you can put these p much anywhere JSON JSON doesn't support comments. Array of strings # Sequence of Scalars YAML - Evermore - Folklore - Lover JSON ["Evermore", "Folklore", "Love"] Array of objects — single value # Mapping Scalars to Scalars YAML - Evermore: 2020 - Folklore: 2020 - Lover: 2019 JSON [ { "Evermore": 2020 }, { "Folklore": 2020 }, { "Lover": 2019 } ] Array of objects — many values # Sequence of Mappings YAML - name: Taylor Swift album_count: 9 label: Republic - name: The National album_count: 8 label: 4AD JSON [ { "name": "Taylor Swift", "album_count": 9, "label": "Republic" }, { "name": "The National", "album_count": 8, "label": "4AD" } ] This syntax confused the shit out of me. YAML docs show the dash and first property on different lines which is much more legible. - name: Taylor Swift album_count: 9 label: Republic - name: The National album_count: 8 label: 4AD Object of keyed arrays of strings # Mapping Scalars to Sequences YAML Taylor Swift: - Evermore - Folklore - Lover The National: - I Am Easy to Find - Sleep Well Beast - Trouble Will Find Me JSON { "Taylor Swift": ["Evermore", "Folklore", "Lover"], "The National": [ "I Am Easy to Find", "Sleep Well Beast", "Trouble Will Find Me" ] } Object of keyed objects with mixed values # Mapping of Mappings YAML Taylor Swift: album_count: 9 label: Republic The National: album_count: 8 label: 4AD JSON { "Taylor Swift": { "album_count": 9, "label": "Republic" }, "The National": { "album_count": 8, "label": "4AD" } } Array of arrays with mixed values # Sequence of Sequences YAML - [name, album_count, label] - [Taylor Swift, 9, Republic] - [The National, 8, 4AD] JSON [ ["name", "album_count", "label"], ["Taylor Swift", 9, "Republic"], ["The National", 8, "4AD"] ] Nodes # YAML Folklore: # Following node labeled TS and AD - &TS Taylor Swift - &AD Aaron Dressner - Jack Antonoff Lover: - *TS # Subsequent occurrence I Am Easy to Find: - *AD JSON No JSON equivalent. But this is the output from the above YAML. { "Folklore": ["Taylor Swift", "Aaron Dressner", "Jack Antonoff"], "Lover": ["Taylor Swift"], "I Am Easy to Find": ["Aaron Dressner"] } Sample GitHub Action # YAML name: Netlify Rebuild on: schedule: - cron: "0 21 * * MON-FRI" jobs: build: name: Netlify Rebuild runs-on: ubuntu-latest steps: - name: Curl request run: curl -X POST -d {} JSON { "name": "Netlify Rebuild", "on": { "schedule": [ { "cron": "0 21 * * MON-FRI" } ] }, "jobs": { "build": { "name": "Netlify Rebuild", "runs-on": "ubuntu-latest", "steps": [ { "name": "Curl request", "run": "curl -X POST -d {}" } ] } } } Takeaways # Complex types are inferred # The structures of complex types are hidden in YAML. Keep a look out for - and : which indicate the containing structure. Dash - # If you see a dash -, it means you're describing a single array item. Colon : # If you see a color : separating two values, it means your describing a key-value pair. In the wild # Since YAML is used often for configuration, it's likely that your root type is object. Resources and further reading # Official YAML 1.2 Documentation at YAML to JSON web converters Keep in touch #

Compare AVO 🥑 and standard BEM Conventions

AVO 🥑 : BEM (standard) syntax comparison # This is a chart, mapping AVO 🥑 syntax to standard BEM verbiage. AVO 🥑 is a syntactive dialect of BEM's Block, Element, Modifier constructs. Block Element Modifier Block # A functionally independent component that can be reused. /* BEM */ .avatar { } /* AVO 🥑 */ [data-avatar] { } <!-- BEM --> <img class="avatar" src="…" alt="…" /> <!-- AVO 🥑 --> <img data-avatar src="…" alt="…" /> Element # A composite part of a block that can't be used separately from it. /* BEM */ .avatar { } .avatar__img { } /* AVO 🥑 */ [data-avatar] { } [data-avatar--img] { } <!-- BEM --> <span class="avatar"> <img class="avatar__img" src="…" alt="…" /> </span> <!-- AVO 🥑 --> <span data-avatar> <img data-avatar--img src="…" alt="…" /> </span> Modifier # An entity that defines the appearance, state, or behavior of a block or an element. /* BEM */ .avatar--status_ok { } /* AVO 🥑 */ [data-avatar~="status:ok"] { } <!-- BEM --> <img class="avatar avatar--status_ok" src="…" alt="…" /> <!-- AVO 🥑 --> <img data-avatar="status:ok" src="…" alt="…" />

AVO 🥑 — A BEM Dialect Using Data Attributes

Attribute Value-Object # AVO 🥑 is a syntactive varient of BEM's Block, Element, Modifier constructs. AVO is an initialism for "Attribute Value-Objects". As a BEM dialect, AVO observes the concepts of BEM but uses data attribute syntax that reduced (template) repetition and improves template legibility (particularly when used in legacy codebases or with utility class libraries). Contents Attribute Value-Object Video Goals Attribute Value (boolean) Value-object (enumerable) Value-object (unbounded) Relative Video # Watch me demonstrate this syntax in a LIVE YouTube session. Goals # AVO 🥑 uses data attribute selectors to achieve 5 primary goals: Enable copy-paste of large code examples — from docs to code — in React/JSX or HTML template Improve legibility of view code by reducing, in-template, selector duplication Facilitate migration of code with automated tools like grep, find-and-replace, and jscodeshift — by providing first class attribute selectors over class name strings Eliminate (as much as possible) the likelihood of selector collision between new selectors and legacy codebases Clarify the relationship of composed elements by segmenting "modifier" selectors into attribute namespaces Attribute # AVO 🥑 elements use empty attribute selectors for BEM Blocks. CSS # [data-avatar] { … } HTML # <img data-avatar src="" alt="cute kitten" /> Value (boolean) # AVO 🥑 extensions use the ~= attribute selector for booleans BEM Modifiers. Key-only values (like mention above) are inferred to be true, like in BEM. CSS # [data-avatar~="mention"] { --avatar--size: 1.25em; --avatar--font-size: 1.5em; margin-right: 0.125em; transform: translateY(0.25em); } HTML # <img data-avatar="mention" src="" alt="cute kitten" /> Value-object (enumerable) # AVO 🥑 extensions also use the ~= attribute selector for enumerable, key-value BEM Modifiers. CSS # [data-avatar~="size:sm"] { --avatar--size: 3rem; } [data-avatar~="size:md"] { --avatar--size: 4rem; } [data-avatar~="size:lg"] { --avatar--size: 5rem; } HTML # <img data-avatar="size:sm" src="" alt="cute kitten" /> <img data-avatar="size:md" src="" alt="cute kitten" /> <img data-avatar="size:lg" src="" alt="cute kitten" /> Value-object (unbounded) # AVO 🥑 extensions use the *= attribute selectors for keys with unkown values. This allows for indeterminate values status:<undefined> to be extended with inline styles. CSS # [data-avatar*="status:"] { --avatar--border: clamp(2px, calc(var(--avatar--size) * 0.1), 5px) solid transparent; } HTML # <img data-avatar="status:" style="border-color: purple" {...} /> Warning # While available, this isn't recommended. Using a fixed set of values is preferred. If you want to provide a default, consider instead providing an explicit unknown selector: [data-avatar~="status:unkown"] { border-color: transparent; } Relative # AVO 🥑 extensions use a -- delimiter for BEM Elements. root-element--composed-element The example below introduces a header that includes avatar styles that are composed with the data-avatar Block.0 CSS # [data-person-header] { … } [data-person-header--avatar] { --avatar--size: 7rem; } HTML # <header data-person-header> <img data-avatar data-person-header--avatar {...} /> </header>

Import Both Default and Named Exports

We can mix and match import styles to keep code tidy and direct. The code below imports both the default export (as cheesburger) as well as all named exports. import { default as cheeseburger, bun, cheese, patty, } from "./cheeseburger.mjs"; We can tidy it up a smidge by splitting the default export and named export import statements — using a comma. - import { - default as cheeseburger, - bun, - cheese, - patty, - } from "./cheeseburger.mjs"; + import cheeseburger, { bun, cheese, patty } from "./cheeseburger.mjs"; This eliminates the need to rename the default on import with as. What mixed imports are not # The import position of default and named exports cannot be swapped. When mixing the two, it's always default first then named exports. When I first saw this syntax, I assumed that every comma was like a repeaet — a new opportunity to assign local variables. That's not how it is. One comma, after the default, and before the named. Go pro # This is part of a course I'm building on modules at Join for videos

Import Default From Named Export

Importing default can be nuanced. There are just so many ways to do it. I like to think of default as a named export with a fixed (non-customizeable) name. Check out how we can import default like a named export. import { default as Highlander } from "./highlander.js"; The lines below yield identical results. - import Highlander from "./highlander.js"; + import { default as Highlander } from "./highlander.js"; Unlike named exports, you can't import default and use it directly. It must be remaned at import. This is why the more ergonomic option of import MyAlias from "…"; exists. Use default thru a module alias # We've discussed module aliases in past posts. And they have some overlap with the default export. Check out this totally valid use of Module aliases and default. import * as Highlander from "./highlander.js"; Highlander.default(); Technically, you're not using the default keyward because we're accessing the reference as a property. Of course, this looks a little strange when used in frameworks like React. <Highlander.default>…<Highlander.default /> My take # I don't use default as or ModuleAlias.default() import styles in practice. I just find it helpful to remember how default is exported from modules. In future posts, we'll cover two, more ergonomic alternatives capturing both default and named exports. Go pro # This is part of a course I'm creating on modules at Join for videos

Import Default Export

There can only be one default export. export default function Highlander() {} A JavaScript module is allowed any number of named exports. But default exports are in short supply. You get one and only one. export default function Highlander() {} export default function OtherHighlander() {} // SyntaxError: Identifier '.default' has already been declared This limit on defaults empowers a sugary syntax on the import side. import Highlander from "./highlander.js"; We can assign the default export to any variable name, without fuss. - import Highlander from "./highlander.js"; + import LiterallyAnything from "./highlander.js"; So, what should be the default? # In my last post, I demonstrated how I use named exports to expose UI components that are designed to work together. export List …; export ListItem …; export Controller …; With this structure, default becomes a natural place to expose a, default composition of those components for drop-in use. export List …; export ListItem …; export Controller …; export default function EmailList() { return ( <Controller> <List renderItem={item => <ListItem item={item} />} /> </Controller> ) } Now, anywhere I want the default composition, I maximally renamable import. // ./app.js import EmailList from "./email.js"; export default function App() { return ( <main> <EmailList /> </main> ); } A note on exporting functions # Because default exports aren't referenced by the provided name, there's a tendency to leave off of functions names. "It's cleaner!" Unfortunately, leaving the name off will impact your developer experience. DevTools will treat these references as anonymous functions. So, I recommend adding keeping a descriptive name. My take # I love default exports — when used as intended. A lot of folks in frontend recommend using only default exports and mandating one-component-per-file. This feels contrary to the design of JavaScript modules. And the practice has the secondary effect of requiring bespoke file structures to communicate components relationships and private components — something modules already do well. Use named exports and defaults — together — as intended. Go pro # This is part of a course I'm creating on modules at Join for videos

Import All Named Exports into One Variable

We can import all of a JavaScript module's contents into a single variable with * as. import * as stringUtils from "./string-utils.mjs"; Now stringUtils can reference any exports in string-utils.mjs using property access syntax. import * as stringUtils from "./string-utils.mjs"; stringUtils.chant("we will"); stringUtils.hype("rock you"); Where is this a good practice? # Importing all named exports into a single variable is great feature for application code. Consider these UI modules that have a similar export signatur. email.js export Item …; export List …; export ListItem …; export Controller …; contact.js export Item …; export List …; export ListItem …; export Controller …; Renaming all of these named exports is super irritating! import { List as EmailList, ListItem as EmailListItem, Controller as EmailController, } from "./email.js"; import { List as ContactList, ListItem as ContactListItem, Controller as ContactController, } from "./contact.js"; By reducing moduling imports to a single reference, we eliminate the need to rename the colliding exports. import * as Email from "./email.js"; import * as Contact from "./contact.js"; // Email.List, Contact.List, Email.Item, Contact.Item, etc. And these namespaces guarantee that we never experience a collision between named exports. My take # This is my preferred way to import named exports. It has eliminated pointless hours spent justifying local references between modules I don't control. Go pro # This is part of a course I'm build on modules at Join for videos

Schedule Netlify Builds with GitHub Actions, Cron, and Webhooks

Instructions # Add this GitHub Action to your repo at .github/workflows/schedule-netlify-build.yml # .github/workflows/schedule-netlify-build.yml name: Schedule Netlify Build on: schedule: # Customize schedule expression at # This one runs at 800 UTC daily - cron: "0 8 * * *" jobs: build: name: Call Netlify build hook runs-on: ubuntu-latest steps: - name: Curl request run: curl -X POST -d {} #YOUR_BUILD_HOOK_URL# Tailor your cron schedule # Determine a build schedule and use to describe it as a cron schedule expression. - # This one runs at 800 UTC daily - - cron: "0 8 * * *" + # This one runs every 6 hours + - cron: "* */6 * * *" Generate a Netlify build hook # Netlify build hooks are webhooks with one function: re-build your site when called. Any POST request to your Netlify build hook triggers a build. Generate a new build hook here: Site settings > Build & deploy > Continuous deployment > Build hooks. Image from Netlify build hooks documentation You have to name your hook. The name doesn't make much difference as long as it's unique and descriptive to you. Paste your build hook into the GitHub Action # - run: curl -X POST -d {} #YOUR_BUILD_HOOK_URL# + run: curl -X POST -d {} Push! # Push your new workflow up to your repository and watch the Actions tab. You'll seeing scheduled jobs show up, according to your schedule. Here's what to expect: Extra credit # Get fancy and ensure that nobody spams your build hook with a GitHub Action secrets. A Story # Dynamic Site; Static Builds # Over at, we've built a calendar of events in Eleventy (a slick static site generator). Events are listed under Upcoming and Past event headings based on their date. Because Eleventy generates static sites, that deterimation happens at build time. If we want to keep data fresh, we have to manually re-build the site at least once per day. Using Netlify build hooks, we can automate those builds on a schedule! There are plenty of services that will run a cron job. What I like about a GitHub Actions based solution is that everything is kept in the repo. The source can be maintained and documented with the rest of the project! Resources # GitHub Workflow: schedule event Netlify build hooks community-calendar GitHub Actions source Schedule Your Netlify Build with GitHub Actions Schedule Netlify builds with GitHub Actions Watch me and the crew struggle thru this the first time

Import and Rename Named Exports

JavaScript Modules have a syntax for remaning named exports, at import. import { exportedName as localName } from "…"; I think about this as "given name" and "nickname". Michael Chan is the name my creators gave me but — on this site — I go by chantastic. import { michaelChan as chantastic } from "./michael-chan.mjs"; This is one of two tools we have for avoiding naming collisions between modules. Rename named exports to avoid a collision # In my last post — Import Named Exports — we imported two functions from the string-utils module: hype and chant. import { hype, chant } from "./string-utils.mjs"; What if the modules we're working in already has a hype function? Are we stuck stuck? Do we have to refactor our code to consider the new module? Nope! We use the as keyword to rename named exports locally. - import { hype, chant } from "./string-utils.mjs"; + import { + hype as hypeText, + chant + } from "./string-utils.mjs"; With as, we have full control of the module we're working in. My take # The as keyword gives us a way to avoid naming collisions, or use a name that's more contextually accurate. This is great for working with modules in a codebase and the larger npm ecosystem. However, I find this to be a less ideal form collision avoidance than importing all of a module's contents into a single variable. But we'll cover that in a future post 😅. Go pro # This is part of a course I'm build on modules at Join for videos

Import Named Exports

By default, expressions and assignments declared inside a module aren't available outside of that module. // file: string-utils.mjs function hype(message) { return `${message.toUpperCase()}!!!`; } Here, hype is only available to other functions inside string-utils.mjs. We can expose hype to other modules by prepending the export keyword. // file: string-utils.mjs - function hype(message) { + export function hype(message) { return `${message.toUpperCase()}!!!`; } hype is now a named export from the string-utils module. Keep in mind that export-ing something doesn't mean it is automatically available throughout the codebase. Every export requires an import. Import named exports # Anything one module exports can be imported and used by another module. import { hype } from "./string-utils.mjs"; console.log(hype("moduuuules")); // => MODUUUULES!!! The syntax we use to access named exports is similar to object destructuring assignment. let person = { name: "chantastic" }; let { name } = person; We can only import what we can access by name. So, the import statement below would fail (with our current module): import { hype, chant /* oops. no chant */ } from "./string-utils.mjs"; // SyntaxError: // The requested module './string-utils.mjs' does not provide an export named 'chant' Import multiple named modules # We can import as many named exports as we like! Let's implement and export a chant function: // file: string-utils.mjs export function hype(message) { return `${message.toUpperCase()}!!!`; } export function chant(message) { return [...Array(3)].map(() => message).join("! "); } import { hype, chant } from "./string-utils.mjs"; console.log(chant("M")); // => Modules! Modules! Modules! My take # Named exports are the module feature I use most. The major downside of named exports is naming collisions with other modules. Go pro # This is part of a course I'm creating on modules at Join

Import Modules for Side Effects

Modules — in JavaScript — can be imported strictly for their side effects. import "./string-utils.mjs"; Notice. On the module side, simply write code with effects. // file: ./string-utils.mjs"string-utils loaded."); Conditional side effects with dynamic imports # We can load modules with side effects conditionally, with an immediately invoked async function. (async () => { if (true /* maybe some environment var */) { await import("/modules/my-module.js"); } })(); Here, you can imagine checking an environment variable before importing side effects. Don't mix side effects and exports # Modules can contain a mix of exports and effects. Here's why I recommend avoiding the mix: import hype from "./string-utils.mjs"; // loads both exports AND side effects console.log(hype("moduuuuuules")); // => string-utils loaded. // => MODUUUUUULES!!! Module effects always run at import. In a mixed module, you can import only the effects but you can not import only the exports. Side effect imports in the wild… # I see this style of import used with Webpack to import stylesheets. In this case, Webpack is packaging up CSS as JavaScript and appending it to the browser's CSSOM. Go pro # This is part of a course I'm build on modules at Join for videos

React Server Components Announcement Notes

Three weeks after the announcement of React Server Components, I finally sat down with friends to watch the event. These notes are just a few ideas and links I'd like to hold onto for my next pass thru the demo app. Announcement # Announcement Post server-components-demo Discussion # Real-time discussion in Discord with the React Podcast community. New packages # Name Use Source Package react-fetch fetch wrapper GitHub npm react-fs Postgres wrapper GitHub npm react-pg Node.js fs wrapper GitHub npm Demo App Notes # Matt Sutkowski lead our Discord discussion group thru the demo. in this gist. Complications # When exploring this demo, remember that it has two goals: Introduce folks to an experimental feature Illuminate areas where framework builders (Next.js, Remix, etc…) can start integrating I'm in that first group of people. Interesting Things to Try section of the README. If you go too far off course, you'll notice quickly that there is no Router. Setup # Because this is a full stack app, you'll need to setup a full stack environment. Setup and DB Setup sections of the README. I'll re-iterate a comple points with some added practical details. Node # You need node >= 14.9.0. If you need to manage different versions of Node.js, consider nvm. node requirements. With nvm, run nvm install 14 in the project root and you're good to go. Docker (optional) # UPDATE: Docker is optional. It's available for folks who prefer to run Postgres in a cointainer. The README has been updated to make this even clearer. If you prefer not to install Postgres globally, you can use docker-compose to run the server-components-demo. platform-specific instructions here. On a mac, the quickest path to a demo is installing the Docker Desktop Mac App — which includes docker-compose. Postgres Setup (only necessary if you didn't use Docker) # (if you don't want to endure this step, Rodrigo Pombo has a DB-less fork of server-components-demo) DB Setup instructions are here. Platform-specefic installation instructions here. Personally, I manage a Postgres installation with Homebrew. (with brew command available) brew install postgresql brew services start postgres to start the Postgres daemon brew services stop postgres to stop the Postgres daemon With Postgres setup, follow the remaining istructions to setup and seed a database for you demo app. Location oddities # Something to keep in mind is that navigate and location have nothing to do with url. The user's "location" in the app is held in state and communicated as a query parameter to server-side requests — to provide the correct data. This clearly a void that would be filled by a meta-framework and the implementation in the DEMO is a mimimum-required effort to prove the concept. .server.js components. Deployable demos # verces/react-server-components netlify/server-components-demo prisma/server-component-demo Other references # React Server Components by Addi Osmani First impressions # All things considered, this is an enjoyable experiment. Interesting Things to Try section, there's a lot to be learned. I'm grateful to the React Team for openly sharing these experiments with a workable public demo.

An off-camera mic for non-nerds

My friend Dan asked me for a mic recommendation. I interpret this as a desire to eliminate anything cold and impersonal from the call — important for tele-coaching. So, we're looking for an off-camera mic. Off-camera mics are a bundle of trade-offs. For the best possible sound, you want to be within 9 inches of your microphone. Every inch adds more background noise and echo — reducing presence. I have plenty of $$$ solutions that could work. But, it sounds like this person doesn't want to fall into the pit of A/V nerdery. They just want cozier conversations. Fair enough. Recommendation # For everything above, I like the Rode VideoMic NTG. I like it for a bunch of reasons: No-fuss, integrate USB-C interface Headphone out (when used as an interface) Good sound isolation (for an inexpensive distance, condenser mic) Hardware gain nob Included shock mount 3.5mm audio out for use with a DSLR/mirrorless camera Other stuff you'll need # You'll need a stand and a cold shoe adapter for this mic. I like the SmallRig Multi-Functional Cold Shoe Mount with Safety Release. It'll work with any 1/4"-20 (or adapted) stand. As a desk stand, I like the Oben TT-100 Table Top Tripod. Make it sound great # Get the mic as close as possible # Off-camera doesn't mean far away. Eliminate unwanted noise # Turn off anything that makes noise. Cover hard surfaces with soft ones # Couches, carpets, rugs, books, and wall art help absorb sound in an unobtrusive way. Go forth! # This non-nerd, off-camera mic will serve you well. Disclosure: if you purchase anything from Amazon, I make a small commission.


Release. At the end of my journals, I write my discovery as an imperative. That's the bit above. But here's the unadulterated journal entry for context. Entry: Clarity # With pride, we keep every failure in. My musical education took place washing dishes at a coffee shop. On occasion, I'd close with a young indie gal — who's name I've since forgotten. She was maybe 19 and I remember getting lost in watching her quietly and cooly tolerate the world. Her one delight was locking the door, playing an under-celebrated album, and enjoying it with whoever happened to be around. Many nights, that was me. I crushed on her in that impossible way that one might crush on a best-friend's older sibling. Her musical taste informs mine to this day. And with pride, we hold every failure in I went to bed on new year's eve with this lyric shaking the corners of my brain. I want 2021 to be about clarity, focus, and freedom from clutter of years past. In rushed this song from the start of my adult journey. Progress hides behind failure. And with pride, we hold onto the sinking The older I become, the more I retain. I was free when I heard this song. If you can't take it with you, what is worth keeping? What should I remove now? What around me represents only the shadow me — the one that didn't survive? Do I hold onto hopes of those shadow? What aspirations have I placed in new things that will become new, faithless artifacts? It's time to let go and let go of the sinking. * It was actually Keith that introduced me to Clarity. But that's a less sexy story. The nameless introduced me to The Anniversary — my favorite band, with the greatest sound of all time.

Gammy's 85th

For her 85th birthday, I interview my grandma — Carol "Gammy" Claypool. My aunts threw a great party and asked if I'd provide the night's entertainment — an interview with the matriarch of our family tree. I'm glad they did. I've loved conversation my entire life. Talkboy in Home Alone 2 I've been obsessed with what comes out of people when the little red light is on. Below are 80 minutes of history, memories, and wisdom from Gammy on her 85th birthday. link to the audio instead. Dowload audio here. Transcript # Michael: All right. We're ready? Gammy: We're ready. Michael: I am so ready. [laughs] This is going to be fun. We have a bunch of premade questions from people, but I'm just going to ask you some questions, just the two of us. Just you and me. Forget these jokers. Gammy: They're not there. Michael: Yeah, they are not there. As I was talking with a bunch of people, today, a theme that came up a lot was just your creativity. Just this mad scientist well of creativity that's inside of you. I'm curious, what was the first time you felt that overtake you? What's the thing that you remember being the first thing that you're obsessed with and wanted to figure out? Gammy: I can tell you that in my young years at school I was fully aware, suddenly, that I had math roaming around in my head. Didn't need books, everything just [makes sound] . [laughs] It was very strange, and I enjoyed it. I tutored lots of kids and used that whatever way I could. Michael: How did that manifest as you started to do more and more creative endeavors? You have the math going on in your head, but that manifests itself into more like creative expression. The one that I'm most familiar with is the puppets. All that stuff came out, but this isn't the only thing. You've had so many interests. What are some of the ones that sparked the most in you? Gammy: When I was about 11, I gathered a bunch of girls together that were about that age, and I had them writing books. Then, I'd have them acting them out. [laughter] Gammy: I started a bunch of groups. I can't even recall what the other ones were. That was the main one I can remember having done that. Michael: Was it always something community? That's how I remember experiencing a lot of the puppets and whatnot. It was a group activity. Was it always a group-based thing? Gammy: Yes. Michael: Why so? What is it that entices you to the group dynamic? Gammy: When I was 11, I went to a girls' school. There were a bunch of us at my age that lived upstairs on one flat place up there, and then kids all over. They talked about stuff. I could see that they were interested. Although I was the youngest one, but I could see what they were interested in, so I just encouraged them to keep writing. Then, we'd act them out and have a good time. Michael: I love that. Were there some people that were resistant? Gammy: Oh, nobody was overly encouraged if they didn't want to do that. [laughter] Gammy: The thing is the majority of the group did because they thought that seemed like a fun thing to do. Michael: I'm curious. This is something that I'm super fascinated by in you and in other people that I know is this ability to draw things out of people. You'd mentioned not having to encourage people too much to get involved and to be excited. For a lot of people, it can be really difficult to bring them in and get them on board and whatnot. Is this just a super natural talent that you have, or do you have kind of a process, where it means of bringing people into this world? [laughter] Gammy: I don't know how in the world I would answer that because I have no...I mean, I was 11, 12, 13. I only reached out to them because they seemed like they were interested in stuff, and I was interested in stuff, so I encouraged them. [laughter] Gammy: What did you guys do? [laughter] Michael: I love that. I love it. Did you always think that you would have a big family? Talking about clans and groups and doing everything like that, did you always think that you'd have a big crew? Gammy: I don't know is I could answer. Then, my family was...There were seven of us, so I was used to being in a group. Audience Member: They wanted 12 children. Gammy: Shush! [laughter] Gammy: My goodness. What are you saying? Michael: We don't talk about the failures here. [laughter] Gammy: The odd thing was, when I married my marine, he came back from war. I got on a Greyhound bus and came out to California from Ohio. Every girl walking around there was pregnant. [laughter] Gammy: Not me. It took me three years before I had that, the first one. [laughter] Gammy: It was shocking. Every girl in the area had a baby, and I didn't. Then another three years, there was Sherrie. Another three years, there was Colleen and then Cindy. [laughs] Michael: You had to warm up the machine. [laughter] Michael: It took a while to get going, but it was very productive after that. [laughter] Gammy: No, that was still always three years apart... Michael: [laughs] Gammy: ...but not quite that much on the last couple. Michael: Tell me about your marine, as you put it. How did you meet, and then what was it that made you realize that he was the one? Gammy: That's an interesting question. [laughter] Gammy: I had gotten older. I was 14, so my schooling was indifferent. My best friend and I had a bedroom downstairs, and I'd heard of the scoundrel. Michael: [laughs] Gammy: I was warned about the scoundrel. Twice, he did put leaves under the window and set them on fire. Michael: In front of your window? Audience Member: To get your attention. Gammy: Yeah, to have my attention. Michael: Oh, wow. That's a move. [laughter] Audience Member: That's a move. Gammy: Didn't do him any good with me. Michael: [laughs] I can't imagine so. That's arson. [laughter] Gammy: I had nothing to do with him. Then my girlfriend lived up above [inaudible 7:40] . He came in there, and that was kind of a different story. He came in there. My girlfriend knew him. I didn't have anything to do with him. Michael: [laughs] Gammy: Then he joined the Marine Corps, and when he came back in his blues, that was it. [laughter] Michael: It was the looks then. That's what... Gammy: Not really. [laughter] Gammy: It was something about him. He had... Michael: Changed. Gammy: ...grown up. He was somebody to make your head turn. [laughter] Gammy: This is true. Michael: Interesting. He seemed pretty determined to get your attention though. Setting two fires in front of your house is a thing. He had his eye on you... Gammy: Apparently. Michael: ...for a while. Gammy: Maybe, partly, it was because I wouldn't pay him any attention. [laughter] Gammy: I would say that's where that came to. "All these other girls I'm dating here, so I don't know." Michael: He had his eye on the prize, it sounds like. [laughs] Audience Member: He did. Michael: He comes back. He's looking sharp in his blues. How did things progress after that? Gammy: Then he had to, of course, go back to the base, but he hung around for a while. We got more acquainted and started writing letters. Can't remember the name of the cruise that Marines go on back then. Audience: The Med cruise. Michael: Med cruise. Got it. Gammy: I got letters and a proposal. Michael: How was he as a writer? Gammy: Probably pretty average. Michael: Pretty average? [laughter] Audience Member: He was very mushy. Gammy: Very mushy. You're right. Michael: That's awesome. Gammy: He was romantic. He was romantic all the way through this thing. Michael: Interesting. Good at setting fires. Good at looking good. Average at writing. [laughter] Gammy: No. As he's proposing and stuff, he's doing a very good job. [laughter] Michael: I know you mentioned that you'd been waiting for a while to get pregnant and have a child. What did that waiting feel like? Did it make you more excited for the moment that you would start your family or were you getting worried? Gammy: I was getting worried. It seemed very odd to be two years and something, and then baby takes one, two, three years. [laughter] Michael: They take some time. They don't come out right away. [laughter] Gammy: They don't. Michael: Yeah. God did a number on that one. Gammy: Yeah. Michael: [laughs] Gammy: Everyone around us was having one kid after another. Michael: [laughs] What was it like having your first, starting that family? Gammy: It was just amazing. Michael: Yeah? Gammy: Really, yeah. I can't think anything better. Audience: Aww. Gammy: Hey baby girl. [laughs] Michael: [laughs] Then you had a perfect one right from the start obviously. [laughter] Gammy: This is true because I raised her. [laughter] Michael: What were those first few years like as you started your own little brood, your little family? Gammy: It was very fun. We won't even go into that. When we went down to North Carolina and lived on the base there, it was weird because it had so many rows of houses where there's, I don't know, maybe six in one. There were two individual houses in the center of the playground, that area. Michael: Oh, nice. Gammy: That was really nice. [laughter] Gammy: Anyhow, it was a really good spot for Kathy to pull her wagon, her dolls, and all that good stuff. Michael: What was your favorite thing about being a mom then and has it changed? You've had many years now of being a mom. What was your favorite thing then? Is it the same now or has it changed? Gammy: I really liked being a mom and I think I did a pretty good job. Those are good kids. Michael: [laughs] [applause] Audience Member: [inaudible 13:12] . [laughter] Audience Member: We think very highly of ourselves as well. [laughter] Gammy: Good. Michael: No self-esteem issues. Gammy: Then there's the grandkids and then there's the great-grandkids. It's all wonderful. Michael: Pretend nobody else is here. [laughter] Michael: Are you more delighted about being a mom, a grandma, or a great-grandma? Gammy: That's hard. Michael: It's all right. You can be honest. Gammy: No, I am all those. [laughter] Gammy: Seriously, that's what I am, all those. Michael: Which brings you the most delight though? [laughter] Michael: When you think about it and you're like... Audience Member: Remember who you're talking to. [laughter] Audience Member: We already know the truth. Don't worry. We know we're not it. [laughter] Gammy: You were when you were little. [laughter] Michael: Whatever the generation is, it's the newest? That's your favorite? That's where your heart's at? Gammy: I don't know. I can't say that. [laughter] Gammy: I really can't say that. I love this whole family. Audience: Aww. Gammy: I got more than anybody should deserve. Michael: Which of your grandchildren is not living up to their potential the most? [laughter] Michael: I'm just kidding. Audience Member: Say what? Gammy: Oh, it's got to be... [laughter] Michael: Oh, now she's ready to answer that one. [laughter] Gammy: Because I'm not sure yet, Milo. [laughter] Gammy: He's like three months old but he's adorable. Michael: Get tons of tickles every month. [laughs] Gammy: Oh, is he cute? Oh, my goodness. He's pretty perfect. Michael: You have so many grandkids now and great-grandkids and whatnot. Were you just over the moon when you found out you were going to be a grandma? Gammy: Oh, my gosh, yes. Michael: [laughs] Gammy: Oh, yeah. Every time. Melody just had another baby. Yeah, every time. Michael: You're just doing your happy dance every announcement. Gammy: Yes, I am. I am, indeed. [laughter] Gammy: They're all adorable. Perfect. I thought you should know that [inaudible 15:46] . Michael: Oh, thank you. [laughter] Gammy: Just in case. Michael: I appreciate you bringing me into the confidence fold that we've... [laughter] Gammy: What I do appreciate about you... Michael: Oh, thank you. I'm ready. Gammy: that you're married. [laughter] Gammy: I've got a lot of boys out there and they aren't. Audience: Ooh! Gammy: Here's a concern for me. Michael: Yeah, I was thinking for a second that it was going to be about me. The fact that it's about Nelly, I'm good with that. [laughter] Gammy: Congratulations, buddy. I'm excited about that too. Audience Member: [inaudible 16:37] . Michael: Yes. Gammy: Yes. Michael: There is some questions in here about some of your houses. I have only ever been aware of the Grapevine House. All of my memories are there. Tell me about some of the other places that you've lived. Obviously, you've had to move around quite a bit. Do you have a memory of your favorite place? Audience Member: That'll be Marvin Street. Gammy: Yes. Actually, the first house we ever bought was on Marvin Street in Oceanside. We really enjoyed it but we had to leave a lot behind. When we came back to this adorable little house, how many kids did we have then? Audience Member: Five. Gammy: We had one bathroom. Audience Member: Five girls. Gammy: I had a high schooler that had to get in the morning first. Then the junior higher that had to get in and out. Michael: [laughs] Gammy: Then a husband after that to get in and out. Then the little guys had to go to school. We thought it was probably time, as much as we loved that house, to get something a little bit bigger with two bathrooms. [laughter] Gammy: Huh? Michael: Two bathrooms is big. Not that this is about me, but I remember we did the one bathroom thing for a while. I don't remember, it was around Valentine's Day or our anniversary or something. We went out to dinner and we got food poisoning and we were both sick at the same time in one bathroom. That was it. I had papers on a loan drafted up that week. [laughter] Michael: It was too much marriage. [laughter] Gammy: Too much throwing up. Michael: Marvis, that was your favorite house before you had to grow out of it into a larger place. Gammy: Yep. Michael: Was it Grapevine right after that? Gammy: Yeah. We were shown a lot of houses, but Guff drove the church bus and he had gone past that...They were setting out the post. We went and saw them and we bought it. [laughs] As quick as that. Michael: How much was it? Gammy: I think it was 28. Audience Member: Less than a car. 28... Michael: 28 thousand? Unbelievable. Audience Member: How much was your first house? Michael: How much was your first house? Gammy: Marvin Street. It was such a little house. $12,000, that's what it was. Audience Member: Can I interject something about that Marvin Street house? Michael: Yes. Audience Member: We met Dawn at that Marvin Street house. [crosstalk] Gammy: Yes. Michael: Oh, OK. This is why you were so excited about the Marvin Street house. [crosstalk] Audience Member: She lived three doors down. Gammy: She was like part of our family. She and her brother. Then, when we moved on Marvin, they'd come over and hang out. Michael: Nice. What was it that enraptured you about this house as it was going on sale? You said that you saw a lot of houses, but this one you just snapped up. What was it? Audience Member: The Grapevine house. Michael: The Grapevine house, yes. Gammy: I don't know, I just really like the house. It was half-acre. That's nice. Can do with that. It was just quiet and it was right down the school, down the street. There weren't very many houses back then, and you could look out my side window towards Oceanside, and the only thing you could see is orange groves, no houses. Michael: Really? Gammy: Yep. Michael: That's wild, because there's tons of houses there now. Gammy: [laughs] Then it dipped down, remember? Michael: Yeah. I mean, I don't remember, but believe the vision. Gammy: It dipped down there on our side. There was no houses on that side. Then it was when you had your baby I came back. They had built it all up, so the houses are way above... [crosstalk] Michael: That was the prosperity coming to meet me, and greet me. [laughter] Michael: Paving a path. It was surely disappointed, but it was coming for me. Gammy: No, I still have my house and my piece of property. Michael: That's wild. Audience Member: That's a lot of ATVs. Gammy: Oh, Cliff was always on that thing trying to kill himself. [laughter] Gammy: I'm sure. Audience Member: And me? Gammy: And you. [laughter] Michael: I'm curious at the time, my memory of this is...Look, all that I remember is your house, neighborhood, there's the Quonset hut and the pool, and all that kind of stuff. Did you build all of that? Gammy: The Quonset hut was there for workers. The guy had owned more property down below originally, and he raised beams and stuff so his workers were in the Quonset hut. Michael: Got you. Gammy: That was there, yeah. Michael: Interesting. Gammy: Then the pool we put in. Cliff said, "Do you want a volleyball court or a pool?" [laughs] We put the pool in. Michael: [laughs] Gammy: We got too much money out of that other house that we had enough money to put a really nice pool out back there. Michael: Oh nice. That's so wild. First house was $12,000. Do you remember what you turned it for? Gammy: Huh? Michael: Do you remember what you sold it for? Gammy: 57? Michael: Wait, 57? Gammy: Something. It was a lot. Michael: You bought it for 12. You bought the next place for 28 and you sold the first one for 57? Gammy: I was shocked that we got that. [laughter] Michael: Dang. Nice work. Gammy: My husband... [laughter] Michael: It was the math in your head. That's good. Gammy: [laughs] My husband was a smart guy. [laughter] Gammy: Was he working at Credit Union then? Audience Member: Not yet. Gammy: Anyhow... Audience Member: He would have came back when you bought that house. [crosstalk] Audience Member: I had turned 16 when you bought it and he was already out of [inaudible 23:57] . Gammy: He was vice president at Navy Fit. No not Navy Fit. I'm in love with Navy Fit. Michael: He was with the Marine Corps. [laughs] Gammy: He worked his way up at that. Michael: Now we'll have a lot of memories about that house. Sorry, rewinding a bit. One of the things that was asked a bunch and I lost my place which is really discouraging because it was such a top notch tie in that I would've been proud of myself but I'm OK with not being proud of myself. Gammy: You'll be proud now. [laughter] Michael: One of the questions that we had was when this...I remember what it was. You have a lot of things that you studied and I was curious. I know you have a number of degrees and things. What was your favorite thing to have studied? Gammy: I don't know if I'd say that I have a degree. Audience Member: Certificates. Michael: Yeah, certificates. Sorry. Gammy: I was offered to go to college for free [inaudible 25:14] married that marine and have kids. [laughter] Gammy: Anyhow, I don't know. I don't remember how to answer that question. Audience Member: Can we hear what you just said, because this is cool. She chose to get married but she had been offered a scholarship to study science and pretty much school for college but you said, "No, I'm good." Michael: Interesting. Tell me a little bit about that decision. What was the scholarship for? Gammy: Science. Michael: Science. Broad science? Gammy: I guess because the family had this...My grandfather, all his daughters way back then all went to college. Which is unusual but he had enough money to do it too. Anyhow, I said, "No thank you." Michael: Why so? Gammy: Because I was going to go meet my husband or I got married here. When he came back but no, I had already decided what I was doing with my life. It was a good one. A good choice Michael: Absolutely. I agree wholeheartedly. Gammy: You wouldn't be here. [laughter] Michael: I know. Just poof. That whole thing kind of goes. There's some tangential universe where you're doing science and I'm not around. [laughter] Gammy: This is true. [laughter] Michael: I know that you did study a lot of things at MiraCosta and I know... [crosstalk] Gammy: I liked MiraCosta. I took a lot of those classes after papa had passed away. I like taking classes over there. Michael: What were some of your favorite things to have studied over there? Gammy: The brilliant one that you love. Michael: Hit me. Gammy: I was taking many other classes. Her mother came with me and we took a drama class, and then after that drama class was over the drama teacher had a puppeteer come in to teach us how to make puppets. Michael: Yes. [laughter] Gammy: There we were. It was all good there and the other part that I liked was writing the scripts and stuff. Not that I ever knew I could write but I did. Michael: That brings an obsession into your life from that point forward. [laughter] Gammy: A little. They had to fall in. [laughter] Gammy: It's like they were good puppeteers all along. Michael: This is the coercion thing that I was fascinated in a little bit earlier, but we'll cover that. Gammy: They didn't have any choice. [laughter] Michael: If you made them, then they had to. Gammy: If I was in there with the puppet stage, and there were kids, I think they loved it, they were very good at it there was not a one that couldn't do that and they take on the personnel of the puppet. Audience Member: There was one. One [inaudible 28:43] . She was at college. Michael: She was at college. It's what I heard. Gammy: Oh, that college kid. She invited us to come up and do puppets. Michael: If you hadn't gone to college, maybe there would be another better me. [laughter] Michael: As we've learned, it's very important there should've been more me, I think. [laughter] Gammy: Or maybe, if you'd have come over, you did do puppets all good. Michael: I got in on that. Gammy: I know you were there. Michael: I was coerced. I was coerced into the puppetry. What was it that enraptured you about the puppet, when you took the class, because when someone comes in and shows you how to this thing, but it doesn't wash over you. You're just like, "What?" Gammy: No, that was it. I was all for that. Michael: Yes, your calling. Gammy: Yeah, because it had have had everything in it, you'd write scripts. I really liked to sew on stuff, so making puppets was a blast. Then the kids liked the puppets, and then, we made the walking puppets. Michael: I was talking with Jessica about those earlier. [laughter] Michael: She soiled herself, with one those coming out of closet on her. [laughter] Gammy: Little frightening. [laughter] Gammy: Almost human, but not quite. Michael: There is a lot there. I guess that's what I'm interested in, is you have puppets and it seems to pull in a bunch of your interests, the ability to write a narrative and a story, and to work collaboratively with a lot of people and all of these things. I know what I'm like, when I get obsessed with something...What did your space look like as you start going deep into puppeteering? Gammy: It looked like a cyclone when we were making puppets. [laughter] Gammy: Fortunately, puppet was all courage and he did the sound and stuff because he did like those things. Everybody seemed to be interested and it was all fun. Audience Member: How did you convince Dad to be so obsessed, how did this whole thing go down? Gammy: OK, now think about the fact that if I was doing something, would your dad support me in every way he possibly could. Audience Member: And you guys had taken a speech... [crosstalk] Gammy: He was good with... Audience Member: You guys had taken a speech class together right, you and dad? You got the book for standard... Michael: ...for writing, because I remember, you at the time you were doing a lot of work with church and churches in the neighborhood and you were working with youth groups and just sharing stories through this script writing process and whatnot. Can you tell me how you got in to that and what that looked like during this time? Gammy: It seemed an awful lot of fun and it's with the wonders, they would invite me to come down with my troop, which I thought was a lot of fun I don't know if they were annoyed or not, but it was fun. Anyhow, so much went into that and we worked with the youth group. That's funny, I've got to go back to that. Michael: Yeah, please. Gammy: The first puppets...Kids had some puppets. We had junior high and I decided that, instead of doing little skits I decided I'd have them do puppets. It was a fun. [laughter] Gammy: It was just kids' puppets. There always had to be some skit coming. They did with the puppets, instead of just staying behind the stage. Anyhow, that was another funny thing to have done but we did that too. Michael: One thing that I can't remember, who was it I was talking with, they mentioned this -- I think it was with my mom -- we talked about how when we were in Brazil and we are working with the kids down there and the puppets, that was the first time that I remember seeing people really catch on to your excitement for this. Gammy: People in Brazil were fantastic. Michael: Oh, my gosh they were nuts about it. Yeah, absolutely. Gammy: I guess there was one group that was way out. You probably know more about that now but I remember that they were so excited about this and they got their puppets and they were out in the fireplaces with those and they continued doing that. Michael: Like you were saying, they were amazing. What do you get excited to see when you take something like puppeteering to kids? Gammy: I can tell you my best thing I've done recently. Michael: Yes. Gammy: I had all my grandchildren come over and they all made puppets. [laughter] Gammy: That was the coolest thing to have them...Your kids too. Michael: Yeah. Gammy: Have all those kids over there and they were just excited about puppets. Michael: There's the puppet but is there something really excites you about what it means for people. Is it because certain people are able to get into it in a way that they weren't able to, maybe, express themselves before, is it the creativity in the design of the puppet, that you get excited about? What's the spark that you like seeing when you share puppet creation with people? Gammy: I've got a lot of schools and taught the kids to do puppets. I really enjoyed that, because it's something they've never had any association with. They did go home with their puppets, and that's all good. I like doing that for a while but... Michael: [laughs] I remember thinking how funny it was. Especially in Brazil, how funny it was...There was some people who wanted to get themselves into the puppet, and there were some people who just went the opposite direction. It was like they have the alter ego that was waiting in them to come out as manifested by this puppet. [laughter] Gammy: That's funny. Michael: Do you have a favorite alter ego in the puppets that you've created? [laughter] Audience Member: Oh, my gosh, yes. I think we know, so we'll say, "One, two, three, Herc." Gammy: Herc. Michael: Herc? [laughs] Tell me about Herc. Audience Member: [inaudible 36:33] . [laughter] Audience Member: Is that a Lion? Gammy: Huh? Audience Member: A lion? Gammy: A lion. Michael: Because you got...I don't...OK. Describe Herc to me physically. Then we'll talk about his characteristics. Gammy: Thank you, think I'm waiting. I think it was very big, really big. Big mouth. Looked like a lion. [laughter] Audience Member: I think you took both of your hands to work it. [inaudible 37:09] It was a stuffed animal that you [inaudible 37:12] . Audience Member: It was. Gammy: I did. Michael: It's a stuff. OK. Audience Member: I won it. It's not very fun for them. Gammy: That's right. You are so right. Michael: Maybe you should come up and I should ask you how you feel about Herc. [laughter] Michael: You and the stuff on Colin's. Gammy: I forgot about that. [laughter] Gammy: I could not [inaudible 37:40] . Michael: Tell me. Colleen: I won this giant lion at Knott's Berry Farm. Our house is small. There is not room for a lion. This is big, it's big as a human. It took a little bit, but she kept sneaking out of my room a little bit at a time. Michael: One Piece of stuffing. [laughter] Colleen: Exactly. Why this is stink? Am so stink and skinny. Then all of a sudden, she's by the puppet stage, and she's got her hand in it, and she is telling the dumbest one-liners. She can't even remember even... [off-mic comments] [laughter] Gammy: "I'm just a lion lying around." [laughter] Gammy: How can you be mad at a mom for stealing your stuffed animal, unstuffing it, and then giving it that voice? Colleen:: Oh, yes, "I'm not lying." [laughter] Gammy: "And I'm not lying." Michael: Amazing. [laughter] Gammy: There you go. Colleen: I'm brilliant, and to know that that sound intelligent... Michael: [laughs] Colleen: When I'm 85, you can interview me, and I'll have a bigger story. Michael: Bigger story about... [background conversations] [laughter] Michael: What was it about Herc that you liked voicing so much? Was it that you had an opportunity to tell silly jokes, and be goofy and totally looney? Gammy: Exactly. It was just goofy. Should've named it Goofy. [laughter] Gammy: I liked the lion. It was a funny lion, made me laugh. It did get all the jokes. [laughter] Michael: I like this idea that you're puppeteering a lion, but it sounds almost like it's possessing you. [laughter] Gammy: Then I wouldn't have to write out the jokes. [laughter] Michael: They wrote themselves? Gammy: No, I said I had to write out the jokes. [laughs] Michael: Oh, you did? Gammy: You can't give that lion credit. [laughter] Michael: Do you have a joke or a puppet that you were most possessive about, like, "Nobody can touch this one. That one's mine"? Gammy: I can't imagine. Michael: No? Gammy: No. Audience Member: Can't imagine that. Audience Member: I never used Herc. Did anybody else? [background conversations] Audience Member: That's true. None of us ever... [crosstalk] Gammy: Maybe you were embarrassed. [laughter] Michael: You were worried about what would happen if you used Herc, the jokes that would come out. It sounds like a very terrifying experience. Gammy: Maybe your quote's my favorite. I don't remember. Michael: [laughs] Gammy: Seriously, I don't remember, but I might've... Michael: Herc was your... Gammy: ...It was unique enough. Michael: I love that. [laughs] I love the simpatico of you and Herc. Gammy: [laughs] Michael: You were the author, of course. They have your name on it, but you co-writing these amazing dad jokes together... [laughter] Gammy: Was with Herc. Michael: With Herc, yeah. [laughter] Gammy: We were working on it together. Michael: All right. Gammy: We're all serious here now. Michael: [laughs] We got to rein it back in. This was a professional thing we were doing, and I don't want to... Audience Member: Can you have her tell us about her coding experience? Michael: Oh, yeah. Mom would like to know about your coding experience. That was one of the things that you studied at MiraCosta, I understand. Gammy: Yes. It was interesting. There was one seriously big building that was the guts of the thing. You had to work in another building to do your typing in, and you'd send it over to the building. It was bizarre. [laughter] Michael: The computer building? Gammy: Yeah. That's where they poke the...I don't know what you call it now, poke the holes. Anyhow, it was weird. Michael: I remember so much of my interest in the actual use of computers was guided by you and your fascination with computers. I remember ruining our first computer... Gammy: [laughs] Michael: ...and you coming and trying to fix it. My dad didn't know anything about computers, and you were trying to help us out and fix that. All the games that you would have, and you'd have printer, like the dot matrix. You're always printing out "Happy birthday" banners for people. [laughter] Gammy: I was a nerd. What are you going to do? Michael: I love it. Those are very formative memories for me about the joy of computer science, the creativity that came from being able to make this tool do something that you felt expressed you. Gammy: I like being able to do that. I didn't have to try to write it out. You could get on the computer. [laughter] Gammy: I can do that. Michael: I want to make sure that we get to some of these questions. I'm going to shift gears a little bit. These are in no particular order, but we're going to knock them out as best we can. Your son, Cliff, asks what your earliest memory is. Gammy: My earliest [laughs] memory... Audience: [inaudible 43:26] chicken coop... Gammy: Pardon? Audience: ...being run over by bikes, being run over by car... Gammy: Being run over by bikes, being run over by cars but younger than... Audience Member: Electrocuting yourself? Gammy: Huh? Audience Member: Peeing on something and electrocuting yourself? Gammy: All those things. Michael: Wait, hold up. [laughter] Michael: You electrocuted yourself by peeing on something? Audience: Barbed wire. Michael: Barbed wire. Audience: Not barbed wire, electric wire. Michael: Electric wire. Gammy: It would have had to been a bad cord. Michael: Wait. How does this happen? [laughter] Gammy: I don't know. I was a baby running around in my diaper. Michael: You were a baby. [laughter] Michael: This wasn't like, "I wonder what would happen if I peed on electrical wire?" Gammy: No. I'm sorry. I was very not that. Audience Member: Do you remember that, or is that something you were told? Gammy: Remember, it's a story that I know. It's probably always been in there. Audience Member: She and her brothers were known as the spring brats. Michael: [laughs] Gammy: Yes. Michael: The spring brats? Gammy: Oh yeah. Audience Member: They used to ride over her with their bicycles because they dared her to lay on the street. She always would take a dare. Gammy: I'd take the dare. Michael: Always. Gammy: Always. Audience Member: Always. Gammy: Not anymore. Michael: Really? Just in case it didn't get picked up. You always had to take a dare. [laughs] What were some of the most ridiculous dares that you had to say yes to? Gammy: Nothing much more than getting ridden over by bike. [laughs] Michael: Nothing much worse than getting ridden over by a bike. [laughter] Gammy: No, I'm saying, nothing more dramatic than that. Michael: It's funny. l wonder... Gammy: I didn't put up with anything from anybody. Michael: I believe it. Gammy: I was a mean, tough kid. I seriously was. Audience Member: Please tell us more about that. [laughter] Gammy: Thank you. Michael: It's funny because I, up until recently, after maybe putting my health at risk, could not say no to a dare either. [laughter] Michael: I'm curious. If I dared you right now... [laughter] Gammy: Go ahead. Michael: Now your obstinance has shifted gears, like, "I don't have to prove anything to you." [laughter] Gammy: It's true. When I was a kid, I was terrible brat. Michael: [laughs] Gammy: I shouldn't go on with that. Audience Member: No, you shouldn't. Michael: You could. What were...? Gammy: Here's the deal. Michael: There we go. That's it. Gammy: My brother had asthma very bad. Michael: It's a great story. Gammy: The next brother... [laughter] Gammy: Wait. The next brother was a nice kid. Michael: Weak. Gammy: I was the youngest. [laughter] Gammy: If they dared me to do something, I was going to do it. Michael: [laughs] Gammy: We had many a scraps on the way to school, in the snow, whatever. I would take them down. Michael: [laughs] Gammy: It's always boys. I certainly wouldn't deal with a girl. The biggest purpose for that...My littlest brother, we were coming home from the movies and this big kid tried to hit him with a bat. There I was, in the snow, waiting for him to go to school. [laughter] Gammy: He was pretty big, but I beat him pretty bad. Ended up waiting for the principal. He got [inaudible 47:18] and terrible happened to him. Audience Member: Your little brother was actually bigger than you, was older than you? Gammy: No, no, no. This is David, Little David. Anyhow, he didn't do anything. I was a little teeny girl killing this kid. I needed it. [laughs] It was all right. It was cool. That was my reputation. [laughter] Gammy: If they needed to be taken out, because I was a girl, I would take them out. If they needed it. Only if they did something like that, like they did with my brother. Michael: How many people would you estimate you took out? [laughter] Gammy: Innumerable. [laughs] Michael: Innumerable? [laughter] Gammy: A lot. Michael: Wow. That's cool. You're the enforcer. This is a daily thing, then. Gammy: No, not that. Probably once a week, maybe. [laughter] Michael: Once a week. Gammy: Maybe every other week. Only if somebody did something way out of line. [laughter] Audience Member: Once a week. Audience Member: They actually take them out. Michael: Interesting. Gammy: You take them out. Michael: Wow. Gammy: Maybe you all missed this. My father, because it was the years when there was no work, he became a boxer. I wanted to be a boxer. I followed in his steps and learned from him how to do these things. Michael: Street boxing. Gammy: I was good. Michael: What's the worst thing that you ever did to one of these kids? Gammy: I don't think I ever did anything that they didn't deserve. [laughter] Michael: That doesn't answer the question, though. Let me rephrase. What offense deemed the worst punishment? Gammy: Like the kid that hurt my brother? I get down in the snow and pound them out. Michael: [laughs] Audience Member: What was that? You get down in the snow and what? Gammy: Pounded them out. Michael: Pounded them out. Kneaded them like bread. Audience Member: I was asking her the other day what she liked to do when she was a child. She did say she [laughs] liked to fight. I'm pretty sure, every offense -- it didn't matter what the offense was -- it was the same result of... Michael: ...punishable by death. Audience Member: ...take them out. [laughter] Audience Member: It was all... Audience Member: She's a girl. There was no punishment. [laughter] Michael: Like a vigilante, you're like the Dark Knight. Gammy: I had the encouragement of my brothers. Michael: Oh, I'm sure. They were like, "Watch my sister. She's going to take out so many people. It's amazing." [laughter] Gammy: Here's the beauty of this. My brother Tommy was a big buff. He looked like a football player. He had asthma so bad, he couldn't do anything. That was convenient. They have him stand by because they had a second fear. Audience: Oh. Michael: Yeah, which is great because then he doesn't have to risk the asthma and then get beat up the next time. That's awesome. Gammy: He wouldn't have let them hurt me. It was OK. Michael: It sounds real OK. [laughter] Gammy: I had a lot of fun. I was mean. I'm sorry. Michael: It's good. Some things are coming into perspective, though. [laughter] Michael: I'm sitting here. I'm like, "OK. Maybe it comes from that side of the tree." [laughter] Audience Member: It's a funny story. [inaudible 51:37] . One time, Cliff was at the house. He came upon them, and she didn't know he was there. He loves the story because she immediately took this strong stance, like, "I'm going to take you out." [laughter] Gammy: I didn't know who it was. What was he doing in my house anyhow? Audience Member: Probably 20 years ago, so it was a long time ago. Michael: [laughs] Audience Member: She didn't get scared that there was a man in the house. She stepped back, and her hands went up. [laughter] Michael: About to pound you out. Gammy: I don't know if I have the energy anymore. Who's going to support me? [laughter] Michael: I have asthma. I'm just here to watch. Audience Member: Explains why you were so brave taking the bus from Ohio to Sacramento. Audience Member: That's true. Gammy: Pardon me? Audience Member: You took the bus from Ohio to Sacramento. Gammy: Why not? [laughter] [crosstalk] Gammy: I'll tell you, I could have pounded somebody out on that trip. [laughter] Audience Member: Was there someone? Gammy: The bus driver. [laughter] Audience Member: What did he do? Gammy: He was done with his thing new one whatnot, and he wanted me to stay and go to the whatever the heck was going on there. I had to pound him out. [laughter] Michael: Yeah. Better pound him out. That's getting a T shirt. [laughter] Michael: Just wearing those for sure. We're going to make them look like those gaming kids' ones except they just say, "Better pound him out." Audience Member: Or the grey pants. I've to wear them. [laughter] Michael: Good stuff. So many questions, so we're going to carry on. Cliff also asks, "What do you remember of your parents when they worked together?" Gammy: My mother was a hot-headed redhead. My dad [inaudible 54:17] . She would [laughs] take a cover. [laughter] Gammy: Anyhow, she was overprotective of us and under-protective of my dad. [laughter] Michael: Interesting. Gammy: Nobody was supposed to touch us ever. We were perfect. Do you believe? [laughs] Audience Member: ...which leads into the story of kindergarten. Audience Member: Yes. Gammy: I went to kindergarten, and somebody behind me cut my hair. Audience Member: No, pulled your hair. Audience Member: No. Gammy: What was the other one? Audience: Dipped your hair... Gammy: the ink. I knew it was my hair. Audience Member: [laughs] Michael: Someone dipped your hair in ink. Gammy: My mother was appalled, red-headed Irishwoman. Michael: Did she pound that kiddo? [laughter] Gammy: I don't have to go to school. [laughter] Audience Member: You didn't go back to school? What, you didn't go to kindergarten ever again? [laughter] Michael: Nice. Gammy: I didn't need it. [laughs] Michael: You already have the math in your head. It was good. Natalie asks, "What are your favorite places that you've traveled?" Gammy: We were talking about that day. I loved up in New Hampshire. Audience Member: New England. Gammy: Huh? Audience Member: The New England area. Gammy: The New England area, that whole area. I don't know whether it was one or two different trips that were so nice. I don't know. Anyhow... Audience Member: They were both nice. Gammy: It was lovely. Beautiful. Michael: We've answered this one, but Anaya asks, which I feel like this is a good corollary, what you were like as a kid. [laughter] Gammy: Don't answer that. [laughter] Gammy: Do not answer that to her. Michael: I'll send the last section to her. [laughter] [background conversations] Gammy: That's what I was thinking, that that little girl can take anybody out. Michael: [laughs] Hartley asks when you first drove a car, and what that car was. Gammy: It was annoying. Michael: [laughs] Gammy: I don't know. I might've had three kids by then, but... Audience Member: I was with you [inaudible 56:44] . [laughs] Gammy: Which one? Audience Member: When you had to get somebody from school and you didn't know how to drive a stick, that's all there was. I remember getting in the car with you... [crosstalk] Gammy: Silly little girl. [laughter] Audience Member: What, I was probably nine? [laughter] Gammy: Possibly, but that was probably the right story. Michael: [laughs] Gammy: I shouldn't be driving. Michael: [laughs] Mom asks, "You've made a lot of meals in your time as a mother. What was your favorite thing to make?" Gammy: That is so hard to think of. So many things. I don't know if I can think of one particular thing. We were talking about that flank steak with the stuffing in it in the pan, and then I'd take the bell... Audience Member: Round steak and red gravy. You called it round steak and red gravy. Gammy: Then, we'd have bell peppers -- unfortunately, they only had yellow back then, or the green -- and stuffed those with the rice. Michael: Interesting. Gammy: I can't remember what else. Anyhow, that was good. Michael: Round steak and red gravy, you said? That sounds good. Gammy: That was all in the pan, and then that stuff was pretty good. Michael: I love that. Gammy: I love it more now that you got the other color of bell pepper. Michael: [laughs] The other color peppers? Gammy: I love the bell peppers. Michael: It's not going to be round steak and orange gravy. Gammy: I only eat the rice out, because I didn't like the peppers. [laughter] Michael: Mom continues you and Dad were super young and didn't have much when you started out. You told me stories about you eating ketchup for dinner and washing your hair with dish soap or something like that. You two love birds were survivors. What were some creative ways you stretch a dollar? Gammy: I don't know we were talking about that. Fortunately, we lived on Camp Hamilton and they had a truck that came by that would credit you. Of course we were careful about that runover or you would have to be paying it off with your income. We were very thrifty with that. Pop, could've gone to the basement and eaten it anytime. I mean that was his privilege. If we didn't have stuff at home he would not let me sit there I would have just ketchup. [laughter] Gammy: It didn't happen that often, we were careful, but it would happen. Michael: What do you think was the most important aspect of your relationship together that made it all work? Gammy: I put him first he put me first simple as that. Michael: Love it. A hundred percent both ways? Gammy: Yep. Michael: That's good, that's good stuff. Mom asked, she says you and dad were always a good team. What were your favorite projects that you guys worked on together? Gammy: The kids. [laughter] Michael: Oh wait no, she actually continues, "Besides raising your awesome kids of course." Gammy: OK. Read the whole thing again. Michael: OK, you and Dad were always a great team. What was your favorite project you worked on together besides raising your awesome kids of course? Gammy: Oh, I see that's different [inaudible 60:44] . Michael: I know, I skipped the first part because I just thought maybe that wouldn't be your answer. Gammy: The only time that I could...The few competitions there, but the time that I could think of that was really boring was... Where were we stationed in the desert? [crosstalk] Michael: [inaudible 61:07] . Gammy: They did have a place where you can paint pottery and stuff. We loved doing that. Ceramics and stuff. [crosstalk] Michael: Clay and latte type of thing. Gammy: She's got the other answer because, then I painted something and then he never painted either. He painted something and then I painted something and I've got some of those at the house. Audience Member: Very cool. Also [inaudible 61:41] . Gammy: Oh, yeah. He'd win. He never made a crust in his life and he made a crust. It was like, "OK, this is enough of this. You got to make the crust. You can't get credit for that." [laughter] Michael: Oh, you would make pies together but he would never help with the crust. Gammy: Right. He would put them in with the men's competition and he always won because he had delicious pies. Michael: This would be like Herc taking credit for your jokes. [laughter] Audience Member: Yes. Gammy: No, I didn't think the crust was that important it just there came a time where he learned to make the crust. Michael: You're a grown ass man. Gammy: Exactly. Michael: I know what you're talking about. Yeah, make the crust man. [laughter] Michael: You just do it. Gammy: He did and he won. Audience Member: How did you help dad with fixing cars? Gammy: With what? Audience Member: Fixing cars. Michael: How did you help Dad with fixing cars? Audience Member: You had one particular job whenever you helped dad. Gammy: I can't remember what it is. Audience Member: You were the grunter. Michael: What's a grunter? Audience Member: I would say he held the flash light. [laughter] Michael: All right, so Brian asks what was your favorite activity to do as a child? I think we answered this one already, but... [laughter] Michael: ...if you have a different answer... Gammy: Getting into trouble. Michael: Pounding them out. Gammy: Being naughty. Michael: I just put, "pounding 'em out" down here. [laughter] Michael: Do you have a favorite age and stage of life? Gammy: I think when I was raising my kids. Michael: Raising the kids? When you had all of them are before John? [laughter] Gammy: You're bad. Michael: I know, but now I know where I get it from. Gammy: Without John, there wouldn't have been any challenge. Look at him now, come on. Michael: You just had to pound them out. Gammy: No, he was busy pumping. [laughter] Michael: You always have had great hair and skin. Do you have a secret? Gammy: Say that again? Michael: You've always had a great hair and skin. Is there a secret to this or just comes naturally like math. Michael: There you go. Michael: Math, hair, and skin. Gammy: I've done very little, to do anything about it, except I wash. That's good. [laughs] Michael: That's good. Gammy: What else do I do? I don't... Audience Member: What do you always wash with? Gammy: Caress. Audience Member: [inaudible 65:02] caress? Michael: Caress. White caress. Now I remember, yours is the only house I've ever seen Caress in, but it's everywhere. [laughter] Gammy: The thing is, my hands would crack and be yucky and Caress seems to be the answer. How many years have I been using Caress without any problems? Michael: I think you're keeping them in business. Gammy: I'm trying hard. [background noise] Audience Member: No sponsor. [laughter] Audience Member: She would just put on some lipstick and she was good to go. Michael: Lipstick and good. Uncle Linus. When did you know you were in love with Pap and how did he win your heart? Gammy: I hate to tell you this. This is so shallow. That blue uniform, man. [laughter] Gammy: He was one good looking Marine. I got to tell you that. Michael: If you got to use it. Right? Gammy: I got him. Michael: I like it. Gammy: We did a lot of writing in between. It wasn't... Michael: Average writer, right? Gammy: Average writer. [laughter] [crosstalk] Gammy: I'm just saying there was time between to communicate rather than just the blue uniform. Michael: Was there a point where you wrote the letter real, "Look dummy, you're going to have to make another appearance because I need to see you in the suit. If we're going to keep this thing going?" Gammy: You're silly. [laughter] Michael: I had to ask. Just trying to be thorough, is all. Do you have a favorite movie that you remember? Gammy: Yeah, but what could I think of? Michael: [laughs] Gammy: I did have a lot of favorite movies. Audience Member: You loved Joe Versus the Volcano. Gammy: I don't remember Joe. [laughter] Gammy: Why would I like Joe Versus... Audience Member: Is there a movie star you were in love with as a teenager? Gammy: I don't remember. Audience Member: John Wayne. Audience Member: Yes. Gammy: John Wayne. Audience Member: Paul Newman was really a heart throb of hers. Michael: Paul Newman, he's good. Gammy: That was a little later and I was a little more very much into my husband, and not into Paul Newman. I think John Wayne was just something else. [laughter] Michael: John Wayne and a blue uniform that would have... [laughter] Gammy: They wouldn't let him in. Michael: It'd be too much. [laughter] Michael: I hear you. I'm modifying this question a little bit, but I have so many memories of, the giant burrito, the giant chocolate bar, what is it about the giant? Audience Member: [laughs] Gammy: If you have as many kids at your house all the time, you need the giant burrito. Michael: I remember the giant chocolate bar being for you. Gammy: I don't remember the giant. I don't remember a giant bar. [off-mic comments] Gammy: Oh, yeah. Thanks. Michael: [laughs] Gammy: I was gaining weight. I always just weighed what I weighed and then I would ski and you get to this huge chocolate bar. Michael: That's sweet. Audience Member: What did I say to you, mom? Gammy: [laughs] Since am not eating it. [laughter] Gammy: I've got enough trouble. Then I did eat the chocolate bar. [laughter] Michael: Of course, you can't have chocolate in the house and not eat it Gammy: I love chocolate. Michael: Do you have a favorite chocolate or just if there's chocolate in it, "I'm game." Gammy: Pretty much. I would go with...Sometimes I just love pure chocolate, but the other way too. Anything that's chocolate. Michael: [laughs] "I'm good. Bring them my way." Mom says you had a ton of creative endeavors making a lot of dresses, outfits, gardening, all kinds of things. Did you have an item that was the biggest challenge in your creation? In seams of string or puppetry or whatnot, that you had to overcome? Gammy: I think puppetry came easy. I'm more of those... Audience Member: You made a suit for dad. Gammy: Huh? Audience Member: You made a suit for dad. That seemed like a challenge. Gammy: Did I? Audience Member: Yes. [laughs] [inaudible 70:15] Gammy: I am good. [laughter] Gammy: Oh my goodness. Audience Member: It was a really nice suit. [crosstalk] Audience Member: What about the turkey? Gammy: [laughs] Audience Member: We really struggled with the turkey. Gammy: The Turkey. We had a puppet that... Michael: The Turkey puppet was the one that almost did you in. Audience Member: Somebody commissioned it. Michael: OK. Audience Member: Somebody commissioned the Turkey. They wanted you to build them a turkey. Gammy: I said, "Too much money has gone in here, you can't really afford this turkey." [laughter] Gammy: I would let him use it whenever he wanted. I couldn't see... Audience Member: It was... Gammy: ...him having to pay that much money for... Audience Member: ...very elaborate. They'd let him see it. Gammy: I still got it. Audience Member: You have it and what did you do with it? Gammy: It's in the little trailer. Audience Member: Huh? Michael: It's in the trailer? Gammy: I think it's in the little... Audience Member: What did you... Audience Member: You made Colleen wear it. [crosstalk] Audience Member: ...wear it. [laughter] Michael: Oh, this is a Colleen-size turkey. Audience Member: Oh, it's a whole person... Michael: I have some forbidden memories around the turkey. Audience Member: My new technique is to use the turkey to win costume contests. Michael: Oh, nice. Nice. Audience Member: [inaudible 71:38] me who wore the turkey for Halloween a few years back. Michael: Oh, it's still around? Audience Member: Yeah. Audience Member: Yeah. Michael: Excellent. That's not scary at all. Audience Member: No, not terribly. [laughter] Michael: We have a few questions. Gammy: They won't eat them up. They'd gobble, gobble. They're safe. [laughter] Michael: We have a few questions left. What is your favorite Bible verse and why? Gammy: Hard question. Audience Member: Remember, you told me when we were blocking for this? Gammy: Yeah, that was on that...I prayed for John all the time. Audience Member: Yes. Gammy: Jeremiah 29:11. Audience Member: Yes. What is it? Gammy: I don't know, say a word, just a minute. Audience Member: Something about plans. Gammy: I know the plans I have for you, plans to prosper, not to harm you. It was for Cliff, and look at him now. It's a miracle. Michael: Yeah. [laughs] Gammy: Cool. [laughter] Michael: What was the hardest thing for you in going through that transition and having to depend on God to raise Cliff up? Gammy: What was the first part of that question? Michael: What was the hardest part for you in actually going through this transition and living Jeremiah 29:11? Gammy: I believed he was going to come through. I would go visit him, and take the kids with him. That really worked for him, because he loved babies. Michael: That hope? Gammy: The hope and the belief that God could make that happen, and he did. [laughs] Now, he's preaching to me. [laughter] Michael: With 85 years on the board, what do you think is the most important thing for someone to find to have a good life? Gammy: You're saying an 85-year-old, how do they find...? Michael: No. [laughter] Michael: I hope that you've found it. [laughter] Michael: With 85 years of life, I'm curious, for someone who's trying to figure life out right now, what's your recommendation on how to get the good life? How to find happiness. How to get the things that you're after in life. Gammy: I'm pretty content with what I got. Michael: Contentment? Gammy: Yeah. Audience Member: Somebody's asking if you have advice for all of us, being older and wiser than the rest of us. You're saying find contentment? Audience Member: Be content? Gammy: Be content, yeah. [background conversations] Gammy: I said be content. The way I approach life is to be content. I know that God's going to take care of it, and I try not to make it seem like, "Ugh, misery." [laughs] Michael: Whether it's the... Gammy: I enjoy life, mostly. Michael: Just have fun with it. Gammy: I don't know, I could live another 10 years, another two minutes. I don't know. [laughter] Michael: I have one last question, and this one's for me. I saved my question for last. What is it that you get most excited by in other people? Whether it be someone that you just met or someone that you've known for a long time, what's something that you see in other people that gets you going? Gammy: A lot of instances, it's if they're not a Christian and become one. That would be the main thing. Michael: A belief in God? Gammy: Uh-huh, because then, they'd have the peace that I have. Although sometimes, I'm Screwy Louie, but... [laughter] Gammy: ...I do have peace, and I would like to see other people to be sure of what life is like. Michael: I like that. Finding the common ground that you like to find with people is that contentment. The only place that you've found it is hope and God, because life can just be too nutty. Gammy: It is too nutty sometimes. [laughter] Michael: I love that. Is there anything that you want to say that I didn't ask about that you'd like to share before we end? Gammy: [laughs] I don't know. We had a good time. Michael: We had a great time. [laughter] Gammy: I think you covered as much as I think I could cover. Michael: [laughs] Good. Awesome. I like to hear that. [laughter] Gammy: I enjoyed you. Michael: Thank you. I enjoyed chatting with you. Thank you for this time. [applause] Gammy: You're welcome. [inaudible 77:20] . Michael: [laughs] Happy birthday. Gammy: Thank you. [crosstalk] [laughter] Audience Member: ...has a question. She wants to know what's your favorite animal is, and your favorite color? Gammy: My favorite color is green. My favorite animal? I like drawing horses. Michael: Horses? OK. Gammy: I did. I can't draw anymore. [laughter] Gammy: That's the thing. I like drawing trees and horses. Michael: I will ask one follow up to the animal thing. Ruby asked me this today when I was getting all this stuff set up. Would you rather be an animal or a robot? [laughter] Gammy: That's interesting. Michael: I'd agree. Gammy: I think she's adorable. [laughter] Gammy: Then I would rather be an animal. Michael: An animal? Audience Member: A nice animal. Maybe a puppy dog. Michael: OK puppy. Does it have a breed, or? Gammy: I tend to like German Shepherds. I have one. Michael: A nice German Shepherd. I like that. [laughter] Michael: All right. I think we covered it all. Thanks, Jamie. Happy birthday. [laughter] Gammy: I thought that was going to be horrible. [laughter] [crosstalk] Gammy: You laughed with me. Michael: Of course. Gammy: That's what did it. Like somebody's going to come and drill you. Michael: No. I don't drill. I just like to talk with people. [laughter] Gammy: Thank you. Michael: Of course. Thank you. Gammy: Excellent. Michael: Excellent. I agree. Gammy: A little silly at first. Michael: Yes. I enjoyed getting to hear so many stories. That was...

Chan Spot

He spent 15 minutes circling the parking lot for a "Chan Spot" — a space within 3 lines of a blue line. Now it's time to check out out and he distributes his three children across the open lanes — where they wait for judgement on the eternal question: Which lane moves fastest? It's a complex formula. As "those kids," my brothers and I prayed for the ideal outcome: wait in awkward silence as two sets of strangers decide if you're lost. Get the all clear. Then run back to dad's lane. The other case was less pleasant. Dad drifts the corner with a full cart of groceries and shimmies between the strangers before and behind you. You unload as the mood falls from concern to outrage. Don't get me started on on air travel… My dad wasn't in a hurry. He just had to get ahead. He loved creating a scenario where the outcome — however banal — made him feel like a champ. I have more important battles to battle than those against unwitting strangers at the supermarket. You do to. This memory, inspired by The Art of the Good Life (AmazonAffiliate). Chapter 1: Mental Accounting — How to Turn a Loss Into a Win

Would You Mind?

"Would you mind opening the door?" — asks a walking box "Yeah. I mean, no... Yes, I will open the door and no, I don't mind doing it" — I stammer back an a panic as the box waddles past — indifferent to my struggle I hate negative confirmation questions Open the door Solve this verbal riddle Who's happy with this? I can't deal 💬 chan What's something you do that's shrouded in awkward intentionality?


I started this letter the way I started every letter — with something honest about me I tried to relate my experience of growing up with an immigrant dad to what's going on today It was a stupid exercise I can't understand the depth of Black suffering So — this week — my job isn't to be relatable. I encourage you to listen to Black voices, Check in with and support Black friends, Buy antiracist literature, Equal Justice Initiative, Black Lives Matter, and the George Floyd Memorial Fund #blacklivesmatter ✊ chan PS Let me know what you donate and I'll match. I have about $1000 left to give this month and will handle any remaining matches in the coming months


I outed myself as a choir kid on Chats with Kent this month With nervous honesty, I confessed that my favorite human achievement is coordination and that I've never experienced it in software development. Choir, orchestra, The Rolling Stones, Beyoncé's Single Ladies, a Destiny fire team where players lead, follow, partner, and sacrifice themselves at in unity... I love teams for their ability to hit harder, go farther, and be more than an individual I made a big mistake in my transition to software development. As someone who believes in team, 🤔 Chan What experiences did you have in your former lives that you miss in your current career? Think you can find it?

Teach Your Kids Mixology

I taught my kids to make mixed drinks for Mother's Day Start a citrus tradition # Make orange juice a Sunday morning todo Add bubbly on special occasions # For birthdays and milestone events, add bubbly to this Sunday citrus tradition Use proper glassware Kids get sweet bubbles Seed the question for Mother's Day # Hey kids, tomorrow is a special occasion — Mother's Day You're off to the races now 🍾 chan Disclosure: This is terrible advice where substance abuse is a concern Be your own responsible adult


I'm stressing out about mentions I'm watching Rise of Skywalker with my 9yo I've heard that "once you pass 10k followers, you lose control over mentions" It sure feels true I'm no social influencer I'm sure you could I like leaving my phone in the car when out to dinner So, why am I stressing out about mentions? I promised myself that I'd be the guy who responds earnestly as positively to everything I could I still believe that Nothing good last forever I'm sorry if my silence makes you feel snubbed — That's never my intention I just have things to create and moments to savor

But that shit ain't the truth

It's my favorite cinematic transformation... Ringo hands over the Bad Mother Fucker wallet, drained of cash Jules — held at gunpoint by his own demands — unravels the mystery of the cold-blooded murder monologue he shouted at the beginning of the film The path of the righteous man is beset on all sides by the inequities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of the darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who attempt to poison and destroy my brothers. And you will know my name is The Lord when I lay my vengeance upon thee. It's a passage from the 1970s movie Karate Kiba — which Jules attributes to Ezekial 25:17 He shares his interpretation and how he justifies himself as the righteous man but — in his reflection — takes a sharp turn "...I'd like that. But that shit ain't the truth." I depend on my permanent status as the hero I'd like that "The truth is [...] I'm the tyranny of evil men. But I'm trying, Ringo. I'm trying real hard to be the shepherd." 🐑 chan

Dad's Clever

When dad died, I wanted only one of his things: The $9 clever is a fixture of Chinese homes and restaurants — Imagine a butter knife the size of an iPad. Using it, I remember him chopping burgundy boulders of char siu pork and peking duck hanging in windows next to B and C placards at "the only place to get real Chinese food". It's got me thinking about the products I put value in… The things we pass along are things we have shared, positive memories with. My kids won't care about my 13th $3000 laptop and the numbers of pixels, processors, and mAhs it used to steal my available time and attention. But they'll probably fight over a $50 carbon steel pan that made countless fried eggs, pancakes, grilled cheese, and crispy salmon skins. So I have a question: 🪓 chan

Abstract more, better

I have one rule when abstracting code: create one abstraction per problem. If you say "and" when describing an abstraction, you aren't done abstracting. Unfortunately, people are sneaky with "and". This is a dropdown component with accessibility and style baked in. Aren't you so lucky that I made it so easy? Don't fall for it. Repeat it with "and"... Dropdown and accessibility and styling huh? Sounds overreach-y. Yes, it's hard to separate abstractions well. While it might sound sweet to avoid understanding the individual complexities of all three problems and their intersection, accepting overreaching abstractions exchanges the momentary discomfort of learning something with a long-term dependency on a personality or preference. Do you trust this personality? No. The salesperson puts all their energy into the sale, not support. Stable abstractions are those with personalities removed. Solutions that are properly separated by "and"s can compose, recompose, and decompose gracefully. Like evolution, useless abstractions fade away while useful ones replicate and extend their reach. Isolated accessibility tools can be remixed into new, unanticipated expressions of dropdowns. Mark might have you believe that I'm anti-abstraction, I'm not. I want abstractions — with standard interfaces — that can compose, recompose, and decompose gracefully over time. (A less popular version of "Hot Garbage: Clean Code is Dead" covers this with code.) Update: Mark and I agreed all along. My favorite kind of fight. 😂

Stop making dents

Something most religions agree on is how cosmically unimportant an individual is. They differ in the specifics but — in general — most religions tell you to think of yourself and your circumstances less. Because you are momentary. So why be so intent to "make a dent"? Instead, be at peace — receive truth from the past, enrich it with insight from the present, and — in doing so — prepare it for the future. Don't withhold anything; What can you give away today? 🌷

Share your by-products

There's a chapter in Rework titled "Sell Your By-products". The TL;DR? You can't make any process 100% efficient but — if you're creative — you can sell both product and waste. I think it's good advice. As knowledge workers, we produce a lot of waste. But I've learned that selling and sharing are different. I've tried selling my by-products and failed. So, is the advice bad? Maybe all of the above but today I put something together: I remain employed to avoid responsibilities of running a business So... 🤲

The man and the monster

We have to achieve what Dr Jekyll couldn't. In every person lives creator and critic. Too critical to publish or to creative to progress. Your work requires that you build a boundary between the man and the monster. You'll be better prepared. My favorite creatives have fight this battle and shared their tactics: You and You, Inc. — Steven Pressfield Muse and Mule — Elizabeth Gilbert Maker and Manager — Paul Graham Each of these thoughts guides me thru different struggles. Maker and Manager is a framework of dividing a day into distinct modes. You and You Inc is a defense against imposter syndrome. Muse and Mule is a comfort when luck doesn't show. 🐴 chan Romans 7:23


On unemployment, you get a paper check. I missed one and felt properly fucked. You can't call unemployment in the middle of a recession. I gave up. I've never felt shame like being on unemployment. Every day my heart broke as employment applications went unanswered and open positions closed. That panic is with me, still. I'm not gonna be a dick and enumerate the ways it was good for me. That isn't helpful. Jeffery Way, Geoffrey Grosenbach, and Dan Benjamin who showed me a new path by sharing what they knew. I couldn't have made it thru without them and I feel a huge responsibility to share what I know in response. I hope you will too, creators. 👨‍🏫 Chan

Make a Foul

"I want to see you make a foul!" I yell that at Rock every time he runs onto the soccer field. Truth is, he's incapable of it. I was the same way For me, that's wasting people's time and attention. This morning, I woke up to a flood of emails with largely identical text: Hundreds of people got a placeholder email from me because I took a class on email marketing, created a landing page, wrote part of an email sequence, and never finished emails 3-5. Of course, I scheduled all of them — as a means of forcing myself to finish — and they went out unfinished. In my book, spam is always a foul. Looks like I have a few emails and apologetic responses to write... ⚽️ chan Make any fouls this week? Hit reply. I'd love the company 😅

Snap to Focus

It's hard to make a great photo on a phone. I still buy pro compact cameras and A good pro compact has a feature called Snap to Focus. It's a great feature but even a better metaphor... As I was complaining to Nellie about some workplace politics, You're not always angry but you Snap to Focus on things that make you angry. Regardless of your mood, you can jump to the exact level of angry you were the last time you were there. Admittedly, it ruined the feature. Right now, my Snap to Focus is set on something that isn't happy, healthy, or powerful. I can Snap to Focus on things I hate or I can Snap to Focus on things I love. Where do you Snap to Focus? 📸 chan


This week, Basecamp announced HEY — a new email service. I thought mine was cute-ish. Nellie and I were serious about each other from the start. We knew we couldn't be casual about the details. So, we committed to enjoying each other in person — calm, fun, positive dates only. Email gave us time to think about big things... Email gave us a space to calmly discuss the foundation of our future relationship, We're 14 years in love, now. 💌 chan # What's your email story?

Do What You Can't

Last week I said you should "earn your imposter syndrome." I don't want you to experience imposter syndrome. Imposter syndrome is a thief. You are enough. But you won't be able to convince yourself of that. I tell people to "earn your imposter syndrome" because there's no compassion in comforting fear. You kill it by proving it wrong. 🚷 chan

Earn Your Imposter Syndrome

"I'm getting into the field, how do I overcome my imposter syndrome?" I get this question a lot and my response is pretty tough: You can't have imposter syndrome; you have to work first. Too harsh? Imposter syndrome is for people who have a proven track record but can't escape the nagging belief that they'll be discredited as a fraud. If you aren't winning, who cares that you cheated? Being afraid to fail isn't imposter syndrome, it's just fear. "Fortune favors the bold" — Virgil You earn imposter syndrome by failing so fiercely that repeated success feels like an unconscionable fluke. Don't coddle yourself. 🎭 chan

Do What Others Won't

Yo When I was interviewing contractors to refinish the wood floors of my 70 year old house, they told me: When I was changing careers, I followed that contractor's lead: "Shit work" is low-stakes way to showcase your dependability. Career capital is measured in dependability. In my career, that leverage was CSS. There's always work to be found "beneath" others. 🤴 chan]

Say What You See

Pamela Stambaugh changed my life. I met her while filling an employment gap. Pamela required that I take an aptitude test as part of the interview — she's a career consultant. She called me with the results and said: That was my first web development job. It shocks me — to this day — that an absolute stranger changed my life. I'd been toying with the dream of programming for years. Pamela just said what was obvious. "You're doing the wrong work. Do this instead." I've worked hard to Say What I See in others — 🗣 chan

Stride Your Limp

I don't trust anyone who doesn't walk with a limp — metaphorically, of course. Losing leaves a mark. You don't lose, fighting winnable fights; That's a lot of bad sports analogies for a nerd. Mindfulness teachers have a formula: Pain ⨉ Resistance = Suffering. Pain is non-negotiable. Do you take pain and turn it into suffering? A limp can be a lesson learned. Punch up. 🥊 Chan Genesis 32:22-30


Thanks for letting me in this year. When I started writing into the void, I assumed that this would be a fun way to catalogue a few thoughts and memories I’d never shared My favorite thing about last year was getting to know you, I’m grateful for you 🎆 chan

Don't Go It Alone

My dad taught me to trust no one. Back in his 20s, my dad's business partner/cousin bankrupted him. That legacy hasn't served me well. Athletes have coaches. I've been unpacking my reliance on self this year — trusting others with things that are important to me. It started by trusting The Spec Network with my podcast. Last month, I continued the trend by trusting egghead with a programming course I developed. This has been my most productive and fulfilling year yet Don't go it alone. 👯‍♂️ Chan P.S. #ReactHoliday thread on Twitter. this newsletter 😅

Stop Failing Yourself

If you want your life to be worse, In school, I wouldn't turn in a paper if I didn't feel like it was "good work." I protected myself with the "perfectionist" narrative. Perfectionism is the horsiest of horse shits. If you don't share your work, you're not a perfectionist — Stop hiding your work because you're scared. 💡 chan Matt 5:14-16

So, I Make My Bed

My existential dread is a morning person. It yells at me thru the alarm and sneers thru the god forsaken gap between the window's edge and the curtain. (I really need to fix that) It hits early. So, I accept defeat. It's my first act of defiance against the day. Making the bed reminds me that every today starts with a mess from yesterday, When the bed is made, I'm in it. Now, if only I could get out of these pajamas...

Pay Attention

As an adult, I'm often chasing novelty — This weekend, Nellie and I took the family to Utah — a new place we'd never been. It was our first plane-trip as just our family of four. For all the planning, money, and coordination that it took, the kids both agreed that their favorite part was watching movies and playing games with us. I don't regret for a second taking them. 😳 chan

Catch Your Suspense Errors

Not every promise resolves. So, when we use React.Suspense to show loading and loaded states, Error Boundary Crash Course # Error boundaries were a flagship features of React 16 — fiber rewrite. To use Suspense effectively, you have to to make use of error boundaries. Start with Copy and Paste # The React docs have a copy and paste-able ErrorBoundary component. You really only need one of these things. class ErrorBoundary extends React.Component { constructor(props) { super(props) this.state = { hasError: false } } static defaultProps = { fallback: <h1>Something went wrong.</h1>, } static getDerivedStateFromError(error) { return { hasError: true } } componentDidCatch(error, errorInfo) { console.log(error, errorInfo) } render() { if (this.state.hasError) { return this.props.fallback } return this.props.children } } This one is customized slightly for demos. It assumes you don't have a logging service and uses console.logs It takes a fallback prop for custom messages — much like Suspense Wrap Those Suspense Components # Wrap Suspense components with an error boundary to pending — Suspense fallback resolved — Suspense children rejected — ErrorBoundary fallback import React from "react" import ErrorBoundary from "./error-boundary" const LazyLoadedComponent = React.lazy(() => import("./SomeComponent")) function MyApp() { return ( <ErrorBoundary fallback={ <div>Stop trying to make fetch happen. It's not gonna happen.</div> } > <React.Suspense fallback={<div>Waiting...</div>}> <LazyLoadedComponent /> </React.Suspense> </ErrorBoundary> ) } This Ain't No 1:1 # I see a lot of people immediately jump to wrapping ErrorBoundary and Suspense together. It's not a good look. Separate, they give you nuanced control over your entire view. ErrorBoundary around a bunch of Suspense components. The world is your oyster. This is The Suspense API # Right now, we're using React.lazy to do the work of communicating pending, resolved, and rejected states to our Suspense and ErrorBoundary components. Next, we'll talk about creating our own wrappers to interact with this Suspense API.

Use Suspense Today

Believe it or not, you've had access to Suspense for a year. Yes, there is more suspense to come. Suspense today. React.lazy and Suspense sitting in a tree # React v16.6 introduced React.lazy — import React from "react" const LazyLoadedComponent = React.lazy(() => import("./SomeComponent")) function MyApp() { return ( <React.Suspense fallback={<div>Waiting...</div>}> <LazyLoadedComponent /> </React.Suspense> ) } lazy depends on Suspense to present a fallback while the lazily-loaded component is fetched. In that way, Suspense acts as a boundary for asynchronous data. Suspense boundary is pending, fallback is presented. children are presented. But Suspense needs a translator # Suspense can't magically know all the promises it's children may or may not have. That's where lazy comes in. lazy wraps a dynamic import and communicates Pending and Resolved states to the nearest Suspense component boundary. code here). Suspense will resolve fallback or children accordingly. The future™️ # As we move into a Suspense future, you'll see this pattern more often: Suspense boundary (with fallback) React.lazy, ReactCache.createResource, etc). What's Next? Errors # Not all promises resolve. Rejected. I'll show you how to handle that state next time.

Make the Cut

Every idea starts as a conflated ball of ideas Your work — as steward of an idea — is to cut off everything that doesn't belong But these cuts aren't obvious For example: Have you seen a tri-tip steak when it's still a cow's muscle? The cut lines are set by your vision Be patient; It takes time When you see it, cut ✂️ chan

My 2019 Portable Podcast Rig

Just packed my portable podcast rig for the first time this year. Case # When I bought my Zoom H6 Portable Recorder, a Gator Titan Series case was included as a promo. I like this case because it fits easily inside one half of my carry-on sized rolling bag. Recorder # I use the Sound Devices MixPre as my portable recorder. I upgraded because I needed a better backup system for remote interviews. As a portable system, it's not markedly more impressive than the Zoom H6 I used last year — when paired with the right mic. Microphones # I travel with two Rode M2 handheld condeser microphones. I also use this mic for my side of React Podcast episodes Egghead videos. These mics handle non-ideal situations better than any other I've used. The Rode M2 has a tight hyper-cardiod polar pattern — which is very good at supressing background noise. Don't buy this mic from Amazon. B&H. Backup and Alternative Microphones # I also bring a pair of the impressively cheap, Pyle-Pro PDMIC58 microphones as a backup. These are a great sub-$20 starter mics. For just a few bucks more, pickup the Behringer Ultravoice Xm8500. Of course you can use the versitility winner — Samson Q2U — with this setup. Accessories # A list of all teh accessories I use Windscreen # I use these cheap windscreens to cut down on wind and reduce plosives. Again, what I use for my side of React Podcast. Stand # These foldable tabletop stands by ammoon are great for travel. They take up very little space and are wicked stable. I use the Audio-Technica AT8415 Microphone Shock Mount because it's small, effective, and the rubberbands are easily replaced. Cable # Thes tiny XLR cables by Cable Matters are great for travel and have been reliable for me. Battery # I use the Sound Devices MX-LMount Battery Sled and RAVPower NPF5500 batteries. I like the LMount sled because it mounts two batteries. I like the RAVPower batteries because the charger uses USB — which I always have wall adapters for. As an alternative — or additional backup — I can use my Anker PowerCore+ 20100 notebook battery bank as a power source. Disclosure # Most of these links are Amazon Affiliate links. So I'll get a tiny little bit of money if you click on a link and then buy something. The Rode M2 links to B&H because Amazan is not an approved retailer.

Do Better

Do better Not because I just said so Do better for you If The Bible is true — and I think it is — And we fucked it up trying to get more knowledge Do your work Find the thing you know deep down in the pit of your stomach is work that only you can breath into the world And high-five your friends when they do the same 🏋️‍♂️ chan

It Takes what it Takes — On Dyslexia

I have dyslexia. Dyslexia is often represented as letters all jumbled up For me it's the experience of reading something, As a result, it takes me longer to do everything. This forced me to learn patience. Be patient with yourself. 🔂 Chan

Don't Be Timid

People are simple. So, don't be timid. If you want to entertain people, you don't matter. Crowds don't show up for you. They already own timidness. Will you be praised or punished? Who knows? No apologies. Keep doin' you. 🤕 chan

Fair and Impartial

Monday morning, I walked into a courtroom with 64 other prospective jurors. I walked in believing I could. Being part of jury selection on a criminal case is emotional. On day one, we were all plotting ways to be released and talking about our jobs. Everyone has a shitty story buried inside. So, why was I released? Every time I saw the defendant, I thought of my uncle. I couldn't be the one to put him there. 👨‍⚖️ chan

I'm a Toys R Us kid

The guy in front of me is closing the gap on 40. His not-quite-heavy-but-definitely-dad frame is breaking the spirit of what I hope is his child's Penny skateboard. I laugh, Crack! Thud. "Fuck" I look back and definitely-dad's face is grinding against the concrete. The skateboard rolls slowly away from him and back toward me. I'm laughing my ass off He collects his expensive accessories, limps toward me to collect his son's tiny skateboard — somehow it looks even smaller up close — and says: He gets back on that microscopic board and rides away. — The tween behind me on the street last Wednesday P.S. How are you feeling your age this week?

I'm Angry. Are you?

My dad wanted to be white. He married a white girl. He went places he wasn't welcome and he took us with him. I saw him take shit. I'm angry about it. I don't know what to do with that. What can we do? 😡 chan

Your Sense of Security is a Threat

All of our fighting is over a sense of security. When I fight with Nellie about money, It’s a fight over security. I want the security of having money. She wants the security having experiences. When I fight with my team over a design, We’re fighting over security. I want the security of having stability. They want the security of having the freedom of expression. Neither side is right. Neither side is wrong. We’re fighting for our own security — at the expense of others. But if we can identify that familiar motivation in others, Their position doesn’t feel as far away. We can empathize because we want the same thing. So be mindful. Security is threatening. Consider how yours threatens those you fight with. Your friend, chantastic

My Career Changed on a Water Slide

There's a water slide at a local resort where my career changed. At the end of 2013, I wrote my first React component. So, that spring — on a weekend vacation — I read the React docs on my phone while Rock went up and down a children's water slide a hundred times. He didn't mind me ignoring him and I didn't mind him splashing my every 45 seconds. I had no idea how that hour would direct my next five years. The company I work for ended up writing a React app. bunch of resources, a few conference talks, and then React Podcast. 5 1/2 years later, I'm at JSConf US watching Ruby go down the same slide a hundred times. 🥰 chan Question: What have your big career moments been? Did they catch you by surprise?

The Secret of Narrative...

I'm obsessed with narrative. But in 2015 I stumbled onto the secret of narrative. 150 hours into prep for my first conference talk, my friend Brian raised a flag: You know you're stupid as a brick for thinking developers should write CSS in JavaScript. He was wrong and he was right. So I rewrote it to speak directly to Brian — This shift from information to transformation made all the difference There are plenty of frameworks for fleshing out narrative Dan Harmon's Story Circle. Where do you think communicating transformation could help you tell a better story? 🦋 chan

What if Nothing Matters but Communication

Last year I gave talk — Hot Garbage: Clean Code is Dead. It’s good. You should watch it. That talk spun up a question that I can't shake: That question has changed the way I work. Instead of seeking an answer, I seek discussion. My hope is that a strong team, with a healthy process, will make better decisions with time — This is new experiment for me. 🤔 chan

Life is Right Now

I'm in bed with the flu. I hear everything happening — I'm back here doing work, watching seasons of television I've missed, and thinking about death. Right now I have health and family — a once in a lifetime adventure. When I get out of this bed I plan join my family and knock the pants off the remaining weeks of summer. Care to join me? 🌞 chantastic

Do the Thing

This is my modus operandi: Have an idea Sit down to work Work on something different Let the idea die When I decided to make developer training videos, I didn't make a video. I've missed out on a lot of opportunities because of that. Creation is a battle with ego. This is why your blog looks like a dream but has no posts. Ego refuses to look foolish. noble obstacle. Resist. ⛏ chantastic

Steal From the Players Who Beat You

My kids are deep into the card game Sushi Go. The first week of gameplay, Rock lost every game. I try harder than all of you and I'm always last! That resonates with me. It feels fair that if you try harder, you get further. So I tell him: Your strategy sucks. He did. 🍣 chantastic Question: Where do you put effort in the wrong direction? Where does ego prevent you from identifying a better strategy?

Destinations are Disappointments. Do What Makes You Happy

Sheryl Crow has possessed my mind. I wasn't a fan 2 decades ago If it makes you happy, it can't be that bad. I'm singing it at the top of my lungs, driving down the coast, Into my 30s, I know that type of sadness. Right now, that's writing. Stars, likes, RTs, followers, promotions, and subscriber counts be damned; 🎭 chantastic PS. What makes you happy? Have you diminished it to gain something that only makes you sad?

Get the Raise

This week, three of you asked me about salary negotiation. I'm shit at negotiation Become visible. I've received exactly one raise that wasn't driven by me. That was a wake up call. That year I started creating training materials and giving conference talks. I learned that I was still 25-35% under market. This would not have happened if I hadn't been proactive. It's not a company's job to serve your career. If you're waiting for a raise — Be visible. 💸 chantastic

Are We There Yet?

When my friend Mike and I got our first entry-level tech jobs, we'd daydream over lunch. Obviously this is an old dream. It was a delusion. This year, we took that vacation. But it wasn't a foregone conclusion. These new dreams would have taken longer to realize and put the old dream on hold — again. Nellie convinced me that now was the right time to take this trip. She was right. It's easy to hit skip on dreams. When we do that, we skip celebration. By realizing dreams — even old and outdated one — we celebrated the victories that got us there. Where are you at today? Celebrate the impossible victories that brought you here. 🏔 chantastic

Fail Up

I learn slowly. On this vacation, Vacation-jeopardizing, hydration watch sunburns that sidelined me for days. This is normal for me. That used to make me feel dumb. Failure doesn't freak me out. Often, a colossal failure is just shy of a huge success. Eat your pride. For me? Live and learn. ☀️ chantastic P.S. Have you given up too soon on something you believe in? Feel like it deserves a second chance? Hit reply. I'd love to chat with you about it.

Kill the Old You

I woke up on the first night of vacation with perfect clarity on two things. First, our server didn't totally mess up the bill. Mystery solved. Second, this has been my best year yet. Last year I gave a talk titled Hot Garbage: Clean Code is Dead. Under the surface the talk is about me becoming an asshole by spending time with people in tech. if you can't dazzle them with brilliance, baffle them with bull — W.C. Fields There was no part of me that liked the new me. Your sins have long legs. Don't be discouraged. As one who's 18 months into the process, I want you to know that it gets easier. 👼 chantastic

Outputs and Outcomes

When chasing an outcome, measure your output. In an online video — which I've since lost — a prodigious barista talks about his quest for the perfect shot of espresso. I found this fascinating but self-evident. His output is effort. For him, this is an ongoing pursuit. I get hung up on outcome — When I can't control outcome, I fixate on optimizing input — But output is what matters — You are what you measure. 📐 chantastic

Caring Can't Get You Control

Ruby's been fighting cancer for 5 years. She won some kind of shit lottery. There are pretty much 0 kids with both. I hate talking about it. I like sharing directives. Today, I'm just serving some realness. 🏥 chantastic Psalm 139:7-12

A Hammer Doesn't Make a Chair

When I find a new hobby, I buy the dopest shit right away. A lot of people delay. Not me. Why? I want to be confronted with the cold, hard, timeless truth that a hammer doesn't make a chair. My $10,000 DSLR didn't make photos. Shit can't make shit. When I buy the best and leave it to collect dust in my garage, I know that I'm the problem. So, Take your crappy tools and make something today. 🛠 chantastic

More and Worse

I don't have trouble doing a thing perfectly. But time... 4,732 weeks is the time most of us get. anything else going on, our work — the work that makes us feel fulfilled. Dieter Rams famously coined "less but better" as his pinnacle principle for good design. It's provocative. But I'm not there. Marriage, bills, kids — one with cancer, and a prematurely widowed mother... Games, recitals, campouts, dates, birthdays, conferences, volunteering, and family gatherings... I'm stuck with "more and worse". I'm learning how to focus. I see them more clearly and strike more accurately. After this time, ⏳ chantastic Question: Where in your life is an ideal holding you back? Can you do something you love worse, today?

Sound Epic in Audio

Audio is becoming more important for communication. Starting a podcast? Presenting yourself well with audio is critical. I host a podcast. I spent $5000 the past couple years trying to figure it out. You can get 80% epic for 60 bucks. I made a little microsite to with my recommendation, You'll love the way you sound on this thing. 🎤 chantastic

Appear Consistent

Appear consistent. This is what a friend taught be about the game of poker. You play the game with reputation. I suck at consistency. I get excited by an idea, lock myself away, grind, and blow my energy before I send it. "Imagine how great it could have been — or might be... eventually." But we don't get partial credit for good intentions. My only defense against oblivion is the sacrament of a weekly commitment. This has been transformative for me. If I can't fit an idea into a weekly release, When consistent, Do you have a habit around your work? 📅 chantastic

Ask A Relevant Question

Networking is hard. So I have a strategy. Target the most important, vibrant, or momentarily esteemed person in a room. At conferences, these people are the speakers. Lot's of folks get nervous around speakers. I'm not that devoted to my blood relatives. Speakers are eager to talk with you. It's easy to stand out in that crowd. When they're speaking, listen. If you can form a compelling question, 💞 @chantastic P.S. What's the most awkward thing you've seen someone say to a conference speaker?


I've wanted to host React Podcast since its original launch in 2015. The show quickly died. "He's a natural fit." This is what I told myself. Of course, This was all true but that last part. What separates Michael and I is not our network or charm. This was never clearer than when he asked me to take over the show and I said "no". Why would I do that?? Why? Because it's easier to live in a fantasy. Fortunately, I got my senses about me — So. 💖 chantastic


👋 Hi! We haven't talked in a while. If this the first time I've emailed you, Today's about picking after failure. I did 7. I was tempted to pretend like I never started — I'm glad I failed. I'm excited to talk with you again. So, what are you hiding from? Pick it back up. Your friend, chantastic

You Can't Do in a Month What You Won't Do in a Day

You can't do in a month what you can't do in a day. I took a sabbatical this month. I thought I'd clean the garage, I didn't. Instead, I worked on my "projects" Why? The problem isn't time. If I can't do it in a day, I'm learning. The day is young. 💝 chantastic

Fail Fast. Fail Safe

You won't get anything right on your first attempt. I was at Disneyland last week. Disney illustrators use a technique called rough sketching. Discover the shape. Ink the best line. This two step process isn't limited to visual arts. Fail fast. Draw lots of lines # Get code on screen — lots of code. Fail safely. Work in pencil # Avoid permanence. This process can feel foreign. Editing is easier than inventing. 🌈 chantastic

My $500 lesson on copyright

If you want to protect your work, Disclaimer: Good? Register your work. has a page for registering your work. Protect your work. Get paid for your work. That's what I got. 💌 chantastic

My why

My why showed up as a pink slip. As the first born son in an asian family, It was fine. I wasn't prepared for the market to collapse. Being unemployed is something. worked for anything. This led me to my why. We humans are silly. We're more than those accessories. We're only as stuck as we believe ourselves to be. How do you value your worth? 💓 chantastic

Find Your Why

You need a motive to convict someone of a crime. why. Why is philosophy. why, Who, What, Where, When, how quickly follow. If you were on trial for your work, why convict you? why? Why not? Brilliant leaders ask "why?". why. why gets you excited. Why is thrilling. What are you working on right now? why? Why not? Let's find your why. 💝 chantastic

Labor Well

Krishna instructed Arjuna: way we work but not the outcome of our work. So, how can we own our process when our work is unpredictable? Embrace them. Each day, I commit to four hours of work that I know I can do. Starting my 4-hour workday was uncomfortable. This week, Happy Labor Day, 💖 chantastic P.S.