The catch? Most of them can’t.

Your website is your identity, and if it looks horrendous when it loads, the likelihood is that someone will make a snap judgement about your content, your services and your willingness to put effort into your online presence. This sounds harsh, but realistically, companies should have been investing in high-quality websites ten years ago. In the second decade into the new millennium, there’s no excuse.

So what makes a good website, and how do you invest in one? For starters, you’ll find that user experiences are going to improve when everything is neat, clean, well-organised and easy to use. Whether you’re running Amazon or o2.co.uk, your users need to be able to do whatever they want (within the bounds of the site’s purpose and their user privileges). If they can’t, they’ll simply go somewhere they can.

Investing in your website is simple – hire good web developers, make sure your servers are high-quality and never prone to more than .1% downtime, and hire some staff to run the site, if you’re a large enough company. A good team of staff will be comprised of a web administrator, someone on content, someone promoting the site (you can combine these last two roles, if you wish), and someone working on helping users who may have any queries.

Lastly, think of your website as the modern equivalent of a shop front. If it looks like something years out of date, without a door handle and with all the products lacking price tags, then you’re going to run into trouble. So keep everything clean and appealing, and it’s going to be a lot easier to generate a client/consumer base that appreciates and is loyal to your dedication to your and their online presence.

Web Development

Whether you have an old website that needs updating, want a shiny new look for your company on the web, or need an e-commerce store, we can help you out. We will analyze your requirements and develop solutions that best match your budget.

We specialize in websites using frameworks such as WordPress (both as blog and as Content Management System) and Codeigniter, as well as pure PHP. Although we avoid starting new Web projects in Perl, we will be more than happy to maintain your legacy Perl application or website.

Intranet/Extranet Applications

Sometimes just having a website isn’t enough. We’ve developed all kinds of administrative systems over the years. A few examples are: a student central for a language school, tuition tracking software, a web-based chat application, support ticket tracking software, a data synchronization tool, a content scheduler, and many many more. Let us know what you need and we’ll surely deliver!

Customization of Third Party Software

If it’s written in PHP or Perl, we can handle it. Just let us know what kinds of changes you need! Some software we’ve customized over the years include OSTicket, SiteBuildIt, Codeigniter, WordPress, Zen-Cart, and Magento.

Weekend Training Workshops

With almost 20 years of training experience, we can teach you all you need to know about web programming and Linux system administration. We give weekend workshops on Perl 5, PHP 5, HTML, SQL (MySQL), CSS, Javascript, Perl for system administration, and Linux S.A. Contact us to book your next training!

Here’s how it works:

1. Go to www.cronblocks.com and click on Plans to sign up – there’s a free plan if you just want to see how it works. Check out the premium plans once you’re satisfied it’s what you need.
2. After signing up, and activating your account (you’ll get an activation email), click on the Channels link. The Channels allow you to control where on your page you want the content to appear.
3. Configure your channel to run by server (EDT) or client time – I recommend client time since you’ll probably be receiving people from across several different time zones.
4. You can choose to copy the JS snippet at this time, or leave it for later – it’s the JS snippet that you’ll use on your website to show the content
5. Once you have the channel set up, you can create your scheduled blocks for that channel. Blocks are the actual content that’ll show on your page. You can create as many schedules for a block as you want/need – either by months/days or by day-of-week. And you get to set the time you want them to show, too.
6. If you have multiple blocks to show that overlap a given time slot, you can set them to have different priorities (weight). Higher weights trump lower ones. Think of it as stack, with heavier items being served first. Overlapping items with same weight will be picked randomly.

And that’s all there is to it. Your site will show whatever block is set up for that given timestamp.

What uses do you have for this? Well, for starters, you can segment your ads by time – sell your “prime time” for a higher price than other times (for those of you who don’t use ad networks). You can also include some JS in your block to make it refresh every 15 seconds or so. Basically, your imagination is the limit.

I’ll create new posts in the future with more examples. In the meantime, here’s a test block for you.

Cheers,
Vinny

