Michael Shilman

@shilman.net

2107 Followers 602 Following

🇺🇸 dad in 🇹🇼 building @storybook.js.org oss, dev tools, testing, design systems, a11y

"ai-tokenizer" output for similar code generated by Claude Sonnet. The left example uses tabs and consumes 11,653 tokens. The right example uses spaces and consumes 5,607 tokens. Weird!
Picture of Supernote epaper device
Code to plot a collection of data features ("dev", "StoryCount", "ErrorRatio", etc.), and the resulting bar chart visualization in a Python notebook.
React server component testing example for Next.js notes app: "note editor saves note and redirects after submitting note"
A component test that renders a `Users` server component, clicks on the like button, and then asserts that number of likes in the database has been incremented.
X-ray of my broken wrist with titanium plate and pin. Ouch!
My baby girl, shortly after birth.
My little girl saying “gongxi gongxi!” and waving her red envelopes victoriously!
Code snippet for new CSF typesafe factories and test proposal. const meta = config.meta({ component: Button }) // 1. Type-safe story factories "arrange" export const Primary = meta.story({ args: { label: 'Primary', onClick: fn() } }) // 2. Jest-style tests "act" and "assert" Primary.test('handles clicks', async ({ canvas, args }) => { await userEvent.click(canvas) await expect(args.onClick).toHaveBeenCalled() });
State of JS 2024 chart that shows how the new survey UI affected the survey outcome. X-axis = sentiment, Y-axis = popularity. Most positive sentiment libraries moved left and most negative sentiment libraries moved right.
@antfu and @shilman selfie with thumbs up at Huashan 1914 Creative Park Taipei
Four year old girl in pink Elsa princess dress screaming in crowded airport
import fc from 'fast-check'; import { test, assert } from 'vitest'; import sortLetters from './day-01.mjs'; const letter = fc.record({ name: fc.string({ minLength: 1, unit: fc.constantFrom(...'abcdefghijklmnopqrstuvwxyz'), }), age: fc.integer({ min: 7, max: 77 }), }); test('should sort letters by age and then alphabetically', () => { fc.assert( fc.property(fc.array(letter), (data) => { const sorted = sortLetters(data); for (let i = 1; i < sorted.length; ++i) { const la = sorted[i - 1]; const lb = sorted[i]; assert(la.age <= lb.age); if (la.age === lb.age) { assert(la.name <= lb.name); } } }), { numRuns: 1000 } ); });
Skipping heading ranks can be confusing and should be avoided where possible: Make sure that a <h2> is not followed directly by an <h4>, for example. It is ok to skip ranks when closing subsections, for instance, a <h2> beginning a new section, can follow an <h4> as it closes the previous section. https://www.w3.org/WAI/tutorials/page-structure/headings
My daughter cheesing it up for the camera!
Bluesky components (Admonition, Button, ProfileCard) displayed in Storybook for React Native Web
Chart of CI duration. X axis is timestamp of CI run. Y axis is duration by task. Duration almost cut in half after merging Storybook Test (from ~10m to ~5m for a large repo).
Americas: Mon 8:30PM UTC (12:30PM PDT) - Kyle Asia: Wed 8:00AM UTC (4:00PM CST) - Michael Europe: Thu 2:00PM UTC - Yann
A component test: - Renders a component in the browser for high fidelity - Simulates a user interacting with actual UI, like an E2E test - Only tests a unit (e.g. a single component) of UI, and can reach into the implementation to mock things or manipulate data, like a unit test
Storybook sending a 🦋 to X
Little girl doing jazz hands and daddy doing jazz face
My daughter’s first Lego structure!
My baby girl. What a cutie!
Running 82 UI tests in a flash with Storybook + Vitest
Storybook package dependency graphs for v8.2 (L), v8.3 (M), v8.4 (S)