Mikael Konutgan

OS X Tutorial: A Menu Bar App

Tue, 05 May 2015 00:00:00 +0200

My post about making Simple Menu Bar Apps for OS X has been one of the most viewed pages on my site since I wrote it back almost 2 years ago. It was never a complete tutorial to begin with, more of a few tips and tricks of how to do it well and a link to an example app I had written.

Since then, Apple has released Yosemite, which changes the way the menu bar APIs work and makes showing custom views in a popover in place of a simple menu much easier. Also, as you probbaly know, we have a brand new language to write OS X apps with.

My tutorial was due an update, so I pitched the idea of writing a complete menu bar app for OS X tutorial to Ray, for whom I have been updating tutorials for iOS 8 and Swift and he liked it.

Check out the tutorial at raywenderlich.com. I show you how to build a complete menu bar app that shows inspiratinal quotes in a popover.

Modeling Shapes in Swift

Sat, 09 Aug 2014 14:21:21 +0200

A few friends and I were talking about functional programming vs. object oriented programming the other day and I decided to illustrate the concepts in Swift using a simple and classic example. Consider a shape model. There will be different shapes and we want to calculate each shape’s perimeter and area.

An object oriented programmer might write it like this:

let pi = 3.14159265358979323846264338327950288

class Shape {
    func perimeter() -> Double {
        return 0.0
    }

    func area() -> Double {
        return 0.0
    }
}

class Circle: Shape {
    let radius: Double

    init(radius: Double) {
        self.radius = radius
    }

    override func perimeter() -> Double {
        return 2.0 * pi * radius
    }

    override func area() -> Double {
        return pi * radius * radius
    }
}

class Rect: Shape {
    let width: Double
    let height: Double

    init(width: Double, height: Double) {
        self.width = width
        self.height = height
    }

    override func perimeter() -> Double {
        return 2.0 * (width + height)
    }

    override func area() -> Double {
        return width * height
    }
}

And then use it like so:

let shapes = [
    Circle(radius: 1.0),
    Rect(width: 3.0, height: 4.0)
]

let perimeters = shapes.map { shape in shape.perimeter() }
let areas = shapes.map { shape in shape.area() }

Shape is an abstract superclass which declares the methods that subclasses should override.

To add a new shape, we simply create a new class and then implement each of Shape’s methods. To add a new computation, we first add a method to Shape, returning a default value, followed by implementing the method appropriately in each subclass.

In Swift, a very similar solution would be to use a protocol instead of an abstract superclass. This has the advantage that any existing class can be made into a shape and we can mix and match classes and structs if need arises. What we lose is the ability to have methods in the superclass that use the subclass methods to perform additional work, as Swift protocols cannot have default implementations.

let pi = 3.14159265358979323846264338327950288

protocol Shape {
    func surface() -> Double
    func area() -> Double
}

class Circle: Shape {
    let radius: Double

    init(radius: Double) {
        self.radius = radius
    }

    func surface() -> Double {
        return 2.0 * pi * radius
    }

    func area() -> Double {
        return pi * radius * radius
    }
}

class Rect: Shape {
    let width: Double
    let height: Double

    init(width: Double, height: Double) {
        self.width = width
        self.height = height
    }

    func surface() -> Double {
        return 2.0 * (width + height)
    }

    func area() -> Double {
        return width * height
    }
}

A functional programmer might solve the problem like this:

let pi = 3.14159265358979323846264338327950288

enum Shape {
    case Circle(Double)
    case Rect(Double, Double)
}

func perimeter(shape: Shape) -> Double {
    switch shape {
    case let .Circle(r):
        return 2.0 * pi * r
    case let .Rect(width, height):
        return 2.0 * (width + height)
    }
}

func area(shape: Shape) -> Double {
    switch shape {
    case let .Circle(r):
        return pi * r * r
    case let .Rect(width, height):
        return width * height
    }
}

And then use the constructs like so:

let shapes = [
    Shape.Circle(1.0),
    Shape.Rect(3.0, 4.0)
]

let perimeters = shapes.map { shape in perimeter(shape) }
let areas = shapes.map { shape in area(shape) }

Here, we use an algebraic data type. Then in each function, we pattern match on the shape, returning the appropriate value.

In this case, to add a new shape, we simply add a new case to the Shape enum and then add a case for that new shape to each function. To add a new computation, we add a new function, pattern match on the shape and return the appropriate value.

Additionally, Swift allows enum’s to have methods so it gives us the convenience of defining all the computations in a single context while keeping the code in a functional style.

let pi = 3.14159265358979323846264338327950288

enum Shape {
    case Circle(Double)
    case Rect(Double, Double)

