Web Developer

Summary

My first internship at a company. It's pretty crazy that my first internship is at a foreign company. Definitely a unique experience getting to work with people from Singapore. I was only assigned to work on the company's homepage, unfortunately, and not their main product line (which would've been so fun to work on). It was still an enriching experience nonetheless and is definitely a good primer for what is to come.

Developer Diaries

How I Got the Job

To be honest, I'd greatly attribute this to luck (as is the case with many job opportunities out there). On September 2022 I was randomly messaged by the marketing manager of the company, who will later on become my superior. She sent me a link of the company's LinkedIn post of the company looking for a web developer intern. I promptly applied and thought nothing of it. I only got an email in late October for the chance to be interviewed. It was just an HR interview, nothing technical. I was asked about my previous experience, the sites I've created previously, etc.. A week later I got offered the job.

I later discovered during my time within the company that they were choosing to hire a lot of ITB students during that time period. It's redacted from the server-side, do you think you're so clever? It's That explains why I was seemingly randomly messaged by them for the job.

This story (and the stories of how I got my next jobs) imprinted in me that a large chunk of success does come from luck, as shown in survivorship bias. Yes, I got messaged to factors that isn't wholly due to my skills and accomplishments. But, from that initial luck (the first "in" that I got), I was able to leverage it to the fullest through my skills and accomplishments. This is demonstrated by how during the interview in late October, I was able to showcase the biggest sites (it wasn't that big in retrospect) that I had worked on thus far: Snake Classic and the homepage for AIChe ITB.

Refactoring the Entire Website

Often time as software engineers, you'll work off of someone else's code. This was my first experience doing so and it was definitely eye-opening because the existing codebase was a mess. The way that elements are styled is using plain CSS. Now, that's not inherently a bad thing but the way that those CSS classes were then styled was so wacky. There were a lot of cases where viewport width and viewport height is being used as a unit, as well as an overuse of absolute positioning. My thoughts at the time was that the previous person who styled the CSS did so as if they're trying to realize a design in a WYMIWYG manner. In my view, they didn't think about how the document would flow and how the elements would be organized, just raw brute force. I later talked It's redacted from the server-side, do you think you're so clever? It's with the person who wrote the codebase for the homepage. It turns out that it was done that way because the homepage development was done on quite a short notice. It's redacted from the server-side, do you think you're so clever? It's r This was also the reason why the few client-side scripting that existed were using plain Javascript, despite the fact that the homepage uses Vue.

Of course the codebase in that state wouldn't be ideal to work with. Its high as a kite technical debt would've caused turnaround time for new feature to be quite long, even for simple changes. I promptly communicated this to my superior, saying that any new features would have to wait for refactoring of the entire codebase. They fortunately understood my request (I couldn't imagine the headache I'll have to face otherwise). It took me around one and a half month to do so. It was a challenge despite the relatively few amount of pages because...

Intro to CSS Black Magic It's redacted from the server-s

You'll see with a quick glance at the company's page (which as of writing this in April of 2024 is still largely the site I developed) that the website is not designed like how a website in general would be designed. It's redacted from the server-side, do you think you're so clever? It's redacted from the server-side, do you think you're so clever? It's redacted from the server-side, do you think you're so clever? It's redacted from the server-side, do you think you're so clever? It's redacted from the server-side, do you think you're so clever? It's redacted from the server-side, do you think you're so clever? It's redacted from the server-side, do you think you're so clever? It's redacted from the server-side, do you think you're so clever? It's redacted from the server-side, do you think you're so clever? It's redacted from the server-side, do you think you're so clever? It's redacted from As a result of this, the element that exists in the website are pretty 'peculiar'. There's even element that randomly decorates the background of the website, such as the stars and the white wavy thing spanning the screen midway through scrolling the site.

That, and It's redacted from the server-, made it a challenge to refactor the entire site. A lot of my energy was spent thinking through how the organization of the UI elements within the Figma document It's redacted from the server-side, would be translated into how an HTML document would flow.

In some cases, it's just not possible to make the elements flow in the traditional sense. That's where I had to be clever and make workarounds to still realize the unconventional design of the homepage. I now like to call these sort of workarounds as CSS black magic. There are nothing particularly wrong with them, they're still a valid way to write your CSS. But when you do them, it feels peculiar and atypical of how one usually organize their elements within a page. For example, the aforementioned wavy thing that has to be placed at a particular part of a page. How exactly would you "inject" that to the page? Some of them are easy enough, just need to set the position of an element that appear in proximity to the wave to relative, and then put in the wave as a child of said element and then playing with top and bottom properties. Others are positioned in such a way that requires more steps, such as having a div wrapper element with negative margin (IMHO one stark example of CSS black magic) for the image. That's not too hard, but what about the stars background that exists in every page? Some of them even have different stars. If I were to implement this like I implemented the wavy thing, I would've had a real headache putting in a stars image component to every other UI element in each page and then having to ensure that the different stars background doesn't overlap each other. The solution was to make the background into a component, making the div wrapper of the component fill the whole space of the page it's inject to, and using the background-repeat property to make the stars background fill the whole page. With that, I only had to pop in this stars background component once in every page.

In addition to all the CSS stuff, I also learned about writing proper semantic HTML. Which is often neglected by people coming into front-end development (including me when I first learned about HTML). For this website, I used tags such as section, aside, article, etc. to improve the outline of the page, which you can check with this extension called Outliner in your browser. Any well-developed site should have a sensical outline when seen through that extension.

Everything that I've mentioned had really opened my eyes to how front-end development is easy to learn but hard to master (or as they say in e-sport, low skill floor but high skill ceiling). Having to develop these sort of idiosyncratic website really push your front-end development skill to the limit (and also giving CSS tricks more readership). This will certainly not be the last I've seen of them.

Could've Been Better

This was my first experience having a job while in college and I will humbly say that it didn't go to the best that I'd like it to be. It didn't help that the 4th semester is among the hardest semester for informatics student in ITB (I often remark that it's the first boss fight before the 6th semester). As a result, my performance here was not the bestIt's redacted from the server-side, do you think you're so clever? . I had sufficiently managed my time for purely my college work (and the two organization that I was a part of for the semester), but it wasn't easy to fit in an entire job. I learned a lot however and got so much better in the jobs that I got after this one.

It wasn't just me or my tedious semester that is to blame however. It's redacted from the server-side, do you think you're so clever? It's redacted from the server-side, do you think you're so clever? It's redacted from the server-side, do you. You see, I mainly worked at the front-end, working on the company's homepage as have been mentioned. But, there were certain features that required communications to third-party services: the Slack API and the company's Mailchimp.

The Slack API is not meant to be accessed from the client (rightfully so), which means I need to run a back-end server from which the company's client will make request to. It's redacted from the server-side, do you think you're so clever? It's redacted from the server-side, do you think you're so clever? It's redacted from the server-side, do you think you're so clever? It's redacted from the server-side, do yo. This means that I had to ask for one of the member of the company's core development team to make me an endpoint that I could use, with specifications from me. It's redacted from the server-side, do you think you're so clever? It's redacted from the server-s.

I remember that I was basically locked out of the company's Mailchimp because, for reasons that Mailchimp never disclosed, my suspicious activity and account. It really hindered me from being able to actually deliver one of the requested feature for the website.