軟體主廚的程式料理廚房

網頁瀏覽器都有一個功能，它會幫我們記住目前頁面的捲軸位置，在我們重新整理或是回到上一頁、前往下一頁之後，捲軸會還原到原本的位置，可是如果我們的網頁 HTML 元件是在前端產生的，因為畫面上 HTML 元件的渲染時機不定，那麼瀏覽器在還原捲軸位置的時候，就會有不穩定的情況，不是無效不然就是位置不對，這個問題我們透過 window.history 就能輕鬆解決，我們來看一下怎麼做？

如果我們用 jQuery 在開發網頁，那麼 jQuery 應該也一定只載入一次，偏偏就有第三方合作廠商，完全沒有在管客戶是不是會出問題？檢查也不做，愛載就載，例如：6763 的站內付 2.0，用他們的 Web JS SDK 初始付款頁面的時候強制載入了 jQuery 3.4.1，如果我們的網頁本身就已經載入 jQuery 了，就會導致重複載入，那會發生什麼事？

前一篇文章介紹了用 Canvas 來合併、縮放、裁切圖片，文章裡面範例的圖片來源是 HTMLImageElement，這天我們美編丟了兩段 SVG（Scalable Vector Graphics）格式的 HTML，我就想說都是圖片應該都一樣吧，依樣畫葫蘆想合併這兩張圖片，結果…

在我剛學習網頁程式設計的那個年代，要在前端網頁上對圖片做除了顯示／隱藏／放大／縮小以外的處理，大都是丟到後端處理完後再丟回來，拜網頁設計技術進步所賜，生出了 Canvas 這個東西，讓我們可以利用客戶端的運算資源執行繪圖的工作，甚至要搞出一個純前端的小畫家是完全沒有問題的。

這篇文章是一個知識的分享，主要分享給不知道的朋友，我們用 JavaScript 設計一個互動的網頁，一定會用到事件（Event），舉凡像是按鈕的點擊、滑鼠的捲動、選項值的改變、...等等，這些都會需要事件來輔助，但是有時候我們會希望註冊給事件的方法只被觸發一次。

上一篇文章我們簡單介紹了一下 CefSharp 的基本使用方式，直接在 WinForms/WPF 內嵌一個瀏覽器，基本上我們所有的程式邏輯都可以引入 JavaScript 套件，用 JavaScript 來開發，直接在瀏覽器端執行，但是這不代表我們不能把工作丟給 .NET 來做，必要時我們還是可以搭配 .NET 來平衡一下應用程式的工作負載，因此在 JavaScript 與 .NET 之間傳遞參數及回傳值就很重要了，這篇文章我們就來探究一下使用 CefSharp 套件，如何在 JavaScript 與 .NET 之間傳遞參數及回傳值？以及能夠傳遞的參數及回傳值的類型有哪些？

Day.js 是在前端的世界中，一個處理日期時間相當知名的套件，或許有朋友聽過 Moment.js，但是可以用 Day.js 的話我優先選擇使用 Day.js，最主要是它的檔案大小號稱只有 2KB，之所以可以壓到這麼小，最重要的一個原因是它將一些額外的功能，以外掛的方式分包出去，要使用的話再引用進來，而 Timezone 是其中一個外掛。

最近專案有一個需求，需求當中的一個小部分是要在網頁上將使用者輸入的內容壓縮起來存檔，之後使用者再開啟這個檔案解壓縮顯示壓縮前的內容在網頁上，仔細想想現在的硬碟空間都那麼大，好像沒有什麼壓縮的必要，但是使用者覺得有必要，那也只好做給他了。

我們在追蹤客戶端行為時，多多少少會遇到一個場景，就是要在使用者把網頁視窗關閉時，將記錄送回伺服器端，做法上我們可能會想在網頁視窗觸發 unload 事件的時候，發送 AJAX Request 回伺服器端就好了，但是這個方法在一些瀏覽器上（比如：Firefox）不 Work，取而代之 Web APIs 提供了更好的 API - sendBeacon()。

在 JavaScript 的 Promise API 中，要處理一個 Promise 的集合，有 Promise.all()、Promise.any()、…等等，可是這些 API 要嘛要等全部的 Promise 都完成了，要嘛是任一個，而且只有一個 Promise 完成了，才能串接後續的處理，沒有那種依照完成的先後順序一個接一個串接後續處理的 API，不過沒關係，利用 Promise 的特性，我們也是能做到類似的效果。