FEED Validator

for Atom and RSS and KML

Congratulations!

This is a valid Atom 1.0 feed.

Recommendations

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

line 70, column 0: style attribute contains potentially dangerous content: color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4; (5 occurrences) [help]
```
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-col ...
```
line 70, column 0: content should not contain data-lang attribute (7 occurrences) [help]
```
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-col ...
```

Source: https://joshdick.net/writing.xml

<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Josh Dick » Writing</title>
<subtitle>Thoughts on technology and more from Josh Dick.</subtitle>
<link rel="self" type="application/atom+xml" href="https://joshdick.net/writing.xml" />
<link rel="alternate" type="text/html" href="https://joshdick.net/" />
<id>https://joshdick.net/</id>
<updated>2024-03-19T04:25:30-04:00</updated>
<author>
<name>Josh Dick</name>
<uri>https://joshdick.net/</uri>
</author>
<rights>© 2005-2024, Josh Dick</rights>
<entry>
<title>Tabclip: A Web Browser Extension</title>
<link rel="alternate" type="text/html" href="https://joshdick.net/2018/05/19/tabclip_a_web_browser_extension" />
<id>tag:joshdick.net,2018:/2018/05/19/tabclip_a_web_browser_extension.html</id>
<published>2018-05-19T00:00:00Z</published>
<updated>2018-05-19T00:00:00Z</updated>
<author>
<name>Josh Dick</name>
<uri>https://joshdick.net</uri>
</author>
<content type="html" xml:lang="en">
<![CDATA[<blockquote>Copy browser tabs to (and create browser tabs from) your clipboard.</blockquote>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.
<img src="/post_assets/2018/05/tabclip_screenshot.png" alt="Tabclip Screenshot">
The “Copy” button (and associated options) copy tab URLs to your clipboard.
The “Paste” button attempts to find all URLs that appear in your clipboard, then opens each URL in a new browser tab.
That’s it!
Tabclip is heavily inspired by Vincent Paré’s <a href="https://chrome.google.com/webstore/detail/copy-all-urls/djdmadneanknadilpjiknlnanaolmbfk">“Copy All Urls” 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 “Copy All Urls” Chrome extension.
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’s source code is available at <a href="https://github.com/joshdick/tabclip">its GitHub page</a>.
]]>
</content>
</entry><entry>
<title>My Git Prompt for Zsh, Revisited</title>
<link rel="alternate" type="text/html" href="https://joshdick.net/2017/06/08/my_git_prompt_for_zsh_revisited" />
<id>tag:joshdick.net,2017:/2017/06/08/my_git_prompt_for_zsh_revisited.html</id>
<published>2017-06-08T00:00:00Z</published>
<updated>2017-06-08T00:00:00Z</updated>
<author>
<name>Josh Dick</name>
<uri>https://joshdick.net</uri>
</author>
<content type="html" xml:lang="en">
<![CDATA[<blockquote>An elegant, bird’s-eye view of your Git repositories.</blockquote><blockquote>
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>zsh</code> Git prompt, which showed Git information on the right-hand side using <code>zsh</code>’s <code>RPS1</code> prompt.
Update on May 30, 2018: Updated the Git prompt code to be slightly cleaner.
</blockquote>
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>zsh</code></a> for about 4½ years, I decided it was time for some cosmetic tweaks and code cleanup.
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 “commits ahead/behind” counts.
Like the previous prompt, this prompt:
<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 “traffic light” representation of <code>git status</code>:
<ul>
<li>Red (●) means there are untracked changes.</li>
<li>Yellow (●) means there are unstaged changes.</li>
<li>Green (●) means there are staged changes.</li>
</ul>
</li>
</ul>
Here’s a contrived example that demonstrates how the prompt works (click on it for a larger version):
<img src="/post_assets/2017/06/git_zsh_prompt.png" alt="Git Prompt for zsh">
While creating this updated version of my Git prompt, I looked into implementing it using <code>zsh</code>’s built-in <a href="http://zsh.sourceforge.net/Doc/Release/User-Contributions.html#Version-Control-Information"><code>vcs-info</code> mechanism</a>, but attempting to use it only made the code more complicated and cumbersome, so I decided against it.
I use this prompt in combination with the excellent <a href="https://github.com/sickill/git-dude"><code>sickill/git-dude</code> Git commit notifier</a>, which automatically keeps repositories of your choosing up to date, and which will periodically trigger appropriate “commits behind” counts in the prompt when working with those repositories. This solution works great for my needs, but if you’d prefer a <code>zsh</code> Git prompt that can keep repositories up to date on its own, check out <a href="https://github.com/sindresorhus/pure"><code>sindresorhus/pure</code></a>.
Here’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>.zshrc</code></a>.)
You can paste this code directly into your <code>.zshrc</code>, or save it in its own file and source that file in your <code>.zshrc</code>.
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-zsh" data-lang="zsh">setopt prompt_subst
autoload -U colors && colors # Enable colors in prompt

# Echoes a username/host string when connected over SSH (empty otherwise)
ssh_info() {
[[ "$SSH_CONNECTION" != '' ]] && echo '%(!.%{$fg[red]%}.%{$fg[yellow]%})%n%{$reset_color%}@%{$fg[green]%}%m%{$reset_color%}:' || echo ''
}

# Echoes information about Git repository status when inside a Git repository
git_info() {

 # Exit if not inside a Git repository
 ! git rev-parse --is-inside-work-tree > /dev/null 2>&1 && return

 # Git branch/tag, or name-rev if on detached head
 local GIT_LOCATION=${$(git symbolic-ref -q HEAD || git name-rev --name-only --no-undefined --always HEAD)#(refs/heads/|tags/)}

 local AHEAD="%{$fg[red]%}⇡NUM%{$reset_color%}"
 local BEHIND="%{$fg[cyan]%}⇣NUM%{$reset_color%}"
 local MERGING="%{$fg[magenta]%}⚡︎%{$reset_color%}"
 local UNTRACKED="%{$fg[red]%}●%{$reset_color%}"
 local MODIFIED="%{$fg[yellow]%}●%{$reset_color%}"
 local STAGED="%{$fg[green]%}●%{$reset_color%}"

 local -a DIVERGENCES
 local -a FLAGS

 local NUM_AHEAD="$(git log --oneline @{u}.. 2> /dev/null | wc -l | tr -d ' ')"
 if [ "$NUM_AHEAD" -gt 0 ]; then
 DIVERGENCES+=( "${AHEAD//NUM/$NUM_AHEAD}" )
 fi

 local NUM_BEHIND="$(git log --oneline ..@{u} 2> /dev/null | wc -l | tr -d ' ')"
 if [ "$NUM_BEHIND" -gt 0 ]; then
 DIVERGENCES+=( "${BEHIND//NUM/$NUM_BEHIND}" )
 fi

 local GIT_DIR="$(git rev-parse --git-dir 2> /dev/null)"
 if [ -n $GIT_DIR ] && test -r $GIT_DIR/MERGE_HEAD; then
 FLAGS+=( "$MERGING" )
 fi

 if [[ -n $(git ls-files --other --exclude-standard 2> /dev/null) ]]; then
 FLAGS+=( "$UNTRACKED" )
 fi

 if ! git diff --quiet 2> /dev/null; then
 FLAGS+=( "$MODIFIED" )
 fi

 if ! git diff --cached --quiet 2> /dev/null; then
 FLAGS+=( "$STAGED" )
 fi

 local -a GIT_INFO
 GIT_INFO+=( "\033[38;5;15m±" )
 [ -n "$GIT_STATUS" ] && GIT_INFO+=( "$GIT_STATUS" )
[[ ${#DIVERGENCES[@]} -ne 0 ]] && GIT_INFO+=( "${(j::)DIVERGENCES}" )
[[ ${#FLAGS[@]} -ne 0 ]] && GIT_INFO+=( "${(j::)FLAGS}" )
 GIT_INFO+=( "\033[38;5;15m$GIT_LOCATION%{$reset_color%}" )
 echo "${(j: :)GIT_INFO}"

}

# Use ❯ as the non-root prompt character; # for root
# Change the prompt character color if the last command had a nonzero exit code
PS1='
$(ssh_info)%{$fg[magenta]%}%~%u $(git_info)
%(?.%{$fg[blue]%}.%{$fg[red]%})%(!.#.❯)%{$reset_color%} '
</code></pre></div>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’d love to hear your thoughts about it!
]]>
</content>
</entry><entry>
<title>Controlling Whitespace and Empty Lines in Jekyll</title>
<link rel="alternate" type="text/html" href="https://joshdick.net/2017/05/29/controlling_whitespace_and_empty_lines_in_jekyll" />
<id>tag:joshdick.net,2017:/2017/05/29/controlling_whitespace_and_empty_lines_in_jekyll.html</id>
<published>2017-05-29T00:00:00Z</published>
<updated>2017-05-29T00:00:00Z</updated>
<author>
<name>Josh Dick</name>
<uri>https://joshdick.net</uri>
</author>
<content type="html" xml:lang="en">
<![CDATA[<blockquote>Jekyll-generated code can be pretty, too.</blockquote><blockquote>
NOTE: This post will be obsolete soon.
<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’s not part of an official Jekyll release (yet.)
This post applies to Jekyll 3.4.3 and earlier, which use earlier versions of Liquid.
May 29, 2017
</blockquote>
<h2 id="the-problem">The Problem</h2>
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.
I noticed that Jekyll-generated output contains unwanted empty lines when there are corresponding Liquid template lines in the source code that wouldn’t otherwise produce visible output.
This example from <a href="https://shopify.github.io/liquid/basics/whitespace/">Liquid’s whitespace control documentation</a> illustrates the problem:
Liquid Input
<pre tabindex="0"><code class="language-liquid" data-lang="liquid">{% assign username = "John G. Chalmers-Smith" %}
{% if username and username.size > 10 %}
Wow, {{ username }}, you have a long name!
{% else %}
Hello there!
{% endif %}
</code></pre>Generated Output
<pre tabindex="0"><code>
Wow, John G. Chalmers-Smith, you have a long name!
</code></pre>The empty lines are undesirable since they are unnecessary and they make the generated output uglier.
<h2 id="the-solution">The Solution</h2>
Here’s my solution for removing empty lines from Jekyll-generated code.
<ol>
<li>Add the following Jekyll plugin by creating a file named <code>_plugins/regex_filter.rb</code> with the following contents:</li>
</ol>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-ruby" data-lang="ruby"># https://stackoverflow.com/a/25802375/278810
module Jekyll
 module RegexFilter
 def replace_regex(input, reg_str, repl_str)
 re = Regexp.new reg_str

 # This will be returned
 input.gsub re, repl_str
 end
 end
end

Liquid::Template.register_filter(Jekyll::RegexFilter)
</code></pre></div><ol start="2">
<li>Use the following pattern in your Liquid templates:</li>
</ol>
<pre tabindex="0"><code class="language-liquid" data-lang="liquid">{% capture output %}
Content starts here
Here are lines with more content
{% if false %}This generates a blank line that will be stripped from the output{% endif %}
Content ends here
{% endcapture %}{{ output | replace_regex: '^\s*$\n', ''}}
</code></pre><ol start="3">
<li>That’s it!</li>
</ol>
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.
The <code>{% raw %}{% endcapture %}{% endraw %}</code> and <code>{% raw %}{% output %}{% endraw %}</code> Liquid tags appear on the same line to prevent an empty line from appearing at the top of the generated output.
You can chain multiple invocations of the <code>replace_regex</code> filter together if you want to perform multiple distinct whitespace transformations.
This is a simple idea, but I think it helps make Jekyll-generated code more pleasant to look at.
]]>
</content>
</entry><entry>
<title>Understanding iOS Universal Links</title>
<link rel="alternate" type="text/html" href="https://joshdick.net/2017/01/08/understanding_ios_universal_links" />
<id>tag:joshdick.net,2017:/2017/01/08/understanding_ios_universal_links.html</id>
<published>2017-01-08T00:00:00Z</published>
<updated>2017-01-08T00:00:00Z</updated>
<author>
<name>Josh Dick</name>
<uri>https://joshdick.net</uri>
</author>
<content type="html" xml:lang="en">
<![CDATA[<blockquote>When “Open In App” stubbornly refuses to keep its promise.</blockquote><a href="https://developer.apple.com/ios/universal-links/">Universal Links</a> first appeared in iOS 9. According to Apple’s <a href="https://developer.apple.com/library/content/documentation/General/Conceptual/AppSearch/UniversalLinks.html">Supporting Universal Links</a> document:
<blockquote>
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’t installed, tapping a link to your website opens your website in Safari.
</blockquote>
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.
<h2 id="the-problem">The Problem</h2>
<h3 id="open-in-app-opens-an-apps-app-store-page-instead-of-the-app">“Open In App” Opens an app’s App Store page instead of the app</h3>
I use <a href="http://imgur.com">imgur</a> and have its associated app installed on my phone, but I noticed that the “Open In App” 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.
<img src="/post_assets/2017/01/imgur_open_in_app_buttons.png" alt="imgur’s “Open in App” buttons">
<img src="/post_assets/2017/01/imgur_app_store_page.png" alt="imgur’s App Store page">
I figured there was some glitch with the buttons that was mistakenly redirecting me to the App Store. Imgur’s App Store page showed the “Open” 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.
I was wrong.
It turns out that tapping the Open button on an app’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.
There is no visual indication that App Store page “Open” buttons have different behaviors when being redirected from a Universal Link versus browsing the App Store manually, even though this is clearly the case.
Regardless, I expected “Open In App” to actually load the linked content in-app and not to add an extra step of loading an app’s App Store page.
<h2 id="the-realization">The Realization</h2>
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.
First, some terminology: I will refer to a Universal Link as enabled if tapping it causes content to load in-app, and disabled if tapping it causes content to load in a web page or causes an App Store page to open.
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 “Creating and Uploading the Association File” section of Apple’s <a href="https://developer.apple.com/library/content/documentation/General/Conceptual/AppSearch/UniversalLinks.html">Supporting Universal Links</a> document), and that the per-Universal Link setting stays in effect until it is changed again.
This means that the instructions below may need to be repeated multiple times for a single site.
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.
<h2 id="the-solution">The Solution</h2>
<h3 id="enabling-a-universal-link">Enabling a Universal Link</h3>
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’s how to enable it:
<ol>
<li>
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>Open in the [App Name] App</code> banner as pictured below:
<img src="/post_assets/2017/01/imgur_open_in_app_banner.png" alt="imgur’s App Store page">
Tapping the banner will enable the Universal Link and cause the content to load in-app.
</li>
<li>
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>Open in "[App Name]"</code> as pictured below:
<img src="/post_assets/2017/01/imgur_open_in_app_button.png" alt="imgur’s App Store page">
Tapping the <code>Open in "[App Name]"</code> button will enable the Universal Link and cause the content to load in-app.
</li>
</ol>
Once the Universal Link is enabled (content loads in-app), it will always load in-app in the future unless you [re]disable the Universal Link as described below.
Note that when tapping a disabled Universal Link causes a redirection to an app’s App Store page, tapping the “Open” button on that page will cause content to load in-app that one time, and will not enable that Universal Link for future use as described above.
<h3 id="disabling-a-universal-link">Disabling a Universal Link</h3>
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’s how to disable it:
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:
<img src="/post_assets/2017/01/imgur_status_bar_link.png" alt="imgur’s App Store page">
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.
Once the Universal Link is disabled (content doesn’t load in-app), content will never load in-app in the future unless you [re]enable the Universal Link as described above.
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, don’t tap the Status Bar text; instead, just switch back to your web browser.
<h3 id="a-note-on-app-store-page-redirection">A Note on App Store Page Redirection</h3>
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.
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’s web site does appear to load another page on the web site for a split second before redirecting to imgur’s App Store page. In other words, the Universal Link correctly opens imgur’s web site as expected, which itself then redirects to imgur’s App Store page (where the “Open” button would cause the content to load in-app one time as described above.) It’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.
<h2 id="conclusion">Conclusion</h2>
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.
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.
“Open in App” 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.
]]>
</content>
</entry><entry>
<title>An Event Apart Boston 2015</title>
<link rel="alternate" type="text/html" href="https://joshdick.net/2015/06/28/an_event_apart_boston_2015" />
<id>tag:joshdick.net,2015:/2015/06/28/an_event_apart_boston_2015.html</id>
<published>2015-06-28T00:00:00Z</published>
<updated>2015-06-28T00:00:00Z</updated>
<author>
<name>Josh Dick</name>
<uri>https://joshdick.net</uri>
</author>
<content type="html" xml:lang="en">
<![CDATA[<blockquote>My notes from An Event Apart, “the design conference for people who make websites”.</blockquote><img src="/post_assets/2015/06/aea_boston_2015_bacon_cupcake.jpg" alt="Bacon Cupcake">
<h1 id="introduction">Introduction</h1>
I had the privilege of attending An Event Apart, “the design conference for people who make websites”, 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.
If you’re interested, my notes from An Event Apart Boston <a href="/2012/08/19/an_event_apart_boston_2012.html">2014</a> are also available.
<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-zeldmancomhttpwwwzeldmancom-bull-zeldmanhttpstwittercomzeldman">Jeffrey Zeldman - The Fault, Dear Brutus (or: Career Advice From a Cranky Old Man) (<a href="http://www.zeldman.com">zeldman.com</a> • <a href="https://twitter.com/zeldman">@zeldman</a>)</h2>
<ul>
<li>“When I get stuck in a rut, I decorate it.”</li>
<li>Work never sells itself. You need a strategy to sell.</li>
<li>“Every client wants something nobody’s done before that has worked at least three times for other people.”</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: “We have met the enemy and he is us.” -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…) Blogs and side projects can show how you think and what you do, even if your regular work can’t (or you’re not allowed to share your regular work.)</li>
<li>“When you pick a typeface, your design is halfway done.”</li>
<li>Don’t wait for someone to hand you your dream job or project – make your own.</li>
</ul>
<hr>
<h2 id="jon-hicks---icon-design-process-zeldmancomhttphicksdesigncouk-bull-hicksdesignhttpstwittercomhicksdesign">Jon Hicks - Icon Design Process (<a href="http://hicksdesign.co.uk">zeldman.com</a> • <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 ‘spare’ 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’t (their meaning is learned.)</li>
<li>Iconic icons are easier/faster to recognize than symbolic icons.</li>
<li>Embrace conventions! Don’t use a welcome mat icon to represent “home”.</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’s possible to be too 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-sazzycoukhttpwwwsazzycouk-bull-sazzyhttpstwittercomsazzy">Sarah Parmenter - Designing for Social Behavior (<a href="http://www.sazzy.co.uk/">sazzy.co.uk</a> • <a href="https://twitter.com/sazzy">@sazzy</a>)</h2>
<ul>
<li>“Whenever I hear the phrase ‘Social Media’, I think ‘Social Mediblah’ instead.”</li>
<li>Social media is a tool to make something happen.</li>
<li>An effective social media campaign is based on the psychology of social behaviors, not current technology. –<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, you are the product: You need to pay to access the followers that you’ve worked to build up.</li>
<li>What people use “liking” for:
<ul>
<li>Acknowledging that someone has seen/read something without explicitly leaving a comment</li>
<li>Using as a “read” 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’s like shouting at a sports event. #aeabos –<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’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’t do the safe/expected thing, be prepared to have difficult conversations. If you can’t, it will limit your ability to do good work.</li>
</ul>
<hr>
<h2 id="josh-clark---magical-ux-and-the-internet-of-things-globalmoxiecomhttpglobalmoxiecom-bull-globalmoxiehttpstwittercomglobalmoxie">Josh Clark - Magical UX and the Internet of Things (<a href="http://globalmoxie.com">globalmoxie.com</a> • <a href="https://twitter.com/globalmoxie">@globalmoxie</a>)</h2>
<h3 id="act-i-magic--technology">Act I: Magic & Technology</h3>
<ul>
<li>“Any sufficiently advanced technology is indistinguishable from magic.” –Arthur C. Clarke</li>
<li>“One goal: The computer disappears into the environment.” –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’s diaper is wet.</li>
<li>“We have centuries of experiencing imagining what objects could do for us if they were just…smarter.”</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…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’ OBD-II ports to collect data.</li>
<li>The world is reactive – 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 “thereables”, adding intelligence to objects that are already in the world? Why isn’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’s a challenge of imagination.</li>
</ul>
<h3 id="act-iii-magic-imagined">Act III: Magic, Imagined</h3>
<ul>
<li>Google Glass asked, “What can we do with technology on your face?” It should have asked, “What if this thing was magic?”</li>
<li>Design for the thing’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’s electric cooktop has flame-like LEDs since that gels with a user’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’t actually add value</a>.</li>
<li>Don’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’s <a href="https://www.youtube.com/watch?v=hUpukubcUjk">Mega Stomp Battle</a>.</li>
<li>“The future of technology has always looked like a pretty toy to people comfortable with the past.” –Benedict Evans</li>
<li>People fear that magic always goes wrong: “How smart does your bed have to be before you are afraid to go to sleep at night?” –Rich Gold</li>
<li>Build systems that are smart enough to know they’re not smart enough.</li>
<li>Make technology invisible and humane.</li>
<li>It’s not “Can we?”, it’s “How will we?”</li>
<li>The “Internet of Things” is not about the thing. The technology should amplify our humanity.</li>
</ul>
<hr>
<h2 id="mat-marquis---smaller-faster-web-sites-matmarquiscomhttpwwwmatmarquiscom-bull-wiltohttpstwittercomwilto">Mat Marquis - Smaller, Faster Web Sites (<a href="http://www.matmarquis.com">matmarquis.com</a> • <a href="https://twitter.com/wilto">@wilto</a>)</h2>
<ul>
<li>Users just want to keep their coffee off the floor, they don’t care about the table.</li>
<li>When we value convenience over craft, we’re designing a web for ourselves, not for users.</li>
<li>We’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 – mostly images.</li>
<li>The right image size(s) for the right device: Serve responsive images with the <code>srcset</code> attribute and the <code><picture></code> element.</li>
<li>Use <a href="https://scottjehl.github.io/picturefill/">picturefill</a> for legacy browsers that don’t support the <code><picture></code> element.</li>
<li>SVG is widely supported, but still doesn’t work on Android – a huge number of Android devices still ship with 2.3 today!</li>
<li>“It seems every year one of us accidentally discovers another game-changing thing that SVG has been able to do since 1987.” –@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-ethanmarcottecomhttpethanmarcottecom-bull-beephttpstwittercombeep">Ethan Marcotte - Laziness in the Time of Responsive Design (<a href="http://ethanmarcotte.com">ethanmarcotte.com</a> • <a href="https://twitter.com/beep">@beep</a>)</h2>
<ul>
<li>Categories like “tablet” and “mobile” are so broad as to be completely unhelpful as they pertain to our work.</li>
<li>“My anxiety doesn’t come from thinking about the future, but from wanting to control it.” –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>“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.” –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 ’the hamburger’ (&#9776; → ☰) hasn’t been as successful as most of us think.</li>
<li>The hamburger’s function is not always self-evident.</li>
<li>We don’t always need to have the default expectation that navigation should be concealed on mobile.</li>
<li>We’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 – maybe it’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>“There’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.” –Trent Walton</li>
<li>“Like cars designed to perform in extreme heat or on icy roads, websites should be built to face the reality of the web’s inherent variability.” –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-meyerwebcomhttpmeyerwebcom-bull-meyerwebhttpstwittercommeyerweb">Eric Meyer - Designing for Crisis (<a href="http://meyerweb.com">meyerweb.com</a> • <a href="https://twitter.com/meyerweb">@meyerweb</a>)</h2>
<ul>
<li>“You don’t get to decide what your users will want to do on mobile. They do.” –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 usability testing a design for people in crisis, add confusion/annoyances 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-rachelandrewcoukhttprachelandrewcouk-bull-rachelandrewhttpstwittercomrachelandrew">Rachel Andrew - CSS Grid Layout (<a href="http://rachelandrew.co.uk">rachelandrew.co.uk</a> • <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’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-bradfrostcomhttpbradfrostcom-bull-brad_frosthttpstwittercombrad_frost">Brad Frost - Atomic Design (<a href="http://bradfrost.com">bradfrost.com</a> • <a href="https://twitter.com/brad_frost">@brad_frost</a>)</h2>
<ul>
<li>We’re not designing pages, we’re designing systems of components. –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’s structure, naming, and style</li>
</ul>
</li>
<li>☛ Atomic design = creating pattern library/style guide first, instead of cherrypicking patterns after design. @brad_frost #aeabos –<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’ 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-simplyaccessiblecomhttpsimplyaccessiblecom-bull-featherhttpstwittercomfeather">Derek Featherstone - Content in Context is King (<a href="http://simplyaccessible.com">simplyaccessible.com</a> • <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 “the device someone is using”, 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’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’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-katekieferleecomhttpkatekieferleecom-bull-katekieferhttpstwittercomkatekiefer">Kate Kiefer Lee - Touchy Subjects: Creating Content for Sensitive Situations (<a href="http://katekieferlee.com/">katekieferlee.com</a> • <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>“It is insight into human nature that is key to the communicator’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.” –William Bernbach</li>
<li>“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: ‘Listen to me, I have something to tell you.’” –Peter Elbow</li>
<li>Read it out loud!</li>
<li>Know when saying nothing is best: “Brands are not people. Customers are not close friends. And boundaries need to be maintained.”</li>
<li>Pick the right tone to match the reader’s feelings based on the content type.</li>
<li>“New Yorker: “We screwed up.” Airline: “We apologize for any inconvenience this may have caused.” Which apology is more effective? #aeabos” –<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’t want our users to say, “Great content!” Instead: “I got what I needed; it wasn’t that hard; and I’m better off now.”</li>
<li><a href="http://voiceandtone.com/">http://voiceandtone.com/</a></li>
</ul>
<hr>
<h2 id="chris-coyier---the-wonderful-world-of-svg-chriscoyiernethttpchriscoyiernet-bull-chriscoyierhttptwittercomchriscoyier">Chris Coyier - The Wonderful World of SVG (<a href="http://chriscoyier.net">chriscoyier.net</a> • <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>src</code> attribute in an <code><img /></code> tag, inline in the HTML, or referenced with <code>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>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><svg></code> = “image” / <code></code> = “nothing”</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’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>
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.
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 in the appropriate context, and a user’s particular device is only one of many aspects of their context (see my notes from Derek Featherstone’s talk for examples.)
As always, technology itself doesn’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.
Of course, An Event Apart Boston’s traditional, renowned bacon cupcakes also help.
]]>
</content>
</entry><entry>
<title>Send Browser Tabs from iOS to Mac with Workflow, Hazel and Dropbox</title>
<link rel="alternate" type="text/html" href="https://joshdick.net/2015/01/18/send_browser_tabs_from_ios_to_mac_with_workflow_hazel_and_dropbox" />
<id>tag:joshdick.net,2015:/2015/01/18/send_browser_tabs_from_ios_to_mac_with_workflow_hazel_and_dropbox.html</id>
<published>2015-01-18T00:00:00Z</published>
<updated>2015-01-18T00:00:00Z</updated>
<author>
<name>Josh Dick</name>
<uri>https://joshdick.net</uri>
</author>
<content type="html" xml:lang="en">
<![CDATA[<blockquote>A somewhat complex solution to a simple problem.</blockquote><h2 id="introduction">Introduction</h2>
I’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’s <a href="http://support.apple.com/en-us/HT202530">iCloud Tabs</a> and Google Chrome’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 “send and forget” 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.
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.
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’ve tested this system with different combinations of Chrome and Safari on both sides, and it works great in all cases.
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’re new to either of them, you should download them and experiment with them before continuing.
<h2 id="how-it-works">How It Works</h2>
This is how the system works from end to end, which should give you some context before you start configuring things:
<ul>
<li>On iOS, a Workflow Action Extension that accepts URLs is invoked through the browser’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>
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:
<ul>
<li>archer</li>
<li>cheryl</li>
<li>malory</li>
</ul>
If you aren’t weird enough to name your computers, your list might include things like “MacBook Pro” and “iMac”.
Create a new folder anywhere in your Dropbox called “Send Tab” or anything else that works for you, and then create subfolders inside it for each Mac on your list.
My directory structure looks like this:
<pre><code>$ tree ~/Dropbox/App\ Databases/Workflow/Send\ Tab
/Users/Josh/Dropbox/App Databases/Workflow/Send Tab
├── archer
├── cheryl
└── malory
3 directories, 0 files
</code></pre>
<h2 id="configure-hazel-on-your-macs">Configure Hazel on your Macs</h2>
The Hazel rule shown below should be configured for each Mac on your list.
On each Mac, the rule should be configured to monitor the corresponding Dropbox subfolder that you created for that Mac.
You can change <code>"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’s <code>/Applications</code> folder, that you type the browser’s name exactly as it appears there, and that the browser’s name is quoted, as shown.
<img src="/post_assets/2015/01/hazel_rule.png" alt="Hazel rule configuration">
For your copying-and-pasting convenience, here’s the script that is embedded in the Hazel rule:
<pre><code>url=`cat "$1"`
open -a "Google Chrome.app" "$url"
rm -f "$1"
</code></pre>
<h2 id="configure-workflow-on-your-ios-devices">Configure Workflow on your iOS Devices</h2>
The Workflow workflow (not a typo!) shown below should be configured on each iOS device you want to send tabs from.
This workflow is an Action Extension workflow that is configured to accept URLs.
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.
If you’re curious, here’s what the workflow looks like:
<img src="/post_assets/2015/01/workflow.png" alt="Hazel rule configuration">
You’ll need to customize the list of Macs, as well as the “Destination Path” in the “Save to Dropbox” action.
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’t all fit on the screen in the Workflow app: <code>App Databases/Workflow/Send Tab/<computer></code>. This means that the Macs in the workflow’s list need to match their corresponding subfolder names in Dropbox.
<h2 id="the-finish-line">The Finish Line</h2>
Now that you’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:

<h2 id="closing-thoughts">Closing Thoughts</h2>
As of this writing, Hazel and Dropbox <a href="http://www.noodlesoft.com/forums/viewtopic.php?f=4&t=4044">don’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’s “send tab” subfolder (to match the iOS workflow.)
Here’s an example of how to set up the workaround:
<pre><code>$ ln -s ~/path/to/the/real/folder/cheryl ~/Dropbox/App\ Databases/Workflow/Send\ Tab/cheryl
</code></pre>
Allowing Hazel to watch the non-Dropbox folder allows Hazel’s automatic rule triggering to work, while still allowing Dropbox syncing to work via the symbolic link.
If you’re obsessed with sending tabs between devices like me, you might enjoy these two relevant free utilities:
<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’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’ve signed into Chrome with a Google account on the desired computers.</li>
</ul>
Updated on January 28, 2015: Updated the Hazel rule embedded script and associated screenshot to use and be compatible with bash — which is the default for most users — instead of zsh.
]]>
</content>
</entry><entry>
<title>An Event Apart Boston 2014</title>
<link rel="alternate" type="text/html" href="https://joshdick.net/2014/05/02/an_event_apart_boston_2014" />
<id>tag:joshdick.net,2014:/2014/05/02/an_event_apart_boston_2014.html</id>
<published>2014-05-02T00:00:00Z</published>
<updated>2014-05-02T00:00:00Z</updated>
<author>
<name>Josh Dick</name>
<uri>https://joshdick.net</uri>
</author>
<content type="html" xml:lang="en">
<![CDATA[<blockquote>My notes from An Event Apart, “the design conference for people who make websites”.</blockquote><img src="/post_assets/2014/05/aea_boston_2014_swag.jpg" alt="An Event Apart SWAG">
<h1 id="introduction">Introduction</h1>
I had the privilege to once again attend An Event Apart, “the design conference for people who make websites.” 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.
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’t work for everyone, but I find that it helps reinforce the speakers’ ideas in my head.
Notes in summary or “handful of bullets” format would certainly be easier to consume than the wall of text that appears below, but the notion of trying to summarize others’ ideas for consumption doesn’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 “wall of text” approach to publishing my notes that I’ve <a href="/2012/08/19/an_event_apart_boston_2012.html">used</a>. Before publishing my notes here, I extensively edit them for clarity and typos, but I don’t make any attempt to summarize them or make them otherwise more digestible.
If you’re interested, my notes from An Event Apart Boston <a href="/2012/08/19/an_event_apart_boston_2012.html">2013</a> are also available.
<h1 id="day-1-42814">Day 1: 4/28/14</h1>
<h2 id="jeffrey-zeldman---understanding-web-design-zeldmancomhttpwwwzeldmancom-bull-zeldmanhttpstwittercomzeldman">Jeffrey Zeldman - Understanding Web Design (<a href="http://www.zeldman.com">zeldman.com</a> • <a href="https://twitter.com/zeldman">@zeldman</a>)</h2>
<ul>
<li>The mystery of web design: Those that can’t value your work can’t support you in creating your best work.</li>
<li>Nobody outside our industry knows what we do; it’s hard to explain in non-technical terms.</li>
<li>In a team setting, it’s hard enough to achieve great design even when a team is familiar with design.</li>
<li>Understanding a client’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’re doing at your job, and if it’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’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’t know about them.</li>
<li>“Nobody understands the W3C besides the W3C.” 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’s HTML5 vs native app debacle, Facebook approached mobile as a technology problem, when it was really a design problem. Anything extraneous to Facebook’s core functionality (e.g. sharing pictures with friends) doesn’t belong in Facebook on mobile or 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’re paid to meet business goals, not to make elegant technical achievements that shouldn’t have been attempted in the first place.</li>
<li>Web design isn’t about technology. It’s about people.
<ul>
<li>We don’t design for browsers; we design for people to ensure that they have a good experience.</li>
<li>We don’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’t understand because it doesn’t behave as something you do understand is wrong (for example: “Web design is shoddy because it hasn’t produced a work as influential as Milton Glaser’s Bob Dylan poster.”) There’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’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’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’t wait to be asked to do your job.</li>
<li>Arrive early and often.</li>
<li>Push your way in. Volunteer.</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’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-sazzycoukhttpwwwsazzycouk-bull-sazzyhttpstwittercomsazzy">Sarah Parmenter - Designing Using Data (<a href="http://www.sazzy.co.uk/">sazzy.co.uk</a> • <a href="https://twitter.com/sazzy">@sazzy</a>)</h2>
<ul>
<li>“Design is no longer the killer differentiator.” -John Maeda</li>
<li>Instincts are experiments. Data is proof.</li>
<li>“…become an expert to facilitate the most productive conversation you can have.” -Kevin Hoffman, An Event Apart 2014</li>
<li>“Many designers who are skilled technicians, craftsmen, or researchers have struggled to survive in the messy environment required to solve today’s complex problems. They may play a valuable role, but they are destined to live in the downstream world of design execution.” -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’s easy to think of data/content as not part of our job.</li>
<li>“Research is formalized curiosity. It is poking and prodding with a purpose.” -Zora Neale Hurston</li>
<li>“No one has an excuse to make an uninformed decision anymore.” -Federico Holgado, Mailchimp</li>
<li>“Being a good designer is no longer enough. We need designers that can tell you WHY they design something a certain way.”</li>
<li>“…designers go from decorators to problem solvers.” -Aaron Walter, Mailchimp</li>
<li>“(If) a strategy can’t predict outcomes, our strategy is broken.” -Jared Spool, An Event Apart 2014</li>
<li>Vanity metrics 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>“Making your numbers go up (any numbers–your BMI, your blood sugar, your customer service ratings) is pointless if the numbers aren’t related to why you went to work this morning.” -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’s “purple cow” business is a business that does something that bucks the trend of what a related business would be.</li>
<li>“Experiment led design may happen outside of normal work.” -Kevin Hoffman</li>
<li>People like honesty; they see through sales patter. Don’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’t know how to bookmark the appointment booking web page.</li>
<li>It’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 “book appointment” to “book YOUR appointment” resulted in a 200% increase.</li>
</ul>
</li>
<li>For <a href="https://highrisehq.com/">Highrise</a>, “see plans and pricing” was a more effective web call to action than “start your 30-day free trial”.</li>
<li>Good visual media creates a more positive perception of the value of the product or service you’re selling.
<ul>
<li>But, content comes first!</li>
<li>Use “real-world” 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’t communicate your findings in the words of your boss/clients, you’ve failed to help them find value from those findings.</li>
<li>“A mind is like a parachute. It doesn’t work if it is not open.” -Frank Zappa</li>
</ul>
I should point out that Sarah’s “Designing with Data” 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.
<hr>
<h2 id="dan-mall---responsive-design-is-still-hardeasy-be-afraiddont-worry-danielmallcomhttpdanielmallcom-bull-danielmallhttpstwittercomdanielmall">Dan Mall - Responsive Design is Still Hard/Easy! Be Afraid/Don’t Worry! (<a href="http://danielmall.com/">danielmall.com</a> • <a href="https://twitter.com/danielmall">@danielmall</a>)</h2>
Dan outlined a “modern web design process, in four easy payments.”
<ol>
<li>Plan (research and hypothesize)</li>
<li>Inventory
<ul>
<li>Content inventory: A simple content strategy for <del>dummies</del> designers is to add/edit/remove components as necessary to fit the content.</li>
<li>Performance inventory: Calculate your performance budget before designing, since it can help focus your design (number of images, JS libraries, etc.)</li>
<li>Pattern inventory:
<ul>
<li>Atoms (HTML tags)</li>
<li>Molecules (collections of atoms, for example “Image with Caption”)</li>
<li>Organisms (collections of molecules, for example “Article Body” or “Carousel”)</li>
<li>See <a href="http://demo.patternlab.io/">demo.patternlab.io</a> for an example of a pattern inventory.</li>
</ul>
</li>
<li>Visual inventory:
<ul>
<li>If you want to get a better understanding of something, asking a question is infinitely more useful than making a statement." -Jason Santa Maria, <a href="http://goo.gl/mNqvrs">The Pastry Box</a></li>
<li>“Is showing their app on a laptop on the homepage the best way to sell it to prospective customers?”</li>
<li>“Can their brand pull off a minimalist design approach?”</li>
<li>“Should their copy be more playful?” 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’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 — explore ideas roughly and quickly.
<ul>
<li><a href="http://responsivedesignworkflow.com/">Content reference wireframes</a></li>
<li>Linear design: 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’s easy to make boxes responsive but harder to make a web site cohesively responsive.</li>
<li>Element collages: Turn powerful phrases into visual hooks.
<ul>
<li>“Obviously this isn’t a website, but I see how it could be one.” -The perfect client’s reaction to an element collage</li>
<li>Make an element collage horizontal so a client doesn’t mistake it for a web site comp.</li>
<li>“Element collages are like giving your client a peek at all those hidden layers.” -Paul Lloyd</li>
</ul>
</li>
<li>Prototyping, with problem and solution statements: “This prototype does one thing and one thing only.” 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>“Assembling the site should take the least time on the project. The real work is research, sketching, prototyping.”</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-lukewcomhttpwwwlukewcom-bull-lukewhttpstwittercomlukew">Luke Wroblewski - Screen Time (<a href="http://www.lukew.com/">lukew.com</a> • <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 the resolution.</li>
<li>Widescreen is the 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 all inputs (both touch and click-based input.)</li>
<li>You can include “hidden features” 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 “zoom” action.</li>
<li>Communicate what’s possible.</li>
<li>Screen size is a poor proxy for detecting input type, but it’s what we’ve got…for now.</li>
</ul>
<h3 id="posture">Posture</h3>
<ul>
<li>Posture 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’s UIs across different devices of increasing size.)</li>
<li>A full HD resolution TV can have the same resolution as a phone (1920px × 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-braintrafficcomhttpbraintrafficcom-bull-halvorsonhttpstwittercomhalvorson">Kristina Halvorson - Content/Communication (<a href="http://braintraffic.com/">braintraffic.com</a> • <a href="https://twitter.com/halvorson">@halvorson</a>)</h2>
<h3 id="principles">Principles</h3>
A principle internally motivates us to do things that seem good and right.
A rule externally compels you to do things someone else has deemed good and right.
<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>“Responsive” does not equal “reactive”.</li>
<li>The story informs the format.</li>
<li>Numbers aren’t everything.</li>
</ul>
<h3 id="strategy">Strategy</h3>
<ul>
<li>A good strategy provides you with context and constraints, and doesn’t allow you do do anything/make excuses for anything: “We will share user-facing, task-based content that makes our customers feel smart and safe, both personally and professionally.”</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 content strategy consists of content components (substance and structure) and people components (workflow and governance).</li>
</ul>
<h3 id="process">Process</h3>
<ul>
<li>Do not make process your god.</li>
<li>“Different methods work or fail because of people, not because they are universally good or bad.” -Pawel Brodzinski, Agile Bullshit</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>R - Who is responsible for completing a task?</li>
<li>A - Who is accountable for the work’s success?</li>
<li>C - Who must be consulted before work can be signed-off on?</li>
<li>I - Who must be kept informed 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’s aligned on terminology (e.g. audit vs. inventory, wireframe vs. prototype)</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>“In content strategy, our master skills must include translating and negotiating, so we can facilitate communication between disparate disciplines and help them to communicate.” -Rachel Lovinger, Tinker, Tailor, Content Strategist</li>
</ul>
<h3 id="conclusion">Conclusion</h3>
<ul>
<li>We are perpetually catching up.</li>
<li>Our work is <del>personal</del> together.</li>
<li>“This multi-device web design increases stress exponentially.” -Trent Walton, .net Magazine</li>
<li>“A study of over 350 people in 6 business units at a financial services company found that the greatest predictor of a team’s achievement was how the members felt about one another.” -Shawn Achor, The Happiness Advantage</li>
</ul>
<hr>
<h2 id="jared-spool---ux-strategy-means-business-uiecomhttpwwwuiecom-bull-jaredspoolhttpstwittercomjaredspool">Jared Spool - UX Strategy Means Business (<a href="http://www.uie.com/">uie.com</a> • <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… …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 strategy to achieve a desired outcome, but UX strategy can’t predict outcomes.</li>
<li>Regarding Apple’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 × 10 years of correcting map errors. Apple didn’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’s cash float model:
<ul>
<li>Amazon doesn’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’s “Underpants Gnomes” 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’ 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>Advertising 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’t content on a page is there to disrupt the user from the experience they intended to have.</li>
<li>It’s intentional and it disrupts the user.</li>
<li>Advertisers don’t care about the user; they care about selling stuff.</li>
<li>Advertising disrupt’s the users’ 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 × 60px banner is clicked 0.04% of the times it is shown. (Doubleclick)</li>
<li>Users can’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’s “ship my pants” ad</a>: “I’ve watched this ad a thousand times. I love this ad; I will never shop at K-Mart.”</li>
<li>When you don’t pay for the product, you are 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’t care about.</li>
<li>Internet advertising that could actually work relies on seducible moments, 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’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’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-adactiocomhttpadactiocom-bull-adactiohttpstwittercomadactio">Jeremy Keith - The Long Web (<a href="http://adactio.com/">adactio.com</a> • <a href="https://twitter.com/adactio">@adactio</a>)</h2>
<ul>
<li>Mobile first? URL first. Design your URLs before you design anything that’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’s OK to use unsupported attributes/elements in HTML since browsers typically ignore things they don’t understand and degrade gracefully.</li>
<li>The <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist"><code><datalist></code> element</a> are the bastard love child of the <code><input></code> and <code><select></code> elements.</li>
<li>Any text in a <code><datalist></code> can also be used as a placeholder with a “for example” or “e.g.” prefix.</li>
<li>Progressive enhancement doesn’t mean designing for the lowest common denominator; rather it means starting from the lowest common denominator.
<ul>
<li>“I like an escalator, because an escalator can never break. It can only become stairs. You’ll never see an ‘Escalator Out of Order’ sign, only ‘Escalator Temporarily Stairs. Sorry for the convenience.’” -Mitch Hedberg</li>
<li>“Javascript is the electricity of the web.” It should be “subservient to the existing structure.”</li>
<li>In other words, a site should be enhanced by JavaScript but not necessarily require it.</li>
<li>“Until the page has finished loading, every user is a non-JavaScript user.” -Jake Archibald</li>
<li>Progressive enhancement is more about technology failing than technology not being supported. (For example: <code><a href="javascript:void(0)">Download</a></code> broke the ability to download Google Chrome when the download page’s JavaScript stopped loading.)</li>
</ul>
</li>
<li>Don’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>rel</code> attribute</a> can be used to make <a href="https://developer.mozilla.org/en-US/docs/Controlling_DNS_prefetching">prefretching</a> suggestions 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-paulirishcomhttppaulirishcom-bull-paul_irishhttpstwittercompaul_irish">Paul Irish - Responsive Design Performance Budget (<a href="http://paulirish.com/">paulirish.com</a> • <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><a href="https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index">Speed Index</a>: A metric that precisely measures a user’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 fast pages, what is the right number of requests and optimal page size?</li>
<li>“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?” -<a href="https://github.com/html5rocks/www.html5rocks.com/issues/856#issuecomment-31957933">Ilya Grigorik</a></li>
<li>Not all requests are made equal; where are they initiated? What part of the UX do they block?</li>
<li>Not all bytes are made equal; the first 14kb are extremely important. Different <code>content-type</code>s can have different performance impact(s) for the page.</li>
<li>“Bloat” isn’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 — plus server processing time.</li>
</ul>
</li>
<li>Bandwidth + Latency ≈ 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’s even worse for mobile (see <a href="https://www.youtube.com/watch?v=_fNp37zFn9Q">“Living with Lag”</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 HTTP data flows consist of small, bursty data transfers, but network round trip time is the limiting factor in TCP throughput and performance in most cases.</li>
<li>Consequently, latency is the performance bottleneck for HTTP and most of the web.</li>
<li>Latency defines the speed at which the page loads; mobile’s growth means average latency is growing.</li>
<li>Latency’s influence means optimizing for request count.</li>
</ul>
</li>
<li>Optimizing for the critical path
<ul>
<li>When a JavaScript file is referenced in the <code><head></code> of the document, the browser can’t process the rest of the page until it has finished processing that file.</li>
<li>Eliminate render-blocking JavaScript (especially in <code><head></code>). Load all JavaScript asynchronously.</li>
<li>Critical CSS: The CSS used to render the content “above the fold”.</li>
<li>Minimize render-blocking CSS.</li>
<li>Deliver the goods — 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-leaveroumehttpleaveroume-bull-leaverouhttpstwittercomleaverou">Lea Verou - The Chroma Zone: Engineering Color on the Web (<a href="http://lea.verou.me/">lea.verou.me</a> • <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’t do it, since it makes fonts look terrible; it could be useful for icon fonts.)</li>
<li>3 colors × 8-bit subpixels = 2^8 × 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>#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>rgb()</code> syntax</li>
<li><code>#rgb</code> shortened hex syntax</li>
<li>“orange” color name (<a href="http://www.w3.org/TR/CSS2/syndata.html#value-def-color">seriously</a>)</li>
</ul>
<h3 id="css-color-level-3httpwwww3orgtrcss3-color"><a href="http://www.w3.org/TR/css3-color/">CSS Color Level 3</a></h3>
<ul>
<li>A color space has perceptual uniformity when the perceptual similarity of two colors is measured by the distance between them.</li>
<li>RGB and RGB-derived color spaces are not perceptually uniform.</li>
<li>Everyone says “CSS3” even though it doesn’t exist (only the modules are versioned).</li>
<li>HSL colors are slightly more intuitive than RGB colors.
<ul>
<li>Saturation: Closeness to gray.</li>
<li>Lightness: 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’s derived from RGB.)</li>
</ul>
</li>
<li>The <code>hue-rotate</code> filter is useful for colorizing images when applied on top of a <code>sepia</code> filter.</li>
<li>The <code>multiply</code> blending mode tends to makes colors darker. (For example, red[255,0,0] × blue[0,0,255] = black[0,0,0,].)</li>
<li>Lightness != luminance, can’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’s not perfect; it slightly fails for orange, but will always fail “better” than lightness (HSL).</li>
<li>When dealing with transparency, there’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>transparent</code> keyword is a shorthand for transparent black, so <code>linear-gradient(90deg, white, transparent)</code> will actually fade from gray instead of pure white. Use <code>hsla()</code> transparent white instead (<code>linear-gradient(90deg, white, hsla(0,0%,100%,0))</code>).</li>
<li>CSS Color Level 3 included some racist color names: <code>indianred</code>, <code>navajowhite</code>, and <code>peru</code></li>
<li>CSS Color Level 3 also included a color named <code>darkgray</code> which is actually lighter than <code>gray</code>, due to backwards compatibility (<code>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>currentcolor</code> keyword</a> is the first variable we ever got in CSS.</li>
</ul>
<h3 id="the-future-css-color-module-level-4httpdevw3orgcsswgcss-color-4">The Future: <a href="http://dev.w3.org/csswg/css-color-4/">CSS Color Module Level 4</a></h3>
<ul>
<li><code>gray(%, alpha)</code> function</li>
<li><code>#rgba</code> and <code>#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>color()</code> function and adjusters</a></li>
<li>Named hues and <code><angle></code> in <code>hsl()</code></li>
<li><code>rgb()</code> and <code>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 “CSS polyfill”, allowing the use of some of these future features today.</li>
</ul>
<h3 id="cmyk-vs-rgb">CMYK vs. RGB</h3>
<ul>
<li>CMY “works” mathematically but not in the real world, that’s why CMYK is used for print.</li>
<li>sRGB has a slightly larger color gamut than CMYK (LAB > Adobe RGB > sRGB > CMYK)</li>
<li>There’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-globalmoxiecomhttpglobalmoxiecom-bull-globalmoxiehttpstwittercomglobalmoxie">Josh Clark - Mind the Gap: Designing in the Space Between Devices (<a href="http://globalmoxie.com">globalmoxie.com</a> • <a href="https://twitter.com/globalmoxie">@globalmoxie</a>)</h2>
<h3 id="physical-gap">Physical Gap</h3>
<ul>
<li>We’ve lost the ability to transfer information between two physically collocated devices; we’re in a multi-device world individually. (An old example: Palm Pilot beaming.)</li>
<li>Designers haven’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>Sequenced: Move from one device to the other, e.g. desktop to mobile.</li>
<li>Simultaneous: Live peer-to-peer interaction (for example, <a href="http://g.co/racer">Racer</a>).</li>
<li>It’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>Danger: Screens encumber and constrain. Design for people, not screens. The best things in life happen outside of screens. It’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’t.)</li>
<li>Drumpants uses human → device interaction, how do we bring that to device → 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’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’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’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>Mundane computing: 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>Danger: Connected devices won’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>: “A luxury toilet controlled by a smartphone app is vulnerable to attack, according to security experts.”</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-brucelawsoncoukhttpwwwbrucelawsoncouk-bull-brucelhttpstwittercombrucel">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> • <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 “offline by default”.</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>“…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” -<a href="http://lists.w3.org/Archives/Public/www-tag/2013Feb/0022.html">Robin Berjon</a> (W3C, HTML Editor)</li>
<li>“…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” -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>: “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”
<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 “bookmark” by downloading the native app.</li>
<li>What’s the difference between “bookmarking” a page and “installing” it? Making it visible outside the browser.</li>
<li>Native apps feel native to the device/platform, web apps don’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> — <code><img lazyload /></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 à la Google Chrome</li>
<li>“I don’t care which [standard] we end up using, I only care that we all end up using the same one.”</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’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-scottberkuncomhttpwwwscottberkuncom-bull-berkunhttpstwittercomberkun">Scott Berkun - How to Champion Ideas (Back at Work) (<a href="http://www.scottberkun.com/">scottberkun.com</a> • <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>Halfmeet: A person who you almost started a friendship with at an event. (You can guess what a halfhook 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 — 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 — start a UX happy hour! Monthly booze is magical.</li>
<li>When trying to champion something, don’t be an easy target. Don’t shoot yourself or get shot.</li>
<li>Events are abstractions, but your life is specific.</li>
<li><a href="http://scottberkun.com/2014/min-max-note-taking/">Min/max note taking</a>:
<ul>
<li>You won’t remember much in a week</li>
<li>You won’t return to the slides</li>
<li>You need to capture reflections TODAY</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’s not what you say, it’s what people hear.
<ul>
<li>Charm is designed and depends on context: “Here’s something you should be doing” vs. “Here’s something that will help solve your problem”.</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>
Here are my takeaways from the conference:
<ul>
<li>We design for people, not browsers. Worry about experience before worrying about technology decisions; don’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>
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’s bacon cupcakes</a> made a welcome reappearance this year:
<img src="/post_assets/2014/05/aea_boston_2014_bacon_cupcake.jpg" alt="Bacon Cupcake">
As always, An Event Apart was well-organized, informative, and served as a terrific inspirational recharge.
]]>
</content>
</entry><entry>
<title>Configuring SSH and SCP/SFTP on DSM 5.0 for Synology DiskStations</title>
<link rel="alternate" type="text/html" href="https://joshdick.net/2014/04/12/configuring_ssh_and_scp_sftp_on_dsm_5.0_for_synology_diskstations" />
<id>tag:joshdick.net,2014:/2014/04/12/configuring_ssh_and_scp_sftp_on_dsm_5.0_for_synology_diskstations.html</id>
<published>2014-04-12T00:00:00Z</published>
<updated>2014-04-12T00:00:00Z</updated>
<author>
<name>Josh Dick</name>
<uri>https://joshdick.net</uri>
</author>
<content type="html" xml:lang="en">
<![CDATA[<blockquote>Because geeky toys never work quite right out of the box.</blockquote><h2 id="introduction">Introduction</h2>
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.
In general, the NAS’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.
<h2 id="enabling-services">Enabling Services</h2>
DSM 5.0 includes two independent groups of service settings for SSH and SCP/SFTP.
Enable the SSH service by checking the Control Panel → “Terminal & SNMP” menu → “Terminal” tab → “Enable SSH service” checkbox.
Enable the SFTP service (not to be confused with FTPS!) by checking the Control Panel → “File Services” menu → “FTP” tab → “SFTP” group → “Enable SFTP service” checkbox.
<h2 id="enabling-ssh-users">Enabling SSH Users</h2>
At this point, you should be able to successfully SSH to your NAS when authenticating as <code>root</code> or <code>admin</code>. Both users will have the password you chose for <code>admin</code> during setup. By default, those are the only two users that will be able to log in via SSH.
If you’d like to enable SSH for other users, SSH in as root, and edit the file <code>/etc/passwd</code> with vi. Each user has a corresponding line in this file, and a user’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>/sbin/nologin</code> won’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>/bin/sh</code>. Be careful when editing the <code>/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.
<h2 id="enabling-the-user-home-service">Enabling the User Home Service</h2>
Upon SSHing in as any user besides <code>root</code>, you might see a warning message (this example is for the “admin” user):
<pre><code>Could not chdir to home directory /var/services/homes/admin: No such file or directory
</code></pre>
This warning happens because home directories are controlled by DSM’s “user home service”, which is disabled by default. To prevent the error, enable the user home service by checking the Control Panel → “User” menu → “Advanced” tab → “User Home” group → “Enable user home service” checkbox.
I recommend enabling the user home service even if you don’t plan on using home directories, since leaving it disabled may cause some programs that rely on SCP/SFTP (<code>rsync</code>, etc) to abort with errors, regardless of which directory you’re trying to manipulate.
By default, a given user’s home directory is located at <code>/volume1/homes/username</code>.
<h2 id="fixing-home-directory-permissions-for-ssh-public-key-authentication">Fixing Home Directory Permissions for SSH Public Key Authentication</h2>
If you plan to use SSH public key authentication for a given user, the default permissions on user’s home directories will prevent that. Making the permissions more restrictive (doing a <code>chmod 755</code> on a user’s home directory as <code>root</code>) will allow SSH public key authentication to work properly. Of course, the user’s <code>~/.ssh</code> folder and <code>~/.ssh/authorized_keys</code> file also need to have the correct permissions (<code>chmod 700</code> and <code>chmod 644</code>, respectively.)
<h2 id="the-finish-line">The Finish Line</h2>
After performing all of the aforementioned configuration tweaks, you should now have a painless SSH and SCP/SFTP experience with your Synology DiskStation NAS.
One final tip: I’ve determined through experimentation that shared folders are served relative to the filesystem root (<code>/shared_folder</code>) when accessing the NAS via SFTP, but are served relative to the volume folder (<code>/volume1/shared_folder</code>) when using SCP. If specifying paths one way doesn’t work, try the other way.
]]>
</content>
</entry><entry>
<title>Everyday Carry</title>
<link rel="alternate" type="text/html" href="https://joshdick.net/2014/02/01/everyday_carry" />
<id>tag:joshdick.net,2014:/2014/02/01/everyday_carry.html</id>
<published>2014-02-01T00:00:00Z</published>
<updated>2014-02-01T00:00:00Z</updated>
<author>
<name>Josh Dick</name>
<uri>https://joshdick.net</uri>
</author>
<content type="html" xml:lang="en">
<![CDATA[<blockquote>What’s in your pockets right now?</blockquote>What’s in your pockets right now?
Maybe you have a bag with you, what’s in there?
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: “everyday carry”, or EDC.
<a href="http://en.wikipedia.org/wiki/Everyday_carry">Wikipedia defines everyday carry</a> better than I ever could (selections edited):
<blockquote>
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.
The term EDC also refers to the philosophy or spirit of “preparedness” that goes along with the selection and carrying of these items. Implicit in the term is the sense that an EDC is an individual’s personal selection of equipment, arrived at after deliberation, rather than a standardized kit.
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.
</blockquote>
EDC is a hobby of sorts, so it shouldn’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.
I’ve always loved gadgets of all kinds, and thus gave lots of thought to my EDC long before I first heard the term.
Before reading any further, you should know that I don’t consider myself to be an expert in any of the topics I’m going to mention, just someone who is enthusiastic about EDC and who has done a fair bit of research. It’s possible that there could be inaccuracies in what I’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.
<h2 id="why-care-about-everyday-carry">Why Care About Everyday Carry?</h2>
My mentality has a lot to do with what <a href="http://dcurt.is/the-best">Dustin Curtis refers to as “The Best”</a>. Here are some relevant excerpts:
<blockquote>
“The best” isn’t necessarily a product or thing. It’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’s market, manufacture, and design, and that you can navigate deceptive pricing and marketing. It requires that you find the best thing for yourself, which means you need to know what actually matters to you.
If you’re an unreasonable person, trust me: the time it takes to find the best of something is completely worth it. It’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.
</blockquote>
From an EDC perspective, “the best” doesn’t necessarily mean “the most expensive” or “the flashiest”. To me, it means that each individual item in a person’s EDC is the ideal realization of that item for that person. It also means that all of the items in a person’s EDC should cohesively complement each other as the best possible EDC for that person. It means that the things a person carries with them every day should deserve to be carried every day.
For example, if you carry a wallet, is your wallet really “the best” 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?
I am obsessed with removing frustrations like these, and that’s why I care about finding “the best” 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.
All of that said, there’s no such thing as the “perfect EDC”. A person’s EDC will naturally change and evolve over time to meet their needs, always working towards “the best” EDC for them. What’s more, one person’s ideal EDC certainly isn’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.
<h2 id="my-everyday-carry">My Everyday Carry</h2>
Seeing others’ EDC is both informative and fascinating, not only because you can draw inspiration for your own EDC, but also because it’s interesting to see the stories that people’s possessions tell about them.
To that end, I’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 “EDC proper” to be the things I carry almost all of the time, regardless of the situation or context.
Without any further ado, here’s what it looks like:
<img src="/post_assets/2014/02/edc_overall.jpg" alt="Josh’s EDC">
So, what is all that stuff?
<h3 id="wallet">Wallet</h3>
I’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’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>:
<blockquote>
“Buy good things, own them for a long time.”
That napkin wisdom is borrowed from the internets and it’s message is the basis of my philosophy. Today’s “buy it cheap then throw it away” 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.
While I believe that “the best things in life aren’t things,” 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…
</blockquote>
Sound familiar?
I love the Park Sloper Senior because it looks classy, it’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 “jeans back pocket” wallet, which isn’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’ve found works well for me—better than any productivity-related iPhone app I’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’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’t smear all over my hand when I write.
Before arriving at the Park Sloper, in the past (going back a few years—I don’t buy wallets frequently and don’t want to have to), I’ve also tried:
<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>
<img src="/post_assets/2014/02/edc_watch.jpg" alt="Halios Tropik SS Watch">
I’ve always loved watches. With today’s ubiquitous mobile phones, many people no longer bother wearing a watch, but I can’t picture myself without one. I especially love mechanical watches (as in “no electricity involved”), although they certainly don’t keep time as accurately as quartz watches. I think there’s something special about keeping a tiny, intricate, dependable machine on your wrist, with you always.
When it comes to the outward look and design of a watch, I’m a fan of understated simplicity. I’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:
<ul>
<li>The watch in the picture is the <a href="http://halioswatches.com/tropikss/">Halios Tropik SS</a>. It’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’s more affordable than the Halios.</li>
<li>My “beater” watch, which I wear in situations I wouldn’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’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>
If you’re intrigued by mechanical watches but have reservations about buying one, they don’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.
<h3 id="tools-gadgets-and-keys">Tools, Gadgets, and Keys</h3>
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.
<h4 id="pocket-danglerssuspension-clips">Pocket Danglers/Suspension Clips</h4>
Gadgets known as “pocket danglers” or “suspension clips” 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 “suspend” 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.
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’t use the twist assist, it’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’t obstructed by the items attached to it. I’ve tried a few other danglers/suspension clips in the past:
<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’ve listed. At $12 as of this writing, I think the clip is expensive for what it is. It didn’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>
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’s holes and are used to attach tools that don’t provide their own detaching/quick release mechanism. All other tools are directly attached to the dangler with split rings.
<h4 id="tools-on-the-69-dangler">Tools On the 69 Dangler</h4>
<img src="/post_assets/2014/02/edc_tools.jpg" alt="Josh’s EDC Tools">
From top to bottom, these are the items attached to the 69 dangler:
<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’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 “Split Pea” 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’t leak or evaporate. I don’t smoke, but I carry the lighter because it’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’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’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’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’t had any issues with the LaCie so far.</li>
</ul>
<h3 id="miscellaneous">Miscellaneous</h3>
There are a few other things I carry that don’t need much elaboration:
<ul>
<li><a href="http://www.burtsbees.com/Beeswax-Lip-Balm/11099-00-1,default,pd.html?cgid=lipbalm&start=2&q=#start=2">Burt’s Bees Beeswax Lip Balm</a>. I have perpetually dry lips year round, and the “cool burn” sensation of beeswax lip balm helps. I always peel the label off the Burt’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’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’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’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’s</a> excellent, free <a href="https://itunes.apple.com/us/app/pedometer++/id712286167">Pedometer++ App</a> makes the Shine somewhat redundant. The Shine’s automatic iPhone sync also doesn’t work reliably for me. Despite all of that, it fits in the coin pocket of my jeans and certainly isn’t weighing me down or getting in the way, so it’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’ve realized over time that I don’t really need to keep keys with all the time, so I’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>
…And there you have it: my EDC explained in painstaking detail. As you can see, I’ve put a lot of thought (and over time, a pretty penny) into my EDC, and it is constantly evolving.
<h2 id="other-thoughts-on-tools-and-gadgets">Other Thoughts on Tools and Gadgets</h2>
There are several types/categories of tools I used to carry that have either been displaced by what I’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.
Needless to say, researching and choosing tools in these categories can easily be overwhelming.
Most of these categories have Internet communities dedicated to them, which can help with research. Although I don’t participate directly in most of the communities I’m going to mention, I’ve discovered them through Google and other Internet EDC research.
<h3 id="flashlights">Flashlights</h3>
I’ve carried flashlights for a very long time. I use them constantly, whether it’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’t worth the space they occupied in my pocket.
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 tiny, 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’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’s battery, and therefore less likely to let me down when I need to rely on the light.
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’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.
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>.
<h3 id="knives">Knives</h3>
I don’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’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’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.
There’s a lot to learn about knives, including types of blade steels and shapes, handle (“scale”) 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öker</a>.
Although I no longer regularly EDC a folding knife, I still have some favorites:
<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’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öker Keycom</a>, which is probably the smallest frame-locking knife on the market today. It’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’s both cheap and extremely small while still being useful. That said, it’s a bit hard to open because of its size.</li>
</ul>
<h3 id="multitools">Multitools</h3>
I personally categorize multitools into two distinct groups. The first group is what I would call “conventional” multitools such as <a href="http://www.leatherman.com">Leatherman’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’s a matter of opinion.) The second group is what has come to be known as “one-piece multitools”, or “OPMTs”. OPMTs are generally milled from a single piece of metal and have no moving parts.
The predominant Internet multitool community is <a href="http://multitool.org">multitool.org</a>.
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.
I’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’s not technically a single piece of metal.)
That said, I’ve done the least amount of experimenting in the multitool category.
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>.)
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&_osacat=0&_from=R40&_nkw=atwood+tool&_sacat=0">resold with a large premium on eBay</a>. I’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’t use them often enough to justify their size and weight (and no, I still have them—I haven’t resold them on eBay!)
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.
<h2 id="in-conclusion">In Conclusion…</h2>
I’ve given you a detailed tour of my EDC, and I’ve explained the thinking behind some of my past and present EDC choices. I’ve also pointed out some resources that you can use to do your own EDC research.
EDC as a hobby can certainly be interesting and fun in and of itself, but don’t take it too 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.
Ultimately, your EDC is an expression of yourself, and should augment your day-to-day life. Get out there and live it!
<hr>
2014-02-02: Added information about the Uni-Ball Style Fit pen that was accidentally omitted.
]]>
</content>
</entry><entry>
<title>Forecast.io Weather on the Mac Desktop</title>
<link rel="alternate" type="text/html" href="https://joshdick.net/2013/10/10/forecast.io_weather_on_the_mac_desktop" />
<id>tag:joshdick.net,2013:/2013/10/10/forecast.io_weather_on_the_mac_desktop.html</id>
<published>2013-10-10T00:00:00Z</published>
<updated>2013-10-10T00:00:00Z</updated>
<author>
<name>Josh Dick</name>
<uri>https://joshdick.net</uri>
</author>
<content type="html" xml:lang="en">
<![CDATA[<blockquote>Because I could.</blockquote>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’s desktop. I whipped up a solution that ended up looking like this:
<img src="/post_assets/2013/10/forecast_weather_example.png" alt="forecast.io Weather Example">
Read on to learn how get Forecast Embeds up and running on your Mac’s desktop.
<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>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>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>
Install the dependencies listed above, and grab a copy of the <a href="https://gist.github.com/joshdick/6919331"><code>forecast_snapshot.sh</code> script</a>.
</li>
<li>
Edit the variables in <code>forecast_snapshot.sh</code> to your liking.
You’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’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.
</li>
<li>
Run <code>forecast_snapshot.sh</code> and verify that the image file <code>/tmp/weather-full.png</code> is created on your system, and contains the font/text/weather information you expect.
</li>
<li>
Embed the <code>/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.
</li>
<li>
Make <code>forecast_snapshot.sh</code> automatically run on an interval (15 minutes seems reasonable). You can do this via GeekTool or <code>launchd</code>.
</li>
<li>
You’re done.
</li>
</ol>
<h2 id="final-thoughts">Final Thoughts</h2>
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’t be transparent and thus won’t blend in with your wallpaper.
]]>
</content>
</entry><entry>
<title>Making Git a Little Fuzzier</title>
<link rel="alternate" type="text/html" href="https://joshdick.net/2013/09/02/making_git_a_little_fuzzier" />
<id>tag:joshdick.net,2013:/2013/09/02/making_git_a_little_fuzzier.html</id>
<published>2013-09-02T00:00:00Z</published>
<updated>2013-09-02T00:00:00Z</updated>
<author>
<name>Josh Dick</name>
<uri>https://joshdick.net</uri>
</author>
<content type="html" xml:lang="en">
<![CDATA[<blockquote>A command-line wrapper for Git that does fuzzy filename matching.</blockquote>As I wrote in a <a href="/2012/12/30/my_git_prompt_for_zsh.html">previous post</a>, I constantly use <a href="http://git-scm.com">Git</a> on the command line. The command line is simply the fastest and easiest way for me to work with Git.
That said, one understandable aspect of working with Git on the command line is that file/directory paths must be explicitly specified. This means that while in the middle of typing a Git command, I often end up needing to do one or both of the following:
<ul>
<li>
Move a hand from the keyboard to the mouse in order to select and copy a path from the output of <code>git status</code>, then return to the keyboard to paste the path
</li>
<li>
<code>cd</code> to a random directory (usually aggressively ramming the tab key) in order to either get <code>git status</code> to spit out a copyable path, or at least low enough into the directory tree to be able to have <code>git <git command> .</code> manipulate the desired path(s)
</li>
</ul>
While neither of these take a long time, they’re both annoying.
After searching for tools to attack this problem and not finding anything that worked well for me, I decided to create <a href="http://joshdick.github.io/git-fuzzy/"><code>git-fuzzy</code></a>.
<code>git-fuzzy</code> simply wraps normal Git commands and (for now) assumes that its last argument should be a path that should be fuzzy-completed.
So, instead of having to do something like:
<pre><code> git add another/very/long/path/myawesomefile.ext
</code></pre>
<code>git-fuzzy</code> makes things pleasantly fuzzier:
<pre><code> git fuzzy add awesome
</code></pre>
The tool is tiny, basic and somewhat crude, but so far it gets the job done for me.
<code>git-fuzzy</code> is <a href="http://joshdick.github.io/git-fuzzy/">available on GitHub</a> and is <a href="https://npmjs.org/package/git-fuzzy">installable via <code>npm</code></a>.
If you end up using <code>git-fuzzy</code>, I’d love to hear your thoughts about it.
]]>
</content>
</entry><entry>
<title>An Event Apart Boston 2013</title>
<link rel="alternate" type="text/html" href="https://joshdick.net/2013/06/25/an_event_apart_boston_2013" />
<id>tag:joshdick.net,2013:/2013/06/25/an_event_apart_boston_2013.html</id>
<published>2013-06-25T00:00:00Z</published>
<updated>2013-06-25T00:00:00Z</updated>
<author>
<name>Josh Dick</name>
<uri>https://joshdick.net</uri>
</author>
<content type="html" xml:lang="en">
<![CDATA[<blockquote>My notes from An Event Apart, “the design conference for people who make websites”.</blockquote><img src="/post_assets/2013/06/aea_boston_2013_swag.jpg" alt="An Event Apart SWAG">
<a href="http://aneventapart.com">An Event Apart</a> bills itself as “the design conference for people who make websites.” <a href="/2012/08/19/an_event_apart_boston_2012.html">I attended last year</a>, and was very fortunate to be able to attend once again this year. Here are my notes in their entirety from <a href="http://aneventapart.com/2013/boston/">An Event Apart Boston 2013</a>. My notes are grouped by talk, in the order that each talk happened at the conference.
<h1 id="day-1-62413">Day 1: 6/24/13</h1>
<h2 id="jeffrey-zeldman---the-ten-commandments-of-web-design-zeldmancomhttpwwwzeldmancom-bull-zeldmanhttpstwittercomzeldman">Jeffrey Zeldman - The Ten Commandments of Web Design (<a href="http://www.zeldman.com">zeldman.com</a> • <a href="https://twitter.com/zeldman">@zeldman</a>)</h2>
<h3 id="thou-shalt-entertain">Thou Shalt Entertain</h3>
<ul>
<li>Take the opportunity to entertain when the situation would otherwise disappoint. (Example: entertaining 404 pages. “And why are we still calling them ‘404 pages’?”)</li>
<li>Humanize the experience by adding little copy touches (e.g. the <a href="https://www.google.com/search?q=flickr+language+greeting">dynamic multi-lingual greeting</a> on Flickr’s old site.)</li>
</ul>
<h3 id="test-everything-including-assumptions">Test Everything (Including Assumptions)</h3>
<ul>
<li>Test your work on as many devices as possible (for example, by using tools from Adobe, or open-source tools like <a href="http://viljamis.com/blog/2012/remote-preview/">Remote Preview</a>)</li>
<li>Challenge your own assumptions, don’t work in isolation.</li>
</ul>
<h3 id="thou-shalt-iterate">Thou Shalt Iterate</h3>
<ul>
<li>Sometimes inspiration comes from just working a lot and being dissatisfied.</li>
<li>“I move things around until they look right.” —Milton Glaser</li>
</ul>
<h3 id="thou-shalt-ship">Thou Shalt Ship</h3>
<ul>
<li>If you can’t delegate at the pixel level, you’ll never ship.</li>
<li>NOT shipping is great for consultants.</li>
</ul>
<h3 id="engage-thy-community">Engage Thy Community</h3>
<ul>
<li>Interact with customers and humanize your company rather than just selling product.</li>
<li><a href="http://alistapart.com/blog/post/embeddable-comments-yes-please">Embeddable comments</a> drive traffic between your site and other sites while engaging the community.</li>
</ul>
<h3 id="love-thy-user-as-thyself">Love Thy User As Thyself</h3>
<ul>
<li>Just give the user what they want, where they want, without dumbing anything down.</li>
</ul>
<h3 id="remember-the-content-and-keep-it-holy">Remember The Content And Keep It Holy</h3>
<ul>
<li>Get the right content to the right user at the right time.</li>
<li>Anything in the design that detracts from that should be cut; remove every distraction you possibly can.</li>
</ul>
<h3 id="thou-shalt-make-magic">Thou Shalt Make Magic</h3>
<ul>
<li>Make magic. Don’t try for perfection.</li>
<li>Instagram had a horrible web experience but was successful because they did one thing very well: their app.</li>
</ul>
<h3 id="thou-shalt-prioritize">Thou Shalt Prioritize</h3>
<h3 id="to-thine-own-self-be-true">To Thine Own Self Be True</h3>
<ul>
<li>Don’t make improvements for their own sake if they’re not really improvements.</li>
<li>Don’t change for the sake of change, or try to be something you’re not, have a reason for every change you make.</li>
</ul>
<h3 id="this-is-design-not-religion">This is design, not religion.</h3>
<hr>
<h2 id="jake-archibald---rendering-without-the-lumpy-bits-jakearchibaldcomhttpjakearchibaldcom-bull-jaffathecakehttpstwittercomjaffathecake">Jake Archibald - Rendering Without the Lumpy Bits (<a href="http://jakearchibald.com">jakearchibald.com</a> • <a href="https://twitter.com/jaffathecake">@jaffathecake</a>)</h2>
<ul>
<li>Graphics performance: The new developer challenge.</li>
<li>Until recently, the goal was for graphics performance to be usable (but not necessarily “good”).</li>
<li>Browsers maintain a render tree that parallels the DOM. Changes to the render tree cause reflows.
<ul>
<li>The render tree doesn’t perfectly parallel the DOM; it contains pseudo elements, shadow DOM, etc.</li>
</ul>
</li>
<li>100ms total render time feels “instant” to a user.</li>
<li>Layout thrashing is caused by querying/reading style attributes inside a loop that also changes style attributes.</li>
<li>To prevent layout thrashing, query/read starting values outside loops.</li>
<li>Scrolling isn’t necessarily expensive from a painting perspective; it just moves the viewport around what has already been painted.</li>
<li>Fixed background images cause expensive repaints when scrolling—avoid them! Instead, use a background image that scrolls with the content to avoid repaints. (That may change since it depends on the browser implementation.)</li>
<li>On mobile, native <code>click</code> events have a 300ms delay since the browser waits to confirm whether the user is single- or double-tapping. Can work around this by:
<ul>
<li>Using <code>touchstart</code>/<code>touchend</code> events, but that may have unintended side-effects, unintentionally triggering those events when scrolling</li>
<li>Using a fixed viewport, which causes some browsers to intelligently disable double-tap detection</li>
<li>Using the <a href="https://github.com/ftlabs/fastclick">fastclick</a> library</li>
</ul>
</li>
<li>For displays that refresh at 60 Hz, 16.67ms is the frame scheduling deadline.</li>
<li><code>setTimeout()</code> isn’t accurate enough for animations (frame scheduling.)
<ul>
<li>Even with high frame rates, animations will appear jittery since the frames aren’t in sync with the refresh rate.</li>
<li>Instead, use <code>requestAnimationFrame()</code>, which has great browser support.</li>
</ul>
</li>
<li>24 FPS content shown on a screen with a 60 Hz refresh rate causes 3:2 pulldown since every other frame is extended to three refreshes. (For 50 Hz refresh rate, 24 FPS video is shown at 25 FPS; it’s played slightly faster!)</li>
<li>Software rendering caused the old <a href="http://www.mrdoob.com/lab/javascript/effects/ie6/">“IE error effect”</a>. Modern operating systems use hardware rendering.</li>
<li>Let the browser use hardware rendering as often as possible:
<ul>
<li>For the time being, use CSS 3D transform hacks where appropriate, but beware of the side effects, like hitting the GPU memory barrier on mobile.</li>
<li>For CSS, animate using transforms instead of <code>left</code>/<code>top</code>.</li>
<li>Animations using <code>left</code>/<code>top</code> look jittery since they snap to the pixel grid; transforms don’t snap to the pixel grid.</li>
<li>There are no magic rules around transforms and layering.</li>
<li>Don’t trust performance tips, test everything yourself!</li>
</ul>
</li>
<li>Things that trigger new hardware rendering layers:
<ul>
<li>3D transforms</li>
<li>Animation/transforms/opacity/filters</li>
<li>Flash/Silverlight</li>
<li>Canvas</li>
<li>Video</li>
<li>Fixed position elements (sometimes)</li>
<li>Fixed backgrounds (soon!)</li>
<li>Anything on top of a layer</li>
</ul>
</li>
</ul>
<hr>
<h2 id="kevin-m-hoffman---designing-meetings-to-work-for-design-kevinmhoffmancomhttpwwwkevinmhoffmancom-bull-kevinmhoffmanhttpstwittercomkevinmhoffman">Kevin M. Hoffman - Designing Meetings to Work for Design (<a href="http://www.kevinmhoffman.com">kevinmhoffman.com</a> • <a href="https://twitter.com/kevinmhoffman">@kevinmhoffman</a>)</h2>
<ul>
<li>How do we collaborate better?</li>
<li><a href="http://marshmallowchallenge.com/">Marshmallow Challenge</a> team-building exercise: Of all age groups, Kindergartners are best at it because they spend most of their time doing rather than thinking.</li>
<li>Don’t be afraid to fail.</li>
<li>Rapidly iterate.</li>
<li>Don’t plan, don’t discuss: just build (rapid prototyping).</li>
<li>What’s better than hearing and seeing is discussing; a good meeting is an active discussion.</li>
<li>Your ability to retain the most information is when you’re making and managing something.</li>
<li>Doing is better than seeing, which is better than hearing.</li>
<li>“If you’re not prepared to be wrong, you’ll never come up with anything original.” —Sir Ken Robinson</li>
<li>Be wrong at the right time. Allow for failure in design meetings; that’s much better than failing after you ship!</li>
</ul>
<h3 id="4-frameworks-for-better-design-meetings">4 frameworks for better design meetings</h3>
<ol>
<li>Always diverge before you try to converge.
<ul>
<li>Start the meeting with an opportunity for the discussion to expand, then arrive at a decision at the end.</li>
</ul>
</li>
<li>OARR: Outcomes, Agenda, Rules, Roles (David Sibbett)
<ul>
<li>Employ the four roles that make meetings productive:
<ul>
<li>Facilitator: Neutral, doesn’t evaluate or contribute ideas, just manages the meeting.</li>
<li>Recorder: Creates group memory, records publicly, like on a whiteboard, is silent, and follows up afterwards.</li>
<li>Group member: Contributes ideas, stays positive, isn’t defensive, checks/balances other members and the facilitator.</li>
<li>Leader: Designs the meeting, selects attendees and roles, decides upon goals, and becomes a group member during the meeting.</li>
</ul>
</li>
<li>If you’re not in charge of the meeting, the biggest way to affect it is public recording. Volunteer to do it, you’ll help everyone in the room to be more productive and cut down on repeating themselves.</li>
<li>Distribute/take turns in each role so everyone gets an equal opportunity to contribute.</li>
<li>For small meetings, there’s no need for all roles, but someone should still serve as a facilitator/recorder.</li>
<li>3 questions of design: What has to stay the same? What can be changed? What can be eliminated?</li>
<li>Instead of discussing, have everyone write their feedback on color-coded, groupable stickies; you end up creating user requirements/user stories just by virtue of going through that process.</li>
</ul>
</li>
<li>Visual listening (via sketching) improves discussion and adds context.
<ul>
<li>Visual memory and recall are powerful.</li>
<li>Live-sketching a meeting could be useful; if you’re less artistically inclined, sketching your thoughts beforehand is also useful.</li>
</ul>
</li>
<li>Present and design ideas collaboratively.
<ul>
<li>Do actual work in the meeting, don’t just talk about work.</li>
<li>Example: When presenting personas, use something familiar like television characters rather than “generic” personas.</li>
<li>Example: For designing responsive content strategy, label every piece of content on the page. Split the content into groups, and let teams of people rate the priority of the cards inside each group. That way you have a mix of perspectives ranking the importance of a distributed variety of content elements.</li>
<li>Example: For designing interfaces, have small cross-disciplinary groups sketch as many concepts as they can. Then have groups repeatedly combine into larger groups and iterate on the design.</li>
</ul>
</li>
</ol>
<hr>
<h2 id="luke-wroblewski---its-a-writeread-mobile-web-lukewcomhttpwwwlukewcom-bull-lukewhttpstwittercomlukew">Luke Wroblewski - It’s a Write/Read (Mobile) Web (<a href="http://www.lukew.com">lukew.com</a> • <a href="https://twitter.com/lukew">@lukew</a>)</h2>
<ul>
<li>The 5 most popular web sites in the U.S.—Facebook, Yahoo, AIM, Google, and YouTube—are all write/read experiences; they don’t work unless people add (write) content to them.</li>
<li>All of those sites are now moving to mobile.</li>
<li>“The mobile moment”: When the amount of your mobile users becomes larger than the number of your non-mobile users.</li>
<li>It’s a myth that mobile devices aren’t used for creating content. In 2011, 40% of tweets were created on mobile, and 3 hours of video per second were uploaded to YouTube via mobile.</li>
</ul>
<h3 id="how-do-we-design-for-mobile-creation">How do we design for mobile creation?</h3>
<h4 id="one-handed-use">One-handed Use</h4>
<ul>
<li>Test with one thumb!</li>
<li>iOS 7 will have improved gestures for single-thumb use.</li>
<li>“What we need to do to design is to look at the extremes. The middle will take care of itself.” —Dan Formosa</li>
<li>Think about how the keyboard can be avoided at all costs. Don’t let the keyboard appear unless there’s no other way.
<ul>
<li>Use smart defaults and suggestions to avoid making the user type manually.</li>
<li>Let people type manually if they really want to.</li>
</ul>
</li>
</ul>
<h4 id="visually-engaging">Visually Engaging</h4>
<ul>
<li>Images rule on mobile (and not just in social apps!)</li>
<li>Images are one of the best mediums for communication on mobile.</li>
<li>Imagery has a huge impact in commerce (eBay, hotel booking, etc.)</li>
<li>Performance is still important: We should work hard to keep things visually engaging without impacting performance.</li>
</ul>
<h4 id="focused-flows">Focused Flows</h4>
<ul>
<li>The user should have to do as little work as possible to accomplish a core task (Examples: Foursquare check-in, booking a hotel, etc.)</li>
<li>“Creativity is people who care enough to keep thinking about something until they find the simplest way to do it.” —Tim Cook</li>
<li>“Booking a hotel happens in 3 taps and a swipe. This is a competitive advantage.” —Sam Shank, CEO of HotelTonight</li>
<li>It takes big changes to go small.</li>
<li>Yelp doesn’t allow users to write reviews from mobile since they view their users through the lens of the desktop; they’re worried users will write reviews using “SMS writing”.</li>
<li>HotelTonight allows users to write reviews using photos rather than typing them out.</li>
<li>If you’re making a lot of people uncomfortable with a big design decision, you’re probably on the right track.</li>
</ul>
<h4 id="just-in-time-actions">Just-In-Time Actions</h4>
<ul>
<li>“Intro tours” aren’t the best way to communicate how to create/make things in mobile apps. Instead, teach people in context using just-in-time education.</li>
<li>Show help or relevant actions when they’re needed rather than bombarding the user with all possible actions at once.</li>
<li>Example: When and if you’ve recently taken photos, the Google+ app shows recent photos for easy posting.</li>
<li>Example: When you start scrolling down in the Google+ app, the navigation bar jumps out of the way (but come back when you start scrolling back up.)</li>
</ul>
<h4 id="cross-device-usage">Cross Device Usage</h4>
<ul>
<li>Multiple devices can be used together for a cohesive input experience.</li>
<li>Access: Native apps vs. mobile web apps? They’re not necessarily opposites; use both at the same time. They can play off each other’s strengths.</li>
<li>Flow: Allows a process to travel across screens. (Example: Google Maps iOS and web apps share recently-entered data, eBay allows you to start creating a listing on one device and complete it on another.)</li>
<li>Control: One device can control another. (Example: <a href="http://oneid.com">OneID</a>)</li>
<li>Push: One device sending something to a different device. (Example: eBay allows users to add a photo from a mobile device when creating a listing using the desktop web site.)</li>
</ul>
<hr>
<h2 id="jason-grigsby---the-immobile-web-userfirstwebcomhttpuserfirstwebcom-bull-grigshttpstwittercomgrigs">Jason Grigsby - The Immobile Web (<a href="http://userfirstweb.com">userfirstweb.com</a> • <a href="https://twitter.com/grigs">@grigs</a>)</h2>
<ul>
<li>Televisions are the next wave in the “device zombie apocalypse.”</li>
<li>Televisions allow for cohesive experiences while using mobile devices. (Example: Game of Thrones shows extra info on SmartGlass.)</li>
<li>Big opportunity: An App Store on Apple TV.</li>
<li>The browsers built in to the newest televisions are actually surprisingly good; they pass HTML5/CSS3 tests.</li>
<li>The user experience of browsing the web on televisions is horrible; the biggest problem is input.</li>
<li>Two main methods of input for smart TVs: D-pads and pointers.
<ul>
<li>D-pads work very well when done properly. D-pads should not be used to control cursors.</li>
<li>Pointers work well with cursors, but precision is difficult.</li>
</ul>
</li>
<li>Gesture controls currently don’t work very well.</li>
<li>Remote control design is still evolving (touch areas, etc.)</li>
<li>Context is irrelevant for mobile users since we can’t know what it is, but context is becoming relevant for television.</li>
<li>Designs for 10-foot UIs should be task-oriented.</li>
<li>Hover is dead for mobile devices, but is back on TVs (for cursor input.)</li>
<li>Arbitrary <a href="http://www.w3.org/TR/css3-ui/">CSS</a> or JavaScript is still necessary to aid with input on televisions.</li>
<li>Televisions have inconsistent resolutions and overscan.</li>
<li>We need to put pressure on television browser makers to interoperate.</li>
<li>We still need to rely on device detection for the time being.</li>
<li>You can test designs on mobile devices at cell phone carrier stores, but can’t do the same for smart TVs since none of them have remotes or a wi-fi connection at stores.</li>
<li>What are people actually expecting when they buy a smart TV?
<ul>
<li>Storage capacity and processor speed aren’t listed as specs.</li>
<li>Do most people just want built-in Netflix?</li>
</ul>
</li>
<li>Are televisions the equivalent of cell phones before the iPhone?</li>
<li>Smart TVs suck right now, but it would be dangerous to dismiss them.</li>
<li>We can’t predict future behavior from a current experience that sucks.</li>
</ul>
<hr>
<h2 id="ethan-marcotte---the-map--the-territory-ethanmarcottecomhttpethanmarcottecom-bull-beephttpstwittercombeep">Ethan Marcotte - The Map & The Territory (<a href="http://ethanmarcotte.com">ethanmarcotte.com</a> • <a href="https://twitter.com/beep">@beep</a>)</h2>
<ul>
<li>Responsive designs use a fluid grid, flexible images, and media queries.</li>
<li>Converting a fixed grid to a fluid grid: target ÷ context = result</li>
<li>Media queries are sized to arbitrary <code>em</code> units based on readability, not screen/device measurements.</li>
<li>Across different resolutions (media queries), you can re-use the same navigational elements by repositioning them using absolute positioning. (Example: An element that is shown inside a submenu at small sizes can be repositioned into the main masthead at larger sizes. The basic functionality and markup don’t change between display sizes.)</li>
<li>Average page weight was 320 KB in 2009, and 1.4 MB in 2013. Over four years, average page weight has increased 400%.</li>
<li>“The more accurate the map, the more it resembles the territory. The most accurate map possible would be the territory, and thus would be perfectly accurate and perfectly useless.” —Neil Gaiman, American Gods</li>
<li>7 billion mobile subscriptions in 2013, 60% are on EDGE/CDMA.</li>
<li>Sustainability in web design:
<ul>
<li>Reduce: Reducing page weight can open your site to new markets. Use the <a href="http://microjs.com">smallest possible JavaScript libraries</a>.</li>
<li>Revisit: Revisit some of our old assumptions about design. The web is a new medium that needs a new aesthetic.</li>
</ul>
</li>
<li>“‘We don’t have any non-JavaScript users’ No, all your users are non-JS while they’re downloading your JS” —<a href="https://twitter.com/jaffathecake/status/207096228339658752">Jake Archibald</a></li>
<li>“What works good is better than what looks good, because what works good lasts.” —Ray Eames</li>
</ul>
<hr>
<h1 id="day-2-62513">Day 2: 6/25/13</h1>
<h2 id="karen-mcgrane---the-mobile-content-mandate-karenmcgranecomhttpkarenmcgranecom-bull-karenmcgranehttpstwittercomkarenmcgrane">Karen McGrane - The Mobile Content Mandate (<a href="http://karenmcgrane.com">karenmcgrane.com</a> • <a href="https://twitter.com/karenmcgrane">@karenmcgrane</a>)</h2>
<ul>
<li>“There is no reason for any individual to have a computer in his home.” —Ken Olsen, CEO of Digital Equipment Corporation</li>
<li>“There is no reason anyone will need to do that on mobile.” —Your company, probably</li>
<li>How could cheap PCs compete with minicomputers from DEC, the world’s second largest computer company in 1988?</li>
</ul>
<h3 id="disruptive-innovation">Disruptive Innovation</h3>
<blockquote>
In industry after industry…the new technologies that had brought the big, established companies to their knees weren’t better or more advanced—they were actually worse. The new products were low-end, dumb, shoddy, and in almost every way inferior. But the new products were usually cheaper and easier to use, and so people or companies who were not rich or sophisticated enough for the old ones started buying the new ones, and there were so many more of the regular people than there were of the rich, sophisticated people that the companies making the new products prospered.
</blockquote>
—<a href="http://www.newyorker.com/reporting/2012/05/14/120514fa_fact_macfarquhar">The New Yorker, When Giants Fail</a>
<ul>
<li>Examples:
<ul>
<li>Handcrafted, high-quality 1940s cabinet radios were replaced by cheaper, lower quality portable transistor radios.</li>
<li>Offset printers were replaced by cheap inkjet printers.</li>
<li>People predicted that digital cameras would disrupt the film industry, but nobody predicted that digital cameras would disrupt the entire camera industry (cameraphones, etc.)</li>
</ul>
</li>
<li>We’re currently experiencing the next great wave of computing.</li>
<li>Mobile devices are becoming a personal computing device for people who have never had access to the Internet before.</li>
<li>The iPhone was originally seen as a luxury, high-end cell phone as opposed to a really cheap computer.</li>
</ul>
<h3 id="the-mobile-only-user">The Mobile-Only User</h3>
<ul>
<li>Mobile phones and smartphones are not two different segments of the market, just like there weren’t two markets for color vs. black-and-white televisions.</li>
<li>Lots of minority groups don’t have access to the Internet or broadband at home, but nearly everyone has a phone.</li>
<li>Lots of minority groups only (or mostly) use the Internet on mobile.</li>
<li>“Mobile-optimized” sites usually have a paltry subset of the content of the “full desktop” version. This crutch has gotten us through the last five years of mobile adoption, but this isn’t good enough.</li>
<li>We can’t force users to pinch-and-zoom their way around desktop sites on a mobile device. (“It’s like reading a newspaper through a toilet paper tube.”)</li>
<li>Mobile users are being treated as second-class citizens since web designers expect that people will use the “real web site” on a desktop PC.</li>
</ul>
<h3 id="content-strategy-for-mobile">Content Strategy for Mobile</h3>
<h4 id="know-your-workflow">Know Your Workflow</h4>
<ul>
<li>There shouldn’t be separate “mobile” and “web” content teams.</li>
<li>Don’t fork your content for mobile: You would have to maintain and update two independent but similar pieces of content.</li>
<li>Being forced to be succinct sometimes makes existing mobile web sites better and easier to read than their desktop counterparts. If the mobile site is better, why isn’t it the site for everyone?</li>
<li>There’s no such thing as “how to write for mobile”; there’s just good writing!</li>
<li>Good content transcends platform. If you have interesting, well-written, appropriately structured content, it will easily make the link to mobile. (Example: <a href="http://www.cancer.org">American Cancer Society web site</a>.)</li>
</ul>
<h4 id="chunk-your-blobs">Chunk Your Blobs</h4>
<ul>
<li>Content shouldn’t be specifically associated with any part of the layout of a web page.</li>
<li>Which content should be included or excluded?</li>
<li>Should longer pages be broken into shorter ones?</li>
<li>Will it work to reuse headings as links?</li>
<li>Will it work to truncate body copy for teasers? (Example: This doesn’t work for Amazon’s mobile site; the truncated body copy has no value since product names and specs are just repeated.</li>
<li>Responsive design won’t fix your content problem.</li>
<li>The Daily Beast, NPR, and The Guardian truncate headlines rather than giving them proper real estate on mobile. (<a href="http://guardiantruncationteam.tumblr.com">http://guardiantruncationteam.tumblr.com</a>)</li>
<li>Either give headlines more real estate, or write shorter headlines.</li>
<li>Netflix is a great example of chunked content—it is available on hundreds of devices but they never truncate content; they show the appropriate amount of detail/content for a given platform.</li>
</ul>
<h3 id="in-conclusion">In Conclusion</h3>
<ul>
<li>Don’t create content for a specific context.</li>
<li>You don’t get to decide which device people use to access your content; they do.</li>
<li>Disruptive technologies eventually get good, or they redefine what good means.</li>
<li>Do mobile right, right from the start.</li>
</ul>
<hr>
<h2 id="eric-meyer---strong-layout-systems-meyerwebcomhttpmeyerwebcom-bull-meyerwebhttpstwittercommeyerweb">Eric Meyer - Strong Layout Systems (<a href="http://meyerweb.com">meyerweb.com</a> • <a href="https://twitter.com/meyerweb">@meyerweb</a>)</h2>
<ul>
<li>When it started out, CSS was an appearance system, not a layout system.</li>
<li>CSS1 had floats, but they weren’t meant to be used for layout. <code>clear</code> is the only reason we used floats for layout, otherwise we would have stuck with tables.</li>
<li>“<code>clear</code> was a screwdriver we used to pound in a nail since no one had given us a hammer yet.”</li>
<li>CSS2 added positioning, which helped slightly with layout. <a href="http://wired.com">Wired.com</a> had a 3-column layout in 2002.</li>
<li>Design decisions were made in the context of the limitations of the technology.</li>
<li>We’ve internalized the limitation that positioned/floated elements are only as tall as their content and that “float drop” can happen.</li>
<li>The old limitations of CSS have limited the scope of our perceived design choices/toolbox; unlearning these limitations and assumptions will become a vital skill.</li>
</ul>
<h3 id="viewport-units">Viewport Units</h3>
<ul>
<li><a href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">http://www.w3.org/TR/css3-values/#viewport-relative-lengths</a></li>
<li>Viewport units look similar to percentage units but they’re not. Percentage elements size relative to their parent element while viewport elements size relative to the viewport.</li>
</ul>
<h3 id="flexbox">Flexbox</h3>
<ul>
<li><a href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a></li>
<li>Reminiscent of table layouts but much more powerful.</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content"><code>justify-content</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a> replace the need to do width/margin/wrapping calculations.</li>
<li>Allows you to mix units (two elements that are placed next to each other can have different units.) The space between them isn’t margin or padding, it’s just available space not yet “eaten up” by the flexbox algorithm.</li>
<li><code>display: flex</code> must be applied to the parent element of whatever elements you want to be flexible.</li>
<li>Flexible elements can be rearranged at will with <code>order</code>. Regardless of order, selectors (<code>:first-child</code>, <code>:last-child</code>, etc.) will still respect the DOM and ignore the flex flow.</li>
<li>There’s nothing stopping an element that’s flexible from also being the master context for its own flexible children.</li>
</ul>
<h3 id="grid-layout">Grid Layout</h3>
<ul>
<li><a href="http://www.w3.org/TR/css3-grid-layout/">http://www.w3.org/TR/css3-grid-layout/</a></li>
<li><a href="http://caniuse.com/#feat=css-grid">Browser support isn’t great yet</a>, since the standard is still being [re]written.</li>
<li>Grids can be nested, and mixed and matched with flexbox.</li>
<li>Simple syntax (but simple doesn’t necessarily mean easy!)</li>
</ul>
<h3 id="regions-and-shapes">Regions and Shapes</h3>
<ul>
<li><a href="http://www.w3.org/TR/css3-regions/">http://www.w3.org/TR/css3-regions/</a>, <a href="http://www.w3.org/TR/css-shapes-1/">http://www.w3.org/TR/css-shapes-1/</a></li>
<li>Regions separate layout from content by allowing content to flow between elements.</li>
<li>Not the web as we’re used to it, but may become the web as we’re used to it very soon.</li>
<li>Can combine regions and shapes to mimic complex print layouts.</li>
</ul>
<hr>
<h2 id="lea-verou---deep-css-secrets-veroumehttpveroume-bull-leaverouhttpstwittercomleaverou">Lea Verou - Deep CSS Secrets (<a href="http://verou.me">verou.me</a> • <a href="https://twitter.com/LeaVerou">@LeaVerou</a>)</h2>
Interactive slides are available at <a href="http://lea.verou.me/more-css-secrets">http://lea.verou.me/more-css-secrets</a>.
<h3 id="background-attachment-local"><code>background-attachment: local;</code></h3>
<ul>
<li>Background scrolls with the page and with the element.</li>
<li>Can be used to implement “more content” indicators inside scrollable areas à la Google Reader: can be applied to elements that block the “more content” indicators when scrolled to the top or bottom of a scrollable area.</li>
<li>Decent browser support (except Firefox).</li>
<li><a href="http://lea.verou.me/2012/04/background-attachment-local/">http://lea.verou.me/2012/04/background-attachment-local/</a></li>
</ul>
<h3 id="fixed-width-fluid-background">Fixed Width, Fluid Background</h3>
<ul>
<li>An effect where the background resizes but the content width is fixed.</li>
<li>You don’t need wrapper elements and inner elements with margins, just use <code>padding</code> with <code>calc</code>.</li>
<li><a href="http://caniuse.com/#feat=calc">Decent browser support for <code>calc</code></a> (except Opera).</li>
</ul>
<h3 id="lightboxes">Lightboxes</h3>
<ul>
<li>An effect where an image is displayed by expanding the width and then the height.</li>
<li>Combine independent <a href="http://www.w3.org/TR/css3-transitions/">CSS transitions</a> for height and width, and add a delay the 2nd transition.</li>
<li>Can exploit the fact that the CSS <code>transition</code> property itself does not transition.</li>
<li><a href="http://caniuse.com/#feat=css-transitions">Decent browser support for CSS transitions</a>.</li>
</ul>
<h3 id="lined-paperzebra-striping-effect">Lined Paper/Zebra Striping Effect</h3>
<ul>
<li>Create a background by tiling a linear gradient. Space the tiling using the <code>line-height</code> of the text.</li>
<li>Can also make the background lines respect padding by using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin"><code>background-origin</code> property</a> (<code>background-origin: content-box;</code>)</li>
<li>Can also use the same principles to zebra-stripe text, without needing wrapping elements for each stripe.</li>
<li><a href="http://caniuse.com/#feat=background-img-opts">Decent browser support for <code>background-origin</code>.</a></li>
</ul>
<h3 id="diamond-outlined-images">Diamond-Outlined Images</h3>
<ul>
<li>Wrap an image with a wrapping element, rotate the wrapping element by 45 degrees, then rotate the image -45 degrees.</li>
<li>Rotation is achieved using CSS transforms.</li>
<li><a href="http://caniuse.com/#feat=transforms2d">Decent browser support for CSS transforms.</a></li>
</ul>
<h3 id="make-elements-trace-a-circular-path">Make Elements Trace a Circular Path</h3>
<ul>
<li>One solution: Make a wrapper element trace a circle using CSS animation and <code>transform-origin</code>, then counter-rotate the original element so it always faces the same direction while tracing a circular path (doesn’t rotate in place.)</li>
<li>Optimize by reusing the same <code>@keyframes</code> for both animations, but reverse one animation with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction"><code>animation-direction</code></a>.</li>
<li>Multiple transforms layer on each other; transforms stack on top of any changes caused by the previous transforms.</li>
<li><a href="http://caniuse.com/#feat=css-animation">Decent browser support for CSS animations.</a></li>
</ul>
<h3 id="non-boxy-shadows">Non-Boxy Shadows</h3>
<ul>
<li>Use <code>filter: drop-shadow</code> instead of <code>box-shadow</code> to draw shadows behind irregularly shaped elements (like speech bubbles).</li>
<li>Can use SVG filters for browsers that don’t support CSS filters.</li>
<li><a href="http://caniuse.com/#feat=css-filters">Poor browser support for CSS filters.</a></li>
</ul>
<h3 id="glass-pane-effect">Glass Pane Effect</h3>
<ul>
<li>Text written inside a “glass pane” element positioned over a background image is hard to read. How do we blur the background of the glass pane without blurring the text?</li>
<li>Add a <code>:before</code> pseudo-element to the glass pane, give it the same background image as the preexisting background image, and blur it using <code>filter: blur</code>.</li>
<li>Allows you to not need an alternate pre-blurred version of the background image.</li>
<li>Messy background positioning unfortunately still applies.</li>
<li>Degrades gracefully for browsers that don’t support CSS filters—the image will just be transparent instead of blurred.</li>
</ul>
<h3 id="hyphens-property"><code>hyphens</code> Property</h3>
<ul>
<li><code>hyphens: auto;</code> makes justified text much more readable; eliminates ugly whitespace rivers.</li>
<li><a href="http://caniuse.com/#feat=css-hyphens">Poor browser support for the <code>hyphens</code> property.</a></li>
</ul>
<h3 id="frame-animations">Frame Animations</h3>
<ul>
<li>An effect that achieves animation by manipulating the background position of an image that contains frames.</li>
<li>Use <code>steps</code> with CSS animations to do discrete easing rather than continuous easing. This shows each frame in succession instead of continuously sliding the background image.</li>
<li><a href="http://lea.verou.me/2011/09/pure-css3-typing-animation-with-steps/">http://lea.verou.me/2011/09/pure-css3-typing-animation-with-steps/</a></li>
<li><a href="http://jsfiddle.net/simurai/CGmCe/light/">http://jsfiddle.net/simurai/CGmCe/light/</a></li>
</ul>
<hr>
<h2 id="kim-goodwin---silo-busting-with-scenarios-kimgoodwinhttpstwittercomkimgoodwin">Kim Goodwin - Silo-Busting with Scenarios (<a href="https://twitter.com/kimgoodwin">@kimgoodwin</a>)</h2>
<ul>
<li>Organizing teams by platform/geography/features limits those teams’ worldviews.</li>
<li>Example of an agile user story: “As a user, I want to log in to access my account.”
<ul>
<li>When has a real user said, “Gee, I want to ’log in’?”</li>
</ul>
</li>
<li>We all fall victim to having siloed mindsets, even for low-level functionality.</li>
<li>A scenario is a plausible future story about a persona using the product or service from start to finish.</li>
<li>Scenarios involve and star human characters, not just roles (“user” or “admin” are just roles.) We’re people, not roles.</li>
<li>Good process oscillates between generative (divergent) and analytical (convergent).</li>
<li>First rule of user research: Forget what you’re building since that will make you think much too narrowly.</li>
<li>User research can clarify and expose information about the big picture and the problem you’re trying to solve, rather than just what you’re building.</li>
<li>Create a journey map—what frustrates the user during the entire process of achieving their own goals?</li>
<li>After that, what can we do to “un-suckify” the worst part(s) of the experience?</li>
<li>Just like you wouldn’t call a good restaurant “really edible”, good usability isn’t good enough—we have to go out of our way to delight users. “Our job is to be delightfulness experts.”</li>
<li>Add something unexpectedly good. What would a helpful human do?</li>
<li>Make it a story.</li>
<li>Once all of the information is collected, discuss and decide on priorities with stakeholders.</li>
<li>Look at your silo, informed by the bigger journey.</li>
<li>Use scenarios to guide rough storyboards: What’s on the screen and how it’s laid out. Don’t stress about widgets and words.</li>
<li>Look for convergence between scenarios, but prioritize as you converge.</li>
<li>Scenarios drive site structure.</li>
<li>Polish the details.</li>
<li>Avoid UX purgatory.</li>
<li>Good experiences only happen when everyone who is responsible for part of the experience is invested in creating the whole experience.</li>
</ul>
<hr>
<h2 id="mike-monteiro---what-clients-dont-know-and-why-its-your-fault-mikemonteirocomhttpmikemonteirocom-bull-mike_ftwhttpstwittercommike_ftw">Mike Monteiro - What Clients Don’t Know (and Why It’s Your Fault) (<a href="http://mikemonteiro.com">mikemonteiro.com</a> • <a href="https://twitter.com/Mike_FTW">@Mike_FTW</a>)</h2>
<ul>
<li>Designers: You are in the service industry! You have clients and they need your help.</li>
<li>We get irritated by having to explain what is second nature to us.</li>
<li>To those on the outside, the process of buying design is as mysterious as making it. It’s all magic.</li>
<li>If you’re a designer, you’re in the confidence game.</li>
<li>Designers need to have empathy for clients.</li>
<li>Your job isn’t just making things, that’s the easy part! It’s convincing people that the shit you thought up in the shower that morning is right.</li>
<li>If it helps you do your job, it’s part of your job.</li>
<li>Don’t work with anyone you can’t respect, since you won’t be able to empathize with them.</li>
<li>Put yourself in your clients’ less stylish shoes.</li>
<li>You can’t change how others behave, but you can change how you behave and react to a situation to meet a common goal.</li>
<li>Clients don’t know when to get a designer involved.</li>
<li>“‘Creative’ is a hate word. My mother raised three kids on a seamstress’s salary—THAT’S creative.”</li>
<li>“As long as you act like a disenfranchised ‘creative,’ that’s how you deserve to be treated.”</li>
<li>Eye rolling is not a design skill.</li>
<li>Complaining is not a design skill.</li>
<li>“They never asked me” is not a design skill.</li>
<li>Stop waiting for an invitation to do your job—assert yourself.</li>
<li>Clients don’t know the best way to evaluate a designer.</li>
<li>Clients don’t know how to read your portfolio—the work does not speak for itself.</li>
<li>Retail suit store: “Don’t sell the suit, sell the service.”</li>
<li>“Sell [clients] the services you provide, using your sites as props.”</li>
<li>Be upfront and let clients know if you’re not the right person for the job.</li>
<li>Referrals are awesome—if you get a referral, it means you’re not an asshole. Nobody is going to put someone they know in the hands of an asshole.</li>
<li>Every job you do is a sales pitch for the next job.</li>
<li>RFPs may be a client’s way to tell you that they’re scared.</li>
<li>On fighting with clients about RFPs: “As long as we keep doing it, no one is going to stop expecting it.”</li>
<li>Pick up the phone.</li>
<li>Learn to say no.</li>
<li>Learn to ask why.</li>
<li>Learn to say I don’t know.</li>
<li>Clients want reassurance that they’ll be in good hands with you, so they ask for the one thing they’re familiar with—the outcome! “Let’s have them do comps!”</li>
<li>As a designer, it’s your job to walk them back from that conclusion and figure out the issue they’re trying to solve.</li>
<li>“The process you have that gets you from one point to another is only as good as your willingness to stand up for it.”</li>
<li>“Show the client they’re in good hands, not by reacting to their request, but by addressing the fear behind that request.”</li>
<li>“Never work for someone you can’t argue with. Show clients you’re not going to let anyone mess up the process, even them.”</li>
<li>Clients don’t know why things cost what they do.</li>
<li>Design is a solution to a problem within a set of constraints.</li>
<li>“Your budget is one of the most important constraints there is. Don’t make it a secret, make it a data point.”</li>
<li>Clients don’t know what the process looks like.</li>
<li>Your process is a mystery. Clients don’t want to think about it.</li>
<li>Clients deal with the unknown by applying their own process, which is comfortable and familiar to them.</li>
<li>Do everything in your power to be right, but never be afraid to be wrong.</li>
<li>Letting a client tell you how to do your job is stupid. “Nature abhors a vacuum. So do clients. They will fill it.”</li>
<li>It’s not their job—it’s yours!</li>
<li>Never, ever, ever throw another designer under the bus to advance your own agenda. (“You should clap for that!”)</li>
<li>No one is born a good client, just like no one is born a good designer.</li>
<li>A doctor wouldn’t be able to have a conversation with you about an ailment on par with how he would converse about it with another doctor.</li>
<li>“Please take all my clients from me.”</li>
<li>You are a terrible mind reader.</li>
<li>“‘Hope’ is not a design word. ‘Empathy’ is.”</li>
<li>The way to become a better designer is to help clients become better clients.</li>
<li>You are not a pixelpusher.</li>
<li>You are responsible for what you bring into the world.</li>
<li>Everything that’s wrong with design today is your fault—and that is good news!</li>
<li>Working together with mutual respect can fix any problem you set your mind to.</li>
</ul>
<hr>
<h2 id="jared-spool---its-a-great-time-to-be-a-ux-designer-uiecomhttpuiecom-bull-jmspoolhttpstwittercomjmspool">Jared Spool - It’s a Great Time To Be a UX Designer (<a href="http://uie.com">uie.com</a> • <a href="https://twitter.com/jmspool">@jmspool</a>)</h2>
<ul>
<li>Design is the rendering of intent.</li>
<li>Intention falls on a scale that spans from imitation to innovation (and corresponding expense, risk, and value.)</li>
<li>Business wins when it is intentionally innovative, and when it values designers.</li>
<li>Example: Airbnb ousted Craigslist for vacation rentals, which itself ousted newspaper classified ads.</li>
<li>Design is no longer about the visual; it’s about the business.</li>
<li>Great business models are intentionally designed. (Example: Apple’s end-to-end manufacturing, distribution, and sales.)</li>
<li>“The largest room in the world is the room for improvement.”</li>
<li>On Apple: “How cool would it be to have ‘Genius’ on your business card? That would totally change Thanksgiving.”</li>
<li>Innovation is not adding new invention; innovation is adding new value.</li>
<li>Experiences can be mapped, measured, and designed. What do we intend?</li>
<li>Experience design: The rendering of intent within the gaps. (Example: <a href="http://www.gehealthcare.com/promo/advseries/adventure_series.html">GE Adventure Series</a>)</li>
<li>Old Chinese proverb: Be careful what you ask for, lest it become so.</li>
<li>The best designers are good at storytelling, critiquing, sketching, presenting, and facilitating.</li>
<li>Specialists have more expertise in one area over others, generalists have equal expertise in most areas. Compartmentalists have expertise in a single area.</li>
<li>Teams need generalists more than specialists. Compartmentalists are the least valuable—being a compartmentalist is a career-limiting decision.</li>
<li>Experience designer: also known as a unicorn. (People don’t believe they exist.)</li>
<li>How do you make a unicorn?
<ol>
<li>Train yourself</li>
<li>Practice your skills</li>
<li>Deconstruct as many designs as you can</li>
<li>Seek out feedback (and listen to it)</li>
<li>Teach others (you learn something when you teach something)</li>
</ol>
</li>
<li>The unicorn is design’s most important innovation.</li>
</ul>
<hr>
<h1 id="conclusion">Conclusion</h1>
Interestingly, my takeaways are almost identical to last year’s (mobile, mobile, mobile!):
<ul>
<li>Design a single experience that works well on mobile and on the desktop (mobile-first, responsive.)</li>
<li>Let mobile be the measuring stick for your content—if you don’t need it on mobile, do you need it at all?</li>
<li>Since mobile and desktop should be a single experience, they should have complete content and feature parity.</li>
<li>Performance (speed and data usage) is important, especially on mobile.</li>
</ul>
As a bonus, I also concluded that bacon cupcakes actually exist, and are in fact delicious:
<img src="/post_assets/2013/06/aea_boston_2013_bacon_cupcake.jpg" alt="Bacon Cupcake">
Just like last year, An Event Apart was extremely well-organized, informative and inspirational, and I’m very glad that I was able to attend!
]]>
</content>
</entry><entry>
<title>Sleep Displays with Alfred v2</title>
<link rel="alternate" type="text/html" href="https://joshdick.net/2013/02/27/sleep_displays_with_alfred_v2" />
<id>tag:joshdick.net,2013:/2013/02/27/sleep_displays_with_alfred_v2.html</id>
<published>2013-02-27T00:00:00Z</published>
<updated>2013-02-27T00:00:00Z</updated>
<author>
<name>Josh Dick</name>
<uri>https://joshdick.net</uri>
</author>
<content type="html" xml:lang="en">
<![CDATA[<blockquote>Because my keyboard doesn’t have an eject key.</blockquote><h2 id="introduction">Introduction</h2>
I can’t use a Mac for more than a few minutes without somehow interacting with <a href="http://www.alfredapp.com">Alfred</a>. I use an excellent Alfred extension by <a href="http://blog.wwwjfy.net/">Tony Wang</a> called <a href="http://blog.wwwjfy.net/2011/11/01/alfred-extensions-sleep-display/">Sleep Display</a>. When triggered via a hotkey, the extension powers off all connected displays without actually suspending/sleeping the computer. While it’s true that simultaneously pressing Control+Shift+Eject also accomplishes the same thing, the extension is useful for those whose keyboards don’t have an eject key.
The first public beta of the next version of Alfred, Alfred v2, <a href="http://blog.alfredapp.com/2013/01/12/first-alfred-v2-beta-now-available-for-mega-supporters/">became available</a> a few weeks ago. Since v2 has done away with extensions and has replaced them with a feature called “Workflows”, Tony’s extension isn’t compatible with v2. Further, v2 doesn’t natively support shutting off displays as a built-in “System Command” when building Workflows (yet!).
To fill the gap, I decided to create a v2 Workflow called “Sleep Displays”. (Yes, I added an “s” to the the name of Tony’s original extension. Yes, I’m creative.)
<h2 id="how-it-works">How It Works</h2>
The Workflow contains a binary program, directly lifted from Tony’s extension, that was built using the following code found <a href="http://stackoverflow.com/a/4865708/278810">at Stack Overflow</a>:
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-c" data-lang="c">#include <CoreFoundation/CoreFoundation.h>
#include <IOKit/IOKitLib.h>

/* Returns 0 on success and 1 on failure. */
int display_sleep(void)
{
 io_registry_entry_t reg = IORegistryEntryFromPath(kIOMasterPortDefault, "IOService:/IOResources/IODisplayWrangler");
 if (reg) {
 IORegistryEntrySetCFProperty(reg, CFSTR("IORequestIdle"), kCFBooleanTrue);
 IOObjectRelease(reg);
 } else {
 return 1;
 }
 return 0;
}
</code></pre></div>According to the Stack Overflow answer, the code can be compiled on Mac with <code>gcc</code> using the flags <code>-framework CoreFoundation -framework IOKIT</code>.
<h2 id="can-i-download-it-already">Can I Download It Already?</h2>
You sure can. <a href="/post_assets/2013/02/Sleep%20Displays.alfredworkflow">Grab it right here.</a>
<h2 id="thats-all-folks">That’s All, Folks</h2>
Lacking the ability to sleep displays via a hotkey was the last thing preventing me from using Alfred v2 full time. Now I can do that with v2, and so can you.
]]>
</content>
</entry><entry>
<title>My Git Prompt for Zsh</title>
<link rel="alternate" type="text/html" href="https://joshdick.net/2012/12/30/my_git_prompt_for_zsh" />
<id>tag:joshdick.net,2012:/2012/12/30/my_git_prompt_for_zsh.html</id>
<published>2012-12-30T00:00:00Z</published>
<updated>2012-12-30T00:00:00Z</updated>
<author>
<name>Josh Dick</name>
<uri>https://joshdick.net</uri>
</author>
<content type="html" xml:lang="en">
<![CDATA[<blockquote>Because git status isn’t nearly as fun.</blockquote><blockquote>
Update on June 8, 2017: After using this Git prompt for about 4½ years, I’ve made <a href="/2017/06/08/my_git_prompt_for_zsh_revisited.html">some minor tweaks</a> to it.
Update on January 8, 2013: The Git prompt code was missing some initialization options that were local to my <code>zsh</code> configuration file (<code>.zshrc</code>). I’ve updated the code to include the necessary options.
</blockquote>
It has become rare for me to use a computer for longer than a few hours without using <a href="http://gitscm.org">Git</a>.
Although <a href="http://www.sourcetreeapp.com">many</a> <a href="http://gitx.org">great</a> <a href="http://www.git-tower.com">tools</a> are available for graphically interacting with Git, I use Git almost exclusively on the command line, since that’s how and where I first <a href="http://git-scm.com/book">learned to use Git</a>. (I believe it would be beneficial for anyone trying to learn Git to learn on the command line; doing so exposes Git’s methodology in a <a href="http://nfarina.com/post/9868516270/git-is-simpler">fundamental way</a> that promotes understanding, but that’s a topic for another post.)
Any time I find an opportunity to offset development workflow friction from myself to the computer, I jump on it. In that vein, in order to save time and <a href="http://www.eetimes.com/electronics-blogs/pop-blog/4374110/Most-engineers-are-lazy-and-that-s-often-a-good-thing">be lazier</a> when working with Git, I’ve pieced together a helpful <a href="http://en.wikipedia.org/wiki/Shell_(computing)">shell</a> prompt that conveys lots of information about a Git repository at a glance. The prompt works with <a href="http://www.zsh.org"><code>zsh</code></a>, my shell of choice.
There are many examples of custom “SCM-enabled” shell prompts across the Internet, but I figured it was worth sharing mine here. The prompt’s code is adapted from <a href="https://gist.github.com/1712320">this GitHub Gist</a>, but incorporates features from other examples I’ve come across, namely:
<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 “traffic light” representation of <code>git status</code>:
<ul>
<li>Red (●) means there are untracked changes.</li>
<li>Yellow (●) means there are unstaged changes.</li>
<li>Green (●) means there are staged changes.</li>
</ul>
</li>
</ul>
Here’s a contrived example that showcases the prompt (click on it for a larger version):
<img src="/post_assets/2012/12/git_zsh_prompt.png" alt="Git Prompt for Zsh">
Here’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://gist.github.com/4415470">as a GitHub Gist</a>.) You can paste this code directly into your <code>.zshrc</code>, or save it in its own file and source that file in your <code>.zshrc</code>.
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-zsh" data-lang="zsh"># Adapted from code found at <https://gist.github.com/1712320>.

setopt prompt_subst
autoload -U colors && colors # Enable colors in prompt

# Modify the colors and symbols in these variables as desired.
GIT_PROMPT_SYMBOL="%{$fg[blue]%}±"
GIT_PROMPT_PREFIX="%{$fg[green]%}[%{$reset_color%}"
GIT_PROMPT_SUFFIX="%{$fg[green]%}]%{$reset_color%}"
GIT_PROMPT_AHEAD="%{$fg[red]%}ANUM%{$reset_color%}"
GIT_PROMPT_BEHIND="%{$fg[cyan]%}BNUM%{$reset_color%}"
GIT_PROMPT_MERGING="%{$fg_bold[magenta]%}⚡︎%{$reset_color%}"
GIT_PROMPT_UNTRACKED="%{$fg_bold[red]%}●%{$reset_color%}"
GIT_PROMPT_MODIFIED="%{$fg_bold[yellow]%}●%{$reset_color%}"
GIT_PROMPT_STAGED="%{$fg_bold[green]%}●%{$reset_color%}"

# Show Git branch/tag, or name-rev if on detached head
parse_git_branch() {
 (git symbolic-ref -q HEAD || git name-rev --name-only --no-undefined --always HEAD) 2> /dev/null
}

# Show different symbols as appropriate for various Git repository states
parse_git_state() {

 # Compose this value via multiple conditional appends.
 local GIT_STATE=""

 local NUM_AHEAD="$(git log --oneline @{u}.. 2> /dev/null | wc -l | tr -d ' ')"
 if [ "$NUM_AHEAD" -gt 0 ]; then
 GIT_STATE=$GIT_STATE${GIT_PROMPT_AHEAD//NUM/$NUM_AHEAD}
 fi

 local NUM_BEHIND="$(git log --oneline ..@{u} 2> /dev/null | wc -l | tr -d ' ')"
 if [ "$NUM_BEHIND" -gt 0 ]; then
 GIT_STATE=$GIT_STATE${GIT_PROMPT_BEHIND//NUM/$NUM_BEHIND}
 fi

 local GIT_DIR="$(git rev-parse --git-dir 2> /dev/null)"
 if [ -n $GIT_DIR ] && test -r $GIT_DIR/MERGE_HEAD; then
 GIT_STATE=$GIT_STATE$GIT_PROMPT_MERGING
 fi

 if [[ -n $(git ls-files --other --exclude-standard 2> /dev/null) ]]; then
 GIT_STATE=$GIT_STATE$GIT_PROMPT_UNTRACKED
 fi

 if ! git diff --quiet 2> /dev/null; then
 GIT_STATE=$GIT_STATE$GIT_PROMPT_MODIFIED
 fi

 if ! git diff --cached --quiet 2> /dev/null; then
 GIT_STATE=$GIT_STATE$GIT_PROMPT_STAGED
 fi

 if [[ -n $GIT_STATE ]]; then
 echo "$GIT_PROMPT_PREFIX$GIT_STATE$GIT_PROMPT_SUFFIX"
 fi

}

# If inside a Git repository, print its branch and state
git_prompt_string() {
 local git_where="$(parse_git_branch)"
[ -n "$git_where" ] && echo "$GIT_PROMPT_SYMBOL$(parse_git_state)$GIT_PROMPT_PREFIX%{$fg[yellow]%}${git_where#(refs/heads/|tags/)}$GIT_PROMPT_SUFFIX"
}

# Set the right-hand prompt
RPS1='$(git_prompt_string)'
</code></pre></div>I hope the prompt is as useful and as big of a time saver for you as it is for me!
]]>
</content>
</entry><entry>
<title>Rejecting False Binary Files in Git</title>
<link rel="alternate" type="text/html" href="https://joshdick.net/2012/11/24/rejecting_false_binary_files_in_git" />
<id>tag:joshdick.net,2012:/2012/11/24/rejecting_false_binary_files_in_git.html</id>
<published>2012-11-24T00:00:00Z</published>
<updated>2012-11-24T00:00:00Z</updated>
<author>
<name>Josh Dick</name>
<uri>https://joshdick.net</uri>
</author>
<content type="html" xml:lang="en">
<![CDATA[<blockquote>When text files stay up past their bedtime.</blockquote><h1 id="the-problem">The Problem</h1>
I noticed a small but annoying issue with <a href="http://gitscm.org">Git</a> that surfaced every once in a while: Git would suddenly start treating text files as if they were binary files. This example output from a <a href="http://stackoverflow.com/questions/6855712/git-treats-text-file-as-a-binary">relevant Stack Overflow question</a> illustrates the issue:
<pre><code>$ git diff MyFile.txt
diff --git a/MyFile.txt b/MyFile.txt
index d41a4f3..15dcfa2 100644
Binary files a/MyFile.txt and b/MyFile.txt differ
</code></pre>
In general, this issue could be viewed as a limitation of Git’s built-in diff capability, since it Git <a href="http://stackoverflow.com/questions/777949/can-i-make-git-recognize-a-utf-16-file-as-text">apparently is not great</a> at comparing files that use <a href="http://en.wikipedia.org/wiki/Variable-width_encoding">variable-width encoding</a>. For my job however, none of the source code our team works on is supposed to use variable-width encoding. For our purposes, it’s safe to assume that seeing this issue means that a developer mistakenly added non-ASCII characters to an otherwise-ASCII text file (Git’s limitations notwithstanding.)
I decided to create a <a href="http://www.kernel.org/pub/software/scm/git/docs/githooks.html">Git update hook</a> to reject problem commits when developers try to push them so these mistakes could be caught in an automated fashion when they happened, rather than having developers figure out when and why their diffs suddenly stopped working.
<h1 id="the-code">The Code</h1>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash">#!/bin/bash

#
# [Your existing update hook code here...]
#

refname="$1"
oldrev="$2"
newrev="$3"

# --- Reject this commit if it contains source files that Git views as binary files.

# First, make sure user is pushing a new branch and not deleting one. ($newrev will be all zeros when deleting.)
zero="0000000000000000000000000000000000000000"
if [ "$newrev" != "$zero" ]; then

 # Tests whether Git thinks the passed filename ($1) is a binary file.
 isBinary() {
 binaryPattern=$(printf '%s\t-\t' -);
 diffResult=$(git diff --numstat master $newrev -- "$1");
 return $([[ "$diffResult" =~ "$binaryPattern" ]])
 }

 # Get a list of all relevant files to check: filter the names of all changed files in $newrev by extension.
 checkFiles=$(git show --pretty="format:" --name-only $newrev | grep -E '\.(java|groovy|js|xml|css|less|sh)(\..+)?$')

 binaryFilesFound=false
 while read -r filename; do
 if [ ! -z $filename ] && $(isBinary $filename); then
 echo "*** File $filename appears to be a binary file, but should be plain text." >&2
 binaryFilesFound=true
 fi
 done <<< "$checkFiles"

 if $binaryFilesFound; then
 echo "Please remove all non-human-readable characters from the above file(s)."
 echo "For example, to remove NUL characters from a file:"
 echo " tr < file.ext -d '\000' > file.tmp"
 echo " mv file.tmp file.ext"
 # Reject the push
 exit 1;
 fi

fi

# --- Finished
exit 0
</code></pre></div><h1 id="how-it-works">How it Works</h1>
This code lives inside the update hook script (<code>hooks/update</code>) in our central Git repository. It runs on the server whenever someone does a <code>git push</code>.
Here’s a summary of what the code does:
<ol>
<li>Get a list of all files to be changed in the new revision (incoming pushed changes).</li>
<li>Filter the list of files by their extensions, so that the list only contains files that are supposed to be plain text files.</li>
<li>For each file in the list, make sure that the incoming changes to that file don’t cause Git to treat the file as binary data.</li>
<li>If any of the files fail this test, reject the push and show the user an explanatory error so they can fix the problem before attempting to push again.</li>
</ol>
<h1 id="considerations">Considerations</h1>
Using an update hook isn’t the ideal solution, since an ideal solution would prevent this type of mistake from being made at all. However, the update hook does prevent developers from accidentally propagating problematic changes.
If you know of a better way to solve this problem, I’d love to hear about it!
]]>
</content>
</entry>
</feed>

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

Download the "valid Atom 1.0" banner.
Upload the image to your own server. (This step is important. Please do not link directly to the image on this server.)
Add this HTML to your page (change the image src attribute if necessary):

<a href="http://www.feedvalidator.org/check.cgi?url=https%3A//joshdick.net/writing.xml"><img src="valid-atom.png" alt="[Valid Atom 1.0]" title="Validate my Atom 1.0 feed" /></a>

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

http://www.feedvalidator.org/check.cgi?url=https%3A//joshdick.net/writing.xml

Home · About · News · Docs · Terms