CSS animation Performance分享個關於 CSS animation performance,後面會提到自己在專案上遇到相關的問題。提醒如果你需要使用 animation 的話,盡量能用只需要 Composite 的 style,避免對畫面造成可能的負擔。May 08, 2021·5min·javascript
Critical Rendering Path 關鍵渲染路徑優化假設你有針對 google page speed、lighthouse 優化過,應該會特別有感觸,該如何才能讓網頁載入更快。接下來討論如何讓畫面渲染載入更快,以及一些最佳化使用方式。February 11, 2021·3min·javascript
JavaScript Closure 你一定有用過的閉包JavsScript 的 closure (閉包) 是什麼? 假設你有在寫 javascript 的話,你可能每天都在用,但你只是沒特別查覺而已。June 27, 2020·3min·javascript
Immutable 對於 React 重要性React 有提到 state 的更新,都必須要是 immutable,當你有使用到 useState 或是 pureComponent、shouldComponentUpdate,你就會發現問題。April 29, 2020·2min·javascript
Puppeteer End-to-End Test React會以 Puppeteer 在 react 專案上跑 End to End Test。puppeteer 是由 Chrome DevTools team 團隊開發的,它是一個 node library 工具,提供 API 讓我們控制 chrome 或 Chromium,模擬執行各種功能。February 28, 2020·8min·javascript
阻擋第三方(Block third-party) Cookie,各瀏覽器狀態IOS 11 開始預設開啟 prevent cross-site tracking 的設定,這會導致第三方 cookie 無法設置,若要完美處理 Block third-party Cookie 唯一解法就是改用 local Storage 或是 Session Storage。December 11, 2019·3min·javascript
Redux multiple dispatch,batch redux-thunkredux 核心流程 dispatch action => reducer => store,當你用 redux 運行多個 dispatch 時,每一個 dispatch 都會獨立更新下去的,如果你的更新資料又彼此關聯,就可能會發生錯誤。November 30, 2019·4min·javascript
React Unit Test with Jest 單元測試單元測試在我剛寫程式時,認為測試 case 是自己預期的,還主觀的認為沒什麼用。但我在實際寫幾個測試後,能更專注在預期判斷 input output,也有助於你思考 function 架構更清楚。接下來就來針對 react hooks 做 component testing。September 29, 2019·7min·javascript
GA跨網域追蹤 google analytics cross-domain tracking如果你有多個網站服務,每個服務又是各自在不同網域上,就會遇到一個棘手的問題,無法確切的追蹤使用者數據。google analytics有提供跨網域追蹤,讓我們解決這個問題,後面就來嘗試跨網域追蹤設定。August 04, 2019·5min·marketing
React Context API 跨元件傳遞資料React為了解決props 需要傳很多層問題,就在v16.3 更新 context API 的功能,context API 主要功能就是跨元件傳遞資料。利用createContext 建立context,並搭配Provider、Consumer、contexttype、usecontext 跨元件取值。July 28, 2019·6min·javascript
Google Analytics 自訂UserId 追蹤數據分享一個google analytics滿好用的功能,設定User Id,可以讓你直接在報表上找出這個使用者的flow,包括停留時間等等詳細數據,假設你搭配會員系統給予id的話,你也能夠跨裝置的追蹤數據。June 15, 2019·4min·marketing
React Hooks Performance 效能處理React發布了幾個月的Hooks,最近也開始嘗試接觸,後面會稍微提一下PureComponent,不會介紹hooks各種特殊用法,就只針對hooks performance優化做介紹。June 01, 2019·7min·javascript
Google Sheet RESTful API 試算表表單分享如何建立app script api管理讀取、更新excel表單資料,簡單講就是API的CRUD,並且製作一個可以用的簡單畫面,串接api更新訂單狀態。May 11, 2019·8min·javascript
lazy loading image 延後載入畫面外圖片分享一點最近處理lazyload心得,lazy loading image 對網站是很合理的處理優化,使用者沒看到的區塊本來就不需要浪費網路載入。April 25, 2019·7min·javascript
JavaScript Capture Bubble DOM事件獲取&冒泡JavaScript處理DOM事件上的獲取和冒泡,實務上滿常用到的觀念,可以透過這方式解決一些麻煩問題,例如popup視窗的關閉、內外層DOM互動關係,另外事件獲取、冒泡也幾乎是面試必考題。March 21, 2019·4min·javascript
SEO關鍵字分析選擇,優化工具介紹從去年剛開始,就一直很想分享的內容,以前曾擔任過行銷,主要是負責seo優化,有一些些小技巧跟心得想分享。接下來分享如何使用google adword關鍵字分析工具等等,規劃架構出內容,幫助提升排名。February 26, 2019·5min·marketing
Javascript Promise example 簡易實作模擬接下來會用 promise 處理 callback hell,還有建立一個簡易的 promise,幫助我們理解promise。February 18, 2019·6min·javascript
React Server-side rendering SEO處理不使用next.js,來試著依靠原生方法,架構出React server-side render,會使用到react官方的cli create-react-app,以及node.js作為server。January 30, 2019·7min·javascript
SEO 301、302轉址Redirect,canonical tag重複內容處理轉址的概念,大概是宣告這個頁面要搬家到另一個頁面的意思,依照不同後端語言,各有不同的轉址寫法,但邏輯上都是一樣的,大概分為 301、302、307。若是有重複性內容處理的問題,那你就需要使用canonical處理。December 19, 2018·4min·marketing
Update Next.js 7、react 16 error and bug前陣子公司專案從next3更新到7、react也從15更新到16,希望能加快開發或佈署的速度,順便分享一下踩到了哪些的地雷。December 09, 2018·3min·javascript
結構化資料SEO 優化顯示搜尋結果當你網站有依照規範使用結構化資料,最重要、也最有回饋感的是,會直接讓網站在搜尋結果顯示更不一樣,間接地幫助提高網站點擊率,也有助於搜尋引擎理解網站的內容。November 25, 2018·6min·marketing
React Portals render component anywhere exampleReact Portals 是非常酷炫的功能,能夠將元件向任意dom節點依附渲染,這邊會介紹兩個範例,頁面上渲染元件,還有渲染元件到window open上。November 19, 2018·2min·javascript
Upload progress bar drag&drop 圖片拖拉上傳進度條首先申請imgur api,再處理input獲取檔案,獲取後串接api,另外針對拖拉要處理事件,要利用dataTransfer獲取檔案,再串接到api,另外針對ajax監聽,製作出進度條。October 27, 2018·7min·javascript
Google Tag Manager(gtm)教學 觸發、代碼、變數設定介紹完整介紹tag manager功能設定細節、功能,建立流程步驟教學,以留言板追蹤為範例。假設我們要追蹤送出留言,建立一個事件,拿進ga當作轉換目標。October 16, 2018·9min·marketing
Node.js Express MongoDB RESTful Api 留言板實作教學RESTful是某種設計架構的稱呼,方便、有彈性的傳輸資料。這邊會用node.js搭配express架構RESTful Api,資料會使用mongoDB,部署到server上,建立一個簡單的留言板。October 11, 2018·8min·javascript
第一次面試人比起履歷上面列滿滿的技能,不如直接用這些技能實作;如果是列公司的產品,要註明分工實作項目。面試時候,介紹自己可以更有自信,常常聽到面試者說這很簡單,先挫自己銳氣了,不懂技術裝懂,會有壞印象,還有氣場適不適合這點也重要。September 27, 2018·5min·life
Google Search Console教學 提交Sitemap網址、SEO工具gooogle search console是非常實用、強大的工具,有辦法直接影響網站在google上的搜尋。search console最實用的功能,查看過去幾天google搜尋到網站的關鍵字,進而讓你優化排名。September 24, 2018·5min·marketing
HTML postMessage iframe and open window 跨視窗傳訊用法當今天使用到跨視窗iframe或是openWindow,原本parent頁面需要傳遞訊息給內頁iframe或是tab頁,就可以利用postMessage來傳遞資料。接下來會建立demo頁面,介紹一下iframe跟window open的使用方法。September 23, 2018·4min·javascript
Google Tag Manager tracking code 安裝追蹤碼Google Tag manager 是一個強大的程式碼管理容器,一個代碼管理中心的概念,涵蓋著處理各種代碼的設定。接下來就開始介紹功能,靠tag manager建立事件。我要追蹤的是click的連結。August 26, 2018·9min·marketing
JavaScript Prototype 繼承、原型鏈 Prototype chainJavaScript沒有類的特性(class-based),跟Java不一樣,雖然說ES6 有class但它只是語法糖,每個JavaScript都具備有prototype,只是分為公開、私有差異,而JavaScript就用prototype來處理繼承(prototype-based),特性是延展性高。August 25, 2018·3min·javascript
Google Analytics 工作階段介紹、定義ga工作階段簡單講就是當使用者進入網站,那一刻起就算一個工作階段,沒有所謂使用者進來一跳出,沒有計算到工作階段,他跟網頁停留時間邏輯不一樣,不是依靠節點相減計算的。July 30, 2018·3min·marketing
React Life Cycle 生命週期更新版,父子元件執行順序開發上用到React,而其中最重要的莫過於是生命週期lifeCycle,可以在每個元件渲染的過程,加入需要的處理,例如載入完元件後非同步抓取資料,更新props觸發處理事件等等。接下來介紹一下新版本的life Cycle。July 27, 2018·8min·javascript
Google analytics UTM設定參數,追蹤facebook廣告、簡訊、EDMga的utm非常好用,用途在於歸類流量管道,可以幫你你精準的分析數據,facebook廣告、電子報,簡訊、或社群曝光分享,提供精準數據幫助你優化廣告操作。June 23, 2018·3min·marketing
Node.js、Express、MySQL串接資料庫,Heroku部署環境在這個前後端分離的時代,多半會再開一台Node.js的server給前端處理router,這邊就要來使用Node.js搭配express以及MySQL來建立簡單的網站router。June 17, 2018·5min·javascript
Facebook 粉絲團網域驗證教學「認證網域」之後就可以開放編輯facebook粉絲團貼文了。寫這篇認證網域流程文章,主要是推薦大家看google dns txt教學,各大網域代管商都有,外加流程圖圖文並茂,果然是google啊。May 09, 2018·2min·marketing
React Higher Order Components 初探觀念介紹關於使用stateless component時,常會搭配使用的Higher Order Components,之前有看到「高階組件」這區塊,被他名字誤會了,實際上一點也不高階,他就只是一個function 函式,接受參數元件然後回傳全新元件,簡易的範例如下。May 08, 2018·2min·javascript
Google analytics 事件追蹤、轉換目標設定教學 ga eventGoogle analytics很重要的事件追蹤,可以使用ga提供的方法ga('send', 'event', xx.xx.xx)來產生事件,成功產生事件後,就可以再把這個事件設定為轉換目標,就可以做到註冊會員、填表等等追蹤了。April 25, 2018·5min·marketing
前端工程師面試心得 | Frontend Engineer interview整理最近的面試心得,要找的是第二份前端職缺,我大概在三月開始找工作,主要是用104、yourator、ptt,找的都是希望有用到前端框架或是未來要用,然後公司產品主力是軟體相關。March 25, 2018·9min·life
Google sheet 試算表表單串接api要用到活動或是問卷,相信大家最常會用到google form,非常快速的創出填表功能,但google form存在許多限制,google analytics轉換目標也不能設定,都可以用google excel的api來解決。February 08, 2018·7min·javascript
SEO優化 google教學guideline介紹決定排名的是複雜的演算法,所以要讓程式容易辨認內容,你網頁要能被google robot爬到內容,盡量避免用javascript產生內容(要的話請用SSR 或是PSR),不要整個網頁都用圖片,google不會理你圖片裡面寫啥米(能爬得懂也不理),記得要利用圖片搭上文字做定位排版。January 28, 2018·8min·marketing
Javascript Array sort 陣列排序分類處理介紹Array sort,現代網頁技術快速發展,前端經常要用到非同步來取得資料,拿到的陣列資料,經常會需要排序功能,ie.價格排序、新舊排序、同類型排序等,sort會對陣列跑兩個數跑比對條件,左至右重複跑到完全符合條件的順序。December 16, 2017·2min·javascript
Google Map marker cluster 標記使用教學google map下多個marker,再搭配marker的event來互動,以下是打開infowindow的運用。markerwithlabel讓我們更簡單設計不同的marker,例如讓他帶自訂的image,再來是重點 markercluster,它讓我們可以解決marker過多,同時重疊的問題。December 11, 2017·5min·javascript