Using Javascript to Improve upon my english language skills!
Tags: javascript, react
Published: 2021-01-31 17:32:42

This is the story of my journey where I am going to share how I am using my technical skills to improve upon my soft skills.
Please bear with me, As this story becomes from non technical to super technical or vice-versa.
 As we know best way to learn a language is to read or write in that language.I was already reading the books (mostly technical books). I also had to Improve upon my writing skills so I found a website called 750words.com where user can write whatever they want in 750 words on daily basic in their private post. So I started to write 750 words on daily basis. I was also looking for ways to practice my spoken English and also so much typing sucks! when it is not code. one day I got to know about speech Recognition API from MDN docs. so I quickly figured out if I can integrate this API in Chrome extension then this will be available on every page in Chrome browser to type with voice, So I started to develop a Chrome extension called speech recognition Toolkit[https://github.com/fxnoob/speech-recognition-toolkit]
 core of this extension  contains only turning on and off the  speech recognition API, excluding this everything is handled as command, which is truly extendable.
 
## So to write a new Command in this chrome extension

`new_command.js`

```javascript
// just write a new function with this signature
export default async () => {
  const commandAlias = 'name_of_command' 
  const description = 'description of command'
  return {
    id: 'BAC548F8-69DB-07DE-2AA6-E687AEF889CC_random_id',
    name: commandAlias,
    description,
    match: 'exact',
    exec: async (text, options) => {
      // your logic
      // this will be executed when command is spoken
     // text contains the recognized text 
     // options is an object which contains dom object
     // dom object has useful methods such as simulateWordTyping
    // simulateWordTyping invokes the keyboard events to type words
     const { dom } = options;
     // type anything you want eg. even emojis
      dom.simulateWordTyping('your🌻text');
    },
  };
};
```
And just Import this new file in `https://github.com/fxnoob/speech-recognition-toolkit/blob/master/src/services/commandsService.js` to include it in the codebase. isn't that dead simple?

This way I got to make some useful commands such as
*  `typing emojis with voice` from list of 1800 emojis.
* Doing basic maths with voice (add, subtract, multiply)
And couple of other useful stuff.

As need grew, I wanted it to work in my native language too, As I don't know how to type in my native language with available keyboard. Again `Speech Recognition API` came into rescue. It provides support for multi language speech recognitions with different dialects for free.
So first I had to translate every existing command to all languages which were supported in the Speech Recognition API.
so I maintained json files containing translation for each text/command in every supported language and I created a Service called translation service[https://github.com/fxnoob/speech-recognition-toolkit/blob/master/src/services/translationService.js] to have translation for any text based upon its key and selected language ID.

## So to write a new Command for every supported language

`new_command.js`
```javascript
// import translation service file
// but first append your translations in json files available in the src/app/_locales directory of project source.
import translationService from '../translationService';
// just write a new function with this signature
export default async (langId) => {
  const commandAlias = await translationService.getMessage(
    langId,
    'command_label'
  );
  const description = await translationService.getMessage(
    langId,
    'command_cmd_name_description'
  );
  return {
    id: 'BAC548F8-69DB-07DE-2AA6-E687AEF889CC_RANDOM-ID',
    name: commandAlias,
    description,
    match: 'exact',
    exec: async (text, options, callback) => {
      // your logic
      // this will be executed when command is spoken
     // text contains the recognized text 
     // options is an object which contains dom object
     // dom object has useful methods such as simulateWordTyping
    // simulateWordTyping invokes the keyboard events to type words
     const { dom } = options;
     // type anything you want eg. even emojis
      dom.simulateWordTyping('your🌻text');
    },
  };
};

```
That's how, this project became useful for others as well. You can contribute to the project as its open source or just use it if you like.

In next post I'm going to share how I made it work with Different environments other than Chrome pages eg. Windows/Mac/Linux with the help of ElectronJS + chrome extension[https://github.com/fxnoob/voice-typing-for-desktop]. 
Have a Good day!