New Media Fun

Throughout the day I am a heavy user of my Chrome browser (version 5). I open, search, flip, close, rotate my tabs on a regular basis and I notice after doing this with the browser for a couple of days (without closing the browser) webpages start to slow done and stop working or even crashing. This is noticeable with webpages that utilize a lot of AJAX such Gmail, Google Calendar or Google Reader.

The only solution I find that works when webpages begin to crash is to close down the browser and re-start it. It seems to be a pain and something Google needs to address.

One theory I have is Chrome has an interesting feature that allows you to re-open a recently closed tab. Once re-opened all the history for that tab remains so you can go back or forth if necessary.

Could this collection of history be adding up and causing the browser to slow down and eventually crash?

Has anyone else experienced this with their Chrome browser?

A while ago I discovered that Google offered a tool on Google Code that lets you compress/optimize the code to almost half the size of the original script.

I had always noticed that a lot of libraries such as jQuery, Moo Tools and various plugins have regular and optimized versions. It wasn’t clear to me how this compression was achieved. Then I stumbled upon Closure Tools by Google.

The Closure Compiler compiles JavaScript into compact, high-performance code. The compiler removes dead code and rewrites and minimizes what’s left so that it downloads and runs quickly. It also also checks syntax, variable references, and types, and warns about common JavaScript pitfalls. These checks and optimizations help you write apps that are less buggy and easier to maintain. You can use the compiler with Closure Inspector, a Firebug extension that makes debugging the obfuscated code almost as easy as debugging the human-readable source.

I was able to successfully use the complier to apply simple compression to my code. There is an advance setting, however, my code isn’t good enough for that level of optimization yet.

You can try the complier yourself at Google Code.

Here is a list of handy character codes I use on a regular basis:

• ampersand (&): &
• non-breaking space ( ): #&160;
• copyright sign (©): ©
• degree sign (°): °
• fraction one quarter (¼): ¼
• fraction one half (½): ½
• fraction three quarters (¾): ¾
• en dash (–): –
• em dash (—): —
• left single quotation mark (‘): ‘
• right single quotation mark (’): ’
• left double quotation mark (“): “
• right double quotation mark (”): ”
• horizontal ellipsis (…): …

For a complete list of Common HTML Codes

I am in the process of finishing up a new website for Alberta Network of Professional & Organizational Development (ANPOD.ca). One of the requirements for the site was to have wiki functionality.

The college isn’t set up to host our own wikis, so I needed to do some research to find a hosted Wiki solution. There were a couple of considerations I had to keep in mind when searching for a wiki solution:

• It had to be FREE
• The Wiki needed to be hosted
• Ability to add custom design
• Private viewing for registered members
• Control on creating and editing the entries

There where a couple of viable options:

• Wikidot
• Wikispaces
• Wikia

I ended up choosing Wikidot because it seemed straight forward and the ability to modify the design to compliment the ANPOD website design.

I won’t get into the particulars about using Wikidot; rather I will offer a handful of tips I have figured out while working with this website tool.

• Design: Keeping in mind that the structure of the wikis is set, however there are a handful of templates already constructed. I recommend extending an existing template and just modifying the CSS. It is easier than building a template from scratch and it allows you to do simple modification to the layout and color scheme.
• Modifying the Navigation: It wasn’t to clear how I could edit the navigation, the trick is to click on “edit this panel”. This will bring the navigation into the main content part of the page and then you can choose the edit button to modify the HTML for the navigation.
• Google Analytics: Under 3rd party tools, you can add your Google Analytics profile key for tracking traffic on your Wiki.
• Accessing Admin: To make changes to a Wiki, you need to go to the admin part of your site. You can access it by clicking on the “Site Manager” link. To get direct access to the site manager, you need to be logged in and add “admin:manage” to your wiki URL.

I am still getting used to this website. But it seems to hold a lot of promise, just not as straight forward as building a website with WordPress or DreamWeaver.

