atomiku

From web developer to designer…

atomiku — Tue, 21 Feb 2012 22:07:47 +0000

A great developer, but not so much a designer. It seems that over the years working as a web developer all my my focus went into just that… developing. I read online though that there are many people who work exclusively as developers and never design a PSD in their life.

One of the pitfalls many developers face is their inability to make a great design for the product they code, either for lack of time, ability or interest. While design certainly isn’t everything, it is one of the bigger factors that can help make or break your business. To be a successful, self-reliant and cost-effective developer, having a basic understanding of design will be a crucial asset.

Over the years I have relied on templates or being supplied PSD’s by excellent designers I have worked with. Going from developer to designer is going to take a while. A few things I am going to be trying this year:

Tutorials

Photoshop tutorials are a great way to learn new techniques and ideas. The site I have always gone to for ‘good tutorials’ is: http://goodtutorials.com/

Inspiration

A lot of wonderful web design inspiration can be found at – http://patterntap.com/

A rather funny comparison between web designers and web developers below, you may want to click to view bigger:

Infographic by: Shane Snow.

So, anybody have any advice or success stories from going from developer to designer? I’d love to hear… thanks for reading.

Simple jQuery plugin for Vertically Centering

atomiku — Fri, 17 Feb 2012 14:10:24 +0000

Came across this while needing to vertically center a div within another div:

1
2
3
4
5
6
7
8
9
10
11

Then you can use $(‘.classname’).vAlign(); or $(‘#image’).vAlign(); – Make sure to use this once the document has loaded, within $(document).ready(function(){})!

Great WordPress Plugins

atomiku — Wed, 15 Feb 2012 16:25:06 +0000

WordPress is certainly one of the most feature rich and user friendly publishing platforms available today. At the same time it is loved for its openness, extendability and great open source community. WordPress is today used in serious projects and on large commercial websites besides the millions of hard working bloggers sharing their valuable knowledge. This trend have created a huge market for professional high quality premium themes and recently we have also seen a market emerge for premium plugins as nearly any kind. Someone wrote a great article about it here: “35 Best WordPress Plugins” – http://www.tripwiremagazine.com/2011/12/best-wordpress-plugins.html

I will be posting more useful WordPress plugins soon. I have found quite a few I use, plus a few I’ve been developing myself.

Styling your WordPress Comments

atomiku — Mon, 13 Feb 2012 00:47:34 +0000

I recently stumbled across a website that shows you how to customise your theme’s comments skin, and also provides you with some nice code/themes that you can drop into the template file, such as:

Green Gravatar:

The Speech Bubble:

The blog post can be found at: http://www.darrenhoyt.com/2007/08/18/styling-your-wordpress-comments/. I realize though that it was written in 2007, and the wordpress code may have updated since then. I am going to make some comment themes of my own to use, and may update these ones too.

Fasthosts shared SSL and osCommerce: Not happening!

atomiku — Thu, 09 Feb 2012 11:39:11 +0000

First things first: osCommerce will not work when using a shared SSL certificate on Fasthosts (and probably other hosts that use shared SSL, too). I had searched everywhere for a solution but nobody seems to be able to get it to work. I came close, but the closer I came the more problems occurred.

Let me go into detail… I’ll first explain what Shared SSL is: This is an SSL certificate that you share with someone else. It means that the host will usually have the certificate signed for a generic domain such as secure-server.co.uk or secure15.fasthosts.net. When you use shared SSL, your secure website is located at: https://secure-server.co.uk/your-domain-name.co.uk/ rather than https://your-domain-name.co.uk/ – The browser will issue security warnings when trying to access https://your-domain-name.co.uk/ because the shared SSL certificate isn’t signed to your domain. A dedicated SSL certificate would be specifically signed to your domain.

So let me explain the issue with trying to secure your osCommerce installation with SSL when using a shared certificate… When the user logs in, the session cookie is saved to your domain name. This cookie can only be read by osCommerce while on your domain, right? It’s for security, PHP can’t go around reading other domain’s cookies. So once the user reaches the checkout process and osCommerce wants to redirect to the secure URL, rather than redirecting to https://your-domain/ it will redirect to the shared SSL domain at https://your-host.com/your-domain.com/ – This will cause major problems for osCommerce as it will no longer be able to read the cookies. Technically you could run your whole shop from the shared SSL domain, but in my opinion this would look unprofessional.

The second problem is that when you get a shared SSL certificate, usually you are given a completely separate directory for your SSL site to be uploaded into, so you would have to upload a separate installation of osCommerce into the SSL folder and reconfigure the paths etc. Many problems occur when trying to do this. My advice is to buy a dedicated SSL certificate if you wish to secure your osCommerce shop. If anyone HAS managed to get this working, please leave a comment as I would be surprised because it would require a fair amount of code changes for osCommerce.

atoChat v1.0

atomiku — Sun, 05 Feb 2012 22:41:02 +0000

Just a recap here, of some things that have changed in atoChat v1.0:

Installer updated with new skin
Now almost XHTML compliant
Javascript moved to its own .js file, instead of being in the index.php
All the ajax calls are much more stable now, it initializes it’s own xmlHttp object for each call instead of using a global one.
Help screen updated, looks much better now
showsmileys() will now only display image files. Good for when windows makes that annoying Thumbs.db file, then atoChat ends up thinking it’s a smiley.
Cleaned up all the files and includes
Now using atolib library
Update checker updated
Color picker added instead of dropdown menu
Central PHP script for the chat is no longer central

Please subscribe to the newsletter so I can let you guys know when it is released. Thanks!

Adding/Editing Tables for posts in WordPress

atomiku — Fri, 03 Feb 2012 12:47:23 +0000

http://wordpress.org/extend/plugins/mce-table-buttons/

Remove scrollbars and get your facebook app/canvas iframe to autosize to height – FB.Canvas.setAutoGrow()

atomiku — Thu, 02 Feb 2012 11:59:34 +0000

Note: This works with the new facebook 810px width canvas page! Also, my example is currently down, but the code below still works.

If you have created a Facebook application that has an canvas iframe tab and you want the iframe to automatically grow to the size of the content, you can use FB.Canvas.setAutoGrow() within the frame. If you haven’t already created a facebook tab, follow this tutorial first: as it is the best way to do this in my opinion: http://www.dreamgrow.com/how-to-set-up-a-custom-facebook-landing-page/. First of all you need to edit your application, so go to https://developers.facebook.com/apps/ and click ‘Edit App’. Then in Settings -> Advanced, scroll down to Canvas Settings and make sure Canvas Height is set to ‘fluid’:

You’re not done yet, you need to insert the FB.Canvas.setAutoGrow() function into your iframe’s body. The facebook developer site states that you should use this code:

1
2
3
4
5
6
7

window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
... // Other configuration variables here
});
FB.Canvas.setAutoGrow(); //<--- This
}

