nik codes

New Job

“Choose a job you love, and you will never have to work a day in your life”.

It’s no secret that my love of web development has materialized into Glimpse, the project I started a little over a year ago with Anthony Van der Hoorn. I’ve had an amazing ride with Glimpse; becoming an ASP Insider, getting to meet many of my dev heroes and working with fantastic contributors from all around the world.

About a month ago that ride took a new and unexpected turn. An opportunity to work full time with the open source community on our little project arose from a seemingly unexpected source: Red Gate.

Red Gate

I was taken surprised by Red Gate’s proposal and spent several weeks with Anthony and Red Gate’s top brass discussing our philosophies of open development, open source, ASP.NET, the web development community, software development practices and yes, even Reflector. As the discussions progressed I became more and more convinced that Red Gate genuinely believed in our vision of Glimpse, our model of development, and most importantly, the community that we were serving. Given that, I decided to take a new job with Red Gate – getting to focus a much larger portion of my time on the things I love: Glimpse and the web development community.

There are a lot more details about what this means for Glimpse on the Glimpse blog, so I won’t rehash that here, but in summary it’s all positive. From a personal perspective, I will remain in New York City, and, in addition to spending a majority of my time working on Glimpse, I have also been given the opportunity to interact with the community. This basically means that part of my new position requires writing blog posts, speaking at user groups/meetups, working with open source and attending conferences like Monospace in October.

This is all new and very exciting to me. Keep an eye on this blog and my twitter feed for updates as things progress.

– By

Advertisements

NYC ALT.NET: Building Win8 Metro Apps with JS & HTML

At the July meeting of the New York ALT.NET Meetup, Microsoft developer evangelist Rachel Appel presented a session on building Windows 8 Metro style applications with JavaScript and HTML. Here are my notes from that presentation.218420_980

  • In a room of ~40 developers, all said they felt comfortable with JavaScript, but only one or two considered themselves to have any design skills.
  • The presentation started with a quick demo of Windows 8 running on Rachel’s tablet. It was all pretty standard stuff if you’ve seen Windows 8. If you haven’t – head straight over to the Building Windows 8 blog and read up right away!
  • To build Windows 8 apps, you have to have Visual Studio 2012 running on Windows 8 itself. Visual Studio 2012 does work on Windows 7, you just can’t create Windows 8 Metro apps with that configuration.
  • Out of the box, Visual Studio 2012 has several JavaScript based Metro templates that have lots of build in features, including some layout and styling along with the usual library references.
  • There does not appear to be a built in UI pattern like MVC or MVVM. I assume that libraries that help structure code, like backbone.js or knockout.js, will be popular.
  • There is a concept of “pages” (not HTML pages) built into the template. These were not covered in depth – I need to research this more.
  • I was happy to see the ECMAScript5’s “use strict” directive in use in the template code.
  • No additional work is needed to get basic touch gestures working when using the JavaScript controls.
  • Running (IE:F5 Debugging) an application from Visual Studio causes the application to open up in full screen mode. This makes break point debugging very painful with lots of Alt+Tab window switching.
  • A simulator (not emulator) can be used to ease this pain. The simulator is basically a remote desktop connection, back into your own machine, which shows the application running along with tooling to do things like rotate the device orientation and simulate touch events/gestures.
  • Once an application is deployed to the app store, and downloaded by a user, it is placed in an obscure Program Files directory. If a user finds the application, they would be able to view the source JavaScript. If this is a concern, Id recommend using a JavaScript obfuscator like UglifyJS.
  • Visual Studio will show you the JavaScript source for the core libraries, but it will warn and stop you from changing said source. Since JavaScript is dynamic, you could replace a method implementation at runtime.
  • Visual Studio tries to guide developers into properly implementing the Metro UX guidelines. A full set of documentation and resources can be found in the Windows Dev Center.
  • Interesting point made about the reduced relevancy for HTTP caching/CDN’s in HTML based Metro apps since a majority or resources (sans data/JSON) will be included in the bundle.
  • Metro style JavaScript applications run in IE10 under the covers – no surprise there.
  • Html “controls” use standard elements (IE: divs) with data-* attributes.
  • Application manifest file (XML) contains tons of settings, but there is a nice editor for the file that hides away the XML and makes editing “easy”.
  • Access to device API’s (camera, geolocation, etc) must be approved by user, similar to Facebook’s permission model.
  • Background tasks are supported.
  • Applications can have many entry points like a tile click or a search result.
  • Side loading of applications is handled by Visual Studio.
  • Tiles can be short (square) or wide (rectangle), live or “dead” – users choose and developers should accommodate those preferences.

