<?xml version="1.0" encoding="UTF-8"?>
 <rdf:RDF xmlns="http://purl.org/rss/1.0/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:syn="http://purl.org/rss/1.0/modules/syndication/" xmlns:admin="http://webns.net/mvcb/">
  <channel rdf:about="http://pinboard.in">
    <title>Pinboard (_m_space)</title>
    <link>https://pinboard.in/u:_m_space/public/</link>
    <description>recent bookmarks from _m_space</description>
    <items>
      <rdf:Seq>	<rdf:li rdf:resource="https://twitter.com/uxlinks/status/705924584676130820/photo/1"/>
	<rdf:li rdf:resource="http://www.creativebloq.com/web-design/style-guides-that-do-it-right-31619497"/>
	<rdf:li rdf:resource="http://petelepage.com/blog/2013/02/meta-viewport-syntax-comma-or-semi-colon/"/>
	<rdf:li rdf:resource="http://webdesignerwall.com/tutorials/css-responsive-navigation-menu"/>
	<rdf:li rdf:resource="http://www.bennadel.com/blog/2445-Using-CSS-Pseudo-Elements-before-And-after.htm"/>
	<rdf:li rdf:resource="http://www.bennadel.com/blog/2443-Rendering-DOM-Elements-With-ngRepeat-In-AngularJS.htm"/>
	<rdf:li rdf:resource="http://www.scriptiny.com/2013/01/minify-js-and-css-files-in-batch-with-drag-and-drop/"/>
	<rdf:li rdf:resource="http://www.bennadel.com/blog/2439-My-Experience-With-AngularJS-The-Super-heroic-JavaScript-MVW-Framework.htm"/>
	<rdf:li rdf:resource="https://plus.google.com/u/0/115133653231679625609/posts/ij3e1RQXW1J"/>
	<rdf:li rdf:resource="http://www.webperformancetoday.com/2012/12/21/top-10-web-performance-today-posts-of-2012/"/>
	<rdf:li rdf:resource="https://medium.com/what-i-learned-building/b95033c270af"/>
	<rdf:li rdf:resource="http://wordpress.org/news/2012/12/elvin/"/>
	<rdf:li rdf:resource="http://www.webdirections.org/blog/an-update-to-html5-for-creatives/"/>
	<rdf:li rdf:resource="http://webdesignerwall.com/tutorials/responsive-column-layouts"/>
	<rdf:li rdf:resource="http://web-design-weekly.com/2012/11/20/keeping-up-with-chrome-developer-tools/"/>
	<rdf:li rdf:resource="http://maker.github.com/ratchet/"/>
	<rdf:li rdf:resource="http://web-design-weekly.com/2012/10/18/css-box-sizing/"/>
	<rdf:li rdf:resource="https://github.com/codylindley/frontend-tools"/>
	<rdf:li rdf:resource="http://leaverou.github.com/contrast-ratio/"/>
	<rdf:li rdf:resource="http://www.guypo.com/technical/responsive-web-design-is-bad-for-performance-there-i-said-it/"/>
	<rdf:li rdf:resource="http://www.bennadel.com/blog/2432-Applying-A-Cached-Response-To-An-AngularJS-Resource.htm"/>
	<rdf:li rdf:resource="http://www.webdirections.org/blog/html5-for-creatives/"/>
	<rdf:li rdf:resource="http://www.bennadel.com/blog/2427-Using-jQuery-Deferred-notify-To-Provide-Locally-Cached-Data.htm"/>
	<rdf:li rdf:resource="http://www.webdirections.org/blog/the-web-history-timeline-project/"/>
	<rdf:li rdf:resource="http://yeoman.io/"/>
	<rdf:li rdf:resource="http://en.blog.wordpress.com/2012/08/02/a-high-resolution-experience/"/>
	<rdf:li rdf:resource="http://html5boilerplate.com/"/>
	<rdf:li rdf:resource="http://www.bennadel.com/blog/2411-Using-Underscore-js-Templates-To-Render-HTML-Partials.htm"/>
	<rdf:li rdf:resource="http://www.nczonline.net/blog/2012/02/22/understanding-technical-debt/"/>
	<rdf:li rdf:resource="http://www.bennadel.com/blog/2402-Lazy-Loading-RequireJS-Modules-When-They-Are-First-Requested.htm"/>
	<rdf:li rdf:resource="http://www.developerdrive.com/2012/07/adding-responsive-videos-to-your-design/"/>
	<rdf:li rdf:resource="http://webbugtrack.blogspot.com/2012/07/microsoft-drops-support-for-features-in.html"/>
	<rdf:li rdf:resource="http://www.bennadel.com/blog/2392-Domain-Models-Expose-Behavior-Not-State.htm"/>
	<rdf:li rdf:resource="https://github.com/necolas/idiomatic-css"/>
	<rdf:li rdf:resource="http://webdesignerwall.com/tutorials/setting-breakpoints-in-responsive-design"/>
	<rdf:li rdf:resource="http://webdesignerwall.com/tutorials/creating-a-modern-lightbox-with-css3-and-javascript"/>
	<rdf:li rdf:resource="http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design"/>
	<rdf:li rdf:resource="http://www.bennadel.com/blog/2374-Object-Calisthenics-In-JavaScript-An-Introduction.htm"/>
	<rdf:li rdf:resource="http://web-design-weekly.com/2012/05/04/web-design-weekly-41/"/>
	<rdf:li rdf:resource="http://web-design-weekly.com/2012/03/02/web-design-weekly-33/"/>
	<rdf:li rdf:resource="http://www.developerdrive.com/2012/02/moving-web-page-elements-using-the-css3-translate-transform/"/>
	<rdf:li rdf:resource="http://web-design-weekly.com/2012/02/10/web-design-weekly-30/"/>
	<rdf:li rdf:resource="http://web-design-weekly.com/2012/01/12/web-design-weekly-26/"/>
	<rdf:li rdf:resource="http://web-design-weekly.com/2011/12/16/web-design-weekly-25/"/>
	<rdf:li rdf:resource="http://www.bennadel.com/blog/2311-Using-jQuery-Deferred-To-Create-Compound-Objects-From-Multiple-Asynchronous-Data-Sources.htm"/>
	<rdf:li rdf:resource="http://www.bennadel.com/blog/2310-Using-The-RequireJS-Build-Optimizer-To-Concatenate-Modularized-CSS-Files.htm"/>
	<rdf:li rdf:resource="http://www.12412.org/"/>
	<rdf:li rdf:resource="http://isthewebdead.com/"/>
	<rdf:li rdf:resource="http://blog.tommilway.com/post/14322949339/how-to-build-a-modern-website-in-2011"/>
	<rdf:li rdf:resource="http://www.lukew.com/ff/entry.asp?1436"/>
	<rdf:li rdf:resource="http://scripting.com/stories/2011/12/13/whyAppsAreNotTheFuture.html"/>
	<rdf:li rdf:resource="http://movethewebforward.org/"/>
	<rdf:li rdf:resource="http://www.zurb.com/article/840/want-engagement-pace-yourself"/>
	<rdf:li rdf:resource="http://feedproxy.google.com/~r/Addictivetips/~3/G8YG4CmCQJU/"/>
	<rdf:li rdf:resource="https://github.com/h5bp/html5-boilerplate/issues/816"/>
	<rdf:li rdf:resource="http://bohemianalps.com/tools/grid/"/>
	<rdf:li rdf:resource="http://blog.frankchimero.com/post/9594863189"/>
	<rdf:li rdf:resource="http://blogs.adobe.com/edtechatadobe/2011/08/fireworks-mobile-design-tip-exporting-layers-to-files.html"/>
	<rdf:li rdf:resource="http://www.jenitennison.com/blog/node/158"/>
	<rdf:li rdf:resource="http://feeds.mashable.com/~r/Mashable/~3/R1CJL8wSP4M/"/>
	<rdf:li rdf:resource="http://www.gantthead.com/process/processMain.cfm?ID=2-3783"/>
	<rdf:li rdf:resource="http://webby.rubyforge.org/"/>
	<rdf:li rdf:resource="http://shearersoftware.com/software/server-administration/migraine/"/>
	<rdf:li rdf:resource="http://informationarchitects.jp/the-web-is-all-about-typography-period/"/>
	<rdf:li rdf:resource="http://gamemakker.co.uk/2007/08/05/blueprint-a-css-framework/"/>
	<rdf:li rdf:resource="http://www.alistapart.com/articles/elastic"/>
	<rdf:li rdf:resource="http://www.alistapart.com/articles/settingtypeontheweb"/>
	<rdf:li rdf:resource="http://webtypography.net/"/>
	<rdf:li rdf:resource="http://blog.sessions.edu/design/fine-tuning-web-typography/"/>
	<rdf:li rdf:resource="http://bjorkoy.com/blueprint/index.html"/>
      </rdf:Seq>
    </items>
  </channel><item rdf:about="https://twitter.com/uxlinks/status/705924584676130820/photo/1">
    <title>Twitter</title>
    <dc:date>2016-03-05T01:15:11+00:00</dc:date>
    <link>https://twitter.com/uxlinks/status/705924584676130820/photo/1</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[3 online style guides that do it right >  #styleguide #ux #design #web #mobile ]]></description>
<dc:subject>web design ux mobile styleguide</dc:subject>
<dc:source>https://twitter.com/</dc:source>
<dc:identifier>https://pinboard.in/u:_m_space/b:0469fcc788e6/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ux"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:mobile"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:styleguide"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.creativebloq.com/web-design/style-guides-that-do-it-right-31619497">
    <title>3 online style guides that do it right | Web design | Creative Bloq</title>
    <dc:date>2016-03-05T01:15:11+00:00</dc:date>
    <link>http://www.creativebloq.com/web-design/style-guides-that-do-it-right-31619497</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[3 online style guides that do it right >  #styleguide #ux #design #web #mobile ]]></description>
<dc:subject>web design ux mobile styleguide</dc:subject>
<dc:source>https://twitter.com/</dc:source>
<dc:identifier>https://pinboard.in/u:_m_space/b:162b88044cb0/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ux"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:mobile"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:styleguide"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://petelepage.com/blog/2013/02/meta-viewport-syntax-comma-or-semi-colon/">
    <title>Pete LePage on the Web » Meta viewport syntax – comma or semi-colon?</title>
    <dc:date>2013-02-15T13:46:22+00:00</dc:date>
    <link>http://petelepage.com/blog/2013/02/meta-viewport-syntax-comma-or-semi-colon/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Pete LePage on the Web http://petelepage.com/blog

TL;DR: If you’re using a semi-colon to separate values in your viewport meta tag, your site may break! Use a comma instead.

Browsers can be pretty forgiving most days, they do their best to fix our coding mistakes; but it’s a tough job. Most days, they manage to get it right, but trying to fix all the possible error cases is pretty hard. Worse yet, sometimes one browser fixes our code for us, while others don’t.

The viewport meta tag seems to be one of those elements that’s a little bit persnickety. The CSS Device Adaptation spec says the correct syntax uses a comma to separate the values. Unfortunately some sites use a semi-colon, which causes the browser to ignore your viewport settings completely!

Correct Syntax

Incorrect Syntax

If you want to see this in action and how bad things can look, use the remote debugger with Chrome for Android Beta to change the comma to a semi-colon in the viewport meta tag on Google.com. The site will suddenly go from looking good, to looking awful.

The Developer Tools also warn you in the Console when it comes across an invalid viewport meta tag with the warning: Viewport argument value "device-width;" for key "width" is invalid, and has been ignored. Note that ';' is not a separator in viewport values. The list should be comma-separated.

Go make awesome, but use a comma!
]]></description>
<dc:subject>ifttt googlereader Pete LePage on the Web</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:67a6645d4fc0/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Pete"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:LePage"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:on"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:the"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://webdesignerwall.com/tutorials/css-responsive-navigation-menu">
    <title>CSS: Responsive Navigation Menu</title>
    <dc:date>2013-01-28T00:46:30+00:00</dc:date>
    <link>http://webdesignerwall.com/tutorials/css-responsive-navigation-menu</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Designer Wall - Design Trends and Tutorials http://webdesignerwall.com Previously I wrote a tutorial on how to make a mobile navigation for responsive design, now I've discovered a new technique to produce a responsive menu without having to use Javascript. It uses clean and semantic HTML5 markup. The menu can be aligned left, center or right. Unlike the previous tutorial where it is clicked [...]
]]></description>
<dc:subject>ifttt googlereader Web Designer Wall - Design Trends and Tutorials Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:c9118fea2a15/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Designer"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Wall"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:-"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Trends"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:and"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Tutorials"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.bennadel.com/blog/2445-Using-CSS-Pseudo-Elements-before-And-after.htm">
    <title>Using CSS Pseudo Elements :before And :after</title>
    <dc:date>2013-01-22T03:03:45+00:00</dc:date>
    <link>http://www.bennadel.com/blog/2445-Using-CSS-Pseudo-Elements-before-And-after.htm</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Ben Nadel ColdFusion, jQuery, And Web Development Feed @ BenNadel.com http://www.bennadel.com/ The CSS pseudo elements, :before and :after, have been around since IE8. So, this is probably not news to many of you. But, for me personally, I just started using the :before and :after pseudo elements and I've been absolutely loving them! They making it much easier to keep design-centric elements out of your markup and in your CSS (where they belong). Anyway, I thought I'd put together a quick demo in case anyone else is late to the party. ... Read More »]]></description>
<dc:subject>ifttt googlereader Ben Nadel ColdFusion jQuery And Web Development Feed @ BenNadel.com Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:dbd3f741ce83/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Ben"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Nadel"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ColdFusion"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:jQuery"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:And"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Development"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Feed"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:@"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:BenNadel.com"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.bennadel.com/blog/2443-Rendering-DOM-Elements-With-ngRepeat-In-AngularJS.htm">
    <title>Rendering DOM Elements With ngRepeat In AngularJS</title>
    <dc:date>2013-01-18T00:16:59+00:00</dc:date>
    <link>http://www.bennadel.com/blog/2443-Rendering-DOM-Elements-With-ngRepeat-In-AngularJS.htm</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Ben Nadel ColdFusion, jQuery, And Web Development Feed @ BenNadel.com http://www.bennadel.com/ When it comes to compiling and rendering DOM elements, AngularJS is definitely a little bit magical. Things just work! And, they work really well. Especially when it comes to syncing the DOM with the view model (ie. $scope) shared by the various Controllers. At first, they mysterious nature of the syncing is delicious; but, when your application starts to use things like caching, localStorage, directives, and heavy client-side calculations, understanding how AngularJS renders DOM elements in  ... Read More »]]></description>
