chris barr

Photo/Dev/Design

Easy Bundles for .NET MVC4

You’ve heard about bundles in .NET 4.5, right? If not you should read up on them, but the basics are that you can include multiple uncompressed JavaScript and CSS files in your project when in debug mode. When the project is deployed to production it will combine and minify the files for quicker downloads & fewer requests. Pretty handy!  At work we’ve recently begun using bundles in our MVC4 application.

The bundles are handy for the global files that need to be included everywhere, but nearly every page has it’s own specific CSS or JS files that needs to be linked to,  ideally minified as well, and possibly combined when there are multiples.

In razor, here’s the syntax we use to link to these files:

@Html.Style("~/Styles/someFile.css")
@Html.Script("~/Scripts/foo.js", "~/Scripts/bar.js")

Pretty easy right? Just link right the the file, or multiple files and they will be included on the page, but in production they will be minified and combined when multiples exist. How is this done you might ask? Well, take a look at this class below that gives us some extensions in the @Html. namespace.

That final MakeBundleName function will make the filename for the bundle (duh). Let’s say you provide it with the two script paths from the usage example above. The final output url for the bundle would be ~/Scripts/bundles/Scripts.foo+Scripts.bar – Basically it just replaces slashes with dots and concatenates multiple files with a plus. This allows for a unique name, but it also won’t change between page loads since it’s based on the input file names.

This all came about from a StackOverflow question I helped answer. There are a few caveats to this method that could be improved upon, the biggest of which is that this will automatically decide the bundle path for you.  This means that relative paths inside of your CSS/JS files will not work when the bundle URL is used!  For our use case, this is fine, but for what you do, it might not.  It would be fairly easy to extend this to have a different syntax like this if needed:

@Html.Script("~/bundles/my/custom/path", "~/Scripts/foo.js", "~/Scripts/bar.js")

Questions? Comments? Improvements? Let me know!

Mix ’09 Session Videos

I just got back from the Mix ’09 conference in Las Vegas, and it was so much better than I expected! For being a Microsoft sponsored conference mostly focusing on .NET and other MS technologies, there was about 50% Mac users there and most of these people were designers. It was a really nice mix (haha?) of designers and developers. I’ve got some photos from my trip up here on Flickr.

I think one of the best things they do is put up ALL the session videos online for free! There’s some really valuable information in these!
http://videos.visitmix.com/MIX09 (also you can view past years MIX sessions at http://videos.visitmix.com )

Here’s some highlights I’m going to recommend:

  • Web Form Design – absolutely one of the best sessions I attended. Watch this video! He talks about why forms suck and what we as designers can do to help the process along. Very very well done and extremely informative. As soon as this session was over I went and bought the speakers book.
  • The Way of the Whiteboard: Persuading with Pictures – Anotehr great session, but not necessarily directly related to web design. It’s on how to get ideas out of your head and communicate them properly to people via a whiteboard of napkin.
  • Measuring Social Media Marketing – If you or your company does any kind of social media marketing, this is a great one.

The following sessions I did not attend, but they seem great:

And finally, for any other ASP.NET or Visual Studio users, These are somre great previews of what’s coming soon!

MIXed up in Las Vegas

Once a year my company, AppRiver, allows me to attend one work related conference and my for first year working here I’ll be attending MIX ‘09 in Las Vegas!  Until recently, this wasn’t even a conference I’ve heard of, so don’t worry if you haven’t heard of it before either.  Mix is an annual conference for web designers and developers with a heavy focus on Microsoft technologies (also sponsored by Microsoft).

So, I’m headed out to Vegas on Monday the 16th and expect to learn a lot and have a blast doing so for about a week.  I’m scheduled for a few different sessions that I’m excited about attending, and there’s tons and tons of sessions to attend. Need I even mention this all takes place in Las Vegas?  I took a trip out there about 3 years ago with my dad and had a blast, so I fully expect to have a great time when I’m not doing web related stuff.  I know the grand canyon and the Hoover Dam are fairly close, and it would just be a dream come true to see either one of these (or both!).

I’ll hopefully be fully armed with my laptop and camera where ever I go, and a goal I’m going to try and set for myself is to do a daily photo-blog of what’s going on at the conference and anything else I can take pictures of.  It’s my first conference and I’m usually pretty trigger happy, so expect lots of photos.

More info about Mix here: http://2009.visitmix.com