Working as developers in Canada means collaborating with multicultural teams and programmers from around the world-many of whom are not native English speakers.

A common question we've asked our coworkers: do you need to learn English before learning how to code? In short ... yes. Programming languages, open-sourced projects, dev tools, and documentation are often written exclusively in English-which is considered the industry standard.

Thus, coding without a proficient level of English presents several unique challenges:

  1. Documentation - meaningful variable names, function names, and comments are essential in writing clear and reusable code. Non-english speakers agree that learning a few key words to code with is nothing compared to the burden of writing meaningful documentation that can be understood by a professional & international audience.

  2. Learning - most docs are not translated and IDEs often break when running comments in different languages. VSCode's current language configurations do not convert Intellisense recommendations and syntax documentation, thus making the barrier to resource access quite high.

What it does

C0D3L8R allows users to hover preview & translate variable names, function names, and comments from their lang-of-choice (LOC) to English, on the fly, and replace any given word with its translation using hotkeys (ctrl+shift+T).

Alt Text

C0D3L8R also translates VS Code IntelliSense definitions from English to LOC, while hovering above any given code snippet, for convenient learning within the text editor.

Alt Text

Language-of-choice can be selected in the VS Code Settings menu. Alt Text

The original and translated words are recorded in a local CSV file for every non-duplicate translation instance. This file is uploaded to Dropbase to create an online database of common translations. Users can login and access their previous contributions to the live db. (See "What's Next" for open-sourced extension ideaz)

Alt Text

Alt Text

Alt Text

How we built it

We used the VS Code Extension API to build the extension. Translations were called from the IBM Watson API and recorded in a local CSV file which can then be uploaded to Dropbase and viewed on our website. The website was built with React and hosted with Firebase.

Challenges we ran into

It was our first time building an extension for Visual Studio Code, so learning how to create a new extension with JavaScript and reading the documentation to enable certain commands took some time to figure out. Since our extension has several different components (keybindings, hovers, and other commands), we needed to search the docs manually for each of these features.

We also ran into some difficulties integrating the IBM APIs into the extension translating but were able to successfully figure out how to get the response data from the promises. Using the extension to parse CSV files was challenging, and we had to familiarize ourselves with input streams. Using fs and fast-csv helped us successfully write to and parse a CSV file, recording all translations and retrieving existing translations so identical API calls don’t have to be made.

We tried using the Dropbase platform to upload the translation data from our extension, and ran into errors with the Postgres database and API uploads. Once the database was reset, we were able to successfully generate an access token and make PostgREST commands and display this data on our website.

Accomplishments that we're proud of

  • Completing the extension
  • Integrating with IBM Watson APIs
  • Uploading translation data to Dropbase
  • Finishing 3 bowls of instant ramen and 2 bubble teas as a team

What we learned

We learned to create a VS Code Extension with JavaScript, using the IBM Watson Language Translator API to translate variable and function names for different languages. Our team also learned how to parse and format CSV files and upload them to Dropbase using their APIs. We learned to perform queries with a Postgres database, connecting with it and retrieving data with PostgREST.

What's next for C0D3L8R

The Dropbase translation database is key in making this project open-sourced. As a machine's translation may not be the most accurate or nuanced version, we hope to add functionality for version control and upvoting so users can come to a consensus about the most widely accepted translations for common words and definitions. Users will be able to update their local CSV files, downloading from Dropbase, to reflect community changes.

Built With

Share this project: