Alan Hart

web design… and other stuff

Alan Hart

How to Disable Javascript in your Browser

January 18th, 2012 . by Alan Hart

You can easily disable javascript in any browser completely or you can disable javascript for a specific site/domain in the Chrome Browser.

Note: Make sure you remember to re-enable javascript when you’re done!

Internet Explorer:
1. Click the little gear (top right)
2. Click “Internet Options”
3. Choose the “Security” Tab
4. Click “Custome Level…” Button (near the bottom)
5. Scroll down to the “Scripting Section”
6. Locate the Active scripting subheading and select the “Disable” radio button.
If you would rather be prompted each time a website attempts to launch any javascript code, select the “Prompt” radio button instead.

Chrome:
1. Click the spanner icon (“Customise and Control Google Chrome”)
2. Click “Options”
3. Click “Under the Bonnet”
4. Click the “Content Settings…” button at the top (next to where it says “Privacy”)
5. In the “Javascript” section make sure that “Allow all sites to run JavaScript (recommended)” is selected
6. then click the “Manage Exceptions…” button
7. Select “Block” from the drop down box
8. Enter the hostname in the text box: http://en.wikipedia.org
9. Hit Enter

(to remove this javascript block for after the “blackout” just goto the same “Manage exceptions” page hover your mouse over the wikipedia entry you added and click “X”)

Firefox:
1. On your keyboard hold down “Alt+T” together then tap “O”
2. Click the “Content” icon
3. Untick “Enable Javascript”
This will disable javascript on ALL sites you visit until you tick “Enable Javascript” box again

Safari:
1. Open Safari
2. On your keyboard hold down the “Ctrl” key and tap the comma [,] key
3. Select the “Security” icon
4. untick “Enable JavaScript”

Single PHP error page to handle all response headers / errors

September 19th, 2011 . by Alan Hart

There might be an easier way of doing this but i’ve been working on a project which needed the following which i have done as a simple single php page and thought i’d share it in case anyone wants to do the same thing.

  1. Error page generated by dynamic pages
    (using any code; 403, 404 etc)
  2. Error page to handle genuine errors
    (404 ‘Not Found’, 403 ‘Forbidden’ etc)
  3. Forbid visitors from visiting sensitive areas/directories
    also returning 403 ‘forbidden’ header.
    (e.g. /images, /css /javascript, /ajax etc)

Download all these files: http-error-code.zip

instructions for use are commented within the error.php code but in summary:

You need to create a .htaccess entry for each error code:

Code for .htaccess:


ErrorDocument 403 /error/error.php
ErrorDocument 404 /error/error.php

For forbidden folders just add this code into a file called index.php then put this file into the folder that you want to forbid directory listing for:

Code for index.php:

<?php
// Set response code
$error = 403; //Forbidden
// include the error page (
include ($_SERVER['DOCUMENT_ROOT'].'/error/error.php'); // assuming "/error/error.php" is the location/name of this file
// stop processing the current page
exit();
?>

Save this code to a file called error.php and save to yourdomain.com/errors/error.php

Code for error.php:

<?php
/*
------------------------------------------
PHP Response Header / Error Page Generator
------------------------------------------
Created by Alan Hart (www.alanhart.co.uk)
19/09/2011
------------------------------------------

To generate response from another page, as a result of incorrect database query or invalid content etc just add this code:
(make sure no page output has been generated before this include)

<?php
// Set response code
$error = 403; //Forbidden
// include the error page (
include ($_SERVER['DOCUMENT_ROOT'].'/error/error.php'); // assuming "/error/error.php" is the location/name of this file
// stop processing the current page
exit();
?>

-------------------------------------------------------
TIP:
-------------------------------------------------------
Hide the default directory listing for a folder
e.g. /images, /css, /java etc.

1. create a blank file called index.php
2. paste the php code above into the file
3. place it inside the folder
-------------------------------------------------------
*/

// ------------------------------
// THE CODE...
// ------------------------------

// if the error code has been set by referring page:
if ($error <> ""){
// Use the error code from referring page
$code = $error;
} else {
// Use the error code from server
$code = $_SERVER['REDIRECT_STATUS'];
}

// set $path variable to the requested path/uri
$path = $_SERVER['REQUEST_URI'];

// Create array with error codes and messages
// You must add a line to .htaccess for each code used here.
// e.g.
// ErrorDocument 403 /error/error.php
// ErrorDocument 404 /error/error.php
// etc...
// (assuming /error/error.php is the location/name of this file)

