Howto: Toggle design change-sets with a keyboard shortcut

bep · November 8, 2014, 2:28pm

Again a tip that is slightly off-topic, but it’s enabled by Hugo’s features. I have a Ruby-script attached to a keyboard short-cut that round-robins through a set of stylesheet-changesets, loaded into my browser with livereload.

I wrote a detailed blog-post about this IN NORWEGIAN, so a bonus to you if you know that language:

But the main thing about this is THE IDEA and the outlines in this script of mine:

github.com

bep/bepsays.com/blob/master/script/toggle_styles.rb

#!/usr/bin/ruby

#
# This script performs replacement of a set of LESS-imports in round-robin style.
#
# @version: 0.1
# @author: Bjørn Erik Pedersen
#
LESS_PATH=File.expand_path('../assets/less', File.dirname(__FILE__))
LESS_VARIANT_PATH=LESS_PATH + '/variants'
LESS_FILE=LESS_PATH + '/bs.less'
VARIANT_PREFIX='bs-variant'

# Get all the variants and sort them
variants ||= Dir.chdir(LESS_VARIANT_PATH) { Dir['*.less'] }
variants.sort

# Replace import with the next LESS file in line
File.open(LESS_FILE, 'r+') { |f|
  new_content = ""

This file has been truncated. show original

I find this extremely useful (and I have only used this for an hour …) and if you do design demos for customers or similiar, I would imagine this to be both useful and impressive.

bep · November 17, 2014, 11:41am

Just a related note:

I just ported my build setup from Grunt to Gulp; oh what a difference! Now my keyboard short-cut trick really shines!

See:

https://github.com/bjornerik/bepsays.com/commit/1d442c6f39584ea4c43ef4bcf19a5f73b444b921