Whiteforest

Sample Accesskey List

// November 2nd, 2009 // 1 Comment » // Accessibility, Development, User Experience, XHTML

Access keys are simply keyboard shortcuts. They are defined combinations of keys, Alt + a key which allows the user to access that field or section of a webpage.

You impliment accesskeys using the accesskey attribute on links and forms fields. If the access key is defined on a link, the browser will follow the link. If defined on a form field, the browser will set focus on that field.

To use accesskeys on Windows, press ALT + an access key. On a Mac press Control + an access key.

There are no access key standards, so here are some commonly-used keyboard shortcuts:

• Alt + 1 – Home (yourdomain.com)
• Alt + 2 – Skip Nav
• Alt + 3 – Site Map
• Alt + 4 – Search
• Alt + 5 – Products
• Alt + 6 – Forums
• Alt + 7 – Blogs
• Alt + 8 – Privacy
• Alt + 9 – Feedback
• Alt + 0 – Accesskey List

Browser Compatibility Tool

// September 2nd, 2009 // No Comments » // CSS, XHTML

I came across a great browser compatibility tool to check websites for IE browsers such is IE6, IE 5.5, well, all of them in fact. What is really great about it is that it is FREE! Great to work with this along with hacking bits of CSS, thanks again Wikipedia!

Folding Plug

// June 29th, 2009 // No Comments » // Design, User Experience

Now why didn’t I think of this? I’m sure we have all thought that about something or other. This, is pure genious. The UK plugs are huge compared to the double pin plugs from various countries around the world. Because of this problem a great solution has been created by Mr Min Kyu Choi.

Get elements by class name with javascript

// May 14th, 2009 // 4 Comments » // CSS, Javascript

Javascript does not support getting elements by class name; it only allows you to get elements by id. It is very useful having the ability to do this however, such as opening windows on a click when an anchor has an “external” class attached to it. As I don’t use frameworks such as JQuery for everything, I created this function which gets each element with a given class name and returns an array of each element.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

document.getElementsByClassName = function(className)
{
  var children = document.getElementsByTagName('*') || document.all;
  var elements = new Array();
  for (var i = 0; i < children.length; i++)
  {
    var child = children[i];
    var classNames = child.className.split(' ');
    for (var j = 0; j < classNames.length; j++)
    {
      if (classNames[j] == className)
      {
        elements.push(child);
        break;
      }
    }
  }
  return elements;
}

Separating MySQL Username and Host

// May 6th, 2009 // No Comments » // Database, Development, MySQL

As the MySQL USER() command returns users as ‘user’@'host’, it can be difficult to do straight comparasons. One way to extract both username and host is by using SUBSTRING_INDEX. For example, in a stored procedure you could use:


-- USER
SELECT SUBSTRING_INDEX(USER(), '@', 1) INTO txtUsername;
-- HOST
SELECT SUBSTRING_INDEX(USER(), '@', -1) INTO txtHost;


Voila!

Users and Permissions in MySQL

// March 24th, 2009 // No Comments » // Database, MySQL

The best way for creating users in MySQL is by using CREATE USER or GRANT statements. Another way is by manipulating MySQLs grant tables, but this is not recommended.

By default the superuser is root. A password must be specified for this. It is best if this is only used for superadmin purposes.

For new accounts you need to create two users with the same name. One is for access via localhost, the other remotely.

GRANT ALL PRIVILEGES ON *.* TO 'user'@'localhost' IDENTIFIED BY 'password' WITH GRANT OPTION;
GRANT ALL PRIVILEGES ON *.* TO 'user'@'%' IDENTIFIED BY 'password' WITH GRANT OPTION;

To remove a user, use

DROP USER user;

To Change a password, use:

SET PASSWORD FOR 'user'@'localhost' = PASSWORD('newpassword');
SET PASSWORD FOR 'user'@'%' = PASSWORD('newpassword');


Backing up a MySQL Database

// March 24th, 2009 // No Comments » // Database, MySQL

Using cmd prompt in Windows, navigate to the bin directory where MySQL has been installed. There will be a file called “mysqldump.exe” in that directory. Enter the following command:

mysqldump -u root -ppass --databases your_db > backup.sql

Notice that there is no space between the -p and the password, this is a bug in MySQL.

