Archive for Web Development

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.

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.

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');

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.

Firebug autocompleter

Firecookie

Foxyproxy

Jsonview

Colorzilla

Colorzilla

HttpFox

HttpFox

LinkChecker

LinkChecker

Bottom Error Console

Bottom Error Console

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.