I will be presenting at the 2015 NEWDUG CodeCamp this year. Pretty excited! The CodeCamp is for developers in NorthEast Wisconsin (or those looking for a roadtrip) and features speakers from all over the Midwest. The CodeCamp is March 28th and will be at the Fox Valley Technical College. You can find more information, as well as register at http://newcodecamp.com/.

My presentation is entitled, Getting Ready for VS 2015 By Loving the Command Prompt. We are going to look at some of the Open Source tools that will be a big part of Visual Studio 2015. These include things platforms such as Bower, Yeoman, NPM, etc. We may even do some kind of dark magic where we run a Microsoft .NET MVC app natively on a OS X, because that is now a thing.

If you are in the area, come check out the talk and say hi!

On March 14th, geeks across North America celebrate Pi Day. That is when the US version of the date (3/14) is the same as the world’s most famous number π (pi), 3.14. This year is a very significant Pi Day, since the day of March 14, 2015 gets us to 4 significant digits of Pi 3.1415!

The last several years we celebrated by calculating π , once with a Monte Carlo Simulator and AngularJS and another time comparing C# and C++ performance. We aren not going to break with tradition this year, so onward to more about π!

Instead of calculating π again, which is fun because math (yeah, MATH!), we thought we would take a different spin and look at a valuable tool that a lot of people know use without even knowing it, and that is Wolfram Alpha. The Bing and DuckDuckGo search engines utilize Alpha for some searches as well as Apple’s Siri.

Wolfram Alpha has its genesis in a symbolic math program called Mathematica. A symbolic math program can be thought of as a math calculator, but calling it a calculator is like calling that $500 supercomputer in your pocket a phone. Mathematica enables mathematicians, scientists, financial folks and all kinds of people to solve math problems, from the easy to the difficult. So instead of getting a numerical value for the integral of Sin from 0 to π, it solves the solutions in closed form and gives you the indefinite integral. A less fancy way of saying this, it does your calculus homework for you. So

becomes

This computation engine, became the basis for Wolfram Alpha, so Wolfram Alpha can do great things with math, for example, here is the integral of Sin.

So Alpha is great at math, but what differentiates it from its Mathematica toots is the incorporation of curated knowledge base and the alpha parsing engine. What does this mean? Alpha takes historical data, like stock price information, Gross Domestic product, historical weather data and many other data sets. It then creates knowledge sets which are made queryable via human type questions.

You can then do natural language queries across a wide set of data. For example, you can find that Albert Einstein was 65 in the beginning of 1945 by typing “how old was albert Einstein in 1945”. You can find the US GDP was 8.788 trillion in 1997 or that the Chicago White Sox won the 2005 World Series.

At this point, most of you realize you can get this by a well type Google query. Two things to realize, first the Wolfram Alpha application shows lots of data about your query, not just the result. It exposes data from its data set. For example, the World Series query shows the dates the World Series occurred, locations (Houston and Chicago), participants (Astros and White Sox), etc. Point 2 though, and this is the most valuable one, these queries can be aggregated. The US GDP data can be take and plotted by asking Alpha to “plot the US GDP”.

