.NET Slave

Web Developer Checklist - the Chrome extension

Thu, 06 Jun 2013 08:44:23 -0700

Earlier this year, Sayed and I released Web Developer Checklist to help web developer adhere to best practices. Checklists like these can be really helpful to make sure we don’t forget anything before releasing new or updated websites.

Now we’re introducing Web Developer Checklist as a Chrome extension that can automate a big portion of the checklist. The extension let’s you run checks for various best practices on any website - including your own running from localhost.

It performs a serious of checks by analyzing the DOM as well as integrating with 3^rd-party services like Google PageSpeed.

Next steps

This first version of the Web Developer Checklist Chrome extension does a serious of really valuable checks. The next releases will have even more.

Specifically, we’re looking at adding:

HTML validation
CSS validation
Accessibility validation
JSHint
CssLint
~~Guidance for each item~~ Done v.1.4.4

We think these checks would be hugely beneficial. If you have ideas for other checks that can be automated, please let us know in the comments below.

Open source

The Web Developer Checklist Chrome extension is open source and hosted on our GitHub org. As always, pull requests are more than welcome.

* $4.95/month ASP.NET Hosting with FREE SQL 2012 DB! – Click Here!

Talk to, hear, touch and see your code

Mon, 27 May 2013 17:16:00 -0700

When coding, I use both of my hands for typing and both my eyes fixed on the code I’m writing. When I don’t know a certain keyboard shortcut, I reach for the mouse and in doing so, look away from the main Visual Studio window. My hands stop typing. I’m not productive anymore. For me, being productive is the foundation of my developer happiness.

Loss of productivity = developer unhappiness

Another situation that sometimes occur is when I’m in the zone coding like I’m on steroids. We’ve all tried that. It’s the best and most fulfilling part of being a developer. Highly productive and my developer happiness is at max. When I’m in the zone, nothing disturbs me. I don’t notice people entering or leaving the room and sometimes not even various status messages inside Visual Studio. Did the build just fail? What about the unit tests? I have no idea and that could be problematic.

My eyes are used for seeing what’s on the screen (input) and my hands are used for typing (output). The problem is that I only have 1 pair of hands, 1 pair of eyes and I’m using both. I’ve maxed out my IO.

The body parts useful for coding is a limited resource

Mother nature did provide us with much higher IO bandwidth than what can be achieved by only using eyes and hands. One of them is sound. The ears are hearing (input) and your voice is speaking (output).

So why not try to increase our IO using sound? What if we could hear when the build brakes? What if we, using our voice, could tell our editor to format the document in case we forgot that keyboard shortcut? It seems like a perfectly reasonable idea to me.

To experiment with this idea, I wrote two extensions for Visual Studio 2012.

Voice Commands

This extension let’s you speak any command out load. The extension will be able to recognize the voice command and execute it in Visual Studio.

It really is impressive how far speech recognition has come since I started playing around with it in the early nineties. All credit is given to the researchers and developers who kept evolving Windows Speech Recognition through all those years.

I started pronouncing each word very clearly, because I expected it would more easily recognize the words like that. What I’ve found is quite the opposite. You have to speak to it like you would speak to any normal human being. It felt counter intuitive, but that’s how far speech recognition has come. The accuracy is astonishing.

Voice Commands starts listening when you type Alt+V. Then just speak any command, such as Format Document, Save All, Options, Toggle bookmark, Collapse To Definition.

Download: VS Gallery
Source code: GitHub

Farticus

Because every app store needs a fart app – including the Visual Studio Gallery.

Granted, this is a joke. However, it’s a joke in disguise, because it does solve my problem of missing occasional build errors by playing a sound every time the build breaks. With Farticus installed, I’ve never missed a build error.

Sayed and I build Farticus with a few goals in mind:

It should be useful and solve a real problem
It must be open source
It should be easy for others to learn from the code

