DEV Community

hitesh saini
hitesh saini

Posted on

Using Javascript to Improve upon my english language skills!

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

// 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');
    },
  };
};
Enter fullscreen mode Exit fullscreen mode

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

// 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');
    },
  };
};

Enter fullscreen mode Exit fullscreen mode

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!

Top comments (1)

Collapse
 
imakashrana profile image
Info Comment hidden by post author - thread only accessible via permalink
Akash Chauhan

The importance of gaming in Javascript is vast. It helps with hand-eye coordination, problem solving, and logic skills. Gaming can also relieve stress, improve moods, and promote social interaction.
Here find how you can improve your JavaScript skills with Javascript gaming

Some comments have been hidden by the post's author - find out more