JSON Feed Validator

Check whether your feed is valid. For more information about JSON Feed, see the specification.

{
  "version": "https://jsonfeed.org/version/1",
  "title": "Josh Dick",
  "home_page_url": "https://joshdick.net",
  "feed_url": "https://joshdick.net/feed.json",
  "description": "Thoughts on technology and more from Josh Dick.",
  "author": {
    "name": "Josh Dick",
    "url": "https://joshdick.net"
  },
  "items": [
    {
      "id": "https://joshdick.net/2018/05/19/tabclip_a_web_browser_extension.html",
      "title": "Tabclip: A Web Browser Extension",
      "summary": "Copy browser tabs to (and create browser tabs from) your clipboard.",
      "content_html": "<p>A few days ago, I released a new web browser extension for Mozilla Firefox and Google Chrome/Vivaldi called <a href=\"https://joshdick.github.io/tabclip\">tabclip</a> that allows you to copy browser tabs to (or create them from) your clipboard.</p><p><img src=\"/asset/post_assets/2018/05/tabclip_screenshot.png\" alt=\"Tabclip Screenshot\" /></p><p>The &#8220;Copy&#8221; button (and associated options) copy tab URLs to your clipboard.</p><p>The &#8220;Paste&#8221; button attempts to find all URLs that appear in your clipboard, then opens each URL in a new browser tab.</p><p>That&#8217;s it!</p><p>Tabclip is heavily inspired by Vincent Paré&#8217;s <a href=\"https://chrome.google.com/webstore/detail/copy-all-urls/djdmadneanknadilpjiknlnanaolmbfk\">&#8220;Copy All Urls&#8221; Chrome extension</a>. I created tabclip because I wanted a similar extension that looked and worked the same in both Chrome and Firefox. Tabclip was written from scratch and shares no code with the &#8220;Copy All Urls&#8221; Chrome extension.</p><p>You can get tabclip for Firefox <a href=\"https://addons.mozilla.org/en-US/firefox/addon/tabclip/\">here</a> and for Chrome/Vivaldi <a href=\"https://chrome.google.com/webstore/detail/tabclip/kdmfphcdeckocjmkmkgffgehadjhmkmc\">here</a>. Tabclip&#8217;s source code is available at <a href=\"https://github.com/joshdick/tabclip\">its GitHub page</a>.</p>",
      "url": "https://joshdick.net/2018/05/19/tabclip_a_web_browser_extension.html",
      "tags": [
        "browser",
        "plugins"
      ],
      "date_published": "2018-05-19T00:00:00-04:00",
      "date_modified": "2018-05-19T00:00:00-04:00"
    },
    {
      "id": "https://joshdick.net/2017/06/08/my_git_prompt_for_zsh_revisited.html",
      "title": "My Git Prompt for Zsh, Revisited",
      "summary": "An elegant, bird's-eye view of your Git repositories.",
      "content_html": "<blockquote>  <p><em>This post is a follow-up to my <a href=\"/2012/12/30/my_git_prompt_for_zsh.html\">previous post</a> about the original version of my <code class=\"highlighter-rouge\">zsh</code> Git prompt, which showed Git information on the right-hand side using <code class=\"highlighter-rouge\">zsh</code>&#8217;s <code class=\"highlighter-rouge\">RPS1</code> prompt.</em></p>  <p><em><strong>Update on May 30, 2018:</strong> Updated the Git prompt code to be slightly cleaner.</em></p></blockquote><p>I like seeing useful information about <a href=\"https://git-scm.com\">Git</a> repositories at a glance on the command line, and after using my <a href=\"/2012/12/30/my_git_prompt_for_zsh.html\">previous Git prompt for <code class=\"highlighter-rouge\">zsh</code></a> for about 4½ years, I decided it was time for some cosmetic tweaks and code cleanup.</p><p>This prompt is functionally the same as the previous one, but has been moved from the right hand side to the left-hand side, and includes different symbols for showing the &#8220;commits ahead/behind&#8221; counts.</p><p>Like the previous prompt, this prompt:</p><ul>  <li>Only appears if your current directory is a Git repository.</li>  <li>Shows number of commits ahead and behind upstream, as applicable.</li>  <li>Shows if a merge is currently taking place.</li>  <li>Shows a &#8220;traffic light&#8221; representation of <code class=\"highlighter-rouge\">git status</code>:    <ul>      <li>Red (<span style=\"color:#F00\">●</span>) means there are untracked changes.</li>      <li>Yellow (<span style=\"color:#FF0\">●</span>) means there are unstaged changes.</li>      <li>Green (<span style=\"color:#0F0\">●</span>) means there are staged changes.</li>    </ul>  </li></ul><p>Here&#8217;s a contrived example that demonstrates how the prompt works (click on it for a larger version):</p><p><a class=\"borderless\" href=\"/asset/post_assets/2017/06/git_zsh_prompt.png\"><img src=\"/asset/post_assets/2017/06/git_zsh_prompt.png\" alt=\"Git Prompt for zsh\" /></a></p><p>While creating this updated version of my Git prompt, I looked into implementing it using <code class=\"highlighter-rouge\">zsh</code>&#8217;s built-in <a href=\"http://zsh.sourceforge.net/Doc/Release/User-Contributions.html#Version-Control-Information\"><code class=\"highlighter-rouge\">vcs-info</code> mechanism</a>, but attempting to use it only made the code more complicated and cumbersome, so I decided against it.</p><p>I use this prompt in combination with the excellent <a href=\"https://github.com/sickill/git-dude\"><code class=\"highlighter-rouge\">sickill/git-dude</code> Git commit notifier</a>, which automatically keeps repositories of your choosing up to date, and which will periodically trigger appropriate &#8220;commits behind&#8221; counts in the prompt when working with those repositories. This solution works great for my needs, but if you&#8217;d prefer a <code class=\"highlighter-rouge\">zsh</code> Git prompt that can keep repositories up to date on its own, check out <a href=\"https://github.com/sindresorhus/pure\"><code class=\"highlighter-rouge\">sindresorhus/pure</code></a>.</p><p>Here&#8217;s the code for the prompt, as of this writing. (If I make any changes to the code in the future, the most up-to-date version will always be available <a href=\"https://github.com/joshdick/dotfiles/blob/master/zshrc.symlink\">in my <code class=\"highlighter-rouge\">.zshrc</code></a>.)</p><p>You can paste this code directly into your <code class=\"highlighter-rouge\">.zshrc</code>, or save it in its own file and source that file in your <code class=\"highlighter-rouge\">.zshrc</code>.</p><div class=\"language-zsh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>setopt prompt_substautoload <span class=\"nt\">-U</span> colors <span class=\"o\">&amp;&amp;</span> colors <span class=\"c\"># Enable colors in prompt</span><span class=\"c\"># Echoes a username/host string when connected over SSH (empty otherwise)</span>ssh_info<span class=\"o\">()</span> <span class=\"o\">{</span>  <span class=\"o\">[[</span> <span class=\"s2\">\"</span><span class=\"nv\">$SSH_CONNECTION</span><span class=\"s2\">\"</span> <span class=\"o\">!=</span> <span class=\"s1\">''</span> <span class=\"o\">]]</span> <span class=\"o\">&amp;&amp;</span> <span class=\"nb\">echo</span> <span class=\"s1\">'%(!.%{$fg[red]%}.%{$fg[yellow]%})%n%{$reset_color%}@%{$fg[green]%}%m%{$reset_color%}:'</span> <span class=\"o\">||</span> <span class=\"nb\">echo</span> <span class=\"s1\">''</span><span class=\"o\">}</span><span class=\"c\"># Echoes information about Git repository status when inside a Git repository</span>git_info<span class=\"o\">()</span> <span class=\"o\">{</span>  <span class=\"c\"># Exit if not inside a Git repository</span>  <span class=\"o\">!</span> git rev-parse <span class=\"nt\">--is-inside-work-tree</span> <span class=\"o\">&gt;</span> /dev/null 2&gt;&amp;1 <span class=\"o\">&amp;&amp;</span> <span class=\"k\">return</span>  <span class=\"c\"># Git branch/tag, or name-rev if on detached head</span>  <span class=\"nb\">local </span><span class=\"nv\">GIT_LOCATION</span><span class=\"o\">=</span><span class=\"k\">${$(</span>git symbolic-ref <span class=\"nt\">-q</span> HEAD <span class=\"o\">||</span> git name-rev <span class=\"nt\">--name-only</span> <span class=\"nt\">--no-undefined</span> <span class=\"nt\">--always</span> HEAD<span class=\"k\">)</span><span class=\"p\">#(refs/heads/|tags/)</span><span class=\"k\">}</span>  <span class=\"nb\">local </span><span class=\"nv\">AHEAD</span><span class=\"o\">=</span><span class=\"s2\">\"%{</span><span class=\"nv\">$fg</span><span class=\"s2\">[red]%}⇡NUM%{</span><span class=\"nv\">$reset_color</span><span class=\"s2\">%}\"</span>  <span class=\"nb\">local </span><span class=\"nv\">BEHIND</span><span class=\"o\">=</span><span class=\"s2\">\"%{</span><span class=\"nv\">$fg</span><span class=\"s2\">[cyan]%}⇣NUM%{</span><span class=\"nv\">$reset_color</span><span class=\"s2\">%}\"</span>  <span class=\"nb\">local </span><span class=\"nv\">MERGING</span><span class=\"o\">=</span><span class=\"s2\">\"%{</span><span class=\"nv\">$fg</span><span class=\"s2\">[magenta]%}⚡︎%{</span><span class=\"nv\">$reset_color</span><span class=\"s2\">%}\"</span>  <span class=\"nb\">local </span><span class=\"nv\">UNTRACKED</span><span class=\"o\">=</span><span class=\"s2\">\"%{</span><span class=\"nv\">$fg</span><span class=\"s2\">[red]%}●%{</span><span class=\"nv\">$reset_color</span><span class=\"s2\">%}\"</span>  <span class=\"nb\">local </span><span class=\"nv\">MODIFIED</span><span class=\"o\">=</span><span class=\"s2\">\"%{</span><span class=\"nv\">$fg</span><span class=\"s2\">[yellow]%}●%{</span><span class=\"nv\">$reset_color</span><span class=\"s2\">%}\"</span>  <span class=\"nb\">local </span><span class=\"nv\">STAGED</span><span class=\"o\">=</span><span class=\"s2\">\"%{</span><span class=\"nv\">$fg</span><span class=\"s2\">[green]%}●%{</span><span class=\"nv\">$reset_color</span><span class=\"s2\">%}\"</span>  <span class=\"nb\">local</span> <span class=\"nt\">-a</span> DIVERGENCES  <span class=\"nb\">local</span> <span class=\"nt\">-a</span> FLAGS  <span class=\"nb\">local </span><span class=\"nv\">NUM_AHEAD</span><span class=\"o\">=</span><span class=\"s2\">\"</span><span class=\"k\">$(</span>git log <span class=\"nt\">--oneline</span> @<span class=\"o\">{</span>u<span class=\"o\">}</span>.. 2&gt; /dev/null | <span class=\"nb\">wc</span> <span class=\"nt\">-l</span> | <span class=\"nb\">tr</span> <span class=\"nt\">-d</span> <span class=\"s1\">' '</span><span class=\"k\">)</span><span class=\"s2\">\"</span>  <span class=\"k\">if</span> <span class=\"o\">[</span> <span class=\"s2\">\"</span><span class=\"nv\">$NUM_AHEAD</span><span class=\"s2\">\"</span> <span class=\"nt\">-gt</span> 0 <span class=\"o\">]</span><span class=\"p\">;</span> <span class=\"k\">then    </span>DIVERGENCES+<span class=\"o\">=(</span> <span class=\"s2\">\"</span><span class=\"k\">${</span><span class=\"nv\">AHEAD</span><span class=\"p\">//NUM/</span><span class=\"nv\">$NUM_AHEAD</span><span class=\"k\">}</span><span class=\"s2\">\"</span> <span class=\"o\">)</span>  <span class=\"k\">fi  </span><span class=\"nb\">local </span><span class=\"nv\">NUM_BEHIND</span><span class=\"o\">=</span><span class=\"s2\">\"</span><span class=\"k\">$(</span>git log <span class=\"nt\">--oneline</span> ..@<span class=\"o\">{</span>u<span class=\"o\">}</span> 2&gt; /dev/null | <span class=\"nb\">wc</span> <span class=\"nt\">-l</span> | <span class=\"nb\">tr</span> <span class=\"nt\">-d</span> <span class=\"s1\">' '</span><span class=\"k\">)</span><span class=\"s2\">\"</span>  <span class=\"k\">if</span> <span class=\"o\">[</span> <span class=\"s2\">\"</span><span class=\"nv\">$NUM_BEHIND</span><span class=\"s2\">\"</span> <span class=\"nt\">-gt</span> 0 <span class=\"o\">]</span><span class=\"p\">;</span> <span class=\"k\">then    </span>DIVERGENCES+<span class=\"o\">=(</span> <span class=\"s2\">\"</span><span class=\"k\">${</span><span class=\"nv\">BEHIND</span><span class=\"p\">//NUM/</span><span class=\"nv\">$NUM_BEHIND</span><span class=\"k\">}</span><span class=\"s2\">\"</span> <span class=\"o\">)</span>  <span class=\"k\">fi  </span><span class=\"nb\">local </span><span class=\"nv\">GIT_DIR</span><span class=\"o\">=</span><span class=\"s2\">\"</span><span class=\"k\">$(</span>git rev-parse <span class=\"nt\">--git-dir</span> 2&gt; /dev/null<span class=\"k\">)</span><span class=\"s2\">\"</span>  <span class=\"k\">if</span> <span class=\"o\">[</span> <span class=\"nt\">-n</span> <span class=\"nv\">$GIT_DIR</span> <span class=\"o\">]</span> <span class=\"o\">&amp;&amp;</span> <span class=\"nb\">test</span> <span class=\"nt\">-r</span> <span class=\"nv\">$GIT_DIR</span>/MERGE_HEAD<span class=\"p\">;</span> <span class=\"k\">then    </span>FLAGS+<span class=\"o\">=(</span> <span class=\"s2\">\"</span><span class=\"nv\">$MERGING</span><span class=\"s2\">\"</span> <span class=\"o\">)</span>  <span class=\"k\">fi  if</span> <span class=\"o\">[[</span> <span class=\"nt\">-n</span> <span class=\"k\">$(</span>git ls-files <span class=\"nt\">--other</span> <span class=\"nt\">--exclude-standard</span> 2&gt; /dev/null<span class=\"k\">)</span> <span class=\"o\">]]</span><span class=\"p\">;</span> <span class=\"k\">then    </span>FLAGS+<span class=\"o\">=(</span> <span class=\"s2\">\"</span><span class=\"nv\">$UNTRACKED</span><span class=\"s2\">\"</span> <span class=\"o\">)</span>  <span class=\"k\">fi  if</span> <span class=\"o\">!</span> git diff <span class=\"nt\">--quiet</span> 2&gt; /dev/null<span class=\"p\">;</span> <span class=\"k\">then    </span>FLAGS+<span class=\"o\">=(</span> <span class=\"s2\">\"</span><span class=\"nv\">$MODIFIED</span><span class=\"s2\">\"</span> <span class=\"o\">)</span>  <span class=\"k\">fi  if</span> <span class=\"o\">!</span> git diff <span class=\"nt\">--cached</span> <span class=\"nt\">--quiet</span> 2&gt; /dev/null<span class=\"p\">;</span> <span class=\"k\">then    </span>FLAGS+<span class=\"o\">=(</span> <span class=\"s2\">\"</span><span class=\"nv\">$STAGED</span><span class=\"s2\">\"</span> <span class=\"o\">)</span>  <span class=\"k\">fi  </span><span class=\"nb\">local</span> <span class=\"nt\">-a</span> GIT_INFO  GIT_INFO+<span class=\"o\">=(</span> <span class=\"s2\">\"</span><span class=\"se\">\\0</span><span class=\"s2\">33[38;5;15m±\"</span> <span class=\"o\">)</span>  <span class=\"o\">[</span> <span class=\"nt\">-n</span> <span class=\"s2\">\"</span><span class=\"nv\">$GIT_STATUS</span><span class=\"s2\">\"</span> <span class=\"o\">]</span> <span class=\"o\">&amp;&amp;</span> GIT_INFO+<span class=\"o\">=(</span> <span class=\"s2\">\"</span><span class=\"nv\">$GIT_STATUS</span><span class=\"s2\">\"</span> <span class=\"o\">)</span>  <span class=\"o\">[[</span> <span class=\"k\">${#</span><span class=\"nv\">DIVERGENCES</span><span class=\"p\">[@]</span><span class=\"k\">}</span> <span class=\"nt\">-ne</span> 0 <span class=\"o\">]]</span> <span class=\"o\">&amp;&amp;</span> GIT_INFO+<span class=\"o\">=(</span> <span class=\"s2\">\"</span><span class=\"k\">${</span><span class=\"p\">(j</span>::<span class=\"p\">)DIVERGENCES</span><span class=\"k\">}</span><span class=\"s2\">\"</span> <span class=\"o\">)</span>  <span class=\"o\">[[</span> <span class=\"k\">${#</span><span class=\"nv\">FLAGS</span><span class=\"p\">[@]</span><span class=\"k\">}</span> <span class=\"nt\">-ne</span> 0 <span class=\"o\">]]</span> <span class=\"o\">&amp;&amp;</span> GIT_INFO+<span class=\"o\">=(</span> <span class=\"s2\">\"</span><span class=\"k\">${</span><span class=\"p\">(j</span>::<span class=\"p\">)FLAGS</span><span class=\"k\">}</span><span class=\"s2\">\"</span> <span class=\"o\">)</span>  GIT_INFO+<span class=\"o\">=(</span> <span class=\"s2\">\"</span><span class=\"se\">\\0</span><span class=\"s2\">33[38;5;15m</span><span class=\"nv\">$GIT_LOCATION</span><span class=\"s2\">%{</span><span class=\"nv\">$reset_color</span><span class=\"s2\">%}\"</span> <span class=\"o\">)</span>  <span class=\"nb\">echo</span> <span class=\"s2\">\"</span><span class=\"k\">${</span><span class=\"p\">(j</span>:<span class=\"p\"> </span>:<span class=\"p\">)GIT_INFO</span><span class=\"k\">}</span><span class=\"s2\">\"</span><span class=\"o\">}</span><span class=\"c\"># Use ❯ as the non-root prompt character; # for root</span><span class=\"c\"># Change the prompt character color if the last command had a nonzero exit code</span><span class=\"nv\">PS1</span><span class=\"o\">=</span><span class=\"s1\">'$(ssh_info)%{$fg[magenta]%}%~%u $(git_info)%(?.%{$fg[blue]%}.%{$fg[red]%})%(!.#.❯)%{$reset_color%} '</span></code></pre></div></div><p>As with the <a href=\"/2012/12/30/my_git_prompt_for_zsh.html\">original</a> version of this prompt, I hope this prompt is as useful and as big of a time saver for you as it is for me, and I&#8217;d love to hear your thoughts about it!</p>",
      "url": "https://joshdick.net/2017/06/08/my_git_prompt_for_zsh_revisited.html",
      "tags": [
        "git",
        "shell",
        "zsh"
      ],
      "date_published": "2017-06-08T00:00:00-04:00",
      "date_modified": "2017-06-08T00:00:00-04:00"
    },
    {
      "id": "https://joshdick.net/2017/05/29/controlling_whitespace_and_empty_lines_in_jekyll.html",
      "title": "Controlling Whitespace and Empty Lines in Jekyll",
      "summary": "Jekyll-generated code can be pretty, too.",
      "content_html": "<blockquote>  <p><strong>NOTE: This post will be obsolete soon.</strong></p>  <p><a href=\"https://shopify.github.io/liquid/basics/whitespace/\">Proper whitespace control</a> was <a href=\"https://github.com/Shopify/liquid-c/pull/30\">added</a> to Liquid 4. Liquid 4 has now been <a href=\"https://github.com/jekyll/jekyll/pull/4362\">added to Jekyll</a>, though it&#8217;s not part of an official Jekyll release (yet.)</p>  <p>This post applies to Jekyll 3.4.3 and earlier, which use earlier versions of Liquid.</p>  <p><em>May 29, 2017</em></p></blockquote><h2 id=\"the-problem\">The Problem</h2><p>This blog is powered by the <a href=\"https://jekyllrb.com/\">Jekyll</a> static site generator, which internally uses <a href=\"https://shopify.github.io/liquid/\">Liquid Markup</a> for templating.</p><p>I noticed that Jekyll-generated output contains unwanted empty lines when there are corresponding Liquid template lines in the source code that wouldn&#8217;t otherwise produce visible output.</p><p>This example from <a href=\"https://shopify.github.io/liquid/basics/whitespace/\">Liquid&#8217;s whitespace control documentation</a> illustrates the problem:</p><p><strong>Liquid Input</strong></p><div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"p\">{%</span><span class=\"w\"> </span><span class=\"nt\">assign</span><span class=\"w\"> </span><span class=\"nv\">username</span><span class=\"w\"> </span><span class=\"o\">=</span><span class=\"w\"> </span><span class=\"s2\">\"John G. Chalmers-Smith\"</span><span class=\"w\"> </span><span class=\"p\">%}</span><span class=\"p\">{%</span><span class=\"w\"> </span><span class=\"kr\">if</span><span class=\"w\"> </span><span class=\"nv\">username</span><span class=\"w\"> </span><span class=\"nv\">and</span><span class=\"w\"> </span><span class=\"nv\">username</span><span class=\"p\">.</span><span class=\"nv\">size</span><span class=\"w\"> </span><span class=\"o\">&gt;</span><span class=\"w\"> </span><span class=\"mi\">10</span><span class=\"w\"> </span><span class=\"p\">%}</span>  Wow, <span class=\"p\">{{</span><span class=\"w\"> </span><span class=\"nv\">username</span><span class=\"w\"> </span><span class=\"p\">}}</span>, you have a long name!<span class=\"p\">{%</span><span class=\"w\"> </span><span class=\"kr\">else</span><span class=\"w\"> </span><span class=\"p\">%}</span>  Hello there!<span class=\"p\">{%</span><span class=\"w\"> </span><span class=\"kr\">endif</span><span class=\"w\"> </span><span class=\"p\">%}</span></code></pre></div></div><p><strong>Generated Output</strong></p><div class=\"highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>Wow, John G. Chalmers-Smith, you have a long name!</code></pre></div></div><p>The empty lines are undesirable since they are unnecessary and they make the generated output uglier.</p><h2 id=\"the-solution\">The Solution</h2><p>Here&#8217;s my solution for removing empty lines from Jekyll-generated code.</p><p>1) Add the following Jekyll plugin by creating a file named <code class=\"highlighter-rouge\">_plugins/regex_filter.rb</code> with the following contents:</p><div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># https://stackoverflow.com/a/25802375/278810</span><span class=\"k\">module</span> <span class=\"nn\">Jekyll</span>  <span class=\"k\">module</span> <span class=\"nn\">RegexFilter</span>    <span class=\"k\">def</span> <span class=\"nf\">replace_regex</span><span class=\"p\">(</span><span class=\"n\">input</span><span class=\"p\">,</span> <span class=\"n\">reg_str</span><span class=\"p\">,</span> <span class=\"n\">repl_str</span><span class=\"p\">)</span>      <span class=\"n\">re</span> <span class=\"o\">=</span> <span class=\"no\">Regexp</span><span class=\"p\">.</span><span class=\"nf\">new</span> <span class=\"n\">reg_str</span>      <span class=\"c1\"># This will be returned</span>      <span class=\"n\">input</span><span class=\"p\">.</span><span class=\"nf\">gsub</span> <span class=\"n\">re</span><span class=\"p\">,</span> <span class=\"n\">repl_str</span>    <span class=\"k\">end</span>  <span class=\"k\">end</span><span class=\"k\">end</span><span class=\"no\">Liquid</span><span class=\"o\">::</span><span class=\"no\">Template</span><span class=\"p\">.</span><span class=\"nf\">register_filter</span><span class=\"p\">(</span><span class=\"no\">Jekyll</span><span class=\"o\">::</span><span class=\"no\">RegexFilter</span><span class=\"p\">)</span></code></pre></div></div><p>2) Use the following pattern in your Liquid templates:</p><div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"p\">{%</span><span class=\"w\"> </span><span class=\"nt\">capture</span><span class=\"w\"> </span><span class=\"na\">output</span><span class=\"w\"> </span><span class=\"p\">%}</span>Content starts hereHere are lines with more content<span class=\"p\">{%</span><span class=\"w\"> </span><span class=\"kr\">if</span><span class=\"w\"> </span><span class=\"kc\">false</span><span class=\"w\"> </span><span class=\"p\">%}</span>This generates a blank line that will be stripped from the output<span class=\"p\">{%</span><span class=\"w\"> </span><span class=\"kr\">endif</span><span class=\"w\"> </span><span class=\"p\">%}</span>Content ends here<span class=\"p\">{%</span><span class=\"w\"> </span><span class=\"nt\">endcapture</span><span class=\"w\"> </span><span class=\"p\">%}{{</span><span class=\"w\"> </span><span class=\"nv\">output</span><span class=\"w\"> </span><span class=\"p\">|</span><span class=\"w\"> </span><span class=\"nf\">replace_regex</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s1\">'^\\s*$\\n'</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"s1\">''</span><span class=\"p\">}}</span></code></pre></div></div><p>3) That&#8217;s it!</p><p>The idea is that a block of template-generated output is captured within the template itself, then fed to a custom Liquid filter (the Jekyll plugin) that removes all empty lines using a regular expression.</p><p>The <code class=\"highlighter-rouge\">{% endcapture %}</code> and <code class=\"highlighter-rouge\">{% output %}</code> Liquid tags appear on the same line to prevent an empty line from appearing at the top of the generated output.</p><p>You can chain multiple invocations of the <code class=\"highlighter-rouge\">replace_regex</code> filter together if you want to perform multiple distinct whitespace transformations.</p><p>This is a simple idea, but I think it helps make Jekyll-generated code more pleasant to look at.</p>",
      "url": "https://joshdick.net/2017/05/29/controlling_whitespace_and_empty_lines_in_jekyll.html",
      "tags": [
        "code",
        "jekyll",
        "webdev"
      ],
      "date_published": "2017-05-29T00:00:00-04:00",
      "date_modified": "2017-05-29T00:00:00-04:00"
    },
    {
      "id": "https://joshdick.net/2017/01/08/understanding_ios_universal_links.html",
      "title": "Understanding iOS Universal Links",
      "summary": "When \"Open In App\" stubbornly refuses to keep its promise.",
      "content_html": "<p><a href=\"https://developer.apple.com/ios/universal-links/\">Universal Links</a> first appeared in iOS 9. According to Apple&#8217;s <a href=\"https://developer.apple.com/library/content/documentation/General/Conceptual/AppSearch/UniversalLinks.html\">Supporting Universal Links</a> document:</p><blockquote>  <p>When you support universal links, iOS 9 users can tap a link to your website and get seamlessly redirected to your installed app without going through Safari. If your app isn&#8217;t installed, tapping a link to your website opens your website in Safari.</p></blockquote><p>This is a great idea in principle, since one URL can serve two purposes without needing to use custom URL schemes, but Universal links were not working as advertised for me and I figured out why. If you are having problems getting Universal links to behave as expected, I hope this article can help.</p><h2 id=\"the-problem\">The Problem</h2><h3 id=\"open-in-app-opens-an-apps-app-store-page-instead-of-the-app\">&#8220;Open In App&#8221; Opens an app&#8217;s App Store page instead of the app</h3><p>I use <a href=\"http://imgur.com\">imgur</a> and have its associated app installed on my phone, but I noticed that the &#8220;Open In App&#8221; buttons that appear on its mobile site (highlighted below) all loaded the App Store page for the imgur app instead of loading the content inside the imgur app as the buttons claimed they would.</p><p><img src=\"/asset/post_assets/2017/01/imgur_open_in_app_buttons.png\" alt=\"imgur's &quot;Open in App&quot; buttons\" /></p><p><img src=\"/asset/post_assets/2017/01/imgur_app_store_page.png\" alt=\"imgur's App Store page\" /></p><p>I figured there was some glitch with the buttons that was mistakenly redirecting me to the App Store. Imgur&#8217;s App Store page showed the &#8220;Open&#8221; button that normally appears when you look at an App Store page for an installed app, so for a while it never occurred to me to press the button since I figured it would just open the app to its default state, just like it does when manually viewing its App Store page by searching for it in the App Store.</p><p>I was wrong.</p><p>It turns out that <strong>tapping the Open button on an app&#8217;s App Store page after being redirected to it by tapping a Universal Link will open the linked content in-app, rather than the default/front page of the app.</strong></p><p>There is no visual indication that App Store page &#8220;Open&#8221; buttons have different behaviors when being redirected from a Universal Link versus browsing the App Store manually, even though this is clearly the case.</p><p>Regardless, I expected &#8220;Open In App&#8221; to actually load the linked content in-app and not to add an extra step of loading an app&#8217;s App Store page.</p><h2 id=\"the-realization\">The Realization</h2><p>After doing some Internet digging, bullet point 4 of <a href=\"http://stackoverflow.com/a/32751734/278810\">this StackOverflow answer</a> shed some light on the situation.</p><p>First, some terminology: I will refer to a Universal Link as <strong>enabled</strong> if tapping it causes content to load in-app, and <strong>disabled</strong> if tapping it causes content to load in a web page or causes an App Store page to open.</p><p>It turns out that different URL paths under a single domain name can be independently set to have their corresponding Universal Link behavior be enabled/disabled depending on how the developer configured them (see the &#8220;Creating and Uploading the Association File&#8221; section of Apple&#8217;s <a href=\"https://developer.apple.com/library/content/documentation/General/Conceptual/AppSearch/UniversalLinks.html\">Supporting Universal Links</a> document), and that <strong>the per-Universal Link setting stays in effect until it is changed again</strong>.</p><p>This means that the instructions below may need to be repeated multiple times for a single site.</p><p>Another factor that adds to the confusion is that there is no way to tell whether a given Universal Link is enabled/disabled other than tapping it to see what its behavior currently is.</p><h2 id=\"the-solution\">The Solution</h2><h3 id=\"enabling-a-universal-link\">Enabling a Universal Link</h3><p>If tapping a Universal Link currently opens a web or App Store page as described above but you want the link to cause content to load in-app, that means the Universal Link is currently disabled. Here&#8217;s how to enable it:</p><ol>  <li>    <p>Try pulling down/scrolling up on the web site when the page view is already scrolled all the way to the top to reveal an <code class=\"highlighter-rouge\">Open in the [App Name] App</code> banner as pictured below:</p>    <p><img src=\"/asset/post_assets/2017/01/imgur_open_in_app_banner.png\" alt=\"imgur's App Store page\" /></p>    <p>Tapping the banner will enable the Universal Link and cause the content to load in-app.</p>  </li>  <li>    <p>If no banner appears as shown above, tap and hold on the Universal Link until a dialog with buttons appears. If you scroll through the buttons, one should say <code class=\"highlighter-rouge\">Open in \"[App Name]\"</code> as pictured below:</p>    <p><img src=\"/asset/post_assets/2017/01/imgur_open_in_app_button.png\" alt=\"imgur's App Store page\" /></p>    <p>Tapping the <code class=\"highlighter-rouge\">Open in \"[App Name]\"</code> button will enable the Universal Link and cause the content to load in-app.</p>  </li></ol><p>Once the Universal Link is enabled (content loads in-app), it will <strong>always load in-app in the future</strong> unless you [re]disable the Universal Link as described below.</p><p>Note that when tapping a disabled Universal Link causes a redirection to an app&#8217;s App Store page, tapping the &#8220;Open&#8221; button on that page <strong>will cause content to load in-app that one time, and will not enable that Universal Link for future use as described above.</strong></p><h3 id=\"disabling-a-universal-link\">Disabling a Universal Link</h3><p>If tapping a Universal Link currently causes content content to load in-app but you want the link to open a web (or App Store) page, that means the Universal Link is currently enabled. Here&#8217;s how to disable it:</p><p>When content has loaded in-app after tapping a Universal Link, you should see some text at the very top-right of the screen in the iOS status bar with the domain name of the page whose Universal Link redirected you to that app, as pictured below:</p><p><img src=\"/asset/post_assets/2017/01/imgur_status_bar_link.png\" alt=\"imgur's App Store page\" /></p><p>Tapping that text will cause the content to open in  a web (or App Store) page and will disable the Universal Link that opened the app.</p><p>Once the Universal Link is disabled (content doesn&#8217;t load in-app), content will <strong>never load in-app in the future</strong> unless you [re]enable the Universal Link as described above.</p><p>If you want to view content from an enabled Universal Link on the web after its content loads in-app just one time/without disabling the Universal Link entirely, <strong>don&#8217;t tap the Status Bar text</strong>; instead, just switch back to your web browser.</p><h3 id=\"a-note-on-app-store-page-redirection\">A Note on App Store Page Redirection</h3><p>The behavior of disabled Universal Links causing redirections to an App Store page instead of loading content in a web page appears to be web site-specific.</p><p>In the case of my imgur example, the App Store redirection seems to be functionality that imgur explicitly implemented to try to steer users towards using their app instead of their web site, since tapping a disabled Universal Link on imgur&#8217;s web site does appear to load another page on the web site for a split second before redirecting to imgur&#8217;s App Store page. In other words, the Universal Link correctly opens imgur&#8217;s web site as expected, which itself then redirects to imgur&#8217;s App Store page (where the &#8220;Open&#8221; button would cause the content to load in-app one time as described above.) It&#8217;s possible that other sites would load web content in a web page as expected when tapping a disabled Universal Link, rather than redirecting users to an App Store page as is the case for imgur.</p><h2 id=\"conclusion\">Conclusion</h2><p>The mechanisms built in to iOS for enabling and disabling Universal Links are difficult to understand, and the fact that settings are sticky/permanent and can independently vary across given Universal Links under a single domain is not made apparent whatsoever by the UIs iOS provides around this feature.</p><p>This confusion is compounded when developers implement behavior that causes web sites to open App Store pages when tapping disabled Universal Links (as imgur seems to have done), causing content not to open in a web view as expected, despite the fact that the Universal Link is disabled.</p><p>&#8220;Open in App&#8221; links behaving differently than I expected was a large source of frustration for me when browsing the web on iOS. Given how confusing this issue was to understand, solve, and then write about, I hope this article was helpful.</p>",
      "url": "https://joshdick.net/2017/01/08/understanding_ios_universal_links.html",
      "date_published": "2017-01-08T00:00:00-05:00",
      "date_modified": "2017-01-08T00:00:00-05:00"
    },
    {
      "id": "https://joshdick.net/2015/06/28/an_event_apart_boston_2015.html",
      "title": "An Event Apart Boston 2015",
      "summary": "My notes from An Event Apart, \"the design conference for people who make websites\".",
      "content_html": "<p><img src=\"/asset/post_assets/2015/06/aea_boston_2015_bacon_cupcake.jpg\" alt=\"Bacon Cupcake\" /></p><h1 id=\"introduction\">Introduction</h1><p>I had the privilege of attending An Event Apart, &#8220;the design conference for people who make websites&#8221;, for the fourth time. My notes from <a href=\"http://aneventapart.com/event/boston-2015\">An Event Apart Boston 2015</a> follow this introduction. The notes are grouped by talk, in the order that each talk happened at the conference.</p><p>If you&#8217;re interested, my notes from An Event Apart Boston <a href=\"/2014/05/02/an_event_apart_boston_2014.html\">2014</a>, <a href=\"/2013/06/25/an_event_apart_boston_2013.html\">2013</a> and <a href=\"/2012/08/19/an_event_apart_boston_2012.html\">2012</a> are also available.</p><h1 id=\"day-1-5112015\">Day 1: 5/11/2015</h1><h2 id=\"jeffrey-zeldman---the-fault-dear-brutus-or-career-advice-from-a-cranky-old-man-zeldmancom--zeldman\">Jeffrey Zeldman - The Fault, Dear Brutus (or: Career Advice From a Cranky Old Man) (<a href=\"http://www.zeldman.com\">zeldman.com</a> &#8226; <a href=\"https://twitter.com/zeldman\">@zeldman</a>)</h2><ul>  <li>&#8220;When I get stuck in a rut, I decorate it.&#8221;</li>  <li>Work never sells itself. You need a strategy to sell.</li>  <li>&#8220;Every client wants something nobody&#8217;s done before that has worked at least three times for other people.&#8221;</li>  <li>In big companies, politics trumps work.</li>  <li>Attitude trumps work in most companies. Being indignant is not a good career move; attitude is everything.</li>  <li>First impressions are forever.</li>  <li>You are what stands between you and success: &#8220;We have met the enemy and he is us.&#8221; -Pogo</li>  <li>Dare to speak. Unlock your inner voice! (Blogging, <a href=\"https://www.dribbble.com/\">Dribbble</a>, <a href=\"https://www.behance.net/\">Behance</a>, <a href=\"https://github.com\">GitHub</a>, <a href=\"http://codepen.io/\">Codepen</a>, etc&#8230;) Blogs and side projects can show how you think and what you do, even if your regular work can&#8217;t (or you&#8217;re not allowed to share your regular work.)</li>  <li>&#8220;When you pick a typeface, your design is halfway done.&#8221;</li>  <li>Don&#8217;t wait for someone to hand you your dream job or project &#8211; make your own.</li></ul><hr /><h2 id=\"jon-hicks---icon-design-process-zeldmancom--hicksdesign\">Jon Hicks - Icon Design Process (<a href=\"http://hicksdesign.co.uk\">zeldman.com</a> &#8226; <a href=\"https://twitter.com/hicksdesign\">@hicksdesign</a>)</h2><ul>  <li>Never use color alone to signify meaning.</li>  <li>Why make your own icons instead of using a royalty-free icon set?    <ul>      <li>Not the right size</li>      <li>Not the right style</li>      <li>Too many &#8216;spare&#8217; icons</li>      <li>Not the right icons (for a specialized application, like GitHub)</li>    </ul>  </li>  <li>There are two main types of icons: iconic and symbolic. Iconic icons resemble real things; symbolic icons don&#8217;t (their meaning is learned.)</li>  <li>Iconic icons are easier/faster to recognize than symbolic icons.</li>  <li>Embrace conventions! Don&#8217;t use a welcome mat icon to represent &#8220;home&#8221;.</li>  <li><a href=\"https://thenounproject.com/\">The Noun Project</a></li>  <li>Research local knowledge: A piggy bank, a thumbs up, and an owl have different meanings for different cultures.</li>  <li>It&#8217;s possible to be <em>too</em> simple: Icons for a padlock, a shopping bag, and a 10-ton weight can look more or less identical in the absence of context (text labels) or extra visual details.</li>  <li>Whatever you use, decide:    <ul>      <li>Size(s)</li>      <li>Style</li>      <li>Final Export Format (SVG)</li>    </ul>  </li>  <li>Work on all icons together; use a grid to size/align/balance all icons.</li>  <li>Antialiasing can get in the way sometimes; an odd-number-sized grid can help with this.</li>  <li>Optimize SVG files with <a href=\"https://github.com/svg/svgo\">svgo</a></li>  <li>Icon fonts vs. SVG:    <ul>      <li>Why use icon fonts?        <ul>          <li>Scalable
</li>          <li>Small files</li>          <li>Easily styled with CSS No sprites</li>          <li>Supported in IE4+!</li>        </ul>      </li>      <li>Why not?        <ul>          <li>Fiddly process</li>          <li>No meaning</li>          <li>Only monochrome</li>          <li>No font = no joy</li>          <li>Rendering Inconsistencies</li>          <li>No meaning?</li>        </ul>      </li>    </ul>  </li>  <li><a href=\"http://www.grumpicon.com/\">Grumpicon</a>: Generate cross-browser iconsets from SVG, with appropriate fallbacks.</li>  <li>SVG elements can reference each other, which allows a single SVG path to be reused and thus drawn with different CSS styles/sizes/etc. without duplicating the path.</li></ul><hr /><h2 id=\"sarah-parmenter---designing-for-social-behavior-sazzycouk--sazzy\">Sarah Parmenter - Designing for Social Behavior (<a href=\"http://www.sazzy.co.uk/\">sazzy.co.uk</a> &#8226; <a href=\"https://twitter.com/sazzy\">@sazzy</a>)</h2><ul>  <li>&#8220;Whenever I hear the phrase &#8216;Social Media&#8217;, I think &#8216;Social Medi<em>blah</em>&#8217; instead.&#8221;</li>  <li>Social media is a tool to make <em>something</em> happen.</li>  <li>An effective social media campaign is based on the psychology of social behaviors, <em>not</em> current technology. &#8211;<a href=\"http://mprcenter.org/blog/2013/01/how-obama-won-the-social-media-battle-in-the-2012-presidential-campaign/\">Media Psychology Research Center</a></li>  <li>The basic social ecosystem (your persona and tone of voice) includes 4 channels:    <ul>      <li>Publishing channels</li>      <li>Aspirational/inspirational</li>      <li>Support channels</li>      <li>Follow up channels</li>    </ul>  </li>  <li>To survive, a [social] mobile app must have razor-sharp focus on doing just one thing.</li>  <li>With Facebook advertising, <strong>you</strong> are the product: You need to pay to access the followers that you&#8217;ve worked to build up.</li>  <li>What people use &#8220;liking&#8221; for:    <ul>      <li>Acknowledging that someone has seen/read something without explicitly leaving a comment</li>      <li>Using as a &#8220;read&#8221; flag, like e-mail</li>    </ul>  </li>  <li>Why do people comment on a photo that already has 129,000 previous comments? Tribe behavior. It&#8217;s like shouting at a sports event. #aeabos &#8211;<a href=\"https://twitter.com/zeldman/status/597795278561869825\">@zeldman</a></li>  <li>Tribe mentality is a key ingredient to both online and offline design.</li>  <li>Give anyone long enough, and they&#8217;ll work out how to game the system.</li>  <li>Social media calls for authenticity: it cannot be faked.</li>  <li>The lightbulb moment: Don&#8217;t do the safe/expected thing, be prepared to have difficult conversations. If you can&#8217;t, it will limit your ability to do good work.</li></ul><hr /><h2 id=\"josh-clark---magical-ux-and-the-internet-of-things-globalmoxiecom--globalmoxie\">Josh Clark - Magical UX and the Internet of Things (<a href=\"http://globalmoxie.com\">globalmoxie.com</a> &#8226; <a href=\"https://twitter.com/globalmoxie\">@globalmoxie</a>)</h2><h3 id=\"act-i-magic--technology\">Act I: Magic &amp; Technology</h3><ul>  <li>&#8220;Any sufficiently advanced technology is indistinguishable from magic.&#8221; &#8211;Arthur C. Clarke</li>  <li>&#8220;One goal: The computer disappears into the environment.&#8221; &#8211;Alan Kay</li>  <li>The phone is the first Internet of Things device for everyone (sensors + smarts + connectivity.)</li>  <li>Mobile phones bring computing power to immobile objects.</li>  <li>Embed smartphone brains in anything. Example: Nappy Notifier: Get a push notification when your baby&#8217;s diaper is wet.</li>  <li>&#8220;We have centuries of experiencing imagining what objects could do for us if they were just&#8230;smarter.&#8221;</li>  <li><a href=\"http://bt.tn\">bt.tn</a> and <a href=\"http://flic.io\">flic.io</a> connect to <a href=\"https://ifttt.com/\">ifttt</a> and <a href=\"https://zapier.com/\">Zapier</a></li></ul><h3 id=\"act-ii-physical-meets-digital\">Act II: Physical Meets Digital</h3><ul>  <li>Physical interaction with a digital API.</li>  <li>The world is the interface&#8230;like it always has been!</li>  <li>The world is a data source. Example: Snapshot by Progressive Insurance/<a href=\"https://www.automatic.com/\">Automatic</a> use cars&#8217; OBD-II ports to collect data.</li>  <li>The world is reactive &#8211; intentional interfaces that extend our will. Example: <a href=\"http://www.military.com/video/logistics-and-supplies/army-equipment/sandtable-as-fun-as-sanbox/3849414398001/\">Ares Sand Table</a></li>  <li>The world is a big canvas.</li>  <li>What if we stop focusing on wearables, and instead think about &#8220;thereables&#8221;, adding intelligence to objects that are already in the world? Why isn&#8217;t your bed a sleep tracker, instead of something like a FitBit?</li>  <li>The world has depth and mass. Physical objects can act together and be aware of each other across a digital space. Example: <a href=\"http://tangible.media.mit.edu/project/thaw/\">MIT Thaw</a></li>  <li>This is not a challenge of technology. It&#8217;s a challenge of imagination.</li></ul><h3 id=\"act-iii-magic-imagined\">Act III: Magic, Imagined</h3><ul>  <li>Google Glass asked, &#8220;What can we do with technology on your face?&#8221; It should have asked, &#8220;What if this thing was magic?&#8221;</li>  <li>Design for the thing&#8217;s essential thingness. Make things more like they are (and make ourselves more human), not just more technically impressive.</li>  <li>Bank on illusion. Embrace misdirection. Example: Samsung&#8217;s electric cooktop has flame-like LEDs since that gels with a user&#8217;s mental model of a hot stove.</li>  <li><a href=\"https://www.myvessyl.com/\">Vessyl</a> has amazing technology but <a href=\"http://thecolbertreport.cc.com/videos/9nzwjt/vessyl-digital-cup\">doesn&#8217;t actually add value</a>.</li>  <li>Don&#8217;t just add data; add insight. Can you imagine if every object in your house was giving you <a href=\"http://omershapira.com/blog/2014/09/its-raining-again/\">constant status updates</a>?</li>  <li>Expose as little technology as possible.</li>  <li>Be a little bit ridiculous. Examples: <a href=\"https://www.youtube.com/watch?v=y2ocATykfNo\">Sharknado + Philips Hue</a> and ThinkGeek&#8217;s <a href=\"https://www.youtube.com/watch?v=hUpukubcUjk\">Mega Stomp Battle</a>.</li>  <li>&#8220;The future of technology has always looked like a pretty toy to people comfortable with the past.&#8221; &#8211;Benedict Evans</li>  <li>People fear that magic always goes wrong: &#8220;How smart does your bed have to be before you are afraid to go to sleep at night?&#8221; &#8211;Rich Gold</li>  <li>Build systems that are smart enough to know they&#8217;re not smart enough.</li>  <li>Make technology invisible and humane.</li>  <li>It&#8217;s not &#8220;Can we?&#8221;, it&#8217;s &#8220;How will we?&#8221;</li>  <li>The &#8220;Internet of Things&#8221; is not about the thing. The technology should amplify our humanity.</li></ul><hr /><h2 id=\"mat-marquis---smaller-faster-web-sites-matmarquiscom--wilto\">Mat Marquis - Smaller, Faster Web Sites (<a href=\"http://www.matmarquis.com\">matmarquis.com</a> &#8226; <a href=\"https://twitter.com/wilto\">@wilto</a>)</h2><ul>  <li>Users just want to keep their coffee off the floor, they don&#8217;t care about the table.</li>  <li>When we value convenience over craft, we&#8217;re designing a web for ourselves, not for users.</li>  <li>We&#8217;re building the IKEA web: easy to build, but uncomfortable to use.</li>  <li>20% of US users depend on smartphones almost exclusively for the Internet.</li>  <li>Average page weight is 1944 KB &#8211; mostly images.</li>  <li>The right image size(s) for the right device: Serve responsive images with the <code class=\"highlighter-rouge\">srcset</code> attribute and the <code class=\"highlighter-rouge\">&lt;picture&gt;</code> element.</li>  <li>Use <a href=\"https://scottjehl.github.io/picturefill/\">picturefill</a> for legacy browsers that don&#8217;t support the <code class=\"highlighter-rouge\">&lt;picture&gt;</code> element.</li>  <li>SVG is widely supported, but still doesn&#8217;t work on Android &#8211; a huge number of Android devices still ship with 2.3 today!</li>  <li>&#8220;It seems every year one of us accidentally discovers another game-changing thing that SVG has been able to do since 1987.&#8221; &#8211;@ScottJehl</li>  <li>~14 KB included in initial TCP/IP connection, so critical CSS should be at the top of the page.    <ul>      <li><a href=\"http://npmjs.com/package/grunt-criticalcss\">http://npmjs.com/package/grunt-criticalcss</a></li>      <li><a href=\"https://github.com/filamentgroup/loadcss\">https://github.com/filamentgroup/loadcss</a>        <ul>          <li>Can also use this to defer loading of webfonts.</li>        </ul>      </li>      <li>Set a performance budget! Validate it with Grunt: <a href=\"https://www.npmjs.com/package/grunt-perfbudget\">https://www.npmjs.com/package/grunt-perfbudget</a></li>    </ul>  </li></ul><hr /><h2 id=\"ethan-marcotte---laziness-in-the-time-of-responsive-design-ethanmarcottecom--beep\">Ethan Marcotte - Laziness in the Time of Responsive Design (<a href=\"http://ethanmarcotte.com\">ethanmarcotte.com</a> &#8226; <a href=\"https://twitter.com/beep\">@beep</a>)</h2><ul>  <li>Categories like &#8220;tablet&#8221; and &#8220;mobile&#8221; are so broad as to be completely unhelpful as they pertain to our work.</li>  <li>&#8220;My anxiety doesn&#8217;t come from thinking about the future, but from wanting to control it.&#8221; &#8211;Hugh Prather</li>  <li>Stop trying to perfectly control rendering on every device and platform.</li>  <li>Avoid describing ideal layouts in markup; it gives you more flexibility in the long run.</li>  <li>&#8220;Instead of solutions for problems, [systems] for solutions: for no problem is there an absolute solution. There is always a group of solutions, one of which is the best under certain conditions.&#8221; &#8211;Karl Gerstner</li>  <li>Making it fit is the baseline. How can we make it feel at home?</li>  <li>Start designing from a network of small layout systems and scale up from there.</li>  <li>Responsive navigation:    <ul>      <li>Off-canvas</li>      <li>Off-canvas navigation triggered by &#8216;the hamburger&#8217; (&amp;#9776; &#8594; &#9776;) hasn&#8217;t been as successful as most of us think.</li>      <li>The hamburger&#8217;s function is not always self-evident.</li>      <li>We don&#8217;t always need to have the default expectation that navigation should be concealed on mobile.</li>      <li>We&#8217;re shoving our mess under the bed that is the off-canvas hamburger navigation menu on mobile.</li>      <li>A lot of the needless complexity we foist on our responsive navs comes from thinking about them as desktop-first.</li>    </ul>  </li>  <li>We should look for opportunities to be just a little lazy &#8211; maybe it&#8217;s about a conservation of effort.</li>  <li>Design the transaction, not the interface.</li>  <li>A well-crafted responsive design is device-agnostic.    <ul>      <li>&#8220;There&#8217;s more to devices than the size of their screens. A device-agnostic approach also takes into account infinite combinations of screen resolution, input method, browser capability, and connection speed.&#8221; &#8211;Trent Walton</li>      <li>&#8220;Like cars designed to perform in extreme heat or on icy roads, websites should be built to face the reality of the web&#8217;s inherent variability.&#8221; &#8211;Trent Walton</li>    </ul>  </li></ul><hr /><h1 id=\"day-2-5122015\">Day 2: 5/12/2015</h1><h2 id=\"eric-meyer---designing-for-crisis-meyerwebcom--meyerweb\">Eric Meyer - Designing for Crisis (<a href=\"http://meyerweb.com\">meyerweb.com</a> &#8226; <a href=\"https://twitter.com/meyerweb\">@meyerweb</a>)</h2><ul>  <li>&#8220;You don&#8217;t get to decide what your users will want to do on mobile. They do.&#8221; &#8211;Karen McGrane</li>  <li>Add another persona to your list: the user in crisis, who can barely think straight. (Example: Confusing, cluttered hospital web site.)</li>  <li>Empathy is a core design skill.</li>  <li>When <strong>usability testing</strong> a design for people in crisis, add <strong>confusion/annoyances</strong> to the page to suck up mental resources, to make sure the design still works. (Blurred text, shaky page, transposing text, etc.)</li></ul><hr /><h2 id=\"rachel-andrew---css-grid-layout-rachelandrewcouk--rachelandrew\">Rachel Andrew - CSS Grid Layout (<a href=\"http://rachelandrew.co.uk\">rachelandrew.co.uk</a> &#8226; <a href=\"https://twitter.com/rachelandrew\">@rachelandrew</a>)</h2><ul>  <li>Seeing Flexbox as the silver bullet for layout issues is likely to lead us down another path of layout hacks.</li>  <li>Flexbox is designed for things that can be represented as a single, unbroken line, not grids.</li>  <li>CSS Grid Layout to the rescue: <a href=\"http://gridbyexample.com/\">http://gridbyexample.com/</a></li>  <li>CSS Grid Layout is useful as a prototyping tool even though browsers aren&#8217;t [yet] ready to use it in production.</li>  <li><a href=\"http://getbootstrap.com/\">Bootstrap</a> and similar frameworks rely on describing the layout in the markup.</li>  <li>With CSS Grid Layout, we describe the layout in the CSS and can redefine that description at any breakpoint.</li>  <li>We can even use CSS Grid Layout to recreate a Bootstrap-style 12-column grid, without needing to describe the grid in the markup.</li>  <li>CSS Grid Layout allows cells to be spanned vertically, eliminating the need for nested grids.</li></ul><hr /><h2 id=\"brad-frost---atomic-design-bradfrostcom--brad_frost\">Brad Frost - Atomic Design (<a href=\"http://bradfrost.com\">bradfrost.com</a> &#8226; <a href=\"https://twitter.com/brad_frost\">@brad_frost</a>)</h2><ul>  <li>We&#8217;re not designing pages, we&#8217;re designing systems of components. &#8211;Stephen Hay</li>  <li>Potential pitfalls with web frameworks:    <ul>      <li>One-size-fits-all</li>      <li>Lookalike issues</li>      <li>Might not do everything you need</li>      <li>Compatibility with existing sites</li>      <li>Subscribe to someone else&#8217;s structure, naming, and style</li>    </ul>  </li>  <li>☛ Atomic design = creating pattern library/style guide <strong>first</strong>, instead of cherrypicking patterns <strong>after</strong> design. @brad_frost #aeabos &#8211;<a href=\"https://twitter.com/zeldman/status/598151798331994112\">@zeldman</a></li>  <li>Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients&#8217; needs. -Dave Rupert</li>  <li>Benefits of front-end style guides:    <ul>      <li>Promotes consistency and cohesion</li>      <li>Easier to test</li>      <li>Better workflow</li>      <li>Creates a shared vocabulary</li>      <li>Useful reference</li>      <li>Future-friendly foundation</li>    </ul>  </li>  <li>Getting started with style guides:    <ul>      <li><a href=\"http://brettjankord.com/projects/style-guide-boilerplate/\">http://brettjankord.com/projects/style-guide-boilerplate/</a></li>      <li><a href=\"http://barebones.paulrobertlloyd.com/\">http://barebones.paulrobertlloyd.com/</a></li>      <li><a href=\"http://patternprimer.adactio.com/\">http://patternprimer.adactio.com/</a></li>      <li><a href=\"http://styleguides.io/\">http://styleguides.io/</a></li>    </ul>  </li>  <li>Example style guides:    <ul>      <li><a href=\"http://style.codeforamerica.org/\">http://style.codeforamerica.org/</a></li>      <li><a href=\"http://ux.mailchimp.com/patterns/\">http://ux.mailchimp.com/patterns/</a></li>      <li><a href=\"http://www.yelp.com/styleguide\">http://www.yelp.com/styleguide</a></li>      <li><a href=\"http://www.starbucks.com/static/reference/styleguide/\">http://www.starbucks.com/static/reference/styleguide/</a></li>    </ul>  </li>  <li>Atomic design tool: <a href=\"http://patternlab.io/\">http://patternlab.io/</a></li>  <li>Frontend development is part of the design process.</li>  <li>Collaboration and communication trump deliverables.</li></ul><hr /><h2 id=\"derek-featherstone---content-in-context-is-king-simplyaccessiblecom--feather\">Derek Featherstone - Content in Context is King (<a href=\"http://simplyaccessible.com\">simplyaccessible.com</a> &#8226; <a href=\"https://twitter.com/feather\">@feather</a>)</h2><ul>  <li>Great experiences are heavily based on context.</li>  <li>Context is often seen as &#8220;the device someone is using&#8221;, but context is actually:    <ul>      <li>Time</li>      <li>Location</li>      <li>Proximity</li>      <li>Device</li>      <li>State of mind</li>      <li>Capabilities</li>      <li>Activity</li>      <li>Interests</li>      <li>Interaction</li>    </ul>  </li>  <li>Content priority changes with respect to time. Example: Showing a conference schedule front and center on its web page while the conference is actually occurring.</li>  <li>Programmatically change content priority over time. This applies to almost any industry.</li>  <li>Content priority changes with respect to location. Example: For a college web site, show directions to the college if you&#8217;re not present on campus, or an internal campus map if you are.</li>  <li>Content display also changes with respect to location. Example: Date picker starting on Sunday if you&#8217;re in the US, Monday everywhere else.</li>  <li>Content changes with respect to proximity.</li>  <li>All saved context must be resettable.</li></ul><hr /><h2 id=\"kate-kiefer-lee---touchy-subjects-creating-content-for-sensitive-situations-katekieferleecom--katekiefer\">Kate Kiefer Lee - Touchy Subjects: Creating Content for Sensitive Situations (<a href=\"http://katekieferlee.com/\">katekieferlee.com</a> &#8226; <a href=\"https://twitter.com/katekiefer\">@katekiefer</a>)</h2><ul>  <li>Sensitive topics and industries:    <ul>      <li>health and medicine</li>      <li>money and banking</li>      <li>private information</li>      <li>fundraising</li>      <li>religion</li>      <li>politics</li>    </ul>  </li>  <li>Urgent messages:    <ul>      <li>error messages security notifications</li>      <li>warnings and compliance alerts</li>      <li>rejection notices</li>      <li>apologies</li>    </ul>  </li>  <li>Less urgent messages:    <ul>      <li>help docs</li>      <li>customer service emails contact pages</li>      <li>forms</li>      <li>unsubscribe pages</li>      <li>legal policies</li>    </ul>  </li>  <li>Principles:    <ul>      <li>Be clear</li>      <li>Get to the point</li>      <li>Stay calm</li>      <li>Be serious</li>      <li>Accept responsibility</li>      <li>Be nice</li>    </ul>  </li>  <li>&#8220;It is insight into human nature that is key to the communicator&#8217;s skill. For whereas the writer is concerned with what he puts into his writings, the communicator is concerned with what the reader gets out of it.&#8221; &#8211;William Bernbach</li>  <li>&#8220;A good teacher I know, Jenifer Auger, has a simple but effective technique for the writing classroom. When her students have blah voiceless writing, she makes them speak the following words to her before reading their text: &#8216;Listen to me, I have something to tell you.&#8217;&#8221; &#8211;Peter Elbow</li>  <li>Read it out loud!</li>  <li>Know when saying nothing is best: &#8220;Brands are not people. Customers are not close friends. And boundaries need to be maintained.&#8221;</li>  <li>Pick the right tone to match the reader&#8217;s feelings based on the content type.</li>  <li>&#8220;New Yorker: &#8220;We screwed up.&#8221; Airline: &#8220;We apologize for any inconvenience this may have caused.&#8221; Which apology is more effective? #aeabos&#8221; &#8211;<a href=\"https://twitter.com/zeldman/status/598214820492648448\">@zeldman</a></li>  <li>Legal documents can use plain language, as long as the tone is appropriate.</li>  <li>Prepare for the worst ahead of time: Create templates that can be used for responding to unexpected situations, keeping in mind:    <ul>      <li>Possible content types (email, tweet, blog post, etc.)</li>      <li>Apologize up front if necessary say what happens next</li>      <li>Who the message will be from who needs to sign off</li>      <li>Laws and other requirements</li>    </ul>  </li>  <li>We don&#8217;t want our users to say, &#8220;Great content!&#8221; Instead: &#8220;I got what I needed; it wasn&#8217;t that hard; and I&#8217;m better off now.&#8221;</li>  <li><a href=\"http://voiceandtone.com/\">http://voiceandtone.com/</a></li></ul><hr /><h2 id=\"chris-coyier---the-wonderful-world-of-svg-chriscoyiernet--chriscoyier\">Chris Coyier - The Wonderful World of SVG (<a href=\"http://chriscoyier.net\">chriscoyier.net</a> &#8226; <a href=\"http://twitter.com/chriscoyier\">@chriscoyier</a>)</h2><ul>  <li>SVG is widely supported by browsers today, and is still not used nearly enough.</li>  <li>There are only a handful of basic shapes.</li>  <li>For simple graphics, SVG file size is smaller and the quality is higher (best of both worlds), but there is a practical complexity limit.</li>  <li>Practically any vector art can be converted to SVG.</li>  <li>You can use an SVG file as the value of the <code class=\"highlighter-rouge\">src</code> attribute in an <code class=\"highlighter-rouge\">&lt;img /&gt;</code> tag, inline in the HTML, or referenced with <code class=\"highlighter-rouge\">url()</code> in CSS.</li>  <li>Why use SVG?    <ul>      <li>Resolution independent</li>      <li>Use as a system</li>      <li>Design possibilities</li>    </ul>  </li>  <li>Why send pixel data when you can send geometry? Math is more efficient, let your powerful computer draw the thing.</li>  <li>SVG is pretty efficient by itself, but can still be heavily optimized.    <ul>      <li>Server-side <code class=\"highlighter-rouge\">gzip</code> works very well since SVG has lots of repetitive strings.</li>      <li><a href=\"https://github.com/svg/svgo\">svgo optimizer</a></li>    </ul>  </li>  <li>SVG icons    <ul>      <li>An SVG icon system ensures that all icons are served via a single HTTP request, and makes icons easy to use.</li>      <li><a href=\"https://icomoon.io/\">https://icomoon.io/</a></li>      <li>Why use SVG icons?        <ol>          <li>Vector!
Typically sharper than icon fonts because of non-text anti-aliasing.</li>          <li>Easy multi-color! More CSS control than any other method.</li>          <li>Animate!
Easy to apply transitions and animations.</li>          <li>Script away!
Everything is in the DOM.</li>          <li>Better accessibility!
Fool-proof, once you set it up well.</li>          <li>Better semantics!
<code class=\"highlighter-rouge\">&lt;svg&gt;</code> = &#8220;image&#8221; / <code class=\"highlighter-rouge\">&lt;span&gt;</code> = &#8220;nothing&#8221;</li>          <li>Ease of use! Easy to manage individual icons, instant build processes.</li>        </ol>      </li>    </ul>  </li>  <li>SVG can be animated with both CSS and JavaScript.</li>  <li>JavaScript libraries for working with SVG (all have slightly different capabilities, approaches, and focuses):    <ul>      <li><a href=\"http://snapsvg.io\">Snap.svg</a> - jQuery for SVG - kinda like newer Raphaël</li>      <li><a href=\"http://greensock.com\">Greensock(GSAP)</a> - does some cool normalization stuff too</li>      <li><a href=\"http://julian.com/research/velocity\">Velocity.js</a></li>      <li><a href=\"http://svgjs.com\">SVG.js</a></li>      <li><a href=\"http://d3js.org\">D3</a>
- data powerhouse</li>    </ul>  </li>  <li>SVG is pretty great at charting. It doesn&#8217;t have charting-specific features, but it has features that lend themselves well to charting.    <ul>      <li><a href=\"http://www.amcharts.com/\">amCharts</a></li>      <li><a href=\"https://gionkunz.github.io/chartist-js/\">Chartist.js</a></li>    </ul>  </li>  <li>Clipping and masking</li>  <li>Huge list of information about SVG: <a href=\"http://css-tricks.com/mega-list-svg-information/\">http://css-tricks.com/mega-list-svg-information/</a></li></ul><hr /><h1 id=\"conclusion\">Conclusion</h1><p>To me, the concept of responsive web design means first and foremost that web sites should be able to adapt themselves for optimal viewing across any type of device. Implementing responsive designs is made easy through the use of <a href=\"https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries\">CSS media queries</a>, which have been supported in all major web browsers for some time now.</p><p>Web standards and browsers have obviously not stopped evolving, which brings me to my key takeaway from this conference: the continuous evolution of browser technology is pushing the envelope of what responsive design means. We are starting to have the tools to be able to show users the information or content they desire <em>in the appropriate context</em>, and a user&#8217;s particular device is only one of many aspects of their context (see my notes from Derek Featherstone&#8217;s talk for examples.)</p><p>As always, technology itself doesn&#8217;t automatically lead to good design, but gives us the means to achieve it. Newer and better technology, when leveraged correctly, can lead to better design.</p><p>Of course, An Event Apart Boston&#8217;s traditional, renowned bacon cupcakes also help.</p>",
      "url": "https://joshdick.net/2015/06/28/an_event_apart_boston_2015.html",
      "tags": [
        "design",
        "webdev"
      ],
      "date_published": "2015-06-28T00:00:00-04:00",
      "date_modified": "2015-06-28T00:00:00-04:00"
    },
    {
      "id": "https://joshdick.net/2015/01/18/send_browser_tabs_from_ios_to_mac_with_workflow_hazel_and_dropbox.html",
      "title": "Send Browser Tabs from iOS to Mac with Workflow, Hazel and Dropbox",
      "summary": "A somewhat complex solution to a simple problem.",
      "content_html": "<h2 id=\"introduction\">Introduction</h2><p>I&#8217;ve always wanted to be able to send a tab from an iOS web browser to a Mac web browser. Despite the existence of browser features like Safari&#8217;s <a href=\"http://support.apple.com/en-us/HT202530\">iCloud Tabs</a> and Google Chrome&#8217;s <a href=\"https://support.google.com/chrome/answer/2591582?hl=en\">Tab Syncing</a>, or even services like <a href=\"http://instaper.com\">Instapaper</a> or <a href=\"http://getpocket.com\">Pocket</a>, I wanted a way to &#8220;send and forget&#8221; a browser tab from an iOS device to a Mac for future reference, then close the tab on my iOS device without giving it another thought.</p><p>When <a href=\"http://workflow.is\">Workflow</a> for iOS launched in December 2014, I knew that I could use it to implement this idea.</p><p>The system described below should work with any iOS browser that uses the standard iOS share sheet, as well as any Mac browser on the receiving end. I&#8217;ve tested this system with different combinations of Chrome and Safari on both sides, and it works great in all cases.</p><p>I will not go into step-by-step detail for configuring <a href=\"http://workflow.is\">Workflow</a> or <a href=\"http://www.noodlesoft.com/hazel.php\">Hazel</a>, so if you&#8217;re new to either of them, you should download them and experiment with them before continuing.</p><h2 id=\"how-it-works\">How It Works</h2><p>This is how the system works from end to end, which should give you some context before you start configuring things:</p><ul>  <li>On iOS, a Workflow Action Extension that accepts URLs is invoked through the browser&#8217;s share sheet.</li>  <li>The workflow prompts for a Mac to send the tab to, and then saves the URL in a text file, located in a Dropbox folder corresponding to the chosen Mac.</li>  <li>A Hazel rule on the chosen Mac continuously monitors that same Dropbox folder for changes.</li>  <li>If a new file is detected in the folder, the rule reads its contents (the URL), and opens that URL in your Mac browser of choice.</li>  <li>The rule then deletes the file since it is no longer needed.</li></ul><h2 id=\"prerequisites\">Prerequisites</h2><ul>  <li><a href=\"http://workflow.is\">Workflow</a> must be installed on all iOS devices you want to send tabs from.</li>  <li><a href=\"http://dropbox.com\">Dropbox</a> and <a href=\"http://www.noodlesoft.com/hazel.php\">Hazel</a> must be installed on all Macs that will receive sent tabs.</li></ul><h2 id=\"configure-dropbox\">Configure Dropbox</h2><p>Make a list of all Macs you want to be able to send tabs to. My Macs are named after characters from the television show <a href=\"https://en.wikipedia.org/wiki/Archer_(TV_series)\">Archer</a>, so my list looks like this:</p><ul>  <li>archer</li>  <li>cheryl</li>  <li>malory</li></ul><p>If you aren&#8217;t weird enough to name your computers, your list might include things like &#8220;MacBook Pro&#8221; and &#8220;iMac&#8221;.</p><p>Create a new folder anywhere in your Dropbox called &#8220;Send Tab&#8221; or anything else that works for you, and then create subfolders inside it for each Mac on your list.</p><p>My directory structure looks like this:</p><div class=\"highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>$ tree ~/Dropbox/App\\ Databases/Workflow/Send\\ Tab/Users/Josh/Dropbox/App Databases/Workflow/Send Tab├── archer├── cheryl└── malory3 directories, 0 files</code></pre></div></div><h2 id=\"configure-hazel-on-your-macs\">Configure Hazel on your Macs</h2><p>The Hazel rule shown below should be configured for each Mac on your list.</p><p>On each Mac, the rule should be configured to monitor the corresponding Dropbox subfolder that you created for that Mac.</p><p>You can change <code class=\"highlighter-rouge\">\"Google Chrome\"</code> to any browser you want, and you can opt to use different browsers on different Macs if you wish. Make sure that the browser you choose is inside your Mac&#8217;s <code class=\"highlighter-rouge\">/Applications</code> folder, that you type the browser&#8217;s name exactly as it appears there, and that the browser&#8217;s name is quoted, as shown.</p><p><img src=\"/asset/post_assets/2015/01/hazel_rule.png\" alt=\"Hazel rule configuration\" /></p><p>For your copying-and-pasting convenience, here&#8217;s the script that is embedded in the Hazel rule:</p><div class=\"highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>url=`cat \"$1\"`open -a \"Google Chrome.app\" \"$url\"rm -f \"$1\"</code></pre></div></div><h2 id=\"configure-workflow-on-your-ios-devices\">Configure Workflow on your iOS Devices</h2><p>The Workflow workflow (not a typo!) shown below should be configured on each iOS device you want to send tabs from.</p><p>This workflow is an Action Extension workflow that is configured to accept URLs.</p><p><strong>For convenience, you can <a href=\"https://workflow.is/workflows/e2f27bab7b784ba9b9ff1afc835767c3\">install the workflow by visiting this link on your iOS device</a> instead of reconstructing it manually.</strong></p><p>If you&#8217;re curious, here&#8217;s what the workflow looks like:</p><p><img src=\"/asset/post_assets/2015/01/workflow.png\" alt=\"Hazel rule configuration\" /></p><p>You&#8217;ll need to customize the list of Macs, as well as the &#8220;Destination Path&#8221; in the &#8220;Save to Dropbox&#8221; action.</p><p>A key point is that the Destination Path ends with a variable that corresponds to the selected Mac. For reference, my Destination Path looks like this, although it doesn&#8217;t all fit on the screen in the Workflow app: <code class=\"highlighter-rouge\">App Databases/Workflow/Send Tab/&lt;computer&gt;</code>. <strong>This means that the Macs in the workflow&#8217;s list need to match their corresponding subfolder names in Dropbox.</strong></p><h2 id=\"the-finish-line\">The Finish Line</h2><p>Now that you&#8217;ve finished configuring Hazel and Workflow, you should be able to send browser tabs from your iOS device(s) to your Mac(s), like this:</p><iframe width=\"560\" height=\"315\" src=\"//www.youtube.com/embed/IUgirv_OAb8\" allowfullscreen=\"\"></iframe><h2 id=\"closing-thoughts\">Closing Thoughts</h2><p>As of this writing, Hazel and Dropbox <a href=\"http://www.noodlesoft.com/forums/viewtopic.php?f=4&amp;t=4044\">don&#8217;t always work together on OS X Yosemite</a>. If Workflow is adding files to your Dropbox but the Hazel rule never triggers on its own/only works when run manually, try this workaround I that discovered through experimentation: Create a folder somewhere outside Dropbox on your Mac, configure the Hazel rule to watch it. Then, symlink that folder into your Dropbox folder, in a location that it will appear as that Mac&#8217;s &#8220;send tab&#8221; subfolder (to match the iOS workflow.)</p><p>Here&#8217;s an example of how to set up the workaround:</p><div class=\"highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>$ ln -s ~/path/to/the/real/folder/cheryl ~/Dropbox/App\\ Databases/Workflow/Send\\ Tab/cheryl</code></pre></div></div><p>Allowing Hazel to watch the non-Dropbox folder allows Hazel&#8217;s automatic rule triggering to work, while still allowing Dropbox syncing to work via the symbolic link.</p><p>If you&#8217;re obsessed with sending tabs between devices like me, you might enjoy these two relevant free utilities:</p><ul>  <li><a href=\"https://github.com/josh-/CloudyTabs/\">CloudyTabs</a>, which is a Mac menu bar application that simply lists iCloud tabs across all devices. It&#8217;s useful if you like using Safari on your iOS devices and a different browser on the Mac.</li>  <li><a href=\"https://chrome.google.com/webstore/detail/chrome2chromev2/fdhfobojnimoedpefghekjhckolommed\">Chrome2ChromeV2</a>, which allows you to send tabs between Google Chrome sessions on any computer, as long as you&#8217;ve signed into Chrome with a Google account on the desired computers.</li></ul><p><em><strong>Updated on January 28, 2015:</strong> Updated the Hazel rule embedded script and associated screenshot to use and be compatible with bash &#8212; which is the default for most users &#8212; instead of zsh.</em></p>",
      "url": "https://joshdick.net/2015/01/18/send_browser_tabs_from_ios_to_mac_with_workflow_hazel_and_dropbox.html",
      "tags": [
        "automation",
        "ios",
        "mac",
        "workflow"
      ],
      "date_published": "2015-01-18T00:00:00-05:00",
      "date_modified": "2015-01-18T00:00:00-05:00"
    },
    {
      "id": "https://joshdick.net/2014/05/02/an_event_apart_boston_2014.html",
      "title": "An Event Apart Boston 2014",
      "summary": "My notes from An Event Apart, \"the design conference for people who make websites\".",
      "content_html": "<p><img src=\"/asset/post_assets/2014/05/aea_boston_2014_swag.jpg\" alt=\"An Event Apart SWAG\" /></p><h1 id=\"introduction\">Introduction</h1><p>I had the privilege to once again attend An Event Apart, &#8220;the design conference for people who make websites.&#8221; My notes from <a href=\"http://aneventapart.com/event/boston-2014\">An Event Apart Boston 2014</a> follow this introduction. The notes are grouped by talk, in the order that each talk happened at the conference.</p><p>During his talk at the conference, <a href=\"http://scottberkun.com/\">Scott Berkun</a> mentioned his concept of <a href=\"http://scottberkun.com/2014/min-max-note-taking/\">Min/Max Note Taking</a>. This got me thinking about my approach to conference note taking (and publishing). During the conference, I try to capture as many interesting or useful points in my notes as I can, in real time. This method of note taking certainly doesn&#8217;t work for everyone, but I find that it helps reinforce the speakers&#8217; ideas in my head.</p><p>Notes in summary or &#8220;handful of bullets&#8221; format would certainly be easier to consume than the wall of text that appears below, but the notion of trying to summarize others&#8217; ideas for consumption doesn&#8217;t sit right with me. Summarizing could filter out information or ideas that someone could find useful, or even worse, could accidentally skew the information. To that end, I decided stick with the &#8220;wall of text&#8221; approach to publishing my notes that I&#8217;ve <a href=\"/2013/06/25/an_event_apart_boston_2013.html\">used</a> <a href=\"/2012/08/19/an_event_apart_boston_2012.html\">previously</a>. Before publishing my notes here, I extensively edit them for clarity and typos, but I don&#8217;t make any attempt to summarize them or make them otherwise more digestible.</p><p>If you&#8217;re interested, my notes from An Event Apart Boston <a href=\"/2013/06/25/an_event_apart_boston_2013.html\">2013</a> and <a href=\"/2012/08/19/an_event_apart_boston_2012.html\">2012</a> are also available.</p><h1 id=\"day-1-42814\">Day 1: 4/28/14</h1><h2 id=\"jeffrey-zeldman---understanding-web-design-zeldmancom--zeldman\">Jeffrey Zeldman - Understanding Web Design (<a href=\"http://www.zeldman.com\">zeldman.com</a> &#8226; <a href=\"https://twitter.com/zeldman\">@zeldman</a>)</h2><ul>  <li><strong>The mystery of web design:</strong> Those that can&#8217;t value your work can&#8217;t support you in creating your best work.</li>  <li>Nobody outside our industry knows what we do; it&#8217;s hard to explain in non-technical terms.</li>  <li>In a team setting, it&#8217;s hard enough to achieve great design even when a team is familiar with design.</li>  <li>Understanding a client&#8217;s business can be more important to a client than your technical expertise.</li>  <li>Doing a personal project helps you break out of the work you&#8217;re doing at your job, and if it&#8217;s public, helps make people aware of you.</li>  <li>Outside the industry, are there any well-known organizations that advocate for good design?    <ul>      <li>The <a href=\"http://www.webbyawards.com/\">Webby Awards</a> are good at getting media attention and putting on a great show, but don&#8217;t necessarily for exhibit good web or interaction design. They get the old media to pay attention to the Internet.</li>      <li>The <a href=\"https://thenetawards.com/\">net Awards</a> actually judge design merits, but your boss and client won&#8217;t know about them.</li>      <li>&#8220;Nobody understands the W3C besides the W3C.&#8221; The W3C speaks for themselves, not us.</li>      <li>Companies speak to us but not for us; Apple wants you to love your iPhone, not HTML.</li>    </ul>  </li>  <li>Regarding Facebook&#8217;s HTML5 vs native app debacle, Facebook approached mobile as a <strong>technology</strong> problem, when it was really a <strong>design</strong> problem. Anything extraneous to Facebook&#8217;s core functionality (e.g. sharing pictures with friends) doesn&#8217;t belong in Facebook on mobile <em>or</em> on the desktop.</li>  <li>HTML5 vs. native is the wrong question. Instead of emulating the desktop experience on mobile, replicate what users love about the experience.</li>  <li>Companies harvest data to serve their advertisers instead of their customers.</li>  <li>You&#8217;re paid to meet business goals, not to make elegant technical achievements that shouldn&#8217;t have been attempted in the first place.</li>  <li>Web design isn&#8217;t about technology. It&#8217;s about people.    <ul>      <li>We don&#8217;t design for browsers; we design for people to ensure that they have a good experience.</li>      <li>We don&#8217;t use progressive enhancement or make a page accessible for gold stars; we design experiences for people.</li>    </ul>  </li>  <li>To criticize something you don&#8217;t understand because it doesn&#8217;t behave as something you do understand is wrong (for example: &#8220;Web design is shoddy because it hasn&#8217;t produced a work as influential as Milton Glaser&#8217;s Bob Dylan poster.&#8221;) There&#8217;s no Mona Lisa of television.</li>  <li>Web design is not book design, it is not poster design, it is not illustration, and the highest achievements of those disciplines are not what web design aims for.</li>  <li>Web design is like architecture or type design. After an architect&#8217;s design is done, they relinquish control to the builders and the people who use the building.</li>  <li>Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.</li>  <li>Great web design:    <ul>      <li>makes interaction easy.</li>      <li>guides you subtly to your heart&#8217;s desire; design is never passive, even if it looks that way.</li>      <li>can be invisible or in your face.</li>      <li>delights.</li>      <li>is not innovative for the sake of innovation.</li>    </ul>  </li>  <li>At work:    <ul>      <li>Represent your profession.</li>      <li>Don&#8217;t wait to be asked to do your job.</li>      <li>Arrive early and often.</li>      <li>Push your way in. <em>Volunteer.</em></li>      <li>Achieve the right things for the wrong reasons. (For example, The Cold War led to the space race and the moon landing.)</li>      <li>Your boss will never care about the web for the same reasons you do. Your job is to find the reasons they&#8217;ll care about.</li>    </ul>  </li>  <li>We are all evangelists; we need evangelists more than we need superstars.</li></ul><hr /><h2 id=\"sarah-parmenter---designing-using-data-sazzycouk--sazzy\">Sarah Parmenter - Designing Using Data (<a href=\"http://www.sazzy.co.uk/\">sazzy.co.uk</a> &#8226; <a href=\"https://twitter.com/sazzy\">@sazzy</a>)</h2><ul>  <li>&#8220;Design is no longer the killer differentiator.&#8221; -John Maeda</li>  <li>Instincts are experiments. Data is proof.</li>  <li>&#8220;&#8230;become an expert to facilitate the most productive conversation you can have.&#8221; -Kevin Hoffman, An Event Apart 2014</li>  <li>&#8220;Many designers who are skilled technicians, craftsmen, or researchers have struggled to survive in the messy environment required to solve today&#8217;s complex problems. They may play a valuable role, but they are destined to live in the downstream world of design execution.&#8221; -Tim Brown, IDEO</li>  <li>Compared to learning a new tool, designing using data has a much bigger impact over a much shorter time.</li>  <li>Being able to design with data is what will keep us valuable.</li>  <li>It&#8217;s easy to think of data/content as not part of our job.</li>  <li>&#8220;Research is formalized curiosity. It is poking and prodding with a purpose.&#8221; -Zora Neale Hurston</li>  <li>&#8220;No one has an excuse to make an uninformed decision anymore.&#8221; -Federico Holgado, Mailchimp</li>  <li>&#8220;Being a good designer is no longer enough. We need designers that can tell you WHY they design something a certain way.&#8221;</li>  <li>&#8220;&#8230;designers go from decorators to problem solvers.&#8221; -Aaron Walter, Mailchimp</li>  <li>&#8220;(If) a strategy can&#8217;t predict outcomes, our strategy is broken.&#8221; -Jared Spool, An Event Apart 2014</li>  <li><strong>Vanity metrics</strong> are pieces of data on which you cannot act and exist purely for ego-stroking:    <ul>      <li>hits</li>      <li>total signups</li>      <li>page views</li>      <li>number of visits</li>      <li>unique visitors</li>      <li>likes</li>    </ul>  </li>  <li>A metric needs to tell you something tangible to act on.</li>  <li>&#8220;Making your numbers go up (any numbers&#8211;your BMI, your blood sugar, your customer service ratings) is pointless if the numbers aren&#8217;t related to why you went to work this morning.&#8221; -Seth Godin</li>  <li>Track people and their habits.</li>  <li>These are tools that can be used responsibly to do just that: <a href=\"http://www.minimalytics.com/\">Minimaltyics</a>, <a href=\"https://www.kissmetrics.com/\">KISSmetrics</a>, <a href=\"https://www.gosquared.com/\">GoSquared</a>, <a href=\"http://get.gaug.es/\">gaug.es</a>, <a href=\"https://mixpanel.com/\">Mixpanel</a>, <a href=\"https://chartbeat.com/\">Chartbeat</a>, <a href=\"http://www.truesocialmetrics.com/\">TrueSocialMetrics</a>, <a href=\"http://www.crazyegg.com/\">crazyegg</a></li>  <li><a href=\"http://www.browserstack.com/\">BrowserStack</a> for cross-browser testing</li>  <li><a href=\"https://www.optimizely.com/\">Optimizely</a> for A/B testing</li>  <li>Seth Godin&#8217;s &#8220;purple cow&#8221; business is a business that does something that bucks the trend of what a related business would be.</li>  <li>&#8220;Experiment led design may happen outside of normal work.&#8221; -Kevin Hoffman</li>  <li>People like honesty; they see through sales patter. Don&#8217;t be afraid to share your failures.</li>  <li>Referrer loyalty: Those who arrive at your site from a referrer are likely to arrive at your site from the same referrer in the future.</li>  <li><a href=\"http://www.theblushbar.co.uk/\">Blushbar</a>:    <ul>      <li>Used social metrics to optimize social reach.</li>      <li>Realized they needed an iPhone app because people didn&#8217;t know how to bookmark the appointment booking web page.</li>      <li>It&#8217;s the small things that make you stand out from the crowd. (For example, Blushbar gave out umbrellas in case of rain.)</li>      <li>Changing &#8220;book appointment&#8221; to &#8220;book YOUR appointment&#8221; resulted in a 200% increase.</li>    </ul>  </li>  <li>For <a href=\"https://highrisehq.com/\">Highrise</a>, &#8220;see plans and pricing&#8221; was a more effective web call to action than &#8220;start your 30-day free trial&#8221;.</li>  <li>Good visual media creates a more positive perception of the value of the product or service you&#8217;re selling.    <ul>      <li>But, content comes first!</li>      <li>Use &#8220;real-world&#8221; imagery instead of professionally created imagery; too much polish can look like stock imagery. (Made the difference between 0 clicks vs 521 clicks in two Facebook campaigns with the exact same title and wording.)</li>    </ul>  </li>  <li>Web-savvy people have a higher tolerance for bad design.</li>  <li>If you can&#8217;t communicate your findings in the words of your boss/clients, you&#8217;ve failed to help them find value from those findings.</li>  <li>&#8220;A mind is like a parachute. It doesn&#8217;t work if it is not open.&#8221; -Frank Zappa</li></ul><p>I should point out that Sarah&#8217;s &#8220;Designing with Data&#8221; presentation used data from her business, <a href=\"http://www.theblushbar.co.uk/\">Blushbar</a>, to make its points. <a href=\"https://twitter.com/joshdi/status/460800073367314432\">I was impressed</a> that she used the presentation itself to practice what she preached.</p><hr /><h2 id=\"dan-mall---responsive-design-is-still-hardeasy-be-afraiddont-worry-danielmallcom--danielmall\">Dan Mall - Responsive Design is Still Hard/Easy! Be Afraid/Don&#8217;t Worry! (<a href=\"http://danielmall.com/\">danielmall.com</a> &#8226; <a href=\"https://twitter.com/danielmall\">@danielmall</a>)</h2><p>Dan outlined a &#8220;modern web design process, in four easy payments.&#8221;</p><ol>  <li>Plan (research and hypothesize)</li>  <li>Inventory    <ul>      <li><strong>Content inventory:</strong> A simple content strategy for <del>dummies</del> designers is to add/edit/remove components as necessary to fit the content.</li>      <li><strong>Performance inventory:</strong> Calculate your performance budget before designing, since it can help focus your design (number of images, JS libraries, etc.)</li>      <li><strong>Pattern inventory:</strong>        <ul>          <li>Atoms (HTML tags)</li>          <li>Molecules (collections of atoms, for example &#8220;Image with Caption&#8221;)</li>          <li>Organisms (collections of molecules, for example &#8220;Article Body&#8221; or &#8220;Carousel&#8221;)</li>          <li>See <a href=\"http://demo.patternlab.io/\">demo.patternlab.io</a> for an example of a pattern inventory.</li>        </ul>      </li>      <li><strong>Visual inventory:</strong>        <ul>          <li>If you want to get a better understanding of something, asking a question is infinitely more useful than making a statement.&#8221; -Jason Santa Maria, <a href=\"http://goo.gl/mNqvrs\">The Pastry Box</a></li>          <li>&#8220;Is showing their app on a laptop on the homepage the best way to sell it to prospective customers?&#8221;</li>          <li>&#8220;Can their brand pull off a minimalist design approach?&#8221;</li>          <li>&#8220;Should their copy be more playful?&#8221; Would a playful design with kitschy illustrations make you grin as you explore the site?</li>          <li>Rather than wasting time creating comps, splice the customer&#8217;s logo into an existing design. This allows the customer to see themselves in a certain light without putting lots of effort into comps. Would a design for CNN be appropriate if its logo was simply spliced into a different, existing site?</li>        </ul>      </li>    </ul>  </li>  <li>Sketch &#8212; explore ideas roughly and quickly.    <ul>      <li><a href=\"http://responsivedesignworkflow.com/\">Content reference wireframes</a></li>      <li><strong>Linear design:</strong> List out all of the components of the page (header, grids, footer, etc.) and just block them out as gray boxes. This allows you to see which components should have more space devoted to them relative to other components.</li>      <li>It&#8217;s easy to make boxes responsive but harder to make a web site cohesively responsive.</li>      <li><strong>Element collages:</strong> Turn powerful phrases into visual hooks.        <ul>          <li>&#8220;Obviously this isn&#8217;t a website, but I see how it could be one.&#8221; -The perfect client&#8217;s reaction to an element collage</li>          <li>Make an element collage horizontal so a client doesn&#8217;t mistake it for a web site comp.</li>          <li>&#8220;Element collages are like giving your client a peek at all those hidden layers.&#8221; -Paul Lloyd</li>        </ul>      </li>      <li>Prototyping, with problem and solution statements: &#8220;This prototype does one thing and one thing only.&#8221; The first prototype should be something any developer can do; prototypes should get iteratively more complex and fleshed out.</li>    </ul>  </li>  <li>Assemble    <ul>      <li>&#8220;Assembling the site should take the least time on the project. The real work is research, sketching, prototyping.&#8221;</li>      <li>Responsive web design should act as a catalyst for:        <ul>          <li>Availability of content</li>          <li>Performance</li>          <li>Accessibility</li>          <li>Organizational change</li>          <li>Progressive enhancement</li>          <li>Workflow</li>          <li>Business benefits</li>        </ul>      </li>    </ul>  </li></ol><hr /><h2 id=\"luke-wroblewski---screen-time-lukewcom--lukew\">Luke Wroblewski - Screen Time (<a href=\"http://www.lukew.com/\">lukew.com</a> &#8226; <a href=\"https://twitter.com/lukew\">@lukew</a>)</h2><h3 id=\"know-your-screen\">Know Your Screen</h3><ul>  <li>In 2013, enough LCD screens were sold to dedicate 0.5 square feet of LCD to every human on earth.</li>  <li>In a world of glass, online time is screen time.</li></ul><h3 id=\"output\">Output</h3><ul>  <li>When creating web content, use:    <ul>      <li>Image resources represented as vectors rather than as raster pixels whenever possible.</li>      <li>CSS and web type whenever possible.</li>      <li>SVG and icon fonts whenever applicable.</li>      <li><a href=\"https://github.com/scottjehl/picturefill\">Picturefill</a> (for now) if you need to use raster graphics.</li>    </ul>  </li>  <li>Increase font sizes on screens that are wide enough but not tall enough <a href=\"http://trentwalton.com/2012/01/11/vertical-media-queries-wide-sites/\">for it to make sense</a>.</li>  <li>For widescreen layouts:    <ul>      <li>Tighten up the layout by vertically compressing whitespace.</li>      <li>Move calls to action closer to the top.</li>    </ul>  </li>  <li>For portrait layouts:    <ul>      <li>Rebalance widescreen layouts by minimizing menus and maximizing content.</li>      <li>Menus can be repositioned off-canvas or at a different portion of the screen (even the bottom; repositioning towards the bottom works better than to the sides.)</li>    </ul>  </li>  <li>Output trends:    <ul>      <li>High resolution is <strong>the</strong> resolution.</li>      <li>Widescreen is <strong>the</strong> aspect ratio (16:9 or even 19:10).</li>      <li>Media queries know about more than width alone; pay attention to variable heights as well!</li>    </ul>  </li></ul><h3 id=\"input\">Input</h3><ul>  <li>Not all devices correctly report whether they are touch capable, so support <strong>all</strong> inputs (<strong>both</strong> touch and click-based input.)</li>  <li>You can include &#8220;hidden features&#8221; for each set of inputs. For example, double tapping an image in a touch interface and mouse-wheel scrolling in a click interface could both perform the same &#8220;zoom&#8221; action.</li>  <li>Communicate what&#8217;s possible.</li>  <li>Screen size is a poor proxy for detecting input type, but it&#8217;s what we&#8217;ve got&#8230;for now.</li></ul><h3 id=\"posture\">Posture</h3><ul>  <li><strong>Posture</strong> is how we combine input and output.</li>  <li>Physical screen size and viewing distance determine the final perceived size of objects (in real-world units like inches, not in pixels!)</li>  <li>Objects should be sized approximately 1/2 inch per foot of viewing distance. (Example: the box art in all of Netflix&#8217;s UIs across different devices of increasing size.)</li>  <li>A full HD resolution TV can have the same resolution as a phone (1920px &#215; 1080px), even though one is viewed ten feet away while the other is viewed one foot away.</li>  <li>Design to human scale and environments, not to screen width.</li></ul><hr /><h2 id=\"kristina-halvorson---contentcommunication-braintrafficcom--halvorson\">Kristina Halvorson - Content/Communication (<a href=\"http://braintraffic.com/\">braintraffic.com</a> &#8226; <a href=\"https://twitter.com/halvorson\">@halvorson</a>)</h2><h3 id=\"principles\">Principles</h3><p>A <strong>principle</strong> internally motivates us to do things that seem good and right.A <strong>rule</strong> externally compels you to do things <em>someone else has deemed</em> good and right.</p><h3 id=\"content-principles\">Content Principles</h3><ul>  <li>Principles unite us in our day-to-day-work.</li>  <li>This content is not for us.</li>  <li>&#8220;Responsive&#8221; does not equal &#8220;reactive&#8221;.</li>  <li>The story informs the format.</li>  <li>Numbers aren&#8217;t everything.</li></ul><h3 id=\"strategy\">Strategy</h3><ul>  <li>A good strategy provides you with context and constraints, and doesn&#8217;t allow you do do anything/make excuses for anything: &#8220;We will share user-facing, task-based content that makes our customers feel smart and safe, both personally and professionally.&#8221;</li>  <li>Strategy keeps us accountable.</li>  <li>Strategy helps web teams ask better questions about content at the beginning of a project.</li>  <li>A <strong>content strategy</strong> consists of <strong>content components</strong> (substance and structure) and <strong>people components</strong> (workflow and governance).</li></ul><h3 id=\"process\">Process</h3><ul>  <li>Do not make process your god.</li>  <li>&#8220;Different methods work or fail because of people, not because they are universally good or bad.&#8221; -Pawel Brodzinski, <em>Agile Bullshit</em></li>  <li>Artifacts (fonts, etc) are tools, not outcomes.</li>  <li>Good process helps us move together.</li></ul><h3 id=\"roles\">Roles</h3><ul>  <li>Roles give us a place.</li>  <li>The RACI Model:    <ul>      <li><strong>R</strong> - Who is <strong>responsible</strong> for completing a task?</li>      <li><strong>A</strong> - Who is <strong>accountable</strong> for the work&#8217;s success?</li>      <li><strong>C</strong> - Who must be <strong>consulted</strong> before work can be signed-off on?</li>      <li><strong>I</strong> - Who must be kept <strong>informed</strong> along the way?</li>    </ul>  </li>  <li>For every project, every time:    <ol>      <li>At some point, invite All the People</li>      <li>Make sure everyone&#8217;s aligned on terminology (e.g. <em>audit</em> vs. <em>inventory</em>, <em>wireframe</em> vs. <em>prototype</em>)</li>      <li>Identify timing issues, agendas, overlapping responsibilities</li>    </ol>  </li></ul><h3 id=\"perceptions\">Perceptions</h3><ul>  <li>Perceptions give way to perspective.</li>  <li>&#8220;In content strategy, our master skills must include translating and negotiating, so we can facilitate communication between disparate disciplines and help them to communicate.&#8221; -Rachel Lovinger, <em>Tinker, Tailor, Content Strategist</em></li></ul><h3 id=\"conclusion\">Conclusion</h3><ul>  <li>We are perpetually catching up.</li>  <li>Our work is <del>personal</del> <em>together</em>.</li>  <li>&#8220;This multi-device web design increases stress exponentially.&#8221; -Trent Walton, <em>.net Magazine</em></li>  <li>&#8220;A study of over 350 people in 6 business units at a financial services company found that the greatest predictor of a team&#8217;s achievement was how the members felt about one another.&#8221; -Shawn Achor, <em>The Happiness Advantage</em></li></ul><hr /><h2 id=\"jared-spool---ux-strategy-means-business-uiecom--jaredspool\">Jared Spool - UX Strategy Means Business (<a href=\"http://www.uie.com/\">uie.com</a> &#8226; <a href=\"https://twitter.com/jaredspool\">@jaredspool</a>)</h2><h3 id=\"design-and-business\">Design and Business</h3><ul>  <li>Design is the rendering of intent.</li>  <li>Every design has content, and every design has&#8230; &#8230;a design.</li>  <li>Great content and great design both exist, but we tend to treat them as separate entities. We believe they overlap with great UX, but in truth they are inseparable: great content + great design = great UX.</li>  <li>We use <em>strategy</em> to achieve a desired outcome, but UX strategy can&#8217;t predict outcomes.</li>  <li>Regarding Apple&#8217;s iOS 6 Maps fiasco: Apple acquired 3 mapping companies and used 10 data sources; Google used 1,300 data sources and had 1,000 people &#215; 10 years of correcting map errors. Apple didn&#8217;t do the wrong things, Google had done it better 10 years earlier. We were comparing 10-year-old vs. 1-year-old process and strategy.</li>  <li>Amazon&#8217;s cash float model:    <ul>      <li>Amazon doesn&#8217;t focus on profit for most of the things they sell, because they can sell everything at cost and still make money.</li>      <li>Amazon turns inventory every 20 days while Best Buy turns inventory every 74 days.</li>      <li>Standard retail payment terms are 45 days.</li>      <li>Best Buy has a cash debt before distributors are paid; Amazon has a cash float.</li>    </ul>  </li>  <li>Great business models are explicitly designed.</li>  <li>How business is done in Silicon Valley: <a href=\"http://www.southparkstudios.com/clips/151040/the-underpants-business\">South Park&#8217;s &#8220;Underpants Gnomes&#8221; model</a> (1. Steal underpants; 2. ???; 3. Profit)</li>  <li>Business strategic priorities:    <ul>      <li>Increase revenue</li>      <li>Decrease costs</li>      <li>Increase new business</li>      <li>Increase existing business</li>      <li>Increase shareholder value</li>    </ul>  </li>  <li>Can apply those strategic priorities to any business (examples: Zappos&#8217; pioneering self-return policy, universities, government, etc.)</li>  <li>Framing work in these terms helps communicate it to the people who are responsible for the health of the organization.</li></ul><h3 id=\"types-of-business-models\">Types of Business Models</h3><ul>  <li><strong>Advertising</strong> is a business model failure (For example: look at how <a href=\"http://dictionary.reference.com/browse/clutter?s=t\">cluttered dictionary.com is</a>.)    <ul>      <li>Everything that isn&#8217;t content on a page is there to disrupt the user from the experience they intended to have.</li>      <li>It&#8217;s intentional and it disrupts the user.</li>      <li>Advertisers don&#8217;t care about the user; they care about selling stuff.</li>      <li>Advertising disrupt&#8217;s the users&#8217; experience supposedly to benefit the advertiser.</li>      <li>Internet advertising statistics:        <ul>          <li>A typical internet user sees 1,707 ads in a year. (Comscore)</li>          <li>An average ad is clicked 0.1% of the times it is shown. (Doubleclick)</li>          <li>A 468px &#215; 60px banner is clicked 0.04% of the times it is shown. (Doubleclick)</li>          <li>Users can&#8217;t see 31% of ads. (Comscore)</li>          <li>Users click on 50% of mobile ads by accident. (Goldspot Media)</li>          <li>You are 475.29 times more likely to survive a plane crash than to click on a banner ad in your lifetime. (Solve Media)</li>        </ul>      </li>      <li>Regarding <a href=\"https://www.youtube.com/watch?v=I03UmJbK0lA\">K-Mart&#8217;s &#8220;ship my pants&#8221; ad</a>: &#8220;I&#8217;ve watched this ad a thousand times. I love this ad; I will never shop at K-Mart.&#8221;</li>      <li>When you don&#8217;t <em>pay</em> for the product, you <em>are</em> the product.</li>      <li><a href=\"http://www.walgreens.com/\">walgreens.com</a>: 3.8% of the screen real estate is dedicated to the top 5 most accessed elements on the page, which account for 60% of traffic. The rest of the page is crammed with marketing stuff users don&#8217;t care about.</li>      <li>Internet advertising that could actually work relies on <em>seducible moments</em>, when an ad  delivers the right content at the right time.</li>      <li>Figuring out what products go with what content is prohibitively difficult and expensive, but it works because it is purposely built into the experience.</li>      <li>Advertising should be the business model choice of last resort.</li>    </ul>  </li>  <li>Metered paywalls    <ul>      <li><a href=\"http://www.nytimes.com/\">nytimes.com</a>: Only users who return to the site multiple times are shown the paywall (limited to 10 articles for free.)</li>      <li>NY Times made more money from the metered paywall than from advertising. This plays into the business strategic priorities.</li>      <li>Metered paywalls demand excellent content.</li>    </ul>  </li>  <li>Supporting product sales    <ul>      <li><a href=\"http://www.ifixit.com/\">iFixit</a> shares information about repairing electronic devices, and sells the specialized tools needed to do so.</li>      <li><a href=\"https://www.etsy.com/\">Etsy</a> sells instructions to make products as well as the products themselves.</li>    </ul>  </li>  <li>Alternative Channel Revenue    <ul>      <li><a href=\"http://www.radiolab.org/\">Radiolab</a> makes more money from their live shows than from pledge drives.</li>      <li><a href=\"http://www.mythbusterstour.com/\">Mythbusters On Tour</a> makes more money than television advertising.</li>    </ul>  </li>  <li>Content Distribution (examples: Amazon Kindle, Apple iTunes)</li></ul><h3 id=\"conclusion-1\">Conclusion</h3><ul>  <li>Business model recap:    <ul>      <li>Metered paywalls</li>      <li>Repurposed content</li>      <li>Supporting product sales</li>      <li>In-app purchase</li>      <li>Alternative channel revenue</li>      <li>Content distribution</li>      <li>Advertising (but don&#8217;t do it!)</li>    </ul>  </li>  <li>Content has actual monetary value!    <ul>      <li><a href=\"http://significantobjects.com/\">SignificantObjects</a> turned thrift-store chotchkies objects of value by attaching stories to them.</li>      <li><a href=\"https://www.crutchfield.com/\">Crutchfield</a> writes their own copy for items in their online store, while Walmart&#8217;s site relies on generic information provided by vendors. In user testing, users spent 237% of their budget at Crutchfield, but only spent 89% of their budget at Walmart.</li>    </ul>  </li>  <li>The best UX strategists create delight by working in the intersection of business and design.</li>  <li>We can design intentional business models.</li>  <li>The 5 business strategic priorities are a tool for mapping our design intent into business objectives, and to map business objectives into design intention.</li>  <li>We need to study business models like we study technological techniques.</li></ul><hr /><h1 id=\"day-2-42914\">Day 2: 4/29/14</h1><h2 id=\"jeremy-keith---the-long-web-adactiocom--adactio\">Jeremy Keith - The Long Web (<a href=\"http://adactio.com/\">adactio.com</a> &#8226; <a href=\"https://twitter.com/adactio\">@adactio</a>)</h2><ul>  <li>Mobile first? URL first. Design your URLs before you design anything that&#8217;s going to appear on the screen.</li>  <li>URLs are the one universal syntax of the web. They should be readable, guessable, and hackable.</li>  <li>Content first, navigation second.</li>  <li>It&#8217;s OK to use unsupported attributes/elements in HTML since browsers typically ignore things they don&#8217;t understand and degrade gracefully.</li>  <li>The <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist\"><code class=\"highlighter-rouge\">&lt;datalist&gt;</code> element</a> are the bastard love child of the <code class=\"highlighter-rouge\">&lt;input&gt;</code> and <code class=\"highlighter-rouge\">&lt;select&gt;</code> elements.</li>  <li>Any text in a <code class=\"highlighter-rouge\">&lt;datalist&gt;</code> can also be used as a placeholder with a &#8220;for example&#8221; or &#8220;e.g.&#8221; prefix.</li>  <li><strong>Progressive enhancement</strong> doesn&#8217;t mean designing for the lowest common denominator; rather it means <strong>starting</strong> from the lowest common denominator.    <ul>      <li>&#8220;I like an escalator, because an escalator can never break. It can only become stairs. You&#8217;ll never see an &#8216;Escalator Out of Order&#8217; sign, only &#8216;Escalator Temporarily Stairs. Sorry for the convenience.&#8217;&#8221; -Mitch Hedberg</li>      <li>&#8220;Javascript is the electricity of the web.&#8221; It should be &#8220;subservient to the existing structure.&#8221;</li>      <li>In other words, a site should be enhanced by JavaScript but not necessarily require it.</li>      <li>&#8220;Until the page has finished loading, every user is a non-JavaScript user.&#8221; -Jake Archibald</li>      <li>Progressive enhancement is more about technology failing than technology not being supported. (For example: <code class=\"highlighter-rouge\">&lt;a href=\"javascript:void(0)\"&gt;Download&lt;/a&gt;</code> broke the ability to download Google Chrome when the download page&#8217;s JavaScript stopped loading.)</li>    </ul>  </li>  <li>Don&#8217;t rely on 3rd-party APIs for your core business since they could go away without notice.</li>  <li>Use conditional loading for any nonessential third-party content (for example, social widgets; write links in the HTML that will be shown while the page loads, then after the page is done loading, allow widgets to load and replace the links.)</li>  <li>The <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#Attributes\"><code class=\"highlighter-rouge\">rel</code> attribute</a> can be used to make <a href=\"https://developer.mozilla.org/en-US/docs/Controlling_DNS_prefetching\">prefretching</a> <strong>suggestions</strong> to the browser to optimize performance.</li>  <li>The best way to be future friendly is to be backwards compatible.</li></ul><hr /><h2 id=\"paul-irish---responsive-design-performance-budget-paulirishcom--paul_irish\">Paul Irish - Responsive Design Performance Budget (<a href=\"http://paulirish.com/\">paulirish.com</a> &#8226; <a href=\"https://twitter.com/paul_irish\">@paul_irish</a>)</h2><ul>  <li>71% of people expect websites to load as fast (or faster) on their phone than on a computer.</li>  <li>The #1 thing you can do for your site for mobile devices is to make it faster.</li>  <li>Worry about speed way before worrying about reformatting sites to fit small screens. (Double-tap and pinch zooming are workarounds for desktop layouts, but there are no workarounds for a slow site.)</li>  <li><strong><a href=\"https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index\">Speed Index</a>:</strong> A metric that precisely measures a user&#8217;s experienced page load time in milliseconds.</li>  <li>Total page bytes, number of requests, and bytes of JavaScript are not reliable indicators of actual page load times.</li>  <li>For <strong>fast pages</strong>, what is the <strong>right number of requests</strong> and <strong>optimal page size</strong>?</li>  <li>&#8220;Measuring performance by the KB is like measuring effectiveness of your diet by the pound. Measuring performance by number of requests is like measuring your diet by number of things you ate - in both cases, who cares about what you actually ate, right?&#8221; -<a href=\"https://github.com/html5rocks/www.html5rocks.com/issues/856#issuecomment-31957933\">Ilya Grigorik</a></li>  <li>Not all <strong>requests</strong> are made equal; where are they initiated? What part of the UX do they block?</li>  <li>Not all <strong>bytes</strong> are made equal; the first 14kb are extremely important. Different <code class=\"highlighter-rouge\">content-type</code>s can have different performance impact(s) for the page.</li>  <li>&#8220;Bloat&#8221; isn&#8217;t a great word to describe performance issues, it can refer to transfer size, code complexity, or dead code.</li>  <li>Components of an HTTP request:    <ul>      <li>DNS lookup</li>      <li>New TCP connection (handshake roundtrip)</li>      <li>HTTP request requires minimum of one round trip to the server &#8212; <em>plus server processing time</em>.</li>    </ul>  </li>  <li>Bandwidth + Latency &#8776; Performance.    <ul>      <li>Bandwidth: Amount of data transferred over the network per unit time (e.g. 5 mb/s)</li>      <li>Latency: Delay in the network to transfer a packet (e.g. round trip time)</li>    </ul>  </li>  <li>Last-mile latency (cable/DSL) is slow, and it&#8217;s even worse for mobile (see <a href=\"https://www.youtube.com/watch?v=_fNp37zFn9Q\">&#8220;Living with Lag&#8221;</a>).</li>  <li>Video streaming is bandwidth limited; web browsing is latency limited.</li>  <li>Optimizing transport (TCP) performance:    <ul>      <li>TCP is optimized for long-lived connections and bulk data transfers.</li>      <li>Most of the <strong>HTTP data flows consist of small, bursty data transfers</strong>, but network round trip time is the limiting factor in TCP throughput and performance in most cases.</li>      <li>Consequently, <strong>latency is the performance bottleneck for HTTP</strong> and most of the web.</li>      <li><strong>Latency</strong> defines the speed at which the page loads; <strong>mobile&#8217;s growth</strong> means average latency is growing.</li>      <li>Latency&#8217;s influence means <strong>optimizing for request count</strong>.</li>    </ul>  </li>  <li>Optimizing for the critical path    <ul>      <li>When a JavaScript file is referenced in the <code class=\"highlighter-rouge\">&lt;head&gt;</code> of the document, the browser can&#8217;t process the rest of the page until it has finished processing that file.</li>      <li>Eliminate render-blocking JavaScript (especially in <code class=\"highlighter-rouge\">&lt;head&gt;</code>). Load all JavaScript asynchronously.</li>      <li><strong>Critical CSS:</strong> The CSS used to render the content &#8220;above the fold&#8221;.</li>      <li>Minimize render-blocking CSS.</li>      <li>Deliver the goods &#8212; serve critical content in the initial HTML, then progressively enhance.</li>      <li>No redirects (they just add round trip time).</li>      <li>Use gzip.</li>    </ul>  </li>  <li>Tools that can help: <a href=\"http://www.webpagetest.org/\">WebPagetest</a> / <a href=\"https://developers.google.com/speed/pagespeed/insights/\">Google PageSpeed Insights</a> / <a href=\"https://developers.google.com/speed/pagespeed/module\">Pagespeed Module (apache/nginx)</a> / <a href=\"http://speedcurve.com\">speedcurve</a></li>  <li>Visualize your performance wins! Use visuals and data to make your case for improving performance.</li>  <li>Your count of high-latency users is going to increase. Prepare for it.</li>  <li>Aggressive but good performance goals:    <ul>      <li>Deliver a fast mobile web page load (show above-the-fold content in under 1 second (Speed Index under 1000). Serve critical-path content, including CSS, as part of the first 14kb of the first server response.</li>      <li>Delight your users.</li>    </ul>  </li></ul><hr /><h2 id=\"lea-verou---the-chroma-zone-engineering-color-on-the-web-leaveroume--leaverou\">Lea Verou - The Chroma Zone: Engineering Color on the Web (<a href=\"http://lea.verou.me/\">lea.verou.me</a> &#8226; <a href=\"https://twitter.com/LeaVerou\">@LeaVerou</a>)</h2><h3 id=\"screens-pixels-and-subpixels\">Screens, Pixels, and Subpixels</h3><ul>  <li>White pixels are actually composed of RGB subpixels, using additive color.</li>  <li>Different screens have different subpixel geometries.</li>  <li>Text is rendered with subpixel antialiasing; you can play with it using <a href=\"http://people.mozilla.org/~jdaggett/tests/subpixelexplorer.html\">Subpixel Explorer</a>.</li>  <li>Browsers allow you to explicitly disable antialiasing through CSS selectors (but don&#8217;t do it, since it makes fonts look terrible; it could be useful for icon fonts.)</li>  <li>3 colors &#215; 8-bit subpixels = 2^8 &#215; 3 = 3 bytes per pixel in uncompressed images.</li></ul><h3 id=\"colors-in-html-32\">Colors in HTML 3.2</h3><ul>  <li><code class=\"highlighter-rouge\">#rrggbb</code> hex syntax    <ul>      <li>Using hex syntax as a mental model for color is difficult, try playing <a href=\"http://leaverou.github.io/whathecolor\">whatthecolor</a>.</li>    </ul>  </li>  <li>Useless color names that were based on the <a href=\"https://en.wikipedia.org/wiki/List_of_software_palettes#Microsoft_Windows_default_16-color_palette\">Microsoft Windows default 16-color palette</a></li></ul><h3 id=\"colors-in-css-1---21\">Colors in CSS 1 - 2.1</h3><ul>  <li><code class=\"highlighter-rouge\">rgb()</code> syntax</li>  <li><code class=\"highlighter-rouge\">#rgb</code> shortened hex syntax</li>  <li>&#8220;orange&#8221; color name (<a href=\"http://www.w3.org/TR/CSS2/syndata.html#value-def-color\">seriously</a>)</li></ul><h3 id=\"css-color-level-3\"><a href=\"http://www.w3.org/TR/css3-color/\">CSS Color Level 3</a></h3><ul>  <li>A color space has <strong>perceptual uniformity</strong> when the perceptual similarity of two colors is measured by the distance between them.</li>  <li>RGB and RGB-derived color spaces <strong>are not</strong> perceptually uniform.</li>  <li>Everyone says &#8220;CSS3&#8221; even though it doesn&#8217;t exist (only the modules are versioned).</li>  <li>HSL colors are slightly more intuitive than RGB colors.    <ul>      <li><strong>Saturation:</strong> Closeness to gray.</li>      <li><strong>Lightness:</strong> Closeness to white or black (but the model treats pure blue and pure yellow as having the same lightness, even though yellow always appears lighter to us; HSL is not perceptually uniform since it&#8217;s derived from RGB.)</li>    </ul>  </li>  <li>The <code class=\"highlighter-rouge\">hue-rotate</code> filter is useful for colorizing images when applied on top of a <code class=\"highlighter-rouge\">sepia</code> filter.</li>  <li>The <code class=\"highlighter-rouge\">multiply</code> blending mode tends to makes colors darker. (For example, red[255,0,0] &#215; blue[0,0,255] = black[0,0,0,].)</li>  <li>Lightness != luminance, can&#8217;t rely on it to judge whether white or black text would appear better on top of a color.    <ul>      <li>Play with contrast ratios at <a href=\"http://leaverou.github.io/contrast-ratio\">http://leaverou.github.io/contrast-ratio</a>.</li>    </ul>  </li>  <li>CSS4 introduces relative luminance to better match human perception, but it&#8217;s not perfect; it slightly fails for orange, but will always fail &#8220;better&#8221; than lightness (HSL).</li>  <li>When dealing with transparency, there&#8217;s no such thing as a transparent pixel; transparency is calculated using <a href=\"http://en.wikipedia.org/wiki/Alpha_blending\">alpha blending</a>.</li>  <li>Using the <code class=\"highlighter-rouge\">transparent</code> keyword is a shorthand for transparent <strong>black</strong>, so <code class=\"highlighter-rouge\">linear-gradient(90deg, white, transparent)</code> will actually fade from gray instead of pure white. Use <code class=\"highlighter-rouge\">hsla()</code> transparent white instead (<code class=\"highlighter-rouge\">linear-gradient(90deg, white, hsla(0,0%,100%,0))</code>).</li>  <li>CSS Color Level 3 included some racist color names: <code class=\"highlighter-rouge\">indianred</code>, <code class=\"highlighter-rouge\">navajowhite</code>, and <code class=\"highlighter-rouge\">peru</code></li>  <li>CSS Color Level 3 also included a color named <code class=\"highlighter-rouge\">darkgray</code> which is actually lighter than <code class=\"highlighter-rouge\">gray</code>, due to backwards compatibility (<code class=\"highlighter-rouge\">gray</code> is halfway between white and black in RGB.)</li>  <li>The <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentColor_keyword\"><code class=\"highlighter-rouge\">currentcolor</code> keyword</a> is the first variable we ever got in CSS.</li></ul><h3 id=\"the-future-css-color-module-level-4\">The Future: <a href=\"http://dev.w3.org/csswg/css-color-4/\">CSS Color Module Level 4</a></h3><ul>  <li><code class=\"highlighter-rouge\">gray(%, alpha)</code> function</li>  <li><code class=\"highlighter-rouge\">#rgba</code> and <code class=\"highlighter-rouge\">#rrggbbaa</code></li>  <li><a href=\"https://en.wikipedia.org/wiki/HWB_color_model\">HWB (hue, whiteness, blackness) color model</a> (NOT the same as HSB).</li>  <li><a href=\"http://dev.w3.org/csswg/css-color-4/#modifying-colors\"><code class=\"highlighter-rouge\">color()</code> function and adjusters</a></li>  <li>Named hues and <code class=\"highlighter-rouge\">&lt;angle&gt;</code> in <code class=\"highlighter-rouge\">hsl()</code></li>  <li><code class=\"highlighter-rouge\">rgb()</code> and <code class=\"highlighter-rouge\">hsl()</code> will accept alpha values</li>  <li><a href=\"http://www.myth.io\">myth.io</a> is a relatively new CSS preprocessor that acts as a &#8220;CSS polyfill&#8221;, allowing the use of some of these future features today.</li></ul><h3 id=\"cmyk-vs-rgb\">CMYK vs. RGB</h3><ul>  <li>CMY &#8220;works&#8221; mathematically but not in the real world, that&#8217;s why CMYK is used for print.</li>  <li>sRGB has a slightly larger color gamut than CMYK (LAB &gt; Adobe RGB &gt; sRGB &gt; CMYK)</li>  <li>There&#8217;s no simple way to convert between RGB and CMYK.</li></ul><hr /><h2 id=\"josh-clark---mind-the-gap-designing-in-the-space-between-devices-globalmoxiecom--globalmoxie\">Josh Clark - Mind the Gap: Designing in the Space Between Devices (<a href=\"http://globalmoxie.com\">globalmoxie.com</a> &#8226; <a href=\"https://twitter.com/globalmoxie\">@globalmoxie</a>)</h2><h3 id=\"physical-gap\">Physical Gap</h3><ul>  <li>We&#8217;ve lost the ability to transfer information between two physically collocated devices; we&#8217;re in a multi-device world individually. (An old example: Palm Pilot beaming.)</li>  <li>Designers haven&#8217;t provided an elegant strategy to cross the physical gap; right now all we have is remote control, self-email or SMS, and content syncing.</li></ul><h3 id=\"behavior-gap\">Behavior Gap</h3><ul>  <li>How can we make physical interactions for exchanging data between devices?</li>  <li><strong>Sequenced:</strong> Move from one device to the other, e.g. desktop to mobile.</li>  <li><strong>Simultaneous:</strong> Live peer-to-peer interaction (for example, <a href=\"http://g.co/racer\">Racer</a>).</li>  <li>It&#8217;s not enough to share content across devices. Share action.</li>  <li>Sync verbs, not just nouns.</li>  <li>Current technologies: WebSockets, WebRTC, Bluetooth LE, Web Audio API, Infrared</li>  <li><strong>Danger:</strong> Screens encumber and constrain. Design for people, not screens. The best things in life happen outside of screens. It&#8217;s our obligation to bend technology to our lives, not vice versa.</li></ul><h3 id=\"physical-interaction\">Physical Interaction</h3><ul>  <li>Do we need screens at all? (For example, <a href=\"http://www.drumpants.com/\">Drumpants</a> doesn&#8217;t.)</li>  <li>Drumpants uses human &#8594; device interaction, how do we bring that to device &#8594; device interaction?</li>  <li>The <a href=\"http://www.misfitwearables.com/\">Misfit Shine</a> fitness tracker syncs to your phone by placing it directly on the screen.    <ul>      <li>It turns out this is because the Shine is made of metal which significantly weakens its Bluetooth signal, so the Shine needs to be physically close to the phone to sync.</li>      <li>Embracing a constraint can lead to the best designs.</li>    </ul>  </li>  <li>If you physically tap your phone on your computer, nothing happens. Or does it? (See Happy Together&#8217;s <a href=\"http://vimeo.com/86287024\">demo video</a> and <a href=\"http://github.com/houseoflegend/happytogether\">code</a>.)</li>  <li>This is not a challenge of technology; it&#8217;s a challenge of imagination.</li>  <li>There is magic in the gaps between devices. (See the <a href=\"https://www.youtube.com/watch?v=eYveEdhTgBs\">Grab Magic demo video</a>.)</li>  <li>Magic tends to decay; it is self-deprecating, we get used to it, and it&#8217;s a moving target.</li>  <li>Never ever ever ever try to out-mouse the mouse.    <ul>      <li>For example, using the <a href=\"https://www.leapmotion.com/\">LeapMotion</a> as a mouse is a much worse experience than just using a mouse.</li>      <li>However, the LeapMotion can be used to add digital magic to physical objects. (Example: pointing at floors in a physical model of a building highlights different floor plans with lights.)</li>    </ul>  </li>  <li><strong>Mundane computing:</strong> Making mundane tasks easier. (But perhaps you can go too far, given the example of the <a href=\"https://www.quirky.com/shop/619\">Egg Minder</a>.)</li>  <li>Anything that can be connected will be connected; everyday objects will become digital gadgets.</li>  <li>Physical things have digital avatars.</li>  <li>Software makes hardware scale.    <ul>      <li><a href=\"https://www.youtube.com/watch?v=8EshrR-xk2E\">Teddy Ruxpin</a> looks creepy today, and relied on canned audio tapes. <a href=\"http://www.toymail.co/\">Toymail</a> is a modern technical successor that allows for social interaction.</li>      <li><a href=\"http://lgusblog.com/product-news/lg-homechat-makes-easy-communicate-smart-appliances/\">LG HomeChat</a>: Text your appliances!</li>    </ul>  </li>  <li><strong>Danger:</strong> Connected devices won&#8217;t always say nice things. Anything that can be hacked will be hacked. (Cam you imagine an appliance botnet? Or an instant poltergeist?)    <ul>      <li><a href=\"http://www.bbc.com/news/technology-23575249\">BBC article</a>: &#8220;A luxury toilet controlled by a smartphone app is vulnerable to attack, according to security experts.&#8221;</li>    </ul>  </li>  <li>Software is ideology, embedded with values.</li></ul><h3 id=\"imagination\">Imagination</h3><ul>  <li>Plan for gadget hopping</li>  <li>Share action</li>  <li>Peer-to-peer sharing</li>  <li>Offscreen interactions</li>  <li>Design for sensors</li>  <li>Avatars for objects</li></ul><hr /><h2 id=\"bruce-lawson---web-can-the-web-win-the-war-against-native-without-losing-its-soul-brucelawsoncouk--brucel\">Bruce Lawson - Web+: Can the Web Win the War Against Native Without Losing its Soul? (<a href=\"http://www.brucelawson.co.uk/\">brucelawson.co.uk</a> &#8226; <a href=\"https://twitter.com/brucel\">@brucel</a>)</h2><ul>  <li>Why the web-vs-native gap? 86% of time is spent in apps rather than the mobile web.</li>  <li>Forget AppCache, <a href=\"https://github.com/slightlyoff/ServiceWorker\">Service Workers</a> are the new hotness.    <ul>      <li>Invoked even when offline, can enable apps that are &#8220;offline by default&#8221;.</li>      <li>Normal resource loading is the fallback behavior.</li>      <li>Forces you to have URLs.</li>      <li>Service Workers + IndexedDB = Power.</li>    </ul>  </li>  <li>High-level or low-level?    <ul>      <li>&#8220;&#8230;when we try to produce high-level APIs, they tend to suck for various reasons, and therefore that we should produce lower-level primitives atop which people can build nicer things&#8221; -<a href=\"http://lists.w3.org/Archives/Public/www-tag/2013Feb/0022.html\">Robin Berjon</a> (W3C, HTML Editor)</li>      <li>&#8220;&#8230;browser vendors should provide new low-level capabilities that expose the possibilities of the underlying platform as closely as possible. They should also seed the discussion of high-level APIs through JavaScript implementations of new features&#8221; -The <a href=\"http://extensiblewebmanifesto.org/\">Extensible Web Manifesto</a></li>    </ul>  </li>  <li><a href=\"http://lists.w3.org/Archives/Public/public-html-admin/2013Feb/0153.html\">BBC</a>: &#8220;since the launch of iPlayer the amount of platforms with incompatible distribution infrastructure, video formats and security technologies has rapidly increased. This level of growth in the complexity of delivery is unsustainable&#8221;    <ul>      <li>Perfect argument to promote web over native, hence DRM for the web is a necessary evil.</li>      <li>Allow the battle for DRM to win the war for the web (over native).</li>    </ul>  </li>  <li>People prefer the familiar; users trust known resources.</li>  <li>Bookmarks in mobile browsers are used sparingly, instead mobile users &#8220;bookmark&#8221; by downloading the native app.</li>  <li>What&#8217;s the difference between &#8220;bookmarking&#8221; a page and &#8220;installing&#8221; it? Making it visible outside the browser.</li>  <li>Native apps feel native to the device/platform, web apps don&#8217;t. Android and iOS are gradually developing different conventions for interaction, and a native app responds the way its user expects.</li>  <li><a href=\"https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/ResourcePriorities/Overview.html\">W3C Resource Priorities spec</a> &#8212; <code class=\"highlighter-rouge\">&lt;img lazyload /&gt;</code></li>  <li>On mobile, hardware-accelerated scrolling gets knocked back down to software/the CPU if the browser has to listen for scroll events.</li>  <li>For the web to get a leg up on native, we need univerally installable webapps.    <ul>      <li>No versioning, no installing, instantaneous updates &#224; la Google Chrome</li>      <li>&#8220;I don&#8217;t care which [standard] we end up using, I only care that we all end up using the same one.&#8221;</li>      <li><a href=\"http://smus.com/installable-webapps\">Installable Webapps: Extend the Sandbox</a></li>    </ul>  </li>  <li>Using plain HTML for the initial page load will always be faster than JavaScript solutions.    <ul>      <li>There are tools like <a href=\"https://prerender.io/\">prerender.io</a>, but do you really want to go down that path?</li>    </ul>  </li>  <li>Don&#8217;t make webapps that emulate all of the failures of native apps.</li></ul><hr /><h1 id=\"scott-berkun---how-to-champion-ideas-back-at-work-scottberkuncom--berkun\">Scott Berkun - How to Champion Ideas (Back at Work) (<a href=\"http://www.scottberkun.com/\">scottberkun.com</a> &#8226; <a href=\"https://twitter.com/berkun\">@berkun</a>)</h1><ul>  <li>The real designer is the person with the power to make decisions.</li>  <li>There are more designers now who have founded a company than ever before in history.</li>  <li>Staying connected helps you champion ideas.</li>  <li>When an event is over, your chance to network and connect ends.</li>  <li><strong>Halfmeet:</strong> A person who you almost started a friendship with at an event. (You can guess what a <em>halfhook</em> is.)</li>  <li>5 non-slimy networking tricks:    <ul>      <li>Ask everyone you like for a business card</li>      <li>Saying thank you starts a conversation</li>      <li>Post your notes from sessions during the event &#8212; attracts people to you</li>      <li>Be active on Twitter to find outgoing people</li>      <li>If you use LinkedIn, write something personal</li>    </ul>  </li>  <li>Speakers love people who ask them thoughtful questions about their presentation.</li>  <li>Keep the fire burning &#8212; start a UX happy hour! Monthly booze is magical.</li>  <li>When trying to champion something, don&#8217;t be an easy target. Don&#8217;t shoot yourself or get shot.</li>  <li>Events are abstractions, but your life is <strong>specific</strong>.</li>  <li><a href=\"http://scottberkun.com/2014/min-max-note-taking/\">Min/max note taking</a>:    <ul>      <li>You won&#8217;t remember much in a week</li>      <li>You won&#8217;t return to the slides</li>      <li>You need to capture reflections <strong>TODAY</strong></li>      <li>5 bullets per talk</li>      <li>Note links and references</li>      <li>Post a summary on your blog (or tweet it)</li>      <li>Post it at work / share with your boss</li>    </ul>  </li>  <li>Championing something requires a great deal of persuasion and charm; it&#8217;s not what you say, it&#8217;s what people hear.    <ul>      <li>Charm is designed and depends on context: &#8220;Here&#8217;s something you should be doing&#8221; vs. &#8220;Here&#8217;s something that will help solve your problem&#8221;.</li>      <li>Use language that matters to your audience.</li>    </ul>  </li>  <li>Progress is change; leaders like status quo and resist changes; therefore leaders resist progress. Powerful people want to protect their power.</li>  <li>Champions of ideas have really good networks.</li>  <li><a href=\"http://scottberkun.com/2014/how-to-convince-your-boss-to-try-new-things/\">How to convince your boss to try new things</a>:    <ul>      <li>Be awesome at your job</li>      <li>Get support from an influential coworker</li>      <li>Plan a trial, including how to evaluate</li>      <li>Pitch it</li>      <li>Do it awesomely</li>      <li>Repeat</li>    </ul>  </li></ul><hr /><h1 id=\"conclusion-2\">Conclusion</h1><p>Here are my takeaways from the conference:</p><ul>  <li>We design for people, not browsers. Worry about experience before worrying about technology decisions; don&#8217;t miss the forest for the trees.</li>  <li>We need to go back to basics to improve performance, especially on mobile. Serve static, critical-path content as quickly as possible, then progressively enhance after the page is done loading.</li>  <li>Make an effort to effectively communicate about design in ways your coworkers and superiors  will understand and benefit from, so everyone wins.</li></ul><p>Finally, I have to mention that I was delighted to see that <a href=\"/2013/06/25/an_event_apart_boston_2013.html\">last year&#8217;s bacon cupcakes</a> made a welcome reappearance this year:</p><p><img src=\"/asset/post_assets/2014/05/aea_boston_2014_bacon_cupcake.jpg\" alt=\"Bacon Cupcake\" /></p><p>As always, An Event Apart was well-organized, informative, and served as a terrific inspirational recharge.</p>",
      "url": "https://joshdick.net/2014/05/02/an_event_apart_boston_2014.html",
      "tags": [
        "design",
        "webdev"
      ],
      "date_published": "2014-05-02T00:00:00-04:00",
      "date_modified": "2014-05-02T00:00:00-04:00"
    },
    {
      "id": "https://joshdick.net/2014/04/12/configuring_ssh_and_scp_sftp_on_dsm_5.0_for_synology_diskstations.html",
      "title": "Configuring SSH and SCP/SFTP on DSM 5.0 for Synology DiskStations",
      "summary": "Because geeky toys never work quite right out of the box.",
      "content_html": "<h2 id=\"introduction\">Introduction</h2><p>After a few years of waffling back and forth over whether I really needed a NAS, I finally decided to buy one. After doing some research, the option that seemed best for my needs was the <a href=\"http://www.synology.com/en-global/products/overview/DS214+\">Synology DS214+</a>. Synology DiskStation NASes run a Linux-based operating system called Synology DiskStation Manager (DSM). Through sheer dumb luck, I happened to purchase the NAS exactly one month after the release of a new major version of the software, DSM 5.0. The NAS was a breeze to set up, including the including the installation of the two <a href=\"http://www.wdc.com/en/products/products.aspx?id=810\">3 terabyte Western Digital Red hard drives</a> I bought for it.</p><p>In general, the NAS&#8217;s hardware and software are both great quality, but I ran into some issues after trying to interact with the NAS via SCP/SFTP. This article explains how to get SCP/SFTP working properly in DSM 5.0, exclusively using the stock software. This article assumes a basic knowledge of Linux and the DSM web interface, and thus has a corresponding level of detail. As far as I know, this information should apply to any Synology NAS running DSM 5.0, and was tested with DSM 5.0-4458 Update 2.</p><h2 id=\"enabling-services\">Enabling Services</h2><p>DSM 5.0 includes two independent groups of service settings for SSH and SCP/SFTP.</p><p>Enable the SSH service by checking the Control Panel &#8594; &#8220;Terminal &amp; SNMP&#8221; menu &#8594; &#8220;Terminal&#8221; tab &#8594; &#8220;Enable SSH service&#8221; checkbox.</p><p>Enable the SFTP service (not to be confused with FTPS!) by checking the Control Panel &#8594; &#8220;File Services&#8221; menu &#8594; &#8220;FTP&#8221; tab &#8594; &#8220;SFTP&#8221; group &#8594; &#8220;Enable SFTP service&#8221; checkbox.</p><h2 id=\"enabling-ssh-users\">Enabling SSH Users</h2><p>At this point, you should be able to successfully SSH to your NAS when authenticating as <code class=\"highlighter-rouge\">root</code> or <code class=\"highlighter-rouge\">admin</code>. Both users will have the password you chose for <code class=\"highlighter-rouge\">admin</code> during setup. By default, those are the only two users that will be able to log in via SSH.</p><p>If you&#8217;d like to enable SSH for other users, SSH in as root, and edit the file <code class=\"highlighter-rouge\">/etc/passwd</code> with vi. Each user has a corresponding line in this file, and a user&#8217;s shell setting appears at the end of a given line, after the last colon. Any user that has the the default shell setting <code class=\"highlighter-rouge\">/sbin/nologin</code> won&#8217;t be able to log in via SSH. To enable SSH for a given user, change their shell setting to match the shell setting for the root and admin users, which should be <code class=\"highlighter-rouge\">/bin/sh</code>. Be careful when editing the <code class=\"highlighter-rouge\">/etc/passwd</code> file; for our purposes here, you should only change the shell setting that appears after the last colon on a given line.</p><h2 id=\"enabling-the-user-home-service\">Enabling the User Home Service</h2><p>Upon SSHing in as any user besides <code class=\"highlighter-rouge\">root</code>, you might see a warning message (this example is for the &#8220;admin&#8221; user):</p><div class=\"highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>Could not chdir to home directory /var/services/homes/admin: No such file or directory</code></pre></div></div><p>This warning happens because home directories are controlled by DSM&#8217;s &#8220;user home service&#8221;, which is disabled by default. To prevent the error, enable the user home service by checking the Control Panel &#8594; &#8220;User&#8221; menu &#8594; &#8220;Advanced&#8221; tab &#8594; &#8220;User Home&#8221; group &#8594; &#8220;Enable user home service&#8221; checkbox.</p><p>I recommend enabling the user home service even if you don&#8217;t plan on using home directories, since leaving it disabled may cause some programs that rely on SCP/SFTP (<code class=\"highlighter-rouge\">rsync</code>, etc) to abort with errors, regardless of which directory you&#8217;re trying to manipulate.</p><p>By default, a given user&#8217;s home directory is located at <code class=\"highlighter-rouge\">/volume1/homes/username</code>.</p><h2 id=\"fixing-home-directory-permissions-for-ssh-public-key-authentication\">Fixing Home Directory Permissions for SSH Public Key Authentication</h2><p>If you plan to use SSH public key authentication for a given user, the default permissions on user&#8217;s home directories will prevent that. Making the permissions more restrictive (doing a <code class=\"highlighter-rouge\">chmod 755</code> on a user&#8217;s home directory as <code class=\"highlighter-rouge\">root</code>) will allow SSH public key authentication to work properly. Of course, the user&#8217;s <code class=\"highlighter-rouge\">~/.ssh</code> folder and <code class=\"highlighter-rouge\">~/.ssh/authorized_keys</code> file also need to have the correct permissions (<code class=\"highlighter-rouge\">chmod 700</code> and <code class=\"highlighter-rouge\">chmod 644</code>, respectively.)</p><h2 id=\"the-finish-line\">The Finish Line</h2><p>After performing all of the aforementioned configuration tweaks, you should now have a painless SSH and SCP/SFTP experience with your Synology DiskStation NAS.</p><p>One final tip: I&#8217;ve determined through experimentation that shared folders are served relative to the filesystem root (<code class=\"highlighter-rouge\">/shared_folder</code>) when accessing the NAS via SFTP, but are served relative to the volume folder (<code class=\"highlighter-rouge\">/volume1/shared_folder</code>) when using SCP. If specifying paths one way doesn&#8217;t work, try the other way.</p>",
      "url": "https://joshdick.net/2014/04/12/configuring_ssh_and_scp_sftp_on_dsm_5.0_for_synology_diskstations.html",
      "tags": [
        "administration",
        "linux",
        "synology"
      ],
      "date_published": "2014-04-12T00:00:00-04:00",
      "date_modified": "2014-04-12T00:00:00-04:00"
    },
    {
      "id": "https://joshdick.net/2014/02/01/everyday_carry.html",
      "title": "Everyday Carry",
      "summary": "What's in your pockets right now?",
      "content_html": "<p>What&#8217;s in your pockets right now?</p><p>Maybe you have a bag with you, what&#8217;s in there?</p><p>You may not have given too much thought to the things you carry around every day, but there is a term dedicated to the concept: &#8220;everyday carry&#8221;, or EDC.</p><p><a href=\"http://en.wikipedia.org/wiki/Everyday_carry\">Wikipedia defines everyday carry</a> better than I ever could (selections edited):</p><blockquote>  <p>Everyday carry refers to a small collection of tools, equipment and supplies that are carried on a daily basis to assist in tackling situations ranging from the mundane to the disastrous.</p>  <p>The term EDC also refers to the philosophy or spirit of &#8220;preparedness&#8221; that goes along with the selection and carrying of these items. Implicit in the term is the sense that an EDC is an individual&#8217;s personal selection of equipment, arrived at after deliberation, rather than a standardized kit.</p>  <p>EDC items normally fit in pockets or a small pack, and/or are attached to clothing such as a belt. Emphasis is placed on the usefulness, accessibility and reliability of these items.</p></blockquote><p>EDC is a hobby of sorts, so it shouldn&#8217;t be surprising that there <a href=\"http://www.everydaycommentary.com\">are</a> <a href=\"http://everyday-carry.com/\">many</a> <a href=\"http://thenewartemis.com\">blogs</a> and even <a href=\"http://edcforum.com\">entire communities</a> dedicated to the concept.</p><p>I&#8217;ve always loved gadgets of all kinds, and thus gave lots of thought to my EDC long before I first heard the term.</p><p>Before reading any further, you should know that I don&#8217;t consider myself to be an expert in any of the topics I&#8217;m going to mention, just someone who is enthusiastic about EDC and who has done a fair bit of research. It&#8217;s possible that there could be inaccuracies in what I&#8217;ve written here; if you notice any, please <a href=\"http://joshdick.net\">tell me</a>! My hope in writing this is to get you to think about your EDC and to offer some examples and resources along the way.</p><h2 id=\"why-care-about-everyday-carry\">Why Care About Everyday Carry?</h2><p>My mentality has a lot to do with what <a href=\"http://dcurt.is/the-best\">Dustin Curtis refers to as &#8220;The Best&#8221;</a>. Here are some relevant excerpts:</p><blockquote>  <p>&#8220;The best&#8221; isn&#8217;t necessarily a product or thing. It&#8217;s the reward for winning the battle fought between patience, obsession, and desire. It takes an unreasonably long amount of time to find the best of something. It requires that you know everything about a product&#8217;s market, manufacture, and design, and that you can navigate deceptive pricing and marketing. It requires that you find the best thing for <em>yourself</em>, which means you need to know what actually matters to you.</p>  <p>If you&#8217;re an unreasonable person, trust me: the time it takes to find the best of something is completely worth it. It&#8217;s better to have a few fantastic things designed for you than to have many untrustworthy things poorly designed to please everyone. The result—being able to blindly trust the things you own—is intensely liberating.</p></blockquote><p>From an EDC perspective, &#8220;the best&#8221; doesn&#8217;t necessarily mean &#8220;the most expensive&#8221; or &#8220;the flashiest&#8221;. To me, it means that each individual item in a person&#8217;s EDC is the ideal realization of that item <em>for that person</em>. It also means that all of the items in a person&#8217;s EDC should cohesively complement each other as the best possible EDC <em>for that person</em>. It means that the things a person carries with them every day should <em>deserve</em> to be carried every day.</p><p>For example, if you carry a wallet, is your wallet really &#8220;the best&#8221; wallet for you? Is it a <a href=\"http://www.youtube.com/watch?v=yoPf98i8A0g\">George Costanza wallet</a> that just needs to be cleaned out? Or maybe your wallet is bursting at the seams with plastic cards, and carrying a separate cardholder would make more sense? As another example, maybe finding your keys when you get home always ends up being an adventure in your bag, and then you end up fumbling with them in the dark? Could a better keychain and a small flashlight remove that small amount of frustration from your everyday life?</p><p>I am obsessed with removing frustrations like these, and that&#8217;s why I care about finding &#8220;the best&#8221; EDC for myself. I try to keep my EDC as minimal as possible while still being functional. Being the gadget lover that I am, I also enjoy taking the time to put some thought and research into everything I carry.</p><p>All of that said, there&#8217;s no such thing as the &#8220;perfect EDC&#8221;. A person&#8217;s EDC will naturally change and evolve over time to meet their needs, always working towards &#8220;the best&#8221; EDC for them. What&#8217;s more, one person&#8217;s ideal EDC certainly isn&#8217;t going to be ideal for everyone. If you work in an office like I do, your EDC is probably going to look very different than that of someone who, for example, works on oil rigs.</p><h2 id=\"my-everyday-carry\">My Everyday Carry</h2><p>Seeing others&#8217; EDC is both informative and fascinating, not only because you can draw inspiration for your own EDC, but also because it&#8217;s interesting to see the stories that people&#8217;s possessions tell about them.</p><p>To that end, I&#8217;ll go through my own current EDC in detail and explain some of the thinking behind it. Even so, my EDC is always changing and evolving over time. While I certainly carry different things or sets of things depending on the situation (for example, I bring a laptop messenger bag to work), I consider my &#8220;EDC proper&#8221; to be the things I carry almost all of the time, regardless of the situation or context.</p><p>Without any further ado, here&#8217;s what it looks like:</p><p><img src=\"/asset/post_assets/2014/02/edc_overall.jpg\" alt=\"Josh's EDC\" /></p><p>So, what is all that stuff?</p><h3 id=\"wallet\">Wallet</h3><p>I&#8217;m not a fan of money clips, so I carry a wallet. My wallet is a <a href=\"https://www.etsy.com/listing/165266399/the-park-sloper-senior-wallet-notebook\">Park Sloper Senior from One Star Leather Goods</a>. I carry a few cards including credit/debit cards, insurance cards, and my driver&#8217;s license. I also like carrying paper money if I happen to need it, but I avoid carrying coins. One Star Leather Goods is a one-man operation running out of Los Angeles, CA. This is what appears on <a href=\"https://www.etsy.com/people/onestarleathergoods\">their Etsy people page</a>:</p><blockquote>  <p>&#8220;Buy good things, own them for a long time.&#8221;</p>  <p>That napkin wisdom is borrowed from the internets and it&#8217;s message is the basis of my philosophy. Today&#8217;s &#8220;buy it cheap then throw it away&#8221; consumer environment is unsustainable and largely irresponsible. Do your research, find something that suits your needs and is well made, pay a fair price for it and be rewarded by years of happy use. Support your local independent craftsman over a big box retailer and search out unique and well made items.</p>  <p>While I believe that &#8220;the best things in life aren&#8217;t things,&#8221; the things that you do need should be pleasurable to use and pleasurable to look at: simple, functional, durable and beautiful. I have a somewhat obsessive desire for perfection and put a high value on items that are designed and executed to the highest standards&#8230;</p></blockquote><p>Sound familiar?</p><p>I love the Park Sloper Senior because it looks classy, it&#8217;s an extremely high quality handmade piece, and it holds my cash and cards while also accommodating a notebook and pen, all without being too bulky. Its larger size makes it strictly a &#8220;jeans back pocket&#8221; wallet, which isn&#8217;t for everyone, but One Star does make a <a href=\"https://www.etsy.com/listing/113350221/wallet-notebook-pen-the-park-sloper-hand\">smaller, front-pocket-friendly</a> version of the Park Sloper. I like carrying a notebook and pen in order to use the <a href=\"http://www.bulletjournal.com/\">Bullet Journal system</a>, which I&#8217;ve found works well for me—better than any productivity-related iPhone app I&#8217;ve tried. I use a <a href=\"http://fieldnotesbrand.com\">Field Notes 48-page notebook</a> and a <a href=\"http://www.jetpens.com/Uni-Style-Fit-Single-Color-Slim-Pen-Body-Component-Black/pd/5153\">Uni-Ball Style Fit pen</a> with a <a href=\"http://www.jetpens.com/Uni-Style-Fit-Ballpoint-Multi-Pen-Ink-Cartridge-0.7-mm-Black/pd/4767\">0.7mm Jetstream refill</a>. Sometimes, I also carry a <a href=\"http://www.amazon.com/uni-ball-Jetstream-Retractable-Roller-70877/dp/B002FSZP5A/\">0.7mm Uni-Ball Jetstream RT pen</a>. The Park Sloper easily accommodates the slim Style Fit (<a href=\"https://twitter.com/dowdyism/status/422914458147889152\">thanks, Brad!</a>), but the Jetstream RT is too thick to fit into the Park Sloper. Uni-Ball&#8217;s Jetstream series pens are cheap, write smoothly, and are <a href=\"http://thewirecutter.com/reviews/the-best-pen/\">very highly regarded</a>. Most importantly, Jetstream ink dries quickly; as a lefty, ink doesn&#8217;t smear all over my hand when I write.</p><p>Before arriving at the Park Sloper, in the past (going back a few years—I don&#8217;t buy wallets frequently and don&#8217;t want to have to), I&#8217;ve also tried:</p><ul>  <li>An <a href=\"http://obstructures.org/thing/wallet-aluminum-plate/\">Aluminum Plate Wallet from Obstructures</a> which was obviously extremely durable, and had a cool gimmick/novelty factor. In practice, though, it ended up being awkward to quickly access cash and cards, which is an essential feature for a wallet.</li>  <li>A <a href=\"http://bellroy.com/wallets/note-sleeve-wallet\">Note Sleeve wallet from Belroy</a>, which was well-made and not too bulky, but whose lining eventually wore out and bled color onto some of my cards.</li>  <li>A wallet from <a href=\"http://www.saddlebackleather.com/Shop/Wallets\">Saddleback Leather</a>, which was also very high quality, but was too bulky for my taste. It seems to me that most of their practical wallet designs have similar bulkiness problems, and their thinner designs are too minimal.</li>  <li>A <a href=\"http://www.all-ett.com/mens-wallets/nylon-wallet.html\">nylon wallet from All-Ett</a>, which is probably the slimmest wallet you can buy, but which wore out quickly because the material was so thin.</li></ul><h3 id=\"watch\">Watch</h3><p><img src=\"/asset/post_assets/2014/02/edc_watch.jpg\" alt=\"Halios Tropik SS Watch\" /></p><p>I&#8217;ve always loved watches. With today&#8217;s ubiquitous mobile phones, many people no longer bother wearing a watch, but I can&#8217;t picture myself without one. I especially love mechanical watches (as in &#8220;no electricity involved&#8221;), although they certainly don&#8217;t keep time as accurately as quartz watches. I think there&#8217;s something special about keeping a tiny, intricate, dependable machine on your wrist, with you always.</p><p>When it comes to the outward look and design of a watch, I&#8217;m a fan of understated simplicity. I&#8217;ve gone through far too many watches to list here, and wear different ones depending on my mood, but here are my current three favorites:</p><ul>  <li>The watch in the picture is the <a href=\"http://halioswatches.com/tropikss/\">Halios Tropik SS</a>. It&#8217;s a very high-quality piece and a beautiful work of art.</li>  <li>My other go-to watch is the <a href=\"http://technewatches.biz/category.php?id_category=6\">Techné GosHawk</a>, another high-quality piece that&#8217;s more affordable than the Halios.</li>  <li>My &#8220;beater&#8221; watch, which I wear in situations I wouldn&#8217;t want to expose the nicer mechanical watches to, is a <a href=\"http://www.amazon.com/Casio-GWM5610-1-G-Shock-Multi-Band-Digital/dp/B007RWZHXO\">Casio G-Shock GWM5610-1</a>. I love the retro styling, the fact that it&#8217;s solar powered (and hence never needs battery changes), and that it has the ability to set itself using atomic clock radio signals. The watch has been put through its paces and still looks great.</li></ul><p>If you&#8217;re intrigued by mechanical watches but have reservations about buying one, they don&#8217;t necessarily have to break the bank—the <a href=\"http://www.amazon.com/Seiko-SNK809-Automatic-Watch-Canvas/dp/B002SSUQFG/\">Seiko SNK809</a> is a great entry-level automatic (self-winding) mechanical watch. If you want to learn more about the world of watches in general, this <a href=\"http://www.everydaycommentary.com/2013/09/a-watch-primer.html\">excellent primer from Everyday Commentary</a> is a great place to start.</p><h3 id=\"tools-gadgets-and-keys\">Tools, Gadgets, and Keys</h3><p>Tools and gadgets encompass what is probably the largest rabbit hole as far as EDC is concerned; there are an overwhelming number of EDC-related tools—and options for carrying tools—available on the market.</p><h4 id=\"pocket-danglerssuspension-clips\">Pocket Danglers/Suspension Clips</h4><p>Gadgets known as &#8220;pocket danglers&#8221; or &#8220;suspension clips&#8221; are popular among EDC enthusiasts. These gadgets provide a way of attaching tools/keys/other gadgets to them, and hang from a pocket or belt loop. The idea behind them is that they &#8220;suspend&#8221; attached items in the middle of a pocket in order to prevent those items from awkwardly bunching up at the bottom of a pocket. Suspension clips and pocket danglers often double as tools themselves.</p><p>I currently use a <a href=\"http://ttpockettools.blogspot.com/p/pocket-tools.html\">TT PocketTTools 69 Dangler Tool</a>, which doubles as a bottle opener and cap twist assist. Although I don&#8217;t use the twist assist, it&#8217;s handy to always have a bottle opener on my belt loop. I love that the dangler is designed in such a way that its use as a bottle opener isn&#8217;t obstructed by the items attached to it. I&#8217;ve tried a few other danglers/suspension clips in the past:</p><ul>  <li>The <a href=\"http://shop.corterleather.com/products/bottlehook\">Corter Leather Bottle Hook</a>, another bottle-opening belt loop keychain. I really like the Bottle Hook, but the 69 dangler  does a better job of evenly spreading out attached items inside a pocket. The Bottle Hook is also larger than the 69 dangler, which causes attached items to sit comparatively lower in a pocket.</li>  <li>The <a href=\"http://www.gamblemade.com/\">Gamble Made GearPull Dangler</a>, which I <a href=\"https://www.kickstarter.com/projects/872996112/the-gearpull-a-revolutionary-dangler\">backed on Kickstarter</a> on a whim since it looked interesting. Like the 69 Dangler, the GearPull does a decent job of evenly spreading out attached items inside a pocket. Unlike the 69 Dangler, I was constantly afraid that the GearPull would fall off my pants. Its clip mechanism has a large gap that causes it to sit uncomfortably loosely on a pocket (or at least on my pocket.)</li>  <li>The <a href=\"http://www.tecaccessories.com/P-7-Suspension-Clip\">TEC Accessories P-7 Suspension Clip</a>. This clip has the most minimal design of the ones I&#8217;ve listed. At $12 as of this writing, I think the clip is expensive for what it is. It didn&#8217;t hold up well for me in the long term; the steel gradually bent until it had the same looseness problem as the GearPull.</li></ul><p>My tools and gadgets are attached to the 69 dangler using a combination of common split rings and <a href=\"http://www.tecaccessories.com/15-mm-Pico-Gate-Clip-Stainless-Steel\">TEC Accessories 15 mm Pico Gate Clips</a>. All of the attached tools can be easily removed from the dangler without fiddling with split rings. The tiny gate clips perfectly fit into the dangler&#8217;s holes and are used to attach tools that don&#8217;t provide their own detaching/quick release mechanism. All other tools are directly attached to the dangler with split rings.</p><h4 id=\"tools-on-the-69-dangler\">Tools On the 69 Dangler</h4><p><img src=\"/asset/post_assets/2014/02/edc_tools.jpg\" alt=\"Josh's EDC Tools\" /></p><p>From top to bottom, these are the items attached to the 69 dangler:</p><ul>  <li><a href=\"http://www.leatherman.com/20.html\">Leatherman Micra Multi-Tool</a>. The Micra includes a whole bunch of tools but I primarily use its knife and scissors.</li>  <li><a href=\"http://darksucks.com/store_BetaQR.html\">Prometheus Lights Beta-QR in Electroless Nickel</a>. For the money, I believe this is the best keychain flashlight on the market right now. It&#8217;s   very high quality and durable, looks great, has decent light output, uses a <a href=\"http://en.wikipedia.org/wiki/High_CRI_LED_Lighting\">high-CRI emitter</a>, and is powered by a standard AAA battery. It also has an ingeniously simple quick-release mechanism.</li>  <li><a href=\"http://www.countycomm.com/splitpea.htm\">County Comm &#8220;Split Pea&#8221; Peanut Lighter</a>. This lighter is essentially a tiny Zippo; it uses lighter fluid rather than butane. It is comprised of two halves that screw together with an O-ring between them, ensuring that lighter fluid doesn&#8217;t leak or evaporate. I don&#8217;t smoke, but I carry the lighter because it&#8217;s cheap, tiny, interesting, and could be useful in a pinch.</li>  <li><a href=\"http://www.niteize.com/product/DoohicKey-Multi-Tool.asp\">Nite Ize DoohicKey One-Piece Multitool</a>. Its ruler and bottle opener might be redundant among the other tools, but it works great for light prying tasks and for opening boxes. I like its slim profile and the fact that it has its own integrated spring clip. Since it costs about $5, buying one is a no-brainer.</li>  <li><a href=\"http://www.lacie.com/us/products/product.htm?id=10617\">LaCie Porsche Design USB Key</a>. I&#8217;ve  used, abused, and destroyed more flash drives over the years than I can count. Before this flash drive, I carried the <a href=\"http://www.kingston.com/us/usb/personal_business#dtse9h\">Kingston Data Traveler SE9</a>. Both flash drives are slim, reasonably priced, and have metal enclosures that can generally survive being knocked around with the other tools on the dangler. Although it&#8217;s not the fastest flash drive on the market, the LaCie unit is USB 3.0 while the Kingston is USB 2.0. Also, the Kingston&#8217;s USB circuit board is simply glued in to its metal enclosure, and the glue eventually failed for me, yielding an empty metal skeleton along with a bare circuit board. I haven&#8217;t had any issues with the LaCie so far.</li></ul><h3 id=\"miscellaneous\">Miscellaneous</h3><p>There are a few other things I carry that don&#8217;t need much elaboration:</p><ul>  <li><a href=\"http://www.burtsbees.com/Beeswax-Lip-Balm/11099-00-1,default,pd.html?cgid=lipbalm&amp;start=2&amp;q=#start=2\">Burt&#8217;s Bees Beeswax Lip Balm</a>. I have perpetually dry lips year round, and the &#8220;cool burn&#8221; sensation of beeswax lip balm helps. I always peel the label off the Burt&#8217;s Bees stick whenever I start using a new one; otherwise, excess adhesive around the label collects pocket lint and looks gross.</li>  <li>Two <a href=\"http://www.epipen.com\">EpiPens</a> along with <a href=\"http://www.benadryl.com\">Benadryl</a> tablets in a <a href=\"http://www.kozyepi.com\">Kozyepi case</a> (not pictured). I have a nut allergy and carry these for emergency use.</li>  <li><a href=\"http://www.apple.com/iphone-5s/\">Apple iPhone 5S</a> smartphone in a black <a href=\"http://store.magpul.com/product/MAG452/125\">Magpul Field Case</a>. My iPhone is like a third arm for me. The Magpul case is reasonably priced, excellent quality, and fits the phone like a glove. Magpul also makes a similar, beefier case called the <a href=\"http://store.magpul.com/product/MAG454/125\">Bump Case</a>, but I don&#8217;t need the additional protection or bulk. I previously used <a href=\"http://store.apple.com/us/product/MF041LL/A/iphone-5s-case-brown\">Apple&#8217;s own leather iPhone 5S case</a> in black, and while the case was well constructed, the leather scratched very easily.</li>  <li>The <a href=\"http://www.misfitwearables.com\">Misfit Shine</a> fitness tracker. It&#8217;s an interesting little device. Because I only use it as a pedometer, the fact that I carry an iPhone 5S that works with <a href=\"http://david-smith.org/\">David Smith&#8217;s</a> excellent, free <a href=\"https://itunes.apple.com/us/app/pedometer++/id712286167\">Pedometer++ App</a> makes the Shine somewhat redundant. The Shine&#8217;s automatic iPhone sync also doesn&#8217;t work reliably for me. Despite all of that, it fits in the coin pocket of my jeans and certainly isn&#8217;t weighing me down or getting in the way, so it&#8217;s still part of my EDC.</li>  <li>An orange <a href=\"http://www.monkeyknuts.com/Knut-Buster-Keychain-p/buster.htm\">Monkey Knuts Knut Buster Keychain</a> with five keys. <a href=\"http://et-designs.com\">Gadgets</a> <a href=\"http://tacticalkeychains.com/\">for</a> <a href=\"http://www.cineik.com/k-addict.html\">carrying</a> <a href=\"http://mykeyflip.com/\">keys</a> <a href=\"http://key-disk.com/\">abound</a> <a href=\"http://mykeysmart.com/\">on</a> <a href=\"https://www.kickstarter.com/projects/2083673703/alpha-the-worlds-best-keychain\">Kickstarter</a> <a href=\"http://key-disk.com/\">and</a> <a href=\"http://www.orbitkey.com/\">elsewhere</a>. I&#8217;ve realized over time that I don&#8217;t really need to keep keys with all the time, so I&#8217;ve more or less ignored most key-carrying solutions. One notable exception for me is the <a href=\"http://bladekey.com/\">BladeKey Bolt</a>, which worked great when I regularly included keys as part of my EDC. The large monkey fist knot on the Knut Buster I use now makes it easy to grab my keys when I actually do need them.</li></ul><p>&#8230;And there you have it: my EDC explained in painstaking detail. As you can see, I&#8217;ve put a lot of thought (and over time, a pretty penny) into my EDC, and it is constantly evolving.</p><h2 id=\"other-thoughts-on-tools-and-gadgets\">Other Thoughts on Tools and Gadgets</h2><p>There are several types/categories of tools I used to carry that have either been displaced by what I&#8217;m carrying now, or that I discovered I can get along just fine without. There are hundreds or even thousands of tools available on the market in each of these categories, made by both production manufacturers and smaller, custom manufacturers or individuals.</p><p>Needless to say, researching and choosing tools in these categories can easily be overwhelming.</p><p>Most of these categories have Internet communities dedicated to them, which can help with research. Although I don&#8217;t participate directly in most of the communities I&#8217;m going to mention, I&#8217;ve discovered them through Google and other Internet EDC research.</p><h3 id=\"flashlights\">Flashlights</h3><p>I&#8217;ve carried flashlights for a very long time. I use them constantly, whether it&#8217;s for doing something outdoors at night or for being able to see better in tight spots behind computers. For a while, I liked carrying a pocket-sized clip-on flashlight as part of my EDC, but I eventually realized clip-on flashlights generally produced more light than I needed in most situations, and therefore weren&#8217;t worth the space they occupied in my pocket.</p><p>Before I added the aforementioned <a href=\"http://darksucks.com/store_BetaQR.html\">Prometheus Lights Beta-QR</a> to my EDC, I carried a <a href=\"http://www.velenodesigns.com/?p=168\">Veleno Designs/Steve Ku Quantum D2</a>. The D2 is <strong>tiny</strong>, which is both a good and bad thing. Its small size makes it easy to carry, and it has great light output for its size. However, it uses an obscure type of rechargeable lithium ion battery (which needs to be recharged fairly often due to its size.) I ended up switching to the Beta-QR since it&#8217;s still a manageable size and uses a standard AAA battery (NiMH rechargeable or alkaline), both of which are much more readily available and have higher capacities than the D2&#8217;s battery, and therefore less likely to let me down when I need to rely on the light.</p><p>If you want to do more research on flashlights, the predominant flashlight community on the Internet is <a href=\"http://www.candlepowerforums.com\">Candle Power Forums</a>. When researching flashlights, pay close attention to the type of batteries they use. A flashlight&#8217;s batteries give you a general idea of its size and runtime. Additionally, some flashlights use slightly less common types of batteries such as <a href=\"https://www.google.com/search?q=cr123\">CR123 cells</a>, which could either be acceptable or negative depending on your needs.</p><p>Although there are dozens of flashlight manufacturers, some popular manufacturers in no particular order are <a href=\"http://www.foursevens.com\">4Sevens</a>, <a href=\"http://www.fenixlight.com\">Fenix</a>, <a href=\"http://www.eagletac.com\">EAGTAC</a>, and <a href=\"http://sunwayman.com\">Sunwayman</a>.</p><h3 id=\"knives\">Knives</h3><p>I don&#8217;t carry a knife for self-defense purposes; instead I carry one simply because a knife is handy to have around. I primarily use knives for opening bubble mailer envelopes, for opening and breaking down boxes, and for cutting cable ties. In a similar vein to flashlights, I&#8217;ve gradually minimized my knife carry over time. (Do you see a trend here?) I used to carry  a folding knife but eventually realized I generally didn&#8217;t need a folding knife on my person at all times. In combination, the aforementioned <a href=\"http://www.niteize.com/product/DoohicKey-Multi-Tool.asp\">Nite Ize DoohicKey</a> and <a href=\"http://www.leatherman.com/20.html\">Leatherman Micra</a> work well for 90% of my cutting tasks. I still keep folding knives around (though not as part of my EDC) for everything else.</p><p>There&#8217;s a lot to learn about knives, including types of blade steels and shapes, handle (&#8220;scale&#8221;) materials, locking mechanisms, and stropping and sharpening tools and techniques. As with flashlights, there are Internet knife communities such as <a href=\"http://www.bladeforums.com\">Blade Forums</a> and <a href=\"http://www.knifeforums.com\">Knife Forums</a> that can help with further research. Also as with flashlights, there are dozens of knife manufacturers. Some popular knife manufacturers, again in no particular order, include <a href=\"http://sogknives.com\">SOG Knives</a>, <a href=\"http://www.crkt.com/\">Columbia River Knife and Tool (CRKT)</a>, <a href=\"http://www.spyderco.com\">Spyderco</a>, <a href=\"http://kershaw.kaiusaltd.com/\">Kershaw Knives</a>, <a href=\"http://www.benchmade.com\">Benchmade</a>, and <a href=\"http://www.boker.de/us/\">B&#246;ker</a>.</p><p>Although I no longer regularly EDC a folding knife, I still have some favorites:</p><ul>  <li>The <a href=\"http://www.spyderco.com/catalog/details.php?product=766\">Spyderco Techno</a> for its superior build quality, materials, and surprising carryability and ergonomics in spite of its relative thickness.</li>  <li>The <a href=\"http://www.sogknives.com/flash-i-straight-edge.html\">SOG Knives Flash I Straight Edge</a>  for its small size, its pocket clip that carries very deeply in a pocket so it won&#8217;t fall out or get caught on something, and its spring-assisted opening, all while being affordable at around $30.</li>  <li>The <a href=\"http://www.benchmade.com/products/585\">Benchmade 585 BK Mini-Barrage</a>, which I impulse purchased in person from a dealer without doing any prior research, because I got it at a great price, it oozes quality, and it has a very solid-feeling axis locking mechanism.</li>  <li>The <a href=\"https://www.boker.de/us/pocket-knife/boker-plus/tactical-knife/01BO531.html\">B&#246;ker Keycom</a>, which is probably the smallest frame-locking knife on the market today. It&#8217;s decent quality, feels right at home on a keychain, and is very affordable at about $15. This was the last item to be removed from my EDC (I swapped it out for the <a href=\"http://www.leatherman.com/20.html\">Leatherman Micra</a>.)</li>  <li>The <a href=\"http://www.spyderco.com/catalog/details.php?product=374\">Spyderco Bug</a>, because it&#8217;s both cheap and extremely small while still being useful. That said, it&#8217;s a bit hard to open because of its size.</li></ul><h3 id=\"multitools\">Multitools</h3><p>I personally categorize multitools into two distinct groups. The first group is what I would call &#8220;conventional&#8221; multitools such as <a href=\"http://www.leatherman.com\">Leatherman&#8217;s folding tools</a> or <a href=\"http://www.victorinox.com\">Victorinox Swiss Army knives</a>. (I believe Swiss Army knives are better categorized as multitools rather than knives, but it&#8217;s a matter of opinion.) The second group is what has come to be known as &#8220;one-piece multitools&#8221;, or &#8220;OPMTs&#8221;. OPMTs are generally milled from a single piece of metal and have no moving parts.</p><p>The predominant Internet multitool community is <a href=\"http://multitool.org\">multitool.org</a>.</p><p>Similar to my thinking behind carrying a knife, I think multitools are simply handy to have around. Many multitools have an integrated knife which may be fine for your needs, and could eliminate the need to carry a separate, dedicated knife, which is what happened in my case.</p><p>I&#8217;ve carried a few different multitools across both types, and in fact, still do: the <a href=\"http://www.leatherman.com/20.html\">Leatherman Micra</a>, the <a href=\"http://www.niteize.com/product/DoohicKey-Multi-Tool.asp\">Nite Ize DoohicKey</a>, and the <a href=\"http://ttpockettools.blogspot.com/p/pocket-tools.html\">TT PocketTTools 69 Dangler Tool</a>. (I would classify the DoohicKey as an OPMT even though it&#8217;s not technically a single piece of metal.)</p><p>That said, I&#8217;ve done the least amount of experimenting in the multitool category.</p><p>For a while I carried a <a href=\"https://www.swissarmy.com/us/product/Swiss-Army-Knives/Category/Everyday/Rambler/54031\">Victorinox Rambler</a> which I loved as a multitool, but which ended up getting beat up by the rest of my EDC gadgets to the point that it started bothering me. I also tried carrying a larger <a href=\"http://www.leatherman.com/9.html\">Leatherman Sidekick</a>, which is reasonably affordable at about $30, but it ended up being too large and cumbersome for my own EDC purposes. I still keep it in the laptop bag I take with me to work. (If you like the Sidekick, you might also want to take a look at its brother, the <a href=\"http://www.leatherman.com/831426.html\">Leatherman Wingman</a>.)</p><p>In terms of OPMTs, <a href=\"http://www.atwoodknives.com/\">Atwood Knife and Tool</a> is probably the biggest name in the game. Peter Atwood makes and sells his own tools in batches on <a href=\"http://atwoodknives.blogspot.com\">his blog</a>. They usually sell out within minutes, and are often <a href=\"http://www.ebay.com/sch/i.html?_odkw=atwood+tool&amp;_osacat=0&amp;_from=R40&amp;_nkw=atwood+tool&amp;_sacat=0\">resold with a large premium on eBay</a>. I&#8217;ve been lucky enough to be able to purchase a few OPMTs directly from Peter. While his tools are extremely well made, I no longer carry them as part of my EDC because I didn&#8217;t use them often enough to justify their size and weight (and no, I still have them—I haven&#8217;t resold them on eBay!)</p><p>Many other individuals make and sell OPMTs, such as the aforementioned <a href=\"http://ttpockettools.blogspot.com\">TT PockeTTools</a>, which I understand is also a single-man operation. Various bigger companies also sell OPMTs. Leatherman <a href=\"http://www.leatherman.com/s/leatherman/pockettools\">has its own line</a>, and Gerber sells the <a href=\"http://www.gerbergear.com/Essentials/Tools/Shard-Keychain-Tool_22-01769\">Shard Keychain Tool</a>, which is extremely affordable at about $6.</p><h2 id=\"in-conclusion\">In Conclusion&#8230;</h2><p>I&#8217;ve given you a detailed tour of my EDC, and I&#8217;ve explained the thinking behind some of my past and present EDC choices. I&#8217;ve also pointed out some resources that you can use to do your own EDC research.</p><p>EDC as a hobby can certainly be interesting and fun in and of itself, but don&#8217;t take it <em>too</em> seriously—lots of EDC experimentation can get expensive quickly! Take some time to think about what works for you and what could be made better, then experiment.</p><p>Ultimately, your EDC is an expression of yourself, and should augment your day-to-day life. Get out there and live it!</p><hr /><p><em>2014-02-02: Added information about the Uni-Ball Style Fit pen that was accidentally omitted.</em></p>",
      "url": "https://joshdick.net/2014/02/01/everyday_carry.html",
      "tags": [
        "edc",
        "gadgets"
      ],
      "date_published": "2014-02-01T00:00:00-05:00",
      "date_modified": "2014-02-01T00:00:00-05:00"
    },
    {
      "id": "https://joshdick.net/2013/10/10/forecast.io_weather_on_the_mac_desktop.html",
      "title": "Forecast.io Weather on the Mac Desktop",
      "summary": "Because I could.",
      "content_html": "<p>When I saw that the excellent weather service <a href=\"http://forecast.io\">forecast.io</a> released a feature called <a href=\"http://blog.forecast.io/forecast-embeds/\">Forecast Embeds</a>, I thought it would be neat to show the widget directly on my Mac&#8217;s desktop. I whipped up a solution that ended up looking like this:</p><p><img src=\"/asset/post_assets/2013/10/forecast_weather_example.png\" alt=\"forecast.io Weather Example\" /></p><p>Read on to learn how get Forecast Embeds up and running on your Mac&#8217;s desktop.</p><h2 id=\"dependencies\">Dependencies</h2><ul>  <li><a href=\"http://projects.tynsoe.org/en/geektool/\">GeekTool</a>, <a href=\"http://mutablecode.com/apps/nerdtool.html\">NerdTool</a>, or any other tool that can display an image directly on the desktop</li>  <li>The following command-line utilities, all of which are available via <a href=\"http://brew.sh\">Homebrew</a> on OS X:    <ul>      <li><a href=\"http://www.paulhammond.org/webkit2png/\">webkit2png</a></li>      <li><a href=\"http://www.imagemagick.org/script/index.php\">ImageMagick</a></li>    </ul>  </li>  <li><a href=\"https://gist.github.com/joshdick/6919331\"><code class=\"highlighter-rouge\">forecast_snapshot.sh</code></a>, a simple shell script I wrote</li></ul><h2 id=\"how-it-works\">How it Works</h2><ul>  <li>On a reasonably slow interval, the <code class=\"highlighter-rouge\">forecast_snapshot.sh</code> script automatically takes a screenshot of the Forecast Embeds page with the latest weather data, and stores that screenshot on the filesystem. It then does some image processing on the screenshot to make it look more attractive when overlaid onto a wallpaper.</li>  <li>On a reasonably fast interval, the screenshot is automatically [re-]displayed on the desktop.</li></ul><h2 id=\"getting-it-going\">Getting it Going</h2><ol>  <li>    <p>Install the dependencies listed above, and grab a copy of the <a href=\"https://gist.github.com/joshdick/6919331\"><code class=\"highlighter-rouge\">forecast_snapshot.sh</code> script</a>.</p>  </li>  <li>    <p>Edit the variables in <code class=\"highlighter-rouge\">forecast_snapshot.sh</code> to your liking.</p>    <p>You&#8217;ll need to provide the latitude/longitude for your area, which you can find using a service like <a href=\"http://www.latlong.net/\">latlong.net</a>. There are several available options that aren&#8217;t part of the script, but can be added to the Forecast Embeds URL in the script. See the <a href=\"http://blog.forecast.io/forecast-embeds/\">Forecast Embeds documentation</a> for details.</p>  </li>  <li>    <p>Run <code class=\"highlighter-rouge\">forecast_snapshot.sh</code> and verify that the image file <code class=\"highlighter-rouge\">/tmp/weather-full.png</code> is created on your system, and contains the font/text/weather information you expect.</p>  </li>  <li>    <p>Embed the <code class=\"highlighter-rouge\">/tmp/weather-full.png</code> image on your desktop using GeekTool (or your tool of choice.) I configured GeekTool to refresh the image every minute.</p>  </li>  <li>    <p>Make <code class=\"highlighter-rouge\">forecast_snapshot.sh</code> automatically run on an interval (15 minutes seems reasonable). You can do this via GeekTool or <code class=\"highlighter-rouge\">launchd</code>.</p>  </li>  <li>    <p>You&#8217;re done.</p>  </li></ol><h2 id=\"final-thoughts\">Final Thoughts</h2><p>Forecast Embeds are simple web pages that include animations, so the sceenshots that are taken will inevitably catch the animations mid-frame. If you prefer to keep the animations working, you can use something like <a href=\"http://fluidapp.com/\">Fluid</a> to float the Forecast Embeds page on your desktop as its own app, but it won&#8217;t be transparent and thus won&#8217;t blend in with your wallpaper.</p>",
      "url": "https://joshdick.net/2013/10/10/forecast.io_weather_on_the_mac_desktop.html",
      "tags": [
        "automation",
        "mac",
        "tools"
      ],
      "date_published": "2013-10-10T00:00:00-04:00",
      "date_modified": "2013-10-10T00:00:00-04:00"
    }
  ]
}