Test Passed

Since this was the last week dedicated to the front end development of the file sharing site, we will be testing its functionality with regards to CSS and JavaScript functions. The tests will be based on the following criteria:

  1. Check the visability of controls on small screens, such as mobile devices and tablets.
  2. Check the Javascript functions and their validations to make sure they are displayed correctly.
  3. Check linking pages and make sure that the links are set correctly.

Check the visability of controls on small screens, such as mobile devices and tablets.

One of the main tests which were made were done throough the screen emulator available on Google Chrome and Firefox. We made sure that all controls are visible and well placed on the screen, without sacrificing the quality of the site itself. Media queries were used in the css files to size the elements correclty to the size of the screen.

Check the Javascript functions and their validations to make sure they are displayed correctly.

Most of the elements in the forms are validated using Javascript, since they will relate directly with the database. Although Javascript can easily be disabled on most browsers, by default, the website makes the necessary cehcks before updating the data in the database. The checks involved here were done to ensure that the correct data is entered in fields when Javascript is on.

Check linking pages and make sure that the links are set correctly.

This was a simple check to make sure that the page links were entered correctly, and that the links point to the correct pages. Most of all, it was checked that the error page is shown if the user tries to access an invalid pages.

the error page showing an error
the error page showing an error
The login page of the website
The login page of the website
the main page of the site
the main page of the site
the register page
the settings page

JavaScript – Scripting WITHOUT the Java

A very weird title to a programming language which has nothing to do with Java – Brendan Eich, one of the main creators JavaScript, admit in an interview with Paul Krill that:

It was all within six months from May till December (1995) that it was Mocha and then LiveScript. And then in early December, Netscape and Sun did a license agreement and it became JavaScript. And the idea was to make it a complementary scripting language to go with Java, with the compiled language.

JavaScript is indeed a scripting language, used to make client side validations on a website, and this has been its use in FireFile. In reality, JavaScript can be easily disabled through the settings of any browser, disabling any validations made on the client side. This is the reason why validations need to be made on both client and server sides. This will be explained later on in this series of blogs, when we will deal with PHP server-side scripting.

Nowadays Javascript has become a very powerful tool around which several APIs have been built to make the user experience within the website, a pleasant one. Some of the notable APIs developed through Javascript are JQuery, ext.js, node.js and Sencha. All of these have given a complete overhaul to the web experience in the last couple of years. Unfortunately, these won’t be used in the FireFile website due to the assignments requirements.

Instead, pure JavaScript will be used to cause client-side validations on the website. One of the main functions of this scripting language is to provide a validation tool, to check the user’s input, before actually posting the data to the server. Such an example is made on the email validation in the login page, stating that neither the email or password field can be left empty:

function validate() {
    if (document.getElementById("email").value.length == 0) {
        alert("Your email address cannot be left empty.");
    }
    else if (document.getElementById("password").value.length < 8) {
        alert("Your password cannot be left empty.");
    }
    else {
        location.href="main.html";
    }
}

The function above validates that some data is entered in the email and password fields, and only lets the user login, if the data is correct.

Another notable feature built with JavaScript is the password strength check, used in the register new user and settings pages. The following function classifies the strength of the password to weak, medium or strong, validating against the existence of Lowercase characters, Uppercase characters and numbers in the password field.

function chkPasswordStrength() {
     if (document.getElementById("password").value.length > 7) {
        document.getElementById("weak").style.visibility = 'visible';
     }
     //if password field has both lower and uppercase characters give 1 point and set to medium
     if ( (document.getElementById("password").value.match(/[a-z]/) ) && (document.getElementById("password").value.match(/[A-Z]/)) &&  (document.getElementById("password").value.length > 7)){
         document.getElementById("medium").style.visibility = 'visible';
     }
     //if password field has at least one number give 1 point and set to strong
     if (document.getElementById("password").value.match(/\d+/) && (document.getElementById("password").value.length > 7)) {
         document.getElementById("medium").style.visibility = 'visible';
     }
    if (document.getElementById("password").value.match(/\d+/) && (document.getElementById("password").value.length > 7) && (document.getElementById("password").value.match(/[a-z]/) ) && (document.getElementById("password").value.match(/[A-Z]/))) {
         document.getElementById("strong").style.visibility = 'visible';
     }
    
    //if characters entered are less than 7, all verification fields are set to invisible
    if (document.getElementById("password").value.length < 8) {
        document.getElementById("weak").style.visibility = 'hidden';
        document.getElementById("medium").style.visibility = 'hidden';
        document.getElementById("strong").style.visibility = 'hidden';
    }
}

Classifying Super Schemas – CSS

The side to side tags which go with HTML are the CSS ones – also called as CSS. Nowadays CSS has gone through a complete overhaul as implemented in the 3rd version of CSS. This is the version of CSS used in the FireFile website.

The advantages of CSS3 are many new features which change a boring monochromed site into a modern attractive User Interface, complete with shadowed, multicolored divs and other elements.

One of the decisions I took when developing the front end was to define all the css in a seperate file from the CSS. Together with that, a seperate CSS file was used to make the website responsive on devices with smaller screen such as smartphones and tablets. To do this, media-query was used in the second css file, to make the content readable on smaller screens.

Another issue which was addressed in css, was the cross-browser compatability, where the css file checks for the current browser in which the webpage is being rendered, and optimises the website for that browser. Let’s take for example the header, which contains multiple colors,

header {

height: 40px;
width: 100%;
position: fixed;
top: 0px;
z-index: 10020;
background: -webkit-linear-gradient(270deg, #b20000, #7f0000);
background: linear-gradient(270deg, #b20000, #7f0000); /*Always put the unprefixed version last*/
border-radius: 2px; /*No prefix required here*/
-webkit-box-shadow: rgba(110, 110, 110, 0.6) 0px 4px 4px;
box-shadow: rgba(110, 110, 110, 0.6) 0px 4px 4px; /*Always put the unprefixed version last*/
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap; /*Accepts wrap | nowrap | wrap-reverse */
-webkit-flex-direction: row;
flex-direction: row; /*row is used instead box-orient that was only supported in FireFox*/

}

As the comments to the code show, webkit is only used to populate the style in Google Chrome. Therefore the css file detects the correct browser and corrects the css accordingly.

Another feature used in CSS is the media-query element, which lets the css file detect the size of the screen on which the website is being rendered and sets the html to be shown in a friendly manner to the device.

@media screen and (max-width: 320px) {

}

All the CSS elements in the media-query file need to have their own implemented views, so as to be friendly to the particular device. The table in the following page shows all the tweaks which can be made to elements by using the media-query.