---

Yet Another Language Learning Extension

This repository contains the Google Chrome extension "Yet Another Language Learning Extension" (YALLE) which enables the user to translate words and create flashcards in the browser.

The purpose of this application is to help save time with the time-consuming and boring parts of learning a new language such as looking up a word in a dictionary, checking whether it already is in ones vocabulary list and then creating a flash card for it. "Yet Another Language Learning Extension" combines all these activities in one simple Google Chrome extension that automates parts of it like checking for duplicates.

The ultimate goal is to extend YALLE's functionality further to the actual learning process by implementing features such as:

• replacing the new tab page with a screen where the user can review flash cards
• help user learn by motivating them through activity trackers and progress bars

Features

"Yet Another Language Learning Extension" currently:

• supports the PONS dictionary
  • the user can look up words in all supported languages
  • the results are visually represented similarly to the original website
• is integrated with the Anki flashcard program
  • the user can select which deck and model to store a flashcard in
  • YALLE automatically checks whether a note for a word already exists
• uses a Tiptap based text editor
  • the user can format the content on the flash card in common ways such as i.e. bold text or create a list

To-Do

YALLE is very much still under development and not bug-free and without any styling. However, its baseline functionality as outlined above already works. The main points of future improvement are:

• Optimize the React components to minimize re-renders
• Sanity check user input
• Style the entire application with CSS
• Support more storage options such as Google docs
• Support more dictionaries with an API such as the one provided by the Oxford Dictionary
• Comment the code base
• Add more formatting options to the editor such as justifying text

After that, additional functionality like the improved new tab pag will be worked on.

Tools

Purpose	Name
Programming language	Javascript
Package manager	npm
Version control system	Git
UI Framework	React 17
JavaScript bundler	Webpack 5
Development server for live reloading	Webpack Dev Server 4
Hot loader for React components	React Hot Loader
ESLint configuration for react app	eslint-config-react-app
Code formatter	Prettier
WYSIWYG Text Editor	Tiptap

Installation

To simply install the extension, you can find the most recent compiled build with the latest release. Then, you should load the extension in Google Chrome by:

1. Going to chrome://extensions/
2. Checking the option Developer mode
3. Clicking on Load unpacked extension
4. Selecting the unzipped yet-another-language-learning-extension folder from the release

To build the application yourself, you have to:

1. Check if your Node.js version is >= 14 with node -v
2. Clone this repository with git clone https://github.com/johanneshagspiel/yet-another-language-learning-extension.git
3. Run npm install to install all the dependencies
4. Run npm start to launch the webpack server
5. Load the extension in Google Chrome by:
   1. Going to chrome://extensions/
   2. Checking the option Developer mode
   3. Clicking on Load unpacked extension
   4. Selecting the generated build folder

Licence

The "Yet Another Language Learning Extension" is published under the MIT licence, which can be found in the LICENSE file.

References

• This program is based on a boilerplate template created by Michael Xieyang Liu.
• The flashcard symbol used in the logo was created by iconixar on flaticon.
• The editor symbols were taken from Remix Icon.