Scott Hanselman

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. He is 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 SherWeb

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. He is 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 SherWeb

WebMatrix 2 - Front End Web Developers take note (ASP.NET, PHP, node.js and more)

September 19, '12 Comments [32] Posted in ASP.NET | ASP.NET MVC | Mobile | Open Source | WebMatrix
Sponsored By

Did you notice the release of WebMatrix 2? WebMatrix is a free, lightweight web development tool introduced in 2010. It's focus is on simplifying the web development experience for ASP.NET and PHP, and more recently node. Rob Conery actually turned me onto WebMatrix and we use it for the This Developer's Life Podcast website. I recommend it for students, designers, and web pros that either don't need or don't want the whole Visual Studio experience. It's also a nice companion to Sublime Text 2. There's even Git extensions, LESS, easy deployment and more for the front end developer.

If you want to download WebMatrix 2 and get started, it's free. It will use the Web Platform installer to install and you can use it along site VS if you want, or all by itself on any machine. It's actually a great companion for sites like Codecademy. Watch Vishal and Brady give a brief overview of the new features in WebMatrix 2 on Channel 9.

HTML, JavaScript, & CSS

The new Web Matrix 2 HTML editor adds useful stuff like code outlining, tag completion, formatting, syntax validation, and IntelliSense for HTML5.

WebMatrix has intellisense

The JavaScript editor has a better auto-formatting experience, and IntelliSense:

Intellisense in JavaScript

The new CSS editor in WebMatrix shares a lot with the new features included in the Visual Studio 2012 CSS editor. There's the color pickers, IntelliSense for the latest CSS3 modules, and better language support:

New CSS Color Picker

Here's the new hotness that I'm digging. For those who want to go beyond basic CSS, you can get preprocessors like LESS and Sass. Folks have been asking for better preprocessor support, and WebMatrix 2 includes support for LESS and Sass. The LESS editor supports the same great CSS features, along with IntelliSense for custom variables and mix-ins:

LESS

Like I said, there's lots of stuff built in. It's kind of a playground for features that will move their way between VS and WebMatrix.

File New Item

 

Related Videos: To learn more about the new CSS editors in WebMatrix 2, check out these short videos:

Razor with ASP.NET Web Pages 2

As I mentioned, Rob and I use ASP.NET Web Pages on This Developers Life. It's kind of like PHP in that you can mix code and HTML in one file except the syntax is Razor and the language is C#. The combination of WebMatrix and ASP.NET Web Pages is an easy way to get started with web development. Make a file, start writing HTML then add some code. Later you can graduate (if you want) to ASP.NET MVC. In addition to improving the web editors, WebMatrix 2 adds IntelliSense for Razor, C#, and Visual Basic:

Intellisense in Razor

WebMatrix 2 and ASP.NET Web Pages 2 include many built in helpers that make it easy to do common things like send email, post a tweet, or resize an image. If the built in packages and helpers in Web Pages 2 aren't enough for what you want, WebMatrix now also supports installing libraries and helpers directly from NuGet!

WebMatrix pulls from NuGet

Video: Justin and Vishal build an image sharing site with ASP.NET Web Pages and Windows Azure Web Sites.

Web Development with PHP

For applications that use PHP, there is a brand new PHP editor that features IntelliSense, code collapsing, and PHP 5.4 support. There's docs showing up inline there as well.

PHP Editor has intellisense

Video: Thao and Brady show the new PHP features in WebMatrix 2.

Web Development with Node.js

I have mentioned Azure before on the site and now that it supports Git deployment as well as node.js I've been paying more attention to it. One of the goals of WebMatrix 2 and Windows Azure is to make it easier to develop and host open source applications on the Windows platform. December brought support for node.js to Windows Azure. While Azure is making it easier to host node.js applications in cloud, WebMatrix 2 is aiming to improve the development experience. Out of the box are multiple project templates, IntelliSense, and support for several new languages. There's even an Express.js template.

Node.js in WebMatrix

Along with IntelliSense for the core modules built into node.js, WebMatrix also provides IntelliSense for third party modules installed via the Node Package Manager (NPM). This makes using things like the Windows Azure npm package much simpler:

Azure in node

Node.js uses a variety of rendering engines for writing views. I am told there are more planned and today WebMatrix 2 includes support for both Jade and EJS. I like Jade, myself.

Jade in WebMatrix

I'm not sure where you fall in the Great CoffeeScript debate, but some developers like to write their applications using CoffeeScript. WebMatrix supports that also.CoffeeScript in WebMatrix

Video: Justin and Vishal show new Node.js features in WebMatrix 2.

Streamlined Database Tools

