Fictional Assumptions

On programming, language, and life. About Fictional Assumptions

Why the Mac App Store ruins OS X user experience

Last night, I downloaded iQueue. I’ve started to use iTunes a whole lot more, and since I am a Spotify freak, I miss the play queue terribly much.

iQueue is an app provided through the new Mac App Store, and is a prime example of everything what’s wrong with the App Store.

I have do admit I never liked the idea of an App Store for the Mac. Just look at the iPhone App Store. It’s filled with completely useless programs.

Why bring that to the Mac? OS X software has always been top notch, partly because of good API’s, but mostly because of good developers.

Historically, you would have to design an awesome application to sell it, otherwise no one would by it. With the Mac App Store, anyone can sell a badly designed app without any effort, which results in worse applications, providing a worse user experience.

In my example, iQueue, there’s no documentation, description or support at all. I have no idea how to add tracks to the queue. Thanks, developers.

Update: Now iQueue also crashes a lot, and fails to display album covers! [See picture.]

On TextMate and colour schemes

I’ve wandered between the friendly TextMate and the powerful Vim for a long time now, but when starting a new project, I end up using TextMate almost every time. I realise the power of Vim, but TextMate’s project drawer requires no setup at all. (As I have written before, “configurability is the root of all evil” — design document of Fish.)

One of the reasons I use TextMate is for its Fonts & Colors preference pane. Thanks to it, creating colour schemes becomes so much easier.

As you can see in the picture, TextMate provides you a graphical interface for theming, where you can select different colours and styles for different elements in your code. The elements are defined from “scope selectors”, not too dissimilar from CSS selectors. Read more in the TextMate Manual.

Ordinarily, I start from an existing theme when I create mine. I often end up creating new themes when I’m on a new computer, without any custom themes. Plus, for most of my colour schemes, I create alternative versions — perhaps one in different (or matte) colours, or one with inverted background colours.

An example, wrapped in a zip file! (“A riddle, wrapped in a mystery!”)

Also: no more Vim colour scheme configuration files for me.

Fish - the friendly and interactive shell

Bash has for a long time been my shell of choice, mostly because it’s the standard one in Mac OS X. I’ve heard of Zsh’s great configurability, the Ruby-like Rush and the Mono-port of PowerShell, Pash, but I never made the switch.

Not until recently, when I got my student computer, I started to explore other possibilities, such as PowerShell for Windows.

On my Mac, I installed Fish – the friendly and interactive shell – which I had heard good of. The developers of Fish were tired of the complex syntaxes of Bash, Zsh, POSIX and so on, as well as how outdated every shell was (and still are); today we have syntax highlighting and autocompletion in almost every text editor – why not in our shells?

Fish features syntax coloring and autocompletion that doesn’t require a 2 Mb configuration file – in fact, the design document literally says that “configurability is the root of all evil”, although that doesn’t mean Fish isn’t extensible.

I really recommend reading the design document, but not as much as I recommend installing Fish instead of Bash.

(Now, I’m not an expert. I haven’t touched on more than the surface of Rush or Zsh, but the simplicity and absolute easiness of Fish just makes me happy.)

attr.js: Extending CSS with element attributes

Have you heard of attr() in CSS3? It’s a smart way to use an element’s attributes as values in your stylesheet.
Sadly, everything in CSS3 isn’t widely supported today, especially not attr(), I created a JavaScript alternative.

attr.js is easy to use anywhere in your stylesheets, and you can access any element’s attributes.

It’s simple. Here’s how:

    attr.js("element@attribute")

If you want to use the attribute as a string, you can lose the quotation marks. For example:

    .my_element {
      content: "attr.js(.my_element@href)"; }

Although, using quotation marks is fine.

h2. Read more and download

The script requires jQuery, and you can download it from imjo.hn/attr.js/.

Using Categories in Jekyll

Jekyll is a simple static site generator for blogs, developed by Tom Preston-Werner. It’s popular among (Ruby) programmers, mainly because they get to write blog posts in their favorite text editor. To extend Jekyll is easy, since it supports plugins. GitHub Pages supports Jekyll, and I use Jekyll to generate this site.

There is a way to add categories to posts built-in, by using categories in the YAML Front Matter.

To list all posts in one category, use something like:

<ul>
  {% for category, post in site.categories["category"] %}
    <li><a href="{{ post.url }}">{{ post.title }}</a></li>
  {% endfor %}
</ul>

To generate category pages using a plugin, you may do something like this:

module Jekyll
  class CategoryPage < Generator
    safe true
    priority :low

    def generate(site)
      site.categories.each do | category |
        File.open(File.join(site.config['destination'], "#{category[0]}.html"), 'w') do |f|
          f.write(generate_category_page(site, category[0]))
        end
      end
    end

    private

    def generate_category_page(site, category)
      # Category page
      site.categories[category].each do | category, post |
        "<li><a href=\"#{post.url}\">#{post.title}</a></li>"
      end
    end

  end
end

