Skip to Content

Category Archives: Development

Learning Scrum is easy, following it not so much.

A couple months ago I heard one of our team members say that “Scrum wastes a lot of time on meetings” and that “most of them are not even necessary”. If we look at this idea from the developer’s point of view it’s understandable, being part of a Scrum ceremony, listening to everyone when sometimes the topic has nothing to do with her role or feature, might seem boring. But did you know that a single team member can screw up an entire project (even without noticing) by not following a scrum process correctly?

According to the methodology, there are some events in which the developer has to participate, but there are other equally important tasks that the developer needs to do to help with the larger development process. In this post, I’d like to do a quick review of the five ceremonies of Scrum to help us reconsider their value.  So, first things first, let’s begin with…

Definition of Done

Contributing to the creation of the definition of done is important for a successful development process, since having an unclear definition might cause misunderstandings, eg: miscalculating the remaining work for each feature, incorrectly estimating the features at the beginning of the sprint, or not being clear on if a story should be delivered within a sprint or not.

The team shouldn’t make the mistake of leaving a single person (usually the Scrum Master) to write down the definition of done. Making a good one is a shared responsibility between all the team members and the Product Owner.

To accomplish this step all the team members should share their opinion about what should or shouldn’t be part of the process of delivering a feature based on their experience and their team dynamics. For instance, if their experience says that they should do TDD or that the team works better with small pairing sessions instead of pull requests for code review, they have to share their thoughts to make a Definition of Done that fits their specific needs.

On one occasion, on the last day of a sprint, one of the team members finished a feature he had been working throughout the sprint. He could not deploy it to the staging server since on that day there was nobody that could review his code. During the daily stand up he didn’t report it as an impediment because, from his perspective, the development process had ended when the coding phase had finished. At the end of the day, when the Product Owner checked the work from a local computer, and in spite of the fact that the feature was technically working, he considered it to be useless because he wasn’t able to show it to any stakeholder for testing. When I was asked for my opinion (and observing it from an external point of view) it was more than obvious that there was a failure in the definition of Done. For the Product Owner, it was required that a feature was on staging to marked as complete. Unfortunately the development team never had it clear.

After talking about the situation, the team stipulated in the definition of done that in the case that a code review couldn’t be performed, the developer would have to do a code refactor by himself. But for a feature to be considered as completed, it must have been deployed to staging.

After all, there is no “correct” or “incorrect” definition of done, but there is a correct way to go about defining it. Collaboration is necessary.

Backlog Grooming Meeting

In this ceremony, the developer will clarify all the stories in the backlog and should accept or reject them as a part of the next sprint.

Backlog

  • There can be no trace of doubt afterwards: The developer has to remember that the stories presented in the backlog grooming are items that she will be working on sooner or later. It’s very important to clear all doubts and vague concepts no matter what, and be aware that there are no stupid questions if they help to fully understand the stories.
  • Technical challenges: When the developer is asking questions, it is also important to think about their implementation. For instance, the knowledge that she has about certain tools or programming languages. Sometimes, there are technical limitations that won’t allow for the development of a story as it was designed initially.
  • Take a look at the current code base: It might happen that the Product Owner asks for a feature that sounds easy to implement, but when the code is analyzed the realization comes that it will be much more complicated than originally thought, because of the current code base. If a development team keeps the big picture in mind, they will have a better idea of how to implement each feature and be able to ask smart questions based on that.  It is easy to fall for this when new team members enter a project, or when the team starts working on a part of the application that hasn’t been touched for a while.
  • The team has the control: The team needs to remember that they can reject the stories if they are not well described or if they can’t be developed with as requested. Even when the story is simple to the naked eye, it’s always better to write at least one acceptance criteria.

Sprint Planning Meeting

As we’ve already seen, it’s important to answer any questions that the team may have about the stories. Once every question has been resolved, the team will proceed to estimate the stories. Regardless of the estimation method, there are some points that every team has to consider for a proper estimation.

  • Make conscious estimations: It is always a headache for the development team to make a precise estimation for the stories, however it is important to try our best to avoid over or underestimations. That’s because, down the road, the team will use those stories for reference purposes, and if they are not even close to reality, future estimations will be affected.
  • Keep in mind the Definition of Done: once the team is doing the sprint commitment, it’s easy to forget about the definition of done. It is essential to always keep in mind the whole set of steps that make up for it to avoid over-commitments.
  • Looking at the history: It is necessary to consider previous sprints as a reference for the incoming commitment.  A useful rule,  do not make a commitment of more than what has been delivered on the previous 3 sprints.

 

