History
This site was created on pure enthusiasm by two people:
  • Tranquillity (a.k.a. Kaorinite) – concept, page layouts (Bootstrap, HTML/CSS), JavaScript-plugins, design (Photoshop, Illustrator, Blender, Substance Painter), translation into English;
  • Unic (a.k.a. Takenaki) – backend (Java), frontend (JSP, JavaScript, CSS), design (Photoshop).
Tranquillity

Back in my school and university years I got interested in handicraft, foreign languages and creating websites. In 2009 I created fene4ki.ru - a website with tutorials on making friendship bracelets, kumihimo (a Japanese form of braid-making) and other handiwork related things. The problem of this website was that only I could post something there, due to it being static and not dynamic. I’ve always wanted to make a website where people could exchange friendship bracelets with the whole word, share their handicraft ideas and find new friends. I was inspired by two websites: friendship-bracelets.net and postcrossing.com. I wanted to combine both ideas and add something new. I experimented a lot but I didn’t have enough knowledge of the backend part. In 2016 I met Unic. We found that we had a lot in common and decided to create this website dedicated to the exchange of friendship bracelets and handicraft ideas together.

We decided that the design of our website should be user-friendly, responsive (so it could render well on different devices), and skeuomorphic (with design elements resembling things from the real world). For that we took photos of different things, like paper, buttons, etc. to implement them into our design.

For separate elements of the design I used Adobe Photoshop and Adobe Illustrator. I got interested in 3D and made some elements of the design in Blender. Here are some screenshots of their creation:

I decided to use Bootstrap for making the page layouts, as I knew this framework well and thought it to be useful in creating our project. However, there was one small drawback in using its components out-of-the-box, namely, the breakpoint at 768px which was not enough for our project: we wanted to provide support for handling even smaller screen sizes. That’s why I had to add some additional media queries for that.

We thought a lot how to name our site. As it’s connected with the exchange of friendship bracelets, i.e. the bracelets are sent via mail, we thought it would be nice to use an image of a dove. They were once used as messenger birds and the dove is also a symbol of peace. I think it would be great if friendship bracelets could remind people of peace and friendship. We both love birds and thought it would be fun to use bird images for the users’ avatars as well.

Unic

When Tranquillity told me about the idea of making a friendship bracelet exchange project I thought it could be done quickly in a couple of weeks. I even decided to create it using some of my old PHP works. However, as we discussed and drew the wireframes at the beginning, I understood that it would take months to create this project. This is an example of how the tutorial editor looked at the very beginning and at the end of the wireframe making stage:

So I decided to write the project using Java, because I had much more experience in using this language than other ones. I used the Spring framework for implementing the server side, for the template engine I used Apache Tiles, for working with the database – Hibernate and I used MySQL for the database itself. Ehcache was used for the cash and Apache Velocity for rendering e-mails.

While creating the project I came across many interesting and complex problems, many of which were new to me. One of the most unusual problems was compiling a geodatabase of locations (cities, villages, etc.). I didn’t want to rely on external services (although they do have their advantages), so I decided to compile everything by myself. For that I wrote a program. Given a list of more of less big locations (with a population of 1000 and up) the program gets the geodata about each of them. The data couldn’t be collected in one go, so the program remembered all the failed attempts and continued when restarted. So in several iterations it collected all the geodata about the locations I had.

Another even more complex and interesting problem was writing a user-friendly and more or less universal tool for working with the data in the database. The need to prepare the initial data about locations, languages and countries triggered me to write this tool. As a result I made it possible to upload and download the data as text (or in the CSV format, which can be edited as usual electronic spreadsheets). In addition to that I made a webpage which could work with the data from the administrator panel. This tool saved me much time and freed me from the routine work of preparing the data. I called this tool and the format Inida (from “Initial Data”).

A pretty unusual task was implementing the search for duplicated addresses. Needless to say, comparing the addresses pair-wise would be quite ineffective here, so I had to use some math tricks to do that.

As our site was created for international usage, I was wondering how to make it more convenient to translate the site into other languages. So I wrote a program which helps people translate the elements of the site and also helps the administration to implement the translation without restarting the server.

I’ve always been critical about the look of user interfaces (UI) of websites, programs and games. I think that a UI should make the user’s navigation easier and pleasant to use. The elements of the interface should be distinguishable from each other, so the user could understand what is displayed on the page. That’s why, in my opinion, the best possible choice is skeuomorphic design, where the elements of the design look like things from the real world. For sure, not everything can be made to look lifelike, but one can at least give them a realistic feel, like embossing a button, embedding fields, etc. The more details a UI element has, the easier it is to discern it. I don’t like modern flat designs, where the UI elements intermix making it harder for the brain to understand what is what. That’s why our website is outside modern trends when it comes to the UI’s design.

Here are a couple of examples of how the wireframe of the settings page and administration page looked like:

And here’s the profile page during the development stage:

Tranqunic

We hope that our project will bring you joy, help you find new friends, and unlock your creativity.