Thursday 30 June 2011

Please do not ask me to earn your wages for you

Another rant about Open Source development

I would like all my readers and especially the tens of thousands of people who have downloaded my Wordpress Plugins to please remember the following >> I am currently giving my plugins away for free and relying on Google adsense clicks and donations to help fund my development time.

So far I have had a few £60 payments from Google and a minimal amount of donations. I have welcomed every donation so far so please don't think they are not appreciated but when you usually work for £700 a day having a donation for £1 or £2 once a fortnight which relates to about 3,000 downloads is a bit disheartening.

I know I have blogged about how much I hate open source coding before but I am honestly of the opinion that a number of UK and US companies are outsourcing high quality IT developer jobs to India (because it seems you can find a developer willing to write whole websites for less than a £50 somewhere on that sub-continent) only for those same developers to fill up my inbox or comment sections with requests for me to do their work for them for free.

In fact probability suggests that I have more than likely ended up doing some Indians work for them for free who stole the original contract from myself due to undercutting my reasonable and realistic quote for a £10!

It would be quite funny if not so sad and unfortunate but it seems that too many IT managers and company directors have no idea about the value of a qualified and experienced IT developer nowadays and it's only through their incessant cost cutting that they will learn the hard way.

It is also for this reason that I am going to refuse to do any custom development for any of my plugins unless partial payment is received up front.

On numerous occasions, and sadly this even includes multi-national companies, I have had people contact me and promise reasonable sized donations for specific features to be developed only for them to swerve me once the work has been done.

Due to the GPL nature of Wordpress there is little scope for money making unless you do most of your work with remote procedure calls or mask your code some way which unlike C# and .NET is pretty hard with PHP as you cannot easily convert your code to a compiled DLL or equivalent compiled file type.

Therefore if you have any requirements or ideas for improvements to my plugins you may email me with your request but please don't expect a reply unless you are willing to pay for the work up front. I am a reasonable man and will accept half up front and half on completion but I have lost faith in mankind to keep their word and there are way too many shysters for my liking.

Either steal my code without me knowing about it or pay me for it.

DO NOT ask to steal my code it makes no fucking sense at all! (this has actually happened)

If you cannot code and are incapable of amending or making your own plugins like I had to do or you are too stupid to steal code without being caught then be a real man and ask the developer what price they will accept.

Do not promise them a tenner for a grands worth of work and do not get annoyed when you ask if your specific feature is something I am thinking of introducing in a future release and I reply "not unless someone pays me to do it".

I have long passed the time in my life where I code other peoples work for fun just so that they can earn money off my hard labour.

My rant is officially over. Thank you for listening.

Why is Strictly AutoTags a good tagging plugin

Strictly AutoTags - Is it a good plugin?

As the author of the top rated Strictly AutoTags Wordpress plugin that at the time of writing has been downloaded over 35,000 times and still has 5 stars I am bound to be biased towards it.

You can read all about my plugin on my main website or view many of the reviews people have written about it on-line however I thought I would quickly list a couple of the main points which are often overlooked.

The main point is that Strictly AutoTags does not use remotely hosted API's to determine which tags to use.

Many of the other automatic tagging plugins use API's to retrieve a list of tags for their article posts. This involves sending the article to a remote site through an HTTP request and retrieving a list of tags in an HTTP response. The downsides of this approach are:
  • You are relying on a remote website and a working API for the tagging to work. If their server is down or their code is broken you will get no tags back.
  • You are relying on a 3rd party to keep a list of tags up to date. When new tags come out you must wait until they are added before they can be used. For example if a news story breaks that mentions for the first time the name of a major character within the story - say a baby goes missing or a banker commits suicide then their names are unlikely to be in any 3rd party list of tags until someone a) decides the name is worth going on the list and b) the list is updated to have the name on it.
  • You are using up bandwidth passing content back and forth from your websites server to the API server. Depending on the size of the article and the number of articles you are tagging this may or may not cost you a lot of money depending on your hosting package.
Why is the Strictly AutoTags plugin different?

Well for one it has the best of both worlds in that it uses your existing tag list to work out what words to use for post tags and therefore you can tailor your own tag list to words relevant to your sites content only and start off with as big or as small a list as possible.

Instead of using up bandwidth and relying on the 3rd party API to always be active and fast you can create your own tag list and do the same thing internally. It may not have the same size or depth of tags but you are not using bandwidth or spending time making HTTP requests to check for tags you might already have.

Another great feature is that it has an auto discovery feature which when enabled will automatically scan the content of your article for words or sentences that can be used as new tags. This is great for sites with no initial tag list as it will help build a list from scratch and it is also great for identifying the names of people who have suddenly become famous over night and are appearing in news stories before 3rd party API's have been updated.

Using my own proprietary code I scan content for possible new tags that match important English words such as names of people, companies, government office branches, football clubs and anything else that could be deemed important. This is all done without requiring the upkeep of a list of possible tags which 3rd party API's mainly rely on.

If a news story breaks about a fireman called Mike Johnson saving a baby named Amanda Jean Jones then these names would be identified as possible tags and if saved they are then available in future searches. API's relying on lists would need to add these names into their database so that users of their API could make use of them before they get tagged.

Another reason my plugin is pretty cool is that unlike some plugins that just match existing tags inside the content and then re-use them for that article my plugin checks to see how often the tags are used so only the most relevant and frequently referenced tags are added.

It also ranks each tag match depending on where it appears so that the tag "CIA" appearing in the article title or a H1 tag is ranked a lot higher than if the word just appeared in a paragraph inside the main content.

My plugin all ranks matches within all important kinds of HTML such as H1 to H6, Strong, EM, Bold, Italic and Anchor tags. A word within an H2 is ranked higher than one within an H6 or a Strong tag. These rankings are then used to order the tags so only the tags ranked with the highest score are used.

The admin user can configure the maximum number of tags that can be added per article as well as a number of other cool featured including the great for SEO option of wrapping tagged words in <STRONG>tags</STRONG> so they are considered more important than other pieces of text.

As well as being able to set up the plugin to ignore certain words or phrases as either case sensitive or case insensitive the plugin has a number of other options and I am constantly coming up with new ideas for it.

In fact I am working on a new SEO related plugin that is so black hat that I am having trouble coming up with a descriptive word for it that conveys it's total awesomeness.

If anyone has any ideas of what they would like to see in any Search Engine Optimisation plugins then please leave a comment or send me an email as the more ideas the better.

Anyway if you are currently debating on what kind of autoblogging tools to use for your Wordpress site then I suggest checking out my plugins Strictly AutoTags and Strictly Tweetbot two plugins that can save you huge amounts of time and give your blog or site an active online social media presence without lifting a finger.

Also if you are one of the 35,000 plus users of my Strictly AutoTags plugin and you have found it useful in generating you a nice a tag list or helped in driving traffic to your site then please consider donating a small amount of money to my site.

Remember that at the moment all my Wordpress Plugins are free and they take a lot of time to keep maintained as well as developing new features. Without your support I will have to stop my open source development and move back towards paid for applications which is only going to hurt current users so please consider helping me out. Remember any amount is appreciated!






Saturday 25 June 2011

Loading Social Media Code Asynchronously

Preventing Slow Page Loads By Loading Widgets Asynchronously

I have noticed on a number of sites that use such as the popular Add This widget that for some reason many people using this code have caused problems for themselves by adding the <SCRIPT> tag that loads the widget in every place that they want the widget to display.

On a news blog with 10 articles this means that the same <SCRIPT> could be referenced 10 times. Now I know browsers are clever enough to know what they have loaded and utilise caching but as every user of Google Adsense knows having to embed <SCRIPT> tags in the DOM at the place where you want the advert to display instead of just referencing it once at the bottom of the HTML or loading it in with Javascript can cause slow page loads as the browser will hang when it comes across a script until the content has been loaded.

