Matt's Webcorner

This page was made using a lot of tools. They're documented here to give credit to the people who made the tools, and so I can remember how I did a particular technique in the future should I have to redo something.

The template was made by NodeThirtyThree Design. I've of course modified it somewhat but the base is still there. I couldn't decide on a good background (the default template had a wood theme going on) so I left it white.

I use Subversion for version control, to help keep the webpage synchronized across my work and home computers, and to backup my work on a single computer. Instead of using the command line, I use TortoiseSVN as a Win32 shell interface to subversion. It's really easy to use.

I edit HTML using Visual Web Developer Express 2008. I really like the ability to switch between the source and design view very quickly, however it often fails to give an accurate design view which forces me to also be viewing the code in an actual web browser. The syntax highlighting and sometimes the intellisense are really nice (although these are nowhere near as necessary as they are for real programming languages.)

When programming in C++ I go to great lengths to avoid duplicating code. When using HTML I also try to do this but it is much harder. All the pages in this website has so much common code and I wanted a way to factor these out into common files. I imagined this as mimicking the #include preprocessor directives in C++. Since I couldn't find a program that would handle this for me, I ultimately wrote my own program to manage this for me in C++ using Microsoft Visual C++ Express 2008.

As a simple example, the source for the Home page is:

Here, '@' denotes a preprocessor directive. '@Include' inlines the provided file. '@@[variable]=[value]' is used to assign values to variables. When parsing all text (preprocess or otherwise), if '@variable' is encountered, it is replaced with the value of the assigned variable. So '@@HomeActive=@MenuActiveString' copies the contents of the MenuActiveString variable into the HomeActive variable. In this code, these variables are used to determine which menu button should be selected. The main reason for this setup is that it is really easy to, for example, add new buttons to the title bar without having to modify all the HTML files. The code for the title bar is contained within Header.txt which is shared between all HTML files. The HTML files are also very short and simple, containing mostly code that is unique to the page.

I also use a command '@Code' that automatically reads a code directory and converts each source file into syntax-colored HTML, then provides links to each of these HTML pages. This command internally uses the CPPtoHTML program to do the conversion for each file.

The program takes a source directory and a target directory, then compiles all HTML files in the source directory, putting the resulting expanded HTML into the target directory. The Web Page Preprocessor page documents this more thoroughly and provides the source code.

I use the Gradient Image Maker to make gradient images (for example, in the title bar.) It's really lightweight and easy to use, and much less overhead than doing it in Adobe Photoshop.

I use MS Paint for basically every image editing, resizing, conversion, cropping, etc. task. It opens much faster than any other editor I have (Paint.NET, Photoshop) and is both easier to work with and more than sufficient for the job.

The fractal image on the title bar was made with Ultra Fractal. This program makes really pretty fractals really easily, and has excellent coloring algorithms that would be pretty complicated to duplicate. The fractal file can be found here. The full image is below: