1. Open up your Applications folder and find your old version of Firefox.
2. Right click -> Get Info.
3. Rename to “Firefox36.app”.
4. Download Firefox 4.0 and install as normal.

Voilà! You now have more than one Firefox browser to play with.

That was really simple huh? If someone knows how to do this on the Windows and Linux side, I would love to hear how.

In January 2010, Apple announced to great fanfare that they had recently sold their 3 billionth iPhone application. Of course not all these applications are paid-for, but with a 30% levy taken on each and every paid-for application, Apple are taking a significant share of the revenue from the application pie. However, as a distribution channel, the AppStore is second to none, whilst the iPhone uptake is staggering, with a majority share of the smartphone market in many regions of the world. There is a significant opportunity for any developer to make a huge return on investment, assuming the idea is a winning one.

iPhone, Android, Windows Mobile, Blackberry, Nokia and now the larger form factor iPad and Kindle support the idea of applications, or will do in the near future. So what do you need to do to design and build your first application?

1. Familiarise yourself with the rules
   Whether you’re going to build applications for the iPhone OS, Android OS or any other of the mobile platforms, you will need to familiarise yourself with how each operating system does things. Smartphone development is different from the development we are accustomed with on the Web. Reading the user interface guidelines for each platform will go a long way to developing your first application. Smartphones are personal devices and know where you are almost all the time through GPS. They have rotation detectors, compasses and multitouch screens with gestural interfaces. Only once you know what is possible with each smartphone platform can you begin to design your application.
2. Brainstorm the issues
   This is the creative part of your application development process. You have a basic idea, but you need to take it forward into something that has features and benefits. Will the application be paid-for or free? Will it provide a service or be a marketing channel? Will it be standalone or link closely with other online presences and networks? Smartphone applications, unlike ordinary websites, invariably need to actually do something. There is an element of artificial intelligence at play, whereby the phone can actually know where it is in the world and it’s orientation, whilst the user interface is remarkably different from that of simply a mouse and keyboard. Smartphone applications can’t simply be flat catalogues, they need to do something and do it well. Whether this is booking and accessing a car as with StreetCar, buying something from eBay, paying with PayPal, creating music with RjDj, drawing pictures with Brushes, price comparison with RedLaser, reading the latest news from the Guardian, video casting with Qik or planning your journey with Tube Deluxe your app needs to be compelling.
3. Create a prototype
   You have your compelling idea; create a proof-of-concept prototype. This prototype is used to test some or many aspects of the intended design without attempting to exactly simulate the visual appearance, content or intended interactions. Such prototypes can be used to “prove” out a potential design approach such as range of motion, mechanics, sensors, architecture, etc. Making paper prototypes, for example, is a great way to test the application rather than creating low or high fidelity wireframes and hoping for the best. Doing this also provides a perfect opportunity for people around you — friends, colleagues and family members — to try out the prototype with little fuss. Only once you’re happy with the design should you begin any form of coding.
4. Submit early
   You have your application working. You have conducted a number of usability tests and all is looking great. It’s time to submit it to the appropriate application store. Apple has its AppStore, Android its Market Place, Nokia its Ovi Store and so on. Each store has its own nuiances, but if you’re considering an iPhone application, Apple has been know to drag its feet when approving applications for release. Apple has a much discussed approval process, with the possibility of rejection commonplace. Don’t make plans that depend on Apple. It is better to silently release the application, rather than creating a huge fanfare.
5. Iterate often
   Once your application has been launched your work is nowhere near over, indeed it has just begun! As you gain more and more users, improvements will suggest themselves not only from within your team, but more often, from your users. Here is where you go back to stage two and start brainstorming again. Version 2 may include bug fixes, but also major feature updates. For the latter, your brainstorming will decide what is most important for the next iteration. When your next iteration is complete, the AppStore, for example, makes upgrades far easier to achieve than for normal desktop software.

