Mirochiu's coding note

要解決System has not been booted with systemd as init system (PID 1)的問題，可以參考 https://github.com/microsoft/vscode-remote-release/issues/3919

在一些純前端的環境中，如Github page和Apps Script，和我們依然會想用URL中parameter方式來完成一些事情，這時候就會需要URLSearchParams的幫忙！

若要在VSCode中，使用已存在docker image作為Dev Container使用標的，這部份在官方的說明文件有提到，詳細說明可以參考 這裡 。

像是LINE登入時會使用get來轉移到我們的網站中，若是我們後端沒有處理好，這時候就只能用前端的javascript程式來處理。

 想要在VSCode使用podman作為Remote development預設container，需要視你的開發環境而定。 如果你是使用Attach container development或是Connect ssh development，你需要跟隨 上一篇 的設定方式。

關於LINE flex message 官方介紹 會叫做flex message是因為其排版方式與網頁CSS的flex模式，主要是在手機/平板上呈現。在電腦版呈現時只會顯示  "本訊息無法顯示。 請至手機版LINE中查看。"

想要VSCode使用podman作為預設container，我們可以設定編輯器全域的設定，或是目錄/工作目錄的設定兩種。

  不需要寫程式的LINE圖文選單 進入LINE official account manage頁面 https://manager.line.biz/account 左側的聊天室相關→圖文選單 選一選設定之後，必須要上傳底圖，就可以用下方的處理。 LINE官方Rich Menu圖片編輯器(泰文) https://lineforbusiness.com/richmenumaker/ 雖然是泰文不過應該是看得懂操作啦! 先選版型 點版型位置，可上傳圖檔，選背景色，放文字改顏色等 設計好之後按右下角的下一步，會顯示後續說明。 最重要就是將左下方的勾選起來，按下右下方的泰文按鈕來匯出成圖檔。 把圖片上傳到進入LINE official account manage頁面就完成囉! 其他資料 - 需要寫程式的圖文選單 官方說明以REST API上傳圖檔建立選單 https://developers.line.biz/en/docs/messaging-api/using-rich-menus/ 透過 Rich Menu Switch Action 快速地切換 LINE 的個人化的 Rich Menu https://engineering.linecorp.com/zh-hant/blog/rich-menu-alias-switch-action/ 如何個性化在 LINE 中顯示 Rich Menu 以匹配用戶的語系 https://engineering.linecorp.com/zh-hant/blog/adapt-richmenu-by-language/

在Apps Script中比較困擾的就是如果執行正常的狀況下，Logger.log和console.log都不會顯示出來，所以就會用Sheet來當做Logger。 最精簡的方式就是寫下面這樣的一個doLog函數。

  /* 解析度767px以上時套用比較寬的邊緣和字體 */ @media ( min-width : 767px ) { a { font-size : 1.25rem ; line-height : 3rem ; padding-left : 2rem ; padding-right : 2rem ; } }

這裡分享使用jQuery unblock UI搭建簡易訊息視窗。 1. 排版設定了id為err_box與id為msg_box這兩個div，用來讓unblock顯示訊息用的。 2. 引用unblock ui跟jquery 3. ublk是隱藏顯示的block ui；blk是開啟一個預設顯示'loading'的block ui。 4. err_msg和msg_box就是方便函數，給定訊息就會顯示錯誤視窗或是訊息視窗 < div id = "err_box" style = " display:none;cursor:default;background-color:red " > < h1 class = "m" ></ h1 > < button class = "y" > 確認 </ button > </ div > < div id = "msg_box" style = " display:none;cursor:default " > < h1 class = "m" ></ h1 > < button class = "y" > 確認 </ button > </ div > <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js'></script> <script> function ublk () {

  ul { list-style : none ; /* 移除項目符號 */ margin : 0 ; /* 移除ul標籤預設 */ padding : 0 ; /* 移除ul標籤預設 */ }

最近需要加入核取方塊，沒想到網頁版跟是不同位置，看官方有文件特別說明 Google試算表網頁是在上方選單列可找到 插入→核取方塊 Google試算表的APP中是隱藏在右上角的更多選項 APP右上角按鈕→驗證資料→條件欄位選擇"核取方塊"

在Apps Script中發送Line Notify訊息，你需要先進入 Line Notify的網站 取得群組的TOKEN，再填如下圖程式碼的指定位置。

  標題列就是用vertical-align: middle來垂直置中, 以CSS來指定

  寫法1.把js處理函數名稱寫在html中 缺點, 如果你的框架是template view分離就會很難控制 < form onsubmit = " submitHandler ( event ); " > < label for = "normal_text" > 一般文字欄位 </ label > < input id = " normal_text " type = "text" name = "my-text" value = "12345" /> < button type = "submit" > 傳送 </ button > </ form > < script > function submitHandler ( e ){ console . log ( '收到的事件' , e ); e . preventDefault (); //避免HTML的預設傳送行為發生 console . log ( '傳送表單的處理往下寫' ); } </ script > 寫法2.給定id 缺點 id 需要寫死,處理函數無法直接套用在不同的html網頁中(你如果id都寫一樣當然沒問題) < form id = "my-form" > < label for = "normal_text" > 一般文字欄位 </ label > < input id = "normal_text" type = "text" name = "my-text" value = "12345" /> < button type = "submit" > 傳送 </ button > </ for

如果要解決Datatable不會隨著視窗寬度改變的問題，在官方說明文件有提供作法 https://datatables.net/reference/api/columns.adjust() 但是呢，不知道為什麼我的就是不會生效，所以，這篇的重點在於....

之前寫的 把Google sheet變成JSON Api伺服器2(進階) 可以很容易的和Datatable一起使用。 這方面也是因為Datatable本身優秀的功能，所以可直接將Api伺服器的url丟給套件，幫我們執行存取的功能。如果要重新讀取Api伺服器，Datatable也有提供呼叫的方法可以處理。

最近遇到需求想要在網頁上加入按一下複製內容到剪貼簿的功能，中間還不小心遇到小雷點分享一下。 我建構一個簡單的文字input放置要給使用者拷貝的資料，以及一個按鈕讓使用者點選複製到剪貼簿

DataTables.net的Datatable是一個很方便的表格套件，支援自動分頁,搜尋,排序,移動,多國語言等功能，還支援伺服器端整合。已經滿足我們一般使用的絕大部分需求。當然DataTables.net也是有編輯器功能，但是這就是收費的範疇了。 下面就簡單入門一下Datatable