10 Years in the Game, Part 4 – Staying in the Game

Posted on by Standard Reply

This is backwards and difficult to admit, but I would say my biggest contributor in staying in the game is learning. Earlier in my career I slacked off and didn’t touch code after work. I know it cost me opportunities with other jobs as I was clueless about newer technologies that were coming out. I would walk into a room and my architect would talk about some new feature of ASP.NET or SharePoint (yuck) that I didn’t know about. I would spend more time researching about that feature as well as wonder how he knew.

The difference between 5 years ago and today is that I had to rely on bloggers to publish articles on their sites. I eventually got smart and subscribed to their site through RSS and put in on my phone. Yes, I’ve been developing before the first iPhone was released. Now the new kids can go to their phones and Google will feed you articles relative to what you’ve searched while coding.

My how times have changed and now I can say with confidence I’m spending 2 – 3 hours a day learning something in our industry. Right now I’m creating a few apps that are in github that show my work. These aren’t fully deployed yet, but at one point I had automated deployments to AWS ECS. I learned the hard way that AWS is expensive ($88 for 6 small docker containers) for someone who wants to host a few demo apps with light traffic.

Not only am I spending more time working, but I’m also finding ways to make friends in the industry. The last couple of jobs I’ve landed have been through friends of mine. I consider myself lucky in that aspect as the previous generation before me did not have that luxury. The relationships I’ve created has lead me to working with SlingTV and HP. I will say those two companies alone would have rejected me if I would have came off the street. Fortunately for me, I made a friend and he’s been continually help me in getting these types of opportunities.

You don’t have to follow in my shoes, but this has what helped me get to where I am today. 10 years, 2 states later, a blog, work from home environment, people still beating down my door to come work for them. Lets just say I’ve done a few things right in these past years. Hopefully this will continue.

10 Years in the Game, Part 3 – Getting into The Game

Posted on by Standard Reply

I know, what to do if you just graduated school and are just trying to get in the game? First, realize that you need patience. Ask anyone who has worked in the industry for long enough and they will tell you patience and rejection are apart of the process. 10 years in and I still get rejected like a balding, fat guy who lives in his parents basement.

Second, do not wait until you are about to graduate to start looking for jobs. If you are in college you should be working in your field no later than your incoming junior year. If you are in code school you should be finding a way to volunteer your time towards non-profits.

Getting into the game initial is probably going to be the biggest hurdle in your career. You will have to jump through all types of hoops (e.g. interviews, take home tests, timed tests, etc.) all before you get to the final interview. Some times you don’t get a response back from the company you applied. Sometimes you get a response back weeks after. It is all apart of the hiring process. I still get treated like a newbie during the interview process in most cases. There have been a few times where this hasn’t happened to me and it was due to my network.

10 Years in the Game, Part 2 – Networking

Posted on by Standard Reply

After 3 wonderful years of CIBER I can say that is where I took off. I had more confidence in myself to do interviews, architect some solutions, provide technical analysis on business use cases and even on hiring. What was that process to get all of that confidence? Admittedly, a lot of failure.

Yes, I failed. I failed miserably after I left CIBER and I still fail today. I’m human so it shouldn’t be a surprise. When I say fail I mean fail. I’ve architect a few solutions that were not that great. I’ve definitely crashed and burned on interview questions that I know I should know as a software developer. I’ve made a few bad decisions on not doing enough research on a company before I accepted an offer. I will say the biggest mistake I’ve made is not networking enough.

Everyone hates networking, because it’s fake. And yes networking is fake. Everyone puts on their little mask and pretends we are here to help other people. When in all actuality 95% of the people you meet don’t pan out for various reasons.

Let me be clear about how I think about networking. We as people are very selfish in nature. We have our own ideas about people and things, but at the same time we are too afraid to show our true intentions. It isn’t until we get comfortable or trust the other person where we can slowly let out our true intentions. This isn’t just in networking this is a true fact of life. You can apply this theory in finding a job, dating, negotiating and making friends. Get comfortable with sorting through people’s crap to determine whether they are a good match for you.

