Download - Playing With The Web
![Page 1: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/1.jpg)
Playing with the web
Christian Heilmann | http://wait-till-i.com | http://twitter.com/codepo8
Geek Meet Stockholm, December 2008
or “The geek shall inherit the earth”
![Page 2: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/2.jpg)
The web is an awesome opportunity and media.
![Page 3: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/3.jpg)
I learnt that pretty early and left an old media to work for
the new one.
![Page 4: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/4.jpg)
One thing that keeps amazing me about it is how simple the
technologies driving it are.
![Page 5: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/5.jpg)
You don’t need to be a rocket scientist to wreak havoc on the web.
![Page 6: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/6.jpg)
I am not talking about malicious intent here.
![Page 7: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/7.jpg)
I am talking about ethical hacking.
![Page 8: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/8.jpg)
So today I am going to show some tools I love to use to
play and mess with the web.
![Page 9: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/9.jpg)
Disrupting the process to foster and drive innovation.
Mr. Buzzwordwill see you now!
![Page 10: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/10.jpg)
Let’s start with the first one – a true Swedish product!
![Page 11: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/11.jpg)
![Page 12: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/12.jpg)
Their product?
![Page 13: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/13.jpg)
cURL
![Page 14: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/14.jpg)
cURL allows you to get raw text data from any server.
![Page 15: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/15.jpg)
You can create the full range of HTTP requests from a script
or the shell.
![Page 16: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/16.jpg)
Including POST requests, simulating cookies and all the
other goodies :)
![Page 17: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/17.jpg)
Which gives you an amazing amount of power
![Page 18: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/18.jpg)
Say you want to build an API that doesn’t exist.
![Page 19: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/19.jpg)
At Mashed08 I got bored.
http://www.flickr.com/photos/37996583811@N01/2600265124/
![Page 20: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/20.jpg)
Someone came to me and asked if I knew of a currency
conversion API.
![Page 21: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/21.jpg)
And I didn’t as there is none.(everybody pays good money for that data)
![Page 22: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/22.jpg)
So I went to Yahoo Finance.
![Page 23: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/23.jpg)
http://finance.yahoo.com/currency/convert?amt=1&from=USD&to=JPY&submit=Convert
![Page 24: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/24.jpg)
Simple, predictable URL :)
![Page 25: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/25.jpg)
I found the location of the result by viewing the source
of the page.
![Page 26: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/26.jpg)
http://www.wait-till-i.com/2008/06/21/currency-conversion-api/
function convert($from,$to){ $url= 'http://finance.yahoo.com/currency/convert?amt=1&from='.$from.'&to='.$to.'&submit=Convert'; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $feed = curl_exec($ch); curl_close($ch); preg_match_all("/tabledata1\">([^<]+)<\/td>/", $feed,$cells); return $cells[1][1];}echo convert(’USD’,'GBP’);
![Page 27: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/27.jpg)
Turning this into an API was easy:
![Page 28: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/28.jpg)
header('Content-type:text/javascript');$from = $_GET['from'];$to = $_GET['to'];$callback = $_GET['callback'];if(preg_match("/[A-Z|a-z]{3}/",$to) && preg_match("/[A-Z|a-z]{3}/",$from)){ $to = strToUpper($to); $from = strToUpper($from); $url= ‘http://finance.yahoo.com/currency/convert?’ . ‘amt=1&from=’.$from.’&to=’.$to.’&submit=Convert’; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $feed = curl_exec($ch); curl_close($ch);
![Page 29: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/29.jpg)
preg_match_all("/tabledata1\">([^<]+)<\/td>/",$feed,$cells); if(is_numeric($cells[1][1])){ $out = ‘{"from":"’.$from.’","to":"’.$to.’","factor":"’.$cells[1][1].’"}’; } else { $out = ‘{"error":"Could not convert currencies, are you sure about the names?"}’; }} else { $out = ‘{"error":"Invalid Currency format, must be three letters"}’;}if(isset($callback)){ if(preg_match("/[a-z|A-Z|_|-|\$|0-9|\.]/",$callback)){ $out = $callback.’(’.$out.’)';
![Page 30: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/30.jpg)
} else { $out = ‘{"error":"Invalid callback method name"}’; }}echo $out;
![Page 31: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/31.jpg)
Using the API is as easy...
![Page 32: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/32.jpg)
<script type="text/javascript"> function converted(obj){ if(obj.error){ alert(obj.error); } else { alert('one ' + obj.from + ' is ' + obj.factor + ' ' + obj.to); } }</script><script type="text/javascript" src="convert.php?from=gbp&to=usd&callback=converted"></script>
![Page 33: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/33.jpg)
View Source is a good start.
![Page 34: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/34.jpg)
However, much more win is Firebug.
![Page 35: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/35.jpg)
It has never been easier to find things to get with cURL.
![Page 36: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/36.jpg)
Say twitter information...
![Page 37: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/37.jpg)
![Page 38: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/38.jpg)
How about showing this as a cool chart?
![Page 39: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/39.jpg)
We all like to show off what we do on the web.
![Page 40: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/40.jpg)
Charts can be tricky...
![Page 41: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/41.jpg)
![Page 42: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/42.jpg)
Good thing that there’s Google Charts.
(yeah and YUI charts)
![Page 43: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/43.jpg)
http://www.wait-till-i.com/2008/11/23/show-the-world-your-twitter-type-using-php-and-google-charts/
![Page 44: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/44.jpg)
<?php$user = $_GET['user'];$isjs = "/^[a-z|A-Z|_|-|\$|0-9|\.]+$/";if(preg_match($isjs,$user)){ $info = array(); $cont = get('http://twitter.com/'.$user); preg_match_all('/<span id="following_count" class="stats_count numeric">([^>]+)<\/span>/msi',$cont,$follow); $info['follower'] = convert($follow[1][0]); preg_match_all('/<span id="follower_count" class="stats_count numeric">([^>]+)<\/span>/msi',$cont,$follower); $info['followed'] = convert($follower[1][0]);
![Page 45: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/45.jpg)
preg_match_all('/<span id="update_count" class="stats_count numeric">([^>]+)<\/span>/msi',$cont,$updates); $info['updater'] = convert($updates[1][0]); $max = max($info); $convert = 100 / $max ; foreach($info as $k=>$f){ if($f === $max){ $type = $k; } $disp[$k] = $f * $convert; } if($type === 'updater'){ $t = ' is an '; } if($type === 'follower'){ $t = ' is a ';
![Page 46: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/46.jpg)
} if($type === 'followed'){ $t = ' is being '; } $title = $user . $t . $type; $out = array(); foreach($info as $k=>$i){ $out[] = $k.'+('.$i.')'; } $labels = join($out,'|'); $values = join($disp,','); header('location:http://chart.apis.google.com/chart?cht=p3&chco=336699&'. 'chtt='.urlencode($title).'&chd=t:'.$values. '&chs=350x100&chl='.$labels);}
![Page 47: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/47.jpg)
function get($url){ $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $feed = curl_exec($ch); curl_close($ch); return $feed;}function convert($x){ $x = str_replace(',','',$x); $x = (int)$x; return $x;}?>
![Page 48: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/48.jpg)
What if you need to mix and match and filter data?
![Page 49: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/49.jpg)
http://www.wait-till-i.com/2008/09/28/useful-tweets-with-pipe/
![Page 50: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/50.jpg)
https://pipes.yahoo.com/
![Page 51: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/51.jpg)
https://pipes.yahoo.com/
![Page 52: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/52.jpg)
And *dum de dum de*...
![Page 53: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/53.jpg)
http://developer.yahoo.com/yql/console/
![Page 54: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/54.jpg)
/* Useful tweets badge by Christian Heilmann*/var tweets = function(){ var x = document.getElementById('mytweet'); if(x){ var twitterUserId = x.className.replace('user-',''); var s = document.createElement('script'); s.type = 'text/javascript'; s.src = 'http://pipes.yahoo.com/pipes/pipe.run?' + '_id=f7229d01b79e508d543fb84e8a0abb0d&_render=json' + '&id=' + twitterUserId + '&_callback=tweets.tweet'; document.getElementsByTagName('head')[0].appendChild(s); }; function tweet(data){ if(data && data.value && data.value.items){ if(typeof data.value.items.length !== 'undefined'){ var ul = document.createElement('ul'); var all = data.value.items.length; var end = all > 5 ? 5 : all; for(var i=0;i < end;i++){
![Page 55: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/55.jpg)
var now = data.value.items[i]; var li = document.createElement('li'); var a = document.createElement('a'); a.href = now.link; a.appendChild( document.createTextNode(now.title) ); li.appendChild(a); ul.appendChild(li); } x.appendChild(ul); } } }; return{ tweet:tweet }}();
![Page 56: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/56.jpg)
One of my favourite toys:
![Page 57: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/57.jpg)
Using GreaseMonkey you can change any web page out
there with DOM and JavaScript.
![Page 58: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/58.jpg)
You can for example prototype an enhancement and show it to people with a
single link.
![Page 59: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/59.jpg)
![Page 60: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/60.jpg)
![Page 61: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/61.jpg)
![Page 62: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/62.jpg)
By playing with the web you can do jobs that until now
cost a lot of money.
![Page 63: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/63.jpg)
Say you want to help your clients find good keywords to promote their product online.
![Page 64: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/64.jpg)
You can do some research, surf all the competitors’ sites
and note down the descriptions, keywords and
titles.
![Page 65: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/65.jpg)
Or you can be a man and use cURL to write a script to do
that.
![Page 66: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/66.jpg)
Or you can be a clever man and keep your eyes open and
check if there is an API for that.
![Page 67: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/67.jpg)
http://developer.yahoo.com/search/boss/
![Page 68: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/68.jpg)
http://boss.yahooapis.com/ysearch/web/v1/donkeys?format=xml&appid=...
![Page 69: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/69.jpg)
http://boss.yahooapis.com/ysearch/web/v1/donkeys?format=xml&view=keyterms&appid=...
![Page 70: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/70.jpg)
All you need to do is getting the top 20, analyzing the keyword frequency and
create a top 20.
![Page 71: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/71.jpg)
http://developer.yahoo.net/blog/archives/2008/11/boss_keywords.html
![Page 72: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/72.jpg)
Then you take YUI CSS grids, and spend 30 minutes playing
with colours and fonts.
![Page 74: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/74.jpg)
This is all cool, but does it bring us anywhere?
![Page 75: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/75.jpg)
Yes, if you get excited about the web and its opportunities
you can move things.
![Page 76: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/76.jpg)
It takes determination!
![Page 77: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/77.jpg)
![Page 78: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/78.jpg)
![Page 79: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/79.jpg)
And the outcome can be rewarding beyond anything
you ever imagined.
![Page 80: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/80.jpg)
http://www.youtube.com/watch?v=CwsDKaalgq8&
http://www.youtube.com/watch?v=QiuT0y0KR6I
![Page 81: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/81.jpg)
So by all means, put all your wonderful products on the
web.
![Page 82: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/82.jpg)
Especially when they cater a very specific need.
![Page 83: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/83.jpg)
The prime number shitting bear...
http://alpha61.com/primenumbershittingbear/
![Page 84: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/84.jpg)
And never stop to fiddle, tweak and poke at the things people offer you on the web.
![Page 85: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/85.jpg)
So thank you for having me here and listening.
![Page 86: Playing With The Web](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54bd61034a79595e238b45af/html5/thumbnails/86.jpg)
And I hope you will have an awesome Christmas!
Christian Heilmann http://scriptingenabled.org | http://wait-till-i.com
twitter/flickr: codepo8