    func perimeter() -> Double {
        switch self {
        case let Circle(r):
            return 2.0 * pi * r
        case let Rect(width, height):
            return 2.0 * (width + height)
        }
    }

    func area() -> Double {
        switch self {
        case let Circle(r):
            return pi * r * r
        case let Rect(width, height):
            return width * height
        }
    }
}

This is basically the same as the functional example, but instead of having top level functions, all computations are nicely inside the Shape enum. And the usage is exactly the same as the object oriented case:

let shapes = [
    Shape.Circle(1.0),
    Shape.Rect(3.0, 4.0)
]

let perimeters = shapes.map { shape in shape.perimeter() }
let areas = shapes.map { shape in shape.area() }

The main disadvantage of this setup is that it’s now very difficult and inelegant to have specific functions that only operate on a specific shape. In the object-oriented style, we could just add methods to the Circle class for example, and in the functional case we could write functions that take a Circle.

Like most things there is no correct answer here. It’s really nice that Swift provides many options.

Swift Type Conversions

Sun, 22 Jun 2014 19:54:17 +0200

In Swift, the native String, Array and Dictionary types are implicitly bridged to the Foundation classes NSString, NSArray and NSDictionary. In practice, this means that any Cocoa API we call that takes a Foundation class can take the corresponding Swift type (I don’t say class here, because in Swift, String, Array and Dictionary are structs).

It turns out that like many other things in Swift, this isn’t some language magic that only Apple gets to use. We can also build such implicit bridges, thanks to an undocumented Swift feature: The __conversion function.

Let’s say we want to build a Point structure. We will be using it in a context that doesn’t involve Core Graphics, Sprite Kit or a similar framework that already uses CGPoint. In addition, we want to build the struct in a modern way using new features idioms like generics and tuples. But, we also want to use our new struct with Core Graphics APIs sometimes so we can take advantage of all the convenience functions we implemented (This is a contrived example, because points are so simple, but bear with me).

struct Point {
    let x: Double, y: Double
}

Let’s define the implicit bridging in an extension:

extension Point {
    func __conversion() -> CGPoint {
        return CGPoint(x: x, y: y)
    }
}

Now it’s possible to pass a Point to any method or function that takes a CGPoint.

let p = Point(x: 1.0, y: 1.0)
CGPointApplyAffineTransform(p, CGAffineTransformMakeRotation(M_PI))

The extension can even be defined in a different file in the context where we want to use Point as a CGPoint.

We can also overload the __conversion function and define many different conversions. Here’s one that destructures Point into a (Double, Double) tuple.

extension Point {
    func __conversion() -> (Double, Double) {
        return (x, y)
    }
}

Now this works!

let (x, y) = p

I believe this will come in handy, especially when we start writing more and more Swift and we want to isolate non-Swift and/or legacy API calls and classes.

BOOL

Wed, 13 Nov 2013 23:03:41 +0200

I recently bought the NSHipster book and was rereading BOOL / bool / Boolean / NSCFBoolean and noticed the part where Mattt explains how comparing with YES can be dangerous, because BOOL is a typedef of signed char. I remembered that on 64-bit devices BOOL is actually a typedef of bool, the native (as of C99) boolean type.

The intersting thing is that the native bool type is safe, safe in the sence that a variable typed as bool can only ever have the values 0 or 1. So

BOOL value = 5;
NSLog(@"%d", value);

prints 5 on all iPhone’s except for the iPhone 5s, where it prints 1.

Also e.g. (BOOL)5 is 1 on 64-bit devices, getting rid of the awkward !! pattern to safely cast other types into booleans.

Even so, you probably shouldn’t compare boolean expressions with YES, but at least you will get the expected result on 64-bit devices going forward, as functions or methods returning BOOL will always return 0 or 1.

Making Simple Menu Bar Apps for OS X

Mon, 01 Jul 2013 15:01:17 +0200

Update 05 May 2015: I have written an updated, more in depth tutorial on how to make a menu bar app on OS X 10.10 Yosemite and with Swift.

It’s pretty easy to make a simple menu bar app on OS X. The main thing you need to do is to create an NSStatusItem instance variable in your app delegate. To do this, you ask [NSStatusBar systemStatusBar] to create one for you, providing a length. In almost every case you will want to use NSVariableStatusItemLength instead of some fixed float value. Once you have an NSStatusItem, you can configure it using it’s properties. I used some of the most relevant ones below:

@interface KMAppDelegate : NSObject <NSApplicationDelegate>

@property (strong, nonatomic) NSStatusItem *statusItem;
    
@end

_statusItem = [[NSStatusBar systemStatusBar] statusItemWithLength:NSVariableStatusItemLength];

