I built it because I needed it for work — as simple as that. PRDs, statements of work, R&D spikes, client documentation, training materials from video transcriptions. Every feature exists because a real problem demanded it.

Here's what I learned.

1. Own your workspace. Models come and go. The workspace you build around them is yours. The difference between a generic chat UI and a workspace you control is the same difference between Notepad and Vim. Most people don't need that level of control. But if you're trying to push what's possible with AI, it changes everything. Something doesn't work the way you want? You fix it. You don't file a feature request.

2. Tool calling is half the moat. Once your AI can use tools, you'd think you need dozens. You don't. Bash, read, edit and write. Four tools. Mario Zechner proved this with Pi — a minimal coding agent that's competitive with far heavier tools using nothing but those four. MCP is a nice incremental improvement but tool calling itself is the giant leap. The moment your model can read a file, run a command and write the result back — that's when it stops being a chatbot and starts being useful.

3. Prompt engineering is the other half. Tool calling only gets you so far. Your workspace is only as good as the agents you build and the prompts you write. I use Simon Willison's definition of "agent" here — an LLM that iteratively reasons, calls tools, processes results and repeats until the task is done. The quality of that loop depends entirely on how well you set it up.

4. There is NO magic. When I started, tools like Claude Code felt almost magical. After a year of building the same kind of system from the ground up they feel less like magic and more like carefully crafted software doing a lot of clever things under the hood. Clever != Magic. Understanding what's actually going on has made me a better engineer, not just a better user of these tools.

My advice: go one level lower than you think you need to. Not another abstraction on top of an abstraction. Not another AI SDK wrapper. Build the actual thing. Write your own agents. Wire up your own tool execution. Parse your own streaming responses. The best way to understand AI tooling is to build it yourself. That's where the real learning happens.

I open-sourced everything I built — Flemma.

You should root your tablet following the instructions on XDA Forums. I strongly advise you grab the latest RootZenPhone from the official page. I initially bricked the tablet using 1.4.6r, but had success with 1.4.6.8r. Make sure to back up all of your important information as you may have to factory reset in case the rooting fails.

Prerequisites

You will need Ubuntu 14.04 LTS (Trusty). If you are running a different operating system the steps may still work, however you will need to tweak package names.

Android NDK

In order to cross-compile BusyBox, we'll need the Android NDK. Grab whatever is the latest revision (10d at the time of writing) and make sure to pick the correct architecture for your computer. If you are downloading from a terminal, please familiarise yourself with the Terms & Conditions on the NDK page.

cd /tmp
wget http://dl.google.com/android/ndk/android-ndk-r10d-linux-x86_64.bin
chmod a+x android-ndk-*.bin
./android-ndk-*.bin

BusyBox from source

Let's get started by cloning the BusyBox repisitory:

# If you don't have Git installed:
#
#     sudo apt-get install -y git-core

cd /tmp
git clone git://git.busybox.net/busybox.git

We'll need to check out a stable release. At the time of writing, I had success compiling 1.23.0:

cd /tmp/busybox
git checkout 1_23_0

With the Android NDK in place, we need to edit the default configuration file to set the correct paths and flags:

cd /tmp/busybox

# Export a shell variable for easy access to the Android NDK path:
export ANDROID_NDK_ROOT=$( echo -n /tmp/android-ndk-*/ )

# Configure the cross-compiler prefix used by BusyBox:
sed 's!^\(CONFIG_CROSS_COMPILER_PREFIX=\).*!\1"'$ANDROID_NDK_ROOT'toolchains/x86-4.8/prebuilt/linux-x86_64/bin/i686-linux-android-"!' -i configs/android_ndk_defconfig

# Configure the cross-compiler root:
sed 's!^\(CONFIG_SYSROOT=\).*!\1"'$ANDROID_NDK_ROOT'platforms/android-19/arch-x86"!' -i configs/android_ndk_defconfig

# Configure CFLAGS for the Intel Atom:
sed 's!^\(CONFIG_EXTRA_CFLAGS=\).*!\1"-DANDROID -D__ANDROID__ -DSK_RELEASE -march=atom -m32 -ffast-math -mfpmath=sse -ftree-loop-if-convert -fschedule-insns -fsched-pressure -O2"!' -i configs/android_ndk_defconfig

The file we modified needs to be copied so BusyBox can read it:

make android_ndk_defconfig

There are several issues when cross-compiling BusyBox. We need to turn options associated with them off to avoid compilation errors:

# If you don't have ncurses headers installed:
#
#     sudo apt-get install -y libncurses5-dev

make menuconfig

With the graphical menu on-screen, make sure the following options are configured as instructed:

• disable Coreutils ---> touch -> Add support for -h
• enable Login/Password Management Utilities ---> Use internal crypt functions
• disable Linux System Utilities ---> mdev
• enable Linux System Utilities ---> mount
• enable Linux System Utilities ---> umount
• disable Networking Utilities ---> udhcp client (udhcpc)

The default state of those options should be the inverse of what we need them configured at. As you turn an option on, additional ones may present themselves -- make sure to leave those untouched.

Tip: <Esc><Esc> gets you to the previous screen. <Tab> let's you highlight the Exit button.

Exit and save the configuration with the new options.

Patching BusyBox

There are several compilation errors at this time should you attempt to run make.

mount and umount

We are in luck as there is a patch in Tias Guns' repository:

cd /tmp/busybox
wget https://raw.githubusercontent.com/tias/android-busybox-ndk/835af752d00bb025bc8857d92b3af9de7a902cbc/patches/003-mount-umount-fsck-df.patch
patch -N -p1 < 003-mount-umount-fsck-df.patch

GNUisms not available...

We are in luck again as there is a patch in Tias Guns' repository:

cd /tmp/busybox
wget https://raw.githubusercontent.com/tias/android-busybox-ndk/835af752d00bb025bc8857d92b3af9de7a902cbc/patches/012-mempcpy.patch
patch -N -p1 < 012-mempcpy.patch

Let's build

All it should take now is:

make

# Let's verify it all went fine:
#
#     file busybox
#
# The output should be identical to:
#
#     busybox: ELF 32-bit LSB  executable, Intel 80386, version 1 (SYSV), dynamically linked (uses shared libs), stripped

Get BusyBox on the MeMO Pad

Prerequisites

In order to be able to copy the new busybox binary to the tablet, we need to enable USB debugging.

• Open Settings > About > Software Information
• Tap continuously on Build number until you turn Developer mode on
• Re-open Settings > Developer options
• Enable USB debugging

udev rules

Connect the MeMO Pad to your computer. You will get prompted to authorise the connection on the tablet -- accept after reviewing.

You may then discover that you haven't got permissions to access the tablet using adb. To verify the device is recognised:

# If you don't have adb installed:
#
#     sudo apt-get install -y android-tools-adb

adb kill-server
adb devices

If you see lots of question signs under the device name (e.g., ????????), we need to do one last thing -- configure the correct permissions when hot-plugging. With the tablet still connected to the computer:

lsusb

# Review the list of attached devices and locate the ASUS MeMO Pad.
# Copy the string after "ID " and paste it in place of the `$REPLACE_ME` variable below.
# The line should look something like:
#
#     export MEMOPAD_ID="0b05:5507"

export MEMOPAD_ID="$REPLACE_ME"

