Our last weekly meeting with my mentors was really inspiring. We defined new goals for the next two weeks and discussed various topics regarding my project. I got to know the challenges a little bit better and got some new motivation and an in-depth insight on what my future work will consist of.

With the related project we realized that by focusing on some aspects, we can significantly lower the project complexity. One of it is to make the plugins Drupal specific. This is why we agreed on the module name: tmgmt_ckeditor, which will contain the CKEditor plugins that will be done for this year’s GSoC project. The second one is focusing on one specific browser. For now, we will make everything work in Google Chrome. We believe that generalising the plugin would be a healthy follow-up if demand will arise.

As the first version of the plugin was only an initial prototype we would like to build up on top of it with adding more functionalities.

Achievements

Displaying the segments is the core functionality that I did in the first week. I worked on extending it - now when we click on the Display Segments icon, we display them also in the source editor other than just in the translate editor. This is a nice and useful feature, as the translator gets the idea how the segment looked before the translation.

We now also visually anotate the current segment - currently it is colored in red. I will fix that in the next iteration to color the opening and closing icons of the segment. Colors will be based on the segment’s/translation status.

I opened an issue to discuss the segmentation semantics. We will use this to connect segments in the source and in the translation editor. For now, we’re using IDs. We will surely change that because we want to have the markup valid (we can’t have same IDs on one page).

Context interaction will be one of the key points of our plugin. When a user clicks on a word, it is displayed in an area below the editor. With that we also get the whole content of a segment. We can then provide useful translation suggestions from the translation memory based on clicked words and sentences and perform other actions. For that, I implemented a CKEDITOR.event listener for clicks and two helper functions. One gets the clicked word and the other displays the content. The current UI can be seen in the image below.

Displaying segments and on click actions (second version)

Goals for next week

Our goal is to use a dummy translation of a segment and make a fully functional UI first. To achieve that, I still need to fix a few bugs and work on extending the code with some “fake” translation memory and other features. I will also cleanup and restructure the code to follow an easy to read pattern that will help us in the long run. After that, we will move to connecting it with the backend API (in plan for the week after).

I must say I am really enjoying working on this project. It is really fun, I am learning a lot and it feels like making a puzzle. :)

The Google Summer of Code 2016 coding period started last week, May 23rd and since then, every student started to actively work on their project. After the one-month long community bonding period, it was time to start coding.

I had many things scheduled for this first week. Firstly, I found some interesting mockups to get a broader idea, what we are building and how it should look like. Secondly, I created a GitHub repository and a sandbox project on d.o.

After that preparation, I immediately jumped into it and went through some tutorials on how to make custom CKEditor plugins for Drupal. I found this tutorial really useful. It was really easy to follow and it guided me step by step. I have also read many discussions about custom plugin development and how to convert them to Drupal. And there is also some nice documentation on the CKEditor API for Drupal.

A general overview of the CKEditor and it’s development was also presented at DrupalCon Amsterdam 2014 by wwalc.

Achievements

With all those nice guides and examples, it was fairly easy to make the first version of my plugin. I created a new Drupal module, found some nice icons and started working with the javascript file. The initial version is using user-defined <tmgmt-segment> tags in the source code. With them we define specific segments (e.g. divisions and paragraphs), that are then easier to translate. As by our goals, when the user clicks on the ‘Display segments’ button, a simple search is performed on our tags. They are then replaced by some nice icons, showing where the segments start and end. This enables the translator to see them clearly and perform his actions. This is shown below.

Displaying segments (first version)

Goals for next week

For next week we want to extend the functionality of the initial plugin by displaying the context below the text area and show the segments in both editors (source and translation) - to clearly distinguish the currently marked segment. Also, a specific word that was clicked should be displayed below. We can then use it to gather possible translations, check if it already exists in the TMGMT memory, etc. I also believe the module needs to be renamed to something more simple and easier to read - on our weekly meeting we agreed on the name tmgmt_ckeditor, since we are building a TMGMT specific CKEditor plugin.