I’m creating a new version of an interface at work and tested with FireFox during development. When I opened it in Safari, all I got was the background image. No content at all. I Googled and several people reported having the same problem and said that clearing the cache would do the trick. It did not.

In the end, the issue was a missing ‘–>’ inside a script tag.

<script type="text/javascript"> <!-- // open a comment for older browsers - is this actually required still??
/* lots of JS here */

// There should be a close comment (-->)  here!
</script>

Safari, not finding the closing comment tag, simply considered all of the HTML to be commented out.

I hope this helps!

Book Suggestions:

I’d like to announce that I’ve debuted on suite101.com. My first article there was how to optimize your job hunting using RSS feeds.

Check out the article here.

What’s Ajax?

Ajax stands for Asynchronous Javascript And XML. It’s a way to call back-end scripts asynchronously – that is, without impacting user experience/flow. Basically, you don’t even see the cursor become an hourglass or whatever other “waiting/processing” icon your system uses. It’s not a language, but a technique. As for back-end scripts, you can use whatever you feel more comfortable with: PHP, Perl, Java, JSP, Shell, C, etc. The way to choose which technology to use as back-end is not outside the scope of this article.

Historical approach for calling back-end apps

Throughout web-development history, the very first way used to achieve back-end processing followed by front-end display was to create a form and set the back-end script as the action to that form. Upon submission, the form fields would be sent to the back-end script as a series of special environment variables, which would then be handled by the programmed logic. The back-end output would be displayed on the screen (either the same page/frame or a different page/frame, depending on the target attribute of the form).

The catch 22 of this approach is that if you want to present another form after processing, that form must be produced by the back-end script, which leads to maintenance mayhem – to add or remove a field, you have to do so in both the original HTML and in the HTML of the back-end script.

Hidden IFRAMES and Javascript to the rescue

The natural evolution of the regular form submission was to avoid having to generate HTML from the back-end script. A technique that I eventually came up with (had never seen it before, but it was probably already out there) prior to adhering to Ajax was using a hidden IFRAME as target to a simple form containing an action_cd field and a data field. There would not be a regular submit button, but a set of input elements with onclick or onchange events and a regular (non-submit) button at the end.

In this approach, Javascript did all the work – when the user clicked the pseudo-submit button, an onclick event would read all the input fields and join them like a regular HTTP query (field1=val1&field2=val2…). The action_cd value would be dynamically evaluated and the back-end script would receive the data string and action code and process it. Javascript would perform the submission when, say, a value of a drop-down field was selected, and the output would be a series of dynamically generated Javascript commands inside the IFRAME. Those commands would manipulate the user’s form (e.g. Auto-populate a “state” drop-down after selecting a “country” value).

Although this approach successfully handled the no-longer-need to submit and reload a form, it still had 2 main downsides: generating and maintaining Javascript code is not a simple task (especially due to having to escape quotes), and the whole procedure was still synchronous – you could see the hourglass, browser process bars, clicking sounds (IE), etc. It’s much better user experience, but still not the real deal, seamless/transparent back-end processing.

The XmlHttpRequest object

Javascript back-end calls are made possible thanks to the XmlHttpRequest object that most modern browsers now support. For IE 6 and older, it is done through an ActiveXObject.

Javascript code to initialize Ajax object

var xmlHttp; // global variable. It’s important for later on

function GetXmlHttpObject(){

      if (window.XMLHttpRequest){
        // code for IE7+, Firefox, Chrome, Opera, Safari
        return new XMLHttpRequest();
      }

      if (window.ActiveXObject){
        // code for IE6, IE5
        return new ActiveXObject("Microsoft.XMLHTTP");
      }
      return null;
}

It’s important to have a global variable in which to assign the XMLHttpRequest object, since this technique has its shortcomings when dealing with passing variables around. We’ll understand that better shortly. The function checks for the existence of window.XMLHttpRequest which is used in IE7 (finally, it complies to standards!), Firefox, and other non IE browsers, and checks for window.ActiveXObject existence for IE6 and 5. I’m not sure if this works on IE4 – it probably does not, but hopefully IE4 is already in extinction. If neither checks work, it returns null, which will be handled in the function calling the XMLHttpObject.

