dans.blog

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

I stumbled across the SlickDeals.net Forums' Excel Spreadsheet - BF Filtered Ads - BF2008 Buying Guide yesterday and thought this is a useful spreadsheet for anyone looking for shopping deals this week. They look to be keeping the spreadsheet up-to-date, so it's worth checking again later to see what changes may have been added.

This list seems to have ads from just about every major and is a great way to compare prices between companies to find the best deals. The spreadsheet also allows for easy filtering to specific categories/headings and allows you to choose the sort order of the fields.

So, if you're trying to map out the stores you should be visiting over the next couple of days, I recommend downloading this spreadsheet right now and looking it over.

NOTE:

You can even view a Google version of the spreadsheet (which doesn't require that you have Microsoft Excel,) but I haven't been able to access it this morning due to the volume of people viewing the document.

Posted by Dan on Nov 26, 2008 @ 8:41 AM

[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

Windows 7 is introducing a new feature called "Aero Shake." The concept is you simply drag and "shake" a window's title bar and all background windows will either be minimized or restored (based on their current status.) Here's a YouTube video of the feature in action:

While this feature looks cool, I'm wonder how useful it really will be and how intuitive it will be to the user. Since I tend to run most windows maximized, I'm not sure if this will provide much value to me.

Do you see this as be a good or bad UI design pattern?

Posted by Dan on Nov 5, 2008 @ 9:30 AM

Yesterday I was trying to divide two values to calculate a percentage, but the value was always coming up zero. What really threw me off was I had a query similar to the following and that was working fine:

The above query was properly returning the percentages I needed, but when I had a query like the following, all of the sudden it was just returning 0 (zero) as the result—which I knew was wrong:

The reason the above query kept returning zero, was because the SQL COUNT() function returns an INT. When MS SQL Server performs an operation on INT values, it returns an INT value. This means the division of two INT values will always return an INT.

The solution is to cast at least one of the two values to a FLOAT. The reason my first query was working fine is because the Rating column was a FLOAT column, which meant the division would return a FLOAT value.  The following is the same query, but will correctly return a FLOAT.

Take a look at the following in Query Analyzer to see how MS SQL Server handles the division operation:

Just something to keep in mind when using division operations in SQL Server. I thought I could simple cast my expression to a FLOAT to fix the problem, but since the division operation has already converted the value to an INT the resulting value will still be based on the original INT value.

NOTE:

Always remember to watch out for potential "Divide by zero error encountered" errors when performing division operations in SQL server. This can easily crop up, so make sure your query accounts for the possibility. An easy workaround is do something like:

ISNULL(dividend / NULLIF(expression, 0), 0)

The NULLIF(expression, 0) will make the value return null if the expression ends up being 0. This will then make the division operation return null as the result. The ISNULL() will then convert the resulting null value so that it actually returns 0 instead of null.

Posted by Dan on Nov 4, 2008 @ 10:52 AM