Domain renewal group sales pitch

Just received a letter from domain renewal group telling me my domain will expire soon. They kindly offer me “their” best savings when I switch to their service. Their best offer is double my normal yearly rate. Thank you for scouring the domain lookup and trying to get some cash out of me but I think I’ll pass this time.

The form on the letter is a good effort. All the prices are in pounds but the total is in dollars (good mail merge).  But by far the best of this letter is the masses and masses of small print on the back. I think I’ll stick to my current provider.

Be careful what you ask for




homebase_extraction_fan

Originally uploaded by surfgimp

Homebase seems to have an interesting fall back when you submit a query that it doesn’t know. It gives you random stuff in the hope that you’ll buy it. I suppose there’s more chance of buying something than having a “sorry we can’t find that” page with no products.

This still amuses me. Time to try other random searches me thinks.

WordPress theme versus blank theme

When learning a new skill the process can be accelerated by seeing how other people have accomplished the task. When it comes to themes for wordpress there are lots available ranging from free to paid for. These can come in various setup’s i.e. one column, two column etc. Therefore when designing a new theme for wordpress it’s easy to copy an existing theme and then start editing the css / code to see how the theme changes and to tailor it to the project in hand.

Trees and sky

Sometimes though it is difficult to see the wood for the trees as even the default style.css document is over 350 lines long. This is where a barebones or completely stripped down theme comes in useful. I’m currently using starkers form elliotjaystocks.com. Then the theme can be built up using parts from the theme that you’ve been learning from safe in the knowledge that if it starts to work unexpectedly that it’s because of the code inserted not because of combination of css further down.

Debugging CSS using web development toolbar

If the css is getting a bit of a unwieldy monster it can be helpful to separate the css out into separate sheets so that individual stylesheets can be turned off to see effects on the theme. The individual stylesheets can be turned off using the web development toolbar for firefox. Sometimes it’s easier to live edit the css in the browser which is carried out by clicking on the css menu then “edit css”. If the theme is not behaving as expected then the toolbar can help visualise the problem with the stylesheet by using the “Display element information” in the information dropdown. This then shows the details for the part of the page that is selected. This includes the nesting of the css elements the size, postion, font.

Use both

To learn how to make themes it  is good to use both established themes and barebones themes. This way it can help to cherry pick the aspects out of the themes but implement them into

Sexy Forms

We’ve all seen forms of varying types littering the internet. My approach always used to be to get the table tags out and enclose my form in a table of varying complexity depending on how I wanted to make the form look. Then came the eureka moment that the resulting form is buried in a lot table, tr, td, th, tags. That’s when the search continued for a new method.

Fieldset tags

A simpler form can be created using fieldset tags. Within the fieldset tags we can make use of the legend tag to put a title on the form. This is more useful when there is a few sections to a form to group individual fields onto sections. Then to group the headings for the field the <label for> tag is used. This then helps when styling the form as the label can be aligned to the left and a two column form can be easily created.

<form id="form1">
 
<fieldset>
<legend>This legend makes a neat heading</legend>
 
      <label for="text1">Field 1</label>
<input id="text1" type="text" />
<input name="submit" type="submit" />
</fieldset>
 
</form>

This code gives the form below without css.

This legend makes a neat heading

CSS layout

The form contains no markup to make the form sexy but as we’ve given the elements id names we can use CSS to alter the formatting of the form as we wish. This includes setting the form up with columns, altering the fonts, colours and anything else we wish to add.

jquery validation

To add extra extra help to the form validation can be used to give help, issue alerts to ensure that forms are filled in properly. The following jquery validation plugin was used available from http://bassistance.de/jquery-plugins/jquery-plugin-validation/. If running on a live website to ensure that the data is validated some server based validation should be used by using php or another server-side language.

The validation plugin has many options to customise the validation and the resulting errors / warnings. The full documentation is available at http://docs.jquery.com/Plugins/Validation.

Bannish boring forms forever

