This is my first weeks posting in my bid for Project52. I am on the list at number 488 to guarantee at least one blog post a week for 52 weeks in order to make the web a more knowledgeable interesting place. I have a heap of TeuxDeux’s stacking up, and 2010 promises to be packed full of news and updates.

The most important of these updates will hopefully make my life a lot easier, freeing my time up so I can spend more time on this blog and other projects I have lined up, like floorfillers.fm for example. I am planning on making Expanse a one install system on my servers, allowing me to make developmental changes across all of the sites on my Media Temple Grid Server. I think I have already thought of the logistics behind this one, each index.php will call its own config file within the HTML folder, which in turn has its own settings for the database. I shall continue to keep the databases separate for security and ease when domains expire or are removed from my control and essentially Expanse, should my beloved clients decide to go elsewhere.

The other issue is to create the uploads folder, and how Expanse would read from it for each individual site. Some major hacking within the core Expanse system will be needed. 

So if you wonder why main development of Expanse is slow over at expansecms.org, then you now know why. Expanse CMS will continue to stay at version 1.4 for the time being. But once this change has been made, rest assured the development of the CMS made by designers for designers will continue at a faster rate.

I have been busy for the past few weeks, thus the lack of news and blog posts around these places. Today though I have some exciting news to bring you. Mainly in the world of Expanse, but we have some other applications for your downloading needs. Its Free too, which makes it even better.

Firstly Expanse now has an improved text editor. Changes will start to be rolled out this week to all current hosted users. The improvements bring better handling of images and uploads within the text editor, and a new shortcut, CTR + S/Command + S, which when pressed will save your post without you having to click add (or edit). 

Twitter has a new plugin. AutoTweet for Expanse allows for a CronJob to be set up on the server to check for new posts and automatically notify your twitter followers with a direct link to your article using the CMSURL shortener. You can of course tweet a message from within the Expanse Content Management System, so you don’t have to log into the twitter website.

Expanse is now fully compatible with PHP5. Before we were seeing problems with Session handling, but we have worked hard to allow for sessions to be saved whilst Expanse is installed on a PHP5 powered server.

Plugins are currently available direct from me, simply DM me on twitter if you would like the AutoTweet, or ask me for a specific plugin which will help you out. You can send me a direct message on twitter here.

Aside from Expanse development, I am please to announce a new Short URL service called CMSURL, of course there are plugins for Expanse, soon for Wordpress, and of course it works with the AutoTweet plugin. There is a really simple API, and the whole package is available for free. CMSURL has many options, including a secure service so you can create your own url shortening service that only you can use. CMSURL also handles images, simply by uploading your image to the CMSURL site (or your own service running CMSURL). Follow me on twitter for updates to the service.

Finally, for all the latest updates and blogs you should follow me on twitter here.

For those developers for kick ass web sites, and those who have missed this one. I know I did, Safari interprets Javascript as application/javascript, so you may find yourselves with some errors for resources. But do not change your html just yet, let me explain.

If you have the develop toolbar switched on then you may see a warning like this every so often:

Resource interpreted as other but transferred with MIME type application/javascript

It is because Safari interprets javascript as the approved MIME type of ‘application/javascript’, where as you may be using text/javascript. Unfortunately if you wade in and change your html references to you script files, then you will run into problems with IE, internet Explorer doesn’t understand the IANA approved usage and will ignore .js files.

Thus are the joys of building for every browser today.

People who know me well, know I am not often lost for words. This video came up on my Facebook feed and it really made me think. I hope it does the same for you, and encourage you to think about change. This video was release a while back, so you may have already seen it. Apologies.

The text is transcribed below:

Lost Generation by Jonathan Reed
I am part of a lost generation
and I refuse to believe that
I can change the world
I realize this may be a shock but
"Happiness comes from within."
is a lie, and
"Money will make me happy."
So in 30 years I will tell my children
they are not the most important thing in my life
My employer will know that
I have my priorities straight because
work
is more important than
family
I tell you this
Once upon a time
Families stayed together
but this will not be true in my era
This is a quick fix society
Experts tell me
30 years from now, I will be celebrating the 10th anniversary of my
divorce
I do not concede that
I will live in a country of my own making
In the future
Environmental destruction will be the norm
No longer can it be said that
My peers and I care about this earth
It will be evident that
My generation is apathetic and lethargic
It is foolish to presume that
There is hope.

