As my last post explained, I’ve had my house rewired and since redecorated. I had to pack my computer up in a box for 3 weeks (shock horror) whilst this was done, meaning I had little access to work on my blog articles. Since the redecorating has been finished I have had a lot of joint pain, and have now been diagnosed with Inflammatory Arthritis. This means that the amount of typing I can do in a day is governed by the pain in my hands :(

However I do have some bits of good news! Firstly, YUI Javascript Carousel Part 3 is in the works and should be published in a few days. Secondly, Part 3 was going to be the last article in the series but I now also have material for a fourth, and potentially a fifth article. Finally, I will shortly be receiving a copy of the forthcoming Symfony book “Symfony 1.3 Web Application Development” which I will reviewing along with some potential goodies!

In summary, there is plenty of good stuff in the works, but it’s unfortunately taking me longer to get it done. So please bare with me and keep watching this space!

Related posts:

1. 2009 Review and Aims Part II On the first of June I published a summary of...
2. 2009 Review and Aims At the beginning of 2009 I had been in my...
3. A Quick Update This past week or so I've been a busy bee...

Web Hosting is a minefield…

Seeing the web hosting feature in the latest edition of .net Magazine has confirmed my feelings about the web hosting industry: it’s a minefield. A completely over saturated market of small-fry & big brands, most of which you will never have heard of unless you’ve heard a horror story or two. In my experience it doesn’t seem to matter where you turn, something unexpected goes wrong.

For years I was a happy client of Lonex. Their support was good enough although there was no status page, the servers were reliable, and generally things went ok. Then they got DDoSed and never recovered – my sites suffered downtime a few times a week, everything was slow, and I couldn’t get support to acknowledge or fix the problem.

So I moved to Surpass: a seemingly huge company with a public community, status pages, good support, and reliable service. Then I started work on this blog and found the pages loaded really slowly. I queried this and after ages of back and forth with support I got a message which simply read: “Thanks for your patience. We have completed some work on this server and performance is back to normal. Thanks for hanging in there.” – Nothing had changed as far as I was concerned.

Next I opened a single account on PeartreeUK and started prepping my blog for launch. For some reason I couldn’t get Wordpress to work properly. In my frustration I gave up without giving them a chance and tried yet another company.

This time it was Clook. A more expensive company but they had good reviews from friends so I figured I’d get what I paid for. My blog had the same Wordpress problems  & I realised it was entirely my fault. So I got it all fixed and launched my blog on Clook.

4 months later and I have two niggles with Clook:

1. Because Apache is running as “noone” PHP scripts create files that I can’t delete through FTP. There is no way to remove the files through the control panel so I have had to install a PHP File manager which I really don’t like. It just makes my life far more complicated than it needs to be, especially when trying to work with a publishing platform like Wordpress.
2. For some reason there is no way to setup recurring payments. I have to remember to pay my bill each month. Yet again just something dumb that makes my life harder than it needs to be.

PeartreeUK – my Web Hosting Solution

So last weekend I  decided to finally sort out my hosting life. With all my resold accounts still hanging around on slowly-slowly-Surpass, and my blog on clunky-Clook, I’ve turned back to the one place I know I’ll get what I pay for – PearTreeUK. They may be relatively small, but there’s nothing like being able to get hold of an intelligent human being whenever you need one! Having kept my original account open as a test bed, I have now upgraded to a reseller with them.

I doubt you will find better customer service than PeartreeUK’s -  having one person consistently deal with you from day one means that you are always taken care of without the frustration of trying to explain yourself AGAIN everytime there’s a shift-change. If you’ve visited here before you may notice how much faster pages (and FTP) now loads – my Wordpress backend feels like it’s on speed. Add to that their prices & the excellent attitude of their employees and you have a value-for-money service that I highly recommend.

Note: Expect an update post in 6 months documenting my experiences with Peartree!

Related posts:

1. Wordpress 2.8 Over the weekend I updated my blog to Wordpress 2.8....
2. 2009 Review and Aims Part II On the first of June I published a summary of...
3. A Quick Update This past week or so I've been a busy bee...

I recommend that you read Part 1 of this tutorial if you haven’t already. If you want to follow along, then please setup your workspace with a basic HTML file and somewhere to put Javascript, CSS & images now, the demonstration page is here. I’ll be using the same images as last time, same rules apply!

Getting Started – The HTML

The HTML for the carousel is the same as in Part 1, except this time I have added titles to my images. Below I’ve only listed one carousel, but as you can see on the demonstration page, the setup JavaScript we’ll be writing later will detect multiple carousels on the page. To add another carousel just copy the HTML structure including the container div, change the id’s but leave the classes intact.

Referencing YUI

You’ll need to add the same JavaScript references right above your closing body tag as last time. That is the link to the combined YUI scripts, plus your own setup JavaScript file. This time though, DON’T include the YUI CSS, just add a link to your own CSS file at the top of the page. So these are the includes you should have:

Setting up – Javascript

Step 1 – Locate all carousel markup on the page

The first step is the same as last time, to setup our namespace and object literal. We still need an init function, and inside it we use the getElementsByClassName function to populate our carousels property with an array of all the elements which have the class carousel-container. We then loop over carousels and call a setup function on each element.

Step 2 – Turn carousel markup into working carousels

Now we need to write our setup function. It takes the element that is to be a carousel as an argument. The body of the function contains the same setup code as our original init function from Part 1, where the settings are explained.

Finally, don’t forget to call the function using onDOMReady().

Styling up - The Custom CSS

This time we aren't going to use the YUI CSS at all, so we will need to do quite a bit of work ourselves. First up I'll show you the bare minimum needed to get the carousel working. Then we will go through styling the navigation, and finally the customisations to get it looking the same as the demo page.

The Bare Minimum

To get the carousel working horizontally, we need to get all the items to display side-by-side. We then need to hide all but the item that should be visible using overflow:hidden. We also need to clear margins and padding, but we don't need to set any width or height - the carousel will just resize to fit the largest element inside of it.

I can hear people all over the interweb screaming "nooooo!" at the IE hacks. Feel free to move these to conditional comments, but for the purpose of tutorials using hacks makes it easier to show what I'm doing! All that extra code (plus the position:relative's) is used to get IE6 & 7 to display the items side-by-side whilst still hiding all but the first item.

On the right you can see how the carousel looks with just this basic styling - pretty nasty! Time to get creative. I want to get rid of the text in the navigation, put the navigation at the bottom, and add some nicer buttons*.

The Navigation

Because I want to put the navigation at the bottom & have my carousel be fixed size, I need to set width and height on carousel-container and on the content li. I'm also going to add a border to contain the carousel. The following is the extra CSS I added.

The following code uses position:absolute to move the navigation to the bottom. I've also added a semi-transparent background to the navigation bar, and used the inline-block hack again to get the UL to sit in the middle for all browsers. In the second part I have turned the navigation into circles using the CSS3 border-radius property (IE users will see squares) & gotten rid of the text with positioning.

Next let's replace those ugly buttons with something else. By setting the width, height and padding of the button we can hide it. Then I've added a background image to the spans and absolutely positioned them. I have also been adding hover states to all the navigation, but at the moment these will only work in browsers that support the :hover psuedo class on elements other than the anchor tag.

We can fix the hover states for the previous and next buttons with some Javascript, but I haven't found a way to get this to work for the list navigation yet as it gets rewritten everytime the carousel changes and therefore it loses the listeners. To add listeners to the buttons, first add the following code to the end of your init function.

Next, after the setup function add a comma, and then add the following two functions. All this does is add a class on mouseover and then remove it on mouseout, we use two different classes to make it easier to reference the buttons in IE6. This could be replaced with a sprite image & CSS that just changes the background position.

Headings

That's it for the functionaliy. Here's the CSS I used to style my main heading. It's almost identical to the nav-bar code.

