Projects of a Junior Front-End Developer

Hi all, 

Thanks for checking this out! My name is Arix and this article will be about my progress through the COVID-19 period thus far.

Project 1: Upgrade Personal Portfolio

Overview

To begin with, I completed my portfolio website I had been building since January. The constant need to enhance the visual appeal and complexity to the static site motivated me to dabble new technologies such as Nuxt.js and CSS animations through the Intersection Observer API. Feel free to check out my site:

Unlike previous websites developed, I chose to code this project with an emphasis to provide a greater experience for mobile viewers as my audience are more likely to view through their mobile phones. Hence, it is crucial that the website is mobile responsive and looks good in every screen size. 

Since the end product is a static site, data will be stored in the parent component and passed as props to the components. If data requires any updates, I can just do that in the parent component easily.

Insights / Challenges faced

This project allowed me to discover creating animations from vanilla JavaScript and CSS is actually not that simple. Sure, assigning animations to each element on a web page can be easy, but stringing a sequence of animations is the real challenge since multiple aspects have to be considered such as the delay of each animation to run a successful sequence. 

This project made me realize the potential of using frameworks like Vue.js to manage this. In modern JavaScript frameworks, the ability to generate content with list rendering, for example Vue.js, the "v-for" method is provided for this. 

This method not only gives you the access to items in the list but also access to the index of each item, which will help with the calculation of animation delay each element should have.

<template>
    <li v-for="(item, index) in navigation"
        v-bind:style="`animation-delay: ${delay * index}ms`">
        {{item}}
     <li>
</template>
<script>
    module.exports = {
        data(){
            return {
                navigation: ["Home", "Work", "Projects", "Etc"],
                delay: 150
            }
        }
    }
</script>

Overall, the project provided me a better insight on frameworks in general and has allowed me to understand the flexibility it provides. Previously, I would always create static sites using vanilla HTML, JavaScript and CSS, but right now I see how much it was actually limiting my ability to design and manage my code.

Project 2: COVID-19 Legal Resources Database 2.0

Overview

Following, through a collaboration with Singapore Management University and a group of friends(@dywan), I am redesigning and upgrading the COVID-19 Legal Resources Database launched last week with the goal of curating resources, hopefully useful to the community. This will serve to be the 2.0 of the database and will be released once completed. Do check out my progress here:

Project 3: Bito, the Effective Bill Splitter

Overview

To further enhance my UX design, I worked on a redesign of a prototype for a school module. Bito is an application that allows users to effectively split bills with their peers. Why redesign an already completed product? Well, there are always improvements to be made. Design trends are always changing and I believe it is best to explore them by experimenting on past projects.

Insights / Challenges faced

My goal was to find a new design direction and do my best to emulate that in my new prototype. It’s been a year since my friends (@nicolaswee, @jiaqiloh, @kelvin-ngsl) and I created the initial mock up for Bito. Back then, gradient backgrounds were trending and we made it a point to include that in our core design. This time I hope to create something much minimalistic and clean with a smaller color palette. Check out some of the current mock up i have created with Figma.

Project 4: Task Tracking Application

Overview

 Lastly (for now), I was assisting in designing a task tracking application for @baoxiantsang. I decided to use parts of the design for a personal project as well. A few months back, I came across Electron.js and thought it was a good chance to experience developing desktop apps using JavaScript. Creating a hello-world electron application with vanilla JavaScript is easy, but I chose to incorporate Vue.js in my application as I prefer Vue’s use of single file components.

Insights / Challenges faced

As the application is still in development, there are plenty of challenges to overcome. For example, the mapping of keyboard shortcuts to the Electron application. In the grand scheme of things, I envisioned the use of directional keys to navigate through list items, however, from past experiences, html elements other than <a> tag are not focusable by default. This would mean a personalized navigation solution will have to be developed. Currently, the base application has been developed with its tabs functioning properly and I will be working on the features for each section.

Hope everyone's doing well

Overall, I hope this article taught you something. I will be making more posts on the projects once they are completed. If anyone has a similar passion in building websites and would like to work on products together with me, feel free to drop me a mail. 

Stay safe everyone! #coronayolona