Dom Christie

Custom Path Configuration Properties in Hotwire Native iOS

Mon, 02 Jun 2025 13:39:24 GMT

Path Configuration rules in Hotwire Native provides a way for customising how a view is displayed for a particular URL pattern. Out-the-box it supports customising:

the view’s context (e.g. modal screen)
the view’s presentation i.e. how it impacts the navigation stack
functional tweaks, such as “Done” and “Back” button display

The documentation also states: You are free to add more [rule] properties as your app needs, yet it doesn’t mention how you can access them, or how you might use them. So after a bit of digging, and some pointers from Joe Masilotti, here’s what I’ve discovered…

You can access the properties that match a given URL with the following:

Hotwire.config.pathConfiguration.properties(for: url)

And then to use this to customise a web view, subclass HotwireWebViewController. For example, to hide the navigation bar on a /login page, your path configuration might look like this:

{
    "settings": {},
    "rules": [
        {
            "patterns": ["/login"],
            "properties": {
                "navigation_bar_hidden": true
            }
        }
    ]
}

With your custom view:

import HotwireNative

class AppWebViewController: HotwireWebViewController {
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        let properties = Hotwire.config.pathConfiguration.properties(for: currentVisitableURL)
        let navHidden = properties["navigation_bar_hidden"] as? Bool ?? false
        navigationController?.setNavigationBarHidden(navHidden, animated: false)
    }
}

Then configure Hotwire to use this view by default, e.g. in AppDelegate:

Hotwire.config.defaultViewController = { url in
    AppWebViewController(url: url)
}

Component Partials in Rails

Thu, 03 Apr 2025 14:40:39 GMT

I presented some thoughts about Rails partials at April’s Brighton Ruby meetup.

The first half discussed various ways to render partials and collections of objects, including using to_partial_path. An example might be rendering a dynamic navigation bar where the navigation items differ depending on the user’s role, e.g. if they’re logged in, or paid, etc. We can create a plain old Ruby object with a to_partial_path method that returns the path of the partial to render. That class can include all the necessary logic, keeping the partial relatively clean:

# app/helpers/navigations_helper.rb
module NavigationsHelper
  def navigation(user)
    Navigation.new(user)
  end

  class Navigation
    def initialize(user)
      @user = user
    end

    def to_partial_path = "navigations/navigation"

    # decides which items to show based on user
    def items
      [Item.new("Home", root_path), …]
    end

    class Item
      #…
      def to_partial_path = "navigations/item"
    end
  end
end

<%# app/views/navigations/_navigation.html.erb %>
<nav>
  <ul>
    <%= render navigation.items %>
  </ul>
</nav>

Our call to render the navigation is also tidy:

<%# app/views/layouts/application.html.erb %>
<%= render navigation(current_user) %>

The second half of the talk demonstrated a derivation of a slotted partial system in around 20 lines-of-code:

module PartialsHelper
  def component_partial
    Partial.new(self)
  end

  class Partial
    def initialize(view_context)
      @view_context = view_context
      @contents = Hash.new { |h, k| h[k] = ActiveSupport::SafeBuffer.new }
    end

    def content_for(name, content = nil, &block)
      if content || block
        content = @view_context.capture(&block) if block
        @contents[name] << content.to_s
        nil
      else
        @contents[name].presence
      end
    end
  end
end

With usage as follows:

<%# app/views/components/_card.html.erb %>
<% yield partial = component_partial %>

<article>
  <div class="…">
    <%= partial.content_for(:image) %>
  </div>

  <h2><%= partial.content_for(:heading) %></h2>

  <div class="…">
    <%= partial.content_for(:description) %>
  </div>
</article>

<%# app/views/products/_product.html.erb %>

<%= render "card" do |partial| %>
  <% partial.content_for :image do %>
    <%= image_tag product.image %>
  <% end %>

  <% partial.content_for :heading, product.name %>

  <% partial.content_for :description do %>
    <%= simple_format product.description %>
  <% end %>
<% end %>

This pattern forms the basis of the nice_partials gem, which includes a ton of extra niceties.

Turbo Native without Turbo?

Fri, 19 Jul 2024 09:27:51 GMT

Native navigation with web content is a popular approach to building mobile apps. It’s used by some of the biggest companies in the world, including BBC and Amazon.

37signals have open-source adapters using this idea, enabling web apps that use Turbo on the front-end to create native navigation experiences on iOS and Android. These depend on Turbo, but what if you prefer another client-side library, such as htmx, or Inertia.js?

Turbo’s process is quite straightforward: intercept link clicks, fetch the content, and render the new content. This forms the concept of a Turbo Visit. Turbo triggers Visit lifecycle events that are sent to the native adapter, which then can update the navigation stack. Libraries such as htmx and Inertia.js follow similar approach, so as long as these libraries offer a comprehensive event system, is should be possible to create a translation layer.

I have been experimenting with creating a translation layer for htmx, and it looks like it’s possible. It consists of two parts:

turbo-native-htmx-driver: translates htmx events into Turbo Native adapter method calls.
turbo-shim: a universal shim that implements the basic methods required for the Turbo Native adapters. It provides the way to register drivers.

I’ve targeted iOS for now, and here it is working with the Turbo Native demo:

If you’re interested in this idea, please get in touch.

Optimistic UI with Ruby on Rails & Hotwire

Sun, 07 Jul 2024 14:53:50 GMT

This post details a proof-of-concept for optimistic UI. If you want to just browse the source, check out the optimistic-ui-hotwire-rails GitHub repository.

Optimistic UI enhances perceived speed and responsiveness by immediately updating the UI with an expected state before the server's response is received. This approach is used when the application can predict the outcome of an action based on context and user input, allowing for an immediate response to actions.
Pending and Optimistic UI on the Remix Docs

Optimistic UI is tricky for apps that predominantly render their HTML on the server. However, in simple cases where we can reasonably predict the outcome of a user action, we can achieve a Good Enough™️ experience.

The Hotwire example below takes the follow approach:

Pre-render the HTML with placeholders for content
When a form is submitted, replace the placeholders with real content
Use Turbo Stream Actions to insert the new HTML
The server re-renders the page, displaying the persisted comment

Optimistic Comments

Let’s create a basic form that lets users submit a comment. Our comments/index.html.erb template might look like:

<%= turbo_refreshes_with scroll: :preserve %>

<%= form_with model: @comment do |form| %>
  <%= form.text_field :body, autofocus: true %>
  <%= form.submit "Send" %>
<% end %>

<div id="comments">
  <%= render @comments %>
</div>

… backed by a controller:

class CommentsController < ApplicationController
  def index
    @comment = Comment.new
    @comments = Comment.all.order(created_at: :desc)
  end

  def create
    @comment = Comment.new(comment_params)
    @comment.save
    redirect_back_or_to comments_path
  end

  private

  def comment_params
    params.require(:comment).permit(:body)
  end
end

And finally our comments/_comment.html.erb partial:

<article>
  <div class="comment-body">
    <div class="bubble">
      <%= simple_format comment.body %>
    </div>
  </div>

  <footer>
    <%= comment.created_at.to_fs(:short) %>
  </footer>
</article>

We’re now ready to get optimistic. Our optimistic UI will prepend a new comment immediately, before the server responds and updates the page. But first, we need to refactor comments/_comment.html.erb so that it can be pre-rendered with placeholders.

A Reusable Comment Partial

Our current _comment.html.erb partial depends on a Comment instance, but for the pre-rendering stage, we don’t have one. We could create a dummy Comment object that contains placeholders for the body and footer, but I’ve found it useful to layer up partials like so:

<%# app/views/application/_comment.html.erb %>
<article>
  <div class="comment-body">
    <div class="bubble">
      <%= body %>
    </div>
  </div>

  <footer>
    <%= footer %>
  </footer>
</article>

<%# app/views/comments/_comment.html.erb %>
<%= render "application/comment", {
  body: simple_format(comment.body),
  footer: comment.created_at.to_fs(:short)
} %>

In this way, you have a reusable application/_comment.html.erb partial that can be used in any context—whether it’s rendered with a Comment or not. Note: I’ve used local variables here, but you may wish to use a library that supports slots, like nice_partials or ViewComponent.

Pre-rendering with Placeholders

Returning to our comment form, we can now pre-render a comment and set out how it will be inserted with a Turbo Stream Action.

Our optimistic comment will simply display “Sending…” in the footer. The body will be dynamic, populated with the value of the form’s comment[body] input. We’ll hook this up later in our Stimulus controller.

<%# `app/views/comments/index.html.erb` %>
<%# … %>
<%= form_with model: @comment, data: {controller: "optimistic-form", action: "optimistic-form#performActions"} do |form| %>
  <%= form.text_field :body, autofocus: true %>
  <%= form.submit "Send" %>

  <template data-optimistic-form-target="actions">
    <%= turbo_stream.prepend "comments", partial: "application/comment", locals: {
      body: "${params['comment[body]']}",
      footer: "Sending…"
    } %>
  </template>
<% end %>

We render a Turbo Stream Action that prepends the pre-rendered comment. It’s wrapped in a <template> element so it isn’t executed immediately. In this case, we’re only performing a single action, but this template can contain multiple Turbo Stream Actions if needed.

Our form is controlled by an optimistic-form Stimulus controller, which we’ll set up next. On submit, we call optimistic-form#performActions which activates the actions in the template.

Finally, we set the body and footer locals. The body uses JavaScript template literal placeholder syntax (${}). This is important as it will allow us to dynamically insert the form’s comment[body] value.

Stimulus Controller

With all this in place, our Stimulus controller just needs to fill the pre-rendered comment with the form’s content, then activate the Turbo Stream Action.

// app/javascript/controllers/optimistic_form_controller.js
import { Controller } from '@hotwired/stimulus'
import { fill, escape, raw } from '@domchristie/composite'

export default class OptimisticFormController extends Controller {
  static targets = ['actions']

  async performActions () {
    this.element.insertAdjacentHTML(
      'beforeend',
      fill(this.actionsTarget, { params: this.params })
    )
  }

  get params () {
    return Object.fromEntries(new FormData(this.element))
  }
}

@domchristie/composite is a tiny library that takes a <template>, converts its content to a template literal, and fills the placeholders with the given data. Here, we create the data from the form’s FormData, and pass it to Composite’s fill function as params. The comment body is contained in a field named comment[body], so we can reference it as params['comment[body]'].

Finally, we can activate the Turbo Stream Actions by appending them to the form using insertAdjacentHTML.

Comment Formatting

This works, but the comment body is not formatted like that in comments/_comment.html.erb which uses Rails’ simple_format. So when the page is replaced with the server-rendered version, the change might be jarring.

We can fix this by porting Rails’ simple_format helper to JavaScript. (Thanks Karol Bucek!), and providing access to it in the pre-rendered template, via the controller. Note that we’re passing in the controller (this) into the fill function to make it available. We’ll use Composite’s escape and raw functions to help with this.

// app/javascript/controllers/optimistic_form_controller.js
import { Controller } from '@hotwired/stimulus'
import { fill, escape, raw } from '@domchristie/composite'

export default class OptimisticFormController extends Controller {
  static targets = ['actions']

  async performActions () {
    this.element.insertAdjacentHTML(
      'beforeend',
      fill(this.actionsTarget, {
        params: this.params,
        controller: this
      })
    )
  }

  get params () {
    return Object.fromEntries(new FormData(this.element))
  }

  simpleFormat (text) {
    text = escape(text)
    text = text
      .replace(/\r\n?/g, '\n')
      .replace(/\n\n+/g, '</p>\n\n<p>')
      .replace(/([^\n]\n)(?=[^\n])/g, '$1<br/>')
    return raw(`<p>${text}</p>`)
  }
}

Now we can access the controller in our template, and call controller.simpleFormat:

<%# `app/views/comments/index.html.erb` %>
<%# … %>
<%= form_with model: @comment, … do |form| %>
  <%# … %>
  <template data-optimistic-form-target="actions">
    <%= turbo_stream.prepend "comments", partial: "application/comment", locals: {
      body: "${controller.simpleFormat(params['comment[body]'])}",
      footer: "Sending…"
    } %>
  </template>
<% end %>

Styling Optimistic Comments

To communicate whether a comment is optimistic or persisted, we can add a data-optimistic attribute to the comment, allowing us to style it accordingly.

<%# `app/views/application/_comment.html.erb` %>
<article <%= "data-optimistic" if local_assigns[:optimistic] %>>
  <div class="comment-body">
    <div class="bubble">
      <%= body %>
    </div>
  </div>

  <footer>
    <%= footer %>
  </footer>
</article>

<%# `app/views/comments/index.html.erb` %>
<%# … %>
<%= form_with model: @comment, … do |form| %>
  <%# … %>
  <template data-optimistic-form-target="actions">
    <%= turbo_stream.prepend "comments", partial: "application/comment", locals: {
      body: "${controller.simpleFormat(params['comment[body]'])}",
      footer: "Sending…",
      optimistic: true
    } %>
  </template>
<% end %>

/* app/assets/stylesheets/application.css */
article[data-optimistic] .bubble {
  color: #666;
  border-color: #e6e6e6;
  background-color: #f9f9f9;
}

The Final Result

Downsides

This approach works best with simple updates: simple components with straightforward markup, and minimal DOM operations—like adding a single comment. Rendering complex elements with dynamic content might be tricky.

If your optimistic component includes lots of logic, it probably won’t work so well. If your update includes lots of DOM updates, it’ll be hard to keep it in-sync with the server-rendered version. If your template uses lots of helpers (like simple_format), you may find yourself reimplementing each one in JavaScript. And finally, this currently relies on server-rendered error pages if things go wrong; probably fine if the device is online, but not great otherwise.

If optimistic UI is a crucial part of your experience and you begin to feel the issues above, then it might be worth exploring alternatives. Mustache offers a shared templating system, allowing you to render the same template in different languages. Alternatively you could implement your feature with a client-side framework.

Conclusion

Optimistic UI can be achieved in server-rendered apps with Hotwire. By pre-rendering the UI on the client, filling its content with dynamic (form) data, and activating Turbo Stream Actions, we can get a good enough experience without the complexity of a client-side framework.

However, this approach has its limitations. It works best for simple updates, and can be tricky to extend to more complex components. If you find yourself reimplementing lots of Rails helpers in JavaScript, or struggling to keep the client updates and server-rendered version in sync, it might be worth considering a different approach.

Tailwind Repetition

Mon, 01 Jul 2024 21:23:28 GMT

The biggest complaint about Tailwind CSS is that it results in long, ugly lists of class names that are difficult to maintain, particularly if they’re repeated.

This popped up again the other day, with the following example… How do you usually avoid this in #tailwind? #rubyonrails:

<%= link_to "Home", "/", class: "text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700 data-[active=true]:bg-gray-500" %>
<%= link_to "Projects", "/projects", class: "text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700 data-[active=true]:bg-gray-500" %>
<%= link_to "Monitor", "/monitor", class: "text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700 data-[active=true]:bg-gray-500" %>
<%= link_to "Dashboard", "/dashboard", class: "text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700 data-[active=true]:bg-gray-500" %>

With a traditional CSS approach, it’d be common to create a .nav-link class, and set the styles in a separate stylesheet. With Tailwind, this approach can be achieved with @apply:

<%= link_to "Home", "/", class: "nav-link" %>
<%= link_to "Projects", "/projects", class: "nav-link" %>
<%= link_to "Monitor", "/monitor", class: "nav-link" %>
<%= link_to "Dashboard", "/dashboard", class: "nav-link" %>

/* application.css */
@layer components {
  .nav-link {
    @apply text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700 data-[active=true]:bg-gray-500;
  }
}

However, one of the key benefits of just using Tailwind’s classes is you don’t have to worry about naming things, or architecting and maintaining your own CSS files. With @apply, you end up dealing with those considerations.

So, if @apply isn’t recommended, what are the other options?

One of my favourite hidden features of Tailwind is that the ugliness of the class names encourages you to think about how to improve the structure of view code. Here’s an analysis of some of the options mentioned in that thread.

Alternative Approaches

1. Do Nothing

If this is the only place these classes used, it might be preferable to leave it as-is. The styles may only change very rarely (or not at all), and so updating the list of classes isn’t a maintenance burden. Most editors support multi-cursor editing to help with this.

If the styles do change frequently, and updates are beginning to hurt, then consider another approach, but just because it’s repetitive and ugly, it doesn’t necessarily mean it’s hard to maintain. While it might seem unsightly, there’s value in patiently waiting for a good abstraction to present itself; now might not be the right time to shift things around. I’d rather deal with long lists of classes over untangling specificity issues in arbitrarily organised CSS files.

The benefit here is that there’s no misdirection and no naming decisions. All the styles are there to be seen and updated. What’s more, if one of the links requires custom styles, it’s easy to break out of the standard styles for that exception.

2. Local Variable

<% classes = "text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700 data-[active=true]:bg-gray-500" %>
<%= link_to "Home", "/", class: classes %>
<%= link_to "Projects", "/projects", class: classes %>
<%= link_to "Monitor", "/monitor", class: classes %>
<%= link_to "Dashboard", "/dashboard", class: classes %>

This is a good first step to avoiding the repetition. It’s clear, and breaking out of the standard styles would be easy. However, there’s still a fair bit of repetition outside of the class names: <%= link_to "…, "…", class: classes %>. If we really felt the need to DRY it up, we could do better.

In fact, it looks like the original example failed to include the data-active attribute, so in reality, an updated version might be:

<% classes = "text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700 data-[active=true]:bg-gray-500" %>
<%= link_to "Home", "/", class: classes, data: {active: current_page?("/")} %>
<%= link_to "Projects", "/projects", class: classes, data: {active: current_page?("/projects")} %>
<%= link_to "Monitor", "/monitor", class: classes, data: {active: current_page?("/monitor")} %>
<%= link_to "Dashboard", "/dashboard", class: classes, data: {active: current_page?("/dashboard")} %>

This looks similar to the @apply approach, but it keeps the classes in the same file as the markup. However, we’ve only reduced the repetition of the CSS classes. The current_page? check is still repetitive. Adding another link would require adding link text, a path, and ensuring the active logic is correct.

3. Loop

<% [
  ["Home", "/"],
  ["Projects", "/projects"],
  ["Monitor", "/monitor"],
  ["Dashboard", "/dashboard"]
].each do |text, path| %>
  <%= link_to text, path, class: "text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700 data-[active=true]:bg-gray-500", data: {active: current_page?(path)} %>
<% end %>

This really cleans up the repetition. The classes and active attributes are only stated once. Adding links is just a case of modifying the array. Breaking out of the styles could be achieved with another option, e.g.

<% [
  ["Home", "/", "text-black text-bold …"],
  ["Projects", "/projects"],
  ["Monitor", "/monitor"],
  ["Dashboard", "/dashboard"]
].each do |text, path, classes| %>
  <%= link_to text, path, class: classes || "text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700 data-[active=true]:bg-gray-500" %>
<% end %>

But the deeper benefit is that the code is beginning to reveal potential improvements for how to model the UI. The collection of values suggests the presence of an underlying object.

If the navigation requirements were to become more complex, you might consider encapsulating these values in a class and rendering them as follows:

# app/models/navigation_item.rb
class NavigationItem
  attr_reader :path, :text

  def initialize(path, text)
    @path = path
    @text = text
  end

  def self.all
    [
      ["Home", "/"],
      ["Projects", "/projects"],
      ["Monitor", "/monitor"],
      ["Dashboard", "/dashboard"]
    ].map {|text, path| new(path, text) }
  end
end

<% NavigationItem.all.each do |item| %>
  <%= link_to item.text, item.path, class: "text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700 data-[active=true]:bg-gray-500" %>
