Eric Appel's Digital Life

Useful jQuery resources from the last six months

EricAppel — Tue, 17 Feb 2009 19:52:48 GMT

Since I started using jQuery about six months ago it has transformed the way that I do web development. The selector engine and chaining of operations on wrapped sets continues to astound me. These are things that just weren’t remotely possible using plain javascript or some of the other javascript libraries out there. The power of being able to do so much with so little code is a huge productivity boost for doing any client-side manipulation of the DOM.

Below is a collection of jQuery links that I mostly pulled from my Google Reader Shared Items.

Reference

50 Useful Javascript Tools
A collection of tools that will help you to achieve various tasks in Javascript development, including authoring, debugging, documenting, etc.

jQuery Cheat Sheet
Great reference for all of the different jQuery methods and handlers. A resource that I keep handy at all times.

Visual Studio patched for better jQuery IntelliSense
How to enable IntelliSense for jQuery in Visual Studio 2008

What You Need to Know About jQuery 1.3
Summary of what is new in jQuery 1.3.

The 20 Most Practical and Creative Uses of jQuery
A set of jQuery examples from around the web. There is some inspirational goodness here.

Plug-Ins

7 of my favorite jQuery plugins for use with ASP.NET
A collection of plug-ins that play nice with ASP.NET. Included are a Datepicker, a client side table sorter.

37 More Shocking jQuery Plugins
37 jQuery plug-ins that you can download and play with. Includes plug-ins like content sliders, horizontal accordions, image viewers, chart generators and more.

Tutorials

Creating a “Filterable” Portfolio with jQuery
Very cool tutorial and demo of creating an interactive UI for navigating categorized portfolio projects. The categorized thumbnails dynamically fade in and out and then re-arrange themselves based on the selected category.

The Definitive Guide to Creating a Practical jQuery Plugin
In-depth tutorial on how to create a jQuery plug-in.

Use jQuery and quickSearch to interactively search any data
How to use one of the coolest and most useful jQuery plug-ins I’ve seen. The quickSearch plug-in dynamically removes non matching items from a jQuery wrapped set in real time as you type.

Using jQuery to search Content and creating custom Selector Filters
Another take on searching page content. Instead of filtering, this plug-in highlights the matching elements.

Client Templating with jQuery
Tutorial and code for client templating with jQuery. Includes a modified version of John Resig’s templating engine that is updated to work with ASP.NET.

Garage Door Style Menu (using Animated Background Images with jQuery)
Very cool tutorial on how to create an animated garage door effect on menu items that reveals an image on hover.

Fresh Look, Fresh Start

EricAppel — Tue, 17 Feb 2009 05:35:03 GMT

Welcome to the new and improved home for Eric Appel’s (that’s me) digital life.

With this fresh start I’d like to focus my attention on some of the things that I deal with on a daily basis while developing various web projects such as http://ark.intel.com and SmartSetr. One of the areas that fascinates me the most is Rich Interactive Applications and a lot of my content here will be focused around that. More specifically I’m interested in UI design on the web, interactivity, UI concepts, and the development frameworks and technologies that make it all possible.

In addition to the blog content, this site is about the rest of my digital life. When working through this design I wanted to be sure to not only highlight the blog content, but to also bring in content from services I use around the web. The only content stored here is the blog, the rest is brought in from external services that I use every day. With this seamless inclusion of services like Twitter, Google Reader, and EricAppelPhotography.com (powered by Zenfolio), I can go about my digital life as I normally would, and that content is automatically aggregated here on my site.

The twitter, google reader, and photography content can all be found in my slider bar at the top of the site. The slider uses jQuery and Robert Penner’s easing equations to gracefully slide in the content for each section. There you’ll find my latest three photos, tweets, google reader shared items, and also my about section and subscriptions.

In Google Reader I subscribe to 150+ blogs that I read on a daily basis, and in the last 30 days I’ve shared 54 posts that stood out in some way. My interests range from web development, to design, to photography and my shared items reflect that. If you’re a .NET developer, designer, or photographer that is interested in getting into reading blogs, a subscription to my shared items would be a good start. That way I do all of the work of finding the best stuff so you don’t have to.

Open Two Excel Windows Side by Side

Mon, 17 Mar 2008 20:45:01 GMT

One of the weird and annoying things about Excel is that it shows you an item on the Windows taskbar for each document that you have open, but it doesn't let them operate as separate windows. If you're using dual or multiple monitors you'll notice that you can't place one document on each monitor to see them side by side because they share the same window. The following steps will allow you to open Excel documents side by side, but they involve some tweaks to the file system settings in Windows. If you don't fully understand the changes below I would recommend that you not make them as they will be a challenge to fix on your own and could mess up your system. To get Excel to open documents in separate windows so you can place them independently you can do the following:

Excel 2007:

Click the Office Orb in the upper left corner to bring up the menu.
Select Excel Options from the bottom right corner of the menu.
Click the Advanced tab.
Check the "Ignore other applications that use Dynamic Data Exchange" box and save.

