Category Archives: OS X

Introducing Noun Project for Mac

The line-drawing vector icons trend continues: the Noun Project makes finding and using icons a breeze


Search, drag, and drop the visual language from your desktop.

Search over 100,000 icons. The Mac App constantly updates, giving you fresh content every day.

Use with your favorite apps including Adobe Creative Cloud Apps, Sketch, PowerPoint.

Read more from the source: The Noun Project

Removing User Interface Complexity, or Why React is Awesome

Write a native mobile app using React. It’s fast because React’s view-diffing magic lets you skip the compile step.


James Long gives an in-depth look at his first impressions using React Native, a framework for writing iOS and Android apps in React.

He says:

Facebook gave all attendees of React Conf early access to the source code of React Native, a new way to write native mobile apps. The technology takes everything that’s great about React.js and applies it to native apps. You write JavaScript components using a set of builtin primitives that are backed by actual native iOS or Android components.

We’ve all heard the promise of cross-platform native apps driven by JavaScript. Titanium, PhoneGap, and other projects allow various levels of hooking in with the native environment. All of them fall short. Either you’re just wrapping a web app in a web view, or they try to mimick HTML & CSS which is hard to build apps with. With the latter, you’re also interfacing directly with native objects all the time, which is doomed to fail performance-wise. React Native actually performs the layout on a separate thread, so the main thread is as free as it can possibly be to focus on smooth animations (it also provides flexbox for layout).

Read more from the source:

Following the visual refresh in iOS 7, OS X Yosemite provides a cleaner-looking interface including new system font and icons

OS X Yosemite’s consistent and simple icons push design interfaces forward


There is a lot more to the new icons than just a fresh coat of paint — the visual language extends far beyond just the gradients.

The flat dock is back–let’s rejoice.

Icon designs stick to a grid to provide visual consistency.

Icons have a shape hierarchy. The circle for apps: “lightweight pieces of software, entertainment, or consumer-focused products.” The square for system-related utilities. The tilted rectangle for applications that help you get the work done.

Lighting effects are richer and more refined.

Read more from the source:

Tab Colors in iTerm2 v1.0

Version 1.0 of iTerm2 for OS X was recently released. They removed one of my favorite features: tab coloring. You used to be able to right click on a tab to change its color. For example, I changed the tab with my ssh connection to our production server would be red and the tab with the ssh connection to our test server would be green.

I looked into it, and there is a way to set the tab color from the command line itself. This turns out to be much more helpful because I can add the following lines to my bash profile:

alias ssh-dev="tab-green; ssh [email protected]"
alias ssh-prod="tab-red; ssh [email protected]"

Now each time I want to ssh to the dev server, the tab changes to green before the ssh begins. Same for production with a red tab.

The full tab coloring script I created is below. I just threw it into ~/.bash_profile.

# iterm coloring
function tab-color() {
if [[ $# == 1 ]]
# convert hex to decimal
if [[ ${hex:0:1} == "#" ]]
# strip leading hash sign
if [[ ${#hex} == 3 ]]
# handle 3-letter hex codes
r=$(printf "%d" 0x${hex:0:2})
g=$(printf "%d" 0x${hex:2:2})
b=$(printf "%d" 0x${hex:4:2})
echo -ne "\033]6;1;bg;red;brightness;$r\a"
echo -ne "\033]6;1;bg;green;brightness;$g\a"
echo -ne "\033]6;1;bg;blue;brightness;$b\a"
function tab-red() { tab-color 203 111 111; }
function tab-green() { tab-color 6cc276; }
function tab-yellow() { tab-color "#e8e9ac"; }
function tab-blue() { tab-color 6f8ccc; }
function tab-purple() { tab-color a789d4; }
function tab-orange() { tab-color fbbc79; }
function tab-white() { tab-color fff; }
function tab-gray() { tab-color c3c3c3c; }

Note that the tab-color function accepts colors in rgb, 6-character hex codes and 3-character hex codes.

Edit: It appears that this functionality was restored in April 2014. Thanks! 7/22/2014