Archive for June, 2008
|My Time at NC State
Monday, June 30th, 2008
About 3 years ago a fairly young department at NC State hired a 23 year old kid from Massachusetts who constantly made claims that CSS was the future of web development. I was that kid; And I condemned them all for their table-based web sites, then promptly converted them to CSS.
NC State provided me with great professional development opportunities, conferences, training materials, R&D time, and an environment where there is a ton a room for personal growth. While I’m sure that the casual demeanor of the office will go unmatched, sometimes you have to look at yourself, where you are and realize that it’s time to move on. It’s certainly no reflection on the University, the department, or the people. I love them all and will have plenty of fond memories of my time there. It’s all great stuff.
Working on countless projects just because I felt like learning something new was a great experience. And a fantastic way to built a skill set.
I’m sure that for years to come I’ll be telling stories about the office antics, arguments, banter and hoisting a brew every Thursday after work just to vent about the week. Those nights at Sammy’s were something great.
But, as sad as it is to end an epic era, when it’s time to move on, it’s time to move on. Over the next few weeks I’ll be making the move out to Los Angeles to start work at USC Web Services. I just felt that the opportunity was too good to pass up. While I’m there, I’m sure my thoughts will stray every once in a while back to that office I first stepped into back in 2005 and I might even crack a smile 
).
So long everyone, it’s been great and I appreciate everything you’ve done. I can honestly say that I don’t know where I would be if it wasn’t for the folks at NC State DELTA
-Tim
Tags: employment, ncstate, usc
Posted in Life | 8 Comments »
Your Body and You
Wednesday, June 25th, 2008
About couple weeks ago I wrote a post called “Styling your body” which attempted to break the convention of using a “container” or “wrap” div when building a new site. I showed how to cut out a (usually) unnecessary div element and clean up your code. In this post I hope to show you how to cut down on your HTML even more by integrating a body class.
First off, let’s look at the value of adding a body ID.
The Body ID
The body ID of this site is “www-csskarma-com” (you can view source and check that out if you’d like). I picked up that method from a talk Eric Meyer gave at An Event Apart – Boston in 2007. He mentioned that to help users create custom style sheets, you can add a body ID to your site, so the user could add something like:
body#www-csskarma-com{
font-size:5em;
}To customize their experience with your site. This can help with accessibility and user experience. I know I use custom style sheets from time to time, so it does help from a user standpoint. You can also see this same body ID technique on Meyerweb & SimpleBits (SimpleBits actually uses a wrapper div with an ID of “simplebits”, but it’s the same principle).
For some reason, using this hasn’t really taken off yet, but I think it’s useful… so I always add it into any site I build.
There are a fair amount of sites using the body ID to tag individual pages, which essentially is the same thing, but I like to leave the ID for the site URL (www–csskarma–com).
The Body Class
Using a class on the body element is extremely helpful in cutting down on the number of classes used on a page, especially with a large site that has many different styles. And (IMO) the benefit of keeping clean, semantic HTML far outweighs the extra long CSS rules you have to use to reference an individual element.
As an Example: When building a site you may want to use an unordered list in the main content area of your homepage, but also in the main content area of your contact page. And to get them styled differently you might do something like this for the contact page:
HTML:
<ul class="contact-page-list">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>CSS:
ul.contact-page-list{
color:red;
}But, if you use a body class your markup would look like this:
HTML:
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>CSS:
body.contact #content-main ul{
color:red;
}I know this may see like just taking a class from one element and adding it to another, but the body class can be applied to any element on the page, whereas the UL class only applies to itself and anything inside of it. Using a body class will ultimately cut down on the total number of characters in your CSS and speed up your load time (ever so slightly, but every little bit counts).
Generating the body class with PHP
When managing a large (or any) web site, you don’t want to have to go into every single body element and put in a different class. So, to help with that, I created this PHP function:
<?php
//defining some global variables, change the SITEURL to your site
define(SITEID, "www-csskarma-com")
define(SITEURL, "http://www.csskarma.com/");
define(DOMAIN, $_SERVER['HTTP_HOST']);
define(CURRENTURL, "http://" . DOMAIN . $_SERVER['REQUEST_URI']);
function myDir(){
//removing index.php from the URL so it matches the one we set
$clean_siteURL = str_replace("index.php", "", CURRENTURL);
if(trim(SITEURL) == trim($clean_siteURL)){
return "home";
} else {
return end(explode('/', dirname(!empty($_SERVER['REQUEST_URI']) ?
$_SERVER['REQUEST_URI'] : !empty($_SERVER['PHP_SELF']) ?
$_SERVER['PHP_SELF'] : str_replace('\\','/',__FILE__))));
}
}
//saving the function output to a variable
$dir = myDir();
?>Then in your body you’d to this:
<body id="<?php echo SITEID; ?>" class="<?php echo $dir; ?>">So, what’s happening here?
We set global variables so we can use them in any function we create – not just this one. You could even make the clean URL a global variable if you wanted; I just chose not to in this example. It’s important that you update the SITEURL variable to your web site URL. I also set the SITEID to www-csskarma-com in the body so it will generate both attribute values (and I can re-use the function/variables with minimal editing).
The function is checking to see if the current URL matches what you set as the home page. If it does, then it will return a value of “home.” If not, it will return whatever directory your in. For example, if the current page is http://www.csskarma.com/contact, it will return “contact.” Your output will look like this:
<body id="www-csskarma-com" class="contact">Closing it out
In a nutshell, I got into this habit by managing a fairly large department web site and it carried over into all the sites I do. I really like keeping my HTML as clean and as slimmed down as possible, so this method works well for me. And besides that… who decided that a class wasn’t presentational markup? I’m not condemning it at all, just some food for thought.
Special thanks to Akira_x from TSN for helping me clean up the function.
Tags: CSS, php, tips
Posted in Web Development | 4 Comments »
Quick iPhone Media Detection
Tuesday, June 17th, 2008
I finally got around to reading David Shea’s post on MediaTyping today and as I was going through it, I asked myself if all the PHP he was using was really necessary. It sure wasn’t for what I wanted to do. I just wanted to detect an iPhone or iPod to test out some interfaces.
I did some digging around after that and came across a short post on iPhoneAppr about how to auto-detect a browser based on the user agent (what is essentially the browser).
The HTTP User Agent
When you visit a web page, your user agent changes based on the media you’re using. So, right now, if you’re using Firefox 2 your user agent string looks something like this:
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.14)
Gecko/20080404 Firefox/2.0.0.14and if you’re on an iPhone it will look something like this:
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like
Gecko) Version/3.0 Mobile/4A102 Safari/419.3As you can see, the user agent string has some key difference. The iPhone agent actually says "iPhone" in it. With this in mind we can use a neat little function built into PHP 5 called stripos to search the user agent and return some code (like code to send someone to a mobile version of a web site).
Let’s just get into it shall we? Here’s the PHP:
<?php
//setting the variables
ipod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iphone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
//detecting device
if ($ipod == true || $iphone == true){
echo "iPhone or iPod";
} else {
echo "Screen";
}
?>Stripos is a function that takes 2 arguments. The first is what you want to search (the haystack) and the second is what you want to search for (the needle). If the needle is found in the haystack it will return "true", and if not, it will return false. An important thing to note about stripos is that it’s case insensitive[edit], so if you have some initial trouble, check your spacing and maybe try trim().
Trouble I had
In the PHP manual it says to use === when checking the value (which is for an exact match, true=true), but for some reason that didn’t work for me so I used == (match, but not exact so true=true & true=1 for boolean values). It’s usually just a spacing issue, but I’m not real sure this time. Feel free to tell me I’m wrong.
I like this, it’s pretty easy, light, and useful if you just want an iPhone/iPod interface.
Tags: firefox, iphone, mobile, php
Posted in Browsers, Web Development | 5 Comments »
Styling Your Body
Monday, June 2nd, 2008
Diving into the depths of CSS involves much more than just mastering selectors, properties and semantic (X)HTML, it has a lot to do with knowing when you need extra elements (span, div, etc). What do I mean?
Since CSS layouts have exploded into the mainstream of web design there have been few designer/developer types who can say they haven’t seen id="wrap" or id="container"; in fact, most of have been using it for years and it’s a bit of a standard now. Meanwhile we all seem to forget that there’s a lovely element we rarely use… html, the proud parent of body. All parents like to see their children succeed, but html has been depressed for some time now. Why? Because it’s child isn’t being put in in the 4th quarter, it’s being taken out in the 8th inning, not being used to it’s fullest potential because of this smug little punk on the block called "container" (or "wrap", for short).
No one forgets that body and html are there, they just forget they’re a stylable elements, everything can be manipulated with CSS, (remember?). So rather than doing something like this:
#container{
width:60em;
margin:0 auto;
}Try filling out your body like this:
body{
text-align:left;
width:60em;
margin:0 auto;
background:#fff;
}And then style that proud parent html (at the top of the style sheet)
html{
background:#ccc;
text-align:center;
}There you go, you cut just down on an extra div you didn’t need. This technique will work in 95% of the web sites out there. The only case it wouldn’t fly is if you need to put content spanning the whole top of the browser window (with a center aligned page). With 95% of page load time happening on the front end, every character you can shave off counts. Since there’s very little semantic benefit to a having html body div#wrap, it’s usually an easy choice to cut out.
Not only is it an easy choice the drop, but it’s a seemless integration. You essentially move all the layout properties up a level (move #wrap to body and body to html). There’s usually little to no change for the user and few things to fix.
Tags: CSS, design, tips
Posted in Web Development, Web Standards | 21 Comments »
