A blog by Simon McManus

IP in Action - Security Event

2007-06-29T00:00:00Z

A couple of weeks ago I attended the IP in Action Security event in Coventry, This was a part of my old role on a project to provide designs for a complete end to end security solution for BT (access cards, access readers, Biometrics, IP CCTV, Door Control and ID/Role Management)

I was pleased to see that everyone at the event acknowledged new security projects require as much IT expertise as the do conventional security knowledge. Unfortunately not all suppliers fully grasped the concept of programmatically exposing their devices though xml and web services but there were a number who did.

This is particularly important to BT as it drives towards a SOA (Service Orientated Architecture) . With the use of standards such as BPEL (Business Process Execution Language) and BAM (Business Activity Monitoring) , we are going to see some extremely clever "Enterprise Mash-ups" in the not too distant future.

Video analytics was the buzzword at the event causing the most excitement, that’s the software that automatically sends you a fine if you stop in the wrong part of a junction (yellow box)

Sony gave a particularly impressive demonstration of how they can use analytics to generate meta data about videos, and only notify an operator if there is actually something they need to look at.

http://www.sonybiz.net/biz/view/ShowContent.action?BIZ_SESSIONID=GWVHGG9WkrmNTcJfjppj5JHSpn69td2nCYzcLFLhGKNc6yDxK3qv!-46656936&logicalname=NVM%20DEPA%20Flash&site=biz_en_GB

The event had a focus on local governments/councils. There were a number of companies proposing they could cut costs for local councils by consolidating their CCTV, traffic light, traffic information boards and emergency service networks into one IP WiFi network. Leeds council gave an impressive demonstration of how they have done this and used the same network to provide WiFi access to some of its poorest areas.

Finally I though I would mention one of the more comical ideas from the event, some councils are promoting Bluetooth networks, while there may be many good uses for this technology the example given was rather poor…..

When walking into an area of high crime people receive a message on their mobile informing them that criminal may be operating in the area. On receiving that message most peoples reaction would be to get their phone from their pocket and review the message thus display their lovely new phone to all the criminals. Genius.

Simon McManus and Osmosoft

2007-07-03T00:00:00Z