Daily Standup

The daily standup meeting might be the most important ceremony in Scrum since it’s all about keeping the team coordinated between them. This is the moment when the team can share to each other about the progress made, impediments, achievements or any relevant situation that the team needs to be aware of.

  • Believe that somebody else can help: it is very common that one of the team members can’t realize that he has a blocker. This is where the Scrum Master comes to the rescue. It is important to be humble here and remember that the Scrum master is the one that is overseeing the process and he can easily discover when somebody needs help.
  • One step at a time: another good practice here is to use this event as a “commitments ceremony” to be able to determine if a story will require support from the Scrum Master. If the team members make small commitments on a daily basis, it is easier to remain focused on the sprint goal.

 

Sprint Review

At Tangosource, instead of having a meeting for this at the end of each sprint, we have daily reviews done by the Product Owner.

Sprint-Review

We have a golden rule when testing and reviewing: “Go by the acceptance criteria”. It sounds obvious, but it’s easy to forget sometimes. Before delivering a story, we make sure that we have double checked that every criteria has passed. By following this golden rule, the development team ensures that the story is achieving the goals that the Product Owner wanted, lessening the possibility of having a rejected story.

Sprint Retrospective

In Scrum, each ceremony has its own importance, and this also applies to the sprint’s retrospective meeting. Once the team has finished the sprint, it’s time to talk about what just happened. There are many ways to do this, but the one we have found to be very useful is answering three simple questions:

  • What should we continue doing?
  • What should we stop doing?
  • Are there any ideas to improve as a team?

A common mistake is to skip this ceremony under the excuse that is not as important as the other ones, and that the team can use that time for a more meaningful activity. But remember, if something went wrong during the previous sprint and the team didn’t have a discussion about it, chances are it will happen again soon. I saw one example of this when a team had had a couple of sprints without delivering much value. From the Scrum Master’s perspective, the obvious reason was because the Product Owner was adding features at the middle of the sprint. Because of the rush, the team had been skipping the retrospective for 3 weeks in a row under the excuse that there were urgent bugs to deliver. When I was invited to analyze the situation, I gathered all the team members to talk about the project’s issues, and one team member wrote down that the technical debt of the project was making it difficult to incorporate new features. By talking about that, the team realized that they should have focused their effort on solving that situation first, and that once they had solved it, adding features  mid sprint was not going to be a problem anymore.

After a couple of sprints I took a look at the project again, and it turned out that they were delivering features and that the sprint disruptions reduced a lot. We can see here that the Sprint Retrospective is a valuable ceremony for the Scrum process, and that if the team talks about the issues that they are having, they can improve their performance and the value delivered each sprint.

Final thoughts

It is true that the Scrum Master is the guardian of the methodology, and that he or she should lead the process, but a successful project involves more than excellent work from the Scrum Master and well defined requirements. Scrum is a methodology that helps the team to succeed in the software development process, but it requires that every team member is committed to support it.

Thanks to my friend and co-worker Jonatan Juarez who contributed on the creation of this post.

Want to know more about running Agile on your organization? you can contact me by e-mail or follow me on twitter

1 9 Continue Reading →

Testing your application on IE with Mac OS X

Today I’d like to show you how to test your web apps on Internet Explorer by binding a Virtual Machine running Windows with Mac OS X. I’ve learned to do this by experience and I thought some people might find it useful.

What I will cover:

  1. Binding the Virtual Machine with Mac OS X
  2. Testing once you have setup VirtualBox.
  3. Fixing CSS3 and HTML5 compatibility

 

So, let’s get started…

