621+ Programming Resources

Click the Pictures for Other Fun Stuff!

Origins from Jon Schoning, Sam Liao, Faraz Fallahi, Kevin Whinnery, Eric Elliot

Share it on Stumbleupon, Tumblr, Reddit

Hosting Credit

Getting Started with JavaScript and Web Technologies

Today, we’ll be working to understand how to create a web page using the technologies of the web browser, namely HTML, CSS, and (mostly) JavaScript.

Reference Resources

Arguably the best resource for documentation on the “web platform” (HTML, CSS, and JavaScript) is found on the Mozilla Developer Network. Here are the technologies we will be using:

Hypertext Markup Language (HTML)

HTML defines the structure and contents of a web page. Use HTML tags to display content on a web page.

Overview | Beginner’s Guide | Full Reference Documentation

Cascading Style Sheets (CSS)

CSS defines the style and presentation of a web page. Use CSS to define how HTML elements look.

Overview | Beginner’s Guide | Full Reference Documentation

JavaScript

JavaScript defines the behavior of a web page. Use JavaScript to react to mouse clicks and other user interactions.

Overview | Beginner’s Guide | Full Reference Documentation

Further Reading and Resources

Books

Websites

  • Codecademy: Accessible tutorials for JavaScript, HTML, CSS and many programming languages
  • Code Combat: Learn JavaScript by playing a game

Tools and Technologies

Programming Text Editors

  • CodePen: Web page to play around with HTML, CSS, and JavaScript
  • JSFiddle: Web page to play around with HTML, CSS, and JavaScript
  • Sublime Text: Cross-platform text editor
  • Notepad++: Windows-only free text editor
  • TextMate 2: Mac-only text editor

Hosting

  • Site44: Host static web pages on Dropbox
  • Heroku: Hosting for full web apps (advanced, but arguably the easiest way to deploy dynamic web apps)

Advanced Tools and Debuggers

Meta-Lists

Graphics Programming

Language Agnostic

Android

Autotools

ASP.NET MVC

Assembly Language

Bash

C / C++

Clojure

CoffeeScript

ColdFusion

D / DTrace

DB2

Delphi / Pascal

Django

Emacs

Erlang

Flex

F Sharp

Forth

Git

Go

Grails

Haskell

HTML / CSS

Java

JavaScript

JavaScript (Node.js specific)

LaTeX

Linux

Lisp

Lua

Mathematica

Maven

Mercurial

.NET (C# / VB / Nemerle / Visual Studio)

NoSQL

Oberon

Objective-C

OCaml

Oracle Server

Oracle PL/SQL

Parrot / Perl 6

Perl

PHP

PowerShell

Prolog

PostgreSQL

Python

R

Ruby

Ruby on Rails

Rust

Scala

Scheme

Sed

Smalltalk

Subversion

SQL (implementation agnostic)

Teradata

Vim

Websphere

Windows Phone

Required Reading (Online resources)

Required Viewing

Exercises

  • FreeCodeCamp Learn to build apps & work on not-for-profit projects. #exercises
  • LearnRx #exercises

Spec

  • ES5 Spec An annotated, hyperlinked version of the ES5 spec
  • ES6 Spec ECMAScript® 2015 Language Specification

Books

Dev tools & collaboration

  • nvm First install this…
  • Node Then install Node (with nvm). You’ll need this even if you’re a front-end dev.
  • npm Install lots of other things with npm. The package manager for JavaScript. Comes with Node.
  • Atom Nice, hackable editor by GitHub.
  • Node Inspector Debug Node code with the Chrome debug tools — save-live-edit true
  • TraceGL Powerful runtime analysis of live JavaScript code
  • Tern Static analysis in JavaScript
  • JSDoc Pair with Tern for static analysis
  • Slate Generate beautiful API docs for your apps
  • Slack Chat for teams, with GitHub and Google hangouts integration
  • Gitter Like Slack, but better for OSS projects and free chat.
  • Airety Better developer interviews via pair programming.
  • PrettyDiff
  • Babel Repl The Babel REPL with compiled output
  • Nitrous.IO Online IDE in the cloud with collaboration & Docker containers
  • Koding Online cloud development platform with video & audio collaboration

Building

Testing / Lint / Quality checkers

Transpilers

  • Babel Transpile ES2015 (ES6), ES7 to ES5, JSX to React.
  • TypeScript TypeScript’s structural types are worth a look, but I don’t use it.
  • Emscripten Frequently used for C/C++ JavaScript ports.
  • ES6 tools Addy Osmani’s ES6 Tools list.

JavaScript environments

  • Node.js Server side JavaScript and more

News

Contests

List by Jon Schoning, Sam Liao, Faraz Fallahi, Kevin Whinnery, Eric Elliot

The MIT License (MIT) Copyright (c) 2015 Eric Elliott Permission is hereby granted, free of charge, to any person obtaining a copyof this software and associated documentation files (the “Software”), to dealin the Software without restriction, including without limitation the rightsto use, copy, modify, merge, publish, distribute, sublicense, and/or sellcopies of the Software, and to permit persons to whom the Software isfurnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in allcopies or substantial portions of the Software. THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS ORIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THEAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHERLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THESOFTWARE.