滿版圖片背景、影音背景

本篇大綱:本篇要解決的問題、滿版背景圖、滿版影音背景。最近遇到頁面的第一屏是滿版影片當背景的設計稿,原本以為只是偶爾有的樣式,後來看到朋友做別的案子時也有一樣的設計,才想把這次寫滿版影片的方式給筆記起來。

TestCafe學習筆記-2:常用設定及功能

本篇大綱:typeText,輸入文字時可帶的參數。比對網址。修改等待時間。螢幕截圖。用瀏覽器的模擬手機功能。取消快取。建立不同會員身份來測試。這篇是 Augustus 翻了一次 TestCafe 的說明文件後,整理出覺得會常用到的部份。

TestCafe學習筆記-1:自動化測試會員登入

本篇大綱:關於 End-to-End 測試。安裝 TestCafe。撰寫測試檔、Fixtures、Tests。頁面上互動。執行自動化測試。設定排程、機器人通知。程式碼。筆記後心得。選擇使用 TestCafe,主要是因為比較好學,而且 Youtube 上的教學也比較多。

製作RWD email 工具:MJML,如何使用及注意事項

本篇大綱:本篇要解決的問題。安裝 MJML。開始使用。MJML 程式碼,寬度、CSS、Style、一般的 a 標籤。整理注意事項的原始碼。用完 MJML 這套 RWD email 工具後深深覺得,終於得到一套 +8 精煉的對抗 Outlook 的神器了!

用Vue.js製作圖片版EDM生成器

本篇大綱:本篇要解決的問題。預覽、產出的HTML,要分開。用 replace 替代 hack,補上 width、html。檔案包成 zip 的套件:JSZip、FileSaver.js。抓圖檔要用 FileReader。JSZip 抓圖檔,要刪掉 base64 的開頭。demo 及原始檔下載。

GitLab Pages,3+2個步驟讓GitLab專案產生靜態頁

本篇大綱:GitLab生成靜態頁,私人專案也行。1 要生成靜態頁的檔案都放進「public」資料夾內。2 建立.gitlab-ci.yaml的檔案3 專案push到GitLab上。+1 等gitlab pipelines顯示狀態為「passed」。+2 輸入GitLab Pages產生靜態頁後的網址。

WebSocket 基本介紹及使用筆記

本篇大綱:WebSocket前端得懂一點。WebSocket重點心智圖。用 Node.js 建一個簡單的 WebSocket Server。前端連結WebSocket。1 建立WebSocket、2 監聽WebSocket事件、3 client端發訊息給WS Server。

用Google Apps Script寫一個LINE登入功能:下篇 – 三大步驟

本篇大綱:取得LINE登入的三大步驟。1 產出一個讓使用者點擊的LINE網址。2 拿LINE網址回傳的授權碼,呼API取得token。3 拿token呼API取得使用者的公開資料。三大步驟的完整程式碼。參考資源。上篇的「前置作業」都設定完後,本篇要進入程式碼的部份了,程式碼主要是呼API來取得token跟資料。