echo -e '# ASUS MeMO Pad 7 (ME176C):\nSUBSYSTEM=="usb", ATTRS{idVendor}=="'${MEMOPAD_ID%:*}'", ATTRS{idProduct}=="'${MEMOPAD_ID#*:}'", MODE="0664", GROUP="plugdev"' | sudo tee -a /etc/udev/rules.d/60-android.rules

sudo udevadm control --reload-rules
sudo service udev restart

Unplug and plug the MeMO Pad. Verify the question signs have disappeared and the device is recognised correctly.

Push BusyBox to the MeMO Pad

cd /tmp/busybox
adb push ./busybox /sdcard/

The binary is on the tablet now, but it requires executable permissions. Use adb to start a shell:

# On your computer:
adb shell

# You will find yourself logged as a regular user on the MeMO Pad.
# To be able to set executable permissions, you need to gain root access:
su

# Approve the request in SuperSU.

# Copy the binary to a new location where we can make it executable.
#
# NOTE: mv does not work and will report 'Cross-device link' failure, hence we use cp instead:
cp /sdcard/busybox /data/local/busybox-1.23.0

# Modify the binary permissions to make it executable:
chmod 555 /data/local/busybox-1.23.0

exit

# We are now back logged as a regular user on the MeMO Pad
exit

# On your computer let's verify it all went fine:
adb shell /data/local/busybox-1.23.0 | head -n1

# The output should be identical to:
#
#     BusyBox v1.23.0 (2015-01-03 12:55:15 UTC) multi-call binary.

Happy hacking!

I recently decided to give Firefox OS a try and ordered a Flame developer reference phone. This will be an attempt at a blog series capturing my first 30 days of usage. I will do my best to blog as frequently as I can, usually once or twice a week as I get more accustomed to the new platform.

The Experience (or lack thereof)

Going back to the end of August, I was pretty excited to be getting an upgrade from an old and dying Android-based phone to the Flame running Firefox OS, the fresh and exciting OS. My enthusiasm was cooled down fairly quickly once I discovered the OS is still pretty much unfinished and had many bugs. Shortly thereafter a got a Twitter mention saying I should be trailing Firefox OS 2.x as it will offer a much better experience. What did I have to lose, I obviously wasn't happy with the stock 1.3 version?

So one day I got my USB cable, flashed the phone with Firefox OS 2.1 and started over. No apps, no contacts, no accounts... a clean slate.

Bugs, bugs, bugs

I was hoping Firefox OS would be pretty stable after reaching version 2.x when it comes to be basics. Things like making or picking up a phone call surely must be tested with each code change introduced? Automated tests, CI, etc.? I was unpleasantly surprised to find out that this is not the case. The dialer, for example, broke fairly frequently making it impossible to make a phone call. To this day I can't answer incoming calls as well, the slider to pick up does not work. The latter one has persisted across multiple OS updates.

Is it the case that there are automated tests and bugs have been caught and ignored? If so, why are such changes allowed to be accepted to the nightlies [1] before being finished?

Another annoying issue is the low output volume you get when you plug-in earphones. It will just not go any higher than 10-20% no matter what the UI says. As you unplug your earphones the phone then goes into party-mode with the built-in speaker tearing itself at 100%.

Then there is the network time bug. The phone never correctly synchronises its clock with the network. On Android, connected to the same network, resetting the date & time and then syncing from the network always works. On Firefox OS you get a random date, usually within the past 3-4 days, and a random time. Needless to say this wreaks havoc in pretty much all apps, from the Call Log, to Messaging and E-mail. Just as an example, a missed call from 5 minutes ago may be shown several swipes down with calls from yesterday.

The list goes on and the above is just a fraction of the really frustrating ones. The OS feels like an experiment that is largely unfinished.

[1] I get that nightlies are meant for testing, however introducing unfinished changes seems like a bad practise. Firefox recently introduced Electrolysis, a big change to run web content in a separate process from Firefox itself. This was turned off by default and is a good model to follow – if an update is unfinished or breaks things, hide it behind a flag.

Battery

Power consumption on the phone is what you would expect it to be and the battery can last you for a good 24 hours with low to moderate usage. That is by no means great, however at this price range is to be expected.

There is a nasty bug, though, which sometimes prevents the phone from charging. I thought charging would have been handled at the hardware level, however the OS appears to have control over this. A restart usually helps. If you are using a non-standard charger, the phone would sometimes get stuck at the boot screen and begin to vibrate. This doesn't happen every time and a restart usually helps.

Marketplace

If I have to sum it up in one word: poor. Apps are rarely polished and you get wrappers around a website's mobile version. A good example is Soundcloud which is just m.soundcloud.com behind a pretty icon. As you switch away from the app, the music stops. So yeah, no Soundcloud on the background whilst composing your super important e-mails.

Core Applications

In the month that I have been using 2.x Calendar never did work. E-Mail still can't open or forward attachments. Firefox, the built in browser, has gotten somehow worse. I still haven't figured out how to use tabs.

There is a handy 'Usage' app which is supposed to track your mobile data plan usage. For me it rarely works and reports there is no SIM inserted the majority of the time.

For whatever reason you now also get a global 'Search the web' box at the top which is a shortcut to Firefox. It picks up on the app and will change appearance. You would be fooled to think it's actually part of the app itself, but it isn't. I can't remember how many times I've tried to look up contacts in the wrong search box.

Developers, developers, developers

It's a shame the platform is so unappealing. I was not once tempted to fire up Vim and work on an app exclusively for Firefox OS. This is part of the problem the platform has – HTML5 apps are good enough and you don't go the extra mile to add polish for Firefox OS.

The Conclusion

I have made up my mind. It pains me to say I will be going back to Android. Firefox OS is not ready for the end-user and it's not appealing to me as a developer. It has it's place in emerging markets, but once you compare it to anything else it doesn't stand a chance.

The logical question to ask is then can you fix the ugly and the broken? You most probably can but it will take discipline.

• Don't ship broken code globally, never, not even in nightlies. If you are asking developers to create apps for your platform, they must have confidence in how reliable it is.
• If you introduced an issue by accident, fix it as quickly as you can. Bugzilla is filled with cases of Firefox browser bugs being open for 5+ years. Is history going to repeat itself and will Firefox OS suffer from the same fate?
• Polish, polish, polish. When I pick up a phone with Firefox OS, I want it to look finished. I don't want my notifications screen to be filled with double-escaped HTML messages. Yes, '<span>'s actually appear in notifications and that issue hasn't been fixed in weeks.

I will keep my Flame around and will likely come back to revisit Firefox OS in a couple of months. Perhaps then it will be a more mature platform with less teething problems.

I recently decided to give Firefox OS a try and ordered a Flame developer reference phone. This will be an attempt at a blog series capturing my first 30 days of usage. I will do my best to blog as frequently as I can, usually once or twice a week as I get more accustomed to the new platform.

The Bad & Ugly

In the last week of usage, there have been more bad things than good. This post may come across as negative, but in reality I am satisfied with the phone and OS at its early stage of development.

Multitasking

You can switch between apps by holding the 'Home' button. The phone will vibrate (cannot be turned off) before displaying apps as 'cards'.

From this interface you can close an app either by tapping on the (x) icon or by flicking the thumbnail from the bottom. Both methods will work only half the time. When it doesn't work, you open an app from the list at random instead.

E-Mail

Let's start with the most frequently used app... or what used to be the most frequently used app. E-mail is bad at mail. I have noticed a lot of issues around scrolling the contents of an e-mail. It gets so bad, you can't read your messages after the first paragraph. I still haven't figured out if attachments are supported at all, there is no way to open them.

Notifications. They pile up on your lock screen if you have multiple accounts and disappear at once when you open the app. They will disappear even if you didn't look at the account with new messages in it. What is particularly annoying is after you receive a new notification, if you archive or delete the message on your computer, the notification on the phone will persist. So, yeah...

Call log

This should be called something else as it doesn't do what the title suggests. Notifications for missed calls show up on the lock screen, but then are nowhere to be found in the call log. I have had numerous follow-ups from people asking me why I didn't return their call... what call?! Outgoing calls are rarely logged as well.

Browser

Firefox, of course. If you are looking for customisations, you won't find them, though:

You will receive mobile-optimised versions of websites more often than not. In Firefox, unlike Chrome for Android, you cannot spoof the user-agent to request a desktop version instead. You are stuck with whatever the author has chosen to display for mobile devices.

Sharing a link is pre-configured to open up E-mail as if other options do not exist. In doing so, the E-mail app will sometimes get very confused and report 'you are not set up to receive e-mail'.

On heavier pages Firefox is slow. As you are trying to zoom in a region, the browser will decide to do a reflow. You end up on a random region instead. Opening links, scrolling, etc. generally feels clunky instead of smooth.

Then there's the overly sensitive issue which makes you navigate to pages just by flicking through an article.

Twitter

This app is basically Twitter for Mobile. You'll get the same experience if you spoof your Chrome user-agent to a mobile device or visit twitter.com in Safari, etc. The only difference is the app supports web activities:

We’ve also implemented support for a feature unique to Firefox OS: Web Activities. This lets you tweet photos directly out of any app that also supports web activities such as the built-in photos app.

source

Twitter on Firefox OS is usable, but definitely lacks behind its iOS and Android counterparts. No notifications for mentions, direct messages, etc.

YouTube

Just as above, YouTube is nothing more than a wrapper around the mobile version of youtube.com... but actually worse. The app displays a small area at the bottom which is meant to toggle navigation controls for apps which don't behave correctly.

The Rest

Next time I'll be reviewing marketplace apps and sharing more thoughts on the young Firefox OS.

I recently decided to give Firefox OS a try and ordered a Flame developer reference phone. This will be an attempt at a blog series capturing my first 30 days of usage. I will do my best to blog as frequently as I can, usually once or twice a week as I get more accustomed to the new platform.

Mobile Data, voice mail, etc.

I started playing with the phone and was surprised to find it had managed to auto-configure mobile data (APN access), voice mail, MMS, etc. I am guessing this is largely dependant on the mobile carrier, but I am glad Firefox OS picked up on those. In the past, when dealing with Android, I've had to go through long Customer Support calls to receive the correct settings for my device as text messages.

E-Mail

The very first app I launched was E-Mail. Unlike Android, Firefox OS does not have a notion of system-wide accounts. Setting up mailboxes is, therefore, specific to the Mail app.

I use Google Apps for Business with two-factor authentication and was curious if the app will pick up on that. I entered my work e-mail, my regular password and after a little while was prompted to use an 'application-specific password'. I created one in my Google security profile and Mail was then able to fully set up the account, incl. IMAP and SMTP over SSL/TLS.

Using Mail has been a bit of a pain. There is no easy way to archive e-mails. I'm still unsure how message deletion is handled, are they sent to the Bin? Drafts are stored locally and if you wish to continue writing on a different device, your best bet is to e-mail the draft to yourself. Handling multiple accounts is a pain and switching between them is 4 taps away. Gmail accounts are set up using IMAP and as such you will get notifications of new messages with a delay (poll interval configurable, no push notifications). I haven't figured out how to open attachments yet.

Overall, using Mail on Firefox OS feels like a step backwards... a big one at that.

Calendar

As before, setting up accounts is specific to the app. When adding calendars from Google, you'll be sent to the Google profile log in page where you'll have to enter your full e-mail address and password. If using two-factor authentication, you'll have to enter the temporary PIN as well. This is different from setting up accounts on E-Mail where application-specific passwords are required.

The default month view doesn't leave a lot of space for any events to be shown at the bottom. There are no animations, transitions or any other niceties. For example, in week view swiping from any edge will move a week forward/backward. The new events replace old ones and sometimes it's difficult to tell if anything changed. In day view the unnecessary big font size cuts event titles rather short and makes landscape view preferred... which does not work.

I rarely use the calendar on my phone and I have a feeling I'll be using less of it in the future.

Contacts

This should come as no surprise, importing contacts is app-specific. You must go through the process of logging into your Google profile once again. Furthermore, I couldn't find an option to sync with Google so importing is a one-off thing. Yes, it feels a lot like owning an ancient Nokia phone and importing from SIM.

Summary

The experience hasn't been great so far and the stock apps are disappointing. However, given we are talking about Firefox OS 1.4, it is too early to judge. The platform is open so anyone can contribute and improve.

Next time I'll be setting up Twitter and apps I use frequently.

I recently decided to give Firefox OS a try and ordered a Flame developer reference phone. This post and the ones following will be an attempt at a blog series capturing my first 30 days of usage. I will do my best to blog as frequently as I can, usually once or twice a week as I get more accustomed to the new platform.

Why a Firefox OS-based device?

I have been a long-time Android user (and recently an iPhone user by accident). I own a Samsung Galaxy S I phone which I have been successfully patching to the latest Android version using Cyanogenmod. During the years, however, I have owned all the successors to the original Galaxy S. My wife owns a Galaxy S4 mini and seems happy with it.

Although in the past patching has worked reasonably well, recent versions of Android are too demanding of the ancient hardware I was using. This prompted me to look around for a new phone. After a lot of soul-searching, I decided I don't want yet another Android-based phone. I was ready for something new, open and extensible.

I still have an HP TouchPad lying around the flat which dual-boots into Android and webOS. I believe web-based OS'es that embrace open and modern technologies are the way to go. So... what options do I have?

The Flame developer reference phone

As soon as Mozilla made the announcement, I knew I wanted to own a Flame device. It's a mid-tier phone which runs the latest Firefox OS. An OS that I might actually like... and with prices as low as £100 it's a great value for money.

If you haven't seen the specs, here's a quote from the announcement:

Qualcomm MSM8210 Snapdragon, 1.2GHZ Dual core processor 4.5” screen (FWVGA 854×480 pixels) Cameras: Rear: 5MP with auto-focus and flash / Front: 2MP Frequency: GSM 850/900/1800/1900MHz UMTS 850/900/1900/2100MHz 8GB memory, MicroSD slot 256MB – 1GB RAM (adjustable by developer) A-GPS, NFC Dual SIM Support Battery capacity: 1,800 mAh WiFi: 802.11 b/g/n, Bluetooth 3.0, Micro USB

A word of caution

The Flame phone as ordered from Everbuying ships from Singapore (manufactured in China). If you are shipping to a EU member country, your order may be subject to import taxes. Depending on where you live, you may also need to provide proof-of-payment as the supplier will likely declare your order as 'no commercial value' (which is a red flag for customs). Bring your PayPal receipt or wire transfer papers with you.

Unboxing, please!

Right, let's get on with it, shall we?

As the phone arrived, it had the T²Mobile logo at the front. Wat?

Mozilla worked closely with T2Mobile in creating the phone, which offers developers a means of configuring the RAM of the handset using the phone's software so they can emulate a variety of Firefox OS devices that will be released throughout the coming year.

T2Mobile will also be charged with rolling out the software updates of Firefox OS, and even offer you a means of trying out different release channels, so that you can even install nightly builds right from your device.

source

Mystery solved.

The box itself is nothing to marvel at. It's plain, it's simple and the only interesting element to it is the orange screen of the phone illustration. It also feels very light.

Once you turn the box, the back reveals the phone specs and what's included in the box.

The box opens and reveals the front of the phone. Nothing fancy here, you've got your screen protective cover that peels off and an access to the bottom half of the box.

The back of the phone reveals a slot for an SD card and two SIM cards (2G+3G). The phone OS itself allows you to choose which one will be used for calls, mobile data, etc. The battery is not inserted into the phone at this point.

The bottom half of the box contains the phone's back cover, micro-USB cable and earphones (quality not tested).

The full contents of the box. The Firefox OS sticker is a nice addition.

A close-up of the battery reveals a label 'alcatel onetouch'. My best guess is the Flame phone is a modification of the Alcatel One Touch Fire and they didn't spend the time to re-brand the battery. So Mozilla teams up with T²Mobile to bring us an Alcatel One Touch Fire variation that has 'ThunderSoft (R)' as a boot screen... feels like a Frankenstein's creation.

With the battery in place, I accidentally held the phone at the top which prompted a boot. The OS was fairly quick to start (and so are subsequent reboots). The first-time use screens prompt to select a language and a wi-fi network. English (UK) is not an option.

...and there we have it, a working Firefox OS on a Flame phone. Time to set up mail, calendar, contacts and all the social goodies one is accustomed to.

It's very common amongst the people I know to map left Ctrl+Shift or Alt+Shift to change keyboard layouts. However, this can often get in the way especially when working with editors such as Vim or Emacs -- one moment you are typing with Latin letters, next you have magically switched to Cyrillic. You then find yourself having to shift from editing to sorting out whatever has gone wrong.

One more thing. The keyboard layout indicator in your OS -- doesn't that just waste space? Call me minimalistic, I prefer my screen free of clutter.

How to use the epic keyboard layout change mode:

1. Open System Settings. In Unity or Gnome Shell just look for it in the launcher.
2. Find the Keyboard applet.
3. Select Layout Settings.
4. Select Options... under Layouts.
5. Customise:
   • Caps Lock key behaviour: leave at Default.
   • Key(s) to change layout: tick Caps Lock only.
   • Use keyboard LED to show alternative layout: tick Caps Lock only.

...and there you have it. Whenever you want to use your alternative layout, press Caps Lock and your keyboard LED indicator should light up indicating you are now typing in a different language.

I just need to find a good use for Num Lock now...

Does this work in other OSes? Let me know in the comments below.

A fair share of those packages also install services. For example, [sudo] apt-get install -y apache2 sets up a web server which is started on every boot. MySQL, PostgreSQL, MongoDB, etc. all come with startup services which are enabled and run on boot by default (something you would want on a server). As time went on, boot times had increased and the overall performance of the PC slowed down considerably. You can see how many processes are running at any given time on your machine by using ps -e | wc -l. Most of those would be system process (init, session handling, tty, etc.), however many are also started on boot and you most likely don't need them running all the time.

Ubuntu uses Upstart to start tasks and services during boot... but that is not all. There are packages that use the old System-V shell initialisation scripts in /etc/init.d.

After searching for a while and getting nowhere, I reverted to reading the Upstart documentation in order to find the best way to stop a service. It turns out there is a quick way to keep the job files around (in case you want to start something manually after logging in), but prevent the service from running at boot.

I came up with a combined script which deals with both SysV-style scripts as well as Upstart jobs. The script will attempt to disable a service while preserving the initialisation scripts so you can still [sudo] service name start when you need it.

My results were more than impressive. On a system with an SSD disk my boot times improved noticeably which was unexpected. I had some of the most common packages for a developer installed so I used:

$ service-disable.sh apache2 lxc lxc-net memcached mongod mongodb mysql palm-novacomd postfix postgresql qemu-kvm

To find out what services you have on your system, use the following command:

$ sudo find /etc/init /etc/init.d \! -iname '*.override' \! -name '.*' | \
  xargs -l basename | \
  sed -e 's/\.conf$//' | \
  sort -u

Onto the script itself:

#!/bin/sh

# Abort immediately if any command exists with a non-zero code.
set -e

# Do we need 'sudo'?
sudo=
if [ "$( id -u )" != 0 ]; then
  sudo='sudo'
fi

# Parse command-line options.
while getopts 'h' option; do
  case "$option" in
    h)
      cat <<-HELP
