? Links from around the web
Diana Smith has made another fantastic painting in CSS, this time called Lace. These wondrous examples of browser art are 100% HTML and CSS and are painstakingly edited by hand:
Also the fun part of this is how the paintings breaks down in different browsers. When I opened up this site in my RSS reader’s browser, this is the spooky Halloween version I found instead:
Here’s a wonderful reminder from Stephanie Stimac about web performance. She writes about a recent experience of moving to an area with an unreliable network and how this caused problems for her as she tried to figure out what was happening during a power blackout.
There were 4.6MB of unused code being downloaded on a page whose main and only content, apart from a sign in button, is a form to submit your address.
Stefanie’s story is a good although somewhat frustrating reminder that performance and accessibility are not features, they’re the baseline.
The Verge made a fun list of old scroll bars and the problems or advantages they had over older varieties (my favorite of the bunch are the Xerox Star, Lisa OS, and System 1 scroll bars).
Brad Frost wrote about design systems and a governance process that worked for a couple of his projects:
Product teams’ primary concern is getting work out the door, not to uphold the integrity of the design system. Teams get creative and will find ways of getting things done, which may involve hacking styles, creating a slew of one-off components, or abandoning the design system altogether. As Jeff Goldblum quips in Jurassic Park, “Life, uh, finds a way.”
Brad then shows a customer journey showing each step in the process of requesting, designing and then building a component that’s added to a system. Documenting this process might be useful for your own design system. (I think I’m going to steal this idea for my own team, too!)
? News from the blog!
The Trick to Animating the Dot on the Letter “i”
Here’s an equal part bonkers and brilliant experiment from Ali Churcher where she looks at how to combine the Turkish letter “ı” and the period to make an animated “i” character like this:
This is an interesting experiment, and although it might be recommended to take the SVG animation route with this sort of thing it’s noble to come up with an idea as wild as this one! Churcher also digs into how to ensure that the markup for this experiment would be accessible with aria-roles, too:
<div role=img aria-label="Ping">
<p role="presentation">P
<span>.</span>
<span>ı</span>
ng</p>
</div>A Business Case for Dropping Internet Explorer
In this post Ollie Williams looks at all the features that are missing from IE and how supporting it can cause pain for us developers and designers, but also how supporting it can harm our end users as well. Ollie writes:
Let’s dig a little deeper into the features we have today and how they are affected by IE11. Perhaps most notable of all, after decades of hacking layouts on the web, we finally have CSS grid, which massively simplifies responsive layout. Together with CSS custom properties, object-fit, display: contents and intrinsic sizing, they’re all examples of useful CSS features that are likely to leave a website looking broken if they’re not supported. We’ve had some major additions to CSS over the last five years. It’s the cumulative weight of so many things that undermines IE as much as one killer feature.
Ollie brings up a neat point about performance and how, by providing polyfills for these features to support IE11, we’re effectively harming everyone that uses a modern browser, too.
Working with Fusebox and React
Fusebox is an alternative to webpack but one that requires zero configuration and, in this post, Kingsley Silas explores how to get it all up and running with React. The other nifty thing about Fusebox is that it support Typescript out of the box so you don’t need to setup anything to get that up and running:
All in all, FuseBox is an interesting alternative to webpack for all your application bundling needs. As we saw, it offers the same sort of power that we all tend to like about webpack, but with a way less complicated configuration process that makes it much easier to get up and running, thanks to built-in Typescript support, performance considerations, and a task runner that’s designed to take advantage of the FuseBox API.
Some Things You Oughta Know When Working with Viewport Units
David Chanin made a neat graphic that shows some of the problems you might come across if you want to place an element at the bottom of the screen with viewport units.
This problem has come back to bite me a few times in projects and I always tend to forget that we don’t really have great tools to deal with this problem today. In fact, as Chris mentions in the post, this problem was also noted in our round up of things we’d like to see in CSS this year.
Netlify
A big shout out to Netlify for sponsoring this week’s newsletter! We use and love Netlify around here at CSS-Tricks and have used it on some of our own projects. It’s super fast to set up a new site with a GitHub workflow and deploy updates when commits are pushed to your production branch — including content edits using the Git-backed Netlify CMS.
Best yet, there’s a free tier. Try it now and deploy a site in seconds. 🚀