I’m sure I am but one many people testing out Wordpress for iPhone right now. I just couldn’t resist.
So far it was been about two minutes since the app finished downoading. So it seems blogging may just be as easy as setting up exchange on the iPhone.
Jul 22 2008
I caught wind of this parody of the MacBook Air commercial and thought it was great. I love the sleekness of it and Apple in general, but the choice to remove things that are commonly used like say – a cdrom drive is just crazy.
But then again, some people really love their Air.
[Although I would probably be the same way if I had one 
]
Apr 30 2008
[See a demo here]
Modal windows seem to be the rage these days and somewhat synonymous with “Web 2.0.” And yes, options exist, whether it be Lightbox, Thickbox, or .NET AJAX — to name a few. Recently, Facebox has emerged as a very promising contender. The aforementioned plugins/widgets have proven their usefulness to many developers during their life course. In fact they one might even go so far as to deem “standard” to the plugin of choice.
Yet, what if a scenario arises where you do not need such full featured capability? After all, most of the plugins out there come with their own CSS along with the JavaScript. This is not to say that CSS wouldn’t be necessary if one were to create a homegrown solution. The fact remains that their is still integration work involved.
Therefore, my aim in this post is to illustrate a simple example of leveraging the jQuery framework to create a simple iFrame modal window. Of course a polished plugin will be more robust, however, robust is at times overkill. It is at that point where simplicity comes into play and thus the forthcoming example.
First we create an object in JavaScript to encapsulate some core methods and properties that we could potentially reuse.
var modalWindow = {
parent:"body",
windowId:null,
content:null,
width:null,
height:null,
close:function()
{
$(".modal-window").remove();
$(".modal-overlay").remove();
},
open:function()
{
var modal = "";
modal += "<div class=\"modal-overlay\"></div>";
modal += "<div id=\"" + this.windowId + "\" class=\"modal-window\" style=\"width:" + this.width + "px; height:" + this.height + "px; margin-top:-" + (this.height / 2) + "px; margin-left:-" + (this.width / 2) + "px;\">";
modal += this.content;
modal += "</div>";
$(this.parent).append(modal);
$(".modal-window").append("<a class=\"close-window\"></a>");
$(".close-window").click(function(){modalWindow.close();});
$(".modal-overlay").click(function(){modalWindow.close();});
}
};
Notice that only three CSS classes need to be defined, “.modal-window”, “.modal-overlay”, and “.close-window”. Because of the fact that we are trying to keep things simple, I’ve decided not to check to null’s in required properties (windowId, content, width, height).
Next the three classes from above need to be defined. The “.modal-overlay” class is the layer that covers the current view and serves as a backdrop for the modal window. “.modal-window” is obviously the window itself. In this case, the modal-window class is very generic since we will rely on the styling in the transparent iFrame for design. Lastly, I chose to implement a close graphic which is displayed using the “.close-window” class. Again, this is very basic.
.modal-overlay
{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
height:100%;
width:100%;
margin:0;
padding:0;
background:#fff;
opacity:.75;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
z-index:101;
}
.modal-window
{
position:fixed;
top:50%;
left:50%;
margin:0;
padding:0;
z-index:102;
}
.close-window
{
position:absolute;
width:32px;
height:32px;
right:8px;
top:8px;
background:transparent url('/examples/modal-simple/close-button.png') no-repeat scroll right top;
text-indent:-99999px;
overflow:hidden;
cursor:pointer;
opacity:.5;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
}
.close-window:hover
{
opacity:.99;
filter: alpha(opacity=99);
-moz-opacity: 0.99;
}
Now that we have set some basic styles and defined our core functionality, we can open a new modal window to display our iframe.
var openMyModal = function(source)
{
modalWindow.windowId = "myModal";
modalWindow.width = 480;
modalWindow.height = 405;
modalWindow.content = "<iframe width='480' height='405' frameborder='0' scrolling='no' allowtransparency='true' src='" + source + "'></iframe>";
modalWindow.open();
};
<a href="/example/modal-simple/modal.html" target="_blank" onclick="openMyModal('/example/modal-simple/modal.html'); return false;">Click here to open</a>
Implementation is simple, just make a call to the method created earlier with the source of the modal window.
As stated at the outset, this post was meant to illustrate a bare bones and simple example of a modal window. If you wanted to extend the functionality for example, it would be quite simple to create more “openMyModal” methods to suit needs. So if Facebox or Thickbox are too much for your application, why not try the simple approach?
Apr 25 2008
I would like to make everyone aware that the Deseloper.org feed will be moving to a new location: http://feeds.deseloper.org/deseloper.
As you know, FeedBurner is used to serve up both the new (feeds.feedburner.com/deseloper) and old (feeds.feedburner.com/tomlauck) feeds. I will be removing the old FeedBurner url in the next few days, so make sure to update your bookmarks and RSS aggregators!
New Feed Location:
http://feeds.deseloper.org/deseloper
Mar 27 2008
I thought a little scenario might assist in prefacing this post.Bob has built a cool Flex application and it now time to show it off to the world. Bob is a web guy, so like most web guys, he uses YSlow to see the performance on his pages. Flex application and YSlow in hand, Bob uploads his files to his web-server. He then realizes that he forgot to ask himself one very important thing, “how big is this Flex application anyway?” To Bob’s dismay, the final size is almost 2 mb! Bob has some options:
Now back to me…Bob’s best options here are 3, 4, 5. And more specifically 3 and 5. If you aren’t familiar with RSLs (Runtime Shared Libraries) in Flex, I highly recommend them. By implementing RSLs, it becomes possible to cut down the initial file size of the application, only loading libraries when needed.But one still has to load the swf libraries, even if RSLs are utilized. In many scenarios users visit a specific page or URI before accessing or launching a Flex application. For instance, a search page followed by Flex search results. To take advantage of this, why not take employ AJAX? After all, its primary purpose is the asynchronous transmission of data, so AJAX seems like the perfect tool for the job.I chose YUI for this example, but you could use jQuery or something of the like.
//Caching methods using YUI
var flashCache = {
handleSuccess:function(o)
{
this.processResult(o);
},
handleFailure:function(o){ },
processResult:function(o){ },
startRequest:function(url) {
YAHOO.util.Connect.asyncRequest('GET', url, callback, null);
}
};
var callback = {
success:flashCache.handleSuccess,
failure:flashCache.handleFailure,
scope: flashCache
};
//Cache the swf and swz
window.onload = function()
{
flashCache.startRequest("flexApplicaiton.swf");
flashCache.startRequest("framework_3.0.189825.swf");
flashCache.startRequest("framework_3.0.189825.swz");
};
By asynchronously loading the Flex application, Framework while the user is taking a preliminary action, you basically take the 2 mb Flex application (although hopefully it is less because you are using Runtime Shared Libraries) and turn it into 12-40k. Otherwise known as the size of the page which the swf file is embedded. (The photo below is not a real representation of the scenario, but illustrates the difference in cache.)
It is understood that most users who visit your site have an empty cache. However, if you have instances where the user will spend some significant amount of time (enough to load the swf), you and Bob (from the outset) can rejoice in the now optimized speed and total score benchmark you will receive in YSlow…2 mb Flex application included.
Mar 19 2008
