MVC CSS Stylesheets

While working on redoing my website using a custom model-view-controller framework I decided that it was a good time to do some extra cleanup. After all, cleaning up the backend only changes the content portion of the site. There's much more to websites - styles, behaviors, cache control - then the content. In the interest of cleaning up my website I decided to take my MVC framework to the next level and use it to create my stylesheets and Javascript in real-time.

The primary benefit of MVC frameworks is to simplify code logic and remove duplicate code. With all user requests being transferred through the same routes and controllers, it's easy to whip out extra html pages or make site-wide changes by editing a few lines. Common SQL functions, AJAX calls, and classes can be used across different pages and sites easily without duplication.

There's a lot of duplicated code in my assets. I use Erik Meyer's reset stylesheet, a global set of style rules, jQuery, similar lightboxes, etc across my different subdomains. I could include each ...

read more »

Using Headers for Caching

One of my main goals while redoing my website is to optimize my content, both on the frontend and backend. The frontend is something that I've always considered to be the most important in terms of a fast user experience - I'm not crunching enough data on the backend to worry about long processing delays for users. However, depending on the connection, I've noticed delays upwards of five seconds in between pages, which is completely unacceptable.

There's a few things that a web developer can do to speed up the frontend. Decreasing the number and lowering the size of the unique elements are two of the most obvious. If the user only has to download two small stylesheets instead of five, your site will appear faster. What I wanted to do was take this a step further; repeat visitors will not have to download any new stylesheets, scripts, or images. The only http request will be the xHTML content. This can be handled by using the built in caching components of the internet.

There are several different ways that website can cache information ...

read more »

Website Overhaul

It may be no surprise to any of my long-term visitors, but I've decided to perform a deep overhaul of my website. Based partly on my recent introduction to model-view-control frameworks and partly on research into web caching and optimization, I've spent a good chunk of time analyzing my current and future website functions in the hopes of streamlining the backend code and optimizing the frontend. There are several goals that I have in mind for this overhaul, most of which will stretch my current programming skills.

Model-View-Controller Setup

The idea behind this sort of programming is breaking everything up into separate, reusable objects. All requests to the website are directed to a primary router, which interprets the request and pulls a controller to handle the page. A controller is a set of instructions based on the page type (example: home page, blog post pages, etc) that sets variables for the final page. The controller may talk to a model, which is the 'logic' for the site (usually a database object), and pull additional ...

read more »

Blog Updates and Comments

This blog was started in March of 2009 during a pivotal moment of my life. I had recently been fired from Michigan Tech, my first post-college job, and was using my free time to create a website to allow me to both market and develop myself professional. With the new site's blog I hoped to discuss web development, hiking, and personal stories in a manner that was both professional and helpful for other people.

Since its creation in March the blog has already had several major looks. I first planned for it to be part of my major website, with similar layout and designs used in the blog pages as my portfolio. After working with this for several months, I soon realized that this was restricted both the opportunities for the blog's development and affecting my search engine ranking. Starting in mid-July I broke my main site into subdomains, which eventually helped the page rank for each section and allowed me to expand both the front and back end of the blog. The current look for my blog was rolled out several weeks ago, and though I already have ...

read more »

A KML Sitemap

This post assumes basic understand of website structures and XML documents.

After finishing my adventure map (map.jacobemerick.com) a few weeks ago, I wanted to share the KML information online for people using Google Earth or Google Maps. A KML document is merely an XML document with special tags and data that is related to mapping - it includes latitudes, longitudes, and descriptions of geographical points. My adventure map parses KML documents to display the routes, photos, and points viewable on the map. However, in order to offer these KMLs in a way that search robots could view them, I had to do some modifications.

The first step was making sure that my KML documents were being read as KMLs. All of them are generated from a single PHP script, called processor.php, and I wanted to give them a content-type so that programs, including search robots, understood that it was a KML document. This was easy to add in my PHP document.

read more »

Resetting to Subdomains

