An Ember JS Gauge Component

TL;DR

This is a gauge (well kind of) made with Ember Components and CSS3 transforms. The pointer angle is bound to those 2 inputs (see the jsbin just bellow) in which you can define either the pointer current value and the whole gauge maximum value.

The Template

The main idea of having a gauge component is that you can use and re-use it anywhere in your Ember app(s), and its main purpose is to indicate a current value relative to a maximum value. So, if it could have 2 attributes value and maxValue that would be perfect.

Well, let’s just do that.

{{my-gauge value=something maxValue=something}}

Continue reading →

Animate png sprites with css3 animations

Here’s a demo I made on Codepen that let’s you play with Ken (from Street Fighter II). There are several moves, like jumping, walking, etc and of course there’s the famous Hadoken! 🙂 It’s made with only CSS transitions and a minimum of javascript that let’s you control Ken.

See the Pen Ken’s Street Fighter II with animated sprites by Julien Knebel (@jkneb) on CodePen.

UPDATE
And here’s the post I wrote for the David Walsh Blog → where I explain how it works in details.

Continue reading →

Put a break point on DOM elements to listen to JS interactions

Have you ever struggled to find what line of js code was the cause of a weird behavior in your page? I did.

Well there’s a super cool feature in Chrome dev tools you can try. Simply inspect the DOM (where the behavior appears to be) then do a right click and choose one of these three options:

Continue reading “Put a break point on DOM elements to listen to JS interactions” →