小河馬

Javascript Promise example 簡易實作模擬

Javascript 在ES6新增了大量非常實用的功能,其中重要一項就是Promsie,讓我們可以很直覺的處理非同步,在以前如果我們需要同時發出多個非同步請求,就必須在每次調用function 時,一起在參數帶回callback的function,重複了幾次就變成了波動拳。

閱讀全文

React Server-side rendering SEO處理

先來稍微介紹一下為什麼要做server side render,另外這邊不會使用next.js,雖然公司目前專案有用到,但我滿推薦用next.js的,很好導入並且解決很多需要處理的問題。(雖然有一些bug、還會頻繁更新,兩年內version 3 -> 7…)

閱讀全文

SEO 301、302轉址Redirect,canonical tag重複內容處理

SEO優化,是眾多細節的組成的,不光光只是設定好title而已,還有網站架構、速度、後端設定處理等等,包含非常多項目,對開發人員來說,不論是設計、前端、後端都需要注意。

閱讀全文

Update Next.js 7、react 16 error and bug

前陣子公司專案從next 3 更新到7、react也從15更新到16,希望能加快開發或佈署的速度,順便分享一下踩到了哪些的地雷。

閱讀全文

結構化資料SEO 優化顯示搜尋結果

過去,搜尋引擎難以理解網站的內容屬性,這時就依靠結構化資料(structured data),這是Google、Yahoo、Bing等搜尋引擎根據schema.org制定的標記,共同的去支援。這些標記多半是關於網站內容的一些分類,麵包屑(breadcrumb)、文章(article)、活動(event)、影片(video)等等。

閱讀全文

React Portals render component anywhere example

這幾天專案要處理非常麻煩的畫面,子層被父層 overflow: hidden 加 postion relative 切到部分展開元件,突然想到之前同事提到新功能Portals,Portals能夠將元件向任意dom節點依附渲染,非常酷炫的功能,想說就順便來研究一下React Portals。

閱讀全文

Upload progress bar drag&drop 圖片拖拉上傳進度條

最近剛好要使用圖片上傳的功能,但因為資源較少,所以考慮用網路上的image api服務,稍微研究後選擇imgur的服務。以前拖拉上傳,都是用套件處理掉,剛好來研究一下如何處理拖拉上傳圖片,附加進度條功能。

閱讀全文

Google Tag Manager(gtm)教學 觸發、代碼、變數設定介紹

之前有介紹過如何在 tag manager安裝 ga追蹤碼,埋設 tag manager的追蹤碼到網頁後,再來開始進入 tag manager設定,首先點選 觸發 建立好觸發邏輯,再進入 代碼 增加ga追蹤碼,綁定設定好的觸發點,再點選提交上去,就完成設定了。

閱讀全文

Node.js Express MongoDB RESTful Api 留言板實作教學

前端不斷的演進,更講求畫面快速變化,跳脫傳統傳送資料方式,漸漸改為用javascript連接,所以,server端就負責建立api,透過串接api處理資料。

閱讀全文

第一次面試人

因為一些緣故,某個前端同事離職了。人總會來來去去,雖然我到職相處三個月多,但還是不禁有點感傷。為了補上人力缺口,公司很快地開始招募員工,沒想到,要我跟另一個前端同事Joey一起擔任面試角色。

閱讀全文

Menu