Justin James

Testing Our Node Profanity Filter

Justin James — Sat, 01 Feb 2025 13:00:00 +0000

In our previous post, we create a profanity filter in NodeJS but the one thing we did not do was add any automated tests. I am huge fan of automated testing so in this article we are going to use Jest to add some automated tests to our profanity filter.

Install Jest

npm install jest --save-dev

Create Our Test Filter

Create a folder called tests
Create a file called profanityFilter.test.js

Add the following code to the profanityFilter.test.js file to import our API and create our describe that will hold our tests

import filter from './profanityFilter'; // Adjust path as necessary

describe('Custom Profanity Filter', () => {

})

Create Our First Test

Within the describe statement that we added above, add the following code for our 1st test to make sure we do not have multiple blank lines

test('should remove multiple blank lines but keep valid punctuation', () => {
 const input = 'Line 1\n\n\nLine 2...';
 const expectedOutput = 'Line 1<br><br>Line 2...';
 expect(filter.clean(input)).toBe(expectedOutput);
});

Run Our Tests

Run the following command to run our tests

npx jest

For our API, since I have the type set as module, when you run Jest you may get the error below that had me scratching your head as it was unexpected.

 FAIL tests/profanityFilter.test.js
 ● Test suite failed to run

 Jest encountered an unexpected token

 Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

 Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

 By default "node_modules" folder is ignored by transformers.

 Here's what you can do:
 • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
 • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

 You'll find more details and examples of these config options in the docs:
 https://jestjs.io/docs/configuration
 For information about custom transformations, see:
 https://jestjs.io/docs/code-transformation

 Details:

 C:\Work\repos\ourApi\tests\profanityFilter.test.js:1
 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import filter from './profanityFilter'; // Adjust path as necessary
 ^^^^^^

 SyntaxError: Cannot use import statement outside a module

 at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)

To fix this issue, instead of running npx jest we need to run node and turn on th experimental-vm-modules

node --experimental-vm-modules node_modules/jest/bin/jest.js

This will run your tests and the tests should pass. You will, however, notice the 1st two lines in the output have a warning since we are using an experimental flag.

(node:90036) ExperimentalWarning: VM Modules is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
 PASS tests/profanityFilter.test.js
 Custom Profanity Filter
 √ should remove multiple blank lines but keep valid punctuation (68 ms)

Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 0.444 s, estimated 1 s

Now we are ready to write our remaining test cases.

Here is a quick brainstorm of the things that I would test:

Verify that all of the added banned words are removed from the output
Verify that th excluded from the custom filter is not removed from the output
Verify that a mix of \r\n and \n is converted to \n and does not return multiple blank lines
Verify that extra spaces at the beginning and end is removed
Verify that * is replaced with an empty string

Having these tests cases will ensure that our profanity filter continues to work as we make changes.

Happy testing!!!

Create A Profanity Filter in Node

Justin James — Wed, 22 Jan 2025 00:00:00 +0000

I was recently working with a client on a Q&A submission form for student assemblies that they are running and the client needed to strip out any profanity from the question submission.

We decided that we want this in the API versus on the submission form itself so that the students couldn’t just open up the browser developer tools and figure out how to skirt around the filter. The API is written in NodeJS Express.

I could have rolled my own profanity filter but I figured someone had to have already done this and low and behold they have. I need the library to be able to add additional words. I found an npm package called bad-words that had exactly what I was looking for.

Express API Server

Our Node server will be using express.

Create Project and Install Express

Run npm init and follow the prompts
Open up your package.json file
Add a type attribute to the list right below the main
```
"type": "module",
```
Install Express
```
npm install express dotenv body-parser
```
Create a file called index.js

Add the following code to index.js

import express from 'express';
import bodyParser from 'body-parser';
import dotenv from 'dotenv';

dotenv.config();

const app = express();
const PORT = process.env.PORT || 3000;

// Middleware
app.use(bodyParser.json());

app.get('/', (req, res) => res.send('Johnny Five Is Alive!'));

// Start server
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});

export default app;

Open up your terminal and run node ./index.js
Navigate to http://localhost:3000
You should see a response that says “Johnny Five is alive!”

Add Profanity Filter

We are now ready to add our API.

Create our API

In the index.js file we are going to add a new endpoint /api/question. The endpoint will have a request body that is json and contains a firstName and question property.

app.post('/api/question', async (req, res) => {
 try {
 const { firstName, question } = req.body;

 // LOGIC TO SAVE GOES HERE

 res.status(200).json({ message: 'Question submitted successfully' });
 } catch (error) {
 console.error('Error submitting question:', error);
 res.status(500).json({ message: 'Failed to submit question' });
 }
});

Create Our Profanity Filter

We are now ready to create our profanity filter. We are going to start by installing the bad-words library as they already have a good profanity filter that allows us to extend it with additional words and custom filters.

Open your terminal and run the npm install command
```
npm install bad-words
```
Create a file called profanityFilter.js

Add the following code to the profanityFilter.js.

import { Filter } from 'bad-words';

const filter = new Filter({ placeHolder: '*' });

export default filter;

Integrate it into Our API

Now lets integrate the profanity filter into our API.

Go to index.js and in the /api/question, add the following two lines after the const { firstName, question } = req.body;

let firstNameSanitized = profanityFilter.clean(firstName);
let questionSanitized = profanityFilter.clean(question);

The profanity filter is now working. However, there are three enhancements to the filter that we want to add:

We want the filter to remove the bad words instead of replacing with an asterisk
We want to want to add extra words into the filter
We want to be able to filter multiple word bad words

Enhance the Filter Results by Removing Asterisks

By default, the filter replaces the bad words with an asterisk but we want to remove the word completely. The bad words library does not support replacing the bad words with an empty string, so we are going to have to do it after the bad words filter has been called.

To remove all asterisks, after we call the clean method for the first name and question, we can call the built-in JavaScript replaceAll method

firstNameSanitized = firstNameSanitized.replaceAll('*', '');

questionSanitized = questionSanitized.replaceAll('*', '');

Now that we have replaced all of the asterisks with an empty character for the question that can contain multiple lines, there is a potential that we might have multiple blank lines in a row and we want to remove those.

Below we are going to standardize the line breaks to make sure that they are all \n and that we don’t have any \r\n and then replace 3 blank lines with 2 lines.

questionSanitized
 .replace(/\r\n/g, '\n') // Normalize CRLF to LF
 .replace(/\n{3,}/g, '\n\n') // Replace multiple blank lines with one
 .trim() // Remove leading/trailing whitespace

Add New Words to the Filter

To add to the default word list for the bad words library, we need to create an array of words and then call the addWords method.

const bannedWords = [
 "skill issue",
 "skill 1issue",
 "sk!ll issue",
 "ez"
]

import { Filter } from 'bad-words';

const filter = new Filter({ placeHolder: '*' });
filter.addWords(bannedWords);
export default filter;

Create Custom Filter To Handle Multiple Word Bad Words

The next enhancement we are going to do is write a custom filter to remove multiple word bad words. Luckily, the bad words library allows us to easily create custom filters.

To create a custom filter, we need to create a class that extends Filter.

We will call super.clean to run the default bad words filter, and then we will loop through our banned words and replace any of them with an asterisk.

In our custom filter, we can also add the remove all asterisks and extra blanks instead of having them within our api method.

class CustomFilter extends Filter {
 clean(input) {
 let sanitized = super.clean(input); // run default bad-words filter

 // Apply additional custom bad word filtering
 bannedWords
 .forEach(phrase => {
 const pattern = new RegExp(
 `\\b${phrase.replace(/\W+/g, '[\\W]*')}\\b`,
 'gi'
 );

 sanitized = sanitized.replace(pattern, '*');
 });

 sanitized = sanitized.replaceAll('*', '')
 .replace(/\r\n/g, '\n') // Normalize CRLF to LF
 .replace(/\n{3,}/g, '\n\n')
 .trim();

 return sanitized;
 }
}

One of the issues with our custom filter is that it matches on partial words so we also need to have an exclude words from custom filter list.

Create an exclude words array

const excludedWordsFromCustomFilter = [
 "ez"
]

Next we need to add a filter statement inside of our custom filter before the forEach

bannedWords
 .filter(phrase => !excludedWordsFromCustomFilter.includes(phrase))

Tell Our Profanity Filter to Use Our Custom Filter

The last thing we need to do is tell our profanity filter to use our custom filter.

To do this instead of saying new Filter we will say new CustomFilter in profanityFilter.js

const filter = new CustomFilter({ placeHolder: '*' });

Our profanity filter is now complete.

Below is the full API if you just want to copy the whole thing.

Complete API

Filename: index.js

import express from 'express';
import bodyParser from 'body-parser';
import dotenv from 'dotenv';
import profanityFilter from './profanityFilter.js';

dotenv.config();

const app = express();
const PORT = process.env.PORT || 3000;

// Middleware
app.use(bodyParser.json());

// Question Submission Endpoint
app.post('/api/question', async (req, res) => {
 const { firstName, question } = req.body;

 if (!firstName || !question) {
 return res.status(400).json({ message: 'First name and question are required' });
 }

 try {
 let firstNameSanitized = profanityFilter.clean(firstNameSanitized);

 let questionSanitized = profanityFilter.clean(questionSanitized);

 if (!firstNameSanitized || !questionSanitized) {
 return res.status(500).json({ message: 'Invalid Submission' });
 }

 // LOGIC TO SAVE GOES HERE

 res.status(200).json({ message: 'Question submitted successfully' });
 } catch (error) {
 console.error('Error submitting question:', error);
 res.status(500).json({ message: 'Failed to submit question' });
 }
});

app.get('/', (req, res) => res.send('Johnny Five Is Alive!'));

// Start server
app.listen(PORT, () => {
 console.log(`Server is running on http://localhost:${PORT}`);
});


// Export the Express API
export default app;

Complete Profanity Filter

Filename: profanityFilter.js

import { Filter } from 'bad-words';

const bannedWords = [
 "skill issue",
 "sk1ll issue",
 "skill 1ssue",
 "sk1ll 1ssue",
 "sk!ll issue",
 "sk!ll !ssue",
 "skill !ssue",
 "ez"
];

// This will be excluded from the custom filter but handled by `super.clean`
const excludedWordsFromCustomFilter = [
 "ez",
 "kys",
 "L",
 "sus",
];
class CustomFilter extends Filter {
 clean(input) {
 let sanitized = super.clean(input); // Apply the default bad-words filter

 // Apply additional custom bad word filtering
 bannedWords
 .filter(bannedWord => !excludedWordsFromCustomFilter.includes(bannedWord)) // Exclude specific words
 .forEach(bannedWord => {
 const pattern = new RegExp(
 `\\b${bannedWord.replace(/\W+/g, '[\\W]*')}\\b`,
 'gi'
 );

 sanitized = sanitized.replace(pattern, '*');
 });

 sanitized = sanitized.replaceAll('*', '')
 .replace(/\r\n/g, '\n') // Normalize CRLF to LF
 .replace(/\n{3,}/g, '\n\n')
 .trim();

 return sanitized;
 }
}

const filter = new CustomFilter({ placeHolder: '*' });

// Add custom banned words to the filter
filter.addWords(...bannedWords);

// Export the filter for use in other files
export default filter;

Use Powershell on Mac

Justin James — Mon, 13 May 2024 13:00:00 +0000

This post is a Mac version of a post I wrote a couple of years ago titled Take Your Windows Terminal and Powershell to the next level.

Let’s walk through the steps I took to get my shell working like Michael’s on Mac.

Several items need to be installed for the profile to work:

Nerd Font - this is the font that provides the icons for folders and files
Starship - The minimal, blazing-fast, and infinitely customizable prompt for any shell!
Terminal-Icons - PowerShell module to display the icons from the Nerd Font
devtoolbox - a PowerShell module with a bunch of useful aliases for dev tools that Michael released
PSReadLine - a PowerShell module that allows predictive suggestions as you type a command

Font Install

Nerd Fonts patches developer targeted fonts with a high number of glyphs (icons). Specifically to add an increased number of extra glyphs from popular ‘iconic fonts’ such as Font Awesome, Devicons, Octicons, and others.

I am using the CaskaydiaCove Nerd Font from Nerd Font.

To install:

Open Terminal or whatever shell you are using
Update brew with the nerd fonts
```
brew tap homebrew/cask-fonts
```
If you are not using brew, you can install it at https://brew.sh

Install the font

brew install --cask font-caskaydia-cove-nerd-font

Powershell Install

After the font is installed, you need to install Powershell
```
brew install powershell/tap/powershell
```
To Launch Powershell, run:
```
pwsh
```

Powershell Profile Setup

Next, we need to tell Mac Terminal to use the CaskaydiaCove Nerd Font that was just installed.

In Terminal, Open settings by pressing Command+, or clicking on the Terminal menu and selecting Settings
Click the + to add a new Profile or Duplicate your existing profile
Name the new profile Powershell
Click the Change… button under Font
Click All Fonts
Find CaskaydiaCove Nerd Font and Select it
For the style, select Regular
Click the Font Window

Now we need to tell Terminal to automatically launch Powershell as our default Terminal shell

Under the settings for the Powershell profile, click the Shell tab
Under Startup, check the Run command: box
Add the following command:
```
/usr/local/microsoft/powershell/7/pwsh
```
Uncheck Run inside shell
Under the Ask Before closing, add the following:
```
-pwsh
pwsh
```
Close the Settings
Quit Terminal and Relaunch it

Use brew in Powershell

In order to use brew in Powershell you need to run the brew shellenv command to set up the profile environment variables.

Run: vi $profile

Add the following to the file:

$(/opt/homebrew/bin/brew shellenv) | Invoke-Expression

Refresh the Powershell profile by running
```
. $profile
```
You might need to restart Terminal for the profile changes to be picked up

Starship

Next, we need to install Starship, the minimal, blazing-fast, and infinitely customizable prompt for any shell!

You install Starship using

curl -sS https://starship.rs/install.sh | sh

Note: I had issues installing starship with brew and Powershell not recognizing starship command, so using manual install above.

Now that we have Starship installed, we need to add it to our PowerShell profile.

Open PowerShell
Open the profile by typing vi $profile
Add the following line at the top of the profile and save it
```
Invoke-Expression (&starship init powershell)
```

Terminal-Icons

Terminal Icons is a PowerShell module to show file and folder icons in the terminal.

To install, open PowerShell and run:

Install-Module Terminal-Icons -Scope CurrentUser

To use the Terminal Icons, add the following line to your PowerShell profile
```
Import-Module Terminal-Icons
```

devtoolbox

devtoolbox is a set of aliases for common developer command for docker, docker-compose, and git.

You can install devtoolbox from the PowerShell Gallery

Install-Module -Name devtoolbox

To use the devtoolbox now that we have installed it, open up your PowerShell profile and add the following statement.

Import-Module devtoolbox

PSReadLine Predictions

For the predictive suggests when typing commands, we need to install PSReadline.

In a PowerShell administrator shell, run

Install-Module PSReadLine -RequiredVersion 2.2.2 -Force

Needed to use -Force to have it install PSReadLine 2.2

To our PowerShell profile, we need to add the following lines:

Import-Module PSReadLine

Set-PSReadLineOption -PredictionSource History
Set-PSReadLineOption -PredictionViewStyle ListView
Set-PSReadLineOption -EditMode Windows

update function

The update function is designed to make it easy to update powershell to the latest version

function update {
 brew update
 brew upgrade powershell
}

I would suggest that you run the update command and install the latest cross platform version. Once you get the cross-platform version installed, you need to install the PowerShell modules above and create the profile.

profile ended

The last piece is to set up the profile function to launch the profile into VSCode quickly.

function profile {
 code $profile
}

Now your prompt is just like Michael’s.

Full PowerShell Profile

There is a couple of bonus functions like getting a random fact, a dad joke, convert a temp to C, and convert a temp to F.

Originally posted by Michael Jolley

Invoke-Expression (&starship init powershell)
Import-Module Terminal-Icons
Import-Module devtoolbox
Import-Module PSReadLine

Set-PSReadLineOption -PredictionSource History
Set-PSReadLineOption -PredictionViewStyle ListView
Set-PSReadLineOption -EditMode Windows

function fact {
 irm -Uri https://uselessfacts.jsph.pl/random.json?language=en | Select -ExpandProperty text
}

function joke {
 irm https://icanhazdadjoke.com/ -Headers @{accept = 'application/json'} | select -ExpandProperty joke
}

function 2C {
 param (
 [Parameter()]
 [Alias('Temp')]
 [int]
 $Temperature
 )

 ($Temperature - 30) / 2
}

function 2F {
 param (
 [Parameter()]
 [Alias('Temp')]
 [int]
 $Temperature
 )

 ($Temperature * 2) + 30
}

function update {
 brew update
 brew upgrade powershell
}

function profile {
 code $profile
}

Setup Streamdeck With Companion Plug-in

Justin James — Sat, 19 Aug 2023 13:00:00 +0000

When using BitFocus Companion and one or more Streamdecks, you have two ways to setup Companion to interact with the Streamdecks.

The first option is to use the Streamdeck natively use Companion. For this to work you do not need to install the Streamdeck software and can not have the Streamdeck software running if you have it installed. The major downside of this configuration is that you are not able to use any Streamdeck plug-ins and can only use what Companion offers. The upside to this configuration is that it allows you to use multiple Streamdecks and have them work independently of each other.
The second option is to use the Streamdeck Companion plug-in which allows you to use Streamdeck plug-ins and requires that the Streamdeck software is installed and running. The downside to this configuration is if you are using multiple Streamdecks then when you change the page in Companion it will change the page on all of the Streamdeck. The upside is that all of the StreamDeck plug-ins do work.

This article is going to focus on how you set up Companion to work with the StreamDeck Plugin.

Configuration Companion

The first thing we are going to do is configure Companion to use the Streamdeck plugin.

Open up your Companion Setting GUI. Mine is at http://localhost:8888/settings
Find the Surfaces section and disable the “Enable connected Streamdecks

Install Streamdeck Companion Plugin

Next we are going to install the Companion button plugin for your Streamdeck. If you do not already have the Streamdeck software installed, you will need to download it from https://www.elgato.com/us/en/s/downloads and install it before you can install the Companion button plugin.

Once you have the software installed, open up the Streamdeck software
In the top right corner, you want to click on the Store icon. It is the one with the + sign on it.
Once the store is open, click on the Plugins option on the left
In the searchbar type, Companion and then install the Companion button plugin if it is not already installed.

Note: If the button for the plugin says uninstall then you already have it installed and can go to the next section.
If the install ask you to install the Companion profile, please install it.

Adding Companion Buttons to Your Streamdeck

Next, in the Streamdeck software we need to add buttons that are of Companion button that point to a specific Companion button and page within Companion. It does not matter if you create an additional page of Companion buttons, a sub-folder of Companion buttons or a Streamdeck profile that has all of the Companion buttons, they all work the same way once you add the buttons.

Note: You will want to leave one button in Companion empty so that you can put a button on your Streamdeck that changes your Streamdeck page or profile out of your Companion profile

When you install the Companion profile, if you switch to that profile, it may have all of the buttons already configured on it for you.
If the Companion profile did not install or does not have all of the buttons configured for you, follow the steps below.
In the Streamdeck software, search for Companion in the list of possible actions.
Then drag the Companion button on to the Streamdeck in the position that you want the Companion button to show up
Once you have dragged the button onto the Streamdeck, you will need to set the button number that it references and the page number. By default the page number is set to dynamic which means that you will be able to navigate to different Companion pages. If you want to stay on a single page for that Streamdeck, then set the page number to the page that you want that Streamdeck to always stay on.
Repeat the previous two steps for all of the Companion buttons that you want on your Streamdeck.

Now your Streamdeck will work with all of the Companion buttons that you have configured.

Jenkins - Automatically Versioning Your Application

Justin James — Mon, 24 Jul 2023 13:00:00 +0000

In a previous post, I showed how to use GitVersion with Jenkins but unfortunately as I got further into my Jenkins usage, I was not able to get GitVersion to consistently work across pull request, tags and main branch. Several times I thought I had it working only to find out as I fixed it for one of the places I needed to use it that I broke it for the other places. It felt like I was spending more time trying to get GitVersion working then I did on getting the whole build working. So it was time for a different solution.

GitVersion is what we were using to determine the version number to use for our nuget packages and releases. It made it so that we did not have to remember each sprint to increment our version number which we routinely forgot to do until we started packaging a release and then it just delayed us as the build needed to run with the new version number.

The replacement tool we decide on was jx-release-version. jx-release-version just worked out of the box the first time in all of my scenarios (pull request, tags, and main branch).

Below we will go through the code I needed to add to my Jenkinsfile to get jx-release-version to give me the version number to use.

Note: I am on Windows and have not tested it on a linux Jenkins agent.

The first thing that I needed to do was download and unzip the Windows install of jx-release-version from https://github.com/jenkins-x-plugins/jx-release-version/releases.

Once the zip downloaded, I unzipped jx-release-version to c:\jx-release-version on my Jenkins controller.

The next thing I needed to do was to add a stage to my Jenkinsfile to use jx-release-version to get the version number and make it an environment variable that I can use in future stages.

In the script below, we are checking if the Jenkins environment variable TAG_NAME is set and if it is then we are tell jx-release-version to use the tag as the version number. For our Git tags, they are in the format of v1.0.0 and jx-release-version will strip out the starting v. If the build is not from a tag then we increment the minor version by default and it will pick up the version from the latest tag we created. Once we get the version number f rom jx-release-version, we set the versionNumber environment variable by calling env.versionNumber

NOTE: I am using my Jenkinsfile in a Multi-Branch build so the TAG_NAME might not be set if you are not using a Multi-Branch build.

stage ('Set Version Number') {
 steps {
 script {
 def isTag = env.TAG_NAME != null
 if (isTag) {
 def tagVersionOutput = bat returnStdout: true, script: "@\\jx-release-version\\jx-release-version -next-version=manual:${env.TAG_NAME}"

 env.versionNumber = "${tagVersionOutput.trim()}"
 } else {
 def output = bat returnStdout: true, script: '@\\jx-release-version\\jx-release-version -next-version=increment:minor'

 def versionNumber = output.trim()

 env.versionNumber = "${versionNumber}-ci${env.BUILD_NUMBER}"
 }

 echo "versionNumber: ${env.versionNumber}"
 }
 }
}

Now that we have the versionNumber environment variable, we can use it in any of the other stages in the Jenkinsfile. For Windows, we can use it in a bat file using %versionNumber%

stage('Build') {
 steps {
 bat '''
 echo %versionNumber%
 '''
 }
}

And just like that we have semantic versioning working in our Jenkins build.

Cypress - Scale Your Network Mocks By Centralizing Them

Justin James — Wed, 19 Jul 2023 13:00:00 +0000

As your number of Cypress test grows, if you are mocking out your API calls, it can easily and quickly become hard to maintain which is exactly what happened on one of my projects.

We were mocking all of our API calls so that we could focus our tests on UI behaviors and interactions. The code for the mocks was typically in each test which was fine for a few tests but now with over 1,000 Cypress tests, you can just imagine how much duplicate code there was and the difficulty in maintaining it..

It was difficult to find an existing mock for a new tests, so many times the developer writing the tests just created a new mock and a new fixture file.

It was even more time consuming as the API responses changed over time and we had to find all of the places that a mock was used and update the response for the new API response.

It was also timing consuming to switch from the old way of mocking Cypress with cy.server to cy.intercept.

To combat these issues, we changed our code to centralize the calls to cy.intercept so that we only had 1 place it was being used, so if we ever needed to change the Cypress method being used or any update any of the parameters to cy.intercept.

From there, we also created files to hold all of our code to mock out an API. We split the files by the API endpoints so that we could easily figure out where an API mock was located. In these files, we also needed the ability to change the response, status code, url, and the alias for cy.wait.

This post is about how we accomplished these goals and made a way more manageable mock setup for us.

Cy.Intercept Helper

The first thing we need to create is a helper file that encapsulates the calls to cy.intercept.

In the helper below, we are checking to see if the response ends in .json and if it does, then we assume we are going to use a fixture file and needed to use the fixture parameter. If it does not end in .json, then we assume that we need to use the body parameter.

You will also see that we are removing the @ from the alias. We did this as our aliases values start with @ so that we can use them with cy.wait without having to constantly adding the @ symbol to the name.

File: cypress/mocks/api-helper.js

export const mock = (response, status, url, alias, method = 'GET') => {
 if (typeof (response) === 'string' && response.substring(response.length - 5) === '.json') {
 cy.intercept({
 method: method,
 url: url,
 }, {
 statusCode: parseInt(status),
 fixture: response
 }).as(alias.replace('@', ''));
 } else {
 cy.intercept({
 method: method,
 path: url,
 }, {
 statusCode: parseInt(status),
 body: response
 }).as(alias.replace('@', ''));
 }
}

Mocks

Now that we had our api helper file created, we needed to create our API mocks. Below are two samples: 1.) Blog API that uses inline value and 2.) Post API that uses a fixture file.

1. Mock Returns Inline Response

In this mock, we need to import the api helper from above. Then we define our aliases that we are going to use for our cy.wait command. We make the alias name that same as the method name to make it easy for developers to know which alias to use for the mock. Lastly, we needed to define our API mock method with the default response, status, url, and alias.

File: cypress/mocks/api/mock-api-blogs.js

import * as mockRoute from '../api-helper'

export const aliases = {
 getBlog: "@blog"
}

export const getBlog = (
 response = [],
 status = '200',
 url = '/api/v1/blog',
 alias = aliases.getBlog) => {
 mockRoute.mock(response, status, url, alias);
};

2. Mock Returns Response From Fixture File

This mock is exactly like the previous mock but instead of inline response, we are telling our mock which fixture file to return. Cypress expects your fixture file to in the fixtures directory, so we just need to set the value of the response to the file location under the fixture directory.

File: cypress/mocks/api/mock-api-posts.js

import * as mockRoute from '../api-helper'

export const aliases = {
 getPosts: "@getPosts",
}

export const getPosts = (
 response = 'posts/post.json',
 status = '200',
 url = '/api/v1/posts',
 alias = aliases.getgetPosts) => {
 mockRoute.mock(response, status, url, alias);
};

Here is what our fixture file looks like. It is just the response that the API would return. Typically I create these by grabbing the response from the Chrome Dev Tools.

File: cypress/fixtures/posts/post.json

{
 "results": [
 { "id": "011b8bbf-5930-4925-9f3d-f8d81c1fc2f3", "name": "Post 1", "BlogId": 1 },
 { "id": "5d7e0d56-8fd2-4563-a97c-8bd5de312509", "name": "Post 2", "BlogId": 1},
 ]
}

Test That Uses Mock

Now that we have our API helper and our mocks created, we can use them in a test. We start by importing the mock that we want to use and then call the mock method, do the action that calls the API that is mocked (cy.visit in the sample test) and then call cy.wait using our mocks alias.

File: cypress/e2e/test.js

import * as postMocks from '../../mocks/api/mock-api-posts';

describe('Posts Tests', () => {
 it('Post Sample Tests', () => {
 postMocks.getPosts();

 cy.visit('/posts');
 cy.wait(postMocks.aliases.getPosts)

 ...your tests code here
 });
});

With this setup, we have be able to reduce the number of different mocks by over 70%. We can also quickly find all of the places that a particicular API mock is used if we need to update it.

Cypress - Creating Your Test Strategy

Justin James — Mon, 17 Jul 2023 13:00:00 +0000

One of the most essential things before jumping into writing tests is to develop your test strategy. I know it sounds like a daunting task. If you are reading this post, you are most likely a developer. We developers….we just want to write code, not spend time coming up and documenting something like a test strategy. However, not having a test strategy is like driving a car in a new city without a GPS and hoping you will reach your destination as quickly as possible. You may get there eventually without the GPS, but it is most likely going to be a lot of wrong turns, having to stop for directions (which most likely you won’t do until you are really, really lost if you ever stop to ask) and a lot of backtracking and starting over. I don’t know about you, but I prefer the most direct route and a GPS to guide me.

In this post, you will discover the questions you need to answer to develop your test strategy, and once you answer those questions, you will have your GPS guide. These questions are how we decided on our testing strategy when we started and has taken us from zero UI tests in 2019 to around 1,100 tests as of the writing of this post.

So let’s jump right into it.

Overview

First, give yourself a big pat on the back for deciding that automating your tests is essential. It is a big step to go from manual tests (or no tests) to automated tests, and once you go automated, you never want to go back to manual…ever again.

With Cypress, you have multiple types of tests (Component, End to End, and UI with network calls mocked) that you can write. There is not one correct answer for which type to start with or which one is more important. It all depends on your situation, goals, and application. And yes, I know I gave the depends answer that we all dislike. I wish I could give a straight answer for the type or types to start with, but if I did that, it would not be the best for you as the reader since we all have different testing goals, and depending on those goals that are certain test types that are better than others. Eventually, all of the types of tests may be important to your application tests or some types may never become important based on your testing goals.

For an existing application that you want to write automated tests for, regardless of the types of tests that you write, I would suggest that you consider all of your existing code to be working as expected and write tests as you make changes to those existing features or add in new features. This will allow you to build up your testing library while continuing to deliver new features.

Two big questions need to be answered to figure out the type of tests you should be writing initially.

Where do most of your bugs come from in your UI?
What is your intent with moving from manual testing (or no testing) to automated testing?

1. Where do most of your bugs come from in your UI?

Typically, when a team starts looking into automated testing, it is due to having too many customer bugs being reported in production because you do not have enough time to manually test all of the essential things before deploying to production, and you are spending more time releasing hotfixes than working on new features. So our initial goals usually are to increase our customer’s confidence that the product we are delivering to them can be counted on; we are catching bugs before they make their way into production, so we spend way less time and energy creating hotfixes; having the confidence that when we deploy to production, our application does what we say it does.

That is why our first question is about where the majority of your bugs in the UI are coming from so that you can maximize the return on your automated test investment as quickly as possible. The quicker we can get wins with our automated tests, the easier it is for the team, management, and customers to see the value in writing automated tests, and the more likely you will be given the continued time to write automated tests.

Here are the typical answers I hear for where the bugs are coming from (at a high level) and what type of tests you might want to start with.

1.1: Communication with your API (an API that you own and created for your UI)

If most of your bugs are with the interactions between your UI and your API, then end-to-end testing, or E2E, as often referred to, would be the place I would consider looking into first. E2E tests are meant to test the whole flow of your application from your UI to API to your data store (e.g. database). Most of the time, nothing is mocked out in E2E tests. However, if you have a tough to test 3rd party API (something you don’t own and didn’t create) or have rate limits, or it is an expensive 3rd party API then I have seen those mocked out in the E2E tests.

E2E tests also typically require inserting data into the data store by either calling the API to load the test data or going through the UI screen to create the data. For the performance of your tests, it is recommended to call the API to insert the test data needed for your tests instead of going through all of the UI screens to insert the data.

1.2: UI behaviors and interactions

If the majority of your bugs are coming from the behaviors that happen as part of the user interactions in your UI, then I would look at mocking the API calls that you are making by using cy.intercept so that you can focus on what your UI is doing as the user is clicking around in your UI.

Here are some examples of what I mean by behaviors and interactions and tests you might run:

User clicks on a button that should launch a dialog. Is the correct dialog opened and did the dialog have the right action buttons (if they are configurable in code to what shows)?
As a user types or paste into an input field, non-allowed characters are removed from the input field. Did it actually strip out the non-allowed characters?
An input field should have a min and max limit. Are the correct attribute on the input field to enforce this?
Depending on permissions, an element on the page will be shown or hidden. This is where mocking the API calls comes in handy. You can change the permissions as part of what the mock returns, so simulate the different permissions a user might have and then test if an element is shown or hidden as you expect. Your API should validate the permissions again to ensure someone didn’t open the developer tools and turn on something, but this at least ensures your UI is right.
A grid with sortable columns and ensuring that the sorting A-Z and Z-A are working. If it is server-side sorting, then make sure that the correct API call is made, which you can test with a mock. This particular test has saved us several times, as we have broken this feature more than once on some of our grids.

These are just a few of the many behaviors and interactions in our UI that we are testing for. This is where my team focused most of our automated tests since the UI behaviors were where about 95% of our bugs came from. In 2019, we started out with zero automated UI tests and as of the writing of this post, we have about 1100 Cypress tests now. Yes, 1100 UI tests. Writing automated tests is considered part of our definition of done and our management is 100% backing us that automated tests are non-negotiable but have left it up to us as a development team to figure out what tests and how many of them we need (i.e. there is no random code coverage % that we need to hit just to hit…..).

When we started writing Cypress tests, our product was a little over a year old, so we had a lot of code already written and a lot of features that we had already committed to delivering. So we couldn’t just stop what we were doing to focus on writing Cypress tests, but management was willing to split off a dev or two to work on the testing strategy, write some initial tests to validate the automated testing strategy, and train the team on writing Cypress tests. This allowed the team to keep moving forward while we figured out the testing strategy and validated it.

1.3: A 3rd party API that you are interfacing with?

For interacting with a 3rd party, if your UI is directly contacting the 3rd party API, then I would for sure use Cypress for testing, but in most cases, the interaction with a 3rd party API requires some kind of authentication or a secret key so your interactions to the 3rd party API are done from within your API so that you do not leak your secret keys. If your interaction to the 3rd party API is done from within your API, then I would write API tests using the testing framework for your API technology (e.g. XUnit if I am using .NET for the API).

If your communication and interaction with a 3rd party API is done directly from your UI, then you can either write end-to-end tests with nothing mocked or tests with your API calls mocked. Personally, I would mock my API calls as much as I can so that I can focus on just the 3rd party API interactions.

1.4: Individual components within your application?

If the individual reusable components are where the majority of your bugs are coming from and you are using one of the supported UI frameworks then I would write component tests so that you can test the components in isolation.

The only reason that we are not using Component tests is that they did not exist in 2019 when we started using Cypress and since we already have UI tests that include testing our components, it has not made sense ROI wise for us to start with component testing. However, if we were starting today, we would have used component testing in addition to our UI interaction and behavior tests.

2. What is your goal with moving from manual testing (or no testing) to automated testing?

Typically, when starting our journey with automated testing, we have some pain points with our existing test strategy that we are trying to solve. I find that they tend to fall into the following categories:

Want to reduce bugs that you are currently having
Want to reduce the time it takes to run through QA?
Want to automate the testing of edge cases that are hard to manually test?
Want to test happy path to make sure everything is working as expected when no errors are being generated
Want to test out potential errors that may be returned from your API and make sure the UI handles them properly
Want to perform full end-to-end testing to make sure everything is communicating as expected between the different layers of your application without having anything mocked out

2.1 Want to reduce bugs that you are currently having

If this is your primary goal, then follow the answers to question number one above for the type of tests to start with in your testing strategy. I suggest starting by writing tests as you fix bugs instead of trying to retrofit and add tests for all the bugs you have already fixed.

2.2 Want to reduce the time it takes to run through QA?

To reduce testing time, I would look at your current tests and see which ones take the longest to set up and execute and are in critical features. Then see if you can effectively automate the setup and test or not to make sure that you actually shorten the testing time without spending so much time writing the tests that it would take years before you see a return on the testing time (i.e. more testing saving than testing writing time). Unfortunately, sometimes it is more expensive to automate certain tests than it is to manually perform the tests.

As well, the reason that I also look at the tests for critical features is to make sure we are testing the most important features first and not just testing the features that take the longest to test.

Also, if you are currently manually testing, if your test steps are not documented, one of the first steps would be to document those steps so that your initial automated tests match the tests you are manually doing today. The documentation could be as simple as a Google Document or Word document. It is more important that they are documented than how they are documented. Bravo to you and your team if you already have your manual test steps documented.

2.3 Want to automate the testing of edge cases that are hard to manually test?

Before diving into testing edge cases, I would first look at the impact if the edge case was hit. I have seen several times that a team wants to test edge cases just to make sure they are covered and when we looked at the impact if the edge case was hit, it was either no impact or so small that it really did not make sense to actually test it compared to other tests that needed to be written.

Suppose the edge case is hit and it would cause impact. In that case, the first step is to understand the steps that it would take to make the edge case happen and then see which test type would allow you to test the edge case (Component test, end-to-end test, or UI behavior/interaction test).

Note: Most of the time, though, this is different from where most teams start with their automated testing since it is typically challenging to get everything set up to make the edge case happen and most of the time they are low impact.

2.4 Want to test happy path to make sure everything is working as expected when no errors are being generated

This is where most teams start, followed right behind it with testing potential errors that can be returned for their API calls. When you deploy your application to production, you want to know that your UI is doing what it is supposed to be doing when everything is playing nicely together. Having happy path tests gives you the confidence that everything is working.

The one caution I will give about happy path tests is that it is very very easy to go overboard and test everything possible. Just because you can doesn’t mean that you should. Test the critical features and ones that are impactful if they are not working correctly.

2.5 Want to test out potential errors that may be returned from your API and make sure the UI handles them properly

These kinds of tests are perfect for using cy.intercept to mock out your API calls so that you can quickly generate the error and then make sure that your UI handles the error gracefully.

2.6 Want to perform full end-to-end testing to make sure everything is communicating as expected between the different layers of your application without having anything mocked out

This answer here is obvious that end-to-end testing will be the answer. In my experience, most teams do not start with end-to-end testing as it is the most complicated and time-consuming to get set up. You have to run your API, data store, and UI before kicking off your Cypress tests. You will also need to seed any data needed for tests to pass to your data store before running each test and then do the cleanup work to ensure that tests are not interacting with each other.

End-to-end testing is also typically the slowest test to run since you are communicating across the network with your API and data store. End-to-end tests are typically reserved for critical features where it is important to ensure everything is communicating.

Wrap Up

As much as I know you want to jump into writing code, having a test strategy is key to be able to quickly hit your testing goals. Your test strategy is your GPS guide to your goals and will get you there as fast as possible. No matter how much we think we know better than the GPS, it is amazing how accurate the GPS is.

ASP.NET Core Environment Variables With Semicolon in Jenkins

Justin James — Tue, 16 May 2023 13:00:00 +0000

In my ASP.NET Core project, I am using an environment variable in the form of MyProject:MyVariableName and needed to create a Jenkins pipeline but I could not get it to recognize that format. It kept making the environment variable name just MyVariableName.

Below is the code from the Jenkinsfile that I tried that was causing the issue.

stage('Run All Test') {
 environment {
 MyProject:MyVariableName = "Some Value"
 }
}

Turns out that Jenkins does not recognize the : in environment variable names. After much searching, I ran across this article that mentioned that not all platforms support : in the environment names and that for those environmments you can use a double underscore __

So I updated the Jenkinsfile code above with the double underscore __ and this make Jenkins see the environment variable name as MyProject:MyVariableName

stage('Run All Test') {
 environment {
 MyProject__MyVariableName = "Some Value"
 }
}

Using GitVersion on Jenkins

Justin James — Tue, 02 May 2023 13:00:00 +0000

NOTE: This article is out of date. Click here for the new article.

For my continuous integration builds I use Gitversion to determine that SemVer to use for a particular build and release. For pre-release builds the version would look like something like 0.1.5-ci0004 where the -ci is appended to the version number and the 4 is the build number in the CI system. Then for a release release version, it would just be the version number of 0.1.5 without the -ci or build number at the end.

I am in the process of moving several builds to Jenkins and needed to get Gitversion working on Jenkins. I am totally new to Jenkins so even though Gitversion has documentation on how to set up Jenkins correctly it took me a bit to figure out where those options were. My initial attempts ended up with the pre-release being 0.1.5-origin-master-0004 instead of 0.1.5-ci0004.

Below are the options that you need to add into Jenkins and what they are called.

For Branches to build, make the branch specifier
```
+refs/heads/*:refs/remotes/@{remote}/*
```
Add Clean before checkout and check Delete untracked nested repositories
Add Advanced clone behaviors and then check both Fetch tags and Honor refspec on initial clone. Leave Path of the r eference repo to use during clone and Timeout fields empty and do not check Shallow clone
Add Prune stale remote-tracking branches
Add Check out to specific local branch and leave the branch name empty

Now that your Git checkout is setup correctly, before you can run gitversion you need to add the EnvInject plugin so that you can put the gitversion information onto environment variables that you can use in other build steps.

Click on Manage Jenkins
Click on Manage Plugins
In the avaiable plugins list search for EnvInject
Install the plugin

Now you are ready to add the build steps to execute your Gitversion command and then inject them into your environment variables.

For the build steps, add an Execute Windows batch command and set the command text to:

gitversion /output buildserver

As part of the output you will see Gitversion output such as

GitVersion_Major=0
GitVersion_Minor=1
GitVersion_Patch=5
GitVersion_PreReleaseTag=ci.4
GitVersion_PreReleaseTagWithDash=-ci.4
GitVersion_PreReleaseLabel=ci
GitVersion_PreReleaseLabelWithDash=-ci
GitVersion_PreReleaseNumber=4
GitVersion_WeightedPreReleaseNumber=55004
GitVersion_BuildMetaData=
GitVersion_BuildMetaDataPadded=
GitVersion_FullBuildMetaData=Branch.master.Sha.440219f44061cd2a8d1d8b21ad2dcd1580f5ecd3
GitVersion_MajorMinorPatch=0.1.5
GitVersion_SemVer=0.1.5-ci.4
GitVersion_LegacySemVer=0.1.5-ci4
GitVersion_LegacySemVerPadded=0.1.5-ci0004
GitVersion_AssemblySemVer=0.1.5.0
GitVersion_AssemblySemFileVer=0.1.5.0
GitVersion_FullSemVer=0.1.5-ci.4
GitVersion_InformationalVersion=0.1.5-ci.4+Branch.master.Sha.440219f44061cd2a8d1d8b21ad2dcd1580f5ecd3
GitVersion_BranchName=master
GitVersion_EscapedBranchName=master
GitVersion_Sha=440219f44061cd2a8d1d8b21ad2dcd1580f5ecd3
GitVersion_ShortSha=440219f
GitVersion_NuGetVersionV2=0.1.5-ci0004
GitVersion_NuGetVersion=0.1.5-ci0004
GitVersion_NuGetPreReleaseTagV2=ci0004
GitVersion_NuGetPreReleaseTag=ci0004
GitVersion_VersionSourceSha=cc7a999cb8118c8c098a8f45f507403342a64435
GitVersion_CommitsSinceVersionSource=4
GitVersion_CommitsSinceVersionSourcePadded=0004
GitVersion_UncommittedChanges=0
GitVersion_CommitDate=2022-02-09

After the build step for gitversion, add an Inject environment variables step and set the Properties File Path to:
```
gitversion.properties
```
Now you can use the Gitversion references into other build steps such as a nuget package build where it will use the environment variable %GitVersion_NuGetVersionV2%.
```
dotnet pack MyNugetPackage.sln /p:PackageVersion=%GitVersion_NuGetVersionV2% --version-suffix "pr%BUILD_NUMBER%" -c Release
```
You will see in the log output that the command execute was:
```
dotnet pack MyNugetPackage.sln /p:PackageVersion=0.1.5-ci0004 --version-suffix "pr10" -c Release
```

Use C# to Convert PNG to Base64

Justin James — Mon, 01 May 2023 13:00:00 +0000

For something I was working on I created a quick script to convert all PNG files in a directory to a base64 representation of the image. Since I was going to need to do this multiple times as we iterated over the image designs to get one that we were happy with, I decided to write a quick script using C# and use Linqpad to run the script.

For the script output, I needed to output the following TypeScript object for the project that I needed the base64 values for.

const images = {
 "LG1": "base64 of image. removed for readability here",
 "LG10": "base64 of images. removed for readability here",
 ...add a row for each image
}

Here is the Linqpad script that I wrote.

string directoryPath = @"Directory with the PNG iamges";

string[] pngFiles = Directory.GetFiles(directoryPath, "*.png");

StringBuilder sb = new StringBuilder("const images = {\n");
foreach (string pngFile in pngFiles)
{
 byte[] imageBytes = File.ReadAllBytes(pngFile);
 string base64String = Convert.ToBase64String(imageBytes);
 string filename = Path.GetFileNameWithoutExtension(pngFile);
 filename = filename.Replace("-", "").Replace(" ", "").Replace("_", "");
 sb.AppendFormat("\t\"{0}\": \"{1}\",\n", filename, base64String);
}

sb.Remove(sb.Length - 2, 2); // Remove the trailing comma and newline
sb.Append("\n}"); // add newline before the closing bracket

// Print out the output string
sb.ToString().Dump();

Now that I have the TypeScript object in the Linqpad output window I can just copy and paste it into my TypeScript code.

Better Way to Manage Database Views in EF Core Migrations

Justin James — Thu, 23 Feb 2023 13:00:00 +0000

When using database views that are not directly managed by Entity Framework Core (EF Core), it is a good practice to still version control and I like to do this by including the scripts to add/drop the views in an EF Core migration script. It is easy enough to use the migration builder sql method to call the sql needed to add and drop your view but as the project grows this becomes way harder to manage. One of my projects has 638 migration scripts (it has been going on for like 5 years now), so you can imagine how difficult it can be to find the previous version of the view when you need to drop a migration script and revert back to the previous version of the view.

Recently, we started managing our view in a different way that has made it easier to find the different versions of the view and simplified our migration scripts. In this post, we are going to look at the implementation we did to manage our views.

For the view management we do need a blank EF Core migration script which we can create by running

dotnet ef migrations add YourMigrationScriptName

This will create you a blank migration script with the Up and Down Methods

using Microsoft.EntityFrameworkCore.Migrations;
using System;

namespace MyApp.Migrations
{
 public partial class YourMigrationScriptName : Migration
 {
 protected override void Up(MigrationBuilder migrationBuilder)
 {
 }

 protected override void Down(MigrationBuilder migrationBuilder)
 {
 }
 }
}

Before in our migration script we would create public static methods to get the view create and drop statements and then call then in the Up method. Then in the Down method we would make a call to the previous migration scripts static methods for the view drop and create statements.

Instead we now create a class per view that will contain all of the versions of the view with methods to get the create statements for the version and the create statement for the previous version. Then in our migration script we can just make a call to the view’s class to get the right sql.

To make this easy to work with, in each view’s class we have created:

A VersionNumber enum to hold each version number. We made the version number that same as the date in each migration scripts file name
A method called GetDropSql that returns the view drop statement
A property for each version number that contains the view create sql for that version
A method called GetCreateSqlPrevious that takes in a version number and calls the correct property for the previous version of the view.
A method called GetCreateSql that takes in a version number and calls the correct property for that version of the view

Below is an example of what our view files look like. I create two versions of the view called v20230222 and v20221230.

using System;

namespace MyApp.Views
{
 public static class MyView
 {
 // View version numbers
 public enum VersionNumber
 {
 v20230222,
 v20221230
 }
 private const string ViewName = "vw_MyView";

 // Get the previous view create statement for a version number
 public static string GetCreateSqlPrevious(VersionNumber versionNumber)
 {
 return versionNumber switch
 {
 VersionNumber.v20230222 => v20230222,
 VersionNumber.v20221230 => "",
 _ => throw new ApplicationException("Unknown Version Number")
 };
 }

 // Get the view create statement for the version number
 public static string GetCreateSql(VersionNumber versionNumber) =>
 versionNumber switch
 {
 VersionNumber.v20230222 => v20230222,
 VersionNumber.v20221230 => v20221230,
 _ => throw new ApplicationException("Unknown Version Number")
 };

 public static string GetDropSql() => $@"DROP VIEW IF EXISTS {ViewName}";

 private static string v20221230 => $@"CREATE VIEW [dbo].{ViewName} WITH SCHEMABINDING AS ......";

 private static string v20221230 => $@"CREATE VIEW [dbo].{ViewName} WITH SCHEMABINDING AS ......";
 }
}

Now that we have our view class, in our migration script in the Up and Down method we could use to the migrationBuilder.Sql method to make the calls into the MyView class that we created above.

Note: The reason that we drop our views and then create them instead of just altering the views is due to using schema binding on our views to ensure we don’t drop a column that they are using and Sql Server not allowing alter with schema binding.

using MyApp.Views;

namespace MyApp.Migrations
{
 public partial class YourMigrationScriptName : Migration
 {
 protected override void Up(MigrationBuilder migrationBuilder)
 {
 migrationBuilder.Sql($"exec('{MyView.GetDropSql().Replace("'", "''")}')");

 migrationBuilder.Sql($"exec('{MyView.GetCreateSql(MyView.VersionNumber.v20230222).Replace("'", "''")}')");
 }

 protected override void Down(MigrationBuilder migrationBuilder)
 {
 migrationBuilder.Sql($"exec('{MyView.GetDropSql().Replace("'", "''")}')");

 migrationBuilder.Sql($"exec('{MyView.GetCreateSqlPrevious(MyView.VersionNumber.v20230222).Replace("'", "''")}')");
 }
 }
}

Having this process allows us to manage our views in the same manner that we do for all of our schema changes to either push changes to our database with the ef database update command or by creating a sql script from the migrations and then running the script against our database.

Xunit Create Generic Exception Tests

Justin James — Thu, 16 Feb 2023 13:00:00 +0000

Using XUnit, I was creating a bunch of exception test methods that did the same exact test with the only difference being the type of exception being thrown and I thought there has to be a way to use an XUnit theory to only write a single test method and validate the various exception scenarios.

Luckily, it was really easy to accomplish the goal of having a single test method that validated multiple types of exceptions using an XUnit theory but it took a bit to figure how to accomplish this goal.

To validate an exception with XUnit you normally make an Assert.Throws calls and tell the type of exception like so:

ApplicationException exception =
 Assert
 .Throws<ApplicationException>(() => Your_Method_Call);

This works great to catch a single exception type. However, what if you needed to test different scenarios in an XUnit theory that throw different exception types.

One option would be to create a test method for each exception type you need to assert but this creates a good amount of duplicate code.

Another option would be to make all of your exceptions types the same but that makes your code less obvious and it is not great practice to not throw the proper exception type.

That leaves us with the best option which is to use one of the overloads of the Asset.Throws method where you can specify the exception type. Since all exceptions inherit for Exception, we can get the type of exception from the Exception that we pass in through the XUnit Theory

Exception exception =
 Assert
 .Throws(expectedException.GetType(),
 () => Your_Method_Call);

Now lets look at the complete example where we setup the test data to use in the XUnit Theory MemberData attribute and then write the XUnit Theory test method.

 public static IEnumerable<object[]> ExceptionData => new List<object[]>
{
 new object[]
 {
 Guid.Empty, // argument1
 Guid.Empty, // argument2
 new ArgumentNullException("Argument1", "Exception Message") // exceptedException
 },
};

[Theory]
[MemberData(nameof(ExceptionData))]
public void ShouldThrowException(Guid argument1, Guid argument2, Exception expectedException)
{
 Exception exception =
 Assert
 .Throws(expectedException.GetType(),
 () => Your_Method_Call);

 Assert.NotNull(exception);
 Assert.Equal(expectedException.Message, exception.Message);
}

How to Setup a Development Environment for Companion v3 and ZoomOSC/ZoomISO Module

Justin James — Fri, 03 Feb 2023 13:00:00 +0000

Bitfocus Companion version 3 is in beta and they have made it way easier to do module development. In this post, we are going to get your computer set up to be able to do Companion module development.

This post will be broken into 3 parts:

Get Companion Module on Your Computer
Compile Companion Module
Use Your Version of Companion Module in Your Companion Instance
Pull Changes from Module Into Your Copy of the Module

Part 1: Get Companion Module on Your Computer

The module we will be using for this post is the ZoomOSC / ZoomISO module.

The code for all of the Companion modules is hosted on a GitHub repository. In part 1, we will be creating a GitHub account, create a copy of the companion module in your GitHub account and download the companion module code onto your machine.

Create GitHub Account

If you already have a GitHub account you can skip this step

It is free to get a GitHub account. Go to https://GitHub.com/signup and follow the prompts to create your account

Now you are ready to set up your GitHub account and download the code

Get Companion module code

You will need to create a copy of the GitHub repository called a Fork, so that we have our own copy of the module in GitHub.

From GitHub docs: A fork is a copy of a repository that you manage. Forks let you make changes to a project without affecting the original repository. You can fetch updates from or submit changes to the original repository with pull requests.

Go to https://github.com/bitfocus/companion-module-zoom-osc-iso
Click on the Fork button on the right side of the screen
Once you click the create fork button, it will create your fork and then navigate your to the url for your fork.

Create Companion module dev directory

For all of your module development, you will need to create a single directory on your machine that any Companion module that you want to develop will go into

Create a directory called companion-module-dev somewhere on your computer

Get Companion module onto your computer

Now that we have the directory that will contain our Companion modules, we need to actually get them onto your computer. We will install the Git command line tools so that you can clone (e.g. copy) the module onto your machine.

Go to https://git-scm.com/downloads and downlod the Git install for your OS
Open the installer for Git and follow the prompts. I just stick with the defaults
Open a terminal and navigate to the companion-module-dev folder

Run the following command to set up your Git name and email that will be used if you submit changes to the code

git config --global user.name "Your GitHub Name (e.g. First Name Last Name)"
git config --global user.email "Your GitHub email"

In the companion-module-dev folder run the following command to download the source code
```
git clone [Your GitHub Fork Url]
```
for example, my GitHub fork is https://github.com/digitaldrummerj/companion-module-zoom-osc-iso
The git clone created a directory in the companion-module-dev folder called companion-module-zoom-osc-iso
In the terminal, go into the companion-module-zoom-osc-iso driectory
In the terminal within the companion-module-zoom-osc-iso directory run the following command to add a reference back to the original repository so that later on you can easily pull in code changes to the module
```
git remote add upstream https://github.com/bitfocus/companion-module-zoom-osc-iso
```

Part 2: Development Environment Setup

Now that we have a copy of the module code on GitHub and on our computer, we need to set up the development environment for Companion.

Node Install

The first thing we need to do is install Node 18.

Navigate to https://github.com/Schniz/fnm#installation
Follow the install instructions for your OS
Follow the Shell Setup steps for your terminal type

Now that fnm is installed, we need to tell it which version of node to use

In a terminal window, install Node by running
```
fnm install 18
```
Tell fnm to use Node 18 that we just installed
```
fnm use 18
```
Tell fnm that Node 18 is our default Node version
```
fnm default 18
```
Lastly, install enable the corepack
```
corepack enable
```

Code Editor Install

For editing the companion module code I like to use Visual Studio Code.

Part 3: Use Your Version of Companion Module in Your Companion Instance

Install Dependencies

Before we can use our Companion module in Companion, we need to install the dependencies for the module and compile the module.

Before we can install the module dependencies, we need to install Yarn. In your terminal windows run the following command:
```
npm install --global yarn
```
Note: we are using Yarn 1.0 because that it what Companion is using and we want to stay on the same version as they are using.
Now that we got Yarn installed, we can install our module’s dependencies by running the following command in your module’s directory
```
yarn install
```
The module built after the yarn install. If you need to build the module again, you can run the following command
```
yarn dev
```

Install Companion

We are now ready to install Companion v3

Go to https://bitfocus.io/companion
Click Sign in if you have an account or Sign up if you need to create an account
After you login, click on the Download link on the left menu or navigate to https://user.bitfocus.io/download
For v3, there are two options: Beta or Experimental. The Beta is built every 6 hours. The experimental build is the latest and greatest.
After you download Companion, run the installer and take all of the defaults.

WARNING: If you have Companion v2 installed on the same machine as you are installing Companion v3 on, you will share the configuration between your v2 and v3 instances but the commands and connections names are not the same between v2 and v3, so you will need a set of buttons for each version.

Start Companion

Now that we have Companion installed, we are ready to tell Companion that we want to use your development modules and then start Companion

Tell Companion About Your Development Modules

After you launch Companion, follow the steps below to tell Companion about your development modules

Click on the Cog (step 1 in the image)
Click on the Select for the Developer modules path (step 2 in the image)
Click Launch GUI (step 3 in the image)

Part 4: Pull Changes from Module Into Your Copy of the Module

As the module developers make changes, you will want to pull those changes into your forked repository.

Open a terminal and navigate to your module’s directory that contains your forked repository
The first thing is to fetch all of the changes from the original repository. Note that commits to the original repository will be stored in a local branch called, upstream/master
```
git fetch upstream
```
Make sure that you are on your fork’s main branch
```
git checkout main
```
Merge the changes from the upstream/main into your local master branch. This will bring your fork’s master branch into sync with the upstream repository without losing your local changes. If you have made any changes that create a conflict, you will obviously have to resolve those before you can complete the merge.
```
git merge upstream/master
```
Build the module
```
yarn dev
```

Get NDI working with OBS 29 on Apple Silicon

Justin James — Sun, 29 Jan 2023 13:05:00 +0000

I just got a Mac Mini M2 and needed to get OBS 29 (latest version) working with NDI but no matter what I did I kept getting the following error everytime I started OBS.

Initial Install

Initially, I tried the following as this is what the OBS NDI plugin recommended but it is what led to the error above.

Install OBS
Install the OBS NDI 4.5 Runtime
Install the obs-ndi-4.10.1-macos-arm64.pkg

Upon launching OBS, you will get the NDI runtime is missing error

Fixing the NDI Runtime Missing Error

No matter how many times I download the OBS NDI 4.5 runtime, the error kept popping up.

To fix the error, I needed to close OBS, install the NDI Tools from NewTek and copy the libndi_advanced.dylib to the /usr/local/lib folder as libndi.4.dylib

Quit OBS
Install the NDI Tools
Reboot your Mac
Open a terminal and run the following command to copy the libndi lib to the right place

sudo cp "/Applications/NDI Video Monitor.app/Contents/Frameworks/libndi_advanced.dylib" "/usr/local/lib/libndi.4.dylib"

Verify NDI Is Working

Open OBS and the NDI Runtime missing error should not appear
Under the tools menu you have the NDI Output settings option
In a scene you can add an NDI Source

Note: I also found that when sending NDI Audio to another computer, that the audio had a lot of static on it but only in the right channel. The fix was to go into the OBS Audio setting on the computer sending the NDI output and set the Audio -> General -> Channels to Mono.

How to Completely Uninstall OBS on Mac

Justin James — Sun, 29 Jan 2023 13:00:00 +0000

As part of troubleshooting why on my Mac Mini M2 NDI was not workign with OBS, I needed to completely uninstall OBS (application, plugins, configurations, etc) so that there was no traces of OBS on the system and then re-install OBS.

Uninstall OBS Application

Open finder
Click on Applications
Find OBS
Right click on OBS and click on Move to Trash.

Uninstall OBS Plugins and Configurations

To uninstall the plugins and configurations, open terminal and run the following command:

rm -rf ~/Library/Application\ Support/obs-studio

Install OBS

Now that OBS is completely removed from your system you are ready to install OBS and any OBS plugins that you use.

EF Core - Configurations That Apply to All Tables

Justin James — Mon, 06 Jun 2022 13:00:00 +0000

In our previous post, we split all of the entity configurations by table into their own configuration mapping file. The next step is to create a base class that all of the configuration mappings inherit from where we can put configurations that all entities should get.

An example of where we will use the global configuration is the soft deletes that we implement previously where we want to exclude all of the rows that have the IsDeleted flag set to true but we do not want to have to remember to add that code to all of the entities and we don’t want to have to remember to add it to every query.

Note This code in this post is based off of the code from the previous post. If you have not gone through the previous post, you can download the code here

The first thing that we need to do is create our base interface and abstract class that all of our entity maps will inherit from.

In the EntityFramework\Maps directory, created a directory named base
In the EntityFramework\Maps\base directory, create a new interface named IEntityMapBase.cs

In the IEntityBaseMapBase.cs file add the following code.

using Microsoft.EntityFrameworkCore;

namespace EntityFrameworkExample.Maps;

public interface IEntityMap<TEntity> : IEntityTypeConfiguration<TEntity> where TEntity : class
{
}

The interface inherits from the EF Core IEntityTypeConfiguration, just like our BlogMap and PostMap did in our previous post.

Now we need to create our implementation of the interface we just created. We will be making it an abstract class since we do not want to be able to directly instantiate the class and only want to use it as a base class.

In the EntityFramework\Maps\Base directory, create a class named EntityMapBase.cs

In the EntityMapBase.cs file, we need to override the configuration method

using EntityFrameworkExample.Entities;
using Microsoft.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore.Metadata.Builders;

namespace EntityFrameworkExample.Maps;

public abstract class EntityMapBase<TEntity> : IEntityMap<TEntity> where TEntity : class, IEntityBase
{
 public virtual void Configure(EntityTypeBuilder<TEntity> builder)
 {
 }
}

Next, we are going to update our BlogMap and PostMap to inherit from the EntityMapBase that we just created. Then we will implement the global configuration for the isDeleted query filter.

In the BlogMap and PostMap, change the base class to inherit from EntityMapBase and call the base configure method like so:

file: EntityFramework\Maps\BlogMap.cs

public class PostMap : EntityMapBase<Blog>
{
 public override void Configure(EntityTypeBuilder<Blog> builder)
 {

 base.Configure(builder);

 // existing configuration code
 }
}

file: EntityFramework\Maps\PostMap.cs

public class PostMap : EntityMapBase<Post>
{
 public override void Configure(EntityTypeBuilder<Post> builder)
 {

 base.Configure(builder);

 // existing configuration code
 }
}

Now we are ready to move the isDeleted query filter into our EntityMapBase .

In the EntityMapBase.Configure method, add the following code to specify the global filter for isDeleted = false
```
builder.HasQueryFilter(t => t.IsDeleted == false);
```
In the BlogMap and PostMap, we can remove the isDeleted query filter as it is in the base class now.

Just like that we now have the ability to specify global entity configurations just by inheriting our entity map from EntityMapBase and within our entity calling base.Configure(builder)

In our next post in our EF Core series, we are going to take a look at indexes. You have seen some indexes in our code but we are going to dive a bit deeper into index and look at non-unique indexes, unique index, and multiple property indexes.

EF Core - Split Model Configuration Into Files By Table

Justin James — Wed, 18 May 2022 13:00:00 +0000

With EF Core, you configure your entities (e.g. tables) using the OnModelCreating in your database context. It is easy to just put all of the configurations into that OnModelCreating method which for just a few entities works great. However, as the number of entities grows, OnModelCreating easily becomes unwieldy with thousands of lines of configuration code.

In this post, I am going to show you how you can move the configuration for each of your entities to it’s own file and just have to put a single line of code in the OnModelCreating for each entity. This will greatly simplify the management and maintenance of the entity configuration code.

Problem We Are Solving

Lets take a look at an example of the OnModelCreation method. As you can see below with just 2 entities, we are already looking at 26 lines of configuration code for just a couple of indexes, a query filter, and an enum based column.

If we stopped at just 26 lines of code, no big deal but as the number of entities grows so does the amount of configuration code. In fact, one of the projects I am currently working on has over 2,000 lines of configuration code.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


protected override void OnModelCreating(ModelBuilder modelBuilder)
{
 modelBuilder.Entity<Blog>(entity =>
 {
 entity.HasQueryFilter(t => t.IsDeleted == false);

 entity.HasIndex(b => b.Url)
 .IsUnique();

 entity.Property(s => s.Status)
 .HasDefaultValue(Status.Draft)
 .HasConversion<string>();
 });

 modelBuilder.Entity<Post>(entity =>
 {
 entity.HasQueryFilter(t => t.IsDeleted == false);

 entity.HasIndex(b => b.Title);

 entity.HasIndex(t => t.Url)
 .IsUnique();

 entity.HasIndex(b => new { b.Title, b.Url });
 });
}

After we are done with moving the configurations for each entities into their own file, the OnModelCreating method will only contain a single line for each entity that we need to configure. This is way easier to manage.

Here is what the OnModelCreating will look like after our implementation

protected override void OnModelCreating(ModelBuilder modelBuilder)
{
 modelBuilder.ApplyConfiguration(new BlogMap());
 modelBuilder.ApplyConfiguration(new PostMap());
}

Solution

This post builds on the sample code from our previous post. You can download this code here

In order to move the configuration for each entity to its own file, we need to create a class for each entity that implements Microsoft.EntityFrameworkCore.IEntityTypeConfiguration.

Blog Configuration

Create directory Maps
In the Maps directory, create the file BlogMap.cs

Add the following code to the BlogMap.cs file

using EntityFrameworkExample.Entities;
using Microsoft.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore.Metadata.Builders;

namespace EntityFrameworkExample.Maps;

public class BlogMap : IEntityTypeConfiguration<Blog>
{
 public void Configure(EntityTypeBuilder<Blog> builder)
 {
 builder.HasQueryFilter(t => t.IsDeleted == false);

 builder.HasIndex(t => t.Url)
 .IsUnique();

 builder.Property(s => s.Status)
 .HasDefaultValue(Status.Draft)
 .HasConversion<string>();
 }
}

Post Configuration

In the Maps directory, create the file PostMap.cs

Add the following code to the PostMap.cs file

using EntityFrameworkExample.Entities;
using Microsoft.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore.Metadata.Builders;

namespace EntityFrameworkExample.Maps;

public class PostMap : IEntityTypeConfiguration<Post>
{
 public void Configure(EntityTypeBuilder<Post> builder)
 {
 builder.HasQueryFilter(t => t.IsDeleted == false);

 builder.HasIndex(t => t.Title);

 builder.HasIndex(t => t.Url)
 .IsUnique();

 builder.HasIndex(t => new { t.Title, t.Url });
 }
}

Database Context Update

Now we need to update our database context to use the new BlogMap and PostMap classes.

Open our model context and replace the code within the OnModelCreating method with the following code.

modelBuilder.ApplyConfiguration(new BlogMap());
modelBuilder.ApplyConfiguration(new PostMap());

Conclusion

We have gone from having lots of entity configuration code in the database context OnModelCreating to have just a few lines. Also, having a config file for each entity, makes it possible to quickly see the entity’s configuration.

We can also enhance our implementation which we are going to do in our next post, to have a base class that all entities inherit from where we can put global configurations and not have to worry about adding them to each entity.

EF Core - Use Enum as Column Value

Justin James — Sun, 27 Mar 2022 13:00:00 +0000

When dealing with databases, there are times when you want a column to only allow certain values. When using EF Core, the easiest way to accomplish this goal is to use an enum as the type for the property.

In this post, we will add a new column to an entity that is of an enum type, set the default value, and create the migration script.

This post uses the sample code from our previous post. You can download this code here

The first thing we need to do is create an enum.

Create a file name Status.cs
```
Status.cs
```

To the Status.cs add the following code to create our enum

namespace EntityFrameworkExample;

public enum Status
{
 Draft,
 Published
}

Now that our enum is created, we need to add the new property to our entity that is of the enum Status.

Open up our Blog entity and add a new property

[Required]
[MaxLength(25)]
public Status Status { get; set; }

Now we need to tell EF Core how to handle the enum.

Open up our BlogMap.cs and add the following to the Configure to set the default value and convert it to a string
```
entity.Property(t => t.Status)
 .HasDefaultValue(SyncStatus.Draft)
 .HasConversion<string>();
```
Also, need to add the using for EF Core to the BlogMap.cs
```
using Microsoft.EntityFrameworkCore;
```

The last thing we need to do is create our migration script to add the new column.

Run the following command to generate the migration script

dotnet ef migrations add AddStatusField -o .\EntityFramework\Migrations\

Then we need to run the script against our database.
```
dotnet ef database update
```

Now our application will only allow the enum values to be entered through EF Core for our Status column.

See Code for Post

EF Core - Audit Fields - Track Created By and Last Updated By Values Automatically

Justin James — Sat, 26 Mar 2022 13:00:00 +0000

In several applications I work on, in addition to the soft deletes that we implemented in the previous post, we also have a requirement to implement audit tracking. Audit tracking is the tracking of who created the record, the date the record was created, who was the last person to update the record, and the last updated date of the record.

In this post, we will implement audit tracking so that the audit fields are automatically added onto our entities and EF Core automatically sets the values when save our entity.

This post is designed as a step-by-step walkthrough of the implementation. If you just want to look at the finished code, get it here

Example Project

In our previous post on soft deletes, we create a sample project and implemented soft deletes for our entities. In this post, we are going to build on that code from the previous post. You can either go through the previous post or you can download the finished code from the previous post here and then check out the branch feature/1-soft-deletes.

Add Audit Fields to Entities

Since all of our entities that need to have audit tracking enable are inheriting from EntityBase.cs, we just need to add the audit tracking fields to the IEntityBase.cs and EntityBase.cs.

Open IEntityBase.cs and add the following properties

DateTimeOffset CreatedOn { get; set; }

string CreatedBy { get; set; }

DateTimeOffset UpdatedOn { get; set; }

string UpdatedBy { get; set; }

Open EntityBase.cs and implement the following properties

public DateTimeOffset CreatedOn { get; set; }

public string CreatedBy { get; set; }

public DateTimeOffset UpdatedOn { get; set; }

public string UpdatedBy { get; set; }

Now we need to create a new EF Core migration script for the audit field and update our database to run the migration script to add the audit fields.

Open up a terminal and navigate to the EntityFrameworkExample project folder

Run the following command to generate the migration script

dotnet ef migrations add AddAuditFields -o .\EntityFramework\Migrations

Now that we have the migration script, we can run it against the database to update our tables to add the new audit fields
```
dotnet ef database update
```

Add Current User Services

We need to create a current user session that will get the currently logged in user. For this example, we will be using Windows Authentication but any authentication scheme that is supported by ASP.NET Core should work.

Create a directory named Authentication
Create an interface named IUserSession.cs in the Authentication directory
```
IUserSession.cs
```

In IUserSession.cs add the following code

namespace EntityFrameworkExample.Authentication;

public interface IUserSession
{
 string LoginName { get; set; }

 bool IsAuthenticated { get; set; }
}

Now we need to implement the IUserSession

Create a class named UserSession.cs in the Authentication directory
```
UserSession.cs
```

To the UserSession.cs add the following code to implement the IUserSession.cs

namespace EntityFrameworkExample.Authentication;

public class UserSession : IUserSession
{
 public string LoginName { get; set; }

 public bool IsAuthenticated { get; set; }
}

Next, we are going to create an interface for the current user and implement it so that we can get the currently logged in user from the ASP.NET HttpContext

Create a file named ICurrentUserService.cs in the Authentication directory
```
ICurrentUserService.cs
```

To the ICurrentUserservice.cs add the following code

namespace EntityFrameworkExample.Authentication;

public interface ICurrentUserService
{
 IUserSession GetCurrentUser();
}

Now we need to implement the ICurrentUserService.cs

Create a file named CurrentUserService.cs in the Authentication directory
```
CurrentUserService.cs
```

To the CurrentUserService.cs add the following code to get the logged in user information

using Microsoft.AspNetCore.Http;

namespace EntityFrameworkExample.Authentication;

public class CurrentUserService : ICurrentUserService
{
 private readonly IHttpContextAccessor _httpContextAccessor;

 public CurrentUserService(IHttpContextAccessor httpContextAccessor)
 {
 _httpContextAccessor = httpContextAccessor;
 }

 public IUserSession GetCurrentUser()
 {
 if (_httpContextAccessor?.HttpContext == null)
 {
 return new UserSession();
 }

 IUserSession currentUser = new UserSession
 {
 IsAuthenticated = _httpContextAccessor.HttpContext.User.Identity.IsAuthenticated,
 LoginName = _httpContextAccessor.HttpContext.User.Identity.Name
 };

 return currentUser;
 }
}

Add Current User To Database Context

Now that we have our current user service implemented, we need to pass it into the database context so that when we run add, update and delete operations we can get the current user and set the values of the audit fields.

In the EntityFrameworkExampleContext.cs, we need to add the ICurrentUserService to the constructor

private readonly ICurrentUserService _currentUserService;

public EntityFrameworkExampleContext(DbContextOptions options, ICurrentUserService currentUserService) : base(options)
{
 _currentUserService = currentUserService;
}

Also, need to add the namespace for the ICurrentUserService
```
using EntityFrameworkExample.Authentication;
```
Then we need to update all of the calls to ChangeTracker.SetAuditProperties to pass in the _currentUserService
```
ChangeTracker.SetAuditProperties(_currentUserService);
```

Update Database Context to Fill In Audit Fields

For our database context, when a SaveChanges method is called, it uses the SetAuditProperties extension method to look at the records being changed and decides which audit fields to set.

For adding a new record, it sets both the created and last updated fields.
For update and delete, it only sets the last updated fields.

Replace the code in ChangeTrackerExtension.cs with the following code

using EntityFrameworkExample.Authentication;
using EntityFrameworkExample.Entities;
using Microsoft.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore.ChangeTracking;

namespace EntityFrameworkExample.Extensions;

public static class ChangeTrackerExtensions
{
 public static void SetAuditProperties(this ChangeTracker changeTracker, ICurrentUserService currentUserService)
 {
 changeTracker.DetectChanges();
 IEnumerable<EntityEntry> entities =
 changeTracker
 .Entries()
 .Where(t => t.Entity is IEntityBase &&
 (
 t.State == EntityState.Deleted
 || t.State == EntityState.Added
 || t.State == EntityState.Modified
 ));

 if (entities.Any())
 {
 DateTimeOffset timestamp = DateTimeOffset.UtcNow;

 string user = currentUserService.GetCurrentUser().LoginName;

 foreach (EntityEntry entry in entities)
 {
 IEntityBase entity = (IEntityBase)entry.Entity;

 switch (entry.State)
 {
 case EntityState.Added:
 entity.CreatedOn = timestamp;
 entity.CreatedBy = user;
 entity.UpdatedOn = timestamp;
 entity.UpdatedBy = user;
 break;
 case EntityState.Modified:
 entity.UpdatedOn = timestamp;
 entity.UpdatedBy = user;
 break;
 case EntityState.Deleted:
 entity.UpdatedOn = timestamp;
 entity.UpdatedBy = user;
 entity.IsDeleted = true;
 entry.State = EntityState.Modified;
 break;
 }
 }
 }
 }
}

Authentication Configuration

In order to get the current user information, we need to set up ASP.NET Core authentication. Since this is a sample application, we are going to use Windows authentication but you can use any authentication that ties into ASP.NET Core Authentication scheme.

Add the Microsoft.AspNetCore.Authentication.Negotiate package

dotnet add package Microsoft.AspNetCore.Authentication.Negotiate

Open the Program.cs file
Add the using statement for the Microsoft.AspNetCore.Authentication.Negotiate package
```
using Microsoft.AspNetCore.Authentication.Negotiate;
```

Right after the builder.Services call, add the call to AddAuthentication and AddAuthorization

builder.Services.AddAuthentication(NegotiateDefaults.AuthenticationScheme)
 .AddNegotiate();

builder.Services.AddAuthorization(options =>
{
 options.FallbackPolicy = options.DefaultPolicy;
});

To our dependency injection, we need to add the IUserSession, ICurrentUserService, and IHttpContextAccessor

builder.Services.AddScoped<IUserSession, UserSession>();
builder.Services.AddScoped<ICurrentUserService, CurrentUserService>();
builder.Services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();

To the add add UseAuthentication and UseAuthorization
```
app.UseAuthentication();
app.UseAuthorization();
```
Open the Blog and Post controllers and add the [Authorize] attribute to the class to tell ASP.NET Core that it needs to run the authentication for those two controllers.

Add User Controller

The last thing we are going to implement is a controller to get our current user information, so that you can make sure that the authentication is working properly.

In the controllers directory, create a file named UserController.cs

Add the following code to the UserController.cs

using EntityFrameworkExample.Authentication;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;

namespace EntityFrameworkExample.Controllers
{
 [Route("api/[controller]")]
 [Produces("application/json")]
 [ApiController]
 [Authorize]
 public class UserController : ControllerBase
 {
 private readonly ICurrentUserService _currentUserService;

 public UserController(ICurrentUserService currentUserService)
 {
 _currentUserService = currentUserService;
 }

 [HttpGet]
 public IActionResult Get() => Ok(_currentUserService.GetCurrentUser());
 }
}

You are now ready to test that the audit tracking works:

Run the application and go to the Swagger UI (/swagger)
Run the GET operation for the UserController (/api/user/) and make sure that it returns back your currently logged in user
On the Blog, run the post operation to insert a new Blog. You only need to fill out the Name and Url fields for the post.
```
{
 "name": "EF Core Advanced Features",
 "url": "/advancedefcore.com",
}
```

In the create Blog, post results, you will see that the created and update fields are automatically populated by our database context

{
 "name": "EF Core Advanced Features",
 "url": "/advancedefcore.com",
 "posts": [],
 "id": 5,
 "isDeleted": false,
 "createdOn": "2022-03-26T19:47:59.2757602-07:00",
 "createdBy": "DESKTOP-RPV8VMV\\digit",
 "updatedOn": "2022-03-26T19:47:59.2757602-07:00",
 "updatedBy": "DESKTOP-RPV8VMV\\digit"
}

If you run an update call, you will see that the timestamp has been updated and if you run the API with a different user that the updated by is also updated.

{
 "name": "EF Core Advanced Features",
 "url": "/advancedefcore.com",
 "posts": [],
 "id": 5,
 "isDeleted": false,
 "createdOn": "2022-03-26T19:47:59.2757602-07:00",
 "createdBy": "DESKTOP-RPV8VMV\\digit",
 "updatedOn": "2022-03-26T20:47:59.2757602-07:00",
 "updatedBy": "DESKTOP-RPV8VMV\\digit"
}

Conclusion

Whew, you made it. I know it was a lot of steps and code to walk through, but you did it and completed the implementation of EF Core audit tracking. Audit tracking once you know how to implement it is not overly difficult to implement but figuring out all of the moving pieces takes a bit of time. Hopefully, this post has made it easier for you to quickly implement audit tracking.

If you found this post helpful, please share this post on Twitter and Facebook using the share buttons below.

See Code for Post

EF Core - Implement Soft Delete

Justin James — Thu, 24 Mar 2022 13:00:00 +0000

In several applications I work on, we have a requirement that we are not allowed to delete any data out of the database physically. Instead, when we need to delete a record, we set an IsDeleted column to true and exclude the row from our queries.

In this post, we will be implementing soft deletes on an example project.

This post is designed as a step-by-step walkthrough of the implementation. If you just want to look at the finished code, get it here

Create Sample Project

Open a terminal and navigate to where you want to store the example project we are going to create

Run dotnet new to create our WebApi project

dotnet new webapi -o EntityFrameworkExample

cd into the EntityFrameworkExample directory
```
cd EntityFrameworkExample
```
Add a .gitignore file using the dotnet-ignore global tool
```
dotnet-ignore get -n visualstudio.gitignore
```
If you do not have the dotnet-ignore global dotnet tool installed, check out my post on how to install the tool, here

Install the EntityFramework Core Sql Server package

dotnet add package Microsoft.EntityFrameworkCore.SqlServer

Create Tables

Now that our example project is created, we need to create our data model. We are going to create two tables, Blog and Post.

Create directory EntityFramework
```
EntityFramework
```
Create a directory in EntityFramework called Entities
```
Entities
```
Create Blog.cs in EntityFramework\Entities\
```
Blog.cs
```

Add the following code to the Blog.cs file to create a Blogs table with two columns and a relationship with the Post table.

using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace EntityFrameworkExample.Entities;

[Table("Blogs")]
public class Blog
{
 [Key, DatabaseGenerated(DatabaseGeneratedOption.Identity)]
 public int Id { get; set; }

 [Required]
 [MaxLength(255)]
 public string Name { get; set; }

 [Required]
 [MaxLength(2048)]
 public string Url { get; set; }

 [InverseProperty(nameof(Blog))]
 public List<Post> Posts { get; set; } = new List<Post>();
}

Create Post.cs in EntityFramework\Entities directory
```
Post.cs
```

Add the following code to Post.cs to create the Post table with several columns and the relationship to the Blog table.

using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace EntityFrameworkExample.Entities;

[Table("Posts")]
public class Post
{
 [Key, DatabaseGenerated(DatabaseGeneratedOption.Identity)]
 public int Id { get; set; }

 [Required]
 [MaxLength(255)]
 public string Title { get; set; }

 [Required]
 [MaxLength(100)]
 public string Url { get; set; }

 public bool IsDraft { get; set; }

 public string Content { get; set; }

 public int BlogId { get; set; }

 [ForeignKey(nameof(BlogId))]
 public Blog Blog { get; set; }
}

Create Context

Now that our entities are created, we are ready to create our database context for Entity Framework.

In the EntityFramework directory, create a file called EntityFrameworkExampleContext.cs
```
EntityFrameworkExampleContext.cs
```

In the EntityFrameworkExampleContext.cs file, add the following code to tell EntityFramework about the Blog and Post table.

using EntityFrameworkExample.Entities;
using Microsoft.EntityFrameworkCore;
namespace EntityFrameworkExample;

public class EntityFrameworkExampleContext : DbContext
{
 public EntityFrameworkExampleContext(DbContextOptions options) : base(options)
 {
 }

 public DbSet<Blog> Blog { get; set; }

 public DbSet<Post> Post { get; set; }
}

Add Context to ASP.NET Core Startup

Now that we have our tables and EF Core context file, we are ready to add the context to the ASP.NET Core startup.

In Program.cs, we need to add the database context to the Services.

Add the following namespaces

using EntityFrameworkExample;
using Microsoft.EntityFrameworkCore;

Add the connection string before the call to var app = builder.Build();

string connectionString = "(localdb)\mssqllocaldb;Database=EntityFrameworkExample;ConnectRetryCount=0;Trusted_Connection=True;";

builder.Services
 .AddDbContext<EntityFrameworkExampleContext>(opt =>
 opt.UseSqlServer(connectionString));

If you have Visual Studio installed, it comes with the localdb.

Using Docker for Sql Server

If you do not have Visual Studio installed, you can use Docker to run an instance of Visual Studio and then update the connection string to connect to the docker instance.

docker pull mcr.microsoft.com/mssql/server:2019-latest

docker run --name sql_2019_1436 -e "ACCEPT_EULA=Y" -e "SA_PASSWORD=1Secure*Password1" -e "MSSQL_PID=Enterprise" -p 1436:1433 -d mcr.microsoft.com/mssql/server:2019-latest

If you are using docker, you will need to update your connection string in Program.cs to point localhost,1436, and the sa username and password.

string connectionString = "Server=localhost,1436;Database=EntityFrameworkExample;ConnectRetryCount=0;User ID=sa;Password=1Secure*Password1";

In production, do not use sa for your database connection and do not hard code the connection in your Program.cs.

Create Controllers for Blog and Post

Next, we need to create a controller for Blog and Post to be able to perform CRUD operations. We are going to use the dotnet cli to scaffold the controller.

We have a few packages to add:

dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design

dotnet add package Microsoft.EntityFrameworkCore.Design

dotnet add package Microsoft.EntityFrameworkCore.Design

Next, we need to install the ASP.NET Code Generator global tool.

dotnet tool install -g dotnet-aspnet-codegenerator

Now, we are ready to scaffold the Blog controller.

dotnet aspnet-codegenerator controller -name BlogController -async -api -m Blog -dc EntityFrameworkExampleContext -outD ir Controllers

and the Post controller

dotnet aspnet-codegenerator controller -name PostController -async -api -m Post -dc EntityFrameworkExampleContext -outDir Controllers

Create Database

Before running our WebApi, we need to create our database and database tables. I will use EntityFramework’s migration tool to create scripts that are then applied to our database.

We need to install the EF Core tools
```
dotnet tool install --global dotnet-ef
```
To create our database migration script and save it to the EntityFramework\Migrations\ directory, run:
```
dotnet ef migrations add InitialCreate -o .\EntityFramework\Migrations
```
To run the script against our database, we need to call the database update command for dotnet ef.
```
dotnet ef database update
```

You are now ready to start the project and navigate to the /swagger url and test out the controller. You should see the following Swagger screen.

Right now, it does not have soft deletes enabled, but before implementing soft deletes, we want to make sure that the basic API is working.

Add IsDeleted Column to Tables

To make it easy to make sure that all tables get the IsDeleted field added to them, we are going to create a base class that will contain the IsDeleted and Id columns so that we do not have to remember to add it to each table.

Create directory EntityFramework\Entities\Base
```
Base
```
In the Base directory, create a file named IEntityBase.cs.
```
IEntityBase.cs
```

The IEntityBase.cs will be an interface that will define our default columns and needs the following code for the Id and IsDeleted columns

namespace EntityFrameworkExample.Entities;

public interface IEntityBase
{
 int Id { get; set; }

 bool IsDeleted { get; set; }
}

In the Base directory, create a file named EntityBase.cs which will be used to implement the Id and IsDeleted columns. We will use an abstract class to ensure that we never directly create a new EntityBase class.
```
EntityBase.cs
```

Add the following code to the EntityBase.cs to implement the Id and IsDeleted column. The Id column will be defined as an auto-incrementing column for Sql Server.

using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace EntityFrameworkExample.Entities;

public abstract class EntityBase : IEntityBase
{
 [Key, DatabaseGenerated(DatabaseGeneratedOption.Identity)]
 public int Id { get; set; }

 public bool IsDeleted { get; set; }
}

Now that we have our base class for our entities, we need to update Blog and Post to use the base class.

Update the class definition for Blog to inherit from EntityBase
```
public class Blog : EntityBase
```
From the Blog class remove the Id definition since it is now included in the base class.
Update the class definition for Post to inherit from EntityBase
```
public class Post : EntityBase
```
From the Post class remove the Id definition since it is now included in the base class.
We need to create a migration for adding the IsDeleted column to Blog and Post.
```
dotnet ef migrations add AddIsDeleted -o .\EntityFramework\Migrations\
```
Then, we need to apply the migration script to our database
```
dotnet ef database update
```

Update Database Context to Override Delete Operation

Now we are ready to change how EF Core runs the delete operations so that it sets the IsDeleted flag to true and leaves the record in the database. We will do this by updating our DbContext to override the save methods to change all delete operations from an entity that inherits from IEntityBase into an update operation that sets the IsDeleted to true.

Before we update our DbContext file, we are going to create an extension method that will take in an EF Core ChangeTracker and modify the entities that EF Core is going to delete.

Create the directory, EntityFramework\Extensions
```
Extensions
```
Create the file, EntityFramework\Extensions\ChangeTrackerExtension.cs
```
ChangeTrackerExtension.cs
```

Add the following code to ChangeTrackerExtension.cs to get all entities that inherit from IEntityBase and are part of the delete operation and then update the entity to have the IsDeleted set to true and make it an update operation instead so that the record stays in the database.

using EntityFrameworkExample.Entities;
using Microsoft.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore.ChangeTracking;

namespace EntityFrameworkExample.Extensions;

public static class ChangeTrackerExtensions
{
 public static void SetAuditProperties(this ChangeTracker changeTracker)
 {
 changeTracker.DetectChanges();
 IEnumerable<EntityEntry> entities =
 changeTracker
 .Entries()
 .Where(t => t.Entity is IEntityBase && t.State == EntityState.Deleted);

 if (entities.Any())
 {
 foreach(EntityEntry entry in entities)
 {
 IEntityBase entity = (IEntityBase)entry.Entity;
 entity.IsDeleted = true;
 entry.State = EntityState.Modified;
 }
 }
 }
}

Now we are ready to update our DbContext to use the ChangeTracker Extension we just created. We need to override four methods in our DbContext file (EntityFrameworkExampleContext.cs) to call the ChangeTracker before saving the changes.

SaveChangesAsync (CancellationToken cancellationToken)

 public override async Task<int> SaveChangesAsync(CancellationToken cancellationToken = default)
{
 ChangeTracker.SetAuditProperties();
 return await base.SaveChangesAsync(cancellationToken);
}

SaveChangesAsync (bool acceptAllChangesOnSuccess, CancellationToken cancellationToken)

public override async Task<int> SaveChangesAsync(bool acceptAllChangesOnSuccess, CancellationToken cancellationToken = default)
{
 ChangeTracker.SetAuditProperties();
 return await base.SaveChangesAsync(acceptAllChangesOnSuccess, cancellationToken);
}

SaveChanges

public override int SaveChanges()
{
 ChangeTracker.SetAuditProperties();
 return base.SaveChanges();
}

SaveChanges(bool acceptAllChangesOnSuccess)

public override int SaveChanges(bool acceptAllChangesOnSuccess)
{
 ChangeTracker.SetAuditProperties();
 return base.SaveChanges(acceptAllChangesOnSuccess);
}

Add the using statement for the ChangeTrackerExtension to the Context file
```
using EntityFrameworkExample.Extensions;
```

You are now ready to test that the IsDelete works:

Run the application and go to the Swagger UI (/swagger)
On the Blog, run the post operation to insert a new Blog
Grab the Id value from the Blog
Run the delete operation for the Blog Id
Run the get call for the Blogs and notice that the record is still there, but the IsDelete is set to true.

Filter Out Deleted Rows

At this point, our soft delete is working, but in most cases, we want to filter out records with IsDelete set to true. We could do this by adding a where clause onto all of our queries, but there is a much easier way which is to use an EF Core Global filter for each entity.

Even though we could add the global filter onto each entity, there is a high likely hood that you will forget to do it at least once. Instead, we can implement an EntityTypeConfiguration that allows us to add default configurations for each entity that inherits from it and configurations specific to that entity like indexes.

Create the directory EntityFramework\Maps
```
Maps
```
Create the directory EntityFramework\Maps\Base
```
Base
```
Create the EntityFramework\Maps\Base\IEntityMapBase.cs
```
IEntityMapBase.cs
```

Add the following code to the IEntityMapBase.cs

using Microsoft.EntityFrameworkCore;

namespace EntityFrameworkExample.Maps;

public interface IEntityMap<TEntity> : IEntityTypeConfiguration<TEntity> where TEntity : class
{

}

Create the file EntityFramework\Maps\Base\EntityMapBase.cs
```
EntityMapBase.cs
```

Add the following code to the EntityMapBase.cs to set the HasQueryFilter property.

using EntityFrameworkExample.Entities;

using Microsoft.EntityFrameworkCore.Metadata.Builders;

namespace EntityFrameworkExample.Maps;

public abstract class EntityMapBase<TEntity> : IEntityMap<TEntity> where TEntity : class, IEntityBase
{
 public virtual void Configure(EntityTypeBuilder<TEntity> builder)
 {
 builder.HasQueryFilter(t => t.IsDeleted == false);
 }
}

Now we are ready to create the EntityMap configuration for our Blog and Post entities.

Create the file EntityFramework\Maps\BlogMap.cs
```
BlogMap.cs
```

Add the following code to the BlogMap.cs to implement the EntityMap. Right now, we are not adding more configurations like indexes, but if you did need to do that, you would add it in the Configure method after the call to the base configures.

using EntityFrameworkExample.Entities;

using Microsoft.EntityFrameworkCore.Metadata.Builders;

namespace EntityFrameworkExample.Maps;

public class BlogMap : EntityMapBase<Blog>
{
 public override void Configure(EntityTypeBuilder<Blog> builder)
 {
 base.Configure(builder);
 }
}

Create the file EntityFramework\Maps\PostMap.cs
```
PostMap.cs
```

Add the following code to the PostMap.cs to implement the EntityMap. Right now, we are not adding more configurations like indexes, but if you did need to do that, you would add it in the Configure method after the call to the base configure.

using EntityFrameworkExample.Entities;
using Microsoft.EntityFrameworkCore.Metadata.Builders;

namespace EntityFrameworkExample.Maps;

public class PostMap : EntityMapBase<Post>
{
 public override void Configure(EntityTypeBuilder<Post> builder)
 {
 base.Configure(builder);
 }
}

Now, we need to tell our DbContext (EntityFrameworkExampleContext), about the EntityMap configuration for our Blog and Post entities by overriding the OnModelCreating method

protected override void OnModelCreating(ModelBuild er modelBuilder)
{
 modelBuilder.ApplyConfiguration(new BlogMap());
 modelBuilder.ApplyConfiguration(new PostMap());
}

Add the using statement to the DbContext for the BlogMap and PostMap
```
using EntityFrameworkExample.Maps;
```

If you start up the application and run the get call for Blog, you will see that it no longer returns the record with the IsDelete set to true as it did before. If you need to write a query to return the IsDeleted is true records, on the individual queries, you would add a call to IgnoreQueryFilters() as part of the query.

Whew, you made it. I know it was a lot of steps and code to walk through, but you did it and completed the implementation of EF Core soft deletes. If you found this post helpful, please share this post on Twitter and Facebook using the share buttons below.

See Code for Post

ASP.NET Core - AutoMapper - Handle When Property Names Are Not Same Between Objects

Justin James — Wed, 23 Mar 2022 13:00:00 +0000

So far in our AutoMapper series all of the property names between the input and output objects have been the same. There are times though that the property names will not match and you will need to tell AutoMapper how to map the properties else the configuration will not be valid.

In this post, we will take a look at the AutoMapper configuration need to map between property names that do not match.

get code from previous post. Once you have code downloaded, checkout the branch feature/2-automapper-testing

Before we can look at the AutoMapper configuration, we need to make the property names different between the input (WeatherForecast) and output (WeatherForecastViewModel). In the code below, we are going to update the WeatherForecastViewModel to change the Summary property name to SummaryText.

namespace AutoMapperExample;

public class WeatherForecastViewModel
{
 public DateTime Date { get; set; }

 public int TemperatureC { get; set; }

 public int TemperatureF { get; set; }

 public string? SummaryText { get; set; }
}

Now that our property names do not match, we need to update our MappingProfile to tell AutoMapper how to map between the differently named properties. Luckily, AutoMapper will still handle all of the property names that are the same, so we only need to tell AutoMapper about the properties that are different.

To our mapping between WeatherForecast and WeatherForecastViewModel we need to add a call to ForMember and tell it how to map the output to the input property for Summary and SummaryText.

CreateMap<WeatherForecast, WeatherForecastViewModel>()
 .ForMember(dest => dest.SummaryText, input => input.MapFrom(i => i.Summary))
 .ReverseMap();

Just like that AutoMapper is able to map Summary to SummaryText. For each property name that do not match, you will need to add a call to ForMember.

See Code for Post

ASP.NET Core - AutoMapper - Test Mapping Configuration

Justin James — Tue, 22 Mar 2022 13:00:00 +0000

In our previous post, we used AutoMapper to convert from a entity to a view model. In our example code, it only works as expected in happy path mode where the configuration is valid and there is no way to know the configuration is not valid until we run the application.

In this post, we are going to look at how with just a few lines of code, we can write a unit test to validate our AutoMapper mapping profile.

In our working AutoMapper example in the previous post, if we change the WeatherForecastViewModel Summary property name to SummaryText and then run the xunit tests that are going to create in a moment, we will get the following error that lets us know that we have properties that are not mapped between the two objects.

If you changed the WeatherForecastViewModel Summary property name, go ahead and change it back to Summary.

Now we are going to create our XUnit project and mapping profile test.

In our project directory, create a new folder called AutoMapperExample.UnitTests
cd into AutoMapperExample.UnitTests
Create our XUnit project using the dotnet cli
```
dotnet new xunit
```

Add a reference to the AutoMapperExample.API project

dotnet add reference ..\AutoMapperExample.API\AutoMapperExample.csproj

Open the project in your code editor
Delete the file UnitTest1.cs
Create a new file named MappingProfileTests.cs

Add the following code to the MappingProfileTests.cs to load our mapping profile and assets that the configuration is valid

using AutoMapper;
using Xunit;

namespace AutoMapperExample.UnitTests;

public class MappingProfileTests
{
 [Fact]
 public void ValidateMappingConfigurationTest()
 {
 MapperConfiguration mapperConfig = new MapperConfiguration(
 cfg =>
 {
 cfg.AddProfile(new MappingProfile());
 });

 IMapper mapper = new Mapper(mapperConfig);

 mapper.ConfigurationProvider.AssertConfigurationIsValid();
 }
}

Now you are able to validate that the AutoMapper mapping profile is valid as part of your testing and automated builds.

In our next post on AutoMapper, we will take a look at what to do when property names are not the same between the input and output.

See Code for Post

ASP.NET Core - AutoMapper - Easily Convert One Object to Another

Justin James — Mon, 21 Mar 2022 13:00:00 +0000

Mapping code is boring. Testing mapping code is even more boring.

AutoMapper is a simple library built to map one object to another and takes out all of the fuss of mapping one object to another.

In this post, we will create a sample ASP.NET Core API project, install and wire up AutoMapper, and update the sample Weather Forecast Controller to return a view model that was converted from our concrete object to a view model object.

What is AutoMapper?

AutoMapper is an object to object mapper that works by transforming an input object of one type into an output object of a different type.

What makes AutoMapper interesting is that it provides conventions to take the work out of figuring out how to map type A to type B. As long as type B follows AutoMapper’s established convention, almost zero configuration is needed to map two types.

Why use AutoMapper?

As I said before, mapping code is boring and testing mapping code is even more boring.

Without AutoMapper, you have to write lots of for loops to transform the input to an output of a different type and then to be able to reverse it back to the original type. You also have to write tests for all of that code and maintain it as you add new properties to the objects.

Instead of creating all of those mapping loops, AutoMapper provides simple configuration of types, as well as simple testing of mappings. As you will see in the next section, one you set up AutoMapper, it only takes a single line of code to convert between types.

How to use AutoMapper?

We are going to create a sample project, install AutoMapper, and then use AutoMapper to convert an object to a view model.

Create Sample Project and Install AutoMapper

The code and configuration below is written using ASP.NET 6.0

Create sample project
```
dotnet new webapi -o AutoMapperExample
```
Go into the AutoMapperExample directory
```
cd AutoMapperExample
```
You need to install AutoMapper
```
dotnet add package AutoMapper
```
For ASP.NET Core Dependency Injection, you need to install the AutoMapper Dependency Injection package
```
dotnet add package AutoMapper.Extensions.Microsoft.DependencyInjection
```

Create View Model

Now that we have our example project and AutoMapper installed, we are going to modify the dotnet webapi WeatherForecast example that came with our example project, to return a WeatherForecastViewModel instead of the concrete WeatherForecast object.

Create a file named WeatherForecastViewModel.cs
```
WeatherForecastViewModel.cs
```

Add the following code to the WeatherForecastViewModel.cs

namespace AutoMapperExample;

public class WeatherForecastViewModel
{
 public DateTime Date { get; set; }

 public int TemperatureC { get; set; }

 public int TemperatureF { get; set; }

 public string? Summary { get; set; }
}

Create AutoMapper Mapping Configuration

Next, we need to tell AutoMapper that we want it to mapper one type to another type and to also be able to reverse the mapping.

Create a file named MappingProfile.cs
```
MappingProfile.cs
```

Add the following code to create a mapping between WeatherForecast to WeatherForecastViewModel and then reverse it.

using AutoMapper;

namespace AutoMapperExample;

public class MappingProfile : Profile
{
 public MappingProfile()
 {
 CreateMap<WeatherForecast, WeatherForecastViewModel>()
 .ReverseMap();
 }
}

Tell ASP.NET Core About AutoMapper Configuration

Now that we have our mapping profile set up, we need to tell ASP.NET about the mapping and add AutoMapper to the DependencyInjection so that any time we request an IMapper it will give us an AutoMapper instance.

In the Project.cs file, you will need to add the call to AddAutoMapper
```
builder.Services.AddAutoMapper(typeof(MappingProfile));
```
You will also need to add the namespace to the top of the file to reference the MappingProfile class
```
using AutoMapperExample;
```

Return ViewModel from Controller

The last item we need to do is update our WeatherForecastController to return a view model instead of the concrete class.

Open up the Controllers\WeatherForecastController.cs

We need to add an _mapper class variable and wire it up in the constructor

private readonly ILogger<WeatherForecastController> _logger;

private readonly IMapper _mapper;

public WeatherForecastController(
 ILogger<WeatherForecastController> logger,
 IMapper mapper)
{
 _logger = logger;
 _mapper = mapper;
}

Next, we need to update the Get method to return a view model and use AutoMapper to convert the WeatherForecast to WeatherForecastViewModel

[HttpGet(Name = "GetWeatherForecast")]
public IEnumerable<WeatherForecastViewModel> Get()
{
 var weatherForecasts = Enumerable.Range(1, 5)
 .Select(index =>
 new WeatherForecast
 {
 Date = DateTime.Now.AddDays(index),
 TemperatureC = Random.Shared.Next(-20, 55),
 Summary = Summaries[Random.Shared.Next(Summaries.Length)]
 })
 .ToList();

 return _mapper.Map<List<WeatherForecastViewModel>>(weatherForecasts);
}

Now launch the project with F5 and navigate to /swagger
Run the WeatherForecast get method and you will see that it returns the WeatherForecastViewModel and that AutoMapper does all of the mapping work for us and even ignores that fact that there is no Summary property in the ViewModel.

Conclussion

Now that everything is working, next time you need to create a mapping, you just need to create the view model, add the mapping to our MappingProfile and then call the Map function to convert between objects.

AutoMapper as configured above only works as expected if our input and output objects have the same property names and the mapping configuration is correct.

In part 2 in the series, we will look at how to write a unit test for our mapping configuration to make sure that profile is correct. Then in part 3 of this series, we will look at how to configure our mapping when property names do not match between the input and output object.

See Code for Post

VS Code - Favorite Extension - Github Pull Request and Issues

Justin James — Sun, 20 Mar 2022 13:00:00 +0000

In this series, we are looking at some of my favorite VS Code extensions.

Extensions in VS Code are invaluable to speed up your work and make you more productive.

In this post, we will look at the GitHub Pull Request and Issues extension that allows you to stay where you are writing your code and manage your GitHub pull requests and issues right from VS Code

What is Included

This extension provides:

Listing and browsing PRs and Issues
Reviewing PRs with in-editor commenting
Validate PRs with easy checkouts
“Start working on issue” action creates a branch for you
Create issues from “todo” comments

Demo

Once you have the extension installed a new icon will show up on the sidebar that will show a list of pull requests and issues.

Pull Request Demo

Create Issue from Todo Comment Demo

More Details and Install

You can read more details about the usage and install GitHub Pull Request and Issues Extension at the VS Code Market Place

VS Code - Favorite Extension - Angular 2 Switcher

Justin James — Sat, 19 Mar 2022 13:00:00 +0000

In this series, we are looking at some of my favorite VS Code extensions.

Extensions in VS Code are invaluable to speed up your work and make you more productive.

In this post, we will look at Angular2 Switcher which provides shortcuts to switch between the TypeScript, StyleSheet, Spec, and Html files for your Angular files.

Why You Need Angular2 Switcher

When coding using Angular, I frequently switch between my template (html), stylesheet (scss), and typescript (.ts). To switch files, I have to open up the sidebar, mousing over to the file, and clicking to open it. However, I find mousing aggravates my shoulder, so anything I can do to avoid mousing is awesome.

With Angular2 Switcher, you get keyboard shortcuts to switch between the files.

Usage

Here are the keyboard shortcuts for Windows and Mac.

Action	Windows	Mac
go to `.html` if on `.html` then go to previous	alt+o	shift+alt+o
go to `.css` if on `.css` then go to previous	alt+i	shift+alt+i
go to `.ts` if on `.ts` then go to previous	alt+u	shift+alt+u
go to `.spec.ts` if on `.spec.ts` then go to previous	alt+p	shift+alt+p

If you have a StreamDeck, you can also add buttons for the shortcuts so that you dont have to remember the shortcuts. Yes, I know you are leaving the keyboard to use the StreamDeck, but pushing a button doesn’t bother me like mousing does.

More Details and Install

You can read more details about the usage and install Angular2 Switcher at the VS Code Market Place

VS Code - Favorite Extension - markdownlint

Justin James — Fri, 18 Mar 2022 13:00:00 +0000

In this series, we are taking a look at some of my favorite VS Code extensions.

Extension in VS Code are invaluable to speed up your work and make you more productive.

In this post, we are going to look at Markdown Lint which provides Markdown/CommonMark linting and style checking for markdown files.

Markdownlint has make my markdown output much more predictable and easier for others dev to follow.

Why You Need Markdownlint

Markdown is designed to be easy to read, write, and understand which it succeeds at. However, its flexibility is both a benefit and a drawback. There are many possible styles, so formatting can be inconsistent which impacts how your markdown parser is rendering your markdown.

Usage

Markdownlint includes 50 rules to encourage standards and consistency for Markdown files.

By default, markdownlint will run as you are typing and any lines that violate one of markdownlint’s rules will trigger a warning in the editor. Warnings are indicated by a wavy underline and can also be seen by pressing Ctrl+Shift+M/⇧⌘M to open the Errors and Warnings dialog.

Demo

More Details and Install

You can read more details about usage, rules, and install Markdown Link at the VS Code Market Place

VS Code - Favorite Extension - Path Intellisense

Justin James — Thu, 17 Mar 2022 13:00:00 +0000

In this series, we are taking a look at some of my favorite VS Code extensions.

Extension in VS Code are invaluable to speed up your work and make you more productive.

In this post, we are going to look at Path Intellisense which autocompletes file names.

Having intellisense as you type a path name make it so much easier to quickly import files.

Demo

More Details and Install

You can read more details about usage and install Path Intellisense at the VS Code Market Place

VS Code - Favorite Extension - FoldPlus

Justin James — Wed, 16 Mar 2022 13:00:00 +0000

In this series, we are taking a look at some of my favorite VS Code extensions.

Extension in VS Code are invaluable to speed up your work and make you more productive.

In this post, we are going to look at Fold Plus which enables you to quickly expand or collapse sections within a file.

This is one of my most used extensions.

What Fold Plus Does

It is such a great productivity boost to be able to quickly collapse or expand just the sections that I care about in a file using a single command.

Fold Plus adds several additional commands into VS Code:

Fold All Same Level as Cursor
Fold All Same Level as Parent
Fold All with Selected Text
Fold All Keep Selected Text
Fold All Keep Cursor Live
Fold Parent
Fold Children
Unfold All Lines Matching
Unfold All Same Level as Cursor
Unfold All with Selected Text

Demo

Usage

To use Fold Plus, pull up the command pallete, type Fold or Unfold and pick the fold command you want.

I use Fold All Same Level as Cursor and Unfold All Same Level as Cursor the most

More Details and Install

You can read more details about the commands and install Fold Plus at the VS Code Market Place

VS Code Favorite Extension Series - Add Only

Justin James — Tue, 15 Mar 2022 13:00:00 +0000

Extension in VS Code are invaluable to speed up your work and make you more productive. In this series, we are taking a look at some of my favorite VS Code extensions.

In this post, we are going to look at Add Only to quickly add or remove a .Only to your tests.

Usage

I write and run a lot of UI tests and one of the things I am constantly doing is adding and removing .only to run sets of tests. The Add Only extensions puts an “Add Only” or “Remove Only” option right above the describe, context, test, and it.

You need to have CodeLens enabled for this to work

Demo

More Details and Install

You can read more details about Add Only and install Add Only at VS Code Market Place.

ASP.NET - Health Checks - Generic Endpoint

Justin James — Mon, 14 Mar 2022 13:00:00 +0000

In the previous post in the series, we have implemented our health checks that return a json response and allow us to selectively run the health checks based on tags.

In this post, we are going to build on the previous post and update our endpoint mappings to use a generic endpoint builder so that we only have our filters and json response code in a single place.

If you have not implemented the example health check from the previous post, you can download code from previous post

Create a file called HealthCheckExtension.cs

Add the following code to the HealthCheckExtension.cs to create a custom health check endpoint that will map a health check to the url and tag filter provided.

using System.Net.Mime;
using Microsoft.Extensions.Diagnostics.HealthChecks;
using System.Text.Json;
using System.Text.Json.Serialization;
using Microsoft.AspNetCore.Diagnostics.HealthChecks;

public static class HealthCheckExtensions
{
 public static IEndpointConventionBuilder MapCustomHealthChecks (
 this IEndpointRouteBuilder endpoint,
 string endpointUrl,
 string checkName,
 string tagToFilter = ""
 )
 {
 var endpointConventionBuilder = endpoint.MapHealthChecks(
 endpointUrl,
 new HealthCheckOptions
 {
 Predicate = GetFilter(tagToFilter),
 ResponseWriter = async (context, report) => {
 string json = CreateJsonResponse(report, checkName);
 context.Response.ContentType = MediaTypeNames.Application.Json;
 await context.Response.WriteAsync(json);
 }
 }
 );

 return endpointConventionBuilder;
 }

 private static Func<HealthCheckRegistration, bool> GetFilter (string tag)
 {
 Func<HealthCheckRegistration, bool> filterPredicate =
 filterPredicate = check => check.Tags.Any(t => t == tag);
 if (string.IsNullOrWhiteSpace(tag)) filterPredicate = x => true;

 return filterPredicate;
 }

 private static JsonSerializerOptions GetJsonSerializerOptions()
 {
 var jsonSerializerOptions = new JsonSerializerOptions
 {
 WriteIndented = false,
 PropertyNamingPolicy = JsonNamingPolicy.CamelCase,
 DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingNull
 };

 return jsonSerializerOptions;
 }
 private static string CreateJsonResponse(HealthReport report, string checkName)
 {
 string json = JsonSerializer.Serialize(
 new
 {
 Name = checkName,
 Status = report.Status.ToString(),
 Duration = report.TotalDuration,
 Info = report.Entries
 .Select(e =>
 new
 {
 Key = e.Key,
 Description = e.Value.Description,
 Duration = e.Value.Duration,
 Status = Enum.GetName(
 typeof(HealthStatus),
 e.Value.Status),
 Error = e.Value.Exception?.Message,
 Data = e.Value.Data
 })
 .ToList()
 },
 GetJsonSerializerOptions());

 return json;
 }
}

In the Program.cs file replace the app.UseEndpoints with the following code that wires up the health checks using the MapCustomHealthChecks extensions that we created above

app.UseEndpoints(endpoints =>
{
 // runs all health checks
 endpoints.MapCustomHealthChecks("/health", "All Checks");

 // runs health checks with tag Example
 endpoints.MapCustomHealthChecks("/health/example", "Example Checks", "Example");

 // runs health checks with tag Example2
 endpoints.MapCustomHealthChecks("/health/example2", "Example Checks 2", "Example2");
});

Now our health check endpoints will all follow the same standard and are easier to wire up.

ASP.NET - Selectively Run Health Checks

Justin James — Sun, 13 Mar 2022 13:00:00 +0000

In part 1 we create our basic ASP.NET Core health check and then in part 2 we changed from plain text “Healthy” or “Unhealthy” to a json response that let us know the stauts of each health check.

In our previous post, we have only have a single health check so it has been ok to have all health checks run when we hit our health check endpoint. However, if we had multiple health checks we are going to want to be able to run them by themselves as well as run the whole suite.

In this post, we will are going to add the ability to selectively run our health checks and create endpoints that will run either a set of health checks or all of the health checks.

If you have not implemented the example health check from part 1 and part 2, please do so first or download code from previous post

To demonstrate selectively running of health checks, we need to add a second health check.

Create second health check called ExampleHealthCheck2.cs

ExampleHealthCheck2.cs

Add the following code to the ExampleHealthCheck2.cs file. This is a copy of the ExampleHealthCheck.cs with the messages changed.

namespace AspNetCoreHealthCheckExample;

using Microsoft.Extensions.Diagnostics.HealthChecks;

public class ExampleHealthCheck2Async : IHealthCheck
{
 public Task<HealthCheckResult> CheckHealthAsync(
 HealthCheckContext context, CancellationToken cancellationToken = default)
 {
 try
 {
 return Task.FromResult(

 HealthCheckResult.Healthy("Health Check 2 Msg Here."));
 }
 catch (Exception)
 {
 return Task.FromResult(
 new HealthCheckResult(
 context.Registration.FailureStatus, "Unhealthy Check 2 Msg Here."));
 }
 }
}

The next task we need to do is add tags when we tell ASP.NET Core about our health checks by adding the tags parameter and giving 1 or more tags names.

1
2
3
4
5
6
7
8
9


builder.Services.AddHealthChecks()
 .AddCheck<ExampleHealthCheckAsync>(
 "Example",
 tags: new [] { "Example" });

builder.Services.AddHealthChecks()
 .AddCheck<ExampleHealthCheck2Async>(
 "Example2",
 tags: new[] { "Example2" });

The last item we need to do is to create new health check endpoints that only run health checks that match a given tag by using the Predicate parameter.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


endpoints.MapHealthChecks("/health", new HealthCheckOptions()
{
 ResponseWriter = HealthCheckExtensions.WriteResponse
});

endpoints.MapHealthChecks("/health/example", new HealthCheckOptions()
{
 Predicate = p => p.Tags.Any(t => t == "Example"),
 ResponseWriter = HealthCheckExtensions.WriteResponse
});

endpoints.MapHealthChecks("/health/example2", new HealthCheckOptions()
{
 Predicate = p => p.Tags.Any(t => t == "Example2"),
 ResponseWriter = HealthCheckExtensions.WriteResponse
});

Now when you navigate to the /health endpoint it will run all health checks and when you navigate to /health/example and /health/example2 it will only run the health checks that match the tag.

In our next post in this series, we will update our endpoint mapping to use a generic endpoint that provides filtering and returns json with a single line of code.

Download Code Example

You can also read more about ASP.NET Core Health Checks in the docs

ASP.NET - Health Checks - Generate Better Response Than Just Text

Justin James — Sat, 12 Mar 2022 13:00:00 +0000

In our previous post, we added a simple health check to our ASP.NET Core application. Although we only added a single health check, you can add multiple health checks and have multiple run as once. Regardless if you run a single or multiple health checks, the implementation out of the box, just returns a “Healthy” or “Unhealthy” string, which is not overall helpful to know which component actually failed.

In this post, we are going to update our health check response to return a json record that will let us know the status of each health check that is run as well as the overall health status of the application.

{
"status": "Healthy",
"duration": "00:00:00.0066738",
"info":
[
{
"key": "ExampleHealthCheckAsync",
"description": "Health Msg Here.",
"duration": "00:00:00.0010113",
"status": "Healthy",
"data": {}
}
]
}

To update the health check to return json instead of plain text, we do not actually need to update the health check itself. The update will all be in how we configure the health check in Program.cs.

If you have not implemented the example health check from the previous post, please do so first or download code from previous post

Create Custom Health Check Response

To create our custom json response, we are going to create a method that takes in a HealthReport, loops through the report and create a json resppnse.

Create file HealthCheckExtensions
```
HealthCheckExtensions.cs
```

Add the following code to HealthCheckExtensions.cs to generate our response in JSON

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44


using System.Net.Mime;
using Microsoft.Extensions.Diagnostics.HealthChecks;
using System.Text.Json;
using System.Text.Json.Serialization;

public static class HealthCheckExtensions
{
 public static Task WriteResponse(
 HttpContext context,
 HealthReport report)
 {
 var jsonSerializerOptions = new JsonSerializerOptions
 {
 WriteIndented = false,
 PropertyNamingPolicy = JsonNamingPolicy.CamelCase,
 DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingNull
 };

 string json = JsonSerializer.Serialize(
 new
 {
 Status = report.Status.ToString(),
 Duration = report.TotalDuration,
 Info = report.Entries
 .Select(e =>
 new
 {
 Key = e.Key,
 Description = e.Value.Description,
 Duration = e.Value.Duration,
 Status = Enum.GetName(
 typeof(HealthStatus),
 e.Value.Status),
 Error = e.Value.Exception?.Message,
 Data = e.Value.Data
 })
 .ToList()
 },
 jsonSerializerOptions);

 context.Response.ContentType = MediaTypeNames.Application.Json;
 return context.Response.WriteAsync(json);
 }
}

Enable Custom Response

To enable the custom response, we need to update Program.cs to enable routing and then use endpoints.

In Program.cs, remove the following line from our previous setup

app.MapHealthChecks("/health");

In Program.cs, add the following lines to use the new HealthCheckExtensions.WriteResponse. If you are using app.UseAuthorization, you need to put the app.UseRouting() above it and the app.UseEndpoints below it.

app.UseRouting();

// app.UseAuthorization();

app.UseEndpoints(endpoints =>
{
 endpoints.MapHealthChecks(“/health”, new HealthCheckOptions()
 {
 ResponseWriter = HealthCheckExtensions.WriteResponse
 });
});

Now when run your application and go to /health the response we look similar to:

{
"status": "Healthy",
"duration": "00:00:00.0066738",
"info":
[
{
"key": "ExampleHealthCheckAsync",
"description": "Health Msg Here.",
"duration": "00:00:00.0010113",
"status": "Healthy",
"data": {}
}
]
}

Conclusion

The returned json is way more informative and helpful than the plain text response. It will become even more helpful when you have multiple health checks running at the same time and need to see the status of each one to figure out the failure.

Also, right now, when you run the health checks, it will run all of the health checks. We only have a single health check, but as this grows into multiple health checks, it would be nice to be able to run specific health checks. In our next post, this is exactly what we will be doing as we create filters to run only specific health checks.

Download Code Example

You can also read more about ASP.NET Core Health Checks in the docs

ASP.NET Core - Add Health Checks

Justin James — Fri, 11 Mar 2022 13:00:00 +0000

If your ASP.NET Core application communicates with any 3rd party systems, it is beneficial to have health checks to determine if your connection to the 3rd party system is healthy, degraded, or unhealthy.

With ASP.NET Core, Microsoft references Microsoft.AspNetCore.Diagnostics.HealthChecks package implicitly for ASP.NET Core apps. This means that everything you need architecture wise is available and you just need to create your actual health check code.

Note: AspNetCore.Diagnostics.HealthChecks isn’t maintained or supported by Microsoft.

Create Health Check

The first thing we need to do is create our actual health check.

All of the code in this post is using ASP.NET Core 6.0

Create the file ExampleHealthCheck.cs
```
ExampleHealthCheck.cs
```

Add the following code to the ExampleHealthCheck.cs file

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


namespace AspNetCoreHealthCheckExample;

using Microsoft.Extensions.Diagnostics.HealthChecks;

public class ExampleHealthCheckAsync : IHealthCheck
{
 public Task<HealthCheckResult> CheckHealthAsync(
 HealthCheckContext context, CancellationToken cancellationToken = default)
 {
 try
 {
 return Task.FromResult(
 HealthCheckResult.Healthy("Health Msg Here."));
 }
 catch (Exception)
 {
 return Task.FromResult(
 new HealthCheckResult(
 context.Registration.FailureStatus, "Unhealth Msg Here."));
 }
 }
}

Line 12-13: If healthy, return a status of 200 and text response of “Healthy”

Line 17-19: If unhealthy, return a status of 503 and text response of “Unhealthy”

Tell ASP.NET Core About Health Check

In Program.cs, you need to register the health check service before the builder.build() line.

builder.Services.AddHealthChecks()
 .AddCheck<ExampleHealthCheckAsync>("Example");

You will also need to add the namespace for our health check to the top of Program.cs

using AspNetCoreHealthCheckExample;

Lastly, we need to setup the endpoint url for the health check in Program.cs before the app.Run() line

app.MapHealthChecks("/health");

Now, when you run your application (F5) and navigate to /health, you can run your health check, which will return a “Healthy” text response. If you want to simulate an unhealthy response, just throw an exception into the try block of your health check.

Conclusion

That was pretty easy and quick to add the ability to run a health check into our application. The hard part comes next, which is to write the code to check if our application is healthy or not.

However, I find that just having a text response of “Healthy” or “Unhealthy” is not super helpful. It is incredibly unhelpful when you run multiple health checks at once in which one fails, and you have no idea which one was the “Unhealthy” one. In our next post in this series, we will update our healthy response to return JSON to see the status of each of the health checks, how long it took to run, and the description of what it is doing.

{
 "status": "Healthy",
 "duration": "00:00:00.0066738",
 "info":
 [
 {
 "key": "ExampleHealthCheckAsync",
 "description": "Health Msg Here.",
 "duration": "00:00:00.0010113",
 "status": "Healthy",
 "data": {}
 }
 ]
}

Download Code Example

You can also read more about ASP.NET Core Health Checks in the docs

Hugo - Add Google Analytics

Justin James — Thu, 10 Mar 2022 13:00:00 +0000

It is really helpful to understand how your site is performing with respect to which posts are getting the most views, how long are people staying on your site, where in the world they are viewing your site from and where did your traffic come from.

To get analytics for this site, I am using Google Analytics which is free.

In this post, we will enable Google Analytics on our Hugo site.

Create Your Google Analytics Account

The first thing you need to do is setup your Google Analytics account.

Create an Analytics account at https://www.google.com/analytics/
1. To create an account, click Get started today
2. If you already have a Google Analytics account, click Sign in to Analytics
Set up your “Property”, give it a name, and point it to the URL of your site you plan on tracking
You should see a measurement id on the property settings. If you do not, check out the Google help doc

Configure Hugo

Thankfully, Hugo has a built-in template for Google Analytics. To use the template, we need to include it in our page and add our measurement id to our config file.

In our header file (e.g. where the <head> tag is), we need to add the following code to render the Google Analytics code

{{ template "_internal/google_analytics.html" . }}

Hugo Config

In your config.toml file we need to add our Google Analytics measurement id.

At the top level of your config.toml file, you need to add the following line.

googleAnalytics = "G-1234567890"

Replace G-1234567890 with your Google Analytics measurement id.

Once you rebuild your site, everything should work.

Note: You will be tracking on all urls since the googleAnalytics value in your config.toml is not empty. To only track on your production url, you can run Hugo with multiple configuration files and only populate the googleAnalytic value in your production configuration.

Hugo - Set Default Front Matter When Creating Post

Justin James — Wed, 09 Mar 2022 13:00:00 +0000

Did you know that when you create a new post in Hugo that you can set the default front matter set for you?

I didn’t know either until after I had done over 50 posts where I created all of my posts files and front matter by hand. Whereas I could have had Hugo create the files for me and set default front matter that I wanted.

In this post, we will look at how you can also set your default front matter for your post.

My Default Front Matter

For my post, my default front matter is:

---
categories: [""]
published: {{ dateFormat "2006-01-02" .Date }}T13:00:00Z
draft: true
title: "{{ replace .Name "-" " " | title }}"
url: ''
---

<!--more-->

Create Default Front Matter

To create our default front matter we need to create an archetypes file for your posts section.

Archetypes files are content templates that contain preconfigured front matter.

Create the directory layouts\archetypes
Create the file layouts\archetypes\posts.md

In your posts.md file, here is my front matter

---
categories: [""]
published: {{ dateFormat "2006-01-02" .Date }}T13:00:00Z
draft: true
title: "{{ replace .Name "-" " " | title }}"
url: ''
---

<!--more-->

Create New Post

Now that you have your posts archetype template created, the last thing to do is create a new post which you can do by running:

hugo new posts/my-post.md

Your my-post.md file will look like that following with the date updated for the day you created the file.

---
categories: [""]
published: 2022-03-09T13:00:00Z
draft: true
title: "My Post"
url: ''
---

<!--more-->

Git: Delete Merged Local Branches That No Longer Exist with Powershell

Justin James — Tue, 08 Mar 2022 13:00:00 +0000

Previously, I wrote about how to delete git branches that have been merged and no longer exist on the remote using git bash. Using git bash worked just fine for this. However, my normal shell is PowerShell and I want to stay in PowerShell.

In this post, we will look at how to use PowerShell instead to delete your local git branches that have been merged and no longer exist on the remote.

Open PowerShell and navigate to your git repository that you want to clean up
Make sure you are on the main branch
```
git checkout main
```
Fetch the latest from the git
```
git pull --prune
```
See the list of local git branches
```
git branch
```
Delete all local branches that have been merged to main branch
```
git branch -vv | where {$_ -match '\[origin/.*: gone\]'} | foreach { git branch -d $_.split(" ", [StringSplitOptions]'RemoveEmptyEntries')[0]}
```
Sometimes it may give you an error that the the branch is not fully merged and you will need to change the -d to a -D
See the list of local git branches that remain
```
git branch
```

Hugo - Dynamically Add Copy Code Snippet Button

Justin James — Mon, 07 Mar 2022 13:00:00 +0000

I have many posts on this site that include code snippets for the reader to cut and paste into their code. From a usability perspective, instead of always making the user select lines from the code snippet to copy and paste, we can add a copy button to the code snippet.

example without line numbers:

example with line numbers:

This post will look at how to implement the copy button, as you see in the above images, any time that we detect a code snippet on a post.

Requirements

There are a few requirements to make this work.

Automatically add the copy button without having to add specific to a post
Works with both line numbers on and line numbers off
Only copy the code and not the line numbers
Copy button says “Copied” after clicking on it and then goes back to copy after a few seconds
Work cross-browser
Copy button is located within the code snippet section
The type of code snippet is added to the top left above the code snippet

To make all of this work, we need to configure the Hugo highlighter, add some styles to the highlighter, write some JavaScript to add the copy button dynamically and style the copy button.

Hugo Highlighter Site Configuration

The first thing we will do is configure the Hugo syntax highlighter.

Highlighter Configuration

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


[markup]
 [markup.highlight]
 anchorLineNos = false
 codeFences = true
 guessSyntax = false
 hl_Lines = ''
 lineAnchors = ''
 lineNoStart = 1
 lineNos = false
 lineNumbersInTable = true
 noClasses = false
 noHl = false
 style = 'monokailight'
 tabWidth = 4

Line 10 (lineNumbersInTable): When adding line numbers like this example, use a table instead of inlining the numbers. This is important to be able to copy just the code and not the line number.
Line 11 (noClasses): Determines if CSS classes are used or not. We can set it to false to indicate that we want to use CSS classes
Line 13 (style): This is the highlighter color scheme. You can see all of the color schemes here

Highlighter Color Scheme

When you have the noClasses set to false, you need to create a style for the color schema. In this case, I am using the monokailight color schema.

To generate the CSS:

Open a terminal and navigate to your project
Run the command below and replace the style with the one you want.

hugo gen chromastyles --style monokailight assets\css\syntax.css

If you are using the monokailight style, I found that the background of the code snippet was too dim and that the .err class was set to red and triggered for random things like the : in https: for links. In my syntax.css file, I changed the following two classes.

/* Background */ .chroma { color: #272822; background-color: #f1f1f1; }
/* Error */ .chroma .err { color: #272822; background-color: #f1f1f1; }

Add Copy Button on Fly to Code Snippet

Next, we will create the JavaScript code that will add the copy button and copy the code snippet to the clipboard.

Start by creating the file assets\js\copy-code-button.js

Once the file is created, we need to add a function to create the button and then find all elements with a .highlight CSS class and add a copy button to each one.

function createCopyButton(highlightDiv) {
 const button = document.createElement("button");
 button.className = "copy-code-button";
 button.type = "button";
 button.innerText = "Copy";
 button.addEventListener("click", () => copyCodeToClipboard(button, highlightDiv));
 highlightDiv.insertBefore(button, highlightDiv.firstChild);

 const wrapper = document.createElement("div");
 wrapper.className = "highlight-wrapper";
 highlightDiv.parentNode.insertBefore(wrapper, highlightDiv);
 wrapper.appendChild(highlightDiv);
}

document.querySelectorAll(".highlight").forEach((highlightDiv) => createCopyButton(highlightDiv));

The last bit of JavaScript that we need to create is the function to copy the code snippet to the clipboard, change the button to say “Copied” and then back to Copy after 2 seconds.

This JavaScript will also work with line numbers as we set the line numbers to be in a table and with our querySelector, we are just grabbing the elements that have the actual code we want to be copied to the clipboard.

We are also working around if the clipboard API not being present in the copyCodeBlockExecCommand function

async function copyCodeToClipboard(button, highlightDiv) {
 const codeToCopy = highlightDiv.querySelector(":last-child > .chroma > code").innerText;
 try {
 var result = await navigator.permissions.query({ name: "clipboard-write" });
 if (result.state == "granted" || result.state == "prompt") {
 await navigator.clipboard.writeText(codeToCopy);
 } else {
 copyCodeBlockExecCommand(codeToCopy, highlightDiv);
 }
 } catch (_) {
 copyCodeBlockExecCommand(codeToCopy, highlightDiv);
 } finally {
 button.blur();
 button.innerText = "Copied!";
 setTimeout(function () {
 button.innerText = "Copy";
 }, 2000); }
}

function copyCodeBlockExecCommand(codeToCopy, highlightDiv) {
 const textArea = document.createElement("textArea");
 textArea.contentEditable = "true";
 textArea.readOnly = "false";
 textArea.className = "copyable-text-area";
 textArea.value = codeToCopy;
 highlightDiv.insertBefore(textArea, highlightDiv.firstChild);
 const range = document.createRange();
 range.selectNodeContents(textArea);
 const sel = window.getSelection();
 sel.removeAllRanges();
 sel.addRange(range);
 textArea.setSelectionRange(0, 999999);
 document.execCommand("copy");
 highlightDiv.removeChild(textArea);
}

Making the Copy Button Look Pretty

Now let’s make our Copy button look pretty and styled as we want it.

Create the file assets\css\copy-code-button.css and add the following code to it. The CSS Code sets the border, padding, margin, and positioning of the copy button.

.highlight-wrapper {
 display: block;
}

/* Start: Turn off individual column border, margin, and padding when line numbers are showing */
.highlight-wrapper .lntd pre {
 padding: 0;
}

.chroma .lntd pre {
 border: 0px solid #ccc;
}

.chroma .lntd:first-child {
 padding: 7px 7px 7px 10px;
 margin: 0;
}

.chroma .lntd:last-child {
 padding: 7px 10px 7px 7px;
 margin: 0;
}
/* End: Turn off individual column border, margin, and padding when line numbers are showing */

.highlight {
 position: relative;
 z-index: 0;
 padding: 0;
 margin:40px 0 10px 0;
 border-radius: 4px;
}

.highlight > .chroma {
 position: static;
 z-index: 1;
 border-top-left-radius: 0px;
 border-top-right-radius: 0px;
 border-bottom-left-radius: 4px;
 border-bottom-right-radius: 4px;
 padding: 10px;
}

.copy-code-button {
 position: absolute;
 z-index: 2;
 right: 0;
 top: -29px;
 font-size: 13px;
 font-weight: 700;
 line-height: 14px;
 letter-spacing: 0.5px;
 width: 65px;
 color: #ffffff;
 background-color: #000000;
 border: 1.25px solid #232326;
 border-top-left-radius: 4px;
 border-top-right-radius: 4px;
 border-bottom-right-radius: 0px;
 border-bottom-left-radius: 0px;
 white-space: nowrap;
 padding: 6px 6px 7px 6px;
 margin: 0 0 0 1px;
 cursor: pointer;
 opacity: 0.6;
}

.copy-code-button:hover,
.copy-code-button:focus,
.copy-code-button:active,
.copy-code-button:active:hover {
 color: #222225;
 background-color: #b3b3b3;
 opacity: 0.8;
}

.copyable-text-area {
 position: absolute;
 height: 0;
 z-index: -1;
 opacity: .01;
}
.chroma [data-lang]:before {
 position: absolute;
 z-index: 0;
 top: -29px;
 left: 0;
 content: attr(data-lang);
 font-size: 13px;
 font-weight: 700;
 color: white;
 background-color: black;
 border-top-left-radius: 4px;
 border-top-right-radius: 4px;
 border-bottom-left-radius: 0;
 border-bottom-right-radius: 0;
 padding: 6px 6px 7px 6px;
 line-height: 14px;
 opacity: 0.6;
 position: absolute;
 letter-spacing: 0.5px;
 border: 1.25px solid #232326;
 margin: 0 0 0 1px;
}

Add CSS and JavaScript Files to Site

Now that we have configured the Hugo highlighter, created our JavaScript code and CSS for the copy button, we need to add the CSS and JavaScript file to the site.

The CSS files will go into the <head> and the JavaScript files will go at the bottom of the footer.html file. We will also minify them, which is why we put them into the asset folder earlier.

In your header, add the following lines after your site’s CSS import. This will minify your CSS in the Assets folder and add the <link> reference to the CSS file.

{{ if (findRE "<pre" .Content 1) }}
 {{ $syntax := resources.Get "css/syntax.css" | minify }}
 <link href="{{ $syntax.RelPermalink }}" rel="stylesheet">

 {{ $copyCss := resources.Get "css/copy-code-button.css" | minify }}
 <link href="{{ $copyCss.RelPermalink }}" rel="stylesheet">
{{ end }}

In your footer, add the following after the rest of your JavaScript code input.

{{ if (findRE "<pre" .Content 1) }}
{{ $jsCopy := resources.Get "js/copy-code-button.js" | minify }}
<script src="{{ $jsCopy.RelPermalink }}"></script>
{{ end }}

Now any time you navigate to a page on your site with a code snippet (e.g. <pre> tag), a copy button will be added to the code snippet, and the code snippet will be copied to the clipboard.

Inspiration for Copy Button

Inspiration for the copy code button came from the following posts.

https://www.dannyguo.com/blog/how-to-add-copy-to-clipboard-buttons-to-code-blocks-in-hugo/

https://aaronluna.dev/blog/add-copy-button-to-code-blocks-hugo-chroma/

Hugo - Add Preview When Sharing to Twitter

Justin James — Sun, 06 Mar 2022 13:00:00 +0000

When you share your blog post on Twitter, you can attach photos, videos and media experiences to Tweets, which helps to drive traffic to your site.

This is called a Twitter card and looks like:

There are two types of Twitter Cards that we are concerned with for our site

Summary Card: Title, Description, and Thumbnail (optional)
Summary Card with Large Image: Similar to the Summary Card but with a prominently featured image

To create the Twitter card, you need a bit of HTML in the <head> of your site.

<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Hugo - Add Contact Form Using Formspree"/>
<meta name="twitter:description" content="When creating your blog, it is a good idea to have a contact me form. With static sites though you do not have server side processing available to send you an email with from the contact me form submission. To overcome not having server side processing available, we are going to use Formspress. Formspree is free for up to 50 submissions per month."/>
<meta name="twitter:site" content="@digitaldrummerj"/>

Summary Card

Luckily, for us, Hugo has an internal template to generate the Twitter card and you just need to include it in the <head> of your site. By default, the Hugo template will create a summary card without any images but in the next section we will go through how you can include images.

{{ template "_internal/twitter_cards.html" . }}

Once you have deployed, your site, you can test the Twitter card using https://cards-dev.twitter.com/validator

Summary Card with Large Image

When you include an image in your Twitter card, Hugo will make your Twitter card a large image Twitter card.

The Hugo internal template does not support a small summary card with a thumbnail. If you want a summary card with a thumbnail, you can create your own Twitter card template based on the Hugo Twitter card template source code

The summary card with large image look like:

In order to include an image, Hugo looks in a number of places to find the image

First Hugo looks in your post front matter for an images value (images: [""])
Then Hugo searchs for image page resources with feature, cover or thumbnail in their name. These are images files under a directory that matches the post (e.g. content\posts\first-post)
If not images are found, Hugo looks for images (images: [""]) in your site config
If no image if found, then an image-less Twitter summary card is used instead of summary_large_image

To learn more about Twitter cards, check out their docs.

Now when you share a post from your site on Twitter, it will give the Twitter Card preview instead of just the link.

Hugo - Add Contact Form Using Formspree

Justin James — Sat, 05 Mar 2022 13:00:00 +0000

When creating your blog, it is a good idea to have a contact me form. With static sites though you do not have server side processing available to send you an email with from the contact me form submission.

To overcome not having server side processing available, we are going to use Formspress.

Formspree is free for up to 50 submissions per month.

First thing you need to do is sign up for a Formspree account at https://formspree.io/register.

Once you have your account created, you need to create a form at https://formspree.io/forms

Once you create the form, Formspree will give you this page that gives you several code options for the form. For my site, I am using the HTML option.

Now that we have our Formspree form created, we need to create our contact us page.

Create content\search.md

Add the front matter to define the title and layout

---
title: "Contact"
layout: "contact"
---

Have a question you want answered? Is there something you would like me to write about on the blog? Just use the form below to reach out to me. If you are asking about a particular blog entry, please share the URL of the entry you are asking about.

To create the layout, create the file layouts\page\contact.html

On the contact.html page, add the following code to add the contact page content and then replace the comment with the HTML for Formspree.

{{ define "main" }}
<div class="container">
 <div class="row">
 <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
 {{ .Content }}
 <!-- Formspree Html Here -->
 </div>
 </div>
</div>
{{ end }}

reCAPTCHA Spam Filtering

reCAPTCHA utilizes machine learning to distinguish between humans and automated “bots” with just a single click.

By default, reCAPTCHA is turned off. To turn it on go under the from settings and turn on reCAPTCHA.

Honeypot Spam filtering

Sometimes you can fool automated form scrapers by adding a hidden “honeypot” input with the name _gotcha. This is an input field that normal visitors won’t fill out because it’s hidden with CSS. However an algorithm scraping forms might not know to ignore the field, and might fill it with spammy content.

When Formspree receives a submission with the _gotcha field filled in then Formspree assume a bot submitted the form and they silently ignore the submission.

Add this input field to your form to turn on Honeypot Spam Filtering

<input type="text" name="_gotcha" style="display:none" />

Now when you go to /contact and submit the form it will email you the form submission.

Hugo - Create a 404 Page

Justin James — Fri, 04 Mar 2022 13:00:00 +0000

Every website should have a 404 page for when a user tries to go to a page that does not exist.

Hugo out of the box does not provide you with a nice 404 page but we can create a 404 page just like any other page. Creating the page though is the easy part. The hard part is getting the 404 page to display when a user goes to an invalid url as it depends on your website host to set up the 404 page redirect0000.

For this site, I am hosting it using Netlify and they automatically pick up my 404 page.

Let’s take a look at how to create our 404 page.

In your layouts directory, create a file called 404.html

Next you need to design your 404 page, below is a simple template.

{{ define "main" }}
<div class="container">
 <p>Page not found</p>
 <p><a href="/">Go to Home Page</a></p>
</div>
{{ end }}

Now we are ready to test our 404 page. Unfortunately, Hugo server does not wire up a 404 page. This means that locally you have to view your page as a normal page and then when you deploy to Netlify it you can try to view a bogus page and it will show the 404 page. To view locally navigate to /404.html

Hugo - Minify JS and CSS

Justin James — Thu, 03 Mar 2022 13:00:00 +0000

When you think about a website’s performance, you should minify your CSS and JavaScript file so that they download as quickly as possible. This still holds true even with static sites like Hugo. Luckily, Hugo can minify files out of the box using what Hugo calls Asset Pipeline.

In this post, I will show you how to take advantage of the Hugo Asset Pipeline to minify your CSS and JavaScript.

To have Hugo minify your files, you need to put your CSS and JavaScript files that you want to minify in the assets at either the root of your site or the root of your theme.

Hugo processes only CSS and JavaScript files in the assets folder while the static folder is just served as is.

This means the first thing you need to do is move your CSS and JavaScript files to be minified to the assets\css and assets\js folder, respectively.

Once you move the files into the assets folder, you can get a reference to them using resources.Get and passing the location within the assets folder.

To get a reference to the assets\css\clean-blog.css file.

{{ $css := resources.Get "css/clean-blog.css" }}
<link href="{{ $css.RelPermalink }}" rel="stylesheet">

The reference above for clean-blog.css is not minified though. To minify clean-blog.css, we need to pipe it to minify. Hugo will automatically reference the clean-blog.min.css when you use the RelPermalink

{{ $css := resources.Get "css/clean-blog.css" | minify }}
<link href="{{ $css.RelPermalink }}" rel="stylesheet">

For JavaScript files, it works the same way as a CSS file does. To minify js/clean-blog.js and get a reference to js/clean-blog.min.js, use the following:

{{ $js := resources.Get "js/clean-blog.js" | minify }}
<script src="{{ $js.RelPermalink }}"></script>

Now you can minify your CSS and JavaScript files any time you want.

Take your Windows Terminal and PowerShell to the next level

Justin James — Wed, 02 Mar 2022 13:00:00 +0000

I was watching the Bald Bearded Builder, Michael Jolley, and I had shell envy as I watched him use PowerShell terminal. His terminal showed the git status, node version, folder/file icons, cool color scheme, and predictive completion when typing commands based on his PowerShell history.

I asked Michael in chat if he would be willing to share his PowerShell profile which he was nice enough to do right then and there on stream.

However, even with his PowerShell profile in hand, it still took me a bit of time to figure out what I needed to do to take advantage of the profile.

Let’s walk through the steps I took to get my shell working like Michael’s.

Several items need to be installed for the profile to work:

Nerd Font - this is the font that provides the icons for folders and files
Starship - The minimal, blazing-fast, and infinitely customizable prompt for any shell!
Terminal-Icons - PowerShell module to display the icons from the Nerd Font
devtoolbox - a PowerShell module with a bunch of useful aliases for dev tools that Michael released
PSReadLine - a PowerShell module that allows predictive suggestions as you type a command

Font Install

I am using the CaskaydiaCove Nerd Font from Nerd Font.

To install:

Open Windows Terminal as an Administrator
Create a Powershell tab
Install the Chocolatey package

choco install -y cascadia-code-nerd-font

If you are not using Chocolatey, you can install it at https://chocolatey.org/install

After the font is installed, I needed this registry entry to tell Windows that the font is a TrueTypeFont

$key = 'HKLM:\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Console\TrueTypeFont'
Set-ItemProperty -Path $key -Name '000' -Value 'CaskaydiaCove Nerd Font'

Next, we need to tell Windows Terminal to use the CaskaydiaCove Nerd Font that was just installed.

In Windows Terminal, Open settings by pressing ctrl+, or clicking on the down arrow in the title bar and select Settings
On the bottom of the left navbar, click on Open JSON file
Find the defaults sections under profiles and add the “font” section below

{
 "profiles":
 {
 "defaults":
 {
 // Put settings here that you want to apply to all profiles
 "font": {
 "face": "CaskaydiaCove Nerd Font",
 "weight": "normal"
 }
 }
 }
}

Starship

Next, we need to install Starship, the minimal, blazing-fast, and infinitely customizable prompt for any shell!

You install Starship using Chocolatey

choco install -y starship

Now that we have Starship installed, we need to add it to our PowerShell profile.

Open PowerShell
Open the profile by typing notepad $profile
Add the following line at the top of the profile and save it
```
Invoke-Expression (&starship init powershell)
```

Terminal-Icons

Terminal Icons is a PowerShell module to show file and folder icons in the terminal.

To install, open PowerShell and run:

Install-Module Terminal-Icons -Scope CurrentUser

To use the Terminal Icons, add the following line to your PowerShell profile
```
Import-Module Terminal-Icons
```

devtoolbox

devtoolbox is a set of aliases for common developer command for docker, docker-compose, and git.

You can install devtoolbox from the PowerShell Gallery

Install-Module -Name devtoolbox

To use the devtoolbox now that we have installed it, open up your PowerShell profile and add the following statement.

Import-Module devtoolbox

PSReadLine Predictions

For the predictive suggests when typing commands, we need to install PSReadline.

In a PowerShell administrator shell, run

Install-Module PSReadLine -RequiredVersion 2.2.2 -Force

Needed to use -Force to have it install PSReadLine 2.2

To our PowerShell profile, we need to add the following lines:

Import-Module PSReadLine

Set-PSReadLineOption -PredictionSource History
Set-PSReadLineOption -PredictionViewStyle ListView
Set-PSReadLineOption -EditMode Windows

update function

The update function is designed to make it easy to update powershell to the latest version

function update {
 iex "& { $(irm https://aka.ms/install-powershell.ps1) } -UseMSI"
}

profile ended

The last piece is to set up the profile function to launch the profile into VSCode quickly.

function profile {
 code $profile
}

Now your prompt is just like Michael’s.

Full PowerShell Profile

There is a couple of bonus functions like getting a random fact, a dad joke, convert a temp to C, and convert a temp to F.

Originally posted by Michael Jolley

Invoke-Expression (&starship init powershell)
Import-Module Terminal-Icons
Import-Module devtoolbox
Import-Module PSReadLine

Set-PSReadLineOption -PredictionSource History
Set-PSReadLineOption -PredictionViewStyle ListView
Set-PSReadLineOption -EditMode Windows

function fact {
 irm -Uri https://uselessfacts.jsph.pl/random.json?language=en | Select -ExpandProperty text
}

function joke {
 irm https://icanhazdadjoke.com/ -Headers @{accept = 'application/json'} | select -ExpandProperty joke
}

function 2C {
 param (
 [Parameter()]
 [Alias('Temp')]
 [int]
 $Temperature
 )

 ($Temperature - 30) / 2
}

function 2F {
 param (
 [Parameter()]
 [Alias('Temp')]
 [int]
 $Temperature
 )

 ($Temperature * 2) + 30
}

function update {
 iex "& { $(irm https://aka.ms/install-powershell.ps1) } -UseMSI"
}

function profile {
 code $profile
}

Hugo - Integrate Google Search

Justin James — Tue, 01 Mar 2022 13:00:00 +0000

As your site content grows, finding content will become harder and you will need to add the ability to search your content.

You could create your own client search using something like lunr.js but then you have to maintain the search code and deal with any issues that come up. To me this is a distraction from the real goal of publishing content on your site.

So instead, I prefer to harness the power of Google to search my site using the handy search argument site: to tell Google to just search my site for the search term.

In this post, we are going to create a search page that will take the reader to Google for the search results.

Create Search Layout

Create the layouts\search\single.html page
Define our main in the single.html page
```
{{define "main" }}
{{ end }}
```

In the single.html page, we need to get a form for our search that has a single input box for our keyword and then have it call a JavaScript function called google_search (we will write that next)

<form id="search" onsubmit="google_search(); return false;">
 <div class="form-group form-group-lg">
 <input
 type="text"
 class="form-control"
 id="google-search"
 placeholder="Enter search term and hit enter"
 />
 </div>
</form>

At the top of the single.html file we need to create the google_search function that will open a new Window that go to Google without keyword search and the site: as part of the search so that it only searches your site. We are getting the baseurl from the config.toml file through the .Site.BaseURL.
```
<script language="Javascript" type="text/javascript">
function google_search() {
 var query = document.getElementById('google-search').value;
 window.open(
 'https://www.google.com/search?q=' + query + '+site:' + '{{ .Site.BaseURL | absLangURL }}'
 );
}
</script>
```

Create Search Page

The last thing that we need to do is create our search page to use the html that we created above.

Create the file content\search.md
Add the following front matter to the search.md file to tell Hugo that this page uses the layout\search\single.html for its layout
```
---
title: "Search"
type: "search"
---
```

Now when you navigate to /search, type in your search term and press enter it will open a new tab that goes to Google and searches your site.

Note: To test locally, you will need to use your site’s domain url and not localhost as Google ignores the site: parameter for localhost

Hugo - Add Additional Non-Blog Pages

Justin James — Mon, 28 Feb 2022 13:00:00 +0000

So far in our Hugo series we have only looked only blog related page such as posts and archives but typically you have other pages such as an about, search, or contact us.

In this post, we are going to take a look at how you can add an about page.

In future post, we will look at the search and contact pages. They follow the same instructions but the layout/content is much different than just a headshot and bio.

All of our additional pages go in the content folder. The additional pages are written in markdown and have a layout file to control the look and feel of the page.

Create About Page

Let’s take a look at how to create our about page (see my about page)

Create the file content\about.md

Add the following front matter to set the page title, description and layout to use for the page

---
title: "About"
Description: "Making the Complex Simple and Easy to Understand!"
layout: "about"
---

**Put Content Some Content About YourSelf On This Page**

Lastly, we need to create the layout page layouts\page\about.html

For the content of the about.html, this is where you design how you want the page to look. For my page, here is my design where I have a headshot on the left of the content from the about.md file.

{{ define "main" }}
<!-- Main Content -->
<div class="container">
 <div class="row">
 <div class="col-lg-4">
 <img class="headshot img-thumbnail" src="{{.Site.Params.Headshot }}">
 </div>
 <div class="col-lg-8">{{ .Content }}
 </div>
 </div>
</div>
{{ end }}

You can now view your about page by going to /about

Just like that you now have an about page on your site and it is up to you to add it to your site.

For my site, the menu is defined in the config.toml file so that the menu is a bit more dynamic and I do not have to update the html every time I want to add/remove a menu item. I am also using Bootstrap v3 for the layout.

[[menu.main]]
 name ="Home"
 url = "/"
 weight = 1
[[menu.main]]
 name = "About"
 url = "/about/"
 weight = 2
[[menu.main]]
 name = "Posts"
 url = "/posts/"
 weight = 3

and then in my header file, I use the Bootstrap navbar and loop through the main menu options from the config.toml

<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
 <div class="container-fluid">
 <div class="navbar-header page-scroll">
 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="/">{{ .Site.Title }}</a>
 </div>

 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 <ul class="nav navbar-nav navbar-right">
 {{ range .Site.Menus.main }}
 <li>
 <a href="{{ .URL }}">{{ .Name }}</a>
 </li>
 {{end}}
 </ul>
 </div>
 </div>
</nav>

Hugo - Create a Post Series

Justin James — Sun, 27 Feb 2022 13:00:00 +0000

When writing a blog, sometimes you want to write a multiple part posts that are meant to be read in order and you want to display to the reader that the post is part of a series, where the post is in the series and a link to get to the other posts in the series.

Out of the box, Hugo does not offer the ability to display the list of posts that are part of the series. Luckily, Hugo has all of the pieces to create one yourself, which we are going to do in this post.

Here is an example of what we are going to build.

Create Series (Just the Code)

First, we need to create the partial that will generate the series html.

Create the file layouts\partial\series.html

Add the following html to the file (We will dig into the html a bit in a moment, but I wanted to give you all of the html that creates the series html you upfront).

{{ if .Params.series }}
<div>
 <h4>This article is part of a series.</h4>
 <ul class="list-group">
 {{ range $num,$post := (index .Site.Taxonomies.series (index .Params.series 0 | urlize)).Pages.ByDate }}
 {{ if eq $post.Permalink $.Page.Permalink }}
 <li class="list-group-item active">
 Part {{ add $num 1 }}: This Article
 </li>
 {{ else }}
 <li class="list-group-item">
 <a href="{{$post.Permalink}}">
 Part {{ add $num 1 }}: {{ $post.Params.title}}
 </a>
 </li>
 {{end}}
 {{end}}
 </ul>
</div>
{{end}}

Now, to use the layouts\partial\series.html file, we need to add it to our layouts\posts\single.html file. In this case, I am adding it before and after the content of the post.

{{ define "main" }}
<main>
 <article>
 <header>
 <h1>{{ .Title }}</h1>
 </header>
 {{ partial "series.html" . }}
 {{ .Content }}
 {{ partial "series.html" . }}
 </article>
</main>
{{ end }}

To show the series list we need to add the series: parameter to any posts that are part of a series with the name of the series like we did below with the series: ['ASP.NET Core Code Coverage']

---
categories: ["testing", "dotnet-core", "teamcity", "dotcover"]
published: 2022-02-09T13:00:00Z

title: dotCover - How in TeamCity to create multiple coverage reports
series: ['ASP.NET Core Code Coverage']
---

The last thing we need to do is tell Hugo about the series by add it to our config.toml file. If you already have other taxonomies defined, just add the series to the list instead of creating a new list.
```
[taxonomies]
 series = "series"
```

Create Series (In-Depth)

Let’s walk through the code snippet above for the layouts\partial\series.html file.

Step 1: Only Display If Series

We first check if the series: parameter is present on the post.

{{ if .Params.series }}
{{end}}

Step 2: Get the List of Posts in Series

Next, we need to grab all of the posts in the series.

{{ range $num,$post := (index .Site.Taxonomies.series (index .Params.series 0 | urlize)).Pages.ByDate }}
{{end}}

Let’s break down the range statement for you.

Since the series could be an array, we want to get the first name of the series and make it url friendly so that we can ultimately get all of the posts in the series.
```
(index .Params.series 0 | urlize)
```

Next, we want to get all of the posts in the series

(index .Site.Taxonomies.series (index .Params.series 0 | urlize))

Then, we want to sort the posts by date (I assume that the series are published in order)
```
(index .Site.Taxonomies.series (index .Params.series 0 | urlize)).Pages.ByDate
```
Lastly, we want to create a range that we can loop through and store the index and post information as variables that we can reference.
```
{{ range $num,$post := (index .Site.Taxonomies.series ((index .Params.series 0 | urlize))).Pages.ByDate }}
```

Step 3: Display Series Info and Link

The last we need to do is display the series information.

To make it clear to the user where the post they are reading is in the series, we check if the post url matches the current page that is being read. If it does match the url, then display “Part X: This Article” instead of the title. This makes it super clear where the post they are reading is in the series.

Note: the index is zero-based, so we add a 1 to it when displaying it so that we start at Part 1 and not Part 0

{{ if eq $post.Permalink $.Page.Permalink }}
 <li class="list-group-item active">Part {{ add $num 1 }}: This Article</li>
{{ else }}

Then if the post is not the current post being read, we create a link to the post and display the part number and title of the post.

 <li class="list-group-item"><a href="{{$post.Permalink}}">Part {{ add $num 1 }}: {{ $post.Params.title}}</a></li>
{{end}}

Now you can display a list of posts in a series for the reader.

Hugo - Selectively Add Table of Contents to Post

Justin James — Sat, 26 Feb 2022 13:00:00 +0000

When you are doing a longer tutorial style post, it is helpful to include a table of contents that will show all of the headings in the post and link to that portion of the post. In this post, we will look at how you can selectively add a table of contents to a post.

Hugo can generate a table of contents for you by including {{ .TableOfContents }} in your html templates that are in the layouts folder.

Note: {{ .TableOfContent }} does not render when just placed in your markdown file for a post

The main place that you will want a table of contents is when you are viewing a single post. You can either make it the default for all single pages by placing it in the layouts_defaults\single.html or have it only show up when viewing a post by placing it in layouts\posts\single.html

I only put a table of contents in my posts. To add the table of contents, you need to create the layouts\posts\single.html file and then add the {{ .TableOfContents }} where you want it to show.

layouts\posts\single.html example:

{{ define "main" }}
<main>
 <article>
 <header>
 <h1>{{ .Title }}</h1>
 </header>
 {{ .Content }}
 </article>
 <aside>
 {{ .TableOfContents }}
 </aside>
</main>
{{ end }}

The above code snippet will always put a table of contents at the bottom of the post.

Suppose you want only to include a table of contents when you specify a parameter. In that case, you need to add the parameter to your post front matter and add an if statement in your html template to only render the table of contents when the parameter is true.

{{ define "main" }}
<main>
 <article>
 <header>
 <h1>{{ .Title }}</h1>
 </header>
 {{ .Content }}
 </article>
 {{ if .Params.toc }}
 <aside>
 {{ .TableOfContents }}
 </aside>
 {{ end }}
</main>
{{ end }}

Now that you have the {{ if .Params.toc }} added to your html template, you need to add the toc: true parameter to the front matter of any post that you want a table of content to be displayed.

---
toc: true
categories: ["blogging", "hugo"]
published: 2022-02-26T13:00:00Z

title: "Hugo - Add Table of Contents to Post"
---

Just like that, you now have a table of contents that will show only when you want.

For other posts on Hugo, check out my Hugo posts archive

Hugo - Open External Links in a New Tab

Justin James — Fri, 25 Feb 2022 13:00:00 +0000

For Hugo based websites, when a link goes to an external website, I prefer to have them open in a new browser tab.

To accomplish the goal of opening all external links in a new tab, you need to override the Hugo default behavior for rendering links by creating the file layouts/_default/_markup/render-link.html.

In the render-link.html, we need to look at the prefix of the .Destination to see if it starts with http or https and if it does then add the `target="_blank"

Copy this code snippet into the render-link.html.

<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if or (strings.HasPrefix .Destination "http") (strings.HasPrefix .Destination "https") }} target="_blank"{{ end }} >{{ .Text | safeHTML }}</a>

Now when any link starts with http or https, it will open in a new tab while links within the website will open in the same tab

Hugo - Create Custom Shortcodes

Justin James — Thu, 24 Feb 2022 13:00:00 +0000

In our previous post, we took a look at Hugo shortcodes which are HTML snippets that you can use as a way to extend the html that is generated by Hugo. There are several shortcodes built-in to Hugo but you can also easily create your own custom shortcodes. In this post, we are going to take a look at how to create our own shortcode.

To create a shortcode you need to create a file in thr layouts\shortcodes folder.

Consider the file name carefully since the shortcode name will mirror be that of the file but without the .html extension. For example, layouts/shortcodes/myshortcode.html will be called with either {{< myshortcode >}} or {{% myshortcode %}} depending on the type of parameters you choose.

Shortcodes can also take parameters either as positional or named parameters.

Create Our Custom Shortcode

Let’s build a bootstrap alert shortcode.

What We Are Building:

Create Alert Shortcode:

Create layouts\shortcodes\alert.html

Add the following to alert.html

<div
 class=“alert alert-{{ with .Get “class” }}{{.}}{{end}}”
 role="alert">{{ .Inner | markdownify }}</div>

The above shortcode uses named parameters to get the class to use (success, info, warning and danger) {{ with .Get "class" }}{{.}}{{ end }} and then grabs that inner contents of between the opening and closing alert and converts it to HTML with .Inner | markdownify.

HTML Generated:

The above shortcode will generate the following HTML.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Using Alert Shortcode:

To use the shortcode, in your post markdown file, add the following lines and replace the class value with success, info, warning or danger and then type your text that you want to highlight as the alert between the opening and closing alert.

{{< alert class="info" >}}
Your .Inner text is here
{{</ alert >}}

Now anytime you want to call out something you can use the alert shortcode to do it.

Create Single Line Shortcode

You can also create shortcodes that are single line shortcodes such as the one that this blog has for colour

layouts\colour.html:

{{ $colour := .Get 0 | safeCSS }}
{{ $colour2 := .Get 1 | safeHTML }}
<code style="background-color: {{ $colour }};"><span style="color: {{ $colour }}; filter: grayscale(1) invert(1) contrast(100);">{{ $colour2 }}</span></code>

Using Colour ShortCode:

{{< colour "#e3fbc9" "colour" >}}

Wrap Up

Shortcodes can be a really powerful way to create reusable bits of HTML that extends what Hugo is able to directly generate from the markdown.

You can more in-depth about Custom Shortcodes in the Hugo docs.

In our next Hugo post, we are going to take a look at how to have all links that start with http or https open in a new tab without you having to do anything all at.

Hugo - Use Shortcodes Instead of Embedding HTML in Your Markdown

Justin James — Wed, 23 Feb 2022 13:00:00 +0000

Welcome back to the Hugo series. In our last post, we added an RSS feed to our site. In this post, we are going to look at how to extend the output of the HTML that is generated by Hugo for a post.

When creating a post, there are times where you really wish Hugo could render something fancier than the basic HTML that markdown to html provides. Maybe you want to add a caption to an image or embed a YouTube video or include a gist. You could embed the HTML within your markdown file, but that makes your markdown file messy, harder to read, and a bit of a pain if you need to update the HTML across all your posts.

This is where Hugo shortcodes come into play. Shortcodes are simply a way of inserting a snippet of HTML into a page from your markdown.

Let’s take a look at how to use the built-in shortcodes.

Note: shortcodes only work in markdown file, not template files. If you need the type of functionality that shortcodes provide but in a template, you want a partial template instead.

For our walk through, we are going to use the YouTube shortcode to embed a responsive video player for YouTube videos. I am going to use https://www.youtube.com/watch?v=wHtu5NQof_Y for the video.

For the shortcode, we just need to pass the YouTube video ID that follows v= in the video’s URL to the youtube shortcode

{{< youtube wHtu5NQof_Y >}}

However, for accessibility, you should provide a title for your YouTube video else it will just say “YouTube Video” which is not helpful to let someone know what the video is about. You can include a title by providing a title parameter in the shortcode.

Note: You can’t mix named and unnamed parameters, so you’ll need to assign video id to the parameter id

{{< youtube
 id="wHtu5NQof_Y"
 title="Level up on Functional Programming by Rebuilding LINQ with Cameron Presley" >}}

The video will be rendered as:

Here is the HTML that was generated from the shortcode

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
 <iframe src="https://www.youtube.com/embed/wHtu5NQof_Y" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen title="Level up on Functional Programming by Rebuilding LINQ with Cameron Presley"></iframe>
</div>

As you can see, shortcodes are a powerful and easy way to include additional html to enhance your pages while keeping your markdown clean.

There are several shortcodes that are included in Hugo.

figure
highlight
YouTube
gist
Instagram
tweet
Vimeo

See how to use the built-in shortcodes in the Hugo Shortcodes Documentation

In our next post, we will take a look at how you can create your own shortcodes.

Hugo - Create RSS Feed for Site

Justin James — Tue, 22 Feb 2022 13:00:00 +0000

If you have a Hugo site, you probably already have a working RSS feed. You just might not know about it!

Hugo comes with a built-in RSS Template that generates the necessary RSS XML for you. Often, this internal template is good enough, and you just need to include the feed links in the correct places.

How RSS works

Before, we go into some Hugo RSS specifics, I think it’s important that you know how RSS actually works.

RSS stands for Really Simple Syndication, and it’s a way to give a programmatic access to the updates on a website. It uses a standardized format that news aggregators can easily read. The feed is simply an XML file that lists the recent content and the feed consumers periodically poll this file to stay up to date with the changes.

When someone subscribes to your blog feed with an RSS reader they save the feed URL in their reader application.

Add RSS to your Hugo site

To include your RSS feed link on your Hugo site, add the following code to the header of the site.

<link rel="alternate"
 type="application/rss+xml"
 href="{{.Site.BaseURL }}/index.xml"
 title="{{ .Site.Title }}">

Now a browser can detect it and let the user add it to their list of feeds. This is really handy for the user since they don’t need to copy and paste the URL around.

Configure RSS Feed

You also can configure Hugo (config.toml) to show a copyright notice and set the Author information.

copyright = "2022 Justin James All rights reserved"
languageCode = "en-us"

[Author]
 name = "Justin James"
 email = "me@example.com"

Next, you need to add the following snippet inside the <head> tags of theme’s head partial:

<link rel="alternate" type="application/rss+xml" href="{{.Site.BaseURL }}/feed.xml" title="{{ .Site.Title }}">

Showing all your content

The default template includes only the summary of each blog post. I really like reading entire post in my RSS reader if I can. It removes all the bloat of the original website, and just gives me the text I care about.

We can override the default rss template by copying it our theme’s layouts\_default\rss.xml and editing it.

You can find the default rss template that ships with Hugo at https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/_default/rss.xml

To then change from the summary view to the full content view, you’d change this line in the default template

<description>{{ .Summary | html }}</description>

to this

<description>{{ .Content | html }}</description>

The default Hugo RSS template, also includes all of the pages in your site and not just your blog post. For my RSS feed, I do not want my about, search, speaking or any other page that is not a blog post included in my RSS feed.

At the top of the Hugo RSS template, is a $pages variable. To pull just content located in the content\posts section, you’d update these lines in the default template

{{- if or $.IsHome $.IsSection -}}
{{- $pages = $pctx.RegularPages -}}
{{- else -}}
{{- $pages = $pctx.Pages -}}
{{- end -}}

to this

{{- if or $.IsHome $.IsSection -}}
{{- $pages = (where (where $pctx.RegularPages ".Section" "posts") "Kind" "page") -}}
{{- else -}}
{{- $pages = (where (where $pctx.Pages ".Section" "posts") "Kind" "page") -}}
{{- end -}}

You now have your RSS configured to only show posts and include the entire post. Your RSS feed is now ready for people to start subscribing to the feed. Your RSS feed can be viewed by going to the index.xml page on your web site.

You also have RSS feeds for each category by going to /categories/[name]/index.xml where [name] is the name of the category.

Hugo - View Posts by Tag Cloud

Justin James — Mon, 21 Feb 2022 13:00:00 +0000

In our previous post on Hugo, we created a page to view the post grouped by category and a page to view all posts for a category.

In this post, we are going to build a similar post list page but this time we are going to look at the list using a tag cloud. A tag cloud is a visual representation of our categories using font size and weight to highlight which categories have more posts.

example tag cloud:

layouts\pages\archivebycloud.html:

This page is a bit more complicated then the previous archive pages that we have built. As the font size for the categories will increase or decrease based on the number of post in the category, we have a bit of math to do.

Under our theme, create the page layouts\pages\archivebycloud.html
Add the main definition to the page
```
{{ define "main" }}
{{ end }}
```
Within the define block, add the following code to add the container div, create a row, column, include a back to top link, and the content of the markdown page that will use this page template
```
 <div class="container">
 <div class="row">
 <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
 <a name="top"></a>
 {{ .Content }}
 </div>
 </div>
 </div>
```
Now after the {{ .Content }} but still within the div we want to make sure that there is at least 1 category definition before we try to build the tag cloud. We can make this check by making sure that the site taxonomies categories array has more than 0 categories.
```
{{ if not (eq (len $.Site.Taxonomies.categories) 0) }}
{{ end }}
```

Within the if statement we need to define several variables to examine the number of categories, number of posts within a category, and min/max font sizes.

{{ $fontUnit := "rem" }}
{{ $largestFontSize := 3.0 }}
{{ $smallestFontSize := 1.5 }}
{{ $fontSpread := sub $largestFontSize $smallestFontSize }}
{{ $max := add (len (index $.Site.Taxonomies.categories.ByCount 0).Pages) 1 }}
{{ $min := len (index $.Site.Taxonomies.categories.ByCount.Reverse 0).Pages }}
{{ $spread := sub $max $min }}
{{ $fontStep := div $fontSpread $spread }}

Now we are ready to loop through the categories and increase/decrease the font based on number of page.

In the variables below, we are doing some math:
- mul = multiple two numbers
- sub = subtract to numbers
- div = divide two numbers
- math.log = returns the natural logarithm of the given number

<div class="tagcloud03">
 <ul class="cloud">
 {{ range $.Site.Taxonomies.categories.Alphabetical }}
 {{ $currentFontSize := (add $smallestFontSize (mul (sub .Count $min) $fontStep) ) }}
 {{ $weight := div (sub (math.Log .Count) (math.Log $min)) (sub (math.Log $max) (math.Log $min)) }}
 {{ $currentFontSize := (add $smallestFontSize (mul (sub $largestFontSize $smallestFontSize) $weight) ) }}
 <li>
 <a href="#{{ .Page.Title | urlize}}" style="font-size:{{$currentFontSize}}{{$fontUnit}}">{{ .Page.Title }}</a>
 </li>
 {{ end }}
 </ul>
</div>

The last thing to decide is how we want to get the posts when you click on the category in the tag cloud.

Option #1: change the category link in the above code snippet to link to /categories/{{ .Page.Title | urlize }} which is the page that we created in our previous post to display a summary list of all posts in a category.

Option #2: add to the page a section for each category that shows the posts for it and have the tag cloud go to that section. If you go with option #2 use the code snippet below to display the list.

<div>
 {{ range $.Site.Taxonomies.categories.Alphabetical }}
 <h3>
 <a name="{{ .Page.Title | urlize }}"></a>{{ .Page.Title}}
 <i class="badge">{{ .Count }}</i>
 </h3>
 <ul class="list-group striped-list">
 {{ range .Pages }}
 <li class="list-group-item">
 <a href="{{ .RelPermalink }}">
 {{ .Title }} {{ if .Params.subheadline }} ({{ .Params.subheadline }}){{ end }} -
 <small>{{ .PublishDate.Format "Jan 02, 2006" }}{{ partial "draft" . }}</small></a>
 </li>
 {{ end }}
 </ul>
 <a href="#top">
 <small>back to top</small>
 </a>
 {{ end }}
</div>

content\archivebycloud.md:

Now we need to create a page that uses the tag cloud layout that we just created.

Create the file content\archivebytagcloud.md

Add the following code to the file to set the url to /post/tagcloudview/, set the page title, set the layout to be the one we just created and add the links to the other archive pages.

—
permalink: “/posts/tagcloudview/“
title: “Posts by Tag Cloud”
url: “/posts/tagcloudview/“

sidebar: true
layout: “archivebytagcloud”
—
**Other Views:** [List](/posts/) | [By Month](/posts/monthview) | [By Category](/categories)

—

static\css\clean-blog.min.css:

The last thing we need to do is add the CSS for our tag cloud.

Under our theme in the static\css\clean-blog.min.css file add the following CSS to the bottom of the file

.tagcloud03 {
 margin-bottom: 50px;
 text-align: center
}
 .tagcloud03 ul.cloud li {
 margin: 0;
}
 .tagcloud03 ul.cloud li a {
 padding: 0 1em 0 1em;
 border: none;
 height: 45px;
 padding-top: 5px;
 padding-bottom: 5px;
}
 .tagcloud03 ul {
 margin: 0;
 padding: 0;
 list-style: none;
}
 .tagcloud03 ul li {
 display: inline-block;
 margin: 0 0.3em 0.3em 0;
 padding: 0;
}
 .tagcloud03 ul li a {
 position: relative;
 display: inline-block;
 max-width: 250px;
 height: 35px;
 line-height: 35px;
 padding: 0 2.5em 0 1em;
 background-color: #fff;
 border: 1px solid #aaa;
 border-radius: 3px;
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
 color: #333;
 font-size: 18px;
 text-decoration: none;
 -webkit-transition: 0.2s;
 transition: 0.2s;
}
 .tagcloud03 ul li a:hover {
 background-color: #4b56a8;
 border: 1px solid #0085A1;
 color: #fff;
}

Our tag cloud page is finished and ready for you to view at /posts/tagcloudview on your site.

Don’t forget to update the other archive pages to also have the link to the tag cloud page

In our next post on Hugo, we are going to set up our RSS feed for your blog like this blog has at /feed.xml.

Hugo - View Posts Grouped by Category

Justin James — Sun, 20 Feb 2022 13:00:00 +0000

In our previous post, we create a page to view our posts grouped by month. In this post, we are going to create a page to show post grouped by category.

Example of What We Are Building:

For the category list, we are going to take advantage of a feature of Hugo called taxonomies which basically allows to create a group that post can belong to.

For the category taxonomy, Hugo enables this out of the box for us. If you wanted to create other taxonomies, you would need to add them to our Hugo config.toml

[taxonomies]
 category = “categories”

With the category taxonomy created, we now need to generate our page. There are the following options are available:

layouts_default\term.html : default page that displays the terms (e.g. categories)
layouts_default\taxonomy.html : default page that display all of the posts for a term
layouts\categories\term.html : override the default term page just for the categories taxonomy
layouts\categories\taxonomy.html : override the default taxonomy.html for the category

For the purpose of this article, we are just going to create the files in the layouts\categories folder to have a custom page for display the category that overrides that default display of a term.

Create the directory in your theme’s layout folder called categories
Create a file in the layouts\categories folder called terms.html

Add the following to the terms.html file to show the list of categories, have each category link to later in the page, and show the number of post per category

{{ define "main"}}
<!-- Main Content -->
<div class="container">
 <div class="row">
 <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
 <a name="top"></a>
 {{ if not (eq (len $.Data.Terms) 0) }}
 <div>
 <div class="tagcloud03">
 <ul>
 {{ range .Data.Terms.Alphabetical }}
 <li>
 <a href="#{{ .Page.Title | urlize}}">{{ .Page.Title }}
 <span class="badge">{{ .Count }}</span>
 </a>
 </li>
 {{ end }}
 </ul>
 </div>
 <div>
 {{ range .Data.Terms.Alphabetical }}
 <h3>
 <a name="{{ .Page.Title | urlize }}"></a>{{ .Page.Title}}
 <i class="badge">{{ .Count }}</i>
 </h3>
 <ul class="list-group striped-list">
 {{ range .Pages }}
 <li class="list-group-item">
 <a href="{{ .RelPermalink }}">
 {{ .Title }} {{ if .Params.subheadline }} ({{ .Params.subheadline }}){{ end }} -
 <small>{{ .PublishDate.Format "Jan 02, 2006" }}{{ partial "draft" . }}</small></a>
 </li>
 {{ end }}
 </ul>
 <a href="#top">
 <small>back to top</small>
 </a>
 {{ end }}
 </div>
 </div>
 {{ end }}
 </div>
 </div>
</div>
{{ end }}

To create the category list summary page for when a category is directly pulled up, you need to add the a file called layouts\categories\taxonomy.html

To the taxonomy.html file, add the following code to the page to display the list of categories

{{ define "main" }}
<!-- Main Content -->
<div class="container">
 <div class="row">
 <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
 {{ range .Pages }}
 {{ .Render "summary" }}
 {{ end }}
 </div>
 </div>
</div>
{{ end }}

The last thing we need to do is add a bit of CSS to style our list the way we want it to be designed.

Open the css file static\css\clean-blog.min.css
Add the following code to the bottom of the file

.tagcloud03 {
 margin-bottom: 50px;
 text-align: center
}
.tagcloud03 ul.cloud li {
 margin: 0;
}
.tagcloud03 ul.cloud li a {
 padding: 0 1em 0 1em;
 /* border: none !important; */
 border: none;
 height: 45px;
 padding-top: 5px;
 padding-bottom: 5px;
}
.tagcloud03 ul {
 margin: 0;
 padding: 0;
 list-style: none;
}
.tagcloud03 ul li {
 display: inline-block;
 margin: 0 0.3em 0.3em 0;
 padding: 0;
}
.tagcloud03 ul li a {
 position: relative;
 display: inline-block;
 max-width: 250px;
 height: 35px;
 line-height: 35px;
 padding: 0 2.5em 0 1em;
 background-color: #fff;
 border: 1px solid #aaa;
 border-radius: 3px;
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
 color: #333;
 font-size: 18px;
 text-decoration: none;
 -webkit-transition: 0.2s;
 transition: 0.2s;
}
.tagcloud03 ul li a:hover {
 background-color: #4b56a8;
 border: 1px solid #0085A1;
 color: #fff;
}

Now you have a custom category list and summary page.

In our next post on Hugo, we will create a page to look at posts categories in a word cloud.

Hugo - View Posts Grouped By Month

Justin James — Sat, 19 Feb 2022 13:00:00 +0000

In our previous post, we looked at how to build an archive page to view all of the posts we have written. In this post, we will build an archive page that shows our posts by month.

Example of What We Are Building:

To create the archive by month page, we need to create a page in the content folder and the accompanying layout in the theme folder.

Create the Page to Display The Posts By Month

In the content directory, create a new file called archivebydate.md
Make the contents of the archivebydate.md, as follows, to set the URL to the page, that the page is published, the layout is archivebydate (we will create this next), the title of the page, and the description of the page

---
permalink: "/posts/monthview/"
url: "/posts/monthview/"

layout: "archivebydate"
title: "Posts"
description: "By Date"
---

**Other Views:** [List](/posts/)

---

Create the Layout of the Monthly View

Now we need to create the layout of the post by monthly page.

Create a file in our theme folder in the layouts\page and name it archivebydate.html
We are going to first define the main section since our baseof.html file uses this section to put the content between the header and footer of the site
```
{{ define "main" }}

{{ end }}
```

Next, we need to create the header of the page. The header will consist of the background image, title, and description of the page.

For the header image, we check if the page defined an image in the front matter or if we should use the site’s default header image

{{ if isset .Params "image" }}
 <header
 class="intro-header"
 style="background-image: url('{{ .Site.BaseURL }}/{{ .Params.image }}')"
 >
{{ else }}
 <header
 class="intro-header"
 style="background-image: url('{{ .Site.BaseURL }}{{ .Site.Params.defaultHeaderImage }}')"
 >
{{ end }}
 <div class="container">
 <div class="row">
 <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
 <div class="page-heading">
 <h1>{{ .Title }}</h1>
 <hr class="small">
 <span class="subheading">{{ .Description }}</span>
 </div>
 </div>
 </div>
 </div>
</header>

Now, we are ready to display the actual post grouped by month.

Hugo has built-in functions to get all of the pages grouped by the date that we can then make sure only display actual post and not the post list page, and then loops through all of the posts for that month.

We also allow the page to have content on it that is displayed at the top using the {{ .Content }}

<div class="container">
 <div class="row">
 <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
 {{ .Content }}
 {{ range (.Site.RegularPages.GroupByDate "January 2006") }}
 {{ if (where .Pages "Section" "posts") }}
 <h2>{{ .Key }}</h2>
 <ul class="list-group striped-list">
 {{ range ((where .Pages "Section" "posts")) }}
 <li class="list-group-item">
 <a href="{{ .RelPermalink }}">
 {{ .PublishDate.Format "Jan 02" }} : {{ .Title }}
 </a>
 </li>
 {{ end }}
 </ul>
 {{ end }}
 {{ end }}
 </div>
 </div>
</div>

Our basic page is now built. If you navigate to /posts/monthview/ you can see our page of posts grouped by month.

Optionally, you can add strips (color even list items) to the list of blog posts with a bit of CSS

The above code has a class on the ul element called striped-list. We need to implement the stripping with the CSS below.

In our theme folder, open static\css\clean-blog.min.css and add the following code anywhere in the file.

ul.striped-list > li:nth-of-type(odd) {
 background-color: #f3f3f3 ;
}

Post List Update

The last thing we need to do is add links to go between the views that we have for the post list and the post by month list.

We could directly update the default list.html page, but if we ever have a list that is not a post list, we do not want to have the links to navigate between the post archive pages. Instead, we are going to create a list.html file in the theme\layouts\posts folder that will be used automatically when viewing a list of posts instead of the _default list.html

In our theme folder, create the file layouts\posts\list.html

In the list.html file, add the following code, which mirrors out _default\list.html file, except this code, has the addition of the “Other Views:” html

{{ define "main" }}
 <!-- Page Header -->
 <header class="intro-header" style="background-image: url('{{ .Site.BaseURL }}{{ .Site.Params.defaultHeaderImage }}')">
 <div class="container">
 <div class="row">
 <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
 <div class="site-heading">
 <h1>{{ .Title }}</h1>
 <hr class="small">
 <span class="subheading">{{ .Description }}</span>
 </div>
 </div>
 </div>
 </div>
 </header>

 <!-- Main Content -->
 <div class="container">
 <div class="row">
 <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
 <p><strong>Other Views: </strong><a href="/posts/monthview">By Month</a></p>
 <hr />

 {{ range .Paginator.Pages }}
 {{ .Render "archive" }}
 {{ end }}
 {{ template "_internal/pagination.html" . }}
 </div>
 </div>
 </div>
{{ end }}

Our archive by month page is now completed and ready to deploy. As you can see, there is a lot of power in the functions that Hugo provides us to loop through the post, group posts, run conditional logic, and more.

In our next post, we will build the archive by category page.

Hugo - Create Page to View All Your Posts

Justin James — Fri, 18 Feb 2022 13:00:00 +0000

In our post on Creating Your Blog Using Hugo, the theme that I provided you included the archive page that allows you to page through all of the posts you have written. By default, Hugo only shows 10 posts at a time and then you need to have an archive page that pages through the remaining posts. Even though I provided you with the archive page, I want to examine how that page works so you know how you can customize the page to match the look and feel you want.

The archive page is available in our theme at /posts. To generate this HTML, we use a combination of files:

layouts_default\baseof.html : this file contains the starting point template for all pages. We have a header and footer in our file and then pull in the main block that we will define in the template for the page we are rendering.
layouts_defaut\list.html : for every type of taxonomy in Hugo (post, page, etc) that we want to get a list view of, it will use this file. The main section is defined that the baseof.html file is using.
layouts\posts\archive.html : in our list.html, we tell it to render the archive, which refers to this file for the html to render
layouts\partials\meta.html : renders the post tag and categories. This file is used both in the post list page and the render of an individual page.
_internal/pagination.html : this is an internal file for Hugo that we can use to page through results.

Let’s break down how our post archive page is generated.

post list page:

First, we added a header to the page to display the title and description of the page.

The first thing we do is define the main section to reuse it in our baseof.html page.

{{ define "main" }}
<!-- Page Header -->
<!-- Main Content -->
{{ end }}

Within the main section, we have two sections: the page header and the post’s content.

For our page header, we show the purple background image to be consistent with the rest of the site and then the title and description.

<!-- Page Header -->
<header class="intro-header" style="background-image: url('{{ .Site.BaseURL }}{{ .Site.Params.defaultHeaderImage }}')">
 <div class="container">
 <div class="row">
 <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
 <div class="site-heading">
 <h1>{{ .Title }}</h1>
 <hr class="small">
 <span class="subheading">{{ .Description }}</span>
 </div>
 </div>
 </div>
 </div>
</header>

header:

To display each post, we use the Hugo range, which loops through the posts to be rendered by using{{ range .Paginator.Pages }} and then render the archive.html file for each post. Then after the post, we show the list of pages.

<!-- Main Content -->
<div class="container">
 <div class="row">
 <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
 {{ range .Paginator.Pages }}
 {{ .Render "archive" }}
 {{ end }}
 {{ template "_internal/pagination.html" . }}
 </div>
 </div>
</div>

posts:

pager:

The last thing that we will look at is the HTML rendered for each of the posts. This code is in the layouts\posts\archive.html.

This code will display a featured image if we define one in the front matter at the top of the post markdown file.

Then it will display the post title and link it to the page to go to the full post, followed by the date/categories for the post, then the summary of the post, and then a read more link that will take the viewer to the page to see the full post.

<div class="post-preview">
 {{ if .Params.featured_image }}<a href="{{ .Permalink }}"><img src="{{ .Params.featured_image }}"></a>{{ end }}

 <a href="{{ .Permalink }}">
 <h2 class="post-title">{{ .Title | markdownify }}</h2>
 </a>
 <p class="post-meta">{{ partial "meta.html" .}}</p>
 <p class="post-subtitle">{{ .Summary }}</p>
 <p>
 <a href="{{ .Permalink }}">Read More</a>
 </p>
</div>
<hr />

The last page to look at is the meta.html partial. This code will display the date if the date is defined on the post and in the format that we want, Month Date, Year (e.g., February 18, 2022). Then if there are categories defined on the post, they will be displayed, and if there is more than one category, they will be separated by a /

{{ if .Params.Date }}
 <span><span class="fa fa-calendar"></span>
 <time datetime="{{ dateFormat (.Site.Params.DateForm | default "Mon, Jan 2, 2006") .Date }}">
 {{ dateFormat (.Site.Params.DateForm | default "Mon, Jan 2, 2006") .Date }}
 </time>
 </span>
{{ end }}

{{ if .Params.categories }}
{{ $len := len .Params.categories }}
<span class="meta-tags">
 <span class="fa fa-tags"></span>
 <span>
{{ range $index, $category := .Params.categories }}{{ if (gt $index 0) }} / {{ end }}{{.}}{{ end }}
</span></span>
{{ end }}

You can now customize the look and feel of the post list. To customize the page, you have two options:

Customize the page the theme folder
If you do not want to modify the theme directly, you can override it by mirroring the folder structure within the layouts folder of your site. Hugo will take care of using your version instead of the theme version. You can even reference the partials like the meta date/category within your override file.

I like to modify the theme versus overriding it in the layouts folder since I am typically just adding a minor tweak or two to the format and do not need to override the layout entirely.

In our next post on Hugo, we will add a page to our blog that will display our post list grouped by month and sorted by date. You can see a preview here of what we will be created.

Hugo - Deploy Staging Test Site with Netlify

Justin James — Thu, 17 Feb 2022 13:00:00 +0000

In our previous post on Deploying a Preview Release of Site Using Netlify, we set up Netlify to build and deploy a preview of our site every time we created or updated a pull request that also included all of our draft and future posts.

In this post, we will look at how to deploy a git branch every time a commit is pushed to the branch to test out what our production site will look like before deploying to production. Unlike the preview deploy in the last post, the staging deployment will not include draft and future posts and mirror the production site configuration.

Adding Netlify Configuration for Branch

In our previous post, we created our Netlify configuration file, netlify.toml, at the root of our site.

In this post, we will add our staging configuration to the netlify.toml file.

At the bottom of the netlify.toml file, add the staging configuration. In this case, staging is the branch name. If your branch name is different, please update the “staging” text
```
# This will be your staging build
[context.staging]
command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"

[context.staging.environment]
HUGO_VERSION = "0.92.1"
```
Commit and Push the netlify.toml change to your main branch

Netlify Setup for Branch Deploy

We are now going to set up Netlify to build the staging branch that we will create later in this post.

Log in to Netlify
Click on the site that you want to add the staging deploy to
Click on the Site Settings
Click on the Build & Deploy in the Sidebar
Scroll down until you see the Branches section and click the Edit settings button.

By default, Netlify only builds your production branch.
You can decide to either build All branches that are deployed or individual branches to deploy in addition to your production branch. In this case, we only want our staging branch to be deployed.
Now, it will show that it will deploy your production and staging branches
Go to GitHub and create your staging branch
After you have created your staging branch, Netlify will automatically deploy it.

View Staging Deployment

In Netlify, you can view the deployment by clicking on the Deploys in the top menu under your site.
In the list of deployments, you will see a deployment for the staging branch.
You can view the staging deployment by clicking on the “Branch Deploy” text in the build summary.

If you get an error that the build failed, check the build logs for the command used for the build and make sure it was the hugo command that we set up. Most likely the netlify.toml file is missing the branch deploy section that matches the branch name.

Now we can test our site on a test server by pushing commits to the staging branch. This is a great way to ensure that everything is working correctly before deploying to production. This is especially helpful when making more changes than just the content of a post.

Hugo - Deploy Preview Release of Site Using Netlify

Justin James — Wed, 16 Feb 2022 13:00:00 +0000

HUGO_VERSION = “0.141.0"site every time we pushed a commit to our GitHub repository. As well, we set up a custom domain for our site.

In this post, we will look at the preview deploy feature of Netlify to build and deploy to a preview/staging site when we create or update a pull request.

When you create a new Netlify site, a preview site is set up out of the box to build every time you create or update a pull request. The build configuration will match the configuration of your production site. It is fantastic that Netlify set this up for us. However, to take full advantage of having a preview site, it would be helpful to include future and draft posts to make sure they look right before publishing them to production. It would also be nice to be able to test new versions of Hugo in a preview environment before updating production.

Verify Preview Builds Are Enabled

Before we dive into how to have different configurations for your preview site, let us verify that you indeed have the preview builds turned on.

Login to Netlify
Under the Sites section, click on your site
Under your site, click on the site settings
On the side menu, select Build & Deploy and then Continuous Deployment
Scroll down to the Deploy Previews section and click on Edit settings
Under the Deploy Previews settings, you should see that it is set for “Any pull request against your production branch / branch deploy branches” and the Netlify Drawer is set to Enabled (more on Netlify Drawer later in this post)
Click Save on the Deploy Previews settings

Netlify Preview vs. Production Configuration

Now that we have confirmed that our preview builds are enabled, let’s look at how to have different build settings for production vs. preview.

To have different settings, we will create a file in the root of our site named netlify.toml. The netlify.toml file will set the build command and hugo version for each environment.

First in the netlify.toml file, we need to add the configuration to set the default publish directory, the build command, and the hugo version to use.

# This will be your default build command
[build]
publish = "public"
command = "hugo --environment production --gc --minify"

[build.environment]
HUGO_VERSION = "0.141.0"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"

Now, let’s set our preview deployment to have a different build command that will build future posts, draft posts, and update the baseUrl to our preview url so that any links that reference the baseURL continue to work.
```
# This will be your preview build
[context.deploy-preview]
command = "hugo --environment preview --gc --minify -b $DEPLOY_PRIME_URL"
```

We can also set different environment variables and override the default ones

[context.deploy-preview.environment]
HUGO_VERSION = "0.141.0"
HUGO_ENV = "preview"

Now our production deployment will only include published posts, while our preview deployment will include future and draft posts.

Netlify Drawer

The last thing to look at is the Netlify Drawer option that we saw earlier, which is optional to use. The Netlify Drawer allows a reviewer (you in the case of a free Netlify account but could be a team member if you are paying for a team in Netlify) to give meaningful feedback. It allows integration while reviewing the site with GitHub, GitLab, Jira, Linear, Loom, Shortcut, and Trello. You can take screenshots (and annotate them), record your screen as a video and add a comment.

When you have the Netlify Drawer turned on and go to your preview site, on the bottom of the screen, you will see the Netlify Drawer bar where you can take your screenshot, record your screen as a video and open up collaboration tools.

If you click on the Deploy Preview on the left side of the bar and then click on the Integrations icon, you can connect your various collaboration tools.

For my integration, I connected GitHub, which enables me to see all of the activity on the pull request, leave a comment, upload a screen/video, and mark comments as resolved.

I can also add a GitHub issue to deal with a problem unrelated to the pull request.

That was a lap around how to create, configure and test/review a preview deployment for your site. In our next post on Hugo, we will look at how you can create a staging site that matches the configuration of our production deployment.

Hugo - Deploy Site to Netlify

Justin James — Tue, 15 Feb 2022 13:00:00 +0000

In our previous post on Creating a Blog Using Hugo, we installed Hugo, created a new site, added a theme, and created our first post.

In this post, we will be deploying the site that we created using a free account at Netlify. The site will be re-built and re-deployed whenever we push a new commit to our site’s Git repository. We will also look at how to set up our site using our own domain and create an SSL certificate.

A question that comes up a lot when I talk about deploying static sites like Hugo with Netlify is why not just use GitHub Pages?

This is a great question. While GitHub Pages allows us to deploy our site with a custom domain and SSL, it does not let us deploy a staging or preview version of the site to test out changes before making them live. Netlify gives us the ability to create a preview site for each pull request which I use to see what my future and draft post will look like on a machine other than my laptop. Netlify also allows us to deploy a branch to a subdomain, allows multiple domains pointing to a single site, unlimited websites, and rollback to a previous build. All of this can be done with the free tier of Netlify.

Create Netlify Account

The first thing we need to do is create a Netlify account if you do not have one already.

Head over to Netlify sign up page.

Import project

Now that our Netlify account is created, we are ready to add our site to Netlify.

Once logged into your Netlify account, click on the “Add New Site” and select “Import Project”
Click on your Git provider
Pick your site’s repository
For the build command, use the following to build, clean up resources and minify output
```
hugo --gc --minify
```
–gc cleans up the generated resource to remove anything old

–minify will minify things it can like HTML

Our site is now set up in Netlify and Netlify ran our first deployment for us.

Url for Site

Netlify will auto-assign a URL to our site for us. We can change the URL to something we can remember or hook up our own domain to the site. We will first look at renaming the Netlify domain and later in this post, we will look at hooking up a custom domain.

After you finish importing the repository, Netlify will take you to the site details, where you can see the URL that Netlify assigned (it is the netlify.app domain) to the site.

You can also see the Production deploys that have been done for the site. At this point, it will just be the initial deployment.

If you want to change the URL that Netlify assigned (will still be netlify.app but can change the subdomain in front of it), you can do so by:

Clicking on the domain settings
Clicking the options next to the domain name
Clicking the Edit Name

The last thing we need to do is fix the asset references on our site. Right now, our config.toml file says baseurl is example.org. We need to update this to our Netlify URL.

Open the config.toml file that is in the root of our site
Find the baseurl parameter and update it to your Netlify URL
Commit and push the change to your Git repository

Once you push the change to your repository, Netlify will automatically build and deploy your site.

Add Custom Domain (optional)

You can also set up your own domain in Netlify. Netlify will either set up a brand new domain for you or allow you to point to an existing domain.

For the steps to set up the DNS for your site, please see the Netlify Custom Domain Setup Docs

Even though Netlify can purchase the domain for you, I would highly suggest that you purchase and manage your domains through something like dnsimple. With Dnsimple, you have complete control and ownership over your domain. Dnsimple also has several one-click setups that do the DNS setup work for you, including one for Netlify.

Once you have pointed your DNS at Netlify, you are ready to add your custom domain to Netlify.

Under the domain settings, click “Add custom domain”
Enter your domain in and click verify
If your domain is already registered with an external DNS provider like mentioned above, you will see the “domain already registered” warning.
Click “Add domain”

The last thing is to set up your SSL certificate. Netlify users Let’s Encrypt and will create your SSL certificate.

You will see the HTTPS section at the bottom of the domain settings.

Expand the HTTPS section
Click on the “Verify DNS Configuration”
Go back to your config.toml file and update the baseURL to your custom domain and push the change to git.

Your site is now deployed with a custom domain that will be re-built and re-deployed with each push to your Git repository.

In our next post on Hugo, we will set up a preview site that will be deployed every time a pull request is created or updated. This will allow you to test out changes before they go live in production.

Create a Blog Using Hugo

Justin James — Mon, 14 Feb 2022 13:00:00 +0000

Are you ready to capturing and sharing your knowledge with others by creating a blog?

Then this series on Hugo is what you are looking for. Even if you have never used or heard of Hugo you will be able to create your blog and deploy it.

In this series of post on Hugo, we are going to build a full blog based on this website. By the end of the series, you will be able to add posts, have a page to view past post by date/category/tag, have an rss feed so people can subscribe to your blog, be able to add pages such as contact, search and about plus we will dig into several useful Hugo features to take some of the work out of creating your blog and post.

If you have not heard of Hugo before, Hugo is a static site generator. A static site generator renders your content into HTML files and you only have to deploy the HTML to your web server. No database is needed. No fancy hosting service. No Wordpress site. In fact, you can run your site using GitHub pages for free.

Hugo Install

The first thing we need to do is install Hugo.

If you are not running Linux or macOS, you can find the install instructions at https://gohugo.io/getting-started/installing

For Windows I prefer to use Chocolately to manage my applications installs and upgrades. For Hugo, Chocolatey does have a package available for us to use.

By using Chocolately, I can install Hugo and get Hugo available on my environment path with a single command.

If you do not have Chocolatey installed already, go to https://chocolatey.org/install and install it first

Open up a command prompt as an administrator
Install Hugo
```
choco install -y hugo
```

When a new version of Hugo comes out you can update your Chocolatey package but running choco upgrade -y hugo

Create a New Site

Now that we have Hugo install, we need to create a new website.

Open up a command prompt
Navigate to the directory where you store your repositories or code.
Run the following to create a new Hugo site in a folder name, MyBlog
```
hugo new site MyBlog
```

Add a Theme

At this point we only have a shell of a website. For the design is the website, Hugo allows us to add themes to control the look and feel.

There are two ways to install a theme. You can make the theme a git submodule or you can download the theme and unzip it into the themes directory under your website.

There are pros and cons to both options.

git submodule pros:

it is easy to update the theme with any changes the theme author makes.
fastest way to get started with a theme

git submodule cons:

changes you make to the theme will not be seen by git
you have to remember to init the submodule after clone
you have to remember to update the submodule, git pull for your site does not update the submodule.
if the theme author decides to delete the theme repository and you don’t have a local copy, your theme is lost.

download theme pros:

the theme is stored along with your site and any changes you make to it are stored with your site
you do not have to worry about the theme repository going away
you have the most control of your theme

download themes cons:

takes a little bit more work to start using theme since you have to download and unzip it.
you will have to manually merge any changes the theme author makes into your version of the theme.

In my experience, themes rarely get updated after their release

My preference is to download the theme so that I have full control over it and don’t have to worry about the theme repository going away.

As well for this series on Hugo, we will be starting with a basic starter theme and then adding and modifying the theme so you will want to have the theme installed locally.

To install the theme:

Go to https://github.com/digitaldrummerj/hugo-theme-bootstrap
Click on the green code button and then click the Download ZIP
Unzip the download to the themes directory
Rename hugo-theme-bootstrap-main to bootstrap
Open the config.toml file that is in the root of your site and add the following line to tell Hugo to use the theme. The value of the theme parameter, is the directory name of the theme under Themes.
```
theme = "bootstrap"
```

If you want to use a different theme, you can find a good amount of themes available at https://themes.gohugo.io/

Add Some Content

Now that we have our site and theme setup, we are ready to create our first blog post.

Post in Hugo use markdown for the content and are stored in the content/post directory.

Open a command prompt
Navigate to your website folder
Run the hugo new command to create a new post
```
hugo new posts/my-first-post.md
```

Start Web Server

We are now ready to see what our side looks like and start up the built-in Hugo web server

From our command line that we already have open, run:
```
hugo server -D -F
```
the -D argument tells Hugo to include draft post the -F argument tells Hugo to include future dated post that are published
Open your browser and navigate to http://localhost:1313

Your blog is now up and running with your first post. In our next post on Hugo, we will take a look at how to deploy our site using the free version of Netlify so that every time we push commits to our GitHub repository, our site will update itself.

Hugo - Show ShortCode Markdown in Code Block

Justin James — Sun, 13 Feb 2022 13:00:00 +0000

I was trying to add a code block to a post to show how to generate an html figure using the Hugo built-in figure shortcode and it instead of showing the markdown of the figure, it kept rendering the actual figure.

I could have just took a screenshot of the code but the whole point of having the code block is to make it easier for you the reader to easily copy and paste the code. The key to making this work is knowing how to escape the figure shortcode within the code block so that Hugo renders it as a code block and not a figure.

I wanted the code block to show the following code

{{< figure src="/images/aspnet-core-dotcover/teamcity-run-unit-tests.png" caption="Build Configuration Example" >}}

Instead though it kept generating the actual figure

Build Configuration Example

The trick to make this work is to escape the figure by adding a /* after the < and a */ before the > in the figure markdown and then it will render actual markdown

Switch Between Github Accounts on Windows

Justin James — Sat, 12 Feb 2022 13:00:00 +0000

Recently, I had to create a Github account for work in addition to the one that I have for my personal repos. Not a big deal having two accounts but figuring out how to switch the account to use depending on the repository was difficult to figure out.

Luckily, the solution is really straight forward to implement. methods

The solution is to:

Move all your work repositories to a single directory like c:\repos\work
Move all your personal repositories to a single directory like c:\repos\personal

Create a .gitconfig-work file in the same directory as your .gitconfig file

[user]
name = Justin James
email = [Work Email Here]
[credential “https://github.com”]
helper = dtkeyring

Create a .gitconfig-personal file in the same directory as your .gitconfig file
```
[user]
name = Justin James
email = [Personal Email Here]
[credential “https://github.com”]
helper = wincred
useHttpPath = true
```
the useHttpPath argument for the credential manager is key as it will will prompt you for credentials for each repository instead of using a single credential for all repositories on a given platform (e.g. GitHub, GitLab, BitBucket, etc)

Update your .gitconfig file in your home directory to have an includeif to change which git config pull in based in kn the directory

[includeIf "gitdir:C:/repos/work/"]
path = .gitconfig-work
[includeIf "gitdir:C:/repos/personal/"]
path = .gitconfig-personal
[core]
longpaths = true
[init]
defaultBranch = main

Now your git configuration will change based on the directory your git repository. This ensures that the right account is associated to your commits. As well as it will prompt you for your GitHub credentials per repository url.

Cypress - Migrate from cy.route to cy.intercept

Justin James — Fri, 11 Feb 2022 13:00:00 +0000

Starting with Cypress 6.0, the cy.route and cy.server commands were deprecated and replaced with cy.intercept.

Cypress is currently at version 9.4

Comparison to cy.route()

Unlike cy.route(), cy.intercept():

can intercept all types of network requests including Fetch API, page loads, XMLHttpRequests, resource loads, etc.
does not require calling cy.server()
does not have method set to GET by default, but intercepts all methods

Using cy.route

In my code, we use cy.route that return either response using a file (e.g. fixture) or an object defined in the test code itself.

My preference is to use a fixture file for any response that is more than just a simple string as it makes your code more readable and allows you to reuse the fixture in other routes/intercepts.

Here is a quick look at the syntax of cy.route.

cy.route using a fixture file:

cy.route({
 url: 'url',
 method: 'method',
 status: status,
 response: 'fixture:filename'
}).as('alias');

cy.route using a response that is not a fixture file:

cy.route({
 url: 'url',
 method: 'method',
 status: status,
 response: ''
 }).as('alias');

Updated to Intercept

Updating to use cy.intercept is pretty straight forward.

Warning: make sure for each alias of the same name that you update it to cy.intercept else it will not override itself as you expect it to since cy.route and cy.intercept do not interface with each other.

cy.intercept using a fixture file:

cy.intercept({
 method: 'method',
 url: 'url',
 }, {
 statusCode: status,
 fixture: 'filename'
}).as('alias');

cy.intercept using a response that is not a fixture file:

cy.intercept({
 method: 'method',
 path: 'url',
 }, {
 statusCode: status,
 body: 'response'
}).as('alias');

The last step once all of your cy.routes have been updated to cy.intercept is to remove the call to cy.server as it is no longer needed.

Cypress - Create My Own Cypress Commands

Justin James — Thu, 10 Feb 2022 13:00:00 +0000

As your number of Cypress tests grows you are bound to end up with some duplicate code that would be better to put into a reusable function.

Luckily, Cypress allows us to create our own custom cy commands that are available to all of our tests.

Here are some examples of custom commands that I have created in one of my projects:

Test grid sorting is working correctly
Test grid paging is working correctly
Mock a list of API calls that every page has so we only need to call a single command to get all of the mocks
Generate a string of a certain length
Generate a string of a certain length that also contains certain special characters based on a parameter
Validate input field strips certain special characters on both typing and pasting of text

These examples are just a few of the ones we have created. The custom commands greatly increased developer productivity, standardized testing of common functionality, and allowed us to remove hundreds of lines of duplicate code.

Syntax

Cypress.Commands.add(name, callbackFn)
Cypress.Commands.add(name, options, callbackFn)

Usage

Cypress.Commands.add(`login`, (email, pw) => {})

Examples

Here are a couple of actual custom commands that I have written in my applications.

Angular Material Grid Is Sorted By Column & Direction

Custom Command Code:

export function gridSortValidateSortOrder(columnName, order) {
 var selector = `mat-header-cell.cdk-column-${columnName}`;

 cy.get(selector)
 .should("have.attr", "aria-sort")
 .and("eq", `${order}`);
}

Custom Command Usage:

cy.gridSortValidateSortOrder('status', 'descending');

Generate Random String of a Certain Length

Custom Command Code:

export function generateString(length) {
 var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
 var charactersLength = characters.length;
 return [...Array(length)]
 .map(i => characters[Math.random() * charactersLength | 0])
 .join('');
}

Custom Command Usage:

cy.generateString(25).then(txt25 => {
 cy.get('[data-cy="accountName"]')
 .click()
 .type(txt25);
 });

Create Your Command

Let’s take a look at how and where do you create your custom commands.

A great place to define commands is in your cypress/support/commands.js file, since it is loaded before any test files.

However, I prefer to not put my custom command code directly into the commands.js file but instead into their own file in the support directory and import the files into the commands.js file. This way I am able to keep my command.js file manageable and easily find my custom commands based on purpose.

For the examples above, I created an angular-material.js file and a strings.js file in the cypress/support directory and then in the command.js file imported both files.

cypress/support/angular-material.js

Cypress.Commands.add('gridSortValidateSortOrder', gridSortValidateSortOrder);

cypress/support/strings.js

Cypress.Commands.add('generateString', generateString);

cypress/support/command.js

import "./angular-material";
import "./strings";

Best Practices

The Cypress Team has done a nice job in their docs of documenting the best practices for creating a Cypress Custom Command. If

Custom Command Best Practices from Cypress Docs

dotCover - How in TeamCity to create multiple coverage reports

Justin James — Wed, 09 Feb 2022 13:00:00 +0000

In our previous post, we talked about how TeamCity automatically combines multiple dotCover outputs into a single code coverage report but what if we wanted to keep thoose reports seperate?

You might be thinking why would you want to do this? Don’t you want to see the overall test coverage?

The overall coverage is nice but when you have both unit tests and integration tests, or multiple test projects serving different purposes, there is a high potential that you are reporting lines of code being covered that were only called but not actually tested.

In this post, we are going to look at how in TeamCity you can run multiple test builds to generate both individual reports and still have a combined report.

Why do we need seperate code coverage reports?

Before I dive into the reason the reporting may be higher than reality, lets define the difference between a unit test and integration test.

Unit Test: testing the business logic and data layers of your application with dependencies mocked out. You are testing the smallest unit of work possible.

Integration Test: testing the whole flow of the application starting with what the user interfaces with (UI or Api endpoints) and dependencies are typically not mocked out.

If we look at an ASP.NET Web Api, the integration test would call the REST endpoint while the unit test would only call a single method in the business logic. This is where the problem comes in!

With the integration test since it start at the endpoint, that means it calls all of the business logic along the way. So in a combined code coverage report, every line of code that the endpoint calls is considered covered. However, a lot of times the integration tests are looking more at things like security checks on the endpoints or making sure the returned view model is correct or validating how an exception looks coming back to the caller. The integration tests may not actually be looking in depth at the businesss logic like a unit test would. However, if you look at the combined report, it is not clear what lines of business logic code is not actually being tested and can you lead you to believe that you have more test coverage than you actually do.

This is exactly what is happening on one of my projects as the integration tests are only validating the security setup of the endpoints to ensure that only allows users have data returned and all others get a 403 Forbidden error. For the 403 Forbidden error, the code coverage is spot on as the code stops within the endpoint and returns an error message. However, for authorization success, it call as the way through all the layers of the application and returns data which makes it look like we tested our business logic when is reality we did not run a single tests against that logic in our integration test. So for us, it was very important to have the individual code coverage reports for unit tests and integration tests so that we could easily see where we have gaps in the unit test that are testing our business logic.

However, we do still like to have the combine report just for reporting purposes to get an overall picture of how we are doing.

Implementation

For our TeamCity build, we are going to set up 3 builds in total for this work.

Unit test build to generate the individual report with the snapshot as a build artifact
Integration test build to generate the individual report with the snapshot as a build artifact
A build that has a dependency on the unit and integration test builds and takes the artifact for each of those builds to do a combined report.

Note: We could use a composite build in TeamCity to have a build call the individual builds but one of the limitations of a composite build is that it can not have its own build steps, so we could not be able to easily create a combined report.

Create the Unit Test Build

The unit test build will have 4 builds steps, save the dotCover snapshot file as a build artifact and create the code coverage report.

Build Steps

Our unit test build consist of 4 steps to restore our nuget packages, run our tests with code coverage, make a copy of the snapshot file and create our code coverage report.

Create a build step that is a command line step with the working directory as the Unit Test project folder and the custom script has the command dotnet restore
```
dotnet restore
```

Create a build step that is a command line type with a script to run our test with code coverage turned on:

dotnet dotcover test --logger "console;verbosity=normal" --dotCoverFilters="+:Assembly=Aspnet.Coverage.*;-:Assembly=Aspnet.Coverage.UnitTests;-:Assembly=Aspnet.Coverage.MockData;-:Class=Aspnet.Coverage.Api.Controllers.*;-:Class=Aspnet.Coverage.Api.Startup;-:Class=Aspnet.Coverage.Api.Program;-:Class=Aspnet.Coverage.Api.Migrations.*"

Create a another build step that is a command line type with a script that will make a copy of our snapshot file created by our previous step

When TeamCity process the snapshot in the next step, it removes the snapshot file, so the copy is required to be able to make the snapshot a build artifact to use in our combined build that we will create later in this post.
```
copy UnitTestCodeCoverage.Snapshot.dcvr UnitTestCodeCoverage-Show.Snapshot.dcvr
```

Create the last build step that is a command line type with a script that will process the dotcover results for the unit tests:

echo ##teamcity[dotNetCoverage dotcover_home='c:\\dotCover.CommandLineTools.2021.3.3']

echo ##teamcity[importData type='dotNetCoverage' tool='dotCover' path='Aspnet.Coverage.UnitTests\UnitTestCodeCoverage-Show.Snapshot.dcvr']

Unit Test Build Artifact Setup

The last thing we need to do for your unit test build is to tell TeamCity to make the snapshot that we copied in the build step above as a build artifact.

On the left menu in TeamCity , click on the General Settings option and then in the Artifact paths section add the snapshot file to the list
```
+:Aspnet.Coverage.UnitTests\UnitTestCodeCoverage.Snapshot.dcvr
```

Create the Integration Test Build

The integration test build will have 4 builds steps, save the dotCover snapshot file as a build artifact and create the code coverage report.

Integration Test Build Steps

Our integration test build consist of 4 steps to restore our nuget packages, run our tests with code coverage, make a copy of the snapshot file and create our code coverage report.

Create a build step that is a command line step with the working directory as the Unit Test project folder and the custom script has the command dotnet restore
```
dotnet restore
```

Create a build step that is a command line type with a script to run our test with code coverage turned on:

dotnet dotcover test --dotCoverOutput="IntegrationTestCodeCoverage.Snapshot.dcvr" --logger "console;verbosity=normal" --dotCoverFilters="+:Assembly=Aspnet.Coverage.*;-:Assembly=Aspnet.Coverage.*Tests;-:Assembly=Aspnet.Coverage.MockData;-:Class=Aspnet.Coverage.Api.Migrations.*"

Create a another build step that is a command line type with a script that will make a copy of our snapshot file created by our previous step

When TeamCity process the snapshot in the next step, it removes the snapshot file, so the copy is required to be able to make the snapshot a build artifact to use in our combined build that we will create later in this post.
```
copy IntegrationTestCodeCoverage.Snapshot.dcvr IntegrationTestCodeCoverage-Show.Snapshot.dcvr
```

Create the last build step that is a command line type with a script that will process the dotcover results for the unit tests:

echo ##teamcity[dotNetCoverage dotcover_home='c:\\dotCover.CommandLineTools.2021.3.3']

echo ##teamcity[importData type='dotNetCoverage' tool='dotCover' path='Aspnet.Coverage.IntegrationTests\IntegrationTestCodeCoverage-Show.Snapshot.dcvr']

Integration Test Build Artifact Setup

The last thing we need to do for your integration test build is to tell TeamCity to make the snapshot that we copied in the build step above as a build artifact.

On the left menu in TeamCity , click on the General Settings option and then in the Artifact paths section add the snapshot file to the list
```
+:Aspnet.Coverage.IntegrationTests\IntegrationTestCodeCoverage.Snapshot.dcvr
```

Create the Combine Report Build

For our combined report build we will be creating a dependency on the unit and integration test builds that we created above and then telling TeamCity about the snapshots so that it creates the report for us.

Combined Build TeamCity Dependencies Setup

Create a build that is a regular build and hook it up to the repository so that we can get the source code in our dotCover report.
After the build is created, click on Dependencies on the left menu and add the unit test and integration builds as snapshot dependencies
Under the dependencies, you also need to setup an artifact dependency for the dotcover snapshots that we made as a build artifact in our unit and integration test builds

Combined Build Steps

Add a command line build step with the script below to process the unit test build dotCover snapshot

echo ##teamcity[dotNetCoverage dotcover_home='c:\\dotCover.CommandLineTools.2021.3.3']

echo ##teamcity[importData type='dotNetCoverage' tool='dotcover' path='UnitTestCodeCoverage.Snapshot.dcvr']

Add a command line build step with the script below to process the integration test build dotCover snapshot

echo ##teamcity[dotNetCoverage dotcover_home='c:\\dotCover.CommandLineTools.2021.3.3']
echo ##teamcity[importData type='dotNetCoverage' tool='dotcover' path='IntegrationTestCodeCoverage.Snapshot.dcvr']

Now when you run the combined build, it will run the unit test and integration test builds and then it will take the artifacts from those two builds to create the combined dotCover code coverage report. The last thing we need to do for your integration test build is to tell TeamCity to make the snapshot that we copied in the build step above as a build artifact.

DotCover - Combine Multiple Results into Single Report

Justin James — Tue, 08 Feb 2022 13:00:00 +0000

In TeamCity, what if you need to combine the code coverage results say from unit test and integration test projectsthst run as seperate build steps?

Luckily, TeamCity does this work for you but it is not obvious that it will do it for.

To get TeamCity to combine the multiple the code coverage results into a single code coverage result, you just need to add the echo command to import the data into the build like we did in our previous post

Unit Test Example

echo ##teamcity[dotNetCoverage dotcover_home='c:\\dotCover.CommandLineTools.2021.3.3']
echo ##teamcity[importData type='dotNetCoverage' tool='dotCover' path='Aspnet.Coverage.UnitTests\UnitTestCodeCoverage.Snapshot.dcvr']

Integration Test Example

echo ##teamcity[dotNetCoverage dotcover_home='c:\\dotCover.CommandLineTools.2021.3.3']
echo ##teamcity[importData type='dotNetCoverage' tool='dotCover' path='Aspnet.Coverage.IntegrationTests\IntegrationTestCodeCoverage.Snapshot.dcvr']

When TeamCity run the echo import data commands for both the UnitTestCodeCoverage.Snapshot.dcvr and IntegrationTestCodeCoverage.Snapshot.dvcr files, it will combine them together into a single code coverage report.

In our next post, we are going to go through how to implement a build run each test projects in parallel and keep the reports from combining together.

.NET Core - Code Coverage in TeamCity

Justin James — Mon, 07 Feb 2022 13:00:00 +0000

In part 1 and part 2 of of this article series, we setup and optimized our code coverage using the free command line version of dotCover.

In this post, we are going to add our code coverage to our TeamCity builds to run our unit tests with code coverage as part of the automated builds, show us the code coverage metrics summary after the build, be able to view the code coverage report right in TeamCity and add failure metrics for if code coverage percent drops.

Note: This post assumes that you already have a TeamBuild setup for your project to trigger a build on pull request or manually on pushes to the repository.

In part 1 and 2 of of this article series, we setup and optimized our code coverage using the free command line version of dotCover.

I am a big believer in DevOps and having automated builds and deployments for all of my projects to ensure that the code compiles on a machine other than my development machine, automated tests are executed in a clean environment, and any other work that I need to do to get ready for a deployment is automated. In fact, I have had automated builds and deployments since 2002, long before DevOps become a thing.

I will be using TeamCity as the automated build platform and am assuming that you already have your Angular build working and are just adding in code coverage to the build.

Step 1: Install dotCover Command Line on Build Agent

The first thing that we need to do is install the dotCover command line on our TeamCity build agent. Even though TeamCity has dotCover built-in, unless you are the TeamCity administrator you do not have any ability to update the built-in version of dotCover that TeamCity is using. In my case, we have a team at work that has an on-premise TeamCity instance that they give teams space on but only they have administrative rights to the TeamCity server. We only get to control our build agents.

Luckily, it is really easy to tell TeamCity to use a locally installed dotCover version instead of the built-in TeamCity one.

Login to Your Build Agent
Download the dotCover Command Line
Unzip it to a location on your TeamCity build agent that account that is running the TeamCity build agent service has access to

Step 2: Add Builds Step

We need to add three build steps:

Run dotnet restore to restore our nuget packages
Run our unit tests with code coverage
Tell TeamCity to process the code coverage results

2.1: Restore Nuget Packages

You need to create a build step that is a command line step with the working directory as the Unit Test project folder and the custom script has the command dotnet restore

dotnet restore

Run dotnet restore

2.2: Run Unit Tests with Code Coverage

We need to add a new build step to our TeamCity build and configure it as follows. For the most part we are going to use the command from our previous post with the except of removing the dcReportType parameter so that a snapshot is created instead.

The reason to use a snapshot is so that TeamCity will integrate the code coverage summary and generate the report for us instead of us generating the report outside of TeamCity.

Add a new build step and configure your build step as follows:

Name: Run Unit Tests With Code Coverage
Type: Command Line
Working Directory: Unit Test Project Folder
Run: Custom script

Custom script:

dotnet dotcover test --logger "console;verbosity=normal" --dotCoverFilters="+:Assembly=Aspnet.Coverage.*;-:Assembly=Aspnet.Coverage.UnitTests;-:Assembly=Aspnet.Coverage.MockData;-:Class=Aspnet.Coverage.Api.Controllers.*;-:Class=Aspnet.Coverage.Api.Startup;-:Class=Aspnet.Coverage.Api.Program;-:Class=Aspnet.Coverage.Api.Migrations.*"

Note 1: This command will output a snapshot file named dotCover.Output.dcvr

Note 2: We use the logger with console and verbosity=normal is so that TeamCity can report the status of each individual test.

Run Unit Test Build Step Configuration

2.3: Report Coverage to TeamCity

The next thing we need to do is add a build step to tell TeamCity to process the code coverage snapshot that we generated in the unit tests build step.

Add a new build step and configure your build step as follows:

Name: Process Code Coverage
Type: Command Line
Run: Custom script

Custom script:

echo ##teamcity[dotNetCoverage dotcover_home='c:\\dotCover.CommandLineTools.2021.3.3']
echo ##teamcity[importData type='dotNetCoverage' tool='dotCover' path='Aspnet.Coverage.UnitTests\UnitTestCodeCoverage.Snapshot.dcvr']

1st line tells TeamCity where to find the local version of dotCover that we can to use. The version number should match the version we setup in our Unit Test project. The dotcover_home should match the location that you unzipped dotcover to.

2nd line tells TeamCity to import the code coverage data and process it

Process Code Coverage Build Step Configuration

Step 3: Add and View Code Coverage Metrics

There is actually nothing more that we need to do in TeamCity for it to show us the code coverage report. We get two reports automatically:

Summary Report on the Build Overview Tab

TeamCity Summary Report
Code Coverage Tab to view the code coverage full report. The metric that I look at is Statements,% as that looks at lines of code covered.

TeamCity Code Coverage Tab
You can also drill all the way down into each file to see which lines of code were covered.

TeamCity Code Coverage Report Code File

Step 4: Add Failure Metrics

The last thing that I like to do with my code coverage builds, is to also add failure metrics to the build so that it fails if the code coverage goes down by X percent, the number of skipped tests increases X percent and the number of overall tests goes down by more than a certain percent. For me, the percentage to use for the failure metrics really depends on the number of tests within the project as the more tests you have the lower you want the percent as you will have more tests in the percentage as the number of tests goes up.

When you are first starting out, I tend to keep it at 5% to 10% and over time I reduce it down to as low as I can go without constantly failing the build. For example, right now we have 800 tests in one of my projects so at 1% that means that we can skip up to 8 tests and remove up to 8 tests. We also have 23,000 lines of code so at 1% it means that we can add up to 230 lines of code that are not called by a test.

Note that the failure conditions below use 1% but you can change that to the percent that you want to allow

Find your TeamCity build that you want to add the failure conditions to and edit the settings
On the left sidebar, click on the Failure Conditions
Click on the Add failure condition button and select “Fail build on metric change”
For ignored tests failure: select Fail build if to number of ignored test and set is more by at least 1 percent and click save
For number of tests failure: select Fail build if to number of tests and set is less by at least 1 percent and click save
For code coverage percent failure: select Fail build if to percentage of statement coverage and set is less by at least 1 percent and click save

If you want to download the project that I used for this post, you can do so at https://github.com/digitaldrummerj/aspnet-core-code-coverage-example. It is based on .NET 3.1.

dotCover - Optimizing Coverage Report to Only Include Our Applications Logic

Justin James — Sun, 06 Feb 2022 13:00:00 +0000

In part 1 of the ASPNET Code Coverage Using dotCover, we hooked up dotCover to our project to generate our code coverage report. It was pretty easy to hook it up but the number is not the most accurate as it includes every file that is part of the solution including our test project and all of the ASP.NET WebApi code.

When looking at code coverage, we only want to include files that make sense to test against so that our code coverage number is the most accurate. So that means we should exclude our unit tests project from the report since we are not going to run tests against our test projects. Same thing with the ASP.NET WebApi startup.cs, program.cs and Controllers as we would want to test those using integration tests and not unit tests.

In the previous article, we used the following command to run generate our coverage report.

dotnet dotCover test --dcReportType=HTML --logger "console;verbosity=normal"

To add and exclude files we need to add the dotCoverFilters parameter. The dotCoverFilters allows us to both add and remove assemblies, classes, modules, and functions. Asterisk (*) wildcard is also supported.

to add we use start the filter with +: followed by the type (e.g. Assembly, Class, Module, Function)
to remove we start the filter with -: followed by the type (e.g. Assembly, Class, Module, Function

In the example command below we:

Add all assemblies in the solution with +:Assembly=<Name>.* where <Name> is the full name of the assembly.
Remove the Unit Test and Mock Data projects with -:Assembly=<Name>.UnitTest;-:Assembly=<Name>.MockData where <Name> is the full name of the assembly
Remove Api Controllers, Startup and Program files, and Entity Framework migrations with -:Class=<Name>.Controllers.*;-:Class=<Name>.Startup;-:Class=<Name>.Program;-:Class=<Name>.* where <Name> is the full name of the namespace that hold all of the migration classes.

dotnet dotcover test --dcReportType=HTML --logger "console;verbosity=normal" --dotCoverFilters="+:Assembly=Aspnet.Coverage.*;-:Assembly=Aspnet.Coverage.UnitTests;-:Assembly=Aspnet.Coverage.MockData;-:Class=Aspnet.Coverage.Api.Controllers.*;-:Class=Aspnet.Coverage.Api.Startup;-:Class=Aspnet.Coverage.Api.Program;-:Class=Aspnet.Coverage.Api.Migrations.*"

The most important thing when adding the dotCoverFilters is to not abuse it by excluding files that should actually be tested.

This command also ran 33% faster as it had less files to examine.

The report also now includes just the files that are truly should be under tests (e.g. our business logic) and the amount of code covered went from 11% to 71%.

In the next post in the series, we will add our code coverage report as part of our TeamCity build.

If you want to download the project that I used for this post, you can do so at https://github.com/digitaldrummerj/aspnet-core-code-coverage-example. It is based on .NET 3.1.

ASP.NET Core - Implementing Code Coverage with JetBrains dotCover

Justin James — Sat, 05 Feb 2022 13:00:00 +0000

Having automated tests is a good thing to have to help with your code quality but having those tests without any idea of how much of your code is actually being tested is a really bad thing.

To figure out how much of our code we are actually testing, we need to create a code coverage report. To generate our code coverage report, we going to use the JetBrains dotCover tool.

Note: This post assumes you already have a .NET Core Project that includes unit tests.

Step 1: Install dotCover

First, you need to install dotCover.CommandLineTools package from nuget as a command line tool within the project.

NOTE: We are using the command line version of dotCover as it is free to use and ultimately we will be adding it to our automated builds, so we do not want the GUI version. If you want the GUI version and Visual Studio integration, they do offer a 30 day trial of dotCover.

Even though JetBrains says that you can install it from nuget as a package, I have found that if you do that and then try to run dotnet dotcover test you get the following error message.

To fix this error, you need to add dotCover as a DotNetCliToolReference in the unit tests project file by adding the below <ItemGroup>

<ItemGroup>
 <DotNetCliToolReference Include="JetBrains.dotCover.DotNetCliTool" Version="2021.3.3" />
</ItemGroup>

Change the version number above to the latest version available for download at https://www.jetbrains.com/dotCover/download/

Step 2: Restore Number Packages

Now that we have the dotCover cli referenced within the project file as a tool reference, we need to restore the nuget packages by running either dotnet restore or dotnet build

Open a command line and navigate to your unit test project
Run dotnet restore

Step 3: Run Test and Create Test Snapshot

Now we are ready to generate our code coverage report.

From the same command line you already have open run the following command to execute your tests and generate a code coverage report.

dotnet dotcover test --dcReportType=HTML --logger "console;verbosity=normal"

Step 4: Analyze the Report

The dotCover command we used in step 3 will generate a report in the same directory that we can it in called dotCover.Output.html

The report will show you which lines of code were covered in your project and you can drill into the source files and see the exact lines that were and were not covered. Green text means is was covered and Red text means is was NOT covered.

The report will allow you to decide if you need to write additional tests or not and to ensure that the tests is actually covering the code that you think it is covering.

Also, your project team will need to decide on the target code coverage percentage that is your minimum threshold to approve the code to be sent to production.

As a target of 100% code coverage sounds awesome, in a lot of cases this is not a realistic target and the business value to increase the code coverage beyond a certain point does not provide enough additional business value.

In our next post on ASP.NET Code Coverage using dotCover, we will discuss how to filter the report so that it only incudes code that should actually be tested and exclude things like our unit test project, so that our code coverage number is more accurate.

If you want to download the project that I used for this post, you can do so at https://github.com/digitaldrummerj/aspnet-core-code-coverage-example. It is based on .NET 3.1.

Angular - Add Code Coverage to Automated Builds in TeamCity

Justin James — Fri, 04 Feb 2022 13:00:00 +0000

Welcome to part two of our two part series on Angular code coverage.

In the previous article, we set up Cypress code coverage for our Angular project so that we could run it locally on our development machine. In this article, we are going to take it to the next step and add it to our automated build.

I am a big believer in DevOps and having automated builds and deployments for all of my projects. In fact, I have had automated builds and deployments since 2002, long before DevOps become a thing.

I will be using TeamCity as the automated build platform and am assuming that you already have your Angular build working and are just adding in code coverage to the build.

This article will be building on the code from the previous article. You can get the code from the previous article at https://github.com/digitaldrummerj/angular-cypress-code-coverage-example

Install Dependencies

On our build server, before running any tests, we need to start up the web server and we need to wait for it to respond before kicking off the. Then when the tests are done running we need to stop the web server so that we do not leave it hanging around on our build server.

Install Web Server Dependency

To enable us to start up and wait for our web server we are going to install 2 dependencies: angular-http-server and start-server-and-test.

angular-http-server allows us to start up the web server in the background so that we can then continue on to run out tests.

start-server-and-test allows us to start up the web server and wait for it to respond before running our Cypress tests.

To install our angular-http-server and start-server-and-test:

Open a command line and navigate to your Angular project

Run the following npm command to install them as devDependencies

npm install --save-dev angular-http-server start-server-and-test

Install Dependency to Enable Serial/Parallel Npm Script Runs

Another really handy npm package for our build scripts is npm-run-all. This package allows us to run npm script commands in serial (1 after the other) or parallel (all at the same time) and works cross platform. For build scripts, I run the commands in serial in order to have a clean and easy to read build log that can be read top to bottom to see what is happening in the build. Even though you get slightly quicker builds with running commands in parallel, the build logs end up just being a mess with all of command logs intermingled and virtual impossible to read to figure out what caused a failed build.

To install npm-run-all:

In the command line that you have opened from the previous dependency install run the following command:
```
npm install --save-dev npm-run-all
```

Testing Build Locally

We are now ready to test out our build locally on our development machine. I like to have the ability to run the same build that I would run as part of my automated build locally on my development machine. This also makes it much easier to move to another build provider if needed (yes I have had to do this more than once when a job decide to change their standard platform to use).

Npm Scripts to Add

Open up the package.json file

Add the following scripts to the scripts section of the package.json

"ci:coverage": "run-s build:prod:coverage ci:cypress:coverage",
"build:prod:coverage": "ng build --extra-webpack-config ./cypress/coverage.webpack.js --progress=false",
"ci:cypress:coverage": "start-server-and-test ci:start-server http://localhost:4200 cy:run:coverage",
"ci:start-server": "angular-http-server --path ./dist/CypressCodeCoverageDemo -p 4200 --silent",
"cy:run:coverage": "cypress run --browser chrome --headless --env coverage=true --config video=false"

Description of the scripts:

ci:coverage - runs all of the npm scripts to run for the CI process
build:prod:coverage - builds the application with the –prod flag and with code coverage
ci:cypress:coverage - start web server, waits for response, then run tests
ci:start-server - runs web server with the Angular prod build
ci:run:coverage - runs the Cypress test with a Chrome headless browser with code coverage turns on and video creation turned off (for performance reasons)

Running Build Locally

Now that we have our npm scripts added, we are ready to run our automated build script which is the ci:coverage script

npm run ci:coverage

TeamCity Configuration

The last thing we need to do is setup TeamCity to run our builds, show us the code coverage metrics, be able to view the code coverage report right in TeamCity and add failure metrics for if code coverage percent drops.

Add Code Coverage Metrics to Build

To output the code coverage report and metrics in a format that can be used in TeamCity, we need to add the teamcity reporter to our nyc configuration in the package.json file.

"nyc": {
 "extends": "@istanbuljs/nyc-config-babel",
 "all": true,
 "exclude": [
 "**/cypress/**",
 "**/coverage/**",
 "karma.conf.js",
 "src/test.ts",
 "**/*.spec.ts"
 ],
 "reporter": [
 "html",
 "teamcity"
 ]
}

By adding the teamcity report, when we run the tests with code coverage enabled, we will see the code coverage summary when viewing the build results.

View Code Coverage Report

The code coverage summary is great for getting an overall picture of where we are at with out code coverage but it does not allow you to drill into each file to see what was covered or what was not covered. Our build does generate the report but we need to make it visible within TeamCity by adding it as a build report and to the build artifacts.

Adding Build Report

Within TeamCity, you need to edit the build settings to add the build report tab.

On the left nav bar, click on the Reports Tabs (Note if you don’t see the Reports Tabs, you might need to go higher in the build hierarchy)
Click on the Create new build report tab
In the dialog that comes up make the title “UI Coverage” and the Start page: “coverage/index.html”
Click the save button
Now if you view a build, you will see a new tab titled “UI Coverage” that will contain the code coverage report that we are going to add to the build artifacts in the next section.

Adding Code Coverage Report as a Build Artifact

Now that we have the build tab setup, we need to add the code coverage report as a build artifact, so that the tab is able to display the code coverage report.

Find your TeamCity build that you want to add the code coverage report to and edit the settings
Under the general tab, you will see the Artifacts paths

In the artifacts path add the following:

coverage => coverage
cypress\videos => cypress\videos
cypress\screenshots => cypress\screenshots

Click the save button

Add Failure Metrics

Steps to add failure metrics

Note that the failure conditions below use 1% but you can change that to the percent that you want to allow

Find your TeamCity build that you want to add the failure conditions to and edit the settings
On the left sidebar, click on the Failure Conditions
Click on the Add failure condition button and select “Fail build on metric change”
For ignored tests failure: select Fail build if to number of ignored test and set is more by at least 1 percent and click save
For number of tests failure: select Fail build if to number of tests and set is less by at least 1 percent and click save
For code coverage percent failure: select Fail build if to percentage of statement coverage and set is less by at least 1 percent and click save

Add Build Step

The last thing we need to do is tell TeamCity to run our cypress tests with code coverage as part of the build.

Since we create the npm script ci earlier, it is really quick to add our build step to TeamCity. We just need to create a build step that runs a command line and calls npm run ci

Warning: if you are planning to take the output of the build step and deploy it to production, you will want to have a production build that does not contain the instrumentation for code coverage as the code coverage will drastically slow down your code as it examines every line of code that is called.

Angular - Add Code Coverage to Your Cypress Tests

Justin James — Thu, 02 Dec 2021 13:00:00 +0000

Welcome to part one of our two part series on Angular code coverage for Cypress tests.

As I have implemented more automated tests, one of the must haves for me is code coverage reports. Code coverage allow me to quickly and easily see which lines of the code are not being tested so I can close any critical testing gaps.

Today, I am going to be talking specifically about how to implement code coverage for an Angular project that was generated from the Angular CLI.

Generate Our Sample Project

Before getting started, we need to generate our sample project using the Angular CLI.

ng new CypressCodeCoverageDemo --style scss --routing

Adding Cypress

Now we need to add Cypress to our project

Navigate to the CypressCodeCoverageDemo folder that the ng new command created for us.
```
cd CypressCodeCoverageDemo
```
Now we need to install Cypress as a development dependency
```
npm install --save-dev cypress
```
Once Cypress is installed, we need to initialize Cypress by running
```
npx cypress open
```

The Cypress open command will:

create the cypress directory structure
create a cypress.json configuration file in the root of your project
create a set of sample tests in the cypress\integration\examples folder

You can now close the Cypress UI.

You can also safely delete the cypress\integration\1-getting-started and 2-advanced-examples folders as they are just examples and we won’t be using them.

Dependencies

We will be using the Cypress code coverage plugin to generate the code coverage reports. Install it from npm as a development dependency by running:

npm install --save-dev @cypress/code-coverage

Instrumenting Your Code

In order for you to gather code coverage metrics, the code coverage needs to know which lines of code are being touched by the tests. This is called instrumenting your code.

Cypress does not instrument your code - you need to do it yourself. We will be using the Istanbul library along with the command-line interface for the Istanbul library, nyc.

npm install --save-dev @istanbuljs/nyc-config-typescript babel-plugin-istanbul istanbul-lib-coverage nyc source-map-support

Since we are using Angular, we also need to inject the command to instrument our code as part of the Angular build process (ng build). By default with the Angular CLI there is no way to inject anything extra into the webpack configuration when you build or serve your application but luckily we can use ngx-build-plus to inject the extra webpack configurations as part of the normal Angular build and serve commands.

WARNING: Never run the build with the code coverage instrumentation as your production build (e.g ng build –prod). It will cause major performance issues since it tracks each line of code that is called.

To install npx-build-plus run:

ng add ngx-build-plus

This will install ngx-build-plus and configure angular.json for ng serve and ng build to use ngx-build-plus

Adding Webpack Config

Once npx-build-plus is installed, we need to add the configuration that we want webpack to use.

Open the CypressCodeCoverageDemo folder in your favorite code editor. Personally, I am using Visual Studio Code
Create a new file in the Cypress folder called coverage.webpack.js

Add the following code to the coverage.webpack.js file.

module.exports = {
 module: {
 rules: [
 {
 test: /\.(ts)$/,
 use: {
 loader: 'babel-loader',
 options: {
 plugins: ['babel-plugin-istanbul']
 }
 },
 enforce: 'post',
 include: require('path').join(__dirname, '..', 'src'),
 exclude: [
 /node_modules/,
 /cypress/,
 /(ngfactory|ngstyle)\.js/]
 },
 ],
 },
};

Configuring the Code Coverage Report

Next up we need to configure the nyc command line interface for the Istanbul library that determines how our code coverage report is generated.

Open the package.json file

Add a new section at the bottom before the closing } bracket.

"nyc": {
 "extends": "@istanbuljs/nyc-config-babel",
 "all": true,
 "exclude": [
 "**/cypress/**",
 "**/coverage/**",
 "karma.conf.js",
 "src/test.ts",
 "**/*.spec.ts"
 ],
 "reporter": [
 "html"
 ]
}

The exclude above just makes the report cleaner by not including directories and files that are related to testing and not the actual production code!

Configure Cypress Code Coverage Plugin

Earlier, we installed the cypress code coverage plugin but we haven’t told Cypress about the plugin yet. To use the code coverage plugin, we need to wire it up in the cypress/plugin/index.js and cypress/support/index.js files.

Open the cypress/plugin/index.js file and add the following code inside of the module.exports:

 require("@cypress/code-coverage/task")(on, config);
 return config;

Open the cypress/support/index.js file and add the following code:

import '@cypress/code-coverage/support';

Creating Our First Test

Before we can test our code coverage, we need to create a tests for our Angular application. We are going to create a simple tests that navigates to the home page and makes sure that the H1 tags has the correct text.

In the cypress/integration folder, create a new file called homepage.spec.js

In the homepage.spec.js file, add the following text

describe('Sample Tests for the Home Page', () => {
 it('Does Home Page Load', () => {
 cy.visit('/');
 cy.get(".highlight-card > span").should(
 "contain",
 "CypressCodeCoverageDemo app is running!"
 );
 })
});

Generating the Code Coverage Report

We are almost ready to ready to run our code coverage.

The last thing we need to do before running our tests is to tell Cypress what the url for our Angular application is (e.g. localhost:4200)

open the cypress.json file in the root of your Angular project
Add the baseUrl value instead of the {}
```
"baseUrl": "http://localhost:4200"
```

Now we are ready to run our tests.

First we need to start up the Angular Dev Web Server with ng serve and tell it to include our extra webpack configuration

Within Visual Studio Code, open the Integrated Terminal (Ctrl+`)
Run the following start the Angular Dev Web Server with the Code Instrumented by running
```
ng serve --extra-webpack-config ./cypress/coverage.webpack.js
```

Second, we need to start up the Cypress UI with code coverage enabled.

Within the Integrated Terminal click the + button to create a 2nd terminal
To run, Cypress with code coverage by running the following:
```
npx cypress open --env coverage=true
```
When the UI launches, cl;ick on the “Run 1 integration spec”
When the test runs, it will create a coverage report as well as if you look at the log for the 1 tests that we have, will see 3 messages about the code coverage.

Viewing Code Coverage Report

Once all of your tests are done running, you can find the coverage report in the root of your project in the coverage\index.html file.

The two numbers that I typically look at are lines and statements. Lines says has the line been touched while statements says has every statement on the line been touched by a test. For example var x = 10;console.log(x) is 1 line and 2 statements.

You can also click on any folder or file and drill down in to see which lines of code were covered and which lines were not covered.

Recap

Lets do a quick recap of what we accomplished.

Installed the Cypress Code Coverage plugin
Added instrumentation dependencies of istanbul and nyc
Added an extra webpack config to call babel-plugin to instrument your code
Updated the Angular build to use ngx-build-plus
Configured the Cypress Code Coverage plugin
Generated the code coverage report
Reviewed the code coverage report

The code for this article is available at https://github.com/digitaldrummerj/angular-cypress-code-coverage-example

In our next article, we will add the running of the code coverage report to TeamCity builds, set up failure metrics, and be able to view the report within TeamCity.

Schedule Post with Hugo and Netlify

Justin James — Tue, 30 Nov 2021 12:00:00 +0000

Being able to schedule a post is one of the features that I miss when using Hugo for a site.

Out of the box, Hugo has no way to schedule a post as it is a static site generator which means that when you build the site the html is generated and only updated when you build the site again.

The manual workaround for the scheduling of post is to create a published post with a future date on it and then on that day, rebuild and redeploy your site. Even though this works, it depends on me to remember to do it vs it being automatic which is what I personally want. I do not want to have to remember to build and deploy the site on the day that I want a post to be published. If it depends on me, then changes are that I am going to forget or get busy and the post won’t get published when it is supposed to be.

Luckily, since I am already using Netlify to build my Hugo site and with the code for the site residing on Github, I can easily create a scheduled Github action that triggers the Netlify build for me.

The Github action will run on a set schedule. For this site, I decide to have it run every day at 6 am PST. This allows me to publish a post 7 days a week if I needed to. I am using the free tier of both Github and Netlify but since the builds run so quickly (< 60 seconds), I am not worried about running out of build hours.

Also, the reason that we need to use a Github action instead of just directly scheduling the build in Netlify is that at this time, Netlify does not have the ability to schedule a build. However, Netlify does allow you to trigger a build with a REST POST call. This means thst we can create a Github action that use curl to make this POST call.

To make all of this work, in Netlify we need to add the build hook that allow us to make the post call, then we need to setup a Github secret with the Netlify token for the build hook, and finally we need to create the Github action that calls the Netlify build hook and gets the token from the Github secrets.

Setup Netlify Build

I am assuming that you already have your Netlify build working to build and deploy your Hugo site.

To enable a Netlify build to be triggered using a REST POST command, we need to add a build hook.

In Netlify under your site that you want to trigger the build for go toSite Settings -> Build & Deploy -> Continuous Deployment
Find the Build Hooks section.
Click the “Add Build Hook” button
Give the build a name such as “Github Scheduled Build”
Pick the Branch to Build (typically main)
Click the Save button

After you save the build hook, Netlify will give you a url for the build such as https://api.netlify.com/build_hooks/123456789 where the 123456789 is the Netlify token for the build that we will add into our Github secrets.

It will also allow you to trigger the build from the command line using curl -X POST -d {} https://api.netlify.com/build_hooks/123456789

The token should be kept in your build secrets and not stored with your code or Github action.

We are now ready to head over to Github to setup our secret for the Netlify token.

Stores Netlify Token in GitHub

In Github, go to the repository for your Hugo site and then:

Click on Settings
Click on secrets
Click the “New repository secret” button
Give it a name. In the example Github action below, I called the secret for the token, NETLIFY_CRON_BUILD_HOOK
Copy the Netlify token to the value field
Click the Add Secret button

Now you are ready to create the Github action to call the Netlify build hook to trigger the build.

Create GitHub Action

The Github action is pretty simple. It runs every day at 6 am PST (1 pm UTC) and calls the Netlify build hook.

Note: Github scheduled actions run in UTC time

To create the Github action follow these steps:

Under your Hugo site, create a directory named .github/workflows
In the workflows directory, create a file named schedule.yml

Copy the following code to the schedule.yml file

name: Daily Schedule

on:
 schedule:
 - cron: "0 13 * * *"

jobs:
 build:
 runs-on: ubuntu-latest
 steps:
 - name: Trigger our build webhook on Netlify
 run: curl -s -X POST "https://api.netlify.com/build_hooks/${TOKEN}"
 env:
 TOKEN: ${{ secrets.NETLIFY_CRON_BUILD_HOOK }}

Commit and push the .github directory

Now your Hugo site will be updated every day at 1 pm UTC (6 am PST) when the Github action runs.

Create Post To Be Scheduled

Now that we have the Github action, to create a scheduled post, all you need to do is set the meta data on the post for published to true and the date of the post to be on the day in the future that you want the post to go live (make sure the time is before 6 am PST).

Here is an example of the data for this post that will be published on November 24, 2021 at 12 pm

—
categories: [“hugo”]
published: 2021-11-24T12:00:00Z

title: Schedule Post with Hugo and Netlify
—

Now you can schedule your post on your Hugo based site.

Migrating Angular from tslint to to eslint

Justin James — Tue, 23 Nov 2021 13:00:00 +0000

Since the Angular CLI was released it has included linting using the ng lint command. With the release of Angular v11 it was announced that tslint which ng lint used behind the scenes for the linting was being replaced with eslint.

To make the migration to eslint easier for your existing project they created a couple of tools that automate almost the whole migration process for us.

I was able to finish the migration start to finish in about 30 minutes.

Installing Dependencies

The first step is to add the @angular-eslint schematic to your project. This schematic will handle installing the latest version of all the relevant devDependencies to your package.json so that you can run eslint.

ng add @angular-eslint/schematics

This will install the latest package which is compatible with Angular v13 (as of this writing). If you need a version that is compatible with a previous Angular version you can add a @ at the end followed by the major Angular version number. For example for Angular v11 use ng add @angular-eslint/schematics@11 and for Angular v12 use ng add @angular-eslint/schematics@12

You are now ready to do the actual migration.

Running the Migration

To make the migration easier they created another schematic that automates pretty much the whole migration for us.

If you just have a single project in your workspace you can just run:

ng g @angular-eslint/schematics:convert-tslint-to-eslint

Make sure to install the same major version of this schematic using the same @ trick as above.

If you have a projects/directory or similar in your workspace, you will have multiple entries in your projects configuration and you will need to chose which one you want to migrate using the convert-tslint-to-eslint schematic:

ng g @angular-eslint/schematics:convert-tslint-to-eslint {PROJECT_NAME}

Make sure to install the same major version of this schematic using the same @ trick as above.

The schematic will do the following for you:

Read your project’s tslint.json and use it to create a .eslintrc.json at the root of the specific project which extends from the root config (if you do not already have a root config, it will also add one automatically for you).
- .eslintrc.json will be the closest possible equivalent to your tslint.
- Keep an eye on the terminal output because it will let you know if it couldn’t find an appropriate converter for a tslint rule, or if it has installed any additional eslint plugins.
Update the project’s angular.json so that lint will use eslint.
Update any tslint:disable comments that are located within your TypeScript source files to eslint equivalent if possible.
If you choose YES for the –remove-tslint-if-no-more-tslint-targets option, it will also automatically remove tslint and codelyzer for you.

You are now ready to test that linting still works.

Test Linting is Still Working

Now that we have updated to eslint we need to make sure that the linting configuration is working.

To run linting on your project you still use the ng lint command like you did before.

If you have a single project you can just run:

npx ng lint

If you have multiple projects, you need to tell ng lint which project to lint:

npx ng lint {PROJECT_NAME}

You may still need to manually fix some configurations. The linting output will throw errors for anything that it cannot figure out what to do with that needs manual intervention.

For my projects, it migrated 99% of the linting configuration. I only had a couple of places in my code where I had an inline tslint:disable rule that the migration was not able to figure what to do with.

Disabling Rules That You Do Not Want

You might also decide that you want to alter a built-in rule after you run ng lint.

The first time I ran ng lint after the migration, I had a like 100 warnings about empty Angular lifecycle events which meant that I had ngOnInit or other Angular lifecycle methods that had no code within the method.

For me this rule did not provide any value to use so my project decided to disable the rule by adding it to the .eslintrc.json overrides rules configuration.

To disable the the Angular empty lifecycle event rule, you need to add it to the overrides rules section in your .eslintrc.json configuration file.

{
 "overrides": [
 {
 "rules": {
 "@angular-eslint/no-empty-lifecycle-method": "off"
 }
 }
 ]
}

If you have any other rules that are flagging that you want to adjust, you can add them to the overrides rules. You might

Now your project is migrated to eslint and your linting command will continue to run as it always has.

Solved: Angular RxJs Debounce Not Consistently Firing When Testing With Cypress

Justin James — Thu, 18 Nov 2021 13:00:00 +0000

In your Angular application if you are using RxJS Debounce and running Cypress test you may have run into times that your tests are not consistently getting past the debounce wait time and appear like they are flaky tests.

Debounce is a way to wait X number of milliseconds for something to happen before continuing such waiting for a user to stop typing in a field before making an API call. This way you are not making an API call for each character typed into the field.

In Cypress, you could just use a wait statement to get past the debounce time but adding time based wait statements in Cypress is an anti-pattern.

Instead in Cypress you should use the cy.clock() and cy.tick() commands to be able to forward the virtual time and cause debounce to fire. However, I found it was not consistently getting past the debounce. RxJS was acting like we had not waited for the debounce time.

Luckily, after much troubleshooting the solution ended up being quite simple and only involved test code changes.

Broken Code

In the code below, after the cy.tick(501) we would find that the call to the API never happened so it would fail on the wait statement. We also noticed that this tended to pass when running locally on our dev machines but would fail on our CI servers. This made it really difficult to replicate and troubleshoot since it appeared to be some kind of a race condition where our dev machines would run slower than our CI servers were.

cy.clock();
cy.server();
 cy.route({
 url: '/api/v1/collections/*',
 method: 'GET',
 status: 200,
 response: 'false'
 }).as('nameCheck');

cy.get('[data-cy="collectionTitle"]')
 .type(txtMax255)
 .tick(501)
 .wait("@nameCheck");

Working Code

The fix was pretty easy once we understood what we happening. With cy.clock() it overrides the native global functions related to time allowing them to be controlled synchronously via cy.tick(). This includes controlling:

setTimeout
clearTimeout
setInterval
clearInterval
Date objects

Overriding the setTimeout, clearTimeout, setInterval, and clearInterval is where the issue came in since those are key to the way debounce works. So we just needed to set the date and override the Date object.

In the working code below, the only change that we made from the broken code above was to change cy.clock() to cy.clock(new Date(), ['Date']); and then our debounce worked as expected.

cy.clock(new Date(), ['Date']);
cy.server();
 cy.route({
 url: '/api/v1/collections/*',
 method: 'GET',
 status: 200,
 response: 'false'
 }).as('nameCheck');

cy.get('[data-cy="collectionTitle"]')
 .type(txtMax255)
 .tick(501)
 .wait("@nameCheck");

Now all of our debounce calls are working as expected in our Cypress tests.

Solved: Use Previous Version of Chrome to Prevent Instant Cypress Crash on Our Build Servers When Using Chrome 95

Justin James — Mon, 15 Nov 2021 13:00:00 +0000

Recently, on my build servers, the Chrome version update to Chrome 95 and all of a sudden my automated builds stopped being able to communicate between Cypress and Chrome and would instantly cause Cypress to crash on the 1st test when using cypress run. We could login to the machine and run all of the tests using Chrome as a headed browser but anytime we tried to use Chrome as a headless browser it would instantly fail the build on the 1st tests.

We have seen other random issues like this show up with Chrome updates in the past and previously the fix was to disable the Chrome auto-update feature and then install a previous version of Chrome. This was a hack though as there is no supported way to downgrade Chrome.

Thankfully, there is an easier way by using a custom browser when running Cypress. Cypress even maintains a Chromium repository so that you can easily download previous versions of Chrome.

The first step to running a custom browser with Cypress is to download the previous version of Chromium that we wanted to use for our tests. To download a previous version of Chromium, you need to navigate to Cypress Chromium Site.

Note: All of the download links on the Cypress Chromium site point directly to Google so you are downloading real versions.

On the Cypress Chromium Site I recommend that you filter the “Release Channel” by stable so that you only get the versions that have been released to production. You can also filter by the version that you are looking for to make it easier to find the version you want.

Once you find the version that you want, click on the “Get downloads” link and then download the zip file.

Once the download is complete, unzip it to a directory. I like to unzip it into c:\Chromium (I am on Windows) since I can be sure that all of my co-workers and build server will have directory available.

Now to use the custom browser with cypress run you to give the location of the custom browser as the browser name in the --browser argument.

npx cypress run --browser C:\Chromium\94.0.4606.81\chrome.exe --headless

Now Cypress will use the browser located at “C:\Chromium\94.0.4606.81\chrome.exe” when it executed the tests.

You can also use the custom broswer with cypress open by using the same --browser argument that we used with the run command above but without the —headless argument.

npx cypress open --browser C:\Chromium\94.0.4606.81\chrome.exe

Cypress - How to run the same test again and again to confirm it is flake-free

Justin James — Thu, 11 Nov 2021 00:00:00 +0000

So far with the Cypress grep plugin we have looked at how to run tests with certain tags, how to run tests that have no tags, and how to increase the performance of the plugin when running filtered tests.

In this post, we are going to look at how to run tests multiple times to ensure that they are flake free. I have several times run into issues where we think a tests is working great only to find out if you run it a 2nd time that it fails or causes other tests to fail since Cypress without the Cypress grep plugin will only run each passing tests once.

In the initial Cypress Grep post in this series we installed and setup the Cypress grep plugin. If you do not have the Cypress grep plugin installed and setup, you will need to go through that post before continuing.

As we saw in the previous post, we can filter our Cypress tests with the Cypress grep plugin like so:

// enable the tests with tag "one" or "two"
npx cypress run --env grepTags="one two"

// enable the tests with "hello" in the title
npx cypress run --env grep=hello

Now in order to tell the Cypress grep plugin to run the tests a certain number of times we need to add the burn argument and tell it the number of times to run.

For example, to run each tests 5 times, we would use the argument burn=5 like so:

// enable the tests with tag "one" or "two"
npx cypress run --env grepTags="one two",burn=5

// enable the tests with "hello" in the title and tag "smoke"
npx cypress run --env grep=hello,burn=5

You might also be asking yourself why not just use the test retries. Test retries is used when a tests fails and you want to see if a rerun of the tests makes the tests pass but if the tests passes the first time it will not run the tests a second time. With the burn option of Cypress grep, it will run the tests the number of times you tell it to regardless if it passes or not.

Cypress Grep - Faster Test Execution

Justin James — Mon, 08 Nov 2021 00:00:00 +0000

By default, for the Cypress grep plugin when using the grep and grepTags all of the specs are executed and then each the filters are applied. This can be very wasteful, if only a few specs contain the grep in the test titles. Thus when doing the positive grep, you can pre-filter specs using the grepFilterSpecs=true parameter.

Examples

Example 1: To filter all specs first and then only run the suite or tests that match the title “it loads”

npx cypress run --env grep="it loads",grepFilterSpecs=true

Example 2: To filter all spec files and only run the specs with the tag “@smoke”

npx cypress run --env grepTags=@smoke,grepFilterSpecs=true

Notes

Note 1: this requires installing this plugin in your project’s plugin file like we did in our first Cypress Grep Plugin post.

Note 2: the grepFilterSpecs option is only compatible with the positive grep and grepTags options, not with the negative “!…” filter.

Note 3 if there are no files remaining after filtering, the plugin prints a warning and leaves all files unchanged to avoid the test runner erroring with “No specs found”.

Tip

You can set this environment variable in the cypress.json file to enable it by default and skip using the environment variable:

{
 "env": {
 "grepFilterSpecs": true
 }
}

By implement the grepFilterSpecs, you will get much better performance from Cypress grep as your tests suite grows in size.

Cypress Run Tests That Do Not Have Any Tags

Justin James — Wed, 03 Nov 2021 00:00:00 +0000

In the previous post on the Cypress Grep Plugin we installed and went through the basics of how to run just tests that have certain tags but what if you want to run all tests that do not have any tags?

Luckily, it is really easy to run all tests that are not tagged by using the grepUntagged=true parameter when running Cypress.

 npx cypress run --env grepUntagged=true

Cypress Run Tests That Have Certain Tags

Justin James — Mon, 01 Nov 2021 09:00:00 +0000

One of the features that I wish Cypress had is a way to group feature tests together so that I can run all tests for the feature I am currently coding or testing without having to put them all into the same spec file. Now you can with the Cypress grep plugin.

Usage

With the Cypress grep plugin, you can add a tags config to each tests or describe like below that then you can use to only run tests with those tags.

it('works as an array', { tags: ['config', 'some-other-tag'] }, () => {
 expect(true).to.be.true
})

it('works as a string', { tags: 'config' }, () => {
 expect(true).to.be.true
})

describe('block with config tag', { tags: '@smoke' }, () => {
})

Then when you call Cypress run you can use the –env parameter to filter the tests like so

// enable the tests with tag "one" or "two"
npx cypress run --env grepTags="one two"

// enable the tests with both tags "one" and "two"
npx cypress run --env grepTags="one+two"

// enable the tests with "hello" in the title and tag "smoke"
npx cypress run --env grep=hello,grepTags=smoke

// run all tests with "hello world" or "auth user" in their title
$ npx cypress run --env grep="hello world; auth user"

Install

Assuming that you have Cypress already installed, you add the Cypress grep plugin as a dev dependency.

npm install --save-dev cypress-grep

Support File

Once the npm install is completed, you need to add it to the support file.

Open the support/index.js file and add the following line

// cypress/support/index.js
require('cypress-grep')()```

Plugin File

Load and register the Cypress grep module in the plugin/index.js file.

// cypress/plugins/index.js
module.exports = (on, config) => {
 require('cypress-grep/src/plugin')(config)
 // make sure to return the config object
 // as it might have been modified by the plugin
 return config
}

By adding the module to the plugin file, when you run tests with Cypress grep it will print out a message on load such as

$ npx cypress run --env grep=hello
cypress-grep: tests with "hello" in their names

You are now ready to start using the Cypress grep plugin.

In a future post we will look at some of the other features of the Cypress grep plugin such as how to increase the performance by pre-filtering or run tests multiple times.

Angular - Running SSL Locally

Justin James — Thu, 30 Sep 2021 00:00:00 +0000

These days all of our websites are running using https and we should be doing our local development work also using SSL. When you create your Angular project, it uses http by default but has the ability to easily run uder SSL as long as your have a certificate for Angular to use.

Luckily, it is really really easy to generate our own self-signed certificate to use for local development. A self-signed certificate just means that you personally signed the certificate to say it is valid and not one of the trusted authorities on the Internet which is why self-signed certificates only work for your local development.

In this article we will create your own self-signed certificate, tell Windows to trust our certificate and tell Angular to use our certificate for our local development work.

Creating the Certificate

Create a file called certificate.config with the following content

[req]
default_bits = 2048
prompt = no
default_md = sha256
x509_extensions = v3_req
distinguished_name = dn

[dn]
C = US
ST = AZ
L = Phoenix
O = My Organization
OU = My Organization Unit
emailAddress = email@domain.com
CN = localhost

[v3_req]
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost

Next, we can use OpenSSL to create the certificate. I’m doing this on Windows using Git Bash and using the following command:

openssl req -new -x509 -newkey rsa:2048 -sha256 -nodes -keyout localhost.key -days 3560 -out localhost.crt -config certificate.config

The output of the openssl command should look like

Running Angular CLI using https

Now that we have our certificate files, it is simple to configure Angular CLI to use these certificates to serve over https. Since these a self-signed certificates, I stored the certificates in a certs folder under my Angular project directory.

To run ng serve with ssl using

ng serve --ssl --ssl-key .\\certs\\localhost.key --ssl-cert .\\certs\\localhost.crt

Now open your browser and navigate to https://localhost:4200

When you navigate to the URL in Google Chrome you will be presented with the following warning about the connection not being private.

This warning is due to us using a self-signed certificate that is not in the Trusted Root Certification Authorities store. Now you can click the advanced button and then proceed to the site but frankly that is annoying to have to do everytime.

Trusting the certificate on Windows

To get past the Chrome warning about the connection not being private we need to the certificate that we created earlier to the Trusted Root Certification Authorities store.

Navigate to the certs directory under our project and open up the localhost.crt file
Click on the Install Certificate button
When the Certificate Import Wizard comes up, select Current User as the Store Location and click Next
Select “Place all certificates in the following store” then click the Browse button and select “Trusted Root Certification Authorities” and click Next
Click Finish and you will be presented with a security warning dialog about the self-signed certificate that you need to click Yes to install the certificate
Click Ok to close the Certificate Import Wizard
Click Ok to close the Certificate dialog
Navigate to https://localhost:4200 and your connection should now be secure with the certificate being trusted.

If the certificate is still not trusted, you will need to close all of your Chrome instances and then open back up Chome and go to https://localhost:4200

Now you can do all of your Angular development using SSL just like you will be using in your production environment which will help ensure that everything will work that same when you go into production.

Git - Remove Local Branches That Are Merged or No Longer Exist

Justin James — Sun, 19 Sep 2021 12:00:00 +0000

After a while your list of local git branches can get a bit out of control especially if you doing all of your development on a branch, creating a pull request, merging it to main and then deleting the remote git branch when it is merged into main. Once the branch is deleted on the remote repository there is no need to keep it locally anymore.

Below is the command to delete all local branches that have been merged into the main branch. If you git trunk branch is not main or you want to remove all branches that have been merged into a different branch than main, just change the 2 places in the command that say main to what your branch name is.

Deleting Branches Merged into Main

Open git bash and navigate to your git repository that you want to clean up
Fetch the latest from the git
```
git fetch
```
See the list of local git branches
```
git branch
```

Delete all local branches that have been merged to main branch

git branch --merged main | grep -v "^\* main" | xargs -n 1 -r git branch -d

See the list of local git branches that remain
```
git branch
```

Deleting Local Branches That No Longer Exist on the Remote

Open git bash and navigate to your git repository that you want to clean up
Fetch the latest from the git
```
git fetch
```
See the list of local git branches
```
git branch
```

Delete all local branches that have been merged to main branch

git branch -vv | grep ': gone]' | grep -v '\*' | awk '{ print $1; }' | xargs -r git branch -d

See the list of local git branches that remain
```
git branch
```

VSCode: Bracket Pair Colorization Now Native

Justin James — Tue, 07 Sep 2021 09:00:00 +0000

One of the extensions for VSCode that I have used for the past couple of years is Bracket Pair Colorizer 2 to color each of the bracket pairs a different color so that you can visually see the start/end bracket.

With the VSCode August 2021 (ver 1.60.0) update, this feature is now built into VSCode. You just need to turn it on.

Update VSCode

To get the VSCode August 2021 upgrade for VSCode:

Open VSCode
Click on the Help Menu
Click on Check for Updates or Install Update (if you have a pending a update install)

Turn On Native Bracket Pair Colorization

Once you have the VSCode August 2021 update installed, you need to turn on the native bracket pair colorizer.

In VSCode, go under the File Menu -> Preferences -> Settings
Search for the setting: bracketPair
Click the checkbox to turn on the bracket pair colorization

Uninstall the Bracket Pair Colorization 2 Extension

Now that Bracket Pair Colorization is native to VSCode, you can uninstall the Bracket Pair Colorization.

In VSCode, Click on the Extensions Icon in the left navigation bar
Find Bracket Pair Colorizer 2 in your installed extensions list and click on it
Click the uninstall button
If you look back where you found the extension in step #2, you will see there is a Reload Required button that you need to click to restart VSCode for the uninstall to take full effect.

Solved: Windows 10 Errors When Trying to Watch Video with HEVC Extension Not Found

Justin James — Sun, 19 Apr 2020 00:00:00 +0000

WTF! Why Can’t I Play My Video

So you tried to watch an mp4 video in Windows 10 and it threw an error at you that “To play this video, you need a new codec, HEVC Video Extensions and they want you to pay $0.99 for it. If you are like me, you are wondering what the heck is the HEVC Video Extensions and why all of a sudden do I need it to watch an mp4.

Well, it turns out that at some point Microsoft decided to stop including the HEVC Video Extensions with Windows and wants you to pay for it. Luckily, there is a very easy way to get the HEVC Video Extensions it for free. Microsoft hid another version of the HEVC Video Extension on the Microsoft Store for device manufacturers to install on their desktops and laptops and we can access that version as well.

Get the HEVC Video Extensions

Go to link and click the “Get” button
Then click the Open Microsoft Store button when it prompts you
Click the “Get” button to install the HEVC Video Extension for Device Manufacturers

Happy Video Watching

Now you have the HEVC Extension installed and can watch your videos.

You Need Code Coverage

Justin James — Sun, 12 Apr 2020 00:00:00 +0000

Welcome to the start of my series on code coverage. In this article we are going to talk about why you need code coverage reports and then in future articles implement the reports in our Angular based UI and ASP.NET Core based API.

For years, I pushed back against implementing code coverage on my projects and I am here to say that I was wrong. In the past everytime someone tried to implement code coverage on my projects or suggested it, all they cared about was the percent of code coverage. Code coverage for just the sake of code coverage doesn’t create high quality tests or products, it just creates tests to increase code coverage. When code coverage is used to drive the priority of what to test, used to validate that the tests actually covered the lines of code you thought it covered and catching times when you add more code than test code.

So what drove me to make this change and believe that code coverage is valuable? Recently, I took on the role of leading our Test Automation Team (TAT) as we transition from heavy manual testing to mostly automated testing. Until mid-2019 when we had a management change at the executive level of my organization, automated testing wasn’t fully valued and when push came to shove the first thing to drop from the priority list was the automated testing. As a development team we always believed that automated testing was valuable and oushed to make it a priority it but it wasn’t a true priority until this year when we decided to kick off a dedicated team.

Even though automated testing wasn’t a priority from a management standpoint in the past, from a development team standpoint we had always valued it and been creating automated tests as much as we could. At the time of the management change in mid-2019 we had 750 API tests and 0 UI tests. Over the last half of 2019, I had many discussions with management about automated testing and the plan moving forward since it was supposedly valued now but we weren’t really allocating time to it. If we truly valued testing that we needed to allocate time to it. Time not just to create the tests but time to create an actual strategy that the team could get behind, time to create an end to end testing environment, and time for someone to drive the automated testing strategy.

So at the start of 2020, it was finally decided to make testing truely a priority and kick off a scrum team dedicated to automated testing consisting of 3 Developers, 1 Quality Assurance Engineer, a Product Owner and a Scrum Master. One of the first questions was how do we measure that we are making progress in our automated testing journey. At the start of 2020, we now had 850 API tests and 250 UI Tests but we were blind to how much of our code was actually being covered. This is where code coverage was very helpful.

Once you have code coverage implemented, you can get reports generated for you such as:

The report shows me a quick summary at the top of the amount of code coverage (33.66% covered) and then I can drill into each file to see what lines are covered and not covered. For the summary section, the important number is the lines (the last one in the list) as this is the totally number of lines of code that is touched by a tests.

Now that I know where we are at in our test coverage, it allows me as the product owner to make data-driven decisions on which set of tests need to be created. I can drill in and see what portions of our critical features are being tested and seeing where the gaps might be. The development team can also use the coverage report when they add new code to ensure they have good code coverage.

Again, the ultimate key to making code coverage reports useful like I am using them is to not use them in a draconian way by forcing a random code coverage percent to be hit. The goal is to make the code better, not to hit some random code coverage metric.

I would encourage you to give code coverage reports a try on your project and use them to make data-driven decision on if you have enough automated tests or not for a given feature.

In the next article in the series, we will implement the code coverage report for our Angular based UI that is using Cypress to test the UI.

Stop The Zoom Trolls and Prevent Zoombombing

Justin James — Tue, 07 Apr 2020 06:00:00 +0000

Are you thinking about running a public meeting using Zoom or are running a public meeting using Zoom? Then you need to prepare for the Zoom Trolls to show up who want nothing more then to force you to end your meeting early. Our goal today is to limit the amount of damage that a troll can do to your meeting to almost nothing while still allow your community to network and grow.

If you think that a Zoom Troll won’t find your meeting, think again. There are already programs available to generate Zoom meeting numbers and auto join those meeting. So it is just a matter of time before they find your meeting. These Zoom Trolls have become such an issue that even the FBI is warning people about. When a Zoom Troll joins your meeting they cause disruptions by sharing porn that is on their screen, draw on the screen using the annotation feature, unmute themselves to talk over the presenter using inappropriate/offensive language and bring inappropriate on camera.

We can easily minimize the ability of a Zoom Troll to cause any damage to your meeting using the Zoom settings below.

Zoom Account Settings

Once your are logged into your Zoom account, go under Account and Setting:

Turn off Join before host.
Turn on Mute participants upon entry. This set the default to ensure that an attendee doesn’t show up and immediately disrupt the meeting.
Turn on Allow Host to Add Co-Host. This will allow you to add other organizers or moderators at host of the meeting to have the same meeting controls as you do.
Turn on Allow host to put attendee on hold.
Set Screen Sharing to Host Only so that participants can’t share
Turn off Annotations (this is drawing on the screen)
Turn Off Whiteboard (this is the sharing of a whiteboard)
Turn On NonVerbal Feedback (this adds options to chat such as Raise Hand, Yes, No, etc)
Turn Off Allow removed participants to rejoin. If you kick an attendee, you want them to stay out of the meeting.
Turn Off Virtual Background to ensure that they don’t put an inappropriate background image behind themselves.

Scheduling a meeting

When scheduling a meeting there aren’t many options you can set but there are a few important ones.

Generate the Meeting ID and DON’T use your personal meeting ID
Require meeting password. In the Zoom link you can include the password but it will at least stop people from entering the room that didn’t get the official link.
Don’t Allow Join Before Host. First person in is the host so you don’t want a participant to be a host.
Mute Participants on Entry. This ensure that anyone joining the meeting is automatically muted.
Set to Auto Record the meeting so that you don’t forget and record to the cloud.

Running the Meeting

In the Participants panel, at the start during networking time allow participants to unmute themselves. Open the Participants panel and click the more button
During the presentation, mute all participants and don’t allow them to unmute themselves. Use the nonverbal feedback so they can signal that they have a question so you can unmute them. This stops a troll from being able to just randomly unmute themselves.
- Open the Participants panel, click on mute all and click the more button to uncheck the allow participants to unmute themselves.
In the participants panel, under the more option uncheck Allow Participants to Rename Themselves
In the participants panel, as the host you need to promote all of your other organizers and the presenter to co-host so they can share their desktop and moderate the meeting. Right click on each participant that you want to promote to co-host and select the co-host option.

With these settings in place it is much harder for a troll to disrupt and destroy your meeting. While at the same time still allowing you to build and grow your community.

The only trolling that they will be able to do is to be inappropriate on camera. If this happen, in the participants panel, right-click on the person and turn off their camera.

Happy Zooming!

Git: Clone Branch to New Repo without History

Justin James — Mon, 06 May 2019 00:00:00 +0000

For my Angular workshop repository I wanted to clone the final branch without any history to a new repository so that I could try out some different technologies but I didn’t want to polute the workshop repository.

Luckily, we can do this using the git clone command.

Command

Here is the basic command. Replace “Branch Name” with the name of your branch, “Git Repo” with the url to your Git repository, and “Folder Name” to the directory that you want to clone the branch into.

git clone --depth 1 --branch "Branch Name" "Git Repo" "Folder Name"

Example

Here is the actual command that I used to clone the chapter-ui-tests branch from https://github.com/angular-tutorial-code repository to the directory percy-cypress-example

git clone --depth 1 --branch chapter-ui-tests https://github.com/angular-tutoral-code percy-cypress-example

Now we have a new repository that is a clone of our branch with only the last commit in the history.

Which RxJS Operators to use in your NgRx Effects

Justin James — Tue, 30 Apr 2019 00:00:00 +0000

When creating NgRx effects you need to decide which RxJS operators to use. There are a lot of RxJS operators but the ones that we are going to use are: mergeMap, concatMap, exhaustMap, and switchMap. Each of these have recommended use cases in order to avoid race conditions.

Operator Explanation

Before we look at when to use each of the operators, lets look at what each of the operators does.

mergeMap: subscribe immediately, never cancel or discard
concatMap: subscribe after the last one finishes
exhaustMap: discard until the last one finishes
switchMap: cancel the last one if it has not completed

Operator Usage

Now lets look at when to use each of the operators

mergeMap: deleting items
concatMap: updating or creating items
exhaustMap: non-parameterized queries
switchMap: parameterized queries

By following these recommendations on usage, you will avoid race conditions within your effects.

Download .gitignore with a .NET CLI Global Tool

Justin James — Tue, 06 Nov 2018 00:00:00 +0000

If you are using Git as your version control system, you need a .gitignore file to keep all of those user specific files out of Git like the bin/obj directories. You could manually create and configure the .gitignore file but why do it yourself when others have already done it for you. A quick search and you will run across the gitignore repo where you could download a premade file but what about if you had a tool to do this for you?

This is where .NET CLI Global Tool dotnet-ignore comes into play. This tool allow you to easily see a list of preconfigured .gitignore files from this repo and then download the one you need.

The first thing you need to do is install the dotnet-ignore tool:

dotnet tool install -g dotnet-ignore

Now that it is installed you can see the available commands by viewing the help:

dotnet-ignore -h

You will notice that there are two commands available: get and list.

When you run the list command it will show you all of the available .gitignore file

dotnet-ignore list

Once you find the one that you need in the list, you will run the get command to download it by using the -n parameter to specify the name.

dotnet-ignore get -n "Git Ignore Name"

To download the Visual Studio .gitignore file run

dotnet-ignore get -n visualstudio.gitignore

By default the .gitignore file is placed into the directory that the command is run from. If you want it in a different directory use the -d parameter.

Just like that you have your .gitignore file. Way better than manually searching for it and downloading it.

Dotnet CLI Global Tools Are Awesome!

Justin James — Mon, 05 Nov 2018 00:00:00 +0000

With the release of .NET Core 2.1 the .NET Core CLI includes a feature called Global Tools that provides a simple way to create and share cross-platform console tools.

When you install a global tool, the CLI will download a special NuGet package that contains a console application and make your console tool available as a new command from the command line.

Note: You will need to download .NET Core 2.1 to use this to try this on your own.

To install a global tool you execute “dotnet tool install”. For example to install the “amazing-tool” you would run:

dotnet tool install -g amazing-tool

Once you have the “amazing-tool” installed, now you can run it from the command line. The -h used below is the standard for seeing the help.

amazing-tool -h

Unfortunately, one of the features that is missing though is the ability to search a registery of all of the available tools out there. I did find a really nice list of tools from Nate McMaster at https://github.com/natemcmaster/dotnet-tools

In our next article, we will start to take a look at a few of the global tools that I am using.

How to Download and Extract a Zip File with Node

Justin James — Wed, 07 Feb 2018 00:00:00 +0000

Downloading and extracting a zip file using Node seemed like a pretty easy task but alas it took some time to figure out.

While researching how to do this, I didn’t find a library that had all of the requirements within it but I did find a few that allowed me to meet the requirements

Requirements

Download zip file from a url
Extract zip file to a directory location
Extract a single directory and all of its sub-directories within the zip file

Downloading the Zip File

Step 1 was to get the zip file downloaded using Node and make sure that I could manually open it. To download the zip file, I am using the superagent package and piping the download to a file using fs.

Install superagent package
```
npm install --save superagent
```

Using superagent along with fs we can download a zip file and save the zip to a local file. In the code below, I am downloading the zip for the master branch of the Github repo located at https://github.com/digitaldrummerj/node-zip-download-sample.

There are “TODO” statements in the code below for the things that you would need to change to use this code for your own zip file.

'use strict';

// Import
const request = require('superagent');
const fs = require('fs');

// TODO: change to where your zip file is located
const repoName = 'node-zip-download-sample';
const href = `https://github.com/digitaldrummerj/${repoName}/archive`;
const zipFile = 'master.zip';

const source = `${href}/${zipFile}`;

// TODO: change to the directory instead of the zip that you want to extract
const extractEntryTo = `${repoName}-master/`;

// TODO: change to the directory where you want to extract to
const outputDir = `./${repoName}-master/`;

request
 .get(source)
 .on('error', function(error) {
 console.log(error);
 })
 .pipe(fs.createWriteStream(zipFile))
 .on('finish', function() {
 // add code below to here
 });

Now that the zip file is downloaded we can unzip it.

Unzipping the Zip File

For unzipping, I didn’t find anything built into Node but I did find the Adm-Zip package on NPM.

Adm-Zip has functions for dealing with the entire zip file or a single file/directory within the zip file. In my case all of my files were contained within a directory in the zip file and I wanted to extract the files contained within that directory.

Install Adm-Zip
```
npm install --save adm-zip
```
Add Adm-Zip to the list of requires
```
const admZip = require('adm-zip');
```

Within the on finish statement from the previous section, add the code below to use Adm-Zip to extract a directory from the downloaded zip file and extract it to a directory

console.log('finished downloading');
var zip = new admZip(zipFile);
console.log('start unzip');
zip.extractEntryTo(extractEntryTo, outputDir, false, true);
console.log('finished unzip');

Just like that we had our zip file downloaded and extracted to a directory.

You can find a working sample at https://github.com/digitaldrummerj/node-zip-download-sample

Leave a comment below if you end up using this solution or are doing it another way.

How I Record My Conference Talks

Justin James — Thu, 01 Feb 2018 00:00:00 +0000

When I got started as a conference speaker I would see Jeremy Clark recording his talks and I thought I should record my talks too. It would help me improve as a speaker by seeing how I actually was on stage versus how I think I was. As well, it gives attendees the ability to watch a replay of the talk in case they missed something or weren’t able to see it. This is assuming though that the recordings are posted somewhere and advertised to the attendees, which I used to be really bad about. It was difficult for a long time for me to watch myself giving a talk.

So I started recording my talks. Unfortunately, in 2015 and 2016 I didn’t process most of those videos. However, at the start of 2017 I decided that if I was going to take the time to record a talk I would process it and post it. A side goal was to also see if I could post the video while at the conference so that I could ensure that I actually posted it. For 2017, I posted 9 talks publicly and 15 talks as unlisted (paid workshops) to my YouTube channel. I even managed to post all of the public talks while at the conference. Don’t forget to subscribe to my channel to get notified when my talks are posted.

General Recording Requirements

Before we get into the specifics, I have some basic recording requirements that guided me as I figured out this process and what equipment to use.

First and foremost be able to record my conference talks as painlessly as possible with good audio and HD video
Can be setup in less than 5 minutes
Be able to capture both my screen and me presenting
Be able to upload the recordings to YouTube
Be able to use a similar setup to create training videos outside of my conference talks
Have the equipment be lightweight enough that I don’t have to bring an extra bag with me just for equipment
Keep the budget as low as possible (e.g. don’t need to spend $1000’s on professional grade equipment)
Be able to process the videos fast enough that I can upload them while at the conference
Be able to reuse a majority of the equipment to record meetups that I attend but am not presenting at

Note: Many of the product links below are Amazon affiliate links. I won’t get rich from them but every little bit helps me be able to continue to speak and record my talks.

History

If you don’t care about the equipment that I tried out before settling on my current equipment, you skip this section.

Before we get into my current setup, lets take a quick look at some of the other equipment that I have used before settling in on my current setup.

For the camera, I started out with a GoPro Hero 3 Silver since I already had this camera. The camera was small, easy to use, and recorded decent video but battery life was an issue as well as it started to become really unreliable and where would just randomly power off. Next, I used my iPhone 6 (64 gig) mounted on a tripod along with the MoviePro app. Using my phone worked great since I always had my phone with me and the video quality was good. However, disk space was an issue as the phone only had 64 gigs and an hour of footage would take ~12 gigs. Then it would take over an hour to get the file off the phone and it was very flaky when copying it over which totally sucked. As well several times I had talks close enough together that I wasn’t able to transfer the recording to the computer in time and had to rush to clear off enough space for 2 hours worth of footage. I was also starting to do more workshops of 4-8 hours in length and the phone didn’t have enough space or battery life for those recordings.

For audio, since I wanted good audio, I knew from the start that I couldn’t use the cameras built-in microsoft. So I started with a Zoom H2 mounted on a small table top tripod since I already had it. Even though Zoom is known for their audio quality it still was just recording the audio in the room so it was hit and miss plus moving around the stage greatly effected the quality of the audio. Next, I went with a Zoom H1 with an external lapel mic which gave even better audio and I didn’t lose quality as I moved around. The downside to both Zoom devices was that it was a 3rd device that I had to worry about getting setup and then syncing up the footage in editing.

I also tried a live steaming type setup with a 2nd laptop plus video capture card so that I wouldn’t have to do any editing. This setup was a total bust. It took too long to get setup. Carrying a 2nd laptop was annoying. I had to get the camera, capture card and microphone synced since there is a slight delay with capture cards which manufacturers don’t publish and If I screwed this up then the whole video was ruined as there was no way to post edit the video to fix it.

Current Equipment

For my current setup, I have used it to record over 30 talks and it hasn’t let me down yet. Yes that is more talks than is on my YouTube channel as some of the talks are internal talks at work.

Microphone

A key piece to a great video is great audio. You can get away with an ok video but if you have crappy audio no one will watch your video.

Audio Requirements

Needs to record directly on the computer
Needs to be wireless so that I can move around the stage
Needs to be a lapel microphone (just in case the event gives me a headset mic for the room I can still record)
Battery in transmitter uses either AA or 9V batteries

Meeting requirement #2 and 3 was hard as most wireless lapel microphones are XLR connections which means that I would need to carry around an audio interface to go from XLR to USB. I am already carrying enough equipment and didn’t want more equipment. Also, XLR Wireless microphones are pretty expensive as they start around $299 plus the audio interface. Since I already had an audio interface, I did try out a few of the cheaper XLR wireless microphones but the quality was terrible and they were quickly returned.

The microphone I am currently using is the Samson Stage XPD1 which is a wireless usb lapel microphone that cost < $100 and provides a good compromise between quality and cost.

PROS:

Sound quality is good
The range on the wireless is good. Never had it cut out as I was moving around
It just worked when I plugged it in
Since it is USB it records directly into the computer without an extra device

All of the videos on my YouTube channel are using this microphone. Don’t forget to subscribe to my channel to get notified when my talks are posted.

CONS:

There is no battery indicator. Since I am paranoid about batteries dying in the middle of a recording, I have no clue how long they really last since I switch them out every couple of hours. This in turn meant that at one point I had a huge bag of used but still good batteries that I didn’t trust for anything important.
The case is made of plastic
The clip is plastic
The USB dongle is quite wide and tends to cover more than 1 port

To solve the battery problem, I purchased a set of Rechargeable batteries. I needed a charger since I didn’t have one and AAA batteries are used for my Logitech R400 Slide Advancer.

Pro Tip: If the event is also giving you a lapel mic for the room, put their microphone above yours. The audience in the room deserves the best sound possible. Yes, I am also aware that you will be wearing 2 lapel microphones and 2 transmitter packs.

Warning: If you are using a room microphone, you most likely will hear a slight amount of reverb in the recording and you can’t fix it without getting an audio feed directly from the room mic. Getting a direct feed for the room mic is not typically possible at most events. To see an example of what I am talking about, check out my Angular Mix Talk.

Software

The two pieces of software that I needed were screen capture and video editing. My main goal was to find something that was easy to use and had a very small learning curve. After all, I am not an expert video editor nor do I want to become one.

Screen Capture Requirements

Needed to be able to record my screen with the microphone and optionally include the system sounds
Be able to capture the full screen or a portion of the screen
Be able to select which audio device to use
Be able to capture system sounds if needed
Have no time limit on how long the screen capture can be

Video Editing Requirements

First and foremost, it needed to be really easy to do the simple edits that I was doing
Needed to be to combine multiple sources into the final video (camera, screen, intro, outro, music, etc)
Needed to be able to show both the screen and presenter at the same time in the final video
Needed to be able to separate the audio from the video of a clip so I can get rid of the bad audio from the camera
Needed to be able to slice up the footage to remove unwanted portions such as the time before the talk actually starts
Needed to be able to add transitions between scenes
Needed to be able to do basic audio editing (add gain, noise filter or silence bad audio, fade in/out, etc)
Needed to be able to work with MOV videos (the camera below records in this format)
Needed to be able to output in HD (1920x1080). If you are doing any kind of showing of code, anything below 720p is typically hard to read.

I went with Camtasia for both the screen capture and video editing as it meet all of my requirements in one piece of software.

PROS:

Was easy to figure
There are lots of free and easy to follow tutorials available from Techsmith as well as the community
Comes with a good amount of ready to use assets such as intros, backgrounds, and music.
Is very easy to create your own assets
Full featured and only cost $200
Can batch produce videos
Only takes ~1 gig of space for a 1 hour screen capture
Price was low for the functionality provide

CONS:

Note: These are more nitpicks than cons.

Can only open 1 project at a time. Not a huge deal but sometimes I have something I want to copy from another project.
File paths in the project file are absolute so if you move the raw footage around, you have to manually update the paths in the project file. Wish they were relative to the project file since normally the videos are within the same directory as the project file.
Only the main display is recorded if you have multiple monitors and are extending the screen instead of just duplicate the screen. To not have to worry about this limitation, when I present I have the laptop and projector duplicated. The downside is that I do not get to use any notes but I don’t like using notes anyway so I can live with this downside.

Camera

The camera is technically optional but since one of my goals is to use the videos to improve my speaking, I need to be able to see myself.

Camera Requirements

Can record in HD (1920x1080)
Has a built-in microphone (you need this to be able to sync up the camera and screen capture)
Can fit into my laptop bag
Has a metal tripod screw hole (some cameras are plastic and they are not durable)
Can record at least 2 hours without running out of battery or can record using an external power source
Can be run off an external power battery. External battery is very important since there is not normally power available out in the audience at a conference.
Not related to conference talks, but I wanted to be able record my drums or concerts in a point and shoot fashion which meant I needed a good microphone built into the camera. This was the deciding factor in the camera the I went with. If I didn’t have this requirement I most likely would have went with a cheaper camera.

The camera I use is the Zoom Q4n. Make sure it is the Q4n as they also make a Q4. Since this is the 3rd product from Zoom in this post and 4th product that I own from them, I really like their equipment. I can get great audio and good video for a reasonable price.

PROS:

It is basically point and shoot
It has auto gain so I do not have to worry much about it overloading the audio or having the audio too quiet
It has a flip around screen so I can see what is being recorded. This was more important when I was going to use it as a Webcam (see cons to why I don’t)
It is lightweight
The microphone can either be set as X/Y or A/B patterns. X/Y is great for musical performances or video blogging while A/B is ideal for recording the sound of people taking in different parts of a room.
Runs off 5v 1A which means I can use my phone charger or any external usb batteries that I have
Comes with a wind screen and lens hood (not that I have used either of them yet)

CONS:

It advertises that it can be used as a 720p webcam but it looks horrible. Looks more like a 240 resolution. My Logitech C922x is far superior 720p as a webcam
The casing is plastic so it does feel a bit cheap for the price
The memory card slot is on the bottom which means you have to take it off the tripod to change the memory card
You can change the battery without taking it completely off the tripod.
If you forget to put the screen out before mounting it on the tripod, it is difficult to get the screen to open but not impossible
Doesn’t come with a wall charger
Doesn’t come with a case
Uses a proprietary battery
About every 3.5 GB, you will get a new video file that you will have to splice together in editing. It is easy to slice together but it does add an extra step.

Accessories

There are lots of little things that you don’t think about such as travel tripods, memory cards, and cases to protect it all in travel that I also purchased.

Tripod: I have to say that it was difficult to find a tripod that was full size, lightweight, sturdy enough that I would trust my camera on it, and most important it would fit in carry on luggage. I went with the Neewer Carbon Fiber Portable Mini Tripod. It extends to 56 inches and folds down to 13 inches. It is also really light but still very sturdy.

Camera memory card 64 GB: I went with two Sandisk 64 GB Class 10 SD Card for no other reason than I have other cameras that can use the same card, so now I can do a multiple camera setup which I have done before with some drum videos. Space wise, at 1920x1080, I am able to get about 5.5 hours of footage.

External Battery for Camera: Since the camera can run off 5V 1A, I can use the iPhone portable charger that I already have. I am using the UNU Superpak 10000 mAH and can get around 4 full phone charges out it. It also has a really nice battery charge light so I know if I need to charge it or not. Don’t discount the value of having the status lights.

iPhone Wall Charger: Since the camera does not come with the wall charger, I got a [cheap pack of 5V 1A wall chargers][http://amzn.to/2BHRr3O]. I am always misplacing them so having extra on hand never hurts.

USB Extender Cable: - Unfortunately the USB cable that is included with the camera does not reach to the floor when the tripod is fully extended. I went with an Amazon Basics 6 foot USB Extender cable

Case for Camera, Microphone, Extender Cable, Batteries, and Memory Cards: I didn’t want all of the equipment just hanging out in my laptop bag especially since the casings are plastic. Since this equipment is meant to be travelled with, I went with the CaseMatrix Hard Case with Diced Foam. This case is big enough to hold all of the equipment except the tripod and still fits into my laptop bag.

Note: I just purchased a camera backpack with a laptop compartment that I am going to try instead of the case and the OGIO Gambit laptop backpack.

Travel Power Strip: To make sure that I get everything charged up in the hotel room and don’t have to worry about running out of power outlets in hotel rooms, I got a Belkin travel surge protector with 2 usb ports.

Syncing Audio

With this setup, we will have 2 audio tracks: camera and screen capture. We will need to sync the audio in editing and then remove the camera audio. This sounds like a pain to do but I am going to give you the best trick that I ever learned that will enable you to sync the audio in 30 seconds.

Recording The Audio

Turn on the microphone
Start recording in camtasia
Start the camera recording
While standing in front of the camera either loudly snap your fingers or clap your hands (this makes everyone in the room stare at you, so I normally snap my fingers)
Now give your talk

What we did was to create a big spike in the audio that you will be able to see in the audio wav form in Camtasia when you zoom into the timeline.

Syncing the Audio

Open the Camtastia screen capture footage
Find the spot in the screen capture that you snapped your fingers and add a marker to it
Import the camera footage
Add the 1st video from the camera to the timeline. You will be moving it around on the timeline so you only want the 1st one at this point
Turn off the screen capture footage so that you can hear the camera audio
Find the spot in the camera video that you snapped your fingers and add a marker to it
Enable the screen capture footage
Roughly align the markers for the footages
Make the footage for the screen and camera taller so that you can easily see the audio wav form. It sometimes takes a few minutes for Camtasia to show the wav
Zoom all the way into the timeline and fine tune the alignment
Listen to the audio to make sure you do not have an echo. If you have an echo, keep making adjustments until it goes away.
Add the rest of the camera footage
Right-click on the camera footage that is in the timeline and select the separate audio and video option
Now either delete the camera audio or turn it off. Note if you turn it off and splice up the video the disable audio doesn’t get touched and will be out of sync so you have to remember to turn back on the audio before removing any portion of the video.

After a few times of doing this you will get really good at syncing multiple audio sources and will even be able to sync the audio just by looking at the way forms.

Adding an Intro and Outro

I like to add an intro and outro clip onto my videos. I made both of these clips once and then added them to the asset library. Now for the intro all I have to do is add it onto the timeline and change the talk title and event name. For the outro, I don’t have to make any changes and just put it at the end after all of the editing is done. It nows takes me all of 2 minutes to add the intro and outro. This has been a huge time saver for me and made it possible to get the video editing done while at the conference.

To add the clips to the Camtasia asset library, you highlighted the set of elements on the timeline that make up the click, right-click on them and select save to library. Then give the new asset a name and you are ready to use it.

Conclusion

Now you are ready to record your talks. Make sure to do some practice runs with the equipment to work out any kinks. Leave a comment below and let me know where your recordings are and how the process worked out for you.

Also, remember that the most important thing is that you can give the talk, not that you can record the talk so if the recording isn’t working for whatever reason, don’t delay your talk just for the recording. There will be times where the equipment will just not work for whatever reason and you won’t be able to capture that talk. It sucks when it happens but honestly the recording of the talk is an added bonus.

AngularJS - Why is there an ! in my url now?

Justin James — Thu, 25 Jan 2018 00:00:00 +0000

Note: This post applies to AngularJS. The 1.x version of Angular. AngularJS has been end of life at of 12/31/2021.

Recently, I upgraded one of my apps to AngularJS 1.6 along with a bunch of other changes and a bunch of my routes broke. Unfortunately, I didn’t catch the routing issue before making a bunch of other changes. The one thing I noticed for all of the broken routes is the urls now had an #! (https://myapp.com/#!/) in them instead of just the # (https://myapp.com/#/). I thought maybe I had done something in one of my changes. Low and behold though, it was not something I did but was a breaking change in AngularJS 1.6 per the AngularJS version migration guide. Thankfully the fix to revert the functionality to the previous version of AngularJS was really easy.

In my AngularJS module config I needed to inject the $locationProvider and set to the hashPrefix to an empty string like so:

appModule.config(['$locationProvider', function($locationProvider) {
 $locationProvider.hashPrefix('');
}]);

Now my routes work again they did before.

Automatically Tweet New Blog Post

Justin James — Tue, 16 Jan 2018 00:00:00 +0000

After each blog post is published, we need to let people know that a new post is published. We can’t expect people to only find out about the new post through the RSS feed. For this blog, I tweet out that I have a new blog post. However, I don’t want to have remember to send out the tweet because I will forget or get busy with something else. Instead, sending out a tweet should be done for me.

To automate the process we are going to use Zapier to monitor the RSS feed for new post and then add it to Buffer. I use Buffer as a way to schedule tweets to go out at specific times throughout the day.

I could have also used IFTTT but they do not have the ability to submit to the top of the Buffer list, so instead I would either have to have my post wait in the buffer list along with everything else I am retweeting or would have to immediately send it to Twitter. This wasn’t the desired functionality that I wanted.

If you haven’t heard of either of these systems before they both work pretty much the same way. They monitor something and then take action when it changes. They both have hundreds of task that you can automate against a variety of different systems like Trello, Github, Google Sheet, etc.

You will need an account in order to use these systems. Both of them are free but Zapier limits the number of automated task to 5 and the number of times it can run to 100 times per month. IFTTT does not appear to have any limits.

Both systems work extremely well it is just a matter of which system has the ability to interact with the system you trying to automate.

Setting up Zapier

Sign up for a free Zapier account at https://zapier.com/sign-up
Click on the button. Note: Zaps are their name for the automated task
Search for RSS as the App Name and select RSS by Zapier from the results.
Select New Item In Feed
Click the button
Input your RSS feed url
Leave everything else with the defaults and click the button
Click the
If everything with the feed setup is correct you will get a successfully message
Click the button
Search for buffer as the App Name and select Buffer from the results.
Select the Add to Buffer option
Click the button
Select your Buffer Account or click the
For the profile drop down select your Twitter profile
For the text field, input what you want your new post tweet to say. The important piece to add into the text field is the link to the new blog post.
To add the link, click on the and select the link option
For my text field, it looks like
For top? field select yes to put your new blog post tweet at the top of your Buffer queue.
Click the button
Click the button
If everything is working, you should see a test successful message
Also, go to buffer and verify that a new post has been added to the buffer queue. You will also want to delete the new post from your buffer queue
Click the button

Zapier is now setup to put a tweet at the top of your Buffer queue whenever you publish a new blog post into your RSS feed.

Angular - No Test Found

Justin James — Fri, 06 Jan 2017 00:00:00 +0000

Note: This post applies to Angular. The 2+ version of Angular.

Are you trying to run your Angular 2 unit test and the Karma test runner is not finding any tests to execute? This is exactly what happened to me when I tried to run the unit tests that are included as part of the project that the Angular CLI generates.

The test runner should have found 3 tests to execute but as your could see above it didn’t find any test to execute. Never having used Karma before, I was unsure what the issue was or where to start troubleshooting. However, when the Karma test runner executes it started up Chrome and the UI had a Debug button on it so I figured that would be a good first step.

I was slightly disappointed when I clicked on the Debug button as it just opened up a new tab blank tab. After a bit of reading, it turns out that you are supposed to open the Chrome Developer Tools on that new blank tab that the Debug button opened. Once I opened the Chrome Developer Tools, I noticed that the console had the following error.

Chrome should have run the test.ts file with no problems and it is obviously not a video file. After a bit of searching, I ran across Angular CLI Issue 2125 that had a potential workaround of adding a mime type to the Karma configuration. Below is the configuration that you need to add to the karma.conf.js file.

mime: {
 'text/x-typescript': ['ts', 'tsx']
}

Once you update the configuration you need to stop Karma and re-run it with the npm run test command. It should now find and execute 3 tests.

Now you are ready to go test your Angular application. If you are looking for a good testing reference, check out the Angular Testing Guide.

Angular - Adding Bootstrap Library

Justin James — Thu, 05 Jan 2017 00:00:00 +0000

Note: This post applies to Angular. The 2+ version of Angular.

Welcome to the continuing series on Getting Started with Angular 2. In the [previous post][], we created our project using the Angular CLI. In this post, we will be adding the Bootstrap library to the project to make it easier to style our application.

To make Bootstrap play nice with Angular we are going to use the ng2-bootstrap library which rewrites the Bootstrap components to be powered by Angular instead of JQuery. The ng2-bootstrap library also works with both Bootstrap v3 and v4 which means when v4 is finally released to production you will only have to change the Bootstrap css reference and fix any breaking changes listed in the v4 migration guide. Bootstrap v4 is not yet recommend for production. The rest of this article is going to focus on using Bootstrap v3.

Install Libraries

If you need the code from the previous post, you can get it from this Github repository in the 1-CreateProject branch.

The first thing that we need to do is install the ng2-bootstrap and bootstrap-sass libraries as dependencies for the project. Since we generated our project with the –style=scss flag, we need to use the bootstrap-sass module to get the sass versions of bootstrap instead of the css versions that are contained in the bootstrap module.

Open a command prompt and navigate to your project directory
Run the npm install command below to install ng2-bootstrap and bootstrap-sass
```
 npm install bootstrap-sass ng2-bootstrap --save
```

Updating the Angular CLI Configurations

Now we need to tell the Angular CLI about the Bootstrap scss file.

In your code editor, open up the angular-cli.json file.

Search for the styles node and add the bootstrap file

 "styles": [
"styles.scss",
"../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss"
],

Using Bootstrap

Now that we have told the Angular CLI to include the bootstrap library, we are ready to use it.

In your code editor, open up the src\app\app.component.html file

Replace the contents of the file with:

 <div class="container">
<div class="page-header">
<h1>
{{ title }}
</h1>
</div>
</div>

We are now ready run ng serve and view our home page at http://localhost:4200

Note: If you already have ng serve running, you will need to stop it using ctrl+c and run ng serve again. Anytime you make changes to the angular-cli.json file, they will not take effect until ng serve is restarted.

The page should now look like

Wrapping up

At this point you have your Angular 2 project with the Bootstrap library added for styling. The code for this post is available on Github.

In the next post, we will create a header and footer component that will be used on each page.

Angular - Your First Project

Justin James — Tue, 03 Jan 2017 00:00:00 +0000

Note: This post applies to Angular. The 2+ version of Angular.

Welcome to the series on Getting Started with Angular. Angular 2 was released in September 2016 and and so far I have been enjoying working with it. I have been using the TypeScript version of Angular 2. It is has been pretty easy for me so far to pick it up but there have been a few things that have made me scratch me head. In this series I am going to walk you through creating a simple Angular 2 project that has a header/footer, routing to components/modules, show how to add new components/services, create multiple modules, lock down routes, changing UI configurations based on the environment parameter and adding in the Bootstrap library. When you are done with the series, you will have a good structure for any project that you want to start.

In this post we will get everything setup on your machine to do Angular development and then you will create your Angular project that the rest of the series will build on. We will be using the new Angular CLI to generate the project and several of the features such as components, services, modules, and pipes.

Installing The Angular CLI

The Angular CLI is a node based utility which means that we need to first install Node before we can install the npm package angular-cli. The minimum version of Node that is required for the the Angular CLI requires is Node 4.x but I would suggest installing the latest LTS version from https://nodejs.org which at the time of this writing is 6.9.1. To verify the version of node that you have installed, launch a command prompt and run node -v. If you need to install Node, download the LTS installer from https://nodejs.org and accept any prompts that the installer has.

After you have Node installed, we need to globally install the Angular CLI by running (it will take several minutes):

npm install -g @angular/cli

On Linux and Mac, you may need to run the command with sudo.

You can verify that the Angular CLI installed and the version by running the command below. As of this writing, the Angular CLI version is 1.0.0-beta.25.5

ng --version

If it says that ng is unknown, close the command prompt, re-open it and run ng –version again. If you are still having issues, leave a comment below and I will try to help you out.

Generating Your Angular 2 Project

After the Angular CLI is installed you can create a new project with the ng new command.

The ng new command does several things for you:

Creates a directory named after the project name.
Installs the npm dependencies
Configures Webpack
Adds a development and production environment configuration file
Adds a placeholder file for the stylesheet. By default it is css based but with the –style=scss parameter that we are using below, it will make it scss based instead.
Adds a routing file for the app module and import it into the App Module with the –routing parameter
Adds unit testing spec files

Generate Project Steps

Open a command prompt
Navigate to where you want to store your project
- On Windows, I store mine at c:\projects and on Mac I stored it at ~/projects
Generate the new project called angular2-getting-started by running the command below. It will take a few minutes to create and install the dependencies. I like to use scss instead of css for my styles which the style parameter enables. The routing parameter sets up the routing that we will use later on when we have more than 1 page to navigate to.

ng new angular2-getting-started –style=scss –routing

You can view the full documentation for the Angular CLI at https://github.com/angular/angular-cli

Running Your Angular 2 Project

Now that we have our project generated, we can view it in a web browser by running ng serve to build it and start up a web server with live reload. Once ng serve has completed, open a web browser and navigate to http://localhost:4200/. You should be looking a page that says:

Project layout

If you look at the project directory and file layout there are some key pieces of the project that I have highlighted below.

src
- app -> Your Application Code
- asset -> Static Assets (/images, non-npm libaries, custom javascript that you created)
- environments -> Environment specific files. Will will look at these in a later post.
- styles.scss -> Application wide css. Any CSS that is not component specific.
angular-cli.json -> Configuration for the Angular CLI and Webpack build
package.json -> Standard npm configuration file for dependencies, scripts, project info

Wrapping up

At this point you have your Angular 2 project created and are ready to start coding. In the next post, we will add bootstrap for our styling.

Angular - WTF Module Won't Route

Justin James — Thu, 29 Dec 2016 00:00:00 +0000

Note: This post applies to Angular. The 2+ version of Angular.

I have been really enjoying working with Angular 2 over the last few months but the other day I spent well over an hour cursing Angular wondering why my new module would not route. I didn’t have this much trouble when I created my other modules a few weeks before. However, this time when I navigated to my new module route it kept going to my catch all route.

I verified that I had spelled everything correctly in the routing configuration and in the browser url. I verified that I had imported the new module in the app module. I swore everything was setup correctly. WTF. What was going on? What did I miss.

Turns out that order is important when importing modules in the app.module.ts file especially when you have configured a route to catch any unknown routes and redirect them to a 404 page. In this scenario, you have to import the AppRoutingModule last. This was so obvious once I figured it out but never thought about it before then. I assumed that it would automatically added the child routes into the routing configuations before the catch all route. Nope it doesn’t work that way. It adds the routes as they are imported. Below shows the broken code and then the fixed code.

Original Broken Code: app.module.ts

Notice that the MyNewModule is listed in the @NgModule imports section after the AppRoutingModule. Note that the order of import statements at the top of the code does not matter.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MyNewModule } from './my-new-module/my-new-module.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutingModule,
MyNewModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Fixed Code: app.module.ts

Notice that now the MyNewModule is listed in the @NgModule imports section before the AppRoutingModule. Note that the order of import statements at the top of the code does not matter.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MyNewModule } from './my-new-module/my-new-module.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
MyNewModule,
AppRoutingModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Such a simple solution to a problem that will have you cursing at Angular. Hopefully in the future they can change this within Angular so that import order doesn’t affect routing like this.

Leave a comment below, if you have run into other issues with Angular 2 that have been making you scratch your head and curse at the framework.

Ionic v2 - How to setup on Windows

Justin James — Tue, 01 Nov 2016 00:00:00 +0000

In order to work with the Ionic framework version 2 there is a bit of software installs and configuration that needs to happen in order to deploy to devices. However, many of the guides out there leave out a number of steps that tripped me up when I first started using Ionic.

This guide will go through all of the steps needed for deploying to an Android device using a Windows machine. Note that deploying to an iOS device requires a Mac.

Since I love to automate setup work so that I can easily repeat it, we will be using Chocolatey and Boxstarter for all of the installs and configurations.

Software to be installed

NodeJS
Git
Gradle
JDK8
Android SDK
Android Studio
Google Chrome
Npm Modules:
- cordova
- ionic
Visual Studio Code
Visual Studio Android Emulator (Hyper-V Based) or Genymotion (Virtualbox Based)

Installing Software

Most of the software installs are automated using Chocolatey which is an awesome Software Package Manager for Windows. Chocolatey packages take care of downloading, installing, and configuring the software for you so that you do not have to worry about to do it.

Once you install Chocolatey we will be using a Chocolatey package called Boxstarter to take care of orchestrating the multiple installs with a single command.

To install Chocolatey you need to open an administrative command prompt.
- Go under the start menu
- Type cmd
- Find the command prompt result and ctrl + shift + click on it
- If prompted, accept the User Access Control request.

Run the following command in the command prompt you just opened

 @powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

After installing Chocolatey, in the same command prompt run the following command to install BoxStarter.
```
 choco install -y BoxStarter
```
You can now close the administrative command prompt

Now that we have the infrastructure components installed we are ready to use Boxstarter to run our installation script.

To run the script we need to run the Boxstarter Shell by clicking on the icon on your desktop
- If the icon is not on the desktop, then open up a command prompt and type BoxStarterShell.

In the Boxstarter Shell run the following command

 Install-BoxStarterPackage -PackageName https://gist.githubusercontent.com/digitaldrummerj/3fe2eb057004b6742b89/raw/021eb3bb7e48745c68507904cecde1625ed0eac1/ionic2 -DisableReboots

You can view the actual script in the your browser at link

Before we test if ionic is working or ot, we have one last bit of software to install which is an Android Emulator. Unless you plan on always deploying to a physical Android device during your development you will need an Android Emulator.

There are 2 options for the Android emulator:

If you are using virtualization software on your machine other than Hyper-V be aware that VMWare and Virtualbox does not work when Hyper-V is turned on. It requires a reboot of Windows to turn Hyper-V off. {:.warning}

Both of the emulator works well but my preference is the Visual Studio Android Emulator.

Once you install one of the emulators, you will want to download at least 1 device. Both emulator platforms have Android machines from 4.4.0 to the current release.

Verify that everything works

Open a command prompt
Navigate the directory where you store you development projects (I use c:\projects)
From c:\projects create a new project based on the Tabs template by running:
```
 ionic start todo tabs --v2
```
cd into c:\projects\todo (directory was created by the ionic start command)
The first test that we are going to run is to make sure that we can test the todo app that we generated in the web browser by running:
```
 ionic serve --lab
```
- This will start up a node based web server and the –lab will tell it to launch a page that shows what the app would look like on an iOS, Android and Windows phone. Granted the node based serve is about 80% accurate but good enough to do a majority of our testing. Ultimately you should test on a device before releasing into the app stores.
Next we are going to test our Android device setup but first we need to tell ionic that we want to add the Android platform to our todo app by running:
```
 ionic platform add android
```
Now that the Android platform has been added we can build our application for the platform by running:
```
 ionic build android
```
The last thing we need to verify is that we can deploy the todo app to the Visual Studio Android Emulator or a Physical device.
- For the emulator you need to the emulated device before proceeding
- For a physical device, you need to make sure that Windows sees that device and the USB debugging is turned on.
To run on either the emulator or physical device run:
```
 ionic run android
```

Congratulations

Congratulations, you made it through the guide and have everything setup to create your ionic applications for Android devices. Unfortunately, if you want to develop for iOS devices you have to do it on a Mac since XCode only runs on a Mac.

Ionic v2 - Setup on OSx

Justin James — Tue, 01 Nov 2016 00:00:00 +0000

In order to work with the Ionic framework there is a bit of software installs and configuration that needs to happen in order to deploy to devices. However, many of the guides out there leave out a number of steps that tripped me up when I first started using Ionic.

This guide will go through all of the steps needed for deploying to an Android and iOS device using a Mac.

General Install Steps

For the first part of this tutorial, we will be installing everything to do Ionic development and test your application in Google Chrome. This will be how you will do about 80% of your development since deploying to a device or emulator can be time consuming.

Node

If you already have Node installed, you can skip this section.

Download the LTS version of node from https://www.nodejs.org
- If you are using Chrome to download, it may tell you that a file with a pkg extension could be harmful to your computer and ask if you want to keep the file. Make sure to click on the keep button.
After the download completes, double-click on the pkg file to run it
Click Continue
Click Continue
Click Agree
Click Install
Fill in your login user name and password and click “Install Software”
It will take a few minutes for NodeJs to install. Once it does, click the Close button
Open a terminal and run the following to verify that node and npm was installed and is available from the command line
```
 node -v
npm -v
```

As of the writing of this post, you should have gotten node v6.9.1 and npm 3.10.8

Npm Packages

Next we need to install 3 npm packages for cordova, gulp and ionic. At the time of this publication, ionic is on release candidate 0.

Open a terminal and run the following commands to install the Global NPM packages that we need:
```
 sudo npm install -g cordova ionic
```
In the terminal run the following to verify that Cordova install correctly. As of the writing of this post, you should get Cordova version 6.4.0
```
 cordova -v
```
When prompted with “May Cordova anonymously report usage statistics to improve the tool over time?”, answer Yes or No depending on your preference.
In the terminal run the following to verify that Ionic install correctly. As of the writing of this post, you should get Ionic version 2.1.4
```
 ionic -v
```

Google Chrome

If you already have Google Chrome installed, you can skip this section.

Download from https://www.google.com/chrome/browser/desktop/
Double click the dmg file to run it
Drag the Google Chrome icon to the Application folder

Visual Studio Code

If you already have Visual Studio Code installed, you can skip to step 5.

Download from https://code.visualstudio.com/
Double-click on the downloaded archive to expand the contents.
Drag Visual Studio Code.app to the Applications folder, making it available in the Launchpad.
Add VS Code to your Dock by right-clicking on the icon and choosing Options, Keep in Dock.
Open Visual Studio Code
Open the Command Palette (⇧⌘P) and type shell command to find the Shell Command: Install ‘code’ command in PATH command and double-click on it.
Open the Command Palette (⇧⌘P) and type ext command to find the Extensions: Install Extensions and double-click on it.
Enter Cordova into the search box, find the Cordova Tools from Microsoft, and click the Install button
When the install is completed, the Enable button will be available and will restart Visual Studio Code to make the extension after.
Click Ok on the confirmation prompt
Visual Studio Code will restart and the extensions will be enabled

Validating General Install Steps

Open terminal
Navigate the directory where you store you development projects (I use ~/projects)
Run the following command to generate an ionic v2 project based on the tabs template
```
 ionic start todo tabs --v2
```
cd into todo (directory was created by the ionic start command)
We are going to run is to make sure that we can run the todo app in the web browser by running:
```
 ionic serve --lab
```
This will start up a node based web server and the –lab will tell it to launch a page that shows what the app would look like on an iOS, Android and Windows phone. Granted the node based serve is about 80% accurate but good enough to do a majority of our testing. Ultimately you should test on a device before releasing into the app stores.

At this point, we can create ionic projects and test them in a web browser. However, you have some more steps to complete in order to deploy to Android and iOS devices.

Android Setup Steps

In this section, we will be installing everything that is needed in order to deploy your application to an Android device or emulator. We will be installing JDK8, Android Studio, Android SDK, Gradle, and Genymotion.

JDK 8

Open a web brower and navigate to http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
Download the Java SE Development Kit 8u101 for Mac OSx
Open the dmg file after it downloads
Double Click on the icon
Click continue
Click Install
Fill in your login user name and password and click “Install Software”
Once the install completes, click the Close button
Open a terminal and run the following to verify that you can run java from the command line. As of this writing it should return javac 1.8.0_101
```
 javac -version
```
Open up the vi editor and edit your bash profile. We need to add in the JAVA_HOME environment variable
```
 vi ~/.bash_profile
```

To edit in vi hit i to enter edit mode and add the text below to the .bash_profile

 export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_101.jdk/Contents/Home

Press the esc key to exit edit mode
Press : (colon key) to enter command mode.
type wq and press enter to save and exit vi
Run the following to make the change active in your existing session
```
 source ~/.bash_profile
```
Test that the $JAVA_HOME variable was set. If should return /Library/Java/JavaVirtualMachines/jdk1.8.0_101.jdk/Contents/Home
```
 echo $JAVA_HOME
```

Android SDK

If you are using Safari to download files you need to change the preference to “open safe files after downloading” else Safari will automatically unzip the downloaded file into the Download folder and delete the zip file. You can change this option by going into the preferences and unchecking the “Open safe files after downloading” box
Download from https://developer.android.com/studio/index.html#downloads
- Version 24.4.1 as of this writing
When prompt for the license agreement, check the “I have read and agree withthe above terms and conditions” box and then click on the “Download Android-SDK_R24.4.1-MACOSX.zip” button
You can close the next dialog as it just tells you there is nothing else to do. Close it by clicking on the X in the upper right of the dialog
Open a terminal

Run the following to unzip the android sdk to the Development directory that is under your user home directory

 mkdir ~/Library/Android && unzip ~/Downloads/android-sdk_r24.4.1-macosx.zip -d ~/Library/Android/sdk && mv ~/Library/Android/sdk/android-sdk-macosx/* ~/Library/Android/sdk && rmdir ~/Library/Android/sdk/android-sdk-macosx

Open up the vi editor and edit your bash profile. We need to add in the JAVA_HOME environment variable
```
 vi ~/.bash_profile
```

To edit in vi hit i to enter edit mode and add the text below to the .bash_profile

 export PATH=${PATH}:~/Library/Android/sdk/tools:~/Library/Android/sdk/platform-tools

Press the esc key to exit edit mode
Press : (colon key) to enter command mode.
type wq and press enter to save and exit vi
Run the following to make the change active in your existing session
```
 source ~/.bash_profile
```
Test that the $PATH variable was updated. The command below will return the $PATH variable and the end of the output should include the android-sdk-macosx/tools and android-sdk-macosx/platforms-tools directories.
```
 echo $PATH
```

Now that the Android SDK manager is installed we need to install the Android SDKs that we will be using

 echo 'y' | android update sdk --filter tools,platform-tools,build-tools-24.0.3,android-19,android-20,android-21,android-22,android-23,android-24,source-24 --all --no-ui

Keep an eye on the output from this command. I had it error downloading one of the packages a time or two and had to run the command a 2nd time.

Android Studio

Download from https://developer.android.com/studio/index.html#downloads
- Version 2.2.2.0 as of this writing.
Double-click on the dmg file after it downloads
Drag the Android Studio Icon to the Applications folder
In the Applications folder, launch the Android Studio Application
In the Complete installation dialog, select “I do not have a previous version of Studio or I do not want to import my settings”
Click Next
Select Standard for the setup type
Most of the Android SDK items were installed as part of the Android SDK isntall but Android Studio has a couple of additional ones that it wants to install. Click the Finish button to install them.
It will take a few minutes to download the components
When prompted for the HAXM installation, enter your user name and password then click Ok
When the install is completed, click the Finish button

Virtualbox

In order to run the Genymotion emulator, we need to install Virtualbox.

Navigate to https://www.virtualbox.org/wiki/Downloads and click on the install link for OSx and the extension package. Version 5.1.4 as of this writing.
Click on the Virtualbox dmg file after it downloads
Double-click on the Virtualbox Icon
Click the Continue button to determine if it can install Virtualbox
Click Continue
Click Install
Fill in your login user name and password and click “Install Software”
Click Close

Now that Virtualbox is installed, we need to install the extension pack.

Double click on the extension pack file that you downloaded earlier.
Once Virtualbox is launched, it will ask you if you want to install the extension pack. Click Install
When the license agreement comes up, once you get to the bottom of it the “I Agree” button is enable for you to click it.
When prompted input your username and password then click Ok
Once the install is completed, click the Ok button

Genymotion

Download Genymotion from https://www.genymotion.com/fun-zone/
- Version 2.7.2 as of this writing.
Click the “Download Genymotion Personal Edition” button
Sign in to your Genymotion Account if you have one. If not, then click on the Create Account button
After creating the account and logging in, click on the “Download the Mac OSX” button
Once Genymotion is downloaded, double click the genymotion-2.8.0.dmg file to launch the installer
Drag Genymotion and Genymotion Shell to the Applications folder
After Genymotion is installed, open up the Applicaton folder and launch the Genymotion UI
On the Usage notice dialog click Accept
Click on the Yes button on the “You don’t have any devices dialog”
Click the Sign in button
Input your account information that you create as part of the Genymotion download.
After you are logged in, from the Android Version drop down select 6.0.0
Then select a device from the available list and click next. In this case I selected the “Custom Phone - 6.0.0 - 768x1280”
It will take several minutes to download the virtual device. When the download is done, click the Finish button

Gradle

If you are using Safari to download files and you didn’t change the preference to “open safe files after downloading” when you downloaded the Android SDK, you need to change it before downloading Gradle. Go into the Safari preferences and uncheck the “Open safe files after downloading” box. Without doing this, Safari will automatically unzip the downloaded file into the Download folder and delete the zip file.
Download the Gradle Binary Only Distribution from https://gradle.org/gradle-download/
Open a terminal
Run the following to unzip the android sdk to the Development directory that is under your user home directory
```
 unzip ~/Downloads/gradle-3.1-bin.zip -d ~/Development
```
Open up the vi editor and edit your bash profile. We need to add in the GRADLE_HOME environment variable
```
 vi ~/.bash_profile
```
To edit in vi hit i to enter edit mode and add the text below to the .bash_profile
```
 export GRADLE_HOME=~/Development/gradle-3.1/bin
```
Press the esc key to exit edit mode
Press : (colon key) to enter command mode.
type wq and press enter to save and exit vi
Run the following to make the change active in your existing session
```
 source ~/.bash_profile
```
Test it by running
```
 echo $GRADLE_HOME
```

Verify Android Setup

Next we are going to test our Android device setup. The first thing we need to do is tell ionic that we want to add the Android platform to our todo application that we created earlier.

Open a terminal and navigate to ~/projects/todo
Add the android platform
```
 ionic platform add android
```

Now we need to validate that we can build for Android, run the following:

 ionic build android

The last thing we need to verify is that we can deploy the todo app to the Genymotion Emulator. Before we can deploy the application, we need to start up Genymotion Device that we want to deploy to.

Once the Genymotion device is started, you can deploy to it by running:
```
 ionic run android
```

You are now ready to go create your ionic applications for the Android platform. Continue with the guide to setup for developing for the iOS platform.

iOS Setup Steps

XCode

Install Xcode from app store. This will take awhile since it is ~2 gigs in size.
Once install is completed, open xcode and accept the license
- If prompted to install additional required components, click Install
- When prompted for credentials, enter username and password then click Ok
- It will take a few minutes to complete the install

iOS Simulator

Install the iOS Simulator that Ionic will use.

npm install -g ios-sim

You may need to start the npm install command with sudo depending on your node setup.

iOS Deploy Package

Install the iOS Deploy npm package

npm install -g ios-deploy

You may need to start the npm install command with sudo depending on your node setup.

Verifying iOS Setup

Open terminal
Navigate the directory where you store you development projects (I use ~/projects)
Run the following command to generate an ionic v2 project based on the tabs template

ionic start todo tabs –v2
cd into todo (directory was created by the ionic start command)

The first test that we are going to run is to make sure that we can test the todo app that we generated in the web browser by running:

 ionic serve --lab

This will start up a node based web server and the –lab will tell it to launch a page that shows what the app would look like on an iOS, Android and Windows phone. Granted the node based serve is about 80% accurate but good enough to do a majority of our testing. Ultimately you should test on a device before releasing into the app stores.

Next we are going to test our iOS device setup. The first thing we need to do is tell ionic that we want to add the iOS platform to our todo app by running:

 ionic platform add ios

This sets up the todo app to be able to be build and deployed to an iOS device. To validate that we can build for iOS, run the following:

 ionic build ios

The last thing we need to verify is that we can deploy the todo app to the iOS Simulator.

For the iOS Simulator, run the following:

ionic run ios

Congratulations

Congratulations, you made it through the guide and have everything setup to create your ionic applications for both Android and Ionic.

ASP.NET Web Api - Setup Generic Response Handler

Justin James — Thu, 29 Sep 2016 00:00:00 +0000

Welcome to the continuing series on getting started with ASP.NET Web Api. In the previous post, we created our ASP.NET Web Api project, created our 1st controller, enabled Windows authentication and configured JSON to be camel cased for our returned C# class. In this article we will learn how to setup a generic response handler for all of Api calls. This will allow us to consolidate the logic needed to create a proper response as well as it will allow us to consolidate the exception handling logic.

Before we get started, if you have not read the previous post, I would suggest that you do so before continuing with this artcle so that you are at the same starting point as I am.

Our generic response handler will inherit from IHttpActionResult which basically defines an HttpResponseMessage factory.

Some of the advantages of using IHttpActionResult are:

Simplifies unit testing your controllers
Moves common logic for creating HTTP responses into separate classes.
Makes the intent of the controller action clearer, by hiding the low-level details of constructing the response.

IHttpActionResult contains a single method, ExecuteAsync, which asynchronously creates an HttpResponseMessage instanc that returns back an Http response message.

Create the Response Handler

Lets go ahead and start creating our generic reponse handler.

Open the solution in Visual Studio and within the Api project create a new directory called Helpers.
Within the Helpers directory, create a class called WrapResponseResult.cs.
To the WrapResponseResult class definition add <T> to the class name, inherit the class from IHttpActionResult, and add the ExecuteAsync method.

public class WrapResponseResult<T> : IHttpActionResult
{
 public Task<HttpResponseMessage> ExecuteAsync(CancellationToken cancellationToken)
 {
 throw new NotImplementedException("Not Implemented Yet.");
 }
}

Now that we have the structure for the WrapResponseResult, we need to add some functionality to it. The first thing we are going to do within the WrapResponseResult class is to add a variable to hold the value for our function in Func and a 2nd variable to hold the HttpRequestMessage. Then we will set the values in the constructor.

The Func is not something that you see everyday but it is very useful. Basically it is a placeholder for a function and returns back whatever object we tell it to. This is very useful when creating generic handlers like we are doing. The value that we will set the Func variable to when we call our wrapper is the function that will give us the results for the response.

private readonly Func<T> _func;
private readonly HttpRequestMessage _request;

public WrapResponseResult(Func<T> func, HttpRequestMessage request)
{
 _func = func;
 _request = request;
}

Next we are going to create a method within the WrapResponseResult class to create our HttpResponseMessage. This method will take in two parameters: Func and HttpRequestMessage. Then it will execute the Func to get the result to add to the response. If the execution is successful it will return back a status message of 200. If it is not successful, it will check if it is an HttpResponseException and if it is will just rethrow the error since it is already in the format needed. If it is not an HttpResponseException it will return an HttpResponseMessage with a status code of 500 Internal Server Error.

public HttpResponseMessage CreateResponse(Func<T> func, HttpRequestMessage request)
{
 try
 {
 return request.CreateResponse(HttpStatusCode.OK, func());
 }
 catch (HttpResponseException ex)
 {
 throw;
 }
 catch (Exception ex)
 {
 return request.CreateResponse(HttpStatusCode.InternalServerError, ex.Message);
 }
}

The last thing to do is update the ExecuteAsync method to call the CreateResponse method and pass in our _func and _request variables.

public Task<HttpResponseMessage> ExecuteAsync(CancellationToken cancellationToken)
{
 return Task.FromResult(CreateResponse(_func, _request));
}

Completed WrapResponseResult

The completed WrapResponseResult should look like:

public class WrapResponseResult<T> : IHttpActionResult
{
 private readonly Func<T> _func;
 private readonly HttpRequestMessage _request;

 public WrapResponseResult(Func<T> func, HttpRequestMessage request)
 {
 _request = request;
 _func = func;
 }

 public Task<HttpResponseMessage> ExecuteAsync(CancellationToken cancellationToken)
 {
 return Task.FromResult(CreateResponse(_func, _request));
 }

 public HttpResponseMessage CreateResponse(Func<T> func, HttpRequestMessage request)
 {
 try
 {
 return request.CreateResponse(HttpStatusCode.OK, func());
 }
 catch (HttpResponseException ex)
 {
 throw;
 }
 catch (Exception ex)
 {
 return request.CreateResponse(HttpStatusCode.InternalServerError, ex.Message);
 }
 }
}

Updating Api Method to Use Generic Response Handler

Now that we have our WrapResponseResult class created, we need to update our FirstController to return a WrapResponseResult.

Open up the Controllers\FirstController.cs file
Change the return type of the Get method to WrapResponseResult
```
 public WrapResponseResult<UserModel> Get()
{
}
```

Replace the contents of the Get method with the code below. When the WrapResponseResult ExecuteAsync method is called it will run the code in the () => { } function.

 return new WrapResponseResult<UserModel>(() =>
{
string userName = RequestContext.Principal.Identity.Name;
return new UserModel { UserName = userName };
}, this.Request);

If you open a web browser and do a get against the api/First endpoint, you won’t see any difference from what is returned back compared to just returning UserModel. However, the benefit is that you now have a single generic method that will execute the function to get the results, format out the results, and check for errors. This greatly simplifies the logic and amount of code that you will need to write for all of your Web Api methods. As well since all of the methods will be using the same response handler, if you ever had to make a change to how the response is generated, all of the logic is contained within one class.

ASP.NET Web Api - Setup JSON Camel Cased Fields

Justin James — Wed, 31 Aug 2016 00:00:00 +0000

Welcome to the continuing series on getting started with ASP.NET Web Api. In the last post, we created our ASP.NET Web Api project, created our 1st controller and enabled Windows authentication. In this article we will learn how to set the JSON response to convert the .NET pascal cased properties into camel cased properties.

The naming convention between .NET and JSON is different but we should present our Api users the naming convention that they expect without having to write all kinds of conversion code. Luckily this is very easy to accomplish with a few lines of code in ASP.NET Web Api.

For the naming convention, .NET uses pascal case which means that properties start each word in the property name with a captial letter (e.g. UserName). JSON uses camel case which means that the property names start with a lowercase letter and then each word after that starts with a captial letter (e.g. userName). Notice the lower case u in userName and then the uppercase N for the next work.

Before we get started, if you have not read the first post, I would suggest that you do so before continuing with this artcle so that you are at the same starting point as I am. It will take you about 10 minutes to complete the 1st article.

The first thing that we are going to do is create a C# class to hold the information about the logged in user. Then we will update the FirstController that we created in the previous post to return the C# class that we created.

Creating A Class to Return from Web Api Method

Open up the solution that we created in the previous article in Visual Studio
In the solution explorer, right-click on the Models directory
Select Add
Select Class

In the “Add New Item” dialog that comes up, name the file UserModel.cs and click ok

In the UserModel.cs replace the contents with the following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Web Api_Demo.Models
{
 public class UserModel
 {
 public string UserName { get; set; }
 }
}

Next we need to update the FirstController Get method to return a UserModel with the UserName set to the logged in user.

Open the Controllers\FirstController.cs file
Change the return type of the Get method to UserModel
Change the return statement to create a new UserModel with the UserName set to RequestContext.Principal.Identity.Name

public UserModel Get()
{
 return new UserModel { UserName = RequestContext.Principal.Identity.Name };
}

You will also need to add the following using statement so that is knows how to find the UserModel class we created.

using Web Api_Demo.Models;

Testing Default Behavior

We are now ready to test our changes. However, before we do, we need to make 1 configuration change. Previously we were able to test in our browser since we didn’t care if XML was returned. This time we do care about the return type as we want it to be JSON. By default XML is returned when hitting the url directly from the browser since it sends application/xml as the content-type from the browser. There are two options to fix this: 1.) Use the Google Chrome Extension Postman to do our testing and tell it the type is application/json 2.) Turn off XML as a format option.

Since we do not need XML to be returned from our Web Api we are going to go with option #2.

Open the file App_Start\Web ApiConfig.cs
In the Register method, add the following code after the call to config.Routes.MapHttpRoute

config.Formatters.Remove(config.Formatters.XmlFormatter);

Press F5 to compile our code and start a debug session. Go to the api/first endpoint and you will notice that the output casing currently matches that of our C# class.

{"UserName":"[My User Name]"}

Now that we have our Api updated to return the UserModel C# class that we created, we need to configure the JSON formatter to convert the C# class properties to camel case.

Updating Web Api Configuration

To fix the casing, we will use the CamelCasePropertyNamesContractResolver that is part of the JSON.NET library that is included with Web Api.

Open the file App_Start\Web ApiConfig.cs
In the Register method, add the following code after the call to config.Routes.MapHttpRoute

var json = GlobalConfiguration.Configuration.Formatters.JsonFormatter;
json.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();

We also need to add the using statement to tell .NET where to find the CamelCasePropertyNamesContractResolver

using Newtonsoft.Json.Serialization;

Now anytime we return back a serialized .NET class, all of the properties will be converted to the standard JSON camel case instead of using the standard .NET Pascal case.

If you press F5 to compile our code and start a debug session and go to the api/first endpoint, you will notice that the output casing is now camel cased

{"userName":"[My User Name]"}

Conclussion

In this guide we learned how to convert the JSON output response to be camel cased instead of the .NET pascal case without having to modify all of our .NET classes. In the next post, we will look at creating a common response format to all of the endpoint return values.

ASP.NET Web Api - Getting Started

Justin James — Tue, 23 Aug 2016 00:00:00 +0000

Welcome to the series on getting started with ASP.NET Web Api. In this article we will create a basic C# Web Api with Windows Integrated Authentication and create our first Web Api endpoint.

ASP.NET Web API is a framework that makes it easy to build HTTP services that reach a broad range of clients, including browsers and mobile devices. ASP.NET Web API is a great platform for building RESTful applications using the .NET Framework.

In this series we will learn how to:

Create a basic C# Web Api with Windows Integrated Authentication
Setup camel-cased json properties for the response
Setup A Standard Response
Solving CORS Issues When Using Credentials

Create a new Web Api Project

To make a C# application with Visual Studio:

Open Visual Studio 2015. Any edition will work. I am using Community Edition.
Click File -> New -> Project…
Find and select ASP.NET Web Application, give your application a name and select ok
1. On the left side under Installed -> Templates, select Web
2. Select “ASP.NET Web Application”
  - Note: Your list of templates may differ but as long as your have the ASP.NET Web Application template listed we are good to go.
3. Give the project a name (Web Api-Demo in this case)
4. Select a location to store the project (c:\projects in this case)
5. Uncheck the “Application Insights” box since we are not going to be using Application Insights
6. Click the Ok button
On the next screen, we need to select the New ASP.NET Project Options
1. Select Web Api for the template
2. Click on the “Change Authentication” button
  - Select “Windows Authentication”
  - Click Ok
3. Uncheck “Host in the cloud”
4. Click Ok to generate the project
You project has now been generated and you should see a screen similar to the follow in Visual Studio
If you hit F5 your default browser will launch with the Web Api Start Page.
The Web Api project comes with a couple of Web Api Endpoints and a very useful Api documentation page that shows all of the available Api endpoints. Click on the API link in the top nav bar to view the documentation page.

Creating Our First Controller

Now that we have a working Web Api project, lets add some functionality to it. The first thing we are going to do is to create a controller that will return back the logged in Windows user using Windows Integrated Authentication.

Note: You should only uses Windows Integrated Authentication within a business and not for a public Api. {:.warning}

In the Solution Explorer, right-click on the Controllers
Select Add from the menu the comes up
Select “Controller…” from the list of templates

This will open up the Controller type options.

Select “Web API 2 Controller - Empty”
Click the Add button

Next you will need to input the file name.

Change the file name to FirstController
Click the Add button

We now have a blank Web Api Controller that is ready for us to create methods within.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

namespace Web Api_Demo.Controllers
{
 public class FirstController : ApiController
 {
 }
}

We are now going to add a GET method that will return back the logged in user.

public string Get()
{
 return RequestContext.Principal.Identity.Name;
}

Before we test our new controller, we need to make sure that Windows Authentication is enabled and Anonymous Authentication is disabled.

Open Solution Explorer, select the Solution and press F4 to open the Properties window
Set “Anonymous Authentication” to disabled
Set “Windows Integrated” to enabled

Now we are ready to test our Api. In Visual Studio, press F5 to start up a debugging session. This will launch your default web browser. Once the initial page for Web Api has loaded navigate to the /api/first page (e.g. http://localhost:58842/api/First). Your port number will be different than mine.

The response you get back will be an xml document that contains a string with your domain and user name that you are logged in with. In this case it is [Your Domain]/[Your User Name]. It will look similar to below.

<string xmlns="http://schemas.microsoft.com/2003/10/Serialization/">[Your Domain]/[Your User Name]</string>

Conclusion

In this guide we learned how to create a basic C# Web Api project that uses Windows Integrated Authentication. In the next guide, we will learn how to convert the JSON responses to be camel cased instead of following the .NET pascal case convention without having to update all of our .NET class.

Running Multiple Version of Node On Windows

Justin James — Wed, 20 Jul 2016 00:00:00 +0000

I am sure that many of you are in the same situation that I am in with needing a different version of node for different projects and you don’t want to have to create a new virtual machine for each project just because of node. Luckily with nvm you can install multiple versions of Node on the same machine and switch between them with a simple command line call.

The one downside to having multiple versions of Node installed is that you have to install the global packages for each version of node that you want them available to. There is no ability to share packages between versions. This means that it will take a bit more disk space but most node packages are fairly small so this should be a none issue.

Installing NVM

The first thing that we need to do is install NVM.

Uninstall existing version of node since we won’t be using it anymore
Delete any existing nodejs installation directories. e.g. “C:\Program Files\nodejs”) that might remain. NVM’s generated symlink will not overwrite an existing (even empty) installation directory.
Delete the npm install directory at C:\Users[Your User]\AppData\Roaming\npm

We are now ready to install nvm. Download the installer from https://github.com/coreybutler/nvm/releases

To upgrade, run the new installer. It will safely overwrite the files it needs to update without touching your node.js installations. Make sure you use the same installation and symlink folder. If you originally installed to the default locations, you just need to click “next” on each window until it finishes.

Installing and Picking a node version

Get a the list so you can see what is available
```
 $ nvm list available
```
Pick the one you want to install. Below we are installing 4.4.5 and 5.10.1. You can pick any version that you want.
```
 $ nvm install 4.4.5
$ nvm install 5.10.1
```
Select the node version to use. Note that only 1 node version can be activate at a time.
```
 $ nvm use 4.4.5
$ nvm use 5.10.1
```

Reminder! Any global npm modules you may have installed are not shared between the various versions of node.js you have installed. Additionally, some npm modules may not be supported in the version of node you’re using, so be aware of your environment as you work.

Installing Packages

Installing Node packages is the same as you are used to. Nvm just switches out which version is referenced in your path variables.

npm install [package name] [--save or --save-dev]
npm install -g [package name]

Other Commands

View Default Node Architecture Being Used

$ nvm arch

Change Default Node Architecture

$ nvm arch 32
$ nvm arch 64

Install Node Version

$ nvm install 4.4.5
$ nvm install 4.4.5 64
$ nvm install 4.4.5 32

Get Installed Versions

$ nvm list

Get Available Versions to Install

$ nvm list available

Turn On nvm

$ nvm on

Turn Off nvm

$ nvm off

Set Proxy

$ nvm proxy [url]

Remove Proxy

$ nvm proxy none

View Proxy Setting

$ nvm proxy

Uninstall Node Version

$ nvm uninstall [version number]
$ nvm uninstall 4.4.5

Select Node Version to Use

Note: The [arch] parameter below is optional

$ nvm use [version] [arch]
$ nvm use 4.4.5 64

Get the Nvm Version

$ nvm version

Now you can easily switch between Node versions and don’t have to worry about compatibility with your code not working on your installed Node version.

Docker - Running Container As a Service

Justin James — Wed, 15 Jun 2016 00:00:00 +0000

In the previous tutorial we learned how to mount additional directories within the Docker containers. In this tutorial we are going to learn how to run a Docker container as a service a.k.a daemon for nginx and mysql.

To run a Docker container as a daemon, we run it with the -d flag. This will tell Docker to start up the container in the background and return back to the command prompt.

nginx

The Docker Hub image for run an nginx server, is called nginx. If you do not already have the nginx image the run command will download it from the Docker hub. To start the nginx container run:

 docker run -d -p 8000:80 nginx

-d: runs container in the background
-p: set the port to forward to.

Once the nginx container is up and running, we can verify it is running by executing

 docker ps

To see all of the containers even if they are not running execute add a -a

To connect to the nginx web page, we need to know the ip address of the docker machine.

 docker-machine ip

In my case it is 192.168.99.100. To navigate to the web page, open up a browser and navigate to http://192.168.99.100:8000/.

If you need to to attach to a shell within the running container, run

docker attach [container id]

If docker attach never connects, run docker exec -i -t [container id] /bin/bash {:.warning}

If you need to stop the container, run

docker stop [container id]

You can verify it stopped by running

docker ps -a

If you are done with the container and ready to delete it, run

docker rm [container id]

MySQL Sample

This example will download the mysql image, create a mysql database and expose it to your local machine to interact with.

$ docker run --name some-mysql -e MYSQL_ROOT_PASSWORD=my-secret-pw -e MYSQL_USER=mysql_user -e MYSQL_PASSWORD=mysql_user1 -e MYSQL_DATABASE=mysql_test -p 3306:3306 -d mysql

–name: is the name to give the container
-e: sets environment variables
-d: runs container in the background
-p: set the port to forward to.

Once the MySql container is up and running we can see that it is running with

 docker ps

To see all of the containers even if they are not running execute add a -a

To connect to the MySql database, we need to know the ip address of the docker machine

 docker-machine ip

Then we need to install MySql Workbench from https://www.mysql.com/products/workbench/ to connect to the database to interact with the database.

If you need to to attach to a shell within the running container, run

docker attach [container id]

If docker attach never connects, run docker exec -i -t [container id] /bin/bash {:.warning}

If you need to stop the container, run

docker stop [container id]

You can verify it stopped by running

docker ps -a

If you are done with the container and ready to delete it, run

docker rm [container id]

WARNING: This will delete any data that you added to the database {:.warning}

You have learn how to run 2 different types of Docker containers as background containers. Any Docker container can be run as a background container by using the -d when starting up the container for the first time.

Docker - Mounting Windows Directories in Containers

Justin James — Fri, 03 Jun 2016 00:00:00 +0000

In the previous tutorial we learned how to install Docker and get our first container running. In this tutorial we are going to learn how to mount additional directories within our Docker container that are outside of the c:\Users directory. By default, Docker only mounts the c:\Users directory inside the docker machine and containers. For myself, I have all of my project files two places: c:\projects and c:\personal. I didn’t want to change my standard configuration just for Docker. Luckily, it is really easy to mount additional directories.

To mount additional directories, you need to add the directory as a shared folder within Virtualbox and then enable long file paths and symlinks. Once the Virtualbox shared folders are setup, you need to mount the directories within the docker machine so that they are available to the containers.

Step 1: Adding Shared Folders

The first step is to add the directories as Virtualbox shared folders by using the VBoxManage.exe utility that comes with Virtualbox. VBoxManage.exe is located in your Virtualbox install directory, which by default is C:\Program Files\Oracle\VirtualBox.

Warning: To make symlinks works when you start up the docker-machine, you need to run the Docker Quickstart Terminal or Command Line as an administrator. This is a security limitation of Windows for symlinks.

Before adding the shared folders, we need to make sure that no docker machines are running. We are going to check for running docker containers and machines as both a non-admin and admin.

Non-Admin Checking For Running Machines

Launch the Windows Command Prompt and run

$ docker-machine ls

If any machines comes back with the state of running, you will need to stop the machine.

Before stopping the machine you will want to make sure that your containers are stopped.
```
 $ docker ps
```
For any containers that are returned you can stop them by running
```
 $ docker stop [Container ID]
```
Once all of the containers are stop, you can stop the docker machine. Replace the “[machine name]” with you machine name that we returned from the docker-machine ls command. Typically you will only have 1 machine and it will be named default
```
 $ docker-machine stop [machine name]
```

Admin Checking For Running Machines

Open the Windows Command Prompt as an administrator.
- Start Menu
- Search for command prompt
- Right-click on the Command Prompt and select Run as Administrator
To check if any docker machines are running, run the command:
```
 $ docker-machine ls
```

If any machines comes back with the state running, you will need to stop the machine.

Before stopping the machine you will want to make sure that your containers are stopped.
```
 $ docker ps
```
For any containers that are returned you can stop them by running
```
 $ docker stop [Container ID]
```
Once all of the containers are stop, you can stop the docker machine. Replace the “[machine name]” with you machine name that we returned from the docker-machine ls command. Typically you will only have 1 machine and it will be named default
```
 $ docker-machine stop [machine name]
```

We are now ready to add in our shared folders.

Navigate to the Virtualbox directory.

 $ cd "c:\Program Files\Oracle\Virtualbox"

Run the following command to add the shared folders. For your shared folders, replace the projects or personal name in the name and hostpath options.

 $ VBoxManage.exe sharedfolder add default --name "c/projects" --hostpath "\\?\c:\projects" --automount
$ VBoxManage.exe sharedfolder add default --name "c/personal" --hostpath "\\?\c:\personal" --automount

The \?\ in the hostpath tells Windows to enable long file paths.

Step 2: Allow Long Paths and Symlinks

If you are using node many of the modules will create symlinks which are supported under Virtualbox but you need to make a configuration change to enable them.

 $ VBoxManage.exe setextradata default VBoxInternal2/SharedFoldersEnableSymlinksCreate/v-root 1

Next you need to enable symlinks for each of the shared folders. Replace SharedFolderName with the –name value that you used when creating the sharedfolder.

$ VBoxManage.exe setextradata default VBoxInternal2/SharedFoldersEnableSymlinksCreate/c/personal 1
$ VBoxManage.exe setextradata default VBoxInternal2/SharedFoldersEnableSymlinksCreate/c/projects 1

Step 3: Mounting Shared Folders in Docker

Warning: To make symlinks works when you start up the docker-machine, you need to run the Docker Quickstart Terminal as an administrator. This is a security limitation of Windows for symlinks. Right-click on the Docker Quickstart Terminal and select Run As Administrator.

Unfortunately even with auto-mount Docker will only mount the c/Users folder in the docker-machine. If you want the folders to auto-mount you will need to manually mount them each time you start up the default docker machine.

Open the Docker Quickstart Terminal as an administrator
- Start Menu
- Search for Docker Quickstart Terminal
- Right-click on the Docker Quickstart Terminal and select “Run as Administrator”
In order to mount the directories we need to ssh into the docker machine
```
 $ docker-machine ssh default
```

Once you have ssh’ed into the docker machine run the following commands to mount the shared folders we created.

 $ sudo mkdir --parents /c/projects
$ sudo mount -t vboxsf c/projects /c/projects/
$ sudo mkdir --parents /c/personal
$ sudo mount -t vboxsf c/personal /c/personal/

Within the docker machine you should now be able to see the files and directories in /c/projects and c/personal
```
 $ ls /c/projects
$ ls /c/personal
```
exit the ssh session
You are now ready to start up or create your containers

Step 4: Using the Shared Folders

Now that the shared folders are mounted in the docker machine to use them from a container -v argument. The command below will mount the local directory c:\projects (in unix form /c/projects) to /projects within the container. The -it say run interactively, ubuntu is the image name and bash is the type of interactive shell

 $ docker run -v /c/projects:/projects -it ubuntu bash

From the container, you can look at the projects directory by running

 $ ls /projects

You are now ready to start using the container for your development work. In the next tutorial we will look at running docker containers in the background for processes like mysql and postgres.

Docker - Getting Started On Windows

Justin James — Tue, 31 May 2016 00:00:00 +0000

After seeing a Docker presentation recently I decided to finally figure out how to get Docker working correctly on Windows. Luckily it worked out of the box fairly well but I did run into issues with Windows file path lengths and proxy issues. This series of article will documented how I got Docker working and overcame those issues.

To get started, you will need the docker toolkit. I followed the instructions on the Docker website to get the Docker Toolkit with Virtualbox installed. The instructions for Windows are at https://docs.docker.com/windows/. The instructions also have links to the Linux and Mac instructions. As I am a Windows user, I can only verify that this tutorial all worked under Windows.

Once you get the Docker toolkit installed you are probably wondering now what do I do. On the desktop, it installed a shortcut to the “Docker Quickstart Terminal”. This terminal will ensure that you have the base image that Docker uses for Virtualbox on Windows and you can run all of the Docker commands from this terminal.

The reason that we need Virtualbox is because Windows does not yet natively support Docker containers. All of the containers run within a Linux virtual machine that Docker is using.

Below are a few examples to help get you started with usage of Docker.

Example 1: Basic Hello World

This will download the hello-world image if it is not already one your machine. Then is will create a container, run hello-world and finally remove the container (–rm).

 docker run --rm hello-world

Example 2: nginx

This example will start up an nginx web server.

When you run the docker run command, it will pull down the nginx image if you do not already have it, the -d will leave the container running in the background, and the -p will set port forwarding of port 8000 to port 80 in the container.

 docker run -d -p 8000:80 nginx

Once the nginx container is up and running we can see that it is running with

 docker ps

To connect to the nginx web page, we need to know the ip address of the docker machine.

 docker-machine ip

In my case it is 192.168.99.100. To navigate to the web page, open up a browser and navigate to http://192.168.99.100:8000/

Since the container is running behind the scenes, to stop the container you need to issues the

 docker stop command.
docker stop [Container ID from docker ps command]

Example 3: Ubuntu Bash Shell

This example will download the ubuntu docker image and start up an interactive bash shell that will allow you to make changes to the image.

 docker run -it ubuntu bash

If you want to interact with files on the host system you can do this as long as they are in the c:\Users directory. Docker auto mounts this directory for you. In a future post will cover the ins and outs of mounting other directories. {:.warning}

Also, in a future post, we will cover how to save the change made to a container to a new image that you can use as the base for future containers.

Finding Additional Docker Images

So far we have used a few basic images but there are many more Docker images available in the Docker Hub at http://hub.docker.com. The Docker Hub host a number of common containers that you might use for your application such as node, mysql, postgres, couchbase, plus many more.

Once you find an image that you want to get run

 $ docker pull [Image Name]

If you want to pull only a specific version of any image which is common with the nodejs so that you can get the version of node that you need versus the latest version of node, run the following

 $ docker pull [image name]:[tag or version]

Common Docker Commands

Below is a list of common commands that you will get you started using Docker.

List Docker Images

 $ docker images

Get Docker image from Docker Hub

 $ docker pull [image name]

Get Docker Image from at specific version

 $ docker pull [image name]:[tag or version]

Update an existing image

 $ docker pull [image name]

list of running containers

 $ docker ps

Seeing Existing Containers

 $ docker ps -a

See last nth Container Created

 $ docker ps -n=1

Will pull last container created. -n says how many back to pull

Connect to Existing Container

 $ docker start -i [Container ID]

-i connects to the standard in/out.

Delete image

 $ docker rmi [image id]

It will warn you if you have a container based on the image {:.warning}

Delete container

 $ docker rm [container id]

Wrap-up

Docker is a powerful tool to have in your arsenal. Once you get it working on Windows, you will never install services that can run within Docker locally again. With Docker you can run light-weight containers for services such as mysql, postgres, mongodb, redis, node, plus many more.

This is the first of several post on using Docker. In future post we will cover mounting additional directories, saving changes to a container into an image, saving our image to the Docker Hub and creating our own Docker image from scratch.

Jekyll Tip: Showing Liquid Code in Code Snippets

Justin James — Thu, 26 May 2016 00:00:00 +0000

When blogging with Jekyll there are times when you want to be able to output a code snippet that contains what Jekyll thinks is liquid code. This especially happens when you are doing Angular tutorials since using the double brackets ({{ }}) for data binding. Since the code snippets are enclosed in a pre tag, you are not able to html encode the brackets.

Instead, to include liquid markup in the code snippet you need to surround the code snippet with the raw and endraw tags like so

{% raw %}
{{ Notice the double brackets will be in the output }}
{% endraw %}

This will output:

{{ Notice the double brackets are output }}

Jekyll Tip: Adding Styling To Html Output

Justin James — Tue, 24 May 2016 00:00:00 +0000

As I was writing some tutorials recently I wanted to be able to style the html elements that Jekyll outputs with different css classes without having to write the actually html in the markdown.

For example I wanted to use a blockquote for items to be aware of that has a blue highlight as well as warnings to watch out for that has a red highlight. Here is the output of the blockquote with the different styles.

This is a normal blockquote. Without doing anything extra in markdown this is my default blockquote.

This is a warning blockquote. {:.warning}

With the kramdown markdown parser that Jekyll uses you can easily add these css classes without having to write out the html code.

Basics

In order to specify additional attributes to output in the html on the element, you start it with:

{: }

To specify a class it is

{:.MyClass}

To specify a title attribute it is

{:title="My Title"}

Below are some specific examples.

Paragraph

markdown

{:.fake-h2}
This will be styled as a p tag with the css class fake-2

html output

<p class="fake-h2">This will be styled as a p tag with the css class fake-2</p>

List

markdown

* {:.done} done - Completed this
* Not done yet

html output

<ul>
 <li class="done">done - Completed this</li>
 <li>Not done yet</li>
</ul>

blockquotes

With the blockquote you can also optional elements such as a title and id tag.

markdown

> The npm install command will take several minutes to run depending on internet speed
{:.warning}
{:title="my title"}
{: #myid }

html output

<blockquote class="warning" id="myid" title="my title">
 The npm install command will take several minutes to run depending on internet speed
</blockquote>

inline

In the previous examples, we were adding classes to the whole element. However, there are times where you just want to highlight something within an element or sentence. For these times, you write the styling the same way as above but have to put it inline with the text.

markdown

This *is*{:.underline} some `code`{:#id}{:.class}.
A [link](google.com){:rel='something'} and some **tools**{:.tools}.

this *is italic*{::}*marked*{:.special} text

html output

<p>This <em class="underline">is</em> some <code id="id" class="class highlighter-rouge"> code</code>.
A <a href="google.com" rel="something">link</a> and some <strong class="tools">tools</strong>.</p>

<p>this <em>is italic</em><em class="special">marked</em> text</p>

With these new tricks you can make you markdown output look even better without having to resort to writing a lot of html within your markdown.

Add Table of Contents to Markdown

Justin James — Tue, 10 May 2016 00:00:00 +0000

When you are writing tutorials that are broken up by sections it is nice to have a table of contents at the top to help the users navigate. However, maintaining this by hand is a no go. Luckily there is a great npm package called doctoc that will look at the headings in your markdown file and generated a table of contents for you.

Table of Contents Sample Using This Post

Installing
Adding to All Files
Add to Single File
- examples
Skipping Files
Specifying Location of the Table of Contents
Changing the Title to the Table of Contents
Changing Max Level of Headings
Site Compatibility
Using with Jekyll
Running doctoc as a Git pre-commit
More Info

Installing

npm install -g doctoc

Adding to All Files

doctoc .

Add to Single File

doctoc /path/to/file [...]

examples

doctoc README.md
doctoc CONTRIBUTING.MD LICENSE.MD

Skipping Files

There is no built-in mechanism out of the box for doctoc to skip certain files from having a table of contents. However you can add a comment to each file and then use a little bit of command line logic to exclude those files. Below are examples using Ack and out-of-the-box Windows commands.

The first step is to add this line of text to the markdown files to skip of:

<!-- DOCTOC SKIP -->

Using Ack which requires Perl

ack -L 'DOCTOC SKIP' | xargs doctoc

Here is an example using built-in Windows command line options. If you are not running it in the directory that contains your markdown files that you want a table of contents on then make sure to update the source variable.

@echo off
setlocal
set source=.
set extension=*.md
set string="DOCTOC SKIP"
for /f "tokens=*" %%G in ('dir "%source%\%extension%" /a:-d /b') do (
find /c /i %string% "%%G" > NUL || (
echo "Add TOC to %%G"
doctoc --github --title "**Table of Contents**" "%%G"
)
)
pause

Specifying Location of the Table of Contents

By default doctoc will add the table of contents at the top of the file. You can however indicate where you would like to have it placed with the following:

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
<!-- END doctoc generated TOC please keep comment here to allow auto update -->

Changing the Title to the Table of Contents

Pass in the –title option

doctoc --title '**Contents**' .

Changing Max Level of Headings

By default it will process 4 levels. You can change this with the maxlevel option

doctoc --maxlevel 3 .

Site Compatibility

By default doctoc generated github formatted links. To change use the following:

--bitbucket bitbucket.org
--nodejs nodejs.org
--github github.com
--gitlab gitlab.com
--ghost ghost.org

example

doctoc README.md --bitbucket

Using with Jekyll

UPDATED 2016-05-10: For Jekyll the recommendation is now to use the kramdown table of contents built-in generator

With the kramdown parser that Jekyll uses by default you can easily add in a table of contents. The one limitation that had stopped me from using it for the pages that I wanted a table of contents is that it gets all headers and not just the ones after he table of contents. Granted most of the time that table of contents is at the top of the page but I had an objectives section above my table of contents that was being added in the table of contents which I did not want. However, I was able to work around this issue by using html and CSS instead of markdown for the headers I wanted to exclude. I would style the div tag just like it was an H1-H6 tag without it actually being a header.

To use add a table of contents using kramdown on your Jekyll blog, add the follow to your file where you are want your table of contents.

* TOC
{:toc}

Jekyll Kramdown TOC Sample Showing All Headers

TOC {:toc}

This will cause the * TOC to be replaced with the actual table of contents when the jekyll build/serve is run.

Running doctoc as a Git pre-commit

To remember to always update the Table of Contents before committing to you can use a git hook to run your doctoc call before committing any files to Github for your repo.

Go into the .git\hooks directory
Copy the pre-commit.sample to pre-commit with no file extension
Add your doctoc command to the file and save
Now the next time you do a git commit the table of contents will automatically updated

More Info

Github Repo

npm package

Factory Reset Dell Venue 7 x86 Android Tablet

Justin James — Wed, 13 Apr 2016 00:00:00 +0000

I rarely use my Dell tablet and when I went to use it again I couldn’t remember the lock pattern. No problem I thought I will just reset it but I had since changed or my router and the tablet wasn’t able to connect to the Internet.

So my only option was to figure out to do a factory reset of the device. This device does not have a reset button on it. So off to Google I went.

So long story short. After much searching I figured it out.

Hold power button down to shutdown the device
Power on device and immediately hold volume down button.
This will bring you to a screen where you can selected DruidBoot or Recovery. Use could button to navigate to Recovery option and then press the power button to select it.
You will then get the Android logo will an exclamation point over it. This is Androids way of saying you don’t have a custom recovery. Hold down the power and press the volume up to get a mini menu.
Select factory reset from the options. Use volume buttons to navigate up and down. Press power once you have factory reset selected.
On the next screen is a menu that ask are you sure you want to reset. Use the volume buttons to navigate to the I am sure option.
It will take several minutes to reset the device and deleted all of the data. When done it will return you to the initial menu.
Select the reboot option and when it completes the start up it will walk you through the initial setup agasetup Android.

Figuring out these instructions was a pain. I was ready to give up on the tablet being able to be used again and just put it in a drawer to collect dust. Now I can use the tablet again and it only took a few minutes once I figured out the instructions.

Jekyll Part 14: How To Validate Links and Images

Justin James — Mon, 01 Feb 2016 00:00:00 +0000

Welcome the continuing series on using Jekyll. In this tutorial we are going to go through how you can validate your link and image references.

As your blog grows and you get more posts, it becomes harder to validate images and links are still valid on older post. On new post it is pretty easy since you only have one last to look for. However, this is a process that can be fully automated so got don’t even have to worry about it anymore.

Since Jekyll is Ruby based we are going to use a ruby gem called html-proofer. Html-proofer is a command line utility that will run a set of tests to validate your HTML output. These tests check if your image references are legitimate, if they have alt tags, if your internal links are working, and so on. It’s intended to be an all-in-one checker for your output.

Installation

You can either install the gem as part of your Gemfile or as another ruby gem.

Add this line to your Gemfile

gem 'html-proofer'

and then execute

bundle

or install it yourself, just like any other ruby gems

 gem install html-proofer

Generating Report

To generate a report open up the command line and run the command the corresponds to how you install html-proofer.

Gemfile

bundle exec htmlproofer ./_site/ --only-4xx

Ruby Gem

htmlproofer ./_site/ --only-4xx

The –only4xx parameter above tell it to only reports errors for links that fall within the 4xx status code range. This would capture not found (404) and not authorized (401) errors but would ignore 500 internal server errors. The reason to ignore 500 errors is that we don’t want validation to fail if their web server is throwing an error since we are only testing that the link went some place valid.

You will now get a report of any broken links or image tags. Since html-proofer is evaluating the Jekyll output, you may need to look at some of the include or layout file to fix links.

Once you get the initial set of issues fixed, you will mainly have to worry about the new updates to your blog.

Overall, this will help improve the quality of your blog by ensuring that you fix broken links and images before your users spot them.

AngularJS - Calling Filters in Your Angular Controller

Justin James — Thu, 28 Jan 2016 00:00:00 +0000

Note: This post applies to AngularJS. The 1.x version of Angular. AngularJS has been end of life at of 12/31/2021.

Here is a quick tip for how to call a filter from within your Angular controller. This example assumes that you already know what a filter is and have one created.

Inject $filter into your controller

angular.module('sample').controller('SampleController', SampleController);

/* @ngInject */
function SampleController($filter) {
}

Call your filter by calling:
- View call your filter called “myFilter” on myDateVariable with arguments arg1 and arg2, you would use:
```
<p>{{myDateVariable | myfilter : arg1 : 'arg2' }}</p>
```
- Controller call the same filter from within your controller:
```
function SampleController($filter) {
 var value = $filter("myFilter")(myDateVariable, arg1, arg2);
}
```

AngularJS - Communicating Between Parent And Child Scopes

Justin James — Mon, 25 Jan 2016 00:00:00 +0000

Note: This post applies to AngularJS. The 1.x version of Angular. AngularJS has been end of life at of 12/31/2021.

Here is a quick tip in Angular on how to communicate between parent and child scopes.

If you have a need to send notification of an event from a parent scope to a child scope, you use $scope.$broadcast to send the event.

$scope.$broadcast("parent event name", dataTo Send);

If you then need to send notification of an event from the child scope back to the parent scope you use $scope.$emit

$scope.$emit("child event name", dataTo Send);

To listen to the events regardless of if it sent from the parent or child scope, you use $scope.$on.

$scope.$on("parent event name", function(){
});
$scope.$on("child event name", function(){
});

AngularJS In Action Book Review

Justin James — Thu, 21 Jan 2016 00:00:00 +0000

Note: This post applies to AngularJS. The 1.x version of Angular. AngularJS has been end of life at of 12/31/2021.

At the HolidayJs event I won a book and I picked a copy of Angular In Action by Lukas Ruebbelke. I had already been using Angular for a few projects and wasn’t expecting to get much out of the book. Honestly I got it to use as more of a give away at one of my talks but figured I would at least glance through a few chapters of it first. Needless to say I ended up reading the whole book and plan to keep it.

This book is one of the best introductions to Angular that I have read. Lukas does a fantastic jobs of explaining how it all works with lots of good code examples in a way that is very easy to understand. The book walks you through building a Trello clone with a pre-built backend so that you can stay focused on Angular and not worry about the data storage. After reading this book and going through the code examples you will be well on your way to being able to create your own Angular application.

The book starts off explaining how all of the parts of Angular play together: configurations, routes, views, directives, controllers, services, and $scope. It is one of the best explanation that I had read or seen. Before this book I had understood how it played together enough to be able to code with it but couldn’t explain it well to others. Not anymore. If nothing else the opening chapter was more than worth it.

Before diving into the details of each component, Lukas tasks about how to structure your Angular applications. He covers the basics and some common best practices. For detailed style guides he refers you to John Papa and Todd Moto’s style guides. I very much appreciate that he didn’t rehash their style guides.

Next the book dives into the details of each of the components. He starts with views and controllers, then discusses services and finishes off with directives. He spends a while chapter on each component and the explanation of each is extremely easy to understand. He walks through each of the sections as he is building the sample app which really help to reinforce the concepts.

Then we take a trip into polishing the UI with animations. At first I was thinking this is a throw away chapter but it turned out to be a really fun chapter. Lukas did a good job of explaining how to quickly and easily create both CSS and Javascript animations. All of the code was very easy to understand and could easily be applied to any application. I may just have to start thinking about how to use animation in my application.

After animations, he jumps into how to navigate to the different views using routing with ngRoute. Like the rest of the book, it was a well explained chapter and a good overview for how routing actually works. I do wish that he had used UI router instead of ng-route since many of the projects that I have been working are using UI router but that is just me being greedy. ngRoute is more than enough for the coding examples. The loading spinner control was cool to see since this is something that every application should have to indicate something is happening to users.

Next up is a quick trip into forms and forms validation. This chapter cover the basics of form validation for textboxes using required and minimum length. He covered a nice bit of the basic form validation code that you would need to know. I do wish that he would have cover more of the Html controls such as drop downs, multiple select, checkboxes, etc.

One more cool thing that Lukas does is include a testing with Karma section in each of the chapters. Coming from an Agile background where I have done a good amount of automated unit tests for my projects, it was nice to see Lukas cover this topic. Lukas covers just enough to get you started on automated testing and shows you how easy it is to get started with it.

Overall, I would give this book 5 out of 5 stars. If you are already an Angular developer or just getting into Angular this is a must have book. Wish I would have had it a long time ago. Great job Lukas.

Link to book https://www.manning.com/books/angularjs-in-action

Ionic - Stop Icons from Overlapping in Ion List

Justin James — Tue, 19 Jan 2016 00:00:00 +0000

Today I ran into an issue using Ionic, where I was trying to put two icons on the right side of an ion list item. There is really easy to do with the item-icon-right css class. Unfortunately, when you have multiple icons, it overlaps instead of showing them side by side. I was not expecting this as I had only used 1 icon before and assumed that item-icon-right would just put them side by side.

Here is the code that causes the overlapped icons.

<ion-list>
<ion-item class="item item-icon-right">
Task 1
<i class="icon ion-ios-circle-outline"></i>
<i class="icon ion-close icon-accessory"></i>
</ion-item>
<ion-item class="item item-icon-right">
Task 2
<i class="icon ion-checkmark-circled"></i>
<i class="icon ion-close icon-accessory"></i>
</ion-item>
</ion-list>

Luckily, there is an easy fix for this using some built-in Ionic css classes. We need to convert the icons into buttons, surround them with a div that has the class “buttons” on it, and change the ion-item class from item-icon-right to item-button-right.

Also, to make the buttons still look like icons and not give them a border, we can use the button-icon class.

<ion-list>
<ion-item class="item item-button-right">
Task 1
<div class="buttons">
<button class="button button-icon ion-ios-circle-outline"></button>
<button class="button button-icon ion-close icon-accessory"></button>
</div>
</ion-item>
<ion-item class="item item-button-right">
Task 2
<div class="buttons">
<button class="button button-icon ion-ios-circle-outline"></button>
<button class="button button-icon ion-close icon-accessory"></button>
</div>
</ion-item>
</ion-list>

Preparing A Conference Talk

Justin James — Thu, 14 Jan 2016 00:00:00 +0000

I have done a bunch of conference talks and brown bag sessions this year (~45 in the past 2 years) and here is how I prepare for those talks. Sorry that the reply is a little long but I wanted to make sure you had a process to get started with. Remember that this is my process and you have to find what works best for you.

There is no set time for how long each phase takes. It all depends on the presentation and the length of it. I have had talks where I spent several weeks working on it while other talks were done in less than a day.

You can see a good number of my presentations at Presentations by Justin

Phase 1: Brainstorming

In this phrase you are brainstorm the flow and content of the talk. I like using Post-In notes for this since it is very easy to move them around and add/remove them and I don’t get into the rut of worrying about the content/format in powerpoint. I have also used mindmapping software for this but I like the low tech post-it notes better.

Jot down the goals for the talk. Essentially what do I want attendees to walk away with and what am I solving for them. Do I want attendees to be excited about a new technology? Is it having code samples that they can immediately implement into their projects? Is it helping them solve a common problem that I think they will run into?
Brainstorm the main categories/themes that the talk with be split into. I try not to have more more than 3 categories/theme. Don’t worry about wording here as long you know what the idea is.
Brainstorm the content under each category/theme. Since we are using post-in notes, it is meant to be just a few words and not the whole slide of content. I don’t have a limit on post-in notes per category. Each post-it equals 1 slide.
Arrange the categories and content post-in notes for each category in the order that I think it would go in.

At this point, the brainstorming for the overall content is done and I start drafting in powerpoint.

Also, a couple of times I have review these post-it notes with other people to get their feedback before I start drafting actual slides so that I can make sure that the content is something that makes sense and that I didn’t forget anything that they would want to see.

Phase 2: Drafting

Typically I move to powerpoint during this phrase but I have also times where I have done a full outline using just OneNote before moving into drafting in powerpoint.

Using the post-it note order from phrase 1, I create a slides for each post-in note. As I create each slide I populate the content of it. I find many times as I am drafting that what I thought would be slides either go away or change, so that is why I create the content as I got.

I do have a few rules I try to follow during this phrase to make sure that I don’t get bogged down in the details.

Don’t look for pictures for the slides. Focus on the content first. If I want a picture I make a note on the slide of what kind of picture I am looking for and once I finalize the content I go look for the pictures.
Don’t worry about the powerpoint template. Focus on the content first. If it is an Intel presentation, I normally start with the Intel template. If I am doing the presentation outside of Intel and it is not an Intel sponsored presentation, I don’t worry about the template until later.
Don’t worry about the number of bullet points per slide yet. That will come during the editing phase.
Don’t worry about transitions or only showing 1 bullet point at a time. Those get added during the finalizing phase.

At this point, you should have a good start to the talks content and slide deck. Now we need to focus the content and edit the slide deck.

Also, I normally don’t show other people the powerpoint during this phase since I have found that they get hung up the stuff you will be doing in the editing phase instead of review the overall structure and message.

Phase 3: Editing

In this phrase, we need to focus and tighten up the content of the presentation.

I edit each slide to have 3-5 single line bullet points max.
I remove excess words to make each bullet point short and sweet.
I make sure that I keep the font size between 24-28 pt for each bullet. This makes it so that people in the back of the room can read the bullets with ease and makes you focus each bullet point.
I make sure that the slide is a summary of what I want to say and not everything that I will be saying. People don’t want to listen to you read the slide to them.

Once the content editing is done, then I look for images and powerpoint templates.

Now onto the last phase where the presentation is finalized and you are ready to give it.

This is also the point that I would send out the presentation for people to review since it is essentially done.

Phase 4: Finalizing

Now it is time to put the finishing touches on the presentation.

Add transitions between slides. Nothing crazy, just a basic fade. I have gotten feedback from multiple presenters and attendees that having nothing makes it difficult for their eyes and brain to move to the next slide.
Have bullets come in 1 at a time (appear animation in powerpoint terms). Having all of the bullets show at once normally has the effect of having people reading the slide instead of listening to you.
Double check that the font is big enough
Double check that the font colors have enough contrast to be readable
Run though the slide in presentation mode and make sure everything works as expected (transitions, bullet animations, etc). Try to stand back 5-10 feet from the monitor and make sure that you can read the presentation.
If you are going to be giving it on a projector or TV, hook it up to one and make sure that it looks rights (fonts, font size, colors, etc)

##Phase 5: Practice

Practice you talk out loud as much as you can. By practicing the talk out loud you will find any spots where you might stumble on words or phrases or that something doesn’t make sense said out loud.

If you are going to use a slide advancer, make sure to practice with it. I strongly recommend a slide advancer if you don’t have one. Not having to run back to the laptop to go to the next slide or hunting for the page down makes your presentation smoother. I have the Logitech R400 slide advancer, http://www.amazon.com/Logitech-910-001354-Wireless-Presenter-R400/dp/B002GHBUTK/ref=sr_1_1?s=pc&ie=UTF8&qid=1449186602&s…

If giving the talk outside of an Intel facility, plan for slow network connections or no internet at all unless you tether to your phone. If you plan to tether to your phone make sure to test it out more than once to make sure it works. If you are going to be downloading anything, make sure to have an already downloaded copy in case you do have no internet.

If you are doing any kind of demos, have a one click reset button.

If giving the talk outside of Intel, make sure to have backup copies of your slides, demos, etc on either a usb drive just in case something happens with your computer and you are able to find a someone that can loan you one that you might have a chance to still give the talk that you would have from your laptop.

Phase 6: Giving the Talk

Now is the fun part, giving the actual talk. Remember to breath and that everyone in the audience is rooting for you to do well. If you have done all of the prep work then you will be able to work through anything that comes up.

If the content is something that you can give out, have your material available online for people to have as soon as you are done with your talk.
If you are asked a question that you don’t know the answer to, don’t be afraid to say you have not look what they are asking or that you are not sure and can get back to them later with an answer.
Make sure to have a water bottle with you. Beside your throat getting horse, it is a great way to add a pause into the talk without it feeling awkward to you.
Make sure to pace yourself and not rush. It is extremely easy to rush through a talk and finish in half the time.

AngularJS - Calling Service Methods from Console

Justin James — Mon, 11 Jan 2016 00:00:00 +0000

Note: This post applies to AngularJS. The 1.x version of Angular. AngularJS has been end of life at of 12/31/2021.

Here is a quick tip for how you can run your Angular service and factory methods within the Chrome Dev Tools console. No longer will you have to go through the process of navigating through the UI to trigger a Service/Factory method to run. Now you can just load up the web site and do all of your debugging through the Chrome console.

If your service/factory was called “YourFactory” and the ng-app attribute is on the body tag, you can get a reference to the “YourFactory” with the following line in the console.

var t = angular.element(document.querySelector('body')).injector().get('YourFactory');

After you have the reference, then you can call any method that is exposed by the “YourFactory” service such calling the method “myServiceMethod” and using the returned promise from the method.

t.myServiceMethod().then(function(response) { console.log(response); });

Now you can quickly debug your service/factory.

2015 Year In Review

Justin James — Thu, 31 Dec 2015 00:00:00 +0000

2015 was a great year with lots of new adventures. I did a bunch of travelling, started a new position at work, competed in my first hackathon (and win), and started a couple of meetups. At the beginning of 2015 I set a few goals for myself:

Speak at more events
Start blogging again
Be more active in my local dev community

Speaking

I spoke at a good amount of events this year considering this was my first year putting myself out there. I found that I really love presenting and helping people.

I presented 32 talks between 20 events. I found that I also don’t mind presenting a bunch of talks at a single event. In fact I like presenting more than 1 talk events.

10 User Groups / Meetups
5 Conferences
4 Code Camps
1 podcast

It was amazing meeting all of the different people. Many of whom I admired as speakers and developers. It was hard to believe that I was presenting at the same event that they were.

Thank you to those that attended my talks. I couldn’t do it without you.

Thank you as well to those that provided me feedback and helped me become a better speaker.

I even got to fulfill a long time dream of being on the .Net Rocks podcast. I never imagined I would be on the podcast and it was a total out of the blue thing. I got introduced to Carl and Richard at Nebraska Code. Then I saw Richard again at Angle Brackets where I was an attendee and I mentioned to him that one of my goals is to speak at the conference. As we got to talking about potential talks, he said my Vagrant talk would be a great podcast episode. Luckily for me, we were both going to be at NDC Oslo and he was just starting planning the NDC episodes. You can listen to me on episode 1158 .

As well you can see all my presentations at http://digitaldrummerj.me/speaking/

Speaking Goals for 2016

Submit to more conferences. Want to put speak at more but since it is CFP for them the selection part is out of my control.
Complete my Pluralsight audition and hopefully a course
Come up with at least 1 new talk
Turn my net promoter feedback system into an actual application.

Blogging

I had tried blogging in the past and it never lasted more than a few post. Well, not this time. In January, I created http://digitaldrummerj.me .

This year I wrote 50 posts with 54,000 page views. For my first year blogging, overall I consider it a success.

I used Jekyll for the blog engine and hosted it on Github Page. It was a lot of fun using Jekyll and creating the layout and theme for my blog. I could have easily went with WordPress or one of the canned solutions but I took it as an opportunity to sharpen my html and css skills as well as learn some new things like using Jekyll, and integrating Google Analytics and Disqus.

I even redid the theme for the blog in the middle of the year which was an adventure in itself. However, I don’t plan on doing this very often as it took a lot of time away from writing blog post. I am much happier though with the new theme, so the time was at least worth it.

I also figured out how to use Zapier to create a scheduling engine for the blog using Google Calendar and Github Pull Request. Since Jekyll is a static site generator it does not have admin functions like scheduling. It was one of the things that I did miss compared to other blogging engines. Since using Zapier for this, I have used it as well as IFTTT to automate a few things.

It was also fun figuring out how in Jekyll to easily create a series post and get a listing of all of the post for the series in order. Originally I did this by hand but that got old quickly. Now I just have to add a series tag to the front matter and it does it for me. This was important toe since several of the topics I was writing on were too big for a single blog post.

I have a whole series of blog post detailing out setting up Jekyll, integrating Disqus and Google Analytics, creating series, plus several other ones. View the series at http://digitaldrummerj.me/blogging-on-github-part-1-Getting-Started/

Blogging Goals for 2016

Double the number of post
Stick to the schedule of post in Trello
Write every day even if it is just 10 minutes
Submit to be a guest blogger on at least one popular blog
Get ahead in my completed post so everything is not last minute. Be nice to have at least 2 post scheduled at all times.

Dev Community

I have been part of various user groups over the years but was never part of the organizing committee nor did I give back as much as I wanted to.

This year I decided to change that. I am now running 2 meetups, mentored at some events, and am on the planning comittee for a couple events.

Phoenix Version Control Meetup

Right after I started using Jekyll and Github Pages, what is now the Phoenix Version Control meetup was started and I was asked if I wanted to be a co-organizer. Originally it started as a Github Pages group but quickly changed to more about version control with a focus on Github.

This was my first experience organizing a meetup and it had been a great learning experience. This group has struggled a bit to get going but we have a monthly meeting with about 10 people attending regularly. Not sure what 2016 will bring for this group.

Ionic Arizona Meetup

Then around August of this year I saw on meetup that Michael Iglesias was starting an Ionic Arizona meetup. I had also been thinking about starting one as well, so I sent a message to Michael offering to present at one of the meetings and asking if he needed a co-organizer. He graciously accepted both offers.

After some searching for a venue, we held our first meeting at the end of September with about 30 people attending. Since then we have had 3 more meetings with 20-25 people at each meeting.

For 2016, we already have a great set of talks for the first half of the year scheduled. We are doing “Releasing Your to the App Stores” in January, “IoT with Octoblu and Ionic” in February, “Database as a Service with Backand” in March, “ionic 2 and angular 2” in April and “An Ionic Showcase of thing members have built with Ionic” in May. If you would like to speak at one of the meetings, please let me know.

In December, I also registered ionic-az.org, created a Twitter account (@ionic_az), created email accounts using Zoho, and created a newsletter for the group.

The reason for the newsletter is to be able to share all of the great Ionic articles that I run across without spamming the group with a ton of messages. The first newsletter went out the week of Christmas and the next one is ready and will be going out next week. The newsletter will be bi-weekly. Look for a blog post soon on how I created the newsletter using a combination of a bunch of tools to automate most of the work.

We have also been work hard to get sponsorship for the group. So far we have a venue/food sponsor in Integrate and JetBrains has been gracious enough to give a free license each month for an idea of the winners choice.

The one not so great part of the Ionic Az group is that my co-leader, Michael, moved out of Phoenix and back to the East Coast. We worked well together and it was a pleasure running the group with him. I will be continuing the group and am looking for a co-leader.

Conference Planning

I have also joined the planning comittee for an Agile Conference in Portland that is scheduled for April and I will be helping with the planning for Desert Code Camp in Phoenix.

Mentoring

I also helped out as a mentor at the Chandler Startup weekend. Was also suppose to mentor at She Hacks AZ but that event got cancelled. It was fun doing the mentoring and being on that side of the process.

Community Goals

Continue to grow Ionic AZ attendance.
Grow Ionic AZ to where I do not have to present a topic at each meeting
Continue to build my community network.
Figuring out to organize more workshops locally on various topics.

Wrapping up

Well this post turn out way longer than I thought it would be. Guess I did a lot more in 2015 than I realized. Every time I thought I was done I remembered something else. 2015 was a great year and I am looking forward to 2016.

To start 2016 I am running an Ionic Workshop on January 16th at Gangplank Chandler, will be speaking at the Javascript Summit Virtual Conference in February and in March will be running an Ionic workshop at O’Reilly Fluent Conf.

If you see me out at any events, come up and say hi.

Looking forward to seeing everyone in 2016.

Ionic - Using Local Notifications

Justin James — Tue, 01 Dec 2015 00:00:00 +0000

When you are creating a mobile applications there are times where you need to notify users about something such as an upcoming appointment. If the application is running and the user is using it in the foreground, this is easy to accomplish. However, if the application is running in the background this can be a challenging task. You could do push notifications but that takes a decent amount of work to setup with both iOS and Android app stores. If all you need to do is alert them on their local device you can just use the cordova local notification plugin and skip the headache of setting up push notifications.

In this post we will walk you through creating an ionic application that uses the ngCordova local notification plugin.

Environment Setup

Before we get started, we need to make sure that you have your development environment configured with either an emulator or physical device as the local notification only works on a device and not a web browser. If you have already configured the Ionic Framework and an emulator/physical device, you can skip this section.

Make sure that you meet these requirements:

Android environment configured -
- Java 7+
- Android SDK
- Android Studio
- Either emulator, genymotion, or physical device
iOS environment configured (if on a MAC)
- XCode
- Either iOS Simulator or Device
- XCode Command Line Tools
nodejs
ionic
cordova
gulp
bower

You can refer to the following articles to configure your environment:

Creating Project

The first thing we need to do is create a new ionic project that we will use to test the local notifications.

ionic start ionic-local-notifications blank
cd ionic-local-notifications

Now we need to add the platforms to the ionic application since we need to deploy to a device in order for the local notifications to work. It will not work correctly in the browser.

To add the android platform:

ionic platform add android

To add the iOS platform (for Mac users):

ionic platform add ios

Remember, if you’re not using a Mac, you cannot build for the iOS platform.

Install ngCordova

ngCordova is a collection of 70+ AngularJS extensions on top of the Cordova API that make it easy to build, test, and deploy Cordova mobile apps with AngularJS. These extensions allow us to interact with device features such as the camera, battery status, and geolocation.

To install ngCordova run:

bower install ngCordova --save

Include ng-cordova.js or ng-cordova.min.js in your www\index.html file before cordova.js and after your AngularJS / Ionic file.

<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>

Install the local notification plugin

To install the plugin run:

ionic plugin add https://github.com/katzer/cordova-plugin-local-notifications.git

If you open up the package.json file, you will see the local notification plugin add along with the other cordova plugins.

"cordovaPlugins": [
{
"locator": "https://github.com/katzer/cordova-plugin-local-notifications.git",
"id": "de.appplant.cordova.plugin.local-notification"
}
]

Add ngCordova as a dependency

Open up the www/js/app.js file and inject ngCordova into the module

angular.module(‘starter’, [‘ionic’, ’ngCordova’])

Creating a New Controller

We need to create an Angular controller that the UI will interact with. At the bottom of the www/js/app.js file add the following

.controller('SampleController', function($scope, $cordovaLocalNotification) {
});

Now we need to tell the UI what the controller is. Open up the www/index.html page and add the controller to the ion-content.

<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Local Notification Sample</h1>
</ion-header-bar>
<ion-content ng-controller="SampleController">
</ion-content>
</ion-pane>

Adding Functions to Create Notifications

Within the SampleController, we need to add all of the functions to do the scheduling of the notifications.

All of the local notification functions should be contained within an ionic platform ready function and inside of a check that makes sure we are running in a WebView on a device. This will at least allow us to see the UI in the browser without error, it just won’t run any of the local notification function unless on a WebView.

$ionicPlatform.ready(function () {
if (ionic.Platform.isWebView()) {
}
})

Make sure to inject $ionicPlatform into the SampleController

.controller('SampleController', function($scope, $cordovaLocalNotification, $ionicPlatform) {
});

Instant Notification

To schedule an immediate notification, add the following function within the ionicPlatform.ready function

$scope.scheduleInstantNotification = function () {
$cordovaLocalNotification.schedule({
id: 1,
text: 'Instant Notification',
title: 'Instant'
}).then(function () {
alert("Instant Notification set");
});
};

In the www/index.html page within the ion-content, add a button and set the ng-click to call the scheduleInstantNotification function.

<button
class="button"
ng-click="scheduleInstantNotification()">
Instant
</button>

Notification X Seconds from Now

To schedule a notification 5 seconds from now, add the following function within the ionicPlatform.ready function.

The difference between this function and the immediate notification is the date property is being set.

$scope.scheduleNotificationFiveSecondsFromNow = function () {
var now = new Date().getTime();
var _5SecondsFromNow = new Date(now + 5000);
$cordovaLocalNotification.schedule({
id: 2,
published: _5SecondsFromNow,
text: 'Notification After 5 Seconds Has Been Triggered',
title: 'After 5 Seconds'
}).then(function () {
alert("Notification After 5 seconds set");
});
};

In the www/index.html page within the ion-content, add a button and set the ng-click to call the scheduleNotificationFiveSecondsFromNow function.

<button
class="button"
ng-click="scheduleNotificationFiveSecondsFromNow()">
In 5 Sec
</button>

Notification Every Minute

To schedule a notification every minute, add the following function within the ionicPlatform.ready function

$scope.scheduleEveryMinuteNotification = function () {
$cordovaLocalNotification.schedule({
id: 3,
title: 'Every Minute',
text: 'Give a real message',
every: 'minute'
}).then(function (result) {
console.log('Every Minute Notification Set');
});
};

Note: The every options possible values are second, minute, hour, day, week, month, or year.

In the www/index.html page within the ion-content, add a button and set the ng-click to call the scheduleEveryMinuteNotification function.

<button
class="button"
ng-click="scheduleEveryMinuteNotification()">
Every Minute
</button>

Update Notification Text

To update a the every minute notification, add the following function within the ionicPlatform.ready function. You also need to check that the notification is scheduled before trying to update it. This functions requires that you clicked on the Every Minute button to schedule the every minute notification.

$scope.updateNotificationText = function () {
$cordovaLocalNotification.isPresent(3).then(function (present) {
if (present) {
$cordovaLocalNotification.update({
id: 3,
title: 'Notificaton Update',
text: 'Notification Update Details'
}).then(function (result) {
console.log('Updated Notification Text');
});
} else {
alert("Must Schedule Every Minute First");
}
});
};

In the www/index.html page within the ion-content, add a button and set the ng-click to call the updateNotification function.

<button
class="button"
ng-click="updateNotificationText()">
Update Text for Every Minute
</button>

Update Notification Interval

To update a the every minute notification to be scheduled every second, add the following function within the ionicPlatform.ready function. You also need to check that the notification is scheduled before trying to update it. This functions requires that you clicked on the Every Minute button to schedule the every minute notification.

$scope.updateNotificationEvery = function () {
$cordovaLocalNotification.isPresent(3).then(function (present) {
if (present) {
$cordovaLocalNotification.update({
id: 3,
title: 'Notification Update',
text: 'Every Minute change to second',
every: 'second'
}).then(function (result) {
console.log('Updated Notification Every');
});
} else {
alert("Must Schedule Every Minute First");
}
});
};

In the www/index.html page within the ion-content, add a button and set the ng-click to call the updateNotification function.

<button
class="button button-block button-positive"
ng-click="updateNotificationEvery()">
Update Every Min to Second
</button>

Cancel Notification

To cancel a notification, add the following function within the ionicPlatform.ready function. You also need to check that the notification is scheduled before trying to cancel it. This functions requires that you clicked on the Every Minute button to schedule the every minute notification.

$scope.cancelNotification = function () {
$cordovaLocalNotification.isPresent(3).then(function (present) {
if (present) {
$cordovaLocalNotification.cancel(3).then(function (result) {
console.log('Notification EveryMinute Cancelled');
alert('Cancelled Every Minute');
});
} else {
alert("Must Schedule Every Minute First");
}
});
};

In the www/index.html page within the ion-content, add a button and set the ng-click to call the cancelNotification function.

<button
class="button"
ng-click="cancelNotification()">
Cancel Every Minute
</button>

Deploy to Device

In order for the local notifications to work, you need to deploy the application to a device or an emulator. It will not work correctly in the browser.

Note: You can only compile and deploy ios application on a Mac.

Android:

$ ionic run android

iOS:

$ionic run ios

Note: You may need to pass in –device to the command to get it to run on a device vs an emulator.

Wrap-up

Local notifications are a great option for being able to alert a user to something in your application. As you saw it only took a few lines of code to enable them. This article touched on the basic but there is more that you can do with local notifications. You can interact with multiple notifications at once for scheduling, updating, and cancelling. You can pass additional data into each notification that you can then use when the notification is trigger. On the rootscope you can listen for notifications to be scheduled, tiggered, updated or cancelled.

Source code for this article is available at https://github.com/digitaldrummerj-ionic/ionic-local-notifications-sample.

Running Gulp Task in Visual Studio

Justin James — Sun, 15 Nov 2015 00:00:00 +0000

When I am working in an code editor such as Visual Studio, I do not want to have to have to leave the editor to run command line programs such as Gulp task. I want to be able to run the gulp task right from instead the editor. Starting with Visual Studio 2013, you could do this with the Task Runner Explorer extension. Microsoft then integrated the Task Runner Explorer into Visual Studio 2015 so you no longer have to install an extension.

In this post, we will look at how to run your Gulp task within Visual Studio and then how to integrate them into the Visual Studio build process.

Code for this tutorial

The sample code for this tutorial is available at https://github.com/digitaldrummerj/pluralsight-audition.

Pulling up the Task Runner Explorer

You can get to the task runner explorer, by going under the View Menu, selecting Other Windows, and then selecting the Task Runner Explorer.

When the Task Runner Explorer opens it will pull up all of the task from gulpfile.js that is in the root directory of the project.

In this case it shows the 5 task that are available in the gulpfile.js

default
clean
inject
release
watch

Running a Task

After the task is opened up, to run a task, right-click on it and select the run option.

When a task it run, it will open up a tab in the Task Runner explorer and show the results of the gulp task

For the demo, we have right-clicked on the default task and selected the run option.

Integrating into Visual Studio Build Process

Manually running a task is nice but it is even better if you can integrate it into the Visual Studio build process. Luckily the Task Runner Explorer, give you just that option. If you right-click on a task and select Bindings, you can see the options.

There are 4 bindings options:

Before Build - task will run before the Visual Studio build.
After Build - task will run after the Visual Studio Build.
Clean - task will run when the project is cleaned.
Project Open - task will run when the project is opened.

For this example, we are going to set the “Before Build” binding for the default task. Right-click on the default task, select Bindings, and then Before Build.

When you set the binding, 2 things happened in the Task Runner Explorer:

The default task now shows up in the Bindings tab under the Before Build secton.
If you right-click on the default task and select binding there will be a checkmark next to the “Before Build” to indicate that it is set for this task.

Also, if you open up the gulpfile.js, you will notice that the first line now has a comment with the bindings in it.

Wrap-up

Now as a Visual Studio user, you kow how to run your gulp task without leaving Visual Studio and how to integrate it into the Visual Studio build process.

Strongloop - Fixing Security When Extending User Model

Justin James — Fri, 30 Oct 2015 00:00:00 +0000

After following Raymond Camden’s Strongloop Introduction, I was ready to update the todo demo application that I have been using for the Ionic Arizona Meetup. So I created a models for projects and app users. The app users model base class was User. Then within the project model I associated a project to an app users with a belongsTo and in the app users model I associated multiple projects to a single user with a hasMany. At this point, when I examined the API explorer I could see that it can me a rest endpoint to get the projects associated to a user. However, I ran into an issue with getting 401 Unauthorized errors when I tried to query any of the rest endpoints to get the projects associated to the user.

I could not find anything in the Strongloop docs that told me how to get around the 401 errors or what was causing them except that the ACL security was causing the issue and that I should be able to set the ACL security for appuser. However, after much research, it turns out that the built-in user model has security (ACL) on it to restrict everyone from being able to query the user endpoints that do not have an explictly defined security setup. This is great except for the fact that even if you add additional ACLs in your extended user model the default security has already denied the user before it gets to the security you setup.

You can view the default security by navigating to your strongloop project directory and looking in the node_modules\loopback\common\models\user.json file. You can see looking at the ACL list that the first item in the list is to DENY $everyone

 {
"principalType": "ROLE",
"principalId": "$everyone",
"permission": "DENY"
}

The way Strongloop orders the ACLs is that it starts at the bottom of the ACL list and reads it to the top. Since we are extending the user class, the DENY $everyone will come before our defined ACL. Strongloop strongly suggest that you do not modify the built-in user class, so then how do we allow users to query our additional endpoints?

When you generate a model there is an accompanying file for each model in the common\models directory, that has a .js extension to write custom code to add additional functionality to the model. For example if your model is called appuser, you will see two files: appuser.json and appuser.js.

Go ahead and open up the .js extension for your model. You will the following code where Appuser is your model’s name.

module.exports = function(Appuser) {
};

The first thing to do is clear out the existing security for the model

Appuser.settings.acls.length = 0;

Next we need to create a file in the models directory to hold the ACL for the model. My file naming convention is to add “acl” after the model name like so [Your Model]acl.json, ex: appuseracl.json

To ensure that you do not lose any of the default security, copy the ACLs json from the node_modules\loopback\common\model\user.json file

"acls": [
{
"principalType": "ROLE",
"principal": "$everyone",
"permission": "DENY"
},
{
"principalType": "ROLE",
"principalId": "$everyone",
"permission": "ALLOW",
"property": "create"
},
{
"principalType": "ROLE",
"principalId": "$owner",
"permission": "ALLOW",
"property": "deleteById"
},
{
"principalType": "ROLE",
"principalId": "$everyone",
"permission": "ALLOW",
"property": "login"
},
{
"principalType": "ROLE",
"principalId": "$everyone",
"permission": "ALLOW",
"property": "logout"
},
{
"principalType": "ROLE",
"principalId": "$owner",
"permission": "ALLOW",
"property": "findById"
},
{
"principalType": "ROLE",
"principalId": "$owner",
"permission": "ALLOW",
"property": "updateAttributes"
},
{
"principalType": "ROLE",
"principalId": "$everyone",
"permission": "ALLOW",
"property": "confirm"
},
{
"principalType": "ROLE",
"principalId": "$everyone",
"permission": "ALLOW",
"property": "resetPassword",
"accessType": "EXECUTE"
}
]

Now that the ACL configuration is setup, you need to tell Strongloop to load it by add the following line to the [Your Model].js file

Appuser.settings.acls = require('./appuseracl.json');

If you test your rest endpoints, at this point you will have the security as your started with.

To add the security for your added endpoints, add them before the DENY everyone configuration that is at the top of the ACL list.

 {
"principalType": "ROLE",
"principalId": "$everyone",
"permission": "DENY"
}

For example here is the ACL for my app users model to get the list of projects associated to that user.

 {
"principalType": "ROLE",
"principalId": "$owner",
"permission": "ALLOW",
"property": "__get__projects"
}

If you test your rest endpoints again, you will be able to successfully call the endpoints that were added when you associated projects to a user in your user model.

Installing Gulp 4.x

Justin James — Thu, 29 Oct 2015 00:00:00 +0000

Gulp 4 is not released yet but if you have a need to install it here is how to do it. I will cover how to globally install it as well as how to update your package.json for your projects.

Globally Installing Gulp

The first thing we need to do is install the Gulp command line to be able to run the gulp task.

Open a Command Prompt (Windows) or Terminal (Mac or Linux)
Check if you have Gulp CLI < 1.2.1 installed
```
 $ gulp -v
```
If a Gulp version is < 1.2.1, you will need to upgrade by running the following commands
```
 $ npm install -g gulp-cli
```
Verify Gulp CLI 1.2.1 installed correctly
```
 $ gulp -v
```

Updating Your Projects package.son

Now we need to tell our project to use Gulp 4.0 when it runs the gulp task.

If you using a previous version of Gulp in your package.json file, you can upgrade it if you would like or continue to use Gulp 3.x. I have not had any issue with leaving my local repository at 3.9 while having Gulp 4 installed globally.

Open a Command Prompt (Windows) or Terminal (Mac or Linux)
Navigate to the directory that contains your package.json

Uninstall gulp. Note: If your package.json has gulp listed as a dev dependency use –save-dev. If gulp is listed as a dependency use –save.

 $ npm uninstall gulp --save-dev
$ npm install git+https://git@github.com/gulpjs/gulp.git#4.0 --save-dev
OR
$ npm uninstall gulp --save
$ npm install git+https://git@github.com/gulpjs/gulp.git#4.0 --save

Wrap-up

You can keep up to date on Gulp 4 at https://github.com/gulpjs/gulp/tree/4.0 and https://twitter.com/gulpjs?lang=en

Sync your Git Fork to the Original Repo

Justin James — Tue, 27 Oct 2015 00:00:00 +0000

Syncing your forked repository to the original repository is an important step before submitting any pull request to the original repository for the changes in your forked repository. Even if you are not going to submit a pull request to the original repository, there are times that you want the additional features and/or bug fixes that have been done since you forked the original repository.

You could do a pull request but this adds an additional commit into your forked repository instead of making your forked repository match the original repository. In order to sync the forked repository without adding any additional commits as part of the process you need to configure the original repository as an upstream remote, merge in the changes from the original repository and then push the merged version back to Github.

Adding Original Repo As an Upstream Repo

In order to pull the changes from the original repository into your forked version, you need to add the original git repo as an upstream repository.

Open a Command Prompt (Windows) or Terminal (Mac or Linux)
Navigate to the directory that contains your forked repository

Run the following command to list the currently configured remote repositories

$ git remote -v

 origin https://github.com/[Your UserName]/[Your Fork].git (fetch)
 origin https://github.com/[Your UserName]/[Your Fork].git (push)

Add the original repository as an upstream repository

$ git remote add upstream https://github.com/[Original Owner Username]/[Original Repository].git

If you run the git remote command again, you will now see both origin and upstream are configured

$ git remote -v

origin https://github.com/[Your UserName]/[Your Fork].git (fetch)
origin https://github.com/[Your UserName]/[Your Fork].git (push)
upstream https://github.com/[Original Owner UserName]/[Original Repository].git (fetch)
upstream https://github.com/[Original Owner UserName]/[Original Repository].git (push)

You are now ready to pull the changes from the original repository to the your forked repository.

Merging Original Repo Into Your Fork

Open a Command Prompt (Windows) or Terminal (Mac or Linux)
Navigate to the directory that contains your forked repository that you configured with the upstream repository

The first thing is to fetch all of the changes from the original repository. Note that commits to the original repository will be stored in a local branch called, upstream/master

 $ git fetch upstream
remote: Counting objects: 75, done.
remote: Compressing objects: 100% (53/53), done.
remote: Total 62 (delta 27), reused 44 (delta 9)
Unpacking objects: 100% (62/62), done.
From https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY
* [new branch] master -> upstream/master

Make sure that you are on your fork’s master branch

 $ git checkout master
Switched to branch 'master'

Merge the changes from the upstream/master into your local master branch. This will bring your fork’s master branch into sync with the upstream repository without losing your local changes. If you have made any changes that create a conflict, you will obviously have to resolve those before you can complete the merge.
```
 $ git merge upstream/master
Updating a422352..5fdff0f
Fast-forward
....
```
At this point your local branch is synced to the original repositories master branch. If you want to update the Github repository, you need to push your changes.
```
 $ git push origin master
```

Wrap-Up

To summarize, with the 5 commands below you can sync your forked repository with the original repository and push the changes to your Github repository.

$ git remote add upstream https://github.com/[Original Owner Username]/[Original Repository].git
$ git fetch upstream
$ git checkout master
$ git merge upstream/master
$ git push

Do Not Swallow The Exceptions

Justin James — Mon, 05 Oct 2015 00:00:00 +0000

Throwing away exceptions in your code is just a bad practice and makes it harder to support your application. It may make it easier for you as a developer to get something working but in the long run it cost way more money to do the maintenance and troubleshooting then if you had just put in proper exception handling to start with.

I have worked on several codebases recently where methods returned false if either a business rule failed or an unexpected exception occurred with no logging of the error anywhere. This made it extremely difficult to figure out what the issue was. In several cases, even when you hooked up a debugger there was no way to get at the exception details since the exception was not passed into the catch block.

Examples of Issue

Here are a couple of examples of what I am talking about when I say swallowing the exception.

Example 1: Totally Throwing Away Exception

In this example, the code does nothing with the exception and does not even tell the caller that something failed. I have spent many hours troubleshooting projects with this exact try/catch block and wondering why something that I thought should have worked was not, just to discover that deep down in the call stack it was swallowing the exception. Since the catch block is empty, there is no way to put a breakpoint in the catch block but even if you could, there is no way to get at the exception in the catch block since it was not passed into it. You would need to make a temp code change to add an exception parameter to the catch block and a bogus line in the catch block to be able to get at the exception.

public void SomeMethod()
{
try
{
//Some Code That Errors
}
catch
{
}
}

Example 2: At Least Tells You Something Went Wrong

In this example, the code at least returns false back from the method so you can assume that something didn’t go right but you don’t know if it was an exception or if it was business logic that failed. This example is also not logging any information about the exception and there is no way in a debugger to get the exception details. You can at least put a breakpoint in the catch block, but you would need to make a code change to add pass the exception into the catch block.

public bool SomeMethod()
{
try
{
//Some code
if ("Business Logic Failed")
{
return false;
}
//everything passed
return true;
}
catch
{
return false;
}
}

Fixing This Issue

Now that you understand the issue, lets examine how to fix it. The fix is really simple. There are two options that I use:

Pass the exception variable into the catch block and log the information somewhere.
Let the exception bubble up the call stack and handle it at a higher level.

Fix Example #1: Logging The Exception

In this example, the exception along with all of the inner exceptions are logged and the business rules are checked. You can also put a breakpoint inside the catch block to get details on the exception. This code still returns a false though if something went wrong which doesn’t make it obvious if it was an exception or business logic that didn’t pass without looking at the logs.

public bool SomeMethod()
{
try
{
//Some code
if ("Business Logic Failed")
{
throw new ApplicationException("Business Logic Failed...Give details on what failed");
}
return true;
}
catch (Exception ex)
{
//Logs StackTrace, Message, and all InnerException Message/StackTrace
LogMessage(ex);
return false;
}
}

Fix Example #2: Bubbling Exception Up Call Stack

This example lets the full exception go up the call stack with a custom exception so that the calling method can figure out how it wants to handle the exception. You should handle this exception at some point. It is bad practice to let it become an unhandled exception and crash your application.

The reason for using a custom exception is to be able to catch your business logic errors versus an unexpected exception.

public void SomeMethod()
{
//Some Code
if ("Business Logic Failed")
{
//Let Exception Bubble Up the Call Stack with a custom exception
//Can also use ApplicationException but harder to catch specific exceptions without examining the exception message
throw new MyCustomException("Business Logic Failed...Give details on what failed");
}
}

Fix Example #3: Ability to Put in a Breakpoint

Yes I know I said there is 2 ways to fix it but you can also do it this way. However this is my least favorite way to not swallow exception as you are still technically swallowing the error but you can at least hook up the debugger, put a breakpoint on the return statement, and get at the exception details. This only is of value in your development machine but it is at least better than nothing.

public void SomeMethod()
{
try
{
//Some Code
}
catch (Exception ex)
{
return;
}
}

Wrap-Up

As you can see it does not take much more work to be able to do something with the exception. It will save you hours of troubleshooting work just by handling the exception and not throwing it away. Don’t take the easy way out by swallowing exceptions. Be nice to your fellow developers and don’t throw away the exceptions.

Vagrant - Fixing Opentable Basebox looking for Windows Plugin

Justin James — Sun, 04 Oct 2015 00:00:00 +0000

Overview

As part of my demo during my Vagrant talk, I use the opentable/win-8.1-enterprise-amd64-nocm vagrant base box with the virtualbox provider. This vagrant base box unfortunately has an issue with the vagrantfile that is included with it looking for the old/unneeded vagrant windows plugin to be installed and trying to port forward the WinRM and RDP ports without detecting if the port is already in use.

Luckily, it is really easy to fix the included vagrantfile so that you can create vagrant machines but you have to do some prework before running a vagrant up using this base box.

Downloading the Box

Normally with vagrant you do not need to download the vagrant box before running vagrant up but in this case you do need to download the opentable/win-8.1-enterprise-amd64-nocm box first. We can download the box by running the following command from the command line.

$ vagrant box add opentable/win-8.1-enterprise-amd64-nocm

It will take a bit to download the vagrant box as it is several gigs in size.

Fix for Unneeded Check for Vagrant Windows Plugin

Once the box is downloaded, you need to go to the .vagrant.d directory that contains the box you just downloaded. On Windows this directory is located at %userprofile%.vagrant.d\boxes\opentable-VAGRANTSLASH-win-8.1-enterprise-amd64-nocm\1.0.0\virtualbox

This directory contained the Vagrantfile that we need to update. You can open this file in any text editor.

When you open up the file you will see this section of code.

if !Vagrant.has_plugin?('vagrant-windows')
puts "vagrant-windows missing, please install the vagrant-windows plugin!"
puts "Run this command in your terminal:"
puts "vagrant plugin install vagrant-windows"
exit 1
end

This section is no longer need and can be deleted. The vagrant-windows plugins is how Vagrant used to supported the Windows OS before it was supported out of the box.

Fix for Port Forwarding Auto Correct

We are going to edit the same Vagrantfile as the previous section. Again this file is located at %userprofile%.vagrant.d\boxes\opentable-VAGRANTSLASH-win-8.1-enterprise-amd64-nocm\1.0.0\virtualbox

Open up the Vagrantfile in any text editor.

When you open up the file you will see this section of code.

config.vm.network :forwarded_port, guest: 3389, host: 3389
config.vm.network :forwarded_port, guest: 5985, host: 5985

The problem with this section is that if ports 3389 or 5985 are already in use on your host machine, then the command will fail.

To correct this we need to add the auto_correct parameter to each of the port forwarding commands so that Vagrant will automatically pick an unused port if it detects either 3389 or 5985 are in use on your host machine.

config.vm.network :forwarded_port, guest: 3389, host: 3389, auto_correct: true
config.vm.network :forwarded_port, guest: 5985, host: 5985, auto_correct: true

Wrap-up

Now you can use the opentable/win-8.1-enterprise-amd64-nocm vagrant base box with the vagrant up command to create a new virtual machine.

Not all vagrant base boxes have this issue but if you do run across one you know how to fix it.

Sync your Git Fork to the Original Repo

Justin James — Mon, 28 Sep 2015 00:00:00 +0000

Adding Original Repo As an Upstream Repo

In order to pull the changes from the original repository into your forked version, you need to add the original git repo as an upstream repository.

Open a Command Prompt (Windows) or Terminal (Mac or Linux)
Navigate to the directory that contains your forked repository

Run the following command to list the currently configured remote repositories

$ git remote -v

 origin https://github.com/[Your UserName]/[Your Fork].git (fetch)
 origin https://github.com/[Your UserName]/[Your Fork].git (push)

Add the original repository as an upstream repository

$ git remote add upstream https://github.com/[Original Owner Username]/[Original Repository].git

If you run the git remote command again, you will now see both origin and upstream are configured

$ git remote -v

origin https://github.com/[Your UserName]/[Your Fork].git (fetch)
origin https://github.com/[Your UserName]/[Your Fork].git (push)
upstream https://github.com/[Original Owner UserName]/[Original Repository].git (fetch)
upstream https://github.com/[Original Owner UserName]/[Original Repository].git (push)

You are now ready to pull the changes from the original repository to the your forked repository.

Merging Original Repo Into Your Fork

Open a Command Prompt (Windows) or Terminal (Mac or Linux)
Navigate to the directory that contains your forked repository that you configured with the upstream repository

The first thing is to fetch all of the changes from the original repository. Note that commits to the original repository will be stored in a local branch called, upstream/master

 $ git fetch upstream
remote: Counting objects: 75, done.
remote: Compressing objects: 100% (53/53), done.
remote: Total 62 (delta 27), reused 44 (delta 9)
Unpacking objects: 100% (62/62), done.
From https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY
* [new branch] master -> upstream/master

Make sure that you are on your fork’s master branch

 $ git checkout master
Switched to branch 'master'

Merge the changes from the upstream/master into your local master branch. This will bring your fork’s master branch into sync with the upstream repository without losing your local changes. If you have made any changes that create a conflict, you will obviously have to resolve those before you can complete the merge.
```
 $ git merge upstream/master
Updating a422352..5fdff0f
Fast-forward
....
```
At this point your local branch is synced to the original repositories master branch. If you want to update the Github repository, you need to push your changes.
```
 $ git push origin master
```

Wrap-Up

To summarize, with the 5 commands below you can sync your forked repository with the original repository and push the changes to your Github repository.

$ git remote add upstream https://github.com/[Original Owner Username]/[Original Repository].git
$ git fetch upstream
$ git checkout master
$ git merge upstream/master
$ git push

Getting Visual Studio Cordova Tooling Working with the Ionic Framework

Justin James — Thu, 17 Sep 2015 00:00:00 +0000

I am doing an Ionic Framework presentation and I wanted to use the Visual Studio 2015 Cordova Tooling.

I have done this presentation twice in the past couple of months using my Intel Nuc machine with the Visual Studio 2015 RTM Cordova tooling but it is kind of pain to do this since the Nuc is a desktop machine and doesn’t have a monitor so I have to look at the projector screen or being a laptop to use as well. Setting up 2 machines in 15 minutes as well is a pain and hoping that the remoting from the laptop to the Nuc is stable just asking for trouble even with a travel router that I have.

So I decided I would just get my laptop working with my demos since I already had Visual Studio 2015 installed and had everything I needed for Ionic already working.

I thought this shouldn’t take that long but unfortunately I ran into a bunch of issues. Luckily I have managed to fix all of the issue and can move on with the prep work for my presentation.

Software Installed on Laptop

Windows 8.1 Enterprise
Visual Studio 2015 with Cordova Tooling Update 2
Node 4.1.0 tried both 32bit and 64bit versions. Note that the Intel NUC machine had 0.12.4 when I last presented.
Npm 2.14.3 (version that comes with Node 4.1.0)
Npm Global Modules: gulp, bower, Ionic, Cordova, and pjup

Steps to Create Visual Studio Ionic Project that caused issue

To create the project I first created the Ionic project using the Ionic CLI and then created a Cordova project in Visual Studio based on the Ionic CLI project that was created.

Open Command Line
Navigate to c:\projects
Run ionic start Demo blank
cd into c:\projects\Demo
open up the package.json file and removed the gulp-sass line. This version doesn’t work with Node 4.1.0.
Run npm install gulp-sass –save
Run npm install
Open Visual Studio
Go File -> New -> Project From Existing Code
Select Cordova as the project type and click Next
Click the browse button, navigate to the c:\projects\Demo folder, and click the Select Folder button
Name the project Demo
Click the Finish button

Now the fun begins. Below I have documented the different issues that I ran into.

Issue 1: Opening Cordova project took 100% CPU

Error

When I would open up a Cordova project it would try to parse the Npm global packages and it would fail everytime on the cordova dependency, graceful-fs. When I opened up Task Manager, I would see Visual Studio and Node taking all of the CPU. I would also see anywhere between 2-15 node processes that Visual Studio had started.

I wondered what node processes were doing so I used Process Explorer and I found that they were all running npm config ls -g.

My only guess is that Visual Studio didn’t like something about my npm global packages.

Fix

Since Visual Studio and Node were taking all of the CPU, I had to open up the Task Manager and kill all of the node processes in order to get Visual Studio to close so that the CPU went back to a normal level.

Open Visual Studio without a project open
Under the Tools Menu -> Options -> Projects and Solutions -> External Web Tools, I reset it to the defaults which has the Visual Studio path higher than the System Path.
Open the Demo project from c:\projects\Demo

The CPU this time should stay at a normal level

Issue 2: node-sass would fail due to not having the 32 bit version installed

Error

This was caused by running npm install from the command line outside of Visual Studio and also not having a version of gulp-sass in the package.json that worked with Node 4.1.0.

Fix

2 steps to get around this issue:

From the command line in c:\projects\Demo, run the pjup command to update the npm package vesion in package.json to the latest versions.
- Warning: Make sure that you have the loglevel for npm set to the default of warn. You can reset your custom loglevel with npm config delete loglevel.
Delete the node_modules directory from your project directory and do the package restore from within Visual Studio. You may need to do a rm -rf node_modules from the command line.
Open the Demo project from c:\projects\Demo in Visual Studio
In the Solution Explorer, right-click on the Dependencies folder and select Restore Packages
After a few minutes the package restore should be completed.
- Now the Task Runner Explorer should also be working

Issue 3: Typescript error on Visual Studio build

Error This issue actually had nothing to do with Visual Studio itself but with the angular bower packages.

It turns out that the angular-ui-router bower package that is installed as part of the ionic install when you do a bower install, has the typescript api file included in the package but the other angular packages do not have their typescript files included, so typescript doesn’t know what some of the types are that are referenced in the angular-ui-router typescript api file.

Fix

I just deleted the angular-ui-router\api folder.

Issue 4: Cordova error on Visual Studio build

Error

Cordova CLI is set to 5.1.1 when you create the project.

When you build the project in Visual Studio, it generates the following error due to being set to Cordova 5.1.1. I had also seen this issue on my Intel NUC machine and had to drop the npm global Cordova version back to 5.0.0 but they have since fixed this issue with Cordova.

 1> ------ Adding platform: android
1> No version supplied. Retrieving version from config.xml...
1> _http_client.js:51
1> throw new TypeError('Request path contains unescaped characters.');
1> ^
1>
1> TypeError: Request path contains unescaped characters.
1> at new ClientRequest (_http_client.js:51:11)
1> at TunnelingAgent.exports.request (http.js:31:10)
1> at TunnelingAgent.createSocket (C:\Users\jpjames\AppData\Roaming\npm\node_modules\vs-tac\node_modules\cordova\5.1.1\node_modules\cordova\node_modules\cordova-lib\node_modules\npm\node_modules\request\node_modules\tunnel-agent\index.js:117:25)
1> at TunnelingAgent.createSecureSocket [as createSocket] (C:\Users\jpjames\AppData\Roaming\npm\node_modules\vs-tac\node_modules\cordova\5.1.1\node_modules\cordova\node_modules\cordova-lib\node_modules\npm\node_modules\request\node_modules\tunnel-agent\index.js:184:41)
1> at TunnelingAgent.addRequest (C:\Users\jpjames\AppData\Roaming\npm\node_modules\vs-tac\node_modules\cordova\5.1.1\node_modules\cordova\node_modules\cordova-lib\node_modules\npm\node_modules\request\node_modules\tunnel-agent\index.js:80:8)
1> at new ClientRequest (_http_client.js:133:16)
1> at Object.exports.request (http.js:31:10)
1> at Object.exports.request (https.js:163:15)
1> at Request.start (C:\Users\[UserName]\AppData\Roaming\npm\node_modules\vs-tac\node_modules\cordova\5.1.1\node_modules\cordova\node_modules\cordova-lib\node_modules\npm\node_modules\request\index.js:594:30)
1>MSBUILD : cordova-build error BLD104: Error : BLD00104 : There was an error installing a component from NPM, most likely because this device is behind a proxy or firewall. Please see the following link for possible solutions: http://go.microsoft.com/fwlink/?LinkID=623434

I believe that this error has nothing to do with the firewall since I can restore npm and bower packages without an issue and I have the http_proxy and https_proxy set as system environment variables.

Fix

Open the taco.json file
Change the Cordova version to 5.3.1
Rebuild the solution and the build should be complete successfully

Issue 5: Visual Studio seems to randomly decide to use my node 4.1.0 install

It appear that Visual Studio sometimes wants to use its version of node and other times uses my 4.1.0 install.

Visual Studio Version

npm package restore
- I see lines like this in the output window: npm WARN engine get-stdin@5.0.0: wanted: {“node”:">=0.12.0"} (current: {“node”:“v0.10.31”,“npm”:“1.4.9”})
task runner explorer
- I assume on this one since it complained about the gulp-sass package in Visual Studio but worked fine from the command line with node 4.1.0.

4.1.0 Install

Cordova build
- I see that at the start of the output windows for the build: Your environment has been set up for using Node.js 4.1.0 (ia32) and npm.

Issue 6: Visual Studio seem to have a bunch of updates that were needed as well

Here is a list of different installed/re-installs/uninstalls that I did:

Cordova tooling from RTM to update 1 (update 2 wasn’t out yet)
Due to the CPU issues with #1, I uninstall Visual Studio Cordova tooling and re-installed it, selecting update 1
Updated Cordova tooling from update 1 to update 2. It came out during all of this troubleshooting
Tried out npm 3.x. Didn’t see any changes.
Tried install the npm taco package to see if it would help and it didn’t. Uninstall it from the node 4.1.0 npm global.
At once point I even managed to break the Cordova tools and I uninstalled and re-installed them with update 2.
Uninstalled Node 4.1.0 64 bit and installed the 32 bit version
Tried out the NodeJSTools for Visual Studio latest RC release. Didn’t see any changes so uninstalled it
Uninstall all of the NodeJsTools for Visual Studio
Upgraded TypeScript for Visual Studio since the Visual Studio installer said there was a new version out

Working Steps

To create the project I first created the Ionic project using the Ionic CLI and then created a Cordova project in Visual Studio based on the Ionic CLI project that was created.

Open Command Line
Navigate to c:\projects
Run ionic start Demo blank
cd into c:\projects\Demo
run npm config delete loglevel
run pjup to update all of the npm package. Say Y to everything except the run npm install
run ionic setup sass
run rm -rf node_modules
Open Visual Studio
Go File -> New -> Project From Existing Code
Select Cordova as the project type and click Next
Click the browse button, navigate to the c:\projects\Demo folder, and click the Select Folder button
Name the project Demo
Click the Finish button
Let Visual Studio do an npm package restore
Ignore the gulp-sass error popup as this appears to be task runner explorer related and will go away after the npm package restore
Run the gulp default task to generate the sass file using the Task Runner Explorer
Open the taco.json file and update the version to 5.3.1
Delete the www\lib\angular-ui-router\api directory
Build the Visual Studio project
Deploy it to a Device/Emulator

Conclusion

After all of this Visual Studio is now performing like I expected it to and like it does on my Intel NUC machine. The CPU is operating at normal levels. I am able to build everything in Visual Studio and deploy to either the Visual Studio Android Emulator or an actual Android device.

With all of the fixes in place, I have been able to run through creating my Ionic project, then creating a Visual Studio project from it, and finally deploying it to the Emulator/Device.

I am very happy I got this all working since I am a huge fan of Visual Studio and wanted to show people all of the goodness in Visual Studio like the package restore, task runner explorer, and debugging.

Jekyll Part 13: Creating an Article Series

Justin James — Tue, 15 Sep 2015 00:00:00 +0000

Welcome the continuing series on using Jekyll. In this tutorial we are going to go through how to create the series listing like you see for this blog series.

Overview

Sometimes a blog post gets too big and you need to split it into multiple articles or you want to do a series like this one that builds upon each other but you don’t want to have to manage a listing of all of the post in the series. Instead you can easily create a liquid template that does all of the work for you.

Section 1: Creating the Template

In this section we are going to create the html template that will get the series listings for you.

Note: I assume that you have alrady cloned your jekyll repo to your machine. This tutorial is based off the jekyll repo at https://github.com/digitaldrummerj/jekyllforblogseries.

In the _includes directory create a new file called series.html
The first thing we are going to do is add an if statement to make sure that the it is a series before trying to output the listing. Without this, it would output every page if the post didnt have a series and you included the series.html
```
 {% if page.series %}
{% endif %}
```
All of the code for the rest of this section will go in between the if and endif statements
Next we are going to figure out how many post are part of the series and which article number in the series this post is.
- Total count will store in the count variable
- The article number for this post in the idx variable.
- We will loop through the post and increment the count if the Front Matter series tag match the current page’s series tag.
```
 {% assign count = '0' %}
{% assign idx = '0' %}
{% for post in site.posts reversed %}
{% if post.series == page.series %}
{% capture count %}{{ count | plus: '1' }}{% endcapture %}
{% if post.url == page.url %}
{% capture idx %}{{count}}{% endcapture %}
{% endif %}
{% endif %}
{% endfor %}
```
Now we need to output the actual html code.
- Note: We are using the panel css from bootstrap. If you have bootstrap you are good, if not we will add just the panel css in the next section.
- First, we output a header for the series that says which part # this post is and how many total parts there are for the series.
- Second, we loop through the post and increment the count if the Front Matter series tag match the current page’s series tag so that we can append Part # onto each post title. If the url for the post in the series matches the current page’s url, then it outputs “This Article” instead of the actual title.
```
 <div class="panel seriesNote">
<p>
This article is <strong>Part {{ idx }}</strong> in a <strong>{{ count }}-Part</strong> Series.
</p>
<ul>
{% assign count = '0' %}
{% for post in site.posts reversed %}
{% if post.series == page.series %}
{% capture count %}{{ count | plus: '1' }}{% endcapture %}
<li>Part {{ count }} -
{% if page.url == post.url %}
This Article
{% else %}
<a href="{{post.url}}">{{post.title}}</a>
{% endif %}
</li>
{% endif %}
{% endfor %}
</ul>
</div>
```
In the next section, we will add the series listing onto a couple of post so you can see them in action

Section 2: Add Series Tag to Post

The first thing we need to do is create 2 new blog post article so that we can add the series to them.
In both articles, add a front matter tag called series and make the value “Intro to Series”.
```
 ---
layout: post
title: You're up and running!
series: "Intro to Series"
---
```
In both article, include the series.html at the point in the html that you want the series listing to show.
```
 {% include series.html %}
```
Now run jekyll serve and view one of the new blog post.

If you do not have the bootstrap css include in your blog, then you will notice that the series listing does not stand out at all.

In the next section we will add the missing panel css to make it look more like this.

Section 3: Adding CSS

In this section we will add in the css to make the series listing stand out and look like it is a section that goes together instead of just some text on the page.

Open the css\style.scss file

At the bottom of the file paste in the following CSS. This css is directly from the bootstrap css. I didn’t want to include all of the bootstrap framework just for the panel css.

 .panel {
padding: 15px;
margin-bottom: 20px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.05);
box-shadow: 0 1px 1px rgba(0,0,0,0.05)
}
.panel-heading {
padding: 10px 15px;
margin: -15px -15px 15px;
background-color: #f5f5f5;
border-bottom: 1px solid #ddd;
border-top-right-radius: 3px;
border-top-left-radius: 3px
}
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 17.5px;
font-weight: 500
}
.panel-footer {
padding: 10px 15px;
margin: 15px -15px -15px;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px
}
.panel-primary {
border-color: #428bca
}
.panel-primary .panel-heading {
color: #fff;
background-color: #428bca;
border-color: #428bca
}
.panel-success {
border-color: #d6e9c6
}
.panel-success .panel-heading {
color: #468847;
background-color: #dff0d8;
border-color: #d6e9c6
}
.panel-warning {
border-color: #fbeed5
}
.panel-warning .panel-heading {
color: #c09853;
background-color: #fcf8e3;
border-color: #fbeed5
}
.panel-danger {
border-color: #eed3d7
}
.panel-danger .panel-heading {
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7
}
.panel-info {
border-color: #bce8f1
}
.panel-info .panel-heading {
color: #3a87ad;
background-color: #d9edf7;
border-color: #bce8f1
}

Save the file
Run jekyll serve and view one of the new blog post. If should look like this:

Conclusion

Now if you do an article series, you can easily have a professional looking series listing and it requires very little to get it working.

In the next lesson, I will show you how to get the code highlighting working when your code includes liquid syntax such as we did in the code examples in this article.

Jekyll Part 12: Editing Locally

Justin James — Fri, 11 Sep 2015 00:00:00 +0000

Welcome the continuing series on using Jekyll. In this tutorial we are going to set it up so that we can do draft posts that we can check into our repo but not have them show up on the production site.

Overview

In the last couple of articles, we installed jekyll locally but we didn’t talk about editing existing blog post or adding in new ones. There will be times where you will start a blog post but not have time to finish it all in one sitting. You could just create all of the files in the post directory and set the publish flag to false but over time it will become harder and harder to tell which articles have actually been published.

Thankfully, jekyll supports having draft posts that by default don’t show even if the publish flag is set to true unless you tell jekyll to run with drafts. On Github, jekyll runs without the drafts flag so you don’t have to worry about drafts accidentally showing up.

Section 1: Creating a draft

In your blog repo, create a folder called _drafts
Create a new blog post in there called DraftsTest.md

Add the following to the DraftsTest.md file

 ---
layout: post
title: 'Drafts Test'
categories: ['How-To']
published: 2015-09-11 06:00
---

If you run the jekyll serve command, you will not see this post showing up.
```
 jekyll serve --config _config.yml,_configdev.yml
```

Section 2: Running with Drafts

To run jekyll with drafts, you just need to pass in the –drafts argument to the serve command

jekyll serve --config _config.yml,_configdev.yml --drafts

Now if you view your site in your web browser, you will see your draft post.

With the drafts argument, it does respect the publish front matter, so if you don’t want a draft to show up even with the –drafts argument, just set the published to false for that article.

Conclusion

Now you can do all of your editing locally and check the drafts into your git repo without having to fear they will accidentally get published before they are ready.

In our next lesson, I will show you how to create the series listing like you see below and how to be able to easily create a blog article series

Jekyll Part 11: Installing Jekyll On OSx

Justin James — Wed, 09 Sep 2015 03:00:00 +0000

Welcome the continuing series on using Jekyll. In this tutorial we are going to setup your MAC (OSx) computer to be able to edit your blog on your computer.

Overview

Up to this point we have been using the Github web site to edit all of our files but the downside to this is that any chances you want to make show up live in your blog before you have had a chance to test them.

Instead, it is better if you can test out all of your changes and review your blog post before letting the world see them. It will also let you have draft post where you can see them locally but on github they will not be visible.

Section 1: Installing Software

We need to install XCode command line tools, nodejs and python pip.

Section 1.1: Installing NodeJs

Head over to nodejs.org and download the NodeJs Installer and run it. Take all of the defaults.

Section 1.2: Installing XCode Command Line Tools

Unfortunately to get the XCode command line tools, you first need to install XCode.

Go the App Store
Search for XCode
Hit the Install Button

Once XCode is installed, open up a terminal windows (Application -> Other -> Terminal) and run the following command:

xcode-select --install

This will bring up a windows asking you to install the command line tools package that we need and just click the Install button.

Section 1.3: Installing Pygments Code Highlighter

pip install Pygments

Section 1.4: Install Ruby Gems

sudo gem update --system
sudo gem install bundler

Section 2: Getting your Blog onto your computer

In this section, you will clone the blog repo from github and install jekyll.

Open a terminal
Create the directory ~/projects
```
 mkdir ~/projects
```
cd into c:\projects
```
 cd ~/projects
```
Clone your github blog repo to your local machine with the “git clone [Repo Name]” command. Below is the example if you were to clone the jekyll repo for this blog series.
```
 git clone https://github.com/digitaldrummerj/jekyllforblogseries.git
```
cd into the repo that you just cloned
```
 cd jekyllforblogseries
```
Make sure that you have a GemFile with no file extension in the root of your repo with the following contents. Warning that Github Pages supports very few jekyll plugins. The jekyll-redirect-from is one of them.
```
 source 'https://rubygems.org'
gem 'github-pages'
gem 'jekyll-redirect-from'
```
From the jekyllforblogseries directory or your blogs directory, run the following command to install gems listed in the Gemfile.
```
 bundle install
```

Now we have jekyll installed. Time to test it out

Section 3: Testing Your Blog Works on Your Computer

Now that we have everything installed for jekyll it is time to test it out.

From a command prompt in your blog repo directory run the following command to tell jekyll to build and run the web site locally
```
 jekyll serve
```
If it build successfully you will see something like this
Now if you open up your browser and navigate to http://localhost:4000 you will see you blog.

However, by default your _config.yml file will be set for production which will cause any place that you have referenced the site.url to not working on your local machine. You don’t want to change your _config.yml file though for development since you will accidentally check it in at some point and break your blog. Instead we can tell jekyll to use multiple configuration files. When you load multiple files it will load them in order and then override any settings from a previously loaded config.

Create a new file in the root of your repo called _configdev.yml

In the _configdev.yml add the following lines to set the url, turn off disqus/google analytics and google search.

 # then add this to the url as well "/repository-name"
url: http://localhost:4000
disqus:
disquscommentcount:
google_analytics:
google_search:

If your jekyll serve is still running do a ctrl+c to stop it.
Now run the following command to tell jekyll the config yml files to load
```
 jekyll serve --config _config.yml,_configdev.yml
```
If it build successfully you will see something like this
Now if you open up your browser and navigate to http://localhost:4000 you will see you blog and any place that reference site.url will be working.

Conclusion

Now you are ready to do all of your editing locally and test it out before the world gets to see it.

In our next lesson, I will show you how to create draft blog post that will only show on your local machine so that you don’t have to either clutter up your post directory with drafts or worry about accidentally publishing an unfinished article.

Jekyll Part 10: Installing Jekyll On Linux

Justin James — Wed, 09 Sep 2015 02:00:00 +0000

Welcome the continuing series on using Jekyll. In this tutorial we are going to setup your Ubuntu Linux computer to be able to edit your blog on your computer.

Overview

Section 1: installing Software

We need to install nodejs, ruby 2.x, python pip, and git.

Section 1.1: Installing NodeJs

First we are going to install NodeJS using the command below

# Note the new setup script name for Node.js v0.12
curl -sL https://deb.nodesource.com/setup_0.12 | sudo bash -
# Then install with:
sudo apt-get install -y nodejs
node -v

Section 1.2: Installing Ruby

Ubuntu Trusty 14.04 unfortunately comes with Ruby 1.9.x and we need 2.x. There is also a bug in the ubuntu packages where the Ruby 2.0 install is actually the 1.9.3 branch.

We are going to use ruby-install to get the latest version of Ruby installed

 wget -O ruby-install-0.5.0.tar.gz https://github.com/postmodern/ruby-install/archive/v0.5.0.tar.gz
tar -xzvf ruby-install-0.5.0.tar.gz
cd ruby-install-0.5.0/
sudo make install
sudo ruby-install --system ruby

We need to install chruby to change the ruby version to the one that we just installed

 wget -O chruby-0.3.9.tar.gz https://github.com/postmodern/chruby/archive/v0.3.9.tar.gz
tar -xzvf chruby-0.3.9.tar.gz
cd chruby-0.3.9/
sudo make install

To make chruby auto run we need to add the following lines to our ~/.bashrc or ~/.bash_profile script
```
 source /usr/local/share/chruby/chruby.sh
source /usr/local/share/chruby/auto.sh
```
In order to it to take effect run replace .bashrc with .bash_profile if you are using that instead
```
 source ~/.bashrc
```
Verify your ruby version changed with
```
 ruby -v
```
Make sure that the Ruby Gems are updated and then install the bundler GEM
```
 sudo gem update --system
sudo gem install bundler
```

Section 1.3: Python

In order to use the Pygments code syntax highlighter, we need to install python pip

sudo apt-get install python-pip -y

Section 1.4: Installing Git

sudo apt-get install git -y

Section 2: Getting your Blog onto your computer

In this section, you will clone the blog repo from github and install jekyll.

Open a terminal
Create the directory ~/projects
```
 mkdir ~/projects
```
cd into c:\projects
```
 cd ~/projects
```
Clone your github blog repo to your local machine with the “git clone [Repo Name]” command. Below is the example if you were to clone the jekyll repo for this blog series.
```
 git clone https://github.com/digitaldrummerj/jekyllforblogseries.git
```
cd into the repo that you just cloned
```
 cd jekyllforblogseries
```
Make sure that you have a GemFile with no file extension in the root of your repo with the following contents
```
 source 'https://rubygems.org'
gem 'github-pages'
gem 'jekyll-redirect-from'
```
Run the command to install the github-pages gem which has all of the required modules to make jekyll work and the jekyll redirect from plugin. It is one of the few plugins that Github pages supports and allows you to move pages around and have them automatically redirect so that people with bookmarks can still find a moved page.
```
 bundle install
```

Now we have jekyll installed. Time to test it out

Section 3: Testing Your Blog Works on Your Computer

Now that we have everything installed for jekyll it is time to test it out.

From a command prompt in your blog repo directory run the following command to tell jekyll to build and run the web site locally
```
 jekyll serve
```
If it build successfully you will see something like this
Now if you open up your browser and navigate to http://localhost:4000 you will see you blog.

Create a new file in the root of your repo called _configdev.yml

In the _configdev.yml add the following lines to set the url, turn off disqus/google analytics and google search.

 # then add this to the url as well "/repository-name"
url: http://localhost:4000
disqus:
disquscommentcount:
google_analytics:
google_search:

If your jekyll serve is still running do a ctrl+c to stop it.
Now run the following command to tell jekyll the config yml files to load
```
 jekyll serve --config _config.yml,_configdev.yml
```
If it build successfully you will see something like this
Now if you open up your browser and navigate to http://localhost:4000 you will see you blog and any place that reference site.url will be working.

Conclusion

Now you are ready to do all of your editing locally and test it out before the world gets to see it.

In our next lesson, I will show you how to install jekyll on OSx. Then you will learn how to create draft blog post that will only show on your local machine so that you don’t have to either clutter up your post directory with drafts or worry about accidentally publishing an unfinished article.

Jekyll Part 09: Installing Jekyll On Windows

Justin James — Wed, 09 Sep 2015 01:00:00 +0000

Welcome the continuing series on using Jekyll. In this tutorial we are going to setup your Windows computer to be able to edit your blog on your computer.

Overview

Note that Jekyll is not officially supported on Windows but it does work and I have not had any issues with it.

Section 1: installing Software

I am a big fan of Chocolatey and luckily a good majority of the software that we need had a chocolatey package so I wrote a gist file that we will install using Boxstarter.

Section 1.1: Installing Chocolatey

If you are not familiar with Chocolatey, check it out at http://chocolatey.org.

Open a command prompt

Run the following command to install Chocolatey

 @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

Close the command prompt and re-open it so that we can get the Chocolatey environment variables

Next we are going to install Boxstarter.

Section 1.2: Installing Boxstarer

Boxstarter gives you the ability to bulk install Chocolatey packages plus several helper functions for Windows configuration options.

When you bulk install using Boxstarter, it will detect any reboots that are triggered by MSI installers, reboot the machine and then run the Boxstarter script again.

The Windows configuration helper functions that Boxstarter provides to enable or disable Windows features include items such as:

Remote desktop.
Microsoft update.
User access control (UAC).
Set taskbar options like size, postion, and lock the size.
Set Windows explorer options like showing hidden files, protected OS files, and file extensions.

Run the following commands to install Boxstarter

chocolatey feature enable -n=allowGlobalConfirmation
choco install BoxStarter
chocolatey feature disable -n=allowGlobalConfirmation

Section 1.3: Installing the rest of the software

We are going to be installing Ruby, Ruby DevKit, and Python using Chocolatey and Boxstarter.

Now that you have Boxstarter installed, you will notice on your desktop a new icon called Boxstarter Shell.

Run the Boxstarter Shell

Run the following command to install the gist file commands. You can view the contents of the gist file here

 Install-BoxStarterPackage -PackageName https://gist.githubusercontent.com/digitaldrummerj/f290a11d16e98beabd8b/raw/de3d6d551a0f881e0e66cf6c8ec2cc49c35525e0/jekyll

If there were no errors, you are now ready to install jekyll.

Section 2: Getting your Blog onto your computer

In this section, you will clone the blog repo from github and install jekyll.

Open a command prompt
Create the directory c:\projects
```
 c:
mkdir \projects
```
cd into c:\projects
```
 c:
cd \projects
```
Clone your github blog repo to your local machine with the “git clone [Repo Name]” command. Below is the example if you were to clone the jekyll repo for this blog series.
```
 git clone https://github.com/digitaldrummerj/jekyllforblogseries.git
```
cd into the repo that you just cloned
```
 cd jekyllforblogseries
```

Make sure that you have a GemFile with no file extension in the root of your repo with the following contents

 source 'https://rubygems.org'
gem 'github-pages'
gem 'jekyll-redirect-from'
gem 'wdm', '~> 0.1.0' if Gem.win_platform?

Run the command to install the github-pages gem which has all of the required modules to make jekyll work and the jekyll redirect from plugin. It is one of the few plugins that Github pages supports and allows you to move pages around and have them automatically redirect so that people with bookmarks can still find a moved page.
```
 bundle install
```
The last thing we need to do is update the github-pages dependencies to be able to use the latest pygments.rb gem as the version included with the github-pages gem is not compatible with Windows
```
 bundle update github-pages
```

Now we have jekyll installed. Time to test it out

Section 3: Testing Your Blog Works on Your Computer

Now that we have everything installed for jekyll it is time to test it out.

From a command prompt in your blog repo directory run the following command to tell jekyll to build and run the web site locally
```
 jekyll serve
```
If it build successfully you will see something like this
Now if you open up your browser and navigate to http://localhost:4000 you will see you blog.

Section 3.1: Setting Up Dev _config.yml

Create a new file in the root of your repo called _configdev.yml

In the _configdev.yml add the following lines to set the url, turn off disqus/google analytics and google search.

 # then add this to the url as well "/repository-name"
url: http://localhost:4000
disqus:
disquscommentcount:
google_analytics:
google_search:

If your jekyll serve is still running do a ctrl+c to stop it.
Now run the following command to tell jekyll the config yml files to load
```
 jekyll serve --config _config.yml,_configdev.yml
```
If it build successfully you will see something like this
Now if you open up your browser and navigate to http://localhost:4000 you will see you blog and any place that reference site.url will be working.

Conclusion

Now you are ready to do all of your editing locally and test it out before the world gets to see it.

In our next lesson, I will show you how to install jekyll on OSx and Linux. Then you will learn how to create draft blog post that will only show on your local machine so that you don’t have to either clutter up your post directory with drafts or worry about accidentally publishing an unfinished article.

Camtasia 8.5 - How to Record to Mono

Justin James — Tue, 25 Aug 2015 00:00:00 +0000

Today I upgraded from Camtasia 8.3 to Camtasia 8.5 and ran into an issue with my audio settings only recording to the left speaker. I know that my microphone only records in mono so this was not surprising.

What was surprising is that the audio settings for the Camtasia Recorder were greyed out when using the TREC format.

In Camtasia 8.3 I could tell the Camtasia Recorder to record in mono so that it would be in both left and right speakers.

After a little bit of searching I came across this forum post that had the answer at the bottom.

When you are in Camtasia Studio, click on your clip, select audio options and check the mix to mono option.

Note: You may have to separate the audio from the video by right clicking on the clip and selecting the separate video and audio. Then click on the audio track and follow the steps above.

Problem solved and I can go back to finishing my video.

Visual Studio 2015 - External Web Tools

Justin James — Thu, 20 Aug 2015 00:00:00 +0000

I ran into an issue with an npm package mis-behaving in Visual Studio 2015 but working just fine from the command line.

After scratching my head for awhile trying to figure out what was going on, I discovered that Visual Studio was pointing to its own version of npm and node and not that ones that were available in my path that the command line was using. Visual Studio 2015 ships with:

Node
npm
git

All of these tools are installed as part of Visual Studio but they are installed into the Visual Studio install directory and are not used by the command line.

If you have manually installed any of these tools like I had, then most likely you have a difference in versions between what the command line is using versus Visual Studio.

Luckily you can easily tell Visual Studio which versions to use.

The settings in Visual Studio are under Tools -> Options -> Projects and Solutions -> External Web Tools

By default the system path is set to be looked at after the Visual Studio versions ($(DevEnvDir)\Extensions\Microsoft\Web Tools\External).

To use the system PATH environment variable instead, click on the $(PATH) and use the arrows at the top-right to move it up.

This will ensure that the version of the tools used matches what the command line is using.

Visual Studio Code Snippets

Justin James — Tue, 18 Aug 2015 00:00:00 +0000

There are a bunch of built-in Visual Studio code snippets that will generate code for you with a short keyword and then a tab key press. These shortcuts will make you more efficient when writing code such as creating properties, loops, exceptions, etc.

Below I have listed the code snippets that I most frequently use and what the output from them looks like.

To use these snippets type they keyword and then press the tab key.

Loops

do
```
 do
{
} while (b);
```
while
```
 while (true)
{
}
```
for
```
 for (int i = 0; i < UPPER; i++)
{
}
```

foreach

 foreach (var VARIABLE in COLLECTION)
{
}

Conditionals

if
```
 if (b)
{
}
```
else
```
 else
{
}
```
switch
```
 switch (@enum)
{
}
```

Error Trapping

try
```
 try
{
}
catch (Exception)
{
throw;
}
```
tryf
```
 try
{
}
finally
{
}
```

exception

 [Serializable]
public class MyException : Exception
{
//
// For guidelines regarding the creation of new exception types, see
// http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpgenref/html/cpconerrorraisinghandlingguidelines.asp
// and
// http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dncscol/html/csharp07192001.asp
public MyException()
{
}
public MyException(string message) : base(message)
{
}
public MyException(string message, Exception inner) : base(message, inner)
{
}
protected MyException(
SerializationInfo info,
StreamingContext context) : base(info, context)
{
}
}

Properties

prop
```
 public TYPE Type { get; set; }
```

propfull

 private int myVar;
public int MyProperty
{
get { return myVar; }
set { myVar = value; }
}

propg
```
 public int I { get; private set; }
```

Misc

ctor

 public class Misc
{
public Misc()
{
}
}

enum
```
 enum MyEnum
{
}
```
struct
```
 struct MyStruct
{
}
```
#region
```
 #region MyRegion
#endregion
```

There are several more code snippets that are available at http://tinyurl.com/vscodesnippets.

With these few code snippets you will be amazed at how much less code you end up writing by hand. Ever little bit helps to make you more productive and efficient as a developer.

Let me know what you favorite snippets are or ones that you have created.

Favorite Visual Studio Shortcuts

Justin James — Thu, 13 Aug 2015 00:00:00 +0000

Here is a list of Visual Studio Community Edition shortcuts that I use.

Building Solution

Name	Shortcut
Build Solution	Ctrl+Shift+B
Run Code Analysis on Solution	Alt+F11

Building Current Project

There is no default shortcut for building the current project or running code analysis on it. You can go under the Build menu and select to build just the current project but this is a manual step that requires you to navigate through the menus.

To accomplish this, I set the keyboard shortcut Ctrl + \ .

Tools -> Options -> Keyboard or Ctrl + Q, type Keyboard, and hit Enter
Set shortcut for Build.BuildSelection.
Open a file and Ctrl+\ should now build that project

Run Code Analysis on Current Project

You can also run code analysis on the current project like you can on the whole solution.

To accomplish this, I set the keyboard shortcut Ctrl+Alt+\

Tools -> Options -> Keyboard or Ctrl + Q, type Keyboard, and hit Enter
Set shortcut for Build.RunCodeAnalysisonSelection.
Open a file and Ctrl+Alt+\ to run the the code analysis for the project

Debugging

Name	Shortcut
Start Debugging	F5
Start without Debugging	Ctrl+F5
Toggle Breakpoint On/Off for line	F9
Run to Cursor and then stop like there is a breakpoint on that line	Ctrl+F10
Step Through the Code Line by Line	F11
Modify what the debugger displays for an object	http://tinyurl.com/vsdebugattrib

Searching

Name	Shortcut
Quick Search	Ctrl+Q
Find in Files	Ctrl+Shift+F
Next Search Result	F8
Previous Search Result	Shift+F8

Name	Shortcut
Go To Definition	F12 Ctrl+Click with Productivity Power Tools
Close All Documents	Alt+W,L

Visual Studio Windows Layout

In Visual Studio 2015, you can now save the Windows Layout and change them with a shortcut key.

To Save: In Visual Studio 2015, under the Windows menu, click the Save Windows Layout
To Apply Layout: In Visual Studio 2015, under the Windows menu, select the Apply Windows layout popout and pick the layout to apply. There is also a shortcut key for each of the saved Windows layouts. By default it is Ctrl+Alt+# (e.g. Ctrl+Alt+1 for the 1st saved layout)

If you have Visual Studio 2013 and below, you can use use the Visual Studio extension, Layouts O Rama

Resharper Searching/Navigation

If you have Resharper there are several additional options that you get for searching.

Note: Assumes Visual Studio keyboard layout for Resharper

Name	Shortcut
Go to Everything	Ctrl + T
Go to File	Ctrl + Shift + T
Go to Member in File	Alt + \
Find Current File In Solution Explorer	Alt + Shift + L

Format Document

Name	Shortcut
Format Document	Ctrl+K,D
Resharper Format Document	Ctrl+E,F Note: Assumes Visual Studio keyboard layout

Additional Shortcuts

There are a lot more shortcuts that are set in Visual Studio. I have only covered the ones that I use the most. To see the full list, visit http://visualstudioshortcuts.com.

Favorite Visual Studio Extensions

Justin James — Tue, 11 Aug 2015 00:00:00 +0000

In the Visual Studio Extension Gallery there are hundreds of extensions that are available. The extensions add additional functionality to Visual Studio. Below are the extensions that I typically have installed.

Web Essentials

Big pile of awesome for web developers. If you are doing web development you need to have this installed.

http://vswebessentials.com/

Features:

Enhanced browser link
Markdown Editor/Preview
Minification of javascript files
JSHint / CSSHint integration
TypeScript preview of compiled ts file
Plus much much more

GhostDoc

Auto generate Xml doc comments based on your method/parameter names, exceptions through and return types.

http://tinyurl.com/ghostdoc

Default shortcut: ctrl+shift+d

I Hate Regions

Regions is one of those features that you either love or hate. If you are not a fan of regions then this extension is for you. No longer will you even care that a file has a region in it.

http://tinyurl.com/regionssuck

Features:

Auto expand regions when file opens
Make the region text smaller and blend more into background so that it stays out of the way
Can be configure to not allow shrinking of the regions

Productiviy Power Tools

This extension is written by Microsoft adds a lot of productivity enhancements to Visual Studio that you just wish came out of the box.

http://tinyurl.com/vsprodpower

Features:

Collapse projects to folders
Copy and paste references between projects
Copy and paste project as a reference
Fix mixed tabs and spaces
Peek definition
Open containing folder for project
Open command line
Solution error visualizer
Sort using statements
Remove unused using statements

VS Commands

Another productivity tool for Visual Studio. Unfortunately, there is not yet a Visual Studio 2015 version.

http://tinyurl.com/vscommands13

Features:

Cancel build on first error
Keep documents open when reloading project
Start new instance without debugging
Start new instance with debugging
Sync zoom levels between pages

Switch Startup Project

Easily configure different startup project configurations and be able to switch between them or a select single project to start up.

http://tinyurl.com/vsswitchstart

Layout O Rama

Store Visual Studio windows layout and be able to quickly change to a new layout. This is really useful when moving to different monitor setups/resolution.

Note: In Visual Studio 2015 this is backed into Visual Studio. You can save layouts under the Windows menu in Visual Studio and quickly apply those saved layouts with a shortcut key or under the Windows -> Apply Layout menu.

http://tinyurl.com/vslayout

Task Runner Explorer

Run Grunt or Gulp task directly in Visual Studio.

Can hook Grunt/Gulp task up to the Visual Studio build system (before/after build, on clean or solution open)

Note: In Visual Studio 2015, this is included out of the box.

http://tinyurl.com/vstaskrunner

File Nesting

Easily group files by name and be able to collapse the group.

http://tinyurl.com/vsfilenest

Add New File

Fast and easy way to add new files to any project including files that start with a dart.

https://visualstudiogallery.msdn.microsoft.com/3f820e99-6c0d-41db-aa74-a18d9623b1f3

Package Intellisense

NPM and Bower package intellisense directly in the Visual Studio JSON editor.

https://visualstudiogallery.msdn.microsoft.com/65748cdb-4087-497e-a394-2e3449c8e61e

Bundler & Minifier

Bundle and minify JS, CSSS, and Html files. Can be wired into the build system in Visual Studio.

https://visualstudiogallery.msdn.microsoft.com/9ec27da7-e24b-4d56-8064-fd7e88ac1c40

Open Command Line

Open a command line at the root of the project. Supports all consoles: CMD, Powershell, Bash, etc.

Note: A similar feature is also available as part of the Productivity Power Tools.

https://visualstudiogallery.msdn.microsoft.com/4e84e2cf-2d6b-472a-b1e2-b84932511379

Stop on First build Error

Stops a solution build immediately after a project has a failed to build error.

https://visualstudiogallery.msdn.microsoft.com/91aaa139-5d3c-43a7-b39f-369196a84fa5

Resharper

This is the one extension that I cannot live without. It makes Visual Studio a much better IDE. Once you start using it, you will wonder how you ever lived without it. I could easily do several blog post on the features of Resharper. Below I picked out some of my favorite features.

http://jetbrains.com/resharper

Features:

Navigation

Go to Everything / Type - quick navigation to all possible destinations (types, symbols or files).
Go to file - quickly navigate to any file within your solution.
Go to File member - quickly navigate to a particular method or field in the current file.

Docs: https://www.jetbrains.com/resharper/features/navigation_search.html

Code Generation

Create from usage
Generate Type members
Implement/Override Methods
Generate formatting or equality members

Docs: https://www.jetbrains.com/resharper/features/code_generation.html

Code Analysis / Refactoring / Code Templates

Continuous code quality analysis
Detect errors and code smells
Quick fixes
Code Templates (snippets, surround with, and file)
Lots of refactoring options: https://www.jetbrains.com/resharper/features/code_refactoring.html

Code Cleanup

Code formatting
Optimize namespace declarations
Remove code redundancies
File and type layout
Code style configuration and sharing

Camelhumps

This is not so much a feature but an option that you can turn on. I like it so much though that I consider it a feature.

When turned on it allows you to auto filter intellisense and any search dialogs by typing the first letter of each capitalized word in what you are looking for. For example, if you have a class called MyClassExample you would search for it by typing MCE.

Warning: Camelhumps changes the behavior of Ctrl+Backspace to now only delete the previous word instead of the whole declaration. For example, MyClassExample would only delete Example and leave MyClass.

Unit Test Runner

Run and debug test
Can run multiple unit test sessions simultaneously and independently of each other
Docs: https://www.jetbrains.com/resharper/features/unit_testing.html

Complete feature list at https://www.jetbrains.com/resharper/features/

Favorite Windows Shortcuts

Justin James — Thu, 06 Aug 2015 00:00:00 +0000

So many times I watch Windows users spending lots of time doing task that should just take a few seconds but instead are taking several minutes because they are taking the long way around to get the task completed.

Here are some examples that I see people doing and below I will show you how to get them done the easiest way possible.

Getting 2 programs side by side half screened
Navigating in Windows Explorer to find the Visual Studio solution or project directory
Open programs as an administrator
Just opening up task manager.

Note: All of these shortcuts are built directly into Windows.

Moving Program between half screen, full screen and monitors

Move program to half screen on the left side: Windows Key + Left Arrow
Move Program to half screen on the right side: Windows Key + Right Arrow
Move to next monitor in same position: Add Shift key to commands
Minimze Program: Windows Key + Down Arrow
Maximize Program: Windows Key + Up Arrow

Start Program as Administrator

Windows 8:

Windows Key
Start typing program name to bring up search bar
Find the program that you want to open as admin in the results list
Either Ctrl + Shift + Left Mouse Click or Ctrl + Shift + Enter
When prompted to open as adminstrative, click the yes button

Quickly Opening up Visual Studio Solutions

Windows has a feature called Jump List that allows you to pick items to an icon in the taskbar that are available when you right-click on the icons.

Example:

Pin Visual Studio icon to taskbar
Open a Visual Studio Solution
Right-click on Visual Studio icon in taskbar
Find the project that you just opened and click the pin icon next to it
Now instead of having to open Visual Studio and navigating to the solution file, you can right-click on the Visual Studio icon and select the solution from the pinned item.

Quickly Opening Task Manager

Ctrl+Shift+Esc

Windows Explorer Favorites

Windows explorer has the favorites links section that you can drag folders onto.

This is a great place to put commonly used folders such as the folders for current project that you are working on.

Note: That adding or removing folders from the Favorites list does not have any affect on the actual folder, it only removes it from the Favorites list.

Favorite Windows Programs

Justin James — Tue, 28 Jul 2015 08:00:00 +0000

Developer productivity is not just about maximizing your speed in editor. It also includes additional software to help you be more productive. Below is some of my favorite Windows software that I use.

Password Management

LastPass - Password Manager. Remembers passwords so you don’t have to. Auto log you into web sites, store secure notes, wifi passwords, etc. Web interface and desktop is free. Mobile device application is premium version at $12 per year.

Readers

Pocket - Save web pages/rss feed articles for later and view when ready including offline. Way better than keeping a ton of bookmarks around that you never get back to.
Feedly - RSS Feed Reader with Pocket integration.

Editors

Linqpad - Scratchpad for .NET. Rich formatted output. Intellisense. If you are a .NET program this is a much have application. Well worth the small amount of money to get the license to use the Intellisense.
Visual Studio Code - great all around text editor and development environment. Focused on code first.

Planning

Kanban Flow / Pomodoro - I used Kanban Flow to plan my week and use the Pomodoro technique to work on my tasks. I use the setup that John Sonmez talks about at https://www.youtube.com/watch?v=W9k0OhJkjQ0
Todoist - Todo Tasks list. Quick and easy way to add tasks from Chrome or mobile device. Ultimately I import move these into Kanban Flow but it is much quicker on a mobile device to use Todoist.

Utilities

Chocolatey - Install Windows software the easy way. Take the guess work out of where to download software and how to get it installed.
Dropbox - sync directories and files between machines. Can either sync all or selectively sync file.
Greenshot - free utility to take and edit screenshots. has a basic built-in editor, can copy to clipboard or open an office product (Word, Excel, PowerPoint, outlook) if installed.
Launchy - Forget about the start menu. Launch programs with a few keystrokes. Setup shortcuts for common web sites you use.
Vagrant - Easily create lightweight and reproducible virtual machines. If you are using virtual machines on your Windows machine, let Vagrant manage the configurations of it. No longer will it only work on your machine. I have a blog series on using Vagrant and Chocolatey together at [{{ “/vagrant-overview” | prepend: site.baseurl | prepend: site.url }}]({{ “/vagrant-overview” | prepend: site.baseurl | prepend: site.url }})

Presentation Environment Setup

Justin James — Thu, 09 Jul 2015 00:00:00 +0000

One of the first things that you learn when giving presentations is that fonts and font size matters just as much as the content. Below is a listing of the various font settings that I have found to be effective and how to set them in the programs that I use.

If you have other programs that you use, feel free to leave a comment on the font settings that you use.

Notepad

Format -> Fonts
- Font: Lucida Console
- Font Style: Regular
- Size: 18-22

Notepad++

Settings -> Style Configurator …
- Select Theme: Default (stylers.xml)
- Language: Default Styles
- Style: Global Override
- Font Name: Lucida Console
- Font Size: 18
- Bold: sometimes checked depending on the day

Command Prompt

Open cmd
Click on menu and select Defaults
Font
- Font: Lucida Console
- Size: 14pt-18pt
- Check “Bold fonts”
Colors
- Screen Text: Lime (Kermit Green or Green: 255, Red: 0, Blue: 9)
- Screen Background: Black

Powershell and Azure Powershell Command Prompt

For Win 8.1 On Start find PowerShell or Azure Powershell
Open file location.
Open shortcut Properties (right click menu).
Security tab -> Edit your permissions to Modify.
Select Font tab. (skip errors - nothing is set hence problem)
Select Font Tab
- Font: Lucida Console
- Size: 20
- Bold Fonts: Checked
Select Colors Tag
- Screen Text: Gray / Red: 238, Green: 237, Blue: 240
- Screen background: blue / Red: 1, Green: 36, Blue: 86
Select Layout Tab
- Windows Size Width: 80 (match screen buffer size)
- Window Size Height: 27 (various depending on resolution)
- Let system position window: checked
Click Apply Button
Security tab Edit permissions remove modify.
Click Ok

Remember to always launch powershell from the start menu. For some reason this does not seem to affect the fonts if you do win+r.

Don’t forget to pin to start menu or task bar if going to be using for demo.

Powershell ISE

Powershell ISE: C:\Windows\System32\WindowsPowerShell\v1.0

For Win 8.1, on start find powershell_ise.exe
Tools -> Options -> Colors and Fonts
- Click “Manage Themse…”
- Select Presentation

Don’t forget to pin to start menu or task bar if going to be using for demo.

Visual Studio Code

File -> Preferences -> User Settings

 {
// Wrap based on screen size
"editor.wrappingColumn": 0,
// Version: 1.03
//Controls the indentation of wrapped lines. Can be one of 'none', 'same' or 'indent'.
//"editor.wrappingIndent": "indent",
"editor.tabSize": "2",
// Controls the font family.
"editor.fontFamily": "Consolas",
// Controls the font size.
"editor.fontSize": 22,
// Version: 1.0.3
//"editor.formatOnType": true
}

Visual Studio Community / Ultimate / Enterprise

Go to Tools -> Options
Environment -> General
- Change the color theme back to “Blue” if you changed it. You color scheme might be cool but it will distract attendees.
Go to Environment -> Fonts and Colors
- Under the Show Settings For drop down make the following changes:
  - Text Editor: Arial 14
  - Editor Tooltip: Calibri 14
  - Statement Completion: Calibri 14,
  - All Text Tool Windows: Tahoma 13
  - Watch, Locals, and Autos Tool Windows: Tahoma 14
  - Environment Font: Calibri 14
  - Package Manager Console: ??? (if using it for demos)
Go to Environment -> Start up
- Change At startup dropdown to “Show Empty Environment”
- Uncheck Download content every
Go to Environment -> Synchronized Settings
- Uncheck “Synchronize settings across devices when signed into Visual Studio”
- Note: This is done so that your presentation settings do affect any other machines
Go to Environment -> Keyboard
- Build.BuildSelection -> Ctrl + \
Go To Projects and Solutions
- Check “Track Active Item in Solution Explorer”
- Check “Always Show Solution”
- Check “Always show Error List if build finishes with errors”
- Check “Show Output windows when build starts”
Go To Text Editor
- ** All Languages**
  - Check “Word Wrap”
  - Check “Line Numbers”
  - Check “Navigation Bar”
  - Check “Auto Brace Completion”
- Go To All Languages -> Tabs
  - Set “Indenting” to Smart
  - Set “Tab size” to 2
  - Set “Indent size” to 2
  - Check “Keep tabs”

Sources Used

Here are some various sources that I got information from.

Vagrant Part 6 - Behind A Proxy Server

Justin James — Mon, 06 Jul 2015 06:00:00 +0000

Overview

If you are working behind a proxy server you will need to configure both the host computer and the Vagrant virtual machines to communicate through the proxy server. It is easy to configure the proxy settings but finding the documentation is a different story. Below we will go through how to configure the proxy for the vagrant commands (up, status, box add, etc) and then how to configure the virtual machine proxy settings.

Vagrant Commands

In order for the Vagrant commands that talk out to the internet to work there are several environment variables that need to be set.

The typical proxy environment variables are http_proxy and https_proxy. You can either permanently set them so they are always available or you can set them only for the current open command prompt/terminal.

On Windows

Current Open Command Prompt

set http_proxy=http://yourproxyserver:port
set https_proxy=https://yourproxyserver:port

Permantly Set

setx http_proxy=http://yourproxyserver:port
setx https_proxy=https://yourproxyserver:port

View Proxy Settings

If the commands below just echo out the text instead of the actual proxy server, it means that the proxy server is not set.

echo %http_proxy%
echo %https_proxy%

Removing Proxy Setting

Unfortunately there is no way to remove the proxy settings from the command line without issuing a reg delete. For whatever reason, Microsoft only allows you to blank out an environment variable with setx but not remove it. Luckily, this does make it so that Vagrant will not use a proxy to connect to the internet.

Vagrant Boxes (Virtual Machines)

WARNING: As of September 13, 2015, the vagrant-proxyconf appears to no longer work on Windows machines. It has been throwing powershell errors on vagrant up. It still works on Linux vagrant machines.

In order to configure the vagrant virtual machines to use a proxy server, you need to install the vagrant-proxyconf plugin.

vagrant plugin install vagrant-proxyconf

The vagrant-proxyconf can configure the proxy settings for Generic Proxy environment variables, Chef, Apt, Docker, Git, npm, PEAR, Subversion, Yum, and Windows.

Below we will walk through the basics of using the vagrant-proxyconf plugin. You can read the full documentation at https://github.com/tmatilai/vagrant-proxyconf.

Ensuring the plugin is installed

There is no built-in vagrant command to make sure that a plugin is installed but since the Vagrantfile is a Ruby file, it is very easy to write a little bit of Ruby code to ensure that the plugin is installed.

In the Vagrantfile before the Vagrant.configure(2) do |config| line added the following code snippet:

if !Vagrant.has_plugin?("vagrant-proxyconf")
system('vagrant plugin install vagrant-proxyconf')
raise("vagrant-proxyconf installed. Run command again.");
end

Generic Proxy Settings

You can either configure the Vagrant proxy settings on a per Vagrant virtual machine basis or globally.

To configure on a per machine basis, add the code snippet below to the the machines VagrantFile.

To configure global add the code snippet below to VagrantFile at .vagrant.d/Vagrantfile. You may need to create this file. To learn more about a global VagrantFile and the order that the VagrantFile’s are read see http://docs.vagrantup.com/v2/vagrantfile/.

Vagrant.configure("2") do |config|
if Vagrant.has_plugin?("vagrant-proxyconf")
config.proxy.http = "http://192.168.0.2:3128/"
config.proxy.https = "http://192.168.0.2:3128/"
config.proxy.no_proxy = "localhost,127.0.0.1,.example.com"
end
# ... rest of the configurations
end

Next Steps

Now you have everything you need to configure Vagrant to work from behind a proxy server. In the next lesson we will cover the different networking options for Vagrant.

Vagrant Part 5 - Installing Your Software

Justin James — Thu, 18 Jun 2015 05:00:00 +0000

Welcome to the Vagrant lesson on how to use Boxstarter to configure Windows and install software as part of the Vagrant provisioning process.

Overview

We have all of the needed software in place to start configuring and installing software onto our virtual machine.

In this lesson, we will create an file with all of the install and configuration commands that will be executed with Boxstarter.

Can I only install Chocolatey Packages?

Even though Boxstarter is a Chocolatey package, you can install and configure more than just Chocolatey packages. At the end of the day it is running a Powershell script, so anything that you can do with Powershell you can put into your file to execute through Boxstarter.

Example File

In the shell directory for MyFirstMachine, create a file called BoxStarterGist.txt.
In the shell directory for MyFirstMachine, create a 2nd file called RunBoxStarterGist.bat.
Open the RunBoxStarterGist.bat file and add the following command to copy the file to the temp directory and execute it with Boxstarter.
- The reason to copy the BoxStarterGist.txt file to a temp directory is that sometimes when Boxstarter reboots, the vagrant synced folder for Virtualbox is not mounted until after Boxstarter tries to continue executing the bat file, so it then fails.
```
 copy "%systemdrive%\vagrant\shell\BoxStarterGist.txt" "%temp%\BoxStarterGist.txt"
@powershell -NoProfile -ExecutionPolicy Bypass -Command "Install-BoxStarterPackage -PackageName %temp%\\BoxstarterGist.txt"
```

Populating the BoxstarterGist.txt file

We are going to do several things in the BoxstarterGist.txt file:

Set some Windows configurations such as taskbar size, Windows explorer show extensions/protected OS file/hidden files, and enable rdp.
Install some Chocolatey packages such as Visual Studio Code, nodejs, git, and Google Chrome.
Install some npm packages such as Ionic and Cordova
Run a git clone to pull down source code for a project

These are all examples of things that you can do. At the end of the day it is just a Powershell script so that options are nearly limitless. I encourage you to read up on Boxstarter at http://boxstarter.org to see all of options that you have.

Open up the BoxstarterGist.txt file in your favorite text editor and proceed to the configuration sections. I have the sections in the order that I like to install/configure but you can have them in any order in the BoxstarterGist.txt file.

Windows Configurations

This section is the Windows configuration options that we want to set. The full Windows configuration documentation for Boxstarter is available at http://boxstarter.org/WinConfig.

Enable Remote Desktop
```
 Enable-RemoteDesktop
```
Tell Windows that you want to use Powershell instead of a command prompt when you use the corner navigation.
```
 Set-CornerNavigationOptions -EnableUsePowerShellOnWinX
```

In Windows exploer turn on hidden files, protected operating system files, show file extensions, and show the full path in the title bar.

 Set-ExplorerOptions -EnableShowHiddenFilesFoldersDrives -EnableShowProtectedOSFiles -EnableShowFileExtensions -EnableShowFullPathInTitlebar

Set the taskbar size to small and lock it in place.
```
 Set-TaskbarOptions -Size Small -Lock
```

Chocolatey Installs

Now it is time to install all of our Chocolatey Packages.

The first step is to turn off the prompting from Chocolatey asking if you are sure you want to install this package. Don’t worry will turn it back on in a few lines after the Chocolatey package installs are completed.

chocolatey feature enable -n=allowGlobalConfirmation

Next we are going to install the Chocolatey packages that you want. I picked a few but go to the Chocolatey gallery at http://chocolatey.org and find the packages that meet your needs.

choco install git
choco install nodejs
choco install visualstudiocode
choco install GoogleChrome

Now that we are done installing Chocolatey packages we are going to turn back on the prompting for confirmation that you wanted to install the packages.

chocolatey feature disable -n=allowGlobalConfirmation

Last thing we are going to do is pin a couple of items that we installs to the taskbar using a built-in helper from Chocolatey called Install-ChocolateyPinnedTaskBarItem.

Install-ChocolateyPinnedTaskBarItem "${env:UserProfile}\Desktop\code.lnk"
Install-ChocolateyPinnedTaskBarItem "${env:ProgramFiles(x86)}\Google\Chrome\Application\chrome.exe"

npm installs

I play around with npm a lot and don’t like the spinner when running an npm command, so I turn that off and set the log level that I like. I then install the Ionic framework and Cordova npm packages.

npm config set loglevel http
npm config set spin false
npm install -g ionic
npm install -g cordova

git clone repositories

The last thing that I do as part of the BoxStarterGist.txt file is to create c:\projects which is where I store my project source code at and pull it down from Github.

$projectDir = "${env:systemdrive}\projects"
If (!(Test-Path $projectDir)) {
New-Item -Path $projectDir -ItemType Directory
}
cd $projectDir
git clone https://github.com/digitaldrummerj/VagrantTalk

How to install your software part of Vagrant provision?

Now that we have the BoxStarterGist.txt file configured the way that we want it, we need to tell Vagrant what to do with it.

For this one we are using the file provision which copies the files to the virutal machine but does not execute it. The reason for this is that when Boxstarter reboots the machine, Vagrant thinks the script is done and proceeds to the next provision call which sometimes interfers with the Boxstarter run. So instead I put it on the desktop and manually login to the machine and execute the RunBoxStarterGist.bat file.

 config.vm.provision "file",
source: "shell/RunBoxStarterGist.bat",
destination: "desktop\\RunBoxStarterGist.bat"

Running the RunBoxStarterGist.bat file

After you do vagrant up and all of the provisioners runs, you will see the RunBoxstarterGist.bat on the desktop for the vagrant user. You will just need to manually execute this file. Once you kick it off you can walk away and let it do all of the installs.

Next Steps

The next lesson will cover the different networking options that vagrant supports. By default Vagrant sets up the virtual machine with a NAT network so that you can only get to the machine from the host. You an however setup both a public and private network. We will dive into how to do this.

Vagrant Part 4 - Install Boxstarter

Justin James — Thu, 18 Jun 2015 03:00:00 +0000

Welcome to the Vagrant lesson on installing Boxstarter as part of the Vagrant provisioning process.

What does Boxstarter give you?

Boxstarter gives you the ability to bulk install Chocolatey packages plus several helper functions for Windows configuration options.

When you bulk install using Boxstarter, it will detect any reboots that are triggered by MSI installers, reboot the machine and then run the Boxstarter script again.

The Windows configuration helper functions that Boxstarter provides to enable or disable Windows features include items such as:

Remote desktop.
Microsoft update.
User access control (UAC).
Set taskbar options like size, postion, and lock the size.
Set Windows explorer options like showing hidden files, protected OS files, and file extensions.

How to install Boxstarter part of Vagrant provision?

Since we already have Chocolatey installed as part of the previous lesson, installing Boxstarter just requires use to call the choco install Boxstarter command.

However, there are a few things we need to do in order for this to work without user interaction.

You have to run the install command as separate shell provision command in Vagrant instead of the main.cmd that we used to install Chocolatey. The reason for this is due to the environment path updates that are part of the Chocolatey install are not picked up until you open a new command prompt.
You have to turn off the Chocolatey confirmation prompts that ask you if you want to install this package or not.

Creating the Provisioning Scripts

Navigate to the shell directory in the MyFirstMachine directory that we created in previous lessons.
Create a new file called InstallBoxStarter.bat

Add the following contents to the InstallBoxStarter.bat file:

 chocolatey feature enable -n=allowGlobalConfirmation
choco install BoxStarter
chocolatey feature disable -n=allowGlobalConfirmation

In the MyFirstMachine folder, open the VagrantFile in a text editor and add the following provision command after the provision command that is running the main.cmd file in the previous lesson.
```
 config.vm.provision :shell, path: "shell/InstallBoxStarter.bat"
```

Next Steps

So far in the provisioning process, we have had Vagrant install both Chocolatey and Boxstarter. In the next lesson, we will use Boxstarter to bulk install our software and configure Windows.

Vagrant Part 3 - Provisioning With Chocolatey

Justin James — Thu, 18 Jun 2015 02:00:00 +0000

Welcome to the Vagrant lesson on installing Chocolatey as part of the Vagrant provisioning process.

Overview

The first thing we are going to do as part our provisioning is to install Chocolatey onto the virtual machine.

As we saw in the [Easy Virtual Machine Management]({{"/vagrant-overview" | prepend: site.baseurl | prepend: site.url }}) post, having Chocolatey on a machine allows you to easily install all of our software in an automated and repeatable fashion.

How to install as part of Vagrant provision?

Open Windows Explorer and navigate to the MyFirstMachine directory that we created in the [Easy Virtual Machine Management]({{ “/vagrant-overview” | prepend: site.baseurl | prepend: site.url }}) post.
Create a directory called shell
In the shell directory, create a file called main.cmd
Open the main.cmd in your text editor and add the following line:
- This will tell powershell to run the file c:\vagrant\shell\InstallChocolatey.ps1 and set the execution policy to bypass so that the powershell script can be run.
```
 @powershell -NoProfile -ExecutionPolicy Bypass -File "%systemdrive%\vagrant\shell\InstallChocolatey.ps1"
```

In the shell directory, create a file called InstallChocolatey.ps1

The file will check to see if Chocolatey is installed and if not, it will install it.

 $ChocoInstallPath = "$env:SystemDrive\ProgramData\Chocolatey\bin"
if (!(Test-Path $ChocoInstallPath)) {
iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))
}

The last step is to tell VagrantFile to run the main.cmd file as part of the provisioning.
```
 config.vm.provision :shell, path: "shell/main.cmd"
```

Next Steps

We now have Chocolatey installed on the virtual machine and are ready to start installing software. The next lesson will install Boxstarter and then you will bulk install all of our software.

Vagrant Part 2 - Provisioning Introduction

Justin James — Thu, 18 Jun 2015 01:00:00 +0000

Welcome to the Vagrant lesson on what Vagrant provisioning is.

What is Vagrant Provisioning?

Provisioners allow you to automatically install software and alter configurations during the Vagrant up process.

This is useful since boxes typically aren’t built perfectly for your use case. Granted you could just login to the box and install all of the software by hand. However, by using the provisioning it automates the process, make it repeatable, and requires no human interaction.

This means that you can run vagrant destory, then vagrant up and have a fully configured environment. This makes provisioning super powerful.

Vagrant gives you multiple options for provisioning the machine, from simple command line scripts to more complex configuration management systems such as chef and puppet.

When Does Vagrant Provisioning Happens?

Provisioning happens at certain points during the lifetime of your Vagrant environment:

On the first vagrant up that creates the environment, provisioning is run.
When vagrant provision is used on a running environment.
When vagrant reload –provision is called. The –provision flag must be present to force provisioning.

You can also bring up your environment and explicitly not run provisioners by specifying –no-provision. You would typically only do this if you need to test out something in your vagrant configuration.

Vagrant Provisioning Providers

For this tutorial, we are going to use the shell and file providers as they are the simpliest to get started with.

Shell Provider

The shell provider will run either batch files or powershell scripts depending on the file extension. The script needs to be able to run without user interaction.

File Provider

The file provider, copies a file from your machine to the virtual machine but does not run the script. This is useful for scripts that need user interaction or configuration files that need to be put into place on the virtual machine.

Next Steps

Now that we understand what provisioning is, in the next couple of lessons we are going to expand on the provisioning to have it install Chocolatey, Boxstarter, and then all of our software using Chocolatey/BoxStarter.

Vagrant Part 1 - Easy Virtual Machine Management

Justin James — Tue, 16 Jun 2015 00:00:00 +0000

Welcome to an overview of Vagrant and creating of your first Vagrant machine.

What is Vagrant?

Vagrant allows you to create and manage lightweight reproducible virtual machines.

Essentially, all of the configurations to create and configure a virtual machine are kept separate from the virtual machine. This allows you to delete the virtual machine and then re-create it with all of the same configurations at any point.

No longer do you have to be afraid to delete a virtual machine for a project that isn’t active. You can also give the Vagrant configuration to a co-worker or move it to another machine and be assured that everything will get setup correctly when you create the virtual machine on the new machine.

Before, we can see Vagrant in action, we first need to install a little bit of software onto your machine.

Getting Started

In this section, we will install all of the software needed to be able to Vagrant.

There are 3 pieces of software that we need:

Chocolatey
Virtualbox
Vagrant

Chocolatey

Chocolatey is a Windows software install manager. It solves several common issues with software installed:

Where do I find the installer for software?
How do I find the 64 bit vs 32 bit version?
What default options should I select?
Where should I install the software to?
etc
etc

To install Chocolatey, open an administrative command prompt and run the command below or get the command right on the home for Chocolatey at http://chocolatey.org .

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

Go ahead and close the command prompt that you used to install Chocolatey. This is needed so that all of the environment variables get refresh that are part of the Chocolatey installer.

Now that we have Chocolatey installed, we can start installing software or as Chocolatey calls them, packages.

To install a package, you would run the command:

choco install [package name]

You can find the package names on the Chocolatey Gallery at http://chocolatey.org.

Next we are going to install Virtualbox using Chocolatey.

Virtualbox

For this tutorial, I am using Virtualbox as the virtual machine provider. You could also use Hyper-V (free) or VMWare (paid). If you are using Hyper-V already, you can not use Virtualbox at the same as they conflict with each other.

If you already have Virtualbox installed, you can skip this step.

Open an administrative command prompt and run the following Chocolatey command.

choco install virtualbox.extensionpack

The command above will also instal Virtualbox as it is listed as a dependency for the virtualbox.extensionpack package.

Vagrant

To install Vagrant, from the administrative command prompt, run the following Chocolatey command.

choco install vagrant

We are now ready to create our first virtual machine using Vagrant.

Your First Machine

Vagrant create a file called VagrantFile for each virtual machine, The VagrantFile contains the information about the box the virtual machine is based off of, how to setup the network, the virtualization provider (virtualbox, vmare, hyper-v, azure, etc), and any provisioning scripts to run (shell , puppet, chef, etc) .

Vagrant starts with a base box which nothing more than the a portable skelton for building virtual machine. There are 2 types of boxes for Vagrant.

Pre-Build: meaning that everything that you need is installed on the box. You just create the vagrant machine and are ready to start developing.
Base OS: just the OS is installed and as part of the creation of the vagrant machine, you install all of the needed software.

For this tutorial, we are going to use the Base OS box and build out the box with all of the software we need.

Creating VagrantFile

The first step is to create a directory to hold the VagrantFile. I use c:\VagrantBoxes to hold all of the my Vagrant machines configurations.

Within c:\VagrantBoxes, create a directory called MyFirstMachine.
Open up a command prompt and navigate to the MyFirstMachine directory that you just created.
To initalize the Vagrant box, you need to run the vagrant init command. This command will initialize the directory to hold Vagrant information and creates the VagrantFile.
For this tutorial, we are going to use the box “opentable/win-8.1-enterprise-amd64-nocm”. The command below will initalize the MyFirstMachine directory.

vagrant init “opentable/win-8.1-enterprise-amd64-nocm”

Additional boxes can be from the cloud at https://atlas.hashicorp.com/boxes/search

Configuring the VagrantFile

In the MyFirstMachine directory there is now a file called VagrantFile. Open this file up in your favorite text editor.

Within the VagrantFile, there is a basic configuration already setup and a lot of very useful comments that explain the different possible configurations.

Vagrant general configurations

config.vm.box is the name of the Vagrant base box to use to start up the machine with. If this base box does not already exist on your machine it will attempt to download it from the Vagrant cloud.
```
 config.vm.box = "opentable/win-8.1-enterprise-amd64-nocm"
```
Configure the actual machine name of the virtual machine
```
 config.vm.hostname = "MyFirstMachine"
```
How long Vagrant will keep trying to connect to the virtual machine before it assume something went wrong and times out.
```
 config.vm.boot_timeout = 600
```
How to commumicate with the machine. The two options are SSH and WinRM. Typically SSH is used for Linux and WinRM for Windows machines.
```
 config.vm.communicator = "winrm"
```

Virtualbox Configurations

In the configuration below, it will configure the virtual machine with:

4 gigs of RAM
Set it to use 2 CPUs
Make the video ram 128 megs
Set the clipboard as bidirectional so you can copy and paste from the host machine to virtual machine as well as from the virtual machine to host machine.

Name the machine in the Virtualbox Manager UI.

 config.vm.provider "virtualbox" do |vb|
vb.memory = "4096"
vb.cpus = 2
vb.customize ["modifyvm", :id, "--vram", "128"]
vb.customize ["modifyvm", :id, "--clipboard", "bidirectional"]
vb.name = "My First Machine"
end

Now we are ready to start up the machine and start using it.

Open a command prompt.
Navigate to the MyFirstMachine folder.
Run vagrant up to start up the machine.
- The first time you run this command using a new base box, it will take a bit as it has to download the box from the cloud.

Now that the machine is started up, there are some additional Vagrant commands that you will need to know to be able to hibernate, reboot, shutdown, and delete the virtual machine

Vagrant Commands

The commands below all need to run from the command line from within the MyFirstMachine folder.

See Status of Machine

vagrant status

Hibernate Machine

vagrant suspend

Reboot Machine

vagrant reload

Shutdown Machine

vagrant shutdown

Remove Virtual Machine

vagrant destroy

Re-Create Machine after Destroying it

vagrant up

Next Steps

You have just create and started up your first Vagrant managed Virtual machine. This is only the beginning of what you can do with Vagrant. In future lessons in this series we will install software and configure the OS as part of the vagrant up command, we will create multiple machine with a single vagrant command, create azure virtual machines, and create own own base boxes.

The next lesson, will cover the start of provisioning. We will install Chocolatey as part of the vagrant up command.

Add Git Branch Name to Bash Prompt

Justin James — Thu, 11 Jun 2015 00:00:00 +0000

When I am working on a git repository and using the git command line, one of the things that I often end up checking it which git branch I am on and if there are any pending changes. How awesome would it be if the bash shell prompt, told you the branch name if the directory is part of a git repository and if there are any changes. Well, thankfully someone has done this work already and with a little bit of configuration on your part, you can implement the changes.

mkdir ~/.bash
cd ~/.bash
git clone git://github.com/jimeh/git-aware-prompt.git
edit your bash profile (~/.bashrc or ~/.bash_profile)

At the top of your bash profile, add the following 2 lines.

 export GITAWAREPROMPT=~/.bash/git-aware-prompt
source $GITAWAREPROMPT/main.sh

At the end of your bash profile, update the prompt with the following line.

 export PS1="\${debian_chroot:+(\$debian_chroot)}\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[00m\] \[$txtcyn\]\$git_branch\[$txtred\]\$git_dirty\[$txtrst\]\$ "

If you are in a git repository directory like I am in the ~blog directory, your prompt will now look like this:
- No Uncommited changes
```
 vagrant@vagrant-ubuntu-trustry-64:~/blog (master) $[]
```
- Changes that have not been committed. Notice the star after the word master
```
 vagrant@vagrant-ubuntu-trustry-64:~/blog (master)* $[]
```
If you are in a non-git repository directory such as the ~/ directory, your prompt will now look like this:
```
 vagrant@vagrant-ubuntu-trustry-64:~/ $
```

Windows 8.1 - Powershell Script to Uninstall Default Programs

Justin James — Wed, 27 May 2015 00:00:00 +0000

When I am provisioning a new development virtual machine with vagrant, I do not need all of the Windows 8 modern applications such as bing maps, finance, skype, etc to be installed onto the virtual machine. These applications are nice on a non-virtualized machine but on a virtual machine it just uses extra resources that aren’t needed.

The base install of Windows has all of these programs installed with live tiles turned on that I don’t need. This is a huge amount of clutter.

Luckily enough Ben Hunter, wrote a powershell script that we will be going through and setting up as part of the vagrant provisioning process. View Original Script.

We will be going through 3 steps:

Figure out which applications that you want to remove.
Update the script with the list of applications to remove.
Add the vagrant provisioning configuration to run the script when you initially run vagrant up

Getting a List of Possible Applications to Remove

The first step is to get the list of possible application to remove. We are going to get this list by running the Get-AppxPackage powershell function, saving output to a file named ModernApps.txt that will be saved to the Windows temp directory and open it in notepad.

Open up a powershell command prompt.
- Use Windows Key + R, type powershell and press enter

Run the following command to get the list of applications, save the output to a file and open it in notepad.

 Get-AppxPackage | Format-Wide -Property Name -Column 1 | Out-File "${env:temp}\ModernApps.txt" | notepad "${env:temp}\ModernApps.txt"

In the script in the next section, modify the $AppsList variable with the programs that you wish to uninstall.

Powershell Script to Remove Specified Applications

The second step is to create the script to remove the specific applications. The script below takes a list of application and calls the Remove-AppxPackage command to uninstall the application. The list of applications to remove is stored in the $AppsList variable within the script.

Some applications such as camera and photos are not programs that you can be uninstall and may still be pinned to your start menu after this script has run. Unfortunately, starting with Windows 8.1 Microsoft removed the ability to programmatically pin and unpin applications from the start menu, so you will have to manually unpin them. Having to manually unpin a couple of application is much better than having to manually uninstall 19 applications.

Note: If you are testing out the script below by running it from the Powershell ISE, you will get a warning that the environment does not support Transcripts. This warning will not happen when run from the powershell command line.

#*********************
# Purpose: Remove built in apps specified in list
# Pre-Reqs: Windows 8.1
#*********************

#------------------------
# Main Routine
#------------------------

# Get log path.
# Will log to Task Sequence log folder if the script is running in a Task Sequence
# Otherwise log to \windows\temp

try
{
 $tsenv = New-Object -COMObject Microsoft.SMS.TSEnvironment
 $logPath = $tsenv.Value("LogPath")
}
catch
{
 Write-Host "This script is not running in a task sequence"
 $logPath = $env:windir + "\temp"
}

$logFile = "$logPath\$($myInvocation.MyCommand).log"

# Start logging
Start-Transcript $logFile
Write-Host "Logging to $logFile"

# *********************
# Update the List of Applications to be removed with your own
#*********************
$AppsList =
 "microsoft.windowscommunicationsapps",
 "Microsoft.BingFinance",
 "Microsoft.BingMaps",`
 "Microsoft.BingWeather",
 "Microsoft.ZuneVideo",
 "Microsoft.ZuneMusic",
 "Microsoft.Media.PlayReadyClient.2",`
 "Microsoft.XboxLIVEGames",
 "Microsoft.HelpAndTips",
 "Microsoft.BingSports",`
 "Microsoft.BingNews",
 "Microsoft.BingFoodAndDrink",
 "Microsoft.BingTravel",
 "Microsoft.WindowsReadingList",`
 "Microsoft.BingHealthAndFitness",
 "Microsoft.WindowsAlarms",
 "Microsoft.WindowsScan",
 "Microsoft.WindowsSoundRecorder",
 "Microsoft.SkypeApp"

ForEach ($App in $AppsList)
{
 $Packages = Get-AppxPackage | Where-Object {$_.Name -eq $App}

 if ($Packages -ne $null)
 {
 Write-Host "Removing Appx Package: $App"

 foreach ($Package in $Packages)
 {
 Remove-AppxPackage -package $Package.PackageFullName
 }
 }
 else
 {
 Write-Host "Unable to find package: $App"
 }

 $ProvisionedPackage = Get-AppxProvisionedPackage -online | Where-Object {$_.displayName -eq $App}

 if ($ProvisionedPackage -ne $null)
 {
 Write-Host "Removing Appx Provisioned Package: $App"
 Remove-AppxProvisionedPackage -online -packagename $ProvisionedPackage.PackageName
 }
 else
 {
 Write-Host "Unable to find provisioned package: $App"
 }
}

# Stop logging
Stop-Transcript

Executing Powershell Script as Part of Vagrant Provisioning

The last step is to add the running of the script to the vagrant provisioning process.

In the directory where you have your VagrantFile, create a directory called shell.
Create a new file called RemoveDefaultPrograms.ps1 int the shell folder.
In the shell directory, create a file called main.cmd.

Add the following contents to the main.cmd file.

echo 'Removing Default Windows Programs'
@powershell -NoProfile -ExecutionPolicy Bypass -File "%systemdrive%\vagrant\shell\RemoveDefaultPrograms.ps1"

Open up your VagrantFile in a text editor of your choice.
Add the following line in the area where you have your provisioning setup.
```
config.vm.provision :shell, path: "shell/main.cmd"
```
When you run vagrant up, the last step it will run is the provisioning scripts.
If you already have a machine controlled by vagrant up and running, you can run vagrant provision to rerun the provisioning scripts.

Sample Output from the vagrant provisioning

 ==> default: C:\Windows\system32>echo 'Removing Default Windows Programs'
 ==> default:
 ==> default: 'Removing Default Windows Programs'
 ==> default: This script is not running in a task sequence
 ==> default: Transcript started, output file is C:\Windows\temp\RemoveDefaultPrograms.ps1.log
 ==> default:
 ==> default: Logging to C:\Windows\temp\RemoveDefaultPrograms.ps1.log
 ==> default: Unable to find package: microsoft.windowscommunicationsapps
 ==> default: Removing Appx Provisioned Package: microsoft.windowscommunicationsapps
 ==> default:
 ==> default: Path :
 ==> default: Online : True
 ==> default: Restart Needed : False
 ==> default:
 ==> default:
 ==> default: Unable to find package: Microsoft.BingFinance
 ==> default: Removing Appx Provisioned Package: Microsoft.BingFinance
 ==> default: Path :
 ......
 ==> default:
 ==> default: Transcript stopped, output file is C:\Windows\temp\RemoveDefaultPrograms.ps1.log

After we have run the script, if you used the application list that I had in the script, the start menu will look like this.

Conclusion

Now the start menu is mine again control again and I can actually make it useful. No longer is the first 30 minutes of creating a new virtual machine nothing more than uninstall the default programs and messing with the start menu.

Javascript Debugging Made Easier with Sourcemaps

Justin James — Sun, 17 May 2015 00:00:00 +0000

Updated: Add clean task that uses rimraf to delete the bundle.min.js file if it already exist. Without this it would just append to the existing bundle.min.js file.

When you release your web site to production, you should minify and concatenate your javascript files. You will have much better performance by doing this but unfortunately debugging becomes difficult with the minified code as it shortens all of the variable and method names. Luckily there is a simple solution to tell the browser developer tools to use the original javascript files when debugging the code, called source maps.

Sourcemaps bacically are a way to map the combined/minified file back to the original file. As part of the minification process you generate a source map which holds the information about your original files. The developer tools will then parse the source map and make it appear as though you’re running unminified and uncombined files.

Creating Sourcemaps

To generate the sourcemaps we are going to gulp with the gulp-concat, gulp-uglify, and gulp-sourcemaps modules. If you are not familiar with gulp, it is basically a javascript build system that allows you to write code to automate tasks.

Install node.js if you don’t have it installed already.

Install Gulp and the Gulp modules that we need.

 npm install --save gulp
npm install --save gulp-concat
npm install --save-dev gulp-uglify
npm install --save-dev gulp-sourcemaps
npm install --save-dev rimraf

Create a file called gulpfile.js if you don’t already have one.

Add the required gulp modules to the gulpfile.js.

 var gulp = require('gulp');
var gutil = require('gulp-util');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var rimraf = require('rimraf');

Create the input paths variable to hold what files we should minify/concatenate. I keep my files in the www folder. The ! in the 2nd input path means to exclude this path. I typically keep my vendor skips like angular, ionic, jquery, etc in the lib folder, so I don’t want to minify those scripts again.
```
 var inputPaths = {
javascript: ['./www/**/*.js', '!./www/lib/**']
};
```
Create the output path variable to tell gulp where to output the minified file.
```
 var outputPaths = {
'javascript': './www/js'
};
```
Now we need to create the actual gulp task that does the minification and source map creation. This tasks takes the inputPaths.javscript files, combines them, minifies them, creates the source maps and save it all as a file called bundle.min.js. By default the gulp.dest call will append the minified text to the bundle.min.js instead of overwriting it. Instead we need to call the clean task task first which will delete the minified file if it already exist.
```
 var minifiedJsFileName = 'bundle.min.js';
gulp.task('build-js', ['clean'], function() {
return gulp.src(inputPaths.javascript)
.pipe(sourcemaps.init())
.pipe(concat(minifiedJsFileName))
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(gulp.dest(outputPaths.javascript));
});
```

Create the clean task

 gulp.task("clean", function (cb) {
rimraf(outputPaths.javascript + '/' + minifiedJsFileName, cb);
});

Once the task is created, we want to setup a gulp watch to regenerate the file when any of the javascript changes.
```
 gulp.task('watch', function() {
gulp.watch(inputPaths.javascript, ['build-js']);
});
```
Finally, we are going to create a default task to run the build-js task we created. The default task will typically what you want to run anytime you start up the web server.
```
 gulp.task('default', ['build-js']);
```

Running Task

Open a command prompt or terminal.
Navigate to the directory that contain the gulpfile.js we created.
Run the following command:
```
 gulp build-js
```
If it worked successfully, you should have a minified file in your www/js folder.
To use the file, open up the index.html file and remove all of your javascript script tags that reference your js files in the www folder and replace it with a single script tag that references the www/js/bundle.min.js file. Make sure to leave any vendor script tags.

Enabling Sourcemaps in Chrome Developer Tools

Now that we have the source maps generated, we have to tell the Chrome Developer Tools to enable the source maps.

Open Google Chrome.
Open the Developer Tools.
Click on the Setting Cog.
Scroll down in the General Settings under you see the Sources section and ensure that the “Enable JavaScript source maps” is checked.
Click on the X in the upper right of the Settings windows to close it.
Now view your web site in the browser to make sure everything is still working.
- Note: If you are using Angular, you have to make sure that you use the minification safe syntax for the dependency injection. See the next section for examples.
- Note 2: If you are using the Ionic Framework, the default templates (blank, tabs, sidemenu) do not use the Angular minification safe syntax. You will need to modify the template after you generate your application.

Angular Minification Safe Syntax

If you are using the AngularJs framework it does a lot of dependency injection. Out of the box, if you just pass in your arguments to the different functions, it is not minification safe. There are a couple of easy ways to make it minification safe with a minimal amount of code changes.

Option 1: $inject method

//Controllers
var myController = function(anyVariableName, $http) {
};

myController.$inject = ['$scope', '$http'];

Option 2: [] syntax. You start the 2nd parameter with a [, put your list of dependencies as string, your function to run and then the closing ].

//Modules
var myApp = angular.module('myApp',
 [ //Dependencies go here.]
);

//Services
myApp.service('serviceName',
 ['$http', '$location',
 function($http, $location) {
 }
 ]
);

//Directives
myApp.directive('directiveName',
 ['$http', '$location',
 function($http, $location)
 {
 }
 ]
);

//Factories
myApp.factory('factoryName',
 ['$http', '$location',
 function($http, $location) {
 }
 ]
);

Chrome DevTools - Hiding Vendor Scripts

Justin James — Fri, 15 May 2015 00:00:00 +0000

The Chrome Developer tools are an amazing set of tools for debugging and trobuleshooting web sites. If you are a web developer and have not tried out these tools, you have been missing out. As amazing as the developer tools are, one of the most annoying features to me was not being able to skip over vendor javascript like jquery or angular. Getting stuck in a minified version of a angular or jquery takes you down a deep rabbit hole that you never wanted to go down and is a annoying to climb out of.

Luckily, there is a super simple solution that I learned from Jared Farris during his Chrome Developer Tools talk at the Codepalousa Conference called Black Boxing. Black boxing allows you to tell the javascript debugger to skip over the file when stepping through the code.

So how do you turn on black boxing for a file?

Open Chrome
Navigate to the web site that you want to troubleshoot
Open the Chrome Developer Tools
Navigate to the Source tab
Right-click on your javascript file you want to black box
Select Blackbox script from the menu

Now you are ready to set a breakpoint in your code, refresh your page and debug your javascript code.

Check out the Javascript Debugging documentation for all of the features of the debugger, https://developer.chrome.com/devtools/docs/javascript-debugging.

Removing the NPM spinner

Justin James — Thu, 07 May 2015 00:00:00 +0000

One of the most annoying features of npm for me is the spinner. Many times it runs long enough that I am wondering if it is still working or hung. Thankfully you can easily change this with the .npmrc file.

On Linux/OSx, create the file ~/.npmrc
On Windows, create the file %USERPROFILE%/.npmrc
Add the 2 lines below to the file
```
 spin=false
loglevel=http
```
Save the file
Close your command prompt/terminal and reopen it.
Run an npm install command and you will see log messages instead of the spinner.

Nuget - Incrementing Version Before Building

Justin James — Mon, 04 May 2015 00:00:00 +0000

When you are building nuget packages that are not directly using the AssemblyInfo.cs for the version number, you need to make sure to increment the nuget version number before building the package. Inevitable though you will forget to increment the version number and have to build the package a 2nd time. Wouldn’t it be great if you could automatically increment the version number before calling nuget pack. Well I have written a powershell script to do just this. Below are the details out the script.

In your project directory, create a file called IncrementNugetVersionNumber.ps1
Add the following parameters to the top of the file to take in the nuget spec file location and any version parameters.

param($NuSpecFile = $(throw "Mandatory parameter -NuSpecFile not supplied"),
 $MajorVersion,
 $MinorVersion,
 $RevisionVersion)

Next we are going to add a bunch of helper functions right under the param code from above. These helper functions will make it easier to deal with the xml queries of the nuget spec document.

function AssignVersionValue(
 [string]$oldValue,
 [string]$newValue)
{
 if ($newValue -eq $null -or $newValue -eq "") {
 $oldValue
 } else {
 $newValue
 }
}

function Get-XmlNamespaceManager(
 [xml]$XmlDocument,
 [string]$NamespaceURI = "")
{
 if ([string]::IsNullOrEmpty($NamespaceURI))
 {
 $NamespaceURI = $XmlDocument.DocumentElement.NamespaceURI
 }

 [System.Xml.XmlNamespaceManager]$xmlNsManager = New-Object System.Xml.XmlNamespaceManager($XmlDocument.NameTable)
 $xmlNsManager.AddNamespace("ns", $NamespaceURI)
 return ,$xmlNsManager
}

function Get-FullyQualifiedXmlNodePath(
 [string]$NodePath,
 [string]$NodeSeparatorCharacter = '.')
{
 return "/ns:$($NodePath.Replace($($NodeSeparatorCharacter), '/ns:'))"
}

function Get-XmlNode(
 [xml]$XmlDocument,
 [string]$NodePath,
 [string]$NamespaceURI = "",
 [string]$NodeSeparatorCharacter = '.')
{
 $xmlNsManager = Get-XmlNamespaceManager -XmlDocument $XmlDocument -NamespaceURI $NamespaceURI
 [string]$fullyQualifiedNodePath = Get-FullyQualifiedXmlNodePath -NodePath $NodePath -NodeSeparatorCharacter $NodeSeparatorCharacter

 $node = $XmlDocument.SelectSingleNode($fullyQualifiedNodePath, $xmlNsManager)
 return $node
}

function Get-XmlNodes(
 [xml]$XmlDocument,
 [string]$NodePath,
 [string]$NamespaceURI = "",
 [string]$NodeSeparatorCharacter = '.')
{
 $xmlNsManager = Get-XmlNamespaceManager -XmlDocument $XmlDocument -NamespaceURI $NamespaceURI
 [string]$fullyQualifiedNodePath = Get-FullyQualifiedXmlNodePath -NodePath $NodePath -NodeSeparatorCharacter $NodeSeparatorCharacter

 $nodes = $XmlDocument.SelectNodes($fullyQualifiedNodePath, $xmlNsManager)
 return $nodes
}

function Get-XmlElementsTextValue(
 [xml]$XmlDocument,
 [string]$ElementPath,
 [string]$NamespaceURI = "",
 [string]$NodeSeparatorCharacter = '.')
{
 $node = Get-XmlNode -XmlDocument $XmlDocument -NodePath $ElementPath -NamespaceURI $NamespaceURI -NodeSeparatorCharacter $NodeSeparatorCharacter

 if ($node) {
 return $node.InnerText
 } else {
 return $null
 }
}

function Set-XmlElementsTextValue(
 [xml]$XmlDocument,
 [string]$ElementPath,
 [string]$TextValue,
 [string]$NamespaceURI = "",
 [string]$NodeSeparatorCharacter = '.')
{
 $node = Get-XmlNode -XmlDocument $XmlDocument -NodePath $ElementPath -NamespaceURI $NamespaceURI -NodeSeparatorCharacter $NodeSeparatorCharacter

 if ($node)
 {
 $node.InnerText = $TextValue
 }
 else
 {
 $elementName = $ElementPath.Substring($ElementPath.LastIndexOf($NodeSeparatorCharacter) + 1)
 $element = $XmlDocument.CreateElement($elementName, $XmlDocument.DocumentElement.NamespaceURI)
 $textNode = $XmlDocument.CreateTextNode($TextValue)
 $element.AppendChild($textNode) > $null

 $parentNodePath = $ElementPath.Substring(0, $ElementPath.LastIndexOf($NodeSeparatorCharacter))
 $parentNode = Get-XmlNode -XmlDocument $XmlDocument -NodePath $parentNodePath -NamespaceURI $NamespaceURI -NodeSeparatorCharacter $NodeSeparatorCharacter

 if ($parentNode)
 {
 $parentNode.AppendChild($element) > $null
 }
 else
 {
 throw "$parentNodePath does not exist in the xml."
 }
 }
}

Now that the helper functions are added, it is time to create the meat of the script where you will update the version number and write it back to the file.

Get the Full Path of the Nuget spec file from parameter $NuSpecFile
```
 $NuSpecFile = Resolve-Path $NuSpecFile
```
Once we have the full path, we need to get the contents of the files as an Xml document so that we can run xpath queries on it.
```
 [ xml ]$fileContents = Get-Content -Path $NuSpecFile
```

Then we need to get the current version number

 $originalVersion = Get-XmlElementsTextValue -XmlDocument $fileContents -ElementPath "package.metadata.version"

Set a default version number
```
 $newVersion = "1.0.0"
```

If there is an existing version number, then we can update it. If not, then use the default version number. This bit of code will break apart the version number into individual segments that we can then update.

 if ($originalVersion -ne $null)
{
$segments=$originalVersion.Split(".")
$v1="1"
$v2="0"
$v3="0"
if ($segments.Length -gt 0) { $v1=$segments[0] }
if ($segments.Length -gt 1) { $v2=$segments[1] }
if ($segments.Length -eq 3) { $v3=$segments[2] }
$v1 = AssignVersionValue $v1 $MajorVersion
$v2 = AssignVersionValue $v2 $MinorVersion
$v3 = AssignVersionValue $v3 $RevisionVersion
if ($v1 -eq $null) { $v1 = 1 }
if ($v2 -eq $null) { $v2 = 0 }
if ($v3 -eq $null) { $v3 = 0 }
$newVersion = "$v1.$v2"
#Write-Host "REV: $RevisionVersion"
if ($v3 -ne $null -and ($RevisionVersion -eq $null -or $RevisionVersion -eq "")) {
$v3 = ($v3 -as [int]) + 1
}
$newVersion = "$newVersion.$v3"
}

Lastly, we need to set the new version number and save the file.

 write-host "Setting Version to $newVersion"
Set-XmlElementsTextValue -XmlDocument $fileContents -ElementPath "package.metadata.version" -TextValue $newVersion
$fileContents.Save($NuSpecFile)

Now that we have the powershell script built to increment the version number, the next piece is to create the batch file that calls the script and nuget pack.

For the batch file you can pass in /major, /minor, /revision, and /outputdir. If any of these are not passed in, it will use the existing values from the nuget spec and output into the current directory.

Create a file called build.cmd

Setup the parameters

 @echo off
SET OUTPUTDIR=""
SET REVISION=""
SET MAJOR=""
SET MINOR=""

Next we need to check the parameters and set each of the individual values.

 :checkparameters
:: REM Grab the first variable supplied as a whole. Ex. /action:start
set SWITCHPARSE=%1
:: REM Check to see if there are no more switches, if so goto end of
:: parsing, prevents endless loop
IF [%SWITCHPARSE%] == [] goto end
:: REM Reset variables as clean up.
set SWITCH=
set VALUE=
:: In the SWITCHPARSE variable, grab the two tokens separated
:: by a : and assign the first to SWITCH and the second to VALUE
for /F "tokens=1,2 delims=:" %%a IN ("%SWITCHPARSE%") DO (
SET SWITCH=%%a
set VALUE=%%b
)
:: Check which action to perform based on the switch
IF [%SWITCH%] == [/revision] goto setrevision
IF [%SWITCH%] == [/major] goto setmajorversion
IF [%SWITCH%] == [/minor] goto setminorversion
IF [%SWITCH%] == [/outputdir] goto setoutputdir
:: Perform the action by setting the variable for later use and
:: shift the command line parameters so the next in line is
:: ready to be processed
goto end
:setrevision
set REVISION=%VALUE%
SHIFT
goto checkparameters
:setmajorversion
set MAJOR=%VALUE%
SHIFT
goto checkparameters
:setminorversion
set MINOR=%VALUE%
SHIFT
goto checkparameters
:setoutputdir
set OUTPUTDIR=%VALUE%
SHIFT
goto checkparameters

Finally we need to call the powershell script we created above and increment the version number in the nuget spec.

 :end
echo.
echo PowerShell -NoProfile -ExecutionPolicy Bypass -File "..\IncrementNugetVersionNumber.ps1" -NuspecFile "log4net.blank.config.nuspec" -RevisionVersion %REVISION% -MajorVersion %MAJOR% -MinorVersion %MINOR%
PowerShell -NoProfile -ExecutionPolicy Bypass -File "..\IncrementNugetVersionNumber.ps1" -NuspecFile "log4net.appender.console.nuspec" -RevisionVersion %REVISION% -MajorVersion %MAJOR% -MinorVersion %MINOR%

Finally, we need to call nuget pack to build the nuget package

 echo.
echo nuget pack -OUTPUTDIR "%OUTPUTDIR%"
nuget pack -OUTPUTDIR %OUTPUTDIR%

Now anytime that you need to build the nuget package, you just have to call build.cmd and it will spit out an new package with an incremented version number.

I know this post was a lot of code. Both of the files that we create can be downloaded at:

IncrementNugetVersionNumber.ps1

build.cmd

Purchasing Business Cards

Justin James — Mon, 04 May 2015 00:00:00 +0000

If you are planning on going to any professional networking events, user groups, or speaking at events, you should have business cards with you. Many times people think, I only need to have business cards if I am looking for a job. This is far from the truth. You should have business cards so that you can connect with the people that you have met. People tend to meet lots of people at events and without a business card, it is difficult for people to remember who you are. It is also a good way for people to be able to follow up with you.

You may be tempted to make your own business cards and print them off on your home printer but please don’t. At first this sounds like a great idea but almost never works out right. If you don’t get the right card stock they will feel cheap. If you don’t get them exactly aligned when printing, they will look unprofessional. When cutting the cards then need to be straight clean cuts which is not easy to do.

Instead you need to purchase professionally printed cards. You might be thinking, having to purchase business cards is going to be expensive but this is no longer the case. You can easily get 100 business cards and a holder for under $30.

I purchased my business cards from http://www.moo.com (affiliate link) and was very happy with their cards and service. It was very simple for me to design my cards. There was lots of different designs to select from and I was able to upload custom images to use. They also offer a pdf export of the cards so that you can send them to other to review them or print off one to see how it would look.

For my cards, I went with the MiniCards. I liked that the cards were unique in size without being too unique. Plus with the MiniCard Holder, I was able to have up to 12 cards on my keychain at any given time. This meant that I never had to remember to bring cards with me and always had them if the need came about.

Automatically Add JS/CSS Files to Your Ionic Projects

Justin James — Thu, 30 Apr 2015 00:00:00 +0000

As you work on an Ionic based project or for that matter any web projects that have javascript or css file, you will at some point forget to add your new javascript or css file to the page and wonder why the page is broken. This is really annoying when it happens as many times you spend quite a bit of time troubleshooting before you realize that you just forgot to add the script or css tag. You can fix this problem using gulp and the gulp inject module to automatically add the script and css tags onto the page.

Installing Gulp

You should already have NodeJS installed. To install Gulp:

Open command prompt
On Windows, run the command:
```
 $ npm install gulp -g
```
On OSx, run the command:
```
 $ sudo npm install gulp -g
```

Installing Gulp-Inject

To add the gulp-inject module to the package.json file as a development dependency you need to install gulp-inject with the –save-dev argument. From your Ionic project directory run the command:
```
 $ npm install gulp-inject --save-dev
```

Adding Inject Task to gulpfile.js

Open the gulpfile.js
Add gulp-inject as a required module. Name the variable used inject.
```
 var inject = require('gulp-inject');
```

Next you need to add to the paths where to look for changes to javascript and css files. Note taht the ! in front of the file/path means to exclude that file/path from being injected.

 var paths = {
sass: ['./scss/**/*.scss'],
javascript: [
'./www/**/*.js',
'!./www/js/app.js',
'!./www/lib/**'
],
css: [
'./www/**/*.css',
'!./www/css/ionic.app*.css',
'!./www/lib/**'
]
};

Next we need to add a new gulp task called index (could be called anything).

 gulp.task('index', function(){
return gulp.src('./www/index.html')
.pipe(inject(
gulp.src(paths.javascript,
{read: false}), {relative: true}))
.pipe(gulp.dest('./www'))
.pipe(inject(
gulp.src(paths.css,
{read: false}), {relative: true}))
.pipe(gulp.dest('./www'));
});

Next add the index task to the gulp default task
```
 gulp.task('default', ['sass', 'index']);
```

Finally, add the javascript and css paths to the gulp watch task and have it call the index task when a change is detected.

 gulp.task('watch', function() {
gulp.watch(paths.sass, ['sass']);
gulp.watch([
paths.javascript,
paths.css
], ['index']);
});

Setting up index.html to Accept Inject

Open up the index.html file
In the head tag, replace all of the script tags for your controllers and services with the inject:js comment below. Make sure to leaveLeave the app.js script tag.
```
 

```
Replace the css tag for the style.css with the inject:css command below
```
 

```

Manually Running It

Run the gulp task index and then look at the index.html page. You should see all of the javascript and css files added back in.
```
 gulp index
```

Running it with Ionic serve

Open the ionic.project file and add the gulp index task to the gulpStartUpTasks. If you don’t have a gulpStartupTasks section, go ahead and add it without the sass task.
```
 "gulpStartupTasks": [
"index",
"watch",
"sass"
],
```
In the index.html page, remove the javascript and css tags again. Then run the ionic serve command. You should that the gulp index task was run and all of the javascript and css files were added back in.

Section 12.5: Further Reading

There is a lot of different options for the gulp-inject package. If you want to read about all of the different options and see examples, the documentation is available at https://www.npmjs.com/package/gulp-inject

Wrap-up

With just a little bit of code, you no longer will you have to wonder why a feature is not working, just to realize that it is because you forgot to include a javascript file. There is all of kinds of additional functionality that you can perform with gulp such as minifying of css and javascript files, running npm/bower commands, or running sass compile commands. The gulp-inject is just one module. I encourage you to add gulp into your normal workflow and automate the mundane tasks.

Jekyll Part 08: Using a Custom Domain

Justin James — Tue, 10 Mar 2015 00:00:00 +0000

Welcome the continuing series on using Jekyll. In this tutorial we are going to setup a custom domain for your blog.

Overview

Part of having a blog is making it your own and giving it personality. One of the easiest ways to do this is to use a custom domain name that fits the blog. So far we have been using http://[username].github.io to get to your blog, but now we will go through the process of setting up a custom domain name like http://digitaldrummerj.me. At first it might seem like this is going to be complicated but it is actually very easy to set this up.

Section 1: Purchasing a Domain Name

Note: If you already have a domain name that you want to use for your Github blog purchased and are using DNSimple for your DNS provider. You can skip this section and move onto Section 2.

The first step in this process is to get a domain name. The easiest way to do this is to purchase the domain name from the dns provider. For this tutorial we are going to use dnsimple. You can use any DNS provider but I am only providing instructions for using dnsimple.

Go to dnsimple
Click the “Get Started with DNSimple Today” button
Click the “Add Domain” button
Fill in the domain name that you want or if you are transferring the domain to DNSimple fill in the domain name that you want to transfer.
Check the “Register or transfer this domain” box
If you want you registration information private, check the “Enable WHOIS Privacy Protection”
If you want the domain to auto renew each year, check the “Enable Auto Renewal”
Click the “Add Domain” button
Fill in your contact information
Click the “Register Domain” button
You now have a domain name registered and are ready to complete the DNS setup in the next section.

Section 2: Setting up DNS

Note 1: If you are transferring a domain to DNSimple that process may take several days to be completed and you may not be able to complete this setup until the transfer process is completed.

Note 2: If you just purchased your domain name from DNSimple, you will be able to complete this section.

Click the “Services” button next to your domain name under the DNSimple domain list for your account.
Scroll down until you see the “Github Pages” service
Click the Add Button
Fill in your Github username
Click the “Complete Github Pages Setup” button
You now have DNSimple configured to point your domain name correctly to your Github blog at http://[username].github.io

Section 3: Configure Blog with Domain Name

Note 1: If you are transferring a domain to DNSimple, that process need to be completed before you can complete this section.

Note 2: If you just purchased your domain name from DNSimple, you will be able to complete this section.

Click on the + button to add a new file
Name the file CNAME with no extension
At the very top of the file add your domain name
Scroll to the “Commit changes” section on the Github Editor, put in your commit comment and click “Commit changes”
It will take a few minutes for Github to update before you will be able to browse to your Github blog with your domain name. Once your domain is working, even the old http://[username].github.io url will redirect to your domain name.

Conclusion

Now users will be able to get to your blog with the domain name that you just configure. Even if the user tries to go to the http://[username].github.io it will redirect them to your domain name.

In our next lesson, I will show you how to install jekyll so that you can edit your blog post and files locally instead of using the Github web site. This will allow you to make changes without having to publish them to the world just to test them.

Jekyll Part 07: Adding a custom Google search

Justin James — Sat, 21 Feb 2015 00:00:00 +0000

Welcome the continuing series on using Jekyll. In this tutorial we are going to add the ability to search your blog using google.

Overview

As your blog grows, you want to make it easy for your readers to find the content that they need on your blog. Out of the box, Jekyll does not have any type of search engine built-in. Thankfully, with Google you can easily tell Google to index your blog and then add a search box on the blog.

Section 1: Adding the Search Page

If you have been following along with the other lessons in the series, this should be familiar to you.

Open a web browser and navigate to your [username].github.io repository.
Click on the + button to add a new file
Name the file search.html

Add the following front matter

 ---
layout: page
title: Search
permalink: /search/
sitemap: false
---

Add the following html to the page

 <div id="home-search" class="home">
<script>
(function() {
var cx = '[Your CSE Search ID]';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search queryParameterName="searchString"></gcse:search>
</div>

We need to get back to the main directory of our repository. To do this click on one of the [yourname].github.io links.
Then click on _layouts directory to go into it.
Click on the default.html file to open it.
Click on the icon to edit the file.

Before the <div id=“archives”> tag that we added previously, add the following html snippet.

 <div id="search">
<form role="search" method="get" action="{{ site.baseurl }}//search/">
<input id="searchString" name="searchString"
placeholder="Be a Better Developer, etc." type="text">
<input id="searchButton" name="googleSearchName" type="submit" value="Search">
</form>
</div>

Replace the <div class=“container”> above the search div with the following
```
 <div class="grid" id="searchBar">
<div>
```
After the <div id=“archives”> section add another </div> tag.

The whole section for the header should look like this

 <div class="grid" id="searchBar">
<div>
<div id="search">
<form role="search" method="get" action="{{ site.baseurl }}//search/">
<input id="searchString" name="searchString"
placeholder="Learn Ionic, Be a Better Developer, etc." type="text">
<input id="searchButton" name="googleSearchName" type="button" value="Search">
</form>
</div>
<div id="archives">
browse by <a title="The complete archive of {{ site.name }}'s Blog by category"
href="{{ site.baseurl }}//categoryview">category</a>
or <a title="The complete archive of {{ site.name }}'s Blog by month"
href="{{ site.baseurl }}//monthview">date</a>
</div>
</div>
</div>

Scroll down to the bottom, add the commit comment, and click on the commit change button.
Next we need to update the theme so that the search box shows up in the correct spot on the page.

Section 3: Updating the Stylesheet

We need to get back to the main directory of our repository. To do this click on one of the [yourname].github.io links.
Click on the style.scss file to open it.
Click on the icon to edit the file.

Add the following to the bottom of the file before the two @import statements.

 #searchBar {
font-size: 80%;
padding: 0.43em 0 0.57em;
#search {
float: right;
#searchString {
width: 283px;
border: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset;
padding: 0.3em 0.6em;
background-color: #f6f5ea;
margin-right: 0;
}
#searchButton {
paddign: 0.3em 0.6em;
background-color: #0B5485;
border: 1px solid #f6f5ea;
margin-left: 0;
color: $white;
-webkit-appearance: none;
border-radius: 0;
}
#archives {
line-height: 2;
float: left;
color: $black;
text-wrap: avoid;
}
}
}

Scroll down to the bottom, add the commit comment, and click on the commit change button.
Now go view your blog’s home page at http://[username].github.io/. You should now see the search box in the header along with the “browse by category or date” links.
Now that the search box and search pages are done, we need to setup Google to actually search our blog.

Section 4: Configuring Google

Navigate to https://www.google.com/cse/
If you do not have a Google account, you will need to create one.
If you already have a Google account, please login to it now.
Once signed in, click the Add button
Fill in your web site url. Should be http://[username].github.io/*
Give the search a name that you will remember.
Click the create button
You search should now be created
Click the Get Code button
Copy the var cx = line
Go back to github and edit the search.html page. Replace the var cx = line with the line that you just copied.
Commit the changes to Github for the search.html page.
Now we are ready to test the search

Section 5: Testing the Search

Open a web browser and navigate to http://[username].github.io
Type some text into the search box and click Search
It should take you to your search page and then do a Google search

Conclusion

You now have the ability for Google to index and search your blog. This will make it much easier for your reader to find older posts that they may be interested in and hopefully keep them on your blog longer.

In our next lesson, I will show you how to host your http://[username].github.io blog with a custom domain name like I am doing with http://digitaldrummerj.me

Jekyll Part 06: Adding Post by Date Page

Justin James — Tue, 17 Feb 2015 00:00:00 +0000

Welcome the continuing series on using Jekyll. In this tutorial we will go through creating a page to show blog post by date.

Overview

A typical blog has a way for your readers to view posts by either category or date, so that they can look at your archives without having to go through the blog post one by one and page by page. In the last lesson, we added the post by category page. In this lesson we will add the post by date page.

Section 1: Creating the Post by Date Page

If you have been following along with the other lessons in the series, this should be familiar to you.

Open a web browser and navigate to your [username].github.io repository.
Click on the + button to add a new file
Name the file archivebydate.md

Section 2: Adding the Metadata

Add the following front matter to the top of the archivebycategory.md file.

---
layout: page
title: Post by Date
permalink: /monthview/
sitemap: false
---

Section 3: Html to Display Post

After the front matter, add the following code to display the post by Year and Month.

<div id="index">
{% for post in site.posts %}
{% unless post.next %}
<h2>{{ post.date | published: '%Y' }}</h2>
{% else %}
{% capture year %}{{ post.date | published: '%Y' }}{% endcapture %}
{% capture nyear %}{{ post.next.date | published: '%Y' }}{% endcapture %}
{% if year != nyear %}
{% if forloop.index != 1 %}</ul>{% enffdif %}
<h2>{{ post.date | published: '%Y' }}</h2>
{% endif %}
{% endunless %}
{% capture month %}{{ post.date | published: '%m%Y' }}{% endcapture %}
{% capture nmonth %}{{ post.next.date | published: '%m%Y' }}{% endcapture %}
{% if month != nmonth %}
{% if forloop.index != 1 %}</ul>{% endif %}
<h2>{{ post.date | published: '%B %Y' }}</h2><ul>
{% endif %}
{% if post.link %}
<h3 class="link-post">
<a href="{{ site.baseurl }}{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a>
<a href="{{ post.link }}" target="_blank" title="{{ post.title }}"><i class="fa fa-link"></i></a></h3>
{% else %}
<h3><a href="{{ site.baseurl }}{{ post.url }}" title="{{ post.title }}">{{ post.title }}<p class="date">{{ post.date | published: "%B %e, %Y" }}</p></a></h3>
<p>{{ post.excerpt | strip_html | truncate: 160 }}</p>
{% endif %}
{% endfor %}
</div>

Section 4: Viewing the Post by Date Page

After you have added the above text, scroll to the bottom of the page, add your commit note, and click the commit button.
To view the category page, navigate to http://[username].github.io/monthview
Your page should look like the following but with your avatar, site name and description in the header of the page.
Right now the page is published but not linked to from anywhere. In the next section we will add it to the header section of the page.

Section 5: Adding browse by date into Header

We are going to add the “show by date” link into the header section next to the link to view by category that we added in the [previous lesson]({{ “blogging-on-github-part-5-adding-a-category-page” | prepend: site.baseurl | prepend: site.url}}).

Go into the _layouts directory by clicking on _layouts
Click on the default.html file to open it.
Click on the icon to edit the file.

In the <div id=“archives”> tag that we added previously, add the following html snippet after the category view link.

 or <a title="The complete archive of
{{ site.name }}'s Blog by month"
href="{{ site.url}}{{ site.baseurl }}//monthview">date</a>

Scroll down to the bottom, add the commit comment, and click on the commit change button.
Now go view your blog’s home page at http://[username].github.io/. You should now see the “browse by category or date” link in the header.

Conclusion

With just a few simple steps, you were able to add the post by month page and put it in the header. In the next lesson we will discuss how the blog theme works and how to modify it.

Jekyll Part 05: Adding Category Page

Justin James — Sun, 15 Feb 2015 00:00:00 +0000

Welcome the continuing series on using Jekyll. In this tutorial we will go through creating a page to show blog post by category.

Overview

A typical blog has a way for your readers to view posts by either category or date, so that they can look at your archives without having to go through the blog post one by one. Unfortunately, the Jekyll-Now repository that we cloned your blog from, does not have these pages. Luckily, these pages are really easy to create.

Section 1: Creating the Category Page

If you have been following along with the other lessons in the series, this should be familiar to you.

Open a web browser and navigate to your [username].github.io repository.
Click on the + button to add a new file
Name the file archivebycategory.md

Section 2: Adding the Metadata

Add the following front matter to the top of the archivebycategory.md file.

 ---
layout: page
title: Post by Category
permalink: /categoryview/
sitemap: false
---

After the front matter, add the following code to display the categories and the number of post per category. Each category will link to further down in the page where is will show the post for that category.

<div>
{% assign categories = site.categories | sort %}
{% for category in categories %}
<span class="site-tag">
<a href="#{{ category | first | slugify }}">
{{ category[0] | replace:'-', ' ' }} ({{ category | last | size }})
</a>
</span>
{% endfor %}
</div>

Section 4: Blog Post by Category

Next you need to add the code to display the list of blog post by category and sorted by title

<div id="index">
{% for category in categories %}
<a name="{{ category[0] }}"></a>
<h2>{{ category[0] | replace:'-', ' ' }} ({{ category | last | size }})</h2>
{% assign sorted_posts = site.posts | sort: 'title' %}
{% for post in sorted_posts %}
{%if post.categories contains category[0]%}
<h3><a href="{{ site.url }}{{ site.baseurl }}{{ post.url }}" title="{{ post.title }}">{{ post.title }} <p class="date">{{ post.date | published: "%B %e, %Y" }}</p></a></h3>
<p>{{ post.excerpt | strip_html | truncate: 160 }}</p>
{%endif%}
{% endfor %}
{% endfor %}
</div>

Section 5: Viewing the Category Page

After you have added the above text, scroll to the bottom of the page, add your commit note, and click the commit button.
To view the category page, navigate to http://[username].github.io/categoryview
Your page should look like the following but with your avatar, site name and description in the header of the page.
You will notice that the “You’re up and running” post does not show up on the categories page. This is because there is no categories front matter tag for that blog post. Go ahead and open 2014-3-3-Hello-World.md and add the categories front matter tag.
```
 categories: ['welcome']
```
Right now the page is published but not linked to from anywhere. In the next section we will add it to the header section of the page.

Section 6: Adding Category View into Header

Unlike the portfolio page that we created in the last lesson, this time we are not going to add the category page into the menu. Instead we are going to create a row below the header with a link to the page.

Go into the _layouts directory by clicking on _layouts
Click on the default.html file to open it.
Click on the icon to edit the file.

Right after the </header> tag, add the following html snippet

 <div class="container" >
<div id="archives">
browse by <a title="The complete archive of {{ site.name }}'s Blog by category"
href="{{ site.url}}{{ site.baseurl }}/categoryview">category</a>
</div>
</div>

Scroll down to the bottom, add the commit comment, and click on the commit change button.
Now go view your blog’s home page at http://[username].github.io/. You should now see the “browse by category” link in the header.

Conclusion

With just a few simple steps, you were added the post by category page and put it in the header. In the next lesson we will add in a new page for browsing blog post by year and month.

Jekyll Part 04: Adding Additional Pages

Justin James — Wed, 11 Feb 2015 00:00:00 +0000

Welcome the continuing series on using Jekyll. In this tutorial we will go through how to add an additional page such as the speaking page on this blog.

Overview

As your blog grows you are going to want to add additional information besides just blog post. If you start speaking at events or want to show off your portfolio or blog post by category/date, you are going to want these as separate pages. These pages most likely will have there own look and feel as well.

Section 1: Creating the file for the page

If you have been following along with the other part in this series, the step should be familiar to you.

Open a web browser and navigate to your [username].github.io reporepository.
Click on the + button to add a new file
Name the file portfolio.md
Go to the next section to decide on the layout for the page

Section 2: Choosing a layout

To tell the jekyll engine what the layout of the page should be, you need to add the front matter layout tag.

From Part 2 Creating your first blog post, you will remember that the front matter is the metadata about blog post but it is used in jekyll for any page as well. All of the front matter tags are the same as a blog post.

To change the layout from being a blog post to a page, you will change the layout front matter tag to page instead of post.

By default jekyll adds files to the sitemap that search engines use to find pages on your site. Setting it to false will stop this page from being added. We will remove the sitemap tag once we are ready to share the page.

In order for the page to available at [username].github.io/portfolio, you need to set the front matter permalink to /portfolio/ .

front matter tags

---
title: My Portfolio
permalink: /portfolio/
layout: page
sitemap: false
---

Section 3: Adding content

The content is written in markdown just like blog post are. In Part 2 Creating your first blog post, we covered the common markdown tags.

For now just add some simple markdown like below:

This is a placeholder page for my portfolio.

Your page should now look like this in the editor

After you have added the above text, scroll to the bottom of the page, add your commit note, and click the commit button.

Section4: Previewing page

To view the page navigate to http://[username].github.io/portfolio

Your page should look like the following but with your avatar, site name and description in the header of the page.

Right now the page is published but not linked to from anywhere.

Once you are ready to share the page with your readers, you will want to add it to your main menu and have it indexed by search engines.

To tell search engines to index the page, we need to remove the front matter tag, sitemap:false.

To add it to the menu:

Navigate to the _layout directory in the repository by clicking on the repository title to get back to the main directory of the repository
Click on _layouts directory
Click on the default.html page.
Click on the icon to edit the file.
Find the main menu. You can search for home or about to find the section
Add the following line in the menu at the position you want the portfolio page link to be displayed.
```
 <a href="/portfolio">Portfolio</a>
```
We need to commit the file to the repository by scrolling to the bottom of the page, adding the commit comment, and clicking on the commit button.
Now navigate to your blog and the page link should show in the main menu. Click on the portfolio menu item and make sure it takes you to the portfolio page.

Conclusion

With just a few steps, you were able to add a new page into your blog’s web site. You can either continue to build out the portfolio page with the markdown needed to show off your portfolio or you can remove it from the menu until you are ready to do build it out.

In the next lesson we will build on this lesson by adding in a page to show the blog post by category.

Jekyll Part 03: Adding Commenting to Post

Justin James — Sat, 07 Feb 2015 00:00:00 +0000

Welcome the continuing series on using Jekyll. In this tutorial you will learn how to add the ability for users to comment on your blog post.

Overview

You may be thinking that commenting isn’t really that important but it is a key feature for you to be able to interact with your readers. Users want to have conversations about your blog post with you and to feel connected to you. It is also a good way for you to learn from them as well.

Unfortunately, out of the box Jekyll does not have this ability. Luckily, it is really easy to add this ability, thanks to a wonderful tool called Disqus. Disqus is free but still full featured.

We will go through the process of getting a Disqus account, configuring the account, configuring your blog and testing it all out.

Section 1: Configuring Disqus

Open another browser window and navigate to https://disqus.com/admin/signup/?utm_source=New-Site
Fill out the information request and click the Finish button. Note: That you can not change the short name value once it is created. You can have multiple sites under the same account though with different short name values.
You will be greeted with a “Choose Your Platform” screen like the follow. Don’t worry about any of these options as we are not going to use them.
Click on the General link on the left side of the links above the “Choose Your Platform” title.

)
Scroll down to the Site Identity and make sure that the values are correct. The WebSite Name will appear on your blog when the comments show, so make sure it is what you want it to say. Take note of your shortname as you will need it in the next section when we config your blog to show Disqus.
Scroll down to the next section which should be Community Rules and match the settings to the image below. To prevent comment spam I always set comments to have to be approved before showing on the site. The volume on the site will be low enough for now that you will be able to easily manage approving the comments.
Scroll down to the next section which should be Social Platform Intergration and add your twitter account if you have one. This will ensure that when people share comments on your blog that it includes you in the post.
Click the Save Button

Section 2: Configuring Your Blog

Open a web browser and navigate to your [username].github.io repository.
Click on the _config.yml file to navigate to it
Click on the icon to edit the file
Look for the text disqus: and put in your disqus shortname name like below.

disqus: digitaldrummerj
Scroll to the bottom of the screen and click on the commit button. You should put in a comment as well so that you know what changed with the file.

Section 3: Testing it out

Open up a web browser and navigate to your blog and click on the title for the blog post that we published in our last lesson.

Scroll to the bottom of the post and you should see a section to add a comment like this:

Conclusion

Having comments is an essential part of any blog to open up the communication with your readers. As you can see Disqus is very easy to add to your blog.

In the next lesson, where you will learn how to create additional pages that are not blog post such as portfolio or about pages.

Jekyll Part 02: Your First Post

Justin James — Thu, 05 Feb 2015 00:00:00 +0000

Welcome the continuing series on using Jekyll. In this tutorial we will go through making your first blog post.

Overview

We will go through all of the steps to create a new post, add metadata such as title/categories/tags/date, and then make it live on the site.

Section 1: Creating the file

Thr first step is to create a new file to hold the content of the blog post. In Jekyll all of the blog post are markdown files and are stored in the _post directory. When you commit this file to Github, it will be compiled into a static html page.

The filename is in the format of year-month-day-title-separated-by-dashes.md.

2015-02-17-my-first-post.md

Go ahead and create your file now.

To create a file open a web browser and navigate to your [username.github.io repository.
Go into the _post directory and click the + icon to add a new file.
Name the file yyyy-mm-dd-my-first-post.md where yyyy = 4digit year, mm = 2 digit month, and dd = 2 digit day of montmonth.
Head to the next section and fill out the metadata about the post (ie: title, date, is published, categories, etc)

Section 2: Creating metadata

Now we need to define some information about our blog post. All of the information such as title, is published, categories, publish date, etc are stored at the top of the file in what is called Front Matter.

To define the front matter section you have a line with 3 dashes in it and then repeat this same line to signal the end of the front matter section.

Below are common metadata you will want to fill out.

layout: is the name of the layout from the _layouts directory. If followed part 1 and cloned the jekyll-now repository, then the name is post.
title: the title of the blog post that will showbon the site. Should be in quotes to avoid conflict with front matter parameter.
or false. Determines if the post shows on the website or not.
published: date of the post. this is optional and if not defined will use date in filename.
categories: list of categories. comma delimited. put in quotes for multi word categories. optional but recommended.
tags: list of tags that would be used to build a tag cloud. optional but recommended.

Sample Front Matter

---
layout: post
title: Your First Post
draft: true
published: 2015-02-01
categories: [blogging]
tags: [blogging]
---

Now on to creating actual content in your post.

Section 3: Creating content

The content of the post will be written in markdown and will be directly below the front matter section .

Below are common markdown tags that you will want to use. headers, lists, bold, bullets, links and code highlighting.

Common Markdown Tags

Headers

A ‘#’ starting a line indicates to makebitba header and the number ‘#’ indicates the size of the header tag.

# = h1
## = h2
and so on up the an h6

Examples:

h1

h2

h3

h4

h5

h6

Numbered list or Bullets

For bullets: start a line with a * or -.

* sample list
* next bullet

sample list
next bullet

For numbered list start with a 1 or the number you want to start with.

1. sample ordered list
2. number 2

sample ordered list
number 2

Bold

surround the text you to build with 2 ** and then put 2 more after the text to end the bold.

**sample bold**

sample bold

Links

link to other pages:

[link name display](http://myurl.com)

link name display

Code Highlighting

There are 2 ways: tab the line in and it will group the text like the examples above. or use the highlighter markup

{% highlight csharp %}
// some c# code
var a = "bad variable name"
{% endhighlight %}

Highlighting text without the code highlighting

Start the line with a tab and it will automatically do it for you.

you will get text like this if you start the line with a tab.

Section 4: Saving as draft

Most of the time you are not going to write and publish the blog post in one sitting but you need to save your work without it showing up in the website. This is called saving a draft and it is super simple to do. By setting the front matter published tag to false it will tell jekyll to not publish it.

---
other front matter tags
draft: true
---

You can also create a drafts folder and save the file in the but if you do that then you will need to move the file to the _post folder when you are ready to publish.

Section 5: Publishing post

Publishing a post is as simple as changing the front matter published to true and committing the change to the github repository.

---
other front matter tags
---

Github will take care of the conversion from markdown to an html page. This should happen automatically within a minute and show up on the blog home page at the top.

If it doesn’t show up then check your email that you registered on github with to see if there was a jekyll compile error email.

Conclusion

This lesson is one of the key lessons as you need to kow how to create new blog post. Creating new blog post is really easy with Jekyll and a little bit of markdown. Once you learn the different markdown tags, you will be writing blog post in no time at all.

See you in the next lesson, where we will discuss how to add the ability to comment on blog post.

IIS Express - Turning on Windows Authentication

Justin James — Wed, 04 Feb 2015 20:45:35 +0000

So I brought up a new machine and tried to run my ASP.NET web site in IIS Express that uses Windows Authentication and was greeted with the following error:

Error

The requested page cannot be accessed because the related configuration data for the page is invalid.

Details:

This configuration section cannot be used at this path. This happens when the section is locked at a parent level. Locking is either by default (overrideModeDefault=“Deny”), or set explicitly by a location tag with overrideMode=“Deny” or the legacy allowOverride=“false”.

Solution

Every time I bring up a new machine I always forget to update the IIS Express setting to fix this error and have to do a google search to figure out where the IIS Express configuration is stored. So I figured I should finally document the fix for it.

The error is caused by this section in the web.config

<system.webServer>
<security>
<authentication>
<windowsAuthentication enabled="true" />
<anonymousAuthentication enabled="false" />
</authentication>
</security>
</system.webServer>

To fix this open up the IIS Express applicationhost.config. This file is stored at C:\Users[your user name]\Documents\IISExpress\config\applicationhost.config

Update for VS2015+: config file location is $(solutionDir).vs\config\applicationhost.config

Look for the following lines

<section name="windowsAuthentication" overrideModeDefault="Deny" />
<section name="anonymousAuthentication" overrideModeDefault="Deny" />
<add name="WindowsAuthenticationModule" lockItem="true" />
<add name="AnonymousAuthenticationModule" lockItem="true" />

Change those lines to

<section name="windowsAuthentication" overrideModeDefault="Allow" />
<section name="anonymousAuthentication" overrideModeDefault="Allow" />
<add name="WindowsAuthenticationModule" lockItem="false" />
<add name="AnonymousAuthenticationModule" lockItem="false" />

Save the file and refresh your asp.net web page. It may take a moment to load as it load the new configurations into IIS Express.

Jekyll Part 01: Getting Started

Justin James — Fri, 30 Jan 2015 00:00:00 +0000

Welcome to the first tutorial of a multi part series on blogging using Jekyll on Github. Github has an awesome free option for hosting a blog for you and you can get a blog up and running in 10 minutes or less. This series will cover everything that you to know to host, manage and customized a Jekyll blog that is hosted on Github.

Section 1: Overview

Github uses the Jekyll engine which turns markdown into static Html pages. The advantage of this is that performance is better since you are just serving up html and you don’t have to worry about hosting a database somewhere .

The quickest and easiest way to get started with Jekyll is fork an existing Jekyll repository. Forking in Git means creating a copy of the repository into your account.

The repository that I used and recommend to fork is the “Jekyll Now” repository at https://github.com/barryclark/jekyll-now. The Jekyll based repository includes a lot of very useful features for a blog out of the box for you such as: a nice looking theme, code syntax highlighter, social buttons (twitter, Facebook, Github, etc), Disqus blog commenting api, and Google analytics.

Section 2: Forking the Repository

Forking a repository in Github is extremely simple. Go to https://github.com/barryclark/jekyll-now and click the button. Github will now create a fork of the repository for you into your account.

Section 3: Renaming the Repository

Once you fork the repository, you will need to go into the settings for your new repository and rename it to [username].github.io. Your blog will now be live within a few minutes at http://[username].github.io. However, before you go look at the blog, you need to take a minute to configure a few items in the configuration file _config.yml.

Getting to settings

Renaming

Finding the settings:

Update the name and click the Rename button

Section 4: Configuring the Repository

There is only 3 values that you are going to want to change:

name - this is the blog title
description - this is the tag line
url - this is the url of the blog, will be [username].github.io.

Optionally, you can also configure your social networks that show up in the footer of the site by filling in the various account names in the “footer-links” section of the _config.yml file.

You can edit the _config.yml directly in Github. Click on the file and then click the icon. Once you have completed your edits, click the green commit button at the bottom of the screen.

Section 5: Viewing the Blog

Now you are ready to view your new blog. Open a browser and navigate to http://[username].github.io, replacing [username] with your actual username.

Conclusion

In just a few simple steps, you were able to get your blog up and running. Through out the series of lessons, you will learn how to manage your blog, create new pages, customize the theme, and host it with a custom domain name.

In the next lesson, where we create your first blog post.

Ionic - Using behind a proxy server

Justin James — Tue, 20 Jan 2015 20:45:35 +0000

I ran into an issue today on the vagrant IonicBox when I tried to create a new Ionic project at work behind the firewall/proxy even with all of the configurations for npm, git, bower, and bash setup for the proxy as detailed at proxy-configurations.

Luckily, Ionic had a fix for this already.

Linux

All I had to do was put PROXY=http://myserver:myport in front of the ionic start command.

 PROXY=http://myserver:myport ionic start todo blank

Windows

All I had to do was set the http_proxy environment variable and then run the ionic start command as I normally would.

ionic start todo blank

Ionic - The Ionicbox and How To Use It

Justin James — Sat, 17 Jan 2015 20:45:35 +0000

If you have looked at setting up the Ionic Framework or have it done it before, you know on much of a pain it can be, especially when something doesn’t work. Luckily, Ionic offers a free virtual machine called Ionicbox that is already configured with all of the software that you need.

Prerequisites:

Before you can use Ionicbox you need to install VirtualBox and Vagrant. If you are on Windows and using Chocolatey, you can install both using cinst virtualbox and cinst vagrant.

VirtalBox is a free virtual machine program. A virtual machine is a complete computer and operating system run from within your current operating system. It makes it possible to run Linux on a Windows Machine, Windows on a Mac, etc.

Vagrant is an easy way to manage virtual machines. A full explaination is out of scope for this article.

Ionic Box

Make sure that you installed VirtualBox and Vagrant before proceeding.

Installing

Open Windows Explorer and create a directory where you want to hold all of your Vagrant configuration files
Instead the directory created in step 1, create a directory called IonicBox
In Windows Explorer, create the directory under the c drive called projects (i.e. c:\projects)
In Windows Explorer, do a shift+right click on the IonicBox directory and select Open Command Prompt
Run: vagrant init drifty/ionic-android
Open notepad
In notepad, open the VagrantFile created in the IonicBox directory.
select all of the text in the VagrantFile and remove it
Copy the following text into the VagrantFile

# -*- mode: ruby -*-
# vi: set ft=ruby :
Vagrant.configure(2) do |config|
 config.vm.box = "drifty/ionic-android"
 config.vm.hostname = "[Replace with what you want your Host Name to be]" # No Spaced Allowed
 config.vm.boot_timeout = 600
 config.vm.network :forwarded_port, host: 8100, guest: 8100
 config.vm.network :forwarded_port, host: 35729, guest: 35729
 config.vm.synced_folder "c:\\projects", "/home/vagrant/vagrant_projects"
 config.vm.provider "virtualbox" do |vb|
 vb.gui = true
 vb.customize ["modifyvm", :id, "--vram", "128"]
 vb.customize ["modifyvm", :id, "--usb", "on"]
 vb.customize ["usbfilter", "add", "0", "--target", :id, "--name", "android", "--vendorid", "0x18d1"]
 vb.memory = 2048
 vb.cpus = 2
 vb.name = "IonicBox"

 # Need This If On Windows
 vb.customize ["setextradata", :id, "VBoxInternal2/SharedFoldersEnableSymlinksCreate/v-root", "1"]
 end
end

So what do all of those options in the VagrantFile mean?

In the configuration we configure the video and physical memory of the virtual machine. Since IonicBox is just a shell without a GUI, it doesn’t need a lot of resources, so we only give it 2 gigs of memory. Now if your host system doesn’t have a lot of memory, you will need to dial this down.

Ionic uses port 8100 for the web site and the live reload function use port 35729. We forwarded these ports from IonicBox to the host machine so we can access the web server. The following two lines do the port forwarding

config.vm.network :forwarded_port, host: 8100, guest: 8100
config.vm.network :forwarded_port, host: 35729, guest: 35729

The IonicBox is just a Linux shell with no GUI so you will want to use a feature in VirtualBox called Shared Folders to be able to edit the files from your host machine. In our case we are using c:\projects on the host machine which is linked to ~/vagrant_projects on the IonicBox

config.vm.synced_folder "c:\\projects", "/home/vagrant/projects"

Next we set up the VirtualBox options

We don’t need the VirtualBox GUI since we are going to SSH into the machine so we can turn it off with. Set this to true the first time, just so you can see it

vb.gui = false

We set the Video Ram to 128 megs

vb.customize ["modifyvm", :id, "--vram", "128"]

Turn on the USB drivers so that we can connect an Android device

vb.customize ["modifyvm", :id, "--usb", "on"]

Add a usb device filter for a Android Device

vb.customize ["usbfilter", "add", "0", "--target", :id, "--name", "android", "--vendorid", "0x18d1"]

On Windows, You need to turn on Symlinks to the synced_folders. This is needed if your Host Operating System is Windows in order node/npm to work correctly. Remember you have to run your command prompt as an administrator for this command to work.

vb.customize ["setextradata", :id, "VBoxInternal2/SharedFoldersEnableSymlinksCreate/v-root", "1"]

Set the system memory for the virtual machine. If you host machine is low on memory you can reduce this down. You must have this much memory free when the virtual machine starts up

vb.memory = 2048

Number of Physical CPUs to allocate. My machine only has 2 physical CPUs. You can allocate more or take it down to 1

vb.cpus = 2

The name to use for the virtual machine in the VirtualBox Manager UI

vb.name = "IonicBox"

Starting up the IonicBox and Getting logged in

Open a command prompt and navigate to the IonicBox folder that contains the VagrantFile.
- If on Windows, open the command prompt as an Administrator.
- To open the command prompt as an administrator in Windows 8 go to the Start Menu Screen, type cmd, then ctrl+shift+click or ctrl+shift+enter
Run command below. This command will take a while the first time you run it since it has to download the vagrant box container which is about 1 gig in size.

vagrant up

If you have the vb.gui = true in your VagrantFile, the first thing you will notice when you boot up the IonicBox is that it just comes to a command prompt and it leaves you wondering now what. Luckily, this is exactly what we want and it is very easy to manage it. The IonicBox basically just replaces the command prompt that we would normally use for all of the Ionic commands with a linux machine.

To login to the machine, use the same command prompt as previous step and run

vagrant ssh

if everything went successful you should be logged in

Testing the IonicBox

Now lets create our first Ionic project.

On the IonicBox ssh connection:

cd projects
ionic start firstApp tabs && cd firstApp
ionic serve

You now have a Ionic project in a directory called firstApp and the web server is running.

Open up your web browser and navigate to http://localhost:8100

You can view all of the files that make up this project on your host machine under c:\projects\firstApp

If you are NOT using Windows as your host operating system that we are done with configurations. Unfortunately, if you are using Windows as your host operating system, we have one more step to get npm working correctly, so that you can download all of the dependencies for Ionic.

WARNING: Unless you have npm 3.0+. This may not fix the issue with node and long file names on Windows with npm.

We need to setup a symbolic link for the node modules folder since windows has a length limitation when using shared folders. A symbolic link is basically a point from one directory to another. Windows has a directory name length limitation that we encounter when host our files through a shared folder. Since our npm dependencies (node modules) folder doesn’t need to be checked into source control, we can move it to a directory on the IonicBox and just point to that from within our Ionic projects.

On the IonicBox from the firstApp folder run the following commands:

mkdir ~/node_modules_[Your Project]
ln -s ~/node_modules_[Your Project] node_modules
npm install

Remember: If on Windows, you need to run the vagrant up command from an administrative command prompt.

You may also need to manually install bower

sudo npm install bower -g

I am done with IonicBox, now what?

To exit vagrant ssh session, just type exit from the command prompt that is logged into the IonicBox. This will put you back into the original command prompt.
Hibernate: from the IonicBox directory with the VagrantFile run

vagrant suspend

Shutdown and Turn Off: from the IonicBox directory with the VagrantFile run

vagrant halt

Delete the whole IonicBox Virtual Machine: from the IonicBox directory with the VagrantFile run


vagrant destroy

Note that sometimes this leaves behind the directory that contained the Virtual Machine. Before you can run vagrant up again, you will need to manually delete this directory.

Conclusion

This is a nice easy way to get started with ionic without having to install much onto your current machine.

However, if you are going to spend a lot of time developing ionic applications, it won’t be long before you go down the route of installing everything onto your machine to do the development work.

Check out my installation guides to help you out:

[Mac Installation]({{ “ionic-setup-osx” | prepend: site.baseurl | prepend: site.url }})

[Windows Installation]({{ “Ionic-Setup-Windows” | prepend: site.baseurl | prepend: site.url }})

Npm, Bower, Git, and Bash Proxy Configurations

Justin James — Fri, 16 Jan 2015 20:00:00 +0000

When you are using npm, bower, and git behind a proxy server you have to do a little bit of configuration. Luckily it is super easy to do these configurations. Almost all of the programs have command line commands to set and unset the proxy server.

Updates:

Updated 2015-Feb-01: Added running source command for Bash and Ruby Gems section
Updated 2015-May-07: Added the Ionic Start command
Updated 2015-May-08: Added the Android SDK
Updated 2015-Aug-03: Added command lines to set proxy
Updated 2015-Oct-20: Added Gradle

Windows Command Prompt

Current Command Prompt Only

set http_proxy=[Your Proxy]:[Proxy Port]
set https_proxy=[Your Proxy]:[Proxy Port]

Unset Current Session

set http_proxy=
set https_proxy=

Globally as a System Environment Variable

Run from an administrative command prompt

setx http_proxy=[Your Proxy]:[Proxy Port] /M
setx https_proxy=[Your Proxy]:[Proxy Port] /M

You will need to close and re-open command prompt for settings to take effect

Globally as a User Environment Variable

Run from a non-administrative command prompt

setx http_proxy=[Your Proxy]:[Proxy Port]
setx https_proxy=[Your Proxy]:[Proxy Port]

You will need to close and re-open command prompt for settings to take effect

Unset Globally System Environment Variable

Run from an administrative command prompt

setx http_proxy="" /M
setx https_proxy="" /M

Need to close and re-open command prompt for settings to take effect

Unset Globally User Environment Variable

Run from a non-administrative command prompt

setx http_proxy=""
setx https_proxy=""

Need to close and re-open command prompt for settings to take effect

View Proxy Settings

If the commands below just echo out the text instead of the actual proxy server, it means that the proxy server is not set.

echo %http_proxy%
echo %https_proxy%

Bash Shell

File Name: .bash_profile or .bashrc

export http_proxy=[Your Proxy]:[Proxy Port]
export https_proxy=[Your Proxy]:[Proxy Port]
export npm_config_proxy=[Your Proxy]:[Proxy Port]
export npm_config_https_proxy=[Your Proxy]:[Proxy Port]

Note: After updated the .bash_profile or .bashrc, you should run one of the following commands to make the configuration active for the current session.

source ~/.bashrc
or
source ~/.bash_profile

Bower

There is no command line that I found for configuring bower. Instead you need to create a .bowerrc file in the users home directory.

On Windows: %userprofile% directory.

On Linux: ~/

Creating .bowerrc file on Windows

Windows Explorer unfortunately does not allow you to create files without extensions but using notepad you can create a file without an extension.

Open Notepad
Ctrl + S to save the file
Navigate to the %UserProfile% directory
Change the “Save as Type” to “All Files (.)
Name the file .bowerrc
Click the Save button
Now you can edit the file in your text editor of choice

Proxy Setting in .bowerrc.

{
"proxy":"http://[Your Proxy]:[Proxy Port]",
"https-proxy":"http://[Your Proxy]:[Proxy Port]"
}

Git

You can also set the proxy settings below to be system wide with the –system switch.

Set Proxy:

git config --add http.proxy http://[Your Proxy]:[Proxy Port]
git config --add https.proxy http://[Your Proxy]:[Proxy Port]

Unset Proxy:

git config --unset http.proxy
git config --unset https.proxy

View Configuration

Just Proxy Configs

git config --get http.proxy
git config --get https.proxy

All Configs

git config --list

Manually Update .gitconfig (not recommended)

[http]
proxy = http://[Your Proxy]:[Proxy Port]
[https]
proxy = http://[Your Proxy]:[Proxy Port]

NPM

Set Proxy:

npm config set https-proxy http://[Your Proxy]:[Proxy Port]
npm config set proxy http://[Your Proxy]:[Proxy Port]

Unset Proxy:

npm config delete https-proxy
npm config delete proxy

View Proxy Configurations:

npm config get https-proxy
npm config get proxy

Manually Update .npmrc (not recommended)

proxy=http://[Your Proxy]:[Proxy Port]
https-proxy=http://[Your Proxy]:[Proxy Port]

Ruby Gem Install

If you have set the proxy in the .bash_profile or .bashrc, then Ruby should pick it up.

If you need to manually set it

Linux

export http_proxy=[Your Proxy]:[Proxy Port] sudo gem install [your gem name]

Windows

setx http_proxy "[Your Proxy Server]:[Proxy Port]" /M
gem install [your gem name]

Ionic Start Command

In order to run the ionic start command behind a proxy, you need start the command out with the Proxy information.

Linux

PROXY=http://[Your Proxy]:[Proxy Port] ionic start [App Name] [Template Name]

Windows

setx http_proxy "[Your Proxy Server]:[Proxy Port]" /M
ionic start [App Name] [Template Name]

Android SDK

The android SDK uses ~/.android/androidtool.cfg file to define the proxy information. If the file does not exist, go ahead and create it.

http.proxyHost=[Your Proxy]
http.proxyPort=[Proxy Port]

Gradle

When trying to build an Android project that uses Gradle, you may need to configure the proxy for it.

On Windows: %userprofile%/.gradle.properties

systemProp.http.proxyHost=[Your Proxy]
systemProp.http.proxyPort=[Proxy Port]
systemProp.http.nonProxyHosts=*.nonproxyrepos.com|localhost
systemProp.https.proxyHost=[Your Https Proxy]
systemProp.https.proxyPort=[Https Proxy Port]
systemProp.https.nonProxyHosts=*.nonproxyrepos.com|localhost

Git Command Notes

Justin James — Wed, 14 Jan 2015 20:45:35 +0000

I am finally making myself learn the git command line instead of just using a UI so that I can actually understand what git is really doing. Plus I have started playing a lot with the IonicBox and running a Ubuntu vagrant controlled VM for this blog and both of those are just linux shell command prompt only machines.

Below are my notes on various commands so that I can stop having to Google each time I forgot one of them.

Caching Credentials

To cache credentials for 1 hour. The timeout is in seconds.

git config --global credential.helper 'cache --timeout 3600'

Basic Commands

Getting code to local machine

In Git terms, this is called cloning a repository and the command to use is git clone.

Directory name will match repository name

git clone [Remote Repository Url]

Use this command if you want to name the directory different than the repository name

git clone [Remote Repository Url] [Directory to Clone into]

Where did the local repository come from?

git remote -v

Change the Remote Origin Url

git remote set-url origin [https or ssh url]

Get Latest Changes but don’t merge

git fetch

Get Latest Changes and Merge

git pull

Generate SSH Keys

Adding Key

ls -al ~/.ssh
ssh-keygen -t rsa -C "your_email@example.com"
ssh-agent -s or eval(ssh-agent) or eval $(ssh-agent)
ssh-add ~/.ssh/id_rsa
clip < ~/.ssh/id_rsa.pub
Go to github settings for your account
Click on SSH Keys
Click Add Key
Give it a name and paste in the key
Put in your github password
Click confirm

To test

ssh -T git@github.com

Should get a response like: Hi username! You’ve successfully authenticated, but GitHub does not provide shell access.

Full details at https://help.github.com/articles/generating-ssh-keys/

See what files have changed

Long Form: git status

Short Form: git status -s

Show Files: git status -u or to always show git config status.showuntrackedfile=yes

Turning a directory into a repository on the local machine

git init

Adding files to the repository

git add [file name]

Adding all files in a directory except the ones in the .gitignore file

git add .

Reverting a file that has changes not been added or staged

git checkout [file name]

Unadding a file that has been added and not committed but leave file

git reset

Unadding a file that has been added and not committed but delete file

git reset --hard

Ignoring files

create .gitignore file
starter files available at https://github.com/github/gitignore
Create a .gitignore file for any number of languages at https://www.toptal.com/developers/gitignore/

Committing files to the local repository

git commit -m "Your Message"

Removing Files

git rm [File Name]

Moving Files

git mv [Old File Name] [New File Name]

Publishing files to the remote repository

git push

Merge

Storing work that you want to keep but not commit

Storing the work

git stash

Seeing what work is stored

git stash list

Applying the last stash to the current code

git stash apply

Applying a different stash then the last one to the current code

git stash apply stash@{[Number for stash from git stash list command]}

Branching

See Available Branch Including Remote Branches

git branch -v

Creating a Branch

git branch [Branch Name]

Switch to a branch

git checkout [Branch Name]

Switch to last branch you were on

git checkout -

Merging a branch into the master (HEAD)

First make sure you are on the master branch: git checkout master
Then issue the merge command: git merge [branch name]

List the branches for the repository

git branch

Note: the * in the results indicates the branch currently checked out.

See last commit of each branch

git branch -v

See branches already merged

git branch --merged

See branches NOT already merged

git branch --no-merged

Push branch to remote repository

git push origin [branch name]

Delete a Local branch

git branch -d [branch name]

Deleting Remote Branch

git push origin --delete [branch name]

Proxy Settings

See Post on Proxy Configurations for configuring your proxy settings with Git

Configurations

Listing of Configurations:

git config -l
git config -l --global
git config -l --system
git config -l --local

Set Configuration

git config --add [variable name] [value]

Unset Configuration

git config --unset [variable name]

Ionic - How to setup on Windows

Justin James — Sun, 11 Jan 2015 20:45:35 +0000

Updates:

2016-08-13: Added Gradle and VS Code to software installed. Changed from JDK7 to JDK8. Removed Ant. Added Android SDK Apis install to Chocolatey script. Switched suggested emulator to Visual Studio Emulator for Android.

If you are like me and just starting to work with the Ionic Framework and don’t already have a machine setup to do Android, iOS, Node, etc development then many of the guides out there leave out a number of steps that you need to do in order to get everything working.

It is really easy to get everything working though once you know the steps. Since I am a Windows user and love to automate work that is easily repeatable, I used Chocolatey and Boxstarter to automate the setup for the Ionic Framework.

On Windows, you will only be able to setup Android development. Apple requires a Mac in order to do iOS development.

Software to be installed

NodeJS
Git
Gradle
JDK8
Android SDK
Android Studio
Google Chrome
Npm Modules:
- cordova
- gulp cli
- bower
- ionic
Visual Studio Emulator for Android (Hyper-V Based)
VS Code

How to install software

Install Chocolatey from http://www.chocolatey.org. Command is on the front-page of the site or below. Open an administrative command prompt to run the command. To open an administrative command prompt on Windows 8, go to the start menu, type cmd and then ctrl+shift+click on the cmd search result.
```
 Command Prompt: @powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
```
Install the BoxStarter Chocolatey package
```
 choco install -y BoxStarter
```
Close the command prompt that you opened to install Chocolatey and BoxStarter
On the desktop there should be a BoxStarter Shell icon, double-click on that to run it. If the icon is not on the desktop, then open up a command prompt and type BoxStarterShell.

I have setup a gist file that has all of the Chocolatey commands to run to install the rest of the software and configure it. Run the gist file from the Boxstarter Shell:

 Install-BoxStarterPackage -PackageName https://gist.githubusercontent.com/digitaldrummerj/3fe2eb057004b6742b89/raw/3da48d349c313684077d7103547dfe79f7052617/IonicSetup -DisableReboots

NOTE: If you want to install any of the optional software you will need to fork the gist file and remove the # in front of the line for the package you want to install.

Post Install Steps

Configure Visual Studio Emulator for Android

Open up the Visual Studio Emulator for Android application
Find the devices that you want to download. Any device will do. I normally pick one of the latest ones as a starting point (Marshmellow 6.0 at the time of this writing)

Verify that everything works

Open a command prompt
Navigate the directory where you store you development projects (I use c:\projects)
From c:\projects type: ionic start todo tabs
cd into c:\projects\todo (directory was created by the ionic start command)

The first test that we are going to run is to make sure that we can test the todo app that we generated in the web browser by running:

 ionic serve --lab

This will start up a node based web server and the –lab will tell it to launch a page that shows what the app would look like on an iOS and Android phone. Granted the node based serve is about 80% accurate but good enough to do a majority of our testing. Ultimately you should test on a device before releasing into the app stores.

Next we are going to test our Android device setup. The first thing we need to do is tell ionic that we want to add the Android platform to our todo app by running:

ionic platform add android

This sets up the todo app to be able to be build and deployed to an Android device. To validate that we can build for Android, run the following:

ionic build android

The last thing we need to verify is that we can deploy the todo app to the Visual Studio Emulator for Android. Before we can deploy the application, we need to start up the emulator.

Open up the Visual Studio Emulator for Android
Find the device that we downloaded
Click the green arrow to start it up
Once the emulator is started, you can deploy to it by running:
```
 ionic run android
```

You are now ready to go create your ionic applications.

Ionic - Setup on OSx

Justin James — Sun, 11 Jan 2015 20:45:35 +0000

Updates:

2016-08-13: Added Gradle and VS Code. Changed from JDK7 to JDK8. Removed Ant.

Even being a Windows user I was able to pretty easily get Ionic working on a Mac. The only difference between the Windows setup and the OSx setup is that you can build for an iOS device on a Mac.

Software to be installed

NodeJS
Gradle
JDK8
Android SDK
Android Studio
Google Chrome
Global Npm Modules:
- cordova
- gulp cli
- bower
- ionic
- ios-sim
Genymotion (Android emulator replacement) `- XCode
XCode Command Line Tools

General Install Steps

Google Chrome

We need Google Chrome in order to debug our application when it is running on a device. The device emulation and developer tools are also extremely useful to have.

Download from https://www.google.com/chrome/browser/desktop/

Node

Install the LTS version of node from https://www.nodejs.org

Npm Packages

Open a terminal and run the following commands to install the Global NPM packages that we need:

 sudo npm install -g cordova
sudo npm install -g ionic
sudo npm install -g gulp
sudo npm install -g Bower

At this point, we can create ionic projects and test them in a web browser. To make sure that functionality is working:

Verifying General Install

In your open terminal, navigate to the directory where you store your development projects (I use ~/projects)
From ~/projects run:

ionic start todo blank
cd into todo (directory was created by the ionic start command)
Run the following command to run the todo app we generated in a web browser

ionic serve –lab

In the next section, we will install everything needed to deploy to an Android device.

Android Setup Steps

In order to deploy to an Android device you need to install the Java JDK, Android Studio, and Android SDK. We will walk through installing all of the required software setup.

JDK 8

Download from http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

After the install, launch a terminal and create a ~/.bash_profile if it doesn’t already exist. You can use touch ~/.bash_profile to create the file.

Open up either vi or nano and add the following line:

export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.7.0_72.jdk/Contents/Home

Android Studio

Download from http://developer.android.com/sdk/index.html#Other

Android SDK

Download the Android SDK from [http://developer.android.com/sdk/index.html#Other](http://developer.android.com/sdk/index.html#Other_

Unzip the downloaded SDK to to ~/Development

Open ~/.bash_profile and add the following line:

export PATH=${PATH}:/users/[Your UserName]/Development/android-sdk-macosx/tools:/users/[Your Username]/Development/android-sdk-macosx/platform-tools

In the terminal type source ~/.bash_profile to load the ~/.bash_profile changes.

Now we need to download the Android APIs versions that we care about. In this case, we are only going to install the API 23 Android SDK Tools and Android SDK Build-Tools

In the terminal window, type android to launch the Android SDK Manager.

Install the the following

Tools -> Android SDK Tools
Tools -> Android SDK Build-Tools
Tools -> Android Platform-Tools
API 23 -> SDK Platform

Genymotion Setup

Download Genymotion from https://www.genymotion.com/.

The Genymotion installer will also install VirtualBox if it is not already installed.

Once Genymotion is installed, we need to download a device.

Open up the Genymotion UI and click on the Add Button.
Then click the Sign in button and follow the login instructions to login with the account that you create as part of the Genymotion download.
After you are logged in, select from the Android Version drop down 4.4.4
From the Device model drop down select a device type
Then select a device from the available list
Click the Next button.
Click the Next button and wait for the device to download
Click the Finish button.

Verify the Android Setup

Open terminal
Navigate to the todo app that we create as part of the general install verification. (I used ~/projects/todo)
If you need to ceate the todo app run the following from ~/projects:

ionic start todo blank
cd into todo (directory was created by the ionic start command)
The todo app is now setup to be able to deploy to an Android device. To validate that we can build for Android, run the following:
```
 ionic platform add android
```
The todo app is now setup to be able to deploy to an Android device. To validate that we can build for Android, run the following:
```
 ionic build android
```
The last thing we need to verify is that we can deploy the todo app to the Genymotion Emulator. Before we can deploy the application, we need to start up the emulator.
Start the Genymotion device you downloaded and run:

ionic run android

You are now ready to go create ionic applications that you deploy to an Android device.

iOS Setup Steps

XCode Setup

Install Xcode from app store. This will take awhile since it is ~2 gigs in size.
- Once install is completed, open xcode and accept the license
Install the iOS Simulator that Ionic will use.

npm install -g iOS-sim

Note that if you just install NodeJs without using HomeBrew, you may have to add sudo in front of the npm install commands.

Verify the iOS Setup

Open terminal
Navigate the directory where you store you development projects (I use ~/projects)
If you need to generate the todo app, run the following command from the ~/projects directory

ionic start todo tabs
cd into todo (directory was created by the ionic start command)
We need to do is tell ionic that we want to add the iOS platform to our todo app by running:
```
 ionic platform add iOS
```
The todo app is now setup to be able to deploy to an iOS device. To validate that we can build for iOS, run the following:
```
 ionic build iOS
```
The last thing we need to verify is that we can deploy the todo app to the iOS Simulator by running:

ionic run iOS

You are now ready to go create your ionic applications.

Ionic - Using Android x86 Virtual Machine Instead of Emulator

Justin James — Sun, 11 Jan 2015 20:45:35 +0000

The Android emulator is super super slow and I could never get it working on my development virtual machine. I thought no problem I will just use Genymotion but due to a video card driver issue on my laptop (not Genymotion’s fault), I couldn’t use it either. I was thinking ok I will just have to use a real device and always have it on me when I do Android development work. This wouldn’t have been ideal though since Android development work is just a side project and who wants to carry an extra device just in case you get a few minutes to work on the project.

Well then I ran across someone that mentioned that Android x86 project. This project allows you to run Android on a pc and virtualbox machine. So I follow the guide at Android x86 virtualbox install and was up and running in no time.

Once I was up and running, the next step was to figure out how to deploy my applications to the machine just like I would with the emulator or a real device. Turns out this is pretty easy to do with the Android Debugging Bridge (adb)

Following the [Debug How To] (http://www.android-x86.org/documents/debug-howto) guide I was able to get it working pretty quickly.

As the article says, it was easiest to get it working with a bridged adapter. Because I was using a virtualbox machine for both development and android x86, this made using NAT way more complicated then if just the Android x86 was the virtual machine.

Bridged Adapter Setup:

Get Android Virtual Machine IP
- Open Terminal (alt + F1)
- type netcfg
On the host machine (development machine)
- Open command prompt
- type adb kill-server
- type adb tcpip 5555
  - type adb connect [Android Virtual Machine IP]:5555