New Official jQuery Podcast Announced

In case you  hadn’t heard yet, the Official jQuery Podcast (@jQueryPodcast) has officially been announced.

It was first announced at the StackOverflow DevDays event in Toronto, ON, Canada on Friday Oct 23rd, 2009 and then it was tweeted yesterday by the @jQueryPodcast account and retweeted by myself and others.

Ralph Whitbeck (@redwolves), member of the jQuery Evangelism Team, and I (@elijahmanor) will be hosting a weekly jQuery podcast starting in mid-November.

Our first guest will be non-other than Mr. jQuery himself, John Resig (@jeresig).

The format of the show will loosely be interviewing a jQuery related guest and then jumping into a review of jQuery happenings from the previous week.

We already have a great line-up of guests scheduled. I hope you are as excited as I am about this new opportunity.

So, keep your eyes out for the 1st podcast coming to you mid-November ;)

You can follow @jQueryPodcast for up-to-date news and information.

qTip Tooltip with jQuery UI ThemeRoller Support

Recently as I develop with jQuery, I’ve been trying to either use jQuery UI ThemeRoller supported plugins or somehow tweak existing jQuery plugins to support the ThemeRoller classes.

Note: There are many plugins out there that already support ThemeRoller (and you can find a list I’ve compiled in my previous Quickly Testing Various jQuery UI Themes on Your Website post).

Out of all the jQuery tooltip plugins I’ve seen, I prefer the qTip implementation. The tooltips look good and it is easy to use. There are several themes that are supported out of the box and you can also tweak the styles if you don’t like the baked in ones.

$('a[title]').qtip({ 
   position: { 
      corner: { 
         target: 'rightTop', 
         tooltip: 'leftBottom' 
      } 
   }, 
   style: { 
      name: 'cream', 
      tip: true 
   } 
});

That is all well and good, but what I really wanted was to control the theme a little more. The documentation on the website got me a little further. You can tweak out the style settings and instead of using one of the default themes you can specify the border and color values manually.

$('a[title]').qtip({ 
   position: { 
      corner: { 
         target: 'rightTop', 
         tooltip: 'leftBottom' 
      } 
   }, 
   style: { 
      border: { 
         width: 5, 
         radius: 10, 
         color: '#017DC3' 
      }, 
      background: '#ffffff', 
      color: '#000000', 
      padding: 10, 
      textAlign: 'left', 
      tip: true 
   } 
});

Well, that almost gets me to where I wanted to be. Instead of defining the styles, I wanted qTip to use the ThemeRoller classes so when/if I changed my jQuery UI theme all the styles would be applied auto-magically.

So, I thought about submitting a new feature request, but before I did I noticed there was already a feature request listed for for ThemeRoller Support. That is exactly what I was looking for! Then I noticed that it was already developed. It was then that I ran across a forum entry authored by David (dfeeney) showing how to use the ThemeRoller classes with qTip.

$.fn.qtip.styles.themeroller = { 
   background: null, 
   color: null, 
   tip: { 
      corner: true, 
      background: null 
   }, 
   border: { 
      width: 5, 
      radius: 3 
   }, 
   title: { 
      'background': null, 
      'fontWeight': null 
   }, 
   classes: { 
      tooltip: 'ui-widget', 
      tip: 'ui-widget', 
      title: 'ui-widget-header', 
      content: 'ui-widget-content' 
   } 
}; 

$('a[title]').qtip({ 
   position: { 
      corner: { 
         target: 'rightTop', 
         tooltip: 'leftBottom' 
      } 
   }, 
   style: { 
      name: 'themeroller', 
      tip: true 
   } 
});

There is a concept of creating your own theme (or in qTip’s nomenclature that is ‘style’) and this is documented well in their online help. The above code create a new theme and uses the ThemeRoller classes to define the tooltip, tip, title, and content section of the qTip tooltip!

I imagine at some point the classes attribute will be highlighted on the online help, but as for now the only place I saw it used on in the forums or if you dig through the source code. Anyway, that is how you get the qTip to use the ThemeRoller.

Download Example Code

Demonstrate Example Code

ASP.NET MVC Cheat Sheets

Most of you have seen many jQuery Cheat Sheets out in the wild, but as of recently there are now also many ASP.NET MVC Cheat Sheets to chose from.

If you know of any other ASP.NET MVC Cheat Sheets, please let me know and I’ll add it to the above list. I hope these prove to be helpful for you. You might consider printing them out and posting them on your cubical walls ;)

Note: Instead of hosting the PDF’s on my server, I am pointing to the source website for you to download the Cheat Sheets from there.

Getting Started with ASP.NET MVC 1.0 You'll learn how to setup your environment and how to create a web application. Then, you'll get to go deeper into detail and learn about components of the framework along with the structure of the main API.

ASP.NET MVC: The Request-Handling Pipeline Illustrates which parts of the ASP.NET MVC Framework get called when a request is made. Check out the purpose and features of routing, controllers, actions, and views.

ASP.NET MVC: View Cheat Sheet The View Cheat Sheets focuses on the HTML Helpers, URL Helpers and so on that you would use within your views.

ASP.NET MVC: Controller Cheat Sheet The Controller Cheat Sheet focuses on what you return from your controller and how to use them and it also includes a lot of information on the MVC specific attributes.

