Just like many of my fellow high school seniors across Virginia, I was stunned to hear Governor Northam’s announcement on March 23: classes were cancelled for the rest of the school year due to COVID-19. Along with this, senior rites of passage such as prom, graduation, and summer beach trips were to be cancelled, leaving me with no obligations and lots of time.

After a few days of typical bored teenager activities, I figured I might as well use this time productively, to learn something new and build valuable experience. I’ll never have this much free time again in my life, and I want to make the most of it!

At the beginning of May, I reached out to Modus co-founder Jay Garcia. The innovative spirit and work-hard-play-hard mentality at Modus really appealed to me and I immediately knew that this was a place that I could truly learn and further develop my skills. I officially became a Modite on May 16. I couldn’t have asked for a better start to my experience and I am looking forward to learning so much more over the next few months.

My First Day At Modus Create

In several of my previous jobs (lifeguard, camp counselor and research intern), the first day at work involved hours of introductory onboarding presentations, endless mounds of paperwork, and someone to hold your hand through the entire process. Thankfully, this was not the case at Modus!

My first day started off with a lighthearted conversation with Jay via Slack about our shared interest in DJ-ing and I was put right to work within half an hour of starting. I was introduced to one of Modus’ developers, Michael Tintuic and tasked with making improvements and testing on Modus’ Ionic-Vue library, an open-source adapter that bridges together the Ionic UI library with Vue and Vue Router. Just like that, I was thrown into the mix of things and was ready to get started.

Having Fun When Setting My Dev Environment

My previous development experiences are mostly in the classroom. I’ve worked with Java, Python, HTML/CSS and several Javascript frameworks (Node, Express, React, etc). Last year, a few friends and I worked together on a web app for our school that connected struggling students with peer tutors, using a React front-end with a Node/Express backend connected to a MySQL database. However, this is my first time working at a tech company like Modus and many of the frameworks I’ve been working with are brand new to me!

For the first couple of days, I spent my time learning the basics of Vue.js and trying to understand how the Modus Ionic-Vue library was implemented on the client side. It turns out my previous experience working with React actually came in handy as there are many similarities between Vue and React in their one-page component-based file structure.

One of the tasks that I worked on was writing unit tests. I was originally unaware of what these were or how they worked, but essentially unit testing is where a developer designs tests to validate that each component works as intended. For this task, I used Jest, which is a Javascript testing framework. Unit testing also works with other libraries such as Mocha but I have yet to work with them.

In the Ionic-Vue library, most of the files are written in TypeScript. This caused me some issues when trying to write unit tests for functions and components in the library, as by default Jest works with plain JavaScript files. After several hours of browsing StackOverflow, I found that the solution lay in tweaking configuration files, such as jest.config.js and ts.config.json. These files adjust settings for jest unit testing and how the compiler reads/transpiles TypeScript respectively. Here are some of the changes that I made:

First, I installed the ts-jest library by running this in my command line.

npm i -D ts-jest @types/jest

Jest.config.js

1. Changed the moduleFileExtensions property to accept files with a TypeScript file extension
2. Changed transform property for jest to use the ts-jest library, which allows unit testing with jest for typescript files
3. Changed testRegex to look for a test file written in typescript

Ts.config.json

1. Under the compilerOptions list of properties, I added "esModuleInterop": true which allows compatibility with babel and ts-jest

After tweaking these files and ensuring that the correct dependencies were installed, I was able to do some basic tests successfully on components in the Ionic-Vue library. Stay tuned for my next blog post where I’ll show you some of the unit tests that I’ve written!

Insights from An Intern

• Coding in the real world is very different from coding in class. Computer science classes teach you the basics of how to code (syntax, algorithms, etc), but applying that knowledge is a whole different story! Unlike the classroom, there are no grades and no correct answer, which means you have to think outside the box and utilize many different resources to come up with solutions.
• Learning is part of the job. I spent a majority of my time, more than I expected, on learning the basics of Vue JS, unit testing, Ionic, Webpack, etc.
• StackOverflow posts, Medium articles, and Youtube videos were my lifeline when running into random errors and issues.
• “You do not really understand something unless you can explain it to your grandmother” – Albert Einstein

Conclusion

I’m glad to say that the beginning of my internship has been tough but rewarding work. Even as I am working remotely from the isolation of my room, I have never felt alone while working at Modus. Shoutout to Michael for taking time to answer my questions and to guide me through my confusion. There are always people to reach out to via Slack when I need help with an issue or just want to talk about something. I feel glad to be part of a community that includes people from countries all over the world all working together towards a common goal. I am so excited for the next couple months as I continue to grow as a developer. Stay tuned for more blog posts as I continue my software development journey at Modus!