Category Archives: Open source

Rails Admin, a quick admin interface for your Rails app

Most apps have an admin interface, a place where the developers and special users can make changes to the database.

Creating your own admin interface is time-consuming, and can take the focus away from developing user-facing features. Figuring that admin interfaces have similar needs, frameworks have emerged that help get your started.

With Rails Admin, you can edit your database on dev and production, in a user-friendly way, without coding your own admin interface.

Its closest competition is Active Admin, which I see as too complex for a convenience tool.

Quick start

Add this to your Gemfile:

In a terminal window, while inside the path of your app, run

You now have an admin panel, located at http://yourapp.com/admin

Two essential steps remain.

One, make sure your models are defined correctly. Have you defined associations, like belongs_to, has_one, and has_many, as needed?

Two, restrict access to your admin interface. tell Rails Admin who should be allowed access.

How it looks

My app will deliver online courses. So far, it contains two tables:

  • Lessons
  • Components

Each component falls under a lesson. In Rails-speak, a component :has_one lesson, and one lesson :has_many components.

Rails Admin looks at my models and shows them in its left navigation. I never had to separately tell Rails Admin the structure of my database.

Rails Admin - left navigation

When I click on a table, I see its records.

Rails Admin - record editor

I can edit records. Since components are related to lessons, I can add components to lessons and associate each component to a lesson, all within Rails Admin.

Enjoy!

Rails Admin can help you launch faster by removing the need to develop your own custom admin interface.

At the start, either use a quick solution like Rails Admin or create your own custom admin interface. You can always move from Rails Admin to a custom interface later.

For more information about why you’d use Rails Admin, check out this presentation. Jump into the details by visiting the Rails Admin wiki.

Editor’s note

This is the beginning of a new series, Up and Running. We’ll tell you how to get up and running with several developer tools, quickly and easily. Get updates about what we cover next.

Markdown in Rails with Redcarpet

Why it’s awesome

Redcarpet is an extremely quick way to show Markdown as formatted HTML in your Ruby / Rails app.

Markdown is a simple way to format text. Think of it as an easier version of HTML.

In Markdown, this:

Becomes this:

Hello, this is bold and this is italic.

Users can enter Markdown into regular text fields, and you can store it as text in your database. Then, with Redcarpet, you can render the Markdown as HTML.

You might allow users to comment within your app using regular text or Markdown, and then show those comments with formatting.

Quick start

Add this to your Gemfile:

Store Markdown in a regular text field within your database. To the user, you can present a plain text field and link to a Markdown quick reference.

Once some Markdown is in your database, you can convert it to HTML in your controller…

… then show the resulting HTML in a view:

In the example above, we used the body of a comment as an example.

Check out the documentation and this video overview.

In closing

I love Markdown, and will use this tool whenever I need to maintain static, formatted content in my app.

Rolling out Markdown editing to end users is trickier, since many may not be familiar with it. However, allowing people to use Markdown is different from requiring it. If you allow Markdown in comments, for instance, place a note under your new comment field stating that Markdown is an option, and link to a quick reference.

The Up and Running series

This is part of the Up and Running series, showing you how to jump onboard to useful developer tools. Hear about what’s coming next by joining our e-mail list.

Gorgeous before-and-after pictures in WordPress

TwentyTwenty from Zurb makes it easy to show before-and-after pictures on a web page. As Zurb puts it, it showcases the differences between two images.

Now, it’s available as a WordPress plugin! Building it was fun, and I’ll post a plugin development tutorial soon based on the experience.

Here’s one example, the Blue Room in White House pre and post construction:

Images above courtesy Abbie Rowe / National Archives

And a makeover from a previous post on this blog:

Check out TwentyTwenty on the WordPress plugin directory, or watch this screencast to see how it works:

New: see a tutorial in Spanish, thanks to webempresa