前言
學習Javascript到應用時，最常使用的就是陣列方法來處理資料，因此多知道一個方法但不需要死背用法來的更重要。這篇也會持續更新學到的方法。
另外整理這篇的契機是在學習過程中，看了偷米騎巴哥的影片和整理圖，十分喜歡，也讓觀念更加清晰。
出處連結在此
![[JS] 用C3.js來繪製圖表](/gallery/c3js.png)
[JS 60 Days] Day 11 to Day 35 - JS函式陣列
Read more[JS 60 Days] Day 1 to Day 10 - JS變數
Read more
為何會開始學code
今年，也是Covid-19疫情大爆發的一年。我在國外打滾了好幾年，待了幾個國家，圓了一個年輕時的潛水夢想回到台灣，一方面是短期可能不能再出國了，一方面是對未來有別的規劃，因此決定轉換跑道，所以趟上了學習前端這個無底洞道路。
選擇前端是因為大學時期念工業設計，先前做設計師時的工作上有接觸過一些網站視覺設計和app的UI設計，更早期還是國中生時，曾經迷上一陣子網站設計，當時雖然是用Dreamweaver和frontpage的年代，但也製作出電子報和個人網站，印象中還用了FTP上傳到免費空間，不知道這樣是不是不小心透露了年紀了 XD。加上高中時期數學蠻好的，讓我認為學寫程式可能蠻適合我的。
Projects
Capture Studio
Photography Service E-commerce Website
Overview
Capture Studio is an e-commerce website using Vue.js. I started this side project from scratch, which involved user interface design, creating wireframes, and front end programming. The website features include showcasing photography services/products, client albums, a shopping cart, and a checkout system. On the backend platform, functionalities include login authentication, management of services/products for listing and publishing, coupon management, order management, and image management.
Skills Used
- Vue.js / Vue Router / Vue Cli
- ESLint with the Airbnb syntax standards
- RESTful API
- Bootstrap
- Responsive Web Design
- SASS / SCSS
- Git Version Control
Hotel Booking Website
Reservation Service Website
- Demo Account
Account: aaa@aaa.com
Password: Aaaa1234
Overview
This hotel reservation website is a side project. I have completed all the front-end and part of the back-end website construction. The website features include a landing page, previews of various rooms, a picture lightbox, room reservation, member registration and login, password recovery, email verification for existence in the database, and order management.
Skills Used
- React.js
- Typescript
- Vite
- React Redux / Redux Toolkit / RTK query
- Tailwind CSS
- React Hook Form / Yup
- Husky
- ESLint
- Prettier
- Responsive Web Design
- RESTful API
- Git Version Control
- Node.js / Express.js / MongoDB
Mujibu
Crowdfunding Platforms
Overview
Mujibu is a side project I collaborated on with three other developers. This project was built from scratch. Initially, we discussed the idea of creating a crowdfunding website, then proceeded to create wireframes using Figma, as well as the site’s structure and functional flow chart. We also planned API specifications for frontend-backend communication and set up frontend and backend environments, before moving on to later-stage development.
In the later stages of development, I primarily handled most of the frontend functionalities, including Google third-party login for members, registration, member operation interface, member data modification, defining website components in the early stage, defining styles, setting up TypeScript schemas, creating the crowdfunding company page and the crowdfunding product listing process. As for the backend, I was responsible for implementing the functionality to upload images using Firebase.
Skills Used
- Next.js
- Typescript
- React Redux / Redux Toolkit / RTK query
- Tailwind CSS / Material UI
- Mock Service Worker
- Firebase / Third-party authentication login
- React Hook Form / Yup
- ESLint
- Prettier
- Responsive Web Design
- RESTful API
- Git Version Control
- Node.js / MongoDB
The Better Aging Website
Articles Website
Overview
The Better Aging Website is a news platform dedicated to middle-aged and elderly readers. I played a key role in redesigning the layout and implementing front-end programming using the Next.js framework. The website boasts an array of features, including a homepage carousel, a popular articles section, author-specific pages, and dedicated sections for video content and podcasts. These enhancements contribute to a more dynamic and engaging user experience, offering a diverse range of content formats to cater to the preferences of our audience.
Skills Used
- Next.js
- RESTful API
- Tailwind CSS
- Responsive Web Design
- Integration of Google Tag
- Google SEO
- Git Version Control
- Server-Side Rendering
Event Sites
Live Demos
Overview
I have previously completed various types of event sites, including event information pages, vendor product feature pages, voting campaign, survey forms, quizzes and so on.
Skills Used
- React.js / Typescript / Javascript
- Chart.js /
- React Hook Form
- Lottie Animation / GSAP
- Tailwind CSS / Material UI
- Bootstrap
- SASS / SCSS
- Responsive Web Design
- RESTful API
- Git Version Control
Big Five Personality Traits Test
Vue.js Questionnaire Assessment Tool
Overview
The Big Five Personality Traits Test is a Vue.js Single Page Application (SPA) integrated with an Open-Source Psychological Assessment API. Features include a 10-question questionnaire, questionnaire verification, test score statistics, and result analysis.
Skills Used
- Vue.js
- Axios
- RESTful API
- Responsive Web Design
- SASS / SCSS
- Git Version Control
Utility Web App
Live Demos
Skills Used
- Javascript
- jQuery
- HTML / CSS
- Responsive Web Design
- Git Version Control