I have been working on a new website at https://www.xmentimeline.com

Why?

About a year ago I embarked upon a journey to read all X-Men comics. I quickly found it was pretty hard to figure out which order to read them in, especially in comic issues from more recent years with all the crossovers, so I created this website to help keep track of it at the same time as upskilling my web development.

Details

The visual layout on the page is chronological, but if you expand a comic issue you will see the expanded panel with arrows, and they navigate within the reading order which follows the internal chronology. If you have a Marvel Unlimited account you can also click through to read the comic from that panel, using the MU icon in the upper right.

There is also the ability to browse by collection, which can be toggled via the menu on the lower right, and it displays the collections in reading order but keeps them all together, whereas the default behavior is to split them up when it makes sense for the reading order.

The page is optimized to load only images that are visible on the screen, to cache heavily, to make use of several CDNs, it has an instant loading state on subsequent visits, and more, in an attempt to make the massive page performant, and I think that has been a success. There are roughly 2,500 comics and counting, and all of the data always exists on the page, so it has been an interesting challenge for optimization!

Development

The tool is open source, feel free to check it out at https://github.com/SubJunk/TimelineTools
Suggestions and contributions are welcome.

It is built using a few dependencies like AngularJS and MaterializeCSS.