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

<channel>
	<title>qrisper &#187; nettuts</title>
	<atom:link href="http://blog.qrisper.com/tag/nettuts/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.qrisper.com</link>
	<description>the making of qrisper.com</description>
	<lastBuildDate>Fri, 14 Aug 2009 22:32:50 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.3</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>To procrastinate is to procreate ideas in your brain</title>
		<link>http://blog.qrisper.com/2009/05/to-procrastinate-is-to-procreate-ideas-in-your-brain/</link>
		<comments>http://blog.qrisper.com/2009/05/to-procrastinate-is-to-procreate-ideas-in-your-brain/#comments</comments>
		<pubDate>Mon, 25 May 2009 03:37:21 +0000</pubDate>
		<dc:creator>Jung Lee</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[htaccess]]></category>
		<category><![CDATA[mod-rewrite]]></category>
		<category><![CDATA[nettuts]]></category>
		<category><![CDATA[pagination]]></category>
		<category><![CDATA[stack overflow]]></category>
		<category><![CDATA[thumbnails]]></category>
		<category><![CDATA[validation]]></category>

		<guid isPermaLink="false">http://blog.qrisper.com/?p=143</guid>
		<description><![CDATA[I don&#8217;t know if this is how it works for other people but the less I think about a problem, the faster I can find a solution for it.  It&#8217;s like anytime I try to figure out a problem through sheer will and forceful brain flexing, I&#8217;m left beaten and frustrated.  But take a game [...]]]></description>
			<content:encoded><![CDATA[<p>I don&#8217;t know if this is how it works for other people but the less I think about a problem, the faster I can find a solution for it.  It&#8217;s like anytime I try to figure out a problem through sheer will and forceful brain flexing, I&#8217;m left beaten and frustrated.  But take a game break, surf the web or complete forget about the problem for a few days and the next time I approach the problem, it&#8217;s like it never was one.  Further evidence that procrastination is <em>the </em>method of creative geniuses?</p>
<p>Anyway, I made a number of breakthroughs during the past few weeks in my quest for the most frickin amazing website on the planet.  First off, I&#8217;m definitely getting more comfortable with ajax, as you can see from the registration validation that I&#8217;ve set up.  Never in my life did I think I&#8217;d be able to create a username and email check.  That was a great moment&#8230;<em>(wipes away a tear).</em> Thanks to <a title="yensdesign" href="http://yensdesign.com/2009/01/how-validate-forms-both-sides-using-php-jquery/">yensdesign.com</a>, <a title="roshans blog" href="http://roshanbh.com.np/2008/04/check-username-available-ajax-php-jquery.html">Roshan&#8217;s Blog</a> and <a title="amos" href="http://plasticpast.com/">the professor</a>.</p>
<p>Another pain in the ass was pagination.  I tried a number of techniques found <a title="php pagination" href="http://net.tutsplus.com/tutorials/php/how-to-paginate-data-with-php/#more-2928">here</a>, <a title="jquery pagination" href="http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm">here</a> and a few others.  But either I couldn&#8217;t get it working or simply didn&#8217;t like the implementation.  Finally decided on a pretty simple version of the existing pagination code that I was using.  One thing I&#8217;d like to add is the ability to dynamically hide page links when there are too many&#8230;hoping that will come to me eventually.</p>
<p>I&#8217;m finally making some headway in using mod-rewrite to take control of my urls.  All of the user profile pages can now be access through <strong>qrisper.com/<em>username</em>/</strong>.  Shout out to <a title="one frickin great resource" href="http://stackoverflow.com/users/107427/jung">Stack Overflow</a>, one frickin great resource.  Planning to use mod-rewrite across all of qrisper.com.  One concern is what kind of performance hit I&#8217;m taking using htaccess.  Will need to move that over to the Apache config file eventually.</p>
<p>In addition, a few other minor modifications:</p>
<ul>
<li>sanitized 99% of qrisper.com&#8230; there&#8217;s one or two pages that still need a thorough scrubbing but hoping to have eliminated most of the possibility for any funny business</li>
<li>users can now change their previously submitted answers</li>
<li>a few design/nav tweaks (tweet answer link, what&#8217;s your answer link, updates to answers/skipped/index pages</li>
</ul>
<p>And lastly, I was using this <a title="php dynamic thumbnails" href="http://net.tutsplus.com/videos/screencasts/how-to-dynamically-create-thumbnails/">solution to manage thumbnail images</a> from the always helpful folks at <a title="nettuts" href="http://net.tutsplus.com/">nettuts</a>.  But at point, I broke it.  Plus, I wasn&#8217;t complete satisfied with the quality of the thumbnails.  So now I&#8217;m using the <a title="shifting pixel" href="http://shiftingpixel.com/2008/03/03/smart-image-resizer/">ridiculously awesome Smart Image Resizer by Joe Lencioni</a>.</p>
<p>That was a meaty update.  Next up, a city filter for local questions on <a title="qrisper" href="http://qrisper.com">qrisper.com</a>!</p>
<p><strong>Update:</strong> Ha, speaking of which&#8230;<a title="procrastinate yay" href="http://nymag.com/news/features/56793/?imw=Y&amp;f=most-viewed-24h5">In Defense of Distraction</a>.</p>
<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.qrisper.com%2F2009%2F05%2Fto-procrastinate-is-to-procreate-ideas-in-your-brain%2F"><img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.qrisper.com%2F2009%2F05%2Fto-procrastinate-is-to-procreate-ideas-in-your-brain%2F" height="61" width="51" /></a></div>]]></content:encoded>
			<wfw:commentRss>http://blog.qrisper.com/2009/05/to-procrastinate-is-to-procreate-ideas-in-your-brain/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>By the power of jskill!</title>
		<link>http://blog.qrisper.com/2009/02/by-the-power-of-jskull/</link>
		<comments>http://blog.qrisper.com/2009/02/by-the-power-of-jskull/#comments</comments>
		<pubDate>Fri, 13 Feb 2009 03:58:02 +0000</pubDate>
		<dc:creator>Jung Lee</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[google ajax]]></category>
		<category><![CDATA[ietester]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[minify]]></category>
		<category><![CDATA[nettuts]]></category>
		<category><![CDATA[prototype]]></category>
		<category><![CDATA[scriptaculous]]></category>

		<guid isPermaLink="false">http://blog.qrisper.com/?p=54</guid>
		<description><![CDATA[Well, I succeeded in removing four images from the index page.  But I replace those with a couple of hundred lines of javascript.  Meh, what&#8217;re you gonna do.  Went a little nuts with jQuery.  I changed the forgot password link to do a little switchToggle animation.  I also replaced the [...]]]></description>
			<content:encoded><![CDATA[<p><a title="favorite zombie movie" href="http://qrisper.com/answers/favorite-zombie-movie-of-all-time/"><img class="alignright size-medium wp-image-55" title="favorite zombie movie" src="http://blog.qrisper.com/wp-content/uploads/2009/02/zombie-300x181.gif" alt="favorite zombie movie" width="300" height="181" /></a>Well, I succeeded in removing four images from the index page.  But I replace those with a couple of hundred lines of javascript.  Meh, what&#8217;re you gonna do.  Went a little nuts with jQuery.  I changed the forgot password link to do a little switchToggle animation.  I also replaced the original qrisper leaderboard ad, which used to be a simple onclick/onmouseover event, with a <a title="snazzy sliding panel" href="http://nettuts.com/tutorials/javascript-ajax/build-a-top-panel-with-jquery/">snazzy sliding panel</a>.  I think it gets the message across, don&#8217;t you?</p>
<p>But I didn&#8217;t stop there with the javascriptin.  I wasn&#8217;t happy with just having the recent answers in the left column.  So I added a <a title="cool accordion function" href="http://nettuts.com/tutorials/javascript-ajax/create-a-simple-intelligent-accordion-effect-using-prototype-and-scriptaculous/">cool accordion function</a>, this time using prototype/scriptaculous.  I saw another version using jquery but I liked this one better.  I think it&#8217;s pretty neat.  Except I couldn&#8217;t figure out how to set the max height for the content (that&#8217;s why the recent answers heading isn&#8217;t sitting flush against the bottom).  I decided to leave it as is since it doesn&#8217;t look that bad.</p>
<p>The problem with the accordion function, however, is that as soon as the user clicks on on of the recent answers links, the page will load and the recent answers column will reset back to the bottom.  Not very user-friendly.  So I figured I&#8217;d add a dash of ajax and make the recent answers links load on the screen without a page refresh.  I found another <a title="ajax with jquery" href="http://nettuts.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/">handy tutorial on Nettuts</a> that did just that.  But the source code appears to have gone through a number of revisions, with the final version incompatible with the current versions of IE7 and Safari.  Looks great on Firefox though!</p>
<p>All of these javascript functions were weight my site down.  So I looked into ways to optimize the handling of my source codes.  Initially, I was using <a title="google minify" href="http://code.google.com/p/minify/">Google&#8217;s Minify</a> to minfiy my code.  But then I discovered that Google also hosts most of the popular javascript libraries.  So instead of attaching a copy of those files, you can link to Google hosted copies.  Those are already minified and could potentially provide a speed boost if your users already have a cached copy of the library, which most people probably do.  You can find all of the details at <a title="google ajax api" href="http://code.google.com/apis/ajaxlibs/">Google&#8217;s AJAX libraries API</a>.</p>
<p>With the addition of all of the new fancy effects, I also decided that <a title="qrisper.com" href="http://qrisper.com">qrisper </a>would no longer support IE6.  So I created a redirect page for those poor souls still using that wretched browser.  I&#8217;ve been using <a title="ie tester" href="http://www.my-debugbar.com/wiki/IETester/HomePage">IETester</a> to test qrisper on IE6.  Worked pretty well.</p>
<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.qrisper.com%2F2009%2F02%2Fby-the-power-of-jskull%2F"><img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.qrisper.com%2F2009%2F02%2Fby-the-power-of-jskull%2F" height="61" width="51" /></a></div>]]></content:encoded>
			<wfw:commentRss>http://blog.qrisper.com/2009/02/by-the-power-of-jskull/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>With great power comes great responsibility</title>
		<link>http://blog.qrisper.com/2009/02/41/</link>
		<comments>http://blog.qrisper.com/2009/02/41/#comments</comments>
		<pubDate>Sat, 07 Feb 2009 17:23:41 +0000</pubDate>
		<dc:creator>Jung Lee</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[modal]]></category>
		<category><![CDATA[nettuts]]></category>
		<category><![CDATA[php]]></category>

		<guid isPermaLink="false">http://blog.qrisper.com/?p=41</guid>
		<description><![CDATA[
Decided to take a breather on the php to focus on the interface.  Actually, the php issue was interface related so I guess what I really mean is focus on making qrisper a bit flashier looking.
The landing page was getting a little noisy so I decided to put the registration into a modal window. I [...]]]></description>
			<content:encoded><![CDATA[<p><a title="best beach" href="http://qrisper.com/answers/best-beach-in-the-world/"><img class="size-medium wp-image-46 alignright" title="best beach in the world" src="http://blog.qrisper.com/wp-content/uploads/2009/02/beach-300x181.gif" alt="best beach in the world" width="300" height="181" /></a></p>
<p>Decided to take a breather on the php to focus on the interface.  Actually, the php issue was interface related so I guess what I really mean is focus on making qrisper a bit flashier looking.</p>
<p>The landing page was getting a little noisy so I decided to put the registration into a modal window. I used jquery and followed a tutorial from <a title="Popup Window" href="http://yensdesign.com/tutorials/popupjquery/">yensdesign.com</a>.  Implementation was pretty straightforward. One thing I want to tinker with is the location of the window.  It looks a bit off-center&#8230;I noticed that on the tutorial as well.  If anyone can see the reason why, please holler (code below).</p>
<pre>function centerPopup(){

        var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $j("#popupSignup").height();
	var popupWidth = $j("#popupSignup").width();

	$j("#popupSignup").css({
		"position": "absolute",
		"top": windowHeight/2-popupHeight/2,
		"left": windowWidth/2-popupWidth/2
	});
}</pre>
<p>I&#8217;m using jquery with prototype so I needed to make sure that I included jquery&#8217;s noconflict clause and change the $ variable for all jquery scripts (hence the $j).  There&#8217;s so much information out there about jquery that it&#8217;s hard not to use it.  But now that I have the power, I need to be responsible and practice restraint.  qrisper&#8217;s getting a little large around the waist from overindulging on all of those image files. Found this site on <a title="web optimization" href="http://www.websiteoptimization.com/">web optimization</a>, telling me that qrisper needs to go on a  diet.</p>
<p>Also added a little feedback button&#8230;meh&#8230;looks alright.  The button made me realize that I&#8217;m digging myself into a trap.  I am maintaining slightly different versions of the same page.  Which version the users see depends on whether or not they&#8217;re logged in.  Decided that I could probably use a php if statement to swap out includes depending on whether or not a session id exists.</p>
<p>Wanting to trim the fat further, I went to clean up my css files and optimize them with a few new tricks I learned.  Big mistake that was.  Spent a few hours fixing all of the damage I caused.  I found the <a title="css optimization" href="http://www.thefloatingfrog.co.uk/frog-blog/2008/09/10-css-shorthand-techniques-youll-use-everyday/">tips</a> from <a title="Bone Structure" href="http://bonestructure.com/blog/">David&#8217;s</a> <a title="dbone webdev" href="http://webdevconversations.blogspot.com/">old blog</a>.  Actually found a number of good resources&#8230;a few of which I used to fix a few issue that had been bugging me.</p>
<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.qrisper.com%2F2009%2F02%2F41%2F"><img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.qrisper.com%2F2009%2F02%2F41%2F" height="61" width="51" /></a></div>]]></content:encoded>
			<wfw:commentRss>http://blog.qrisper.com/2009/02/41/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

<!-- Dynamic page generated in 0.243 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2009-10-04 11:16:55 -->
