Hey there! In this blog, I will be sharing my journey on how I switched from being a tester and became a software developer. But first, let me tell you the story of how I became a quality engineer.

Background

By the end of my college, I lost my edge in programming. I submitted applications to several companies as a software developer but most of them either rejected me or did not respond. A friend helped me by referring me to a company looking for a test automation intern. This whole idea of automating tests got me interested and made me think that this might be the new thing in the near future. On December 1, 2015, I got hired as a test automation engineer and eventually got a salary-paying job.

My Introduction to JavaScript 💻

I got hired as a test automation engineer in the first quarter of 2016 and I became curious about what would an expert in this field look like. It led me from using the company's desktop application to implementing an open-source test automation framework called Nightwatchjs, an end-to-end test automation package published in Node.js. During this time, I had to learn JavaScript and Node.js to configure things in Nightwatch. Since JavaScript is a multi-paradigm and high-level language, it allowed me to relearn coding through functional programming easily.

I had fun using the language and everything was easier compared to the languages I learned in college such as .NET and C#. On top of learning JavaScript, automating test cases made me feel like one of those hackers in movies where multiple terminals are opened and logs fall down like a waterfall.

Aside from creating test scripts for end-to-end UI test cases, there are instances I had to do manual testing which I did not enjoy as much as automating tests. This led me to confusion if I was really happy being a tester. As test automation implementation grew to multiple teams, the management knew that there was a need to centralize all test results to monitor and maintain quality for testing deliverables. I was assigned to create the frontend of a test automation dashboard and this was the time I discovered React.js.

Tester in FinTech 📲

After more than 4 years of creating hundreds of test scripts, maintaining a test automation framework, and developing frontend of a web app, I finally decided to venture out for a new company. With perseverance, I was blessed and hired as Senior Quality Engineer by a well-known FinTech in the Philippines called PayMaya (also known as Maya).

I was assigned to a mobile development team filled with talented and skilled people. The first few months were tough for me because of the learning curve. The team was delivering deliverables faster than I am used to and I had to learn new things along the way which included cloud services like AWS and Firebase. It amazes me how technical testers (QE) are in the company and even follow the test pyramid model when writing test scripts.

I enjoyed every technical task that a tester could do. Everything was great from the mobile app and API test automation to GitLab CI/CD, but I still had to conduct manual testing at some point. Eventually, this led me to ask myself "if I could do all these things maybe it is better to be a developer?".

The Journey Starts 🛣

I started the journey to be a developer by trying out things that were trending and Flutter was one of them. I honestly did not know what kind of developer I wanted to be so I tried creating simple mobile applications with Flutter while learning it through an online course in Udemy. In addition to this, I had to learn new things in JavaScript/TypeScript for the deliverables at work. Simultaneously learning different programming languages is a recipe for confusion and burnout.

Given the situation I put myself into, I had to strategies my developer roadmap while utilizing the skills I have in my arsenal. These are the questions and checklist I followed in becoming a developer:

What Kind of Developer?👨🏾‍💻

When I was using React.js in my first company, my goal was to become a full-stack developer. Knowing that backend development is a whole new thing to learn, I decided to focus on becoming a Web Developer and eventually climb my way to becoming a Full Stack Developer.

Which Programming Language and Framework? 🖼️

With more than 6 years of experience in the industry, JavaScript together with Node.js as a run time environment is always my go-to language. Since Node.js has the capability to deliver production-ready web applications, I think it is obvious that I will be going with this language. This also means that it would open the opportunity for me to learn backend and mobile development in the future without the need to learn another language. But what about the library/framework?

For JavaScript library, I chose to continue my learning with React.js and other libraries such as Redux for state management. As for the framework, my goal was to learn about Next.js since it uses react libraries underneath and offers better performance for web applications with better development experience.

Master the Basics 🤺

I started by buying an online course on Udemy. A friend of mine recommended an instructor called Zero to Mastery. Their course for React.js was complete enough to help me get started with my journey. As I watch and follow the course, I noticed that I need to learn some other things aside from React.js itself. So I created a checklist in addition to the course's content to track and assess if I was ready enough for the next level.

1. HTML - to structure your website
    1.1 Tags
    1.2 Forms
    1.3 HTML Semantics
    1.4 SEO Best Practices
2. CSS - to style your website
    2.1 Selectors 
    2.2 Display - block, inline-block, none
    2.3 Positions - relative, static, absolute, fixed, sticky
    2.4 Box Model - padding, margin, border
    2.5 Flexbox
    2.6 CSS Grid
    2.7 Media Queries for Responsive Designs
    2.8 Pseudo Elements
    2.9 Pseudo Classes
    2.10 Animations
    2.11 Transitions
3. JavaScript
    3.1 Basic Syntax - promises, async away, fetch api
    3.2 Advance topics - classes, scoping, hoisting, es6+ features
    3.3 DOM Manipulation 
    3.4 Create, select, append elements
    3.5 Event Listeners
4. Frameworks
    4.1 CSS Framework - I went with Tailwind CSS
    4.2 Frontend Framework - Next.js
    4.3 Deployment Platform - Vercel

Please note that this only served as my guideline.

Build a Portfolio Website 🎴

It is common for a developer to have a personal website to showcase projects and skills. As I watch and follow the online courses, I noticed that I always depend on what the instructor told rather than exploring on my own. This made me realize that I could learn faster if I have a personal project while learning and taking the course. I decided to create version one of my portfolio website using the following:

• Figma - to create UI designs

• React.js - the frontend library for the web

• Tailwindcss - personal choice of CSS framework

• Vercel - deployment platform

After weeks of designing and creating my first portfolio website, the end result was a disaster. Low lighthouse performance result, inconsistent designs, and dull content. I knew that this would happen knowing that I was lacking the experience. I consulted a developer friend on what should I do especially with the design and he said "Do not compare your website to others and just put your personality to it". This gave me motivation to only focus on my work and my creative juices came to life. That push gave birth to my current and second version of my portfolio elser.info

Submitting Applications 📄

After months of grinding to learn development while building the portfolio, it was time for the real challenge, the interview. I started submitting applications to recruiters on LinkedIn as soon as I felt comfortable and confident with my skill set. Many questioned my developer experience knowing that testers were not as technical as developers. My instinct was to always lay on the table that my experience in test automation included coding the actual test scripts.

After more than a month of applying for a developer role, with God's grace I was able to land my first developer role in one of the leading banks in the Philippines called Metrobank. Although I was hired as a contractor, I am happy enough knowing that this could serve as my stepping stone for a bright developer future ahead.

The New Beginning 👣

At the end of this blog, I hope I have inspired people that are planning to become a developer. It does not matter if your current work is not related at all since career shifters are common these days. What matters is that you are motivated enough to do the grind. Also, enjoy and love what you do! This is my journey and yours could be different. Thank you for reading and stay adventurous!