Shorthand conditionals using ternary operators (?:)
If your looking at a way of “condensing” your code shorthand conditional statements using ternary operators (?:) may the way to go. It’s used alot in Javascript tracking codes such as Google Asynchronous code.
Anyway here’s a very simple example in PHP of taking a simple IF statement and converting it to use ternary operators. You could argue that this example is simple enough and you should consider what easier is read and maintain
Simple IF statement in curlies:
if($fruit != “apple”) {
echo “its not an apple!”;
}
Shortened IF statement on one line without curlies
Even shorter
if($fruit != “apple”) echo “its not an apple!”;
Adapting to use ternary operators (?:)
echo ($fruit != “apple” ? “its not an apple” : “”);
Shortened ternary version as theres only one outcome
echo ($fruit == “apple” ||”not an apple”);
IMHO the best image solution for response design…
If you’re using PHP on Apache and have the GD library installed your adaptive image solution is here . Its called “Adaptive Images” and its by Matt Wilcox. Adaptive Images is a neat little solution that uses Apache HTACCESS to intercept image requests and direct them to a simple PHP script that creates a scaled version if one doesn’t already exist. No reliance on Javascript to trawl your page and replace images or use of CSS max-width to “squeeze” your images which doesn’t actually reduce the filesize.WOHOO!
Using Google to discover platform usage in “the wild”
Ever been in the situation where you need to review a CMS, blogging platform or framework and wanted to see some “real life” examples in the wild? Google as always to the rescue! Google’s inurl: parameter will perform an advanced search that will match indexed pages with URLs matching your query.
For example, to find examples of Liferay I searched for inurl:/web/guest which is the basic URL structure to the public frontend of a Liferay site
Introduction to Javascript Templates
Lately I’ve been working on a lot of projects utilizing web services to generate content - for instance “1 page” mobile sites where most content is generated one 1 page with minimal page refreshes. To fastrack this I started looking at Javascript Frameworks, to make the generate UI much more manageable. One such JS Frameowork is Handlebars JS. What I like about JS templates like Handlebars are designed to work with JSON data, so you can create a template with placeholders for each data item , then simply pass the JSON object and compile the template. For example:
Data - JSON Format
var data = "{"Username":"jb123","Firstname":"Joe", "Lastname":"Bloggs, "Email": "jbloggs@example.com", "DOB": { "Day": 20, "Month": "20", "Year": "1981"}};
Template - stored inline in script tags (can be precompiled!)
<script id="user-profile-template" type="text/x-handlebars-template">
<h1>User Profile</h1>
<table id="profile">
<tr>
<th>Username</th>
<td>{{Username}}</td>
</tr>
<tr>
<th>Firstname</th>
<td>{{Firstname}}</td>
</tr>
<tr>
<th>Lastname</th>
<td>{{Lastname}}</td>
</tr>
<tr>
<th>Email</th>
<td>{{Email}}</td>
</tr>
<tr>
<th>Date of Birth</th>
<td>{{DOB.Day}}/{{DOB.Month}}/{{DOB.Year}}</td>
</tr>
</table>
</script>
Compiling Template (JS)
var source = $("#user-profile-template").html(); // grab template source
var template = Handlebars.compile(source); // compile template
Parsing Data (JS)
template(data); // parse data
Pretty cool eh?
Anyway rather than me waffling on checkout this write-up by Veena, Senior Software Engineer at Linkedin, discussing their move to clientside templating and the various options out there - although they recommend “Dust” I still highly recommend Handlebars JS
References:
Actionscript on root loads into Frame 1 regardless!
One of the requirements I usually get when creating Flash banners for client sites is to keep them relatively contained so content managers only need to handle 1 file. For this reason I typically opt for actionscripting an internal preloader as oppose to loading into a container movie. In a nutshell this actionscript sits on Frame 1 and use onEnterFrame event to check load progress and play Frame 2 once everything is loaded.
E.g.
if( ….loaded…..){
gotoAndPlay(2);
}
The challenge with this method is that Flash exports components, libraries and embedded Fonts to Frame 1 by default which can amount to 40-50% of the overall file size, causing your internal preloader not show for some time, and then jump to 40-50% when it does finally show up!
So how to get around this?
The first step is to make sure everything is exporting to a frame after your preloader script i.e. Frame 2 and for the most part you can set this globally within the Flash Publish Settings:
File > Publish Settings > Script > Export: Frame 2,
And then do the same for individual Symbols in your Library via:
Mouse right-click on Symbol in Library > Properties > Export to Frame 2.
Test your movie once again, using the “Simulate Download” option (shortcut: CTRL+ENTER twice) and you may find there’s still a chunk of content being loaded onto Frame 1 even though you’ve set everything to export to Frame 2. So what’s going on? Well I did some research on this and discovered that if you have actionscript on the Root Timeline that imports libraries these libraries will get imported to Frame 1 regardless of your export to frame settings. However, libraries imported within Symbols do abide by your export to frame settings so the solution is to simply move everything on the Root Timeline into a container Movieclip I name “main” and then put this onto a frame after your preloader script I also label “main”
E.g.
if(…loaded…){
gotoAndPlay(“main”); // play frame labelled “main”
}
Keep in mind though there will always be an initial load of a few kb’s on Frame 1 which accounts for your preloader and core Flash stuff ;)
Example preloader actionscript (AS3) in its entirety as taken from one of my projects:
stop();
this.addEventListener(Event.ENTER_FRAME, loading);
function loading(e:Event):void{
var total:Number = this.stage.loaderInfo.bytesTotal;
var loaded:Number = this.stage.loaderInfo.bytesLoaded;
preloader.loaderTxt.text = "Loading..." + Math.floor((loaded/total)*100)+ "%";
if (total == loaded){
preloader.loaderTxt.text = "Let's go!"
gotoAndPlay("main");
this.removeEventListener(Event.ENTER_FRAME, loading);
}
}
Nice list of HTML5 feature polyfills
The Modernizr team have listed popular polyfills to enable HTML5 features
Gotcha - Linking to external resources in JS Fiddle
If you use JSFiddle alot as I do for testing snippets you may have had some challenges linking to API’s that don’t end in a Javascript filename, for example the Google Maps API link is something like this:
And unfortunately JSFiddle won’t recognise and parse this as Javascript as it is looking for the .js on the end of the resource link. But never fear resolving this is as easy as fudging by adding a querystring variable as per below:
http://maps.googleapis.com/maps/api/js?sensor=false&fake=.js
Firefox 11 - scratchpad, inspector..Finally!
Decided to update to Firefox 11 this morning to checkout some of the new features I had heard about including Scratchpad and the new Inspector. One word AWSOME!
I have only recently moved to Google Chrome in the last 3 months as I was having problems with Firebug in Firefox (most likely because Firebug couldn’t keep up with the Chrome release schedule!) and had just started getting heavily involved in mobile web development which is dominated by Webkit browsers such as Chrome (and Safari) as you may know. Anyway I’m almost tempting to move back as I’m a heavy user of extensions/plugins and I find many of Chrome extensions to be quite buggy, and not as seamlessly integrated into the UI as they could be. For instance I’m yet to find a decent screenshot tool that works consistently or a colour picker - which arguable are almost staple extensions for any web dev or designer. Moreover I have always been an advocate of Mozilla amongst colleagues, friends and family since I was involved in developing Swinburne Universities online learning program and had to very mindful of standards and usability and I always found Mozilla were very mindful of W3C standards Probably the only thing preventing me going back to Firefox in the short term is my involved in mobile development which is very webkit based as mentioned previously and Chrome seems to be on the forefront of new features - and I love experiment with such features and even using them to provide that little bit of wow factor.
Scratchpad - for injecting and executing Javascript within a apge
Right aligning form labels using CSS
Once upon a time I used to heavily rely on tables to manage form field layouts. Tables enabled me to contain labels, so overflowing text still sat nicely beside the form field align labels of varying content size , enabling us to align all our labels to the edge of form fields no matter the is a handy little CSS3 display rule that enables right-alignment of labels to the left edge of a form input - a nice usability enhancement
CSS
p { display:table; border-collapse:collapse; }
p label { /* form sections wrapped in p tags */
display:table-cell;
text-align:right;
padding-right:3px;
}
p input, p textarea, p button {
display:table-cell;
}
HTML
<form> <p><label for="username" /><input type="text" name="username" id="username" /></p> <p><label for="password" /><input type="password" name="password" id="password" /></p> <p><input type="submit" name="submit" id="submit" value="login" /></p> </form>
IP Camera’s are so cool
Brought a puppy on the weekend and I don’t like leaving him alone at the best of times, so I bought an IP Camera to keep and eye on him during the day. Its a Foscam F18918W and I can pan remotely, listen, setup motion sensing which can trigger snapshots (which can be sent to my email) oh and it has “night vision” too. Anyway for a $100 I couldn’t recommend it more for remote monitoring and security.
