chris barr

Photo/Dev/Design

Mix ’09 Session Videos

I just got back from the Mix ’09 conference in Las Vegas, and it was so much better than I expected! For being a Microsoft sponsored conference mostly focusing on .NET and other MS technologies, there was about 50% Mac users there and most of these people were designers. It was a really nice mix (haha?) of designers and developers. I’ve got some photos from my trip up here on Flickr.

I think one of the best things they do is put up ALL the session videos online for free! There’s some really valuable information in these!
http://videos.visitmix.com/MIX09 (also you can view past years MIX sessions at http://videos.visitmix.com )

Here’s some highlights I’m going to recommend:

  • Web Form Design – absolutely one of the best sessions I attended. Watch this video! He talks about why forms suck and what we as designers can do to help the process along. Very very well done and extremely informative. As soon as this session was over I went and bought the speakers book.
  • The Way of the Whiteboard: Persuading with Pictures – Anotehr great session, but not necessarily directly related to web design. It’s on how to get ideas out of your head and communicate them properly to people via a whiteboard of napkin.
  • Measuring Social Media Marketing – If you or your company does any kind of social media marketing, this is a great one.

The following sessions I did not attend, but they seem great:

And finally, for any other ASP.NET or Visual Studio users, These are somre great previews of what’s coming soon!

MIXed up in Las Vegas

Once a year my company, AppRiver, allows me to attend one work related conference and my for first year working here I’ll be attending MIX ‘09 in Las Vegas!  Until recently, this wasn’t even a conference I’ve heard of, so don’t worry if you haven’t heard of it before either.  Mix is an annual conference for web designers and developers with a heavy focus on Microsoft technologies (also sponsored by Microsoft).

So, I’m headed out to Vegas on Monday the 16th and expect to learn a lot and have a blast doing so for about a week.  I’m scheduled for a few different sessions that I’m excited about attending, and there’s tons and tons of sessions to attend. Need I even mention this all takes place in Las Vegas?  I took a trip out there about 3 years ago with my dad and had a blast, so I fully expect to have a great time when I’m not doing web related stuff.  I know the grand canyon and the Hoover Dam are fairly close, and it would just be a dream come true to see either one of these (or both!).

I’ll hopefully be fully armed with my laptop and camera where ever I go, and a goal I’m going to try and set for myself is to do a daily photo-blog of what’s going on at the conference and anything else I can take pictures of.  It’s my first conference and I’m usually pretty trigger happy, so expect lots of photos.

More info about Mix here: http://2009.visitmix.com

Finding Unused CSS Rules

The other day I ran across a very useful article about the $$ selector in Firebug for Javascript and how to use it to loop through your stylesheets to find unused CSS styles. Very cool. The original code snippet would output everything to the firebug console, which I found to be useless on larger sites because I would hit Firebug’s limit too often.

I modified it a bit to output the CSS to the actual site instead inside a styled element. So to use this on your own site, just copy and paste the code below into Firebug’s console and hit run.

//Create a styled place to output styles to
var output = document.createElement('pre');
output.setAttribute("id","unusedCSSstyles");
output.setAttribute("style","height:95%; overflow:auto; text-align:left; background:#000000; border:2px outset #00CC33; color:#00CC33; opacity:0.9; padding:3px; position:fixed !important; left:5px; top:20px; width:95%; z-index:9998; font-size:12px;");

//create a styled close button
var closeBtn = document.createElement('a');
closeBtn.setAttribute("id","cssCloseBtn");
closeBtn.setAttribute("href","#");
closeBtn.setAttribute("onclick","document.body.removeChild(document.getElementById('unusedCSSstyles')); document.body.removeChild(document.getElementById('cssCloseBtn')); return false;");
closeBtn.setAttribute("style","position:fixed !important; left:2; top:0; z-index:9999; color:red; font-size:16px; padding:3px 20px; background-color:#000000; border:1px solid #FFF;");
closeBtn.innerHTML="close";

//add button and output element to body
document.body.appendChild(closeBtn);
document.body.appendChild(output);

//Find each stylesheet
for(var i = 0; i < document.styleSheets.length; i++) {
//write the filename to output element
output.innerHTML+="<br /><h3>"+document.styleSheets[i].href+"</h3>";
//find CSS rules
  for (var j = 0; j < document.styleSheets[i].cssRules.length; j++) {
    s = document.styleSheets[i].cssRules[j].selectorText;
    //write unused CSS rules to output element
    if ($$(s).length === 0) output.innerHTML+="<strong>["+j+"]</strong> "+s+"<br />";
  }
}

Do note that this has a few limitations:

  • It cannot find stylesheets from another domain or subdomains
  • It cannot find inline styles or the <style> tags anywhere
  • It will not work on sites that use Mootools since it also uses the $$ selector. (this site does, so don’t try it here!)

If you’re really serious about finding what CSS styles you haven’t used on your site, you might want to check out a Firefox plugin called Dust Me Selectors