30 September 2009

CSS Shorthand – A Guide to Cleaner and Faster Coding


15 September 2009

Display Size and Resolution Accessibility


Spectacular Photos of Creation-Part 1


How to generate creative ideas using visual thinking technique


How To Create A Favicon In Photoshop Or With Online Generators


16 Favorite Cheat Sheets for Web Design and Development


Source ordered content: The best kept secret in web design


Week 3: "52 Weeks of Peace"

Week 3: "52 Weeks of Peace"

10 Awful IE Bugs and Fixes


51 Illustrator Tutorials You Must Check


10 Solutions to Easily Create Your Online Portfolio


Web forms' checklist


Google's Fast Flip

Google's introducing Fast Flip:
Fast Flip is a new reading experience that combines the best elements of print and online articles. Like a print magazine, Fast Flip lets you browse sequentially through bundles of recent news, headlines and popular topics, as well as feeds from individual top publishers. As the name suggests, flipping through content is very fast, so you can quickly look through a lot of pages until you find something interesting.

14 September 2009

The freelancer’s toolbox: 33 useful apps & websites for the freelance designer


31 Podcasts That Keep Freelancers in the Loop


TeemingPod provides interaction + collaboration tools

TeemingPod provides some interesting and promising tools to enable collaboration and interaction with web pages. It includes a free version which maxes out at 5 end users.

Some handy Photoshop utilities

John Nack provides another of his great articles on all things Adobe, including a way to make Photoshop setting portable.

Copy Firefox settings to another machine

Recently, I moved to a new machine and needed to copy all my Firefox bookmarks, cookies, and passwords from the old box. A neat little utility does the job: MozBackup by Pavel Cvrcek. It exports the information to a file which can then be used on the new PC to import the settings. It even remembered all the sites I'd visited. The move to the new system was made much less painful thanks to this free utility.

Some handy XP tweaks


10 September 2009

Adobe TV

Thanks to John Nack for his article about the new and improved Adobe TV.

15 CSS tricks that must be learned


Show/hide controls dynamically in JSF

We often need to show a set of controls dynamically based on what a user selects in a component in JSF. This example shows how to accomplish this in JSF and Seam, using the JBoss' EL extensions, which make life easier in your XHTML tags.

In this case, we're using an h:selectOneRadio control. We want to show and hide the rich:Panel controls; we wrap them in an a4j:outputPanel and then just re-render that when the user clicks a radio element. Note that for radio buttons, we have to use the onclick event; onchange is for h:selectOneMenu and other select controls.
<h:selectoneradio value="#{webencode.requestType}" id="rdoRequestType" styleclass="radio" layout="pageDirection">
<f:selectitem itemvalue="program" itemlabel="Series or Program">
<f:selectitem itemvalue="special" itemlabel="Special">
<a4j:support ajaxsingle="true" event="onclick" rerender="program">

<a4j:outputpanel id="program">
<rich:panel rendered="#{webencode.checkRequestType('program')}">
program stuff goes here
<rich:panel rendered="#{webencode.checkRequestType('special')}">
special stuff goes here
We can't call the equalsIgnoreCase() method on a string from within an EL expression, so we use a Seam method call that returns true/false based on string equality:
public Boolean checkRequestType(String requestType){
return (this.requestType.equalsIgnoreCase(requestType)) ? true : false;
With the a4j:support tag, we use AJAX to re-render the a4j:outputPanel when the user clicks the radio buttons. Then the custom checkRequestType() bean method is called and returns a Boolean based on the value of the radio button group.

02 September 2009

Convert entity to selectItem in Seam

When using entity classes and Hibernate to display data in JBoss Seam, you can easily convert the entity to a selectItem element for use in a dropdown box, radio button group, or checkbox items. Here's an example:
<h:selectOneMenu >
<f:selectItem itemLabel="" itemValue="#{null}"/>
<s:selectItems var="tape" itemValue="#{tape.description}"
value="#{tapeformatList.resultList}" label="#{tape.description}" />

Note the null element to allow users to leave the selection blank. You can also achieve this by using the noSelectionLabel attribute. Also of note is the itemValue attribute on the Seam selectItems tag: This enables a custom value instead of the automatic numeric ID generated by Seam. In this case, the entity's description is used for the value.

Here's what this code generates in HTML:
<select name="tapeformatSearch:j_id14" size="1">    
<option value="VHS">VHS</option>
<option value="DVD">DVD</option>
<option value="Beta-SP">Beta-SP</option>
<option value="Digi-Beta">Digi-Beta</option>

<option value="HD-Cam">HD-Cam</option>
<option value="DV-Cam">DV-Cam</option>
<option value="Mini-DV">Mini-DV</option>
<option value="DVC-PRO HD">DVC-PRO HD</option>

01 September 2009

Fix IE 6 and 7

If you work to make your pages cross-browser compatible, then you need to know about Dean Edwards fantastic script to get earlier versions of IE to behave like IE7 or IE8. Now you can have transparent PNG in IE 6, add minimum width/height, etc. Very neat stuff, and it works! Get the script and details on Dean's site.