[Chris]: You know you can kinda draw things in CSS? I’ve seen my fair share of it. You can use things like absolute positioning to move elements wherever you like, then colorize them things like backgrounds and borders, shape them things like border-radius and clip-path, and twist them with things like transforms. At a basic level, the shapes of CSS, at an extreme level, it really is painting.
As someone who has written a book about SVG, of course, I’ve had the thought: why aren’t people using SVG for this stuff? It’s a far more suitable technology.
But a better take is: go get ’em, sister.
Stretching your wings building things with whatever technology you feel like is a good thing. Get weird with it. Who cares what technologies you are using. I’ll tell ya what, ain’t no project out there that uses some divinely provisioned set of technology. We’re all pushing oval blocks through square holes.
The irony of the CSS drawing thing has never been more acutely spiked than Lynn Fisher drawing the SVG logo in pure CSS in her A Single Div project.
Speaking of CSS drawing… have you seen CSSBattle? It’s so cool. Your job is to re-create CSS drawings with as little HTML and CSS as you possibly can. Code golfing, as it were. I could see someone rolling their eyes at this as well. This isn’t something we need in production. Saving a few bytes isn’t worth inscrutable code. Sure sure. But CSSBattle is perfectly built in that it’s clearly a little battle of front-end code wits, nothing more. It’s fun, and it just might open your eyes to interesting quirks about the front-end that may serve you one day.
I’m terrible at it, by the way, I tried one design and my brain fought with me the whole way, wanting to make the code practical and understandable rather than small. Stupid brain.
Alex Zaworski digs into one of the CSSBattles this week, in a step-by-step way, so you can see the thinking behind whittling down code in this way.
You wanna know the most important reason I think this code trickery and experimenting with weird technology to make things is valuable and important? The developers that I see do this are good, and the developers I see who whine about it are not.
jQuery people… meet Vue.
There is a lot of jQuery out there on the web. Still easily the biggest JavaScript library in usage, ever.
Raymond Camden has written up a really nice guide on porting your jQuery thinking to Vue thinking. For those that know both, at least enough, it almost seems like a weird comparison. But, Raymond does a great job here and finds ways to compare things you might need to do rather apples-to-apples.
A component isn’t a component isn’t a component
Some a big, some are small. Some have logical responsibility, some do not. Some have variations, some do not.
One interesting distinction is how customizable do you want them to be? It makes perfect sense for a component in a design system to not be particularly customizable, because the point of the system is consistency. On the other hand, a design system built for widespread usage and that mostly is there to provide a styling foundation and interactive bits, might deliver highly customized components.
Mattia Astorino digs into all that in his article Making Web Components for Different Contexts.
There are 1,329 ways to include an HTML file in another HTML file.
I’m not sure if I’m exaggerating there or not. It’s one of the oldest build processes needs in the book. Nearly every website on the planet needs it.
I’ve documented a lot of ways here.
I do hope that browsers themselves offer a way to do this eventually. Even if the performance story of it isn’t usually ideal if it was done client-side that way, there are still good reasons for it. JavaScript imports, for example, usually aren’t the best idea for performance, but the fact that they exist natively means that tooling can be built around that standard which brings together tooling stories rather than driving them apart.
Read Split by Jeremey Keith.
LEARN VSCODE: Power User Course (40% – 58% off)
The VSCode.pro course by Awais has helped 5,497+ devs switch to VSCode where everyone learned 200+ VSCode Power User Workflows.
🦄 1,192,519+ Devs use his Shades of Purple theme.
🔥 Signup today for 40% – 58% discount & become a VSCode Power User →