March 03, 2015

Check it out - You Can't Be Great without Technical Excellence


I wondered and bumped into this great presentation which again states what many of us already know but still wonder how come this is not common knowledge and practice.
This presentation is given by James Grenning, which I had no idea who he was prior to watching it, but it makes no difference...

The presentation can be found here.

James, after bubbling a little bit about agile, makes some strong points which even the thickest mind can grasp and relate to. To be honest, one's head should be really stuck in his rear bottom in order not to see the light James is talking about.

The mathematics of thinking before doing, TDD and code-quality is so evident it seems that this talk is redundant, but sadly it's not.

If you're impatient, allow me to point you to certain parts of the presentation which sums it nicely:
  • 17:35m -  WTF is a "hardening" period (which some of you may know as "stabilization" period)?
  • 23:15m - Not doing TDD is like...
  • 30:30m - What happens when practicing Development followed by Testing
  • 55:55m - Yes, you are special but it does not matter.
  • 1:01:10 - Motivating and De-motivation

February 10, 2015

Stop and Resume Binding in AngularJS


There comes a time when you need to tweak the native behavior of a framework.
For me it was pretty straight forward desire to stop and resume binding for DOM elements.

The reason behind it was that sometimes I have several elements on the DOM which listen to the same data, but not all of them are viewable. Only one of them is viewable and this is the one I would like the binding to keep updating, while the rest shut the hell up and do nothing over the data changes.

AngularJs is not too kind when it comes to tempering with it's biding mechanism and I guess they have they reasons. The binding mechanism is something that can dramatically affect the performance of an application.

If you go little bit deeper (really, no too deep) you find that binding is all about the digest cycle which in turn invoke watchers, which are functions set to watch for changes and invoke callback accordingly. It is these $$watchers which you would like to remove and retrieve in order to connect and disconnect to the digest cycle.

I've made a simple POC where I created DOM with 2 identical directive bound to the same data on their parent scope. I also added buttons to toggle their binding - pressing it once cuts off the binding for a specific directive while the other keeps on updating. Another click resumes the binding.

Simple - you can find the code here on Plunker

Take care.

January 27, 2015

Javascript Event Payload Preformance Effect

I recently had a debate with one of my colleagues about why he shouldn't put redundant details on a Javascript event payload.

I strongly urged him to avoid putting information that no one needs just because it's there, and he claimed that it has no influence on the way the application work and preforms - which immediately lite up my "this is a task for JSPref" bulb.
You see, aside from being hard to maintain and in many times read and understand, having a lot of information over the event is simply slower than having less.

So just for the sake of your future debates over this, here is a JSPref I ran, where you can see that even clearer on FF.
Avoid redundant data transfer when possible :) 

Events Payload Performance Effect JSPref

If you think this JSPref is not accurate feel free to fork it.


January 20, 2015

Component Directive Options over Multiple Attributes

Hi guys,

When building a directive component in AngularJS you'd probably ask yourself - how will I expose the component's API to the "outer world". Putting "events" and "data" aside for this one, I want to focus on the components behavior configuration.

I would like to share a direction which I tend to go with, and that's using a single "options" or "config" object which pretty much controls all the behavior (not the data, but rather what to do with it) aspects of component.

Let's take for example a component directive which display a chart, a bubble chart for instance. I would like to tell this component what are the colors palette it should use, where to put the legend, how to distribute the ticks on the axis etc.

Now, the naive way of approaching this is to set attributes for this directive and say "colors" attribute will hold the colors array. the "ticksinterval" will hold the ticks configuration and so forth. Before you know if, your component looks like a very very long line on the DOM, with numerous attributes each, BTW, creates it's own watcher and effects the overall performance greatly (if you bind it to the scope, which you probably do).

That should be enough of a reason to consolidate all these configurations into a single object, but there is a catch here -
When I do this I avoid registering any reference to executable code on the configuration object. The rule of thumb I follow is: "treat this configuration object as a JSON file that later can be loaded from a distant server", doesn't know the code, no callbacks, nothing.
So he question might rise - how will I execute API's over this component? I would like to select a single bubble in this chart, how do I do that?

