20 Comments

imageIn 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 Comments

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.

<staticContent>
  <remove fileExtension=".js"/>
  <mimeMap fileExtension=".js" mimeType="text/javascript" />
</staticContent>

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.

7 Comments

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

11 Comments

Many Web Essentials users have requested a more formal process around nightly builds, that should result in a better delivery and update mechanism. To make it really easy to always run the latest and greatest, I’ve now created a custom feed for the Extensions and Updates dialog in Visual Studio 2012.

Here’s how it works:

Go to Tools > Options and open the the tab located under Environment –> Extensions and Updates.

image

Click the Add button and type “Web Essentials Nightly” in the Name field and “http://vswebessentials.com/nightly/feed.ashx” in the URL field. Now click the Apply button and you’re all set. Now click the OK button to exit the Options dialog.

Now the custom feed shows up in the Extensions dialog. Go to Tools > Extensions and Updates… to verify that the new feed is working. You should have a new sub category under the Online tab called “Web Essentials Nightly”.

image

The Nightly build shares the same extension ID as the official released versions of Web Essentials, so the newest one will always override the one installed – regardless if it’s the nightly build or the official version. And updates will work normally.

In other words, it should be perfectly safe to use this custom feed without any changes to how the update mechanism works from the user’s point of view. Only difference is that with this new feed, you can get the updates much faster than before.

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

30 Comments

This release has some cool features, some tweaks to existing ones and some bug fixes. Let’s take a tour and then go download it.

Automatic update to CSS schema files

The W3C continues to evolve the CSS specification and so do all the browser vendors. It’s therefore important to always keep up-to-date with the changes to take full advantage of the web platform. Web Essentials now automatically downloads new schema files whenever there is a change.

This is really cool, because Visual Studio will now always have the latest W3C specifications AND the latest vendor specific properties in Intellisense and validation. Latest schema files include support for Firefox 16, Opera 12.1 and all the rest.

This feature is very close to my heart.

Modernizr support

When writing any kind of modern web application, you can use Modernizr to fill in the gabs between old and new browsers. Modernizr is a JavaScript library that, among other things, places a lot of class names in the <html> element of web pages. These class names are very useful to utilize from CSS to provide graceful degradation for older browsers and now they are fully supported in the CSS editor.

image

As you might be able to tell, two things are happing in the above screenshot.

  1. Modernizr specific class names are bolded
  2. Hierarchical indentation supports the class names and indent correctly

I like this feature because it makes it very clear and transparent what is going on when using Modernizr.

Minification

Through a right-click menu in Solution Explorer, it is now possible to create .min files from both CSS and JavaScript files.

image

The .min file will be nested under it’s parent source file.

image

Every time a change is saved in the parent styles.css file, the styles.min.css file is automatically updated with the minified version of its parent.  The right-click gesture works on both individual CSS and JavaScript files, but also on folders, which will then create min files for all CSS or JavaScript files in that folder.

It only handles minification, not multi-file bundling. That’s coming in the next update.

CSS/LESS document outline

Get a sneak-peek inside any CSS or LESS file directly from Solution Explorer.

image

For CSS it will display @-directives, IDs and class names used in the file. For LESS it will also show the Mixins and variables used. You can navigate this outline using only the keyboard and have each item open up automatically in the Preview Tab.

W3C only

Tired of Intellisense for non-W3C properties, @-directives, pseudo elements and property values? You can now chose to only see the W3C standards. Using any vendor specifics will result in a validation error. Is this strange? Perhaps. Let me know!

Shorthand validation

This is a work in progress, but I wanted to include the early bits in this version. The CSS validator will now throw an error if you use properties that should be rolled into a shorthand expression. For instance, if you use margin-top, margin-right, margin-bottom and margin-left in the same rule, it will tell you to combine the properties into margin. Full parsing and validation is coming in a future version.

Nested LESS selector Intellisense

When writing nested selectors in LESS you will run into a very annoying problem with pseudo selectors. The Intellisense list will force you to write a pseudo selector when you in fact just wanted a colon. This is now fixed.

Source Control

The LESS, CoffeeScript and TypeScript compilers doesn’t know how to check files out of source control before they try to compile and override the output file. Web Essentials will now check out the right files to avoid write permission issues.

New options structure

The Tools –> Options dialog has been updated with even more options and with a more granular structure.

image

This makes it easier to search for specific items using Quick Launch (CTRL + Q) and also makes it less cluttered.

Minor improvements

Beyond the features mentioned, a lot of small tweaks and fixes also made it in to this release. Here are some of them:

  • Cleaned up right-click menu
  • Added minification inside the CSS and JavaScript editors
  • Disallow zero values in CSS (0px, 0%, 0em etc. should not have the unit)
  • TypeScript now supports ES5 correctly
  • TypeScript compiler switches now featured in the options dialog
  • General bug fixes

As always, let me know if you run into issues or have some ideas for new features or tweaks.

You should download Web Essentials 1.4 right now!