Saturday, January 12, 2008

Visual Studio 2008 CSS Support - Not Quite

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:

Vs2008-css-warning

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) :

Vs2008-turn-off-html-errors

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!

Vs2008-css-builder

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.

Tuesday, December 11, 2007

Google Launches a Chart API

Google recently released a URL API for charting.

What's a URL API, you ask?  Well you open an image to a specially formatted url, and google returns you a chart.  You can do some pretty amazing things with this API.

Check out these samples:
       

The last one was created with this url:
http://chart.apis.google.com/chart?cht=p3&chd=s:Uf9a&chs=200x100&chl=A|B|C|D

The urls are a little bit cryptic as you can tell, but this allows you to use one source for charting regardless of your language or platform.  A .NET wrapper is sure to spring up in the next couple days that will allow you to take advantage of this API with a more structured format.

Update:  Boy did I underestimate the community.  Chris Pietschmann already created an ASP.NET 2.0 Server Control to leverage the Google Chart API in .NET.

I'm wondering how they are able to handle all of this.  Not only is it a lot of traffic to handle (but they're obviously pros at that by now) but it takes a significant amount of CPU cycles to generate a graph like that on the fly.  How do they keep their response times so quick?
 

Tuesday, October 09, 2007

ASP.NET MVC or Scott Guthrie is My Hero

The collective jaws were dropped at ALT.NET.  Just about everyone attended this talk by Scott Guthrie.  If you’d like to watch this, Scott Hanselman has recorded the video and posted on his blog.

ScottGu-MVC

Rather than regurgitate it all here, I’ll quickly summarize what it’s like.

Remember HTML?  Yeah, that.  We are going back to our roots and back to the model that the web really lives in, not a psuedo, event-driven state-based model that is ASP.NET Web Forms.

Why don’t we like ASP.NET Web Forms?  I do like it, but it does have it’s problems.  The benefits of ASP.NET often cause other concerns to rise up.  Tired up re-populating data on the form?  Here’s some Viewstate for you.  Of course Viewstate causes page sizes to explode because most people just leave it on, even for read-only pages with no post-backs.  Think of a grid that you place on a page.  If you don’t have to postback to the same page again (like with a command field or something) then you can turn viewstate off and have a savings of almost 2X!  I for one think that ViewState can be awesome, but it is more likely abused than leveraged.  This is a pain point for many people.

The entire postback model, combined with the event-driven model is something that I have had to learn in-depth the hard way.  I really don’t think any of that knowledge is really helpful at all outside of ASP.NET.  I spent a crapload of time trying to get server controls to work in the complicated ASP.NET lifecycle, and does that knowledge transfer?  Probably not.

Lastly I think that ASP.NET’s templated control syntax often requires an equal or even more lines of code than the actual HTML would take in the first place!  Take the GridView for example.  Sure it’s great and it lets you bind data and get columns autogenerated for you, but take a look of that list of properties.  There is so much there that you almost need a degree in GridViews to be effective with it.

Microsoft has been paying attention to the community.  We’ve been readily ditching ASP.NET Web Forms in favor or Ruby on Rails or MonoRail.

ScottGu presented the new MVC framework (codenamed Scalene) to a huge audience.  There was a lot of trash talking (in a good way) between ScottGu and Scott Bellware.  It’s not easy to take blundt criticism from people like ScottB, but The Gu took it incredibly well and even dished it out a bit.

What I really liked about ASP.NET MVC is that there isn’t that much to it.  Here’s what you’d need to do to start using it on your project (exisitng or new):

  • Add the System.Web.MVC.dll (or however it will be packaged — no installer exists yet)
  • Add 1 HttpHandler to handle a new extension
  • Add 1 HttpModule, which provides all of the routing and black magic of MVC

Create a controller class, like this:

//This example is for you, Jacob Lewallen :)

public class ClownsController : Controller

{

    [ControllerAction(DefaultAction = true)]

    public void List()

    {

        ViewData = Clown.FindAll();  //you write this method or use Castle ActiveRecord for example

        RenderView("List");

    }

 

    public void SomethingSecret()

    {

        //this cannot be accessed by a url 
        //because it doesn't have the attribute

    }

}

Next you’ll need a view.  You can use aspx, Brail, or NVelocity as your templating language.  That’s freaking great that you can choose.

Here’s a quick example of an aspx view:

<h1>Clowns</h1>

<table>

   <tr>

    <th>Name</th>

    <th>Number of Balloons</th>

    <th>Likes Kids?</th>

   </tr>

 

   <% for(var c in ViewData) { %>

 

   <tr>

    <td><%=c.Name%></td>

    <td><%=c.Balloons.Count.ToString() %></td>

    <td><%=c.LikesKids? "yes" : "no" %></td>

   </tr>

 

   <% } %>

</table>

Notice how I get to use standard HTML constructs, use code blocks to provide view functionality & data, and I don’t have to mess with postback or viewstate at all because I don’t need it. 

Wait, you mean we have to learn HTML again?  D.H.H. often reminds us that the HTML is provides beautiful constraints that he is happy to work inside of.  We don’t have any naming containers here.  In fact, we don’t have any unnecessary id elements at all!  If we did, they would be exactly what we typed here, making javascript integration a lot easier.

To wrap this all up, a customizable route in the Global.asax will map the following url to render this page:

http://your_url/clowns/list    <—  look how clean!

