Stan Angeloff’s blog

Ubuntu 12.04 (Precise) light menus

Sat, 28 Apr 2012 16:55:26 +0300

The design team at Canonical has decided to refresh the default theme in Ubuntu for its LTS release to feature light menus from light sources and dark menus from dark sources.

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.

Failed to load module "globalmenu-gtk" after uninstalling gnome-shell

Mon, 06 Feb 2012 17:53:09 +0200

If you get:

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.

Diff'ing images in Git

Wed, 01 Feb 2012 23:32:00 +0200

I use Git on the command-line usually, but lately I’m using more and more of git-cola. It’s compact, keyboard-friendly, regularly updated, features a clean UI with main focus on staging and diffs. It was while working in git-cola merging over 100+ files from two different branches that I discovered quite a few overlapping image files. The diff panel was useless and it’s not like I can rely on the command-line for non-textual diffs. Did what every developer does nowadays when faced with an issue, I googled side-by-side diffs, git diff images and any other combination of words and phrases I could come up. There wasn’t much, if anything, useful that came up in the results so I got to work.

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:

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, will open up the configured diff tool for the highlighted file.

Not enough random bytes available.

Tue, 24 Jan 2012 14:38:45 +0200

Please do some other work to give the OS a chance to collect more entropy! (Need more bytes)

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.

pacman -Syu barfs error: XYZ: signature is unknown trust

Tue, 24 Jan 2012 12:45:24 +0200

Things kept getting better and better. Following the recent pacman upgrade, I was now facing issues with regards to package signatures. I had already successfully completed the keyring initialisation and I was a bit stumbled as to what exactly I was doing wrong.

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.

Ubuntu 11.10: Replace the Default (and Annoying) Orange Scheme

Fri, 14 Oct 2011 13:02:00 +0300

Switching to Ubuntu 11.10 is painful, ugly and time consuming… but more on that some other time.

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.

Compass Magick Tutorial - Part 2

Fri, 29 Apr 2011 16:41:00 +0300

There is more to Compass Magick than gradients and borders. In the second part of the tutorial series, we will go through the steps to create a simple 3-state button with an icon.

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.

Compass Magick Tutorial - Part 1

Sat, 16 Apr 2011 17:47:00 +0300

Introduction

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:

Fill the entire canvas with $theme1 (yellow)
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

Yoke: a drop-in, quick and dirty alternative to Sprockets

Wed, 23 Feb 2011 18:02:22 +0200

In local development, I tend to create separate pieces of JavaScript for every controller, model, view, etc. I loved the idea of Sprockets — grab all these files and stitch them together. While it worked well for a while (on the command-line), I got fed up with how slow it runs, especially on Ruby under Cygwin.
So, what to do? Node.js of course. Why? It’s fast, it’s super-easy to install and writing a script on top of it is a breeze. Meet Yoke:

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.

A quick and dirty way to use namespaces in CoffeeScript

Tue, 07 Dec 2010 16:07:47 +0200

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

Extract changed files from Git and prepare a deployment (Bash script)

Fri, 05 Nov 2010 22:34:00 +0200

So, you have moved over to Git. Well done! You have big plans for your future deployment process — it is going to be automated and thoroughly tested… but you still have to support your existing legacy products. If you are like me, you most likely started with simple FTP copies (oh, this takes me back). I moved over from SVN and TortoiseSVN was my primary choice for a desktop client. After each deployment, I would create an SVN tag so next time I can get a list of all changed files. In TortoiseSVN it’s as simple as selecting two revisions while holding down the Shift key and doing a Compare Revisions. From the new window you can export all changed files to a new location. If your project in 100MB in size, you only ever have to deal with modified files on subsequent updates. Simple (or so I thought back then).

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:

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 on Red Hat Enterprise Linux (RHEL)

Fri, 15 Oct 2010 14:53:00 +0300

Following my last post I moved on to installing Vim 7.x as the one that comes with RHEL 4 is pretty outdated (6.x).

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.

Git on Red Hat Enterprise Linux (RHEL) 4 i386

Fri, 15 Oct 2010 14:04:00 +0300

I have been struggling with this for a while now. There is no yum to begin with and up2date doesn’t help much either (no git-* packages). Here is a quick solution:

$ 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.

MinTTY at your fingertips

Sat, 11 Sep 2010 23:38:00 +0300

How often do you need to get in and out of your terminal as quickly as possible? I use Cygwin for Linux emulation under Windows and MinTTY as my terminal of choice. MinTTY is great as it supports semi-transparent backgrounds and fullscreen mode (and lots more, be sure to check out the homepage). It is so tiny I don’t mind having a copy of it running at all times, however it bugs me when I see its icon on the taskbar. The following is an AutoHotkey script which launches a new MinTTY window, if one is not started already, sets it up in fullscreen mode and lets you do your work until you press Win+C again to send it to the background and remove all traces of it on your desktop.

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.

cd with bookmarks and auto-completion for Zsh

Sun, 29 Aug 2010 00:00:00 +0300

If you are like me, you do a lot of terminal work and cd is your friend (or enemy). I was getting really tired to cd /home/stan/projects/important-project/src/ every time I launch my shell. It’s bad enough when you have one project to work on, but as things get scattered, you tend to do more directory traversing than actual coding.

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:

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

Wed, 25 Aug 2010 22:44:11 +0300

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

I have been going through the existing GitHub page for building node.js on Cygwin/Windows adding my own comments/steps and missing packages. I believe this is now a full set of instructions that should get you cracking pretty quickly from scratch.

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

Alternative Cygwin terminal & shell

Tue, 24 Aug 2010 22:20:00 +0300

I just realised many, if not most, Cygwin users stick with their default terminal which is the Cygwin Bash Shell. I never understood why this is the default with each installation. It is no better than Command Prompt — horizontal window resizing is out of the question, custom fonts are limited and mouse support is, well… missing.

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.

"If you need more than 3 levels of indentation, you’re screwed anyway, and should fix your program."

Mon, 23 Aug 2010 00:12:55 +0300

“If you need more than 3 levels of indentation, you’re screwed anyway, and should fix your program.”

- Linus Torvalds (via fooyeahcode) (via seanmonstar)

node-paperserve - Quick and dirty web server from your working directory

Tue, 17 Aug 2010 14:57:21 +0300

Install

$ 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.

Cygwin, CoffeeScript & Growl for Windows integration

Mon, 16 Aug 2010 17:24:00 +0300

Let’s start by adjusting where node.js looks for libraries. We will need this later on when we use the newly implemented -r command-line switch in CoffeeScript. Open up your shell init file, in my instance ~/.zshrc:

$ 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:

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!