Tag: JQuery
This is the fifth of ten parts of this blog post. The topics will be:
jQuery Plugins
As I read on the web, the easy way to get lots of comments is to just point out the jQuery plugins I used…the blogosphere seems rife with those. But I am going to avoid that. So what am I going to talk about? How about how to find the right plugin for the right job.
The jQuery plugin eco system is certainly impressive. There is a, seemingly, unless supply of great code to help you do all sorts of cool user interface implementations using jQuery plugins. But the strength of the ecosystem is also its weakness. How do you find the ‘right’ plugin for a particular job. That’s the difficult part of the job.
This problem is exemplified by the fact that many of the jQuery blog entries out there are like “Top 25 jQuery Plugins for Slideshows”. Wait, there are 25 plugins just for slideshows? How could they be so different as to warrant twenty-five different implementations? And, more importantly, how do you figure out which one you want:
So let’s talk about the different aspects of finding plugins.
Finding Plugins
It used to be that the first place I’d go is http://plugins.jquery.com/ but (rightly so) jQuery has taken down the mess that was their plugin site. In fact the site now says:
The jQuery plugin site became a haven for spam and dead plugins so they did the right thing as get rid of it. So how do I find plugins?
- Web searches: Yeah, it’s an inexact science but it works.
- Ask around: My Twitter feed has been a great place to get advice for all sorts of web-heads about the right plugin that people have already had success with.
I’ve tried to use GitHub’s search to find plugins but it’s just not there. In addition, I prefer individual blogs that talk about a plugin instead of the “Top 25 plugins of all times” types of posts.
What’s the Name of that Plugin Again?
One thing that I find really common is that the name of a plugin isn’t unique enough. There is no jQuery plugin naming authority. Let me talk about one plugin as an example.
I was on StackOverflow (like most of us) and while adding a new question, I loved the way that the tag control worked:
I loved how simple and quick this was so I did a quick F12 to see how it worked and more importantly what plugin (if any) they used:
Hrmph, evidently they either wrote their own (probably) or adapted a plugin. This led me to start a web search which was too hard to find what I was looking for as the words were too generic (e.g. “jquery plugin tags”). So out to Twitter I went and I was told but a few people that TagIt was the plugin to use. Awesome! Searched for TagIt and came up with:
The real problem here is that these are two *very* different implementations and throughout using TagIt, I was pulling the wrong versions all the time. This was exacerbated because I was using the TagIt Nuget package which sent me to:
https://github.com/aehlke/tag-it
But what I wanted was:
https://github.com/hailwood/jQuery-Tagit
I can’t tell you how many times I pulled the wrong version down (thinking it was an update) and all hell broke loose. In this case that hyphen was all the difference between awesome and annoying.
Evaluating Plugins
So you’ve found some plugins that you like…or at least the demo page looks great. How do you know if it’s any good? I have a few criteria that I use:
How is it hosted?
If the plugin is commercial and hosted on the company website, has it been around and is the company seem reputable? (This is harder to determine in some cases, but if I don’t trust them with my Credit Card, I don’t’ trust their code).
If the plugin is open source, I want it to be hosted on a public repository that takes feedback (e.g. pull requests on GitHub). This means that if the person disappears, I still can get the source and the community (if any) can help improve it.
Are there Docs?
When I look at a plugin, I have to be able to understand what it does. Too many plugins simply say:
// It's Easy!!!!!!
$("foo").myPlugin();
Unfortunately I need more. I want there to be an online demo and a description of how you would use it in a non-standard way (as I seem to almost always need to change the defaults).
What Does the Source Look Like?
I ignore the visual look of a plugin but defer to the look of the code. The reasons is that many of the plugins I needed, I had to make modifications (or submit pull requests). This means the quality of the code is crucial. I should be able to see one of a number of things from the code:
- Version History
- Comments about what is happening
- Default Options
When the source is hosted in a good repository (e.g. GitHub), you can view the source before going any further. For example, here is a link to the source of the TagIt plugin:
https://github.com/hailwood/jQuery-Tagit/blob/master/js/tagit.js
Clean, elegant and maintainable if necessary.
Fix it…really!
Back in the day of bulletin boards (yeah, a long time ago) there was a sense that you could download software and not upload any of your own. These people were called leeches and there were quotas in place to make it painful for these people.
In the world of open source there aren’t any such mechanisms so I want to encourage you to help out your favorite project. If you’re using a plugin and you need a new method or option, fork the project and submit a pull request. You’re helping make the project better for everyone involved.
What Plugins Am I Using?
So I avoided the obvious “the best 25 plugins eva” post, but I guess it would help to see what plugins I am using for FirstInked. I used plugins as they helped me get some specific functionality working. I try to buy versus build and some of the plugins I use are commercial, but most are free. Here you go:
The Core (not necessarily actually jQuery plugins, but JavaScript tools):
- KnockoutUI: Not really a plugin, but a framework for building MVVM in the browser and I didn’t feel right not including it here.
- PLUpload: An image uploader that will do batching for you.
- jQuery Validation: Doesn’t everyone use this? Included in MVC3 Default Project.
- jQuery Unobtrusive Validation: See jQuery Validation above ;)
Controls/Widgets:
- jQuery UI: I use this for dialogs and some controls like ButtonBar (et al.) Almost a must for any project really. It almost goes beyond a plugin.
- jQuery Checkbox: A simple checkbox replacement that is visually more obvious.
- TagIt: The Tagging Control
Shiny and Pretty:
Where Are We?
So what do you think? Do you have your favorite plugins or different criteria for finding plugins?
I am excited to announce that I’ve refactored (and renamed) my web-centric training course. The old “ASP.NET MVC/HTML/CSS Workshop” was just too long. It’s now called “The Web Workshop”.
This course is concentrating on client-development for the browser. The course will cover client-side development for HTML/JavaScript/CSS development including browser-based sites and mobile browser development. While the course will cover using ASP.NET MVC 3 for doing the server-side code, the focus of the course will be in the client development. This means most of the course will cover the new skills that web developers need including:
- Learning JavaScript
- Using jQuery (and associated plugins)
- Design with HTML5 and CSS3
- How to build pages for mobile browsers
- Working with REST/JSON data
On the server, the course covers the crucial server-side skills:
- Building Controllers and Views
- Unit Testing in ASP.NET MVC
- Exposing Data to JavaScript via ASP.NET MVC
We are holding the first class in Atlanta (GA) February 27-29th if you’re ready to learn how to build create HTML-based clients. There is an early-bird discount of $300 off the course if you sign up by January 30th.
NOTE: While the course could help you build Windows 8 Metro-style apps with JavaScript – it is not specifically covered in the course. We will have a Windows 8 Metro-style courses after the beta!
My company, AgiliTrain, has created its spring schedule and we are happy to announce that we’re going to be expanding with new courses and new cities. Let’s take the courses first.
After much consideration, it seems to me that 2012 is going to be all about XAML *and* HTML5/JavaScript. With this in mind we’re focusing on our two new courses:
ASP.NET MVC 3, HTML5 and jQuery Course
This course is about teaching developers how to build their next generation of web sites. The course includes coverage of:
- ASP.NET MVC 3
- jQuery and jQuery UI
- KnockoutJS
- CSS3 (including using LESS)
- HTML5
- Using Shims and Polyfills for graceful downgrade to older browsers
- Architecting your JavaScript
Web Development for XAML Devs
This new course focuses on taking the skills of existing XAML developers and migrating them to the web. This course includes:
- Comparison of XAML with the HTML/CSS stack
- Structuring JavaScript for Web Sites
- Data Binding with KnockoutJS
- Using MVVM on the web
New Cities
In addition to new courses, we’re also expanding our lineup to include several new cities this year:
- St. Louis, MO
- Boise, ID
- Phoenix, AZ
Our upcoming schedule of courses includes:
Hope to see you at one of our events!
It’s been a long nine-months and I am excited to be able to talk about what I’ve been working on for the first time. I am working with a small team of people to build a new set of products. But unlike what I’ve been doing in the past, this new set of products is not for developers...
The target of my new project is people who like tattoos (and other body modifications). I found that there wasn’t a good way to share tattoo pictures on the web and on Facebook. That’s what I am tackling. By the end of the year I will be launching this new web application to help people do just that.
This new venture is going for full reach of users. Unlike a typical line-of-business application, this application has to reach the users where they need us. That means we are targeting a wide berth of platforms:
- Desktop Website
- Mobile Website
- Facebook Application
- Mobile Apps (iOS, Android and WP7)
Our first milestone (to be delivered soon) will be the desktop web version of the product. When the project was started, we had an important decision to make: what platform to choose. We spent some time digging into Ruby, PHP and MVC3 for the web platform. We also spent some time with NoSQL databases to see if they were a good fit for what we needed. At the end of the day my familiarity with the Microsoft stack left me there. Is it perfect, no…it is very usable? Yes.
The Server
The goal of the web platform was simply to get out of our way. On the server, we went for a pretty standard set of tools:
- ASP.NET MVC3
- Ninject for Dependency Injection
- SQL Server 2008 for Relational Storage
- Entity Framework Code First for Schema Design/Data Access
- ELMAH and Glimpse for Error Handling
- AutoMapper for mapping models to entities
- Squishit for JavaScript/CSS Packaging
- Amazon S3 for Blog Storage
- AppHarbor for Cloud Hosting
- Facebook SDK for Facebook Integration
Some of you may be thinking about our decision to use the Entity Framework for a public facing website where speed and load may be issues. Our goal here was to use the power of Entity Framework’s Code First functionality to help us build our data schema quickly. Remember, we’re a small team so that while ceremony could help us as we grow, we did made some key decisions to speed up development knowing we would be able to refactor it later on. For example, even though we’re using Code First, we kept the data shapes and data access separated from the code so that we could refactor that later (side note: we’ve prototyped going to Dapper as our object builder and we can do it with little change to the code).
An interesting lesson we’ve learned is that since we’ve got a lot of experience with .NET, the server code ended up being 20-30% of the work. The balance of the work was in the client-side development. Now if you’ve been following me the last 1/2 decade, you may be wondering if Silverlight has a story here in the client-side development. In our case, no. Remember, we’re building a set of web sites that have to reach as many people as possible so Silverlight would simply get in the way of that goal. Like I’ve said before, HTML is for sites; Silverlight is for apps.
The Client
On the web side, we’re building HTML5/JavaScript pages. We’ve used quite a few frameworks. These include:
Managing the Project
Our team is a small, but distributed team of people in different time zones. In order to work with the project in a simple way, we needed several things: source control, project management and bug tracking. The tools for the job for us are:
These tools worked well together to help us plan and build our project. What I found interesting is that these tools were all fairly low (or no) cost to get started. FogBugz and BitBucket both have free tiers to help you get started. AgileZen is free for open source projects and I think only $9/month for up to three projects. So the cost of getting started is simply tiny. This was a big help for us.
We’re still very small so there are some missing pieces but for the most part the project has come together with the tools and frameworks staying out of our way.
For me personally, development would have been faster if I had deeper knowledge of the client stack, but it’s been a great way to learn all these great ways of building client-side, rich web pages.
If you have or want tattoos (or piercings or other body modifications) and want to help us beta test the project, head over to the teaser page and join the list of beta testers:
Let me know what you think!
I spent this week at Build and was interested in both the XAML and HTML/JS part of the Metro story. I am in the middle of converting GooNews into both HTML and XAML Metro apps to test out the new APIs.
I have to admit, I was nervous at first because this in the keynote:
(From the keynote)
Do people still write document.getElementById? My nervousness was about that this isn’t how most web developers write code these days. But I was reassured that you could use JavaScript any way you want. Let’s look at this briefly.
Hello World
I started with the Hello World example in the new docs on MSDN. So I fired up a new JavaScript Empty project. It instructed me to add a couple of HTML controls like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FirstJS</title>
<!-- WinJS references -->
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script src="/winjs/js/base.js"></script>
<script src="/winjs/js/wwaapp.js"></script>
<!-- FirstJS references -->
<link rel="stylesheet" href="/css/default.css" />
<script src="/js/default.js"></script>
</head>
<body>
<button onclick="click">
Click me!</button>
<p id="myText" />
</body>
</html>
This looks pretty good, but I don’t like the ‘onclick’ in the HTML markup. But it’s plain-old-HTML/JS so I won’t scream. Unsurprisingly, the JavaScript is pretty clean too:
(function () {
'use strict';
// Uncomment the following line to enable first chance exceptions.
// Debug.enableFirstChanceException(true);
WinJS.Application.onmainwindowactivated = function (e) {
if (e.detail.kind ===
Windows.ApplicationModel.Activation.ActivationKind.launch) {
document.addEventListener("click", function () {
myText.innerText = "Hello Windows Metro style";
});
}
}
WinJS.Application.start();
})();
While this JavaScript works fine, it feels weird. Using addEventListener instead of jQuery feels wrong. Sure, I wrote this kind of code a long time ago, I don’t do that anymore.
Modern Hello World
I wanted to take this simple version but use the modern web development skills and apply them here. First thing I wanted was to add jQuery. I’ve tried to buy into using content delivery networks so in my web code, I do this commonly:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
This doesn’t work? The context delivery network URI to load the script doesn’t work because the security model for WinRT doesn’t allow me to remote scripts. So, I copy the script into the project and change this like so:
<script type="text/javascript"
src="/js/jquery-1.6.4.min.js" ></script>
To make me really happy, I also want to remove that onClick event from the markup since I am used to doing that with jQuery. Here’s the new markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FirstJS</title>
<!-- WinJS references -->
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script src="/winjs/js/base.js"></script>
<script src="/winjs/js/wwaapp.js"></script>
<!-- FirstJS references -->
<link rel="stylesheet" href="/css/default.css" />
<script src="/js/jquery-1.6.4.min.js"></script>
<script src="/js/default.js"></script>
</head>
<body>
<button>
Click me!</button>
<p id="myText" />
</body>
</html>
More importantly, the JavaScript file will use jQuery to accomplish the same thing:
(function () {
'use strict';
// Uncomment the following line to enable first chance exceptions.
// Debug.enableFirstChanceException(true);
WinJS.Application.onmainwindowactivated = function (e) {
if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
// document.addEventListener("click", function () {
// myText.innerText = "Hello Windows Metro style";
// });
$("button").click(function () {
$("#myText").text("Hello Windows Metro style");
});
}
}
WinJS.Application.start();
})();
Notice I am just using the $("button") to find our button (though in practice we’d probably use an ID or a class) then in the click handler we are using jQuery to set the text. This feels better than the old school version we saw earlier. At least it does to me.
What about WinJS?
It’s not an either/or. I think you’ll find it useful to use both WinJS along-side other JavaScript libraries. The cool thing is that your skills will come over!
What’s Next?
I am planning on building two versions of the GooNews JS app. The first one I am taking the complete Microsoft approach and using all the new stuff. Once I am comfortable with that, I’ll be doing it with as little of the Metro specific JavaScript code (e.g. jQuery and Knockout). When I finish the GooNews JS app, I’ll release it on CodePlex and write another post about what I’ve found.
Url: http://wildermuth.com/downloads/dataservicejque...
I'd recently been asked by Chris Sells to help him with a simple WCF Data Services/jQuery example so I thought I'd share it via my blog as well. The basic idea is to use jQuery's AJAX functionality to retrieve JSON instead of the usual OData and consume it on a web page.
The example I decided on using is to expose the XBox database with paging. I am not doing any of the niceties like getting result counts to show a real navigation bar. Instead this is quick and dirty to simply do "next" and "prev" and use WCF Data Service's URI API to retrieve data.
Like most of my XBox examples, I am using the Entity Framework to simply expose three entities types (Games, Genres and Ratings). Then I utilize a WCF Data Service to expose these types for consumption via REST. My HTML is simple:
<h2>
XBox Games</h2>
<div>
<a href="#" id="PrevPage">Prev</a>
<a href="#" id="NextPage">Next</a>
</div>
<div id="gameTable" />
The gameTable will simply be filled with a simple TABLE element for our data. So to the jQuery we go. I am using plain jQuery 1.3.2 (though plugins could be used to simplify some of this code, I choose to just do it raw for simplicity).
First I set up a couple of variables to hold our paging information:
// globals for paging
var page = 0;
var pagesize = 25;
Next I handle the document's ready function to do some work when the initial page load is complete:
// Loads once the document has completed loading
$(document).ready(function () {
// Set up paging buttons
$('#PrevPage').click(function (evt) {
// Stop the navigation from happening
evt.preventDefault();
if (page > 0) {
page--;
loadData();
}
});
$('#NextPage').click(function (evt) {
evt.preventDefault();
page++;
loadData();
});
// Load the initial data
loadData();
});
When setting up the paging buttins, I use the '#PrevPage' and '#NextPage' CSS selectors to find items named PrevPage and NextPage and wire up the event to cause the page changes to happen. The 'evt.preventDefault()' call stops the buttons from trying to navigate since we're using them as buttons. FInally once we change the current page value, we call loadData (or in the initial case, call loadData with the default values).
function loadData() {
var url = "/GameService.svc/Games?$orderby=Name" +
"&$skip=" + (page * pagesize) +
"&$top=" + pagesize;
$.ajax({
type: "GET",
url: url,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
loadTable(msg.d);
}
});
}
In the loadData function, I first create the URL by using the Data Service/OData URL API to retrieve games by Name while using the global values to retrieve a page of data at a time (see the $skip and $top parameters). Once the URL is defined, jQuery's ajax function executes the URL and returns in the success function in which we call loadTable to create the table for us. Since the returned JSON is contained in a 'd' element for security, we de-reference the 'd' element before we sent it into the loadTable function.
function loadTable(results) {
var table = '<table><thead><tr><th>Name</th>' +
'<th>Publisher</th><th>Box</th></thead><tbody>';
for (var post in results) {
var row = '<tr>';
row += '<td>' + results[post].Name + '</td>';
row += '<td>' + results[post].Publisher + '</a></td>';
row += '<td><img src="' + results[post].ImageUrl +
'" style="width: 100px; height=150px" /></td>';
row += '</tr>';
table += row;
}
table += '</tbody></table>';
$('#gameTable').html(table);
}
Finally in loadTable some simple HTML construction goes on to create a table with our results. The for loop returns a iterator for each row in the collection which we can use to retrieve the individual item (see results[post].Name as an example). Once the table is built, it replaces the contents of the element named gameTable with the new table.
Because WCF Data Services will return JSON as well, you can use it to do AJAX work just as effectively as Silverlight can consume it for rich client work. You can get the code here:
http://wildermuth.com/downloads/DataServiceJQuery.zip
Url: http://www.dotnetrocks.com/default.aspx?ShowNum...
Before I left for Europe, I had a chance to sit down with Richard and Carl and espouse my views on views. Specifically we discussed how the separation of UIs (in declarative UI's like XAML and JavaScript templating) may help developers know specifically when they are in or out of the user interface part of their project. Hopefully this will make it easier to keep our code from getting tangled. Watch out for the bad pizza/spagetti code reference...
We are very proud to announce that AgiliTrain and Rachel Appel are partnering to present a series of public classes on the next generation of web development. Rachel will be teaching two new courses for AgiliTrain on web development:
- The MVC Tour: A 3-day training session that features an in depth look at MVC – the Model/View/Controller pattern as implemented in ASP.NET.
- The jQuery Tour: A 3-day jQuery workshop that enables developers new to jQuery development to increase their knowledge and gain familiarity with the jQuery libraries, plug-ins and ecosystem.
For those not in the know, Rachel has been working as a mentor, instructor, software developer, architect and DBA for nearly 20 years. During her career, Rachel has worked with a variety of languages, technologies and systems and has contributed to projects of all sizes including large scale enterprise applications at some of the world’s leading companies. Rachel’s expertise lies within developing solutions that align business and technology using the Microsoft .NET family of products, particularly ASP.NET & SQL Server. She is also an ASP.NET MVP, ASPInsider and holds the Microsoft Certified Trainer, MCAD & MCSD certifications.
The workshops will be held in several cities including:
The MVC Tour (http://mvctour.com):
- Sep 14-16, 2009 in Seattle, WA
- Nov 2-4, 2009 in Philadelphia, PA
- Jan 11-13, 2010 in Dallas, TX
The jQuery Tour (http://jquerytour.com):
- Aug 24-26, 2009 in Philadelphia, PA
- Oct 5-7, 2009 in Dallas, TX
- Dec 7-9, 2009 in Seattle, WA
Get your seats while they last. Only sixteen students per date will be accepted.