If you’re planning an application that could disrupt one of the smartphones capabilities, such as Google Voice for the iPhone, it may be worth considering whether building an application specifically for that particular operating system is worthwhile. Google Voice was neither approved nor rejected by Apple for the iPhone, but has now been replaced by a fully featured HTML5 web-based application; circumventing the Apple approval process. Of course this now means that the same web-based application can be used for not just the iPhone, but other smartphones.

Now go forth and build it!

Resources

Smartphone User Interface Guidelines:

• Apple iPhone Human Interface Guidelines (HIG)
• Apple iPhone Application Programming Guide
• Android User Interface Guidelines
• Android Human Interface Guidelines (adapted from Apple)
• Nokia User Interface Style and Visual Guidelines
• Palm User Interface Guidelines
• RIM Blackberry User Interface Guidelines

Application Development Frameworks:

• PhoneGap an open source development tool for building iPhone, Android, Blackberry and other mobile apps with JavaScript
• Appcelerator a mobile development platform for javascript developers

Mobile Web Application Frameworks:

• jQTouch a jQuery plugin for mobile development
• iUI an iPhone/iPod Touch user interface framework

Other:

• Wikipedia article on Mobile Development

Apache 2.x uses mod_deflate. Much like setting expires headers, this will save you bandwidth and server load, because it allows output from your server to be compressed before being sent to the client over the network.

