This post is an entry in a weekly development diary on building a feed-aggregator-based blog on Glitch. Only a small part of building an app is code; the bulk of your time is spent planning, experimenting, making mistakes, getting frustrated, and making progress in baby steps.
The build
Like many of you, my online life is lived across several platforms: I've got a personal blog, a microblog, a podcast, open-source projects on GitHub, and photography on Flickr, and my posts here, to name a few. Some of these are more active than others, so I'd like to create a way to pull all of that content together, and turn them into a firehose of my stuff that can be shared in a single place.
I plan on building this on Glitch. What's Glitch, you say? Glitch lets you build full-stack web applications right in the browser, for free, and deploys your changes live to the web as you type. It also lets me remix any public app, giving me a perfect copy of it to kick off my own work. You can learn more about Glitch here.
For my app, remixing the ~hello-sqlite
starter app gives me a nice jumping-off point. It's a full-stack app powered by Node.js and Express, backed by a SQLite database. It's embedded below:
I'm also taking some inspiration from ~lmo-feeder
, too! Just like that project, I'll add a pretty front-end on it and have an auto-generated blog. For the first iteration, I'll create that with the Pug templating engine.
How it all works
The magic that lets me do all of this is RSS. Essentially, RSS feeds are an XML-based document that can be subscribed to in a feed reader. You can see the feed of my posts here on dev.to, which looks something like this:
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
<channel>
<title>Angelo Stavrow</title>
<author>Angelo Stavrow</author>
<description>Web and iOS/Mac developer. Podcaster. Your biggest fan.</description>
<link>https://dev.to/angelostavrow</link>
<language>en</language>
<item>
<title>create-react-app and Express, together on Glitch</title>
<author>Angelo Stavrow</author>
<pubDate>Fri, 14 Feb 2020 15:52:54 +0000</pubDate>
<link>https://dev.to/glitch/create-react-app-and-express-together-on-glitch-28gi</link>
<guid>https://dev.to/glitch/create-react-app-and-express-together-on-glitch-28gi</guid>
<description><p><a href="http://glitch.com?utm_medium=weblink&amp;utm_source=dev.to&amp;utm_campaign=blog&amp;utm_content=dev">Glitch</a> is the fastest way to get an app or site up and running live on the web, but it runs apps on only one port. Sometimes you need more, like when you're building a <a href="https://glitch.com/culture/react-starter-kit/?utm_medium=weblink&amp;utm_source=dev.to&amp;utm_campaign=blog&amp;utm_content=dev">React front end</a> with create-react-app and the back-end with <a href="https://glitch.com/~hello-express?utm_medium=weblink&amp;utm_source=dev.to&amp;utm_campaign=blog&amp;utm_content=dev">Express</a>. Here's how to work around this constraint, with a proxy middleware and some port-switching logic!</p>
[...]
</description>
</item>
</channel>
</rss>
There are a couple of different variations on this format, but they're all nicely defined. To define the feeds I'm interested in, my plan is to use an OPML file. OPML is another XML-based format in which you can list a set of RSS feeds. Many RSS readers use OPML files for importing and exporting your list of feed subscriptions.
Thinking out loud
While I do keep a "normal" journal, I'm very new to the idea of a development journal. I first tried this in February while working on another app, and found it to be very helpful! Writing out my thought process, my learnings, and my frustrations keeps me moving forward and provides a historical record that's far richer than any collection of code comments and commit messages, in my experience.
(You should still write useful comments and commits, though!)
Do you keep a development journal?
If so, have you found it to be helpful? If not, is there a reason you don't? Let me know in the comments!