Don’t like the fart sounds? No problem. Fork the project and substitute the sounds with more appropriate ones. Doh! or You can’t do that, Dave comes to mind. Why not play a sound when unit tests fail as well? Fork the source code and release your own version or send us a pull request and we’ll add it to Farticus.

Download: VS Gallery
Source code: GitHub

So there you have it folks. Two extensions that adds a natural user interface to Visual Studio and adds some body parts to our coding arsenal.

* $4.95/month ASP.NET Hosting with FREE SQL 2012 DB! – Click Here!

Introducing Pretty Paste for VS2012

Sun, 24 Mar 2013 12:22:29 -0700

Download Pretty Paste now!

One of the things that have annoyed me about Visual Studio for many years, is the inconsistency when pasting code copied from websites. Depending on the browser you get different results. Consider the code snippet below copied from one of Sayed’s blog posts.

If I copy that from Internet Explorer and paste it into Visual Studio, this is what I get:

And copied from Chrome result in this:

As you can see, both browsers include the line numbers, but they interpret them differently. Both browsers fail to understand my intent for copying the text and it has been that way forever. Very annoying. In tooling, understanding the user’s intent is the holy grail.

So, in a rare moment of clarity a few days ago, I decided to fix this issue by writing an extension for Visual Studio - Pretty Paste. The idea is to inject some logic just before the regular Paste command in VS executes. That logic will quickly analyze the text being pasted and correct any non-intended line numbers and extra blank lines.

With Pretty Paste, the result of pasting the above code sample now shows this:

It automatically formats the code I pasted using the settings from each individual language. Here, my settings are set to use spaces instead of tabs and that is respected.

In the case where you actually wanted the raw copied text instead of the cleaned up version provided by Pretty Paste, you can just undo the paste once to get the raw paste. Here’s the result of a Pretty Paste followed by an undo:

This way we can have the best of both worlds. You decide. Nothing is lost.

Pretty Paste is my 6th Visual Studio extension and I love that extensibility let’s me fix use cases that are important to me. The code is simple, short and sweet. Check it out on GitHub and fork away. Pull requests are more then welcome.

* $4.95/month ASP.NET Hosting with FREE SQL 2012 DB! – Click Here!

AngularJS Intellisense in Visual Studio 2012

Tue, 19 Feb 2013 14:04:00 -0700

Recently, a lot of people have asked for Intellisense support for AngularJS in the Visual Studio HTML editor. The bad news is that there is no extensibility for providing additional HTML attribute Intellisense, so I can’t ship this support in Web Essentials.

The good news is that we can accomplish this through a more manual mechanism.

Here’s what you need to do:

Step 1

Find the file commonHTML5Types.xsd located in the Visual Studio install directory and back it up (just in case). Mine is here: C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\Packages\schemas\html

Step 2

Download this new version of commonHTML5Types.xsd and replace the existing one from the directory in Step 1 with it.

Step 3

Restart Visual Studio and that's it. You now have all the ng-* attributes available in Intellisense. This Works On My Machine^tm, so please let me know if it works on yours too.

I still want to add native support in either Visual Studio or Web Essentials, so if this is something you’re interested in, please vote for it here.

* $4.95/month ASP.NET Hosting with FREE SQL 2012 DB! – Click Here!

Web Tools 2012.2 and Web Essentials

Sun, 17 Feb 2013 16:08:33 -0700

Today the ASP.NET and Web Tools 2012.2 update was released. Go download it right now!

It contains a lot of new and updated Visual Studio tooling features including:

First class LESS editor
Knockout.js Intellisense
Paste JSON as classes
CoffeeScript editor
Mustache/Handlebars/JsRender syntax highlighting
Page Inspector
- Live CSS auto-sync as you type
- JavaScript selection mapping and callstack

Some of them are features that started their lives in Web Essentials 2012 and are now ported into an official release. Every time we move features from the experimental Web Essentials extension into the official product, we try to make the transition as smooth as possible.

