The puzzle

Projects. We get them all the time. Each is a puzzle we lay out on the table and look at and try to solve. All the pieces are different sizes and shapes. Our jobs as engineers then is to pick the pieces that fit together the best to create the shape we are aiming for.

More than ever application development isn’t about creating something new, it’s about knowing what’s available and fitting together the pieces that already exist to create something novel.

The pieces

Frameworks. Libraries. Even entire languages, sometimes more than one of them, get incorporated into our puzzle. Some pieces fit together well with other pieces and sometimes two pieces just won’t mesh together at all.

Groups of pieces tend to form particular shapes or patterns. We constantly keep trying to fit different pieces together and inevitably make a few of our own pieces to help fill in the gaps in the shape we’re trying to form.

Except there’s still something missing…

The Big Picture

Every jigsaw has a picture. It’s usually the major point of the puzzle—put together the jigsaw and then you can appreciate the pretty pictures you can see.

There’s a pretty glaring problem here. All those pieces we mentioned; they are pieces of other peoples puzzle. Pieces that we’ve appropriated and melded into our own puzzle. The puzzle is put together and has the right shape but the picture is muddled. At best it is blank; the original authors foresaw this problem and deliberately tried to avoid painting their own image on their pieces. At worst we have an image that looks like a paint blot.

This concept applies at many levels—in application architecture where it can feel like we’re trying to paint all our pieces to fit what we need before slotting them into place and praying for the best when we’re done, in UI design where it can be a literal image that’s created by various components in the system that may not work together very well, in UX where disparate ideas and ideologies can create a system that is difficult to use.

As engineers it can be easy to lose sight of what we’re creating. It’s far too easy to focus on the pieces of the puzzle and lose track of the picture we’re trying to create—focus on tools and processes instead of what we’re using them to create.

The Small Picture

Or, a treatise on modular design.

Extending the metaphor to breaking point, it’s easier to solve many small puzzles than one large puzzle. The common answer to this is black-box modules whether this takes the form of a plugin system or a full-blown service-oriented architecture.

From a human perspective this make a lot of sense. It’s easier to solve small well defined problems. It’s easier to keep track of all the pieces and easier to keep the whole picture in mind when there are fewer pieces forming a smaller image.

0. Install the DevKit

If you don’t already have it then go grab the DevKit and extract it somewhere. I personally highly recommend injecting the variables from devkitvars.ps1 into your user accounts environment variables rather than using the scripts.

1. Download and extract CMake into the DevKit.

The first thing you’ll need that doesn’t come standard with the DevKit is CMake. This is a hard requirement of rugged so go grab the ZIP binary distribution from the CMake website. It is unimportant that CMake only release a 32 bit distribution for Windows. Extract the ZIP file into the DevKit folder. You should end up with a %RI_DEVKIT%\bin\cmake.exe file if you’ve done this step correctly.

2. Download and extract pkg-config-lite into the DevKit.

Next is another standard build tool, pkg-config. For ease of install we can just use pkg-config-lite which is good enough for what we need here and has no extra dependencies. You can download pkgconfiglite here. Just drop the single EXE file into your %RI_DEVKIT%\bin folder.

3. Download latest release of libssh2.

Download the latest release of libssh2. The download links are halfway down the page but don’t really stand out. Extract it somewhere — it doesn’t really matter much where.

4. Build libssh2.

The trickiest part of building libssh2 is that you need to use mingw’s sh and then mangle paths to keep mingw happy. The prefix path you pass to configure should be the mingw version of %RI_DEVKIT%. I’ve used my own path in the commands below, but you should update it with the correct path for you.

Open a terminal and navigate to the folder you extracted libssh2 to and run the following commands:

$ sh
$ ./configure --prefix=/c/Ruby22-x64/DevKit-mingw64-64-4.7.2 --with-wincng --disable-shared
$ make && make install
$ exit

5. Fix prefix in %RI_DEVKIT%\lib\pkg-config\libssh2.pc to a Windows path.

