Using Tincr with ASP.NET MVC in Windows 7

If you’re not aware, tin.cr is an extension to Chrome that allows you to edit your JavaScript and CSS files in Chrome or using your editor of choice and affecting the source and destination. I personally wanted to use it to make modifications to JavaScript files in VS2012 and have Chrome auto load the file and put it into effect on the page. Thus I save myself numerous page refreshes while I work out kinks. Tincr was developed by Ryan Ackley. Here is the official video for Tincr.

Installing Tincr on Windows 7

1. Visit the tin.cr website.
   
2. Click on the Download Tincr button (Do this through chrome and it will take you to the chrome extension install page).
   
3. Once you have added the extension restart the browser and you should see a Tincr tab in the Developer Tools window<

Setup Tincr

1. We now need to create a tincr.json file. Open up your favorite editor and post the following code into it (remember to change MyApp to your app name):

   {
       “toFile” : [],
       “fromFile” :
       [
           {
               “from”: “\\\\Scripts\\\\([a-zA-Z]+)\\.js”,
               “to”: “/MyApp/Scripts/$1.js”
           }
       ]
   }

   This tincr.json file tells tincr to look for JavaScript files in the Scripts folder and apply that to the ‘to’ URL. Notice it is using regex so if you have funky named files, you will have to change the regex. In my case, the js file is called ‘common.js’. Once you are done, save the tincr.json file to the root directory. This will be the location of the ASP.NET MVC app directory that is hosted in IIS. In my case, it was C:\dev\tfs\MyApp.

2. Now you need to setup Tincr. You can mimic the options I set here. For Root Directory, you should point to the location of the ASP.NET MVC app directory that is hosted in IIS. In my case, it was c:\dev\tfs\MyApp. You should see the green ‘Project loaded successfully’ before you begin to use this.

Using Tincr

1. We are ready to test this out. Open a browser window and navigate to the URL. In my case it is http://localhost/MyApp. Now go into VS2012 and make a change to a JavaScript file. You should see a message in Dev Tools Console saying “Auto-Reloaded http://localhost/MyApp/Scripts/common.js”. In the case below, I had a console.log(‘asdf’) that I changed to ‘its alive’ in a jquery function that did something on hover. So I just saved the file in VS 2012, moved my mouse over the element and saw the new message. AWESOME!

Issues with Tincr

If you don’t see the Auto-Reloaded message, it means that your tincr.json file is incorrect OR the extension is not able to figure out your file. This is something that I struggled with for a little bit.

• The Extension has an issue with windows where query string parameters affixed to the JavaScript URL will make it fail.
• Another possible issue is if you have an AJAX request that downloads a JavaScript file because it’s a link in the content that was returned. Well, your URL for that JavaScript file may have been altered by JQuery. Use Fiddler and make sure that your URL for the file does not contain any query parameters. It will save you a bunch of time.

Happy Coding.

Advertisement

Keyboard UX For The Web

The topic I broach today is both necessary and volatile. I deem it necessary because there are only a few ways we interact with web sites.

1. Mouse
2. Keyboard
3. Gestures (touch)

Smell doesn’t really figure in our daily interaction. An example of sound may be saying (‘Navigate to Google.com’) on your phone.

And while the evolution of touch interaction has significantly improved since its inception, the keyboard hasn’t progressed much since TAB and ENTER. For those of you who have used screen readers such as JAWS, you know just how unusable websites can be.Try going through the Wikipedia page for JAWS and navigate to a link halfway down the page.

Just how many tabs does it take?

Well, try to follow the numbers in the image below. To get to the target marked with the large red arrow, it takes 30 tabs not counting the 2 necessary if starting originally in the address bar.

So the big question is, how do we fix this?

Well, you might say “Keyboards have been used for a very long time and nobody seems to be complaining.”  And I would point out that the only people purely keyboarding on a Web Site are those who are blind or visually impaired. It is rare for users to use a keyboard on a website except to type into fields. So, going back to our question, what we should really ask is ‘Who Cares?’ Most companies use user statistics before building any feature into their product. Limited resources and a large feature set means you do what gives you the most bang for the buck.

[Ed. Note – Sorry Roel. I don’t mean to pick on you. I just want to point something out.]

The reason I put Roel’s comment here is to drive home a point about ‘Who Cares?’ Keyboard usage is subjective and different users will give you different opinions. You have to base it on who your audience is.  For example, Lifehacker provides ‘J’ ‘K’ navigation to browse through their articles. Their audience is generally going to be computer savvy power users who aim for streamlined efficiency.

Users who are familiar with keyboard shortcuts in their OS du jour will also be the ones who are more likely to use shortcuts in web sites.

For instance, check out the keyboard shortcuts to GMail as provided by Lifehacker. GMail is definitely not used by power users only. They do make up a small based of the overall user base but the fact that they went the extra mile to provide these shortcuts shows their level of commitment to excellence.Hotmail also has a big list of shortcuts and with their UI change, they have become a prominent player for your email data.

So why do some of the most visited websites fail to provide shortcuts?

If you go to web sites that provides pages of information such as 500px you can see their navigation pages at the bottom.

This is a great site. They have excellent user content. The design is simple yet elegant and does not steal away from the user content. They provide ‘J/K’ navigation but I could not get it to work. And that’s not the only thing that bugs me. If you zoom into their pages, you notice the arrow keys as if to taunt you into using them (they don’t work btw.) Why is there such a discrepancy? Why not inform you users directly so that they can see how to use navigation correctly?

Now try going to another site that offers the same type of paged content such as PeopleOfWalmart. You notice the paging right there at the top. But there is no way to navigate through the content easily on a keyboard. It took me almost 30 clicks to get to the 2nd page item for navigation.

As Smashing magazine says it, “Enable keyboard shortcuts in your Web applications.’ They even have a complied list of shortcuts for developers. And on their main page they have a paged list of articles on their main page.

But I can’t navigate through it!

So, I wish to implore you dear developer, consider your power users and add some keyboard shortcuts for navigation into your web site.

John Resig has even provided you with jquery.hotkeys so that you may easily add navigation support to your code. It supports all the major browsers (even IE 6).

Now you really have no excuse!

p.s. I looked for a way to enable keyboard navigation on the free version of WordPress and wasn’t able to find it. If anyone knows how to add this, please let me know. Thank you.