However, in practice, programming turns out to be much less scary than designers imagine it to be. Today I’m going to show you how programming is a skill that you can learn once and then apply to each new language that you pick up. We’ll take a look at three different programming constructs in three different languages to see how similar they really are. If you’d like to get started in programming but don’t know a single thing about it, this article is for you.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Fear Not, You Just Might Like It

This site is generally targeted towards designers, and from personal experience I know that approaching programming for the first time as a designer is extremely intimidating. Designers are visual thinkers, we thrive through creation and experimentation using our mind’s eye and an expert knowledge of the tools of our trade.

Generally, we’re the kind of people that hated math class and anything else where creativity didn’t seem to have an obvious foothold.

Programmers are problem solvers. They love logic puzzles and tinkering with code for hours in the absolute absence of visuals of any kind. Keep in mind that these two categories of people aren’t mutually exclusive. If you fit both descriptions, you’ll likely absolutely love programming.

Not HTML and CSS

We’re quickly reaching a point where most web designers know at least a little bit about coding HTML and/or CSS. This experience and knowledge will indeed help you, but perhaps not as much as you might think.

HTML is a *markup language* and CSS is a *style sheet language*, they’re used primarily to format and insert fairly static content into pre-built pages. How you work with them is in all reality very different from wielding a *scripting language* or *object-oriented programming language*, which are the kind of hardcore programming tools you’ll find in use on the web today.

The Big Secret About Programming

That last part was the bad news, but fear not, there’s good news on the horizon. If you walk into a bookstore and wander over to the programming section, you’re likely to be completely intimidated. There are so many different things to learn! This intimidation is furthered when you happen to meet one of the super geniuses that seems to know pretty much all of the programming languages in existence. How in the world do people find the time to learn this stuff? Many beginners are so completely put off at this point that they give up before they ever even try.

The big secret that you don’t know if you’ve never really jumped into programming is that programming languages tend to be very similar. Many of them use the same building blocks and similar tool sets to achieve their goals.

I learned this little secret in my first interaction with programming: a Java class in college (not to be confused with JavaScript). Though I myself was a strapping young lad, the class was largely filled with men in their 30s and 40s. Virtually all of them already had jobs in programming and had been at it for twenty years or more. They were simply employed in the use of other languages and attempting to expand their skill set, often at their employer’s encouragement and expense.

Walking into the class on the first day, none of us knew much, if anything, about Java. However, by the third class, these guys were breezing past me. I was writing horribly simple little code snippets based on the fundamentals that we had learned. These guys were taking the same fundamentals and building elaborate applications with all kinds of cool functions way beyond the requirements for the assignment.

Was I inept? It turns out, fortunately for me, that the answer wasn’t so simple. The reality was that we were learning very different things. I was learning to program through the lens of Java, these guys already knew all about programming and merely needed a little help figuring out how to translate that knowledge into Java. I was a toddler learning to speak for the first time and they were multi-linguals picking up yet another language.

The point of this long story is to illustrate that, after you really get into programming or scripting with one language, the rest becomes much easier because you’ve dramatically reduced the learning curve. If you know how to code in PHP, the jump to Ruby is much smaller.

The Building Blocks

It’s easy for me to say that programming is built on reusable knowledge, but can I put that into practice? What are these so-called building blocks and how are they similar or different from language to language?

Great question! Let’s find out by taking a look at some of the most basic but most used programming constructs. Understanding these will jumpstart your programming education regardless of the path or language that you choose to pursue.

Variables

Variables are a wonderful thing. If you’ve ever used LESS or something similar then you’ve seen the wonders of variables and how they can save immense amount of time. I’m still not sure if they belong in CSS, but the programmer in me sure wants to see them there.

A variable is essentially a way to store information. You can store something as simple as a value, say 39, or something as complex as an entire array of data containing hundreds of values. Think of a variable as a box. Boxes themselves don’t seem all that important, it’s what’s inside that counts. However, boxes do make for a convenient way to store and access certain items.

JavaScript Variables

Let’s jump to an example. Since JavaScript is a likely first candidate for moving past HTML and CSS, we’ll start all of our examples there. Here’s how variables work in JavaScript:

// Creating a JavaScript Variable
var contentWidth;
contentWidth = 496;
 
// Using the Variable
alert(contentWidth);

