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!

What is it?

CSS3 offers a huge variety of new ways to create an impact with your designs, with quite a few important changes. This first tutorial will give you a very basic introduction to the new possibilities created by the standard.

Modules

The development of CSS3 is going to be split up into ‘modules’. The old specification was simply too large and complex to be updated as one, so it has been broken down into smaller pieces – with new ones also added. Some of these modules include:

• The Box Model
• Lists Module
• Hyperlink Presentation
• Speech Module
• Backgrounds and Borders
• Text Effects
• Multi-Column Layout

View the full list of modules

Timescale

Several of the modules have now been completed, including SVG (Scalable Vector Graphics), Media Queries and Namespaces. The others are still being worked upon.

It is incredibly difficult to give a projected date when web browsers will adopt the new features of CSS3 – some new builds of Safari have already started to.

New features will be implemented gradually in different browsers, and it could still be a year or two before every module is widely adopted.

How will CSS3 affect me?

Hopefully, in a mainly positive way. CSS3 will obviously be completely backwards compatible, so it won’t be necessary to change existing designs to ensure they work – web browsers will always continue to support CSS2.

The main impact will be the ability to use new selectors and properties which are available. These will allow you to both achieve new design features (animation or gradients for instance), and achieve current design features in a much easier way (e.g. using columns).

Future articles in this series will each focus on a different module of the CSS3 specification, and the new features they will bring. The next one relates to CSS3 borders.

Other posts in the series

• Introduction to CSS3 – Part 1: What is it?
• Introduction to CSS3 – Part 2: Borders
• Introduction to CSS3 – Part 3: Text Effects
• Introduction to CSS3 – Part 4: User Interface
• Introduction to CSS3 – Part 5: Multiple Columns
• Introduction to CSS3 – Part 6: Backgrounds

Getting Started with Ruby on Rails

Creating More Using Less Effort with Ruby on Rails

They look like an easy way to get started, aiming to to demystify Ruby on Rails and convince you that you can make the leap.

What is CSS?

Where HTML is the language you use for designing the structure of a web page and adding the content, CSS is the language for adding styles, colours and layout options to the content you have written in HTML.

It allows you to define and create styles, which can either be linked to pre-existing tags such as or


, or completely new styles which you would reference by placing

around the content.

How to include a style sheet

The general practice for including a CSS file in your webpage is to place the following code in the area of your page:

The pathname (style.css) would need changing to the name and location of your CSS file.

The basic website

Here is the code of a simple website, ready to be styled with CSS. If you follow through the example and explanation, it should really help you when you come to create your own CSS styled web page.

   


   
   
Design Shack

Welcome to our website showcasing CSS and XHTML designs

         This content will be in a CSS styled box
      

   

At the moment, this website will look something like this. Very basic, and not too pretty. Let’s go ahead and create a CSS file to link to this page, defining some styles.

The basic style sheet

body {
font-family: Verdana, Arial;
font-size: 11px;
color:#000;
background: #FFF;
}
h1 {
font-family: Arial, Verdana, Serif;
color: #99723b;
text-size: 18px;
}
.box {
padding: 10px;
border: 5px solid green;
width: 300px;
background: #f0f0f0;
}

The website now looks much better, with more colour, layout ideas and more attractive fonts.

Most of the code used above in the CSS example is very self explanatory. The body section applies to everything within the HTML tag, h1 to everything inside a


tag, and .box to anything within the

tags. The dot before box denotes this as a custom style, not a standard one such as body or h1.

Why is CSS important?

Most of the effects shown above can be achieved by using tags in your design, or tables. The great thing about CSS is that it separates design from layout, and keeps your HTML code easy to read and understand. Pages load quicker, search engines have an easier time indexing your site and everyone benefits.