The search engine makers have to sort it out for us. How can we help?

At first I thought social media’s Likes and Thumb-up‘s could help search engines a bit. Then I imagined, if SE would pay attention to these, soon Like Farms would emerge, providing Likes for money. People would earn a living ‘Liking’ webpages, clicking all day cheerfully on selected buttons…

Maybe we can help by not confusing the search engine and just write like we normally would. Then the search engines could come up with a kind of Turing test, to separate the engine pleasers to the righteous men. Without that confusion, they could evolve much faster!

Forms often use input elements (<input>) and link elements (<a>) side by side. For example, to submit a form you’d use

<input type="submit" value="Submit">

and to cancel

<a href="page-you-come-from.html">Cancel</a>.

It turns out it’s not so easy to have the two elements look the same. You might be tempted to use two input elements or two link elements instead of one of both. That would however mean your page would require javascript to work. Well, I sold my soul to Progressive Enhancement, so I could never do that.

Apply the same style to both

To have <input> and <a> look alike you could style both elements with:

.button
{
    background-color:#d8d2d0;
    border-width:0px;
    padding:4px;
}

And it would look like this:

Applying the same style to both elements

Unfortunately, the ‘Cancel’ button is a little smaller in height than the other one. A minor issue perhaps, but for a professional site it’s unacceptable.

A small improvement

A recommended method  is to add

display: inline-block

to the style for the button class. I agree, makes sense. Now I’ve got:

A better styling?

Instead of being 2 pixels to small, it’s now 1 pixel to big. So hurrah!

Progressive enhancement

So I decided people without javascript have to deal with that pixel extra. To solve the problem in the general case I just transform the link element into a button (using javascript).

And here’s the code that does that (using jQuery to save a line of code or two).

$('form a.button').toButton();

$.fn.toButton = function()
{
    var url = $(this).attr('href');  // remember url

    // create a button
    var inp = document.createElement ('input');
    $(inp).attr ( { type : 'button', value : this.html(), class : 'button' }).click ( function () {
        // Direct to url. I use ajax here
        sendRequest ( url, updateWerkblad );
    });
    // replace it
    $(this).replaceWith( inp );
}

Finally!

I hope you like it!

Suppose you have an element on a webpage that’s just there for fallback for users without javascript. For example a form that submits itself at onchange or onclick events of it’s elements.

Removing the button after the page is loaded (which is easy: element.style.display=’none’) may cause noise on the page. It’s there, then it’s gone, maybe causing containers to be redrawn too.

Changing the rules of  a CSS file is cumbersome (http://www.quirksmode.org/dom/changess.html).

So in this case I use document.write() to ‘manually’ add a style for javascript users:

document.write("<style>#submit{display:none}</style>");

Take care this script is run as early as possible. Writing a link to a separate CSS file is also possible, of course.

jQuery

Using the jQuery ready handler, the hiding of the elements also seems to be in time (you won’t see it).

You could decide to forget about readjusting the row colouring, but that would look clumsy: the striping becomes chaotic. In that case better to not use row striping at all.

I found that using the option revert  helps. It defines a small animation (I chose 200 ms) that gives enough reassurance the operation succeeded.

rem echo off
set p=%1
python pythons/makedirs.py %p%
php phps/createdb.php %p%

It takes one or two actions and I have a running website template.

At that point a graphical tool is used to shape the project further (database/information design). This tool is the CMS itself, in developer mode.

The result of the query contains the matching elements, wrapped in an object that allows to perform methods to these elements. It is easy to extend this wrapper with your own functionality, by programming plug-ins.

When you run a script as a cron job it may not work as expected. There’s no web server in this scenario, and the array $_SERVER differs accordingly. Printing the values out, e.g.

<?php
 print_r ( $_SERVER );
?>

will make it all clear.

In my case I decided to use the HOME and LOGNAME variables when using cron, so now the script knows how to find it’s way no matter how it is called.

define ( "CRON", empty ( $_SERVER['DOCUMENT_ROOT'] ) ? TRUE : FALSE );
define ( "DOC_ROOT", CRON ? $_SERVER['HOME'] . "/" . $_SERVER['LOGNAME'] : $_SERVER['DOCUMENT_ROOT'] );

SCRIPT_FILENAME, which is the same in both scenarios is also a good candidate to work with.

I build websites for modern web-standards-compliant browsers. Other browsers, that are used a lot (at this moment IE7 and 8), will render the site near-perfect. They may miss a rounded corner or drop shadow, but have complete functionality.

Optional extra work
If the client so wishes, I will add code, graphics or whatever it takes, to fix problems with IE that come from the browser not understanding CSS3 or other quirks. This is extra work, and also costs extra.

Why not serve any browser?
What’s wrong with the principle ‘render the site perfectly in any frequently used browser’? Well, it takes a lot of time to cater the special needs of specific, old browsers. This time can be better spent improving the site for everyone, not just helpless/conservative IE-users.

• Always work in layer0.
• Group entities in groups or components.
• Organize by associating grouped entities to layers.