Projects
A list of my projects and rabbit hole deep-dives.
Table of Contents
Web Projects (25) Permalink
🔭Observatory
A JavaScript Class to simplify managing Mutation Observers.
💸Currency Converter
Simple utility to convert between a couple of different currencies
🔗<url-input>
A Web Component to add a protocol to URL inputs.
📅check-invalid-datetimes
Check HTML and XML files for strings containing "Invalid DateTime" from failed/malformed DateTime formatting.
⭐The /interests Directory
A directory of /interests pages by people across the web
🕦<relative-time>
A Web Component to display a relative time (e.g. "5 minutes ago", "in 2 days"). Uses the built-in Intl.RelativeTimeFormat API.
⏱️<event-countdown>
A Web Component to display an event countdown.
📬<paper-stamp>
A Web Component to display an img as a paper stamp.
📈<svg-sparkline>
A Web Component for building an SVG Sparkline.
🌃<instant-photo>
A Web Component for presenting an img like an instant photograph.
🎨<theme-selector>
A Web Component to set a site-wide theme preference using a native select element, saved to local storage.
🕰️NewBase60 Calculator
Web-based tool for using NewBase60 to convert between binary, decimal, sexagesimal, and date.
🗜clamp() Calculator
Handy little tool for calculating viewport/container-based clamped values for use in CSS
🏄Browser Feature Watch
This page serves as an one-stop shop to keep track of feature support across the major, modern browsers, ordered by level of support. Updated automatically daily.
💬eleventy-cache-webmentions
Cache webmentions using eleventy-fetch and make them available to use in collections, layouts, pages, etc. in Eleventy.
📉<spark-line>
A Web Component to turn an array of integers into a fun little chart.
🎹Pentatonic
Turn any array of integers into a fun little melody using the Web Audio API.
🐋Bowhead
Memorable and maintainable design tokens in SCSS.
🍻OwnYourBeer
An IndieWeb tool to help you pull check-ins from Untappd.
🐦⬛Corvus
My personal Micropub endpoint.
🎧Media Controls
Play native web media and use keyboard controls à la YouTube.
⛈️Weather
Not the most interesting of project titles, this is a personalised weather web app.
🔗Reptile C
My personal (and automatic) URL-shortening service based on Tantek Çelik’s base-60 numbering system, NewBase60. Note: the homepage just redirects to this website, but you can read about how it works here: Generating Automatic ShortURLs with NewBase60.
📐Viewport Dimensions
A very simple tool to measure your viewport dimensions.
💻My Featured Pens on CodePen
Pens of mine that were featured on CodePen.
Self-Hosted (9) Permalink
auth.chrisburnell.com
Personal authentication/authorisation and OIDC provider powered by Authelia
drop.chrisburnell.com
A file server powered by copyparty
git.chrisburnell.com
ntfy.chrisburnell.com
A ntfy instance used for sending push notifications
rss.chrisburnell.com
A feed aggregator powered by FreshRSS
pastebin.chrisburnell.com
A pastebin
instance powered by Opengist (like Git, but for one file/code snippet at a time)
speedlify.chrisburnell.com
Periodic website performance measuring powered by Speedlify
status.chrisburnell.com
Simple uptime monitoring powered by website-monitor by Adam Newbold
fediverse.repc.co
My personal Mastodon instance
Personal Projects (7) Permalink
⏱️Stopwatch
Single-page app stopwatch that uses local storage to persist your stopwatch(es).
⏰Timer
Single-page app timer that uses local storage to persist your timer(s) and can connect to ntfy to send notifications.
🦎Fëonir’s Workshop
Another D&D-related labour of love, this time a general site for all things D&D, including the draft of my new 12-chapter campaign for 5th Edition.
🔬Micrathene
Super Simple PWA for building Microlite20 characters.
🐉Waterdeep, A Curated Guide
I’m the Game Master for a D&D campaign of Waterdeep: Dragon Heist. This is a chronicle of my players’ time spent in Waterdeep.
🗡️BloodBuilder
Super Simple PWA for 1e Pathfinder Pure Core Classes.
🌠GIFs on GIFs on GIFs
A curated list of excellent GIFs.
chrisburnell.com in the past (3) Permalink
🐓Version 3
The third version of my personal site where I switched over to using Eleventy and got hooked on working on my website!
🐣Version 2
The second version of my personal site that I used for over six years and laid the groundwork and mentality for the next version.
🥚Version 1
The first-ever version of my personal site. Things have changed slightly since 2008.
