Kelli Shaver

Early this morning, the first commercial manned space craft...

Fri, 25 May 2012 14:41:19 -0400

Early this morning, the first commercial manned space craft docked with the International Space Station, 230 miles above the Earth’s surface. As if this wasn’t awesome enough, you could watch this event live, from anywhere in the world, on your phone.

The Dot is Optional

Tue, 22 May 2012 18:06:38 -0400

The Dot is Optional:

My favorite podcast recording yet.

Jonathan and Kelli talk about accessing REST APIs over SMS, wrestling with Google Chat bots, confusion about the HTML5 Audio tag, and so much more.

Experimenting with the Architecture of Ember.js

Tue, 22 May 2012 18:02:00 -0400

Experimenting with the Architecture of Ember.js:

Since I’m feeling too overworked at the moment to write my own blog post, I’ll link to one written recently by my very good friend, wherein he re-engineers the architecture of Ember.js to add a couple more degrees of separation.

It’s not for everyone, as he admits, but personally, I really like the idea of separation on the client side between UI interactions and application state (separate from the data model itself).

In some ways, it feels logically very similar to some of the ideas I’ve been working on lately with regards to server-side setups for scaling Sinatra applications…. but that’s a whole other blog post in and of itself, which I’ll go into at some point.

Run.

Tue, 22 May 2012 17:51:23 -0400

Run.

GTalk and Ruby

Wed, 16 May 2012 11:16:00 -0400

Yesterday I had the need to create a small GTalk bot in Ruby. I started looking around and, to be honest, it was really hard to find any examples newer than 2009 or so. Even the gems are old.

Sure, maybe the XMPP protocol hasn’t changed that much over the years, but Ruby has, so I thought I would make a quick note about how I finally got this working.

XMPP4R-Simple won’t work in Ruby 1.9.x (and I didn’t have time to debug it)

The Easy-GTalk-Bot gem is a very simple wrapper for XMPP4R and it worked fine for the most basic of bots, but it couldn’t handle the asynchronous nature of what I was building. The multi-threading would break down and the connection would drop.

Blather looked promising, but also seemed like overkill for what I needed and connection handling just looked like too much work (not really difficult, but overly involved for what should be necessary in this particular instance).

The gem you’ll want to use is just the plain and simple XMPP4R.

Here’s the basics to get you started. The below script will authenticate to GTalk, automatically accept any incoming “add contact” requests, and echo received messages back to the user. — Totally useless, but functional.

# gtalk.rb
require 'rubygems'
require 'xmpp4r'
require 'xmpp4r/roster'

@username = 'you@gmail.com'
@password = 'seekrit'

@jid = JID::new(@username)
@client = Client.new(@jid)
@client.connect
@client.auth(@password)
@client.send(Presence.new.set_type(:available))

def roster
  @roster ||= Roster::Helper.new(@client)
end

roster.add_subscription_request_callback do |_, presence|
  inviter = JID::new(presence.from)
  roster.accept_subscription(inviter)
  invite(JID::new(inviter))
end

@jabber_client.add_message_callback do |message|
  unless message.body.nil?
    # do stuff....

    text = "You said '#{message.body}'"

    response = Message::new(JID::new(message.from), text)
    @client.send(response)
  end
end

Thread.stop

And here’s how you daemonize it with the Daemons gem.

# im.rb
require 'rubygems'
require 'daemons'

Daemons.run('gtalk.rb',
  {
    :app_name => 'myIMBot',
    :monitor => true,
    :log_output => false
  }
)

You can now run the script with ruby im.rb start, ruby im.rb restart, and ruby im.rb stop. If you want to save error output, just enable logging. As an added bonus, Monit will now watch the script and restart it if it crashes.

The Making of Octicons

Wed, 09 May 2012 18:58:30 -0400

The Making of Octicons:

A nice little write-up of the workflow and process of creating Github’s new icon font.

Shakespeare in the original pronunciation.

Sun, 06 May 2012 12:49:24 -0400

Shakespeare in the original pronunciation.

MIT and Harvard Announce edX

Wed, 02 May 2012 16:52:00 -0400

MIT and Harvard Announce edX:

This is ridiculously exciting. I feel like we’re only a few years from seeing a major shift in higher education.

9x12in Marker

Wed, 25 Apr 2012 04:07:53 -0400

9x12in Marker

File API Upload Image Preview - Now a jQuery Plug-in

Sat, 21 Apr 2012 00:44:10 -0400

File API Upload Image Preview - Now a jQuery Plug-in:

I took last night’s script and turned it into a jQuery plug-in. Enjoy. :)

Using the File API to Preview Images before Uploading

