habdas.org

keep building

CoffeeScript for Tessel With Yeoman and Gulp

| Comments

A few years back Sauce Labs co-founder Jason Huggins (@hugs) was giving a talk at js.chi(), showing us how to use an Arduino to change the color of an LED based on an input. During the talk Jason suggested those interested in microcontrollers check out Pumping Station: One up on Clybourn. So I got some friends together and we went to PS1, and learned the basics of programming an Arduino. The event was a fun experience and, later that night, netted me a Larson Scanner. Since then I’ve procured a Raspberry PI, and started tinkering with Google Coder. And now it’s Tessel time.

At first I completely overlooked Tessel, even though they had a booth at Fluent Conf this year, a crowd I’m likely to pop up in from time to time given the nature of my work. But several months later they got on my radar again and I purchased one instantly after realizing I could run JavaScript on it. Finally! No more weird IDEs (Arduino) or fickle hardware environments (Raspberry Pi). Just sweet JavaScript and Tessel…

But wait, I hate JavaScript, JabbaScript, or whatever you call it. That may seem a little harsh, but after six years of writing the stuff I’ve gotten a healthy appreciation for not using it after I switched to CoffeeScript. And so after unboxing the Tessel and trying out a few sample scripts I got to the point where I wanted to write, but I wanted to write in CoffeeScript. And even though tessel does not currently support CoffeeScript, and I’d argue it never should, that doesn’t mean we can’t write CoffeeScript for it.

Follow along to learn how to transpile CoffeeScript to JavaScript using Yeoman and Gulp for use with the Tessel microcontroller.

Add Google Analytics to Ghost With CloudFlare

| Comments

Ghost is the new hotness in blogging. It has more than 5,000 backers on Kickstarter and has raised more than USD $300,000 in funding. But given its relatively new on the block, there’s not a lot in the way of tutorials or primers for getting started.

Looking at the world of analytics, there are a few tutorials on page one of Google which encourage users to customize Ghost themes. But customizing a theme is a hack and locks users into something I like to call a “customization corner”. Customizing in the way suggested makes it more difficult for users to switch themes later and increases the risk of functionality breakage when one theme is swapped out for another. Don’t do it.

Instead, consider adding analytics using a CDN like CloudFlare. Not only does adding analytics through a CDN prevent the need to customize Ghost, it’ll also speed up your blog at the same time and can be done without any coding. And the best part is, it can be done for free.

Learn how to add Google Analytics to Ghost for free, no coding required

FTP to Ghostify With Sublime Text

| Comments

I’ve wanted to write about a non-technical subject for a while to help round out my writing skills and cater to a broader audience. The subject matter of which became clear after recently discovering that there’s not a lot of information out there covering meals in the AM. So, with inspiration from my food-blogging neighbor, but with an obvious lack of understanding for the intricacies of food composition and preparation, I have decided to create a new food blog which focuses on something I love — Breakfast — and introduce it in an approachable way — with absurdity.

To get started, I decided to take advantage of the Thanksgiving Day message I received from Ghostify letting me know their beta service was ready. Within 5 minutes of entering my credit card details on the Ghostify site, I had my first Ghost blog up and running.

For those not familiar, Ghost is a new open-source blogging platform built on top of Node.js using Express. Like Wintersmith it takes an all JS approach to site generation — a novel shift from Ruby-based site generators like Octopress, as the need to learn any Ruby in order to customize it becomes irrelevant.

With the new blog is up on Ghostify I needed a quick way to create image assets for my new Ghost blog.

Not being a huge fan of CMS-based blogging platforms like Drupal and WordPress, I figured I might be able to leverage some Sublime Text SFTP research I did to test an FTP connection to Ghostify for image uploads. And it worked like a charm! Follow along to learn how to FTP static assets to Ghostify with Sublime Text.

Node.js Debugging Primer

| Comments

So I’m putting together this killer new JS front-end development stack called Brunch with Panache, which uses Jake tasks to kick off a custom set of commands for building and managing the app, and I hit a bug while code was running in node.js. So what now?

Follow along if you’d like to learn how to get started debugging Node.js applications using Jake.

The problem is the stack I’m working with is complex enough a small backtrace would be about as effective as a probe into Tesla’s recent automobile fires. Nevertheless, I want running Testlas [sic] so it’s time to jump into some Node.js step debugging. Follow along if you’d like to learn how to get started debugging Node.js applications.

Moved Two Sites to Octopress

| Comments

Learn how to migrate a site