You can find my code on GitHub and follow my progress there. Looking forward to start implementing some more fun stuff!

After the accepted student proposals were announced on the Google Summer of Code 2016 site on the 22nd of April, the community bonding period started. The idea of this part is to get to know mentors, read documentation, get up to speed to begin working on assigned projects.

Since I had university courses and lots of assignments, I found the time to check drupal.org frequently to see the issue progress. I already got to know the community from my internship, hence - the bonding was already established, I just needed remain in contact with it. We often had discussions with my mentor about tools to use, my project timeline, our meetings, things that needed to be done before I start, etc. I also connected with other GSoC students and made some friends amongst them. Together with mbovan, we shared many information about GSoC, our projects, timelines and experiences.

Tools

We made some conclusions about which tools to use:

  • PHPStorm

  • Typescript

  • Atom

  • Mattermost/Skype (for communication and meetings)

  • Colloquy (IRC)

  • Trello board (for tasks management)

  • Google docs for meeting notes

Meetings

We scheduled our meetings every Tuesday at 15:30 (CEST).

Details

I was mostly in discussion with edurenye. He made this sandbox, on which my code will be based - this is the backend part of the next step we want to do in TMGMT. Like I described in my previous post, we would like to implement an alternative to WYSYWIG editor. With different CKEditor libraries we want to provide some special linguistic actions, like defining specific segments and indicate their translation quality, give users alternative suggestions from translation memory, etc. The segmentation part is done by now, so I can start working on the frontend part - building the plugin for the CKEditor.

This week’s goals

For the first week I was planning to start with the first plugin for segments. The plan is to detect a segment without changing the source dom, indicate it and detect its context by displaying it in an area below the editor. Later on more functionalities will be added.

In the next topic I will describe what I learnt in the first week and the following steps. Stay tuned!

“Drupal™ - Build something amazing”. These are the initial words that are written on the landing page of Drupal, one of the leading open source content management systems currently available.

My personal contribution to Drupal 8 started in February, 2015. I did my internship in MD Systems in Zurich - Switzerland for one year and contributed to Drupal core and many other modules, I learnt a lot about Drupal in general, the community and the coding process. In the meantime many new ideas arised on how to make things better in the future, especially for many popular custom modules for Drupal 8, like Paragraphs and Translation Management. Together with Miro Dietiker, the CEO of MD Systems, we discussed a lot about the opportunities and agreed on what projects would be suitable for me. We decided to apply for Google Summer of Code, an initiative by Google to support 178 organizations by including students to write code and learn about the open source development. I really believe it is a great opportunity to spend the summer break between exams contributing to build something cool for the community and the end users. I would love to extend my project in the future and write a master thesis about it. Last, but not least, I find the idea to try and work remotely really intriguing, since I’ve always wanted to combine travelling and coding - two of my passions. Participants can gain a lot on their personal side too, since to finish the project successfully, you need to learn how to be organized, disciplined and stay motivated.

I feel really inspired by the initial words in the quote, that I am eagerly looking forward to start working on my project to build something really amazing!

GSoC topic

To apply for Google Summer of Code, every student had to write a proposal about the project they are building. Mine is based on the Translation Management module. This is a short abstract:

The Translation Management Tool (TMGMT) module is an extension to support editors, publishers, translators and project managers during their process of content translation. Since I think that Local Translator is a very useful submodule, there are still lots of things missing. The tool was working in Drupal 7, but it was rather limited in functionality and by far not fulfilling expectations of professional translators. I believe the next goal is to make the Local Translator a professional CAT Tool and I would like to help with implementing CKEditor plugins using Javascript. Because TMGMT wants to use the CKEditor libraries to build an alternative non-WYSIWYG translation editor, I would propose to implement some special linguistic actions like defining segments, marking them in the UI and masking specific HTML tags.

GSoC proposal

The GSoC proposal, that can be found here.