The framework knows how that the format is http://your_url/[controller]/[action] and so it instantiates your ClownsController and looks for an action called List().

So much more to talk about, but I’ll be posting more details once I get my hands on it.

Wednesday, August 15, 2007

See you at Houston Tech Fest

If you're going to HoustonTechFest, then be sure to check out my presentations:
  • Advanced CSS and Javascript
  • ORM with NHibernate
It's all going down August 25th at the University of Houston.  See you there!

Wednesday, August 08, 2007

HTML 5 Sneak Peek

Check out the article over at IBM on New Elements in HTML 5.

Everyone who knows me knows that I loathe using tables for layout.  My biggest beef with it (there are many) are that it usually renders an unnecessary amount of markup for simple things.  Good CSS design reduces this drastically but there are occasions when you have a layout that ends up being as bloated as using tables.

If you need to style two sections of divs that have a similar or convoluted hierarchy, you usually have to resort to adding classes.  Classes add to the visual weight of the HTML, so I generally prefer not to use them if I can select the element using CSS.

New tags in HTML 5 will help with this even further.  These are all semantic structural tags that encourage proper design using HTML:

  • section
  • header
  • footer
  • nav
  • article

A <section> element will denote regions of the page that can easily be selected. Who knows, <section> might even replace <div>.

You’ll also notice a trend where tags have no visual representation at all.  They might be styled differently by CSS, but that’s not the point.  a <time> element could be used for programs to easily distinguish the time of a post, or the time that the page was last rendered, for example.

Check out the article, it is worth a read.  These changes are long overdue and will help raise the bar on web standards usage even further.  Let’s just hope IE plays nice this time (I think they will).

Tuesday, July 10, 2007

dasBlog Theme Contest - Deadline Extended

I’ve gotten a number of requests for this, so I’ve decided to extend the deadline for the dasBlog Theme Contest until July 22nd, 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?

Sunday, July 08, 2007

Introducing Lizard Lounge for DasBlog

 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!Lizard_lounge

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.

Tags: ,
Tuesday, July 03, 2007

dasBlog Theme Contest!

In an effort to get some more good quality themes ready for the next release of dasBlog, I’m going to host a little contest.

Introducing...

The dasBlog Theme Contest

The idea is simple.  Submit a new dasBlog theme, created by you, using valid XHTML and CSS.  Entries should be original and should be zipped up and sent to me at subdigital_AT_gmail_DOT_com.

Are you ready for the prize?  How about …

A $100 (US) Amazon Gift Card !

The rules:

  • Mockups do not count.  They have to be either running online in dasBlog or submit the relevant files so that I can install them on a test blog.
  • Hint:  we respect valid XHTML and CSS.  Don’t abuse tables!
  • Multiple entries may be sumitted by the same person
  • Entries must be submitted to me no later than Midnight, July 12th. (That doesn’t leave much time!) The deadline has been extended to July 22nd, 2007.  Get started!
  • Send them to my email address (above) with the subject line dasBlog Theme Contest Submission
  • No licensed material on the theme — all images and artifacts must be made by you or publicly available
  • By submitting  you agree to allow us to package the theme along with dasBlog, if we so desire
  • You are allowed to place a small link at the bottom of the page identifying you or company, but no logos
  • The dasBlog team will judge the designs and the winner will be announced July 16th July 25th.

 The prize for this contest has been donated by Scott Hanselman and myself.

So how do I create a theme?

Creating a theme is simple!  The best way to learn is to open up one of the existing themes and take a look.  The basic structure of a theme is this:

Inside of your dasBlog directory there is a themes folder:

Blog_theme1

Each theme that you want to create (or install) goes in its own folder.  dasBlog ships with over 20 themes currently, so there are a lot to choose from as a starting point.  If you open the directory and take a look, you’ll see a folder for each.

Blog_theme2

Let’s take a look at mono.

Inside of the specific theme’s folder you’ll find all artifacts for the theme.  Any images, css, or template files go in here.

As you can see, there isn’t much to it…

Blog_theme3

 Notice the theme.manifest file here.  This is just a text file telling dasBlog that this folder is a theme and mono is its name.

Blog_theme4

You also have the opportunity to add named images, but you don’t have to do that if you don’t want to.

The next thing I want to open up are the 3 template files:

  • homeTemplate.blogtemplate – this is the main site layout.  This will be the most complicated template.
  • dayTemplate.blogtemplate – each day there are zero or more posts, usually with a date header at the top, but possibly other groupings by day.  This template will be rendered once per day (as long as there are posts on that day).
  • itemTemplate.blogtemplate – this is the post template.  Included is the template for the entire comments structure.

I will show the homeTemplate right here, just to give you an idea of what it’s like to edit the themes.

Blog_theme5

Most of this is standard XHTML, however you’ll notice the macro tags marked with <% %>.  These will be picked up by the renderer and replaced with whatever the macro calls for.  For example, to tell dasBlog to output your administration bar at a certain location, you’d write <% newtelliigence.adminBar()%>.

For a complete list of dasBlog macros, check John Forsythe’s page on macros:  http://www.jforsythe.com/jforsythe/projects/dasBlogMacros.html

That’s enough of an introduction to get you started, so….

Good Luck!

Monday, June 18, 2007

ASP.NET Essentials - The Label

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:

(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.

Label_render

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!

Friday, June 15, 2007

HDNUG Last Night

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:

Friday, January 19, 2007

Solid Gold CSS Resource

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.