#108: Exercism.io with Katrina Owen

Adam and Jerod talk with Katrina Owen – Panelist on Ruby Rogues, Instructor at Jumpstart Lab and creator of Exercism.io, an open source platform for crowd-sourced code reviews on daily practice problems.

#107: Balanced Payments with Marshall Jones

Andrew and Adam talk with Marshall Jones from Balanced Payments about all they do in open source, and how they approach being an open company that desires to release as much software as they can as open source. Sponsored by DigitalOcean – Use the code mentioned on the show to save $10! If you’re a […]

annyang! lets your users control your site with voice commands #

annyang! is an awesome little JavaScript library by Tal Ater that adds voice commands to your site via webkitSpeechRecognition. Using annyang! is as easy as:

if (annyang) {
  // Let's define a command.
  var commands = {
    'show tps report': function() { $('#tpsreport').show(); }
  };

  // Initialize annyang with our commands
  annyang.init(commands);

  // Start listening.
  annyang.start();
}

You’ll definitely want to see this one in action, so make sure to visit the project’s homepage where there are multiple demos.

annyang! only works in browsers that support webkitSpeechRecognition, so it should be used as an enhancement to your site unless you have a very specific audience.

And if you’re wondering about the name… yes. It is in reference to the hilarious Arrested Development character by the same (phonetic) name. Tal took creative liberty with the spelling to make sure the name wasn’t too annoying for those who don’t get the reference.

I pleaded with Tal to match the official spelling, but he simply responded with further Arrested Development references. I think the guy might have a problem. ;)

parallax.js: bringing real movement to the web #

parallax.js is a lightweight parallax engine that responds to the movements from your smartphone’s gyroscope and motion detection. The tool lets you specify depths and directions that determine how your webscape responds to physical movement.

Creating layers is super simple, as documented:

Simply create a list of elements giving each item that you want to move within your parallax scene a class of layer and a data-depth attribute specifying its depth within the scene. A depth of 0 will cause the layer to remain stationary, and a depth of 1 will cause the layer to move by the total effect of the calculated motion.

Parallax.js is useable in jQuery and Zepto as a plugin, too.

MIT Licensed. Browse the source code on Github.

Questhub, the social task tracker #

Have you ever needed to be encouraged, or even nudged
by fellow travelers to go ahead with your quests?
Questhub aims to help you with exactly this problem.

You define tasks (or quests), others can upvote them and comment on them,
and suddenly you are held accountable for your plans.
You can’t procrastinate any more.

Questhub also supports Stencils, which are quest ideas or templates.
You create one and someone else can finish it. Even repeatedly.

Vyacheslav Matyukhin, the author of Questhub describes it
as being a public task tracker with social features and game points.

A live, public version can be found at Questhub.io with several
‘realms’, such as Perl, Fitness,
and Chaos.

The source code, which is written in
Perl, using the Perl Dancer web framework and lots of JavaScript,
is distributed with the MIT license.

Meet RegExpBuilder: Verbal Expressions’ rich, older cousin #

Following the popularity of Verbal Expressions — a library which generates regular expressions by chaining semantic functions together — Andrew Jones reached out to tell us that he has a library in the same spirit as Verbal Expressions that is a little older and more feature rich. He calls it RegExpBuilder and there are currently versions in JavaScript, Dart, Java, and Python.

I asked Andrew to point out a few differences between Verbal Expressions and his offering. He replied,

RegExpBuilder allows you to specify all kinds of quanitites, whereas VerbalExpressions has focused on just a couple of situations (either it might have something, or it does have something). So in RegExpBuilder you can say “it has between 3 and 100″, or it has “at least 7″ or it has “at most 5″ of something. There are all kinds of ways of specifying quantity. Eg:

var regex = new RegExpBuilder()
  .startOfLine()
  .then("thechangelog is ")
  .max(7).of("really ")
  .then("cool")
  .getRegExp();

regex.test("thechangelog is really really really cool"); // true

and,

VerbalExpressions is mostly limited to working with strings. So for example, you pass in “http” to then(“http”), but unless your regular expression is very linear, you will have to deal with groups of patterns, and work with patterns themselves. RegExpBuilder allows you to pass in and work with patterns themselves, so you can do eitherLike(pattern1).orLike(pattern2), for example. Eg:

var pattern = new RegExpBuilder()
  .either("massively ")
  .or("amazingly ");

var regex = new RegExpBuilder()
  .startOfLine()
  .then("thechangelog is ")
  .max(7).like(pattern)
  .then("cool")
  .getRegExp();