You have to look at networking as shopping. Whenever you are shopping in a store it contains thousands of products. All of these products represent people in our networking analogy. You do not have enough resources to purchase each item in the store. You are there for a select few items and then your gone.

With networking you have to look at each person as an item on your shopping list. Do they fit your criteria or do they have the potential to fit your criteria? I’m not saying blow off people who don’t fit in a specific bucket, but try not to waste your time when you are seeking a specific type of person.

Do not be general in networking either. Having a broad criteria in networking nets in a lot of wasted time. You should be more specific than general. When you are specific in finding like minded people you are more prone to missing out on great people, but you are also able to determine what traits you like or didn’t like in a person. Being specific allows you to see these traits more accurately.

Also do not be afraid of other people. Especially at networking events. Everyone who is in attendance is wanting, begging, pleading to meet someone who can help them. So go out, meet them and show them what you can do.

10 Years in the Game

Posted on by Standard Reply

Last month I celebrated 10 years as a professional software developer. When I think about this accomplishment I can reflect back on the good, bad and the ugly throughout my career. Overall, I can say that I’m just happy to survive those 10 years and also evolve into the developer I am today.

So how am I celebrating this accomplishment? I’m celebrating by reflecting no how I got here more than anything else. As we all know a lot changes in a year yet alone 10. I’ve seen people and technologies come and go. I’ve switched from Microsoft to open source. I’ve also moved from the East Coast out to Denver, Colorado.

I’m sure some of you may be asking how did I get here. The answer is simple a lot of hard work and some luck. Everyone knows hard work pays off, but do they know why? I can only speak for myself, but I’m sure there is a plethora of examples of how hard work provides more opportunities (e.g. luck). I’ll explain a few.

My first gig was with CIBER in Pittsburgh. My team was responsible for maintaining GSK’s U.S. consumer facing websites. For the first few years I knew more about acid erosion, heartburn, sensitive teeth than I will ever care to know.

It was during this time I happened to sit near the architects of all the websites. At first, I was just trying to complete the tasks that were assigned to me, but as I grew in knowledge and in confidence I could form relationships with these men. Some of them became friends where we went to happy hour and some also became a mentors of mine. Whenever I visit town, I try and meet up with them for a drink or two and we reminisce about the good old days.

I will admit sitting next to the architects was an advantage I had over most people on my team. When you are a junior developer you want to surround yourself with as many experienced people as possible. For me, it was just a cubicle away. For others you may have to introduce yourself and ask questions. The point in getting better is to show people that you want to learn and that you are willing to learn.

In this game of life there are two main types of people. There are people who will make excuses and those who actually go out and do stuff. As a young developer I made sure I was doing everything in my power to learn more and do more. I’m still that way today and that has propelled me to where I am today.

Highcharts Symbols Inverted Axis

Posted on by Standard Reply

As I sit here and write this article to help others, I wonder if my efforts were based on my inability to let things go or an uncontrollable urge to get this right? I think a little of both would suffice the question just asked.

I will admit that this answer starts with this link and eventually leads to me discovering how to set attributes based on other attributes being set. How I arrived at the solution was more of me adapting to what was not working. For most of the time I was just trying to get the icons to render, then getting the icons to render vertically and eventually trying to figure out how to get the icons to show properly once the chart redrew itself. I Googled quite hard in seeing what other people were doing as well as stumbling along other links which explained my issue.

So lets get down to the business of properly displaying a font awesome icon inside of a Highchart element.

First we must extend the SVGRenderer symbol method


/*
This experiment explores how to use FontAwesome iconic fonts as markers in Highcharts. Three steps are required:

1. Supply the plugin code below to handle text symbols.
2. In each series' marker.symbol setting, add the font icon as Unicode string on the format 
   "text:\uf182". The Unicode corresponding to icons can be found at 
   https://github.com/FortAwesome/Font-Awesome/blob/master/less/variables.less

Compatibility notes:
- IE6, 7, and 8 don't support rgba colors (fall back to solid rgb)
*/

