Photo by Shht!

I’ve already filed a report on the Apple website & am about to go phone them for help. I’m not expecting much & I’m getting seriously frustrated. Maybe it’s only on Windows 7, but the iPhone syncing process seems to have some serious flaws.

I’ve had an iPhone for exactly a month today. In that time I have come to be totally addicted & completely in love with the device. It’s sleek, stylish, easy-to-use and does everything I need from the device in my pocket. But it’s also BUGGY, really, really BUGGY to the point where it’s almost useless.

Just after Christmas I made the mistake of syncing my phone on my work machine, such that everything was erased from the phone. Ok, silly mistake, but it shouldn’t be that easy to wipe your mobile phone! When I got home and tried to sync everything back – it wouldn’t.

Each time I attempted to sync it would throw 3 or 4 unintelligable errors messages and then iTunes would refuse to recognised my iPhone. I’d then have to do a restore & start over with the sync. Eventually I realised I could sync only by syncing 1 or 2 apps at a time – not the whole lot. Problem solved. No more accidental work syncing for me!

Last week I connected my phone up for a routine sync – I had some new music I wanted to get onto the phone for the weekend – but again it threw 3 or 4 unintelligable errors (like -48, -49 and -2ksomething) and failed to sync. Everything seemed ok with the iPhone, however halfway through my weekend away my apps started to do the “flash-and-crash” thing. This has happened before and turning the iPhone off and on again normally fixes it, but not this time! I read that some people had found installing a new app fixes it, so I tried that and luckily it worked.

Now I’m home and my iPhone isn’t recognised by iTunes anymore. I get a message saying “an iPhone has been previously synced with the machine” and allowing me to either set the iPhone up as a new phone, or restore from a really old backup. In addition, when using the iPod function it only plays one track and then crashes.

I’ve tried searching the net to see if others have this issue, and if there’s something I’m doing wrong. Maybe it’s Windows 7, maybe it’s cos I’m using Google Sync, or maybe there is some rogue app causing havoc during the syncing process. All I know is that losing all my data every 2 weeks is rendering my iPhone totally useless.

</rant>

Related posts:

1. 2009 Review and Aims Final Part Short, honest and to the point. The last 5 months...

To change the excerpt length (how many words are output), define a function which returns the number you want and then call it with add_filter() on the ‘excerpt_length’ filter as shown below.

By default excerpts which are generated by Wordpress (as opposed to defined via the “Excerpt” box) have the string “[...]” You might want to turn this into a link to the post or page and/or change the dots to something like “more”. The code below does both of these things using str_replace().

You can change the second parameter of str_replace() to whatever you want to be displayed. I included the $post global so that I could get the permalink and make the string into a link to the post/page.

Please note these will not work if you have any plugin installed which removes the excerpt hooks. One such plugin is the Event Calendar 3 plugin. If you come across any more please let me know in the comments.

A Note on Snippets: When customising a CMS such as Wordpress it is often the simplest pieces of code which are the hardest to either find or remember. These snippets are placed here for my own reference and will hopefully be useful to others. If you find them useful or have any suggestions, please let me know.

Related posts:

1. Snippet: Symfony User – Access the User Object The following snippets provide access to the Symfony User object...
2. Snippet: Symfony Forms – Setting Default Values I often forget how to set default values for form...
3. Snippet: Symfony Forms – Allowing Extra Fields Place this line of code in the configure method of...

Answer at twtpoll

Related posts:

1. Down with IE6? Tell it to Microsoft There has been much talk in the web design and...
2. 2009 Review and Aims Final Part Short, honest and to the point. The last 5 months...
3. What is WRONG with my iPhone? I've already filed a report on the Apple website &...

Originally intended as a small group of friends supporting each other to reach their goals, there are now over 700 members and I’m really interested to see how this develops into a workable system.

Last year I promised to write once a week and failed, so I’m hoping this might spur me on to achieve that goal this year. The intention is that a tracking system will be created to monitor progress of group members. If the system works (once it goes live) I’ll also be purchasing a mug as a daily reminder – I just wish they did one in purple!