The code above creates a category.html for every category.

h2. An alternative way

Although, I couldn’t get plugins to work, so I do this instead:

@_layouts/topic.html:

    ---
    layout: default
    ---

    <div id="posts">
      <ul>
        <h1>Posts in {{ page.topic }}</h1>
        {% for category, post in site.categories[page.topic] %}
          <li>
              <span>{{ post.date | date_to_string }}</span> <a href="{{ post.url }}">{{ post.title }}</a>
          </li>
        {% endfor %}
      </ul>
    </div>

I created a .html file for every category, like this:

@mycategory.html:

    ---
    layout: topic
    topic: My Category
    ---

This can be done ever more easy using a script:

@category.py:

    import sys

    args = sys.argv 
         
    if len(args) != 2:
      print "Usage: python %s <category>" % args[0]
    else:
      file = open(args[1] + ".html", "wt")
      file.write("---\nlayout: topic\ntopic: %s\n---" % args[1] )
      file.close()

Create a new category: python category.py my_awesome_category

Add post to category: category: my_awesome_category in YAML Front Matter

Hooray!

Webfaction

I have too many services hosting my web applications. Jails from Sweden, Heroku, Djangy, GitHub and now Webfaction. The latter I found only a couple of days ago from another web site.

Webfaction started as python-hosting.com, a specialized Python host, which you can see, as they support all versions from Python 2.4 to 3.1. They have however expanded their services.
To set a website up is easy with Webfaction. First, you set up an application. Then, you select your application for your website to use.

The applications available are many but you can also choose to use a custom install script for your web app.
You can install different versions of an application, and after installing, each such has installations of it’s dependencies separate from your other applications.
You can, for instance, run Django 1.1.2 with mod_wsgi 3.2, and choose between Python 2.5 or 2.6.

h2. My Python & Django application setup script

As long as you don’t plan to do something in the command line, you’re fine. Probably you plan doing that. Download my setup script – it takes care of everything. It sets your PYTHONPATH and DJANGO_SETTINGS_MODULE, which are necessary to access the Django shell. The script also fixes the myproject.wsgi file to use your Django project.

Now, run the script:

  $ python up.py DJANGO_APP 2.6
  # or set/up.py, if it's in the set directory

To use easy_install to install a dependency for your Django application running on Python 2.6, do this:

  $ easy_install-2.6 -d $HOME/webapps/DJANGO_APP/lib/python2.6/ DEPENDENCY

To access the Django shell, use:

  $ ./bin/django-admin.py shell

Have in mind that you will have to do this every time you login.

h2. Conclusion

I’ll probably move most of my websites to Webfaction, since it is cheaper and easier. What about you?

Using DataMapper with Sinatra

When I (re)started this project, I chose Sinatra to serve my content. I needed a database engine too, and for that I chose DataMapper.

Turns out it was harder than I thought.

Before we start, you will need to install these gems:

    $ (sudo) gem install dm-core dm-migrations

bq. Alright! Done. Let’s do this, John. What should I do next?

Fire up your text editor and skip Sinatra’s one file approach and set up your database.rb like this:

    # @database.rb
    require "dm-core"
    require "dm-migrations"

    # Configure DataMapper
    DataMapper.setup(:default, ENV['DATABASE_URL'] || "sqlite3://database.db")

    # model Article
    class Article
      include DataMapper::Resource
  
      property :id, Serial
  
      property :title, Text
      property :text, Text
      property :author, String
      property :permalink, Text
      property :created_at, DateTime
  
    end

    # Update database
    DataMapper.auto_upgrade!

    class String
      # Fix DataMapper's weird space bug
      def rm_ln
        self.gsub(/\n\n|\n/, "\r")
      end
      def rm_ln!
        self.gsub(/\n\n|\n/, "")
      end
    end

First, we require the DataMapper gems we installed before. Then, we configure DataMapper to use our database. If ENV['DATABASE_URL'] is set, it uses that instead of sqlite3://database.db. This is necessary for Heroku.

After that, we create the Article model with a bunch of properties. Below, we update the database to use our new Article model.

What we do next, is adding our rm_ln methods to any String object (like mystring = "i'm a string!"). This fixes a strange bug in DataMapper, which adds 12 lines of space in front of some lines in a Text property when you save it. Extremely annoying if you use &lt;pre&gt; elements in your articles, and when you edit them.
In other words, just append .rm_ln to a string and the bug will be solved.

bq. But John, what’s the rm_ln! method for?

That I will tell you, but it’s complicated. If you use my rm_ln method in a textarea (when you edit an article, for example), the lines will mess up. You must use rm_ln! instead.
But when you want to output a string as HTML, as in article templates, you must use rm_ln, and not rm_ln!.

bq. Okay. This means I have to use it everywhere?

Yes. This isn’t the best solution, since you have to append .rm_ln everywhere you want a Text property.

You can add a method to our database.rb to solve this in a better way. Something like this:

    # @database.rb
    def text(text, htmloutput = true)
      if htmloutput
        return text.rm_ln
      else
        return text.rm_ln!
      end
    end

