100% Width

Note: I am planning an update for this article to improve the quality.

A common question from new web designers is how to make a div 100% of the browser window, many people complain that there is always some sort of border around their div, preventing them from making their element the full width of the browser window. The answer to this? Simple. Use a CSS reset.

But what's a CSS reset?! Basically as the name suggests we can use some code to reset the values of all/certain elements on our page. Most browsers apply certain style rules to all elements so that they can kick in if here isn't any styling appropriated. So what does a reset look like? Well the simplest (but perhaps not the best) looks like this:

* {
  margin:0;
  padding:0;
}

The code above selects all elements, hence the asterisk, and then sets the margin and padding at 0. This will usually remove any problems with trying to create a div that fills the entire screen. But you should be aware that this method is slightly browser intensive. And so some clever folk such as Eric Meyer came up with a more efficient method of resetting, that might look a bit longer, but in the long run is better for the end user. Head over to this page to see it.

And that's how you make a div 100% of the browser's width. This article is intended to be found for the new web designers searching "100% width div" via Google and I hope this very basic tip can offer a useful solution.

Using jQuery’s toggle() function

Note: This article has been marked for a quality review and will soon be updated.

jQuery is packed full of useful features that help you to "write less, do more" as their slogan says. One thing I have found over the years, when working with JavaScript, is the need to know what state an object is in. By that I mean wanting for instance to know whether an information box is open or closed, and then perform an action based upon the answer to that question. Now in the past I would use variables to give me this information, and then alter their values based upon the actions taken by the user. This method is somewhat cumbersome and I don't particularly like using it because it takes up quite a few lines of code. So where am I going with this? Well the other day I stumbled upon an incredibly useful function that is part of the jQuery library. And that function is the toggle() function.

The function allows you to set a number of actions that you would like to be cycled through and turns them in to a loop, essentially toggling the action taken. The first time the element is toggled, the first function specified is executed; the second time sees the second function executed, and so on. So, in my case, I was able to simply place some actions within the function and step back from all the complex JavaScript stuff. Let me show you what I mean.

$("#button").toggle(
  function(){
    $("#popup").fadeIn(250);
  },
  function(){
    $("#popup").fadeOut(250);
  }
);

The code above waits for the element named "button" to be clicked, and then fades-in an element named "popup" (I think you can see where this is going :)). You can also use the function as a way of hiding and showing elements in turn, using code similar to the block below.

$("#button").click(function() {
  $(".box").toggle();
})

The code above waits for the element named "button" to be clicked and then shows/hides all elements with a class of ".box" in turn. Remember that you need to set all the boxes you don't want showing to begin with, to have a display value of none.

And that's the toggle() function. It's really simple and easy to use, and it has saved me a lot of time. I thought I better share it with you because it isn't the best known function in the jQuery library, and it is one of the most useful! For more information on the function and some demos of it's usage, visit the API.

Why you should be using PHP

Note: This article has been marked for a quality review and will soon be updated.

I would like to introduce you to PHP. If you aren't already using PHP on your site, you should be! PHP is an easy way of generating dynamic content and interacting with all sorts of things, from the server, to the user, right back to databases. In past tutorials I've used PHP without first explaining why, in this article I'll explain why it's really great. It's important to note that you need PHP installed before you start using it, you can do so by either using a server (the easiest, but more expensive way), or by searching Google for "install PHP on OSX/Windows".

With CSS we can use a small bit of code to link our HTML pages to our style sheets - the meta tag. Well what if you're building a site and you want the same header on every page, without PHP you would just have to copy and paste the same code onto every page, and imagine if you had 100 pages when you decided you wanted to change a tiny detail. That would be a problem. But we can solve this problem with PHP using a simple require() function. For example...

<?php 
  require("header.php");
?>

The above code simply goes and grabs the file in between the quotations and replaces itself with it's contents. This can be really useful, and means that you only have to edit the one file to see your changes reflected across your site. But PHP is so much more than just something you can use to insert files, you can use it to do (nearly) anything!

