1 Tools for Development and Deployment: Readings and References

Below you will find information on recommended and required tools that we may use during the course.

2 Code Editors

If you already have a favorite, that is fine, here are some of the free code editors I use most often:

  • Brackets Code Editor. Open source. Made with JavaScript. Knows about web technologies such as HTML, CSS, Javascript, and more. I use the following plugins: Beautify, Interactive Linter, Outline List, and Markdown Preview.

  • Atom. Open source. Made with JavaScript. Lots of plugins. Built in HTML preview. I added the following plugins: Markdown Preview Plus (for Pandoc and math support), Document Outline, Prettier-Atom. Built on the Electron platform.

  • Other good free editors include Notepad++ (windows), Vim, Geany.

3 Version control

We will be using the Git version control system in this class. Recommended reference material includes:

  1. My class notes on Git for Small Projects and Class Work.
  2. Start with the Git Handbook for fairly complete but short read (they claim 10 minutes) about git.
  3. Lot's more information can be found in The Git Book.
  4. Relatively fun online training: Learn Git Branching. Nicely put together web application.
  5. Official cheat sheet.
  6. Git Visualizer. "Explore how Git commands affect the structure of a repository within your web browser with a free explore mode, and some constructed scenarios." I'll use this for class demonstrations.

4 Markdown

Using raw HTML or template languages can be quite tedious for everyday types of writing or code documentation. In addition, taking the time to insert HTML tags can make the already painful task of writing even more horrible. An alternative approach is to use a simplified text markup format. One very popular format that I use all the time is markdown. As they say on the Commonmark home page:

It’s a plain text format for writing structured documents, based on formatting conventions from email and usenet.

  • The CommonMark 60 second syntax guide can get you up an running very quickly. They also have a more complete 10 minute tutoria.

  • Online Markdown previewer/HTML converter

  • JavaScript reference implementation. Which can be installed via npm: npm install -g commonmark and then called from the command line commonmark inputfile.md > outputfile.html. You then can take the HTML content produced and insert it into a full HTML page, common mark does not produce a standalone HTML file.

  • Note that there are other more advanced tools that can work with Markdown. The Pandoc tool can convert between a number of different markup formats and allows for very useful extensions to Markdown:

Pandoc understands a number of useful markdown syntax extensions, including document metadata (title, author, date); footnotes; tables; definition lists; superscript and subscript; strikeout; enhanced ordered lists, ...

  • The Brackets and Atom editors have plugins for rendering markdown previews. In fact I use markdown and Pandoc to create these notes.

5 JavaScript Tools

5.1 Nodejs

Node.js is a server side (non-browser) environment for running JavaScript. We will use it for our server side work.

  1. My Slides on Node.js and NPM.

  2. Node.js homepage.

  3. Node.js ES2015 (ES6) support.

  4. Node.js has its own simple Module system based on a function called require(...). Currently standard JavaScript modules import/export are not supported by any browsers we'll use them via a transpiler but not on the server side.

  5. After installation you can start a command line JavaScript interface with the command node. Exit the interface with the command process.exit()

  6. You can use the require function to import JSON files into objects. For example var test1 = require('./first.json').

Optional Readings:

  1. Why the H-ll Would You Use Node.js.

5.2 JavaScript Package Management: NPM

NPM -- package management and scripting

npm is the package manager for JavaScript and the world’s largest software registry. Discover packages of reusable code — and assemble them in powerful new ways.

However npm is more than a package manager and is a powerful scripting environment and we will use it as our build tool rather than yet another tool such as Gulp or Grunt.

  1. Beginners guide to npm.

  2. How to Use npm as a Build Tool

  3. Using npm as a Build Tool

5.3 Babel

Babel is a JavaScript compiler

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in old browsers or environments.

Huh? Why? Basically, Babel has allowed the JavaScript language to advance in ways that make it a modern, easier to use programming language without rendering older (and not so old) environments (browsers primarily) out of date. We will be using Babel indirectly when doing our React development work.

5.4 Webpack


At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

5.5 Code formatters: Prettier

We will use the Prettier code formatter on our JavaScript, CSS, JSON, and Markdown files. You will need something else or hand clean your HTML files for consistent and clear formatting.

5.6 JavaScript Linter

For the class we may look at using ESLint. Modern and well documented.

## Syntax highlighting

I use Prism.js to perform syntax highlighting on most of my code examples.

A fairly recent review of JavaScript based syntax highlighters can be found at Top 5 : Best code syntax highlighter javascript plugins.

6 Cloud Services

See Data Center Networking

We can also look at this from the point of view of compute virtualization:

  • No Virtualization running directly on hardware (CPU)
  • Virtual Machines -- each VM has its own OS and is sharing the same real hardware CPU
  • Containers (Docker)
  • Multi User OS separate users
  • Operating system processes
  • Threads