What’s new for HTML Developers in Blend for Visual Studio 2013

What’s new for HTML Developers in Blend for Visual Studio 2013

Rate This
  • Comments 10

At Windows’ Build conference in June, we introduced Visual Studio and Blend 2013 Preview to the world. With this release, we significantly expanded Visual Studio’s support for creating Window Store Apps using JavaScript, HTML and CSS. In addition to the client-side diagnostics and debugging tools found in Visual Studio, Blend also added a host of features intended to improve productivity by breaking the edit-and-refresh cycle that plagues UI design & development.

In this post, we’ll take a behind-the-scenes look at three of the most significant improvements made to HTML/CSS development in Blend, including new workflows for (1) authoring CSS Animations, (2) embedding custom fonts, and (3) data-binding properties.

CSS Animations

The W3C CSS Animations spec describes an extremely powerful syntax, but that syntax is also complex, difficult to visualize through code alone, and tricky to debug. Fortunately, there are well-established patterns for authoring animations. In this release, Blend adopts one of the most familiar patterns: timeline-based authoring.

Using the animation timeline, developers can scrub to any point in time, add @keyframes, drag-and-drop key rules, modify the iteration-count, set fill-mode, etc. In short, you can edit any and every aspect of CSS animation described by the W3C spec.

Edit CSS animation

Most other animation authoring tools require a JavaScript dependency . The Blend timeline is unique in so much as it creates pure CSS Animations with no JavaScript or other framework required; everything is 100% standards-compliant CSS. This means that developers can open and edit any CSS animation found on the web.

Edit CSS animation

We also noticed that most animation tools only enable editing outside the context of the working application. Unfortunately, this isolation comes at a cost: developers can’t see how the animation will interact with other elements in the DOM. Using Blend, developers can scrub and edit animations directly in the context of their working application. This means that if you animate an element’s width, for example, you can see how it will impact the layout of adjacent elements.

While animation should be used sparingly in any application, it’s also the proverbial “icing on the cake” that makes the best apps feel responsive, polished and modern. We think the animation timeline editor will prove invaluable to UI developers looking to add a little motion to the mix.

Custom Font Embedding

Of all the design elements that impact a brand’s visual identity, none is more important than typography. The letter forms must be legible, render sharply at any size and create a unique impression. To achieve these goals, graphic designers often leverage font families that aren’t pre-installed with Windows. Historically, UI developers have shoehorned those same custom fonts into their websites and applications using image, Flash, or SVG text replacement. Unfortunately, text replacement is nearly impossible to implement for long strings of text (e.g. paragraphs) and increases both file size & load time.

To overcome these setbacks, the development community has recently seized upon the potential of CSS3 features like @font-face. The high-DPI era has also revived interest in custom icon fonts as a way to creatively deliver scalable graphics.

In keeping with this trend, Blend now provides some handy accelerators for adding custom fonts to your application using @font-face rules. A supported font file can be added to a given project and an @font-face rule for it can be created simply by selecting “Create @font-face Rule” from the right-click context menu.

Custom font embedding

Once an @font-face rule has been added to the appropriate CSS or HTML file, the font-family name selected will be available in the new rich font-family CSS property value editor. The full scope of Trident support for @font-face and font-family is available for use in these editors to maximize the number of situations it can be used.

The end result is that custom fonts can now be added to a project faster and there are fewer errors that come from referencing them manually

Data Binding

More often than not, Windows Store Apps avoid hard-coded text and, instead, consume dynamic content originating from a data source. In fact, the WinJS framework makes ample use of item templates that incorporate one-way data-binding to populate headline text, image URLs and body copy. In this release of Blend, we’ve added several dialogs that make it easier to work with data productively.

For example, authors can quickly create a template by selecting “Create Template” under the Windows App Control attributes. The resulting dialog will ask authors to identify a template name and select which data fields to insert. Finally, Blend will create an item template with clean, production-quality HTML markup ready for styling.

Data Binding

Other Improvements

There are many additional improvements found in the preview release. Among them, you’ll find:

  1. JavaScript Behaviors: Add JavaScript eventListeners to any element without writing a line of code. Choose from a list of pre-made eventHandlers or create your own.
  2. Rulers & Guides: Precisely measure and position elements on your page with the help of rulers & guides on the art board.
  3. Snapping: Align absolute, relative and fix positioned elements with each other using magnetic art board snapping.
  4. Border Radius: Create rounded corners and ellipses using easy-to-manipulate handles on each element.
  5. Search & Set CSS Properties: Quickly set CSS property values directly from the search box.
  6. Find Elements using CSS Syntax: Filter the Live DOM to display only those elements matching a CSS selector. For example, you might show only <div> elements with class “foobar” by searching for “div.foobar”.
  7. High-fidelity design surface: See crisp borders at all zoom levels and smooth 60 FPS animation courtesy of performance improvements made to Blend's design surface.

Give these features a spin and let us know what you think by commenting below, posting on our forums, or sharing a suggestion on UserVoice. Also, if you want to see some other great HTML5-related talks at Build, check out my filtered session list .

