可以直接插入圖片的所見即所得HTML編輯器：Summernote / Summernote: A WYSIWYG HTML editor Editor That Can Directly Insert Pictures

​儘管Summernote很難跟Vue整合，但獨立使用倒是挺方便的。

將Python的運算結果，用JavaScript的Cytoscape顯示 / Display the calculation results of Python in Cytoscape of JavaScript

背後運算用Colab，前端顯示用JavaScript跟CSS，世界頓時開闊了起來。

可以保存檔案的待辦事項離線應用程式：Todo List / Todo List: An Offline To-Do List Application That Allows for File Storage.

這篇要介紹我開發的PWA Todo List專案。此專案以開發一個完整的待辦事項工具為目標，不僅可以保存檔案，又不需要雲端帳號，因此容易整合到既有的系統架構上。

如何修改TrustedHTML政策限制的DOM？ / How to Modify DOM Blocked by Trustedhtml Policy?

居然被擋下來了。

JavaScript的字串排序 / String Sorting in JavaScript

要讓JavaScript排序做得好，其實並不簡單。

Google試算表的小技巧 / Tips for Google Sheet

最近我改用Google Sheet整理大量資料。但每次打開Google Sheet要新增資料時，都必須捲到最後一列，才能慢慢地新增資料。真的是太麻煩了。

不知道有沒有快速跳到最後一列的方法呢？

用過的網路圖工具 / My Network Graph Development Journey

如果要做社會網路分析的話，你會用什麼工具呢？

問我？一律回答JavaScript (誤)

不只文字雲，而是文字網路雲 / Word Network Graph

好，正式確定了社會網路分析取代文字雲的分析價值。

被人遺忘的Filesystem API / HTML5 Filesystem API

如果要在網頁應用程式裡面保存檔案的話，你會怎麼做呢？

JavaScript新推出的Maps資料類型 / New JavaScript Data Type: Map

JavaScript在ES6導入了Map物件類型。這跟大家習以為常的Object有什麼不同呢？

動態轉換PWA / Convert a Website to PWA dynamically

把網頁變成電腦的應用程式，這種應用程式就叫做PWA (Progressive Web App)。最近我才發現，不用網站管理者，我也可以把網站變成PWA。

用JavaScript裁切圖片多餘邊緣 / Trim an Image by JavaScript

雖然說ImageMagick是可以處理圖片沒錯，但畢竟要安裝工具還是有點麻煩。能不能直接在網頁就能裁切圖片多餘的邊緣呢？

如何從句子中的單字搜尋詞典中符合的詞彙？ / How to search for the matching terms in the dictionary from a word in the sentence?

如果我想要以一個字搜尋字典裡面有的詞彙，而這個詞彙又需要符合該字在句子構成的詞彙時，要怎麼做呢？舉例來說，我想在「清晨時去游泳池」這個句子裡，用「泳」來找出「游泳池」、「泳池」、「游泳」，但要排除掉「晨泳」、「泳褲」等詞彙。我整理了一套搜尋演算法來實作這個目標，這套搜尋演算法包括了過濾出現字、過濾相連順序、過濾相符詞彙、排序詞彙長度、排序錨點字位置這五個步驟。以下我將以JavaScript程式碼來講解各步驟的做法，最後附上JavaScript跟PHP兩種版本的實作程式碼。

​如何在前端瀏覽器用JavaScript處理過長的字串變數？活用虛擬DOM作為快取 / How to use JavaScript to deal with long string variables in the front-end browser? Use Virtual DOM as cache

我會在網頁上使用SheetJS js-xlsx讀取ODS試算表檔案的內容，但最近發現檔案如果超過2.5MB，在載入檔案輸入到字串的時候，就會造成瀏覽器崩潰當機。

研究之後，我想到可以將字串建立成虛擬DOM上的節點，用來緩存過長的內容。在需要全部字串內容時，再一一從節點取得緩存即可。

以下我用兩個實際上的網頁作為例子，一個用來說明沒有緩存的過長字串導致瀏覽器當掉的情況，另一個是用虛擬DOM緩存，最後可以正常執行的情況。

Node.js前後端CORS網頁應用試作：AdonisJs聊天室 / Practice of Build a CORS Full Stack Web Application in Node.js: AdonisJs Chat

啊囉哈~~這裡是寫程式寫到整個人都變得優雅起來的布丁。

作為網站工程師，用JavaScript開發前端就像是日常便飯一樣。但前端都用JavaScript開發了，那後端為何不用Node.js一起開發呢？這個想法是從兩年前開始，這期間跌跌撞撞不斷摸索，直到最近才找到比較理想的方案，那就是後端使用AdonisJS作為伺服器與保存資料、前端使用Vue.js控制介面與邏輯，最後搭配Webpack編譯。