// The text that will be shown in the menu bar
_statusItem.title = @"";

// The image that will be shown in the menu bar, a 16x16 black png works best
_statusItem.image = [NSImage imageNamed:@"feedbin-logo"];

// The highlighted image, use a white version of the normal image
_statusItem.alternateImage = [NSImage imageNamed:@"feedbin-logo-alt"];

// The image gets a blue background when the item is selected
_statusItem.highlightMode = YES;

Next, you will want something to happen when the status item is clicked. You have a few options here: You can have a menu be shown, you can configure a target-action pair and use the status item like a button or you can have a custom view be shown. See the documentation for all the details. Here, we use a simple menu and attach it to the status item.

NSMenu *menu = [[NSMenu alloc] init];
[menu addItemWithTitle:@"Open Feedbin" action:@selector(openFeedbin:) keyEquivalent:@""];
[menu addItemWithTitle:@"Refresh" action:@selector(getUnreadEntries:) keyEquivalent:@""];

if ([[[KMFeedbinCredentialStorage sharedCredentialStorage] credential] hasPassword]) {
    [menu addItemWithTitle:@"Log Out" action:@selector(logOut:) keyEquivalent:@""];
} else {
    [menu addItemWithTitle:@"Log In" action:@selector(logIn:) keyEquivalent:@""];
}

[menu addItem:[NSMenuItem separatorItem]]; // A thin grey line
[menu addItemWithTitle:@"Quit Feedbin Notifier" action:@selector(terminate:) keyEquivalent:@""];
_statusItem.menu = menu;

The rest is all up to you. You can pretty much set up a simple app that connects to a web service and shows some information in an hour or two.

Note that you will probably want to have the app not show up in the dock. To do this you need to set the LSUIElement key to YES in your Info.plist configuration file. You should see Application is agent (UIElement) set to YES if you have done it correctly.

The sample code I used is an app I wrote to show me the number of unread RSS items in my Feedbin account. You can check it out on GithHub. It pretty much creates a status item in the app delegate and then refreshes the unread count every two minutes using an NSTimer. Before that, it asks the user to log in and then saves the user’s password in the system keychain, so there are a few helper classes in addition to the app delegate. The whole app is comprised of a mere 202 lines of Objective-C code according to cloc.

Creating Static Sites in Ruby with Rack

Tue, 28 May 2013 18:12:45 +0200

There is a guide for creating static sites with rack on the heroku dev center, it works ok, but it has a few problems. After creating a few static sites and deploying them to heroku and taking different approaches each time, some simple, some complex, I decided to investigate the issue.

Here is the code that you might find in a lot of places around the web, including the aforementioned article:

use Rack::Static, 
  :urls => ["/images", "/js", "/css"],
  :root => "public"

run lambda { |env|
  [
    200, 
    {
      'Content-Type'  => 'text/html', 
      'Cache-Control' => 'public, max-age=86400' 
    },
    File.open('public/index.html', File::RDONLY)
  ]
}

Firstly, urls can get pretty long and you mostly want to serve all files in public anyway, but the main issue is that all requests that don’t correspond to a file will take you to index.html, the home page. Also, you don’t really want .html displaying in your urls and using File.open in the body doesn’t take advantage of all the headers that Rack::Static and threfore Rack::File will set for you.

Here’s my approach. I use Rack::Static like so:

use Rack::Static,
  :urls => Dir.glob("#{root}/*").map { |fn| fn.gsub(/#{root}/, '')},
  :root => root,
  :index => 'index.html',
  :header_rules => [[:all, {'Cache-Control' => 'public, max-age=3600'}]]

We get all the files in root, set an index, which will serve e.g. about/index.html when you get about/ (so it also takes care of serving /index.html when we get '/', the root) and set the 'Cache-Control' header to an hour for all files.

After this we need to run a rack app. We should probably return a 404 page now, as none of the files will have been matched.

headers = {'Content-Type' => 'text/html', 'Content-Length' => '9'}
run lambda { |env| [404, headers, ['Not Found']] }

I refactored this code into a tiny gem, so I can use it directly in all my projects. I called it vienna. Now you can create a static site on heroku by putting these two lines into your config.ru.

require 'vienna'
run Vienna

(And I won’t have to write any more Rack::Static code again.)

vienna will also serve a 404.html if it exists, instead of just returning 'Not Found' when a file isn’t found. Check out the source.

pinbrowser.co runs on vienna now and I’ve also tested this site that is powered by Jekyll with vienna, even though I’m hosting it on GitHub Pages instead of heroku. it works great.

Hello, Jekyll

Fri, 24 May 2013 14:52:10 +0200

I’m launching this site today. It’s a static site built with Jekyll and the color scheme and choice of fonts has been havily inspired by orderedlist’s minimal theme. I’m not going to talk about building a site with Jekyll, because the newly launched official site does an excellent job at that, but I am going to talk about a few problems I had along the way and a few things you can do to improve your Jekyll workflow.

Use a Rakefile

It gets boring to type jekyll serve --watch and to create new files named 2013-05-24-hello-jekyll.md really fast. A few rake tasks can significantly speed things up. This is what mine looks like:

task :default => [:serve]

desc 'Build and watch the site'
task :build do
  system 'jekyll build --watch'
end

desc 'Serve and watch the site'
task :serve do
  system 'jekyll serve --watch'
end

desc 'Create a new post'
task :post do
  date = Time.new
  title = STDIN.gets.chomp
  
  content = <<-EOS.gsub(/^ +/, '')
    ---
    layout: post
    date: #{date.strftime('%Y-%m-%d %H:%M:%S')}
    title: #{title}
    ---
    
  EOS
  
  datef = date.strftime('%Y-%m-%d')
  titlef = title.downcase.gsub(' ', '-')
  filename = "_posts/#{datef}-#{titlef}.md"
  
  File.write filename, content
end

Use rdiscount or redcarpet

The default markdown parser maruku works fine most of the time but I’ve run into a few problems like getting an REXML could not parse this XML/HTML error when I try to highlight Objective-C code. Switch to rdiscount or redcarpet and the error goes away. Just add markdown: redcarpet to your cofiguration file.

Pretty Permalinks

Add permalink: pretty to your configuration file if you want posts to be served from /2013/05/24/hello-jekyll/ instead of /2013/05/24/hello-jekyll.html. This also affects pages, so about.html will be available at /about/.

Using Pow

If you want to use the rack server pow, build your site into public instead of _site, because pow automatically serves everything in public as static assets.

An RSS Feed

You’ll probably want to have an RSS feed for your site, I’ve described how I built one in a seperate post.

Adding An RSS Feed to a Jekyll Site

Thu, 23 May 2013 00:00:00 +0200

Adding an RSS 2.0 feed to a Jekyll site is actually pretty simple.

First the required header and footer:

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <atom:link href="{{ site.url }}/feed.xml" rel="self" type="application/rss+xml" />
    <title>{{ site.name }}</title>
    <link>{{ site.url }}</link>
    <description>{{ site.description }}</description>
  </channel>
</rss>

Don’t forget to add a name, url and description to your configuration file.

url: http://kmikael.com

name: Mikael Konutgan
description: 'Thoughts on programming, Unix and technology'

We’ve got our XML boilerplate and then in the channel we need to add a title, a link and a description. The channel elements also has a few optional elements, which I haven’t included here.

The next step is to add the item’s. We iterate over the 20 latest posts and add them. Each item has a title, a link a guid (globally unique identifier), a pupDate and a description. The guid can be any string, here I just set it to the link of the post. isPermaLink="true" tells feed readers that they can assume the guid is a permalink.

Actually non of these are required, it’s the most minimal approach that makes sense in my opinion. To quote the spec:

An item may also be complete in itself, if so, the description contains the text (entity-encoded HTML is allowed), and the link and title may be omitted. All elements of an item are optional, however at least one of title or description must be present.

We use the date_to_rfc822 and xml_escape filters Jekyll adds to Liquid to comply with the specification.

{% for post in site.posts limit:20 %}
  <item>
    <title>{{ post.title }}</title>
    <link>{{ site.url }}{{ post.url }}</link>
    <guid isPermaLink="true">{{ site.url }}{{ post.url }}</guid>
    <pubDate>{{ post.date | date_to_rfc822 }}</pubDate>
    <description>{{ post.content | xml_escape }}</description>
  </item>
{% endfor %}

After we add the YAML front-matter, so Liquid will process our file, the end result looks like this:

---
layout: nil
---

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
  <channel>
    <title>Mikael Konutgan</title>
    <link>{{ site.url }}</link>
    <description>Thoughts on programming and technology</description>
    {% for post in site.posts limit:20 %}
      <item>
        <title>{{ post.title }}</title>
        <link>{{ site.url }}{{ post.url }}</link>
        <guid isPermaLink="true">{{ site.url }}{{ post.url }}</guid>
        <pubDate>{{ post.date | date_to_rfc822 }}</pubDate>
        <description>{{ post.content | xml_escape }}</description>
      </item>
    {% endfor %}
  </channel>
</rss>

See the RSS 2.0 specification for all of the details and optional elements and validate your feed when you’re done. Using the method above should produce a valid feed without warnings.

The Fish Shell

Wed, 22 May 2013 00:00:00 +0200

I switched to the fish shell a while ago and it’s great. The sntax is sane and understandable, tab completions work pretty well, history completions save you a lot of time and my shell feels faster to me now.

It’s super easy to create a custom shell prompt:

function fish_prompt
  set_color red -o
  echo -n ">> "
  set_color cyan -o
  if test $PWD = $HOME
    echo -n "~"
  else
    echo -n (basename $PWD)
  end
  echo -n " "
  if git status >/dev/null ^/dev/null
    set_color red -o
    echo -n (git branch | grep '*' | cut -c3-)
    echo -n " "
    if not test (git status | tail -1) = "nothing to commit, working directory clean"
      set_color yellow -o
      echo -n "× "
    end
  end
end

This displays the current working directory, then the current git branch if one exists, then an ×, if there are uncommitted changes in the git repository.

My right prompt displays the ruby version currently in use

function fish_right_prompt
  set_color white -o
  rbenv version | cut -d ' ' -f 1
end

All you need to do is create two files, name them fish_prompt.fish, fish_right_prompt.fish and place them in ~/.config/fish/functions.

Adding your own tab-completions is also pretty easy. Here’s a simple example:

complete -f -c jekyll -a 'build doctor help import new serve'
complete -f -c jekyll -s w -l 'watch'

The first line will tab-complete jekyll’s build, doctor, help, import, new and serve commands. The second line will complete the -w or --watch option. Of course, Jekyll has many more commands and options and writing the whole thing would be much longer, but you get the idea. Put these lines in .config/fish/completions into a file named jekyll.fish and you’ll be good to go.

I highly encourage you to at least read through the introductory fish tutorial.

Making Good-Looking Bar Buttons with Unicode

Tue, 21 May 2013 00:00:00 +0200

The standard UIBarButtonSystemItem’s are pretty limited and mostly boring, so we usually have to find a custom image and create a UIBarButtonItem with initWithImage:style:target:action:. This is, of course, great in most cases, except when you have limited resources and don’t want to have too many images in your bundle.

Unicode to the rescue

There are literally thousands of unicode characters available on iOS for you to use and it’s, for the most part, simple to use them. For the standard behavior, just use initWithTitle:style:target:action: and set a unicode character as the title, but in cases where you need to customize the button even more, you could use something like this:

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(0.0f, 0.0f, 32.0f, 32.0f);
[button setTitle:title forState:UIControlStateNormal];
button.titleLabel.font = [UIFont systemFontOfSize:20.0f];
button.titleLabel.shadowColor = [UIColor blackColor];
button.titleLabel.shadowOffset = CGSizeMake(0.0f, -1.0f);
[button addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];
button.showsTouchWhenHighlighted = YES;
UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:button];

It’s that simple. Let’s refactor it into a category and add the ability to invert the unicode symbol, which is useful for creating butons with matching arrows.

@interface UIBarButtonItem (PBAdditions)

+ (UIBarButtonItem *)barButtonItemWithTitle:(NSString *)title
                                   inverted:(BOOL)inverted target:(id)target
                                     action:(SEL)action;
                                     
+ (UIBarButtonItem *)barButtonItemWithTitle:(NSString *)title
                                     target:(id)target
                                     action:(SEL)action;
                                     
@end

@implementation UIBarButtonItem (PBAdditions)

+ (UIBarButtonItem *)barButtonItemWithTitle:(NSString *)title
                                   inverted:(BOOL)inverted target:(id)target
                                     action:(SEL)action
{
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.frame = CGRectMake(0, 0, 32, 32);
    [button setTitle:title forState:UIControlStateNormal];
    button.titleLabel.font = [UIFont systemFontOfSize:20.0f];
    button.titleLabel.shadowColor = [UIColor blackColor];
    button.titleLabel.shadowOffset = CGSizeMake(0.0f, -1.0f);
    if (inverted) {
        button.titleLabel.transform = CGAffineTransformMakeRotation(M_PI);
    }
    [button addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];
    button.showsTouchWhenHighlighted = YES;
    UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:button];
    return barButtonItem;
}

+ (UIBarButtonItem *)barButtonItemWithTitle:(NSString *)title
                                     target:(id)target
                                     action:(SEL)action
{
    return [self barButtonItemWithTitle:title inverted:NO target:target action:action];
}

@end

Here are a few ideas to get you started:

Settings (⚙)
Slide-out Menu (☰)
Forward button (➜) (invert the symbol for a back button)
Add/Cancel (✚, ✖)
Star/Unstar (★, ☆)