What with the launch of the official Osmosoft.com site linking to my blog I thought it would be appropriate to give you an idea of what I hope to do in BT Osmosoft. As a part of BT we will have a focus on using the BT SDK (http://sdk.bt.com/) which provides the following services :

SMS
Voice Calls
Conference Calls
Authentication
Information about Me
Location
Contacts

here are my current ideas of how I would like to use them :

WordPress Plug-in - http://wordpress.com/

WordPress is a popular open source blogging application. I would like to create a plug-in for WordPress which integrates some of the functionality mentioned above. The most obvious use would be a widget with a "text me" or "Ring Me" button allowing readers to get in contact with the blog owner on their mobile without exposing the mobile number.

Facebook Application - http://www.facebook.com/

I like Facebook, its very addictive. Ive been particularly keeping an eye on the application that resulted from its API.

(http://developers.facebook.com/) One of the things which I find interesting about facebook applications is their ability to spread very very quickly....

http://blog.pmarca.com/2007/06/analyzing_the_f.html

So what kind of functionality would I be looking to integrate into Facebook? Below are some initial ideas.....

1 .. Allow users to store their contact details and provide a "call me" and "text me" buttons on facebook.

2 .. Use the BT SDK Location service to display a users location

3 .. Integration with BT Vault - let users share files using BT Vault on facebook.

4 .. Import/Export of BT contacts One Address book and Facebook contacts?

5 .. Some kind of Yellow Pages (YELL.COM) integration?

6 .. Interface into MSN, Yahoo, AOL and google chat all from within facebook.

I will post updates and new ideas on this blog so please keep checking back.

My First (very simple) Facebook Application using the BT Web21c SDK

2007-07-16T00:00:00Z

This is a simple proof of concept

Firstly I took the existing PHP example code for CallMe (from the BT SDK PHP Examples) and modified it.

For more info on getting the PHP SDK set up please see this post. It talk about setting up the SDK locally but its very similiar when FTPing up to a live web server.

Please note that should you want to use this code you will need to modify the line :

  
    $called = "tel:+44YOUR\_MOBILE\_NUMBER\_HERE";  
  

  
 #!/usr/bin/env php  
<?php  
require\_once(dirname(\_\_FILE\_\_) . '/../../web21c.php');  
require\_once(dirname(\_\_FILE\_\_) . '/../common.php');  
  
if(!$\_REQUEST\['tel'\])  
{  
echo 'no number to call';  
exit;  
}  
    $calling = "tel:+".$\_REQUEST\['tel'\];  
    $called = "tel:+44YOUR\_MOBILE\_NUMBER\_HERE";  
  
    /\*  
     \*  make one phone ring another  
     \*/  
    $web21c = new Web21c($applicationName, $environment);  
  
    $voice = $web21c->SessionThirdPartyCall();  
  
    $r = $voice->makeCall($calling, $called, 30);  
  
    print "call made as : " . $r->callId . "\\n";  
  
?>

Putting this code up on the internet will expose your account to others so we suggest placing it somewhere that only you know about it.

The changes mean that a user can call your number by passing it in the url.....eg.....

phpWeb21C/cmds/MakeCall.php?tel=OTHER TEL NUM

the format of the number is 44000000000 (the + is added by the php file)

You can check that it works simply by specifying a different phone number to the one specified previously.

To create the Facebook application I simply provided the introdution to facebook apps....

http://developers.facebook.com/step_by_step.php

I suggest you go up to at least step 18.

When you have got this far you can change the index.php file so it contains the code below:

Please note that you will need to change the action value to the absolute URL where the BT SDK files are stored.

<form action="[http://YOURAPPLICATIONURL/phpWeb21C/examples/cmds/makeCall.php](http://yourapplicationurl/phpWeb21C/examples/cmds/makeCall.php)">  
<input type="text" name="tel" />  
<input type="SUBMIT" name="SUBMIT"  value="submitx\`"/>  
</form>

PHP SDK for Dummies using Windows

2007-07-16T00:00:00Z

This page provides instruction for how to using the BT SDK in PHP with XXAMP
1 .. Install XAMPP (http://www.apachefriends.org/en/xampp.html)

This is not required but this particular apache configuration has been tested.

2 .. Register for an account at http://sdk.bt.com/

3 .. Download the PHP source files: Downloads > PHP

4 .. Unzip the directory into your htdocs folder. If you installed XAMPP to the default location the htdocs folder will be in : C:\xampp\htdocs

Unzip the files to a folder of your choosing. With the default install this can be found at:

C:\xampp\htdocs\phpWeb21C

5 .. Registering your applications

Note : Before you can use the SDK you will need to register an application (One registration covers all of your programs)

You can register application at the URL below:

https://sdk.bt.com/Default.aspx?TabId=127

In order to run the certificate generation tool you may need the latest version of “Java Runtime Environment (JRE)” from http://java.sun.com/javase/downloads/index.jsp (you will receive an error when attempting to run the tool if you require this upgrade.)

When you use the tool 3 files will be generated on your desktop. (I called my app Umbrella)

Umbrella_Sandbox_PrivateKey.pem

Umbrella_Sandbox_PublicKey.pem

Umbrella_Sandbox_SignedCert.pem

Two of those files :

Umbrella_Sandbox_PrivateKey.pem

Umbrella_Sandbox_SignedCert.pem

Should then be place in a folder called keys (which you may need to create). E.g.

C:\xampp\htdocs\phpWeb21C\keys

6 .. Open the common.php file which can be found in the folder:

C:\xampp\htdocs\phpWeb21C\examples\common.php

7 .. Ensure that the application name is the same as the one specified when generating your certificate.

8 .. Open the folder C:\xampp\htdocs\phpWeb21C\examples\cmds

You should now be able to configure and run these files.

9 .. Running the code. If you have used the default installation settings go to and edit the file:

C:\xampp\htdocs\phpWeb21C\examples\cmds\makeCall.php

Change the variables for :

$calling = "tel:+44791";

$called = "tel:+44791";

To the numbers you wish to ring when the page is run.

When you now open the file in a browser the phones should start ringing. http://127.0.0.1/phpWeb21C/examples/cmds/makeCall.php

Mashing Up BT Web21c Location service with Google Maps

2007-07-20T00:00:00Z

This example combines the two post (Google Maps API and your location from the sdk)to automatically look up a phones location and then map it straight to a google map box.

The code is below, please note you should only need to change the four variables at the top of the code :

<?php 
  
require\_once(dirname(\_\_FILE\_\_) . '/../../web21c.php'); 
  
require\_once(dirname(\_\_FILE\_\_) . '/../common.php');

//  command to locate a mobile deviice 
  
//  - set these to sensible values

$deviceId = 'tel:+PHONENUMBER'; 
  
$username = [USERNAME@MAIL.COM](mailto:USERNAME@MAIL.COM); 
  
$password = "YOUR PASSWORD"; 
  
$googleAPIKey = "YOUR GOOGLE API KEY";

$web21c = new Web21c($applicationName, $environment);

// login as a user 
  
$wla = $web21c->WhiteLabelAuthentication(); 
  
$wla->login($username, $password);

 //  locate mobile 
  
$location = $web21c->Location(); 
  
$location->web21cUser = $wla->web21cUser;

try 
  
{ 
  
 $r = $location->getGeoLocation($deviceId); 
  
} 
  
catch (Web21cPermissionDeniedException $e) 
  
{ 
  
 print "requesting device owner's permission to be located ..n"; 
  
 print "try again later when the owner may have respondedn"; 
  
 $access = $web21c->LocationPermission(); 
  
 $access->web21cUser = $wla->web21cUser; 
  
 $access->requestPermission($deviceId); 
  
}

// var\_dump($r->geoLocation);

echo 'Longitude : '.$r->geoLocation->longitude. '<br />'; 
  
echo 'Latitude : '.$r->geoLocation->latitude. '<br />'; 
  
echo "Click below to see the location of mobile number ".$deviceId."<br />"; 
  
echo "<a href='http://maps.google.com?q=".$r->geoLocation->latitude.",%20".$r->geoLocation->longitude."'>Google Maps</a> "; 
  
//echo 'start : '.$r->getGeoLocation()->getLongitude(); 
  
?> 
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  
  "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd)"> 
  
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)"> 
  
  <head> 
  
    <script src="[http://maps.google.com/maps?file=api&v=2&key=<?=$googleAPIKey](http://maps.google.com/maps?file=api&v=2&key=<?=$googleAPIKey)?>" 
  
      type="text/javascript"></script>

</head> 
  
  <body onload="load()" onunload="GUnload()"> 
  
    <p> 
  
  <script type="text/javascript">    
  
  function load() 
  
  {      
  
   if (GBrowserIsCompatible()) 
  
   {        
  
    var map = new GMap2(document.getElementById("map"));        
  
    var map = new GMap2(document.getElementById("map")); 
  
    map.setCenter(new GLatLng(<?=$r->geoLocation->latitude?>, <?=$r->geoLocation->longitude?>), 13); 
  
    map.openInfoWindow(map.getCenter(), 
  
    document.createTextNode("Simon is here ")); 
  
    }   
  
  }    
  
   
  
  </script> 
  
      <span class="style1">BT SDK Location Service </span></p> 
  
    <div id="map" style="width: 500px; height: 300px"></div> 
  
  </body> 
  
</html>

The Google Maps API

2007-07-20T00:00:00Z

Now that we can find out the logitude and latitude of a persons mobile number (see this post) the next step is to get the Google API set up. This post talks you through setting up the Maps API (its very simple)

1 .. First of all you need to register for a google maps api account. You can do that here

2 .. Make sure that you specify a the folder that you file will actually be sitting in. (it wont work otherwise)

3 .. You then simply need to create a file in the folder specifed and then add the below code.

4 .. Note that you will need to change the "YOURKEY" value to your key.

_________________________

BT SDK Location Service

_________________________

On the above application the script is current hard coded to show my current location (51.5052680969, -0.102480553091). Over the coming posts I will discuss how to integrate this fuctionality into the the BT SDK location example

Your Location from the BT SDK (Web21c) in Google Maps

2007-07-20T00:00:00Z

The steps to setting up a very basic example of the BT Web21c location service are below. Over the coming weeks I will evolve these example and hope to release a new version of the PHP examples provided on the official Web21c site.

This app results in in a link which when clicked displays the mobiles current location in google maps.

If you need to get the SDK set up you may find some help in this post. When the examples have evolved I will publish a new step by step example of how to get set up in the first place.

1 .. Before you can view a phones location you must first register the user who you wish to track. This is done using the addUser.php page in the examples directory. I have added the code below:

addUser.php

  
<?php  
require\_once(dirname(\_\_FILE\_\_) . '/../../web21c.php');  
require\_once(dirname(\_\_FILE\_\_) . '/../common.php');  
  
     //  command to add a user     
    $web21c = new Web21c($applicationName, $environment);  
    $wla = $web21c->WhitelabelAuthentication();  
    $wla->addUser([your-email@mail.com](mailto:your-email@mail.com));  
    //  dump response  
    var\_dump($wla->getAllUsers());  
?>

Please note that you will need to change "your-email@mail.com" to the email address of the user that you wish to be added.

The bottom line will display any errors that are returned.

2 .. When the user has been added they will recieve a password via email.

3 .. With the password you will now be able change three variables in locate.php and then run the file.

The three variables you need to change are :

$deviceId = 'tel:+440000000000';  
$username = [youremail@mail](mailto:youremail@mail.com)[.](mailto:simon.mcmanus@.com)com;  
$password = "YOURPASS";

locate.php

  
<?php  
require\_once(dirname(\_\_FILE\_\_) . '/../../web21c.php');  
require\_once(dirname(\_\_FILE\_\_) . '/../common.php');  
  
//  command to locate a mobile deviice  
//  - set these to sensible values  
  
$deviceId = 'tel:+44700000000000';  
$username = "[YOURMAIL@MAIL.com](mailto:simon.mcmanus@bt.com)";  
$password = "YOURPASSWORD";  
  
$web21c = new Web21c($applicationName, $environment);  
  
// login as a user  
$wla = $web21c->WhiteLabelAuthentication();  
$wla->login($username, $password);  
  
 //  locate mobile  
$location = $web21c->Location();  
$location->web21cUser = $wla->web21cUser;  
  
try  
{  
 $r = $location->getGeoLocation($deviceId);  
}  
catch (Web21cPermissionDeniedException $e)  
{  
 print "requesting device owner's permission to be located ..\\n";  
 print "try again later when the owner may have responded\\n";  
 $access = $web21c->LocationPermission();  
 $access->web21cUser = $wla->web21cUser;  
 $access->requestPermission($deviceId);  
}  
  
// var\_dump($r->geoLocation);  
  
echo 'Longitude : '.$r->geoLocation->longitude. '<br />';  
echo 'Latitude : '.$r->geoLocation->latitude. '<br />';  
echo "Click below to see the location of mobile number ".$deviceId."<br />";  
echo "<a href='http://maps.google.com?q=".$r->geoLocation->latitude.",%20".$r->geoLocation->longitude."'>Google Maps</a> ";  
//echo 'start : '.$r->getGeoLocation()->getLongitude();  
?>

PHPWeb21C Certificate Generation (Using the Wizard)

2007-07-23T00:00:00Z

This is just a quick post to let you know about generating certificate when using PHPWeb21C.

For option three you should choose sandbox for the environment(to enable your 10 free calls each day) and then choose PEM (PKCS#8). If you choose the PFX option you will need to get apache to talk to your windows certificate store.

A Simple DHTML Phone

2007-07-24T00:00:00Z

I spent a while searching for this script only to realise it would be quicker to write it myself!

This simple application uses javascript and HTML to allow the user to enter a number using the keypad and then let them make a call. This example can link to makeCall.php in the examples directory if you wish to make calls.

Just copy the code into a HTML file in the root of the BT PHP directory and you should be in business.

Here is the code :

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

 <script type="text/javascript">
  
  
function add(id)
  
{ form1.number.value = form1.number.value + id ;
  
 if (id=="C")
  
 { form1.number.value = '';
  
 }
  
}
  
function pre\_submit(a)
  
{
  
 location.href="examples/makeCall.php?tel=" + document.form1.number.value;
  
}
  
  
</script>
  
   <form name="form1" id='form1' method="post" action="">
  
       <table width="154" border="0">
  
            <tr>
  
              <td colspan="4"><input name="number" type="text"    onkypress="check\_type('d');"  id="number"></td>
  
            </tr>
  
            <tr>
  
              <td width="24"></td>
  
              <td width="24"><input name="1"   type="button" onClick="add(this.value);" id="1" value="1"></td>
  
              <td width="28"><input name="2" type="button" onClick="add(this.value);"  id="2" value="2"></td>
  
              <td width="52"><input name="3" type="button" onClick="add(this.value);"  id="3" value="3"></td>
  
            </tr>
  
            <tr>
  
              <td> </td>
  
              <td><input name="4" type="button" onClick="add(this.value);"  id="4" value="4"></td>
  
              <td><input name="5" type="button" onClick="add(this.value);"  id="5" value="5"></td>
  
              <td><input name="6" type="button" onClick="add(this.value);"  id="6" value="6"></td>
  
            </tr>
  
            <tr>
  
              <td> </td>
  
              <td><input name="7" type="button" onClick="add(this.value);"  id="7" value="7"></td>
  
              <td><input name="8" type="button" onClick="add(this.value);"  id="8" value="8"></td>
  
              <td><input name="9" type="button" onClick="add(this.value);"  id="9" value="9"></td>
  
            </tr>
  
            <tr>
  
              <td><p> </p>              </td>
  
              <td><input name="+" type="button" onClick="add(this.value);"  id="+" value="+"></td>
  
              <td><input name="0" type="button" onClick="add(this.value);"  id="0" value="0"></td>
  
              <td><input name="Clear" type="button" onClick="add(this.value);"  id="Clear" value="C"></td>
  
            </tr>
  
            <tr>
  
             <td colspan="4">
  
      <div align="center">
  
        <p>            </p>
  
        <p>
  
          <input name="Make Call" type="button" onClick="pre\_submit(document.form1.number.value)"  id="Make Call" value="Make Call">
  
              </p>
  
      </div></td>
  
            </tr>
  
     </table>
  
</form>

Conference Calling with Web21c PHP SDK

2007-07-24T00:00:00Z

Over the last few days I have been consuming my credits for the BT SDK by playing with the conference calling service. This service lets 4 users connect on the Sandbox and currently 10 on production servers (This may soon been increased to unlimited)

A member of the SDK support team mentioned that a lot of people have expereinced problems when using the conference calling service so I thought I would try to provide some help. One of the biggest problems I experienced was accessing particular variables. In this example I have demonstrated how you can create a call and then use various functions to obtain information about the call.

The page returns details of each person in the call. You will notice that participantInfo does not return the phone number of the users connected. I have requested that this functionality be added but for the time being you will have to store ids against phone numbers when the user is added in order to display the users phone number.

Keep an eye on the blog, my next example will attempt to combine this with the DHTML Phone example I made earlier.

 <? 
  
require\_once(dirname(\_\_FILE\_\_) . '/../../lib/web21c.php'); 
require\_once(dirname(\_\_FILE\_\_) . '/../../config.php');
$web21c = new Web21c($applicationName, $environment);
$conf = $web21c->SessionConferencing();
try 
  
{ 
  
 $conf\_back = $conf->createConference(); 
  
 $confId = $conf\_back->conferenceId; 
  
 $talker1 = $conf->inviteParticipant($confId, 'tel:+447918880749'); 
  
 $talker2 = $conf->inviteParticipant($confId, 'tel:+442087261159'); 
  
 $confInfo = $conf->getConferenceInfo($confId); 
  
 echo '<hr />ConfID : '; 
  
 echo $cid = $confInfo->conferenceInfo->conferenceId;   
  
 echo '<br />Status : '.$confInfo->conferenceInfo->status;   
  
 echo '<br />Start : '.$confInfo->conferenceInfo->startTime;   
  
 echo  '<br />Number of Participants : '.$confInfo->conferenceInfo->numberOfParticipants;   
  
 echo '<br />Duration : '.$confInfo->conferenceInfo->duration;   
  
 //var\_dump($confInfo); 
  
 echo '<hr />'; 
  
 // wait while the users answer their phones 
  
 sleep(5); 
  
 // get call details using the call id returned. 
  
 $conf\_detail = $conf->getParticipants($cid); 
  
  
  
 echo "<hr /><h1> Each Participant</h1>"; 
  
 $ParInfo = $conf\_detail->participantInfos; 
  
 $pars = $ParInfo->participantInfo; 
  
  
  
 foreach ($pars as $par) 
  
 { 
  
  echo ' <hr />'; 
  
  echo  '<b>Participant ID :</b> '.$par->participantId.'<br />'; 
  
  echo  '<b>participantStatus : </b>'.$par->participantStatus.'<br />'; 
  
  $par\_detail = $conf->getParticipantInfo($par->participantId); 
  
  //var\_dump($par\_detail); 
  
 }
 ?>

Mock Ajax in Facebook

2007-08-01T00:00:00Z

This example simply sends the variable specified in the text area to response.php and then displays the result from response.php in the facebook window without reloading the main page.

In this particular example response.php only returns the same variables but this will be the underlying structure for many facebook apps. To use this example place the below fbml into the small default fbml box when editing the application info.

<fb:subtitle>Simple FBML</fb:subtitle>

<form id='form'>

<div id="preview" style="border-style: solid; border-color: black;   border-width: 1px; padding: 5px;"></div>

<textarea name="data"></textarea>

<input type="submit" clickrewriteform='form'  clickrewriteurl="http://osmosoft-php.com/facebook/simple/response.php"  clickrewriteid="preview" value=" get response"/>

</form>

then response.php contains :

<?php
  
	echo $\_POST\['data'\];
  
?>

for more info please see :

http://wiki.developers.facebook.com/index.php/Mock_ajax

Getting your friends out of facebook

2007-08-08T00:00:00Z

The code below lists the names of all your facebook contacts.  Quite handy....

<?

$friends = $facebook->api\_client->friends\_get();

  
foreach($friends as $friend)

    $name = $facebook->api\_client->users\_getInfo($friend,'name, status, hometown\_location.city');

    echo $name\[0\]\[name\].'<br />';

?>

Keep an eye on the blog to see how I evolve this script.

Is Facebook the answer to everything? - Facebook for the Enterprise?

2007-08-08T00:00:00Z

I ask the question simply because it seems to come up as a potential solution to everything these days.

While I have been making many technical posts about Facebook I have held back on opinions and insights while a massive debate seems to be raging around me.

So why are people so excited about Facebook? JP has made a number of Facebook related blog entries, I found two of his comments insightful.

"It is rooted in physical relationship rather than just electronic. The interactions are therefore a lot richer."

"And this phenomenon, of a physical community being extended and enriched by electronic ties, is something that is a lot closer to real life."

These two quotes are quite fundamental to why Facebook is so successful, it is not the the apps or even the platform, but rather the brilliant way you can find, communicate and interact with past and current (real life) friends.

Before I go any further three bits of history for you:

1 .. I initially started investigating the Facebook API to build an application which lets Facebook users make phone calls and send texts using the BT Web21C SDK.

2 .. Before I started with BT Osmosoft I made MyPages which was an enterprise version of Facebook / MySpace inside the BT firewall.

3 .. In MyPages users could create blogs, wikis, spreadsheets, file and photo shares. Employees could show their relation with other staff and each user had a recent activity news feed. I had big plans for group permissions and the news feeds.

In a big enterprise there is always going to be thousands of relationships and interactions which are generally ignored by enterprise software. Clearly the ability to map and search these relationships has benefits. If I am unable to contact Phil, being able to browse and search his work contacts could be very helpful.

So should these relationships be stored on an internal system such as MyPages? or maybe an out of the box Facebook behind your firewall? Or maybe just build a Facebook app? If you are asking yourself these questions you should think about the points below :

Security / Ownership
- Lots of things like security and data protection to think about. You may want the system to tell you when your confidential documents have been read or updated. Clearly some legal and security issues to work through.

Integrations with other Systems

- One of the most useful concepts in Facebook that the enterprise can really take advantage of is the news feed. I talk about this more later but the ability to show useful updates in a configurable news feeds could really help reduce email traffic and improve workflow.

Control of Data

- How much control do you want over the data?

Search
- Something like MyPages has real value when you can search the intranet for a topic and find someone in the company who has been blogging about it. Especially when you can then explore their network of contacts. This is would be very tricky to implement securely on facebook.com

Self Promotion
- MyPages provided each member of staff with their own home page, they were encouraged to use this as an online CV to explain what they had done, were doing and wished to do in the future. Jeremy Ruston (my boss) often asks the question, what intranet content should we not share externaly, and why not? This is a interesting point, and particularly in relation to this issue.

My mind runs away with ideas of allowing customers to pick a team based on public profile pages with reviews from previous client. This of course takes opening up the enterprise to a whole new level and you would need to ensure at least two things : 1 : Does your company have good quality staff / teams and the resource to provide good customer service?. 2 : Can your company hold onto its best staff even with their success being public knowledge?

Functionality
- if we are talking about a Facebook box then we would see some new enterprisish apps but I suspect their functionality would still be restricted by the Facebook API.

Enforced Sign Up
- Can you imagine being told you have to sign up to Facebook at work? its an extreme but I suspect that people would have dramatically different relationships with Facebook.

Fewer Distraction?
-I'm not going to go as far as to say that I waste my time on Facebook but it has been known to distract me from work in the past, regular Facebook users may not notice work related news feed items between all the "noise" generated by their non-work related updates.

There are also some other considerations when building a business app for Facebook:

I don't want to step into the open vs closed debate but lets be honest, Facebooks API is restrictive and I suspect that the desire to maintain consistency and control has reduced peoples ability innovate. A browse through the Facebook application directory really doesn't return a wide array of useful apps, mostly annoying games. I would love to integrate my dhtml phone into Facebook but as all javascript is removed Iwould have to hack my way round, leaving my app liable to be broken as soon as facebook figure out what im doing. I know the guys at Facebook have just recently provided some javascript access but I have not tested it yet.

this is another big point, can you really have an app thats going to become business critical reliant on systems over which you have no control or contracted support? APIs can be changed with little or in some cases no notice.

Each Facebook application is limited in the number of posting it can make to a user's news feed on a given day (currently 10 I believe), to me this is yet another problem, I still need to see my 11th news feed item of the day. If a system was being heavily used I would expect up to 20-30 per day, this would of course be configurable:

update my news feed when I receive an email.
update my news feed on the activity of these people:
Update my news feed on activity to do with these project:
update my news feed when these document (collaborative wikis and blogs) are changed
update my news feed when something is tagged ________
update my news feed when someone searches for __________
don't update my news feed when....
This brings me to a fascinating search engine optimization (SEO) type article: Inside Facebook, NFO (News Feed Optimization) is the new SEO

Do you really want to be in a situation where the business has to pay for your items to appear at the top of peoples news feed?

So one possible answer to this is for Facebook build an enterprise/professional tab, allowing people to differentiate between their work and personal lives while still showing the inevitable connections. It would also need to include more useful business related applications such as blogs, wikis and file stores. This could create a whole new market for enterprise Facebook apps.

Since playing around with the API my relationship has changed with Facebook, my initial reaction after logging is now to goto my profile page to test my application, My news feed is very much a constantly changing blur and I am rarely able to keep up. I'm not sure if it is the 'noise' or maybe seeing some of the problems with the API has taken away the sleek near perfect view I had of Facebook when I was just a user. The reason I raise the slightly obscure point is because I think it will be interesting to see how people would relate to Facebook should it be required of them at work.

So I have probably asked a lot more questions that I have answered in the above post so I should attempt to conclude in some way shape or form. So, Facebook while it deserves all the attention its gets it is just another internet craze. While its closed source its only the people at Facebook who can really provide the functionality we require. In a lot of cases I suspect they won't. As with any craze it will pass, people will find a new killer web app and we will be trying to work out how we can maximize our effectiveness by using it. We have to understand and respect this. Any solution that relies on Facebook will probably become redundant when net users find another killer social networking site. We need to be thinking about applications which can be completely independent and just pump their data in and out of the latest social networking tools.

lastly - thank you for reading this far, as I have written this post my views have actually evolved. I hope you found this thought provoking.

comments welcome.

Get your friends details out of Facebook

2007-08-09T00:00:00Z

The below code outputs a HTML table showing all of your facebook friends and their details. You will need to include the code on a PHP server where you have already registered your application.

This code is far from finished, but provides a very good starting point because it shows how you can access each of the variables.

<?php
require\_once 'facebook.php';
$friends = $facebook->api\_client->friends\_get();
echo '<table border=1>';
foreach($friends as $friend)
{
    echo '<tr>';
    echo '<td>';
    $name = $facebook->api\_client->users\_getInfo($friend,'name, pic\_small, birthday, sex, hometown\_location, meeting\_sex, meeting\_for, affiliations, relationship\_status, significant\_other\_id, political, current\_location, activities, interests, music, tv, about\_me, work\_history, education\_history, status');
    echo "<img src='".str\_replace('/http', '', str\_replace('.jpg/','', $name\[0\]\[pic\_small\]))."'/>";
  
    echo ' </td><td>';
    echo $name\[0\]\[name\];
    echo ' </td><td>';
    echo $name\[0\]\[birthday\];
    echo ' </td><td>';
    echo $name\[0\]\[sex\];
    echo '</td><td>';
    echo $name\[0\]\[hometown\_location\]\[city\].', ';
    echo $name\[0\]\[hometown\_location\]\[state\].', ';
    echo $name\[0\]\[hometown\_location\]\[country\].', ';
    echo '</td><td>';
    echo $name\[0\]\[meeting\_sex\];
    echo '</td><td>';
    echo $name\[0\]\[meeting\_for\];
    echo ' </td><td>';
    echo ' </td><td>';
//    echo var\_dump($name\[0\]\[affiliations\]);
    foreach ($name\[0\]\[affiliations\] as $aff)
    {
    echo '<ul>';
        foreach ($aff as $aff\_det)
            echo '<li>'.$aff\_det.'</li>';
    echo '</ul>';
    }
    echo ' </td><td>';
    echo $name\[0\]\[relationship\_status\];
    echo '</td><td>';
    echo $name\[0\]\[significant\_other\_id\];
    echo ' </td><td>';

    echo $name\[0\]\[political\];

    echo '</td><td>';

    echo '<ul>';

    foreach ($name\[0\]\[current\_location\] as $aff)
    echo '<li>'.$aff.'</li>';
    echo '</ul>';
    //echo $name\[0\]\[current\_location\];
    echo '</td><td>';
    echo $name\[0\]\[activities\];
    echo ' </td><td>';
    echo $name\[0\]\[interests\];
    echo ' </td><td>';
    echo $name\[0\]\[music\];
    echo '</td><td>';
    echo $name\[0\]\[tv\];
    echo ' </td><td>';
    echo $name\[0\]\[about\_me\];
    echo ' </td><td>';
    echo $name\[0\]\[work\_history\];
    echo ' </td><td>';
        foreach ($name\[0\]\[education\_history\] as $aff)
    {
    echo '<ul>';
        foreach ($aff as $aff\_det)
        {
            echo '<li>';

            echo arrayToXML($aff\_det);
            echo '</li>';
        }
    echo '</ul>';

    }

    //echo $name\[0\]\[education\_history\];

    echo '</td><td>';
    if ($name\[0\]\[status\]\[time\]!=0)
        echo $name\[0\]\[status\]\[message\].' - '.date("Y/m/d", $name\[0\]\[status\]\[time\]).'</td></tr>';
}
  
echo '</table>';

?>

Steps for setting up the SDK

2007-08-13T00:00:00Z

For a number of BT Osmosoft demos we have demonstrated how to make phone calls from within a TiddlyWiki, I thought i would provide a post which explains exactly what we did in order to set up the PHP side of these demos.

The demo I am refering to can be found at the following URL's:

- Speed Geeking

Step 1 You need a web server running :

PHP 5.2
OpenSSL and SOAP PHP extensions

Step 2 - Register for an account at http://sdk.bt.com/

Step 3 - Download the PHP source files: Downloads > PHP

Step 4 - Upload the files to a folder on your web server.

Step 5 - Registering your applications...

Note : Before you can use the SDK you will need to register an application (One registration covers all of your programs)

You can register application at the URL below:

https://sdk.bt.com/Default.aspx?TabId=127

When you use the tool 3 files will be generated on your desktop. (I called my app Umbrella)

_APPLICATIONNAME\_Sandbox\_PrivateKey.pem_  
  
_APPLICATIONNAME\_Sandbox\_PublicKey.pem_  
  
_APPLICAIONNAME\_Sandbox\_SignedCert.pem_

Two of those files :

  
_APPLICATIONNAME\_Sandbox\_PrivateKey.pem_  
  
_APPLICAIONNAME\_Sandbox\_SignedCert.pem_

Should then be place in a folder called keys (which you may need to create).

Step 6 - Open the common.php file which can be found in the folder:

\examples\common.php

Step 7 - Ensure that the application name is the same as the one specified when generating your certificate.

Step 9 - Running the code. If you have used the default installation settings go to and edit the file:

\\examples\\cmds\\makeCall.php

Change the variables for :

$calling = “tel:+44791″;  
  
$called = “tel:+44791″;

You will need to modify these two lines so that they can receive an input from the URL, I would suggest changing these to:

$calling ='tel:'.$\_REQUEST\['callingParty'\];  
  
$called = 'tel:'.$\_REQUEST\['calledParty'\] ;

You will need to ensure that the variable names are the same as the variables sent my TiddlyWiki.

Let me know if you have any problems.

Enterprise TiddlyWiki

2007-08-14T00:00:00Z

TiddlyWiki has been used for a number of years to organise information, what requirements would an enterprise version of TiddlyWiki have?

TiddlyWiki can be used in the enterprise as a collaboration tool allowing multiple users to contribute to a single TiddlyWiki. In this particular instance we wish to build a sit allowing BT staff to have their own personal Wikis on the intranet.

SiteMinder is the default authentication method used for all BT applications (both internal and external.) In order to conform to BT's security policy the authentication and authorization will have to be done through SiteMinder. More details about this will be provided soon.

History and Auditing - The system should be able to see all the previous revisions of a document and see who has made each of the changes.

Site Structure - When a user first visits the site a TiddlyWiki homepage should be created for them. The URL should take the form :

tiddlyfarm.intra.bt.com/simon.mcmanus/

which would be extracted from my email address.

Any pages which I then create should be made as sub folders of simon.mcmanus. e.g.

tiddlyfarm.intra.bt.com/simon.mcmanus/todolist/

The idea of this is to give users their own space on the BT intranet where they can store many TiddlyWikis.

social network aggregator

2007-08-16T00:00:00Z

I recently read an article which pointed out that a social networks value is more affected by the connections made between contacts than by the number of people in the given network.

This is so true, Facebook does so well because its very easy to define connections. Despite its issues Facebook is also actually quite inclusive, It can pull in my Wordpress blog and there are a number of applications which can pull external data into Facebook. This is also one of Facebook big strengths, to be able to see an aggregated view of your networks recent activity from various sources on the internet.

Where Facebook really lets us down is by not letting us access that aggregated view through any platform other than Facebook. In Facebook you can also only import contacts from MSN. The ability to import from a number of sources (one of which being facebook) Will make a real difference to a Facebook for the enterprise.

To start of with I would like to import my contacts from

Facebook
Internal MSN
External MSN
My Mobile Phone
Microsoft Communicator

By pulling in the data from so many sources we are going to be able to show more relationships and possibly know more about the relationships. I would then want to store internet assets (blogs wikis) against a de-duplicated list of my contacts. In such a setup users would be encouraged to publish information onto public blogs.

I had lunch with Jon Lister today and we had an interesting discussion about the implications of actively encouraging a companies employees to blog about what they are working on. As John pointed out while you give away a small advantage by telling people what you are doing you also get to learn a great deal from the other peoples comments and feedback.

Those Fuckers at Facebook - Part Two

2007-09-13T00:00:00Z

So it appears that my facebook applications still doesnt work. Its been at least 15 hours since mock Ajax worked and I have been getting reports that the issue started (albeit intermittently) about 32 hours ago.

I have previously blogged about the dangers of any application that relies on an external platform over which we have not contractual support, i think this highlights the issue, but most of all makes facebook look very bad.

At my demo tomorrow I can explain the situation and providing mock ajax still works on the beta platform use that. With that said it is really not the point. Since this morning I have been closely watching the developer forum and have been popped in and out of the facebook IRC channel. What have facebook said? Absolutely nothing, 15 hours into the issue facebook have still not even ackolwedged the issue exists.

There is no way that Facebook can continue to piss of the developers who ultimately they rely on for the further expansion and inovation around their platform. In the enterprise environment there would be very clearly defined SLA's for service up time, change notifications, support fix times etc.

Lets hope facebook learn from this and start to provide some kind of SLA (any level of service would be nice.) As developers we may not pay them money but we are a massive part of their business model and I think we deserve some respect.

Those Fuckers at Facebook - trying to hush me up.

2007-09-13T00:00:00Z

Hahahaha, I have been posting links to my last two blog posts on the developer forum on facebook, not sure if i have just sent too many messages or someone is trying to hush me up!

I would love an explaination but think they have more important things to be worrying about at the moment.

Server Side TiddlyWikis

2007-09-14T00:00:00Z

This post is a work in progress trying to summarize the different server side tiddlywikis.

the existence of a database is not being seen as an advantage or disadvantage at this point. This is a work in progress but if you see any glaring omissions then please comment or send me a mail. Thanks.

TiddlyHome

The main fetaures are :

BSD open source license
written in PHP, no database
Based on UploadPlugin
All User management in .htpasswd
All control access in .htaccess
All admin tasks from a dedicated TiddlyWiki
User Options and Site Options accessible from TiddlyWiki
and much more ...

The next step will be :

GroupAuthoring support

database back end : no

multi user : functionality already present - UI could be improved.

multi instance :functionality already present - UI could be improved.

Tiddlywiki Upgrade : ? currently using TW 2.2.5

Strengths : Makes good use of native apache functionality

Weaknesses : The UI requires work. Still in the Beta stages.

PHPTiddlyWiki

database back end : yes

multi user : yes

multi instance : would require work store the tiddlers in relation to a TiddlyWiki instance.

Tiddlywiki Upgrade :Javascript code is stored in two php files. tiddly1 and tiddly2.

Strengths :simple install and config.

Weaknesses : No login, code not being maintained.

Mini Tiddly Server

New Features

compatible with TW2.2 and older.
- autodetect TW core and save accordingly
unicode fix, solves issues with international characters.
improved error handling and recovery.
various bug fixes to the saving routine.
improved download link. Just click it!
TiddlySnip support.

database back end : no

multi user : no

Tiddlywiki Upgrade: store in a single file on the server.

Strengths : password authentication present

**Weaknesses: ** install process has some issues.

ccTiddlyWiki

database back end : yes

multi user : yes - there can be many users for the same workspace.

multi instance : would require work store the tiddlers in relation to a TiddlyWiki instance.

Tiddlywiki Upgrade : js code stored on the server.

Strengths : password authentication already present but the may not be relevant as SiteMinder will be used for login.

Weaknesses : code not being maintained. Possible problem with login variables being stored in server variables, could be a problem with multiple instances running on the same server.

Writing to the Facebook News feed.

2007-09-15T00:00:00Z

I have been modifying the mock ajax example. This code is used in response.php, it takes two variables which need to be posted in through forms. This code requires facebookid and viewer_facefacebookid to be passed in from a form to look up the names and then the data is sent in from the data variable.

require\_once('appinclude.php');
$name\_to = $facebook->api\_client->users\_getInfo($\_POST\['facebookid'\],'name, pic\_small');
$name\_from = $facebook->api\_client->users\_getInfo($\_POST\['viewer\_facebookid'\],'name, pic\_small');
$title = $name\_to\[0\]\[name\].' was sent the following text by '.$name\_from\[0\]\[name\].' from the <a href=http://apps.facebook.com/mojomob>Mojo Application</a>';
$body = $\_POST\['data'\];
$facebook->api\_client->feed\_publishStoryToUser($title, $body);
$facebook->api\_client->feed\_publishActionOfUser($title, $body);
exit;

The Osmosoft Social Network - Elgg

2007-09-19T00:00:00Z

I have always found social networking sites fascinating, so when i got the opportunity to install Elgg I jumped high in the air. So what is elgg? In its own words :

"Elgg is an open source social platform based around choice, flexibility and openness: a system that firmly places individuals at the centre of their activities."

In BT we are keen to understand social networks. We love facebook, but we know it has some openness issues. I have previously asked the question what would happen if Facebook were to be open sourced? Well here we have an app that is open source and does facebook type stuff.

So at a first glance it looks nice :

You get all the things you would expect, most notably RSS everywhere. The problem with social networking applications is that its very hard to evaluate them when you are the only user.

So here is the link if anyone would like to log in and try using Elgg,

http://osmosoft.servehttp.com/elgg/

Please be aware that this is only an experimental instance for you and I to look around and play with. It is in no way a permanent installation. If you have any views on Elgg then please let me know.

There is a wide selection of Plugin, if you would like me to make any particular ones available please let me know.

In the Osmosoft offices we recently tried Mash which Yahoos answer to Facebook. Its nice but is also another social network to add to a long list. I cant help but think that the next big thing will be something that allows you to centrally control your identity across all the social networks. Where facebook fits into that we will have to wait and see. Most facebook users are not even aware they cannot export their data. It will be interesting to see how peoples view of facebook changes as they realise their data is trapped inside.

Hacking for a Wii.

2007-09-24T00:00:00Z

Last Monday Osmosoft purchased its first games console, the Wii. One of the conditions of the office having a Wii was that we needed to do something cool (and not just play games) by the Friday.

What with TiddlyWiki's third year anniversary also being on the Friday it proved an interesting week.

So my first mission was to find some way of detecting movement from the Wii controllers, I have seen a number of demos showing the wii controlling a Midi interfaces but my distinct lack of a midi interface proved a problem here.

I managed to find a number of apps which let me control my mac from the Wii controller here. Eventually I found a site which provides example javascript code demonstrating how to read the Wii controller coordinates as variables!

Javascript Wii Controller Code

Unfortunately you cannot detect false feedback on the controllers but we can we could access X, ,Y Distance and rotation co-ordinates from the controller when being viewed through Opera on the Wii (the code does not work when hooked up to the PC)

So at this point I had the idea to turn the code powering the wall demo into a navigation tool for TidllyWiki.

We uesd Saqs full screen TiddlyWiki plugin as the basis, when we had built the code to detect the left and right motion we then combined it with Saqs plugin (he was visiting the office for the TW anniversary which made he particularly accessible)

The end result can be loaded onto a Wii from the URL below:

http://osmosoft.servehttp.com/wii/a.htm

and you can watch video of the result on youtube.

[youtube=http://www.youtube.com/watch?v=8AX_uEzVVnU]

Giving TiddlyWiki a rest......MYSQL to REST in PHP.

2007-09-25T00:00:00Z

As part of my server side TiddlyWiki work we are looking at building a REST interface where TiddlyWikis can store their tiddlers. I was doing some research into ways of providing a REST interface to MySQL datbases.

I found this great bit of code:

http://phprestsql.sourceforge.net/

You simply point the project at a database on your server and it provides a REST interface into your MySQL database. In order to get the code working you simply need to copy the folder into your working directory and change the phprestsql.ini file to reflect your settings.

One problem that I noticed was that the .htaccess files is lost when the file is zipped. To get the app working you simple need to create a .htaccess file in your working directory and copy the text below :

RewriteEngine On
  
RewriteCond %{REQUEST\_FILENAME} !-d
  
RewriteCond %{REQUEST\_FILENAME} !-f
  
#RewriteRule ^.\*$ index.php
  
RewriteRule ^.\*$ /rest/index.php

In this case the working directory was /rest/

Macro template for TiddlyWiki

2007-10-16T00:00:00Z

This code provides a template for creating Macros. When tagged systemConfig this macro can be called using <>

/***
|''Name:''|ExamplePlugin|
|''Description:''|To demonstrate how to write TiddlyWiki plugins|
|''Version:''|2.0.3|
|''Date:''|Sep 22, 2006|
|''Source:''|http://www.tiddlywiki.com/#ExamplePlugin|
|''Author:''|SimonMcManus|
|''License:''|\[\[BSD open source license\]\]|
|''~CoreVersion:''|2.1.0|
|''Browser:''|Firefox 1.0.4+; Firefox 1.5; InternetExplorer 6.0|
***/
config.macros.exampleplugin = {
    handler: function() {
        alert('here');
    }
}

Output text into a Tiddler without changing the tiddler - macro

2007-10-17T00:00:00Z

This macro combines the last two posts with a new bit of code from Phil Hawksworth. The code lets you output text into the a tiddler using a macro, without actually changing the contents of the tiddler.

So the end result is that output from the .php file is shown in any macro which contains <> but the tiddler content is not actually change.

The aim here is to be able to manage users and your config for ccTiddly from Tiddlers.

/\*\*\*
|''Name:''|ccConfig|
|''Description:''|Lets you configure ccTiddly|
|''Version:''|2.0.3|
|''Date:''|Sep 22, 2006|
|''Author:''|SimonMcManus|
|''License:''|\[\[BSD open source license\]\]|
|''~CoreVersion:''|2.1.0|
|''Browser:''|Firefox 1.0.4+; Firefox 1.5; InternetExplorer 6.0|
\*\*\*/
    config.macros.ccConfig = {
        handler: function(place,macroName,params,wikifier,paramString,tiddler) {
    
            function callback(status,params,responseText,xhr) {
                    createTiddlyLink(place,responseText,true);
            }
            params = {};
            params.title =tiddler.title;
            var a = doHttp('GET', 'http://127.0.0.1/cctw\_tw/cctiddly/handle/index.php',null,null,null,null,callback,params);
        }
    }

Macs in BTC

2007-10-19T00:00:00Z

Thanks to Anna Carlson for this picture. Taken in BTC at the last London Barcamp. Spot the non-mac.

Enable and use Mod-Rewrite

2007-10-22T00:00:00Z

Mod rewrite is a great way to manipulate URLs. In this post I hope to explain how to get Mod-rewrite set up and working:

Firstly we need to make sure that apache has been set up correctly, this requires us to check our httpd.conf file :
This line:

LoadModule rewrite\_module modules/mod\_rewrite.so

should be uncommented (the starting hash removed)

Some apache configurations also require you to uncomment :

 AddModule mod\_rewrite.c

You will also need to allow .htaccess files to change your apache config. You can do this by ensuring that the AllowOverride option is set to all :

    #
  
    # AllowOverride controls what directives may be placed in .htaccess files.
  
    # It can be "All", "None", or any combination of the keywords:
  
    #   Options FileInfo AuthConfig Limit
  
    #
  
    AllowOverride All

We then just need to restart apache for our settings to take effect. When apache has restarted we can get started. We do mod-rewrite stuff in .htaccess files. I reccomend creating your .htaccess file in some kind of FTP client as both the Mac Finder and Windows Explorer dont like to create files starting with a dot. (they are reserved for system/hidden files)

When you have created the .htaccess file you simple need to add the below code :

RewriteEngine On
  
RewriteCond %{REQUEST\_FILENAME} !-d
  
RewriteCond %{REQUEST\_FILENAME} !-f
  
RewriteRule ^.\* /shared/index.php

You should change the last line to reflect a file which actually exists.

What have I done?

While it might seem complex what you have just done is incredibly simple, any request recieved by the folder containing your .htaccess file (and folders below it) will be directed to the .htaccess file.

In this particular case our .htaccess file looks to see if the request exists as a file or directory, if it does not the request is passed on to /shared/index.php on the server. So if we put the .htaccess file in our root directory all the below URLs would actually point to the same file (/shared/index.php)

osmosoft.com/wordpress

osmosoft.com/typo

osmosoft.com/BLAHNLASD

Where do I go from here?

Now you need to change /shared/index.php to display different things based on the URL, the simplist way I have found to do this is by breaking up the URL into variables and then proccessing them in index.php. eg:

<?php
$url = split('/', $\_SERVER\['PHP\_SELF'\]);
$instance =  $url\[1\];

?>

Facebook Screen Scraping - Get your friends back from Facebook and into TiddlyWiki!

2007-10-23T00:00:00Z

One of the great things about TiddlyWiki is that it can import information from any number of sources, what with all the fuss going on around the walled gardens of facebook this seemed like a great application. This is not a finished application, far from it. It does however prove that you can get your information back from facebook in a form you can control.

In this particular example I have only extracted the list of friends. The code is also there to import your news feed (from which you could then generate an RSS feed!) although it requires some more coding to get it working. Currently there are two lines in the recipe file which are commented out :

#tiddler: ../../feeds/FacebookNewsFeed.tiddler
#tiddler: ../../adaptors/FacebookNewsAdaptorPlugin.js

uncommenting this should let you play with the news feed adaptor.

Unfortunately the login is also not working. To import your friends you will need to have two tabs open, one logged into Facebook, and the other using the Facebook Tiddlywiki import. You can ignore the prompts.

So how does it all work?

So firstly I should thank Martin Budden who I have been constantly asking for help recently. He is responsible for creating the original adaptors and helping me get them started.

In order to use this code you will need to become familar with the process of cooking a TiddlyWiki. Hopefully this link will help you :

http://trac.tiddlywiki.org/wiki/ProductionProcess
If not please let me know and we will try to get a better guide written.

You can see the files which make up this vertical from the rest.html.recipe. Below is quick summary of each of the important files :

taggingContent.tiddler

Its used by the links to display all tiddlers tagged news.
**
feeds/FacebookFriendsFeed.tiddler
**

Tells tiddlyWiki that there is a facebook friends feed available.

adaptors/FacebookFriendsAdaptorPlugin.js

Tells TiddlyWiki how to deal with the information in the facebook friends feed. This is where most of the screen scraping is done.

I hope this gives enough info for people to start playing around. If there is any more detail required then please let me know via a comment. The source for this project can be found :

http://svn.tiddlywiki.org/Trunk/contributors/SimonMcManus/verticals/testFacebook/

enjoy.

Video on Open Social

2007-11-01T00:00:00Z

As the imminent release of Open Social draws closer we are starting to see more info about it :

http://blog.pmarca.com/2007/10/open-social-scr.html

Latest Database design for ccTiddly

2007-11-09T00:00:00Z

and the sql :

\[sourcecode language='sql'\]  
\-- phpMyAdmin SQL Dump  
\-- version 2.10.1  
\-- http://www.phpmyadmin.net  
\--  
\-- Host: localhost  
\-- Generation Time: Nov 09, 2007 at 01:32 PM  
\-- Server version: 5.0.41  
\-- PHP Version: 5.2.2  
  
SET SQL\_MODE="NO\_AUTO\_VALUE\_ON\_ZERO";  
  
\--  
\-- Database: \`permissions\`  
\--  
  
\-- --------------------------------------------------------  
  
\--  
\-- Table structure for table \`admin\_of\_instance\`  
\--  
  
CREATE TABLE \`admin\_of\_instance\` (  
\`user\_id\` varchar(255) NOT NULL,  
\`instance\_name\` varchar(100) NOT NULL  
) ENGINE=MyISAM DEFAULT CHARSET=latin1;  
  
\--  
\-- Dumping data for table \`admin\_of\_instance\`  
\--  
  
\-- --------------------------------------------------------  
  
\--  
\-- Table structure for table \`group\`  
\--  
  
CREATE TABLE \`group\` (  
\`name\` varchar(50) NOT NULL,  
\`desc\` mediumtext NOT NULL  
) ENGINE=MyISAM DEFAULT CHARSET=latin1;  
  
\--  
\-- Dumping data for table \`group\`  
\--  
  
\-- --------------------------------------------------------  
  
\--  
\-- Table structure for table \`group\_membership\`  
\--  
  
CREATE TABLE \`group\_membership\` (  
\`user\_id\` varchar(255) NOT NULL,  
\`group\_name\` varchar(50) NOT NULL  
) ENGINE=MyISAM DEFAULT CHARSET=latin1;  
  
\--  
\-- Dumping data for table \`group\_membership\`  
\--  
  
\-- --------------------------------------------------------  
  
\--  
\-- Table structure for table \`instance\`  
\--  
  
CREATE TABLE \`instance\` (  
\`name\` varchar(100) NOT NULL,  
\`lang\` varchar(10) NOT NULL,  
\`keep\_revision\` int(1) NOT NULL,  
\`require\_login\` int(1) NOT NULL,  
\`session\_expire\` int(10) NOT NULL,  
\`tag\_tiddler\_with\_modifier\` int(1) NOT NULL,  
\`char\_set\` varchar(10) NOT NULL,  
\`hashseed\` varchar(50) NOT NULL,  
\`debug\` int(1) NOT NULL,  
\`status\` varchar(10) NOT NULL,  
\`tiddlywiki\_type\` varchar(30) NOT NULL,  
\`default\_anonymous\_perm\` varchar(4) NOT NULL,  
\`default\_user\_perm\` varchar(4) NOT NULL,  
\`rss\_group\` varchar(50) NOT NULL,  
\`markup\_group\` varchar(50) NOT NULL,  
PRIMARY KEY (\`name\`)  
) ENGINE=MyISAM DEFAULT CHARSET=latin1;  
  
\--  
\-- Dumping data for table \`instance\`  
\--  
  
INSERT INTO \`instance\` (\`name\`, \`lang\`, \`keep\_revision\`, \`require\_login\`, \`session\_expire\`, \`tag\_tiddler\_with\_modifier\`, \`char\_set\`, \`hashseed\`, \`debug\`, \`status\`, \`tiddlywiki\_type\`, \`default\_anonymous\_perm\`, \`default\_user\_perm\`, \`rss\_group\`, \`markup\_group\`) VALUES  
('permissions', 'en', 1, 0, 0, 0, 'utf8', '', 0, '', 'TiddlyWiki', '', '', '', '');  
  
\-- --------------------------------------------------------  
  
\--  
\-- Table structure for table \`login\_session\`  
\--  
  
CREATE TABLE \`login\_session\` (  
\`user\_id\` varchar(255) NOT NULL,  
\`session\_token\` varchar(150) NOT NULL COMMENT 'username+password+time',  
\`expire\` int(20) NOT NULL,  
\`ip\` varchar(15) NOT NULL  
) ENGINE=MyISAM DEFAULT CHARSET=latin1;  
  
\--  
\-- Dumping data for table \`login\_session\`  
\--  
  
\-- --------------------------------------------------------  
  
\--  
\-- Table structure for table \`permissions\`  
\--  
  
CREATE TABLE \`permissions\` (  
\`read\` int(1) NOT NULL,  
\`insert\` int(1) NOT NULL,  
\`edit\` int(1) NOT NULL,  
\`delete\` int(1) NOT NULL,  
\`group\_name\` varchar(50) NOT NULL,  
\`instance\_name\` varchar(100) NOT NULL  
) ENGINE=MyISAM DEFAULT CHARSET=latin1;  
  
\--  
\-- Dumping data for table \`permissions\`  
\--  
  
\-- --------------------------------------------------------  
  
\--  
\-- Table structure for table \`tiddler\`  
\--  
  
CREATE TABLE \`tiddler\` (  
\`id\` int(11) NOT NULL auto\_increment,  
\`instance\_name\` varchar(100) NOT NULL,  
\`title\` text NOT NULL,  
\`body\` mediumtext NOT NULL,  
\`fields\` text NOT NULL,  
\`tags\` text NOT NULL,  
\`modifier\` varchar(255) NOT NULL,  
\`creator\` varchar(255) NOT NULL,  
\`modified\` varchar(12) NOT NULL,  
\`created\` varchar(12) NOT NULL,  
\`version\` int(11) NOT NULL,  
PRIMARY KEY (\`id\`)  
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO\_INCREMENT=1 ;  
  
\--  
\-- Dumping data for table \`tiddler\`  
\--  
  
\-- --------------------------------------------------------  
  
\--  
\-- Table structure for table \`tiddler\_revision\`  
\--  
  
CREATE TABLE \`tiddler\_revision\` (  
\`id\` int(11) NOT NULL auto\_increment,  
\`title\` text NOT NULL,  
\`body\` mediumtext NOT NULL,  
\`fields\` text NOT NULL,  
\`modified\` varchar(12) NOT NULL,  
\`modifier\` varchar(255) NOT NULL,  
\`revision\` int(11) NOT NULL,  
\`tags\` text NOT NULL,  
\`tiddler\_id\` int(11) NOT NULL,  
PRIMARY KEY (\`id\`)  
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO\_INCREMENT=1 ;  
  
\--  
\-- Dumping data for table \`tiddler\_revision\`  
\--  
  
\-- --------------------------------------------------------  
  
\--  
\-- Table structure for table \`user\`  
\--  
  
CREATE TABLE \`user\` (  
\`id\` varchar(255) NOT NULL,  
\`password\` varchar(50) NOT NULL,  
\`short\_name\` varchar(50) NOT NULL,  
\`long\_name\` varchar(100) NOT NULL,  
PRIMARY KEY (\`id\`)  
) ENGINE=MyISAM DEFAULT CHARSET=latin1;  
  
\--  
\-- Dumping data for table \`user\`  
\--  
  
\[/sourcecode\]

MIME Types in for Server Side TiddlyWikis - Download a HTML file from a link

2007-11-21T00:00:00Z

One of the things we like about TiddlySpot is the way that it immediately provides the save as dialog box when you click the download link. For a demo at the UC Hot House we needed to do something similar. Here is what I did it. If any one knows of a better way to achieve the same goal please let me know.

With PHP its nice and easy to return a different MIME type. This can be done using one line of code :

header("Content-Type: application/zip zip");

There a many different MIME types available, Wikipedia provides a summary of some of the more relevant types at :

http://en.wikipedia.org/wiki/Internet_media_type

Setting the MIME type to HTML simple loads the webpage into the browser becuase it knows how to display html files. There were two ways to produce the save dialog box, firstly the above example. By telling the browser to expect a Zip file it immediately returns the save as box. I was not overly happy with this because it was not a zip file and the dialog box informed the user they were going to be downloading a PC ZIP Achive :

After some googling I discovered that browsers will return the save as dialog for any file formats that they do not understand. So I changed the MIME type to :

header("Content-Type: application/zisdfsdfpsdf zisdfp");

and got the same except it was defaulting to saying it was saving a .php file in the save dialog box.

This of course only returns an empty file: To make it save the tiddlywiki file I then added :
[sourcecode language='php']

header("Pragma: public");
header("Expires: 0");
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("Cache-Control: public");
header("Content-Description: File Transfer");
header("Content-Type: application/sdfzip zipsdfsdf");

$file = @fopen('index.html',"rb");
if ($file) {
while(!feof($file)) {
print(fread($file, 1024*8));
flush();
if (connection_status()!=0) {
@fclose($file);
die();
}
}
@fclose($file);
}

[/sourcecode]
The fact that it was saving a PHP file was a problem. This was actually very simple to resolve :I created a .htaccess file in the folder containing the above code and entered :

AddType application/x-httpd-php .htm
AddType application/x-httpd-php .html

This means that any .html and .htm files will now be processed by the PHP engine. The final step it to change the filename of the file containing the above PHP code so that it is a HTML file.

The end result is the file should prompt you to save a HTML from one click.

ccTiddly 2.x - An Overview

2007-11-26T00:00:00Z

Why are we doing this?

We've now got a couple of user groups within BT using ccTiddly. Their feedback is driving a wave of improvements that I'm working on with CoolCold, the man who originally created ccTiddly. The areas we've been looking at are:

Self-service Workspace Creation

The new version of ccTiddly will allows users to create their own ccTiddly workspaces, which is a (more or less) a complete independent wiki with it's own security permissions.

Reusable Master Workspaces

ccTiddly 2.x introduces the concept of master workspaces. A "master workspace" allows a set of tiddlers to be packaged up and included in several different workspaces. This allows common content such as themes to be shared between workspaces. Because the links are dynamic, it is also possible to change a tiddler from a master workspace and have the change automatically appear in workspaces that use that master.

User Management

The new version of ccTiddly will have new user management and security that allows permissions to be set on a per-workspace basis for individual users and groups. Although we're currently working with a custom user database, I've got experimental support for both LDAP and OpenID.

Image and Attachment Support

Users will be able to upload images and other attachments to a workspace .

Import Support

Users will also be able to upload a standalone TiddlyWiki file so that it can be imported into a ccTiddly workspace.

Personal Tiddlers

Users will be able to create custom personal tiddlers which will persist across all workspaces they access on a server, allowing advanced users to be able to have settings applied consistently across all their workspaces

Over the coming few weeks I will be making the above happen and providing you details about each of these sections on my blog.

The Robbie Clutton Problem.

2007-11-28T00:00:00Z

Robbie seems to be getting slightly annoyed about people such as myself who link their del.icio.us accounts with their wordpress accounts. He explains his problem in the following blog post :
http://blog.iclutton.com/2007/11/other-peoples-blogs.html

I quite like this functionality, I have had a number of comments about the links which I post. I also like the way people can know what I am reading and thinking about in between normal posts.

As Robbie points out you can get a direct stream of my del.icio.us feed from this page.

I value Robbie as a reader/commenter so dont want to continue to enrage his anger, I looked at the settings thinking I would make it update once a week, unfortunately I can only configure the hour of the day at which the update occurs.

Id be interested in any comments for or against Robbies motion, if no-one says they like viewing my links in their RSS reader I will remove the mystical link.

This has also got me thinking about aggregation in a slightly different way, in some ways I like RSS feeds which are about a particular topic, but I also like the fact that certain blogs aggregate various different topics.

Comments please...

Epoch to TiddlyTime

2007-12-03T00:00:00Z

This handy PHP function receives a epoch time stamp and returns the a string using the TiddlyWiki date format. Quite handy.

// Returns time in TiddlyWiki format from Epoch time stamp.

function epochToTiddlyTime($timestamp)  
{  
return date('YmdHi', $timestamp);  
}

Del.icio.us Feed Removal

2007-12-06T00:00:00Z

Following on from my previous posts about the Robbie problem I have now removed my mystical link between my blog and del.icio.us account.

If anyone would like to follow my del.icio.us links feed then you can get it here.

ccTiddly System Tiddler Plugins

2007-12-10T00:00:00Z

ccTiddly currently uses a modified version of the basic TiddlyWiki HTML code. This means that whenever there's an update to the core code, we have to manually update ccTiddly to the new version (which involves some fiddly manual steps).

The goal is to make it so that ccTiddly uses a clean, unadorned copy of empty.html from tiddlywiki.com, and to have it automatically splice in the extra bits and pieces that are needed by ccTiddly.

These extra bits and pieces are a bunch of plugins and some "stock" tiddlers that use macros from those plugins to expose them to the user.

If, like me, you get confused about the difference between a plugin and a macro, remember that a plugin is just a tiddler tagged "systemConfig", a plugin can can contain many different macros (which use config.macros)

For instance, there is a plugin called "CreateWorkspacePlugin" that provides the <> macro. The macro produces a user interface that allows users to interactively create a new workspace. So, we need to include the plugin in the HTML file, and we also need to, say, add a new tiddler called "CreateWorkspace" that contains a call to <> the create workspace macro.

Here's the complete list:
Macro <> (from CreateWorkspacePlugin)

This macro allows the user to create a new ccTiddly workspace by specifying a name, and the permissions for both anonymous and registered users. We'll make the macro available to users via the backstage area, since this isn't a particularly common operation.

**Macro <> (from EditWorkspacePlugin)
**

This plug in will allow users to manage permissions on a workspace which already exists (assuming they have the correct permission). Going forward this will probably include the master workspace management which will then be moved to its own plug in.

**Macro <> (From UserTiddlerPlugin) **

This tiddler will be used to change your email address, password and user specific tiddlers.

Macro <> - (From LoginPlugin)

This macro displays the login UI. When not logged in it will allow the users to login using OpenID, LDAP or the internal user database. When logged in the user will be informed who they are logged in as and be given the option to log out.

Pondering PageRank and TinyURLs

2007-12-10T00:00:00Z

A couple of weeks ago I posted a link on Twitter and noticed it was automatically converted into a tinyurl (http://tinyurl.com). The URL was not too long to fit into my 140 characters.

This got me thinking, I have never felt the need to use tinyurls, but are they actually doing damage?

How do tinyurls effect PageRank? Should hosts fear a duplicate content penalty? especially if tinyurl.com has a higher initial page rank than your own site?

Has anyone seen googles algorithm deal with these URLs in a good or bad way? Are all these great links in twitter going to waste? Surely not?

There is some debate about this topic here :

http://www.thescripts.com/forum/thread96963.html

I would be interested in any views on this.

Bullshit 2.0

2007-12-12T00:00:00Z

I'm currently at the second day of the LeWeb3 Conference. For a long time I have disliked the term "web 2.0" for a number of reasons.

It has no clear definition, different people take it to mean completely different things.

The web is evolving, it is not released in easily defined iterations.

Doc Searls asked the question in his talk: who can define web 2.0? About 2 people in an audience of 1000 people raised their hands.

Often these terms are used to describe things that we don't quite understand or can't explain. I once overhead Tom Morris say that its only non-developers who use the term web 2.0.

Its scary how many time I have heard people say they want a web 2.0 app. This post talks about how innovation has become a dirty word. I think the same can be said for anything ending 2.0.

I would love to see an end to terminology 2.0 but realistically I can only ask that if people insist on using these terms they follow it by an explanation of what they actually mean.

The Ultimate N95 hack - Helicopters

2007-12-24T00:00:00Z

It struck me while watching the below video of the Nokia n95 yesterday that the n95 has all the necessary equipment required to run an r/c helicopter.

[youtube=http://www.youtube.com/watch?v=EMjAYdF13cU]

With its built in GPS and the ability to run a web server, It would seem sensible to replace the radio receiver from a helicopter with a bluetooth one (as shown in the above video)

Ive also been playing with the nokia's on board web server. It works, although the connection is not exactly reliable.

With a connection it would be really easy to control the helicopter from anywhere on the web!

Ive not quite worked out how we avoid killing folk when the connection drops out.

I consulted NATS about this (ok my sister in law) and it would basically only be legal to fly over private property and below a certain heights.

I really want to scratch this itch but think it could be a little dangerous and I dont really have enough space.

I will try to get up some other posts about the stuff I have been doing with the n95.

The web server stuff is particularly cool

http://opensource.nokia.com/projects/mobile-web-server/

I am particularly looking forward to PAMP in early Jan:

http://blogs.s60.com/mws/2007/11/hot_news_php_coming_to_s60.html

Merry Christmas every body.

Life Streaming in ccTiddly

2008-01-04T00:00:00Z

This afternoon I noticed Phil Hawksworth playing around with a script to add a life streaming to his blog.

Thanks to Jeremy Keith, for the original code

With very few changes I have got the script working in ccTiddly.
In index.php you simply need to add the code contained in this file (lifestream1.txt) under

in Index.php

And below is the end result.

This code probably wont make it into the next release of ccTiddly but I thought I would get it out there for you to play with.

Some of the date sorting bits are not actually required here because Tiddlywiki can do the date sorting.

Enjoy, comments and suggestions welcome as always.

Product Streaming for ccTiddly???

2008-01-07T00:00:00Z

My recent play/ blog post with life streaming script got me thinking. Today I've been looking at the various online resources for ccTiddly. Currently we have :

http://cctiddly.sourceforge.net - ccTiddly on Sourceforge

http://groups.google.com/group/ccTiddly - Google Groups on ccTiddly http://coolcold.wordpress.com - Cool Colds blog [

https://simonmcmanus.com](https://simonmcmanus.wordpress.com/wp-admin/My%20Blog) - My Blog

http://www.tiddlywiki.org/wiki/CcTiddly - Wiki for ccTiddly

http://www.tiddlywiki.org/wiki/CcTiddlyDeveloper - Wiki for ccTiddly developers.

http://svn.tiddlywiki.org/Trunk/association/serversides/cctiddly - SVN for ccTiddly

http://trac.tiddlywiki.org - Trac for Tiddlywiki

and there are potentially more. Most of these produce some kind of RSS feed. It would be nice to provide an aggregated view of all these feeds in a similar way to Life Streaming.

At a quick glance I can see a few problems. The Wikis are being hosted on the TiddlyWiki Media Wiki installation which does not appear to provide an RSS feed per page. Maybe this can be resolved using the media wiki categories feed .

Anyway, just a thought, would anyone find this usefull?

Comments and suggestions welcome as always.

Server Side Search for ccTiddly.

2008-01-15T00:00:00Z

We are starting to deploy ccTiddly within BT and have been importing various types of data. In the same way that users experience issues with a Tiddlywiki files greater than 1 or 2 mbs the same issue occurs on ccTiddly.

Being server side there are a number of things we can do to reduce these issues. One idea we have is only loading the title data for each of the tiddlers onLoad. With such techniques the client side search (and some other areas) will lose value. As a result I have started experimenting with a server side search solution for ccTiddly.

The nice thing about this code is that it can later be used to search across revisions, tiddlywiki's bag's and even across different servers. It could also be modified quite easily to incorporate google search results.

The code is made up of two parts :

The plug-in (you need to update the server, url and then create a tiddler and tag it with systemConfig) :

Plugin :

search.txt

PHP Code :

searchphp.txt

(you will need to rename the file from searchphp.txt to search.php)

This code has been written for ccTiddly 2.0 but you should be able to get it working on ccTiddly 1.2 with minimal problems. In this case search.php was added to a folder called 'handle' in the root ccTiddly directory.

This is the format we will be using in ccTiddly 2.x

A temporary example of this script can be found running at :

http://wikidev.osmosoft.com/search#search - Please note this is a dev server only.

Time for a blog post about twitter.

2008-01-15T00:00:00Z

I was a slow starter when it came to twitter, im now subscribed to about 54 people and they generates a good few tweats.(updates) I now rarely read beyond the first page so I miss quite a few of them.

I found it interesting how the whole twitter experience became more enjoyable again when I unsubscribed from @Scobleizer. The human brain may be good at filtering information but its alot happier when it doesn't have to. For a while twitter was reminding me of Outlook. It turns out that was because I was using it like Outlook by not missing a tweat.

That is where I was going wrong....

An email never guarantees that it has been received, and certainly not that due care and attention has been paid to reading and digesting the information contained with in it. That however is exactly what people expect. With twitter I have not seen the same expectations.

I like to think about tweats as throw away comments that may not be read by any one, and thats fine, but they could also make someone smile or avoid two people doing exactly the same piece of work.

I am really looking forward to having ccTiddly at a stage where we can recreate things like twitter. If twitters success is all about constraints it will be really interesting to see what happens when we tweak those constraints for different environments.

Google Images in TiddlyWiki...and maybe flickr?

2008-01-21T00:00:00Z

After playing with the server side search for ccTiddly and knowing there were some project on the horizon that wanted to integrate google search into tiddlywiki results I decided to add google search into TiddlyWiki. An example of which can be found here.

As an extension to that I decided to add a google images search.

I have uploaded an example to Tiddlyspot at:

http://imgsearch.tiddlyspot.com/

The tiddlers which make it all work are:

http://imgsearch.tiddlyspot.com/#googleImage

Overrides search onKeyPress function so that tw searches google when the users presses enter.

http://imgsearch.tiddlyspot.com/#MarkupPostHead

Includes the google javascript file, you will need to change the API key (at the end of the URI) if using on a domain other than Tiddlyspot.

http://imgsearch.tiddlyspot.com/#imageView

Code that creates the drop down list of images.

http://imgsearch.tiddlyspot.com/#taggedTemplateTweak

Allows tiddlers tagged "image" to use a different template.

http://imgsearch.tiddlyspot.com/#EditTemplate

Adds images link to the EditTemplate. Im sure there is a better way of doing this.

http://imgsearch.tiddlyspot.com/#ImageViewTemplate

It all works by storing the URI to the thumbnail in the tiddler title. With this template we hide the title.

and Flickr?

I started playing with the flickr API, its returning the results in JSON but I have not had time to integrate that into the above script.

If you look at the flickr tiddler its currently searching for "simonmcmanus"

http://wikidev.osmosoft.com/flickr

Given that im now on holiday its not going to get done for quite a while. If anyone wants to make a tiddlywiki flickr plugin the pieces are all in place.

Comments and suggestions welcome as usual but pls be aware that I may not respond for a good few weeks. :)

nokia n95 stuff.

2008-01-23T00:00:00Z

This post is just a load of useful links and info about things you can do with the Nokia n95.

I was going to send it to a friend via email but it seemed worth turning into a blog post.

Installation Tip : I have experienced some problems when trying to extract and install .zip files on the phone. If you do have this problem you can try unzipping them on your PC and then send the files one by one. The installation file is usually a .sis file.

A guide to setting up you nokia n95 to run gmail through the phones built in functions can be found at:

http://www.knowyourmobile.com/nokia/nokian95/nokian95internet/2533/setting_up_email_on_the_nokia_n95.html

I don't actually use this method. Its set up but it doesn't seem to work with gmail very well. I believe a benefit of this technique is that you can attach files when sending emails.

Google Mail Application

I don't use this either. I just connect over the web and have a bookmark stored which is linked to from the main screen.

Other Applications :

Rotate Me

Auto rotation: when you turn your device, the screen automatically rotates.

Not played with this one too much yet.

FlipSilent

[youtube=http://www.youtube.com/watch?v=KFxUTb8ik3k&rel=1&border=1]

DivX

To play AVI files rather than just mp4s.

NiiMe

[youtube=http://www.youtube.com/watch?v=A0lz35Boe_I&rel=1&border=1]
[youtube=http://www.youtube.com/watch?v=79xeREnZ_7Q&rel=1&border=1]

I am really looking forward to this being released for the mac.

pyPiwo

drink beer from your n95.

pyPoziomica

Spirit level tool for the n95!

QR Code Generator

You don't need to download any software, the n95 has a built in QR code reader, from this site you can generate QR codes to try on your phone.

Dr. Jukka’s Inclinometer

Y-Inclinometer by Dr.Jukka is an instrument for measuring angles of slope (or tilt), elevation or inclination of an object with respect to gravity . You have only to fix your phone and adjust it so that it is perfectly upright in your vehicle :)

More apps and reviews :

http://n95blog.com/25-must-have-applicatons-for-your-nokia-n95/

http://sjc-123.blogspot.com/2007/06/best-tips-and-tricks-for-nokia-n95.html

http://www.hd911.com/archives/114

Running a Web Server from the N95

Mobile Web Server

allows you to run a web server on the phone.

PAMP - Personal Apache Mysql and PHP

I am yet to grasp the potential of everyone walking around with a web server in their pocket. ccTiddly is nearly working on PAMP and I have been reading some interesting use cases. Notably a bar which pulls its music from everyones phones and can also project videos from peoples phones onto the walls.

I'm off to Brazil for two weeks but will post more about the potential of the n95 running a web server when I get back.

Off the Shelf Integration in Enterprises

2008-02-21T00:00:00Z

Two blog posts have got me thinking lately,

This from PSD and this from JP.

The snapshot analogy led to a plethora of sins, to the way we designed databases, to the way we “inserted”, “amended” and “deleted” data. As we tried to force the snapshots to move around between systems, we hit DRM version 1. Enterprise Application Integration. Otherwise known as paying to bury our data, paying to dig it out again, and then, just in case we haven’t had enough, paying to move it around. And we could do so many wonderfully silly things as a result. Hire armies of people to write code to synchronise things, then hire more armies of people to write code to reconcile the data. Sometimes we missed out the “writing code” bit and just hired the reconcilers direct.

And the platform vendors prospered. And the database guys prospered. The storage guys prospered. The EAI guys prospered. The code writers prospered. The reconcilers prospered. Everyone prospered.

Except the customer.

- JP

I have seen a number of enterprise projects pay external consultants to bury, dig out and then move around data. Its amazing how complicated a simple job can become. Its even more amazing that an industry still thrives from doing so.

For a while now it has been common practice to buy off the shelf products to perform common tasks. They come with a nice fluffy layer of support and there is always a consultant on hand if you want to spend some more cash. In general these off the shelf products do NOT do what they need to do. They require a great deal of customisation usually taken care of by a bespoke programming language specific to the "Off the Shelf software."

As a result you either buy consultancy or train your own staff in the bespoke language. - both of which stink of vendor lock in.

Lets think for a moment what that common task actually is. A common task is accessing, consuming and potentially updating data from a completely different system. None of the off the shelf systems seem capable of doing so without swallowing vast sums of consultancy fees. JP points out the daily tasks for knowledge workers are actually search, syndication fulfillment and conversation. Each of these are very valuable to the enterprise. In this case I am particularly talking about syndication.

No man is an island.

Neither is software..... particularly in the enterprise.

Software (as with people) is only as good as its ability to interact with the eco-system around it.

In fact without some kind of syndication between systems you will find that search, conversation and fulfillment lose much of their value.

We seem to be at an interesting time in the enterprise, billions of pounds have been spent on massive integration projects/software but when compared to small RESTful APIs like Flickr and Twitter your left wondering where all the money has gone.

I love Paul's definition of a mash up :

To me its actually simpler,

mash ups are fun
integration sounds like hard work and usually is

As Doc points out Markets are conversations, two way conversations, which means companies need to state very clearly to big vendors what they need to change. In this case, its zero touch access to data stored with-in an enterprise system.
Maybe the big vendors will sort out their act or maybe open source and open standards will provail in the enterprise leaving the vendors wondering what to do with all their consultants.

Will that day ever happen?? I'm hoping so.....

PSD has also pointed me to a earlier post of his : A Moral Tale, which is well worth a read.

Innovating with small pieces loosely joined

2008-02-29T00:00:00Z

It's hard to justify the production of a single piece in a jigsaw.

A mash-up is much like a jigsaw. The services which sit behind the mash-up are generally of less value than the combined value. Businesses want to own the whole jigsaw because that is where the obvious money is.

So why should a company expose data when they can see no immediate benefit? Can exposing such a service be justified when the benefit to the end user is not immediately obvious?

Businesses seem to understand the widget model quite well. They can stretch their online estate, pushing the brand outside of the traditional .com domain. However, when the only reference to the brand is an AJAX call to a server never seen by the end user, where is the value?

Businesses are comfortable with prescribed innovation. They need an idea before there is investment, and exposing data is not an idea. The thing that I particularly love about the English language is that it's described rather than prescribed.

Its the reasons that we have words such as: "blogosphere", "flash mob" and "stealth tax" in the Oxford English dictionary.

Solving problems not building business models....in many cases we may not even be able to see a problem. The end users knows all about the problems and weaknesses, and if you can enable the edges of your network to try out different solutions to their problems you are going to see more innovative solutions.

Lets think of it as an innovation model rather than a business model. By allowing developers to mash up their own data you find out that they want to do something with it that you could never have imagined. You can then incorporate those ideas into your own product(s).

In my previous post I said that :

"Software (as with people) is only as good as its ability to interact with the eco-system around it."

Increasingly we are judging software by its ability to pump information in and out. How long will it be until the same can be said about a business?

If you have any other good reasons for business opening up there data please let me know.

As always comments welcome.

Announcing ccTiddly 1.5.1

2008-03-10T00:00:00Z

Over the last few weeks and months I have slowly been working away with Matt toward ccTiddly 2.0. Its still early days but we wanted to start getting feedback as soon as possible, so please welcome ccTiddly 1.5 Alpha.I have added information about the release to the tiddlywiki.org wiki.

http://tiddlywiki.org/wiki/CcTiddly/v1.5.1_Release_Notes

If you have any problems please raise them on the ccTiddly google groups :

http://groups.google.com/group/ccTiddly

Cheers

Simon

Rest in Peace Civil Serf

2008-03-10T00:00:00Z

I was upset this morning to read that the Civil Serf blog had been shut down. It did however explain why the RSS feed had been filled with info about the birth of a French baby called Arthur and other less useful info.For those of you that don't know, Civil Serf was a blog by a civil servant providing a great insight into the internal runnings of government."The online diarist, known only as "Civil Serf", has been titillating readers with tales of incompetence from within the government machine since last November." - Scotsman

She eventually gave enough details for her to be identity to be revealed so it was not entirely unexpected.

We (businesses) spend a great deal of time talking about how tools such as blogs can improve collaboration within businesses. The same can surely be said for Government.

As Emma Mulqueeny Says :"Anyone who works in an e-media team in the public sector, will tell you how difficult it is to champion the use of any social media tool to any great effect. And, other than responding to the perennial cry: 'I want a blog' - which never, ever really means I want a blog (Miliband excepted of course) there is little or no interest. This could be due to the fact that there is a great nervousness around it: mis-information and wild assumptions all ultimately culled by risk aversion/avoidance."

The internet is far less tolerable of nicely worded press statements that have been worded in corporate/politicians waffle. Or as Doc puts it :The internet means "Bullshit will lose leverage."

In fact politicians could learn a lot from listening to folk like Doc

.. Markets are Conversation.
... Election should be Conversations?
.... Conversations will win Elections!

Businesses, politicians and parties need to understand this.

Politicians need to learn to engage people in conversations. It's an interesting issue if a civil servant should blog but there is clearly a lot that can be learned by politicians from this experience.

Corporates are currently trying to understand how they can be private in public; trying to understand how they can collaborate with their customers safely on the internet while still keeping their core data secure. It's an interesting issue. There are great benefits from any organisation talking openly about its ideas before it commits firmly to them.

Obviously certain information needs to be kept secure for legal, financial, commercial, diplomatic or political reasons but when I start thinking seriously about what information needs to be protected and what would benefit from being shared the vast majority falls into the "should be shared" category.

The Data Protection Act allows people to request information, usually when its too late, so the government ends up giving out information that results in the government looking bad. Maybe this is fueling an attitude where politicians are scared to give out information early.

Hiding problems which are shared with others rarely makes sense.

"Information wants to be free!"- ?

"The internet recognises censorship as a fault and routes around it."-?

Governments could be using blogs such as this as a great way to dip their toe in the water, instead of leaking a policy one week before announcing it.

I have not managed to find much information about the circumstances around the blog being shut down (it only happened over the weekend). While I understand the reasons for shutting it down I would much rather see them do something more positive with the blog. If the civil servant has been identified and sacked it will be a real shame for the civil service. They would be wasting a fine asset.

One day I will try to read the civil service code and form a slightly stronger opinion about how openly civil servants should be allowed to blog.

Avoid being Civil Serfed

2008-03-11T00:00:00Z

So it seems the Civil Serf case is causing something of a stir.

For me the bigger issue here is how we can encourage management to let people blog about their work. Particularly people working for Government. I suspect governance/regulation can only provide minimal assistance on this matter, what we need is common sense.

Personally I have never read our companies' blogging policy, I think we have one, but there are some pretty common sense rules which have managed to keep me in work so far :

- Be authentic and honest.
- Don't bitch - If you must then make sure you back it up with evidence.
- Justify what you say.
- Make your Mum proud, my mum doesn't understand most of the stuff I blog about but I like to think she would be proud if she did understand.
- Learn from your mistakes.
- keep secrets secret.
- Talk to your boss about what you're blogging and why.
- Abstract away from events/people/companies/parties and talk about anonymous examples.
- Don't be afraid of being wrong (this one does depend a bit more on your employer)
- Make it clear that the views expressed are yours and not that of your past, present or any future employer.

I am quite fortunate in that my boss and his boss are bloggers with a good understanding of the blogosphere.

There is one key thing here, the people at the top need to realise that the "one voice culture" cannot be maintained. There will always be a variety of opinions in any organisation; it's often the variety in opinions that result in great innovations. To stop your customers talking to your staff about ideas does not seem to make sense. When you take it a step further and stop politicians/civil servants talking to voters it makes even less sense. My understanding of the role of civil servants is quite limited, but I suspect we need to encourage them to debate topics in public using the same level of professionalism that they would use when discussing any given issue with their boss. Jeremy's Whitehall Webb blog provides a nice example.

I was pleased to see that MP Tom Watson seems to get the idea; let's hope his colleagues see the benefits of his conversations and start their own.

Exclusively positive blogs don't work. People can tell when a PR machine has been working away on a statement, even when it's cunningly disguised as a blog post - the tone of voice lacks authenticity. You need to let people talk about negatives, but at the same time empower them to turn them into positives.

Most complaints start with a small fault which only becomes a complaint through poor communication/management.

Forming tight guidelines on what you can and cannot say is never going to encourage people to blog, quite the opposite - and besides, lengthy policy documents never get read.

Just to confirm, The Guardian quotes me as saying that I believe that Civil Serf has been sacked. I actually said "If the civil servant has been identified and sacked it will be a real shame for the civil service". In fact I suspect 'she' may have pulled the blog to avoid being sacked. It's mainly for this reason that I have not re-published the blog posts which google reader stored nicely for me.

Is/Was 'She' really an Asset?

Well she started an inevitable conversation which is never a bad thing. Looking back over the Civil Serf posts I don't see any comments. I'm not sure if that's because they were never enabled or they have not been cached. I would like to have read over peoples reactions to the blog. If there was no ability to add comments the blog was effectively just a scratching post.

As for setting back Government 2.0...I'm no fan of terminology 2.0 mainly because people seem to use such terms to describe things they don't understand or can't explain. I suspect we can learn a great deal about Government 2.0 and the issues that need to be tackled in order to make it a reality. Whatever that reality may be.

If you want to learn more about blogging in Corporates I can recommend reading Naked Conversation from Robert Scoble and Shel Israel. Its a good read.

ccTiddly File Uploading

2008-03-20T00:00:00Z

Over the last couple of days I have been working on the ccUpload macro for ccTiddly. This is a macro that will allow people to upload files to the ccTiddly server so that it can linked to and included in their TiddlyWikis.

The work was in part motivated by Jon's requirement to post HTML files and strings to a end point where the file is then uploaded. This is a part of his template work and some SEO work which will naturally fall out from it - that, however, is a completely different blog post.

We are getting to the stage where we have something functional to share and wanted to provide the opportunity for community feedback.

We're introducing three concepts for ccTiddly users; instances, workspaces and user areas.

Instance: An area containing multiple workspaces.

Workspace: An online area where an individual TiddlyWiki can be stored and maintained. The area can also contain files which have been uploaded by a workspace administrator.

User area: An online area exclusively dedicated to the uploading of files by a single user. Each user has their own user area by default.

The macro enabling file upload does not require the page to refresh in order to upload additional files; instead it posts the form to a hidden iFrame for processing. At present, we're giving users the choice to upload their file to either their workspace or their user area. I am probably going to remove the ability to upload a file to a user area for sake of simplicity (although the code will still exist and can be used if needed).

I am yet to decide what convention I will use when assigning a user area directory to OpenID users. The following structure is not an option:
wiki.osomsosft.com/uploads/users/https://simonmcmanus.com

I would be interested to hear any suggestions/examples.

I have currently not implemented any security with ccTiddly. I am currently thinking that we will only allow people to upload files if they are the owner of the workspace; at the back end users will be able to upload files to their user space provided they are logged in.

Here are the screenshots showing the work so far..... feedback is welcomed.

You can either leave your comments against this blog post or leave them on the google groups page :

http://groups.google.com/group/ccTiddly

We are also going to need an area where people can browse and manage their uploaded files. That will probably take the form of a separate macro (ccBrowse??) but I would be interested to hear from anyone who sees value in displaying the previously uploaded files underneath the upload functionality as the below sketch shows :

Does this sound useful to anyone?

When I have formalised the upload API, I will document it on the ccTiddly page on TiddlyWiki.org. I hope to have this code released in the next week or two.

Free our Bills

2008-03-26T00:00:00Z

For those of you that have not already seen http://www.theyworkforyou.com/ please go and check it out now. Its been around for a good few years now but I was particularly pleased to see their recent action list (Free our Bills) has gained support from David Cameron. Im sure this will make lots of the "Give us our data back" folk happy.

[youtube=http://www.youtube.com/watch?v=ter8T5B8ojI]

In relation to Emma Mulqueenys point about Links, libel and law. My linking to Mr Cameron does not in anyway suggest support for his views except in the Free our Bills case. I am simply linking to an article which I have read/watched and found sufficiently interesting to share with others.

How to save your Enterprise some money

2008-04-11T00:00:00Z

Here is something I have noticed: the people that specify enterprise software requirements and success criteria are rarely the end user. They are business owners and spreadsheet supervisors.

The software produces great reports but the experience to the end user is rarely properly considered. The tendency is to meet the objectives of the business owner rather than the needs of end users.

So this blog post is about saving money. Well, time is money...right? Take an expenses system. If your employees spend their time trying to work out how to use the system, that's time not being spent making money.

Imagine saving every employee 5-10 minute each month. Across 100,000 people, that's 100,000 - 200,000 man hours a year!

Enterprise software pays a reasonable amount of attention to accessibility but not enough to usability. Now I'm no user experience expert but I have been exploring some experience design techniques with Phil recently (for the new ccTiddly macros). I think the correct use of such techniques within the enterprise would make a massive difference. In fact any technique that stops developers thinking so much like developers and more like the poor sod who's going to be relying on the software the better.

Imagine being able to apply the time savings across each of JP's four pillars : Search, Syndication, Conversation and fulfillment.

Politics, Twitter and Accessibility (politically speaking)

2008-04-23T00:00:00Z

I used to love politics. Over the last four or five years I've developed a dislike for it. I was starting to think I had maybe grown out of it or maybe I'm no-longer so idealistic and naive.

Some interesting things have been happening recently, I bumped into @absond on the train into work a good few months back. He told me about BarCampUKGovWeb which sounded quite interesting.

Ive since started following a number of blogs from people that work in and around government. I've even started to follow the blogs of some MP's. I have so far followed all MP's I am aware of regardless of party.

I don't pay particular attention to every post but rather scan read whatever they choose to blog. As more MP's start to blog I will need to become more selective. At the moment its interesting just to see what our representatives feel comfortable blogging about.

The other day this post from Lynne Featherstone caught my attention. She talks about human rights in China in relation to the Olympics. An issue at the front of my mind after going to see the Olympic torch pass St Paul's the previous week. We didn't actually see the torch, it was bundled onto a bus with the Chinese thugs just before it got to us. Regardless I found Lynne's post quite agreeable.

Normally in this situation I would drop a comment on the blog to show my agreement. Unfortunately Lynne's blog is not quite a real blog. You can't add comments. Here is what is really cool though, Lynne's on Twitter. So I tweeted her.

The Downing Twitter feed is rather interesting. @DowningStreet. It provides updates, responds to questions and actually provides an interesting insight into life at Downing Street.

The @Conservative twitter feed even impressed me yesterday. I was getting ready for work when they tweeted that David Cameron was going to be interviewed on BBC 1 just after 8am... and they wanted feedback. So I watched. And then I replied :

"@Conservatives - not bad - Your still not getting my vote. Just to confirm. Are you left or right these days?"

It was slightly sarcastic and I wasn't particularly expecting a reply. When I arrived at work an hour later there was a reply from the Conservative Party.

"@simonmcmanus Thanks for your feedback, and we're on the centre-right!"

For the first the first time in my life I had engaged in a two way conversation with a political party!

The 140 character constraint removes some of the formality associated with blogging and email. I sure as hell wouldn't have written that in an email. Even an email of the same length. Twitter, it would seem is making politicians more accessible. Or at least making politicians appear more accessible.

I'm really interested to see how this all develops. I'm loving the idea of my MP being on Twitter. Lets hope Eleanor Lang (my MP) is listening. I would love to see politicians adopting these tools because they provide a highly effective communications platform.

I should thank http://puffbox.com/ for keeping me informed about the latest politicians using Twitter. Interesting to see that @brianpaddick , @backboris are both using Twitter.

Politics and politicians can often seem invisible and unaccountable. Twitter could start to change that. Given that MP's claim to represent us in parliament I don't think its wrong to wonder.....What are they doing?

Offline is back Online

2008-08-11T00:00:00Z

Sorry I haven't blogged for a while...I've been keeping myself busy with several changes to ccTiddly!

I'm pleased to announce the imminent release of ccTiddly v1.7! This version of ccTiddly was originally going to contain the new server side plugin functionality. It was decided that the next release would contain so much new functionality that it would be inappropriate and in fact confusing to release it as v1.6.5, and so v1.7 does not include server side plugins. Plugins are still planned for the next release: ccTiddly v1.8.

Syncing Functionality

From v1.7 of ccTiddly onwards, users will be able to take a copy of a ccTiddly workspace (collaborative wiki) with them on a train, plane or anywhere without an internet connection. While a user is offline the wiki will save changes locally like a conventional TiddlyWiki file.

When the user has finished making changes offline, and when reconnected to the internet, they can click the sync button on their local version of ccTiddly and their changes will be sent back to the server.

Based on the changes, TiddlyWiki will show the following options before syncing:

This is very new functionality. It's working in Firefox nicely. Unfortunately, I now need to get it working in IE6. Given that IE6 is likely to be challenging, I don't want to make any promises about release dates. However I suspect it will be out in the next few weeks! If you can't wait to have a play the code is in the TiddlyWiki subversion repository .

By using a TiddlyWiki adaptor, ccTiddly can now provide support for enhancements including lazy loading (see below) and integration with projects such as TiddlySnip (a firefox extension for moving web content to your wiki).

New Macros

As part of the ccTiddly project, I have been rewriting many of the ccTiddly macros so that they work with TiddlyWiki slightly better than they did originally.

ccTiddly 1.7 will introduce the following new macros :

<<ccLogin>>

Ok, so this is not a new macro but it's been completely redesigned and making full use of the TiddlyWiki wizard framework. It has also been integrated with the register macro. If the register macro is installed there will be a register button on the login screen.

I hope to extend this mechanism for things like OpenID login.

<<ccEditWorkspace>>

This macro will allow users to update the permissions on an existing workspace. It currently only allows users to set permissions for anonymous users but will be extended to support setting permissions for admins, logged in users and possibly groups.

<<ccManage>>

The ccManage macro will allow workspace administrators to grant other users administration access to a given workspace.

New Skins

TiddlyWiki recently introduced the concept of single tiddler themes. These allow developers to pack many different tiddlers into a single tiddler which makes up a theme e.g. stylesheet, pageTemplate and viewTemplate. ccTiddly now makes full use of the theme mechanism. We will distribute ccTiddly 1.7 with three themes.

Improved Architecture

We have now reached an important milestone in ccTiddly where the Javascript and PHP code are completely separate. This greatly simplifies ccTiddly. All modification to theTiddlyWiki file are loaded from the /tiddlers/ folder as either .js files or .tiddler files.

There is a file: /includes/ccAssignments.php which creates the ccAssignments tiddler. This is the only point where the PHP and Javascript cross over.

Any requests made from the client to the server are handled by a file in the /handle/ folder.

Lazy Loading

With "Lazy loading" a subset of tiddlers are loaded in the first instance, and then others are only loaded upon request.

In ccTiddly, it's possible to pass the tags variable in the URL. If the tags variable is specified in the URL, the ccTiddly workspace will only load tiddlers with the specified tag. For example;

tags=task

...would only return the tiddlers tagged 'task' in the requested workspace. If users click on links to tiddlers which are not tagged task, they would be loaded at that point.

This technique can be used to dramatically improve loading times of TiddlyWiki files. As soon as ccTiddly v 1.7 is available I will announce it on the ccTiddly groups.

TiddlyDocs - Collaborating on large documents

2009-02-06T00:00:00Z

Recently I've been building a proof of concept, the brief was simple...

"Come up with a way for my team to collaborate with people outside the organisation on large Word document. At the moment, we tend to email them between us, which can degenerate into a nightmare."

Our approach was to think about breaking these large documents down into small sections which could be assigned to individuals for authoring and/or review. These sections could then be reassembled into a single document for printing.

To build this proof of concept we used TiddlyWiki and jQuery. The latest release of TiddlyWiki (2.5) includes jQuery (1.2.6) so this provided a fine opportunity to explore the new potential.

So here is the demo,

The online demo does not demonstrate the iGoogle integration of TiddlyDocs. The iGoogle integration showed how we could provide a personalised view of the sections assigned to each user. While we used iGoogle for the original demo this portlet just contains HTML so could be embedded into any portal framework which supports HTML.

PSD wrote some XSL-FO to translate the generated HTML into a printable PDF document. Paul's code can be found here.

Features :

Drag and Drop your Table of Content

Allows users to change the order and hierarchy of the document table of content

Easily assign sections to Users

Allows each section to be easily assigned to a pre-populated list of users.

Full WYSIWYG text editing with FCKEditor

Allows users to edit the document content in a familiar word style environment. Also allows content including images to be pasted in the textarea from the clipboard.

iGoogle Integration of Personalised Task Lists

The iGoogle integration allows each users to have their own view of all the tasks assigned to them. This can be used in various portal frameworks.

Easy view of the documents status

The bar to the right of the table of content shows the status of each section. When the bar is completely green the document is complete. This example demonstrates that only one of the sections has been completed.

**Each Section Allows for Comments
**

Each section allows multi-threaded comments which will not be printed in the final document. This allows for conversations to take place around each section of content.

The Components :

We were able to build this proof of concept so quickly by reusing open source code that is available in the TiddlyWiki and jQuery communities. Below I talk about the components that make up TiddlyDocs.

**SplitView Plugin
**

This is one of the plugins I wrote specifically for the demo. The macro accepts one parameter which is the name of another tiddler to store the document specification. The document specification is stored in list format, eg:

* Heading 1_
* Heading 2
** Heading 2.1
** Heading 2.2
* Heading 3_

Every time the document is re-arranged the specification tiddler is saved.

PrintView Plugin

This is the other plugin which I wrote specifically for the demo. This plugin can read the document specification, collect the data from each of the required tiddlers, and then generate a static html file on the server which can then be converted to PDF for printing.

Single Page Mode Plugin

Provided by Eric of TiddlyTools, the singlePageModePlugin ensures only one tiddler is viewed at a time.

https://tiddlytools.com/#SinglePageModePlugin

Comments Plugin

Allows users to post comments against individual sections. These comments are presented as a threaded discussion, allowing rich conversations to take place around the content. Thanks to Michael Mahemoff for this plugin who also helped with the demo.

http://tiddlyguv.com/CommentsPlugin.html

Value Switcher Plugin TeamTasks

Taken from Phil Hawksworth's TeamTasks, this allows the fields provided by TiddlyWiki to be used to store information about ownership and current status.

https://svn.tiddlywiki.org/Trunk/contributors/PhilHawksworth/verticals/TeamTasks/core/plugins/ValueSwitcherPlugin.js

from: http://getteamtasks.com

**FCKEditor
**
FCKEditor is a project to make a nice WYSIWYG editor from any HTML textarea. I have to say a I have been very impressed with FCKEditor.

http://www.fckeditor.net/

TiddlyWiki FCKEditor Plugin

A TiddlyWiki plugin that makes FCKEditor work nicely with TiddlyWiki.

http://visualtw.ouvaton.org/VisualTW.html#FCKeditorPlugin

NestedSortable -(a jQuery plugin)
This jQuery plugin provides the drag and drop interface for the demo.

http://code.google.com/p/nestedsortables/

This demo is hosted by ccTiddly but its been written to work on TiddlyWeb and any other server-side implementation of TiddlyWiki. Over the next few months I will be working on TiddlyDocs to prepare it for easy consumption.

Updated : Michael Mahemoff has produced a screencast talking through the features of this demo : http://vimeo.com/3109248

My Recent Contribution to the House of Lords Information Committee

2009-06-24T00:00:00Z

My name is Simon McManus. I work as a web developer. After recently attending a UKGovBarCamp I noticed that it was difficult to reuse parliament's publications. I made a comment on a parliamentary blog post
which resulted in Richard contacting me via e-mail. The fact that I was able to comment in the first place has made it possible for me to speak to you now. Thank you for this opportunity.

The essential dissatisfaction I have with the parliament website is that the information is not being published for re-use. In this paper I will explain what I mean by this, why I believe it and offer some alternative solutions. I would be more than happy to come and discuss this with you further and would appreciate any feedback that you might have.

Executive Summary

Websites like Wikipedia demonstrate how conversations can take place around information. For each article there is a discussions tab which allows readers and authors to discuss the articles. If you would like the same thing to occur around your meeting transcripts and legislation you need to change the format to make the data referenceable, commentable and easily queried by a programming language.

I believe there are five steps to opening up Parliamentary data:

Data Copyright
Making raw data available
Marking up data with semantic information
Making data linkable
exposing data through APIs

each of these parts will now be discussed.

1 . Data Copyright

Publishing data online holds little value if the data has not been licensed for reuse. I suggest all parliamentary publications be made available under a creative commons copyright, so that anyone can republish commercially or otherwise.

2 . Making Raw data available.

It is important that the raw data dumps which make any application possible are also available to the public. The data should be available be with no style information, no scripting nothing but pure, unadulterated data. While there is value in Parliament building websites/applications it is far more important that developers have equal access to the original data so they can build other applications without the unaffected by the preconceptions of parliament.uk developers.

Currently most parliamentary publications are in PDF form. This causes a number of problems :

Individual pages and sections are not indexed by search engines.
It is difficult to programmatically extract data from a PDF.
It is not possible to reference particular sections of a document.

3 . Marking up data with semantic information

Theyworkforyou.com have put together a basic template of how parliament can improve the semantics of parliamentary publications. More details of their suggestions can be found at the following address :

http://www.theyworkforyou.com/freeourbills/techy

I fully endorse these suggestions. If followed, they would make it a great deal easier for developers like me to build new and richer interfaces because it makes the data more meaningful.

4 . Making data linkable

When writing the paper it was particularly difficult to find the references from transcripts of your Committee's meetings. It was sent to me in the following form :

"The transcript of the meetings the Committee has had as part of its inquiry are available here:

http://www.publications.parliament.uk/pa/ld/lduncorr.htm#info
(See in particular questions 78, 85 and 86 of the 1 April meeting)."

Finding the information required the following steps to be taken:

clicking the above link
Searching for the meeting on the 1 April
clicking another link which downloaded a big PDF file
Waiting for the entire document to download
Searching the pdf for question 78
Searching the pdf for question 85
Searching the pdf for question 86

I would like to see an implementation where clicking the following three URLs would take you straight to view each question, allow you to read its answer and comment against either.

http://www.publications.parliament.uk/InformationCommittee/PeopleAndParliament/Meetings/1April09/Question78
http://www.publications.parliament.uk/InformationCommittee/PeopleAndParliament/Meetings/1April09/Question85
http://www.publications.parliament.uk/InformationCommittee/PeopleAndParliament/Meetings/1April09/Question86

If the information is published in HTML files which are being indexed by Google the bills will be findable in google and extend your outreach to every single user of google.

The simplest way to expose data on the web is to break it down into small individually addressable sections each of which has a unique URL. These URLs can then be sent round in emails, added to a user's favorites or programmatically interrogated.

5 . Exposing data through APIs

An Application Programming Interface (API) provides developers an interface for interacting with a data set easily. By making it possible to programatically search legislation and comment against a particular section from a remote site, it becomes much easier for people to build new interfaces for the available data. A good API would make it really easy to build new ways of browsing, searching and commenting on legislation.

Data should be exposed so that it can be presented in ways never expected by those collating the data. It is through this approach that you help people to view and, most importantly, interact with both Houses regarding proposed legislation.

A good API will make data available in a number of different formats. HTML, XML and JSON are a good starting point. From the earliest possible opportunity any code being used to expose data should be open sourced so that developers can extend the existing code base without needing to start from scratch. Not only does this allow people to build things more quickly, it allows developers to extend functionality and form a community of developers working together to improve the nations data infrastructure.

If Parliament wants to engage with people it will be a great deal easier on sites they already visit rather than the parliament.uk site. You cannot expect to engage the majority of the electorate at parliament.uk. It needs to be made particularly easy to integrate the goings on of both Houses into any website so that useful (relevant) data can be pulled in about a given subject.

A site about digital rights and copyright should be able to make a call to the API which looks for any recent mentions of "Digital Rights" and "Copyright" and can then embed the results in its own site. I also suspect that providing functionality to comment against the results would massively increase the potential of both Houses to engage with the electorate.

Below I have put together a general criteria for exposing data on the web :

The data should be indexable and discoverable in google/other search engines.
The data should be exposed using open data formats (HTML, oof)
The data should be licensed for re-use, even by commercial organisations.
It should be possible to browse the data in a web browser.
Make the original data set available.
Maintain a consistent interface for developers to build against.
Any code used to abstract away from the data should be open sourced.
Any semantics that can be added to data are beneficial.
There should not be separate systems for MPs and the public. Whatever system MPs use to look up bills, track their progress through parliament, find out amendments etc should be available to the public.

The following criteria are not essential but I suspect could have a major effect on parliaments ability to interact with the people online :

the information should have a plain English summary. Often bills are full of jargon that makes them incomprehensible to many. A good example is the creative commons licenses. These have a plain English version and a legalspeak version.
Electronic book support. All bill, minutes etc should be available in a non-proprietary electronic book format (eg epub) for download.

Please note all that all the above should be possible for very little cost. All the software required is available for free with open source software licenses. The primary cost should be for one or two developers who work with the community to expose data based on user/developer feedback.

Installing TiddlyDocs latest on TiddlyWeb (Mac)

2009-09-21T00:00:00Z

Assuming you have already installed TiddlyWeb and TiddlyWebWiki (http://tiddlyweb.peermore.com/wiki/) this is how to install the very latest development version of TiddlyDocs on your local machine :

curl http://svn.tiddlywiki.org/Trunk/contributors/SimonMcManus/tiddlyweb/tiddlydocs/install.sh >install.sh
sudo sh install.sh
cd tiddlydocs
twanager server 127.0.0.1 8080

In your browsers then goto :

http://127.0.0.1:8080/recipes/tiddlydocs/tiddlers.wiki

A Simple CKEditor Plugin Template

2010-05-12T00:00:00Z

FCKEditor has recently released a new version called CKEditor. Unfortunately much of the documentation has not been updated which makes building things on top of the API somewhat difficult at the moment.

I have published a basic template which make it clear how to create a plugin that adds an item to the CKEditor toolbar, when that button is pressed the users is presented with a simple dialog box containing two tabs which can interact with the parent editor.

Installing CKEditor with standalone TiddlyWiki

2010-06-28T00:00:00Z

I was recently asked how to use CKEditor with a standalone TiddlyWiki. CKEditor is the replacement for FCKEditor. I've been using it for a while in MyDocs (a customisation of TiddlyDocs) but thought I would take this opportunity to document how it can be used in a standalone TiddlyWiki.

First off we need to get all the tiddlers required for CKEditor, the easiest way to do that is to cook the ckeditor vertical recipe.

For your convenience I've uploaded the TiddlyWiki file it produces here.

Now we need to download the CKEditor files, You can download them here.

Finally you just need to change the location set in the MarkupPreHead tiddler so it points to the CKEditor folder you just downloaded. In my case:

If you are using cook you will need to save the MarkupPreHead tiddler from within the TiddlyWiki file for it to be set correctly. I have already done so in the example provided.

You may also want to change the values in the "CKEditorSettings" tiddler.

Save your changes, refresh the browser and that should do it.

3D Transforms with CSS3

2011-01-05T00:00:00Z

Over Christmas I started moving simonmcmanus.com over to node.js making some tweaks to the CSS as I went. I wanted to examine the z-index of my page so decided to investigate CSS3 3D transformations. I won't be launching the new simonmcmanus.com for a while but here is what I found out about 3D CSS transformations.

The following examples only work on the latest webkit browsers (Chrome and Safari). In Chrome you will need to enable "GPU Accelerated Compositing". Goto chrome flags and turn on "GPU Accelerated Compositing" and then restart Chrome.

I started off with one of Paul Hayes early experiments which later progressed into his animated cube demo.

Here is what I came up with.

Screenshots:

This is what I did:

Step 1: Create the 3d space

Wrap two divs round the elements to appear in 3D :

<div id="perspective">
  
   <div id="rotator">
  
      <!--original HTML in here-->
  
   </div>
  
</div>

Set the following CSS:

.perspective { -webkit-perspective: 2400; }
.three-d { -webkit-transform-style: preserve-3d; }

Step 2: Setting translateZ

Set translateZ for each item to appear 3D:

-webkit-transform: translateZ(3em);

In my example I set it for the following items:

h1,
.item,
.twitter-bird.sign,
.vcard{
   -webkit-transform: translateZ(3em); 
}

In this case each z-index will be represented by 3ems.

Step 3: Making it move

Define the animation :

#rotator {
   -webkit-animation-name: rotate;
   -webkit-animation-duration: 15s; 
   -webkit-animation-iteration-count: infinite;
}

And then specify the steps of the animation:

@-webkit-keyframes rotate {
    0% {
       -webkit-transform:rotateY(0deg); 
   }
   5% {
      -webkit-transform:rotateY(0deg);
   }
   30% {
      -webkit-transform:rotateY(-40deg);
   }
   50% {
      -webkit-transform:rotateY(85deg);
   }
   55% {
      -webkit-transform:rotateY(85deg);
   }
   90% {
      -webkit-transform:rotateY(0deg);
   } 
}

Step 4 .. Perspective

To give a zoom effect I created a second animation:

#perspective { 
   -webkit-animation-name: perspective;
   -webkit-animation-duration: 15s;
   -webkit-animation-iteration-count: infinite;
 }

@-webkit-keyframes perspective {
   0% {
      -webkit-perspective: 2400;
   }
   5% {
      -webkit-perspective:2400;
   }
   30% {
      -webkit-perspective:650;
   }
   50% {
      -webkit-perspective:2000;
   }
   55% {
      -webkit-perspective:2000;
   }
   70% {
      -webkit-perspective: 2400;
   }  
}

final demo

That's what I've done so far. Comments and modifications welcomed.

Happy New Year

Building on the Web

2011-02-11T00:00:00Z

Foundations

When building a house the foundations are fundamental to it's structural integrity. Without good strong foundations the house is weak and liable to fall over at any moment.

Things on the web also have foundations in the form of HTML and URIs. JavaScript can then be layered on top to improve the experience. It's called progressive enhancement and people seem to be forgetting about it these days.

It's pretty simple, build your HTML and CSS first and then override the default behaviours with JavaScript. This will ensure you are building on solid foundations.

When generating HTML on the server, you can easily re-use it with JavaScript. Its far better than generating the HTML in the browser (with JavaScript) and either ignoring Search engines or having to duplicate your logic on the server for SEO, accessibility and things like RSS feeds.

Here are some rather sweeping statements:

1. JavaScript should NEVER be used to process data in the browser.

2. JavaScript should rarely be used in the browser to generate html (sharing code with server-side JavaScript is acceptable).

I did warn you they were rather sweeping.

I've heard it said that if you want to provide an app/flash like experience you need to use JavaScript to render your pages: You need to build single page JavaScript apps.

history.pushState() tells us otherwise. You can read about it here.

Basically it makes it possible for what we now call single page web apps to exist across multiple pages while still providing nice page transitions (no page refresh).

history.pushState() - A Fallback

History.pushState is all well and good but it's only available in WebKit and Firefox(4) at the moment. Maybe that is why people are seeing hashbangs as an alternative solution. Personally I would rather fallback to a fragment identifier (#) only in situations where history.pushState is not available.

There would need to be a bit of JavaScript at the top of each page redirecting users to the appropriate fragment identifier in browsers that do not support pushState.

So when pushState is not available:

https://simonmcmanus.com/page.html

might redirect to :

https://simonmcmanus.com#page.html

which would then go and fetch the contents from

https://simonmcmanus.com/page.html

If a page is loaded with the fragment identifier in a browser that supports pushState the hash should be removed and pushState used.

Summary

When you require JavaScript for templating and data processing you are on a very slippery slope to writing JavaScript applications.

We have for a long time been able to obfuscate our data with technologies like Flash, I for one have avoided these technologies because I believe that when we publish data properly on the web it becomes more re-usable, findable, accessible and actually has far greater potential.

By all means use JavaScript, but please don't rely on it.

Cross Browser CSS3 Gradient

2011-04-05T00:00:00Z

Publishing this here for my own convenience.

background: #FF8D2C; /\* for non-css3 browsers \*/
  
/\* For WebKit (Safari, Google Chrome etc) \*/
  
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#FF8D2C));
  
/\* For Mozilla/Gecko (Firefox etc) \*/
  
background: -moz-linear-gradient(top, #FFFFFF, #FF8D2C);
  
/\* For Internet Explorer 5.5 - 7 \*/
  
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#FF8D2C);
  
/\* For Internet Explorer 8 \*/
  
\-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#FF8D2C)";

Sizlate

2011-11-22T00:00:00Z

Over the past year I have been experimenting with Node.js. Its been a pretty interesting journey and I have learned a great deal.

One of my more interesting experiments has been Sizlate.

On projects at work I often find myself doing things like this:

domNode.find('div.class').html('<b>INSERT SOME STUFF HERE</b>');

It's a really powerful way to populate HTML. What I really like is that there is no need to add any crazy syntax into my templates. Templates are just valid HTML and the point of insertion is specified by the jQuery selector.

From the developers point of view this is really simple, it does however introduce problems when Javascript is not turned on. I found myself wondering how this technique might be transferred onto the server.

After some experimentation I came up with Sizlate. A HTML templating engine for Express.js.

Its pretty easy to get jQuery running on Node.js but I decided that jQuery wasn't a good fit for my use case. Sizzle is the selector engine used by jQuery, I decided to investigate using Sizzle to provide the selector functionality. It turned out that this works quite nicely using the JSDOM project.

To use Sizlate you simple need to register it as your templating engine:

var sizlate = require('sizlate'); 
app.register('.html', sizlate);

And then just call res.render as you would normally with Express:

res.render('template.html',  { selectors: { 'a': 'hi there' } });

That's the most basic example. On github I have provided an example of passing sizlate an object allowing more complex data structures to be used. There is also an example using partials.

At the moment Sizlate only works on the serverside but it should be quite easy to get it working in the browser.

Feel free to have a play and let me know if you have any feedback.

Sizlate is available as a NPM package and can be installed using the command:


NPM install sizlate

For more details please read the readme on github.com.

Learning from Single Page Web Applications

2012-01-05T00:00:00Z

I've spent the last three years working on single page applications of various shapes and sizes. I don't like em, this post isn't about why but I will just say I like data to be exposed at the lowest level (HTTP) and not require Javascript to turn it into something useful. All that being said I've been lucky enough to work with some clever folks and the end results have all been very interesting and pushed boundaries in their own way.

At Full Frontal I enjoyed listening to Nicholas Zakas talking about Scalable Javascript Application Architecture. In many ways he described the architecture we used for the Volkswagen Configurator. Earlier in the day Phil Hawksworth had been talking about Excessive Enhancement.

It struck me that while most front end MVC frameworks make it easy to build Javascript applications, making them work as web applications (without Javascript) becomes much more difficult. This is largely due to the fact that you define and build your application, templates/page structure using the browser's Javascript interpreter.

I'm of the view that if you architect something properly you can get the same full experience provided by Javascript applications but still have a reliable fallback for those who do not have Javascript enabled. That is what I call a proper web application.

In the back of my mind I've been thinking about Charlie Robbins excellent post: Scaling Isomorphic Javascript Code which talks elegantly about why MVC might not be the best pattern in an environment where you can execute Javascript on the server. He suggests the Resource-View-Presenter pattern.

It seemed that the way we currently split our frameworks between front and back end reduces reuse of configuration/code and actually encourages duplication.

I wanted to try defining all of these things on the server, so they could be consumed on the server and client.

As soon as the talk finished I found myself writing code. This blog post talks about what I have been building and why.

Sharing URLs between client and server

Allow me to deviate for a moment.

On large applications it's common practice to split the code and teams between front and back end developers. This often results in duplication and unnecessary bugs. A common example being maintaining URLs in two places. In the browser we might a have a URLs object:

namespace.urls = {
    login: '/login',  
    user: '/user/:username',
    ....
}

And then on the server the same URLs would be defined possibly using a different syntax. Changing one does not change the other, and with split teams this can result in unnecessary bugs.

With Node.js it's particularly easy to share exactly the same URL object on the client and server. If you ensure your HTML links are populated from the same URL object your application will continue to function when URLs change.

This is what I've been doing in some of my Node apps:

(function(exports){
      exports.HOME = '/';
    exports.LOGIN = '/login';
    exports.USERS = '/users';
    exports.USER = '/users/:user';
    // also add URL functions here that can be shared between client and server.
    exports.build = function(str, tokens) {
        for(token in tokens){
            str = str.replace(':'+token, tokens\[token\]);
        }
        return str;
    };
})(typeof exports === 'undefined' ? namespace.urls={} : exports);

That allows it to be used as a Node module using require('./urls.js') and when served to the browser the URLs are available at namespace.urls.

I've been using Express.js, the parameter sytax seems to work nicely with Levi routes on the front end.

This seems like common sense. It's a fine example of DRY. Define as much as possible in server-side JS and then allow it to be consumed by the client-side JS reusing as much logic as possible.

Reusable modules

TiddlyWiki has the concept of plugins which are essentially just a chunk of HTML/CSS/JS relevant to a particular piece of functionality which could be added to HTML using a special syntax:

<<pluginName>>

On the Volkswagen Configurator we also have the concept of UI's which were reusable chunks of HTML/CSS/JS which could be appended into any DOM node.

Both are essentially variants of the Module Pattern with added support for HTML and CSS as part of the module. Both methods work really nicely just so long as you've got Javascript turned on.

I started to build a simple Node.js app which could parse a modules folder and serve the resources at appropriate URLs. See the following folder structure:

Generated the following URLs:

/contact.css
/contact.html
/contact.js
/content.css
/content.html
/content.js
/flickr.css
/flickr.html
/flickr.js

You will notice there is an app.js file in the flickr folder which contains the server-side JS required by the module. Later this will provide a getData method to asynchronously generate a templating object which can populate the HTML.

Define your views on the server

In browserland it's really easy to mess around with the DOM. You can completely transform a page, especially when you start appending modules of HTML/CSS/JS to DOM nodes. The problem comes when you want to show the same view to something that doesn't understand Javascript, an RSS feed or search engine for example.

I decided to create a view specification which could be read by the server and also served to the browser. Doing so should make it really easy to render the exact same HTML with or without Javascript enabled. Using Sizlate I started with this (it has since changed):

var views = [{
    url: '/user/:user'  
    view: 'userpage',
    modules: [
        'photos',
        'login',
        'timeline'
    ]
 }];

In the following example I have left out the JS and CSS files. The view is just a folder containing a HTML file of the same name and an optional app.js (as with the modules). It assumes the view HTML file contains a tag with a id corresponding to each of the modules specified for the view.

I like this simple approach but in order for it to scale I may soon need to start using HTML data attributes instead of ids. This is what the folder structure looked like:

project/views/userpage/userpage.html (the view HTML file) contains:

<html>
<body>
    <nav>...</nav>
    <div id="photos" />
    <div id="login" />
    <div id="timeline" />
</body>
</html>

The end result would look something like this:

<html>
<body>
    <nav>...</nav>
    <div id="photos">
        .. contents of /modules/photos/photos.html appended in here
    </div>
    <div id="login">
        .. contents of /modules/login/login.html appended in here
    </div>
    <div id="timeline">
        .. contents of /modules/timeline/timeline.html appended in here
    </div>
</body>
</html>

Concatenation vs Caching

At this stage I was able to build a sample app with my re-usable modules and a view. I thought it would be useful to concatenate all the JS and CSS files together for each view. It turns out I was wrong.

In a situation where you're reusing modules across multiple views concatinating per view makes no sense because you end up serving the same CSS across multiple URLs. The CSS/JS will be cached per view, not per module.

I decided it was actually better to use the URLs generated for the CSS/JS by the modules so they can be cached at the most granular level. Both methods will be possible. Currently CSS modules are served inline with the module HTML (not the document HEAD). There will be some work to ensure that all CSS LINK tags are moved to the document HEAD before the view is rendered. JSDOM should make that quite easy.

History API

With views and modules defined on the server I've started to put together a front end framework which can consume the same application specification and make the whole experience a bit more pleasant. I'm currently experimenting with generating popstate listeners from the specification which can then fire off the default/custom transitions between views.

Whats going on here?

Essentially I have started building a framework for mixing up reusable modules of HTML/CSS/JS in ways usually associated with Javascript applications but with progressive enhancement as one of its core values.

The functionality described above will almost certainly change. What I have built so far is a simple proof of concept to test the best way to define views in this way using Sizlate.

At the moment I'm working on a sample app pulling in data from Flickr to demonstrate how it might all fit together in the real world. Its pretty messy and requires lots of work but you can see the code here.

I thought it was worth blogging about my approach just to get some feedback. Please do let me know what you think. All idea's, contributions, criticisms welcomed.

I'm going to be talking about Sizlate at the London Node user group on the 25th January at the Forward Offices in Camden, London. Please register here if you would like to attend.

HTTP requests with Node.js

2012-04-11T00:00:00Z

I couldn't find this code anywhere on the internets yesterday, posting here for my own convenience.

 
```js
var options = {
  
   host: 'api.twitter.com',
  
   port: 80,
  
   path: '/path',
  
   method: 'GET',
  
   encoding: 'utf8'
  
 };
  
  
  
 http.get({ host: options.host, path: options.path }, function(res2){
  
	var data = [];
  
	res2.on('data', function(chunk) { 
  
		data.push(chunk); 
  
	});
  
  
  
	res2.on('end', function() { // wait for the request to finish
  
		res.json(data.join('')); 
  
	})
  
});

Sublime 3 build system to run NPM Test

2014-02-19T00:00:00Z

In Sublime 3, go to `tools > build system > new build system` and paste the below into the file:

{  
 "working_dir": "${project_path:${folder:${file_path}}}",  
 "cmd": ["npm", "test"]  
}

Now you will have a build system that will run the NPM test command in your current project directory.

DotJS Ltd - One Year Old

2014-04-08T00:00:00Z

One year ago today I formed my company DotJS Ltd offering Node.js consultancy services to London and beyond.

It's been a bloody great year and I just wanted to say thank you to everyone that has helped me on my way.

Thank you!

EnhanceConf line-up

2016-01-26T00:00:00Z

Over the last 6 months, with the help of some trusted advisors, I’ve been putting together the line-up for EnhanceConf.

The whole event is dedicated to progressive enhancement, but what does that even mean in 2016? Well, that’s the point of EnhanceConf. We get to spend the 4th of March in The Great Room figuring it out.

We are going to start the day thinking about why we do progressive enhancement. Nat Buckley will look at many of the assumptions we make in modern web development. Anna Debenham will then look at some of the unusual devices people use to interact with our sites/apps. Stefan Tilkov will provide an architect's perspective.

In the second section, we are going to look at some real world examples. We’ve got Ola Gasidlo from Styla/Hoodie and Oliver Joseph Ash from the Guardian talking about their experiences making things work offline. Forbes Lindesay will be talking about building apps that can render on the server and in the browser.

After lunch, we are going to think a bit more about design and UX. Does progressive enhancement constrain design? Phil Hawksworth and Stephen Waller will debate. Jen Simmons will explain why 2016 will be the year that web layouts change and how to use these new techniques as an enhancement. Adam Silver will talk about embracing simplicity.

In the final section, we are going to look to the future. How can we build interfaces given how little we know about the people and devices using them? Robin Christopherson will be talking about inclusive design. Stephanie Morillo will talk about copy and what to think about when writing it. Aaron Gustafson will round off the event by talking about building for devices that don’t exist yet.

After each section, we are going to have 20 minutes of Q&A run by Jeremy Keith.

As if that wasn't enough, the Planning Adaptive Interfaces workshop provides a unique opportunity to get training from Aaron Gustafson while he's in London. We are giving a limited number of copies of Aaron’s e-book Adaptive Web Design with combined conference and workshop tickets.

Reserve your seat

EnhanceConf Scholarship

2016-02-14T00:00:00Z

One of the big motivations behind EnhanceConf was education. Conferences are a great place to learn but the associated costs often make them difficult for many to attend. In the spirit of progressive enhancement, we want to make EnhanceConf available to the widest possible audience.

We have allocated a number of scholarship tickets for people who would like to attend but cannot pay for a ticket.

How to Apply

Send a short email to info@enhanceconf.com with a title of EnhanceConf Scholarship.

In your email please include:

Who are you?
What do you do?
Why would you like the scholarship?

Who should apply:

The scholarships are available to anyone not normally able to attend a conference. If that might be you (even if you're not in one of the groups below) then please apply.

Some of the groups we are especially keen to support include:

Ethnic minorities
Women
LGBTQIA+
Disabled people
Charity workers
Education / students
Open source projects
Industry newcomers

If you have any questions, just send an email to info@enhanceconf.com

**Details: **

All emails will be treated in the strictest confidence, we will not announce who the scholarships go to but you’re welcome to say so yourself.

Successful applicants will get a standard conference ticket.

We are only able to cover the cost of the conference ticket so please consider your travel costs before applying.

Speclate

2016-08-13T00:00:00Z

The London Node User group website is a static site hosted on github pages, it renders at build time, in the browser and works offline using Speclate.

The idea behind Speclate is you have a single file (a spec) which defines how your routes, pages and components fit together. A spec can be used to generate a static site and lots more too. With the help of speclate-router we generate a router which swaps out the appropriate HTML elements to transition nicely between pages.

Let's look at a simple example:

module.exports = {  
     '/': {  
         page: 'home',  
         selectors: {  
             title: 'Home',  
             'a.home': {  
                 className: 'active'  
             }  
         }  
     },  
     '/contact.html': {  
         page: 'contact',  
         selectors: {  
             title: 'Contact',  
             'a.contact': {  
                 className: 'active'  
             }  
        }  
     }  
};

This spec will produce index.html and contact.html based on the contents of /pages/home/home.html and /pages/contact/contact.html and the values in the selectors object.

At the moment Speclate relies on a couple of conventions. /pages/layout.html needs to contain an element with an id of "container"for the pages to be appended to. This will move to config eventually.

I've created a simple example app. You can see the demo running on Netlify, and get the source code on GitHub. You can also read more about the spec format in the speclate readme.

Rendering

Underneath the hood Speclate uses Sizlate which makes extensive use of Sizzle, the selector engine from jQuery. On the server, Cheerio provides a fast DOM implementation for generating the markup.

Rendering can be broken down into three steps. Firstly we replace the main page (using #container), then we apply the page spec, this will apply selectors and components to the page and lastly we apply the global selectors to the markup. This allows us to effect elements in the main layout such as the page title.

In the example there are three commands in the package.json to generate the site:

"scripts": {
    "markup": "speclate",
    "client": "browserify ./client/router.js > ./client/router-compiled.js",
    "build": "npm run client && npm run markup"
}

'npm run markup' will generate a functional HTML site. 'npm run client' uses browserify to generate the client-side router and 'npm run build' generates the whole site by running both commands.

Offline

Currently, the LNUG website works offline using an AppCache.manifest file. That file is generated from the spec like so:

speclate.site.appCache(spec, [  
'/css.css',  
'/images/lnug-logo.svg'  
])

We use appCache Nanny to handle updates but the experience is still not great. The latest releases of Speclate now use the fetch API so it opens up lots of possibilities with Service Workers.

Blog Migration

2019-07-04T00:00:00Z

I'm in the process of moving this blog from Wordpress.com over to simonmcmanus.com hosted on netlify.com.

Its a work in progress, I've disabled all tagging functionality while I port the content over. Please bare with me if you expereince any problems.

Thanks

Speclate@19

2019-08-27T00:00:00Z

I've made some big changes to speclate and sizlate recently. The API stays the same, but under the hood things are much leaner.

No more sizzle

Previously sizlate required sizzle to operate in the browser, this meant using jQuery or something similar. With support for querySelectorAll() being so good we can now do all our dom selection/manipulation with just speclate. At build time speclate still uses cheerio to provide the dom functions it needs to render the pages and components.

No more Page.js

Page.js helped me get speclate-router up and running quickly, at that time, just running speclate in the client seemed a long way off.

Speclate-router will be deprecated

Version 9 will be the last standalone version of speclate-router. From @19, Speclate includes a dramatically similified router, which can be included like so:

var router = require('speclate/router')

The router will behave exactly as it did before. Just with a lot less code. When the router is loaded it looks for any links on the page that match the routes specified in the spec. When it finds one, it binds to the link click so speclate can handle swapping out the pages with the appropriate transitions.

Smarter Service workers

Previously the spec was broken up to the relevant pieces at build time, but the generated service worker javascript file would still pull in a full copy of the spec, effectively meaning that each user would download the spec twice.

This has now changed so that speciate-cli generates a minimal version of the spec, effectively just containing a list of the pages and components that are used by that page, so that they can be made available offline.

The changes described above are introduced in versions:

speclate@19.x.x
speclate-service-worker@3.x.x

Local development on npm packages

2019-09-10T00:00:00Z

When you run the npm install command, npm looks at the package.json file in the root of the current project and fetches the appropriate published version of each package from the public NPM registry.

When we develop locally we want to ensure we can see the changes In our application as quickly as possible, and don’t want to have to npm publish and then npm install for each change.

We can do this using npm link. In order to do this we need to have both projects checked out on our local machine.

First of all we need to tell the dependancies that we are going to link it. So we go into the package we want to work on (after a git clone) and type npm link

cd shared

npm link

cd ../

This will tell NPM that we will be linking the package into another package shortly.

Then we need to goto the directory that will be consuming the package and type:


npm link [PACKAGE-NAME]

[PACKAGE-NAME] should be replaced with the name of the package you wish to link into the current project.

Now the package should behave as if it has been installed via an npm i.

There are a number of tools which can easily tell you which packages you have linked for a given project, and example is:

https://www.npmjs.com/package/npm-link-check

For more info, please see the docs:

https://docs.npmjs.com/cli/link

Wicked Elements

2019-12-03T00:00:00Z

Custom Elements give us the ability to create custom html tags that you can use in your markup like so:

<word-count>

customElements.define('word-count', WordCount, { extends: 'p' });

But to use the above tag on a page the browser still needs to run some Javascript before it can render the custom element. The browser also needs to support custom elements to render anything at all.

So the Progressive Enhancement story isn't great, and its for this reason I've often avoided custom elements.

With Wicked Elements you can bind the component behaviour using css selectors. As we are not using the tag name to select which elements on the page to apply the behaviour to, we can send standard html tags in the initial request and the client side javascript just enhances them with interactivity afterwards.

So our component gets sent to the browser like so:

<p is="word-count">12</p>

In this case using the is attribute selector seems to work really nicely:

wickedElements.define('[is=word-count]', ...)

This means we can send markup that works for the lowest possible tech (a

tag). There is no hydration or anything other re-rendering when the browser js kicks in. The browser javascript just makes the existing elements interactive. Kinda how progressive enhancement is meant to work.

Wicked elements isn't the same as custom elements, but does provide a similar API (except for how you select the elements). The thing I like about Wicked elements is that it doesn't make assuptions about how the markup is rendered, it just enhances the markup that has already been rendered.

I think its actually regular elements that adds the ability to bind behaviour with a css selector. Wicked elements combines a couple of extra modules to make things a bit easier.

I've been playing with it alongside Speclate which also uses CSS selectors so there are some very nice parallels, but that's a whole post in its own right. :)

Engineering Principles

2021-05-08T00:00:00Z

Over the last year, I've been referring to my engineering principles quite regularly. I thought it would be worth writing them down here.

Define the Problem first

To identify a good solution, you must first be clear about the problem. Working on a solution without a problem can introduce complexity with little or no value. For best results, start with the business/user problems.

Hypothesis-driven development

By having a clearly defined problem statement, we can validate possible solutions. By working in small increments, we can validate our idea early to avoid wasted effort. (Fail fast)

Keep it simple

Work in small increments, Take the most minor, most straightforward step possible so that you can learn something before taking the next step. What is the smallest step/s we can take to validate this hypothesis?

Why complex systems fail

Tight Feedback Loops

Work closely with designers, optimise for tight feedback loops and short iteration cycles. The sooner you can get real users testing your solutions, the better.

Understand this happens at multiple levels, and you have multiple loops in play at any time. Keep them tight and fast.

Justify complexity

As engineers, we trade in complexity every day. It's not always possible to avoid complexity entirely. We can minimise it by insisting any complexity introduced has to demonstrate it will add more user/business value, keeping unnecessary tech/requirements away from your code. Be boring.

Remove assumptions

Assumptions hide complexity - The best way to remove assumptions is to break a task down into smaller delivery units and make sure you have clear acceptance criteria for them. Keep breaking it down till there are no assumptions of concern.

Embrace the unknown

While this might seem at odds with removing assumptions, it's closely connected. By Acknowledging what we don't know, we remove assumptions from the process. We can then dedicate time to understanding and solving those problems in isolation.

Last responsible moment

Technology changes at a relentless pace, be it the external landscape or your internal stack. On big projects, it's often tempting to do some work up front to figure out the best solution. In reality, it's better done as close to the actual work to ensure the solutions are relevant.

Integrate continuously

To operate at scale, it's often necessary to separate concerns and have clear boundaries so people work independently. The risk is the pieces built-in isolation won't work in unison. You can mitigate this risk by always combining the different parts as often as possible.

Continuous improvement

As engineers, we never stop learning, which means there is always room for improvement. Actively seek it out and challenging assumptions around the status quo. It's vital that engineers feel empowered to bring about change.

I will try to keep this list up to date. Did I miss anything obvious? What are your engineering principles?

Please let me know on Twitter.

@simonmcmanus

Recursive selectors in Sizlate

2022-05-14T00:00:00Z

Previously nested selectors in sizlate were limited to one level and didn’t provide all the functionality available to top level selector.

In sizlate@4.1.0 nested selectors now work exactly the same as top level selectors and there is no limit on nesting depths.

What does this look like:

const selectors = {
  "ul#list-two": {
    selectors: {
      "li.welcome": {
        class: "highlight",
        selectors: {
          "span.name": "Simon"
        }
      }
    }
  }
};

Transforms this HTML:

<ul>
    <li>list one</li>
</ul>

<ul id="list-two">
    <li>list two</li>
    <li class="welcome">
      Hello <span class="name">John</span>
    </li>
</ul>

Into this HTML:

<ul>
    <li>list one</li>
</ul>

<ul id="list-two">
    <li>list two</li>
    <li class="welcome highlight">
      Hello <span class="name">Simon</span>
    </li>
</ul>

I've create an example on CodeSandbox where you can try it out and easily fork the code.

This was only a minor release because it just fixes issues and doesn't change the interface. In a future (major) release I will attempt to remove the need for the word selectors so much by making the default object behaviour be selectors, if that happens attributes would need to be explictly declared in the way selectors are in the example above.

This came up when I was porting simonmcmanus.com over to using eleventy with sizlate for the templating, it makes sizlate much more capable of handling complex templating requirements.

Eleventy Layouts with Sizlate

2022-06-11T00:00:00Z

In this post I'm going to describe the different ways I was able to use sizlate query selectors in eleventy.

I created a very small wrapper called eleventy-sizlate. I mainly created this package to migrate this blog over to eleventy but I still find Sizlate my preferred method for manipulating html.

This was my first time using eleventy so if you can see any APIs missing or other improvements please let me know.

Example 1 - A Simple Layout

First thing to do is create a layout file, this is the file which supplies the html file and selectors for the outer layout. In the below example I've inlined everything to make it easier to read:


////_includes/layouts/layout.sizlate.11ty.js
const eleventySizlate = require('eleventy-sizlate')
const template = `
<html>
    <title></title>
    <body>
        <h1></h1>
        <div id="container"></div>
        <nav>
            <a href="/example-1/">example 1</a>
            <a href="/example-2/">example 2</a>
            <a href="/example-3/">example 3</a>
            <a href="/example-4/">example 4</a>
        </nav>
    </body>
</html>`

const mappers = {} // we will use this in example 3.

class Sizlate {
    data = {
        template,
    };

    render(data) {
        const layoutSelectors = {
            'h1': data.title,
            'title': data.title,
            '#container': data.content,
        }
        return eleventySizlate.render(data, layoutSelectors, mappers)
    }
}

module.exports = Sizlate;

Once we have the basic template, we can consume it from another file in eleventy like so:

---
title: Simple layout
layout: layouts/layout.sizlate.11ty.js
---
This example shows how to use a simple layout with sizlate, it will wrap this markdown file in the layout and update the titles.

Which would produce the following output:


<html>
    <title>Simple layout</title>
    <body>
        <h1>Simple layout</h1>
        <div id="container">
            <p>This example shows how to use a simple layout with sizlate, it will wrap this markdown file in the layout and update the titles.</p>
        </div>
        <nav>
            <a href="/example-1/">example 1</a>
            <a href="/example-2/">example 2</a>
            <a href="/example-3/">example 3</a>
            <a href="/example-4/">example 4</a>
        </nav>
    </body>
</html>

Example 2 - Using sizlate object in layouts

In the front matter data you can also specify sizlate selectors to manipulate the html, in this example we add a testPage class to the html tag:

---
title: Test page
layout: layouts/layout.sizlate.11ty.js
sizlate: { 'html': {
    className: 'testPage'
}}

---
* list item 1 
* list item 2

Example 3 - Mapper Functions

Sometimes static selectors like the above don't quite cut it, you might need to generate selectors based off of data. This is where we can use mapping functions.

Let's say we have an array of tags in the template data and we want to transform that into a list. With sizlate static selectors we saw eariler we would just add it to the sizlate object in the front matter like so:

---
layout: layouts/layout.sizlate.11ty.js
sizlate: { 'ul': ['bacon', 'cheese']}
---
* list item

But if you want to generate the selectors based on the front matter data you can add a mapper function into layout.sizlate.11ty.js:

const mappers = {
    tags: (data) => 'ul': data.tags
}

That data object that gets passed in should give you access to all the data from that page, layout and collections too.

Once your layout knows about the mapper functions you specify which mappers should be called when this page is rendered.

---
layout: layouts/layout.sizlate.11ty.js
mappers: ["tags"]
tags: ['bacon', 'cheese']
---

* list item

Example 4 - Nested Layouts

Sometimes you need to go a step further and nest your layouts. For a blog post for example you might have a post layout that lives inside the main layout. This is where eleventy provides support for layout chaining. Which you can also do with eleventy-sizlate:


const eleventySizlate = require('eleventy-sizlate')

const fs = require('fs')
const template = `
<h2></h2>
<p> Here is something else that you want to appear on the nested page. </p>
<div id="post"></div>
`

class SizlatePost {
    data = {
        layout: 'layouts/layout.sizlate.11ty.js'
    }

    postSelectors(data) {
        return {
            'h2': data.secondaryTitle,
            '#post': data.content,
        }
    }

    render(data) {
        const selectors = this.postSelectors(data)
        return eleventySizlate.render({ template }, selectors)
    }
}

module.exports = SizlatePost;

and you can use that template exactly the same as you do the other ones:

---
title: Nested layout example
secondaryTitle: 'More detail'
layout: layouts/nested.sizlate.11ty.js
---


This content is wrapped in the nested template and the main layout.

You can see all these examples in action working on netlify and see the code on github

This site is now running on eleventy with sizlate managing the layouts. I've removed the clientside rendering for now, but thats not to say it can't be put back later.

KISS Keep it simple Simon - Complexity killed the cat.

2025-01-18T00:00:00Z

Sharing a talk I presented last year at the Trainline Tech Summit. This talk explores complexity and where it comes from. I discuss some emergent behaviours we see in complex systems and how they can be avoided.

Please excuse the fire alarm and tech issues at the start.

Any questions of feedback please reach out on bluesky

A blog by Simon McManus

IP in Action - Security Event

Simon McManus and Osmosoft

My First (very simple) Facebook Application using the BT Web21c SDK

PHP SDK for Dummies using Windows

Mashing Up BT Web21c Location service with Google Maps

The Google Maps API

Your Location from the BT SDK (Web21c) in Google Maps

PHPWeb21C Certificate Generation (Using the Wizard)

A Simple DHTML Phone

Conference Calling with Web21c PHP SDK

Mock Ajax in Facebook

Getting your friends out of facebook

Is Facebook the answer to everything? - Facebook for the Enterprise?

Get your friends details out of Facebook

Steps for setting up the SDK

Step 1 You need a web server running :

Step 2 - Register for an account at http://sdk.bt.com/

Step 3 - Download the PHP source files: Downloads > PHP

Step 4 - Upload the files to a folder on your web server.

Step 5 - Registering your applications...

Step 6 - Open the common.php file which can be found in the folder:

Step 7 - Ensure that the application name is the same as the one specified when generating your certificate**.**

Step 9 - Running the code. If you have used the default installation settings go to and edit the file:

Enterprise TiddlyWiki

social network aggregator

Those Fuckers at Facebook - Part Two

Those Fuckers at Facebook - trying to hush me up.

Server Side TiddlyWikis

Writing to the Facebook News feed.

The Osmosoft Social Network - Elgg

Hacking for a Wii.

Giving TiddlyWiki a rest......MYSQL to REST in PHP.

Macro template for TiddlyWiki

Output text into a Tiddler without changing the tiddler - macro

Macs in BTC

Enable and use Mod-Rewrite

What have I done?

Where do I go from here?

Facebook Screen Scraping - Get your friends back from Facebook and into TiddlyWiki!

So how does it all work?

Video on Open Social

Latest Database design for ccTiddly

MIME Types in for Server Side TiddlyWikis - Download a HTML file from a link

ccTiddly 2.x - An Overview

Why are we doing this?

Self-service Workspace Creation

Reusable Master Workspaces

User Management

Image and Attachment Support

Import Support

Personal Tiddlers

The Robbie Clutton Problem.

Epoch to TiddlyTime

Del.icio.us Feed Removal

ccTiddly System Tiddler Plugins

Pondering PageRank and TinyURLs

Bullshit 2.0

The Ultimate N95 hack - Helicopters

Life Streaming in ccTiddly

Product Streaming for ccTiddly???

Server Side Search for ccTiddly.

Time for a blog post about twitter.

Google Images in TiddlyWiki...and maybe flickr?

nokia n95 stuff.

Other Applications :

Running a Web Server from the N95

Off the Shelf Integration in Enterprises

Innovating with small pieces loosely joined

Announcing ccTiddly 1.5.1

Rest in Peace Civil Serf

Avoid being Civil Serfed

ccTiddly File Uploading

Free our Bills

How to save your Enterprise some money

Politics, Twitter and Accessibility (politically speaking)

Offline is back Online

Syncing Functionality

New Macros

New Skins

Step 7 - Ensure that the application name is the same as the one specified when generating your certificate.