/* Highcharts plugin to handle text symbols */
(function (H) {
    function symbolWrap(proceed, symbol, x, y, w, h, options) {
        if (symbol.indexOf('text:') === 0) {
            var text = symbol.split(':')[1],
                svgElem = this.text(text, x, y)
            .attr({
            	translateY: h,
                translateX: -1
            })
                .css({
                    fontFamily: 'FontAwesome',
                    fontSize: h * 2
                });
            
            if (svgElem.renderer.isVML) {
                svgElem.fillSetter = function (value, key, element) {
                    element.style.color = H.Color(value).get('rgb');
                };
            }
            return svgElem;
        }
        return proceed.apply(this, [].slice.call(arguments, 1));
    }
    H.wrap(H.SVGRenderer.prototype, 'symbol', symbolWrap);
    if (H.VMLRenderer) {
        H.wrap(H.VMLRenderer.prototype, 'symbol', symbolWrap);
    }
    
    // Load the font for SVG files also
    H.wrap(H.Chart.prototype, 'getSVG', function (proceed) {
        var svg = proceed.call(this);
        svg = '' + 
            svg;
        return svg;
    });
}(Highcharts));

Next we need to add proper translation and rotation whenever this chart resizes. This is important as once the chart redraws itself the icons will be moved to it’s new location based on the final size of the chart. We used the little know class of MutationObserver to take care of placing the icon appropriately.


var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

var height = (h/2) + y;
var width = (w/2) + x;
var transformParams = “translate(-1, ” + h + “) rotate(90 ” + width + ” ” + height + “)”;

svgElem.element.setAttribute(“transform”, transformParams);

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if(mutation.target.style.fontFamily === ‘FontTW’) {
            var element = mutation.target;
            var x = parseInt(element.attributes[‘x’].value);
            var y = parseInt(element.attributes[‘y’].value);
            var params = “translate(-1, ” + parseInt(element.attributes[‘height’].value) + “) rotate(90 ” + x + ” ” + y + “)”;
            
            mutation.target.setAttribute(“transform”, params);
        }
    });
});

observer.observe(svgElem.element, {
    attributeFilter: [‘x’, ‘y’] //configure it to listen to attribute changes
});

When we put everything together we end up with this script


/*
This experiment explores how to use FontAwesome iconic fonts as markers in Highcharts. Three steps are required:

1. Supply the plugin code below to handle text symbols.
2. In each series’ marker.symbol setting, add the font icon as Unicode string on the format
  “text:\uf182”. The Unicode corresponding to icons can be found at
  https://github.com/FortAwesome/Font-Awesome/blob/master/less/variables.less

Compatibility notes:
- IE6, 7, and 8 don’t support rgba colors (fall back to solid rgb)
*/

/* Highcharts plugin to handle text symbols */
(function (H) {
   function symbolWrap(proceed, symbol, x, y, w, h, options) {
       var test = proceed.apply(this, [].slice.call(arguments, 1));
       var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

       if (symbol.indexOf(‘text:‘) === 0) {
           var text = symbol.split(‘:’)[1],
               svgElem = this.text(text, x, y + h)
               .attr({
                   translateY: h,
                   translateX: -1
               })
               .css({
                   fontFamily: ‘FontTW’,
                   fontSize: h * 2 + “px”
               });

           var height = (h/2) + y;
           var width = (w/2) + x;
           var transformParams = “translate(-1, ” + h + “) rotate(90 ” + width + ” ” + height + “)”;

           svgElem.element.setAttribute(“transform”, transformParams);

           var observer = new MutationObserver(function(mutations) {
             mutations.forEach(function(mutation) {
               if(mutation.target.style.fontFamily === ‘FontTW’) {
                   var element = mutation.target;
                   var x = parseInt(element.attributes[‘x’].value);
                   var y = parseInt(element.attributes[‘y’].value);
                   var params = “translate(-1, ” + parseInt(element.attributes[‘height’].value) + “) rotate(90 ” + x + ” ” + y + “)”;

                   mutation.target.setAttribute(“transform”, params);
               }
             });
           });

           observer.observe(svgElem.element, {
             attributeFilter: [‘x’, ‘y’] //configure it to listen to attribute changes
           });

           if (svgElem.renderer.isVML) {
               svgElem.fillSetter = function (value, key, element) {
                   element.style.color = H.Color(value).get(‘rgb’);
               };
           }
           return svgElem;
       }


       return test;
   }
   H.wrap(H.SVGRenderer.prototype, ‘symbol’, symbolWrap);
   if (H.VMLRenderer) {
       H.wrap(H.VMLRenderer.prototype, ‘symbol’, symbolWrap);
   }

   // Load the font for SVG files also
   H.wrap(H.Chart.prototype, ‘getSVG’, function (proceed) {
       var svg = proceed.call(this);
       svg = ‘’ +
           svg;
       return svg;
   });
}(Highcharts));