Making Synchronous Ajax calls (GET method)

Although the hype of Ajax is due to the “Asynchronosity” of the technique, it is also capable of making synchronous calls. Synchronous calls are important in cases where you don’t want to allow the user to do something while the back-end is checking a previous action, but also don’t want to have to submit the whole form.

function synch_call() {

      // initialize Ajax object
      var xmlHttp = GetXmlHttpObject(); 

      // Set the URL to your backend script with query vars
      var url = “/url/to/your/backend/script?with=var1&and=var2”;

      // Synchronous call
      xmlHttp.open("GET",url,false); // "false" means asynchronous = false
      xmlHttp.send(null);

      // the code above does the back-end call. Now we handle the response
      // this function continues further down in the tutorial

}

Ajax calls can be done using GET or POST methods. I recommend GET methods for small queries, POST for large ones. There used to be a limit of 255 characters on URL fields – not sure if a) this is still true; b) this could apply to these Ajax techniques.

The call to the back-end is done by 2 commands: xmlHttp.open(Method,url,async), and the xmlHttp.send(null) calls. For POST method, this is a little different, so we’ll stick to GET calls for the time being.

Handling back-end reply

Asynchronous Javascript And XML isn’t the perfect name for Ajax. It should be more like AjaR, where R stands for Reply. The reason is because the reply can be either an XML structure or a plain text. We use xmlHttp.responseXML.documentElement if we’re handling XML, or a plain xmlHttp.responseText for plain text. Actually, we can use the latter for XML as well, especially when debugging the code (when you want to pop up the XML reply).

We use a try/catch block to capture any errors:

function synch_call() {

      // initialize Ajax object
      var xmlHttp = GetXmlHttpObject(); 

      // Set the URL to your backend script with query vars
      var url = “/url/to/your/backend/script?with=var1&and=var2”;

      // Synchronous call

      xmlHttp.open("GET",url,false); // “false” means asynchronous = false
      xmlHttp.send(null);

      // the code above does the back-end call. Now we handle the response
      try {            

            alert("Ajax Response: n"+xmlHttp.responseText); // Just pop-up the reply
            return false;
      }
      catch(e) {
            alert(e); // if error, show it as a pop-up
            return false;
      }
}

To handle the reply as XML, you need to a) make sure your back-end script outputs an XML structure, and b), replace xmlHttp.reponseText for xmlHttp.responseXML.documentElement.

// Just the try/catch block changed        

       try {
              data = xmlHttp.responseXML.documentElement;
        }
        catch(e) {
               alert(e);
               return false;
        }

The data variable now holds a DOM object of the XML structure. To access its elements, we use DOM functions.

Example XML structure:

<OUT>
      <STATUS>Success</STATUS>
      <MSG type="some_type">This is a test message</MSG>
</OUT>

Accessing Example XML through DOM:

      // gets the Success text
      var msg_status = data.getElementsByTagName(‘STATUS’)[0].childNodes[0].nodeValue;

      // Assign MSG object to msg variable
      var msg = data.getElementsByTagName(‘MSG’)[0]; 

      // gets the attribute “type”
      var msg_type = msg.getAttribute(‘type’); 

      // gets the text inside the MSG node
      var msg_text = msg.childNodes[0].nodeValue;

Putting it all together

function synch_call() {

      // initialize Ajax object
      var xmlHttp = GetXmlHttpObject(); 

      // Set the URL to your backend script with query vars
      var url = “/url/to/your/backend/script?with=var1&and=var2”; 

      // Synchronous call
      xmlHttp.open("GET",url,false); // "false" means asynchronous = false
      xmlHttp.send(null);

      // the code above does the back-end call. Now we handle the response

      try {
            data = xmlHttp.responseXML.documentElement;
       }
       catch(e) {
             alert(e);
             return false;
       }

      // gets the Success text
      var msg_status = data.getElementsByTagName(‘STATUS’)[0].childNodes[0].nodeValue; 

      // Assign MSG object to msg variable
      var msg = data.getElementsByTagName(‘MSG’)[0]; 

      // gets the attribute “type”
      var msg_type = msg.getAttribute(‘type’); 

      // gets the text inside the MSG node
      var msg_text = msg.childNodes[0].nodeValue;
      alert("Got the following backend reply: " + msg_status + "n" + msg + "n" + msg_type + "n" + msg_text);

      return true;
}

