Side Project — Seven Words

It’s still a work in progress and perhaps I can give it a better name in the future but I wanted to share a small side project that I worked on in the last week and reflect on the challenges that I had to overcome. This deviation from the LaunchSchool curriculum was inspired by a couple of things. I decided to take a short break from LS while I was moving across the country for my seasonal forestry job; it’s usually difficult to allocate a consistent amount of time for studying during this time of transition, but at the same time I wanted to keep practicing new learned skills from course 201 as well as refresh the back-end material. I also enjoyed reading this article from a fellow LS student: My new app ‘r.note’ and the value of keeping a side project and thought I would give something like that a try. My effort is less complex and does not make use of all technologies or skills I’ve acquired — I needed something lighter but also something I could personally get excited about and improve on in the future. I wanted to use this transition time to not only practice but to play and learn something new.

At the start of this year I began learning Portuguese and knew I wanted to do something with language learning. As an exercise, I decided to focus on first brainstorming all features of the project without much concern for the skills that I may or may not have yet — and then I would strip away layers based on time constraints (after all, I wanted to get back to LS curriculum as soon as possible!) and road blocks that I knew would be answered as I continued with LS anyway. This made the process a whole lot of fun and while there were still challenges to overcome, most of my time was spent on simply exploring and playing around with new tools.

Anyone learning a new language or going through LS knows the importance of using SRS (Spaced Repetition Software) flashcards and powerful applications like Anki that allow you to learn vocabulary, or upload any information to your brain, more efficiently. Making the flashcards yourself is useful and aids with the learning process. In particular, the process of selecting an image for the word you want to learn and creating (usually odd but memorable) mental imagery that connects concepts is thought to greatly improve your recall probability. This process makes a more personal connection between the word and the concept making words ‘stick’ in your mind with little effort. But going through the process of copying and pasting words and hitting “Add” for every card did not seem to add any value to my learning — I wanted Anki to be preloaded with all the words, translations and sound clips of each word as spoken by a native speaker. Then I would add the images myself.

Opinions differ on how many words one should start out with before diving into grammar, writing and speaking. It seems that number ranges in the same way that our personalities do. For some, about 1,000 words or less is more than enough to feel comfortable jumping into immersion mode and others want to learn as much vocabulary as possible from the start. Both options are valid and I wanted to leave the choice up to the user. After making a choice of how many words they would like to learn, I wanted to present the results to the user on a separate page and allow them to edit the translation (they’re not always perfect or words may have multiple meanings or a sample sentence would help) and delete words that they either already know or that don’t lend themselves well to flash card form — usually the most common words like ‘and’, ‘of’, ‘the’, etc. in the English language. And when ready, this information would be saved to .csv or .txt file that Anki could read. I knew I wouldn’t get to all of it but I wanted to find out— if implementing these was a MUST, what would I need to know, which tools would be right for the job, etc. It was an exercise in looking beyond the horizon and taking a tour through uncharted territory — looking around and getting an idea of what tools are needed in my tool kit and how different technologies interact together.

I got as far as letting the user select the number of words and presenting the words and their translation in a table form and then allowing for downloading of a .txt file formatted for Anki to interpret but I wanted to incorporate sounds from Forvo, so I decided to scale back and make a fun exploratory tool simply showing seven randomly selected words (from the most common 3,000 words) and their pronunciations using Nokogiri and the free Yandex Translate API.

The initial version allowed me to experiment with the ‘range’ input type, with some interesting styling as well as transitions in CSS. I also wanted to animate the borders on both the button and the select input and tried a few different methods to get everything looking just right.

The first method of animating a border was the most intuitive; if I need a thicker border on hover, I will animate the border-width. However, this method suffers from a problem that was hard to notice in my simple layout but could be a problem in a more complex one. Because the border takes up space, on hover, other elements will be moved to accommodate it.

The simplest solution that works well in this case is to use a box-shadow transition trick instead. Visually it looks like an outline which does not affect the size of the element but also has the added benefit of not suffering from the step-like transition that the outline property has.

To get the most frequently used words I used Wikimedia’s frequency lists that exist for many different languages. I used Nokogiri to isolate those words and this proved to be tricky to do for every language since some words were organized in tables, others in lists, some were links, others not. I found some consistency and used three different method calls to Nokogiri to isolate words for six different languages. This was great, because all the words were on a single page and I was able to load styled lists with translations in seconds. The real issue was finding the ‘share’ links on Forvo and isolating ids for individual words — this process is expensive and very impractical for large lists such as this since behind the scenes a new page has to be loaded and parsed for every word. So just seven words for now to make loading time more reasonable and Forvo’s servers happy. My vocabulary in Portuguese is only about 1,000 words so I still use this method to grab seven new words at a time to load into Anki. I think it’s pretty handy to hear the highest ranked pronunciation for every word all in one place.

Instead of translating every word individually, also making the translation process expensive, after isolating the list of words I used an Array#join method to have Yandex translate just one large string where words are separated by arbitrary symbols instead of making hundreds of calls to translate one word at a time. After some experimentation, this joining and splitting the array yielded exactly the results I was looking for.

And the result page:

Overall, this was a fun experiment, a perfect way to tie me over while traveling and getting settled in a new city. I am ready to continue with LS and looking forward to coming back to this project or something similar in the future. If you want to check out Seven Words, you can check it out here:

Thanks for reading!