為了測試我需要的功能都能正常運作，我試作了一個跨網域資源共用(Cross-Origin Resource Sharining, CORS)情境下使用的網站外掛：AdonisJS聊天室。我寫這篇，是為了將到目前為止開發的心得告一個段落。以下將說明AdonisJS聊天室的功能、系統架構與技術，最後講講開發時遭遇的問題與想法。希望能夠為其他開發者提供一些解決問題的線索。

如何建構響應式的HTML表格：表格縮圖響應式設計方案 / How to Create a Responsive Table using Table Thumbnail

啊囉哈~~這裡是剛剛才發現在米塔颱風中曬衣服是不行的布丁。

為了因應大小不一的螢幕尺寸，現代的網頁都強調必須具備響應式設計(responsive web design)。響應式設計可以讓網頁在大螢幕上面看起來很自然，在小螢幕裡面也不會看起來太過彆扭。網頁上各種不同的元素都有其響應式設計的做法。其中最具爭議性的，就是表格元素<table>的響應式處理。

有別於主流的捲軸方案或是重新排版的CSS方案，這邊我要提出一種特別適合部落格文章的表格縮圖響應式設計方案。此做法是在小螢幕時以表格縮圖取代原本的表格，而使用者點選表格縮圖時，就會開啟一個新網頁，裡面呈現完整的表格內容。下面就讓我們來看看表格縮圖響應式設計方案怎麽運作的吧。

初探網頁前端框架Svelte / Preliminary Study of Svelte, a Front-end Framework

最近嘗試摸索了號稱簡短程式碼就能運作的網頁前端框架Svelte，一開始我的確為它的簡潔所吸引，嘗試架了一個Svelte專案來跑跑看。不過實際摸索後，若從開發大型複雜專案的角度來看，Svelte無法將腳本與樣式拆開成獨立檔案、也難以抽出額外的圖片檔案等不足，使得它仍然比不上Vue.js好用。

這篇先給大家準備一個我嘗試Svelte的試作專案，再來談談我對Svelte的使用感想。如果對Svelte有興趣的人，說不定也能基於我的試作專案再來改造，改善我對Svelte的批評呢。

Webpack引用方式對檔案大小的影響 / The Size of Webpack package files are different on Import from Files or Modules

在Webpack中引用其他程式碼的模組解析，可以是來自於獨立的JavaScript檔案，也可以是來自於Node.js中已安裝的模組，可以使用require，也可以使用import。我很好奇到底這兩種引用方式對於最後產生的檔案大小有何影響，在這篇中我以引用獨立檔案或是已安裝的模組、require或是import這四種組合來引用 jQuery 跟 JSZip 、 FileSaver 這三個模組，發現引用Node.js已安裝模組的方式產生的檔案較大，引用 獨立檔案所產生的檔案較小。而import產生的檔案比較大，require比較小。所以專案要選擇用require來引用獨立檔案會比較好嗎？我也不這樣認為。

OneDrive雲端硬碟檔案直接下載連結產生器 / OneDrive File Download Link Generator

除了Google Drive雲端硬碟可以產生直接下載的連結之外，另一個知名的雲端硬碟OneDrive也能夠產生直接下載連結喔。我參考OneDrive 2017 Direct File Download URL Maker這篇的作法，把連結轉換的功能調整成比較順手的操作，並且加入TinyURL短網址功能。讓我們來看看怎麽做吧。

線上檔案語音轉文字字幕：Web Speech to Text / Speech recognition with Google Chrome: Web Speech to Text

語音轉文字的技術已經存在多年，現在這個技術已經普遍到大家手上的智慧型手機都內建了語音辨識輸入系統。除了從麥克風辨識語音之外，我們也很常需要從錄下來的影片、聲音檔中辨識文字。意外的是，這樣的技術其實不需要仰賴什麼雲端科技技術，也不用付出高昂的成本，只需要用你現在瀏覽網頁的Google Chrome就可以開始語音轉文字了。

我參考了陳鍾誠所撰寫的「Google 的語音辨識 API 之使用」，利用瀏覽器內建的Web Speech API開發成網頁應用程式「Web Speech to Text」，搭配Virtual Audio Cable讓電腦的聲音輸出的聲音轉到麥克風輸入，就能讓播放影片或聲音檔案的同時語音辨識為文字，最後轉為字幕檔案格式srt輸出。讓我們來看看怎麼做吧。