I have 3 years experience in WEB frontend development. Currently use Vue+TypeScript+NodeJS+MongoDB as main tech stack.
I value the importance of clean&reusable code and UI mockup. I always insist to adjust CSS as same as possible with mockup.
I can speak English, Japanese and Chinese fluently.
Before getting into frontend development, I had 1 year experience as an digital advertising personnel in a Japanese company, and 6 monthes experience as a exchange student, which gave me lots of chances to communicate in foreign languages.
It takes a while for me to get familiar with people. But I become very friendly and a bit chatty after getting familiar with someone.
And in my spare time I like to watch movie, go for a ride, fix broken things and play video games.
Additionally, I'm enthusiastic about education. I had 3 students in HTML course and 1 student in Japanese course. It give me confidence when see students getting understanding of new knowledge.
Have experience in React but use Vue as main stack now. Also use Nuxt as SSR solution
Familiar with technic related (or not related) to Vue's ecosystem. Meanwhile I'm fimiliar with data visualization since I had lot's of projects related to chart.
And, I always use TypeScript and ES6+ to improve my code quality and maintainability.
Technique I familiar with:
Instead of using UI frameworks, I'd like to customise a small CSS system for each project with Sass+TailwindCSS+BEM Naming convention.
It gives me more flexibility to adjust CSS to be closed to markup.
Only in projects which are not required for special UI design, I'll apply frameworks for effectiveness.
Also I like to use CSS variable to dark mode theme and RWD design.
Below are thing I fimiliar with:
PWA hasn't not fully supported in iOS, so instead of build full PWA supported APP, I usually combine Service Worker + Cache Storage + IndexedDB to increase page response and offline experience.
Web Component is one of good solutions to build micro frontend.
I used to build a cross-platform (Web & iOS & Android) synchronous rich text editor.
It uses StencilJS to build up Web Component, Web Socket and Vert.x to handle content synchronization in multiple editors, and Quill to provide basic rich text menaging feature.
It's something like dropbox paper. It can be used inside webview in both iOS and Andriod, and provide synchronous content managment for multi-editors.
As a frontend developer though, I sometime need to handle backend API service.
I like use Express + TypeScript + MongoDB to handle it.
Things I fimiliar with:
FoxitSoftware is a listed company that focuses on providing PDF solution for western market. The Products include PDF reader, PDF editor, and a sort of file converters. Especially the PDF reader holds the 2nd market share in Europe and America after Adobe.
I am a full-stack developer and a frontend team leader (2 members) in an new AI team of FoxitSoftware. I am responsible for developing a system which connects all internal AI microservice and provides APIs outside as a third party service.
This project is built on NuxtJS + TypeScript + ElementUI as the frontend technical stack; and NodeJS + TypeScript + mongoDB + Redis in the backend.
And since as a startup team, we still in the stage of choosing the main technical stack. There is also some other projects using NextJS + TypeScript + MaterialUI. And we are also considering import GraphQL and NestJS. We are glad and interested in trying new things.
Maybe you have heard about the YouTube channel "Aotter Girls". But besides girls, Aotter is a company which has 3 different fields of business: self media operating, online advertising ecosystem, and a outsourcing company.
In Aotter's frontend team, we use Nuxt ecosystem + TypeScript + Sass&Tailwind + Express as main tech stack. And deploy with Docker + k8s as CI/CD tool.
Speaking of team, we're project-oriented. For each project, we have average 4 members including project manager, UI designer and frontend/backend developers.
This small group could help us reduce the cost of communication, and run a faster Scrum process. But it also cause a fact that every coder has multiple projects in the same time. We need to carefully manage our time in order not to delay any schedule.
And when it comes to developing core values, we focus on our product's design and usability. In order to keep design meets the UI mockup, we build a small CSS framework for every projects with TailwindCSS.
And we also value the importance of reusable code and scalable code.
A Chinese company which operate an adult comics website and App.
Use Vue and php as main stack, and WeChat pay as payment flow solution.
I joined this company only for a very short time due to some complicated reasons. You could find what happened by searching "第三緯度 ptt".
A Japanese trading company which gets the dealership(mainly from big Japanese care products brand), then build e-commerce in Taiwan. And provides service including marketing, degital advertising, logistics and customer service.
It requires Japanese as official language.
I went through two types of position in this company.
One is digital advertising personnel, being responsible for optimizing the results of advertising in Facebook Ads Magager and Google Ads. And website traffic and SEO as well.
I was focusing on UI/UX research in this period of time. I like to use Heatmap tool and A/B testing to reduce Bounce Rate. And import Google Analytics user flow report to increase website usability.
This experience had improved my UI/UX sense a lot, which is very helpful for my future frontend developer career.
The other position is frontend developer, being responsible for building official websites and campaign landing pages, and leading frontend team (2 members).
In additional to programing, I was also responsible for project manager since I could speak Japanese fluently.
Being Responsible for getting in touch with Japanese share house host, and helping them listing their place on our platform.
Meanwhile I was also responsible for contact person for Japanese business, and emergency customer service.
An outsourcing project coming from Gamania group. It's a data center containing all beanfun! related APPs, and can be used for analyzing, real-time data monitor, and embeded in other web service as a data analyzing micro service.
I refactored the frontend project with Nuxt SPA + Vuetify + Sass.
In backend we have a Spring + gRPC based service providing row data.
【Various Chart Cards】
This project has various kinds of chart, and requires the flexibility to expand more charts for new needs.
I built those charts with 3 libraries: chartjs, D3.js and google-charts. And for the purposes of reusable and expandable, I wrapped a same card layout around charts.
Charts are embeded in a card by Vue slot, and can be replaced easily. The card layer is responsible for formatting the row data passed in. In this way, the chart components can only focus on displaying. And all cards can independently. It reduce the coupling, making cards can be easy to reuse and move.
【Single Sign-On Based On OAuth 2.0】
As this project also be used as a micro service embedded in other website, we authenticate user with another SSO service of beanfun! It uses common OAuth 2.0 flow and shared cookie to achieve this.
Since there are usually many charts in a same page, to speed up page rendering, we use lru-cache on server side to cache un-changed data. And also use Cache Storage (Cache-First strategy) in client side to improve user experience.
An outsourcing project coming from Institute for Information Industry. It's a center dashboard to display the public materials from different government departments.
I was responsible for chart components in this project.
Frontend: Vue SPA + Bootstrap
Backend: Play + MongoDB
【Dynamic Page Content】
This service allow user to adjust or customize page content. We store them as JSON in database and render dynamicly in frontend.
Data need to be stored includes page layouts, chart types, sizes, orders, API endpoints and so on. And there is a challenge when it comes to chart: a complex filter.
A Filter should supports the period of time, multiple cities, Xaxes and Yaxes, chart type and so on. In addition, source data comes from different government department website with different data schema. So figuring out a rule to standardize data has became the biggest challenge in this project.
It's the first job evaluation in Asian-Bridge office. The main goal is to assess the ability in daily work, Taiwan market environment, business Japanese and crisis handling.
I won a chance to study abroad in Japan for six months. Besides Japanese and Japan culture, I also joined extracurricular activities, such as Photo Club and exchange meeting. And had part-time job experience there.
Lead a 6 members team to service voice recording for Japanese animation and drama, and got winning in an national contest.
As a team leader and first rebuttal, debated for the topic "Should taipei abolish Ubike system" in Japanese, and got winning at the end.
Prepared annual 4 event in our department. Containing field renting, planning schedule, preparing dance and drama, and making props.