Loading, please wait.
It had been a couple of month since I embark in the journey of mixing AngularJS with MVC. Before then, I have utilized AngularJS to render certain view containers here and there. However, for the first time I was after a fully functional AngularJS app, yet with MVC server side. I wanted to use the fully functional Form Authentication MVC template, and make an AngularJS application ready to go with form authentication in no time.
This task introduced two main challenges. First, we have to make the client side fully aware of the authentication and have Angular preserve state – so even as the page refreshes Angular shall response as authenticated. This is inherit function in a MVC Razor app but not necessarily in an Angular application. Secondly, client side authentication – No-Oauth - is not the most secure, we could end up with a cross site request forgery attack. So what I needed was an Anti-Forgery Token, MVC Form Authentication AngularJS app.
Imputing credit card information has always been plain and one of the less engaging transactions. Thankfully it is nice to see the craft of CSS magic applied in order to beget a more engaging way of doing this.
Jesse Pollak introduces this very nice plugin. Among its functionality it display card type based on the card number pattern, and introduces an animation that indicates the CVC location, rather than the most common “what Is this explanation” display on most common processing forms.
Even third party payment processing services at times fully lack a clean and engaging way to either store card payment information or receive them. A few services are out there though those are the exception to the rule. One worth mentioning is Stripe which has a payment form that could be easily customized and yet is responsive fitting real well on web application and mobile applications.
One more time I see the magic of CSS and JavaScript getting united to show us one more thing perceived to be possible only through the api of native code. Even though there may be many ways to accomplish this with list elements. I believe @Kornel way is pretty straight forward.
The approach in this post mixes Kronel library slip.js with a HTML5 UI library named Lungo. In future posts I will discuss Lungo a little more, for now all I will like to convey is that it is a pretty cool, very easy to prototype Mobile library. Lungo, by the way, is built on top of QUO.JS which is a pretty complete touch event library.
The example that I am about to provide could have been built with QUO, however the one provided by Kornel seem more specific to list elements
By the lack of proper words, let us just say that the tilt effect of the Facebook Paper app is pretty cool. I really hope more gestures come to fruition in order to reach the full potential of capturing user engagement, and just about my imagination.
Not less cool is the fact that Thanks to John Tregoning HTML5 Developers could know implement this experience in just about any mobile browser.
The how of the plugin is pretty straight forward just include the photoTilt.js located in this repository
Change the speed of the tilt by updating the maxTilt Parameter