I had 2 hours to kill so I thought I’d write a LOLCode interpreter.

I know there’s already a few LOLCode interpreters around, but I couldn’t help myself. Plus I’ve always been interested in interpreter design.

It’s still a work in progress at this stage, so a lot of the language hasn’t been fully implemented.

Here are two working programs…

Hello World


BTW the classic hello world program
HAI
VISIBLE "Hello world!"
KTHXBAI


Output:

Accepting User Input


HAI
VISIBLE "Hello there, what is your name?!"
I HAS A NAME ""

BTW welcome the user
VISIBLE "Welcome to LOLCode " N NAME N "!"
KTHXBAI

Output:

If you’re addicted to reddit.com like me, you’ll understand my frustration with all those Ron Paul links. Especially if you don’t live in the US, and don’t really know who the guy is.

If anyone is interested, I’ve written a small Greasemonkey script which hides all reddit links that include the text “Ron Paul”.

To install, download the Greasemonkey file and drag it onto your firefox window.

ronpaul.user.js

Here’s a quick tip for working with the command line in PHP.

If you’ve ever run a PHP script via the command line, you would have noticed that output from the script is not printed until the script has finished.

If you need your output displayed in real time, you can open a stream to the command line…

$stdout = fopen('php://stdout', 'w');

Simply write any output to the stream and it will be printed on the command line in real time…

fwrite($stdout, "Hello CLIn");

One thing I keep noticing is the use of background noise or clutter in CAPTCHAS. It’s now well known in the OCR (Optical Character recognition) field that background noise can be easily removed by computers. It’s basically useless at hindering spam bots.

It’s so easy that I was able to clean the following CAPTCHA up in only 20 lines of PHP code.

Here’s how…

At a glance, you can see the CAPTCHA’s background noise has a blue tint. Looking at the RGB value of the image in Photoshop, I can see that all parts of the background have a blue value higher than 180.

That’s the only piece of information needed to remove the background.

The code simply loops through every pixel of the image and checks the RGB value of it. If the blue (B) value is higher than 180, color it white.

Here’s the final image. The characters can now be easily separated and identified using OCR software.

So you can see why most background noise is basically useless in CAPTCHAS.

Ray Casting is a extremely fast method of generating 3D images using high-school level mathematics.

Remember playing Wolfenstein 3-D? This was one of the first games made using the ray casting technique.

The graphics in Wolfenstein don’t even come close to today’s gaming standards; but it was still impressive for it’s time. It was also fast, considering the speed of the hardware it ran on.

Although ray casting is an outdated method, it’s a good introduction to 3D imagery and game design. It’s also quite easy to recreate yourself (if you can remember pythagoras theorem).

The basic idea of ray casting is very simple. To transform a 2d image map into a 3d representation, “rays” are projected from the viewer towards the light source. If a ray hits an object on the 2d map, a vertical line is drawn on our “3d” image to represent this section of the wall or object. Think of the image as vertical slices.

This diagram might do a better job of explaining.

Textures can be applied using texture maps but unfortunately other effects like reflections aren’t so easy to create. They can be faked though.

If you’ve got nothing to do for a few hours, consider creating a simple ray cay caster in your favourite language.

Here’s a few resources to get you started.

• Lode’s Computer Graphics Tutorial: Ray casting
• Rayforge: A simple and fast (for python) ray caster
• Ray-Casting Tutorial by by F. Permadi
• A PHP Ray Caster

Most developers have now heard about Facebook’s leaked index.php source code, which was anonymously posted here. If you haven’t seen it already, there are a number of links listed on Techcrunch.

I’ve seen a few bloggers criticize Facebook developers for using procedural programming rather than classes and object oriented techniques. I’m not exactly sure why they’ve chosen to develop the site like this; but I am going to take a guess and say it was to improve speed and efficiency.

Object oriented programming was first introduced to PHP in version 4. However, the language wasn’t originally designed around objects and classes, so the implementation was clunky and awkward. This meant that procedural code was often much faster than object oriented code.

Considering the size and popularity of social networks, I’m not surprised they chose procedural code over objects. That tiny boost in performance would easily outweigh the advantages of using classes.

Fortunately, most (if not all) issues with objects have been solved in PHP 5, which is now closer to a truly object oriented language.

The goal of a signup form is to quickly convert visitors into registered users. The easiest way to increase your sign up form’s conversion rate is to lower the amount of time it takes to complete.

One way to do that, is to add a “check username availability” feature. Users will often choose conflicting usernames, especially on large community websites.

Rather than reporting the error on the next page, give the user a quick and easy way to check their username availability. This will speed up the sign up process.

As always, start with your interface. A simple form with a text box, a div, and a “Check Availability” button is all that’s needed. You can copy the HTML from the demo.