Usage:
  $( basename "$0" ) [...OPTIONS] [...service]

Options:
  -h       Print script usage and exit.

Arguments:
  service  The service name, e.g., 'apache2', 'mysql', etc.
HELP
      exit 1
      ;;
  esac
done

# Drop parsed options from script input.
shift $((OPTIND-1))

# Ensure we can manage services and System-V init scripts.
if ! which service 1>/dev/null 2>&1 || ! which update-rc.d 1>/dev/null 2>&1; then
  echo '[WARN] You need to be running a Debian-based system with System-V support.' 1>&2
  echo '[WARN] Aborting before any real damage is done.' 1>&2
  exit 1
fi

for service in "$@"; do
  # Stop the service, if it's running.
  echo -n "[STOP]    '$service'... "
  $sudo service "$service" stop 1>/dev/null 2>&1 || :
  echo 'OK'

  # If the legacy System-V style init script is used, purge it from the system.
  # The file remains in /etc/init.d/, but not in any of /etc/rcN.d/ so the service won't start on boot.
  echo -n "[DISABLE] '$service' rc.d initscript... "
  $sudo update-rc.d -f "$service" remove 1>/dev/null
  echo 'OK'

  # If Upstart is used, use an override to set the service job in 'manual' mode.
  # See http://upstart.ubuntu.com/cookbook/#manual
  if [ -f "/etc/init/${service}.conf" ]; then
    echo -n "[DISABLE] '$service' Upstart script... "
    if ! grep 'manual' "/etc/init/${service}.override" 1>/dev/null 2>&1; then
      echo 'manual' | $sudo tee -a "/etc/init/${service}.override" 1>/dev/null
    fi
    echo 'OK'
  fi
done

Download using the raw link, chmod +x service-disable.sh and put somewhere on your $PATH. /usr/local/bin/ is usually the right place.

NOTE: Be extremely careful what services you disable. Make sure you are absolutely certain the service being stopped is not essential for the operation of your PC.

Let me know if your boot times improve. Feel free to post a (common) service in the comments below if I have missed it in the post itself.

Up until recently, I was quite happy with my Super+E key launching nautilus in my home directory. I went to Keyboard Shortcuts and played around with the configuration and then restored my original values. To my surprise, I could no longer open nautilus with the key combination Super+E. It took me all evening to find a solution and as it turns out, there are several issues at play:

• If you haven't mapped your Super key yet, you are advised to do so before you continue.

• There is a long standing issue with multiple regressions where Unity is blocking any other apps from receiving the Super key if the Dash is configured to open just by using that key. You should set it to a key combination, e.g., Super+L or similar.

• The latest regression Unity blocks other programs from binding globally to Super+_ or Alt+_ (* = any key) has been fixed, but not officially released.

So, at the end, it turns out it's gnome-settings-daemon being faulty. To get the updated version, which should fix the issue on Ubuntu 12.04, you need to accept packages from the proposed archive.

Start by making sure you have your system up-to-date:

$ sudo apt-get update
$ sudo apt-get dist-upgrade
# Accept upgrades, if any.

To enable the proposed archive for Ubuntu 12.04 go to Applications→Ubuntu Software Center→Edit→Software Sources→Updates and ensure that precise-proposed is ticked.

You should also make sure to suppress updates you are not interested in as you may unnecessarily install an unstable package. To opt-out of automatic updates from the proposed archive, create a new file under /etc/apt/preferences.d/precise-proposed and put the following inside it:

Package: *
Pin: release a=precise-security
Pin-Priority: 990

Package: *
Pin: release a=precise-updates
Pin-Priority: 900

Package: *
Pin: release a=precise-proposed
Pin-Priority: 400

What the above file does is to ensure the proposed packages are lower in priority than their stable versions from precise-updates. Before you continue, make sure you don't have any package updates. If you do, it means something was picked up from the proposed archive and this should not have happened:

$ sudo apt-get update
$ sudo apt-get dist-upgrade
# Confirm you have 0 upgrades.

Finally, install gnome-settings-daemon from precise-proposed:

$ sudo apt-get install gnome-settings-daemon/precise-proposed

Unfortunately you would likely need to restart the system for changes to take effect. In my case I killed the daemon, but in the process it didn't reload with the correct settings and I experienced a nasty crash.

I hope changes would be pushed to stable channels soon which would make this post obsolete, but in the interim, enjoy your Super key combos working again.

There is a very good reason why regular expressions are called that -- they are regular. You can get a lot done with them, but if your data has a complex structure, you'd often be advised to use a parser. A good example is processing data where parentheses can be nested. A simple regular expression:

/\([^\)]+/

fails quickly when a nested ( ) pair is encountered.

<?php

$string = '(Hello (World!))';
preg_match_all('/\([^\)]+/', $string, $groups);
var_export($groups);

# array (
#   0 => array (
#     0 => '(Hello (World!',
#   ),
# )

PCRE (the regular expressions engine behind preg_* functions) has support for dealing with those cases where you need to recurse and repeat the pattern. For example, a very simple CSS parser would need to balance opening { and closing }, i.e., taking into account @media queries also enclosed by a {..} pair. Let's assume this document:

body {
  color: #888;
}

@media print {
  body {
    color: #333;
  }
}

code {
  color: blue;
}

A non-greedy regular expression like /{.*?}/ would fail as it exits as soon as a closing } is encountered resulting in the following captured groups:

array (
  0 => '{ color: #888; }',
  1 => '{ body { color: #333; }',  # NOTE: the first opening { is not balanced.
  2 => '{ color: blue; }',
)

To deal with balanced pairs, we need a way to descend into a pair and repeat the pattern. In pseudo Basic-like regular expressions code this would mean:

10: expect an opening '{'
20:   read until
21:     '{' or '}' is encountered
22:     OR end of data, goto 50.
30:   if '{', start over; goto 10.
40:   if '}', goto 50.
50: expect a balanced closing '}'

PCRE supports (?R) which does exactly what is illustrated above: it repeats the whole pattern recursively. Let's go back to the non-greedy pattern (and the sample CSS document):

/{.*?}/

and modify it so it starts a new group for each nested pair:

/
  {           # find the first opening '{'.
    (?:       # start a new group, this is so '|' below does not apply/affect the opening '{'.
      [^{}]+  # skip ahead happily if no '{' or '}'.
      |       #   ...otherwise...
      (?R)    # we may be at the start of a new group, repeat whole pattern.
    )
    *         # nesting can be many levels deep.
  }           # finally, expect a balanced closing '}'
/

Let's convert this to an inline pattern and run it against our sample CSS document:

<?php