…and use text @the_text instead. It’s the same thing, I know, but more obvious for others reading your code.

I’ll give you an example to use in your app.rb, or whatever:

    # @app.rb
    get '/archive' do
      @articles = Article.all :limit => 10, :order => 'created_at'
      erb :articles # or haml, whatever
    end

    get '/archive/:permalink' do |permalink|
      @article = Article.first :permalink => permalink
      erb :article
    end

h3(#bonus-tip-pagination). Bonus tip: Pagination

Use my ruby_pagination_logic gem to add pagination to your site. Super-recommended, to improve your site load times.
Be sure to check out the documentation and Github repo.

h3(#questions-or-comments). Questions or comments?

Reply! I will, sooner or later, add a Disqus section.

“Don't let third parties make you slow”

I didn’t participate in Disruptive Code in September, but yesterday I read some blog posts from the event, and there was one lecture I especially became interested in.

Tobias Järlund from the Swedish tabloid Aftonbladet hold a lecture about how ads slow web pages down, which is one of Aftonbladet’s problems.

Tobias has published a presentation, and Nikke Lindqvist has summed up the lecture (in English here).

Aftonbladet used to show ads using JavaScript, and since the web browser pauses the page loading when downloading and parsing JavaScript, the (many) ads slow the page.
What Tobias is saying is that there aren’t any options for Aftonbladet other than using these “friendly iframes.”
I want to suggest an option.

The HTML5 Way

Tobias and Nikke both say that “there must be a better way,” and suggest a <frag> tag.

But there is a solution in HTML5 to the JavaScript issue.

Behold! Surfin’ Safari has a write-up of the script attributes async and defer. (If you use TextMate, you’ve probably encountered them.)

In short, these attributes make scripts download JS without pausing the web page parser. The difference between them, is that a async script executes immediately after the download is finished, and defer scripts execute where they occur in the web page.

Asynchronous and deferred JavaScripts are supported by Firefox 3.6, the WebKit nightly builds since September, and according to Tony Gentilcore, who added the support to WebKit1, will be in Chrome in December2.

Still, using iframes is the best option today; at least 50% of Aftonbladet’s readers use Internet Explorer, which isn’t likely to support async and defer soon — Internet Explorer has apparently supported defer a while, and async by using onload in version 93.

1 http://trac.webkit.org/changeset/67163

2 “Async and deferred scripts will be in Chrome in December!” — Tony Gentilcore on Google Buzz

3 “Internet Explorer has also long supported the defer attribute. While async is not yet supported, support for the onload attribute was added in version 9.” — Surfin’ Safari

Let's have a look at Less and Sass

We all love CSS, but as we all know it can be a bit … limited. What if mixins, variables, nested rules, and even math functions where added to CSS? Wouldn't that be awesome?

Say hello to Less and Sass. Their purpose is to make CSS better. Sass stands for Syntactically Awesome Stylesheets, and yeah, they are.

Sass

Sass

Sass was the first “CSS enhancer” I encountered. There is a Ruby/Rails plugin, and, apparently, a JavaScript implantation which seems to be pretty deprecated. I haven't tested any of them.

Sass converts the .sass or .scss file(s) to CSS in the terminal. That's not good if you want to make design changes on the go—on your iPhone, or with a friend's computer.

Sass requires Haml, which is easily installed through one command: (sudo) gem install haml (if you're on a Mac, use sudo).

Now you're ready to Sass. Sass has got two different syntaxes. The “indented syntax” was the first syntax, called Sass. The new main syntax is called “SCSS”, for “Sassy CSS,” and is more like the CSS syntax. You can still use the indented syntax (I do), but SCSS is easier to learn if you already know CSS.

// SASS
@mixin head
  letter-spacing: -1px
  line-height: 1.1em
  font-weight: normal
  a 
      color: $base
article header h1
  @include head
// SCSS
@mixin head {
  letter-spacing: -1px;
  line-height: 1.1em;
  font-weight: normal;
  a {
      color: $base;
  }
}
article header h1 { @include head; }

Less

Less is very similar to Sass. There are mixins, variables, and the same math functions as in Sass. Though, the syntax is different, and there are implantations for Ruby, PHP, .NET, and even JavaScript. I've tested Less.js, the JS implantation, and it works great.

The thing I both like, and don't like, about Less, is the syntax. I like the @-variables instead of Sass' $. I love the TextMate bundle. But I don't like how the code looks cluttered—the { and }'s are good and bad at the same time. For example, they're great if you want to write “single line CSS.”

// LESS
.head {
  letter-spacing: -1px;
  line-height: 1.1em;
  font-weight: normal;
  a {
      color: @base;
  }
}
article header h1 { .head; }

Conclusion

Sass is my favourite, despite the lack of a good TextMate bundle or JavaScript implantation. Both Sass and Less are being worked on today, and I think Less is going to be the “winner”, but for now, I continue to use Sass.