Connect Multiple Browsers using JavaScript

When searching for answers to development issues, I often land on Ben Nadel's Blog.

I landed there today and subsequently stumbled upon the most glorious JavaScript post I've ever seen in my entire life.

Ben demonstrates how to communicate with multiple client browsers using JAVASCRIPT! That's right. Imagine you and your friend have the same website pulled up. Then imagine you click on text field and started typing... and watching your friend's browser update INSTANTLY. No joke.

Ben shows us more here: http://www.bennadel.com/blog/2171-Realtime-Messaging-And-Synchronization-With-NowJS-And-Node-js.htm



Thanks, Ben!

Dynamic Image Placeholders (or what I like to call 'Image Ipsum')

Ever struggle to find a generic image placeholder of a web design during development?

Two fantastic sites you need to checkout:

http://kittenholder.com

http://flickholdr.com

Both services allow you to paste a URI like "http://flickholdr.com/980/220/balls" into your HTML and get back a random JPEG. In the above URI, 980 is width, 220 is height and 'balls' is a search parameter.

One suggestion for kittenholder.com - rename your website to loremkitten.com ;)

Caching JSON Requests

ShopWarrens.com is a retail website I've been developing for a couple of months.  The latest version was designed specifically with speed in mind.  We want customers to be able to find exactly what they are looking for quickly and intuitively.

The site is being served from a shared environment.  While its very cost effective, the database performance is less than ideal.  We've done our best to keep db processing to a minimum.  But with every request for a product list comes yet another hit against the database... and they were sometimes very costly hits.

I'd eventually had it with the intermitent performance issues and said to myself - 'there's got to be a way to make these requests load faster for ALL visitors'.  I want peoples minds to be BLOWN away at how fast the web experience is.

Then it hit me... all I'm returning to the browser is a JSON string.  What if that JSON string was cached in 6hr intervals?  Then the product lists would load INSTANTLY... no waiting for db processing...  the server can respond as fast as possible with the appropriate JSON response.

My solution was build in ColdFusion (hangs head in embarrassment) but the same could be applied to any server language.

Here's how it works...

Here's my server directory structure:
   ajax/products.get.cfm
   ajax/products.list.cfm
   ajax/_cache.cfm
   ajax/_cache  (this is a dir)

In each file that processes a request and returns JSON, I include _cache.cfm at the top of that file.  At the very bottom of each file, I also change my <cfoutput> or WriteOutput() to a custom function called CacheOutput(JSON_STRING_HERE).

Here's what _cache.cfm does. (remember - its being included before anything else)

1. Scan the cache directory for files older than 6hrs and deletes them.
2. Creates a unique identifier for the given request by lumping the current server file that's being processed with any GET or POST variables.
3. It then compresses the potentially large unique identifier into an encrypted hash string. This new string becomes the file name for the cache content.
4. Does a file already exist in the cache with that unique identifier?
   - if YES, serve that content up and ABORT page execution
   - if NO, let the current page on the server finish processing the request
   
5. Lastly, it defines the function that will be used on the original page processing the request to output AND cache the result.

Here's the code:

<cfset __cacheMinutes = 60*6>

<!---------------------------------->
<!--- keep the cache files clean --->
<!---------------------------------->

<!--- get all files in the cache ----->
<cfdirectory directory="#ExpandPath('.\')#/_cache" name="qDir" sort="datelastmodified ASC" type="file" />

<!--- determine the expiry date --->
<cfset cacheExpiryDateTime = DateAdd('n',-__cacheMinutes,Now())>
<cfset timestr = '#DateFormat(cacheExpiryDateTime,"yyyy-mm-dd")# #TimeFormat(cacheExpiryDateTime,"HH:mm:ss")#'>

<!--- filter the files by the expiry date --->
<cfquery name="qDir_filtered" dbtype="query">
 SELECT *
    FROM qDir
    WHERE datelastmodified < '#Evaluate("timestr")#' 
</cfquery>

<!--- delete old files --->
<cfloop query="qDir_filtered">
 <cffile action="delete" file="#ExpandPath('.\')#/_cache/#name#" />
</cfloop>


<!-------------------------------->
<!--- build a unique requestid --->
<!-------------------------------->

<!--- start the request id with the server page being executed --->
<cfset __requestID = '#CGI.PATH_INFO#'>

<!--- add url variables to the unique requestid --->
<cfset StructDelete(Url,'FieldNames')>
<cfloop collection="#Url#" item="i">
 <cfset __requestID = '#__requestID#_#i#-#Url[i]#'>
</cfloop>

<!--- add form variables to the unique requestid --->
<cfset StructDelete(Form,'FieldNames')>
<cfloop collection="#Form#" item="i">
 <cfset __requestID = '#__requestID#_#i#-#Form[i]#'>
</cfloop>


<!-------------------------------->
<!--- build a hashed filename ---->
<!-------------------------------->
<cfset __cacheID = Hash(__requestID)>
<cfset __cacheFile = '#ExpandPath('.\')#/_cache/#__cacheID#.bk'>


<!-------------------------------->
<!--- does this cache exist? ----->
<!-------------------------------->
<cfif FileExists(__cacheFile)>
 <cffile action="read" file="#__cacheFile#" variable="CachedContent" />
    <cfoutput>#CachedContent#</cfoutput>
    <cfabort>
</cfif>


<!------------------------------------------------>
<!--- build the function that caches content ----->
<!------------------------------------------------>
<cffunction name="CacheOutput" output="yes">
 <cfargument name="OutputString">
    
    <!--- output the result as fast as possible --->
    <cfoutput>#OutputString#</cfoutput>
    
    <!--- write the output to the cache --->
    <cffile action="write" file="#__cacheFile#" nameconflict="overwrite" output="#OutputString#" />
</cffunction>

The IE8 Speed Fix!

I hate Microsoft.

Its been a solid few months since I've been using IE8 (only for website testing, not everyday browsing). I noticed that every so often (more often then not), one of the tabs in IE would just hang. It wouldn't load the page. I'd open a new tab to fix it... and it wouldn't load either. I'd pop into Google Chrome and the same URL would load fine. This would also happen in IE8 pop-up windows.

I finally decided to do some research on the issue, and to my surprise, there's actually a solution. So far, it seems to have worked for me. Hopefully it'll do the same for you:

1) Open Command Prompt (Start > Run > Type: 'cmd')
2) Type: 'regsvr32 actxprxy.dll'
3) You should see an alert box pop up saying something was successful.
4) Reboot.
5) Enjoy a less buggy IE8 experience.

I'm running XP and this solution works great. Not sure if this solution will work for Vista users or not. If it doesn't, the next best thing would be to find the IE8 installer and reinstalling IE8 completely.

Poster Design as Inspiration

I'm always on the lookout for different sources of inspiration to help keep my designs fresh. This book is pretty awesome. Its called 'New Masters of Poster Design' and is a collaboration of poster design from around the world.

First off, the designs are out of this world. Some of the designs have me wondering, "Woah - what client would ever say 'Yes!' to that!?! Its too crazy!" Its obvious that the designers hired to do this work were given 100% creative freedom.

Secondly, the creative influences in this book are global... and it shows. There's so much variety in the designs. The book exposes you to creative genius that you'd, otherwise, be hard pressed to experience.

Lastly, by nature of poster design, its a completely different format then web or corporate collateral design, at least in this book. Much of the strange formatting used in the posters (which work well for posters) can be used to influence new ideas in formatting web designs or corporate collateral.

All in all, its a great purchase. I purchased it just over 8 months ago and I still take a peak through it once or twice a month as a creative refresher.

Pick it up at Indigo - http://www.chapters.indigo.ca/books/New-Masters-Poster-Design-Poster-John-Foster/9781592532223-item.html.