Code-Chimp

A Useful Caps Lock Key

Fri, 26 Sep 2014 20:51:00 +0200

Caps Lock is such a useless - and at times annoying - key with such a prominent position that it just begs for a remap. If you happen to be a vim user, like I recently became, it’s just the perfect place for an escape key.

It’s pretty easy to do with a little utility called Seil. First we need to deactivate the the Caps Lock. In the System Preferences under Keyboard you click on Modifier Keys in the bottom right and set Caps Lock Key to No Action.

Having Seil installed and running we select the box next to Change Caps Lock and set the code to 53 for the escape key.

And that’s it!

CSS Columns and Hyphenation

Fri, 14 Feb 2014 21:17:00 +0100

Whilst I generally do not condone making websites look like newspapers there are in fact some instances where columns with justification do look kind of nice¹ and there are lots of people who seem to like it. Some time ago I had to do a site with columns at work and was delighted to learn columns and hyphenation can, in theory, be done with CSS alone. Unfortunately not all browser suppot those features yet. I’ll first describe how one would do this with CSS alone and then we’ll use JavaScript to help the older browsers out.

CSS Only

Let’s for example take this piece of HTML:

<p class="text-justify hyphens three-columns"><!-- some text --></p>

As you can see my paragraph has three CSS classes. The first one just justifies the text:

.text-justify {
text-align: justify
}

The next one makes sure there is hyphenation in as much browsers as possible:

.hyphens {
-ms-word-break: break-all;
word-break: break-all;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

With the last one I tell the browser to segment the paragraph in three columns and define the gap between those columns:

.three-columns {
-moz-column-count: 3; /* Firefox */
-webkit-column-count: 3; /* Safari and Chrome */
column-count: 3;
-moz-column-gap: 30px; /* Firefox */
-webkit-column-gap: 30px; /* Safari and Chrome */
column-gap: 30px;
}

In a perfect world this would be all one needed to do but Opera doesn’t support hyphenation and IE9 or earlier neither supports columns nor hyphenation.

JavaScript to the Rescue

Let’s start with the hyphenation. Hyphenator.js is a script that can do the hyphenation for you. It offers an mergeAndPack-Tool where you can click together the languages and settings for you’re site and get a minified script. To get it running with our HTML you have to specify hyphens as the classname under Element Selection. Now create the scrip, just copy and paste it into a new text-file and give it the name hyphenate.js and include it in your website:

<script src="hyphenate.js" type="text/javascript"></script>

That’s pretty much all you have to do to get it running but I’d do one more thing. Almost at the end of the script you can find the bit Hyphenator.config({classname:'hyphens'});. Change that to Hyphenator.config({classname:'hyphens',useCSS3hyphenation:true});. This tells the script to let the browser do the hyphenation via CSS if it is able, which is faster then doing it with JavaScript. With this in place you can safely remove the CSS for the class hyphens. The script will do that for you now.

All that’s left is the columns in IE9 or earlier. For that we’ll use the jQuery plugin Columnizer. Since IE supports conditional comments, we’ll use this to load the script only in the browsers we need to:

<!--[if lte IE 9]>
<script src="jquery.columnizer.js" type="text/javascript"></script>
<script>
 $(function(){
 $('.three-columns').columnize({columns: 3});
 });
</script>
<![endif]-->

With this only IE’s that are 9 or earlier will load the content and all other browser will think it’s just a comment.

That’s it. Now you should be set for pretty much all the recent browsers that are still being used.

That’s it. You won’t here anything nicer from me about columns in the internet. ↩︎

Customizing the Dock

Mon, 27 Jan 2014 20:43:00 +0100

Between setting up a work iMac, buying a new MacBook and reinstalling my iMac after it’s harddrive gave up, I’ve set up quite a few Macs for me to work on lately. Without really thinking about it I’ve always done the same thing when I was waiting for some development dependencies to install: pin my dock to the corner and add a divider to it. I find it makes the dock look so much cleaner and is easily done with a few Terminal commands.

Put Your Dock In The Corner

By default, the dock is pinned to the middle of either the bottom or the side - wherever you chose to put your dock. You can however pin it to the start or end with a simple Terminal command:

# Pin it to the start
defaults write com.apple.dock pinning -string start
# Pin it to the end
defaults write com.apple.dock pinning -string end
# Return it to the middle
defaults write com.apple.dock pinning -string middle

Once you’ve changed the setting just restart your dock with your Terminal:

# Reset the dock
killall Dock

Dock Dividers

You can create dividers on the left or right side of your dock. Just type one of the following commands:

# Left side
defaults write com.apple.dock persistent-apps -array-add '{tile-data={}; tile-type="spacer-tile";}'
# Right Side
defaults write com.apple.dock persistent-others -array-add '{tile-data={}; tile-type="spacer-tile";}'

You can add as many dividers as you like but you’ll need to restart the dock again to see the changes:

# Reset the dock
killall Dock

Once the dock is reset, you’ll see dividers which you’ll be able to drag throughout the dock. I mainly use it to seperate those apps I always keep in the dock from other currently opened apps.

Steal Bluetooth Keyboard With Alfred

Tue, 12 Nov 2013 20:04:00 +0100

I recently bought one of the new Retina MacBook Pros and wanted to use my old 27” iMac as display. I mean, it would be a sin to waste that big gorgeous screen, right? Fortunately my iMac is the first model to be able to be used in Target Display Mode. So I got a Mini-Display-Port cable and voilà, I now have a nice big display that doubles as a media server in the background, which makes the 250GB SSD in my rMBP more then big enough.

Since I wanted the iMac to be usable when it’s not used in TDM, this setup would require two sets of keyboards and trackpads, which was just a no-go for me. After a bit of googling I found exactly what I needed in this blog post. Basically you use a script on your MB to toggle off the Bluetooth on the iMac and turn your MB’s BT on to essentially steal the iMacs keyboard and trackpad. Before you leave with your MB, you do it the other way around and the BT devices can reconnect with the iMac. To get this running you first need to configure password-less ssh login between the two macs. But fortunately there a plenty instructions to find. Then you need to fill in the your iMac’s network name, which you can find under System Preferences -> Sharing, in the ssh commands of the scripts and you are good to go.

Even though I’ve almost always a terminal window opened somewhere, I found it a bit tedious to trigger the scripts there. That’s why I made an Alfred workflow with them. Now I only have to type steal keyboard or release keyboard into Alfred. So much nicer.

Download Alfred Workflow

XML Import in ActiveAdmin (Part 2)

Sat, 13 Jul 2013 12:00:00 +0200

… or a journey to the wonderful world of regular expressions.

In Part 1 I showed you how to build a simple XML import form in ActiveAdmin. But what if our app isn’t quite that simple as I described there. It may look something like this:

Since we have multiple podcasts I need a podcast model with name, description and artwork. The artwork columns were generated by Paperclip and the slug is used by FriendlyId. The episode model is pretty self-explanatory, I think.

Parse Podcast, Episode # and Title

The XML I got from Wordpress looks something like this:

<channel>
<!-- Some stuff -->
<item>
<title>Celluloid 018: Guy Ritchie</title>
<link>http://www.talesofinterest.de/celluloid-018-guy-ritchie/</link>
<pubDate>Fri, 19 Oct 2012 07:48:18 +0000</pubDate>
<dc:creator>code-chimp</dc:creator>
<guid isPermaLink="false">http://www.talesofinterest.de/?p=745</guid>
<description></description>
<content:encoded>A bunch of Important stuff</content:encoded>
<!-- Some meta stuff -->
</item>
<!-- Some more items -->
</channel>

We need to figure out how to get the podcast name, episode number and episode title out of this. The easy way would be, of course, if we had tagged the posts of each podcast with each own category. Unfortunately we didn’t do that. But fortunately we titled our posts all following the same formula: podcast_name episode_nr: episode_title. So we can take the title and scan it with regular expressions¹ for our three components:

For our podcast name we scan for any amount of characters which have a whitespace and three digits behind them.

str = "Celluloid 018: Guy Ritchie"
=> "Celluloid 018: Guy Ritchie"
str.scan %r{
 ( # start capture
 .+ # one or more of any single character
 ) # end caputure
 \s\d # followed by a whitespace and a digit
}x
=> [["Celluloid"]]

In short that would be:

str.scan(/(.+) \d+/)
=> [["Celluloid"]]

And since scan returns an array and capture wraps another array around the matches, we have to specify which element of the array we want to get the string:

str.scan(/(.+) \d+/)[0][0]
=> "Celluloid"

For the episode number we only have to scan for the first match of three digits followed by a colon and turn the match into an integer.

str.scan(/(\d+):/)[0][0].to_i
=> 18

And for the episode title we scan for everything after a colon and a whitespace:

str.scan(/:\s(.+)/)[0][0]
=> "Guy Ritchie"

Including this into our import_xml action, it now looks like this:²

collection_action :import_xml, method: :post do
items = Nokogiri::XML(params[:import][:file]).xpath("//channel//item")
items.each do |item|
podcast_name = item.at_xpath("title").text.scan(/(.+) \d+/)[0][0]
podcast = Podcast.find_by_name(name) || Podcast.create!(name: name)
Episode.create!(podcast: podcast,
number: item.at_xpath("title").text.scan(/\d+/)[0].to_i,
title: item.at_xpath("title").text.scan(/:\D(.+)/)[0][0],
description: item.at_xpath("content:encoded").text,
created_at: item.at_xpath("pubDate").text)
end
redirect_to admin_podcasts_path, notice: "Episodes imported successfully!"
end

Converting the Episode Description to Markdown

Like in this blog, I’m doing all the writing on the podcast page in Markdown and while most Markdown parser will let HTML pass through, I’d rather have all my podcast descriptions in the same format. I’ve tried a few gems that do HTML to Markdown conversion and none of them were perfect for this use-case.³ The one getting closest was html2markdown, to which I made a few changes until I was satisfied. Let’s add the gem to our Gemfile:

gem 'html2markdown', git: 'git@github.com:coding-chimp/html2markdown.git'

Run the bundle install command and use it in the import method:

collection_action :import_xml, method: :post do
items = Nokogiri::XML(params[:import][:file]).xpath("//channel//item")
items.each do |item|
podcast_name = item.at_xpath("title").text.scan(/(.+) \d+/)[0][0]
podcast = Podcast.find_by_name(name) || Podcast.create!(name: name)
description = HTMLPage.new :contents => item.at_xpath("content:encoded").text
description = description.markdown
Episode.create!(podcast: podcast,
number: item.at_xpath("title").text.scan(/\d+/)[0].to_i,
title: item.at_xpath("title").text.scan(/:\D(.+)/)[0][0],
description: description,
created_at: item.at_xpath("pubDate").text)
end
redirect_to admin_podcasts_path, notice: "Episodes imported successfully!"
end

That’s it. Pretty easy, wasn’t it?

Rubular is a very cool site on which you can test your regular expressions. ↩︎
Due to the structure of my app, the form actually is in my podcasts index and not the episodes index as said in the last post. That doesn’t change the code, though. ↩︎
It’s probably just because we’re not working with clean HTML here. ↩︎

The Seinfeld Calendar

Mon, 10 Jun 2013 12:00:00 +0200

Software Developer Brad Isaac wrote in 2007 on Lifehacker about Jerry Seinfeld’s Productivity Secret. Seinfeld told him the best way to write better jokes was to write every day. To maintain this habit, you buy yourself one of those big wall calendars that have the whole year printed on it and hang it on a prominent wall. Every day after doing some writing, you get to put a big red X over that day.

“After a few days you’ll have a chain. Just keep at it and the chain will grow longer every day. You’ll like seeing that chain, especially when you get a few weeks under your belt. Your only job next is to not break the chain.”

“Don’t break the chain.”

I read about this in january when GitHub introduced Contributions and with it the Contributions Calendar, which pretty much follows this method. Every time you commit to a project’s default branch or the gh-pages branch, open an issue, or propose a pull request it get’s marked in the calendar. I especially like that they show the current and longest streak. Somehow seeing a streak of 0 days makes me even more bummed then seeing the cain broken.

In the last few months I moved more and more stuff over to GitHub and even my workplace moved all their repositories over. Since literally all my code is now landing on GitHub, I’ve seen this calendar having a big impact on me. In the last two months there were only three days I didn’t commit any code.¹

And because I like it so much, I of course added a GitHub Streak endpoint to my status-board-widgets app. Check it out.

One of those days, I actually committed something to a not-master branch. I don’t really get, why they only count the master and gh-pages branches. ↩︎

Website Monitoring With Vigil

Mon, 27 May 2013 12:00:00 +0200

I read about Vigil on the Status Board Sources page and am using it for about a week now. It’s mainly an iPhone app that does two things: it monitors websites and sends a push notification if they are not responding. It has a free one-month trial and after that costs $9.99 a year for an unlimited number of websites. I subscribed after a few days because I really liked the app and was delighted to see the year I paid for will nonetheless begin after the one-month trial is over. Classy move.

On the home screen of the app is a list of all your websites with HTTP status codes and ping time. Tapping on a website a side panel will slide over and show some more detailed data like the download speed and a graph for the ping times of the last hour.

And finally they even generate you a link for a Status Board table showing the status codes, names, ping time and speed of all your websites.

As you can see, it uses the standard Status Board table layout, which I find humongous. So I added Vigil to my Sinatra Status Board app and made a table with a more reasonable size.

Status Board Widgets

Tue, 21 May 2013 12:00:00 +0200

As you may have noticed in the last two posts, I’m really loving Panic’s Status Board. The only drawback is I’m not quite pleased with my setup and am always fiddling with it. Currently my Status Board is displaying the URI.LV Subscriber table I wrote about earlier, a table of my urgent tasks from Things as described in this blog post and a traffic graph of my gaug.es. All of them were generated by scripts on my home computer, that write CSV or JSON files in my public Dropbox folder. My computer always needing to be on and scheduling the scripts or having to edit the script every time I wanted to see something slightly different was starting to bug me, which is why I decided to write a little Sinatra app to generate the data for my Status Board.

The App is on GitHub and you can feel free to do with it whatever you like. How to set it up or use it, is described in the readme. As of now it has endpoints for traffic graphs of one or multiple gauges and graphs or tables for one or multiple feed statistics from URI.LV. I’m sure there will be more in the future, when I get new ideas for my Status Board. I would, of course, also be delighted, if you want to add a feature by yourself.

Simple Rails API for GeekTool and Status Board

Wed, 08 May 2013 12:00:00 +0200

Inspired by Brett Terpstra’s series of posts about GeekTool I’ve been using the iheartquotes API to display quotes on my desktop for quite some time now. So long, as a matter of fact, that I was starting to get bored by seeing the same quotes all the time. In comes this movie-trivia page I made a long time ago. It’s basically the first rails app I ever wrote, so really nothing special, but since I’ve been posting those little titbits almost daily for over two years now, they amassed to quite a nice count. The ideal target for my Geeklet.

I pretty much modelled the API for my page after the iheartquotes API, but since I’m currently playing with Status Board I also added an API call for status board.

We’re starting by adding the needed routes and controller actions:

MTotD::Application.routes.draw do
get 'api/random', to: 'trivia#random', defaults: { :format => 'text' }
get 'api/status_board', to: 'trivia#status_board'
end

class TriviaController < ApplicationController
def random
@trivia = Trivia.published.order("random()")
if params[:min_characters]
@trivia = @trivia.where("length(body) > ?", params[:min_characters])
end
if params[:max_characters]
@trivia = @trivia.where("? > length(body)", params[:max_characters])
end
if params[:min_lines]
@trivia = @trivia.select { |trivium| word_wrap(trivium.body, :line_width => 70).lines.count + 1 >= params[:min_lines].to_i }
end
if params[:max_lines]
@trivia = @trivia.select { |trivium| word_wrap(trivium.body, :line_width => 70).lines.count + 1 <= params[:max_lines].to_i }
end
@trivia = @trivia.first
respond_to do |format|
format.text
format.html { render layout: false }
end
end
def status_board
render layout: false
end
end

With the random action we are giving the user a few options to filter the trivia and are then loading a random one of the remaining. For the min_lines and max_lines filter we’re calling word_wrap on our text, which inserts a line break every 70 characters.¹ This is to ensure that every line has about the same length. The action defaults to text format because it’s more useful for GeekTool, but can also be called as HTML, which we’ll use for the Status Board API call. Furthermore we have to make sure that our two HTML views won’t render the application layout, if we want them to look shiny in Status Board.

Now we create our random.text.erb view:

<% if  @trivia.present? %>
 <%= raw word_wrap(@trivia.body.gsub(/\r\n\r\n/, "\r\n").gsub(/[*,_]/, ''), :line_width => 70) %>
 — <%= raw @trivia.film.title %>
<% end  %>

First we’re making sure we’re not calling the attributes of a nil object,² then we just word_wrap the trivia text as mentioned above and add a line with the film title. I’m also removing empty lines and some Markdown markup.

The random.html.erb view looks pretty similar:

<% if  @trivia.present? %>
 <div id="trivia">
<%= markdown(@trivia.body + " <span>— " + @trivia.film.title + "</span>") %>
 </div>
<% end  %>

The only difference here is, that I don’t word_wrap the trivia, but instead call my markdown helper method to parse it to HTML.

All that’s left is the status_board.html.erb view. Since Status Board won’t refresh our side automatically, we’ll have to handle this ourselves:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-control" content="no-cache" />
<title>Trivia</title>
<style type="text/css">
...
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function refresh() {
var req = new XMLHttpRequest();
req.onreadystatechange=function() {
if (req.readyState==4 && req.status==200) {
document.getElementById('trivia-container').innerHTML = req.responseText;
}
}
req.open("GET", 'http://movietriviaoftheday.com/api/random.html?max_lines=6', true);
req.send(null);
}
function init() {
refresh()
var int=self.setInterval(function(){refresh()},600000);
}
</script>
</head>
<body onload="init()">
<div id="main">
<div id="trivia-container"></div>
</div>
</body>
</html>

So rather than loading a view with trivia in it, we load an empty page, replace the #trivia-container with the contents of our random.html.erb view via JavaScript and refresh them every 10 minutes.³

And that’s our simple API.

If you want to try a Geeklet with random trivia from my page just create a new shell Geeklet and use the following one-line command:

$ curl -s 'http://movietriviaoftheday.com/api/random?max_lines=6'

Adjust the font and colour to your liking and the result could look like this:

On you Status Board you just need to create a new Do-It-Yourself panel and point it at:

http://movietriviaoftheday.com/api/status_board

You can also check out the API Documentation.

Wraps the text into lines no longer than line_width width. This method breaks on the first whitespace character that does not exceed line_width (which is 80 by default). ↩︎
Since @trivia could become nil duo to the filter options. ↩︎
Or 600000 milliseconds. ↩︎

URI.LV Status Board Panel

Thu, 02 May 2013 12:00:00 +0200

After my last invoice got paid I rewarded myself with Panic’s Status Board and were thinking about, what I actually want to put on it. Since Google is sunsetting Google Reader in july, I lost my last bit of faith in Feedburner¹, but since I like me some stats, I stumbled upon URI.LV as an alternative. URI seems much less intrusive as Feedburner, is easier too use, has good documentation and a super simple API. They even generate a JSON file for every feed, which you could use in Status Board for a graph, but since I’m not keen on having a panel for every feed, I took the DIY route.

First we need to prepare URI so that we can use the API. Click on ‘API’ in the navigation and then on ‘New app’ in the sidebar. Having created the app we get an API key and can generate a token, which we’ll both need.

The return of the API call will look something like that:

{
"stats": [
{
"day": 1364425200,
"greader": 742,
"other": 13,
"direct": 186,
"newsletter": 21
},
],
"code": 1
}

We now write a little ruby script, which will do all the heavy lifting:

require 'net/https'
require 'uri'
require 'json'
require 'csv'
require 'titleize'
USERNAME = 'Code-Chimp'
API_KEY = '5b87661cd79e'
API_TOKEN = 'b0daafa44009'
feeds = ['code-chimp', 'celluloid', 'recordcase', 'tales', 'escaping-to-neverland']
uri = URI.parse("http://api.uri.lv/feeds/subscribers.json")
CSV.open("/Users/#{USERNAME}/Dropbox/Public/uri_statusboard.csv", "w") do |csv|
csv << ['80%', '20%']
feeds.each do |feed|
params = { :key => API_KEY, :token => API_TOKEN, :feed => feed }
uri.query = URI.encode_www_form(params)
response = Net::HTTP.get_response(uri)
stats = JSON.parse(response.body)['stats'].first
subscribers = stats['greader'] + stats['other'] + stats['direct']
csv << [feed.titleize, subscribers]
end
end

As you can see I first created an array with the URI feed names, then I opened an CSV file in my public Dropbox folder, made an API call for every feed, added the subscribers from the various sources together and wrote them in the CSV file. Notice that you’ll have to fill in your own data for the USERNAME, API_KEY and API_TOKEN values.²

With this we can already load the data in the standard Status Board table. Just add a table to your Status Board and point it at the url of the csv file. All that is left to do is schedule the script to update the file. I just created a new job with Lingon named it org.code-chimp.uri_statusboard and told it to run /usr/bin/ruby /YOUR/PATH/uri_status_board.rb every 20 minutes.³ Of course you could also create a launchd job with in terminal.

That’s pretty much it. I personally found the table a bit big so I created a HTML file that loads the data from the CSV via JavaScript. Since I’m not that good with JavaScript I more or less piggybacked on this blog post by Gunther Groenwege to load the CSV and this example by Panic to get the auto-refresh running.

The finished product looks something like this in Status Board:

Feel free to use the file.

It’s kind of nice to have some new feeds in there to see the subscriber count rise right from the beginning…⁴

Update

@maximevalette⁵ told me on APN, that URI.LV’s analytics refresh every day and there even is a countdown on the feed’s dashboard.⁶ So letting the script run every 20 minutes would be a bit redundant. Just check when the next update will be and schedule the script to run a couple of minutes after the update every day.

Not that Google has done much with lately anyway… ↩︎
Lines 7-9 ↩︎
URI Premium refreshes the feed every 20 minutes. I’m not really sure how often the statistics are being updated. ↩︎
Or at least I hope they do. ↩︎
The creator of URI.LV. ↩︎
Yup, apperently I’m blind. ↩︎

Responsive Design Bookmarklet

Wed, 24 Apr 2013 12:00:00 +0200

Recently I heard about this Responsive Design Bookmarklet in Brett Terpstra’s podcast Systematic #37 and I since then I used it a lot.

When you click it, it basically adds a little header to the currently open page, which shows you the dimensions of your browser window and let’s you simulate screen sizes of an iPad and iPhone.¹ The only downside is that it still uses the old iPhone screen size, which isn’t really a problem in portrait orientation but can be a bit misleading in landscape orientation.

Since doing responsive design can be a bit of a bother, this bookmarklet made it a lot easier on me.

portrait and landscape orientation ↩︎

Warmer Colors With f.lux

Tue, 22 Jan 2013 12:00:00 +0100

This is something I really couldn’t live without anymore. f.lux is a little utility app available for Mac, Windows, Linux and iOS¹ which makes the color of your display adapt to the time of the day. One hour before sunset it slowly begins to make the colors of your display warmer. It does that so smooth, that you don’t even notice it’s happening.

On their website they are talking about how blue light can keep you up late, hence f.lux actually helps you sleep better. I don’t really know about that, but I have definitely noticed my eyes being much less strained since using f.lux. Additionally, turning it off has has become a bit jarring by now. You should really try it out!

if you’re into jailbreaking. ↩︎

Easier Image Markup With Redcarpet

Sat, 12 Jan 2013 12:00:00 +0100

So my girlfriend wants to start a blog and being the awesome boyfriend I am, I offered to write it for her. Writing a simple blog in rails isn’t that much work and having an easy to set up blog app lying around can’t hurt, right? Today while trying to make posting as frictionless as possible I stumbled upon something really cool I wasn’t really aware of before. I’m kind of forcing my girlfriend to use Markdown¹ and am using Redcarpet to parse it. On the bottom of the post form I’m enabling the user to upload pictures with Paperclip she want’s to use in the post but wasn’t really sure how to make easy to embed them in the post content. In come custom Redcarpet renderer. They basically enable you to rewrite the methods used by Redcarpet and give them your own spin.

But let’s start from the beginning and add all the gems we need to the Gemfile:

gem 'redcarpet'
gem 'paperclip', '~> 3.0'
gem 'paperclip-meta'

Redcarpet and Paperclip should be clear and Paperclip Meta writes the dimension of the Paperclip styles in an extra column which makes them nicely accessible as you’ll see later.

Now let’s create the models:

$ rails g model Post title:string content:text
$ rails g model Image name:string file:attachment file_meta:text post_id:integer

And edit them:

class Post < ActiveRecord::Base
attr_accessible :content, :title, :images_attributes
has_many :images, :dependent => :destroy
accepts_nested_attributes_for :images, allow_destroy: true
end

class Image < ActiveRecord::Base
attr_accessible :file, :post_id, :name
belongs_to :post
has_attached_file :file, :styles => { :thumb => "140>x140" }
end

Now normally an image would like like this in Markdown:

![title](path/to/image "alt text")

I thought it would be cool if the user could give the image a name and I could use this name to generate the link. Furthermore it would be cool if the user could set a size and a class² for the image while still using Markdown. That could look something like this:

![image.title](thumb|right "alt text")

The size “thumb” of course meaning the Paperclip style thumb nad right being a html class, that floats the image to the right side.

Now we’ll create our custom Redcarpet renderer to process our new markup. Initially I had a helper method in the ApplicationHelper for Redcarpet:

module ApplicationHelper
def markdown(text)
Redcarpet::Markdown.new(Redcarpet::Render::HTML.new(:hard_wrap => true), :space_after_headers => true, :autolink => true, :strikethrough => true, :superscript => true).render(text).html_safe
end
end

But now I’d rather put this and the custom renderer in it’s own helper module.

module RedcarpetHelper
def markdown(text)
Redcarpet::Markdown.new(HTMLBlockCode.new(:hard_wrap => true), :space_after_headers => true, :autolink => true, :strikethrough => true, :superscript => true).render(text).html_safe
end
end
class HTMLBlockCode < Redcarpet::Render::HTML
include Sprockets::Helpers::RailsHelper
include Sprockets::Helpers::IsolatedHelper
include ActionView::Helpers::UrlHelper
def parse_media_link(link)
matches = link.match(/^(\w+)?\|([\w\s\d]+)?/)
{
:size => (matches[1] || 'original').to_sym,
:class => matches[2]
} if matches
end
def image(link, alt_text, title)
size = nil
klass = nil
if nil != (parse = parse_media_link(link))
image = Image.find_by_name(title)
if image
size = image.file.image_size(parse[:size])
link = image.file.url(parse[:size])
klass = parse[:class]
image_tag(link, :size => size, :title => title, :alt => alt_text, :class => klass)
else
""
end
end
end
def link(link, title, content)
klass = nil
if nil != (parse = parse_media_link(link))
image = Image.find_by_name(title)
if image
link = image.file.url(parse[:size])
klass = parse[:class]
link_to(content, link, :title => title, :class => klass)
else
""
end
end
end
end

Here we’ve overwritten how Redcarpet generates an image_tag. First it’s parsing the link for paperclip style³ and class, than it searches the image by title and generates an image_tag with the url of the image file, the dimensions of the chosen style⁴, the title, alt text and class. Since our new renderer inherits from the existing renderer and only changes one method, we now can just exchange the Redcarpet::Render::HTML bit in the markdown() helper method with our renderer HTMLBlockCodeand are done.

Helpful links:

I see it as an educational journey for her… not sure if she’ll see it the same way. ↩︎
For right and left float for instance. ↩︎
or the original image size if left blank. ↩︎
Paperclip Meta makes it possible to get the size like this. ↩︎

XML Import in ActiveAdmin (Part 1)

Tue, 04 Dec 2012 12:00:00 +0100

I’m currently working on a new home for the Podcast I’m co-hosting. Since I won’t be the only one posting on the page, Octopress isn’t really a choice. So I’m going with with Rails. The design is almost completely made with Twitter Bootstrap, Since design isn’t my strong suit, and I’m using ActiveAdmin for the admin interface.¹ I’m thinking about making the finished app available for others, but at the moment I’m not really sure how exactly that will be. More about that in the future.

One of the troublesome things when moving a page is taking all the existing data with you. Our current side is running on Wordpress, which allows you to export your posts and pages as XML. In this post I’ll explain how we will put two little forms in the admin interface with which we can choose a file to import from, parse the XML and create our pages or episodes. In the next post we’ll see, if we can’t improve the parsing a bit.

Page Import

Let’s start with the page import.

To parse the XML we’ll use Nokogiri, which we need to add to our Gemfile:

gem 'nokogiri'

And run bundle install.

Then we’ll create the partial app/views/admin/_import.html.erb with the form we’ll use to initiate the import. The form should call the import_xml action, which we’ll write later, and should allow us to submit a file. Since Formtastic is already installed for ActiveAdmin, we might as well use it:

<%= semantic_form_for :import, :url => { :action => "import_xml" } do |f| %>
 <%= f.input :file, :as => :file, :label => false %>
 <%= f.actions do %>
<%= f.action :submit, :as => :button %>
 <% end %>
<% end  %>

Then we render the partial in a sidebar on our pages admin index²:

sidebar "Import", :only => :index do
simple_format("Import pages from a XML file.") + render("admin/import")
end

And now we need to write the action. The XML for your exported pages (or posts) you get from Wordpress looks something like this:

<channel>
<!-- Some stuff -->
<item>
<title>Impressum</title>
<link>http://www.talesofinterest.de/impressum/</link>
<pubDate>Wed, 22 Sep 2010 14:16:25 +0000</pubDate>
<dc:creator>code-chimp</dc:creator>
<guid isPermaLink="false">http://www.talesofinterest.de/</guid>
<description></description>
<content:encoded>A bunch of Important stuff</content:encoded>
<!-- Some meta stuff -->
</item>
<!-- Some more items -->
</channel>

What we need to do is take the title and content:encoded of every item, create a new page with it and redirect to the pages admin index. In our app/admin/pages.rb we do the following:

collection_action :import_xml, :method => :post do
items = Nokogiri::XML(params[:import][:file]).xpath("//channel//item")
items.each do |item|
Page.create!(:title => item.at_xpath("title").text, :content => item.at_xpath("content:encoded").text)
end
redirect_to admin_pages_path, :notice => "Pages imported successfully!"
end

That’s it for our page import.

Episode Import

If you have only one podcast and modelled your episodes like a blog post, it’s actually pretty straightforward, too.

We’ll be using the same partial but change the import_xml a bit, so that the created_at stamp of our episodes equals the pubDate. Let’s do that in our app/admin/episodes.rb:

sidebar "Import", :only => :index do
simple_format("Import episodes from a XML file.") + render("admin/import")
end
collection_action :import_xml, :method => :post do
items = Nokogiri::XML(params[:import][:file]).xpath("//channel//item")
items.each do |item|
Episode.create!(:title => item.at_xpath("title").text,
:description => item.at_xpath("content:encoded").text,
:created_at => item.at_xpath("pubDate").text)
end
redirect_to admin_podcasts_path, :notice => "Episodes imported successfully!"
end

That is all.

In the following post I will show you, how the episode import could look like, if you app is structured a bit more complex.

Mainly because I used it a ton at work. RailsAdmin does look really cool, too. ↩︎
Note that it won’t actually work yet. It will return an error because we haven’t written the import_xml action yet. ↩︎

LiveReload

Mon, 26 Nov 2012 13:00:00 +0100

I’m not even sure how exactly I came across this review from Brett Terpstra about LiveReload since it’s almost a year old now, but it stuck with me. Being the poor little student that I am, it took me about a month to actually spent the 8,99€ (US $9.99) for LifeReload, but boy, it is worth it.

LiveReload is a tool for web designers, which reloads your web browser(s) if any change on the site occurs. Just point LiveReload at the site’s folder and install the browser extension or add a JavaScript snippet to the site to get it working. Sure, editors like Coda or Espresso got that feature build in¹ but they are also a bit more costly. LiveReload brings it to every editor you already own.²

While it’s easier to go with the browser extension, choosing the JavaScript snippet can save you a bunch of time if you’re doing anything with responsive design. Let the site run on an apache web server on a virtual host³, visit it with the browsers of your computer and all mobile devices and you can instantly see how your site behaves on all those devices without having to reload a single page.⁴ When I fiddled with this site I had it loaded up on my iMac, iPhone and iPad. It worked flawlessly and was really cool.

Additionally LiveReload can compile SASS, LESS, CoffeScript and others⁵ or run any shell command after changes occurred and before the browser refreshes. This setup certainly bears endless possibilities.

and it is probably a bit faster as well. ↩︎
or will own. ↩︎
If you don’t know how to do that, I’d recommend you take a look at MAMP. Point MAMP at the folder with the site, start the server and the the site is reachable from your network. ↩︎
The code you get from the app works only if your site is running on your local computer. If it’s running on another server, you need to specify the IP of your local computer. ↩︎
Eco, HAML, IcedCoffeeScript, Jade, Compass, Slim & Stylus. ↩︎

Pow and Anvil

Mon, 26 Nov 2012 12:00:00 +0100

Pow is a zero-config and super easy to setup rack server for Mac developed by 37signals. Besides being easy to use, it enables you to have multiple Rails apps¹ running simultaneously, without having to remember all those pesky ports, by giving the app a hostname based on a symlink you chose and a .dev extension.

And Anvil makes Pow even easier to use. Just open it up from your menubar, point it at a folder, type in a name and the pow server is running.

Or static HTML sites like your octopress blog. ;) ↩︎

