好文記錄與分享 – Larry的午茶時光

MySQL Key 與 Index 的差異？Primary 與 Unique key 的差異？Unique key 能否為 null？

Larry — Mon, 15 Oct 2018 03:44:00 +0000

圖片來源 https://zh.wikipedia.org/wiki/MySQL

之前看到一篇關於 MySQL index / key 的文章，以中文 MySQL 文章來說，larry 覺得寫得滿好的，分享給大家
https://blog.csdn.net/nanaMasuda/article/details/52543177
(文章內的「索引」就是 index)

“索引被用來快速找出在一個列上用一特定值的行。沒有索引，MySQL不得不首先以第一條記錄開始並然後讀完整個表直到它找出相關的行。”

文章第一句就點出 index 的主要功能：快速檢索。為啥可以快速檢索？因為 MySQL index 會建一物理結構 BTree 加快檢索，也可以想成是用空間換取速度。

Key 與 Index 的差異？

Key 包含了兩個功能

約束 (constraint)，包含本文下方提到的 Unique constraint.
索引 (index)，也就是 key 功能上包含了 index.

Primary 與 Unique key 的差異？

Primary key 的特性是

Unique constraint.
Each table can only have one Primary key.
Cannot be null.

Unique key 的特性是

Unique constraint.
Each table can have multiple Unique keys.
Can be null.

當然，請記得所有的 key 都包含 index 的功能。

Unique key 能否為 null？

larry 有做一些實驗跟查找文章
http://www.mysqltutorial.org/mysql-unique/

“Unlike other database systems, MySQL considers NULL values as distinct values. Therefore, you can have multiple NULL values in the UNIQUE index.

This is how MySQL was designed. It is not a bug even though it was reported as a bug.”

所以以 MySQL 來說，Unique key 是可以為 null 的。

相關文章：MySQL server 在 Mac 上關不掉的問題

[好文分享] Create a Custom Theme With OpenCart

Larry — Mon, 29 May 2017 08:30:00 +0000

Introduction
https://code.tutsplus.com/tutorials/create-a-custom-theme-with-opencart-introduction–cms-21786

(以下測試是依照最新版 OpenCart 2.3.0.2)

* 檔案結構上 view 底下是 theme 和 javascript. css, 圖, 和 html (tpl) 是放在 theme 底下。有點特殊的是 javascript 是獨立一個資料夾。但是 admin 的 view 又不同：
catalog
– view
– javascript
– bootstrap
– font-awesome
– ….
– theme
– default
– image
– stylesheet
– template

admin
– view
– image
– javascript
– stylesheets
– template

可以看到 admin 底下沒有多墊 theme/default 這兩層。就這架構來看 catalog 是可以容納更多 theme 的前端檔案，如果你有裝其他 theme 的話，theme 資料夾底下除了 default, 還會有你裝的其他的 theme.

* catalog/view/theme/default/template 底下的架構：
– common: 所有頁面的共用元件放在這邊, 例如 header.tpl, footer.tpl.
– error
– information
– module (OpenCart 2.3 是在 template/extension/module)

Part Two
https://code.tutsplus.com/tutorials/create-a-custom-theme-with-opencart-part-two–cms-21865

作者提到, 不管是新做前端介面或是更改預設介面, 都應該新增一個 theme
「In either case, I recommend creating a new custom theme instead of modifying the default theme files directly as it'll make the life easier during the version upgrade of the OpenCart.」

OpenCart 2.3 新增 theme 有點複雜 (與上面文章敘述不同), 請參考這篇文章
http://undefined.gr/site/2016/10/09/custom-opencart-2-3-0-2-theme/

1. 新增 catalog/view/theme/mytheme,
2. 新增 admin/controller/extension/theme/mytheme.php, 記得改 class name ControllerExtensionThemeMyTheme (這很重要)。取代 mytheme.php 裡的 “theme_default” 字串成 “mytheme”.
3. 新增 admin/view/template/extension/theme/mytheme.tpl, 一樣取代 mytheme.tpl 裡的 “theme_default” 字串成 “mytheme”.
4. 新增 admin/language/en-gb/extension/theme/mytheme.php, 更改裡面的 $_[‘heading_title’] 成 “My Theme”.
5. 新增 catalog/view/theme/mytheme/image/mytheme.png
6. 到你的後台 Extensions -> Extensions, 選擇 Theme, 應該會看到 “My Theme”, 點安裝，安裝完後編輯 “My Theme” 成 Enable, 資料夾指向 mytheme.
7. 到 System -> Settings 就可以選擇你商店的 template 了。

