前端三分鐘

一起用三分鐘分享技術與知識

Java Web API (RESTful API) 教學

三步驟打通關節開發 API 後端服務

這篇文章會示範從 0 到 1 打造一個網站應用程式，並整理 Java Web Appication 相關資源如基礎建設、前端網頁、後端 Web API 及資料庫。 Java Web Appication 相關資源一個 Java Web Appication 分成前端、後端及資料庫。前端網頁(網址) <–Q1–> RESTful Web Service <–Q2–> ......

林彥成
2018-04-05 | 5 min.

Landing Page X Intro.js

如何利用 Intro.js 優化網站到達頁行銷效果

網站到達頁（Landing Page）是行銷活動中至關重要的一環，目的是讓訪客進入特定頁面後達成預設目標。其中解說如下“Landing Page 的中文又稱為「網站到達頁」，講的是任何一個網頁，無論訪客是從哪個流量管道進來，只要他一進入特定頁面能達成某個你設定的目標”。透過精確的目標設定，Landing Page 可以協助企業實現行銷目標，提升轉換率。本文將介紹如何使用 Intro.js ......

林彥成
2018-03-25 | 4 min.

什麼是無障礙網頁?

用 React 撰寫符合 JSX a11y 的無障礙網頁

無障礙網頁跟一般網頁的差異，主要在協助視覺或是聽覺障礙者進行瀏覽。使用者可以透過使用滑鼠以外的工具來進行網站瀏覽，也可以使用螢幕閱讀器進行網頁讀取和使用。 JSX Accessibility最近才開始進入 react 16 版，發現說明文件也改版了！除了已經在官方有建議的 code-split 方法，竟然還有a11y 無障礙的網頁設計建議，我們還可以安裝 eslint-plugin-js......

林彥成
2018-02-04 | 1 min.

Leaflet 地圖實作教學

地理資訊視覺化快速建立疫情地圖

這篇教學將以 leaflet 實作熱區地圖，顯示這次武漢肺炎的確診數，發佈在免費的 GitHub Page，程式碼也開源放在 Github 上，並會帶大家開箱如何把地理資訊視覺化。地理資訊系統架構地圖函式庫 (Openlayer) 地理資訊系統名詞地理投影方式 GeoJSON 前端常見的圖表工具目標本次技術選型如下： leaflet.js: 比起 OpenLayers 簡單非常......

林彥成
2018-01-25 | 5 min.

React 多國語言簡介(使用 react-intl)

使用 Yahoo react-intl

什麼是 React Intl?React Intl 這套函式庫讓 React 實做多國語系更加直觀，透過現成的元件和 API 能處理字串、日期、數字的轉換。 React Intl 主要功能React Intl 主要提供下列的功能: 支援數字和分隔符號格式日期與時間的格式顯示距離現在多久支援 150+ 種語言在瀏覽器以及 Node 環境都可運行依照標準建立的一套函式庫基本配置使......

林彥成
2017-09-21 | 2 min.

Component State and Props

SPA 的狀態與資料流 (MVVM vs FLUX)

Component based 的概念與早期伺服器渲染 (server render) 頁面的模式不同，SPA (Single Page Application) 完全由前端元件控制，所以元件狀態 (state)、性質 (props) 就需要規範，目前較主流的方式有 MVVM 以及 FLUX。元件化元件概念蠻推薦這篇介紹 web-components 相關知識的文章，目前 web-comp......

林彥成
2017-05-18 | 4 min.

使用 Hexo 架設部落格

嗨!前端三分鐘

這弄弄那弄弄的，第一個 Blog 就打開了。跳過碎碎念 XD 去年年底，覺得好像差不多可以準備換工作了，就加加減減看了一些職缺，也發現有些職缺甚至開在 Github 的 issues裡，於是就開了一個帳號。加上也發現許多工作面試有這個需求，所以就做一個吧。也因為之前公司是 SVN 所以沒用過 Git，這次先練習上傳了一些平常的練習。之前也常常逛 Github，發現有些人會利用這個空......

林彥成
2017-01-07 | 1 min.