A Fresh Start (2)

About 2 months, I started working on a dream of mine. A dream that I've had for many many years. Throughout those years, I had many ideas, wants and desires, but never had the motivation to put them into code.

2 months ago, in the midst of finalizing classes for the year, and being monstrously busy with all kinds of nonsense, I had the urge to put this together. Everything was so clear in my head.

It's one of those moments, where you feel the weight of your To-Do list, and just can't bring yourself to do anything on it. That moment when your mind wonders, and you think about something else you could be doing. Something equally constructive, but way more fun. For that day, I didn't want to do anymore lesson planning, and I missed Software Development enough.

At that moment, it was time for me to finally do this.

It was time to finally rewrite theschlock.com as its own application with all of my own code, and design.

And on March 4th, the new theschlock.com was running on line for the first time. Today, it's finally (basically) finished!

Writing

2 years prior, I had already created a Tapestry 5 project that ran in Jetty completely standalone from anything I had at Widen. And I had things already organized for where I wanted to start adding classes.

From the beginning, I knew that I wanted to write this site in Java using Tapestry 5 and Hibernate. They were technologies I was used to. Much of the work I did at Widen was on the backs of others smarter than me that had already built systems for others to use. I wanted to learn how to use these technologies from scratch to better understand how they work.

Code Decisions

On the back end, there were several other decisions that I had made WELL before any code was written.

1. This site will not have comments.

At least, nothing internal. I learned a long time ago from MovableType and Wordpress that any web form left unattended will get massively spammed by bots, and who knows what else. (In the future, I might add Facebook comments if I can fit them into the design.)

2. Further than that! This site will only have read access to the database.

I did not want to deal with security in any manor for this site. Nothing on the Internet is every truly secure, and anyone who would want to tear into my database has way more time, and expertise on their side. Any wall is just an invitation, so why have any walls in the first place. And, if I did have security, I would probably just mess it up.

Road Blocks

In any project, you'll hit a road block. You'll come across something you don't understand, or a problem you just can't figure out.

When it's a personal project, it is very easy to just call it quits. You're the only person on the project, and you are really the only person that cares about the outcome. If you call it quit, it really only affects you.

Maybe it's been all those years at Widen dealing with road blocks on a daily basis, or maybe I'm just more comfortable with writing code than I was in college, or maybe I'm just more grown up now, too, and experienced.

Any road blocks I came across with this project were eventually overcome. Any problem, or misunderstanding just took a little bit of patience, time, and (sometimes) research to think it through and figure out a solution.

Figuring out Hibernate was easy. (Though, tapestry does all the work.) Implementing LessCss wasn't really difficult either. Getting tomcat running, and setting things up on a new host took some time, but I just needed to read through documentation, and chat with tech support for my host. Figuring out how to get Japanese text working in the database took a little while, too.

Nothing was outside of my ability, and I was able to do everything I wanted.

Back Up

Theschlock.com is really just a mirror of what I have locally. I never have to worry about losing something online because it's just a copy. All the code is stored on Git Hub, so I'll never lose it.

Every time I make a new post, I insert it into my local database directly with no interface. To deploy those changes online, I make a backup, and then restore the online database with the backup. This is AMAZING because it ensures that I will always have a backup of my data, and that the backup works! I put every backup into my Google Drive, so I'll never lose that data either.

All my photos for theschlock.com are on both Google Drive, and my web server. Even if all that data is lost on the server, I can just upload everything again from Google Drive.

Every time I make changes to my site, I'm redeploying it in a way that could be done any web host, not just the one I'm using now.

This sense of security is something I NEVER had with Wordpress, or any blog software for that matter. If any of those blogs died, everything I worked on would be gone forever. I never have to worry about that with this approach. Every aspect of this site is backed up, and will never be lost. (Unless github and google are lost.)

Design

Writing code is pretty easy. You just need to keep things organized, simple, and then make sure they work. Design is much different beast, and a very easy road block to kill this whole project. I haven't done much design work in the last 7 years. And there were many times when I would design something on paper, and it would look terrible after its implementation.

The Wordpress design I had before wasn't too bad, but I didn't want the side bars. I knew what I wanted, and those translated into User stories easily, and then to Tapestry Pages from there.

1. The index page would be the most recent post on the site.
2. The post must be the most prominent thing on the page.
3. No side bars. Only show the post.
4. The site must translate to mobile well.
5. Keep it simple stupid.

Like usual, my design from scratch looked like garbage. As dumb as it sounds, searching for "good blog designs" on google gave me a lot of inspiration. :)

I paged through a couple articles highlighting the best of the web and came across Dan Cederholm's website: Simple Bits. Holy shit, this guy's design was beautifully simple. It hit all 5 points of my check list, and was very sharp.

I went to work using the top-down approach and the site pulled itself together pretty easily. After my initial implementation, I had my friend Matt Latzke take a look at it. He suggested that I add a lot more spacing between components, and choose a second complimentary font for titles, and things.

Fonts

My favorite serif font is Garamond. I've been using Garamond for my resume, term papers, and almost anything I've typed since my beginning days in college. I wanted something better than Times New Roman, and Garamond just has a sleek simplicity to itself. I don't know, I can't really describe it.

Matt suggested that using Garamond for absolutely every piece of text on the site was design overkill. I didn't think it looked too bad, but having only one font did make the site feel a bit… I dunno… sheltered?

Anyway, I went to google again, and searched for good complimentary web fonts for Garamond. Helvetica came up a bunch, but I didn't really like the way it looked with Garamond. Eventually, I came across Gill Sans. When bolded, it really stood out against Garamond. It had very fat, but clean letters. Very stylish, and different.

Archives

One other strong point I wanted for this site was the ease of getting to past posts, and finding everything on the site with only a few clicks. I really hate Wordpress's pages for categories and archiving. I want my users to be able to see everything, and find everything, and view it all in a small space.

My initial designs were terrible again, but thanks to Ray at Widen, he sent everyone a link to site with an amazing design: Rob Ashton's Blog. This site is so incredibly simple. If I had seen this 2 months ago, theschlock.com would probably look different.

For the archives… Shit, just dump out all the post titles on the page and line 'em up. Nothing is more simpler than that!

I wanted to have some featured posts, too, and display an image to draw the user in. I really like how The Verge handles their recent posts on the category pages, highlights posts with images, and still keeps the design nice and clean.

I started doing something like that, but those highlighted posts naturally fell to the side of the categories and post titles. Everything just fit together that way.

(Basically) Finished

Figuring out the design for the archive and category pages was really the last unfinished feature. With that now complete, theschlock.com is (basically) finished! Obviously, I'll probably change a few things here and there down the road, but this is it.

The site does pretty much everything I ever wanted, and I'm in complete control of all aspects.

"It's the [website] I've always wanted, and now I have it. I rule!"




Recent Posts
Recent Featured Posts