<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0">
  <id>http://justinhileman.info/</id>
  <title>justin hileman dot info</title>
  <updated>2013-04-15T19:17:20Z</updated>
  <link rel="alternate" href="http://justinhileman.info/" />
  
  <author>
    <name>Justin Hileman</name>
    <uri>http://justinhileman.com</uri>
  </author>
  <atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/atom+xml" href="http://feeds.justinhileman.info/justinhileman/blog" /><feedburner:info uri="justinhileman/blog" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><entry>
    <id>tag:justinhileman.info,2013-04-15:/article/prying/</id>
    <title type="html">Prying</title>
    <published>2013-04-15T19:17:20Z</published>
    <updated>2013-04-15T19:23:38Z</updated>
    <link rel="alternate" href="http://feeds.justinhileman.info/~r/justinhileman/blog/~3/WlDdKDbFM7Q/" />
    <content type="html">&lt;blockquote&gt;
  &lt;p&gt;We have not the reverent feeling for the rainbow that a savage has, because we know how it is made. We have lost as much as we gained by prying into that matter.&lt;/p&gt;

  
&lt;/blockquote&gt;


&lt;p&gt;Mark Twain, &lt;a href="http://www.futilitycloset.com/2013/04/08/unquote-439/"&gt;via Futility Closet&lt;/a&gt;.&lt;/p&gt;


&lt;img src="http://feeds.feedburner.com/~r/justinhileman/blog/~4/WlDdKDbFM7Q" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://justinhileman.info/article/prying/</feedburner:origLink></entry>
  <entry>
    <id>tag:justinhileman.info,2013-03-25:/article/every-browser-is-a-poser/</id>
    <title type="html">Every browser is a poser</title>
    <published>2013-03-25T23:43:12Z</published>
    <updated>2013-03-26T00:06:21Z</updated>
    <link rel="alternate" href="http://feeds.justinhileman.info/~r/justinhileman/blog/~3/ZJmJsOOt4Tw/" />
    <content type="html">&lt;p&gt;&lt;a href="/article/every-browser-is-a-poser/every-browser-is-a-poser.png"&gt;&lt;img src="/article/every-browser-is-a-poser/every-browser-is-a-poser.png" alt="Every browser is a poser."&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="http://webaim.org/blog/user-agent-string-history/"&gt;Every browser pretends to be something it’s not&lt;/a&gt;… &lt;a href="http://www.useragentstring.com"&gt;Even yours&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;And it looks like &lt;a href="http://www.neowin.net/news/ie11-to-appear-as-firefox-to-avoid-legacy-ie-css"&gt;Internet Explorer 11 is keeping up the tradition&lt;/a&gt; by pretending to be both Netscape and Firefox, but &lt;em&gt;not&lt;/em&gt; Internet Explorer.&lt;/p&gt;

&lt;p&gt;This is why we can’t have nice things.&lt;/p&gt;

&lt;img src="http://feeds.feedburner.com/~r/justinhileman/blog/~4/ZJmJsOOt4Tw" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://justinhileman.info/article/every-browser-is-a-poser/</feedburner:origLink></entry>
  <entry>
    <id>tag:justinhileman.info,2013-02-20:/article/not-the-one/</id>
    <title type="html">I'm not the one</title>
    <published>2013-02-20T20:57:13Z</published>
    <updated>2013-02-20T20:58:37Z</updated>
    <link rel="alternate" href="http://feeds.justinhileman.info/~r/justinhileman/blog/~3/H71vUds8B2w/" />
    <content type="html">&lt;blockquote&gt;
  &lt;p&gt;I’m not the one.&lt;/p&gt;

&lt;p&gt;I know how to up, and down, and double down.&lt;/p&gt;

&lt;p&gt;I’m not the one. And I’m not from this planet.&lt;/p&gt;

  
&lt;/blockquote&gt;


&lt;p&gt;If you guessed “things crazy people in San Francisco shout at nobody in particular” then you win!&lt;/p&gt;


