Web Components and Training Plans

   2018-02-15  

Web Components are the future… at least that’s what this news letter I read said.

I like the promise of web components. They basically, seem to me, to be Angular 5 / React like functionality built into standard HTML. They give you the ability to create new tags for HTML that do super special things.

I’ve been wanting a way to publish and share some basic .ics (ICalendar) files on my running / triathlon site.

I use emacs to create my training plans, and then export them to .ics files. I can use those on my desktop and iPhone, but I was after a simple way to share them with people in general. Not that anyone cares mind you, it just seemed like an interesting thing to do.

So I threw together a simple little proof of concept web component to load .ics files, and display the events in a GitHub style contribution graph.

The graph css code is mostly lifted from this cool article by Ire Aderinokun. Here is basically all you’d have to add to your web page (after include in the head section):

  <rohan-schedule year="2016" files="/static/assets/plan.ics"></rohan-schedule>

Here is what it looks like:

I think this might be a useful component for some fitness sites that do custom training plans (especially if they are somehow generated and allow you to pick a start or a race date). Or maybe for popular fitness people like Rich Roll or Scott Jurek to post their yearly training plans so people can “train along”.

You can see the code here. The code is proof of concept but it is usable enough for my purposes. I think the source is a pretty straight forward example of a basic web component (albeit in a stream of consciousness design style). I wouldn’t use if for anything too serious, but you might find it a good starting point.