Design Grid

The CSS 2.1 Help Sheet covers Syntax, Font, Text, Margins, Padding, Border, Position, Background, List, Media Types and Keywords. The CSS 3 Help Sheet contains code snippets for Rounded Corners, Box Shadow, Multiple Columns, Text Shadow, RGBa, Font Face (actually, not the CSS3 property, but still include for the sake of usefulness), Box Sizing, Box Resize, Outline and Gradients.

These were kindly made available for free by Smashing Magazine.

Head over there and get yours.

Adding shadows to elements is no longer the work of an image editor. The introduction of box-shadow into CSS3 means that you can add shadows with a little bit of CSS.

-webkit-box-shadow: 2px 2px 3px #CCCCCC

The first attribute is the vertical offset, the second is the horizontal offset, the third is the blur radius and the final attribute is the shadow colour.

This technique works really well with applying a border radius to the element too as outlined in the previous CSS3 tutorial.

First and foremost, before venturing into the world of CSS3. It is imperative that I mention browser support. As I am sure that you have guessed Internet Explorer is the culprit here. While IE 6 & 7 have absolutely no support for CSS3, IE8 does not support CSS3 except for some selectors and some properties that originated at Microsoft to begin with.

Curved Corners

<div style="background-color: #CC8800;
-moz-border-radius: 10px;
-webkit-border-radius: 11px;
border: 3px solid #000;
padding: 15px;">

Individual Curves

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomleft: 10px;

To apply the same principle in Safari requires slightly different syntax:

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

That’s all there is to rounded corners using CSS3. It’s worth noting that border-radius is most effective with a lower value e.g 2px.

I’ve often found myself requiring icons when linking to or referencing different social networks I’m a member of.

Whilst there are a lot of icon sets available that can help me do this, most seem to be oversized and highly stylised. In the past I’ve used site favicons, but these can often be visually inconsistent.

You can grab these beautiful icons from Paul Robert Lloyd here.

Yes, this is another round-up of fresh and useful Javascript techniques, tools and resources. But don’t close the tab yet, as you might find this one very useful.

In this selection we present calendars, forms, buttons, navigation, debugging, optimization and compatibility tables as well as handy resources and tools. We also cover various jQuery-plugins that will help you extend the functionality of your website and improve user experience with ready components or coding solutions.

Read the full article over at Smashing Magazine

Most of my clients are on twitter, this results in my clients wanting to show their latest tweets on their home page.

While Twitter provide JavaScript ‘badges’ to show your latest tweets, it it sluggish and what happens if a user has JavaScript disabled?

My workaround for this was using php to parse the users RSS feed.

//RSS Feed URL
$rss_url = “http://twitter.com/statuses/user_timeline/14942878.rss”;

if (!$rss_data = @file_get_contents($rss_url)) {
echo "Oh snap, it seems twitter is down :(";

} else {

$rss_xml = SimpleXML_Load_String($rss_data);

$channel_title = $rss_xml->channel->title;
$channel_link = $rss_xml->channel->link;
$tweets = array();
foreach ($rss_xml->channel->item as $item) {
$item_title = $item->title;
$item_link = $item->link;
$item_description = $item->description;

$tweet = explode(": ", $item_title);
$tweetmessage = preg_replace("/(http:\/\/[^\s]+)/", "$1", $tweet[1]);
$tweetmessage = preg_replace("/(@[^\s]+)/", "$1", $tweetmessage);
$tweets[] = $tweetmessage ;
}
echo $tweets[0] ;
}

This chuck of code uses a regular expression to parse the XML of your RSS feed, puts each tweet into an array.

Example: Display your 5 most recent tweets:

echo $tweets[0] ;
echo $tweets[1] ;
echo $tweets[2] ;
echo $tweets[3] ;
echo $tweets[4] ;

Enjoy!

The sophisticated image of minimalism has always been a popular style of design.

In webdesign a minimalist site is stripped naked of eye candy and fancy colours or effects, leaving the underlying structure exposed. The key to a beautiful minimalist site is a solid and structured layout, as well as focus on stylish and well designed typography.

These 50 examples showcase some of the best minimal site designs out there on the web.

Read full article over at Line25

This little snippet of code does amazing things!

Using imap_open, you can display your unread email count from your googlemail (or any pop/imap server). I used it for my status board, and it works a treat.

$mbox = imap_open ("{imap.googlemail.com:993/imap/ssl/novalidate-cert}INBOX",
"gmailusername", "gmailpassword", OP_READONLY)
or die("can't connect: " . imap_last_error());
$check = imap_mailboxmsginfo($mbox);
if ($check) {
print $check->Unread; //. "/" . $check->Nmsgs;
} else {
print "Failed";
}

Just a couple of things to note:

• novalidate-cert – This is important for Google Mail, otherwise you will get authentication failures
• Make sure you have php5-imap installed. [sudo apt-get install php5-imap ; /etc/init.d/apache2 restart]

I know, I know, shameless plug.

Yesterday I was rolling out some updates to Listy ToDo, a small and simple web based to do list. I use it for everything these days so wanted to share it with you in the hope it will help you too!

Go to Listy ToDo – listytodo.com

So, maybe this is a bit off topic but it is so cool, I had to share it anyway.

Yesterday, I built my own status board (inspired by this: http://www.panic.com/blog/2010/03/the-panic-status-board/)

This is a brief over view of what it does.

It’s built using PHP/MYSQL and uses AJAX requests every 20 seconds to keep it updated constantly.

It shows the latest projects that are not started yet, ready to go, and active. It also has the days events/to-dos, does needing Rice & Sour Cream count as an event?

It is updated via a simple PHP/MYSQL backend from my local machine.

The bottom center module is a real time server status that pings each server to check that it is still alive and well.

The most exciting module is the bottom right that executes an IMAP request to pull the number of unread emails from my googlemail and my work email accounts.

That’s all there is to it, but it looks pretty cool mounted on the wall.

I’d love to know your thoughts on it!