I am a freelancer and looking for work

I just came across a really neat trick for viewing whatever google has cached about your site. All you have to do is enter the following URL into your browser.

http://webcache.googleusercontent.com/search?q=cache:http://www.yoursite.com/

This is especially useful because at the time of writing, Google’s cache functionality seems a little unsteady in the organic search results.

When you have limited space on a page but require more text than the space allows, a nice trick to to have a scrolling effect for that div only. I personally don’t like having a scroll bar down the right hand side. When you’ve put in the effort to create a wonderful design, having a grey scrolling bar on the right hand side of an element can take the eye away from when you want it.

A neat way around this is to have a custom scrolling effect using jQuery’s .animate. The demo page for the following demo is at http://www.codemonkeysteve.com/tutorials/demo_scrolling.php

HTML/CSS

To start,you need to have a div to contain the content to scroll. Let’s give it a class of  ’contentHolder’.  The important part is to set the overflow:hidden CSS property.  Give it the following style.

<style>
.contentHolder {
overflow:hidden;
height:320px;
display:block;
width:490px;
}
</style>

Within that div, place your content. Now you need up and down buttons. Images will be fine but for the demo, I’ve anchored simple text. Give the up button a class of ‘page_up’ and the down button a class of ‘page_down’.

<a href=’#’ class=’page_down’>down</a>
<a href=’#’ class=’page_up’>up</a>

Javascript

Within your javascript, you need to calculate the height of the element we’re to be scrolling. At the same time, we decide whether the up and down buttons are to be available. The following function will assign the number of possible pages to a variable ‘contentPages’. This variable should be initialised. At the same time, initialise ‘contentPage’ which shall hold the current page we are scrolled to.

function setPageArrows() {
contentPages = Math.ceil($(‘.pageContent’).height() / 150) -1;
$(“.page_up, .page_down”).addClass(“disabled”);

if (contentPage > 1) {
$(“.page_up”).removeClass(“disabled”);
}
if (contentPage < contentPages) {
$(“.page_down”).removeClass(“disabled”);
}
}

//initialise the starting page and the number of pages
var contentPage = 1;
var contentPages = 1;

Now we need to attach the animate functions to the up and down buttons. In your jQuery ready function, create a click event for each button. At the same time, call the ‘setPageArrows()’ function to set the initial state of the buttons. This is done with the code below.

$(document)
.ready(function() {
/* Page scroll */
$(“.page_up”).click(function() {
if (contentPage > 1) {
contentPage–;
$(“.pageContent”).animate({
“margin-top” : “+=150px”
}, “slow”,function() {
setPageArrows();
});

}

});

$(“.page_down”).click(function() {
if (contentPage < contentPages) {
contentPage++;
$(“.pageContent”).animate({
“margin-top” : “-=150px”
}, “slow”,function() {
setPageArrows();
});
}
});
setPageArrows();
});

Again, the demonstration code can be found at http://www.codemonkeysteve.com/tutorials/demo_scrolling.php

This is another simple tutorial on how to add a ‘Chat to xxxxx’ button to a website. You can see an example of this at the bottom right of the screen. As a prerequisite you will need a Google account.

1. Log into your google account and go to http://www.google.com/talk/start.html

2. Visit this site to obtain the code needed http://www.google.com/talk/service/badge/New

3. Copy and paste the code. I placed mine just above the navigation bar but it isn’t important.

4. Surround your pasted code with

<div id=”chat”>…</div>

5. Put the following code into your css file

#chat {
position:fixed;
bottom:0px;
right:0px;
}

That should be it! Enjoy your new google chat button!

When a potential customer has taken the step to put something into a basket and proceeded to the checkout, the psychological shift changes. Before checkout we are looking to build persuasive momentum. Each click of a button, each glance up and down a screen will either build or lose persuasive momentum. That is, the customer will be either more willing or less willing to proceed to checkout with something in their basket.

Once the customer has reached checkout however we’re no longer trying to persuade them to buy a product, we’re focusing on making their checkout experience as painless and intuitive as possible. In effect we’re looking to take every step NOT TO DISSUADE a customer from buying something.

One important method of keeping someone interested throughout the checkout process is to have a stepped progress bar at the top. This allows the customer instant visualisation of the steps they will need to go through.

An example of a progress bar

When a customer has their credit card in their hand, they want all the reassurances they can get that this transaction will go through without any problems. Without a progress bar, the customer is always thinking ‘Is this the last step? Does my money come out of my card now? What happens next?’. All these questions are distractions to the sales process and can only serve to dissuade a sale.

There is also a human psychological element to actually gently push someone through the checkout process. We have an inherent need to fill progress bars. There’s something jarring about seeing a progress bar at 40%. We want it to be 100%. There is some science behind this but the bottom line of it is that an incomplete thing causes subliminal tension. So adding a nice progress bar can actually motivate a user through the checkout process!

A landing page is a website page specifically designed to be the entry point to your site from a specific source.

For example you have a site showing off your homeopathic beauty treatments. For the next month you want people to know about a 20% offer on some nice candle treatment that you’re keen to promote. You send out a mail shot to all your contacts with the exciting news but where do you send them?

If you send them directly to your home page then people may well go there, have a little look around and eventually find this discount (remember that’s what they came for in the first place!). But wouldn’t it be better to have these users see a page that has a nice graphic and all the details they want about the discount along with a little contact form?

This is a landing page. Remember that your website is all about converting people into paying customers. The more effort that a customer has to put into making a purchase, the less likely they are to do so. Make things easy for your target audience by creating or at least customising a landing page for your target audience!

If you use a landing page in this way, you can also set it as the starting step for a conversion goal so you can track the success of the initial facebook campaign. This is useful if you have many sources of traffic hitting your site and you want to be able to see which campaign is more successful.

You’ve done all the right things. You’ve set up your website, added google analytics to track visitors, ran your marketing campaign and sales are trickling in.

Now you’re sure you can improve the performance of your site but don’t quite understand what’s going on with your traffic because google analytics isn’t for the novice? This is something I can help you with for free with no obligation.

This is how we can do it

1. We have a quick chat to start things off.

2. You let me take a peek at your analytics data. This can be done easily by adding me as a ‘standard user’ within your settings section of google analytics. You can remove me any time should you not require my services.

3. I’ll send you a report consisting of traffic sources, marketing campaigns and easy wins that may improve sales.

4. You can then part ways should you wish armed with some knowledge on improving your site!

As you can imagine I would love to demonstrate my worth to your business and hopefully build a good working relationship from this. If you’re interested in my service, you can contact me here or by using the contact button at the top.

I reinstalled my laptop at home recently. New year, new frame of mind, clean slate to work with; that kind of thing. It was time to reinstall apache, PHP, MySQL and get down down to some serious coding but this time I thought I’d install WAMP as a one stop solution.

I’d created something similar before with Abyss Web Server as part of an integrated package that could be downloaded and installed with one click and WAMP does the same. You simply download it, run the installer and let it get on with business.

Before the laptop format and reinstalled, I’d exported all my databases to raw SQL dumps. To recover the MySQL databases I merely reimported them. A quick visit to the command line and a mysql -u username -p -h localhost < data.sql later, I was up and running. However if you’re a little command prompt shy, then using SQLYog Community Edition works as well.

WAMP started up first time, however when I first rebooted my laptop, WAMP stopped and showed and orange icon in the taskbar. A quick investigate showed me that another application was hogging port 80. Fixed that and everything has been smooth since.

You can enable and disable modules (e.g. GD and cURL) in PHP from just the click of a button, no more messing about with PHP.ini. The same with Apache although I found that popping into httpd.conf still worked best for me. WAMP can add aliases using its own drop down menu, but I found that entries created weren’t configured exactly how I’d like so I still suggest going manual. Of course, if you’re a less technically minded person, then the ease of use would counteract that particular annoyance.

I’m still using it now and I barely notice any performance hits compared to installing everything individually. All the applications sit nicely in their own folder and it’s been plain sailing! Definitely an easier way to manage your local development installation.

To access the English WAMP site (it’s French by default), you can go here http://www.wampserver.com/en/

For a nice installation guide, visit here http://www.webdesign.org/web-programming/php/how-to-install-wamp-server.20344.html

 A new year and a new relaunch of codemonkeysteve.com. I’ve now gone full time as a freelancer and feel that to showcase my talents, it would be best to design a new website and portfolio!

Once the initial template was written and I saw it was good, I also created a skin for wordpress that seamlessly fitted with my new site.

All in, about 20 hours work but like any work of art, it’s never complete so I’ve got a good amount of tinkering to do as time goes by but I must remember never to overegg the pudding.

When creating a new wordpress site, i’ll use my laptop as the development copy while I get together the theme, plugins and structure I’ll be wanting to use.

Whenever I’m using permalinks, things will be absolutely fine locally but as soon as I copy the website to a live environment, all the permalinks will no longer work and return a 404 error.

It’s a simple fix but what I do is go into the wordpress admin section -> Settings -> Permalinks and switch the permalink setting to default and then back again. This will reset the permalinks and should hopefully get things working again.

A while back I had what can only be called a ‘surfing block’. I wanted to find some new interesting design ideas and thought to browse some random sites looking for inspiration.

Google at the ready and hands on the keyboard… nothing. My mind emptied and I froze and for the life of my I couldn’t think what to type! So I decided that was the time to look for a site that would return random web pages. The only couple I found were returning a lot of 404 errors and one or two refreshes even brought up some pornographic content.

So I made random.codemonkeysteve.com for the next time I decide I end up staring at a search bar blankly. Enjoy!