Skip to Content

About: Jeaneth Farmer

Jeaneth Farmer

Recent Posts by Jeaneth Farmer

Angular.JS controller communication

AngularJS is a Javascript framework made by Google. Over the last few years, its popularity has increased exponentially. Its main features are double data binding, DOM control, form validation and the use of reusable components. Plus, it’s fairly easy to use, which makes AngularJS one of the top choices when looking for a Javascript framework.

When we start working with Angular, we come to this question very quickly: how can we set our controllers to communicate with each other? Which option is the best?

It is typically assumed that in Angular.js there should be only one controller per view. Sometimes, however, we have no choice but to have two controllers within the same page, and they will need to interact with each other.

Given that, I’ll go into some of the typical scenarios and how to handle the communication among controllers for each of them. I hope this is of help for some of you.

Father and Son

This is when we have a controller inside another controller. So let’s say that our markup looks like this:

The problem would be, how can we access the model inside the child controller? If we want to get info already set in the other controller, then we could do something like:

But this only works for reading the value that has been already set. If that value changes, our variable in the controller will not be updated. We could fix that with the following code:

But watch out, an even better solution arrives! AngularJS provides us with some amazing functions that we can take advantage of:

This function broadcasts an event to all children controllers. All the controllers that are listening for the ‘name’ event will get notified. The $broadcast function could be useful if you wanted to send information from the parent controller to a child controller.

On the other hand, if what you wanted was to communicate from a child to its parent, we use this method:

Finally, ‘on’ allows us to define which methods we are listening to. It listens for the ‘name’ event‘ emitted’ or ‘broadcasted’ methods depending on the case.

Communication from parent controller

Here’s an example:

In this example, we are sending a message every time that our variable ‘something’ changes in the parent controller. Use of $watch is not necessary. What we need to keep in mind is that our child’s controllers and listener for the event needs to be defined before broadcasting

Communication from child controller

Here’s some markup example for this situation:

And the code:

As you can see, the parent controller is listening for a ‘new message’ event. While in our child controller we are emitting this event every time we call ‘tellToMyParent’. We are calling that function when we click on the ‘Say it’ button, and it is sending the value of the $scope.message, which, in this case, is the value in the textbox.

Brother controllers

The idea sounds pretty good, right? Unfortunately sometimes this isn’t as easy as it sounds. There will be some situations on which we have brother controllers, and we can’t get them to communicate without the use of a parent controller.

Here’s some sample markup:

We know that there is one $rootScope for the Angular application and that we could take advantage of that. The code inside the controllers is interpreted in the child scope. And, if the property does not exist in the child scope, then Angular will look for the parent scope, ending at $rootScope. You can take advantage of this to help them communicate.

For example:

Great, but there is only one thing left: if we use $rootScope.$on in the controller, this will create duplicate bindings. That is because controllers can get instantiated multiple times (every time the user enters the view, basically). So we need to be careful with that and find a way to avoid adding duplicate listeners, which could affect the application’s performance very drastically.

So, we still have one option left. That is, combining broadcast and services; services only get instantiated once, unlike controllers.

Examples:

First option; simple set and get:

Second option, combination with $broadcast:

So, we have reviewed a few different ways of handling communication between controllers depending on the situation. As you can see, Angular.js is very flexible with this, but that does NOT mean that we should not to try to look for better implementations and follow best practices. What do you think about these options to communicate controllers? Do they seem useful? Have you found better ones? Feel free to share in the comments.

Thanks for reading!

J.

0 10 Continue Reading →

Introducing Planning Poker: manage sprint planning and retros like a pro.

planning-id-01

Intro

Are you happy with the app you use to do feature estimation in your Scrum process? We weren’t either. How about the way you collect feedback after a sprint is done? We’ve got you covered.

Introducing Planning Poker: the tool to manage Scrum pointing sessions AND retrospectives in the same place, under an Open Source license, for free! How sweet is that? In this post, we’ll tell you why we built this app, and what were we looking for (spoiler alert: you will see those expectations fulfilled in our app). Then, we’ll show you how it actually works, on a step-by-step tutorial to master the main features. Finally, we’ll refer to the technical stack and the reasons behind choosing those specific technologies. We want to open up a line of communication to receive comments and suggestions for improvement. In the end, this is Open Source, right?

More specifically, in this post we’ll cover the following topics:

  1. Why we built this app
  2. How it works
    1. Pointing sessions
      • Creating a pointing session
      • Setting point values
      • Joining a pointing session
      • Pointing stories
      • Statistics
      • Leaving a pointing session
    2. Retrospective meetings
      • Creating a session
      • Joining a session
      • Adding entries
      • Editing entries
      • Deleting entries
      • Revealing entries
      • Reviewing entries
      • Leaving a session
  3. The technical stack we used to build it.

 

Let’s get started.

Why did we build this app?

Planning Poker was born out of the need to have a fast, simple, and fun tool for the process of estimating the complexity of a feature. At the same time, we needed something to help us manage retrospective meetings. In Planning Poker, the estimation sessions and the retrospectives are carried out in accordance with the Scrum methodology in a distributed environment. We needed an application that kept these processes simple yet flexible, allowing for the addition of custom values if needed. Since we couldn’t find an application that had this exact set of features, we set forth to do it ourselves.

We also wanted to give something back to the community. During our run as a web dev company, we’ve made use of great open source software, and are grateful to the the people who wrote that software. We thought that if we came up with something worth sharing, we would release it under an open source license and return the favor. It was about time that we built and offered something that could make the lives of Scrum teams easier.

So, how does it actually work?

There are two types of users in our application:

Player: These types of users are only allowed to vote, add and modify all of their entries in retrospective sessions. In this way, moderators can have control of the meetings and lead them without interruptions.

Moderator: This is a role commonly used by Scrum Masters. They are allowed to change the description of the story that is being estimated, and clear values to start a new estimation. In retrospective sessions, they are allowed to reveal entries when users finish entering them so that the team can review entries together.

Creating a pointing session:

In order to start pointing you have to create a session, go to the application’s homepage and:

  1. Enter your username
  2. Select your user type
  3. Click “Start”
  4. Optional: modify the names of the pointing values.
  5. Click “Go”!

 

PointingLogin

Creating new pointing session

Setting point values:

You will notice that you can modify the description (names) for points. We included this functionality to give users the freedom to choose the scale and the names for the corresponding elements that works best for them. However, we have also included the most popular pointing range, the Fibonacci series, which is set as default. So, if you don’t need to change anything on the scale, you can move on to the next step of the process without delay. Finally, we added two more features to allow players to express that they are not sure about the estimation of a certain story, or that they need to take a break.

It is important to note that the application doesn’t store those values in memory. They are refreshed when a new session is created, and the only person who can modify them is the creator of the session.

SettingPointValues

Customize point values and labels view

 Joining a pointing session:

Once a user creates a session, she can invite the rest of the team by sharing the link or session ID with them. All users will be prompted to choose a username and user type.

To join with a link:
  1. Click link.
  2. Fill username and user type in prompt.
  3. Click “OK”.

 

EnterUsername

Enter username modal joining session

To join with a session ID:
  1. Go to our home page.
  2. Fill username.
  3. Enter session ID in the corresponding field.
  4. Choose user type.
  5. Click “Join”.

 

JoinSession

Joining a session with an Id

Pointing:

We provide an input to define the description of the story in order to keep all members on the same page. Since the voting process shouldn’t be affected by teammates influencing each other, your vote is secret and you are not allowed to see other teammates’ votes. Accordingly, they won’t see yours until all players are finished voting.

Pointing

Pointing view

Statistics:

The application displays statistics right after all users have finished voting.  Yo’ll be informed of how many players voted the same value. If there was consensus you’ll be notified as well. Votes can’t be changed afterwards.

Statistics

Pointing Statistics

 

Leaving  a session:

Once your team is finished, you can clear the voting area in order to start pointing a different story. Alternatively, if you have finished your sprint planning, you can just close the browser and the session will be deleted.

Creating a Retrospective session:

This process is very similar to the one for creating a pointing session, except that this time we have to select that we are creating a retrospective session instead.

  1. Enter your username.
  2. Select your user type.
  3. Select retrospective from the session type dropdown menu.
  4. Click “Start”.

 

CreateRetrospective

Create retrospective session as Moderator

 

Joining a retrospective session:

Same as if pointing a session: once you create a session, you can invite the rest of the team by sharing the link or session ID with them. All users will be prompted to choose a username and user type as well.

To join with a link:

  1. Click link.
  2. Fill username and user type in prompt.
  3. Click “OK”

 

To join with a session ID

  1. Go to join session section in the home page.
  2. Fill username and user type in prompt.
  3. Enter session Id.
  4. Click “Join”.

 

Adding entries:

Once you enter a session you can see three columns like these:

Retrospective

Retrospective view

 

  1. Click the “+” button on any column.
  2. Write your entry in the box.
  3. Press Enter.

 

EnterMoreOf

More of column in add entry mode

 

WritingMoreOf

Writing an entry for More of column

 

AddedMoreOf

Added entry in More of Column

 

Editing Entries:

Once you add an entry you are allowed to edit it by clicking on the pencil icon.

  1. Click edit icon.
  2. Modify entry.
  3. Click “OK”.

 

 

EditingEntry

Editing an entry modal

 

Deleting Entries:

You are allowed to delete your entries too, just on the trash icon next to the entry.

RetrospectiveEntry

Revealing entries:

Only moderators are allowed to reveal entries, this will show the content of the entries to all users. You can do it by clicking on the “Reveal” button.

Reviewing entries:
ReviewEntry

Preview entry in review mode

 

Once you reveal entries you will be allowed to click on them. That will open a pop up with the text of the entry so you can read the complete entry. There’s an option to mark them as ready or go to the next/previous button.

MarkedAsRead

More of entry marked as read

 

If you are a moderator, you have the option of showing where you are with the rest of the users in the session. With that, you can make sure that all users are looking at the same thing, reading the same entry.

Show for others option

Show for others option

 

Leaving  a session:

This works exactly the same as pointing sessions. When you finish your retrospective meeting, you can just close the browser and the session will be deleted.

How is it built?

We chose Node.js as the main backend platform for this project. We did this because of its “Event Loop” feature and because it does asynchronous operations, which makes our I/O operations fast. But that’s not all, it also features socket support. As you probably know, websockets are two-way communications between the server and the client via TCP instead of HTTP. This means that you can create powerful real-time applications that can push changes immediately. In our case, this came in handy when displaying user votes.

Using Node.js helped us reduce the number of issues that commonly occur when working with multiple languages. Since we had JavaScript already running on the server and the browser, it just made our lives easier. We also used Angular.js. We chose it mostly because of the ‘data-binding’ benefit. Since we were building an application with real-time output, we needed to keep the UI updated, and Angular.js is perfect for that. We’ve been working with this framework for a while, and it makes our development process faster. Plus:

  • It’s maintained by a very friendly and highly-skilled community.
  • It allows for the extension of HTML.
  • It allows for dependency injection.

 

We needed to chose a Javascript library to handle websockets, so we went for Socket.io. We did this for these reasons:

  • It handles browser inconsistencies and varying support levels.
  • It includes additional features like rooms, which allows for work in different teams/rooms/sessions/channels.
  • We think it’s the most reliable real-time engine for Node.js so far.
  • It’s easy to use.

 

And finally, we included Express.js too. We know there are a lot of new frameworks for Node.js out there, but since reliability is of the highest priorities for us, we had to go for Express.js. It has been available for a couple years now and its community and creators are very active. Besides that, this framework is simple and very flexible, and allowed for scalability.

