petersena.com

Once you get past the layouts and color palletes, most browsers seem pretty similar. But what sets them apart is under the hood. Take Internet Explorer and Chrome, for example. Currently their main differences include Cross Platform Availability, Webpage Rendering and manufacturer.

Microsoft Internet Explorer has been the primary Web browser for computers running the Microsoft Windows operating system. This browser is integrated into the windows operating system and configured as the default web browser application for a windows computer out of the box. Microsoft Internet Explorer is currently only available for the Windows computer; their support for Apple (mac osx) and other desktop computers has been discontinued.

Google Chrome is Google’s answer to web browsing based on the open source WebKit viewing engine. This popular and acclaimed web browser is available cross-platform for download on Windows, Apple (Mac OSX), and Linux Operating Systems.

As mentioned, the average user will notice mostly aesthetic differences. Internet Explorer closely mirrors the Glossy windows buttons to match the look and feel and user experience offered on a Windows based operating system. Chrome, on the other hand, sports the minimal Google look and feel with fewer buttons and interface elements in plain sight. Chrome “skins” can be downloaded to modify the colors and graphics of the application itself.

Other than aesthetics the other key difference is how the browsers render pages. Google’s Chrome browser uses the WebKit Open source browser engine, which supports popular HTML5 based techniques such as page animations, transitions and support for more in depth multimedia content using something called Canvas. Mac enthusiasts might have heard the term WebKit when listening to presentations about various Apple software and hardware devices. Examples include Mac Osx’s Safari browser and Ipad/ipod devices which also run on the open source standards inspired browsing engine WebKit.

Internet Explorer on the other hand can directly access the windows system since it is closely integrated into the operations system using Direct X. Some argue that this increases the need to run an Antivirus/Anti-malware application.

Many users argue that WebKit based browsers offer a faster processing of pages due to the engine used, but these results differ depending on the testing device hardware and software configurations.

For additional information on Google Chrome, Microsoft Internet Explorer and the other technologies mentioned above see the below links:

Google Chrome:

Download Google Chrome

Google Chrome on Wikipedia

Microsoft Internet Explorer:

Microsoft Internet Explorer

Microsoft Internet Explorer on Wikipedia

Webkit

HTML5:

http://en.wikipedia.org/wiki/HTML5

http://lifehacker.com/5416100/how-html5-will-change-the-way-you-use-the-web

Adobe Browser Lab:

Fast tool to see a screenshot of a webpage in many browsers. it has a nice side-by-side feature for seeing your sites next to one another in various browsers. I like this tool cause its faster then using a Virtual Machine but its not a feasible tool for testing things like rollovers and functionality. However as a “screenshot” snapshot tool its quite awesome.

Cost: Free

Link to Tool

Browser Cam:

This service lets you use Browsercam’s farm of virtual machines to quickly test your Websites and Web Applications inside a browser, email, or on a device. I haven’t tried this one yet but i’ve heard some pretty good reviews on it. I keep meaning to test the Free Trial and consider bringing this into our studio for 2010. They also are featuring a device capture system for Iphone, Android, Blackberry and Windows Mobile.

Cost: Plans starting at $39.95/month

Link to Tool

Browsrcamp:

I haven’t tested out the paid version but if the folks over at Browsrcamp wanted to offer me a trial i’d be happy to test them out. they offer all major Webkit and Gecko based browsers but being that it is a VNC server session there is no way (to my knowledge) to test the dreaded IE. Now if you are a PC user you can easily use Super Preview and Browsrcamp if you don’t have a mac. See for me I abandoned Windows after they stopped supporting XP and i realized how big of a piece of shit Windows Vista and 7 were. This is not me being an Apple fanboy or going for the Mac versus PC debate just a little rant.

Cost: Prices range from $3 to $99 based on the subscription but their one year subscription is only $99

Link to Tool

Cross Browser Testing:

This tool I especially enjoy due to the ability to actually login and test a site in addition to screenshots and seeing it. They offer VNC sessions and the ability to pick an operating system, the browser of choice and then experience it in the form of screenshots or an actual “live test”

Cost: plans ranging from 19.95 to 199.95 per month

