Auto-format Svelte in VS Code

Svelte is an amazing front-end framework, which gives much better developer experience over other frameworks like Vue or React. To enjoy the super handy auto-format on save feature in VS Code, a little setup is needed at time of writing, here is how:

  1. install Svelte extension in VS Code
  2. in VS Code settings, add:
"editor.formatOnSave": true,
"[svelte]": {"editor.defaultFormatter": "svelte.svelte-vscode"}

The first line let VS Code triggers auto-format on save, and the second line tells VS Code to use the Svelte extension as the default formatter for svelte files. Reload VS Code, you should be able to auto-format .svelte files on save from now on.

Note that Svelte extension internally uses prettier-plugin-svelt for auto formatting. It has no relationship with the Prettier extension in VS Code. That means, it dis-regards the Prettier extension settings in VS Code.

So what if you want to tweak the Prettier settings, such as using single quote, removing semi colon at line end â€¦ etc? You have to add a .prettierrc file in your project root in order to configure the Prettier plugin behavoir, a sample config file as follow:

{
  "semi": false,
  "singleQuote": true,
  "arrowParens": "avoid",
  "printWidth": 120
}

Save the config and reload VS Code, custom auto-formatting on saving .svelte files is done 🎉

P.S. some old tutorials suggest installing prettier-plugin-svelt with npm in your project. You don’t have to do it now as its already included in the Svelte extension.

8

打造你專屬的倉頡輸入法

我是倉頡輸入法的使用者,在 windows 10 之前,微軟倉頡輸入法是可以選擇只顯示 big5 字元的。但 windows 10 之後這選項便不復存在。

我想只顯示 big5 是因為 unicode 有非常多的的罕用字,這導致嚴重的重碼問題,而那些罕用字在大部分情況下根本用不著,它們只會降低我的輸入速度和爽快感。

我嘗試在各論壇詢問是否可設定只顯示 big5 字元,截至 windows 10 version 2004,還是沒有辦法設定的。而最接近的答案,是重新安裝舊版的 「微軟新倉頡 」輸入法,詳情可看這篇:

https://irregular.enzan.org/post/3292

但他有一個bug,就是聯想字的部分顯示不出來,加上大五碼本身亦有重碼的問題,例如你打 「夢 」字他會有 「夢甍藅蘮 」四個輸出。而且它是使用 IMM 架構的舊版輸入法,每次更新 windows 便要重裝一次…

既然要安裝另一個輸入法,我在想,有沒有其他的倉頡輸入法可以完全客製化,把那些罕用字刪除,成為我心目中理想的倉頡輸入法呢?

然後我找到一篇關於 dime 輸入法的文章:

https://terryhung.pixnet.net/blog/post/35608897

dime 相當接近我要的東西,其可取之處在於:

  1. 它是基於新的 TSF 輸入法架構,這樣使輸入法的安裝和移除更加方便,未來的支援更有保障,而且不用每次更新 windows 便要重裝。
  2. 它可以自行修改內碼表,這樣我便可以移除一些根本用不到的罕有字,令重碼問題大幅降低。

內碼表應如何製作呢?我先把已做好的內碼表放在這裏給大家參考,是純文字,內容亦相當容易理解:

https://hoishing.github.io/forum/dime_cangjie.txt

我對內碼表有以下的要求:

  1. 不要包含太多罕有字。
  2. 重碼字常用的應在前,例如輸入「人大口」,「知」應在「佑」之前。

對於問題一,我的解決方法是使用中華民國教育部編訂的「常用國字標準字體表」和「次常用國字標準字體表」,其他的字暫時不包括在內,這樣整個字庫加起來只有11000多字。

要解決第二個問題,字庫可依教育部的字頻表排序

http://language.moe.gov.tw/001/Upload/files/SITE_CONTENT/M0001/86NEWS/download/86rest17.TXT

至於每個字對應的倉頡碼,可到政府資料開放平台下載全字庫

https://data.gov.tw/dataset/5961

