<?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>zuzara</title> <link>http://zuzara.com/blog</link> <description>code and thoughts</description> <lastBuildDate>Fri, 03 Feb 2012 20:58:27 +0000</lastBuildDate> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/zuzara" /><feedburner:info uri="zuzara" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><item><title>Built a tiny website that shows iPhone apps featured in @TechCrunch</title><link>http://feedproxy.google.com/~r/zuzara/~3/op5D0Jxdwf8/</link> <comments>http://zuzara.com/blog/2012/02/03/built-a-tiny-website-that-shows-iphone-apps-featured-in-techcrunch/#comments</comments> <pubDate>Fri, 03 Feb 2012 20:58:27 +0000</pubDate> <dc:creator>Nobu</dc:creator> <category><![CDATA[Create]]></category> <guid isPermaLink="false">http://zuzara.com/blog/?p=418</guid> <description><![CDATA[iPhone Apps Featured in @TechCrunch This website shows bunch of iPhone apps that are featured in TechCrunch. Top 25 apps on App Store is usually filled by games but those are not very attractive to me. TechCrunch writes about iPhone apps which were made by brand new startups, and I like to check them out. [...]]]></description> <content:encoded><![CDATA[<p><strong><a
href="http://tced.heroku.com/">iPhone Apps Featured in @TechCrunch</a></strong></p><p>This website shows bunch of iPhone apps that are featured in TechCrunch. Top 25 apps on App Store is usually filled by games but those are not very attractive to me. TechCrunch writes about iPhone apps which were made by brand new startups, and I like to check them out. So, to check those apps easily <a
href="http://tced.heroku.com/">here&#8217;s this website</a>.</p> <img src="http://feeds.feedburner.com/~r/zuzara/~4/op5D0Jxdwf8" height="1" width="1"/>]]></content:encoded> <wfw:commentRss>http://zuzara.com/blog/2012/02/03/built-a-tiny-website-that-shows-iphone-apps-featured-in-techcrunch/feed/</wfw:commentRss> <slash:comments>0</slash:comments> <feedburner:origLink>http://zuzara.com/blog/2012/02/03/built-a-tiny-website-that-shows-iphone-apps-featured-in-techcrunch/</feedburner:origLink></item> <item><title>35 Live Flipped Classrooms</title><link>http://feedproxy.google.com/~r/zuzara/~3/6ury78B93hc/</link> <comments>http://zuzara.com/blog/2012/01/04/35-live-flipped-classrooms/#comments</comments> <pubDate>Wed, 04 Jan 2012 19:48:27 +0000</pubDate> <dc:creator>Nobu</dc:creator> <category><![CDATA[Tweak]]></category> <category><![CDATA[flipped classroom]]></category> <guid isPermaLink="false">http://zuzara.com/blog/?p=409</guid> <description><![CDATA[Here are 35 live examples of Flipped Classroom, and still counting. The order doesn&#8217;t mean anything. Table view Open with Google Spreadsheet Hope it saves educators&#8217; research time. I&#8217;ve tried to find school/teacher name, location, grade, subject, tools and data/feedback for each example. Some cells are still blank. Please let me know if you&#8217;d like [...]]]></description> <content:encoded><![CDATA[<p>Here are 35 live examples of Flipped Classroom, and still counting. The order doesn&#8217;t mean anything.</p><ul><li><a
href="https://docs.google.com/spreadsheet/pub?hl=en_US&amp;hl=en_US&amp;key=0AoF4K1soAzUBdENEUVczdE1Bd0MtbG1hY3BuQ3BTY2c&amp;single=true&amp;gid=0&amp;output=html">Table view</a></li><li><a
href="https://docs.google.com/spreadsheet/ccc?key=0AoF4K1soAzUBdENEUVczdE1Bd0MtbG1hY3BuQ3BTY2c">Open with Google Spreadsheet</a></li></ul><p>Hope it saves educators&#8217; research time. I&#8217;ve tried to find school/teacher name, location, grade, subject, tools and data/feedback for each example. Some cells are still blank. Please let me know if you&#8217;d like to edit. I&#8217;ll give you editor permission.</p><p>The below researches does not only cover Flipped Classroom, but I thought useful.</p><ul><li><a
href="http://www.innosightinstitute.org/media-room/publications/blended-learning/">Blended-Learning Profiles</a></li><li><a
href="http://www2.ed.gov/rschstat/eval/tech/evidence-based-practices/finalreport.pdf">Evaluation of Evidence-Based Practices in Online Learning</a> (pdf)</li></ul> <img src="http://feeds.feedburner.com/~r/zuzara/~4/6ury78B93hc" height="1" width="1"/>]]></content:encoded> <wfw:commentRss>http://zuzara.com/blog/2012/01/04/35-live-flipped-classrooms/feed/</wfw:commentRss> <slash:comments>0</slash:comments> <feedburner:origLink>http://zuzara.com/blog/2012/01/04/35-live-flipped-classrooms/</feedburner:origLink></item> <item><title>Upgrade MongoDB 1.8 to 2.0 on CentOS5.7</title><link>http://feedproxy.google.com/~r/zuzara/~3/xZ0EEadzWoo/</link> <comments>http://zuzara.com/blog/2011/11/22/upgrade-mongodb-1-8-to-2-0-on-centos5-7/#comments</comments> <pubDate>Wed, 23 Nov 2011 00:25:05 +0000</pubDate> <dc:creator>Nobu</dc:creator> <category><![CDATA[Tweak]]></category> <guid isPermaLink="false">http://zuzara.com/blog/?p=379</guid> <description><![CDATA[As 2.0 Release Notes mentions, it required to remove 1.8 first. % sudo yum remove mongo-stable-20110131-mongodb_1 % vi /etc/yum.repos.d/10gen.repo % cat /etc/yum.repos.d/10gen.repo &#91;10gen&#93; name=10gen Repository baseurl=http://downloads-distro.mongodb.org/repo/redhat/os/x86_64 gpgcheck=0 % sudo yum install mongo-10gen-server When I tried to yum update mongo-stable, got conflict error &#8220;Error: mongo18-10gen conflicts with mongo-10gen&#8221;. I also needed to rewrite yum repository since [...]]]></description> <content:encoded><![CDATA[<p><a
href="http://www.mongodb.org/display/DOCS/2.0+Release+Notes">As 2.0 Release Notes mentions</a>, it required to remove 1.8 first.</p><div
class="wp_syntax"><div
class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">%</span> <span style="color: #c20cb9; font-weight: bold;">sudo</span> yum remove mongo-stable-<span style="color: #000000;">20110131</span>-mongodb_1
<span style="color: #000000; font-weight: bold;">%</span> <span style="color: #c20cb9; font-weight: bold;">vi</span> <span style="color: #000000; font-weight: bold;">/</span>etc<span style="color: #000000; font-weight: bold;">/</span>yum.repos.d<span style="color: #000000; font-weight: bold;">/</span>10gen.repo
<span style="color: #000000; font-weight: bold;">%</span> <span style="color: #c20cb9; font-weight: bold;">cat</span> <span style="color: #000000; font-weight: bold;">/</span>etc<span style="color: #000000; font-weight: bold;">/</span>yum.repos.d<span style="color: #000000; font-weight: bold;">/</span>10gen.repo
<span style="color: #7a0874; font-weight: bold;">&#91;</span>10gen<span style="color: #7a0874; font-weight: bold;">&#93;</span>
<span style="color: #007800;">name</span>=10gen Repository
<span style="color: #007800;">baseurl</span>=http:<span style="color: #000000; font-weight: bold;">//</span>downloads-distro.mongodb.org<span style="color: #000000; font-weight: bold;">/</span>repo<span style="color: #000000; font-weight: bold;">/</span>redhat<span style="color: #000000; font-weight: bold;">/</span>os<span style="color: #000000; font-weight: bold;">/</span>x86_64
<span style="color: #007800;">gpgcheck</span>=<span style="color: #000000;">0</span>
<span style="color: #000000; font-weight: bold;">%</span> <span style="color: #c20cb9; font-weight: bold;">sudo</span> yum <span style="color: #c20cb9; font-weight: bold;">install</span> mongo-10gen-server</pre></div></div><p>When I tried to yum update mongo-stable, got conflict error &#8220;Error: mongo18-10gen conflicts with mongo-10gen&#8221;. I also needed to rewrite yum repository since my old config pointed at baseurl=http://downloads.mongodb.org/distros/centos/5.4/os/x86_64/.</p><p>It seems epel repository has mongodb package, when you &#8220;yum search mongo&#8221; you&#8217;ll probably find mongodb package aside from mongo-10gen which is a bit confusing.</p> <img src="http://feeds.feedburner.com/~r/zuzara/~4/xZ0EEadzWoo" height="1" width="1"/>]]></content:encoded> <wfw:commentRss>http://zuzara.com/blog/2011/11/22/upgrade-mongodb-1-8-to-2-0-on-centos5-7/feed/</wfw:commentRss> <slash:comments>0</slash:comments> <feedburner:origLink>http://zuzara.com/blog/2011/11/22/upgrade-mongodb-1-8-to-2-0-on-centos5-7/</feedburner:origLink></item> <item><title>Watir + Cucumber environment</title><link>http://feedproxy.google.com/~r/zuzara/~3/uXrjQFhMkys/</link> <comments>http://zuzara.com/blog/2011/10/27/watir-cucumber-environment/#comments</comments> <pubDate>Thu, 27 Oct 2011 20:48:11 +0000</pubDate> <dc:creator>Nobu</dc:creator> <category><![CDATA[Tweak]]></category> <guid isPermaLink="false">http://zuzara.com/blog/?p=371</guid> <description><![CDATA[/Users/nobu/.rvm/gems/ruby-1.9.2-p290/gems/selenium-webdriver-2.9.1/lib/selenium/webdriver/firefox/launcher.rb:77:in `connect_until_stable': unable to obtain stable firefox connection in 60 seconds (127.0.0.1:7055) (Selenium::WebDriver::Error::WebDriverError) I got this error with Firefox 8 (beta channel). With 7.0.1 which is the stable version, works well. On this article it uses Celerity, but it gets the below error: % HEADLESS=1 cucumber Celerity only works on JRuby at the moment. &#40;RuntimeError&#41; [...]]]></description> <content:encoded><![CDATA[<p><code>/Users/nobu/.rvm/gems/ruby-1.9.2-p290/gems/selenium-webdriver-2.9.1/lib/selenium/webdriver/firefox/launcher.rb:77:in `connect_until_stable': unable to obtain stable firefox connection in 60 seconds (127.0.0.1:7055) (Selenium::WebDriver::Error::WebDriverError)</code></p><p>I got this error with Firefox 8 (beta channel). With 7.0.1 which is the stable version, works well.</p><p>On <a
href="http://watirmelon.com/2011/01/21/my-simple-cucumber-watir-page-object-pattern-framework/">this article</a> it uses Celerity, but it gets the below error:</p><div
class="wp_syntax"><div
class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">%</span> <span style="color: #007800;">HEADLESS</span>=<span style="color: #000000;">1</span> cucumber
Celerity only works on JRuby at the moment. <span style="color: #7a0874; font-weight: bold;">&#40;</span>RuntimeError<span style="color: #7a0874; font-weight: bold;">&#41;</span></pre></div></div><p>Actually <a
href="https://github.com/alisterscott/WatirMelonCucumber">his source code</a> looks different from his original one on the article. I couldn&#8217;t find Celerity in the latest codes.</p><p>I&#8217;m still exploring.</p> <img src="http://feeds.feedburner.com/~r/zuzara/~4/uXrjQFhMkys" height="1" width="1"/>]]></content:encoded> <wfw:commentRss>http://zuzara.com/blog/2011/10/27/watir-cucumber-environment/feed/</wfw:commentRss> <slash:comments>3</slash:comments> <feedburner:origLink>http://zuzara.com/blog/2011/10/27/watir-cucumber-environment/</feedburner:origLink></item> <item><title>“–coverage-html” option doesn’t run on PHPUnit 3.6.0RC4</title><link>http://feedproxy.google.com/~r/zuzara/~3/dLYeYGifaSc/</link> <comments>http://zuzara.com/blog/2011/10/15/coverage-html-option-doesnt-run-on-phpunit-3-6-0rc4/#comments</comments> <pubDate>Sat, 15 Oct 2011 22:44:09 +0000</pubDate> <dc:creator>Nobu</dc:creator> <category><![CDATA[Tweak]]></category> <guid isPermaLink="false">http://zuzara.com/blog/?p=365</guid> <description><![CDATA[3.6RC4 has a bug in line 288 of TextUI/Command.php. --coverage-html option isn&#8217;t parsed correctly. Even I fixes the misspelling it causes another error, and also the latest source code on Github looks very different from RC4, so I just gave up to use RC4. Upgrade to 3.6RC4 from 3.5 took some time and downgrade as [...]]]></description> <content:encoded><![CDATA[<p>3.6RC4 has a bug in line 288 of TextUI/Command.php. <code>--coverage-html</code> option isn&#8217;t parsed correctly. Even I fixes the misspelling it causes another error, and also <a
href="https://github.com/sebastianbergmann/phpunit/">the latest source code on Github</a> looks very different from RC4, so I just gave up to use RC4.</p><p>Upgrade to 3.6RC4 from 3.5 took some time and downgrade as well.</p><div
class="wp_syntax"><div
class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">%</span> pear uninstall phpunit<span style="color: #000000; font-weight: bold;">/</span>PHPUnit
<span style="color: #000000; font-weight: bold;">%</span> pear config-set preferred_state beta
<span style="color: #000000; font-weight: bold;">%</span> pear <span style="color: #c20cb9; font-weight: bold;">install</span> phpunit<span style="color: #000000; font-weight: bold;">/</span>PHPUnit
<span style="color: #000000; font-weight: bold;">%</span> pear upgrade <span style="color: #660033;">--alldeps</span> <span style="color: #660033;">-f</span></pre></div></div><div
class="wp_syntax"><div
class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">%</span> pear uninstall ... <span style="color: #666666; font-style: italic;"># Not sure if this was the easiest way, I just uninstall all dependencies individually</span>
<span style="color: #000000; font-weight: bold;">%</span> pear config-set preferred_state stable
<span style="color: #000000; font-weight: bold;">%</span> pear <span style="color: #c20cb9; font-weight: bold;">install</span> <span style="color: #660033;">--alldeps</span> phpunit<span style="color: #000000; font-weight: bold;">/</span>PHPUnit</pre></div></div><div
class="wp_syntax"><div
class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">%</span> phpunit <span style="color: #660033;">--coverage-html</span> .<span style="color: #000000; font-weight: bold;">/</span>report BankAccountTest
<span style="color: #000000; font-weight: bold;">%</span> <span style="color: #7a0874; font-weight: bold;">cd</span> report
<span style="color: #000000; font-weight: bold;">%</span> python <span style="color: #660033;">-m</span> SimpleHTTPServer <span style="color: #000000;">9090</span></pre></div></div> <img src="http://feeds.feedburner.com/~r/zuzara/~4/dLYeYGifaSc" height="1" width="1"/>]]></content:encoded> <wfw:commentRss>http://zuzara.com/blog/2011/10/15/coverage-html-option-doesnt-run-on-phpunit-3-6-0rc4/feed/</wfw:commentRss> <slash:comments>0</slash:comments> <feedburner:origLink>http://zuzara.com/blog/2011/10/15/coverage-html-option-doesnt-run-on-phpunit-3-6-0rc4/</feedburner:origLink></item> <item><title>“TypeError: ‘undefined’ is not an object” in JavaScript on Safari</title><link>http://feedproxy.google.com/~r/zuzara/~3/8sItGV9NZ1Y/</link> <comments>http://zuzara.com/blog/2011/10/11/typeerror-undefined-is-not-an-object-in-javascript-on-safari/#comments</comments> <pubDate>Wed, 12 Oct 2011 06:58:08 +0000</pubDate> <dc:creator>Nobu</dc:creator> <category><![CDATA[Tweak]]></category> <guid isPermaLink="false">http://zuzara.com/blog/?p=361</guid> <description><![CDATA[jquery-tmpl causes the below error when wrap is called like {{wrap () "#id"}} on Safari (5.1). It should be {{wrap "#id"}}. No parentheses. On Chrome, it works well either way. jquery-tmpl is no longer actively developed, so I should use jsrender or something else anyways. TypeError: 'undefined' is not an object (evaluating 'call._')]]></description> <content:encoded><![CDATA[<p><a
href="https://github.com/jquery/jquery-tmpl">jquery-tmpl</a> causes the below error when wrap is called like <code>{{wrap () "#id"}}</code> on Safari (5.1). It should be <code>{{wrap "#id"}}</code>. No parentheses. On Chrome, it works well either way. jquery-tmpl is no longer actively developed, so I should use <a
href="https://github.com/BorisMoore/jsrender">jsrender</a> or something else anyways.</p><p><code>TypeError: 'undefined' is not an object (evaluating 'call._')</code></p> <img src="http://feeds.feedburner.com/~r/zuzara/~4/8sItGV9NZ1Y" height="1" width="1"/>]]></content:encoded> <wfw:commentRss>http://zuzara.com/blog/2011/10/11/typeerror-undefined-is-not-an-object-in-javascript-on-safari/feed/</wfw:commentRss> <slash:comments>0</slash:comments> <feedburner:origLink>http://zuzara.com/blog/2011/10/11/typeerror-undefined-is-not-an-object-in-javascript-on-safari/</feedburner:origLink></item> <item><title>Jasmine install memo</title><link>http://feedproxy.google.com/~r/zuzara/~3/RidGOka5OMQ/</link> <comments>http://zuzara.com/blog/2011/09/29/jasmine-install-memo/#comments</comments> <pubDate>Fri, 30 Sep 2011 04:27:33 +0000</pubDate> <dc:creator>Nobu</dc:creator> <category><![CDATA[Tweak]]></category> <guid isPermaLink="false">http://zuzara.com/blog/?p=355</guid> <description><![CDATA[Jasmine + Sinon.JS looks neat. I just tried to play around on Amazon AMI. yum install ruby-devel rubygems gem install rspec-expectations gem install rake cd working-directory cd tests jasmine init rake jasmine your-laptop:% ssh sandbox -L 10000:127.0.0.1:8888 Access http://127.0.0.1:10000/ from your browser.]]></description> <content:encoded><![CDATA[<p><a
href="http://pivotal.github.com/jasmine/">Jasmine</a> + <a
href="http://sinonjs.org/">Sinon.JS</a> looks neat. I just tried to play around on Amazon AMI.</p><div
class="wp_syntax"><div
class="code"><pre class="bash" style="font-family:monospace;">yum <span style="color: #c20cb9; font-weight: bold;">install</span> ruby-devel rubygems
gem <span style="color: #c20cb9; font-weight: bold;">install</span> rspec-expectations
gem <span style="color: #c20cb9; font-weight: bold;">install</span> rake
<span style="color: #7a0874; font-weight: bold;">cd</span> working-directory
<span style="color: #7a0874; font-weight: bold;">cd</span> tests
jasmine init
rake jasmine
your-laptop:<span style="color: #000000; font-weight: bold;">%</span> <span style="color: #c20cb9; font-weight: bold;">ssh</span> sandbox <span style="color: #660033;">-L</span> <span style="color: #000000;">10000</span>:127.0.0.1:<span style="color: #000000;">8888</span></pre></div></div><p>Access http://127.0.0.1:10000/ from your browser.</p> <img src="http://feeds.feedburner.com/~r/zuzara/~4/RidGOka5OMQ" height="1" width="1"/>]]></content:encoded> <wfw:commentRss>http://zuzara.com/blog/2011/09/29/jasmine-install-memo/feed/</wfw:commentRss> <slash:comments>0</slash:comments> <feedburner:origLink>http://zuzara.com/blog/2011/09/29/jasmine-install-memo/</feedburner:origLink></item> <item><title>A Chrome Extension: Keyboard Shortcuts for Facebook</title><link>http://feedproxy.google.com/~r/zuzara/~3/cfwV8YP8BW8/</link> <comments>http://zuzara.com/blog/2011/09/21/a-chrome-extension-keyboard-shortcuts-for-facebook/#comments</comments> <pubDate>Wed, 21 Sep 2011 08:07:27 +0000</pubDate> <dc:creator>Nobu</dc:creator> <category><![CDATA[Create]]></category> <guid isPermaLink="false">http://zuzara.com/blog/?p=349</guid> <description><![CDATA[The Chrome extension provides Gmail like keyboard shortcuts for Facebook. Currently it supports: j: down one item on your News Feed k: up u: jump to the top Download via Google Web Store Source code Thanks! keyboard icons]]></description> <content:encoded><![CDATA[<p><a
href="http://zuzara.com/blog/wp-content/uploads/2011/09/Untitled-2.png"><img
src="http://zuzara.com/blog/wp-content/uploads/2011/09/Untitled-2.png" alt="" title="Screenshot" width="440" height="280" class="alignnone size-full wp-image-350" /></a><br
/> The Chrome extension provides Gmail like keyboard shortcuts for Facebook. Currently it supports:</p><ul><li>j: down one item on your News Feed</li><li>k: up</li><li>u: jump to the top</li></ul><ul><li><a
href="https://chrome.google.com/webstore/detail/bjfnkbhnmhblmehgnnjglihlgcoiladc">Download via Google Web Store</a></li><li><a
href="https://github.com/zuzara/Keyboard-Shortcuts-for-Facebook">Source code</a></li></ul><p>Thanks!</p><ul><li><a
href="http://www.iconfinder.com/icondetails/64397/32/key_u_icon">keyboard icons</a></li></ul> <img src="http://feeds.feedburner.com/~r/zuzara/~4/cfwV8YP8BW8" height="1" width="1"/>]]></content:encoded> <wfw:commentRss>http://zuzara.com/blog/2011/09/21/a-chrome-extension-keyboard-shortcuts-for-facebook/feed/</wfw:commentRss> <slash:comments>0</slash:comments> <feedburner:origLink>http://zuzara.com/blog/2011/09/21/a-chrome-extension-keyboard-shortcuts-for-facebook/</feedburner:origLink></item> <item><title>Slanted tabular menu with CSS3</title><link>http://feedproxy.google.com/~r/zuzara/~3/NMSj8TN-syA/</link> <comments>http://zuzara.com/blog/2011/07/30/slanted-tabular-menu-with-css3/#comments</comments> <pubDate>Sun, 31 Jul 2011 01:08:27 +0000</pubDate> <dc:creator>Nobu</dc:creator> <category><![CDATA[Create]]></category> <guid isPermaLink="false">http://zuzara.com/blog/?p=343</guid> <description><![CDATA[Some of variables are hard coded. To make it flexible, you may want to use JavaScript. The demo is a vertical menu, but making a horizontal menu shouldn&#8217;t be difficult. &#60;div style=&#34;margin-top:100px;&#34; class=&#34;slant&#34;&#62; &#60;div class=&#34;contents first&#34;&#62;menu1&#60;/div&#62; &#60;/div&#62; &#60;div class=&#34;slant second&#34;&#62; &#60;div class=&#34;contents&#34;&#62;menu2&#60;/div&#62; &#60;/div&#62; div.slant &#123; width: 150px; height: 100px; -moz-transform: matrix&#40;1, -0.2, 0, 1, 0, [...]]]></description> <content:encoded><![CDATA[<p>Some of variables are hard coded. To make it flexible, you may want to use JavaScript. The demo is a vertical menu, but making a horizontal menu shouldn&#8217;t be difficult.</p><div
class="wp_syntax"><div
class="code"><pre class="html" style="font-family:monospace;">&lt;div style=&quot;margin-top:100px;&quot; class=&quot;slant&quot;&gt;
    &lt;div class=&quot;contents first&quot;&gt;menu1&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;slant second&quot;&gt;
    &lt;div class=&quot;contents&quot;&gt;menu2&lt;/div&gt;
&lt;/div&gt;</pre></div></div><div
class="wp_syntax"><div
class="code"><pre class="css" style="font-family:monospace;">div<span style="color: #6666ff;">.slant</span> <span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">150px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">100px</span><span style="color: #00AA00;">;</span>
    -moz-transform<span style="color: #00AA00;">:</span> matrix<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">,</span> -<span style="color: #cc66cc;">0.2</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">1</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
 -webkit-transform<span style="color: #00AA00;">:</span> matrix<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">,</span> -<span style="color: #cc66cc;">0.2</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">1</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
      -o-transform<span style="color: #00AA00;">:</span> matrix<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">,</span> -<span style="color: #cc66cc;">0.2</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">1</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
     -ms-transform<span style="color: #00AA00;">:</span> matrix<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">,</span> -<span style="color: #cc66cc;">0.2</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">1</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
         transform<span style="color: #00AA00;">:</span> matrix<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">,</span> -<span style="color: #cc66cc;">0.2</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">1</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> gold<span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
div<span style="color: #6666ff;">.contents</span> <span style="color: #00AA00;">&#123;</span>
    -moz-transform<span style="color: #00AA00;">:</span> matrix<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0.2</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">1</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
 -webkit-transform<span style="color: #00AA00;">:</span> matrix<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0.2</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">1</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
      -o-transform<span style="color: #00AA00;">:</span> matrix<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0.2</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">1</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
     -ms-transform<span style="color: #00AA00;">:</span> matrix<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0.2</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">1</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
         transform<span style="color: #00AA00;">:</span> matrix<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0.2</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">1</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">transparent</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">padding-top</span><span style="color: #00AA00;">:</span> <span style="color: #933;">20px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
div<span style="color: #6666ff;">.first</span> <span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> gold<span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">relative</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">:</span> <span style="color: #933;">-15px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">min-height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">30px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
div<span style="color: #6666ff;">.second</span> <span style="color: #00AA00;">&#123;</span>
     <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> brown<span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div><p><strong><a
href="http://jsfiddle.net/zuzara/y6zCD/">Demo</a></strong>. <a
href="https://developer.mozilla.org/en/CSS/-moz-transform">CSS reference</a>.</p> <img src="http://feeds.feedburner.com/~r/zuzara/~4/NMSj8TN-syA" height="1" width="1"/>]]></content:encoded> <wfw:commentRss>http://zuzara.com/blog/2011/07/30/slanted-tabular-menu-with-css3/feed/</wfw:commentRss> <slash:comments>0</slash:comments> <feedburner:origLink>http://zuzara.com/blog/2011/07/30/slanted-tabular-menu-with-css3/</feedburner:origLink></item> <item><title>Grabio: A Twitter Bio Update Notifier</title><link>http://feedproxy.google.com/~r/zuzara/~3/m0X1ga9iR2A/</link> <comments>http://zuzara.com/blog/2011/07/26/grabio-a-twitter-bio-update-notifier/#comments</comments> <pubDate>Wed, 27 Jul 2011 06:17:10 +0000</pubDate> <dc:creator>Nobu</dc:creator> <category><![CDATA[Create]]></category> <guid isPermaLink="false">http://zuzara.com/blog/?p=321</guid> <description><![CDATA[Grabio sends notifications via email when your followings update their bio on Twitter. I&#8217;ve collaborated with @Tbakdesigns through Builditwith.me. In my experience, people update their bio when something big happened. I&#8217;m following more than 100 people and to be honest, I check quite rarely. But I would like to know their big updates like started [...]]]></description> <content:encoded><![CDATA[<p><strong><a
href="http://grabio.co/">Grabio</a></strong> sends notifications via email when your followings update their bio on Twitter. I&#8217;ve collaborated with <a
href="http://twitter.com/#!/Tbakdesigns">@Tbakdesigns</a> through <a
href="http://builditwith.me/">Builditwith.me</a>.</p><p><a
href="http://grabio.co/"><img
src="http://zuzara.com/blog/wp-content/uploads/2011/07/grabio.png" alt="" title="Grabio" width="528" height="326" class="alignnone size-full wp-image-323" /></a><br
/> In my experience, people update their bio when something big happened. I&#8217;m following more than 100 people and to be honest, I check quite rarely. But I would like to know their big updates like started a new company, moved to somewhere or found another hobby. So, <a
href="http://grabio.co/">Grabio</a> is here.</p><p>It is a dead simple application, just signup with Twitter account and enter your email address. You won&#8217;t get more than an email per a day. The contents of notifications would look like an output of &#8216;diff&#8217; command.</p><p><a
href="http://grabio.co/">Check Grabio out</a> <img
src='http://zuzara.com/blog/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /></p> <img src="http://feeds.feedburner.com/~r/zuzara/~4/m0X1ga9iR2A" height="1" width="1"/>]]></content:encoded> <wfw:commentRss>http://zuzara.com/blog/2011/07/26/grabio-a-twitter-bio-update-notifier/feed/</wfw:commentRss> <slash:comments>0</slash:comments> <feedburner:origLink>http://zuzara.com/blog/2011/07/26/grabio-a-twitter-bio-update-notifier/</feedburner:origLink></item> </channel> </rss>

