Stephen Howells

Things 3 →

Mon, 29 May 2017 13:44:30 -0700

German indie app maker Cultured Code recently released the third major version of Things, their classy todo app. This app, five years in the making, is noteworthy as it’s an incredible example of beautiful typography and iconography that carries a delightful user interface. I’ve bought and used previous versions of Things and have always admired Cultured Code’s attention to design. With Things 3 they’ve made one of the strongest statements yet for native platform software to be as beautiful as it is useful.

I’m currently spending time with the new Things and so far it’s going well. Design matters whether you are building for mobile, desktop, or the browser. My wish is that other software makers will use Things as inspiration to exhibit better restraint in their work. I’m naturally drawn to design that shows restraint and Things is a masterpiece in this regard.

[Read on StephenHowells.net]

Next.js 2.0 →

Mon, 27 Mar 2017 21:03:56 -0700

Zeit:

More than 3.1 million developers read our announcement post of Next.js. More than 110 contributors have submitted patches, examples or improved our documentation. Over 10,000 developers have starred us on GitHub.

Today, we are proud to introduce Next 2.0 to the world.[…]

[Read on StephenHowells.net]

Rails 5 User Registration With Devise, Vue.js, and Axios

Sat, 18 Mar 2017 12:36:33 -0700

As I’m writing this it’s 2017 and there is a solid chance your apps use Vue, React, or Angular on the front-end. I was recently working on an app that uses Vue and Rails 5 together. The app has a Vue component where administrators can create new users. The new user’s credentials are sent to the Rails server through a POST request from Axios. The Rails app then uses the powerful and flexible Devise gem to handle user creation and authentication.

It required a bit of research to learn how to successfully implement this workflow. I’d like to share a few lessons learned in setting this up. Most of the Devise “how to” articles assume you’re using the standard ERB templates that come with the gem, which is obviously antiquated in the new JavaScript heavy world we code in.

Configuring Axios

Axios acts as the HTTP client for Vue. All form submissions and data retrieval from the backend are made possible with Axios. When you’re working in Vue it’ll be among the most important packages you’ll rely upon. There are other good HTTP clients available in the JavaScript community but I’ve found Axios to be my favorite.

A few small tweaks are needed when importing Axios into your Vue App. These tweaks rely on Axios’ ability to set defaults for use in every request:

import Vue from 'vue'
import axios from 'axios'

let token = document.getElementsByName('csrf-token')[0].getAttribute('content')
axios.defaults.headers.common['X-CSRF-Token'] = token
axios.defaults.headers.common['Accept'] = 'application/json'

Explanation:

Import the Vue and Axios packages when creating a new Vue app.
Access the CSRF token that Rails displays in a meta tag towards the top of the application.html.erb file and save it as a variable.
Tell Axios that every request should include the X-CSRF-Token header with the saved token.
Tell Axios that every request should include an Accept header that only allows JSON as the desired response.

These configuration defaults tell Rails that requests are valid by including the CSRF Token and that all responses should be formatted as JSON. Axios sets the Accept header to include ALL MIME TYPES out of the box! This is bad for a number of reasons but easily corrected by specifying the configuration default shown in the example. Devise will read this header and return the proper response. If you don’t specify JSON, Devise will send back HTML which is useless to your Vue app.

Configuring Devise

Devise is one of the more flexible gems for handling user authentication and registration in the Rails ecosystem. It only requires that one controller be customized to accommodate the registration request sent from Vue.

First, edit the routes.rb file to enable Devise and specify that there is a custom registration controller:

# routes.rb

Rails.application.routes.draw do
  devise_for :users, controllers: { registrations: 'registrations' }
  root 'home#index'
end

Then, edit the custom registration controller to allow an authenticated administrator to create a new user from Vue:

# app/controllers/registrations_controller.rb

class RegistrationsController < Devise::RegistrationsController
  before_action :authenticate_user!, :redirect_unless_admin, only: [:new, :create]
  skip_before_action :require_no_authentication

  clear_respond_to
  respond_to :json

  private

  def redirect_unless_admin
    head :unauthorized unless current_user.try(:admin?)
  end

  def sign_up(_resource_name, _resource)
    true
  end
end

This controller is mostly copied from a Stack Overflow answer where a good explanation of the code is already discussed. It is essentially adjusting Devise’s filters to allow an authenticated administrator to create a user then respond to the request with JSON if the front-end client specifies it in the Accept header. We’ve already configured Axios to ask for a JSON response so now Vue and Rails are speaking to each other nicely. You don’t need to make any further changes to Devise. You may be tempted to edit the devise.rb initializer in hopes of troubleshooting this workflow but that isn’t necessary and in some cases may break things.

Create a New User

In the Vue component simply make the POST request to the Rails app with the user credentials stored in the v-model for the form inputs:

methods: {
  onSubmit: function () {
    axios.post('/users', {
      user: {
        email: this.email,
        password: this.password
      }
    })
    .then(response => {
      // whatever you want
    })
    .catch(error => {
      // whatever you want
    })
  }
}

The form’s onSubmit method is called by Vue when specified in the template: <form v-on:submit.prevent="onSubmit">.

Conclusion

In this article I’ve only covered adding a new user through a Vue front-end as an administrator. However, this same concept can easily be applied to authenticating new sessions, editing user information, and allowing users to register on their own. Once Axios is configured properly to communicate with Devise it’s only a matter of overriding the gem’s controllers to achieve whatever functionality you want.

Nice and Neat

Mon, 06 Mar 2017 11:44:03 -0700

When I first coded this site in Jekyll I decided to make life easy and use Bootstrap to organize the web templates. The main advantage was the nice grid system, mobile responsive navigation, and quick time to launch. It served its purpose by helping me finish the project in a hurry, one weekend, and the results were fine.

As time passed I’ve had this notion in my mind that eventually I’d do a rewrite specifically to remove Bootstrap. The site’s layout is minimal and doesn’t justify the full weight of the framework. Also, some of the visual elements from Bootstrap appeared overly default for my taste and I never felt motivated to heavily restyle them. Finally, the responsive menu system was unnecessary because the site’s navigation is simple. Obviously, using a front-end framework has its advantages and can prevent reinventing the wheel. Why write my own custom grid system when there are countless others to choose from?

This past Saturday I noticed Thoughtbot had recently released version 2.0.0 of their lightweight grid system Neat. This was all the motivation I needed to start rewriting the site’s templates. I felt an unexpected sense of relief when I removed Bootstrap, almost as if I had regained control of the page. Neat doesn’t affect styling of page elements, it only focuses on the layout grid. Also, I did drop in the tiny Normalize.css library because it offers a sensible baseline to begin customizing the page.

Once again the rewrite took a weekend and that proved to me that using a heavy framework like Bootstrap isn’t always the time saver I believed it was. The real value in Bootstrap becomes more apparent when developing a prototype web app. It’s nice when all the buttons, menus, and tables are already formatted. It’s worth mentioning that I could pull in a customized version of Bootstrap that omitted the elements I didn’t need but I honestly never bothered to do that. I would guess that most quick weekend projects people put together just grab the full framework off the CDN.

So how did I like using Neat? I loved it! It’s an incredible approach to grids because it’s just a series of SASS mixins you drop into your stylesheets. You assign which items on your page are columns and that’s it. The result is a super lightweight stylesheet and a very flexible grid. It does have a small learning curve as the syntax is a bit unique but it’s not hard to learn. I’d use Neat again for projects both large and small. It’s the type of library that never feels like it’s taken over my project. Those are the libraries I plan to use whenever possible.

Use Operator Mono and Fira Code Together in Atom →

Thu, 02 Mar 2017 09:41:19 -0700

Sometimes I find a total gem on Medium that was published several months ago. This quick blog post by Peter Piekarczyk is an example of such a gem. Peter explains the virtues of Fira Code (spoiler: the cool ligatures) and Operator Mono (spoiler: the cursive) and how to use them together in Atom. I’ve tried this neat trick and I must admit it made my text editor look and feel very unique.

[Read on StephenHowells.net]

RethinkDB Joins The Linux Foundation →

Mon, 13 Feb 2017 12:10:45 -0700

Michael Glukhovsky:

RethinkDB is alive and well: active development can continue without disruption. Users can continue to run RethinkDB in production with the expectation that it will receive updates. The website, GitHub organization, and social media accounts will also continue operating. The interim leadership team will work with the community to establish formal governance for the project. Under the aegis of The Linux Foundation, the project has strong institutional support and the capacity to accept donations.

RethinkDB is one of the best examples of a thoughtful modern data store. Its survival and ongoing community contributions are an incredible outcome for this sadly overlooked product.

[Read on StephenHowells.net]

Rails 5 →

Fri, 01 Jul 2016 11:07:22 -0700

David Heinemeier Hansson:

It’s taken hundreds of contributors and thousands of commits to get here, but what a destination: Rails 5.0 is without a doubt the best, most complete version of Rails yet.

Rails continues to be the gold standard for iterative improvement and community involvement.

[Read on StephenHowells.net]

