• Leverage the Oh My Post Azure segment to show my current Azure CLI session
• Dynamically change my terminal background image to make it more obvious which cloud I was currently connected to (i.e., Azure public vs. Azure Gov)

While those two things sounded great, neither was precisely supported "out of the box". (Side note: before I start diving into Oh My Posh in this post, I highly recommend checking out their docs for those who are not familiar).

Oh My Posh Azure Segment

The Oh My Posh Azure Segment will contextually display information about your current Azure CLI session like this:

This segment (in light blue above) shows me the currently logged in user and the name of my Azure subscription. However, it doesn't tell me which Azure cloud I'm logged into. Yes, it's pretty easy to know which usernames I use for Azure public vs. Azure Gov, but it's not obvious. Switching between Azure and Azure Government using the Azure CLI is done simply using these CLI commands:

az cloud set --name AzureCloud         # sets to Azure
az cloud set --name AzureUSGovernment  # sets to Azure Gov

The first challenge is that the environment name wasn't supported by the Oh My Posh Az segment. After a couple of emails with Jan De Dobbeleer (of Oh My Posh fame), and a blazingly fast turn-around on Jan's part for a new release, the Az segment was updated to use templating so that any property in the az account show command could be used. With this ability, my Az segment configuration now looks like this:

{
  "type": "az",
  "style": "powerline",
  "powerline_symbol": "\uE0B0",
  "foreground": "#000000",
  "background": "#9ec3f0",
  "properties": {
    "template": "{{.EnvironmentName}} | {{.Name}}",
    "prefix": " \uFD03 ",
    "include_folders": [
      "*\\\\az"
    ]
  }
},

Which results in a terminal prompt that looks like this:

Now I can configure this to show whatever I want - which in this case is to show the environment name (AzureUSGovernment or AzureCloud) followed by the current subscription name.

One other thing to note is that I'm using the include_folders property in my configuration above. This is because segments like this can cause a little bit of a delay since they're invoking an az cli command every time it renders a prompt. So I wanted a quick way to turn the segment on/off on demand without having to mess with my oh-my-posh configuration. This enables me to just cd ~/az anytime I want to turn this segment on.

Dynamically Change Terminal Background

The oh-my-posh Azure segment now does exactly what I want, but wouldn't it be great to have an even more obvious way to see which cloud I was logged into? And be able to see it all the time rather than only when I'm in the ~/az directory? For example, notice in the screenshot below, I'm logged into regular Azure public ("AzureCloud" is showing as my environment in the Az segment) and the normal Azure icon is shown in the bottom right as my terminal background.

I switch back and forth between Azure and Azure Gov frequently. Scott suggested that it would be cool to dynamically change that icon in the lower right to show that as well. However, integration between oh-my-posh and Windows Terminal isn't natively supported. But what about a more "brute force" approach? I could create a couple of functions in my PowerShell profile ($profile) that:

1. Set the Azure cloud via the az cloud set command (the oh-my-posh Az segment will change accordingly)
2. Set the Windows Terminal background image to change depending on cloud

The Windows Terminal doesn't have any magical API that you can programmatically manipulate. However, it does have a settings.json file that it watches for changes. So I can just change the backgroundImage property of the correct profile and that should do the trick. Here are the functions I added to my $profile:

function Set-AzureCloud() {
  param([string]$cloud, [string]$img)

  az cloud set --name $cloud

  # Set background for Windows Terminal
  $settingsPath = "$env:LocalAppData\Packages\Microsoft.WindowsTerminalPreview_*\LocalState\settings.json"
  $json = (Get-Content $settingsPath -Raw) | ConvertFrom-Json -Depth 32
  $psProfile = $json.profiles.list.Where({$_.name -eq 'PowerShell'})
  $($psProfile).backgroundImage = "$home\Dropbox\utils\terminal\$img"
  $json | ConvertTo-Json -Depth 32 | Set-Content (Get-Item $settingsPath).FullName
}

function Set-AzPublic {
  Set-AzureCloud 'AzureCloud' 'azure-tr-236x225.png'
}

function Set-AzGov {
  Set-AzureCloud 'AzureUSGovernment' 'ages-tr-236x225.png'
}

With that in place, it enables me to have nice PowerShell commands (with auto-completion) on my command line - Set-AzPublic and Set-AzGov - that enable me to do this:

(Note: the red-white-blue Azure logo is completely non-official and just something our team uses internally.)

For those looking to customize their own terminal, I recommend starting with Scott Hanselman's Ultimate PowerShell prompt. Additionally, I keep my terminal customizations (including all the code I showed in this post, and more) on my GitHub here.

I just released my latest (and 11th!) Pluralsight course: Dapper: Getting Started. Dapper provides a super fast library for mapping between databases and .NET objects. This code-focused course will introduce you to all the basics you need to be productive with Dapper and incorporate it into your own apps. This course is largely a "refresh" of my origial Micro ORMs course from back in 2013 - but updated for the modern day using Visual Studio 2019. You can check out this course here.

Also, a few months ago I released ng-bootstrap Playbook. ng-bootstrap provides seamless integration between the latest versions of Angular and Bootstrap. This course will introduce you to every component in the ng-bootstrap library and show you how to easily use them in your own apps. You can check out this course here.

I'm pleased to announce my latest (and 10th!) Pluralsight course went live last week: ng-bootstrap Playbook.

ng-bootstrap provides a native Angular implementation for the rich components in the Bootstrap library, enabling great user experiences. In this course, ng-bootstrap Playbook, you will learn how to fully utilize the ng-bootstrap library. First, you will see how to install ng-bootstrap into your own apps and get up and running quickly. Next, you will get familiar with how to use ng-bootstrap Forms and Structural components. Finally, you will explore ng-bootstrap Informational and Navigation components. When you're finished with this course, you will have the skills and knowledge of ng-bootstrap needed to fully leverage these awesome components in your apps.

Course Modules

