I’m Crossing Over

I believe I am still playing catch-up with the industry when it comes to using open source software. I have been a Microsoft developer for most of my career and have little expertise when it comes to using open source software. So why the change now?

At first it was due to my previous job writing a small business CRM web application. Our development stack was using MongoDB, with WebApi using EmberJS. We built the application using grunt and also used Jasmine for our javascript testing framework. After I had experienced the power of all of these tools I wanted to play more with what the cool kids had been playing with for some time. I began playing with gulp, moved on to a full MEAN stack application and eventually started to play with Ruby on Rails.

Why Ruby on Rails, well I will just say that I am going with the flow of what is hot in the town of Denver, Colorado. At this very moment in time there is high demand for Rails developers and they are able to command a salary that is above mine at the current moment. I love this place and the innovation that it brings. It has pushed my skills to a whole ‘nother level. This doesn’t include software development, but also life skills as well. I would do anything to protect my place in the industry even if it means moving to a whole different development environment.

Moving from one environment to another can be difficult, but remember we got into this game to become software professionals. We all have seen code that is atrocious and made us scream at the top of our lungs. As software professionals we need to recognize when things are changing and whether these changes need to be implemented to what we are trying to accomplish.

Speaking for only myself I know that if I were to continue down the path of being a .NET developer I would continue to wait for tools that were already available in the open source community. I know that Microsoft is trying to play catch-up, but there are times when we need stuff yesterday.

If I want to produce the best work that I can possibly provide why would I want to wait until someone makes a tool for my environment when I could switch to the native environment itself?

I know that there are some developers out there who are say why do I need to learn something else when the tools I have today work perfectly fine. This is true to a point. However, I will say that you are missing out on opportunities to do more and also to be more efficient in your work. You never know when someone requires you to do something that is outside of your comfort zone. Are you going to a developer who says I will figure it out or the developer who says we cannot do that?

I know that my answer will always be I will figure it out. I know I do not have any choice, but to give the people what they want. If I do not then there is someone out there who will. I refuse to be the old man sitting in the back office writing on old software and refusing to learn something new. In fact I hope by that age I’m only writing new software projects while everyone else is maintaining something I created. Wishful thinking, but can a brotha’ dream.

Anyways I’ve gone on a rant about changing as a software developer, but I want to mention one thing before I go. Change is inevitable in our industry. I’m lucky to have survived 8 years and became one of the better engineers in our fields. I would like to survive another 8 years god willing. I do not think I would be able to enjoy it as much as I do without having to adapt. I hope that the rest of you currently in our field and/or aspiring developers continue to learn as well.

Responsive Highcharts

I was recently tasked with creating some charts using Highcharts. Up to this point I hadn’t the opportunity to deal with the other JavaScript chart libraries that are available. I had no idea what was to come of this new adventure I was to embark upon for several days. I will preface with the following that I was trying to use Highcharts using the Dart language. I will write another post about that, but for now lets help the people out there trying to get their Highcharts to render within flexboxes.

Out of the box Highcharts only responds to the growth of an HTML element. It fails miserably at the shrinking. I was bouncing ideas off other people (just my boss) I thought I was going to have modify the source code and use that version for my charts. This was the last thing I wanted to do and my boss agreed that this would be the worse case scenario.

For those of you wondering why this would be the worse case scenario I will explain. The others who fully understand the impact of having a custom version of a library in your code please go to the next paragraph. Modifying and creating your own JavaScript library is a potential dangerous situation. Unless you have personally developed this library yourself, you have no idea what the ramifications of your changes will have on other parts of the library. As a younger developer I had once modified the JavaScript library locally for bootstrap. Now why did I do this? I do not remember why, but I can tell you that it was specifically so I could do something that was conflicting with my code. In short my change to the local JavaScript file prevented an expected action to fail miserably. I had been moved off to another project and my co-worker was frustrated with an issue that had nothing to do with his abilities. It was my own naiveness and ignorance of what happens when you change code. It caused my co-worker to spend a few frustrating hours and plenty of cursing at the screen.

So after googling for a few hours looking for solutions and praying that someone figured this out I eventually stumbled upon this article. Finally I found something that allowed me to modify the framework, but yet do so in a way that worked with the current framework. The wrap utility allows developers to write code for public functions that occur before the specified method, after it and even in replacement of the method. After trying a few things I was able to come up with this solution.


(function (H) {
    H.wrap(H.Chart.prototype, 'reflow', function (proceed, e) {

        //before the original method
        var chart = this;

        chart.container.style.display = "none";
        chart.container.style.height = "0px";
        chart.container.style.width = "0px";

        //original method
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));

        //after original method
        chart.container.style.display = "block";
    });
}(Highcharts));

The above code wraps the reflow function that is attached to the window.resize function. The first portion of the code hides the chart container from the user, but it is still in the DOM. This allows the chart container to size properly. Next we call the original method and it calculates the size of the chart. Once this is done we re-show the chart to the user.

I would like to come up with a solution that just re-sizes to the proper size without having to shrink it down to nothing. It is not perfect because you have to hide and shrink the chart to nothing, allow Highcharts to calculate the container and eventually re-show the chart. At times you may not see the chart, but that’s because it’s caught between stages and hasn’t updated yet. This will go away once you re-size the screen again. It occurs more frequently when you are slowly shrinking the screen. Other than the rare hiccups I would call this an effective solution for placing Highcharts inside of flexboxes and percentage sized HTML elements.