I prepared an IMG tag to display a specified image URL by setting the src attribute using JavaScript. The src attribute of that image has been left empty for that purpose (see code below).

1
2
3

<div id="imgWrapper" style="display: none;">
  <img id="imgEl" src="" alt="Empty src attribute!" />
</div>

1
2
3
4

function showImage(src) {
  $('imgEl').src = src;
  $('imgWrapper').show();
}

Later I discovered by using Firebug that an additional request is being sent to the server. That request used the same path and query string as the original page request used. That way two tickets were added to the shopping cart instead of one. What was keeping me from discovering that issue earlier was that the first response from the server didn’t know yet about the second ticket – so the browser displayed only one ticket in the shopping cart. After reloading the second ticket showed up.

Some JavaScript debugging and HTML commenting later I found out that this behaviour comes from the IMG element with its empty src attribute. Firefox uses the currently called URL for that image to get its content! Even though the wrapping DIV is set to not display it the browser loads that images content.

Happy about figuring out what caused the problem I rewrote the JavaScript mechanism for displaying that specific image. Using the excellent Prototype Library the code snippet would look something like this:

1
2

<div id="imgWrapper" style="display: none;">
</div>

1
2
3
4
5
6
7
8
9

function showImage(src) {
  var wrapper = $('imgWrapper');
  var img = $(document.createElement('img'));
  img.src = src;
  img.alt = 'Don\'t use an empty src attribute!';
  wrapper.update('');
  wrapper.appendChild(img);
  wrapper.show();
}

Problem

A typed language defines types (such as integer, string, boolean, …) to variables – that way the contents of variables are clearly defined. When not having this restriction (as JavaScript doesn’t) one might do the following (JavaScript code):

1
2

var alpha = 'This is some String';
alpha = 5;

Most of the time this is OK, but there are times when you clearly need to know how values are evaluated. You might check for content if you need to do special things for special types. Let us assume you want to assign alpha a default value if it is empty (''). Your code might look like this:

3
4
5

if(alpha == '') {
    alpha = '-';
}

This is perfectly OK if alpha is a string.

Nevertheless, alpha could always be an integer, too. And strangely, when the value of alpha is 0 (zero) the boolean expression alpha == '' evaluates to true! So alpha would become '-' in our case, which is not exactly what we intended to do, right? This could lead to some serious errors in your programme flow.

Solution

What can you do about it? Is there anything you could do? Yes, there is. When operating with values like '' (empty string), true/false (boolean contents of variable) and 0 (zero) you should always use the strict equivalence operators: === (equals to and same type) and !== (not equals to or not same type). The above code would then look something like this:

3
4
5

if(alpha === '') {
    alpha = '-';
}

That small change effects the semantics of the code. It now sets the default value if and only if the value of alpha is equals to '' and the type of alpha is the same as the type of '' (which is string, respectively). In fact, this is what you wanted to do, isn’t it?

If you use strict equivalence operators correctly then you can make sure the code does what you want it to do. Keep this in mind if you like writing correct code using untyped languages.

See also

Here are some useful links for JavaScript and PHP:

• JavaScript – Comparison Operators
• PHP – Expressions

After adding a query counter and looking at some queries and code I found out how to improve the behaviour given. The thing that created most of the queries (>60%) was the recursive function isPublished(). But this function is needed to successfully tell if an image is published or not. So what to do? Use caching!

The cache did a good job, but could not reduce the number of queries the way I wanted it to be. So I tried harder on optimising queries, loops and object creation.

Finally I could gain a reduction of about 93% of the queries made when it was not optimised at all. This is great, you know, because an image gallery should not eat that much server performance.

Well, go to my installation of fotoalbum if you’d like to see it in action. If you like it, then you can also get a copy of it! If something fails then please report it to the fotoalbum page so I can help you or at least fix the problem.

Includes

1
2
3
4

#include <stdio.h>
#include <errno.h>
#include <string.h>
#include <time.h>

Distinguish Windows from Unix/Linux

We need to include winsock if we compile under Windows – otherwise use Unix/Linux headers for networking operations.

5
6
7
8
9
10
11
12
13
14

#ifdef _WIN32
#include <winsock.h>
#include <io.h>
#else
#include <sys/types.h>
#include <sys/socket.h>
#include <netinet/in.h>
#include <netdb.h>
#define closesocket(s) close(s)
#endif