<dc:subject>ifttt googlereader Ben Nadel ColdFusion jQuery And Web Development Feed @ BenNadel.com Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:ff281e9af825/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Ben"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Nadel"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ColdFusion"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:jQuery"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:And"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Development"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Feed"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:@"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:BenNadel.com"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.scriptiny.com/2013/01/minify-js-and-css-files-in-batch-with-drag-and-drop/">
    <title>Minify JS and CSS files in batch with drag-and-drop - Web Development Blog</title>
    <dc:date>2013-01-13T02:01:17+00:00</dc:date>
    <link>http://www.scriptiny.com/2013/01/minify-js-and-css-files-in-batch-with-drag-and-drop/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Development Blog » Javascript http://www.scriptiny.com Minification of JavaScript and CSS files is one of the best practices to keep your site’s load time to the minimum, especially important for the first time visitors. In organized projects, minification is part of the deployment process and it is integrated into that very smoothly using appropriate tools. If you wish to minify the [...]]]></description>
<dc:subject>ifttt googlereader Web Development Blog » Javascript Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:a2ac684aed8e/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Development"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Blog"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:»"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Javascript"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.bennadel.com/blog/2439-My-Experience-With-AngularJS-The-Super-heroic-JavaScript-MVW-Framework.htm">
    <title>My Experience With AngularJS - The Super-heroic JavaScript MVW Framework</title>
    <dc:date>2013-01-04T05:08:04+00:00</dc:date>
    <link>http://www.bennadel.com/blog/2439-My-Experience-With-AngularJS-The-Super-heroic-JavaScript-MVW-Framework.htm</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Ben Nadel ColdFusion, jQuery, And Web Development Feed @ BenNadel.com http://www.bennadel.com/ I've been learning and using AngularJS for the past couple of months and the journey has been a little bit of an emotional roller coaster.         ... Read More »]]></description>
<dc:subject>ifttt googlereader Ben Nadel ColdFusion jQuery And Web Development Feed @ BenNadel.com Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:c6ad2db426e4/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Ben"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Nadel"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ColdFusion"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:jQuery"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:And"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Development"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Feed"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:@"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:BenNadel.com"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://plus.google.com/u/0/115133653231679625609/posts/ij3e1RQXW1J">
    <title>Addy Osmani - Google+ - If you're around friends and family using older browsers…</title>
    <dc:date>2012-12-29T21:55:07+00:00</dc:date>
    <link>https://plus.google.com/u/0/115133653231679625609/posts/ij3e1RQXW1J</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Design Weekly http://web-design-weekly.com

Addy Osmani:

If you’re around friends and family using older browsers this year, why not take a few minutes out to help them upgrade to an evergreen browser? Evergreen browsers are browsers with an automatic upgrade path (e.g Chrome, Firefox and Opera) and will mean that they can enjoy the best the web has to offer and avoid broken browser experiences in the future.

Just updating the family laptop. I hope you are as well…

★

The post Around friends and family using older browsers? appeared first on Web Design Weekly.]]></description>
<dc:subject>ifttt googlereader Web Design Weekly Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:682f407181df/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Weekly"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.webperformancetoday.com/2012/12/21/top-10-web-performance-today-posts-of-2012/">
    <title>Top 10 Web Performance Today posts of 2012</title>
    <dc:date>2012-12-22T20:27:44+00:00</dc:date>
    <link>http://www.webperformancetoday.com/2012/12/21/top-10-web-performance-today-posts-of-2012/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Performance Today http://www.webperformancetoday.com

As I wrap things up for the holidays, I thought it would be fun to see which posts over the past year have most sparked people’s interest. I wasn’t too surprised to see that some of the most popular pieces were about sexy topics like page growth, business metrics, rogue third-party content, and the psychology of web performance. But it was really cool to see that people were reading and passing along “Performance 101″ type pieces about latency and terminology. I take this as a great indicator that there are a lot of people out there on a mission to preach the gospel of performance.

I’ll be mostly offline for the next couple of weeks to enjoy the holidays and the imminent arrival of baby #3. I hope you’re able to do the same — new baby is optional. 

1. Bad news for site owners and mobile users: The average web page is now 1 MB

2. 4 awesome slides showing how page speed correlates to business metrics at Walmart.com

3. A non-geeky guide to understanding performance measurement terms

4. Latency 101: What is latency and why is it such a big deal?

5. Browser innovation and the 14 rules for faster loading websites: Revisiting Steve’s work (part 1)

6. This is your brain on a slow website [INFOGRAPHIC]

7. Interesting new findings about page views, time on site, and bounce rate across desktop and mobile browsers

8. Our need for web speed: It’s about neuroscience, not entitlement

9. Latency reality check: Early findings show that desktop latency ranges from 65-145ms

10. Has your site’s third-party content gone rogue? Here’s how to regain control.]]></description>
<dc:subject>ifttt googlereader Web Performance Today Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:7af21c664fdc/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Performance"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Today"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://medium.com/what-i-learned-building/b95033c270af">
    <title>Twitter Bootstrap — What I Learned Building… — Medium</title>
    <dc:date>2012-12-12T03:52:35+00:00</dc:date>
    <link>https://medium.com/what-i-learned-building/b95033c270af</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Design Weekly http://web-design-weekly.com

Jacob Thornton:

Today Bootstrap is really fucking popular. However, what people often don’t realize is that despite its popularity, and despite it being a “Twitter” project, it isn’t actually maintained by a team at Twitter (nor was it ever).

Bootstrap is (and has always been) maintained by two nerds who like to write code together. Just two nerds.

What’s more, this wasn’t something we did in the office – there was no “Bootstrap team” – no 20% time – just Mark and I hacking in our free time. And this is significant, because what building Bootstrap has taught me more than anything else, is that’s all I really care about.

Writing code with the homies.

These are the good times. Always will be, always have been.

★

The post What I Learnt Building Twitter Bootstrap appeared first on Web Design Weekly.]]></description>
<dc:subject>ifttt googlereader Web Design Weekly Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:4c00004e9653/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Weekly"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://wordpress.org/news/2012/12/elvin/">
    <title>WordPress › WordPress 3.5 “Elvin”</title>
    <dc:date>2012-12-12T03:52:34+00:00</dc:date>
    <link>http://wordpress.org/news/2012/12/elvin/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Design Weekly http://web-design-weekly.com

If you’ve been around WordPress a while, the most dramatic new change you’ll notice is a completely re-imagined flow for uploading photos and creating galleries. Media has long been a friction point and we’ve listened hard and given a lot of thought into crafting this new system. 3.5 includes a new default theme, Twenty Twelve, which has a very clean mobile-first responsive design and works fantastic as a base for a CMS site. Finally we’ve spent a lot of time refreshing the styles of the dashboard, updating everything to be Retina-ready with beautiful high resolution graphics, a new color picker, and streamlining a couple of fewer-used sections of the admin.

Congrats to all that made this happen!

★

The post WordPress 3.5 “Elvin” appeared first on Web Design Weekly.]]></description>
<dc:subject>ifttt googlereader Web Design Weekly Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:242d00be75a0/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Weekly"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.webdirections.org/blog/an-update-to-html5-for-creatives/">
    <title>An update to HTML5 for Creatives | Web Directions</title>
    <dc:date>2012-12-08T17:46:53+00:00</dc:date>
    <link>http://www.webdirections.org/blog/an-update-to-html5-for-creatives/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Directions » Blog http://www.webdirections.org

A couple of months back, we published the first version of our HTML5 for Creatives, an ebook looking at what HTML5 is, and its implications for Creative Directors, and other “creatives”.

As noted, there was some irony in the fact is was a PDF. Well, prepare for more irony, as we’ve just published a new, updated version, and there’s now both a PDF, and an iBooks version, available from iTunes, and still free. And we’ve updated the PDF version as well.

HTML5 for Creatives takes a high level, yet in depth, look at the capabilities, use cases, strengths and limitations of the whole suite of related technologies that are broadly referred to as “HTML5”. It’s written specifically for people who make decisions about the use of technologies, particularly in the creative industries, (but it’s more than a little relevant for other industries as well) rather than for developers and implementors. We keep it high level, so there’s no code to worry about, but we’ll also delve into these technologies in some detail.

So if you need to know more about what HTML5 is, and what it can do for you, then grab a copy. Or if your client, manager, or some other decision maker you work with needs to get up to speed with modern web technologies, then send them a copy (or print it out and put it on their desk!)]]></description>
<dc:subject>ifttt googlereader Web Directions » Blog Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:e5547e13e24a/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Directions"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:»"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Blog"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://webdesignerwall.com/tutorials/responsive-column-layouts">
    <title>Responsive Column Layouts</title>
    <dc:date>2012-11-28T03:36:17+00:00</dc:date>
    <link>http://webdesignerwall.com/tutorials/responsive-column-layouts</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Designer Wall - Design Trends and Tutorials http://webdesignerwall.com Typically, to create a column layout, you would need to add the first or last classes to reset the margin space and clear the float. Today I'm going to share a very simple CSS trick to create a responsive column layout using nth-of-type pseudo class. I use this trick to code the WordPress themes at [...]
]]></description>
<dc:subject>ifttt googlereader Web Designer Wall - Design Trends and Tutorials Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:0bb8e23cf980/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Designer"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Wall"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:-"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Trends"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:and"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Tutorials"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://web-design-weekly.com/2012/11/20/keeping-up-with-chrome-developer-tools/">
    <title>Keeping up with Chrome Developer Tools - Web Design Weekly</title>
    <dc:date>2012-11-20T14:32:53+00:00</dc:date>
    <link>http://web-design-weekly.com/2012/11/20/keeping-up-with-chrome-developer-tools/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Design Weekly http://web-design-weekly.com

In today’s world, as the web evolves so do the tools. Keeping up with what’s happening is important in our industry. However, keeping up with everyday development tools is as important, if not more so.

The Developer Tools in Chrome have been in rapid development for the last couple of years, and I certainly have not been using them to their fullest potential. Hopefully the resources below will bring you up to speed.

Wait, Chrome Dev Tools could do THAT?

Your browser is one of the most and best instrumented development platforms — you may just not realize it yet. In this episode we’ll take a whirlwind tour of how to analyze network performance, rendering and layout pipeline, as well as detecting memory leaks in your Javascript code, and using audits and extensions to build faster and better apps!

Secrets of the Chrome Developer Tools

The Developer Tools built into Google Chrome provide powerful ways to understand, debug, and profile web applications. Most developers are familiar with its basic inspection and debugging tools, but some of its most valuable features, like the timeline and memory analysis tools, are lesser known. This talk will provide an overview of the Chrome dev tools and an in-depth demonstration of some of the lesser-known features.

Do more with Chrome Developer Tools

The Chrome Developer Tools team recently launched new features and made several UI changes to improve your development and debugging workflow. Features include device emulation and loads more.

Search or navigate to files, methods or line numbers. Shortcuts for text search and beyond

The ability to quickly find or navigate to specific files, methods or line numbers in any web app can be important in your day to day workflow in the Chrome DevTools. Addy Osmani explores some useful tips to help with these when working in the Sources panel.

Skinning the Chrome Developer Tools Revisited

Back in 2011, Darcy Clarke wrote a kick-ass post about how to skin the Chrome Developer Tools with your own custom stylesheet. The basic idea was to locate Chrome’s user stylesheet directory then drop-in your own Custom.css file. This post shares a whole bunch of themes written over the past year.

Further Resources

Google Developers homepage

Chrome Developers on Google +

@ChromiumDev on Twitter

The post Keeping up with Chrome Developer Tools appeared first on Web Design Weekly.]]></description>
<dc:subject>ifttt googlereader Web Design Weekly Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:070f6d38829c/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Weekly"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://maker.github.com/ratchet/">
    <title>Ratchet</title>
    <dc:date>2012-11-06T03:20:12+00:00</dc:date>
    <link>http://maker.github.com/ratchet/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Design Weekly http://web-design-weekly.com

Prototype iPhone apps with simple HTML, CSS and JS components.

Built by Dave Gamache, Connor Sears, and Jacob Thornton who all worked at twitter once upon a time…

★

The post Ratchet appeared first on Web Design Weekly.]]></description>
<dc:subject>ifttt googlereader Web Design Weekly Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:b910fb38d4e1/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Weekly"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://web-design-weekly.com/2012/10/18/css-box-sizing/">
    <title>CSS Box-Sizing - Web Design Weekly</title>
    <dc:date>2012-10-18T14:18:52+00:00</dc:date>
    <link>http://web-design-weekly.com/2012/10/18/css-box-sizing/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Design Weekly http://web-design-weekly.com

Having a little knowledge of how the box-sizing property works and when you can utilise it is a neat trick to have up your sleeve. The reason for using the box-sizing property in your CSS is to alter the default CSS box model. Modifying the box model gives you the option of whether or not an element’s width and height include padding and border or not.

In web design every element is a box and each box has a content area (e.g. text, an image, etc.) and optional surrounding padding, border and margin areas. The size of each area is specified by their properties. In the W3C box model, the width of an element gives the width of the content of the box, excluding padding and border. In the traditional box model, the width of an element gives the width between the borders of the box, including padding and border. By default, all browsers use the W3C box model (except IE in “Quirks Mode”, which uses the traditional one).

Modifying the Box Model with Box-Sizing

The CSS box-sizing property has 2 values: content-box and border-box. Changing the value tweaks the way the box model works on the targeted element/s.

content-box
This is the default style as specified by the CSS standard. The width and height properties include only the content; not the border, margin, or padding.

border-box
The width and height properties include the padding and border, but not the margin.

Note:At the time of writing, there is also another proposed method padding-box, but it’s currently at risk of being removed so I have decided to leave out the technical details of how it works.

A little example

Here is a little CodePen to hopefully give you a better understanding. Each box has the same properties except the box-sizing is altered. Don’t be afraid to dig into the code!