We hope that you found this post interesting. If you have any questions or comments feel free to leave them on the comments section below. Here’s the link to the project on Github. Have a suggestion or found a bug? Send a pull request and we’ll be happy to take a look. We at TangoSource are constantly looking for new and interesting projects that empower our clients and keep the end-user happy. Have something in mind? Send us an email at info@tangosource.com, we’d love to talk 🙂

Thanks for reading!

J.

6 5 Continue Reading →

HTML5 Canvas: playing with shapes and images.

The World Wide Web Consortium (WWC) introduced Canvas with HTML5 last year. We think it’s a pretty interesting drawing tool. So, we decided to experiment with it and share our findings in the form of a short tutorial in this blog post. We’ll cover the basics and mention a couple of recommendations for deeper learning.

To start understanding Canvas, think of it as an area on your page where you can draw and render graphs. It’s user together with Javascript, taking advantage of its properties and methods. Its purpose is to be a container for graphics, as it has no drawing abilities on its own. It may seem like a simple element, however, it can be used for complex tasks, like creating 2D animations. You can see examples of what Canvas can do here. Most modern browsers support Canvas, such as Chrome, Firefox, Safari, Opera, and Internet Explorer 8 and later.

Getting Started

In order to start drawing we need to add the Canvas element to our page, we’ll do it with this code:

<Canvas id="Canvas" width="800" height="480"> Your browser does not support HTML5 Canvas</Canvas>

As you may notice, we defined a width and height for this element. If you don’t define the size, it will use the default values, which are 300x150px. Inside the Canvas tag, you can write a message to be displayed if the browser does not support it.

1

The Canvas element is displayed in light blue.

Once we have added our Canvas element, we’ll use Javascript to get the “context”. You can insert Javascript code in the HTML header, a script block or even in another file. The code should look like the following:

var d_Canvas = document.getElementById('Canvas');
var context = d_Canvas.getContext('2d');

And now we are ready to draw!!!

We’ll start with the basic forms and shapes:

Text

In order to show text in our element, we need to take care of three things: font, fillStyle, and fillText. More specifically, this is what you should do:

– Define size and font type in the “context.font” property.
– Define text color in the “fillStyle” property.
– Use the “fillText” function as in the example below. The first parameter is for the text to show, and the next two are the X and Y axes, respectively.

context.font = "30px Arial";
context.fillStyle="#000";
context.fillText("Hello, World! This is a text", 20, 100);

2

Canvas now displays a gray color.

Square

To draw a square or a rectangle we use “fillRect”. Once again, we are defining the color of our square with the “fillStyle” function. When using “fillRect”, we have to include the following parameters: (positionX, positionY, width, height).

Example:

context.fillStyle = 'red';
context.fillRect (175, 75, 50, 50);

3

And this is what we get from Canvas.

Circle

To draw a circle we use “beginPath” first and then “arc”. First draw the outline and then call the “fill” function. The code should look like this:

context.beginPath();
context.fillStyle = 'green';
context.arc(200, 100, 50, 0, Math.PI * 2);
context.fill();

5

And this is the result.

The “arc()” function takes the following parameters: (x, y, radius, starting angle, ending angle, anticlockwise). As you may notice, in this example we didn’t use the anticlockwise parameter, as it is optional, and it wouldn’t have changed the result.

If you’re wondering about the meaning of those parameters: here’s what they mean]:

Starting angle: angle in radians to start drawing the outline (0 will be at the three o’clock position)

Ending angle: the ending angle in radians.

CounterClockWise: boolean value that draws anticlockwise when true, and clockwise when false.

Gradients

We can fill a shape with a color gradient, which means that a filling can start using one color and end with another. To do this in Canvas, we create a gradient using the “createRadialGradient” method, in which we specify two circles. The first circle is where the color is going to begin changing, and the second one tells Canvas where the color gradient is going to end. To declare every circle, we pass the X and Y coordinates of the circle’s center and radius to the “arc” function. Take note, the gradient could use other fillings if needed.

var grd = context.createRadialGradient(190, 60, 15, 190, 80, 50); //x1, y1, radius1, x2, y2, radius2.