Excel Versions Prior to 2007

Tools|options|General tab|Ignore other applications (check it).

Then in Windows Explorer

Go to Tools -> Folder Options.
Select the File Types tab.
Select the XLS file type and click "Advanced".
Uncheck the "Browse in same window" checkbox if it is checked.
Select the "Open" Action in the Actions listbox and click "Edit".
In the "Application used to perform action" textbox add "%1" to the end of the line and be sure to include the quotes around the %1.
Uncheck the "Use DDE" checkbox if it is checked.
Click "OK" and "OK" again.
Repeat steps 3-8 for the XLSX file type if you have Office 2007 installed.
Click "OK" to dismiss the Folder Options dialog.

Download and Install Team Edition for Database Professionals in Less than 10 Minutes

Fri, 13 Apr 2007 18:38:05 GMT

If you already have Visual Studio 2005 Team Suite installed, you can download and install Team Edition for Database Professionals in less than 10 minutes. Previously I had only seen the Database Professionals edition as a separate 3 gig download on MSDN that included all of Visual Studio along with it, so I never took the time to download it and install it since I already had the rest of the Team Suite installed.

Little did I know, Team Edition for Database Professionals can be installed as an add-on, so you don't have to waste your time re-downloading the rest of Visual Studio along with it. The add-on is a mere 7.9MB in size and will add all of the database features to your existing Team Suite installation.

The Database Professionals tools are excellent and I highly recommend them. Microsoft's brief description of the tools:

Tools for building SQL databases in a managed project environment with support for versioning, deployment, unit testing, refactoring, and off-line SQL development.

In addition it also lets you compare the schema or data of two different databases. A good use of this is to compare the schema/data that exists for databases in different environments (i.e. dev, test, production, etc.) The entire list of features is far too vast to include in this post . . . maybe another time.

Visual Studio 2005 Team Edition for Database Professionals Add-on

Always keep Windows Task Manager running

Fri, 09 Mar 2007 02:01:18 GMT

I am always having to open the Windows Task Manager throughout the day to kill off processes that are annoying me for one reason or another. Usually their cpu or memory usage is out of control, so they need to be taught a lesson. As a result I always keep the Windows Task Manger running in my system tray at all times. Another benefit of doing this is that the system tray icon shows the current cpu usage.

To make sure that the task manager is always running I have created a shortcut to it in my startup folder. This way everytime I start up my machine the task manager will automatically run in the task tray. To do this you can do the following:

Open your Startup folder, located at: C:\Documents and Settings\USERNAME\Start Menu\Programs\Startup
Go to the file menu and select New, then select Shortcut.
The dialog will prompt you for the location of the shortcut. Type C:\WINDOWS\system32\taskmgr.exe
Click Next, then click Finish.
Right-click on the new shortcut and select Properties.
In the dialog there is a "Run" drop down box. Select "Minimized" and click Okay.
Open the task manager and make sure that "Hide When Minimized" is selected in the options menu.

If you need even more info about the current state of your system check out the Process Explorer from SysInternals (recently acquired by Microsoft). If you don't believe me that Process Explorer is awesome, check out some of the amazing things Scott Hansleman has used it for.

SmartSetr Gets AutoUpdates and More

Mon, 15 Jan 2007 05:56:00 GMT

SmartSetr now officially supports automatic updating of SmartSets . . . for the most part anyways. I can commit to updating everyone's SmartSets at least once per day, however, because of the bandwidth and server consumption required I probably won't bulk update everyone's sets more than once or twice per day. If you would like to make sure that your sets are all as up to date as they can be then simply visit the SmartSetr site and click "Refresh All SmartSets". If you haven't visited the SmartSetr site since January 10, 2007 then you will need to visit once more and auto updates will automatically be enabled for your account.

A second feature that has been added since launch is the ability to limit the number of photos that a SmartSet will contain. This makes it incredibly simple to create SmartSets such as Top 10 Most Interesting, or Top 10 Most Interesting of 2006, etc. that will be automatically updated daily. The maximum number of photos that SmartSetr currently supports in a SmartSet is 500. This may increase as I get time to test the Flickr API's limits.

Project: SmartSetr - SmartSets for Flickr

Sun, 07 Jan 2007 06:16:39 GMT

Until now you have always had to manually create sets on Flickr. You could either go to the Organizer and select photos you wish to add to the set, or you could send photos to sets from the photo's page. With SmartSetr you can now dynamically add your photos to sets by specifying criteria and SmartSetr will create the set and add the matching photos for you.

SmartSets are sets on Flickr that are updated for you in an automated way. For example, if you have a SmartSet based on the tag "flower", anytime you add photos to flickr tagged with "flower" they will automatically be added to your flower set for you (after you click refresh on SmartSetr).

To update the photos contained in your SmartSets you must come to the SmartSetr site and click "Refresh All SmartSets". By clicking refresh, SmartSetr will query Flickr for the photos that match the set criteria and add them to the set. I am currently working on a way to automatically update everyone's SmartSets throughout the day, as well as a bookmarklet to let you manually update SmartSets from anywhere.