Use Elixir in CodeRunner 2

Sat, 18 Jun 2016 10:07:01 -0700

Recently, I’ve been tinkering around with the Elixir language and have quite enjoyed it. It does offer a nice interactive environment named IEX which functions quite similarly to IRB in the Ruby world. While IEX is a great place to get started I prefer to tinker with code in CodeRunner. It’s a hybrid of a text editor and the Terminal wrapped in a nice GUI. Mac based developers will feel right at home in CodeRunner. Basically, you compose code in an editor pane, complete with customizable syntax highlighting, and can view the results in an adjacent pane as they would appear in the shell. This workflow is fast and elegant.

CodeRunner doesn’t include Elixir out of the box but adding a new language is very easy. We’ll need to enter a few Terminal commands to start with:

# Install Elixir on OS X if you don't already have it with Homebrew.
brew update
brew install elixir

# Download the TextMate language grammar for Elixir.
curl -O https://raw.githubusercontent.com/elixir-lang/elixir-tmbundle/master/Syntaxes/Elixir.tmLanguage

Then, in CodeRunner’s preferences visit the “Languages” tab and click the plus sign in the lower left. Name the new syntax “Elixir” and then in the “Syntax Mode” dropdown box select Other…. Navigate to where you saved the Elixir.tmLanguage file earlier and select it. You’re almost finished. The following two screenshots display the required configuration to start using Elixir:

Once those settings are saved in CodeRunner you’ll have the option to start using Elixir. Just choose it in the dropdown box for a new file:

Prevent Widows in Jekyll and Middleman

Fri, 17 Jun 2016 09:04:24 -0700

One of my major pet peeves while reading Internet publications is when article titles (normally wrapped in header tags) display line breaks that result in unfortunate widows. A widow is when a line break occurs and a single lonely word is bumped to the next line, left to poke me in eye.

Luckily, this can easily be avoided in both Jekyll and Middleman. The goal is to determine if the title is at least two words in length and then replace the last space in the title with an  . This non-breaking space will keep the last two words married together so that in the event of a line break they will always bump down to the next line together.

The following code is a Jekyll filter that is used in Liquid templates. Simply place this filter in a file named filters.rb and save it to the _plugins folder (create this file and folder if you don’t have them):

# filters.rb

module Jekyll
  module WidowFilter
    def no_widows(title)
      if title.strip.count(" ") >= 2
        title.split[0...-1].join(" ") + "&nbsp;#{title.split[-1]}"
      else
        title.strip
      end
    end
  end
end

Liquid::Template.register_filter(Jekyll::WidowFilter)

The filter is easily invoked in a Liquid template:

<h1>{{ post.title | no_widows }}</h1>

The process is very similar in Middleman except it’s referred to as a helper instead of a filter. Place the following code in the config.rb file:

# config.rb

helpers do
  def no_widows(title)
    if title.strip.count(" ") >= 2
      title.split[0...-1].join(" ") + "&nbsp;#{title.split[-1]}"
    else
      title.strip
    end
  end
end

Middleman supports both Haml and ERB. To use the helper in Haml:

%h1= no_widows(article.title)

Or in ERB:

<h1><%= no_widows(article.title) %></h1>

If you view the source code for this site you’ll see that I use the same technique for my titles. It’s a nice touch and the type of attention to detail that makes a better experience for the reader.

Byword Previews in Marked 2 with AppleScript

Tue, 23 Sep 2014 15:55:44 -0700

I’m a big fan of both Byword and Marked 2. The Sweet Setup recently declared Byword to be their favorite Markdown writing app and deservedly so. While Byword does offer a Markdown preview to quickly ensure everything is formatted correctly, its functionality is limited. Marked on the other hand is a Markdown processing powerhouse. It offers many advanced options to both preview and export HTML such as MultiMarkdown and GitHub Flavored Markdown. If you maintain a blog it’s the best $14 you’ll ever spend. I wrote an AppleScript that allows me to author posts in Byword and automatically preview them in Marked with a simple hotket. I use command + shift + m.

tell application "Byword"
    activate
    set the_document to document 1
    save the_document
    tell application "Marked 2"
        set the_file to the_document's file
        open the_file
        activate
    end tell
end tell

I use Keyboard Maestro to invoke the script but FastScripts and Alfred can both do the job. Conveniently, it will automatically prompt you to save the file in Byword if you’re working on a brand new document. Once saved, invoking the script again will provide the desired result. If you’re an iA Writer fan¹ the same script will work by simply replacing the reference to Byword with iA Writer.

Which I’m not, long story. ↩︎