• Source-to-source compiler

• List of languages that compile to JS

• Languages that compile to Python

• Languages that compile to Lua

DNS

參考

• 台灣各大ISP慣用DNS 伺服器
• 常见公共 DNS 域名解析服务器
• 公共域名解析服務 - 維基百科

查 IP 資訊

縮網址, 短網址

轉碼, 加密, 解密

字典

JSON

時間

Online Notes Sharing

網路硬碟 (网盘)

Online Compiler

硬體資訊

CPU

GPU / 顯卡

網站狀態 GFW / Website Down or Not?

掃毒

軟體

See #9

其他

• Comparison of webmail providers - Wikipedia

格式

Icon Fonts

Noto

參考

• 2018年的@font-face | Genuifx
• bsdfzzzy/iconfont-all-in-one: 一次性搞定 IconFont，从背景、原理到自己开发一套 icon font。—— Awesome IconFont Tutorial
• 分類:開源字型 - 維基百科
• 正確實現簡轉繁字型

Sublime 的 Package(套件), 大致上相當於 Notepad++ 的 Plugin, Visual Studio Code 的 Extension 或 Firefox 的 Addon, 是用來為本體程式外掛新功能的。所有 Sublime 套件的使用者定義檔 ( *.sublime-settings )，都會放在 %APPDATA%\Sublime Text 3\Packages\User 目錄.

以下介紹幾個 Sublime 的套件。