Next time you create a form don’t forget they don’t have to be boring

Essential add-ons for firefox

firefox logoThe true power of firefox is in the add-ons available. For the web-developer there are a number of add-ons which are not only essential but also means that most of the time you only need firefox to carry out your work.

The list of these include:

Web Developer

firebug – Great tool for debugging javascript and examining what’s going on in the background.
firequery – An addon for firebug which shows the detail of what’s going on with jquery on a page.
page-speed from google – Another addon to further expand firebug. This time it’s from google and it shows how long each part of a page is taking to load and has helpful hints on how to speed the page load process up.
developer toolbar – This addon contains a wealth of useful tools when developing. Too many to mention here, it basically helps with css, javascript, standards validation. You name it, it’s got it.

Web Design

measureit – A neat little addon which lets you drag the mouse over the page to get element sizes. This is useful when designing pages.
colorzilla – Another essential design tool. Just click on the eye-dropper and anywhere on the page it will tell you the colour.

SEO

seo for firefox – These two are from Aaron Wall of seobook.com fame. It displays seo information for the page that is being displayed. There’s also tools to delve deeper into the seo performance of the page.; rankchecker
– Thisaddonn allowssearchtermss / websites to be entered then theaddonn goes away and find where the site is ranking for that search-term.
google toolbar – Helpful toolbar if you use a lot of Google’s services. Obviously it was mainly used for displaying the all important page-rank but as page-rank isn’t all of how Google ranks a site it isn’t as important as it used to be.

This is my current favourite addons for firefox. I’m going to be on the lookout for more soon mainly to help with general blogging like image finding, screenshot etc. There are plenty being developed all the time so let me know which addons you recommend.

WordPress theme tutorials

One of my New Years resolutions is to create a custom design for this blog. One slight problem is that I’m more of a developer than a designer. Give me an image and I can slice / dice, write the css and develop the theme quite easily. Here’s the killer, blank space frightens me.

To start my steep template designer learning curve I went on the hunt for tutorials. Luckily a lot of the feeds I read have a lot of tutorials to stat me off. Here’s some links to photoshop wordpress theme tutorials.

Sixrevisions

Here’s a few photoshop design tutorials from six revisions. This first one is a clean blog design with a large header and main content area with sidebar for sponsors.

Clean blog design from Six Revisions

This design is made appealing by the use of the coordinated large black header and footer. It delivers a minimalist theme which could be used on a variety of blogs.

Business Layout from Six Revisions

This is my personal favourite of the three and I’m sure it will come in useful for the redesign. It uses the 960 grid system to design a minimalist blog layout.

Ultimate design roundup from hongkiat – A comprehensive list of tutorials for wed design. Even though they’re not specific for wordpress they provide good inspiration to generate templates in photoshop.

Photoshop to wordpress from scratch – A tutorial detailing the full process of creating a blog design in photoshop then implementing it in wordpress.

List of wordpress framework tutorials from Smashing magazine.

New Year, new promises

January is upon us again. Finally got rid of the turkey now is the time to look forward and set some goals to see what great changes we can make happen this Year. Here are some of my online New Years Resolutions.

Wordpress logo1. Blog:

Write at least two posts a week. The topics will be on all sorts of development such as php, jquery, iphone. Also I’ll occasionally drift into SEO and general website need to knows.

Design a new theme for this blog. My smashing magazine book should come in very handy for that task. This is going to be quite a learning curve for me as lets say my artisitic skills are somewhat dormant.

Currently there are no people signed up to the feed therefore the goal by the end of the Year is to get 50 people signed up. I suppose I could get my family to sign up to accomplish that one. Only joking, it could get quite embarrassing to tell them to behave in the comments section.

2. Iphone:

Develop an app and get it published / approved in the app store. 2009 was the Year I got into the macworld. I got a mac, iphone with the idea that I would develop for the iphone. This started slowly so 2010 is the Year to get the app developed and published. Anyone fancy yet another todo app.

