# Erik Runyon Home of Erik Runyon. Technical Director for the University of Notre Dame Web Team. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## CSS random() DevFeed: [CSS random()]() Original publisher: [Read original article]() Author: Erik Runyon Published: 2025-10-08T00:00:00Z Content type: article Language: en Sources: [Erik Runyon]() Topics: [CSS](), [WebKit](), [Front end](), [JavaScript]() Tags: [css](), [frontend](), [javascript](), [safari](), [web-development]() ### AI overview The article examines Safari's non-standard CSS random() function, describing its random(min, max, step) syntax and current limitations. It explains that the function supports numeric and color contexts but not selectors or string values, and discusses possible uses such as random dimensions, collection items, images, and displayed random numbers. ### Source excerpt 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 requir ## Digital Collegium 2025: Recent and Forthcoming HTML and CSS Features DevFeed: [Digital Collegium 2025: Recent and Forthcoming HTML and CSS Features]() Original publisher: [Read original article]() Author: Erik Runyon Published: 2025-09-29T00:00:00Z Content type: article Language: en Sources: [Erik Runyon]() Topics: [Web platform](), [CSS](), [HTML](), [Front end]() Tags: [2025](), [conference](), [css](), [frontend](), [html](), [presentation](), [web-development](), [web-platform]() ### AI overview A Digital Collegium 2025 presentation overviewing recent and forthcoming web platform additions, with a focus on HTML and CSS. It discusses their syntax and practical applications in higher education. ### Source excerpt 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 Conference presentation details Presentation/Code Links Interop 2025 Dashboard 2026 interop proposals Web Platform Baseline Web Platform Status CSS Gap Decorations playground Keeping up with new features New to the web platform Stephanie Eckles Ahmad Shadeed Kevin Powell (YouTube) Frontend Master ## HighEdWeb 2024: Recent and Forthcoming HTML and CSS Features DevFeed: [HighEdWeb 2024: Recent and Forthcoming HTML and CSS Features]() Original publisher: [Read original article]() Author: Erik Runyon Published: 2024-09-23T00:00:00Z Content type: article Language: en Sources: [Erik Runyon]() Topics: [CSS](), [Web platform](), [HTML](), [modern web development]() Tags: [conference](), [css](), [html](), [interop](), [web](), [web-development](), [web-platform]() ### AI overview A HighEdWeb 2024 presentation overviewing recent and forthcoming HTML and CSS features, including CSS layers, container queries, subgrid, and nesting. It also discusses syntax, real-world use cases, and upcoming CSS developments. ### Source excerpt 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 Conference presentation details Slides Code Web Platform Info Interop 2024 Dashboard Web Platform Baseline Web Platform Status Keeping up with new features New to the web platform Stephanie Eckles Ahmad Shadeed Kevin Powell (YouTube) ## From Tweetbot and Twitter to Mastodon and Ivory DevFeed: [From Tweetbot and Twitter to Mastodon and Ivory]() Original publisher: [Read original article]() Author: Erik Runyon Published: 2023-01-26T00:00:00Z Content type: opinion Language: en Sources: [Erik Runyon]() Topics: [Mastodon](), [X (Twitter)](), [dev-tools]() Tags: [apps](), [communications](), [dev-tools](), [social-media](), [twitter]() ### AI overview The author explains why Tweetbot had been their preferred way to use Twitter and describes moving to Mastodon after Tweetbot disappeared. Access to Tapbots' Ivory has made the author feel they no longer miss Twitter, although they hope for a Mac version of Ivory. ### Source excerpt 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 DevFeed: [State of CSS 2022]() Original publisher: [Read original article]() Author: Erik Runyon Published: 2022-05-17T00:00:00Z Content type: article Language: en Sources: [Erik Runyon]() Topics: [CSS](), [Web Development](), [Google]() Tags: [css](), [google](), [google-i-o](), [overview](), [snippet](), [technical](), [web](), [web-development]() ### AI overview An overview of current and upcoming CSS features, presented by Adam Argyle at Google I/O 2022. ### Source excerpt 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 DevFeed: [Connecting to the PassKit API with Ruby]() Original publisher: [Read original article]() Author: Erik Runyon Published: 2022-02-07T00:00:00Z Content type: tutorial Language: en Sources: [Erik Runyon]() Topics: [API](), [Ruby](), [JSON Web Tokens](), [payload](), [Authorization]() Tags: [api](), [authorization](), [how-to](), [jwt](), [payload](), [rest](), [ruby](), [web-development]() ### AI overview This tutorial demonstrates how to connect to the PassKit API using Ruby. It explains generating a JWT payload and token, then sending the token in an Authorization header with HTTParty to access and modify API endpoints. ### Source excerpt 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 ## Why Web Performance Results Need Context Beyond Simple Numbers DevFeed: [Why Web Performance Results Need Context Beyond Simple Numbers]() Original publisher: [Read original article]() Author: Erik Runyon Published: 2021-10-06T00:00:00Z Content type: opinion Language: en Sources: [Erik Runyon]() Topics: [Web](), [Latency]() Tags: [debug](), [performance](), [snippet](), [synthetic](), [test](), [tools](), [web-development](), [web-performance]() ### AI overview The article argues that web performance results need context and that synthetic or lab-based tools should be understood as controlled tools for testing, debugging, diagnosis, optimization, prediction, and regression detection rather than precise measures of real-world site performance. ### Source excerpt 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 DevFeed: [RSS and XSL Content-Type Requirement]() Original publisher: [Read original article]() Author: Erik Runyon Published: 2021-05-19T00:00:00Z Content type: tutorial Language: en Sources: [Erik Runyon]() Topics: [RSS Feed](), [RSS](), [Atom](), [XML](), [Rails](), [User Experience]() Tags: [experience](), [news](), [rails](), [rss](), [user-experience](), [web-development](), [xml]() ### AI overview This article explains that Atom and RSS feeds intended to display with XSLT should be served with the Content-Type text/xml; charset=utf-8 rather than their feed-specific application types. The author reports that changing the response header in a Rails application enabled the formatting and styles. ### Source excerpt 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 DevFeed: [Higher ed's slow page speed epidemic]() Original publisher: [Read original article]() Author: Erik Runyon Published: 2021-03-04T00:00:00Z Content type: opinion Language: en Sources: [Erik Runyon]() Topics: [Website](), [Web Development](), [Code](), [Frameworks](), [Image](), [JavaScript]() Tags: [code](), [css](), [deferred](), [efficiency](), [frameworks](), [images](), [javascript](), [snippet](), [speed](), [web-development]() ### AI overview The article discusses slow page performance on higher-education homepages and argues that agencies should help prevent it. It recommends optimizing code, reconsidering frameworks, sizing and deferring images, and using CSS and JavaScript efficiently. ### Source excerpt 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