The deflate module is not compiled by default and must be enabled in the Apache httpd.conf file. Make sure the following is present and uncommented (remove preceding the #):

LoadModule deflate_module modules/mod_deflate.so

To set GZip compression, simply add the following to the section of your Apache vhost configuration:

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

Alternatively you can add it to your htaccess file in an <ifModule mod_deflate.c></ifModule> block.

All you really need is the first line. The BrowserMatch lines are there to handle issues with older browsers such as Internet Explorer 5.

You can read all about GZip by reading Yahoo!’s Best Practices for Speeding Up Your Web Site guide.

Alternatively, read the Apache mod_deflate documentation.

Compared to JavaScript it is far easier to parse the URLs, Usernames and Hashtags in a tweet using ColdFusion and minor amendments to the regular expressions used in the JavaScript code.

Below is an example tweet that I’ll use for this post.

<cfset myTweet = "Woot! I've just taken receipt of my Holux M-241 GPS logger. Good call @fordie. http://bit.ly/2RsAu ##holux ##gpslogger" />

NB. For the purpose of this test, I need to double-hash the hashtags to prevent ColdFusion throwing an error.

Parsing URLs as Links to the resource

We can simply demonstrate the parsing of the link with the following code in the body of the page:

<cfset myTweet = REReplace(myTweet,'([A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&amp;\?\/.=]+)','<a href="\1">\1</a>','ALL') />

NB. The \1 is a back reference to part of the regular expression match. A backreference stores the part of the string matched by the part of the regular expression inside the parentheses. This means you can reuse it inside the regular expression, or afterwards as I am doing in each of these examples.

The resultant HTML generated is the following:

Woot! I've just taken receipt of my Holux M-241 GPS logger. Good call @fordie. <a href="http://bit.ly/2RsAu">http://bit.ly/2RsAu</a> #holux #gpslogger

Parsing Usernames as Links to Twitter

Following on from the URL example above, we can apply a similar methodology to Twitter usernames since they can also be URLs to their associated Twitter page.

We can simply demonstrate this with the following code:

<cfset myTweet = REReplace(myTweet,'[@]+([A-Za-z0-9-_]+)','<a href="http://twitter.com/\1" rel="nofollow">@\1</a>','ALL') />

The regular expression in this case finds all instances of @username. The Twitter URL is then applied to the username.

The resultant HTML generated is the following:

Woot! I've just taken receipt of my Holux M-241 GPS logger. Good call <a href="http://twitter.com/fordie" rel="nofollow">@fordie</a>. http://bit.ly/2RsAu #holux #gpslogger

Parsing Hashtags as Links to Twitter’s Search

Finally, Twitter also allows user’s to create Hastags within their posts. Hashtags are a community-driven convention for adding additional context and metadata to your tweets. Like regular URLs and usernames, Hastags can been parsed as a URL to an online resource, in this case, Twitter’s search.

We can simply demonstrate this with the following code:

<cfset myTweet = REReplace(myTweet,'[##]+([A-Za-z0-9-_]+)','<a href="http://search.twitter.com/search?q=%23\1" rel="nofollow">##\1</a>','ALL') />

The regular expression in this case finds all instances of #hashtag. The Twitter Search URL is then applied to the hashtag.

The resultant HTML generated is the following:

Woot! I've just taken receipt of my Holux M-241 GPS logger. Good call @fordie. http://bit.ly/2RsAu <a href="http://search.twitter.com/search?q=%23holux" rel="nofollow">#holux</a> <a href="http://search.twitter.com/search?q=%23ipslogger" rel="nofollow">#gpslogger</a>

All in one

So, putting all the regular expressions together, you would end up with the following:

Woot! I've just taken receipt of my Holux M-241 GPS logger. Good call <a href="http://twitter.com/fordie" rel="nofollow">@fordie</a>. <a href="http://bit.ly/2RsAu">http://bit.ly/2RsAu</a> <a href="http://search.twitter.com/search?q=%23holux" rel="nofollow">#holux</a> <a href="http://search.twitter.com/search?q=%23gpslogger" rel="nofollow">#ipslogger</a>

Which translates as the more useful tweet:

Woot! I’ve just taken receipt of my Holux M-241 GPS logger. Good call @fordie. http://bit.ly/2RsAu #holux #gpslogger

Where to take it next

Wrap these code snippets up into a simple twitterise function could be a good starter for ten. Following that, we could also create a simple Twitter feed reader, but I’ll leave that up to you to develop.

Take this scenario. A company I once worked for had what can be described as a business directory built upon a licensed, yet bastardised, version of a popular ColdFusion-based CMS. It didn’t work that well! The decision was made to redevelop the application in Java. It took two years to reach the same level of functionality! What happened next? Ruby-on-Rails is what! The rest is history and beyond the topic of this post.

So, in effect, the application almost went full-circle in its development paradigm — both ColdFusion and Ruby-on-Rails can be considered Rapid Application Development environments, Java, certainly not. Why did the decision makers not stick with ColdFusion and put time aside to actually build it properly in the first place? To put it simply, they lost faith in ColdFusion; it was largely mis-understood.

The weakness of every programming language does not lie with the language itself per se — albeit it can have an important influencing factor — but rather with the ability, or indeed inability, of the developer to leverage the language in the most efficient and optimal way.

ColdFusion, like every other programming language has had and I’m sure still does have its fair share of poor developers; those people simply working with it as a means-to-an-end, rather than those passionate about the language, those people programming without understanding the fundamentals of programming or the implications of their poorly written code. This is apparent from .NET to Java, ColdFusion to Ruby, JavaScript to ActionScript.

Let’s not dilly-dally, bicker or insult one another about which is best, which one is dying and which one is not worth the computer it is compiled on. What is important is to understand the merits of each language and decide which one best suits the application, not only in technical terms, but also in terms of time-to-market, cost of development, availability of a skilled workforce etc.

ColdFusion, whether rightly or wrongly in some people’s opinion, can sit proudly amongst its peers and provide a truly compelling alternative.

Here’s how (in no particular order):

1. Low Total Cost of Ownership – frequently, ColdFusion is described as expensive, it simply isn’t especially if you consider the natively supported functions. But to put it bluntly, if your company cannot afford the cost of ColdFusion standard, or indeed ColdFusion hosting, you have bigger things to worry about regarding the profitability of the company; you won’t be able to afford much of anything! The problem becomes not the product. ColdFusion applications are quicker to develop and developers are vastly cheaper to employ than their peers in Java or Ruby, just look at ITJobsWatch for examples.
2. Rapid Application Development – ColdFusion vastly simplifies tasks. What would take other languages numerous lines of code to produce is efficiently encapsulated either in a tag or function or as a setting in the administrator. This is a simplistic yet indicative example: where else can you connected to a database simply with one line of code or indeed simply by name? ColdFusion changed the idea of specifying development time in terms of months and years to weeks and months or small features a matter of hours and days. Simplicity is not the mother or all evil. To be pragmatic, simplification reduces costs.
3. Rich Internet Applications – ColdFusion may or may not have pioneered the RIA paradigm, but it has played a significant supporting role to Flash and now Flex. ColdFusion natively supports Flash remoting, providing the all important data access tier.
4. Platform Maturity – ColdFusion 8 is built upon the latest version of Java (1.6). Along with internal improvements to the ColdFusion application, this has afforded ColdFusion unprecedented speed improvements and stability.
5. Language Maturity – with each major release of ColdFusion comes many language enhancements added to the core. This means that previous addons, for example image manipulation, which came at a premium are now standard. Adobe and other companies that produce CFML engines are now participating in a CFML advisory committee, which aims to set standards for the core language. This is not only a sign of maturity but a letter of intent by the industry that will mean your application will work on any engine, assuming no proprietary functionality is used.
6. The Ultimate Middleware – ColdFusion sits comfortably between any backend and front end system. Be it interfacing with a host of databases, Java, .NET, COM, Corba or connecting to classic HTML or rich Flash, Flex and AJAX frontends with little or no configuration.
7. Feature Rich – what other web technology natively supports PDF generation, charting, enterprise-level search, AJAX, image manipulation, Atom and RSS creation, Zip and JAR file manipulation, a server monitor, Flex integration, encryption libraries, all important database connectors, webservice creation, XML manipulation, inbuilt reporting application (similar to Crystal Reports), email, FTP to name but a few? I hazard a guess at none, unless you’re happy to pay a premium.
8. Platform Independent – since ColdFusion 6, when Macromedia redeveloped the entire application in Java, ColdFusion has been platform independent. You can install it on practically any machine.
9. OpenSource Alternatives – BlueDragon and Railo are both significant alternatives to Adobe ColdFusion and both have opensource alternatives, the latter of the two having recently joined the JBoss community. Adobe are also considering providing a free edition to academic institutions.
10. The Future – many commentators have mentioned Hibernate as a significant addition to the next release of ColdFusion, version 9. But having seen the prerelease notes, that is not all that will be added. Alas I’m under NDA, but rest assured, there is going to be a significant intake of breath when developers get hold of the next release. ColdFusion 8 was firmly geared towards middle management with fuzzy additions, ColdFusion 9 is set to re-address the balance with compelling language and functionality enhancements.

ColdFusion evangelism needs to step up a gear! Adobe certainly doesn’t afford much marketing budget to the product, prefering The Community do the hard work. It is not always easy convincing the decision makers that ColdFusion is a good product of choice, without Adobe’s unnerving support, but we have to work hard, break down those barriers, encroach on events outside the comfortable sphere of the ColdFusion world and demonstrate ColdFusion’s match-winning ability.

ColdFusion isn’t dying, it’s simply niche. Every niche has its place.

UPDATE: If you would like to view the ensuing debate regarding ColdFusion prompted by Aral Balkan, feel free to do so. This post should serve as a positive reminder of ColdFusion’s virtues, alongside the need for a balanced and polite debate.

But what makes up a web community; what makes them successful? Below I discuss the four C’s of community: Content, Context, Connectivity and Community.

Content

A current meme when organising or building a website is the catchphrase Content is King. A big shift in the web in recent years has been the way websites are constructed. Today it’s a necessity, and indeed best practice, to separate form from content. In one hand you have the compelling content, whilst in the other you have the presentation, be it in the form of HTML and CSS, Flash or RSS, amongst others.

Quality content is one way in which you can make your website stand out. It is also a great way to attract the people who are needed to form the elusive community that your brand is hoping build. When considering community initiatives, there are three questions to ask: Where will the content come from; for example community driven or syndication? Does it provide indisputable value; does it have a unique selling point (USP)? Can a regular flow of quality content be maintained? Even pre-Web 2.0 initiatives have to focus on keeping the content itself fresh and relevant.

Web accessibility and search engine optimisation are also vital, so having content completely separated from presentation means a number of assistive technologies can make better use of the content, whilst the web robots can also readily consume the information.

Context

Context means understanding how people use your website, where they are in the user-journey and serving them the right experience at the right time. Well-designed applications and functionality have great opportunities to deliver on context.

For example, FriendFeed‘s iPhone version, which is simply a re-worked web interface, is perfectly designed for contextual usage on the go. Similarly, Remember The Milk updates the interface explicitly for mobile and iPhone users, whilst also syndicating the content to applications such as Google Calendar. (It is questionable whether user-agent switching is good practice, but that is a whole new blog post.) Conversely, Delicious makes no attempt at changing the user interface for iPhone or Nokia N95 users since the iPhone and N95 have full web-capabilities through their respective web browsers.

In some instances the context in which the content is displayed will require reduced functionality. For example, the Last.fm mobile site does not allow you to play music, but simply search music listings, view recommendations, events and friend listings, and edit settings. However, through its API, Last.fm is able to offer its data and platform to third party developers to aid the building of new applications and communities, thus changing its context.

Connectivity

Connectivity is the ability of a system, whether that is a web-based community or a device like the iPhone, to connect with little or no modification. In the realm of communities, the ability to easily connect to your peers is the Holy Grail of the application.

Successful communities thrive on fluid, hard-to-measure activities that are, in the purest sense, relationship-based. It’s not all about mass communications — although Twitter and YouTube are both bucking this trend — but more about the micro-interactions. Designing experiences that support thousands of micro-interactions means that the community is able to function, unhindered, almost indefinitely. Facebook lends itself expertly to micro-interactions through the user’s ‘wall’.

Companies are turning to communities as the new customer relationship management (CRM), but this requires people to mind them. Organisations such as 37Signals and WildBit very effectively use Twitter to broadcast service updates and sometimes apologies, whilst the BBC and The Guardian online use it to broadcast links to new content.

Continuity

People often don’t like change, but communities that thrive often do so though evolution to meet the needs of users. Communities need to be flexible to evolve while still providing a valuable and consistent user experience which can be sustained. Too much of a radical change will almost certainly have a detrimental impact upon visits, at least initially.

Building communities is the new marketing for a brand, whether that is through wholely-owned properties or 3rd party social media services such as Twitter, WordPress or Ning. The starting point to any community is finding a niche that is currently underserved and serving that community better than anyone else. But Brands need to know a few things before they head down the community path. The web is saturated with communities. Some are thriving, while others have come and gone. Creating a community is not like your average marketing campaign that you can ditch it is a failure. If the community is successful the four C’s of content, contect, connectivity and continuity will have to be maintained and indeed, developed.

UPDATE: You can download the beta project from the Google Chrome website.

Instead of me talking you through the project, Google and Scott McCloud have put together a cool little cartoon.

However, as a brief summary:

• Google Chrome is Google’s open source browser project.
• The browser will use the popular Webkit HTML rendering engine used in Safari and Adobe AIR.
• The browser will include a brand new JavaScript Virtual Machine called V8.
• The browser will include Gears to allow developers to enhance the user experience.
• Google Chrome will use special tabs, like more traditional browsers, but set above the address and menu bar.
• Each browser tab will run on its own process. If one tab fails for some reason, the whole browser will not need to be restarted, losing valuable work or tabs. This is similar to functionality found in Internet Explorer 8.
• The browser has an address bar which includes a more intuitive auto-completion feature called ‘omnibox’. It is said to be less ‘irritating’ than current auto-complete/suggest functionality common to Firefox 3 or Google Suggest.
• As a default homepage Chrome presents you with a kind of speed dial feature, similar to the one found in Opera.
• Chrome has a privacy mode, which allows you to create an incognito window and nothing that occurs in that window is ever logged on your computer. Again, this is similar to functionality found in Internet Explorer 8.
• Web apps can be launched in their own browser window without address bar and toolbar, much like Mozilla’s Prism project.
• To fight malware and phishing attempts, Chrome constantly downloads lists of harmful sites.

(Click on the images to see a larger view)

You can find out more information from Google’s blog post on the subject.

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

In this post I will show you how to implement the AutoCompleter plugin by Harald Kirschner. Kirschner’s AutoCompleter plugin script for MooTools provides the functionality for text suggestion and completion. It features different data-sources (local, JSON or XML), a variety of user interactions, custom formatting, multiple selection, animations and much more.

The Goal

The goal of this post will be the same as the jQuery autocomplete post: Allow the user to type a few characters into a standard form text input field and to automatically provide suggestions from which the user can select.

Prerequisites

1. The latest copy of MooTools
2. A basic understanding of JavaScript and JSON
3. A server-side script that can respond to the AJAX request, in our case ColdFusion

Demo

The demo below will show how to interact with a simple ColdFusion script, but I’ll also provide more (advanced) examples in the download.

How It Works

Once the user begins to type into the form text input field, the MooTools auto-complete is activated. After a set character length and time interval (both optional), a list of items is displayed below the input field. The user can select an item with either the arrow keys or mouse.

NB. Clicking back in the input field will repopulate the auto-complete list, if options are available, so that the user can change the selection. Deleting part of the chosen item will also trigger a new selection list.

The Code

There are three parts to this demo:

1. The page’s HTML.
2. The server-side code to produce the dynamic page (i.e. to load the autocomplete div when the user types something into the input field).
3. The MooTools JavaScript.

HTML Form

<h1>Example: Country Lookup</h1>
<p>Using <abbr title="Asynchronous JavaScript and XML">AJAX</abbr> to interrogate the database.</p>
<p>Example data: Australia, Bulgaria, United Kingdom</p>
<form name="frmAutoCompleteCountry" id="frmAutoCompleteCountry" action="#" method="post">
<p>
<label for="country">Country</label>
<input type="text" name="country" id="country" />
</p>
</form>

ColdFusion

Below is a simple ColdFusion component that takes a string as an argument. This string is part or all of the country name. The query results are parsed as an array and returned from the function, as JSON, to the MooTools auto-complete function.

<cfcomponent output="false">
 
	<cffunction name="getCountry" access="remote" output="false" returntype="array" returnformat="json">
		<cfargument name="country" type="string" required="true" />
 
		<cfset var qryCountry = queryNew('country') />
		<cfset var arrCountry = arrayNew(1) />
 
		<cfquery name="qryCountry" datasource="test">
		SELECT countryName
		FROM country
		WHERE countryName LIKE <cfqueryparam value="%#ARGUMENTS.country#%" cfsqltype="cf_sql_varchar" />
		</cfquery>
 
		<cfloop query="qryData">
			<cfset arrCountry[currentRow] = qryCountry.countryName[currentRow] />
		</cfloop>
 
		<cfreturn arrCountry />
	</cffunction>
 
</cfcomponent>

JavaScript

The JavaScript will attach itself after the DOM is ready — this more or less relates to when the page has loaded in the browser. Each time the text input field, with the ID of country, is changed, the Autocompleter.Ajax.Json event is fired. This makes a call to the ColdFusion component, which returns a JSON object of matched items. This JSON object is interpreted by the plugin and rendered as an HTML un-ordered list.

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="Observer.js"></script>
<script type="text/javascript" src="Autocompleter.js"></script>
<link rel="stylesheet" href="Autocompleter.css" type="text/css" media="screen" />
<script type="text/javascript">
window.addEvent('domready', function() {
	new Autocompleter.Ajax.Json(
		'country',
		'data/Country.cfc?method=getCountry&returnformat=json&country=' + $('country').getProperty('value')
		, {
			'minLength': 1, // We wait for at least one character
			'overflow': true // Overflow for more entries'
	});
});
</script>

Where to Take it Next

Unobtrusive JavaScript

As with any page that is loaded with JavaScript and AJAX functionality, it should work without JavaScript.

To achieve this with the above tutorial, you will need to replace the MooTools autocomplete functionality with an ‘interim’ page that allows a user to select from a list of items, effectively turning the input field into a simple search interface. Of course, all other form field information would need to be retained between pages.

Download the Code

The example code can be downloaded from the demo page. Included are ColdFusion and PHP examples.

As part of an AIR project that I have been working on with my good friend Rob, we came across the need to parse a number of URLs within the text of a Twitter post. This may not sound too easy at first, but thanks to the prototype property available on JavaScript objects, our task was a relatively simple one.

The prototype object of JavaScript is a pre-built object that simplifies the process of adding custom properties or methods to all instances of an object. For example, there is not a trim() method available on the String class, therefore, through the wizardry of regular expressions and the prototype property, I can add one.

You simply need to specify String.prototype before your method definition. e.g.:

String.prototype.trim = function() {
	return this.replace(/^\s+|\s+$/g,"");
}

With this in mind, we can add methods to our String class, at runtime, that will allow us to manipulate the text string that is passed back in a Twitter JSON packet.

The Goal

To auto-magically parse different types of links within a text string. We will look at standard URL links, links applied to Twitter usernames and those applied to Hashtags.

Demo

The demonstration simply takes a test string and outputs it to the screen using JavaScript.

See the demo in action.

Parsing URLs as Links to the resource

First we create a custom method of the String.prototype property called parseURL. When invoked on a string, the regular expression finds any instance of a URL and will wrap the URL with an HTML anchor, with the correct href attribute and value applied.

String.prototype.parseURL = function() {
	return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&~\?\/.=]+/g, function(url) {
		return url.link(url);
	});
};