• Package Control：第一個套件請安裝 Package Control, 這是套件管理員(package manager)，相當於 Notepad++ 的 Plugin Manager。 連到 Package Control 官網後，依頁面指示開啟 Sublime 的 Console ( ctrl+` ), 在裡面貼上Package Control 官網提供的安裝程式碼，按下 [Enter] 即可安裝完成。

• ConvertToUTF8：Sublime 預設不支援 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 編碼，所以需要安裝 ConvertToUTF8 來解決這個問題。如果已安裝了 Package Control, 可以用 Package Control 來安裝這外掛( package control >> install package >> ConvertToUTF8 ). 以下外掛的安裝方法亦同此理。

• Emmet：Zen Coding 的後繼者。打縮寫語法，再摁下 [TAB] 鍵，自動補全為完整標準語法。見 Emmet 文件: 常用縮寫語法。

• Sublime​Tmpl：新增文件或按下熱鍵時，自動輸入預先寫好的模板/範本。

• 自動完成(auto-complete)

  • SublimeCodeIntel
  • Sublime Better Completion
  • 在 JavaScript 的支援上，SublimeCodeIntel 內建沒有 getElementsByClassName, Sublime Better Completion 則有。但同時安裝會相衝突。需要同時安裝的話，可以針對語言停用其中一個套件的自動完成，例如：SublimeCodeIntel 設定值"codeintel_live_disabled_languages": ["JavaScript"]，Sublime Better Completion設定值"javascript": true。
  • CSS3
  • Autoprefixer: Sublime plugin to prefix your CSS or SCSS

• AutoFileName：自動完成 (路徑和)檔名。見https://www.youtube.com/watch?v=t8uFiYo2k4A

• Pretty JSON：JSON 格式化( CTRL + ALT + J )、壓縮( Ctrl+Alt+M )。

• SublimeLinter：interactive code linting( validation )。只裝這套件是沒有作用的，要按照想檢測的程式碼安裝相對應的套件。

  • 以開發 React.js 為例：
    • 裝下面的packages前, 須先安裝 ESLint, babel-eslint, eslint-plugin-react. ( Linux 下 npm 安裝命令： sudo npm install -g eslint babel-eslint eslint-plugin-react )
    • SublimeLinter-contrib-eslint: A linter plugin for SublimeLinter provides an interface to ESLint.
    • babel-sublime: React and ES6 Syntax Highlighting in Sublime Text. ( Sublime 裡的安裝法：Find it as Babel through Package Control.)
    • Babel Snippets
  • 以開發 PHP 為例： 需安裝 PHP 和 SublimeLinter-php, 並把後者的 paths 設定值指向 PHP. (例: D:\\xampp\\php )

• BracketHighlighter：Bracket and tag highlighter for Sublime Text

• All Autocomplete：Extend Sublime autocompletion to find matches in all open files of the current window.

• SideBarEnhancements

• Color Highlighter

• TrailingSpaces: Highlight trailing spaces and delete them in a flash.

• Markdown Preview

• AutoHotkey

• ChineseLoremIpsum

• FakeImg Placeholder Snippet

• iconfont snippets

參考

• Sublime Text 3 新手上路：必要的安裝、設定與基本使用教學 | The Will Will Web
• Sublime Text 3前端开发常用优秀插件介绍 - 黄映焜 - 博客园
• jikeytang/sublime-text

IE

SCRIPT5009: 'console' is undefined (console未被定義)

• 【笨問題】IE9的「console未被定義」錯誤 - 黑暗執行緒 : IE8/IE9要先按F12開啟IE Dev Tools才能存取console物件啦!
• What happened to console.log in IE8? - Stack Overflow

No .innerHTML support on Table, THead, TBody, TFoot, Tr's in IE

• Web Bug Track: bug 210
• javascript - Error on IE 9 - 'SCRIPT600: Invalid target element for this operation - Stack Overflow
• https://stackoverflow.com/questions/4729644/cant-set-innerhtml-on-tbody-in-ie
• IE table thead tbody tfoot tr 的 innerHTML 是唯讀 @ Vexed's Blog
• jQuery.html() 有特別為 <table> 、 <thead> 、 <tfoot> 、 <tbody> 、 <tr> 做處理。

X-UA-Compatible

當父網頁為 IE11、IE10、IE9 模式，透過IFrame內嵌網頁會沿用父網頁的文件模式，透過X-UA-Compatible亦無法改變。
當父網頁為 IE8、IE7、IE5 模式，IFrame 內嵌的網頁可透過 X-UA-Compatible 切換與父網頁不同的 IE 模式，但 Edge、IE10、IE9 會降為 IE8。

• IE 內嵌 IFrame 之 IE 相容模式組合問題 - 黑暗執行緒

The catch to Try Catch Finally in IE

In IE5~7, if you don't supply a catch statement, your finally statement will never be called!

• Web Bug Track: bug 184

相對路徑

. 代表目前所在的目錄，..代表父目錄 ，/代表根目錄

參見

• Path (computing) - Wikipedia
• Relative paths in Autohotkey

本文使用 XAMPP 7.2.6 安裝，下文提到的 MySQL 資料庫，皆指 MariaDB.

下載與安裝

1. 下載 XAMPP https://www.apachefriends.org/
   
2. 執行 xampp 的安裝檔，依預設值安裝，一路 OK 或 NEXT. 唯有安裝路徑，如因C槽太小，可改至其他槽。
   
3. 如 XAMPP, Apache, MySQL 要求通過防火牆，請允許。

啟動XAMPP Control Panel

1. 安裝完XAMPP, 會自動啟動 XAMPP Control Panel, 如果沒有，請手動啟動 C:\xampp\xampp-control.exe
   
2. XAMPP Control Panel 正確啟動如上圖，若出現紅字，表示有錯誤，我們需要解決它。例如，下圖的紅字訊息顯示：Skype.exe占用了80和443port。Apache需要80和443port。MySQL需要3306port。請不要讓其他程式占用這些port。
   

設定與啟動 Apache

1. XAMPP Control Panel 正確啟動後，我們接著設定Apache。
2. 在 XAMPP Control Panel 上，按下Apache對應的Config按鈕，選擇 httpd.conf ( 或者用你喜歡的文字編輯器修改C:\xampp\apache\conf\httpd.conf )，加入字串ServerName <IP or DNS name>:80，如下圖。(請自行取得網域或固定IP)
   
3. 在 XAMPP Control Panel 上，按下Apache對應的Start按鈕，啟動Apache。
4. 在 XAMPP Control Panel 上，按下Apache對應的Admin按鈕，會啟動瀏覽器顯示XAMPP的首頁或者可以在瀏覽器輸入http://localhost/index.php。如下圖。(可將網址列中的localhost改為並瀏覽，以確認httpd.conf有正確設定。)
   

啟動 MySQL，並用phpMyAdmin設定之

1. 在XAMPP Control Panel 上，按下MySQL對應的Start按鈕，啟動MySQL。
2. 在XAMPP Control Panel 上，按下MySQL對應的Admin按鈕，會啟動瀏覽器顯示phpMyAdmin的管理頁。(或輸入網址http://localhost/phpmyadmin/ ) 如下圖。
   
3. 為了安全性我們要為 MySQL的預設帳號 root 設定密碼。 選擇 [使用者帳號] 分頁 > 帳號 root 主機名稱 localhost > [編輯權限]。如下圖。
   
   
4. 選擇 [修改密碼]。設定密碼後，按執行。如上圖。
5. 接著用文字編輯器開啟 C:\xampp\phpMyAdmin\config.inc.php 依下述步驟修改。參見下圖。
   1. 將 $cfg['Servers'][$i]['auth_type'] = 'config'; 改為 $cfg['Servers'][$i]['auth_type'] = 'cookie';
   2. 將 $cfg['Servers'][$i]['password'] = ''; 刪去。
   3. 將 $cfg['Servers'][$i]['AllowNoPassword'] = true; 改為 $cfg['Servers'][$i]['AllowNoPassword'] = false;
      
6. 重新開啟phpMyAdmin的管理頁(網址http://localhost/phpmyadmin/ )。輸入 root 的帳密，登入。(root 的密碼是先前我們[修改密碼]那步驟所設定的)
   
7. 我們在前面的步驟設定了 root (localhost) 的密碼。接著同樣為root (127.0.0.1) 和 root (::1) 設定密碼。

UCenter

帳號免激活, 自動激活("您的帳號需要激活", action=activation)

[Discuz! Board 管理中心] > [站長] > [UCenter 設置] >
[是否允許其他應用的會員在站點激活:] (是)
[是否允許直接激活:] (是)

Firefox 和 Chrome 的 Findbar 把 ‘ (U+2018)、 ’ (U+2019)、 ' (U+0027) 視為相同. IE 和 Edge 把他們視為不同.

參考:

• JSON Universe : O3noBLOG
• 常用配置文件格式簡析 | zrong's blog
• Category: Configuration files - Wikipedia
• Category: Data serialization formats - Wikipedia
• 電子文檔格式及輕量級標記語言-昨夜星辰
• YAML：可能並不是那麼完美
• TOML 教程- 可能是最好的配置文件格式
• 软件系统中的配置文件
• James Gosling: 每个配置文件最终都会变成一门编程语言
• 从配置文件到 DSL
• 從Spring看配置需求 -iThome

STEP 00

使用的工具/環境:

• windows10
• jdk1.8.0_141
• Eclipse Jee 2018-12
• Tomcat 9.0.21
• axis2-1.7.9
  • (WAR distribution) axis2-1.7.9-war.zip 解壓, 得到 axis2.war
  • (Binary distribution) axis2-1.7.9-bin.zip 解壓到 C:\mylib\axis2-1.7.9 (或你喜歡的位置)

STEP 01

Tomcat 我下載的是 apache-tomcat-9.0.21.zip, 這是免安裝版, 把下載的 axis2.war 放到 apache-tomcat-9.0.21\webapps 目錄下, 執行 apache-tomcat-9.0.21\bin\startup.bat
開啟瀏覽器, 輸入 http://localhost:8080/axis2/ , 如果出現了Axis2的 welcome 頁, 表示Axis2成功安裝到Tomcat裡了.
執行 apache-tomcat-9.0.21\bin\shutdown.bat 關掉 Tomcat.

STEP 02

設定 Eclipse 的 Preferences / Web Services / Axis2 Preferences/ Axis2 Preferences / Axis2 runtime location 設定為 C:\mylib\axis2-1.7.9
下方出現 Axis2 runtime loaded successfully 表示設定成功.

STEP 03

Eclipse 設定 Server 使用 tomcat-9.0.21

STEP 04

Eclipse 裡新增一個 Dynamic Web Project.

• Project name 填 WsAxis2Demo
• Target runtime 填 Apache Tomcat v9
• Dynamic Web Module Version 填 2.5 (ref: stackoverflow#4674363)
• 點 Configuration 右側的 Modify.. 在新出現的Project Facets視窗裡, 勾選 Axis2 Web Services, 按OK 在原來的視窗按 Finish

STEP 05

JSTL

如果這時候 Eclipse 報錯 Can not find the tag library descriptor for "http://java.sun.com/jsp/jstl/core"
把 jstl-1.2.jar 放到專案的 /WEB-INF/lib/ 裡 (ref: stackoverflow#13285826)

XmlSchema Core

把 xmlschema-core-2.2.4.jar 放到專案的 /WEB-INF/lib/ 裡 (ref: stackoverflow#35188087)

STEP 06

建一個class

package io.github.shyangs;

public class MyWs {
	public int addTwoNumbers(int firstNumber, int secondNumber) {
		return firstNumber + secondNumber;
	}
}

STEP 07

• MyWs.java 上右鍵選 Web Services / Create Web Service
• 點 Configuration 下方的 Server runtime 連結
• Web Service runtime 選擇 Axis2
• 一路 Next 後, 啟動 Server

STEP 08

用瀏覽器開啟 http://localhost:8080/WsAxis2Demo/services/listServices 會看到我們的 Web Service 資訊
同頁的藍色連結，則是 WSDL

STEP 09

修改 services.xml 裡的 messageReceiver mep屬性值
從

<service name="MyWs" >
	<Description>
		Please Type your service description here
	</Description>
	<messageReceivers>
		<messageReceiver mep="http://www.w3.org/2004/08/wsdl/in-only" class="org.apache.axis2.rpc.receivers.RPCInOnlyMessageReceiver" />
		<messageReceiver  mep="http://www.w3.org/2004/08/wsdl/in-out"  class="org.apache.axis2.rpc.receivers.RPCMessageReceiver"/>
	</messageReceivers>
	<parameter name="ServiceClass" locked="false">io.github.shyangs.MyWs</parameter>
</service>

改為

<service name="MyWs" >
	<Description>
		Please Type your service description here
	</Description>
	<messageReceivers>
	    <messageReceiver mep="http://www.w3.org/ns/wsdl/in-only" class="org.apache.axis2.rpc.receivers.RPCInOnlyMessageReceiver" />
	    <messageReceiver  mep="http://www.w3.org/ns/wsdl/in-out"  class="org.apache.axis2.rpc.receivers.RPCMessageReceiver"/>
	</messageReceivers>
	<parameter name="ServiceClass" locked="false">io.github.shyangs.MyWs</parameter>
</service>

否則Client呼叫時, 會叫不到Service, 報出錯誤 The ServiceClass object does not implement the required method in the following form: OMElement xxxxx(OMElement e)
(ref: stackoverflow#36319901)

改完要重啟 Server.

參考

• 使用 Apache Axis2 和 Eclipse 創建 Java Web Service - 台部落
• eclipse中AXIS2發佈過程 - tapt - 博客園

• #11 How to find chkdsk results in Windows 10

ref:

• List of DOS commands - Wikipedia
• List of Unix commands - Wikipedia
• 微軟發佈了超 948 頁的 Windows 命令行參考文檔
• Linux命令大全
• 鳥哥的 Linux 私房菜 -- Linux 常用網路指令介紹
• [Windows] 用mklink與junction建立資料夾連結 | 簡睿隨筆 | 學習過程的紀錄與備忘
• 如何查詢哪個程式佔用了指定Port @ 卡達+噗寶=阿噗噗 :: 隨意窩 Xuite日誌

基本資料型別

整數

浮點數

布林值

字元

註

[*] 區域變數在宣告時，Java不會自動設定初值，因此在存取時前必須先指定初始值，你可以在宣告時同時指定區域變數初值，也可以在宣告完後再指定區域變數初始值。實體變數在宣告時會自動設定初值 (實體變數預設值)，你也可以在宣告時同時指定初值；但不可以在宣告完後又再指定實體變數初始值，編譯(compile)時會有錯誤訊息。

import java.util.*;

public class PrimeSieve {

	public static LinkedList<Integer> sieve(int n) {
		if (n < 2) { return new LinkedList<Integer>(); }

		LinkedList<Integer> primes = new LinkedList<Integer>();
		LinkedList<Integer> nums = new LinkedList<Integer>();

		// nums = [2, 3, 4, 5, 6, 7, ..., n]
		for (int i = 2; i <= n; i++) { 
			nums.add(i);
		}

		// 從 nums移除所有 2 的倍數, 把 2 放入primes
		// 從 nums移除所有 3 的倍數, 把 3 放入primes
		// 從 nums移除所有 5 的倍數, 把 5 放入primes
		// ...
		while (nums.size() > 0) {
			int nextPrime = nums.remove();
			for (int i = nextPrime * nextPrime; i <= n; i += nextPrime) {
				nums.removeFirstOccurrence(i);
			}
			primes.add(nextPrime);
		}
		return primes;
	}

	public static void main(String[] args) {
		System.out.println("Please input an integer: ");
		Scanner scanner = new Scanner(System.in);
		System.out.println( sieve( scanner.nextInt() ) );
		if (scanner != null) { scanner.close(); }
	}
}

• Sieve of Eratosthenes - Wikipedia
• Sieve of Eratosthenes - Rosetta Code

Client-side storage

Date and Time

Utility Function

• Why using _.chain is a mistake. – Making Internets – Medium
  • 【譯】為什麼說使用 _.chain 是個錯誤 | 聆聽群山的怒號
• Ramda 函數庫參考教程 - 阮一峰的網路日誌

Shim / Polyfill

console.log

• 【笨問題】IE9的「console未被定義」錯誤 - 黑暗執行緒 : IE8/IE9要先按F12開啟IE Dev Tools才能存取console物件啦!
• What happened to console.log in IE8? - Stack Overflow

Promise

• https://github.com/hax/all-promises

fetch

• fetch使用的常見問題及解決辦法 - wonyun - 博客園
• Fetch進階指南 | louis blog

• Usage statistics of JavaScript libraries for websites
• cdnjs May 2021 Usage Stats
• npm rank

疑難排解

使用了前端路由後與HTML錨點(anchor)衝突

解法: 放棄HTML錨點使用JS錨點

let scrollToAnchor = (anchorName) => {
    if (anchorName) {
        let anchorElement = document.getElementById(anchorName);  // 要跳轉到的元素
        if(anchorElement){ anchorElement.scrollIntoView(); } // 如果對應元素存在，就捲動到該位置
    }
  }

參考

• 前端路由是什么东西？ - 知乎
• 前端路由实现原理 - 知乎
• 前端路由一探 | The World of TomasRan
• xiyuyizhi/notes#9 從history api看主流框架的路由機制
• joeyguo/blog#2 前端路由實現與 react-router 源碼分析
• inhuman-cpc/inhuman-cpc.github.io#3 前端利器之路由庫
• Javascript Routing - JSter Javascript Catalog
• Routing - JSwiki
• React-router錨點跳轉的解決方案 - 簡書
• 「前端进阶」彻底弄懂前端路由 - 掘金
• 一文读尽前端路由、后端路由、单页面应用、多页面应用 - 掘金
• 淺談前後端路由與前後端渲染 - 掘金
• StateMan：創建一個簡單的SPA實例(二) - CSDN前端知識共享
• 前端單頁路由《stateman》源碼解析 - 掘金

CGI programming in VBScript / JScript (Windows Script Host (WSH))

環境準備：假設開發環境已建立好了。參閱 #24 XAMPP 安裝與設定 (PHP, Apache, MariaDB, phpMyAdmin)。

VBScript

1. 在目錄 C:\xampp\cgi-bin\ 新增一腳本 test1.vbs ，該腳本內容如下：

'!c:\WINDOWS\system32\cscript.exe /nologo
WScript.Echo "Content-type: text/html" & vbcrlf ' vbCrLf 是 Visual Basic中的一個字串常數，即「 Chr(13) & Chr(10) 」（回車字元與換行字元連接在一起 \n\r ），是換行的意思. 

'Above two lines are required do not change
'Some basic html follows:

WScript.Echo "<h1>Hello World</h1>" 
WScript.Echo "<p>This is output from VBScript</p>"

WScript.StdOut.WriteLine "<h2>Microsoft VBScript engines version</h2>"
WScript.StdOut.WriteLine ( _ 
	Join(Array( _ 
		ScriptEngine, ScriptEngineMajorVersion, ScriptEngineMinorVersion, ScriptEngineBuildVersion _ 
	), ".") _ 
)

2. 在瀏覽器輸入網址 http://localhost/cgi-bin/test1.vbs。如下圖，印出 Hello world 和 VBScript 引擎版本。
   

JScript

1. 在目錄 C:\xampp\cgi-bin\ 新增一腳本 printenv.wsf ，該腳本內容如下：

'!c:/windows/system32/cscript -nologo

'https://github.com/apache/httpd/blob/trunk/docs/cgi-examples/printenv.wsf 

' To permit this cgi, replace ' on the first line above with the
' appropriate shebang, f.e. '!c:/windows/system32/cscript -nologo
'
' ***** !!! WARNING !!! *****
' This script echoes the server environment variables and therefore
' leaks information - so NEVER use it in a live server environment!
' It is provided only for testing purpose.
' Also note that it is subject to cross site scripting attacks on
' MS IE and any other browser which fails to honor RFC2616. 

''
''  printenv -- demo CGI program which just prints its environment
''

<job>
<script language="JScript">

WScript.Echo("Content-type: text/html; charset=utf-8");
WScript.Echo("\n");

WScript.Echo("Hello World!");

WScript.StdOut.WriteLine("<h2>Microsoft JScript engine version</h2>")
WScript.StdOut.WriteLine([
	ScriptEngine(), ScriptEngineMajorVersion(), ScriptEngineMinorVersion(), ScriptEngineBuildVersion()
].join('.'));

WScript.Echo("<h2>server environment variables (&#20282;&#26381;&#22120;&#29872;&#22659;&#35722;&#25976;)</h2>");

var objShell = new ActiveXObject("WScript.Shell");
var objArray = new Array();
var e = new Enumerator(objShell.Environment("PROCESS"));
for (;!e.atEnd();e.moveNext()) {
  var i = e.item().indexOf("=");
  var envvar = e.item().substring(0, i);
  var envval = e.item().substring(i + 1, e.item().length);
  envval = envval.replace("\n", "\\n");
  objArray.push(envvar + "=\"" + envval + "\"");
}
objArray.sort();
WScript.Echo(objArray.join("<br/>"));
</script>
</job>

2. 在瀏覽器輸入網址 http://localhost/cgi-bin/printenv.wsf。如下圖，印出 Hello world 、 JScript 引擎版本和伺服器環境變數。
   

參考資料

• Windows Script File - Wikipedia
• How to run VBScripts as CGI on Apache 2.2.18

<!DOCTYPE html>
<html>
  <head>
	<!-- 引入 react.js, react-dom.js 和 babel-core 的 browser.min.js -->
	<script src="build/react.js"></script>
	<script src="build/react-dom.js"></script>
	<script src="build/browser.min.js"></script>
  </head>
  <body>
	<div id="example"></div>
	
	<!--
	   `type=text/babel` 的 script 使用 JSX 語法.
	   透過 Babel 將 JSX/ES6/ES7 轉譯成 ES5.
	-->
	<script type="text/babel">

		// ReactDOM.render 是 React 最基本的方法，
		// 用於將模板轉為 HTML 語言，並插入指定的 DOM 節點
		ReactDOM.render(
		  <h1>Hello, React.js!</h1>,
		  document.getElementById('example')
		);

	</script>
  </body>
</html>

上文使用「內嵌」的方式來載入 JSX, 我們也可以從外部引入

<script type="text/babel" src="main.jsx"></script>

其他教學文章

• 24 小時，React 快速入門 - shiningjason1989
• React.js 小書 - 鬍子大哈
• React 入門實例教程 - 阮一峰的網路日誌
• 從零開始學 ReactJS（ReactJS 101）
• React - DOM界的彼方
• 《React 學習之道》The Road to learn React (簡體中文版)
• jnotnull/dva-generator#4 React沉思录

CGI programming in Perl / batch file

環境準備：假設開發環境已建立好了。參閱 #24 XAMPP 安裝與設定 (PHP, Apache, MariaDB, phpMyAdmin)。

Perl

1. 啟動 Apache，在瀏覽器輸入網址 http://localhost/cgi-bin/perltest.cgi。如下圖。
   
2. 在瀏覽器輸入網址 http://localhost/cgi-bin/printenv.pl。如下圖，印出環境變數。(demo CGI program which just prints its environment)
   

batch file ( 批次檔 / 批处理文件 )

1. 文字編輯器修改 C:\xampp\apache\conf\mime.types ，將 application/x-msdownload exe dll com bat msi 改為 application/x-msdownload exe dll com msi
2. 在目錄 C:\xampp\cgi-bin\ 新增一批次檔 hello.bat ，該批次檔內容如下：

@echo off
echo Content-type: text/html
echo.
echo Hello, world!
echo ^<h2^>Environment Variables ^&percnt;PATH^&percnt;^<^/h2^>
echo %PATH%

3. 在瀏覽器輸入網址 http://localhost/cgi-bin/hello.bat。如下圖，印出Hello, world!和系統環境變數 PATH。
   

參考資料

• Is it possible to run a batch file as a cgi in apache under windows? - stackoverflow

1. 先為Discuz新增一個MySQL資料庫。從phpMyAdmin的管理頁，選擇 [資料庫] 分頁。新資料庫名稱 discuz (可自訂)。編碼 utf8mb4_unicode_ci。按下[建立]。如下圖。
   
2. 將 Discuz 壓縮檔裡的 upload 資料夾解壓縮放到 C:\xampp\htdocs\ 並將 upload 改名為 bbs (可自訂)。如下圖。
   
3. 用瀏覽器開啟 http://localhost/bbs/，會自動轉向至http://localhost/bbs/install/開始Discuz的安裝。
4. 安裝STEP1，確認都是綠色勾，下一步。如下圖。
   
5. 安裝STEP2，我們是全新安裝，選全新安裝那項。如下圖。
   
6. 安裝STEP3，填入要用的資料庫相關資料。資料庫主機位址 localhost、資料庫名稱 discuz、帳號 root 和密碼。並設定論壇管理員資料。如下圖。註：若資料庫改過port，比如13306，則資料庫位址填 127.0.0.1:13306
   
7. 完成 Discuz 安裝。論壇首頁是 http://localhost/bbs/index.php 。若你在Apache 的 httpd.conf 有設定 ServerName。首頁是 http://<ServerName>/bbs/index.php。
   

Discuz官方網站

http://www.discuz.net/
https://gitee.com/ComsenzDiscuz/DiscuzX

透過
https://github.com/jch/html-pipeline/blob/master/lib/html/pipeline/sanitization_filter.rb#L44-L106
可以知道 Github Issue 裡可用的 html 的標籤和屬性.

存取權限範圍

什麼東西 可使用 存取權限修飾字

How to find chkdsk results in Windows 10

1. 開啟事件檢視器(Event Viewer)(Press Windows+R to open the Run dialog, enter eventvwr (or eventvwr.msc) )
2. 左側欄選擇 Windows Logs (Windows 記錄) - Application(應用程式)
3. 左側欄選擇 篩選目前記錄(Filter Current Log)... 並填入事件識別碼 event ID: 26214, 26226 或 1001 ( Winint )
   

開發工具

text editor / IDE (Integrated development environment)

程式語言 / 編譯器 / 直譯器

資料庫相關

資料庫管理工具 ( database administrator tools )

database driver

反編譯器Decompiler

自動化工具 Automation

CASE tools

software prototyping tools

Server

Servlet Container / (web container)

HTTP Server / (web server)

live-reload server for frontend development

installation software

Office Software

E-book reader (PDF, EPUB, .mobi, .azw)

Operating System

Remote Desktop

Virtualization Software

Mathematical software

File Manager

Firewall / Antivirus Software

請勿同時安裝兩個防毒軟體.

• Top 10 BEST Free Firewall Software For Windows

System Monitor / Management

• 硬體溫度監控簡單、CPU佔用少用什麼軟體好 - 電腦討論(新) - Chiphell

磁碟檢查 / 儲存媒體管理工具

• 工具软件补完计划，SSD性能如何？不服跑个分嘛~ - 知乎

影音媒體播放器 / image viewer、多媒體軟體

(解)壓縮軟體

其他

參考

使用 cmd

1. 建立一個 HelloWorld.java 純文字文件檔，假設路徑為 C:\Temp\HelloWorld.java，其內容為:

public class HelloWorld {
	public static void main(String[] args) {
		System.out.println("Hello World!");
	}
}

2. 開啟 cmd, 切換路徑到放置 HelloWorld.java 的目錄，在此命令為 cd C:\Temp
3. 使用 javac 命令來編譯，在此命令為 javac HelloWorld.java，在 HelloWorld.java 同資料夾裡編譯出了 HelloWorld.class ，在此路徑為 C:\Temp\HelloWorld.class
4. 使用 java 命令來執行Class檔，在此命令為 java HelloWorld ，將看到輸出 ‵Hello World!‵
   

使用 NetBeans

1. NetBeans IDE >> [File] >> New Project... >> Categories: Java / Projects: Java Application >> [Next]
2. 填寫 Project Name 和 Create Main Class >> [Finish]
3. 開啟 {{Project Name}}.java, 撰寫程式碼。第一支程式，簡單的印出字串。在 main 函式裡，打上 System.out.println("Hello, Java!");
4. 試著跑跑看，看結果 Run Project (F6)

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package io.github.shyangs.helloworldprinter;

/**
 *
 * @author Java
 */
public class HelloWorldPrinter {

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        // TODO code application logic here
        System.out.println("Hello, Java!");
    }
    
}

使用 Eclipse

1. NetBeans IDE >> [File] >> New >> Java Project >> 填寫 Project name >> [Finish]
2. 在 Source Folder (src) 上點右鍵 >> New >> Class >> 填寫 Package >> 勾選 public static void main(String[] args) >> [Finish]
3. 開啟 {{Project Name}}.java, 撰寫程式碼。第一支程式，簡單的印出字串。在 main 函式裡，打上 System.out.println("Hello, Java!");
4. 試著跑跑看，看結果 Run Project ( Ctrl + F11)

package io.github.shyangs.helloworldprinter;

public class HelloWorldPrinter {

	public static void main(String[] args) {
		// TODO Auto-generated method stub
		System.out.println("Hello Java!");
	}

}

參考

• 前端模板分析 - Creeper's Blog
• Web模板技術的總結與探索 -- hax （賀師俊）
• 一個對前端模板技術的全面總結 - Regularjs: 中文指引 - 前端亂燉
• 前端模板的原理與實現 - javascript魔法師 - SegmentFault 思否
• 高性能JavaScript模板引擎原理解析
• JavaScript模板引擎原理，幾行代碼的事兒 - Barret Lee - 博客園
• 簡單前端模版引擎原理 ‧ lcat`s
• wayou/wayou.github.io#4 JS 模板引擎的簡單實現
• lessfish/underscore-analysis#26 Underscore _.template 方法使用詳解
• kaola-fed/blog#66 art-template學習筆記
• 前端模版引擎 - artTemplate 【上】、【下】
• jQuery模板 ：(一) 被納入Jquery 插件，輕量強大但去遭到廢棄的tmpl - Josh_Persistence - ITeye博客
• jQuery模板 ：(二) JSRender之內置的模板標籤 - Josh_Persistence - ITeye博客
• 使用Nunjucks - 廖雪峰的官方網站

Lodash 3.x 版本支援的環境有：
Chrome 43-44, Firefox 38-39, IE 6-11, MS Edge, Safari 5-8, ChakraNode 0.12.2, io.js 2.5.0, Node.js 0.8.28, 0.10.40, & 0.12.7, PhantomJS 1.9.8, RingoJS 0.11, & Rhino1.7.6

要讓 Lodash 支援IE8，我們需要安裝舊版的 lodash-cli (v3.10.1)，如果已經安裝了新版的 lodash-cli 請先移除之.
npm uninstall -g lodash-cli

接著安裝 lodash-cli (v3.10.1)
npm i -g [email protected]

最後組建 lodash
整個 lodash.js (v3.10.1)
lodash compat
或只要工作在瀏覽器上, 選用函數為round, floor和ceil
lodash compat include="round,floor,ceil" exports="global"

參考

• https://wizardforcel.gitbooks.io/lodash-doc-45/content/7.html
• ragingDream/blog#5
• CodingMeUp/AboutFE#26

Eclipse 4.6 M4 Neon has a word-wrap feature! (Nov 2015, for release mid 2016). 快捷鍵為 Alt+Shift+Y

舊版 Eclipse 可安裝 de.cdhq.eclipse.wordwrap (Keyboard shortcut for toggling word wrap in current editor: CTRL+ALT+E on Windows, CMD+ALT+E on OS X)

ref:

Does Eclipse have line-wrap - Stack Overflow

CGI programming in JavaScript ( QuickJS )

QuickJS

1. 在目錄 C:\xampp\cgi-bin\ 新增一腳本 quickjs.js ，該腳本內容如下 ( 請依照 Quick.JS 的執行檔 qjs.exe 所在路徑，修改腳本第一行 )：

#!D:\Programs\QuickJS\bin\qjs.exe

console.log('Content-type: text/html');
console.log('');
console.log('<h2>Hello World</h2>');

import('std')
    .then((std) => {
        console.log('<h2>std.getenviron()</h2>');
        // console.log(JSON.stringify(std.getenviron()));
        // console.log('<br /><br />');
        
        const obj = std.getenviron();
        for(const key in obj){
          console.log(key, ' = ', obj[key]);
          console.log('<br />');
        }
    })
    .catch((err) => {
        console.log(err);
    });

2. 在瀏覽器輸入網址 http://localhost/cgi-bin/quickjs.js。如下圖，印出 Hello world 和伺服器環境變數。
   

參考

• 用 QuickJS 直譯 JavaScript 程式

Lint 是貝爾實驗室在1979年開發的 C語言靜態代碼分析工具 ( static code analysis ). 現在則用來泛指所有語言的靜態代碼分析工具. 像 JavaScript 語言有 JSLint, JSHint, ESLint 這些工具.

參考

• Lint (software) - Wikipedia
• Day 03: ESLint - Lint工具的後起之秀 - iT 邦幫忙
• JSLint,JSHint,ESLint對比和Vim配置 | MoeLove
• javascript校驗工具的比較
• JavaScript 代碼靜態質量檢查 | EFE Tech

live-server 的用途：

• 在編輯器中儲存剛編輯的程式碼檔案，瀏覽器會即時重新整理，顯示最新的結果
• 讓我們能在 file:// 協議下 使用 AJAX 請求 JS 檔案和 API.
  • 因為安全限制，瀏覽器會擋下 file:// 協議下的 AJAX 請求，因此需要一個簡易的伺服器.
  • 安全限制: 同源政策（Same Origin Policy）, 內容安全政策（Content Security Policy）
    • SOP , 參見 浏览器同源政策及其规避方法 - 阮一峰的网络日志
    • CSP 詳情見 Content Security Policy 入门教程 - 阮一峰的网络日志 , How does Content Security Policy work? - Stack Overflow

安裝

需要依序安裝的有 curl, Node.js (和 npm), live-server

1. 首先安裝 curl, 按下 Ctrl + Alt + T, 開啟 Terminal, 輸入下列指令
   sudo apt install curl
2. 按照 Node.js 官網的安裝指示，安裝 Node.js (和 npm)
   curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs

3. 安裝 live-server
   sudo npm install -g live-server
4. 接下來我們測試一下. 在桌面新增一個資料夾 TodoApp , 用 sublime (或其他文字編輯器) 建一個 index.html 檔案，內容為：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
    <div>Hello, world!</div>
</body>
</html>

5. Terminal 切換路徑到上述 index.html 檔案所在路徑 ( 在此例為 cd 桌面/TodoApp/ )，輸入命令live-server，將會啟動伺服器，開啟瀏覽器，前往 http://localhost:8080 ， index.html 檔案會顯示Hello, world!在網頁上。
   

6. 如果出現Error: listen EACCES {{path}}:{{port}}錯誤訊息，可能是該port被本機其他伺服器佔據了，請換其他port，比如 live-server --host=127.0.0.1 --port=1234
   註: EACCES (aka "Permission denied")

7. 如果出現'live-server' 不是內部或外部命令、可執行的程式或批次檔。(live-server: command not found) 請檢查環境變數 PATH的設定值。(Windows 裡應加入 ;C:\Program Files\nodejs;%AppData%\npm;)

jQuery

Bootstrap

<!-- 用 CSS/HTML 替代Better Collapse -->
<style>
  [data-toggle="collapse"]{
    cursor: pointer;
  }
  span[data-hide-on="collapsed"]{
    display: none;
  }
  [data-toggle="collapse"].collapsed span[data-hide-on="collapsed"]{
    display: inline;
  }
  [data-toggle="collapse"].collapsed span[data-hide-on="expanded"]{
    display: none;
  }
</style>
<div class="page-header" data-target="#divMainContent" data-toggle="collapse">
  <h4>
    <span data-hide-on="expanded"><i class="glyphicon glyphicon-triangle-bottom"></i></span>
    <span data-hide-on="collapsed"><i class="glyphicon glyphicon-triangle-right"></i></span>
    <!-- 標題文字 -->
  </h4>
</div>
<div id="divMainContent" class="collapse in">
  <!-- 可折疊區 -->
</div>

參考

• Awesome jQuery: A curated list of awesome jQuery plugins, resources and other shiny things.

參考

• Awesome Grid: A curated list of data grid/table libraries and resources that developers may find useful. This list focuses on JavaScript-based data grid libraries and not CSS-based grid systems for page layout. The list is ordered alphabetically by category.
• JavaScript Spreadsheet | LibHunt
• JSpreadsheets - Best Open-Source Spreadsheets and Data Grids written in JavaScript
• https://github.com/AmitMY/grids/blob/master/differences/ag-Grid.Handsontable.md

spiltByIndex

public class Snippet {
	public static String[] spiltByIndex(String str, int... idxs) {
		int tSize = idxs.length;
		String[] tResults = new String[tSize + 1];
		for (int i = 0; i <= tSize; i++) {
			int indexStart = 0;
			int indexEnd = 0;
			if (0 < i) {
				indexStart = idxs[i - 1];
			}
			if (tSize > i) {
				indexEnd = idxs[i];
			}
			if (tSize == i) {
				indexEnd = str.length();
			}
			tResults[i] = str.substring(indexStart, indexEnd);
		}
		return tResults;
	}

	public static void main(String[] args) {
		print(spiltByIndex("ABCDEFGHIJ", 1, 4));
	}
	public static void print(String[] arr) {
		for (String el : arr) {
			System.out.println(el);
		}
	}
}

UUID

方法一

java.util.UUID.randomUUID().toString();

方法二

public class Snippet {
	public static String createUUID() {
		 String[] s = new String[36];
		 String[] hexDigits = { "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"};
		 for (int i = 0; i < 36; i++) {
		        s[i] = hexDigits[(int) Math.floor(Math.random() * 16)];
		}
		 s[8] = s[13] = s[18] = s[23] = "-";

		 StringBuilder sb = new StringBuilder();
		 for(int i = 0; i < s.length; i++) {
			 sb.append(s[i]);
		 }
		 return sb.toString();
	}

	public static void main(String[] args) {
		System.out.println(createUUID()); //4638b26a-5c3f-e4d8-cd20-7d759484f04f
	}
}

getStrFromInputStreamByCharset

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;

public class Snippet {
	public static String getStrFromInputStreamByCharset(InputStream pInputStream, String pCharsetName, String pCSeparator) {
		StringBuilder builder = new StringBuilder();
		BufferedReader reader = null;

		try {
			reader = new BufferedReader(new InputStreamReader(pInputStream, pCharsetName));
			String line = reader.readLine();
			for ( boolean firstLine = true ; null != line; line = reader.readLine() ) {
				if (firstLine) {
					builder.append(line);
					firstLine = false;
				} else {
					builder.append(pCSeparator);
					builder.append(line);
				}
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			try {
				reader.close();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
		return builder.toString();
	}
	
	public static String getStrFromInputStreamByCharset(InputStream pInputStream, String pCharsetName) {
		return getStrFromInputStreamByCharset(pInputStream, pCharsetName, System.lineSeparator());
	}

ZIP壓縮

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.zip.ZipEntry;
import java.util.zip.ZipOutputStream;

public class Snippet {
	public static void main(String[] args) throws IOException {
		File fileOrDirWantToZip = new File("D:" + File.separator + "zipTempDir");
		File outZipFile = new File("D:" + File.separator + "zipFile.zip");
		zipDirOrFile(fileOrDirWantToZip, outZipFile, "資料夾");
		// zipDirOrFile(fileDir, zipFile, "");
		System.out.println("壓縮完成");
	}

	public static void zipDirOrFile(String pathFileOrDirWantToZip, String pathFileZipOut) throws IOException {
		File fileOrDirWantToZip = new File(pathFileOrDirWantToZip);
		File outZipFile = new File(pathFileZipOut);
		zipDirOrFile(fileOrDirWantToZip, outZipFile);
	}
	public static void zipDirOrFile(File fileOrDirWantToZip, File fileZipOut) throws IOException {
		zipDirOrFile(fileOrDirWantToZip, fileZipOut, null);
	}

	public static void zipDirOrFile(File fileOrDirWantToZip, File fileZipOut, String dirName) throws IOException {
		ZipOutputStream zipOut = new ZipOutputStream(new FileOutputStream(fileZipOut));
		if (fileOrDirWantToZip.isFile()) {
			String dir = "";
			if ( null == dirName || "".equals(dirName) ) {
				dir = "";
			} else {
				dir = dirName + File.separator;
			}
			zipFile(zipOut, fileOrDirWantToZip, dir + fileOrDirWantToZip.getName());
		} else if (fileOrDirWantToZip.isDirectory()) {
			String dir = "";
			if ( null == dirName || "".equals(dirName) ) {
				dir = "";
			} else {
				dir = dirName;
			}
			zipDir(zipOut, fileOrDirWantToZip, dir);
		} 
		zipOut.close();
	}
	
	private static void zipDir(ZipOutputStream zipOut, File dirWantToZip, String dirName) throws IOException {
		String dir = "";
		if ( null == dirName || "".equals(dirName) ) {
			dir = "";
		} else {
			dir = dirName + File.separator;
		}
		
		File[] files = dirWantToZip.listFiles();
		for (int i = 0; i < files.length; ++i) {
			File tFileOrDir = files[i];
			if (tFileOrDir.isFile()) {
				zipFile(zipOut, tFileOrDir, dir + tFileOrDir.getName());
			} else if (tFileOrDir.isDirectory()) {
				zipDir(zipOut, tFileOrDir, dir + tFileOrDir.getName());
			}
		}
	}
	
	private static void zipFile(ZipOutputStream zipOut, File fileWantToZip, String newFilePathInZip) throws IOException {
		InputStream input = new FileInputStream(fileWantToZip);
		zipOut.putNextEntry(new ZipEntry(newFilePathInZip));
		int temp = 0;
		while ((temp = input.read()) != -1) {
			zipOut.write(temp);
		}
		input.close();
	}
}