<% end %>

Then if the markup becomes complex, move it to a partial. By setting to_partial_path in the class, Rails can automatically lookup and render the partials:

class NavigationItem
  # …
  def to_partial_path
    "navigations/item"
  end
end

<%# app/views/navigations/_item.html.erb %>
<%= link_to item.path, class: "text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700 data-[active=true]:bg-gray-500" do %>
  <%# … %>
  <%= item.text %>
<% end %>

<%= render NavigationItem.all %>

The downside is that you’ve had to name the concept. However, by this stage, the UI concept is concrete and the naming decision is clear. The HTML can still be written in html+erb files, and hopefully the styles are established enough to not need frequent updating.

The best feature of this approach, is that there are clear options as the code grows and becomes more complex. We’ve gone from looping over a bit of data, to looping over objects that represent the data, to partials that are automatically rendered.

4. Custom `link_to`

<%= nav_link_to "Home", "/" %>
<%= nav_link_to "Projects", "/projects" %>
<%= nav_link_to "Monitor", "/monitor" %>
<%= nav_link_to "Dashboard", "/dashboard" %>

module UiHelper
  def nav_link_to(text, path)
    link_to text, path, class: "text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700 data-[active=true]:bg-gray-500", data: {active: current_page?(path)}
  end
end

This is a straightforward approach that encapsulates the markup with the variables passed in. It looks tidy, but I’ve found it can be problematic.

First, it looks like Rails’ own link_to, so there might be an expectation that it mirrors that API, but it doesn’t. Of course we could create an identical API that wraps link_to and adds the classes, but that adds complexity. If Rails extends its link_to API, our code should follow suit to avoid confusion.

Second, writing markup in helpers is awkward. Fine for a single element, but too many more and you end up concating strings, or calling html_safe. As such, this approach isn’t really open to extension.

Finally, you have to choose how you organise your helpers. Should this live in ApplicationHelper? Should I create a new helper? UiHelper? NavigationsHelper? You immediately end up with the same naming and architecture problems that Tailwind aims to solve.

5. ActionView::Attributes

<%= link_to "Home", "/", ui.nav_link("/") %>
<%= link_to "Projects", "/projects", ui.nav_link("/projects") %>
<%= link_to "Monitor", "/monitor", ui.nav_link("/monitor") %>
<%= link_to "Dashboard", "/dashboard", ui.nav_link("/dashboard") %>

module UiHelper
  def ui
    @ui ||= Ui.new(self)
  end

  class Ui
    delegate_missing_to :@view_context

    def initialize(view_context)
      @view_context = view_context
    end

    def nav_link(path)
      tag.attributes class: "text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700 data-[active=true]:bg-gray-500", data: {active: current_page?(path)}
    end
  end
end

The ActionView::Attributes gem enhances Rails’ tag.attributes helper. It makes it easy to build collections of HTML attributes for sharing in various contexts and elements. It’s really smart about how attributes are merged. For example:

tag.attributes(class: "text-bold").merge(class: "text-blue-700")
# outputs: "class='text-bold text-blue-700'", no clobbering!

You can think of this as composition. For example, we can apply a set of button attributes (ui.button) like so:

<%= link_to "Get Started", new_user_path, ui.button %>
<%= button_to "Like", likes_path, ui.button %>
<%= submit_tag "Join", ui.button %>
<%= form.submit "Update", ui.button %>

This is preferable to “button” component as it enables developers to use the familiar Rails APIs they’re used to (link_to, button_to, etc.) while maintaining consistent styling and behaviours.

Components work best when they share both elements and attributes; composing attributes works best when the attributes are shared amongst various elements.

The downside here is that you have to architect your attributes in a separate file. As such, it’s better suited to established APIs, when you’re reasonable confident of the set of attributes and how they fit into the broader UI.

Conclusion

The explicit repetitiveness of Tailwind’s classes pushes developers to look for ways improve their code structure. Combining Tailwind classes into single compound classes (like .nav-link) only reduces HTML class repetition—not repetition in the HTML, and exploring other approaches may reveal better ways to model the user interface.

My first thought to tidy repetitive Tailwind classes was to use ActionView::Attributes. It’s a flexible approach, and very good for sharing attributes amongst different elements. However, when examining the benefits of a loop, it’s probably a better fit for the original problem. Its extensibility helps guide you towards a more structured approach to their UI, and provides options as the code grows.

However, I’d encourage developers to tolerate a level of messiness. Only commit to a lower-repetition approach when it hurts to maintain consistent styles. That way you have a better understanding of the problem and can make a more informed decision as to the best approach.

Hotwire Back Button

Sun, 12 May 2024 11:08:45 GMT

A Stimulus back button for full-screen progressive web apps (where the browser’s own back button is not visible), or wherever you need back functionality within your own user interface.

<a
  href="/dashboard"
  data-controller="navigation"
  data-action="navigation#back"
  data-turbo-action="replace">Back</a>

import { Controller } from '@hotwired/stimulus'

export default class NavigationController extends Controller {
  back (event) {
    if (this.#shouldRestore) {
      event.preventDefault()
      window.history.back()
    }
  }

  get #shouldRestore () {
    return !this.#isFirstHistoryEntry
  }

  get #isFirstHistoryEntry () {
    return !window.history.state.turbo ||
      window.history.state.turbo.restorationIndex === 0
  }
}

When a user navigates from page-to-page within your Turbo-driven app, this back button (or link) behaves just like a browser back button, taking the user back to where they came from.

When a user arrives at a page from an external site, this back button visits the link’s URL, replacing the browser’s history entry, leading to a consistent information architecture.

This works by using Turbo’s history state. We can determine if the current page is the first visited page when the user lands on our app. If it is, we need to follow the back button’s URL, keeping the user within our app; otherwise we can just traverse the history.

What’s more, this works even if the page is reloaded: history state is preserved across reloads (🤯). So if a user navigates and reloads, we can still determine how this back button should behave as before.

Turbo Teapot

Sun, 05 May 2024 14:38:50 GMT

You probably shouldn’t do this, but anyway… I’ve been upgrading an app from Turbolinks to Turbo, and there are a number of controller actions that render successful responses after form submissions. Turbo expects the server to return an HTTP 303 See Other response in these cases, so returning 2xx won’t render anything. However, Turbo does render error responses (4xx and 5xx).

The HTTP status 418 I'm a teapot was an April Fools’ joke, so it’s basically nonsense, but we can use it as a temporary workround for Turbo’s requirements. For example:

class PostsController < ApplicationController
  def create
    if @post = Post.create(post_params)
      render status: (request.format.turbo_stream? ? 418 : :created)
    else
      render :new, status: :unprocessable_entity
    end
  end
end

My colleague Sam Oliver suggested wrapping this up in a patch, which ended up looking like this:

# lib/render_418_for_turbo.rb
module Render418ForTurbo
  def render(*args)
    message = "[Render418ForTurbo]: Responding with 418 status to work around Turbo's rendering limitation."

    if !request.get? && request.format.turbo_stream?
      if options = args.find { |arg| arg.is_a?(Hash) }
        unless options[:status]
          puts message # or my_logger.info message
          options[:status] = 418
        end
      else
        puts message # or my_logger.info message
        args.push(status: 418)
      end
    end

    super
  end
end

# app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  prepend Render418ForTurbo
end

This patch adds a 418 statuses for non-GET requests that were made via Turbo. It will only add the status if a status is not present, and will log the override.

Turbo & Progressive Enhancement

Sun, 28 Apr 2024 08:21:00 GMT

Before jumping into composing Turbo Streams or wrapping elements in Turbo Frames, consider what the experience might be without any JavaScript or Hotwire. While a no-JS flow may not be commonly experienced, thinking in this way can lead to cleaner, more robust solutions.

Let’s say we have a button that toggles a post’s publish column, and we want to update the screen in-place. Our response could just return the user back to the page they were on, with the button updated:

class Post::PublishesController < ApplicationController
  def create
    post = Post.find(params[:post_id])
    post.publish!
    redirect_back_or_to post, status: :see_other
  end

  def destroy
    post = Post.find(params[:post_id])
    post.unpublish!
    redirect_back_or_to post, status: :see_other
  end
end

This would work without any JavaScript, but if the user had scrolled the page, their scroll position would be reset.

Enhance!

The simplest enhancement is to maintain the user’s scroll position by adding <meta name="turbo-refresh-scroll" content="preserve"> to the <head>. We don’t need to change any controller code, everything is handled by Turbo. What’s more, if the UI augments over time and includes more elements that require dynamic updates (e.g. a published post count), we don’t need to account for them in our response since the entire content is refreshed. (Compare with Turbo Stream actions that may require modification with each UI change.)

Next, if we need to preserve more of the UI state, we could morph the refresh by adding <meta name="turbo-refresh-method" content="morph"> to the <head>.

A final benefit of this code is that it’s usable in different contexts. redirect_back_or_to is really handy for these situations. We can create a publish toggle button on another page, point it to this controller, and it will work in the same way—again without having to add or change any controller code, or fiddle about with Turbo Stream actions.

Concepts demonstrated:

Open-closed principle: our UI is open for extension without having to modify existing controller code
Sandi Metz’s TRUE principles from Practical Object-Oriented Design: our controller action is Useful in different contexts

Turbo Refreshes, Frames, and Streams

Sun, 21 Apr 2024 10:15:00 GMT

A guide for when to use each Turbo feature.

Turbo Refreshes

Turbo Refreshes update the entire current page in place while keeping some UI state e.g. the page’s scroll position. This might seem like overkill in some cases and they’re slower that Turbo Streams, but they can really simplify response code (and the performance hit may not matter anyway).

Refreshes let you customise whether the page’s scroll position is reset or preserved, and/or whether the page’s content is replaced or “morphed”. The simplest refresh enhancement just maintains the scroll position and replaces the content:

<%# With Ruby on Rails %>
<%= turbo_refreshes_with scroll: :preserve %>

<%# or with plain HTML in the <head> %>
<meta name="turbo-refresh-scroll" content="preserve">

Morphs

For advanced cases you can also “morph” the page’s content. This updates only the elements that have changed, leaving the rest untouched. Morphing is useful when you need to maintain UI state such as the content of input fields, element scroll positions, or if you’re remotely updating another connected client via a broadcasted (Web Socket) Turbo Stream.

<%# With Ruby on Rails %>
<%= turbo_refreshes_with scroll: :preserve, method: :morph %>

<%# or with plain HTML in the <head> %>
<meta name="turbo-refresh-scroll" content="preserve">
<meta name="turbo-refresh-method" content="morph">

Note: Morphs can reset elements to their server state, reverting changes that have been made locally. Fixing these issues may require knowledge of DOM-diffing algorithms. data-turbo-permanent provides a solution to opt-out of morphing for those elements, but dotting this around arbitrarily feels like a bit of a code-smell.

Turbo Frames

Use Turbo Frames for parts of the page that have a distinct independent context. This becomes clearer with experience, but their features provide some hints. Turbo Frame contents are navigable from links and forms, and they can be loaded asynchronously from the rest of the page load. If you don’t feel your interface benefits from these features, then consider a Refresh or Streams.

Turbo Streams

Turbo Streams are inviting because they fit a simple procedural mindset: “when I press this button, I want to update X, Y, and Z”. However this can easily escalate, and your responses become an unstructured mess of arbitrary Turbo Stream actions. If you’re rendering more than a few Turbo Stream actions, consider Frames or Refreshes.

To update multiple clients in realtime, you’ll need to broadcast a Turbo Stream over a Web Socket connection. The same principles diagrammed above apply in this case too: if the response makes multiple updates, broadcast a Turbo Stream Refresh, otherwise broadcast Turbo Stream actions.

Art We Are Drawn To

Sat, 02 Mar 2024 10:06:44 GMT

[T]he art that people are drawn to–at an individual and collective level–reflects much about what is missing from their lives. The particular register of emotions we're sensitive to in the visual sphere hints at what we long for, but don't reliably have a connection to, in ourselves.
The Good Enough Parent 2021, p.83

Today I Learned

Fri, 01 Mar 2024 08:43:04 GMT

To have a scrollable element scroll to the bottom by default (CSS only, without JavaScript), use display: flex; flex-direction: column-reverse. Via StackOverflow.

Enhance Music

Thu, 12 Oct 2023 06:15:00 GMT

Enhance Music is a clever demonstration of a progressively enhanced music player. The fallback uses links to navigate an iframe player bar which includes an autoplay audio element. It is enhanced with a custom JavaScript-based player that persists between page loads. A great example of lateral thinking with withered technology.

Tailwind Utopia

Mon, 09 Oct 2023 07:32:43 GMT

Tailwind Utopia is a Tailwind CSS plugin for generating fluid type and space scales based on Utopia.

James Gilyead’s introductory blog post explains this best, but the idea is that breakpoint-based design feels like creating fixed layouts for an abitrary number of sizes. The Utopia approach encourages designers to design type and space scales for the smallest and largest screens, then let maths design the sizes inbetween. No breakpoints, just an algorithm that interpolates between the two scales.

Utopia’s CSS space generator creates sizing variables that fluidly scale. For example:

:root {
  --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem); /* 18px-20px */
  --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem); /* 27px-30px */
  --space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem); /* 36px-40px */
}

Spacing pairs can also be generated, taking the fluid value for the smallest size, and scaling it to a larger value. For example:

:root {
  …
  --space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vw, 1.875rem); /* 18px-30px */
  --space-s-l: clamp(1.125rem, 0.6467rem + 2.3913vw, 2.5rem); /* 18px-40px */
}

The benefit of using a CSS generator like Tailwind, is that any number of these spacing pairs can be generated on-the-fly. Simply apply the fluid class names the HTML, and the spacing pair is generated:

<h1 class="mt-fl-sm-lg">Hello, world!</h1><!-- fluid margin top from sm-lg -->

So this is what Tailwind Utopia does.

The original tailwind-utopia plugin was developed by Chris Pymm and CWS Digital, and rewritten by me to work with Tailwind’s JIT compiler.

Today I Learned

Fri, 15 Sep 2023 08:24:53 GMT

I have been experimenting with the History API, working out a way to determine the direction of a popstate event. popstate is dispatched when navigating Back and Forward, and there’s no direction information in the event. However, reading Astro’s View Transition code, I noticed that Matthew Phillips had implemented this by storing an index in the History state, and keeping track of the current index on history.pushState. The direction can be then determined by comparing the current index with the index from the popstate event.

What was most surprising was the following:

if (history.state) {
  // we reloaded a page with history state
  // (e.g. history navigation from non-transition page or browser reload)
  // …
}

It turns out that the History state is persisted between page refreshes:

history.state // null
history.pushState({ index: 1 }, null)
history.state.index // 1
location.reload()
history.state.index // 1

UI Context and Rails Variants

Thu, 07 Sep 2023 08:35:52 GMT

This is a follow-up to Scoping Rails Controllers by UI Context, where I suggested a controller architecture for handling the same action in multiple contexts.

For example, in Apple’s iOS Mail app, you can delete a message in at least 3 different places: when reading the message itself, by swiping in a list, or deleting via a context menu. In each case, the code to delete the message might be the same, but the visual response differs.

The previous post suggested a 1:1 mapping between routes and controller actions to handle each case, scoped by the UI context:

DELETE /messages/:id => messages#destroy (default case)
DELETE /list_items/messages/:id => list_items/messages#destroy
DELETE /context_menus/messages/:id => context_menus/messages#destroy

The deletion code could be shared through inheritance or composition, but the responses would vary.

Variants

After I shared this on Kasper’s Discord, Kasper suggested an approach using variants. Rather than a 1:1 mapping of routes to controller actions, Kasper suggested mapping different routes to a single controller action, and switching the response based on the variant. The variant could be sent as a default param and set in the controller. For example, the routes might look as follows:

# config/routes.rb
Rails.application.routes.draw do
  resources :messages

  scope :list_items, as: :list_items, defaults: {variant: :list_items} do
    resources :messages
  end

  scope :context_menus, as: :context_menus, defaults: {variant: :context_menus} do
    resources :messages
  end
  # …
end
# (Yes, there is repetition here, which could be cleaned up)

With this in place, we have the following routes that all map to messages#destroy, but each has a different params[:variant].

DELETE /messages/:id => messages#destroy
DELETE /list_items/messages/:id => messages#destroy
DELETE /context_menus/messages/:id => messages#destroy

The request variant could then be set as follows:

class ApplicationController < ActionController::Base
  before_action :set_variant

  VARIANTS = [:list_items, :context_menus]

  def set_variant
    request.variant << params[:variant].to_sym if params[:variant].in?(VARIANTS)
  end
  # …
end

From here we can customise our responses. We could do this via templates or via a respond_to call:

class MessagesController < ApplicationController
  def destroy
    @message = Message.find(params[:id])
    @message.destroy!

    respond_to do |format|
      format.turbo_stream.none {…}
      format.turbo_stream.list_items {…}
      format.turbo_stream.context_menus {…}
    end
  end
  # …
end

Overall, I really like the variants approach. Routing different paths to a single controller action feels cleaner and more manageable. I think the only downside is if we needed additional device-specific variants i.e. if we also wanted to render a different context menu on desktop vs mobile, it might be tricky.

Hotwire & Personalised Content

Wed, 06 Sep 2023 08:05:10 GMT

Here’s an alternative approach to that which James Adam describes in TIL: Turbo Stream and personalised content.

To recap the problem: how do you personalise content when rendering from a WebSocket Turbo Stream? The rendering is not in the context of a request, so customisations based on objects like current_user will fail. For example, consider a chat app where messages should display the author name or “You” when viewing your own messages:

<%# app/views/messages/_message.html.erb %>
<article id="<%= dom_id(message) %>">
  <%= current_user == message.author ? "You" : message.author.name %>:
  <%= message.body %>
</article>

James’s solution is to flag potential customisations in the partial with data attributes, and then conditionally update them using a Stimulus controller.

We faced the same issue a while back with Pusher (pre-Hotwire and pre-Action Cable), and my colleague, Sam Oliver, suggested an approach that works around the WebSocket rendering limitation. Here’s how that idea might look with with Hotwire/Turbo.

Rendering via Requests

Instead of using the WebSocket Turbo Stream to append newly created messages directly, we’ll use it to instruct each client to make an HTTP request to messages#show. The response will be a Turbo Stream that appends the new message. The partial renderer now has access to a user-specific request, and can make personalisations as needed.

First, we’ll create our custom Turbo Stream action. It includes the fetch action attribute and the URL to fetch^[1].

<%# app/views/application/_fetch.turbo_stream.erb %>
<turbo-stream action="fetch" url="<%= url_for(url) %>"></turbo-stream>

The custom action JavaScript below creates a link with the given url attribute. This link includes a data-turbo-stream attribute to trigger a Turbo Stream response. It’s appended to the body, programmatically clicked, then removed.

// app/javascript/application.js
import { Turbo } from '@hotwired/turbo'

// <turbo-stream action="fetch" url="/messages/1"></turbo-stream>
Turbo.StreamActions.fetch = function () {
  const fetcher = document.createElement('a')
  fetcher.href = this.getAttribute('url')
  fetcher.dataset.turboStream = true
  document.body.appendChild(fetcher)
  fetcher.click()
  document.body.removeChild(fetcher)
}
// …

Next, we’ll update the model to broadcast the custom fetch action:

class Message < ApplicationRecord
  after_create_commit -> {
    broadcast_render_to(:messages, partial: "fetch", locals: {url: self})
  }
  # …
end

Finally, we’ll add a messages#show action that appends the message:

class MessagesController < ApplicationController
  def show
    @message = Message.find(params[:id])
    # authorize current_user can read message
  end
  # …
