ATX Hack for Change logo

Intro to Hackathon Tech and Tools

@mateoclarke
Brigade Captain for Open Austin

Open Austin
Code for America
Code Across Event

Check open-austin.org for upcoming events

Slack logo
  • 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
Github logo

ATX Hack for Change Github

atxhackforchange github screenshot

Write a README

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

Billtracker example

Markdown Resources

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

Waffle.io screengrab

The Web Stack

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

A Simplified Web Stack

  • Presentation
  • Application/Logic
  • Database
Common Web Architecture

The Presentation Layer

The core technologies of the web browser.

HTML5 Logo CSS3 Logo Javascript Logo

The Presentation Layer

Other jargon you may hear this weekend.

Bootstrap Logo jQuery Logo Sass Logo Coffeescript Logo

The Logic Layer

Web Languages & Frameworks

Ruby Logo Python Logo PHP Logo Javascript Logo Rails Logo Django Logo Laravel Logo Node Logo

The Logic Layer

Native Languages & Client-side Frameworks

Swift Logo Java Logo Angular Logo React Logo
Apple Presentation Slide

The Data Layer

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

MySQL Logo Postgres Logo Redis Logo MongoDB Logo
Database comparison
Common Web Architecture

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

Your Homework

  • Submit your Project Proposal
  • Create a Github Repo
  • Write a README.md with info about the project
  • Add some Issues with actionable tasks
  • Log into Slack and start the conversation

Resources: