Ryan Brill - Personal Thoughts and Ponderings

SolutionSet Blog

SolutionSet, the company I contract for, has recently started a company blog. I've recently written my first post over there, detailing the Internet Explorer ID-Class bug. I recommended checking out the article, as well as the entire blog, as there is a lot of in-house talent at SolutionSet. Once more of our developers start writing there, the blog could turn into a very good read...

Controlling Resizable Text Fields in Safari

As many of you likely know, Safari 3 supports resizing text fields. This is great and a welcome improvement to anyone who has suffered with a text field that just isn't big enough. One tip though: you can use max-width, min-width, max-height and min-height to control the maximum / minimum dimensions that Safari will resize the text field to. Useful if resizing a text field too large is breaking your layout.

By the way, Cameron Adams wrote a bookmarklet a while ago that you can use to add this functionality to other browsers.

Multiple Classes in IE

I'm going to explain the use of multiple classes, and where IE6 chokes. When writing CSS, I find that it is often very nice to use multiple classes, so you can have a base CSS class to set up some default styles and then add an additional class to add more meaning. This is a technique I often use, setting up my base module as div.box and then adding additional classes to that base CSS to create new modules. Take this CSS, for instance:

div.box {
	border: 1px solid #e1dfd6;
	margin-bottom: 1em;
}
div.box div.header {
	padding: 6px 30px 0px 10px;
	margin: 0 0 5px 0;
	background: #f2f0dd;
}
div.box.featured {
	background-color: #f5fbea;
}
div.box.featured div.header {
	background-color: #e9f5cE;
}

So, if I have

, the classes for div.box and div.box.featured will be applied to the div, giving it a "featured" style.

div.box

div.box.featured

Working with IE6

IE6, however, has an interesting caveat with multiple classes. IE6 does not make a distinction between the following rules:

div.box.featured {}
div.featured {}

How these rules should work is like this:

div.box.featured applies to

div.featured applies to

However, in IE6, div.box.featured works the same way as div.featured. IE6 doesn't understand the chain of classes within a CSS selector, but rather only reads the last class. So, IE6 reads div.box.featured as div.featured, while Firefox and IE7 will only apply the "featured" styles if the div also has a class of "box". For the most part, this isn't a big problem, as usually when you apply multiple classes, you want them all to apply. Let's look at an example of where this goes wrong. In this example, I have a table with zebra rows, and also want a darker "selected" state if the checkbox is checked.

Table with zebra rows and selected states in Firefox / IE7.

Table with zebra rows and selected states in IE6.

The HTML would look something like this:

<table>
	<tr class="alt selected">
		<td>...</td>
	</tr>
	<tr class="selected">
		<td>...</td>
	</tr>
	<tr class="alt">
		<td>...</td>
	</tr>
	<tr>
		<td>...</td>
	</tr>
	<tr class="alt">
		<td>...</td>
	</tr>
</table>

And this is the CSS:

tr td { background-color: #fff; }
tr.alt td {background-color: #f0f6f9;}
tr.selected td { background-color: #d3edfb; }
tr.alt.selected td { background-color: #b1dff7; }

IE 6 does not understand the difference between td.selected and td.alt.selected, meaning your selected state cannot have zebra rows, using this technique. You would have to create them as separate classes, .selected and .selected_alt, which means you would have to do more computing with you JS or PHP (or other server side language).

Update

I've created a demo of the zebra rows example.

What I've Been Doing

Working

Technology: Approximate percentage of time devoted to it
XML: 10%
XSLT: 35%
HTML: 10%
CSS: 15%
JS: 5%
PHP: 15%
MySQL: 5%
Design: 5%

Playing

Disc golf - season best, 3 under par
Halo 2
Unreal Tournament
Oodles

Reading

Envisioning Information - Edward Tufte
Beautiful Evidence - Edward Tufte
XSLT 2.0 - Michael Kay

Listening

Great Northern - on repeat
Plain White T's - Hey There Delilah
Skillet
Sean Hannity - 3-6 EST

Watching

Spiderman 3 - 3/5
Shooter - 4/5
Deja Vu - 5/5
The Guardian 4.5/5

Why I've Not Been Blogging Lately

Infinity is Looking for a Contract Developer

Infinity is looking for a contract developer to handle some overflow work that we have every once in a while. The work would be primarily PHP and MySQL, along with XHTML and CSS. Since it's just to handle overflow work, this obviously isn't a full time position - we are just looking for a contractor to hire on a per-project basis when needed.

If interested, please get in touch with me at ryan [at] infinitywebdesign.com. Include your skillset and links to projects you've worked on. If you have a resume, please send that as well.

San Francisco Again

My brother and I will be heading to San Francisco again on Sunday for business. We'll be out there for the whole week (until next Sunday), meaning we'll have a free Saturday to bum around SF. Seems like everybody has been taking a trip out there lately. Anyway, I'm looking forward to it...

A Better Blogroll

I decided the other day that it was time to update my "blogroll", or my Friends and Colleagues links. I had two ideas that I wanted to implement, and since I just finished a big project, I decided to take a bit of time to work on some of the things I've been wanting to do for a long time.

Favicons

I wanted to include the people's favicons next to their links to make them stand out from each other a bit more than just a list of links seems to do. Plus, it just looks so darned sexy...

I thought about using PHP to dynamically pull the icons say, once a week, but ended up deciding on just manually creating .gif images of each icon. I didn't envision a big problem with this, as the icons won't be changing often enough to cause too much trouble.

Latest Entries

I also wanted to pull in the last 3 blog entries for the people I was linking to. To do this, I simply set up a database with all the info for each friend, including a link to their RSS feed. I then parse the RSS feeds with PHP (thanks to the XML_Feed_Parser API from pear.php.net). I'm using blo.gs to track when the sites have been updated, to keep down on the number of times I need to ping the RSS feeds. This way, I only need to ping them if blo.gs tells me there is new content. Since many of the sites ping blo.gs for their sideblogs/blogmarks/links, if blo.gs indicates that the sites have been updated, I compare their last post title to the version I have stored. If they are the same, I ignore them, as I obviously don't want to update the time. If not, I update the entry titles, links and time of update that I am storing.

Wrapping up

Overall, I'm extremely happy with the results. I think it is much better than the standard list of links that most people are using. I think the visual recognition that goes along with the favicons will go a long way in making the list more meaningful. Anyway, you may need to reload the CSS and JS for it to work right, so please do that and then let me know what you think. I'm rather proud of it, myself...

Where was I?

Seems Joshua Lane has tagged me with a meme. Remind me to get back at him someday...

Where was I one year ago?

One year ago, I was temporarily living in Minneapolis. I was still doing the same work that I am now - freelance web development and design for my company Infinity. I got to work on some extremely exciting projects last year, with some really cool people. I was also spending a lot of time with the GF, generally enjoying life.

Where was I five years ago?

Five years ago, I was still in high school, doing some web design work on the side. Learning the ropes, designing sites for some local area businesses. The work was nothing to be proud of at this point, but it was a great learning experience and it got me where I am today. It's really been a passion all along, since I picked up the book "Teach Yourself to Create Web Pages", which basically taught how to use Netscape Composer (!!) to create the sites. It was the first book I ever read on web development, and in two days, I read all 345 pages.

Where was I ten years ago?

10 years?! That was almost half my life ago. I was probably playing in a sandbox somewhere, for crying out loud. Ok, maybe not that, but probably just generally wasting my summer away the way kids do.

Passing it off

Ok, now let's see what Dan, Jeff and Faruk were up to...

Apple Bootcamp

I must say that Apple floored me with their announcement of Bootcamp. I was in the market for a new computer at the end of last year, and seriously contemplated switching to a Mac. In the end, however, I decided to stick with a PC, as all my software is PC based, and switching to a Mac would be extremely expensive for me as I'd need to buy not only the new computer, but new software as well. And with the software being Photoshop, Studio 8, etc. we're talking a good deal of money here. However, Bootcamp would open the possibility of switching slowly, using OS X when I can, and Windows when I have to.

I really think this was an excellent move for Apple. I know for me, as a long time Windows user, I immediately wanted to switch. My next computer will very likely be a Mac now, and it is unlikely it would have been before this (for the reasons stated above).

There are still a few issues I'm a bit worried about (like learning a whole new OS), but I'm really excited about this. Maybe come the end of the year I'll decide I need another tax deduction. ;)

CSS Vertical Centering Brings Traffic - Apparently

So I saw this story posted to Digg yesterday: (CSS) At last! Proper vertical centering without tables. A bit aghast by the code, I quickly posted this comment with a link to a demo I whipped up 3+ years ago, while learning CSS (hard to believe it's been that long!). I think the worst part is the poster to Digg actually had the nerve to say "I developed this technique". Umm... right.

So anyway, this post isn't actually about the technique itself, which if you view the source code, you'll see is extremely simple and is nothing new at all. So what is it about? Traffic.

That page has essentially been online for 3 years (I tweaked it slightly before posting it to Digg, to make it look a bit better and to use em sizing, so it would resize better), and in the last 24 hours, it has gotten 2,115+ page views. From the comment I left on Digg, people have been bookmarking it in del.icio.us. At the time of this post, it was in the top 10 on the del.icio.us/popular page, with 287 people having saved it. What does this all mean? I have no idea, but find it very interesting for some reason - I think it's because the page has literally been around for 3 years.

Here's what Mint looks like right now, not even 24 hours later:

SXSW Recap

South by Southwest – what a ride. As I said in my last post, I was hoping to write a bit each day about what went on, but I was so busy I just couldn't find the time. So, I'll write one big mashup of the events during the conference. I'm not going to talk much about the panels themselves, but rather the other events of the conference, as to me, that is what SXSW is really all about.

Saturday

I wrote about Saturday's panels already, so I'll just pick up from there. After the panels, I went out for dinner with some of the guys from Bright Corner and a few other people. Next, I went to the frog design opening party, which I got to toward the end, but still had a chance to meet a few people such as Paul Nixon, Khoi Vihn, Ryan Sims, Brad Smith, Andy Budd and others. I had a great time talking with people and meeting a few for the first time. Next, I went to the South by Northwest party for a little while. There were a few people there that I wanted to meet, but ended up leaving early, as it was extremely busy and seriously the party was too loud to talk with anyone.

Sunday

So on Sunday, I met Shaun Inman in the hall during the panels. I'd like to say, he really is The Wolf - very smart and very talented. I went out for lunch with Shaun, Jeff Croft, Rob Weychert, Ryan Carson and a few others. I think my favorite panel for the day was "Holistic Web Design" by Shaun, Jason, Garret Dimon, and Eris Stassi. I really enjoyed the panels that focused a bit more on design, and this panel was no exception. At night, I went to the Web Awards show, and would like to congratulate Bryan Veloso on his award for best blog design. Well done! Next, I went to the Web Awards after party, where I hung out with Shaun, Rob, Jason Santa Maria, Paul, Greg Storey, Eris, Dan Mall, Joshua Lane and Jeff.

Monday

Monday's panels were great. I really enjoyed the "Should Your Blog Have a Business" panel, which had both Inman and Zeldman on it. I also really enjoyed the "Design Eye for the List Guy" panel, by Paul, Keith, Cameron, and Ryan. They did an excellent job with it, redesigning craigslist. After that panel, a bunch of us went out for dinner and then I grabbed a cab with Keith Robinson to head to bowling. Bowling, I would have to say, was the highlight of the trip. I met up with Dan Rubin (keep blogging now, Dan!) for the first time, and spent a good bit of time talking to him. It was nice to meet him and I enjoyed our chat. I bowled one of the better games of my life, and ended up getting the most strikes in 10 frames (5) and getting the highest 10 frame score (179) - sorry to take your money away from you, Steve. ;) Unfortunately my team was eliminated in the second round, but still, I think everyone there had a very good time. Thanks to Bryan Veloso for putting that on for us. Hopefully next year's will be bigger and even better!

Tuesday

Didn't do much today – wasn't too interested in most of the panels, so I got to the conference center late and only attended one panel ("The Next Generation of Web Apps" - which ended up being very good) and said some goodbyes. The flight home was good, and while the conference was great, it's nice to be back.

Recap

To me, this conference was definitely more about meeting people than about sitting through panel after panel. I plan to keep in touch a bit better with many of the people I met, and look forward to going back to South by Southwest next year. If you missed it, I'd definitely encourage you to try your best to make it next year – you won't regret it. To everyone I met and hung out with at SXSW, thanks for making it a great trip – we'll keep in touch...

Lastly, my photos from the trip can be found on Flickr. Enjoy!

The End of SXSW

So I'm just writing this quick update from the airport while I wait for my flight. SXSW was an incredible time - I'm already looking forward to coming back next year. I meant to write a recap at the end of each day, but found that I wasn't using my laptop at the panels, and since the hotel was 10 blocks away (closest hotel with availability when I booked in January) I decided not to carry it around with me each day. I was getting back to the hotel around 1 or 2 am, so crashed right away rather than staying up to write about the day. I'll write a recap of the entire thing soon and upload my photos to flickr.

SXSW Day 1

SXSW has been great so far. Got in to Austin last night, checked into the hotel, picked up my badge, and just hung out for a bit. The real fun began today...

Started out the morning with the "Traditional Design and New Technology" panel. The overall panel was good, but I felt that the discussion had already been had. Some good points were still made, but most of it felt like old information. Then next panel, "How to Be a Web Design Superhero", by Andy Clarke and Andy Budd was fabulous. Much more energy than the "Traditional Design and New Technology" panel and Malarkey and Budd were great to listen too. That panel got over at 12:30, so we were ready for some lunch. I met up with Andy Clarke (at long last) after his panel, and along with Molly Holzschlag and a few others went and got some lunch. It was nice to finally meet Andy and Molly and I enjoyed the time we had to chat over lunch.

Jumped back to the conference center and caught the end of the opening remarks by Jason Fried and Jim Coudal. Since I got there late, I was in an overflow area where they were just displaying a video feed. Spotted Jeffery Zeldman after the opening remarks and went over and introduced myself. He was very nice and it was great to meet the man who shaped the way so many people think about the web. He even invited me to write another article for A List Apart, so we'll see what I can do about that. :)

Right now, I'm in the "How to Bluff Your Way in DOM Scripting" panel. It's fairly basic so far, but by the title of the panel, one would expect that.

Next up, I'm planning to go to the "Starting Small: Web Business for the Rest of Us" panel and that will be the last panel for today. Later, I hope to hit a couple of the after parties such as the frog design SXSW Opening Party and South by Northwest. Been meeting many great people, and hope to get a chance to chat more with many of them tonight at those parties.

So yeah, having a great time so far. I'll keep you updated...

SXSW Schedule

Ok, so here is my tentative schedule for SXSW. I realize that there is some overlap, so I'll have to decide which panels I most want to go to. Also, I may not be at all of them - I mostly want this list for myself so I know what's next on my schedule. If you're at any of the same panels, be sure to stop by and say hello! I leave for SXSW in just 2 days and I'm getting super excited!

Friday, March 10th

Events: 6:00 pm - Friday Night Mix

Saturday, March 11th

Panels: 10:00 am - Traditional Design and New Technology; 11:30 am - How to Be a Web Design Superhero; 2:00 pm - Jim Coudal / Jason Fried Opening Remarks; 3:30 pm - How to Bluff Your Way in DOM Scripting; 5:00 pm - Starting Small: Web Business for the Rest of Us

Events: 8:00 pm - Frog Design Opening Party; 10:30 pm - South by Northwest

Sunday, March 12th

Panels: 10:00 am - Design and Social Responsibility; 10:00 am - What's Hot in Web Applications; 11:30 am - Tagging 2.0; 2:00 pm - Demystifying the Mobile Web; 3:30 pm - Web 2.1: Making Web 2.0 Accessible; 5:00 pm - Holistic Web Design: Finding the Creative Balance in Multi- Disciplined Teams

Events: 6:00 pm - SXSW Web Awards Ceremony

Monday, March 13th

Panels: 10:00 am - CSS Problem Solving; 11:30 am - Does Your Blog Have a Business?; 2:00 pm - Craig Newmark Keynote Interview; 3:30 pm - Selling Big Ideas to Big Clients; 3:30 pm - WTF: WaSP Task Force Panel: Getting the Job Done Right; 5:00 pm - Design Eye for the Idea Guy

Events: 6:30 pm - Blogger Party; 8:00 pm - Avalonstar Bowling Tournament

Tuesday, March 14th

Panels: 10:00 am - Behind the Scenes: Developing OS X and Longhorn; 11:30 am - Designing the Next Generation of Web Apps