&lt;img src="http://feeds.feedburner.com/~r/justinhileman/blog/~4/H71vUds8B2w" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://justinhileman.info/article/not-the-one/</feedburner:origLink></entry>
  <entry>
    <id>tag:justinhileman.info,2013-02-09:/article/an-unsolicited-proposal/</id>
    <title type="html">An unsolicited proposal</title>
    <published>2013-02-09T18:05:02Z</published>
    <updated>2013-02-09T18:30:40Z</updated>
    <link rel="alternate" href="http://feeds.justinhileman.info/~r/justinhileman/blog/~3/OponmTi38UU/" />
    <content type="html">&lt;blockquote&gt;
  &lt;p&gt;my name is Mr john Kennedy a citizen of American work as mechanical engineer at cruise ship in London, Actually I am single father with one child, moreover dear after I come across your name then I decided to contact you if we can know each other and then get marriage, I really interested to know you. In other hence even if you have marriage we can still be a good friend, I really like you.&lt;br&gt;
Please I am waiting for your reply&lt;br&gt;
Nice to hear from you&lt;br&gt;
Mr John Kennedy.&lt;/p&gt;

  
&lt;/blockquote&gt;


&lt;p&gt;&lt;em&gt;sic erat scriptum&lt;/em&gt;&lt;/p&gt;


&lt;img src="http://feeds.feedburner.com/~r/justinhileman/blog/~4/OponmTi38UU" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://justinhileman.info/article/an-unsolicited-proposal/</feedburner:origLink></entry>
  <entry>
    <id>tag:justinhileman.info,2013-01-08:/article/my-year-in-cities-2012/</id>
    <title type="html">My year in cities, 2012</title>
    <published>2013-01-08T11:27:30Z</published>
    <updated>2013-01-08T12:32:13Z</updated>
    <link rel="alternate" href="http://feeds.justinhileman.info/~r/justinhileman/blog/~3/xmzAsywxZBM/" />
    <content type="html">&lt;p&gt;I spent one or more nights in each of these places in 2012. It was a great year:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;Arusha, Tanzania&lt;/li&gt;
  &lt;li&gt;Austin, Texas&lt;/li&gt;
  &lt;li&gt;Charlottesville, Virginia&lt;/li&gt;
  &lt;li&gt;Deboche, Nepal&lt;/li&gt;
  &lt;li&gt;Dingboche, Nepal&lt;/li&gt;
  &lt;li&gt;Gorak Shep, Nepal&lt;/li&gt;
  &lt;li&gt;Groveland, California&lt;/li&gt;
  &lt;li&gt;Karatu, Tanzania&lt;/li&gt;
  &lt;li&gt;Kathmandu, Nepal&lt;/li&gt;
  &lt;li&gt;Lobuche, Nepal&lt;/li&gt;
  &lt;li&gt;London, England&lt;/li&gt;
  &lt;li&gt;Los Angeles, California&lt;/li&gt;
  &lt;li&gt;Monterey, California&lt;/li&gt;
  &lt;li&gt;Mountain View, California&lt;/li&gt;
  &lt;li&gt;Mt. Kilimanjaro National Park, Tanzania&lt;/li&gt;
  &lt;li&gt;Mt. Shasta, California&lt;/li&gt;
  &lt;li&gt;Namche Bazaar, Nepal&lt;/li&gt;
  &lt;li&gt;New York, New York&lt;/li&gt;
  &lt;li&gt;Ngorongoro Crater, Tanzania&lt;/li&gt;
  &lt;li&gt;Phakding, Nepal&lt;/li&gt;
  &lt;li&gt;Portland, Oregon&lt;/li&gt;
  &lt;li&gt;San Francisco, California&lt;/li&gt;
  &lt;li&gt;Serengeti National Park, Tanzania&lt;/li&gt;
  &lt;li&gt;Tarangire National Park, Tanzania&lt;/li&gt;
  &lt;li&gt;Vancouver, British Columbia, Canada&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Where did you go?&lt;/p&gt;

&lt;aside&gt;Astute readers will observe that some of these places are not cities. Many don't even warrant the title of "village". But "My year in cities, towns, villages and national parks" doesn't have quite the same ring…&lt;/aside&gt;

&lt;img src="http://feeds.feedburner.com/~r/justinhileman/blog/~4/xmzAsywxZBM" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://justinhileman.info/article/my-year-in-cities-2012/</feedburner:origLink></entry>
  <entry>
    <id>tag:justinhileman.info,2012-10-27:/article/conversations-with-siri/</id>
    <title type="html">Conversations with Siri</title>
    <published>2012-10-27T21:43:58Z</published>
    <updated>2012-10-27T21:50:01Z</updated>
    <link rel="alternate" href="http://feeds.justinhileman.info/~r/justinhileman/blog/~3/xp0F9C5-8PU/" />
    <content type="html">&lt;p&gt;“Siri, how do I get to Athleta?”&lt;/p&gt;