Google adsense logo3. Adsense:

Increase revenue by 20%. This isn’t going to pay for an island in the Carribean but it’s a target and will give me something to strive for. The eagle eyed viewers will notice there’s no adsense on this blog but I do use it on one of my other sites. Any tools, tips, tricks I find along the way I’ll blog about to share my new found knowledge and help everyone get some pennies for server costs.

4. Social Networking:

Contribute to the online conversation. I’ve been lurking for far too long. I’ve got about fifty subscriptions in my Google reader and regularly read great posts that I think I could add to the conversation by leaving a comment. The usual thought is great post, I must leave a comment. OK I’ll do it later when I have a bit more time. As you probably guessed that rarely happens.

This brings me onto another personal project where I generate a page on the blog which will show all my flickr, tweets etc etc. I saw this done on someones blog and it was a nice way to bring everything together. I can’t remember the site but will try and find the link to thank for the inspiration.

2010 – The Year of doing

Here’s my commitment noted in history. My progress will be documented on here. Hope you all have a very productive 2010.

phpbb3 forum, the fight against spam

PhpBB is one of the most popular forum programmes on the net. Of-course with the added benefit that it’s free (Open source is cool). As usual the problem with popular, great online systems is they attract the most evil of online folk known as spammers. They do have other names but this is a family site so we’ll leave those until after the watershed.

These spammers come in a number of different flavours. They’re sole purpose is to tell your beautiful forum lots of off-topic info such as where to buy little blue pills and where to see the latest home-video of some celebrity who forgot to put their clothes on and who sounds out of breath.

Anyway we don’t have to suffer in silence.

no spam in phpbb

Make phpbb a spam free zone.

Prevention

There are a number of methods that can be used to cut down the number of spam registrations on phpbb3. The most popular that is used is the captcha

The captcha once upon a time used to be pretty effective in stopping the spammers. Now it seems that it doesn’t matter how difficult the captcha is to read, automated systems can easily signup. Therefore you end up alienating real users who want to sign-up and make it near impossible for visually impaired users.

One improvement on the visual captcha is the audio version. Once again this can cause problems for disabled users.

On phpbb2 there used to be a very good mod which basically asked the users questions. If the user answered correctly then they could signup. The useful feature of this simple mod was that it could be setup with numerous questions and answers. This meant that a different question would be displayed when the forum signup page was loaded. Only problem with this great mod was that on upgrading to phpbb3 it wasn’t there. There is another similar anti-bot mod but this one only has one question with two possible answers. This appears very successful at the moment but the question will have be changed regularly so that the answer doesn’t become mainstream and easily hacked again.

This helps reduce the number of auto bot based registrations where a computer program is fed lots of forum addresses and off it goes to create havoc.

Zero poster

The zero poster is the laziest of the bunch. More often than not they are created via bots. They signup then fill in their website details and other spam information then leave the account to fester and hope that google thinks their profile link is adding some spectacular service to the internet that their profile should be indexed. Mmmm I’m afraid not.

Next in the food chain …. The one poster

Evolution then gives us the one poster these can also be bots or sometimes the lazy human spammer. These creatures turn-up, register (include web address in profile and signature). They then make one post saying anything from a non-value adding comment such as “great site” or “nice weather” or some other inane words to the other end of the spectrum saying about their great site and once again put in a link.

These blighters can be controlled via a number of methods requiring varying forms of effort. Obviously they can be manually warned / deleted by moderators or forum owners. As in the zero poster they can be pruned using the built in prune users function in the phpbb3 admin panel.

phpBB tweaks

One method is to modify the forum so that their website link, signature is only shown after they’ve posted an arbitrary amount. Obviously this amount depends on how busy your forum is. You need to keep a balance between keeping the undesirables out and keeping the regulars happy.

One route that can help deter the flytipping users is to use a nofollow tag. This doesn’t stop them from posting rubbish links to your site but it helps in a couple of ways. Firstly it means none of your google rank juice is given to these sites. Secondly a lot of people who either buy links or acquire links for these people will not go near a site which has nofollow.

