Scott Hanselman

Making a switchable Desktop and Mobile site with ASP.NET MVC 4 and jQuery Mobile

October 1, '12 Comments [27] Posted in ASP.NET | ASP.NET MVC | Javascript | Mobile
Sponsored By

I really enjoy working on and thinking about mobile websites. There's something about making an experience great on a pocket supercomputer phone that is so much more satisfying than a desktop. I actually got this blog looking nice on mobile devices back in 2006 when nobody was mobile except doctors and, well, all of us techies here on the blogs.

I've talked about the importance of a good mobile site before in posts like Create a great mobile experience for your website today. Please. However, some folks had asked me if I'd do a post on how to do a combination Desktop and Mobile site using ASP.NET MVC similar to the examples I used in my talks in Russia on mobile earlier this year. (There's video of those ASP.NET mobile presentations available)

When you start Visual Studio 2012 and go File | New ASP.NET MVC 4 app, there's an Internet Application template and a Mobile template. One gets you a standard desktop site - although with responsive design elements so it works on small screens - and the other gets you a jQuery Mobile application meant primarily for phones and tablets. Let's make one that switches between both.

We will do a small site in ASP.NET MVC for the Desktop, do some quick DB access, add jQuery Mobile and a View Switcher switch back and forth. I'll be using the Electric Mobile Studio from Electric Plum to simulate an iPhone. You can get a 7 day trial or you can get the Lite version of the Electric Plum Mobile Simulator with WebMatrix 2.

Quick CRUD Example

First, a model for DVDs.

public class DVD
{
public int ID { get; set; }
public string Title { get; set; }
public int Year { get; set; }
public Rating rating { get; set; }
}

public enum Rating
{
G, PG, PG13, R
}

Next, I scaffold out the Index, Create, Edit, Delete, etc. Unfortunately scaffolding doesn't do Enums (I'm sad) for my Movie Ratings so I add EditorFor() calls to my Create and Edits, and update my Index.

<div class="editor-label">
@Html.LabelFor(model => model.rating)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.rating)
@Html.ValidationMessageFor(model => model.rating)
</div>

Shared/EditorTemplates/Rating.cshtmlI could have used DropDownList I suppose, but I have always found that helper confusing. Instead, I'll create a Rating.cshtml that makes a dropdown. I could change this at some future point to be fancier and not even use a DropDown.

Aside: How do you guys usually handle Enums? I've seen it done a few ways. I'd like this to be more generic, but here's what I did for the Rating editor Template. Note the nullable ? as it has to work for both Create and Delete

@model MyApp.Models.Rating?
@using MyApp.Models

<select id="@ViewData.TemplateInfo.GetFullHtmlFieldId("")" name="@ViewData.TemplateInfo.GetFullHtmlFieldName("")">
@foreach (int rating in Enum.GetValues(typeof(Rating))) {
var name = Enum.GetName(typeof(Rating), rating);
<option value="@name" selected="@(Model.HasValue ? (int)Model == rating : false)">@name</option>
}
</select>

OK, so there's a basic Desktop CRUD app.

Editing a DVD List of DVDs

Making it Mobile

iPhone in the Visual Studio browser menuAs I mentioned, you've probably noticed when making an ASP.NET MVC application that you can choose a Mobile template with jQuery Mobile along with the standard responsive "desktop" Internet Application. However, there isn't a switchable template. That is, one that is the regular template on Desktops but switches to jQuery Mobile (or KendoUI, or whatever makes you happy) on mobile devices.

Using NuGet, install the jQuery.Mobile.MVC package. You can either right click on References, select Manage NuGet Packages, or you can use the Package Manager Console and type:

install-package jQuery.Mobile.MVC

This package will automatically bring in jQuery Mobile as well as:

  • A ViewSwitcher partial view and supporting Controller
    • This is what lets us switch manually between Desktop and Mobile
  • A basic _Layout.Mobile.cshtml and supporting stylesheet
  • A BundleMobileConfig.cs used with ASP.NET Optimization (the bundler for CSS and JS)

NOTE: There's nothing jQuery Mobile specific about the ViewSwitcher or the techniques here. You can happily change this package for any other popular mobile framework.