There are several types of criteria that you may use to create SmartSets including tags, text, date taken, and date uploaded. You may also filter the SmartSets by privacy level, and you may sort the SmartSets by a variety of criteria including interestingness, etc.

For text based SmartSets there are several search operators that may be used including AND, OR, and NOT. For example, to create a SmartSet that contains all of your photos of red flowers you would create a SmartSet based on the text "flower AND red".

Your Flickr sets that are SmartSets should be fully managed by the SmartSetr site, except that you may change the primary photo for the set on Flickr and reorder your sets on Flickr.

Here are some interesting ideas for SmartSets

All photos taken in 2006 sorted by interestingness
All photos from any year sorted by interestingness
All photos tagged with macro (dependent on your tags)
All photos tagged with certain lenses, i.e. "canon 50mm f/1.8 II" (dependent on your tags)
All photos tagged with the name of a conference, i.e. CES, Macworld

For more info on SmartSetr see the SmartSetr group on Flickr. To send me a message directly send me a message on Flickr.

Using Visual Studio 2005 on Vista

Tue, 02 Jan 2007 07:50:58 GMT

I have been trying to do development on Vista since I went full time Vista at home during the release candidates. Until recently it was nearly impossible to get any development done on this platform. Due to some hard working people at Microsoft, developing on Vista is now a pleasure. There are a couple of things you will need to do in addition to the normal Visual Studio 2005 install to be successful.

Install SP1 for Visual Studio 2005 . This download is quite large and took me over an hour to install. Multi-tasking while installing this is not advised. Also, be sure to uninstall the Web Applications Project add-on, otherwise you will get a half hour into the installation only to have it error out.

Install the Visual Studio 2005 SP1 Update for Windows Vista Beta . This is the magic update that allows development on Vista to be a great experience. Before installing this update, whenever I would do ASP.NET development on Vista, the controls that I added to the aspx pages would not automatically be declared in the designer.aspx file. This made it so that I could not programmatically access any of the controls that I had declared in the aspx page. Installing this update fixed the issue and it has not happened since.

Setup Visual Studio 2005 to always run as administrator. Browse to your install dir (C:\Program Files\Microsoft Visual Studio 8\Common7\IDE) and open the properties for devenv.exe. Switch to the compatibility tab and select "Run this program as an administrator".

Read this post and setup the Debugging Assistant if you are on a development machine. The post details some IIS configuration changes that need to be made as well as provides a link and instructions for setting up the debugging assistant.

Before installing the debugging assistant I would get the following error message when trying to debug from Visual Studio...

Unable to start debugging on the web server. An authentication error occurred while communicating with the web server. Please see Help for assistance.

Mike's article talks about how this is most commonly due to event handlers in global.asax like BeginRequest; however, I did not have any event handlers in global.asax and I was still getting the error. The most likely cause that I can think of is that I am using the ASP.NET AJAX Extensions (Atlas) RC1 and it is probably subscribing to pipeline notifications prior to AuthenticateRequest. Setting up Mike's Debugging Assistant fixed the issue that I was having and I am now successfully able to debug.

For some other interesting articles on working with ASP.NET and Vista/IIS7 check out this post from Rick Strahl and this post from Scott Guthrie.

IE7 for XP Released

Thu, 19 Oct 2006 05:18:59 GMT

Umm, judging by my rss aggregator I would guess that IE7 was released today. Go get it!

View HTML Source Generated by AJAX

Tue, 03 Oct 2006 02:31:53 GMT

One of the challenging things about debugging an AJAX application is that it isn't obvious how to view the html source that is being rendered by the browser after you have made modifications to it via an AJAX callback. If you use the browser's built-in View Source command then it will show you the source that was used to render the original page, but it will not include any modifications made via javascript/AJAX calls.

To figure out how to view the generated source I turned to Google and found Rumen Stankov's post on telerik blogs.

If you are trying to view the generated source in Firefox, the simplest way is to first download and install the Web Developer extension. Then go to the View Source menu item and select "View Generated Source".

To view the generated source in IE you can type the following in the address bar

javascript:'<xmp>' + window.document.body.outerHTML+ '</xmp>'

Or you can use this bookmarklet (Drag to links bar or add to Favorites): View Generated Source

Add Folders To Windows Vista RC1 Search Index

Sat, 02 Sep 2006 02:30:27 GMT

I always store my documents and media files on a separate disk/partition from my system files and by default Vista only indexes the User folders for its fast search service.

Originally I expected that I would be able to right-click on any folder and indicate that it should be indexed in the properties dialog or something. That's not the case though.

To add a folder to the index you have to go into the Control Panel, search for "index", and then open up the Indexing Options dialog. Once in there click "Modify", then "Show all locations", then accept the UAC prompt and you're finally there. Now you're able to select any folders to be indexed from the folder tree.

Maybe there is an easier way? I haven't found it yet...