Intro to Hackathon Tech and Tools
or How I Learned
to Stop Worrying
and Love the Code
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 LibraryCivic Hack Night
Tuesday, July 14th, 6:30pm - @WeWorkCheck 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: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.
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.
Github Pages
https://pages.github.com/Markdown
Web Markdown Editor
Integrations
- Github
- Giphy