We start by adding the new Bundles in the Global.asax:

BundleConfig.RegisterBundles(BundleTable.Bundles);
BundleMobileConfig.RegisterBundles(BundleTable.Bundles); // <-- ADD THIS ONE

Since I installed the Electric Plum iPhone simulator, I'll select it from my browser dropdown in Visual Studio and run my app and navigate to /DVD.

The system sees that I'm on a mobile device and rather than using _Layout.cshtml it uses _Layout.mobile.cshtml.

This doesn't really look nice for a few reasons. First, I don't like the default style. Just go into _Layout.Mobile.cshtml and change the data-theme attribute to a value that makes you happy. I changed it from theme a to theme b.

Basic App in an iPhoneSame baisic app with a light background

Second, while I'm using the _Layout.Mobile.cshtml I'm still using the desktop Index.cshtml which looks lousy when displayed in the mobile layout. Remember that I only have an single Index.cshtml. If I had an Index.mobile.cshtml the system would use that page instead when rendering on a mobile device.

I can make an Index.Mobile.cshtml with simpler markup, change the table into an unordered list and add some jQuery Mobile specific attributes like this:

@model IEnumerable<MvcApplication2.Models.DVD>
@{
ViewBag.Title = "My DVDs";
}
<ul data-role="listview" data-filter="true" >
@foreach (var item in Model) {
<li>
<a href="@Url.Action("Details", new { item.ID })">
<h2>@Html.DisplayFor(modelItem => item.Title)</h2>
<p>@Html.DisplayFor(modelItem => item.Year) - @Html.DisplayFor(modelItem => item.rating)</p>
</a>
</li>
}
</ul>

Note the data-role and very basic elements like <ul>, <li>, <h2< and <p>. I also added the client side data-filter attribute to get some nice client-side searching. Hit refresh and now it's starting to look like a real mobile site.

See the ViewSwitcher at the top there? That's a partial view called _ViewSwitcher.cshtml.

A lovely jQuery Mobile example list of DVDs

By default it will let you switch back and forth between Desktop and Mobile but only on mobile devices. Why? Check out the first line of code:

@if (Request.Browser.IsMobileDevice && Request.HttpMethod == "GET")
{
<div class="view-switcher ui-bar-a">
@if (ViewContext.HttpContext.GetOverriddenBrowser().IsMobileDevice)
{
@: Displaying mobile view
@Html.ActionLink("Desktop view", "SwitchView", "ViewSwitcher", new { mobile = false, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })
}
else
{
@: Displaying desktop view
@Html.ActionLink("Mobile view", "SwitchView", "ViewSwitcher", new { mobile = true, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })
}
</div>
}

That first line checks if it's a mobile device making the request. Just surround that with /* comments */ and you'll be able to view and debug mobile layouts with your desktop browser without faking User Agents.

So far we've been talking about "mobile" and creating files with "mobile" in their file names and it's all been magic. Turns out we have lots of control over these things. Perhaps we want more than Index.mobile.cshtml but also, perhaps, Index.iPhone.cshtml and Index.WP7.cshtml.

Create lines like these in your Global.asax:

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("WP7") {
ContextCondition = ctx => ctx.GetOverriddenUserAgent().Contains("Windows Phone OS")
});
DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone") {
ContextCondition = ctx => ctx.GetOverriddenUserAgent().Contains("iPhone")
});

You can affect the DisplayMode collection (of which "mobile" is one) by inserting in your own. Here I'm making two more specific mobile ones but you don't need to do mobile things to change DisplayModes.  A DisplayMode could be right to left for RTL languages, or "gold" and "bronze" for customers or whatever makes you happy, based on the ContextCondition you evaluate on each request.

There's lots of choices and you've got the flexibility to do things however you like. I'll show an example of a totally offline iPhone site using cache.manifest in a future post.

Related Links

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. I am a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

How to create a DVD on Windows 8 even though Windows DVD Maker is gone - DVDStyler

September 30, '12 Comments [84] Posted in Tools | Win8
Sponsored By

DVDStyler standard NTSC options of 720x480I make a lot of DVDs. I make them for weddings for family and for funerals and memorials. I make trip DVDs and memory DVDs and all sorts of stuff.

