Kenny Carlile

In my post titled WebVisions 2008 Conference Debriefing, I mentioned the concept of a CSS reset and provided links to two versions: the Eric Meyer CSS Reset and the Yahoo UI Library CSS Reset. Both address the issue of browser having their own internal stylesheets that don't necessarily match.

For example: an h2 tag in one browser might have font-size: 16px; and margin-bottom: 12px; while another might have font-size: 18px; and margin-bottom: 14px;. That means that without any of your own CSS work, the same plain-Jane <h2>Some Subtitle</h2> code will look differently. These are the battles web developers have to face and why we hate IE for its non-standard renderings.

The purpose of the concept of a CSS reset is to put all browsers on an even playing field before you begin to style the content. That is, make sure that all elements render the same on all browsers (or rather, all major browsers) so that adding your own styling will have the same effect across the spectrum of renderings. That's not to say that you won't need to make special hacks to fix inconsistent renderings *cough-IE-cough*, but a CSS reset puts you a lot closer to the end goal than where you started.

I've only tried implementing and developing CSS with the Eric Meyer CSS reset and the Yahoo reset once each, so my experience here is somewhat limited, but these are my initial impressions. While both are essentially the same technique and could be adapted to behave more like the other, I'm going to address the out-of-the-box functionality.

Eric Meyer's CSS Reset – Eric Meyer CSS Reset

This was my first attempt at using a CSS reset and you're looking at the results in this current blog theme (as of the date of this post). Meyer's method is to set all elements to be, essentially, unstyled. That is, all elements render as plain text. No bolding for <strong>, no italics for <em>, no margins for <p>, etc. The nice thing about this is that you get to style everything from the ground up. The bad thing about this is that you have to style everything from the ground up. I was excited at first, but I became increasingly frustrated with having to write quite a bit of CSS just to get elements to behave even remotely like they normally do. I understand the purpose in doing this, but it is a ton of work just to get the most basic HTML to display with standard behaviors. I eventually realized that a work-around for this would be to develop a "CSS starting point" where there are definitions for elements that just define the basic behavior.

Another downside to Meyer's method is that he simply provides the code. This didn't seem like a downside at all to me until I used Yahoo's implementation, which I will explain shortly. In fact, it never even occurred to me that there could be a better way.

Don't get me wrong. I have a tremendous amount of respect for Eric Meyer and he has done a great job putting together the code for the CSS reset. I only see the ways to improve on it after having used Yahoo's CSS reset. *Segue*

Yahoo's CSS Reset – Yahoo UI Library CSS Reset

First, let me admit my bypasses. I didn't use, or even look at, the Yahoo CSS Reset before trying Eric Meyer's because…well…I'm a Google-guy. If the link had been to the exact same content at Google, I would have not even looked at (okay, that's an exaggeration) Meyer's version. I drink the Google-flavored Kool-Aid with the left hand and the Apple-flavored Kool-Aid with the right. (There, Microsoft zealots. Are you happy? I'm an admitted zealot too, just on the other side.)

I was very impressed initially with the organization and presentation of the Yahoo page. The code was very readable and the instructions were clear and concise. They also provide a cheat sheet (PDF download), an SDK download, and several other tools and examples that I found very helpful and interesting.

Yahoo also provides a hosted file for the CSS reset so you can simply call the include from their server in the head of your HTML. This was a nice feature. One less file to maintain and serve.

Additionally, and this was the biggest selling-point for me, Yahoo provided the "CSS starting point" code that I was looking for to get the elements to their minimal display characteristics and, like the CSS reset, they also provided a hosted file for me to include. After adding two lines of meta code in the head of my HTML file, I had reset the CSS to zero and then styled it to a standard display. Perfect! Just what I was looking for and here it was in an easy to consume, highly supported codebase.

Coming Soon…

Google CSS Library – Google Blueprint CSS Framework

As I was writing about being a Google zealot and wishing that Google had a CSS reset, I decided to search for "google css reset" and, lo and behold, the very first link that Google returned (imagine that!) was for the Google Blueprint CSS Framework, which includes a CSS reset and starting point styling. I should have known that Google would swoop in and save the day. I'll try the Google CSS reset for my next site and report my findings.

EDIT:

I recently tried validating some CSS that I added to a site after using the Yahoo CSS reset. I was sad to find out that it doesn't validate. I think I read somewhere that the Eric Meyer CSS reset doesn't validate either. I decided to punt on this one and just make sure that my personal CSS code that I built on top of the reset code will validate, but then, technically, my whole page doesn't validate since I'm using the CSS reset. I guess that's something I'll have to wrestle with until a better solution comes along.

Recently, while working on the temporary site for Moonfar, I wanted to send the user an email as confirmation that they had signed up for email notifications. Essentially, you define the recipient, the subject line, the body, a few headers, and then call the mail() function while passing those parameters to it. PHP's mail() function does the rest, provided that your host has PHP configured properly.

Let me preface this by saying that I've only tested this on GoDaddy's Linux Deluxe Hosting plan. If you are trying to do this with another web host, you need to make sure that the install of PHP you are using supports the mail() function.

<?php
  $to = 'user@theirdomain.com';
  $subject = 'Your subject line';

  // the message here is HTML, but you could
  // use plain text in the same manner
  // this could also be pulled from a template file
  $message = '
    <html>
    <head>
      <title>Your Title Here</title>
    </head>
    <body>
      <p>Your content here...</p>
    </body>
    </html>';

  // To send HTML mail, the Content-type header must be set
  $headers  = 'MIME-Version: 1.0' . "\r\n";
  $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
  // Additional headers
  // I'm not sure how the To: field in the header functions since it's part
  // of the function call, so I've commented it out here
  //$headers .= 'To: ' . $emailAddr . "\r\n";
  $headers .= 'From: YourName <you@yourdomain.com>' . "\r\n";
  $headers .= 'Cc: ' . "\r\n";
  // if you want to receive a copy
  $headers .= 'Bcc: you@yourdomain.com' . "\r\n";

  // Mail it
  mail($to, $subject, $message, $headers);
?>

It's as easy as that. That said, I read somewhere that there is a 1000 emails per day limit using this method on GoDaddy without paying for outbound emailing services, but I could be mistaken.

I recently attended the WebVisions 2008 conference in Portland, OR. It was my first conference, so I can't speak to the quality with much experience. However, my general opinion was that there was some good, some bad, and some ugly, as one might expect. That said, the good was well worth the experience. Plus, I won the grand prize raffle: Adobe CS3 Premier. Although, as of the date of this post, I have not yet received it.

You can find the podcasts of the presentations and the associated presentation slides with these links:

• WebVisions 2008 Presentation Podcasts
• WebVisions 2008 Presentation Slides

Here is a quick debriefing of my impressions of the presentations and the most important things I learned

Blogging For A Living

Jim Turner

http://www.genuineblog.com/

• Bloggers are social media managers
• Be an evangelist through your blog
• Monitor the net for negative or inaccurate information about your organization and use your blog to rapidly respond and provide an official statement to correct misinformation
• "Control is an illusion. You can't control what is being said. It's already happening. You can't stop employees from spreading information, so push forward with positive blogging." (Paraphrased)

Hacking Social Media

DL Byron

http://texturadesign.com/

http://bikehugger.com/

• DL was a very inspiring individual, but there wasn't much that I was able to draw from the presentation except for providing examples of how small organizations can combine (through mashups, etc.) services for cheap, rich aggregate tools.

Design Is In The Details

Dan Rubin, Bryan Veloso

http://design.isinthedetails.com/

http://bryanveloso.com/

http://superfluousbanter.org/

• Great presentation. The best of the conference.
• Let your layout breathe
  • Allow space between elements
  • You don't need borders on elements if you have 2 elements with a different colored space in between, such as two white boxes with a gap between them on a black background
• Multiples and factors of a common measurement
  • If your main text font is 12px, then 6, 12, 18, 24, etc. for margins and other sizes are a good way to keep common feel through your site
• Subtle effects
  • Use effects subtly, such as in drop shadows
  • Add noise for a subtle texture on a background to add a real-world feel
• To get varying shades of the same color, pick your base hue, then add layers of black or white using soft light blending mode and transparencies to achieve shades and tints

Drupal

Sean Larkin

http://www.opensourcery.com/

• This presentation sucked was less of a "howto" and more of a "this is how we make money" presentation. I wanted to hear more about how to use Drupal.

Faster, Cheaper, Better

David Verba

http://www.adaptivepath.com/aboutus/david.php

• This was essentially a review of how it's cheaper and faster to make web apps now, which is obvious and doesn't require a conference session to make that point.
• Saying "…and finally…" 6 times is 5 times too many.

CSS Transformation

Christopher Schmidtt

http://christopherschmitt.com/

• Your experience limits your designs
• Your browser limits your designs
• Start with semantic markup
• CSS RESET: the concept of offsetting the internal stylesheet that browsers have that auto-style your elements for you
  • http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
  • http://developer.yahoo.com/yui/reset/

Ruby On Rails

Jim Meyer

http://www.cucinamedia.com/

http://blog.geekdaily.org/

• Very pro-Agile Dev and pro-TDD (Test Driven Development)
• For any development, to improve scalability and performance:
  • Stay out of the DB as much as possible
  • Stay out of the dynamic code as much as possible
  • Push info (code?) as close to the user as possible

Web Site Optimization

Kimberly Blessing

http://www.kimberlyblessing.com/

• Analyze, test, and tune
• Validate
  • declare a valid DOCTYPE to ensure that the browser will stay in STANDARDS MODE, otherwise it will go into QUIRKS MODE which will cause slower rendering
  • Validate (X)HTML/CSS
• Simplify
  • Imagemaps are good ideas (I personally disagree with this)
  • Use CSS sprites: very cool idea – http://www.alistapart.com/articles/sprites
