[Robin]: Chris just made The Greatest CSS Tricks Vol. I available via PDF and EPUB and wrote about the process. He walks through a few snags he hit along the way when programmatically creating the eBook version:
All this book-writing stuff was and is an experiment. I like writing on this website in a blog-post-like format where all the content is at URLs and can have interactive content. Being digital, I can control the access and such. It means I can write in a way that is comfortable to me, and maybe-just-maybe, I can be more prolific about it. Maybe I can get a Vol. II done that I already have a ton of ideas for. Maybe I can write some other books I’ve been thinking about. Now I have a system! A place to write, multiple places to publish to, and a way to sell it.
Exciting! If you become an MVP supporter then you can read the whole book online, which is something I’d heartily recommend doing since this isn’t just a book for folks new to web design and CSS. Case in point: I just went back to the chapter all about adding scroll shadows via CSS: that’s where you see a shadow above or below some content, indicating that there’s more stuff that you can scroll to.
Here’s an example:
Honestly, if you’d asked me ten minutes ago how to do something like this then I would’ve thrown a smoke bomb on the floor or I would have pretended to fall asleep just so I wouldn’t have to answer the question.
So, in summary: the book is good.
?
I overheard a lot of hubbub this week on the information superhighway about how Photoshop is coming to the web. This blog post announcing the news is interesting:
WebAssembly and its C++ toolchain Emscripten have been the key to unlocking Photoshop’s ability to come to the web, as it meant that Adobe would not have to start from scratch, but could leverage their existing Photoshop codebase. WebAssembly is a portable binary instruction set shipping in all browsers that was designed as a compilation target for programming languages. This means that applications such as Photoshop that are written in C++ can be ported directly to the web without requiring a rewrite in JavaScript.
The benefit here being, hopefully, that you can just send someone a link and—bam!—there’s a Photoshop document without all the downloading and software management you usually need to do. Pretty neat.
?
I love this sticky definition list demo. With just a few lines of CSS you can turn the following HTML…
<dl>
<dt>A</dt>
<dd>Algeria</dd>
<dd>Angola</dd>
<dt>B</dt>
<dd>Benin</dd>
<dd>Botswana</dd>
<!-- etc. -->
</dl>…which looks like this by default in the browser…
…into something a bit more flashy when you tidy things up and use sticky positioning on the definition terms…
Notice how each letter sticks to the top of the page like that? To me, this feels like HTML and CSS working at their very best here. A tiny bit of knowledge about each and you get a significant improvement over the default styles.
This trick comes from 30 seconds of code which now has a whole section dedicated to CSS and it’s certainly worth checking out. I particularly liked this custom checkbox which feels a whole lot better to me than the default checkbox style and animation that I’m used to.
?
I spotted some news in the latest Safari release about the <dialog> element being supported fully, which is the future way of building modals. The idea is that it’s accessible to screen readers and easy for us developers to style and use.
I saw that Christian Kozalla wrote a great piece about how to use <dialog> today. There’s a lot of good stuff in here about decisions we need to make along the way and one bit of design advice I liked was this:
Is it worthwhile to close the dialog on click outside?
No, it is not. Keep in mind, that we wanted the user to make a decision. We interrupted the user’s flow of browsing the application. We phrased the message clearly and directly, so that it’ll be comprehensible at a glance. And then we allow the user to dismiss everything we have carefully put together with a single click?! I don’t think so.
The problem here being that you can apply a ::backdrop on a native <dialog> element like this…
dialog::backdrop {
background: red;
}…and that becomes the background on which the dialog sits when it pops open. The problem is that because ::backdrop is not part of the DOM, you can’t easily detect when someone clicks it with JavaScript. But! I like Christian’s thoughts above: we’ve interrupted folks and we need them to make a decision that shouldn’t really be easily dismissible by accidentally clicking the background.
Anyway—my first question when I began reading all this was “Okay, heck yes, this is neat and all, but can we actually use the <dialog> element yet?”
Well, back in 2019, Scott O’Hara wrote about the drama with <dialog> and just updated that post with his current thoughts:
<dialog>is almost here. It’s been a long road, and some last bits still need to be worked out in the HTML spec. This is very promising… and there are a lot of people who need some big thank yous in their work to get this over the finish line.But, until the
<dialog>is actually fully delivered, I personally suggest continuing to use trusted and robust custom dialogs. Or, if you polyfill the element itself, you absolutely need to make sure it fully performs as expected for all users.
There are a few remaining browser problems with it and the polyfill seems like a bit of a faff, but ignoring all that for now—I’m still extremely excited by this progress.
?
Lynn Fisher has been adding a lot of new examples to a.singlediv.com this month and all of them are fun and weird.
Inspecting the CSS here, I realize that using psuedo-elements and the background-image CSS property is really how to do this. Real smart stuff.
Sponsor
A developer’s guide to headless commerce
Want to offer an e-commerce experience that’s truly as unique as your business? With Ecwid’s headless commerce options, now you can! Let customers shop and check out on your website without being tied to a specific front end or user interface while still offering Ecwid’s powerful e-commerce know-how. See how headless commerce can transform your business!
Sponsor
Jamstack Community Survey 2021 Results
Which new framework should I learn this year? Is it time to ditch my CMS? What tools should I pick up if I want to scale my site to an audience of millions? The 2021 Jamstack Community Survey is here with answers to those questions and more.
With over 7,000 respondents this year, more than twice as many as our previous year’s survey, there’s a lot of great data to cover.
[Chris]: So much content about Meta this past week. News coverage. Opinions. Jokes. Honestly my heart sank a little when I read the first news, because I knew this onslaught of content was coming around it and it would be impossible to avoid. Why avoid it? Because I just couldn’t care less. It’s a name change for a parent company and it just doesn’t land in any of my give a crap jars. And now look at me, adding to the noise.
But I’ll attempt to do so with some value. Here’s your permission slip not to care either 🎟. Not about Meta, but about anything. News in this industry or any other. We’re buried in news, and it’s not your responsibility to keep up on it all. Keep up with what really matters to you, your tribe, and what you want to. And me, over here, I’m not going to cover things that happen in this web design and development industry because I feel like I have to. If I find myself feeling anywhere near apathetic to the news, I’m just not going to cover it. This isn’t exactly a news org, so that luxury is easy to come by, but hey I figured I’d just let y’all know.
