Erik Runyon

CSS random()

Wed, 08 Oct 2025 00:00:00 +0000

Safari recently implemented a non-standard (yet?) CSS random() function (currently only in WebKit, and not yet part of any CSS specification). Since many recent CSS features are directly aimed at replacing common JavaScript functionality, I expected this function to do the same. While it has some neat use cases, it doesn’t cover most of the scenarios where I currently use JavaScript’s Math.random().

What it does

The basic format of the function follows the pattern “random(min, max, step)”. For instance, if you want to assign an element a random height between 50px and 200px, you would use “height: random(50px, 200px)”. You can also include a “step” value like so “height: random(50px, 200px, 50px)” where the values will always be a multiple of 50. You can see more examples on the WebKit post “Rolling the Dice with CSS random()” and Frontend Masters “Very Early Playing with random() in CSS”.

What it doesn’t

Currently, random() can only be used in numeric or color contexts — not in selectors or string values like URLs or text content. I have two primary use cases, and one just for fun. All three are marked-up as I would expect to use them if they were supported in the CodePen below.

Random items from a collection

A common pattern on many Notre Dame sites would be to show a random item from a collection. These could be content such as faculty spotlights, recent publications, or student profiles. We always know how many we’re choosing from, and they’re always contained to a specific section. So being able to use CSS to show a random child using “:nth-child” would be fantastic.

Random images

Less common is showing random images. This could be in a feature area on the homepage, or even a decorative background image. This would require the ability to concatenate a string with the random number.

Random numbers

A “just for fun” feature would be displaying the value from the random() function. My initial thought would be a CSS only dice roller. The demo in the pen would require being able to display the random value in an “::after” pseudo element.

See the Pen Wishlist - Random Content with CSS random() by Erik Runyon (@erunyon) on CodePen.

While none of these examples are difficult to accomplish with JavaScript, it’s always nice use CSS alone when possible. What use cases do you have for CSS random() that aren’t currently supported.

Digital Collegium 2025

Mon, 29 Sep 2025 00:00:00 +0000

My presentation for Digital Collegium 2025 was an overview of many recent and forthcoming additions to the web platform, specifically HTML and CSS.

Description

Roll for sanity: Surviving the ever-expanding web feature bestiary

Are you, brave front-end adventurer, feeling your sanity slipping as the Ever-Expanding Web Feature Bestiary grows with each browser update? Have you encountered strange and powerful creatures like “popovers” and “functions” and wondered how to tame them?

Join us on this perilous quest as we delve into the depths of the latest web platform additions. We will examine these fearsome beasts, dissecting their syntax and revealing their practical applications in the realm of higher ed. We’ll learn to harness their power for real-world encounters, and even glimpse into the future, where new and even more formidable creatures lurk.

Prepare your character sheets, sharpen your coding blades and roll for sanity as we navigate this challenging and ever-evolving landscape. Will you emerge victorious, a master of the modern web, or will the Bestiary claim your mind?

Presentation

Keeping up with new features

Lighting an Ikea Billy Bookcase

Sun, 13 Apr 2025 00:00:00 +0000

This past December I had the opportunity to put together my first proper home office. One aspect of the office is a bookshelf to corral all my books and memorabilia that up to this point have been scattered around the house. For this project I utilized three Ikea Billy bookcases, but to make the project really shine, I added LED lighting. Let’s go over the products and process I followed to set this up.

TL;DR

LED and wire channels = clean finish
Cable management = worth the effort
Splicing wires = most time-consuming
End result = cozy, nerd-approved display

Shopping List

Tools needed

Electric drill for drilling wiring holes in the back of the case and attaching difuser channel
Hacksaw for cutting difuser channel
Tin-snips for cutting cable channel
Screwdriver and allen wrenches

Two of the three shelves assembled and ready for wiring

The HÖGBO doors come with inserts to hide the contents, but since the whole point here is to enjoy the display, I left those off. The reason for the doors is to keep everything inside relatively dust-free. These doors are made for the Billy cases, so they’re relatively easy to install.

Step 1: LED channel

LED diffuser channel installed on underside of shelf

A big priority for this project was to make the lighting look as clean as possible. So for step one I cut and installed the channel diffuser along the front lip of shelf. The diffuser channel is alumnium, so I used a hacksaw to cut to length. Luckily there was enough space between the shelf mounts and the front lip. To allow space for the wiring to run from the diffuser channel to the cable channel (see step #2), I cut a small notch.

Diffuser channel with notch for wiring

To connect the LED strip to the wiring I used 2-pin transparent connectors. This way the LED strip was only running along the front of the shelf, and the wiring could then do a 90-degree turn to head out the back of the case. If you look close, you would be able to see the connectors at the right end of the LED strip near the wall of the shelf. But I made sure these connections were at the door end of my office, so they’re less noticeable.

Step 2: Cable channel

Diffuser and cable channel installed

The cable channel is added to the underside of each shelf to hide the wiring that runs from the LED strips to the back of the shelf where the wiring is joined. For this I drilled a hole just large enough for the wiring. This is a peel-and-stick product, so installation was simply a matter of cutting the plastic channel to fit, and then sticking it to the underside of the shelf. NOTE: Due to how I ran the wiring through the back of the shelf, it does not allow for future adjustment to the height of the shelves. It’s not an issue in my case since I was going for a symmetrical, even-height look.

Step 3: Connecting the wires

The LED kit I purchased came with two 5-meter (16.4 ft) LED strips. The included controller had two outputs, one for each strip. Since I’m lighting nine separate shelves and the top of the cases, this required quite a bit of wire splicing. But since all of the cables were exiting through the back of the cases, it was easy to hide the mess. Wiring was easily the most labor intensive part of the project as there was quite a bit of experimentation and testing before I found a solution that I liked and worked well.

One example of splicing the wires running to each strip

Step 4: Finish adding light strips

All wiring connected

I forgot to take some intermittent shots at this juncture. I installed LED strips along the underside of each shelf for an even glow across all levels. Connecting the light strips was probably the easiest and fastest step in the process. As you can see in the image above, none of the red/black wiring is visible. All that’s left is to finish attaching the top LED strip. After that comes the fun part… DECORATING!

The finished product

My daughter was a big help in this final step. Much to my wife’s delight, we gathered all of the books and trinkets and began the organizing process. We attempted to organize by theme and genre as much as possible. But given that it’s a mad collection of various books, 80’s toys, and general nerddom trinkets, it was at times a challenge. And I have been adding and removing items as I’ve found more stuff stashed away in boxes. As soon as I can find my original NES, it will joining the collection (I know it’s in a box in the basement somewhere). The end result is a great backdrop for my new home office.

Lit and decorated (photographed at 100% brightness)

The lighting kit is dimmable which is great. I almost never run at full brightness. In the morning, I go with 10% brightness. Later in the day I’ll bump up to 25-50%. It just depends on time of day, weather (light coming in through the windows), and general mood.

If you have a use-case for lighted shelves, I highly recommend this project. It really makes the space feel cozy. However, if you’re not comfortable working with low-voltage wiring, I would recommend finding light strips that are already cut to length.

HighEdWeb 2024

Mon, 23 Sep 2024 00:00:00 +0000

My presentation for HighEdWeb 2024 was an overview of many recent and forthcoming additions to the web platform, specifically HTML and CSS.

Description

CSS is Awesome

Over the past few years, CSS has been gaining features at a rate that is almost impossible to follow. Features that once required pre-processors are now native to the platform. Variables? Check. Nesting? Check. And now there’s even whispers of mixins.

During this presentation we will examine many of the latest features added to CSS including layers, container queries, subgrid, nesting, and probably the dozens of others added since this presentation was submitted. We will discuss the syntax and look at real-world use-cases. We will also briefly cover what’s on the horizon for CSS.

Presentation Links

Web Platform Info

Keeping up with new features

A Tweetbot Shaped Hole

Thu, 26 Jan 2023 00:00:00 +0000

To the best of my memory Tweetbot has been my window into Twitter since pretty close to when it was released. I open Twitter’s web interface from time to time when I had to, but it has not been my primary way to use the service for well over a decade. There are multiple reasons I was fine with living as a second-class Twitter citizen. Primarily no ads, no algorithmic timeline, and syncing between mobile/desktop clients.

I use a three monitor setup at both home and the office. The left is always my laptop, and the right is a vertical 24-inch monitor. That right monitor is used for two purposes.

A browser with dev-tools docked to the bottom (the extra vertical space is quite nice).
All my social/communications apps. This typically includes Slack, Messages, Discord, and up until recently Tweetbot. Having them all together on one screen (and covered by a browser the majority of the time) cuts down on distractions coming from any of them.

However, for the last two weeks there has been no Tweetbot. It’s former home now a glaring absence showing the desktop below. And gone with it is my consumption of Twitter. To say I dislike the Twitter web interface and native apps is an understatement. So for the past two weeks I’ve been exclusively on Mastodon. And since I’ve gained access to Ivory (by Tapbots) I’ve found I don’t miss Twitter. The community on Mastodon has been growing rapidly, so if you’ve been putting off trying it out, I would encourage you to at least set up an account and start lurking.

So like many others, outside of posting to my teams work account, I’m done with Twitter. The new management have made it place I no longer want or need to be.

So if you need me, I’ll be over on webperf.social Mastodon. And hopefully soon there will be a Mac version of Ivory to take up residence in that glaring Tweetbot shaped hole.

State of CSS 2022

Tue, 17 May 2022 00:00:00 +0000

A great overview of all the latest and upcoming CSS features. Presented by Adam Argyle at Google I/O ‘22.

Connecting to the PassKit API with Ruby

Mon, 07 Feb 2022 00:00:00 +0000

We were recently testing PassKit as a way of managing membership cards for giving societies. Passkit is very up-front that they are not a CRM and strongly suggest using their API for integrating with outside systems, or for editing pretty much any data. To kick the tires, we set up some very basic scripts to connect to the Passkit API.

A REST example can be found on their docs. The example below shows how to get a programs’s info using Ruby.

The process consists of two steps:

Generate the payload and token using the jwt gem.
Connect to the API endpoint using HTTParty passing the token value with the “Authorization” header.

That’s it! From there you can modify the HTTParty path for whatever endpoint you need. Just be sure to adjust the verb and “body” in the call accordingly.

PassKit API docs

My Challenge to the Web Performance Community

Wed, 06 Oct 2021 00:00:00 +0000

Philip Walton on the difficulties the webperf community faces when discussing web performance. Simple numbers don’t cut it. We need to provide context when discussing performance results.

What concerns me about this practice is that it glosses over a lot of important nuance, and it perpetuates the idea that synthetic or lab-based tools (like Lighthouse, WebPageTest, and many others) are genuine and precise assessments of a site’s actual, real-world performance—rather than what they are: tools to test, debug, diagnose, optimize, and predict performance or detect regressions under a set of controlled conditions.

I’m definitely guilty of the simplicity he discusses. Thanks for the challenge Philip.

RSS and XSL Content-Type Requirement

Wed, 19 May 2021 00:00:00 +0000

We’ve provided Atom/RSS feeds for News and Events in our custom CMS at Notre Dame for well over a decade. However, if a visitor ended up on the url they were greeted with an unhelpful screen of XML. I decided to remedy this by appying some XSLT and styles to improve the user experience. However, even after reviewing several tutorials, I couldn’t get it to work.

I was sure I had the templates and markup configured correctly. I even tested outside of the system using very basic test files. I finally started to question whether the Application-Type was correct. One tutorial mentioned making sure you served the correct type, but didn’t go into detail as to what the type should be. Since the very beginning, we would serve our Atom/RSS feeds with application/atom+xml; charset=utf-8 and application/rss+xml; charset=utf-8 respectively. What I discovered is that the Application-Type instead should be text/xml; charset=utf-8. Once that was set in my test files everything started to work. Going back the Rails application and setting Application-Type in the “response.headers” and bingo, glorious formatting and styles.

I don’t expect many users to end up seeing the results of this change. But for those that do, they’ll have an explanation about what a feed is as well as links to more resources. So much better than a screen of XML.

Higher ed's slow page speed epidemic

Thu, 04 Mar 2021 00:00:00 +0000

Joel Goodman of Bravery Media on the current state of HigherEd homepages.

Regardless, it’s an agency’s responsibility to do as much as possible to make that website a success when it goes live. Do no harm. Slow websites only do harm. Code needs to be optimized, frameworks need to be ditched, images need to be properly sized and deferred, CSS and JavaScript need to be used with efficiency in mind.

Indeed