Eponymous Site

It always starts with pen and paper doesn’t it.

I first registered the eponymous domain back in Febrary… of 1999. After lazying around for a good 15 years with a default Wordpress landing page, I thought it was high time to actually do something with the extremely dormant domain. Extremely.

So here we are. 15 years later. From crappy to… at least not as crappy.

Check it out: robibrunner.com

Why?

Why suddenly after 15 years do I decide to finally do something more than a click-button-install of Wordpress? I just thought it was time to anchor my name to something other than a dreadfully default site. I also wanted to create a site that I controlled that can house data about me that is for me, by me, and with my interests in mind. I’m not saying I was slighted by any social network, on the contrary, I’m perfectly happy contributing my information to them. It’s just that there are numerous places I do things, and no single place where I can aggregate it all in a manner that I want. Especially in a selectively curated manner.

Hence, I thought it might be a good plan to -revive- create the site and use it as an aggregation point for me. Yeah, it’s one of those self serving “me” projects.

But it’s all for a good cause. Well, a good cause for me anyway. I wanted to take this opportunity to check out some new technologies out there and play with them to see what they can do, and probably more importantly, what I can do with them.

The Plan

Since the site is meant to be on the simple side, I wanted to keep it minimal and see what I could do. No fancy logins or backend systems. No need for cluttered widgets or ads. The plan was to write a Single Page App running completely just with client code, perhaps with a json file containing the data I wanted to display. That’s it. Nothing complicated.

This gave me an excuse to try out things like Yeoman, AngularJS, and all the assorted goodies that come with those stacks. And it turned out to be pretty interesting to see what was out there.

The Design

I’m not much of a designer, but I do what I can. I wanted something that would becon a little user interaction. There’s probably a choice to be made here between providing a page that has everything already laid out and visible so that all the user has to do is scroll, and a site that tries to entice the user to interact with the various elements and see what goes where. Common instinct tells me I shouldn’t make the user do any extra work to see my content, but at the same time, my own gut tells me that I want to build something compelling enough that makes the user want to interact with the site. If I can’t get them to at least be that engaged, I don’t see a point in just spewing out content.

If I can’t engage the user enough that they want to read my copy, then I’ve failed anyway, and no amount of no-interaction-needed style of page display will help them grasp my content.

So that was my mindset. You’re going to have to do some work to see what I do, and I hope it’s interesting enough that you will.

The Execution

As mentioned, Yeoman was high on my list to try out since it frameworked everything I would need for this site. It created an Angular project, droped in Grunt so that I can build it, configured it with some sensible defaults to do things like pack js and css files into one and minify images. It also installed Bower to grab all the nifty libraries I may need and pack them into the index.html. It’s a pretty nice setup where once setup, I can take my time to browse around the various files it configured and see exactly what it did. Nothing better than to learn from a few live examples.

Oh yeah, there’s also testing included too. That one I still need to leverage fully. When things are rapidly changing, especially in the beginning stages of an application, I feel like it sometimes takes way too much effort to write full scale tests. That’s just something I need to get into my workflow a little more to make it work right.

The site also needed to be responsive to work on mobile devices, so I had to dive into a little bit of CSS hacking to make things look right. Adjust element sizes, column counts, and so on to accomodate for smaller displays. For better or worse, everything needs to be designed with mobile in mind, if not mobile first, even for this kind of site. It’s certainly a paradigm shift.

I wont go over too much in detail what I did, simply because I used the Info section to document the details of what I used to make the site what it is. Web page design is never a trivial matter, even if it’s a mere one page app. Hopefully the attributions to various modules, stackoverflow answers, and technologies used can be insightful to someone else that may be interested in seeing how I did what I did (not that it’s anything overtly complex), and more importantly, use it to do what they want with it.

The underlying code is still slightly embarassingly messy, as it was a learning process. The Angular directives, services, factories and controllers I wrote are nothing particularly share worthy, but more importantly, it gave me a good feel for how they should be done and what I can do with them. I’m really liking the way Angular works and I think it’s a huge paradigm changing way for writing Javascript and doing web development. As they say, things wont be the same after this.

What’s Next

A learning experience can only validate itself if it gets applied to something else. So naturally, onto the next project. The next project will be incorporating a back end, probably MongoDB, or maybe even Firebase. But I’m still not sold on outsourcing everything to the cloud when I can have a perfectly reliable server in my own control. Perhaps that’s one thing I need to still get used to.

It may also require some sort of user backend, which implies a login system, which implies an authentication plan. I’ll have to first decide if I want to write it as a Java back end, or to go with something like Node.js and Hapi/Express on the server side. Either way, it looks like I’m going to have to upgrade my domain hosting plan to allow for me to do something a little more complex. Well, maybe if I go Firebase, I can avoid that. A little more thinking needed on my part, but we’ll see how it goes :).

Feedback

Feel free to visit the site: robibrunner.com and let me know what you think. Tear it apart or question why I did something in a particular way. I’m always up for a little discussion. I’m sure there’s a lot to add or perhaps some things that just are plain wrong that I’m blind to, but either way, it was interesting to kick the tires of modern web development. Things sure move fast :).

yeah, I know. 15 years. Cause 16 would have been just too ridiculously long :).