文章分類

CSS

• Atomic CSS 優化樣式開發 : 運用特性簡化開發流程、減少維護成本
• SCSS, CSS 教學 : 初學者常見的觀念與技巧
• Pure CSS Tooltips : 使用 CSS 小技巧幫按鈕加上 tooltip

ElasticCloud

• Elastic Cloud Stack 101 : 從零開始入門 30 天心得分享
• Elastic Cloud Enterprise High Availability : 維運節點及高可用性的系統架構
• Elastic Cloud Snapshots : 資料備份與恢復
• Elastic Cloud Enterprise Deployment : 開箱部屬樣板體驗
• Elastic Cloud Enterprise Architecture : 系統平台管理與架構設定
• Elastic Anomaly Detection for Cybersecurity : DNS 常見攻擊與可能的偵測方法
• Elastic Machine Learning 基礎 : 機器學習的名詞、相關流程與案例介紹
• Elastic SIEM 簡介 : SIEM UI 功能介紹，究竟能解決什麼問題
• Elastic Endgame 簡介 : 端點防護產品 Endgame 的體驗心得分享
• Elastic Security Quick Start : 透過 Kibana 介面加入並監控安全相關的事件數據
• Elastic Security 簡介 : 淺談 EDR、SIEM、Elastic Endpoint Security
• Elastic Security 加密傳輸 : 透過啟用加密傳輸讓資料更安全
• Elastic Security : 操作權限管理 (Role-Based Access Control) 簡介
• Elastic APM 基礎教學 : 運用 APM client 和 server 端的函式庫來做應用程式層級的監控
• Elastic Kibana Quick Start : 資訊圖像化可以炫技到什麼程度
• Elastic Logging X Filebeat 深入理解 : Filebeat 實際運用的細節、基礎概念及相關配置教學
• Elastic Workplace Search Quick Start : 用三分鐘的時間架設工作區搜尋引擎
• Elastic App Search Quick Start : 用三分鐘的時間架設搜尋引擎
• Elastic Observability 簡介 : 淺談四大功能 Logs、Metrics、Apm、Uptime
• Elastic Metric Quick Start (Metricbeat, Kibana, Elasticsearch) : 監控 Nginx 伺服器狀態
• Elastic Filebeat Logging 基礎教學 : 傳送 Nginx Log 到 ES
• 30 天入門 Elastic Cloud Stack : 相關服務簡介

HTML

• Script 載入方式 (async, defer, lazyload) : 三種避免阻塞腳本的載入方式
• 如何做 SEO? : HTML語意化, Meta data , Microdata(結構化資料), 網站索引檔(sitemap.xml)
• 什麼是無障礙網頁? : 用 React 撰寫符合 JSX a11y 的無障礙網頁
• 如何製作 RTL 網站 : 當網頁遇到由右到左的語言

JavaScript

• Leaflet 地圖實作教學 : 從0到1快速建立疫情地圖
• JavaScript Memory Leak : 前端面試必問的記憶體洩漏
• Google 試算表實作簡易資料庫 : Google Sheet, App script, Visualization API
• 為什麼需要 Cookie? : Cookies 的功能簡介與相關應用
• 網站導覽設計 (使用 Intro.js) : 輕鬆幫網站 UI 加上導覽
• 地理資訊視覺化 : 網站技術與工具介紹
• EJS 簡介 : 透過樣板加速開發
• Component State and Props : SPA 的狀態與資料流 (MVVM vs FLUX)
• Ajax 非同步請求整理 : 幾個非同步發 Ajax 的方法
• Webpack 簡介 : 前端建置流程自動化工具

React.js

• 不在大型專案導入 React.js 的 5 個原因 : 關於跟著 React.js 一路成長的心得分享
• React 元件概念與效能調整 : 從 Element、Reconciliation 概念出發調整效能
• React Class-based vs Functional Component : 從特性淺談兩種寫法之異同
• React 元件開發指南 : 從特性與函式庫工具淺談元件開發
• React.js 專案架構 : 解析常見的架構
• CSS in JS (react.js) : 簡介與優缺點分析
• 減少 React 專案的 Boilerplate : 從專案配置、API、Redux 來看優化的可能
• React Hook 優缺點比較 : useState 與 useEffect 範例分析
• React Create Script 2.0 : 減少維護環境配置
• React 多國語言簡介(使用 react-intl) : 使用 Yahoo react-intl
• React SSR 教學與問題整理 : 前端伺服器渲染觀念與常見問題
• 初探 React 單元測試 : 前端測試踩坑入門

伺服器與服務

• Nginx 教學 : Ubuntu 網站架設基礎設定快速入門
• Node.js Server 效能優化 : 使用 nginx 以及 pm2 cluster
• 架站雲端服務簡介 : AWS lambda vs ec2 vs Azure Web App

個人成長