So again, think of this "selectedBubble" as an attribute you would normally put on the directives  - something like "selectedIds" which receives an array of ID's and knows to track them down and mark them as selected on the chart.
That makes sense right? but wait - aren't we trying to avoid these multiple attributes? so instead, you've guessed it, put in on the configuration.
The component will know to read it from the configuration object and act upon it.

As with anything else, each "direction" or "rule" has it's exceptions and you should consider what suites the use-case best :)


July 13, 2014

Constatus - Find those Strings and Const'em!


Not so long ago I've opened a random file on the code base I'm working with and saw the horror of many Strings values which have "why am I not a constant?!" written all over them.
I figured that a re-factor is in order but I wondered how will I know that if covered all the instances of a particular String value?

Good thing there is NodeJS around and some nice modules like Esprima, which can help with that, and so I found myself coding this little harmless tool which does the following:
Goes over the code and finds Strings which, according to configuration, should be made constants.

Deadly simple and dare I say dumb as it gets, but guys - it does the work, so why not put it on Github? ;)
So feel free to visit the project on Github with the mind-blowing name: Constatus
It is not complete, there are many more features that can be added, but it's out there for you to abuse ;)

Take care

May 29, 2014

New Quake-Stats improvments

Yeah, I know - it has been a while since I wrote but trust me, I had important things to attend to, and still do BTW ;) don't worry, it has nothing to do with work, code or debugging shit.
Anyhow - I just wanted to let you know that the "quake-stats" open source application has gained some nice new features!
For those of you who don't know what I'm talking about, you can read about it here and of course visit the Git Hub repo.

So, we got MongoDB into the stack and so we can save games across time. Hold your horses, this doesn't mean that we have over-time game statistics but it means that we're on the way going there.
If you want to upload games files into the application there is an "easter egg" for you. Just go the to "/admin" route and before you will reveal itself a nice upload screen (well, not so nice but it does the work). Once uploaded, the game will be stored on your MongoDB and later can be accessed easily via the "Game" dropdown menu. This great feature is a contribution of Haim Litvak. Cheers mate!

I also added another feature to enable Quake scores over maps per a single player. This feature will display the score Quake calculates for each map and display it on the "player" screen under the "Kill, Deaths & Q-Score" chart.

That's it so far. If you think something is missing, fork it and do it yourself :)


April 27, 2014

My Sublime Text plugins


I am pretty sure that many of you are familiar or even using Sublime Text.
If you don't you should definitely check it out and consider it being your main text/code editor.
One of it's key features is the plugins you can add to it, and so you can find numerous plugins which helps your coding process so much. I would like to share with you the very limited, yet so useful, set of plugins I use:

Something to help you code Angular better. Aside from code-completion it also offers a cool "goto definition" which helps greatly within AngularJS. Not to die for, but does makes things easier.

Brackets Highlighter
The name says it all. You want to know where you brackets start and end, surely if you're a web developer. This plugin hands it to you so you can stop looking for that missing bracket.

Runs the basic Git operations from within Sublime Text. I'm not using this excursively since I prefer Git bash for these sort of things, but adding files, diffs and blame are darn easy and clearer with this plugin.

Git Gutter
You want to see your changes directly on the code (ok ok, on the code pane gutter). This plugin will let you do that. love it.

That's it.
Told you, I don't stack plugins just for the sake of having them. These 4 are the ones I use frequently and they are reliable.

I would love to hear any other plugins suggestions you might have that can make the work of a web developer much easier with Sublime Text.

… and BTW -
I don't know how many of you remember one of the brilliant Flash talents of all times - Mr. Grant Skinner. Anyhow, he has migrated to HTML5 development since and recently I've bumped into his RegExp tool for JS. I loved the previous version of that tool for ActionScript and this one is even better. A keeper.
Check it out - regexr