This literal tech talk (YouTube video embedded in there) by Zach Leatherman is a good time. The talk is sprinkled with fun trickery, so I’m just taking notes on some on it here:
- I have no idea how he pulled off the “bang on the keyboard and get perfect code” thing, but it reminds me of Jake Albaugh’s “Self-Coding” Pens.
<body>makes the whole page editable! Did you know
- There’s a short bit where the typing happens in two elements at once. CodePen supports that! Just
CMD+ click into the editor where you want another one to be, or make it part of a snippet.
- System fonts are nice. I like how easy they are to invoke with
system-ui. Firefox doesn’t seem to support that, so I guess we need the whole stack. I wonder how close we are to just needing that one value. Iain Bean has more on this in his “System fonts don’t have to be ugly” post.
box-decoration-breakis a nice little touch for “inline headers.” The use of
@supportshere makes great sense as it’s not just that one property in use, but several. So, in a non-support situation, you’d want to apply none of it.
- Slapping a
<li>elements to compare rendering strategies is a neat way to get some perfect UI without even a line of CSS.
- In the first bullet point, I wrote that I had no idea how Zach did the “bang on the keyboard and get perfect code” but if you watch the bit about syntax highlighting and keep going, Zach shows it off and it’s a little mind spinning.
I think Zach’s overall point is strong: we should question any Single-Page-App-By-Default website building strategy.
You can support CSS-Tricks by being an MVP Supporter.
Go to the original Source
Author: Chris Coyier
Powered by WPeMatico