• Concatenate
  • Use only 1 CSS file and 1 JS file; you can always merge at the build cycle if you prefer to keep them separate for development organization
• IE-Proof CSS
  • Code against the FOUC (Flash Of Unstyled Content)
  • Don't use @import, use link
• Call Javascript As Needed
  • Define JS near where it is needed
• Save Scripts For Last
  • If it isn't needed on load, define it at the end of the page to prevent parsing until the page has displayed
• If you can't GZip, then strip
  • Get rid of whitespace and comments, convert spaces to tabs (if you want to save spacing) in build phase

I know there are a lot of widgets and plugins for WordPress out there for adding a Digg badge to posts (I know, because I tried half a dozen or so of them) but I didn't find any that worked consistently and provided the functionality I wanted. After researching the Digg Tools API and a few other examples online, I've composed this block of code for generating Digg badges.

To add a Digg badge to your WordPress posts or pages, simply add the following code block immediately before or after the PHP block that contains the_content(). For posts, you would want to modify the Main Index Template, Single Post, and Archives theme files. For pages, you simply need to modify the Page Template theme file. Here's the code:

<div class="diggLink">
    <script type="text/javascript">
        digg_url = '<?php the_permalink() ?>';
        digg_title = '<?php the_title(); ?>';
        //digg_topic = 'TOPIC'; // replace TOPIC
        /*
        Use the output buffer to capture the text
        output from the_ID() rather than having
        it rendered to the page.
        */
        digg_bodytext = '<?php
            ob_start();
            the_ID();
            $postID = ob_get_contents();
            ob_end_clean();
            /*
            Get the body of the post, remove HTML,
            remove carriage returns and line feeds,
            escape 's, return only the first 350 char.
            */
            $postObj = get_post($postID, OBJECT);
            $body = strip_tags($postObj->post_content);
            $body = str_replace(chr(10), '', $body);
            $body = str_replace(chr(13), '', $body);
            $body = addslashes($body);
            echo substr($body, 0, 350);
        ?>';
    </script>
    <script src="http://digg.com/tools/diggthis.js"
        type="text/javascript"></script>
</div>

I've also added a class to the wrapping DIV and added it to the stylesheet for my theme to style the positioning of the Digg badge. I place the above code right before the the_content() block and this CSS class is what positions my Digg badge to the right of my posts.

.diggLink
{
    float: right;
    margin-bottom: 4px;
    margin-left: 4px;
}

If you'd like to set your posts to all submit to one particular topic, you can uncomment the line that refers to digg_topic in the code block and then change TOPIC to the topic you'd like to use. You can find the list of topics on the Digg Tools API page.

If you have any questions, feel free to comment and ask me. By the way, this same code block is currently in use at Pac Ten Review.

I can't tell you how many times, both personally and professionally, I've come across web sites that have out of date copyright dates. A living, breathing, up to date site should have a current copyright date somewhere on the page, usually in the footer. Changing the year is easy enough if it's static, but it's one of those things you have to remember to do (and you have to know how to do it). If your code isn't modularized (that is, if every page has the copyright date hard coded), then having to change these dates each year could be a very laborious process, even if you're savvy enough to use a global find and replace.

Why should you even have to make this update by hand? The web page should know that the copyright year is always the current year. There are a couple of ways to do this, depending on what you have available on your web server.

Concept

The concept behind this technique is very simple. You simple replace the year with a dynamically written number pulled from the supporting language's date functions. Here is the static code that we will start with:

<p>Copyright &amp;#169;2007 Your Web Site</p>

By the way, © is the © symbol.

Client-side Code Method

If you don't have any access to a dynamic server-side technology such as PHP, Java, Python, Perl, .NET, or some other programming language, then you will need to use Javascript. Here's an example of generating the year dynamically with client-side Javascript:

<p>Copyright &amp;#169;
<script type="text/javascript">
    var date = new Date();
    document.write(date.getFullYear());
</script>
Your Web Site</p>

The downside to this method is that, since the date is rendered by the browser, it is dependent upon the client's environment. If the user has Javascript disabled or if there is just some other unpredictable variable in the client's browser then the copyright year will be completely missing rather than just a year or two out of date. The other problem that arises is this: if the client's computer has the year set to 1963, then the copyright date on the web page will appear as 1963.

Server-side Code Method

If you have the ability to utilize a server-side technology, such as PHP, then you should. This method is preferred because you control the behavior and the date is written to the client as plain text. That is, it is rendered on the server and then streamed to the client as plain text. Here's an example in PHP of server-side dynamic copyright year text:

<p>Copyright &amp;#169;<?php echo date('Y'); ?> Your Web Site</p>

I could list out a dozen examples of how to dynamically generate the year, but I would probably end up leaving out the specific language that you are looking for. You can use this technique with any language. Yes, I know this isn't a ground-breaking technique, it's just printing the year, but I've seen enough examples of people with out of date copyright years that I thought this was a worthwhile tip to share. Good luck.