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
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
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.
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”.
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.
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
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.
download or Bower. The Bower install command is bower install angular-animate
There are three ways to do animations in AngularJS:
CSS Transitions (or Keyframe Animations)
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
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
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.
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
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.
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,
look at CSS transitions.