All in all, it was a very informative session. It was video recorded, so I’ll update this post as soon as the video is posted online.

– By

Front End Web Developer Podcasts

I’ve always been a “jack of all trades” web developer. For most of my projects I’ve owned everything from the client side HTML/CSS/JavaScript to the server side processing/database/service calls.

I find it very easy to focus on the server side, especially in the .NET community, with all the great things to play with in ASP.NET MVC, NuGet packages, SQL Server improvements, etc. Recently, however, I’ve really been enjoying getting back into client side development. The browser vendors are moving at a very rapid pace, continuously adding functionality and expanding the capabilities of what can be done on the client.

With so much acceleration in the browser space, I’ve found a few podcasts particularly helpful and informative:

shoptalk

ShopTalk

Great coverage of CSS, HTML and industry happenings with Dave Rupert and Chris Coyier of CSS Tricks fame.

 

nbs

Non-Breaking Space

Interview style show with the best and brightest minds on the web.

My favorite episode thus far was their interview of Paul Irish, a member of the Chrome Developer Relations team.

webAhead

The Web Ahead

The Web Ahead has the longest running time of this list, but because of that they often get into slightly deeper, more nuanced conversation.

 

Of course, I still listen to Hanselminutes and Herding Code, but they don’t typically cover front end dev.

What front end podcasts do you recommend?

– By

The Saga of Readme Files and NuGet

When we released Glimpse back in April of 2011, we included a readme.txt in our NuGet package providing brief documentation and instructions to help users understand how to get started with Glimpse.

Problem was, nobody read it.

Even worse, nobody knew it was there.

nuget powershell

So at the end of June 2011 we added a little NuGet and PowerShell magic to our package that would open up the readme file for the user in Visual Studio upon package installation by adding a tools/install.ps1 file:

param($installPath, $toolsPath, $package, $project) 
$path = [System.IO.Path] 
$readmefile = $path::Combine($installPath, "path\to\your.file") 
$DTE.ItemOperations.OpenFile($readmefile) 

This simple script has been working well for us over many releases and thousands of downloads, but I’ve always felt that this functionality should be built into NuGet itself. Apparently I’m not the only one that feels this way, as there has been a feature request on CodePlex for this since October 2010 asking for this very thing. (The comments on this thread are a good read. Full disclosure, I am a participant on it.)

Fast forward to last week, when Drew Miller tweeted:

This is great news, as now NuGet will essentially do what I’ve always hoped it would: open readme.txt files automatically. The new feature, coming in NuGet 1.7, builds upon NuGet’s convention over configuration roots by opening a file named readme.txt placed in the root of the package. This will facilitate simple readme.txt discoverability problems like we had with Glimpse – which is wonderful and should cover most use cases.

For more advanced scenarios (IE: opening other file types, opening files from other locations, opening multiples files, supporting older versions of NuGet, etc) feel free to use the PowerShell script above.

Please note, NuGet 1.7 is not yet released and does not currently have a published release date.

– By

Integrating SpecFlow and xUnit

This post is all about getting SpecFlow, my favorite .NET BDD framework, and xUnit, my favorite .NET unit testing framework, playing along nicely together.

NuGet itself does most of the heavy lifting here, but there are a couple of gotchya’s along the way. First, the easy stuff:

  1. Create a standard Class Library project in Visual Studio.
  2. Using NuGet, add the packages SpecFlow, xunit and xunit.extensions with either the Package Manager Console or Manage NuGet Packages dialog.consoledialog xunit.extensions is required for some of the more advanced Gherkin syntax scenarios.
  3. With this in place, SpecFlow will still generate nUnit tests. To configure it to use xUnit tests, create an app.config file in Class Library project with the following content:
    <?xml version="1.0" encoding="utf-8"?>
    <configuration>
      <configSections>
        <section name="specFlow" 
    type="TechTalk.SpecFlow.Configuration.ConfigurationSectionHandler, TechTalk.SpecFlow" /> </configSections> <specFlow> <unitTestProvider name="xUnit" /> </specFlow> </configuration>

That’s it, SpecFlow will now generate xUnit tests which should compile perfectly.

I’ve wrapped all of these steps together into a NuGet package, tentatively titled SpecFlow.xUnit, and contributed it to the SpecFlow project on GitHub. They have just accepted my pull request, so hopefully we’ll see a one click package to integrate these two great libraries on NuGet.org very soon!

