Yet Another Language Learning Extension (repository)
| Summary |
|---|
| đď¸ A Google Chrome extension 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â (YALLE) combines all these activities in one simple Google Chrome extension that automates parts of it like checking for duplicates. |
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
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
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:
- Going to
chrome://extensions/ - Checking the option
Developer mode - Clicking on
Load unpacked extension - Selecting the unzipped
yet-another-language-learning-extensionfolder from the release
To build the application yourself, you have to:
- Check if your Node.js version is >= 14 with
node -v - Clone this repository with
git clone https://github.com/johanneshagspiel/yet-another-language-learning-extension.git - Run
npm installto install all the dependencies - Run
npm startto launch the webpack server - Load the extension in Google Chrome by:
- Going to
chrome://extensions/ - Checking the option
Developer mode - Clicking on
Load unpacked extension - Selecting the generated
buildfolder
- Going to
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.