Jason Gabriele’s Blog

I created a fancy carousel which extends the YUI carousel widget. You can find more information here or view a sample here.

I created an extension for use with YUI that allows developers to store data on the end user’s local machine. I would consider it “testing” quality right now as I haven’t done many tests to see what the performance limitations are. It uses globalStorage, localStorage, and a Flash file depending on which browser is present. Since Safari 3.2 and IE 6&7 all need to use the Flash applet, you may want to hold off using it in production until the next version of Safari and IE 8 are released. If you have any questions or comments please email me.

Cache for YUI

As any web developer has experience with, designers and managers alike love rounded corners. We have grown to both anticipate and dread implementing them in various size and colors. What many web developers don’t yet realize is that the latest releases of web browsers support the new CSS 3.0 property: border-radius. Using this property, you can instantly add rounded borders to any box object. However, it comes at a price: neither IE (6/7/8) nor Opera 9.6 support the border-radius property. This means you will need to still create images for the corners for use with these browsers or use an htc file (which I don’t recommend for performance and complexity reasons). Using the following technique, you can make rounded corners which will both degrade gracefully in IE and also avoid unnecessary images in browsers that do support the new property.

First, make a corner sprite image and call it corners-sprite.png. Example:

Next, create the html for the sprite:

<div id="rounded">
<p>This is a test</p>
<span class="corner topleft"></span>
<span class="corner topright"></span>
<span class="corner bottomright"></span>
<span class="corner bottomleft"></span>
</div>

Finally, add the following styles:

div#rounded { padding: 8px; position: relative; width: 300px; background: #ccc; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px }
div#rounded span.corner { display: none; *display: block; overflow: hidden; height: 6px;width: 6px; position: absolute;
background: #fff url(/vir/wp-content/uploads/2008/11/corners-sprite.png) left top no-repeat }
body:empty div#rounded span.corner { display: block } /* FF2 */
div#rounded span.topleft { top: 0; left: 0; background-position: 0 0px }
div#rounded span.topright { top: 0; right: 0; background-position: 0 -8px }
div#rounded span.bottomright { bottom: 0; _bottom: -1px; right: 0; background-position: 0 -16px }
div#rounded span.bottomleft { bottom: 0; _bottom: -1px; left: 0; background-position: 0 -24px }

Your box should appear as:

Note: This technique is not supported in Opera 9.6; users will see square corners. I’ve been very annoyed with Opera’s recent development as they seem to have removed any CSS hacks while not supporting new features. Since Opera continues to trend downward on most browser statistics I’ve seen, I’m tempted to remove support for it completely. Opera either needs to implement a CSS hack or implement every feature that webkit and gecko have today.

I’ve been using Windows Vista (Ultimate x64) since February 2007 and so far I have had a mixed experience with it. First, I will start with what I do like: the Avalon effects look and feel very nice, the new start menu is nicer (especially the search box), the integrated search (esp. the Outlook 07 search), per-application volume mixer, and I’m sure a couple of other things I can’t remember at the moment. For all of the things I like about it, there seem to be a number of unnecessary, undesired aspects that should be fixed. These are not listed in any particular order.
1) Poor Driver Support

Since I’m using x64, I made sure to check that I would have driver support before I installed Vista. I got lucky and in fact most of my current devices were supported so I moved forward. Those drivers, however, were not totally working. My Creative X-Fi card has never completely worked. I get popping and clicking at random times and sometimes hard crashes while playing games. I’ve probably had more blue screens in the past year than I had the previous 2 years with Windows XP. I thought a major selling point of Vista was that more functions were moved to userspace so that wouldn’t happen.

2) Application Crashes and Errors

When I’m not getting a blue screen, I instead get a cryptic message about how the application “Stopped Working”. Sometimes the application continues to run fine and I just need to move the error dialog out of the way to continue my work. And the error dialogs have gotten more annoying than ever; first I get a dialog box, then after I close that I get a tooltip on the taskbar, finally I get a useless Windows Help dialog which allows me to search for an answer online (which of course never finds anything). This has, however, been less frequent with SP1.

3) Weird Design Choices