• 面試提問技巧 : 面試結束時的提問換我們面試公司
• 回顧成為前端工程師的這五年 : 嗨!!! 我是林彥成，前端工程師

專案管理

• 專案開發中的 Git 指南 : 淺談 Git 如何協助專案的協作與開發
• 如何打造與管理產品 : 矽谷阿雅與 Marty Cagan 來台演講心得分享
• 軟體專案評估教學 : 軟體工程師評估專案時程和難度的方法
• 專案協作 : 從心理層面與溝通成本來看專案開發及協作流程

產業觀察

• 公關力 : 後疫情時代，台灣百工的內心話
• UrDa 電動車使用者體驗 : 從前端工程師的角度淺談如何做出失敗的產品
• 淺談 Product Marketing : 以電商在馬來西亞市場為例
• Shoplus 東南亞經驗分享 (Conversational Commerce) : 從台灣出發打造 15 萬賣家的東南亞社群電商服務成功經驗分享
• 用 Socialbakers 了解其他粉專數據 : 社群經營分析工具開箱
• 搜尋引擎與社群媒體 : 從請輸入檢索詞 WWW 淺談搜尋引擎與社群媒體對社會的影響
• 設計思考 X 教育科技 : 從 Persona 與設計思考的角度去進行系統設計
• Web of Things : 當前端遇上 IoT 會變成 WoT 嗎?

網站技術

• NPM 教學 : 常用指令與版本號規則介紹
• Github 免費架站 : Hexo X Google Search Console
• Mongoose ODM 操作 Mongo DB : 常見專案架構設計
• Avada 網站速度優化 : WordPress & Avada 的效能設定
• 網頁即時通訊實作 : Polling, Long-Polling, Server Sent Events, WebSocket
• Chrome DevTools : 從搶票按鈕談開發者工具除錯技巧 (Debug)
• 網站資訊安全 : 前端工程師常見的資安問題
• 利用 Jersey 開發 Java RESTful API 教學 : 如何使用 Java 框架來開發 RESTful API?
• Java Web API (RESTful API) 教學 : 使用 Java 開發後端 API 服務
• 用 Chrome Audit 改善效能 : 透過 Chrome Lighthouse 稽核並改善網站效能
• Service Worker 介紹 : 實作快取及推播的一種解決方案
• 使用 Hexo 架設部落格 : 嗨!前端三分鐘

職涯發展

• Agile Tour Taiwan 2020 心得分享 : 週期圖法、Cynefin Framework、遊戲化框架
• 從辦公室到遠端，那些價值觀的轉換與改變 : 有個同學叫屁蒼 X 職場奇遇記
• 怎麼兼職? 身兼三份工作的真實樣貌 : 有個同學叫屁蒼 X 職場奇遇記
• 22K 很少，那如果是三份 22k+ 的工作呢 : 有個同學叫屁蒼 X 職場奇遇記
• 圖論、線性代數、團隊關係 : 從數學的角度切入並觀察團隊關係
• 個人品牌 : 淺談網路時代下開源社群、知識變現、聯盟行銷的影響
• 如何寫出驚喜滿滿 or 地雷滿滿的履歷 : 追不到夢想就創一個！矽谷阿雅讀書會超強分享！
• 還有什麼問題想問嗎 : 從過往問題、解法，反思前端面試要問的問題
• 如何與獵頭談話? : 但願你因工作而閃亮讀書心得，反思前端工程師職涯規劃
• 前端面試心得 (2018/11) : KKstream, Oath, MIT jobs 快速面試

行銷三兩事

• Google Trend 趨勢觀察 : 淺談關鍵字的規劃與分析
• 2020 成長駭客年會心得分享 : GDPR 與肺炎疫情後的行銷轉型與想法
• 2020 Grow with Google Tour : 數位行銷基本功，打造數位能見度
• Google Analytics 4 Quick Start : 新版 GA 開箱體驗心得
• facebook pixel 與 google tag manager 的應用 : 淺談行銷與再行銷
• 簡報製作技巧 : 從訊息投放的角度來優化簡報
• Market爆擊ing : 戰略X戰術X心理 => Marketing
• 當 chatbot 遇上行銷 : 該如何讓行銷跟上聊天機器人的潮流?
• Landing Page 的重要 : 當到達頁面遇上行銷

軟體工程

• 程式碼品質與重構方法 : 範例與相關概念
• Github Action X React App : 將專案導入 Github Action 並自動定期更新專案
• 自動產生 semantic Versioning 版號與資訊 : 使用 semantic-release 或 standard-version
• CircleCI 教學 : 自動建置發佈 Github 專案
• Visual Studio Code Extensions : React 前端常用編輯器套件推薦
• 前端專案 X Jenkins : 將前端專案發佈與建置流程自動化
• ESLint X Prettier : 透過工具幫助團隊控制程式碼風格與品質
• 透過註解 與 JSDoc 產生開發文件 : 自動產生專案文件