<?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>danwin.com &#187; gallery</title>
	<atom:link href="https://danwin.com/tag/gallery/feed/" rel="self" type="application/rss+xml" />
	<link>https://danwin.com</link>
	<description>Words, photos, and code by Dan Nguyen. The &#039;g&#039; is mostly silent.</description>
	<lastBuildDate>Thu, 21 Nov 2019 12:29:57 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=4.2.39</generator>
	<item>
		<title>photos.danwin.com: My new portfolio site in HTML5, with responsive CSS</title>
		<link>https://danwin.com/2011/06/photos-danwin-com-my-new-portfolio-site-in-html5-with-responsive-css/</link>
		<comments>https://danwin.com/2011/06/photos-danwin-com-my-new-portfolio-site-in-html5-with-responsive-css/#comments</comments>
		<pubDate>Thu, 23 Jun 2011 04:14:32 +0000</pubDate>
		<dc:creator><![CDATA[Dan Nguyen]]></dc:creator>
				<category><![CDATA[visuals]]></category>
		<category><![CDATA[works]]></category>
		<category><![CDATA[gallery]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[photos]]></category>

		<guid isPermaLink="false">https://danwin.com/?p=1689</guid>
		<description><![CDATA[<p>After trying too hard to rewrite my really old Flash gallery as a jQuery plugin, I thought &#8220;to hell with it&#8221; and decided to join the one-pager trend: http://photos.danwin.com. I have to say, this was one of the more pleasant site-designing jobs I&#8217;ve done in awhile. I&#8217;m going to try to limit my sites to [&#8230;]</p>
<p>The post <a rel="nofollow" href="https://danwin.com/2011/06/photos-danwin-com-my-new-portfolio-site-in-html5-with-responsive-css/">photos.danwin.com: My new portfolio site in HTML5, with responsive CSS</a> appeared first on <a rel="nofollow" href="https://danwin.com">danwin.com</a>.</p>
]]></description>
				<content:encoded><![CDATA[<p>After trying too hard to rewrite my <a href="https://danwin.com/depgal-a-pretty-flash-photo-gallery/">really old Flash gallery</a> as a jQuery plugin, I thought &#8220;to hell with it&#8221; and decided to join the one-pager trend: <a href="http://photos.danwin.com">http://photos.danwin.com</a>. I have to say, this was one of the more pleasant site-designing jobs I&#8217;ve done in awhile. I&#8217;m going to try to limit my sites to one-page or fewer from here on out.</p>
<div id="attachment_1695" style="width: 650px" class="wp-caption aligncenter"><a href="http://photos.danwin.com"><img src="https://danwin.com/words/wp-content/uploads/2011/06/Screen-shot-2011-06-23-at-12.23.39-AM-640x508.png" alt="photos.danwin.com" title="photos.danwin.com screenshot" width="640" height="508" class="size-large wp-image-1695" /></a><p class="wp-caption-text">photos.danwin.com</p></div>
<p>I started with a HTML5 template from <a href="http://initializr.com/" title="Initializr - Start your HTML5 project in 15 seconds!">initializr.com</a> and then tacked on the <a href="http://cssgrid.net/">1140 CSS grid sheet</a>, a fluid framework.</p>
<p>As far as Javascript goes, besides jQuery, I&#8217;m using Ben Alman&#8217;s <a href="http://benalman.com/code/projects/jquery-throttle-debounce/examples/throttle/" title="Ben Alman &raquo; jQuery throttle / debounce &raquo; Examples &raquo; Throttle">throttle-debounce plugin</a>, Leandro Vieira&#8217;s <a href="http://leandrovieira.com/projects/jquery/lightbox/" title="jQuery lightBox plugin">lightbox plugin</a>, and Ariel Flesler&#8217;s <a href="http://flesler.blogspot.com/2007/10/jqueryscrollto.html" title="Ariel Flesler: jQuery.ScrollTo">scrollTo plugin</a>  for the simple interaction bits.</p>
<p>It&#8217;s pretty rudimentary in terms of code sophistication&#8230;I haven&#8217;t yet decided how to lazy-load the images while still providing a full page for non-JS users. I think I&#8217;ll end up tacking on backbone.js and figuring out a JSON structure to load in the &#8220;galleries&#8221;. So, for now, deal with loading some 100+ images all at once from S3&#8230;</p>
<p>To me, it&#8217;s an improvement over the typical slideshow galleries in which only one image at a time is shown. Maybe it&#8217;s because I don&#8217;t have enough <a href="http://www.boston.com/bigpicture/">Big Picture show-stoppers</a> to justify displaying every photo as full-screen. But I think there&#8217;s some artistic room in manually arranging the images as a collage and purposefully deciding the size of each image in relation to the others.</p>
<p>The best part is that with the <a href="http://cssgrid.net">1140 grid system</a>, not only was designing for variable-width desktop browsers (and placing the images) a breeze&#8230;the site works very well on the iPad and passably well on the iPhone&#8230;and I barely even left Google Chrome on my Mac during the whole development process.</p>
<p>Now I just have to get some better photos. And maybe think the typography a little more&#8230;Meanwhile, <a href="http://photos.danwin.com">check it out</a>:</p>
<p>The post <a rel="nofollow" href="https://danwin.com/2011/06/photos-danwin-com-my-new-portfolio-site-in-html5-with-responsive-css/">photos.danwin.com: My new portfolio site in HTML5, with responsive CSS</a> appeared first on <a rel="nofollow" href="https://danwin.com">danwin.com</a>.</p>
]]></content:encoded>
			<wfw:commentRss>https://danwin.com/2011/06/photos-danwin-com-my-new-portfolio-site-in-html5-with-responsive-css/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
