simonallen 技術部落格

Sign in Subscribe

Latest

Laravel 入門：在 Mac 安裝與啟動 Laravel

關於 Laravel Laravel 是 PHP 語言的後端 Framework，其優雅開發特性吸引了非常多愛好者，正如其官網標題 The PHP Framework For Web Artisans ，使它成為 PHP 目前主流 Framework 之一。實際上要建置與啟動 Laravel 有很多方式，要用 xampp 去弄也可以，這篇筆記只是隨手記錄一下自己裝來玩的 Laravel 環境建置。安裝 PHP 首先利用 Homebrew 來幫我們安裝 PHP，目前 PHP 已到了 7.4 版，故照 Homebrew 官網指令裝完 Homebrew 後，在 terminal 下指令來安裝 PHP

自幹 React Img LazyLoad 元件

為什麼要使用圖片 LazyLoad？ 1. 減少頻寬浪費圖片與影片是網站中最吃資源的元素之一，尤其在行動網路環境下，過度 PreLoad 預載會導致頻寬浪費。LazyLoad 可延遲非可視範圍內的圖片載入，只在使用者滑動到該區域時才載入圖片。 2. 提升首次載入速度圖片載入不只是下載，還會耗用瀏覽器 CPU 解析與渲染時間。 LazyLoad 可避免瀏覽器在首次載入時就忙著處理整頁圖片，提升 First Paint 時間，讓內容更快顯示。 3. 強化使用者體驗使用者更快看到畫面上可見的內容，自然會覺得「這網頁好快」。反之，如果等圖卡住了頁面，體驗就會大打折扣。各大網站 LazyLoad 的應用範例 PChome 先顯示灰底圖片，等圖片載入後才替換。 ETtoday 有 loading 動畫的底圖，載入圖片後再替換。 Medium 的高級做法：漸進式圖片置換 Medium 的做法分成三階段： 1.

Firebase Storage 入門

關於 Firebase Firebase 是 google 的雲端資料庫平台，提供了很多 APP、WEB 所需要的後端功能，如果只是小專案完全可以用 Firebase 雲端來取代我們 local 安裝操作 DB 的需求。其他介紹就不多闡述啦，因為這篇筆記不講 Cloud Firestore 和 Realtime Database ，而是單純以 Firebase Storage 為主 Firebase Storage 大小限制免費方案的空間大小限制是 5GB 每日最多下載流量 1GB 一天下載次數最多5萬次上傳次數最多2萬次就一般的開發者寫寫 side project 是非常夠用的新建專案首先到 Firebase 官網新增專案專案命名按自己喜好取名這邊會問要不要啟用 GA 功能，因為不是此筆記重點，

JavaScript Spread Operator 與 Array.concat 的比較

前言在 JavaScript 開發中，陣列操作是不可或缺的一環，而「陣列合併」更是經常出現的需求。在幾年前我寫過筆記 https://tech.simonallen.app/es6-spread-operator-array/，但進入現職公司後，我反而看到的都是 concat()。其實不論是在資料處理、狀態更新，還是函式參數傳遞時，我們都會面臨選擇：該用 concat() 方法，還是使用語法更簡潔的 ... Spread Operator？先說結論，以我目前觀看台灣的技術筆記和公司程式碼、社群朋友習慣，大家都偏好 Spread Operator，如果沒有特殊用途那我建議使用 Spread Operator。不過這篇文章還是會從語法可讀性、使用彈性、效能表現以及實務場景等面向來比較。兩種合併方法介紹 Array.concat() const arr1 = [1, 2, 3]; const arr2 = [4,

React v14 和 v16 Style 行內樣式的雷

昨天在公司遇到 React Style 行內樣式的雷，害我 dubug 了老半天。是這樣的我們公司有兩個 B2C 的網站平台長得很像，差異只在顏色與風格不同，一個網站前端是 React v14，另一個相對新是用 React v16，而兩個網站很多功能都要一樣，所以一個前端元件寫好後要想辦法讓 React 的 14 版和 16 版共用，要到各自不同的專案複製貼上元件程式碼接著微調。通常是舊的不支援新的，於是先改 React v14 的網站，按照該元件既有寫法，行內樣是這樣寫： <div style={{ width: "820", height: "360" }} ></div> 改完後將這個元件貼給 React

React.js 筆記：Minified exception occurred

工作上撞到的問題，隨手紀錄一下：正式站預期該顯示的東西沒有顯示，開發者工具 log 是： Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings. 乍看會覺得像是 React 壓縮程式碼出錯，但其實 debug 的點在於後端送來的 HTML。因為我們是用 React 的 dangerouslySetInnerHTML 來轉換後端丟來的 HTML，而後端丟來的 HTML 是在公司後台輸入框上的。而公司後台輸入框塞的 HTML，是公司設計中心的網頁設計師拿他們切板 HTML 自己塞的，但是網頁設計師的 HTML少了結尾標籤..。那自然 dangerouslySetInnerHTML會報錯進而導致頁面阻塞。無言

IE 議題

前陣子與到各種 IE 問題真的有夠痛苦，實在不理解為什麼都 2019 年了還要支援到 IE9？IE11 就算了，IE9 欸？？IE 有多少使用量不就 GA 報表一看就知道了嗎？主事 PM 不理解 RD 處理 IE 9 的時間都能做其他新功能了，哀抱怨歸抱怨，這裡紀錄一下遇到的問題：問題：HTML 5 的 input placeholder 這個屬性 attribute，要在 IE10 才支援解決：在與 PO 討論後、請資深 RD 與 PO 討論後，請 RD Leader 再和