The css font tag looks more baffling than other css shorthand tags, take the border tag for example:

border : 1px solid #000;

A 1 pixel solid black border, easy. Now take the font tag shorthand..

font: italic small-caps bold 12px/18px Verdana, Arial, serif;

What on Earth is that all about… Well, if we break it up we see that we have:

Style, Variant, Weight, Size / Line Height and Family.

The first 3 aspects, Style, Variant and Weight are all optional as is the line height. If line height is omitted then so is the forward slash that splits size and line height. The family must always come last and along with the size is mandatory.

I had no idea it was that simple.

Here’s how

I created 2 functions, php_to_mysql() and mysql_to_php

PHP to mySQL

function phptomysql($php)
{
//Break the date up in to an array
$php = explode("/", $php);
//Re=arrange the date in to the US format
$php = $php[1] . "/" . $php[0] . "/" . $php[2];
//Convert the date (string) in to php time format
$php = strtotime($php);
//Format the time value in to a php variable in the format of mySQL datetime field
$php = date('Y-m-d H:i:s', $php);
return $php;
}

mySQL to PHP

function mysqltophp($mysql)
{
//Change the mySQL date to a time value.
$mysql = strtotime($mysql);
//Format the time value to the UK date format
$mysql = date("d/m/Y", $mysql);
return $mysql;
}


This one is much simplier. As we do not need to involve a re-arrangment of the date from US to UK, we can just format the time value to the UK format straight off.

Example

View the date formatting in operation

One thing that got me was how simple it was. Facebook provide the tools to build the button its just a matter of adding the code to the website. The tricky bit was finding the right information, lets face it, having Facebook in a search term throws back thousands of results.

I came across the Facebook developers page and it really couldn’t have been easier. Of the 2 options available I chose the javascript one. The first option and probably the easier of the 2 is using an iFrame but something in me just says no to iFrames if possible, plus I’m not one for the easy route.

There are 2 pieces of code to add to your site, the button code and the javascript code.

Firstly we need the button code so all thats required is to fill out the little form (see picture 1.1) and click the get code button.

Picture 1.1 - Adding the like button

Now this will only really benefit one page as the url is fixed in the widget. If you want to add it to multiple pages with each page having its own unique button then you need to amend the code slightly. Using PHP this is done by getting the current uri and url as follows.

The code will look something like this:

Add the following just above the point where the face book code will go and change the “Your URL” bit for <?=$url;?>.

This code gets the current page uri so each page the button sits on has its own unique “Like” option. This works well for pages where content is significantly different and specific, like an e-commerce site or blog.

Now the second part is the javascript code:

This little snippet can be found on the Facebook developer site too. Just add both pieces of code to your website and there you go!

As a web developer and amateur geek I am always looking for ways to improve and speed up my workflow. When I first moved over to the Mac I was also looking for ways to ditch Dreamweaver as my application of choice for web development.

Enter stage left Coda by Panic. A one window development application that covers everything…well almost.

Courtesy of a nettuts twitter post I came across a plugin for coda which gives this awesome app a live preview window

The plug-in is from Steam Engine and can be downloaded from http://menumachine.com/download/Lively1.0.zip

Great work Rob

I have just been introduced to the world of font replacement using cufon. I had come across sIFR but found it complex and difficult to implement. To be honest I had seen mentions of cufon but only in the last few days had I used it.

As with all the jQuery I have come across it is very easy to implement, in the following steps I will show you how.

1. Decide on and obtain the font you are going to use. For this example I am using Pilgi
2. Visit the following web site Cufón generator
3. Fill out all the options as required and generate your font
4. Download the Cufón script from the above site or from here
5. Add the 2 scripts to your site and link to them within your web page.
6. Once the scripts have been uploaded to your site you need to add them along with a line of code to tell the Cufon script that the DOM is ready. This is needed for Internet Explorer, yeah its IE again

Example:

1. <script type=”text/javascript”> Cufon.now();</script>
2. <script type=”text/javascript” src=”cufon.js”></script>
3. <script type=”text/javascript” src=”Pilgi_400.font.js”></script>

Rememeber that javascript files go just above the closing body tag.

Add the following script to the page depending on your choice

1. The example I am using is a span with class font to show the Cufón in action
   <script type=”text/javascript”>Cufon.replace(["span.font"]);
2. You could do something like:

<script type="text/javascript">Cufon.replace(["h1"]);></script>

This applies the Cufón to all the h1 tags on the page.

So, this is a span with a class of font, showing the Cufon in action

Resource interpreted as other but transferred with MIME type text/javascript.

Although this doesn’t appear to cause any visual or operational defects on the page it is something I wanted to remove.

The way to fix it is to add the following to the head of the page.

<meta http-equiv="content-script-type" content="text/javascript">

Hope this helps others

In the mean time I have been writing over at Words Without Volume – My own none IT blog. I have a Apple mac blog over at My Apple Blog.

I am currently working on a new site for Ultra Print Ltd. They are the UK’s largest Bespoke Canvas printers and were in need of a new site. Having previously worked with Ultra Print the job has progressed very quickly and is almost near completion.

Other work / projects include:

• My own portfolio – Redevelopment
• A sporting dates calendar site
• An iPod Repair site – Redevelopment
• A new iPod Repair Shop – An additional to the above

As you can see a lot going on but I will be posting more soon…

I have recently finished a project at work using the Symfony PHP framework. Within the project I was able to add some very clever pop up message and error boxes. The ones I used for the project came with the addition of jQuery to animate there appearance but I thought about standard css ones.

My searching led me to this nice little tutorial from Janko at Warp Speed
The messages come in the form of Success, Information, Warning and Error.

1. Success messages

2. Information messages

3. Warning messages

4. Error messages

The original article can be found here CSS Message boxes

I am using symfony at work so this should help me along quite nicely.

I am aiming to add some symfony based articles to my blog shortly.

Here’s hoping that this role will turn out to be much better than my last one.