CSS transition class

This fun little class will add a 0.3 second transition between an element's normal and :hover states. Breaking it out into it's own class saves a lot of repetition in CSS and makes it easy to slap onto almost any html 'class' attribute.

.transition {
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

If you define an element like this:

#box {
     background-color: #999999;
}
#box:hover {
     background-color: #000000;
}

And in the HTML:

<div id="box">I'm a box!</div>

It will simply flicker gray to black when hovered.

If you add the 'transition' class:

<div id="box" class="transition">I'm a box!</div>

Now it will animate a gray->black animation for 0.3 seconds!

Google Play - App graphics requirements

http://support.google.com/googleplay/android-developer/bin/answer.py?hl=en&answer=1078870

colorscheme.ru

This is the best color scheme engine I've found:
http://colorscheme.ru/
It is in Russian, but that just makes it more fun. Or you can use google translate and get a hilarious translation of the various controls.

The 'mobile' meta tag

This tag isn't a magic bullet, but don't forget to include it whenever you're starting a mobile site design.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;" />

// user-scalable=true?  It's up to you.

Tons of information available here:  https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

UPDATE 12/14/12:  I've been having luck with this one too:
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, target-densitydpi=device-dpi" />

Android Splash Screen - all resolutions and dpis

I was designing a splash screen for an app at work and found this info harder to find than it should be.  Putting it on my blog will surely not help, but if you're reading this maybe copy it down somewhere or spread the word.

Android Splash Screen Resolutions:

long-land-hdpi - 800x480 - 240dpi
long-port-hdpi - 480x800 - 240dpi

long-land-ldpi - 400X240 - 120dpi
long-port-ldpi - 240x400 - 120dpi

notlong-land-hdpi - 800x480 - 240dpi
notlong-land-ldpi - 320x240 - 120dpi
notlong-land-mdpi - 480x320 - 160dpi

notlong-port-hdpi - 480x800 - 240dpi
notlong-port-ldpi - 240x320 - 120dpi
notlong-port-mdpi - 320x480 - 160dpi

Having these specs won't change that its a huge pain to create 10 versions of the same splash screen, but .... well now you have the specs.

Ternary Syntax in PHP

Conditional statements are the building blocks of any complex application, on the web or otherwise.
One of my only objections to the classic 'if' statement is that it can take up several lines even for a simple bit of logic. Of course, there is a solution to this and in this case it's called ternary syntax or a ternary operator.

Ternary means 'composed of three' or 'involving three variables', and so does our classic if statement. The first element is the condition to be evaluated between the parenthesis, the second and third being the 'if' and 'else' statements.

Consider this typical use of an if / else statement:

$val = 5;
if ($val < 10) {                 // first component
    $test = "less than ten!";    // second component
} else {
    $test = "more than ten!";    // third component
}
print $test;

// Output: "less than ten!"

And now the same thing, this time using ternary syntax:

$val = 5;
$test = ($val < 10) ? "less than ten!" : "more than ten!";
print $test;

// Output: "less than ten!"

Here in pseudo-code:

(comparison) ? "if true outcome" : "else outcome";

The above line will return one of the two defined values on the right side, depending on the outcome of the conditional comparison between the parenthesis. A variable is most commonly used to capture the return value, but you can also execute code.

$val = 5;
($val < 10) ? print "less than ten!" : print "more than ten!";

Example Use Cases:

I often use this syntax when checking on an unreliable variable to provide an alternative if the variable isn't set:

$user = ($data->username != "") ? $data->username : "Guest";
print "Welcome, ".$user;

The output will now depend on if a valid ( != "" ) username exists in $data. If the username is blank, the user will instead be referred to as 'Guest'. This outcome is favorable to an error message which is not only ugly but may also reveal the inner workings of your code, which could be a security risk.

Another handy use case is converting and applying unit labels to values. In the example below we take a $value in inches and output it in a more user-friendly format. Values less than one foot are simply concatenated with ' inches', while values over 12 inches are converted to, "x feet, x inches."

$inches = 45;
$converted = ($inches <= 12) ? $inches." inches" : intval($inches/12)." feet, ".($inches % 12)." inches";
print $converted;

// Output: 3 feet, 9 inches

This is a good time to point out that putting this much logic into this syntax gets difficult to look at. When writing complex logic or working on code with others, you may want to avoid going ternary.  A good exercise is writing your if/else blocks with traditional syntax and seeing if you can convert them to ternary syntax.

You can even nest ternary conditionals inside of others, but that's starting to get into syntax so ugly I don't want to talk about it here. Enjoy the new syntax and stay tuned for an upcoming, related post on 'Control Structure Syntax'.

CSS code box

This is the CSS I'm going to use to style my code snippets:

.code {
 background:#f5f8fa;
 background-repeat:no-repeat;
 border: solid #5C7B90;
 border-width: 1px 1px 1px 20px;
 color: #000000;
 font: 13px 'Courier New', Courier, monospace;
 line-height: 16px;
 margin: 10px 0 10px 10px;
 max-height: 300px;
 min-height: 16px;
 overflow: auto;
 padding: 28px 10px 10px;
 width: 90%; 
} 


.code:hover {
 background: #FAFAFA;
 background-repeat:no-repeat;
}

Feel free to copy the above classes to use on your own site / blog. Simply put all your markup within a 'div' tag with class='code', and presto.