// Common Error Codes / Responses:
$response['403'] = array('title' => '403 Forbidden', 'message' => 'The server has refused to fulfill your request.
You do not have permission to access '.$path.' on this server.');
$response['404'] = array('title' => '404 Not found', 'message' => 'The document/file requested was not found on this server.') ;
$response['405'] = array('title' => '405 Method Not Allowed', 'message' => 'The method specified in the Request-Line is not allowed for the specified resource.') ;
$response['408'] = array('title' => '408 Request Timeout', 'message' => 'Your browser failed to send a request in the time allowed by the server.') ;
$response['500'] = array('title' => '500 Internal Server Error', 'message' => 'The request was unsuccessful due to an unexpected condition encountered by the server.') ;
$response['502'] = array('title' => '502 Bad Gateway', 'message' => 'The server received an invalid response from the upstream server while trying to fulfill the request.') ;
$response['504'] = array('title' => '504 Gateway Timeout', 'message' => 'The upstream server failed to send a request in the time allowed by the server.') ;

// Other header response codes (not necessarily errors) that you may want to use:
// $response['100'] = array('title' => '100 Continue', 'message' => 'Continue')
// $response['101'] = array('title' => '101 Switching Protocols', 'message' => 'Switching Protocols')
// $response['200'] = array('title' => '200 OK', 'message' => 'OK') // *Not an error so should never be handled by this script*
// $response['201'] = array('title' => '201 Created', 'message' => 'Created')
// $response['202'] = array('title' => '202 Accepted', 'message' => 'Accepted')
// $response['203'] = array('title' => '203 Non-Authoritative Information', 'message' => 'Non-Authoritative Information')
// $response['204'] = array('title' => '204 No Content', 'message' => 'No Content')
// $response['205'] = array('title' => '205 Reset Content', 'message' => 'Reset Content')
// $response['206'] = array('title' => '206 Partial Content', 'message' => 'Partial Content')
// $response['300'] = array('title' => '300 Multiple Choices', 'message' => 'Multiple Choices')
// $response['301'] = array('title' => '301 Moved Permanently', 'message' => 'Moved Permanently') // *Not an error so should never be handled by this script*
// $response['302'] = array('title' => '302 Found', 'message' => 'Found')
// $response['303'] = array('title' => '303 See Other', 'message' => 'See Other')
// $response['304'] = array('title' => '304 Not Modified', 'message' => 'Not Modified')
// $response['305'] = array('title' => '305 Use Proxy', 'message' => 'Use Proxy')
// $response['307'] = array('title' => '307 Temporary Redirect', 'message' => 'Temporary Redirect') // *Not an error so should never be handled by this script*
// $response['400'] = array('title' => '400 Bad Request', 'message' => 'Bad Request')
// $response['401'] = array('title' => '401 Unauthorized', 'message' => 'Unauthorized')
// $response['402'] = array('title' => '402 Payment Required', 'message' => 'Payment Required')
// $response['406'] = array('title' => '406 Not Acceptable', 'message' => 'Not Acceptable')
// $response['407'] = array('title' => '407 Proxy Authentication Required', 'message' => 'Proxy Authentication Required')
// $response['409'] = array('title' => '409 Conflict', 'message' => 'Conflict')
// $response['410'] = array('title' => '410 Gone', 'message' => 'Gone')
// $response['411'] = array('title' => '411 Length Required', 'message' => 'Length Required')
// $response['412'] = array('title' => '412 Precondition Failed', 'message' => 'Precondition Failed')
// $response['413'] = array('title' => '413 Request Entity Too Large', 'message' => 'Request Entity Too Large')
// $response['414'] = array('title' => '414 Request-URI Too Large', 'message' => 'Request-URI Too Large')
// $response['415'] = array('title' => '415 Unsupported Media Type', 'message' => 'Unsupported Media Type')
// $response['416'] = array('title' => '416 Requested range not satisfiable', 'message' => 'Requested range not satisfiable')
// $response['417'] = array('title' => '417 Expectation Failed', 'message' => 'Expectation Failed')
// $response['418'] = array('title' => '418 I\'m a teapot', 'message' => '(RFC 2324) Hyper Text Coffee Pot Control Protocol')
// $response['501'] = array('title' => '501 Not Implemented', 'message' => 'Not Implemented')
// $response['503'] = array('title' => '503 Service Unavailable', 'message' => 'Service Unavailable')

// get the relevant title from array
$title = $response[$status]['title'];

// get the relevant message from array
$message = $response[$status]['message'];

// return message if error code provided isn't in the $codes array
if ($title == false || strlen($code) != 3) {
$message = 'Please supply a valid status code.';
}
// Return response header(s) with relevant code
header("HTTP/1.1 ".$title);

// Customise the page to be displayed below...

// -------------------------------------------------------
// You can use the variables $title and $message in the page
// -------------------------------------------------------
// e.g.
//        echo "<h2>".$title."</h2><p>".$message."</p>";
// -------------------------------------------------------

// -------------------------------------------------------
// !! IMPORTANT !!
// -------------------------------------------------------
// if you want to include a header / footer in the page displayed
// make sure you use $_SERVER['DOCUMENT_ROOT'] in your include code
// e.g.
//         include($_SERVER['DOCUMENT_ROOT']."/inc/header.php");
//
// this ensures the header/footer path is always correct
// e.g.
//        actual path of header.php = "http://www.domain.com/inc/header.php"
//         if path/uri is "domain.com/foo/" header path would incorrectly become "domain.com/foo/inc/header.php"
//        if path/uri is "domain.com/foo/bar/" header path would incorrectly become "domain.com/foo/bar/inc/header.php"
// -------------------------------------------------------

?>
<?php
// Include your own header here
//         include($_SERVER['DOCUMENT_ROOT']."/inc/header.php");
// or use HTML as below
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Error: <?php print $title;?></title>
</head>
<body>
<center>
<?php echo '<h2>'.$title.'</h2><p>'.$message.'</p>'; ?>
</center>
<?php
// Include your own footer here
//         include($_SERVER['DOCUMENT_ROOT']."/inc/footer.php");
// or use HTML as below
?>
</body>
</html>

 

Compare CSS Stylesheet Tool

December 15th, 2010 . by Alan Hart

CSS is a standard used to define Web site presentation styles.
When a Web designer creates a CSS stylesheet for a site, he will evolve it through multiple versions with incremental changes.

This tool provides a solution that allows a web designer to clearly see the differences between two different css stylesheet files (classes only, not values)

Compare CSS Stylesheets

Description
A webpage that takes two CSS files and compares the classes contained in both. Resulting differences are highlighted in red.

Usage:
Click the “Compare CSS Tool” link below and simply upload the css files you want to compare and click the compare button.

Compare CSS Tool

Change Juitter Time and Date Format

June 9th, 2010 . by Alan Hart

As you can see in the sidebar on the left i am using Juitter to retrieve my twitter feed, I didn’t like the default juitter date format because it’s rather long (“ddd,dd mm yyyy hh:mm:ss +0000″)

Here’s how you can reformat the default juitter time and date format…

Just insert the code below into the “jquery.juitter.js” file, underneath the line “var tweet = $.Juitter.filter(item.text);”

// Re-format Date/Time
//get Tweet date
var d=new Date(item.created_at); //Default date/time is when the tweet was published
var tweetdate=d.toLocaleDateString(); //rewrite date in a nicer way
//get Tweet time
var t=new Date(item.created_at);
var tweettime=t.toLocaleTimeString().substr(0,5); //rewrite and remove seconds
//pull it together
var timestamp=""+tweetdate+" at "+tweettime+"";
// Reformat Date/Time

Then in the few lines below this newly inserted code (the code that generates the HTML) replace “item.created_at” with “timestamp”

Simple!

main date conversion taken from: http://www.ibrii.com/n/f317z

Some useful web design links

June 8th, 2010 . by Alan Hart

Here are some geeky/webdesign thinga-ma-bobs i’ve stumbled across/used recently:

Regular Expressions Cheat Sheet

a very handy quick reference guide for regular expressions, including symbols, ranges, grouping, assertions and some sample patterns for beginners.
http://www.addedbytes.com/cheat-sheets/regular-expressions-cheat-sheet/


CSS Transparency

used on this site so you can see the background image behind content on smaller screen resoltions
Transparency is one of those weird things that is treated completely differently in all browsers.
don’t forget to read the comments at the bottom of this article too:
http://css-tricks.com/css-transparency-settings-for-all-broswers/


Twitter “Retweet” Button

The Retweet button is for website and blog publishers that want to encourage their audience to retweet their content on twitter.
Here’s a really smart bit of code using one simple piece of JavaScript to give up to date tweet counts and shorten your title and link for the retweets. Best of all it will work on any web page, anywhere!
http://help.tweetmeme.com/2009/04/06/tweetmeme-button/


Dezignus.com

Vector art, icons, brushes, textures, wallpapers, anime, girls, tutorials… nuff said!
http://dezignus.com/

if you found any of these useful, please tweet/share.