Going forward

I’m a big fan of box-sizing, especially setting everything to be the traditional box model like Paul Irish suggests in his post. It can be tricky to just drop it into an existing site, but if I’m starting a new build then it’s one of the first lines of code written. It’s really up to you in how you roll, but I would highly recommend having a tinker. You might be surprised.

Further reading

* { box-sizing: border-box } FTW

Box Sizing Specification

The post CSS Box-Sizing appeared first on Web Design Weekly.]]></description>
<dc:subject>ifttt googlereader Web Design Weekly Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:a58d8e97523a/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Weekly"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://github.com/codylindley/frontend-tools">
    <title>codylindley/frontend-tools · GitHub</title>
    <dc:date>2012-10-16T01:52:04+00:00</dc:date>
    <link>https://github.com/codylindley/frontend-tools</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Design Weekly http://web-design-weekly.com

A great collection of tool for frontend development by Cody Lindley. The list covers coding tools, references, guides, pollyfills, generator tools and performance links. All that is missing is a newsletter section…

★

The post Epic list of Frontend Development Tools appeared first on Web Design Weekly.]]></description>
<dc:subject>ifttt googlereader Web Design Weekly Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:dffb739f8309/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Weekly"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://leaverou.github.com/contrast-ratio/">
    <title>Contrast Ratio: Easily calculate color contrast ratios. Passing WCAG was never this easy!</title>
    <dc:date>2012-10-16T01:52:04+00:00</dc:date>
    <link>http://leaverou.github.com/contrast-ratio/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Design Weekly http://web-design-weekly.com

Lea Verou:

I was always interested in accessibility, but I never had to comply with any guidelines before. At W3C, accessibility is considered very important, so everything we make needs to pass WCAG 2.0 AA level. Therefore, I found myself calculating color contrast ratios very frequently.

There are plenty of tools out there for this. However, I found that my workflow for checking a contrast ratio with them was far from ideal. I had to convert my CSS colors to hex notation (which I don’t often use myself anymore), check the contrast ratio, then adjust the colors as necessary, covert again etc. In addition, I had to adjust the lightness of the colors with a blindfold, without being able to see the difference my adjustments would make to the contrast ratio. When using semi-transparent colors, it was even worse: Since WCAG only describes an algorithm for opaque colors, all contrast tools only expect that. So, I had to calculate the resulting opaque colors after alpha blending had taken place. After doing that for a few days, I got so fed up that I decided to make my own tool.

You can read more about the Contrast Ration tool on Lea’s blog.

I absolutely dig how Lea just builds, builds, builds. Go Lea!

★

The post Contrast Ratio Tool appeared first on Web Design Weekly.]]></description>
<dc:subject>ifttt googlereader Web Design Weekly Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:8e413f2b3618/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Weekly"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.guypo.com/technical/responsive-web-design-is-bad-for-performance-there-i-said-it/">
    <title>Guy's Pod » Blog Archive » Responsive Web Design Makes It Hard To Be Fast</title>
    <dc:date>2012-10-16T01:52:00+00:00</dc:date>
    <link>http://www.guypo.com/technical/responsive-web-design-is-bad-for-performance-there-i-said-it/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Design Weekly http://web-design-weekly.com

Guy Podjarny:

I like Responsive Design. Heck, I LOVE Responsive Design. I think it’s a brilliant methodology, which address true challenges in a very good way. But no matter how fond you are of RWD, I think you have to face the music – RWD makes it very hard to write a fast website.

I’m not saying you can’t write a high performance responsive website. I’m not saying you shouldn’t use RWD (Responsive Web Design) – I would actually recommend it to most organizations. However, RWD makes pages inherently more complicated, and all in all would make the mobile web slower.

★

The post Responsive Web Design Makes It Hard To Be Fast appeared first on Web Design Weekly.]]></description>
<dc:subject>ifttt googlereader Web Design Weekly Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:fc3a998b93c1/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Weekly"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.bennadel.com/blog/2432-Applying-A-Cached-Response-To-An-AngularJS-Resource.htm">
    <title>Applying A Cached Response To An AngularJS Resource</title>
    <dc:date>2012-10-14T13:52:30+00:00</dc:date>
    <link>http://www.bennadel.com/blog/2432-Applying-A-Cached-Response-To-An-AngularJS-Resource.htm</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Ben Nadel ColdFusion, jQuery, And Web Development Feed @ BenNadel.com http://www.bennadel.com/ Earlier this week, I demonstrated my AngularJS class, DeferredWithUpdate.js, as a way to apply cached responses to an AngularJS deferred value . As a follow up to that, I wanted to quickly demonstrate how to apply a cached response to an AngularJS $resource reference. ... Read More »]]></description>
<dc:subject>ifttt googlereader Ben Nadel ColdFusion jQuery And Web Development Feed @ BenNadel.com Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:e54d987886e2/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Ben"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Nadel"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ColdFusion"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:jQuery"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:And"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Development"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Feed"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:@"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:BenNadel.com"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.webdirections.org/blog/html5-for-creatives/">
    <title>HTML5 for Creatives | Web Directions</title>
    <dc:date>2012-10-01T05:01:10+00:00</dc:date>
    <link>http://www.webdirections.org/blog/html5-for-creatives/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Directions » Blog http://www.webdirections.org

By now, professional web designers and developers have got a fairly good grip of “HTML5”. Yes, we know most of what is referred to as HTML5 is not strictly HTML5 at all, indeed a good deal is not even HTML, rather CSS and the DOM. But we know what it is, what we can do with it, what drawbacks and challenges exist.

However when it comes to others we work with — clients, Creative Directors, CIOs and CTOs, well, let’s face it, there’s a good chance they’ve heard the term, perhaps some of the myths, and want to know more, but they aren’t as well versed in the nitty gritty. Don’t worry, we’re here to help.

HTML5 for Creatives (a free PDF ebook) takes a high level, yet in depth, look at the capabilities, use cases, strengths and limitations of the whole suite of related technologies that are broadly referred to as “HTML5”. It’s written specifically for people who make decisions about the use of technologies, particularly in the creative industries, (but it’s more than a little relevant for other industries as well) rather than for developers and implementors. We keep it high level, so there’s no code to worry about, but we’ll also delve into these technologies in some detail.

So if you need to know more about what HTML5 is, and what it can do for you, then grab a copy. Or if your client, manager, or some other decision maker you work with needs to get up to speed with modern web technologies, then send them a copy (or print it out and put it on their desk!)

In short we’ll cover:

What the key features of “HTML5” are;

What uses each of these have;

What support these have in web browsers, mobile and tablet devices; and

Why you should care.

But first, why bother with HTML5 at all? Well, whether your focus is:

mobile and tablet applications;

interactive, engaging online campaigns;

browser based, Facebook, and other social games; or

more traditional web sites,

HTML5 and related technologies bring new capabilities to connect with audiences, and create more engaging, simply better, web experiences.

Like what you see? Why not sign up to our newsletter on the right, for a concentrated weekly dose of web design, development, and big picture goodness, or follow @webdirections on twitter]]></description>
<dc:subject>ifttt googlereader Web Directions » Blog Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:7ac62f3d1023/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Directions"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:»"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Blog"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.bennadel.com/blog/2427-Using-jQuery-Deferred-notify-To-Provide-Locally-Cached-Data.htm">
    <title>Using jQuery Deferred.notify() To Provide Locally Cached Data</title>
    <dc:date>2012-10-01T04:46:03+00:00</dc:date>
    <link>http://www.bennadel.com/blog/2427-Using-jQuery-Deferred-notify-To-Provide-Locally-Cached-Data.htm</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Ben Nadel ColdFusion, jQuery, And Web Development Feed @ BenNadel.com http://www.bennadel.com/ Most of the data in your application hasn't changed. Sure, things are being updated all the time; but, the large majority of the data remains the same from moment to moment. As such, it might make sense to show the user outdated, locally cached data before taking the time to go to the server for the true data. But how can we do this in a way that is really clear for your application Controllers? In jQuery 1.5, we were given Deferred objects to handle our asynchronous, server-side requests. In ... Read More »]]></description>
<dc:subject>ifttt googlereader Ben Nadel ColdFusion jQuery And Web Development Feed @ BenNadel.com Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:c3d28213778d/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Ben"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Nadel"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ColdFusion"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:jQuery"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:And"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Development"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Feed"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:@"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:BenNadel.com"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.webdirections.org/blog/the-web-history-timeline-project/">
    <title>The Web History Timeline Project | Web Directions</title>
    <dc:date>2012-10-01T04:45:56+00:00</dc:date>
    <link>http://www.webdirections.org/blog/the-web-history-timeline-project/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Directions » Blog http://www.webdirections.org

This morning, I was honoured to take part in the first “Web Behind”, a new segment of the great Web Forward podcast, with Jen Simmons and Eric Meyer. The audio should be online soon.

During that, I announced a little project I’ve been working on, using the fantastic Timeline.js from Verite.

The goal is to bring together some of the most important milestones in the history of the web, whether they’re

the publication of seminal articles and books;

the publication of important standards and RFCs;

the release of important software (browsers, servers, tools, libraries;)

significant events, such as the founding of the W3C.

My goal is not to document the entire history of the web — the founding of Boo.com, for example is likely to be beyond the scope of what I have in mind. But, if it’s had a significant impact on the way we build the web, it belongs here.

You can take a look at it now, but it is very much a work in progress. Which is where you come in. I’d love your suggestions for significant milestones in the history of web design and development. To make it easy to suggest milestones you think should be remembered, just fill in and submit the form below. The more detail (particularly dates and relevant images) you can provide the better. I can’t promise it will all make it in, but if it fits the criteria, it will!
Or, just suggest an event in the comments.

Thanks in advance for your help, and hopefully together we can build a really valuable resource.
]]></description>
<dc:subject>ifttt googlereader Web Directions » Blog Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:f40f5e87a1e5/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Directions"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:»"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Blog"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://yeoman.io/">
    <title>Yeoman - Modern workflows for modern webapps</title>
    <dc:date>2012-09-13T03:35:18+00:00</dc:date>
    <link>http://yeoman.io/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Design Weekly http://web-design-weekly.com

Yeoman is now available.

It’s an opinionated set of tools aimed at improving your workflow and productivity in building web apps.

★

The post Yeoman appeared first on Web Design Weekly.]]></description>
<dc:subject>ifttt googlereader Web Design Weekly Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:8368cdb316ef/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Weekly"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://en.blog.wordpress.com/2012/08/02/a-high-resolution-experience/">
    <title>A High Resolution Experience — Blog — WordPress.com</title>
    <dc:date>2012-09-07T03:46:29+00:00</dc:date>
    <link>http://en.blog.wordpress.com/2012/08/02/a-high-resolution-experience/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Design Weekly http://web-design-weekly.com

Matt Mullenweg:

All of your blog posts will now serve high-resolution images for users that can see them, at least the images that we host. Since we create all images dynamically on the fly, what we do is if you’ve uploaded a higher resolution photo and sized it down, we’ll serve a double-size so it looks super sharp to those visitors — they’ll think you’re ahead of the game.

Retina is now!

★

The post WordPress Goes Retina appeared first on Web Design Weekly.]]></description>
<dc:subject>ifttt googlereader Web Design Weekly Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:882f3e9babf5/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Weekly"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://html5boilerplate.com/">
    <title>HTML5 Boilerplate: The web's most popular front-end template</title>
    <dc:date>2012-09-02T18:01:43+00:00</dc:date>
    <link>http://html5boilerplate.com/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Design Weekly http://web-design-weekly.com

The web’s most popular front-end template just hit version v4.0.0.

The site has had a major refresh. The latest version of jQuery is included. Same goes with the inclusion of the latest Modernizr and lots, lots more. Huge congrats to all involved.

★]]></description>
<dc:subject>ifttt googlereader Web Design Weekly Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:27f37c705b74/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Weekly"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.bennadel.com/blog/2411-Using-Underscore-js-Templates-To-Render-HTML-Partials.htm">
    <title>Using Underscore.js Templates To Render HTML Partials</title>
    <dc:date>2012-08-20T01:52:16+00:00</dc:date>
    <link>http://www.bennadel.com/blog/2411-Using-Underscore-js-Templates-To-Render-HTML-Partials.htm</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Ben Nadel ColdFusion, jQuery, And Web Development Feed @ BenNadel.com http://www.bennadel.com/ I've never used Underscore.js before. But, we're going to start using some Backbone.js at InVision ; and, since Underscore.js is a hard dependency of Backbone.js, we decided to use Underscore's template() method as our client-side HTML partial rendering engine. All client-side template engines attempt to answer the same questi ... Read More »]]></description>
<dc:subject>ifttt googlereader Ben Nadel ColdFusion jQuery And Web Development Feed @ BenNadel.com Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:1b67b13d0f9c/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Ben"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Nadel"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ColdFusion"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:jQuery"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:And"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Development"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Feed"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:@"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:BenNadel.com"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.nczonline.net/blog/2012/02/22/understanding-technical-debt/">
    <title>Understanding technical debt | NCZOnline</title>
    <dc:date>2012-08-20T01:52:14+00:00</dc:date>
    <link>http://www.nczonline.net/blog/2012/02/22/understanding-technical-debt/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Design Weekly http://web-design-weekly.com

Nicholas C. Zakas:

In the worst case, tech debt can accumulate to the point where the web application is destined to fail. A classic tech debt issue is scalability. Initially, the goal is to get the web application up and running so that anyone can use it. Decisions are made to allow that to happen. But an app that can handle 100 users isn’t built the same way as an app to handle 1,000,000 users. In the back of the developers’ minds are a list of things that need to happen in order to scale out: hit the database less, implementing several layers of caching, reduce the size of responses, figure out a faster way to process orders, and so on.

Just like monetary debt, tech debt is best dealt with before it gets too large and overwhelming. Regularly tending to tech debt is a process I like to call code hygiene. If you don’t go to the dentist for ten years and then finally go, chances are you’ll be in for a nasty surprise by not practicing proper dental hygiene. Code hygiene is the same. Keeping on top of your tech debt means regularly going in and addressing what you can with the time available.

Great article to pass onto your manager.

