登录
注册
找工作
搜寻职缺
探索不同产业和地区的所有工作机会
搜寻公司
根据公司名称寻找理想工作
主题专区
探索依特定主题或产业分类的工作机会
下载 CakeResume App
求职工具
简历
使用我们的免费简历工具,获取理想职缺
作品集
分享你的作品集展现你的成功专案
简历
使用我们的免费简历工具,获取理想职缺
简历工具
免费制作、下载简历
简历模板
提供大量专业模板立即使用
简历范例
从他人简历获取制作灵感
职业指南
各产业、职能的简历教学与范例
简历协助
从我们的招募团队获取关于简历的专业建议
作品集
分享你的作品集展现你的成功专案
作品集工具
制作一份展现个人专业的作品集
作品集展示区
浏览他人的真实作品集,寻找灵感并进行人脉拓展
资源
资源
从丰富内容了解职业发展、求职策略等更多资讯
查看全部文章
求职指南
简历
求职信
作品集 & 个人品牌
面试技巧
求职新知
产业 & 职位介绍
职业发展
职业规划
职业工具模板
职场人际沟通
职场管理学
人物/企业专访
人物/企业专访
雇主人力资源
人力资源运营
人力资源招募
CakeResume 专题
团队与企业文化
最新消息
活动分享
White Paper
CakeResume 2023 Employer Branding Ebook
CakeResume 2024 Management Associate Ebook
CakeResume 2024 Active Sourcing Ebook
精选文章
面试技巧
【自介範例】吸引人的面試自我介紹怎麼說?4 技巧完美活用自我介紹
阅读更多
《科技职涯》Podcast
专门邀请在科技、数位等不同领域的工作者来分享他们的职涯趣事。
Apple Podcasts
Google Podcasts
Spotify
Career Adventure Podcast
We inspire young professionals by showcasing diverse career journeys.
Apple Podcasts
Google Podcasts
Spotify
招聘
人才搜寻引擎
搜寻简历
职缺刊登
免费开始
猎才顾问
人才媒合服务
名义雇主(EoR)服务
在台湾建立企业团队
雇主品牌推广
建立和推广您的雇主品牌
价格方案
职缺刊登价格方案
人才搜寻引擎价格方案
简历制作价格方案
建立你的人脉
我的人脉
管理人脉及你的联系对象
CakeResume Meet
透过认识并连结其他使用者,扩大你的职涯人脉
社群
透过讨论、活动参与与其他用户交流
下载 CakeResume App
建立你的人脉
我的人脉
管理人脉及你的联系对象
CakeResume Meet
透过认识并连结其他使用者,扩大你的职涯人脉
社群
透过讨论、活动参与与其他用户交流
登录
注册
作品集
John Hsieh
SuprLink 超級連結
SuprLink 超級連結
SuprLink 超級連結
By
John Hsieh
Sr. frontend engineer
・
Taichung City, Taiwan
建立关系
網站連結:https://supr.link 專案介紹:https://docs.google.com/presentation/d/12UIUbfx40CHYqd3KFqq6u4f70GwqG2MdQPSbvwUAw4g/edit?usp=sharing 【專案簡介】 SuprLink 超級連結是一個縮網址服務。功能涵蓋縮短網址、點擊追蹤、個人與團隊型態的使用者管理、廣告投放、圖表數據呈現和dashboard 形式的管理後台 【專案架構】 此專案前端由我單獨負責,架構上採用 Nuxt SSR(Express) + TypeScript + Sass 構建 後端則有一台 Express + TypeScript + MongoDB 作為 Restful API Server,並有另一台 Express 專門乘載縮網址跳轉的流量 【TypeScript 規範的 Data schema】 專案使用 TypeScript 除了用以型別檢查外,更重要的是描述了資料從 API response 到 Vuex Store 再到 Component data 所經歷的 Schema 變換。這在開發上一定程度能省下使用 Postman 觀察 Response 精力 【搭建於 Tailwind 上的小型 UI 框架】 CSS 上一大特色為使用 Tailwind 而非完整的 UI 框架。這麼做是因為專案重視 Mockup 的還原度,從圓角、各式顏色到字體字型等皆有要求,這種情況下使用 UI 框架容易造成綁手綁腳的情況 Tailwind 有著極簡單純的設計風格與極高彈性的客製化能力,並提供 @apply 裝飾器快速繼承內建的 class。 我使用這項優勢配合 BEM 命名法,為專案打造了專屬、並且複用性高的小型 UI 框架 【高度彈性的表格組件】 另外此專案大量使用一個看似簡單,實則非常不好實作的表格 (見投影片 3) 其困難點有四:列與列之間須有間距、每張表格都有不同的可縮放欄位及固定欄位、RWD 下無須左右滑動瀏覽、Component 需複用 這些限制剔除了傳統的 Table 實作與 Flex 實作,最後我採用的方式為 Grid Layout 配合 Vue Slots 前者用以處理欄位的可縮放範圍和列間距,後者用以實現完全客製化的欄位內容。最終設計成如下的簡潔 API: 【多語系與黑暗模式】 開發中的 Feature。多語系主要利用 i18n 實現,黑暗模式則是將會動態變換的顏色使用 CSS Variable 描述,並將此顏色設定融入到 Tailwind 框架來實現。
举报
请先登入再留言。
送出
John Hsieh
建立关系
发布时间: 2020年10月4日
150
5
0
Buefy
SASS/SCSS
tailwindCSS
MongoDB
Express
Nuxt
TypeScript
Vue
分享
John Hsieh
的其他作品
資策會 城市儀表板