&lt;p&gt;“Finding directions to Atlanta, GA.”&lt;/p&gt;

&lt;p&gt;“ATHLETA.”&lt;/p&gt;

&lt;p&gt;“You’ll be there in 31½ hours.”&lt;/p&gt;

&lt;p&gt;“But, I don’t &lt;em&gt;want&lt;/em&gt; to go to Atlanta.”&lt;/p&gt;

&lt;p&gt;“If you don’t, you don’t.”&lt;/p&gt;

&lt;img src="http://feeds.feedburner.com/~r/justinhileman/blog/~4/xp0F9C5-8PU" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://justinhileman.info/article/conversations-with-siri/</feedburner:origLink></entry>
  <entry>
    <id>tag:justinhileman.info,2012-10-08:/article/on-having-a-boring-technology-stack/</id>
    <title type="html">On having a boring technology stack</title>
    <published>2012-10-08T16:28:44Z</published>
    <updated>2012-10-08T16:34:19Z</updated>
    <link rel="alternate" href="http://feeds.justinhileman.info/~r/justinhileman/blog/~3/UkByvZL0zbU/" />
    <content type="html">&lt;blockquote&gt;
  &lt;p&gt;Don’t be the biggest user of any technology.&lt;/p&gt;

  
&lt;/blockquote&gt;


&lt;p&gt;&lt;a href="http://www.marco.org"&gt;Marco Arment&lt;/a&gt;, at &lt;a href="https://brooklynbeta.org"&gt;Brooklyn Beta&lt;/a&gt; 2010, on having a boring technology stack.&lt;/p&gt;

&lt;p&gt;I’m bummed to be missing Brooklyn Beta this year. It’s a great conference.&lt;/p&gt;


&lt;img src="http://feeds.feedburner.com/~r/justinhileman/blog/~4/UkByvZL0zbU" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://justinhileman.info/article/on-having-a-boring-technology-stack/</feedburner:origLink></entry>
  <entry>
    <id>tag:justinhileman.info,2012-09-18:/article/magic/</id>
    <title type="html">Teller, on magic</title>
    <published>2012-09-19T02:20:52Z</published>
    <updated>2012-09-19T02:26:17Z</updated>
    <link rel="alternate" href="http://feeds.justinhileman.info/~r/justinhileman/blog/~3/ryrHnmuXqmg/" />
    <content type="html">&lt;blockquote&gt;
  &lt;p&gt;Sometimes magic is just someone spending more time on something than anyone else might reasonably expect.&lt;/p&gt;

  
&lt;/blockquote&gt;


&lt;p&gt;Teller, from &lt;cite&gt;&lt;a href="http://www.esquire.com/features/teller-honor-system-1012"&gt;The Honor System&lt;/a&gt;&lt;/cite&gt;,
via &lt;a href="http://quotesondesign.com/raymond-joseph-teller/"&gt;Quotes on Design&lt;/a&gt;.&lt;/p&gt;


&lt;img src="http://feeds.feedburner.com/~r/justinhileman/blog/~4/ryrHnmuXqmg" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://justinhileman.info/article/magic/</feedburner:origLink></entry>
  <entry>
    <id>tag:justinhileman.info,2012-09-13:/article/the-iphone-icon-ceiling/</id>
    <title type="html">The iPhone "Icon Ceiling" has been broken: is this the beginning of the end?</title>
    <published>2012-09-13T15:33:47Z</published>
    <updated>2012-09-16T00:39:25Z</updated>
    <link rel="alternate" href="http://feeds.justinhileman.info/~r/justinhileman/blog/~3/XQxkwIc_2Tc/" />
    <content type="html">&lt;p&gt;&lt;img src="/article/the-iphone-icon-ceiling/iphone-boxes.jpg" alt="iPhone, iPhone 3G and iPhone 3GS boxes"&gt;
&lt;span class="cc"&gt;&lt;a href="http://www.flickr.com/photos/fleur-design/"&gt;cc:by The Pug Father&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;

