小河馬

結構化資料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一起擔任面試角色。

閱讀全文

Google Search Console教學 提交Sitemap網址、SEO工具

gooogle search console是非常實用、強大的工具,有辦法直接影響網站在google上的搜尋,例如說我要立刻取消自己網站上某頁不被google搜尋到,search console移除網址可以處理。頁面剛建立好,要快速出現在google搜尋結果,就可以用search console提交網址索引,或是提交整個sitemap。

閱讀全文

HTML postMessage iframe and open window 跨視窗傳訊用法

最近在公司專案學到了滿好用的功能 postMessage,當今天使用到跨視窗iframe或是openWindow,原本parent頁面需要傳遞訊息給內頁iframe或是tab頁,就可以利用postMessage來傳遞資料。接下來會建立demo頁面,介紹一下iframe跟window open的使用方法。

閱讀全文

Google Tag Manager tracking code 安裝追蹤碼

Tag manager 是一個強大的程式碼管理容器,一個代碼管理中心的概念,提醒一下它並不是取代google analytics,而是涵蓋著處理各種代碼的設定,包括google analytics 以及各種tracking code、或是html等等。功能非常的強大,因此寫錯script或css就可能讓你網站出問題。

閱讀全文

JavaScript Prototype 繼承、原型鏈 Prototype chain

因緣際會之下,最近剛經歷了招募前端,為了準備面試題目,所以整理了一些關於JavaScript的 觀念,其中比較抽象的題目應該是ProtoType、Event loop、Bubbles Capture,這邊就先來介紹一下其中最抽象也比較難理解的JavaScript ProtoType。

閱讀全文

Menu