Demo 1.

We can simply demonstrate the parsing of the link with the following code in the body of the page:

<script type="text/javascript">
var test = "Simon Whatley's online musings can be found at: http://www.simonwhatley.co.uk";
document.write(test.parseURL());
</script>

In the above example, a simple string variable is created called test, which contains a URL. The text does not contain any HTML at this stage. We then write out the test variable applying the parseURL() method to it.

The resultant HTML generated is the following:

Simon Whatley's online musings can be found at: <a href="http://www.simonwhatley.co.uk">http://www.simonwhatley.co.uk</a>

When rendered in a browser, the code becomes a hyper-link.

Parsing Usernames as Links to Twitter

Following on from the URL example above, we can apply a similar methodology to Twitter usernames since they can also be URLs to their associated Twitter page.

Again we create a custom method of the String.prototype property, this time we’ll called it parseUser. The regular expression in this case finds all instances of @username. We then simply replace the @ as this is not part of the actual username. The Twitter URL is then applied to the username.

String.prototype.parseUsername = function() {
	return this.replace(/[@]+[A-Za-z0-9-_]+/g, function(u) {
		var username = u.replace("@","")
		return u.link("http://twitter.com/"+username);
	});
};

Demo 2.

We can simply demonstrate this with the following code:

<script type="text/javascript">
var test = "@whatterz is writing a post about JavaScript.";
document.writeln(test.parseUsername());
</script>