★]]></description>
<dc:subject>ifttt googlereader Web Design Weekly Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:325fdfd8ef1d/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Weekly"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.bennadel.com/blog/2402-Lazy-Loading-RequireJS-Modules-When-They-Are-First-Requested.htm">
    <title>Lazy Loading RequireJS Modules When They Are First Requested</title>
    <dc:date>2012-07-25T13:48:56+00:00</dc:date>
    <link>http://www.bennadel.com/blog/2402-Lazy-Loading-RequireJS-Modules-When-They-Are-First-Requested.htm</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Ben Nadel ColdFusion, jQuery, And Web Development Feed @ BenNadel.com http://www.bennadel.com/ I've been loving RequireJS as a framework that helps me think about my JavaScript applications in a more modular fashion. However, in my research and development, I've always been loading all of my RequireJS modules upfront, at the start of the application. As I've begun to move some RequireJS functionality into production, I've found myself not wanting to eagerly load modules that hardly ever get used. Rather, I'd like to lazy load some modules if, and only if they ever get requested by the ... Read More »]]></description>
<dc:subject>ifttt googlereader Ben Nadel ColdFusion jQuery And Web Development Feed @ BenNadel.com Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:ce203226cdd6/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Ben"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Nadel"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ColdFusion"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:jQuery"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:And"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Development"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Feed"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:@"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:BenNadel.com"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.developerdrive.com/2012/07/adding-responsive-videos-to-your-design/">
    <title>Responsive Web Design: Responsive Videos | Web development blog, news and tutorials - Developer Drive</title>
    <dc:date>2012-07-19T02:50:21+00:00</dc:date>
    <link>http://www.developerdrive.com/2012/07/adding-responsive-videos-to-your-design/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web development blog, news and tutorials - Developer Drive http://www.developerdrive.com

Responsive designs are all the hype in Web development communities nowadays. With videos becoming an important marketing tool on many websites, there is a growing need to incorporate responsive videos into these designs. Responsive videos are elastic and are especially favored where web pages will be viewed on different screen sizes using a variety of browsers.

Using the HTML5 video element however is not enough when handling video embed code that uses iframes and objects tags. Using the HTML5 video element will therefore not work for video found on most video sharing sites like YouTube and Vimeo. In order to do this,  you need to embed the code with a

container and specify the child elements with absolute positions. In this case, give 100% to both width and height. This forces the embed elements to automatically expand full width. Check out how this has been done in the markup below:

Demo: Elastic Videos

Resize your browser window to see the elastic videos

New YouTube Code (iframe)

Old YouTube Code (embed)

With fixed 600px wide wrapper

With fixed 500px wide wrapper

Here is the CSS for our responsive videos:

.video-container {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}

Using CSS, we have the option of making the video auto resize to the max width or height within the set boundaries using the “max-width” tag. Likewise, minimum width of the video element can be set using the min-width tag.

To restrict the width of videos, wrap the video with another

tag and specify a fixed width value for it as shown below:

.video-wrapper {
        width: 600px;
        max-width: 100%;
}

A working demo of the above code snippet can be seen here.
]]></description>
<dc:subject>ifttt googlereader Web development blog news and tutorials - Developer Drive Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:9d3e93b066e5/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:development"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:blog"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:news"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:and"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:tutorials"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:-"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Developer"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Drive"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://webbugtrack.blogspot.com/2012/07/microsoft-drops-support-for-features-in.html">
    <title>Web Bug Track: Microsoft drops support for features in Metro IE 10</title>
    <dc:date>2012-07-12T01:46:49+00:00</dc:date>
    <link>http://webbugtrack.blogspot.com/2012/07/microsoft-drops-support-for-features-in.html</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Bug Track http://webbugtrack.blogspot.com/ Microsoft drops support for features in Metro IE 10 Affects: IE10 Metro Microsoft has dropped support for some legacy IE-only features in IE10 (Metro version) in Windows 8 (due out later this year). Two methods in particular have been dropped: showModalDialog() and showModelessDialog(). Example:

However that's far from the complete list! Microsoft is also dropping support for common JavaScript features like: MS Pinned Sites, addBehavior, window.print(), window.prompt(), window.open(), window.external, onhashchange event, onoffline event, ononline event, AddSearchProvider(), AddToFavoritesBar(), and yes even window.alert(), window.confirm(), navigator.codeName, and of course there is no ActiveXObject support in IE10 Metro.
Known Workarounds: None.

Related Issues: Too many to count. Bug/Site Feedback | Submit a bug
]]></description>
<dc:subject>ifttt googlereader Web Bug Track</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:8d93cebfdc20/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Bug"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Track"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.bennadel.com/blog/2392-Domain-Models-Expose-Behavior-Not-State.htm">
    <title>Domain Models Expose Behavior, Not State</title>
    <dc:date>2012-07-05T14:16:12+00:00</dc:date>
    <link>http://www.bennadel.com/blog/2392-Domain-Models-Expose-Behavior-Not-State.htm</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Ben Nadel ColdFusion, jQuery, And Web Development Feed @ BenNadel.com http://www.bennadel.com/ A couple of weeks ago, I read an "anti-patterns" ORM (Object-Relational Mapping) blog post by Mehdi Khalili . In the post, Khalili said something that I found very interesting (paraphrased): The Domain Model should never be in an Invalid state because it doesn't expose state - it only exposes behaviors. As part of my journey towards an understanding of Obj ... Read More »]]></description>
<dc:subject>ifttt googlereader Ben Nadel ColdFusion jQuery And Web Development Feed @ BenNadel.com Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:4d52e99e7077/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Ben"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Nadel"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ColdFusion"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:jQuery"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:And"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Development"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Feed"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:@"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:BenNadel.com"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://github.com/necolas/idiomatic-css">
    <title>necolas/idiomatic-css · GitHub</title>
    <dc:date>2012-06-11T12:10:06+00:00</dc:date>
    <link>https://github.com/necolas/idiomatic-css</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Design Weekly http://web-design-weekly.com

Principles of writing consistent, idiomatic CSS. The days of a simple web page seem to be long gone for me so reading documents and adopting the best practices are a must to improve as a developer. This document is in its early days and will no-doubt evolve and become a “go-to” source.

The document is broken down into 8 sections:

General principles

Whitespace

Comments

Format

Naming

Practical example

Organization

Build and deployment

Each section is explained very clearly and the practical example ties all the explained styles/patterns into one very simple example.

If you are a passionate developer and don’t have a consistent styles/patterns when writing your code then head over to the Idiomatic CSS document on GitHub and maybe try to adopt some of the principles into your current or future projects.

“Part of being a good steward to a successful project is realizing that writing code for yourself is a Bad Idea™. If thousands of people are using your code, then write your code for maximum clarity, not your personal preference of how to get clever within the spec.”

- Idan Gazit
]]></description>
<dc:subject>ifttt googlereader Web Design Weekly Reading</dc:subject>
<dc:source>https://twitter.com/</dc:source>
<dc:identifier>https://pinboard.in/u:_m_space/b:afedfe11de1b/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Weekly"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://webdesignerwall.com/tutorials/setting-breakpoints-in-responsive-design">
    <title>Setting Breakpoints in Responsive Design</title>
    <dc:date>2012-06-08T13:48:20+00:00</dc:date>
    <link>http://webdesignerwall.com/tutorials/setting-breakpoints-in-responsive-design</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Designer Wall - Design Trends and Tutorials http://webdesignerwall.com Lately, I've been blogging a lot about Responsive Design. I've covered the technical side of media queries, basic implementation, full design tutorial, some CSS tricks, and a list of awesome responsive sites. Today, I want to talk about setting breakpoints in responsive design. How should you set the breakpoints? What is the general guideline? I'm [...]

Advertise here with BSA]]></description>
<dc:subject>ifttt googlereader Web Designer Wall - Design Trends and Tutorials Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:8b8055952676/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Designer"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Wall"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:-"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Trends"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:and"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Tutorials"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://webdesignerwall.com/tutorials/creating-a-modern-lightbox-with-css3-and-javascript">
    <title>Creating a Modern Lightbox with CSS3 and JavaScript</title>
    <dc:date>2012-05-28T18:01:16+00:00</dc:date>
    <link>http://webdesignerwall.com/tutorials/creating-a-modern-lightbox-with-css3-and-javascript</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Designer Wall - Design Trends and Tutorials http://webdesignerwall.com Today we have a guest post by Andy Walpole sharing his experience from creating the Lightbox Ultra on Mozilla Demo Studio. Several years ago developer Lokesh Dhakar created the familiar Lightbox script with Prototype and script.aculo.us. It's smooth animation and sleek aesthetics were an instant hit in the web design community and it was used [...]

Advertise here with BSA]]></description>
<dc:subject>ifttt googlereader Web Designer Wall - Design Trends and Tutorials Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:1b5dfa0f95c7/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Designer"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Wall"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:-"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Trends"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:and"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Tutorials"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design">
    <title>5 Useful CSS Tricks for Responsive Design</title>
    <dc:date>2012-05-16T19:16:19+00:00</dc:date>
    <link>http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Designer Wall - Design Trends and Tutorials http://webdesignerwall.com Making the design to be responsive is very easy as shown in my Responsive Design in 3 Steps tutorial, but maintaining the elements to look aesthetically balanced on all breakpoint layouts is an art. Today I'm going to share 5 of my commonly used CSS tricks along with sample cases for coding responsive designs. They [...]

Advertise here with BSA]]></description>
<dc:subject>ifttt googlereader Web Designer Wall - Design Trends and Tutorials Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:3cde9482776d/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Designer"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Wall"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:-"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Trends"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:and"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Tutorials"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.bennadel.com/blog/2374-Object-Calisthenics-In-JavaScript-An-Introduction.htm">
    <title>Object Calisthenics In JavaScript - An Introduction</title>
    <dc:date>2012-05-07T01:47:54+00:00</dc:date>
    <link>http://www.bennadel.com/blog/2374-Object-Calisthenics-In-JavaScript-An-Introduction.htm</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Ben Nadel ColdFusion, jQuery, And Web Development Feed @ BenNadel.com http://www.bennadel.com/ Several years ago, Brian Kotek introduced me to the concept of Object Calisthenics . Object Calisthenics is an exercise defined by Jeff Bay to help programmers think very critically about their application design choices in an object-oriented context. I attempted this exercise a long time ago; but, I was quickly flustered by my lack of understanding. Now, a few more years o ... Read More »]]></description>
<dc:subject>ifttt googlereader Ben Nadel ColdFusion jQuery And Web Development Feed @ BenNadel.com Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:47190df8f737/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Ben"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Nadel"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ColdFusion"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:jQuery"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:And"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Development"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Feed"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:@"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:BenNadel.com"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://web-design-weekly.com/2012/05/04/web-design-weekly-41/">
    <title>Web Design Weekly #41 | Web Design Weekly</title>
    <dc:date>2012-05-05T02:30:57+00:00</dc:date>
    <link>http://web-design-weekly.com/2012/05/04/web-design-weekly-41/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Design Weekly http://web-design-weekly.com

Headlines

The Vendor Prefix Predicament

Most importantly, set a good example. Use web standards first and foremost in your sites, articles, and talks. When discussing or demoing experimental features or standards-in-progress, whether in one browser or many, be up front with warnings, and make it clear what’s shiny today may break tomorrow. (alistapart.com)

JavaScript Style Guides And Beautifiers

Addy Osmani takes you exploration into JavaScript style guides, specifically: their importance, style guides worth reviewing and tools that can assist in automated code beautification or style enforcement. (addyosmani.com)

Building with Content Choreography

Responsive Web Design allows us to change layouts and element appearance based upon the width and/or height of the destination device. There can be stumbling blocks along the way to a beautiful unified site that runs perfectly on all platforms. Jordan Moore explains one that has been teasing him for a while. (jordanm.co.uk)

Blog.SpoonGraphics Turns 5 Years Old! (blog.spoongraphics.co.uk)

Introducing app-UI (tricedesigns.com)

Articles

Modularity and Style Guides

If you’re familiar with SMACSS, OOCSS or BEM, you’ll understand the concept of creating reusable “blocks” or “modules”. These are patterns, both visually and in code, that can be reused and expanded upon when building web pages. Done right, time and complexity are significantly reduced. (dbushell.com)

Viewport Sized Typography

Chris Coyier, as always, is quick to blog about rad stuff. In this post he writes about the new CSS3 values for sizing things relative to the current viewport size. As always, a great read. (css-tricks.com)

dConstruct optimisation

A good post by Jeremy Keith about the optimisation of the new dConstruct site. Lots of tips and links to help out with your next build. (adactio.com)

The power of negative reviews

Zack King argues that negative reviews are an opportunity that businesses must embrace, for if they don’t, they may lose control completely. (netmagazine.com)

LinkedIn For iPad: using local storage for snappy mobile apps (engineering.linkedin.com)

How We Operate – The Potential Client (esbueno.noahstokes.com)

My Coding Style and Guidelines (drublic.de)

As Tablet Size Decreases… (lukew.com)

CCSS: The Good Parts (impressivewebs.com)

Tools / Resources

Five responsive web design pitfalls to avoid

Creating great responsive experiences requires a hell of a lot more than media queries. There are a number of nasty traps to avoid when making your site responsive. Brad Frost reveals five of the biggest ones and how to sidestep them. (netmagazine.com)

Sketch

Sketch is a professional vector graphics app with a beautiful interface and powerful tools. They have set out to build a better app for graphic designers. Not to copy, but rather to improve. Looks interesting… (bohemiancoding.com)

Chrome DevTools’ script Live Edit feature combined with breakpoint debugging (youtu.be)

Simple CSS Colour Management With SASS (blog.12spokes.com)

Tooling & The Webapp Development Stack (paulirish.com)

CSS Layout Gets Smarter With CALC( ) (webkitbits.com)

Inspiration

ShopTalk – 16 with Ian Stewart, a Theme Wrangler for Automattic (shoptalkshow.com)

Interactive Typography Effects with HTML5 (tympanus.net)

Roundup of single page websites (webdesignerdepot.com)

Texturise web type with CSS (netmagazine.com)

Last But Not Least…

Rad IE

