We're growing into something new. Read More

Joel Sutherland

jQuery Widget for Github Projects

I wanted to reference my GitHub projects on my site, but do better than just a link. This jQuery widget using the GitHub API to build a box on your site that shows the status of your project. Once you include the js, this is all it takes to add to the page: <div class="github-widget" data-repo="JoelSutherland/GitHub-jQuery-Repo-Widget"></div> Raw Code »

New Forrst Header Alignment

I really like the new Forrst header that was rolled out recently because it is much simpler and it is easier to find the "New Post" button. One thing that does bug me is that it breaks the clean column layout that is in place. What do you think about widening the profile square to fix this?

Food Truck Tracker with jQuery Mobile

I just built this entire app this afternoon with jQuery Mobile and the HiFi CMS. It uses a list of twitter usernames for the food trucks in the Triangle area of North Carolina. From there, it pulls in their latest tweets and uses location in those tweets to plot them on a google map. It was a breeze to get cross-device compatibility up and running quickly using jQuery Mobile. It was awesome to be able to come up with an idea like this over lunch and have it launched and live before I left work.


HiFi Snippet Library

I've spent the last few weeks working on the HiFi snippet library. You can read a quick overview of what it's all about here: gethifi.com/blog/… The gist is this: we're releasing free bits of html/css/js to make it easier to build sites on HiFi. Additionally, if it's possible we are releasing the code needed to use them as straight html/css/js on non-HiFi sites.

Simple Image Grids with a HiFi Snippet

I saw a post here this morning for a tych plugin for photoshop: forrst.com/posts/… I figured that I could turn it into a simple snippet for HiFi. Turns out it was pretty easy -- just took about 45 minutes! Here is how it works. You upload the images you want to use into the Media tab (top right image). Then, I set up a custom fieldset for controlling the grid (bottom right image). You specify the container width and then in the textarea, the number of images you want on each row. The HiFi snippet then automatically resizes and crops the images serverside and caches them and displays them in the correct grid. If you want, you can hardcode a pixel height into each row. Here is how that works: 1 3|200 2 In this example, the second row would be 200px high.

"Footprint": A filterable view of my company's web activity

While a lot of people were visiting our blog posts directly, or subscribing to our feed, not many were viewing our blog index directly. This gave us the courage to try something new on our site redesign that might be more fun. We're calling it "Footprint" and it pulls in all of our activity: Blog Posts, Press Releases, In the Press and posts from a site we call BetterWeb. I'm also going to be pulling in our Tweets. Combining all of these feeds turned out to be pretty easy with HiFi, our CMS. Once I had the feed put together, I color coded and came up with a style for each item type. They are ordered by date. These are filterable. When a particular type is selected, a box shows up describing more information about the feed. Finally, more items can be loaded using a button at the bottom without a page refresh. All of this was made possible through the use of the jQuery plugin isotope. It's really handy.

Comment Styling

This is the new comment styling for our blog -- comments welcome! It's obviously colorful. I used CSS triangles and my favorite gravatar default.

Portfolio Tab on our Facebook Page

I just built my first Facebook page using an iframe. You can see it live here: facebook.com/… It supports filtering and viewing individual entries. (I'll be releasing the filtering code sometime soon) It pulls from our CMS (gethifi.com) using the same datasource as our website's portfolio. This makes it super easy to keep up to date. If you've got any questions on this -- let me know.