[Valid Atom 1.0] This is a valid Atom 1.0 feed.


This feed is valid, but interoperability with the widest range of feed readers could be improved by implementing the following recommendations.


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <feed xmlns="">
  4.  <title><![CDATA[Branden Wiegand]]></title>
  5.  <link rel="alternate" type="text/html" hreflang="en" href=""/>
  6.  <link rel="self" type="application/atom+xml" href="" />
  7.  <updated>2020-01-09T10:24:38-05:00</updated>
  8.  <id></id>
  9.  <author>
  10.    <name><![CDATA[Branden Wiegand]]></name>
  12.  </author>
  13.  <generator uri="">Jekyll</generator>
  16.  <entry>
  17.    <title type="html"><![CDATA[Tagging Stashes in Git]]></title>
  18.    <link href=""/>
  19.    <updated>2013-04-21T15:37:00-04:00</updated>
  20.    <id></id>
  21.    <content type="html"><![CDATA[<p>On many of the projects I develop, I often need to temporarily apply a particular set of changes to my working directory. For example: I may wish to apply some settings in order to run a command or perform a test.</p>
  23. <p>Git’s <a href="">stash</a> feature makes this easy. First make the changes you will need to apply again. Then run <code class="highlighter-rouge">git stash</code>.</p>
  25. <p>When you want to <code class="highlighter-rouge">apply</code> your stash in the future, you can retrieve your list of stashes via <code class="highlighter-rouge">git stash list</code>:</p>
  27. <figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nv">$ </span>git stash list
  28. [email protected]<span class="o">{</span>0<span class="o">}</span>: WIP on master: 531b57e small bug fix
  29. [email protected]<span class="o">{</span>1<span class="o">}</span>: WIP on master: a5f035f updates
  30. [email protected]<span class="o">{</span>2<span class="o">}</span>: WIP on master: 7bd979b copy fix</code></pre></figure>
  32. <p>and apply it like so:</p>
  34. <figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nv">$ </span>git stash apply [email protected]<span class="o">{</span>1<span class="o">}</span></code></pre></figure>
  36. <p>When you are finished with the changes, you can reset your working directory. Later, when needed, you can reapply them using the <code class="highlighter-rouge">stash apply</code> command shown above.</p>
  38. <p>There are a few shortcoming with this method however:</p>
  40. <ol>
  41.  <li><code class="highlighter-rouge">[email protected]{1}</code> isn’t memorable</li>
  42.  <li>it isn’t easy to type</li>
  43.  <li>its number scheme is relative, e.g. if you pop the top stash, the <code class="highlighter-rouge">[email protected]{1}</code> reference becomes <code class="highlighter-rouge">[email protected]{0}</code></li>
  44. </ol>
  46. <p>And unfortunately, in case you were wondering, we can’t use the message we gave the stash (if we provided one) as a reference (because it isn’t one), so what can we do?</p>
  48. <p>The solution is easy. Since Git stores stashes as commits<sup id="fnref:commit"><a href="#fn:commit" class="footnote">1</a></sup>, we are free to tag them like any other commit.</p>
  50. <p>Continuing with the example above:</p>
  52. <figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nv">$ </span>git tag mysettings [email protected]<span class="o">{</span>1<span class="o">}</span></code></pre></figure>
  54. <p>Now, reapplying the changes is easy, memorable, and closer to being foolproof:</p>
  56. <figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nv">$ </span>git stash apply mysettings</code></pre></figure>
  58. <hr />
  60. <div class="footnotes">
  61.  <ol>
  62.    <li id="fn:commit">
  63.      <p>We can easily verify this by asking Git what type our stash is: <code class="highlighter-rouge">git cat-file -t [email protected]{1}</code>, which returns <code class="highlighter-rouge">commit</code>. <a href="#fnref:commit" class="reversefootnote">&#8617;</a></p>
  64.    </li>
  65.  </ol>
  66. </div>
  67. ]]></content>
  68.  </entry>
  70.  <entry>
  71.    <title type="html"><![CDATA[2012]]></title>
  72.    <link href=""/>
  73.    <updated>2012-12-17T22:41:00-05:00</updated>
  74.    <id></id>
  75.    <content type="html"><![CDATA[<p>Huge year. (<a href="">Eta Carinae</a> magnitude.)</p>
  77. <p>Back in January I gave <a href="">a talk on Responsive Web Design</a> for the <a href=""><abbr title="Cleveland Web Standards Association">CWSA</abbr></a>. This was my first time speaking, so while I was naturally nervous, nothing prepared me for the shock I received when I saw the CSS legend (and fellow Clevelander) <a href="">Eric Meyer</a> take a seat among the audience. Sure I could’ve rehearsed more, and of course there were countless improvements to be made, but overall I was satisfied with the talk.</p>
  79. <p>Then, in February, it began.</p>
  81. <p>The planning, the art projects, the phone calls, the insurance policies, the walkthroughs, the meetings, the agendas, the tears, <a href="">the inspiring nights</a> and weekends at <a href="">Zygote Press</a>, the arguments, the silliness, the writing, the sampling of <a href="">delicious foods</a>, the Photoshopping, <a href="">the web development</a>, the bachelor(ette) parties, the showers, the out-of-town guests, the warmth, the love.</p>
  83. <p>And finally.</p>
  85. <p>After three amazing years and the proposal last November, Laura and I were married <time datetime="2012-06-16">June 16, 2012</time> at <a href="">78th Street Studios</a> in Detroit Shoreway, Cleveland in front of two hundred family members and close friends. It was the best day of my life.</p>
  87. <p>Three months later we spent two weeks <a href="">honeymooning in Japan</a>. We visited Tokyo, Koyasan, Kyoto, Hiroshima, and Miyajima. Highlights incude attending an afternoon Sumo tournament, hiking the <a href="ō">Nakasendō trail</a> from Magome to Tsumago, and spending two nights with a generous Japanese family at their home in Nakatsugawa.</p>
  89. <p>Returning home, I started a new job. A bit unexpected, but it was the right move, and I feel good about where I am in my career right now.</p>
  91. <p>Sadly, this year also brought tragedy. A week before leaving for Japan, we were devastated with the news that our very close friend PJ was diagnosed with terminal stomach cancer. He was given only a few weeks to live, but being an incredibly fit guy, he held on a couple weeks longer than anyone expected, and we got to visit him a few last times before he passed. He represented everything we love about Cleveland, and his influence can be found everywhere in the city. He taught us so much. <a href="">We really miss you, buddy.</a></p>
  92. ]]></content>
  93.  </entry>
  95.  <entry>
  96.    <title type="html"><![CDATA[CSS Based fadeOut Effect]]></title>
  97.    <link href=""/>
  98.    <updated>2012-11-26T22:37:00-05:00</updated>
  99.    <id></id>
  100.    <content type="html"><![CDATA[<h2 id="preface">Preface</h2>
  102. <p>In this post, I will discuss an approach to replace JavaScript based animations with CSS transitions — specifically jQuery’s <code class="highlighter-rouge">fadeOut</code> method. The resulting code is not offered as a production ready solution, as it does not account for browser fragmentation or standards adoption. Instead, I am exploring a concept.</p>
  104. <h2 id="lets-begin">Let’s begin</h2>
  106. <p>Before CSS3, we relied on JavaScript, or more often the popular library <a href="">jQuery</a>, to handle our animations.</p>
  108. <p>Animations are great. When properly used they can often increase the user’s understanding of what is happening on the page. For example, removing an element from the page with a fadeout animation is better than instantaneously hiding it.</p>
  110. <p>With jQuery, fading out an element is straightforward:</p>
  112. <figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#element</span><span class="dl">'</span><span class="p">).</span><span class="nx">fadeOut</span><span class="p">();</span></code></pre></figure>
  114. <p>Simple. But before we move on, let’s talk a little bit about what’s happening above. The jQuery <a href=""><code class="highlighter-rouge">fadeOut</code></a> method is pretty self-descriptive. It gradually lessens the opacity of the target element — in this case the element with an id <code class="highlighter-rouge">element</code> — from 1 (fully opaque) to 0 (fully transparent). Since we did not specify a transition duration or easing function the defaults of <code class="highlighter-rouge">400</code> milliseconds and <code class="highlighter-rouge">swing</code><sup id="fnref:swing"><a href="#fn:swing" class="footnote">1</a></sup> are used respectively. Finally, from the jQuery documentation:</p>
  116. <blockquote>
  117.  <p>Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page.</p>
  118. </blockquote>
  120. <p>All is good, but JavaScript powered animations are so old-fashioned. We want to use the new shiny <a href="">CSS Transitions!</a> Sadly however, things become a little more complicated. Let’s looks at a first attempt at making an element fade out using CSS transitions:</p>
  122. <figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="nf">#element</span> <span class="p">{</span>
  123.  <span class="nl">transition</span><span class="p">:</span> <span class="n">opacity</span> <span class="m">0.4s</span> <span class="n">linear</span><span class="p">;</span>
  124. <span class="p">}</span>
  126. <span class="nf">#element</span><span class="nc">.invisible</span> <span class="p">{</span>
  127.  <span class="nl">opacity</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
  128. <span class="p">}</span></code></pre></figure>
  130. <p>So far, so good: whenever the element has the class <code class="highlighter-rouge">hidden</code> applied to it (say via a JavaScript event), it will slowly fade out (its opacity will dimish to 0) over a duration of 400 milliseconds. The <code class="highlighter-rouge">linear</code> keyword specifies the transition’s easing function.</p>
  132. <p>However, we’re missing the last bit from jQuery’s implementation: once the element is finshed transitioning its opactity propertity we need to remove it from the page flow. jQuery does this by setting the element’s <code class="highlighter-rouge">display</code> property to <code class="highlighter-rouge">none</code>.</p>
  134. <figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="nf">#element</span><span class="nc">.invisible</span> <span class="p">{</span>
  135.  <span class="nl">opacity</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
  136.  <span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
  137. <span class="p">}</span></code></pre></figure>
  139. <p>Hang on! This won’t work. Why? Because the <code class="highlighter-rouge">display: none;</code> value will be applied immediately once the <code class="highlighter-rouge">#element</code> element acquires the <code class="highlighter-rouge">hidden</code> class. You will never see the fadeout effect specified by the transition. The element will be taken out of the page flow before you perceive the animation’s beginning.</p>
  141. <p>What we want is to apply the <code class="highlighter-rouge">display: none;</code> property <em>after</em> the CSS transition has completed. How can we do this?</p>
  143. <p>One possible answer would be to use another transition property: <code class="highlighter-rouge">transition-delay</code>. A transition delay allows us to offset the beginning of the transition by a specific unit of time. The idea here is to delay removing the element from page flow by the same amount of time we are transitioning the opacity property of the element, and setting its transition duration to <code class="highlighter-rouge">0s</code>. In other words, instantaneously apply the transition but only after a specified delay.</p>
  145. <p>Unfortunately, we hit another snag. Only <a href=""><em>animatable properties</em></a> can be the subject of a CSS transition, and the display property isn’t on the list. If the property we wanted to sync with the opacity animations ending time was animatable, we’d be set.<sup id="fnref:animatable-properties"><a href="#fn:animatable-properties" class="footnote">2</a></sup></p>
  147. <p>Looks like we need to use a bit of JavaScript.</p>
  149. <p>The W3 CSS Transitions spec defines a JavaScript <a href="">transition event</a> system. Ok great! We will now define a new class to be applied upon on <code class="highlighter-rouge">transitionend</code> event. Let’s call this <code class="highlighter-rouge">opacity-transition-ended</code>. Here’s the JavaScript:</p>
  151. <figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">element</span><span class="dl">"</span><span class="p">);</span>
  152. <span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">transitionend</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
  153.  <span class="nx">element</span><span class="p">.</span><span class="nx">className</span> <span class="o">+=</span> <span class="dl">"</span><span class="s2"> hidden</span><span class="dl">"</span><span class="p">;</span>
  154. <span class="p">},</span> <span class="kc">true</span><span class="p">);</span></code></pre></figure>
  156. <p>And define the CSS like so:</p>
  158. <figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="nf">#element</span> <span class="p">{</span>
  159.  <span class="nl">transition</span><span class="p">:</span> <span class="n">opacity</span> <span class="m">0.4s</span> <span class="n">linear</span><span class="p">;</span>
  160. <span class="p">}</span>
  162. <span class="nf">#element</span><span class="nc">.invisible</span> <span class="p">{</span>
  163.  <span class="nl">opacity</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
  164. <span class="p">}</span>
  166. <span class="nf">#element</span><span class="nc">.invisible.hidden</span> <span class="p">{</span>
  167.  <span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
  168. <span class="p">}</span></code></pre></figure>
  170. <h2 id="compatibility">Compatibility</h2>
  172. <p>What about compatibility? As this is a CSS3 based approach, browser compatibility is somewhat limited. <a href="">CSS Transitions are supported</a> in Firefox 4+, Internet Explorer 10+, Safari 3.2+, Chrome 1.0+, and Opera 10.5+. This also means, vendor prefixes and browser specific event names. See this <a href="">MDN compatibility table</a> for the specifics.</p>
  174. <hr />
  176. <div class="footnotes">
  177.  <ol>
  178.    <li id="fn:swing">
  179.      <p><code class="highlighter-rouge">swing</code> is jQuery’s default easing function. Here’s a <a href="">Stackoverflow conversation</a> describing the <code class="highlighter-rouge">swing</code> function as well as a strategy for how to go about implementing it in terms of a CSS transition. <a href="#fnref:swing" class="reversefootnote">&#8617;</a></p>
  180.    </li>
  181.    <li id="fn:animatable-properties">
  182.      <p>It would be great if the spec allowed you to use <em>non</em>-animatable properties if (and only if) the <code class="highlighter-rouge">transition-duration</code> property of the transition was set to <code class="highlighter-rouge">0</code>. That way you wouldn’t need to rely on JavaScript. <a href="#fnref:animatable-properties" class="reversefootnote">&#8617;</a></p>
  183.    </li>
  184.  </ol>
  185. </div>
  186. ]]></content>
  187.  </entry>
  189.  <entry>
  190.    <title type="html"><![CDATA[Log In]]></title>
  191.    <link href=""/>
  192.    <updated>2012-11-10T15:20:00-05:00</updated>
  193.    <id></id>
  194.    <content type="html"><![CDATA[<p>It’s been seventeen years since I started creating things on the web. Today I finally have a home here.</p>
  196. <p>This is for me, but I hope it will be meaningful to others as well.</p>
  197. ]]></content>
  198.  </entry>
  200. </feed>

If you would like to create a banner that links to this page (i.e. this validation result), do the following:

  1. Download the "valid Atom 1.0" banner.

  2. Upload the image to your own server. (This step is important. Please do not link directly to the image on this server.)

  3. Add this HTML to your page (change the image src attribute if necessary):

If you would like to create a text link instead, here is the URL you can use:

Copyright © 2002-9 Sam Ruby, Mark Pilgrim, Joseph Walton, and Phil Ringnalda