Using the prototype javascript library, we will send an AJAX request to a seperate checkuser.php page, which will print either 1 for “available”, or 0 for “not available”. Our javascript function will print the appropriate message in our div, then highlight the textbox with green (available), or red (not available).

Here is the checkUser() javascript function. Don’t forget to include the Prototype Javascript file.


function checkUser(user)
{

  new Ajax.Request(url, {
    method: 'get', parameters: params,
    onSuccess: function(transport) {
      if(transport.responseText == 1){
        $('userstatus').innerHTML = 'Your username is available.',
        $('user').style.backgroundColor = '#caffd5'
      }else{
        $('userstatus').innerHTML = 'Sorry, that username is already taken.',
        $('user').style.backgroundColor = '#ffd4ca';
      }}});
}


View the Demo.

This is only a small way you can increase the effectiveness of your sign up form. I will be writing about other methods in the near future.

So your project is nearly finished, now all you need is a website to get the word out. Unfortunately this stage of the project is often neglected, which is understandable. Programmers want to work on the actual application rather then the website. However, your visitors aren’t going to download your application if they can’t find the download page.

As a developer (and as a consumer), I see lots of software websites that could be improved. Here are a few tips for making a good application website.

• Show a screenshot of your application on the homepage

  Most of the time, this is what I look for first. At a quick glance I can see if the application is going to do the job I want. I often download software based solely on the screenshot.

• Make sure the user can get to the download/purchase page within 1 click

  Firefox has done this part right. Nothing works better than an eye-catching “Download Now” button. The goal of your website is to convert visitors into downloads, so it’s wise to get your users to the downloads page as soon as possible.

• Explain in 2-3 sentences what your program is and how it helps people

  This should be the first thing your visitor reads. Make it short and to the point. Crimson editor has an excellent description on it’s homepage…

  “Crimson Editor is a professional source code editor for Windows.This program is not only fast in loading time, but also small in size (so small that it can be copied in one floppy disk). While it can serve as a good replacement for Notepad, it also offers many powerful features for programming languages such as HTML, C/C++, Perl and Java.”

• Host a demo of the application or the application’s admin section

  Dont make your visitors type ‘admin’ and ‘demo’ on the demo login form, it’s annoying, auto fill the fields.

• Don’t use bad stock photography

  Personally, I prefer software websites without any photos. But if you have to use them, don’t include cliche photos of people in suits or talking on cell phones.

  People associate these type of photos with faceless corporations.

• Include a news bit

  Often one of the first things I do when looking at an application’s website is scan for the latest news to see how active the project is.

• Screenshots and gallery

  If possible, have a screenshots page with at least 5 – 10 good screenshots of your application.

A window is essentially just a floating div. We can make the div draggable using the Script.aculo.us Javascript library.

First, we need to create the window div. Here is the CSS I used.


.window {
  background: #d8e7fe;
  position: absolute;
  top: 200px;
  left: 200px;
  width: 350px;
  padding: 1px;
  -moz-border-radius: 7px;
  border: 2px solid #21416d;

}
.window h1 {
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  padding: 6px;
  display: block;
  background-color: #9cc6ff;
  font-size: 13px;
  margin: 0px;
}


And here is the HTML markup.


<div id="mywindow" class="window">
  <h1>Example Window</h1>
  <p>Click and drag this window around the webpage.</p>
</div>


I’ve used ‘-moz-border-radius‘ for rounded corners because I’m lazy. You’ll need to use corner images if you want rounded corners that work in more than one browser.

Now all that’s left to do is the javascript. As I said before, we’ll use the Script.aculo.us library which includes a handy Draggable function. Theres a quick guide on how to install the library here.

Once you’ve got the library installed, add this short Javascript snippet to the head section of your document.


<script type="text/javascript">

</script>

When the page loads, the init() function is called, which tells the library to make the div ‘mywindow’ draggable!

View the finished product.

Making a password strength meter is simple, there’s no tricky Javascript or AJAX needed, just a simple function and a few divs.

Click to view demo.

I’ve decided to design the function around a scoring system, the stronger the password the higher the score. We can accomplish this with just a few simple IF statements.

function passwordStrength(pass)
{

}

The code is fairly self explanatory, the last IF statement checks if the password contains both characters and symbols. The function returns a percentage of the password’s score out of 5, which is the maximum score it can be awarded.

Next, we need a form with a text box and 2 divs for our meter.


<input type="text" onkeyup="document.getElementById('passmeter').style.width = passwordStrength(this.value) + '%';" />
<br />
Password Strength:<br />
<div id="passmeterbg"><div id="passmeter"></div></div>


The ‘onkeyup’ event calls the passwordStrength() function every time a key is pressed. The ‘width’ property of our meter div is then given the password’s score.

Finally, we need some CSS to style the meter…


#passmeter {
width: 0px;
background: #629d48;
height: 3px;
}

#passmeterbg {
height: 3px;
background: #f1f1f1;
width: 200px;
}


View the finished product.