<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Feross &#187; Computer Science</title>
	<atom:link href="http://www.feross.org/category/cs/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.feross.org</link>
	<description>Pure concentrated awesome.</description>
	<lastBuildDate>Thu, 26 Jan 2012 01:04:46 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>1% of CMS-Powered Sites Expose Their Database Passwords</title>
		<link>http://www.feross.org/cmsploit/</link>
		<comments>http://www.feross.org/cmsploit/#comments</comments>
		<pubDate>Thu, 17 Nov 2011 10:23:19 +0000</pubDate>
		<dc:creator>Feross Aboukhadijeh</dc:creator>
				<category><![CDATA[Computer Science]]></category>
		<category><![CDATA[Hacks]]></category>
		<category><![CDATA[Security]]></category>
		<category><![CDATA[Stanford]]></category>
		<category><![CDATA[Web Dev]]></category>

		<guid isPermaLink="false">http://www.feross.org/?p=3864</guid>
		<description><![CDATA[Nearly 1% of websites built with a content management system (like WordPress or Joomla) are unknowingly exposing their database password to anyone who knows where to look. New research by Feross Aboukhadijeh reveals the details.]]></description>
			<content:encoded><![CDATA[<p><strong>Nearly 1% of websites built with a content management system (like WordPress or Joomla) are unknowingly exposing their database password to anyone who knows where to look.</strong></p>
<h1>TL;DR &#8212; Summary of the Problem</h1>
<p><strong>Using a text editor to modify content management system (CMS) configuration files (like wp-config.php) could expose your database password to the world.</strong> Several popular text editors like Vim and Emacs automatically create backup copies of the files you edit, giving them names like &#8220;wp-config.php~&#8221; and &#8220;#wp-config.php#&#8221;. If the text editor crashes or the SSH connection drops during editing, then the temporary backup files may not be cleaned up correctly. This means that the CMS config file (which contains the database password) <strong>could accidentally be made public</strong> to anyone who knows where to look.</p>
<p>Most servers, including the ubiquitous Apache, will happily serve the plaintext of <strong>.php~</strong> and <strong>.php#</strong> files without passing them through the PHP preprocessor first, since they don&#8217;t have the <strong>.php</strong> file extension. Thus, your sensitive database credentials are just <strong>one GET request away from being accessed by a malicious party</strong>.</p>
<p>I wrote an automatic program, which I call CMSploit, to test for the prevalence of this issue across the wider web. I tested the top 200,000 websites (as ranked by Quantcast) and <strong>found that 0.11% of websites are vulnerable.</strong> If we eliminate non-CMS sites, and just look at CMS-powered websites, then we <strong>find that 0.77% of websites running a CMS have publicly-visible config files.</strong></p>
<p>If you want all the gory details, then keep reading.</p>
<p><span id="more-3864"></span><br />
<h1>CMS Configuration Files</h1>
<p>Most content management systems (CMSs) store sensitive settings like the database hostname, database name, database username, and database password in a file that sits in the root of the web directory.</p>
<p>Here is what a typical config file looks like:</p>
<p>
<pre class="brush: php; title: ; notranslate">&lt;?php
define('DB_NAME', 'my_secret_database'); /** Name of WordPress database */
define('DB_USER', 'secret_agent_1'); /** MySQL database username */
define('DB_PASSWORD', 'you_will_never_guess_this'); /** MySQL database password */
define('DB_HOST', 'localhost'); /** MySQL hostname */</pre>
</p>
<p>Here is a list of the various configuration files used by the most popular CMSs:</p>
<p>
<pre class="brush: plain; title: ; notranslate">wp-config.php        # WordPress
config.php           # phpBB, ExpressionEngine
configuration.php    # Joomla
LocalSettings.php    # MediaWiki
mt-config.cgi        # Movable Type
settings.php         # Drupal</pre>
</p>
<p>Despite the fact that these configuration files exist in a publicly accessible folder, the file contents are unviewable by a normal web user. Accessing the file directly does not work because the PHP interpreter handles all requests to <strong>.php</strong> files and wisely <strong>returns a blank page instead of the actual file contents.</strong> (Try accessing http://www.example.com/wp-config.php on your favorite WordPress blog to see what I mean. You should get a blank page back.)</p>
<p>As you can see, all the sensitive database information is located within &lt;?php ?&gt; tags. So, even if a malicious user were to access your config file directly, the PHP preprocessor would just run the PHP code, which defines some PHP global variables and then returns a blank page. Thus, no harm done, right?</p>
<h1>Text Editors Make Temporary Files</h1>
<p>Popular command line text editors like Vim, Emacs, Gedit, and Nano create <strong>several temporary backup files</strong> during the course of file editing. When you open a file for editing, a backup of the original file is saved. Depending on your text editor, in-progress file changes might also be saved to a <a href="http://en.wikipedia.org/wiki/Swap_file">swap file</a>, so you can restore your unsaved changes in the event of a program crash, power outage, or connectivity issue.</p>
<p>If all goes well, when you&#8217;re done editing the file, the text editor deletes the temporary files so your filesystem doesn&#8217;t accumulate dozens of old temporary files. <strong>However, if your text editor crashes or you lose your connection, then the temporary files will still be on your filesystem.</strong></p>
<p>Here are the temporary filenames used by the most popular text editors (assuming a file named wp-config.php):</p>
<p>
<pre class="brush: plain; title: ; notranslate">  wp-config.php~        # Vim, Gedit
 #wp-config.php#       # Emacs
 wp-config.php.save    # Nano
 wp-config.php.swp     # Vim (swap file)
 wp-config.php.swo     # Vim (swap file)</pre>
</p>
<h1>Putting Two and Two Together</h1>
<p>If a CMS user edits a config file on their live site (as opposed to editing it offline and uploading it over FTP), then <strong>there may be temporary files which contain their database password floating around in publicly-accessible folders</strong>.</p>
<p>If someone requests one of these temp files, then <strong>most servers will return the plaintext, skipping the PHP parser completely</strong> &#8212; <em>yikes!</em> By default, Apache assumes that only files which have a <strong>.php</strong> file extension are PHP files. If the file extension is not <strong>.php</strong>, Apache happily serves up the plaintext of the file.</p>
<h1>How prevalent is this problem?</h1>
<p>After noticing this security issue on one of my websites, I became curious to find out how common it is across the wider web. So, I wrote a program to test the top websites and get a rough idea of the prevalence of this problem. I call it CMSploit. The program is pretty simple &#8212; it issues GET requests to a site to test for the presence of temporary backup files with common CMS config filenames.</p>
<h2>Here were my results:</h2>
<ul>
<li>Tested the <strong>216,391 most popular websites</strong> (according to Quantcast).</li>
<li>Found <strong>230 config files</strong> visible in root of site.</li>
<li>
<p>Thus, 230 / 216391 = <strong>0.11% of all websites are vulnerable.</strong></p>
</li>
<li>
<p><a href="http://trends.builtwith.com/cms">Latest stats</a> say that about 13.8% of the top 10,000 websites run CMSs. If we just focus on CMS-powered websites, then the percentage of vulnerable sites is much higher:</p>
</li>
<li>Thus, 230 / (216391 * 0.138) = <strong>0.77% of websites running a CMS are vulnerable.</strong></li>
</ul>
<p>It&#8217;s shocking to think that 0.77% of websites (1 out of every 130) built with a CMS has its database password just sitting there in a public folder for all the world to see. <strong>Lots of these are popular, active websites.</strong> You would likely recognize many of them. Most of the sites were WordPress blogs, but there were a surprising number of e-commerce sites too, which is a little scary.</p>
<h2>Responsible Disclosure</h2>
<ol>
<li>
<p><strong>I contacted several of the highest profile sites</strong> to notify them of this security issue on their site. Most of them fixed the problem within a few days. All who replied to me were extremely grateful for bringing the issue to their attention. One of the companies even offered me a free license to their software.</p>
</li>
<li>
<p><strong>I submitted a vulnerability report with <a href="http://www.us-cert.gov/index.html">US-CERT</a>.</strong> Unfortunately, they replied with &#8220;This issue is not the type of vulnerability class we are inclined to coordinate or publish on.&#8221; I also plan to submit reports with Apache, PHP, WordPress, and Vim/Emacs.</p>
</li>
<li>
<p>After running the script and collecting my research statistics (published above), <strong>I securely wiped all the config files</strong> from my hard disk. <strong>I did not attempt to login with any of the database credentials I discovered.</strong> Therefore, it was not possible to determine what percentage of the database credentials were valid or what percentage of database servers were open to remote connections.</p>
</li>
</ol>
<h1>Lessons Learned</h1>
<ol>
<li>
<p>CMS users should never edit their &#8220;config.php&#8221; file (or other sensitive files) with a text editor that creates temporary backup files. The best policy is to avoid editing any sensitive files on a live website. Instead, copy the file locally, make your edits to it, and copy it back to the server.</p>
</li>
<li>
<p>It&#8217;s trivially easy to write a script to search for vulnerable sites. Bad people have probably been doing it for several years. In fact, this issue has even been discussed in <a href="http://wordpress.org/support/topic/attack-against-wp-configphp-with-a-tilde">other</a> <a href="http://blog.tigertech.net/posts/wordpress-security-thoughts/">forums</a> before. <strong>You should check your sites for &#8220;wp-config.php~&#8221; and related files.</strong> Make sure your sites are not vulnerable.</p>
</li>
<li>
<p><strong>Someone should fix this.</strong> It&#8217;s not completely clear where responsibility lies, though. Is it Apache&#8217;s fault? Or PHP? Or vim/emacs? Should WordPress and other CMSs do something about it? There are many ways to fix this problem. I don&#8217;t particularly care how it gets fixed, as long as the default configuration of Apache + PHP + vim/emacs + WordPress don&#8217;t have this problem, I&#8217;ll be satisfied. In the meantime, using this very common web stack we have a scenario where ~1% of sites expose their passwords. This is bad.</p>
</li>
<li>In the short term, <strong>you should proactively protect all your websites</strong>. If you run WordPress, you can block access to any file containing the string &#8220;wp-config.php&#8221; with a .htaccess rule like this:
<p>
<pre class="brush: plain; title: ; notranslate">&lt;Files ~ “(^#.*#|~|\.sw[op])$”&gt;
Order allow,deny
Deny from all
&lt;/Files&gt;</pre>
</p>
</li>
<li>
<p>You should configure MySQL to <strong>deny remote connections to your database</strong> and connect to <strong>localhost</strong> instead. If you absolutely need remote access, then explicitly whitelist certain IPs and deny the rest. This way, if someone gets your database credentials, they&#8217;ll be unable to actually log in.</p>
</li>
</ol>
<h1>Final Thoughts</h1>
<p>Even though the discovery that 0.77% of CMS-powered websites have public database passwords is already shocking, <strong>I&#8217;m pretty confident that you could easily double or triple the number of vulnerable sites with a better, more thorough script, and lots more time.</strong></p>
<p>The script I wrote only tests the root of each site for CMS config files. However, lots of sites run CMSs in subfolders and subdomains like <strong>/blog/</strong>, <strong>/wiki/</strong>, <strong>/forums/</strong>, <strong>blog.mydomain.com</strong>, etc. Testing these places would dramatically increase the number of vulnerable sites detected.</p>
<p><strong>I will not publish the source code of this script</strong>, because of the potential for harm. However, if you are a security researcher and are interested in reviewing the source code, send me an email.</p>
<p>This DEFCON talk is relevant: <a href="http://www.ngenuity-is.com/blog/2011/oct/26/defcon-19-pillaging-dvcs-repos-for-fun-and-profit/">Pillaging distributed version control system repos for fun and profit</a>.</p>
<p>Discussion on <a href="http://www.reddit.com/r/netsec/comments/mvh0a/feross_1_of_cmspowered_sites_expose_their/">reddit</a>.</p>
<p>Slides from a presentation I gave to the <a href="http://stanfordacm.com">Stanford ACM</a> about CMSploit:</p>
<p><script src="http://speakerdeck.com/embed/4f1c893a6e08a5001f00c19f.js"></script></p>
<p><em><strong>Thanks</strong> to John Hiesey for reading a draft of this.</em></p>
<p><h2>Related posts:</h2><ol>
<li><a href='http://www.feross.org/webcam-spy/' rel='bookmark' title='HOW TO: Spy on the Webcams of Your Website Visitors'>HOW TO: Spy on the Webcams of Your Website Visitors</a></li>
</ol></p>2]]></content:encoded>
			<wfw:commentRss>http://www.feross.org/cmsploit/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>HOW TO: Spy on the Webcams of Your Website Visitors</title>
		<link>http://www.feross.org/webcam-spy/</link>
		<comments>http://www.feross.org/webcam-spy/#comments</comments>
		<pubDate>Tue, 18 Oct 2011 09:17:06 +0000</pubDate>
		<dc:creator>Feross Aboukhadijeh</dc:creator>
				<category><![CDATA[Computer Science]]></category>
		<category><![CDATA[Hacks]]></category>
		<category><![CDATA[Security]]></category>
		<category><![CDATA[Stanford]]></category>
		<category><![CDATA[Web Dev]]></category>

		<guid isPermaLink="false">http://www.feross.org/?p=3451</guid>
		<description><![CDATA[Update 10/19/2011: CNET says that Adobe is working on a fix and it could be ready by end of week. Adobe also emailed me and said &#8220;our product team is wrapping up their investigation and is now working on a fix, which should not require a Flash Player update&#8221;. Update 10/20/2011: Whoa, this story is [...]]]></description>
			<content:encoded><![CDATA[<p><strong style="color: red;">Update 10/19/2011:</strong> <a href="http://news.cnet.com/8301-27080_3-20122887-245/adobe-to-plug-flash-related-webcam-spying-hole/">CNET says</a> that Adobe is working on a fix and it could be ready by end of week. Adobe also emailed me and said &#8220;our product team is wrapping up their investigation and is now working on a fix, which should not require a Flash Player update&#8221;.</p>
<p><strong style="color: red;">Update 10/20/2011:</strong> Whoa, this story is everywhere!</p>
<ul>
<li><a href="http://news.cnet.com/8301-27080_3-20122887-245/adobe-to-plug-flash-related-webcam-spying-hole/">CNET</a></li>
<li><a href="http://www.wired.com/threatlevel/2011/10/flash-vulnerability-webcam/">Wired.com</a></li>
<li><a href="http://www.theregister.co.uk/2011/10/20/acobe_flash_webcam_spying/">The Register</a></li>
<li><a href="http://arstechnica.com/business/news/2011/10/adobe-fixes-flash-privacy-panel-so-hackers-cant-spy-via-webcams.ars">Ars Technica</a></li>
<li><a href="http://gizmodo.com/5851851/new-adobe-flash-exploit-could-give-any-website-access-to-your-webcam">Gizmodo</a></li>
<li><a href="http://www.pcworld.com/article/242227/adobe_to_fix_flash_flaw_that_allows_webcam_spying.html">PC World</a></li>
<li><a href="http://news.yahoo.com/blogs/technology-blog/adobe-flash-exploit-allows-websites-access-webcam-without-010049284.html">Yahoo! News</a></li>
<li><a href="http://www.zdnet.co.uk/news/security-threats/2011/10/20/adobe-moves-to-fix-webcam-spying-exploit-40094230/">ZDNet</a> (and <a href="http://www.zdnet.com/blog/security/adobe-fixes-webcam-hijack-flash-flaw/9694">another</a>)</li>
<li><a href="http://www.theinquirer.net/inquirer/news/2119163/adobe-flash-exploit-websites-hijack-webcam">The Inquirer</a></li>
<li><a href="http://www.computerworld.com/s/article/9221052/Adobe_to_fix_Flash_flaw_that_allows_webcam_spying?taxonomyId=86">Computer World</a></li>
<li><a href="http://www.h-online.com/security/news/item/Adobe-remedies-webcam-spy-hole-in-Flash-1364631.html">The H Security</a></li>
<li>An interesting opinion piece: <a href="http://www.circleid.com/posts/201110221_the_sins_of_the_flash/">&#8220;The Sins of the Flash&#8221;</a></li>
</ul>
<p><strong style="color: red;">Update 10/20/2011:</strong> Adobe <a href="http://blogs.adobe.com/psirt/2011/10/clickjacking-issue-in-adobe-flash-player-settings-manager.html">says</a> they just posted a fix to the Settings Manager that should resolve the issue. I just tested it out, and indeed <strong>the issue appears to be fixed now</strong>. Congrats, Adobe, for the quick fix!</p>
<p><strong style="color: red;">Update 12/21/2011:</strong> This attack made it into Jeremiah Grossman&#8217;s list of <a href="http://jeremiahgrossman.blogspot.com/2011/02/top-ten-web-hacking-techniques-of-2011.html">top web hacking techniques of 2011</a>. It&#8217;s #26.</p>
<p><strong style="color: red;">Update 1/10/2012:</strong> Another <a href="http://blog.skepticfx.com/2012/01/adobe-flash-webcam-clickjacking.html?spref=twitter">similar clickjacking attack</a> was just discovered and fixed by Adobe.</p>
<hr />
<h1>Original post:</h1>
<p>I discovered a vulnerability in Adobe Flash that allows any website to turn on your webcam and microphone <strong>without your knowledge or consent</strong> to spy on you.</p>
<p><strong>It works in all versions of Adobe Flash that I tested.</strong> <strong>I&#8217;ve confirmed that it works in the Firefox and Safari for Mac</strong> browsers. Use one of those if you check out the <a href="http://feross.org/hacks/webcam-spy/">live demo</a>. There&#8217;s a weird CSS opacity bug in most other browsers (Chrome for Mac and most browsers on Windows/Linux).</p>
<h2><a href="http://www.youtube.com/watch?v=-LbvglVj8Ho">Video demo</a> of the attack:</h2>
<p><iframe width="600" height="370" src="http://www.youtube.com/embed/-LbvglVj8Ho?hd=1" frameborder="0" allowfullscreen></iframe></p>
<p>Source code: <a href="https://github.com/feross/webcam-spy">Github</a></p>
<h2>Clickjacking + Adobe Flash = Sad Times!</h2>
<p>This attack works by using a neat variation of the normal <a href="http://en.wikipedia.org/wiki/Clickjacking">clickjacking</a> technique that spammers and other bad people are using in the wild right now. For the uninitiated:</p>
<blockquote>
<p><em>Clickjacking</em> is a malicious technique of tricking Web users into revealing confidential information or taking control of their computer while clicking on seemingly innocuous web pages.<br />
  &#8212; Wikipedia</p>
</blockquote>
<p>Combine clickjacking with the <a href="http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager06.html">Adobe Flash Player Setting Manager page</a> and you have a recipe for some sad times.</p>
<p><span id="more-3451"></span></p>
<h2>Background</h2>
<p>I took a computer security class (Stanford&#8217;s <a href="http://cs155.stanford.edu">CS 155</a>) last quarter and really enjoyed <a href="http://seclab.stanford.edu/websec/framebusting/framebust.pdf">this research paper</a> on framebusting and clickjacking. After reading it, I checked out a few popular sites to see if it was possible to clickjack them. After a couple hours, I had no success.</p>
<p>But, then I stumbled upon <a href="http://blog.guya.net/2008/10/07/malicious-camera-spying-using-clickjacking/">this blog post</a> entitled &#8220;Malicious camera spying using ClickJacking&#8221; where the author shows how to clickjack the Adobe Flash Settings Manager page to enable users&#8217; webcams. He accomplishes this by putting the whole settings page into an iframe and making it invisible. Then, unsuspecting users play a little game and unwittingly enable their webcams. Adobe quickly added <a href="http://en.wikipedia.org/wiki/Framekiller">framebusting</a> code to the Settings Manager page (why wasn&#8217;t it there in the first place?), and the attack stopped working.</p>
<p>But alas, the same attack is actually still possible.</p>
<h2>How my attack works</h2>
<p>Instead of iframing the whole settings page (which contains the framebusting code), I just iframe the <strong>settings SWF file</strong>. This let me bypass the framebusting JavaScript code, since we don&#8217;t load the whole page &#8212; just the remote .SWF file. I was really surprised to find out that this actually works!</p>
<p>I&#8217;ve seen a bunch of clickjacking attacks in the wild, but I&#8217;ve never seen any attacks where the attacker iframes a SWF file from a remote domain to clickjack it &#8212; let alone a .SWF file as important as one that controls access to your webcam and mic!</p>
<blockquote><p>
  The problem here is the <a href="http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager06.html">Flash Player Setting Manager</a>, this inheritance from Macromedia might be the Flash Player security Achilles heel.</p>
<p>  &#8212; <a href="http://blog.guya.net/2008/10/07/malicious-camera-spying-using-clickjacking/">Guy Aharonovsky</a>
</p></blockquote>
<p>This is a screenshot of what the Settings Manager .SWF file looks like:</p>
<p><img class="aligncenter size-full wp-image-3455" title="Adobe Flash Settings Manager" src="http://www.feross.org/wp-content/uploads/2011/07/adobe-flash-settings-manager.png" alt="Adobe Flash Settings Manager" width="397" height="271" /></p>
<h2>Live Demo</h2>
<p>I built a <a href="https://www.feross.org/hacks/webcam-spy/">quick proof-of-concept demo</a> to show how it works.</p>
<p><strong style="color: red;">Important:</strong> The demo is only guaranteed to work in <strong>Firefox and Safari for Mac</strong>. Right now, it doesn&#8217;t work in most other browsers since you can&#8217;t change the opacity or the z-index of an iframed swf file. However, I discovered a workaround that involves multiple iframes, but haven&#8217;t implemented it yet since it&#8217;s a bit complicated. But, I&#8217;m pretty sure that it&#8217;s possible to make it work everywhere, given enough time.</p>
<h3><a href="https://www.feross.org/hacks/webcam-spy/">View the Demo.</a></h3>
<p>The code is also available on <a href="https://github.com/feross/webcam-spy">Github</a>.</p>
<p>I should also mention that my demo builds heavily off of the ideas and work done by the dude who runs <a href="http://blog.guya.net/2008/10/07/malicious-camera-spying-using-clickjacking/">this blog</a>, Guy Aharonovsky.</p>
<p>Also: If you&#8217;re a bit leery about running the demo&#8230; I promise I&#8217;m not saving the webcam video. I just display it back to you so you can see that it works. However, if an attacker used this technique, they would almost certainly NOT show you any sign that your cam is on. You&#8217;re only hope of finding out that something&#8217;s up is your webcam indicator light (if you have one).</p>
<p><a href="http://www.feross.org/wp-content/uploads/2011/10/webcam.jpeg"><img src="http://www.feross.org/wp-content/uploads/2011/10/webcam-600x401.jpg" alt="Webcam Light" title="Webcam Light" width="600" height="401" class="aligncenter size-large wp-image-3761" /></a></p>
<h2>Why release this?</h2>
<p>I reported this vulnerability to Adobe a few weeks ago through the <a href="http://seclab.stanford.edu/">Stanford Security Lab</a>. It&#8217;s been a few weeks and I haven&#8217;t heard anything from Adobe yet. I think it&#8217;s worth sharing it with the world now, so that Adobe pays attention and fixes it more quickly.</p>
<p>Although every browser and OS is theoretically susceptible to this attack, the process to activate the webcam requires multiple highly targeted clicks, which is difficult for an attacker to pull off. I&#8217;m not sure how useful this technique would actually be in the wild, but I hope that Adobe fixes it soon so we don&#8217;t have to find out.</p>
<h2>Further reading</h2>
<p>If you want to learn more about clickjacking and framebusting, you should read the excellent <a href="http://seclab.stanford.edu/websec/framebusting/framebust.pdf">Busting Frame Busting: a Study of Clickjacking Vulnerabilities on Popular Sites</a> (PDF) paper by Gustav Rydstedt, Elie Bursztein, Dan Boneh, and Collin Jackson.</p>
<p><h2>Related posts:</h2><ol>
<li><a href='http://www.feross.org/cmsploit/' rel='bookmark' title='1% of CMS-Powered Sites Expose Their Database Passwords'>1% of CMS-Powered Sites Expose Their Database Passwords</a></li>
</ol></p>2]]></content:encoded>
			<wfw:commentRss>http://www.feross.org/webcam-spy/feed/</wfw:commentRss>
		<slash:comments>98</slash:comments>
		</item>
		<item>
		<title>How I Learned to Program Computers</title>
		<link>http://www.feross.org/how-i-learned-to-program-computers/</link>
		<comments>http://www.feross.org/how-i-learned-to-program-computers/#comments</comments>
		<pubDate>Tue, 13 Sep 2011 18:09:21 +0000</pubDate>
		<dc:creator>Feross Aboukhadijeh</dc:creator>
				<category><![CDATA[Computer Science]]></category>
		<category><![CDATA[Essays]]></category>
		<category><![CDATA[Hacks]]></category>
		<category><![CDATA[Me]]></category>
		<category><![CDATA[Startups]]></category>
		<category><![CDATA[Web Dev]]></category>

		<guid isPermaLink="false">http://www.feross.org/?p=3579</guid>
		<description><![CDATA[I&#8217;ve been asked this question a lot lately, especially after I built YouTube Instant. So, here&#8217;s the answer, once and for all, for those who are interested. In short: I learned how to program by building lots of websites. The full story: I learned how to program by working on lots of different website projects [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve been asked this question a lot lately, especially after I built <a href="http://ytinstant.com">YouTube Instant</a>. So, here&#8217;s the answer, once and for all, for those who are interested.</p>
<h1>In short:</h1>
<p>I learned how to program by building lots of websites.</p>
<h1>The full story:</h1>
<p>I learned how to program by working on lots of different website projects starting from a pretty young age. What follows is a full account of all the major websites I&#8217;ve built, back to the very first site I made when I was 11 years old. What I hope the reader takes away from this full retelling is the importance of <strong>doing lots of side projects</strong> if you want to learn to program well.</p>
<p>The best way to learn a new skill is to <strong>practice, practice, practice</strong>. All the best programmers that I know sincerely enjoy programming &#8212; it&#8217;s something that makes them absurdly happy to do. And, so <strong>they do it a lot</strong>. Often, an unhealthy amount. Learning how to program &#8212; and how to do it <em>well</em> &#8212; doesn’t take superhuman ability. It just takes a willingness to <strong>get your hands dirty</strong> and build stuff.</p>
<p><span id="more-3579"></span></p>
<p>It doesn&#8217;t matter what you build, as long as you pick something and <em>start</em>. The good programmers who I know each had a different reason for initially learning how to program. Some learned so they could <strong>make video games</strong>. Some learned so they could solve their own computer problems, or <strong>work more productively</strong>. Some learned so they could <strong>build products</strong> that make people happy. Some (the true hackers) learned programming as part of a larger goal of learning how computers work at a really deep level; they want to <strong>understand the machine</strong>. Some programmers just do it because they enjoy <strong>solving difficult problems</strong>.</p>
<p>The single factor that unifies all these types of &#8220;good programmers&#8221; is that they all <strong>got obsessed</strong> with programming at some point in their lives, and subsequently <strong>spent a long time programming</strong>. Lots and lots of <strong>side projects</strong>.</p>
<p>So, without further ado, here is the story of how I learned to program:</p>
<h1>My first website</h1>
<p><img src="http://www.feross.org/wp-content/uploads/2011/09/Feross-little-smile-250x185.jpg" alt="" width="250" height="185" class="alignright size-medium wp-image-3588" /></p>
<p>When I was like 11 or 12 years old, I decided I wanted to make a website for myself. I can&#8217;t remember exactly <em>why</em> I wanted a website, I just remember that I did. So, I searched the Internet for free information about how web pages, web browsers, and HTML worked. A lot of the information I found was out-of-date, plain wrong, or advocated bad practices (like making separate websites for Internet Explorer and Netscape), but it was really interesting and I learned a lot of neat stuff.</p>
<p>Despite the shoddy information I found online, I was able to make a simple website, which I called &#8220;Feross&#8217;s Website&#8221;. I built it with Microsoft Frontpage, which had really cool side-by-side <a href="http://en.wikipedia.org/wiki/WYSIWYG">WYSIWYG</a> and HTML editors. I could make changes using familiar commands like Bold, Italics, etc. and see how that affected the HTML code in realtime. A great way to learn.</p>
<p>Here are some screenshots of my first site. It&#8217;s no longer online.</p>
<p><a href="http://www.feross.org/wp-content/uploads/2011/09/feross-website-1.png"><img src="http://www.feross.org/wp-content/uploads/2011/09/feross-website-1-600x527.png" alt="" title="feross-website-1" width="600" height="527" class="aligncenter size-large wp-image-3598" /></a></p>
<p>You can&#8217;t see it in the above screenshot, but almost every element on the site blinked, flashed, moved, or made sound. I put a different MIDI song on every page of the site. They all played automatically and there was no way to stop the music, unless you muted your speakers. Ah, good old web design from the early 00&#8242;s <img src='http://www.feross.org/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> </p>
<p>As I got older, I tried to make my site better by redesigning it. I used free website templates that I found online and modified their images in Microsoft Paint.</p>
<p><a href="http://www.feross.org/wp-content/uploads/2011/09/feross-website-2.png"><img src="http://www.feross.org/wp-content/uploads/2011/09/feross-website-2-600x409.png" alt="" title="feross-website-2" width="600" height="409" class="aligncenter size-large wp-image-3599" /></a></p>
<p>Even though I built heavily on existing templates, I think this was a pretty good way to learn how HTML and web browsers worked. &#8220;Feross&#8217;s Website&#8221; didn&#8217;t have a purpose other than to collect a few movies I made as a kid, so it got boring after a while.</p>
<h1>My first real project</h1>
<p>In 9th grade (14 years old), my friends and I were pretty obsessed with watching flash movies and videos on websites like <a href="http://www.newgrounds.com/">Newgrounds</a> and <a href="http://www.ebaumsworld.com/">eBaumsWorld</a> (this was before 2005, so YouTube didn&#8217;t exist yet). I spent lots of time on these sites so I knew about all the best videos and games. I thought it would be really cool to make a website that collected all my favorite flash animations, videos, and games from around the Web in one place. That&#8217;s where I got the idea for <a href="http://www.freetheflash.com">FreeTheFlash.com</a>. Here is what it looked like:</p>
<p><a href="http://www.feross.org/wp-content/uploads/2011/09/freetheflash-1.png"><img src="http://www.feross.org/wp-content/uploads/2011/09/freetheflash-1-600x642.png" alt="" title="freetheflash-1" width="600" height="642" class="aligncenter size-large wp-image-3600" /></a></p>
<p>I used all the HTML I learned from working on &#8220;Feross&#8217;s Website&#8221; and also got my hands on a copy of Macromedia (now Adobe) <a href="http://www.adobe.com/products/dreamweaver.html">Dreamweaver</a>, which allowed me to use templates for the repetitive parts of the site.</p>
<p><a href="http://www.amazon.com/gp/product/0321784073?ie=UTF8&#038;tag=eldoradohills-20&#038;linkCode=shr&#038;camp=213733&#038;creative=393185&#038;creativeASIN=0321784073&#038;ref_=dp_ob_title_bk"><img src="http://www.feross.org/wp-content/uploads/2011/09/php-mysql-for-dynamic-web-sites-visual-quickpro-larry-ullman-paperback-cover-art.jpg" alt="" title="php-mysql-for-dynamic-web-sites-visual-quickpro-larry-ullman-paperback-cover-art" width="117" height="150" class="alignright size-full wp-image-3630" /></a></p>
<p>After a while, I realized that I should make the site <em>dynamic</em> (I remember hearing that buzzword a lot), which basically meant that the site would be powered by a programming language like PHP, instead of just static HTML. So, I bought a book called <a href="http://www.amazon.com/gp/product/0321784073?ie=UTF8&amp;tag=eldoradohills-20&amp;linkCode=shr&amp;camp=213733&amp;creative=393185&amp;creativeASIN=0321784073&amp;ref_=dp_ob_title_bk">PHP and MySQL for Dynamic Websites</a> for $20 from Amazon and redesigned the site to use PHP and MySQL. I also gave it a fresh coat of paint:</p>
<p><a href="http://www.feross.org/wp-content/uploads/2011/09/freetheflash-2.png"><img src="http://www.feross.org/wp-content/uploads/2011/09/freetheflash-2-600x612.png" alt="" title="freetheflash-2" width="600" height="612" class="aligncenter size-large wp-image-3601" /></a></p>
<p>I continued to work on FreeTheFlash for 2 years in high school. It was pretty successful for my first attempt at a &#8220;real&#8221; website &#8212; it had 600,000 visitors and 3 million page views in 2006. FreeTheFlash taught me how awesome it feels to make a product, stick it out there, and watch lots of people using it. It made me want to build a lot more websites.</p>
<h1>My second website</h1>
<p>In high school, I took pretty good notes for a few of my AP classes. So, in 11th grade, I decided to put my notes online for other students to use, if they didn&#8217;t feel like reading the textbook. I made a site called <a href="http://apstudynotes.org">StudyNotes</a> which I built with PHP and a content management system called Joomla. I also experimented around with Drupal, but found it to be too complicated.</p>
<p><a href="http://www.feross.org/wp-content/uploads/2011/09/ap-study-notes.png"><img src="http://www.feross.org/wp-content/uploads/2011/09/ap-study-notes-600x352.png" alt="" title="ap-study-notes" width="600" height="352" class="aligncenter size-large wp-image-3597" /></a></p>
<p>That same year, I also made a website for my school&#8217;s Key Club chapter. It&#8217;s archived <a href="http://feross.org/orhskeyclub.com/">here</a>.</p>
<p>During this period, I spent a large amount of my free time reading <a href="http://www.webmasterworld.com/">WebmasterWorld</a>, a forum for website publishers and SEO experts to speculate about the Google algorithm, discuss AdSense tricks, and debug website design issues.</p>
<h1>Lots of studying and reading</h1>
<p>After I got to Stanford, I took lots of great computer science classes like <a href="http://www.stanford.edu/class/cs106x/">CS106X</a> and <a href="http://www.stanford.edu/class/cs107/">CS107</a>, and I also started <a href="https://cs198.stanford.edu/cs106/">section leading</a> the CS106 classes.</p>
<p>I spent almost all my time outside of class reading about design, programming, browsers, and JavaScript. Like 4-5 hours a day.</p>
<p>What did I read? Lots of different stuff. But, mostly blogs by first-class designers and programmers who I admire a lot. Real badasses. For a sampling of some of these blogs, take a look at the &#8220;Respect Rollcall&#8221; in the sidebar of this blog.</p>
<h1>A viral hit</h1>
<p>Then, in the summer of 2010, while interning at Facebook, I built <a href="http://ytinstant.com/">YouTube Instant</a> to settle a bet with a friend. It&#8217;s a video site that lets you search YouTube in real-time. The site went on to get 1 million visitors within 10 days of launch, and the YouTube CEO also tweeted me a job offer. Read about the media frenzy <a href="http://www.feross.org/youtube-instant-media-frenzy/">here</a>.</p>
<p>I know that YouTube Instant&#8217;s success was mostly due to chance good timing and a little luck. Read <a href="http://www.feross.org/none-of-us-knows-what-were-doing/">None of Us Knows What We&#8217;re Doing</a> for some more of my thoughts about that.</p>
<p><a href="http://www.feross.org/wp-content/uploads/2011/09/youtube-instant-job.png"><img src="http://www.feross.org/wp-content/uploads/2011/09/youtube-instant-job.png" alt="" title="youtube-instant-job" width="540" height="517" class="aligncenter size-full wp-image-3603" /></a></p>
<h1>The beat goes on</h1>
<p>I noticed that lots of people were using YouTube Instant to listen to music videos, and that got me thinking about other cool ways to use the YouTube API. So, my friend <a href="http://www.quora.com/Jake-Becker">Jake Becker</a> and I decided to spend the first 3 months of 2011 building <a href="http://instant.fm">Instant.fm</a>, a really easy way to share music playlists with your friends. We both learned a ton of new stuff during this project.</p>
<p><a href="http://www.feross.org/wp-content/uploads/2011/09/InstantFM.jpg"><img src="http://www.feross.org/wp-content/uploads/2011/09/InstantFM-600x676.jpg" alt="" title="Instant FM" width="600" height="676" class="aligncenter size-large wp-image-3605" /></a></p>
<p>Some things we mastered during this project:</p>
<ul>
<li><a href="http://jquery.com/">jQuery</a></li>
<li>CSS (and <a href="http://www.modernizr.com/">Modernizr</a> and <a href="http://yepnopejs.com/">YepNope</a> for cross-browser issues)</li>
<li><a href="http://www.python.org/">Python</a></li>
<li><a href="http://www.tornadoweb.org/">Tornado</a> (web framework/server)</li>
<li><a href="http://git-scm.com/">Git</a> (version control) &amp; <a href="http://github.com/">GitHub</a></li>
<li><a href="http://www.last.fm/api">Last.fm API</a></li>
<li><a href="http://code.google.com/apis/youtube/overview.html">YouTube API</a></li>
<li>Working on a team</li>
</ul>
<p>And some other things we learned how to use, too:</p>
<ul>
<li><a href="http://nginx.org/">Nginx</a> (web server)</li>
<li><a href="http://supervisord.org/">Supervisor</a> (to daemonize Tornado)</li>
<li><a href="http://www.sqlalchemy.org/">SQLAlchemy</a> (ORM)</li>
<li><a href="http://ant.apache.org/">Apache Ant</a> (to build and deploy the site after a push)</li>
</ul>
<p>Read more about all the tech we learned in <a href="http://www.feross.org/instant-fm-tech-stack/">Instant.fm Tech Stack</a>.</p>
<h1>TL;DR &#8211; Just start building stuff!</h1>
<p>The point of this long expose on everything I&#8217;ve built since age 11 is that if you want to learn programming, then you need to <strong>start building stuff</strong>! Right now. No more excuses.</p>
<p>Doing something is the fastest way to learn it.</p>
<p>Reading a programming language book from front to back is boring and you&#8217;ll quit before you finish it. But, if you <strong>have a project in mind</strong>, you can learn what you need to know as you go along, which is more effective both in terms of <strong>speed</strong> and <strong>mastery of the content</strong>.</p>
<h1>Computer science classes</h1>
<p>Taking CS courses at a university is another great way to learn programming. Most good CS curriculums emphasize learning the important concepts and paradigms in the field of CS, as opposed to teaching a specific programming language. This can be an eye-opening experience for self-taught programmers who&#8217;ve never had any formal education.</p>
<p>I remember sitting in my first-ever CS class at Stanford (a class taught in C++) thinking &#8220;How on <em>EARTH</em> can they have variables that don&#8217;t start with dollar signs?&#8221; Up until that point, I&#8217;d only ever programmed in PHP! <img src='http://www.feross.org/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  It took a while for me to drop the habit of $putting $dollar $signs before every variable name!</p>
<h1>Work at a software company</h1>
<p>Another way to get much better at programming is to work at a software company like Facebook or Quora, which I did over the last two summers. You&#8217;ll learn how to program from people <em>way better than you</em>, how to read and understand other people&#8217;s code, and how to work on large projects with a team.</p>
<p>Still &#8212; more than anything else &#8212; the very best way to learn programming is to <strong>do side projects</strong>. Have I repeated this enough times, yet? <img src='http://www.feross.org/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<h2>How to learn programming:</h2>
<ul>
<li>Do side projects.</li>
<li>Buy and read programming books.</li>
<li>Do side projects.</li>
<li>Take computer science classes.</li>
<li>Do side projects.</li>
<li>Read programming blogs.</li>
<li>Do side projects.</li>
</ul>
<p>That&#8217;s the best advice I got.</p>
<p>Happy hacking!</p>
<p><em>This was originally posted as an answer to &#8220;How did Feross Aboukhadijeh learn to program?&#8221; on Quora.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://www.feross.org/how-i-learned-to-program-computers/feed/</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>Announcing SpoofMAC &#8211; Spoof your MAC address in Mac OS X</title>
		<link>http://www.feross.org/spoofmac/</link>
		<comments>http://www.feross.org/spoofmac/#comments</comments>
		<pubDate>Thu, 01 Sep 2011 08:14:42 +0000</pubDate>
		<dc:creator>Feross Aboukhadijeh</dc:creator>
				<category><![CDATA[Computer Science]]></category>
		<category><![CDATA[Hacks]]></category>
		<category><![CDATA[Security]]></category>

		<guid isPermaLink="false">http://www.feross.org/?p=3484</guid>
		<description><![CDATA[Download SpoofMAC from GitHub. Something I&#8217;ve needed to do from time to time is spoof my computer&#8217;s MAC address. This is useful for debugging network issues or temporarily getting onto the Stanford Wi-Fi network when my physical MAC address changes, such as when Apple replaced my logic board (motherboard). For the uninitiated, a Media Access [...]]]></description>
			<content:encoded><![CDATA[<h1><strong><a href="https://github.com/feross/SpoofMAC">Download SpoofMAC</a> from GitHub.</strong></h1>
<p>Something I&#8217;ve needed to do from time to time is <strong>spoof my computer&#8217;s MAC address</strong>. This is useful for debugging network issues or temporarily getting onto the Stanford Wi-Fi network when my physical MAC address changes, such as when <a href="http://www.quora.com/Is-AppleCare-worth-the-$350/answer/Feross-Aboukhadijeh">Apple replaced my logic board</a> (motherboard).</p>
<p><span id="more-3484"></span>For the uninitiated, a <strong>Media Access Control address</strong> (MAC address) is &#8220;a unique identifier assigned to network interfaces for communications on the physical network segment&#8221;. You can <a href="http://en.wikipedia.org/wiki/MAC_address">read more on Wikipedia</a>.</p>
<p>Despite the fact that all network devices (laptops, iPhones, routers, etc.) have physical MAC addresses burned into the hardware, you can actually change (or spoof) your MAC address <strong>completely in software</strong>, and other network devices will only see your spoofed address.</p>
<h1>Other Solutions Sucked</h1>
<p>I was disappointed with the Mac OS X offering in this area. None of the existing stuff worked well. The biggest annoyance with most of the solutions I found was that the Wi-Fi card (Airport) needs to be <em>manually</em> disassociated from any connected networks, in order for the change to be applied correctly. Doing this manually every time is annoying.</p>
<h1>My Solution</h1>
<p>So, I made a Python script that lets you change your MAC address in one command. <strong><a href="https://github.com/feross/SpoofMAC">Check it out and download it from Github.</a></strong> Improvements welcome!</p>
<p>I tested it on Lion 10.7, but should work on 10.6 and 10.5 with slight modifications.</p>
<h2>Usage</h2>
<p><strong>Note:</strong> Use <code>en0</code> for wired ethernet and <code>en1</code> for wireless. <strong>From the terminal, run:</strong></p>
<pre class="brush: plain; title: ; notranslate">sudo python SpoofMAC.py INTERFACE MAC_ADDRESS</pre>
<p><strong>Example:</strong>
<pre class="brush: plain; title: ; notranslate">sudo python SpoofMAC.py en1 12:12:12:12:12:12</pre>
<p><strong>That&#8217;s it!</strong> Let me know in the comments if you find this useful.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.feross.org/spoofmac/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Stanford Open Source Workshop</title>
		<link>http://www.feross.org/stanford-open-source-workshop/</link>
		<comments>http://www.feross.org/stanford-open-source-workshop/#comments</comments>
		<pubDate>Mon, 23 May 2011 23:00:20 +0000</pubDate>
		<dc:creator>Feross Aboukhadijeh</dc:creator>
				<category><![CDATA[Computer Science]]></category>
		<category><![CDATA[Free Software]]></category>
		<category><![CDATA[Stanford]]></category>

		<guid isPermaLink="false">http://www.feross.org/?p=3420</guid>
		<description><![CDATA[Here&#8217;s an awesome video from the open source hacking event that Stanford ACM organized this quarter. I love Mozilla. We&#8217;re definitely doing this again. Related posts: Stanford iPhone App Final Project &#8211; iBoard Is Google an Open Redirector? 2]]></description>
			<content:encoded><![CDATA[<p>Here&#8217;s an awesome video from the open source hacking event that <a href="http://www.stanfordacm.com">Stanford ACM</a> organized this quarter.</p>
<p><object width="600" height="363"><param name="movie" value="http://www.youtube.com/v/Ed3S2tK9HPE?version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Ed3S2tK9HPE?version=3" type="application/x-shockwave-flash" width="600" height="363" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<p>I love Mozilla. We&#8217;re definitely doing this again.</p>
<p><h2>Related posts:</h2><ol>
<li><a href='http://www.feross.org/stanford-iphone-app-final-project-iboard/' rel='bookmark' title='Stanford iPhone App Final Project &#8211; iBoard'>Stanford iPhone App Final Project &#8211; iBoard</a></li>
<li><a href='http://www.feross.org/is-google-an-open-redirector/' rel='bookmark' title='Is Google an Open Redirector?'>Is Google an Open Redirector?</a></li>
</ol></p>2]]></content:encoded>
			<wfw:commentRss>http://www.feross.org/stanford-open-source-workshop/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Instant.fm Tech Stack</title>
		<link>http://www.feross.org/instant-fm-tech-stack/</link>
		<comments>http://www.feross.org/instant-fm-tech-stack/#comments</comments>
		<pubDate>Thu, 19 May 2011 18:52:52 +0000</pubDate>
		<dc:creator>Feross Aboukhadijeh</dc:creator>
				<category><![CDATA[Computer Science]]></category>
		<category><![CDATA[Hacks]]></category>
		<category><![CDATA[Music]]></category>
		<category><![CDATA[Startups]]></category>

		<guid isPermaLink="false">http://www.feross.org/?p=3321</guid>
		<description><![CDATA[I&#8217;ve received a lot of emails asking about the technology stack of Instant.fm, so I thought I&#8217;d share this publicly. First, what features did we want to build? Playlist Creation No login required. Build your playlist on site, or upload a .m3u, .txt, or .pls file from iTunes, Windows Media Player, or WinAmp. Each playlist gets [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve received a lot of emails asking about the technology stack of <a href="http://instant.fm">Instant.fm</a>, so I thought I&#8217;d share this publicly.</p>
<p><span id="more-3321"></span></p>
<h1>First, what features did we want to build?</h1>
<h3>Playlist Creation</h3>
<ul>
<li>No login required.</li>
<li>Build your playlist <strong>on site</strong>, or upload a .m3u, .txt, or .pls file from iTunes, Windows Media Player, or WinAmp.</li>
<li>Each playlist gets a unique, shareable, short URL.</li>
<li>Allow background image uploading. (TODO)</li>
</ul>
<h3>Playlist Editing</h3>
<ul>
<li>Drag and drop to re-order songs.</li>
<li>Buttons to Move To Top, and Kill Song.</li>
<li>Change playlist name/title with an inline edit (no refresh).</li>
</ul>
<h3>Playlist Viewing</h3>
<ul>
<li>Use YouTube as audio source.</li>
<li>Shuffle, repeat, show/hide video.</li>
<li>Suggest songs to be added to playlist. (TODO)</li>
<li>Keyboard shortcuts for power users.</li>
</ul>
<h3>Social Features</h3>
<ul>
<li>Share playlist on Facebook, Twitter.</li>
<li>See what your friends are listening to. (TODO)</li>
</ul>
<h3>Mini-browser</h3>
<ul>
<li>Pane which behaves like an iOS navigation view, with a stack of &#8216;views&#8217;.</li>
<li>Allows searching and browsing artist/album information without stopping the music.</li>
<li>Clicking links doesn&#8217;t cause user&#8217;s browser to leave the page.</li>
<li>Uses fancy animations, which look great.</li>
</ul>
<h3>Non-stop Music</h3>
<ul>
<li>On most music sites, clicking something stops the music (very jarring).</li>
<li>On Instant.fm, everything is AJAX, so nothing stops the music.</li>
<li>Even logging in/out works without a page refresh (the correct playlist edit tools are shown/hidden).</li>
</ul>
<h3>Browser Support</h3>
<ul>
<li>All modern browsers.</li>
<li>Internet Explorer 8. (TODO)</li>
</ul>
<h1>How We Built It</h1>
<h3><a href="http://html5boilerplate.com/">HTML5 Boilerplate</a></h3>
<ul>
<li>Rock-solid default for HTML5 websites.</li>
<li>Build script for minifying and hyper-optimizing JS, CSS, and HTML.</li>
<li>CSS reset, base styles, cross-browser normalization, non-semantic helper classes.</li>
<li>Server side optimization to reduce total page weight.</li>
</ul>
<h3>CSS3</h3>
<ul>
<li>1430 lines of hand-written CSS.</li>
<li>CSS3 <em>hotness</em> (transitions, box-shadow, border-radius, gradient, box-reflect, text-shadow).</li>
<li>Degrades gracefully in older browsers (&#8230;most of the time).</li>
</ul>
<h2>JavaScript Libraries</h2>
<h3><a href="http://jquery.com/">jQuery 1.6</a></h3>
<ul>
<li>The best.</li>
</ul>
<h3><a href="http://jqueryui.com/">jQuery UI 1.8</a></h3>
<ul>
<li>The only feature we used was the excellent &#8220;sortable&#8221; module.</li>
</ul>
<h3><a href="http://www.modernizr.com/">Modernizr</a></h3>
<ul>
<li>HTML5 feature detection in JS and CSS.</li>
<li>HTML5 shiv so semantic elements like &lt;header&gt; and &lt;footer&gt; work in IE.</li>
</ul>
<h3><a href="http://yepnopejs.com/">YepNope</a></h3>
<ul>
<li>Conditional JS resource loader for polyfills.</li>
<li>Asynchronous script loading.</li>
</ul>
<h2>Backend Stuff</h2>
<h3><a href="http://www.tornadoweb.org/">Tornado Web Server</a></h3>
<ul>
<li>Asynchronous non-blocking Python web server.</li>
<li>Modules (tornado.database, tornado.httpserver, tornado.web, tornado.auth, tornado.ioloop).</li>
</ul>
<h3><a href="http://nginx.org/">Nginx web server</a></h3>
<ul>
<li>We run 4 Tornado processes, and use nginx to load balance between them.</li>
</ul>
<h3><a href="http://supervisord.org/">Supervisor</a></h3>
<ul>
<li>Process control system used to daemonize the Tornado server instances.</li>
</ul>
<h3><a href="http://www.sqlalchemy.org/">SQL Alchemy</a></h3>
<ul>
<li>We were doing raw SQL for a while, then we got tired of that and decided to go with an ORM.</li>
</ul>
<h3><a href="http://www.python.org/">Python</a></h3>
<ul>
<li>Server-side image resizing.</li>
<li>Playlist file (.m3u, .txt., .pls) parsing after upload.</li>
</ul>
<h3><a href="http://ant.apache.org/">Apache Ant</a></h3>
<ul>
<li>Custom build script to deploy new code.</li>
<li>Currently, the site goes offline for about 30 seconds whenever we deploy (we think this is acceptable).</li>
</ul>
<h2>Web APIs</h2>
<h3><a href="http://www.last.fm/api">Last.fm API</a></h3>
<ul>
<li>Artist, song, album information (summaries + pictures).</li>
<li>Powers our search results.</li>
<li>Uses <strong>HTML5 Local Storage</strong> to cache search results.</li>
</ul>
<h3><a href="http://developers.facebook.com/docs/reference/api/">Facebook API</a></h3>
<ul>
<li>Facebook Connect.</li>
<li>Social plugins (Like button, Comments widget).</li>
</ul>
<h3><a href="http://code.google.com/apis/youtube/overview.html">YouTube API</a></h3>
<ul>
<li>Search API.</li>
<li>Embedded player JavaScript API.</li>
</ul>
<h2>jQuery Plugins</h2>
<h3><a href="http://api.jquery.com/category/plugins/templates/">jQuery Templates</a></h3>
<ul>
<li>Render data into a template and insert into DOM.</li>
<li>Officially supported plugin.</li>
</ul>
<h3><a href="http://www.bramstein.com/projects/jsizes/">JSizes</a></h3>
<ul>
<li>Adds support for querying and setting additional CSS properties.</li>
<li>Min-width, min-height, max-width, max-height, border-*-width, margin, padding.</li>
</ul>
<h3><a href="http://www.appelsiini.net/projects/jeditable">Jeditable</a></h3>
<ul>
<li>Adds Edit-in-place functionality to forms (no page refresh).</li>
</ul>
<h3>Auto Expanding Text Area</h3>
<ul>
<li>A la Facebook and Quora.</li>
</ul>
<h3><a href="http://colorpowered.com/colorbox/">ColorBox</a></h3>
<ul>
<li>Light-weight, customizable lightbox.</li>
</ul>
<h2>Graphics</h2>
<h3>Helveticons</h3>
<ul>
<li>High quality commercial icon package.</li>
</ul>
<h3>Photoshop</h3>
<ul>
<li>All other images, icons, logo, custom missing album/artist images are ours.</li>
</ul>
<h2>Misc Notes</h2>
<h3>InstantFM.com</h3>
<ul>
<li><strong>.com</strong> TLD redirects to our main <strong>.fm</strong> site, in case users get confused with the .fm extension.</li>
<li>Purchased from a domain squatting company (BuyDomains).</li>
</ul>
<h3><a href="http://git-scm.com/">Git</a></h3>
<ul>
<li>Commit early, commit often.</li>
<li>686 commits so far.</li>
<li>We used <a href="https://github.com/">GitHub</a>.</li>
</ul>
<h1>Conclusion</h1>
<p>As you can see, we built Instant.fm upon a solid foundation of <strong>awesome</strong>. Most of our tools are <a href="http://en.wikipedia.org/wiki/Free_software">free software</a> with great documentation and easily hackable code. <a href="http://www.quora.com/Jake-Becker">Jake</a> and I used a bunch of different tech on this project, since we wanted to try out some new things. Plus, playing with new frameworks and libraries is always fun.</p>
<p>We learned <em><strong>a ton</strong></em> during this project. I hope that this information has helped you. If you found this useful, leave a note in the comments.</p>
<p><h2>Related posts:</h2><ol>
<li><a href='http://www.feross.org/eric-riess-lean-startup-tech-talk/' rel='bookmark' title='Eric Ries&#8217;s Lean Startup &#8211; Tech Talk'>Eric Ries&#8217;s Lean Startup &#8211; Tech Talk</a></li>
</ol></p>2]]></content:encoded>
			<wfw:commentRss>http://www.feross.org/instant-fm-tech-stack/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>Web Security and Privacy</title>
		<link>http://www.feross.org/web-security-and-privacy/</link>
		<comments>http://www.feross.org/web-security-and-privacy/#comments</comments>
		<pubDate>Wed, 07 Jul 2010 08:03:19 +0000</pubDate>
		<dc:creator>Feross Aboukhadijeh</dc:creator>
				<category><![CDATA[Computer Science]]></category>
		<category><![CDATA[Essays]]></category>
		<category><![CDATA[Stanford]]></category>
		<category><![CDATA[Web Dev]]></category>

		<guid isPermaLink="false">http://www.feross.org/?p=1976</guid>
		<description><![CDATA[This is a research paper I wrote about Web Security and Privacy. It&#8217;s quite an interesting read, if you&#8217;ve got 20 minutes to spare. (Interesting fact: I wrote the entire final draft of this 25-page paper in less than 24 hours. Coding up the proof-of-concept attack page demo took two days, and gathering information took [...]]]></description>
			<content:encoded><![CDATA[<p>This is a research paper I wrote about <a href="http://www.feross.org/wp-content/uploads/2010/07/Web-Security-and-Privacy.pdf">Web Security and Privacy</a>. It&#8217;s quite an interesting read, if you&#8217;ve got 20 minutes to spare.</p>
<p style="text-align: left;"><a href="http://www.feross.org/wp-content/uploads/2010/07/Web-Security-and-Privacy.pdf"><img class="size-full wp-image-2037 aligncenter" title="Web Security and Privacy by Feross Aboukhadijeh" src="http://www.feross.org/wp-content/uploads/2010/07/web-security.png" alt="Web Security and Privacy by Feross Aboukhadijeh" width="526" height="567" /></a>(Interesting fact: I wrote the entire final draft of this 25-page paper in less than 24 hours. Coding up the proof-of-concept attack page demo took two days, and gathering information took several weeks, but I finished the actual writing in less than one full day.)</p>
<p><h2>Related posts:</h2><ol>
<li><a href='http://www.feross.org/webcam-spy/' rel='bookmark' title='HOW TO: Spy on the Webcams of Your Website Visitors'>HOW TO: Spy on the Webcams of Your Website Visitors</a></li>
</ol></p>2]]></content:encoded>
			<wfw:commentRss>http://www.feross.org/web-security-and-privacy/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Richard Stallman Comes to Stanford</title>
		<link>http://www.feross.org/stallman-stanford/</link>
		<comments>http://www.feross.org/stallman-stanford/#comments</comments>
		<pubDate>Sat, 22 May 2010 05:10:18 +0000</pubDate>
		<dc:creator>Feross Aboukhadijeh</dc:creator>
				<category><![CDATA[Computer Science]]></category>
		<category><![CDATA[Copyright]]></category>
		<category><![CDATA[Famous People]]></category>
		<category><![CDATA[Free Software]]></category>
		<category><![CDATA[Politics]]></category>

		<guid isPermaLink="false">http://www.feross.org/?p=1876</guid>
		<description><![CDATA[A few weeks ago, I had the amazing opportunity to meet Richard Stallman &#8212; founder of the GNU Project and Free Software Foundation, and developer of the amazingly popular GNU Emacs, GNU compiler (gcc), and GNU debugger (gdb). RMS, as he likes to be called, is a living legend in the computing field. He&#8217;s widely [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_1875" class="wp-caption aligncenter" style="width: 550px"><a href="http://www.feross.org/wp-content/uploads/2010/04/1.jpg"><img class="size-large wp-image-1875 " title="Richard Stallman at Stanford University" src="http://www.feross.org/wp-content/uploads/2010/04/1-540x405.jpg" alt="Richard Stallman at Stanford University" width="540" height="405" /></a><p class="wp-caption-text">Richard Stallman at Stanford University</p></div>
<p>A few weeks ago, I had the amazing opportunity to meet <a href="http://stallman.org"><strong>Richard Stallman</strong></a> &#8212; founder of the <a href="http://www.gnu.org/">GNU Project</a> and <a href="http://www.fsf.org">Free Software Foundation</a>, and developer of the amazingly popular <a href="http://www.gnu.org/software/emacs/emacs.html">GNU Emacs</a>, GNU compiler (<a href="http://gcc.gnu.org/">gcc</a>), and GNU debugger (<a href="http://www.gnu.org/software/gdb/">gdb</a>).</p>
<p>RMS, as he likes to be called, is a living legend in the computing field. He&#8217;s widely considered to be the father of the <a href="http://en.wikipedia.org/wiki/Free_software_movement">free software movement</a>. There is no question that the <em>free software philosophy</em> has brought enormous amounts of good to the world. I firmly believe this. I think most programmers and computer scientists would agree, too.</p>
<div id="attachment_1880" class="wp-caption alignright" style="width: 210px"><img class="size-full wp-image-1880" title="Hollywood Loves Linux" src="http://www.feross.org/wp-content/uploads/2010/04/Hollywood-Loves-Linux-3.png" alt="Hollywood Loves Linux" width="200" height="261" /><p class="wp-caption-text">GNU/Linux render farm at Dreamworks</p></div>
<p>Free software is everywhere today. The popular operating system <em>GNU/Linux</em> (which Stallman wrote large parts of) powers so much of our computing today, nearly everyone has used it, whether they&#8217;ve heard of it or not.</p>
<p>The majority  of servers on the Internet are powered by Apache and GNU/Linux, major parts of the Internet and most networks in large corporations are powered by GNU/Linux, and even <a href="http://news.softpedia.com/news/Hollywood-Loves-Linux-45571.shtml">95%</a> of the desktops and servers at major Hollywood movie studios like Disney, Pixar, DreamWorks, and Sony run GNU/Linux.</p>
<p>Many people are confused about what the phrase &#8220;free software&#8221; means. Before I continue, let&#8217;s be clear about the definition of free software.<span id="more-1876"></span></p>
<p>From Richard Stallman himself:</p>
<blockquote><p>“Free software” is a matter of liberty, not price.  To understand the concept, you should think of “free” as in “free speech,” not as in “free beer.”</p>
<p>Free software is a matter of the users&#8217; freedom to run, copy,  distribute, study, change and improve the software.  More precisely, it means that  the program&#8217;s users have the four essential freedoms:</p>
<ul>
<li>The freedom to run the program, for any purpose.</li>
<li>The freedom to study how the program works, and change it to make       it do what you wish. Access to the source code is a       precondition for this.</li>
<li>The freedom to redistribute copies so you can help your neighbor.</li>
<li>The freedom to distribute copies of your modified versions       to others.  By doing this you can give the whole       community a chance to benefit from your changes.       Access to the source code is a precondition for this.</li>
</ul>
<p>(from <a href="http://www.gnu.org/philosophy/free-sw.html">The Free Software Definition</a>)</p></blockquote>
<p>I recently watched an excellent documentary about early hacker culture called <a href="http://www.amazon.com/gp/product/B0009RS0EM?ie=UTF8&amp;tag=eldoradohills-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=B0009RS0EM"><em>Hackers: Wizards of the Electronic Age</em></a> which had several wonderful clips of RMS in his early years. I clipped the relevant clips out of the documentary and uploaded them to YouTube:</p>
<p><object width="600" height="475"><param name="movie" value="http://www.youtube.com/e/oIrXuv-JjeE"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/e/oIrXuv-JjeE" type="application/x-shockwave-flash" width="600" height="475" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<p>So, free software sounds pretty good, right? I wish all software was free software.  Nearly all computer users, however, use the opposite of free software, called <em>proprietary software</em>, all the time in their daily lives. Mac OS X, Microsoft Windows, Microsoft Office, and many, many other programs are all proprietary software.</p>
<p>With proprietary software, we users have no way to determine what our software is doing on our computers because <em>we can&#8217;t examine the source code</em>. The software might be extremely insecure and exposing us to all sorts of security risks and we&#8217;d never know about it. Proprietary software may also send data about us back to the software company, or contain malware that allows the software company or even the government to gain remote access to our computers. Think these suggestions are far-fetched? <em>Think again.</em> This stuff has happened and continues to happen &#8212; just take a look at some of the links I&#8217;ve posted in my <a href="http://www.feross.org/lifestream">lifestream</a> recently or do some research.</p>
<p>Another downside of non-free software is that if there&#8217;s a problem with it, a feature that&#8217;s missing, or something that we&#8217;d like to change, we&#8217;re <em>at the mercy of the software company</em> to implement these changes. When you take the shrink-wrap off that box of proprietary software, you&#8217;re agreeing that you will use the program as-is and won&#8217;t try to modify how the program behaves or reverse-engineer it to extract the source code. No software company that respects its users&#8217; freedom would force such a scheme upon them.</p>
<p>Proprietary software also restricts sharing and copying. Users of proprietary software are legally forbidden from sharing their software with their neighbors. Users who share their proprietary software with their neighbors and friends are called &#8220;pirates,&#8221; &#8220;counterfeiters,&#8221; and &#8220;thieves&#8221; &#8212; propaganda terms used by the RIAA, MPAA, and other media conglomerates to demonize the simple act of sharing knowledge. Sharing a software program with your friend is not  &#8220;piracy&#8221; &#8212; it is simply <strong>not the same</strong> as robbery and criminal violence on the sea. Not even close.</p>
<p>Why are these media and software companies trying to make <em>sharing</em> &#8212; that good thing that we learned about as children &#8212; into something <em>bad</em> and <em>nasty</em>?</p>
<p>Sharing is <em>good</em>. Sharing knowledge is <em>better</em>. Sharing software that empowers people to improve their lives is <em>best</em>.</p>
<p>I&#8217;ve already written about <a href="http://www.feross.org/misinterpreting-copyright/">misinterpreting copyright</a> and <a href="http://www.feross.org/copying-is-not-theft/">why copying is not theft</a> in other blog posts &#8212; check them out if you&#8217;re interested.</p>
<p>These are just a few of the <em>ethical</em> reasons why free software is better than proprietary software. There are a whole host of <em>technical</em> reasons why it&#8217;s better, too. Free software <a href="http://en.wikipedia.org/wiki/Source_code">source code</a> can be scrutinized by more eyeballs, so it&#8217;s less likely to try to employ <a href="http://en.wikipedia.org/wiki/Security_through_obscurity">security through obscurity</a>. Critical security bugs get patched much more quickly &#8212; often within hours &#8212; so free software is usually more secure than proprietary software.</p>
<p>And the list of free software benefits goes on&#8230; but I digress.</p>
<p>RMS is a legend. So, I decided to invite him to come to Stanford to <a href="http://stanfordacm.com">give a talk</a> about his ideas. He replied and let me know that he was already planning to speak at Stanford to students of the <a href="http://cs302.stanford.edu">CS302: Tech Law</a> course. I was thrilled! But, I wanted to help out in some way.</p>
<p>So, I got the <a href="http://stanfordacm.com">Stanford ACM</a> to host a <a href="http://stanfordacm.com/techtalks/">public reception for RMS</a> on the day before his talk, so that students from the Stanford community could meet him and ask questions. Some friends at <a href="http://www.yahoo.com">Yahoo</a> even heard about the event and offered to sponsor it and pay for all our food, which was extremely kind.</p>
<p>RMS is one of the most unique men I&#8217;ve ever met. Over thirty years after the decade of hackers, RMS still embodies  the spirit of the 70&#8242;s hacker culture. He&#8217;s often criticized for being too extreme with his viewpoints. But, I think that&#8217;s what makes him unique.</p>
<p>RMS is an extremist <strong>in the cause of freedom</strong>. And there aren&#8217;t many people like that left in this world.</p>
<blockquote><p>Odious ideas are not entitled to hide from criticism behind the human shield of their believers’ feelings. — Richard Stallman</p></blockquote>
<div id="attachment_1920" class="wp-caption aligncenter" style="width: 550px"><a href="http://www.feross.org/wp-content/uploads/2010/05/4587773070_711a4461f5_b.jpg"><img class="size-large wp-image-1920 " title="Stallman looking for a new laptop case at Fry's Electronics in Palo Alto" src="http://www.feross.org/wp-content/uploads/2010/05/4587773070_711a4461f5_b-540x405.jpg" alt="Stallman looking for a new laptop case at Fry's Electronics in Palo Alto" width="540" height="405" /></a><p class="wp-caption-text">Stallman looking for a new laptop case at Fry&#39;s Electronics in Palo Alto (his bag ripped earlier in the day, so we took him to Fry&#39;s)</p></div>
<p><h2>Related posts:</h2><ol>
<li><a href='http://www.feross.org/free-software-foundation-is-awesome/' rel='bookmark' title='Free Software Foundation is Awesome'>Free Software Foundation is Awesome</a></li>
<li><a href='http://www.feross.org/immortal-technique-comes-to-stanford/' rel='bookmark' title='Immortal Technique Comes to Stanford'>Immortal Technique Comes to Stanford</a></li>
</ol></p>2]]></content:encoded>
			<wfw:commentRss>http://www.feross.org/stallman-stanford/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>of != for</title>
		<link>http://www.feross.org/of-for/</link>
		<comments>http://www.feross.org/of-for/#comments</comments>
		<pubDate>Tue, 27 Apr 2010 00:43:37 +0000</pubDate>
		<dc:creator>Feross Aboukhadijeh</dc:creator>
				<category><![CDATA[Computer Science]]></category>

		<guid isPermaLink="false">http://www.feross.org/?p=1849</guid>
		<description><![CDATA[Stanford Association of Computing Machinery means something completely different. It&#8217;s for, not of. Get our name right, please. More about the Stanford Association for Computing Machinery. Related posts: Quoted 2]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.feross.org/wp-content/uploads/2010/04/Association-of-computing-machinery.jpg"><img class="aligncenter size-large wp-image-1850" title="Association of computing machinery" src="http://www.feross.org/wp-content/uploads/2010/04/Association-of-computing-machinery-540x447.jpg" alt="Association of computing machinery" width="540" height="447" /></a></p>
<div>
<div>
<div>
<div id="c4bd6341286ce52e1eb753_input">Stanford Association <em><strong>of</strong></em> Computing Machinery means  something completely different. It&#8217;s <em><strong>for</strong></em>, not <em><strong>of</strong></em>. Get our name right, please.</div>
</div>
</div>
</div>
<p>More about the <a href="http://stanfordacm.com">Stanford Association <em>for</em> Computing Machinery</a>.</p>
<p><h2>Related posts:</h2><ol>
<li><a href='http://www.feross.org/quoted/' rel='bookmark' title='Quoted'>Quoted</a></li>
</ol></p>2]]></content:encoded>
			<wfw:commentRss>http://www.feross.org/of-for/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Stanford iPhone App Final Project &#8211; iBoard</title>
		<link>http://www.feross.org/stanford-iphone-app-final-project-iboard/</link>
		<comments>http://www.feross.org/stanford-iphone-app-final-project-iboard/#comments</comments>
		<pubDate>Tue, 06 Apr 2010 04:40:19 +0000</pubDate>
		<dc:creator>Feross Aboukhadijeh</dc:creator>
				<category><![CDATA[Computer Science]]></category>
		<category><![CDATA[Stanford]]></category>

		<guid isPermaLink="false">http://www.feross.org/?p=1823</guid>
		<description><![CDATA[This is the iPhone app that I&#8217;m working on with my friend John Hiesey. iBoard is a networked drawing app that allows multiple users from around the world to draw together on the same drawing canvas in real-time. Use it to share your ideas &#8212; diagram, brainstorm, sketch, or doodle with your friends from around [...]]]></description>
			<content:encoded><![CDATA[<p><object width="600" height="475"><param name="movie" value="http://www.youtube.com/e/JQGtbX9pBbI"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/e/JQGtbX9pBbI" type="application/x-shockwave-flash" width="600" height="475" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<p>This is the iPhone app that I&#8217;m  working on with my friend John Hiesey. iBoard is a networked drawing app  that allows multiple users from around the world to draw together on  the same drawing canvas in real-time. Use it to share your ideas &#8212;  diagram, brainstorm, sketch, or doodle with your friends from around the  world in real-time.</p>
<p>The video is from the final project presentations for the Stanford course <a href="http://cs193p.stanford.edu">CS193P: iPhone Programming</a>. Before our demo, our iPod touch was accidentally disconnected from the server, so it caused a hiccup in our demo &#8212; but we still proved that it works using the iPhone simulators on our Macbook Pros.</p>
<p>Also, the name <em>iBoard</em> is likely to change before we put it on the App Store. <strong>Please share your comments and feedback!</strong></p>
<p><h2>Related posts:</h2><ol>
<li><a href='http://www.feross.org/i-broke-my-iphone/' rel='bookmark' title='I broke my iPhone.'>I broke my iPhone.</a></li>
<li><a href='http://www.feross.org/i-won-the-stanford-etl-t-shirt-contest/' rel='bookmark' title='I won the Stanford ETL T-shirt Contest!'>I won the Stanford ETL T-shirt Contest!</a></li>
</ol></p>2]]></content:encoded>
			<wfw:commentRss>http://www.feross.org/stanford-iphone-app-final-project-iboard/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
	</channel>
</rss>

