Your browser (Internet Explorer 7 or lower) is out of date. It has known security flaws and may not display all features of this and other websites. Learn how to update your browser.

X

Navigate / search

jQuery Image Cloning Script

I recently ran into an issue at work where we have been spending countless hours making 6 and 12 bottle shots by hand in Photoshop. We would take one bottle and copy/clone it over 6 or 12 times, then save and resize the image for the web. It became so repetitive that I created a little script that would do the same thing, but only using one image and some fancy jQuery.

Here is my script:

JavaScript and jQuery

%MINIFYHTML0c3fb02e399470585609a0ea641dedd98%%MINIFYHTML0c3fb02e399470585609a0ea641dedd99%

CSS to float the images left:

%MINIFYHTML0c3fb02e399470585609a0ea641dedd916%

HTML to display the images:

See it in action:
jQuery Bottle Clone Example

JS Conf 2009

Last weekend I attended JS Conf 2009 in Washington D.C. with a good friend of mine, we actually brought our wives too. The plan was to attend the conference while our wives saw the sites and toured the town. We couldnt have asked for better weather, all 3 days the temperatures were 80-90 and not a cloud in the sky.

The JS Conference itself was pretty awesome, I have never been to a web conference before so I dont have much to compare it with. It was a small conference of about 150 people, but all the rockstars were there including John Resig, Jeff Haynie, and Richard D. Worth among many others I was less familiar with. It being the first year of the conference, I wasnt quite sure how it would go down – but my friend and I were pleasantly surprised with how smooth it went. All the speakers did a bang up job, the sessions were about an hour each – which was the perfect amount of time.

Overall, I wish there were more hands-on type of sessions – a few sessions were pretty basic, but then there were a few that were really advanced – it was a nice mix. I’m still somewhat a newbie at OOP JavaScript, so it would have been neat to get a quick-paced session on best practices for OOP/JS. There were also smaller ad-hoc sessions that anyone could volunteer for day-of. The conf really opened my mind up to how much JavaScript it become a huge part of web and how a new sub-culture of developers is emerging.

There are rumors that JS Conf 2010 will be in NYC, if thats the case I will definitely go again! Although being in DC was fantastic, such an amazing city.

New at onerutter.com – The Lab

I have started doing more little personal projects for fun, the lab will be a place where I can show off these little projects. I have an ongoing list of about 10 ideas for websites that I want to build, plus about 20 domains. I have recently starting learning code igniter which is a php framework similar to how rails is setup. I started building dogfriendlyparks, which is my first solo-project that Im showcasing in “the lab”. If you follow my blog, I will be posting tutorials for the lab projects that I will be working on so you can follow along and learn some fun new stuff.

Check out The Lab Now!

5 Ways to Improve SEO with WordPress

I have been building websites with WordPress for about for a few years now, I started with v1.0 and have made my way up to the latest v2.7. I started with this blog, then branched out to blogs for clients, and eventually I started creating some sites in WP and using it more as a CMS than blog. I found that over time, WP has some great benefits for SEO if you set it up right. StamfordCTGuide is a local guide for the town I used to live in, it has over 300 pages (posts) of content. By setting up WP with the right plugins and using some other tricks of the trade, I was able to secure some pretty high search engine rankings (#3 for Stamford, CT in Google). I have also created great rankings for this blog as well as blogs for clients. The thing I have learned about SEO is that its like Black Magic, there is no one way to achieve it and everyone has their own ways. As I have figured out certain things along the way, I felt that it would be important to share them, I’m not guaranteeing that this will work for everyone.

Here are my recommendations:

Plugins/Settings

  • SEO Title Tag – This is a great plugin, some people prefer the All-In-One Seo Page, but I’ve had great success with this one in particular. Title tags are probably one of the most important pieces for SEO, that people can often overlook. I always make sure that I include the name of the site along with the title of the post/article/page. An Example: Use Twitter to Find Jobs – Jake Rutter – User Interface Designer, CSS/XHTML Developer SEO Title Tag allows you to setup defaults to pull in the post title and also append the blog name to each title tag. And the beauty is that, you can go a step further and overwrite each title tag from the SEO Title Tag Manage tab.
  • FeedBurner Plugin – FeedBurner is a fantastic service, if you don’t already have an account, you will need to set one up. FeedBurner is a service that takes your RSS feed and syndicates, tracks, standardizes your feed so that it can be easily picked up by many other sites/services. The company was purchased by Google in 2005, and since that acquisition it seems that it has helped with my Google rankings, although that could just be a coincidence. The best part of WordPress is that everything is RSS-able, you can RSS everything, by category, by date, etc. I have seen instances where I post something, an article to StamfordCTGuide and within about 2 hrs its in Google and getting decent traffic. By using the feedburner plugin, it gives you a direct route to Google.
  • Google Sitemaps – This particular Google Sitemaps plugin is a great tool for generating an XML Sitemap of your site, which you then feed to Google via their Webmaster Tools. The sitemap will inform google of which pages are necessary to be crawled throughout your site. If you would like to learn more about Google Sitemaps, Google it!
  • Permalinks – I setup permalinks within my wordpress install as “/category/postname.html” . I have been setting up installs of wordpress in this fashion for about 3 years and have always had great luck with SEO. Some people choose to add in a date, but I prefer to use category and postname, it seems to work best. You can find Permalinks by going to Settings > Permalinks in WordPress.
  • Title Tags – Title tags are what you see on the bar above the URL when you are on any given page. That is also what you are usually searching for, when you do a search in Google. It will rely on the title tags and the content of the page. So the title tags are pretty important. If you wanted to be found when users type in: stamford ct restaurants. Then you would create title tags that reflect what you would like to be found for. The best thing about title tags, is that it can be achieved through trial and error. Once you are in Google, you can tweak those and about every 2 weeks (sometimes quicker), Google will pickup the new version of your site and your rankings should change if you have made changes to the title tags.

Above are the 5 ways that you can improve your SEO via WordPress.

Use Twitter Search to find Freelance Web Jobs

Twitter recently updated their search feature, you can view it at http://search.twitter.com. It works pretty well, just type in your search terms and you will be given the latest tweets that match your terms.

I found today that it can be a great tool to find freelance jobs, you can use a similar query to find what you are looking for; http://search.twitter.com/search?q=freelance+web. You could probably spend an hour tweaking your search to find 20+ people to follow, some are automated feeds that just display jobs/gigs and some are people posting jobs. Either way, it can be a nice automated way to find freelance work, after you set it up.

Here are a few twitter profiles that you can follow to help get you started:

Amazon.com’s Big Month

I read last week from a NY Times article that despite the recession Amazon.com had a break through month with 6.3 million orders on December 15th, which translates to 73 items each second. Last year they had 5.4 million orders on December 10th.

Amazon.com has really transformed their business, from selling their own inventory, to adding a marketplace of many different stores. This is what really sets them apart from their competitors, by being able to offer so many different products and prices. For Christmas, I ordered a gift on amazon.com which was $11.00, elsewhere that same gift was $22-25. The price difference was amazing and is what makes amazon such a successful ecommerce business.

jQuery Highlight Navigation Menu v.01 Script

A few months ago, I created a little script using the jQuery library which will add class=”current” to tabs, allowing you to highlight your menu for you users. Its pretty basic, but it searches the URL, if it finds a match with the link that was clicked – then it add’s class=”current” to that particular tab. You can then use that class in your css, to make a highlighted state.

Here is the code:

// Highlight Tab v.01 by Jake Rutter
// Website: http://www.onerutter.com
// Feel free to use and adapt, please just give credit where credit is due.
// ----------- highlight tab function -----------
    var path = location.pathname;
    var home = "/";
    $("a[href='" + [ path ] + "']").parents("li").each(function() {
        $(this).addClass("selected");
    });

Feel free to adapt and use this code on your site, I would appreciate it if you could leave my comments in as the creator in the .js file. If you are unfamiliar with how jQuery works, you can read this tutorial which will get you up to speed!

jQuery Highlight Script (1543)

Appcelerator Titanium – The Future of Open Souce RIA

Yesterday, I received an email from Appcelerator, informing me of a new product of theirs called Titanium. Appcelerator Titanium is an open source RIA platform for developer desktop web apps, similar to the Adobe AIR platform, in that it uses standard, common web languages such as html, css, and javascript. That is what caught my eye, as I’ve read a few books on flex and messed around a bit, but I already know the ins and outs of html/css/javascript. Thats my everyday toolkit for building websites and user interfaces. I ventured onto their website, and watched a few screencasts and then downloaded the demos, which included a twitter and youtube demo.

After checking out the demos sourcecode, I was pretty damn impressed. I thought to myself, “What’s next? How do I start? “. I found the SDK, but just the word SDK can be a little daunting for a web developer, I like to think of it as more of a WDK or Web Development Kit. So I downloaded it, installed it, and followed a screencast from their website to generate my first app. It took about 20 min from start to finish, and Voila! I had a sample app running from an installer. Amazing!

My past experience with Ruby on Rails also helped, as the setup of the app is very similar to that of a ruby on rails project. The terminal commands were easy, and the ability to create installers for OSX, Windows, and Linux were kickass! The documentation was also excellent for such an early release, I only ran into one bug on windows, but I think it had to do with Chrome support for my code, so it could have been a self-inflicted bug and not a Titanium bug.

One of the most desirable things about Titanium is that it has the jQuery library built-in, AWESOME! So I decided to dedicate 2 hrs to messing around in Titanium to see just how far I could get. Well, in 2 hrs I built a little desktop app that allows you to play 6 videos through a custom flash player that are streamed from the web. I basically re-used code from another project that utilized flash, jQuery, and html/css to see if it would work and how fast I could get something up and running. Its not anything I would release to the world, but it really opened my eyes up to how fast I could get something done and the possibilities that Titanium have opened for me.

I’m ready to sell my books on Flex, remove Flex builder from my desktop and go all out on Titanium. What does Flex give me that Titanium doesn’t, and if there is something – then Im sure the guys at Appcelerator will be adding soon enough, as this is just a Preview Release.

So if you haven’t yet checked out Appcelerator Titanium, I highly encourage you to do so.

Thank you Appcelerator!

Also, today someone posted great article on The similarities/differences of Appcelerator Titanium and Adobe AIR