190401 ( Log table ) 2019-04

Short: -

List

2019-04: Section.
2019-04-01: Section.
2019-04-02: Section.
2019-04-03: Section.
2019-04-04: Section.
2019-04-05: Section.
2019-04-06: Section.
2019-04-07: Section.
2019-04-08: Section.
2019-04-09: Section.
2019-04-10: Section.
2019-04-11: Section.
2019-04-12: Section.
2019-04-13: Section.
2019-04-14: Section.
2019-04-15: Section.
2019-04-16: Section.
2019-04-17: Section.
2019-04-18: Section.
2019-04-19: Section.
2019-04-20: Section.
2019-04-21: Section.
2019-04-22: Section.
2019-04-23: Section.
2019-04-24: Section.
2019-04-25: Section.
2019-04-26: Section.
2019-04-27: Section.
2019-04-28: Section.
2019-04-29: Section.
2019-04-30: Section.
{ Pollash }: Section.

2019-04

2019-04-01

( Javascript ) [ Understanding { this } keyword ]-{ TylerMcGinnis }: Link. // Notice 05:09 it shows when jim.mother.sayName() is invoked, .this will represent mother, not jim.
( Javascript ) [ A Beginner's Guide to Prototype ]-{ TylerMcGinnis }: Link. // 20:52 --{ so why we still use { Prototype? } instead of { Class } ? }--.
( Javascript ) [ Inheritance and the Prototype Chain ]-{ TylerMcGinnis }: Link. // 10:55 - --{ This is why we using ES6 { Class } to get rid of all the complex steps mentioned previously in this video, the inheritance become much more easy. }--. Also see { MDN }-{ Class }.
( Javascript ) [ Modules ]-[ From IIFEs to CommonJS to ES6 Modules ]-{ TylerMcGinnis }: Link.
Power grid of electricity use [ AGC ]-[ Automatic Generation Control] to balance the grid: Link.
( Video ) Hospice - { 最後這條路｜我的人生，由我主宰｜三之一 } - { TheNewsLens }:
1. Link: Link.
2. The face of the "real world": We shouldn't ignore any important aspect that compose the real world (even they seems to be more unpleasant), in other words, only "knowing" and "experiencing" the most bright side and as well as the most dark side of this world, then we can tell our personality is "complete", is "whole". Maybe if we had experienced only the noble things but no evil things, or if we had experienced only the evil things but no noble things, we are not a "complete", a "whole" person? This remind me a novel I had read - Siddhartha by Herman Hesse.
3. "自然生物性" 和 "演算法": --{ 只有在最困難的時刻，才會造就英雄。風和日麗下是不會造就英雄的。心靈上的對抗和征服，比身體上的，有時候更困難。戰勝自己的人性，就是戰勝我們生下來時就已經寫進我們人性的的演算法，我們是在跟自然生物性對抗，我們是在修改我們自己的演算法。 }--.

2019-04-02

( Javascript ) [ Modules ]-[ From IIFEs to CommonJS to ES6 Modules ]-{ TylerMcGinnis }: Link. // Self-invoking function link1 (11:51), self-invoking function link2. // 19:19 - Module Bundler of common.js will intelligently collecting all module spead in all .js files, convert it into a single bundle.js file, that browser can understand (then keyword such as require, export ... will all be removed after this).
(Music) {閃靈 CHTHONIC }-{ 烏牛欄大護法 }-{ Millennia's Faith Undone }: Link. ... Alright ... I have no idea what this is about ... but at least any art work that convey something (concept) are (might) still a lot better than art work that only produce stimulation and convey nothing like this shit.
{ Networking for Web Developers }-{ Coding Tech }: Link. No time to read all of it. [ 23:57 ]-[sending IP traffic to remote device ], I had this question before, if the different side (port) of a router, have same ip address and MAC address, or differnt ones? I still don't know it yet.
The Amazon monopoly and the problem with Jeff Bezos' business model: Link.
( Game ) { Starcraft }-[ Has vs Nice 四強賽第一場 WCS 蒙特婁台港澳日挑戰賽 ]: Link.

2019-04-03

( Webdev ) [ Why do web developers support older browsers? ]-{ Quora }: Link.
( Webdev ) Why support older browsers? Don't make assumptions for why they don't upgrade: Link. I keep this because I found comments are more interesting.
( CSS ) ( PostCSS ) Some things you may think about PostCSS, and you might be wrong: Link. Also see { PostCSS-cssnext }, a plugin for PostCSS that makes you can use future CSS. Still, I think not all CSS4 syntax is possible, like Grid layout - --{ For now cssnext doesn't have a runtime and this thing cannot be handled by a "simple" transformation. }--, from here.
( Javascript ) { Async function }-[ MDN ]: Link. Please test the second example yourself (contains 5 different cases) to make sure you really understand it.
( Javascript ) Understanding { Generator Function } in ES6: Link. You can see one of the example he convert .then().then() version to Generator Function version.
(Music) Many times music cover version is better than original version:
1. ( Music ) [ Piano cover from DooPiano ]-{ 워너원 (Wanna One) }-{ 집 (One's Place) } : Link. I later found how pleasant DooPiano's version is (the cover), after when I found how "terrible" original version is, this is not the first time (I found cover is more preferable) and this link is just an example.
2. ( Music ) [ Cover from ThePianoGuys ]-{ Swedish House Mafia }-{ Don't You Worry Child }: Link, and original version.
( Music ) [ Cover from ThePianoGuys ]-{ Phillip Phillips }-{ Home }: Link, and original version.
( Music ) { Hans Zimmer }-[ live ]-{ Now we are free (Gladiator) }-[ Amazing Czarina Russel ]: Link.
( Music ) { Hans Zimmer }-{ Now We Are Free }-[ movie Gladiator soundtrack ]: Link.
( Music ) { Now We Are Free }-[ live in Berlin 2016 ]-[ Gregorian (feat. Amelia Brightman) ]: Link. Sharp but soft, hard to tell why.
( Music ) { Hans Zimmer }-[ live in Prague ]-{ The Da Vinci Code }: Link.
( Drawing ) Astronaut Artwork with Adobe Illustrator and Photoshop: Link. Same conclusion - Always from rough to fine, loose to focus, normally not reversed.
( Video ) { 郭文贵 }-[ 2019年3月21日班农先生在意大利罗马《信息算法》主题演讲（中英文字幕版） ]: Link. Have no time to watch, not today.
( Video ) 直擊柯P台大7D病房！加護病房看透一切從白袍力量談人生哲學看板人物: Link. We are so easy to forget history, if we don't review them constantly.

2019-04-04

Modularized the time (of future planning) just like modularized the code:
1. ( Webdev ) [ 100 days of code frontend ]-[ curriculum ]-{ nas5w }: Link. If you have spent any amount of time in the past trying to learn web development or a similar skill, you have likely exprienced going down a rabbit hole on any one particular topic. This repository aims to assign a certain number of days to each technology and encourages you to move to the next once that number of days is up.
2. The 12 Week Year: Link.
3. My conclusion is: Modularized the time (of future planning) just like modularized the code, so I can manage it.

I'm trying to find the first hand source about { AIT } stated that USA have Marines deployed in Taiwan:

The news from The News Lens said { American Institute in Taiwan (AIT) } stated that "USA have Marines deployed inside AIT itself (in Taiwan)", but I don't found any first hand source about this. This is what I asked other people in the same article:

        
請問一下，這篇關於
"美國在台協會（AIT） 的發言人 孟雨荷 說 AIT 現址從2005年起就有包括美軍陸戰隊在內的現役軍人駐守"
的內容的來源 (第一手資訊) (source)，在哪裡可以找到？

我翻遍
AIT 的 官網，Facebook, Youtube
https://www.ait.org.tw/zhtw/
https://www.facebook.com/AIT.Social.Media/
https://www.youtube.com/user/AmericanInstituteTW/videos

，還是都找不到第一手資訊，有誰可以告訴我關於這段話的第一手資訊在哪裡？
是不是只是 "中央通訊社" 採訪 (?) 的內容而已？
我其實對新聞媒體的運作方式一無所知，只是想知道怎麼在必要時候自己爬到第一手資訊而已。

The background of this news is, China military jet crossed the Taiwan Strait Midline just for provocation, and USA government include John Bolton (Assistant to the President for National Security Affairs (NSA)) state that they opposes this kind of military provocations.

{ TED Talks }-[ Don't neglect your emotions. Express them — constructively! ]-{ Artūrs Miksons }: Link.
{ TED Talks }-[ How I'm making bricks out of ashes and rubble in Gaza ]-{ Majd Mashharawi }: Link. Keyword - women, building blocks, electricity. Also see [ video ]-[ Nowhere Safe in Gaza: Rockets and Revenge (Dispatch 2) ] and more "Dispatch" of Vice News from this play list.
( Video ) { 黃國昌 }-[ 馬自達爆漿熄火也需要戰神質詢？ ]-{ 國會調查兵團 }: Link.
( CSS ) [ A couple of cool things you can do with CSS position sticky ]-{ Kevin Powell }: Link. Maybe I can apply this design on my blog? Since my blog,, log table is "long", I can use this design to make my h2 headings more readable?
( Javascript ) ( Discussion ) Javascript had it's bad part and good part, make it do what is suppose to do: This is my comment from { 玩具烏托邦 }-[ 網頁爬蟲終極武器 puppeteer ]:

我什麼都不懂，愚人一個，不過我的一些小小看法是，如果嘗試某些方式試圖解決某個問題很多次後，還是無解，或是有解但是仍然覺得路很崎嶇難行，可能就是代表此路本來就不應該走 (一開始就走錯了)，而要改走別的路，不要硬闖 (即使硬要這麼走還是可以)。

讀本地檔 (比如讀 .json) 之所以不行，是因為 http 本來就是設計運作在 server-client 這樣的架構上的，所以無論如何一定要有一個 server, 手機上要用 Javascript 讀檔就裝一個 web server 在手機上。我之前也是在想這個問題，後來放棄了，直接接受 javascirpt 就是要運作在網路的環境下的語言，所以即使是這麼基本的讀檔，還是要架一個 webserver，request from webserver.

非同步 (Async) 就不講了，前面有人講過，這也是基於 http/網路環境本來就是一個 async 的環境，所以用 async 理所當然 (Event Loop 也是？)。之前我想要用 php 寫出一個 script，可以產生對話的效果 (程式跑起來後會問一些問題，我回答它，然後他會根據此回答做出不同的結果) (這常常應用在 bash script 上)，但是我不想要它跑在 command line 的介面上，而是 browser (web page) 上，而我一直想不出方法可以讓程式 (server) 在問出一個問題後中斷，等待我回答問題 (client)，然後再繼續 resume 執行 (server)，我怎麼想就是想不到怎麼做出這麼簡單的效果。後來我明白了，我當初的思維一直停留在 Block-IO 上，而 http 是 async 的，而且是 Stateless 的，Block-IO 基本上不可行，而 Stateful 本身是很糟糕的 design pattern (在 website scale up 後)。所以可能要用 javascript 的 async 解這個問題。這就是一該始思路就走錯了。

不過 Javascript 難學是真的，任何產品 UX/UI 設計的不好用起來就很不直覺，如果產品的 UX/UI 在設計時，沒有很努力的考量到一般人的習慣和常規，那用起來就不直覺 (使用者沒辦法不看說明書，用猜就猜出來下一步要幹麻)，然後就會感覺很複雜。所謂要讓某件事 "簡單" 有個要素，就是不能 "出乎意料"。就好像我們看到常見的播放按鈕比如 O << < || > >> 口，這些符號已經被一般人接受，習慣，內化及直覺化。如果產品的界面按照這些符號設計，用起來就很直覺因為使用者想都不用想，按下去的結果跟他們 "猜測" 的一模一樣，他們潛意識就會覺得 "好用"。但 Javascript 就不是這樣，當太多 "出乎意料" 的規則，語法，pitfall, nuance, quirk, special cases ... 要記時，就會感覺很複雜，難學，因為不符合直覺，不符合直覺有辦法推理的概念，沒幾次就忘了，然後又要再複習一遍 (應該是好幾遍，因為永遠記不起來)，所以 javascript 在這點上設計得很糟糕，非常非常糟糕，python 相比之下好多了，看了 1 2 3，就大概猜得出 4 5 6 要幹麻。

所以結論就是，我會認清 Javascript 的優勢在哪，劣勢在哪。優勢多加利用，劣勢就避免 (包括那糟糕的邏輯運算子)。之前好像有人說 Javascript 上可以跑 deep learning 之類的東西，我就想，也許吧，但這好像是 python 或其他低階語言擅長的，我不認為有 silver bullet 可以適用於所有領域.
( Video ) { 爸媽囧很大 } - 棄高薪和高位,孩子你在想什麼?: Link.

2019-04-05

Lean Production, and "what is Engineering?":
1. { Coding Tech } - Taking Back "Software Engineering", Craftsmanship is not Enough: Link. Comparing Mass Production and Lean Production, and talking about what is Engineering?.
2. [ Wikipedia ]-{ Lean Production }: Link.
3. { Slideshare } - lean-production vs mass-production: Link.
4. My conclusion: So the rule of collaboration between workers and adapting in the concept,, Lean Production, is so much against the rule of one responsibility and do one thing (only) and do one (that) thing well in the concept,, keep [ low couple]-[ high cohesion ]. Make me think that maybe not a good idea to always 100% follow that rule (keep [ low couple]-[ high cohesion ]), it might not be a good idea always 100% follow MVC design pattern. // And one more benefit about Lean production is, it solves the problem of alienation that Marx's theory talks about, we are human, we are not machine or a component of a module.
( Javascript ) { Modules }: A was so confused about the usage of default, *, ... as ..., even import ... from .... After read this helpful article, this article, { MDN }-{ import }, { MDN }-{ export } and many try and error, I finally get the rules to use it. (The concept itself is not hard to understand, but the quirk of rules is hard to guess). // So something like import {default as bar, foo} from "../fooBar.js"; (invoke with bar.smth and foo.smth), or import * as foobarrr from "../fooBar.js"; (invoke with foobarrr.default.smth and foobarrr.foo.smth), or import foobarrr from "../fooBar.js"; (invoke with foobarrr.smth) is all doable.
( Javascript ) { for (... in ...) } vs { for (... of ...) }: Notice the last example of Link.
( Video ) Real ATC, Southwest 1380 engine failure at 2018-04-17: Link.
( Video ) Real ATC, Southwest B737 MAX engine failure during takeoff: Link.
( Video ) 館長, 4/9號確定"賴清德"要來與館長做直播: Link.
Norwegian cruise engine failure accident and rescue, 1373 passengers: Link.
( Game ) { Hearts of Iron 4 }-[ 荷蘭篇(part03)最後一戰 END ]: Link. I had play HOI2 long time before, but now I don't have much time to play any game again, what a pitty.
( Music ) { Baba Yetu }-{ Christopher Tin }:
1. ( Music ) { Baba Yetu }-[ United States Navy Band ]: Link.
2. ( Music ) { Baba Yetu }-{ Christopher Tin }-[ official music video ]: Link.
3. ( Music ) { Baba Yetu }-{ Alex Boye }: Link.
( Music ) { Paradise (Peponi) } - { ThePianoGuys } cover - ft. { Alex Boye }: Link.
( Music ) { Elektronomia }-{ Sky High } [ NCS Release ]: Link. Focused, help for study.
( Music ) { Girls Generation }-{ Catch Me If You Can }: Link.
( Music ) { Weki Meki }-{ I don't like your Girlfriend }: Link. The rhythm is so strong and special, it is firm where it needs to be firm and is soft where it needs to be soft, short detail rythm and long background rythm mixing together [ perfectly ]-[ seamlessly ], I like the dance. Also see Yoojung cute & dance cover moment, the dance can tell something, the feeling and rythm is "accurate" and in good direction.
( Music ) { f(x) }-{ 4 Walls }: Link.
( Music ) { Girl's Day }-{ Oh! My God }: Link.

2019-04-06

( Video ) Hospice - { 最後這條路｜與其等死，我選擇付出｜三之二 } - { TheNewsLens }: Link. Keep watching the remaining part.
Building A Creative Career - { Coding Tech }:
1. Link: Link.
2. 15:54: Link. Be good first then be original. For example play covers of you favorite music before writing your own song.
3. 21:13: Link. If you are stuck, you are probably missing a person (that can make a huge improve for you in a very short time). It's often a person that unlocks the next door, a next relationship, for you. Sometimes it's just the right book to pickup.
4. 26:11: Link. Your career will have many doors (many entries, instead of just typical one people thinks). Keep an eye open for them.
( Video ) { TED Talks } - Your brain hallucinates your conscious reality - { Anil Seth }:
1. Link: Link.
2. 08:24: Link. Hallucination is uncontrolled perception, perception is controlled hallucination.
3. 08:44: Link. If we agree with our hallucination, we call it "reality".
4. 10:56: Link. ... is enough evidence for the brain to make it's best guess the fake hand is in fact a part of the body.
( Javascript ) The Evolution of Async JavaScript: From Callbacks, to Promises, to Async/Await:
1. Link: Link. The text (article) version of this video is here.
2. 35:17: Link. Notice the resolve() callback (inside Promise constructor),, you can not only pass a string to it, but also an object. So with this you can pass some result you get in "first stage" (first Promise), to be the "fuel" to feed the "second stage" (second Promise).
3. 38:39: Link. From Promise to Async function. Notice, Async function itself (not the resolved value retrieve from await) will return a promise object, and if any await code inside this async function been rejected, the async function will immediately stop the execution of remaining code (remaining code of this async function) and return a promise object that could be catch by catch(), put it simple with example code - anAsyncFunction().catch(doSomethingElseAfterAnyAwaitFoundRejected);.
4. My conclusion about chainning: So chained promiseObj.then().catch() ... is possible, like this returnANewPromiseObj().then(ifResolve1).catch(ifReject1).then(ifResolve2).catch(ifReject2); (which ifResolve1, ifReject1, ifResolve2, ifReject2) is all callback function, and ifResolve1, ifReject1 will always return a second (new) Promise object. Or you can use like this - returnANewPromiseObj().then(ifResolve1).then(ifResolve2).catch(ifReject1And2);, to merge all rejected actions together.
( Javascript ) Why I have to use { finally } block when I can just put these codes behind { catch }?: Link.
( Javascript ) { Fetch API }:
1. { Fetch() } - { MDN } - "The Can Store" example: Link. A nice, simple, but yet complete example, to run through not only Fetch API, but how to write a more elegant and easy-to-manage code.
2. { Fetch() } - { MDN } - using Fetch: Link.
3. { Fetch() } { resolves } even if http status code is 404?: Link.
4. { Fetch() } request timeout?: Link.
5. { URL.createObjectURL() } - 不用後端，前端便能產生獲取指定物件的網址: Link.
( Javascript ) Check if an element is present in an array: Link. Use indexOf(), or includes(). If your array have object elements (instead of string elements), and you want to further find inside that object (see this data structure example), you can use myArray.find((o) => o.hasOwnProperty("targetFindingProperty")).
( Video ) { She's Danni } - Weekly Vlog 36 一个艰难的决定: Link. I'm a bit like this kind of personality, the rationality and principle side.
( Video ) { The Academy Irish Dance Company } - Dublin Irish Festival 2016: Link.

2019-04-07

( Video ) 大腕、高官、演員全揪出！南韓性侵 #MeToo 火在燒 (multiple influential sexual scandal in South Korea): Link. This make me think about the story of Elizabeth Holmes, founder and former CEO of company Theranos. I learn this again and again - when we (I) believe something, we should always believe by objective evidence and logic, not how "trusty" the story, speech, feelings seems like. latter one often been exploited by vicious and high intelligent people who know (how to play) psychology very well, they can build a long vivid story, while no any word is true, in front of you in real time. But after the scandal been revealed, you will stunned not by the bad thing itself, but about how these people are able to tell (and mantain, evolve) such a story that totally different and conflict and contrary to their behavior and their real personality (perhaps these story are too real that even the liar themselves start to believe these lies too). These kind of case extend even to religious, charities, judiciary, medical ... (yeah, unbelievable isn't it?) and they are not rare case in these field, and it is too hard to believe it is ture because the place it happens, the roles they are, the story they made, are so conflicting.
( Video ) ( Gamming ) 外掛種類大全, 你知道遊戲外掛都有哪些嗎? (Game cheat plugin): Link. Not talking the ethics issue here, but the creativity of problem solving of these nerd (who design the cheat plugin) is indeed somehow hilarious.
( Javascript ) ( Pitfall ) Example of a Javascript Closure: { setTimeout() } Inside a { For Loop } : Link. OMG, I step on the pitfall stupid like this, even I learned this before.
( Javascript ) { Vue JS } crash course - 2019 - { Traversy Media }: Link. Almost finished it. Now I'm start to plan to keep moving to learn new things.
( Javascript ) { FormData } object: Link.
( Javascript ) Putting trailing commas behind last object, function argument ...: Link.
( Music ) { Elektronomia }-{ Sky High } [ NCS Release ]: Link. Focused, help for study.
( Video ) ( Game ) { Age of empire 2 } - { Viper } vs China: Link.

2019-04-08

Thinking about "incremental learning" vs "iterative learning". Thinking about stick with a "curriculum" for learning webdev:
1. "Incremental" vs "iterative": Link.
2. ( Webdev ) Welcome to the { freeCodeCamp } curriculum: Link. Ok, I decide I will stick with curriculum of freecodecamp.org start from today, it is a complete roadmap/planning even including Coding Interview Preparation course. But I don't have 1,600 Hour, I just have 3 month, so I will pick the most crucial topic I really should know first, and learning iterative instead of incremental. If I have time later I will come back to learn something more advanced like data structure, algorithm, security ...
3. ( Webdev ) [ 100 days of code frontend ]-[ curriculum ]-{ nas5w }: Link. If you have spent any amount of time in the past trying to learn web development or a similar skill, you have likely exprienced going down a rabbit hole on any one particular topic. This repository aims to assign a certain number of days to each technology and encourages you to move to the next once that number of days is up.
4. ( Webdev ) { DevelopIntelligence } - curriculum - { Vue.js }: Link. Might be useful to find out more content not only Vue.
My rough schedule and estimation (keep changing):
1. Total available time: 90 days.
2. Javascript fundamental: ?? days.
3. JQuery: ?? days.
4. Vue.js: ?? days.
5. Nodejs: ?? days.
6. Express.js: ?? days.
7. Git and deployment: ?? days.
8. Database: ?? days.
9. Algorithm and data structure: ?? days.
10. Webpack: ?? days.
11. { Less } ( CSS pre-processor ): ?? days.
12. Side project 1: ?? days.
13. Side project 2: ?? days.
14. Side project 3: ?? days.
15. Side project with Woody for visually impaired people: ?? days.
16. Resume: ?? days.
( Politic ) President { Barack Obama } went to Africa, and make first strong criticism about { Trump }: Link. Barack Obama went to Kenya after retired from president. He said (imply) Trump is a lier, nowadays politician lies and they don't get shame, this didin't happens before. Yeah this is so true, something like Trump "don't believe" the Global Warning is the [ biggest ]-[ most reliable ] [ evidence ]-[ clue ]-[ thread ] I can tell if a politician like him is lying. Global Warning is a fact baced by science, it is undoubtable fact, it is objective.
( Video ) { 四端紅人會 } - 敏實集團董事長 - 秦榮華 - 20180406: Link.
( Music ) { Coldplay } - { Something Just Like This } - piano cover - by Ray Ma: Link. Very steady and predictable feeling, suit for studying.

2019-04-09

2019-04-10

2019-04-11

2019-04-12

( Video ) 【不止遊戲】遊戲中騎士的板甲真的那麼靈活和堅實嗎？ (Plate armour of knight): Link.

2019-04-13

( Vue.js ) { Vuemastery } - style and class binding: Link. So style and class attribute in html element, can not only bind to a value, but also an object (or multiple object). Also, you can apply multiple bindings on same style and class attribute, for example give a div element class apple and class bear at the same time.
( Vue.js ) { Vuemastery } - Computed Property: Link. Property that you use it as same as other normal property, but it is more efficient, so browser don't have to start over to exectue method everytime something changed. // I think I get what Vue ,, Computed Property, is for, you want to define a property, but the value of that property is not fixed, but based on some calculation or return of some codes.
( Vue.js ) { Vuemastery } - { v-model }: Link. Unlike v-bind is one-way data binding (from parent component to child component), v-model is two-way data binding. (Not sure if v-model = v-bind + emit).
( Vue.js ) { v-if }, { v-else }, { v-else-if }, nested { v-if }, { v-is }, { v-show }: Link1, Link2. Those are very important basic functionality.
( Vue.js ) Object changed detection caveat: Link. --{ Due to limitations in JavaScript, Vue cannot detect the following changes to an array ... }--, --{ Again due to limitations of modern JavaScript, Vue cannot detect property addition or deletion ... }--.

2019-04-14

( Music ) ( Classical ) { Tiffany Poon } - Bach Partita No.2 in C Minor, BWV 826: Link.
( Video ) 【不止遊戲】「不準後退一步！」二戰蘇聯第227號命令真相 (how Soviet Union deal with deserter): Link.

2019-04-15

( Vue.js ) { Watcher }: Link. This is how you monitor the data (any variable), and do something. You monitor the data (any variable) and if they changed, it invoke a function immediately. // Also see { Computed Property }.
( Vue.js ) { Created } hook: See this time point. A function will executed when component is rendered?
( Javascript ) Does Javascript Passing by value or passing by reference?: See Link1, link2, it is a bit complex in background of how it really works, but there is only 3 ruels you need to remember, the primitive types (number, string, etc.) case, object case, redeclare object structure case. Also notice array is object too.
( Javascript ) ( Fetch API) ( http ) { Cross Origin Resource Sharing (CORS) } problem:
1. Cross Origin Resource Sharing (CORS) - { MDN }: Link. Same Origin Policy. This is why you see error message Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://images.dog.ceo/breeds/hound-basset/n02088238_1731.jpg. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). in web console when you access blob data from different Origin in front-end. // So the source problem is Same Origin Policy, if the server didn't have set up CORS response header, then your client side can't request this kind of Origin with fetch(myUrl, {mode: "cors"}).
2. { Access-Control-Request-Headers } and { Preflight request }: Link1, lin2.
3. { Access-Control-Allow-Origin } header and { JSON padding (JSONP) } : Link. Bypass the Same Origin Policy.
4. Add Content-Type in header will cause a OPTION request: Link. So the source problem is still Same Origin Policy, if the server didn't have set up CORS response header, then your client side can't request this kind of Origin with fetch(myUrl, {mode: "cors"})..
5. ( Javascript ) { imageObject.onload = callbackFunc } and { imageDomElement.onload = callbackFunc }: Link. Do something after make sure an image is fully loaded.
6. ( Javascript ) Stop using { console.log() } for debugging, it's broken: Link. Oh, so this is the first time I know there is extrak debugger, are they special software need to installed seperately? Still have no clue about it yet.
7. ( Javascript ) How to clear all { console.log() } with just few lines of code: Link1, link2.

2019-04-16

( Video ) Hospice - { 最後這條路｜留住每一個當下的美好｜三之三 } - { TheNewsLens }: Keep watching the remaining part.
( Video ) { She's Danni } - Weekly Vlog 37 - 去华大看樱花🌸只有女生可以参加的会议 - DIY青团:

2019-04-17

( Music ) ( Classical ) Beethoven - Concerto pour piano n°3 - Alice Sara Ott / Orchestre philharmonique de Radio France: Link. That pianist is highly focused (and hihgly diffuse at the same time). // Disease - In February 2019, Alice Sara Ott announced on Instagram that she had been diagnosed with { multiple sclerosis }.
( Music ) ( Classical ) Tiffany Poon cover - Bach - Partita No.2 in C Minor, BWV 826: Link. This girl is highly focused too.

2019-04-18

2019-04-19

What is the most lightweight browser?: Link.
{ Midori } browser: Link. Yeah, very light weight, not using noticeable memory at all.
Installing { snap } (snapd) and using { snap }: Link.
Julian Assange been arrested in United Kingdom: Julian Assange.
( Programming ) ( Javascript ) Data Structure and Algorithms in Javascript: Link. Suggested by Jahirul Islam, not research on it yet.
( Music ) ( Game ) { Hearts of Iron 2 }:
1. { Andreas Waldetoft } - { Overture }: Link.
2. { Andreas Waldetoft } - { The Front }: Link.
3. { Andreas Waldetoft } - { Kriegsgewitter }: Link.
4. { Andreas Waldetoft } - { The R.A.F. }: Link.
5. { Andreas Waldetoft } - { Airborne }: Link.
6. { Andreas Waldetoft } - { Leaving Shore }: Link.
( Game ) { Stardew Valley } : Link. I'm just curious about what different type of game look like.

2019-04-20

( Javascript ) Check if an element is present in an array: Link. Use includes() (link) ([ ECMAScript 2016 ]-[ ES7 ]), or indexOf(), or . If your array have object elements (instead of string elements), and you want to further find inside that object (see this data structure example), you can use myArray.find((o) => o.hasOwnProperty("targetFindingProperty")).
Cleaning my keyboard:
1. Before:
2. After:
3. What I learned: Porblem solving experience, and how to trouble shooting by logic and resoning. I tried to put back all the keyboard buttons without reference the photo I took before I took them off, the keyboard buttons are in fact a bit different (height, with or without scissor foot ...), by [ guessing ]-[ making asumption ], resoning, narrow down the possibility, I can gradually put all 100 keyboard buttons back, even I'm not familiar with them very well.
( Video ) { TedTalks } - { 曾博恩 } - 興趣沒有目的地 : Link.
( Music ) { 周杰倫 } - { 七里香 }: Link.
( Video ) { She's Danni } - Weekly Vlog 38: Link.
( Video ) { She's Danni } - 一波三折的拉斯维加斯两天三夜 - 周杰伦演唱会: Link.
( Diagram ) Causal Loop Diagrams: Link. A bit similar to cocept map. The basic elements are the same.

2019-04-21

{ The News Lens } - 巴黎聖母院大火與大整修計畫 - (Notre-Dame de Paris on fire): Link.
( Media ) { 新唐人亞太電視 }: Link. I keep this because they mentioned about democracy, media unfreedom of China , 1989 Tiananmen Square protests (64 天安門事件) and "president" (of Taiwan), it imply this media is somehow worthy to trust, though I still not doing further research about this media. // They offer more world overview, not focused on local news.
( Video ) Miles Guo and Steve Bannon, a dialogue on Terry Gou’s presidential bid - (2019年4月20日班农先生与文贵谈郭台铭选台湾总统): Link. Miles Guo successfully predicted Terry Gou’s (郭台銘) (Foxconn founder and CEO) will candidate the 2020 Taiwan’s presidential election. // 15:34, what is the clue Miles Guo based on at that time, to predict this possibility?
( Video ) Corgi (dog) races in Canterbury Park in 2016: Link.
( Game ) 踩地雷 - (Minesweeper): Link. I'm not interesting the game itself, I'm just thinking other things like, in every field, people could dive as deep as possible. And there is always some people that is highly focus on thsoe field, they never give up. And such "simple" looking game like Tetris and Minesweepercan could be very hard to [ design ]-[ programming ], I might had just heavily underestimate the logic and complexity it tooks for these "stupid simple" game, before I have some degree of self awareness of how stupid I'm was, about the real coding and complexity behind.
( Javascript ) Several standard way to deep clone an object: Link. So ES6 ,, Object.assign() is useless for me since it only do "shallow clone". And using JSON.stringify() then JSON.parse(), "hack", has intrinsic drawback that don't support some javascript object. So I think I will do this stuff with jquery library ,, $.extend(), or lodash library.
( Vue.js ) How to use JQuery (or other library) inside Vue: Link.
( Video ) { 館長 } - 中壢館，工程中: Link. 只有一個字，大。

2019-04-22

( Dog ) { Tracking dogs } and { trailing dogs }: Link.
( Dog ) { Guide dog } puppies personality test: Link. An ideal guide dog, has personality in the middle of extrem introvert and extrem extrovert.
( Game ) { 隻狼 }: Link. I'm trying to extend my view about different type of game (any game) (even I won't play it at all), instead of just what I was used to.
( Music ) { relaxdaily } - calming piano - #1907: Link. Not distracting, suit for studying and focusing, because I will not notice the music is playing.
( Music ) { DooPiano } - piano cover - { Blackpink } - don't know what to do: Link. Not distracting, suit for studying and focusing, because I will not notice the music is playing.
( SpaceX )Why does the SpaceX droneship camera cut out?: Link. I doubt any supporting [ statement ]-[reason ] for this, because this kind of technology and solution (any solution) should already be so stupid dead easy, for a company that can remote control vehicle that is way far from earth in the space, still this had happened many times (the live video cut off in the crucial moment). I trust with nobody, I trust with the truth and reasoning.
( Politics ) { 館長 } - 20190421 - 郭台銘選總統也不投他 - 富士康竟設共產黨支部完全不像個台灣人，也不適合當總統: Link.

2019-04-23

( Music ) ( Classical ) Tiffany Poon plays Chopin Concerto No. 1 in E Minor Op. 11: Link. Highly diffuse.
( Music ) ( Electronic ) { Elektronomia } - Sky High - NoCopyrightSounds: Link. Highly focus.
( Music ) ( Electronic ) Tobu - Colors: Link. Highly focus.
( Music ) ( Pop ) 蔡依林 (Jolin Tsai) - 迷幻 (Fantasy): Link.
( Music ) { Girls Generation } - { Catch Me If You Can }: Link.
( Music ) ( Symphony ) { Thomas Bergersen } - Colors of Love - album Sun: Link.
( Cabling ) { Technimove } doing cabling - before & after: Link. Maybe it is similar to refactoring in programming, human eyes and mind just can't understand the visually complex or unpredictable things, sysmtem, structure, make anything predictable and conventional and reduce the elements number happens at the same time, might helps the understanding of complex code base.

2019-04-24

( Music ) ( Electronic ) Tobu - Colors: Link. Excellent piece.
( Music ) ( Electronic ) Tobu - Colors - Fl Studio { Remake } - orchestration: Link, link2. Electronic music is stupid simple? This is as hard as "engineering". Maybe I'm too underestimating everything that "looks simple", just as same as how long it takes to write dead simple web apps like my current project Doggo, the apps looks like so dead simple at first (guess the breed of dog image, how hard could it be?), but when I dive deep down, I found it is a complex system to design and have to consider so much components, states, and logics working behind it, in one component it reach 1000 lines of code, not to mention the keep delaying due time. Simple things could be not simple at all.
( Music ) ( Electronic ) Tobu - Life - NCS Release: Link.
( Music ) ( Electronic ) Tobu - Sound of Goodbye: Link. More peaceful, and monotone, idea for study.
( Music ) ( Electronic ) Tobu - Seven - NCS Release: Link.
( Music ) ( Electronic ) Kovan & Electro-Light - Skyline - NCS Release: Link.
( Music ) ( Electronic ) Elektronomia - Sky High - NCS Release: Link.
( Music ) ( Electronic ) Jim Yosef - Firefly - NCS Release: Link. Can focused.
( Music ) ( Electronic ) Jim Yosef - Lights - NCS Release: Link. Can focused, ideal.
( Music ) ( Electronic ) Janji - Heroes Tonight (feat. Johnning) - NCS Release: Link.
( Music ) ( Electronic ) Ahrix - Nova: Link.
( Music ) ( Electronic ) Disfigure - Blank VIP (feat. Tara Louise) - NCS Release: Link. Distracting.
( Music ) ( Electronic ) Sia - Move Your Body - Alan Walker Remix: Link. Higly distracting.
( Music ) ( Electronic ) Coldplay - Hymn For The Weekend - Alan Walker Remix: Link. Higly distracting.
( Javascript ) { Number() } and { parseInt() } : { Number() }, { parseInt() }.

2019-04-25

( Music ) ( Electronic ) Tobu - Colors: Link. Excellent piece.
( Music ) ( Electronic ) Tobu - Colors - Fl Studio { Remake } - orchestration: Link.
( Music ) { IZ*ONE } - La Vie en Rose: Link. Dance practice. The dance is natural, loose (diffuse) but in control. And this is when you control too much, and have no enough loose part, it becomes too tense. Balance between predictable and unpredictable is hard.
( Music ) { IZ*ONE } - Violeta: Link. Loose but in control.
( Music ) { IZ*ONE } - Rumor: Link. Loose but in control. Also see { IZ*ONE } - Rumor - Sub-Unit - Line Distribution to see how complicated the orchestration is, behind this kind of "natural". And here only counts 5 units (members), not to mention the complexity of orchestration when full units (members) (12) join together.
( Music ) { TWICE } - FANCY: Link.
Network is off at my renting room:
1. About: 網路斷線，時間從昨天 22:00 到今天早上 09:00 一樓數據機重新啟動為止。問題：停電 (不確定哪裡停)，導致 1F 數據機跳掉？導致整棟樓都沒網路，但因為只有少數人上網，且是在離峰使用時段，所以沒有人 complain。房東兒子 09:00 時到店裡把 1F 數據機重啟後，我這邊的網路馬上正常。代表不是我電腦的問題。
2. 但可能不只一個問題點: 有可能不只一個問題點，這次是跳電問題 (也不知道他們的跳電是那裡跳？是整個電力系統跳？)，因為 6F 的 HUB 那裡也可能有不定期問題。將來再看，但至少這次不是 6F HUB 的問題。
3. 這次我電腦的網路設定: DHCP, 根本沒做任何設定就自動可以連上，電腦直接插房間來源網路。
4. 測試連線 - PC 到 Gateway: PC ,, network setting ,, IPv4 ,, Address 的地方由 DHCP 改成 Manual, 填入 Adress 192.168.21.1, Netmask 255.255.255.0, Gateway 192.168.0.1, 然後 DNS 和 Routes 那裡不用填，保留 { Automatic } to { ON }. // 完成後，用 browser request 192.168.0.1, 會出現 [ D-Link ]-[ WBR-2200 ] router 的界面 (1F 的， maybe)。但是此時不能 request www.example.com, 即使 DNS 的 { Automatic } 以切換成 { OFF }，然後填入 8.8.8.8 也還是不行，即使 Netmask 由 255.255.255.0 改成 255.255.0.0 也還是不行，不知道為什麼，真奇怪，如果說 IP address 設錯了，不能 access www.example.com 可以理解，但為什麼還可以 access 192.168.0.1？真奇怪，不解。
5. 測試連線 - PC 到 Internet (with Domain Name): PC ,, network setting ,, IPv4 ,, Address 的地方由 DHCP 改成 Manual, 填入 Adress 192.168.0.122 (隨便填的網址) (至少試過了 192.168.0.21 ~ 192.168.0.245 都可以，但是 192.168.21.1 不行), Netmask 255.255.255.0, Gateway 192.168.0.1, 然後 DNS 和 Routes 那裡不用填，保留 { Automatic } to { ON }. // 完成後，用 browser request 192.168.0.1, 會出現 [ D-Link ]-[ WBR-2200 ] router 的界面 (1F 的， maybe)。但是此時不管是 1. 把 DNS 的 { Automatic } 以切換成 { ON }, 2. 把 DNS 的 { Automatic } 切換成 { OFF }，然後填入 8.8.8.8, 3. 把 DNS 的 { Automatic } 切換成 { OFF }，然後填入 192.168.0.1，皆可 request 到 www.example.com。
6. 測試連線 - 房間的網路線，硬體本身: 房間只有給 source 網路孔，裡面的網路線都是我買的，其中一條確定有一個端口 (防呆彈片斷掉的那端)，某一個角度下會 100% 導致斷線，所以 100% 確定那端在某種角度是會接觸不良，不過另外一端良好。 // 另外一條短的網路線，接頭上只有 4 個 pin, 而不是 8 個，但還可以上網! 不知道是什麼巫術。 // PC 端 ,, 網路線的頭插上後，不管怎麼搖晃，始終亮綠燈，代表 PC 的網路 (母) 接頭沒有問題。
7. 跟房東溝通，與主動解決問題的經驗: 早上 07:30 時，打電話給房東 3 次，最後一次問他大概什麼時候會來 (店裡) 看的時候，他很情緒化 (大概是主觀的認為是認為網路斷線問題是我這邊自己產生的)。於是我跟他解釋，我們兩方都不知道問題在哪裡，但是我們都不想浪費時間，而比較好的方式是一段一段分析，把問題找出來，不然將來我們都會需要再浪費時間在這個問題上。而且未來住進來同一間房間的房客一樣會有這個問題。 // 不過這次確定是 1F router 因為 "跳電" 而導致異常。不確定未來會不會再出現問題，然後不知道問題點是否是數個。這種 bug 最難找，沒有條件式的復發性，而且一次有數個問題而不是只有一個，在整個線路上，這種相當難偵錯。// 這次房東處理態度 "一開始" 是消極的，如果沒有我自己 trouble shooting and reasoning and find the [ truth ]-[ fact ]，不斷考慮著最不浪費時間的解法還有當機立斷跟房東 make suggestion 而不是等到其他人下班回來再問他們是否都可以上網 (然後再來解決)，我想這個問題可能一拖就是好幾天，好幾天的生產力！問題不會自己解決，不主動解決問題，問題就會解決你。

2019-04-26

( Music ) { IZ*ONE } - Rumor: Link.
( Dance ) { IZ*ONE } - Jo Yuri (조유리) - Violeta: Link.
( KPop ) ( Funny videos ) 韓國愛豆們舞台失誤後的可愛反應！超好笑 - DenQ: Link.
( Music) ( Math ) 音樂也有科學道理？Do、Re、Mi...都是如何確定的？李永樂老師講音律: Link.
( Video ) { 看电影了没 } - { 徒手攀岩 } - 要么登顶，要么死 - 酋長岩: Link. 生命的意義是主觀的，客觀上是不存在的，你認為是什麼它就是什麼。而且應該是反過來，是你去 "定義" 生命的意義，而不是 "尋找" 生命的意義，因為它是主觀的。
( Video ) { She's Danni } - 攀岩: Link.

2019-04-27

- How do you eat an elephant: I have this thought coming out after watching the talk 王佑哲 Eugene Wang - { Inside } 共同創辦人 - TEDxNTUST. You eat an elephant bit by bit. Only through modularization and components then you can design and manage a complex system. Only through fragment the time schedule then you can finished the project before dead line. Only through lower down the cognitive load of every habits, then you can deal with procrastination and overcome the reluctance. // Natural is always complex (not simple) in natural, and human perfer simple all the time. When human have to face complex natural, they often figure out some tips, design pattern, solution, to deal with complex (is in all natural) problem, with simple (human friendly) way. This is why the wisdom "Less is More" is so true in many aspects. But I think we need to understand, simple is by designed (by human), it is not how natural works. Natural tends to be complex and multiple dimensional inherently, and human tends to like simple things inherently. When we can find out a specific simple solution to deal with a specific complex natural, they "matched" excellently and that solution will be considered as a good solution.
( Video ) { Tiffany Poon } - Vlog - How to Balance School + Piano - #07: Link. Time management, discipline and rationality, always planning ahead, setting priority and only focus on the important thing.
( Music ) ( Classical ) { Tiffany Poon } - Beethoven Sonata Op.10 No.3: Link.
{ Traversy Media } - Quality youtube channel about web development: Link (original title: My Top 10 Learning Methods For Self Taught Developers). Including The Net Ninja, DevTips, LevelUpTuts, Academind, DesignCourse (art, graphic design), Coding Tech (conferences, talks), Dylan Israel.
( Webdev ) A road map (mind map) of Front-End, Back-End, Dev Ops: Link. I keep this not to know everything, but to have enough vision to know what to learn (few) an what not to learn (most).
My rough schedule and estimation about front-end job (keep changing):
1. Due time: 2019-06-30.
2. Javascript fundamental: ?? days.
3. JQuery: ?? days. Don't need to know it well, just learn when in need.
4. Vue.js:
  1. Estimate it takes: ?? days
  2. Current state: Have understand fundamental. Now try to learn { Vuex } ("maybe" this is a must-leanted), { vue-router } if needed.
5. Nodejs: ?? days. Must know.
6. Express.js: ?? days. Must know.
7. Git and deployment: ?? days. Could be practice when collaborating with Pollash and Woody.
8. Webpack: ?? days. Must know.
9. Database: ?? days. Use mysql, and find the way to do object programming with database, instead of low level SQL language.
10. Algorithm and data structure: ?? days. Maybe no time to learn this at all. But if I need to learn, learn Data Structure and Algorithms in Javascript - dsa.js - suggested by Pollash first.
11. { Less } ( CSS pre-processor ): ?? days. Optional.
12. Side project { Doggo }: Estimate finished in 2019-05-03, and freeze it without doing huge improvement, without doing iteration (v2, v3 ...). I should spend time on new projects, multiple projects, instead of polishing the same one to excellent.
13. Side project 2: ?? days.
14. Side project 3: ?? days.
15. Redesign my own CMS: ?? days. Wow, this might cost me a month, at least (might even a lot more than this).
16. Side project with Woody for visually impaired people: ?? days. Must done, to put commitment and obligation to practice.
17. Resume: ?? days.
My next goal: Node.js and Express.js, they will help my next project - rewrite my own CMS.
( Music ) ( Game ) Relaxing { Stardew Valley } music: Link.
( Javascript ) How to { bind } { this } to a setTimeout ,, callback function: Very simple, just setTimeout(function () { ... }.bind(this), 2000);. // I don't know I can write syntax like }.bind before (I thought I have to use self-invoking tricks, making 2 functions, outer function return inner function, then use .bind()). // It seems you can't use ES6 arrow function to replace that function () ... part for this one, this kind of syntax don't work on ES6 arrow function (at least for this one). // Another tricks is use like this - var that = this; setTimeout( function() { that.foo(); }, 1000);.
( Vue.js ) Why mutating { props } is anti-pattern, and what is the solution?: Link. This is by designed (intended), because if one property is allowed to be changed by multiple potential components (sync, like v-model), if something going wierd and you want to find the source of problem, you will found you can't find it! That property have been written everywhere (by so much components). You need to use event (emit?) to update child component data to parent component, and the real update will happens in parent component.
( Vue.js ) { v-model }: Link. Very good, simple, clear explanation!
( Vue.js ) { Events }: Link.

2019-04-28

( Philosophy ) The narrow "Zone" of lifestyle: 看完館長的壓力不是大家能了解的，一年工作365天，賺再多錢其實一點也不快樂! 後，我開始思考一個問題。 // 人生的規則處處充滿悖論和矛盾，很多規則並不是順著邏輯在運作的 (所以你會一直抓不到人生的正確的規則是什麼)。另外，快樂和幸福可以用 "曖昧" 這個概念來比喻，你愈想主動追求它 (快樂)，它就會消失，你如果放棄追求它，它又跑過來主動靠近你，但如果你又想靠近，它又開始跑遠 ... 。這樣的情況是不能靠邏輯推理出來的，人生的規則根本是一場謎，難以理解。// 我的猜測和假設是這樣 - 大約知道的通用規則是，作為一個 "人" 這樣的一個奇怪的物種，我們只能讓自己維持在一個非常特定狹小的區域，狀態，生活模式 (我簡稱 "Zone")，這樣我們就可以獲得快樂和幸福。而如果我們的生活方式超出這個 Zone，我們只會在人生裡面感受到更多的痛苦。這個 Zone 通常包含 - 在追求一個目標，永遠高度專注在某事 (活在當下)，在做的事情有挑戰性，在做的事情是有意義的，有跟社群 (其他人) 有某種連結關係，不主動追求快樂 (而是被動的讓快樂來找你) ... 所以，錢多不多就不太是重點了，因為錢多，不代表就會進到這個 Zone 裡面。不過我們在自然情況下是不會刻意的讓自己保持在這個 Zone 裡面的 (享樂是人的天性之一)，只有當我們意識到 (並且有足夠的人生經驗，以及教育)，人生要得到幸福，唯一辦法只能讓自己進到這個 Zone，我們才會刻意 (非自然) 的每天讓自己保持在這個 Zone 裡面。
( Science ) Why porn changes the brain: Link.
( Music ) ( Classical ) Kate Liu - Andante Spianato and Grande Polonaise Brillante in E flat major Op. 22 (second stage): Link.
( Music ) ( Classical ) Tiffany Poon - Bach Partita No.2 in C Minor, BWV 826: Link.
( Music ) ( Classical ) Beethoven - Concerto pour piano n°3 - Alice Sara Ott / Orchestre philharmonique de Radio France: Link. // Disease - In February 2019, Alice Sara Ott announced on Instagram that she had been diagnosed with { multiple sclerosis }.
( Music ) ( Electronic ) Tobu - Colors: Link. Highly focus and dedicated.
( Vue.js ) Pitfall of thinking you have to keep parent and child component ,, data ,, syncing:
1. I finally accept: I finally accept and understand that we don't need to sync between parent and child compoent ,, data.
2. By reading material: After reading 三種子組件向父組件中傳遞數據的方式, Pass object via props: Reference vs. emit value best practices, and vue ,, .sync Modifier, I get this conclusion.
3. Experiment: I tried to make a for loop in child component, inside this for loop, I keep updating props that come from parent with emit event, I also have a emit handler in parent component to update this data (to what child feeds) when the emit is triggered. // The result of this experiment is, unless I use Async and Await to make a little delay after each emit, it will not sync in real time (for loop is running too fast)
4. Final solution: You don't need to update child data to parent data in real time (for example, you don't need to emit in every loop of for loop, this will be async since emit is event based, not io-block based), you do some calculation in child component, and when all calculation is finished, you push it to parent once.
5. Pitfall of passing reference to child component using props: In the link, they mentioned you can pass parent component object to child component using props (since it is object, it is passing reference, instead of value), if you try to modify (mutate) that props, it works and vue don't complain about this! (vue can't detect this)! In fact because of passing reference, this make the data sync in real time (since they are same object at all), but this is very bad idea, it causing anylysis very hard, so don't do this. I wrote my Doggo project like this at first, it works but it is bad practice, don't use like this.
( Vue.js ) Differences between { Computed } and { Watch }: Link.
( Vue.js ) { Computed } ,, { getter } and { setter }: Link1, link2. I'm little surprised about { Computed } property can be set (by { setter }), and this will be two way binding.
( Vue.js ) { Reactivity } in Vue (and its pitfalls): Link.
( Vue.js ) { Reactivity } and { Vue.set() }: Link1, link2. Still don't know much, and the real use case, about this. Just keep it saved for in case I need this. // It mentioned about you can use the shorthand this.$set().
( Vue.js ) { Reactivity }, array methods that Vue's { reactivity } supports: [那些關於 Vue 的小細節 ] 為什麼畫面沒有隨資料更新 - Vue 響應式原理（Reactivity）。裡面提到 - "陣列部分：利用陣列索引直接設值時 ...", "使用 Vue 可觀察到的陣列方法 ...", "push()、pop()、shift()、unshift()、splice()、sort()、reverse() ...".

2019-04-29

( Music ) TWICE - LIKEY - { Smyang Piano } cover - mist version: Link.
( Music ) TWICE - LIKEY - { DooPiano } cover: Link.
( Music ) TWICE - LIKEY - [ orchestration ]**[ re-arrange ]**[ remake ]:
1. { JunMan } remake: Link1, link2.
2. { 556pm } remake: Link.
3. { Nomimuhi } remake: Link.
4. { Inulloid } remake: Link.
( Music ) Twice - Heart Shaker - { AZWZ } remake: Link.
( Video ) { TED-Ed } - How do dogs "see" with their noses? - Alexandra Horowitz : Link.
( Node.js ) Node equivalent of { python -m SimpleHTTPServer }?: Link. npm install http-server -g, then http-server.
( Vue.js ) Deployment of Vue apps: Link.
( Vue.js ) { vue.config.js } ,, common properties and description: Link.
( Git ) ( Problem solving ) Fatal: 'origin' does not appear to be a git repository: Link. Use git remote add origin url/to/your/fork to "define" what is "origin" in your .git/config first.
( Git ) { git init }: After git init, you will found current working directory have an extra .git file added.
( Git ) { git add -A }: I don't know the use case.
( Git ) { git push -f }: Link. -f means "force", it overwrite remote repo even without warn you to pull first. This is useful when you deploy to gh-pages (because it is one way), but you got to be careful don't do anything wrong with this option.
( Git ) Push commits to another branch: Link. The key is that master:gh-ages syntax.

2019-04-30

190430 ( Programming ) My first { Vue.js } project { Doggo } # 190430m135836: Link. The project is initially done and Deployed.

190430 ( Problem solving ) How I solved { vue } deployment ,, index.html ,, src path ,, sub-domain path missing #190430m120918: Link.

( KPop ) { TWICE } TV - { SIXTEEN } - Episode 3 - Part 9

Link: Link.
About this series: This is actually very long full series, all the way through Episode 10.
What I'v learned: At first, I thought, all [ music group ]-[ stars ]-[ celebrity ] are "artificial created" and could be "hyped", [ faked ]-[ make up ]. But I think I'm wrong, from this series, I start to know JYP are looking very specific type of inherently personality during selection, those personality could not be [ faked ]-[ make up ], they have to be natually inherited, because things that is by [ faked ]-[ make up ] could not last long and could be recognized by audience in final no matter how. // So yes, they are stars and every member in 9 is unreplaceable and important, none is the best and could cover the whole game, they have their own ((different)) role for the bigger image. We can't have a team which members are all having "strong" image, we need "soft" part too, otherwise it is not good balanced. Few members in Twice was placed at that "soft" part (role) and that is import.

( KPop ) Becoming TWICE is not easy - { Mina }: Link.

( KPop ) Becoming TWICE is not easy - { Jihyo }: Link. Personality is sometimes more important than what he/she currently owns and inherits.

( KPop ) { Mina } - Rhythmic Gymnastics hoof - 2016 Idol Star Championship: Link. You Try to Throw something, but you don't Catch it later ... and it Bugs you so much ... ok, I'm too deep into programming ... .

( KPop ) TWICE Mina - ballet Link.