Here you can see exactly how variables are used in JavaScript. First, you “declare” a variable. This simply creates it or brings it into existence, when doing this you always want to name it something indicative of its contents. Next, you assign it a value (often these two steps are combined), in our case I threw in an arbitrary number. Remember that, “contentWidth” is our box, which now holds a value. Any time we want to access that box, we just use the variable name, so to end the example out I created an alert and inserted the variable. This will pop up a box with the value “496″.

This may seem useless here but imagine we had three hundred lines of code that referenced that variable frequently. Any time the value of that variable changes, our code still works perfectly because the variable name has stayed constant. Without variables, this would be impossible and much more code would result.

PHP Variables

Now that we have that solid foundation of information, learning variables in other languages becomes much easier. This time we’re not learning what variables are and how they work, only how to use them in other languages.

Here’s a look at how variables work in PHP:

// Creating a PHP Variable
$contentWidth = 496;
 
// Using the Variable
echo $contentWidth;

There’s a lot of similarity here. Notice the use of semicolons to denote the end of a statement and how comments use the same syntax. This time we declared our variable and assigned it a value in a single line. We can see that the syntax for this is nearly identical, with the important distinction that PHP uses a “$” at the beginning of a variable name. Note that the “echo” command merely prints something to the browser page.

Ruby Variables

Now let’s take a look at variables in Ruby.

# Creating a Ruby Variable
contentWidth = 496
 
# Using the Variable
puts contentWidth;

By now you can see that a lot of what’s involved in learning a new language is just figuring out its various quirks. For instance, JavaScript and PHP used semicolons at the end of a line, Ruby does not. Also, this time around comments are created with “#” instead of “//” and we use “puts” to output our result.

Loops

Another popular programming construct is a loop. With loops you can save yourself the trouble of repeating code again and again by automating the process you want to achieve. When creating a loop, you must be sure to declare the parameters of the loop, such as the conditions for when the loop will cease. You don’t want the actions continuing on infinitely so you must create a condition whereby the loop will be terminated.

JavaScript Loops

In any given language, there are usually multiple types of loops. Here’s one type in JavaScript, the “while” loop. In this example we set up a variable, then create a chunk of code that should execute again and again for as long as the variable is less than 50. Then within that block of code, we define the actions to be repeated. In this case we’re logging the value of the variable to the console, then increasing the variable’s value by one. Since the variable is increasing every time the code runs, it will eventually hit 50 and the loop will terminate.

// JavaScript "while" Loop
 
var x = 25;
 
while (x < 50) {
	console.log(x)
	x++; // Increases the variable by one
}

This same thing could be achieved with a “for” loop. This version a little more succinct as is states the value of the variable to start, the condition under which the loop terminates and the action to take on the variable all in one line.

// JavaScript "for" Loop
 
var x = 25;
 
for (x=25;x<50;x++) {
	console.log(x)
}

PHP Loops

Once again we find that PHP is very similar to JavaScript. After reading through the examples above, you should be able to effortlessly grasp the PHP equivalent. Here once again we have a while loop and a for loop, each of which contains nearly identical syntax to their JavaScript brethren.

// PHP "while" Loop
 
$x = 25;
 
while ($x < 50)
	{
		echo $x;
		$x++; // Increases the variable by one
	}

// PHP "for" Loop
 
$x = 25;
 
for ($x=25;$x<50;$x++)
	{
		echo $x;
	}

Ruby Loops

Here are the “while” and “for” loops in Ruby. As you can begin to see, Ruby is much looser in its syntax than the other two languages we’re using. Not only are there no semicolons, the curly brackets aren’t present either. Also notice how different the “for” loop looks this time around.

// Ruby "while" Loop
 
x = 25
 
while x < 50
  puts x
  x+=1 # Increases the variable by one
end

// Ruby "for" Loop
 
for x in 25..50
  puts x
end

Functions

Functions are yet another programming construct created to save you time by avoiding repeating the same code. When you code an application, it will probably perform anywhere from one to thousands of tasks. Each task represents a chunk of commands. When we toss the commands into a function we can simply call that function instead of writing out that full code. In this way a function is a lot like a variable that performs a task or list of tasks.

JavaScript Functions

Let’s build a super basic function in JavaScript that takes any number passed to it and squares it. We start here with the word “function” then follow it up with a variable in parentheses. Then inside the function we perform various actions and return a value.

// Creating the Function
function squared(someNumber) {
	return someNumber * someNumber;
}
 
// Using the Function
console.log(squared(9));

