jQuery Enlightenment eBook Review

Introduction

I just finished reading the jQuery Enlightenment eBook by Cody Lindley (@codylindley) and let me tell you it was definitely worth my time ;)

You may be already familiar with Cody Lindley as the author of the modal jQuery plug-in Thickbox.

As stated by the author, this eBook is intended for 3 types of people

  1. A beginner jQuery developer looking to learn more
  2. Someone that already knows another JavaScript library
  3. Someone looking for an awesome set of reference material for jQuery

Review

The contents of this eBook range from basic to complex themes such as core library features, selectors, traversing, manipulation, forms, events, performance, animation, ajax, etc…

One of the great things about this eBook is that each section self-contained and could be understood apart from the other sections. So you could conceivably skip around in the book and still understand what is necessary fore that section.

The feature that I was most impressed upon was the JsBin integration with all of the 100+ code samples. JsBin is a service that allows you to share, execute, and modify code snippets to aid in the learning process. For example, you can take of the code snippets (example code snippet) from the jQuery Enlightenment eBook and click the Output tab for the results of the jQuery. Then you can double-click the HTML to experiment with your own examples.

A feature that you should definitely not skip over is the notes portion of each section. On numerous occasions I found very useful tips and insights clues into the jQuery framework.

Note: I found some minor typos and code snippets issues during my detailed reading of the eBook. You can review my comments and issues in a Google Document I put together…

Summary

I highly recommend this eBook to anyone hoping to not only understand how to write jQuery, but also to understand the why behind the how. If you have any JavaScript experience at all and would like to bring your jQuery game to the next level… then, this eBook is for you!

The eBook is very affordable coming in at only $15. You can also purchased printed version from lulu.com for $30 (black & white) or $45 (color). If the price is a factor, might I suggest you asking your work to buy it on your behalf ;)

Ohh, and 10% of the price goes back to the jQuery project… so you’ll be supporting open source software too ;)

Other jQuery Enlightenment Reviews

Read More »

New Official jQuery Podcast Announced

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

Read More »

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

Read More »

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


DZone

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


RequestHandling

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


ViewCheatSheet
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


Controllers

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

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

ASP.NET MVC: Proven Practices Cheat Sheet

ProvenPractices

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

aspnetmvcCheatSheet

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:

Read More »

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?
Read More »