Introducing FotoFluent!

For many of us who love to learn new languages, keeping our skills sharp can be tough. We try to set aside time to practice, but somehow life always finds a way to put our language-learning goals on hold. Wouldn’t it be great to complete a daily lesson without all the extra effort? Good news, we now have FotoFluent!

FotoFluent is a Chrome extension that helps language learners stay fresh and immersed in their target language without really trying. All you have to do is open a new tab in your browser and BAM! there’s a new vocabulary word on the page, waiting for you to test yourself and guess the correct translation. If you need some extra help, foreign words are accompanied by images that serve as a hint and help your brain better associate the text to real life objects. How easy is that?!

The project started as a way to learn new vocabulary for an upcoming trip abroad. The premise was simple: We already spend lots of time throughout the day opening new tabs, why not take those few seconds of lost time and learn some new words? And so, we decided to build a Chrome extension that would replace the new tab page with an app that fetched and displayed translations in various languages.

How We Built it

The translation app was built using the Vue.js framework, which is a fast, lightweight JavaScript framework that combines some of the best ideas from Angular and React. Here at LaunchPad Lab, we tend to use React for many of our client projects. Since FotoFluent was a project for our quarterly Demo Day, where experimenting new tech is encouraged, we thought it would be a great opportunity to try out a new, rapidly growing technology.

Similar to Rails, Vue allows developers to build apps quickly. Like Angular, it uses HTML based templates enhanced with Vue specific directives. Like React, it follows a component-based architecture and leverages the Virtual DOM. My favorite feature is the way individual components are structured using the single-file component system. Components combine HTML templates, scripts, and styles into one .vue file, separated into three distinct sections. Components are registered with their own data, props, and methods, and can be reused across the app by simply importing the file and including the component as a custom HTML element. Vue provides one-way and two-way reactive data binding, and provides the Vuex state management library. And though not necessarily needed for an app of this scale, Vuex was a fun exercise in learning how Vue implements action dispatching and mutations for state management.

Our translation app uses 4 components

• Tab – the main container for the child components
• Translation – displays translation data, including foreign and english text
• Playback – handles audio playback of words
• LanguageOption – handles switching between languages

// Sample Component: Translation.vue

<template>
  <div class="translation">
    <div v-if="translation && translation.foreign_word">
      <p>{{ translation.foreign_word }}</p>

      <button id="translate-btn" @click="next">Next Word</button>

      <button id="translate-btn" @click="toggleTranslation">
        <span v-if="!showTranslation">Show Translation</span>
        <span v-else>Hide Translation</span>
      </button>

      <Playback />

      <p v-if="showTranslation">{{ translation.word.word }}</p>
    </div>

    <div v-else>
      <p>Loading...</p>
    </div>
  </div>
</template>

<script>
  import store from 'store'
  import { mapState, mapActions } from 'vuex'
  import Playback from './playback.vue'

  export default {
    components: {
      Playback
    },
    computed: {
      ...mapState(['translation', 'showTranslation'])
    },
    methods: {
      ...mapActions({
        next: 'REQUEST_DATA',
      }),
      toggleTranslation () {
        store.commit('TOGGLE_TRANSLATION')
      }
    }
  }
</script>

Transferring the Vue app to our browser was fairly simple. Chrome extensions allow you to add functionality to your browser using common technologies. They are just a set of HTML, CSS, and JS files accompanied by a manifest that ties them all together. By simply registering an override page in the manifest file, we allow our VueJS app to mount onto the view of each newly opened tab. Other key settings in the manifest are declared with the permissions option, which tells the extension to allow access to other APIs, such as our Rails API for fetching translation data, and the chrome.storage and chrome.tts APIs, which allow us to track the language we’re learning and play audio of a translation in it’s native language.

// Our manifest.json

{
  "manifest_version": 2,
  "name": "FotoFluent",
  "description": "Learn a new language, and expand your vocabulary with FotoFluent!",
  "version": "1.0.2",
  "author": "Diana Camacho, Rachel Killackey",
  "icons": {
    "128": "images/icon-128.png"
  },
  "chrome_url_overrides": {
    "newtab": "pages/tab.html"
  },
  "permissions": [
    "https://fotofluent-admin.herokuapp.com/*",
    "storage",
    "tts"
  ],
  "web_accessible_resources": [
    "pages/*",
    "scripts/*"
  ],
  "options_ui": {
    "page": "pages/options.html",
    "chrome_style": true
  }
}

How To Get It

Enough about how it’s built, how can you get this awesome extension?! Super simple! Head to the Chrome Web Store, search for ‘FotoFluent’, and add the extension. Once installed, open a new tab and start learning. That’s it! An image will load along with a foreign word. Users have the option of clicking ‘Show Translation’ to view the correct English translation, selecting ‘Play Audio’ to hear the word spoken aloud in it’s native tongue, or continuing the learning experience by loading the ‘Next Word’. Currently, the app supports 4 languages (German, Spanish, Italian, and French), which can be easily switched by clicking on their respective flag icons, and contains translations for over 560 words.

If you’re anything like me, you open at least half a dozen tabs every few hours. With FotoFluent, every new tab is an opportunity to momentarily immerse yourself in a foreign language and test your knowledge. It only takes a few seconds, allowing you sharpen your skills throughout the day, even while you work.

If you’re ready to turn your tab-hoarding habits into a productive language learning experience, download FotoFluent from the Chrome Web Store today! We’re excited to continue with the project and add new features, so please let us know how you like it and follow us on twitter and instagram!

×

Subscribe to Our Newsletter

If you made it this far, you should sign up for our monthly newsletter. Get our latest articles and insights delivered each month.

First Name*

Last Name*

Email*