Some months ago, Microsoft kindly asked Ricardo Cabello for a HTML5 experiment. Sadly, he never managed to sign and fax them the NDA agreement so it never happened. He always felt bad that he didn’t get to do anything for them. He finally released his work which is awesome! (mrdoob.com)]]></description>
<dc:subject>ifttt googlereader Web Design Weekly Reading 41</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:ef8f45b7a6a1/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Weekly"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:41"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://web-design-weekly.com/2012/03/02/web-design-weekly-33/">
    <title>Web Design Weekly #33 | Web Design Weekly</title>
    <dc:date>2012-03-02T06:00:43+00:00</dc:date>
    <link>http://web-design-weekly.com/2012/03/02/web-design-weekly-33/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Design Weekly http://web-design-weekly.com

Headlines

Responsive Touch Interfaces

Matrix Transforms WOW! Plus a load of other great tips. Awesome video by Flickr Frontend Engineer Stephen Woods. He shares his hard-won advice for building responsive touch-based interfaces using HTML5, CSS, and JavaScript. Make time for it. (yuiblog.com)

httpster.net

A curated showcase of shit-hot web design with a less-is-more bent. Its aim is to showcase excellent use of HTML & CSS — and favour progressive enhancement and mobile adaptive layouts — but the currators apologise in advance for including poorly coded stuff if it just looks so damn good. (httpster.net)

About normalize.css

Nicolas Gallagher give a clear and detailed post on why you should use normalize.css. Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset. (website.com)

We need to kill off the Local Storage API (paul.kinlan.me)

Shiny Demos (shinydemos.com)

Articles

Responsive Design, Device Experiences, or RESS?

As more organizations realize they need to invest heavily in multi-device Web designs, the inevitable question of “how” comes up. Responsive Web design, separate sites, or something in between? Here Luke Wroblewski tries to simplify the decision. (lukew.com)

Responsive Navigation Patterns

As responsive design becomes more popular, it’s worth looking at the various ways of handling navigation for small screen sizes. Brad Frost (Mr Mobile Man!) gives a great overview of some of the more popular techniques for handling navigation in responsive designs. (website.com)

Capturing Audio & Video in HTML5

Audio/Video capture has been the “Holy Grail” of web development for a long time. For many years we’ve had to rely on browser plugins (Flash or Silverlight) to get the job done. Come on! HTML5 to the rescue. (html5rocks.com)

Responsive Summit – London

Elliot Jay Stocks does a great wrap up of the London Responsive Summit. He met with a small group of people to chat about the various tools, techniques, problems, and solutions surrounding the subject of responsive web design.(elliotjaystocks.com)

Addy Osmani’s tools he regularly find helpful (plus.google.com)

A Responsive Design Approach for Navigation. Part – 1 (filamentgroup.com)

Tools / Resources

Codiqa – Rapid Prototyping with jQuery Mobile

Build with 100% jQuery Mobile components. Take your idea, prototype your app, and output a high-quality, fully functional and standards-compliant jQuery Mobile website. No black-box code. No external libraries. No hassle. (codiqa.com)

Pull Down for Navigation

Mobile screen real estate is at a premium and one of the biggest problems to solve is how to display navigation when screen widths become quite narrow so Tom Kenny decided to have a look and see what he could come up with using some nifty CSS and a touch of jQuery. (website.com)

LESS-CSS3-Mixins

Comprehensive array of LESS mixins that allow you to use CSS3 features without having to worry about vendor prefixes. Awesome. (github.com)

Chaplin – an Application Architecture based on Backbone.js (github.com)

Breaking down onload event performance bookmarklet (6.7percentangel.com)

Essential Sublime Text 2 Plugins and Extensions (net.tutsplus.com)

A whole podcast full of Chrome DevTools news (javascriptjabber.com)

ChromeVox is a new screen reader for Chrome (chromevox.com)

Open source iconic fonts composer(nodeca.github.com)

Better Sass Docs (kaelig.fr)

Inspiration

Kickstarter projects that kick ass!

With projects on the innovative funding site breaking the $1million barrier, .net magazine select their favourite design-related projects to inspire your own efforts (netmagazine.com)

Chase Happiness (davegamache.com)

CSS3 Font Bird (martingauer.de)

Last But Not Least…

Vote for some #RWD threads!

Dress Responsively! What standards-loving, responsively-building, media-querying web citizens wouldn’t love some apparel which flies the flag of the future of the web? Get voting! (dressresponsively.com)]]></description>
<dc:subject>ifttt googlereader Web Design Weekly 33 Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:a7a91b306d19/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Weekly"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:33"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.developerdrive.com/2012/02/moving-web-page-elements-using-the-css3-translate-transform/">
    <title>Moving Web Page Elements Using The CSS3 Translate Transform | Web development blog, news and tutorials - Developer Drive</title>
    <dc:date>2012-02-10T04:30:52+00:00</dc:date>
    <link>http://www.developerdrive.com/2012/02/moving-web-page-elements-using-the-css3-translate-transform/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web development blog, news and tutorials - Developer Drive http://www.developerdrive.com

CSS3 offers a wealth of possibilities in terms of visual and interactive effects, even allowing you to create animated elements without the need for either Flash or JavaScript. In this tutorial we’ll go through the process of translating a page element using a CSS3 transform.

The translate function essentially moves an element by a specified distance along the X and Y axes. You do need to provide browser-specific code to create reliable transforms, but the technique is not particularly complex.

Create your Page

We want to start by creating a Web page with a simple element for demonstration. You can use the following HTML5 code:

I move

As you can see we have a page with a single element in it and an area for CSS code in the head section. The element has a class name for identification in CSS and a small amount of text, but you can put anything you want in yours.

Style the Element

So that we can see exactly where the element’s bounds are, let’s give it some basic styling properties in the CSS head section:

div.moves {
height: 200px;
width: 200px;
background:#0000FF;
color:#FFFFFF;
padding:10px;
}

View your page in a browser at this point so that you can see the change when you apply the translate transformation.

Apply the Translate

Inside the same CSS block for your “div.moves” element, add the following code to translate the element by a specified amount:

transform:translate(200px, 100px);

This is the generic version of the code, taking two parameters representing the amount of pixels to move the element along the X and Y axes. To cope with specific browsers, amend your code as follows:

/*General*/
transform:translate(200px, 100px);
/*Firefox*/
-moz-transform:translate(200px, 200px);
/*Microsoft Internet Explorer*/
-ms-transform:translate(200px, 100px);
/*Chrome, Safari*/
-webkit-transform:translate(200px, 100px);
/*Opera*/
-o-transform:translate(200px, 100px);

The code for each browser type has a simple prefix in front of the transform keyword. View your page in the browser and you should see the element change position 200 pixels across and 100 pixels down the page (as long as your browser supports these CSS3 properties). The translate transform can be passed parameters indicating a specific length as in this example, but can also take negative numbers or percentage values representing the length. The following code moves the element up and left:

transform:translate(-200px, -100px);

The following version uses percentage values:

transform:translate(20%, 10%);

Axis-Specific Methods

If you only want to move your element along one axis, you can use translateX or translateY, as in the following examples:

/*only along x axis*/
transform:translateX(200px);

/*only along y axis*/
transform:translateY(100px);

Make It Interactive

We’ve covered the basics of using the translate transform in CSS3, but the results are pretty boring at the moment. The beauty of being able to use these functions in CSS is that you will ultimately be able to create interactive animations in your pages using only HTML and CSS code. To demonstrate, alter your CSS as follows:

/*default properties*/
div.moves {
height: 200px;
width: 200px;
background:#0000FF;
color:#FFFFFF;
padding:10px;
}

/*on mouse hover*/
div.moves:hover {
/*General*/
transform:translate(200px,100px);
/*Firefox*/
-moz-transform:translate(200px,200px);
/*Microsoft Internet Explorer*/
-ms-transform:translate(200px,100px);
/*Chrome, Safari*/
-webkit-transform:translate(200px,100px);
/*Opera*/
-o-transform:translate(200px,100px);
}

Now the translation does not occur until you hover your mouse over the element, because we have moved the translation code into a CSS hover section.

Animate It

We’ve made the translation interactive, so let’s go a step further and animate it using a CSS3 transition. Add the following to the “div.moves” CSS block:

/*general version*/
transition: all 5s;
/*browser specific versions*/
-moz-transition: all 5s;
-ms-transition: all 5s;
-webkit-transition: all 5s;
-o-transition: all 5s;

You can optionally specify an easing property and a delay before the animation starts. Please note that your own browser may support some but not all of these CSS3 properties, particularly the transition effects – Opera and Chrome tend to be the most reliable in my experience.

Conclusion

It goes without saying that CSS3 properties are not yet reliable in terms of browser support. However, they do give an exciting glimpse into the future of Web development, in which the page markup itself will offer a far more engaging experience than ever before.
]]></description>
<dc:subject>ifttt googlereader Web development blog news and tutorials - Developer Drive Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:6189c9433368/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:development"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:blog"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:news"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:and"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:tutorials"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:-"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Developer"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Drive"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://web-design-weekly.com/2012/02/10/web-design-weekly-30/">
    <title>Web Design Weekly #30 | Web Design Weekly</title>
    <dc:date>2012-02-10T04:07:03+00:00</dc:date>
    <link>http://web-design-weekly.com/2012/02/10/web-design-weekly-30/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Design Weekly http://web-design-weekly.com

Headlines

Mobile Web Resources

“Where do I go to learn about all this stuff?” An extensive list of helpful tools and resources that can help you create great mobile web experiences. Maintained by Brad Frost. AWESOME!!!! (mobilewebbestpractices.com)

Remote-Tilt

Testing motion events was never going to be an easy task. You have two options, both of which suck. Thats why Remy Sharp developed Remote-Tilt. By including a single line of JavaScript you can emulate device motion events. (remote-tilt.com)

Moving an element along a circle (lea.verou.me)

CSS Variables (W3C draft specification) (dev.w3.org)

Chrome for Android (chrome.blogspot.com.au)

Web Developer at Mozilla [JOB] (careers.mozilla.org)

Articles

Musings on Preprocessing

Chris Coyier has been using SASS for pretty much everything he has done recently. He explains his journey. From hold-ups, to trip-ups, to turn-offs. From apps and teams to workflows and syntax. (css-tricks.com)

Control image aspect ratios with CSS3

Making media display consistently on your site can be a problem, especially with multiple content authors. Opera’s Chris Mills shows you how object-fit and object-position can solve it. (netmagazine.com)

Why Developers Hate Your Designers Guts

It’s no secret designers and developers have been at each other since the distinction between the 2 was formed. It is time to put an end to this battle for pixel perfection vs. getting this site actually working in IE. (vaughanmoffitt.com)

Content strategy at Facebook

Facebook’s content strategists work on the large scale: 800 million users; more than 900 million pages, groups, events, and community pages; 250 million new photos uploaded every day. Earlier this month, Tiffani Jones Brown gave Contents Magazine a behind-the-scenes look at the growing Facebook CS team, how they work, and how the company thinks about content. (contentsmagazine.com)

Design the perfect URL (netmagazine.com)

Better numerical inputs for mobile forms (bradfrostweb.com)

Exactly how much CSS3 does your browser support? (lea.verou.me)

People to follow on GitHub (jakebresnehan.com)

Tools / Resources

Pears – common patterns of markup & style

Collect, test, and experiment with interface pattern pairings of CSS & HTML. Pears is an open source WordPress theme, enabling people like you to get your own pattern library up and running quickly. (pea.rs)

A Beginners Guide to HTML & CSS (learn.shayhowe.com)

jQuery Collapse Plugin (webcloud.se)

WP Function – Quickly build functionality for your next WordPress project (wpfunction.me)

Foldy960 – A responsive 960 grid from Paravel (github.com)

Bless CSS (blesscss.com)

Create — A new kind of web editing interface (createjs.org)

The Web Ahead with Divya Manian (5by5.tv)

HTML5 Boilerplate 3.0 is out! (html5boilerplate.com)

Modernizr 2.5: Supercharged for 2012 (modernizr.com)

yepnope.js 1.5 is live! (yepnopejs.com)

Inspiration

Robbie Manson: The Mindful Designer

We face a challenge: to ensure our design responses are informed more by our thinking than the tools we use. Absorbed by day-to-day execution, we can forget the importance of mistakes and accidents — of balancing intent with experimentation. (vimeo.com)

dConstruct 2011 talks (sweet resource) (dconstruct.org)

Amazing dynamic ASCII art (nkwiatek.com)

Last But Not Least…

Help make WDW become the raddest, most badass email newsletter to hit the inbox! (github.com/jakebresnehan)]]></description>
<dc:subject>ifttt googlereader Web Design Weekly 30 Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:a0a068598030/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Weekly"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:30"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://web-design-weekly.com/2012/01/12/web-design-weekly-26/">
    <title>Web Design Weekly #26 | Web Design Weekly</title>
    <dc:date>2012-01-15T02:02:14+00:00</dc:date>
    <link>http://web-design-weekly.com/2012/01/12/web-design-weekly-26/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Design Weekly http://web-design-weekly.com

Headlines

Smashing Magazine (re-design)

Big move by the Smashing Magazine team. A huge task that was much needed and executed very well. If you haven’t dug into the code already, head over now and why you are there, give those guys a pat on the back. (smashingmagazine.com)

CSS Selector Performance has changed!

Nicole Sullivan dives back into CSS Performance. Focusing on Style Sharing, Rule Hashes, Ancestor Filters and Fast Path. (calendar.perfplanet.com)

Shop Talk – Chris Coyier and Dave Rupert’s new podcast. (shoptalkshow.com)

iOS-Orientationchange-Fix (github.com/scottjehl)

Articles

Seven things still missing from CSS

CSS has come a long way but it’s not perfect (yet). Molly Holzschlag, passionate standardista and open web evangelist, quizzed her peers to find out what they see as the most frustrating aspects of CSS. (netmagazine.com)

The contenteditable attribute

Jack Osborne explains now with the contenteditable attribute, things have got a whole lot easier. In this article, he tells you what the attribute is for, how it works, and how we can take things further. (html5doctor.com)

Are vendor prefixes hurting the web?

There’s been a lot of controversy about vendor prefixes lately, but what do the .Net panellists think? (netmagazine.com)

Sublime Text 2 Tips and Tricks (Updated) (net.tutsplus.com)