Fri, 20 Apr 2012 04:19:00 -0400

I was working on a little document builder tonight and wanted a way to preview images before uploading, which is something you commonly see associated with AJAX file upload scripts.

I didn’t want to actually upload the files via AJAX, though.

As it turns out, this was pretty straightforward and simple to do. Here’s an example.

First, some CSS

Mostly for display purposes - feel free to change it, although, you should specify a width and height.

form div.upload { overflow:hidden; }

form div.upload label { font-weight:bold; display:block; margin-bottom:0.25em; }

form div.upload div.file-preview {
    background:#ccc;
    border:1px solid #000;
    display:inline-block;
    float:left;
    margin-right:1em;
    width:60px;
    height:60px;
    text-align:center;
}

The Markup

Drop this into your form.

<div class="upload">
    <div class="file-preview"></div>
    <label>Select a File:</label>
    <input type="file" name="file">
</div>

Now the JavaScript

Event listening and DOM manipulation with jQuery - you could do that with native JS, or any other library.

$('input[type=file]').change(function(e) {
    if(typeof FileReader == "undefined") return true;

    var elem = $(this);
    var files = e.target.files;

    for (var i=0, file; file=files[i]; i++) {
        if (file.type.match('image.*')) {
            var reader = new FileReader();
            reader.onload = (function(theFile) {
                return function(e) {
                    var image = e.target.result;
                    previewDiv = $('.file-preview', elem.parent());
                    bgWidth = previewDiv.width() * 2;
                    previewDiv.css({
                        "background-size":bgWidth + "px, auto",
                        "background-position":"50%, 50%",
                        "background-image":"url("+image+")",
                    });
                };
            })(file);
            reader.readAsDataURL(file);
        }
    }
});

Self-deprecating Intro to Podcasting

Thu, 19 Apr 2012 01:17:00 -0400

Hey, look! We made a podcast.

A while ago, my awesome boss (and friend) decided we should do a podcast, for fun and learning, and to hopefully start some good discussion.

OK, so the first couple of times are always the worst, right?

I am incredibly introverted (which, for some reason, comes as a surprise to many people), so this was a big leap for me, even though I was only talking to imaginary listeners that didn’t yet exist. As a result, the first episode was full of all kinds of annoying verbal tics that I didn’t know I had until I listened to the first episode played back.

I’m trying to get a handle on it, and the second episode was better than the first, so hopefully I can continue to improve.

One of the reasons I jumped on the idea (aside from the fact that it just sounded fun) was because I knew I would be horrible at it. I figured this was a good opportunity to learn how to be a better public speaker and push myself to conquer something outside of my comfort zone.

It’s sort of a personal-growth thing.

Also, I need to invest in a good mic.

Tune in, though! We have a lot of fun as we talk about things we’re working on, problems we faced, techniques we used, and various technical, design, and accessibility issues that surround building apps that run everywhere.

Happy Docs Rewrite & More

Thu, 19 Apr 2012 01:03:00 -0400

A few weeks ago, I posted about a little OSS CodeIgniter app I’d built for documenting APIs called Happy Docs. That code is still available, but Happy Docs has now gone in a new direction.

You can now use Happy Docs as a hosted service!

I gave the system a complete rewrite, added multi-user support, improved private projects, and gave the interface a bit of an overhaul.

The end result:

Happy’s free to use, so if you build APIs, go ahead and sign up and give it a spin.

Finally, I’d like to talk a little about the rewrite.

The initial, open source version was written in PHP. I did this primarily because deploying something with PHP is dead-simple and the software can live on pretty much any web host on the planet. For something you plan to give away, the ability to “run anywhere” is a huge benefit, in terms of reach, and in terms of support.

When it came time to start building in more functionality, however, I began to seriously re-think the approach.

Ultimately what it came down to was that:

I was going to have to make a lot of changes if I wanted more integrated authoring/viewing (no separate admin interface) and user accounts, with multiple contributors per project.
Since I was changing a lot of code anyway, I might as well just rewrite the thing.
If I’m going to be maintaining and expanding on the app, I’d really prefer to be looking at and working with Ruby code over PHP.

That last bit mostly comes down to personal preference. I’m not a PHP-hater. I know it quite well, use it often, and I don’t mind developing in it, but when the project is mine, I’m going to use the language I prefer to develop in (Yeah, so, give it a month and maybe I’ll end up rewriting v3 in Python…).

Wrist-mounted Sonar for the Blind

Mon, 16 Apr 2012 14:17:53 -0400

Wrist-mounted Sonar for the Blind:

This is a pretty cool little piece of tech, and I can see how it could be very useful.