回到 tutsplus 這篇文章, 將
catalog/view/theme/mycustomtheme/template/common/header.tpl 中的

改成

Part Three
https://code.tutsplus.com/tutorials/create-a-custom-theme-with-opencart-part-three–cms-21890

OpenCart 的切版是

Content Top
Column Left Column Right
Content Bottom

程式端可以看 template/common/home.tpl, 就可以清楚的看出來 layout. 後台可以看 Design -> Layouts, 裡面的 layout 設定也是依循 Column Left/Right, Content Top/Bottom, 其中的 $modules (例如在 content_top.tpl 裡面), 就是在 Design -> Layouts 裡設定。

Part Four
https://code.tutsplus.com/tutorials/create-a-custom-theme-with-opencart-part-four–cms-21932

模組 assign 的方式 OpenCart 2.3 與這篇文章敘述的不同。以 2.3 來說，到 Extensions -> Extensions, 選擇 Modules, 底下會列出所有已安裝的 module, 找到一個 module (例如 Slideshow), 點右邊 + 號，可以生成一個實體。回到 Design -> Layouts, 選擇一個頁面進入，就可以新增 Column Left/Right, Content Top/Bottom 模組實體。

[好文分享] Why was 80 chosen as the default HTTP port and 443 as the default HTTPS port?

Larry — Mon, 28 Nov 2016 05:53:00 +0000

title 這個問題我有疑問一段時間了，偶然找到這個網頁，回答得很好，分享給大家參考：
http://www.howtogeek.com/233383/why-was-80-chosen-as-the-default-http-port-and-443-as-the-default-https-port/

The Internet Assigned Numbers Authority (IANA) is a department of ICANN, a non-profit private corporation that oversees global IP address allocation, the Domain Name System (DNS), well-known ports, and other Internet Protocol-related symbols and numbers.

During March of 1990, they published a document (RFC 1060) where they listed all the well-known ports at that time. In that list there was no protocol assigned to port 80 (it jumped from 79 to 81):

At that time, port 80 was officially free. In 1991, Tim Berners-Lee issued the first version of HTTP in a document (HTTP 0.9) where he stated:

Then in July of 1992, RFC1060 was made obsolete by a new document (RFC 1340) where the following appeared:

That document made 80 the official port for HTTP (www). However there is nothing about port 443 in that document. During October of 1994, RFC 1700 was published and this appeared for the first time:

It seems it was solicited by Kipp E.B. Hickman, who at the time worked at Mosaic, the first GUI browser company that later went on to become Netscape. It is not clear why port 443 was chosen. However, the previous RFC document had a gap from 374 through 512, but in RFC1700 the space from 375 to 451 was filled. It is most likely that the numbers were simply given in order of request.

[好文分享] 5 Surprises for PHP Developers Coming to JavaScript

Larry — Sun, 12 Jun 2016 12:09:00 +0000

http://radar.oreilly.com/2013/06/5-surprises-for-php-developers-coming-to-javascript.html

1. Functions are objects

* function 是一種 object, 所以它也有 built-in property 或是動態設定 property.

* function 可以當 input argument, 也可以當 return variable.

2. Function scope

* nested function 子層級的 function 可以看到父層級 function 的 variable, PHP 不行，PHP 下層 scope 也看不到 global variable, 除非用 global keyword.

3. Hoisting

* 變數或 function 宣告都自動提升到該 scope 的上方。注意提升到上方的變數初始為 undefined, 所以如果不是一開始就初始的變數，在初始之前是 undefined.

* 一般 function 宣告會 hoisting，但如果是 assign function as a variable, 一樣，該 variable 會 hoisting 到上方初始為 undefined.

4. No classes

* 這是 JS 和一般 OO 語言最大的不同之一，沒有 class，而且 object 可以動態新增 property.

5. Constructors and prototypes

* JS 的 constructor 是 “constructor function”, PHP 是 (double underscore)

function __construct() {

}

* JS 的繼承實作

function Animal() {

}

function Dog() {

}

Dog.prototype = new Animal();

注意子類別新的 property 不會出現在 prototype 裡 (ex: Dog.prototype)。另外子類別可以複寫父類別的 property (constructing 順序的問題)。

* JS ECMAScript 6 有導入 class, constructor, extends 等 keyword.