And all of this will come true unless we choose to reverse it.

If you had not guessed, try reading the above backwards.

I always forget this, and end up either not having SVN on my design folders, causing me much wasted time rewriting code when I accidently dont download changes on my machines, or trawling through my notes to remember how to correctly set up SVN on (MT) Media Temple servers. Hopefully you find this useful.

Enable SSH Access

By default, SSH remoting is disabled on MediaTemple accounts, requiring you to explicitly enable it in the Server Administrator control panel section for your primary domain:

Once there, set SSH on “Enabled”, and save your changes. MediaTemple’s easy-to-use configuration tool couldn’t make this step any simpler.

Creating a Repository

Im working on a mac, so this tutorial is written for Apple users; open up terminal and connect to Media Temple as serveradmin@yourdomain.com. For example, if your site were example.com, you would connect as follows:

ssh serveradmin@example.com@example.com

The domain "example.com" is in there twice, first because it’s part of your full username, and second to point SSH at the right server. (If your SSH client complains about not being able to connect, you can try replacing the first @ sign with its encoded version, “%25″.) Type "yes" to confirm adding example.com to your known_hosts, if asked, then enter your administrator password to finish logging in.

Enter the following commands to switch to your "data" directory (provided by MediaTemple), and create a basic repository for your code/information:

Change directory (cd) to your data directory:

cd ../../data/

Create a “repos” directory to hold one or more repositories:

mkdir repos

Change directory to the folder you made in the previous step:

cd repos

Create a repository (replace "folder" with your desired repository name, using underscores for spaces). Letter case is important, so if you capitalize any part of the name now, you’ll have to capitalize it later when using it. The bit about "fsfs" is to use a specific Subversion database type recommended by MediaTemple — it’s the default type for newer versions of Subversion, but it’s best to put it just to be safe.

svnadmin create folder --fs-type fsfs

You can repeat this to create as many repositories as you wish inside the "repos" folder.

Log out of MediaTemple:

logout

Checking Out Your Repository

On your local computer (not on MediaTemple), decide where you want to keep your repositories. I recommend someplace easy to get to like /workingcopies/, but a repo can go anywhere you prefer. Check out a copy of the repo you just made:

svn checkout svn+ssh://serveradmin@example.com@example.com/home/1234/data/repos/folder  /workingcopies/folder 

Be sure to replace "1234" with your four-digit MediaTemple server ID number that can be found in your Service Activation email.

To verify everything drop a simple file into your new repository folder at /workingcopies/folder, such as test.txt, and do:

svn add test.txt svn commit -m "Adding test file."

Recently I have been reading the acclaimed best selling novel; The Time Travellers Wife, not the normal genre of books I am used to reading, but after seeing a preview of the film in June I just had to hunt down the book and get reading before the film screened in August.

It took me a while, but I managed to successfully complete the book shortly after the film was released, and enjoyed it greatly. I really emphasised with the characters, and was taken away on the journey portrayed in the book of Henry and Clare’s lives together, a thoroughly intriguing story, and an emotional outcome, I am not afraid of telling you I shed a tear or two.

It was my time to watch the film with the novel read, and dutifully handed to my wife, so last night I went to my local cinema to see my much anticipated movie. The Time Traveller’s Wife is a science fiction film without the science fiction, though unlike the book there were no other character developments apart from the main two; Henry and Clare, and the changes to vital aspects of the original book were somewhat distracting, like the book it doesn’t get bogged down in the whys and wherefores of time travel, but it has fun with the inherent paradoxes and ironies, while the common-room philosophising isn’t given any more prominence than the issue of how to find clothes when you appear naked in the street in the middle of the night. However, I am glad I saw the film, and whilst I was always one step ahead of the film having read the book, enjoyed it very much.

Well worth seeing, but I do suggest reading the book, whether it be before or after the film.

