DGMD S-15

The Long Story

If you are really into tooling and want to take a bit of a meandering jaunt through what's out there and why you might choose to use which things for what, feel free to read on. It's sometimes hard to keep track of which pieces of technology are responsible for what behaviors and when. Hopefully, these descriptions will serve as pointers.

JavaScript, HTML, and CSS references

There's a potentially dizzying amount of detail involved in building with JavaScript and web technologies. Different APIs, language features, browser difference, etc. It's important to have easy, reliable, and clear documentation on hand.

We recommend that you use devdocs.io for looking up how particular functions—in node.js or JavaScript or the Web API for the browser—work. You'll notice it also has documentation for other tools and libraries you may use (including git and jQuery).

If you're not sure exactly what you're looking for, or you'd like to read about a function or feature in more detail, we recommend Mozilla Developer Network's (MDN) documentation on the Web API (those JavaScript interfaces defined for browsers), JavaScript (the language itself), and CSS.

But often it can be helpful to have a bit broader introduction to these ideas which goes beyond references. MDN's introductions to CSS and HTML are a good place to start, or if you prefer something more integrated, Shay Howe's Learn to Code HTML & CSS.

If you're looking for a good overview and introduction to the language of JavaScript, we recommend you take a look at Henrik Joreteg's Human JavaScript or Douglas Crockford's JavaScript: The Good Parts.

Package managers

The dizzying number of tools and libraries available inevitably creates a lot of complexity—what works with which version, how do you install it, uninstall it, what requirements does a particular library entail, etc. To manage this complexit, the software development community has the notion of a "package manager"—a program which manages the installation of other programs. For those of you using Linux machines, this is already near-and-dear to you. For those of you on a Mac, we'll be using Homebrew. We'll also be using npm (short for "node package manager").

Sublime Text

You'll be spending nearly all your time either designing your program, or writing that program in a text editor. People have built tools that make it especially easy to write and format code. We'll be using a freely available text editor, Sublime Text 3.

It's worth your time to sit down and work through a tutorial or two to get the lay of the land when it comes to Sublime Text's capabilities. We'd suggest beginning with this one from scotch.io and this one from tuts+.

Outside of being free, multiplatform, and nicely designed, one of Sublime Text's biggest strengths is its plugin system and the community of developers who've created plugins for Sublime Text. To install the Package Control plugin used to search and install for other packages, click on the Sublime Text 3 tab here and follow the directions on that page.

You can browse available packages here or get a quick overview of some useful ones here.

We'll be using at least these, two plugins:

Terminal

Terminal applications offer a text-based way of interacting with your operating system. This means that you can do many of the basic things you do with your operating system—browse directors, move and rename files, install applications, and so on—via text. But, the terminal also gives you much broader and deeper access to many of the internals of your computer which might not have a graphical interface. As you build things, you'll find that much as it's worth making your editor a comfortable place to work, the same is true of your terminal

iTerm2 is a nice replacement for Mac OS X's default Terminal.app If you're using a Windows machine, we recommend using msysgit.

Google Chrome development tools

In this program, we'll be building solely for Google Chrome, version 40 or later. This is to avoid inconsistencies in implementations across browsers, simplify our use of many upcoming features in JavaScript, ensure that we all share a common development environment, and give you access to the wonderful set of development tools bundled with Google Chrome.

To get started with Google Chrome's developer tools, after installing Google Chrome, check out this article from HTML5Rocks or Chrome's overview.

Git & Github

Git is a piece of software we'll be using to store and share our projects. Git is used to do a mix of keep a complete, rewindable history of a set of files and collaborate on those files with others without stepping on one another's toes. It is used primarily by software developers to maintain and collaborate on code. We recommend working through git's own tutorial, and if you'd like a little more background, Lars Vogel's tutorial is a good place to start.

We'll be using git to maintain and share our projects with the support of a service called GitHub. GitHub and git are different tools maintained by different people. Git is the tool that lives on your computer which you use to maintain your project. GitHub is a commercial service which provides a centralized place where people can collaborate on projects maintained with git, and layers on top of git a variety of nice services and web interfaces. They have a helpful promotion which we'll be taking advantage of for this program. This video from GitHub is a nice introduction to both git and GitHub, and we recommend that you work through it; you may also find this interactive tutorial and this article on getting started with GitHub helpful.

After you're a bit more comfortable with what's going on with git and GitHub, please check out this introduction to GitHub Issues and this video on the feature. We'll be using Issues to ask questions, provide feedback, and file bugs. Then, check out this article and video introduction to Pull Requests, another feature of GitHub we'll be relying on for sharing work.

Digital Ocean

It has become incredibly 'easy' (in comparison to the historical process) to deploy your own servers. Once upon a time, you had to set up a physical machine. Now, that physical machine has been largely abstracted away by various service providers like Amazon and Heroku. We'll be using Digital Ocean, a provider of computers-in-the-sky. They participate in GitHub's Student Education Bundle. For a quick overview of setting up a computer-in-the-sky (Digital Ocean calls them 'droplets'), check out this article or this video.

Amazon S3

For a variety of reasons, it turns out that in addition to computers-in-the-sky, we often find ourselves wanting hard-drives-in-the-sky without the hassle of thinking of them as associated with individual computers for doing things like storing media and data that our applications access. We'll be using Amazon's Simple Storage Service (S3) for this. Unfortunately, Amazon's documentation is pretty thorny, so to get started with S3, we suggest you take a look at this post from Hongkiat Lim and this video.

Tessel & L3D Cube

For the physical computing and hardware portion of this program, we're going to be using the tessel microcontroller platform and its associated modules. The Tessel is programmable via JavaScript and comes with wifi access built-in. This means that you'll be able to use the same language in your digital and physical projects, and that your tessel will immediately be able to access (and be accessed by other machines on) the internet. For a short introduction, check out sections 0–2 and 4 on Tessel's site. We'll also be using the L3D Cube for some of our explorations with computational art, and you're welcome to use the cubes for project ideas and extensions as they come up.