However, this time we moved some substantial features that are mutually exclusive – they register the same MEF components and that leads to this rather ugly exception:

This exception occurs when Web Tools 2012.2 is installed and you haven’t updated Web Essentials to version 2.5. The solution is simply to update Web Essentials. Go do that now. If you don’t have Web Essentials installed at all, you won’t get this error because then there is no conflict.

* $4.95/month ASP.NET Hosting with FREE SQL 2012 DB! – Click Here!

Google Analytics vs. Google Page Speed

Wed, 16 Jan 2013 18:44:10 -0700

Nerd alert: This post is only for crazy website performance freaks. Proceed at your own risk.

The holy grail for us crazy website performance freaks is to reach a perfect score of 100/100 in Google Page Speed without sacrificing important features of the website we’re building. One of those important features is Google Analytics. Gotta have Google Analytics, right?!

Let’s say that you’ve optimized your website to the perfect score of 100/100 and now decide to add Google Analytics. Too bad, your score is now 98/100. That’s because the ga.js JavaScript file loaded from Google’s servers doesn’t have a far-future expires HTTP header. To get the perfect score back, we need to fix this problem.

Getting back to 100/100

Here’s a solution that I use on one of my websites. It involves the addition of a single .ashx file to your web project. It’s isolated, safe to use and works.

The role of the .ashx file is to act as a proxy to the Google Analytics ga.js script file by downloading its content and serving it with a sufficient expires header. It caches the script file on the server, so it doesn’t have to download the ga.js file every time a visitor hits your website.

Step 1: Add an empty .ashx file (Generic Handler) to the root of you project and call it ga.ashx.

Step 2: Copy this code into the .ashx file you created in step 1.

Step 3: Modify the Google Analytics tracking script on your page to look like this:

Voila! That’s it. You now have the perfect score back.

Optional step 4: Don’t like the .ashx extension? Then change it to .js by adding this to the web.config:

You need to add it to the <system.webServer> section of web.config. Remember to run the AppPool in Integrated Pipeline Mode for the <system.webServer> section to kick in.

Then just change the script tag to this:

Wait, is this a good idea?

I’ll let you be the judge of that. What I can tell you is that this exact code is running on one of my websites and it reports data to Google Analytics just fine.

Does it work? Yes
Is it cool? Totally
Should I do it? N/A

* $4.95/month ASP.NET Hosting with FREE SQL 2012 DB! – Click Here!

The ASP.NET developer checklist

Tue, 15 Jan 2013 20:04:05 -0700

In the beginning of January, we released the Web Developer Checklist with great interest from the general web community. The checklist helps raising awareness of common best practices for building websites.

It was always the plan to branch the checklist out into technology specific checklists to make it even easier to apply all the best practices.

Today we’re excited to announce the first technology specific checklist – the ASP.NET Developer Checklist. It contains links to many ASP.NET specific tools and solutions to common problems.

Not only is it a great tool for all ASP.NET developers to learn from, but also to track the progress of implementing the various best practices.

We hope it will be received well and add value to the millions of ASP.NET developers worldwide. In the meantime we will be working on finishing another ASP.NET specific checklist that focuses on website performance.

ASP.NET is just the first of many web technologies to receive its own checklist, so remember to check the Web Developer Checklist often for updates.

* $4.95/month ASP.NET Hosting with FREE SQL 2012 DB! – Click Here!

Fix for uncompressed JS files on IIS

Sun, 13 Jan 2013 19:18:09 -0700

Rule #1 in website optimization is to enable GZip compression on the web server. This is very easy using web.config as explained here. However, some web servers have disabled automatic compression of JavaScript files, because they are served with the content type: application/x-javascript.

For these web servers we can use a web.config trick to change the content type of JavaScript files to text/javascript. This is a completely valid content type supported by all browsers.

Just paste the following XML snippet in to your web.config’s <system.webServer> section.

