Profile 00 00@2x e294063b2878e4164ba1dd904aa6b8bae6a97e19937899e4b4af853acf30de5d

John Hsieh

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.


Front-End Engineer 

Taoyuan City,TW
[email protected]

Skills


JavaScript Framework and Library

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:

  • Framework - Vue, Nuxt, Vue Router, Vuex
  • Data visualization - Chartjs, D3.js, google-charts
  • Rich text editor - Quill, Codox
  • Image cropper - cropperjs
  • Multi-language - i18n
  • Form validation - vuelidate
  • Time magegment - Dayjs, Momentjs
  • DOM manipulate - jQuery
  • HTTP lib - axios, node-fetch
  • Testing - Cypress.io, Jest
  • Others - lodash, FirebaseSDK, Facebook SDK, Google Analytics SDK

CSS Framework and Library

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:

  • CSS preprocessor - Scss
  • UI framework - Bootstrap, ElementUI, Buefy, Vuetify, TailwindCSS
  • Icon - font-awesome, svg-sprite
  • Model - sweetalert2
  • Animation - Animate.css, vuedraggable
  • Others - CSS variable, Media query, BEM Naming convention

PWA

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.


  • Library - Workbox, web-push
  • Client Side DB & Cache - IndexedDB, Cache Storege
  • Others - navigator API

Micro Frontend & Web Component

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. 


Related technique:

  • Shadow DOM, StencilJS, Web Socket, Quill

Backend Framework and Database

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:

  • Framework - Express
  • Web Socket - Socket.io
  • Database and ORM - MongoDB, Mongoose
  • Template engine - EJS, mustache
  • Document tool - Swagger
  • Others - GraphQL

Language

  • Chinese - Native
  • Japanese - Business level (JLPT N1)
  • English - Fluently communicable and writable


Experience

FoxitSoftware Inc., Full-stack Developer (Frontend main)2020/11 - now

【Introduction】

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.


Experiences 00 01@2x 6daa47d1df70d315f129dcecdd562003831581c4cdd8f9c819aa22d4a24ae150

Aotter Inc., F2E Developer2019/07 - 2020/11

【Introduction】

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.


【Projects】

A short link service which supports A/B testing, data analysis, custom domain, organization managment and online advertising.
Chrome Extension - SuprLink
https://supr.link/WJ4rd
A Chrome extension which helps user to create short link for SuprLink.
An advertising display platform with big data analysis feature. Uses lots of easy-readable charts to help user find their accurate potential customers.
Institute for Information Industry - City Dashboard
https://supr.link/oLOid
A platform which collects governmant public materials into one place to display. Has highly customisable charts and filters.
beanfun! Data Center
https://supr.link/30dOw
A dashboard which collects all product's data across whole enterprise group to display. Has lots of charts.
Experiences 00 01@2x 6daa47d1df70d315f129dcecdd562003831581c4cdd8f9c819aa22d4a24ae150

第三緯度 Inc., F2E Developer2019/04 - 2019/06

【Introduction】

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".


【Projects】

A website and App which illegally downloads Korean adult comics, adds new cover, then sells them online.
Experiences 00 01@2x 6daa47d1df70d315f129dcecdd562003831581c4cdd8f9c819aa22d4a24ae150

Asian Bridge Inc., Digital Ad Personnel & F2E Developer2017/12 - 2019/03

【Introduction】

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.


Since the main shopping cart logic was built in php MPA and outsourcing, we used native JavaScript and jQuery as main stack. Also used Wordpress in some projects.


【Projects】

Churacos official website
https://supr.link/9j9Ny
Taiwan official website of a care products branch Churacos, coming from Okinawa, Japan.
A hair care related blog.
A blog for advertorial.
Experiences 00 00@2x 504900dc09d82f711fdb54cf5763251cab5193a844856da978b2b8f3907ecd5a

AsiaYo Inc., Japanese Sales and Operation2016/09 - 2017/09

【Introduction】

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.

Experiences 00 01@2x 6daa47d1df70d315f129dcecdd562003831581c4cdd8f9c819aa22d4a24ae150

Projects

beanfun! Data Center

【URL】

https://supr.link/30dOw


【Introduction】

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.


【Project Structure】

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.


Projects 01 00@2x


【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.


【Data Cache】

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.

Institute for Information Industry - City Dashboard

【URL】

https://supr.link/oLOid


【Introduction】

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.


【Project Structure】

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.


Education

Soochow University, BA, Dept. of Japanese  2013/09 ~ 2017/06

Doshisha University (Japan), Dept. of Japanese and Japan Culture  2016/03 ~ 2016/08

Exchange student for six months.

Contests & Activities

Top 1 in job evaluation  2018/08

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.

Exchanged student in Kyoto  2016/03 ~ 2016/08

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.

Winning of National Japanese After Recording Contest  2015/05

Lead a 6 members team to service voice recording for Japanese animation and drama, and got winning in an national contest.

Winning of Soochow University Debate Contest  2015/03

As a team leader and first rebuttal, debated for the topic "Should taipei abolish Ubike system" in Japanese, and got winning at the end.

Dept. of Japanese Student Association  2013.09 ~ 2014/02

Prepared annual 4 event in our department. Containing field renting, planning schedule, preparing dance and drama, and making props.


Certifications

Projects 01 00@2x 9a5a97084c8e268ae3725d8e03654d1815ae2eb597b59c292ae4d0beffa7b703

Self-advancement

I have been spent all my free time to study Udemy online courses, or join National Taiwan University programming course for more than one year.

Projects 01 01@2x 5659ae1046a29c3ededd36e4a50b2c0f0c26b5fd7152a5d1cc138de803a81cbf

Education

Diplomas of Soochow University, exchanged student, and National Taiwan University.

Projects 01 00@2x 9a5a97084c8e268ae3725d8e03654d1815ae2eb597b59c292ae4d0beffa7b703

Language

JLPT N1

Projects 01 01@2x 5659ae1046a29c3ededd36e4a50b2c0f0c26b5fd7152a5d1cc138de803a81cbf

Contest certifications