Once we have declared the reach of the gradient, the next step is to set the gradient’s colors. We do this by using the “addColorStop” method, which requires two parameters. The first one is the “stop” or the point in which the color will begin. Stops go from 0 to 1, so make sure you distribute your colors between those numbers. The second parameter is the color we want to paint on that stop.

grd.addColorStop(0, '#F00');
grd.addColorStop(.2, '#FF0');
grd.addColorStop(.4, '#0F0');
grd.addColorStop(.6, '#0FF');
grd.addColorStop(1, '#00F');

To assign our new gradient to our shape we use the “fillStyle” method to tell the context that its filling is going to be the gradient we just built. Finally, we invoke the “fill” method to tell the context to fill the shape with the gradient.

Example:

context.beginPath();
context.arc(200, 100, 35, 0, Math.PI * 2); // A regular circle figure.
context.fillStyle = grd
context.fill();

6

And you’ll get this result.

Ellipse

For ellipses, use the “ellipse()” function, which requires the following parameters: (x, y, radiusX, radiusY, rotation, start angle, ending angle, anticlockwise). The rotation parameter indicates how much will the ellipse turn on the axis. In radians, as usual.

Here’s an example:

context.beginPath();
context.ellipse(200, 100, 50, 20, 0, 0, Math.PI*2);
context.stroke();

7

And this is how it would look.

Line

We use the “beginPath” function to declare that we are about to draw a new line path. Next, we use the “moveTo” function to state the starting position (imagine that you are moving a cursor). And then we use “lineTo” to draw a straight line from the starting position to the ending position. And finally, we need to call stroke() to “paint” through the covered path.

Example:

context.beginPath();
context.moveTo(75, 50);
context.lineTo(350, 180);
context.stroke();

8

The result.

A pretty cool thing we can do with Canvas is to render an image. We can draw an image directly from an existing image element within the HTML document or use an external picture.

In order to use an internal image element, we have to include the image element with a specific ID inside the document.

<code><img id=”dog” src=”http://3.bp.blogspot.com/-lCei4CIR7J8/UOXuPWztz5I/AAAAAAAAAAw/iNkkVQzUV88/s1600/cute_little_dog_wallpaper-1024×1024.jpg” alt=”Dog” width=”100″ height=”110″></code>

Then, we get the image element by its ID using Javascript, and use the “drawImage” method to render the image in the canvas:

var img = document.getElementById("dog");
context.drawImage(img, 110, 0, 180, 200);

In this case, the “drawImage” method has the image element as its first parameter, then the X and Y coordinates, and finally the width and height of the image in the canvas. Also, you can see that the original HTML element is visible, so it is recommended to hide it.

9

This is the result.

But, if we want to use a picture that is outside of our HTML document, then we have to create an object of the “Image” type first. Then we can assign it an external source path. We invoke the drawing method on the “onload” event of the image so the picture can draw itself the moment it’s fully loaded. If we don’t do this, the drawing method may fail because the picture won’t load when the drawing method is invoked.

var image = new Image();
image.src = "http://www.mycatspace.com/wp-content/uploads/2013/08/adopting-a-cat.jpg";
image.onload = function(){
context.drawImage(image, 100, 0, 200, 200);
};

10

This is what you get with the code above.

With Canvas, there are no limits to your creativity, just let it flow…

If you want to avoid repetitive tasks, there are some frameworks that can help you speed up your work. Some of them specialize in picture handling and others in making charts or creating filters and effects. Take a look at FabricJS, ChartJS and PaperJS if you want to explore these possibilities.

Another great feature of Canvas is that you can create graphic content in real time, and even respond to user events. A couple of final tips: remember that in order to start/reset a path you need to call the “BeginPath()” function. Here’s a pretty useful cheat sheet with frequently-needed code, and a live example you can use for experimentation purposes.

We hope you found this post useful! Let us know what you think in the comments section.

Thanks for reading!

J.

0 10 Continue Reading →