I wanted my Atom feed to look prettier. I re-discovered some old skills of mine in the process.
I’ve been reskinning my site and trying to simplify things here and there. I decided I wanted my atom feed to look nice, too. After all, how come only HTML gets to have any fun?
Check out my pretty atom feed!
Some Background
The Atom syndication format is a syndication standard (like RSS) that allows people to see what I’m doing on my site without actually, y’know, visiting my site in a web browser. Like a caveman.
These days, I keep up with sites I care about in my reader of choice: Inoreader. Feedbin is pretty great, too. (I don’t use affiliate links, by the way, click without fear.)
I’m subscribed to all kinds of feeds for people and sites I want to follow – bloggers, news sites, and comics. I like that I’m creating a feed of things I’m interested in rather than depending on an algorithm run by some horrible corporation headed by some unprincipled narcissist.
But since Atom is written using XML I knew I couldn’t just write some CSS. I mean, I totally could have – CSS works just fine for presenting XML in the browser. But I wanted to go weirder and stretch a bit. Enter: XSL!
So first: check out my feedStyle.xsl and make sure to view source on that puppy. That’s XSLT, which – weirdly – I actually know and still remember. Brains, amirite?
I used to do a lot of work in web services in the early 2000s. It was a heady time with lots of acronyms to choose from: WSDL, BPEL, and OASIS. I was pretty sure the future of computing would be loosely-coupled web services orchestrated by general-purpose business process engines discovered via things like WS-Discovery. People would develop by connecting these web services (that all would expose well-defined SOAP endpoints), possibly in graphical workflow designers, and you could shop for service providers on marketplaces competing with each other for your business.
But none of that happened.
I think we’re better off, overall. I’m glad we never developed such a marketplace.
I strongly prefer JSON to XML. I miss the standardization process, but maybe sprawling international bodies aren’t what we need right now. Maybe what we really need is some kind of small web. A bunch of federated services running around talking to each other using open standards. And maybe instead of some kind of cyber-marketplace where big companies can go buy address validation solutions I’d rather read small essays written by folks I kind of know. And I’m happy those authors are POSSEing on the web.
You Were Saying?
Right. I was talking about my atom feed and my atom’s XSL file.
As of right now this is the JS file on my site that generates my atom feed. I’m still feeling my way around the feed generation itself; my site is generated by the amazing 11ty and I’m not sure this is easier than making a nunjucks template that generates my feed instead.
There are lots of great examples of that out there: here’s a pretty clear example from Lea Verou. And another from Sophie Koonin.
I’m using the feed package to generate the feed using JS. The package works well enough, but I don’t like the documentation. It doesn’t list an API with methods on it, it shows a big (presumably exhaustive) example of creating a feed. That’s not quite how my brain thinks; give me lists, not blobs!
In order to get the XSL to do its thing I had to add this little coda at the end of the file:
const theFeed = feed.atom1();
const lines = theFeed.split('\n');
lines.splice(1, 0, '<?xml-stylesheet type="text/xsl" href="/feedStyle.xsl"?>');
return lines.join('\n');I’m not thrilled by this and would’ve preferred an API method for adding the processing instruction rather than the string manipulation. But this works, so I’ll take it for now.
The main speed-bump I ran into was I forgot to namespace my XPath expressions in all those xsl:value-of elements. My brain is a little fuzzy on this one, but I thought there was a way to set the default namespace in the XSL; I tried setting xpath-default-namespace in the xsl:stylesheet element but Firefox still didn’t like my bare XPath expressions when I supplied that attribute. Chrome didn’t either. Maybe I’m missing something else, I’m not sure.
After that most of the work was done. A simple <xsl:for-each select="//atom:entry"> and I could write an element per entry in my atom feed. After making sure my generated HTML had a link to my site’s stylesheet, things started looking nicer.
It’s important to me that my feed ships the whole content of each post. I wanted to display that HTML in my prettified feed but, alas, I couldn’t figure out how to unescape the CDATA HTML strings correctly; setting disable-output-escaping on my xsl:value-of elements didn’t do it; that’s not quite what it’s for, anyway. So… yes, the correct thing is to put the content in CDATA but it does make my job harder when making the prettified feed. Too bad, I might re-address if I get another itch.
Overall, I’m pretty happy with my prettified feed. I want my corner of the web to be a toy, and doing this made me pretty happy – which means it’s being a good toy so far.
