damianwalshFeb 10
Musicology Hippo

I'm building a website about a set of historical events. I want to create a basic timeline. All I need it to do is show different overlapping date ranges and individual events with bars and points (in this case, to compare reigns of Popes, Kings, and Bishops and associated events). It would be nice if it were lightweight and accessible with few or no dependencies; the purer the HTML and CSS, the better.

I'm building with #11ty; if I'm able to use a NodeJS library to parse data and make it more static for the client (via a shortcode), that would be great.

I've tried using Vis.JS, but it it is a rather heavy library and is trying too hard to be smart--it's resizing some of the shorter time periods, which means the labels get hiddden. I've also tried Timesheet.js, which is the aesthetic I'm going for, but it seems to not work with long periods of time and struggles to be responsive.

Example of the genre I'm looking for for: https://commons.wikimedia.org/wiki/File:PriestleyChart.gif

#askFedi #webDev #digitalHumanities

File:PriestleyChart.gif - Wikimedia Commons

Feb 9 at 10:08pmWeb
Show threadMusicology HippoFeb 12

In the end, I ended up just coding it myself in pure CSS/HTML. Of course, it took less time just to code it than I spent trying to find an existing solution... (CSS is awesome!).

Essentially it's a list and the elements have widths representing the time periods and borders to make the bars. Of course, the dates are in text to make it accessible. I'll share it when I have time to make a write-up.

Show threadMusicology HippoMar 17

Blog post on how I did made a historical timeline with #pureCSS and HTML, along with an #11ty shortcode:

https://micah.torcellini.org/2026/03/17/simple-timeline/

Simple Pure CSS/HTML Timeline (with Extra Eleventy Integration)

Micah Torcellini's personal Website

Show threadAaron Brick — אהרן בריקMar 21
@MusicologyHippo Very cool, nice job!
Show threadDaniel JohnsonFeb 12

@MusicologyHippo There's nothing like a finely-tuned, hand-coded static website. I built my own site generator from PHP which I run locally. It turns markdown into teeny HTML files with zero Javascript and one CSS file. Pages on my rebuilt site load in milliseconds, and don't shift while you're trying to read the page. And if you view source, it's clear what each element on the page does.

Are you at a point where you can share the URL of your site?

Show threadMusicology HippoFeb 12
@ossobuffo Sure--there's a lot of fine-tuning left to do but since I'm doing the first presentation tomorrow, I might as well: https://micah.torcellini.org/philip/
Philip the Chancellor: Music and Poetry on Virtue and Humanity

Micah Torcellini's personal Website

Show threadMusicology HippoFeb 12
@ossobuffo A couple things I still need to do:
- Responsive images; music should use <picture> to provide different aspect ratios for different screen sizes and obviously the map needs multiple sizes.
- Miscellaneous formatting...
Show threadDaniel JohnsonFeb 12
@MusicologyHippo I love the cleaned-up “excerpt” sign you created!
Show threadMusicology HippoFeb 12
@ossobuffo It was interesting to do. LilyPond only supports a subset of SVG commands. I put it through SVGO to make it easier to work with, which put a bunch of commands that LilyPond doesn't know. In the end, I ended up learning a bunch of things about SVG syntax that I didn't previously know... (and I had to not use SVGO, which means it's a slightly-appalling LY file).
Show threadDaniel JohnsonFeb 12

@MusicologyHippo The example I sent you was created in Inkscape but then hand-hacked for simplicity. I also only use the path tools in Inkscape, which only generated <path> elements; you may have been using some of the “fancier” tools.

If you send me your “apalling” stuff I can probably make it less apalling. In return I get a new glyph I could theoretically use (but I can't imagine a situation in which it would be useful). Alternately, I could generate a one-glyph font for you using FontForge which would dramatically clean up your Lilypond source code.

Show threadMusicology HippoFeb 17
@ossobuffo I'll send it over. It works fine; it just feels weird to have 90-something lines for one shape. It's from the Inkscape auto-trace feature, so it's certainly a bit messy.