幫助存取HTML的時間日期元素值的函式庫 2023 年 12 月 23 日 Magic Len JavaScript 在預設的情況下,基於日期和時間的HTML input元素值是以UTC時區為基準,這很容易造成混淆而誤用。 繼續閱讀
如何根據容器大小自動調整HTML上的文字,使文字儘量不破壞排版 2023 年 12 月 23 日 Magic Len JavaScript 早在2017年筆者在開發前端網頁的時候就遇到兩個問題:如果要做一個網頁,這網頁滿版顯示,在任意螢幕尺寸下都要長的差不多,文字的大小要怎麼處理呢?還有就是在文字高度僅允許一行文字的空間下,要怎麼保證使用者輸入的文字不會因為太多而使得顯示出來的時候換行,或是換太多行了,而導致畫面跑版? 繼續閱讀
如何使用Rust程式語言將字串安全地寫入HTML文件中? 2020 年 10 月 6 日 Magic Len Rust 在進行網頁開發的時候,可能會需要將使用者輸入的資料顯示在HTML網頁上,此時的網頁就會暴露在XSS(Cross-Site Scripting)攻擊的危險下。如果網頁不做任何檢查,將使用者輸入的資料嵌入至網頁中的話,輸入資料中的HTML語法就會直接影響到網頁,就會使得網頁爛掉或是藏有惡意的連結和腳本。為了讓使用者輸入的資料不會被當作是一般的HTML語法,需要將特定的保留字元進行跳脫處理,像是「<... 繼續閱讀
如何用Rust程式語言產生HTML文件的大綱(Outline)? 2020 年 8 月 28 日 Magic Len Rust 一個定義良好的HTML標題結構除了能讓訪客更輕鬆地瀏覽網頁之外,也能夠幫助搜尋引擎更精確地理解HTML文件的內容,提高網站的搜尋排名。要如何使用Rust程式來產生HTML文件的標題大綱(Outline)呢? 繼續閱讀
HTML的 script 標籤所用的 async 和 defer 屬性是什麼?要如何利用它們來加速網頁載入速度? 2020 年 5 月 14 日 Magic Len 研究分享、 HTML 現代的HTML網頁常會加入大量的「腳本(Script)」來讓網頁擁有各式各樣的功能。腳本固然強大,但若使用不當,很容易造成網頁的載入時間變長,影響使用者體驗。 繼續閱讀
如何用Webpack產生HTML網頁? 2019 年 10 月 1 日 Magic Len 研究分享、 HTML、 JavaScript Webpack是JavaScript的模組建置工具,運行在Node.js上,它可以將零散的JavaScript檔案用各式工具優化並打包起來,加快網頁的載入時間。Webpack也並不限於用在JavaScript上,它除了還能打包網頁有用到的靜態資源(如JS、CSS、圖片檔等)外,也還能透過HTML模板來產生HTML網頁。 繼續閱讀
用Rust開發WebAssembly─第六章:康威生命遊戲的效能 2019 年 9 月 19 日 Magic Len 研究分享、 Rust、 Webassembly、 JavaScript 前面花了幾個章節製作的康威生命遊戲,功能已經大致上完成了,不過我們還無法確定其效能是否還有可以優化的空間,必須要用一些方式來偵測才行。 繼續閱讀
用Rust開發WebAssembly─第五章:讓康威生命遊戲能與玩家互動 2019 年 9 月 17 日 Magic Len 研究分享、 Rust、 Webassembly、 JavaScript 在這個章節中,我們要替康威生命遊戲加入播放、暫停和逐格播放這幾個時間控制的功能,並且讓培養皿中的格子會因玩家滑鼠游標的點擊事件而改變狀態。 繼續閱讀
用Rust開發WebAssembly─第三章:實作康威生命遊戲 2019 年 9 月 13 日 Magic Len 研究分享、 Rust、 Webassembly、 JavaScript 康威生命遊戲(Conway's Game of Life,又稱康威生命棋)是一個模擬生物細胞存活、繁殖與滅亡的遊戲。雖然這個稱為「遊戲」,但它其實不怎麼好玩,它是透過電腦來模擬出一個培養皿空間,這個培養皿中在一開始會被放置一些虛擬細胞,而這些細胞會遵循一些「遊戲規則」來決定其在下一個階段是持續生存、還是要繁殖、抑或是毀滅。藉由圖像化這個培養皿,我們可以從中觀察到一些有趣(?)的圖像。 繼續閱讀
用Rust開發WebAssembly─第一章:認識WebAssembly 2019 年 9 月 9 日 Magic Len 研究分享、 Rust、 Webassembly、 JavaScript WebAssembly(簡稱Wasm),是一個安全、可移植(無硬體和作業系統相依)的低階語言(類似組合語言),由W3C制定標準,並由世界四大瀏覽器Mozilla Firefox、Microsoft Edge、Google Chrome和Apple Safari的提供商共同開發,能用來製作高效能且體積小的程式,通常是應用在Web上,但也不限於此。WebAssembly並不是利用新語法來編譯出優化過的... 繼續閱讀