end

<%# app/views/messages/show.turbo_stream.erb %>
<%= turbo_stream.append :messages, render(@message) %>

To summarise this flow:

A user sends a message
A custom WebSocket Turbo Stream fetch action is transmitted to all connected clients
This action instructs each client to make a Turbo Stream HTTP request to the given message URL
The response appends the message partial using turbo_stream.append

In this way, there’s no need to duplicate rendering logic in a Stimulus controller; all personalisation is declared in the message partial.

Downsides

The main downside is that it incurs additional HTTP round-trips. To the sender of the message, it might feel a little laggy. In our own Pusher-based app, we append the user’s message via the messages#create response, and only stream the fetch action to the recipient^[2], which helps it feel snappier. The delay in appending the message could be remedied in other ways, e.g. with improved loading feedback, or even an optimistic update, whereby the message is provisionally appended on the client and then updated.

These additional requests will also impact the load on the server. For most cases, this probably won’t be a problem, but at larger scales with many connected users, this might be a consideration.

[1] Using url_for means url can be either a string or Active Record object (or any other object that url_for supports). It’s particularly useful in our case as we can generate a URL for the newly created Message in our model, without having to call a URL helper.

[2] Pusher has a feature that can filter out user-sent events, so the fetch event is not broadcast to the user and therefore the message does not get appended twice.

Today I Learned

Wed, 16 Aug 2023 16:32:14 GMT

In Ruby, curly braces can be omitted from hashes not only when the hash is the last argument of a method, but also when it’s the last item in an array: [1, 2, three: :four]. Neat!

Today I Learned

Mon, 14 Aug 2023 18:46:55 GMT

Rails’ Array#inquiry makes checking string-like arrays easier (via Kasper Timm Hansen):

# instead of:
parts = [:feed, :description, :play, :play_later]
parts.include?(:description)

# with `inquiry`:
parts = [:feed, :description, :play, :play_later].inquiry
parts.description?

Rails’ truncate helper accepts a block which is captured and displayed when the contents is truncated. (via Matt Swanson on Twitter)

Scoping Rails Controllers by UI Context

Sat, 12 Aug 2023 16:00:32 GMT

Rails’ generators encourage developers to think about their controllers in terms of domain models. Running rails generate resource Message … will create the Message model along with a MessagesController. This setup works for simple cases, but when our user interfaces become more complex, trying to stuff all our actions into the MessagesController can lead to unmaintainable fat controllers.

Example: Deleting in Different Contexts

Consider how we might model deleting a message in Apple’s iOS Mail app. There are at least 3 ways to delete a single message:

Tapping the trash icon in the toolbar when viewing the message
Swiping on the message in a list
Long-pressing on the message in a list to bring up a context menu

Deleting a message when viewing it

Deleting by swiping

Deleting via a context menu

Each case deletes a message, but the visual outcomes vary:

when viewing the message, deleting removes the entire message, then displays the next message in the list
swiping removes the list item in place
deleting via the context menu hides the menu then removes the list item in place

Handling the first case is straightforward. We could display the trash button on our show view which destroys the record. Our MessagesController#destroy action could handle that:

class MessagesController < ApplicationController
  def index
    @messages = Message.all
  end

  def show
    @message = Message.find(params[:id])
  end

  def destroy
    @message = Message.find(params[:id])
    @message.destroy!
    redirect_to next_message || messages_path
  end

  private

  def next_message
    Message
      .where("created_at < ?", @message.created_at)
      .order(created_at: :desc)
      .first
  end
end

For the other cases, there are few approaches.

See the follow up: UI Context and Rails Variants for a rethink on the below approach.

First, we might be tempted to reuse and expand our destroy action by switching the response based on the context. We could achieve this by setting a context param on our destroy form.

Alternatively we might choose to add further actions to our MessagesController (e.g.destroy_in_list or destroy_in_context_menu).

In my experience, these approaches lead to unsatisfactory solutions. Switch statements become unwieldy and hard to test, or view directories become filled with unconventional templates. Both feel messy.

RESTful Nesting

When modelling user interfaces, I’ve found that sticking to RESTful actions with nested controllers works nicely, i.e. favouring index, new, create, show, edit, update, and destroy over custom actions, and nesting controllers in order to do so. This approach helps maintain a standard list of actions and templates and can aid with the discovery of other presentation objects.

When considering top-level naming, again, it’s tempting to stick to domain object names, e.g. Inboxes::MessagesController, but this would not help us much in the example above. Messages in the inbox can be deleted in at least two ways: by swiping, as well as from the context menu, so we’d still need two destroy actions.

One approach I’ve been considering is scoping by UI context. For example we could add a ListItems::MessagesController and a ContextMenus::MessagesController. Each response could update the UI as required:

ListItems::MessagesController#destroy could remove message list item
ContextMenus::MessagesController#destroy could remove the context menu and message

# app/controllers/list_items/messages_controller.rb
class ListItems::MessagesController < ApplicationController
  def destroy
    @message = Message.find(params[:id])
    @message.destroy!

    respond_to do |format|
      format.turbo_stream
      format.html { redirect_to messages_path }
    end
  end
end

# app/controllers/context_menus/messages_controller.rb
class ContextMenus::MessagesController < ApplicationController
  def destroy
    @message = Message.find(params[:id])
    @message.destroy!

    respond_to do |format|
      format.turbo_stream
      format.html { redirect_to messages_path }
    end
  end
end

This feels nice for a couple of reasons.

First, you see a pattern emerge in these two actions—their code is identical. The only difference exists between the turbo_stream templates. Once we’re confident that this pattern is is solid, we could extract it into a concern. The concern could even handle any ActiveRecord type by inferring the class and redirect-path from the controller name (see Appendix).

Second, it paves the way for other resources to follow the same pattern. A top-level ListItems or ContextMenus namespace clarifies where subsequent controllers should live, and it’s clearer than hiding a context parameter in a form, or implementing custom action names.

Scope by UI Context or Domain Object?

Should it be ListItems::MessagesController or Messages::ListItemsController? For the deletion case, I prefer ListItems::MessagesController: we’re destroying the message in the context of a list item, not the other way round. As mentioned above, it also clarifies the organisation for future list item controls.

However, for actions such as index and show, it doesn’t work quite so well. For example, let’s say we wanted an endpoint to render a context menu in a Turbo Frame, and we used ContextMenus::MessagesController#show to do so. This organisation communicates that this action shows a message in the context of a list item. As we’re showing a context menu with a list of actions, this framing is a bit of a stretch. Messages::ContextMenusController#show might be preferrable in this case, or we could add another layer of nesting: ContextMenus::Messages::ActionsController#index.

It’s still early days with this approach. I think I still prefer ContextMenus::MessagesController#show, and deal with how it might be a bit of a stretch, but I’ll see how it goes…

Finally, for UI context naming inspiration, check out Apple’s Human Interface Guidelines, particularly Menus and Actions

Appendix

A Destroyable controller concern with a destroy action that destroys a record and renders a corresponding turbo_stream or redirects.

# app/controllers/concerns/destroyable.rb
module Destroyable
  extend ActiveSupport::Concern

  def destroy
    @resource = resource_class.find(params[:id])
    @resource.destroy!

    respond_to do |format|
      format.turbo_stream
      format.html { redirect_to send(fallback_path) }
    end
  end

  private

  def resource_class
    controller_name.classify
  end

  def fallback_path
    "#{controller_name}_path"
  end
end

Bricolage

Fri, 11 Aug 2023 12:05:22 GMT

Bricolage looks great: A free and open source variable font with French attitude and British mannerisms across 3 axis: weight, width & optical size

Ruby Emoji

Tue, 27 Jun 2023 20:39:16 GMT

Ruby’s Regexp character properties provides a nice way to check for emoji characters:

"👍".match?(/\p{Emoji}/)
=> true

However, to check if a string consists entirely of emoji, the following does not work:

"❤️👍".match?(/^(\p{Emoji})$/)
=> false # ⁉️

❤️ is a compound emoji consisting of two characters: U+2764 (emoji), and a modifier U+FE0F (not emoji). So perform this check accurately, we use the grapheme_clusters string method. As implied, this splits the string into clusters of characters including their modifiers:

"❤️👍".grapheme_clusters
=> ["❤️", "👍"]

Modifiers come after the initial emoji, so if we check each cluster starts with an emoji we achieve the expected result:

"❤️👍".grapheme_clusters.all? { |e| e.match?(/^\p{Emoji}/) }
=> true

Apple Podcasts to OPML

Mon, 17 Apr 2023 08:57:04 GMT

Here’s an Apple Shortcut (for iOS & macOS) that exports podcast subscriptions to an OPML file, making it easier to switch away from Apple’s default Podcast app. It’s based on the Shortcut created by Pocket Casts (thanks!), but skips the importing part and instead just downloads the file.

Dynamic Viewport Height in Tailwind

Fri, 10 Mar 2023 12:18:46 GMT

I’m sure Tailwind will soon support Dynamic Viewport Units but in the meantime, here’s a plugin that generates .min-h-dscreen/.h-dscreen utilities. Values use 100dvh but fall back to -webkit-fill-available or environment calculations.

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  // …
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        '.min-h-dscreen': generate('minHeight'),
        '.h-dscreen': generate('height')
      })

      function generate (property) {
        return {
          [property]: [
            'calc(100vh - env(safe-area-inset-bottom, 0) - env(safe-area-inset-top, 0))',
            '100dvh'
          ],
          '@supports (-webkit-touch-callout: none)': {
            [property]: ['-webkit-fill-available', '100dvh']
          }
        }
      }
    })
  ]
}

Example Output

.min-h-dscreen {
  min-height: calc(100vh - env(safe-area-inset-bottom, 0) - env(safe-area-inset-top, 0));
  min-height: 100dvh;
}

@supports (-webkit-touch-callout: none) {
  .min-h-dscreen {
    min-height: -webkit-fill-available;
    min-height: 100dvh;
  }
}

Inspired by the discussion on -webkit-fill-available.

Pursuing Happiness

Fri, 10 Mar 2023 08:26:14 GMT

I really enjoyed the recent Hidden Brain episode, Happiness 2.0: The Path to Contentment. It discusses how focussing on attaining happiness can be damaging. The John Stuart Mill quotation referenced, summarised this perfectly:

Ask yourself whether you are happy and you cease to be so.

The research of Mihaly Csikszentmihalyi into flow is also mentioned. People experienced feelings of deep happiness after a period of flow, suggesting that when we lose track of our self, we open ourself up to being happy; and conversely, when we check in with ourselves, that sense of happiness can be interrupted.

Psychologist Iris Mauss referenced another John Stuart Mill quotation:

Those only are happy who have their minds fixed on some object other than their own happiness. On the happiness of others, on the improvement of mankind, even on some art or pursuit followed not as a means, but as itself an ideal end. Aiming thus at something else, they find happiness by the way.

Mauss also suggests a mindset of acceptance and approaching situations with preferences rather than necessities:

I think one overall recommendation is to have an accepting mindset for both our negative and our positive emotions. Don’t monitor as much, don’t try to avoid, don’t try to strive too much for something else. One way to think about this is that it replaces a mindset of “I need to be” with a mindset of “I prefer”. I think we can still have preferences. The problems come in where we tell ourselves, “I must feel a certain way or else I can’t have a good life.” That’s, I think, what we need to avoid. Preferences with a light touch are good for our mental health and well-being. It’s the need and the concern that we want to get away from.

Apps We Spend Our Time On

Sun, 04 Dec 2022 11:15:57 GMT

If all you ever eat is the factory-farmed fast food, you are not going to feel good. The things we remember in our lives are those great meals we had, surrounded by people we love, made by people who love us, that was a cuisine that was part of our community, or part of our culture, part of our tradition.
The same thing could be true of the web we spend our time on; what if an app or site that we use every day, was made by somebody we know that we love, that's part of a community that we're a part of, was made by people we can name? How many apps on your phone were made by somebody you know who made it? Not enough.
Anil Dash on The Talk Show

Partials

Thu, 17 Nov 2022 11:41:29 GMT

Counterarguments to Joel Drapper’s thoughts on Rails Partials. Joel’s points are quoted in italics.

Leakiness

[Partials are] leaky — instance variables are implicitly shared with all other views and the controller.

I don’t think this is that bad. Controller instance variables are basically template globals, and just as general wisdom advises to “avoid globals”, we can solve this with a simple design rule: don’t use instance variables in partials.

View Logic

it’s difficult to create partials that encapsulate view logic — they’re like a procedural script with no clear way to extract methods, attributes and calculations.

Borrowing from the design of Svelte and Astro components, I like to run a bit of embedded Ruby setup at the top, then include the markup below. It is procedural, but if the setup becomes unwieldy, then it might be time to refactor (perhaps with view models/presenters). Most my setup code is destructuring locals and setting defaults, so Rails 7.1’s strict locals (see Interface below), combined with Ruby’s new destructuring capabilities, will result in some pretty tidy code.

Inheritance & Composition

there’s no inheritance or ability to share concerns between different partials without hitting the leaky problem again.

It’s one-partial-per-file, so you can’t break a partial down into related parts and use composition.

Partials can render other partials, providing both inheritence and composition. For example a domain partial, _post.html.erb could render a low-level _card.html.erb (inheritence), and include _date.html.erb (composition).

<%# _card.html.erb %>
<article>
  <img src="<%= image_url %>">
  <h2><%= heading %><h2>
  <%= yield %>
</article>

<%# _date.html.erb %>
<time datetime="<%= date.to_fs(:iso8601) %>">
  <%= date.to_fs(:short) %>
</time>

<%# _post.html.erb %>
<%= render "card", heading: post.title, image_url: post.image_url do %>
  <%= render "date", date: post.published_at %>
  by <%= post.author %>
<% end %>

Interface

Partials never had a way to define an explicit interface or default “assigns” — I think this might be possible with “strict locals” now, but magic comments are far from ideal and they’re yet another syntax to learn.

Rails 7.1’s strict locals are a pragmatic solution to this and the syntax isn’t hard to learn (see below). I’d argue that learning to adapt partials is easier than learning the principles and syntax of another view library.

<%# locals: (message: "Hello, world!") -%>
<%= message %>

Slots

Partials don’t have slots. You can yield exactly one block into them.

It’s relatively straightforward to augment partials to support multiple slots by passing in an object to a partial’s yield. This is effectively what nice_partials does, but it’s also possible to roll your own solution in around 30 lines-of-code. (I’ll share this snippet at some point.)

Conclusion

Your mileage may vary, but for the apps I’ve worked on, partials feel like a good fit. They may have been misused in the past, but with a few conventions and enhancements, they can be a really powerful tool for composing templates. I do wish they were a little faster, and were easier to test, but perhaps I just need to dig a bit deeper into caching and view testing.

Today I Learned

Thu, 17 Nov 2022 10:52:53 GMT

Run migrations after a deploy to Heroku. In Procfile, add a release command:

web: bin/rails server -p $PORT
release: rails db:migrate

Learnt via Justin Searls’s The Selfish Programmer talk.

Continuous Delivery

Thu, 27 Oct 2022 10:33:34 GMT

Mike Coutermarsh’s talk at RailsSaaS has had an immediate impact on how I think about what can be deployed to production. Releasing small code changes has always been an approach I’ve followed, but I’ve only applied this to small refactors, upgrades, or bug fixes, rather than large features.

Mike’s approach recommends breaking down a feature into smaller, deployable elements, that can be hidden behind a feature flag (using something like Flipper). One example was to deploy the initial blank screen as soon as possible. When it comes to launching the feature, it’s a simple case of flipping the feature flag switch.

I’m curious to see how this will work in my practice. Often it’s hard to know how to architect a feature until it’s written in full, particularly in an established codebase where a refactor might be necessary. Tom MacWright puts it well:

okay hear me out: i think the best way to do huge refactors is to try doing them all in one, gigantic pull request / chunk, which inevitably fails and needs to be split into smaller ones. if you start with smaller ones, you won't understand the general shape until much later.
Tom MacWright on Twitter

So I think it probably depends on the confidence in your small units of work, and how much of the existing codebase your new code will touch. If you feel like you’re heading down a rabbit hole, then it might be worth exploring that to inform your approach.

The Same Thing in Multiple Contexts

Thu, 27 Oct 2022 10:04:50 GMT

The more contexts in which something is learned, the more the learner creates abstract models, and the less they rely on any particular example. Learners become better at applying their knowledge to a situation they've never seen before, which is the essence of creativity.
David Epstein in Range: Why Generalists Triumph in a Specialized World, p.77

RailsInspire

Mon, 24 Oct 2022 08:09:20 GMT

RailsInspire: a directory of patterns for Ruby on Rails apps. I particularly like the interface. It simply highlights the files needed to implement the pattern, including explanatory annotations. Really nice work from Jeremy Smith.

Objections

Sat, 01 Oct 2022 16:48:06 GMT

Nothing will ever be attempted if all possible objections must be first overcome.
Samuel Johnson

Process

Sat, 01 Oct 2022 13:10:51 GMT

Inspiration is for amateurs. The rest of us just show up and get to work. If you wait around for the clouds to part and a bolt of lightning to strike you in the brain, you are not going to make an awful lot of work. All the best ideas come out of the process; they come out of the work itself.
Chuck Close

Found via Kaushik Panchal on Design and Culture: Progress not perfection

Today I Learned

Fri, 30 Sep 2022 13:22:49 GMT

First, an interesting idea from Pascal Laliberté to combine Turbo Frames Turbo Streams. Useful if you want update an area outside the Turbo Frame when the frame re-renders.

For example, let’s say your Turbo Frame has a form, and after submission, you want to display a notice somewhere else, the response template might look something like:

<%= turbo_frame_tag :like do %>
  <%= render "form" %>
  <%= turbo_stream.update :notices, notice %>
<% end %>

Second, Rails’ compact_blank does what it says! Works on arrays and hashes. Via Matt Swanson on Twitter.

Early Generative Art by A. Michael Noll

Thu, 22 Sep 2022 14:38:42 GMT

Piet Mondrian’s “Composition with Lines” (1917) is one of my favourite artworks, and in searching for a print online, I came across the art of Professor A. Michael Noll.

Noll pioneered generative digital art in the 1960s, and in one of his experiments he digitally recreated “Composition with Lines”. Participants were asked whether they could determine the computer-generated version from the original, and which version they preferred. Only 28% were able to correctly identify the computer generated version, and 59% actually preferred it.

Left: © A. Michael Noll 1965. Right: © Rijkmuseum Kröller-Müller

This led me to more of Noll’s work, and I was drawn to his early experiments drawing patterns programmed with Fortran. I particularly like this note:

"Pattern Seven" was supposed to have been a series of randomly-placed prolate cycloids but apparently something went amiss.
Patterns by 7090

Pattern Seven © A. Michael Noll 1962

In his paper, Noll outlines the algorithm used to create Pattern Two (below), and I thought it’d be fun to replicate it on the web.

Pattern Two © A. Michael Noll 1962

… and here’s my replica:

Pattern Two replica captured from HTML canvas. Source

Thankfully I didn’t have to set up and CRT or a 35mm film camera (although perhaps that would’ve been fun?!) but there was a bit of wrangling to get it looking right. Perhaps I could run an experiment to see which people prefer?

BADBADNOTGOOD - Weight Off

Thu, 15 Sep 2022 09:42:42 GMT

Today I Learned

Wed, 14 Sep 2022 18:07:33 GMT

CSS media feature: @media (hover|any-hover: hover) {…}, useful for preventing annoying ghost hover states on touch devices. Via Sam Selikoff on Twitter.

rbenv-gem-migrate to migrate gems to a new version

Die With Me by Dries Depoorter