regex.test("thechangelog is massively massively massively cool"); // true

and finally,

RegExpBuilder also has support for character classes (like letters, digits, etc), and advanced features like lookaheads

It’s nice to see some friendly competition in this space to push us all to greater heights.

RegExpBuilder is MIT licensed and hosted on GitHub.

Oh, Behave.js! #

Behave.js

From the docs:

Behave.js is a lightweight library for adding IDE style behaviors to plain text areas, making it much more enjoyable to write code in.

I’ve always been really frustrated by WYSIWYG editor’s ‘HTML mode’ – I think it would be interesting to combine Behave.js with something like Medium.js for the ultimate in-browser text editing domination.

Behave.js is MIT licensed. Source code on GitHub.

Medium.js – taking control of contenteditable #

Medium.js is a very minimal and straightforward approach to rich text editing in the browser that’s based on the awesome editor powering Medium.

From the docs:

Medium.js overrides many default keyboard events and substitutes a more cross-browser compliant way to interact with contenteditable elements. This means that you can use contenteditable without fearing your user is going to enter poor or invalid HTML. It keeps things tight, organized, and semantic.

MIT Licensed. Source code on GitHub.

Automate your GitHub processes with botdylan #

Heavily inspired by GitHub’s Hubot — botdylan lets you automate any process in GitHub.

From the readme:

We use Github heavily. There are some repetitive tasks that were taking away our time to hack on a better product. Since we are in the productivity space we decided to stop doing things manually and start to have a more productive environment to work with.

Here are a few examples of what you can do with botdylan:

  • Label issues with the status of the CI
  • Show a cowboy image when someone posts directly to develop
  • Label issues that have 2 or more thumbs
  • Post images on demand “image me…”
  • Label issues with the status of the PR (mergeable or not)
  • Ping inactive pull requests
  • Post message to your chat room (when the CI fails for instance)
  • Interact with other services via HTTP

botdylan runs as a daemon and gets configured through a config.json file that describes cron and hooks scripts. cron scripts execute periodically and hook scripts execute on github hook events.

$ ls /etc/botdylan
scripts/hooks
scripts/crons
config.json

$ botdylan --dir /etc/botdylan

Check out the project on GitHub to learn more.

ht/ Pau Ramon from Teambox

Stop writing Regular Expressions. Express them with Verbal Expressions. #

GitHub user jehna has fashioned a runaway hit with his unique way of constructing difficult regular expressions.

VerbalExpressions turns the often-obscure-and-tricky-to-type regular expression operators into descriptive, chainable functions. The result of this is quite astounding. Here’s the example URL tester from the README:

var tester = VerEx()
            .startOfLine()
            .then( "http" )
            .maybe( "s" )
            .then( "://" )
            .maybe( "www." )
            .anythingBut( " " )
            .endOfLine();

This style may be off-putting to old-school regex pros, but even they would have to admit that it’s quite approachable and easy to reason about.

The main project is a JavaScript library, but in the world of open source the more success you have, the more ports you get.

VerbalExpressions has been ported to so many other languages that a GitHub organization was created just to host them all. I think this idea struck a real nerve.

Write a Date() like a human #

As a person who is constantly thinking about the user’s experience when interacting with my software, writing the date and time using real english such as “2 days from today”, or “tomorrow at 5pm” provides the, often needed, human touch I’m looking for.

Date, from Matthew Mueller, is an english language date parser for node.js and the browser that lets your users write dates like a normal human being using real english.

A few examples from the readme:

date('10 minutes from now')
date('in 5 hours')
date('at 5pm')
date('at 12:30')
date('at 23:35')
date('in 2 days')
date('tuesday at 9am')
date('monday at 1:00am')
date('last monday at 1:00am')
date('tomorrow at 3pm')
date('yesterday at 12:30am')
date('5pm tonight')
date('tomorrow at noon')

Check out the source on GitHub or the homepage for examples and demos.

Random generation for JavaScript with Chance #

Chance, by Victor Quinn, is a small (~18k) JavaScript library that makes random generation dead simple! You can generate random numbers, strings, addresses, dice, and more. Usage is simple:

<script src="chance.js"></script>
<script>
  var my_chance = new Chance();
  console.log(my_chance.bool()); // either true or false
  console.log(my_chance.phone()); // (xxx) xxx-xxxx
  console.log(my_chance.paragraph({sentences: 1})); // random paragraph with one sentence
  console.log(my_chance.sentence({words: 5})); // random sentence with five words
</script>

There are a ton of options, and you can view them all at the chance website, or view the source at GitHub.