A few weeks ago I was planning to undertake a survey of front-end tools but got sidetracked with an overwhelming desire to switch to a CMS-free blogging site at work and home, and so techblog.trunkclub.com and habdas.org have now been migrated to Octopress, a hackers blog, which, when custom tailored, allows for free hosting on GitHub Pages, simple online editing with Prose.io and continuous integration with Travis-CI.

If you’re having problems visualizing, just check out the system diagram. Head over to the Trunk Club Tech Blog and check out my latest article on migrating to Octopress to see how it’s done:

Moving From Tumblr to Octopress

Tools for Building Rich Web Apps

| Comments

Beware of list daunt

After recently planning to do a survey of tools for building rich web apps I stumbled across https://github.com/codylindley/frontend-tools, which claims to be an opinionated list of tools for building front-end applications. For those new to building modern web applications, it’s certainly easier to take in than larger lists like https://github.com/joyent/node/wiki/modules. But lists aren’t necessarily the best place to start for putting an application together. At least not where the rubber hits the road.

A Back-end for Backbone.js Apps Using Ruby, Sinatra and MongoDB

| Comments

After recently writing about web app development using backbone and vagrant I’ve started to spend time immersing myself in Ruby and Ruby Gems. Tonight while catching up on articles in my Pocket I ran across the following Addy Osmani article on creating a back-end for Backbone.js apps:

Building Backbone.js Apps With Ruby, Sinatra, MongoDB and Haml

Sweet. In addition to Addy’s very awesome and open-source book Backbone Fundamentals, he’s also writing some useful related articles. And though I’d likely ditch haml in favor of emblem with swag, Addy’s article ought to be a good starting point for the Ruby newbie.

The Holy Grail: Full-stack JavaScript MVC With Rendr

| Comments

Spike at Airbnb just mentioned during a live TechTalk webcast that the Rendr framework they built was open sourced earlier this month: https://github.com/airbnb/rendr. The framework leverages Node.js and Backbone.js to allow full-stack JavaScript MVC using a common set of code–greatly improving time to content, improving crawability, and reduces overall application complexity.

During the talk, Meteor and Derby were mentioned, and Mojito *sigh*. And Stitch was also mentioned, as a part of the stack they’re using. So anyway, there you have it. The Holy Grail I talked about. It’s out, but admittedly, according to Spike, not quite finished. Caveat emptor.

Later in the talk Spike mentions they were heavily inspired by Chaplin, which you can set up quickly by reading my recent post on developing modern web applications.

Installing and Using Rupa/z

| Comments

rupa/z is an amazing shell script that allows users to traverse a filesystem hierarchy in no time flat, with minimal effort. Use it if you spend any time at all changing directories in a *nix environment. It will improve productivity and spare fat fingers quite a bit of backpedaling.

z can be installed right from github by curling the raw source, making it available in path and then sourcing the file, e.g.

1
2
3
4
cd /usr/bin
sudo curl -O https://raw.github.com/rupa/z/master/z.sh
sudo chmod 775 z.sh
. /usr/bin/z.sh

Note: Add the source command (the last one) to your $HOME/.bashrc file to ensure z is available after every log-in.

Try it out by changing to a few of your most commonly used directories and then issuing the z command, e.g.

1
2
3
cd /usr/share/nginx/www
cd ~
z ww # or simply 'z w'

Hat tip to Paul Irish, who I met briefly after he demoed rupa/z at Fluent 2012. Skip to 2m23s for the z part.

Developing Modern Web Applications on Windows With Vagrant

| Comments

I earlier this month I spent way too much time writing an article on how to SFTP to Ubuntu Server with Sublime Text. The purpose of the SFTP effort was to set myself up for developing modern web applications on a new Windows 8 machine I bought to play SimCity 2013. And after getting everything working I realized the SFTP method had some gremlins and the file syncing reminded me of Dreamweaver–it simply wasn’t fast enough.

Lately, unless you were running a Linux machine or had the pleasure of owning a Mac with OS X, developing modern web applications has been a bit of a kludge. Enter Vagrant.

Vagrant is a tool for building complete development environments. With an easy-to-use workflow and focus on automation, Vagrant lowers development environment setup time, increases development/production parity, and makes the “works on my machine” excuse a relic of the past.

In this article I’ll explain how to set up a development environment in Windows using a virtualized Linux box, suitable for rapid prototyping. Then I’ll take it a step further and explain how to integrate a Backbone-based application framework with Vagrant and Sublime Text, greatly increasing the speed for developing modern web applications on Windows.