dans.blog

[UPDATED: Thursday, December 04, 2008 at 4:36:59 PM]

I have a weird problem I'm running into again, but haven't been able to find a fix. In FF2, when I place a <div /> over an <input /> element that currently has focus, the blinking cursor shows up through the top layer.

I put together this little video to show off the problem:

Here's a working example of the bug. If you open the page in Firefox 2, you should see the cursor blinking in the middle of the word overlay.

Does anyone know of a fix for this problem?

Posted by Dan on Dec 4, 2008 @ 1:09 PM

I'm not a designer. I can make may way around Photoshop, but the majority of my time in Photoshop is spent chopping up layers to convert them into images to use in my HTML & CSS. Occasionally I need to create new graphic assets or tweak the colors in an existing image.

We have a large collection of icons at work, but occasionally I need to adjust the color of an icon to better match the graphical assets where the icons will be used. My need today was to change some blue arrows to match a specific green hue.

Photoshop actually makes this very easy to do.

1. Set the foreground color to the base color you want to colorize your image to
2. Next, we need to create an Hue/Saturation "Adjustment Layer" (Layer > New Adjustment Layer > Hue/Saturation...)
3. Give your adjustment layer a name and click the "Ok" button
   
   NOTE: If you want to limit your changes to only one layer, check the "Use Previous Layer to Create Clipping Mask" option, otherwise all layers below the new adjustment layer in your Layers Panel will have the mask applied to it.
   
4. Click the "Colorize" checkbox
   
   
   
5. The "Hue" value will now match the color of your foreground color. The "Saturation" value is preset to a value that is consistent with the elements on the current screen. The "Lightness" value is preset to zero.
6. You can now tweak the settings to get the exact colorization you're looking for. Just note that playing with the Saturation and Lightness settings can start to distort the image by losing the original white and blacks in the image.

I hope this helps someone else. I figured I better finally blog this, since I always seem to forget how to do this and end up having to rediscover the process when I need to go through the process again.

Posted by Dan on Nov 26, 2008 @ 12:55 PM

[UPDATED: Wednesday, November 26, 2008 at 8:41:22 AM]

I just noticed that Google appears to have added some new features to the results page. The new features are buttons for "Promote", "Remove" and "Comment".

The "Promote" feature appears to be a way to give your "thumbs up" to content—which I'm sure will affect the rating of a page and thus affecting SEO. The "Remove" feature appears to be the way to report a bad link (like a Black Hat attempt, or just some general spam page.) Lastly, the "Comment" feature appears to be a way to add a comment about a page.

This new feature is part of Google's new SearchWiki. I think they must be selectively releasing this functionality, because I'm not seeing it every browser on my machine—so it's either cookie-based or browser-based.

UPDATE:

It appears all you need to do is log in to Google in order to see the SearchWiki features. Logging out will turn the feature off.

Here's a video that talks more about SearchWiki:

Posted by Dan on Nov 24, 2008 @ 9:18 AM

I was working on some code today where I was getting back a query object from a CFC and needed to get the execution time. You can get this information from the <cfquery /> tag by using the result attribute, but since I was getting my query object back from a CFC, I needed to try and determine the execution time from only the query object.

Since the <cfdump /> tag is outputs additional meta data about a query (including the executionTime,) I knew this information could be obtained if I could just find the correct internal Java methods to call. After playing around for a few minutes I discovered that the additional struct keys that ColdFusion 8's <cfdump /> tag outputs come from: query.getMetaData().getExtendedMetaData().

So, to grab the execution time of any query in your code, you can just use:

Since I was using this information on a search results page, I wanted to show the execution time in seconds to the user (carried out to the 3rd decimal.) Because query's can often return a 0ms execution time (either because of timing issues on Windows or due to cached queries,) I came up with the following code to show the execution time in seconds. I use the min() function to at least show a 1ms execution time (since 0ms time just looks weird.)

The obvious disclaimer here is that since we're using internal methods, this can change in future versions of ColdFusion—which means your code could break.

Posted by Dan on Nov 17, 2008 @ 1:17 PM

I came across a couple of sites this morning that show off examples of existing UI design patterns that I believe will be useful to all developers. While there's always room to improve, many of the design problems we run into while developing applications can be solved with existing design patterns. The links below are good resources for showing existing patterns, why they're useful and examples of when to use them.

• UI Patterns - User Interface Design Pattern Library
  This is a community based site where users can suggest new patterns and comment on the existing examples. Many of the examples have screenshots of multiple implementations of the same concept, so this can be a good way to spark ideas on how to solve a problem you're facing.