Lineman helps you build fat-client JavaScript apps #

As more and more web application logic moves into the browser, better tools are needed to manage the front-end development process.

Enter Lineman, which harnesses the power of Node.js and Grunt to compile your assets, run specs when you save files, deploy your app, and perform a host of other helpful tasks for you.

Lineman is a combination productivity tool and build tool. It has templates for many popular JavaScript frameworks (Backbone, Angular, Ember, etc.), and makes testing super easy by including Testem, which is a powerful test runner.

Interested, but not ready to npm install -g lineman quite yet? Check out the demo screencast first!

Lineman — a project by Test Double — is MIT licensed and hosted on GitHub.

Create beautiful JavaScript charts with one line of Ruby using Chartkick #

So many web apps need to visualize data for their users that a high quality charting library is a huge boon for developers. Andrew Kane’s Chartkick might be just the library for Ruby developers.

Chartkick sample

Chartkick works with Rails 3.1+ and makes adding beautiful charts to your web app as easy as a one liner. Create a simple line chart like this:

<%= line_chart User.group_by_day(:created_at).count %>

Or one with multiple series of data like this:

<%= line_chart @goals.map { |goal| 
  {
    :name => goal.name, 
    :data => goal.feats.group_by_week(:created_at).count 
  } 
} %>

A pie chart is as easy as:

<%= pie_chart Goal.group("name").count %>

Chartkick is mostly a JavaScript library with Ruby helpers to generate the required markup that the JavaScript turns into charts. It requires either Google Charts or Highcharts to work, but it doesn’t require Ruby! If you want to use the JavaScript bits from another language, check out Chartkick.js instead.

Chartkick is MIT licensed and hosted on GitHub.

Write emails in Markdown and render them with Markdown Here! #

Adam Pritchard has released a nice Browser Plugin that allows you to write Markdown in text fields then render it. From the About page:

I created Markdown Here when I realized that I was having much more fun writing README files in Markdown than I was writing email — especially if the email contained any significant structure or code snippets.

Current Browsers that support markdown here can be seen on the Get it! page:

  • Chrome/Chromium
  • Firefox/Pale moon
  • Safari (as of May 19, 2013)
  • Thunderbird, Postbox, Icedove (email clients)

You can view the project website or view the source on GitHub.

gif.js, a full-featured JavaScript GIF encoder that runs in your browser #

Regardless of how you pronounce it, GIF’s are cool. They’ve stood the test of time on the internet and have increased team chat happiness in HipChat and Campfire’s all around the world exponentially! Here’s a recent GIF posted to the Pure Charity water cooler after shipping.

Like a boss

gif.js is a JavaScript GIF encoder from Johan Nordberg that runs in your browser. It uses typed arrays and web workers to render each frame in the background, it’s really fast!

Checkout the demo to see gif.js in action and the source on GitHub.

Heckle, the Jekyll clone in node.js #

The why:

I like the approach to managing a site taken by Jekyll. A lot.

I don’t like Ruby, and I don’t like strict logic-less templates. Jekyll is Ruby with Liquid as the templating engine.

Heckle is JavaScript with Mold (programmable template extravaganza) as the templating engine.

If you feel how Marijn feels and you don’t like Ruby, or strict logic-less templates — you should checkout Heckle. Marijn also asks that you not use Heckle at this point IF you want something stable and finished. It’s a work in progress.

Check out the source, or learn more about Heckle’s origins.

Run Ruby in the browser with Decaf, a fork of WebKit. #

Decaf, from Tim Mahoney is a fork of WebKit that allows you to run Ruby in the browser. A simple example from the README:

<script type='text/ruby'>
  window.onload do
    introduction = document.create_element('p')
    introduction.inner_text = 'Hello, world!'
    document.body.append_child(introduction)
  end
</script>

It only works on the Mac right now, and there are a few other gotcha’s to keep in mind:

  • In Ruby, methods and attributes are specified in underscore_case instead of camelCase.
  • The window variable is accessible from only the top-most scope. Elsewhere you can use the global $window.
  • Ruby accepts Procs and blocks as callbacks and listeners. View an example.

You can go to the project homepage, get the latest release or view the source on GitHub.

Syntax highlighting now done with highlight.js

We shipped an update tonight that replaces the old cargo-culted Prettify syntax highlighter we’ve been using for years with highlight.js from Ivan Sagalaev — you can support his open source through Gittip. Highlight.js has numerous themes to choose from (we’re using Tomorrow Night) and is a cinch to integrate. It automatically: finds blocks of code, […]