PHP was originally created to produce dynamic content, the PHP code tells the server to do something and returns a HTML value. So say for instance, you may have once visited a site that was displaying the current time or/and date. There are many ways to do this, but one of the easiest, is with PHP. Let me show you.

<?php 
  echo gmdate('d-m-y / H:i'); 
?> 

Would output something like this: 31-01-10 / 19:23. The "echo" command basically produces text and sends it to the browser for rendering, while the gmdate() function gets the current GMT time. The code it encased with the two <?php ?> markers, which tell the server that it should look out for PHP to render. PHP is a powerful language which you can use for a plethora of solutions. My favourite part of PHP is the community. If you want to do something in PHP you will be able to find the solution easily. Furthermore it seems to me like the is a function for everything - want to know when a file was created? There's mktime() for that. Want to capitalise the first letter of a string? There's ucwords() for that! Want to make a cup of coffee? There's makeMeCoffee()! Well that last one may have been a bit of wishful thinking, but there really are a huge amount of functions that you can utilise off the shelf.

PHP is also really useful for security. If you've got a password that you want to encrypt, you can use the md5() function, which creates an incredibly secure hash which is nearly impossible to decrypt. Moreover, if you want to ensure only certain visitors can access certain pages, you can use $_SESSION[] variables to store bits of information accessible by any page of your site. Lastly, PHP can be used for databases, there is a detailed explanation of this over in my tutorial on building a CMS, and I believe it is one of the most useful features of PHP.

PHP is a really powerful programming language, and I recommend you learn it. A site I found very useful when I was starting off was Tizag, which will walk you through the basics. And when you're trying to solve a problem, sooner or later you'll end up over at PHP.net which is a fantastic resource, despite the slightly 90s look and feel to the site :).

I use PHP all the time, as do solutions such as WordPress and Facebook. It makes my life so much easier and opens up doors to things that I could never achieve without it. I urge you to learn it, and as always the best way to learn is through using the language, so go ahead and create something cool using PHP!

Resizing images – the right way

Something that is very important on the web today is how fast our websites load, and alongside script optimization and other fancy tricks, images are a large part of our sites, and so it's important that they are optimized for the web. However what if we don't have control over the size of the images, and we don't have a program to re-size them? Well we have to do something else. I am talking in terms of a CMS, but the techniques I am about to show you can be used anywhere to create many different sized images from one image.

The first method works but is a little clumsy, take a look.

img { max-width:800px; }

The code above would be placed in your CMS file and stops all images from getting bigger than a margin of 800px. Yes it works, but there are a number of problems with it. If I had a huge image, say 5000 x 5000px, then this method of resizing would mean my image would take a long time to load, this is because the browser still goes to get the huge image before resizing it - this is bad! I strongly recommend you don't use this method, but instead explore other options.

Well first off for images that are integral to your site, you should be able to re-size them using your original design, but for images that have yet to be uploaded and put on display on your site, I suggest the use of JavaScript. When I first began learning how to re-size images with JavaScript I believed that it was the only way, you see to do so you have to use a large amount of code and it requires you to have a good knowledge of JavaScript. However a very kind man who goes by the name of Tim McDaniels wrote a rather lovely script that we can use for resizing images. The script is called TimThumb and is really easy to use.

Head on over to Google Code and download it (or you could just use the URL provided by Google). Once you have uploaded it onto your own server you can start using it straight away. I find it really useful for use in blogs and as I mentioned above, in a CMS. So when you are ready you can implement it's functionality by replacing the URL of your image with the URL of the script and a bit of other info - see below.

<img src="timthumb.php?src=my-image.jpg&width=100&height=100&zc=1" alt="">

The above code tells the script where your image is, the dimensions you would like it re-sized to, and that you would like crop the image while zooming - that's the little 'zc' parameter by the way. The way in which the script operates is this, it takes the image and all the information with it, and then creates a cache folder to store the image. It then creates the image and returns the URL of the resized image to be used in the 'src' attribute. The script offers some customisation, for example you can change the directory the script saves the images to, so that they can be used again. Just see the documentation for details.

And that's it really! I just wanted to share that lovely script with you and ward you off resizing using CSS. Users will appreciate the shorted loading time of pages and I can assure you Google will too!