However, I noticed that setAutoGrow will not properly work on some browsers (mainly firefox) if you put it within window.fbAsyncInit function like how the facebook developer site states. Instead, run FB.Canvas.setAutoGrow() on window.onload instead – this will ensure that the timer starts after the browser has finished rendering the document and the DOM is ready:

1
2
3
4
5
6
7
8
9
10

window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
... // Other configuration variables here
});
}

window.onload = function() {
FB.Canvas.setAutoGrow(100); //Run the timer every 100 milliseconds, you can increase this if you want to save CPU cycles
}

Your facebook iframe should be auto growing to the height of the content now. If it isn’t, leave a comment and I will help you. Even though the iframe height is sizing automatically, you may still have a vertical scrollbar visible. To remove this, set overflow:hidden on the body:

1	body {overflow:hidden;}

Iframe Code Example

Below is an example of how your page should look, an example of the application can be seen here: http://www.facebook.com/pages/atomikucom/250331981713993?sk=app_236448559776994.

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

<html lang="en">
<head>
<meta charset=utf-8>
<title>Title Here</title>
<style>
body {overflow:hidden;} /*This is handy for removing horizontal/vertical scrollbars as we won't need them if we autosize; */
</style>
</head>
<body>
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', //Your facebook APP here
cookie : true // enable cookies to allow the server to access the session
});
}

window.onload = function() {
FB.Canvas.setAutoGrow(91);
}
</script>

<p>Your content here...</p>
</body>
</html>

Everything should be working now. If you have any problems, or found this post helpful, leave a comment and I will try to help.

Edit Feb 13th: I have updated the above complete iframe sample to demonstrate how it works. Tested in firefox, opera and chrome on mac. If it doesn’t work for your facebook canvas then you are doing something wrong. There are tutorials available on how to create a facebook app tab canvas. I recommend this post, as it is the best way to do this in my opinion: http://www.dreamgrow.com/how-to-set-up-a-custom-facebook-landing-page/

Site Updates and atoChat v1.0 beta

atomiku — Fri, 27 Jan 2012 04:37:57 +0000

New pages up: Atomic Inc, Bass Piratez, DJ Zappa and teroMUD. atoChat v1.0 is basically ready so a beta link will be added to the atoChat page late March, if you would like to try the beta before that time then please send me your email address through the contact form, thanks. atoChat v1.0 screenshots to follow…

Here is a screenshot of atoChat v0.5 in action:

osCommerce v2.3.1 and SagePay Direct: Error 4020: Invalid IP Address

atomiku — Thu, 19 Jan 2012 12:25:00 +0000

Two possible error messages for 4020: “Information received from an Invalid IP address” and just “Invalid IP address”.

While I was configuring SagePay Direct for an osCommerce store I made, the checkout process wasn’t completing because SagePay was returning error 4020. This means that the IP address I added to the “Valid IPs” tab on the SagePay control panel isn’t matching up with the IP address the request is coming from. If you’re getting this error too then it is most likely because you’ve entered the wrong IP, or no IP at all. You can log in to SagePay live at https://live.sagepay.com/mysagepay/. If you switch SagePay to Simulator mode, the error message will also include the IP address it received the request from, so then you can go and add the correct IP address. You can sign up for a simulator account at https://support.sagepay.com/apply/RequestSimAccount.asp – If you definitely have the correct IP address added, and you are still getting the same error, then something else must be up…

Attempt #1: I figured out that perhaps SagePay had updated their API and my SagePay Direct payment module for osCommerce was out of date? The osCommerce community addons website shows that the latest version of SagePay Direct payment module is v1.1, whereas I was using v1.0. It seems that the osCommerce v2.3.1 package I downloaded shipped with SagePay Direct v1.0. After installing v1.1 I am still getting the same error. Something else must be up?

Attempt #2 (solution!): SagePay seems to be returning “Error 4020: Invalid IP Address” because the transaction wasn’t being secured with SSL. It’s actually a legal requirement in UK, due to data security standards laws, to secure all sensitive information (address, credit card numberr, etc) by having the checkout process encrypted with 128bit SSL. The error seems to have gone away.