I have personally spent ages trying to hack Google AdSenses code about to utilise the same asynchronous loading that they now use for their Analytics code but to no avail. There code loads in multiple iframes and any hacking seems to trigger a flag their end that probably signifies to them some kind of fraudulent abuse.

However for other kinds of widgets including the AddThis widget there is no need to reference the script multiple times and I am busy updating some of my sites to utilise another method which can be seen on the following test page >> http://www.strictly-software.com/AddThis_test.htm


Loading addthis.com social media widgets asynchronously

I wanted to keep the example as simple as possible so in that regards if you use IE it's best off to view it in IE 9 as the only cross browser code I have added is a very basic addEvent function and an override for document.getElementsByClassName which doesn't exist pre IE 9.

Other browsers should work without a problem i.e Chrome, FireFox, Safari, Opera and any other standard compliant browser that supports the DOM 2 Event Model.


Specifying where the Social Media widgets will appear

HTML 5 makes use of custom attributes that validate correctly as long as they are prefixed by the name data- therefore I have utilised this much needed feature to specify the URL and the Title of the item that is to be bookmarked on the desired Social Media site.

You might have a page with multiple items, blog articles or stories each with their own Social Media widget and instead of defaulting to the URL and Title of the current document it is best to specify the details of the article the Add This widget refers to.

The HTML code for outputting a widget is below:


<div class="addthis_wrapper" data-url="http://www.strictly-software.com/twitter-translator" data-title="Twitter Translator Tool" >


Notice how the URL and Title are referenced by the

data-url="http://www.strictly-software.com/twitter-translator" data-title="Twitter Translator Tool"

attributes. You can read more about using custom HTML5 attributes as they are becoming more and more commonly used.
Changing the placeholders into Social Media widgets

Once the placeholder HTML elements are inserted into your DOM where you want the addthis widget to appear instead of doing what many Wordpress plugins and coders do and adding a reference to the hosted script next to each DIV you just need to add the following code in the footer of your file.

You can either wrap the code in an on DOM load event or an on Window load or just as I have done wrap it in a self calling function which means it will run as soon as the Browser gets to it.

You can view the code is more detail on my test page but to keep things simple I have just done enough cross browser tweaks to make it run in most browsers including older IE. There might be some issues with the actual addthis code that is loaded in from their own site but I cannot do anything about their dodgy code!

The Javascript code to change the DIV's into Social Media Widgets

(function(){
// this wont be supported in older browsers such as IE 8 or less
var els=document.getElementsByClassName('addthis_wrapper');

if(els && els.length >0){

// create a script tag and insert it into the DOM in the HEAD
var at=document.createElement('script');at.type='text/javascript';

// make sure it loads asynchronously so it doesn't block the DOM loading
at.async=true;
at.src=('https:'==document.location.protocol?'https://':'http://')+'s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a42081245d3f3f5';

// find the first <SCRIPT> element and add it before
var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(at,s);

// loop through all elements with the class=addthis_container
for(var x=0;x<els.length;x++){

// store pointer
var el = els[x];

// get our custom attribute values for the URL to bookmark and the title that describes it defaulting to the placeholders that
// will take the values from the page otherwise. By using data-title and data-url we are HTML 5 compliant
var title = els[x].getAttribute("data-title") || "[TITLE]";
var url = els[x].getAttribute("data-url") || "[URL]";

// create an A tag
var a=document.createElement('A');
a.setAttribute('href','http://www.addthis.com/bookmark.php');

// create an IMG tag
var i=document.createElement('IMG');
i.setAttribute('src','http://s7.addthis.com/static/btn/lg-share-en.gif');

// set up your desired image sizes
i.setAttribute('width','125');
i.setAttribute('height','16');
i.setAttribute('alt','Bookmark and Share');
i.style.cssText = 'border:0px;';

// append the image to the A tag
a.appendChild(i);

// append the A tag (and image) to the DIV with the class=addthis_container
el.appendChild(a);

// using DOM 2 event model to add events to our element - remember if you want to support IE before version 9 you will need to either use a wrapper addEvent
// function that uses addEvent for IE (and Opera) and addEventListener for IE 9, Firefox, Opera, Webkit and any other proper broweser
addEvent(a,"mouseover",function(e){if(!addthis_open(this, '', url, title)){StopEvent(e,a)}});
addEvent(a,"mouseout",function(){addthis_close});
addEvent(a,"click",function(e){if(!addthis_sendto()){StopEvent(e,a)}});

// cleanup
el=a=i=title=url=null;
}
}
})();


