One of the often-touted new features of VS 2008 is the improved CSS support.

I like having intellisense for CSS, sure, but I dont’ want to have a warning for classes that don’t exist…. like this:

That green squiggly indicates a compiler warning.  It can’t find the CSS class, (which is referenced in the Master Page). 

But there are other reasons why you might want to define a class without defining an associated style.  You might be using it to distinctly select elements from the DOM using javascript. 

The ever-so-awesome prototype framework introduced this syntax:

$$(‘.info’)

which would select all of the elements with a class name of “info” for you to work with.

Just about every other javascript library out there now supports this syntax (or a similar one).

If this bugs you, you can turn it off by checking this box (in Tools -> Options) :

You may not want to do this, though…  it could potentially save you time if you’re looking for a rendering bug.

Another part of VS 2008 that I don’t really care about is this CSS designer.  I can’t imagine anyone who would actually use this.

I mean, come on… look at it!

I guess if you don’t know CSS very well, you might want some options.  But that form is more confusing to me than border-top: solid 1px #999;.

(and one could argue, if you don’t know CSS, should you be defining styles at all?)

I really applaud Microsoft’s attempt to bring a better CSS development experience to the masses, but I think they missed the mark on this one.

Houston Tech Fest 2007 was yesterday and it was an amazing success.  Over 600 people were present and I was able to see a lot of old friends and meet some new & interesting people.

I got to chill out with Brad Abrams and a few other folks from Microsoft, and it was great to meet Scott Bateman (fellow Houston blogger and advocate of Continuous Integration).  His talk was most excellent, he was very informative and it showed that he not only understood the concepts, but he was able to explain it all in a way that (I thought) was easily grasped by the audience.

Some of the other speakers included Mike Azocar, John Cook, Tim Rayburn (sorry I missed your talk again Tim!), and David Walker.

Funny thing about Tim’s talk.  I was in the room next door listening to David Walker talk about SOA and WCF, and we could hear Tim through the wall partition.  At one point I heard Tim say, “If you can’t hear me in the back, please shout out and let me know.”  I felt like shouting from our room .

I had two sessions, Advanced CSS & Javascript and ORM with NHibernate.  In the first session, I had a full room (over 100 people!) and the audience was very engaging.  It’s great to have an audience that has so many questions and comments on what you are saying.  It becomes more of a dialog, which I think makes the content so much more valuable for everyone. 

Sometime in the midway point of the talk the projector just turned off.  It’s hard to give a talk on CSS without some visuals, so I continued typing and said “Imagine if you wil…” to a room full of laughter.  About that time the projector turned on again.  I didn’t find out until later, but my friend Wes had sat on the cord and unplugged it, then silently plugged it back in.  Funny how a room full of geeks and nobody thought to check the plug when it turned off.  Ah well.

At the end of the talk I had a couple people come up to shake my hand and a little 4–year old girl came up, touched my arm, then ran away giggling.  (Don’t ask me…).  I really enjoy giving this talk and I would like to branch outside of Houston and start giving it elsewhere around Texas (and the U.S.).

My second session was on NHibernate and it was more cozy, with only 15 people or so.  I think NHibernate is a lot harder to make interesting for an intro class because it is a radically different way of developing applications that most people are exposed to.  There is so much material to cover and only a short amount of time, so I tried to focus on the code and keep the examples short and simple.  I think it was effective, though I’d like to branch off this talk and start giving more advanced lectures on NHibernate.

Thanks to all who came to the event (especially my sessions!).  I hope you all had as much fun as I did.

The files from my presentations can be downloaded here:

File Attachment: AdvancedCSSAndJavascript.zip (1161 KB)

File Attachment: nhibernate.zip (4001 KB)

Also, a lot of people were interested in the tools I was using during my demos.  My favorite text editor is E, which you can get at http://www.e-texteditor.com.  My zooming tool that I use is called Zoomit.  My launching utility is called Launchy and it saves me so much time everyday.  I use ReSharper for Visual Studio nirvana (seriously, get this tool).

Some links I mentioned at the talks:

http://www.csszengarden.com

http://www.exploding-boy.com

http://www.mochikit.com

http://www.prototypejs.org

And finally, my favorite CSS book that I keep recommending to everyone:  CSS Mastery.

I’ve gotten a number of requests for this, so I’ve decided to extend the deadline for the dasBlog Theme Contest until July 22^nd, 2007.  That gives 2 full weekends before the themes are due.

As a reminder, there is a $100 shiny Amazon gift card with your name on it if you can submit a slick-looking theme that impresses us more than the rest.  So far the response has been lower than expected, which means your chances of winning are better!

Creating a theme is easy.  It takes about 2 hours to get a fully working theme when you get used to the macros and the page layout, and maybe a few more to make sure that the site looks good in all major browsers.

I’ve also received a number of similar questions, so I’ll answer them here:

The rules for the contest state ‘no licensed material’ — does that mean I can’t use images under GPL, BSD, or Creative Commons?

