Learning Javascript – the module pattern

// October 17th, 2012 // No Comments » // Development, Javascript, Web Development

A module is a self contained function, meaning that its functions and variables are private, but references to them can be returned, giving access to the internal workings via a return code block. Because of the componentisation of code, it is independently testable, can be loaded asynchronously as and when needed. What this means in human talk is described below.

The module pattern

A lot of technically rich definitions for the module pattern are out there. I however like things to be explained simply, as if a 5 year old could understand it.

Basics:

* Javascript’s variables have function scope (a variable defined in a function is not directly available from outside the function).
* Functions are data, and objects at the same time (functions can contain other functions).
* Functions can be self calling by appending a set of (). This would essentially call itself.

From the above we can see that if we define a function within a function, and set a return value of references to these functions or variables, we can create private functions and variables.

For example:

var myIncrementer = function () {
var i = 0;
function increment() {
return ++i;
}

return {
inc: increment
}

}();

So what happens here is first is that myIncrement is assigned the return value of the anonymous function, which itself is a reference to the private function of increment. when you call the inc() function, the private variable i is incremented and returned.

Now also notice something, the value saves its state too. This is called a closure. Another great thing about this pattern is that you can refer to the internals of the package directly.

Hide email addresses with ISO Characters

// March 17th, 2010 // No Comments » // Development, Javascript, XHTML

Putting email addresses on websites is easy pray for screen scraping spam monserts. There are various techiques out there such as using graphics instead of text, or using javascript. The technique I like is to convert individual characters in an email address into ISO characters. Einstein once said that never memorise anything you can look up in a book, so I don’t want to walk around with ISO character numbers in my noggin. I created this little tool to convert email addresses into ISO codes. Just put in your email address. It will prefix your email with a “mailto:” too.




Opening a browser in a new window

// February 5th, 2010 // No Comments » // Development, Javascript, JQuery, XHTML

For a long time target=”blank” has been redundant for accessibility problems. However, there are situations when opening a new window is neccessary. One technique I used is attaching a class of “external” to each link, and then usung javascript descibed in my get elements by class name example, attach a “window.open(this.href)” to each one. I now use JQuery, so that code has been superceded with just 2 lines of JQuery code.

Link Relationships

Links are used to locate web resources, so good use of the rel attribute enhance the logic and semantic meaning of these resources. Using the rel attribute for things such as pagination i.e. “next” and “prev” are standard link types, so where does “external” fit into this?

You can define additional link types not described in the specification. If you do you should use a profile to cite the conventions used to define the link types. You do this in the meta data profile attribute of the HEAD element:

1
<head profile="http://www.yoursite.com/profiles/core">

You can either use XML for this, or XHTML. A good XHTML example can be found at gmpg.org and at w2.org. As for an XML example, I can’t find one.

Styles and Accessibility

From an accessibility point, you should differentiate external links by some sort of style or description such as (opens new window). So, in order to do that you might want to add a class of external anyway.

JQuery

The actual code in JQuery is very concise. For each a tag with a rel of external, a new window will be opened:

1
2
3
4
5
$('a[rel="external"]').click(function()
{
	window.open(this.href);
	return false;
});

Making your website accessible

// January 28th, 2010 // No Comments » // Accessibility, Development, SEO

Accessibility can be checked automatically and can pass, however, to be more thorough a manual process of checking pages will be necessary. Manually checking will enable you to identify and rectify any accessibility and usability issues with your pages.

I don’t think most issues these days are that bad because most development is done using XHTML, CSS, and semantically. In order of importance, I would say these are the main points to cover:

  1. Manual testing by disabling images, CSS, standard use of headings and lists, testing the functionality without JavaScript
  2. Automated AA validation
  3. Adding multimedia transcripts (captions and auditory descriptions would be good too)
  4. Image contrast tests and necessary revisions, using ColorDoctor to test for Protanopia, Deuteranopia, Tritanopia and Greyscale

Our end goal then is: To make every page in your website and/or micro site standards compliant

Plan of action

  1. List all pages within the entire structure of your website
  2. Check each page in turn (using the tools mentioned later):
    1. If it validates, skip to next page in list #1
    2. If invalid, modify page, or script
  3. Repeat #2 until goal has been met

Once the above has been completed, the next goals would be focussed on if necessary, namely adding transcripts for multimedia presentations and movies.

Implementation

Condensing AA guidelines into a clear checklist

It is pointless checking each point of the AA checklist, as a lot of the sections are regarding things such as contrast of images, the semantic structure and making sure your pages are written in plain English.

Tools and Guides

A great resource giving an outline of how Mozilla Firefox and the Web Developer Toolbar can help with these manual checks can be found here http://www.webaim.org/articles/evaluatingwithfirefox/. This gives a detailed step-by-step checklist of how to test accessibility. Another good resource is http://www.w3.org/WAI/eval/ which gives an overview of evaluating a website for accessibility.

Doc type

Making sure doc type is correct is essential. It was originally set to XHTML 1.0 Strict, but because of certain elements we are using it was bringing up incompatibilities. Therefore I have set it to Transitional (see http://www.w3.org/QA/2002/04/valid-dtd-list.html).

HTML

Font size

Pages should be testing for issues regarding font size increase.

Images

Alt tags are standard attributes and would have been added to each image that has been uploaded. If images are used only as part of a design, or a layout spacer, they should be marked up with an empty alt attribute. However, testing must be done using the Firefox developer toolbar selecting the following options:

  • Outline images without alt attributes
  • Outline images with empty alt tag
  • Replace images with alt attributes
  • Disabling all images

Links

There are issues with the links SharePoint generates, however this is mentioned later in this document.

Lists

Mark up lists and list items properly using “ul”, “ol”, and definition lists as necessary.

Tables

For data tables, identify row and column headers. For data tables that have two or more logical levels of row or column headers, use mark-up to associate data cells and header cells.

IFrame

Each IFrame should have a title.

Headers

Headers and sub headings should be used correctly; this is standard practice for web developers.

Deprecated elements

Using the developer toolbar elements should be found and removed that are deprecated.

Keyboard Navigation

The access key list is already in place; however, it is hidden with CSS – even on focus state. With keyboard navigation these will not be visible. I suggest placing these links near the logo, when tab focus is on each of these links in turn, they will become visible and also have a contrasting background colour or border.

For each text links, a “focus” attribute must be added to the relevant a CSS file. The focus can be the same as the “hover” state.

For each image link, the focus attribute should either add a border, outline, or a hover state image. Again, this should be the same or similar definition as the “hover” state.

Style

Pages CSS styles should be disabled to verify if content is legible.

Scripts

To make scripts compatible with validation it was necessary to wrap embedded scripts with CDATA:

//<![CDATA[
//]]>

See http://www.w3.org/TR/xhtml1/#h-4.8 for more information.

The standard attributes for java script is “type” which should be set as:

<script language="javascript" type="text/javascript">

Pages will also be tested with JavaScript disabled.

Automated validation tools

I would suggest using http://validator.w3.org for single pages. There are others available:

Free accessibility validation tools

Other tools

ColorDoctor – http://www.fujitsu.com/global/accessibility/assistance/cd/download.html – a colour tool from fujitsu which takes an image of a webpage and can render the image as those with Protanopia, Deuteranopia, or Tritanopia would see it.

Summary

Focus here has been on validating to AA standard. Things to also consider is having a CSS file for print, as well as Screen mode.

Resources

WAI Guideline checklist: http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html

Creating a SharePoint Custom Theme

// January 22nd, 2010 // No Comments » // Development, SharePoint

Microsoft’s information on creating a custom theme is a good start, however there are things that you will come across that are not covered here.

First, copy a theme that approximates what your envisaged theme will look like from your C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES directory, and rename it to what you want. This folder contains css files, image files, and an INF file.

Next, rename the INF file to the same name as your folder. Then open and replace the name of the theme it was copied from with the name of the new theme.

Now, to get the theme available in the options of the site you need to add a template definition to the SPTHEMES.XML file in C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\LAYOUTS\1033.

1
2
3
4
5
6
7
<Templates>
   <TemplateID>mytheme</TemplateID>
   <DisplayName>My Theme></DisplayName>
   <Description>Description</Description>
   <Thumbnail>images/myPreview.gif</Thumbnail>
   <Preview>images/myPreview.gif</Preview>
</Templates>

Once all the above has been done it is time to customize the styles in the copied folder.

Styles

SharePoint also uses a Core.css file to style the site, and you will most probably need to overrite these styles. You can modify the core.css directly, but ff there are any upgrades of sharepoint then this file will be replaced, so any changes will be lost. Instead you are better off finding out the class/id of the element, revise the css in your themes css and add !important to any changes, therefore overriding the core.css.

What element is what?

Microsoft list their clases in core.css however, they assume you know what each desciption relates to. Insteand a great help is heather solomon’s reference chart for SharePoint 2007.

Caching

During the development you will find that changes you make to the style will not be updated from refreshes. Our old friend caching again. However, this is not the case of clearing the browser cache, but rather the cache that SharePoint creates.

What you need to do is first change the theme to something other than what you are working on and apply it.

Next, create a batch file (“clearcache.bat”) and enter this line:

cscript.exe c:\windows\system32\iisapp.vbs /a "Application pooll name" /r

In my case it is like this:

cscript.exe c:\windows\system32\iisapp.vbs /a "SharePoint - 80" /r

Now run the batch file.

Once that is done, change theme back to what you are working on.

OR you could download a SharePoint skinner hehe.

How to write a specification

// January 18th, 2010 // No Comments » // Design, Development

A lot of my time as a developer is spent trying to understand what it is that people want from me. Understanding comes from duplicating the viewpoint and idea the other person has. So for me to understand means that the other person needs to understand what it is they want. So first of all you need a clear idea of what it is you want to achieve. If you do not have a clear idea of what it is you want then you will not be able to communicate it. By all means ask a technical person, who is good at explaining things, for advice if you are uncertain about anything technical. In fact, it is best if you have a technical person during the discussions and planning of any digital marketing. I have lost track of how many times a spec has come through with plans for wild and wonderful functionality, which cannot be delivered due to timescales, budget, or technology limitations.

Personally, I really don’t like to think. Thinking is a chore for me. It is different when I am problem solving, but that comes after understanding the problem domain. So before that, I like things to be explained to me as if I am eight years old (movie quote from “Philidelphia”, the Tom Hanks film). When writing a spec there may be the urge to sound overly intelligent. Remember, we already know that you are intelligent – otherwise you wouldn’t be doing the job you are doing. So well done.

The guy who took my first programming course always used to say that the first rule of programming is “never assume anything.” That is good advice. If you think that something might be “obvious”, still put it down. This applies to any resources such as links to documents, client assets, servers, and also any specific instructions. These should all be noted down and also make sure access and permission to these resources have been set up.

A spec should actually be a description of the finished product, and all information to realise the finished product.

Importances can be an issue. The functionality of a development is a priority for the developer. For a project managers point of view it may be the copy. Make sure that it is understood what the most important aspects of the system are. This again would come about during the planning if a tech person is part of the planning and design stage.

Overview

  • The project has been planned well and is feasable
  • A clear understanding of the project
  • Plain english is as little words as possible, most important points highlighted
  • List in order or emphasize importances
  • Assets and asset locations listed and permissions set up

Firebug in Chrome, IE, Safari, Opera?

// January 8th, 2010 // No Comments » // Development, Javascript, Web Development, XHTML

I love Firebug. I wouldn’t say it makes debugging a pleasurable experience, but it makes it a hell of a lot easier than if you didn’t have it. This is fine when you are working explicitly in Firefox, but what happens if you need to debug something in other browsers? Nightmare. IE has the developer plugin, but if I love Firebug, I hate IE developer plugin (I won’t say how much I hate explorer though tee hee). So, what’s a guy to do? Firebug lite . Firebug lite is a JavaScript file you insert into your pages to simulate some Firebug features in browsers other than “Firefox”. This will be really handy!

Promoting your website – it’s all about SEO

// January 6th, 2010 // No Comments » // SEO, Web Development

It is also all about Google. The vast majority of people will come across your site from a search engine, the vast majority of those will be via Google. Google has the monopoly of search, so it is essential to get your site ranking as high as possible. It is impossible to have perfect SEO, as it wouldn’t be perfect for very long. Google are constantly changing their algorithms for searh and page ranking. Therefore it is a constant game of cat and mouse for those promoting their websites. There are some essentials SEO techniques that you should include in the development of your website. These things include:

  • Web page title (keywords used in title)
  • Body copy (good use of keywords)
  • Header tags
  • Strong tags
  • Image file names
  • Image alt tags
  • Domain name
  • Path
  • Parameters (or rather, not having any)
  • Page file size
  • In-bound links
  • PageRank

Web page title

The title tag of your web page is what appears in the search engine results page (SERP). This then has a double benefit in that it allows google to understand what your page is about, but also it communicates to the searcher what the page is about. Fixing only the title tags of your pages can often generate quick and big differences to your rankings (http://www.highrankings.com/allabouttitles).

Body copy – content is king

If you are putting a lot of reasourses into your website you want to make sure you create unique and compelling content. There is a lot of duplicated content out there, and Google will penalise you if you are publishing content that is already there. You should also aim for at least 200 – 300 words per page. Another thing you can do to increase your ranking is to support your copy with images. Make sure your image names reflect the image itself. This is especially important on online stores.

Keywords

You have to make sure that people are looking for what you are selling. This is where research comes in. It is fine writing content for yourself, but you can’t expect thousands of hits without doing research. You need to find out what search terms people are using, and then build your pages with these kewords in the page title and copy. You should also use one phrase per page, creating a seperate page for each keyword.

You need to know what search engines are looking for. The search engine makes the best match it can between the words used when searching and matches it to what it has registered in it’s database. The top of page 1 is the best position. To get there you have to make best use of keywords in your webpage’s copy. If you do this your hits will soar. You must pick the right ones to use however.

Conduct research on target users search patterns. Pick search terms and optimise pages specifically for those. It is common sense really – use the words on your website that matches the words your customers use when searching. But how can you find out what your customers are searching for?

Keyword prominence

The top 25% of the page and the bottom 25% of the page are the most important. This is where Google wants to see critical keywords and phrases you want to be ranked by. The bottom of the page is important. Good navigation with good titles enhance googles perception of your site too.

Keyword proximity

As mentioned it is best to have a definite statement that summarises the subject of the page. The rest of the content should be rich in keywords and phrases, but not as heavy as the intro or the lower 25% of the copy. Using too many keywords however will mean that the googlebot spider will treat the content as spam and give up. You should look for a keword density of about 4%.

Keyword tools

http://www.wordtracker.com – paid for keyword tool. £161 for annual subscription or £20 for a one month minimum term. It does have a 100% money back guarantee. There are some great free resources on the academy section of their website.

Nichebot has also a good reputation, although I have not tried it myself.

Accessibility and web standards

Geoffrey Zeldman once said that 99% of all websites were obsolete. It is therefore important to build your website using valid XHTML/HTML, CSS. Tables for layout are a no-no; tables are used to display tabular data. Google likes clean code. Content that is generated with Javascript will be missed by Google.

The semantic web is basically seperating content from layout/design, and making content logical i.e. main heading, sub headings, emphasised copy etc. Navigation is another factor; make sure it is clear, clean and precise. Good use of breadcurmbs helps the user of the website also, Google will also recognise this. All of these come under the usability heading too, with things to consider such as the three click rule.

PageRank

There is a lot of confusion with this term. I myself for a long time thought that page rank was how high my website ranked in search engine results. This is not quite correct. The term PageRank comes from one of Googles founders, Larry Page. He created an algorithm which assigns a numerical value from 0 to 10 to your website based on relevance, authority, usefulness, and clear meaning.

How fast does your site load?

In the early days of web development the 50k rule reigned supreme. If your site was greater than this, those with 56k and less modems would possibly give up. Since the abundance of broadband designers began to get more creative and use graphic heavy designs with not worrying too much about download speeds. However, Google recently announced that it’s algorithm will factor in page load speed in addition to the other 200 or so ranking factors it uses. See http://www.webdesignbooth.com/7-tools-to-optimize-the-speed-of-your-website/ for more information.

Internal links, external links, and in-bound links

Internal links (links that point from one page on your site to another) carry some weight, but not as much as links from external sites to your site (see http://www.seomoz.org/blog/17-ways-search-engines-judge-the-value-of-a-link).

There are many ways to get in-bound links. If you use forums or leave comments on blogs you can usually leave the url of your website. This is a great way to get inbound links. You can also submit your site to business directories such as Yahoo and Google. Another great way is to suggest your site to the Open Directory Project. They will check out your website manually, so if your website is used for spam or has low quality content they will not register it. Check out http://www.dmoz.org.

Things to be aware of

Multiple domains

Google really doesn’t like redirects. If you have lots of domain names for your website/company it is much better creating a keyword heavy page under each domain and provide links to your website from that.

Metadata

Metadata means information about information. As mentioned, the title of your page is the most important.

Next are the meta keywords. These are what you feel your website should be ranked by, however, these are abused by spam websites so they are not relied on by Google. However, it is best to use them and only include specific keywords to the content of the page. You will be penalised otherwise. It is said that Google do not rely on meta keywords, however, a lot of other search engines do.

If you do a search on google you are presented with the website address, title of the page indexed, and introductory text about the site. Where google gets this text from is the meta description. If there is no meta description then google selects copy from the most specific content of your site.

And finally

If you’re passionate about your site’s topic, there are lots of great avenues to engage more users. Start a blog: make videos, do original research, and post interesting stuff on a regular basis. Update your pages regulary. Alter body copy and add images or downloadable pdf files. Get users to add content. Forums. Get people to add reviews. Provide an RSS feed.

One of the best things to do if you are targeting Google is to follow what Google are doing using the information they provide. Check out http://www.google.com/support/webmasters/bin/answer.py?answer=35769

You can also implement Google search on your website, as there are two types of web user, searchers and browsers.

Don’t think that you have rewrite your entire site, you can work on things incrementally. Keep an eye on how your site is doing by using Google Analytics (http://www.davinciplanet.com/advanced-google-analytics-hacks/)

Resources

A great site with SEO basics. One of the best SEO sites out there is SEOmoz.org.

Special Character Replacement Tool

// December 15th, 2009 // No Comments » // Development, XHTML

We have been doing a lot of work with a French website at the moment and adding the special characters can be a real pain, especially the odd one that manages to evade you. My good friend at work created this dynamic special character replacer.

Simple PHP RSS Reader WordPress Plugin

// December 4th, 2009 // 1 Comment » // Development, PHP, Web Development, Wordpress

I wanted to add some articles into a page on one of my WordPress sites. I wanted something very simple and easy to use. It has been a long time since I had written a plugin.

First things first, start with declaring what your plugin is called, your name, version, your URL and other information at the top of the PHP file like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
* @package RSS Reader
* @author Mark Robson
* @version 0.1
*/
/*
Plugin Name: RSS Reader
Plugin URI: http://www.whiteforest.co.uk
Description: Pull in RSS articles into your site
Author: Mark Robson
Version: 0.1
Author URI: http://www.whiteforest.co.uk/
*/

I then started off with the core of the functionality, in this case the read_rss() function. First thing to do is set up a DOMDocument, and then load in the document using the objects load() function, passing in the rss feed you want. As this is a very basic plugin and I knew exactly what feed I wanted, I simply hardcoded it. It wouldn’t be too difficult to either store the feed in a database, or pass it in when the feed is embedded in a post. For now we will leave it like this.

14
15
16
17
18
19
20
21
22
23
24
25
26
27
function  read_rss()
{
$xmldoc = new DOMDocument();
$xmldoc->load('http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/world/rss.xml');</code>
 
$info = "";
 
foreach ($xmldoc->getElementsByTagName('item') as $feeditem)
{
$info .= '<h3><a href="' . $feeditem->getElementsByTagName('link')->item(0)->nodeValue . '"> ' . $feeditem->getElementsByTagName('title')->item(0)->nodeValue  . </a></h3>';
$info .= "<p>" . $feeditem->getElementsByTagName('description')->item(0)->nodeValue . "<p>";
}
echo $info;
}

Ok, so that all works. It pulls in the title, and link to the article, and also the description of the post. That is all I needed right now. Next, we want to embed something in the particular post we are bringing the feed into. In this case, I want to place a comment in the post, which will then trigger WordPress to replace that, and insert the rendered feed into the content. This is done with this:

28
29
30
31
32
33
34
35
36
37
38
function  setup_rss($content)
{
if(! preg_match('<!--rssfeed-->', $content))
{
return $content;
}
else
{
read_rss();
}
}

Ok, now that is just about ready. Now we need to tell WordPress to look for each instance of the above This is done simply by adding a filter on the post content using:

49
add_filter('the_content', 'setup_rss');

Here is the final code:

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
33
34
35
36
37
38
39
40
41
42
43
/**
* @package RSS Reader
* @author Mark Robson
* @version 0.1
*/
/*
Plugin Name: RSS Reader
Plugin URI: http://www.whiteforest.co.uk
Description: Pull in RSS articles into your site
Author: Mark Robson
Version: 0.1
Author URI: http://www.whiteforest.co.uk/
*/
 
function  setup_rss($content)
{
if(! preg_match('<!--rssfeed-->', $content))
{
return $content;
}
else
{
read_rss();
}
}
 
function  read_rss()
{
$xmldoc = new DOMDocument();
$xmldoc->load('http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/world/rss.xml');
 
$info = "";
 
foreach ($xmldoc->getElementsByTagName('item') as $feeditem)
{
$info .= '<h3><a href="' . $feeditem->getElementsByTagName('link')->item(0)->nodeValue . '"> ' . $feeditem->getElementsByTagName('title')->item(0)->nodeValue  . '</a></h3>';
$info .= "<p>" . $feeditem->getElementsByTagName('description')->item(0)->nodeValue . "<p>";
}
 
echo $info;
}
 
add_filter('the_content', 'setup_rss');