Category Archives: Uncategorized

Good approach to organize your teams at GitHub

by

One of the most complicated things nowadays is how to maintain our workspace well organized. It’s not about plannings and projects at all, but in a single point  that we can improve everything continuously. And a great point is: everything that you don’t pay attention, maybe will be a problem in future and the things get bigger sometimes.

We have many developers and outsourcing partners working joined to our GitHub account. The company already started and is starting many projects at same time, so the developers manegement accounts must be made in a effective way. I thought in some strategies to handle that and I think that the better way to solve this little puzzle was to group developers by skills. Except to keep business security, maybe it’s interesting to keep just outsourced guys in a different group and give them the desired permission.

Why Skills?

At first you can have a skill mapping of your team. It’s a great overview to understand how your IT environment is established.

If you have a developers group organized by skills, you can have a clear map of what kind of developers that you need to maintain your applications running.

Let’s imagine a scenario that you have many teams working in different projects, and much of them are writing code using the same computer language. Just for an example, let’s say that this guys are using NodeJs for that, and to facilitate our example we are talking about group A and group B. So, if you organize your team putting all NodeJS skilled guys in a common group, you’ll have a good knowledge transfer and will be improving team’s relationship. As a matter of fact that they are working in distinct projects, they will be able to consulting each other codes and be opened to change and share knowledge every time. Your whole team will have better communication and they will be always at the same point.

When you keep the group A and B separated by the project, you just broken the chain that it would be continuous. If a guy from group A elaborates a good solution to his project, maybe it can serve as example and base skill to some guy in group B. It doesn’t matter the order that solutions come from, you’ll extend your knowledge base to all guys. You also can think that if a guy from group A made not a such good solution to some problem that he was handling, this can be identified, improved and suggested by a guy from group B. Coding review?

Another interesting point that you can keep in mind is that, if you needed to add more resources to group B, and group A is in a stable state of work, you could easily identify the right guy and move him to help.

When you already is using git, you probably have a good communication performance, and I think that if you organize your team as above, you can achieve more benefits that you already have.

Simple pie chart with HTML5

by

I needed to use some charts in my system, so I’ve decided to code something in HTML5 and to pass all dirty processing job to the user navigator.

After reading a little about canvas object, I got this code below:

$(document).ready( function() {
	var getColors = function( total ) {
		var r,g,b = 0;
		var colors = new Array();

		for( var i = 0; i < total; i++ ) {
			r = Math.abs(Math.floor(Math.random()*254));
			g = Math.abs(Math.floor(Math.random()*254));
			b = Math.abs(Math.floor(Math.random()*254)); 

			colors[i] = 'rgb('+r+','+g+','+b+')';
		}

		return colors;
	};

	var graph = function(obj, width, height, values, colors) {
		if( values.length == 0 && $('#'+obj).attr('id') == '' ) {
			return false;
		} else {
			var canvas = $('#'+obj)[0];

			if( !canvas.getContext ) {
				alert('Problem to load canvas, try moving your javascript code before ');
				return false;
			}
		}

		var total = 0;
		var percent = [];

		for(var i in values) {
			total += values[i];
		}

		if( typeof(colors) != 'object' && !(colors instanceof Array) ) {
			var colors = [];
			colors = getColors(values.length);
		}

		canvas.width = width;
		canvas.height = height;
		var context = canvas.getContext('2d');
		var angle_start = 0;
                var angle_end = 0;
		var point = [width/4, height/2];
		var pointradius = [width/2, height/2];
		var legend_x = pointradius[0]+((5*100)/width);
		var legend_y = pointradius[1] - height/7;
		var rect_size = (30*100)/width;
		var radius = Math.min( pointradius[0], pointradius[1] ) / 1.2;

		for(var i in values) {
			percent[i] = values[i] * 2 / total;
			angle_end += percent[i];
        	        context.beginPath();
			context.arc(point[0],point[1],radius,Math.PI*angle_start,Math.PI*angle_end,false);
			context.lineTo(point[0],point[1]);
			context.fillStyle = colors[i];
			context.fill();
			context.beginPath();
			context.rect(legend_x,legend_y,rect_size,rect_size);
			context.fillStyle = colors[i];
			context.fill();
			context.beginPath();
			context.font = '12px sans-serif';
			context.fillText(values[i].toFixed(2)+'%',(legend_x + rect_size + (15*100/width) ),(legend_y + rect_size ));
			context.fillStyle = '#000000';
			context.fill();
			angle_start += percent[i];
			legend_y += rect_size + (40*100/width);
		}
	};
)}

It has a very simple usage, just save the code above in a file named graph.js and take a look:

<!DOCTYPE>
<html>
<head>
	<script type="text/javascript" src="graph.js">&lt;/script>
	<meta http-equiv="content-type" content="charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="chrome=1" />
</head>
<body>
	<canvas id="pieChartId">If you are reading this please download http://code.google.com/intl/pt-BR/chrome/chromeframe/</canvas>
	<script type="text/javascript">graph('pieChartId',400,200,[100,200])</script>
</body>
</html>

The example above will generate charts with random colors, but if you prefer to use your color scheme, just pass an array with the same amount of itens passed in the values array, so we have something like:

graph('pieChartId',400,200,[100,200],['#ff0000','#000000']);