Live pages

The idea is simple - to edit web pages in browser. Changing nodes in web inspector is not fun. Luckily with contenteditable we cant any text we see. It is almost text note, check it out.

Some data is hidden by default, lets open it:

And while we are here style them a bit:

Pretty comfortable I think. Now to persistence. It is as simple as GET request returning exactly same data it got with PUT request. Implemented as ruby rack server, data stored in one level tree:

run Proc.new {|env|
  method = env['REQUEST_METHOD']
  path = '.' + env['PATH_INFO']
  case method
  when 'PUT'
    content = env['rack.input'].read
    File.write(path, content)
    [200, {}, []]
  when 'GET'
    content = begin
      File.read(path)
    rescue Errno::ENOENT
      '<html contenteditable=true><p>Not Found'
    end
    [200, {"Content-Type" => "text/html"}, [content]]
  end
}

Browser should PUT data that will be returned next GET. As it expects HTML, send that to server. To make it simple store document.documentElement, no doctype. This means we are at quirks mode, but that's ok.

As this page would be published I won't allow PUT requests on my web server. But you are free to save and load from localStorage, try it yourself — edit the page and , , .

And that's all! With such a minimal setup we got very close to original browser. It was browser-editor, you know. Authoring web pages without touching HTML, yay!

In the next series you will see MIME, angle-dangle and other controls, XHTML beating HTML.