hack your browser!

Hack Your Browser!Nerd Nite • 14 May 2013

Jen Bisignani (jen.bisignani@gmail.com)

Logistical announcements

- I use the Google Chrome browser throughout. There are alternatives. The leading alternative is Mozilla's Firefox browser with the Firebug plugin.

- The internet is a jungle. Hack websites = deal with people's code. Most people write crappy code.

- These slides will be posted on the NerdNite website.

Browsers, Servers, InternetsHack 1: The address bar

Websites are complexHack 2: Relatively simple website

More on JavascriptHack 3: Reformatting in Javascript

Hack 4: Free Unlimited NYT

Today's agenda

Yowsers - browsers!

Google Chrome

Internet Explorer

Mozilla Firefox

Opera

Safari

Iron

Source: http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

This is the Internet

http://en.wikipedia.org/wiki/Internet

The browsing experience

This is you.

The browsing experience

The browsing experience

The browsing experience

The browsing experience

The address bar

http://subdom.domain.us/path/to/stuff?param1=xx&p2=yy

Hack 1: Craigslist Address Bar

A website is not a static image!

- Different size screens

- Different browsers

- Different user settings

- Different site functionalities

What's in a website?

• HTML (HyperText Markup Language)What are the objects on the page?

• CSS (Cascading Style Sheets)What should they look like?

• JS (JavaScript)What should they do?

HTML: the DOM (Document Object Model)

What's on a page?

- Divs - Paragraphs - Lists - Images - Buttons - Tables

http://www.flickr.com/photos/starttheday

CSS

- What the page elements should look like

- Where they should go on the page.

http://www.flickr.com/photos/ariville

Hack 2: Very Simple Page

Javascript

Directly control what your browser does:

- Any moving effects (like mouseovers, popups, etc)

- Calls to the server

... and so much more

http://www.t-online.de/regionales/id_42087044/laatzener-stellt-wm-spiele-mit-lego-steinen-nach.html

Hack 3: Reformatting in JavaScript

Hack 4: free unlimited NYT

Thank you!

Resources:

www.google.com (seriously!)http://www.stackoverflow.comhttp://en.wikipedia.org/wiki/JavaScripthttp://www.w3schools.com/js/http://dev.opera.com/articles/view/12-the-basics-of-html/http://www.dontfeartheinternet.com/http://www.netmagazine.com/tutorials