How long did this take approximately 20 hours of researching, testing and correcting all the intricate details. I hope you can take these code snippets and copy and paste the final result. Although this took me forever and made me question my own abilities as a developer I’m glad that I’m able to share this with the rest of the world until they fix this lowly ranked issue in Highcharts.

Omega 2016

Posted on by Standard Reply

Wow I cannot believe that I actually followed through on creating a blog and publishing at a semi regular basis. I had a few goals that I wanted to accomplish this year as a professional that I have completed, a few that I’m in the process of trying to complete and a few that didn’t even get started.

Goals Completed

Becoming Employed For An Entire Year

I know this isn’t hard for most people, but ever since I moved to Denver it has been quiet difficult to stay employed as a software engineer. Some of this was due to my strong East Coast attitude that scares the crap out of such lesser people in charge. I’m 6’6″ 245lbs and black so I get that my demeanor scares people at times. Another reason was for due to the size and youth of the companies that I was employed. These companies were still trying to find there way in finding there own identity. I’ve dealt with that personally myself and it seems to be a recurring theme in other areas of my life as well.

The lesson learned through the past two years was simple find companies and co-workers that fit you. In both instances I made myself standoff-ish towards everyone and at the end of the day it cost me employment. As my father says, “he who stands tallest is the one that gets cut first.” I hear you dad and will remember that moving forward.

Starting a Business

So I did apply for my fictitious name in the state of Colorado. This was an easy process and was relatively cheap and easy. Well done.

Goals Still In Progress

Networking More with the Community

I went to a few meetups around the Denver area related to the industry. I also went and met developers for lunch in real life as well. I would say that my effort was ok for that goal, but I know I can do better. I really hadn’t met anyone that I had a real connection with that I already didn’t know this year. I have to take the approach of keep putting myself out there and believing that I will eventually meet the right people. I also have to take the approach that it is a process and to not limit myself to the normal places that I frequent.

Releasing An Application

O man this goal right here is the most important of the year. Why? I really do believe people in this industry pay attention to your Github, Twitter and other social media accounts. Unfortunately, for me I do not have much on Github or Twitter that separates me from the pack of other software developers in the Denver area. I will say that I am very aware of the competition that is out there and I am looking for any edge I can get to get me closer to my goals.

I will say that my effort is commendable, but it’s not consistent enough to produce a finished product. I will admit this is a huge undertaking for one person to do, but I also believed in my drive to get this thing done before the election. Unfortunately, that drive hasn’t been there throughout the entire year. I gotta get better, but at least I can make huge strides this week with my focus being totally on snowboarding and this project.

Goals Not Accomplished

Publishing an Article Once a Month

This is more of failure of planning and not focusing on the task at hand. This is completely unacceptable if I’m going to take this blog seriously. As the sole author of this thing I need to apologize to my audience for not publishing frequently as well as not even placing pictures for each article. This is a half-assed job by me and is the reason why I feel as if this blog was unsuccessful this year. So back to the drawing board as far as topics and actually putting forth a decent effort to completing articles. Complete and utter failure on this goal. Disgusting!!!

Gaining Clients