I won’t talk about UAC here; that gets its own section. Microsoft, what is wrong with Network Connections? Why did you decide to hide this very useful folder behind a useless one? You could have at least made it an item when I right-click on the network connection icon in the system tray. I’ve gone as far to make a shortcut to the network connections folder on my desktop just so I can skip the useless Network and Sharing Center. Also, why do you automatically try to guess what the contents of my folder and change my view? I just want the details view. I always want the details view. Don’t remove my columns or replace them with ones I don’t care about. Even applying the settings to all folders (under ‘Folder and Search Options’) doesn’t seem to fix this. Also, why does it ask me only if I want to reboot after applying updates? Sometimes I want to shutdown. You should always provide that option as well. And then there’s file sharing. Why did you make it so hard to share a single folder? At least offer Windows XP simple file sharing in read-only mode.

4) UAC?!

UAC has some major issues which need to be fixed right away. Microsoft should have just flat out copied Apple’s implementation on this. UAC pops up a vague dialog too often and ends up just being annoying. If people train themselves to just hit ‘Continue’ and ‘Allow’ all the time because you constantly bombard them with dialogs, then you end up with a security mechanism that is no better than none at all. First, start by making this dialog come up faster. For some reason, there seems to be a pause of up to a second (makes a difference - trust me) before the dialog shows up. Second, display some information about what it wants to do on there. Finally, I don’t see why there needs to be more than 1 dialog at a time. I don’t need a dialog to let me know that another is on its way.

From SP1 comes forth a new annoying dialog: “Do you want to move or copy files from this zone?”. It comes up when copying/moving files off of a Windows network share to your local computer. It seems to be related to Internet Explorer but I can’t get rid of it using the techniques I found doing a search.

5) Windows Update Takes Forever

Something definitely happened here. Windows Update has always been slow but now it takes forever. I have Vista installed on two pretty modern systems and sometimes it can take 30+ minutes just to install a couple of updates. Then it needs to ‘configure updates’ before restarting and after restarting. I’m not quite sure what its doing, due to cryptic messages, but please speed this up. Also, get rid of the nag screen about having to reboot my computer. At least offer an option to dismiss the dialog permanently. Finally, never, under any conditions, automatically restart my computer!

6) DirectX 10

I know the excuses about this being Vista only, but no one will really develop for it until Vista has a large enough user base. And with XP getting about 10% better framerates, don’t expect that to happen soon. If you really cared about DX10 and the future of computer gaming, you would have released DX10 for XP.

7) Sidebar Widgets Need Some Work

This is a small request which should be rather easy to fix. The problem is you didn’t spend enough time developing the main sidebar widgets. I should be able to click on the weather widget and it should popup the entire 7-day forecast, the stock widget should allow me to expand it vertically so I can view as many stocks at one time as I want, and there should be full-featured Outlook widgets and more MS developed widgets in general.

8 ) Save My Icon Positions!

This one is technically valid in Windows XP as well. We’ve all installed a new video driver before and know what happens - the installation resets the resolution to the Windows default and all of your icons get messed up. Instead, Microsoft should figure out how to save the icon positions automatically so they return to place after the video driver installation is finished.

9) Search Indexing Runs at Random Times

At random intervals, search indexing will decide to kick in. There needs to be an easy or, even better, automatic way to pause search indexing. For instance, search indexing should not run at all while playing games or while CPU usage is high. This is just a bad user experience. Give us a way to pause search indexing.

10) No Powertoys

This one is pretty straightforward - just bring PowerToys to Vista. PowerToys has become such a critical part of the XP user’s experience, Vista should have actually shipped with it.

11) Networking Issues

Sometimes Vista will decide to connect to both wired and wireless internets at the same time and randomly send data over the one it likes best. The standard rule should be to disable wireless if the wired connection is operating. This is very annoying at work where wired connections are behind the firewall, whereas wireless connections are not. Occasionally, I wonder why I can’t connect to the intranet and then figure out it’s connected to wireless again.

For the reasons above, I’ve been unable to recommend Vista to my friends and family. Microsoft, please help!

