daz4126

I was overjoyed recently when I read the news that the British mathematician, Alan Turing will feature on the Bank of England's new £50 note. Turing occupies a special place in the hearts of computer nerds for effectively writing the blueprints for the computer. He also helped to break the notoriously difficult naval Enigma code used by the Nazi U-boats in World War II. In honor of this I decided a quick tutorial to build a cipher machine using the JavaScript skills that are covered in my book 'JavaScript Novice To Ninja'.

The cipher we'll be using is the Caesar cipher, named after the Roman emperor, Julius Caesar. It is one of the most simple ciphers there are and simply shifts each letter along a set number of places. For example, the phrase 'Hello World' would become 'KHOOR ZRUOG' using a shift of 3 (which it is the shift that Julius Caesar is thought to have used).

You can see an example of the [finished code here]

daz4126

@mixin links($color:white,$hovercolor:red,$background:$color){
a,a:link,a:visited{
  text-decoration: underline;
  text-shadow: none;
  color:$color;
    &:hover{
      background: $background;
      color:$hovercolor;
    }
  }

daz4126

require 'sinatra'
require 'data_mapper'
require 'slim'
require 'digest/sha1'

DataMapper.setup(:default, ENV['DATABASE_URL'] || File.join("sqlite3://",settings.root, "development.db"))

class Note
  include DataMapper::Resource
  property :id,       Serial

daz4126

%w[sinatra dm-core dm-migrations slim sass].each{ |lib| require lib }

DataMapper.setup(:default, ENV['DATABASE_URL'] || File.join("sqlite3://",settings.root, "development.db"))

class Robot
  include DataMapper::Resource
  property :id,           Serial
  property :top,          Integer, :default =>  proc { 1+rand(6) }
  property :middle,       Integer, :default =>  proc { 1+rand(4) }
  property :bottom,       Integer, :default =>  proc { 1+rand(5) }

daz4126

@@styles
@import url(http://fonts.googleapis.com/css?family=Pacifico);
$purple:#639;
$green:#396;
body{ font: 13px/1.4 arial, sans-serif; }
header{ overflow: hidden; }
.logo{float:left;overflow: hidden;}
.logo a{ color: $purple; font: 64px/1 pacifico; text-decoration: none; &:hover{color:$green;}}
.title{ color: $green; font: 32px/1 pacifico; }
.button {text-decoration: none; font-weight: bold; padding: 4px 8px; border-radius: 10px; background: $green; color: white; border:none; &:hover{background:$purple;}}

daz4126

style
  - if @riddle.css_engine =="css"
    == @riddle.css
  - else
    == send(@riddle.css_engine, @riddle.css)

daz4126

@@riddle
doctype html
html lang="en"
  head
    title== @riddle.title
    meta charset="utf-8"
    style
      - if @riddle.css_engine =="css"
        == @riddle.css
      - else

daz4126

@@new
form action="/riddle" method="POST"
  label for="title" Title
  input#title name="riddle[title]" value="#{@riddle.title}"
  select name="riddle[html_engine]"
    option value="markdown" HTML
    option value="markdown" MARKDOWN
    option value="textile" TEXTILE
    option value="haml" HAML
    option value="slim" SLIM

daz4126

class Riddle
  include DataMapper::Resource
  property    :id,           Serial

  property :created_at, DateTime
  property :updated_at, DateTime

  property :title,           String

  property    :html,         Text

daz4126

require 'haml'
require 'RedCloth'
require "coffee-script"
require "v8"
require "liquid"
require "markaby"
require "less"