Having some minor experience with using a white cane, I don’t think I could see this working as a total replacement. It’s amazing how much tactile feedback you can gain about your environment courtesy of a long stick, like a change in the texture of flooring that indicates a change between rooms, a sudden drop-off or stairs, a wrinkle in a rug that could be tripped over, or a kick plate that indicates a fire exit in a hallway.

Instant feedback in certain situations is vital for safety, and I have my doubts that a device like Tacit would be as instantly telling as along cane when it comes to a sudden drop-off at the edge of the curb.

That said, a device that would give you a much broader overall assessment of your surroundings that extends beyond the range of the white cane, or provides tactile feedback when interacting with nearby objects in a setting other than mobility (like picking up a pitcher of water) sounds amazing.

Had my eye surgery last December not gone so well, I’d be queuing up to buy one of these.

Old Bugs and Code that Doesn't Play Nice

Tue, 10 Apr 2012 03:04:00 -0400

I was poking around at a little project earlier and ran into an interesting issue with Apache and a couple of enabled modules. Since I’ve been asked about it, I thought I’d go ahead and do a quick write-up of what happened and the process I went through to debug it.

Basically, I was trying to follow a URL (on my local machine) to a non-existent file that would then rewrite to another location. - That’s a pretty typical setup when creating SE-friendly links, routing to a controller class, etc. I’ve been doing it for years without issue.

Today, though, something was very broken. Let me paint the picture…. Assume for a moment that I had the following setup:

project/
- .htaccess
- hello.html
- sub-folder/
-- index.php

Inside the .htaccess was a rewrite rule to redirect all traffic through sub-folder/index.php, like so.

RewriteEngline On 
RewriteRule ^(.*)$ sub-folder/index.php?file=$1 [L]

Now, whenever I would visit the URL by navigating to http://localhost/project/ the index.php page would load as expected.

Going to a non-existent sub-directory, like so: http://localhost/project/aaa resulted in a 403 error.

Ah, yes, of course. I had forgotten to enable FollowSymLinks when setting up the rewrite rules. No big deal, a quick fix.

Options +FollowSymLinks 
RewriteEngline On 
RewriteRule ^(.*)$ sub-folder/index.php?file=$1 [L]

There, problem solved - or so I thought.

Testing a second time, I navigated to http://localhost/project/aaa and indeed, the index.php file was loaded and told me that the value of $_GET['file'] was, in fact, aaa.

Cool.

Then I tried to load the contents of the HTML file based on the value of $file, like so:

<? var_dump(file_get_contents('../'.$_GET['file'].'.html')); ?>

I pointed my browser to http://localhost/project/hello - intending to load hello.html into the script.

The result was an instant 404.

Any time I would pass the variable containing a file name that didn’t exist, the script would work. If I used a real file name, even though I wasn’t providing an extension, I got a 404.

This didn’t make a lot of sense to me, because if I wasn’t providing an extension, hello was no more real than aaa was.

Did you know you can log Apache rewrite calls? You probably did, but I’ve never had caue to before, so I wasn’t immediately aware that this functionality existed.

I soon found it, though, and decided to turn it on (note: this has to be done in the vhost file - it can’t be configured via .htaccess)

RewriteLog /Users/kelli/www/rewrite.log 
RewriteLogLevel 2

I went back to the browser, loaded up both pages (./aaa and ./hello) and compared log file entries.

It turned out that when I would supply a file name of aaa Apache would perform, rewriting the url to sub-folder/index.php?file=aaa as expected and PHP would look for ../aaa.html (not finding it, of course).

However, any time I tried to load hello Apache would rewrite it as sub-folder/index.php?file=hello.html which the script would then append .html to, as I’d written it to, causing the 404 page to load.

So Apache was somehow guessing the file extension!

To make a long story somewhat shorter, the little bit of magic responsible for this was mod_multiviews - an Apache content-negotiation module. It seems there is a very clear conflict there between mod_rewriite and mod_multiviews.

The solution is to disable mod_multiviews:

Options +FollowSymLinks -MultiViews 
RewriteEngline On 
RewriteRule ^(.*)$ sub-folder/index.php?file=$1 [L]

There are a couple of interesting points about this issue.

The conflict with mod_rewrite is a bug and it’s nothing new. It turns out this has been around since at least 2003. That’s just plain depressing.
Despite this, I’d never actually encountered the problem before, which is kind of amazing, since I’ve been doing this kind of thing every day since, well, 2003.
mod_multiviews is apparently enabled by default on some versions of Apache shipping on OS X. It could be in Snow Leopard, it could have been something that got changed when I upgraded to Lion. I’m not sure. It’s most likely the same in both.

