Posted on

Installing Sass on CentOS 6.5

SLP Sass Banner

I just discovered that Sass is missing from my WordPress Development Kit Vagrant box.   My Vagrant box is on the latest CentOS 6.5 release and, luckily, setting up Sass is very simple for vanilla CentOS 6.5 users.  It is literally a two-step process:

$ sudo yum install rubygems
$ sudo gem install sass

Now I can add this to the NetBeans executables configuration by adding the path /usr/bin/sass.

Configuring Sass in NetBeans
Configuring Sass in NetBeans

Now I can edit my .scss files and have the corresponding .css files auto-generated right from NetBeans.  Nice!

Posted on

Custom Ubuntu Keyboard Layouts

Sometimes a programmer just has to have certain keys in certain places.

For instance, I like my number keys and symbol key switched, so I don’t have

to press shift to type symbols.

Here’s how I created a custom keyboard layout in Ubuntu:

In the file /usr/share/X11/xkb/symbols/us, I added the following section, thus modifying my default layout:

partial alphanumeric_keys modifier_keys
xkb_symbols "basic" {
name[Group1]= "USA";

// Alphanumeric section
key <TLDE> {        [asciitilde,        grave            ]        };
key <AE01> {        [    exclam,        1                ]        };
key <AE02> {        [        at,        2                ]        };
key <AE03> {        [ numbersign,       3                ]        };
key <AE04> {        [    dollar,        4                ]        };
key <AE05> {        [   percent,        5                ]        };
key <AE06> {        [ asciicircum,      6                ]        };
key <AE07> {        [ ampersand,        7                ]        };
key <AE08> {        [  asterisk,        8                ]        };
key <AE09> {        [ parenleft,        9                ]        };
key <AE10> {        [ parenright,       0                ]        };
key <AE11> {        [     minus,        underscore       ]        };
key <AE12> {        [     equal,        plus             ]        };
key <AD01> {        [         q,        Q                ]        };
key <AD02> {        [         w,        W                ]        };
key <AD03> {        [         e,        E                ]        };
key <AD04> {        [         r,        R                ]        };
key <AD05> {        [         t,        T                ]        };
key <AD06> {        [         y,        Y                ]        };
key <AD07> {        [         u,        U                ]        };
key <AD08> {        [         i,        I                ]        };
key <AD09> {        [         o,        O                ]        };
key <AD10> {        [         p,        P                ]        };
key <AD11> {        [ bracketleft,      braceleft        ]        };
key <AD12> {        [ bracketright,     braceright       ]        };
key <AC01> {        [         a,        A                ]        };
key <AC02> {        [         s,        S                ]        };
key <AC03> {        [         d,        D                ]        };
key <AC04> {        [         f,        F                ]        };
key <AC05> {        [         g,        G                ]        };
key <AC06> {        [         h,        H                ]        };
key <AC07> {        [         j,        J                ]        };
key <AC08> {        [         k,        K                ]        };
key <AC09> {        [         l,        L                ]        };
key <AC10> {        [ semicolon,        colon            ]        };
key <AC11> {        [ apostrophe,       quotedbl         ]        };
key <AB01> {        [         z,        Z                ]        };
key <AB02> {        [         x,        X                ]        };
key <AB03> {        [         c,        C                ]        };
key <AB04> {        [         v,        V                ]        };
key <AB05> {        [         b,        B                ]        };
key <AB06> {        [         n,        N                ]        };
key <AB07> {        [         m,        M                ]        };
key <AB08> {        [     comma,        less             ]        };
key <AB09> {        [    period,        greater          ]        };
key <AB10> {        [     slash,        question         ]        };
key <BKSL> {        [ backslash,        bar              ]        };
// End alphanumeric section

Each line in this file tells Ubuntu what character to type when a particular key is pressed. For instance, in a line like

key  {        [ numbersign,       3                ]        };

…we can see that key “AE03” will produce the number sign by default, and “3” when shift is held down. This is reverse of the normal layout, since it reflects my customization. The original line would read:

key  {        [ 3,        numbersign                ]        };

All the spaces being used to line everything up are just to help make things look nice and neat, and could just as easily be left out.

After modifying this file, I went to “System > Preferences > Keyboard” and clicked the “Layouts” tab. I added the layout, which was found under the United States country. I had some problems with the layout switching arbitrarily, or applying in one program but not others, so I disabled all other layouts.

It’s as easy as that. Remember to make a backup of your original /usr/share/X11/xkb/symbols/us file, and hack away!

Posted on

Firediff: See exactly what you’ve changed in Firebug

Firediff Screenshot

If you use the Firebug add on for Firefox, you also want Firediff, which is a plugin for Firebug itself.

In Firebug, once you’ve done a lot of tweaking and editing to get the site looking right in the browser, there is no way in the current version (1.5) of Firebug to see a list of just the edits you have made. It’s very difficult to find every last change and make those same changes in the code.  That’s what Firediff is for. You make all your edits, and then see a handy list of exactly what you changed. You can see a sequential log, or a color coded version of the file with all your changes highlighted.

In case you don’t know, this is completely awesome, and has been sorely lacking in Firebug.

Firediff stops just shy of producing a usable patch file for updating your source code. However, it will show you a very useful visual diff to use for reference as you edit the source file yourself. It is far from obvious how to get it. Here’s the trick. After a bunch of experimental editing to a stylesheet in Firebug, clicking on “Changes” (the Firediff tab) gets you a change log.  You see every time you turned an attribute on or off, and every other little change you made along the way. This is not very useful. You may have a list of 150 things you did, when all you care about is the five things you eventually ended up with. You don’t care that you changed the font size 25 times; you only care about the final font size.

To see that end product, scroll all the way down to the last entry in the list of changes, right click it, and click “Show snapshot”. This will show you a highlighted version of the file, with your additions and subtractions in green and red, respectively – just like in the screenshot for this article.

This is the most useful view within Firediff.

Once you install Firediff, be sure to check the “Show Firebug changes” option on the “Changes” tab, in order to see only your changes. Otherwise, you’ll see every change made by every bit of JavaScript on the site.

So go get Firediff. You can find it on the Firediff project website (which may have more recent releases) or the Mozilla Addons site.