The code is pretty simple and makes use of modern browsers support for document.getElementsByClassName to find all elements with the class we identified our social media containers with. This can obviously be replaced with a selector engine such as Sizzle if required.

First off the code builds a SCRIPT element and inserts it into the DOM in the HEAD section of the page. The important thing to note here is that as this code is at the bottom of the page nothing should block the page from loading and even if the SCRIPT block was high up in the DOM the code only runs once the DOM has loaded anyway.
// create a script tag and insert it into the DOM in the HEAD
var at=document.createElement('script');at.type='text/javascript';

// make sure it loads asysnchronously so it doesn't block the DOM loading
at.async=true;
at.src=('https:'==document.location.protocol?'https://':'http://')+'s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a42081245d3f3f5';

// find the first <SCRIPT> element and add it before
var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(at,s);




The code then loops through each node that matches creating an A (anchor) tag and an IMG (image) tag with the correct dimensions and attributes for the title and URL. If none are supplied then the system will default to the document.location.href and document.title if no values are supplied which might be fine if it's the only widget on the page but if not values should be specified.


Events are then added to the A (anchor) tag to fire the popup of the AddThis DIV and to close it again and I have used a basic addEvent wrapper function to do this along with a StopEvent function to prevent event propagation and these are just basic cross browser functions to handle old cruddy browsers that no-one in their right mind should be using any more. As this is just an example I am not too bothered if this code fails in IE 4 or Netscape as its just an example of changing what is often plugin generated code.


You can see an example of the code here >>

http://www.strictly-software.com/addthis_test.htm

This methodology is being used more and more by developers but there are still many plugins available for Wordpress and Joomla that insert remote loading SCRIPTs all throughout the DOM as well as using document.write to insert remote SCRIPTS. These methods should be avoided if at all possible especially if you find that your pages hang when loading and as you can see from the example code it is pretty simple to convert to your favourite framework if required.

Sunday 12 June 2011

New version of Strictly Software Wordpress Plugins Released

Updates to Strictly Tweetbot and Strictly AutoTags

Last night I released new versions for two of my Wordpress plugins. You can get the most up to date versions from the Wordpress plugin site.

Strictly Tweetbot 1.0.5 released

The latest version of my Tweetbot which handles the posting of multiple tweets to multiple accounts whenever a new post is added has two new features.

They both offer the user the ability to shorten a tweet message so that it fits within the 140 character limit. One option is to use the Tweet Shrink API, the same API used by popular Twitter Apps such as Tweetdeck and the other is to use my own custom Strictly Text Shrink function which replaces common shrinkable words with text speak equivalents.

I have added a test function into my plugin that allows you to compare both methods with the last posted tweet so that the right method is used. There is of course nothing stopping you from using both together or neither at all.



The latest version of my auto tagging plugin offers the ability to add phrases to the noise word list as well as the option of splitting noise words up into two groups, case sensitive and case insensitive.

I have found that sometimes it is preferable to only tag words of a certain case such as the commonly used tag IT or WHO (information technology and World Health Organisation).

Whereas the capitalised versions are acronyms the lower case versions are noise words. Therefore to prevent lots of instances of the lower case version being tagged and bolded (when using the SEO option) it is advisable to put these words into the case sensitive noise word list.