When we use the function, we replace the parenthetical variable with any number we like and the code inside the function will be performed on that value. In the example above, the result returned would be 81.

PHP Functions

By now you’re so familiar with the JavaScript to PHP conversion that you should be able to do it all by yourself. Here’s the syntax:

// Creating the Function
function squared($someNumber)
{
	return $someNumber * $someNumber;
}
 
// Using the Function
echo squared(9);

Ruby Methods

Once again, Ruby is quite different. In fact, Ruby actually refers to this particular construct as a method, not a function. However, we can still quickly apply our knowledge of functions to decipher how this works.

// Creating the Function
def squared(someNumber)
   return someNumber * someNumber
end
 
// Using the Function
puts squared(9)

As you can see, the Ruby method is performing the same task as the JavaScript function. It allows you to pass a number into the parameters, after which is squares that number and returns the value.

Easy Right?

By now you should be able to see the importance of understanding the practice of programming independently of any programming language. There is a shared structure and method of programming that you’ll find throughout the languages that you learn. Many of the differences are *semantic* and amount to slight syntax differences.

Don’t take this to mean that programming and scripting languages are all the same, they’re not. They all have a specific purpose that defines how and when you use them. It’s a lot like learning Adobe Illustrator and then jumping to InDesign. You’re dealing with two different things created for two different purposes, however, there’s enough similarity that an expert knowledge of one will help you learn your way around the other.

Conclusion

This discussion was not in any way meant to be exhaustive. You don’t now possess a complete fundamental knowledge of programming. Instead, you merely learned about programming in a way that hopefully makes it more approachable. Instead of seeing a mass of completely different languages that you have to learn, you should now see a collection of related practices in which the study of one actually expands your understanding of the others.

So where should you start? As I mentioned above, JavaScript is definitely the place for web designers to begin. Its application is immediately apparent, especially when combined with jQuery, to the HTML and CSS that you already know. From there the leap to PHP is much more manageable, which might lead you to study Ruby so you can master Ruby on Rails; the possibilities are limitless!

Security aside, one might also want to prevent users from misusing the upload facility, e.g. uploading copyrighted music files illegally and using the service to promote piracy! In this article, we’ll look into a few ways in which we can achieve this.

File type detection using extension and MIME types

I am not going to talk about this in too much detail as after all, this is what we normally do when we want to restrict certain files. We simply get the MIME type of the file using $_FILES['myFile']['type'] and check if it’s of a valid type.

Or we might scan the last few characters of the file name and reject files ending with a certain extension. Unfortunately, these methods are hardly sufficient, as one can easily change the extension of a file to bypass this restriction. Furthermore, MIME type information is given by the browser and most browsers, if not all, determine the mime type based upon the file’s extension! Hence MIME types can be pretty easily spoofed too.

Let’s now explore some others ways which offer better fool-proofness.

Using Magic Bytes

The best way to determine the file type is by examining the first few bytes of a file – referred to as “magic bytes”. Magic bytes are essentially signatures that vary in length between 2 to 40 bytes in the file headers, or at the end of a file. There are several hundred types of files, and quite a few of them have several file signatures associated with them. You can see a list of file signatures over here.

Although inconsistent, this is our best bet in detecting file types reliably. This seemingly difficult task has been made really easy by a PECL extension called Fileinfo. As of PHP 5.3, Fileinfo is shipped with the main distribution and is enabled by default, so this is definitely a robust and simple way to detect and impose restrictions on the types of files uploaded.

Let’s now see how we can detect a file type using Fileinfo:

$file = "/path/to/file";
 
// in PHP 4, we can do:
$fhandle = finfo_open(FILEINFO_MIME);
$mime_type = finfo_file($fhandle,$file); // e.g. gives "image/jpeg" 
 
// in PHP 5, we can do:
 
$file_info = new finfo(FILEINFO_MIME);	// object oriented approach!
$mime_type = $file_info->buffer(file_get_contents($file));  // e.g. gives "image/jpeg"
 
switch($mime_type) {
	case "image/jpeg":
		// your actions go here...
}

Handling image uploads

If you intend to allow only image uploads, then you can use the inbuilt getimagesize() function to ensure that the user is actually uploading a valid image file. This functions returns false, if the file is not a valid image file.

//  Let's assume that the name attribute of the file input field you have used is "myfile"
 
$tempFile =  $_FILES['myFile']['tmp_name'];  // path of the temp file created by PHP during upload
$imginfo_array = getimagesize($tempFile);   // returns a false if not a valid image file
 
if ($imginfo_array !== false) {
    $mime_type = $imginfo_array['mime'];
    switch($mime_type) { 
 
	case "image/jpeg":
		// your actions go here...
 
    }
}
else {
    echo "This is not a valid image file";
}

Reading and interpreting magic bytes manually

If for some reason, you are not able to install Fileinfo, then you can still manually determine the file type by reading the first few bytes of a file and comparing them with known magic bytes associated with the particular file type. This process definitely has an element of trial and error, because there is still a chance that there are a few undocumented magic bytes associated with legitimate file formats. As a result, valid files could be rejected by your system. However it’s not impossible as a couple of years back, I was asked to work on a script that allowed only genuine mp3 files to be uploaded, and since we could not use Fileinfo, we resorted to this manual scanning. It took me a while to account for some of the undocumented magic bytes for mp3, but pretty soon, I got a stable upload script running.

Before I end, I would just like to part with a general word of caution: Make sure that you never call an include() with a file that was uploaded, as PHP code can very well be hidden as part of the picture, and the picture would pass your tests for file validation just fine, only to cause havoc when executed by the server.

What’s required?

The humble copyright notice is always useful to show in the footer, as a way of stating your claim over a site. Interestingly, however, it is not required for you to have copyright over the graphics, content and artwork of your site. This comes into place as soon as you’ve created the content and placed it in the public domain. Placing a copyright notice is still advisable to deter potential plagiarists and stake your claim. The generally accepted format is:

Copyright © 2008 Design Shack

There are a couple of points to make:

• Make sure that the year is current (see below)
• Use the HTML code © to display the copyright symbol, ensuring that your site’s XHTML is valid
• Ensure the word ‘copyright’ appears

If you have specific requirements for how people can use certain content of your site, using a Creative Commons License would be advised. This allows you to select how content can be used in a more official and controlled manner.

Future proof

When creating a website, it can be incredibly tempting to simply drop in the basic requirements, and not think too heavily about future proofing your site. One of the most telling signs that a site isn’t regularly updated is an out of date copyright year. This can be very easily made automatic, through the use of a simple piece of PHP or JS code:

1

<?php echo date("Y"); ?>

Alternatively, if you would prefer to use JavaScript, the following works well:

1
2
3
4

<script type="text/javascript">
var d = new Date()
document.write(d.getFullYear())
</script>

Stick with one of these methods, and you’ll never be kicking yourself in February again for not updating the copyright year!

Getting Started

The first thing is to implement a custom 404 error page. We’ve covered this before, but it essentially involves adding the following to your root .htaccess file:

1

ErrorDocument 404 http://www.yoursite.com/404.php

This will instruct all 404 error requests to be sent to the specified page rather than showing a default message.

The PHP Code

The following code needs to be customized and placed anywhere in your 404 php page:

1
2
3
4
5
6
7
8
9
10
11

<? 
$myemail = "insert your email address here";
$page = 'http://' . $SERVER_NAME . $REQUEST_URI;
$subject = "404 Page Error";
$message = "
     404 Page Error Report
     Visitor came from: ".$_SERVER['HTTP_REFERER']."
     Page not found: ".$page."
";
mail($myemail,$subject,$message,"From: 404errorpage");
?>

This will send you an email which will include (if possible) both the page which the user has been referred from, and the page or resource which couldn’t be found.

Useful Applications

Implementing this has a whole host of useful outcomes. However, the first thing to note is that (unless you have previously added these files), a rapid number of emails will arrive in relation to:

• favicon.ico
• robots.txt

It may well be worth adding these files in before implementing the page so that you aren’t inundated with notifications! This technique can be invaluable when designing a new site, to sift out any broken links which may have been overlooked before launch. It is even more useful when modifying an existing site structure, to ensure that current links to your site are not taking new visitors to missing pages. If this is the case, simple redirects can be added using .htaccess:

For a file:

1

RewriteRule file1.php$ file2.php [L]

For a directory:

1

RewriteRule ^oldfolder/$  newfolder/ [L]

After a while, you’ll find that the odd 404 error is due to someone mistyping a URL, or having linked to a genuinely non-existent page on your site. It wouldn’t be advisable to keep this code in place permanently, but for a few days or weeks after making significant changes it provides a fantastic fail-safe.