Today I presented at MinneWebCon on the University of Minnesota campus. I gave an introduction to AngularJS called “Getting Super with Angular JS”.
To run the application files, you will need Node and Grunt installed on your system.
I’ve been trying to devise a solution to working with mock data in the AngularJS. I’m not a huge fan of the solutions out there because too much debugging logic to determine mock or real data gets put into the code that may end up in production unless stripped out. Many of them are also limited to either having all services mocked, or none. This is difficult to manage when services are being developed by the back end team at the same time as the UI. We needed a quick way to turn specific services on and off on the fly. I think I’ve come up with a pretty nice solution.
The code below was picked apart from the application we’re building, modified with new variable names and had some business logic stripped out, so forgive me if there are some syntax or coding errors – it should be clean enough to get the idea though. I’ve left it in Coffeescript to save space.
To start with, I build a value for service configurations that sets up our end point URLs for both real services, and mock. It also directs the logic to the specific JSON files to return when a mock services is requested.
"use strict" angular.module("Bakery.config").value "$serviceConfig", url: "http://localhost:9000/mock_data/" mockUrl: "http://localhost:9000/mock_data/" useMock: false donuts: call: "donuts" mock: "/food/donuts.json" useMock: false cakes: call: "cakes" mock: "/food/cakes.json" useMock: true
Next we setup the actual services:
"use strict" angular.module("Bakery.services", ["ngResource"]).factory "$bakeryService", ($http, $serviceConfig) -> doCall : (serviceCall, call, args ) -> if $serviceConfig.useMock or call.useMock return $http.get $serviceConfig.mockUrl + call.mock else return serviceCall.apply this, args donuts : -> return @doCall( @_donuts, $serviceConfig.donuts, Array.prototype.slice.call(arguments) ) cakes : -> return @doCall( @_cakes, $serviceConfig.cakes, Array.prototype.slice.call(arguments) ) _donuts : (isFrosted, isFilled) -> console.log start call = $serviceConfig.containers url = $serviceConfig.url + call config = params: frosted: isFrosted isFilled: isFilled $http.get url, config _cakes : () -> call = $serviceConfig.configurations url = $serviceConfig.url + call $http.get url
Now we have a $bakeryService that will look at our configuration to determine if we want to use mock data or pull from the actual service. We can inject this to other areas of the application and make calls easily without having to think about whether or not we want to use mock or service data – it should just work.
"use strict" angular.module("GenesisApp.registeredViews").directive "query", ($bakeryService) -> restrict: "EAC" controller: ($scope) -> $bakeryService.donuts(true, false).then ((response) -> # success $scope.donuts = response.data ), (response) -> # failure console.log "Error getting donuts" $bakeryService.cake().then ((response) -> # success $scope.cakes = response.data ), (response) -> # failure console.log "Error getting cakes"
I like this approach because it limits the amount of extra code for mock services to just a few lines. The doCall method handles the decisions as to whether or not mock data should be used, and passes on the arguments to the real call when needed. The mock data information can be completely removed from the $serviceConfig object when its sent to production, limiting exposure to your mock services setup.
Another benefit is one can set the services to use mock data for all services or individually. This is helpful when services and UI logic are being built at the same time and some services aren’t completely functional or break. Just switch that particular’s service config to useMock: true and you can keep on programming.
Previous to my Volt I was driving a 2009 BMW 335XI Twin Turbo coupe. I loved the car. It was sleek, sporty and a blast to drive, but I’ve never really been the sort of driver to appreciate all that speed and handling. My favorite thing about the BMW was the torque and the feeling of *oomf* I got one when I hit the gas from a standstill. After that, I’m not one to speed or drive very aggressively. To be fair, the BMW really was wasted on me.
While some people may laugh when I talk about “flipping the Volt into sport mode”, it really can make the car zip off the line! The Chevy sales rep says the 0-30 (for what thats worth) is the same as the Camaro – I believe it! With 236 lb-ft of torque, it can certainly push you into the seats, which was my favorite part of the BMW.
My BMW was loud, and was manufactured right at the edge of when cars were starting to get interesting electronics, like navigation, bluetooth and cameras. The used 2012 Volt I found is fully loaded with XM Radio, rear view camera, dimming mirrors, bluetooth and navigation. On top of that, the Volt is super quiet, feels solid on the road and is all-around a pleasure to drive. The brakes can feel a little ‘spongie’ at times, but I’ve come to expect that from regenerative braking systems. Its really my only complaint about the actual driving experiencing.
I’ve driven nearly 4,000 miles in my Chevy Volt since purchasing it in mid June. At one point I saw my lifetime MPG reach 190. Right now, I’m hovering around 140 mark. Doing the math, thats 4,000 miles on only about 28 gallons of gas! I traded in my BMW for $21k, bought the gently used 2012 Volt (the owner upgraded to a Tesla) for $26k. According to my calculations, the Volt will have paid for itself in gas savings alone in about 2.5 years. When I factor in estimated maintenance costs for my out-of-warranty 2009 BMW and compare it with those of the Volts as well, it pays for itself in about 1.5 years. I’m not making an assumption that electricity is free either; my calculations take into account the estimated costs of those 45 electric miles as well.
Its worth pointing out that my lifetime MPG is lower than they could be because of how efficient the vehicle is. Even when drained of battery and running on gasoline, I often time get 40 MPG. For this reason, when Amy and I need to take longer drives well over 45 miles, we take the Volt.
There is speculation about whether plugins and hybrid vehicles are truly environmental due to their increased carbon output from production. According to studies however, the lifetime carbon footprint of the Volt – that is from manufacturing and lifetime driving of the car – is 19 tons. Compared to 24 tons of a standard vehicle, its a pretty nice environmental benefit.
Its worth pointing out that the Volt is a plugin vehicle with an onboard gas-generator. It doesn’t have two engines like many hybrid vehicles do. The generator converts the gasoline to electricity to power the one motor. The fact that the Volt gets me 45 miles of pure electric driving (more than I typically use in a day), and still has gas when I run out of electricity, really makes the Volt the only car I need. Fully electric cars like the Nissan Leaf and the Telsa-S suffer from range anxiety and most likely require another car for long distance trips. In my opinion, this drastically reduces the “environmental” argument for the electric cars. For a family that will have two cars anyway, an all-electric car coupled with a fuel based one can probably make sense.
The Big Bad Battery:
The vast majority of questions I get on my Volt have to do with the car’s battery. Chevy loaded the Volt with lots of technology to serve one purpose: Give your Volt’s battery a long and happy life.
You might notice that your cell phone battery doesn’t last as long as it did when you first bought it. Months of fully charging and fully depleting the battery has reduced its overall performance. It’s the extremes that harm battery life – fully charged, and fully depleted. The Volt’s battery has 16 kWh but only ever uses about 10. This makes sure that the battery never fully depletes, and never fully charges – keeping it in the sweet spot for maximum total life.
One is supposed to keep the Volt plugged in when not in use – even if its fully charged. This is because the onboard computers will periodically run cooling and heating systems around the battery to make sure it never gets too hot or too cold due to the environment. Again, its the extremes that damage the life of the battery, and the Volt tries to protect itself from this.
I charge my volt on a standard 120v outlet in my garage. It takes about 8 hours to fully charge, and I have mine programmed to do so in the middle of the night when electricity is cheapest (about $.06 a kWh). If I drive all 45 miles a day, it costs me roughly $.60 a day in energy! At around 25mpg, my old BMW would have used about $5 in fuel to drive that same distance. With a 26 mile roundtrip commute, I’m paying under 40 cents for electricity instead of $3.60 for a gallon of gas. Thats savings of about $66 a month.
I thought about installing a 240v charging station in my garage to cut the charging time down to 4 hours, and give me more electric miles. The most affordable solution I found for this was roughly $800. Considering that most of the time when I go way over my electric miles and into gas, I’m no where near my home charging station anyway, it didn’t make sense. By my estimates, I would need to drive about 9,000 ‘bonus electric miles’ to make the charger pay for itself. I say ‘bonus electric miles’ because these need to be miles that I get from additional charging after I’ve depleted my 45 miles from the nightly charge. With that in mind, it just didn’t seem very likely to make a huge difference in my overall energy usage.
I have zero regrets about swapping my BMW for a Chevy Volt.
The application utilizes the Rotten Tomatoes API to display the top 50 box office movies, allows progressive filtering, local pagination, inspecting movie details and favoriting movies with local storage. Feel free to browse the source code. I built this in about 3 days, so you’ll have to excuse a few rough edges here and there, but I’m pretty happy with the results overall. It uses jQuery, Bootstrap, Angular, Angular UI, Bootbox, LessCSS and Modernizr. Note that I’m not compiling my LessCSS down to css prior to execution. In a normal production environment you’d want to do this, but for demonstrative purposes I like to keep it all out in the open for quick updates.
I’ve marked up the source code heavily with comments to describe some of the details of the implementation. I’m in the process of rebuilding the application using BackboneJS and will write up an extensive blog comparing the development pros and cons of each framework. Place your bets now on which one you think will win!
I’ve been playing around with HTML5’s new Canvas tag and trying to convert some of my old Flash particle and proximity experiments. My favorite of these trials has always been the web spinning art (which unfortunately is no longer working on the blog).
By using a grid-based proximity manager, you click and drag your mouse across the canvas. As you drag, particles are created at your point of contact. They have a random direction and velocity. Particles are slightly attracted to each other, so depending on how much velocity they have, they will turn inward towards each other. There is also friction in the environment that cause the particles to slow down and eventually disappear.
While the code (especially the proximity manager) is pretty ugly, I do take advantage of some new features of the canvas tag, as well as use object-pooling to speed up object creation.
If you are unfamiliar with object-pooling its pretty simple. When I create a particle, it runs it course and is no longer needed, rather than wait for garbage collection to clean up the particle, I move it to a dead-particles array. When a new particle is requested, rather than instantiating a new particle (and thus using more memory), I first check if there are any dead particles that can be reused and grab one of those.
I have two versions of the web spinner, a mouse-only desktop version and an multi-touch version for tablets & phones. The multi-touch version does not use the ‘lighter’ blend mode or multiple random colors to help speed up performance. Also note, that since these are experiments, I’ve done no testing on browsers outside of Chrome or optimized to make touch/mouse events interchangeable.
What is a “Classical Object Oriented model?”
Many people believe that the word “classical” in “classical OO” has something to do with tradition, or a history of OO programming. This is actually incorrect. The word classical in this instance actually refers to the base word “class,” which in OO means a data structure that allows one to create unique instances of objects through classes. If you are familiar with Java or ActionScript3, you have most likely used classes.
How is “prototypal inheritance” different from “classical inheritance?”
Classes can inherit from other classes by extending them. When one class extends another, the extended class is often referred to as the base, super or parent class. For the purposes of this article, I will refer to them as a parent and child relationships when referring to inheritance. The child class inherits a specified set of methods and properties from the parent class.
Prototypal inheritance is based off an an actual instance of an object – not the construct to create that instance. So when you create your parent object with all its specific properties and methods, the child inheriting from the parent gets all the original objects values. They’re live and will change automatically for the child when its created.
I like to think of classical inheritance as blue-prints. You ‘construct’ things from blueprints, and each one will be unique and different. When a child gets a hold of the original parent’s blue-print, it can add on rooms and make changes, but it won’t affect any of the objects already created with either child blue-prints, or their parents. It also does not require any parent objects to be created in order to create children. They can be created directly from their own blueprints.
After some 2 hours of debugging and trying to get my new Nexus 10 to connect to ADB, I finally found this post on StackOverflow outlining the EasyTether problem. After deleting EasyTether from my system, I’ve had no issues getting my Galaxy Nexus or Nexus 10 to connect to my computer for debugging.
It was probably my desire to root for the underdog, but when I first decided to invest in an e-reader, my feet were planted squarely against an Amazon Kindle. Now, after trying the Kobo and the Nook, I’ve become fully invested in the Kindle. The latest enhancements to the Kindle Paper White and Amazon’s acquisition of Audible.com have made for my perfect reading experience.
Whipsersync for Voice (WfV) and the combination of Kindle & Audible.com allows one to have almost non-stop reading. When it is available on a title, its like magic! I might pick up my Kindle in the morning before work and read a few pages. When I’m finished reading, my position is automatically updated to the cloud. If I hit the gym over lunch, I can fire up Audible on my phone and it jumps me to where I left of reading on my Kindle. In the evening before bed, it takes me to where my Audible audio book left off! This is the perfect companion of those who enjoy the convenience of being able to multitask with audiobooks, but also enjoy reading when they have the time.
I share articles on Facebook about opposing Minnesota’s proposed “Defense of Marriage” amendment quite often, and now that I’m engaged to be married myself, the relevance of this issue strikes even deeper. I recognize that there are emotional, moral, and religious dilemmas surrounding the issue. For the purposes of my argument here, I’ll stick to strictly the constitutional aspects surrounding it. If you support the “Defense of Marriage” amendment, and by that I mean plan to vote “yes” on November 6th, please take a moment to read.