Footnotes in Octopress

Thu, 22 Nov 2012 12:00:00 +0100

Today I went down a little rabbit hole. I wanted to be able to include footnotes in my posts. And though I promptly found the footnote-octopress plugin to do just that, that wasn’t enough for me. I like footnotes, but I don’t really want to scroll down on longer posts just to read them. That just takes you out of the reading experience. What I wanted was a JavaScript that generates a popup on mouseover. After a bit of digging I found just that on Lukas Mathis’ blog. Unfortunately it took me some time to get it working.¹ The problem was that the required jQuery didn’t get along with Ender, which is used quite a bit in the classic Octopress theme.² The solution was to override the $-function for jQuery with

jQuery.noConflict()

and exchange all the $ with jQuery.

I forked the plugin and added the script if you want to give it a try. Check it out on Github.

~~As I was writing this I noticed the markdown syntax isn’t working in the footnotes. I’ve got to check into that sometime…~~ - Done.

I really should learn to write JavaScript myself… or at least understand it better. ↩︎
Yep, I don’t use the classic theme, but my sidebar is borrowed from it. ↩︎

Blogging With Octopress

Mon, 12 Nov 2012 12:00:00 +0100

While blogging platforms like Squarespace are awesome, they carry a lot baggage. I don’t need all the fancy plugins, user management or a database which slows the whole site down and makes it prone to getting Fireballed. That’s pretty much why I’m taking the route many developers seem to be taking lately. Github Pages and Jekyll/Octopress.

What is Jekyll and Octopress?

I’ll just let the creators explain it themselves:

Jekyll is a simple, blog aware, static site generator. It takes a template directory (representing the raw form of a website), runs it through Textile or Markdown and Liquid converters, and spits out a complete, static website suitable for serving with Apache or your favorite web server. This is also the engine behind GitHub Pages, which you can use to host your project’s page or blog right here from GitHub. – Jekyll wiki

Octopress is a framework designed by Brandon Mathis for Jekyll […]. To start blogging with Jekyll, you have to write your own HTML templates, CSS, Javascripts and set up your configuration. But with Octopress All of that is already taken care of. Simply clone or fork Octopress, install dependencies and the theme, and you’re set. – Octopress

First Impression

OK, I’m admittedly not that far in the game yet, but it looks really slick thus far. Setting it up was really easy and there are some really nice looking 3rd party themes. Plus it is mainly written in Ruby, my language of choice, which enables me to fiddle with it, if needed. If you’re more comfortable in PHP you might want to check out Marco Arment’s SecondCrack.