The resultant HTML generated is the following:

<a href="http://twitter.com/whatterz">@whatterz</a> is writing a post about JavaScript

Parsing Hashtags as Links to Twitter’s Search

Finally, Twitter also allows user’s to create Hastags within their posts. Hashtags are a community-driven convention for adding additional context and metadata to your tweets. Like regular URLs and usernames, Hastags can been parsed as a URL to an online resource, in this case, Twitter’s search.

Again we create a custom method of the String.prototype property, this time we’ll called it parseHashtag. The regular expression in this case finds all instances of #hashtag. The Twitter Search URL is then applied to the hashtag.

String.prototype.parseHashtag = function() {
	return this.replace(/[#]+[A-Za-z0-9-_]+/g, function(t) {
		var tag = t.replace("#","%23")
		return t.link("http://search.twitter.com/search?q="+tag);
	});
};

Demo 3.

We can simply demonstrate this with the following code:

<script type="text/javascript">
var test = "Simon is writing a post about #twitter and parsing hashtags as URLs";
document.writeln(test.parseHashtag());
</script>

The resultant HTML generated is the following:

Simon is writing a post about <a href="http://search.twitter.com/search?q=%23twitter">#twitter</a> and parsing hashtags as URLs

NB. Twitter’s search was originally provided by Summize. However, as of July 2008, they have been bought by Twitter and the search can be found at http://search.twitter.com.