Open this file in your favourite text editor and modify the prefix= line back to a valid Windows-style path:

prefix=c:/Ruby22-x64/DevKit-mingw64-64-4.7.2

6. Compile rugged from source.

As of the time of writing (2016-01-04) the master branch of rugged doesn’t support libssh2 on Windows. I’m working on getting this fix into master for everyone to enjoy.

$ git clone https://github.com/mscharley/rugged.git mscharley-rugged -b windows-pkg-config
$ cd mscharley-rugged
$ git submodule init
$ git submodule update
$ gem build *.gemspec
$ gem install *.gem

7. Test it out!

#!/usr/bin/env ruby

require 'rugged'

# Or your favourite SSH key...
ssh_key = File.expand_path('~/.ssh/id_rsa')
# Or a path to a repository on your computer.
repo = '.'

repo = Rugged::Repository.new(repo)
# You can parse the username out of the remote url, but it is required here.
creds = Rugged::Credentials::SshKey.new(username: 'git', privatekey: ssh_key)
repo.remotes['origin'].fetch credentials: creds

Usmu is built from the ground up to be extensible and modifiable. It is not, as Jekyll is, designed to be used as a secure public hosting solution though obviously the resultant HTML could safely be displayed via virtually any web host.

I’m also making a very real effort to get it supported everywhere. To date, Usmu core and all core plugins like the S3 uploader all work on both Linux and Windows and should work on OS X (but I don’t have anything available to test with). If there’s a compatibility issue then it’s a bug.

Usmu is a Tilt API client. This means that it automatically supports any template type that Tilt supports, which is quite a lot. Out of the box Usmu ships with Slim for use with templates and Markdown via the redcarpet gem (or Kramdown for the JRuby folks).

For the Github fans there’s already plans on making deploying to Github Pages simple. Github Pages support is live!

If you’re interested to see what an Usmu site looks like under the hood you can check out the source for this website.

$ jekyll build
Configuration file: D:/Websites/matt.scharley.me/_config.yml
            Source: D:/Websites/matt.scharley.me
       Destination: D:/Websites/matt.scharley.me/_site
Generating Compass: D:/Websites/matt.scharley.me/_sass => D:/Websites/matt.scharley.me/_site/css
identical _site/css/handheld.css
identical _site/css/ie8.css
identical _site/css/print.css
   remove images/sprites-s8bbc0e5b70.png
   create images/sprites-s8bbc0e5b70.png
identical _site/css/style.css

      Generating... done.

I originally created this plugin back just before Jekyll 1.3 was released but it’s gone through a few spurts of growth and I now feel it’s up to public usage. So please, if you are using either Compass or plain Sass then please give this plugin a shot. If you are using simple Sass, then this plugin will allow you to easily manage @import properly with full partial support; and if you do decide to upgrade to Compass at some point, well, you already have you simply need to start using it. It’s worth it, I promise.

Issues to the issue queue please, but feel free to discuss this plugin below.

@import 'sprites/*.png';
@mixin svg-background($img) {
  .no-svg & {
    @include sprites-sprite($img);
    background-size: auto auto;
  }
  background-image: inline-image($img + ".svg");
  background-size: sprites-sprite-width($img) sprites-sprite-height($img);
}

So what does this little baby do? Well, it sets up a background image that is either an inline SVG image, or a segment of a PNG sprite depending on the capabilities of your browser. All images live separately for easy editing and all sizing is done automatically to the size of the png. This allows your master SVG image to be any size you wish. Compass automatically handles stitching together a PNG sprite for us and also tackles inlining and encoding the SVG asset for us as well.

This technique does rely on having something like Modernizr available and doing at the very least SVG detection so that we can automatically switch methods in CSS. Unfortunately this is required as some of the properties conflict with each other such as background-size and background-position.

Example usage:

a {
  width: 32px;
  height: 32px;
  display: block;
}

