文章分類

CSS

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

ElasticCloud

• 開外掛的 Elasticsearch 數據檢索 : 30 天上手 Elastic Cloud 心得分享
• Elastic Cloud Enterprise 維運與除錯 : 維運節點及高可用性的系統架構
• 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 加密傳輸 : 啟用加密讓資料傳輸更安全
• Elastic 操作權限管理 : Role-Based Access Control 簡介
• Elastic APM 基礎教學 : 運用 APM client 和 server 端的函式庫來做應用程式層級的監控
• Elastic Kibana 快速入門 : 資訊圖像化可以炫技到什麼程度
• Elastic Logging X Filebeat 深入理解 : Filebeat 實際運用的細節、基礎概念及相關配置教學
• Elastic Workplace Search Quick Start : 用三分鐘的時間架設工作區搜尋引擎
• Elastic App Search Quick Start : 用三分鐘的時間架設搜尋引擎
• Elastic Observability 簡介 : 透過 Logs、Metrics、Apm、Uptime 整合系統資訊
• Metricbeat 應用教學 : 搭配 Kibana 即時監控 Nginx 伺服器服務狀態
• 三步驟完成 Filebeat 設定 : 傳送 Nginx Log 到 Kibana 產生報表

HTML

• Script 載入方式 (async, defer, lazyload) : 三種避免阻塞腳本的載入方式
• SEO 前的網站設定 : HTML 優化, 結構化資料, 網站地圖
• 什麼是無障礙網頁? : 用 React 撰寫符合 JSX a11y 的無障礙網頁
• 如何製作 RTL 網站 : 當網頁遇到由右到左的語言

JavaScript

• 三個訣竅優化前端開發者體驗 : 從 UI/UX 來解析好讀的程式碼
• Leaflet 地圖實作教學 : 從0到1快速建立疫情地圖
• 三種常見 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 簡介 : 前端建置流程自動化工具

PWA

• Progressive Web App 喚醒鎖 : 維持螢幕長亮的方法
• Progressive Web App 存取本機檔案 : File System Access API 簡介
• Progressive Web App 用戶端儲存 : 讓網站能夠在離線狀態使用快取資源
• Progressive Web App 架構模式 : App Shell Model 概念說明
• Progressive Web App 離線後備頁面 : 玩過 Chrome 小恐龍遊戲了嗎
• Progressive Web App 個案分析 : 樂天 24 導入 PWA 後帶來的好處
• Progressive Web App Shortcuts : 程式快速啟動選單
• Progressive Web App 通知數字 : Badging API 入門實做
• Progressive Web App Checklist : 優化檢核清單項目說明
• Progressive Web App 啟動和更新機制 : 透過程式監控啟動和觸發更新
• Progressive Web App Manifest : 配置檔屬性深入介紹
• Progressive Web App Service Worker : 讓網頁支援離線快取及推播
• Progressive Web App 自主管理推薦安裝提示 : 從程式到推薦介面設計模式全解析
• Progressive Web App 加入主畫面 : PWA 究竟加入和安裝了什麼
• Progressive Web App 開箱簡介 : 一起看看漸進式增強到底有多強

React.js

• 深入理解 React JS 元件 : 9 個略難的 React JS 面試問題
• 你了解 React JS 嗎 : 15 個 React JS 的面試問題
• 提升你的 React 開發效率 : 透過三個目標重構元件撰寫方式
• 不在大型專案導入 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 的原因 : 基礎範例介紹與優缺點分析
• React Create Script 2.0 : 減少維護環境配置
• React 多國語言簡介(使用 react-intl) : 使用 Yahoo react-intl
• React SSR 教學與問題整理 : 前端伺服器渲染觀念與常見問題

伺服器與後端服務

• 架設你的網站伺服器 : 架設流程與問題排除
• Google Cloud 技術培訓計畫闖關體驗 : 網站服務架設、Google Assistant、BigQuery 開箱
• Mongoose 資料操作 : 三步驟從 MongoDB 到 API
• Avada 網站速度優化 : WordPress & Avada 的效能設定
• 常用的 Nginx Config 與相關指令教學 : 四大步驟入門網站架設
• Java 開發 RESTful API 入門教學 : Jersey 需要了解的六個地方
• Java Web API (RESTful API) 教學 : 打通三個關節開發 API 後端服務
• AWS lambda vs ec2 vs Azure Web App : 架站服務比較