Just a very short, and perhaps simple demonstration of how to randomly display a background image from a CSS sprite using only jQuery and CSS background positions. Great if you have a changing banner on your website.

Firstly I will make this into a plugin with only one variable you will need to change depending on the amount of images in your sprite, this is in the var $imageNumber.

$.fn.randomImage = function (){
var $imageNumber = 8, 
// Set the amount of images in the Sprite
$height = $('> div', this).innerHeight(),
$random_num = Math.random() * $imageNumber - 1,
$multiple = Math.round($random_num),
$random = $height * $multiple
jQuery('.image').css( 
{'background-position' : '0px -' + $random + 'px',  'display' : 'block' } 
)};

The only necessities you will need in your html is a div with a class of image inside your selectable div, which you select with the following:

jQuery('#image-container').randomImage();

Your CSS will have to define the height of the div.image which in turn should equal the height of the individual image in your sprite.

I don’t normally do this, but for 5 days I am giving you 15% off everything instore with this voucher. Simply print it off and take it with you between the 20th and 25th August 2009.

Simply visit this link enter your name and email address and print your voucher. You can also let your friends know by sending out this url http://cmsurl.com/N.

Click here to download your voucher

Happy shopping at B and Q.

Recently Safari released an update to their fastest web browser yet, with Safari 4.0.3, bringing stability and security fixes, a good thing, unfortunately this update breaks Inquisitor, a far more advanced search interface for Safari and other browsers, fortunately I have a temporary fix.

Inquisitor which is available for Safari, Firefox, IE7 and even iPhone was designed and built by David Watanabe, and was recently purchased by Yahoo!, it provides search suggestion, coupled with intelligent features such as telling the user when the key word was last searched, and whether you had already visited the page previously.

Unfortunately when Apple released the latest version of their browser, they enabled the Google autosuggest by default with no way of disabling the in my opinion inferior search engine, (its a personal thing)! In any case what you get is the search results for Google covering Inquisitors results, (Inquisitor can use Google as a search engine too, as well as Yahoo!). With some searching around for a solution whilst I am sure David and Yahoo! work to build a fix, I came across Glims, which offer a very similar tool, in fact some of the styling is very much similar. What Glims also offer however is some more tools to tweak Safari 4, (their latest release will be available after this coming weekend 15th August, you can get a working version now from MacHangout).

Install Glims, but if your like me and prefer the user interface of Inquisitor you will want to turn off some features. Head to Safari Preference pane and select Glims.

General

Leave "Enable Search Suggestion plugin" checked, uncheck everything else.

Search Suggestions

Uncheck everything

And that should be all you need to do to get Inquisitor back working. The only issue now is that it still says Google in the search bar instead of inquisitor. But never mind. Lets hope David and Yahoo! can find a resolution soon.

Any issues, please use the comments.

With iSkip, another jQuery plugin from Ian Tearle, being released for FREE today, here is a nice little tutorial on how to get it to work within your Expanse templates.

Obviously the first thing to do is to add jQuery and the iskip.js files to your javascript folder, and reference it within your header.tpl.html file. Once done you will probably need to head to your gallery.tpl.html file, unless of course you are adding the iSkip to another page. Start by adding a small piece of script within the content loop of your page.

$(function() {# { #} var arr = [ 
 {loop:image_set} 
 '{thumbnail}'{set:_not_last},{/set} 
 {/loop}]; 
 $("#mousemove").iskip({#{images:arr, method:'mousemove', 'cycle':3}#}); 
 {# } #});

For the example, and for my purposes I am using the image set (additional images) of the page to display the images.

Note the use of using special characters within the template.

Next you will need to add the Key image for the set in your image_set loop, this will give the initial image that loads, allowing the javascript to load the other images in the set hidden in the background.

{loop:image_set}
 <div id="image_set"> 
 {set:_first}<img src="{thumbnail}" id="mousemove" />{/set} 
 </div> 
 {/loop}

Now iSkip will work seamlessly inside your templates. There will be an additional tutorial once the jQuery iSkip project allows links on indiviual images.