Why don't you put all that stuff online, Scott? Why don't you put it on Facebook/YouTube/Vimeo/Whatever? There's a couple reasons. First, believe it or not, there's a lot of people in the world who don't have high-speed internet. We've got lots of relatives overseas who don't have a laptop at home nor do they have any internet in their home. Here in the US we've got lots of older relatives who don't have computers, or perhaps they only have an iPad and a link to a YouTube video doesn't have the sense of meaning or permanence that a DVD does.

Random Aside: It's a shame that today's young people won't realize how much effort it took to create a mix tape for someone. Rearranging MP3s and emailing a list isn't the same as waiting for specific songs to get played on the radio and pressing Record within the first two notes.

Perhaps making DVDs is a lost art and I'm an old fogey. Or perhaps DVDs are today's mix tapes.

Regardless, I recently installed Windows 8 on my home machines and my laptop. Around the same time my Uncle Ronald - the closet person I've ever had to a grandfather - passed away. I immediately got to work creating a DVD for his memorial service. I had 30 minutes of audio of Uncle Ronnie that I recorded for a never-aired podcast. I had hundreds of photos over 90+ years of his life, 8mm and Super8 film reels as far back as the 50s, combined with digital video going all the way back to 1998 from my own collection. I was looking forward to burning many DVD copies and mailing it to interested relatives as well as playing the DVD at the memorial.

I spent many hours putting together a tribute video. I used Movie Maker as I have for many of my projects. I also have Adobe Premiere but for putting together family videos there's little easier than Movie Maker. I did my editing and went to Save Movie to export my movie as a WMV to import into Windows DVD Maker. But there was no DVD option. Confused, I searched the start menu for Windows DVD Maker. I'd used it just a week before...before I upgraded my Windows 7 to Windows 8.

Windows DVD Maker was gone. It's not in Windows 8. :(

I was pretty bummed as I needed to make DVDs for the memorial event and I kind of needed them immediately. There's lots of different third party DVD creation software packages but I've always personally felt that media players and media creation software from 3rd parties (Roxio, CyberLink, etc) have always been rather garish in their user interface style. They never LOOK like they belong in Windows. There's always bright red window chrome, the same airbrushed happy clipart families in splash screens.

I just want to import a video file into a simple app and create a DVD. Preferably for free.

Save as DVD from within Windows Movie MakerI evaluated a number of DVD creation suites over a number of hours and decided on the open source DVDStyler. I like DVDStyler because it's extremely spartan in its user interface but extremely capable. One could believe it was included with Windows and it is an excellent complement to Windows Live Movie Maker. For me, installing DVDStyler makes up for DVD Maker being gone on Windows 8.

IMPORTANT NOTE/WARNING: While it is an open source GPL'ed project, in order to support itself DVDStyler does install some toolbar software and will change your browser home page and install additional software if you just "next, next, next, finish" through their installation process. When installing free software please ALWAYS be aware of what you're saying YES to. Be sure to use the Custom installation option and select (or deselect) the options that are right for you. While I found these changes surprising and an annoyance, I feel the value provided by this free software to be worth the annoyance of these other applets. I removed them later via Uninstall Programs as well as by manually removing extensions in Firefox and IE.

When you save your movie from Windows Live Movie maker, you might want to make a Custom Production Setting. I created one and called it DVD and set it to 720x480. You might change this if you are creating PAL (720x576) or NTSC DVDs. It's up to you. The point is that Windows Live Movie Maker has no standard DVD movie creation option anymore but you can create any custom setting you'd like.

Creating a Custom DVD Setting in Windows Live Movie Maker

In DVDStyler I use similar settings. Be sure to select 16x9 if most of your source material is widescreen and most of your destination TVs are also widescreen. I usually use DVD-5 (4.7 gigabytes) but occasionally I'll use a dual-layer DVD-9 (8.5 gigabytes) and a high bitrate if there is a lot of action on the screen.

You can burn the DVD directly or, if you want more control, create an ISO file and use another tool like ImgBurn to burn or create multiple copies.

Burn image from DVDStyler

I'm glad to have found a reasonable, simple and free option for creating DVDs on Window 8 in DVDStyler.


