Targeting specific Browsers with CSS

Categories: HTML/ColdFusion

Pail Irish posted a nice concise list of CSS hacks for targeting specific browsers. While I'd love to avoid using hacks altogether, I just continually find cases where it's necessary so this list is a handy little reference:

/***** Selector Hacks ******/
 
/* IE 6 and below */
* html #uno  { color: red }
 
/* IE 7 and below */
*:first-child+html #dos { color: red } 
 
/* IE 7 and modern browsers */
html>body #tres { color: red }
 
/* Modern browsers (not IE 7) */
html>/**/body #cuatro { color: red }
 
/* Opera 9.27 and below */
html:first-child #cinco { color: red }
 
/* Safari */
html[xmlns*=""] body:last-child #seis { color: red }
 
/*safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }
 
/* saf3, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { background: #FFDECE; border: 2px solid #ff0000  }
}
 
/***** Attribute Hacks ******/
 
/* ie6 and below */
#once { _color:blue }
 
/* ie7 and below */
#doce { *color: blue } /* or #color:blue */
 
/* 'Modern Browsers' includes IE8, whether you agree or not.. :) */

I did notice that the "*" hack (i.e. "*color: blue") also seems to get picked up by IE8, while he lists the hack as for being for IE7 and below.

Paul even set up a test page with all the hacks for testing.

Nice job Paul!

Ganymede Mylyn v3.1.1 not working with Trac 0.10.4

Categories: HTML/ColdFusion

I recently upgraded to Eclipse 3.4.2 (Ganymede) and started having problems connecting to Trac. I didn't have any problems with Mylyn v2.3.2 in Eclipse v3.3, so I knew there were no configuration issues my installation.

The first thing I did was bust out an HTTP proxy tool so I could view the HTTP traffic being sent. Turns out that Mylyn was not sending the authentication header, so my servers was just spitting back a 401 authentication failed message.

I did a lot of searching and finally found the authentification fails with mod_auth_sspi or NTLM issue in the Mylyn bug tracker—which appears to be the exact issue I'm having, but alas upgrading to even the weekly (Mylyn v3.2) did not fix the problem.

Finally, I decided to just uninstall all the versions of Mylyn I had installed, but v3.0.5 that came with my Ganymede installation. To do that, you've first got to disable all the plug-ins and then you can uninstall.

Fortunately, rolling back to v3.0.5 has gotten me up and running again.

NOTE:
Our Trac server is running Apache 2.4 with Trac 0.10.4. We also are using SSL with a custom cert and using Windows Authentication.

Fixing jQuery's slideDown() effect (i.e. Jumpy Animation)

Categories: jQuery

[UPDATED: Wednesday, April 22, 2009 at 8:43:54 AM]

I was working on some code today and was using the jQuery slideDown() and slideUp() effects and was running into an issue if the height of my box wasn't greater than certain height. As the box would slideDown, I'd see this jump in the animation as the height originally grew too large, so when the animation finished and it would go to the original height, I'd see this "jumping" effect.

Remembering that I read a recent post by Remy Sharp on the subject, a quick Google search brought up Remy's SlideDown Animation Jump Revisited post.

This turned out to be the same issue I was experiencing. Since I needed a little more generic version of Remy's code, I modified his original source to come up with this workaround:

// this is a fix for the jQuery slide effects
function slideToggle(el, bShow){
  var $el = $(el), height = $el.data("originalHeight"), visible = $el.is(":visible");
  
  // if the bShow isn't present, get the current visibility and reverse it
  if( arguments.length == 1 ) bShow = !visible;
  
  // if the current visiblilty is the same as the requested state, cancel
  if( bShow == visible ) return false;
  
  // get the original height
  if( !height ){
    // get original height
    height = $el.show().height();
    // update the height
    $el.data("originalHeight", height);
    // if the element was hidden, hide it again
    if( !visible ) $el.hide().css({height: 0});
  }

  // expand the knowledge (instead of slideDown/Up, use custom animation which applies fix)
  if( bShow ){
    $el.show().animate({height: height}, {duration: 250});
  } else {
    $el.animate({height: 0}, {duration: 250, complete:function (){
        $el.hide();
      }
    });
  }
}
UPDATE 2009-04-22:
  • Added check so that if requested toggle state is the same as current state, no animation occurs

