Coding
Here is an overview of add-ons I consider essential to any web developer or designer who uses Firefox.
ColorZilla
Have you ever seen a really nice colour on a website and thought “That is exactly what I need”. This add-on allows you to get the details about the colour.
Firebug
Websites can be very annoying to code (especially if you use notepad), this excellent add-on for Firefox allows you to edit, debug and monitor code on a web page. It’s so useful it almost needs its own post.
YSlow (For Firebug)
Ever wondered why a website is being slow? This cute little add-on (made by Yahoo) analyses a web page and tells you (in simple English) how to make it load a little faster.
Normally when I use this, I notice a big improvement in rankings on Google and Yahoo.
MeasureIt
Sometimes (especially when coding websites) it’s important to know the size of various elements. Essentially this is like an on-screen ruler.
Web Developer Toolbar
An essential add-on for all web masters (and power users). This useful little tool bar adds everything a web master really needs to keep on top of a website.
Google Gears
I hate JavaScript; luckily the geniuses down at Google seem to know how I feel. Google Gears makes time consuming JavaScript run at least 40%* faster.
Tamper Data
View and Modify HTTP/HTTPS headers, very useful when analysing a web page and working with CURL.
* Based on my benchmarking. Performance may vary from user to user. In general Google Gears is fantastic and should be used on all computers.
Posted March 4th, 2009 / 1 Comment
Here is a really easy way to make a drop down list using CSS instead of JavaScript. This has many advantages over a JavaScript method, mainly it’s more search engine friendly and does not rely on users having JavaScript turned on.
Example
Click here to see Live Demo
The Code
<style type="text/css">
<!--
/* Style the links */
#exmaplebox a {
float:left;
text-decoration:none;
font-size:14px;
font-weight:bold;
height: 22px;
width: 100px;
text-align:center;
display:block;
padding: 0 10px 0 10px;
margin: 2px 10px;
border:1px solid #CCC;
}
#exmaplebox a:hover {
text-decoration:underline;
}
/* this bit is the drop down bit */
#exmaplebox ul {
float:left;
margin:0;
padding:0;
height: 26px;
width: 150px;
overflow:hidden;
list-style:none;
}
#exmaplebox ul:hover {
overflow:visible;
}
#exmaplebox ul li {
float:left;
width:300px;
margin:0;
padding:0;
}
-->
</style>
<div id="exmaplebox">
<a href="#link">Link</a>
<ul>
<li><a href="#link">Link</a></li>
<li><a href="#link">Large Sub-Link</a></li>
<li><a href="#link">Sub-Link</a></li>
</ul>
<ul>
<li><a href="#link">Long link</a></li>
<li><a href="#link">Sub-Link</a></li>
<li><a href="#link">Large Sub-Link</a></li>
</ul>
<a href="#link">Link</a>
</div>
Download the Code
Posted March 2nd, 2009 / 1 Comment
Anyone who has ever developed a website which allows users to upload files will tell you “It’s best to think everyone is out to destroy your server”, which unfortunately is the best mindset to be in when setting up any website. One of the main methods used to by hackers to breach security on your website is to upload a file which allows them to execute code.
Here is a very quick and easy solution to stop potential hackers executing files in certain folders.
Open the .htaccess file in the folder you wish to protect and add the following code:
Options -Indexes
Options -ExecCGI
AddHandler cgi-script .php .php3 .php4 .phtml .pl .py .jsp .asp .htm .shtml .sh .cgi
This will essentially stop the folders returning an index of what is inside them and stop various files from running.
Useful Links
PHP File Upload Security
Apache Tutorial: .htaccess files
Apache, MySQL, and PHP Web Development All-in-one Desk Reference for Dummies
Posted February 23rd, 2009 / No Comments
Innovation of the week is were I share some of the really innovative designs, coding or ideas which are new to the web.
Bore Me Lunchtime Shuffle – View
Between 12pm and 2.30pm Bore Me plays 5 videos back to back, so you can sit back and eat your lunch while having a giggle. However, it only works around lunchtime (unless you change your computers clock). If they added a “It’s not lunch, but show anyway” button it would be a lot better.
Innovation Rating: 3/5
A great idea, design and execution lets it down.
Posted February 16th, 2009 / No Comments
Have you ever wanted to secure links on your website (for example hide the real source of a file)? Here is a quick and easy way to do this.
<?php # File created on 11th February 2009 by Mike Rogers (http://www.fullondesign.co.uk/).
## Start defining constants ##
define(RUN_ERRORS, TRUE); // Do you want the script to display errors? TRUE = yes you do.
define(redirect_or_echo, 'redirect'); // Do you want to redirect the user to another website, or just echo the other other webpages' content. 'rediect' will redirect, 'echo' will return the web pages constents. I recommend redirect.
## End defining constants ##
/* Start the link codes. The code is the ?code=123 part of the URL. The array should be fotmatted like:
$link['code'] = 'http://URL';
You may find it easier to do this with MySQL or including this as a seperate file. Too many links could lower performance, but for a small website just trying to cloak a few links this is good 
*/
$link['1'] = 'http://www.site.com/';
// Start the system.
function external_url($url){
if($return = @file_get_contents($url)){
return $return;
}elseif(function_exists("curl_init")){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_TIMEOUT, 10);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$return = curl_exec($ch);
curl_close($ch);
return $return;
}elseif($return = @implode("", @file($url))){
return $return;
} else {
return NULL;
}
}
// Checks if the code is a number
if(is_numeric($_GET['code']) && is_array($link)){
if(isset($link[$_GET['code']])){
if(redirect_or_echo === 'redirect'){
header('location: '.$link[$_GET['code']]);
} elseif(redirect_or_echo === 'echo'){
echo external_url($link[$_GET['code']]);
}else{
if(RUN_ERRORS === TRUE){
echo 'Sorry, an internal error has occoured.';
}
}
} else {
if(RUN_ERRORS === TRUE){
echo 'Sorry, the code you have provided is incorrect.';
}
}
}else{
if(RUN_ERRORS === TRUE){
echo 'Sorry, the code you have provided is incorrect.';
}
}
/*
You are free to share, modify and use this code for commercial uses. Please give a link back (to http://www.fullondesign.co.uk/ ) if you can, but you don't have you.
You use this at your own risk.
*/
?>
Download the Code
Useful Links
PHP’s Offical Website – It has a fantastic documentation section. Well worth a look.
PHP 6 and MySQL 5 for Dynamic Web Sites: Visual QuickPro Guide
– The book I learnt PHP from, it’s really good for beginners and reference guide.
Posted February 14th, 2009 / No Comments