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

Developing for Spark through USB

Although the Spark Core is perfect for IoT developers, you don’t NEED to connect your Spark Core to WiFi to code on it or have it run some firmware. (Although you will need it on your development machine)

By placing the following line of code at the top of your file, your spark will not try to connect to the internet when booting.

You will need to install spark-cli and login:

To flash your code onto your Spark via USB, your spark core needs to be put into DFU (Device Firmware Upgrade) mode:

  1. Hold down BOTH (RST and MODE) buttons
  2. Release only the RST button, while holding down the MODE button.
  3. Wait for the LED to start flashing yellow
  4. Release the MODE button

The core should now be in DFU mode

You will also need to install dfu-util and add it to your system path so that your development machine can recognize your Spark core and flash it.

(If you are using Windows, I suggest dfu-util-0.8-binaries.tar.xz)

Here is a great tutorial for installing the DFU driver. They use Zadig to install the driver for the Spark core so that your development machine will recognize it.

Once you open Zadig, click Options -> List All Devices
Select the device “CORE DFU” and the “libusbK” driver, then click Install Driver.

Now you can open up your terminal again and type the commands:

(Note: You will need to set your Spark to DFU mode every time that you want to flash new firmware onto it through USB)

THE 3D Modeling Software: Autodesk Fusion 360

If you are looking to start working on 3D modeling/rendering Autodesk Fusion 360 Ultimate is an awesome professional grade 3D modeler which is pretty much free (until you start making money). On top of the ability to use 3D modeling software on your computer, it gives you the ability to use the Web to do the same thing or mobile applications! They have great tutorials and everything about your projects or profile is hosted in the cloud so that you can access it from anywhere. Just check out some of the awesome things that people are making!
AutodeskFusion360Gallery

Don’t be scared by the “free for 30 day trial” message. They aren’t going to limit the functionality of their software; it doesn’t require a credit card to sign up. They don’t want you to be paying money if you aren’t making more profit than the cost of their subscription.

AutodeskFusion360ForFreeIf you sign up and select the startup entitlement, you can use Autodesk Fusion 360 Ultimate free for one year after which you will be asked to start a paying subscription if you are making money or continue under the startup entitlement for another year.

 

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 Impressions with Spark Core

Spark Core Package

WOW this thing is small! (and that’s a good thing) It’s roughly the size of a USB thumb drive and includes WiFi, 8 analog pins, and 8 digital pins.

 

Spark Core in PackageSpark Core on Board

The initial setup instructions of the Spark Core were all online at http://docs.spark.io/start/. The setup process really shows the strong suits of the Spark Core in the wireless setup instructions as well as communication to the Core through an iOS or Android app. You can also connect it via a computer, but the simplicity of the mobile connection startup was unique.

My troubles with the “Getting Started” process were in the WiFi connection. Since my Spark Core was the uFL connector type, trying to connect to my router from across the room did not work without an antenna. However, once I realized that the problem might be the signal strength, my setup process worked flawlessly after I tried the pairing process with both the Spark Core and my iPhone right next to the router.

After setting up the Spark Core, I was able to toggle the digital pins from the iOS application seamlessly, the only thing to note is that the digitalWrite does not register until after you exit the change state dialog

Spark iOSIn order to push the change to the board, it needs to look like this:

Spark iOS2

The examples are easy to code and run via the web IDE or dev software and SparkJS allows for easy web development through Node.js to connect to and call functions that have been flashed to the firmware on the Spark Core. Overall, the Spark Core provides a true out of box IoT (Internet of Things) device. I’m excited to start using it for some of my projects!

 

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