@each $site in github, bitbucket, google-plus, linkedin, stackoverflow, twitter {
  a.#{$site} {
    @include svg-background(quote($site));
  }
}

Produces:

.no-svg section#social a.github,
.no-svg section#social a.bitbucket,
.no-svg section#social a.google-plus,
.no-svg section#social a.linkedin,
.no-svg section#social a.stackoverflow,
.no-svg section#social a.twitter {
  background-image: url('/images/sprites-sfa80a12e72.png'); background-repeat: no-repeat;
}

section#social a {
  width: 32px;
  height: 32px;
  display: block;
}
section#social a.github {
  background-image: url('data:image/svg+xml;base64,<base64 string>');
  background-size: 32px 32px;
}
.no-svg section#social a.github {
  background-position: 0 -32px;
  background-size: auto auto;
}
section#social a.bitbucket {
  background-image: url('data:image/svg+xml;base64,<base64 string>');
  background-size: 32px 32px;
}
.no-svg section#social a.bitbucket {
  background-position: 0 0px;
  background-size: auto auto;
}
/* etc... */

Thoughts? Comments? Leave them below. And now I have pretty social media links on the right hand side of the screen, so please feel free to contact me there as well.

Quite a while back now Twitter disabled simple authentication. Apparently there were lots of people using the Twitter API directly in a basic RSS reader and requiring OAuth broke those peoples use-case for the API.

I created a web application in PHP which handles the OAuth for you and exposes a set of obfuscated URL’s that you can access without any authentication from any device. Sadly I’m not able to host a copy of this any more, but the code is still freely available and it doesn’t take much to host it yourself.

Update: Since I wrote this post, I’ve found a built-in command to do this. I now have both methods aliased, since sometimes you don’t want/need an error and you always want a folder name.

The solution

$ git config 'alias.workdir' 'rev-parse --show-toplevel'
$ git config 'alias.workdir-or-cwd' '!echo $PWD'
$ git workdir
$ git workdir | xargs basename     # only get project name

Yep, it’s that stupidly straightforward. Aliases are always run from the root of your workdir so this will always work perfectly. Unfortunately, you can’t simply try to read core.workdir because that will only return something if it is explicitly set in .git/config. Hopefully this will help someone else out.

<?php
$form['field_activity_pymt_dets']['#states'] = array(
  'visible' => array(
    '.form-item-field-activity-cost-und input[type=checkbox]:not(:first)' => array('checked' => true)
  ),
  'required' => array(
    '.form-item-field-activity-cost-und input[type=checkbox]:not(:first)' => array('checked' => true)
  )
);

The problem with this code is rather simple. It’s asking the States API to look at many checkboxes and show/require the current field if any single one of these is checked. Due to a limitation of jQuery, and by extension the States API, this doesn’t actually work out. When this code is used on the client side the selector will be executed, but only the value for the first element will be used when retrieving values as per normal jQuery results.

So, how to convert this so that it works? We have two related issues here:

1. Each checkbox must be addressed individually
2. The States API only provides an AND relationship, there is no way to specify that you want an OR style comparison. This means that we can’t simply expand the selector given; that would require all checkboxes to be checked, not any single one.

Well, the solution is to invert the logic so that there is an AND relationship in effect. Hence, the following resultant code:

<?php
$options_lang = $form['field_activity_cost']['#language'];
$options = array_keys($form['field_activity_cost'][$options_lang]['#options']);
array_shift($options); // Drop the first option on the floor because we don't care about it (free).

foreach ($options as $id) {
  $selector = ':input#edit-field-activity-cost-'.$options_lang.'-'.$id;
  $form['field_activity_pymt_dets']['#states']['invisible'][$selector] = array('unchecked' => true);
  $form['field_activity_pymt_dets']['#states']['optional'][$selector] = array('unchecked' => true);
}

This does the same thing, but works slightly more counterintuitively. Make visible if any one of these is checked is the same as Make invisible if all of these are unchecked.