1. Introduction - This module introduces the framework and we preview the demo app used in the course.
2. Initial App Setup - This modules sets up the initial app structure and installs ng-bootstrap into the app.
3. Basic Forms - Here we cover the basic forms components including the datepicker, timepicker, rating, and typeahead.
4. Structural Components - This module covers the structural components including the accordion, modal, tabs, and carousel.
5. Informational Components - Next we dive into information components such as the alert, tooltip, popover, and progressbar.
6. Navigation Components - The final module will deep dive into pagination - both on the client-side and server-side.

If you want to learn how to quickly build apps with the latest version of Angular and Bootstrap leveraging the ng-bootstrap library, checkout my latest course on ng-bootstrap.

It's now been a year since I joined Microsoft and I have to say, it's been quite a ride. Last year I joined the Azure Government Engineering team - this is one of the only engineering teams at Microsoft that is not based primarily in Redmond (which makes sense since we're close to the Federal government in Washington, DC). I generally travel to Redmond about every 8 weeks for face-to-face meetings and other activities - this definitely helps me be "connected to the mothership".

I was fortunate to join a growing team of passionate people that are totally invested in truly empowering our government agencies by bringing the best Microsoft technologies to their mission. Prior to joining Microsoft, I heard a lot of quotes about "customer obsessed", but I didn't know if that was reality or just marketing hype. What I've found in the last year on my team is that it's 100% real. All team activities are tracked back directly to customer demands. Our work is all prioritized directly in response to customers needs.

Similar to other teams like ours at Microsoft, most everyone on the team has some sort of "Program Manager" title. I've found that this post from back in 2007 - although being over a decade old - still does a good job of describing the PM role at Microsoft in general.

Because Azure Government isn't just a single product/service - it encapsulates all of Azure services - I get the opportunity to work with most any Azure Service. Though in the last year I've found a lot of my time focused in the areas of AI, Cognitive Services, and Machine Learning.

In my role specifically, I've found that about 50% of my time is spent on public customer-facing activities, and about 50% on non-public activities. In my public facing role, I'm focused on developer enablement for Azure Government. This includes several activities including:

• Organizing Azure Gov HackFest events throughout the US
• Publishing blog posts on the Azure Gov blog
• Managing the Azure Gov documentation
• Contributing to open source Azure Gov code samples to the open source ecosystem, such as the Intelligent Mission app
• Creating the Azure Government Video channel on Channel 9
• Delivering numerous presentations on Azure for Government literally all over the world
• Ensuring that normal Azure tools work seamlessly with Azure Government

Some of the highlights for me was getting the opportunity to give a presentation on Azure Government at Ignite in Orlando:

I also had the opportunity to travel to the UK and London to deliver presentations to our government customers there. I also went to Australia (Melbourne, Canberra, and Sydney) for similar customer presentations and meetings. This included taking a tour of the new Azure data center in Canberra which was way cooler than I expected.

Another cool experience was doing the demos during one of Jason Zander's keynotes at the interal Microsoft conference in front of an audience of 2,000 people.

Equally as interesting has been my non-public facing activities. This enables me to leverage my development background to build solutions and POCs that are directly relevant for our customers. I informally refer to this as, "does our software do what we say it will do?" If/when we find gaps, we work with the Product teams to drive solutions in our products that will enable our government customers to fulfill mission objectives. Additionally, in this area we work to drive overall Microsoft strategy for Azure Government customers to ensure that we're producing the tools that our customers are seeking - and that we have referenceable architectures that can be implemented with Azure technology.

In summary, the past year was probably more of a "whirlwind tour" of any year in my career. I can't wait to see what this year brings.

After 8 tremendous year at AIS, I have recently decided to move to Microsoft. In my new role at Microsoft, I'm a Program Manager on the Azure Government Engineering team. My focus will be on developer enablement for the Azure Gov platform. I'll be working with developers from Federal, state, and local governments to optimize their use of Azure Government, helping them to build amazing solutions on Azure technology.

AIS is truly a great company - widely considered by many to be the best Microsoft partner anywhere on the east coast. If you're a consultant and you want to work with the best, AIS is the place you want to be.

In my new role at Microsoft, I'll still be actively engaged in the developer community through DC/VA/MD/PA and beyond. I'll still be speaking at local user groups, and I'll still be authoring courses for Pluralsight.

If you're a developer (in the government space, in particular), and your organization/agency is in the process of moving to (or considering) Azure Gov, feel free to reach out to me anytime - I want to hear from you!

I'm pleased to announce my latest Pluralsight course has been released: Building Mobile Apps with Ionic 2, Angular 2, and TypeScript.

The first version of the Ionic framework took the mobile development world by storm and established itself as the most popular open source framework for building cross-platform mobile apps. Built on top of Angular, Ionic enabled developers to write cross-platform mobile apps with the web development tools/frameworks that they were already familiar with. Ionic 2 takes this to a whole new level! Built on top of Angular 2 and TypeScript, Ionic 2 enables developers to take advantage of all the latest advantages of the latest web technologies, as well benefit from all the "lessons learned" in the first version of the Ionic framework.

This is a totally code-focused course. In the beginning of the course, I focus on how you can quickly get started with Ionic 2. After getting started, we build a complete end-to-end app from scratch over the duration of this course which includes navigation, HTTP, numerous Ionic Components, Ionic Native, and more!

Course Modules

1. Introduction - This module introduces the Ionic 2 framework. We will cover helpful background context on what Ionic is. We will also preview the app that we will be building throughout this course.
2. Getting Started with Ionic 2 - This module introduces getting started with Ionic 2 hands on. We'll cover installation, creating your first project, and running your app with several different mechanisms including deploying directly to a mobile device.
3. Navigation - This module introduces Ionic 2 Navigation. We'll first understand the Ionic Navigation Stack and then see how to use it hands-on to navigate to different screens. Advanced navigaton topics will also be shown.
4. Working with HTTP and Lifecycle Events - This module covers working with HTTP and Ionic 2 Lifecycle Events. We'll show how to retrieve data from an HTTP Web API with Promises and RxJS, while also providing visual indicators to the user.
5. Ionic 2 Components - This module covers the most commonly used Ionics 2 components. We'll cover numerous components including Lists, Buttons, Cards, Grids, DateTime, Toggle, Badges, Alerts, Toasts, and more.
6. Ionic 2 Components - Beyond the Basics - This module covers more advanced scenarios for Ionic 2 Components. We'll show numerous components including Events, Pull to Refresh, and Virtual Scroll for large lists. The module will conclude by implementing mapping and driving directions.
7. Ionic Native - This module covers Ionic Native which gives you access to the native features of the device. We'll show numerous native plugins including the Camera, Barcode scanner, Accelerometer, Vibration, SQLite, and more.
8. Customizing Ionic 2 - This module covers how to customize Ionic 2. We'll customize the colors of the default theme, as well as generate custom app icons and splash screen.

The following is the official description of the course:

Ionic has established itself as the most popular open source framework for building cross-platform mobile apps. This code-focused course explores the exciting new Ionic 2 framework, and shows how to build mobile apps using Angular 2 and TypeScript. In this course, we'll see how to quickly get up and running with Ionic 2. We will then build a complete app from scratch over the duration of the course. The course will cover screen navigation, working with HTTP, numerous Ionic 2 components including advanced scenarios. We will also cover using native device features such as geolocation, the device camera, barcode scanner, accelerometer, and more!

Note: The course was created using the final beta of Ionic 2 and there were some small changes in the RC releases. This Github repository for the course provides all the updates you'll need to be up-to-date with the latest Ionic 2 releases.

If you want to learn how to quickly build mobile apps with the latest cross-platform technologies, check out my latest course on Ionic 2!

I recently received an email from a new developer asking for some advice:

I recently came out of school and will start work as an entry level C#/.NET developer in a few weeks. It'll be my first true work experience. What were your trials and tribulations when you first started out? What lessons would you imprint on newbies like me fresh outta school and walking into this vast software development world?

This is a great question.

First of all, what an amazing time it is to be a software developer! Technology has changed so much since I was starting out and there are so many exciting opportunities available if you grab onto them.

Having said that, the question has made me reflect on what I did early in my career (and still do to this day). The following is my 2 cents and it is completely subjective to my own experiences. Here are the 8 things I think every developer should do when starting out.

1. Pick your mentors wisely

I feel strongly that one of the best things I did early in my career was that I focused on finding mentors. In fact, I think picking your mentors is so important, it's not a coincidence that I'm putting this as #1. Understand that not everyone is willing to be a mentor to you, or maybe they don't have time. When I found a mentor in my own company I made sure that I learned as much as I could from them - anything that they were willing to teach me, I was willing to learn. They had way more experience than me - both technical and non-technical - and I was more interested in learning what they knew than trying to prove what I knew - after all, it was early in my career so I didn't know much. Spend more time listening than talking - and ask thoughtful questions.

My mentors did not always work at the same company as me. In fact, I had many mentors that I never met and, in fact, they had no idea they were my mentors! I would subscribe to blogs. I would always make sure to go watch certain speakers' presentations. Again, once I identified a mentor, I tried to absorb everything I possibly could from that person.

2. Focus on communication skills - especially verbal

Yes, it's important learn as much technology as you possibly can and the more deep technical knowledge you have, the better. However, if you truly want to maximize your success in the software development profession, focus on improving your communication skills - especially verbal. This can take many different forms.

• One-on-one with another developer - When you're having a conversation with another developer, make sure you're clearly articulating your questions or idea. If another developer is asking you a question, are you sure you've understood the question? Can you explain the answer in a way that developer understands?
• One-on-one with a non-developer - Great, you can interact with other developers - but what if your non-technical Project Manager comes to you with a question? You can't just throw a barrage of technical jargon at the PM and expect them to understand. I can't tell you how many times in my career, a PM or manager has come to me to ask me to explain something to them that another developer confused them on.
• Group setting - can you clearly and succinctly articulate your thoughts in a meeting? Every meeting is an opportunity for practice.
• Public Speaking - Not everyone is going to become a world renowned public speaker like Scott Hanselman, but I challenge you to reach outside your comfort zone. Start small. Give a short presentation to a handful of developers at your company about something new you learned. Once you're comfortable, try your hand at presenting at a local user group. I've given a lot of presentations in the last few years, and I still look at each presentation as a way to improve in some aspect of my public speaking. It may or may not be in the cards for you to do this regularly, but it will benefit your career when you're in meetings and presenting your ideas to your customers.
• Written - I've been emphasizing verbal communication skills here because I do feel this takes priority. But don't forget about your written communication skills too. Can you write emails clearly, yet succinctly? Can you author a design document that is easy to understand? These are areas that will come up repeatedly in your career.

3. Learn the business domain

Too often, new developers just focus on learning all the features of a language or framework. While this is important, it is just as important to become knowledgeable on your current business domain. In my first technology job, I worked for a company that built credit lending software for banks. I became an expert in consumer lending and it helped me thrive at that company in so many ways. You'll understand your software better. You'll be able to communicate with managers and customers better. Learn your business domain.

4. Adopt a learning mindset

So you've just spent the last couple of years learning in school and you're now ready to put what you've learned into practice starting your career - this is exciting! However, what you'll soon discover is that your learning process has barely started. Technology...changes...FAST. Much of what you know now will be obsolete in a few years. It can be exhausting to keep up on all the technologies. Here's a secret - it's impossible to keep up on all the new technologies. You have to accept that fact now. For those that grasp the concept of being a "life-long learner" and embrace it, you'll have much success to look forward to. However, if you're looking for a profession where you're not required to constantly learn new things, then software development is going to be frustrating for you.

5. Never be afraid to ask questions

Too often people (especially developers) refrain from asking questions because they're afraid that their questions will make them look dumb. One thing that I did well early on in my career is that I wasn't afraid of asking questions. I still do this. Believe me, it's way better to ask a couple extra questions up front, than to get to the end of a task and people realize you didn't know what you were doing!

6. Figure out what you're passionate about

We just established that it's impossible to stay up-to-date on all the new technologies. Do your best to figure out which technologies really capture your interest. Do you like front end work? Do you like back end? Perhaps developing mobile apps really gets you excited. You may not always have the opportunity to work in your #1 technology of choice, but make sure you identify what really gets you excited. If you're going to deliver a presentation, make sure you really love the technology you're presenting about.

7. Go the extra mile

Early in my career, I wasn't shy about going the extra mile with side projects at home. It wasn't even that difficult because it was before I had kids and before my free time was quickly filled with family activities. At my first company, I developed an app on the side (on my own time) just because it would make my current job easier, and it provided me an opportunity to learn a new programming language. One day a manager saw me using the app and asked me what it was. One thing led to another and within a couple of months, my little utility app was transitioned to replace the existing UI of one of our products, and I was in my first lead-developer role. You just never know what can happen. Even if my app hadn't caught the attention of the company, it was an extremely valuable learning experience for me to build an app on my own.

Go the extra mile. Read books. Watch Pluralsight courses. Go to watch user group presentations. Contribute to an open source project. Spend a little time outside of work honing your craft.

8. Never be condescending

This might seem like basic advice for a developer starting out since new developers naturally won't have as much technical knowledge as other developers with several years experience - but it's not. I've been amazed at some interactions I've had with junior developers where they came across as condescending or cocky - probably trying to "trick" people into thinking they know more than they do - this doesn't work. Regardless of whether you have one year of experience or 10 years of experience - never be condescending. Absolutely nothing positive will come from it.

I have never met anyone with as much knowledge on Microsoft Azure anywhere in the world as Vishwas Lele, my colleague at AIS. And yet, I have yet to meet anyone in my entire career as humble as he is - this is the example of what you should emulate professionally.

Bonus - Technology Specific

OK, I know I said there were 8 things but I'm going to throw in one "bonus" item. Up until now, really nothing I've talked about has been technology specific. And I believe these 8 things stand the test of time, regardless of technology. But I will offer a couple of technology-specific items with the caveat that this is relevant in 2016.

• Learn a Cloud platform - If you're a Microsoft developer, then it makes sense for this cloud platform to be Azure. If you're not a Microsoft developer, then perhaps it's AWS. But regardless, start getting familiar with at least one of the major cloud providers (if not multiple).
• Learn JavaScript/Node - If you're a web developer, I strongly believe you should learn not only JavaScript but also Node.js. Regardless of your server technology of choice (ASP.NET, Java, Ruby, etc.), JavaScript and Node are just too important. JavaScript is everywhere - front end code (Angular, React, etc.), cross-platform mobile apps, server-side Node. And even if you're not writing server-side Node code, the major web development and build tools such as Gulp, Grunt, Webpack, etc. are Node-based tools. Learn them - it will help you.

Conclusion

So there you have it - my own opinion on what new developers should know starting out. Now here's the irony: these are principals that I believe still hold true for me even at this stage of my career. I believe software development is one of the most rewarding careers you can have. Accept the challenge - embrace it - and don't look back.

UPDATE 11/12/2016: The following post is in reference to Ionic RC1. However, in RC2 they removed the rollup dependency and moved back to webpack - hence, a custom "config" section for rollup is no longer required.

Angular2 Google Maps (AGM) is a great component for integrating Google Maps into Angular 2 apps. There were several ways you could do this with Angular 1.x apps, but Angular2 Google Maps is the best way I've seen of doing with with Angular 2 apps. There is minimal code required and it is super easy to get started, in large part due to solid documentation on its Getting Started page.

I've previously incorporated this into regular Angular 2 web apps running in a browser, as well as Ionic 2 mobile apps. However, in the course of recording my latest Pluralsight course, Ionic 2 (which had been in the final beta) dropped the Ionic 2 Release Candidate. This was a significant release as Ionic 2 was updated to take a dependency on Angular 2 final. When this happened, not only did the previous implementation with AGM break, but even following the instructions on the AGM Getting Started page don't exactly work for an Ionic 2 app. This blog post will document how you can get up and running quickly with AGM in an Ionic 2 app.

First thing's first, let's generate our initial Ionic 2 app. If you haven't already, make sure the Ionic CLI is installed:

npm install -g ionic

Make sure you're on version 2:

ionic -v
2.1.0

Let's create our Ionic 2 project in the usual way:

ionic start ionic2-google-maps-test blank --ts --v2

Now let's follow the instructions on the AGM Getting Started page by installing AGM into our project:

npm install angular2-google-maps --save

The Ionic 2 RC now uses the NgModule approach, which allows you to declare your dependencies up front.

Per the AGM guide, we import AgmCoreModule into app.module.ts and add it to our imports list shown on line numbers 6 and 15:

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/pages';

import { AgmCoreModule } from 'angular2-google-maps/core';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    AgmCoreModule.forRoot({ apiKey: '{your-api-key-here}'})
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
  ],
  providers: []
})
export class AppModule {}

