osx-web.md

making web on a mac a quick introduction

this is not intended as an entry level guide

Contents

• first steps
  • text editor
  • terminal
  • package manager
• git
• moving forward (client side)
• moving forward (server side)

I'm assuming you've done at least some programming, and are at least passingly familiar with a unix shell. I'm not assuming you've done any web development. I will focus on programming, but you should get familiar with markup (html, css) too.

first steps

text editor

You'll need a proper text editor. OSX comes with vim and emacs (if you're familiar with either, skip this step) but no decent gui-based editor. There are tons of good options but Atom is my favorite because of its nonrestrictive license, built-in package manager, and vibrant plugin ecosystem.

terminal

You can open up any app on a mac by pressing command-space, typing the name of the app, and pressing enter. Open up Terminal.app. You'll find yourself in a bash prompt.

aside (you can skip this): shells

OSX also comes with zsh, tcsh, and ksh. I use fish because its autocomplete works really well and I find it enjoyable to script in, but it isn't posix-compliant (the syntax is different from bash's), so I sometimes use bass to make things work smoothly. If you're familiar with a shell, go with it. If you're not, I recommend starting with fish or zsh.

Just like on linux, you can use chsh -s [name of shell] to change shells.

package manager

The App Store is great for GUI apps, but you'll want to install Homebrew to manage CLI programs and libraries.

Run the command at their homepage, and do anything it says to.

Then, you can install things with (eg) brew install wget and update them with brew update; brew upgrade.

important: Make sure the homebrew bin path (/usr/local/bin/) is loaded before the system bin path (/usr/bin/) in your $PATH environment variable in .bashrc (or whatever, depending on your shell. See above.)

git

Most web stuff happens on GitHub. You should do web stuff on GitHub.

OSX comes with a copy of git, but it's old. You should run brew install git to get an updated copy.

1. Sign up for GitHub.
2. Do the stuff in setting up git
3. generate ssh keys
4. install hub so you can use Github identifiers (atom/electron) rather than full urls ([email protected]:atom/electron.git) and create repositories on GitHub from the command line.

• If you're familiar with version control and you want to learn git syntax, read Roger Dudler's git guide
• If you're familiar with version control but not git and you want to know how git works, read git basics on the git website.
• If you're not familiar with version control, go through try git

moving forward (client side)

One of the biggest selling points for web development is the huge open source ecosystem. Use lots of stuff.

Run brew install node to install node and npm. npm is the package manager for (mostly non-browser) javascript.

Install a linter for your text editor (like this one for atom) to check for syntax errors as you type.

Install local-web-server and use it to serve the current directory at http://localhost:8000. Things work wrong when you use file:// (double-clicking an html file).

Start with plain old html and javascript. Host websites for free on github pages. Use <script> tags and cdns (especially cdnjs) to load library code so you don't have to worry about build processes. Use jquery for DOM manipulation.

Make sure you understand javascript's prototypal inheritance (read this) and lexical scope (closures, information hiding) (read this).

Then, get away from globals. If you buy into the idea that flow-based-programming (or 'reactive functional programming') can reduce complexity and make your architecture easier to reason about, check out noflo. requirejs is a module system for the browser that loads modules asynchronously (in development), or packages them into a single javascript file (in production). browserify uses the CommonJS module syntax that node uses on the server, but it can't do asynchronous loading and requires a build step.

Speaking of build steps, use gulp for task running. Since you have a build process now anyway, consider using babel so you can use convenient new javascript features (promises! generators! template strings! let scoping! for of! built-in modules!) but transpile them for older browsers. Also consider coffeescript.

Then, think about using MVC components like react, backbonejs, and angularjs. If you're making something really big, think about alternatives to MVC that handle complexity better, like Facebook's flux architecture.

aside: semver

Many npm packages use semantic versioning, or semver. A patch release (0.0.x) means no API changes, a minor release (0.x.0) means backwards-compatible api changes, and a major release (x.0.0) means backwards-incompatible changes.

moving forward (server side)

Here are some popular tools people use for web-facing stuff:

• ruby on rails is a web framework written in ruby (interpreted lisp minus s-expressions). It's very opinionated, 'favoring convention over configuration'. Ruby's modern (lispy, introspective) language features make development very fast. Rails is a big framework, and designed for making database-backed websites (think CRUD). Github was written in Rails. Ruby is highly expressive but slow-running, so Rails apps tend to rely on other languages/tools for for high-IO processing/workflow stuff.

• nodejs is written in javascript, which is handy since you'll need javascript in the browser also. It's very versatile, used in many non-web applications (like robotics!) where event driven architecture and non-blocking io are valued.

Javascript and Ruby tend to move fast and break stuff. Idiomatic Javascript in 2015 looks totally different from idiomatic javascript of 2012, and Ruby is historically pretty bad about releasing backwards-incompatible language changes without a sensible release/support/lifecycle plan. Below are some more stable languages:

• haskell is a purely-functional strongly-typed language especially popular for business logic / workflow (not web-ui) components.

• scala is a hybrid-oo+functional language that runs in the JVM. Companies committed to a Java stack switch incrementally over to Scala when they start to see the appeal of a modern language.

• clojure is a popular lisp dialect that runs in the JVM. It's probably the most popular straight-up lisp at the moment.

• go is a new (2008) language developed by Google. It's especially popular for ops-related stuff (like docker). It's designed around developer peace-of-mind; they started with C but it compiles quickly, has a killer standard library, and modern features. It's more conservative than the other languages listed (they shy away from powerful-but-difficult features that people will use poorly in practice) but easy to pick up delightful to use.

• rust is a very new (2010) systems programming language designed to have the speed of c++ but without the security/safety issues. It's moving quickly with tons of support from Mozilla.