tag:noahgilmore.svbtle.com,2014:/feedNoah Gilmore2014-05-20T11:23:55-07:00Noah Gilmorehttp://noahgilmore.svbtle.comSvbtle.comtag:noahgilmore.svbtle.com,2014:Post/my-bucket-list2014-05-20T11:23:55-07:002014-05-20T11:23:55-07:00My Bucket List<p>Ambitious, subject to change, incomplete, based on <a href="http://dcurt.is/bucket-list" rel="nofollow">this</a>.</p>
<ol>
<li>
<del>Create something that touches 10,000 people.</del> <em>(January 20th, 2013)</em>
</li>
<li>
<del>Create something that touches 100,000 people.</del> <em>(January 14th, 2015)</em>
</li>
<li>Create something that touches 1,000,000 people.</li>
<li>
<del>Receive a standing ovation.</del> <em>(May 19th, 2010)</em>
</li>
<li>Deliver a college commencement speech.</li>
<li>Deliver a TED talk.</li>
<li>Be fluent in two languages.</li>
<li>Be fluent in three languages.</li>
<li>Skydive.</li>
<li>Be involved in one transaction of over $100,000.</li>
<li>Make $1,000,000 in a year.</li>
<li>Run a marathon.</li>
<li>Give $100,000 to charity.</li>
<li>
<del>Wine tasting in Napa.</del> <em>(July 16th, 2016)</em>
</li>
<li>Wine tasting in the South of France.</li>
<li>
<del>Speak/perform in front of 10,000 people.</del> <em>(September 3rd, 2011)</em>
</li>
<li>Speak/perform in front of 100,000 people.</li>
<li>
<del>Visit 3 continents.</del> <em>(May 1st, 2014)</em>
</li>
<li>
<del>Visit 4 continents.</del><em>(November 20th, 2016)</em>
</li>
<li>Visit 5 continents.</li>
<li>See the sunrise for 7 consecutive days.</li>
<li>
<del>Contribute to an open source project with more than 100 contributors.</del><em>(November 22nd, 2016)</em>
</li>
<li>
<del>Contribute to an open source project with more than 1,000 commits.</del><em>(January 8th, 2015)</em>
</li>
<li>Contribute to an open source project with more than 10,000 commits.</li>
<li>Give a keynote address.</li>
<li>Give a guest lecture.</li>
<li>Have a news article written about me.</li>
<li>Be on the cover of a magazine.</li>
</ol>
tag:noahgilmore.svbtle.com,2014:Post/tables-are-hard2014-04-03T09:01:19-07:002014-04-03T09:01:19-07:00Tables are hard<p>Let’s talk about HTML tables.</p>
<p>Here’s some code:</p>
<pre><code class="prettyprint lang-html">&lt;table class="main"&gt;
&lt;colgroup&gt;&lt;col class="votes"&gt;&lt;col&gt;&lt;/colgroup&gt;
&lt;tr&gt;
&lt;td&gt;Votes&lt;/td&gt;
&lt;td&gt;Comments&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;p class="vote-desc"&gt;Some long name, really long, like really super long&lt;/p&gt;
&lt;p class="vote-desc"&gt;Another long name, really long&lt;/p&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;p class="comment"&gt;A really, really, really, really, really really really really really, really long comment.&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</code></pre>
<p>In this table, there are two main data cells: one with two vote descriptions and one with a comment. Assuming the outside of the table has a constrained width, what will be the widths of the two inner data cells? <a href="http://jsfiddle.net/R3AKT/1/" rel="nofollow">Check out this jsfiddle</a>. Now, <a href="http://jsfiddle.net/8vzRb/1/" rel="nofollow">check it out with a longer comment</a>.</p>
<p>When I came across this situation in a project I was working on, I expected the left column to set its own width based on the width of its content, and for the subsequent columns to do the same with the remaining space. But no! In chrome and firefox, the left cell is all squished up, but the crazier thing is that chrome and firefox <strong>squish it up differently</strong>.</p>
<h2 id="nonnormativity_2">
<a class="head_anchor" href="#nonnormativity_2" rel="nofollow"> </a>Non-normativity</h2>
<p>It turns out that this part of the HTML specification is actually non-normative. It’s called the <a href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout" rel="nofollow">automatic table layout algorithm</a>. Basically, this applies to tables (elements with <code class="prettyprint">display: table</code> or <code class="prettyprint">display: inline-table</code>) with <code class="prettyprint">table-layout: auto</code>. [See end note.] From the spec:</p>
<blockquote class="large">
<p>UAs are not required to implement this algorithm to determine the table layout in the case that ‘table-layout’ is ‘auto’; they can use any other algorithm <strong>even if it results in different behavior</strong>.</p>
</blockquote>
<p>So, this is what really happens: the browser doesn’t know what to do when there are two columns that have to have automatically distributed width, so it makes its own decision.</p>
<h2 id="what-to-do_2">
<a class="head_anchor" href="#what-to-do_2" rel="nofollow"> </a>What to do?</h2>
<p>In order to control the actual width of columns in a table, we have a couple of options. Since, according to the spec, setting <code class="prettyprint">table-layout: auto</code> can have unpredictable results, we should use <code class="prettyprint">table-layout: fixed</code> if we’re not sure of the length of the content that will occupy the table cells.</p>
<p>In this case, the browser will try to determine the width of the columns first by the widths of the column elements, second by the width of the cells in the first row of the column, and third by distributing total table <code class="prettyprint">width</code>, if it is set, equally among columns (not that if it is <em>not</em> set, then the automatic table algorithm from above will be used, in some cases [see end note]). This is called the <a href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" rel="nofollow">fixed table layout algorithm</a>.</p>
<p><a href="http://jsfiddle.net/8vzRb/7/" rel="nofollow">Here’s an example</a>: much better!</p>
<h4 id="end-note_4">
<a class="head_anchor" href="#end-note_4" rel="nofollow"> </a>End note</h4>
<p>The specification is a little shaky on what kind of algorithms should be used when for table width. Steps go like this, for a <code class="prettyprint">table</code> or <code class="prettyprint">inline-table</code> element:</p>
<ol>
<li>If the table has <code class="prettyprint">table-layout: auto</code>, use the non-normative auto algorithm.</li>
<li>If the table has <code class="prettyprint">table-layout: fixed</code> and has a <code class="prettyprint">width</code> set, then use the normative fixed algorithm (aka, distribute equally) based on that width.</li>
<li>If the table has <code class="prettyprint">table-layout: fixed</code> but does <em>not</em> have a <code class="prettyprint">width</code> set, then what to do depends on whether the element is a <code class="prettyprint">table</code> or an <code class="prettyprint">inline-table</code>.
<ol>
<li>If the latter, use the auto algorithm.</li>
<li>If the former, <strong>either</strong> use the auto algorithm <strong>or</strong> calculate the total width of the table based on the normal block flow <strong>then</strong> use the fixed algorithm based on that width.</li>
</ol>
</li>
</ol>
<p>That is, the widths could still be non-normative if you use a fixed layout table with an automatic width. Maybe.</p>
<p>Tables are hard, guys.</p>