And of course we'll also put the appropriate mark-up on our desired page per the Getting Started instructions:

<sebm-google-map [latitude]="lat" [longitude]="lng">
  <sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker>
</sebm-google-map>

Let's run our Ionic app:

ionic serve

However, when we do this, we get the following error:

[14:36:28]  bundle dev started ...
[14:36:34]  bundle dev failed:  Module c:\dev\ionic2-google-maps-test\node_modules\angular2-google-maps\core\index.js does not export AgmCoreModule (imported by c:\dev\ionic2-google-maps-test\.tmp\app\app.module.js)
[14:36:34]  bundle dev failed:  Module c:\dev\ionic2-google-maps-test\node_modules\angular2-google-maps\core\index.js does not export AgmCoreModule (imported by c:\dev\ionic2-google-maps-test\.tmp\app\app.module.js)
[14:36:34]  Error: Module c:\dev\ionic2-google-maps-test\node_modules\angular2-google-maps\core\index.js does not export AgmCoreModule (imported by c:\dev\ionic2-google-maps-test\.tmp\app\app.module.js)

"\angular2-google-maps\core\index.js does not export AgmCoreModule"? We followed the instructions perfectly so why is this happening? Our intellisense at design time seemed to have no problem with it - why is Ionic having a problem when it tries to actually run?