Sponsor: Be part of GENERATION APP. Your Idea. Your App. 30 Days. Begin your 30-day journey to create a Windows Store style app and talk 1-on-1 with a Windows 8 app development pro. Get started today.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. I am a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

A Bug Report is a Gift

September 24, '12 Comments [36] Posted in Bugs | Musings
Sponsored By

There were lots of reactions to my blog post Everything's broken and nobody's upset. Some folks immediately got the Louis CK "Everything's Amazing and Nobody's Happy" reference. Some folks thought it was a poorly worded rant. Some folks (from various companies) thought I was throwing developers under the bus, accusing them of not caring. Others saw a meta-goal and started a larger discussion about software quality.

The questions I asked were these...but the most significant one was added a few hours later, suggested by a reader.

  • Is this a speed problem? Are we feeling we have to develop too fast and loose?
  • Is it a quality issue? Have we forgotten the art and science of Software QA?
  • Is it a people problem? Are folks just not passionate about their software enough to fix it?
  • It is a communication problem? Is it easy for users to report errors and annoyances?

After the post I went back and tried to file bug reports for all the issues I bumped into. For products where I couldn't find an easy bug reporting site I used Twitter. Google and Microsoft were universally pleasant when I reported the bugs and seemed sincerely interested in helping.

Is it easy for your users to report a bug? Does you app automatically report crashes? Is your site friendly? Are you support people friendly and engaged? Are your bug support forums filled with reports but no company representatives? Do you use GetSatisfaction or UserVoice?

Anatomy of a Good Bug Report

Ideally the "best" bugs are those that can be reproduced given enough context. You can save developer time and trouble by giving them as many details as you can. Developers can save everyone time with bug reporting tools that collect that information for users.

Mozilla Crash Reporter

For example, on Windows if you run "msinfo32.exe" you can get a complete snapshot of your system.

Send a Frown and Send a Smile

I am a big fan of the "Send a Frown" way of getting bugs.

Firefox made me sad because...

The Office 2013 Previews even have hotkeys for this!

Office 2013 Send a Frown

Sending feedback is even better with screenshots.

Give Feedback with Screenshot in Office 2013

The help menu for Skype includes a Give Feedback menu as well as "Skype Status."

Give Feedback menu in Skype

As a user, if you can include information like:

  • What were you doing? What were you trying to do?
  • Advanced folks: What weird add-ins/extensions or hacks are you using that you haven't mentioned but you really should? *cough* Adblock *cough*
  • Can you make it happen every time?
  • Can you include a screenshot? Bonus points for a screencast!

This is a lot to ask of a user!

Some examples of where to file bugs

Here's some sites you can use to report bugs in certain applications. Note that some are fancy, some spartan, some just forums, some actual bug tracking software, made for and used by developers.

Or, the ultimate place to file bugs for your favorite software, as my friend Anil points out:

How hard does the user have to work to file a bug? It's OUR bug but the user not only hit the bug but also has to work to report it!

Every click or manual step that our users have to invest in our bug is a click too many. A bug is the pain that hurts the user and keeps hurting as they report it! A good bug report is a gift that keeps on giving and we should treat it as such.

I'd love a world where all crashes are automatically reported and there's a "Send a Frown/Smile" button on everyone's computer that offers to record a short screencast with just a single "record/stop" button.

What product do you think has the best bug filing experience? Sound off in the comments!


This week's sponsor: Be part of GENERATION APP. Your Idea. Your App. 30 Days. Begin your 30-day journey to create a Windows Store style app and talk 1-on-1 with a Windows 8 app development pro. Get started today.

Related Posts in this Three Part series on Software Quality

  1. Everything's broken and nobody's upset
  2. A Bug Report is a Gift
  3. Help your users record and report bugs with the Problem Steps Recorder

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. I am a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

Moving a website to Azure while adding Continuous Deployment from Git

September 20, '12 Comments [25] Posted in ASP.NET | Azure | Open Source
Sponsored By

