Design Grid

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.

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!

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]

We all have shortcuts that are essential to our daily workflow. A majority of them are staples such as Copy (Command + C) and Paste (Command + V), but occasionally we stumble upon a shortcut we wish we’d learned years ago. Suddenly, this simple shortcut has streamlined our process and shaved quite a bit of time off our day. Collected here are some lesser known but extremely useful shortcuts. Many of these are not documented in the “Keyboard Shortcuts” menu, and some of them don’t even have equivalent menu options.

Read the full article over at Smashing Magazine

The web development scene is moving forward at a lightning-fast pace, and it’s imperative that developers continue to keep their skills fresh.

If you’ve been involved in front-end design or development in any form over the past five years or so, then it’s very likely that you’ve experimented at some point with one of the popular JavaScript libraries, many of which have become quite prominent and are now used on a number of large commercial websites.

Read the full artice over at Six Revisions

Image optimisation is something that is quite commonly overlooked by designers and developers alike. Image optimisation can make or break a site, if the site doesn’t load quickly then your visitors will leave. There are also financial benefits as an optimised image uses less disk space and less bandwidth to download.

Compression Formats

There are 3 main types of compressed image formats on the web. JPG (JPEG), GIF and PNG. Each format is slightly different and is used for different things.

JPEG or JPG is a the best format to use for images like photos. There is no transparency with jpeg images.

GIF is the best format for web graphics and illustration type images. GIF is great for graphics because the color palette, unlike a jpg image, is limited to 256 different colors. This allows a gif format to boast smaller file sizes, while retaining good detail when a graphic image is exported. GIF can also export images with transparency, but can leave jagged edges.

PNG is a competitor to the GIF format. There are two versions of PNG, 8 and 24. Version 8 is very similar to GIF, so the one to look at is 24. PNG 24 can sport great detail that one would want from a jpg image, but is able to compress the file size better. PNG 24 also allows you to export transparent images that would appear jagged with exporting with gif.

When in Doubt

If you’re not sure what format your image should be in, this is a nice simple reference that should point you in the right direction.

When exporting transparent images, your best bet is with PNG-24. The file sizes tend to be larger, but they provide spot on quality.

When dealing with layouts, sprites and buttons, your best bet is GIF compression.

When dealing with photos, the best bet is JPEG compression.

It’s competition time!

We all love Moleskines right? Design Grid is giving you the opportunity to win your very own luscious red Moleskine notebook.

To enter this competition:

1. Follow @design_grid on twitter.

2. Post a tweet:

Win a red Moleskine over at @design_grid! http://tinyurl.com/dgmoleskine

That’s it!

OR

For you non-tweeters, pop a comment on here explaining why you should receive one of these beautiful Italian designed Moleskines and you will be entered into the draw. Please use a valid email address so that you can be contacted if you win!

Good luck! The winners will be announced on the site/via email (if applicable), and on twitter via @design_grid.

With the introduction of CSS3, and CSS2 now being used worldwide as a standard for web developers it is safe to say that we all rely heavily on CSS as a whole. Planning and organising your stylesheets is essential for creating manageable and beautiful websites. The idea of organising your stylesheet is actually very simple, and there are many ways of doing so, but I find the following is the best practice.

Comment your stylesheet

This should always go without saying, a well commented stylesheet makes it easier to locate the information and syntax that you are looking for. There are 2 types of comments that I always include in my stylesheets.

Info/Update

This is used at the head of the CSS file displaying what the stylesheet is, what site is it for, who wrote it, and when was it updated.

/*--------------------------------------
Info: Design Grid - Main Stylesheet
Author: Darren Jones
Updated: 09/12/2009
--------------------------------------*/

Section Headers

For every section of the site, put a section header above the syntax. This makes finding section specific CSS a breeze.

/*--------------------------------------
HEADER
--------------------------------------*/

/*--------------------------------------
NAVIGATION
--------------------------------------*/

Define your global rules and main classes first

For anything that will be used globally over the site, set it at the top of the style sheet.

body {
background: #eee;
font:  helvetica, arial, sans-serif 12px;
}
h1 {
font-size: 1.2em;
}
h2 {
font-size: 1.1em;
}

Order CSS like HTML

If your html header is at the top of the page, and your html footer is at the bottom, then your header should be at the top of the CSS and the footer at the bottom.

Use the correct selector

There are 3 general rules for using the correct selectors.

1. Does it need a selector? If not, don’t use it.
2. Use a class if the element/selector is repeated more than once.
3. Use an ID if the element is unique and only used once in the document.

Name selectors appropriately

What happens if your class=”red”gets changed to blue? Wouldn’t it have been better to name it class=”sidebarlink”? Try and think semantically when naming your selectors.

Group together common elements

If your h1,h2 and h3 tags are all to be red, then it is best to group them together to define the colour.

h1, h2, h3 {
color: red;
}

h1 {
font-size: 1.6em;
}

h2 {
font-size: 1.4em;
}

h3 {
font-size: 1.2em;
}

There are more things you can do to plan and optimise your CSS sheet. We will cover some more techniques and methods in the future.

A quick tutorial on creating a basic PHP login form.

Create a new php file, we will call this one login.php for the tutorial.
In login.php we need to add a form for the user to enter their credentials:

<form action="login_check.php" method="post">
&#60;label>User Name</label>
&#60;input type="text" name="user" />
&#60;label>Password</label>
&#60;input type="password" name="pass" />&#60;br />
&#60;button type="submit" name="submit">Sign in</button>
&#60;/form>

Now we create login_check.php. In there we put the following code:

<?php
// Set the username and password here
$user = "username";
$pass = "password";
if ($_POST['user']==$user && $_POST['pass']==$pass){
$pass_secure = md5($pass); // Add md5 encryption to the password
$expire=time()+60*60*24*30; //Set the expiration of the cookie
setcookie("username", $user, $expire); // Add a cookie called "username"
setcookie ("password", $pass_secure, $expire); //Add a cookie called "password"
header('Location: whatever_page_you_want.php');
}
else {
echo "Incorrect username/password";
}
}
?>

Effectively, the code above checks the username and password, if they match then it sets a cookie for the username and password.

Now if you add this code to the top of every page you want protected by the login script then if these cookies are not set, it will redirect you back to the login page:
<?php
if(!$_COOKIE['username'] || !$_COOKIE['pass']){
header('Location: login.php');
}
?>

Pretty simple eh? This form is by no means secure as it stores the login data using cookies. Even thought the password has been encrypted using md5, it can still be decoded! You have been warned!