It turns out, the answer can be found in the Bundle section in the Ionic App Build Scripts documentation page. For the RC release, Ionic 2 moved from a gulp-based build process to one that uses rollup.js for bundling. Most of the time third-party libraries "just work", but in some cases, additional information needs to be provided to Rollup so that it knows what is being exported. This is the problem happening with AGM.

The get around this, we need to create our own rollup.config.js file in our project. The best way to do that is to find the existing rollup.config.js file in the node_modules/@ionic/app-scripts/config directory local to your project - copy that file - then create a directory called scripts right in the root of your project and paste that file there. In your file, find the plugins() section and add a namedExports property to commonjs() as shown here:

plugins: [
    builtins(),
    commonjs({
      namedExports: {
        'node_modules/angular2-google-maps/core/index.js': ['AgmCoreModule']
      }
    }),
    nodeResolve({
      module: true,
      jsnext: true,
      main: true,
      browser: true,
      extensions: ['.js']
    }),
    globals(),
    json()
  ]

This tells Rollup that yes, angular2-google-maps does in fact export AgmCoreModule. We now need Ionic to know about our custom rollup.config.js file so let's open package.json in our project root. Add a config section that points to your custom file:

"config": {
    "ionic_rollup": "./scripts/rollup.config.js"
  },

Now when you run the ionic serve command, everything should work just fine!