&lt;p&gt;Since its inception, the iPhone has had a hard icon limit: At most, 20 apps are allowed on the home screen. As you can see from the boxes above, these boundaries have been pushed: the default iPhone home screen has become more crowded with each new generation. But—until yesterday—this limit put in place under Steve Jobs has never been broken.&lt;/p&gt;

&lt;h4 id="default-iphone-home-screen-icon-count"&gt;Default iPhone home screen icon count&lt;/h4&gt;

&lt;p&gt;&lt;a href="/article/the-iphone-icon-ceiling/icon-ceiling.png"&gt;&lt;img src="/article/the-iphone-icon-ceiling/icon-ceiling.png" alt='The "Icon Ceiling"'&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;While Jobs still held the company reins, this “Icon Ceiling” was strictly enforced: the iPhone home screen had a hard and fast limit of 20 icons. Careful readers will note that the default home screen icon count hit that limit twice—once with the iPhone 3GS, and again with the iPhone 4S.&lt;/p&gt;

&lt;p&gt;In the former case, the crisis was averted when Apple developed an innovative new UI paradigm to handle the added capacity: in iOS 4.1, Apple added folders, allowing them to drop back down to a safe home screen icon count.&lt;/p&gt;

&lt;p&gt;But when disaster reared its head again, and the iPhone 4S shipped with a home screen chock full of default apps, the team was unable to deliver that good old Apple magic. Without Apple co-founder and longtime CEO Steve Jobs at the helm, the visionless Apple saw no way forward but to break the time-honored Icon Ceiling.&lt;/p&gt;

&lt;h2 id="a-taste-of-things-to-come"&gt;A taste of things to come?&lt;/h2&gt;

&lt;div class="has-iphone5"&gt;
  &lt;p&gt;&lt;img src="/article/the-iphone-icon-ceiling/iphone-5.jpg" alt="The iPhone 5 ships with 21 home screen icons"&gt;&lt;/p&gt;

  &lt;p&gt;For a year now, Apple has been chugging along on intertia and their war chest full of past profits, but will that be enough to last? Yesterday’s iPhone 5 announcement was a sign of the weakening resolve in the post-Jobs iPhone team. The iPhone 5 ships with 21 home screen icons.&lt;/p&gt;

  &lt;p&gt;Is it any coincidence that the “Icon Ceiling” was respected until this, the very first post-Jobs iPhone?&lt;/p&gt;

  &lt;p&gt;&lt;em&gt;Twenty. One. Icons.&lt;/em&gt;&lt;/p&gt;

  &lt;p&gt;Sure, yesterday’s hardware refresh has given Apple a lifeline for another year or so. There are three empty slots at the bottom of the oversized new display, but how long will they last? What does this alarming trend say about the future of this once-great corporation?&lt;/p&gt;

  &lt;p&gt;&lt;strong&gt;Is this phone an harbinger of Apple’s impending doom?&lt;/strong&gt;&lt;/p&gt;
&lt;/div&gt;

&lt;h2 id="analysts-projections-are-grave"&gt;Analysts’ projections are grave&lt;/h2&gt;

&lt;p&gt;Apple can’t hope to keep home screen icon escalation up indefinitely. Now that they’ve demonstrated their willingness to throw caution to the wind, will they ever stop?&lt;/p&gt;

&lt;p&gt;Analysts estimate that at the current rate of growth, there will be &lt;em&gt;over 45 icons on the home screen&lt;/em&gt; within two major hardware generations.&lt;/p&gt;

&lt;h4 id="projected-iphone-home-screen-icon-count"&gt;Projected iPhone home screen icon count&lt;/h4&gt;

&lt;p&gt;&lt;a href="/article/the-iphone-icon-ceiling/icon-ceiling-projection.png"&gt;&lt;img src="/article/the-iphone-icon-ceiling/icon-ceiling-projection.png" alt="Analysts projections are grave"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The Mac apologists, and Grubers, and Macalopes may try to spin these facts, but we all know &lt;a href="http://daringfireball.net/linked/2012/09/12/df4"&gt;they’ve been wrong before&lt;/a&gt;. And in this case, we’ve got numbers, and numbers don’t lie. The situation looks grave.&lt;/p&gt;

&lt;h2 id="early-prototypes-dont-provide-much-hope"&gt;Early prototypes don’t provide much hope&lt;/h2&gt;