In php I’ve put a couple of nofollow’s into the code. The first is in the forum post. I got a cool one-liner from this forum and tweaked it not to alienate the loyal band of users.

In viewtopic.php find the following lines

$message = bbcode_nl2br($message);
 
$message = smiley_text($message);

Then copy and paste the following.

if ($user_cache[$poster_id]['posts'] < 75)
{
$message = preg_replace('/(class="postlink")/','class="postlink" rel="nofollow" target="_blank"',$message);
}

This then got me thinking about the register page. I’ve also nofollowed their sites unless they post more than a certain amount of posts. This was slightly more work to achieve the same effect but only involves a couple of file edits.

In memberlist.php after

$age = (int) ($now['year'] - $bday_year - $diff);
}
}

I added a field to set nofollow or not.

if (!empty($data['user_website']) && $data['user_posts'] < 75)
 
{
 
$u_nofollow = 'rel="nofollow"';
 
}
 
else
 
{
 
$u_nofollow = '';
 
}

Then underneath

'U_WWW'            => (!empty($data['user_website'])) ? $data['user_website'] : '',

the following line was added

'U_NOFOLL'        => (!empty($data['user_website'])) ? $u_nofollow : '',

Then edit memberlist_body.html in the template section of the style your using. Find

<td class="info">

Add

{memberrow.U_NOFOLL}

after

{memberrow.U_WWW}"

and before

title="{L_VISIT_WEBSITE}

Robots.txt

Another way to stop search engines from indexing profile pages is to use the robots.txt file. This site gave some phpbb specific robots.txt edits. This is quicker than than the file edits above. It just depends on whther you want to exclude all or tweak it so that only those lower down the food chain get excluded.

The fight goes on

Looking after a forum can be hard work sometimes. By adding modifications makes it slightly easier. This post gives a brief look at some tweaks it doesn’t go into the why, that will come in later posts.

jquery igoogle style dashboard with flickr feeds and extras

I’ve been a big fan of igoogle for a couple of Years. It’s great to have instant access to so much information without the need to visit numerous pages. I wanted to replicate a much scaled-down version for one of my sites.

I found a great tutorial to create my own igoogle style dashboard. It has quite a lot of features such as drag and drop, edit, delete, expand / collapse. Here’s a preview of the dashboard

igoogle style dashboard from nettuts

igoogle style dashboard from nettuts

After going through the tutorial the dashboard was tailored for the site. The main purpose of the dashboard was to display images from various sources. For one of the widgets I used google ajax search functionality. This was straightforward to plugin with just some slight tweaks to the stylesheet for some of the colours.

In another widget I put in a search facility to drag images from flickr using the json feed. This was accomplished using a jquery flickr plugin. The code was tweaked for search instead of reading from someone’s stream and added the pagination so that more results could be scrolled through.

On top of this I then added litebox so that when one of the flickr photos were clicked a lightbox opened showing a larger version of the photo was shown and the options to scroll through the rest of the result set using the left and right hand side of the image.

Litebox showing image clicked

Litebox showing image clicked

This part was slightly tricky to get the litebox to activate on the flickr feed. In the end it was simply knowing that the jquery call to the dashboard was made first then to the jquery flickr plugin. This I found out after some reading of a jquery book I bought (Learning JQuery 1.3) and a lot of trial and error.
Within the jquery plugin call a call was put in to activate the litebox plugin. The current version of the jquery dashboard can be found on the abracadabra tattoo website were it’s purpose is to give tattoo design inspiration so prospective customers can find plenty of tattoo ideas from the comfort of their screen.

As you can see the possibilities are endless with jquery and there are very good plugins available. All it needs is some tweaking to bring the elements together. As for the dashboard example it’s far from finished. It needs some more feeds and possibly expanding using cookies or a database so that user preferences can be stored for future use.