Link to Tool

IPhony:

Looking for a down and dirty way to visualize a website inside of the Iphone? This Free tool is great for seeing how your webkit based website will look. Its a Mac only program and not a great way to test for anything other then sizing and aesthetics because its basically just calling Safari inside an iphone wrapper. Therefore if you goto a site using Flash or other non iPhone supported content you will see it rendered just how safari would render it as opposed to seeing the blue X.

Cost: FREE

Link to Tool

Litmus:

This hosted service lets you test your designs on all browsers and offers precise bug tracking so you can find out the incompatibilities of some things performed on the site. their Free version limits you to 50 tests/month and only offers support for MSIE7 and Firefox2 on the browsers and Outlook 2003 and Gmail for email.

They offer a series of very affordable plans ranging from around $39 for a 14-day pass all the way up to $199/month for a team unlimited subscription. I’ve used this and have had nice luck with it.

Cost: FREE and Paid programs ranging from $39 and up.

Link to Tool

Super Preview:

a Microsoft tool thats actually worth half a shit. This tool lets you visualize a site in various Internet Explorer versions.

Cost: FREE

Link to Tool

DIY Solutions:

Running Virtual Machines is a Do it yourself solution. This route you would install a program like VMWare or Windows Virtual PC and then you can install multiple copies of an operating system on a server or your local machine. In essence that is what most of the above services are doing. Some automate taking screenshots and some actually give you a virtual session using something like VNC or a browser based version of this and you can pay for “minutes” or “processing” time. Currently at my company we are using a combination of the above tools depending on the needs of the project.

I personally use VMWare fusion quite a bit on my mac when testing IE7 and IE8. I used to use it for all versions of internet explorer but recently dropped IE6 from the dreaded lineup of Microsoft Browsers we support. Now our solution for IE6 is to put a “blocker” script in place that throws up a jquery modal window telling the user to upgrade. I borrowed and modified this from our friends at CSS-Tricks

Found this Helpful?

I’m a pretty busy guy but when I discover a set of great tools that helped improve our productivity and effectiveness I like to share. I remember the days when I would try to ask google for help and it didn’t help me. So if you enjoyed reading this, have something to add please Comment and Share this.

I’ve downloaded and played with just about every twitter application or webapp that I can get my hands on. I will leave a list of them at the bottom of this post so you can check them out yourself but I wanted to call your attention my newest favorite twitter application.

With Hootsuite you can manage multiple Twitter, Facebook, Linked In and Ping.fm accounts all in one place. This is especially helpful if you manage multiple accounts for yourself or for your clients.

The interface is clean and the color palette is easy on the eyes. I especially like the “schedule tweets” feature which lets you stagger your tweets over a period of time.

Nothing is more annoying then seeing a bunch of someones tweets back-to-back to bulk down your twitter feed when your looking for whats happening in the tweetscape.

If your like me when you get a few hours to surf and catch up on your social life (the cyber version) its nice to be able to spread out when you are pushing out the 100 new things you just discovered so you don’t force your friends/followers to just unfollow/unfriend you.

Other features include:

• Multi-Column View
• Tabbed Layout
• Create Groups
• Schedule Tweets
• Quick Search
• View User Information
• Report Spam
• Clickable Hashtags
• Full Ping.fm integration
• Built-in URL shortener with trackable Statistics

Other Twitter Applications for you to experiment with:

• Twitterrific
• Tweetdeck
• Twittervision
• Twitterfeed
• Twhirl
• Twitpic
• Digsby
• Twitterholic
• monitter
• Seesmic – Previous Favorite
• Tweetie – Mac & Iphone only
• Ubertwitter – Best Twitter App for Blackberry Users (blackberry only)

Did I leave out an awesome Twitter App? Would you like to see me expand on something. Well I’m not a mind reader so let me know.

Minus having an Edit undo function in real life there is something nice about being able to organize your physical workspace into various piles of things and stick a post it note to your bulletin board or computer screen to put things into plain sight. Though its been around for sometime for Windows they recently released this cool little application on the Mac.

