My first AngularJS web app, part 1

As I mentioned in a previous blog post, I spent the past three months traversing the ecosystem of JavaScript and Node, attempting to learn the language that once mystified me. Along my journey I discovered various MVC frameworks designed to streamline web app development, and I gravitated to AngularJS. As with any programming endeavor, one can only read so much before the call of the command line beckons you to write a real application using everything just learned.

My son, like every other kid in America, is currently a Minecraft fanatic. When he’s not actually playing Minecraft, he is hopping from website to website reading news about the game and watching screencasts from other prominent Minecraft gamers. After some discussion with my son, I decided to built my first web app to aggregate all of the news and video links from the Minecraft websites he likes into a single one-page resource. First, here is the app (using a domain name that was surprisingly available):

In a nutshell, it’s an RSS reader app that pulls feeds from specific feed sources (annotated at the top), sorting and displaying all the articles in reverse chronological order. Any feed source can be enabled or disabled, and that setting is remembered by the browser. The client’s browser, not the web server, pulls all the articles from the selected RSS feeds after the page is loaded. There is an optional top-line article section and ads displayed inline in the content, both of which are pulled from my web server. More on that later.

From a visual design standpoint, you might notice it’s modeled after the styling of DrudgeReport — a site that may look like a 1990’s relic, but in fact accomplishes its goal of delivering links to current news stories with sheer simplicity and readability (read more). I started with Bootstrap and made some modifications via its LESS variables to attain the layout styling I desired. Using Harp as a local web server on my laptop, I included the Bootstrap LESS file and added my own custom LESS file to override specific Bootstrap variables. Harp then automatically compiled the Bootstrap LESS files and my custom LESS file as CSS for each page reload from the Harp web server so I could tweak and view the changes in real time. Once I was satisfied, I saved the resulting Bootstrap CSS to a text file, and that became my Bootstrap CSS for the project. For such a simple design style, using Bootstrap is arguably overkill; however, Bootstrap bought me responsiveness to all types of devices, from laptops to phones, out of the box.

Look for the next installment to learn how I developed the app.