2013-03-12T20:59:32-07:00http://www.kevinwestern.org/Octopress2013-03-04T20:49:00-08:00http://www.kevinwestern.org/blog/2013/03/04/css3-animationsCSS3 transitions allow for simple animations but only allow control for the beginning and end of animations without giving you any choice on how they progress. Animations in CSS3 give us that control by allowing us to define how the animation will progress over time using a set of keyframes. We’re also allowed control over the frequency at which the animation executes, whether the animation is paused or running and the delay of the animation start time.

Defining an animation

As mentioned previously, animations are defined through a set of keyframes. Keyframes allow us to specify the values for the animating css property at different times throughout the animation. Keyframes use the CSS at-rule, or @keyframes, followed by a unique identifier for the set of keyframes and a set of unique selectors. This unique identifier will be the value for the ‘animation-name’ property defined on some element.

Keyframes are defined through keyframe selectors, which is a list of percentage values, or the words ‘from’ and ‘to’ which are the same as 0% and 100% respectively. Each percentage defines when in the animation’s life cycle that frame should take effect. The frame is defined as a block of properties exactly like a normal css selector. The

]]>2012-11-07T21:16:00-08:00http://www.kevinwestern.org/blog/2012/11/07/ecmascript-6-a-quick-look-at-proxiesThe next version of ECMAScript, or “Harmony”, introduces Proxies. What is a proxy, you ask? Merriam-webster defines it as “authority or power to act for another”. And that’s simply what a Proxy object allows you to do in JavaScript: act on behalf of another object. In other words, a Proxy object can be used to intercept calls, or property access, from some other object. Use cases may not be apparent at first so consider the following: Logging when we get/set a property on an object, fire events when getting/setting a property on an object, transparent data binding on an object. In this post I’ll explore the first and the last.

Logging Access

Let’s imagine you would like to create an audit log of when an object was changed. Maybe you’re trying to track down a bug, or maybe you want an audit trail of modifications. One solution is to use myObject.set('prop', 'value'); or myObject.get('prop'). This solution is pretty simple! However, it requires boiler-plate code and extra typing. It would be nice if we could use regular js accessor properties right? Or, if we’re tracing down a bug we may end up littering our code with console.log statements. We can alleviate these problems by using a Proxy.

The code above will proxy the get and set mutators to the Proxy object created in loggable. It starts by defining a function that creates a Proxy for some object obj and using some logger logger. Next, we’ve defined the action required for the object’s get and set mutators. In get we’re simply logging that a property was accessed. In set we’re logging what we’re updating the object to as well as what it was in its old state. The debugger; statement is a testament to how easy debugging becomes. We create a person object and then assign it to a Proxy object. Finally, we execute basic get and set mutators to see our logging statements appear in the console.

I’ve ran this code in Firefox and Chrome (with ‘Enable Experimental JavaScript’ set to enabled in about://flags).

Data Binding

Data binding has caught on in the recent explosion of JavaScript frameworks such as AngularJS, Ember.js, Knockout, etc. Data binding allows us to update our JavaScript object and instantly see the change reflected on our page. Some frameworks, like Ember.js, make you use the .get() and .set() notation which, as previously stated, is extra typing and doesn’t use the native js mutators. On the other hand, frameworks like Angular and Knockout allow you to use native mutators but must constantly monitor the state of every object with some sort of equality check performed at a regular interval.

The Proxy object gives us the best of both worlds. We can use native mutators and we don’t need any monitoring. Here’s an very naive example.

If you made it this far, I won’t bother you with the details of what’s going on but give a high level overview. We look at our html for any tags that have the data-model attribute. Next, we loop over every match and perform a breadth-first search for text nodes that contain our special template syntax of {{<nameOfAttributeOnModel>}}. Once we’ve built an inverted index of template matchings to nodes that need updating, we create a Proxy of the data model, passing it our index so that anytime a property is changed on our Proxy we can instantly find what nodes need updating to reflect in our DOM. Finally, to show data binding working, we update the age of our test object every second which is reflected in the DOM; no verbose syntax or object equality checking required.

Conclusion

Proxies help provide many conveniences but comes with its share of problems. For example, your proxy will also trap calls to functions. This means you’ll have to run a typeof on your property to see if it’s a function. Fortunately the Proxy specification is still very much a working draft. Perhaps it will get a call trap for trapping function invocations. I wouldn’t recommend the use of proxies in production code. However, for debugging code I’d highly recommend it.

]]>2012-10-29T21:59:00-07:00http://www.kevinwestern.org/blog/2012/10/29/mysql-remember-to-indexThe only thing worse than discovering your application is crashing is having a customer tell you your application is crashing. Not too long ago I received panicked emails stating that, at some random intervals, our application was throwing 500s. Unfortunately I turned off push notifications (actually it has helped separate work/life - if it’s an emergency you’ll be getting a call) so I didn’t receive these emails until the next morning when I sat down at my desk.