For years, I’ve been using a Firefox extension called Adblock. It uses publicly maintained lists to completely hide ads (and stops some JavaScript cookies) from the end user. Not only does Adblock hide the ad, it actually collapses the space where the ad should have been. This leaves more column space for text in ever shrinking content areas (see screen below). While great for users, this has been a thorn in the side of content producers and various internet portal companies. While some might say content producers have driven them to block ads by using obnoxious flash animations and JavaScript ads which actually extend out of the ad space, no one will argue advertisements support and make the web as we know it possible. In this article, I will describe how AdBlock works and how content producers can beat it.

Introduction to Adblock

Adblock Plus (available here) is a Firefox extension developed by Wladimir Palant from the original AdBlock code, allows users to subscribe to filter lists which are updated by regular users. A filter list just contains the URLs of ads for which the extension will block. These URLs can contain wildcards so all files under a certain path can be blocked (ie. http://i.l.cnn.net/cnn/.element/img/2.0/content/ads/* will block all of the ads under that path). Wildcards are an important part of blocking large amounts of ads, since updating a list with all of the ads displayed on the web would be a seemingly impossible task. That important fact brings us the answer to how to get around the system.

Beating The Blocker

Since maintaining a list of all of the ads on the internet would be arduous, to say the least, we can devise a plan to defeat Adblock. We simply need to mix advertisements and content images into the same URL path structure. I’ve noticed some sites already have started doing this (perhaps serendipitously). For instance, you may have noticed ads starting to reappear on IMDB.com. They appear to be mixing ads along with content images into the same cryptic directory structure (ie. http://ia.imdb.com/media/imdb/01/I/32/34/74/10.swf). Since the path is just a jumble of random characters, filter lists are unable to create wildcarded paths to block the ads without risking also blocking desired content (news images/logos). Content creators, like Yahoo, can place their ads on the same “edge” servers that hold their content. An application would need to be created so people can easily upload content to the servers and the application’s backend would create the random path structure needed to confuse AdBlock. Since new ads and content are continuously loaded into the system on a day-by-day basis, it would be extremely difficult for a third party to keep track of which content is true content and which are ads.

Implications

So with this technique for defeating AdBlock, the question comes back to: “Why is the user using AdBlock?” Content creators and advertisers are creating increasingly more obtrusive advertising to generate more clickthroughs. Is this the right tactic? I’m not sure. People are growing increasingly resistant to traditional advertising (evidenced by AdBlock’s existence) and some of the most profitable groups are often the first ones to take action against advertising. Perhaps advertisers and content creators should work together to test if less obtrusive advertising can still be profitable. It might also keep the visitors coming back instead of using another site/medium with less annoying advertisements.

**Update**

I’ve gotten some hate mail for this one so I want to clarify that I do not support IMDB’s aggressive advertising style. Their flash ads are incredibly annoying and are among the worst of any major site out there. I simply used them as an example for the method of bypassing Ad Block because their site was one of only a few that seems to have figured out the technique. You can add the filter http://ia.media-imdb.com/*.swf to remove any flash from the site. It may not kill all of the bad ads, but I’ve found it helps greatly.

I’ve posted this in the past on my old blog, but I thought I would bring it up again since it still works. Internet Explorer has a bug which allows you to crash the browser. The bug occurs when IE tries to bring focus to an imagemap after you’ve switched it with another imagemap. It appears to reference the # of the area element which it had focused on before. If the new map has less than that #, there is no corresponding element to focus on and the browser crashes.

Here is the reproduce code:


<script type="text/javascript">
var crashMe = function () { document.getElementById("test").useMap = "#map2"; };
</script>
<img src="http://files.radixpub.com/crash.gif" id="test" usemap="#map1" />
<map name="map1">
<area href="javascript:return void;" shape="rect" coords="1,1,1,1" />
<area href="javascript:crashMe();" shape="rect" coords="1,1,300,300" />
</map>
<map name="map2">
<area href="javascript:return void;" shape="rect" coords="1,1,1,1" />
</map>


Link to file with code above

I just moved my site over to WordPress. I hope to post more often and at greater length than before. I’ve also decided not to copy my old posts and start fresh. I may be moving soon as I have an offer for a new position. I will post again when I know for certain.