PulseAudio does support using multiple devices at the same time, but when I bought my speakers the other day, I had trouble finding documentation that said much more than that it was supported.

The Problem

I have a nice set of 2.1 speakers that I wish to use for almost everything, but I use Skype and Mumble for VOIP with various people, and I want to use my headset with those applications. Skype in particular will only let you chose “PulseAudio” if it detects that PulseAudio is available.

The Solution

PulseAudio allows you to control input and output devices on a per-application basis, but as far as I’ve found, it only lets you control these through setting environment variables; PULSE_SINK and PULSE_SOURCE. You can get values for these variables from the following command lines:

$ LANG=C pactl list | grep -A2 'Source #' | grep 'Name: ' | cut -d" " -f2
$ LANG=C pactl list | grep -A2 'Sink #' | grep 'Name: ' | cut -d" " -f2

Using the info from the above commands, I made the following script:

#!/bin/sh
# ~/bin/pa-headphones

export PULSE_SINK="alsa_output.usb-045e_Microsoft_LifeChat_LX-3000-00-LX3000.iec958-stereo"
export PULSE_SOURCE="alsa_output.usb-045e_Microsoft_LifeChat_LX-3000-00-LX3000.iec958-stereo.monitor"

# Export a normalish PATH so `which` doesn't pick up this script
export PATH=/usr/local/bin:/usr/local/sbin:/usr/bin:/usr/sbin:/bin:/sbin

exec $(which $(basename $0)) $*

I can then create as many symlinks to this script in my ~/bin directory as I like and they will all use my headset for sound input and output. So, for instance:

$ cd ~/bin
$ ln -s pa-headphones skype

And now, whenever skype is run it will use my headphones. This will also work for .desktop shortcuts, as long as they don’t use absolute paths to find their executables. Most system-installed ones don’t seem to, on Gentoo at least.

Introducing socat

So, what is socat?

Socat is a command line based utility that establishes two bidirectional byte streams and transfers data between them. Because the streams can be constructed from a large set of different types of data sinks and sources (see address types), and because lots of address options may be applied to the streams, socat can be used for many different purposes.

socat manpage

In other words, socat sits in the middle of two different sources of IPC and passes data between them. I use the term IPC because socat understands so many different formats that it is a little rediculous. It can process and translate between the following formats (not even close to a comprehensive list):

• TCP with or without SSL
• UNIX sockets
• regular files
• stdin/stdout of another process

As you can see, it’s very flexible. It also supports logging all traffic that flows through it. Which brings us back to our original point.

Debugging UNIX sockets

UNIX sockets are great for all sorts of reasons, including ensuring that they are only available locally. However, this also means that they are hard to listen in on and debug. So, enter socat:

$ socat -v UNIX-LISTEN:/tmp/socat-listen UNIX-CONNECT:/path/to/real.socket

Now, point the client application at /tmp/socat-listen instead of the real socket and enjoy the conversation.

Or, if you wish to provide your own test data rather than simply listening in:

$ socat -v READLINE UNIX-CONNECT:/path/to/real.socket

With this, socat will use readline to get data from the console, and print back any replies.

In closing

Obviously, this is only one way to use socat. It’s a very powerful application, and can be put to lots of good uses. This is just one of the more obscure things you can do with it. You could even use it as a telnet replacement if you really wanted to with the second example. You should explore the man page to get other cool ideas.

The following sparked some ideas in me. I’ll probably post up a few things about how to actually use this sort of thing in your own scripts, after I figure it out myself. For now, I wanted to get this out there, because it’s kind of cool.

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
<script type="text/javascript" src="path-to-mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

My main computer is a dual-boot Gentoo/Windows 7 box. I use Linux for work, and most of my every day stuff. Windows is mainly just for games and certain other members of the household. I’ve also recently reformatted, so both are near-clean slates.

Enter the Jekyll blog