Defining the port to connect to

The default port to connect to is 80. You can change it here if you need to.

15

#define HTTP_PORT 80

The push_value Function

16

void push_value( char *host, char *path, char *value ) {

Variable Declarations

17

    time_t tt;

This is the place to save the actual date string to. It’s length is limited to 15 characters – 14 for the date string and one for the terminating \0 at the end.

18

    char datum[15];

The actual HTTP Request is being written to this variable.

19

    char request[300];

These are needed to create the socket/connection.

20
21
22
23

    struct sockaddr_in server;
    struct hostent *host_info;
    unsigned long addr;
    int sock;

Windows needs Winsock initialisation

Windows TCP initialisation has to be done only if compiled under Windows.

24
25
26
27
28
29
30
31
32
33

#ifdef _WIN32
    short wVersReq;
    WSADATA wsaData;
    wVersReq = MAKEWORD( 1, 1 );
    if( WSAStartup( wVersReq, &wsaData ) != 0 ) {
        fprintf( stderr,
                 "Failed to init windows sockets\n" );
        return;
    }
#endif

Get actual date

strftime creates the actual date into datum, it uses the format given (“%Y%m%d%H%M%S”) and the current time from time(NULL).

34
35
36
37
38

    tt = time(NULL);
    strftime( datum,
              sizeof( datum ),
              "%Y%m%d%H%M%S",
              localtime(&tt) );

Create a socket

39
40
41
42
43

        sock = socket( PF_INET, SOCK_STREAM, 0 );
        if( sock < 0 ) {
            perror( "failed to create socket" );
            return;
        }

Create struct for connection partner

44
45

    memset( &server, 0, sizeof( server ) );
    if( ( addr = inet_addr( host ) ) != INADDR_NONE ) {

host is a numerical IP Address. Nothing special has to be done.

46
47
48

        memcpy( (char *) &server.sin_addr,
                &addr, sizeof( addr ) );
    } else {

host is a domain name. Convert this domain name into a numerical IP Address.

49
50
51
52
53
54
55
56
57
58
59

        host_info = gethostbyname( host );
        if( NULL == host_info ) {
            fprintf( stderr,
                     "unknown server: %s\n",
                     host );
            return;
        }
        memcpy( (char *) &server.sin_addr,
                host_info->h_addr,
                host_info->h_length );
    }

Set server parameters.

60
61

    server.sin_family = AF_INET;
    server.sin_port = htons( HTTP_PORT );

Create connection with partner

Time to get together. Creating connection to server.

62
63
64
65
66

    if( connect( sock, (struct sockaddr*) &server,
                 sizeof( server ) ) < 0 ) {
        perror( "can't connect to server" );
        return;
    }

Create HTTP 1.0 request with given value value and current time datum.

67
68
69
70
71

    sprintf( request,
             "GET %s?value=%s&time=%s HTTP/1.0\n\n",
             path,
             value,
             datum);

Send created HTTP request to server. Ignore response, as it is not needed (see specification).

72

    send( sock, request, sizeof( request ), 0 );

Close socket, we don’t need it anymore – “fire and forget”.

73
74

    closesocket( sock );
}

Call push_value

This is a small main function that gets the host, path and value from the command line and calls the push_value function. Originally for testing purpose only, but I left it in for you to test it on your own.

75
76
77
78
79
80
81
82
83

int main( int argc, char **argv ) {
    if( argc < 3 ) {
        fprintf( stderr, "usage: %s host path value",
                 argv[0] );
        return -1;
    }
    push_value( argv[1], argv[2], argv[3] );
    return 0;
}

Conclusion

With a shell script it would have been a lot easier. Given the above C programme we could create an equivalent bash shell script to do that:

1
2
3
4
5
6
7

