stevengharms.com

Or, “Dont’ make me use your ‘rich editor’”

At work we’re using a wiki engine whose power user syntax has been disabled. While it’s been disabled for good reasons, it still bothers me much.

What one is left with is the rich text box which works great for dumping in cut-from-Word documents or which people who don’t want to type quickly and don’t mind mousing to turn on bold etc. As a person who wants to type fast and format as he thinks it, not being able to write markup as I write in wiki data is sad, sad sad.

A guru on the topic suggested that I take some sort of editor, generate the HTML, and then paste that into the rich box because modern OS’s carry HTML formatting data into pastes.

Ugh.

But it’s better than the alternative. Ergo, I downloaded the Markdown extension for VIM. This was a step forward because it provided me the syntax highlighting that makes the process a bit faster. What I really needed was a way to generate the HTML and put it in a browser for ease of cut-and-pasting.

This forced me to dive into the world of vim scripting. Agg. I give it to Emacs every time on this, Vim’s scripting language sucks. I avoid it at all costs, when I can. Tonight I couldn’t. I wrote this pair of functions such that you:

1. Write markdown in Vim (yay)
2. See the syntax highlighting thanks to the plugin (yay)
3. Hit :mm (yay)
4. An HTML artifact is generated via the markdown perl script
5. open() on MacOS is called to process that HTML artifact so that it launches your browser, in my case, Chrome

To make the :mm work you need this snippet of code added to your .vimrc.

" Written by steven for quick loadup of Markdown text into HTML
function Mkdp()
  write
  let file   = expand("%")
  let mkd_file = file . ".html"
  let result = system("markdown " . file . " > " . mkd_file)
  let result = system("open " . mkd_file)
endfunction
:map :mm :call Mkdp()<CR>

A few caveats.

1. I think I must be doing it wrong, I suspect putting this code in the .vimrc is not the “blessed” way to do it.
2. I use the vim system() call which is complete butchery in most programming languages. I’m pretty sure there’s a more blessed way to make requests to the OS, if anyone knows it, please leave a comment.

Yesterday, after a walk around Town Lake, we stopped by Austin Java for a bit of lunch. While I was waiting for my salad and Lauren for her egg burritos, I noticed the Austin-typical amount of people there with books and laptops, no doubt hard at work on materials for their classes.

The guy next to me was working on something in Word. As I watched him fiddle with margins and tab stops, go clicky-click to mutate some words from regular text to bold I realized, again, just how incredibly painful it is to have presentation (bold, left margin of 12, or 30 picas) defined in the same place where you define content ( “When in the course of human events….” ).

That guy should have been focusing on the latter, not the former, yet here he sat, going through pages and pages of content so that he could make it look right. Imagine, had he, in the content left a bit of markup like…

bolditem {text-style: bold}

<span style='bolditem'>we must remember our friends properly</span>: their lives merit more than mere sentimentality

And then later if he decided ‘bolditem’ should get changed, a quick search and replace to change ‘bolditem’ ( a most unlikely word to type in your content ), to ‘italitem’ and then change the styling definition to italitem {text-style: italic} or red, or green, whatever, it would have taken but mere seconds.

Instead he was trolling through a document glumly selecting text, hitting the bold b button, and then selecting more text.

This design method is simply so wrong.

But this has been said elsewhere far more eloquently…

If you’re not in the programming field, you likely got hit by a bunch of acronyms there as if you had been hit by a bus. Let me break it down:

• AJAX : A technique that makes websites look fast and smooth, unlike “old” style application. Think about the way Google maps looks, or Netflix.
• DOM: HTML (the language that web pages are written in) can be seen as a “tree-like” structure. This structure goes by the name of “DOM”, or “Document Object Model”
• Javascript: A language for telling your browser ( Firefox, IE, etc. ), to do something to the HTML page sent from the server within your browser. Thus what’s on the server and sent to everyone else doesn’t change, just your particular ‘view’ in *your browser

So, anyway, if you want to write in the AJAX mindset, you need to understand the latter two ideas rather well. The last time I really looked at Javascript was for one of my senior-year classes (way) back in 2000. Javascript has come a long way (baby) and with the advent of the AJAX technique, it’s really the only game in town.

I wrote a very simple script to help me get the hang of the language, so for you, here it is.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Steven Harms">
<!-- Date: 2006-08-19 -->
<script type="text/javascript" charset="utf-8">
    function configurePage(doTextChange){
        // doTextChange is a variable passed as a YES or NO argument that
        // is used to decide if the default text 'Moopy Hobo' is changed to
        // something else

        //Get the HTML <body> tag reference
        var htmlParent = document.getElementsByTagName('Body')[0];

        //Create a <p> tag element
        var childEl = document.createElement('p');

        // This is something subtle, you need to create a text node and bond
        // that to the <p> element.  In the DOM inspector, this shows
        // up as 'nodeName' = #text
        var tf = document.createTextNode("Moopy hobo");

        // Bond the text to the <p> element
        childEl.appendChild(tf);

        // Handle the argument
        if ( doTextChange == 'YES' ){
            childEl.firstChild.nodeValue="Monsier Hobo"
        }

        // This is for getting familiar with using the DOM to manipulate
        // text elments

        //Changing the style at the line level...
        childEl.style.width="200px";
        childEl.style.fontFamily="garamond; helvetica";

        //Changing the style at the line level, but with CSS
        childEl.className='graybackground';

        //add some other JavaScript events
        childEl.addEventListener('mouseover',changebk,false);
        childEl.addEventListener('mouseout',dazzle,false);

        //Finally, put this loaded up <p> tag onto the page by appending
        //it to the <html><body> node
        htmlParent.appendChild(childEl);

    }

    // A function for callbacks, the alert() is pretty annoying when
    // testing so I've commented it out, but enabling it makes things
    // a bit more obvious
    function dazzle(){
        //alert('you are dazzled');
        this.className='graybackground'
    }

    //Nifty!
    function changebk(){
        this.className='redbackground'
    }
</script>

<style type="text/css" media="screen">
    .graybackground{
        background-color: #BBB;
    }
    .redbackground{
        background-color: red;
    }
</style>

</head>
<body onload="configurePage('YES')">
<!-- Look Ma, no content! -->
</body>
</html>