New Poll: Site Title Structure

Chris Coyier — Sat, 06 Aug 2011 04:42:00 +0000

The new poll is up in the sidebar of the site. This time it's about the structure of page titles. Literally, the </code> tag in the head of a site that gives the browser window/tab its title. I'm just asking for your "favorite", as in, personal preference. Take that how you will, we can discuss the reasonings in the comments and in the poll wrap-up post. <span //AN_Xml:id="more-13460"></span>The official question:</p><blockquote><p>Of these choices, what is your favorite page title structure for blog article in a specific category?</p></blockquote><p>So there are three bits of relevant information of this page that we'll be dealing with:</p><ul><li>Article title</li><li>Category</li><li>Site name</li></ul><p>The poll options are various configurations of those three things.</p><p>Maybe we can do a follow-up poll on favorite separators. I like the vertical bar. Wufoo uses the · a lot which I also like. I dislike the little arrows. Tangent alert.</p> <br //AN_Xml:/><p><a //AN_Xml:href='http://rss.buysellads.com/click.php?z=1259963&k=3469a2a501a9e18091036aa0c89f9dcb&a=13460&c=2063335745' target='_blank'> </a></p><p><a //AN_Xml:href='http://buysellads.com/buy/sitedetails/pubkey/3469a2a501a9e18091036aa0c89f9dcb/zone/1259963' target='_blank'>Advertise here with BSA</a></p><p><a //AN_Xml:href="http://css-tricks.com/13460-new-poll-site-title-structure/">New Poll: Site Title Structure</a> is a post from <a //AN_Xml:href="http://css-tricks.com">CSS-Tricks</a></p> </article> <article> <h1>Prefixr</h1> <p>Chris Coyier — Thu, 04 Aug 2011 17:12:37 +0000</p> <p><p>Jeffrey Way has created an app which looks through your CSS and adds all the missing CSS3 vendor prefixes. It's smart enough to do it right no matter which ones you've added or forgotten. Cooler, it has an API which allows you to it without ever leaving your favorite text editor.</p><p><a //AN_Xml:href="http://prefixr.com/" title="Direct link to featured article">Direct Link to Article</a> — <a //AN_Xml:href="http://css-tricks.com/13453-prefixr/">Permalink</a></p><br //AN_Xml:/><p><a //AN_Xml:href='http://rss.buysellads.com/click.php?z=1259963&k=3469a2a501a9e18091036aa0c89f9dcb&a=13453&c=1220758855' target='_blank'> </a></p><p><a //AN_Xml:href='http://buysellads.com/buy/sitedetails/pubkey/3469a2a501a9e18091036aa0c89f9dcb/zone/1259963' target='_blank'>Advertise here with BSA</a></p></p><p><a //AN_Xml:href="http://css-tricks.com/13453-prefixr/">Prefixr</a> is a post from <a //AN_Xml:href="http://css-tricks.com">CSS-Tricks</a></p> </article> <article> <h1>What Makes For a Semantic Class Name?</h1> <p>Chris Coyier — Thu, 04 Aug 2011 15:37:19 +0000</p> <p>Semantics in HTML is always a hot topic. Some people strive for it at all times. Some people critisize a dogmatic adherence to it. Some people don't know what the heck it is. <span //AN_Xml:id="more-13423"></span></p><p>I'd describe semantics as it relates to HTML as tags, classes, IDs, and attributes <strong>describing but not specifying</strong> the content they enclose. Let's start with an example we can probably all agree on.</p><h4>Bad Semantics</h4><pre rel="HTML"><code><div class="article"> //AN_Xml: <div class="article_title">Smurf Movie Kinda Sucks</div> //AN_Xml: <div class="the_content">Not surprisingly, this weeks release of //AN_Xml: <div class="darkbold">The Smurfs</div> kinda sucks.</div> //AN_Xml:</div></code></pre><h4>Good Semantics</h4><pre rel="HTML"><code><article> //AN_Xml: <h1>Smurf Movie Kinda Sucks</h1> //AN_Xml: <p>Not surprisingly, this weeks release of //AN_Xml: <b>The Smurfs</b> kinda sucks.</p> //AN_Xml:</article></code></pre><p>Whether or not you think HTML5 is ready to use or not, I think you would agree that when you need an HTML element for an article, that the <code><article></code> tag is better than a generic <code><div></code> with a class name. The title of the article becomes a header, the content becomes a paragraph, the bold-but-not-emphasized title becomes a bold tag.</p><p>But not everything maps that cleanly to HTML tags. Let's look at a bunch of class names and I'll offer my opinion on if I think it's semantic or not.</p><pre><code><div class="column_1"></div></code></pre><p><strong>Unsemantic.</strong> This is a classic example. Every single CSS grid framework in the world uses some kind of class names to declare the grids. Whether it's "yui-b", "grid-4", or "spanHalf", all of these are closer to specifying than describing their contents. So while I maintain these are unsemantic class names, I also think they are largely unavoidable in float-based grid-system layouts.</p><pre><code><div class="footer"></div></code></pre><p><strong>Semantic.</strong> While a footer is an abstract concept, it has come to have meaning in web design. It's the bottom of a website the typically contains things like repeated navigation, copyright, author info, etc. This class name declares a group for all that stuff without describing it.</p><p>If you've made the leap to HTML5, the <code><footer></code> element would be better. And that goes for all the HTML5 elements. (Headers should be <code><header></code>, sidebars should be <code><aside></code>, etc.) If you aren't yet using HTML5 (you better have a really compelling reason), the equivalent class names I feel are fine.</p><pre><code><div class="largeText"></div></code></pre><p><strong>Unsemantic.</strong> This is specifying. Why should the text be larger? To stand out from other smaller text? "standOut" or <a //AN_Xml:href="https://twitter.com/norcross/status/98883914822717440">"callout_text"</a> might be better here, as in the Theoretical Redesign Future™, you may wish to choose a different style to make that text stand out that has nothing to do with the size of the text, and you won't be stuck with an awkward class name.</p><pre><code><div class="priority-2"></div></code></pre><p><strong>Semantic.</strong> I've talked with some folks from <a //AN_Xml:href="http://mailchimp.com/">MailChimp</a> (<a //AN_Xml:href="http://jasongraphix.com/">Jason Beaird</a> and <a //AN_Xml:href="http://aarronwalter.com/">Aarron Walter</a>) about this and this is how they declare the relative importance levels of buttons within the app (Although with class names more like "p1" .. "p5"). Higher priority buttons might have brighter colors or be larger, while lower priority buttons might blend in more with the content. By not being specific with what those styles are and abstracting to a priority level, you are staying semantic. It's like taking the idea of <code><h1></code>, <code><h2></code>, <code><h3></code>, etc. to buttons.</p><pre><code><div class="copyright"></div></code></pre><p><strong>Semantic.</strong> If only every class name was this easy! This goes for any section which contains content that is easy to describe with a word like <a //AN_Xml:href="https://twitter.com/darice/status/98880648688844800">"tweets"</a>, <a //AN_Xml:href="https://twitter.com/aaronwhitman/status/98888652402327552">"pagination"</a>, or <a //AN_Xml:href="https://twitter.com/adriano_rizzo/status/98880905032110080">"admin-bar"</a>. Although with that last one, you'd be better off calling it "admin-nav" as in the Theoretical Redesign Future™ this area might not be a "bar" anymore.</p><pre><code><p class="introp"></p></code></pre><p><strong>Unsemantic.</strong> I saw a presentation with <a //AN_Xml:href="http://daverupert.com/">Dave Rupert</a> one time where he joked around that this was his favorite class name. I can totally relate to that as it's such a common scenario to style the first paragraph of a page differently, like an attention-grabbing overview to get people into an article.</p><p>If you absolutely need super deep browser support, you might need some kind of class name, in which I'd say "intro" is better than "introp" (leave the element name out of it). But much better would just be to target the first paragraph like <code>article p:first-of-type</code> or <code>h1 + p</code>.</p><pre><code><div class="clearfix"></div></code></pre><p><strong>Unsemantic.</strong> This is an extremely common class name, which applies a bit of trickery to get the element to contain all of its decendant floats rather than collapse. But it has nothing to do with the content it contains, thus unavoidably unsemantic. <a //AN_Xml:href="http://simplebits.com/">Dan Cederholm</a> recommends a more feel-goody class name "group" for this purpose instead (in his book <a //AN_Xml:href="http://handcraftedcss.com/">Handcrafted CSS</a>), which, to me, just barely brings this into the realm of semantic, as certainly this wrapper contains multiple other elements and is thus a group (describing without specifying).</p><pre><code><div class="left"></div></code></pre><p><strong>Unsemantic.</strong> Perhaps in the Theoretical Redesign Future™ you'll want this stuff on the right instead. Too specific.</p><pre><code><div class="success"></div></code></pre><p><strong>Semantic.</strong> I think this one works best in conjunction with other class names so that one of them describes the content and one describes the status of that content. Like "<a //AN_Xml:href="https://twitter.com/snookca/status/98880868562644993">success</a> message" which could hold a message like "Your file has been uploaded!". If that message was "There was a problem uploading your file." the class names could be "fail message" instead and have appropriate styling.</p><pre><code><div class="plain-jane"></div></code></pre><p><strong>Unsemantic.</strong> This is trying to specify that the content inside should be styled a specific way. <a //AN_Xml:href="https://twitter.com/chrisnager/status/98881285321261056">"plain-jane"</a> is the same as something like "normal" or "regular". Ideally CSS should be written so that you don't need class names for "regular" styles, that just comes by default through the cascade, and anything that breaks that in unusual ways gets a class.</p><pre><code><div class="entry-unrelated"></div></code></pre><p><strong>Unsemantic.</strong> <a //AN_Xml:href="http://www.readability.com/">Readability</a>, the web app for reformatting and saving web pages for ease-of-reading later, has you use this class name to specify parts any elements of your site you don't want to be accidentally included in the conversation/saving of your article. The reason I'm going unsemnatic here is because it's describing what it's not, not what it is. I wish there was something other than a class name that could be used for this purpose. Sort of like <code>rel=nofollow</code> for links, but for content.</p><pre><code><div class="hyphenate"></div></code></pre><p><strong>Unsemantic.</strong> Trying to specify the behavior of the content inside, instead of describe what it actually is.</p><pre><code><a class="link" href="#"></a></code></pre><p><strong>Unsemantic.</strong> While link is descriptive without being specific, just the nature of an anchor link already makes it a link, thus not necessary. If the class name is trying to separate this link from other "normal" links, be more descriptive as to why, e.g. "book-link" or (debatable) "button".</p><h3>But...</h3><p>Let's say you have two types of articles on your site and you want to style them differently. Movie Reviews will have a blue background and Breaking News will have a red background and bigger text.</p><p>Here's one way to do that:</p><pre rel="HTML"><code><article class="movie-review"> //AN_Xml: ... //AN_Xml:</article> //AN_Xml: //AN_Xml:<article class="breaking-news"> //AN_Xml: ... //AN_Xml:</article></code></pre><p>and another:</p><pre rel="HTML"><code><article class="blueBg"> //AN_Xml: ... //AN_Xml:</article> //AN_Xml: //AN_Xml:<article class="redBg bigText"> //AN_Xml: ... //AN_Xml:</article></code></pre><p>I bet if we had a poll and asked people which example they thought was more semantic, the first would win. It fits the bill put forth in this article: describing without specifying. Whereas the second example specifies ("blueBg" is a class name that applies a blue background). Let's say the Theoretical Redesign Future™ stops being theoretical and is now in progress. The design for movie reviews now has a green background. The class name "blueBg" is rather awkward there. Whereas the class name "movie-review" is totally fine and you just change the properties/values to do the green background instead.</p><p>This isn't to say the first example is hands-down always better. Let's say that light blue color is used in a lot of places on the site. Perhaps it's the background color of a particular part of the footer and a particular sidebar box as well. You might end up with selectors like:</p><pre><code rel="CSS">.movie-review, //AN_Xml:footer > div:nth-of-type(2), //AN_Xml:aside > div:nth-of-type(4) { //AN_Xml: background: #c2fbff; //AN_Xml:}</code></pre><p>That's efficient because you are only declaring that color once. But it's also a rather complex, hard-to-scan, unwieldily selector. Not to mention those different selectors may need unique styling, so they'll have to be repeated later. Or you take another approach and just leave them separate:</p><pre rel="CSS"><code>.movie-review { //AN_Xml: background: #c2fbff; //AN_Xml: /* Plus other stuff */ //AN_Xml:} //AN_Xml: //AN_Xml:footer > div:nth-of-type(2) { //AN_Xml: background: #c2fbff; //AN_Xml: /* Plus other stuff */ //AN_Xml:} //AN_Xml: //AN_Xml:aside > div:nth-of-type(4) { //AN_Xml: background: #c2fbff; //AN_Xml: /* Plus other stuff */ //AN_Xml:}</code></pre><p>That might actually keep your CSS file more organized (keeping different areas of the site in different sections) but at the cost of repetitive declarations. In a presentation by <a //AN_Xml:href="http://www.stubbornella.org/content/">Nicole Sullivan</a> I recently saw at the <a //AN_Xml:href="http://environmentsforhumans.com/2011/css-summit/#.Tjq3pGYWXs0">CSS Summit</a>, she called out some big companies for declaring the exact same color in the CSS files literally <em>thousands</em> of times. I think we can all agree that's crazytown. There may be a variety of solutions to that, but one of them might be using a class name like "blueBg" to declare it once in the CSS and then put the burden on the HTML for applying that class name when you want that design. Still, you'd be better off calling it "mainBrandColor" or "secondaryFont" as to avoid specifying. As I understand it, that's OOCSS. Sacrificing a slight bit of semantics for the greater good (drastically smaller resources).</p><p>Would love to hear some of your opinions on all this. I'm sure plenty of you have other example, different opinions on what is or isn't semantic, and whether or not that matters.</p> <br //AN_Xml:/><p><a //AN_Xml:href='http://rss.buysellads.com/click.php?z=1259963&k=3469a2a501a9e18091036aa0c89f9dcb&a=13423&c=1409520471' target='_blank'> </a></p><p><a //AN_Xml:href='http://buysellads.com/buy/sitedetails/pubkey/3469a2a501a9e18091036aa0c89f9dcb/zone/1259963' target='_blank'>Advertise here with BSA</a></p><p><a //AN_Xml:href="http://css-tricks.com/13423-semantic-class-names/">What Makes For a Semantic Class Name?</a> is a post from <a //AN_Xml:href="http://css-tricks.com">CSS-Tricks</a></p> </article> <article> <h1>The Future of CSS Layouts</h1> <p>Chris Coyier — Thu, 04 Aug 2011 04:00:04 +0000</p> <p><p>Peter Gasston shows us: columns, flexbox, grid, template, positioned floats, exclusions, and regions. This stuff is going to be a big deal in a couple of years and it will be very interesting to see which of these get popular and which ones die off.</p><p><a //AN_Xml:href="http://www.netmagazine.com/features/future-css-layouts" title="Direct link to featured article">Direct Link to Article</a> — <a //AN_Xml:href="http://css-tricks.com/13444-the-future-of-css-layouts/">Permalink</a></p><br //AN_Xml:/><p><a //AN_Xml:href='http://rss.buysellads.com/click.php?z=1259963&k=3469a2a501a9e18091036aa0c89f9dcb&a=13444&c=60298964' target='_blank'> </a></p><p><a //AN_Xml:href='http://buysellads.com/buy/sitedetails/pubkey/3469a2a501a9e18091036aa0c89f9dcb/zone/1259963' target='_blank'>Advertise here with BSA</a></p></p><p><a //AN_Xml:href="http://css-tricks.com/13444-the-future-of-css-layouts/">The Future of CSS Layouts</a> is a post from <a //AN_Xml:href="http://css-tricks.com">CSS-Tricks</a></p> </article> <article> <h1>Poll Results: Large file on major CDN or small file local</h1> <p>Chris Coyier — Sun, 31 Jul 2011 15:01:08 +0000</p> <p>I quite enjoyed this poll because the results were so neck and neck. It was only in the last week or so that a clear winner has emerged. <span //AN_Xml:id="more-13424"></span></p><p></p><p>Like all polls ever run in the history of this website, there is lots of things to consider and the poll was probably too simple for it's own good. Nonetheless, I consider just getting people thinking about this issue a success. At the very surface: 20k is smaller but the CDN is faster and more likely to be cached.</p><p>There is a bunch more too it though...</p><ul><li>The CDN is probably a different domain, so even if a user does need to load the file it doesn't count against the maximum concurrent connections for a single domain.</li><li>Loading the JS is one thing, but executing the JS is another. Executing 200k of JS will always be slower than 20k.</li><li><a //AN_Xml:href="http://css-tricks.com/13261-large-file-on-cdn-or-small-local/#comment-99474">Da_n reminds us</a> they aren't mutually exclusive. You could attempt to load from the CDN and fall back to local.</li><li><a //AN_Xml:href="http://css-tricks.com/13261-large-file-on-cdn-or-small-local/#comment-99476">Evert reminds us</a> that some IP address/ranges can be blocked in some countries, so the more different ones we pull from the higher the chances that some resources will be block and lead to problems loading the page.</li><li>In the case of the Google CDN (the most popular for this sort of thing), the only way the caching is in place is if you link to a very specific version of a library, like 1.8.14. If you link any less specifically (e.g. 1.8 will give you the latest version that is 1.8.something) it's not cached (or not cached very long).</li><li>CDN saves bandwidth, and those costs can be significant (e.g. The 100k image sprite on the current design of this site used 50+ GB of bandwidth in the last 30 days. That's one file.).</li><li>Locally, you have the option to merge the 20k into other JS files and load a single resource instead of many.</li><li><a //AN_Xml:href="http://css-tricks.com/13261-large-file-on-cdn-or-small-local/#comment-99524">Paul Irish</a> says we should A/B test for speed and pick the fastest.</li><li>Mobile is a very serious consideration. Mobile browsers have far less room for cache and (sometimes) have less bandwidth.</li><li><a //AN_Xml:href="http://css-tricks.com/13261-large-file-on-cdn-or-small-local/#comment-99990">Kent Davidson</a> reminds us that if we are super worried about privacy, the CDN may be out, as it gives referrer strings to the CDN for each person requesting the file.</li><li>Hosting that small custom file on your own CDN has big advantages. It may not have any chance of being cached coming in, but has the other advantages.</li></ul><p>There was another good point brought up in the comments by <a //AN_Xml:href="http://css-tricks.com/13261-large-file-on-cdn-or-small-local/#comment-99862">Jayphen</a>:</p><blockquote><p>Posts like this make me worry about the kind of misinformation spread by these kinds of polls…</p><p>If the majority of other developers do the wrong thing, that doesn’t make it right.</p></blockquote><p>Just because "local" won this poll, doesn't make it the right answer all the time (see considerations above).</p><p>New poll soonish. If you have an idea for a poll on CSS-Tricks, leave it as a comment below. I'd like to refill the reserves of poll ideas.</p> <br //AN_Xml:/><p><a //AN_Xml:href='http://rss.buysellads.com/click.php?z=1259963&k=3469a2a501a9e18091036aa0c89f9dcb&a=13424&c=1103172240' target='_blank'> </a></p><p><a //AN_Xml:href='http://buysellads.com/buy/sitedetails/pubkey/3469a2a501a9e18091036aa0c89f9dcb/zone/1259963' target='_blank'>Advertise here with BSA</a></p><p><a //AN_Xml:href="http://css-tricks.com/13424-poll-results-cdn-or-local/">Poll Results: Large file on major CDN or small file local</a> is a post from <a //AN_Xml:href="http://css-tricks.com">CSS-Tricks</a></p> </article> <article> <h1>Seriously, Just Make a JSFiddle</h1> <p>Chris Coyier — Fri, 29 Jul 2011 02:06:23 +0000</p> <p>Has anyone ever asked you for help troubleshooting some combination of HTML, CSS, and JavaScript, and they copy and paste the entirety of all the files into an email or forum post? It's super common, and so consider this an intervention. When you are having trouble figuring something out:<span //AN_Xml:id="more-13414"></span></p><ol><li>Go to <a //AN_Xml:href="http://jsfiddle.net/">JSFiddle</a>.</li><li>Put the HTML in the HTML area, the CSS in the CSS area, and the JavaScript in the JavaScript area</li><li>Press Run and see if the result is demonstrating the problem, adjust as needed to make the problem very clear.</li><li>Press Save to get a public URL.</li><li>Share that URL where you are trying to get the troubleshooting help.</li></ol><p>Also, if you can whittle it down to the bare minimum still showing the problem, that's ideal.</p><p>The key is being able to <strong>see the result</strong>. It's 100 times easier for your potential troubleshooter to play with that than trying to guess what is happening by looking at your code alone.</p><p>A lot of times, during the process of creating this (let's call it what it is: <a //AN_Xml:href="http://css-tricks.com/6263-reduced-test-cases/">a reduced test case</a>) you'll solve the problem yourself. And if not, the chances of you getting help from someone else goes way up.</p><p>It doesn't have to be JSFiddle either, could be <a //AN_Xml:href="http://jsbin.com/">JS Bin</a>, <a //AN_Xml:href="http://cssdesk.com/">CSSDesk</a>, a temporary test page you toss up on your own site, whatever.</p><p></p><p>Doing this will make you a better coder and better in bed. I promise.</p><p>XOXOXO,<br //AN_Xml:/> -Chris</p> <br //AN_Xml:/><p><a //AN_Xml:href='http://rss.buysellads.com/click.php?z=1259963&k=3469a2a501a9e18091036aa0c89f9dcb&a=13414&c=272646127' target='_blank'> </a></p><p><a //AN_Xml:href='http://buysellads.com/buy/sitedetails/pubkey/3469a2a501a9e18091036aa0c89f9dcb/zone/1259963' target='_blank'>Advertise here with BSA</a></p><p><a //AN_Xml:href="http://css-tricks.com/13414-seriously-just-make-a-jsfiddle/">Seriously, Just Make a JSFiddle</a> is a post from <a //AN_Xml:href="http://css-tricks.com">CSS-Tricks</a></p> </article> <article> <h1>Chosen</h1> <p>Chris Coyier — Thu, 28 Jul 2011 03:21:48 +0000</p> <p><p>Super hot jQuery and Prototype plugin by the <a //AN_Xml:href="http://www.getharvest.com/">Harvest</a> team that seriously improves the UI of <code><select></code> elements.</p><p><a //AN_Xml:href="http://harvesthq.github.com/chosen/" title="Direct link to featured article">Direct Link to Article</a> — <a //AN_Xml:href="http://css-tricks.com/13411-chosen/">Permalink</a></p><br //AN_Xml:/><p><a //AN_Xml:href='http://rss.buysellads.com/click.php?z=1259963&k=3469a2a501a9e18091036aa0c89f9dcb&a=13411&c=1260734136' target='_blank'> </a></p><p><a //AN_Xml:href='http://buysellads.com/buy/sitedetails/pubkey/3469a2a501a9e18091036aa0c89f9dcb/zone/1259963' target='_blank'>Advertise here with BSA</a></p></p><p><a //AN_Xml:href="http://css-tricks.com/13411-chosen/">Chosen</a> is a post from <a //AN_Xml:href="http://css-tricks.com">CSS-Tricks</a></p> </article> <article> <h1>Examples of Sites where localStorage should or is being used</h1> <p>Chris Coyier — Wed, 27 Jul 2011 22:52:16 +0000</p> <p>localStorage is a new JavaScript API in HTML5 that allows us to save data in key/value pairs in a user's browser. It's a little bit like cookies <a //AN_Xml:href="http://blog.andyhume.net/localstorage-is-not-cookies">except</a>:<span //AN_Xml:id="more-13392"></span></p><ul><li>Cookies expire and get cleared a lot, localStorage is forever (until explicitly cleared).</li><li>localStorage isn't sent along in HTTP Requests, you have to ask for it.</li><li>You can store way more data in localStorage than you can in cookies.</li><li>The API for localStorage is wicked simple and easy.</li></ul><p>If you need to get more up to speed, I did a <a //AN_Xml:href="http://css-tricks.com/video-screencasts/96-localstorage-for-forms/">video screencast on localStorage recently</a>. This is how it works:</p><pre class="JavaScript"><code>/* Set some data */ //AN_Xml:localStorage.setItem("key", "value"); //AN_Xml: //AN_Xml:/* Get some data */ //AN_Xml:localStorage.getItem("key");</code></pre><p>No libraries needed, that's just JavaScript. If you want you can use Modernizr to test for it with <code>Modernizr.localstorage</code> first.</p><p>OK great that's all the geeky bits, let's see some places on the web that could be, should be, or are using it. Hopefully this will spark some ideas for your own websites.</p><h3>IS using localStorage</h3> <figure> <br //AN_Xml:/> </figure><p><a //AN_Xml:href="http://snapbird.org/">Snapbird</a> (a powerful Twitter search tool) remembers the last person's stream you searched. It figures, chances are, the next time you come back you'll be searching that same person and this will save you a second. If not, you can just delete it and replace it. I find it useful as I'm typically trying to find old tweets of my own.</p> <figure> <br //AN_Xml:/> </figure><p>The Webbie Madness event this year had a large March Madness style voting grid where people were encouraged to come pick winners in multiple rounds. The first round had 32 people in 16 battles. The peoples names were disguised. It took a while to figure out who was who and decide who to vote for, and it wasn't something I was able to do in one "sitting". I suggested they save the votes as people did them to localStorage, that way you could come back any time and finish. Like total badasses, they did it!</p> <figure> <br //AN_Xml:/> </figure><p><a //AN_Xml:href="http://jsbin.com/">JSBin</a> (By Remy Sharp, who did Snapbird also, go figure) allows you to save your starter HTML/JavaScript template so the next time you come back to use it, you can use that same template.</p><h3>SHOULD be using localStorage</h3> <figure> <br //AN_Xml:/> </figure><p><a //AN_Xml:href="http://typekit.com/">Typekit</a> has a Type Tester tool when viewing a particular font. You can type your own text into the box to see what it will look like in that font. Unfortunately when you go to another font, that custom text you entered is gone. This would be a great case for localStorage. When the value in that area changes, save it to localStorage, and load that value in when the page loads. I think that would be a great timesaver, as I think jumping around to see that text in multiple fonts is a pretty common use case.</p> <figure> <br //AN_Xml:/> </figure><p><a //AN_Xml:href="http://csslint.net/">CSS Lint</a> has a grid of checkboxes for what features you do/don't want to CSS Lint to look for when you test your CSS. It would be really nice if this used localStorage to remember what checkbox configuration you used, so if you reload the page or come back later, it's the same. So if you don't like the "Don't use IDs" checkbox, you can turn if off forever =).</p> <figure> <br //AN_Xml:/> </figure><p>Pretty much any website with a login form could use localStorage to keep the username saved. So when a user comes back, it's one less step for them to log in.</p> <figure> <br //AN_Xml:/> </figure><p>Zeldman.com has links in the footer which allow you to toggle the colors used on the site between two versions. It saves this as a cookie which is great, but is subject to the frailty of cookies. Any site like this with alternate styling choices (e.g. font-size toggle) could save that information in localStorage and have it persist better.</p><h3>MOR</h3><p>This is the tip of the iceberg. I'm sure people with more developer-oriented minds can think of bigger and better ideas for this. Saving your place in a game? Caching assets? What else you got?</p><p><a //AN_Xml:href="http://diveintohtml5.org/storage.html">Way more info from Mark Pilgrim.</a></p> <br //AN_Xml:/><p><a //AN_Xml:href='http://rss.buysellads.com/click.php?z=1259963&k=3469a2a501a9e18091036aa0c89f9dcb&a=13392&c=1922308254' target='_blank'> </a></p><p><a //AN_Xml:href='http://buysellads.com/buy/sitedetails/pubkey/3469a2a501a9e18091036aa0c89f9dcb/zone/1259963' target='_blank'>Advertise here with BSA</a></p><p><a //AN_Xml:href="http://css-tricks.com/13392-localstorage-examples/">Examples of Sites where localStorage should or is being used</a> is a post from <a //AN_Xml:href="http://css-tricks.com">CSS-Tricks</a></p> </article> <article> <h1>CSSFrag</h1> <p>Chris Coyier — Mon, 25 Jul 2011 18:41:27 +0000</p> <p>Shaun Inman with a Safari extension (and Firefox port) that impliments the (not real) <a //AN_Xml:href="http://simonstl.com/articles/cssFragID.html">fragment identifiers proposal</a>. Essentially: same-page document links that don't need the ID/hash-tag thing. Alternatively, you target with a CSS selector:<span //AN_Xml:id="more-13386"></span></p><p><code>http://example.com/lorem.html#css(.content:nth-child(2))</code></p><p><a //AN_Xml:href="http://shauninman.com/archive/2011/07/25/cssfrag" title="Direct link to featured article">Direct Link to Article</a> — <a //AN_Xml:href="http://css-tricks.com/13386-cssfrag/">Permalink</a></p><br //AN_Xml:/><p><a //AN_Xml:href='http://rss.buysellads.com/click.php?z=1259963&k=3469a2a501a9e18091036aa0c89f9dcb&a=13386&c=975553724' target='_blank'> </a></p><p><a //AN_Xml:href='http://buysellads.com/buy/sitedetails/pubkey/3469a2a501a9e18091036aa0c89f9dcb/zone/1259963' target='_blank'>Advertise here with BSA</a></p><p><a //AN_Xml:href="http://css-tricks.com/13386-cssfrag/">CSSFrag</a> is a post from <a //AN_Xml:href="http://css-tricks.com">CSS-Tricks</a></p> </article> <article> <h1>#77: Styling an Individual Article</h1> <p>Wed, 16 Dec 2009 13:49:55 +0000</p> </article> <article> <h1>#76: A Tour of jQuery on a Live Site</h1> <p>Fri, 20 Nov 2009 15:04:19 +0000</p> </article> <article> <h1>#75: How Not To Design a Checkout</h1> <p>Thu, 29 Oct 2009 00:11:20 +0000</p> </article> <article> <h1>#74: Editable CSS3 Image Gallery</h1> <p>Sun, 18 Oct 2009 23:23:49 +0000</p> </article> <article> <h1>#73: Building a Website (3 of 3): WordPress Theme</h1> <p>Thu, 01 Oct 2009 17:36:26 +0000</p> </article> <article> <h1>#72: Building a Website (2 of 3): HTML/CSS Conversion</h1> <p>Wed, 23 Sep 2009 14:04:17 +0000</p> </article> <article> <h1>#71: Building a Website (1 of 3): Photoshop Mockup</h1> <p>Wed, 16 Sep 2009 15:59:08 +0000</p> </article> <article> <h1>#70: Random Pet Peeves</h1> <p>Thu, 10 Sep 2009 03:38:27 +0000</p> </article> <article> <h1>#69: First Ten Minutes with TypeKit</h1> <p>Tue, 25 Aug 2009 22:56:35 +0000</p> </article> <article> <h1>#68: Think Geek Background Fade Technique</h1> <p>Wed, 12 Aug 2009 17:50:51 +0000</p> </article> <article> <h1>#67: jQuery Part 3 – Image Title Plugin</h1> <p>Wed, 29 Jul 2009 12:23:34 +0000</p> </article> <article> <h1>#66: Table Styling 2, Fixed Header and Highlighting</h1> <p>Wed, 01 Jul 2009 14:22:06 +0000</p> </article> <article> <h1>#65: Advanced Uses for Custom Fields in WordPress</h1> <p>Tue, 23 Jun 2009 19:35:14 +0000</p> </article> <article> <h1>#64: Building a Photo Gallery</h1> <p>Tue, 09 Jun 2009 13:21:07 +0000</p> </article> <article> <h1>#63: On Screencasting</h1> <p>Thu, 21 May 2009 15:32:04 +0000</p> </article> <article> <h1>#62: Advanced Form Styling & Functionality</h1> <p>Wed, 06 May 2009 16:51:49 +0000</p> </article> <article> <h1>#61: Basic Table Styling with CSS</h1> <p>Wed, 22 Apr 2009 18:55:05 +0000</p> </article> <article> <h1>#60: AJAX Refreshing RSS Content</h1> <p>Wed, 08 Apr 2009 17:10:43 +0000</p> </article> <article> <h1>#59: Embedding Audio</h1> <p>Thu, 02 Apr 2009 21:27:54 +0000</p> </article> <article> <h1>#58: HTML & CSS – The VERY Basics</h1> <p>Wed, 25 Mar 2009 01:03:30 +0000</p> </article> <article> <h1>#57: Using CSS3</h1> <p>Wed, 18 Mar 2009 17:31:30 +0000</p> </article> <article> <h1>#56: Integrating FoxyCart and WordPress</h1> <p>Thu, 05 Mar 2009 00:32:40 +0000</p> </article> <article> <h1>#55: Adding RSS Content with SimplePie</h1> <p>Wed, 25 Feb 2009 22:11:50 +0000</p> </article> <article> <h1>#54: Introduction to FLIR</h1> <p>Wed, 18 Feb 2009 00:32:19 +0000</p> </article> <article> <h1>#53: Customizing PayPal Forms, Buttons, and Headers</h1> <p>Thu, 12 Feb 2009 00:33:57 +0000</p> </article> <article> <h1>#52: Building a Print Stylesheet</h1> <p>Thu, 05 Feb 2009 14:36:32 +0000</p> </article> <article> <h1>#51: A Lesson Learned in Accessibility</h1> <p>Thu, 22 Jan 2009 14:33:54 +0000</p> </article> <article> <h1>#50: Building a Customized and Dynamic Ordering Form</h1> <p>Wed, 14 Jan 2009 23:41:03 +0000</p> </article> <article> <h1>#49: Hodgepodge of Photoshop Tricks</h1> <p>Thu, 08 Jan 2009 14:16:23 +0000</p> </article> <article> <h1>#48: Skinning phpBB</h1> <p>Mon, 29 Dec 2008 22:41:19 +0000</p> </article> <article> <h1>#47: CSS Shorthand</h1> <p>Wed, 17 Dec 2008 02:36:09 +0000</p> </article> <article> <h1>#46: Domains, DNS, Hosting and Google Apps</h1> <p>Thu, 11 Dec 2008 00:21:22 +0000</p> </article> <article> <h1>#45: Using FoxyCart for eCommerce</h1> <p>Thu, 04 Dec 2008 02:52:28 +0000</p> </article> <article> <h1>#44: Hodgepodge of WordPress Tricks</h1> <p>Wed, 26 Nov 2008 18:27:03 +0000</p> </article> <article> <h1>#28: Using Wufoo for Web Forms</h1> <p>Tue, 25 Nov 2008 01:30:10 +0000</p> </article> <article> <h1>#24: Rounded Corners</h1> <p>Tue, 25 Nov 2008 01:25:36 +0000</p> </article> <article> <h1>#23: Conditional Stylesheets</h1> <p>Tue, 25 Nov 2008 01:15:34 +0000</p> </article> <article> <h1>#22: Cutting Clipping Paths</h1> <p>Tue, 25 Nov 2008 00:27:41 +0000</p> </article> <article> <h1>#21: Walkthrough of Contact Form</h1> <p>Tue, 25 Nov 2008 00:24:38 +0000</p> </article> <article> <h1>#20: Introduction to jQuery</h1> <p>Tue, 25 Nov 2008 00:18:03 +0000</p> </article> <article> <h1>#18: Introduction to the Band Website Template</h1> <p>Tue, 25 Nov 2008 00:15:03 +0000</p> </article> <article> <h1>#17: Sliding Doors Button</h1> <p>Tue, 25 Nov 2008 00:11:07 +0000</p> </article> <article> <h1>#30: Creating and Sending HTML Email</h1> <p>Mon, 24 Nov 2008 17:27:31 +0000</p> </article> <article> <h1>#32: Using the Unit PNG Fix</h1> <p>Mon, 24 Nov 2008 17:18:13 +0000</p> </article> <article> <h1>#35: Intro to jQuery 2</h1> <p>Mon, 24 Nov 2008 17:13:30 +0000</p> </article> <article> <h1>#34: Integrating and Customizing Google Maps</h1> <p>Mon, 24 Nov 2008 17:04:27 +0000</p> </article> <article> <h1>#33: eCommerce Product Page Makeover</h1> <p>Mon, 24 Nov 2008 16:59:59 +0000</p> </article> <article> <h1>#16: Creating the Photoshop Mockup</h1> <p>Sun, 23 Nov 2008 15:55:58 +0000</p> </article> <article> <h1>#15: Introduction to Firebug</h1> <p>Sun, 23 Nov 2008 15:51:47 +0000</p> </article> <article> <h1>#11: Working Modularly with PHP</h1> <p>Sun, 23 Nov 2008 15:49:13 +0000</p> </article> <article> <h1>#10: Fixed Width, Fluid Width & Elastic Width</h1> <p>Sun, 23 Nov 2008 15:46:45 +0000</p> </article> <article> <h1>#9: Starry Night: 3D Background with the Parallax Effect</h1> <p>Sat, 22 Nov 2008 03:08:06 +0000</p> </article> <article> <h1>#8: CSS Formatting</h1> <p>Fri, 21 Nov 2008 18:39:51 +0000</p> </article> <article> <h1>#7: Three State Menu</h1> <p>Fri, 21 Nov 2008 18:36:35 +0000</p> </article> <article> <h1>#31: Introduction to Google Analytics</h1> <p>Fri, 21 Nov 2008 14:49:09 +0000</p> </article> <article> <h1>#29: Google Search for Your Site</h1> <p>Fri, 21 Nov 2008 14:46:32 +0000</p> </article> <article> <h1>#6: Tools of the Trade</h1> <p>Thu, 20 Nov 2008 15:40:22 +0000</p> </article> <article> <h1>#5: Columns of Equal Height: Super Simple Two Column Layout</h1> <p>Thu, 20 Nov 2008 15:37:22 +0000</p> </article> <article> <h1>#43: How to Use CSS Sprites</h1> <p>Thu, 20 Nov 2008 00:22:05 +0000</p> </article> <article> <h1>#19: Designing a Unique Page for Twitter Updates</h1> <p>Wed, 19 Nov 2008 23:07:29 +0000</p> </article> <article> <h1>#14: Converting a Photoshop Mockup: Part Two, Episode Three</h1> <p>Wed, 19 Nov 2008 15:21:11 +0000</p> </article> <article> <h1>#13: Converting a Photoshop Mockup: Part Two, Episode Two</h1> <p>Wed, 19 Nov 2008 15:03:17 +0000</p> </article> <article> <h1>#12: Converting a Photoshop Mockup: Part Two, Episode One</h1> <p>Wed, 19 Nov 2008 14:56:36 +0000</p> </article> <article> <h1>#4: Forcing Scrollbars: Eliminating “Horizontal Jumps”</h1> <p>Wed, 19 Nov 2008 14:48:17 +0000</p> </article> <article> <h1>#27: Designing for WordPress: Part Three</h1> <p>Sat, 15 Nov 2008 18:39:08 +0000</p> </article> <article> <h1>#26: Designing for WordPress: Part Two</h1> <p>Sat, 15 Nov 2008 18:34:30 +0000</p> </article> <article> <h1>#25: Designing for WordPress: Part One</h1> <p>Sat, 15 Nov 2008 18:23:35 +0000</p> </article> <article> <h1>#36: Current Nav Highlighting: Using PHP to Set the Body ID</h1> <p>Sat, 15 Nov 2008 18:20:51 +0000</p> </article> <article> <h1>#37: Status, Fluid and Menu Bar Apps</h1> <p>Sat, 15 Nov 2008 04:43:43 +0000</p> </article> <article> <h1>#38: Basics & Tips on Designing for the iPhone</h1> <p>Sat, 15 Nov 2008 04:38:16 +0000</p> </article> <article> <h1>#3: Converting a Photoshop Mockup (part 3 of 3)</h1> <p>Wed, 12 Nov 2008 20:35:40 +0000</p> </article> <article> <h1>#2: Converting a Photoshop Mockup (part 2 of 3)</h1> <p>Wed, 12 Nov 2008 20:29:20 +0000</p> </article> <article> <h1>#39: How to Use sIFR 3</h1> <p>Wed, 12 Nov 2008 20:07:57 +0000</p> </article> <article> <h1>#42: All About Floats Screencast</h1> <p>Wed, 12 Nov 2008 19:59:59 +0000</p> </article> <article> <h1>#41: WordPress as a CMS</h1> <p>Thu, 06 Nov 2008 14:30:45 +0000</p> </article> <article> <h1>#1: Converting a Photoshop Mockup (part 1 of 3)</h1> <p>Mon, 03 Nov 2008 22:41:45 +0000</p> </article> <article> <h1>#40: How z-index Works</h1> <p>Mon, 03 Nov 2008 22:24:36 +0000</p> </article> <article> <h1>#45: Using FoxyCart for eCommerce</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Thu, 04 Dec 2008 02:52:28 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=kS6oAUAM"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=uueKIxDW"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=mYiFsLq1"></img></a> //AN_Xml:</div> </article> <article> <h1>#44: Hodgepodge of WordPress Tricks</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Wed, 26 Nov 2008 18:27:03 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=x25Kn5aQ"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=dzmZtMrs"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=8nZCCAei"></img></a> //AN_Xml:</div> </article> <article> <h1>#28: Using Wufoo for Web Forms</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Tue, 25 Nov 2008 01:30:10 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=MF76mtshCE0:znq_zdOvf6M:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=MF76mtshCE0:znq_zdOvf6M:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=MF76mtshCE0:znq_zdOvf6M:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#24: Rounded Corners</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Tue, 25 Nov 2008 01:25:36 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=Kc8ApXWR4UI:XoeMlaKDtRY:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=Kc8ApXWR4UI:XoeMlaKDtRY:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=Kc8ApXWR4UI:XoeMlaKDtRY:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#23: Conditional Stylesheets</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Tue, 25 Nov 2008 01:15:34 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=cnNbHKmMfCI:k434INQv63w:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=cnNbHKmMfCI:k434INQv63w:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=cnNbHKmMfCI:k434INQv63w:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#22: Cutting Clipping Paths</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Tue, 25 Nov 2008 00:27:41 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=Q1YhWWP0B3I:FtRKlnDRjLI:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=Q1YhWWP0B3I:FtRKlnDRjLI:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=Q1YhWWP0B3I:FtRKlnDRjLI:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#21: Walkthrough of Contact Form</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Tue, 25 Nov 2008 00:24:38 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=Fh6fZPnSre8:cWUmf58iuiQ:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=Fh6fZPnSre8:cWUmf58iuiQ:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=Fh6fZPnSre8:cWUmf58iuiQ:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#20: Introduction to jQuery</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Tue, 25 Nov 2008 00:18:03 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=YbFp_IAd5W8:fn3sPkWdMNo:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=YbFp_IAd5W8:fn3sPkWdMNo:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=YbFp_IAd5W8:fn3sPkWdMNo:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#18: Introduction to the Band Website Template</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Tue, 25 Nov 2008 00:15:03 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=76SjBzVjJ50:v5EgP2dGGCM:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=76SjBzVjJ50:v5EgP2dGGCM:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=76SjBzVjJ50:v5EgP2dGGCM:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#17: Sliding Doors Button</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Tue, 25 Nov 2008 00:11:07 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=MUIw8Mta0Ts:_jkkFJnSOgI:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=MUIw8Mta0Ts:_jkkFJnSOgI:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=MUIw8Mta0Ts:_jkkFJnSOgI:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#30: Creating and Sending HTML Email</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Mon, 24 Nov 2008 17:27:31 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=Bh5xvZUSR1Y:0IdXRbEzyz0:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=Bh5xvZUSR1Y:0IdXRbEzyz0:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=Bh5xvZUSR1Y:0IdXRbEzyz0:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#32: Using the Unit PNG Fix</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Mon, 24 Nov 2008 17:18:13 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=SNPEO-16VYY:8caGvoSJHjU:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=SNPEO-16VYY:8caGvoSJHjU:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=SNPEO-16VYY:8caGvoSJHjU:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#35: Intro to jQuery 2</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Mon, 24 Nov 2008 17:13:30 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=KyGJs-38cVg:vS_vHFtfbas:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=KyGJs-38cVg:vS_vHFtfbas:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=KyGJs-38cVg:vS_vHFtfbas:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#34: Integrating and Customizing Google Maps</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Mon, 24 Nov 2008 17:04:27 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=oKUTQ3Wl0tg:qQdSJWe0d78:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=oKUTQ3Wl0tg:qQdSJWe0d78:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=oKUTQ3Wl0tg:qQdSJWe0d78:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#33: eCommerce Product Page Makeover</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Mon, 24 Nov 2008 16:59:59 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=FlbGzsyt4qQ:e5BN6RKoGc8:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=FlbGzsyt4qQ:e5BN6RKoGc8:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=FlbGzsyt4qQ:e5BN6RKoGc8:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#16: Creating the Photoshop Mockup</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Sun, 23 Nov 2008 15:55:58 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=MaNvpcRSjnA:GZThMcT-oYY:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=MaNvpcRSjnA:GZThMcT-oYY:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=MaNvpcRSjnA:GZThMcT-oYY:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#15: Introduction to Firebug</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Sun, 23 Nov 2008 15:51:47 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=9wLY23C--Vo:c0fFZQiiR9o:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=9wLY23C--Vo:c0fFZQiiR9o:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=9wLY23C--Vo:c0fFZQiiR9o:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#11: Working Modularly with PHP</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Sun, 23 Nov 2008 15:49:13 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=rwLia2dW7e8:9XKLrxZduSU:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=rwLia2dW7e8:9XKLrxZduSU:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=rwLia2dW7e8:9XKLrxZduSU:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#10: Fixed Width, Fluid Width & Elastic Width</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Sun, 23 Nov 2008 15:46:45 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=tgI2sw9wAIU:_P7gILpuNfA:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=tgI2sw9wAIU:_P7gILpuNfA:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=tgI2sw9wAIU:_P7gILpuNfA:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#9: Starry Night: 3D Background with the Parallax Effect</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Sat, 22 Nov 2008 03:08:06 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=hDApPeMKhtI:ZLatY8omwV8:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=hDApPeMKhtI:ZLatY8omwV8:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=hDApPeMKhtI:ZLatY8omwV8:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#8: CSS Formatting</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Fri, 21 Nov 2008 18:39:51 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=BfpJCKZiiyk:iiWi77IhnEw:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=BfpJCKZiiyk:iiWi77IhnEw:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=BfpJCKZiiyk:iiWi77IhnEw:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#7: Three State Menu</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Fri, 21 Nov 2008 18:36:35 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=Q0WgMnn38Lo:ITbcdPta-CU:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=Q0WgMnn38Lo:ITbcdPta-CU:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=Q0WgMnn38Lo:ITbcdPta-CU:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#31: Introduction to Google Analytics</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Fri, 21 Nov 2008 14:49:09 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=sakB_PZd3Rk:Y8Uw2g9GqDU:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=sakB_PZd3Rk:Y8Uw2g9GqDU:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=sakB_PZd3Rk:Y8Uw2g9GqDU:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#29: Google Search for Your Site</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Fri, 21 Nov 2008 14:46:32 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=-oQxawFg-DI:WAfrmNlaigY:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=-oQxawFg-DI:WAfrmNlaigY:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=-oQxawFg-DI:WAfrmNlaigY:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#6: Tools of the Trade</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Thu, 20 Nov 2008 15:40:22 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=Im1XhqEVbmI:nLYHxxeVK4Q:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=Im1XhqEVbmI:nLYHxxeVK4Q:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=Im1XhqEVbmI:nLYHxxeVK4Q:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#5: Columns of Equal Height: Super Simple Two Column Layout</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Thu, 20 Nov 2008 15:37:22 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=s_cOzyHygHI:fLH50kYIxS4:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=s_cOzyHygHI:fLH50kYIxS4:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=s_cOzyHygHI:fLH50kYIxS4:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#43: How to Use CSS Sprites</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Thu, 20 Nov 2008 00:22:05 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=BVS94iLU"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=8o94H9Fm"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=61H56YZZ"></img></a> //AN_Xml:</div> </article> <article> <h1>#19: Designing a Unique Page for Twitter Updates</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Wed, 19 Nov 2008 23:07:29 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=rdGxM0E8UiU:Z39h1db7S48:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=rdGxM0E8UiU:Z39h1db7S48:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=rdGxM0E8UiU:Z39h1db7S48:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#14: Converting a Photoshop Mockup: Part Two, Episode Three</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Wed, 19 Nov 2008 15:21:11 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=r5mRHRwxpM8:CwQ2pBpymUw:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=r5mRHRwxpM8:CwQ2pBpymUw:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=r5mRHRwxpM8:CwQ2pBpymUw:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#13: Converting a Photoshop Mockup: Part Two, Episode Two</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Wed, 19 Nov 2008 15:03:17 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=NOjtVPSkKY4:kg5IadBtbD4:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=NOjtVPSkKY4:kg5IadBtbD4:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=NOjtVPSkKY4:kg5IadBtbD4:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#12: Converting a Photoshop Mockup: Part Two, Episode One</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Wed, 19 Nov 2008 14:56:36 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=E30248fmiHY:UHlPMfLFJLk:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=E30248fmiHY:UHlPMfLFJLk:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=E30248fmiHY:UHlPMfLFJLk:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#4: Forcing Scrollbars: Eliminating “Horizontal Jumps”</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Wed, 19 Nov 2008 14:48:17 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=tVFy-LyYbTo:_kS1R3Jbvv8:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=tVFy-LyYbTo:_kS1R3Jbvv8:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=tVFy-LyYbTo:_kS1R3Jbvv8:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#27: Designing for WordPress: Part Three</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Sat, 15 Nov 2008 18:39:08 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=rnX6ruo42_E:TiFAsH1BQrY:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=rnX6ruo42_E:TiFAsH1BQrY:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=rnX6ruo42_E:TiFAsH1BQrY:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#26: Designing for WordPress: Part Two</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Sat, 15 Nov 2008 18:34:30 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=yorMsTq4w_o:ziaPT3NuwCw:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=yorMsTq4w_o:ziaPT3NuwCw:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=yorMsTq4w_o:ziaPT3NuwCw:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#25: Designing for WordPress: Part One</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Sat, 15 Nov 2008 18:23:35 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=7C2YoU4FCOU:rXw3sykd0tw:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=7C2YoU4FCOU:rXw3sykd0tw:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=7C2YoU4FCOU:rXw3sykd0tw:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#36: Current Nav Highlighting: Using PHP to Set the Body ID</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Sat, 15 Nov 2008 18:20:51 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=tIroGuR0Ns0:LyKeWCOYuHM:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=tIroGuR0Ns0:LyKeWCOYuHM:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=tIroGuR0Ns0:LyKeWCOYuHM:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#37: Status, Fluid and Menu Bar Apps</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Sat, 15 Nov 2008 04:43:43 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=7vj7mNzSbFo:4xGlQRdT66c:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=7vj7mNzSbFo:4xGlQRdT66c:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=7vj7mNzSbFo:4xGlQRdT66c:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#38: Basics & Tips on Designing for the iPhone</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Sat, 15 Nov 2008 04:38:16 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=0Q6vPAYm9H4:6kh51dOuzew:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=0Q6vPAYm9H4:6kh51dOuzew:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=0Q6vPAYm9H4:6kh51dOuzew:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#3: Converting a Photoshop Mockup (part 3 of 3)</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Wed, 12 Nov 2008 20:35:40 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=wzv4vaFmR4c:6yo-GFxNqvE:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=wzv4vaFmR4c:6yo-GFxNqvE:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=wzv4vaFmR4c:6yo-GFxNqvE:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#2: Converting a Photoshop Mockup (part 2 of 3)</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Wed, 12 Nov 2008 20:29:20 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=1IcVMIzqpF8:9qanVWdlVE0:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=1IcVMIzqpF8:9qanVWdlVE0:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=1IcVMIzqpF8:9qanVWdlVE0:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#39: How to Use sIFR 3</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Wed, 12 Nov 2008 20:07:57 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=ZsiuDzauFAI:GEg-iyrfX6I:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=ZsiuDzauFAI:GEg-iyrfX6I:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=ZsiuDzauFAI:GEg-iyrfX6I:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#42: All About Floats Screencast</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Wed, 12 Nov 2008 19:59:59 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=QbEKO2am"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=Xq7eM12i"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=SGT7FbWF"></img></a> //AN_Xml:</div> </article> <article> <h1>#41: WordPress as a CMS</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Thu, 06 Nov 2008 14:30:45 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=AjDBqu2b"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=D9AVrgLw"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=7qkYqMrc"></img></a> //AN_Xml:</div> </article> <article> <h1>#1: Converting a Photoshop Mockup (part 1 of 3)</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Mon, 03 Nov 2008 22:41:45 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=7VsR8v4VO8s:Z1MrDcngECQ:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=7VsR8v4VO8s:Z1MrDcngECQ:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=7VsR8v4VO8s:Z1MrDcngECQ:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> <article> <h1>#40: How z-index Works</h1> <p>chriscoyier@gmail.com (Chris Coyier) — Mon, 03 Nov 2008 22:24:36 +0000</p> <div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=Qp4I4jjTwxI:5u-iNG__3lc:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=Qp4I4jjTwxI:5u-iNG__3lc:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=Qp4I4jjTwxI:5u-iNG__3lc:7Q72WNTAKBA"></img></a> //AN_Xml:</div> </article> </main></body></html>

CSS-Tricks

Indeterminate Checkboxes

Use Case?

New Poll: Site Title Structure