Lynrask A∕B-testing av stilsettendringar

Om tykkjer det hadde vore kjekt å bla deg gjennom ulike utsjånadsvariantar av nettstaden din med eit tastetrykk – og sjå nye endringar smyge seg inn i nettlesaren…

Då bør du lese vidare. Dette kan gjerast med enkle grep.

No finst det allereie løysingar for å laste endringar automatisk i nettlesaren; byggeverktøy som Grunt og Gulp har dette som tillegg, Hugo – sidegeneratoren eg bruker for denne nettstaden – har alt dette innebygd.

Og dei støttar alle det eg kaller mjuk omlasting av endringar i stilsett og bilete, som i motsetnad til ein CTRL-R i Firefox nesten ikkje er til å merke – endringane smyg seg på plass.

Men det kan gjerast betre! Mykje betre!

Kva for font passar best?

Det finst mange grunnar til å gjere endringar i uforminga av ei nettside, det vere seg om ho er ny eller gamal.

Kanskje hadde det gjort seg betre med ein sans-serif som tittelfont? Eller kva om me gøymde det biletet på små mobiltelefonar?

No kan ein gjere desse endringane og samanlikne med nettsida som er i produksjon, men om ein har ein tre-fire variantar ein ynskjer å teste ut – og gjerne litt fram og tilbake – ja, då blir det mykje alt-tabbing.

Og det blir ikkje betre om endringane har fleire interessentar enn deg sjølv, kanskje kundar som betaler for plunderet.

Hurtigtast deg gjennom variantane

Då kan du heller gjere som meg – eller gjere som eg kjem til å gjere etter at dette innlegget med tilhøyrande skript er klart, for førebels er det berre tankar på ein skjerm – lag deg ein hurtigtast som vekslar mellom dei ulike endringsutkasta.

Eg har valgt tastekombinasjonen ALT-SUPER-N, stilsettet sitt svar på ALT-TAB.

Eg skal ta deg gjennom kva som skal til for å få til dette, men eg forutset eit par ting: At du veit korleis du lagar hurtigtastar og at du har eller veit korleis du får deg eit oppsett for livereload¹ og bygging av stilsett frå LESS eller SASS.²

Eg skal syne deg døme på skript som gjer dette, men her er omrisset:

1. I stilsettet minestilar.less har du eit sett med variablar.
2. Du kopierer ut dei variablane som du ser for deg å endre ut i ei ny fil med eit kjent prefiks, feks. minvariant_1.less (her er er minvariant prefikset som må gjentakast i variantane). Eg seier variablar her, men det kan vel også tenkjast at du vil byte ut alt…
3. Du importerer minvariant_1.less i minestilar.less, og her er det viktig at importen kjem etter variablane du skal overstyre.
4. Du lagar ein kopi av varianten, minvariant_fargetestar.less, og gjer dei endringane som skal til i denne. Gjenta dette med nye namn for fleire variantar.
5. Medan du ser på sida i nettlesaren trykker du på ALT-SUPER-N og blar deg gjennom variantane.
6. Når du er nøgd er du ferdig.

Medan du tenkjer litt på dette, så må eg skripte litt. Er attende om litt…

… OK, då er eg attende.

Eit Ruby-skript til hjelp

Følgjande Ruby-skript gjer jobben for meg. Skriptet roterer importen i LESS-fila /assets/less/bs.less med filene /assets/less/variants/bs-variant*.less.

#!/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 = ""
  f.each_line { |line|
    if line.include? VARIANT_PREFIX
      curr_variant = line.match(/import.*(#{VARIANT_PREFIX}.*?\.less)/)[1]
      curr_index = variants.index(curr_variant)
      next_index = (curr_index + 2) > variants.length ? 0 : curr_index + 1
      next_variant = variants[next_index]
      new_content << "@import \"variants/#{next_variant}\";\n"
    else
      new_content << line
    end
  }
  f.rewind
  f.puts new_content
}

No er filnamna og katalogane i skriptet over tilpassa min struktur, men det skulle la seg gjere å forstå.

Korleis fungerer det?

«Dette var mykje for lite,» seier du kanskje – men eg meiner dette er eit glimrande lite grep, særleg for slike som meg, eg som har litt vanskar med å bestemme meg for om overskriftene tek seg best ut i svart eller i mørk blått.

Og det er lettare magi å sjå skjermen endre seg med eit tastetrykk…