It will show folks the median home value in Madison Wi or F4 tornadoes in Indiana or compare Microsoft, Apple and Google stocks or even tell you a joke (FYI, I didn't say a FUNNY joke).

Wolfram Alpha is a powerful tool for organizations. It can find historical data and make the data available to teams doing research. It can help make sense of that data too. If you haven’t looked at it, I can encourage people to take some times at the Alpha examples, they are a great demonstration of what can be done.

We started out today talking about Pi Day, so let us close the loop. Of course Alpha has a lot to say about Pi! You can find out more here. I was able to calculate Pi to 2000 significant digits by typing N[Pi,2000] and get an answer faster than ANY program I could write.

This blog post originally appeared at Skyline Technologies

AngularJS is a Javascript MVC framework from the fine folks over at Google. The focus of Angular is building complex HTML based client applications. Its design philosophy is data first, where your data will be updating the DOM. Contrast this to a framework like JQuery where the DOM will update your data.

This is the twelfth in a series of posts on AngularJS where we are using Chemistry data from the periodic table to help us understand the framework. The others posts are

1. AngularJS - Introduction
2. AngularJS - Introducing AngularJS Controllers
3. AngularJS - Introducing NG-Repeat
4. AngularJS - More with NG-Repeat
5. AngularJS - Image Binding
6. AngularJS - Introducing Templates
7. AngularJS - Introducing Routing
8. AngularJS - Introduction to Services
9. AngularJS - Introduction to Directives
10. AngularJS - Further with Directives
11. AngularJS - Best Practices
12. AngularJS - CSS Animations

Note: AngularJS does not allow for more than one ng-app directive. When I have multiple angular posts on the home page of my blog, only one application will work. I need to refactor the entire site to account for this. All of that to say this, you are best clicking on a single article so you can see the pages in action.

AngularJS enables animations via the NgAnimate directive. This is an external JavaScript file that you will need for your application, so you will need to obtain the JavaScript. This can be done via the usual suspects, CDN, download or Bower. The Bower install command is bower install angular-animate

There are three ways to do animations in AngularJS:

• CSS Animations
• CSS Transitions (or Keyframe Animations)
• Javascript

We will look at each of these in separate posts, but will get started with CSS Animations.

It is important to realize that the animations we are talking about in AngularJS here are not going to allow you to create a Pixar movie. The animations can be thought of as a bit of visual flair to your application to let users know their input has been recognized.

In this post, we are going to focus on three AngularJS events that we can use with CSS animations. It is important to realize that Angular does not do any of the animations, but provides hooks for us to use our own animations, be they via CSS or JavaScript.

There are five AngularJS events

• enter - DOM element is add to the DOM tree
• leave - DOM element is removed from the DOM tree
• move - DOM element is moved within the DOM tree
• addClass - A class is added to an element
• removeClass - A class is removed from an element

So we have events get fired, the next thing that happens is the the animate library will add and remove CSS classes based on the fired events. This is based on conventions for the naming of our CSS classes, which are [class]-[event]-[state]. So, for the enter event, we have a .ng-enter class and a .ng-enter-active class.

The above is a little confusing, so let's try to state it another way. The AngularJS animate library supports animations for enter, leave and move. If we create a list in Angular and then have a filter applied, ngAnimate then toggles the CSS classes for us based on the state. Within these classes we then define our CSS for animation. In this scenario, ngAnimate works on ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView, and ngClass.

What does this look like? Well first, we need to inject the animation framework into our application. After installation and including the js library in your application (<script type="text/javascript" src="angular-animate.min.js"></script>) you need to inject into your app module.

(function() {
    'use strict';

    angular
        .module('chemistryApp', [
            'ngAnimate'
        ]);
})();

What we will do for our example is apply some animations to a periodic element when the user clicks on it. We will do this by applying a transition between the two states by changing the opacity.

Here is a quick look at the CSS.

.periodicCell-animation.ng-enter, .periodicCell-animation.ng-leave {
    -webkit-transition: 0.5s linear all;
    -moz-transition: 0.5s linear all;
    -o-transition: 0.5s linear all;
    transition: 0.5s linear all;
}

.periodicCell-animation.ng-enter {
    opacity: 0;
}


.periodicCell-animation.ng-enter-active {
    opacity: 0;
}


.periodicCell-animation.ng-leave {
    opacity: 1;
}


.periodicCell-animation.ng-leave.ng-leave-active {
    opacity: 0;
}

Next, we update our HTML template to include a new angular keyword, ng-if, which, based on an expression will add or remove a DOM element. This then will trigger a ngAnimate events for enter and leave which will apply our CSS items we created earlier.

<div class='periodicCell {{element.cssForDisplay}} periodicCell-animation' data-ng-if="!fullElement">
    <div class="atomicNumber">{{element.atomicNumber}}</div><div class="atomicWeight">{{element.atomicWeight}}</div>
    <div class="atomicSymbol">{{element.symbol}}</div>
    <div class="centerElementDisplay">{{element.name }}</div>
</div>

Let's see it in action now.

As you can see, the ngAnimate library can quickly be incorporated in your existing Angular application. It enables CSS items to be applied to changes in the DOM and apply CSS based on naming rules. In our next Angular blog post, we will look at CSS transitions.

I have created an Azure Website to host all of this code at http://angularperiodic.azurewebsites.net/

The code is also available on GitHub