July 13, 2014

Constatus - Find those Strings and Const'em!

Whud'up?

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 :)

Cheers

April 27, 2014

My Sublime Text plugins


Yo.

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:

AngularJS
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.

Git
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

April 22, 2014

CrunchBang rocks #!

I'm not a Linux power-user. Correction, I'm not Linux user.

Seriously, I spent a lot of time laughing at those Linux fanatics, and still do. It always seemed to me that the more one likes Linux the more s/he has bad social skills.
But one thing has to said - Linux is a better OS for developers, period. If you're building stuff, if your'e contributing code to open source projects, if you like your shell to be efficient - it's Linux, mate.

So I found myself knocking on Ubuntu's doors and working for a fairly long time on it, struggling with it the way only a Win-OS user can.
Yet, something really bothered me with Ubuntu. The way it tried to be user friendly and in that course fucked up the UX or the way it offered me so many advanced features which I didn't want or cared about.

I have an old Toshiba Tecra laptop. It served me through thick and thin, suffered my abuses and even overcame some nicely done floor-crashes. I call it "the gimp", and my "gimp" had 2 OS's installed on it when I decided that it is time to wipe it clean and install a single one which can perform nicely.
Ubuntu was obviously the first choice, but then I can across a nice resource which presented a new linux debian distribution called "CrunchBang", or as the natives call it "#!".
After little exploration I came to know that it was a very light-weight OS, which works nicely on old machines - I had to give it a go.

The installation went briefly and in a matter of minutes I had it in front of me.
The interface minimalism is what got me first. No more task-bars and shit, just a blank desktop with the system monitors on and a set of keyboard shortcuts. beautiful.
Everything went faster, from opening the web browser to utilizing git on the shell - if it was a comics strip, I would add "SWOOSH!" to every operation I've made. And guys, I'm talking about and old machine with 3G of RAM and 2 Cores CPU. Insulting shit in today's terms.
I also have to mention that Ubuntu didn't approve my 2 monitors settings, which kinda sealed it's fate for me. What? install a plugin for that? yeah, right...

Of course I had to tweak the OS (yet) again, installing JAVA 1.7 (com'on, why does it have to be so annoying?!), installing languages and stuff, you know. But once I've done doing that, I was faced with a swift OS. simple as that. The "start" menu accessibility, the way OpenBox works for this OS, Sublime Text flying like an eagle over it... just sweet.
Imagine how it would perform on a new machine...

So if you're looking for a cool Linux distribution for your old machine, or just a cleaner OS which performs like a devil on the 7th pit of hell - I recommend you give this one a go.

… and BTW -
I caught this very inspiring deck of slides from HubSpot describing their culture. It's interesting to see how companies are aligning themselves to fit the present time.

April 17, 2014

Printing a Dialog content using Canvas and iFrame

Hi guys,
You know that printing from the browser is a bitch. Even after you've figured out how to put the content you want into the browser, the printing doesn't always work the same on all the browsers (yes! HTML is a standard... my arse). And that's not where all the trouble stop but anyway...

The problem I would like to bring up in this post is printing from a dialog box, which is more complex since we have to somehow extract the visual data from the dialog and then put it in some way that the crippled window.print() method can make sense of it. I mean seriously, have you ever seen such a lame API? print()? that's it? no "what do you want to print?". Throw me a freaking bone here.
Given that we're dealing with a dialog kinda eliminates the possibility to use the print media query, since we're not going to alter the whole page, just a section of it.

I saw many solutions on the web, some offering to save and then clean up the DOM, attach a cloned version of the DOM you actually want to print, and then re-render it all back after printing, which to me sounds like "bla bla bla bad performance sad users bla bla bla".
You know, all kinds of adding classes to elements, removing it then later... oh god.
Of course there is the jQuery plugin which offers to do that but I wasn't in the mode to introduce yet another jQuery pluging so I had to think of something else...

Canvas came to the rescue.
The idea I came up with is to somehow capture the DOM content I wanted to print, convert it into an image, and then create a hidden iFrame bearing the content of this image among other stuff I wanted to be printed. How? canvas can be concerted into an image.
I already had html2canvas library so it wasn't in a need to download any other 3rd party. you can get what it does from it's name, right? good.

Moving forward, here's the actions the code needed to perform (pseudo-code):
  • Get the canvas from the HTML elements
  • Convert the canvas to an image using the toDataURL('image/png') method
  • Create an iFrame dynamically
  • Append the iFrame to the DOM 
  • Once loaded Set the iframe content with the newly generated image I have
  • Send it to printing, by printing the iFrame content only
  • Smoke a cigarette
I believe that what's written above should give a good idea on how to implement it.
As for printing the iFrame itself I took a code snippet from some stackoverflow thread but I had to tweak it a bit since Firefox didn't like what I did, for it removed the iFrame before the browser launched it's printing. To overcome this I've used a deferred object, like so:

this.printIframe = function (id) {
var deferred = $q.defer(),
    iframe = $window.frames ? $window.frames[id] : $window.getElementById(id),
    ifWin = iframe.contentWindow || iframe;
ifWin.focus();
ifWin.print();
deferred.resolve('done');
return deferred.promise;
};

and this means that I had to listen to the promise in order to remove the iframe from the DOM and not just count on the fact the window.print() is supposed to stop javascript execution...

I think that pretty much sums it up. It might not be the best idea out there so I would love to hear your opinion on it or better if you have a better one.

… and BTW -
I caught this nice AngularJS Weekly magazine (or whatever you would like to call it) on the way. A lot of cool resources and stuff. Pretty nice.

Stay tuned and play on.

April 12, 2014

All the JS you need

Yo guys,
You know me, I'm just strolling around the web bumping into nice stuff on the way, and recently I found a great place where you can pretty much get all the knowledge sources you need for JS.
To be honest, it's pretty amazing how much one can gather about this Egyptian-pyramids-fucking-papyrus-deserved scripting language, but then again we must, now don't we? :)

Enjoy it: superhero.js

April 07, 2014

Delegating Event handlers to align Event Data model


After such a pretentious title we can all stop and take a one week sleep. WTF do I want from you now, you probably ask. yeah, ok. check this out:

Think about this next situation - You have a nice component which potentially can host several other components, each can dispatch a different event, an event that needs to be handled of within the "parent" component.
We cannot let the "parent" component manage all the events potentially fired from its nested components, right? I mean, we can let it but then we will pretty much shit into our own development experience and maintenance, after all, we want the "parent" component to be aware of a single Event data model.

Being aware of a single event data model means that the "parent" component will expect a single format of data when receiving events from any of its nested components. It will not matter what's the data model of each nested component, something will have to align it into a single well-known model. The question is who?

We need some kind of a delegator, which will know all the potential events and will process their data and send a nice formatted data back to the "parent" component.
So, if we are to drill into more details, we're actually talking about extending the "parent" component's Scope, since it is that Scope which will eventually listen to all these events, but it will be done in a sort of a "mixin" approach.
The solution I came up with introduces a service which has a single method registering the "parent" component's scope. From there on, the service will extend the Scope and eventually send an event back to the "Parent" component with the processed event data.
Simple does it.
 
The POC can be found in Plunker

I would love to hear if you have any comments about it.
Cheers