No.  I wrote that more as a CYA requirement.  Basically as long as there are no restrictions in distributing the artifacts along with dasBlog we’re OK with it.  Just be sure to ask permission where warranted and always give credit.

I love the ________ theme from WordPress|MovableType|blogger|Subtext.  Can I just port that?

Absolutely!  As long as you follow the rule above, we’d love to see some familiar professional themes on dasBlog.

I don’t have a .NET environment to test out dasBlog… can I still participate?

I will help out as much as I can.  If you can provide me with a solid HTML template with all of the required pieces in place, I will try to help out getting it on dasBlog.

 

Any other questions?

 Introducing my submission for the dasBlog Theme Contest.  (Even though I can't win, I thought it would be fun to submit an entry)

The theme is called Lizard Lounge.  This theme was inspired by the lighbox2 home page.

I'd love to hear what you think!  Let me know in the comments!

You can download the theme here:
File Attachment: LizardLounge.zip (43 KB)

Just unzip it into your themes directory and let me know if you have any issues.

After talking to developers for a few days about basic HTML and ASP.NET topics, I find that I always focus on the Label control.

More specifically, I’m talking about the <label> tag in HTML.  What does this tag do?  Why should we care, when we can just write the text before an input control on the page?

For starters, the label has semantic meaning.  The <label> tag gives meaning to a textbox or a dropdown.  If you were blind and browsing using a screen reader, you’d appreciate the little semantic tidbits that give you an easier browser experience.

Another benefit is that we can select and style the label easily, making the transition to table-less forms so much easier.

A third and possibly more useful benefit is that the mouse stays as a pointer, and clicking on the text sets the focus to the corresponding control.

The usage in standard HTML is like this:

<label for='user_name'>User Name:</label>
<input type='text' id='user_name' />

This results in the following example:

User Name:

(notice how the mouse cursor stays as a pointer, instead of the standard text cursor)

If you were a reasonable person, you’d think that the <asp:label> control would render as an HTML <label>, but you’d be wrong.  ASP.NET renders a standard <asp:label> as a <span>.  ASP.NET 2.0 fixed this, however you have to specify the AssociatedControlID property to change the rendering behavior.

This leads me to another point that I’d like to make with the Label control.  Often times we just want a static label, like in the example above.  If we use the <asp:label> then we’ll have a server-side component as well and a viewstate hit.

We certainly don’t need viewstate in this scenario,  Often times we just neglect these things until they are a problem. 

I can hear you say it now… “but Ben, you can disable Viewstate by specifying EnableViewState=’false’ “…  I know you can.  But it’s too easy to just leave it as is.  There’s also an easy alternative.

You can accomplish the same rendering without the viewstate issue by just typing this:

<label for='<%= txtUsername.ClientID %>'>User Name:</label>

This will render the same way, but also ensure that we get the generated ID of the control that we are associating with.  This will not have any server-side component or any correlation to ViewState, and it is actually less characters to type.

Hope you find this information useful!

Last night I gave a talk to the largets crowd I have ever spoken in front of.  There were over 100 people in the room and they were a great audience.  I received lots of devoted attention and people were eager to participate.  I was quite nervous in the beginning, but once I got into the material I think it came across very well.

I spoke about why to use CSS and what we can do to overcome some of the pitfalls.  I also explained why we don’t want to be using tables for layout. 

I moved from there to some javascript techniques and a little bit of ajax.  From what I got from that portion, it could have probably warranted more time, but there was just so much to cover.

The files that I used during the demo are available for download here:

File Attachment: AdvancedCSSAndJavascript.zip (1140 KB)

 

I received a number of questions about the tools I was using during the demo.  The text editor I was using was e.  You can download it at www.e-texteditor.com.  The application launcher that I use is launchy.  It is available at www.launchy.net.  Finally the Keyboard shortcut window, called Key Jedi is available here.

If you attended the presentation, I would love to hear your feedback in the comments.  Thanks for coming!

Update:  The links that I wanted to show (but couldn't) during the presentation are:

• CSS Templates @ Intensivstation
• CSS Zen Garden
• Exploding-boy CSS Tabs
  

For those of you near Houston, I will be speaking about advanced CSS and javascript techniques on June 14^th.

The Houston .NET User Group is located in Westchase.  For more info, see their website at http://hdnug.org.

My presentation will cover some of the foundations of CSS-based web development and what it means to develop with web standards in mind.  We’ll also take a look at how to apply JavaScript in a safe and effective way to ensure that we still function when JavaScript is disabled, but also to allow the rest of the world to enjoy a richer web browsing experience.  If there’s time towards the end, we’ll also see how this applies to ajax.

Hope to see you there!

I came across this site today, which boats 53 CSS Techniques you can't live without.

Normally I don't like to blog just links, but this one is definitely worth it.  It covers most of the major techniques, both simple and advanced for styling web pages.