click tracking
September, 2011 - Katrien's MSDN Blog - Site Home - MSDN Blogs
Posts
  • Katrien's MSDN Blog

    My favorite tools to optimize Visual Studio for webdev

    • 3 Comments

    How do we make Visual Studio play nicer with HTML5, CSS3, JavaScript, jQuery, in other words more of the front-end webdev stuff?

    Visual Studio 2010, be it the Ultimate, (free) Web Developer Express or other version, is not fully optimized for front-end web development out of the box. But don’t let the default VS2010 install fool you. There is a combination of community effort and tooling enhancements by Microsoft that make VS2010 play nicer to webdevs.

    In this post you can find a collection of my favorite extensions and tools to make Visual Studio handy for web devs. I’m focusing on the tools I have used and installed myself, knowing that there are others out there. Do you have any additions for the list? Please let me know so I can add them here!

    Most of the extensions I discuss can be installed using the Extension Manager (Tools > Extension Manager). You can also download extensions through the Visual Studio Gallery.

    Web Standards Update for Visual Studio

    Web Standards Update for Microsoft Visual Studio 2010 SP1

    Download Web Standards Update for Microsoft Visual Studio 2010 SP1

    This is the first tool I would recommend for introducing HTML5, CSS3 and JavaScript enhancements to the editor. Released by the Visual Web Developer team at Microsoft it includes HTML5 schema support, CSS3 and improved JavaScript IntelliSense.
    Although Visual Studio Service Pack 1 did bring some HTML5 schema support I advise installing this extension for improved support.

    More info at Mads Kristensen’s blog: Web Standards Update - behind the scenes

    JScript Editor Extensions

    Download JScript Editor Extensions

    You might have seen my previous quick tip on these extensions. JScript Editor Extensions are a welcome addition to the IDE.
    If you are used to having full fledged IDE optimized for C# development, things like word highlighting, outlining and brace matching are a given. Not so with JavaScript, until you install this extension.

    image
    (outlining functions example in some jQuery code)

    After installing JScript Editor Extensions you’ll get the option to Enable/Disable four different extensions: Brace Matching, JScript Intellisense <Para>, Outlining and Word Highlighter. Knowing that sometimes installing a specific extension conflicts with one of these it’s a nice option.

    image

    Make sure you check out the Channel9 video for a live demo of the extensions.

    Mindscape Web Workbench

    Download the Mindscape Web Workbench.

    Scott Hanselman has a great (as always) post on this new “Mindscape Web Workbench” extension for Visual Studio, adding support for CoffeeScript, SAAS and LESS.
    Too many new extensions for you? Don’t worry if you haven’t been doing front-end web dev lately it’s normal they sound crazy.

    • Coffeescript: CoffeeScript is a little language that compiles into JavaScript.
    • SAAS: Sass is an extension of CSS3, adding variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS. With the Visual Studio extension conversion into standard CSS is automated.
    • LESS: LESS is similar to SASS in that it also adds support for variables, mixins and more but instead of having a server side or plugin translate the code into standard CSS it runs via a JavaScript library on the client.

    JSLint.VS2010

    Download JSLint.VS2010

    This is an extension of JSLint for Visual Studio, as I’m sure you are aware of by reading the tool’s title. You probably can’t escape doing web front-end without using any JavaScript. But what about applying patterns and validating code? JSLint, a code quality tool is a solution for this.

    It will hurt your feelings, that’s the promise of JSLint. No, seriously that’s their tagline but it’s more of a warning on how JSLint will hurt your feelings at the beginning but in the end make you a much better JavaScript developer. Writing JavaScript without applying patterns and best practices leaves your code unmaintainable.
    JSLint will apply a set of rules to validate your code and report issues. It helps you enforce usage of patterns and overall code structure.

    2011-09-12_0525

    2011-09-12_0548
    (//note there is a lot wrong with this little script, although it does run it’s just for demo)

    You can also try the online version at http://jslint.com

    jQuery IntelliSense

    Getting IntelliSense support for jQuery in your ASP.NET MVC 3 projects is already be happening. The default template contains the -.vsdoc.js files which have been commented for Visual Studio IntelliSense. If you want to add this support to another project just install the NuGet package “jQuery.vsdoc”, however the vsdoc files are now included in the default jQuery package so you should get them by default (jQuery version 1.6 and up).

    2011-09-12_0601

    2011-09-12_0550

    Image Optimizer (by Mads Kristensen)

    Download Image Optimizer

    A nice little extension integrated into Vial Studio, which uses SmushIt and PunyPNG for optimizing the images. Run it on a folder of images in Visual Studio to have all the images optimized. Gains of 15% to 40% are not unusual with some files I tried out.

    image

    Other tools, not tested

    • JSEnhancements: Similar to JSscript Editor Extensions, it provides outlining and matching braces highlighting for JavaScript and CSS editor.
    • CSS 3 intellisense schema
    • Chirpy: VS Add In For Handling Js, Css, and DotLess Files
    • ReSharper 6, already used by lots of developers also has support for JavaScript and CSS (note this one is not free)

    ASP.NET MVC & HTML5 templates

    As I was working on this post a tweet by @maartenballiauw got my attention:

    image

    So I did just that in the Visual Studio (NuGet) Package Manager console for an ASP.NET MVC3 project. This package adds support to MVC EditorTemplates for new HTML5 input types such as E-mail, Tel and URL. Technically not a tool for my list but interesting to mention here anyway.
    2011-09-12_0627

    So that’s it for my current list. Don’t forget, add your favorite tools to the list by leaving a comment.

  • Katrien's MSDN Blog

    Quick tip: (free) JScript Editor Extensions for Visual Studio

    • 2 Comments

    As more and more sites and web applications take advantage of JavaScript, it’s always nice to have better editor support for the language in our Visual Studio tools.

    There is a free extension for Visual Studio available for a few months already, which I only now found out through a newly released video on Channel9: Visual Studio Toolbox: JScript Editor Extensions.

    Damian Edwards, a member of the ASP.NET team at Microsoft joins this episode to demo the JScript Editor Extensions and talk about what can be expected in Visual Studio vNext.
    Enabling things like brace matching, outlining regions, highlighting instances of a word and more, it’s going to be a welcome addition to anyone doing JavaScript code in VS.

    >> Download the extension
    Watch the Channel9 video

    image

    Note: if you’re looking for more or extending these extensions you can start by viewing or downloading the source code from these extensions from Codeplex.

  • Katrien's MSDN Blog

    PhoneGap mobile HTML5 framework adding support for Windows Phone Mango

    • 0 Comments

    clip_image002Yesterday, the Windows Phone Developer blog, together with Nitobi, announced the availability of a PhoneGap beta version supporting Windows Phone Mango. This new option to build applications targeting Windows Phone gives more choices to developers. In particular, Web developers will be able to easily leverage their HTML5 skills to target Windows Phone.

    clip_image001Nitobi's PhoneGap is an open source solution designed to give web developers JavaScript access to popular mobile device features, like the camera, GPS, the accelerometer, local SQLite databases and more, without having to write full applications. On Windows Phone Mango PhoneGap leverages the new HTML5 support provided by IE9.

    The current beta version includes most of the basic features, and includes JavaScript APIs to use Windows Phone Mango features likeclip_image003:

    • Access Device Information (UDDI and stuff)
    • Add and search Contacts
    • Connection status (network / wifi connection status)
    • Alerts/Notification (alert and confirm)
    • Media Capture (Image and Audio)
    • Camera
    • Accelerometer
    • Geolocation

    The beta version of the PhoneGap libraries can be downloaded from:

    https://github.com/phonegap/phonegap-wp7

    Windows Phone SDK 7.1 RC direct download links:

    Windows Phone SDK 7.1 RC documentation

    Stay tuned, we will provide updates and more extensive demos as progress is made. With Windows Phone Mango Released to Manufacturing and developer tools hitting “Release Candidate”, it’s the perfect time to start testing, give feedback and join the PhoneGap open source project.

  • Katrien's MSDN Blog

    New Windows Phone 7.5 is here: developer update and training events announced

    • 1 Comments

    Mango is here! Yesterday Microsoft released Windows Phone 7.5 to the public.
    As a developer, get ready for new opportunities and some announcements around Windows Phone events in Belgium.

    Below you can find a cross-posting from my colleague David Hernie’s blog:

    Mango Yesterday the Windows Phone team announced that the next version of Windows Phone is ready to go. It’s a major release and it offers hundreds of new features for the phone, marketplace and for developers.  You can find here the official blog post from the Windows Phone team Blog. Microsoft has the goal of making the update available to 98% of phone customers worldwide within four weeks.
    You can check on the status of the update release schedule on the “Where’s My Phone Update?” table on the Windows Phone website. .

     

    What’s hot for Belgian users?

      We add Internet sharing, Twitter and LinkedIn integration to the People Hub, enhanced communication with Groups and Threaded Messaging, a fast and beautiful Web experience with hardware accelerated IE9, multitasking, more integrated apps for connecting with the people in our lives. In addition, with Mango we have a NL version of phone and marketplace. Moreover, customers can now purchase an app from the Web and that app can be automatically downloaded over-the-air to their Windows Phone 7.5 devices.

    What’s hot for Belgian developers?

     

    First, we’ve simplified payout and taxes administration by eliminating the need to provide an ITIN on your W-8 to take advantage of a reduced withholding rate. A blog post will follow with the new simplified procedure and we will organize a webcast for your Q&A in November.. Stay tune #wp7be or #wp7dev or follow David

    Then, Microsoft Advertising solution for Windows Phone is now available in Belgium. It means MORE Windows Phone developers can make MORE money from in-app advertising and get paid locally. Want to know how to do it – Follow our WP7 technical training: Oct 25-26 in French at the MIC Mons or Nov 9- 10 in English at the MIC BrusselsCheck here for all WP7 technical training organized in Belgium

    Moreover, you can now publish your Mango apps. One remark – your existing Windows Phone apps are not automatically available for the Mango Marketplace. You need to manually resubmit your app for Mango and NL market

    What should you do?

     

    Last point, save the date!

     

    Oct 25- 26 (French version) Nov 9-10 (English version)- Were organizing 2 deep development technical trainings. No marketing stuff, just 2 days to learn how to develop, publish and promote your Windows Phone 7 Apps. We will lend you phones to test your development, help you to promote your app, understand concept of the Live tiles – Cloud integration or how to use the Advertising SDK and get more revenue. It’s free – all details are here : WP7 technical training organized in Belgium

    Nov 3 – We’re organizing a big event in Belgium. “The UX tour” all you want to know about Design, HTML5, Web & Phone with international speakers and latest technology trends. Stay tuned, more info is coming..

  • Katrien's MSDN Blog

    Upcoming MSDN Webcasts on SharePoint 2010 and Windows Phone ‘Mango’

    • 0 Comments

    Register now for the following MSDN Webcasts:

    27
    SEP
    2011

    Overview of SharePoint 2010 as a Business Intelligence platform
    Timing 14:00 – 15:30 | Type Live Webcast | Language English

    Abstract
    In this session, Serge Luca (SharePoint MVP, Devoteam) and Isabelle Van Campenhoudt (Data Branch Manager, ICT7) will give you an overview of the Business Intelligence features of SharePoint 2010. The following technologies will be illustrated :

    • SharePoint Visio Services
    • SharePoint PerformancePoint Services
    • Reporting Services
    • SharePoint Excel Services
    • Powerpivot for SharePoint

    Attend this webcast and get a FREE MSDN & TechNet Coffee Cup! 

    Speakers Serge Luca & Isabelle Van Campenhoudt
     
    Serge Luca    Isabelle Van Campenhoudt

    Register now

     

    11
    OCT
    2011

    Integrating Bing Maps into your Windows Phone 7.5 Application
    Timing 14:00 – 15:30 | Type Live Webcast | Language English

    Abstract
    Including a Bing Maps control inside your Windows Phone application is a first step. Adding extra functionalities generally comes next. The purpose of this session is to demonstrate how to work with Bing Maps, add push pins, calculate and display a route …

    Attend this webcast and get a FREE MSDN & TechNet Coffee Cup!

    Speaker Christophe Peerens

    Christophe Peerens

    Register now


    The Microsoft Community in Belgium is also organizing a number of interesting events in the next few months. Our selection:

    Keep an eye on our local MSDN events page (Dutch | French) to get an overview of all planned Microsoft – or community run events for developers (bookmark tip!).

  • Katrien's MSDN Blog

    On the road to BUILD – A day of California dreaming

    • 0 Comments

    We have arrived in California to attend the BUILD windows conference starting Tuesday. From the Belgian Microsoft team we have Luc Van de Velde, Bart Vande Ghinste, Christof and myself on site. The waiting is hard but we keep ourselves busy taking in some sun to get over the jetlag on Sunday.

    Enjoy the pics Smile

    image
    Some healthy exercise before a week of sessions at the convention center.

    DSC03366 

    pano_000001
    (Photostitch of Newport Beach, done with Luc’s Windows Phone 7 – click on the picture for a higher res one)

    And to finish off, a last one of the sunset.

    WP_000351

    Another day closer to BUILD! Tomorrow is registration and some prep before the conference kickoff on Tuesday.

  • Katrien's MSDN Blog

    Windows Azure Toolkits for Windows Phone 7, iOS and Android: new releases

    • 0 Comments
    clip_image001[6]

    Last week, Microsoft released the Windows Azure Toolkit for Android  while at the same time providing an update release for the Windows Azure Toolkit for Windows Phone 7 and Windows Azure Toolkit for iOS (iPhone & iPad). The purpose of these toolkits is to make it easier for mobile device developers – across multiple device platforms – to build applications that use Windows Azure to run back-end services that power their device experiences. The toolkits include native libraries; project templates, sample applications, and documentation that make it easy for developers quickly get started build device applications that use Windows Azure.

    Get the toolkits here: Windows Phone | iOS (iPhone & iPad) |Android

    What’s New?

    Looking for examples?

    We shipped the full source code of BabelCam, which is now available in the Windows Phone Marketplace. This mobile application allows you to take a picture of text and turn it into characters while letting you translate into a different language at the same time – great for trying to understand foreign restaurant menus! BabelCam was initially created as a sample for a presentation at MIX 11. Iit is a good demo is that it uses a number of services, including Windows Azure web and worker roles, Windows Azure storage (blobs, tables, and queues), the Microsoft Push Notification Service, Project Hawaii’s OCR Service, and the Bing Translator.

    Want More?

    For more details, please refer to the following posts:

  • Katrien's MSDN Blog

    New Windows Azure SDK 1.5 and Windows Azure Tools for Microsoft Visual Studio 2010

    • 0 Comments

    A new release of the Windows Azure SDK 1.5 and Windows Azure Tools for Microsoft Visual Studio 2010, and Service Management Features are now available. You can download the tools here using the Web Platform Installer. All three of these releases are aimed at simplifying development, deployment, and management on the Windows Azure platform.

    The Windows Azure SDK includes the following new features:

    • Re-architected emulator enabling higher fidelity between local & cloud developments & deployments.
    • Many fundamental improvements (performance of emulator and deployment, assembly/package validation before deployment)
    • Support for uploading service certificates in csupload.exe and a new tool csencrypt.exe to help manage remote desktop encryption passwords.
    • Many enhancements and fixes to Windows Azure SDK 1.4.

    Also available are several new enhancements in Windows Azure Tools for Visual Studio for developing & deploying cloud applications. These enhancements include:

    • Add Windows Azure Deployment project from Web Application project.
    • Profile applications running in Windows Azure.
    • Create ASP.NET MVC3 Web Roles.
    • Manage multiple service configurations in one cloud project.
    • Improved validation of Windows Azure packages.

    >> Read the full announcement on the Windows Azure team blog here.

    You can start building your application on it in 3 simple and easy to do steps:

    1. Download the Tools:

    Get Visual Studio Express and the Windows Azure Tools for Visual Studio to start building and debugging applications for the Windows Azure Platform http://tinyurl.com/learnaboutazure. If you have already Visual Studio installed you can download the tools directly from http://tinyurl.com/toolsforazure.

    2. Setup an Account:

    Set up an account and obtain a free subscription for accessing the online portals for Windows Azure, SQL Azure and Windows Azure AppFabric. You can learn more about the accounts http://tinyurl.com/getazureaccount or you can sign up directly and get the trial http://tinyurl.com/getazurefreetrial.

    3. Create your First application and Deploy it on the Windows Azure Platform:

    First learn how to create a simple ASP.NET application in Visual Studio for Windows Azure on your local machine http://tinyurl.com/localazureapplication. Once successfully created, learn how to deploy this application on the Windows Azure Platform http://tinyurl.com/deployazureapplication.

    When all steps are executed successfully you should have running your first application on the Windows Azure Platform!

Page 1 of 1 (8 items)

September, 2011