Since his work is outdoor lighting, he has a lot of pictures to show off his projects. They’re taken at night, so a black background for the site was a requirement. Since he had a bunch of wonderful pictures, I decided to make the pictures the main focus of the site. Again, I tried for a “metro” inspired design. The list of his projects (wordpress posts) would be displayed in a 3×2 grid and display the title and link on an overlay when hovering over the image. I chose “Open Sans” at a 300 font weight for the font, from Google Fonts, and used small-caps for most of the headers and titles.

The project details (single posts) consisted of a piece of text containing George’s comments about the project and a gallery (I decided to use Galleria) of his images. Originally, I had planned for a project completion date, address, google map, and social media buttons to appear along with the project title, but George didn’t want those things. I kept the social media buttons but made them appear/disappear when the page is scrolled.

Pages were generally straight forward, but George wanted some fancier things on some pages that required some specialized content. For example, the “Why choose us” and “Contact” pages. Instead of a plain bullet list of Outdoor Illumination’s virtues, we decided to have the main “catch words” showing and a blurb about each appear underneath when the user hovers on the word. I structured the html in a definition list (<dl>), which allowed me to separate the word (term) from the blurb (definition) for use in javascript. It also would provide a nice presentation if CSS and javascript were disabled. Using jQuery, I hid all the dd tags, fetched the html content when the associated dt tag was hovered, and put the content into a display div. For the contact page, I just needed to add an ‘email form’, so I made one and wrote a mail script for it in php. I also added some javascript via jQuery to intercept the submit, submit via ajax, and show the result without leaving the page. It’s quite slick, and the form still works by normal means even if javascript is disabled.

Overall, I’m quite pleased with how the site turned out, though I do feel there are some aesthetic touches to be had here and there in order to bring up to the next level. Or maybe I just don’t use enough gradients and spiffy fonts.

The program is for Windows, and requires .NET 4.0 (you should be prompted for .NET to be installed when you install RaterCounter, if .NET is not already on your computer). The program will automatically check for updates and ask if you want to upgrade after starting the program.

It is a very simple program that I wrote primarily for my own use, so there really is no “help”, some parts of the program may not be self-explanatory, and there may be bugs. If you use it, please keep this in mind. However, feel free to leave comments and feedback in the comment section of this post. You can also help by taking a survey.

New in version 1.6.2 is the ability to “popout” tasks into their own mini windows. I added this helpful feature because I like to have easy access to the +1 button, but keeping the main window always pinned sometimes covers up too much of the browser. The popout is much smaller and stays on top, so you can access the +1 button even when the main window is hidden from view.

Download

• v1.6.5 (2011-10-15), Windows 7, Vista, XP (.NET 4.0): setup.exe
• Source code

A screen shot of the program.

When the program starts, you must choose either “Number” to display random integers in a range, or “String” to display random text from a delimited list. You can also choose how the random items are “drawn”: with or without replacement. After choosing these settings, press “Save Settings” to begin.

Items are drawn by pressing the “Next” button, by clicking the center of the display area, or by pressing ‘right’ on the keyboard. If “Without replacement” is checked, items will be drawn only once, so the items will eventually run out. Press “Reset” to reset all the items and start fresh. You can also press ‘backspace’ or ‘Ctrl-R’, or right-click the center of the display area to reset.

Other keyboard shortcuts are:

• Ctrl-F or F11: Toggle full-screen mode.
• Ctrl-H: Hide or show the Reset and Next buttons.
• Ctrl-L: Toggle between English and Japanese UI.

Delimiters for the string list are:

• , (comma) and ; (semi-colon) in English
• , (comma) ; (semi-colon) 、 (chon) ・ (dot) ； (semi-colon) in Japanese

Download

• 2010-06-24, Windows XP, Vista, 7 (.net 4.0): setup.exe

Originally she had requested a brown background, and what I had made was a little similar to the current design of quillaja.net. Version 1 ended up being functional, but not very attractive.

At some point in time I had some ideas for version 2, and these turned out to be a lot better looking. My main inspirations were the “metro” style which Microsoft is using in Windows Phone 7 and some other websites I liked. Overall, I was going for a clean, uncluttered, light, and open look. I think the most important change was going to a lighter background with dark text and eliminating the boxy look from the original (and which I still use on this site). I used a color palette based on something I saw at colourlovers.com–probably one of the coffee themed ones. The main font I used was Segoe UI, and something similar for Macs that might not have that font.

A screenshot of Batch Rename after it opens.

Upon opening, the user is presented with 3 textboxes and 3 buttons. Here, the user can enter the full path name of the folder, the regex expression to use in matching file names, and the replacement expression to rename files as. The buttons open a folder browsing window, list the files that match the current regex, and execute the rename.

A list of matching files.

For example, if there is a folder C:\mytest which contains some XHTML files named text00.xhtml, text01.xhtml,... and so on, using Batch Rename, they can be renamed to part00.xhtml, part01.xhtml,....

The regex to use is text(\d+).+. Note that the numerical part of the file name is captured with (\d+) so it can be re-inserted into the new file name, and preserve the numerical order of the files. Also, each file must be given a new unique name, and the number will be the only unique part in this case. After entering the regex, the user can press “List Matches” to see a list of the file names which match the regex.

If that is satisfactory, continue and enter the replacement string. In this case, it is part${1}.xhtml because the regex matches all the characters in the file name and captures the numerical part in the 1st capture group. Therefore the entire file name will be replaced with the replacement string, instead of just a sub-string of the file name. ${} is the syntax to use to refer to captured groups.

The results of a batch rename.

Since everything is set up, the rename will be performed when the user presses “Run”. The results of the renaming process are shown in the output area.

The program checks for updates once a week.

Updates

1. 2010-01-13: The ability to run a test rename. To run a test, simply complete all the fields as normal and press “Test”. Output will appear as normal.
2. 2010-01-13: Auto-numbering. To use this, insert a single # character in the replacement string (in addition to the standard syntax). There are options to zero-pad and to adjust the starting number. To zero-pad, increase the “Auto-numbering digit count” parameter. For example, with this set to 3, 5 would become 005.

Download

1. Version 1.0.0.1, 2010-01-13, Windows XP, Vista, 7 (.net 3.5): download here
2. Version 1.0.0.0, 2009-10-15: Discontinued

Source code

1. BatchRename 1.0.0.1

The first screen of Ensign vs. Gowron

As the title screen says, the plot is that you, a new ensign in Star Fleet, have offended Gowron and must escape.

Click here to play

The Silverlight app is about 2mb. Total play-time is about 10 seconds–possibly less.

Feel free to tell me what you think (e.g. “Wow, this is the BEST STAR TREK GAME EVER!”).

A screenshot of Flash Cards.

This program actually works. I just haven’t written any documentation for it.

It is (kind of) localized in English, Japanese, and German. You can open word lists as comma-delimited text files or as excel spreadsheets. Text files can be of unlimited length, while excel is limited to 150 rows (including header). Word lists are composed of 4 columns:

1. foreign word
2. foreign part-of-speech/note
3. native part-of-speech/note
4. native word

Once the wordlist is loaded, navigation should be pretty straight-forward. Right/Left or <,> keys for Next and Previous. Space to toggle between foreign and native words (“flip” the card).

Also, the program will check for updates automatically.

Download Flash Cards:

• Windows 7, Vista, and XP
• Windows 2k