Tue, 13 Sep 2022 17:26:09 GMT

I love this kind of art. Die With Me by Dries Depoorter: The chat app you can only use when you have less than 5% battery

BART

Tue, 13 Sep 2022 17:17:31 GMT

BART, April 2022

Today I Learned

Tue, 13 Sep 2022 14:52:58 GMT

Didn’t strictly learn this today, but needed to note it down so I remember. scroll-padding applies to scroll containers; scroll-margin applies to scroll items.

Calling load() before play() on a media element is recommended when switching the src. Hopefully this fixes the occasional AbortErrors I’ve been seeing on iOS.

Today I Learned

Mon, 12 Sep 2022 18:59:59 GMT

:placeholder-shown CSS pseudo selector: could be really useful for conditionally displaying adjacent/sibling depending on whether the input has a value.

Customise how Ruby destructures an object by defining a deconstruct_keys method.

Destructuring: JavaScript vs. Ruby

Mon, 12 Sep 2022 18:09:29 GMT

Combining Ruby 2.7’s pattern matching, and Ruby 3’s rightward assignment, we can achieve something similar to JavaScript’s destructuring assignment. Jared White covers this well in Everything You Need to Know About Destructuring in Ruby 3. For those familiar the JavaScript syntax, here are some comparisons for destructuring objects/hashes:

// JavaScript
const { a } = { a: 1 } // a === 1

# Ruby
{a: 1} => {a:} # a == 1

(Rightward assignment might take some getting used to: variables on the right get assigned values from the left.)

Variable Naming

// JavaScript
const { a: b } = { a: 1 } // b === 1

# Ruby
{a: 1} => {a: b} # b == 1

…rest

// JavaScript
const { a, ...rest } = { a: 1, b: 2 } // a === 1, rest === { b: 2 }

# Ruby
{a: 1, b: 2} => {a:, **rest} # a == 1, rest == {b: 2}

Default Values

There’s currently no Ruby syntax equivalent to that of JavaScript for setting default values whilst destructuring. merge is probably the best choice here. Let’s say we wanted defaults of a = 42 and b = 2:

// JavaScript
const { a = 42, b = 2 } = { a: 1 } // a === 1, b === 2

# Ruby
{a: 42, b: 2}.merge({a: 1}) => {a:, b:} # a == 1, b == 2

Nil Values

In JavaScript, attempting to destructure a key that does not exist on the source, results in a variable being undefined. In Ruby, pattern matching expects a pattern to match (obviously), so if a key does not exist on the source it will throw NoMatchingPatternError. However, we can mimic JavaScript’s relaxed behaviour by defining a deconstruct_keys method on our source, and merge any undefined keys.

// JavaScript
const { a, b } = { a: 1 } // a === 1, b === undefined

class Props < Hash
  def deconstruct_keys(keys)
    Array(keys).to_h { |k| [k, nil] }.merge(self)
  end
end

Props[{a: 1}] => {a:, b:} # a == 1, b == nil

Thanks to Elliot Crosby-McCullough on the StimulusReflex Discord for this idea and code snippet.

How To with John Wilson

Mon, 12 Sep 2022 09:24:59 GMT

This looks like just my kind of thing.

Today I Learned

Sun, 11 Sep 2022 19:02:51 GMT

Ruby’s |= operator: appends values to the array that don’t already exist.

a = [1]
a |= [2] # a == [1, 2]
a |= [2] # a == [1, 2]

via Facundo Espinosa on Twitter

irb accepts an -r option to automatically require gems:

irb -r down

tempfile = Down.download("http://example.com") # look! no require!

via Collin Jilbert on Twitter

Ruby on Rails’ missing fetches records that do not have an associated record. For example A Post that does not have any associated Comments:

Post.where.missing(:comments)

Today I Learned

Fri, 09 Sep 2022 20:28:31 GMT

Ruby’s Enumerable#tally:

["a", "b", "c", "b"].tally  #=> {"a"=>1, "b"=>2, "c"=>1}

rails runner runs Ruby code (including Ruby files) in a Rails context from the command line:

bin/rails runner lib/code_to_be_run.rb

TailwindInk

Fri, 09 Sep 2022 11:34:13 GMT

TailwindInk is the nicest tool I’ve seen for generating colour palettes for the web. The swatches are evenly balanced, various contrast ratios are displayed, and the code is easily imported into Tailwind.

Rails Redesign

Fri, 09 Sep 2022 11:34:05 GMT

I can’t help but feel a little disappointed by the new Ruby on Rails site launched last year. It’s undoubtedly more up-to-date, but gone is the emphasis on fun and friendliness, and in its place, a focus on business and making money.

Aside from the removal of the happy handdrawn cartoons, the contrast in copy is revealing. Where previously it opened with:

Imagine what you could build …
Learning to build a modern web application is daunting. Ruby on Rails makes it much easier and more fun. It includes everything you need to build fantastic applications, and you can learn it with the support of our large, friendly community

(Emphasis my own.) It now reads:

Compress the complexity of modern web apps.
Learn just what you need to get started, then keep leveling up as you go. Ruby on Rails scales from HELLO WORLD to IPO …

Over the past two decades, Rails has taken countless companies to millions of users and billions in market valuations.

Happiness does get a mention, but sadly it’s the last thing mentioned, and feels lost amongst the business spiel.

For Rails apps themselves, the start up graphic has also been removed and I will certainly miss this happy scene 🥲

Severance

Sun, 04 Sep 2022 15:17:49 GMT

Severance might be the best thing I’ve seen on TV: dark, original, funny, and gripping with some satisfying twists. Great cast, intriguing characters, and an eery soundtrack too. I absolutely loved it.

Haitus Kaiyote

Fri, 02 Sep 2022 00:00:00 GMT

Haitus Kaiyote played a great set supporting Flying Lotus at the Hollywood Bowl the other day. They opened with Red Room, and I was hooked.

Bleep!

Thu, 25 Aug 2022 12:32:28 GMT

Interesting to hear the origin of bleeping or editing-out offensive words on the radio, and how it’s done technically; Bleep! from 99% Invisible also discusses the ethics of censorship and the subtle differences between bleeping-out, editing-out, or leaving in.

Add to Safari Reading List from Firefox

Sun, 21 Aug 2022 00:00:00 GMT

Useful if you typically use Firefox but wish to save articles to read in Safari’s Reading List (on an iPad).

Open the macOS Automator app
File menu, New, and choose Quick Action (the cog)
Update the following the dropdown menus:
- Workflow receives no input
- in Firefox
Click and drag the Run AppleScript action into the workflow area

Replace the script with the following:

-- send cmd+l and cmd+c keystrokes to FF to highlight and copy the URL
tell application "System Events"
keystroke "l" using {command down}
delay 0.2
keystroke "c" using {command down}
delay 0.2
key code 53 --escape
end tell

tell application "Safari" to add reading list item (the clipboard)

Save as Add to Reading List
Open Firefox and find an article
Firefox menu, Services, Add to Reading List

Adapted from: Add Firefox URL to Reading List

Seven

Thu, 02 Jun 2022 00:00:00 GMT

I watched David Fincher’s Seven for the first time the other day. It’s got that 90s grungy look to it, but it holds up really well.

This scene caught my attention in particular. The two detectives, Mills (Brad Pitt) and Somerset (Morgan Freeman), discuss how they’re going to track down a serial killer. Somerset had convinced his contact at the F.B.I to do some discreet background research, and explains this to Mills.

SOMERSET: For a long time, the F.B.I.’s been hooked into the library system, keeping accurate records.

MILLS: What? Assessing fines?

SOMERSET: They monitor reading habits. Not every book, but certain ones are flagged. Books about… let’s say, how to build a nuclear bomb, or maybe Mein Kampf. Whoever takes out a flagged book has their library records fed to the F.B.I. from then on.

MILLS: You got to be kidding.

SOMERSET: Flagged books cover every topic the Bureau deems questionable… communism to violent crime.

MILLS: How is this legal?

SOMERSET: Legal… illegal. These terms don’t apply. I don’t applaud it.

The Daily Script

Mills’ disbelief—on ethical grounds—that the F.B.I. tracks the odd library book, really highlights how attitudes to privacy have changed in the past 25 years.

Glider

Fri, 18 Mar 2022 00:00:00 GMT

Not sure what triggered this, but I had a mad urge to play this game the other day. Alongside Prince of Persia, Glider 4.0 was one of my favourite games growing up.

You play as a paper aeroplane kept afloat by air vents, with the aim of navigating from one room to the next, avoiding other objects. Along the way to the top of the house, you’ll have to dodge balloons, bouncing balls, jumping goldfish, and other paper aeroplanes, whilst being accompanied by a funky bass riff as you enter each room.

This playthrough makes it look much easier than I remember. Thankfully someone has made a port of Glider 4.0 for the web, and 30 years on it’s … just as hard as I remember!

Geisel Library

Thu, 15 Oct 2020 00:00:00 GMT

Geisel Library. La Jolla, San Diego 2020

Took a trip to San Diego at the weekend, and managed to fit in a visit to the Geisel Library on the University of California campus. It’s a breathtaking building. I wonder how on earth William Pereira came up with such an incredible concept.

So. Brutal.

More symmetry

Mustang

Tue, 04 Aug 2020 00:00:00 GMT

Los Feliz, Los Angeles 2020

The shot counter on my Lomo LC-A had malfunctioned, and whilst I could feel the winder getting tight, I wasn’t sure how many frames I had left. This was the lucky last shot!

Found Poetry: Deeper than that

Wed, 22 May 2019 00:00:00 GMT

Photo Me

Tue, 12 Mar 2019 00:00:00 GMT

Euston Station, London 2018

Tunng—Sleepwalking

Tue, 04 Sep 2018 07:44:36 GMT

This is a song about how we create the world and the world creates us in turn.

Our brains construct an experience of the world around us, filtered through our own personal expectations and subconscious desires and beliefs. To a certain extent, who we think we are is an illusion and everyone who knows us, including ourselves, is experiencing someone quite different. Perhaps our subconscious world of dreams and sleepwalking is closer to the real us than our waking imaginations!

This song is about trying to navigate our experience of the world, trying to figure out what's real and what's not, and making the best of what comes our way.
Tunng

The Importance of Beauty

Sun, 19 Aug 2018 09:27:52 GMT

Beauty is essential. It is never a trade-off. Make the most of beauty and never sacrifice it at the altar of expediency. It is too high a price.

Add nothing ugly. Do not accept any existing ugliness as fixed. Remove and change it if possible, otherwise modify or screen it.
Monty Don in Down to Earth, p.32

Algarve 2017

Fri, 24 Nov 2017 11:12:02 GMT

Faro Train Station

Tavira Sunset

Tavira Tiles

Helen taking pictures of Tavira tiles

Cabanas de Tavira

Praia Verde Modernist Village

Apartment in Praia Verde

View from our room at the Praia Verde Boutique Hotel

Starting Small

Thu, 02 Feb 2017 09:46:04 GMT

Another quotation from E.F. Schumacher, this time taken from a BBC Radio 4 programme Is Small the Next Big? His book, Small is Beautiful (Economics as if People Mattered), is jam-packed full of interesting ideas, and highly recommended.

It’s quite astonishing how many people are asking, “what can I do to save the world?—I am so small!” … Everything new starts very, very small, normally in a very dark place.
E.F. Schumacher from Is Small the Next Big?

Wisdom in Smallness

Tue, 24 Jan 2017 07:56:18 GMT

Small-scale operations, no matter how numerous, are always less likely to be harmful to the natural environment than large-scale ones, simply because their force is small in relation to the recuperative forces of nature. There is wisdom in smallness if only on the account of the smallness and patchiness of human knowledge, which relies on experiment far more than understanding. The greatest danger invariably arises from the ruthless application, on a vast scale, of partial knowledge such as we are currently witnessing in the application of nuclear energy, of the new chemistry in agriculture, of transportation technology, and countless other things.
E.F. Schumacher in Small is Beautiful 1974, p.29

Photographs of Seats

Wed, 23 Nov 2016 09:21:04 GMT

Guildford Train Station, 2005

Connex/South Eastern, 2006

Willesden Green, 2007

Switzerland, 2007

Oban to Mull Ferry, 2007

Isle of Gigha Ferry, 2009

Fortress Studios London, 2010

New York Subway, 2010

North Finchley, 2016

Devon, 2018

London, 2019

Trainspotting

Wed, 21 Sep 2016 07:53:14 GMT

Quite a few of the places I've lived in over the last decade have been right next to a train track.

In my second year at university, my bedroom was pretty much in contact with a railway bridge. I can remember trying to churn out words on an essay as the first train went past, reminding me that I’d worked through to 6am 😫

Guildford, May 2006

Above: it's not the clearest photo (as it has been exposed twice) but you can make out the corner of the house in the top right, and the wall of the bridge running along the length.

My flat in Willesden Green had the Jubilee Line running above ground at the end of the garden:

Willesden Green, Jubilee Line, August 2006.

The scene above, taken 10 years ago, is remarkably similar to the situation in my current flat:

East Finchley, Northern Line, August 2016.

Anyway a few weeks back, just as I was heading to bed, a train pulled up at the end of the garden and stopped. I could just make out the voice of the driver over the tannoy. Perhaps I was the only one listening—the train seemed pretty empty.

Conway’s Game of Life with Redux + Canvas

Wed, 09 Mar 2016 09:43:13 GMT

In the past few weeks I’ve been doing a fair bit of work with Redux, a library which helps manage data and state in JavaScript applications. There’s an emphasis on functional programming and immutable data, which takes a little getting used to, but it does feel like a suitable approach—particularly for implementing Conway’s Game of Life…

each generation is a pure function of the preceding one
Conway’s Game of Life on Wikipedia

This fits nicely with Redux’s concept of “reducers”, which take in the current state and an “action”, and return a new state.

The app state is just the grid: an array of arrays containing cell values (1s and 0s). There is just a single action, a 'TICK', and when a 'TICK' is dispatched, the grid reducer generates a new grid based on the current grid:

function grid (state, action) {
  if (typeof state === 'undefined') return randomGrid()

  switch (action.type) {
    case 'TICK':
      return nextGrid(state)
    default:
      return state
  }
}

function nextGrid (grid) {
  return grid.reduce(function (nextGrid, currentRow, y) {
    var newRow = currentRow.map(function (value, x) {
      return nextValue(x, y, value, grid)
    })

    nextGrid.push(newRow)

    return nextGrid
  }, [])
}

The grid values for the next tick are computed based on the neighbouring values (as per the rules):

function nextValue (x, y, value, grid) {
  var neighbours = neighboursOf(x, y, grid)

  var livingNeighbours = neighbours.filter(function (value) {
    return !!value
  }).length

  return +willLive(value, livingNeighbours)
}

function willLive (value, livingNeighbours) {
  return value
    ? livingNeighbours === 2 || livingNeighbours === 3
    : livingNeighbours === 3
}

function neighboursOf (x, y, grid) {
  return [
    [-1, -1], [0, -1], [1, -1],
    [-1,  0], /*x,y*/  [1,  0],
    [-1,  1], [0,  1], [1,  1]
  ].map(function (coords) {
    return valueAt(x + coords[0], y + coords[1], grid)
  })
}

function valueAt (x, y, grid) { return grid[y] &amp;&amp; grid[y][x] }

The render function redraws the state on a <canvas> whenever it changes, and a 'TICK' is dispatched every 100ms to generate the next state:

var store = Redux.createStore(grid)
store.subscribe(render)

render()

setInterval(function () {
  store.dispatch({ type: 'TICK' })
}, 100)

I’m sure this could be improved, but it feels like a pretty nice solution.

See it in action: Conway’s Game of Life with Redux and Canvas, and view the full source.

Hat tip to Alan R. Soares. I had a peak at his implementation with React and refined my willLive function a based on it.

February 2016 Playlist

Mon, 07 Mar 2016 09:32:28 GMT

Advice to Young Girls by Inga Copeland (w/Actress)

Discovered this via CTM’s Recommended Listening feature.

Perth by Beirut

I got a DAB radio for my birthday, so I’ve been listening to the radio a lot more. This catchy tune caught my ear. Their latest album is pretty good too.

Amerika by Liima

New from the Efterklang + Finnish percussionist Tatu Rönkkö.

Zap by Vinny Villbass

Heard this at the Ja Ja Ja London Club Night. The 90s house-y synth section in the middle is madness!

Because by Smerz

Smerz headlined at the Ja Ja Ja club night and were really great live. Can’t wait to hear more stuff from them.

Converse

Tue, 12 Jan 2016 08:09:54 GMT

East Finchley, London. January 2016.

Bløsh—Give It Away

Fri, 08 Jan 2016 10:13:00 GMT

Letterpress

Sun, 22 Nov 2015 15:34:46 GMT

I had an amazing time at Harrington & Squires, learning about the art of letterpress printing. Chrissie and Vicky were such great hosts, and if you get a chance, I’d highly recommend their workshops, or visiting their shop in Tufnell Park.

A finished print—Tufte’s “show the data” quotation.

Unfortunately the photo doesn’t do justice to the fluorescence of that orange!

Adana 8 x 5 printing presses. Want.

“Furniture” and numerous cases of type.

Efterklang’s Mirador vs. ustwo’s Monument Valley

Fri, 30 Oct 2015 12:05:12 GMT

Some remarkable similarities between these two M.C. Escher-alikes.

Efterklang—Mirador (2008)

Monument Valley (2014)

Technology for Saving Time

Tue, 27 Oct 2015 09:30:25 GMT

My new thing is to listen to Danish radio in the morning in the hope that it will improve my Danish language listening skills. At the moment I can only pick up the odd word in each sentence, but there was an interview (in English) with Prem Rawat that caught my ear, which included this:

I think we are really out of touch with ourselves. We’re in touch with everything else: this account, and that account, and our phones. Things that were supposed to save us us time may or may not save time, but they definitely occupy that free time we were promised.
Prem Rawat on DRP1’s Sproglaboratoriet

This reminded me of something Mark Steel said when he was on The Infinite Monkey Cage show. He reckoned that the problems lie with the “social mechanisms” that employ the science, rather than the science itself:

In the early 1970s, there were two things that we were promised … One was that space travel would go on and on, and by now we’d certainly be on Mars. But the other thing was that new technology would mean that we would have this crisis of having so much leisure, because everything would done by machinery … what on earth do we do with all the time? As we know, the average working week now in Britain is longer than it was back then.
Mark Steel on BBC Radio 4’s The Infinite Monkey Cage Series 2 Ep. 4

The Essence of Programming

Fri, 02 Oct 2015 14:20:23 GMT

What I mean is that if you really want to understand something, the best way is to try and explain it to someone else. That forces you to sort it out in your own mind. And the more slow and dim-witted your pupil, the more you have to break things down into more and more simple ideas. And that’s really the essence of programming. By the time you’ve sorted out a complicated idea into little steps that even a stupid machine can deal with, you’ve certainly learned something about it yourself. The teacher usually learns more than the pupil. Isn’t that true?
from Dirk Gently’s Holistic Detective Agency by Douglas Adams

This and That, and That

Fri, 18 Sep 2015 15:02:23 GMT

Danish

The Danish language has collapsed into meaningless guttural sounds.
From a sketch on Norwegian TV show, Uti Vår Hage

I have been teaching myself the Danish language with the Duolingo app since January, and so far it has been pretty fun—albeit a little difficult at times. A couple of favourite words so far:

vandmand is the Danish word for jellyfish, which literally translates to water man
sædvanligvis means usually and is very satisfying to say/hear
medlemmerne, meaning the members—it’s a bit difficult to pronounce, but reminds me of Mahna Mahna.

I had a chance to practice some of Danish skills when I visited Copenhagen with Helen and family in April. We had a great time, ate some tasty food (apart from the burnt onion ash!), and I had a chance to catch up with my old friend Matt (aka Milhouse).

Had to be done. Nyhavn, Copenhagen. April 2015.

Sardinia

Whilst most the UK were struggling through the sweaty June/July heatwave, Helen and I were lazying by the beach in Sardinia. The location was spectacular, so here is a picture of a food van:

Blue van. Blue bins. Alghero, Sardinia. July 2015.

France

At the end of July, Helen and I visited France. Our first stop was Nogent-le-Rotrou, a seemingly sleepy town in the Perche region, where we attended the wedding of one of Helen’s old work friends. Once again, another stunning location, overlooking the endless French countryside, so here is a picture of a quiet junction:

An Espace indicates to go left. Nogent-le-Routrou, July 2015.

After that we spend a few nights in Paris. We were fortunate enough to catch the final stage of the Tour de France on the day we arrived, including a fleeting glimpse of Chris Froome.

Men complete a bike ride. (Froome in the Yellow.) Paris, July 2015.

Meeeeeetro traaaaain. Paris, July 2015.

Greenery, ornate balconies, and signage. Paris, July 2015.

More ornate balconies. Paris, July 2015.

Finally

I will miss this gentleman a lot.

Some of James’ excellent musical creations can be heard on his soundcloud page. Mark & Tyrone (about a haphazard Wagamana waiter) is a particular favourite of mine.

A campaign has been set up to complete James’ second album. To donate, visit the campaign page.

Turbine

Sun, 14 Jun 2015 15:57:51 GMT

Cleaning up after activists occupy Tate Modern’s Turbine Hall. June 2015.

Graphical Integrity in Data Visualisations

Sat, 21 Feb 2015 15:50:00 GMT

This infographic, highlighting quirks of the UK voting system, recently popped up in my Twitter feed. Whilst the accompanying article makes some valid points, the graphic is rather inaccurate.

Data Visualisation taken from May2015: Would you like 5 million votes and 4 seats, or 1 million votes and 56 seats?

Firstly, it uses circles (of two dimensions) to represent one-dimensional data. Edward Tufte discusses this in The Visual Display of Quantitative Information:

There are considerable ambiguities in how people perceive a two-dimensional surface and then convert that perception into a one-dimensional number. Changes in physical area on the surface of a graphic do not reliably produce appropriately proportional changes in perceived areas.

In this instance, the designer has varied the radius/diameter of the circles, which results in a surface area that exaggerates the data. For example, compare the circles for the Green Party and the SNP. If the Green Party circle represents 1 unit-squared, then you’d expect the SNP’s circle to be 56 units-squared. Instead, it is 3136 units-squared—56-times greater than it should be.

Secondly, it encourages comparisons between values on different scales: percentage of votes, and number of seats.

The graphic gives the impression that the Lib Dems gain considerably from the voting system: 8% votes → 26 seats. 26 seats actually represents just 4% of the total seats (650), so their votes are effectively halved! This distortion is also observed when comparing the Lib Dems’ “votes” circle to the SNP’s “seats” circle. The SNP’s 56 seats (8.61%) should be comparable to the Lib Dems votes (8%). It isn’t.

Annotated graphic highlighting distortions. The dark blue circle shows how big the SNP’s circle would be if areas were proportionate.

What’s more, there is a second graphic (not re-published here), making the same votes-to-seats comparisons but with the Labour, Conservative, and Ukip parties. However, this is on a different scale to the previous one, making any further comparisons impossible.

It would be more accurate to make comparisons based on percentages of seats, and include all the data in a single graphic. Perhaps a simple table would suffice?

The following table attempts to convey how much each party is set to gain/lose because of the voting system based on the forecast. A ratio greater than 1 indicates that a party gains from the system; ratio less than 1 indicates that a party loses from the system.

Party	% of Votes	% of Seats	Ratio % Seats / % Votes
Labour	33	42.31	1.28
Conservatives	31	40.92	1.32
Ukip	15	0.62	0.04
Lib Dems	8	4.00	0.50
Green	7	0.15	0.02
SNP	4	8.62	2.15

Ratios can be transformed into “Advantages” by taking logarithms: positive values indicate gain, negative values indicate loss.

Party	% of Votes	% of Seats	Advantage log₂(% Seats / % Votes)
Labour	33	42.31	0.36
Conservatives	31	40.92	0.40
Ukip	15	0.62	-4.61
Lib Dems	8	4.00	-1.00
Green	7	0.15	-5.51
SNP	4	8.62	1.11

From these tables we can deduce that:

Labour and the Conservatives are set to gain a little from the voting system
The SNP would gain as much proportionally as the Lib Dems lose: the voting system effectively doubles the SNP’s seats, and halves the Lib Dems’
Ukip and the Greens are set to lose out the most, significantly more than any other loses or gains

Got feedback? Email me: christiedom@gmail.com

Emergency Use Only

Thu, 11 Dec 2014 21:47:46 GMT

London, August 2014

David Heinemeier Hansson on Ambition

Sun, 07 Dec 2014 21:18:47 GMT

It might sound funny, but I’m not a very ambitious person. When it comes to software and products, I have a very low bar in terms of ambition level. I feel like there is so much stuff that is so poor, where the things you have to do to improve, just have to be just a little bit better.
David Heinemeier Hansson in Jellyvision Q&A with DHH & Jason Fried

Attention

Tue, 07 Oct 2014 11:37:40 GMT

The gift of attention is perhaps the most valuable. Attention may seem like an easy gift to give, but it is not; it is the scarcest resource available because its quantities are limited and nonrenewable. We can’t produce more attention, and there are ever more things vying for it each day.
Frank Chimero in The Shape of Design

The Not-So-Straight & The Not-So-Perfect

Mon, 22 Sep 2014 11:01:59 GMT

The not-so-straight and the not-so-perfect is the lovely thing of life. And there’s somebody out there trying to make the world straight and perfect…When the world will be straight and perfect in their eyes, will that be straight and perfect, or will it be worse?
from Analogue People in a Digital Age by Twopair Films

Aphex Twin on Smartphones

Fri, 19 Sep 2014 12:32:04 GMT

I don’t have any phones. They’re just not good for anything. They’re handy for loads of stuff, but I can’t think of anything that’s better because you’ve got them. I think there’s a risk of people becoming zombies with Facebook and social media. It’s really awful, that side of things.
Aphex Twin discusses ‘Syro’

Barcelona 2014

Fri, 19 Sep 2014 06:34:09 GMT

More photos in the Barcelona 2014 set.

Preferences in User Interface Design

Sat, 13 Sep 2014 14:45:15 GMT

Jef Raskin on “Modes, User-Preference Settings, and Temporary Modes”, in The Humane Interface:

Facilities for setting user preferences constitute an example of modes and are a major source of frustration. Ironically, these features are usually touted as a benefit. Present user interfaces are often so difficult to use that a user may feel an urge to rearrange them. Microsoft specifically recommends that such facilities be provided: “Users, because of their widely varying skills and preferences, must be able to personalize aspects of their interface … such as color, fonts, or other options.” [from Microsoft’s Windows Interface Guidelines, 1995]

… By providing preferences, we burden users with a task extraneous to their job function. … Time spent in learning and operating the personalization features is time mostly wasted from the task at hand.
… Customization sounds nice, democratic, open-ended, and full of freedom and joy for the user, but I am unaware of any studies that show that it increases productivity or improves objective measures of usability or learnability. Adding customization certainly makes a system more complex and more difficult to learn. I suspect that if you were to take a user survey, more people than not would be in favor of lots of personalizable features … [but as] has been observed in a number of experiments, an interface that optimizes productivity is not necessarily an interface that optimises subjective ratings.”

See also: Avoid Preferences from Getting Real.

(I’m looking at you, Slack)

Array Controllers in Ember.js

Fri, 29 Aug 2014 11:58:18 GMT

An array controller is a wrapper for a collection of objects, and provides convenient methods for dealing with its contents.

An array controller’s model is typically set in a route, for example:

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return [
      {name: 'red'},
      {name: 'yellow'},
      {name: 'blue'}
    ];
  }
});
// (The Index ArrayController is setup implicitly)

Setting an array controller’s model sets up its content property, which forms the basis for other properties and methods.

arrangedContent

arrangedContent is an important property, defined as “the array that the [array controller] pretends to be”. It provides a way for sorted/filtered content to be stored separately from the original content. In this way, sorting/filtering is not destructive, and the content (in its original form) can still be retrieved.

By default, when an array controller has no sortProperties, arrangedContent and content are the same. When sortProperties are added, the sorted content is stored in arrangedContent whilst the original content remains untouched.

It’s important to note that an array controller should be treated just like an array, with its items referencing those in arrangedContent. Accessing items on an array controller itself, is effectively the same as accessing items in arrangedContent (an important difference is discussed in below).

This is best illustrated with some examples. Given the route above, the following #each loops all result in the same output:

index template:

{{#each}} {{name}} {{/each}}

{{#each content}} {{name}} {{/each}}

{{#each arrangedContent}} {{name}} {{/each}}

http://emberjs.jsbin.com/nuzoja/1

Setting sortProperties results in sorted output from arrangedProperty and therefore from the array controller instance itself:

App.IndexController = Ember.ArrayController.extend({
  sortProperties: ['name']
});

index template:

{{!-- Sorted by name --}}
{{#each}}

{{!-- Not Sorted --}}
{{#each content}}

{{!-- Sorted by name --}}
{{#each arrangedContent}}

http://emberjs.jsbin.com/nuzoja/2/edit

Item Controllers

Adding an itemController property to an array controller wraps each item in an instance of the referenced controller. However, this only applies when accessing items through the array controller instance itself. Items accessed via arrangedContent or content remain unwrapped. This is the key difference when accessing items via arrangedContent versus accessing them via the array controller instance itself.

The following example demonstrates this concept:

App.IndexController = Ember.ArrayController.extend({
  itemController: 'color'
});

App.ColorController = Ember.ObjectController.extend({
  isActive: true
});

index template:

{{!-- Names rendered --}}
{{#each}}
  {{#if isActive}} {{name}} {{/if}}
{{/each}}

{{!-- Nothing rendered --}}
{{#each content}}
  {{#if isActive}} {{name}} {{/if}}
{{/each}}

{{!-- Nothing rendered --}}
{{#each arrangedContent}}
  {{#if isActive}} {{name}} {{/if}}
{{/each}}

http://emberjs.jsbin.com/nuzoja/3/edit

Nothing is rendered in the loops that iterate over content or arrangedContent because the items are not wrapped in an item controller and therefore isActive is inaccessible.

`{{#each itemController='…'}}`

{{#each}} helpers, when supplied with an itemController property, wrap each item in a new instance of the referenced controller. This operates entirely independently from the itemController property on an array controller: an array controller will not have access to any item controller created via an {{#each}} helper.

This becomes particularly important when implementing a computed property on an array controller that depends on properties on an item controller. See the example.

For more information:

Ember.ArrayController Documentation
The #each helper post on ember.guru
Array Computed Properties talk by David Hamilton

Portable

Fri, 15 Aug 2014 13:28:17 GMT

London, 2014

Don Norman’s Law

Fri, 18 Jul 2014 04:54:50 GMT

If you think something is clever and sophisticated beware—it is probably self-indulgence.
Don Norman in The Psychology of Everyday Things

The Putter

Sat, 05 Jul 2014 07:38:21 GMT

A short film about assembling scissors at Ernest Wright and Son (via Vicki Turner).

David Shrigley Tableware

Tue, 01 Jul 2014 05:36:40 GMT

Absolutely love these pieces by David Shrigley for Soho’s Sketch restaurant. Seen in an interview with Shrigley in City A.M’s Bespoke magazine.

Bali 2014

Mon, 30 Jun 2014 07:30:24 GMT

A few thoughts and photos from my trip to Bali with Helen last month.

Sanur and Ubud

Our first stay was right on the beach, in the resort of Sanur. It’s a quiet place, particularly compared to Denpasar (the capital) and Ubud, our second destination…

The view from our hotel beach in Sanur, looking south. (Excuse the photo quality, it was taken on a disposable.)

The view at breakfast: a fisherman wading out at sea.

Ubud is further inland, about 40 minutes north of Sanur. It’s known for its arts scene and there were plenty of market stalls selling handcrafted goods. We of course took our chance to do a bit of bartering! (We bought a couple of kites and a small wooden owl!)

A market seller un Ubud prepares flower petals to sell for for Hindu offerings.

We stayed at Uma, a luxury hotel located a short distance from the centre. The whole experience was pretty amazing: the room, the food, and the pool were all top notch!

On our last morning we went on a short guided walk through the local rice fields in Ubud.

Temples

Hinduism is a huge part of Balinese life, so there are temples (Pura) and offerings everywhere. Many temples are in spectacular locations: on the edge of a cliff, on a lake, or on a rock heading out to sea.

Pura Luhur Uluwatu.

The Kecak dance at Pura Luhur Uluwatu.

Pura Ulun Danu Bratan.

Rice Fields

Rice fields make up a big part of the landscape in Bali. We hired a driver who took us on a trip round some windy mountain roads to check out the Jatiluwih rice terraces, the largest in Bali. The terraces were vast, and the views spectacular (unfortunately difficult to capture on camera!).

Activities

We went on a few guided tours to various places on the island. One of my favourites was a bike ride down a mountain. It was a great chance to explore some of the mountain villages that we’d previously driven through.

Overlooking a mountain village at the start of our bike ride. Those decorated arching bamboo poles (Penjor) were up to celebrate Galungan, an annual festival celebrating the victory of good over evil.

The gentleman that let us have a tour of his house.

A girl at a coffee plantation.

We also went white water rafting, and snorkelling, which included a boat ride on one of these:

Jukung boats at Padang Bai, where we explored the coral reef and swam with the fishes.

Food

The food in Bali was pretty good. Lots of rice and some really good barbecued fish and meat. Unfortunately, no matter how careful we were with what we ate, we still managed to get a bout of Bali Belly, which was rather uncomfortable for the last few days of the holiday (and plane ride!). Luckily it didn’t really stop us from doing much.

Barbecued ribs at Naughty Nuri’s.

The bar at Naughty Nuri’s.

Monkeys

We saw quite a few of these mischievous monkeys, particularly around Uluwatu. They will grab almost anything (mostly sunglasses), even flip flops off your feet! Fortunately we had been forewarned, and left all our loose items in the car.

Put Things In Their Places: Benjamin Franklin’s Schedule

Sun, 08 Jun 2014 20:00:50 GMT

via Nick Bilton & The Busy Person's Guide to the Done List by iDoneThis

Hong Kong 2014

Thu, 05 Jun 2014 17:34:16 GMT

Here are a few thoughts and photos from my trip to Hong Kong with Helen last month.

Skyline

Hong Kong’s skyline is incredible, but I didn’t fully appreciate it until I saw a clear and uninterrupted view at night from Tsim Sha Tsui (TST), Kowloon (below). Up until then, I’d been most amazed by the unmissable apartment blocks. Each block is slightly different, decorated by windows, air conditioning units, and washing lines.

Hong Kong Island from TST.

Apartment blocks and escalator.

Trams and Markets

We took a tram ride from Central Hong Kong to Shau Kei Wan on the east-side of the island. It was a great way to get a feel for the city, and cheap too (2.30HKD ~ 18p!). The windows can be pushed all the way down, so (if it’s not raining) it’s a handy way to take a few pictures.

At Shau Kei Wan, we were met by a fish and grocery market, where it was common to see live fish flapping about in polystyrene containers, unusual fruits, and various other bits for sale in bowls and boxes, or just laying on a trolley on the street.

Food

To experience some authentic Cantonese food, we ventured to Mak’s Noodle, a small diner not far from where we were staying. The food was very tasty, and when a waiter noticed I was having some difficulty with the noodles, he chopped them up with a pair of scissors (thankfully I wasn’t the only one needing some help!).

That chunk of beef on top was so tender!

Mid-level Escalators

The street escalators are one of the coolest parts of the city. Given the hills and humidity, being able to jump on an escalator in the middle of a street was a lifesaver!

The Peak

For all its skyscrapers and apartment blocks, Hong Kong still has lots of greenery, and there is plenty of it to enjoy on the (steep) walk up Victoria Peak.

Kecak

Sat, 31 May 2014 11:54:42 GMT

I’ve just come back from spending the last couple of weeks in Hong Kong and Bali. One of my favourite experiences was attending a Kecak dance (pronounced keh-chak) at Pura Luhur Uluwatu, Bali. It was performed by around 50-100 people and the music was incredible.

Silverdale

Wed, 14 May 2014 20:06:48 GMT

Iterative Design

Tue, 06 May 2014 11:33:34 GMT

The design process is actually a big spiral you go through. You start exploring ideas only to come back to explore the original idea. To outsiders, it might seem like you’re going through circles, chasing your tail. But each time you go through these circles you get closer and closer to where all these things align. It’s a spiral—a fractal spiral that never ends, and the closer you get to the point where everything aligns, the more you discover, the more you realize you have to zoom in again and keep on building it. This is true for anything that can be designed. Anything can be iterated endlessly to make it better and better.
Marcos Weskamp, Head Designer at Flipboard, in an interview with Fast Company

Wayfarer

Tue, 18 Feb 2014 12:59:38 GMT

Soundscape: Defrost

Fri, 31 Jan 2014 12:53:41 GMT

Simplification

Sun, 26 Jan 2014 13:26:33 GMT

The process of simplification is design 101, a mind-set that every design student is taught in school. But not every design student adopts it, and rarely it’s applied with the ruthless discipline practiced by Jony [Ive]. Indeed, if there’s such a thing as a single secret to what Jony Ive does, it is to follow slavishly the simplification philosophy. That approach has accounted for many of the major breakthroughs, as well as some projects that failed and others that Apple hasn’t released. Caring enough to commit the enormous time and effort to get something right has also been Jony’s hallmark, from his earliest college projects onward.
Leander Kahney in Jony Ive, The Genius Behind Apple’s Greatest Products

Knives and Forks

Fri, 24 Jan 2014 09:38:31 GMT

Kitchen sink, Guildford. 2006 (University 2nd year).

I remember my friend (and housemate at the time), Julian, had his own method for dealing with this situation. He’d put on some really glitchy fast electronica (Squarepusher perhaps?), and blitz it as fast as he could. Seemed to do the job, and it’s a method I often employ to get stuff done. My track of choice? Milanese - Mr. Bad News (Clark Remix) (NSFW).

The Things You Already Own

Wed, 08 Jan 2014 23:50:03 GMT

If I had a billion dollars to fund a marketing campaign, I would launch a campaign on behalf of things you already own: Why not enjoy them today? Because we all have so many things that are just around—they’re in the closet, they’re in the attic, whatever—that we don’t even think about anymore because there isn’t enough room left in our brains because we are so busy processing all the exciting new developments.
At the end of the day, when you’re looking around at the objects in your house and you’re deciding what really has value… they’re going to be the things that have some meaning in your life.
Rob Walker, New York Times columnist, in Objectified

Flicker

Thu, 19 Dec 2013 08:56:34 GMT

RY X—Shortline

Wed, 04 Dec 2013 11:00:29 GMT

Really enjoying this from RY X. I first heard the title track from his EP, Berlin, on a recent Sony TV advert. As it turns out, RY X is signed to Dumont Dumont, a label started by Magnus Bohman, who co-founded Imperial Recordings. Imperial’s first signing was José González, who also had a track used on a Sony TV advert back in 2006. Coincidence?

(Contains nudity, flashing lights, and a great synth line—which unfortunately isn’t on the record.)

Mathematicians vs. Engineers

Mon, 11 Nov 2013 13:49:56 GMT

For the mathematician, an argument is either perfect or else it is wrong … He calls this ‘rigorous thinking.’ The typical engineer calls it ‘hair-splitting.’
Thornton C. Fry, Director of The Mathematics Consulting Dept., Bell Labs, 1941

Taken from The Information by James Gleick, p.196.

Hotel Books

Mon, 11 Nov 2013 12:30:06 GMT

The Culture of Distraction

Fri, 18 Oct 2013 08:03:33 GMT

A couple of interesting talks about the fear of boredom and the anxiety of being mentally unstimulated.

All the Features

Thu, 17 Oct 2013 07:49:33 GMT

From Jef Raskin’s The Humane Interface:

You can have any combination of features the Air Ministry desires, so long as you do not also require that the resulting airplane fly.
Willy Messerschmidt (preeminent World War II German aircraft designer)

Technology that Matters

Mon, 14 Oct 2013 20:22:37 GMT

I’m sure this won’t be the last time I mention Frank Chimero’s recent article, The Inferno of Independence; there are so many good parts, but here is just a snippet. It’s something I wanted to get across in my Why Hack? interview, but it’s articulated a lot better below:

The technology that matters only tries to change things by giving us more of what we’ve always wanted: autonomy, access, and community.
Frank Chimero in The Inferno of Independence

“Autonomy, access, and community.” Nailed it.

Simple Things

Mon, 07 Oct 2013 12:11:56 GMT

If you can understand the ordinary, the simple things in life, the mind can be opened to foster harmony in humanity, promote harmony with nature, discipline the mind, and quiet the heart. This in turn affects our output as human beings.
Mark Robinson

Spinach Thoroughbred

Thu, 03 Oct 2013 06:41:24 GMT

Rick Rubin on Minimalism

Sat, 28 Sep 2013 10:50:19 GMT

There’s a tremendous power in using the least amount of information to get a point across.
“Record Reducer”, Rick Rubin, interviewed in Newsweek

What am I listening to?

Fri, 20 Sep 2013 09:52:59 GMT

When I first set up domchristie.co.uk (~2005), I used to update it with what I was reading, watching, taking photos of, and listening to. Given that most the music I listen to is tracked by Last.fm, I thought I’d set up a page that displays this in a nice way.

Scrobbles displays the 200 most recently listened to tracks, grouped by album. Click on an album cover to hear the most played track from that album (this can be a bit unpredictable!).

Scrobbles was built with the Last.fm API and Tomahawk.

One Six Seven

Tue, 17 Sep 2013 21:51:59 GMT

Caledonian Road, Islington, 2013

Dieter Rams on good design

Tue, 17 Sep 2013 06:25:15 GMT

In my experience, users react very positively when things are clear and understandable… That’s what particularly bothers me today, the arbitrariness and thoughtlessness with which many things are produced and brought to market. Not only in the sector of consumer goods, but also in architecture, in advertising. We have too many unnecessary things everywhere.

Good design should be innovative. Good design should make a product useful. Good design is aesthetic design. Good design will make a product understandable. Good design is honest. Good design is unobtrusive. Good design is long-lived. Good design is consistent in every detail. Good design is environmentally friendly. Last but not least, good design is as little design as possible
Dieter Rams in Objectified

Backbone.js Patterns Pt.3: Excluding non-persisted attributes

Thu, 12 Sep 2013 07:50:07 GMT

As I mentioned in the previous post, the toJSON method is used to customise the data sent to the server.

Often you’ll have attributes on your model that you don’t want to be persisted e.g. isSelected. You could customise the toJSON method on a model-by-model basis, but given that excluding attributes is quite common, we can just include a list of attributes we’d like removed, and modify Backbone.Model.prototype.toJSON, to handle it.

First, we’ll add an excludeFromJSON property to the class definition. This should be an array of attribute keys you'd like to exclude:

var Post = Backbone.Model.extend({
  excludeFromJSON: [ 'isSelected' ]
});

We can then build on our previous toJSON method to exclude those attributes:

(function() {
  var oldToJSON = Backbone.Model.prototype.toJSON;
  Backbone.Model.prototype.toJSON = function() {
    var json = oldToJSON.apply(this, arguments),
        excludeFromJSON = this.excludeFromJSON;
    if(excludeFromJSON) {
      _.each(excludeFromJSON, function(key) {
        delete json[key];
      });
    }
    return humps.decamelizeKeys(json);
  };
})();

This new Backbone.Model.prototype.toJSON calls the old method to retrieve a copy of the model's attributes, then deletes any properties whose keys are in the excludeFromJSON array. The modified attributes are finally “decamelized”. If you don’t wish to include my humps library, then just return json;.

Feedback/questions welcome via Twitter, or email.

Watch

Wed, 11 Sep 2013 21:19:17 GMT

Holborn, 2013

Backbone.js Patterns Pt.2: Don’t make me think

Thu, 29 Aug 2013 08:29:51 GMT

Different programming languages have different naming conventions. When working with Ruby, for example, it is advised that you separate multi-word variables with underscores. In JavaScript, camelCasing is generally the norm. So when dealing with data that is shared across different environments, you may find yourself having to remember what style to use, e.g. “Was it user.get('first_name'), or user.get('firstName')?”.

This is where humps is your friend.

humps is a small JavaScript library (~100 LoC) that simply converts underscored object keys (and strings) to camelCased, and vice versa (as well as other styles, like PascalCase). By using humps in the toJSON and parse methods, we can seamlessly work with the conventions of each language.

toJSON and parse are methods that are typically used to customise the data being sent to and from the server. toJSON should be used to prepare a model’s attributes for synchronisation ^[1]; whereas parse is typically called when data is sent from the server, and therefore can be used to prepare a model’s attributes before they are set on the model itself.

Starting with the parse method, overwrite Backbone.Model.prototype.parse, passing the results of the old `parse` method into humps.camelizeKeys:

(function() {
  var oldParse = Backbone.Model.prototype.parse;
  Backbone.Model.prototype.parse = function() {
    var parsed = oldParse.apply(this, arguments);
    return humps.camelizeKeys(parsed);
  };
})();

So now, the following JSON:

{ "first_name": "Jon", "last_name": "Snow", "is_steward": true }

will be converted to camelCase and will be accessible on the model as follows:

// assuming user is an instance of a Backbone model
user.get('firstName'); // "Jon"
user.get('lastName'); // "Snow"
user.get('isSteward'); // true

Remember, that parse is only called when a model’s is updated via a fetch or save. If you are populating a model’s attributes manually, you’ll need to pass in { parse: true }:

var user = new User({
  "first_name": "Jon"
}, { parse: true });

It’ll also work with nested objects.

The same pattern can be applied to toJSON, which will convert camelCased object keys (back) to underscored:

(function() {
  var oldToJSON = Backbone.Model.prototype.toJSON;
  Backbone.Model.prototype.toJSON = function() {
    var json = oldToJSON.apply(this, arguments);
    return humps.decamelizeKeys(json);
  };
})();

Feedback welcome via Twitter, or email.

Part 3 in this miniseries will extend the toJSON method to exclude non-persisted attributes from its output.

[1] The Backbone.js documentation for toJSON previously suggested that it could be used to clone a model’s attributes for use in a template, as well as for persistence. Following a discussion on the purpose of toJSON, it was decided that this “double duty” should be simplified. It is now not recommended for preparing a model for rendering.

Backbone.js Patterns Pt.1: Maintaining the Uniform Access Principle

Wed, 21 Aug 2013 09:11:25 GMT

The entire [Backbone.js] source is annotated with the explicit idea that you should be feeling free, if something is not working, to dig in and figure out how it works and also to dig in and overwrite things if you find the need. Jeremy Ashkenas on JavaScript Jabber 004

I thought I'd share a few patches that I've found useful when developing web apps with Backbone.js. The techniques overwrite prototype methods, but in a responsible way that keeps default behaviours unchanged.

This part takes pointers from this Stack Overflow question and the Uniform Access Principle:

All services offered by a module should be available through a uniform notation, which does not betray whether they are implemented through storage or through computation
Bertrand Meyer

Lets say you have a user model as follows:

App = {};
App.User = Backbone.Model.extend({
  defaults: {
    firstName: 'Jon',
    lastName: 'Snow'
  },

  fullName: function() {
    return this.get('firstName') + ' ' + this.get('lastName');
  }
});
var user = new App.User();

fullName could be accessed by calling user.fullName(), but that would be inconsistent with accessing other attributes. What’s more, if, for example, we decided to compute fullName on the server, we'd have to replace all occurrences of user.fullName() with user.get('fullName').

It would be better to access fullName (and any attribute-like method) via user.get('fullName'). This can be achieved by overwriting Backbone.Model.prototype.get:

(function() {
  var oldGet = Backbone.Model.prototype.get;
  Backbone.Model.prototype.get = function(attr) {
    if(typeof this[attr] === 'function') {
      return this[attr]();
    }
    return oldGet.apply(this, arguments);
  };
})();

This stores the original get method in oldGet, calls the requested method if it exists on the model, or calls the original get method if it doesn't.

Backbone.Model.prototype.escape retrieves attributes by making a call to Backbone.Model.prototype.get, and so should also work with this technique.

Feedback welcome via Twitter, or email.

Part 2 will look at techniques for customising toJSON and parse for synchronising data with the server.

Improving TfL’s Live Bus Timetables: Uncle Gus

Fri, 09 Aug 2013 12:24:31 GMT

tl;dr: I've created a simple London bus timetable web app: Uncle Gus (requires a reasonably modern browser e.g. Safari, Chrome, Firefox).

If you have ever used any of TfL’s live bus displays, you'll have probably seen one in a state that offers very little, if any, relevant information about the bus you hope to catch.

The current displays page-through imminent arrivals about every 10 seconds, four buses at a time. The most imminent bus (from any route) is always displayed at the top. This seems pretty logical, until you start using them …

Above: an example TfL live bus timetable (without pagination).

If you want to know when your next bus is going to arrive, it has to either be the most imminent arrival, or the display has to be showing the first page of results and your bus has to be in the top four arrivals. Unfortunately this is rarely the case, so you end staring at the display, waiting for that first page to come around, making sure to keep track of your bus's earliest arrival in case it’s not on the first page. (More often than not, I end up getting bored, look away, and miss that all-important first page!)

So I started thinking about how these displays could be improved. The result is Uncle Gus.

For a given stop, it formats each route on a single row, accompanied with the next 3 arrivals. It removes the (now unnecessary) order number and shortens “min” to just “m”. So the same data as above could be displayed as:

Ah, that’s better. Give it a try!

Compair: a typeface comparison tool

Sun, 28 Jul 2013 21:14:23 GMT

In Combining Typefaces, Tim Brown outlines a process for choosing complementary typefaces. Part of this process includes comparing text set in different faces, both at macro level (to gauge characteristics such as texture and contrast), and at micro level (to examine the compatibility of the finer details).

To make comparisons easier at micro level, I created a basic online tool, Compair. Simply choose 2 fonts, some sample text, and compare features side-by-side such as x-height, cap-height, and character width.

At the moment, it’s pretty basic, but I’m hoping to add more kinds of micro comparisons (e.g. overlay the two faces), add macro comparisons, and perhaps integrate with the Google Fonts API.

Designers Humanize Technology

Sun, 21 Jul 2013 20:38:44 GMT

Simply, designers humanize technology. Designers are trained to embrace chaos and complexity, to hold multiple and often competing ideas in their heads at one time, to be flexible and nimble in the face of changing constraints, and most importantly, to visualize concepts, systems and services that don't yet exist. Designers tell stories about how the future ought to be.
Jon Kolko in Now Hiring: The Most Liberal Art

Making use of new design technologies

Wed, 03 Jul 2013 07:04:33 GMT

Occasionally designers seem to seek credit merely for possessing a new technology, rather than using it to make better designs. Computers and their affiliated apparatus can do powerful things graphically, in part by turning out the hundreds of plots necessary for good data analysis. But at least a few computer graphics only evoke the response “Isn’t it remarkable that the computer can be programmed to draw like that?” instead of “My, what interesting data.”
Edward Tufte in The Visual Display of Quantitative Data

Untrustworthy Fast News

Tue, 02 Jul 2013 05:57:56 GMT

Timeless words from a 19th century journalist on the use of the electrical telegraph:

Intelligence, thus hastily gathered and transmitted, has also its drawbacks, and is not so trustworthy as the news which starts later and travels slower.
Taken from The Information by James Gleick

Wing

Sun, 30 Jun 2013 16:50:02 GMT

2007

Korg Volca Series

Mon, 17 Jun 2013 11:27:21 GMT

Pre-ordered. See demo video.

Albums Mid-2013

Thu, 13 Jun 2013 14:25:00 GMT

Currently listening to:

Ghostpoet—Some Say I So I Say Light
Bibio—Silver Wilkinson
Bonobo—The North Borders
Jon Hopkins—Immunity
Boards of Canada—Tomorrow's Harvest
Gold Panda—Half of Where You Live

Also looking forward to checking out the new Mount Kimbie album, as well as new records from Tunng and Holden (both released next week).

Daughter

Sun, 28 Apr 2013 10:20:00 GMT

I’ve been listening to Daughter a lot recently. The song-writing and production on The Wild Youth EP, is incredible. Youth is outstanding.

What makes us feel good about our work?

Fri, 19 Apr 2013 09:14:29 GMT

Interesting TED talk from Dan Ariely, backed with some intriguing experiments. His book, Predictably Irrational, is well worth reading.

Vox Populi

Wed, 17 Apr 2013 12:19:00 GMT

BBC London recently reported that Transport for London may soon disallow cash fares on London buses. For the obligatory vox pops section of the report, the BBC appeared to be in Croydon, asking punters what they thought. In typical fashion, the producers/editors picked these insightful words from one commuter:

It’s not really good news for people who want to pay by cash
Are London buses set to be cashless? at ~00.25

This instantly made me think of Charlie Brooker’s How to Report the News, and gave me a great excuse to post it below:

Overload, clutter, and confusion

Tue, 16 Apr 2013 16:48:48 GMT

Overload, clutter, and confusion are not attributes of information, they are failures of design. So if something is cluttered, fix your design, don't throw out information. If something is confusing, don't blame your victim—the audience—instead, fix the design. And if the numbers are boring, get better numbers
Edward Tufte in The AdAgeStat Q&A

Cennydd Bowles: The Things of the Future

Fri, 12 Apr 2013 08:45:00 GMT

Inge Druckrey on Roman Lettering

Sun, 07 Apr 2013 19:36:01 GMT

The structure of the roman capital letter is simple, and beautiful. It uses clear geometric elements: the half-circle, vertical, diagonal, horizontal. It is based on a grid of square, half-square, quarter-square … it’s like a continuous rhythm of very simple form elements, and that gives the coherence.
Inge Druckrey in Teaching to See at 12:25

Blue

Sun, 07 Apr 2013 19:08:09 GMT

Gospel Oak, London:

TL;DR

Wed, 27 Mar 2013 13:34:33 GMT

I realize that we live in a TL;DR culture … But it's really not ok to act functionally illiterate when you're not actually illiterate, when an advanced society that once put a man on the moon worked so hard to educate you.
Emin Gün Sirer

Related and well worth a read: What's Actually Wrong with Yahoo's Purchase of Summly

Hierarchy

Fri, 22 Mar 2013 16:23:57 GMT

The Feynman lectures (3 volumes) write about all of physics in 1800 pages, using only 2 levels of hierarchical headings: chapters and A-level heads in the text. It also uses the methodology of sentences which then cumulate sequentially into paragraphs, rather than the grunts of bullet points. Undergraduate Caltech physics is very complicated material, but it didn't require an elaborate hierarchy to organize. A useful decision rule in thinking and showing is "What would Feynman do?"
Edward Tufte

Camille—Ta Douleur

Mon, 18 Mar 2013 23:11:23 GMT

Rollers

Thu, 14 Mar 2013 13:20:39 GMT

sound 323

Thu, 14 Mar 2013 13:18:14 GMT

Old record store. Unfortunately closed before I moved to Highgate.

Post 57

Wed, 06 Mar 2013 09:38:05 GMT

I photograph to see what the world looks like in photographs.
Garry Winogrand

Twitter Burnout

Wed, 20 Feb 2013 10:11:57 GMT

I find that my burnout is correlative to the amount of time I spend on Twitter.
AJ O’Neal on JSJ: Staying Current

Guggenheim

Tue, 19 Feb 2013 14:07:05 GMT

2010

Complexity

Mon, 18 Feb 2013 20:39:37 GMT

It's better to hide [complexity] from people, than to force them to learn about it and deal with it. Tom Dale on JSJ: Specialized vs Monolithic (at around 18:20)

Dan Deacon—True Thrush

Thu, 14 Feb 2013 20:21:19 GMT

Playlist: Jan 2013

Thu, 07 Feb 2013 22:50:31 GMT

Discovered Erased Tapes this month, and in particular, Nils Frahm. Four Tet's latest release, 0181 is lovely, and his Return to Plastic People mix is superb: Rocketnumbernine – Matthew and Toby (Four Tet remix) and J&W Beat by Floating Points are highlights.

Foliage

Mon, 04 Feb 2013 13:25:33 GMT

2001/02

2CV

Sun, 03 Feb 2013 22:30:23 GMT

Port Isaac, 2010

Etna

Fri, 01 Feb 2013 11:17:29 GMT

2011 (not the summit, but close enough).

The Awkwardness of Drag and Drop File Uploads

Tue, 29 Jan 2013 13:48:54 GMT

Steps for drag and drop file upload:

Switch from web browser to file browser e.g. Finder or Windows Explorer
Navigate to files
Arrange windows so that files can be dragged to web browser (resize/move/switch windows to ensure droppable area is visible)
Drag and drop files to droppable area

Compared with uploading via basic input[type=file]:

Open file browser from web browser
Navigate to files
Choose files to upload

Man Power (rgb)

Tue, 29 Jan 2013 13:16:51 GMT

Features of Print Media (from a digital media perspective)

Mon, 14 Jan 2013 07:55:07 GMT

This rather amusing list of print media features comes from Andrew Betts' talk, Offline Rules:

Works offline
Portable
Long battery life
Can be read in bright sunlight
Cheap
Ubiquity
Bookmarking
Sharing
Fast start up
Clipping/saving

See Attached

Sun, 13 Jan 2013 15:29:52 GMT

I can't tell you how many times I've mistakenly sent an email before adding the attachments; so I was pleased to see this pop up (apparently this was previously a Gmail labs feature). However, as a colleague pointed out, wouldn't it be nice if the message accompanied a file browser (rather than just a confirm dialog)?

Launderette

Fri, 11 Jan 2013 12:16:42 GMT

A Starting Point for Choosing Typefaces

Fri, 11 Jan 2013 11:47:28 GMT

This is a brief follow up to something I mentioned in my previous post about Helvetica (and the film). I wrote that choosing a typefaces requires careful consideration. Aral Balkan's recent article Design is not veneer expresses this perfectly:

At the very least, you should be asking ‘why?’ Why this font? What is the feeling I’m trying to convey? Is this text meant to be serious, fun, exciting, solemn, scary? What’s the voice I’m trying to achieve? And for whom? Who is my audience? Whom am I designing for?
Aral Balkan

Helvetica (2007)

Fri, 04 Jan 2013 14:51:36 GMT

I finally got round to watching Helvetica, a film that documents various designers' thoughts on the typeface, along with a bit of history surrounding modern design.

Towards the beginning of the film I was quite surprised by some of the designers' feelings towards typography, and the way they advocate Helvetica's use:

[Helvetica] was doing away with manual details. We were impressed by that, because it was more neutral, and neutralism was a word that we loved. [Type] should be neutral. It shouldn't have a meaning in itself. The meaning is in the content of the text, not in the typeface. That's why we loved Helvetica very much.
Wim Crouwel

Massimo Vignelli worked on the American Airlines branding, and the signage of the New York subway:

There are people that think that type should be expressive … I don't think type should be expressive at all. I can write the word dog with any typeface and it doesn't have to look like a dog, but there are people that when they write dog it should bark!

It is a modern type. It is a very clear type. It's good for everything, pretty much.

You can say ‘I love you’ in Helvetica. You can say it with Helvetica Extra Light, if you want to be really fancy. You can say it with the Extra Bold if it's really intense and passionate, and it might work!

Massimo Vignelli

I feel that every typeface always expresses some meaning however it is used, and that choosing typefaces requires careful consideration. After all, all typefaces have been created by someone and for some reason, and many have a deep history behind them, which is partly the reason why ‘Keep Calm and Carry On’ set in Helvetica (below right) just looks wrong (to my eyes, at least). Helvetica is a hugely versatile typeface and can be very expressive as Vignelli explains(!), but I don't feel it is right for everything.

Below: For want of a better example: ‘Keep Calm and Carry On’ set in Gill Sans (left) and Helvetica (right). Neither use the typeface of the original.

The film moves on to examine the use of type in post-modern design, grunge, and rebellion against using Helvetica without question, which includes this great piece from David Carson:

The film then settles on interviews with younger designers and their opinions on working with Helvetica today.

For me, Helvetica is a great typeface and is fit for many applications: I've often fallen into the trap of trying to find something similar to Helvetica for the sake of not using Helvetica, when Helvetica has been perfectly suitable all along. As a web designer, typeface choices are beginning to open up with the availability of web fonts, but their use can be a performance concern:

Hey everyone, can you please stop with web fonts on mobile experiences? I'm tired of seeing a blank page for the first 5 seconds.
— Nicholas C. Zakas (@slicknet) April 14, 2012

… which makes the choice even harder.

Careful Design

Wed, 02 Jan 2013 14:07:26 GMT

Sometimes we want to capture people’s attention at a glance to communicate something fast. At other times we want to have the interface fade away into the background, letting people paint pictures in their minds with our words…

I tend to distinguish between these two broad objectives as designing for impact on the one hand, and designing for immersion on the other. What defines them is interruption. Impact needs an attention-grabbing interruption. Immersion requires us to remove interruption from the interface. Careful design deliberately interrupts but doesn’t accidentally disrupt.

Jon Tan in Science!

People Quickly Expect "App"

Fri, 30 Nov 2012 16:19:51 GMT

I'm a big fan of what Yehuda Katz and Tom Dale are doing in their approach to creating ember.js (formely SproutCore 2.0). The background to this approach is discussed in Yehuda's TXJS 2011 talk (below), which is well worth a watch.

In addition to arguing the case for going beyond microframeworks, Yehuda also talks about native vs. web UI design:

People quickly expect "application" when you start adding features like transitions … When you build a UI for the web, you need to either make it very distinctively different from [native] applications: make it very much feel like the web; or you need to get it right. If you get it half way, it feels wrong. If you don't want to go the whole way, don't do transitions at all.
Yehuda Katz in his TXJS 2011 talk (below) at ~32:30

It's fascinating that people's expectations—and therefore the software's context—can be altered so easily, with something as simple as an animation.

Steve Jobs on being at Apple

Wed, 21 Nov 2012 23:25:41 GMT

I've never been a big fan of watching the big Apple launch events, however I've found that listening to Steve Jobs talk about working at Apple and developing products is fascinating:

On Trying to Please Everyone

Mon, 12 Nov 2012 10:15:29 GMT

When you broadly and arbitrarily extend a product's functionality to include many constituencies, you increase the cognitive load and overhead for all users.

… If you try to design an automobile that pleases every possible driver, you end up with a car with every possible feature, but pleases nobody. Software today is too often designed to please too many users, resulting in low satisfaction.
Alan Cooper in About Face 3

London and Creativity

Tue, 30 Oct 2012 13:38:54 GMT

London is such a constantly evolving city. It has many layers of systems in place, but nothing really quite works.

If you're working in an environment which doesn't necessarily work very well, it's a great environment to try and make things work well. We need contrast and tension to be able to create.
Sam Hecht

MP3s vs. records; printed books vs. e-books …

Sat, 27 Oct 2012 10:29:00 GMT

I think most of the blah-blahing about MP3s versus records (or printed books vs. e-books) is a mix of honest-to-God personal preference and sheer sentimentalism. I think we all need to shut up about this, because nothing anyone writes or says is going to change any minds. Most of the drum-beating amounts to snobbery for being part of a grand tradition or arrogance for being an early adopter. Both are equally foolish things to be prideful about. Find what works for you, and be happy with it. Music is fun and nourishing. Let it be.
Frank Chimero in Siamese Dream

Guilty.

-- Please select --

Sat, 20 Oct 2012 09:43:29 GMT

Motivation

Tue, 16 Oct 2012 07:35:00 GMT

… there was this group comedians and they were like Olympus, and I wanted to be one them; and I didn’t care if I sucked at it.
Louis C.K. on Talking Funny

Alternative… Electronica…

Thu, 11 Oct 2012 21:22:00 GMT

Using Backbone.js Class Properties as Data Stores: Part 2

Fri, 31 Aug 2012 15:04:38 GMT

A Backbone plugin version of the following can now be found on the backbone-store-collection GitHub repo.

Previously I demonstrated a pattern to add basic data stores to Backbone models. In this post I'll improve this pattern, extending the store's get method to fetch a model from the server if it's not stored locally.

We'll want the API to look something like this:

var post = new Blog.Models.Post({ id: 1 });

Blog.Models.Post.store().get(1, {
  success: function(model, response) {
    // model returned from local collection
    model == post; // true
  }
});

Blog.Models.Post.store().get(2, {
  success: function(model, response) {
    // model fetched from the server
  },
  error: function(model, response) {
    // error
  }
});

As you can see, the new get adds a second parameter, allowing for success/error callbacks.

First we'll try and retrieve the model from the local store, this requires calling the original get (super). If it's found, we just invoke the success callback. Otherwise we create a new model with the id that was passed in, fetch that model from the server, then invoke the appropriate callback. (On error, the blank model is removed from the store.)

Blog.Collections.Posts = Backbone.Collection.extend({

  get: function(id, options) {
    var modelFromStore =
      Backbone.Collection.prototype.get.call(this, id);

    if(modelFromStore) {
      options.success(modelFromStore);
    }
    else {
      var newModel = new this.model({ id: id }),
          _this = this;
      newModel.fetch({
        success: options.success,
        error: function(model, response) {
          _this.remove(model);
          options.error(model, response);
        }
      });
    }
  },

  url: '/posts'
});

I've created Backbone plugin for this, available from the backbone-store-collection GitHub repo. So rather than copying the code above, you can simply do something like:

Blog.Collections.Posts = Backbone.StoreCollection.extend({
  url: '/posts'
});

Models still need to be manually added to the store: see the project readme.

Using Backbone.js Class Properties as Data Stores

Thu, 30 Aug 2012 19:15:33 GMT

Update: a Backbone plugin version of the following pattern can be found on the backbone-modelling GitHub repo.

I've been looking into ember.js recently and really liked the look of Ember Data: a library for loading and storing models from a persistence layer. It has a nice ActiveRecord-like API for querying models, fetching any models from the server that have not been created or stored locally.

It's something I've emulated (very basically) in previous Backbone.js projects, so it's nice to see it implemented so completely.

Inspired on the Ember Data API, I thought it may be worth improving my own implementation, making use of Backbone's class properties, like so:

window.Blog = {
  Models: {},
  Collections: {},
  Views: {},
  Routers: {}
};

Blog.Collections.Posts = Backbone.Collection.extend({
  model: Blog.Models.Post // this will be undefined
});

Blog.Models.Post = Backbone.Model.extend({
  initialize: function() {
    this.constructor.store.add(this);
  }
}, {
  store: new Blog.Collections.Posts()
});

First we set up the collection, ~~referencing the Post model~~ (Update: this will be undefined, causing potential problems down the line. See update below). Then we define the Post model itself, which includes a store (as a class property) and adds each instance to this store on initialize. It's worth noting that this method makes use of Backbone's extend function for Backbone classes (see annotated source code), which differs from underscore's extend function: instance properties are extended with the first parameter, class properties in the second.

This sets up a basic store, allowing us to do things like:

Blog.Models.Post.store.length; // 0
var post = new Blog.Models.Post();
Blog.Models.Post.store.length; // 1
Blog.Models.Post.store.first() == post; // true

Of course, all the Underscore collection methods are available on the store property. Fetching models that are not stored or created locally shouldn't be too hard to add: a feature for another blog post, perhaps…

Update: Adding the model property and memoizing the store

This implementation is ok, but it doesn't allow the Post model to be referenced in the store's collection. Not ideal.

To fix this we will include the model property when the collection is instantiated. This requires us to convert the store property to a function that returns the collection, memoizing the collection (in Blog.Model.Post._store) in the process:

Blog.Models.Post = Backbone.Model.extend({
  initialize: function() {
    this.constructor.store().add(this);
  }
}, {
  store: function() {
    return this._store = this._store ||
      new Blog.Collections.Posts(null, { model: this });
  }
});

jQuery Knob and FF Chartwell

Fri, 18 May 2012 07:12:00 GMT

Firstly, a jQuery plugin for creating dial controls on the web:

—via @auxilit

Secondly, a rather innovative use of OpenType features to create charts from text:

—via @aarron

TDS

Mon, 14 May 2012 08:10:00 GMT

If you've spoken to me in the last 6 months, you may have heard me rant about our old flat: that, at times, it had no running water; that the landlord/estate agent were totally unprofessional in dealing with the problem; and that they then had the audacity to push to get the flat professionally cleaned.

On Saturday we heard back from The Dispute Service (TDS) who were holding the £150 that was charged to clean the flat. We received £120 of that back, which I'm very happy with, and it's a huge relief that it's all over.

The report, in parts, makes for some satisfying reading:

[The £150] cleaning invoice includes work which could not possibly have been undertaken such as cleaning an extractor and hood and kitchen tiles when in fact there is no extractor or tiling in the kitchen.

There is no specific obligation on the tenants to have the flat professionally cleaned … It is not sufficient for a landlord to rely solely on a statement of claim or an obligation in the tenancy agreement … the landlord must support their claim with objective evidence.

Although, it did have to end with something a little ridiculous:

I am of the opinion that the landlord is not entitled to the full cost of a professional clean but that she is entitled to be compensated [£30] for the cost of cleaning the tarnished tap, the [discoloured] washing machine seal, and the spot stains from the rug

The cleaning invoice didn't mention any of that.

Slowness

Sat, 28 Apr 2012 19:05:00 GMT

The trouble with the rat race is that even if you win, you're still a rat
Lily Tomlin

Whilst looking for a synonym for "slowness" I came across The World Institute of Slowness. It has some great quotes (like the one above), and some interesting resources referencing physicist Richard Feynman, and Andy Goldsworthy:

Badly Drawn Boy—My Friend Cubilas

Wed, 25 Apr 2012 08:09:00 GMT

From EP3, 1998.

Ampersand (infinite)

Thu, 19 Apr 2012 08:07:00 GMT

Stewart Lee on University Funding and the Arts

Mon, 16 Apr 2012 07:55:00 GMT

I think the withdrawal of the grant and the implication of student loans, necessarily limits people that want vocational careers, and produces a generation of people who feel that the only purpose of education is to earn money.
Stewart Lee

London, sometimes

Wed, 11 Apr 2012 07:59:00 GMT

Innovation Comes From Saying No

Mon, 09 Apr 2012 18:17:00 GMT

[Innovation] comes from saying no to 1,000 things to make sure we don't get on the wrong track or try to do too much. We're always thinking about new markets we could enter, but it's only by saying no that you can concentrate on the things that are really important.
Steve Jobs, from The Seed of Apple's Innovation
via Getting Real: Hold the Mayo

Music from Japan

Tue, 03 Apr 2012 12:09:43 GMT

In March, I listened to music from Japan. I'd just bought Shigeto's excellent Lineage (and got the t-shirt), so I felt it was a suitable time to investigate music from other Japanese artists.

I plugged in "Takagi Masakatsu" into Last.fm (an artist I discovered from my FatCat inspired month), and took note of anything which tickled my fancy.

First of all, Sakerock blew me away. I could not stop listening to Kaishain (see video below). The rest of the album is excellent, too (but unfortunately not on Spotify).

I also discovered Cornelius, whose album, Point, is brilliant.

I've put together a Spotify playlist of this month's Japanese music, which also includes Sakura by Susumu Yokota. Enjoy!

Good Morning!

Fri, 23 Mar 2012 10:35:05 GMT

A Collection of Lyrics from David Shrigley's 'Worried Noodles'

Thu, 22 Mar 2012 23:06:09 GMT

In anticipation of my visit to the David Shrigley exhibition at the Hayward, here are a collection of my favourite lyrics from his record, 'Worried Noodles'. Lyrics found on moorestevie.com.

A Truce (music by Max Tundra)

I'd like to declare a truce.
—What's a truce?
It's when you agree to stop fighting.
—Have we been fighting?
Yes.
—Are you sure?
Yes.
—When were we fighting?
Just now down there on that plastic mat.
—We weren't fighting, we were playing 'Twister'
Are you sure we weren't fighting?
—Yes. Twister is a game.
A fighting game?
—No, just an ordinary game.
For soldiers?
—No, well, soldiers can play but there is no fighting.
Soldiers love to fight.
—Well, there is no fighting when you're playing 'Twister'. It's against the rules.
There are rules?
—Yes, didn't you know? We've been playing for hours. Didn't you realise?
No. I thought we were fighting.

The Wooden Floor (music by James Chadwick)

The wooden floor is made of wood
And the wood is very good
Oak, we think
The wooden floor is full of grace
And beneath the floor there is a space
Where dirt and bits of stuff reside
And recently, at their side,
A human head
The human head belonged to Pete
Who scuffed the floor
With his giant feet.

He will not be doing that again
Unless his corpse grows a new head
And comes back to life.

Squirrel (music by Munch Munch)

Squirrel squirrel
In the tree
Do me a favour
Collect Nuts for me
Do me a favour
And take the shells off
The nuts
And examine them closely
To check they are not
Rotten
Before you give them to me.

Nut Nut
Beautiful nut
Salt nut
Spicy nut
You'rea good old nut
And I love you.

No (music by Franz Ferdinand)

No no no no no no no no
No hair
No no no no no no no no
No eyes
No no no no no no no no
No teeth
No no no no no no no no
No brains
No no no no no no no no
No arms
No no no no no no no no
No legs
No no no no no no no no
No feet
No no no no no no no no
No shoes
No no no no no no no no
No thanks.

Also: A Sentimental Song, by Cotton Candy

Pain

Tue, 20 Mar 2012 23:36:05 GMT

The Experience of Signing up to O2 Home Broadband

Tue, 06 Mar 2012 22:20:34 GMT

Note: I recently promised myself that I'd try not to moan as much, particularly on the web. So this is just a review, not a rant ;).

One of the firsts tasks after moving into a new flat is to sort out an internet connection. It seems rather silly that setting up a TV in a new flat is just a case of "plugging it in", yet trying to connect to the web requires time/research/decisions/stress, even before "plugging it in" (which is nowhere near as simple as with a TV). Anyway, after plenty of phone calls and maths, we discovered that O2 Home Phone and Broadband had the best balance of cost/installation efficiency.

I spoke to O2 sales a couple of times, and they were very nice. They sorted out a phone and broadband package that I was happy with and answered some of my questions. The package was:

12 months "half-price" broadband (as an existing O2 customer) at £6.25/month
line-rental at £9/month
as an existing O2 customer I also received a "half-price" installation (£43 rather than £86), and no connection fee
and a "free" £25 M&S voucher

We also confirmed a date for a BT engineer to carry out the installation at the property (5th March).

After the phone call it started to get a bit annoying. I received the following:

a text message with my "Mobile Discount Code", which I was told to ignore. Not ideal, but easy enough.
an email confirming my order
a text message confirming my order with a link to track the router delivery
an email detailing the expected broadband "connection" date (6th March)
a text message with the expected broadband "activation" date
an email noting when my home phone service will be set up, along with the date and time the BT engineer is expected
an email confirming that my direct debit was being set up
a text message confirming that my direct debit was being set up
a text message confirming the date/time the engineer is set to come out
a text message with the "Good News!" that my router was on its way
an email also notifying me that the router was on its way

Four emails and five text messages (+ another one to ignore), giving me information I already knew. Rather a lot of messages.

A few days before the installation, I had a missed call/voicemail from BT, again confirming the installation date. The same day I received the following:

O2: Sorry but your home phone order is taking a bit longer than we thought. It should be sorted soon. Check your email for further details.

The email I read:

O2: Your home phone start date's been delayed … We're working on it right now and will let you know your new connection date as soon as possible.

Now I was a bit worried and confused but suspected that this was just an automated notification when an order goes beyond a certain number of days. Not wanting to risk anything though, I emailed them just to make sure. Luckily this was the case, and so another couple of notifications to ignore.

On to the installation day. I took the day off to give the engineer access to the flat (and so I'd not be charged a rearrangement fee, as I'd been warned). Then without any sign of an engineer, I received a text (echoed by an email, of course):

O2: Good News, we've connected you early.

So I rang them just to confirm, and after being cut off once, the O2 representative said that sometimes the engineer only has to visit the nearest distribution centre. Nice to let us know. An email or text would've been nice.

I'm happy that we have broadband at home, though slightly bemused that it took two weeks, cost £43 ("half price!"), and required me to take a day off, all for a guy to (seemingly) flick a switch somewhere else.

I realise that this nowhere near the worst experience anyone has had with a broadband installation. But as the whole thing went to schedule, I'm asking myself, what is going on inside O2's systems that makes the process so irritating and confusing?

Rd.

Fri, 02 Mar 2012 14:26:13 GMT

The Best and Worst Sentence I've Ever Read

Tue, 07 Feb 2012 21:08:58 GMT

My girlfriend and I will soon be moving flat—to place with such luxuries as running water (fingers-crossed). Anyway, we've just had the tenancy agreement for our new place sent through. It's short (only four pages: one-fifth the length of our current contract), so I went through it on my short train journey home. I could hardly contain myself. In fact, I couldn't contain myself—I was laughing so hard.

I won't go through every poorly constructed sentence: it'd take too long, but here are a couple of gems.

The Tenant shall:- …
(c) Use the property in a tenant-like manner

… and the sentence that had me in tears:

(t) Not do or suffer to be done any act or thing which may be a nuisance or annoyance to the Landlord or to the occupiers of any adjoining premises or which may vitiate any insurance of the Property or the contents thereof against fire or otherwise increase the ordinary premium thereon and in particular without prejudice to the generality of the foregoing not to use or play any electrical or musical instruments of any kind or practice any singing in the Property so as to cause annoyance to nearby residents or occupiers or at all so as to be audible outside the Property between the hours of 11pm and 9am

Somehow, it simultaneously manages to be the best and worst sentence I've ever read.

T

Thu, 02 Feb 2012 13:14:46 GMT

I Haven't Seen Most Films

Mon, 30 Jan 2012 21:36:58 GMT

For whatever reasons, going to the cinema/watching films has never been something I've done much of. It's not that I don't enjoy it, but I've often felt that a cinema visit isn't worth it (a feeling that was reinforced when I was invited to watch Meet the Fockers^[1]).

I often found it rather embarrassing to admit I hadn't seen an absolute classic. Now I'm quite open about the fact that I haven't seen most films (or rather, I haven't seen most of the films that almost everyone I know has seen). It's even become an interesting conversation starter: people are amazed when I reel off some of the films I've yet to see (just you wait!).

It also sparked off an idea amongst friends to create a documentary about me watching classic films. It was a rather ambitious New Year's resolution, that we started but never finished.

Films I Haven't Seen

So here's the list of films I haven't seen (but feel I really should have).
A ~~strikethrough~~ denotes films I saw whilst making the documentary mentioned above. As you can see, we didn't get very far.

Francis Ford Coppola's:
- Godfather pt.1
- Godfather pt.2 (should I bother with pt.3?)
- Apocalypse Now
Kubrick's:
- 2001: A Space Odyssey
- Clockwork Orange
Tarantino's:
- Pulp Fiction
- Reservoir Dogs
- Jackie Brown
- Kill Bill vol.1
- Kill Bill vol.2
Steven Spielberg's:
- Jaws
- Schindler's List
- Back to the Future 1
- Back to the Future 2
- Back to the Future 3
Ridley Scott's:
- Blade Runner
- Alien (or any in the Alien series…)
James Cameron's:
- Aliens
- Terminator
- Terminator 2
- Terminator 3
Wes Anderson's:
- Rushmore
- The Royal Tenenbaums
Coen brothers':
- Barton Fink
- Fargo
- The Big Lebowski
- No Country for Old Men

Notable Films I have Seen

The Lord of the Rings Trilogy
The Star Wars series (apart from Episode II: Attack of the Clones)
Ghostbusters (and maybe Ghostbusters 2?)
Some of the Spielberg's: E.T., The Indiana Jones series (I think), Saving Private Ryan
Gladiator
Toy Story (although maybe not Toy Story 2 and dipped in-and-out of Toy Story 3)
Memento (probably my favourite film)
Eternal Sunshine of the Spotless Mind
City of God
Amelie
Some of the Wes Anderson films: The Life Aquatic, The Darjeeling Ltd., Fantastic Mr. Fox
Fightclub
Inception
Senna (probably the best film I've seen recently)
Up
Avatar (didn't really enjoy)

Are there any other classics I should watch? Let me know. @domchristie.

[1] I couldn't say no. It was awful.

From Lato to Calluna Sans

Thu, 26 Jan 2012 22:12:59 GMT

No, you're not at the opticians. Lato (L), Calluna Sans(R).

I really like Lato. It was the typeface I used for headings on this site. That was until I fancied a change and discovered Calluna and Calluna Sans.

I prefer straightness of the leg on Calluna Sans' uppercase R, and the way the uppercase J drops below the baseline. The uppercase M nearly put me off: I usually prefer vertical stems to sloped, but the apex (in the middle) is cleaner than that belonging to Lato, and overall it appears less imposing.

Thoughts? @domchristie

Trustworthy Fonts

Sun, 22 Jan 2012 20:06:08 GMT

I'm currently reading Just My Type by Simon Garfield. Buy it: it's very good and has some nice little nuggets, like this one:

We tend to treat the traditional and familiar as trustworthy. We are dubious of fonts that alert us to their difference, or fonts that seem to be trying too hard. We don't like being consciously sold things or paying for fancy design we don't need.
Simon Garfield, in Just My Type

New Project and Open Source Stuff

Fri, 20 Jan 2012 12:06:39 GMT

I've been pretty busy recently working on a new side-project: a nice bookmarking/scrapbooking tool, which gives me the chance to delve deeper into both server-side and front-end technologies. It's being built in Rails 3.1 and Backbone (with CoffeeScript), and includes plenty of pretty CSS bits (webfonts, transitions etc). It'll hopefully have a bookmarklet, and a decent API … we'll see.

There's also been some activity on my open source projects, which is amazing. to-markdown has had some important updates (and has gained a few followers along the way!). Thanks to Henri Bergius, it now runs on Node.js (another technology I need to get properly stuck into). ios-placeholder has been updated thanks to Ned Schwartz, and juration will be getting the 'chrono' format support soon (thanks to Jonathan Otto). Hopefully I'll get these pull requests merged in soon: my head has been stuck in that little side-project of mine!

In other news, I'm giving Sublime Text 2 a go (Sam has not stopped going on about it!). I'm getting into it, thanks to this Sublime Text 2 guide, and @sublimetips twitter feed. One essential package for those who regularly deal with erb views: SublimeERB (available via Package Control, but don't forget to add the key bindings, as detailed in the readme).

Taxes

Thu, 19 Jan 2012 22:17:21 GMT

I've been meaning to get this quotation down for ages. I heard it on Radio 4's Chain Reaction programme back in September last year, when Kevin Eldon interviewed Mark Steel.

I think lampposts soon will have little meters on, and you'll put 5p in and it'll give you just enough light to get to the next one: "Why should I pay for someone else's light? I'M INDOORS!… bloody fire-brigade — I'm not on fire! I'll pay when I want carrying over someones shoulder down a smoky bannister!"

These are the sort of people that go: "What about guide dogs? All the money that gets spent on them! I can't climb a tree, nobody buys me a gibbon!"
Mark Steel, on Chain Reaction

Neuroscience

Wed, 09 Nov 2011 09:17:00 GMT

I don't plan on writing much about neuroscience(!), but the following quotation caught my ear. It comes from BBC Radio 4's The Life Scientific – a series of interviews with scientists about their life and work.

It's not a programme I'd usually seek out – it just happens to be on after the Today programme, but every episode I've heard has been really interesting, and has got me thinking.

Neuroscience calls itself a science (obviously), but it's very different from [a physicist's] science of physics, or a chemist's science of chemistry, because it's a set of techniques searching for a common answer, rather than a real structured level of analysis of a scientific problem.
... in physics, the questions are agreed. You could walk into any physicist's office or lab, and say, "What are the big questions in physics?", and they'd reel them off: "How did the universe start?", "What's matter made of?"; and everyone would agree. But if you ask that question to a neuroscientist, they'd just be puzzled by the question.
Neuroscientist Colin Blakemore, on The Life Scientific

Found: locked out

Sun, 06 Nov 2011 13:06:02 GMT

Bletchley Park

Sun, 30 Oct 2011 11:11:00 GMT

The BBC are currently running a series on some of the untold stories of World War II. The first was Code-Breakers: Bletchley Park's Lost Heroes, and told the story of how one of the most sophisticated codes was broken (the Lorenz), which led to the invention of the first computer. It's a great watch.

I've visted Bletchley Park a couple of times. It's a fascinating place, pretty much untouched since the war and well worth a visit.

Nonsense

Wed, 12 Oct 2011 18:51:00 GMT

Talking nonsense the sole privilege mankind possesses over the other organisms. It's by talking nonsense that one gets to the truth! I talk nonsense, therefore I am human. Not one single truth has ever been arrived at without people first having talked a dozen reams of nonsense, even ten dozen reams of it, and that's an honourable thing in its own way; well, but we can't even talk nonsense with our own brains! Talk nonsense to me, by all means, but do it with your own brain, and I shall love you for it. To talk nonsense in one's own way is almost better than to talk a truth that's someone else's; in the first instance you behave like a human being, while in the second you are merely being a parrot!
Razumikhin, in Crime and Punishment

Ten Years Taking Pictures

Mon, 10 Oct 2011 11:57:55 GMT

Truth be told it's been a bit more than ten years taking pictures, but that doesn't make such a good title. Anyway, I thought I'd pick out some photos from the archives and put together a review.

1990s/Early 2000s — School

The first time I can remember taking pictures was some time in the 90s, with a Polaroid 600 camera that my sister and I saved up for. I started studying photography at school when I was 16/17. It began with a William Eggleston / Ansel Adams exhibition at the Hayward. I probably couldn't have chosen a better exhibition to be my first. Adams one of the greatest landscape photographers of all time; while Eggleston pioneered the use of colour photography as art during the 70s. Both still influence my thoughts when I look through the viewfinder.

My dad had a nice SLR (like most dads of his generation), and I began shooting a few rolls with it immediately after that first exhibition. I still have these films somewhere, and will post some highlights when I get round to digitising them.

I was also lucky enough to have access to a couple of dark rooms at school, and was taught how to develop and print black and white film. I developed an interest for urban landscape and night photography, as well as video installations. At the end of year exhibition, the video below was projected onto a clear perspex waterfall.

2004/5 — First Year, Uni

I only studied photography for a year, but missed taking pictures when I started university. I received a compact digital camera for Christmas — which I nearly didn't get after the postman left it in the recycling bin. I got back into photography with this camera, and started to get addicted to Flickr. My favourite photos with this camera are those of the Island of Lindisfarne (below). They may not be the sharpest, or clearest, but I'm pleased with how they feel. They pretty much mirror my memories, which is important to me.

2005/6 — Second Year, Uni

Having stumbled across lomokev on Flickr, I realised I missed the characteristics of film and the process of taking pictures with it. I swiftly bought a Lomo LC-A on eBay, and started experimenting with Jessops (Agfa) slide film. I'm not a fan of the whole lomography thing, but I can't say it hasn't influenced my style.

This was probably my most productive time taking pictures — I found it hard to pick a few favourites.

2006/7 — Abbey Road

I didn't take too many pictures while I was working at Abbey Road, but still kept up an interest. I mostly used my Lomo, but began to miss the control one gets with an SLR. I became rather disappointed with the expensive developing costs and the poor quality output from places like Jessops/Snappy Snaps/Boots — negatives would often be badly cut, have drying marks all over them, and scans would have some awful colour correction applied. I started scanning prints and negatives at home, with a relatively cheap scanner.

In order to satisfy my need for a bit more control, I began to look into rangefinders, and received a Zorki 4K (a Leica replica) for Christmas. It's a purely mechanical camera, therefore repairable at home, but also prone to locking up. It did, however, come with a (highly sought after) Jupiter 8 lens. Here's some Abbey Road detail taken with that lens:

2007/8 — Final Year, Uni

Just before starting my final year, I spent a week in Switzerland followed by a week camping on the Isle of Mull, Scotland, with the aim of taking photos and getting ideas for music. After Agfa went bust, and stopped producing (Jessops) slide film, I shot a lot more with regular colour film. Cross-processing slide film can be cool, but I think I prefer the feel of the regular stuff.

Photography in my final year at university focussed on evenings out and making music. I was listening to (and studying) a lot of glitchy electronic music, which partly explains my enjoyment of lo-fi photography and the Lomo. I looked into other lo-fi such as the JamCam (a cheap digital camera), as well as disposable cameras. The following is typical of the JamCam.

I realised I hadn't captured many moments with my friends, so I made a start. As a result, I discovered how much I enjoy portraiture — not the staged kind, just moments.

2008—10

After graduating I inherited a rather nice SLR from my Dad's work (unsurprisingly, they no longer use film to take pictures of microscopic slides). It came with a macro lens (which I've yet to use) and so it wasn't until I bought a lens in Oxfam some time in 2010 that I considered using it (see New York pictures, below).

I didn't feel particularly inspired to take pictures other than when I was on holiday or on special occasions. My lovely girlfriend and I visited Iceland and New York, where most my favourites from this time have come from.

I also found a great place to get film developed, where they actually look after your negatives!

Iceland '09

New York '10

Now

I'd been looking get back into darkroom photography since university. I got so far as to ask in Jessops for some photographic chemicals. The assistant returned a clueless expression, which was rather disheartening (especially as I was job hunting at the time!).

However, as has been the theme for much of the last ten years, I received some photographic equipment for Christmas last year, this time in the form of a changing bag and darkroom chemicals. I also inherited some developing trays and tanks from my uncle.

So I'm back into DIY black and white photography, and it feels great. I've only developed a few rolls, and with every one I've got stupidly nervous about the whole process. But I like that.

I still haven't got the space to fit my enlarger(s) but I've bought a decent flatbed scanner that does the job nicely.

I feel a bit more inspired to go and take photos of anything, now, though still not as much as I'd like to. I always carry my Lomo or my Olympus mju II — another bargain from a charity shop.

Future

I like to think I'll continue taking pictures on film and have the means to do so in the future, simply because I enjoy the process so much. I don't see my equipment changing much — I have quite enough cameras! Hopefully I'll set up a proper darkroom someday, and get printing again. That'd be nice.

Photogeekery

Cameras

Lomo LC-A
Olympus OM-2n
Olympus mju II
Olympus AF-1
Voigtlander Bessa-R
Zorki 4K
Canon Powershot A85 (4.0MP)
JamCam

Lenses

Olympus OM-System 50mm f1.8
Jupiter 8 50mm f2

Misc.

Epson Perfection V700 Photo Scanner

iOS Placeholder & Juration

Thu, 29 Sep 2011 07:16:02 GMT

I've been pretty busy recently on a couple of small projects. As the name suggests, iOS Placeholder is a jQuery plugin that emulates the iOS behaviour of placeholder text in the browser. It's inspired by Robert Nyman's ideas on placeholder text behaviour, and offers clearer labelling of input fields once they are in focus.

The second project, Juration, is a simple time range parser/humanizer, inspired by the chronic and chronic_duration Ruby gems. Parsing takes a duration in words (e.g. 3mins 50secs) and returns that value in seconds. Stringifying does the inverse - taking a value in seconds and converting it to words. Feel free to have a play on the Juration demo page.

The WWWonderful Unstable Medium

Thu, 18 Aug 2011 21:19:00 GMT

Print is a wonderful stable medium, and turns out the web is a wonderful unstable medium
David Berlow

Plenty has been written about the web as a flexible (or 'unstable') platform, but I thought I'd collect my thoughts anyway.

Despite being written over 10 years ago, John Allsopp's A Dao of Web Design couldn't be more relevant today, and is a great starting point. It's well worth a read, but I'll summarise.

It basically encourages web designers to:

Recognise the strengths of print design, but treat the web as its own platform
Abandon control of 'the page' - embrace the lack of physical constraints and see it as an advantage
Create adaptable, accessible experiences that best make use of the web's characteristics
Consider function over form

Inspiring stuff.

Of course, many of these ideas are can also be applied to software design, and I'm reminded of Apple and their latest software interfaces, notably iCal for OS X Lion and iPad apps such as Notes (pictured below) or iBooks. Feelings begin with, "oOo, nice details!"; then move on to, "it's quite 'noisy' and a bit distracting"; to "why am I pressing a button embedded in leather?".

In his OS X Lion review, John Siracusa picks up on this, pointing out the disparity between the look of interface and the way it behaves i.e. although it may look like you can tear off pages, and scribble in the margins...you can't. It's just interface noise.

Perfection [in design] is achieved not when there is nothing more to add, but rather when there is nothing more to take away.
Antoine de Saint-Exupéry

However, that's not to say that we should be creating totally flat interfaces. I think it's a balance between minimalism and rich UI - go too far in the minimal direction, and you may end up creating a bland user experience; too far in the other direction, and you could end up with noise that doesn't make much sense.

Software allows us to do crazy things (like plonking buttons in leather), but simply replicating physical objects in a software interface, I feel, isn't particularly imaginative. Think of how far the boundaries could be pushed if the time spent perfecting iCal's faux-leather stitching, was instead spent on rethinking the calendar or how we could better organise our time^[1].

Despite Apple taking the direction they have, there's definitely been a move in the web community to explore the capabilities of this unfixed platform. Just check out some of the examples of parallax scrolling.

I'd love to see more examples of web design that gets this concept spot on. If you have any in mind, tweet at me.

Some resources/more thoughts:

Responsive Web Design by Ethan Marcotte; and his book
What the fluff - a nice article emphasising the importance of clarity in design
Against Chrome: a Manifesto

[1] maybe the calendar doesn't need a total rethink, but you get what I mean.

A Simple Website on Rails?

Sat, 06 Aug 2011 21:26:00 GMT

Ever since I started using Rails, Git and Heroku, I've been looking for a way to use these tools to create basic websites that have a nice interface for managing content.

I'd normally approach this kind of site with Wordpress. I like it's easy installation and the features it has out of the box; but getting it setup with Git and keeping development/production environments in sync (+ deployment) is a bit of a headache^[1].

What's more, as with most content management systems I've used, I've often found myself using ugly fixes to force it do do what I want it to, or trawling through directories to find a plugin that's sure not to break when I upgrade the CMS.

I've briefly looked into Radiant and Refinery: Rails-based alternatives that work fine within a Git workflow; but while they maybe easy to learn, I'd rather be getting to know Rails better, rather than the particular workings of a CMS (I know, this sounds lazy!).

The best solution I've come across so far is Rails Admin, which, as the name implies, provides a simple way to administer content on a Rails backend. Although I've only just started using it, it appears to have just the bare minimum features necessary to create/update content - allowing me to make the decisions about how my data is organised.

Installation is easy and getting something up and running couldn't be quicker. This is probably because I work more with Ruby/Rails than I do with php/Wordpress (or any other CMS); but it suits me - particularly as I can focus on creating web apps with Rails and learning Ruby (a bit nicer than php, in my humble opinion!)

[1] For example, it's all too easy modify files outside of the Git workflow - what with the ability to update the CMS via the Wordpress interface.

Hello World

Mon, 01 Aug 2011 07:03:00 GMT

I had a reputation at university for being rather slow at writing essays. I'd labour over every sentence, making sure it was clear and concise and the best it could possibly be before moving on to the next one. As you can imagine, when you've got thousands of words to write, this process doesn't work very well.

This attention to detail still manifests itself in the work I do everyday, and it can be painful (believe it or not, this sentence is the product of many iterations!); but I have some thoughts, and bizarrely enough, I miss writing them down. So I will start.

That's all for now, though. It's taken me long enough.

Dom Christie

Custom Path Configuration Properties in Hotwire Native iOS

Component Partials in Rails

Turbo Native without Turbo?

Optimistic UI with Ruby on Rails & Hotwire

Optimistic Comments

A Reusable Comment Partial

Pre-rendering with Placeholders

Stimulus Controller

Comment Formatting

Styling Optimistic Comments

The Final Result

Downsides

Conclusion

Tailwind Repetition

Alternative Approaches

1. Do Nothing

2. Local Variable

3. Loop

4. Custom link_to

5. ActionView::Attributes

Conclusion

Hotwire Back Button

Turbo Teapot

Turbo & Progressive Enhancement

Enhance!

Turbo Refreshes, Frames, and Streams

Turbo Refreshes

Morphs

Turbo Frames

Turbo Streams

Art We Are Drawn To

Today I Learned

Enhance Music

Tailwind Utopia

Today I Learned

UI Context and Rails Variants

Variants

Hotwire & Personalised Content

Rendering via Requests

Downsides

Today I Learned

Today I Learned

Scoping Rails Controllers by UI Context

Example: Deleting in Different Contexts

RESTful Nesting

Scope by UI Context or Domain Object?

Appendix

Bricolage

Ruby Emoji

Apple Podcasts to OPML

Dynamic Viewport Height in Tailwind

Example Output

Pursuing Happiness

Apps We Spend Our Time On

Partials

Leakiness

View Logic

Inheritance & Composition

Interface

Slots

Conclusion

Today I Learned

Continuous Delivery

The Same Thing in Multiple Contexts

RailsInspire

Objections

Process

Today I Learned

Early Generative Art by A. Michael Noll

BADBADNOTGOOD - Weight Off

Today I Learned

Die With Me by Dries Depoorter

BART

Today I Learned

Today I Learned

Destructuring: JavaScript vs. Ruby

Variable Naming

…rest

Default Values

4. Custom `link_to`

`{{#each itemController='…'}}`