$string = <<<CSS
body { color: #888; }

@media print { body { color: #333; } }

code { color: blue; }
CSS;

$pattern = '/{(?:[^{}]+|(?R))*}/';

preg_match_all($pattern, $string, $groups);
var_export($groups);

# array (
#   0 =>
#   array (
#     0 => '{ color: #888; }',
#     1 => '{ body { color: #333; } }',
#     2 => '{ color: blue; }',
#   ),
# )

This is a great start to a simple CSS parser. You can now iterate over the results and run the expression again until you get a flattened list of all the properties.

Note again (?R) repeats the whole pattern. If you want to match all @media queries for example, you'd need to make sure the group is optional:

<?php

# [...]

$pattern = '/(?:@media[^{]+)?'     # @media is optional, e.g., when we have descended into it.
         . '{(?:[^{}]+|(?R))*}/s';

Why not a parser instead?

Parsers can be much more complex than a one-line regular expression. You'd most likely also need to include a dependency in your project. If all you need is a simple solution then I say try and use recursive regular expressions first. I have been hacking on a tool to merge @media queries produced by Sass and I got the job done with no complex parsers or dependencies involved.

A feature I recently discovered was negative lookahead. This can be useful in cases where you are looking for a particular string, but only if it's not followed by another. In my case, I was looking for all references of include, but since this also matches Ruby's include?, I wanted to exclude and not report it. The search expression I used was:

/include\(?\)\@!

There are all sorts of goodness in the Vim documentation on patterns. If you are using Vim on a daily basis, it's worth spending a few minutes to learn what's available. Your next search & replace could save you hours of editing or recording and getting a macro just right.

nnoremap <silent> <C-J> gt
nnoremap <silent> <C-K> gT

Re-map your Caps Lock key to Ctrl and navigating around your tabs just got a lot easier.

To re-map in Ubuntu, open up the Dash, find the Keyboard Layout app, launch it, go to Options... and expand Caps Lock key behaviour. Select Make Caps Lock an additional Control but keep the Caps_Lock keysym. Close windows. Changes should be available immediately.

What helped me a great deal were all those 'Vim plug-ins you MUST have'-style articles. After a while, however, they got pretty boring as most were covering the same plug-ins.

As I started using Vim for everything (after an initial period of pain and suffering), I kept expanding my .vimrc and soon found it had grown to contain a lot of useful and rare gems. My intentions are by sharing these here they would also help you be more productive in your day-to-day tasks in Vim.

Plug-ins

godlygeek/tabular

Vim script for text filtering and alignment.

I like my code well indented and aligned... but it is a pain to keep it organised by hand. Tabular does this instead of you. It is extremely helpful and can deal with any coding style preference you may have. Take, for example, this input:

<?php

$hello = 'world';
$how = 'are you';
$when = 'today';

For quick access to Tabular, set up key bindings like so to trigger indentation on =:

nnoremap <leader>a= :Tabularize /=<CR>

Pressing \a (where \ is the leader key) yields:

<?php

$hello = 'world';
$how   = 'are you';
$when  = 'today';

There, all nice and tidy.

mattn/zencoding-vim

Zen-Coding for Vim.

This one is a must-have for HTML folks. Take this input:

ul>li*5>a>span

Re-map Zen Coding to suit your needs:

let g:user_zen_leader_key = '<leader>z'

and voila!

<ul>
  <li>
    <a href=""><span></span></a>
  </li>
  <li>
    <a href=""><span></span></a>
  </li>
  <li>
    <a href=""><span></span></a>
  </li>
  <li>
    <a href=""><span></span></a>
  </li>
  <li>
    <a href=""><span></span></a>
  </li>
</ul>

othree/html5.vim

HTML5 omni-complete and syntax.

HTML is dead, long live HTML5! This plug-in provides syntax highlighting for the new HTML5 tags which are not available out-of-the-box in a default Vim installation.

It also plays nicely with other plug-ins, such as php.vim.

pangloss/vim-javascript

Vastly improved JavaScript indentation.

If you do a lot of JavaScript development, you have probably been driven to despair on each new line. Vim's default JavaScript syntax file is not very smart when it comes to indentation and it can sometimes be utterly stupid. This plug-in puts a stop to it all.

samsonw/vim-task

Basically, this is the TextMate Tasks Bundle port for Vim.

I like keeping NOTEs and TODOs in my projects. This is a very simple plug-in which provides syntax highlighting for *.tasks files and a couple of handy key bindings to deal with resolving items.

sjl/gundo.vim

Vim plug-in to visualize your Vim undo tree.

Undone your changes, tried something different and then realised you want to get your old code back? Gundo comes to the rescue giving you a tree of all edits and points of interest in the history.

session.vim--Odding

Extended session management for Vim.

Restart Vim and avoid losing your editing session. This plug-in saves your Vim sessions and restores them so it is like you never even left Vim. The default options are somewhat intrusive, but it doesn't take too much to customise the plug-in to behave:

" Don't prompt on Vim close if we want to save the session.
let g:session_autosave=0
" Don't auto-load saved sessions on Vim start.
let g:session_autoload=0
" Re-map for easy session saving/restore.
noremap <leader>ss :SaveSession user<CR>
noremap <leader>sr :OpenSession user<CR>

Whenever you feel you need to close Vim, but want to be able to get back your opened buffers, use \ss (where \ is the leader key) before :quitting. Next time you start Vim, use \sr to restore.

Note you wouldn't be able to save options like plug-ins state, e.g., opened directories in NERDTree.

kien/ctrlp.vim

Fuzzy file, buffer, mru, tag, etc finder.

When I first got to Vim, I tried Command-T. I loved it... but having Ruby support available in Vim was proving an issue on some Windows machines. You also need to compile a binary which further meant the plug-in cannot be used out-of-the-box in a new Vim installation.

CtrlP is a great alternative with a slew of new features to offer. You still get a fuzzy matching file finder, but you can also search for tags, recent buffers, etc.

I don't like having plug-ins register their key bindings without my say, so I turn off the defaults for CtrlP and create personalised mappings:

" Don't use <C-P>, leave it available for something else.
let g:ctrlp_map=''

nnoremap <silent> <leader>o :<C-U>CtrlPCurWD<CR>
nnoremap <silent> <leader>b :<C-U>CtrlPBufTag<CR>

Use \o (where \ is the leader key) to fuzzy match and open a file and \b to fuzzy match and move to a tag in the current buffer (quickly navigate to a method, etc.)

thinca/vim-visualstar

star for Visual-mode.

The star * is a very powerful key in Vim. You can quickly look for all occurrences of the word under the cursor, but it is not always a word you'd be looking for. This plug-in extends the star in visual mode so it looks for all occurrences of the entire selected text, taking care of escaping any special characters or whitespace that may have been selected.

IMHO this is how Vim's * should work by default in visual mode.

hail2u/vim-css3-syntax

Add CSS3 syntax support to vim's built-in syntax/css.vim.

This plug-in provides syntax highlighting for the new CSS3 properties. It is a bit trickier to set it up so it works for HTML and Sass buffers, but you only have to do it once anyway.

jesseschalken/list-text-object

A Vim script to provide text objects for items in lists like ( a, b, c ), { a; b; c; } etc.

Lastly, I came across this plug-in several weeks ago and have been using it on a daily basis ever since. It deals with text objects for lists, e.g.:

<?php

print implode(', ', ['Hello', 'World', 'How are' <|>. ' you?']);

Given the cursor position is defined by <|> above, pressing ci, will result in:

<?php

print implode(', ', ['Hello', 'World', <|>]);

This is a great and quick way to change function arguments, list values, etc.

Tips & Tricks

Keep Your Focus

One of the greatest strengths of Vim is having your hands rest comfortably on the home row whilst you are editing away. It bugged me I can't do the same with my screen, i.e., focus my attention on a given area and have everything I am working on flow in that particular line of screen. You can achieve this in Vim by setting the scrolloff option to a relatively big value:

set scrolloff=120  " Total LoC visible on screen divided by 2 or higher.

It takes some getting used to, but eventually (hopefully) you will find there is less strain on your eyes.

Relative Line Numbers

I have always found this particular 'feature' of Vim to be extremely annoying. That is until I decided to try and live with it for at least a week. Coupled with the technique above, the editor becomes static and all that ever changes is the buffer itself. You can also much more easily navigate to a particular line since you know how many lines away it happens to be.

set rnu  " Show relative line numbers.

Long Lines Slow Down Vim

It has happened to all of us. You accidentally open a minified JavaScript file, Vim crawls to a complete halt and <C-C> cannot get you control of the editor back. This usually happens because Vim is having trouble syntax highlighting long lines. By setting a limit on the characters Vim will highlight per line at most, you can avoid situations like the above.

set synmaxcol=512

Dreadful 'Ex' mode

Q must be one of the most useless default key bindings in Vim. I have yet to hear someone making extensive use of 'Ex' mode. It is much more efficient having Q save and quit the current buffer (and you would also never have to type visual again):

nnoremap <silent> Q ZZ

Quick Indentation Settings

Very often files open with the wrong indentation settings. 2, 4 and 8 are the most common setting for spaces per indent:

" Key bindings for adjusting the tab/shift width.
nnoremap <leader>w2 :setlocal tabstop=2<CR>:setlocal shiftwidth=2<CR>
nnoremap <leader>w4 :setlocal tabstop=4<CR>:setlocal shiftwidth=4<CR>
nnoremap <leader>w8 :setlocal tabstop=8<CR>:setlocal shiftwidth=8<CR>

Final Words

Leave a comment with your favourite, not-so-popular Vim plug-in or script below. Share this article with friends and on Twitter. I hope it has helped you make your Vim a little bit nicer to work from.

configure: error: Cannot find libXXX under /usr.

when you attempt to ./configure PHP 5.2.x (and possibly earlier series as well), try appending:

--with-libdir=lib/x86_64-linux-gnu

This instructs the script to look for libraries under /usr/lib/x86_64-linux-gnu instead of /usr/lib. If this doesn't work for you, try running:

$ sudo updatedb
$ locate 'libXXX' | grep 'so$'

Which should output the directory where the binary libXXX (e.g., libmysqlclient) is installed.

If you also see this at the linking stage:

ext/openssl/xp_ssl.c: undefined reference to `SSLv2_server_method'

You would want to patch your 5.2.17 source with debian_patches_disable_SSLv2_for_openssl_1_0_0.patch.

If you are anything like me, the decision didn't probably go well with you either. I've been hacking on a 'proper' port back to dark menus, those interested can find the source and instructions available on GitHub.

I've kept the changes to a minimum so you'd still get all other improvements, such as less prominent controls for windows out of focus.

Gtk-Message: Failed to load module "globalmenu-gtk"

every time you launch an app, you have left a Gnome Shell module, which is no longer present on your system, in your GTK_MODULES environment variable. In my case, I enabled the Global Menu extension in Gnome Tweak Tool and then uninstalled Gnome Shell. To fix, I rmed the /etc/profile.d/globalmenu.sh file and rebooted.

I run Ubuntu and Gtk immediately came to mind. It shouldn't be too difficult to display the two images with their dimensions side-by-side in a window. I don't need fancy image view modes, just having the two images next to each other would give me enough information to decide which one to accept. At the end, having never done any PyGtk programming before, I came up with a 50-line script that does just what I need:

#!/usr/bin/env python

# Simple Image Diffs
# ==================
#
# How to Install
# --------------
#
# Download the script somewhere on $PATH as 'simple-imagediff' with +x:
#
# $ cd ~/bin
# $ wget -O simple-imagediff https://raw.github.com/gist/1716699/simple-imagediff.py
# $ chmod +x simple-imagediff
#
# Prerequisites
# -------------
#
# The script should work out-of-the box on Ubuntu 11.10. On other OS'es you may
# need to install PIL and Gtk3.
#
# Git Setup
# ---------
#
# In ~/.gitconfig, add:
#
# [diff "image"]
#   command = simple-imagediff
#
# In your project, create .gitattributes file and add (this enables the custom
# diff tool above):
#
# *.gif diff=image
# *.jpg diff=image
# *.png diff=image
#
# Try It
# ------
#
# $ git diff path/to/file.png
#
# NOTE: file.png must be versioned and the working copy must be different.

import os
import sys

import Image

from gi.repository import Gdk, Gtk

class SimpleImageDiffWindow(Gtk.Window):
    def __init__(self, left, right):
        Gtk.Window.__init__(self, title="Simple Image Diff (%s, %s)" % (left, right))
        self.set_default_size(640, 480)
        align = Gtk.Alignment()
        align.set_padding(10, 10, 10, 10)
        box = Gtk.HBox(homogeneous=True, spacing=10)
        box.add(self._create_image_box(left))
        box.add(self._create_image_box(right))
        align.add(box)
        self.add(align)
        self.resize(1, 1)
        self.set_position(Gtk.WindowPosition.CENTER)

    def _create_image_box(self, image_file):
        box = Gtk.VBox(spacing=10)
        frame = Gtk.Frame()
        image = Gtk.Image()
        image.set_from_file(image_file)
        title = Gtk.Label(label="W: %dpx  |  H: %dpx" % Image.open(image_file).size)
        frame.add(image)
        box.pack_start(frame, True, True, 0)
        box.pack_end(title, False, False, 10)
        return box

def _halt(message, code):
    sys.stderr.write("[ERROR] %s\n" % message)
    sys.exit(0 << code)

def _verify_file_exists(target):
    if not os.path.exists(target):
        _halt("The file '%s' does not exists." % target, 2)

if __name__ == '__main__':
    if len(sys.argv) < 3:
        _halt('Not enough arguments.', 1)
    _verify_file_exists(sys.argv[1])
    _verify_file_exists(sys.argv[2])
    app = SimpleImageDiffWindow(sys.argv[1], sys.argv[2])
    app.connect('delete-event', Gtk.main_quit)
    app.show_all()
    Gtk.main()

It's not an ultimate solution. It will choke up on large images, it doesn't handle transparency well and there are no controls like zooming in/out, but it is better than nothing.

Overall, I found the PyGtk documentation very easy to read, there are plenty of tutorials around and the API reference has all the information one needs.

Tip: in git-cola, <C-D> will open up the configured diff tool for the highlighted file.

You remember all those /etc/config saved as /etc/config.new messages. Yes, as it turns out these are important. Given you haven't modified your pacman configuration (perhaps added to the HoldPkg list recently?), you can safely accept the new values:

$ [sudo] mv /etc/pacman.conf /etc/pacman.conf.pacprev
$ [sudo] mv /etc/pacman.conf.pacnew /etc/pacman.conf

Re-run [sudo] pacman -Syu and you are on your way.

I decided to upgrade pacman on Arch Linux recently. I was advised to run [sudo] pacman-key --init after the update had finished. Sounds simple enough, just one extra command I need to copy -> paste to get me going again. Wrong. It turns out gpg will go about generating a very strong key (did not investigate the exact key size). On my not-so-busy machine it would just sit there doing (what would appear as) nothing for hours. To generate entropy, /dev/random is used. I started:

$ cat /dev/random

in a remote session and there was nothing printed on-screen, e.g., nothing was being generated, e.g., no entropy, e.g., no gpg joy. What follows is a very ugly hack to speed things up. Keep the above remote connection open and connect to the machine in a separate tab/window. Start pacman-key as instructed earlier. Leave the window/tab open and connect again, in a third, separate window/tab. Repeat (many) times:

$ ls -R /
$ [sudo] sync
$ sudo tee /proc/sys/vm/drop_caches <<< 3

Ugly, I know.

I was quite surprised to see most of the theme control options are now gone. The Appearance panel has no colour tweaks and I hate the default orange scheme. Luckily, there is a way to change it in Gtk3:

$ sudo apt-get install dconf-tools
$ dconf-editor

Browse to org.gnome.desktop.interface. Locate gtk-color-scheme. Edit the property:

bg_color: #f0f1f2;
selected_bg_color: #4677f0;

Change the colours to your liking. You may need to re-launch some apps for changes to take effect.

...now if I could only get those Gnome Terminal tabs to look darker.

Recap of Part 1

In Part 1 we completed the tutorial with a simple button-like shape:

We generated the shape using linear gradients, corners and borders from Magick:

// intro.scss
$theme1: red;
$theme2: maroon;

$button_width:  320px;
$button_height: 24px;

body {
  background: transparent magick-canvas($button_width, $button_height,
    magick-fill(
      magick-linear-gradient(
        $theme1,
        $theme2
      )
    )
    magick-corners(10px)
    magick-border($theme2, 10px, 1px)
  );
}

To ensure we can easily change the theme colours, we introduced two $theme variables at the top of the file.

Adding an Icon to the Button

Pick an image and save it in your images_dir as icon.png. If you skipped Part 1 of this tutorial, make sure you have a directory named images in your project's root and add the following line to your Compass configuration:

# Add to config.rb
images_dir = 'images'

Magick comes with a very handy magick-compose function which allows us to put one canvas on top of another. We cannot pass the image file directly to magick-compose as it will refuse anything other than a canvas object:

// This will NOT work
magick-compose('icon.png')

You've seen how to create a blank canvas using the magick-canvas function. We can also initialise a canvas object in several other ways, one of which includes the option to load a file from disk:

// Loads icon.png and returns a Base64 encoded Data URL
magick-canvas('icon.png')

Let's put the two together for a working solution:

// Loads icon.png and uses it as an overlay
magick-compose(magick-canvas('icon.png'))

Adding the above line to our button code:

// {intro => button}.scss
/* …snip… */

body {
  background: transparent magick-sprite('button', magick-canvas($button_width, $button_height,
    /* …snip… */
    magick-compose(magick-canvas('icon.png'))
  ));
}

Yields the following result:

It's not exactly what I would call pretty so let's make some changes to the dimensions and colours of the button:

// button.scss
$theme1: #3060bf;
$theme2: #5ca1e5;

$button_width:  280px;
$button_height: 32px;

/* …snip… */

The CSS background-position property allows control over where a background image appears inside its container. magick-compose gives us similar control. To offset the icon 5px horizontally and center it vertically, we pass 5px, 50% after the canvas object (note arguments are comma-separated):

// button.scss
/* …snip… */

body {
  background: transparent magick-sprite('button', magick-canvas($button_width, $button_height,
    /* …snip… */
    magick-compose(magick-canvas('icon.png'), 5px, 50%)
  ));
}

Applying Effects

Magick packs several pixel-based effects - fade, brightness, contrast, saturation, vibrance and greyscale. We apply them to a canvas object just like we would apply borders or corners:

magick-effect(fade, 50%)

The first argument selects the desired effect and the second one adjusts its strength.

For this tutorial, let's tune down the icon by making it semi-transparent and reducing the colour intensity:

/* …snip… */
magick-compose(
  magick-canvas('icon.png',
    magick-effect(fade,      50%)
    magick-effect(greyscale, 50%)
  ),
  5px, 50%
)
/* …snip… */

The effects are applied to the canvas we are composing on top of the button shape. If we move magick-effect to the top-level canvas (where borders and corners are applied) then the entire button will be semi-transparent - not what we are after.

Sprites, the Compass Way

We are building a 3-state button. So far we have only constructed the code for our normal state. For the hover state, we simply remove the effects applied on the icon earlier. For the active state, we invert the gradient so the button appears pressed.

We could save the three states as three different images, but this is not good practise and it will result in three requests to the server.
The latest release of Compass offers an easy-to-use spriting support. You import the different button states and Compass takes care of the rest.

Let's start by moving our button code from the body CSS selector to a $button_sprites Sass variable.

// button.scss
$theme1: #5ca1e5;
$theme2: #3060bf;

$button_width:  280px;
$button_height: 32px;

$button_sprites: magick-sprite('button', magick-canvas($button_width, $button_height,
  magick-fill(
    magick-linear-gradient(
      $theme1,
      $theme2
    )
  )
  magick-corners(10px)
  magick-border($theme2, 10px, 1px)
  magick-compose(
    magick-canvas('icon.png',
      magick-effect(fade,      50%)
      magick-effect(greyscale, 50%)
    ),
    5px, 50%
  )
));

body { }

If we look at the generated CSS, it should be an empty file since there isn't any code in the body. However, button.png is still generated in images_dir which is what we are after.

Before we proceed to out hover state, let's rename the generated sprite from 'button' to 'button/normal' which will generate a file button/normal.png. This naming convention is compatible with Compass spriting.

For our hover state, we copy the code for the normal state and remove the effects on the button icon. Append the code to $button_sprites:

// button.scss
/* …snip… */

$button_sprites: magick-sprite('button/normal', magick-canvas($button_width, $button_height,
  /* …snip… */
)) magick-sprite('button/hover', magick-canvas($button_width, $button_height,
  magick-fill(
    magick-linear-gradient(
      $theme1,
      $theme2
    )
  )
  magick-corners(10px)
  magick-border($theme2, 10px, 1px)
  magick-compose(magick-canvas('icon.png'), 5px, 50%)
));

body { }

We end up with two files: button/normal.png and button/hover.png.

Finally, copy the code for the hover state and play with the gradient stops to achieve a pressed button look. Append the code to $button_sprites again:

// button.scss
/* …snip… */

$button_sprites: magick-sprite('button/normal', magick-canvas($button_width, $button_height,
  /* …snip… */
)) magick-sprite('button/hover', magick-canvas($button_width, $button_height,
  /* …snip… */
)) magick-sprite('button/active', magick-canvas($button_width, $button_height,
  magick-fill(
    magick-linear-gradient(
      darken($theme2, 10%),
      mix($theme1, $theme2)
    )
  )
  magick-corners(10px)
  magick-border($theme2, 10px, 1px)
  magick-compose(magick-canvas('icon.png'), 5px, 50%)
));

body { }

We are now ready to create a single image for our 3-state button. It is as easy as adding an import line above the body:

// button.scss
/* …snip… */

@import 'button/*.png';

body { }

Using the Button Sprite

The final step is to turn an <a> element into a button:

a {
  display: block;
  width: $button_width;
  height: $button_height;
  line-height: $button_height;
  text-align: center;
  text-decoration: none;
  color: #fff;

  @include button-sprite(normal);

  &:hover  { @include button-sprite(hover); }
  &:active { @include button-sprite(active); }
}

The button-sprite mixins are generated by Compass and allow us to easily switch the background-position property to select the desired button state. The result is:

Conclusion

There are many more features available in Magick. Check out the list of all available commands for a comprehensive reference.

Leave a comment if you have any questions or suggestions and visit the official Github page of the project for up-to-date information and links to other resources.

We have all been there - you release a cool new website with all the goodies of CSS3 just to find several weeks later your Customer wants you to support Internet Explorer as well. It seems solid backgrounds don't cut it.

There are also cases where CSS3 isn't the right solution, whether you have custom shapes or other elements of your design you end up creating images for (SVG is a good solution for these cases, but there's that big 10-year old elephant sitting in the middle of the room again).

Compass Magick tries to solve these issues by allowing you to dynamically generate images from your Compass projects taking full advantage of variables, mixins, etc.

History

The initial version of the project relied on RMagick for all image manipulation. There were many quirks: gradients were not working properly, per-pixel manipulation was difficult and much more. While I haven't worked with Ruby myself before, it also became apparent after some time RMagick was a big no-no in Ruby's land. The project is not actively maintained (last commit at the time of writing this post was on October 25, 2010) and compiling it is a big pain (especially on Windows/Cygwin).

Searching for an alternative solution, I stumbled upon compass-rgba, a simple plugin for generating 1x1 images and saving them as PNG files, the goal being to support IE7 with its missing implementation for rgba. The plugin is using ChunkyPNG, a pure Ruby library for reading and writing PNG images. Upon further investigation, I found it has very good support for per-pixel access and was a breeze to install. The author, Willem van Bergen, is also actively maintaining it, constantly adding new features and releasing new versions.

Installation

Moving away from the brief history lesson, installing Compass Magick is simple via RubyGems. Compass ~> 0.11.beta.5 and ChunkyPNG ~> 1.1.0 are required.

gem install compass-magick

You can optionally install OilyPNG ~> 1.0.0 to speed up ChunkyPNG. Oily is a native mixin:

gem install oily_png

If you have an existing project, you can start using Compass Magick by requiring the plugin from your Compass configuration:

# Add as the the first line in your config.rb
require 'magick'

If you are starting a new Compass project, to include Magick add -r magick to the command line:

compass create -r magick my_project

A Surface

Everything starts with a canvas:

magick-canvas(320px, 200px)

The code above creates a new Magick canvas and initialises its width and height. The canvas is fully transparent. This line by itself doesn't do much, so let's add it as a page background:

// intro.scss
body {
  background: transparent magick-canvas(320px, 200px);
}

Once you compile the source intro.scss, have a look at the produced .css - you should see a Base64 encoded Data URL of what is essentially a 320x200 transparent PNG serialised:

body {
  background: transparent url('data:image/png;base64,…');
}

Commands

You can perform drawing operations on a Magick canvas just like any other canvas. Commands are executed in the order they are specified in the source file. There are commands for drawing borders, generating gradients and much more. To keep things simple, let's turn our transparent canvas yellow:

// intro.scss
body {
  background: transparent magick-canvas(320px, 200px,
    magick-fill(yellow)
  );
}

…and just like that we turned our canvas yellow. magick-fill accepts semi-transparent colors and most importantly of all, variables:

// intro.scss
$theme1: yellow;
$theme2: blue;

body {
  background: transparent magick-canvas(320px, 200px,
    magick-fill($theme1)
    magick-fill(rgba($theme2, 0.5))
  );
}

What happened there? We created a 320x200 canvas and executed two commands on it:

1. Fill the entire canvas with $theme1 (yellow)
2. Fill the entire canvas again with $theme2 (blue), but at 50% opacity

Types

Compass Magick has support for linear gradients. Gradients are not drawing functions, but fill types. You don't apply a gradient directly on the canvas, rather you use it as an argument to a drawing function, one like magick-fill for example. Let's create a very simple top-to-bottom gradient and apply it on our canvas from the previous examples:

// intro.scss
$theme1: red;
$theme2: maroon;

body {
  background: transparent magick-canvas(320px, 200px,
    magick-fill(
      magick-linear-gradient(
        $theme1,
        $theme2
      )
    )
  );
}

Going Further

Compass Magick has a very powerful set of functions. Adding corners and a border is trivial and we can quickly turn our canvas into a button:

// intro.scss
$theme1: red;
$theme2: maroon;

$button_width:  320px;
$button_height: 24px;

body {
  background: transparent magick-canvas($button_width, $button_height,
    magick-fill(
      magick-linear-gradient(
        $theme1,
        $theme2
      )
    )
    magick-corners(10px)
    magick-border($theme2, 10px, 1px)
  );
}

Saving the Canvas

Unfortunately Base64 encoded Data URLs are not supported by all browsers and versions. To save the button we generated on disk, we first need to alter our Compass configuration:

# Add to config.rb
images_dir = 'images'

We can now wrap everything in magick-sprite to write the output on disk:

// intro.scss
/* …snip… */

body {
  background: transparent magick-sprite('button', magick-canvas($button_width, $button_height,
    /* …snip… */
  ));
}

The result will be button.png in the configured images_dir. The file is optimised for best compression, but you could further post-process it with tools like OptiPNG.

Conclusion

This post is just an introduction to Compass Magick. There are many more features available, some of which include image composing, cropping, masking, drop shadows and pattern generation. Check out the list of all available commands for a comprehensive reference.

I hope you found this short walk-through useful. Leave a comment if you have any questions or suggestions and visit the official Github page of the project for up-to-date information and links to other resources.

UPDATE: Part 2 is now available

#!/usr/bin/env node

var fs = require("fs"),
  path = require("path"),
  options = {
    verbose: false,
    directories: ["."],
  };

var includeFollowing = false;
process.argv.slice(2).forEach(function (option) {
  if (option === "-v" || option === "--verbose") {
    options.verbose = true;
  } else if (option === "-I" || option === "--include") {
    includeFollowing = true;
  } else if (option.indexOf("-I") === 0) {
    options.directories.push(option.substring(2));
  } else if (includeFollowing) {
    options.directories.push(option);
    includeFollowing = false;
  }
});

function findOne(file, directories) {
  var resolved = null;
  directories.forEach(function (directory) {
    if (resolved) {
      return;
    }
    var target = path.join(directory, file.replace(/\.js$/, "") + ".js");
    if (fs.existsSync(target)) {
      resolved = target;
    }
  });
  return resolved;
}

function pad(level) {
  return Array(level * 2 + 1).join(" ");
}

function processOne(file, level) {
  var lines = fs.readFileSync(file, "utf8");
  level || (level = 0);
  if (options.verbose) {
    console.error(pad(level) + "> " + file + "\n");
  }
  lines = lines.replace(
    /^\s*\/\/=\s*require\s+(["<])([^">]+).$/gm,
    function (match, type, location) {
      var resolved = findOne(
        location,
        type === "<" ? options.directories : [path.dirname(file)],
      );
      if (resolved) {
        return processOne(resolved, level + 1);
      }
      throw new Error(
        "Cannot resolve require:\n\n    " + match + "\n\n in file " + file,
      );
    },
  );
  return lines;
}

process.stdout.write(processOne(process.argv.pop()));

To use, copy the script above on $PATH and then:

yoke [-I path[ -I path]...] input.js > output.js

In most cases, you would just need to replace your existing sprocketize command with yoke. Both <file> and "file" requires are supported.

There you have it -- should work both in the browser and on the server.

Moving over to Git has thought me many things. I used to love my Cygwin console even before the switch and I've learnt to do pretty much every daily task in it. But the one thing I really needed and didn't have with Git was an option to copy modified files from the working tree between two commits. It wasn't available on the command line, nor in any of the clients I've tried so far. So having been playing with shell scripts for a few weeks, I decided to put one together which would do just that:

#!/bin/bash

BOLD="\033[1m"
_BOLD="\033[22m"
RED="\033[31m"
YELLOW="\033[33m"
GREEN="\033[32m"
RESET="\033[39m"

range=$1
if [ -z "$range" ]; then
  echo -e "${BOLD}${RED}You must specify a '<since>..<until>' argument.${RESET}${_BOLD}"
  exit 1
fi

if [ -z "$2" ]; then
  target="$( pwd )/.deployments"
else
  target=$( echo "$2" | sed -e 's#/\+$##g' )
fi

if [ -d "$target" ]; then
  echo -ne "Do you wish to remove '$target' first? [Y/n] "
  read prompt
  if [ -z "$prompt" ] || [ "$prompt" == "Y" ] || [ "$prompt" == "y" ]; then
    echo -e "  ${YELLOW}Purging '$target'...${RESET}"
    if [ -d "$target" ]; then
      rm -Rf "$target"
    fi
    echo -e "  ${GREEN}Done.${RESET}"
  fi
fi

mkdir -p "$target"

LOG=$( git whatchanged -m --oneline "$range" | awk '{
  if ($1 ~ /^:/) {
    print $5 ":" $6
  }
}' | tac )

length=$( echo "$LOG" | wc -l )
manual=''

index=0
for command in $LOG; do
  operation=${command:0:1}
  filepath=${command:2}
  case $operation in
    "A" | "M")
      if [ -f "$filepath" ]; then
        destination=$( dirname "$target/$filepath" )
        filename=$( basename "$filepath" )
        mkdir -p "$destination"
        cp -f "$filepath" "$target/$filepath"
      fi
    ;;
    "D")
      manual="$manual\n$filepath"
    ;;
    *)
    echo -e "${BOLD}${RED}Unknown operation $operation on file $filepath.${RESET}${_BOLD}"
    exit 4
    ;;
  esac
  let "index++"
  echo -ne "\r${YELLOW}Processing ${length} files...${RESET} $( echo "scale=2; ( $index / $length ) * 100.00" | bc )%"
done
echo

if [ ! -z "$manual" ]; then
  echo $( echo -e "$manual" | sed -e 's/^\s\+//g' | sort -u ) > "$target/.delete"
  echo -e "[WARN] Please manually delete the files listed in '${BOLD}.delete${_BOLD}'"
fi

echo -e "${GREEN}Done.${RESET}"

Paste the above in a script on your $PATH. Using gitk or another tool find the first commit you want to include in your extract. Invoke the script as below:

$ git-extract initial_hash_of_first_commit_to_include..HEAD
Do you wish to remove '.deployments' first? [Y/n]
  Purging '.deployments'...
  Done.
Processing 10 files... 100.00%
Done.

A new directory .deployments will be created with all files that have changed in the given commits range. If files were deleted, a .delete file will be generated and you have to handle these manually.

I haven't found a better solution yet, but I am sure there is a Git way to do just what I am after. This script is a hack to get the job done.

Leave a comment if you found this post useful. Fork the Gist and modify it to suit your needs.

Vim 7.2 from SVN

Tested on RHEL 4 i386:

$ cd ~
$ svn co https://vim.svn.sourceforge.net/svnroot/vim/vim7
$ cd vim7
$ ./configure --prefix=/usr --with-features=huge --disable-gui --without-x --enable-rubyinterp --enable-cscope --enable-multibyte
$ make && make install
$ vim --version
VIM - Vi IMproved 7.2 (2008 Aug 9)

Vim 7.3 from Mercurial

Tested on RHEL 5 x86_64:

$ cd ~
$ yum install hg ncurses-devel
$ hg clone https://vim.googlecode.com/hg/ vim
$ cd vim
$ ./configure --prefix=/usr --with-features=huge --disable-gui --without-x --enable-rubyinterp --enable-cscope --enable-multibyte
$ make && make install
$ vim --version
VIM - Vi IMproved 7.3 (2010 Aug 15)

RHEL 4 comes with up2date. I tried -i mercurial and -i hg, but both failed. Vim offers an archived download so you can skip steps 3-4 above and instead use:

# [..]
$ wget ftp://ftp.vim.org/pub/vim/unix/vim-7.3.tar.bz2
$ tar xjvf vim-7.3.tar.bz2
$ cd vim73
# [..]

Let me know if this post helped you or if you had to install any additional libraries.

$ cd ~
$ wget http://packages.sw.be/git/git-1.7.3-1.el4.rf.i386.rpm
$ wget http://packages.sw.be/git/perl-Git-1.7.3-1.el4.rf.i386.rpm
$ rpm -ivh --nodeps git-1.7.3-1.el4.rf.i386.rpm perl-Git-1.7.3-1.el4.rf.i386.rpm
$ git --version

You can browse packages.sw.be/git/ for the latest packages and update the above accordingly.

; AutoHotkey script, download from:
;   http://www.autohotkey.com/
; NOTE: Save this file with Windows line endings i.e. \r\n
;

cmd_line  := "C:\bin\cygwin\bin\mintty.exe /bin/zsh --login"
wnd_class := "ahk_class mintty"

#c::

DetectHiddenWindows, on

Maximize()
{
	global
	WinShow
	WinActivate
	WinGetPos, X, Y, Width, Height
	SysGet, FullScreenWidth, 78
	SysGet, FullScreenHeight, 79
	If (X <> 0) or (Y <> 0) or (Width <> FullScreenWidth) or (Height <> FullScreenHeight)
	{
		Send !{Enter}
	}
}

If WinExist(wnd_class)
{
	IfWinActive
	{
		WinMinimize
		WinHide
	}
	Else
	{
		Maximize()
	}
}
Else
{
	Run % cmd_line, , Hide
	WinWait % wnd_class, , 5
	If ErrorLevel
	{
		MsgBox, WinWait timed out. Please try pressing Win+C again.
	}
	Else
	{
		Maximize()
	}
}

If you haven't used AutoHotkey before make sure you download a copy. You most definitely will find some use for it.

As for the script, it is possible to tweak it so the window is only taking half the screen and slides in from the top (ah, Mac envy). I leave that for you to figure out.

Up until recently I was using go-tool. From the website:

go is a small shell command for changing directories quickly. Typically you have a set of directories that you work in. Typing out the names of those dirs in full can be tedious. go allows you to give a shortcut name for a directory -- say ko for D:\trentm\main\Apps\Komodo-devel [..]

It's a great tool, but it doesn't work with Zsh out-of-the box (trivial to modify the Bash example to fake it). It's also based on Python and can be very slow when using it in a fresh terminal window. I really needed a solution that was native and didn't require a lot of effort to set up.

The 'Thin' Option

I stumbled upon Ivan Čukić's excellent blog post. It's so cool, I couldn't resist trying it. I took the functions and tweaked the path where the database is stored and how it is accessed. This is a better solution compared to go and as a bonus it also offers auto-completion:

ZSH_BOOKMARKS="$HOME/.zsh/cdbookmarks"

function cdb_edit() {
  $EDITOR "$ZSH_BOOKMARKS"
}

function cdb() {
  local index
  local entry
  index=0
  for entry in $(echo "$1" | tr '/' '\n'); do
    if [[ $index == "0" ]]; then
      local CD
      CD=$(egrep "^$entry\\s" "$ZSH_BOOKMARKS" | sed "s#^$entry\\s\+##")
      if [ -z "$CD" ]; then
        echo "$0: no such bookmark: $entry"
        break
      else
        cd "$CD"
      fi
    else
      cd "$entry"
      if [ "$?" -ne "0" ]; then
        break
      fi
    fi
    let "index++"
  done
}

function _cdb() {
  reply=(`cat "$ZSH_BOOKMARKS" | sed -e 's#^\(.*\)\s.*$#\1#g'`)
}

compctl -K _cdb cdb

How to Use It

Paste the above code at the bottom of your ~/.zshrc file. Restart your terminal and run cdb_edit. This should bring up an empty buffer in your $EDITOR. To define shortcuts, use shortcut absolute/path. Here is an example file:

$ cdb_edit

public    /cygdrive/d/Workspace/public/
projects  /cygdrive/d/Workspace/projects/

Try it Out

Using the database above as an example:

~ $ cdb public
/cygdrive/d/Workspace/public/ $

The 'Fat' Option

If you are looking for something more sophisticated which wouldn't involve maintaining a database using vim then you need Jump, a bookmarking system for the bash and zsh shells. It's a great tool and quite easy to install too:

$ gem install jump
$ cp `gem contents jump | grep zsh` ~/.jump_shell_driver

and a line in your ~/.zshrc to make the magic happen: source ~/.jump_shell_driver.

Further instructions (incl. Bash) and a tutorial is available on the project's GitHub page.

Building and using node.js on Windows (32 and 64-bit) through Cygwin

Terminal

If you have used PuTTY to connect to remote machines, you would love MinTTY. It is based on code from PuTTY 0.60. Features as seen on the project's homepage include:

• Native Windows user interface that tries to keep things simple.
• Support for UTF-8, CJK fonts, and Windows IMEs.
• Drag & drop and copy & paste of text, files and folders. (Files and folders are inserted as quoted filenames.)
• Extensive mouse support, e.g. mousewheel scrolling in less and opening files and URLs with Ctrl+click
• Window transparency, including glass effect on Vista and 7.
• Small program size and uick scrolling.

Shell

I encourage you to try Zsh as an alternative to Bash (the default). Bash is fine, but if you are looking for better history management, lots of plug-ins and options for customisations you need to move on. Check out oh-my-zsh for a collection of such add-ons.

You can install MinTTY and ZSH using Cygwin's setup.exe.

MinTTY at your fingertips

Having a terminal keystroke away is essential in my day-to-day work. I need to be able to quickly get in and out of it -- read how to do it.

$ npm install paperserve

Usage

paperserve [path-to-serve]

  -p, --port [PORT]  set the port to listen on, default 8000
  -q, --quiet        turn off any logging, default false
  -h, --help         display this help message

Here's what the output looks like:

>>> paperserve: running on port 8000, serving from '/cygdrive/d/Workspace/public/node-paperserve'
>>> paperserve:   Press Ctrl-C to stop.

Source code can be found on GitHub. As for the motivation behind the project -- let's just say I prefer JavaScript to Python.

$ vim ~/.zshrc

and add a line in there:

export NODE_PATH="/cygdrive/d/Workspace/public/coffee-script/.coffee_libraries:$NODE_PATH"

The path can be anywhere on your system so adjust it accordingly. Let's go ahead and create a file inside .coffee_libraries, name it growlnotify-windows.coffee and paste this code inside of it:

{ exec } = require 'child_process'

icon = null
require('fs').realpath "#{__dirname}/icon-coffee-cup.png", (exception, path) ->
  exec "cygpath -w '#{path}'", (exception, stdout) ->
    icon = stdout
    process()

queue = []
process = ->
  exec "
  growlnotify
    '/a:CoffeeScript'
    '/i:\"#{ icon.replace(/"/g, '\\"') }\"'
    '/r:\"success\",\"exception\"'
    '/n:\"exception\"'
    '/p:2'
    '/s:true'
    \"/t:\\\"#{ exception.message.replace(/"/g, '\\"') }\\\"\"
    \"#{ exception.stack.replace(/"/g, '\\"').replace(/\n/g, '\\n') }\"
  " while exception = queue.shift()

CoffeeScript.on 'failure', (exception, task) ->
  queue.push exception
  process() if icon

We also need a proper icon -- save it in the script folder as icon-coffee-cup.png.

Next time you run the coffee command line utility, append -r growlnotify-windows like so:

$ coffee -r growlnotify-windows -wc src/

and when the compiler encounters an exception, you will receive a nice UI prompt like this:

Happy coding!

I am a Komodo Edit user myself and I love the platform. I have posted several extensions if my words are not enough to prove it.

The greatest weakness of XUL apps in my book is how static they feel. They are not as dynamic and rich as HTML documents and as a result development is usually not as easy and elegant. You are forced to restart the application between updates or rely on hacky methods to reload it while running. Being frustrated with these facts, I decided to do something about it. It would be wonderful if you could just press Ctrl+Alt+R and have a fresh stylesheet loaded into your application -- much like existing solutions for Google Chrome of Firefox. Here is one way you can do just this in Komodo:

(function () {
  for (
    var child, i = 0, length = document.childNodes.length;
    i < length && (child = document.childNodes[i]);
    i++
  ) {
    if (child.nodeType === 7) {
      if (child.nodeValue.indexOf("aero") > 0) {
        /* UPDATE: 'aero' with a keyword from your file name */
        child.nodeValue = 'discard="discard"';
        document.removeChild(child);
      }
    }
  }

  var pi = document.createProcessingInstruction(
    "xml-stylesheet",
    'href="file:///D:/Workspace/public/komodo-aero-theme/src/skin/aero/theme.css?' +
      new Date().getTime() +
      '" type="text/css"',
  ); /* UPDATE: with path to a local resource; keep new Date()... */
  document.insertBefore(pi, document.firstChild);
})();

Create this as a macro and assign a key binding to it. Pressing it will discard any previously loaded stylesheet and inject a non-cached fresh copy of it right in the beginning of the document.

This can be simulated in any XUL app -- you would need a keypress handler and some code to deal with recognising the correct combination of keys and you are off on a good start.

#!/bin/bash

stop()
{
  echo "Shutting down..."

  if [[ $SERVER_PID ]]; then kill -HUP $SERVER_PID; fi;
  if [[ $COMPASS_PID ]]; then kill -HUP $COMPASS_PID; fi;
  if [[ $COFFEE_PID ]]; then kill -HUP $COFFEE_PID; fi;

  if [ -f .coffee.pid ]; then rm -f .coffee.pid; fi;
  if [ -f .compass.pid ]; then rm -f .compass.pid; fi;
  if [ -f .server.pid ]; then rm -f .server.pid; fi;

  trap - INT

  echo "Done."
  exit
}

if [ "$1" == "start" ]; then

  COFFEE_PID=0
  COMPASS_PID=0
  SERVER_PID=0

  trap stop INT

  echo "Starting processes..."

  coffee --watch --compile --output static/lib src &
  COFFEE_PID=$!

  compass watch --config compass.config.rb --sass-dir src/styles --css-dir static/styles &
  COMPASS_PID=$!

  python -m SimpleHTTPServer &
  SERVER_PID=$!

  echo $COFFEE_PID > .coffee.pid
  echo $COMPASS_PID > .compass.pid
  echo $SERVER_PID > .server.pid

  echo "Use '$0 stop' to kill."

elif [ "$1" == "stop" ]; then

  if [ -f .coffee.pid ]; then read COFFEE_PID < .coffee.pid; fi;
  if [ -f .compass.pid ]; then read COMPASS_PID < .compass.pid; fi;
  if [ -f .server.pid ]; then read SERVER_PID < .server.pid; fi;

  stop

else

  echo "Usage: $0 [start,stop]"

fi

You need an empty compass.config.rb file to be present. Mine usually has some goodness in it:

images_dir      = 'static/images'
relative_assets = true

$ python -m SimpleHTTPServer &

and your working directory is now accessible over at http://localhost:8000/

I went to a local store the week before, and asked for a brand that I probably made up since I couldn't remember the name. The cashier politely explained they "don't offer this" so I had to leave empty-handed. On my way to work I came by another store, and I decided to try my luck again, being the kind of persistent person I am. Tried my best to explain what I was looking for and this time I received a different reply -- "We don't have this brand available, but I think we have something you might like." I am pretty sure the cashier did not have a clue what I was on about, but nevertheless she offered to help. I ended up recognising the brand I was after. Although it looks quite different from what it used to 4 years ago, I decided to buy a few packets.

My point? Don't turn down Customers just because you don't understand their requirements. Always offer to help and be sure to mention any products which you might already have available. We, Customers (and that includes you), need to be educated and at times even pushed to the 'right' direction. It's that simple.

• Financial markets require control
• Nuclear is core energy
• Free trade, mobility and cultural exchange
• Cars should run on electrical power
• Education is an investment in the future
• Optimised food is the future

Head over to the European Parliament @MySpace for more information (if you have AdBlock Plus installed, you may need to disable it for that page only).

Three-pound mass of jelly [...] and it can contemplate itself contemplating the meaning of infinity.

Much like the popular TV show 'Big Brother', let's imagine an advertising system that knows a lot about you and what you like and are likely to buy in particular. To do so, the system relies on a centralised database that collects information from 'partners'. Any website can opt in to participate and act as a 'partner'. To start, you first identify your website with a set of keywords that best describe your business. Each time a user visits any of your pages, you forward information to the centralised database. This would usually contain the IP address of your visitor, keywords associated with the page and statistics, such as average time on the website, referrer and others. The advertising system aggregates all this information and builds a comprehensive profile of keywords based on you, the 'partner', and pages your user visits. As the user goes from website to website, the system knows more about them and things they search for, read and chat about.

At this point it might not seem as a big improvement. Most platforms already do most of the above today. Let's go a step further. Imagine a user browsing the web looking for pages with information on Halo 3 and XBox. We can safely assume the user is interested in purchasing an XBox console to play Halo 3, but we cannot tell for certain whether they already own one. Advertising 'partners' can submit this kind of information back to the centralised database. If a 'partner' is an on-line shop, upon each successful order a list of keywords that match the purchased products is submitted back to the database. At this point the advertising system can offer suggestions for Halo 3 expansion packs or XBox modifications, such as an HD player.

Using data-mining the aggregated information about a user can be sorted in a timeline which can later be analysed and used to provide up-to-date suggestions. If a user visits a page which contains the keywords 'hd dvd', but the user has been looking for 'blue ray' in the last week, we can assume they are interested in an HD player of the latter kind and serve the appropriate advert.

With this kind of system privacy must be at the top of the list of concerns. Harmful websites may request adverts for a particular IP and based on the results, build a profile for a given user at their first visit. For this, and many other reasons, no personal information should even be kept on record. Details such as first name, surname, date of birth and others should always be rejected by the system. A community, much like the one driving Wikipedia, should keep an eye for harmful websites and abusers. Registrations should be allowed only by referral. Limits on the amount of adverts served per 'partner' should be in place where appropriate.

More start-up companies are founded every day and they need a better source of income. Old companies are already making their best to optimise websites and make more sales, but there is only as much one can do. While contextual advertising might be hot today, I believe person-targeted advertising will soon replace it.

What really decides consumers to buy or not to buy is the content of your advertising, not its form.

The Contacts List: Your friends and family on Facebook are aggregated into groups. Names, addresses, telephone information, avatars are downloaded to your social device. No longer the need to keep an up-to-date information for everyone, updates on-line are propagated instantly.

Messaging: Twitter is a great service and a lot of people are using it. I do tweet regularly, but on the other hand I don't recall the last time I sent someone a message through my phone. The social device replaces the SMS interface with Twitter. Your text messages become direct messages while you still keep the option to update your public timeline.

Photos: Most handsets nowadays come with at least a 3 mega-pixels camera. Your social device will upload every photo to Flickr and auto-tag it with your current location. Friends and family can subscribe to your stream and will receive updates immediately. Photos can also be shared through Twitpic and replace today's MMS interface.

Video: Recordings you make with the social device are uploaded to YouTube and where appropriate protected so only a handful of your Contacts can watch them.

Mail and Calendar: Let's face it - in today's fast paced World you need to keep track of your schedule. Your social device will integrate seamlessly with Google. You can add personal events, send invitations and subscribe to public and friends' calendars. Mail will be synchronised instantly so you can keep an eye on that very important Customer wherever you are.

Documents: Text, spreadsheets and presentations live on Google Docs. Any changes you make on-line are reflected on the social device.

Files: everything you collect or download on your social device is uploaded to the Cloud. Music, movies, programs they all live on-line while a local copy is kept where appropriate to improve performance. A BitTorrent client is provided for larger downloads.

Multimedia: Streaming TV with a thousand of free channels is available through Livestation and radio through Last.fm.

News: Newspapers are a thing of the past. The social device aggregates content from the hundreds of free sources available on-line. Breaking news, sports and the weather forecast can be accessed at any time. RSS is integrated with Google Reader and updated regularly.

Extensions: What made Firefox a great browser are the free extensions available for download. You can customise almost every aspect of the interface and add new features. Extensions will also make a great add-on for your social device.

Open: Built on top of open and dynamic technologies is a must-do.

These are just a handful of the services the social device might support. Seamless integration is provided throughout the interface. Think about using Mail to forward a presentation to your colleagues and watch their reactions.

The best part? Your contacts, messages, photos, video, mail, calendar, documents and files all live on-line. Even if you have to replace the device itself, you will not lose any data.

The social mobile device is just a concept, but it sure makes you think about how old and disconnect the technology we use today is. It's all about staying connected and sharing.

There is no delight in owning anything unshared.

We go on with our on-line identities without paying much attention to the details we share about our personal lives, interests, hobbies and friends. We have profiles on Facebook, accounts on Twitter, Flickr, YouTube, discussion boards and other public websites. These are all open and available to anyone. Could that affect us in any way?

Excuse me, did you just say data mining?

Data mining is the process of sorting through large amounts of data and picking out relevant information. [...] Wikipedia page on Data mining

What good can it do? Imagine yourself sitting at home on a Saturday, no plans whatsoever, but things tend to get a bit boring. You go to www.i-have-no-plans-please-help.co.uk and you enter your user name, the very same user name you share across most websites. Here is where the magic happens:

• You have a Facebook profile registered under that user name. Since your profile is not made public by default, another user can only see your friends and in some cases your and their status updates. Looking at the most popular groups and events, data can be extracted about your interests and causes you support.
• You also happen to have a Twitter account where your timeline is visible to anyone. Your list of friends can be cross-referenced with the one downloaded from Facebook.
• There is a page on Flickr where you share your favourite photos you've taken whenever there was a cool party or a concert nearby. Groups can be cross-referenced with those available on Facebook.
• In some cases you might be sharing your current location via services such as Google Latitude.
• YouTube introduced a new feature called Active Sharing not a long time ago. In a few words, it allows anyone to see videos you have watched. Groups, channels and friends are available and can be cross-referenced.
• Let's not forget Google itself where you can run a query on your user name or your full name (available on any of the websites above) and get a somewhat accurate list of all other discussion boards and websites you actively participate in.

Now imagine all that information gathered in just a few seconds. Using data mining relevant bits can be filtered and further analysed. Here is one possible suggestion www.i-have-no-plans-please-help.co.uk might throw at you:

Hey, it turns out last Saturday you went to a fancy Chinese restaurant [via Twitter] and you enjoyed the food [via Flickr]. Your friends are currently not very far away [via Google Latitude] and are organising a party [via Facebook], but they don't have any good ideas for a nice place [via discussion boards]. You should take them to the Chinese restaurant and after that you might catch a movie. It seems like everyone is talking about RocknRolla [via Twitter, Facebook, IMDB boards]. And while you are at it, stop by Jennifer's place, her sister is in town [via Facebook] and you have a few hours to kill anyway.

* via xxx indicates the service(s) used to gather the information

It sounds a bit scary, doesn't it? But we are talking software here. The website doesn't really know you. It just analyses data and makes the best of it. What is scary is if someone decides to target you. We are bound to have someone take all this goodness and profit from it.

Don't get me wrong. I am not saying stop using Facebook, Twitter, Flickr and (your favourite services here). Rather, refrain from sharing too much about yourself and your friends. I have to dash now, I've just received an SMS recommendation for a new coffee shop I must try… wonder how they know I like coffee so much?

It's just as difficult to live in a self-made hell of privacy as it is to live in a self-made hell of publicity.

A nightly build [...] takes place automatically, typically when no one is likely to be working in the office. The results of the build are inspected by the arriving programmers, who generally place a priority on ensuring the [...] build does not break. Wikipedia page on Nightlies

While that may be a perfectly good definition, it still fails short to explain what I mean in details. Being a 'nightly freak' for me means running the very latest and greatest version of a program. The reason they are called 'nightly builds' /as suggested in the quote above/ usually has something to do with the fact they are produced at the end of the day, once everyone has left the office.

What are the benefits you may ask? Nightlies:

• Usually contain fixes and features not present in the official version,
• Are experiments in a way that they may offer a different approach to a task,
• Can have much better performance,
• Are a way for you, the User, to evaluate all of the above and submit feedback.

Take, for example, Firefox. While you may be running version 3.0.x, I have already adopted 3.1 in my daily browsing. It contains a lot of new features among which Geolocation, Private Browsing a.k.a. porn mode and a free video codec. Gmail, Facebook and other web applications perform in times faster than they do in 3.0.x.

Another great example is Thunderbird /if you have never heard of it before, think of what Firefox is to Internet Explorer and then apply the same concept to Outlook/. The nightly build contains so many new features it's hardly possible to fit them on a single blog post.

There is, however, a side effect to all the great new stuff you are getting. Bugs. Yes, nightlies are unstable, they crash a lot, they may even refuse to run or damage your computer /although I have never experienced the last/. Developers need to know about these issues and this is where we, the Users, come in. As a 'nightly freak' I submit a lot of bug reports and sometimes even suggest a possible fix. Your partipation ensures those bugs do not make it to the final version and also has the side effect of making you feel a tad better about yourself.

My advise to you is: get involved. Get the latest Firefox or look for a nightly of your favourite program. Try it out, see if it crashes, inform the developers and enjoy a better product!

Observation is a passive science, experimentation an active science.

I found this video while browsing on Twitter. It is more or less a follow up on my previous post on 'Can we have too much information?'

I have been employing Perry's approach for a week. It really is comfortable knowing all you ever had to remember is now written down and away from everything else you need to deal with right now.

You can follow Perry Belcher on Twitter or have a look at "some stupid home videos".

Did you know that every time you glance at the moon your brain throws something else away? We humans simply can't comprehend the vastness of information out there. Our brains have limited capacity, they can only store as much memories. When there is not enough room, something needs to go away. Stop and think about it for a second… yes, the simple act of observing an object costs you brain space. So does watching television or having a chat with your mates. Everything you do needs to be recorded so you can play it back later. But we are not like computers, we cannot 'add' more space. What we have is what we get. What role does the Internet play in all this madness?

How many blogs do you follow on average? How many people do you have on Twitter? Do you find yourself spending countless hours browsing the web, going through websites? Researchers have found that ours brains are rewiring themselves to deal with how we manage the large amount of information available on the web. When you go to a website, it's rarely that you read through every single sentence as you would do with a book. Instead, you find your way around by skimming through information, lots and lots of information. Same applies for Twitter, if you are following many people on there, it's rarely that you read every single twit.

Let's connect the dots. One, we know ours brains have limited capacity. Two, we throw away old or unused memories to make room for current ones. Three, our brains work somewhat differently as we deal with huge amounts of data on a daily basis, but it's all in chunks. What do you get? One big mess.

Yes, we can have too much information and many people on the web do. We end up with brains filled with rubbish, things you won't probably ever use or need and yet we throw away childhood and school memories.

By now you are probably thinking does it all mean we should stop reading blogs and using Twitter or even go to such lengths as to say we should kill the Web? No. I think we should focus our attention on the information we are getting every single day. Why have 10, 000 people on Twitter when you are only interested in probably 1% of them, which is still a high number. Why read all those stupid blogs you've meant to remove for ages and yet you spend hours every week to read the headings? Why bother to find what you need on that website when you could as easily try another Google query and get to what you want faster? Why watch television when you could find your way to news you are only interested in and have some real value in your work or daily life? I guess the list is endless, but the main point here is we should learn to filter the information we are allowing our brains to collect.

I, for one, intend to do all of the above and even go a step further. There is only as much data I can store in my brain, why not make the best of it?

There are billions of neurons in our brains, but what are neurons? Just cells. The brain has no knowledge until connections are made between neurons. All that we know, all that we are, comes from the way our neurons are connected.

I was given the task to complete several projects in ASP.NET. Those were the days of Web 1.0 and AJAX wasn't the buzz word it is today. As I learned more and more of how .NET works and what problems it solves, I became fascinated by anything Microsoft. Every project thrown at me was done with Microsoft's tools and technologies… but technologies change and that's the beauty of it.

Open-source projects were suddenly becoming more and more popular. Web applications were used more often than ever before. Once thought to be the land of wacky system administrators, open-source tools and software were making their way into the mainstream. I became ever more fascinated by the opportunities.

I started working on an open-source project called XOAD (formerly NAJAX). As the name suggests, it was a set of tools to allow you to do fancy things never seen before in web applications. As years went on, people realised the power of sharing, collaborating and pushing the limits of technologies. Somewhere around that time Web 2.0 was born.

We have all come to enjoy the wonders of web applications we use today. I don't have Microsoft Office installed any more. I do all my editing and spreadsheets in Google Docs. Why keep all my photos on my PC when I can as easily share them on Flickr? And so on, and so on.

You might wonder at this time - what new wave of applications? Where are you going with all this?

We love buzz words. We use them every day. How about 'cloud' computing… or let's just call it 'The Cloud'. Yes, that's the new buzz word everyone is looking up on Google. But what is it in reality? The simplest way to define it is to be really general and summarise it in a few words: Simply having your stuff on-line. Photos on Flickr; documents, bookmarks and contacts on Google; your favourite recipes stored on-line. And so on, and so on.

Where are things heading? We now have the tools to move many of our activities to the cloud. But we still run those dreadful desktop applications that take a lot of resources, time to install and support. What if there was a way to move those applications to the cloud as well, wouldn't that be nice for a change? It seems as Microsoft is finally pulling their act together and have come with a few ideas about the future of desktop applications. Welcome to your Live Mesh.

Mesh is a new service allowing you put up to 5GB of data on-line, free of charge. You even have a Live Desktop where you can download and preview those files. Need those reports you did last night, but have no access to your PC? No worries, get them from your Mesh. But the list of features doesn't end here. Mesh allows you to run applications as you would do on your desktop. That's right - the same application you would run on your PC now you run it anywhere you are and that's without having to wait for Setup to finish the install.

Let's let our imaginations run for a while: You go out with friends to enjoy a quiet evening at a local restaurant. You snap photos of everyone around the table and those are instantly uploaded to your Mesh and synced with all your friend's devices so everyone gets their own fair share of laugh. You get home and you open up your Messenger from within your Mesh. You didn't bother to install it and it's always with you no matter where you go. You chat for a while with your friends, exchange that very important website everyone's talking about. On the following day you are at the library and all your stuff is at your fingertip - friends, photos and that very dirty website.

It all sounds really good, doesn't it? I am somewhat glad to see Microsoft using open standards and pushing the boundaries of what today's technology can do to deliver a great end-user experience. I hope they won't screw up as they have done countless times in the past. Live Mesh is certainly a great hub to start your digital life.

I encourage you to give it a try at www.mesh.com and share your thoughts. For those of you more interested in the underlying technology, have a look at Channel9 for a great video of a new-wave application.

The number one benefit of information technology is that it empowers people to do what they want to do. It lets people be creative. It lets people be productive. It lets people learn things they didn't think they could learn before, and so in a sense it is all about potential.

I used to watch a lot of TV shows and I mean a lot. The list is endless: CSI, Criminal Minds, Bones, Psych and shows you've never heard of. I have thrown away those mindless action series and have started watching Qi, How It's Made, History Channel [...] instead. This /what it might seem a small/ change had a bigger impact on me than I expected. I started looking for new and interesting stories; well-known facts and others not so wide-spread, but nevertheless, fascinating. Once I adopted Twitter it became another medium I use to gather bits and pieces of information. I also find myself looking up odd questions like 'What was the duration of a work week back in 1850?' or 'How many Americans suffer from insomnia?' Having the answer to a question, I rush to share it with others. What it will result in I can never tell. It might spark a discussion, it might throw someone off balance, it might even put a smile on one's face. I hope in many cases it is the latter.

How does Twitter affect you? Did it change anything in your day-to-day life?

Thank you for reading.

A sense of curiosity is nature's original school of education.