This goal wasn’t even attempted at all. It wasn’t even half-assed like this years articles I published. This was like going to the club wanting to talk to women and spending all your time at the bar getting drunk. Pathetic on my part to set this goal and do absolutely nothing about it. The worst part of this goal was to get one client. Just one. I couldn’t even do that. Not only that I didn’t make it happen I barely take any steps to put myself in position to make it a possibility. How can one succeed at accomplishing goals without effort? It’s just unacceptable and will be rectified for 2017.

With that said I appreciate all that I’ve learned this year personally and as a professional. Let’s make 2017 the best year yet. I look forward to what I have to share to my readers as well as hopefully hearing, learning and sharing more with you.

Felicia is now known as NPM and nurse is known as Yarn

Posted on by Standard Reply

Bye NPM, Hello Yarn.

If you haven’t heard of Yarn you are missing out. Yarn is the new node package manager that the cool kids are using these days. Don’t you want to be a part of the cool kids? I know the label cool kids can be a misnomer and a term that can bring up bad school memories. However I ask you to push those negative thoughts to the side and come over and check out Yarn.

I will admit I haven’t had a whole lot of experience using the Yarn package manager, but I will tell you a few things that drew me towards using it in my own personal pet project and would even take the risk of persuading others to use it as well.

I will start with the most attractive feature, in my own opinion, is the folder management. If you are currently using NPM for your project take a look at the node_modules folder in the root of your project. If you take a few minutes and go through a few packages you will find another node_modules folder within a package. If you look inside that node_modules folder chances are you will find another package that contains a node_modules folder. And if you look inside that node_modules folder… I’m sure at this point you get the picture. This creates a very messy and complex folder structure. Also, side note for all you Windows users, you may run into the filename character limit.

Yarn untangles the messy folder structure and puts all the packages that are needed in the root of the node_modules folder. When you look inside of each package using Yarn you will not see another node_modules folder.

Second, parallel processing of dependencies. Instead of waiting for one package to finish downloading before the other one starts, all dependencies download at once. Even if one dependency fails it will retry again. This is pretty cool in my opinion and is something that has been needed for over a long time. So great job Facebook and Google for making this feature happen.

Third, the transition from NPM to Yarn is a breeze. All I had to do was type two commands

npm install -g yarn
yarn

and viola I had yarn implemented into my project. As Yarn was doing the transition from NPM it showed me several warnings that indicated my packages were out of date. Updating those packages were easy as well.

Bonus and probably the most important reason why I am writing this post is the speed at which my application runs. My personal pet project uses EmberCLI. Whenever you are first starting this tool on your machine it takes a few seconds to get the build to complete. Before, using NPM, it took around 11 seconds to build. Granted this is a very small application that is around 143MB. I know what you are thinking here with the size, but trust me the EmberCLI creates a very large project for such a small application during development. I would like to see what the size of the project when it’s ready for production. Anyways, with Yarn it now takes 8 seconds to build. A three second decrease may not seem much, but if you are working on a large project your build times will decrease on a more dramatic scale. Less time waiting for builds means more time for development.

Double Bonus for all you people still developing on Windows machines. One, I have a heart for you and would first tell you out of respect to consider switching to a Mac. However, with that being said, I know many of you will not for various reasons. I do really respect that, because I used to be one of you. In the meantime you would really be doing yourself a disservice by not switching over from NPM to Yarn. Whenever I was developing a web application using my old Windows machine it was evident to me that it took some time to create a build from Grunt, Gulp and/or EmberCLI. These build managers were taking a tremendous toll on my machine in time and how hot the machine ran. I cannot guarantee that your Windows machine will not run hot during these builds, but I can guarantee that it will be a faster process. The speed and efficiency gained is worth the minimal effort in creating a faster development environment.

Word Cloud with Responsiveness

Posted on by Standard Reply

I use a lot of different JavaScript libraries to accomplish many things in my job. I am often impressed with the tools that are readily available and free to accomplish these many tasks. However as a developer in 2016 some of these libraries forget that we are now a society that doesn’t look at things on a singular resolution. You would think that these developers would think about responsiveness whenever they create their libraries. If they were to do so it would make my job easier along with other developers.