On the demo page, the two carousels are the same size and styled very similarly. However this is not necessary as you do not need to specifiy the size (the carousel will default to the size of the largest item within it) and you can also use id's to style the two carousels entirely differently in the CSS, yet still use the same Javascript to make them work. However the functionality for the two carousels would remain the same.

Well I think that's a wrap! Not every single bit of CSS I used is here, but I will be providing all my files which I publish Part 3 next week some time. Hope you've found this useful & reasonably easy to follow. Please drop any suggestions or ideas in the comments!

* I said nicer, not amazing... I'm no designer!!

Resources

• Visit the API for a full list of available methods, properties and attributes.
• YUI Dependency Configurator
• The demo page (2)

Related posts:

1. YUI: Javascript Carousel with Custom Navigation – Part 1 Welcome to my first JavaScript related post! I'm currently in...
2. Symfony: What is it good for? Symfony is one of my favourite bits of technology. I’ve...
3. It’s been a Very Quiet Month… It's now been over a month since my last post...

The YUI Carousel widget is currently in Beta, and the navigation that it generates is very basic and, unlike the rest of the YUI framework, doesn’t have the necessary CSS hooks to style it properly. This may change with the release of YUI 3.0, but the Carousel widget isn’t included yet. So for the time being this three-part series will show you how to setup a Carousel & build custom navigation.

Part 1 will go through the HTML, CSS & Javascript needed to setup a basic carousel using the YUI default skin. In Part 2 we’ll remove the YUI skin and write our own, introduce multiple instances via class names and do some customisation to the carousel. Finally, in Part 3 I’ll go through all of the Javascript needed to write your own, completely custom navigation for the carousel.

Getting Started – The HTML

If you want to follow along, then setup your workspace with a basic HTML file and somewhere to put Javascript, CSS & images now. I’ll be using some photos from my recent holiday, feel free to use these images for testing purposes, but please don’t publish them as your own work! If you want to see the finished carousel in action, then please check out the demonstration page.

First we need to create the HTML list & containers for our carousel along with some CSS classes for both reference and styling. This should include a container <div> (with class carousel-container) and an ordered list to contain our carousel items (class carousel-content). I have also added the classes yui-skin-sam and carousel to the body tag. Apart from those prefixed with “yui” all the classes I’m using are my own conventions and are not required by YUI.

The yui-skin-sam class is a reference point for the YUI CSS so that the styling can be applied. For now I have added just three items to the list, and each one contains only an image. You can also include headers, paragraphs and any other HTML content to your carousel.

Referencing YUI

To turn our numbered list of images into a carousel we need to include reference to the YUI CSS and Javascript. Unlike many other frameworks, rather than downloading a local copy of the framework, it is normal to reference YUI direct from the Yahoo! Servers using the YUI Dependency Configurator to work out which files you need. For now I will show you which files to add:

We are going to need the carousel.css file to style the list properly. Add the following stylesheet link to the head of your HTML file.

In order for the Carousel to work properly, we will need the YUI Dom collection & Event utilities, the Element utility (which provides an object to represent HTML elements), the animation utility and finally, the carousel component. They are minimised and combined by YUI and served to you as a single file. YUI is an unobtrusive framework, so add the following lines of HTML to the very bottom of your page just above the </body> tag.

Setting up – Javascript

Now with all of the framework components in place, we can go about the work of setting up our carousel. For now we will do this by getting the id of the carousel’s wrapping <div>, but in Part II we will create the carousel based on class name so that we might have multiple instances.

Create a file called carousel.js in a Javascript folder, and link to it after the YUI scripts so it appears something like this:

Be aware that we create an instance of the carousel by passing in the id of the containing <div>, not the ordered list. We also need to pass in a set of properties which are explained below. I have made our carousel variable into a property of our object so that we can easily have reference from additional methods of our object when we add more functionality later.

