Things 3 →

∞

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.

Next.js 2.0 →

∞

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.[…]

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

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:

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

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 →

∞

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.