ASP.NET MVC: Framework Cheat Sheet Framework Cheat Sheet focuses on the rest of MVC like routing, folder structure, execution pipeline etc.

ASP.NET MVC: Proven Practices Cheat Sheet Proven Practices Cheat Sheet contains ten KEY learnings that every ASP.NET MVC developer should know - it also includes links to the experts in this field where you can get a ton more information on those key learning's.

ASP.NET MVC 101 Sheet This sheet contains some snippets and information about ASP.NET MVC 1.0, César Intriago compiled most of this information from the ASP.NET MVC official site and from the free chapter of ASP.NET MVC 1.0 eBook:

Using MvcContrib ScriptInclude, Stylesheet, And T4MVC

I am always looking for more ways I can integrate features of MVC Contrib into my ASP.NET MVC projects. I also have started using David Ebbo’s T4MVC Template that generates strongly typed helpers for ASP.NET MVC (download).

Before I integrated these tools my script and style includes looked like…

I remembered hearing about ScriptInclude and StyleInclude Html Helpers in the MVC Contrib so I updated the above references to the following…

<%= Html.ScriptInclude("~/Content/Scripts/jquery-1.3.2.min.js")%>
<%= Html.ScriptInclude("~/Content/Scripts/jquery-ui-1.7.2.custom.min.js")%>

<%= Html.Stylesheet("~/Content/Styles/Site.css")%>
<%= Html.Stylesheet("~/Content/Styles/start/jquery-ui-1.7.2.custom.css")%>

I was please about using the MVC Contrib Helpers, but I wasn’t thrilled with having hard-coded strings laying around which is where the T4MVC Template comes into play.

There are many features of the T4MVC Template (many more than I planned on covering today), but one of them is interrogating your project structure and generating static classes with read-only references to your Scripts, Styles, and Images.

So, after running the T4MVC Template, I updated my references to the following…

<%= Html.ScriptInclude(Links.Content.Scripts.jquery_1_3_2_min_js)%>
<%= Html.ScriptInclude(Links.Content.Scripts.jquery_ui_1_7_2_custom_min_js)%>

<%= Html.Stylesheet(Links.Content.Styles.Site_css)%>
<%= Html.Stylesheet(Links.Content.Styles.start.jquery_ui_1_7_2_custom_css)%>

Looks pretty good, doesn't it? Well, there is only one problem… it doesn’t work! Why? Well, the output of the T4MVC Links are relative paths that have been resolved (meaning they no longer have the “~”). The MVC Contrib Helpers assume that if the URL passed it it doesn’t have the “~”, then it will prepend either “~/Scripts/” for scripts or “~/content/css/'” for styles.

Seeing that I have moved my scripts, styles, and images under the “~/Content” folder, there are a couple of changes to the MVC Contrib Html Helpers that could make this work…

1. Provide some sort of mechanism to define the paths prepended to the Scripts and Styles if there is no “~”
2. Override the Html Helpers with another option to not prepend any path information
3. Possibly search for the “/” instead of the “~” when determining if a path should be prepended to the URL
Can you think of any other solutions to get these to play well together?

SubMain CodeIt.Right Giveaway

Well, its time for another great giveaway. This time SubMain has offered to giveaway 2 of their CodeIt.Right Enterprise Edition licenses that are valued at $600.00 each!

For those of you don’t know, CodeIt.Right is a Visual Studio plugin that assists in their development process. Here are some of the features that it offers…

• Automatic Code Refactoring
• Team Features
• Code Metrics
• Reporting
• Microsoft Guidelines and Best Practices
• Follow Your Own Standards
• Automate Code Reviews
• Continuous Integration
• And Many More…

CodeIt.Right's biggest benefit is the automatic code refactoring
-- Scott Mitchell, MSDN Magazine Toobox

Giveaway Rules

The contest will start today, October 5th, 2009, and last 7 days concluding on October 11th, 2009 11:59PM CST. At that point I will pick the winner and announce the results on the following day.

In order to signup for the giveaway you need to do 3 things…

1. Follow @elijahmanor on Twitter (if you haven’t already)
2. Tweet the following…
   • RT @elijahmanor: Sign me up for the #SubMain CodeIt.Right #giveaway http://j.mp/submaingiveaway
3. Add a comment to this blog including your Twitter username.

Note: To increase your chances of winning you can add one comment to this blog each day of the contest.

At the end of the contest I will pick a 2 random comments from this blog entry and then make sure the comment authors tweeted the above RT. At that point I will Direct Message the winners (which is why you need to follow @elijahmanor) with further instructions to receive the CodeIt.Right license.

More About the SubMain CodeIt.Right

Want to learn more about the awesome prize? I highly recommend you check out the following:

1. Visit CodeIt.Right product page to learn about the product you might win.

2. Download the full-featured trial and see how it can help you be a better developer, find some interesting, and real, code problems right away!

Winners Announced…

Congratulations to Sal DiStefano and Mark A. Wilson for winning the SubMain CodeIt.Right Giveaway. Someone from SubMain will be contacting you shortly with instructions.

Thanks to everyone for participating. It looks as if I will be getting some other prizes to giveaway in the near future. So stayed tuned ;)