Making Asynchronous Ajax calls (GET method)

We saw on page 2 that what controls synchronicity of the Ajax call is the true/false value in the open() command. However, we also need changes in the way we handle the reply. We do that by setting onreadystatechange property on the xmlHttp object.

OnReadyStateChange should be a function that will check the readyState attribute of the xmlHttp object.

Understanding readyState

readyStates are the way Javascript controls what stage of the process the call is in. It ranges from 0 to 4, where 4 is the completed reply from the back-end script. We normally only care about readyState == 4. Here are the codes and meaning:

Setting onreadystatechange

onreadystatechange can be assigned a anonymous function() { } block, or a named function. Just be careful with function parameters – to this day, I have not been able to pass any parameters to the functions set to onreadystatechange. Hence the need for some global variables in play.

Let’s copy over our sync_call() function and make it Async_call()

function Asynch_call() {

      // initialize Ajax object
      var xmlHttp = GetXmlHttpObject(); 

      // Set the URL to your backend script with query vars
      var url = “/url/to/your/backend/script?with=var1&and=var2”;

      // onreadystatechange must be set BEFORE making the call

      // it takes the response handling code that we had in the sync_call() previously
      xmlHttp.onreadystatechange = function() {

            if (xmlHttp.readyState == 4) { // Complete

                  // Now we handle the response within the onreadystatechange
                  try {
                        data = xmlHttp.responseXML.documentElement;
                  }
                  catch(e) {
                        alert(e);
                        return false;
                  }

                  // gets the Success text
                  var msg_status = data.getElementsByTagName(‘STATUS’)[0].childNodes[0].nodeValue; 

                  // Assign MSG object to msg variable
                  var msg = data.getElementsByTagName(‘MSG’)[0]; 

                  // gets the attribute "type"
                  var msg_type = msg.getAttribute('type'); 

                  // gets the text inside the MSG node
                  var msg_text = msg.childNodes[0].nodeValue;

                  alert("Got the following backend reply: " + msg_status + "n" + msg + "n" + msg_type + "n" + msg_text);
                  return true;
            }

      }; // don’t forget the ';' at the end of the function() {} block!!

      // Asynchronous call
      xmlHttp.open("GET",url,true); // 'true' means asynchronous = true
      xmlHttp.send(null);
}

As mentioned before, you can separate the anonymous function assignment into a named function. The good side of this is that your functions get more manageable, but the downside is that you might need global variables in order to share values between the main function and the onreadystatechange,/code> function.

function Asynch_call() {

      // initialize Ajax object
      var xmlHttp = GetXmlHttpObject(); 

      // Set the URL to your backend script with query vars
      var url = “/url/to/your/backend/script?with=var1&and=var2”; 

      // onreadystatechange must be set BEFORE making the call

      // it takes the response handling code that we had in the sync_call previously
      xmlHttp.onreadystatechange = handlerfunction; // See separate function below    

      // Asynchronous call
      xmlHttp.open("GET",url,true); // “true” means asynchronous = true
      xmlHttp.send(null);
}

function handlerfunction() {

      if (xmlHttp.readyState == 4) { // Complete – must be global xmlHttp variable

            // Now we handle the response within the onreadystatechange
            try {
                  data = xmlHttp.responseXML.documentElement;
            }
            catch(e) {
                  alert(e);
                  return false;
            }

             // gets the Success text
            var msg_status = data.getElementsByTagName(‘STATUS’)[0].childNodes[0].nodeValue; 

            // Assign MSG object to msg variable
            var msg = data.getElementsByTagName(‘MSG’)[0]; 

            // gets the attribute “type”
            var msg_type = msg.getAttribute(‘type’); 

            // gets the text inside the MSG node
            var msg_text = msg.childNodes[0].nodeValue;

            alert("Got the following back-end reply: " + msg_status + "n" + msg + "n" + msg_type + "n" + msg_text);
            return true;

      }
}