Chances are that you don’t have this issue, since it seems to only apply to some hosters, but now you know how to get around it should you ever end up in the situation with uncompressed JavaScript files.

* $4.95/month ASP.NET Hosting with FREE SQL 2012 DB! – Click Here!

Cache busting in ASP.NET

Wed, 09 Jan 2013 13:03:05 -0700

Optimizing for website performance includes setting long expiration dates on our static resources, such s images, stylesheets and JavaScript files. Doing that tells the browser to cache our files so it doesn’t have to request them every time the user loads a page. This is one of the most important things to do when optimizing websites.

In ASP.NET on IIS7+ it’s really easy. Just add this chunk of XML to the web.config’s <system.webServer> element:

The above code tells the browsers to automatically cache all static resources for 365 days. That’s good and you should do this right now.

The issue becomes clear the first time you make a change to any static file. How is the browser going to know that you made a change, so it can download the latest version of the file? The answer is that it can’t. It will keep serving the same cached version of the file for the next 365 days regardless of any changes you are making to the files.

Fingerprinting

The good news is that it is fairly trivial to make a change to our code, that changes the URL pointing to the static files and thereby tricking the browser into believing it’s a brand new resource that needs to be downloaded.

Here’s a little class that I use on several websites, that adds a fingerprint, or timestamp, to the URL of the static file.

using System;
using System.IO;
using System.Web;
using System.Web.Caching;
using System.Web.Hosting;

public class Fingerprint
{
public static string Tag(string rootRelativePath)
{
    if (HttpRuntime.Cache[rootRelativePath] == null)
    {
      string absolute = HostingEnvironment.MapPath("~" + rootRelativePath);

DateTime date = File.GetLastWriteTime(absolute);
int index = rootRelativePath.LastIndexOf('/');

      string result = rootRelativePath.Insert(index, "/v-" + date.Ticks);
      HttpRuntime.Cache.Insert(rootRelativePath, result, new CacheDependency(absolute));
    }

return HttpRuntime.Cache[rootRelativePath] as string;
}
}

All you need to change in order to use this class, is to modify the references to the static files.

Modify references

Here’s what it looks like in Razor for the stylesheet reference:

<link rel="stylesheet" href="@Fingerprint.Tag("/content/site.css")" />

…and in WebForms:

<link rel="stylesheet" href="<%=Fingerprint.Tag("/content/site.css") %>" />

The result of using the FingerPrint.Tag method will in this case be:

<link rel="stylesheet" href="/content/v-634933238684083941/site.css" />

Since the URL now has a reference to a non-existing folder (v-634933238684083941), we need to make the web server pretend it exist. We do that with URL rewriting.

URL rewrite

By adding this snippet of XML to the web.config’s <system.webServer> section, we instruct IIS 7+ to intercept all URLs with a folder name containing “v=[numbers]” and rewrite the URL to the original file path.

You can use this technique for all your JavaScript and image files as well.

The beauty is, that every time you change one of the referenced static files, the fingerprint will change as well. This creates a brand new URL every time so the browsers will download the updated files.

FYI, you need to run the AppPool in Integrated Pipeline mode for the <system.webServer> section to have any effect.

* $4.95/month ASP.NET Hosting with FREE SQL 2012 DB! – Click Here!

Web Developer Checklist

Mon, 07 Jan 2013 19:06:31 -0700

So you just built a website and are about to make it public to the world. You go through a few checks to make sure that everything works as expected. Perhaps run HTML validation and other similar services.

But are you sure you remembered to implement all the best practices? Does it look good on mobile devices, in Windows 8 snapped view and what about basic accessibility?

Enter Web Developer Checklist

We’ve tried to come up with the complete list of tasks and checks that every web developer should go through when developing any kind of website. The Web Developer Checklist is structured in a way that makes it really easy to follow the progress as well as getting help to perform all the checks.

Give it a try and let me know what you think.

* $4.95/month ASP.NET Hosting with FREE SQL 2012 DB! – Click Here!