產業觀察

• 後疫情時代五種企業具備的公關力 : 從台灣百工的內心話反思如何經營自身的公關力
• 四個網路發展對個人品牌影響 : 淺談網路時代下的開源社群、知識變現、聯盟行銷
• 三個騎 UrDa 前就爛到不行的體驗 : 從前端工程師的角度淺談如何做出失敗的產品
• 淺談 Product Marketing : 以電商在馬來西亞市場為例
• Shoplus 東南亞經驗分享 (Conversational Commerce) : 從台灣出發打造 15 萬賣家的東南亞社群電商服務成功經驗分享
• 用 Socialbakers 了解其他粉專數據 : 社群經營分析工具開箱
• 搜尋引擎與社群媒體 : 從請輸入檢索詞 WWW 淺談搜尋引擎與社群媒體對社會的影響
• 設計思考 X 教育科技 : 從 Persona 與設計思考的角度去進行系統設計
• Web of Things 介紹 : 當前端遇上 IoT 會變成 WoT 嗎?

網站技術

• Progressive Web App Audits : PWA 效能、可靠性、可安裝審查工具
• 三步驟加速你的網站效能 : 善用開發者工具進行效能分析優化
• 四種加快網站開啟速度的常見方法 : 延遲載入、程式拆分、打包檔分析、資源優化
• npm 入門到進階 : 常用指令與版本規則教學
• Github 免費架站 : Hexo X Google Search Console
• 網頁即時通訊實作 : Polling, Long-Polling, Server Sent Events, WebSocket
• Hack 網頁從按鈕開始 : 開發者工具 HTML/CSS/JS Debug 技巧
• 網站資訊安全 : 前端工程師常見的資安問題
• 使用 Hexo 架設部落格 : 嗨!前端三分鐘

網站測試

• Cypress 超快速入門 : Popcat 貓貓點擊大賽參戰確認
• 初探 React 單元測試 : 前端測試踩坑入門

職場老鳥必點技能

• 談溝通步驟與引導技巧 : 職場老鳥必點技能
• 問好問題寫好文件 : 職場老鳥必點技能
• 履歷診斷和優化履歷三步驟 : 職場老鳥必點技能
• 如何協助專案協作與開發的 Git 指南 : 職場老鳥必點技能
• 軟體評估專案時程和難度的方法 : 職場老鳥必點技能
• 從心理與溝通成本談專案協作流程 : 職場老鳥必點技能

職涯發展

• 面試結束時可以問的四個問題 : 用結束時的提問來面試公司
• 回顧成為前端工程師的這五年 : 嗨!!! 我是林彥成，喜歡爬山的前端工程師
• Agile Tour Taiwan 2020 心得分享 : 週期圖法、Cynefin Framework、遊戲化框架
• 從辦公室到遠端，四個價值觀的轉換與改變 : 有個同學叫屁蒼 X 職場奇遇記
• 怎麼兼職? 身兼三份工作的真實樣貌 : 有個同學叫屁蒼 X 職場奇遇記
• 22K 很少，那如果是三份 22k+ 的工作呢 : 有個同學叫屁蒼 X 職場奇遇記
• 圖論、線性代數、團隊關係 : 從數學的角度切入並觀察團隊關係
• 前端面試該反問的 12 個問題 : 從過往遇到問題和解法反思未來的職涯疑問
• 如何打造與管理產品 : 矽谷阿雅與 Marty Cagan 來台演講心得分享
• 如何與獵頭談話? : 但願你因工作而閃亮讀書心得，反思前端工程師職涯規劃
• 前端面試心得 (2018/11) : KKstream, Oath, MIT jobs 快速面試

行銷三兩事

• 部落格搜尋引擎優化方法 (SEO) : MAU 3000 到 4000 的過程
• 運用 Google Trends 的力量 : 找出 SEO 搜尋趨勢關鍵字
• 2020 成長駭客年會 : GDPR 與肺炎疫情後的行銷轉型與想法
• 2020 Grow with Google Tour : 數位行銷基本功，打造數位能見度
• Google Analytics 4 注意事項 : 新版 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 產生開發文件 : 自動產生專案文件