Category: Coding

Coding related application i’ve created.

/ Coding

Application: Bcomplete

BComplete is an autocomplete (or auto-suggest, perhaps) script for web applications, similar to what Google and Yahoo employ in some of their online programs. I wrote it to fill a gap in what would otherwise be an ocean of autocomplete scripts.

Update 5/12/20017:

BComplete 1.2 is available, with support for asynchronous data loading. This is not traditional AJAX, as it doesn’t perpetually poll the server for new data, but it does relieve the client of the slight page-loading delay caused by embedded Javascript arrays. It also saves developers the pain of embedding those arrays into their HTML if they find it cumbersome or unclean. Read the “Usage” section below for details.

Additionally, 1.2 includes some minor bug fixes, including an above-the-field position for the popup list, for cases where displaying the list below-the-field would cause the browser to scroll.

Most autocomplete scripts are AJAX-based, meaning that each keystroke a user makes is passed to a web server, where a script quickly produces and returns a list of the values to be suggested. For extremely large collections of data, this is probably the best option, but my experience has been such that, for most websites, “quickly” is not quick enough, and the collections of data being worked with are not particularly large anyway.

For a site like Google Suggest, AJAX is the usable only solution, but for a site that needs to display only a relatively small list of values, AJAX is a poor performer, and more complicated as well. the first test ever runned for the Bcomplete application is by the company Monthly SEO Services on their algo for keyword research.

Additionally:

  • Many existing scripts are not cross-platform. BComplete works under all contemporary browser engines.
  • The code organization for most autocomplete scripts is frightening. I have tried to make BComplete’s code as straightforward as possible, to assist coders who may need to customize it.

Usage

To use BComplete, link to the included .js and .cssfiles in your document’s <head> element. Then, for any <input> elements that you want to add an autocomplete to, create a BComplete instance, and set it’s data using the setData or loadData methods.

For example:

var colors = ['Red','Orange','Yellow','Green','Blue','Purple'];                    
var complete = new BComplete('inputTagID');
bcomplete.setData(colors);

or

bcomplete.loadData('../files/list.txt');

In the case of loadData, the given path should point to a remote text file that should contain only a single Javascript array. For example:

['Yellow','Green','Blue','Purple']

This file will be loaded asynchronously, and BComplete will not be enabled until after all the data is available.

BComplete automatically activates when a user begins typing in an enabled <input> field. Along with display as-you-type suggestions, BComplete can also display the entire list of available suggestions. To activate the full-list display, the user must press the down arrow on their keyboard when the <input> field is empty.

Upcoming Features

There are a number of features which I would like to add to BComplete, provided they don’t get in the way of its original uses:

  • Traditional AJAX: I don’t think it’s necessary most of the time, but it would be a nice feature to have available, if needed, so that data could be dynamically obtained and cached.
  • Show All Button: An optional ‘show all’ button, in the style of a drop-down arrow, would be useful for those who feel the existing ‘show all’ invocation (the keyboard down arrow ) is not intuitive enough.
/ Coding

Application: JFast

JFast is a replacement library for the Java portion of the FastCGI DevKit. The DevKit does not support multi-threaded FastCGI Java applications, but JFast does. JFast is also a much cleaner collection of code, and is therefor a great deal easier to develop further.

JFast is not a full-featured library. It supports only the basic Responder role, and it does not support multiplexed connection (does any web server, either?). If there is a feature in the FastCGI specification that JFast does not support, that you need, let me know.

Documentation

Javadoc to come.

JFast is very straightforward. After creating a singleJFast object, you can call the acceptRequestmethod to access data (a JFastRequest object) connected the request. The JFastRequest object can be passed to a separate thread for processing, and your primary thread can continue to accept new connections.

The JFast constructor can be passed a single intparameter, which represents the port number that a Web Server such as lighttpd can use to communicate with the application. If this parameter is left out, the FCGI_PORT variable must be set in the program’s environment.

The following fields/methods of JFastRequest are of interest:

  • JFastRequest.out: a PrintStream that allows you to send character data to the client.
  • JFastRequest.error: a PrintStream that allows you to send character data to the webserver as logging information.
  • JFastRequest.properties: a Propertiesobject, containing standard CGI key/value pairs.
  • JFastRequest.data: any available POST data that’s associated with the current request.

Example

The following example is a complete (if slightly useless) FastCGI program.


import org.bumblescript.jfast.*;

public class JFTest
{
    public static void main(String args[])

        throws Exception
    {
        JFast jfast = new JFast();
        JFastRequest request;

        
        while((request = jfast.acceptRequest()) != null)
        {

            request.out.print("Content-type: text/html\n\n");
            request.out.print(

                "<html>" +
                "<head><title>JFast Example</title></head>" +

                "<body>" +
                    "<h1>Hello, FastCGI!</h1>" +
                    "<h2>Environment</h2>" +

                    "<pre>"
            );                    
            request.properties.list(request.out);

            request.out.print(
                    "</pre>" +
                    "<h2>Post Data</h2>" +

                    "<pre>" + (new String(request.data)) + "</pre>" +

                "</body>" +
            "</html>"
            );            
            request.end();          
        }

    }
}
/ Coding

Application: Dynamic Text Replacement

I developed DTR so that web developers could add custom fonts to their websites, without having to manually create GIFs, or embed <img> tags or complicated CSS code in their (X)HTML.

The editors of A List Apart liked my idea, and they published my article about the method:

Text styling is the dull headache of web design. There are only a handful of fonts that are universally available, and sophisticated graphical effects are next to impossible using only standard CSS and HTML. Sticking with the traditional typefaces is smart for body text, but when it comes to our headings — short, attention-grabbing blocks of text – it would be nice to have some choice in the matter. We’ve become accustomed to this problem and we cope with it either by making the most of the few fonts we have, or by entirely replacing our heading-text with images.

Read more at A List Apart »

Troubleshooting

If you’re having difficulty getting DTR to work, there are a few steps that I recommend taking:

  1. Try using different font (TTF) files.
  2. Examine the phpinfo() output for your server. You should have the following modules installed: --with-gd, --with-ttf, and --with-freetype-dir. If you don’t know how to find this information, download and unpack the DTR files and upload “info.php” to your server. Then call the script from your web-browser.
  3. Try accessing the “heading.php” URL directly, with a sample string of text, such as heading.php?text=whatever. The script may give you useful error messages.
  4. If the script does not give you useful error messages, open the “heading.php” file in a text editor, and remove all of the ‘@’ characters. These characters are used by PHP to hide debugging information. If you see cache-related errors, that’s okay.
  5. If you’re able to see styled text, but it looks stretched or pixelated under Internet Explorer, you’re experiencing an IE cache bug. Any time you change the size or font-file for your script, you will need to change the filename of “heading.php” to something else, or IE will attempt to apply the old image sizes to your new images. There is no known workaround for this, except to do all your testing in Firefox.
  6. Some fonts have slightly awkward bounding-boxes for their characters, which causes DTR to occasionally crop them incorrectly. At this time the only way to fix such a problem is by manually padding the image boundaries inside the PHP script.
  7. If there are no spaces appearing between the words in your script, you probably have a slightly less-egregious version of the problem listed above.
  8. Some fonts do not contain glyphs for every character you may need. When this happens, such as with certain non-English characters, you will see blocks instead of words. The only fix for this problem is to use a different font.