As a professional it is my civic duty to not only create sites that not only function well, but they must also look good at almost any resolution. At certain times i will judge a site on how it looks on smaller screens, whether they used WordPress, Angular (yuck, EmberJS is better) and css for certain UI elements . There is very little excuse to not put out a quality product to the world.

I will say in the defense of some of those who create content that developing a JavaScript library can be a huge process. I cannot overly complain about the quality of work done by Jason Davies with his world cloud generator. It functionally works flawlessly for my use cases.

However, my biggest complaint about the library was its inability to render properly when the screen size changes. This may have been an oversight during development or this still may be a future feature we do not know about. As of today there isn’t a solution available online until today.

There are two things we must focus upon when setting up the component. The first being container size. As a user shrinks and grows their browser the parent container which holds the word cloud will change in size as well. In order to respond to such changes we must add an event listener to the windows resize event.


var frequency_list = [{"text":"study","size":40},{"text":"motion","size":15},{"text":"forces","size":10},{"text":"electricity","size":15},{"text":"movement","size":10},{"text":"relation","size":5},{"text":"things","size":10},{"text":"force","size":5},{"text":"ad","size":5},{"text":"energy","size":85},{"text":"living","size":5},{"text":"nonliving","size":5},{"text":"laws","size":15},{"text":"speed","size":45},{"text":"velocity","size":30},{"text":"define","size":5},{"text":"constraints","size":5},{"text":"universe","size":10},{"text":"physics","size":120},{"text":"describing","size":5},{"text":"matter","size":90},{"text":"physics-the","size":5},{"text":"world","size":10},{"text":"works","size":10},{"text":"science","size":70},{"text":"interactions","size":30},{"text":"studies","size":5},{"text":"properties","size":45},{"text":"nature","size":40},{"text":"branch","size":30},{"text":"concerned","size":25},{"text":"source","size":40},{"text":"google","size":10},{"text":"defintions","size":5},{"text":"two","size":15},{"text":"grouped","size":15},{"text":"traditional","size":15},{"text":"fields","size":15},{"text":"acoustics","size":15},{"text":"optics","size":15},{"text":"mechanics","size":20},{"text":"thermodynamics","size":15},{"text":"electromagnetism","size":15},{"text":"modern","size":15},{"text":"extensions","size":15},{"text":"thefreedictionary","size":15},{"text":"interaction","size":15},{"text":"org","size":25},{"text":"answers","size":5},{"text":"natural","size":15},{"text":"objects","size":5},{"text":"treats","size":10},{"text":"acting","size":5},{"text":"department","size":5},{"text":"gravitation","size":5},{"text":"heat","size":10},{"text":"light","size":10},{"text":"magnetism","size":10},{"text":"modify","size":5},{"text":"general","size":10},{"text":"bodies","size":5},{"text":"philosophy","size":5},{"text":"brainyquote","size":5},{"text":"words","size":5},{"text":"ph","size":5},{"text":"html","size":5},{"text":"lrl","size":5},{"text":"zgzmeylfwuy","size":5},{"text":"subject","size":5},{"text":"distinguished","size":5},{"text":"chemistry","size":5},{"text":"biology","size":5},{"text":"includes","size":5},{"text":"radiation","size":5},{"text":"sound","size":5},{"text":"structure","size":5},{"text":"atoms","size":5},{"text":"including","size":10},{"text":"atomic","size":10},{"text":"nuclear","size":10},{"text":"cryogenics","size":10},{"text":"solid-state","size":10},{"text":"particle","size":10},{"text":"plasma","size":10},{"text":"deals","size":5},{"text":"merriam-webster","size":5},{"text":"dictionary","size":10},{"text":"analysis","size":5},{"text":"conducted","size":5},{"text":"order","size":5},{"text":"understand","size":5},{"text":"behaves","size":5},{"text":"en","size":5},{"text":"wikipedia","size":5},{"text":"wiki","size":5},{"text":"physics-","size":5},{"text":"physical","size":5},{"text":"behaviour","size":5},{"text":"collinsdictionary","size":5},{"text":"english","size":5},{"text":"time","size":35},{"text":"distance","size":35},{"text":"wheels","size":5},{"text":"revelations","size":5},{"text":"minute","size":5},{"text":"acceleration","size":20},{"text":"torque","size":5},{"text":"wheel","size":5},{"text":"rotations","size":5},{"text":"resistance","size":5},{"text":"momentum","size":5},{"text":"measure","size":10},{"text":"direction","size":10},{"text":"car","size":5},{"text":"add","size":5},{"text":"traveled","size":5},{"text":"weight","size":5},{"text":"electrical","size":5},{"text":"power","size":5}];

