Web Dev Links: Craft 3 Impressions, “Delightful” User Experiences, Improving CSS Gradients & more

Three years in the making, Craft 3 is a massive update to one of my favorite content management systems, and I’ve been looking forward to it ever since it was first announced. But even though I like being on the cutting edge, I held off on updating when it was released back in April because Craft 3 introduced some changes (e.g., reliance on Composer) that made it more than the usual easy-peasy one-click update.

Craft’s documentation is thorough, but I did run into some bumps when I first began updating Opus. Which is why I like working on virtual machines: if you screw up or miss a step, it’s easy enough to destroy and rebuild, assuming you made a backup beforehand. After several false starts, I finally created a fresh install of Craft 2 on a brand new (and faster, more powerful) server, imported my database (which was a bit nerve-wracking as command line isn’t my forte), and then upgraded that to Craft 3.

While this particular process was more involved than I would’ve liked, it went fairly smoothly. (I was glad to see that the Composer requirement was ultimately removed; it was often a source of headaches during my earlier attempts.) Most of the immediate post-upgrade issues I encountered were permissions-related, which were more annoying than anything else.

So far, Craft 3 has been pretty impressive if only because it didn’t break anything (and I don’t mean that as faint praise). I had to make some adjustments, such as removing now-deprecated code from my templates — Craft’s documentation has an exhaustive list of everything that’s changed in v3 — but arguably, the biggest difference so far has been Craft 3’s control panel interface.

For Craft 3, the control panel was reorganized and received a facelift. The reorganization wasn’t major, and for the most part, makes a lot of sense; the new “Utilities” section, for instance, is a godsend when debugging templates. As for the facelift, that was more underwhelming.

While not a complete redesign, the various tweaks and changes left Craft 3’s control panel feeling less polished and refined. Craft 3’s control panel makes better overall use of space but some of the type and color changes, such as the right sidebar’s shade of blue, bugged me. (Compare the Craft 3 control panel and Craft 2 control panel for yourself.)

This is where Double Secret Agency’s “Control Panel CSS” plugin came in handy. As the name implies, it allows you to inject custom CSS into the control panel to modify its look and feel. This GitHub issue lists a number of recommended changes, as well as a stylesheet to use with the plugin. Using that stylesheet as a base, I added some of my own customizations, and now the Craft 3 control panel looks and feels less jarring and more pleasant and polished (to my eyes, anyway).

Now, on to some other topics…

Jeffrey Zeldman writes that web developers are becoming too fascinated with complexity and are forgetting the benefits of simplicity. “[M]any designers and developers I speak with would rather dance naked in public than admit to posting a site built with hand-coded, progressively enhanced HTML, CSS, and JavaScript they understand and wrote themselves. For them, it’s a matter of job security and viability. There’s almost a fear that if you haven’t mastered a dozen new frameworks and tools each year (and by mastered, I mean used), you’re slipping behind into irrelevancy.”

Speaking of simplicity, I love this tweet by Erika Hall: “Talking about creating ‘delightful’ user experiences is actually user-hostile when it wrongly presumes that your customer wants to be emotionally involved with your service at all. Fast and invisible are often the better parts of delight.”

Here are some good methods for making the “card” component more accessible. “Other components, like the ubiquitous but multivarious card, do not have a standard to follow. There’s no <card> element, nor an ‘ARIA card’ design pattern. These are some of the more interesting components to work on. Each potential barrier to inclusion needs to be identified and addressed in turn.” Via CSS Layout News.

I love a good gradient, and I love them even more when they have easing functions. These smooth out the edges of the color stops, resulting in a smoother-looking gradient. There’s currently a CSSWG “easing function” proposal but in the meantime, here’s a PostCSS plugin for generating something equivalent.

If you’ve ever made a business website, then you’ve probably embedded a Google map somewhere on it. There are a lot of ways to customize a Google map’s design, including hiding unnecessary elements, changing colors, and removing landscape features.

Just as the name suggests, 30 Seconds of CSS is a “curated collection of useful CSS snippets you can understand in 30 seconds or less.” Via SitePoint’s Front-end newsletter.

Finally, speaking of Craft, Ryan Irelan recently launched CraftQuest. The site hosts a number of videos and livestreams covering a host of Craft-related development topics (e.g., installing Craft, working with templates, building an e-commerce site, working with Composer), all for a monthly fee.