These days I’ve been to school to do a website project. It has a lot of contents to put on it and I’ve to find a great way of putting it on the web.

It needs to be easy to add new contents to the page, and also for formatting. I don’t want to use any WYSIWYG HTML because it usually generate bad codes. So I go with PHP.

Now the website is finished, so these are my experiences:

  • I decided to go with Markdown Extra because it’s very easy to write contents and you can put raw HTML on it.
  • But then, I also need to add pictures, flash movies and screencasts on to the web page. With only Markdown language I would need to copy bunch of HTML codes to get it working.
  • So I made my own language which I call it “preprocessize” which pre-processes the content before passing it to Markdown. It’s like a templating language. I define my own tags such as [image src="picture" size=500] and it gets turned into HTML tags, something like <div class="image"><img src="images/picture.jpg" width="500" height="259" alt="" /></div>, which can be processed in Markdown just fine.
    • This way when I change the image directory or host all the images somewhere else I can just change the renderer functions instead of go through all pages.
    • This way I can easily add captions or nice image frames without copying and pasting a lot of HTML code around.
    • And this way when I specify the maximum size for the image, the renderer will figure out the images’ size and size them while keeping its aspect ratio.
  • By the way I would like to give it some paragraph special classes like class="center" to center that paragraph, so I created another language called “postprocessize” which post-processes the HTML after Markdown. What it does is really simple. It just change >~class="center" into class="center">. So it goes like this:
    • Markdown text: ~class="center" This paragraph is centered!
    • Turned into HTML: <p>~class="center" This paragraph is centered!</p>
    • Postprocess: <p class="center">This paragraph is centered!</p>
  • It works so I implemented the same on my blog! :D

  • I will release the source code of these 2 languages soon.

  • I also use these technologies:

  • When I use JW FLV Player, I also observed that the path to .flv file is relative to the .swf file, while preview image path is relative to the current page! Weird.

  • I need to use all 3 operating systems to create a website.

    • Windows:
      • Take screenshot of applications.
      • Test the code in Internet Explorer 6 and 7.
    • Mac OS X:
      • To store all the website’s data. So when I’m not at school I can make necessary modifications
      • Run the SVN server. Yeah I used SVN.
      • Run the web server.
      • Test the code in Firefox for Mac.
    • Linux (I use Ubuntu Karmic):
      • To edit websites in the text editor. I use Kate, gedit and Scribes.
      • To create various images for the website using GIMP. GIMP for Mac doesn’t work well for me. GIMP for Windows is OK but on Linux it’s better.

  • So, how do I exchange files between these 3 computers?

    • Windows <-> Linux: I put files on a shared folders on Windows and access it from Linux.
    • Windows <-> Mac: SVN. Checkout and commit.
    • Linux <-> Mac: sshfs.

  • I use SVN. Why I use SVN while there are a lot of better version control systems?

    • Because I already know how to use SVN. And it’s also easy to use.
    • On Windows PC, I installed TortoiseSVN. It’s easy, and people who never used any version control system can use it. Committing is as easy as right click, commit, OK. Updating is easy as right click, update.
    • I know that other version control systems has more features. I just need a way to collaboratively work with the files. So any other features are useless for this project.
  • I also use jQuery. It is a lot faster now. The last time I use it (a year ago or so), it was very slow. Now I’m trying it again and I can feel the difference. It’s fast!
  • I also make a JavaScript function that adds the class up, over and down to any elements so that I can make any elements look like buttons. And I can do something like .start.down { color: black; }
  • But then, I realized that IE6 does not support multiple selectors. And I can’t find a way to fix it.
    • So we dropped IE6 supports and tell all IE6 users to switch to a better browser. I know that you’re happy with this.