Intro to Hackathon Tech and Tools – or How I Learned to Stop Worrying and Love the Code – I have a confession

View Github Repository Open presentation in a new window

mateoclarke

See all presentation from mateoclarke

Intro to Hackathon Tech and Tools – or How I Learned to Stop Worrying and Love the Code – I have a confession

0 0

atxhackforchange-workshop

Intro to Hackathon Tech and Tools

On Github mateoclarke / atxhackforchange-workshop

Intro to Hackathon Tech and Tools

or How I Learned to Stop Worrying and Love the Code

Mateo Clarke / @mateoclarke

jump in

hang on tight

...I promise, no one will get hurt

Front End Engineer

@academicworks

Director of Civic Hacking

@openaustin

Open Gov & Civic Tech Meetup

Monday, June 15th, 6:45pm - @Terrazas Library

Civic Hack Night

Tuesday, July 14th, 6:30pm - @WeWork

Check our site for more details

I have a confession

Imposter syndrome

...is a psychological phenomenon in which people are unable to internalize their accomplishments. Despite external evidence of their competence, those with the syndrome remain convinced that they are frauds and do not deserve the success they have achieved.

Everyone has something to teach.

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

Now let's build an app called

Social Taco

Social Taco App

First let's create a new folder called "social-taco" somewhere easy. Like the desktop. Now, let's open that folder in a text editor. I like Sublime Text. Atom is cool too. Create a new file called "index.html". And type in some text like "Hello Taco Loving World!" Open that file in a browser...

Social Taco App

Let's wrap what we have in some boilerplate HTML.

Social Taco App

Now let's update the body with the actual HTML we want.

Social Taco App

  • Now we need to make our taco app look pretty with some CSS.
  • Create a new file called "styles.css".
  • Code Snippet Link

Social Taco App

For our "index.html" to be aware of this new CSS file, we need to link them. In the head section of the HTML add: 
<link href="style.css" rel="stylesheet">
And we'll also want to reference a few other css libraries, like Bootstrap: 
<link rel="shortcut icon" href="/taco.png">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://bootswatch.com/yeti/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />

Social Taco App

Download this Taco image and save it into the same social-taco folder. We'll place it on the map for each taco joint. Then don't forget to reference it in the HTML. 
<link rel="shortcut icon" href="/taco.png">

Social Taco App

Here is all the javascript code we need. Add it directly beneath the closing body tag.

Social Taco App

Lastly, create a file called "data.json" which will be referenced to place taco markers on the map. 
{
    "tacos":[
        {
            "name": "Tacodeli",
            "neighborhood": "Rosedale",
            "url": "http://www.tacodeli.com/",
            "location": [30.311021, -97.741042]
        },
        {
            "name": "Taco-Mex",
            "neighborhood": "Blackland",
            "url": "https://plus.google.com/110081654824079582056/about?gl=us&hl=en",
            "location": [30.284662, -97.714851]
        }
    ]
}

Github Pages

https://pages.github.com/

Markdown

Web Markdown Editor

Integrations

  • Github
  • Twitter
  • Giphy

Resources:

Intro to Hackathon Tech and Tools or How I Learned to Stop Worrying and Love the Code Mateo Clarke / @mateoclarke