Google Web Fonts, now more compressed (googlecode.blogspot.com)

How to name a web browser (by those who have) (blogs.msdn.com)

Responsive Data Table Roundup (css-tricks.com)

Climbing the Ladder in the Web Industry (thinkvitamin.com)

Profiling CSS for fun and profit. Optimization notes (perfectionkills.com)

Tools / Resources

Backbone Fundamentals

Addy Osmani has started a ‘Free’ work-in-progress book for developers of all levels. Lets all help him finish it! (addyosmani.com)

PXLoader – A JavaScript Preloader for HTML5 Apps (thinkpixellab.com)

Build Conference Videos (buildconf.com)

New High-Quality Free Fonts (smashingmagazine.com)

Faster button styling with SASS (netmagazine.com)

Fullscreen Background Image Slideshow with CSS3 (tympanus.net)

HTML5 Reference Poster (xhtml-lab.com)

Inspiration

Fine Goods Market

A hypertext boutique featuring fine goods crafted by Rogie King. Beautifully executed! (finegoodsmarket.com)

The Latest Apps Built with PhoneGap (phonegap.com/apps)

A good list of podcasts by Max Wheeler. (Not all tech related) (makenosound.com)

A Christmas tree made out of form elements! Old, but Awesome. (hakim.se)

Cut the Rope – Behind the scenes video (cuttherope.ie)

iPhone 4 in pure CSS3! (tjrus.com/)

Last But Not Least…

Photoshop in the Browser! (Chrome) (visualidiot.com)]]></description>
<dc:subject>ifttt googlereader Web Design Weekly 26 Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:0d2256101665/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Weekly"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:26"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://web-design-weekly.com/2011/12/16/web-design-weekly-25/">
    <title>Web Design Weekly #25 | Web Design Weekly</title>
    <dc:date>2012-01-12T04:17:10+00:00</dc:date>
    <link>http://web-design-weekly.com/2011/12/16/web-design-weekly-25/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Web Design Weekly http://web-design-weekly.com

Headlines

Dabblet

Lea Verou once again has been coding like crazy!! This time she has developed an interactive CSS playground for all to enjoy. Happy experimenting! (lea.verou.me)

Icons with Fonts and Data- Attributes

Traditionally, bitmap formats such as PNG have been the standard way of delivering iconography on websites. They’re quick and easy, and it also ensures they’re as pixel crisp as possible. Jon Hicks give a great overview of why web fonts are taking over. (24ways.org)

WordPress 3.3 “Sonny” (wordpress.org)

Shortest possible valid (X)HTML documents (mathiasbynens.be)

Internet Explorer to auto-update (netmagazine.com)

Killa slides about polyfills, cross-browser HTML5 and feature detection (addyosmani.com)

Articles

25 Secrets of the Browser Developer Tools

Over the last few years there has been one tool that has helped out every web developer more than any other – the browser developer tools. Working in harmony with the web browser, the developer tools allows us to manipulate DOM elements, CSS styles, JavaScript and other useful information from the same window often in real time. (andismith.com)

Six CSS Layout Features To Look Forward To

A few concerns keep bobbing up now and then for Web developers, one of which relates to how to lay out a given design. Developers have made numerous attempts to do so with existing solutions. Divya Manian explains the six layout proposals that are relevant to us and how they will help developing websites in the future. (smashingmagazine.com)

Chrome 15 Becomes World’s Most Popular Browser

Google’s Chrome 15 has become the most popular web browser version worldwide for the first time on a weekly basis, according to StatCounter. Paul Irish had some wise words to add…

The funny thing about the “Chrome 15 is top browser” headlines is that they are already out of date. Chrome 16 shipped Tuesday and by the end of the week nearly all 200M Chrome users will have it. So Chrome 15 is about to go from the #1 browser to having fewer users than IE6 in a matter of days. I couldn’t be happier. (statcounter.com)

Fluid grids, orientation & resolution independence

If you’ve spent any time building responsive websites with fluid grids, you will have encountered the shock of seeing your beautiful portrait layout distort when viewed in landscape mode (or vice-versa). (responsivenews.co.uk)

Software Architects Need More Respect: Hacker Culture Is Overdone (bernardlunn.wordpress.com)

The Secret Lives of Links (lukew.com)

The Problem With CSS Pre-Processors (millermedeiros.com)

How to make a web standards proposal (sites.google.com)

Tools / Resources

10 LESS CSS Examples You Should Steal for Your Projects

The Design Shack hooks you up with ten incredibly useful LESS snippets that you can drop into your projects today. (designshack.net)

Jeffery Way started compiling a huge list of HTML5 tools, folks, and sites to pay attention to. Please freely add to it. (openetherpad.org)

2011 in review: 15 web conference talks you need to watch (netmagazine.com)

TextMate 2.0 Alpha (macromates.com)

Inspiration

Taking Stock – John O’Nolan’s thoughts.

There are far too many talented people squandering their time arguing over whether or not an ‘a’ tag should always be inside a ‘p’ tag, rather than using their powers to instigate positive change in both the web… and the world. (john.onolan.org)

Small Studio (smallstudio.com.au)

The HTML5 Game Lab – Helps fund projects for the new open web games industry. (gamelab.bocoup.com)

35 Icon Design Tutorials for Photoshop (vandelaydesign.com)

Grid­lover (gridlover.net)

HTML5 and CSS3 Advent 2011 (html5advent2011.digitpaint.nl)

The Single Lane Superhighway (chromeexperiments.com)

Last But Not Least…

Well, this is the last weekly round up for the year. I feel it’s been an awesome 25 issues so far and with every issue I am blown away with the energy and effort everyone in the web community is putting in to making the web radical!

The next few weeks will be quite hectic I am sure for both you and I and will require some down time. Be sure to drink lots of beer, unplug (from your computer) and enjoy the festive season because 2012 is going to be off the HOOK!!

The next instalment should be arriving in your inbox around mid January.

Have a good one! JakeyB]]></description>
<dc:subject>ifttt googlereader Web Design Weekly 25 Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:209b0dfe3c4a/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Weekly"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:25"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.bennadel.com/blog/2311-Using-jQuery-Deferred-To-Create-Compound-Objects-From-Multiple-Asynchronous-Data-Sources.htm">
    <title>Using jQuery Deferred To Create Compound Objects From Multiple Asynchronous Data Sources</title>
    <dc:date>2012-01-12T02:47:10+00:00</dc:date>
    <link>http://www.bennadel.com/blog/2311-Using-jQuery-Deferred-To-Create-Compound-Objects-From-Multiple-Asynchronous-Data-Sources.htm</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Ben Nadel ColdFusion, jQuery, And Web Development Feed @ BenNadel.com http://www.bennadel.com/ As of now, all of my experimentation with modular JavaScript application architecture has been exclusive to client-side code. That is, it involves Views and Controllers, but no real sense of any Model that is tied to a persistent data store. As I've started to think about experimenting with the Model facet of client-side MVC (Model-View-Contr ... Read More »]]></description>
<dc:subject>ifttt googlereader Ben Nadel ColdFusion jQuery And Web Development Feed @ BenNadel.com</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:f397fd7ba24a/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Ben"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Nadel"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ColdFusion"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:jQuery"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:And"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Development"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Feed"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:@"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:BenNadel.com"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.bennadel.com/blog/2310-Using-The-RequireJS-Build-Optimizer-To-Concatenate-Modularized-CSS-Files.htm">
    <title>Using The RequireJS Build / Optimizer To Concatenate Modularized CSS Files</title>
    <dc:date>2012-01-12T02:47:09+00:00</dc:date>
    <link>http://www.bennadel.com/blog/2310-Using-The-RequireJS-Build-Optimizer-To-Concatenate-Modularized-CSS-Files.htm</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[from Ben Nadel ColdFusion, jQuery, And Web Development Feed @ BenNadel.com http://www.bennadel.com/ A little while back, I started looking at RequireJS as away to organize and modularize my JavaScript code . And, while I am still getting my feet wet in modular JavaScript web application development, I can tell you that I have really enjoyed using RequireJS - and, that I plan to continue to integrate it into my development process. The asynch ... Read More »]]></description>
<dc:subject>ifttt googlereader Ben Nadel ColdFusion jQuery And Web Development Feed @ BenNadel.com</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:57e22d63e8d2/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:googlereader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Ben"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Nadel"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ColdFusion"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:jQuery"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:And"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Development"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Feed"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:@"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:BenNadel.com"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.12412.org/">
    <title>12412 - Experience and learn 12 new web technologies in 12 months</title>
    <dc:date>2011-12-30T19:25:25+00:00</dc:date>
    <link>http://www.12412.org/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[Here’s a challenge for the new year: use each month as an opportunity to try out a new web technology.



  Set yourself small, achievable projects to work on and use 12412.org as a support group. We will all help to motivate each other and join in to offer help where we can.





Tagged with
web
technology
challenge
12412
learning

]]></description>
<dc:subject>web technology challenge 12412 learning</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:af376b26abc9/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:technology"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:challenge"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:12412"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:learning"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://isthewebdead.com/">
    <title>Is the web dead?</title>
    <dc:date>2011-12-26T18:36:40+00:00</dc:date>
    <link>http://isthewebdead.com/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[View source.




Tagged with
web
singleserving
http
viewsource
browsers

]]></description>
<dc:subject>web singleserving http viewsource browsers Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:8a7d74ec8295/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:singleserving"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:http"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:viewsource"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:browsers"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://blog.tommilway.com/post/14322949339/how-to-build-a-modern-website-in-2011">
    <title>How To Build a Modern Website in 2011 - Tom Milway - Blog</title>
    <dc:date>2011-12-22T18:11:38+00:00</dc:date>
    <link>http://blog.tommilway.com/post/14322949339/how-to-build-a-modern-website-in-2011</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[A good round-up of what web development means today …and what web developers need to do to keep pace.




Tagged with
web
development
mobile
responsive
typography

]]></description>
<dc:subject>web development mobile responsive typography Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:fe9923b40be9/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:development"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:mobile"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:responsive"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.lukew.com/ff/entry.asp?1436">
    <title>LukeW | Multi-Device Web Design: An Evolution</title>
    <dc:date>2011-12-15T03:02:19+00:00</dc:date>
    <link>http://www.lukew.com/ff/entry.asp?1436</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[s mobile devices have continued to evolve and spread, so has the process of designing and developing Web sites and services that work across a diverse range of devices. From responsive Web design to future friendly thinking, here's how I've seen things evolve over the past year and a half.



If you haven't been keeping up with all the detailed conversations about multi-device Web design, I hope this overview and set of resources can quickly bring you up to speed. I'm only covering the last 18 months because it has been a very exciting time with lots of new ideas and voices. Prior to these developments, most multi-device Web design problems were solved with device detection and many still are. But the introduction of Responsive Web Design really stirred things up.
]]></description>
<dc:subject>mobile responsive webdesign design ux web web_design webdev</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:13fc29113c21/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:mobile"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:responsive"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ux"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:web_design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:webdev"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://scripting.com/stories/2011/12/13/whyAppsAreNotTheFuture.html">
    <title>Scripting News: Why apps are not the future</title>
    <dc:date>2011-12-14T19:42:20+00:00</dc:date>
    <link>http://scripting.com/stories/2011/12/13/whyAppsAreNotTheFuture.html</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[Spot. On.



  The great thing about the web is linking. I don’t care how ugly it looks and how pretty your app is, if I can’t link in and out of your world, it’s not even close to a replacement for the web. It would be as silly as saying that you don’t need oceans because you have a bathtub.





Tagged with
web
apps
native
mobile
links
linking
hypertext
hyperlinks

]]></description>
<dc:subject>web apps native mobile links linking hypertext hyperlinks Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:f2a230a8f23d/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:apps"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:native"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:mobile"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:links"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:linking"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:hypertext"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:hyperlinks"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://movethewebforward.org/">
    <title>Move The Web Forward | Guide to getting involved with standards and browser development</title>
    <dc:date>2011-12-01T02:17:35+00:00</dc:date>
    <link>http://movethewebforward.org/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[A call-to-arms for web developers combined with a handy list of projects you can get involved in.




Tagged with
development
opensource
standards
projects
community

]]></description>
<dc:subject>web html5 resources web_standards html css webdesign webdev development opensource standards projects community Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:f2fdfb90c630/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:html5"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:resources"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:web_standards"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:development"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:opensource"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:standards"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:projects"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:community"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.zurb.com/article/840/want-engagement-pace-yourself">
    <title>Want Engagement? Pace Yourself.</title>
    <dc:date>2011-11-30T03:53:42+00:00</dc:date>
    <link>http://www.zurb.com/article/840/want-engagement-pace-yourself</link>
    <dc:creator>_m_space</dc:creator><dc:subject>strategy web touchpoints customer_engagement</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:1fd00498e8f5/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:strategy"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:touchpoints"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:customer_engagement"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://feedproxy.google.com/~r/Addictivetips/~3/G8YG4CmCQJU/">
    <title>Turn Photos Into Stunning Paintings With PsykoPaint [Web]</title>
    <dc:date>2011-11-25T12:33:15+00:00</dc:date>
    <link>http://feedproxy.google.com/~r/Addictivetips/~3/G8YG4CmCQJU/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[Most photo editors out there come with basic editing options and different kinds of filters, but PsykoPaint, a free web app, does something totally different. You can change photos into amazing and creative paintings by using stylish brushes. All functionalities can be accessed, except the layer functionality, which only becomes available after registration. However, you can log in with your Facebook account to save images, share them online or create e-cards. Just upload a photo and start painting on top of it. The web app supports multiple types of brushes and styles that you can choose from, and also lets you save paintings on your computer for later use.

PsykoPaint has three basic modes, Good Old painting, Paint A Photo and Try A Sample. You can upload a photo from your system. Once uploaded, change the dimensions of the photo by using the slider and click Paint to start painting your photo.



Different types of brushes are available, which can be accessed from the bottom left corner. You’ll notice that some brushes are named after famous artists, such as Van Gogh and Degas. There many other creative brush styles as well, including Butterflies, Ribbons, Fireworks etc. In addition to that, when you mouse over a a brush type, you will be able to preview its effect in a tiny box, and you can also change the size and opacity of each brush with sliders.