The backup.sql file will be created in the directory that you are in. You can specify C:\your_db.sql if you want the file to be backed up on the C:\ drive.

If you want to backup the structure only, use -d for the “–no-data-option”. For example:

mysqldump -u root -ppass -d --databases your_db > backup.sql


Disappointments with the iPhone

// March 10th, 2009 // No Comments » // Fun, iPhone

Don’t get me wrong, the iPhone is a great piece of kit. With all they hype and all the amazing things the phone can do, I was let down by a few basics that I would have taken for granted with even the cheapest of phones. For example ..

You cant send MMS with an iPhone

What? Yeah, seriously! You can only email photos. You cant even send pictures on the iPhone! It took a while for this to sink in after searching around in the menus. I thought surely this would be a standard part of the kit? Unfortunately not. There is supposedly a way around it. Apparently each mobile phone number has a corresponding email address with its network, so you could email it to this number @ network.com. For example, with virgin you would put in the mobile number, with international dialing code, then @virgin.com, and the image should be send to the phone. I have not tried this out however.

You cant take video

Exactly. This is just as bad as not being able to send an MMS. There is an app that you can download for about $15 though. This also raises a complaint that a lot of applications should be standard on the phone, and why should you pay extra for things that are standard on other phones. The downloadable application uses an open source codec so it has been criticized for charging for the app.

Camera is bad quality in low light

I think a flash is a bit overkill on phones to be honest. I just found the quality of low light conditions to be worse on the iPhone than on other mobiles I have seen. Some sort of comparison chart would be good.

Battery life is bad

There are ways to extend the life of the iPhones battery, however, if you want to use the iPod and maybe do a few calls and a little browsing you will have to charge the battery daily.

Apart from all of those the iPod is a cool bit of kit.

The Best Firefox Plugins

// March 5th, 2009 // No Comments » // Development, Web Development, XHTML

A lot of plugins for firefox are labour and time saving. Some are a godsend. Here is a list of the ones I use a lot.

Firebug

Firebug is a development tool that you use directly in the browser. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. It is great for traversing xhtml and css, as well as seeing what is going on when debugging javascript.

Web Developer Toolbar

The web developer toolbar is a very handy tool for interrogating elements within a web page, both xhtml and css. It is great because you can highlight elements, instead of adding border: 1px solid #f00; in the style sheet.

Measureit

Measureit is a cool tool that lets you draw out a rectangle right on any webpage in order to establish the width and height. It is great as I used to take screenshots, put them in photoshop, then measure the elements in that. This saves tonnes of time.

FireFTP

FireFTP is a free, secure, cross-platform FTP client which is very easy to set up. It is ideal when you want something uploaded fast. It is quite slow when transferring a lot of files however.

View Source Chart 2.7

View Source Chart 2.7 is a really cool plugin for displaying html when you view the source.

WAVE accessibility plugin

The WAVE plugin is really good for accessibility and SEO checking.

XHTML Table

// February 17th, 2009 // No Comments » // CSS, XHTML

Standards based web development and the semantic web call for markup language which matches the stucture and semantic meaning of the data. Screen readers are also an important aspect which need to be catered for. This does not mean that the tables cannot be “beautified” so I have included some CSS for the table.

Here is the table XHTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<table border="0" summary="This is an example table demonstrating thead, tfoot, and tbody."><caption>Table Caption</caption>
<thead>
<tr>
<th id="id">Staff ID</th>
<th id="firstname">Staff First Name</th>
<th id="surname">Staff Surname</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Staff ID</td>
<td>Staff First Name</td>
<td>Staff Surname</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1111</td>
<td>Mark</td>
<td>Robson</td>
</tr>
<tr>
<td>2222</td>
<td>Paul</td>
<td>Diston</td>
</tr>
<tr>
<td>3333</td>
<td>John</td>
<td>Grisdale</td>
</tr>
</tbody></table>

And the style:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

table
{
border-top:1px solid #999;
border-left:1px solid #999;
border-collapse:collapse;
}
caption
{
letter-spacing: 5px;
font-size:14px;
padding-bottom:5px;
color:#930;
}
th, td
{
padding:5px 10px;
border-right:1px solid #999;
border-bottom:1px solid #999;
}
th, tfoot tr td
{
background:#ccc;
font-weight:bold;
}