• Designing Interfaces - Patterns for Effective Interaction Design
  This is a support site for the O'Reilly book Designing Interfaces: Patterns for Effective Interaction Design. There's a lot of really good examples of design patterns and is extremely useful even if you don't own the book (although this looks like a good book for reference library.)
• Yahoo! Developer Network - Design Pattern Library
  One thing I like about this site there's videos to full illustrate the pattern in action (just click on the "Play" button in the screenshots.) While this is a great companion guide if you use the Yahoo! UI Library, you don't need to be using the library for this site to provide value.
• Welie.com - Patterns in Interaction Design
  This site contains more corner case issues and is a little more comprehensive in the types of patterns they illustrate.

I'm working on laying a "dashboard" page where we need to display lots of various information, but in as small a viewport as possible (our goal is to try to avoid scrolling.) I'm using this sites to give me some ideas of ways to implement various solutions.

I'd highly recommend everyone just spend some time looking through the sites today and see what kind of creativity it sparks.

Posted by Dan on Nov 5, 2008 @ 10:08 AM

Barney Boisvert released FlexChart 2.0 yesterday. This is a Flex-based charting tool that can be used to easily adding graphs to your ColdFusion projects. While ColdFusion does have a number of Charting tools integrated into the product, it seems every time I go to use them I run into limitation after limitation that prevents me from using them. So, if you're looking for alternative charting for ColdFusion, the you should check out the FlexChart demos.

Posted by Dan on Oct 21, 2008 @ 1:00 PM

If you want to quickly find all tags that have an attribute containing a specific value, you can use the following regular expression:

You can use this from either the Global Search (CTRL+H) or from the Find/Replace (CTRL+F) dialogs (just remember to check the "regular expressions" option.)

You'll need to replace the following tokens in the string with the correct values:

TAGNAME = The name of the tag
ATTRIBUTE = The tag's attribute to search
VALUE = The value to search for in the tag's attribute

This regular expression is designed to find the VALUE anywhere in the attribute's value. If you wanted to find exact values, you can remove the [^"]* around the (VALUE) string to make it find exact values.

For example, to find all anchor tags pointing to the file "hello_world.htm" you could use:

Posted by Dan on Oct 7, 2008 @ 1:07 PM

If you want to quickly find all matching open and close tags, you can use the following regular expression:

You can use this from either the Global Search (CTRL+H) or from the Find/Replace (CTRL+F) dialogs (just remember to check the "regular expressions" option.)

The "(?is)" makes the regular expression ignore case and search over multiple lines. Just replace the string "TAGNAME" with the tag you want to search. For example, to find all <cfloop> tags, just do:

Posted by Dan on Oct 7, 2008 @ 12:18 PM

Today I was working on a project where I needed to add some visual "page breaks" to the screen—very similar to the page breaks Microsoft Word shows in "Normal" view. The goal is for visual indicator to show on the screen, but actually trigger page breaks when printing.

After playing around with the HTML and CSS for a few minutes, here's what I came up with:

more…

Posted by Dan on Sep 24, 2008 @ 4:30 PM

When I re-launched my blog last year I mentioned that I made several changes to the XML-RPC code in order to make blogging from Windows Live Writer simpler. I didn't release the XML-RPC mods at the time, because I wanted to make sure they were nice and stable. Now that I've been using the mods for almost a year, I think their stable enough to share.

The changes I made most involved trying to simplify blog posting. My key objective was to try and avoid having to drop down to the "source code" mode altogether, but still be able to use the custom tags that BlogCFC supports such as the <more/>,  <code> and <textblock> tags.

To solve this problem I build some parsing functions which look at the incoming HTML and look for these special tags written in escaped HTML. When it finds these tags, it then converts the escaped HTML into their unescaped format. This allows me to just cut-n-paste or type in my <code> blocks directly into Windows Live Writer and never have to go into "View Source" code. This means I can use the "Normal" (Design View) and just type into Live Writer:

<code>

<h1>Hello World!</h1>

</code>

To produce:

I can also just type in the <more/> tag into Live Writer in the place where I want to split text into two.

You may be wondering how I'm able to use the type in these special tags without the parsing functions picking them up. Since I knew I may want to actually blog these tags at some time, I build in some escape characters you can use to avoid processing and have the tags displayed correctly. In order to display one of the special tags, just write the tags with brackets (i.e. "[" and "]") just inside the < and > characters, for example: <[specialTag]>. This only works with the <code>, <more/> and <textblock> tags.

I have not tested this code with that latest BlogCFC code, but this should work with BlogCFC v5.9 (released Oct 12, 2007.) Either way, before implementing I recommend making a backup of your "xmlrpc" folder and even doing a diff on the folders to compare the changes.

