Webcomic Wednesday: High-Five
jun
24
2009
For my personal safety, consider this one a general observation and not representative of any particular project... Comic courtesy of Brad Colbow. ...
Adobe AIR vs Appcelerator Titanium: Round One
jun
11
2009
There's been a fair amount of recent hype about Titanium, at least in certain circles. We use Adobe AIR on a daily basis at work, so my coworkers and I have been very eager to see how the new Titanium beta compares, for better or worse. You can download the Titanium Desktop developer app here. Since this is still beta software, there are wrinkles the Ap...
Appcelerator Titanium Beta Launch
jun
04
2009
Titanium, Appcelerator's open source contender in the "web app as desktop app" arena, is moving to beta on Tuesday, June 9, 2009. To celebrate, they are throwing a product launch party at Apple's World Wide Developer Conference. Get more information about Titanium on their homepage, orfollow @appcelerator on Twitter for the latest news. I wish I co...
Pad Strings in PHP and JavaScript
may
27
2009
"Padding" a string ensures that its length meets or exceeds a desired minimum. PHP has a built-in function aptly named str_pad to pad strings to the left, to the right, or even on both sides. The default is to pad to the right with spaces, but you can choose to pad using any character, or even multiple characters. $input = "test"; echo str_pad($inp...
JavaScript Design Patterns: Mediator
may
18
2009
(skip to the code example) The Mediator Design Pattern The Mediator is a behavioral design pattern in which objects, instead of communicating directly with each other, communicate only through a central message passing object (the Mediator). The Mediator pattern facilitates both loose couple and high cohesion. Loose Coupling Coupling measures the degree to which program mod...
Exceptional Performance: YSlow Update
apr
30
2009
YSlow, Yahoo's developer plugin for Firefox, just autoupdated yesterday, and what a massive overhaul it was! I've been playing around with it and love the new interface and features. Here's a quick walkthrough of the new interface. YSlow's main panel, your website's "Grade". Several rules were added to the new release, including tip...
SCAN Web Design Principles: N is for Navigation
apr
24
2009
What is Website Navigation? Website navigation answers these questions for your visitors: Where am I? Offering feedback on the current location helps visitors feel confident they're on the right page. Everyone runs into misleading links out there — people want to know that the link they clicked leads to information they really need. Where else can I go?...
SCAN Web Design Principles: A is for Accessibility
apr
17
2009
What is Accessibility? Website Accessibility means making sure the widest possible audience can reach your content. An important distinction lies between making content accessible and making it identical — you do not need to make sure every single visitor receives the exact same user experience when visiting your site. Why Design ...
Click and Drag to Toggle Checkboxes
apr
15
2009
(skip to the example) A coworker showed me a demo for dragging across checkboxes to check or uncheck them, and asked that I implement it in my own AJAX library. The cross-browser demo he came across answered a specific question which required the use of tables and tds, but I wanted to be able to accomplish the same feat without depending on unrelated tags. I quickly ...
SCAN Web Design Principles: C is for Content
apr
10
2009
Your first impression Your homepage should clearly communicate your site's purpose or value. Provide all important options on the homepage, so your visitors can find what they were looking for quickly and easily. With that in mind, try to avoid clutter by presenting unnecessary options, text, or graphics. If someone gets information overload looking at your homepage...
SCAN Web Design Principles: S is for Scanning
apr
03
2009
Bounce Rate Bounce rate is a statistic available on most web analytics applications. It tells you what percentage of visitors arrived and left your website after seeing only a single page. What it really tells you is that your website is not compelling enough to even click one link on the page. Why not? Find out by scanning your website with your eyes. What your visitors...
SCAN Web Design Principles
mar
28
2009
April's bringing a four-post series about interface design (primarily for websites). There's a mental checklist I run through when building a new site, and while formalizing the idea the acronym SCAN stuck with me. I encourage comments on any of my blog posts, but if you have anything to add to this design series, I truly hope you leave a comment. Enjoy! S is fo...
Permission denied to call method Location.toString
mar
20
2009
For a while I've been noticing seemingly random errors popping up on some of my websites. It hadn't happened on my blog here, but other sites caused this error to appear in Firebug: Permission denied to call method Location.toString No file name, no line number, no indication where the error occurs or why. Upon further investigation I discovered that it only...
Adobe AIR: Call JavaScript from a SWF (also win money)
mar
19
2009
(skip to the contest info) The typical (and fairly safe) way to call a JavaScript function from a SWF is ExternalInterface.call. However, Adobe AIR does NOT support ExternalInterface, so we have to look for an alternative if we want to interact with embeded SWFs in HTML AIR apps. Before ExternalInterface was introduced to ActionScript, there was fscommand, naviga...
Google vs. Firebug Console
mar
13
2009
Round one: Gmail It all started with GMail. The scary red bar at the top of the screen that proclaimed Firebug's debug console doesn't play nicely with others. That's fine, they give you the option to hide the message if you really need the console open, and tell you how to disable it for only GMail's site if not. No harm, no foul. Aw, GMail...
Adobe AIR: Why won't my SWF load?!
mar
09
2009
If you develop Adobe AIR applications using AJAX, you may eventually come across a strange bug. Adobe says you can embed external SWF files in your HTML application, and from that example code it's simple! So why do SWFs seem to load fine in some HTML AIR apps, but in others they don't show up at all? <!-- Whether the window is transparent. ...
HTTP, HTTPS, and SSL via PHP
feb
10
2009
Jump to parts of this post: HTTP with PHP Sockets Direct SSL Sockets in PHP HTTPS via cURL See Also: fsockopen on PHP.net cURL on PHP.net curl_setopt on PHP.net Writing server sockets to handle these requests (out of this post's scope) HTTP with PHP Sockets // don't need to specify http, it's the default protocol $hostname = "...
Choosing a Valid DOCTYPE
jan
26
2009
(skip to the doctypes) When building a website, it's important to add a DOCTYPE declaration at the very top of your HTML or XHTML source code. In most cases, putting anything at all before the DOCTYPE (even whitespace!) will result in some browsers falling back to "quirks mode", causing your site to render improperly. Spelling and capitalization both matter, so oft...
Synchronous SQLite Singleton
jan
13
2009
SQLite is already pretty easy to use, but here's a simple abstraction that makes it even easier to interact with a SQLite database. I developed this to reuse in my own Adobe AIR apps, because AIR uses SQLite as its native databse implementation, but this code is not necessarily dependent on Adobe AIR. The only thing you should have to change on another platform is the...
Adobe AIR 1.5: GUI-less Application Updates
jan
09
2009
Previously, I showed you how to automatically update your Adobe AIR 1.5 application using Adobe's ApplicationUpdaterUI. What if you don't need (or want) to rely on user interaction at all? While the ApplicationUpdaterUI class provides basic updating functionality and a default user interface, ApplicationUpdater provides update functionality while letting you handle t...
AJAX Phrasebook
dec
21
2008
Creating an AJAX object (XMLHttpRequest) Setting up a callback function Making GET requests Setting HTTP request headers POSTing form data Aborting an AJAX request in progress Server-side AJAX processing with PHP Serving XML, JSON, (X)HTML, or plain text Putting it all together: A reusable AJAX Singleton Creating an AJAX object...
Seamless Application Updates with Adobe AIR 1.5
nov
25
2008
Providing updates to people who use your AIR apps can be a bit of a hassle. The actual Updater code only takes one or two lines, but you essentially have to write your own framework around it to consider it full-featured (check, compare, download, install). Some have supplied examples in ActionScript and JavaScript, but Adobe made it even easier in AIR 1.5. Here's the...
.htaccess: Cache Rules Everything Around Me
nov
17
2008
Properly configuring the cacheability of your webpages and other components can greatly improve the performance of your site for returning visitors. The longer a component is cached, the less often that same visitor has to redownload the component, saving you bandwidth and your visitors time. There are many ways to set HTTP headers for caching. // Example 1: cache vi...
Exceptional Performance: Image Optimization
nov
13
2008
Image optimization should be a big part of tuning your website's performance. The largest components of a page are typically images, and unlike HTML, CSS, and JavaScript, images don't reap much (if any) benefit from being served gzipped. There's still a lot that can be done to speed up your images that don't involve any loss in quality. YSlow Serious? YS...
jQuery Time Picker
nov
12
2008
One of the major conventions in UI design is to use what people already know. If you present an interface that is unfamiliar, people tend to be hesitant to accept or use it regardless of how good or bad it might be. That said, sometimes someone comes up with a new UI component that is both cool and useful. Maxime Heinault's jQuery timepickr is one such component. ...
Passing Arguments to setTimeout and setInterval
nov
10
2008
(skip intermediate solutions) Often, we need to use setTimeout and setInterval but also need to pass arguments to the function being called. There are a handful of ways to do this. // Example 1, BAD! :( var hello = 'Hello World!'; setTimeout("alert('" + hello + "')", 1000); Example 1 works, but it is not the generally acce...
Generate Social Bookmarks with PHP
nov
04
2008
Social bookmark links are a given on most modern sites, especially blogs or collections of articles. Here's one way to keep your list of social bookmark links easy to maintain. Start with a CSS sprite like the following: The sprite should be a single image that consists of all of the icons for the sites you want to link to. Each icon should b...
Order of Operations in JavaScript
nov
03
2008
Operators are evaluated in the order supplied in the following table. Associativity applies when more than one operation with the same precedence takes place. Left-to-right Associativity means that operations of equal weight in a single statement are performed from left to right. Order Assoc Operator Summary 1...
Specificity in CSS
oct
31
2008
Ever wonder why some styles don't seem to get applied to your pages? Ever come across (or produce) a stylesheet littered with !important declarations? The reason is likely selector specificity. Specificity in CSS is how browsers determine which rules should be applied to a webpage. If two selectors can point to the same HTML element, the rule with the higher specificit...
Generating Unique IDs with JavaScript
oct
31
2008
Sometimes you want to generate unique IDs with JavaScript. Perhaps you're creating several DOM elements and want your script to automatically avoid naming conflicts. Anywhere automatic name or number generation is used, there's a chance you'll need to ensure you can get a unique ID. var uniqueID = function() { var id = 1; // initial value ...
Checking Network Availability in Adobe AIR
oct
31
2008
Here's a module that detects whether your Adobe AIR app is connected to the internet. var Net = function() { var url = false; // assigned during init() var connected = false; // automatically updated var handlerEventComplete = function(e) { connected = true; }; var handlerIoError = function(e) { connected = false; }...
JavaScript in Action: thesixtyone.com
oct
30
2008
Just wanted to point you to thesixtyone if you don't already use it. It's really one of the few next-gen websites that I think really does it right. Thesixtyone calls itself a "music adventure" — you earn XP for listening to music as well as reaching various milestones. You can support songs you like by bumping them. Bumps cost XP, but the more popular the...
Exceptional Performance: Styles Up, Scripts Down
oct
29
2008
This is the first post in a series about improving website performance. Here's a simple tip that can significantly speed up your website loading time in the eyes of your visitors. Since HTML defines the structure of your page and CSS defines how your website is presented, modern browsers hang onto your content until you tell them how it should be displayed. This behav...
Zapping Trailing Commas Using Regular Expressions
oct
28
2008
(skip to the finished product) Here's a PHP tip that will hopefully come in handy. Say you have an automatically generated string that dumped a bunch of stuff together and separated them with commas. Meta keywords, post tags, first and last names, whatever. Ideally you could "fix" your generation process and not introduce the trailing comma to begin with, but we all...
I'm a PC, and I'm a Mac
oct
28
2008
What do you get when you cross 50 Mac Minis, a case of Monster energy drinks, and a bunch of programmers in the Geekworks basement? Check it out! Fifty Mac Minis loaded with Windows XP Embedded and our digital signage app, written for Adobe AIR. iWall mWall? Monster really should be paying US, not the other way around. ...
AJAX: Cross-Browser XMLHttpRequest
oct
28
2008
The term AJAX has grown to encompass a broad range of technologies and programming methodologies. As you'll find throughout web development, there's often a DOM way to do something, and then there's The Microsoft Way to do it. In this case, there are actually two Microsoft ways. var http = function() { try { return new XMLHttpReque...
(function(){})(); and Scope
oct
27
2008
No, that's not a typo. (function(){})(); has a lot of punctuation, but that's what it really looks like. It's easier to understand if you break it down: ( // 1 function // 2 () // 3 { // 4 alert("code goes here"); } // 5 ) // 6 (); // 7 ...
arguments.callee
oct
27
2008
arguments.callee is a powerful JavaScript construct that allows a function to call itself. Sound useless? It's not. arguments.callee allows even anonymous functions to be recursive. A classic example of recursion is something like this: function getFactorial(x) { if (x <= 1) { return 1; } else { return x * argument...
