Google+

National Pi Day 2015

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.

Alpha Home Screen

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

Integral Input

becomes

Integral Output

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. Integral Answer

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”.

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.

3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679821480865132823066470938446095505822317253594081284811174502841027019385211055596446229489549303819644288109756659334461284756482337867831652712019091456485669234603486104543266482133936072602491412737245870066063155881748815209209628292540917153643678925903600113305305488204665213841469519415116094330572703657595919530921861173819326117931051185480744623799627495673518857527248912279381830119491298336733624406566430860213949463952247371907021798609437027705392171762931767523846748184676694051320005681271452635608277857713427577896091736371787214684409012249534301465495853710507922796892589235420199561121290219608640344181598136297747713099605187072113499999983729780499510597317328160963185950244594553469083026425223082533446850352619311881710100031378387528865875332083814206171776691473035982534904287554687311595628638823537875937519577818577805321712268066130019278766111959092164201989380952572010654858632788659361533818279682303019520353018529689957736225994138912497217752834791315155748572424541506959508295331168617278558890750983817546374649393192550604009277016711390098488240128583616035637076601047101819429555961989467678374494482553797747268471040475346462080466842590694912933136770289891521047521620569660240580381501935112533824300355876402474964732639141992726042699227967823547816360093417216412199245863150302861829745557067498385054945885869269956909272107975093029553211653449872027559602364806654991198818347977535663698074265425278625518184175746728909777727938000816470600161452491921732172147723501414419735685481613611573525521334757418494684385233239073941433345477624168625189835694855620992192221842725502542568876717904946016534668049886272327917860857843838279679766814541009538837863609506800642251252051173929848960841284886269456042419652850222106611863067442786220391949450471237137869609563643719172874677646575739624138908658326459958133904780275901

This blog post originally appeared at Skyline Technologies


 

AngularJS - CSS Animations

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.

AngularJS Logo

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


 

Introduction to Windows 10

Microsoft is currently working on the next major release of Windows, called Windows 10. Currently, Windows 10 is in technical preview mode, with millions of people testing it across the world via their Windows Insider Program. I have been part of the Insider Program for a while now and have been through several releases and thought I would share some initial impressions of Windows 10.

Start Menu

For most users, one of the biggest changes is the Start Menu is back. In Windows 8, the Start Menu was replaced by the Start Screen. Many users found this disconcerting as you moved back and forth between full screen “Windows Modern” and the traditional desktop mode. Microsoft is addressing this heads on by bringing back the start menu. It is also making the start menu more “modern”, by including Microsoft’s innovative Live Tiles in the start menu.

Windows 10 Start Screen

Cortana

Microsoft’s Cortana has been a big hit on Windows Phone. It is a voice driven assistant, similar to Google Now or Apple’s Siri. You can click the search icon and “talk” to Cortana and have it perform searches for you. You can even change some settings and say “Hey Cortana” and have it do searches for you.

Cortana also bills itself as a personal digital assistant. It is able to parse through emails and documents and “learn” about you. So if you have a flight on Delta and you say Hey Cortana, Delta, it will show information about you flight.

It also knows I like the Chicago Bulls, so it keeps information front and center. It is also nice enough not to mention that Derick Rose is out for the rest of the season, again.

Cortana

Again, all of this code is pre-release and may change, but so far Cortana looks like a great feature for Windows 10.

Continuum

One of the biggest issues many people had with Windows 8 was how the tablet/modern mode was so prevalent and jarring in desktop mode. Microsoft is again addressing, heads on, one of the major Win 8 complaints, by including a new feature called Continuum. Continuum is there to make dual use machines like a Microsoft Surface function even better.

Users can decide to go to Tablet Mode, either via the Notification Bar and selecting Tablet Mode or by disconnecting/connecting a keyboard and responding to the prompt. This will then put have your apps run full screen making them more touch friendly and applicable to running on a tablet.

Continuum

Continuum

When you are running in desktop mode, applications are then windowed, including “Modern” apps. Previously, “Modern” apps would run in full screen mode for all users. This is a pretty significant change from Microsoft and highlights how they are enabling users to be productive if they are in tablet mode or desktop mode. Continuum

Universal Apps

One of the biggest changes under the hood of Windows promises to be Universal Apps. This is a single platform that enables to developers to develop an application for Windows, Windows Phone and the Xbox One. Microsoft is hoping this will reignite developer interest as the multi platform development opens up many new opportunities.

All Roads Lead to Build

Microsoft’s Build Conference at the end of April 2015 promises to have A LOT more information on the new version of Windows, especially for developers. We will all know more soon after that. Windows 10 is supposed to be available in the second half of 2015.

This blog post originally appeared at Skyline Technologies,


 

John Ptacek I'm John Ptacek, a software developer for Skyline Technologies. This blog is my contains my content and opinionss, which are not those of my employer.

Currently, I am reading Norse Mythology by Neil Gaiman

@jptacekGitHubLinkedInStack OverflowGoogle+