Javascript Timer (The second time around)

I’ve always wanted to create a timer application in Javascript so that I can use it for timed sprints/events – and have it run on whatever system I’m using (be it Windows, Linux, Mac, any mobile device). A while ago I attempted to do it using jQuery and DOM manipulation. The code below is the incarnation (and the jsFiddle).

It’s short, sweet, and unbelievably horrible! I knew there had to be a better way, but JS was this abstract beast. Now, having learned just a tad of the language, below is the new incarnation. (and the jsFiddle)

It’s still not complete (styling, disabling/enabling of buttons when appropriate, etc) but it’s a huge step in the right direction. You might think it’s complete overkill for the desired effect, but there are benefits:

  • Reusability
  • Seperation of concerns. The view handles the html, the timer handles itself, and the controller manages all of them
  • Single Responsibility Principle – each class does one thing and one thing only (controller being the slight exception)
  • You can easily tell what’s going on by looking at each class
  • Testable. Although there are no tests at this time, it can easily be tested since each section can be tested in isolation

I could use a framework like Backbone.js or Angular.js, but this is an exercise in actually learning JavaScript. In conclusion, I’m one step closer to crossing this off my to-do list! Yay!

Javascript is like your car’s Rear Wheel Differential

When you first look at it, it just works. You don’t really know how, but since you don’t really understand it, you just take it for what it is. Once you start to understand it, you hit that ‘oooooh, wow. That’s pretty cool.’ That’s what jQuery and the like is for the vast majority of people. It’s a magic box that just works. I’m slowly starting to open that box… and there’s some crazy ish in there.

Javascript addEventListener within a class method

If you are attempting to bind to an element from within a method inside a class that calls another method inside that class, you will have to pull some JS ninja-ry.

If you attempt to call StartTimer(), when you click the element with elementId, it will throw a reference error when it attempts to call sayHello(); In this context, sayHello does not exist. The reason is, this is the element that the event is bound to. To get around this, we have to get a reference to the method from outside the event listener so that it will be in the parent scope of the method and thus accessible from within the listener. Therefore the code above needs to be:

Hopefully this will save someone the time and hackery of trying to tie things to the DOM and not using JS in a more appropriate way!

I’m done hacking JavaScript

Yup, I’m done. I’m tired of simply learning what I needed to get by with, or using the random jQuery plugin I found when solving a problem.

I’m going to actually become a Javascript ninja. Well, that’s my goal at least. And I’m progressing quite nicely if I don’t say so myself.

So why do most people simply hack JS? I think it’s because we were around when the only thing you could do was alert(). That was great and all, but we fell behind and didn’t learn the ‘scripting’ language because it wasn’t important. It’s why JS has been thrown into utility folders and never organized – one reason the Rails team moved towards organizing JS in projects, because they saw themselves doing it too.

JS is not a second class language anymore. It’s probably the most universal – it’s on every browser and it is, in fact, quite powerful. jQuery, Node, Backbone, Angular, etc, etc, etc.

//end rant.

Better CSS Link Hover Effects

With CSS3, we can now have better hover effects that the usual :hover we’ve used for years on links. Although, getting the timing correctly on the hover over and hover out can change the way the application feels.

  • If the hover on is too slow, it can create a sense of anxiety in the user
  • If the hover on effect is too slow, it can make the site appear to be slow as well
  • Using different timing functions changes the overall feel. With a faster animation time, ‘ease-in’ make it appear as if there’s a delay on the hover effect because of the curve of how the animation timing is executed
  • Using a longer hover out effect creates the feeling that the app is alive and kicking
  • Too long of a hover out effect and it can be confusing as to where the user was just hovering
  • Too long of a hover out effect just looks like it’s for show
  • Hover on and out effects when coupled create a ‘flash’ feel
  • Hover on without hover off creates an abrupt definition to the user interaction
  • Font, size and location all matter when setting the transitions. Headers links and normal links can behave differently to carry the same application feel.

Ideally you want to aim for transitions that are not noticed. It’s the same principle when adding drop shadows to elements: if you notice them, then they’re too strong. Just like transitions, you want them subtle – make user interactivity appear as one fluid motion.

Here’s a fiddle with examples.