Mono - A Brief Introduction
Mono is a web app I started in about 2018, and was the first project that I worked on as a self-taught programmer. I wanted to go as fast as possible from the kind of app I had in mind to a fully functioning web app., and given that I was teaching myself along the way it’s not bad, though full of unconventional code. 
Quick Disclaimer: The code on this project is absolutely not an example of best-practice coding - it’s more the opposite: an example of how self-taught programmers figure out how to code.
How to Get The Code
Mono is a public repository on my Github account. You can download the code from the github repository here. Click on the green code button, and then click on “Download ZIP”. Mono does not require any frameworks to be installed, and there is no database, so it is a static web app. in that sense. There is no code precompiling, so it can just run directly from the files in a browser. The web app. can be run on your computer by unzipping the file downloaded from github, and then opening the index.html file with a web browser.
The Initial Goals and Inspiration
The motovation
Mono is a collection of annotated cards for use as a language learning tool. As an English foreign language teacher in Japan, I was often frustrated by my work conditions. I look back on it now as symptomatic of the lowered expectations of employers, but even so my situation at work, and that of many other English teaching foreigners, was basically the same: we found ourselves trying to teach English in a variety of places, and with the entire spectrum of English levels, and social groups, but often massively under-resourced, and unable to communicate the problem to non-English speaking colleagues. My goal was, then, to try to tackle two related problems: 1) getting concrete nouns and easy-to-communicate verbs, and adjectives in a simple visual form for use as teaching aids, and 2) building a bigger repository of word cards to help myself learn Japanese and Italian.
One of the things that seemed necessary to start a career change as a web developer was a portfolio of web dev. projects, so this seemed like a good project to work on as my first dive into front end coding. It concerned an area I was interested in, and it was trying to solve a problem that was very apparent in my daily life.
Similar Sites Out There
Flashcards for language learning is nothing new of course. Finding good material can be difficult though. Commercial offerings such as japanesepod101.com, Duolingo, Busuu, Memrise, tofugu.com, wakikani.com are great. I highly recommend them. On the teaching resources side of things, there is also a huge amount of material online. Into this space, then, I am going to drop my own project that will hopefully have its own identity, and may hopefully one day help people learn a foreign language.
Here is a quick look at my influences, and “competitor” sites:
1. Learning Chocolate
https://www.learningchocolate.com/
I absolutely hate the visual side of learningchocolate’s annotated vocabulary app, and yet this site is basically offering the same functionality that I am looking for, is multilingual, and has generated a lot of traffic it seems. My responsive, svg design just seems better, even though I am way behind learningchocolate in terms of content.
2. Badadum
Babbadum on the other hand, has a professionally designed flavour, is completely responsive, and almost seems like someone from Monty Python inspired it. This is basically, everything I would want from a vocab learning web app. The only thing I would want here is integration into a wider, longer, and structured learning program, but this was beyond the scope of the babadum developers’ project it seems.
What I learnt, Features and Code of Interest
Mono presented a load of coding challenges that I had to work out on my own. What may seem as just everyday work to professional programmers, often took hours of reading, and mistake-fixing along the way. Here is a list of some of the stuff I worked out how to do:
- Breaking the code into separate files: HTML, CSS, and javascript
- Basic CSS - no bootstrap
- CSS media queries for responsive design
- Simple CSS animations, drop-shadow effects, and hover effects
- Inline SVG coding
- Data storage in JS objects without any database
- Basic (non-standard) templating using interpolated variables in multi-line strings
- Absolute and relative html element positioning to get overlayed annotation graphics
- Creating share buttons, creating OG header tags so pasted links will show website preview image and description
- Using a free text-to-speech api
- Using javascript insertAdjacent to insert variable filled html strings held in Javascript (this would normally be done by iterating over instances of an object ina MVC structure)
- Editing and formatting code using notepad++
- Version control using git and Github
- Making a favicon (the little image in a browser tab)
- Creating an embeddable widget
Mono - Current Development As of 2022
As of 2022, and after some more formal training as a developer with Lewagon in Tokyo, I now have many more tools at my disposal to work on Mono. It has become more clear to me recently however, that the main problem I am having is the direction and intent of the project. I think this is probably normal when working towards a viable project/product, though there is a load of stuff to be done. Prior to the coding bootcamp I did in 2021, I really had no idea about developing a genuine web app. product, I had always been completely self-taught, and directed by what I wanted to see as a user/language user/language teacher. Now though, I am starting to see mono as forking into two different projects that are different in their functions. These are: 1) Mono as a multilingual repository of annotated/labeled images, and 2) Mono as a Japanese language-learning focused web app.. So now starts the long process of pivoting the project into what will hopefully be a better, more honed web product.
The New Mono Variant Projects
monol
OK, so it’s difficult getting a domain name with mono. Many others out there have wanted “mono” as their domain name it seems, so “monol” may work as a new working title.
Monol will be a repository for annotated images with multilingual word card translations.
JPNLesson
JPNLesson will take the other role as a Japanese learning web app. This is currently under development and is hosted here on github.
JPNLesson site »
JPNLesson code »
JPNLesson blog page »