jayehernandez/letra-extension

Passively learn a new language every time you open a new tab

Passively learn a new language every time you open a new tab.

Download Chrome Extension

✨ Features

• New word everyday
• Listen to the word in the chosen language
• New inspirational quote about learning
• Dark Interface

🌎 Supported Languages

• 🇿🇦 Afrikaans
• 🇸🇦 Arabic
• 🇧🇩 Bangla
• 🇧🇷 Brazilian Portuguese
• 🇨🇳 Chinese (Simplified)
• 🇹🇼 Chinese (Traditional)
• 🇭🇷 Croatian
• 🇳🇱 Dutch
• 🇵🇭 Filipino
• 🇫🇷 French
• 🇩🇪 German
• 🇬🇷 Greek
• 🇮🇳 Hindi
• 🇮🇹 Italian
• 🇮🇩 Indonesian
• 🇯🇵 Japanese
• 🇰🇷 Korean
• 🇵🇱 Polish
• 🇷🇺 Russian
• 🇷🇸 Serbian
• 🇪🇸 Spanish
• 🇸🇪 Swedish
• 🇮🇳 Tamil
• 🇹🇭 Thai
• 🇹🇷 Turkish

🛠 Built With

• Vue.js - Frontend
• Node.js - Backend
• Pug - Template Engine
• Jest - Testing Framework

🤝 Contributing

We've had almost ~160 contributors since launching this, a huge thank you to everyone who has contributed in one way or another! Starting October 2022, contributions, issues, and feature requests are put on hold until further notice (v1.0.15).

As the repository is still made available to public, you are free to fork this instead and work on new features in your copy, for your own personal use. If you have any questions, feel free to contact us!

Installation

Here's a guide on how to install this Chrome extension on your local machine.

🙏🏻 Acknowledgements

• Boilerplate Vue Extension from Kocal's vue-web-extension
• Text to Speech API from ResponsiveVoice API
• Background Image API from Unsplash
• Twitter Flag Emojis from Twemoji Awesome
• Icons from Raj Dev
• README generated with ❤️ by readme-md-generator

Give a ⭐️ if this project helped you!

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Vaibhav Khulbe 💻 🌍	michieriffic 🌍	Jem Galeon 🌍	Timothy Barland 💻 ⚠️	seryafarma 🌍	Dexter L. Dacanay 🌍	Dana Kathleen Redeña 🌍	Saint King Alm 🌍	Kim Santos Morano 🌍 💻	Jason Liu 🌍
Tobias Jensen 📖	singhaditya28 🌍	Kayc 🌍	n3twk 🌍	Pablo Park 🌍	Kate 🌍	Kevin Aragon ⚠️	Gautham D N 🌍	Harsh Patel 👀 📖	Jeffrey von Grumbkow 🌍
Rohit Rathi 💻	Wanrick Willemse 🌍	Shafiqul Islam 🌍	Adam Sroka 📖	Justin Horner 📖 ⚠️	Lakshya Singh ⚠️	Ciaran 📖	Md.Rafiuzzaman Khan 📖	singleparadox 💻	Andhika Haeruman Santoso ⚠️
Jade 宋玉美 ⚠️	Lundbyit 🌍	Thanasan Kumdee 🌍	K.V.Harish 🌍	Rohit Das 💻	Damian Szczypka 🌍	Koddi Evangelista 🌍 ⚠️	Pulkit Aggarwal ⚠️	Linh Nguyen ⚠️	Margu 🌍
Jibril Dauda Muhammad 📖	adico ⚠️	WyldWanderer 💻	Regina Alyssa Esguerra 💻	elenakout 🌍	Jordan Duabe ⚠️	Fanlan 🌍	DavidtKate 🌍	MTRIGUEROS ⚠️	Gustavo Cavalieri Fernandes 🌍
Maria Belan-Crawford 🌍	Matias Kinnunen ⚠️	Delaney Sylvans 💻	Kevin Roi Basina 💻	Doğa Göçmemer 🌍	Teeradon 🌍	lxmarinkovic 🌍

This project follows the all-contributors specification. Contributions of any kind welcome!

Note: The list above excludes content contributions. If you'd like to see everyone who contributed to this project, view the contributions page here! Thank you to everyone who contributes to Letra!

📝 License

Copyright © 2020 Jaye Hernandez.
This project is MIT licensed.

letra-extension's Issues

Setting Option Click Issue

Is your feature request related to a problem? Please describe.
When I click on the setting the dropdown stays open until I click it on the setting button.

Describe the solution you'd like
The settings dropdown should disappear once the user click anywhere else on the picture of extension

🐛 Update time and date automatically without refreshing

Time and date does not automatically update. You have to open a new tab to check the latest time.

🐛 Close the settings pane after selection

Currently, when we select a language(s) from the settings pane and hit 'Save', it doesn't close.

What we need is a fix in which this closes as soon as the user selects the language(s) or whenever we click outside the pane.

🌏 Add Arabic Language

I created a guide for adding a new language here. Also, if applicable, hope you can add the romanization attribute of the word.

Please go through the checklist so that you won’t miss anything!

Refereences #1

📃 Github Actions for Linting

Started with Testing Documentation #125, but there's still a whole lot of under construction 🚧 and coming soon 🔜 popping up here and there.

Will cover all of it here!

• ⚙️ Add Github Actions for ESLint and Prettier (overdue 😅)

EDIT: Will transfer these two to another issue:

• 📝 Contributing Guidelines: Local Installation
• 📝 Edit translations from existing languages guide

ล

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

🌍 Add Turkish Language

I created a guide for adding a new language here. Also, if applicable, hope you can add the romanization attribute of the word.

Please go through the checklist so that you won’t miss anything!

References #1

🌍 Add a Language

Hey there!

I created a guide for adding a new language here.

All currently supported languages are stated in the README.

Comment here if you would like to work on adding a new language. Looking for people who speak the language they want to add, just so the words are accurate!

Make sure that the voice is supported here.

Please wait for a confirmation before starting on it! ✨

🌏 Add Chinese Language

Add Chinese as a supported language.

I created a guide for adding a new language here. Also, if applicable, hope you can add the romanization attribute of the word.

Please go through the checklist so that you won’t miss anything!

🌍 Add Tamil Language

I created a guide for adding a new language here. Also, if applicable, hope you can add the romanization attribute of the word.

Please go through the checklist so that you won’t miss anything!

References #1

Update Date & Time Without Refresh

Hi @jayehernandez not to open another issue so soon, 😅 but I saw a card here: https://github.com/jayehernandez/letra-extension/projects/1#card-38630812 for updating the date and time without having to do a refresh and was wondering if it's not currently being worked on could I pick it up? I'm not super familiar with Vue although I have worked with it a little bit in the past. Anyway, I would love to work on the issue and contribute some code if it's not already actively being worked on!

🧪 Add Unit Test to Files with Jest

We've recently added unit testing using Jest c/o @tbarland77 (thank you!).

You can choose to add an issue to either the server files or client files.

No need to wait for you to be assigned to this issue, just reference it when you make a PR. Please make sure that the file you are about to add a test to does not have a pending PR or existing test in the master branch.

Guidelines for testing to follow! Check out #125 for progress on this part.

فارسی

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

984971

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

✍️ Add a Quote - Great for Beginners!

Is it your first time contributing to open source? First time coding something? This issue is perfect for you! 🥳

Letra features a small quote about learning a new language along with the word for the day, as shown here:

This is randomized everyday so that people can see a new quote that inspires them everyday!

How To Contribute

1. Go to the Contributing Guidelines to get started
2. The documentation for adding a new quote can be found here.
3. If at any part of the process you find yourself stuck, tweet me @jayehernandez_, and we can go through it together!

Some Reminders

• No need to wait for a confirmation if you'd like to add a quote.
• Just open up a pull request when you're done and reference this issue.

Problems

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

New Words for every New Tab

Hello,
How about this feature? I think it would be a nice addition.

It would be very nice when I open new tabs, I get presented with different words than the first one. Now if I open 3 tabs, I get the same three words.

.Env Issue While Following Installation Guide

Hey @jayehernandez first thanks for accepting my quote PR that was my first real contribution to an open source project! Anyway, I saw you had added an installation guide (great guide btw!) for Letra and I decided to follow along. After finishing the guide, I kept getting an error locally. Upon adding some console logs, I noticed my env keys were returning undefined. After reading a post on stack-overflow (https://stackoverflow.com/questions/26973484/how-do-i-setup-the-dotenv-file-in-node-js#43973629) it appeared the below two commands were adding double quotes to the .envs:

echo "PORT=3100" >> .env
echo "VUE_APP_API_URL=http://localhost:3100" >> .env

This caused the values to not be picked up. Removing the double quotes and running the commands like this:

echo PORT=3100 >> .env
echo VUE_APP_API_URL=http://localhost:3100 >> .env

Fixed the issue for me and I am no longer seeing any errors. Just thought I would pass this information along in case anyone else gets stuck!

🥴 Error page in New Tab

Hi! Documenting that if you haven't opened your new tab before 10:30 AM (GMT+8) today (June 30, Tuesday) you'll be getting an error page for the rest of the day.

Heroku is the server I'm using for the API and the free dyno hours (time that the server is alive) in Heroku are all used up. I can't seem to verify my account with a credit card; I've tried with FIVE cards!

Since the dyno hours will reset tomorrow, this should be fixed by then. I'm still looking into it by:

1. Contacting Heroku support as to why none of my cards seem to work
2. Searching for an alternative server if ever (1) doesn't work (let me know if you have any suggestions - free servers would be great!)

intunewinapputil.exe

Hi Team,

Could you please explain shall we create intune wrapper in Windows 7 64 bit using intunewinapputil.exe

Any system requirements for using intunewinapputil.exe

Hi sir how ryou

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.
Hi sir how r you how to use mikmon

💻 Add toolip to icons on hover

Currently, the icons themselves don't provide much context as to what they do. Adding a tooltip on hover will let the users know about each element.

Example: Hovering over the gear icon (⚙) opens up a tooltip which says "Settings".

This will be good for accessibility and can be done via Vuetify's tooltip component.

Scrrr

#82 screen Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

🌏 Add Danish Language

I created a guide for adding a new language here.

Please go through the checklist so that you won’t miss anything!

🌍 Add Hindi Language

Add Hindi as a supported language.

I created a guide for adding a new language here.

Please go through the checklist so that you won’t miss anything!

References #1

Null entries in hindi.json

Is your feature request related to a problem? Please describe.
There are null entries in the file hindi.json

Describe the solution you'd like
I will be able to update the missing entries and correct the hindi.json file

🌏 Add Filipino Language

Responsive Voice supports Filipino as a language!!

Creating the branch feature/filipino-language for this 🙌🏻

Base file for filipino words: https://docs.google.com/spreadsheets/d/1SryOwlrrzBPsUUbMRPwIomqnSPgNpw9Xf1CqOL7VJqM/edit#gid=0

Here's the guide as well for adding new language.

🧪 Testing Documentation and Github Action

This issue is created to add documentation and guidelines for testing with Jest.

References @tbarland77's Unit Testing Issue #79

To do for this includes:

• Make guideline for creating and running tests
• Add Jest Github Action which should run in every PR

Screen mirroing

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

🌏 Add Russian Language

I created a guide for adding a new language here. Also, if applicable, hope you can add the romanization attribute of the word.

Please go through the checklist so that you won’t miss anything!

References #1

🌎 Add Indonesian Language

Add Indonesian as a supported language.

I created a guide for adding a new language here.

Please go through the checklist so that you won’t miss anything!

References #1

🌍 Add Italian Language

I created a guide for adding a new language here. Also, if applicable, hope you can add the romanization attribute of the word.

Please go through the checklist so that you won’t miss anything!

References #1

🌏 Add Romanization for Korean

Please follow the Contributing Guidelines to see how you can fork this repo.

For this, since there is already a file in server/data/words/korean.json, you will only need to fill in the romanization attribute of each one.

Do let me know if you get stuck on any step.

Broken Link for Contributing Guidelines

For adding new quotes as shown in #13
The link to the Contributing Guidelines is broken. It results in a 404 page.

🌍 Add Afrikaans Language

I created a guide for adding a new language here. Also, if applicable, hope you can add the romanization attribute of the word.

Please go through the checklist so that you won’t miss anything!

References #1

Supervised Learning : Linear Regression - with Bias ( simple basic program) - : Predicating No of Pizza, based on one reservation parameters

Hi Friends
I was trying out linear regression in a basic way. As wanted to understand the blocks.

So am using a trial and error method to get the right iterations to train the system.

How do get the correct converge, ie. right iteration, tried various numbers already.

I am getting following error: -Couldn't converge within 183 iterations

I have changed the different combination of iteration, still the error remains the same.

Am pasting the code below.

data:(pizza file)
Reservations Pizzas
13 33
2 16
14 32
23 51
13 27
1 16
18 34
10 17
26 29
3 15
3 15
21 32
7 22
22 37
2 13
27 44
6 16
10 21
18 37
15 30
9 26
26 34
8 23
15 39
10 27
21 37
5 17
6 18
13 25
13 23

#defining the predict function, loss function, train the system function.
def predict_b (X, w, b):
return X * w +b

def loss_b(X, Y, w, b):
return np.average((predict_b(X, w, b) - Y) ** 2)

def train_b (X, Y, iterations, lr):
w = b= 0
for i in range(iterations):
current_loss = loss_b(X, Y, w, b)
print("Iteration%4d=> Loss: %.6f"% (i, current_loss))
if loss_b(X, Y, w + lr, b) < current_loss:
w += lr
elif loss_b(X, Y, w - lr,b) < current_loss:
w -= lr
elif loss_b(X, Y, w,b, + lr) < current_loss:
b += lr
elif loss_b(X, Y, w,b, - lr) < current_loss:
b -= lr
else:
return w,b
raise Exception("Couldn't converge within %d iterations" % iterations)

Import the datasets

X, Y = np.loadtxt("pizza.txt", skiprows=1, unpack=True)

Train the system

w, b = train_b(X, Y, iterations=183, lr=0.01)
print("nw=%.3f, b=%.3f" % (w, b))

Predict the number of pizzas

print("Prediction: x=%d => y=%.2f"% (20, predict(20, w, b)))

this is error output

Iteration 0=> Loss: 812.866667

Exception Traceback (most recent call last)
in
4
5 # Train the system
----> 6 w, b = train_b(X, Y, iterations=183, lr=0.01)
7 print("nw=%.3f, b=%.3f" % (w, b))
8

in train_b(X, Y, iterations, lr)
14 else:
15 return w,b
---> 16 raise Exception("Couldn't converge within %d iterations" % iterations)

Exception: Couldn't converge within 183 iterations

add romanization below the word

Is your feature request related to a problem? Please describe.
The characters for Chinese, Japanese, and Korean are challenging to associate with their English translations.

Describe the solution you'd like

Add a romanization line for languages with characters. This will help people who like to learn reading aside from speaking.

Please comment on the styling. tq!

Clean-up of translations for "true" and "false" in various JSON files

Something I noticed that happens during the conversion from Google sheets to JSON - the "true" and "false" values go awry (do not have double quotes), this doesn't impact the translations as such but if you're a bit OCD, should be cleaned up :)

Also the Japanese JSON entries for true/false should be fixed/removed.

$ egrep -i "true|false" *.json
chinese-simplified.json: "translation": "false"
chinese-simplified.json: "translation": "true"
french.json: "translation": false
french.json: "translation": true
german.json: "translation": false
german.json: "translation": true
hindi.json: "translation": false
hindi.json: "translation": true
indonesian.json: "translation": false
indonesian.json: "translation": true
japanese.json: "word": "FALSE",
japanese.json: "translation": false
japanese.json: "word": "TRUE",
japanese.json: "translation": true
korean.json: "translation": false
korean.json: "translation": true
spanish.json: "translation": false
spanish.json: "translation": true

Adding Most common word deck in the database and use real voice instead of voice api

Is your feature request related to a problem? Please describe.
The extension doesn't show common word often and sometimes it shows weird like a "battery" which very rarely gets used by the people learning languages and pronunciation of these words is even terrible so it would be a good enhancement if we can replace those word with most commonly used words

Describe the solution you'd like
We can use the deck from the popular app which has the collection of most commonly used words with the real voice(I can help with the languages I am learning) and this would help to learn the more common word and see in their tab

Add Contribute on Github link inside the Options Menu

Add a "Contribute on Github" link right below the Save button of the Options Menu

Discussed specs in Issue #42

How do I use "import re" and "import csv" to sift through data?

So I'm in this introduction to scripting class and it is moving really fast for my understanding. We're applying regular expressions and the task is to have our fellow students pretend to be a manager and ask us to come up with the regex code (if it even needs to be regex) to apply. Below is a screenshot of the csv along with the template code to build off of. The questions I was asked was:

Question 1) I would like to know which customers use a Visa card. Of those customers; which ones spent over $5,000 in the past 6 Months. This data will be used to provide reward points.

Question 2) I would ask the IT manager which promo codes were getting used the most and getting the most traffic to our online store. Which ones should we keep and which ones should we alter or replace.

https://imgur.com/hFRccae

import csv
import re
data = []

with open('customerData.csv') as csvfile:
reader = csv.DictReader(csvfile)
for row in reader:
data.append(row)
print(data[0])
print(data[1]["Name"])
print(data[2]["Spent Past 30 Days"])

I know it's not very productive for the learning process but I'm just a slow learner when it comes to this stuff. Any help would be greatly appreciated on what avenue I should take with this.

🌏 Add Brazilian Portuguese Language

I created a guide for adding a new language here.

Please go through the checklist so that you won’t miss anything!

References #1

Making the Sideoption as dropdown to switch between languages

Is your feature request related to a problem? Please describe.
In the left side of the screen, there is a language flag shows which doesn't support the dropdown as if I selected multiple languages to learn, It shows only one language
Describe the solution you'd like
We can add the feature like to dropdown who have selected multiple languages to learn we can provide like random, german, Korean, etc so the user can basically have the flexibility to see the word in a language they want.

Unit Testing

Hi, @jayehernandez I saw your last comment on my PR for #48 and thought I would open up a new issue for us to brainstorm about adding unit tests to Letra. First I was thinking it might be good to divide this one into two separate issues. The first issue could be to add the foundation for unit testing in Letra. This could include:

1. Adding Jest (if we decide to go with Jest) to both the client and server
2. Creating a few unit tests for both the server and the client
3. Creating / updating documentation on how to run the unit tests for both the client and the server

I think this would give us a good base to start with. After that, I think the second issue could be similar to #13. Except instead of adding a quote contributors could add a missing unit test instead. We could likely use a code coverage report to help us in that regard. I also think just having one issue for adding all the tests at once would be a rather hefty undertaking and this way it breaks it up a bit and opens the door for more contributions.

As far as unit testing Vue I'm not really familiar with it either... Most of my unit testing experience comes from writing unit tests for Angular code. I'd definitely be interested though in giving it a go and learning along the way. Anyway, I would love to hear your thoughts on this idea!

Screen mirroing

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

🐛 Long words overflow to end of screen

I didn't really test this out for very long words. Probably not a problem with other languages but it's a good thing the language I'm learning now is German 💁🏻‍♀️

Best solution would probably be changing the font size depending on the word! Would prefer this over cutting off the word using text-overflow.

Touch screen takes alot of touching ...to get workink done ...slows me down ..i would like the drop down not to cover my key board...on facial rec. make smother work and faster....

NA Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

🌍 Add Afrikaans Language

No way to select a language?

Is your feature request related to a problem? Please describe.
How do I actually select a language I'm going to passively learn? I installed the extension and right now when I open a new tab it says "oops". When I go to to settings it doesn't have any inputs to select a language.

Describe the solution you'd like
I'd like a selectbox in the settings menu that would allow me to select a language.

Describe alternatives you've considered
I'm not sure I can think of any.

Additional context**
Do I actually need to install Node.js or something else just to use this extension?

Showing language name on hover over flag (Feature Request)

First of all thanks for such a beautiful extension. This is now on top of my "new tab extensions" list 🤩 .

One thing I found that can be very helpful is showing language name along with Flag on left corner.
To not to clutter existing content on the screen, language name can be shown on hovering over flag. Which will hide back when mouse is moved out.

Right now one has to guess the language of the word from flag, which I feel is very counter-intuitive. This becomes especially problematic when multiple languages are selected in settings.

PS: I would be more than happy to work over this myself & raise a PR (if this seems valid feature to maintainers) 😄