Binding the Virtual Machine with Mac OS X

  1.  Install virtual box on mac (https://www.virtualbox.org/wiki/Downloads)
  2. Create the partition and install Windows in your VirtualBox machine, this is going to be your Guest OS (Windows). You can follow this guide to see how to do it.I recommend assigning 4GB of RAM to your VM if possible, otherwise it could run very slow.
  3. You need to be sure that your Guest Machine’s network adapter is attached to the NAT and to do so, go to your VirtualBox app in the Host OS (Mac OSX) and then click on “settings”, after that click on “network”. Make sure that NAT is selected in ‘attached to’ field.

There are two ways to check the address of the application:

Using Pow

This is the the approach you have to follow if using domains and subdomains is a requirement in your app.

  1. Install Powder gem in order to link your projects and navigate on the browsers as “real” domains. Open your terminal and go to your project and code “gem install powder” then “powder link”. Now your application is available at http://your-app.dev/ finally open your application with “powder open”
  2. In order to see the application with the “real” domain you have to add an item to the hosts file. Go to your Guest’s OS and add the host to the list.Here’s how: http://www.rackspace.com/knowledge_center/article/how-do-i-modify-my-hosts-file

Without Using Pow (two ways)

You can use your Host OS’ IP address directly to configure your Virtual Machine doing this:

Using the IP directly
  1.  Go to your “terminal” in your Host OS (Mac OS X) and type “ifconfig” in order to get the ip (copy the ip next to the “inet” word in the “en1” block).
  2. Copy the ip in the address browser with the port that you are using. For example: http://192.168.1.212:3000 (where 192.168.1.212 is the IP address and 3000 is the port where my app is running).
Assigning a static ip to the guest OS (recommended)

I recommend this option to avoid having to look at your IP address every time you are running your Virtual Machine.

  1.  Follow instructions on this link. If you don’t find the vboxnet0, check how to fix it on this link, and if you have an error trying to add the vboxnet0 network then execute this in your Mac terminal: sudo  /Library/StartupItems/VirtualBox/VirtualBox restart.
  2. Now check that your Guest OS is linked to your Host OS by typing the next IP address in your Guest OS browser’s address bar: 192.168.56.1. If everything worked you should see your Host OS’ localhost (make sure your localhost is running in your Host machine).
  3. As a fancier option, you can do this: in your Guest OS click on the Windows icon and then do right click on Notepad; select Run as administrator. In Notepad click on the File menu and then Open, after that paste C:\Windows\System32\drivers\etc in Notepad’s address bar. Once you are in \etc select the All files option so you can see the host file. Select host file and click open. Add an alias for 192.168.56.1, that way you can use domains in the Guest OS’ browsers instead of using the IP address. Don’t forget to specify the port right after the new URL in your browser, e.g. http://mylocalhost.com:3001.

 

As a final tip, pay attention to browser’s address bar if you are working on a project that is composed by several apps using the same domain. You have to make sure that you remain always under the same domain (the one you added on your host file in your Guest OS), otherwise communication between your apps will break. In my experience, I was working on a project that apparently was not working, but that was because requests from myapp.com:3000 were not being delivered correctly to myapp.com:3001 and the issue was that myapp.com:3000 was sending requests to anotherdomain.com:3001.

Testing after setting up VirtualBox

Testing and fixing styling issues is not that hard. Next I’m going to mention some libraries and tips that will help you to fix cross-browsing issues.

  1. Install utilu, which allows to have multiple standalone versions of the IE browser. Also install IE9 on your Guest OS.
  1. Open the website on IE and Google Chrome then make a comparison between them. Try to identify two main things (navigate through the application page by page), functionality and styling. Functionality could be video playing function, clicking a button and seeing what happens, styling could be that the buttons are in the wrong place, the border looks different, etc.
  1. Navigate through the application page by page and take screenshots of the issues that you find in the revision if they are styling issues. It there are functionality issues then write a description about what the bug is and how to reproduce it (it could be an issue related to Javascript for example).
  2. When you are navigating page by page start the debugging mode on IE, pressing F12 and then selecting the “script” tab. Look for errors related with Javascript that could break your loading page. Also, can check the HTML, CSS and network outputs in order to see if something is wrong.
  3. If you already detected the differences, I recommend you to write them down so you can track them. Since I use pivotal what I do is to open a new ticket for each issue I find.
  4. If you already tested the application on IE9 you can also check the application on “compatibility mode”, to simulate the IE8 version with IE9 by selecting “document mode: IE8 standards” and “browser mode: IE8’. Those options are in the developer tools window (see screenshot).

 

IE developer tools

IE developer tools

 

Now you can test your application on IE7 to IE8, just one thing to keep in mind: what you will see is not an exact copy of what you would see if you installed IE8 or IE7. It is only an approximation. It can help you detect some bugs in a easy and fast way. It’s better and recommended to install the real version or each browser and test the application there.

Fixing CSS3 and HTML5 compatibility

  1. If you detect that some elements (buttons, inputs, text) are in the wrong place, you could check the HTML code using “developer tools” from IE browser (pressing F12).
  1. Inspect the element that is malfunctioning and see the HTML code, check that the code is correct. Remember IE8 doesn’t support HTML5 tags. Like this one:

This is the code that you expect:

<header>I’m Header Text</header>

This is the code that you really have on IE8:

</header>

To solve this problem you can include HTML5 Shiv library inside of your <head> tags.

<!--[if lt IE 8]>

<script src=”html5shiv.js”></script>

<![endif]>

The next example shows how the site looks when you are and when you are not using this library.

Difference between Shiv and Pie

Difference between Shiv and Pie

  1. The next step is checking the CSS3 properties. As you probably know, IE8 doesn’t have the same rules as Moderns browsers, IE8 doesn’t support css3 properties. The solution to fix this kind of issue is installing Pie as a JavaScript library (same as the shiv library inside of <head> tags). In this way we are going to be able to use properties like border-radius, box-shadow, etc.

 

NOTE: bear in mind that those libraries help to improve the style of your website and make your site more compatible with IE, but there are some little variants. For instance, in the box-shadow tag it is not possible to add alpha transparency because it is not supported by the library.

The left image shows how the site would look with the Shiv and Pie libraries.

The left image shows how the site would look with the Shiv and Pie libraries.

  1. Speaking of functionality, you have to check the behavior of your application and make a comparison and fix one issue at the time. Try to be patient and get help from the “developer tools” that IE provides.

 

Some notes:

  1. Look for errors in the “script” console of the developer tools.
  2. Remember that IE does not support some Javascript methods because it runs an old JS version.
  3. Remove “console.log”, it could break your code.
  4. If you are working with videos you can use video.js in order to make videos compatible with IE, using fallbacks. Remember, use a link when flash is not installed instead of an image.
  5. Test your application and make comparisons about the missing elements, and also test in modern browsers because you could break your code without noticing.

 

Well, that’s it! I know it was long but I think it can help someone out there. Please let me know if you have any feedback in the comments section below.

Special thanks to Jaime Gonzalez, who contributed with the creation of this article.

0 4 Continue Reading →

Creating a continuous integration server in a hackathon, and how to make SSH connections using ruby

Rails Rumble wrapped up recently and with that, the end of an exciting 48 hour experience where developers can challenge themselves, prove all their programming skills and create an awesome product from an idea.

This is the third hackathon I’ve participated in since I began working as a professional programmer, and I wanted push myself and create my own version of a continuous integration server.

While creating a continuous integration server we went through a lot of challenges, from user experience design to interesting architectural decisions, but one of the most challenging and interesting situations I went through was running the build jobs from a repository in a virtualized environment. At the very beginning we realized that the safest way to run the tests for a given repository was to isolate the test environment from the web server environment due to because of security risks, so we decided to setup the architecture in the following way:

 

CI2

 

 

 

The idea was to connect to a remote (virtualized) server over the SSH protocol and run the script with a provisioned environment (ruby, rvm, rubygems, postgresql, sqlite, mysql, etc.). We spent some time researching how to connect via SSH using ruby and found a library called Net::SSH which allows you to create SSH connections easily and execute a command. We did some tests and it worked but unfortunately it was very hard to navigate through folders and request a bash environment just like a normal SSH connection from the UNIX terminal, so after a long researching, testing, and reverse engineering many open source projects that use Net::SSH we decided to create abstraction layers for each of its components (use-cases).

 

CI3

 

 

By giving single responsibility to each of the classes we were able to easily build the programming interfaces on top of the CI module (see SOLID).

The simplest case scenario, you can connect to a server just by instancing the objects from the top level class of the CI module as following:

Pretty easy, right? Let’s take a look inside the module:

This class is only responsible for setting up the connection parameters that Ci::SSH will handle as a connection string, so we have encapsulated the Ci::SSH work in a lower level of the Ci namespace. You can actually use it outside the Ci::Environment class but you have to customize it as seen in thedef initialize method above. Now let’s take a look at how the Ci::SSH works.

By defining these two classes the usage of Net::SSH becomes pretty straight forward:

By the end of the hackathon, all this made communication possible between the continuous integration environment and the UI. We connected the shell output to a websocket using the pusherservice, so we could push notifications from the server in real time to the user; you can see it live by visiting the actual project from RailsRumble Simple CI.

Questions?

Let me know via comments on this post or via email antonio@tangosource.com.

0 0 Continue Reading →

What? Rails can’t hear you? Use Flash!

First I’d like to mention that this post is not for beginners, that means that I’m assuming that you know about programing with Ruby on Rails (for this post I’m using Rails 3.1) and some of Javascript. If you don’t know Rails or JS at all, you may need to do some research about the terms and instructions I say here. With that said, lets start!

Have you ever needed to record and save user’s audio by using computer’s microphone using Rails? If so, I bet you realized that there is almost no information about how to do this using Rails.

The Story

I was working in a project where the customer needed to implement a feature to allow users to record his voice by using his computer’s microphone. I thought “this can’t be that hard, there is HTML5 now,” but I had no idea what I was talking about.

Researching: HTML 5 or Flash?

I started researching about HTML5 and it didn’t take me that much to see that HTML5 is an “still in progress work“ when it comes to record live audio. The browser that currently has the best implementation for HTML5 audio tag is Chrome, and yet it needs the user to configure some of its flags for this tag to work properly, so I discarded HTML5 as an option.

I continued researching and soon I started reading in many posts that the best approach to accomplish what I was trying to do was by using Flash in the client side. I know, I don’t like Flash either, but lets face it, most browsers support Adobe plugins and this is better than having the application working only in Chrome, so I decided to give it a shot, and took the Flash & Rails path.

Once I decided to go with Flash, the next impediment I had was that I’m not a Flash programmer, but that was solved when I bumped into the jRecorder plugin (I want to thank to Sajith Amma because he certainly saved me hours learning Flash). jRecorder is a plugin that uses a Flash object to get access to user’s microphone and records the microphone input. This plugin has also an API built in javascript to initialize and interact with the Flash object.

Ok, enough background, let’s jump into the interesting part:

Coding

Download the jRecorder plugin, and unzip the file. You’ll see 7 files; the ones we need are: jRecorder.js, jRecorder.swf, and jquery.min.js

In your Rails application:

Explaining the code

This is the DOM’s object where the flash object will be inserted.

The js code is actually the constructor of the js object that will interact with the Flash object (we can say it is a sort of an API). You can read the documentation of the plugin here, however there are 2 parts that I would like to explain since the example that our good friend Sajith implements is in PHP and you may get confused:

In ‘host’ we are defining the route where we want to receive the recorded audio, in this case, for my application <%= audio_path %> points to a controller named audio in the action upload_file that we’ll use to save the audio file. You can create a different route, just make sure it uses the POST method because we are sending information to the server, and filename=audio.wav is a parameter that contains ONLY the name (that means NOT the recorded audio). The result of “<%= audio_path %>?filename=audio.wav” would be something like ‘/audios/upload_file?filename=audio.wav’.

The other interesting option that you need to translate in the example from PHP to Rails is ‘swf_path’. This option is where you set the path of where jRecorder.swf object is located, and all you have to do is to use Rails helper ‘asset_path’ and pass to it the name of the flash object.

At this point we are done with the client side.

Jumping into the backend

Go to the controller that responds to the route that you specified in ‘host’ parameter in the js code, in my case it’s the action upload_file in audios_controller.rb. If you already read the jRecorder documentation that means that you’ve seen this:

(PHP code)

This code is very self-explanatory and you can infer that all this code is doing is receiving the recorded audio, opening a file, writing the recorded audio, and closing the file. Now, what is the equivalent code in Rails? Here it is:

The interesting line here is ‘request.raw_post’. That line contains the actual audio recorded by the user that was sent by our view using the plugin. That line is the equivalent of ‘file_get_contents(‘php://input’)’. Also check that we are opening the file with ‘b’, which is very important because the file we are reading/writing is a binary file (otherwise you’ll face encoding issues).

That’s it! You should now have the file stored in the root path of your application!

Improve it

Depending on your application, there are many things that you can improve, like converting the file from .wav to .mp3 or .aac formats using Zencoder, uploading the file to S3 buckets, implement background jobs to save the audio, etc.

Got questions?

Let me know in the comment section below.

0 0 Continue Reading →