電子發票系統安裝

前言

支援電子發票,營業人必須使用 Turnkey Client 連線工具 來執行發票開立、發票作廢、發票註銷、折讓開立、折讓作廢等(傳送/接收發票資料檔案)。

本篇為 Turnkey Client on Ubuntu 的安裝筆記。

繼續閱讀

2017 歲末年終工具大掃除

很快地又到了年末大掃除了時候,今年增加的工具軟體並不多反而捨去了不少工具。剩下的這些便是展望 2017 年與 2016 整年度下來持續使用的工具。

繼續閱讀

Facebook Bot 開發小技巧

流程

  • 準備環境
  • 使用 ngrok 取得 https 網址
  • 建立與設定 Facebook App 與粉絲團
  • 建立 webhook GET API
  • 設定 Facebook App webhook
  • 實作 webhook POST API 產生對話
繼續閱讀

Chrome Dev tool 筆記

Element Panel

  • ⌥⌘I 開啟 Dev Tool

選取元素的方式

  • 對元素點右鍵 -> Inspect
  • 開啟 Dev Tool -> 點擊 Dev Panel 左上角 bar 的箭頭 ICON -> 選取元素
  • ⌘⇧C -> 選取

編輯樣式

  • 選定一個 Element 之後右邊 panel 會顯示該 Element 之樣式
  • 開關樣式
  • 新增或刪除樣式
  • 右上角 -> Change state(hover, active, focus, visited)
  • Computed -> 觀察 box model
  • 點擊連結切換到 Source
  • Shift + 點擊 CSS rule 的顏色會轉換 e.g. hex to rgb
  • 編輯樣式時,選取某個字串 ->Command+D會把一樣的都選起來

Source Panel

  • 進入 Source panel ⌘S 可以暫時編輯檔案並存到瀏覽器的 Storage
  • 右鍵 -> Local Modifications 可以檢視歷史紀錄

Console

1
2
3
4
5
6
7
8
9
10
11
12
13
console.log();
console.assert(false, 'Information'); // 錯了就噴第二個參數
console.count('go'); // go: 1
console.count('go'); // go: 2
console.log("document body: %O", document.body);

console.group("Authenticating user '%s'", user);
console.log("User authenticated");
console.groupEnd();

console.log('%c Hello', 'color: orange;'); // %c 使用 css
console.log("%O ", document.body); // %O Javascript Object
console.log("%O ", document.body); // %o DOM

詳細 Console API

  • 學會查看 Error,切換到 Source
  • 在 Source panel 下 ESC 開啟第二層 Console
1
2
3
4
5
6
$('selector') // 稱為 blind
// 如果載入 jQuery 預設的 blind 會被覆寫
// 回傳的是一個陣列
inspect($('#title')) // 選取元素並切換到 Element Panel
$0 // 當前選取的 Element
$1 // 上一個
  • Source panel 右上角的 Pause on 按鈕打開的話,下次噴錯就會暫停
  • Source panel 左下角的 {} 按鈕可以把 minifed 檔案轉換成較易讀的格式

Local Storage

  • 切換到 Resource panel

Network panel

  • Refresh 之後會記錄每個 Request
  • + Refresh 鍵強制全部重載
  • Size = Transfer size
  • Content = Actual size
  • 最底下的 Bar 有總和
  • Waterfall 裡面淺色的部分代表發出 request回應即開始傳輸資料的時間
  • 實心的部分代表開始下載資料
  • 顏色的意義
    • HTML 藍色
    • JS 橘色
    • CSS 綠色
    • 圖片 紫色
    • 右邊垂直的藍色線代表 DOM loaded 意為瀏覽器解析完畢 HTML to DOM
    • 右邊垂直紅色線則表示圖片等資源下載完畢
  • CSS 放在 JS 之前

Timeline

  • 顏色的意義
    • Loading 藍色
    • 執行 Script 黃色
    • Rendering 紫色
    • Painting 綠色
  • Size vs Content

第一次用 jspm 就上手

何謂 jspm ?

jspm (javascript package manager) 號稱是完全支援(無摩擦)瀏覽器載入的套件管理工具

繼續閱讀

Webpack 筆記

動機

今時今日所謂的網站正進化成網路應用程式,它不再只是單純的顯示圖片文字資訊,而包含著更多互動與操作行為,同時也意味著一個網站:

  • 具有更多的 Javascript
  • 可以在現代的瀏覽器上做更多事
  • 較少全頁重新載入的行為 ➞ 甚至更多程式碼在單一頁面
繼續閱讀

Gulp 使用問題與記錄

這篇文章除了記錄一下最後只是堪用的解法,如果有高手知道更好的做法煩請賜教。

話說小弟今天要來寫一些 React 的測試專案,就想說那就搭上 Gulp 吧!原本的目的很單純就只是用 Gulp compile 一些常用的 meta language,像是 Less, Jade 外加上 Jsx。也不是什麼很大的專案所以架構上其實就是在 React 的 StartKit上面再開個自己的測試目錄。

繼續閱讀

使用 Gulp 為前端開發伺服器

因為 Gulp 這個任務執行工具最近越來越流行,所以想說試著用它來做些事情,其實它跟 Grunt 一樣可以拿來處理很多事情像是整合 Javascript 檔案,壓縮圖片等等。如果你之前從來沒聽過 Gulp 這裡建議您先閱讀 英文教學, Gulp 初體驗
在這篇文章中,我們將學習使用 Gulp 來完成一個簡單的小型伺服器以協助您平日的前端開發,當然這也支援 livereload

繼續閱讀