The database tools in WebMatrix work with SQL Server, SQL Compact Edition, and MySQL as well.:

MySQL in WebMatrix. Scandalous.

When you're ready to publish your application, WebMatrix 2 will include your Database along with the list of changed files:

Publishing a database

Video: Learn more about managing databases in WebMatrix 2.

Mobile Web Development

You can integrate an iPhone or iPad simulator into Visual Studio, as I've blogged before. WebMatrix 2 adds an extensible model for adding new browsers, and also includes support for simulating Windows Phone 7 as well as the iPhone and iPad via a partnership with Electric Plum. Full disclosure: I love the Electric Plum guys. So nice.

iPad and iPhone

The templates included in WebMatrix 2 look nice on mobile devices out of the box since they use a combination of responsive design and jQuery Mobile.

iPhone

iPad

For those working with jQuery Mobile, there's included IntelliSense for custom data-* attributes.

jQuery Mobile

Videos: For more examples of using the mobile capabilities in WebMatrix 2, check out these videos:

The Application Gallery

There's a metric pile of Open Source projects in the Application Gallery so you can get WordPRess or Umbraco or whatever running just by File | New. Takes just a minute or two. ASP.NET and PHP apps all live together.

Web Gallery

After you install your application, there is now a customizable dashboard, designed specifically for your app type. That means that WebMatrix knows you're using WordPress and will show you stuff that WordPress folks care about.

The team has worked with the community to provide a customizable experience for many of the applications in the gallery. The dashboard provides a series of links and resources that make it easier to learn more about your app.

WordPress

For many of the applications in the gallery, there are a core set of files that should not be changed. WebMatrix will even warn users of these files.

Don't touch that file!

While customizing an application, WebMatrix 2 also includes application-specific IntelliSense. This is useful when you're just getting started working with a new application:

clip_image025

Windows Azure & Remote Editing

You can also create and deploy apps directly from the Windows Azure portal. So, rather than starting from an app on your machine, you can create it in Azure, get it running then...

clip_image027

...you've got remote site editing. After creating an application in the cloud, you can directly open a remote view into your site. This is great for making edits on the go. I'd personally use Git or source control, but I do have to admit I have a few sites that are just up there as brochures and aren't formally deployed. This feature is nice for those sites.

Remote Editing

For users using Windows Azure, the management portal allows users to install WebMatrix and open their site by clicking on a button in the command bar. This will download the site and install any required dependencies. This means once you've made your site in Azure, you can open it in WebMatrix, it will install, figure out your app (if it's in the gallery) and open it.

WebMatrix from Azure

When you've finished making your changes, the same publish command will only push the files that have changed back to your host.

WordPress editing

Video: Watch Faith customize a WordPress site and deploy it to Windows Azure.

Extension Gallery

If you're interested in extending WebMatrix 2, there is a new SDK that allows anyone to add new features or functionality. Many of the things in this post (including the mobile emulators!) are actually extensions that ship with WebMatrix 2.

Extensions

When you're ready to start building, check out the extension gallery. It has a list of extensions currently available, along with documentation on how to make your own extension.

Video: Watch Walter show you how to build a basic extension and publish it to the WebMatrix 2 extension gallery.

Wrapping it up

This release of WebMatrix 2 supports making apps ASP.NET, PHP, and node.js. You can download WebMatrix free. Let the team know if you have any feedback. Thanks Justin for helping me with some details and screenshots on this post!

Related Links


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. He is 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 SherWeb

Everything's broken and nobody's upset

September 17, '12 Comments [296] Posted in Musings
Sponsored By

Train Wreck Wikipedia CommonsSoftware doesn't work. I'm shocked at how often we put up with it. Here's just a few issues - literally off the top of my head - that I personally dealt with last week.

  • My iPhone 4s has 3 gigs of "OTHER" taking up space, according to iTunes. No one has any idea what other is and all the suggestions are to reset it completely or "delete and re-add your mail accounts." Seems like a problem to me when I have only 16 total gigs on the device!
  • The Windows Indexing Service on my desktop has been running for 3 straight days. The answer? Delete and rebuild the index. That only took a day.
  • I have 4 and sometimes 5 Contacts for every one Actual Human on my iPhone. I've linked them all, but duplicates still show up.
  • My iMessage has one guy who chats me and the message will show up in any one of three guys with the same name. Whenever he chats me I have to back out and see which "him" it is coming from.
  • I don't think Microsoft Outlook has ever "shut down cleanly."
  • The iCloud Photo stream is supposed to show the last 1000 pictures across all my iOS devices. Mine shows 734. Dunno why. The answer? Uninstall, reinstall, stop, start, restart.
  • Where's that email I sent you? Likely stuck in my Outlook Outbox.
  • Gmail is almost as slow as Outlook now. Word is I should check for rogue apps with access to my Gmail via OAuth. There are none.
    • UPDATE: Yes, I know how OAuth works, I've implemented versions of the spec. A Gmail engineer suggested that perhaps other authenticated clients (GMVault, Boomerang, or IMAP clients, etc) were getting in line and forcing synchronous access to my Gmail account. Gabriel Weinberg has blogged about Gmail slowness as well.
  • I use Microsoft Lync (corporate chat) on my Desktops, two laptops, iPhone and iPad as well as in a VM or two. A few days back two of the Lync instances got into a virtual fight and started a loop where they'd log each other in and out declaring "you are logged into Lync from too many places." So basically, "Doctor, it hurts when I do this." "Don't do that."
  • Final Cut Pro crashes when you scroll too fast while saving.
  • My Calendar in Windows 8 is nothing but birthdays. Hundreds of useless duplicate birthdays of people I don't know.
  • iPhoto is utterly unusable with more than a few thousand photos.
  • Don't even get me started about iTunes.
  • And Skype. Everything about the Skype UI. Especially resizing columns in Skype on a Mac.
  • Google Chrome after version 19 or so changed the way it registers itself on Windows as the default browser and broke a half dozen apps (like Visual Studio) who look for specific registry keys that every other browser writes.
  • I should get an Xbox achievement for every time I press "Clear" in the iPhone notification window.
  • I've got two Microsoft Word documents that I wrote in Word that I can no longer open in Word as Word says "Those aren't Word documents."
  • Three of my favorite websites lock up IE9 regularly. Two lock up Chrome. I never remember which is which.
  • AdBlock stopped my Gmail for working for three days with JavaScript errors until I figured it out and added an exclusion.

All of this happened with a single week of actual work. There are likely a hundred more issues like this. Truly, it's death by a thousand paper cuts.

I work for Microsoft, have my personal life in Google, use Apple devices to access it and it all sucks.

Alone or in a crowd, no one cares.

Here's the worst part, I didn't spend any time on the phone with anyone about these issues. I didn't file bugs, send support tickets or email teams. Instead, I just Googled around and saw one of two  possible scenarios for each issue.

  1. No one has ever seen this issue. You're alone and no one cares.
  2. Everyone has seen this issue. No one from the company believes everyone. You're with a crowd and no one cares.

Sadly, both of these scenarios ended in one feeling. Software doesn't work and no one cares.

How do we fix it?

Here we are in 2012 in a world of open standards on an open network, with angle brackets and curly braces flying at gigabit speeds and it's all a mess. Everyone sucks, equally and completely.

  • 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?
  • UPDATE: It is a communication problem? Is it easy for users to report errors and annoyances?

I think it's all of the above. We need to care and we need the collective will to fix it. What do you think?

P.S. If you think I'm just whining, let me just say this. I'm am complaining not because it sucks, but because I KNOW we can do better.

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

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. He is 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 SherWeb

Dick and Jane: Jedi Masters

September 15, '12 Comments [27] Posted in Musings
Sponsored By

Dick and Jane: Jedi MastersMy 6 year old started First Grade this last week. We've been reading to him and his brother, without fail, every night for their entire lives. It's been awesome to start seeing their little brains firing as they are starting to read on their own.

My wife picked up a copy of the classic 1950s Dick and Jane series since it's what her parents used and how she learned to read. We only made it a few pages in when both boys declared "this is boring!"

"Why is it boring?"

"There are no light sabers! Dick and Jane don't DOOOOOO anything."

So before dinner this afternoon the 6 year old and the 4 year old - the same little boys for whom I wrote The Nerd Parent's Guide: When and how to introduce your kids to Star Wars - and I proceeded to sit down and create Dick and Jane: Jedi Master.

The boys not only wrote all the text but also made all the decisions about the pictures. You can blame me for the poor Photoshop work but the kids get the credit for everything else. We printed it on glossy inkjet paper and stapled it and the boys are THRILLED.

Have fun. PDF at the bottom, thumbnails here.

NOTE: This is a parody, it's not for sale. Don't sue me. Just playin'.

 

Jump, Sally. Jump up. Flip, Sally. Flip up!Force push, Sally! Force push Tim. Fly, Tim, fly!

Use the Force, Dick. Use the Force, JaneThere is no try, Jane. There is only do. Do, Jane, Do.

We had so much fun doing this. I hope my kids end up feeling empowered to create and remix.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is 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 SherWeb

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