Updated Experience with Spark Core

After a week of continual use with the Spark Core I have an updated view on the Spark ecosystem.

It’s incredible how easy it is to develop and connect your core to sites developed in Node.js (check out the project I made: http://sparkrgb.azurewebsites.net/). The biggest part of that project was making sure the RGB strip worked and the UI for the website interface. Connecting the two together was the simplest part. The only major disadvantage to using the Spark ecosystem is the fact that you are required to use their Spark cloud to communicate to your device. (Although they are open sourcing a spark-server on Github, it uses the same format as the Spark Cloud.)

Here are some of my personal remarks on the ecosystem:

  • Connecting the Spark to a Mac is pretty easy through USB, but doing it on your Windows machine requires a little more driver interaction. See my blog post on that here.
  • Resetting your Spark’s preferred WiFi connection with the mobile apps is horrible when you compare it to the simplicity of using the command-line interface on your development machine through USB.
  • The Spark Core remembers 7 WiFi credentials. If you add an 8th it will remove the 1st.
  • In order to compile an INO into the firmware, an internet connection is needed on your development machine at least, so there is no way to develop on a self-contained network even if you do not plan to use internet connected capabilities.

Overall, I think that the Spark ecosystem provides the best experience for developing IoT devices currently.

An Awesome Thumbnail Grid with Expandable Preview

While looking for beautiful ways to display projects, I stumbled on this tutorial: http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview

The code for which is located here: https://github.com/codrops/ThumbnailGridExpandingPreview

It is purely CSS and javascrip and creates a responsive grid layout that analyzes the location of the object you click and scrolls/resizes appropriately. I’ll DEFINITELY be using this in a few projects in the future.

Add Speech Recognition Easily!

Just found out about a cool HTML5 Web API that is built into Google Chrome.

microphonedisabled

Since it is vendor prefixed, this API will only work if a user’s browser supports it (for now Chrome). The cool thing about it though is that in order to use it on your site, all you need to do is write some javascript that checks for “webkitSpeechRecognition” and then creates an instance of it, and then use it. Combine this with your IoT devices and you’ve got voice enabled commands for your interacting with your devices!

This tutorial walks you through the basics of how it gets integrated:
http://updates.html5rocks.com/2013/01/Voice-Driven-Web-Apps-Introduction-to-the-Web-Speech-API

This is the full sample: https://github.com/GoogleChrome/webplatform-samples

Node.js with SparkJS on a Website

Never used Node.js before? Want to test out SparkJS? This is the guide for you.

Background: I have done some development in Node.js before to build websites and small maker projects, but it has been a while since I touched Node.js, so I needed a refresher when I decided to work with the SparkJS package.

Things you will need:

Install node & npm

This will start up the basic express web server that you can navigate to from a web browser by going to the url: http://localhost:3000/

Create an index.html file in your myapp\views folder with the content from here:

Add another line at the end of the index.jade file that says

The whole project can be found at https://github.com/anthony-ngu/sparkjs-example

In order to download the proper node modules, you will need to run the following command from the example directory:

Reading Material:

First Post via Email

So simple! Plugins are simple to install and activate from the WordPress dashboard.

After signing up for a WordPress.com account and installing the Jetpack plugin, I was able to activate it and authorize it to use my WordPress.com account. Then by generating a special email address that enables me to post via email, I can now send emails to this special email account and it will post them for me!

It allows me to tag the email with special short does which enable categories, tags, delay posting, etc.
Jetpack Info on Email Posting

Why WordPress?

I figured that I should document my reasoning for choosing WordPress for this blog over Jekyll, Octopress, Pelican, or most other popular static site generators. The biggest reason for me was the accessibility of WordPress. I can access the content and update it from my phone or write posts via email! While most static site generators provide a great platform for creating and maintaining a blog via the desktop, very few seem to have the capability to update it when on the go.

Another reason to use WordPress are the themes. The ability to add and switch layouts seamlessly without delving into the code and switching it out yourself makes creating a beautiful blog simple. If you want to make edits to a theme you can (I would suggest using Child Themes so that they are saved between Theme updates). Adding other users who can manage posts or enable comments can all be changed via the dashboard.

Overall, it provides a great platform to blog on for people who don’t want to think about the code behind it.

Ruby and Javascript

I have been working a lot lately with Ruby and Javascript for a couple of website ideas that I have been developing and figured I would document the ways to print out debugging messages. One of the biggest tools for a developer is a debugger. Having a way to print out a debugging message is vital to faster development and fixing bugs or broken code.

Javascript:
console.log(“debugger output”);
Prints out to the Console window in the Chrome debugger.

Ruby:
logger.debug “debugger output”
Prints out to the Log file under the Ruby log folder.

Something to keep in mind when developing in Ruby and Javascript is the separation between server side code and user/client code. Ruby code is mainly server side; anything that it provides to the UI will be static and cannot be altered once it has been rendered. Javascript on the other hand is meant for user/client facing code. It is meant for making changes to a page that has already been rendered and this makes it perfect for most user interactions on a page.