Web Development

How did I spend my summer break? - Internship at Staizen

This is my first summer break as a computer science student. At the start of my bachelor's journey, I planned to have an internship that is not coordinated by the school every summer. This is my first internship experience after starting university.

Just to get this out of the way, the consultant I interned at is a Singapore and Brussels based Digital transformation consultant called Staizen. It was a positive experience and I enjoyed my time there more than anywhere, be it academics or professional environments.

What does Staizen do?

Disclaimer: This section is purely my views, Staizen did not get to review this before I post it.

"Staizen was founded in 2019 to modernize businesses, supporting them in building and running digital platform and products." - This is more or less their tag line. I don't think I will do them justice, but I will try to explain what they do. Staizen takes the decade-old and inefficient processes of their clients, and modernize them with practices and processes that boost productivity by following agile values. This not only applies to the technical teams but also in the digital products and business processes.

As an aspiring Front-end Engineer, the way Staizen build products fascinated me. One of the hallmarks of front-end development is the constant-shifting environment. Frameworks come and go very often, and thus, companies often have to rebuild their front-end products from the ground up to take advantage of the newest and greatest or rely on legacy support from post-popular open source projects. This is a well-known gotcha of front-end development. But, this does not hold for everything. By leveraging the Web Components specification, Staizen splits front-end system into 2 separate parts, Apps and Components.

By designing and building the components separate from the client app, Staizen could reuse all of the components for each client. Want to start a client project? Just use our pre-configured CRA template. You will get localization, Typescript support, Sass support all out of the box. Want a tooltip or dialog or date picker while building the app? Just import it from the design system (we are not using ionic, I am just using this as an example). Essentially, only one copy of every component has to be built. Every app will simply consume it. Each client also does not have to maintain their copy of the components. Since the Web Component specification is widely supported, our clients are not 100% reliant on open source frameworks such as AngularJS or ReactJS. When a new fancy framework appears, we could just carry our existing components over. This allows our clients to innovate much faster and spend more time making great experiences for their customers, letting Staizen worry about the technical implementation and maintenance at the front-end.

What was my job scope?

I was an engineer at the front-end team. Essentially, my job is to craft components for our internal design system, working closely with UX designers to ensure that their ideas are translated into execution properly.

What did I do "on the ground"?

Let me describe my job during a 2-week sprint. At the end of a sprint, I will meet with every front-end engineer and UX designer to sort the tasks for the in-coming sprint. This is a step-by-step process of how a task is completed:

After dragging my assigned task to "In Progress" on Jira, I will open up the relevant Confluence documentation to look at the design specification for the component I am about to build.
After coming up with a rough MVP, I will show it to the Front-end engineers during our daily sync up to look for alternative implementations. I will also check with the UX designers to make sure I am covering all edge cases. (e.g. is the tooltip supposed to hold HTML content or does it only support strings).
When the task is done, I will pass the Jira ticket to my tech lead. This is when he reviews the pull request I made, give any feedback and scrutinize the implementation. I will update if any changes are required.
Once the current task is done and the tech lead approves the pull request, I will move onto the next item in the sprint backlog.

This is what I do daily. There are also side tasks that I do, such as making a proof-of-concept with figmagic to demonstrate how to export design tokens, writing documentation to explain why certain decisions are made, explaining why one library is chosen over another.

What were some highlights?

My views are considered
When we are crafting components for the design system, the tech lead makes a conscious effort to hear every engineer's opinion. Do we use composition or expose a prop for the API? Should this widget be a standalone component or we could do away with just CSS? Every engineering decision is well understood by everyone on the team, each major decision is weighted against everyone's opinions. This means I could prompt questions when I am concern about the performance, maintainability or API design of any components, regardless if I am assigned to it or not.

There is good rapport throughout the company
Since there are 3 company bondings per week, I interact frequently with UX designers, QA engineers, HR staff and other colleagues. Knowing my colleagues at a personal level means I could interact with them more informally. This directly translates to more productivity for me. We are comfortable to message each other frequently to clarify certain specifications in real-time or video call to discuss any issues.

Remote work
Due to COVID, my entire internship is conducted remotely (other than a farewell dinner with 4 other colleagues). This means I could work whenever I want to as long as my tasks are completed on time with good quality and if I attend the discussions prepared. The lack of face-to-face interaction with colleagues is a bit of a bummer, but it can't be helped in this period.