My co-worker had already diagnosed the problem by the time I had arrived. The recent changes we had pushed included a 1s ajax poll on a particular page which, in most polling cases, ended up hitting the database. Also, those changes were going live with a few thousand more users than the previous version. My co worker discovered that the database was the culprit, but why?

It turns out one of tables we were querying on didn’t have an index set for a particular column. Coupled with the fact we added more users it was obvious why the database was choking: it had to perform a full table scan. The solution to the problem was easy, of course, we just needed to add the appropriate index.

Performance before and after indexing

It has been a few years since I’ve directly interacted with MySQL so I thought it would be fun to run a couple benchmarks on a table with and without indexing. The first thing I did was setup a Rackspace cloud server with 8 GB of memory and 4 vCPUs. If you don’t have a testing box, I’d highly recommend it. You get great computing power at your fingertips on demand. The best part is: it’s cheap. You can turn your machine off when it’s not being used so you’re not charged for something you’re not using. It took me a couple hours to setup MySQL and write the python (I chose python to familiarize myself with it) scripts for inserting data. Two hours only cost me $0.96.

That’s pretty damn slow. How can we improve this? Let’s add the constraint that email addresses will be unique. Next, we can add a unique index to our email column. Depending on your database engine you could define an index type (BTree or Hash). I decided to use the InnoDB engine which only supports a BTree index.

What a huge improvement! The query was so much faster it couldn’t be measured in seconds, perhaps if we had measured in milliseconds we would have a non zero response time.

What changed?

The query without the index had to perform a full table sequential scan, meaning it had to look at all 5 million rows. Think of it as an array with 5 million elements we have to traverse. Adding the index transformed this array into a self balancing tree, more specifically, a btree. This means searching only takes O(log n) steps, or at most 23 steps (222 = 4.2 million, 223 = 8.3 million). This is a huge improvement over our previous 5 million steps!

Another slow query

Let’s suppose I want to find all products bought by users who were born in 1994 without using an index.

A 434% improvement! I’m sure this query could be improved even more, but I had to head out after running this last query, so this is where I stopped.

Conclusion

When you’ll be frequently querying on a particular field in your database remember to add an index for that column to increase performance and keep your customers happy!

]]>2012-08-19T11:42:00-07:00http://www.kevinwestern.org/blog/2012/08/19/css3-transition-timing-functionsThe CSS3 Transition spec has already defined various timing, or stepping, functions for us. What do these timing functions look like, you ask? Take a look.

A list of timing functions have already been defined in the transition-timing-function spec. Since I’m a visual guy I’d prefer to see what each of these timing functions look like with an example. Each example will move the square from left to right over 5 seconds when the container is hovered over. Learn more about CSS transitions.

ease-in-out

step-start

step-end

(Hover for 5s)

123

#ease-in-transition{transition-timing-function:step-end;}

steps

123

#ease-in-transition{transition-timing-function:steps(5,start);}

]]>2012-08-19T10:01:00-07:00http://www.kevinwestern.org/blog/2012/08/19/css3-an-introduction-to-transitionsPart of CSS3’s features that have a lot of popularity behind them are its transitions, transformations and animations. We’re no longer dependent on a JavaScript library providing basic animations; we can let the browser do the heavy lifting for us. In my experience, popular JS animations have been simple transitions. In this post I’ll explore how to get started using CSS3’s transitions.

Transition

CSS3’s transition property is known simply as “transition”. However, because the transition spec is still a working copy, we’ll need to use browser prefixes. Let’s look at a quick example:

Breakdown

The code may appear intimidating but fear not! It looks like a lot of code but it’s really not. The extra browser prefixes adds a lot of bloat. You should be using a CSS preprocessor such as compass, less or stylus to write these prefixes for you.

transition-property

The first group of transition styles target the ‘transition-property’. The ‘transition-property’ field denotes which css property you’d like transition to apply to. For example, I could have specified ‘background-color’ instead of ‘all’ to achieve the same effect in this scenario. Having a value of ‘all’ will apply the transition when any other css property changes. See animatable properties in the CSS3 Transition working draft for a list of css properties that can be animated.

transition-duration

The second group of transition styles specify how long the transition should last.

transition-timing-function

The third group, ‘transition-timing-function’ property, describes how the intermediate values between the start and end of the transition will be calculated. Another word for this effect can be called the ‘easing’ function. A list of timing functions have already been defined for us: ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end. See what the different effects look like here. These timing functions are built using a stepping function or a cubic Bezier curve. Read more about timing functions here.

transition-delay

The fourth and final property we’ll look at is the ‘transition-delay’ property. This property simply states how long the transition should wait, or be delayed, until the transition starts.

transition shorthand notation

I’ve used the longhand notation for this example to allow for easy explanation. We can reduce the example to shorthand notation in the following format: