Skip to Content

Blog Archives

Dev jobs: A microservices architecture journey

Recently at Tangosource I was assigned to work on an internal project named Dev Jobs (see dev jobs on iOS and dev jobs on Android), where I had the chance to work next to great teammates and implement a microservice architecture with Ruby on Rails, nodeJS, JWT, Ionic, Docker, and several testing tools, including RSpec, Mocha, Frisby, and Protractor. In this first post, I’ll explain the basics of the microservice architecture.

What is a Microservice Architecture ?

Martin Fowler gives a great definition.

[1]“The microservice architectural style is an approach to developing a single application as a suite of small services, each running in its own process and communicating with lightweight mechanisms, often an HTTP resource API. These services are built around business capabilities and independently deployable by fully automated deployment machinery. There is a bare minimum of centralized management of these services, which may be written in different programming languages and use different data storage technologies.”

The Problem

Let’s have some context. We are building a server side application that must support different client side platforms such as:

  • Desktop browsers
  • Mobile browsers
  • Native mobile applications

 

Also, we need to consume an external API service. In our case, Linkedin through Oauth2 for authentication. And the ability for users to chat between each other.

On an architectural matter we still had to decide between monolithic or microservice. So let’s dig a little more on this two.

Monolithic vs MicroServices

Monolithic

If we take this approach, we need to keep the following in mind:

  • Build one application to rule them all.
  • Use one language ( Ruby, PHP, JavaScript, etc. ) we could not take any extra advantages from other programming languages.
  • The architecture needs to be flexible enough to support API through AJAX and render HTML.
  • The development team needs to feel comfortable with the language we picked.
  • Security. We will have a public API to serve mobiles/clients.
  • Best tools for RTCP. So we can have a nice looking chat
  • Testing. build testable code

 

I have seen great monolithic architectures that can support all of this. One of my favorites is RoR engines based or nodeJS services based applications.

MicroServices

In the other hand, if we go for MicroServices we must take in mind the following:

  • Delegate responsibilities in small applications.
  • We can use different languages per service. Which is the best choice per responsibility?
  • How are we going to communicate each service ? Normally with tcp/ssl.
  • How are we going to persist Data through services?
  • Security: Protect the services.
  • Testing: Test all microservices.

 

On a personal note, as a developer working on a microservice platform, I can focus only on the technical details wrapping a specific service. This does not mean I should not understand the whole set of services as a unit.

“Any organization that designs a system (defined broadly) will produce a design whose structure is a copy of the organization’s communication structure.”

— Melvyn Conway, 1967

Having this in mind, we had to start by making technical decisions, such as how to protect our API, how to manage RTCP, by nature HTTP is stateless which means is sessionless so for our case we had to maintain a session through tokens ( JWT ), at first we though maybe nodeJS for RTCP since nodeJS is strong for DIRT ( Data Intensive Real Time )  apps. But we had not only had to take care of the tech devs but also for dev resources, currently at TangoSource we have strong Ruby on Rails devs so we had to work all together and take advantage of the expertise of each team member, our best bet was to use RoR for business logic, and take advantage of nodeJS. So the combination of RoR and nodeJS makes the solution solid and strong.

Solution

For this particular project, we decided to go for the MicroService and have some fun! The first thing that we needed to figure out was defining the responsibilities per service. So we end up with 4 microservices.

  • Ionic
    • More than a service, it’s the client side of the application. Ionic by itself is a front end SDK for hybrid mobile apps using AngularJS.
  • IDP
    • Responsible for (a) providing identifiers for users looking to interact with a system, (b) asserting to such a system that such an identifier presented by a user is known to the provider (c) possibly providing other information about the user that is known to the provider.
    • This may be achieved via an authentication module, which verifies a security token, and that can be accepted as an alternative to repeatedly and explicitly authenticating a user within a security area.
  • SP
    • In charge of persisting all user’s data, including interaction with the system. This service will contain all the business logic
  • Chat
    • In charge of establishing real-time communication among users within the system.

 

We decided to protect the services with JWT

Architecture

devjobsarchitecture

Each square represents a service, and the lines are how they communicate between each other.

Ionic : This might be the most critical service of them all, but not the most important. We have 3 main components:

  • Ionic server
    • An HTTP server in charge of sending all the assets ( HTML, CSS, JS ) to the next component.
  • Ionic Cordova
    • A Mobile SDK, which provides the user’s interaction with the app, and consumes the rest of the microservices as resources. This component runs on top of 3 different type of devices.
      • Android
      • Ios
      • Browser
  • Ionic App
    • Ionic admin panel, this panel allow us to configure GCM and APNS exposing a protected API.

 

IDP : This service is in charge of giving identity to a component/user. This service will expire a valid token with a component/user’s basic information on the JWT’s payload. Similar to memoization, this service will keep track of sessions using Redis on a basic TLS connection. Thanks to the RFC 7519 standard, this service can scale in other microservice based architectures and be reused.

SP : This is an API/Https service protected with JWT. This micro service is in charge of persisting all user’s interaction/information using MySQL with a standard TLS connection. It also manages the business logic.  

Chat : This microservice will provide real-time communication between users. This RTCP (real time control protocol) is being protected with JWT on the handshake process, and persists the communication activity on MongoDB, a NoSQL database.

Conclusion

Taking these kind of decisions is not simple. It requires a lot of experience in order to compare libraries/languages, you must at least know how they work, and it’s even better if you have used them. Remember that you will not build this by yourself, you are part of a team. It’s smart to sit with your team and discuss each individual’s strengths and weaknesses in order to make the best tech decisions.

DO NOT mix responsibilities of the micro services, instead identify your services. Add all the needed documentation to help the team such as /*Comments */,  READMEs, and Wikis.
A microservice architecture is not always the best approach, and could be painful if you are not careful.

3 8 Continue Reading →

Developer levels: the right skill set for the job.

Back when software was developed in Fortran and C, you needed a lot of knowledge to write anything of significance.  Originally, Fortran lacked even the concept of a data structure [1].  In the 1990s, an array was a contiguous chunk of memory containing a fixed number of structs or of pointers. Alternatively, one could create a struct where one field was a pointer to the next struct in the array, a true linked list.  You had to write all the code that manipulated anything.  You had to decide if an array or a linked list was best for each situation.  You had to decide if you were gonna use Quick Sort or needed a Heap Sort or if a Bubble Sort was more than enough.

Additionally, there have always been design patterns and the insight to know when to use one over another; the need for an understanding of programming languages and their compilers which affect everything we do; as well as the operating systems on which everything is built.  This list is long, going down deep all the way to discrete applied mathematics and probability.  There is a lot one can know which affects the quality of the software we write.

Today, everything has changed.  Languages do more and more.  Frameworks are getting better and better.  With Ruby on Rails, inexpert coders have so much functionality built into Ruby and even more built into Rails.  Given the objects which contain data structure and an astonishing amount of algorithms and code doing so much of what you need. The ORM with migrations, algorithms and code doing almost all the database management you need, and generators which create boilerplate code inside an opinionated MVC layout, one can write a pretty complete web application while writing surprisingly little of the actual code.  It can be quite some time before one really must make a deep technical decision which one used to make from day one.

This has changed the nature of writing software.  Back then, no company would hire someone after nine months of training let alone nine weeks … but that happens now and reasonably so.  It is perhaps analogous to the difference between a mechanic who can work with a car and a mechanical engineer who can design a car.  An upshot of this is the question of how do we categorize people writing software. When asked, I figure software people, particularly those who write applications, generally fall into about 3 categories.  This post is in no way scientific. It is written in a definitive voice but understand these are generalizations. This is just for the sake of starting a discussion and being analytical.  I have no proof.  Your mileage may vary.

Coders

Coders know how to … code.  They may no longer be muggles but they are more Ron Weasley than Hermione Granger.  They might know a few incantations but there’s still a lot of smoke.  They often use examples or starter apps.  When hitting a roadblock, which normally comes with an error message, they will put that error message into a search engine and see what comes up on StackOverflow.  They find a solution that sounds good and try it.  If that one fails, they try another. Eventually one works.  They can’t really own their code because so much of it is still magic to them. But, they can write serviceable code that works the way it should work.  Their knowledge is usually narrow, shallow and limited [2].  It should be said most are voracious and learning quickly about all the stuff they don’t know.  They do well in a collaborative team environment especially when they get to pair.  Many will go on to be solid developers.

 1

Developers

Developers have a much broader understanding than Coders of the frameworks they use and languages in which they are written.  They understand their code.  When it breaks, they generally know why and can often fix it.  They understand objects; how to write a good one and, preferably, how to test it well.  They understand where the magic lies and often how it works.  They have an understanding of the underlying technologies (SQL, HTTP, SSH, Unix, etc.) and how to work with them directly.  As they become more senior they will know more about more technologies and understand how and when to use them.  Their knowledge is still clearly limited.  They might know a lot about one area, technology or layer and know little or nothing about others. They do not have the knowledge and experience to architect complex systems well but can build well thought-out features that cut across much of an application and know how to refactor properly to bring simplicity and elegance to a complicated design.

 2

Engineers

Engineers have deep knowledge of most every layer of the system on which they work from the OS and servers on which things run, the compiler that munches their code, through to the languages they use and the frameworks on which their products are built.  They understand patterns and architectures, can determine which is best at this moment and can explain why.  They know where the magic lies and understand how it is implemented and how to extend or fix that magic.  Whereas they often have a degree in computer science, there is a growing number who do not, who have delved in and taught themselves.  They understand their code as well as the underlying technologies and they also understand the theories behind why things should or should not work a particular way.  This gives them the facility to fully understand and design architectures as well as solid objects and well-thought-out tests.

 4

 

So?

When building a team to build your applications, you must know what mix of skills you need and who can provide those in the same way Ford or Tesla will have a mix of skills on a team creating a new car, some deep engineering skills, some mechanic skills.  There are many senior engineers who can architect and understand objects but have fewer skills at coding than some coders.  Many ambitious coders know the mechanics of a specific technology and can, especially with oversight, use that technology more effectively than others with more overall experience and knowledge.  Personally, I have found pairing two such people (one with more specific tech knowledge and one with more in-depth knowledge) can be very powerful.  They can learn from each other and your team gets stronger faster.

We must understand who is who, what to expect from each, how to help each grow to their potential and how to get the best code our team can build.  These are complicated enough that each should be another post in what I expect will become a series.

It is a brave new world in which we build applications. There are amazing advances in technology that allow us to build a better product faster than we could ever build in the past.  It has created the opportunity for many more to be able to contribute in meaningful ways.

Thanks for reading!

This is the first of a series of guest posts by Ken Decanio, a software engineer, architect and product manager.  If you would like to read more of his work, you can find find it at his blog.

 

 

[1] Ask me about the DD Array someday.

[2] Actually, it is preferable that a Coder’s knowledge be narrow and focused but that’s another post.

 

 

Photo credits:

  1. http://www.libstock.com
  2. https://www.thefirehoseproject.com
  3. http://www.intelliware.com
2 6 Continue Reading →

The Scrum retrospective meeting: an introduction.

Some people underestimate sprint retrospective meetings and think of it as simply the time when a sprint ends and they can move on to what’s coming next week. But in reality, this meeting provides an opportunity for the team to identify relevant action items to improve their performance. This is the moment where the team can meet and examine each other’s performance for the sake of the project. It’s also an opportunity to update and improve the team’s definition of done.

There are many ways to lead a retrospective meeting. I’ll share with you what has worked for us.

At the beginning of each meeting

Make the purpose of the meeting clear for everyone. If this is the team’s first retrospective meeting, it’s important to define how it will work and mention the rules. The Scrum Master (as moderator) should make sure that everyone has their say.

A brief summary…

Refresh everyone’s memories about what happened during the sprint that just ended. Offer a brief summary of the most important events of the ending sprint. You could also merge this part with the next section (the brainstorming part). The team can share their ideas and opinions while the Scrum Master tells them about the most important events that occurred during the last sprint. In this way, they could express their thoughts while remembering the events.

Brainstorming

This is when the team refers to tasks that went well, could have been done better or went simply bad. Those three areas can be called differently depending on your approach, we personally use:

  1. Start doing
  2. Continue doing
  3. Stop doing

 

The areas could be tools and methods, communication, working styles, processes, etc.

In my experience, people can lack the confidence to be straightforward and say what they really think about an issue. The Scrum Master should try to elicit their thoughts and help them express themselves. Tact is important here. You need to choose the right words to avoid being offensive when referring to the way that people do certain things. Being indirect can also help, by talking about the issue and not the person who caused it.

Room for improvement

It is important to have action items for every identified issue. And the Scrum Master should make sure that she follows up on each of those. Some people suggest focusing on only a couple action items per sprint.

Closing the meeting

Here is where the Scrum Master gives a brief summary of what was achieved during the meeting. Thank everyone for their time and energy invested in this important event. They should reflect on the way the meeting was conducted and find ways to improve it if necessary.

I personally believe that leading a retrospective meeting is part psychology and part engineering. You have to know how to work with people, communicate effectively, and manage communication among the team.

We have developed our own tool to manage retrospective meetings (as well as pointing sessions): TangoSource’s Planning Poker. We invite you to use it and tell us if you find it useful, and if you have any suggestions. You can read more about it in this other post from us. Plus, it’s free!

planning-id-01

 

We also offer Scrum project management consulting, shoot us an email at contact@tangosource.com if you want to hear more.

Thanks for reading! Let me know how your experience has been with retro meetings (and any tips or tricks you might have learned) in the comment section below.

F.

1 4 Continue Reading →

Benefits of WordPress + Docker in a production environment + troubleshooting guide.

Hello,

Even though we are a Rails development team, we use WordPress for our blog. We love Rails, but WordPress provides a robust solution for our blogging needs. And lately, we have been experimenting with Docker + WordPress.

So, why Docker?

There are quite a few straightforward reasons why we use Docker with WordPress, namely:

  • Docker reduces clutter.
  • We can run a couple of Rails applications and WordPress instances on the same server.
  • It helps with version conflict management in Rails apps
  • It allows for the duplication of a production server into staging for testing purposes.

 

We can “dockerize” an application, run it in our laptops, run tests and then deploy with confidence that it will work. If you are new to Docker, you should read What is Docker and Dockerizing applications. So, the plan is to apply this process to our application. However, I found some issues while building the instances. I would like to share those issues and how I managed to solve them.

Creating a WordPress instance

There are multiple instances ready to use on the Docker hub.

Try a simple search. I first tried this instance but didn’t like the lack of documentation, and that I wasn’t able to save the uploaded files in a persistent volume. Then I tried this other one but wasn’t able to modify wp-config.php without some hacking. So, I built my own WordPress image instead.

Dockerfile

This file is responsible for creating the docker instance. You can check the Dockerfile instance here. Let me explain each line, so that it all makes sense.

I created a base image php-fpm that allows you to run any PHP application. It is based on ubuntu:14.04.

The first line is to avoid mysql to ask for a root user and password. Then I updated the apt-cache and install curl and mysql client. Last, I removed the apt-cache to reduce the instance size.

These are environment variables that you can change when you run the instance. I think is important to provide with sensible defaults that allow you to quickly test the instance without much thought.

The base image php-fpm has an index.php file that allows you to test it out. I removed it to provide WordPress a clean folder.

This actually installs WordPress. It’s designed to be in one line so that Docker can cache it completely

Then I copy WordPress to the correct folder.

I copy a template to generate wp-config.php. When the instance starts I run the 40_parse_wordpress_config.sh init script. I use bash to render the template using ENV variables. For instance, ${DB_NAME} will be converted to *wordpress_development*. I found the template parser script here.

The issue is that PHP doesn’t inherit the environment variables, so I had to modify wp-config.php in order to set all the variables that the application needs.

I prepare the files to be accessible by nginx and PHP

This line allows you to create persistent storage for the uploaded files and other application changes.

These lines prepare the init scripts.  I add them and set as executable scripts.

When the instance starts it will run each init script. The last one is 50_init.sh from php-fpm which runs nginx and php-fpm. All the previous scripts should execute and stop to allow the init process to work.

Docker compose

Previously known as fig, Docker’s Compose allows you to run multiple Docker instances together. Since WordPress requires a database instance, I created a docker-compose.yml file.

The “build” attribute is the Dockerfile folder. “Links” allows you to connect it with mysql. “Ports” refers to the exposed ports. The format is <host port>:<instance port>. “Environment” allows you to setup the instance

This is to run the database. The password in MYSQL_ROOT_PASSWORD should be the same as DB_PASS

Creating a data volume

In order to run it in production, you need to save the uploaded files. You can use a data volume for that.

In docker-compose.yml you need to add the following:

And add another image to docker-compose.yml:

So every file that is uploaded or modified will be saved in the wordpressdata image.

Just be careful when you are cleaning up docker and removing old images because you could delete wordpressdata.

Another nginx instance.

If you run the example docker-compose.yml it will work. However, WordPress will be connected to port 80 and we won’t be able to run another instance. We need to add another nginx to act as a reverse proxy.

I added the following lines to docker-compose.yml:

And removed the ports attribute in WordPress. Now the proxy connects to WordPress using the env variables and can expose multiple applications.

Here’s where we end for now. In conclusion, after having solved the minor issues mentioned above, we found Docker to be a very useful and efficient tool to manage distributed applications. Give it it a try when you can. Let me know if you have any questions about how our instance works, or check out our documentation here.

Thanks for reading!

F.

0 7 Continue Reading →

Long live your app: MongoDB Replication

The scenario

Not so long ago a customer requested that we provide the highest server reliability that we could. The application was pretty big, with about seven servers per environment. We needed to increase reliability in web servers and databases. In this article, I’ll explain how we achieved that from the database side.

While searching for options, we found that MongoDB (which was the database engine we were using) offered several options that increase your database reliability, i.e.:
MongoDB – Sharding
MongoDB – Replication

We went for MongoDB Replication –also known as Replica Set– because our customer needed a solution ASAP, and the configuration needed is minimal. Besides, it offers whole database replication, which we needed to implement other security measures, like backups.

Enough context for now, so let’s jump into the action!

Configuring MongoDB

First, it is important to notice one thing, as the name states, MondoDB’s Replication will be copying your database ‘n’ times (once for each replica member). With that said, to obtain the maximum benefit from this practice you will want to have your replica set distributed in N different physical servers (i.e. Ubuntu servers). We’ll explain how this works below.

Having N servers set and ready only to practice could be expensive and time-consuming. Therefore, we’ll be performing all of the examples on this article in one single server –your computer– to allocate all of the replica’s members. And we will be creating different folders and pretend that each one of them is a path to a different physical server. So let’s create folders that will be hosting each replica’s member. In our case, our DB’s path is under ‘/usr/local/var/mongodb/’, so we’ll create three folders (a replica needs at least three members) under that route:

If you don’t have your database’s path, you can get it by running this in MongoDB’s terminal:

Within the output command above, locate “dbpath” inside “parsed”.

Example:

With our fictitious servers ready, the next step is to create three “mongod” clients (one for each replica set member).

Note: you need to leave each client running, so you might want to run them in background by appending an ‘&’ at the end of each command. If you need to bring those commands to the foreground, then execute ‘fg’ in the corresponding window where your background jobs are running. Here is an example of how to run mongod clients:

Explaining commands:

mongod: executes mongodb.
–port: indicates the port that the mongod client will be listening to.
–dbpath: specifies the path to your application’s database. In our case, this is pointing to the directories previously created.
–replSet: sets the name of the replica set.

Now you can connect to each mongod client to start configuring the replica set!

Configuring your Replica Set

To configure your replica set, first you need to be connected to one client. You do it by executing the ‘mongo’ command in your terminal and append the –port option to indicate which client you want to be connecting to. In our case, we will be connecting to our client with port 27018:

Once connected, we can start configuring our replica set.

Defining Replica Set Configuration

Configuring the replica set is pretty simple and straightforward, all we need is to set some basic parameters. Go to the mongo shell you just opened and type:

Explaining options:

rsconf: the name of the object or variable that will contain the replica set configuration.

_id: sets the name of the replica set. This needs to match the –replSet option that you set when executing the mongod client. In our case: rs0.
members: sets all the elements that will be conforming our replica set. Elements should be contained within and array following this format:
member’s _id: the element’s identifier
host: the ip address of the server that is hosting the element. It has to be followed by the port where the mongod client is listening to.

Now, apply the configuration to the replica set. In the Mongo shell, type the following:

If everything went OK, you should see this:

You can see additional information by executing rs.isMaster().

At this point, your replica set is up and running!

So you might be thinking now, “so far so good, but I haven’t seen any real advantages yet…”

Let us explain a bit more. What makes MongoDB Replication a good strategy to increase your app’s reliability is the fact that your database will be always available for your web application. You might be wondering ‘How is that possible?’ As you might be guessing, having your database replicated N times gives you the opportunity to prevent data loss and sustain a persistent connection between your database and your web app.

MongoDB Replication consists on having a database replicated N times, where one element is the Master/Primary (this is the only one interacting directly with your app) and the rest of them are Slaves/Secondaries (these are interacting with the master).

This is how it works: when the master element dies, MongoDB automatically chooses a slave element and turns it into a master that will be accepting all IO operations. Your database will be always ‘alive’.

Browsing Secondary elements

You can see your replica set slave elements by logging into a mongo shell for each one of them and typing rs.isMaster(). Don’t forget to set the –port option like this:

Once you are in the mongo shell, the first indicator that you will see is:

Then, after you executed rs.isMaster(), you should see something like:

Where “ismaster” and “secondary” will tell you that that specific client is an slave element. Also, you can see that “primary” option is indicating the IP address of the element that is the master.

And that’s it! You are done configuring MongoDB! Continue next to see how to configure your Rails app to make it work with the replica set.

Configuring the Rails application

If you do not have a Rails application created go ahead and create a new one. Since we are not going to use ActiveRecord, you can append –skip-active-record to the “rails new” command to skip ActiveRecord’s installation and configuration.

Once you have the new Rails app, you will need to include Mongoid in your Gemfile and execute “bundle install”.
Execute “rails g mongoid:config”. This will create config/mongoid.yml where you will have to add the configuration for your app’s db. The configuration of this file is a little bit different than usual, so here you have an example of how it would look for our exercise:

As you can notice, the three hosts are the MongoDB clients we created at the beginning; make sure they are still up and running.

After configuring mongoid.yml, go ahead and create a controller, a model and some views. You can use “rails g scaffold” to speed up the process ;). In this case, we are going to create the basic CRUD for users.

Now go ahead and start the Rails server and add some information in your app.

Checking that MongoDB Replication is working.

Now we are ready to test our replica set, we need to log into the three mongod clients:

Inside the client with port 27018 (the master) check that the database you set inside mongoid.yml was created:

You should see the database you used in your mongoid.yml, in our case we have this:

Then select your database, in our case:

And check that the information you captured in your web app is there:

You should see the data you entered through your web application, in our case:

Now go to the slave elements and repeat the process; you should see the same info that is persisting in your master element. Note: when trying to execute “db.users.find({})” you will receive a restriction error message, that’s normal, go ahead and execute:

NOTE: By default MongoDB protects all the info from being read, so with rs.slaveOk() you are telling MongoDB it is OK for an external user to have access to stored data in the replica set.

Testing database reliability: kill the master

Let’s put al of this to a test. Go to your mongod clients and identify the master. If you don’t remember which one is your master, login into a mongo shell of any of the mongod clients and execute “rs.isMaster();”. In the output, look for the field “primary” to get the IP address of the member that is currently the master/primary.

Our master element is the client running in the port 27018, so we will kill it by executing the following:

Now, go back to a Mongo shell and execute rs.isMaster(). In the output, you should see under “primary” that a new member replaced the one that is dead.

Is my application still working?

Go to your browser and enter new information. Everything should be smooth and quiet as usual, your web app is working correctly.

Reviving the dead member

Once you know your web app is still up and running, then go back and execute the mongod client you just killed in the previous step, in our case:

and log into a Mongo shell for that client:

As you may notice, this member is not longer the master; another member has taken its place and has let it with a secondary role. If you want to know which is the new primary you can use rs.isMaster() again and identify who is the new master.

But what happened with the info save while this member was gone?
Let’s look for it. Connect to the member you just revived and execute next:

You will see all the information that was added through your web app when this replica member was down:

How cool is this?!

Reconfiguring MongoDB Replication

You might have noticed that even if you kill all mongod clients, the next time you execute them the replica set will still be there. Why is this? Do you remember the output when we executed the command rs.initiate(rsconf)? It read something like:

Yes, the configuration was saved! Therefore, every time you execute mongod clients using the –replSet and the same replica set you used before, then that configuration will be applied for that replica set.

Changing, removing, or adding a replica set member is not too hard. Connect to a mongo shell for the primary mongod client, and set a new newConfig object containing all new members, and then apply those changes with:

That’s it! Now you know all the basics of increasing the reliability of your web application by setting up MongoDB Replication!

Conclusion

A downside to MongoDB replication is that it does not matter if your database is replicated N times on N servers, it is still being centralized. Which means that you could bump into networking performance issues if you do not provide your server with enough resources (RAM, processor, hard drive space) to handle your data.

But! Even in spite of the issue mentioned above, we still believe that MongoDB Replication is a good option when you need a server that is reliable, easy to configure, and fast to set up. If you want to learn more about this technique and squeeze all the power of MongoDB Replication, we recommend you read the official documentation to see all the configuration options you can use. For instance, you could set a hidden replica member to create a backup file of your database and upload it to an AWS S3 bucket!

Thanks for reading! Let us know what you think in the comments.

M.

0 5 Continue Reading →

The product owner’s job: to say no.

Have you seen a team that doesn’t understand the reason behind developing certain feature? Have you had a sprint review where more than a half of the features are rejected? Or that the team develops a huge feature that doesn’t add any significant value to the product? If you’ve seen this in your project, it might mean that your Product Owner is doing something wrong.

We can consider the Product Owner to be the main stakeholder. She should own the product and determine direction. The reality is that the Product Owner role is different from that of a project manager, since she has the passion, the vision, and, unlike a project manager, has to say no to people. Let me explain.

Saying NO to stakeholders.

On a typical project, the team delivers a certain amount of story points per sprint. But it’s common to see that once stakeholders notice what the team is capable of doing, they start asking for more and more stuff. Imagine that certain project has around ten stakeholders, and each one of them suggests a new idea, which represents, let’s say, two story points. The problem is that the team is only capable of delivering ten story points per sprint, and if we let this situation run out of control, then we will end with an infinite queue of pending work.

The Product Owner is the one in charge of prioritizing the work queue. More than that, he is the one in charge of preventing the creation of that infinite queue of features, and the only way to do it is by saying NO to stakeholders. At least from time to time.

It’s true that the Product Owner must develop a good relationship with the stakeholders, and part of this is helping them decide what should or shouldn’t be part of the product backlog. By having a clear product vision, a well-studied market, and regular interviews with end users, the Product Owner should be able to determine what features are the best for the product.

Saying NO to the current backlog

The business value produced by each feature tells the PO what should be the priority for each story. Let me clarify, when I say value I’m not talking about the size in story points, I talk about the actual ROI of each story.

The Product Owner should be skilled enough to find out the real value of each feature, by studying end-user behavior and market trends. Let me give you an example of that.

“Jim Employee” is part of the marketing department of a graphic design company that sells templates to graphic designers. On a sprint review, Jim proposed to add a small countdown clock right below the daily offer section. The only problem is that his requirement was down the road in the backlog because of the urgent features that the accounting department has requested.

“Mark Product-Owner” decided to support Jim with his idea and he put it at the very beginning of the next sprint. After an (expected) argument with accounting, he stood his ground, and the team developed Jim’s idea.

At the end, that small requirement increased sales, and it wouldn’t have been possible without Mark’s support.

What if one of the stakeholders proposes a simple change to the interface that improves the end product a whole lot? If the stakeholder doesn’t have enough influence and there’s a lot of pending work on the backlog, chances are that the feature could stay in the backlog forever. It is the product owner’s job to support good ideas that have high value.

Saying NO to the Scrum Master.

It is true that the scrum master is the one in charge of making sure that Scrum is followed as intended. However, there is just one person that can say no to the Scrum Master and change a sprint’s path or add features, and that is the Product Owner.

According to Voltaire, “With great power comes great responsibility” and, in this case, that quote applies very well. The Product Owner is the only one that can say no to the Scrum Master, and if she doesn’t use this power wisely the team could end with a useless Scrum implementation.

But, when can a Product Owner interrupt a sprint? There is no rule for this; it depends on the urgency of the requirement. As a rough guideline, I could say that most of the time a sprint can only be interrupted because of the appearance of an urgent bug on the production server. It is the Product Owner and the Scrum Master’s job to exert their judgement and decide when a sprint can be interrupted for the sake of the project’s health. Nonetheless, the Product Owner has the last word.

Saying NO to the team.

It’s the team’s job to think outside-the-box. However if they didn’t have any external boundaries to keep them in check, the product could easily become something different than what the market, users, and the company need and want.

One example of this happened to me when I was Product Owner of a project that started as a small demo to a group of investors. After a few months of work it became a more serious networking application.

On a Sprint Review Meeting, one of the most experienced developers of the team asked me to spend a significant part of the upcoming sprint time on redefining the architecture of the application. He explained to me that the design that we had up to that point didn’t fully support the new requirements, and we had to do it right away.

At that time, we just had one “urgent feature” to develop, so it was easy for me to say yes to that. I wasn’t sure I had made the right decision until some time passed, and the velocity of the team went up. When I asked about what changed, they told me that the new architecture was allowing them to develop things faster.

Later, I received a suggestion from the same developer about moving to a NoSQL database. According to him, that database model offered better compatibility with what the product was becoming. I analyzed the situation, asked for some advice and I decided that it wasn’t a good idea to proceed at that moment with the change. We were far away from launching the product and, even though we were near to the deadline, the improvement on the application’s response time wouldn’t be significant.

In other words, the Product Owner is in charge of making room where the team can experiment with their ideas.

Having a great relationship with everyone.

I’d say that this is the hardest part of the work since this involves a lot of what some people call “soft skills”. It involves leadership, friendliness, persuasion, and more.

The Product Owner must have a good relationship with her team and become the main bearer of the product’s vision. She or he should maintain a good relationship with the Scrum Master since he will help her to mediate difficult situations and will support her with the improvement of the Product Owner’s performance.  Finally, she should maintain positive relationships with the stakeholders. They are her customers, investors, and end-users. Without them, the project wouldn’t be possible.

The Product Owner role is a complex one that needs skills and knowledge in professional communication, user experience, and market research. At TangoSource, we have internal Product Owners who act as the eyes and ears of our customers. They are in charge of interviewing the stakeholders, studying the market trends, and defining the features of the project. Ultimately, they’re responsible for the results at the end of the sprint.

Want to know more about how we run Scrum within the company? Drop me a line or follow me on Twitter, I’ll be glad to strike a conversation.

Thanks for reading!

R.

0 8 Continue Reading →

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 5 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 →

A Tmux crash course: tips and tweaks.

~ Intro

If you are one of those devs who uses the terminal a lot and ends up with way too many tabs open, or practices pair programming, then this post is for you. During the last months, I’ve started using Tmux a lot. Since I’ve found it to be very useful, I thought I would write a post where I share a few recommendations and pro-tips. I’ll show you what Tmux is and how to use it in combination with Vim to make a more effective and elegant use of the Terminal.

So, this is what we’ll cover:

  1. Tmux basics.
  2. The best of Tmux
    1. Windows
    2. Panes
    3. Sessions
    4. Fast text navigation and copying
    5. And a very neat pair programming feature
  3. Tweaks to improve Vim integration.
    1. Colorscheme background
    2. Static cursor shape
    3. Indentation at pasting
  4. A few extras to enhance the Tmux experience.
    1. Tmuxinator for session automation.
    2. Changing your color of your Tmux bar.

 

An important thing to bear in mind, this is the tool stack I had installed while writing this post, I tested what I say here with these versions:

  • Tmux 1.9a
  • Vim 7.4
  • iTerm 2.1
  • Mac OS (Mavericks and Yosemite)

 

Let’s start!

 

~ The Basics

What is Tmux?

Tmux is a tool that allows running multiple terminal sessions through a single terminal window. It allows you to have terminal sessions running in the background and attach and detach from them as needed, which is very useful. Later on, we will see how to make the most out of that feature.

Here’s a screenshot of a Tmux session:

What you see in the image:

– Left: Vim

– Right: a system’s shell

– Bottom-left: the Tmux session name (“pomodoro-app”)

– Bottom-middle: the current Tmux windows (“app log”, “editor” and “shell”)

– Bottom-right: the current date

How to install Tmux?

In Mac OS:
  1. Install Homebrew

Here’s more info.

  1. Install Tmux:

In Ubuntu:

Run this on the terminal:

The Tmux prefix

In order to isolate its own keyboard shortcuts from other shortcuts, Tmux provides a shortcut prefix. When you want to trigger a Tmux shortcut you will press the Tmux prefix and then the Tmux shortcut key. The prefix that Tmux uses by default is Ctrl-b (“Ctrl” key in combination with the “b” key). For instance, let’s say you want to trigger the shortcut that lists the current Tmux sessions, which is the *s* key. Here is what you will need to do:

  1. Press Ctrl-b keys (Tmux prefix)
  2. Release Ctrl-b keys
  3. Press the s key

 

A few recommendations:

  1. If you have not already mapped the *ctrl* key to the *caps-lock* key and vice-versa I suggest you do it.

 

Calling ctrl from the caps-lock key is very practical. This is because when coding you need to call ctrl very frequently. Moreover, it is a lot easier/quicker given the caps-lock key aligns with the default position of your fingers in the keyboard.

 

  1.  I recommend changing the Tmux prefix to Ctrl-a . Once the  *Ctrl* key has been set to the *caps-lock* key, it gets a lot easier/quicker to call Ctrl-a instead of Ctrl-b, because the new prefix keys are very close to each other on the keyboard.

 

Here is what you need to add in your ~/.tmux.conf file to change the prefix to Ctrl-a:

 The config file

*~/.tmux.conf* is a file that Tmux reads every time a new session opens. It’s where the customizations for Tmux need to be placed. Suggestion: in the case that you need (and chances are you will) to apply a new change made to the without opening a new session, you can add the following line to the ~/.tmux.conf file:

This way, once you have added a new change to the *~/.tmux.conf* file, just press ctrl-b R to reload your configuration without having to open a new Tmux session.

 

~ The best of Tmux

Quick note: the screenshot shown here may differ slightly from what you see by default when you install Tmux. This is because I modified the status bar. If you want to do the same follow the steps on the “Pimp your Tmux bar” section of this post.

Panes

I like the idea of dividing the screen vertically, so that on one side of the screen I have Vim and on the other side I have the output of my code. I could even have another console if I wanted to. Here’s how Tmux makes it happen:

What you see in the image:

– Left side: Vim (at the top: a Ruby class file, at the bottom: a test file for the Ruby class).

– Right side: a bash session.

A vertical *pane* is easy to create. Once you have launched a new Tmux session just press “Ctrl-b %” and a new vertical pane will appear. Also, if what you need is a horizontal division then press “Ctrl-b “”. Navigating through Tmux panes is easy, just press the Tmux prefix and then any of the direction arrows depending on which pane you want to go.

 Windows

In Tmux, a window is a container for one or more panes. Tmux windows allow you to arrange multiple panes inside windows depending on what you need. For instance, in my case I usually have one window called “server” for running the app’s server (where I can see the log), another window called “editor” (where I do the coding). One pane for Vim and another for running the code tests. And another window called “shell”, which is a bash shell where I can run system commands. Tmux windows are useful since they allow users to allocate panes inside of them, to see more about each pane by going to the window that contains it. This is an efficient use of the available screen space.

The list of existent windows in a Tmux session displays at the bottom of the screen. Here is an example of how Tmux displays (by default) the list of windows created. In this case, there are three windows: “server”, “editor” and “shell”):

image3

 

In order to create a new window you need to press “Ctrl-b c”. To navigate through windows press Ctrl-b followed by the index number of the window you want to go. The index number displays next to the name.

Sessions

A Tmux session can contain multiple windows. Sessions are a neat feature; I can create a Tmux session that is exclusive to a particular project. To create a new session just run the following command on your terminal:

If I need to work on a different project I will just create a new session for that. Although the focus will be on the new session, the original session will remain alive. This allows me to get back to it later, and continue where I left off. To create a new session press Ctrl-b : and then enter the following command:

Tmux sessions remain alive until you restart your machine or you explicitly kill the session. As long as you don’t restart your machine, you can jump from a project’s session to another as you need it.

 

Navigation through Tmux sessions

To get a list of the existing sessions, press Ctrl-b s. Here is an example of what Tmux will show you:

image4

Each session listed has an ID number, starting from zero. In order to go to that session type the session’s ID number in your keyboard. In the case that you are not in Tmux but you have one or more sessions running just use:

This command will take you back to your Tmux sessions.

Fast text navigation and copying

I always disliked the fact that to copy content from iTerm2 quickly you need to use the keyboard plus the mouse. I think that there should be a quicker way to do it without having to use the mouse. Fortunately, Tmux allows for that, since it is run from the command line, where the use of the mouse is not allowed.

Navigate text

Tmux allows for text navigation in a way that is very similar to Vim. You know, where the k key goes one line up, w moves one word forwards, and so on. Yet you can increase Tmux’s similarity with Vim by telling it to use the *vi* mode. Here is what you need to add in your *~/.tmux.conf* file to accomplish this:

Send copied text to System’s clipboard

By default, when you copy text from Tmux, the text is only available to be pasted inside that same Tmux session. In order to make that text available to be pasted anywhere, you have to tell Tmux to copy to system’s clipboard. Here’s how to do it:

  1. Install retach-to-user-namespace, this is very easy with brew, just run the following command:

  1. Update ~/.tmux.conf file

Select and copy text

Now that the *vi* mode is set and *rettach-to-user-namespace* installed, let’s see how to copy text from a Tmux session. Let’s say you’ve run the *ifconfig* command because you wanted to copy your ip address. Now, follow these steps to copy that text:

  1. Enter copy mode: ctrl-b [. You’ll see a short highlighted text appear at the top right of the screen as in the following image (“*[0/0]*”).

 

image5

  1. Start moving across the text as you would do in Vim: with j, k, l, h, etc..
  2. Once you get to the text you want to copy press the spacebar and start selecting text (exactly as you would do it in Vim).
  3. Once text is selected press the enter key

 

Now that you have copied your IP address, paste it wherever you want.

Make text copying even more Vim-like

You can use *v* key to select text and *y* to copy it, just add the following to your *~/.tmux.conf* file:

Effective pair programming

You can share the address of a Tmux session with someone else, and that person can connect to the session via *SSH*. Since the connection runs over *SSH*, it will be very lightweight. For the user connecting to the remote Tmux session, it will feel as if the session is running locally, providing the internet connection is fast enough.

Tmux with Tmate

Tmate is a tool that makes it very easy to create a Tmux session and share it with someone else over the internet. To share a new Tmux session using Tmate these are the steps you have to follow:

  1. Install Homebrew:

  1. Install Tmate

  1. Launch a new session with Tmate:

  1. Copy the SSH URL given by Tmate on the Tmux session. An example is showed in the following image (message at the bottom: “*[tmate] Remote session: ssh …*”):

 

image6

  1. Ask the other person to access via *SSH* using the URL you just copied.

 

Now that you know how to make good use of Tmux’s pair programming feature, you can further improve the interactivity of your session by doing a voice call via your preferred provider.

 

~ Tweaks for Vim integration

Colorscheme background

When I first opened Vim through Tmux I found the colors weren’t being correctly applied. The background color was being displayed only where characters appeared. Here is an example:

image7

This issue is due to Vim’s need of setting a different term parameter when ran through Tmux. To set the right term parameter just add the following lines to your *~/.vimrc* file:

After updating the ~/.vimrc file, the color scheme is displayed correctly:

image8

Static cursor shape

By default when Vim is run through Tmux, the cursor shape is always the same regardless of the current Vim mode (insert, visual, etc). This makes it hard to identify the current Vim mode. To fix this, you need Tmux to tell iTerm to update the cursor shape. You can do it by adding the following to your ~/.vimrc file:

*Thanks to Andy Fowler who originally shared this tip.*

Indentation at pasting

Sometimes, when pasting text into Vim the indentation of the text is changed, which is a problem when you paste a large amount of text. This issue can be prevented by executing :set nopaste before pasting. However, there is a better way to do this. By adding the following to your ~/.vimrc file, Vim will automatically prevent auto-indenting the text when pasting:

*Thanks to Marcin Kulik who originally shared this tip.*

 

~ Nice extras

Tmuxinator (automate sessions for your projects)

Let’s say you start coding for application A and you always create a Tmux session with three windows for that: “servers”, “editor” (for the project’s code) and “shell” (to run system commands). At certain point of the day you need to temporarily switch to application B, and you will create a Tmux session with the same windows arrangement you had for application A, with a few slight differences (such as the directory and some commands). With Tmuxinator, you can declare the configuration for each Tmux session and then create them with a single command! Pretty sweet.

Tmuxinator is a gem that allows you to automate the creation of Tmux sessions. It is done specifying the details of the sessions in the configuration files and then creating the sessions with a command.

Let’s see how to install Tmuxinator and how to add the configuration to start a project session. Install the Tmuxinator gem by running the following command:

Now that Tmuxinator is installed you can run the tmuxinator or mux commands from the system’s shell. Let’s create the configuration file for your first application as described above (three windows: “servers”, “editor” and “shell”), tell Tmuxinator to create and open the config file for this project:

At this point the file ~/.tmuxinator/project_a.yml should have been automatically opened. In order to accomplish what is needed for project A you need to update the content of project_a.yml to:

Once you have added the configuration to the Yaml file for project A, just run the following command to start the Tmux session:

Or, if you prefer, use the Tmuxinator alias:

There you have it. Now, in order to start coding for project A just run the Tmuxinator command.

*Find the official documentation in the Tmuxinator repo.

Pimp your Tmux bar

By default, the Tmux bar looks like the following (green bar at the bottom of the image):

image9

You can change its appearance if you want. In my case I like something cleaner as in:

image10

In order to accomplish it, I use the following settings in my ~/.tmux.conf file:

~ Conclusion

In summary, we revised basic functionality and the most useful features Tmux offers. We also reviewed a few tweaks and extras. What are your impressions about Tmux so far? Are there any other features/tweaks that you have found useful? Let us know in the comments section below.

Thanks for reading!

TN.

12 28 Continue Reading →

Get to know our team: César Gomez, web developer.

 

As a part of our series of interviews with members of the TangoSource team, today I’d like to introduce you to one a growing talent on our development team. Introducing César, he’s been part of the team for two years now, and we are proud to have him on board.

team-cesar

Q. Could you please introduce yourself briefly?

A. My name is Cesar Gomez, and I was born and raised in Colima. I am 26 years old, and I’ve been into web dev professionally for the past two years. I started as a trainee at TangoSource in January 2013. I remember that when I was 16 I couldn’t even turn a computer on, but I was attracted to computers and software. That’s why I decided to do a specialization in informatics when I was in high school. That was my first contact with computers, in high school. Because of my interest in technology, I started developing my skills and increasing my knowledge. I eventually became good at it, to the point that I won local contests with my programming skills.

Q. What is the most surprising thing you’ve learned while working at TangoSource?

A. Something important that I learned at TangoSource was the Ruby language itself. Previously, as a student, I worked with other languages that turned out to be very complicated and difficult to use with large projects. During my first day at work using Ruby I was amazed because of its flexibility and readability. The code seemed to “speak for itself”.

Q. What is your most memorable TangoSource moment?

A. One of the best memories that I have is when I graduated from being a trainee. At the time, I and another co-worker had been working very hard, in an effort to become better developers and convince the company that we were developer material. When we got word that we were accepted we were very happy, it was a highly gratifying experience. The team organized an initiation activity that consisted of throwing us into the office pool (yes, we had a pool!). We had a few beers and then came back to work all wet, it was fun. Federico, our CTO, ended with a sprained ankle, so you know it was a good party.

Q. On what kind of projects are you currently working?

A. Right now, I am working on a couple of projects. One of them is a Customer Relationship Management tool for a luxury travel agency. The other one is an internal project: we are building an app to help startups like us manage their projects better, using Scrum. Lately, I’ve also been getting into training people who have recently joined the company.

Q. How are the relationships among coworkers inside and outside of the office?

A. We have always been very friendly with each other since I can remember. We have lunch together every day, which is a perk provided by the company. Every once in a while we go out for lunch or drinks together. We also have a Nintendo 64 in the office, which is great for quick Smash Bros tournaments.

Q. What do you do when you are not working?

A. On weekdays, I usually pick up my girlfriend and go out with her to the movies, have dinner or a drink. Some other days we stay at home and watch something there. On weekends, I go out with friends. We like swimming in any of the rivers that can be reached within a 20-min drive from Colima.

Q. A final word?

A. For young people who want to become developers, I can tell you that the dream is real! Keep learning and stay focused. Work hard, and you’ll eventually become what you want to be. For people interested in working with us, I’d tell them that we always want to hear about projects to which we can contribute with our talents. Don’t hesitate and shoot us an email!

We thank César for taking the time to answer these questions, and leave you with a video excerpt from the day when he and other developers were officially welcomed into the TangoSource family. We were playing a Mexican version of “Musical Chairs” at our old office in Mexico. César was the odd man out and, as the Mexican tradition goes, he was going to be thrown into the pool, clothes and all. In the end, he chose to dive in himself.

Thanks for reading, and stay tuned for other interviews with team members.

Y.

0 4 Continue Reading →