Where to take it next

Using the above code, we can now create a simple Twitter feed reader. Using, for example jQuery, to get and parse the Twitter JSON packet we can then apply the prototype methods to the text entries.

It is also worth noting that it is possible to cascade the methods, so we can do the following:

<script type="text/javascript">
var test = "@whatterz is writing a blog post about #twitter, which can be found at http://www.simonwhatley.co.uk";
document.writeln(test.parseURL().parseUsername().parseHashtag());
</script>

Download the code

The example code can be downloaded from the demo page.

Happy 13^th Birthday ColdFusion.

Adobe ColdFusion has had a long and illustrious life. The first version of ColdFusion–written almost entirely by one person, JJ Allaire and then called “Cold Fusion”–was released in 1995. This first version, although revolutionising how web applications were built, was primitive by modern standards, doing little more than database access.

Although originally built in Visual C++, Allaire, around 1999, took the decision to rewrite the entire ColdFusion engine in Java–a project named “Neo”–which would allow for greater portability among different platforms. The rewrite, released under the monicker MX 6, would prove to be somewhat problematic and a wholescale update to the version resulted.

In 2001 Allaire was acquired by Macromedia. This union brought with it the integration of Macromedia’s Flash platform via Flash Remoting; a huge step towards rich Internet applications.

In 2005 it was the turn of Macromedia to be acquired and they merged with Adobe. A period of instability in the ColdFusion world resulted, brought about by the knowledge that Adobe was a company that developed tools, not programming languages. However, following a successful release of ColdFusion 8 in 2007 and the announcement that a version 9 would be developed, code-named “Centaur”, fears about ColdFusion’s future have subsided–albeit the continued debate over “ColdFusion is Dead” remains boiling in the background.

The primary distinguishing feature of ColdFusion is its associated scripting language, ColdFusion Markup Language (CFML), which compares favourably to its rivals, JSP, ASP.NET, or PHP and resembles HTML in syntax. “ColdFusion” is often used synonymously with “CFML”, but it should be noted that there are additional CFML application servers besides ColdFusion, and that ColdFusion supports programming languages other than CFML, such as server-side Actionscript and embedded scripts that can be written in a JavaScript-like language, known as CFScript. Adobe ColdFusion also includes native support for Flex, PDF, Verity and the embedded Derby database amongst a host of other features.

ColdFusion 9 is set to be an exciting release, much like its predecessor, with more features added to the core tag set, whilst also integrating other technologies such AIR and Hibernate.

Exciting times lay ahead. Let’s hope Adobe takes full advantage with such a fine product.

See Also:

• ColdFusion Wikipedia entry
• ColdFusion Markup Language Wikipedia entry
• Railo – Free, Open Source alternative CFML Engine
• SmithProject – Free, Open Source alternative CFML Engine
• BlueDragon – Free, Open Source alternative CFML Engine