This post assumes some intermediate understanding of using .htaccess files, mod rewrite, and website structure.

After several months of launching my main website, I took a good hard look at my traffic and Google ranking. I soon noticed some major problems with the way the site was structured and how Google was treating my content that would only increase with time. In order to strengthen my rank, and better divide my website's content into manageable entities, I decided to utilize subdomains.

Previously, my website was divided up by simple folders, and the URLs reflected this. My waterfall site was under jacobemerick.com/waterfalls, and my blog under jacobemerick.com/blog. However, search engines still see all of this under one domain, and this started to create a very large and diverse range of content types under jacobemerick.com. My page rank was suffering simply because I had everything from web development blog posts to waterfall photo and information under a single domain. Also, as I would like to continue to diversify the ...

read more »

Setting up the Hiking Website

Even though my waterfalls site turned out to be a great way to chronicle adventures through wilderness, it has several areas that are lacking. The biggest area is the Google Maps functionality, which is shaky at best. It can only show the end points and major points along the route, but I didn't have enough data to actually upload the suggested route (waypoint by waypoint) for each journey. Also, I didn't have any way of displaying or archiving my other adventures with the waterfalls site, so I decided to make an individual web project: the hiking site.

The layout for this site was fairly simple: a full screen map with removable sidebar containing the hike and view options. Utilizing the jQuery framework would allow me to add the Google Maps pieces easily and use cool animation on different elements. The largest step was the data transfer. I only wanted to return xml, preferably formatted as KML, and use Javascript to parse the data and display it correctly.

Breaking it down to the user's view... A user will visit the main page and see ...

read more »

Future Side Projects

In my free time, I try to keep up with web development for my personal sites. Over the last year, the gem of my side work became the 'Waterfalls of the Keweenaw Area' website, a truly complete and detailed project. Due to this project, I learned more about Google Map API, KML files, and general content management then I would have by waiting for appropriate job projects. The waterfalls site involved much more than just making a website - I had to go out and collect the data (photos, directions, GPS points) manually - and now I have several ideas for future projects stacked up.

One project that is mostly completed is a Daylight Tracker. This application will print out calendars and graphs with sunrise/sunset information based on the current latitude and longitude of a user. While it's completely functional, I've decided to overhaul the frontend to utilize jQuery and JSON as an additional hurdle.

The next project on the radar is a full page Google Maps application that I can start linking my photos, hiking trips, and waterfall ...

read more »

Topographic Images on a Google Map

This post assumes intermediate understanding of the Google Maps API.

While I was working on a personal project I bumped into the need to create a Google Map that included locations and driving directions of the different Keweenaw waterfalls. This gave me the opportunity to learn about the Google Maps API, including displaying driving routes, arrays of points, and custom markers/descriptions. After working with Google Maps for awhile, I decided to take my website's map to the next level and add USGS topographic maps to the features.

Google Maps already offers several premade maps automatically with neat features, like Satellite, Terrain, and Map view that can work with street routes, but I needed to go a step further for a good topographic view. The maps work by displaying different 'tiles', or images, based on your zoom level and position. While the premade maps do all of this behind the scenes, to add custom maps (either self-made or supplied by another web service), I needed to sort out what tiles were needed and where to display ...

read more »

Cross Site Status Updater

This post assumes semi-advanced understanding of PHP scripting as well as basic understanding of Twitter and Facebook.

When I started working on launching my personal website, an interesting problem came up. I wanted to have a feature that showed a current status on my site, similar to a Facebook status. Also, since I also have a Twitter and Facebook account, it only made sense to have a single place to update my Twitter, Facebook, and personal site status.

After doing a bit of research, I decided to use Twitter as the central updater. Twitter has many nice applications built into it, including the ability to update from a desktop or phone. Once my Twitter status was updated, the change would get carried down to my Facebook account and personal site through the Twitter feed.

The first step was with Facebook, and ended up being quite easy. There is already an application built for this that works quite well. Once you agree to use the application, all you need to do ...

read more »