#!/bin/sh
if [ $# -lt 3 ]; then
    echo "usage: $0 host path value"
    exit -1
fi
TIME=$(date +%Y%m%d%H%M%S)
wget -q -O /dev/null "http://$1:80$2?value=$3&time=$TIME"

On the other hand this shell script takes about twice the time to complete than the C programme. Decide for yourself if it’s worth the cost.

If you like you can download the C Source Code or the Bash Script. Compile the C programme with gcc -o pushclient pushclient.c.

The main goal was to implement a priority queue for a hospital. A must-have was to use templates to implement the so called pqueue. We were free to decide whether to use the Standard Template Library or not. My implementation uses the STL, though there’s a lot of understanding necessary. Anyway it is a lot easier than writing the data structures (like a list, vector, map, …) by hand.

Frankly, I had a lot to learn to write that programme, since I’m quite new to C++ and templating. But it’s done now, and I’m glad and relieved I’ve made it that far.

Changes

There are no new features except the support for themes. If you know Smarty then you’ll be able to create new themes easily. If you don’t know Smarty, then go and get a look – it’s pretty simple and straight forward to use.

I removed the fotoalbum logo from the background at the bottom right because it made scrolling very slow. Instead I created a bar with information on the current view (albums, album, image, search) and added the logo there. This information bar replaces the information div on various places (not on all places though, because the image view needs to display much more information than available in the information bar).

Download

As usual I’ll give you a download link to the new version of fotoalbum and the corresponding fotoalbum wordpress plugin. If you need help give me some feedback.

Green Meadow Image

The image that was used can be found here: GNOME Art – Nature Backgrounds.

Download

Of course you can download the Green Meadow GDM Theme. Have fun using it and leave some comment if you like.

Changes

• added a configuration screen
• using objects in templates
• removing the m:n relation between images and album
• made changes in templates, classes and others to map the new relation
• an image is now an image without any more information than whats in the database. It has no more pointers in it
• an album now holds all additional information about pages, next/prev image, limits, and so on
• a date editor has been added to help people with the date of images and albums
• many bugfixes

Download

You can get the latest version by browsing the archive or you can get it directly from here:

• fotoalbum r1122 for the fotoalbum
• fotoalbum WordPress plugin for the WordPress plugin.

Overview

This plugin is described in detail at the WordPress fotoalbum Plugin page. You’ll find the syntax, some more examples and a FAQ there. An example of using the fotoalbum Plugin by displaying an album is followed.

Example

My Friends Lena and Michi were on the I-Wolf concert at the pe_zwei in Klagenfurt. Michi had his faboulous Canon EOS 20D with him and took some great shots from the location and – whats more interesting – from I-Wolf and company. Because it was very dark he had to use a flash (Canon Speedlite 580EX) to lighten the room, which nevertheless creates high quality fotos. Let’s have a look.

This is the code I used to display the following album images.

The Problem

Image 1: fotoalbum float bug (IE)

In my fotoalbum I use a div for the content containing left-floated div’s (album covers and image thumbnails). This content div has a right margin such that the information div on the right side will not be overlapped by them. Mozilla Firefox does this very well, IE doesn’t like it that much. Below the bottom of the information div the thumbnails are floating to the right, ignoring the right margin. As you can imagine I was not quite happy about it. But that’s the way it is I thought.

About Hacks

Normally I don’t like browser hacks that much. They can be useful, but you never know in what way the next version of a browser is going to behave. Most hacks work around IE bugs, where there’s no other solution. I prefer using conditional comments when it comes to check for IE.

Solution – the Holly Hack

Image 2: fotoalbum float bug solved (IE)

The Holly Hack uses a CSS rule, that other browsers than IE simply ignore. * html { ... } is being assigned to an html element lying in any element in the DOM. Because the html element is the root element, standard compliant browsers do not apply this rule to any element. IE does. IE also needs a so called “hasLayout” property to be set to true – otherwise the dimension of the element will not be determined. So the CSS will look like this when applied:

* html { height: 1%; }

This time I found this hack useful, so I tried applying part of it to my style. I left out the * html {} snipped and only applied height: 1% to the #content rule to see what happens.

#content { … height: 1%; … }

It tells the element with id “content” to have a height of 1% of the visible browser height. That might have created other problems, so that I would have to use a workaround for that, but hey – it worked the way I hoped it would do! IE now floats correctly around the information div.

Conclusion

When you use floating of elements be very careful with IE. An element with no dimension (width, height, display) containing floated elements may be rendered abnormally and cause your layout to fail. To avoid this use a height or width where possible. If you can’t avoid it see if this workaround may help and doesn’t create more problems – else use conditional comments to import a special stylesheet.