Code

Robin Weser’s “The Shorthand-Longhand Problem in Atomic CSS” in an interesting journey through a tricky problem. The point is that when you take on the job of converting something HTML and CSS-like into actual HTML and CSS, there are edge cases that you’ll have to program yourself out of, if you eve..

In my role as a web developer who sits at the intersection of design and code, I am drawn to Web Components because of their portability. It makes sense: custom elements are fully-functional HTML elements that work in all modern browsers, and the shadow DOM encapsulates the right styles with a decen..

I just had to debug an issue with focusable elements in Firefox. Someone reported to me that when tabbing to a certain element within a CodePen embed, it shot the scroll position to the top of the page (WTF?!). So, I went to go debug the problem by tabbing through an example page in Firefox, and thi..

With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum applications. Ethereum, as you should know by now, is a public (meaning, open-to-everyone-without-restrictions) blockchain that functions as a ..

Serverless, GraphQL, and DynamoDB are a powerful combination for building websites. The first two are well-loved, but DynamoDB is often misunderstood or actively avoided. It’s often dismissed by folks who consider it only worth the effort “at scale.” That was my assumption, too, and I tried to stic..

With ES Modules, you can natively import other JavaScript. Like confetti, duh: import confetti from 'https://cdn.skypack.dev/canvas-confetti'; confetti(); That import statement is just gonna run. There is a pattern to do it conditionally though. It’s like this: (async () => { if (condi..

Louis Lazaris demonstrates a very simple way of doing this. Hide the body (with JavaScript) right away with with a CSS class that declares opacity: 0Wait for all the JavaScript to execute Unhide the body by transitioning it back to opacity: 1 Like this: CodePen Embed Fallback Louis demonstrates ..

In the not-too-distant past, even basic accordion-like interactions required JavaScript event listeners or some CSS… trickery. And, depending on the solution used, editing the underlying HTML could get complicated. Now, the

and

elements (which combine to form what’s called a “di..

Terence Eden poked around with a way to do footnotes using the

/

elements. I think it’s kind of clever. Rather than a hyperlink that jumps down to explain the footnote elsewhere, the details are right there next to the text. I like that proximity in the code. Plus, you get the nati..

Back when we released the v17 design (we’re on v18 now) of this site. I added html { scroll-behavior: smooth; } to the CSS. Right away, I got comments like this (just one example): … when you control+f or command+f and search on CSS-Tricks, it’ll scroll very slowly instead of snapping to the result..