在Chromebook配置適合開發者的Linux桌面環境吧！ASUS Chromebook Flip CX5華麗上陣 / Installing a Linux Desktop Environment on ASUS Chromebook Flip CX5

近年來各家Chromebook大廠嗅到了商務市場與居家遠端辦公的商機，紛紛推出了尺寸較大、規格更高級的Chromebook。高階的Chromebook不僅能夠讓原本Chrome作業系統的效能更好，讓使用者能夠同時安裝與開啓更多的Android應用程式之外，還能夠透過crouton，配置適合開發者的Linux桌面環境。在Linux作業系統已經成為全球開發者首選平臺的今日，Linux桌面環境可能會成為吸引開發者使用Chromebook的另一個特色。

哈囉，大家最近吃了什麼呢？我是一邊擺出「= U =」的笑臉、一邊開心地吃著Chromebook的布丁。今天就讓我來看看ASUS近期推出的高階Chromebook：ASUS Chromebook Flip CX5 (CX5500)，到底如何要怎麼在Google Chrome瀏覽器爲主的Chrome作業系統中，配置適合開發者的Linux桌面環境吧。

幫操作畫面加個邊框吧！響應式加框網頁工具 / Add a frame on screenshot: Responsive Frame Mockup

呀呵，大家最近在吃什麼呢？這裡是寫論文也要加個框的布丁。

作為軟體開發者，用螢幕截圖的操作畫面來說明軟體功能，是一件相當常見的工作。如果要讓讀者知道你的操作畫面是在什麼裝置上運作的話，為操作畫面加個對應裝置的邊框，絕對可以幫你的文件大大加分。

為了幫博士論文中的系統操作畫面加上瀏覽器的邊框，我開發了Responsive Frame Mockup網頁工具。它可以為任意尺寸和比例的圖片，加上瀏覽器、智慧型手機、以及平板的框架。以下就讓我們來認識Responsive Frame Mockup這個好用的網頁工具吧！

如何開啓AppImage裡面的指定應用程式？以WPS為例 / How to open a specific application in an AppImage? Using WPS Office as an example

哈囉，大家最近在吃什麼呢？這裡是越用越喜歡Linux的布丁。

你知道Linux的免安裝應用程式AppImage嗎？AppImage主打「一個檔案=一個應用程式」的特色，只要下載並開啓權限後，就能直接執行應用程式。但直接執行AppImage時只能執行創造者預設好的指定指令。如果我們想要執行AppImage中的其他應用程式或檔案的話，可以先把它掛載到/tmp暫存資料夾，然後就可以直接使用AppImage中其他的應用程式了。

本篇使用的例子是WPS Office的AppImage。原本WPS Office的AppImage只允許我們使用WPS文件編輯器(WPS Writer)。如果我們要將副檔名為「dps」的WPS投影片檔案格式(WPS Presentation)，用WPS Office的WPP投影片編輯器開啟的話，那就得要用這個方法囉。讓我們來看看要怎麼做吧。

為什麼列印網頁時頁首與頁尾消失了？ /  Page Margin Setting causes Headers and Footers to Disappear when Printing

嗨，大家最近在吃什麼呢？這裡是為臺灣祈福的布丁，最近我苦於處理Blog網頁列印版本的各種問題。其中一個令我困擾已久的難題，就是列印版的頁首和頁尾消失了。研究後才發現，這是因為我在CSS語法中設定了頁面邊界「@page {margin: 0.5cm}」，導致Google Chrome瀏覽器在列印版本中隱藏了頁首與頁尾。接下來我們就一起來看看網頁列印版本的頁首和頁尾，以及造成它們消失的CSS設定細節吧。

用7-Zip解壓縮含有亂碼檔名的ZIP檔案 / Using 7-Zip to decompress ZIP with given encoding

啊囉哈～這裡是不管天氣冷熱都要跟蚊子生死鬥的布丁。今天要來跟大家聊聊壓縮檔的檔名問題。

華人世界比較常用的壓縮檔格式為RAR，不過我個人則是推崇泛用的傳統壓縮檔格式ZIP以及壓縮率更好的7-Zip。在正式典藏資料的網站中，ZIP也是許多網站的首選。不過，有時候在為ZIP壓縮檔解壓縮時， 不是發現裡面沒有檔案，就是檔名變成亂碼或底線。 為什麼會變成這樣呢？

調查之後才發現，ZIP壓縮檔的檔名出現亂碼時，通常是因為我們現在在用的作業系統跟壓縮者當下的作業系統並不相同的緣故。因此當我使用大五碼的作業系統處理來自日文編碼的ZIP壓縮檔時，解壓縮後的檔案名稱就或變成亂碼。

那如果我想要解壓縮來自日文編碼的ZIP壓縮檔，又想要維持檔名不要變成亂碼的話，該怎麼做好呢？這篇我會說明如何使用7-Zip的參數「cp」來設定解壓縮時使用的編碼。這樣就能正確將檔案解壓縮、並且避免亂碼出現囉。接下來就讓我們來看看要怎麼做吧。

2020年臺灣工程師喜愛的程式語言與資料庫竟然跟全球流行不一樣 / The Popular Script Language and Database Technology in Taiwan in 2020

Pui Pui大家午安啊，我是在寒冷又溼漉漉的地方裡，期望下雨降在集水區的布丁。在這個寒冷的天氣裡，今天就跟大家聊聊臺灣工程師最受歡迎的程式語言跟資料庫技術吧！

全世界工程師最後的救星Stack Overflow在2020年二月發佈了2020年開發者調查結果。統計5萬多位工程師最喜歡的程式語言中，JavaScript以67.7%名列第一。年初時Easy Website的站長網站哥以這份開發者調查資料為基礎，將臺灣開發者所流行的程式語言與資料庫繪製成統計圖表，結果竟然跟世界潮流不太一樣。至於差異在哪裡，就讓我們看下去吧。

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

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

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

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

​如何在前端瀏覽器用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緩存，最後可以正常執行的情況。

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

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

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

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>」更新全域目錄的套件、移除專案內的套件連結、最後再重新連結套件。

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

嗨~呦~~ 這裡是煩惱要不要用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的使用者有所幫助。

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聊天室的功能、系統架構與技術，最後講講開發時遭遇的問題與想法。希望能夠為其他開發者提供一些解決問題的線索。