:::

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

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

21-How_to_search_for_the_matching_terms.png

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

(more...)

如何讓Google Chrome開啟時就佔滿整個螢幕並隱藏控制介面? / How to make Google Chrome open to fill the entire screen and hide the control interface?

布丁布丁吃布丁

如何讓Google Chrome開啟時就佔滿整個螢幕並隱藏控制介面? / How to make Google Chrome open to fill the entire screen and hide the control interface?

20-Google_Chrome_How_to_make_Google_cover.png

最近在展示網頁系統的時候,為了不讓使用者被瀏覽器的其他介面干擾,我在啟動Google Chrome的指令上加上指令列參數(Command Line Switches),使得瀏覽器用新的帳號、隱藏控制介面的APP模式開啟,並讓整個瀏覽器的尺寸設為整個螢幕的大小。這篇就來講講這個指令內包含了什麼參數,以及為什麼我要這樣設定。

(more...)

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

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

18-JavaScript_DOM_How_to_use_JavaScript.png

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

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

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

(more...)

跟AdonisJs與Vue一起玩的那些事兒 / Diary about AdonisJs and Vue

跟AdonisJs與Vue一起玩的那些事兒 / Diary about AdonisJs and Vue

17-AdonisJs_Vue_Diary_about_AdonisJs.png

繼上次的「AdonisJs聊天室」之後,AdonisJs框架 + Vue.js + Webpack組合看起來雖然很好,但實際使用還是有很多細節不盡人意。這邊繼續記錄一下開發系統的一些瑣碎事情。

(more...)

Node.js找不到模組?在npm-link底下的處理方法 / How to Handle "Module not found" Error from Modules installed from npm-link?

布丁布丁吃布丁

Node.js找不到模組?在npm-link底下的處理方法 / How to Handle "Module not found" Error from Modules installed from npm-link?

16-Node_js_npm_link_How_to_Handle_Module.png

Node.js的專案不可或缺的就是豐富的套件。為了避免各個專案重複安裝套件而佔用硬碟大量的空間,我會選擇將套件安裝在全域目錄(global),然後用連結(symlink)的方式放到各自專案底下。這種安裝方式可以透過npm-link的「npm link <package-name>」或是@pulipuli.chen/npm-link-better套件的「nls <package-name>」來安裝。

然而,如果全域目錄的套件經過更新、移除、漏洞修復的話,很可能導致專案底下用npm-link連結的套件會發生「Module not found」錯誤。這時候要先用「npm -g i <package-name>」更新全域目錄的套件、移除專案內的套件連結、最後再重新連結套件。

(more...)

如何不編譯直接在前端瀏覽器使用Vue.js插件?以vue-slim-tabs為例 / How to use Vue.js Plugins in Browser Without Module Bundler?

布丁布丁吃布丁

如何不編譯直接在前端瀏覽器使用Vue.js插件?以vue-slim-tabs為例 / How to use Vue.js Plugins in Browser Without Module Bundler?

15-Vue_js_vue_slim_tabs_How_to_use.png

嗨~呦~~ 這裡是煩惱要不要用Vue.js插件的布丁。

說到網頁前端MVVM框架Vue.js,大部分時候都是以搭配後端編譯工具 (像是Webpack之類) 為前提來安裝、配置。不過實際上,很多時候Vue.js、單檔案組件(single file component)、以及它們的插件可以不需透過編譯,直接在網頁瀏覽器上執行。

這邊我以「vue-slim-tabs」為例子,它文件中的說明必須要靠編譯器才能運作。我分析vue-slim-tabs插件的原始碼,重新撰寫了使用該插件的index.html跟引用的單檔案組件vue-slim-tabs.vue。你可以點此看到實際運作的網頁。以下我來說明改寫的過程,希望對Vue.js的使用者有所幫助。

(more...)

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

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

14-Node_js_CORS_AdonisJs_Practice_of.png

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

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

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

(more...)