Burton Smith

@stuffbreaker.bsky.social

1408 Followers 390 Following

Fun-loving coder and speaker. I love web development, web components, and design systems. Creator of the WC Toolkit. I work at ZocDoc.

body:has(:not(:defined)) {
opacity: var(--wc-loaded, 0);
animation: showBody 0s linear 100ms forwards;
}

@keyframes showBody {
to {
--wc-loaded: 1;
}
}

A CSS snippet for reducing FOUC with web components:

body:has(:not(:defined)) {
opacity: 0;
transition: opacity 0s 50ms;
}

A graph of the number of downloads by IDE.

My Microsoft badge

a screenshot of the internals of a date input element

a screenshot of the internals of a details html element.

example of ai integration in vscode

A demonstration of the WCTools CLI tool with the Web Components Language Server

Configuration example

"Creativity thrives under intelligent constraints." by Carmine Gallo

A javascript code snippet with the following content:

function removeSirens(sirens, removals = 0) {
// Calculate overlap counts and find max overlapping siren
sirens.forEach(element => {
element.overlapCount = sirens.filter(siren =>
element !== siren &&
element.start < siren.end &&
element.end > siren.start
).length;
});

const maxOverlap = Math.max(...sirens.map(s => s.overlapCount));

if (maxOverlap === 0) {
console.log(`Siren removal completed successfully with ${removals} removals.`);
return;
}

// Remove first siren with maximum overlap count
const maxIndex = sirens.findIndex(s => s.overlapCount === maxOverlap);
sirens.splice(maxIndex, 1);

removeSirens(sirens, removals + 1);
}

Taylor Desseyn on screen but his image is cut off and his legs are replaced with skinny cartoon legs.

Workbench with some tools, html, css, and javascript logos

a graphic workbench

a demo of the rendered API documentation

A display of three different web component logos

A wooden ladder decorated like a Christmas tree

Screenshot of the code bubble components with and without the code examples expanded

animated image of VS code editor validating custom elements in HTML

a css media query selector nested within a paragraph tag selector