:::

課堂學習的最佳Chromebook:ASUS Chromebook Detachable CZ1 / The Best Learning partner: ASUS Chromebook Detachable CZ1

布丁布丁吃布丁

課堂學習的最佳Chromebook:ASUS Chromebook Detachable CZ1 / The Best Learning partner: ASUS Chromebook Detachable CZ1

4-cover-Chromebook_ASUS_Chromebook_Detachable.png

哈囉,大家最近在吃什麼呢?這裡是感嘆Chromebook發展日新月異的布丁。

上一次我介紹了適合開發者的ASUS Chromebook Flip CX 5,這次我們來看看ASUS在Chromebook主力戰場的教學環境中推出最新的機型:ASUS Chromebook Detachable CZ1 (CZ1000)吧。ASUS Chromebook Detachable CZ1 (CZ1000)本身是一台運作Chrome作業系統的平板。整體大概1公斤與10.1吋觸控螢幕的ASUS Chromebook Detachable CZ1 (CZ1000),特別適合帶出門或拿在手上使用。ASUS Chromebook Detachable CZ1 (CZ1000)搭配了具有橫向立架的保護套、可拆卸的超薄鍵盤,使它也可以作爲筆電使用。更棒的是,ASUS Chromebook Detachable CZ1 (CZ1000)的平板具有可收納USI觸控筆的空間,收納USI觸控筆後也會自動充電,再也不用擔心USI觸控筆被我擺到弄丟了呢。

如果你也對輕薄小巧又有多種實用功能的ASUS Chromebook Detachable CZ1 (CZ1000)感興趣的話,就讓我們繼續看下去吧!

(more...)

釋放Notepad++黑暗力量:開啓黑暗模式 / How to Enable Dark Mode in Notepad++ 8

釋放Notepad++黑暗力量:開啓黑暗模式 / How to Enable Dark Mode in Notepad++ 8

5-cover-Notepad_How_to_enable_the_Dark_Mode.png

哈囉,大家最近在吃什麼呢?這裡是努力讓藍牙耳機配對到Linux電腦上的布丁。

程式開發者爲了閱讀以文字爲主的大量程式碼,通常偏好將程式編輯器改成偏暗的黑暗模式,可以讓閱讀程式的時候舒服許多。知名的Windows專用軟體Notepad++是程式開發者不可或缺的編輯器。早期Notepad++必須設定主題來啓用黑暗模式。在2021年發佈的8.0版本,Notepad++直接加入了黑暗模式(Dark Mode),設定起來更加直覺了。

接下來就讓我們來看看,怎麼在Notepad++裡面開啓黑暗模式吧。

(more...)

如何改善GNOME 3用Alt+Tab切換視窗的功能? / Tips to improve the Alt-Tab behavior in GNOME 3

布丁布丁吃布丁

如何改善GNOME 3用Alt+Tab切換視窗的功能? / Tips to improve the Alt-Tab behavior in GNOME 3

3-cover-GNOME_3_Alt_Tab_Tips_to_improve.png

哈囉,大家最近在吃什麼呢?這裡是鬼月時期碰到許多強得跟鬼一樣的人的布丁。

如果要提高桌面環境多視窗的工作效率,那麼快捷鍵「Alt+Tab」一定是每個人都必須學起來的基本功夫。「Alt+Tab」的主要功能是快速切換不同視窗,但這個功能在每個作業系統中運作的方式都不太一樣。在內建了多個虛擬桌面(workplace),並搭配多顯示螢幕的Linux GNOME 3桌面環境中,「Alt+Tab」預設顯示所有應用程式(applications)的運作方式就不太方便操作了。

這篇將介紹如何在Linux GNOME 3中改善「Alt+Tab」切換視窗的功能,包括了在應用程式之間的切換改爲在視窗(windows)之間的切換,以及讓「Alt+Tab」的切換循環只限定在滑鼠目前的顯示畫面。如果你也想成爲GNOME 3工作效率大師的話,就繼續看下去吧!

(more...)

Linux的多媒體影片格式轉檔工具:HandBrake / HandBrake: A Video Transcoder in Linux

布丁布丁吃布丁

Linux的多媒體影片格式轉檔工具:HandBrake / HandBrake: A Video Transcoder in Linux

2-cover-Linux_HandBrake_HandBrake_A_Video.png

晚安,大家最近在吃什麼呢?這裡是煩惱工作環境遲遲無法好好配置完成的布丁。

在Windows作業系統裡轉換影片時,很多人常用的是格式工廠(Format Factory)。而對Linux作業系統的使用者來說,HandBrake則是轉換影片格式的第一首選。使用HandBrake轉換影片時,我們不需煩惱要轉換的影片格式參數,而是可以直接使用它提供了多種使用情境的預先配置檔案。例如我想要在Android或iPhone上播放,或是我想要把它作爲Gmail附件,請它在影片長度和檔案大小間取得平衡,HandBrake都可以幫你直接處理。不僅如此,HandBrake也是Linux、Windows和MacOS的跨平臺工具。接下來就讓我們來認識認識HandBrake這個強大又好用的多媒體影片格式轉檔工具吧。

(more...)

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

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

image-template-20210726-1542.png

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

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

(more...)

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

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

31-PAW_Frame_Mockup_Add_browser_phone.png

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

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

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

(more...)

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

布丁布丁吃布丁

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

3-AppImage_WPS_How_to_use_files_in-06021022.png

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

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

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

(more...)

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

布丁布丁吃布丁

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

27-Page_Margin_Setting_causes_Headers.jpg

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

(more...)

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

布丁布丁吃布丁

28 Comments

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

24-7_Zip_ZIP_Using_7_Zip_to_decompress.jpg

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

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

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

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

(more...)

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

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

23-2020_ENG.png

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

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

(more...)

如何從句子中的單字搜尋詞典中符合的詞彙? / 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...)