Feature
Post

Category
Design

Tidy up your stylesheets

It’s 2009, and while I’ve cleared up my desktop clutter, reassigned new icons to my folders, and archived projects from 2008, there’s something that remains unchecked on my to-do list: clean up CSS code. See, I’ve got a bunch of CSS stylesheets that are live, powering different websites, that are shamefully, shamefully disorganized. More →

Feature
Post

Category
Column

Outsourcing IE6 bug fixes: good or bad idea?

I found a very interesting idea by Tim Van Damme, which examines the possibility of a service that fixes nothing but Internet Explorer 6 bugs, much like the slicing/PSD-to-HTML niche that’s grown in popularity over the past years.

I guess that’s how troubling IE6 has been to us. Who here hasn’t delayed fixing up websites to make them work properly in IE6 until the very last minute? Who here hasn’t cursed IE6 and Microsoft (and even Bill Gates) a million times? Who here can’t relate to the (humorous) pie chart below?

Time Breakdown of Modern Web Design

Time Breakdown of Modern Web Design

Clearly there are problems with such a service, like how it’s too specific and biased against a single browser version—surely there are other browser bugs a web developer must pay attention to. And how letting others do the bug-fixing for you might bring about even more complications and wasted time anyway.

Never mind how long this business will actually last. It still begs the question of how to deal with cross-browser compatibility the right way. And the answer is, it really depends from site to site, company to company, audience to audience. Some things to consider:

  1. Have you tried avoiding styles that are trickier to fix for IE6?
  2. Can’t you leave those rounded corners just square ones in IE6? Or make those translucent effects opaque?
  3. Would you consider doing taking more stringent action by dropping support for IE6?

I think Kai said it best, it’s “a business idea that shouldn’t have to be one!” But it still makes for an interesting discussion. When you’re faced with stumbling blocks while developing for IE6, what would you rather do, roll up your sleeves and do the dirty work yourself, or ship it off elsewhere?

Feature
Post

Category
Code

Create a Simple Calendar Using PHP

Here’s a simple, useful calendar script. This is a great way to check on days of the week for birthdays, holidays and other important occasions. You can also use it in conjunction with a data file (e.g. .csv, .xml) or database table (e.g. MySQL) as a tool to track appointments and special events.

This particular script makes many uses of the PHP date formatting functions. For more information on how PHP date formating works, see the PHP manual (http://us3.php.net/date).

First off, check to see if the user has sent previous values for the month and year via the form or the query string.
If this is the initial load of the form, then the system will pull the current month and year.
The “isset” function checks for the existence of the $_GET (query string) variables.

<!--//if values are not set for $Month and $Year, get current date values
if1 && (!isset($_GET["Year"]))) {
 $Month = date("m");
 $Year = date("Y");
}
else{
 $Month = $_GET["Month"];
 $Year = $_GET["Year"];
}

Now, we use the month and year values to get the Unix timestamp:

//Get viewed month
$Timestamp = mktime(0,0,0,$Month,1,$Year);

We can use the date formatting function to get the full month name (e.g. January, February, etc.):

$MonthName = date("F", $Timestamp);

We use the “echo” function to print the start of the table to the screen:

//Make calendar table
echo("Calendar Table for $MonthName, $Year
");
echo(
<table border="0" cellspacing="0" cellpadding="3" align="center">");
echo("
<tbody>
<tr bgcolor="#0000ff">");

We create the array for the days of the week and loop through the array elements to fill the table headers:

//loop through days
$daysOfWeek = array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
foreach ($daysOfWeek as $value) {
echo("
<td align="center"><strong>$value</strong></td>
");
}
echo("</tr>
");

Here is another date formatting function that we can use to get the day of the week for the first day of the month. Remember, this is a zero-indexed array. Thus, 0=Sunday, 1=Monday, etc.

//get day of week at start of month
$MonthStart = date("w", $Timestamp);
if ($MonthStart == 0) { // if the month starts on a Sunday
 $MonthStart = 7;
}

Now we get the last day of the month by “0th” day of the next month:

//get last day of month
$LastDay = date("d", mktime(0,0,0,$Month+1, 0, $Year);

Another option is to find the number of days in the current month. Using this option will affect the calculations further down the routine. If you like, you can use this option and adapt the rest of the routine to this new setting.

//$LastDay = date("t", $Month);

Get the number of “blank” entries at the start of the month by using the day of the week that starts the month.

//get start date
$StartDate = -$MonthStart;

Now we can start filling the table cells for the calendar.

First, the we set up six rows for up to six weeks:

for ($k=1;$k&lt;=6,$k++){  //print six rows for six possible weeks
echo("<tr>");

Then, we set up the columns for the seven days of the week:

for ($j=1;$j&lt;=7;$j++){ //seven columns per row

The system will add 1 to the $StartDate variable for each day in the week. From there, we test the value of the variable. If the $StartDate variable is either before the start of the month or after the end of the month, the calendar shows a blank space. If the $StartDate variable is within the number of days of the month, the calendar prints the date.

 $StartDate++;
 if(($StartDate  $LastDay) { //blank calendar space
  echo("
<td> </td>
");
  }
 elseif2 { //date goes here
  echo("
<td>$StartDate</td>
");
  }
 }

At the end of the week, we end the table row and start a new week.

 echo("</tr>
");
} //End Table Row

After we’ve finished all six weeks, we end the table.

 echo("</tbody></table>
");

That takes care of the current month. Now what do we do if we want to see another month?

Here’s how we create a form that allows a user to select a different month:

 //create select form

 echo("
<div><form action="\calendar.php\" accept-charset="UNKNOWN" enctype="application/x-www-form-urlencoded" method="\GET\">");
 echo("Select a new month to view:
");
</form></div>
<form action="\calendar.php\" accept-charset="UNKNOWN" enctype="application/x-www-form-urlencoded" method="\GET\">

Instead of listing the months individually, we can use the date formatting function to create a dynamic loop and display the month names:

 echo("");   for($m=1;$m&lt;=12;$m++){  echo("" .date("F", mktime(0,0,0,$m,1,$Year)) . "");  }  echo("");

We can do the same for the year (2008-2020):

echo("");  for($y=2008;$y&lt;2020;$y++){  echo("$y"); } echo("");

Now we finish the form with the submit button:

echo("");
echo("");

</form>

Again, this is a simple yet functional calendar script. If you’d like to see how to add other features to this calendar, such as flat file or database support, please let us know.

  1. !isset($_GET["Month"] []
  2. $StartDate &lt;=1 &amp;&amp; ($StartDate &lt;= $LastDay []

Feature
Post

Category
Friday Focus

Friday Focus 01/02/09: Impeccable One Page Sites

Happy New Year, dear Devloungers! For our first Friday Focus of 2009, I have one-page websites that are impeccable not only in their design detail, but also in their presentation. They’re answers to the question “why make Flash sites when you can have these?” and Jason Santa Maria’s challenge to us to add art direction in our websites. And these are some of the best sites I’ve seen.

Designs of the Week

Alex Buga

There are so many good things about this site that I don’t even know where to begin. Perhaps the most notable one is how all the inner pages load in a floating layer. It’s like the lightbox effect, except the design is much more polished.

Tomáš Pojeta

This site instantly reminded me of Volll.com, especially since both move from outerspace to underwater scenery in each scroll, but it is completely breathtaking in its own right. Great websites tell stories, and illustrations are the best ways to do that.

Black Estate Vineyard

Typography had a large role in making this site a seemingly simple but effective one. My favorite part has to be the map found in the Region section, which just blends into the background—very smart!

Tyler Finck

This site takes advantage of scrolling to add transitional effects as it loads each section. That’s so much better than waiting for a blank page to fill up, right? The only thing that’s slightly disappointing is that Tyler’s blog looks completely different from the main site. Still, you’ll enjoy browsing this site.

Suie Paparude

Here’s a horizontally scrolling site that combines the hand drawn look with grids and bright colors. What makes it different from other horizonal sites is that the content also grows vertically, which I’m not too sure about. But plus points for making managing a whole lot more content than one-page sites usually have.

Social Media Weekly

DesignLooking Back On 2008 With Top Web Designers
Great interview with top designers on the year that was and the one coming ahead.

Programming9 Realistic New Years Resolutions for Developers
Done your New Year Resolutions list yet? This might help.