I've got this little one page website I wrote a few years ago that attempts to detect the version of the .NET Framework you have and give you a download for the smallest redist you need to get up to date. It's called SmallestDotNet.  It was written and thrown up while watching an hour of TV. Fortunately or unfortunately this little throwaway still gets about 10,000 page views a month. It also has a tiny JSON API that a lot of people have actually embedded into their sites and products.

Additionally, it's starting to break. IE9+ doesn't include .NET Framework details in its HTTP User-Agent. The site isn't setup for .NET 4.5, etc. You get the idea. Plus, it's a pile of if statements and prayer and it's just horrible. Worse yet, it lives in a ZIP file on my hard drive and I drag it into SmartFTP to deploy. Yes, I know, this is all thick with irony.

I took and hour over lunch today to accomplish these basic goals:

  • Get this crap site into source control so others could help fix it
  • Move the site to Azure and off my blog's server
  • Update the site's DNS
  • Setup continuous deployment with Git to Azure
  • Fix the .NET 4
  • Maybe add .NET 4.5 detection
  • Cleanse myself, possibly by reading Programming Pearls

Making a Site in Azure

I use the Azure Command Line Tools (get them with npm install azure). (I did an npm update azure --global to make sure I had the latest.)

I clone my Git Repository, create an Azure site, then make sure my Azure site is setup as a remote. (Soon the remote add will be made automatically when creating an Azure site from within a Git repro)

git clone https://github.com/shanselman/SmallestDotNet.git
azure create site SmallestDotNet

I copied my site in from elsewhere and

git add .
git commit -m "Initial Commit"

Next, I'll associate my Azure site with my GitHub (or CodePlex) repo. I could also deploy from local files, but I like the idea of an auto-deploy since I'll guessing I'll be making lots of changes and this is one less thing to worry about.

From the Deployment tab on the Azure Portal I'll use OAuth to authorize azure with GitHub.

Associate a GitHub Repository

Then...

Authorize Windows Azure?

I'll confirm the repository I'm using:

Setup Publishing and Select the Repository to Publish

This sets up a WebHook plugged into GitHub so it'll notify Azure when a push happens, Azure will deploy.

Now, I'll push my repository to origin.

git push origin master 

Within a second or so of this push, the site automatically updates and is up and running at smallestdotnet.azurewebsites.net. I'll do a custom domain in a second.

Yes, I should probably make a deployment branch. I could have two small Azure sites and then have each represent a deployment from a different branch in Git. Then I could git push staging and git push production.

Animated Gif showing a Deployment slide into the queue

To move the domain name records from my own server to azure, I'll log into my DNSimple account (referral link for a free month!) and create a CNAME that points to my new site.

Creating a CName and an A Record to point to Azure

Back in the Azure Management Portal - about 10 minutes later - I'll click Manage Domains and enter my new CName.

image

I'm also using an A record so read the instructions carefully.  After Azure verifies the CNAME, I return and add the A record. That way I can have not just www. but also the "naked" domain work as well.

I visit the site, and boom. It's there. http://www.smallestdotnet.com/ is on Azure in less than a lunch hour. About 25 minutes, actually. Whew.

Next, I have to fix the horrible code and bugs. Join me and issue a pull request.  ;)

Thanks to Calin Balauru for his help with the code a few months back.

Related Reading: ScottGu on Continuous Deployment in Azure with Git

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. I am a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

Web Sites with Embedded Command Lines: You got your Command Line in my Internet

September 20, '12 Comments [27] Posted in Musings | Tools
Sponsored By

Photo by Osama Khalid and used under Creative Commons CC BY-SA 2.0Eight years ago I wrote a post called Opportunity: Windows is completely missing the TextMode boat. The language is dated...

I assume we all realize that there are literally millions of Windows machines from 95 to XP that exist only to allow more than one Telnet/ProcommPlus/Terminal window at a time, so end-users can interact with remote systems.

...but the point is there.

I’m just saying that my Tab,Tab,Tab,Enter will beat your Click,Tab,Alt-F,O,Click,Double-Click, more often than not and I will take the Pepsi Challenge otherwise.

Command Lines are faster than Graphical User Interfaces. Command Lines and all the things we string together within them are DSLs (Domain Specific Languages) for Getting Stuff Done™.