Jekyll is a great system. It fits well into that “just enough” category. My last blog was a Drupal blog, but I used Markdown to write all my posts. It always struck me as a very elegant way to edit HTML. With a good text editor that has some color coding for formatting, you barely notice the difference… except you can’t screw up the tags. As someone who works in the web industry, I regularly see and use CKEditor, and also regularly see it chew up code from a certain Microsoft product that clients love and spit out HTML that wreaks havoc on designs. Markdown and similar systems like Textile always produce very predictable results, and you can tell at a glance what those results will be.

And so, tonight I got onto my computer, and it was booted into Windows. I wanted to hack on my blog for a bit. So I did what every Linux guy does first in Windows: Cygwin and ConEmu. Now, before I go any further, please don’t misunderstand; I love Cygwin. In much the same way that I love beating my head against a wall, because it’s often much the same feeling. However I do have a great respect for the people behind this project, because it’s a great project, and when it’s setup and working, it really is a wonderful things to have around.

How to get Jekyll working on Cygwin

First, a list of things you will need, in order. If you can follow this list on your own, then the rest of this article should be redundant.

• Cygwin, optionally ConEmu or Console2
  • Devel
    • gcc4
    • gcc4-g++
    • git
    • make
  • Libs
    • libiconv
    • libiconv2
    • zlib
  • Net
    • curl
  • Python
    • python (only if you need/want Pygments)
• RVM
  • ruby-2.*
• jekyll gem - from rubygems
• Python setuptools
• Pygments

First, install Cygwin with the above packages by using the setup.exe executable available on their homepage. It’s important to get both iconv and iconv2. If you don’t, then RVM will happily and silently compile ruby without iconv support, and then Jekyll will happily install but promptly fall on it’s face when you try to run it.

Oops.

Next on the list is RVM. There’s installation instructions on their homepage, but it boils down to the following:

$ curl -L https://get.rvm.io | bash -s stable --ruby
$ source ~/.rvm/scripts/rvm

From here you can happily gem install jekyll, and it should just fall into place. There used to be issues with the posix-spawn gem which necessitated it being installed from source, but that fix finally made it’s way into a rubygems release. At this point you should have a working Jekyll installation. If you want or need pygments support, then installing it is simple, you just need to install setuputils manually first.

$ curl -L http://peak.telecommunity.com/dist/ez_setup.py | python
$ easy_install Pygments

And we’re done at this point. Congratulations! You can now edit your Jekyll blog on Windows using the latest version of Jekyll.

So, here’s how to monkey patch it into IE9 and above. IE8 doesn’t support defineProperty properly and earlier versions don’t support it at all so those versions are still unsupported by this method.

/**
 * Hack in support for Function.name for browsers that don't support it.
 * IE, I'm looking at you.
**/
if (Function.prototype.name === undefined && Object.defineProperty !== undefined) {
    Object.defineProperty(Function.prototype, 'name', {
        get: function() {
            var funcNameRegex = /function\s([^(]{1,})\(/;
            var results = (funcNameRegex).exec((this).toString());
            return (results && results.length > 1) ? results[1].trim() : "";
        },
        set: function(value) {}
    });
}

First up, I want to get into what this blog will be about. This site will mostly be a coding blog; things I’ve done, discovered or otherwise cool stuff to do with the inside of a computer. However, I am also human! Shocking, I know. Every now and then I will almost certainly deviate into other things; gaming, other hobbies I have, the local flora, etc.

Secondly, welcome! Feel free to pull apart the buildings of this blog. All content I have written is CC-BY-NC-SA, and all the code is released under the MIT license. That includes the system I’ve written on top of Jekyll for writing this blog, the CSS, the HTML, and any code snippets released as part of this blog. Go forth, fork and enjoy.

I intend to prod Disqus with a 10" pole and perhaps get that integrated into this site.

Or perhaps not (looks like I did though).

Better navigation and more features will be forthcoming, but I wanted to get a v1.0 up as soon as possible so I can get back into this. I really enjoyed it last time around, and hopefully you’ll find something of use here.