Check open-austin.org for upcoming events

• You will get an invite via email
• Each project team will have its own channel (ex: #bill-tracker)
• Join as many channels as you want
• #general to make announcements
• #skillz to ask for help

ATX Hack for Change Github

Write a README

• Explain the purpose of the project
• Give instructions on how to get started
• Acknowledge contributors

Billtracker example

Markdown Resources

• Github's Markdown Tutorial
• MacDown for Mac
• MarkdownPad for Windows

Github Issues

• Make bit size, self contained tasks
• Assign issues to team members
• Create your own labels
• Close issues as you complete

Billtracker example

Waffle.io

The Web Stack

the chosen development environment of software and tools for any given project.

A Simplified Web Stack

• Presentation
• Application/Logic
• Database

The Presentation Layer

The core technologies of the web browser.

The Presentation Layer

Other jargon you may hear this weekend.

The Logic Layer

Web Languages & Frameworks

The Logic Layer

Native Languages & Client-side Frameworks

The Data Layer

SQL (Standard Query Language) vs. NoSQL (Not Only...)

Time to play with what we've learned.

Let's hack the news

Image Hacking

// This is some js code...

var coolPic    = "http://bit.ly/1ys7Hm8";
var boringPics = $(".media img");

boringPics.on("hover", function(){
	$(this).attr("src", coolPic);
});

The code explained:

• Let's find a cool picture on the internetz and call it "coolPic".
• Then we'll find all pictures("img") inside "div"s with the class "media".
• Now, when a boring picture gets hovered on...
• ...change this picture's source attribute(the url of the image) to our cool new picture.

All Browsers come with their own version of a Developer Console.

• Chrome Developer Tools
• Mozilla Firebug