I love having this program on my macbook pro especially when i’m doing my usual weekend routine of surfing and catching up on emails, rss and the occasional creative or programming project.

Introducing BumpTop: bringing the 3rd dimension to your desktop

Apple’s built-in Web Sharing feature allows you to run a webserver on your own machine.

For ease of use on developing locally I personally prefer using tools like MAMP or XAMPP because they install and make it easier to get databases configured and require a great deal less work then going through terminal and configuring a bunch of things for application development. If you are already a hardcore command line junkie this post is not up your ally but read on if you want some light reading.

How to turn your Mac into a Web Server:

First we have to turn it on:

• From the Apple menu, select System Preferences
• Click “Sharing”, and then click the services tab.
• Select Personal Web Sharing, and then click the Start Button
• Checking that box will turn on Personal Web Sharing and this will basically turn on an Apache Web Server inside of your computer. if you want to see what you have just enabled open up a browser (Safari or Firefox) and look for the address at the bottom. In this example it is http://10.1.10.50 and clicking on that or entering it into your browser will open up the homepage for your newly enabled web server. Providing you haven’t installed any other web servers you can also point your browser to “localhost” without the quote marks.
  

Where do I save my site files?

You can save your files for a site within your main Library folder or your own users directory (recommended)

• Macintosh HD > Library > WebServer > Documents
• Users Directory > Your Username (homedirectory) Sites

Resources mentioned above:

MAMP for mac

XAMPP for Mac

How do i get rid of the ~username in my url?

This whole blog post evolved cause one our UX designers who does Design and Front-end development (HTML/CSS/Jquery) didn’t want to go and install a web server like MAMP or XAMPP on his machine since he was only really using the Web Server to render files that had PHP includes or other basic usages for cataloging his files locally. He didn’t need mysql and wasn’t working on any dynamic web applications.

For this reason he really just wanted to use his Sites folder on his machine and not have to type in the full path of localhost/~username/sitesfolder/filename and just wanted to be able to get access to it from going to localhost.

to change which folder the Apache web server resolves to you are going to need to edit the Apache HTTPD

to do this open up terminal by going to your Applications/Utilities/Terminal.app

once you are in terminal:

start by typing (without the quotes)

 "cd /etc/apache2"

and hit return. This will take you to the apache webserver main folder using the “change directory” command in Unix.

from here we are going to need to edit the Apache HTTPD configuration file.

rather then opening it in pico or a command line editor type the following command to open it with TextEdit which will make it easier to view

"sudo /Applications/TextEdit.app/Contents/MacOS/TextEdit

 /etc/apache2/httpd.conf"

(remember do not put the quotes and put all these on one line.

we use the sudo command because we need to access a file that is locked and requires a special user called “root”

the sudo command is short for “switchuser do” as in switch the user and do the command. we trail it with the path to the TextEdit application to make it easier to edit then using Pico or Vi which are command line Visual Editors in Unix which our nice Apple OSX is built on.

My recommendation to you is to immediately do a backup of this file in case you break it by going to File… Save As…

Once you have done that its really easy simply find the line in the code that reads

DocumentRoot “/Library/WebServer/Documents” and comment it out by placing a # in front of it as shown in the picture below. Adding a # before anything in this file tells the file to ignore what is there.

obviously change out the username for what your computers username is.

if you don’t know your computers username go back up to the first picture in this tutorial and find the Web Sharing section inside of the system preferences. In my example the username is craigkeller which can be seen following the ~ above.

The next thing we are going to have to modify is the Directory.

The Directory setting can be found by doing a find for:

<Directory "/Library/WebServer/Documents">

and changing it to reflect the path to your sites folder.

As you can see from the photo below i’ve simply commented old the previous and added my own. Commenting out the previous code is always good because you can easily revert it to what it was defaulted to if need be.

This is just one of the ways you can change where your localhost points in your sites folder.

There are other ways to do this such as adding Aliases in your HTTPD configuration file or even creating something called a symlink but for purposes of solving the problem for the non technical I have written the above.

I don’t write alot of these things primarily because time is lacking so If you found this article helpful please comment on it and let me know so that I continue to write more things like this when i stumble on and fix them for others.