clip_image009

Ryan J. Salva: Program Manager, Visual Studio Client Tools Team

Ryan is a Senior Program Manager working in the Visual Studio Client Tools team where he looks after HTML, CSS and JavaScript development. Today, he focuses primarily on Windows Store application development. However, he comes from a 13 year career in web standards development & advocacy.

Leave a Comment
  • Please add 3 and 2 and type the answer here:
  • Post
  • thanks alot

  • thanks alot

  • Cheers Ryan.  If you know of an post that expands upon the data binding section that would be great.  It would save me considerable time to see an example of what you describe in regards to the apps store.

  • Hi, Chilberto. We don't have any posts that expand on data binding in Blend for Visual Studio 2013... yet. But that's a great topic and one that we'll put on the list for the near future. In the meantime, you can learn a lot by examining how Blend handles data binding by playing with one of the code snippets available in the Assets pane.

    (1) Start by opening a blank JavaScript project in Blend for Visual Studio 2013

    (2) Search the Asset pane for "ListView with Sample Data". Drag it onto the design surface.

    (3) Select any one of the list items on the art board. For example, "sampleONE"

    (4) Open the HTML Attributes tab and find the value editor for "Text Content". Notice that it has a yellow border. Any time you see a yellow border around a value editor, that means the property is data bound. You can choose to bind the value to another property by clicking on the small square adjacent to value editor and selecting "Edit Data Binding"

    (5) You can edit the item template by adding class names, attributes or inline styles directly to the same element. The changes you make will instantly affect all other items in the list because Blend maps the changes back to the original item template upon which all list items are based.

    There is, of course, lots more you can do, but we've gotta save something for the next post (grin). If you have any specific questions, feel free to fire away. Hope this helps!

  • In Visual Studio, please provide us the ability to save and manage multiple FTP/SFTP sessions (url and credentials including passwords) to save time, especially when someone is working with multiple websites at a time.

    Currently, its very painful to fill all the information every time you need to connect to a different FTP server.

    visualstudio.uservoice.com/.../4377078-manage-ftp-sftp-websites-sessions-with-credentials

  • I'm not interesting on Windows 8, Windows RT or Windows Phone.

    I'm not interesting on Windows Store.

    I'm not interesting on apps. I'm interested on real desktop applications on Windows 7.

    I'm sticking on Windows 7 until the remove of the ugly, crappy and unusefull Windows 8 full screen interface that makes the Windows experience frustrating. Putting a phone user interface on the desktop is really not an intelligent decision.

    I want to see about Windows desktop development.

    I want to see advantages and new features on Windows Forms and WFC.

    I want the Deploy & Setup projects again, instead of the Flexera Limited Edition of Installshield.

    I want to know, me and all our customers, and Microsoft really tell to his customers explicitly and clarity, that if the only Microsoft future direction and development is about Windows 8 and Windows.

    I want to know this to search for other alternatives for software development tools and for other operating systems.

    If I need or want to develop mobile apps for phones or tablets, I do it with Google Android or Apple iOS. Not Microsoft. Microsoft has no experience and don't undestand the mobile market and not has very good products like Android or iOS. Also the market share is very low and Microsoft cant warranty revenues on his mobile platforms.

  • Loving the new guides, and the improved performance over the 2013 Preview.

    My question is this, I use a satellite assembly containing my Fonts for my WPF application.  But when I specify an external reference for the Font Family the 2013 RC reverts my changes back to a local font resource shortly after I make the change.

    Try setting a font like this: FontFamily="/CounterSketch Studio;component/Fonts/#Helvetica Neue LT Std" and you will find that shortly after Blend has converted it back to: FontFamily="Helvetica Neue LT Std".

    This means ever user control I open will be broken when I save it, and users won't have the fonts I have embedded... Frustrated...

  • very good

  • I just read you Visual Studio Blog about "What’s new for HTML Developers in Blend for Visual Studio 2013."

    Microsoft's website in multiple pages discussing "Blend" say "Blend is included with Visual Studio 2013" (with no disclaimers regarding version exclusions). I upgraded to Visual Studio Professional 2013 from Visual Studio Ultimate 2012 believing our company would be able to use Blend to help design new Forms for Windows 8.1 software applications. When we attempt to open a project in Visual Studio Professional 2013 - I do not see the "Open with Blend" option. I cannot find anywhere on Microsoft website to download Blend for my version of visual studio 2013. CAN YOU PLEASE ENLIGHTEN ME? is there a Microsoft article on this issue???

    Thanks,

    Bob Sheridan, President

    Acuity POS Systems, Inc.

    bsheridan@acuity-pos-systems.com

  • Bob, Blend is installed side-by-side with Visual Studio. You can simply search for "blend" from your Windows Start Screen or, if you have a Windows Store using JavaScript project open in Visual Studio, you can right-click on the project in the Solution  Explorer and select "Open in Blend". Hope this helps and please send us feedback on your Blend experience!

Page 1 of 1 (10 items)