So there you have it. Hopefully this will help someone else out. At the very least, it gave me an interesting head-scratcher for a few minutes there while I dug around to find the problem.

Bash Script to set up Sinatra App

Fri, 30 Mar 2012 16:29:00 -0400

Bash Script to set up Sinatra App:

Last week, I talked about how I structure my Sinatra apps. Today I decided to automate that process, so here’s a small shell script to auto-generate the directory structure and a few essential base files.

This year’s big home-improvement project - fixing a couple...

Tue, 27 Mar 2012 19:07:00 -0400

Replacing some bad wood in the floor

Patched.

The new flooring

A closer look

Goodbye, carpet.

New flooring going down.

This year’s big home-improvement project - fixing a couple of bad spots in the floor and replacing the carpet and linoleum with a floating wood floor. I’ll add more photos as work progresses.

Structuring Sinatra Applications

Fri, 23 Mar 2012 00:21:00 -0400

I thought it might be interesting to show how I structure my Sinatra applications. The app shown below (itemize.cc) is fairly small, so some of this may be a bit overkill, but I decided to go ahead and go with this level of structure, so I could easily expand the app in the future without having to worry about things getting disorganized.

Things of note:

The app.yml file is a config file that stores app-specific config items. For instance, in this case, it has the db connection string, wkhtmltopdf path, whether or not to run migrations on start up, and SMTP server details.

Inside the main app, I typically pull in files by directory, so dropping in new files is painless.

Often, I’ll also include a lang directory, with language files (e.g. en-us.rb) and then set the default language in app.yml as well.

You can see it all come together like so:

require 'rubygems'
require 'sinatra'

configure do
  @@config = YAML.load_file("./app.yml") rescue nil || {}
end

Dir["./helpers/*.rb"].each {|file| require file}

DataMapper.setup(:default, ENV['DATABASE_URL'] || @@config["db_connection_string"])
DataMapper::Property::String.length(255)

Dir["./models/*.rb"].each {|file| require file} 
DataMapper.finalize 

if @@config["db_run_migrations"] == true 
  DataMapper.auto_migrate! 
  DataMapper.auto_upgrade! 
end

not_found do 
    erb :not_found 
end 

error do 
  erb :error 
end 

get '/' do 
  erb :index 
end 

Dir["./routes/*.rb"].each {|file| require file}

Re-Thinking The Way I Use Git

Thu, 22 Mar 2012 21:41:00 -0400

Let me preface this by saying that I am probably late to the party on this one.

I’ve been using Git as my VCS for a long time, and I love it, but I have to admit, I’ve been pretty disorganized in the way in which i use it. My Git workflow has been basically this:

Do some work, get to a point where things work, make a commit, push.

I’d make the occasional branch if was doing something radically different, like a big rewrite, or refactoring, throw in an occasional rebase or filter-branch, sure, but that was basically how it went.

For most of the work I do, I am the only developer involved, or there may be one other person reviewing the code and making small commits. So this method has worked OK, in that let me do things like roll back to an earlier commit when I would screw something up.

However, it never felt like I was utilizing Git to its fullest potential, and I’d never really thought about Git as a tool for documenting the development life-cycle of my code. That is, not until a few days ago when a good friend introduced me to Git-flow.

Git-flow is both a methodology and a set of command-line tools to put that methodology into practice. In a nutshell, you work off of a development branch, creating hotfixes, support code, and features that follow a standard naming convention, and then get merged into the development branch. From there, you create releases, which them merge with the master, once you’ve done all of your testing and tidying up. So your master branch never has anything other than stable release code merged into it and your development branch has a full history of all changes, all properly categorized.

I’ve only been at this a few days, but i absolutely love it. It takes a bit of getting used to, but I love the history that it creates, the built-in safety net, and the structure it imposes on the code. I’m still adjusting, but I think it’s definitely been a worthwhile switch that will save a lot of headache in the future, especially when multiple developers are involved.

Simple Invoicing for Small Jobs

Thu, 22 Mar 2012 09:44:00 -0400

Say Hello to Itemize.cc

I’ve been working on a little personal project and yesterday I put it up on the web for all to see (and this morning i found and fixed a fatal bug….. go figure). So here it is: Itemize.cc

It’s a very simple invoicing tool. It lets you quickly create and share invoices with your clients, and gives them a big, friendly button that they can click to pay your invoice through PayPal. It also gives them, and you, an option to download the invoice as a PDF file.

That’s about it. There’s no sign-up or registration required. It’s just very basic, simple invoicing.

I still need to do some work on it, optimization for mobile, that kind of thing, so consider this a beta release.

Itemize was built with Sinatra.