入行前端工程師到現在差不多一年左右，雖然還很菜，但是由於我是設計相關科系畢業後跨領域成為工程師的，應該可以給一些準備轉職的設計師或是設計科系的學生前端經驗的分享，但是由於我是台中人暫時沒有誇縣市找工作的打算，所以這些經驗分享主要都是以台中為主喔！

前端工程師在職場上常常會使用各種不同的按鈕特效，為了方便自己在工作時能迅速地套用，所以整理出一些常用的按鈕特效，也歡迎大家使用我撰寫的這些按鈕程式碼！

※文章內的特效按鈕皆使用scss

整理前端開發常用的 SCSS 程式碼，包含響應式版面斷點、元素置中、淡入淡出與樣式變數。透過可重複使用的 mixin 和參數，把經常出現的樣式需求集中管理，方便在日常切版工作中查閱與調整。

Three.js有很多種載入模型的方式，在本文中使用的是筆者常用的載入方式，若有更好的方式歡迎留言建議。
在Three.js官方文件中有提到，建議使用.gltf格式的3D模型來進行外部模型的載入，可以得到更好的支援性及速度，所以若要載入的模型並非.gltf格式的檔案建議可以使用Blender來進行模型的製作以及模型的轉換(使用3D軟體轉換比較能夠確保轉出的結果接近自己想要的樣子，本文介紹主要以Blender為主，其他支援的3D軟體可以參考官方文件)，再由Three.js的載入器將模型載入。

Chart.js是一款輕巧但又包含了豐富內容的圖表套件，它可以幫助我們快速的製作出各種美觀的圖表，種類包含了折線圖(Line Chart)、圓餅圖(Pie Chart)、甜甜圈圖(Doughnut Chart)、雷達圖(Radar Chart)等多種圖形，並且每種圖形都提供了高度的客製化功能，滿足各種不同需求，在這裡介紹快速上手的方法，若想知道更多關於Chart.js可以做到的事情可以看看他們的官方文件

React 是共用的函式庫，ReactDOM 則負責網頁環境。這篇筆記從兩者的分工與引入方式開始說明。

從設計科系到前端工程師，我想用這個部落格留下工作中學到的事。