Once we have setup our carousel instance, we call render, show, and startAutoPlay to setup, display & start the carousel. Of course none of this happens until the init method is called. As YUI is non-intrusive the methods to setup the carousel are called after the page has finished loading using onDomReady. I have added a test to the onDomReady function to ensure that the carousel id exists before we try using it to create an instance of the carousel widget.

Copy the code above into your Javascript file. You should now have a working carousel.

The Properties

autoPlayInterval: 5000

How many milliseconds between transitions (i.e. 5 seconds)

isCircular: true

Previous & next button are always active as when the carousel gets to the last item it carries on back to the first.

animation: { speed: 1.0 }

How long it takes for a transition from one item to the next to complete. 1.0 is one second.

numVisible: 1

How many items are visible at any one time.

Note: The configuration attribute used to make the YUI Carousel autoplay changed somewhere between YUI 2.6 & 2.7 from autoPlay, to autoPlayInterval. It works the same way, but there is no backwards compatibility.

Tidying up – A little Custom CSS

Depending on your browser and any other CSS you have present on the page your carousel may have some spacing which makes it look untidy. The following CSS is designed to ensure the carousel fits snug around the images and looks smart.

The finished article is basically an image slideshow. In the next part we will drop the YUI CSS and customise the carousel and navigation. If you have had any problems following this tutorial or ended up with a different result, please drop me a comment and I’ll try to help out.

Resources

• Visit the API for a full list of available methods, properties and attributes.
• YUI Dependency Configurator
• The demo page (1)

Related posts:

1. YUI: Javascript Carousel with Custom Navigation – Part 2 Welcome to Part 2 of my YUI Carousel series. If...
2. Symfony: What is it good for? Symfony is one of my favourite bits of technology. I’ve...
3. It’s been a Very Quiet Month… It's now been over a month since my last post...

All-too-often developers are sent change requests which are nothing more than to fix a typo, update an address or fix an incorrect translation. The time taken to locate, modify, and re-deploy these changes are often disproportionate with the amount of work a client would consider was involved. What Thomas’ plugin does, is add to Symfony’s I18n (Internationalisation) capabilities so that all static text, in multiple languages, can be managed via a CMS-like control panel.

With this plugin, the power to manage all text in a web app can be handed over to clients with the rest of the administration panel. This has the benefit of further seperating content & function, and the roles of copywriter, content manager, and web developer. Now if only there was a similar tool for Wordpress, my typo-fixing days would be over!

Related posts:

1. Spotlight: Wordpress Pods Plugin Have you ever needed to build a website which fit...
2. Symfony: What is it good for? Symfony is one of my favourite bits of technology. I’ve...
3. Snippet: Symfony User – Access the User Object The following snippets provide access to the Symfony User object...

1. Get Fit

   • jog steadily for 30 minutes

   I haven’t been for a jog in several weeks. Rugby takes up a couple of hours twice a week, and I haven’t yet found the motivation to go for a jog on top of this. I am getting fitter and healthier, I just need to go for a jog and see how I’m doing with my goal.

2. Conquer Javascript

   • Write my own application from scratch
   • Become familiar with at least one Javascript library

   So far I’ve had very little free time to dedicate to this cause, however work has provided me with some opportunity to get familiar with YUI. I feel like I’ve had quite a breakthrough, and goal no. 2 is certainly going well. Therefore I’ve decided to add a third JavaScript-related goal – To learn & write an application in Objective J.

3. Make this blog successful

   • Publish at least one post per week
   • Publish a full Symfony tutorial
   • Complete at least one of my personal projects
   • Increase visitor average to 50 a day
   • Increase comment average to 10 per post

   My first month of attempting these goals really hasn’t gone so well, mainly because the fitness thing is taking up so much of my free time. On the other hand, I have been slowly increasing my comment and visitor averages so I think I’m all set to reach my targets. I have re-written my blog css to make it easier to write posts without having to think about styling.

All-in-all I’m off to a slow but steady start – I’ve still got plenty of time to achieve these goals. Rebalancing my life in a more healthy fashion (read: getting off my arse and doing some sport) is going to take some getting used to, but should lead to my having more energy and motivation. I think the most important thing to work on is setting aside blog time & publishing something each week because without doing that nothing else will ever get done.

Related posts:

1. 2009 Review and Aims At the beginning of 2009 I had been in my...
2. It’s been a Very Quiet Month… It's now been over a month since my last post...
3. A Quick Update This past week or so I've been a busy bee...

So why did you do it?

I tend to work in lots of separate css files (reset, layout, typography, colour etc) and once the major development work is done I put it all into one file and run an optimisation script. This is for two reasons: the first is that @import is bad (via @alistairstead) and the second is that I don’t want my CSS to slow this site down when there is no need. I have tried out a few different CSS optimisation scripts, but I recommend Clean CSS because it has plenty of options,  can leave you with varying degrees of readability and so far it hasn’t broken a single thing.

Anyhow, after putting all my css together into one file and minimising it I then made a few tiny tweaks to the minimised file. Then when I wanted to do a bit of major reworking I ideally needed to work with my non-minimised file, but this was now out of sync… so I was stuck! It all comes down to poor planning of my Wordpress theme & poor design of my post styles – I designed the site rather than the content because I didn’t have any, and ended up with some nasty bits.

So lessons are learnt. I now have a manageable system and hopefully a slightly easier to read blog. It should take me less time to crank out posts (as I won’t have to mess with styling the content) and I should be back on track shortly.

Related posts:

1. A Warm Welcome and a Brief Introduction Following in the tradition of new beginnings that comes with...
2. Wordpress 2.8 Over the weekend I updated my blog to Wordpress 2.8....
3. 2009 Review and Aims At the beginning of 2009 I had been in my...

To my knowledge there are two plugins for doing this. Flutter and Pods.

Flutter

I started out using Flutter as I hadn’t heard of Pods but found it to be clunky, buggy & unintuitive. When editing a content type (or write panel) created by Flutter it looks as though you are in the Post or Page section depending on where you placed your new content type. This is confusing and unnecessary.

The data types provided with Flutter are quite extensive (it even includes a colour picker). However, Flutter’s image upload control is buggy and I have experienced Flutter jumping to the wrong page, crashing Firefox and losing data. All-in-all I found it to be hard to use, missing key features and lacking documentation which meant I needed something else.

Pods

In essence what Pods does is turn Wordpress into Drupal. It allows you to define your own content types with multiple fields for adding data so that you can use Wordpress’ admin interface and templating system to manage whatever data you want, be it just additional testimonials, or a full-blown product database. It also allows you to define templates for displaying or listing data types & to write helpers and filters to handle the entry and display of complex data.

Pods’ integration into Wordpress is much cleaner, meaning that content editing is much more intuitive than in Flutter. The many options for configuring filters and helpers has lead to a slightly complex admin interface, but one that is still highly usable. Pods also has considerably more documentation than Flutter seems to, although it is still lacking in some areas.

For me, the key bit of functionality which has made me love Pods is the PICK data type. It is essentially a drop-down list control, but instead of requiring you to define the options, it allows you to choose to list out other Pods, or Wordpress objects such as Posts, Pages or Users. This means you can build relationships between your content items, and that you create blocks of content for your templates by linking pods to Posts or Pages.

One piece of functionality I needed but isn’t present is the ability to use a PICK to create a drop-down list of all Posts and Pages to choose one to link to. A PICK data type can currently only list out Pages OR Posts OR Users etc, but not both. It is also not possible to list out Attachments, despite them being stored in the same table as Posts and pages.

As I needed this functionality, I decided to implement it. I have added the ability to PICK from Attachments, Posts & Pages, Posts & Attachments, Pages & Attachments, or Posts, Pages & Attachments. Only two files were modified (manage_pods.php to add options to the select, and Pods.class.php to extend the if/else and SQL statements to choose the right data).

If you would like to use my modified version of the Pods plugin, I have made it available for download. Please first download the full Pods plugin and install it. Then download the podsmodified and upload them to the wp-content/plugins/pods/core folder. I haven’t done much testing on them but it seems to work OK for me, please let me know if you have any issues & I’ll endeavour to fix them.

So, with my extension, I have found Pods to be extremely useful in several projects. It is a very powerful and ultimately usable CMS solution. However, there are still a few areas where I feel it could be improved:

• The power of the PICK data type could be improved as explained above.
• I also feel that PICKs could be further improved by allowing users to specify a simple “enum”-like data type
• The documentation, although at extremely useful, could greatly benefit from more detail & in-depth examples
• The clunky image upload interface needs work
• The interface is usable, but introduces new elements not present in Wordpress (namely famfamfam icon buttons) – by bringing at least the content-editing interface into line with the rest of Wordpress I believe this plugin will really come of age
• There is currently no way to link to a Pod from a Post or Page without configuring the relationship from the Pod itself (it would be nice to be able to setup custom fields to select from Pods but not necessary as it can be done the other way around).
• There appears to be a bug in the PICK > Categories option

In summary, I believe the Pods plugin to be superior to Flutter and have found it more able to suit my needs. The PICK field type, filters and helpers make for an extremely powerful and expressive CMS and Pods integrates neatly with CMS so as not to confuse editors or clients, which is a key concern. I highly recommend the Pods plugin and look forward to seeing it mature as it has truly enormous potential.

Download Pods Modified!

Related posts:

1. Wordpress 2.8 Over the weekend I updated my blog to Wordpress 2.8....
2. Symfony: New Static Text Management Plugin Generally, when I find something interesting I use twitter &...
3. My Web Hosting Nightmare… This past week and a half I have "moved home"...

I have always been fascinated by foreign characters. I once tried to learn Ancient Egyptian & did a short course in Mandarin as part of my Masters in International Business. So as odd as it may seem, this kind of thing is right up my street.

I vowed I’d search for the font when I got home, and lo and behold, much to my amusement it exists as a free font on Da Font. It’s called Space Encounter and it was created by Steve Ferrera (who also has some other nice fonts on Da Font) after visiting Disney World. Those of you who have looked at my twitter page with a large resolution recently might have seen something like this before, but for everyone else enjoy my little secret message :)

Related posts:

1. Disneyland, here I come! Two weeks ago, my slightly better half had his 30th...
2. It’s been a Very Quiet Month… It's now been over a month since my last post...

So far I haven’t taken too much time to dig around but I am definitely liking the new widgets interface. I have several different sidebars (for the homepage, footer, single page, page, etc) so not having to remember to save it and then switch sidebars to make multiple changes is much, much slicker. I’m really looking to experimenting with the new widgets API as well – I’ve got a few ideas for widgets, but if anyone reading this has ideas feel free to shoot them at me :)

On the other hand, I really dislike the new plugins interface. Having them all in one long list without a clear indication of which ones are active or inactive is really confusing, especially when you use a lot of plugins like me! I much preferred the old design with sections, where all active plugins were at the top.

Has anyone else had problems with using the widgets interface in Firefox? At first I thought it was either my connection or my hosting, but it works fine in chrome, itjust freezes in Firefox, along with gmail. It’s very frustrating as although I love chrome, I really miss my delicious, evernote, firebug, and other plugins!

Update: Is it me or is tagging not working in Wordpress 2.8? I’m completely unable to add tags to this post!
Update 2: It wasn’t me, it was DB Cache. Apparently that plugin causes the tagging issue along with hyperdb another DB caching plugin. Hope it’s fixed soon, but for now I can disable whilst I edit and then re-enable – fiddly but workable!

Related posts:

1. Spotlight: Wordpress Pods Plugin Have you ever needed to build a website which fit...
2. Symfony: New Static Text Management Plugin Generally, when I find something interesting I use twitter &...
3. A Warm Welcome and a Brief Introduction Following in the tradition of new beginnings that comes with...