Of course, the real beauty of SpecFlow is its Visual Studio integration, which you can install from the Visual Studio Extension Manager. It provides item templates and step debugging on Gherkin .feature files.

vsspec

I have a few issues with the way that Visual Studio’s Extension Manager works, but that’s another post and has nothing to do with SpecFlow.

– By

Meta in your head

UPDATED: After some Twitter conversation with @Phil_Wheeler, @brianblakely and the @h5bp team, Brian has added info about the X-UA-Compatible meta tag go the HTML5 Boilerplate Head Options page. If you are not familiar with the HTML5 Boilerplate project, you should definitely check it out.

The <meta> tag is one of the most commonly used tags within the <head> element of many web pages. <meta> tags are used to convey all types of metadata about a given page to the browser or a search engine spider, including:

  • Search engine keywords and descriptions
  • IE9 Jump List definitions
  • Mobile browser icons
  • Facebook application data, and LOTS more…

    The Internet Explorer team recently announced that the “metro” version of IE10 would begin to support a new <meta> tag for sites that require the use of browser plug-in’s like Adobe Flash and Microsoft Silverlight:

    <meta http-equiv="X-UA-Compatible" content="requiresActiveX=true" />

    The X-UA-Compatible <meta> tag forces IE10 to pop up a dialog asking the user if they would like to open the current page in the “desktop” version of IE10, which does support browser plug-ins. The dialog looks like this:

    metroIE10

    There are so many useful <meta> tags that it’s hard to keep track of their name’s, values and purposes. Luckily, there is a pretty good resource to help out with that:

    Brian Blakely has a great Gist that he calls “Helpful things to keep in your <head/>” which does a good job of documenting many of the most popular <meta> tags. I’ve forked his Gist and added the X-UA-Compatible tag. Unfortunately, GitHub doesn’t allow for pull requests on Gist’s, so I’ve asked Brian to include X-UA-Compatible in his Gist via a comment.

    I think that it would be helpful to turn Brian’s Gist into a full fledged <meta> tag database, which could also include useful <link> tags, such as those used for OpenID delegation. I’ll add the idea to my personal backlog – unless you, dear reader, want to take that on. Winking smile

  • – By

    An ASP.NET MVC JSONP ActionResult

    JSON with Padding (JSONP) is a slight “hack” to allow for cross origin ajax requests. Instead of making requests the standard ajax way, leveraging XMLHttpRequest, JSONP techniques make requests by writing a <script> tag into the DOM with the src attribute set to the appropriate URL. Because browsers do not limit the origin of scripts loaded via the <script> tag, data, via JavaScript, can be loaded from any of the hundreds of API’s and endpoints that support JSONP.

    Consuming JSONP services is ridiculously easy and has had support built into jQuery since version 1.2.

    //gist: https://gist.github.com/1944712
    $(function () {
        $.ajax({
            dataType: 'jsonp',
            url: 'http://example.com/JSONP/API/',
            success: function (data) {
                console.log(data);
            }
        });
    });
    

    In this case, the data that is returned from the server is logged to the browser console, but any JavaScript could be executed.

    Enabling JSONP on top of an existing JSON endpoint (server side) is fairly simple. It requires changing the HTTP response content type, and wrapping the resultant JSON string in a JavaScript function call (the padding part).

    Unfortunately, ASP.NET MVC does not ship with JSONP support out of the box, but it is easy to add with the great extensibility points available in MVC. Here is an implementation of an MVC ActionResult which would enable any controller to begin to return proper JSONP results.

    //gist: https://gist.github.com/1944346
    using System;
    using System.Text;
    using System.Web;
    using System.Web.Mvc;
    using System.Web.Script.Serialization;
    
    namespace NikCodes.ActionResults
    {
        public class JsonpResult : ActionResult
        {
            public string CallbackFunction { get; set; }
            public Encoding ContentEncoding { get; set; }
            public string ContentType { get; set; }
            public object Data { get; set; }
    
            public JsonpResult(object data):this(data, null){}
            public JsonpResult(object data, string callbackFunction)
            {
                Data = data;
                CallbackFunction = callbackFunction;
            }
    
    
            public override void ExecuteResult(ControllerContext context)
            {
                if (context == null) throw new ArgumentNullException("context");
    
                HttpResponseBase response = context.HttpContext.Response;
    
                response.ContentType = string.IsNullOrEmpty(ContentType) ? "application/x-javascript" : ContentType;
    
                if (ContentEncoding != null) response.ContentEncoding = ContentEncoding;
    
                if (Data != null)
                {
                    HttpRequestBase request = context.HttpContext.Request;
    
                    var callback = CallbackFunction ?? request.Params["callback"] ?? "callback";
    
    #pragma warning disable 0618 // JavaScriptSerializer is no longer obsolete
                    var serializer = new JavaScriptSerializer();
                    response.Write(string.Format("{0}({1});", callback, serializer.Serialize(Data)));
    #pragma warning restore 0618
                }
            }
        }
    }
    

    This action result simply takes in an object, serializes it using the standard MVC serialization method and wraps it up in a callback function. It supports jQuery’s JSONP implementation transparently. Using it couldn’t be simpler:

    //gist: https://gist.github.com/1944913
    public ActionResult ActionMethod()
    {
        var data = GetDataSomehow();
        return new JsonpResult(data);
        //constructor overload for overriding callback function
        //return new JsonpResult(data, "callback function"); 
    }
    
    

    Of course, cross origin resource sharing (CORS) is much more powerful that JSONP, and will ultimately replace it – but until then, or as long as we have < IE 10, we will still have to leverage this technique.

    Download the code, try it out. Let me know if this is valuable enough to put on NuGet.

    – By

    SharePoint ClientSide Extensions

    I had a bright idea for a fairly simple SharePoint feature a few months ago when one of my students showed me the extensive work they had done using JavaScript via the Content Editor Web Part.

    My idea was to allow for a simple way to "get JavaScript frameworks on the page".  This would allow non-technical users to simply copy and paste various little JavaScript widgits from around the web and place them on their SharePoint page.

    I began working on the feature slowly, mostly during commercial breaks and other short bursts of free time. I finished the simple idea rather quickly – but then I let the scope creep monster attack.  I kept adding more and more features UNTIL…

    Recently when other blogger’s implemented very similar ideas. Most notably:

    So I decided to stop making small tweaks and additions and get this code out into the wild, it obviously has a need.

    With that said, I’d like to introduce you to the

    SharePoint ClientSide Extensions

    SharePoint ClientSide Extensions is a simple SP solution. Once you add the solution, a site feature is provisioned which, when activated, gives you this screen in the Look and Feel column of the site administrator:

    settings

    You can add any of the above JavaScript libraries to your site, and then, via JavaScript in a Content Editor Web Part, access them.  This gives users instant access to the various widgits and UI components that these libraries provide.

    For times sake I haven’t whipped up an example of how you might use this, but I will post that soon. Until then feel free to grab the WSP and play around with it.

    I also want to point out that Jan and Gunnar have done a great job and I wanted to acknowledge their work.

    – By

    Silk Icons – Contrib

     

    Many great open source projects have corresponding “contrib” projects where people contribute additional functionality, plugins, addons, etc.

    For example, I like to use nAnt for my build scripts. I often import additional tasks from the nAnt Contrib project such as their svn and sql tags.  Microsoft’s Enterprise Library also has a great contrib project which adds additional support for MySql, SqLite and Post#.

    One library I find myself using most often is a library of free icons by Mark James called Silk.  The set includes 1,000 16×16 icons.  I’m sure you’ve seen them in the wild before.

    Mark has an additional, matching icon set of flags from nations around the world.

    Even though Mark has provided well over 1,000 icons, I still find myself needing additional icons from time to time.  Mind you, I am not a designer, so many of my attempts to create matching icons end up with me yelling at Photoshop.  That’s when I had a thought: the world needs a Silk Contrib!

    A little goggling revealed that I’m not the only one who thinks so.  DamienG has “contributed” an additional 460+ icons to the set. While I don’t have the same artistic abilities as Damien, I have out some decent icons:

    • Certificate: certificate
    • Add Certificate: certificate_add
    • Traffic Light: traffic_light

    I figure that everyone must have two or three “silk” icons that they have had to create for some project.  If this is you, then CONTRIB!  Post them up on the web and leave a comment here to we can start pooling these icons together.  Hopefully we can double the size of this icon set collectively.  If you are in need of a particular icon (IE – I could use a hard hat icon.) leave a comment as well – perhaps some designers out there would be willing to help.

    – By

    15 Seconds of Fame

    Big thanks goes out to Carl Franklin and everyone at Pwop Productions!

    They let me hang out at the studio a little but late Wednesday night – and even had me on the Dot Net Rocks podcast as a special guest for a few minutes!  Check out episode 362, and all of Carl’s great content!

    I’d also like to thank the MossMan, Randy Drisgill himself – cause, well he knows what he did…

    – By

    Post Navigation