The Short Version

I made a service to attach information about Twitter users, Install the Met.nu Chrome extension.

The Longer Version

Every wonder why you follow someone on Twitter?

Twitter is a great way to have light connections with people, but in it’s simplicity, it’s easy to loose track of how you know the people you follow.

I wanted a way of attaching additional information to Twitter users to allow me to better understand the people I follow, and, more specifically, why I follow them. I looked around to find a tool/service to facilitate this desire but sadly I couldn’t find anything. That’s when the idea for Met was hatched.

Met is a web service that uses browser extensions, currently Chrome, to overlay information about users, designed to fit into your everyday flow.

Here are some of the views where you can see and attach Met information:

User Profile

View and add annotations in the popup or full page profile.

Tweet Stream

Hovering over a tweet provides you with a Met button to view and create annotations.

Following List

Clearly see users that have been annotated which will appear red, un-annotated users buttons will appear gray.

The future for Met is looking exciting! There are plans to provide a search & browse interface, private & public notes and additional aggregated information about users when you click on the Met buttons. Follow the Met Twitter feed for feature announcements and service updates.

Why not give the Chrome extension a go now? Install the Met.nu Chrome extension.

Solving a problem

Earlier this year (May 2012), I embarked on building a site to allow myself and others to document what they are shipping and getting done. At the time I was working at the BBC on their Weather website and we were releasing so many things I was proud of that I wanted a way to capture and present them.

I felt Dribbble & Github were great tools for design and code, but that there was a void of documenting the top level progress made on projects.

Workdon.com stands to make the work you do look great for future work leads. Workdon also serves as an anti-todo list, realise your productivity, not remind you of your task debt.

I have thus far been working hard to ensure a smooth operation of reading, posting and updating updates. The next phases of development will bring exciting automatic updating of your projects from services like Dribble and Github to keep your portfolio looking fresh without having to lift a finger.

Looking good!

Once you have signed up for an account, you have access to a personalised standalone portfolio site. An example of this can be found at kulor.workdon.com. This portfolio site is theme powered and may have the option to upload your own design (Handlebars templates) or choose from some predefined designs.

Social networking has been added as a complementary feature where you can track other Workdon user’s updates. This is useful for finding out what people are working on. An application this could work well would be to serve as an agile standup alternative.

I’d love to hear your thoughts of Workdon so please add a comment or get in touch directly at james@workdon.com.

Using fonts for icons are great for allowing you to:

• Cater to all screen densities including Retina displays
• Bundle a set of icons together in one font to save space and in turn reduce HTTP requests
• Allows you to change the icon colour on the fly

Icons can be layered if you require multiple colours in your graphic and the general method would be to absolute position individual glyphs inside a wrapper. Take a look at Dan Scotton’s BBC Weather Icons to see how it can be done.

I discovered icomoon.io which lets you import your own graphics and will create all the various font files required to support IE (6+), iOS Devices, Android, Chrome, Firefox, Opera, Safari and others. IcoMoon requires an SVG file format (or font file) for import but this is where I came unstuck as Adobe Fireworks (Mac CS5) doesn’t offer a native SVG export option and that is where my vector images were stored. Luckily with a quick google around I discovered and downloaded an SVG exporter plugin for Fireworks. The command to export is in an unfamiliar menu (Commands > Export > Export SVG) in case, like me, you can’t find it at first.

To get going, head to http://icomoon.io/app/ and use the “Import Icons” feature.

Once you have downloaded and extracted your assets, you will notice handy index.html included which is a really good point of reference to see how to go about implementing the font as an icon. I thought I’d summarise the basic method employed to implement your new font icons with inline comments:

<style>
/* This registers your new custom font (feel free to change the name to something of your own naming) */
@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot');
    src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
        url('fonts/icomoon.svg#icomoon') format('svg'),
        url('fonts/icomoon.woff') format('woff'),
        url('fonts/icomoon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Using the before prepends a 'fake' element to your target element */
.icon:before{
    content: "\22"; /* Your unicode character (icomoon provides this) */
    font-family: 'icomoon'; /* Reference your custom font */
    speak: none; /* Ensure screenreaders skip over what is essentially garbage to them. */
    -webkit-font-smoothing: antialiased; /* Force antialiasing */
    font-style: normal;
    font-weight: normal;
}
</style>
 Your Icon Text

With all this newfound awesomeness, sites that offer SVG downloads like thenounproject.com (where I went to to get the icon for this post) means you can have an elegant way of implementing icons on your sites.

This article has a simple aim to improve the process of developing and deploying node.js web applications. The Continuous Integration folks will refer to what I am covering as an aptly named Automated Deployment. As you explore this guide you will learn:

• How to run a node.js script using Upstart.
• How to manage Jenkins (was Hudson) with Git.
• How to make and use Makefiles.

Lets crack on…

I have detailed an environment scheme below which works well for me. You are free to assign your machine names what you please but following this guide will be easiest if you follow my conventions.

Getting a working node.js app and environment

You will need to have an environment to run your app in. To save on resources I prefer using virtual machines hosted on my localhost. This also means you are not tied to a network in order to develop (great for coding on the train/in a coffee shop).

You can run node.js apps on your localhost but for this article we are just focusing the deployment process to an integration server (int.app).

The correct development flow for a node.js app should be that you test on localhost, then checkin when you are happy with your changes. The checkin will then trigger a build and automatically get built to int.app. We will be in this sweet spot by the end of this article.

Setting up your virtual machines

It is fairly straightforward (and free) to get a Linux virtual machine up and running these days. Following the steps on https://help.ubuntu.com/community/VirtualBox should be a good starting point.
I suggest you set up one machine (int.app) first with a barebones configuration and clone it to create ci.app, changing the hostname (sudo hostname newhostname) and getting a new IP address sudo dhclient on the cloned machine.

Configuring int.app

Our initial development centric dependencies are Git, node.js, Express and NPM.

Login to int.app

ssh int.app

Install Git

apt-get install git git-core

Install node.js

cd /tmp/
git clone https://github.com/joyent/node.git
cd node
./configure
make
make install

Install NPM

apt-get install curl
curl http://npmjs.org/install.sh | sudo sh

Install Express

npm install express

Now you have everything you need to get a node.js app up and running. Let’s create our demo app.

mkdir -p /data/apps/hello_world

Add these contents to /data/apps/hello_world/app.js.

var express = require('express')
  , app = express.createServer()

app.get('/', function(req, res){
  res.send([
      '<h1>Hello World</h1>'
  ].join('\n'));
});

app.listen(3000);
console.log('Express app started on port 3000');

Run your node.js app

node /data/apps/hello_world/app.js

Getting and using the IP address of int.app

SSH into int.app and run:

ifconfig -a

1. Grab the IP address from ‘inet addr’. This should look something like: 192.188.0.23.
2. Add this to your /etc/hosts file on your localhost like: 192.188.0.23 int.app

Testing the app

Now let’s test if everything is running ok. Open up http://int.app:3000/. With any luck you should be seeing the text “Hello World”.

Getting a build process working

We will be using Git as our source control management tool (VCS). Have a read of Joel Spolsky’s distributed VCS post to understand why we are using Git over something like SVN.

Setting up a Git server on ci.app

Git works in a de-centralised way but we need to have a central Git repository that we and other developers can push their changes to and other tools like Jenkins can pull updates from.

On ci.app run:

useradd git
su git
sudo mkdir -p /data/git/hello_world.git
sudo chown git -R /data/git/hello_world.git
cd /data/git/hello_world.git
git --bare init
curl http://utsl.gen.nz/git/post-update > /data/git/hello_world.git/hooks/post-update
exit

On localhost you can now run:

git clone ssh://ci.app/data/git/hello_world.git ~/hello_world
cd hello_world
git remote add origin ssh://git@ci.app/data/git/hello_world.git

Now you have an empty directory on your local machine where you can develop from. Let’s add app.js we made earlier to this repository.

Add these contents to ~/hello_world/app.js

var express = require('express')
  , app = express.createServer()

app.get('/', function(req, res){
  res.send([
      '<h1>Hello World</h1>'
  ].join('\n'));
});

app.listen(3000);
console.log('Express app started on port 3000');

Now lets check it in.

git add --all
git commit -m 'Initial checkin' app.js

Let’s push it to our remote Git server

git push origin master

Moving the app automatically

We are going to use make as a tool to bundle commands. We will use Make to move the application from the Git repository to the /data/apps/hello_world directory.

On localhost, add these contents to ~/hello_world/Makefile

install :
	sudo mkdir -p /data/apps/hello_world
	sudo cp ./app.js /data/apps/hello_world/

Check this file in and push changes:

git add --all
git commit -m 'adding build steps'
git push origin master

Now you could run this command and have the app put in the correct location for you:

make install

Automating the build

Jenkins is a very useful tool in the process of Continuous Integration. At the most basic level Jenkins is a tool to allow you to schedule things to happen based on timings or events such as a code checkin.

Installing Jenkins

Let’s install Jenkins on ci.app.

apt-get install jenkins

Once installed you should be able to load Jenkins in your browser: at http://ci.app:8080/.

Adding a new job to Jenkins

Here you can add a ‘job’ by:

1. Selecting ‘New Job‘.
2. Call the Job name “Hello World”.
3. Select the option ‘Build a free-style software project’.
4. Save

Once created you will be met with a page with a bunch of inputs. We will come back to that in a moment but first we need to add Git support to Jenkins.

Adding Git support to Jenkins

1. Go to http://ci.app:8080/pluginManager/available.
2. Click on the enable Git Plugin checkbox.
3. Click install at the bottom of the page.
4. Return back to your job configuration page (http://ci.app:8080/job/Hello World/configure)
5. Select the Git option under the Source Code Management section.
6. Add this url into the url field: ssh://git@localhost/data/git/hello_world.git
7. Select the Poll SCM checkbox under Build Triggers and enter: * * * * * (This will make Jenkins check every minute for changes to source files.)
8. Save the configuration
9. Click ‘build now’ to check everything is working ok.

As it stands, the Jenkins job is not being all that useful but we will discover it’s power later on.

Deploying your app using Upstart

Node.js scripts need to be run as daemons for hosting websites, which can make the deployment process a bit fiddly. We can use tools like Upstart to run and manage node.js scripts.

Install Upstart

apt-get install upstart

Adding Upstart app configuration

On localhost, add these contents to ~/hello_world/hello_world.conf

#!upstart
description "node.js hello world app server"
author      "James Broad"

start on startup
stop on shutdown

script
    export HOME="/root"

    exec /usr/local/bin/node /data/apps/hello_world/app.js 2>&1 >> /var/log/node.log
end script

We will be putting this file into /etc/event.d/hello_world on int.app later on. Once in that location you can run sudo start hello_world

Continuously deploying your app

Now that Jenkins is set up to keep an eye on our files, we can issue it some commands to deploy and run the app.js application.

Let’s return to localhost and add a deployment step to Makefile. This will copy the files needed to install and run our application.
Add these contents to ~/hello_world/Makefile

app_dir = /data/apps/hello_world
temp_install_dir = /tmp/hello_world
deployment_hostname = int.app

install :
	sudo mkdir -p $(app_dir)
	sudo cp ./app.js $(app_dir)/app.js
	sudo cp ./hello_world.conf /etc/event.d/hello_world

deploy :
	# Get rid of old temp installs
	ssh $(deployment_hostname) sudo rm -rf $(temp_install_dir)
	# Copy files over to remote machine
	rsync -r . $(deployment_hostname):$(temp_install_dir)
	# Install our app to the right location
	ssh $(deployment_hostname) cd $(temp_install_dir)\; make install
	ssh $(deployment_hostname) cd $(temp_install_dir)\; make start_app

start_app :
	sudo start  --no-wait -q hello_world

Check in and push your changes.

git add --all
git commit -m 'adding deployment steps'
git push origin master

Handling environment permissions

On int.app you will NEED to set up your SSH Keys to allow passwordless ssh access and add paswordless sudo rights for the user jenkins so it can carry out tasks that require sudo such as service restarting.

Passwordless SSH access

To set up passwordless SSH access for Jenkins, log into ci.app as the user jenkins ssh jenkins@ci.app. Run and complete the prompts:

ssh-keygen

Copy the output of ~/.ssh/id_dsa.pub or ~/.ssh/id_rsa.pub (depending on what option you chose) to the file ~/.ssh/authorized_keys on int.app.

Now SSH to int.app and add the jenkins user adduser jenkins, this will be needed for when Jenkins is installing stuff onto int.app.

Now we need to log into ci.app as user jenkins to be able to accept the SSH Keys:

ssh jenkins@ci.app
ssh jenkins@int.app
exit
exit

Passwordless sudo rights

For enabling passwordless sudo rights to the jenkins user you will need to run: sudo visudo and append the file with the contents:

# Allow Jenkins to run certain commands as sudo without password
jenkins ALL = NOPASSWD: /bin/mkdir, /bin/rm, /bin/cp, /sbin/start, /sbin/stop

Adding shell script stages to Jenkins

Go to your hello world configuration panel (http://ci.app:8080/job/Hello World) and choose ‘add build step’ under the Build section.

1. Select ‘Execute shell’ and add this line: make deploy.
2. Save the settings.
3. Run a build.

If everything went according to plan you should be able to load http://int.app:3000 and see the text ‘Hello World’.

Verifying deployments

Instead of us having to check the app is running every time a build happens, we can get Jenkins to do that for us by checking a url returns 200 response code.

Lets add a new Freestyle job in Jenkins and call it “Hello World Monitor”. Leave everything blank but click the checkbox for Monitor Site and add the url http://int.app:3000/.

We can now return back to our Hello World job and check the Build other projects checkbox. Then add Hello World Monitor (it will auto-suggest). Save this configuration and run a build.

Finally

If you have made it this far, thanks for reading, hopefully everything went well?

If everything went well, you are in a good place to start adding more Continuous Integration elements such as unit tests, JSLinting and many other automated steps.

There are a number of things I didn’t go into much depth on such as the node.js app itself, there are plenty of articles out there about how to do this. A good resource worth checking out is http://howtonode.org.

Feel free to get in touch if you need any help but be warned I have a busy day job so I may take time to respond.

Image courtesy of Me

After a quick scour around the internet and checking every option in the Gmail preferences it seemed like there was no way of hiding the chat (a feature I don’t use) and invite friend panels on the left bar of the web interface to Google Mail.

My solution was to use a custom CSS rule for Gmail which consists of the following CSS:

.nH.pp.T0 .nH.s,
.nH.pp.T0 .nH.pY
{
    display:none;
}

Minor Issues

Now this is not ideal CSS but it seems Gmail have no id’s or specific hooks to target the panels, so I went with the best specificity I could get to not affect other plugins you may have in the left rail (I also have a calendar panel). The downside to this CSS rule is I am left with some container borders as you can see in this snapshot.

Alternative solution

The alternative approach I could have taken would have been to add some custom JavaScript but I figured out CSS would be the fastest and most reliable way of hiding the panels. I may explore this as the anal side of me is not happy with the stray borders.

What would be nice is if Google allowed us to disable these items in the first place!

Making custom CSS rules work in Chrome

It seems Chrome (my browsing browser of choice) has no built in custom/user CSS functionality so I installed the Personalized Web extension which is nice as you can specify a regex pattern to match a url so I know I am only targeting Gmail using the pattern ^http[s]*://mail.google.com

I have recently released domdash.com an application to help those that have a growing domain portfolio keep on top of their status. This was a personal itch that I needed to scratch with a domain acquisition almost every couple of months and a new project being released almost every quarter, things were getting a little hard to keep atop of.

One of my issues was that I have domains that sit on a mixture of hosts and domain name providers, so there was not one central tool to let me get information about my portfolio.

I paid particular attention to simplicity and usability when creating this application, constantly asking “does this feature add value”? With that mentality I dropped a couple of features which was hard discarding the time spent working on them but worth it for streamlining the end result. I intend on adding or refining features as I feel they fit the purpose of the application.

The most exciting aspect of this project was working with CodeIgniter 2, an ORM system and moving to a dedicated and affordable slice host Linode who are cheaper than the better known Slicehost and seemed to have a pretty good reputation. So far Linode have been great, they have comprehensive documentation on getting applications and services configured on your distribution and this was how easy it was to get up and running:

http://twitter.com/kulor/status/12903252621

just set up an Ubuntu LAMP stack from scratch on my lunch break on linode.com (including signup)

Anyway, I hope you enjoy this application, if you have feedback, feel free to click on the feedback link on domdash.com.

If you are looking for a free solution to slow down 60 frames per second (FPS) AKA 60p footage to get a slow motion effect on your Mac, you can download and install the freeware video de-interlacer JSE Deinterlacer. This will allow you to export your video at a slower framerate like 24FPS through stretching the film to be double length and use the additional frames shot to fill the time, kind of like stretching out  a coiled spring. Fast frame rates are now available from the Canon 7d and 550d cameras with signs that many more cameras follow suit by offering this feature, thus the reason to offer a no-cost option of how to handle the footage.

Step one: Import

Specify the film you wish to process, thats it, use the default values for everything else.

Step Two: Project settings

This is the main part we need to care about. Ensure you have Deinterlace selected from the options and Both fields and Double movie duration checked. Normal height and Adaptive will be selected by default, this is what we want.

Step 3: Output

We specify your desired output video location and set the settings for the movie that is exported. Select the export option and choose Quicktime Movie.

Step 4: Movie Settings

If you are explicitly looking for slowed speed sound select the sound checkbox and your audio channel will be exported, else just unselect this. Click settings to choose more specific output options.

Step 5: Video Settings

Choose MPEG-4 Video as your compression, choose a frame rate of 24 – 30 using keyframes every 24 frames. The other settings are just for how high you want quality to be.

Step 6: Finishing up

Now you can return back to the output screen and select Ok, this will start the conversion process off that could take some time depending on the size of your source video. Once you have converted your video, you can take it into your choice of video editing suites such as iMovie.

I have talked in the past about how to get a fully working time lapse system on a Mac using a webcam and some command line scripting. That was great but could do with some tweaks to get a more elegant solution which I attempted to reach here.

I wanted to get more use out of my digital SLR camera so I set my camera up on a tripod, connected it up to an intervalometer (my mac) and gained a bunch of files that needed to be processed and turned into a movie. I created the following script to turn my images into a movie.

This script will run on any unix like environment with a bash shell and uses ffmpeg so make sure you have it installed on your *nix machine.

1. Download images2movie
2. Change the permissions to allow the script to be executed chmod a+x images2movie
3. Copy file to /usr/bin/ sudo cp images2movie /usr/bin/
4. Run by images2movie <directory> 30

If it all goes well, you should see the following output:

Movie generated: timelapse.mov

Some more work could be done to resize images in advance to ensure that ffmpeg doesn’t choke on the image sizes but I will save that for another time.

I created a terminal theme with a retro look of soft amber tones. I find this really nice to work with and have been using for a couple of months now. Download or fork it on Github.

To use: download the amber.terminal file to your computer, open up Terminal.app, go to the preferences, settings tab, then under the list of themes, click on the settings button and click import, now choose the amber.terminal file.

Shell scripts are a simple way of completing (repetitive) tasks on the command line, much like many programming languages will be used. You will see ~ something — ignore the ‘~’ this is to signify that it is a command entered onto the command line itself.

Writing the code

~ vi helloworld.sh

#!/bin/bash
# My first script
MESSAGE="Hello World!"
echo $MESSAGE

Here we have just entered a really simple example of using variables and returning the value.

Setting the permissions

We need to set permission to allow the script to be executed, this is needed to be done on all unix environments for something to be run

~ chmod +x helloworld.sh

Running the script

~ sh helloworld.sh

Hello World!

Now you should have the response “Hello World!” from running this script.

Going more advanced

Lets explore some of the basic options we have to play with in the shell by example.

Loop test

~ vi looptest.sh

#!/bin/bash
# My first loop
FILETYPES="xml html css js"
for TYPE in $FILETYPES
    do
        echo 'Looking for' $TYPE 'files'
        find . -name '*'$TYPE
    done

Now set the correct permissions and run the script

~ chmod +x looptest.sh
~ sh looptest.sh

Looking for xml files
./somefile.xml
Looking for html files
./somefile.html
Looking for css files
./somefile.css
Looking for js files
./somefile.js

If conditional test

~ vi iftest.sh

#!/bin/bash
# If the file does not exist, make it
FILE='test'
if [ ! -f $FILE ] ; then
    mkdir -p $FILE
fi
ls -las $FILE

Now set the correct permissions and run the script

~ chmod +x iftest.sh
~ sh iftest.sh

Hopefully this is enough to help you on your way to making more use of the powers of Unix…

Further reading

Bash Manual
Useful bash one liner scripts