Se connecter
S'inscrire
Jobs
Job Search
Explore all available job openings across industries and locations.
Company Search
Find your dream jobs categorized by company names.
Themed Jobs
Discover job opportunities organized by specific themes or industries.
Download our App
Tools
Resume
Create your job-winning resume using our free resume builder.
Portfolio
Showcase your skills and projects with a professional portfolio.
Resume
Create your job-winning resume using our free resume builder.
Resume Builder
Make a resume for free.
Resume Templates
Access our extensive library of professional & ready-to-use templates.
Resume Examples
Get inspired by real resume examples to create your own.
Occupation Guide
Access resume writing guides tailored for different professions.
Resume Help
Get expert advice on all things resume from our team of recruitment specialists.
Portfolio
Showcase your skills and projects with a professional portfolio.
Portfolio Maker
Create a professional portfolio to highlight your skills and projects.
Portfolio Gallery
Browse through our collection of real portfolios for inspiration and networking.
Resources
Articles
Read insightful articles on career development, job search strategies, and more.
View All Articles
Job Search Guide
Resume & CV
Cover Letter
Portfolio
Interview Skills
Job Search Tips
Industry & Job Overview
Career Guidance
Career Planning
Career Tools
Career Development
Personal Branding
Success Stories
Success Stories
Business Excellence
People Operations
Recruitment & HR
About CakeResume
People & Culture
News & Updates
Events
Featured Reads
Resume & CV
What to Write in an Email When Sending a Resume [+ Examples & Tips]
Read More
Hire
Talent Search
Find Resumes.
Job Posting
Start for Free.
Recruitment Service
Acquire Talent.
Employer of Record (EOR)
Empower Your Business in Taiwan.
Employer Branding
Build and promote your employer brand.
Pricing
Job Posting Plans
Talent Search Plans
Resume Builder Plans
Build your Network
My Network
Access your personal network connections and manage your contacts.
CakeResume Meet
Expand your professional network by meeting and connecting with other users.
Community
Engage with other users through discussions, forums, and networking events.
Download our App
Build your Network
My Network
Access your personal network connections and manage your contacts.
CakeResume Meet
Expand your professional network by meeting and connecting with other users.
Community
Engage with other users through discussions, forums, and networking events.
Se connecter
S'inscrire
Portfolios
John Hsieh
SuprLink 超級連結
SuprLink 超級連結
SuprLink 超級連結
By
John Hsieh
Sr. frontend engineer
・
Taichung City, Taiwan
Connect
網站連結: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 框架來實現。
Report
Please login to comment.
Post
John Hsieh
Connect
Published: oct. 4ème 2020
150
5
0
Buefy
SASS/SCSS
tailwindCSS
MongoDB
Express
Nuxt
TypeScript
Vue
Share
Other works from
John Hsieh
資策會 城市儀表板