Archive for the ‘Web’ Category
If you are looking to send people to www.yourdomain.com, when they type in yourdomain.com then you can use mod rewrite in Apache to get this done for you.
Use the code below in your .htaccess file:
RewriteEngine On
RewriteCond %{HTTP_HOST} ^yourdomain\.com$ [NC]
RewriteRule ^(.*)$ http://www.yourdomain.com/$1 [R=301,L]
CSS Grid Frameworks – The What/When/Why/How
16 Jun 2009
Posted by Jake Rutter as CSS/Web Standards, Web
CSS Grid Frameworks such as Blueprint and 960 Grid System have been getting more popular. I recently download a wordpress theme that was built with 960gs and I was delighted with how easy it was to use. I’ve always been a huge fan of building my own css, but being organized and separating the stylesheets by text, layout, forms, etc. I have looked at some other frameworks, but these two seem like the only ones I would use because of their simplicity and the community around them.
Why should I use a framework?
Do you feel like you spend a good amount of time designing, then an equal amount of time coding those designs? With frameworks, you can cut your coding time down by half. Why half? With a framework, you can knock out the basic layout using a grid system which is cross-browser compatible (ie6, ie7, FF, Safari, Chrome) and then focus on your custom style sheet.
How to use a framework?
The first time I used Blueprint, I started using it after I had designed my page – I was essentially retro-fitting Blueprint to my design. I would not recommend using Blueprint in this way, I felt restricted and was annoyed with Blueprint. I ended up making it work, but wasn’t ultimately happy. The best way to use a framework is from the beginning, before you start designing setup your grid – it makes a world of difference! Blueprint has some great resources for setting up grids for use in Photoshop and Illustrator.
When to use a framework?
Anytime! I have been using the 960gs framework for landing pages because of its small footprint (3.6kb) and quick ability to get up and running. I love the confidence of knowing the layout will work cross-browser, so it allows me to get my designs up and running fast (very important! in web).
Stay tuned for a more in-depth look at both of these frameworks and a redesign of this blog using Blueprint!
Category CSS/Web Standards, Web | Tags:
jQuery Image Cloning Script
29 May 2009
Posted by Jake Rutter as CSS/Web Standards, JavaScript/Ajax, jQuery
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
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//12 bottles - 486w - 40.5/bottle
//6 bottles - 486w - 81/bottle
var bottles = 12;
if (bottles == 12) {
alert("12 bottles");
for (i = 0 ;i < 12;i++)
{
$(".image-container").append("<div class='bot12'><img src='http://4seasonswine.com/labels/small/0109107.jpg' class='bottle'></div>");
//console.log("bottle"+i);
}
}
else if (bottles == 6) {
alert("6 bottles");
for (i = 0 ;i < 6;i++)
{
$(".image-container").append("<div class='bot6'><img src='http://4seasonswine.com/labels/small/0109107.jpg' class='bottle'></div>");
// for firebug console.log("bottle"+i);
}
}
});
</script>CSS to float the images left:
<style> .bot6 { float:left; width:81px; } .bot6 img { width:81px; } .bot12 { float:left; width:38px; } .bot12 img { width:40.5px; } </style>
HTML to display the images:
<body> <div class="image-container"></div> </body>
See it in action:
jQuery Bottle Clone Example
Category CSS/Web Standards, JavaScript/Ajax, jQuery | Tags:
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.
Category JavaScript/Ajax, Open Source, Web, jQuery | Tags:
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.
Category Open Source, Web | Tags:
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
31 Dec 2008
Posted by Jake Rutter as Jobs, Viral Marketing, Web
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:
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.
Category Web | Tags:
