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。

閱讀全文

Google Analytics 工作階段介紹、定義

google analytics網頁的左邊欄位,點開目標對象、客戶開發就會發現滿滿的工作階段,如果不懂工作階段的定義,那你裡面的相關數據可能會看不太懂,很久以前我有看過舊版的官方介紹,看完其實一知半解,一直以為工作階段會近似於入站或是使用者,然後有時候看數據就用猜測的。例如說單次工作階段頁數,雖然知道是瀏覽頁數除以工作階段,但你在交叉比對其他數據的時候,就比較難分析出真正原因。

閱讀全文

Menu