&lt;p&gt;I’ve been given exclusive access to a leaked early prototype of the not-even-announced-yet “iPhone 7”. The very model which analysts warn might spell the death of the iPhone family. And I’ve gotta say, it doesn’t look very promising. Call me a skeptic, but I don’t see anyone buying this so-called “iPhone 7”:&lt;/p&gt;

&lt;p&gt;&lt;a href="/article/the-iphone-icon-ceiling/iphone-7-prototype.png"&gt;&lt;img src="/article/the-iphone-icon-ceiling/iphone-7-prototype.png" alt='Early prototypes of the "iPhone 7"'&gt;&lt;/a&gt;&lt;/p&gt;


&lt;img src="http://feeds.feedburner.com/~r/justinhileman/blog/~4/XQxkwIc_2Tc" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://justinhileman.info/article/the-iphone-icon-ceiling/</feedburner:origLink></entry>
  <entry>
    <id>tag:justinhileman.info,2012-09-05:/article/coda-2-modes-scopes-and-you/</id>
    <title type="html">Coda 2 modes, scopes, and you</title>
    <published>2012-09-05T20:44:47Z</published>
    <updated>2012-09-05T21:36:37Z</updated>
    <link rel="alternate" href="http://feeds.justinhileman.info/~r/justinhileman/blog/~3/fwTj68I6EyI/" />
    <content type="html">&lt;p&gt;Hidden in the massive list of awesome that Panic shipped with Coda 2 was an entirely new way to highlight files: color themes, or Syntax Style Sheets. And they are awesome.&lt;/p&gt;

&lt;p&gt;Essentially, they separated syntax &lt;em&gt;parsing&lt;/em&gt; (syntax &lt;code&gt;.mode&lt;/code&gt; bundles) from &lt;em&gt;highlighting&lt;/em&gt; (the new syntax stylesheets). Unfortunately, to make any progress, you’ve gotta break a few things. In this case, Coda 1 syntax modes don’t quite work with the new color themes.&lt;/p&gt;

&lt;h2 id="so-whats-all-this-about-scopes"&gt;So what’s all this about scopes?&lt;/h2&gt;

&lt;p&gt;The difference between syntax modes for Coda 1 and Coda 2 largely boils down to an attribute called &lt;code&gt;scope&lt;/code&gt;. These scope attributes are how Coda 2 decides which bits are what colors.&lt;/p&gt;

&lt;h3 id="this-isnt-the-perfect-analogy-but-bear-with-me"&gt;This isn’t the perfect analogy, but bear with me&lt;/h3&gt;

&lt;p&gt;If you think about a syntax mode and a color theme as XML and CSS, it makes a lot of sense. &lt;/p&gt;

&lt;p&gt;The syntax mode is a set of rules for parsing a file and generating a document. Let’s pretend it’s generating an XML document. So this: &lt;/p&gt;

&lt;pre&gt;&lt;code class="language-php"&gt;&lt;span style="font-weight:bold;color:#666"&gt;&amp;lt;?php&lt;/span&gt;
    &lt;span style="color:#369;font-weight:bold"&gt;echo&lt;/span&gt; &lt;span style="background-color:hsla(0,100%,50%,0.05)"&gt;&lt;span style="color:#710"&gt;"&lt;/span&gt;&lt;span style="color:#D20"&gt;foo&lt;/span&gt;&lt;span style="color:#710"&gt;"&lt;/span&gt;&lt;/span&gt;;
&lt;span style="font-weight:bold;color:#666"&gt;?&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Might look something like this in our imaginary XML representation: &lt;/p&gt;

&lt;pre&gt;&lt;code class="language-xml"&gt;&lt;span style="color:#070"&gt;&amp;lt;delimiter&amp;gt;&lt;/span&gt;&lt;span style="color:#800;font-weight:bold"&gt;&amp;amp;lt;&lt;/span&gt;?php&lt;span style="color:#070"&gt;&amp;lt;/delimiter&amp;gt;&lt;/span&gt; 
    &lt;span style="color:#070"&gt;&amp;lt;keyword&amp;gt;&lt;/span&gt;echo&lt;span style="color:#070"&gt;&amp;lt;/keyword&amp;gt;&lt;/span&gt; &lt;span style="color:#070"&gt;&amp;lt;string&amp;gt;&lt;/span&gt;"foo"&lt;span style="color:#070"&gt;&amp;lt;/string&amp;gt;&lt;/span&gt;;
&lt;span style="color:#070"&gt;&amp;lt;delimiter&amp;gt;&lt;/span&gt;?&lt;span style="color:#800;font-weight:bold"&gt;&amp;amp;gt;&lt;/span&gt;&lt;span style="color:#070"&gt;&amp;lt;/delimiter&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Now to make this pretty, you’d use CSS like this: &lt;/p&gt;

&lt;pre&gt;&lt;code class="language-css"&gt;&lt;span style="color:#339;font-weight:bold"&gt;delimiter&lt;/span&gt; { &lt;span style="color:#606"&gt;color&lt;/span&gt;: &lt;span style="color:#088"&gt;grey&lt;/span&gt;; } 
&lt;span style="color:#339;font-weight:bold"&gt;keyword&lt;/span&gt;   { &lt;span style="color:#606"&gt;color&lt;/span&gt;: &lt;span style="color:#088"&gt;blue&lt;/span&gt;; } 
&lt;span style="color:#339;font-weight:bold"&gt;string&lt;/span&gt;    { &lt;span style="color:#606"&gt;color&lt;/span&gt;: &lt;span style="color:#088"&gt;red&lt;/span&gt;;  }&lt;/code&gt;&lt;/pre&gt;

&lt;h3 id="make-sense"&gt;Make sense?&lt;/h3&gt;

&lt;p&gt;Now, if we wanted our imaginary XML output to be more specific, we 
could add classes: &lt;/p&gt;

&lt;pre&gt;&lt;code class="language-xml"&gt;&lt;span style="color:#070"&gt;&amp;lt;string&lt;/span&gt; &lt;span style="color:#b48"&gt;class&lt;/span&gt;=&lt;span style="background-color:hsla(0,100%,50%,0.05)"&gt;&lt;span style="color:#710"&gt;"&lt;/span&gt;&lt;span style="color:#D20"&gt;double-quote&lt;/span&gt;&lt;span style="color:#710"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span style="color:#070"&gt;&amp;gt;&lt;/span&gt;"foo"&lt;span style="color:#070"&gt;&amp;lt;/string&amp;gt;&lt;/span&gt; .
&lt;span style="color:#070"&gt;&amp;lt;string&lt;/span&gt; &lt;span style="color:#b48"&gt;class&lt;/span&gt;=&lt;span style="background-color:hsla(0,100%,50%,0.05)"&gt;&lt;span style="color:#710"&gt;"&lt;/span&gt;&lt;span style="color:#D20"&gt;single-quote&lt;/span&gt;&lt;span style="color:#710"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span style="color:#070"&gt;&amp;gt;&lt;/span&gt;'bar'&lt;span style="color:#070"&gt;&amp;lt;/string&amp;gt;&lt;/span&gt;;&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Now we can style it like this: &lt;/p&gt;

&lt;pre&gt;&lt;code class="language-css"&gt;&lt;span style="color:#339;font-weight:bold"&gt;string&lt;/span&gt;&lt;span style="color:#B06;font-weight:bold"&gt;.double-quote&lt;/span&gt; { &lt;span style="color:#606"&gt;color&lt;/span&gt;: &lt;span style="color:#088"&gt;red&lt;/span&gt;;    } 
&lt;span style="color:#339;font-weight:bold"&gt;string&lt;/span&gt;&lt;span style="color:#B06;font-weight:bold"&gt;.single-quote&lt;/span&gt; { &lt;span style="color:#606"&gt;color&lt;/span&gt;: &lt;span style="color:#088"&gt;orange&lt;/span&gt;; }&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;By using a more specific selector, we can have a general color as a base style, or a more specific color when needed. Note that the examples above aren’t actually what the default syntax modes use, they’re simplified so they’re easier to grok. &lt;/p&gt;

&lt;h3 id="like-i-said-this-isnt-the-perfect-analogy-but-its-close-enough-to-get-the-idea"&gt;Like I said, this isn’t the perfect analogy, but it’s close enough to get the idea.&lt;/h3&gt;

&lt;p&gt;When you have a “state” or a “keyword” in your syntax mode, you can assign it a “scope” which is something like a CSS class. This scope is then used by color themes to actually make your mode be colors.&lt;/p&gt;