Interesting video showcasing new mouse prototypes created by Microsoft.

Not used very often these days, but every now and then you need to automatically re-direct visitors to a different URL as seamlessly as possible.

This can be achieved easily by inserting:

For those web developers who have the unfortunate task of designing with IE 6 in mind. Designs we encounter might make use of PNG files with transparency.

Internet Explorer 6 on its own doesn’t support PNG files with transparency. In order to make the transparencies work, you need to implement a fix that will allow the transparencies to work properly.

This is easily said than done.

A recent web design I was coding into HTML required the body of the content had to be transparent and allow the website background to show through. My challenges were that all the navigational images had to be transparent and the repeating background of the content box was semi-transparent and added a shadow around the content box.

I am a big fan of jQuery and naturally I try to find existing plug-ins that can be an effective solution to solve my problem. My search for jQuery PNG fix lead me to two possibilities:

1. DD_belatedPNG
2. PNG-Transparency for Windows IE 5.5 & 6

These plug-ins are great and work well for simple PNG fixes of individual images. However, I consistently encountered issues with repeating background images. This dilemma lead me to TwinHelix.

TwinHelix’s PNG solution is unique in that it uses the CSS to call an htc file. The file iepngfix.htc is referenced in the CSS:

In my CSS, I reference to “pngIMG” class which will apply the fix to any image that requires the fix. Most importantly, this method allow me to have repeating background images displayed properly. Definitely, my first choice for fixing PNG issues.

NOTE: If you are repeating a background image, the smaller the image, the more intense the fix is on the browser. Thus a slower fix result. My solution to that is to have a broader background PNG to repeat a lot faster.

This afternoon I attended a presentation to show off a telepresence system to let NorQuest college staff communicate between campus’.

The set up is a pc, high def video camera, LCD TV and light. The system delivers the video over alberta’s supernet network at 6 mbps!

The draw back is the cost. To set up to rooms on the basic system is close to $65,000! That doesn’t include setting up the rooms, audio design and designing the rooms to look the same on both sides.

Over all a really neat technology with a lot of potential. Check out the photos below:

Every web designer knows that every browser will cause havoc over their slaved over web design in one way or another. Cells have funny padding, div’s not where they are suppose to be and many more little nuances.

Unfortunately, not every browser is equal and the browser wars are here to stay. With different versions, different rendering engines and different ways to display the same thing. Not since the days of Netscape verses Internet Explorer has there been so many choices for users to surf the internet with. To name a few:

• Internet Explorer 5.5, 6, 7, 8
• Firefox 3, 3.5
• Opera 9, 10
• Chrome 1, 2
• Safari 3, 4

So what is a web designer to do? Well the are a couple ways to go about testing web designs:

Server side solutions - great if you are looking for screen shots of your design on multiple platforms and browsers.  However these services can be very slow and you are not able to interact with the designs. Check out Browser Shots.

Software solutions - probably the easiest and best way to test your designs and functionality on multiple browsers.  On my PC I work with;

• Firefox 3.5
• Chrome 2
• Safari 4
• Opera 10
• Internet Explore 5.5, 6, 7, & 8*

The downside is that I run the most current of browsers aside from the Internet Explore browsers.  Plus, I am unable to test on different computer platforms from Macs, PCs, Linux, old or new.

Future solutions – Adobe labs now is working on Browser Lab, which will allow web designers the ability to test the design against a wide variety of browsers.  It is currently under a limited release and I am looking forward to a opportunity to try the Browser Lab out.

* Running Multiple Internet Explorer browsers on one PC

A couple years ago I came across a great application that allows me to install and work with multiple versions of Internet Explorer. The program is called Multiple IEs. It is a free program that works in Windows.  With this application I can test my design/code against IE 3, 4, 5, 5.5, & 6.

Since Internet Explorer 8 came out, the same developer has created another application to run a standalone Internet Explorer 7.

What solutions do you use to test your web designs?