Skip to main content

Expression Web 4 Service Pack 2 Now Available

Author: Steven Guttman

About the Author: Steven Guttman. Director of Product Management for Expression Web

Expression Web 4 SP2 is a new service pack for Expression Web that addresses a variety of customer issues, and also introduces a number of new featurettes that will make… well, that will make your coding life just a little easier. Faster, when it comes to coding, is better. And, if you can save 15 sec, here and 30 sec there—pretty soon you’ve got time to enjoy another cappuccino. This update focuses on code editing and workspace configuration improvements.

jQuery IntelliSense

In their 2010 survey of Web Developers, Web Directions found that jQuery dominates—used by (an astounding) 78% of respondents. Now, Expression Web users can enjoy one of the best jQuery IntelliSense implementations on the planet in Expression Web 4 SP2. One of the things that makes this feature cool is the intelligence we’ve built into creating selectors. With jQuery, you target methods at HTML elements that are identified using CSS selectors—tags, IDs and classes.

jQuery Intellisense

The standard syntax for targeting HTML elements in jQuery is to us the $(‘selector’) syntax. When you’re working in a JavaScript code block and type $(“ , Expression Web will show you a list of HTML tag names. If you type $(“# , it will show you a list of all the document IDs (as in the example above). And, if you type $(“. , it will show you a list of document classes.

Moreover, Expression Web’s jQuery IntelliSense also supports IntelliSense while chaining multiple methods. One of the unique aspects of jQuery is the fact that most methods return the jQuery object. So, methods can be executed one after the other within the same expression. In the example below, the css() and prepend() methods are chained, with IntelliSense operating within each chained method.

jQuery IntelliSense also supports chaining multiple methods

Thumbnails in Folder View (Vista & Win7 only)

Expression Web now provides a preview thumbnail of the currently selected file in the folder list panel. No more hunting around for image dimensions or sizes. In addition, the convenient link text under the size display lets you quickly copy an <img> tag or the CSS dimensions to the clipboard to paste into your markup.

Thumbnails in Folder view

If a CSS file is highlighted, you get clickable links for creating @import and <link> syntax; if a JavaScript file is selected, you can make a <script> tag with a click.

New Snippets Panel

You can never be too thin, too rich, or have too many code snippets. That’s never been truer than today—especially with SP2’s new Snippets panel. The Snippets panel lets you store and access snippets in a folder-based hierarchy. It comes with dozens of useful snippets in a variety of languages, and will automatically convert and load any existing custom snippets you’ve already built.

Snippets Panel

Importantly, the new feature was designed to preserve the ergonomics of the current snippets feature. Ctrl-Enter will bring it to the foreground with focus in the Filter field. Typing will automatically filter the list. You can use the arrow keys to navigate, and hit Enter to insert. Expression Web also now supports “wrap” snippets—where you specify code that goes before and after a selection—as well as the standard “replace” snippets.

Universal comment/uncomment

It doesn’t seem like a big deal, until you have to do it 15 or 20 times…  As web developers, we’re always testing out different code variations—often by creating multiple versions of a statement and trying each version one-at-a-time by commenting and uncommenting code. So, a common pain point for web developers is the effort it takes to comment and uncomment bits of code you’re testing (and—remember—commenting syntax is different in HTML, CSS and JavaScript). Our Universal Comment/Uncomment feature will comment or uncomment code with Ctrl-j, Ctrl-Shift-j, from within whatever language you’re working with—PHP, JS, CSS, HTML.

Workspaces

Expression Web now supports any number of custom workspaces. You can save, restore and reset workspaces—which are collections of panel configurations. You can find the Workspaces feature on the Panel menu.

Setting your workspace

Custom toolbars

With Expression Web 4 SP2, we’ve built custom toolbars into Expression Web. This feature allows you to create any number of custom toolbars using any of the built-in (internal) Expression Web commands. The Custom Toolbars feature is found under the View menu.

Custom Toolbars feature

Interactive Snapshot

In Expression Web 3 we introduced the Snapshot panel which uses SuperPreview rendering technology to allow you to preview Web pages in any version of IE (and Firefox 3.x) as you’re authoring them. This is great for layout issues, but doesn’t help if you need to test page interactivity. In Web 4 SP2, we’ve added an Interactive mode to our stable of IE renderers (as well as an interactive Firefox 3.x). Interactive mode essentially puts Internet Explorer in a panel, allowing you to see and interact with web pages during the authoring process. Mouse-overs, lightboxes and animations all work. Simply saving your changes triggers a refresh of the panel. IE Interactive uses the current version of Internet Explorer installed on your machine.

IE Interactive Snapshot

We hope you enjoy this new Expression Web service pack. We know you’re probably thinking—“I was just getting used to Expression Web 4 SP1—now I need to install SP2? What’s that “irrepressible” Expression Web team doing? What’s the rush?”

Yes, we know we came out with SP1 just a short time ago, and…   you’re welcome.