<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss 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/" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>patorjk.com</title>
	
	<link>http://patorjk.com/blog</link>
	<description>web apps, programming talk, and random thoughts</description>
	<lastBuildDate>Fri, 03 Feb 2012 04:02:15 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/patorjk" /><feedburner:info uri="patorjk" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><feedburner:emailServiceId>patorjk</feedburner:emailServiceId><feedburner:feedburnerHostname>http://feedburner.google.com</feedburner:feedburnerHostname><item>
		<title>New Keyboard Layout Analyzer (Preview)</title>
		<link>http://feedproxy.google.com/~r/patorjk/~3/upJJdJXZ4QQ/</link>
		<comments>http://patorjk.com/blog/2012/02/02/new-keyboard-layout-analyzer-preview/#comments</comments>
		<pubDate>Fri, 03 Feb 2012 00:06:27 +0000</pubDate>
		<dc:creator>patorjk</dc:creator>
				<category><![CDATA[General News]]></category>
		<category><![CDATA[Web Apps]]></category>
		<category><![CDATA[web development]]></category>

		<guid isPermaLink="false">http://patorjk.com/blog/?p=1528</guid>
		<description><![CDATA[You can now try out a preview version of the new Keyboard Layout Analyzer. I completely re-did it from scratch. I know I&#8217;ve done that before, but I&#8217;ve learned a lot about JavaScript and HTML5 over the past two years and thought the application would be best served with a fresh start. Below you can [...]]]></description>
			<content:encoded><![CDATA[<p>You can now try out a preview version of the new <a href="http://patorjk.com/keyboard-layout-analyzer/preview">Keyboard Layout Analyzer</a>. I completely re-did it from scratch. I know I&#8217;ve done that <a href="http://patorjk.com/blog/2009/07/07/new-keyboard-layout-analyzer-less-lines-of-code/">before</a>, but I&#8217;ve learned a lot about JavaScript and HTML5 over the past two years and thought the application would be best served with a fresh start. Below you can see a screen capture of the new configuration page.</p>
<div class="wp-caption aligncenter" style="width: 510px"><img src="http://patorjk.com/images/blog-2012/kla-2012-s1.png" width="500" height="250" class="size-full wp-image-1100" />
<p class="wp-caption-text">Configuration Tab</p>
</div>
<p>The biggest problem with the previous Analyzer was that it didn&#8217;t have the best configuration options. And even then, the top-based tab interface led to a lot of people not even noticing that configuration options existed. My main goal was to make configuration much more intuitive and flexible. </p>
<p>The previous Analyzer also assumed keys to be atomic and wouldn&#8217;t let you mix and match characters from different keys. For English keyboards this was mostly fine, but when I started learning about Foreign layouts and specialized layouts like the <a href="http://en.wikipedia.org/wiki/Dvorak_Simplified_Keyboard#Programmer_Dvorak">Programmer Dvorak</a>, I realized I&#8217;d made a fatal mistake. The old code centered around atomic keys and even used image icons for the configuration display. For this version, I decided to draw the keyboard on a canvas element and to allow keys to mix and match characters. Theoretically, the new setup could even analyze unusual layouts like the <a href="http://en.wikipedia.org/wiki/Maltron">Maltron</a> layout, but I haven&#8217;t yet created Keyboard Maps for that layout, nor have done much testing in that area (though it&#8217;s a goal).</p>
<p>I also tried to make the app look more visually appealing and to provide a better user experience. The old layout was kind of amateurish looking, a number of people didn&#8217;t utilize the top-based tabbed interface, and the amount of scrolling you had to do on the output page made it easy to miss interesting information &#8211; not to mention that I was using pie charts, which are notoriously bad at presenting this type of information (I had a decent number of people email me asking me to switch to bar charts). I tried my best at making something that was reasonably ok looking, and I hope the new side-tabs making navigating the information easier.</p>
<p>I&#8217;ve recently taken on a lot at work, so that has slowed me down quite a bit, but I hope to finish off the rest of the output sections in the coming month. If you find any bugs or have any suggestions please let me know!</p>
<img src="http://feeds.feedburner.com/~r/patorjk/~4/upJJdJXZ4QQ" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://patorjk.com/blog/2012/02/02/new-keyboard-layout-analyzer-preview/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://patorjk.com/blog/2012/02/02/new-keyboard-layout-analyzer-preview/</feedburner:origLink></item>
		<item>
		<title>Pronouncing SQL: S-Q-L or Sequel?</title>
		<link>http://feedproxy.google.com/~r/patorjk/~3/Xuq2UzxHYJk/</link>
		<comments>http://patorjk.com/blog/2012/01/26/pronouncing-sql-s-q-l-or-sequel/#comments</comments>
		<pubDate>Fri, 27 Jan 2012 03:44:18 +0000</pubDate>
		<dc:creator>patorjk</dc:creator>
				<category><![CDATA[Random Thoughts]]></category>

		<guid isPermaLink="false">http://patorjk.com/blog/?p=1496</guid>
		<description><![CDATA[I know, I know, tomato-tomato, but I&#8217;ve had people tell me I say it wrong when said each way, which has left me rather confused, so I decided to do some research and figure out how SQL is actually pronounced. SQL is the language used for querying and managing data in a relational database system. [...]]]></description>
			<content:encoded><![CDATA[<p>I know, I know, tomato-tomato, but I&#8217;ve had people tell me I say it wrong when said each way, which has left me rather confused, so I decided to do some research and figure out how SQL is actually pronounced. SQL is the language used for querying and managing data in a relational database system. Some people say S-Q-L and some people say &#8220;sequel&#8221;. This difference in pronunciation also effects the writing of documentation. The indefinite article that&#8217;s used before the term (a or an) is based on how it&#8217;s pronounced (try saying &#8220;a SQL&#8221; and &#8220;an SQL&#8221;). No one wants to sound ignorant, so which way is correct? It turns out they&#8217;re both correct/acceptable, but that the S-Q-L way of saying it is more &#8220;official&#8221;.</p>
<p>SQL was initially developed at IBM by <A href="http://en.wikipedia.org/wiki/Donald_D._Chamberlin">Donald Chamberlin</a> and <a href="http://en.wikipedia.org/wiki/Raymond_F._Boyce">Raymond Boyce</a>. It was initially called &#8220;Structured English Query Language&#8221; (SEQUEL) and pronounced &#8220;sequel&#8221;, though it later had to have it&#8217;s name shortened to &#8220;Structured Query Language&#8221; (SQL) due to trademark issues. It was created to supplant the then popular <a href="http://en.wikipedia.org/wiki/QUEL_query_languages">QUEL</a> database language, and the name &#8220;sequel&#8221; was meant as a pun (it was the sequel to QUEL) [1]. However, this leads to the big question &#8211; was language still called &#8220;sequel&#8221; after the name change?</p>
<p>If you look at Oracle&#8217;s official documentation on SQL, it says it&#8217;s still pronounced &#8220;sequel&#8221; [2]. However, if you look at MySQL&#8217;s official documentation, it says &#8220;MySQL&#8221; is officially pronounced &#8220;&#8216;My Ess Que Ell&#8217; (not &#8216;my sequel&#8217;)&#8221; [3], and Wikipedia  says SQL is officially pronounced &#8220;S-Q-L&#8221; and references an O&#8217;Reilly book on the subject [4]. So this is no help, the major sources aren&#8217;t agreeing on the way it&#8217;s &#8220;officially&#8221; pronounced.</p>
<p>Then a thought occurred to me: SQL was created in the 70&#8242;s, the creators are probably techies, I can probably just email them and ask them how it&#8217;s pronounced! Ray Boyce had passed away at a young age, but Don Chamberlin was alive and now teaching at a university. I felt a little silly, but I decided to fire off a short email to him:</p>
<blockquote><p>
Hello Don,</p>
<p>I&#8217;m sorry to waste your time with such a silly question, but I&#8217;ve often heard SQL pronounced S-Q-L or as Sequel. I&#8217;ve also seen the official pronunciation listed both ways. According to wikipedia, you and Raymond Boyce created the language and it was shortened to SQL after some legal dispute. So my question is, is there an official pronunciation to SQL? Thank you for your time.</p>
<p>- Pat
</p></blockquote>
<p>To my delight, he replied back:</p>
<blockquote><p>
Hi Pat,</p>
<p>Since the language was originally named SEQUEL, many people continued to pronounce the name that way after it was shortened to SQL. Both pronunciations are widely used and recognized. As to which is more &#8220;official&#8221;, I guess the authority would be the ISO Standard, which is spelled (and presumably pronounced) S-Q-L.</p>
<p>Thanks for your interest,
</p></blockquote>
<p>I felt a little dumb wasting his time with such a goofy question, but I was thrilled he replied back. Later I would find out that he himself pronounces it as &#8220;sequel&#8221; [5], so it&#8217;s interesting he would be so unbiased, though I suppose his pronunciation is consistent with him noting that the original guys kept calling it &#8220;sequel&#8221;. With this I felt I had found my answer: Both were acceptable, though the standard indicated S-Q-L was probably more official. </p>
<p>I don&#8217;t have any plans to be <i>that guy</i> and start correcting people who say &#8220;sequel&#8221;, though now I feel I can at least defend saying S-Q-L if someone tries to correct me. Additionally, while this may seem like a really trivial matter, some people seem to take it rather seriously. On a thread at Oracle&#8217;s message forum, a DBA who pronounces it &#8220;sequel&#8221; mentioned that &#8220;I&#8217;ve rejected interviewees because they didn&#8217;t know how to pronounce SQL &#8230; If you can&#8217;t pronounce it correctly, then I have doubts as to your ability to use it correctly.&#8221; [6] Though then again, the Oracle community seems to have adopted the &#8220;sequel&#8221; way of saying it, so maybe adapting to whatever environment you&#8217;re in is the best policy. Whatever the case, knowing why it&#8217;s said one way or another can useful.</p>
<p>[1] <a href="http://www.ibphoenix.com/resources/documents/design/doc_123">http://www.ibphoenix.com/resources/documents/design/doc_123</a><br />
[2] <a href="http://docs.oracle.com/cd/B10501_01/server.920/a96540/intro.htm">http://docs.oracle.com/cd/B10501_01/server.920/a96540/intro.htm</a><br />
[3] <a href="http://docs.oracle.com/cd/E17952_01/refman-5.1-en/what-is-mysql.html">http://docs.oracle.com/cd/E17952_01/refman-5.1-en/what-is-mysql.html</a><br />
[4] <a href="http://en.wikipedia.org/wiki/Sql">http://en.wikipedia.org/wiki/Sql</a><br />
[5] <a href="http://www.youtube.com/watch?v=ghxpXpTuALM#t=33m23s">http://www.youtube.com/watch?v=ghxpXpTuALM#t=33m23s</a><br />
[6] <a href="https://forums.oracle.com/forums/thread.jspa?threadID=630585&amp;start=15&amp;tstart=0">https://forums.oracle.com/forums/thread.jspa?threadID=630585&amp;start=15&amp;tstart=0</a></p>
<img src="http://feeds.feedburner.com/~r/patorjk/~4/Xuq2UzxHYJk" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://patorjk.com/blog/2012/01/26/pronouncing-sql-s-q-l-or-sequel/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://patorjk.com/blog/2012/01/26/pronouncing-sql-s-q-l-or-sequel/</feedburner:origLink></item>
		<item>
		<title>Is ___ more of a boy’s name, or a girl’s name?</title>
		<link>http://feedproxy.google.com/~r/patorjk/~3/ktIvBZ5L2Hg/</link>
		<comments>http://patorjk.com/blog/2012/01/22/is-___-more-of-a-boys-name-or-a-girls-name/#comments</comments>
		<pubDate>Mon, 23 Jan 2012 01:44:23 +0000</pubDate>
		<dc:creator>patorjk</dc:creator>
				<category><![CDATA[Web Apps]]></category>
		<category><![CDATA[web development]]></category>

		<guid isPermaLink="false">http://patorjk.com/blog/?p=1458</guid>
		<description><![CDATA[Photo By Zach Klein So my boss came into my office on Friday and off handily asked me if &#8220;Stacy&#8221; was more of a boy&#8217;s name, or more of a girl&#8217;s name. I immediately thought &#8220;piece of cake!&#8221; and brought up my Baby Naming Trends Tool, only to be really confused that there was no [...]]]></description>
			<content:encoded><![CDATA[<div class="wp-caption alignright" style="width: 260px"><img src="http://patorjk.com/images/blog-2012/boygirls.png" width="275" height="185" class="size-full wp-image-1100" />
<p class="wp-caption-text">Photo By <a href='http://www.flickr.com/photos/zachklein/54143396/'>Zach Klein</a></p>
</div>
<p>So my boss came into my office on Friday and off handily asked me if &#8220;Stacy&#8221; was more of a boy&#8217;s name, or more of a girl&#8217;s name. I immediately thought &#8220;piece of cake!&#8221; and brought up my <a href="http://patorjk.com/baby-names/trends/">Baby Naming Trends Tool</a>, only to be really confused that there was no feature for determining this. &#8220;Wait, I remember programming this feature last Fall, where is it?&#8221; I thought. Then I remembered I had waited to push the update out until I finished a couple of other features (which remain unfinished). D&#8217;oh! </p>
<p>Since male vs female feature was kind of fun, I decided cut out the unfinished functionality (for now), and push out the update so users could query the data. Now you can see if names are more popular for girls or for guys. Just place a &#8220;m:&#8221; or &#8220;f:&#8221; before a name when you enter it in. Here are some examples of names commonly given to both boys and girls:</p>
<ul>
<li><a href="http://patorjk.com/baby-names/trends/#!/n2m0f0/1930-2010/m:casey,f:casey/">Casey</a> &#8211; Very close, more male leaning though.</li>
<li><a href="http://patorjk.com/baby-names/trends/#!/n2m0f0/1880-2010/m:jordan,f:jordan/">Jordan</a> &#8211; More male leaning.</li>
<li><a href="http://patorjk.com/baby-names/trends/#!/n2m0f0/1930-2010/m:mackenzie,f:mackenzie/">Mackenzie</a> &#8211; More female leaning.</li>
<li><a href="http://patorjk.com/baby-names/trends/#!/n2m0f0/1880-2010/m:pat,f:pat/">Pat</a> &#8211; A nick name, but popular with female babies in the 30&#8242;s and 40&#8242;s (though it&#8217;s almost no longer used). <a href="http://patorjk.com/baby-names/trends/#!/n2m0f0/1880-2010/m:patrick,f:patti/">Patrick and Patti</a> are more popular.</li>
<li><a href="http://patorjk.com/baby-names/trends/#!/n2m0f0/1930-2010/m:quinn,f:quinn/">Quinn</a> &#8211; More female leaning.</li>
<li><a href="http://patorjk.com/baby-names/trends/#!/n2m0f0/1880-2010/m:taylor,f:taylor/">Riley</a> &#8211; More males, but trending towards more females.</li>
<li><a href="http://patorjk.com/baby-names/trends/#!/n2m0f0/1880-2010/m:stacy,f:stacy/">Stacy</a> &#8211; More female leaning.</li>
<li><a href="http://patorjk.com/baby-names/trends/#!/n2m0f0/1880-2010/m:taylor,f:taylor/">Taylor</a> &#8211; More female leaning.</li>
</ul>
<p>However, when creating this feature, I noticed some interesting abnormalities. No popular names seemed to be 100% male or female, even names that were obviously male or female. For example, according to the data, 11 females were named <a href="http://patorjk.com/baby-names/trends/#!/n2m0f0/1880-2010/m:john,f:john/">John</a> in 2010, and during its peak popularity, when 80,000 males a year were being named John, the data says 200-300 females a year were being named John. Even though that means only ~0.375% of John&#8217;s were female, it still seems bizarre that someone would name a baby girl &#8220;John&#8221;. I wondered if this was a mistake on my part, but the underlying data showed the numbers to be correct.</p>
<p>The idea that someone would give a baby girl or boy a name of the opposite sex isn&#8217;t too far fetched, I know a few guys with names more commonly associated with girls, but are there really hundreds of guys named <a href="http://patorjk.com/baby-names/trends/#!/n2m0f0/1880-2010/m:jennifer,f:jennifer/">Jennifer</a> walking around in the US? I accept that there may be a hand full, but my guess for the real reason this anomaly appears is because nurses or doctors sometimes make mistakes when recording the data. That makes me a little sad, but I suppose any data that&#8217;s hand recorded is going to have some errors. Though if this is the case, since this data comes from the <a href="http://www.ssa.gov/oact/babynames/limits.html">US Social Security</a> website, does this mean that these people may have their sex incorrectly recorded on their birth certificate? Though then again, perhaps people give a name for their baby, but then change it when it&#8217;s born and they find out it&#8217;s a different sex. Or then again, maybe there are lots of male Jennifers out there. Whatever the case, it makes for an interesting blip in the data.</p>
<p><strong>Keyboard Layout Analyzer Update</strong></p>
<p>I&#8217;ve rewritten the Keyboard Layout Analyzer. Back in November I told a guy I was close to being done and would have a new version up in &#8220;2 weeks&#8221;. I then told two other people in December who asked for additional features that I&#8217;d have it up in &#8220;2 weeks&#8221;. I now feel a little bit like a jack ass, but I honestly have been really busy. My new plan is to simply put up a preview version soon. The new app is mostly done, but rough around the edges in the output department.</p>
<img src="http://feeds.feedburner.com/~r/patorjk/~4/ktIvBZ5L2Hg" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://patorjk.com/blog/2012/01/22/is-___-more-of-a-boys-name-or-a-girls-name/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://patorjk.com/blog/2012/01/22/is-___-more-of-a-boys-name-or-a-girls-name/</feedburner:origLink></item>
		<item>
		<title>Coming updates</title>
		<link>http://feedproxy.google.com/~r/patorjk/~3/_1pKakezHoU/</link>
		<comments>http://patorjk.com/blog/2011/11/28/coming-updates/#comments</comments>
		<pubDate>Tue, 29 Nov 2011 03:31:17 +0000</pubDate>
		<dc:creator>patorjk</dc:creator>
				<category><![CDATA[General News]]></category>

		<guid isPermaLink="false">http://patorjk.com/blog/?p=1326</guid>
		<description><![CDATA[Photo By gureu Two updates for the price of one today. It&#8217;s been killing me that I haven&#8217;t been posting more. I&#8217;ve been switching between projects a lot lately and I&#8217;m ultimately left with a lot of stuff that&#8217;s between 25%-75% done. Coming up within the next month there will be a make-over/overhaul of an [...]]]></description>
			<content:encoded><![CDATA[<div class="wp-caption alignright" style="width: 260px"><img src="http://patorjk.com/blog/wp-content/uploads/2011/11/old-walk.png" width="250" height="160" class="size-full wp-image-1100" />
<p class="wp-caption-text">Photo By <a href='http://www.flickr.com/photos/francescobellu/3976488867/in/faves-40423570@N07/'>gureu</a></p>
</div>
<p>Two updates for the price of one today. It&#8217;s been killing me that I haven&#8217;t been posting more. I&#8217;ve been switching between projects a lot lately and I&#8217;m ultimately left with a lot of stuff that&#8217;s between 25%-75% done. </p>
<p>Coming up within the next month there will be a make-over/overhaul of an existing app. I also started some big updates for the baby naming tool, but temporarily shelved them when I started the remake of the previously mentioned app &#8211; though I&#8217;m not sure when these updates will be out. I&#8217;ve also been experimenting with FireFox addons, but I haven&#8217;t yet put together anything interesting. Sometimes I feel like I have programmer ADD.</p>
<p>Anyway, I just wanted to let you all know I&#8217;m still actively working on stuff for this site and haven&#8217;t forgotten about it. Sorry it&#8217;s been so quiet lately!</p>
<img src="http://feeds.feedburner.com/~r/patorjk/~4/_1pKakezHoU" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://patorjk.com/blog/2011/11/28/coming-updates/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://patorjk.com/blog/2011/11/28/coming-updates/</feedburner:origLink></item>
		<item>
		<title>Testing your Linux skills</title>
		<link>http://feedproxy.google.com/~r/patorjk/~3/ESKeAPKq55k/</link>
		<comments>http://patorjk.com/blog/2011/11/28/testing-your-linux-skills/#comments</comments>
		<pubDate>Tue, 29 Nov 2011 03:30:15 +0000</pubDate>
		<dc:creator>patorjk</dc:creator>
				<category><![CDATA[Development Thoughts]]></category>

		<guid isPermaLink="false">http://patorjk.com/blog/?p=1334</guid>
		<description><![CDATA[Photo By mkrigsman If you&#8217;re a developer, you probably find yourself using Linux at least some of the time. Knowing your way around the OS can make your life a lot easier, and I&#8217;ve sometimes found myself wishing I knew certain commands or concepts a lot sooner. I&#8217;m no expert, but since I thought it [...]]]></description>
			<content:encoded><![CDATA[<div class="wp-caption alignright" style="width: 260px"><img src="http://patorjk.com/blog/wp-content/uploads/2011/11/linux-cupcakes1.png" width="250" height="175" class="size-full wp-image-1100" />
<p class="wp-caption-text">Photo By <a href='http://www.flickr.com/photos/mkrigsman/2993846564/'>mkrigsman</a></p>
</div>
<p> If you&#8217;re a developer, you probably find yourself using Linux at least some of the time. Knowing your way around the OS can make your life a lot easier, and I&#8217;ve sometimes found myself wishing I knew certain commands or concepts a lot sooner. I&#8217;m no expert, but since I thought it might be useful, I&#8217;ve put together a short quiz to test your Linux skills. </p>
<div style="display:none">
<u><b>Important Note:</b></u> Since you are reading this through a feed reader or by email, the answers will be right below the question. On the main blog entry the answers are hidden until you mouse over or click on the &#8220;+&#8221; next to the question. <a href="http://patorjk.com/blog/2011/11/28/testing-your-linux-skills/">Click here</a> to be taken to the blog entry if you wish to not see the answers.<br />
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<p>So, let&#8217;s get started&#8230;</p>
<style type="text/css">
.answer1 {display: none;}
#question1:hover {cursor:default;}
#question1:hover + .answer1 {display:block;}
#question1:active + .answer1 {display:block;}
.answer2 {display: none;}
#question2:hover {cursor:default;}
#question2:hover + .answer2 {display: block;}
#question2:active + .answer2 {display: block;}
.answer3 {display: none;}
#question3:hover {cursor:default;}
#question3:hover + .answer3 {display: block;}
#question3:active +.#answer3 {display: block;}
.answer4 {display: none;}
#question4:hover {cursor:default;}
#question4:hover + .answer4 {display: block;}
#question4:active + .answer4 {display: block;}
.answer5 {display: none;}
#question5:hover {cursor:default;}
#question5:hover + .answer5 {display: block;}
#question5:active + .answer5 {display: block;}
.answer6 {display: none;}
#question6:hover {cursor:default;}
#question6:hover + .answer6 {display: block;}
#question6:active + .answer6 {display: block;}
.answer7 {display: none;}
#question7:hover {cursor:default;}
#question7:hover + .answer7 {display: block;}
#question7:active + .answer7 {display: block;}
.answer8 {display: none;}
#question8:hover {cursor:default;}
#question8:hover + .answer8 {display: block;}
#question8:active + .answer8 {display: block;}
.answer9 {display: none;}
#question9:hover {cursor:default;}
#question9:hover + .answer9 {display: block;}
#question9:active + .answer9 {display: block;}
.answer10 {display: none;}
#question10:hover {cursor:default;}
#question10:hover + .answer10 {display: block;}
#question10:active + .answer10 {display: block;}
</style>
<ol>
<li>What does the cd command do when handed each of the following inputs: &#8220;-&#8221;, &#8220;/tmp&#8221; and &#8220;~&#8221;? [<a id="question1">+</a>]
<div class="answer1">
<p />
<ul style="list-style-type: disc;">
<li style="list-style-type: disc;">&#8220;cd -&#8221; changes the current directory to the directory you were previously in.</li>
<li style="list-style-type: disc;">&#8220;cd /tmp&#8221; changes the current directory to &#8220;/tmp&#8221;</li>
<li style="list-style-type: disc;">&#8220;cd ~&#8221; changes the current directory to your home directory.</li>
</ul>
</div>
<p /></li>
<li>What are two ways of copying a text file without using the cp command? [<a id="question2">+</a>]
<div class="answer2">
<p />
<ul  style="list-style-type: disc;">
<li style="list-style-type: disc;">cat the file and redirect the output to a new file.</li>
<li style="list-style-type: disc;">Use the scp command (secure copy).</li>
</ul>
</div>
<p /></li>
<li>You want your console window to continuously show you the latest updates to a log file as its being updated. How would you do this? [<a id="question3">+</a>]
<div class="answer3">
<p />
<ul style="list-style-type: disc;">
<li style="list-style-type: disc;">Use the tail command with the -f flag.</li>
<li style="list-style-type: disc;">Use the less command with the +F option (personal favorite).</li>
</ul>
</div>
<p /></li>
<li>What is the difference between the &#8220;which&#8221; and &#8220;whereis&#8221; commands? [<a id="question4">+</a>]
<div class="answer4">
<p />
<ul style="list-style-type: disc;">
<li style="list-style-type: disc;">which shows the full path of a given command.</li>
<li style="list-style-type: disc;">whereis locates source, binary, and manual files for a given command.</li>
</ul>
</div>
<p /></li>
<li>How would you find all of the files modified within the last day under a particular directory structure? [<a id="question5">+</a>]
<div class="answer5">
<p />
<ul style="list-style-type: disc;">
<li style="list-style-type: disc;">find ./ -type f -mtime -1</li>
</ul>
</div>
<p /></li>
<li>What is the purpose of the &#8220;/etc&#8221; and &#8220;/var&#8221; directories? [<a id="question6">+</a>]
<div class="answer6">
<p />
<ul style="list-style-type: disc;">
<li style="list-style-type: disc;">The main directory layout for all Linux systems is based on the Filesystem Hierarchy Standard (FHS).</li>
<li style="list-style-type: disc;">The &#8220;/etc&#8221; directory contains host-specific, system-wide configuration files (sometimes called &#8220;Editable Text Configuration&#8221;).</li>
<li style="list-style-type: disc;">The &#8220;/var&#8221; directory contains &#8220;variable files&#8221;, or files whose content is expected to continuously change during the normal operation of the system (ex: log files).</li>
</ul>
</div>
<p /></li>
<li>What are &#8220;cron jobs&#8221;? [<a id="question7">+</a>]
<div class="answer7">
<p />
<ul style="list-style-type: disc;">
<li style="list-style-type: disc;">Linux systems have a program called &#8220;cron&#8221; which runs in the background and executes jobs (commands, scripts, etc) based on a schedule defined in a crontab file. This allows you to routinely do certain tasks. A &#8220;cron job&#8221; refers to a job run by the cron daemon.</li>
</ul>
</div>
<p /></li>
<li>What does the &#8220;nohup&#8221; command do? [<a id="question8">+</a>]
<div class="answer8">
<p />
<ul style="list-style-type: disc;">
<li style="list-style-type: disc;">Short for No Hang Up, this command allow you to execute a command that will keep going after you&#8217;ve logged out (ie, one that ignores hang up signals).</li>
</ul>
</div>
<p /></li>
<li>You have a directory tree which contains all of the files for a web application. You want to make a list of all of the files that contain a phone number in the format of &#8220;(XXX) XXX-XXXX&#8221;. How would you do this? [<a id="question9">+</a>]
<div class="answer9">
<p />
<ul style="list-style-type: disc;">
<li style="list-style-type: disc;">The key insight is to use the <i>grep</i> command with the -R flag (recursive directory search), -l flag (list files) and a regular expression to find the phone numbers.</li>
<li style="list-style-type: disc;">As a side note, this used to be a popular interview question that Amazon gave to potential applicants (for more info, see the &#8220;Notes&#8221; section at the bottom of this post).</li>
</ul>
</div>
<p /></li>
<li>What is the name of the official Linux kernel mascot? [<a id="question10">+</a>]
<div class="answer10">
<p />
<ul style="list-style-type: disc;">
<li style="list-style-type: disc;">Tux.</li>
</ul>
</div>
<p /></li>
</ol>
<p>Mouse over or click the +&#8217;s to see possible answers (though I didn&#8217;t include all possible answers &#8211; so you may have thought of some solutions that aren&#8217;t listed). </p>
<p>If you found yourself doing poorly, or just want to refresh your linux skill set, check out:</p>
<p><a href="http://www.funtoo.org/wiki/Linux_Fundamentals,_Part_1">http://www.funtoo.org/wiki/Linux_Fundamentals,_Part_1</a></p>
<p>They have some of the best tutorials I&#8217;ve seen on Linux. However, if anyone knows of any other good tutorials let me know and I&#8217;ll add them here too.</p>
<p>Notes:</p>
<ul>
<li>For more information on question 9, <a href="https://sites.google.com/site/steveyegge2/five-essential-phone-screen-questions">click here</a> and go to the section titled &#8220;Area Number Three: Scripting and Regular Expressions&#8221;.</li>
</ul>
<img src="http://feeds.feedburner.com/~r/patorjk/~4/ESKeAPKq55k" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://patorjk.com/blog/2011/11/28/testing-your-linux-skills/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://patorjk.com/blog/2011/11/28/testing-your-linux-skills/</feedburner:origLink></item>
		<item>
		<title>Plotting and Analyzing US Baby Naming Data</title>
		<link>http://feedproxy.google.com/~r/patorjk/~3/AP7yLjr_yGU/</link>
		<comments>http://patorjk.com/blog/2011/07/05/plotting-and-analyzing-us-baby-naming-data/#comments</comments>
		<pubDate>Tue, 05 Jul 2011 04:03:10 +0000</pubDate>
		<dc:creator>patorjk</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Web Apps]]></category>

		<guid isPermaLink="false">http://patorjk.com/blog/?p=1285</guid>
		<description><![CDATA[Photo By mahalie I&#8217;ve created a new tool that allows you to query US baby naming data from the past 130 years and play around with it on an interactive chart. I got the idea after stumbling upon the data at the US Social Security website. To cut to the chase, below you can see [...]]]></description>
			<content:encoded><![CDATA[<div class="wp-caption alignright" style="width: 160px"><img src="http://patorjk.com/images/blog-2011/preggers.png" alt="" title="" width="150" height="200" class="size-full" />
<p class="wp-caption-text">Photo By <a href='http://www.flickr.com/photos/mahalie/154017705/'>mahalie</a></p>
</div>
<p>I&#8217;ve created a <a href="http://patorjk.com/baby-names/trends/">new tool</a> that allows you to query US baby naming data from the past 130 years and play around with it on an interactive chart. I got the idea after stumbling upon the data at the <a href="http://www.ssa.gov/oact/babynames/limits.html">US Social Security</a> website.</p>
<p>To cut to the chase, below you can see some interesting effects of our culture on naming trends.</p>
<ul>
<li><a href="http://patorjk.com/baby-names/trends/#!/n4m0f0/1910-2010/padme,leia,anakin,han/">Star Wars</a> &#8211; George Lucas created the names &#8220;Anakin&#8221; and &#8220;Padme&#8221;, and he had a big impact on the number of babies given the name &#8220;Han&#8221;, &#8220;Leia&#8221; and &#8220;Luke&#8221;. I didn&#8217;t include Luke on the chart because it dwarfed the others so much, but between 1880 and 1977, <strong>18,027</strong> babies were named Luke, between 1977 and now, <strong>176,125</strong> babies were given that name.</li>
<li><a href="http://patorjk.com/baby-names/trends/#!/n1m0f0/1880-2010/hermione/">Hermione</a> &#8211; Apparently Hermione is a real name, though the 478 babies given the name since 2000 were probably due to the recent popularity in the Harry Potter series.</li>
<li><a href="http://patorjk.com/baby-names/trends/#!/n5m0f0/1910-2010/woodrow,warren,herbert,franklin,calvin/">US Presidents</a> &#8211; My friend Ben found this one. Back in the early twentieth century, who got elected president had a big impact on what people named their babies.</li>
<li><a href="http://patorjk.com/baby-names/trends/#!/n2m0f0/1910-2010/kennedy,reagan/">Reagan and Kennedy</a> &#8211; I don&#8217;t want to get too political, and I&#8217;m just talking out of my ass here, but I wonder if the idealizing of past political heroes (from different sides of the aisle) has led to the recent surge in these names.</li>
<li><a href="http://patorjk.com/baby-names/trends/#!/n4m0f0/1970-2010/donatello,michaelangelo,raphael,leonardo/">Ninja Turtles</a> &#8211; The Ninja Turtle craze of the late-80&#8242;s / early 90&#8242;s seems to have caused a small impact on naming trends in that time period.</li>
<li><a href="http://patorjk.com/baby-names/trends/#!/n1m0f0/1910-2010/paris/">Paris</a> &#8211; Paris Hilton&#8217;s sex tape leaked onto the internet in 2003 and became a big news story. For some reason this inspired hundreds of people to name their kid after her.</li>
<li><a href="http://patorjk.com/baby-names/trends/#!/n1m0f0/1880-2010/osama/">Osama</a> &#8211; The frequency of people naming their kid &#8220;Osama&#8221; actually increased after the 1998 embassy bombings, but I&#8217;m guessing after 9-11, people realized naming their kid after after the world&#8217;s most wanted terrorist was probably not a good idea.</li>
<li><a href="http://patorjk.com/baby-names/trends/#!/n1m0f0/1970-2010/miley/">Miley</a> &#8211; In 2005, 26 babies were born with the name &#8220;Miley&#8221;. In March of 2006, Hannah Montana debuted with star Miley Cyrus on the Disney Channel. That year the name started to sky rocket in popularity, and peaked in popularity in 2008 when 2,643 babies were given the name.</li>
<li><a href="http://patorjk.com/baby-names/trends/#!/n1m0f0/1970-2010/selena/">Selena</a> &#8211; In 1995, this name shot up in popularity by 400%, with 3,839 babies given the name &#8220;Selena&#8221;. This was most likely was caused by the 1995 death of latin super star &#8220;<a href="http://en.wikipedia.org/wiki/Selena">Selena Quintanilla-Pérez</a>&#8220;. Interestingly, Selena Gomez has not had the effect on &#8220;Selena&#8221; that Miley Cyrus has had with &#8220;Miley&#8221;.</li>
<li><a href="http://patorjk.com/baby-names/trends/#!/n1m0f0/1970-2010/carson/">Carson</a> &#8211; This name had been slowly increasing in popularity, but it started to skyrocket in 1998, which coincidentally was the year MTV debuted its mega hit TV show <a href="http://en.wikipedia.org/wiki/Total_Request_Live">TRL</a>, with host Carson Daily. The name has maintained its popularity, so its probably not all due to Daily, but since TRL was a young person&#8217;s show, and <a href="http://en.wikipedia.org/wiki/Carson_(given_name)">not many notable people are named Carson</a>, he probably had some effect in getting the ball rolling.</li>
<li><a href="http://patorjk.com/baby-names/trends/#!/n1m0f0/1880-2010/shirley/">Shirley</a> &#8211; Shirley Temple shot to super stardom in 1934 with <a href="http://en.wikipedia.org/wiki/Bright_Eyes_(film)">Bright Eyes</a>, and so did the use of her name for new borns.</li>
<li><a href="http://patorjk.com/baby-names/trends/#!/n1m0f0/1950-2010/britney/">Britney</a> &#8211; Britney Spears dropped &#8220;&#8230;Baby One More Time&#8221; in 1999 and had a big impact on the &#8220;Britney&#8221; (interestingly, the version spelled &#8220;Brittany&#8221; stayed in steep decline during this time period).</li>
</ul>
<p>These were all found by just trying out different names and looking at the time period for when the names peaked or dropped in popularity.</p>
<p><strong>Chart Library and Modifications</strong></p>
<p>For those of you who are curious, I used Martin Kleppmann&#8217;s <a href="https://github.com/ept/plotkit">PlotKit</a> repo as a starting place for the chart (that repo is a heavily modified version of Plotkit with lots of new features and fixes). I then modified it to add in some additional features and minor bug fixes, including the mouse interaction stuff. I&#8217;ll probably submit my changes back to him at some point, though right now I feel like I kind of hacked stuff into it, so I&#8217;ll probably wait until I polish it up and the changes are field tested more. If you have any trouble with the chart please let me know.</p>
<p>The mouse interaction stuff was done by creating a separate canvas element and having it overlay the chart. The dynamic dots you see are then drawn on this canvas. This is done because re-drawing the whole chart is time consuming. The one exception to this is IE7 (and possibly IE8), for which I couldn&#8217;t get the overlay to work. So for those browsers, the whole chart re-drawn when it changes. So you&#8217;ll notice if you use IE7 that mouse interaction isn&#8217;t smooth, while if you use Chrome, FireFox, or IE9, things should be pretty smooth.</p>
<img src="http://feeds.feedburner.com/~r/patorjk/~4/AP7yLjr_yGU" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://patorjk.com/blog/2011/07/05/plotting-and-analyzing-us-baby-naming-data/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		<feedburner:origLink>http://patorjk.com/blog/2011/07/05/plotting-and-analyzing-us-baby-naming-data/</feedburner:origLink></item>
		<item>
		<title>“The Book of CSS3″ Book Review</title>
		<link>http://feedproxy.google.com/~r/patorjk/~3/PTFTvd9PA24/</link>
		<comments>http://patorjk.com/blog/2011/06/27/the-book-of-css3-book-review/#comments</comments>
		<pubDate>Tue, 28 Jun 2011 01:51:36 +0000</pubDate>
		<dc:creator>patorjk</dc:creator>
				<category><![CDATA[Book Reviews]]></category>

		<guid isPermaLink="false">http://patorjk.com/blog/?p=1166</guid>
		<description><![CDATA[The Book of CSS3 I had been wanting to learn more about CSS3, so when offered a review copy of The Book of CSS3, I accepted knowing that at the minimum, I&#8217;d at least get exposure to a bunch of cool new design features. Luckily, the book itself is well written and proves to be [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_1167" class="wp-caption alignleft" style="width: 180px"><a href="http://www.amazon.com/gp/product/1593272863/ref=as_li_ss_tl?ie=UTF8&#038;tag=patorjkcom-20&#038;linkCode=as2&#038;camp=217145&#038;creative=399373&#038;creativeASIN=1593272863"><img src="http://patorjk.com/blog/wp-content/uploads/2011/06/css3_cvr_03.png" alt="" title="The Book of CSS3" width="170" height="225" class="size-full wp-image-1167" /></a>
<p class="wp-caption-text">The Book of CSS3</p>
</div>
<p> I had been wanting to learn more about CSS3, so when offered a review copy of <a href="http://www.amazon.com/gp/product/1593272863/ref=as_li_ss_tl?ie=UTF8&#038;tag=patorjkcom-20&#038;linkCode=as2&#038;camp=217145&#038;creative=399373&#038;creativeASIN=1593272863">The Book of CSS3</a>, I accepted knowing that at the minimum, I&#8217;d at least get exposure to a bunch of cool new design features. Luckily, the book itself is well written and proves to be a great guide to what&#8217;s available now, and to what&#8217;s coming soon.</p>
<p>The book is written for web developers who are familar with CSS and who may have played around with some of the new CSS3 features, like rounded corners and drop shadows, but who are looking to get a fuller understanding of what it is and what they can do with it. After explaining a bit about what CSS3 is, remarking on its modular nature (the spec is broken into modules so that browsers can implement individual modules without having to implement the whole CSS3 spec right way) and giving a short write up of its troubled history (work on the CSS3 spec originally started way back in 1998), the book launches into chapters on individual CSS3 topics &#8211; you can see the full table of contents <a href="http://www.nostarch.com/download/CSS3_toc.pdf">here</a>.</p>
<p>The flow of the book from one topic to the next is pretty good, but with the exception of chapters dealing with animation and transformation, most of the chapters can pretty much be read in any order. However, the earlier chapters cover topics that are more widely accessible, stable, and cross-browser than the later chapters, so reading the book start to finish is probably advantageous. The structure of each chapter is very similar, with the author discussing a little about the topic and then leading you through various sections where features are described and showed off with examples. Cross-browser techniques (where relevant) and compatibly are also mentioned.</p>
<p>One of the early topics that really piqued my interest was Web Fonts. With Web Fonts you can use any font you want, even a crazy <a href="http://www.yourfonts.com/">hand written</a> one, and users will see it when viewing your webpage. The author even provides some cool links to some CSS3 font resources like <a href="http://www.google.com/webfonts">Google Web Fonts</a>, which makes it really easy for you to include and use fonts in a cross-browser manner.</p>
<p>Another topic that I enjoyed was &#8220;Transitions and Animations&#8221;. Animations let you move and change elements during a given time period. Unfortunely for us, the Animations module, at least for now, is only implemented in Webkit browsers (Chrome and Safari). However, Transitions are currently available in all of the major browsers except IE. A &#8220;Transition&#8221; is an animation that happens between two different states. They allow you to give a smooth feel to certain style changes. For example, say you wanted to change the color of a link, but you wanted the change to come in gradually. You could do that like so:</p>
<pre class="brush:css">
<style type="text/css">
a.linkChange {
    font-weight:bold;
    -webkit-transition: color 1s ease;
    -moz-transition: color 1s ease;
    -o-transition: color 1s ease;
    transition: color 1s ease;
}

a.linkChange:hover {
    color: #ff0000;
}
</style>
</pre>
<style type="text/css">
a.linkChange {
    font-weight:bold;
    -webkit-transition: color 1s ease;
    -moz-transition: color 1s ease;
    -o-transition: color 1s ease;
    transition: color 1s ease;
}</p>
<p>a.linkChange:hover {
    color: #ff0000;
}
</style>
<p>Example test: <a class="linkChange" href="#">Mouse over this link!</a></p>
<p>As you can see, the hover pseudo-class changes the link to color to red, but since we&#8217;ve setup a transition for the color property, the link transitions from black to red over the period of 1 second, instead of abruptly changing to red. This effect also applies to other properties, and is especially neat when changing a div&#8217;s position or size.</p>
<p>Near the end of the book some yet-to-be implemented features are discussed. Chief among them is the &#8220;Template Layout Module&#8221;, which would allow you to lay out items on a page in way that is similar to a grid, but a in fashion that is little more intuitive. The Template Layout Module is made even more interesting by the fact that even though it is currently not implemented in any browser, you can still use it by using a <a href="http://code.google.com/p/css-template-layout/">JavaScript library</a> written by Alexis Deveria.</p>
<p>I feel like I learned a lot from this book and that it not only contained a lot of useful information, but that the information was presented well. The only draw back to reading this kind of book is that CSS3 is still in flux right now and certain features will change as things are ironed out, however, much of what&#8217;s talked about is reasonably stable, and knowing about what&#8217;s coming will probably give you a better footing for the features when they finally arrive. If you&#8217;re looking to learn more about CSS3, this is definitely a book to look into. </p>
<img src="http://feeds.feedburner.com/~r/patorjk/~4/PTFTvd9PA24" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://patorjk.com/blog/2011/06/27/the-book-of-css3-book-review/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://patorjk.com/blog/2011/06/27/the-book-of-css3-book-review/</feedburner:origLink></item>
		<item>
		<title>CSS3 Card Flip Animation Trick</title>
		<link>http://feedproxy.google.com/~r/patorjk/~3/EmEaVS9pX0o/</link>
		<comments>http://patorjk.com/blog/2011/06/13/css3-card-flip-animation-trick/#comments</comments>
		<pubDate>Tue, 14 Jun 2011 00:49:58 +0000</pubDate>
		<dc:creator>patorjk</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://patorjk.com/blog/?p=1176</guid>
		<description><![CDATA[I&#8217;ve been playing around with some of CSS3&#8242;s new animation features. For an app I&#8217;m writing, my wife suggested I jazz things up a bit by having an image look like its flipping over, and I realized that with CSS3, I could actually do that. To demonstrate what I&#8217;m talking about, in the latest version [...]]]></description>
			<content:encoded><![CDATA[<style>
@-webkit-keyframes card1Flip {
    0% {-webkit-transform: rotateY(0deg);}
    24% {background-position-y:0px;}
    25% {background-position-y:204px;}
    50% { -webkit-transform: rotateY(180deg);}
    75% {background-position-y:204px;}
    76% {background-position-y:0px;}
    100% {-webkit-transform: rotateY(360deg);}
}
@-webkit-keyframes card2Flip {
    0% {-webkit-transform: rotateY(0deg);}
    24% {background-position-y:0px;;background-position-x:0px;}
    25% {background-position-y:204px;background-position-x:150px;}
    50% { -webkit-transform: rotateY(180deg);}
    75% {background-position-y:204px;background-position-x:150px;}
    76% {background-position-y:0px;background-position-x:0px;}  
    100% {-webkit-transform: rotateY(360deg);}
}
@-webkit-keyframes card3Flip {
    0% {-webkit-transform: rotateY(0deg);}
    24% {background-position-x:0px;}
    25% {background-position-x:150px;}
    50% { -webkit-transform: rotateY(180deg);}
    75% {background-position-x:150px;}
    76% {background-position-x:0px;}  
    100% {-webkit-transform: rotateY(360deg);}
}
.card1FlipProps {
    -webkit-animation-name: card1Flip;
}
.card2FlipProps {
    -webkit-animation-name: card2Flip;
}
.card3FlipProps {
    -webkit-animation-name: card3Flip;
}
.card1FlipProps,.card2FlipProps,.card3FlipProps {
    -webkit-animation-duration: 2000ms;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;	
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
}
#card1:hover,#card2:hover,#card3:hover {
    cursor:pointer;
}
</style>
<p>I&#8217;ve been playing around with some of CSS3&#8242;s new animation features. For an app I&#8217;m writing, my wife suggested I jazz things up a bit by having an image look like its flipping over, and I realized that with CSS3, I could actually do that. To demonstrate what I&#8217;m talking about, in the latest version of <strong>Chrome</strong>, click one of the playing card images below*.</p>
<table style="margin:0 auto;">
<tr>
<td>
<div id="card1" style="background-image:url('/images/blog-2011/card_map.png');width:150px;height:204px;"></div>
</td>
<td>
<div id="card2" style="background-image:url('/images/blog-2011/card_map.png');width:150px;height:204px;"></div>
</td>
<td>
<div id="card3" style="background-image:url('/images/blog-2011/card_map.png');width:150px;height:204px;"></div>
</td>
</tr>
</table>
<p>The neat thing is that the effect is ridiculously simple. The one catch is that you can&#8217;t change the background-image property of a div during an animation. To get around this, you just need to use an image that contains all of the pictures you want to display. When the image is out of view (e.g., roated at 90 degrees or 270 degrees on the Y axis), you change the background-position. That way, when the image rotates back into view, it&#8217;s displaying a different picture.</p>
<p>It&#8217;s pretty simple, but kind of amusing. Below is some example code you can use for your own animations. The card image used in this example can be seen <a href="/images/blog-2011/card_map.png">here</a>, and the full set of cards can be obtained <a href="http://www.openclipart.org/search/?query=playing%20cards&#038;page=3">here</a>.</p>
<p>CSS:</p>
<pre class="brush:css">
@-webkit-keyframes card1Flip {
    0% {-webkit-transform: rotateY(0deg);}
    24% {background-position-y:0px;}
    25% {background-position-y:204px;}
    50% { -webkit-transform: rotateY(180deg);}
    75% {background-position-y:204px;}
    76% {background-position-y:0px;}
    100% {-webkit-transform: rotateY(360deg);}
}
.card1FlipProps {
    -webkit-animation-name: card1Flip;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
}
#card1 {
    background-image:url('/images/blog-2011/card_map.png');
    width:150px;
    height:204px;
}
</pre>
<p>JavaScript:</p>
<pre class="brush:js">
var elm;
elm = document.getElementById("card1");
elm.addEventListener("webkitAnimationEnd", function(){
    if (this.classList) {
        this.classList.remove('card1FlipProps');
    }
}, false);
elm.addEventListener("click", function() {
    if (this.classList) {
        this.classList.add('card1FlipProps');
    }
}, false);
</pre>
<p>HTML:</p>
<pre class="brush:html">
&lt;div id="card1">&lt;/div>
</pre>
<p>* <strong>Important Notes</strong>: Unfortunately, the CSS3 animation module isn&#8217;t implemented in most browsers right now, so the above example will only work in the latest version of <strong>Chrome</strong>. <strong>Safari</strong> also uses Webkit as its layout engine, however, when I tested this example in the latest version of Safari (5.0.5), it didn&#8217;t work correctly. Some digging around showed that my version of Safari was using Webkit version 533.21.1, and my version of Chrome was using Webkit version 534.30.</p>
<p>Since the animation module is still being worked on right now, this technique, and animations in general, should probably be used cautiously and for effects that aren&#8217;t that important.<br />
<script>
if (window.addEventListener) {
var elm;
elm = document.getElementById("card1");
elm.addEventListener("webkitAnimationEnd", function(){
    if (this.classList) {
        this.classList.remove('card1FlipProps');
    }
}, false);
elm.addEventListener("click", function() {
    if (this.classList) {
        this.classList.add('card1FlipProps');
    }
}, false);
elm = document.getElementById("card2");
elm.addEventListener("webkitAnimationEnd", function(){
    if (this.classList) {
        this.classList.remove('card2FlipProps');
    }
}, false);
elm.addEventListener("click", function() {
    if (this.classList) {
        this.classList.add('card2FlipProps');
    }
}, false);
elm = document.getElementById("card3");
elm.addEventListener("webkitAnimationEnd", function(){
    if (this.classList) {
        this.classList.remove('card3FlipProps');
    }
}, false);
elm.addEventListener("click", function() {
    if (this.classList) {
        if (console) {
            console.log("classList property exists...");
        }
        this.classList.add('card3FlipProps');
    }
}, false);
}
</script></p>
<img src="http://feeds.feedburner.com/~r/patorjk/~4/EmEaVS9pX0o" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://patorjk.com/blog/2011/06/13/css3-card-flip-animation-trick/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://patorjk.com/blog/2011/06/13/css3-card-flip-animation-trick/</feedburner:origLink></item>
		<item>
		<title>Extendible BBCode Parser in JavaScript</title>
		<link>http://feedproxy.google.com/~r/patorjk/~3/ymWIB9mABV8/</link>
		<comments>http://patorjk.com/blog/2011/05/07/extendible-bbcode-parser-in-javascript/#comments</comments>
		<pubDate>Sat, 07 May 2011 19:52:11 +0000</pubDate>
		<dc:creator>patorjk</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Web Apps]]></category>
		<category><![CDATA[web development]]></category>

		<guid isPermaLink="false">http://patorjk.com/blog/?p=1078</guid>
		<description><![CDATA[Photo By Dean Terry I decided to try my hand at implementing a BBCode parser in JavaScript. You can play around with it online here, and download the source here. I had looked around a little bit and noticed that the existing JavaScript BBCode parsers had at least a few of the following issues: They [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_1100" class="wp-caption alignright" style="width: 260px"><img src="http://patorjk.com/blog/wp-content/uploads/2011/05/strange.png" alt="" title="Avatar" width="250" height="149" class="size-full wp-image-1100" />
<p class="wp-caption-text">Photo By <a href='http://www.flickr.com/photos/therefore/475120436/in/faves-40423570@N07/'>Dean Terry</a></p>
</div>
<p>I decided to try my hand at implementing a <a href="https://secure.wikimedia.org/wikipedia/en/wiki/BBCode">BBCode</a> parser in JavaScript. You can play around with it online <a href="http://patorjk.com/bbcode-previewer/">here</a>, and download the source <a href="http://patorjk.com/bbcode-previewer/xbbcode-src.zip">here</a>.</p>
<p>I had looked around a little bit and noticed that the existing JavaScript BBCode parsers had at least a few of the following issues:</p>
<ul>
<li>They didn&#8217;t report errors on misaligned tags (e.g., [b][u]test[/b][/u]).</li>
<li>They couldn&#8217;t handle tags of the same type that were nested within each other (e.g., [color=red]red[color=blue]blue[/color]red again[/color]). This happens because their regex will look for the first closing tag it can find.</li>
<li>They couldn&#8217;t handle BBCode&#8217;s list format (e.g., [list][*]item 1[*]item 2[/list]).</li>
<li>They didn&#8217;t report errors on incorrect parent-child relationships (e.g., [list][td]item 1?[/td][/list]).</li>
<li>They weren&#8217;t easily extendible.</li>
</ul>
<p>I naively thought it&#8217;d be easy to quickly whip up a parser, and at first it was. Most BBCode tags can be implemented with a simple find and replace. However, I quickly ran into the issues of dealing with nested tags of the same type, the noparse tag, and the list tag&#8217;s annoying [*] tag (which doesn&#8217;t have a closing tag). Luckily, I came across a neat blog post on <a href="http://blog.stevenlevithan.com/archives/reverse-recursive-pattern">finding nested patterns in JavaScript</a>, which came in handy for isolating tag pairs, from the inner-most on up. Taking the idea from that post, one can do something like this to process the inner tags first and avoid the nested tag problem:</p>
<pre class="brush:js">
var str = "[list][list]test[/list][/list]",
    re = /\[([^\]]*?)\](.*?)\[\/\1\]/gi;
while (str !== (str = str.replace(re, function(strMatch, subM1, subM2) {
    return "<some-html-tag>" + subM2 + "</some-html-tag>";
})));
// str = "<some-html-tag><some-html-tag>test</some-html-tag></some-html-tag>"
</pre>
<p>That idea works well, though you can&#8217;t implement a noparse tag if you process the inner-most tags first. So I decided to pre-process the BBCode with something similar to the idea above and add in nested-depth information to each open and close tag. Once all of the tags had that, I could  parse the processed code with a regex that could easily match-up the correct open and close tags.</p>
<p>To get around the issue of the [*] tag having no closing tag, I wrote code that inserted [/*] tags where they were supposed to go during the pre-processing period. I wont go into the algorithm here, but you can dig into the code if you&#8217;re interested.</p>
<p>Also, I should note that the fact that JavaScript allows you to use a function as the second parameter to the <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/replace">replace method</a> makes processing the tags really easy. Once you match a set of tags, you can recursively call the parse function on that tag&#8217;s contents from inside of the function you passed to replace.</p>
<p><strong>Using the parser</strong></p>
<p>To use the use the parser, you&#8217;d simply include xbbcode.js and xbbcode.css files somewhere on your page (which are contained in the zip file linked above), and then call the XBBCODE object from somewhere in your JavaScript:</p>
<pre class="brush:js">
var result = XBBCODE.process({
    text: "Some bbcode to process here",
    removeMisalignedTags: false,
    addInLineBreaks: false
});
console.log("Errors: " + result.error);
console.dir(result.errorQueue);
console.log(result.html);// the HTML form of your BBCode
</pre>
<p><strong>Adding new tags</strong></p>
<p>To add a new tag to your BBCode, add properties to the &#8220;tags&#8221; object inside of the XBBCODE object. For example, say you wanted to add a tag called [googleit] which would change its contents into a link of its google search results. You&#8217;d implement that by adding this to the tags object:</p>
<pre class="brush:js">
"googleit": {
    openTag: function(params,content) {
        var website = "\"http://www.google.com/#q=" + content + '"';
        return '&lt;a href=' + website + '>';
    },
    closeTag: function(params,content) {
        return '&lt;/a>';
    }
}
</pre>
<p>Then you could have BBCode like this: &#8220;[googleit]ta-da![/googleit]&#8221; which would be transformed into this: &#8220;&lt;a href=&#8221;http://www.google.com/#q=ta-da!&#8221;>ta-da!&lt;/a>&#8221;</p>
<p>If you have any suggestions or find any bugs let me know.</p>
<img src="http://feeds.feedburner.com/~r/patorjk/~4/ymWIB9mABV8" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://patorjk.com/blog/2011/05/07/extendible-bbcode-parser-in-javascript/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		<feedburner:origLink>http://patorjk.com/blog/2011/05/07/extendible-bbcode-parser-in-javascript/</feedburner:origLink></item>
		<item>
		<title>“HTML5: Up and Running” Book Review</title>
		<link>http://feedproxy.google.com/~r/patorjk/~3/qyCJd9-lnVI/</link>
		<comments>http://patorjk.com/blog/2011/05/07/html5-up-and-running-book-review/#comments</comments>
		<pubDate>Sat, 07 May 2011 19:30:56 +0000</pubDate>
		<dc:creator>patorjk</dc:creator>
				<category><![CDATA[Book Reviews]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://patorjk.com/blog/?p=1118</guid>
		<description><![CDATA[I&#8217;ve read a decent number of articles on what will be new in HTML5. I&#8217;ve read up on the canvas element, localStorage, web workers, and a couple of the other elements one can use when creating Chrome Web Browser Extensions (for when I created my Typing Speed Monitor and Image Definitions for Dictionaries extensions). However, [...]]]></description>
			<content:encoded><![CDATA[<p><div id="attachment_1119" class="wp-caption alignleft" style="width: 190px"><a href="http://www.amazon.com/gp/product/0596806027/ref=as_li_ss_tl?ie=UTF8&#038;tag=patorjkcom-20&#038;linkCode=as2&#038;camp=217145&#038;creative=399349&#038;creativeASIN=0596806027"><img src="http://patorjk.com/blog/wp-content/uploads/2011/05/html5_upandrunning.gif" alt="" title="HTML5: Up and Running" width="180" height="236" class="size-full wp-image-1119" /></a><p class="wp-caption-text">HTML5: Up and Running</p></div> I&#8217;ve read a decent number of articles on what will be new in HTML5. I&#8217;ve read up on the canvas element, localStorage, web workers, and a couple of the other elements one can use when creating Chrome Web Browser Extensions (for when I created my <a href="http://patorjk.com/blog/2010/09/25/chrome-typing-speed-monitor/">Typing Speed Monitor</a> and <a href="http://patorjk.com/blog/2010/10/11/image-definitions-for-dictionaries/">Image Definitions for Dictionaries</a> extensions). </p>
<p>However, I hadn&#8217;t really sat down and taken the time to thoroughly go through all the goodies that are planned for/coming with HTML5. So when my office mate showed me a huge pile of books he had just purchased, I saw the one titled <a href="http://www.amazon.com/gp/product/0596806027/ref=as_li_ss_tl?ie=UTF8&#038;tag=patorjkcom-20&#038;linkCode=as2&#038;camp=217145&#038;creative=399349&#038;creativeASIN=0596806027">HTML5: Up and Running</a><img src="http://www.assoc-amazon.com/e/ir?t=&#038;l=as2&#038;o=1&#038;a=0596806027&#038;camp=217145&#038;creative=399349" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />and got kind of curious. After flipping through it, I found out that its also available online for free under the title of <a href="http://diveintohtml5.org/">Dive into HTML5</a>, but I ended up ordering my own copy since I prefer to read the paper editions. However, a good number of resources are linked to, so a digital version of the book is somewhat advantageous. </p>
<p>Anyway, the book starts off with some history on how HTML developed. It goes through an old thread in a 1993 W3C mailing list archive, where participants were discussing the creation of image tag. Essentially no one could really agree on how it should be setup (Should it be img, icon or include? Should its properties be src or href?), and ultimately an author of <a href="http://en.wikipedia.org/wiki/Mosaic_(web_browser)">Mosaic</a> (an early web browser) decided to just use what he had initially proposed and shipped his browser with a working img tag. The point of the story is to show you that HTML isn&#8217;t this carefully crafted language, it&#8217;s based on discussion, but many of its features came about simply because a popular web browser decided to stand behind them.</p>
<p>The next chapter discusses how you as a developer can use the new HTML5 tags in your web pages today, and still have your site be backward compatible with older browsers. It uses a JavaScript technique to do this, however, there are a couple of ways to use the new tags and be backwards compatible, some of which you can read about <a href="http://www.nczonline.net/blog/2011/03/22/using-html5-semantic-elements-today/">here</a>.</p>
<p>The rest of the book focuses on giving introductions to the various new features you&#8217;ll have access to in HTML5, specifically: the canvas element, the video tag, the geolocation API, the localStorage element, how to setup your site for offline storage, all the new form elements, and how microdata works. These discussions are all pretty good, though I especially liked the chapter on the video tag. I didn&#8217;t really know much about the different video formats going into the chapter, so it was nice to have a high level discussion on how videos are encoded. It was also interesting to have the author touch on the licensing issues of H.264 video. After reading about all the fees involved, especially those possibly coming after Dec. 31, 2015, it seems like it&#8217;d be a bad format to use as a standard. </p>
<p>Overall I liked the book and would recommend checking it out if you&#8217;re curious about using and playing around with the currently available features of HTML5.</p>
<img src="http://feeds.feedburner.com/~r/patorjk/~4/qyCJd9-lnVI" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://patorjk.com/blog/2011/05/07/html5-up-and-running-book-review/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<feedburner:origLink>http://patorjk.com/blog/2011/05/07/html5-up-and-running-book-review/</feedburner:origLink></item>
	</channel>
</rss>