&lt;p&gt;Because color themes (and the preferences dialog) style generic versions of things, you want to use the same basic scope names as the 
default themes. For example: &lt;/p&gt;

&lt;pre&gt;&lt;code class="language-js"&gt;constant                  &lt;span style="color:#777"&gt;// general case for any constant &lt;/span&gt;
constant.numeric          &lt;span style="color:#777"&gt;// like an int or a float &lt;/span&gt;
constant.numeric.keyword  &lt;span style="color:#777"&gt;// this might be True or False or Nil or something &lt;/span&gt;

keyword                   &lt;span style="color:#777"&gt;// general keyword &lt;/span&gt;
keyword.control           &lt;span style="color:#777"&gt;// depends on the language &lt;/span&gt;
keyword.type              &lt;span style="color:#777"&gt;// typehints, typecasting, etc&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Your actual scopes can be &lt;em&gt;more&lt;/em&gt; specific than this. You could use &lt;code&gt;scope="keyword.type.cast.java"&lt;/code&gt; as the scope for typecasting in a Java syntax mode, for example, and it would be highlighted using the most specific style available, in this case &lt;code&gt;keyword.type&lt;/code&gt;.&lt;/p&gt;

&lt;h3 id="to-see-all-of-the-generic-scopes-available"&gt;To see all of the generic scopes available&lt;/h3&gt;

&lt;p&gt;Open Coda 2 preferences and export your current color scheme. Edit it (don’t double click, or it will import) and check out all the style rules.&lt;/p&gt;

&lt;p&gt;By using generic scopes (&lt;code&gt;markup.comment&lt;/code&gt;, &lt;code&gt;language.variable&lt;/code&gt;, etc) Panic made it so any color scheme could work with any syntax mode, provided the syntax mode uses the same basic scope names. This is 100% awesomer than before. If you want to see the difference, &lt;a href="http://justinhileman.info/coda-colors/"&gt;download any color scheme from this page&lt;/a&gt; and look at the source of the old-school &lt;code&gt;.seestyle&lt;/code&gt; vs the new &lt;code&gt;.sss&lt;/code&gt; of the exact same color scheme.&lt;/p&gt;

&lt;p&gt;With the old way, any time a any new syntax mode came along, we would have to update the theme and add a couple hundred lines of XML to color things correctly. That’s the equivalent to using &lt;code&gt;&amp;lt;font&amp;gt;&lt;/code&gt; tags to style text all over your website. It doesn’t scale, and it’s not future-proof. So Panic replaced it with a syntax style sheet (at least that’s what I assume &lt;code&gt;.sss&lt;/code&gt; stands for). &lt;/p&gt;

&lt;h4 id="the-new-way-is-a-ton-better-eh"&gt;The new way is a ton better, eh?&lt;/h4&gt;

&lt;h2 id="cool-story-bro"&gt;Cool story, bro.&lt;/h2&gt;

&lt;h3 id="but-how-do-i-update-a-coda-1-syntax-mode-to-work-with-coda-2"&gt;But how do I update a Coda 1 syntax mode to work with Coda 2?&lt;/h3&gt;

&lt;p&gt;Simple: add scopes.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/bobthecow/Mustache.mode/commit/da8f39adff699754f14969e8b621e85d84f39e52"&gt;You can see the update applied to Mustache.mode here&lt;/a&gt;. You’ll need to do something similar to your syntax mode.&lt;/p&gt;

&lt;p&gt;It’s probably easiest to open one of the default syntax modes and work from that. For each of the states and keywords in your syntax mode, find an analogous state from the default mode. Choose the same scope, or make up one that has the same base but is more “specific”.&lt;/p&gt;

&lt;p&gt;It’s important to pick scopes based on semantic meaning, rather than desired color. This maintains consistency between languages: If you pick blue as your &lt;code&gt;language.variable&lt;/code&gt; color, it’ll be blue in &lt;code&gt;language.variable.php&lt;/code&gt;, &lt;code&gt;language.variable.less&lt;/code&gt; or &lt;code&gt;language.variable.string.here-doc.perl&lt;/code&gt;.&lt;/p&gt;

&lt;img src="http://feeds.feedburner.com/~r/justinhileman/blog/~4/fwTj68I6EyI" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://justinhileman.info/article/coda-2-modes-scopes-and-you/</feedburner:origLink></entry>
</feed>