function resize() {
    document.getElementById("word-cloud").empty();
    setup();
}

function fontSize(d) { return d.size; }

function setup() { 
    var color = d3.scale.linear()
            .domain([0,1,2,3,4,5,6,10,15,20,100])
            .range(["#ddd", "#ccc", "#bbb", "#aaa", "#999", "#888", "#777", "#666", "#555", "#444", "#333", "#222"]);

    d3.layout.cloud().size([800, 300])
            .words(frequency_list)
            .rotate(0)
            .fontSize(fontSize)
            .on("end", draw)
            .start();

    function draw(words) {
        d3.select("word-cloud").append("svg")
                .attr("width", 850)
                .attr("height", 350)
                .attr("class", "wordcloud")
                .append("g")
                // without the transform, words words would get cutoff to the left and top, they would
                // appear outside of the SVG area
                .attr("transform", "translate(320,200)")
                .selectAll("text")
                .data(words)
                .enter().append("text")
                .style("font-size", function(d) { return d.size + "px"; })
                .style("fill", function(d, i) { return color(i); })
                .attr("transform", function(d) {
                    return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
                })
                .text(function(d) { return d.text; });
}

setup();
window.addEventListener("resize", resize());

The second item we need to focus upon is after the resize is complete. Once the resize is complete you will notice that the font size may not be relative to the size of the parent’s container. In other words you will get something like this: Of course this may work in some cases, but I doubt that your user will like what they are viewing in their browser. In order to work around this we must scale our font sizes. The scaling of the the fonts is inexact science and may take some tweaking on your part. The overall goal is to create sizes for your fonts based upon the the size of the parent container of the word cloud.

var frequency_list = [{"text": "sample", "size": "xl"}, {"text": "demo", "size": "m"}]

function fontSize(d) {
    var fontSizes = {
        "s":[8, 10, 12, 14],
        "m":[16, 20, 24, 28],
        "l":[36, 42, 48, 54],
        "xl":[48, 56, 64, 72]
    },
    width = document.getElementById("word-cloud").clientWidth,
    fontScale = 0;

    if(width < 400) {
        fontScale = 0;
    }
    else if() {
        fontScale = 1;
    }
    else if() {
        fontScale = 2;
    }
    else {
        fontScale = 3;
    }

    return fontSizes[d.size][fontScale];
}

The third and final point is the position of the word cloud svg container itself. This was probably the most difficult thing to accomplish so my hard work is your reward. A few notes on what is happening during the resize and initial setup. Once the initial setup is complete and drawn on the screen the library place the svg container way off center from its parent div.

 var svgWidth = document.getElementById("word-cloud").getElementByTagName("svg").getElementByTagName("g").getBoundingClientRect().width,
     svgHeight = document.getElementById("word-cloud").getElementByTagName("svg").getElementByTagName("g").getBoundingClientRect().height;

var svgLeftEdge = document.getElementById("word-cloud").getElementByTagName("svg").borderEdge.left,
    gLeftEdge = document.getElementById("word-cloud").getElementByTagName("svg").getElementByTagName("g").borderEdge.left;

var svgTopEdge = document.getElementById("word-cloud").getElementByTagName("svg").borderEdge.top,
    gTopEdge = document.getElementById("word-cloud").getElementByTagName("svg").getElementByTagName("g").borderEdge.top;

var wHeight = document.getElementById("word-cloud").getElementByTagName("svg").getBoundingClientRect().height;
var wWidth = document.getElementById("word-cloud").getElementByTagName("svg").getBoundingClientRect().width;

var tHeight = (svgTopEdge - gTopEdge) + ((wHeight - svgHeight)/2);
var tWidth = (svgLeftEdge + gLeftEdge.abs()) + ((wWidth - svgWidth)/2);

document.getElementById("word-cloud").getElementByTagName("svg").getElementByTagName("g").attributes['transform'] = "translate("+ tWidth + "," + tHeight + ")";

Upon resizing you will notice that the words will scramble around. This is something I haven’t had the time to figure out nor, do I see a quick fix for this action on resizing. Maybe someone will piggy back off this solution and figure it out. Until then this is as good as it gets.

Dart JS Event Handler

Posted on by Standard Reply

I will admit that I am not overly eager in using frameworks in general let alone ones that seem to place overhead and headaches over productivity. I will preface this blog post with my opinion on strongly type javascript languages such as CoffeeScript and Typescript are weak compared to most. In fact I have yet to use either languages and up to this point in my career have no desire to learn or investigate the reasoning behind these languages truly exist. I understand that these aforementioned languages solve problems that many other developers encounter rather frequently. What those issues may involve is not for discussion of this post.

Even though I am not a fan of using CoffeeScript and TypeScript does not mean I am against using such frameworks. My current employer uses Dart as its preferred strongly typed javascript language. After using Dart for almost a year I would say that it’s not drastically different than plain old javascript. There are a few caveats here and there, but nothing to write home about.

The biggest difference between Dart and javascript would be actually interacting with a javascript library. This page describes what you need to do in order to setup and call pure javascript methods using Dart. It’s pretty simple once you get the hang of it, but there is a tricky method in creating event handlers for  javascript libraries.

Below is a code snippet of how you actually accomplish this in normal javascript.

 d3.layout.cloud().size([800, 300])
            .words(frequency_list)
            .rotate(0)
            .fontSize(function(d) { return d.size; })
            .on("end", draw)
            .start();

 

This is how you would accomplish the same exact thing using Dart

 context['d3']['layout'].callMethod('cloud')
  .callMethod('size', [new JsArray.from([800, 300])])
  .callMethod('words', [new JsObject.jsify(frequency_list)]) 
  .callMethod('rotate', [0]) 
  .callMethod('fontSize', [fontSize()]) 
  .callMethod('on', new JsArray.from(['end', draw()])) 
  .callMethod('start');

 

I am sure you will notice the all of the callMethod calls that are being made in the Dart code. If you aren’t familiar with dart or the dart:js library then I would consider you studying up on the library itself before continuing.

For the most part this is pretty standard except whenever you are setting the event handler for the end event. I was pretty clueless at first and tried several different attempts, but the dart code snippet above works in all browsers.

If you are to set the event handler as so:

 .callMethod('on', ['end', draw()])

 

It will work in Chromium, but not your standard browser. It will also not show an error or any other type of warning and will definitely cause some frustration. I can speak from experience because it took me a few hours and lots of Googling to finally find a solution that works in all browsers. I hope this helps some people out there who are developing with Dart. If you are using Dart drop me a line and maybe we could sync-up sometime.

Who Do You Follow

Posted on by Standard Reply

I know I am not big by any means. I mean shoot, this is my third blog ever. However, I know that there are people out there who do read this thing. My question towards those is, “Who Do You Follow?”. I’m not talking specifically related towards software development, but also in general. We all secretly subscribe to someone’s blog, but really never tell other about it. Well, it could just be me, but I wouldn’t be surprised by others who do the same as I. I’m just curious to know who is worth paying attention towards in the era where corporate sponsorship dictates how, what, where and why we get our news.

For me:

Very Smart Brothas

Elliot Hulse

Tyrone Magnus

Dr. Joe Dispenza

John Sonmez

I would love to hear who you read and listen towards. We all could use someone else’s perspective on life! I look forward to yinz response.