Get going with jQuery!

If you would have asked me 6 month ago what I thought of Javascript, I would have told you I thought it was a precarious language which never worked for me - and that's coming from a semi-programmer! To me the language was cumbersome and seemed like it was cobbled together in a very short time with little regard for the developers (don't shoot me!) . For me I didn't have the time to sit down and trawl through documentation on how to use it, and the idea of writing 100s of lines of code for little gain didn't appeal to me.

However a short time ago I was introduced to jQuery - a Javascript library, and I must say it was one of the best gifts I have ever received. jQuery replaces the annoying syntax of Javascript and introduces an easy to use set of tools that can be implemented by someone with little programming experience. Gone are the days when I spend hours trawling over Javascript code to find errors - now I can reel off 50 lines of jQuery without ever making a mistake! Furthermore it's ease of use means that there are loads of websites advocating it. It is free to download - just search for jQuery, and as I say - easy to use.

jQuery allows you to easily animate elements in a slick and stylish manner - making your websites look far smoother. Integration with AJAX means that form validation is also really easy, and best of all - the documentation is amazing!

So what does it look like?

$("#myDiv")

Would select a div element. Then to manipulate it and say fade it in, you would simply add -

$("#myDiv").fadeIn(1000)

The "1000" indicates the length of the animation - in milliseconds. You can even animate individual CSS properties like so -

$("#myDiv").animate({ background-color:"#000"; }, 2500)

And to react to events use functions such as -

$("body").on('click', '#myDiv', function(){ $("#myDiv").animate({ top:"50px"; }, 2500) });

jQuery is a really simple library to learn your way around, and I would recommend going with it because of it's ease of use alongside the powerful features that it possess! If you have never tried jQuery I would seriously suggest you do; I remember when I first discovered it, I spent about a week just playing around with it animating red squares and other random elements, and I think you should do the same - eventually integrating it into a site of your own!

You should host with Media Temple

I remember a few months back when I was faced with a dilemma, what hosting company should I go with for a certain client. I have had experience with some cheaper companies and to be honest for the price it isn't bad. However recently I have had problems with slow servers and a lot of downtime. Therefore I would like to recommend to anyone reading this to go with Media Temple. Now the cynics among you may believe that I am just trying to make money from referrals, but I can honestly say Media Temple is a great company. They provide an excellent service at what I think are reasonable prices.But it isn't just their service that is great, it's their attitude towards their customers. Their Twitter account is regularly updated by their staff, and should you have any questions or concerns you can send them a message via Twitter. Moreover they offer 24/7 phone support in case of any issues that may arise.

The back-end of their site is as slick a site as you ever did see. You can tell that they care about design, because the user experience is fantastic. The list of features is wonderful, and they are a caring company. For instance the other day I sent them a reply to a tweet where they were asking for interesting stuff, naturally I sent them a link to the article about Robert Noyce on this site. Soon after that tweeted the link and sent me a message of thanks asking for my address. Turns out they wanted to send me a T-Shirt for my support! Yes I know, big deal, but it's nice to know that they care, as opposed to just ignoring you after they get your money, or stating that MySQL issues are too complex to be dealt with by our online support kind of attitude.

So I can honestly say that Media Temple should be your host of choice; and if you don't believe me, then look at the list of clients on the website!

You have 100s of Gmail Addresses!

Never a day goes by when I don't use Google's fantastic emailing service. But did you know that you have access to many different addresses. If your email address is tom@gmail.com, you could give someone the address of tom+jane@gmail.com. Oh my gosh! I know, try to dissipate the hysterics, because although this seems like a waste of your time you may be missing the point. Think about it - when you create websites with contact forms you may be inclined to include a clue in the subject line so you know when the email has come from you site. Well hows about using a new method, something like tom+blog@gmail.com so you know where it's coming from.You might want to set up some kind of alert when you get such emails through.

You could even use it to prioritize clients' messages to you. You give them the address of tom+clients@gmail.com so that you can respond to them faster! I'm always interested to find out about new and undiscovered features of Gmail, but I think this one is really rather interesting. What do you think?