Stef's Website 🦖
Welcome!
You can email me at stef@sril.email or find me on LinkedIn, GitHub and Threads.
Writing ✍️
Chakra UI is still great in 2024
Using unsafe cast in TypeBox to convert strings to template string literals
Understanding React as a system - Part 1
Speedy builds with Docker Layer Caching
Talks 🗣
5 Things I Learned About Software Engineering From Watching Art Restoration Videos
Software Projects 🌱
promise-settled-aggregate
Await an array of promises to be settled, then reject with an AggregateError upon failure, or resolve with an array of values upon success.
react-promise-state-hook
A simple React hook that provides state for async actions.
renditions
JavaScript modules for implementing W3C-standard responsive images.
Packages:
letter-press
Print GitHub Markdown to PDF using headless Chrome. 💌
outerspace
Preserve whitespace surrounding expressions in a template string.
content migrations at Condé Nast
Flyway is a system for migrating content from an existing CMS into Condé Nast's CMS. Content can be defined as articles, authors, categories, galleries, videos and images.
We implemented a "self-service" model to allow engineers to migrate content into our CMS without any intervention from the core team.
This system was used to migrate Vogue and GQ websites managed by 10 different market teams onto our web platform managed in London.
design systems at Condé Nast
“A unified, scalable, digital design language for Condé Nast brands.”
Atelier is a React styled-components library created for Condé Nast's brand sites. The library supports multiple brand identities and is used by a handful of different web applications.
real-time shock wave simulation 💥
My research project in the final year of my degree was around simulating shock waves in real time using the Unity game engine. This project was largely considered to be a failure. You can read more about it in the Technical Report doc.