Spooky Halloween Twilio Hackpack

Halloween is a great holiday to light things up and have a little fun. I woke up a few days ago with an idea in my head for a cool Halloween hack using one of my favorite LED-toting device, the Twilio Hackpack. I've written about the Hackpack before in terms of the basic building blocks but haven't shown much of the cool things you can do with it.

What I built for Halloween is a couple of animated images that can be set on the hackpack using SMS. One of them is a ghost and the other is a bat. They both have blinking yellow eyes. They look like this on the hackpack:

You can change the image on my hackpack at any time by sending the word bat or ghost to:

(215) 584-4678

The code to make the bat and ghost is written using the Adafruit NeoPixel libraries. You can find the completed code in this Github repo.

The backend for handling text messages is written using the Laravel PHP framework. You can find the completed code for the backend in this Github repo.

I hope you have a very spooky Halloween. If you create any cool hacks for Halloween be sure to let me know on Twitter @brentschooley.

Revisiting the code snack concept

At the end of 2008 I had a clear mission for what I wanted to host on this domain. The idea of a "code snack" was born out of an observation that there needed to be a resource that provided small easily digestible pieces of information about software development. The definition of code snack is clear and concise:

code snack - [kohd snak] - n. - an easily digestible morsel of programming related information

However, despite having a clear vision and a solid definition, this site has only produced two snacks related to Windows 8 design:

  1. Metro Snack #1: Choosing XAML or HTML5 for Windows Developer Preview apps
  2. Metro Snack #2: What is WinRT?

These were written in January 2012. We're a third of the way into 2015 and as someone I respect a ton says frequently: "It's later than you think."

This blog got me started on a path that has certainly led me to where I am today but I can't say that it has lived up to its potential as the resource I defined right before the start of 2009. A very important person in my life recently rekindled this idea and I want to make sure I follow through this time.

Over the next few weeks I'm going to be brainstorming some topics that would make for good snacks but while I work on that I could use your help. What kind of topics would you like to see explained in short easily digestible chunks? Hit me up on Twitter @brentschooley or use my contact form if you have any ideas.

Here's to many snacks in the future.

Animated cats delivered to your phone using Twilio MMS

Twilio launched MMS last week on all of its US and Canada phone numbers. A variety of hacks were unleashed by myself and other members of the evangelism team (if you haven't checked out the Mustached Messaging Service, you really need to 'stash yourself).

One of the hacks I put together (animated cats via MMS) is actually so easy to build that I wanted to show you how I put it together so that you can get started with your own MMS hacks! If you want to see the cat gif hack on your phone, send "cats" to (484)483-2287.

I'm super stoked to see what you build so make sure to email me at brent@twilio.com or hit me up on Twitter @brentschooley with your MMS creations. For now, let me show you how to stitch this hack together and send animated cat gifs to your phone via MMS.

(This project is available on Github)

The setup

What you'll need to make this work is a Twilio account (create one here) with an MMS-enabled number and a Sinatra server with the twilio-ruby gem installed. You can install Sinatra and twilio-ruby by punching the following lines into the terminal:

With those pieces in place, all we need to do is create a file to hold our server code. Run this in terminal:

The code

I promised this would be quick and easy so I'm just going to drop this code here:

This code uses the wonderfully simple API known as The Cat API to generate a random animated cat gif. This URL is passed as the Media URL for the Response that will be sent back to Twilio when an incoming text message is received at your Twilio number. (Note: If you are not using a helper library and are just returning TwiML directly, you will need to properly escape the ampersands in the URL.)

Speaking of incoming messages, you'll need to set up your Twilio number to point at the server code you just wrote to handle those incoming texts. You can do that here. Click on your number and set the Messaging Request URL as shown below to point at the URL where you deployed your Sinatra server (I recommend Heroku - details here):

That's it! Send your Twilio number a text message and you should receive a random animated cat gif. Share this with all of your friends!

What's next?

I think sending a text message and getting back a cute little cat running around doing something hilarious is pretty rad. That being said, I'm really excited to see what you'll do with Twilio MMS! Please leave a comment on this post or email me at brent@twilio.com or find me on Twitter @brentschooley and share what you build.

Happy hacking!

Meme Generator Powered by MMS

If you haven't heard yet, Twilio annouced MMS support today on all US and Canada phone numbers. I'm so stoked about this new feature and I knew exactly what I wanted to build with it.

Introducing the MMS Meme Generator

It is my belief that a mechanism for sending pictures cannot survive in the market if it does not generate memes. The internet demands the ability to express itself with images containing words. So, I am excited to bring you the first Twilio powered MMS meme generator.

How it works