The one change you'll need to make to your Live Writer setup, is you must add the query string "?parseMarkup=true" to your XML-RPC URL in order for BlogCFC to use the parsing functions. I did this to make it easy to toggle this functionality on or off on a per blog basis.

If you download my XML-RPC mods and use them, let me know how they work out for you! Perhaps if the mods are well received, I'll tidy them up even more to see if Raymond Camden wants to include them in the official release.

Posted by Dan on Sep 24, 2008 @ 10:56 AM

I ran into a really weird bug this morning. I was having an issue with a jQuery plug-in I wrote, where for some reason IE7 was not triggering the onmouseover event properly. After spending a bunch of time trying to track down the problem, I finally realized that it wasn't triggering the event until it got inside the padding of the element—which is the wrong behavior.

I whipped up a quick test case of a <div> with onmouseevent and some padding, but that worked as expected (with the event firing as soon as it reached the padding of the element.) As I started to debug the problem, I added a background color to the root element in order to see if I could tell when the even actually fired. However, as soon as I added the background-color, the event started firing correctly.

I'm not exactly sure what combination of HTML/CSS is causing the problem. I've been trying to to put together a straightforward example that illustrates the problem, but I've yet to be able to recreate without really complex code.

I believe the problem is related to having an absolutely positioned parent element with relatively positioned children and then moving the parent item's position in the DOM. Even stranger was that if I hide the entire content and would re-show it, everything would work properly.

It sounds like it's a pretty obscure buried bug, but if you're ever having problems getting an event to fire properly in IE7, try defining a background-color for the element to see if that fixes the problem.

Posted by Dan on Aug 25, 2008 @ 12:21 PM

With all the chatter about recently SQL injections attacks, I thought I'd try and whip up a regex I could use in Eclipse/CFEclipse to find <cfquery> tags that have exposed variables (strings wrapped in #...#) that don't use the <cfqueryparam /> tag.

Well I'm far from a regex master, here's what I came up with:

<cfquery\s[^>]*>([^#]*(((?<!value=")#[^#]*#)))((?<!</cfquery)[^>]*?)</cfquery>

The query does not explicitly check for the token <cfqueryparam, but instead checks to make sure that CF variables are preceded with the string value="—which is the attribute used in <cfqueryparam />.

The query isn't perfect and may pick up occasional false positives, but from my testing it seems to work pretty well. If you have some improvements to the regex, make sure to post a comment and I'll update the post with the most recent version.

Posted by Dan on Jul 23, 2008 @ 11:13 AM

[UPDATED: Friday, April 17, 2009 at 10:27:41 AM]

Two great posts by Mike Henke and John Whish over the past week cover some really important keyboard shortcuts for Eclipse & CFEclipse. They cover the gamut of some of my favorites (like CTRL+SHIFT+R) and some ones I always forget about (such as CTRL+DEL and CTRL+BACKSPACE.) These are definitely shortcuts you should be memorizing to make you work more efficient.

General Eclipse Shortcuts

[CTRL]+[SHIFT]+[L]

A list of all keyboard shortcuts (not mapped by default in CFEclipse--you can create a copy of this shortcut in the Keys preferences and map to [CTRL]+[ALT]+[K] which is open in CFEclipse.)

[CTRL]+[M]

Maximizes (or minimizes) the current pane (editor or view.) This is a handy way to maximize your editor to take up the full screen.

[CTRL]+[K]

Finds the next occurrence of the highlighted text. (NOTE: This is one of the best ways to jump around your document.)

[CTRL]+[SHIFT]+[K]

Finds the previous occurrence of the highlighted text.

[CTRL]+[H]

Brings up the Search & Replace dialog.

[CTRL]+[D]

Delete the current line.

[CTRL]+[SHIFT]+[DEL]

Deletes to the end of the current line.

[CTRL]+[DEL]

Deletes the next word.

[CTRL]+[BACKSPACE]

Deletes the previous word.

[CTRL]+[SHIFT]+[X]

Converts highlighted text to uppercase.

[CTRL]+[SHIFT]+[Y]

Converts highlighted text to lowercase. </DD

[CTRL]+[Q]

Goes to the last place you made a change.

[ALT]+[LEFT]

Goes "back" to the last open editor in your viewing history.

[ALT]+[RIGHT]

Goes "forward" to the next open editor in your viewing history.

[CTRL]+[E]

The Quick Switch Editor opens a list of all open editors and allows you to quickly switch to any open file.

[CTRL]+[SHIFT]+[R]

The Open Resource dialogs allows you to quickly open any files in your workspace. This is one I use all the time.

[CTRL]+[3]

The Quick Access menu pretty much helps you find anything in Eclipse by providing a keyword.

[CTRL]+[SHIFT]+[E]

The Switch to Editor brings up a list of all open editors (and can even span multiple windows.)

[CTRL]+[UP]

Moves the current (or highlighted) rows up one line.

[CTRL]+[DOWN]

Moves the current (or highlighted) rows down one line.

[CTRL]+[ALT]+[UP]

Inserts a copy of the currently highlighted line above the current line.

[CTRL]+[ALT]+[DOWN]

Inserts a copy of the currently highlighted line below the current line.

[CTRL]+[ALT]+[RIGHT]

Shifts (indents) the current or highlighted line(s) to the right. Much faster than highlighting the line(s) and using the [TAB] key.

[CTRL]+[ALT]+[LEFT]

Shifts (un-indents) the current or highlighted line(s) to the left. Much faster than highlighting the line(s) and using the [SHIFT]+[TAB] key.

[CTRL]+[HOME]

Jumps to the beginning of the current file.

[CTRL]+[END]

Jumps to the end of the current file.

CFEclipse Shortcuts

[CTRL]+[3]

Wraps text inside #...#.

[CTRL]+[T]

Edit current tag.

[CTRL]+[SHIFT]+[A]

Inserts <cfabort/> tag.

[CTRL]+[SHIFT]+[D]

Inserts <cfdump/> tag.

[CTRL]+[SHIFT]+[O]

Wraps text inside <cfoutput>...</cfoutput> tags.

[CTRL]+[SHIFT]+[N]

When focus is inside of an HTML/CFML tag, it will jump to the matching open or close tag.

[CTRL]+[SHIFT]+[U]

Converts highlighted text to uppercase. (NOTE: I recommend using [CTRL]+[SHIFT]+[X] instead because it's a general Eclipse shortcut.)

[CTRL]+[SHIFT]+[L]

Converts highlighted text to lowercase. (NOTE: I recommend using [CTRL]+[SHIFT]+[Y] instead because it's a general Eclipse shortcut.)

[CTRL]+[SHIFT]+[P]

Wraps text inside <p>...</p> tags.

[CTRL]+[SHIFT]+[C]

Wraps text inside a contextual comment (i.e. <!--...--> for HTML, /*...*/ for scripts).

[CTRL]+[SHIFT]+[M]

Wraps text inside <!---...---> tags.

[CTRL]+[SHIFT]+[Z]

Opens the color picker.

[CTRL]+[\]

Expands or collapses the current code block (<cfif>, <cffunction>, <cfswitch>, etc.)

In CFEclipse, most of your standard shortcuts for formatting (i.e. [CTRL]+[B] = strong) work as well. Learning keyboard shortcuts can really speed up your development process, so I recommend trying to learn one or two a week and introduce them into your coding habits.

Posted by Dan on Jul 10, 2008 @ 10:53 AM

The Pencil Project looks like a pretty interesting tool for sketching out and prototyping a site design. It's based on XUL engine in Firefox 3 and looks to be a pretty impressive little open source application. From the Pencil Project website:

The Pencil Project's unique mission is to build a free and opensource tool for making diagrams and GUI prototyping that everyone can use.

Top features:

• Built-in stencils for diagraming and prototyping
• Multi-page document with background page
• On-screen text editing with rich-text supports
• PNG rasterizing
• Undo/redo supports
• Installing user-defined stencils
• Standard drawing operations: aligning, z-ordering, scaling, rotating...
• Cross-platforms
• Adding external objects
• And much more...

Pencil will always be free as it is released under the GPL version 2 and is available for virtually all platforms that Firefox 3 can run. The first version of Pencil is tested against GNU/Linux 2.6 with GTK+, Windows XP and Windows Vista.

Make sure to check out the quick tour/screenshots of the application.

Posted by Dan on Jul 10, 2008 @ 10:13 AM

Adam Lehman mentioned this the other day on a mailing list (and now has blogged about the CF 8 EULA change); the ColdFusion license changed in v8.01 and it now allows you to have a copy of CF installed for a warm backup server.

From the ColdFusion 8 EULA (PDF):

2.3 Backup and Disaster Recovery. Licensee may make and install a reasonable number of copies of the Software (ColdFusion) for backup and archival purposes and use such copies solely in the event that the primary copy has failed or is destroyed, but in no event may Licensee use such copies concurrently with Production Software or Development Software. Licensee may also install copies of the Software in a Disaster Recovery Environment for use solely in disaster recovery and not for production, development, evaluation or testing purposes other than to ensure that the Software is capable of replacing the primary usage of the Software is case of disaster.

This is great news for smaller shops that want to have a warm/hot backup server that they can easily push live if their production server runs into hardware problems.

Posted by Dan on Jul 10, 2008 @ 9:38 AM