While I could have written this as a plug-in, I kept it as a function—mainly because this issue should be fixed in the jQuery core soon (if it's not fixed already in the SVN repository.)

To use the solution, just pass in a selector to a unique element (such as "#element-id") as the first argument. The second argument is optional and can be used to force the direction. Use true to force it to slideDown() or false to force it to slideUp(). If the argument is left off, it'll toggle the state of the element.

Anyway, thanks to Remy for figuring out this issue. I'm sure I would have spent way more time tracking down the glitch if it weren't for the fact that I remember reading this when he posted the solution.

NOTE:
If you're element changes dynamically changes height, this solution won't work for you—because it stores the original height and always uses that. You could workaround that by using the data() method to kill the stored height (i.e. $("#your-element").data("originalHeight", null).)

Eclipse showing .svn-base files in "Open Resource" dialog…

Categories: Java, HTML/ColdFusion

Recently after installing a fresh copy of Eclipse 3.4 on my PC, I ran into an issue with the "Open Resouce" dialog ([CTRL]+[SHIFT]+[R]) where it was showing all my SVN files. Installing Subclipse is supposed to make the Eclipse IDE automatically hide the .svn-base files from showing up (via the "Team" interface) but it wasn't working out for me.

Turns out there was a very easy solution to this problem—just right click on the project and choose "Close Project" from the menu. After the project closes, just right-click on the project and select "Open Project." This should reinitialize all the settings on a project and appears to registered the handling of automatically hiding the .svn-base files.

An alternative, would be to add the find your org.eclipse.ui.ide_3.4.*.jar (org.eclipse.ui.ide_3.4.2.M20090127-1700.jar) and then modify the plugin.xml file to include the filter "*.svn-base". I don't like this option because it requires you to change a JAR that could later be updated.

If you choose that route, close Eclipse and open the JAR with a Zip extraction tool. Next, search the plugin.xml for the text "<filter". There should be one filter tag:

Flash + IE7 + SSL + XML = Epic Fail…

Categories: Flex/Flash, HTML/ColdFusion

Yesterday I ran into a very weird issue that one of our users reported. They complained that a Flex component was not working. Originally they described the problem as the Flash wasn't loading at all, but after digging around (and having the user send a screenshot) I realized the Flash was running, but it just wasn't getting the data.

Sure enough, I fired up Internet Explorer 7 and I saw the exact same issue. This was working fine in other browsers (such as Firefox, Safari and Chrome.) I was also having no issues using SSL on our development server. All I can think was "WTF?"

So, off to Google I went looking for an answer.

After some digging, I finally came across Mark Speck's IE7 + SSL + XML? = Flex "Error #2032: Stream Error" post. While I had found a number of similar posts declaring the same problem, every other article I found indicated this was only a problem if the "Cache-Control" header was being sent—which my production server was not sending. However, Mark also documented that this issue could occur with no "Cache-Control" heading—which matched what my production server was doing.

Since I wanted to be able to handle this problem programmatically (because I didn't want this issue to crop up again if we ever migrate servers or add more servers to the cluster,) I decided the best method to solve this problem was to serve up the XML dynamically using ColdFusion. I was able to resolve the problem by moving my XML into a CF template with the following code:

<!---// send the headers //--->
<cfheader name="Content-type" value="text/xml" />
<!---// this is required so IE7 will load the XML over SSL //--->
<cfheader name="Cache-Control" value="no-store, must-revalidate" />
<cfheader name="Pragma" value="public" />
<cfheader name="Expires" value="-1" />
<cfcontent reset="true" />
<xml>
    <goes />
    <here />
</xml>

Thankfully this resolved the issue.

However, I was never able to figure out why I was not having the problem in our development environment. The headers were virtually the same between the two servers. I'm beginning to think this problem might have also been related to the static XML being served via GZIP over SSL, but my dynamically served file is still being GZIP and is using SSL—so I'm not positive GZIP played a part.

I did find one other solution and that was to serve the static XML over HTTP instead of HTTPS. However, we're forcing traffic over SSL, so that option would work for us.

Vince Bonfanti gets OpenBlueDragon CFML engine running on Google Apps

Categories: HTML/ColdFusion

I thought this would hit the blogsphere a little harder, but Vince Bonfanti was able to get a heavily modified version of Open BlueDragon running on Google Apps. The announcement is a bit buried in a Google Group list for Open Blue Dragon, but the announcement is pretty exciting, because it opens up a new alternative for hosting a ColdFusion application and it's free for pageviews less than 5 million a month.

Here's what Vince had to say about what was required to get things running:

No, this wasn't done using precompiled CFML templates--it's running a
"raw" CFML page just as you normally would.

The Google App Engine (GAE) puts a number of restrictions on Java
servlets, the most significant for OpenBD are: (1) you can't write to
the file system (but you can read from it); (2) you can't create
"background" threads; (3) you can't use any of the java.net.* classes;
and, (4) you can't use any of the java.awt.* classes. There are a
number of other restrictions when accessing the Java class libraries.

Basically, I modified the OpenBD code to workaround these
restrictions. This meant things like not writing out the
bluedragon.xml configuration file, writing logs to System.out instead
of the bluedragon.log file, disabling runtime error logging, etc. It
also meant removing or disabling some features, such as CFCHART,
CFTHREAD, CFHTTP, CFLDAP, CFMAIL, CFSCHEDULE, etc., which won't run in
the GAE environment due to the Java class library restrictions.

We still have a bit of work to do to clean this up to make it ready
for public consumption. I've handed this off to Alan Williamson, who's
going to work on modifying CFQUERY to work with the datastore (GAE
does not support SQL datasources).

While we're working on this, I'd recommend becoming familiar with the
Google App Engine for Java:

http://code.google.com/appengine/docs/java/overview.html

I'd especially recommend becoming familiar with the Eclipse plug-in:

http://code.google.com/appengine/docs/java/tools/eclipse.html

As you can see, there's a lot of modifications that were required and some that may even be deal killers depending on your requirements, but there's still plenty of opportunities to build something exciting.

This would be an excellent way to put an idea to production without investing anything but your time.

TimeWarner's decision to implement bandwidth download caps…

Categories: Technology, Personal

While my current monthly download usage is pretty small, TimeWarner's decision to implement download caps really irritates me. They want to implement caps of 1 GB, 10GBs, 20GBs, 40GBS and 100GBs based on different tiered packages and then charge you overages for every GB over your limit (with the a $75 cap of overage charges.)

They've been facing a backlash about this decision and rightfully so in my opinion.

As I stated earlier, my current download usage isn't very high, but one of the immerging Internet markets in downloadable movie rentals. When the XBOX360 introduced it's Netflix interface for watching streaming movies online, I thought that was a huge jump forward in downloadable movies. Well the Netfix streaming library is still too sparse and doesn't include enough new movies, that will change over time. I certainly see a time in the near future where you'll be able to rent movies purely online.

This is why I'm so irritated with download caps. We're seeing more an more Internet based services succeeding. We're seeing more SaaS applications having success, streaming video taking off and of course iTunes has seen great success. All of these services share one thing in common—they require downloading content to use the services.

If TimeWarner really needs a way to help recover costs, don't limit how much I can download, limit how fast I can download it. TimeWarner has kept bumping up the bandwidth transfer rates, but most people don't need 6Mbps or 8Mbps sustained xfer speeds. I'd much rather see them keep the tiered xfer rate pricing and keep the uncapped download speeds. Let the people who need the higher transfer rates (because their transferring tons of data simultaneously—which is where the real problem lies anyway) and let the rest of us just download the data we need without having to worry about our download usage.

This really makes me hope Verizon bring FiOS to Central Ohio sooner, rather than later. Verizon currently has no plans to cap their download usage and the xfer rates are already much higher than TW. If TW does implement download restrictions, that will be the straw that broke the camels back.

Not only will they lose me as a RoadRunner customer, they'll probably lose me as a Cable subscriber as well.

Illustrating how sorting algorithms work with animations…

Categories: HTML/ColdFusion, JavaScript

I ran across a cool site today called Sorting Algorithm Animations. The site covers 8 popular sorting algorithms and gives you animated illustrations so you can see how each sorting algorithm works. You can even run the animations for all sorting methods at the same time to see how each compare in performance to one another.

What's really interesting is that it shows there is no "best" sorting algorithm. While "bubble" sorting works great when the data is nearly sorted, it's horribly slow when the data is ordered in reverse order. Other methods tend to perform about the same regardless of the randomness of it's data.

The other nice thing is that it details the algorithm used for each sort technique.

This is a great resource if you need to roll out your own sorting algorithms and are trying to decide which algorithm makes the most sense for you application.

ScreenCastle offers free web-based screencast recording…

Categories: Potpourri, Technology

I ran across the ScreenCastle service the other day and wanted to blog about it. ScreenCastle offers a free Java-based screencast recording solution. What separates it from other solutions is there's no installation required—other than accepting the Java cert when the applet loads.

It's definitely not as feature rich as Camtasia or Jing, but it will serve the most basic purposes for recording.

Where it really shines is as a tool for debugging a customer's problem. They don't need any other software installed, they just go to the ScreenCastle website and click on the big red button and record away. When their done recording, the video gets pushed to the ScreenCastle server and then provides the user with links, embed code, etc—which they can then e-mail to you.

The service is offered by Skoffer—who has published some information on their limited API. They show some examples on how you can integrate the service into a Wiki or Blogging service (such as WordPress.)

I'd love it if they opened up the API a little more, so that you could potentially push the content to private servers (or at least be able to download a published file and then remove it from their servers.)

Anyway, this is a great tool if you want to be able to have a customer record what they're doing on the screen and send you a video of it.

Moving Flex Builder Plug-in to a fresh Eclipse install

Categories: Flex/Flash

Mike Jones just publish an article on Reconnecting Flex Builder Plug-in To Eclipse—which shows how to move an installation of your Flex Builder Plug-in to a new installation of Eclipse without having to uninstall/install. His instructions are for Mac OSX, but it looks as if they might be virtually the same for windows.

Below are Mike's original instructions.

  • Install a fresh copy of eclipse, but don't delete the old version yet. (I called mine eclipse-new, you can rename it at the end)
  • Copy start_fb.jar to the root of your new eclipse installation
  • Copy the Flex Builder link file com.adobe.flexbuilder.feature.core.osx.link to the "links" folder in the root of your new eclipse installation (If you are using Ganymede - 3.4 or greater you'll need to create this folder)
  • Open up the bundles.info file located in you old eclipse installation/configuration/org.eclipse.equinox.simpleconfigurator in a text editor
  • Copy all of the Flex Builder related entries - use the file reference as a guide as not all of the packages have Flex in the name
  • Now open up the same file, but in your new installation and paste those entries at the top and save it
  • Start up your new clean eclipse install and bask in your 1337 s1<i||z :p
  • If all went to plan you can now close eclipse, delete the old version and rename the new one - job done.

While I haven't tested this, it looks like this should work in Windows with the exception being the "link" file is actually named com.adobe.flexbuilder.feature.core.link in Windows.

ColdFusion UDF for detecting jQuery AJAX operations…

Categories: HTML/ColdFusion, jQuery

Raymond Camden justed posted an article on detecting jQuery AJAX operation using ColdFusion. I honor of that post, I thought I'd share the UDF I've been using in my application for quite some time:

<cffunction name="isAjaxRequest" output="false" returntype="boolean" access="public">
    <cfset var headers = getHttpRequestData().headers />
    <cfreturn structKeyExists(headers, "X-Requested-With") and (headers["X-Requested-With"] eq "XMLHttpRequest") />
</cffunction>

The code uses the exact same logic the technique in Raymond's post, but having the code in a function makes your detection code a lot easier to read.

Now when you want to detect if a request came from an AJAX operation, you can just do:

<cfif isAjaxRequest()>
    Came from jQuery! :)
<cfelse>
    Didn't come from jQuery. :(
</cfif>

Doesn't get any easier than that!

Barfin' on the Browns…

Categories: Sports

This is one of the funniest football stories I've heard in a long time. This comes from a great interview with Craig Wolfley—the color analyst for the Pittsburgh Steelers.

BTSC:  You were part of many great games in the Browns-Steelers rivalry.  I make no attempt to hide my disdain for the Cleveland Browns.  What one thing do you remember most about that rivalry?

WOLFLEY:  Tunch Ilkin used to get anxiety attacks where he would throw up alot.  You never knew when they would happen.  Even in training camp, he would throw up at any time.  Anyhow, we're playing the Browns in a preseason game in the early 80s.  Tunch is standing next to me in the huddle and I notice vomit on my foot.  Tunch is gurgling.  We broke for the line and I could hear his stomach.  I'm thinking, this could be great.  On that particular play, I was assigned to help Tunch double-team their defensive tackle, Ron Simmons.  Right at the snap, as if it were choreographed, we both lunge at Simmons and Tunch lets it loose.  I'm not talking about a dribbler, I'm talking about a gusher.  He heaves right in Simmons' face and the guy goes crazy.  We didn't need to block him.  He was PO'd beyond belief, Tunch is sick and I'm laughing hysterically.  The next play he still has chunks on his face and he lines up four yards behind the ball.  Tunch didn't have to block him the rest of the game.   I'm still laughing.

image

(Tunch Illkin on the left, Craig Wofley on the right)

Thanks to Behind the Steel Curtain for such an entertaining story!

Tool to help improve readability of your website…

Categories: HTML/ColdFusion

One problem that can often come up when designing a web site is problems with legibility of the text on your web site. You might have issues with kerning, line spacing, font size and even the contrast between the foreground text and the background color.

The tool I'm sharing with you today is one to help ensure that you have proper contrast between the foreground text and your background color.  The color contrast tool uses the W3C has formulas developed by the W3C to detect sufficient contrast between your text and the background color.

I originally got the idea from the Color Contrast Check tool, and while it's really helpful fine tuning settings, it didn't really help through out some suggestions of colors that are close to my original but that will improve the contrast/brightness differentials.

That's what makes the Color Contrast Tester unique. If your contrast/brightness levels aren't sufficient it'll work on some variations that improve the differential. While the tool isn't perfect, I've found it extremely useful over the past 6 months since I developed it.

Using it is simple, just plug in the hex values for the foreground and background colors and it'll give you your brightness and contrast differences and then suggest some variations that pass what the W3C suggests as being appropriate.

Let me know what you think!

Color Contrast Tester

BlogCFC v5.9.3.000 released…

Categories: HTML/ColdFusion

Well, I'm proud to say I just helped Raymond release a new version of BlogCFC—version 5.9.3.000. Hopefully the "Switzer" edition doesn't become known as the version that made BlogCFC jump the shark. :)

A lot of the mods I contributed were related to the XML-RPC stuff, since I post almost exclusively from Live Writer and only go into the Admin when I need to set up related entries. However, one change that I think everyone might like is I added a "Comments" tab to the entry page. I added this to my version of BlogCFC way back in November of 2007 because I found I was usually trying to find comments related to a specific entry and they were hard to find via the normal comments page.

Here's a summary of the changes:

  • Updates/simplification of file pathing determination
  • XML-RPC updates (yes, I did test these myself, I don't suck) ;)
  • Admin has a nicer warning when settings/cache is updated
  • When you edit an entry, you get immediate access to the comments (new "Comments" tab)
  • Ability to view an unreleased entry on the blog. This lets an admin see how an entry will REALLY look w/o having to release it.
  • Code coloring updates (the blue HTML tag color and Attribute color were so close they looked identical, so I gave the HTML tag a color that adds better contrast)
  • HTML entities are cleaned out of the Subject of e-mails and removed from the title shown in the e-mails (probably only an issue if you use a WYSIWYG Blog editor)

Outlook and Google's IMAP integration…

Categories: Personal

One thing that really irks me about Google's implementation of IMAP is that when you "delete" a message in Outlook, it doesn't move the message to Google's "Trash", but instead just removes all the labels. Since Gmail doesn't have a good way to view just unlabelled messages, it makes it a pain to clean things up. The only thing I've found that really works is to build a huge search filter excluding all my labels—which is horrible.

Google would make my life easier by implementing too small changes:

  1. Provide for a single search filter for find all unlabeled messages
  2. Move unlabeled messages from IMAP into the Trash can (or at least make this an option I can configure.)