Related posts:

1. Stay on top of the game For 2010 I pledge to stay on top of the...
2. 2009 Review and Aims Part II On the first of June I published a summary of...
3. 2009 Review and Aims Final Part Short, honest and to the point. The last 5 months...

Stay on top of the game.

I have a horrible habit of letting things slide: the housework, the bills, my weight, my hobbies, my blog, birthdays, even Christmas. Unless I have plenty of what I call “brain space”, I find it very difficult to remember to do all the things that I have to do, and even if I remember them I find it even harder to find motivation. If it can be left until later, invariably it is and if it can be strategically ignored then all the better.

For 2010 I pledge to stay on top of the game.

To keep my house clean and tidy, to remember all the bills and paper work and have them done on time, to lose weight and exercise, to be organised with birthdays, Christmas and other important dates and to use my free time wisely so that I may achieve my goals.

I am not writing this here because I think people will want to read it. But so that it’s here for me as something tangible, as a reminder, and hopefully as a little kick up the bum when I start to slip.

To all I wish you a Happy New Year and all the best for 2010.

And if you did kindly take the time to read this, I’d love to hear any top tips for staying organised as well as what your New Year’s resolutions are in the comments!

Related posts:

1. 2009 Review and Aims Final Part Short, honest and to the point. The last 5 months...
2. I’ve signed up to Project52 I've just signed up to Project52. Originally intended as a...

Short, honest and to the point. The last 5 months have been an epic fail for me in terms of my mid-year resolutions and personal goals. I’m not going to go back through them or explain the multitude of things that had to take priority this year. Suffice to say, I did not achieve what I intended and that needs to change.

I’ve Succeeded

2009 has not been a complete failure. In 12 months in our new home we have completely refitted the bathroom & replaced leaky plumbing, had the entire house rewired, redecorated the lounge, almost finished redecorating & updating the kitchen and organised for the windows and doors to be replaced as needed. I’ve also succeeded in my first year of employment, and to top it off after 5 years of engagement I have finally (finally) booked my wedding, huzzah!

The Future

This year I have published 24 articles, but I have 20 drafts sitting waiting to be given some TLC and a click on the publish button. There’s no point in updating goals I haven’t achieved yet, but I certainly need a plan of action if I’m going to succeed with this blog. To stop the house and wedding from taking over my life entirely in 2010, I am going to have to get organised.

I have a weapon up my sleeve for this one: my shiny new iPhone. It pains me that I’m pinning my hopes on an Apple product, but such is life. I’ve organised all my contacts and events into Google Mail and Calendar and am using Google Sync to magically sync all that info with my iPhone. Now all I need is a ToDo list application that does the same syncing magic. I’m having to move away from my online favourite todoist because none of the iPhone apps seem to work (I paid £2.99 to find that out!). I’m planning to try out Toodledo but any recommendations would be graciously received!

I’m also loving the Wordpress app for the iPhone. It is letting me regain those minutes wasted whilst dinner cooks or the kettle boils and use them towards getting one of those draft articles published. There’s plenty more to be said about the iPhone, but I’ll save that for another blog post.

So that’s it from me for 2009, it’s been a toughy. Here’s to an organised 2010 that’s rich in blog content!

Related posts:

1. 2009 Review and Aims Part II On the first of June I published a summary of...
2. What is WRONG with my iPhone? I've already filed a report on the Apple website &...
3. 2009 Review and Aims At the beginning of 2009 I had been in my...

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. YUI: Javascript Carousel with Custom Navigation – Part 1 Welcome to my first JavaScript related post! I'm currently in...

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. 2009 Review and Aims Final Part Short, honest and to the point. The last 5 months...
2. Wordpress 2.8 Over the weekend I updated my blog to Wordpress 2.8....
3. 2009 Review and Aims Part II On the first of June I published a summary of...

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...