All you need to do is send a properly formatted text message to (443)746-3637 -- that's (443)74-MEMES -- and you'll get back an MMS with your meme. Here are the supported memes in v1:

  • One does not simply ______
  • What if I told you ______
  • Brace yourselves ______
  • ______ but that's none of my business
  • ______ all the ______
  • ______ ain't nobody got time for that
  • ______ we're dealing with a badass over here
  • ______ aaaaand it's gone  (note: any number of a's will work on this one!)


Have fun with this!

Hope you have some fun with this. Share your funniest memes with me on Twitter @brentschooley! Future additions will allow you to send these memes to your friends by sending their phone number in the text. Also, stay tuned to the Twilio blog where in a few weeks I'll show you how this was built.

If you want to get started with Twilio MMS, my team has put together a great Getting Started post that covers Node, Python, C#, PHP, Java and Ruby. Show me what you build!

Ember.js Basics - What is Ember?


According to the creators of the framework, Ember.js is “a framework for creating ambitious web applications”. What exactly do they mean? Also, with the many (, many, many) JavaScript frameworks that we have to choose from these days, why might I choose Ember? In this post, I’ll introduce Ember.js and some of the core concepts that backed its development. In future posts, I’ll dig in and show you how to build applications with the framework. For now, let’s look at what the framework is made of.

Guiding principles

Before looking at the details of any framework, it helps to understand the core concepts that drove the feature decisions in the first place. Perhaps the biggest factor in the creation of Ember was the belief that what makes the web so unique is the ability to bookmark and share URLs. The team felt that many JavaScript frameworks treated the URL as an afterthought (mostly by treating the concept of a router as an optional add-on). The Ember team also wanted to create an MVC framework that was closer in line with the desktop MVC framework mentality rather than taking a server-side MVC approach (like ASP.NET MVC or Ruby on Rails). So, Ember combines the productivity of a native UI framework while supporting shareable URLs. The following key concepts are what make up the framework from a high-level overview standpoint.

Core concepts

Naming conventions

Ember was written with convention over configuration in mind. This means that much of the framework relies on things being named consistently and in the manner that the framework expects. The naming conventions are summarized nicely here.


Templates are what describe the user interface in Ember.js. Ember templates are written using the Handlebars templating language which allows for expressions to be added to standard HTML markup within double curly braces: {{}}. Each template is backed by a model and supports databinding such that the template will auto-update when the model changes. The following features are supported in Ember’s Handlebars templates:

  • Plain HTML
  • Expressions - Allow model values to be substituted into the HTML. For instance, {{price}} would substitue the value of the price property on the model into the template where specified
  • Outlets - An outlet (specified by {{outlet}}) is a placeholder for another template. As the user moves around the application, different templates can be loaded into the outlet by the router.
  • Components - Custom HTML elements (technically, custom Handlebars helpers) that help clean up repetitive templates by enabling the creation of reusable controls

Example template:


The router in Ember is what powers the shareable URLs that are so important to web applications. The router translates the URL of a request into a series of templates. For instance, when I visit /coffee within the application, Ember’s router will translate this to the CoffeeRoute which will set up the appropriate template backed by the appropriate model for that request. As the templates or models being shown to the user change, Ember’s router will automatically keep the URL in the browser up to date. This means that the user can share the URL at any point in the application lifecycle. Whenever someone clicks on this shared URL, they will see the same thing that the original user saw.

Example router:


A model object is used to store persistent state within an Ember application. These model objects are what back the templates and provide data to be displayed within the HTML. Many applications will load these models through a REST API using Ember Data which will store the data in a server database, but Ember doesn’t limit you to just this choice. There are many adapters for Ember Data that allow you to choose the backend that works best for your project. You can even roll your own syncing using the Basic Adapter.

Example model:


The controller is technically where the templates get their data from. Though optional, a controller will be created by Ember if not directly declared for a route. The controller “decorates” the model object. Properties specified on the controller can be accessed by a template as if they were declared on the model. Methods can be created within the controller that can be called using Handlebars helpers in the template. This enables things like button actions. In general, properties that do not need to be synced to the backend server but are necessary for template logic should be created in the controller. Ember supports the creation of ObjectControllers, which manages a single model object, and ArrayControllers which manage a list of model objects.

Example controller:


Components allow for the creation of reusable controls. The interface for the component is defined using Handlebars templates. The component also has a JavaScript class that is used to store state and handle user interaction. Components are placed into a template using a Handlebars helper with a name based off of the name of the component.

Example component:


Ember.js is a relatively young but growing framework. Though in the past it suffered from a lack of documentation and a difficult learning curve, that situation has improved dramatically. The Ember guides are very well-written and will help you get started with the framework in no time. I will also be posting more on how to develop with this framework over the coming weeks.


If you want to comment or reach out to me, the best place to do that is on Twitter @brentschooley. You can also contact me through the contact form at brentschooley.com.