Here is a Github repo with the complete working code. My (upcoming) Ionic 2 course on Pluralsight was created with the final beta so a different approach is shown in that video. But for Ionic 2 RC and beyond, this should enable everyone to easily integrate AGM with Ionic 2.

Last week I had the pleasure of presenting at the TechBash 2016 conference. This was the first year of TechBash, but it was such a success, TechBash 2017 has already been announced.

If you're looking for a great, high-quality conference on the east coast, I strongly recommend TechBash 2017. TechBash 2016 had a ton of high quality speakers, including keynotes from Pete Brown and Glenn Block. In my opinion, the TechBash organizers did a great job selecting presentation topics that covered a wide range of technology areas. You can check out the sessions here.

The venue - Kalahari Resort in the Pocono Mountains - was absolutely beautiful. Its location on the east coast makes it an easy drive, even for someone like me coming from the Baltimore/DC area. One aspect I really liked about this conference was the attendee lounge - a place where attendees and speakers could easily network. So often at conferences there is a private "speakers lounge" that is hidden away from attendees which can have an "elitist" feel. At TechBash the speakers are totally approachable and I enjoyed spending time in the attendee lounge having conversations with attendees, conference organizers, and other speakers. Additionally, evening events were planned where once again, attendees and speakers could come together for more networking, etc. The conference organizers were constantly soliciting feedback from attendees - always looking for ways to make the conference even better.

During the week, I presented three separate talks:

• Azure Web Apps
• C# 6 New Language Features
• Ionic 2: Building Mobile Apps With the Ionic Framework and AngularJS

In another nice touch, you can download the slides and code samples for my presentations, and all conference presentations at this central TechBash GitHub repository.

If you're looking for a great conference that has a "big conference" feel but is still small enough to allow for direct networking with attendees and speakers, then you should definitely put TechBash 2017 on your calendar for next year. Personally, I can't wait to go back.

I'm pleased to announce my latest Pluralsight course has been released: Yeoman Fundamentals.

With so many code generation and scaffolding frameworks available today, it's not always easy to distinguish which tools to use. With the widespread adoption of Node and JavaScript, Yeoman has vaulted to the top as the "best of breed" tool for scaffolding and code generation - regardless of your technology platform.

This is a totally code-focused course. In the beginning of the course, I focus on getting started with Yeoman - this includes installation and using basic Yeoman generators. After getting started, the primary focus on the course is building your own custom Yeoman generator. Throughout this course, starting from scratch, I build a custom Yeoman generator from start to finish.

Course Modules

1. Introduction - This module introduces Yeoman and gives the course overview. It also shows a demo of the Yeoman generator that we will be building throughout the course.
2. Using Yeoman Generators - This module introduces using Yeoman generators. It includes getting started installing Yeoman and Yeoman generators. We'll explore using generators and sub-generators.
3. Creating a Yeoman Generator - This module will introduce the basics of creating a custom Yeoman generator. We will set up the environment, understand base classes, as well as explore the Yeoman Runing Context.
4. Working with the File System - This module will introduce the Yeoman file system including copying static files and directories, as well as working with Yeoman templates.
5. User Interactions - This module will introduce User Interactions with Yeoman. It will include using Yeoman Arguments, Options, and Prompts.
6. Configuration and Dependencies - This module will explore managing Yeoman Configuration and dependencies. It will include automatic installation of npm and bower dependencies. Generator Composition will also be shown.
7. Building a Sub-generator - This module will introduce how to build a Yeoman Sub-Generator. It will include setting up the folder structure and getting basic functionality working quickly. It will also show options for customizing the sub-generator.
8. Testing Generators - This module will demonstrate how to test Yeoman Generators. It will show how to set up the test structure as well as show how to test file creation, file contents, and conditional options.

The following is the official description of the course:

Yeoman has established itself as the preeminent code generation framework for web developers. Yeoman provides a code generator ecosystem that enables best practices and unparalleled productivity. In this course, we'll see how to quickly get up and running with Yeoman. We will then focus on building our own custom Yeoman generator. This will include working with the Yeoman file system, user interactions, creating sub-generators, testing, and more. By the end of this course, you'll be able to start building your own custom Yeoman generators!

If you want to take your developer efficiency to the next level, check out my latest course on Yeoman!

I love Trello and it seems like I use it for everything. Whether it's a project for work, a side-project on my own, a personal To Do list, or planning a family vacation - I probably have a Trello board for it.

Although the built-in Search for Trello is pretty solid, sometimes it just doesn't give me what I want. For example, since I have so many different boards, I often want to be able to see all of the cards that are in my "Doing" lists across all boards. To accomplish this, I decided to try to write a Trello bookmarklet in conjunction with the Trello client.js library.

I found the best place to start was the Trello-Bookmarklet repository. This bookmarklet creates Trello cards from other services (e.g., Github, Gmail, etc.) which is functionality I wasn't necessarily interested in. But what it did show me was a good example of the boilerplate code I needed to include to get started with interacting with the Trello API. This boilerplate code includes:

1. Loading jQuery (needed for DOM manipulation for showing cards)
2. Loading the Trello client.js library
3. Authorizing Trello (this includes getting your token from https://trello.com/app-key, showing a dialog to paste it in, and storing it in local storage)

This boilerplate code isn't trivial and I didn't want to have to include it every time I wanted to write a bookmarklet. So I refactored this code a little to put it in a file I called trello-bookmarklet.core.js - I also had it load async.js because this library drastically simplifies writing async JavaScript.

For my bookmarklet, I need to use the Trello client.js to execute the following steps:

1. Get the member ID of the current user
2. Get all the open boards for the current user
3. For each open board, find all the lists that have "Doing" in the name
4. For each of these "Doing" lists, get all the cards that are either unassigned or assigned to the current user
5. Display these cards on a dialog

The Trello library doesn't natively support promises. This is where an async library comes in handy. Without it, I'm find myself in the Pyramid of Doom with deeply nested callbacks.

My first step is to put the 5 steps above into the async waterfall structure:

async.waterfall([
    // Get ID for current user
    function (callback) {
        callback();
    },
    // Get all open boards
    function (callback) {
        callback(null, boards);
    },
    // Get "Doing" Lists from all open boards
    function (openBoards, callback) {
        callback(null, doingLists);
    },
    // Get all cards across all "Doing" lists
    function (doingLists, callback) {
        callback(null, doingCards);
    }, 
    // Display all "Doing" cards
    function (err, doingCards) {
    }
]);

The waterfall() method will sequentially execute these async functions in order, with each function passing its results to the next function in the sequence. The first argument is an error condition - if you're not passing anything to the next function, no arguments are necessary (null error condition assumed) - just execute the callback() method to signify function completion. If you are passing objects to the next method, then the first argument is null (no error) and the next arguments will be passed in to the next function.

In the first function, I just want to get my memberId and store it for later:

function (callback) {
    Trello.get('members/me', { fields: 'id' }, function (data) {
        memberId = data.id;
        callback(null);
    });
}

The Trello object is available in my context since "core" has loaded it. It enables me to pass a fields parameter so I constrain the response payload to include only the single field ("id") that I'm interested in.

In the second function, I want to get all my open boards and pass them to the next method:

Trello.get('members/me/boards', { filter: 'open' }, function (boards) {
    callback(null, boards);
});

The third function is where things get more interesting. For each open board, I need to find any list that has "Doing" in the name. This means I need to fire off an unknown number of async calls, yet keep their results coordinated - in fact, combine their results into a single, larger result. The concat() method is exactly what I need here. It will make all these async calls in parallel (I don't care about the order) and for each call I can store the results. The concat() method then has a final callback which has an array containing all of the previously stored results (i.e., all arrays are concatenated together into this larger single array).

async.concat(openBoards, function (board, callback) {
    Trello.get('boards/' + board.shortLink + '/lists', { filter: 'open' }, function (lists) {
        var doing = $.grep(lists, function (item) {
            return item.name.indexOf('Doing') !== -1;
        });
        var doingLists = doing.map(function (item) {
            return {
                name: item.name,
                board: board,
                id: item.id
            };
        });
        callback(null, doingLists);
    });
}, function (err, doingLists) {
    callback(null, doingLists);
});

The fourth function to get all the cards across these lists uses the same technique with the concat() method (code omitted here for brevity).

The fifth and final function, takes all these cards and displays the result:

function (err, doingCards) {
    var htmlResult = '';
    $.each(doingCards, function (index, card) {
        htmlResult +=
        '<h2><a target="_blank" href="' + card.shortUrl + '">' + card.name + '</a></h2>' +
        '<p>in <strong>' + card.list + '</strong> on <strong>' + card.board + '</strong></p><hr/>';
    });
    trelloBookmarkletCore.overlayPrompt(htmlResult, false);
});

Note the trelloBookmarketCore provides this overlayPrompt() method for convenience.

The final result will look something like this:

The full code for the trello-doing-cards-bookmarklet.js is here. The entire Github repository is located here.

To invoke the bookmarklet, the following code is necessary:

javascript:(function (a) { var b = a.createElement("script"); b.src = "https://rawgit.com/smichelotti/trello-bookmarklets/master/trello-doing-cards-bookmarklet.js"; a.getElementsByTagName("head")[0].appendChild(b);})(document);

Notice I'm serving the files from rawgit.com but I could certainly move them to my own CDN.

The main optimization that I could make is to use gulp/grunt to concatenate/uglify the JavaScript dependencies (i.e., async, Trello client.js, jQuery) in advance. Currently, there is certainly a little lag the first time it runs to get these files.

Hopefully this is helpful for anyone interested in writing a bookmarklet or interested in using the Trello API in general.

In an effort to make my blog suck less, I figured it was time to get onto a modern blogging platform. I've been blogging for over 10 years and was getting frustrated at the lack of control I had over my current blog engine. Add the fact that Google is now giving priority to mobile-friendly sites, and it was clear it was time for a change - since I wasn't able to control the lack of mobile support in my blog, among other things.

Which Blog Engine?

There are so many good blogging engines out there now - which one to choose? I really love Markdown so I started looking at blogs that supported Markdown. The two blog engines that kept popping up with markdown support were Jekyll and Ghost. Jekyll can integrate with Github and Github markdown which is interesting. However, I really love Node and Ghost is written in Node which put that to the top of my list - if I wanted to make customization, it would be easiest for me with a Node code base. It's actively being developed with a great developer community which sparked my interest.

Hosting

There are several good hosting options for Ghost blogs but I really wanted to control everything myself with Azure. Azure is an awesome option for hosting Node applications. A couple months ago, Scott Hanselman blogged about installing Ghost to Azure with the "Deploy to Azure" button. This option specifically uses the Ghost-Azure Github repository.

There are two main benefits to the Ghost-Azure repository. First, it sets up everything for Azure deployment through the azuredeploy.json file and the "Deploy to Azure" button. Second, it sets up Ghost for an IIS deployment in general - these are things like the web.config file and iisnode.yml. Using this directly is a great option if you just want to get Ghost up and running on Azure quickly for test purposes. But this doesn't quite fit my needs because I wanted to be able to make any customization to the code should the need arise. So my first step was to fork this repository into my own Ghost-Azure Github repository.

Once this was complete, I just did a normal setup for an Azure Web App with Continuous Deployment from a Github repository. This automatically deploys the latest code anytime I check-in to my Github repository. I never actually had to use the "Deploy to Azure" button.

Ghost Theme

With Ghost in place, the next item on my list was to get a good theme. There are a few great sites for getting Ghost themes including the Ghost Marketplace and All Ghost Themes. I got a paid theme from All Ghost Themes.

Azure CDN

Moving my static files to the Azure CDN was one of the most important aspects of moving my blog. The Azure CDN allows me to have better performance by serving content to consumers from geographic locations closest to them.

First I mapped my CDN to a custom domain - cdn.stevemichelotti.com.

Then I created the following containers in my blob/CDN storage:

I then used Gulp to optimize (i.e., concat/uglify) various JavaScript and CSS files. Finally being able to have full control over every piece of content in my blog enabled me to get my YSlow score up to a very respectable level.

Using the CDN I'll also be able to optimize expires headers of static content. Additionally, if I ever move my blog again, I won't have to transfer images since they're now all on my own custom domain for my CDN.

Moving Content

Moving content was more of a pain than I anticipated. There are several tools to migrate to Ghost from other platforms (e.g., Blogger, WordPress, and Tumblr). However, none of them worked with my existing platform. So it was a somewhat manual process for me that consisted of:

1. Writing a local Node script that iterated through all my old posts and converted them to Markdown using Heck Yes Markdown.
2. Save each Markdown file locally, including the title and publish date in each file name.
3. Import all Markdown files into Ghost using the Admin tool.

For the most part, this worked fine. But I did have to go through many old posts to ensure the formatting was satisfactory.

Disqus for Comments

Disqus is a strong standard for a comment engine for blogs these days. The setup process was quick and integrating this into my blog was very straight forward.

App Insights and Google Analytics

I've currently got both Application Insights (from Microsoft) and Google Analytics integrated. Perhaps I'll consolidate to just one of them in the future - but for now I'm going to use both.

Code Syntax Highlighting

There are a number of good choices for code syntax highlighting. In the past, my choices were limited because of some lack of control I had on my previous platform. Since I now have full control, I decided to use SyntaxHighlighter. It is extremely full-featured including line numbers and line highlighting support. It also supports brushes for a number of different languages.

Feedburner

Originally, I thought Feedburner would be a trivial step - after all, all I needed to do was to go into my Feedburner account and burn the feed for my new blog location. However, I did run into one complication. I wanted to make sure I supported feed auto-discovery but including:

<link rel="alternate" type="application/rss+xml" title="Steve Michelotti" href="http://feeds.feedburner.com/SteveMichelotti" />

However, Ghost was hard-coded to include:

<link rel="alternate" type="application/rss+xml" title="Steve Michelotti" href="http://stevemichelotti.com/rss/" />

The good news was that, since I have now have full control over the source code for my blog, I could fix this myself. I simply went into ghost_head.js in the core code and removed this line of code:

head.push('<link rel="alternate" type="application/rss+xml" title="' + 
    title  + '" href="' + config.urlFor('rss', null, true) + '" />');

Then I manually added the correct <link> element to the <head> section of my site.

What about Live Writer?

It seems everyone on the Windows platform loves using Windows Live Writer to author blog posts (including me). But Live Writer doesn't support Markdown. Frankly, this is just fine with me. I think people in general that love Markdown like writing directly in Markdown. Also, in place of Live Writer, I now use MarkdownPad to author posts offline. MarkdownPad is the best Markdown editor I've seen and I love using it.

Conclusion

So far I'm very happy with the move. Time will tell - but it's great to finally be on a modern blogging platform with complete control over the code and environment.

Swagger has quickly established itself as an important tool for building Web API's for any platform. Swagger enables interactive documentation and client SDK generation/discoverability. One of the most frequently used Swagger tools is Swagger UI. Swagger UI provides automatically generated HTML assets that give you automatic documentation and even an online test tool. To see Swagger UI in action, check out their demo page.

Although Swagger/Swagger UI can be used for any platform, the Swashbuckle library makes integrating Swagger UI into a .NET Web API app a breeze. In fact, Azure API Apps specifically leverage Swagger via Swashbuckle to provide the metadata for Azure API apps.

Most of the out of the box features of Swagger work great. However, there are times when you need to customize this behavior. For example, by default Swagger UI gives you a textbox for for the "API key". When you execute the request, it simply puts this API key into a query string variable called "api_key" as shown in the screen shot:

But what do you do if you need some other type of authentication? Perhaps you need Basic Auth or suppose the API key needs to be sent in an HTTP header rather than the query string.

Most of the online resources I found, suggest that you should simply replace the default web page by copying the original and making the changes you need. While it's great to have this type of flexibility, the problem is that it makes it harder to keep up when new versions come out. You'd have to continually update your code (that you've now taken ownership of) each time a new version comes out.

What I want to do instead is to simply inject some JavaScript into the page to make this happen. This JavaScript needs to:

• Add two textboxes to the page (one for username and one for password)
• Remove/hide the existing textbox for API key
• Set the Password Authorization (basic auth) header to use these values

Here are the steps to make that happen.

First, make sure the "Swashbuckle" and "Swashbuckle.Core" NuGet packages are added to your project. If you're working in an Azure API app, they'll already be added for you.

Next, add a new JavaScript file to your project. I'll put this file in a folder called "CustomContent":

Right-click this new JavaScript file and select "Properties". Then change its "Build Action" to "Embedded Resource".

Next, go to the SwaggerConfig.cs file that was added to your project when you added the Swashbuckle NuGet package. This file contains a ton of commented code – this is just to show you example configuration code that you can use. If you scroll down that file, you'll see a commented method call to the InjectJavaScript() method. Right below that, I can now add this line of C# code:

c.InjectJavaScript(thisAssembly, "SwashbuckleCustomAuth.CustomContent.basic-auth.js");

Pay close attention to this string. The default namespace for my project happens to be "SwashbuckleCustomAuth". Then I've put this JavaScript file in a folder called "CustomContent". Finally, I give the name of the JS file. Make sure you've got this string correct so it will find the embedded resource properly.

Next, let's have a look at the JavaScript code that we need to put in to basic-auth.js:

(function () {
    $(function () {
        var basicAuthUI =
            '<div class="input"><input placeholder="username" id="input_username" name="username" type="text" size="10"></div>' +
            '<div class="input"><input placeholder="password" id="input_password" name="password" type="password" size="10"></div>';
        $(basicAuthUI).insertBefore('#api_selector div.input:last-child');
        $("#input_apiKey").hide();
&nbsp;
        $('#input_username').change(addAuthorization);
        $('#input_password').change(addAuthorization);
    });
&nbsp;
    function addAuthorization() {
        var username = $('#input_username').val();
        var password = $('#input_password').val();
        if (username &amp;&amp; username.trim() != "" &amp;&amp; password &amp;&amp; password.trim() != "") {
            var basicAuth = new SwaggerClient.PasswordAuthorization('basic', username, password);
            window.swaggerUi.api.clientAuthorizations.add("basicAuth", basicAuth);
            console.log("authorization added: username = " + username + ", password = " + password);
        }
    }
})();

jQuery is already part of the HTML page so we can leverage that here. I use JavaScript to create the two new textboxes I need – then I insert them as the last child of the "api_selector" form that contains these textboxes in the header. I then hide the default api key textbox since we won't be using it. The next thing we need to ensure is that we're setting the header correctly when the values in these textboxes change. For this we can use the SwaggerClient.PasswordAuthorization which is built into the Swagger JavaScript library. This code will ensure it's added to the request:

In the screen shot above, I put in a username of "steve" and a password of "123". This time when I invoke the request, you can see an Authorization header for Basic auth being sent in the HTTP request headers. Problem solved.

Alternatively, let's say that instead of Basic Auth, you want the API key sent in the header rather than in the query string. Furthermore, let's say you need that API header to be called "my-cool-api-key". In that case, we don't need to add any of our own textboxes but just repurpose the API key text box that is already there. We can add a new JavaScript file and make it an embedded resource in the exact same way that I've previously described. The JavaScript for that will look like this:

(function () {
    $(function () {
        $('#input_apiKey').off();
        $('#input_apiKey').on('change', function () {
            var key = this.value;
            if (key && key.trim() !== '') {
                swaggerUi.api.clientAuthorizations.add("key", new SwaggerClient.ApiKeyAuthorization("my-cool-api-key", key, "header"));
            }
        });
    });
})();

One other point that can sometimes lead to confusion. You might notice that the Swashbuckle configuration contains methods like this:

c.BasicAuth("basic").Description("Basic HTTP Authentication");

At first glance you might think/hope that will make the UI do the Basic Authentication for you – but it doesn't. That simply changes the metadata that comes out of the Swagger schema that informs the user what type of authentication is being used. But if you actually want the Swagger UI to correctly execute the appropriate authentication scheme, follow the steps in this blog post if you're working in .NET projects.

A sample solution containing these techniques (minus the actual authentication) can be downloaded here.

A few weeks ago I was one of the presenters for the Microsoft MVP Virtual Conference. All of the videos for the conference have recently been published to Channel 9.

There were many great talks at this virtual conference and I encourage you to check them out. My presentation was: Supercharge your Development with Azure Web Apps (formerly known as Azure Websites). My talk consisted of 12 different demos as I covered the following topics on Azure Web Apps:

• Continuous Deployment
• Configuration
• Auto Scaling
• Monitoring
• Operations
• SCM Admin Site
• Extensions
• Web Jobs
• Azure CLI
• Multi-Platform with Node
• Analytics
• Customizing the Portal

I love the new Visual Studio Code editor/IDE. It's fast, simple, lightweight, and an overall pleasure to work with. I love being able to just "open a folder" and work with files directly – all while getting great intellisense.

One feature that is particular interesting to me is the ability to run Tasks from the IDE. These tasks can be anything from running gulp commands, to MSBuild, to most anything you can think of. Given that JavaScript – and Node in particular – is one of the sweet spots, I assumed that there would be a built-in task to run a file with Node. After all, there is native support for debugging Node code. But one thing I often like to do is to simple run a single file with node from the command line:

> node index.js

So I don't need debugging. I want to execute Node against whatever file I have opened at the moment. It turns out this was not built-in – but the good news is that it was not difficult to add the functionality.

First, Ctrl+Shift+P to bring up the Command Palette. Then you want to type "Configure Task Runner". That will open a "tasks.json" file which it will create in a local ".settings" directory. Inside there is a default TypeScript task along with a bunch of commented out tasks to show example of running on commands like gulp, MSBuild, etc. (and yes, just pretend that JSON actually has comments). You can remove everything in this file and just add:

 {
 	"version": "0.1.0",
 	"command": "node",
 	"isShellCommand": true,
 	"args": ["${file}"]
 }

One thing to notice is the this file allows tokens such as ${file} to represent the current opened file. Now Save the "tasks.json" file (if you don't already have Auto-Save turned on) and return back to any of your JavaScript files. Now you can just bring up the Command Palette again and type "Run Task" – hit ENTER and "node" (which is what we named our task) will be the only thing in the list. Run that and the Output window will appear in split screen the the resulting output of your node file.

Yes, of course, I can just go over to a console window and type: "node index.js" as I've always traditionally done. But this makes it even easier/faster and let's me stay within my IDE. Plus, this will always work against whatever file I happen to have opened at the time.

One bizarre thing I've found is that I don't (yet) see any way to add multiple tasks to the "tasks.json" file - there does seem to be a way to add multiple tasks for a single command, but not multiple tasks for different commands. Hopefully, this will be a feature that is addressed in new versions of VS Code.