A click on Details option in the brushes menu launches preferences to change a brush’s shape. A total of ten different customization options are available.



Use the Color options to adjust the Colorfulness, Color, Brightness and Contrast. Furthermore, you can also choose a Color tint. Zooming in and out is done with the scroll wheel or slider displayed at the bottom of the page. You may undo and redo any changes as well.



Once you’re done, click File. Here you will find Export Image, Share Online, Create a Card, Save Project and New Project. Exporting the picture has three options, Thumbnail, Full-size & Watermark, out of which Full-size is paid.



It also allows you to send an e-card to your friends and family by simply adding an email address and a name. Card styles can also be modified.



PsykoPaint is one creative web app that lets you change your photos into gorgeous paintings, all in a fun and easy way. Give it a shot, and let us know what you think.

Visit Psykopaint



Related Articles:Turn Your Family Vacation Photos Into HD Video Slideshows
UnitedStyles: Design Stunning Outfits & Get Doorstep Delivery [Web]
iPiccy: Yet Another Web App To Edit, Beautify And Share Photos

]]></description>
<dc:subject>Internet featured photo_editing web</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:52947255435c/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Internet"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:featured"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:photo_editing"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:web"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://github.com/h5bp/html5-boilerplate/issues/816">
    <title>#816: Revert mobile-first media queries and remove respond.js - Issues - h5bp/html5-boilerplate - GitHub</title>
    <dc:date>2011-10-29T23:00:03+00:00</dc:date>
    <link>https://github.com/h5bp/html5-boilerplate/issues/816</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[liked items / from Adactio 
This thread on whether HTML5 Boilerplate should include Respond.js by default (and whether the CSS should take a small-screen first approach) nicely summarises the current landscape for web devs: chaotic, confusing …and very, very exciting.

Tagged with
re

]]></description>
<dc:subject>ifttt_googlereader_Adactio_(author_unknown) responsive respond css3 mediaqueries web development discussion futurefriendly ffly mobilefirst 816 Reading</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:b6d8b666b02a/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ifttt_googlereader_Adactio_(author_unknown)"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:responsive"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:respond"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:css3"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:mediaqueries"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:development"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:discussion"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:futurefriendly"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ffly"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:mobilefirst"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:816"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Reading"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://bohemianalps.com/tools/grid/">
    <title>The Heads-Up Grid</title>
    <dc:date>2011-10-06T21:53:36+00:00</dc:date>
    <link>http://bohemianalps.com/tools/grid/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[The Heads-Up Grid is an overlay grid for in-browser website development, built with HTML + CSS + JavaScript.
]]></description>
<dc:subject>grids web css grid responsive</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:e7df342da93d/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:grids"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:grid"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:responsive"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://blog.frankchimero.com/post/9594863189">
    <title>via Frank : Designers vs Coding</title>
    <dc:date>2011-08-30T22:31:05+00:00</dc:date>
    <link>http://blog.frankchimero.com/post/9594863189</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[
  Good design and good markup provide structure to content. Good markup is a fundamental part of good design: beautiful on the inside, beautiful on the outside. HTML and CSS give another venue to provide structure to content in the native language of the web, and learning these guides decisions by surfacing the affordances of the medium.





Tagged with
html
design
web
markup
css

]]></description>
<dc:subject>html design web markup css</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:aa2e27277492/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:markup"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:css"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://blogs.adobe.com/edtechatadobe/2011/08/fireworks-mobile-design-tip-exporting-layers-to-files.html">
    <title>Fireworks Mobile Design Tip: Exporting Layers to Files</title>
    <dc:date>2011-08-15T23:54:53+00:00</dc:date>
    <link>http://blogs.adobe.com/edtechatadobe/2011/08/fireworks-mobile-design-tip-exporting-layers-to-files.html</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[In July of 2011, I presented a Fireworks session at D2WC called Wireframing and Prototyping for Mobile using Adobe Fireworks. I was so pleased to see a very full room of attendees. Even happier to note that many were not current Fireworks users.

Yes, I did say happy. The reason is simple. I want people to know what they’re missing out on.   As you might be noticing, I’m a big Fireworks fan. Huge, even.

My original goal with this session was to focus on some sample prototypes and wireframes, but based on the crowd and many of the questions fired at me, I changed the slant slightly and talked more about how many of the Fireworks built-in features are designed to save you time, without sacrificing quality. Time is money as they say. Projects are quoted on estimated number of hours, so the sooner you can complete a wireframe or a prototype, the sooner you can move forward to actually wiring up the actual application, and the happier everyone is.

The sooner students can learn how to achieve optimum results in less time, the more employable they are.

As usual, I had way more content than I needed or had time to use, so I’ve posted the files (including brief slide deck, a couple tutorials and LOTS of assets) on my web site.

Aside from using Fireworks pages to mock up wireframes and prototypes, FW also has many other built-in features that can really help with any kind of prototyping, especially mobile.

A couple things I really wanted to get to in my session but ran out of time were:


Exporting layers to files
Batch processing for mobile

In this tutorial we’ll look at exporting layers to files.  I’ll also be releasing a new tutorial that will cover batch processing the new files created from this tutorial.

Design Elements for Mobile
Let’s say you’re not building a mock up. Let’s say you’re focused on application icons for that mock up. Or other common visual elements like logos. How can Fireworks help?

Layers or Pages can definitely help. In my example I’ve used layers to place different icons for a variety of D2WC speakers.


Figure 1 - Completed icon file 

But it all started with a single icon design. In this case I created an icon for my good friend and fellow speaker/educator, Tom Green. As you can see from the final version above, the icon went through some design changes, but the general look and feel remain the same.



This simple design consists of 4 objects:


Outer rounded rectangle with gradient fill and inner glow (for depth)
Inner rounded rectangle for stroke accent
2 text blocks, one for each letter. I used separate text blocks so I had complete control over positioning of each letter.

It took me longer to decide what I was going to do than it took to create the icon.

Creating New Iterations

Once the first icon was built, I went to the Layers panel and dragged the entire layer to the New/Duplicate Layer icon at the bottom of the panel, to duplicate all the contents of the layer in a brand new layer.
Holding down the Shift key, I tapped the right arrow key several times until the contents of the new layer were positioned away from the contents of the original layer.
Then I deselected the objects by clicking outside the canvas area. With nothing active on the canvas, the Properties panel displays a button called Fit Canvas.
I clicked on that button and Fireworks automatically resizes the canvas to fit both icons.
I repeated this process of duplicating and moving layers until I had 8 layers, visually separated from each other.
Then one more click to fit the canvas to the images on the canvas.

Pretty cool! Also note that if you scale an object or objects on the canvas smaller that the original size, you can use the Fit Canvas button to shrink the canvas as well.

Then, once I had all those duplicates, I selected the various vectors and change the gradient colors, stroke colors, text colors from the Properties panel. Now that’s all well and good, but all those icons are in ONE file. I needed 8 separate files, and I wanted to keep my editable version, too. No problem.

Exporting Layers to Files
Using this export workflow, I can export flattened versions of each icon as a separate graphic.


First I went to the Optimize panel and changed the global optimization settings from the default GIF format to PNG32. (When the canvas is transparent, exporting as PNG32 from Fireworks creates a flattened bitmap with a transparent background – handy if your graphic is not a rectangle.)
I saved the file as a Fireworks PNG file for future editing.
Then – the cool part – I chose File > Export.
I selected a destination folder from the main Export window, not worrying about the file naming.
From the Export list, I chose Layers to Files.
I clicked on the Options button and made sure that the File Type is set to Use document optimize settings.
Back in the main Export window, I pressed the Export button.

A few seconds later, I had a folder containing eight flattened PNG files with transparent backgrounds. But my editable versions of all those files still resided in a single file. Cool, in my view.

Conclusion
You might be wondering why I used layers instead of pages. Basically, this method worked for me because I could see all the icon iterations at the same time, making it easy for me to compare and tweak the designs. Using pages instead of layers would have given me a smaller Fireworks PNG file in terms of dimensions, but I would have had to switch from page to page to check icons. That said, if you’re more comfortable using pages for this type of work, there is no reason not to. Fireworks does, after all, include an export workflow for Pages to Files.  

Batch processing adds even more power to this workflow, because I can create custom Batch processing scripts to export the original files in multiple sizes. In the next tutorial, we’ll dive into Batch Processing in Fireworks.
]]></description>
<dc:subject>Adobe_CS5.5 Creative_Suite Students Tutorials Web adobe Adobe_Fireworks icons mobile workflow</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:9d4e3f58ca66/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Adobe_CS5.5"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Creative_Suite"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Students"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Tutorials"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:adobe"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Adobe_Fireworks"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:icons"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:mobile"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:workflow"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.jenitennison.com/blog/node/158">
    <title>TAG F2F, June 2011</title>
    <dc:date>2011-06-17T10:44:12+00:00</dc:date>
    <link>http://www.jenitennison.com/blog/node/158</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[As you may know, I accepted an appointment to the W3C’s Technical Architecture Group earlier this year. Last week was the first face-to-face meeting that I attended, hosted in the Stata Center at MIT. As you can tell from the agenda (which was in fact revised as we went along) it was a packed three days.


What I intend to do here is to briefly report on the major areas that we discussed and give a tiny bit of my own personal take on them. In no way should any of what I write here be judged as revealing the official opinion of the TAG, it’s just me saying what I think, and I’m not going to go into anything in depth because they’re all incredibly gnarly and contentious topics and I’d not only be here all year but also end up in a tar pit.




Role of the TAG

Usefully for me as a newcomer, our first session was about the ongoing role of the TAG. The TAG occupies a unique position within the W3C. According to its charter it was set up



  To improve the effectiveness of Working Groups, to reduce misunderstandings and overlapping work, and to improve the consistency of Web technologies developed inside and outside W3C



The TAG ultimately has three routes to do this:



by providing specific advice on issues that are brought to its attention
by writing documents on basic web architecture principles that go through community review, particularly through the general review of the W3C standards track and become Recommendations
by advising the W3C Director (Tim Berners-Lee) about what he should do on the extremely rare occasions when there are issues that he is supposed to adjudicate on


In none of these cases is there anything that binds the people receiving the advice of the TAG, or reading Findings or Recommendations made by the TAG, to accept them or do anything about them. The power and authority of the TAG depends solely on the quality and utility of its arguments, which is how it should be in my opinion.


Client-Side Application State

The first technical session was about client-side application state and was a review of the Identifying Application State draft that T.V. Raman began before he left the TAG and that Ashok Malhotra has been working on since. This should in the next few months or so be published as a TAG Finding (though it is currently on the Recommendation track).


This work is essentially about documenting the different ways in which you can identify application state within a URI, why that’s a useful thing to do, and some of the pitfalls of using hash URIs to do so. Most of the discussion was about details to do with wording within the document. One thing I thought particularly interesting was the point that URI-based application state is relevant in all ‘active content’, not just in HTML; for example, scripting in SVG or in PDFs bring the same considerations.


Buffer Bloat

Over lunch on Monday we listened to and discussed a presentation by Jim Gettys on buffer bloat. Basically (and all the errors here are introduced by me), TCP/IP is designed to route around network blockages, but it can only do so if it detects them quickly. When you have big buffers in place, as in the case of all modern operating systems and hardware, blockages aren’t detected quickly; they’re only detected when the buffers fill up. Then buffers empty and the data has to be sent again. The net result is that connections get really slow, not just for upload or download but for both, not just for you but for everyone using the network.


Jim talked about how this is exacerbated by the large amount of web traffic and the design of HTTP, particularly the lack of use of HTTP pipelining (whereby several HTTP requests and responses are sent over one long-term connection), because it leads to lots of small messages which can’t be handled effectively. There’s lots more about this on his blog.


Jim also talked about the failure of certificate authorities and how we should be looking at distributed protocols using digitally signed data, pointing us in particular to CCNx.


Fragment ID Semantics

First thing Tuesday was a session that I led on fragids, in particular the problems that are arising out of the mime type registration of +xml types (3023bis) clashing with those that are used for, say, images, and what happens when these come together in something like SVG.


The same issues arise whenever you have documents with types that ‘inherit’ fragid semantics from two directions. For example, XHTML documents are XML documents, so constraints on +xml mean you shouldn’t use interpreted fragids (eg hash-bangs) on them, but they are also ‘active content’ which makes interpreted fragids useful. Similarly, in linked data you shouldn’t really use a hash URI to mean a Person with a primary resource that provides as a response an XML document with embedded RDFa, because according to XML fragid semantics, such a URI should point to an XML element.


Basically the use of fragids has grown markedly outside their original scope and these situations aren’t really covered in the specs. I am now tasked to create a document that describes the issues and suggests ways forward. So that will be fun.


Telcon with IAB

The second session on Tuesday was a telcon with the IAB which has a similar role within the IETF as the TAG does within the W3C. This was a bit of a ‘getting to know you’ session, covering the work of the two groups on:



versioning and extensibility
security
privacy, including Do Not Track


and talking about opportunities to meet and work together on various topics like these.


URI Definition Discovery and Metadata Architecture

The afternoon session on Tuesday was spent on Jonathan Rees’s work on the Architecture of the World Wide Semantic Web, which covers, amongst other things, what people in semantic web circles call httpRange-14. At core, this is about the kinds of URIs we can use to refer to real-world things, what the response to HTTP requests on those URIs should be, and how we find out information about these resources.


Jonathan has put together a document called Providing and discovering definitions of URIs which covers the various ways that have been suggested over time, including the 303 method that was recommended by the TAG in 2005 and methods that have been suggested by various people since that time.


It’s clear that the 303 method has lots of practical shortcomings for people deploying linked data, and isn’t the way in which URIs are commonly used by Facebook and schema.org, who don’t currently care about using separate URIs for documents and the things those documents are about. We discussed these alongside concerns that we continue to support people who want to do things like describe the license or provenance of a document (as well as the facts that it contains) and don’t introduce anything that is incompatible with the ways in which people who have been following recommended practice are publishing their linked data. The general mood was that we need to support some kind of ‘punning’, whereby a single URI could be used to refer to both a document and a real-world thing, with different properties being assigned to different ‘views’ of that resource.


Jonathan is going to continue to work on the draft, incorporating some other possible approaches. It’s a very contentious topic within the linked data community. My opinion is while we need to provide some ‘good practice’ guides for linked data publishers, we can’t just stick to a theoretical ideal that experience has shown not to be practical. What I’d hope is that the TAG can help to pull together the various arguments for and against different options, and document whatever approach the wider community supports.


Can publication of hyperlinks cause copyright infringment?

The first session on Wednesday was another session that I led, discussing the Publishing and Linking on the Web draft that Dan Appelquist and I have been working on.


The aim of this document is to explain the tensions between terms that are commonly used in legal documents such as “possession”, “adaptation” and “distribution” and the way that publication works on the web, in which multiple servers may have copies of the same document (because they cache copies to make the ‘net go faster), automated agents may make changes to those documents (such as compressing or resizing documents, or merging Javascript) and people may refer others to those documents through linking.


We’re particularly keen to argue that linking to something is not the same thing as distributing it. The web’s power arises through its links, so it’s important that people are able to link to something without being worried about what happens when/if the domain they link to is taken over by something illegal.


Dan and I are going to continue to work on this document in response to various suggestions around organisation and terminology, with a view to getting some ‘friendly legal experts’ to look it over and then seeking wider review. The intention is for it to eventually become a Recommendation as this will give greater weight to it as a document for a legal audience.


API Minimisation and Client-Side Storage

There were then a couple of short sessions.


Dan talked about API Minimisation, which is the design principle that to increase privacy we should design APIs that enable people requesting information to say exactly what information they need, and return only that rather that everything known about a think. Dan’s put together an draft and should be calling for review for it soon.


Ashok then led discussion on client-side storage and we brainstormed around some of the architectural/design issues about which we might want to write if we were to put together a document. This work is at a very early stage.


TAG Priorities

After lunch, we had a session on TAG priorities where we discussed which of the various pieces of work that we’re doing should receive the most attention and had a quick review of who is doing what within the TAG.


Our basic problem is that a lot of this stuff feels quite urgent, and we want to be responsive, but with only 5-6 of us “actively involved” (which means 1 day/week) in drafting documents, and other TAG duties taking up our time, it feels like we have taken on too much work. Our focus for the next little while is going to be on responding to issues where our lack of response might either hold people up or cause longer term problems (for example the publication of contradictory mime type definitions), which means things like the document on publishing and linking on the web will need to bubble in the background rather than being the focus of activity.


HTML5 Last Call

Our final session, for which we were joined by Philippe Le Hégaret, was on the HTML5 Last Call documents. The TAG has raised various issues over the course of HTML5 development and want to follow up on how those issues have been addressed in the documents. Our role means that we’re responsible for making sure there’s consistency with other specifications, and that there isn’t anything that seems like it’s going to cause problems in the long term.


The part that we spent most discussion time on was the relationship between Microdata and RDFa. We talked about the precedents for having two specifications that do very similar things but with different approaches, such as CSS and XSL, and how this isn’t necessarily a bad thing so long as they don’t contradict each other and people can move between them easily (because they have the same conceptual foundations).


I’m going to save my opinion on this topic for another post. Suffice it to say that microdata and RDFa as currently specified don’t work well with each other but it’s not at all clear what the best path forward is. The TAG decided to recommend that the W3C set up a Task Force to look at what the best way forward might be.


Final Words

If you want links to the minutes of the TAG F2F, they’re available within the agenda or on separate pages for:



Monday 6th June
Tuesday 7th June
Wednesday 8th June


If you have anything to say on any of these topics, please send email to the TAG mailing list. Or you could comment here or email me directly if you like. Which leads me on to talking about what I’d like to do in the TAG.


One of the guidance notes for new members to the TAG says:



  TAG members are elected or appointed not to represent their individual member organizations, but the Web community as a whole. We try to take that responsibility very seriously.



I do take that responsibility seriously. Web architecture has to be a combination of practice and theory, balancing approaches that work right now with a desire to not break anything long term. I do practical work developing web applications with HTML, CSS, Javascript, XML, RDF, XSLT, XQuery and so on and so on every day, but I know I don’t see all the difficult corners of the open web standard space: no one person can.


I can listen though, so that’s what I will try to do: listen, digest, reflect and act.


But I have limited resources. Unlike most of the members of the TAG, I am not employed by a large organisation that pays me for time I take on the work that I do for the TAG. The W3C kindly paid for my flights to and from F2Fs, but not hotels or expenses. I wouldn’t have taken this on if I wasn’t prepared to shoulder the financial burden, but if there is anyone out there who might sponsor my participation, I’d love to hear from you.
]]></description>
<dc:subject>html5 linked_data microdata rdfa tag uris web</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:e5d12cf32ee2/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:html5"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:linked_data"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:microdata"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:rdfa"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:tag"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:uris"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:web"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://feeds.mashable.com/~r/Mashable/~3/R1CJL8wSP4M/">
    <title>7 Boilerplates, Templates &amp; Resets for a Fresh Start</title>
    <dc:date>2011-06-13T12:56:32+00:00</dc:date>
    <link>http://feeds.mashable.com/~r/Mashable/~3/R1CJL8wSP4M/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[   Over time, every web developer gathers a collection of tools — useful libraries, code snippets, reference materials and images that get re-used over and over. They make life easier by shortening development time and handling common, often mundane tasks. This frees up time and brain power for more complex tasks.
In this post, we’ll take a look at a small collection of boilerplates, templates and resets that you can incorporate into your workflow. They simplify the process of setting up a new project by providing a clean slate and often useful utilities.
 1. HTML5 Boilerplate  Arguably the most popular HTML5 "starter templates" out there, HTML5 Boilerplate aims to provide a cross-platform, future-proof HTML/CSS and JavaScript base template for web development.
In addition to cross-browser normalization and graceful degradation, Boilerplate also includes more advanced options for caching, JavaScript profiling, unit testing and handling of AJAX events.

 2. Boilerplate Mobile  If you're doing mobile app development, you may also want to check out HTML5 Boilerplate Mobile; a specialized version of the main boilerplate with additional features and functionality specifically for mobile web development.
Boilerplate Mobile includes additional code to assist with viewport optimization, improved font rendering, quickly adding home screen icons and cross-platform support across a number of mobile devices.

 3. HTML5 Reset  HTML5 Reset is a more lightweight base template that gives developers a clean slate to work with while setting and taking care of some cross-browser issues, such as CSS inconsistencies and IE-specific CSS rules.
The HTML5 Reset developers also provide a blank WordPress theme using their system, which can be uses in building custom WordPress templates from the ground up. Both flavors of the reset provide clean, semantic code and tons of flexibility.

 4. YUI2 CSS Reset  Yahoo's YUI2 CSS Reset is a set of drop-in stylesheets to begin your next project. The reset eliminates cross-browser inconsistencies in element rendering so that you can explicitly declare your own rules for these elements.
A useful tool in ensuring cross-browser design consistency, the reset is fully documented with lots of great examples and large community backing.

 5. Eric Meyer's CSS Reset  An oldie but a goodie, Eric Meyer's CSS Reset was one of the first templates to make the rounds and gain popularity. This popular reset has now been updated for HTML5.
Designed to be generic in nature, this stylesheet gives you the bare minimum, but in some ways also provides the most flexibility. It removes default rules set by the browser, eliminating inconsistency and leaving you with a completely clean slate to work with. All browsers are on even footing.

 6. Starkers  Starkers is a "completely naked," bare-bones WordPress HTML5 starter theme. The theme gives you a blank canvas to build upon, removing unnecessary code and providing clean, semantic markup for WordPress as well as support for menus, dynamic components, custom sidebar widgets and more.
Starkers also implements the YUI2 CSS Reset mentioned earlier, so all of the setup is done for you. All you have to do is start building.

 7. Roots  Roots is another WordPress starter theme that takes things just a bit further. Built upon Starkers, HTML5 Boilerplate and the Blueprint CSS framework, Roots gives you a robust set of tools for rapid theme development while incorporating tried and true technologies for ensuring cross-browser support for CSS and HTML 5.
Other Roots features include some bundled jQuery plug-ins (Cycle, Fancybox, etc.), an SEO-optimized robots.txt file and support for easy integration of social media content from Facebook and Twitter. Roots has a larger footprint than some other "blank slate" WordPress themes but if you're interested in quickly building large, robust, and full-featured WordPress sites, it's definitely worth a look.


More About: boilerplate, CSS, dev & design, HTML5, resets, template, web, Web Development
For more Dev & Design coverage:Follow Mashable Dev & Design on TwitterBecome a Fan on FacebookSubscribe to the Dev & Design channelDownload our free apps for Android, Mac, iPhone and iPad


          
]]></description>
<dc:subject>Channels Web_Design Web_Development contributor features tech technology web boilerplate CSS dev_&amp;_design HTML5 resets template</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:261dcb9c1d8c/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Channels"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web_Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Web_Development"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:contributor"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:features"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:tech"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:technology"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:boilerplate"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:CSS"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:dev_&amp;_design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:HTML5"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:resets"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:template"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.gantthead.com/process/processMain.cfm?ID=2-3783">
    <title>webWAVE Development Process</title>
    <dc:date>2010-05-21T22:00:51+00:00</dc:date>
    <link>http://www.gantthead.com/process/processMain.cfm?ID=2-3783</link>
    <dc:creator>_m_space</dc:creator><dc:subject>architecture diagram projectmanagement web webdesign</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:e85b1f006f1c/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:architecture"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:diagram"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:projectmanagement"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:webdesign"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://webby.rubyforge.org/">
    <title>Webby :: Webby</title>
    <dc:date>2009-02-01T04:50:42+00:00</dc:date>
    <link>http://webby.rubyforge.org/</link>
    <dc:creator>_m_space</dc:creator><dc:subject>html cms generator webdev webdesign framework web webby static</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:e7fd34c3b770/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:cms"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:generator"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:framework"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:webby"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:static"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://shearersoftware.com/software/server-administration/migraine/">
    <title>Drupal Migraine</title>
    <dc:date>2008-08-19T04:00:45+00:00</dc:date>
    <link>http://shearersoftware.com/software/server-administration/migraine/</link>
    <dc:creator>_m_space</dc:creator><dc:subject>drupal production staging script migration webdev web svn subversion</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:de71e5d151eb/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:drupal"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:production"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:staging"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:script"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:migration"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:svn"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:subversion"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://informationarchitects.jp/the-web-is-all-about-typography-period/">
    <title>Information Architects » Blog Archive » Web Design is 95% Typography</title>
    <dc:date>2008-04-23T03:52:19+00:00</dc:date>
    <link>http://informationarchitects.jp/the-web-is-all-about-typography-period/</link>
    <dc:creator>_m_space</dc:creator><dc:subject>webdesign typography design web graphicdesign</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:a2d45efce2cb/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:graphicdesign"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://gamemakker.co.uk/2007/08/05/blueprint-a-css-framework/">
    <title>Blueprint: A CSS Framework (Updated to 0.5) | Game Makker</title>
    <dc:date>2007-09-03T23:31:09+00:00</dc:date>
    <link>http://gamemakker.co.uk/2007/08/05/blueprint-a-css-framework/</link>
    <dc:creator>_m_space</dc:creator><dc:subject>blueprint css framework toolkit xhtml grid design layout guide tutorial typography web webdesign</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:19ce2d7854e5/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:blueprint"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:framework"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:toolkit"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:xhtml"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:grid"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:layout"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:guide"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:tutorial"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:webdesign"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.alistapart.com/articles/elastic">
    <title>A List Apart: Articles: Elastic Design</title>
    <dc:date>2007-08-23T00:47:15+00:00</dc:date>
    <link>http://www.alistapart.com/articles/elastic</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[It can be difficult to move from a static, pixel-based design approach to an elastic, relative method. Properly implemented, however, elastic design can be a viable option that enhances usability and accessibility without mandating design sacrifices.

 A
]]></description>
<dc:subject>Typography web webdesign elastic css layout</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:007743f65fcf/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:elastic"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:layout"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.alistapart.com/articles/settingtypeontheweb">
    <title>A List Apart: Articles: Setting Type on the Web to a Baseline Grid</title>
    <dc:date>2007-08-23T00:46:40+00:00</dc:date>
    <link>http://www.alistapart.com/articles/settingtypeontheweb</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[We web designers get excited about the littlest things. Our friends in the print world must get a kick out of watching us talk about finally being able to achieve layouts on the web that they’ve taken for granted for years. Let’s face it: it’s easie
]]></description>
<dc:subject>Typography web webdesign ala css code grid howto WebDevelopment</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:62b0599de85b/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:ala"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:code"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:grid"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:howto"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:WebDevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://webtypography.net/">
    <title>The Elements of Typographic Style Applied to the Web - a practical guide to web typography</title>
    <dc:date>2007-08-23T00:45:44+00:00</dc:date>
    <link>http://webtypography.net/</link>
    <dc:creator>_m_space</dc:creator><dc:subject>Typography web webdesign</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:d00000065fdd/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:webdesign"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://blog.sessions.edu/design/fine-tuning-web-typography/">
    <title>Notes on Design » Blog Archive » Fine Tuning Web Typography</title>
    <dc:date>2007-08-23T00:45:08+00:00</dc:date>
    <link>http://blog.sessions.edu/design/fine-tuning-web-typography/</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[Typography is a sadly neglected aspect of the web design process, an oversight traditionally blamed on the technical limitations and unpredictability of the medium. While it is true that the web may not offer designers the same typographic freedom as prin
]]></description>
<dc:subject>web webdesign Typography</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:884095f6f7e1/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Typography"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://bjorkoy.com/blueprint/index.html">
    <title>Blueprint CSS Framework</title>
    <dc:date>2007-08-05T21:49:22+00:00</dc:date>
    <link>http://bjorkoy.com/blueprint/index.html</link>
    <dc:creator>_m_space</dc:creator><description><![CDATA[Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.
]]></description>
<dc:subject>css webdesign WebDevelopment grid Typography web</dc:subject>
<dc:identifier>https://pinboard.in/u:_m_space/b:ef08e212f612/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:WebDevelopment"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:grid"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:Typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:_m_space/t:web"/>
</rdf:Bag></taxo:topics>
</item>
</rdf:RDF>