Did You Know the Ordered List Element Has Start and Reversed Attributes?
24.3.2020
I sure didn't! Tomek Sułkowsi shows how we can reverse the numbering of ordered lists with a simple HTML attribute:
<ol reversed<liApple</li<liBanana</li<liPear</li</ol
CodePen Embed Fallback
And the start attribute can be added to begin the list at a number other...
Emojis as Favicons
24.3.2020
Lea Verou had a dang genius idea to use an emoji as a favicon. The idea only recently possible as browsers have started supporting SVG for favicons. Chuck an emoji inside an SVG <text element and use that as the favicon.
Now that all modern browsers support SVG favicons, here's how...
Indicating Scroll Position on a Page With CSS
24.3.2020
Scrolling is something we all know and do on the web to the extent that it’s an expectation or perhaps even a habit, like brushing our teeth. That’s probably why we don’t put too much thought into designing the scrolling experience — it’s a well-known basic function. In fact, the popular “there...
Performance Links
24.3.2020
I've had a number of browser tabs open to articles all related to web performance and gosh darn it if blogging them is a way for me get some closure. They are all good!
Manuel Matuzovic, Why 543 KB keep me up at night:
Yes, I know, it depends. 543 KB aren't always bad, but on that specific page...
Animated Custom Cursor Effects
24.3.2020
Some ideas for interactive custom cursor animations using SVG filters.
Animated Custom Cursor Effects was written by Mary Lou and published on Codrops
Different Favicon for Development
24.3.2020
I bet a lot of us tend to have the production website and the development website up simultaneously a lot. It's almost a developer cliché at this point to make some local change, refresh, refresh, refresh, refresh, and just not see the change, only to discover you were looking at the production...
CSS :nth-of-class selector
23.3.2020
That's not a thing.
But it kinda is!
Bram covers how frustrating .bar:nth-child(2) is. It's not "select the second element of class .bar." It's "select the second element if it also has the class .bar." The good news? There is a real selector that does the former:
:nth-child(2 of .bar) { }
Safari...
Teamstack: Easy Automation of Identity Management (Sponsored)
23.3.2020
Access management can be a bit of a nightmare, especially when we realize that we rely on a number of different, independent services that power our organizations. Many businesses use Gmail for email, Google Docs for documents, Slack for communication, GitHub for their codebase, etc. Yet each...
Building a Real-Time Chat App with React and Firebase
23.3.2020
In this article, we’ll cover key concepts for authenticating a user with Firebase in a real-time chat application. We’ll integrate third-party auth providers (e.g. Google, Twitter and GitHub) and, once users are signed in, we’ll learn how to store user chat data in the Firebase Realtime Database...
CSS Can Influence Screenreaders
23.3.2020
Ben Myers covers some clear examples of where CSS totally changes what some screen readers announce. For example, some screenreader will see text-transform: uppercase; on a button label that says "Add" and read it like an abbreviation, "A.D.D."
These cases of CSS messing with our screenreader...
Flexible Repeating SVG Masks
22.3.2020
Tyler Gaw reminds us that mask-image can repeat, resize, and move just like background-image does, which is fun to combine and play with. I could see it being a fun option for an <hr, like Sara is doing.
CodePen Embed Fallback
Direct Link to Article — Permalink… Read article...
Auto-Archival
20.3.2020
I'm sure most of us have used the ol' Wayback Machine to access some site that's gone offline. I don't actually know how it decides what sites to archive and when, but you can tell it to save pages. There is UI for it right on its homepage.
Also, there is a little trick...
Typing...