就這樣,我用 python 把上述的原材料整理一番後,便得出上面的代碼表。然後把它載入 dime 的「自建」輸入法內,一個完全客製化的倉頡便大功告成!

最後對於 dime 的使用,有以下幾點註腳:

  1. windows 的 language settings 內並沒有輸入法的設定。先打開 notepad,然後按 ctrl \ 才可進入設定,這是 dime 最需要改善的地方。進入後,記得把 「組字區最大長度」設為 5,因倉頡最長可有五碼。
  2. 如果安裝後發現沒有聯想字,可先安裝內置的「微軟注音」輸入法,打開「相容性:使用舊版的微軟注音」,然後把 user folder 內的 appdata\roaming\dime 刪除,再重裝 dime 即可。
  3. 安裝 dime 後,它會一拼安裝注音、大易等輸入法,而你要用的只是自建輸入法。要移除不需要的輸入法,你先要在 language setting 中把所有的 dime 輸入法加上去,re-login 後再從 language settings 中移除。

8

Using Chinese Characters in Matplotlib

When you try to display Chinese or other non-ascii characters in matplotlib, your characters may not be displayed properly, like following figure:

Error displaying Chinese characters in matplotlib

It is because the fonts used by matplotlib couldn’t decode the characters properly. To solve it, we should add the appropriate fonts and update matplotlib font cache.

  1. locate the matplotlib fonts folder:
import matplotlib
print(matplotlib.matplotlib_fname())

this is the location of matplotlib config file, you will get something like â€¦/matplotlib/mpl-data/matplotlibrc

The font folder is â€¦/matplotlib/mpl-data/fonts/ttf , put your ttf file there.

2. Get ttf from ttc file (skip if you have ttf file already)

For macOS, the system Chinese fonts is Heiti, which is embed in a ttc file (ttc is a collection of multiple ttf files). Get the system ttc file in /System/Library/Fonts/STHeiti Medium.ttc Copy this file out and convert it to ttf. Here is an online ttc converter:

https://transfonter.org/ttc-unpack

3. Rebuild the Matplotlib Cache

import matplotlib.font_manager
matplotlib.font_manager._rebuild()

restart your Jupyter / ipython kernel, then test if matplotlib can load your font or not by the ttflist function of the font manager

[f for f in matplotlib.font_manager.fontManager.ttflist if 'Heiti' in f.name]

change ‘Heiti’ to your own font name. If you see your fonts object above. You are ready to use the new fonts.

4. Using Appropriate Fonts in Matplotlib

matplotlib.rcParams['font.family'] = ['Heiti TC']

This will tell matplotlib to use the specific font as default, result as follow~

68

null vs undefined (JS)

You may wonder whats the difference between null and undefined in javascript. Some even said they’re interchangeable. Is it true? Let’s see..

null == undefined 
1 + null 
function add(a = 1, b) {
console.log(a + b)
}
add(null, 2) 
1 + null 
function add(a = 1, b) {
console.log(a + b)
}
add(null, 2) 

though both will be treated as false during boolean evaluation, null will be evaluated as 0 in arithmetic operation. This subtle difference may cause unexpected bugs, watch out~

6

Create Native App for Jupyter in macOS

Do you feel clumsy when using Jupyter Lab / Notebook with lots of opening websites? Do you want to get rid of the tab bar / address bar / bookmarks and focus on your notebook?

Entering full screen is an option, but it has draw backs say you can’t put multiple pages for reference on the same screen, and switching between apps is cumbersome… etc

Isn’t it great to have your Jupyter running as a native app?

Go download Fluid App, it can turn any URL into native macOS app.

Enter the URL, app name, provide an app icon, and you are done!

Jupyter as Native App: Tabs / address bar / bookmarks are gone

Now you can place your Jupyter app on the dock, or alt-tab to switch between other apps.

Note that its better to launch Jupyter with--no-browser option in terminal, then set a password for the Jupyter server. Then you just need to put your password next time when launching the native Jupyter app.

P.S.

Don’t have the app icon? I’ve prepared one for you below 🙂

8