Permalink
Browse files

No more WordPress, ever.

  • Loading branch information...
0 parents commit 473650605f1e472f741eae6e53231f896305e808 @imakewebthings committed Mar 5, 2012
@@ -0,0 +1,3 @@
+.DS_Store
+.sass-cache
+_site
@@ -0,0 +1,3 @@
+# imakewebthings.com
+
+Things in `/_posts` and `/images` are mine. Everything else is MIT license. Steal the shit out of it.
@@ -0,0 +1,5 @@
+auto: true
+permalink: /blog/:title
+pygments: true
+exclude:
+ - README.md
@@ -0,0 +1,9 @@
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width">
+
+<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:700'>
+<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=PT+Serif:400,700'>
+<link rel="stylesheet" href="/css/styles.css">
+<link rel="alternate" href="http://feeds.feedburner.com/OnMakingWebThings" type="application/rss+xml" title="RSS">
+
+<script src="/js/modernizr.js"></script>
@@ -0,0 +1,34 @@
+<!doctype html>
+<html class="no-js" lang="en">
+<head>
+ <title>
+ {% if page.title %}
+ {{ page.title }} ❤
+ {% endif %}
+ On Making Web Things
+ </title>
+ {% include head.html %}
+</head>
+
+<body>
+ <div class="container">
+ <header>
+ <h1>On Making Web Things</h1>
+ <nav>
+ <ul>
+ <li><a href="/">About</a></li>
+ <li class="selected"><a href="/blog">Blog</a></li>
+ </ul>
+ </nav>
+ </header>
+
+ <article>
+ {% if page.title %}
+ <h1>{{ page.title }}</h1>
+ {% endif %}
+
+ {{ content }}
+ </article>
+ </div>
+</body>
+</html>
@@ -0,0 +1,211 @@
+---
+layout: default
+title: Bastard Child Selector
+tldr: Embrace the child selector. Throw out most of your descendent selectors.
+---
+
+<p>The CSS child selector gets a bad rap. Most web developers rarely give it a thought and favor instead the descendant selector. But why?</p>
+
+<h2>What is the Child Selector?</h2>
+
+<p>The most simple answer: <code>&gt;</code></p>
+
+<p>That&rsquo;s it, the greater-than symbol. In a CSS selector it denotes a direct child and only a direct child. A selector of <code>div > p</code> will match all <code>p</code> elements that are direct children of a <code>div</code> element.</p>
+
+<p>Contrast that with the <strong>descendant selector</strong>, represented by a space. A selector of <code>div p</code> matches all <code>p</code> elements that are descendants of <code>div</code>, no matter how far down the DOM tree the <code>p</code> exists. Maybe the <code>p</code> is inside an <code>li</code> within a <code>ul</code> within a <code>section</code> within a <code>div</code>? Still matches. The child selector would not.</p>
+
+<h2>Prior Art</h2>
+
+<p>Several articles have been published this year on CSS performance &mdash; how browsers read CSS selectors and render elements. Chris Coyier <a href="http://css-tricks.com/efficiently-rendering-css/" rel="external">threw down</a> in May with a rundown of best practices, and Jonathan Snook recently <a href="http://snook.ca/archives/html_and_css/css-parent-selectors" rel="external">broached the subject</a> with an explanation of why CSS doesn&rsquo;t include a parent selector. The meat of these recommendations come back to a <a href="http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors">guide by Google</a> and an aging but still relevant <a href="https://developer.mozilla.org/en/Writing_Efficient_CSS" rel="external">guide by Dave Hyatt</a> from his Netscape days.</p>
+
+<p>Read these articles, take in the lessons, and let&rsquo;s look at&hellip;</p>
+
+<h2>An Example</h2>
+<style type="text/css">
+ .puffin-example {
+ background:#ccc;
+ color:#333 !important;
+ padding:10px;
+ font-size:14px !important;
+ font-family:Helvetica, Arial, sans-serif !important;
+ overflow:hidden;
+ margin-bottom:16px;
+ }
+
+ .puffin-example > p {
+ margin:0 !important;
+ padding:8px 0 !important;
+ }
+
+ .puffin-example > h2 {
+ font-size:24px !important;
+ color:#000 !important;
+ margin:0 !important;
+ font-family:Helvetica, Arial, sans-serif !important;
+ text-shadow:none !important;
+ }
+
+ .factoid {
+ float:left;
+ width:160px;
+ padding:10px;
+ font-size:12px;
+ background:#eee;
+ margin:8px 10px 10px 0;
+ }
+
+ .factoid h3 {
+ color:#c00 !important;
+ font-size:18px !important;
+ margin:0 0 8px 0 !important;
+ font-family:Helvetica, Arial, sans-serif !important;
+ text-shadow:none !important;
+ }
+
+ .factoid p {
+ margin:0 0 8px 0 !important;
+ }
+
+ .factoid a {
+ display:block;
+ margin:0;
+ text-align:right;
+ color:#08c !important;
+ background:transparent !important;
+ }
+</style>
+
+<section class="puffin-example">
+ <h2>Puffins</h2>
+ <p>Puffins are any of three small species of auk (or alcids) in the bird genus Fratercula with a brightly coloured beak during the breeding season. These are pelagic seabirds that feed primarily by diving in the water. They breed in large colonies on coastal cliffs or offshore islands, nesting in crevices among rocks or in burrows in the soil. Two species, the Tufted Puffin and Horned Puffin, are found in the North Pacific Ocean, while the Atlantic Puffin, is found in the North Atlantic Ocean.</p>
+ <aside class="factoid">
+ <h3>Fun Fact</h3>
+ <p>The fresh heart of a puffin is eaten raw as a traditional Icelandic delicacy.</p>
+ <a href="#">Learn More</a>
+ </aside>
+ <p>All puffin species have predominantly black or black and white plumage, a stocky build, and large beaks. They shed the colourful outer parts of their bills after the breeding season, leaving a smaller and duller beak. Their short wings are adapted for swimming with a flying technique under water. In the air, they beat their wings rapidly (up to 400 times per minute) in swift flight, often flying low over the ocean&rsquo;s surface.</p>
+</section>
+
+<p><small>Content ripped straight from <a href="http://en.wikipedia.org/wiki/Puffin" rel="external">Wikipedia</a>.</small></p>
+
+<p>The source for the Fun Fact block might reasonably look like this:</p>
+
+{% highlight html %}
+<aside class="factoid">
+ <h3>Fun Fact</h3>
+ <p>The fresh heart of a puffin is eaten raw as a traditional Icelandic delicacy.</p>
+ <a href="#">Learn More</a>
+</aside>
+{% endhighlight %}
+
+<p>And the CSS:</p>
+
+{% highlight css %}
+.factoid {
+ float:left;
+ width:160px;
+ padding:10px;
+ font-size:12px;
+ background:#eee;
+ margin:8px 10px 10px 0;
+}
+
+.factoid h3 {
+ color:#c00;
+ font-size:18px;
+ margin:0 0 8px 0;
+}
+
+.factoid p {
+ margin:0 0 8px 0;
+}
+
+.factoid a {
+ display:block;
+ margin:0;
+ text-align:right;
+ color:#08c;
+}
+{% endhighlight %}
+
+<p>From now on let&rsquo;s try this: Every time you would nonchalantly write a descendant selector, instead write it as a child selector by default. A lot of the descendants we currently write could just as easily be childs, and in some of those cases you really <em>want</em> them to be. If after some time and thought you realize that a descendant selector is what you want, need, and intend, go ahead and change it. Here is our revised CSS:</p>
+
+{% highlight css %}
+.factoid { }
+
+.factoid > h3 { }
+
+.factoid > p { }
+
+.factoid > a { }
+{% endhighlight %}
+
+<p>The web development community retains the nasty habit of descendant selectors for one reason: IE6. IE7+ and every other modern browser support the child selector. While many shops out there have stopped &ldquo;supporting&rdquo; the ancient beast, years of ignoring the child selector have left their mark on our collective stylesheet writing standards. Changing this habit yields a few advantages.</p>
+
+<h2>Performance</h2>
+
+<p>If we focused on CSS rendering performance and rewrote our example by biblically following the Google and Mozilla articles, we would see:</p>
+
+{% highlight html %}
+<aside class="factoid">
+ <h3 class="factoid-header">Fun Fact</h3>
+ <p class="factoid-content">The fresh heart of a puffin is eaten raw as a traditional Icelandic delicacy.</p>
+ <a class="factoid-cta" href="#">Learn More</a>
+</aside>
+{% endhighlight %}
+
+{% highlight css %}
+.factoid { }
+
+.factoid-header { }
+
+.factoid-content { }
+
+.factoid-cta { }
+{% endhighlight %}
+
+<p>Here we have a nasty case of <a href="http://www.steveworkman.com/html5-2/standards/2009/classitis-the-new-css-disease/" rel="external">classitis</a> weighing down the markup. Without going into the details of what makes classitis so heinous, let&rsquo;s discard this approach.</p>
+
+<p>If you read the performance articles you would know that the descendant selector will match the rightmost element, say our <code>a</code> in <code>.factoid a</code>, and look at <em>every element</em> up the tree looking for <code>.factoid</code> until it finds a match or hits the <code>body</code>. Using the child selector will only look one level up and stop if <code>.factoid</code> isn&rsquo;t found. This effects more than our factoid links. The performance savings are realized for <em>every <code>a</code> element in the document</em>.</p>
+
+<p>But here&rsquo;s the deal: CSS performance is rarely an issue for modern websites. If you&rsquo;re building a static site, the speed of modern devices and browsers will cover up the more egregious selectors. Web applications making constant and rapid DOM changes may see gains in slower handheld devices or older browsers. But there are better reasons to move towards more child selectors than just performance.</p>
+
+<h2>Preserving Defaults &amp; Future Proofing</h2>
+<p>Let&rsquo;s turn back to our example. Maybe we&rsquo;re building this site for a client. The client swears factoids will follow this structure: Title, short sentence, link out. Done. In stone. So we write the CSS in our original form using descendant selectors, ship it and everything is dandy.</p>
+<p>Six months later, the client decides they want to link up the word &ldquo;Icelandic&rdquo; to an article on Bj&ouml;rk. And this is what they see:</p>
+
+<section class="puffin-example">
+ <h2>Puffins</h2>
+ <p>Puffins are any of three small species of auk (or alcids) in the bird genus Fratercula with a brightly coloured beak during the breeding season. These are pelagic seabirds that feed primarily by diving in the water. They breed in large colonies on coastal cliffs or offshore islands, nesting in crevices among rocks or in burrows in the soil. Two species, the Tufted Puffin and Horned Puffin, are found in the North Pacific Ocean, while the Atlantic Puffin, is found in the North Atlantic Ocean.</p>
+ <aside class="factoid">
+ <h3>Fun Fact</h3>
+ <p>The fresh heart of a puffin is eaten raw as a traditional <a href="#">Icelandic</a> delicacy.</p>
+ <a href="#">Learn More</a>
+ </aside>
+ <p>All puffin species have predominantly black or black and white plumage, a stocky build, and large beaks. They shed the colourful outer parts of their bills after the breeding season, leaving a smaller and duller beak. Their short wings are adapted for swimming with a flying technique under water. In the air, they beat their wings rapidly (up to 400 times per minute) in swift flight, often flying low over the ocean&rsquo;s surface.</p>
+</section>
+
+<p><strong>Woops.</strong></p>
+<p>I&rsquo;ll admit, this is an elementary example, and a problem we can easily foresee, but think about the implications when applied to larger layout elements. Sure, your biggest client&rsquo;s left sidebar may hold nothing but second-level navigation today, but who&rsquo;s stopping it from holding a Twitter widget, two ad units, and a list of related posts down the road? In our scenario the client has assured us that a Factoid structure will not change. The more realistic scenario: Nobody is thinking about these things. They&rsquo;re too concerned with how everything looks now.</p>
+
+<p>How many times have you found yourself writing something like this?</p>
+
+{% highlight css %}
+a {
+ color:#00c;
+}
+
+.factoid a {
+ color:#c00;
+}
+
+.factoid p a {
+ color:#00c;
+}
+{% endhighlight %}
+
+<p>Avoiding this mess &mdash; defining defaults, overriding them, and then re-overriding them again &mdash; would have once been solved by adding a class to the link. With our approach of using a child selector we avoid that extra markup cruft and preserve the defaults as we move down the DOM tree. Along with the potential performance gains, I hope this is enough to get you to move away from lazily pressing the space key and give the child selector a chance.</p>
+
+<h2>Extra Tidbit</h2>
+
+<p><em>The ultimate test of perfectly preserved default styles?</em> Take all your main content and erase everything else. All the layout structure: erase it. Just leave your naked content, then apply your main stylesheet. Does it look exactly the same (fonts, margins, colors, etc.) as the in-page content, except now full width and aligned left? Congratulations. Personally, I&rsquo;ve never been able to get there, but I keep aiming.</p>
@@ -0,0 +1,29 @@
+---
+layout: default
+title: jQuery Waypoints
+tldr: I made a plugin for firing events when users scroll to an element.
+---
+
+<p>Last week I pushed a lit­tle jQuery plu­gin to GitHub called <a href="http://imakewebthings.github.com/jquery-waypoints" rel="external">jQuery Way­points</a> that gives devel­op­ers an easy hook into fir­ing a func­tion when users scroll to any given ele­ment. Thanks to some love from the <a href="http://forrst.com">Forrst</a> com­mu­nity and a brief stint in the Top 10 on <a href="http://hackerne.ws/item?id=2255982" rel="external">Hacker News</a>, it’s gained the atten­tion of a few eyes. I’m just glad that <em>some­body</em> found it use­ful. Now that I’ve had a chance to process the imme­di­ate feed­back and fix a bug or two, I’d like to look back on what I learned.</p>
+
+<h2>His­tory</h2>
+
+<p>Way­points started as a scrappy <a href="http://mootools.net" rel="external">MooTools</a> class that I wrote for a friend to use in one of his projects. The code, aside from being a lit­tle gross, had the sole pur­pose of snap­ping the user’s scroll posi­tion to the top of a sec­tion when the user scrolled close enough to it. I still don’t feel com­fort­able inter­rupt­ing a user’s nat­ural scroll to force them to a dif­fer­ent one, but the con­cept of using scroll prox­im­ity stuck with me.</p>
+
+<h2>Prior Art</h2>
+
+<p>Remy Sharp’s <a href="http://remysharp.com/2009/01/26/element-in-view-event-plugin/" rel="external">inview</a> plu­gin is another great way to tie user scrolling to events, but only con­cerns itself with two ele­ment posi­tions: enter­ing and leav­ing the view­port. If those are the only ele­ment posi­tions you want to deal with, I still think inview is a supe­rior plugin.</p>
+
+<h2>GitHub = Pleasure</h2>
+
+<p>This was my first <em>real</em> open source pub­lic project. A lot of my career agency work has been for large clients that I prob­a­bly can’t even name under <span class="caps">NDA</span>. And my one <a href="https://github.com/imakewebthings/mooswipe" rel="external">other pub­lic repos­i­tory</a> is a MooTools port of some­body else’s <a href="http://www.netcu.de/jquery-touchwipe-iphone-ipad-library" rel="external">orig­i­nal work</a>.</p>
+
+<p><a href="http://gitimmersion.com/" rel="external">Git Immer­sion</a> is a great resource for any­one look­ing to get started using Git seri­ously. Any­one who has ever taken the dive will tell you: there’s no going back. Once you’re com­fort­able with mov­ing between branches, com­mit­ting, and push­ing, <a href="http://pages.github.com" rel="external">GitHub Pages</a> are cake and a nat­ural place for project pages to live.</p>
+
+<h2>Doc­u­men­ta­tion = Important</h2>
+
+<p>Con­sid­er­ing I was 8800 miles away, I didn’t actu­ally <em>see</em> it, but Kyle Neath’s <a href="http://warpspire.com/talks/documentation/" rel="external">Doc­u­men­ta­tion is freak­ing awe­some</a> deck really kicked me into giv­ing a much bet­ter project doc­u­men­ta­tion expe­ri­ence than I might have oth­er­wise. I prob­a­bly spent as much time tweak­ing the word­ing and appear­ance of the docs as I did writ­ing the plu­gin. Not only does it reduce fric­tion for the devel­oper try­ing to use Way­points, it reduces fric­tion for me in try­ing to answer ques­tions and sup­port it.</p>
+
+<h2>The Future</h2>
+
+<p>With the most recent release, I’ve fin­ished adding core func­tion­al­ity. Writ­ing unit tests, fix­ing bugs as they come in, and expand­ing the plat­forms the plu­gin cov­ers will be the main focus in the near future. Way­points does what it does well enough and I’d pre­fer to keep it light. I’ll be inter­ested to see if any­one uses it as a brick to build some­thing neat. If you use Way­points and would like to share with me how you’re using it, <a href="http://imakewebthings.com">give me a shout</a>.</p>
Oops, something went wrong.

0 comments on commit 4736506

Please sign in to comment.