How often have you seen (or worse yet, written) a graphical interface to express or build something like that could be more tersely expressed as "/^[a-z0-9_-]{3,16}$/"?

Other than the Address Bar, the Command Line isn't something you see a lot on the web...yet. We have been seeing more and more sites embracing hotkeys, though.

We've seen Google products embracing Vi's "hjkl" cursor movement and nearly everyone popping up hotkey help by pressing "?". I use the Twitter website and its hotkeys more than a 3rd party Twitter client.

Related Reading: The Web is the new Terminal: Are you using the Web's Keyboard Shortcuts and Hotkeys?

While we all love bash, zsh, PowerShell and many other shells, it's interesting to me that the command line is infiltrating the web itself.

Command Lines on the Web

Search engines have been the obvious place for Web Command Lines to pop up. Google and Bing each allow us to use their search boxes as Calculators. Google even supports Bacon Numbering!

Perhaps the first example I saw of a "Web Command Line" was the Rails Day submission YubNub in 2005 by Jonathan Aquino. Futz.Me is another example that uses URLs as its command line. DuckDuckGo - the little search engine that could - is fast becoming the search engine for the hardcore command liners. DDG supports what they call "Bang Syntax." Make any query and add a !keyword and you're taking to a custom search. There's the obvious ones like !g for Google but also !code, !csharp and hundreds more. You can even extend DuckDuckGo and Submit your own Bang command!

Jeff talked about the Address Bar as Command Line in 2009 but I think the command line is starting to go even father than the address bar. Why not embed the concept of a command line in the website itself?

Moving from simple search to more complex navigational schemes, GitHub recently announced their Command Bar, which is a fantastic example of a Web Command Line. It supports an easily learned series of chained commands so I can quickly jump to any user, any project, any issue and more.

GitHubs Launch Bar is a command line embedded in a website

It's funny how we, the makers of the web, prefer to spend time managing the Web from the command line. The Windows Azure Team spent a lot of time recently updating the Management Portal with amazing new features and a nice new HTML5 website, but I've ended up managing my Cloud applications with the Azure Command Line in cmd.exe or PowerShell.

Azure command line format "topic verb options"

For me, it's simply faster, clearer and more obvious.

scott@hanselmac:~$ npm install azure
npm http GET https://registry.npmjs.org/azure
...bunch of GETS...
scott@hanselmac:~$ azure
info: _ _____ _ ___ ___
info: /_\ |_ / | | | _ \ __|
info: _ ___/ _ \__/ /| |_| | / _|___ _ _
info: (___ /_/ \_\/___|\___/|_|_\___| _____)
info: (_______ _ _) _ ______ _)_ _
info: (______________ _ ) (___ _ _)
info:
info: Windows Azure: Microsoft's Cloud Platform
info:
info: Tool version 0.6.0
...bunch of help stuff...

HTTP itself becomes friendly and fun at the command line with tools like HTTPie that allow me to almost write HTTP on the command line!

HTTPie is HTTP for Humans and Syntax Highlights as well

Firefox 16's Beta Channel recently added a Firefox Command Line. You can explore your DOM, HTTP response, cookies, elements, everything all from a simple command line. Why click an element when you know you want to "inspect #mainbar"?

Command Line for Firefox

Learning sites like TryRuby, TryF#, Codecademy, PexForFun, and dozens more embed textboxes as command lines, and surprisingly users don't freak out when they see them. I must say I still remember the first day I saw TryRuby in a browser. I was blown away.

Luke Lowrey went so far as to make "NetBash" a command line for admins to manage websites! It's all web-based but pops up almost Quake-style as an overlay within your browser. Brilliant. NetBash is on GitHub.

A bash-like shell overlaid on a website

What sites have you seen with embedded Command Lines? What web-based tools or sites have used a Command Line and DSL in a way that surprised you?


Sponsor: Thanks to DevExpress for sponsoring this week's feed. Multi-channel experiences made easy: Discover DXTREME. Delight your users with apps designed expressly for their device. DXTREME, multi-channel tools build stunning apps across devices & optimize for the best of each platform, from Win8 to the iPhone. And, the powerful HTML5, CSS and JavaScript tools in DXTREME also build interactive web apps.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. I am a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.