A quick and dirty benchmark of Opera 9.5
So a day or three ago Opera 9.5 was released. I didn't realize it had been released until after I had read about it on lifehacker, gizmodo, and/or engadget, but it came out and the masses rejoiced (lifehacker is still throwing a party about it). Back in the day I loved Opera, the tab feature was my favorite (before firefox came along). I use opera on my wii, and I even used it on my mobile a while back (the mobile is gone, in case you wondered). I read a few stellar reviews on it, and after seeing how it handles speed-wise, I decided to give it a shot. With everything that I'd read about Opera 9.5, I came out with very unexpected results. Opera is by no means a developer browser... at all... seriously. I mean it's really sad when IE can b!#%h slap a browser. Don't believe me? that's what screen shots are for.
I set up a test, I ran Opera 9.5, Safari 3.1 (for windows), IE7 With the Web Developer Toolbar running, and Firefox 3.0 (released today*!) with many plugins running (Firebug 1.2.0b03, ietab 1.5.20080310, fireform 0.6.3, Web Developer 1.1.6, and Html Validator 0.8.5.2). Here are snap-shots of my task manager after the browser had been opened and left on a LOCAL html file for approximately 5 minutes.
Safari 3.1 (above) - No CPU usage, and a very respectable 34MB** of memory being used.
Firefox 3.0 (above) - a little CPU, and a little more memory (this is most likely due to all of those plug-ins I have running)
IE7 (above) - better than firefox, and not chewing on any CPU... very interesting (and by that I mean I'm a little surprised).
Wow! that sucks! I mean what is Opera even doing? 50% of my CPU and over 300MBs of RAM? I don't remember them signing up with the SETI program! (ok fine, lame joke, I get it). Seriously though, that's just nuts for a browser!
Ok, now that we've seen the damage after being open for a several minutes, let's minimize all the browsers to see how it can behave down in my task bar (and hopefully free up some memory).
Safari 3.1minimized (above) - Nice, it just fades away into the background waiting to be used.
Firefox 3.0 minimized (above) - Well at least it gave up the 2% CPU it was chewing on.
IE7 minimized (above) - Explatives!! under 4 megs of memory!?! that's it, the world has gone mad...
Opera 9.5 minimized (above) - wth!? Still chewing on 50% of my CPU and crunching 170ish megs of ram? Why is everyone going nuts over this browser? Did mine not come with the hypno-ray?
Anyway, I'm sure that everyone's experiance will vary. Especially on other platforms. I mean who knows, maybe in linux or on a mac Opera really is the best browser. Also I didn't even cover all of the cool features that Opera has (and yes it has some really sweet features, so I'm keeping it installed). So go grab it and see if it destroys your system like it did mine.
*I started this post yesterday, so firefox really had been released "today"
**Yes we all know that a mb is actually 1024k not 1000, but hey getting too critical just makes it easier for me to make fun of you.
This test was run on an intel Core2 6600 @ 2.4GHz with 4 GBs of ram.
Print This Post
jQuery pngFix
One of the greatest jQuery plug-ins that I have stumbled on has been the pngFix plugin. This fantastic piece of code takes your png images and applies the AlphaImageFilter logic to make ie6 actually display them with the correct transparency (not that nasty gray-ish stuff) When I found it, I was ecstatic, when I first tried it I was overjoyed! Then I tried to develop with it.
While this may be uncommon for most users, it has a severe bug. In fact the bug was mentioned on the creator's blog in the comments by one unfortunate user (Dj) who ran into the same thing I did. The problem arises when you use a png as a clickable object, or even as a background where your clickable object is going to be. As near as I can tell, when the pngFix executes, it grabs all the png files on the page and runs then through the image filter and then slams them back down on the page. On top of all of your links... on top of everything. I tried changing the z-index of my links, I tried changing the png image from a background to an img-tag. Nothing worked. I had almost given up hope (as there was no answer posted on the blog) when I found another site that mentioned the problem. Someone in there (Elbert Oh) had commented that they had found a possible solution and pointed users towards this site for examples.
By using the example site, I ended up with a working solution (this will be deployed in the new ProForm site)
Here is an example of the solution (with the correct code in place)
Here is the header image that will link back to the homepage
Seems simple enough right? Here's the css that I used.
#logo { margin-left: 531px; height: 90px; background: url('images/logo.png') no-repeat scroll 0px 3px; } #logo a { display: block; width: 459px; height: 90px; position: relative; z-index: 1; } #logo a span { display: none; } |
What you should be able to see here is that I set the logo appear on the right side of the page (hence the fatty margin-left). Then I set the height of the object, and finally pointed it to the png image that I'm using as a background (that without the fix would be picked up, filtered, and then slammed back down on top of my clickable area).
I made the link take up the entire image area by making the display a block and setting the width and height to the same dimensions as the image. Then there's the real magic of making this work. setting the position to relative, and then setting the z-index to 1. ((POSSIBLE BS ALERT)) Somehow the positioning gets tweaked when the transparency filter is applied and that is part of the reason for the links becoming unclickable. By setting the position to relative, and then setting the z-index to 1, it forces the image to stay where it is and leaves the links clickable. That may not be what is actually happening, but I think that's what's going on...
Anyway with those small changes, the site* is now working with clickable links and png images in ie6, ie7, Firefox 2, Firefox 3, Safari 3.1, and Opera 9.5 .
*The development site on my local server, not the actual ProForm.com as we have not launched the new site yet 
Print This Post
Aptana: an IDE for JS/AJAX developers
One of the things that I really like when I develop is a good IDE. Now I don't usually use all the extra bells and whistles but I like auto-complete, error checking, and a solid testing engine/server.
When I first jumped on the java train, I used a community version of SunOne Studio. It was nice, it only crashed when you didn't want it too, and was the right price (for educational purposes). Later when I took more java classes I used JBuilder, for a about a week. I'm not saying JBuilder is bad, it's just not as free as Eclipse (my current favorite IDE for all my java needs).
Anyway to shorten the story, I use eclipse (or a variant like EasyEclipse) for my java and php development, but I had not found an IDE that supported prototype and jQuery (and by support I mean the previously mentioned features, you know, auto-complete, error checking, etc). That all changed when I somehow stumbled onto aptana studio.
Aptana is a fantastic IDE that is based on Eclipse, but features a built-in rendering engine/server, support for all the popular javascript libs (prototype, jQuery, mooTools, mochikit, Dojo...) and is brimming with scripts, snippets, and helper libraries. They have even developed an interesting technology called "jaxer" (which stands for ajax-server). I haven't played with Jaxer yet, but it sounds like it can do some fascinating things. There are also plug-ins for iPhone development, AIR support, and PHP development.
What I mostly use Aptana for is testing new web 2.0 pages. For example, on one of our sites we redesigned the press release page. Development on that site is done in WebSphere 5.6.1, which means I have to dig out a VM and do my work in there... which is lag-tastic (especially the test server). With Aptana, I can test everything cleanly up front and see what I'm going to get (with a quick page mock-up) before I attempt to code the whole thing in the VM. If you're bored, give it a try, it's a fairly hefty download, but it's worth playing with it.
Aptana comes in two flavors, Community and Pro. There is a comparison chart on the aptana studio download page.
Print This Post
find your .ini
Sometimes I dabble in php a little so when I run onto something I wanna remember I like to tuck it away somewhere where I'll remember where it is. This handy little snippet will tell you where your php.ini file is loading from. This is especially useful if you are using xampp/wampp/lampp since they tend to have multiple php.ini files and it's anyones guess which one they are using (at least xampp does).
<?php /*****CHECK TO SEE WHAT PHP.INI FILE IS LOADING*******/ $path = php_ini_loaded_file(); if ($path) { echo 'path to php.ini: ' . $path; } else { echo 'A php.ini file is not loaded'; } ?> |
Here's a quick game, who can tell me how many times the word "where" was used in this post (including "somewhere")?
Print This Post
A slightly closer look at JSMin
A month or three ago I did a post on different JS compression utilities. At that time I had decided that the YUI compressor was the best.
"In my opinion YUI is the best, you can choose several different compression levels and it works very well compressing prototype, so well in fact that we got it to shrink down an extra 10k than what had been done with ShrinkSafe. Also the YUICompressor is semi-intelligent with whitespace, it checks for ascii characters before and after a piece of whitespace to know if it should remove it."
After learning a bit more, I haven't completely changed my mind, but I thought that I would mention JSMin a bit more. The main reason for this second look is that when combined with gzip (or deflate), JSMin really is a wonderful solution to compressing your javascript files (and the solution recommended by the jQuery team).
Speaking of jQuery, you can use JSMin to shrink the jquery.js down from 95k to 53k. Then you can use gzip on your server and it will crunch down to about 15k! I haven't tried using gzip on a yui compressed file, but it may have the same problems that a PACKED js file has. Meaning gzip either won't work on it, or your functions will "esplode".
You can grab JSMin here (at the time of this post, the link to download the file is at the bottom of the page).
Print This Post
IETester: my new best friend for handling my worst enemy
I found a great tool out in the depths of the interweb, and I thought that I'd do a quick-ish post on it so that I can share the happiness with other people. The tool is called IETester, and it is brilliant. It seems to be a mdi container that is hooked into the api's of IE5.5, 6, 7, and 8 beta 1. This allows you to crack open a tab using each rendering engine and view your websites the way they would look in that browser.
This (above) is a screen shot of the program with the about pop up showing as well as several tabs open (all at nordictrack.com)
NordicTrack in IE 5.5 (above)
NordicTrack in IE 6 (above)
NordicTrack in IE7 (above)
NordicTrack in IE8 (above)
As you can see from the pictures, each release of IE handled the css styling and the page layout a little bit differently. It's almost fun to watch IE change from its quirky youth to an almost standards compliant browser (yes almost is a stretch isn't it).
BUGS:
Yeah you knew there'd be some, here's what I found, and what is posted on the developer's website.
- I almost went into epileptic shock while using it. Lots of screen flickering.
- It crashed on me the first time I opened it, not sure why.
- If you resize the screen, content may disapear.
- Flash may not work in the IE6 rendering engine (note: it did work for me at freemotion).
- Previous/Next buttons may not work.
- Focus doesn't work properly.
- Java applets esplode.
- Javascript loading may have problems... (may be the hidden cause of the screen flickering)
Print This Post
Proform _SUB products
FYI, if you get a tasks asking you to change the price of a product on proform and said product has a duplicate (or _SUB product) DO NOT change the price of the _SUB product unless asked to, or asked to change the price of the 'Beneplace' product.
I suppose some will need a reason for this. It's simply because the _SUB products are used for a hidden category that can only be reached by direct link. If you change the price of the _SUB product you will likely eliminate the special deals we give to those customers.
Print This Post