Wednesday, February 29, 2012

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.

Tuesday, February 14, 2012

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'.

Monday, February 13, 2012

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.

Wednesday, February 1, 2012

Welcome to my code blog

Welcome to the code blog.  I intend to write about topics spanning these subjects: CSS, PHP, Javascript & JQuery.

Between my job and hobbies I've been doing a lot of web development recently. The internet has been such a powerful resource that I felt it was time to start my own blog and share some of my realizations along the path.

With this blog I intend to:
- show off things I have done
- teach you how to do things with the knowledge I've acquired

These posts are intended to quickly get you on your way with the sinppet of code in hand, and the fundamentals of how to use it. Please comment.