Swift (3): about Optional

Larry — Sun, 01 Nov 2015 03:26:00 +0000

Marin Todorov's article: Swift Optionals: When to use if let, when ? and !, when as? and as
http://www.touch-code-magazine.com/swift-optionals-use-let/

The “class?property” Syntax

controller.navigationController?.pushViewController(myViewController, animated: true)

如果 controller.navigationController 不為 nil, 執行 function. 如果 controller.navigationController 為 nil, 整行程式碼不執行。他可以替換成：

if controller.navigationController != nil {
    controller.navigationController.pushViewController(myViewController, animated: true)
}

The “if let” Syntax

if let nav = controller.navigationController {
    nav.pushViewController(myViewController, animated: true)
} else {
    //show an alert ot something else
}

“if let” 的語法隱含了 “and if nav != nil”. 當你有多行程式碼需要 unwrap, use “if let”.

The “as?” Syntax

let myVC = controller.presentedViewController as? MyViewController
myVC?.lastUpdated = NSDate()

“as?” 有點像 C++ 的 dynamic cast, 以上面例子來說，myVC 有可能是 nil. 正因如此，”as?” 底下通常要接 “class?property”. 另外如果用 “as” 而不是 “as?” (沒有問號)，則是 C++ 的 static cast，上面文章連結也有提到你要 101% 確定可以 cast 才用 “as” 去 cast.

[好文分享] JavaScript Concurrency model and Event Loop

Larry — Tue, 27 Jan 2015 13:09:00 +0000

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/EventLoop

JavaScript 是 event driven 的, 在當下 event handler (包含他所有 call stack) 結束之前, 是不會被 interrupt 的. 如果當下 event handler 在執行中又有其他 event, 則 queue 起來再處理. By this model, JavaScript 在撰寫時有幾點要注意:

1. As the link says “A good practice to follow is to make message processing short and if possible cut down one message into several messages.”
2. 避免 recursive function calls, 即使有的話也要特別注意.
3. 真的要開 thread 就要用 web workers. 他 postMessage 一樣加到 message queue 等待執行.
4. Ajax XHR 的 onreadystatechange event 一樣是加到 message queue 等待執行.

[好文分享] 加速網站的最佳實踐 Best Practices for Speeding Up Your Web Site

Larry — Sun, 18 Jan 2015 14:45:00 +0000

Yahoo Developer 關於加速網站的好文
https://developer.yahoo.com/performance/rules.html

1. Reduce http requests: using CSS sprites is a good example.

2. Static cache expiration: set the expiration to never or long time.

3. Gzip components.

4. Put stylesheets at the top: for progressive rendering.

5. Put scripts at the bottom: avoid downloading 2 or more components in parallel (don't let downloading javascript block downloading html and assets.)

6. Make JavaScript and CSS external: then they can be cached in the client. But note the JS with template language still stays in html.

7. Minify JavaScript and CSS.

8. Remove duplicate scripts: review if your html contains duplicate scripts.

9. Make Ajax cacheable: need a timestamp to judge if really need to submit a request.

[好文分享] The Basics of Web Workers

Larry — Sat, 06 Dec 2014 09:22:00 +0000

http://www.html5rocks.com/en/tutorials/workers/basics/

HTML 5 新的規格: Web Workers
https://html.spec.whatwg.org/multipage/workers.html#workers

在此技術之前 JavaScript 是單執行緒的，所以如果在 client 端做 computationally intensive 的工作 (ex: image processing)，通常頁面會 hang 住，再點頁面就會跳 warning dialog 之類。

Web Worker 的開啟相當簡單，在 caller side 下：

var worker = new Worker('task.js');
worker.postMessage(); // Start the worker.

postMessage 是 main thread 與 worker thread 溝通的方法 (當然兩端都要註冊 message handler)。另外上面連結還有提到：

1. Transferrable objects：C / C++ pass by reference 的概念。只要用 Transferrable Objects 規範內的 data type，搭配特定 postMessage prototype，就可以達到 object pass by reference，大幅提升 post 物件的效能 (本來是 pass by value)。

2. Subworkers：worker thread 可以再生成 worker thread。

3. Inline Workers：worker script 不用寫死在 js 檔裡，在 caller 端先產生 Blob 再產生 Worker。

4. Handling Errors：在 main thread 宣告 onError function 接 worker thread 丟出來的 error。

5. Same Origin Consideration：worker scripts and the webpage must be from the same origin。