function build_post_string(frm) {

      var str;
      var poststr_array = [];

      if (!frm.id) {
            // assume it's a string. get the form object
            frm = document.getElementById(frm);
      }

      for (i=0;i<frm.elements.length;i++){

            var elem = frm.elements[i];

            if (!elem.id) {
                  // skip any fields that don't have IDs
                  continue;
            }

            if (elem.type == 'radio' || elem.type == 'checkbox') {

                  // only grab radio buttons and checkboxes that are checked
                  if (!elem.checked) {
                        continue;
                  }

            }            

            // get select values
            if (elem.nodeName.match(/SELECT/i) && elem.multiple) {

                  var sel_array = [];

                  for (var o=0;o<elem.options.length;o++) {

                        if (elem.options[o].selected) {
                              sel_array[sel_array.length] = elem.id+"="+elem.options[o].value;
                        }

                  }

                  var sel_str = sel_array.join('&');

                  // build key/value pairs for SELECTs
                  poststr_array[poststr_array.length] = sel_str;
            }
            else if (elem.nodeName.match(/SELECT/i)) {
                  poststr_array[poststr_array.length] = elem.id+'='+elem.options[elem.selectedIndex].value;
            }
            else {
                  // build key/value pairs for everything else
                  poststr_array[poststr_array.length] = elem.id+"="+elem.value;
            }

      }

      // build and return str
      str = poststr_array.join("&");
      return str;
}

function Asynch_call_with_post() {

      // initialize Ajax object
      var xmlHttp = GetXmlHttpObject(); 

      // Set the URL to your backend script with query vars
      var post_str = build_post_string(‘my_form’); 

      var url = “/url/to/your/backend/script?” + post_str;

      // onreadystatechange must be set BEFORE making the call
      // it takes the response handling code that we had in the sync_call previously
      xmlHttp.onreadystatechange = function() {

            if (xmlHttp.readyState == 4) { // Complete

                   // Now we handle the response within the onreadystatechange
                   try {
                         data = xmlHttp.responseXML.documentElement;
                    }
                    catch(e) {
                         alert(e);
                         return false;
                    }

                     // gets the Success text
                     var msg_status = data.getElementsByTagName(‘STATUS’)[0].childNodes[0].nodeValue; 

                      // Assign MSG object to msg variable
                     var msg = data.getElementsByTagName(‘MSG’)[0]; 

                     // gets the attribute “type”
                     var msg_type = msg.getAttribute(‘type’); 

                     // gets the text inside the MSG node
                     var msg_text = msg.childNodes[0].nodeValue;
                     alert("Got the following backend reply: " + msg_status + "n" + msg + "n" + msg_type + "n" + msg_text);
                     return true;
               }

        }; // don't forget the ';' at the end of the function() {} block

        // Asynchronous call
        xmlHttp.open('POST',url, true); // Replace "GET" with "POST"

        // Set headers
        xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlHttp.setRequestHeader("Content-length", url.length);
        xmlHttp.setRequestHeader("Connection", "close");

        // Send the packet. Note that it’s no longer null as parameter to send
        xmlHttp.send(url);
}

        document.getElementById(‘wait_image’).display = ‘block’;
        document.getElementById(‘wait_image’).display = ‘none’;

        header("Expires: Fri, 09 Jan 1981 05:00:00 GMT");
        header("Cache-Control: no-store, no-cache, must-revalidate");
        header("Cache-Control: post-check=0, pre-check=0", FALSE); // FALSE means add this Cache-Control line instead of replacing the previous one
        header("Pragma: no-cache");
        header("Content-type: text/xml");