190601 ( Log table ) 2019-06

Short: -

List

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

2019-06

{ Stoicism }

Virtue

{ Hallucination }-[ Point of view ]

External and internal motivation

Seeing bigger picture and the "form"

Learning systematically (book)

Finding { Methodology }

Finding { Design Pattern }

Methodology ,, { SOLID } principle

{ Functional Programming }-{ Paradigm }

Simplicity - dealing with complexity elephant

{ Object Composition } over { Inheritance }

{ Function Composition }

"State" always causing "side effect"

{ Dependency Injection } ,, custom "dependency manager"

{ Corenet }

Front-end

Front-end ecosystem

{ Webpack }

{ LoveAndHappiness}-{ lahSale }

Javascript

Back-end

{ MongoDB }

Database schema

{ PATCH } vs { PUT } method

{ Atomic Design }-{ modularization }

Drawing ,, seeing "essential" under surface

Music composition

Music Theory

{ JYP }-{ Park Jin young }

{ Twice }

Intimate relationship

[ Personality ]-[ real ]-[ true ]-[ honest ]-[ consistent ]-[ open ]-[ frank ]-[ plain ]

[ Art ]-[ graphic design ]

{ Vue Router }

{ Bootstrap }

{ Accessibility }

Unit Test vs Integration Test

Portfolio and Resume

Wasting time

Boring

By time:
1. 190601:
  1. ( Music ) { Produce 48 } - Rumor - karaoke: Link. Better for focusing and studying.
  2. Playing { game }-{ Zero-k }: Playing game all day long, non-stoped, even passed midnight.
  3. Re-making new "tree classification system" to replace previous { facet system}.
2. 190602:
  1. ( Music ) { Tobu } - Sound of Goodbye: Link. Peace feeling, ideal for focusing and studying.
  2. Working on { corenet },, back-end ,, thinking about "tree classification system" and doing database schema.
  3. Playing { game }-{ Zero-k }.
3. 190603:
  1. ( Music ) { Tobu } - Sound of Goodbye: Link. Peace feeling, ideal for focusing and studying.
  2. ( MongoDB ) Things I wish I knew before I started working with Mongodb: ... .
4. 190604:
  1. 關於自學的陷阱 - 如何有效率的的自學任何專業領域?.
  2. Drawing ,, seeing "essential" under surface.
  3. Talking with Woody.
  4. Music composition.
5. 190605:
  1. ( Philosophy ) ( Stoicism ) Hold the optimism in the pessimism - { Pursuit of Wonder }: Link. --{ ... we find the optimism in the pessimism. }-- ... holding 2 conflicting model ... .
  2. ( Music ) { ITZY } - DALLA DALLA: Link.
  3. MongoDB, CSS, Bootstrap.
6. 190606:
  1. { Methodology }-{ Atomic Design }-{ modularization }: ... .
  2. { Bootstrap },{ lahSale }.
7. 190607:
  1. ( Music ) Blackpink - Forever Young: ... .
  2. ( Vue ) { Vue Router }.
  3. { Bootstrap } [ installation ]-[ trouble shooting ].
8. 190608:
  1. Design pattern and Design pattern for Javascript: ... .
  2. ( MongoDB ) About different searching approach: ... .
9. 190609:
  1. Music, { Corenet }, Back-end, { Vue.js }, { Bootstrap }, { Woody }.
10. 190610:
  1. ( Music ) Goblin - Original Soundtrack - Round And Round (Never Far Away Full Ver.): ... .
  2. ( Inspiration ) 創意的三大要素 - { 抖抖村 }: Link. 1. 大量吸收知識識 (基於現實) 2. 發散思考 (新東西) 3. 收斂思考 (有價值的東西). // 繪畫學習的三個階段 - 1. 兒童般的亂畫 (全發散思考) 2. 系統規範的繪畫 (全收斂思考) 3. 突破規範的 "童貞" (發散 + 收斂)。
11. 190611:
  1. ( Music ) Sad feeling collection: ... .
  2. ( Music composition ) { NiceChord 好和弦 } - 一次搞懂，在家做音樂需要的基本配備: Link.
  3. { Corenet } ,, making { postManager }: "edit mode".
12. 190612:
  1. ( Programming ) ( Methodology ) "SOLID" principle: ... .
  2. ( Accessibility ) Web Accessibility evaluation tool and { NCC }: ...
  3. HTML { input types }, { Date picker }, { Time picker }: ...
  4. { Corenet } ,, back-end ,, write PUT logic: This is the first PUT logic I wrote in { corenet }. I'm doing very slow.
13. 190613:
  1. ( Programming ) ( Methodology ) "SOLID" principle: ... .
  2. Javascript.
14. 190614:
  1. ( Javascript ) Object { Composition } over Class { Inheritance }.
  2. ( Javascript ) Factory Functions vs Constructor Functions vs Classes.
  3. ( Javascript ) { Prototype }.
15. 190615:
  1. Javascript
  2. ( Javascript ) Object { Composition } over Class { Inheritance }.
  3. ( Javascript ) Factory Functions vs Constructor Functions vs Classes.
  4. { Functional Programming }.
16. 190616:
  1. Javascript
  2. Testing { Object Composition }: With Object.assign and closure.
  3. Learning { Function Composition }: Learning writting [ clean ],[ dense ] code with { Function Composition }.
  4. { Functional Programming }.
17. 190617:
  1. { Functional Programming }.
  2. { Function Composition }: { Function Composition } is not as same as { Object Composition }.
  3. { Design pattern }-{ Javascript }.
  4. { Javascript }-{ data type }.
18. 190618:
  1. { Functional Programming }.
  2. { Corenet }.
19. 190619:
  1. { Functional Programming }: "Side effects", "Immutability".
  2. { Corenet }.
  3. Javascript.
  4. Music theory, Music composition.
20. 190620:
  1. ( Javascript ) ( Front-end ) Javascript ecosystem fundamental knowledge - Alex Tzeng, 曾苔眠: JavaScript - JS 生態系及週邊工具整理系列. 系列文。讓我大幅的了解整個生態系統，和 bigger picture。 我一開始只是想知道 common.js 是什麼東西，結果發現愈挖愈多東西，於是想要趁機 [ 補充一下自己常識的不足 ],[ 增加自己的視野 ] ,, 關於 Front-end 的整個生態系統。 // Including Npm, ES6 module, Common.js, require.js, Webpack, Babel, Vue.js ... . // This article series were published around 2017-12, are current enough ... .
21. 190621:
  1. Tired, low energy, wasting time, boring. Wasting a lot of time because of tired and low energy (due to unormal sleeping time). // Also feeling boring about programming, I currently can't actually do any application for some real useful stuff, also I found side project of people are also really boring too, always doning the same thing again and again, Twitter bots, Weather App, todo list, solving math problem ... these are sounds like disconnected with real word.
  2. { ISO 8601 } - { Moment.js } - date and time. Link.
  3. ( Vue.js ) Debugging in { Vue.js }.
22. 190622:
  1. { Stoicism } - 柯文哲.
  2. Simplicity - dealing with complexity elephant.
  3. Newbie can join many open source project.
  4. { Front-end } and { back-end }.
  5. "State" always causing "side effect": { PATCH } vs { PUT } method.
23. 190623:
  1. ( Thought ) ( Hallucination ) ( Stoicism ) [ Point of view ]-[ perspective ] - optimistic or pessimistic? - good or bad? - meaningful or meaningless?
  2. { Corenet }.
24. 190624:
  1. Intimate relationship - { Twice }.
  2. [ Personality ]-[ real ]-[ true ]-[ honest ]-[ consistent ]-[ open ]-[ frank ]-[ plain ].
  3. { Corenet }: PUT logic, accross back-end including controller and model, and front-end.
25. 190625:
  1. { Corenet }: PUT logic of post done. Starting to think about POST logic of post now.
  2. Unit Test vs Integration Test, [ HTTP ]-{ CORS }: Link.
26. 190626:
  1. { Corenet }: Front-end ,, "new post" related work.
  2. { Dependency Injection } ,, custom "dependency manager"..
27. 190627:
  1. { Corenet }: Front-end ,, "new post" related work.
  2. ( Psychology ) { Cognitive Evaluation Theory } - External and internal [ motivation ]-[ incentive ] system..
28. 190628:
  1. { Corenet }: Front-end ,, "delete post" related work, and makes "messenger" have "dialog" functionality.
  2. ( Music ) TWICE - Nayeon - Only Longing Grows - cover: A nostalgic song that makes you want to cry without any reason. ... .
  3. [ Thinking ]-[ planning ] about Portfolio: 歸納出，構成好看的網頁的幾個關鍵要素 (按照重要性) - 豐富的資訊 (資料)，好看的圖片及視覺設計，正確的排版 (以及創意的排版方式)，動畫。
29. 190629:
  1. ( Music ) TWICE - Nayeon - Only Longing Grows - cover: A nostalgic song that makes you want to cry without any reason. ... .
  2. ( Art ) [ 藝術 ]-[ 設計 ] 的本質還是一樣: 想辦法玩出 [ 非預期 ]-[ 動 ] 的效果。效果是什麼不重要，有沒有意義不重要，只要是 [ 非預期 ]-[ 動 ] 就會看起來很特別。 ... .
  3. [ Thinking ]-[ planning ] about Portfolio: 歸納出，構成好看的網頁的幾個關鍵要素 (按照重要性) - 豐富的資訊 (資料)，好看的圖片及視覺設計，正確的排版 (以及創意的排版方式)，動畫。 // 開始大量參考各式各樣的網頁設計 (資訊，圖片及視覺設計，排版)，準備之後開始模仿。// 搜尋其他人準備作品集和面試的經驗。
30. 190630:
  1. Portfolio and Resume: research what to put inside Portfolio, to have correct direction, and to save time later. // Designing Portfolio site. // I'm working damn slow on graphic design. I should see and reference more works from others, before I have the sense to do my own creation.

2019-06-01

{ Corenet } ,, new tree classification system

( Music ) { Produce 48 } - Rumor - karaoke: Link. Better for focusing and studying.
( Music ) { Produce 48 } - Rumor - bass boosted: Link.
柯文哲 - 不怕被公開自己所有事情 - 坦蕩蕩: Link.
Re-making new "tree classification system" to replace previous { facet system}: Abandon old "facet" concept that always use a (or multiple) "key::value" pair, to [ interpret ],[ describe ] a [ concept ]-[ context ], now the new "classification" system will use strict tree structure system to [ interpret ],[ describe ] a [ concept ]-[ context ]. There are going to have multiple { Path } for a { Post }, each path is unique [ in ]-[ for ] both this { Post } and the source "classification tree". // For example, in the past I will [ interpret ],[ describe ] a post with following facets - c::software, software::database, database::application, application::mongoDB, c::programming, programming::language, language::javascript (7 facets). But now it will be [ interpret ],[ describe ] like this - software/database/application/mongoDB, programming/language/javascript (2 path) (it is possible 2 path be on 1 tree, but for this case, it's 2 path on 2 tree). In this way, I get many advantage. First, ambiguous problem (should firework::price implies adobe/firework/price or explosive/firework/price?) is no longer the case (since a { path } defines a [ individual ]-[ complete ] context). Second, easy to manage and remember, user don't need to [ add ]-[ save ] multiple facets combination manually (like database::mongoDB or programming::javascript or even more middle combination) and don't need to remember the exact hierarchy of those nodes, since [ with ]-[ after ] new [ concept ]-[ system design ], even user input software/mongoDB, or even simply mongoDB will get the results. Third, the serching becomes very flexible, user can use software to get very [ board ]-[ rough ]-[ many ] resuts (of related posts), or either of one of software/database/application/mongoDB, database/mongoDB, software/mongoDB, mongoDB to get very [ narrowed down ]-[ few ] results, very flexible while still user friendly. // This new [ system ]-[ concept ] hugely improve the user experience (and reduce cognitive load) when serching, and managing those meta data.
By time:
1. 00:00 Playing { game }-{ Zero-k }: Playing game all day long, non-stoped, even passed midnight.
2. 03:45 Sleep: Stay up late again, second day. It have been quite some time I did this last time.
3. 11:10 Wake up.
4. 11:11 Upload blog.
5. 12:00 Watching video, cooking: Islamist Militants on Israel's Doorstep: The War Next Door.
6. 14:40 Start to working on { corenet }: My CMS. Set up server side and client side.
7. 14:56 Take a nap.
8. 15:40 Wake up, thinking about the structure of { corenet }.
9. 15:53 Buying drinks: Good, knowing where to start. Start to emerge the figure of what the first prototype of { corenet } looks like.
10. 16:05 Watching video:
11. 16:20 Downloading music: Listening when coding.
12. 16:30 Start to working on { corenet }: My CMS. Set up server side and client side.
13. 16:35 Bathroom.
14. 16:40 Working on { corenet }: Installing { boostrap }. Creating basic directories and files.
15. 17:20 Working on { corenet },, back-end ,, setting up { MVC } structure.
16. 17:50 Brushing teeth, dancing with music.
17. 18:10 Working on { corenet },, back-end ,, working on database schema ,, { post },{ facet } { collection }: Encounter problem of designing [ different ]-[ new ] facet system, a basic "key:value" pair for a single facet, will be functional, but not [ prefect ]-[ idea ]. This is related more of a symantic problem, less of a database schema problem. Still not figure out it yet.
18. 19:50 Cooking.
19. 20:30 Eating, [ deeply ]-[ very focused on ] re-making new "tree classification system" to replace { facet system}.

2019-06-02

{ Corenet }

Database schema

( Music ) { Tobu } - Sound of Goodbye: Link. Peace feeling, ideal for focusing and studying.
( Music ) { Miss A } - Hush - instrumental: Link.
( Music ) { Produce 48 } - Rumor - karaoke: Link. Better for focusing and studying.
( Music ) { Produce 48 } - Rumor - bass boosted: Link.
( Javascript ) { Const } != immutable: Link. A variable is like a pointer to a value (it’s a pointer for objects, it’s an assigned value for primitives). const prevents the variable to be assigned to another value. We could say it makes the pointer immutable, but it doesn’t make the value immutable too! // However, I don't see I get too much benefits of using cost so I rather not to use them, we just can't get rid of the problem that we have to use var in some (many) cases.
By time:
1. 02:10 End of thinking new "tree classification system", watching video.
2. 02:11 Playing { game }-{ Zero-k }: Spectating a team match.
3. 02:55 Sleep.
4. 07:50 Wake up: Still lack of 3 hours of sleep.
5. 08:00 Upload blog.
6. 08:10 Working on { corenet },, back-end ,, thinking about "tree classification system": Question: Why do I need more than one tree? Why I don't just put everyting under one tree? Can a tree have a very deep level (like 20 level), will this hurt the performance? Answer: You can make a tree as deep as you want, it will have very little performance impact on read (thought it hurt write a lot but it is not the problem here) as long as you don't repeatedly use too much same tree node name in deeper level, but if you use too much same tree node name in deeper level, it starts to hurt performance, you should avoid this, you should migrate it to upper level (can be in same tree, or another tree, it's up to you and where fits the tree shape best), this also makes it easier for you to manage.
7. 09:50 Watching video.
8. 10:20 Misc.
9. 11:20 Sleep.
10. 14:30 Wake up.
11. 14:40 Cleaning room.
12. 14:50 Grocery.
13. 15:05 Cooking.
14. 15:15 { Pulling } from { lahSale }.
15. 15:35 Eating, watching video: { Twice } - SIXTEEN Ep 3 - Dahyun 1v1 Dance Cut, (AI) NVIDIA’s AI Transformed My Chihuahua Into a Lion, { The News Lens } - 余杰：多數台灣人在和平與自由的環境生活太久｜國際大風吹｜EP56.
16. 16:30: Take a quick glance about { lahSale }-{ purchase_customer } part: Finding info graphics for inspiration.
17. 17:27: Talking with Woody: No need to do further special [ visual ]-[ graphic ] design at the moment, use bootstrap style.
18. 17:43: Listening to music: { Miss A } - Hush - instrumental.
19. 17:50 Working on { corenet },, back-end ,, creating database schema: Make a testing script that use node and mongoose to help me do simple CRUD testing, because doing CRUD testing with MongoDB shell is not very convenient and I can't use callback function with that and it can't test Mongoose thing.
20. 21:55 Cooking: Database collection classTree ,, schema, is set, but this all just at beginning, I set it one by one manually, very slow process and error prone.
21. 22:20 Eating, watching video, eating fruit: Mostly about Twice. Mina TWICE Childhood | From 1 To 20 Years Old.
22. 23:55 Working on { corenet },, back-end ,, creating database schema: Dealing with Mongoose schema validation and validator. Not yet finished.

2019-06-03

{ Corenet }

Database schema

{ MongoDB }

{ lahSale }

( Music ) { Coldplay } - A Sky Full of Stars - covered by { The Piano Guys }: Link.
( Music ) { Tobu } - Sound of Goodbye: Link. Peace feeling, ideal for focusing and studying.
( MongoDB ) Things I wish I knew before I started working with Mongodb: Link. Including using { cursor }-{ stream } to prevent memory huge consumption, using { populate() } to linking documents from different collections, prevent low efficiency { Pagination } ... .
( Drawing ) 簡介不同等級的繪畫技能 [ 實力 ]-[ 段位水平 ] - 瓶頸: Link.
( Drawing ) { 臨摹 } 和 { 透視 } 基礎對於繪畫的重要性: Link.
( JQuery ) How to get nth item of id/class - { .eq() }: Link.
( JQuery ) How to animate scroll in jQuery - { .animate() }: Link. Notice, you have to use both $("html, body") for browser compatibility problem. I found using $("body") or $(window)not working ((at least)) on firefox.
( JQuery ) { .animate() } not working on background-color property: Link. --{ Background Color is not a numeric property and so it cannot be animated using .animate(). }--.
By time:
1. 01:45 Sleep.
2. 09:50 Wake up.
3. 09:55 Upload blog.
4. 10:05 Watching video: { Twice }-[ time stopped ]-{ Signal }.
5. 10:55 Doing research about { ObjectId} in { Mongoose }.
6. 11:05 Cooking, eating, keep working on { ObjectId}.
7. 12:00 Testing { ObjectId} in { Mongoose } instead of { MongoDB shell }.
8. 13:10 Reading article about { MongoDB }: { Atomicity } and { Transactions }.
9. 13:30 Eating fruit, brushing teeth, bathroom.
10. 14:00 Reading article about { MongoDB }: { Aggregation }, { Cursor }-{ Stream } to solve large memory consumption problem.
11. 16:35 Cooking.
12. 17:10 Eating, Reading article about { MongoDB }, brushing teeth.
13. 17:35 Keep Reading article about { MongoDB }: The MEAN Stack: Mistakes You're Probably Making With MongooseJS, And How To Fix Them. Not too helpful.
14. 17:53 Watching video, misc.
15. 19:15 Working on { lahSale }.
16. 22:55 { lahSale } ,, Found bug: I forget to removeEventListener on resize event too. Last time is scroll event. This bug cost me 2 hours to found it.

2019-06-04

如何自學任何專業領域？

{ Corenet }

{ Express.js }

{ MVC }

Drawing ,, seeing "essential" under surface

Music composition

{ 空屋筆記-免費的自由 } - 為什麼我這麼討厭花錢?: Link.
( Drawing ) { 抖抖村 } - 關於自學的陷阱 - 如何有效率的的自學任何專業領域?: Link. 2 個互相違背的思維模式要同時存在，過度依賴任何一個都不行 (雖然 2 者是互相衝突的思維模式) - 1. 長時間自己摸索，自我反饋，自創，突破，而不要抄襲，參考和信任大部分的資訊。2. 找到對的，系統性的資源，模仿抄襲，而不要自己摸索。所以不僅要有主觀判斷的思維，還要有客觀判斷的思維。
( Drawing ) { 抖抖村 } - 為什麼素描要學骨骼和肌肉結構?: Link.
( Music composition ) { iPianoDude } - Twice - Fancy: Link. Very complex, natural, abundant, and amazing.
( Music composition ) { iPianoDude } - Twice - TT: Link.
( Music composition ) { iPianoDude } - Twice - YES or YES: Link.
( Music composition ) { iPianoDude } - ITZY - DALLA DALLA: Link.
( Music ) { TWICE } - Fancy - pixel game style art: Link.
( Music ) Way Back Home - Violin & Flute - Cover by 2COLOR: Link.
( Music ) Blackpink - Forever Young - dance: Link.
( Javascript ) Trim specific character from a string, instead of just whitespace: Link. I'm surprised about javascript trim() can't do this (it don't accept any arguments). Also lodash don't have this kind of function too.
By time:
1. 01:35 Taking shower: Finished progress of { lahSale } - 1. Apply scrollSpy onto purchase_customer.vue 2. Visual update with woody.
2. 02:20 Watching video.
3. 02:35 Sleep.
4. 10:45 Wake up.
5. 10:53 { lahSale } ,, pull request, fixing a visual bug.
6. 11:20 Preparing ingredient.
7. 11:28 Uploading blog.
8. 11:35 Wasting time on reflecting.
9. 11:53 Cooking.
10. 12:05 Working on { Corenet }.
11. 12:25 Eating, searching about { Express.js }-{ route }.
12. 12:40 Misc, messaging with { Pollash }.
13. 13:00 Searching how to use { Express.js }-{ route }-{ regular expression }: There is a wierd "bug" that the dot character (.) of regular expression don't works in express router, but [a-zA-Z0-9] works.
14. 15:35 Eating fruit, watching video, brushing teeth.
15. 16:00 Grocery, buying drinks, renting bills.
16. 16:30 Watching video.
17. 19:50 Working on { Corenet } ,, { route }: Progressing very slow, just for checking if route match is some type of pattern it cost so much time than I thought.
18. 22:10 Cooking.
19. 22:25 Watching video, eating: Mostly is about music composition.

2019-06-05

{ Stoicism }

{ Corenet }

{ Express.js }

{ MongoDB }

{ lahSale }

{ Woody }

{ Css }

{ Bootstrap }

( Philosophy ) ( Stoicism ) Hold the optimism in the pessimism - { Pursuit of Wonder }: Link. --{ ... we find the optimism in the pessimism. }--. // Stoicism is about pessimistic about [ reality ]-[ facts ]-[ real world ], [ and ]-[ but ] optimistic with optimistic inner attitude facing these unfortunate at the same time. Stoicism require you to hold these 2 conflicting model in the same time, it is hard, but it is also so real and indeed a good model.
( Music ) { ITZY } - DALLA DALLA: Link.
( Music ) { ITZY } - DALLA DALLA - Piano cover by { DooPiano } - acoustic: Link.
( MongoDB ) What is { Sharding }? - Vertical and horizontal database scaling: Link. Link.
( MongoDB ) { "_id" Field } - What is MongoDB's _id Field and How to Use It: Link. --{ There are several actions available to users that simplify your organization and handling of documents. For instance, users who stick to the default ObjectID can access the creation of their timestamps with the getTimestamp() command, providing an easy and reliable method for seeing precisely when a document was created. Additionally, with a little client-side computation, you can leverage the built-in timestamp to find documents based on insertion time. }--.
( MongoDB ) { "_id" Field }-{ ObejctId } - Why you should avoid adding another date field, but use (and search within) ObjectId instead?: Link. Also see What is MongoDB's _id Field and How to Use It. You can add another date field. But without indexing, it is very slow (just relative) on searching for a specific or range of date. So you want the search to be much faster (just relative) and you will try to add index on that date field, but now you end up adding one more extra indexed field. So why you do this? Just simply searching the date by ObjectId (timestamp, smallest units to one seconds), since every ObjectId consist with 4 part, the first part is the representation of the seconds since the Unix epoch.
( MongoDB ) { "_id" Field } - You can explicit create "_id" field value: Link.
( MongoDB ) { "_id" Field } - Is it bad to change _id type in MongoDB to integer?: Link. No, it's not a problem. But I don't need to change it, ObjectId is good enough in most case.
( CSS ) Found solution of [ CSS dilemma ]-[ parent size and child size depends on each other: The dilemma is like this - you have a parent container A, inside this parent there is 2 sibling child B and C, B is image at left side, and C is some text at right side. Now your goal is 1. Make height of A to shrink as much as possible until it reach the same size of C, 2. Make height of B to grow as much as possible, until reach the same size of A. // This brings the chicken-egg dilemma, how can you have differnt size depending direction? The solution is like this - make an extra container D between A and B, then set this container D to position: absolute ; top: 0 ; bottom: 0 ; left: 0 ; right: 0 ;, then also set B to height: 100%; finally set A to position: relative;, since A will consider D as zero size so it will shrink as much as possible until reach same height of C. And also D will try to stick with same height of A, B will do the same thing too. Now everything works!
By time:
1. 00:55 Working on { Corenet } ,, { controller },{ model }.
2. 02:41 Misc.
3. 02:50 Sleep.
4. 10:53 Wake up.
5. 11:00 Upload blog.
6. 11:05 Watching video.
7. 12:05 Working on { Corenet } ,, { model }: Understand "_id" field.
8. 12:30 Cooking, reading article about "_id" and { ObjectId }.
9. 13:15 Eating, reading article about "_id" and { ObjectId }.
10. 13:35 Bathroom.
11. 13:50 Fixing problem of network is down.
12. 14:00 Network is off, still reading articles about { Sharding }.
13. 14:20 Grocery, buying drinks.
14. 14:30 Wasting time.
15. 14:35 Take a look of { lahSale }.
16. 14:43 Misc: Not very productive, my mind is not very focused, too bad. Reading article about { Dates } and { moment.js }, misc, messaging with woody about { lahSale }, Working on { Corenet } ,, { model }.
17. 17:15 Misc, wasting time..
18. 17:53 Watching video..
19. 18:25 Working on { Corenet } ,, { controller },{ model }: Change structure, because { Mongoose } { Model } could only be init (instantiate) once, never twice. I thought we should (good practice) instantiate the from controller to model for each single request.
20. 19:30 Bathroom: Link. I think we inevitably still have to use one or multiple try ... catch block when using async function.
21. 19:47 Working on { Corenet } ,, { controller },{ model }.
22. 20:00 Talking with Woody: Topics include { lahSale }, my previous job working in factory assembly line, industrial design college days, I should increase my javascript skills by learning more advanced topic (by books or other systematic resources), { Corenet} and database design, and write much more code. The volunteering opportunity. My job and interview.
23. 21:50 Eating fruit, cooking.
24. 22:20 Working on { lahSale } ,, build testing html for testing css.
25. 22:45 Eating, thinking css problem.
26. 23:45 Found solution of [ CSS dilemma ]-[ parent size and child size depends on each other.
27. 23:59 Working on { lahSale } ,, fixing thumbnail size inside table cell.

2019-06-06

{ Methodology }

{ Atomic Design }-{ modularization }

{ lahSale }

{ Bootstrap }

{ Vue }

Music composition

( Methodology ) Atomic Design Methodology (modularization): Link. Also see Atomic Design - Table of Contents for 4 other part. // I think these series is not only about Atomic Design, but also include many experience sharing from web-development industry. Might worth [ reading ]-[ dig more] if I have time.
( Music composition ) { iPianoDude } - Twice - TT: Link.
( Bootstrap ) Correctly using Bootstrap4 Grid for responsive layouts - { .container },{ .row},{ .col }:
1. Link: Link. High quality article for newbies, introducing most fundamental but important concept of how to correctly using these 3 class { .container },{ .row},{ .col }.
2. Conclusion: Now I [ understand why ]-[ know ] we should not mixed { .container },{ .row},{ .col } with other purpose! Those div should be only doing that purpose (served for boostrap positioning, not styling). In other words, don't make those element (div) that have applied { .container },{ .row},{ .col } class to do other thing, like applying border, you might start to get into trouble later when you do so.
3. 3 important basic rules: --{ 1. Columns must be the immediate child of a Row. 2. Rows are only used to contain Columns, nothing else. 3. Rows should be placed inside a Container. }--.
4. { .row } is just a css { flexbox }: So you can apply same flexbox property to inside { .col }. So can even use something like class="row align-items-end", class="row justify-content-around".
5. Advanced usage: See Bootstrap ,, Docs ,, Grid system, you can even use something like class="row align-items-end", class="row justify-content-around" // class="row no-gutters" // class="col order-md-12", Auto-layout columns (without specifying explicit numbered class like .col-sm-6) // col-<breakpoint>-auto to make column's width fits it's content (see Variable width content) (so it seems you can use use class="col-auto" on column B to shrink as much as possible, then use class="col" on column B to grow as much as possible, to fit remaining space). // .col-md-3 .ml-md-auto to make left marign (length is automatically set) on { md } screen size (see margin and padding utilities). // .col-md-4 .offset-md-4 (see Offset).
About thoroughly re-learn Bootsrap { Grid system } and responsive layout fundamental: The reason why I spends so much time re-lean Bootsrap { Grid system } is because I estimate it will be used again an again in lahSale project (and maybe my corenet too), so to prevent the time wasting on searching scattered information all over the net keep accumulating, I decide to learn it systematically. This might not only applyed on this Bootstrap example, I think many things are the same, sometimes it is preferable to learn systematically, sometimes it is preferable to learn with scattered info and just need to grab what I need from everywhere and should prevent diving too deep into rabbit hole.
( Bootstrap ) What is { Custom forms } (.custom-control) compare to normal form elements?: Link. --{ For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control. }--.
( Bootstrap ) Form: Link.
( Drawing ) { 抖抖村 } - 我適合哪種類型的藝術工作? - 認識你自己的技能樹，優勢，劣勢: Link. 總結就是，任何專業領域都一樣，一定要長時間的練習才會有一點成就，短時間是不會看到東西的。
( Vue ) Form input bindings and { v-model }: Link. Helpful. Including checkbox, radio, select.
( Vue ) How to correctly use { v-if },{ v-else },{ v-else-if }?: The docs, Conditional Rendering, didn't mention the rules very detailed. After my own trial and error I found that, all of html elements that applied any of { v-if },{ v-else },{ v-else-if } vue attribute, they you have to treat their position strictly just like how you write if ... else if ... else statement in programming code logic. You have to treat the element depth just like indent in programming, no matter what element you are using (either template, or div, or span). And also between those special elements you can't insert other things between or it will fail to work (and complain). // About nesting, yeah you can nest another child v-if ... v-else inside parent v-if or v-else. Parent's v-if ... v-else is not related to child's v-if ... v-else at all, they work individually and the logic don't affect each other.
( Music composition ) { iPianoDude } - BTS - Fake Love: Link.
By time:
1. ??:?? Working on { lahSale } ,, replacing some element to use boostrap style.
2. ??:?? Understading why boostrap have nagative margin of { .row }.
3. 03:30 Sleep.
4. 11:35 Wake up.
5. 11:40 Uploading blog.
6. 11:55 Wasting time on reflecting.
7. 12:05 Working on { lahSale } ,, replacing some element to use boostrap style.
8. 12:50 Thoroughly re-learn Bootsrap { Grid system } and responsive layout fundamental, cooking.
9. 14:50 Eating, listening to music, brushing teeth.
10. 15:20 Reading article ,, Try/Catch always needed for await?: Link.
11. 15:30 Working on { lahSale } ,, replacing some element to use boostrap style.
12. ??:?? Testing { Vue } v-model on { radio }, testing nested { v-if }.
13. 17:21 Found why { Bootstrap } ,, { checkbox } not working as expected: (Here I talking about form-check, not custom-control custom-checkbox). Bootstrap require you put <input type="checkbox"> first, then <label> later, if you reverse the order, it will not work. Very wierd and stupid quirk. Also this is not documented anywhere.
14. 18:50 { lahSale } ,, finished the current progress.
15. 18:51 Wating time on reflecting.
16. 19:10 Dancing with music.
17. 19:?? Grocery, preparing ingredient.
18. 19:50 Listening to music, watching video, reading article.
19. 22:30 Taking showing.
20. 23:00 Mind is wandering, eating fruit: Reading article at first, but later starts to out of focus ... bad habbit.
21. 23:35 Learning { Atomic Design } Methodology: And reflecting if { lahSale } or { corenet } could [ apply same methodology ],[ be improved ].

2019-06-07

Design pattern

Book

{ Corenet }

Back-end

{ MongoDB }

Design pattern and Design pattern for Javascript:
1. { OReilly }-[ Addy Osmani's Learning JavaScript Design Patterns ]-[ 2012 ]:
  1. Link: Link.
  2. Table of contents: Link.
  3. Released under a Creative Commons: --{ released under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 unported license. It is available for purchase via O'Reilly Media but will remain available for both free online and as a physical (or eBook) purchase for readers wishing to support the project. }--.
  4. Been suggested again and again: This book have been suggested again and again, for Javascript community, seems a book gain quite credits.
2. { GOF } design pattern (Gang of Four):
  1. Been suggested again and again: This book have been suggested again and again, it is an influential book that is still influential today.
  2. Quick reference - sourcemaking.com/design_patterns: Link. Online, free.
  3. Quick reference - { medium } - JavaScript Design Patterns: Link.
  4. Quick reference - Youtube - Derek Banas: Link.
3. { OReilly } - Head First Design Patterns: Link. Not sure what language it used, not sure which Design Pattern it used. But this book is recommand by someone by few people, saying it is story-like and fun to read.
4. Design pattern is only meaningful when in right context: --{ Gang of Four is considered the "canonical" design patterns book. The examples are not in JavaScript, and it has much more of an OOP bend, but worth reading. Since you're looking for Node, not all the patterns may be relevant just FYI. ; JavaScript-wise, Addy Osmani's Learning JavaScript Design Patterns might be a little more useful for you (not to say that Gang of Four isn't, it's just a different context).}--. // ---{ user1: I thought the point of learning patterns is that they're language agnostic. }--, --{ user2: No, quite the opposite. Many are language specific, like Iterator, you would not normally need to implement this pattern in JavaScript, for example. Another example of a pattern needed in a language such as Java and not really needed in JavaScript is Visitor, the problem it tries to solve is not being able to add methods to existing classes, in JavaScript there is no such problem to begin with ... I guess you wouldn't need to implement the observer pattern in .net because it is natively event driven. }--
( Book ) Best books for software engineering - { fullstackengine.net }: Link. A list of [ "classic" ]-[ "legendary" ]-[ influential ] books. Unread, but { GOF } and {Javascript: The good parts } is in two of them.
( Music ) { DooPiano } - Forever Young: Link. Quality and cretive [ interpretation ]-[ remake ]-[ composition ].
( Music ) Blackpink - Forever Young - dance: Link. Their dance has very correct rhythm feeling, not about the details, but right "bigger form". Feeling loose, relaxing, beauty, and dynamic.
( Music composition ) { iPianoDude } - BLACKPINK - Forever Young: Link.
( Music ) Blackpink - Don't Know What To Do - dance: Link. Their dance has very correct rhythm feeling, not about the details, but right "bigger form". Feeling loose, relaxing, beauty, and dynamic.
( MongoDB ) About Searching:
1. Different searching approach: Including exact match, $regex, Keyword Index, Text Indexes.
2. Keyword Index: Link. Related to create the multi-key index on that array field.
3. Text Index: Link.
By time:
1. 01:45 Finished reading { Atomic Design } Methodology ,, article.
2. 01:46 Organizing blog.
3. 01:50 Misc.
4. 02:40 Sleep.
5. 10:45 Wake up.
6. 10:55 Uploding blog.
7. 11:00 Misc: Tired, sleepy, no energy, don't feel like working.
8. 12:00 Cooking.
9. 12:18 Finding design pattern, and design pattern for Javascript.
10. 12:30 Eating, understanding { GOF } design pattern.
11. 14:20 Watching video.
12. 14:50 Working on { corenet } ,, back-end ,, Model to get all post: Not very focused.
13. 15:20 Bathroom.
14. 15:35 Working on { corenet } ,, back-end ,, Model to get all post: Refactoring cfg.js.
15. 16:35 Buying drinks.
16. 16:47 Working on { corenet } ,, back-end ,, Model to get all post: Pagination logic.
17. 17:00 Understanding several Searching [ approach ]-[ practice ] in { MongoDB }.
18. 17:?? Working on { corenet } ,, back-end ,, Model to get all post: Pagination logic.
19. 18:40 Messaging with mom.
20. 19:00 Working on { corenet } ,, back-end ,, Model to get all post: Pagination logic.
21. 19:25 { corenet } ,, back-end ,, first Model { postAll } now functioning.
22. 19:26 Watching video: Why Good Developers Write ugly (but dead simple) Tests, Blackpink.
23. 21:20 Working on { corenet } ,, back-end ,, { route } to get single post..
24. 23:15 Cooking, working on { corenet }..
25. 23:55 Eating, watching video: Mostly about music.

2019-06-08

{ Corenet }

Back-end

{ Vue Router }

{ Bootstrap }

( Music ) Blackpink - Forever Young:
1. ( Music ) ( Rearranged ) ( Instrumental ) Blackpink - Forever Young - Official & Filtered Instrumental: Link. The end part is fixed, makes it better than official version, when studying.
2. ( Music ) ( Rearranged ) Blackpink - Forever Young - alternate ending version: Version 1, version 2. Cut the end "noise". Better than official version, when studying.
3. ( Music ) Blackpink - Forever Young - official & filtered instrumental: Link.
4. ( Music ) ( Drum ) Blackpink - Forever Young - { David Cannales } drum cover: Link.
5. ( Music composition ) Let's Try to Make the Beat from Blackpink - Forever Young - { AZWZ }: Link.
( Music ) ( Drum ) Twice - Dance The Night Away - { David Cannales } drum cover: Link.
( Film making ) { Twice } - Heart Shaker JP ver: Link.
( Vue ) { Vue Router }: Docs, quick reference.
By time:
1. 01:45 Organizing blog.
2. 01:50 Listening to music.
3. 02:00 Working on { corenet } ,, back-end ,, { route } to GET single post: GET done. Ready to do POST, PUT in tomorrow.
4. 03:45 Sleep.
5. 11:40 Wake up, misc: Too bad, stay up late even more.
6. 11:50 Uploding blog.
7. 11:55 Working on { lahSale }: Woody had upgrade the code base to using vuecli3. Checking a trivial problem that why 2 nearby buttons don't have any spacing (side by side without margin) (this happens after upgraded?).
8. 13:10 { lahSale } ,, found bootstrap don't make defult margin for 2 side by side buttons.
9. 13:11 Cooking, { pull request } to Woody: Visual check on lahSale, seems no found visual glitches at all.
10. 13:40 Eating, listening to music.
11. 15:10 Working on { corenet } ,, back-end ,, { route } to POST single post.
12. 15:15 Understanding { Vue Router }.
13. 15:28 Distracting, serching music on youtube.
14. 15:40 Understanding { Vue Router }.
15. 16:00 Bathroom.
16. 16:10 Understanding { Vue Router }.
17. 17:13 Listening to music.
18. 17:18 Taking a nap.
19. 17:50 Wake up.
20. 17:53 Buying drinks.
21. 18:00 Watching video.
22. 18:25 Learning { Vue Router }: Quite suprised, I don't know these days front-end (instead of back-end) do all heavy lifting on routes. That make sense, since Vue is front end framwork and single page application in natural. Back-end now only remain API purpose.
23. 20:25 Listening to music, cooking.
24. 21:30 Listening to music, eating: 從事藝術行業者，都靠什麼管道賺錢?. Yeah, it is too hard to make living with art, unless you are really that 1. Persistent until you become skilled 2. Talented.
25. 22:00 Working on { corenet } ,, front-end: Setting up front-end from zero.

2019-06-09

{ Corenet }

Front-end

{ Vue.js }

{ Bootstrap }

{ Woody }

( Health ) 飲食中， Omega-6:Omega-3 的理想比例約為 1:1, EPA 與 DHA: Link, also see 藻油跟魚油.
( Music ) Blackpink - Don't Know What To Do - dance: Link, instrumental. Very sad.
( Music ) ( Cover ) { DooPiano } - BLACKPINK - As If It's Your Last: Link. I found { DooPiano } always have a completely different interpretation himself, and do it great.
( Music composition ) { iPianoDude } - Twice - YES or YES: Link.
( Music composition ) { iPianoDude } - Twice - Fancy: Link. Very complex, natural, abundant, and amazing.
( Music composition ) { BTS } - Euphoria - DJ Swivel - deconstructed and the making: Link. The final piece itself is not my type, but the principle is more interesting.
( Music theory ) 不自量力的挑戰：我與好和弦的【絕對音感大PK】: Link.
( npm ) What is "deduped" in npm packages list?: Link.
( Vue ) ( JQuery ) The problem with using jQuery and Vue together: Link. --{ Vue is a jealous library in the sense that you must let it completely own the patch of DOM that you give it (defined by what you pass to el). If jQuery makes a change to an element that Vue is managing, say, adds a class to something, Vue won't be aware of the change and is going to go right ahead and overwrite it in the next update cycle. }--.
( Vue ) How to set a global variable: Link, I follow the second answer, it follows the method of docs ,, Adding Instance Properties. // Also, Woody use this way to make a component be accessible by all other components - this.$root.$message = this;, and also see what does { this.$root } mean?, so this.$root is new Vue(...) instance, not App.vue component.
By time:
1. 00:30 Figure out why Bootstrap is not functioning: I have multiple vue testing-purpose "project" installed on system, they use Bootstrap. I thought they are funtional correctly (because CSS is working), but until now I found it is not fully functional. I compare with the version of Woody's and the "CDN"-ed method, it indicate my own project ,, bootstrap, is not funtional correctly, but I can't found the problem.
2. 03:15 Still not figured out why Bootstrap is not functioning: I guess it is because I wrongly use Boostrap in Vue, I have to use some special html [ elements ]-[ tags ] like <b-row>, <b-col>, so maybe this is why I keep can't found the answer.
3. 03:25 Sleep.
4. 11:15 Wake up.
5. 11:30 Uploading blog.
6. 11:40 Watching video: Mostly related to music.
7. 12:35 Noting down about how to correctly using Bootstrap inside { Vue } project: Have to use special html tag like <b-collapse>.
8. 13:45 Cooking, playing with { Boostrap } special html tags inside { Vue }.
9. 14:20 Eating, { Boostrap } special html tags.
10. 15:00 Testing ES6 module, { import }, { export }: I'm sure in { node.js }-{ backend }, module will be cached, but I'm not sure if front end ES6 module behave the same or not. After testing, I'm sure they are cached too. They only load ("code executed", "initialized") once.
11. 15:40 Working on { corenet } ,, front-end: Writting config file to store something like back-end api url and port, for later fetch use.
12. 16:13 Eating fruit, listening to music.
13. 16:25 Grocery.
14. 16:40 Dancing with music.
15. 17:00 Watching video: TWICE 1001 Best Collection Of TWICE Sana (精選典藏凑崎紗夏), Why you build machine learning with Javascript? (no any good reason, just because Javascript is ubiquitous, and people don't have time to lean a new language). For scientific things and eco system, Python is much more mature.
16. 18:35 Brushing teeth.
17. 18:45 Working on { corenet } ,, front-end: Writting config file to store something like back-end api url and port, for later fetch use. // Leaning how to set up global variable that could be call by any component natually in Vue.
18. 20:30 Config { .eslintrc.js } for both front-end and back-end: I give up setting to much my own .eslintrc.js rules (what I did in project Doggo). Instead, I copy the .eslintrc.js from Woody's lahSale directly. It only have few lines of codes, I'm going to stick with any code [ type ]-[ preferences ] and focus on bigger picture.
19. 21:05 Cooking.
20. 21:40 Eating, messaging with Woody, wasting time on reflecting.
21. 22:32 Eating fruit, watching video about meat diet vs vegetarian: Is Meat Bad for You? Is Meat Unhealthy?.
22. 23:20 Doing nothing, too sleepy.
23. 23:45 Sleep: Too sleepy to do anything.

2019-06-10

{ Corenet }

Front-end

{ Vue }

( Music ) Goblin - Original Soundtrack - Round And Round (Never Far Away Full Ver.): Instrumental, With vocal. Very sad. I don't care about where it comes, but the Keywords of finding the source is - South Korean television series, Guardian, The Lonely and Great God, Goblin.
( Twice ) The TWICE Gay Square: GAY OR GAY: Link.
( Twice ) TWICE Sana and Momo rejecting / loving each other: Link.
( Inspiration ) 創意的三大要素 - { 抖抖村 }: Link. 1. 大量吸收知識識 (基於現實) 2. 發散思考 (新東西) 3. 收斂思考 (有價值的東西). // 繪畫學習的三個階段 - 1. 兒童般的亂畫 (全發散思考) 2. 系統規範的繪畫 (全收斂思考) 3. 突破規範的 "童貞" (發散 + 收斂)。
( Form ) ( 3D modeling ) The 6 Key Principles to 3D Modeling Anything: Link. Always focus on bigger form first, then smaller detail later, never reverse.
( AI ) NVIDIA's AI Creates Beautiful Images From Your Sketches: Link.
( Vue ) What is { $refs }?: 為什麼要用 $refs 取得 DOM Element 資訊?, codepen example (ignore the article, just use the codepen live example it given), Be careful the pitfall, any DOM changes directly with $refs might be overwritten by Vue's virtual DOM (best explained) (--{ Of course we could also have accomplished this with vanilla JavaScript by using a query selector to get access to the DOM element, but using the ref attribute is much cleaner and is the Vue way of doing it. It’s also safer because you won’t be relying on classes and IDs, so the chances of you breaking your code as a result of changing the markup or CSS styles, are lower. ... you should be careful with applying changes to the DOM directly like this ($refs), as any changes you apply may be overwritten if you are not careful. }--), 注意陷阱，ref 在 render 前你不能訪問它 (還不存在)，在 render 後也不是響應式的 (什麼意思?), ref使用在外面的组件上, 外面的元素上, 里面的元素上 ....
( Vue ) Event on route change?: Link.
By time:
1. 06:20 Wake up: Still lack of 01:40 of sleeping time.
2. 06:30 Uploading blog.
3. 06:32 Thinking how to improve my { log table } system of blog: Do I need to reduce any duplicate or repeated workflow of my log table in everyday workflow? Can I automatically bubble-up all of the [ tag ]-[ label ]? No, it seems I can't do many workflow [ automatically ]-[ programmatically ], because many decision is not so sharp and crisp, it need so much human decision and decide by context. For example, I cook everyday, but it doesn't mean the "cook" [ tag ]-[ label ] should be important, in fact it even shouldn't be shown on the monthly [ tag ]-[ label ] cloud. While other thing like doing a long term project, it might involves across so much days, the tag might not even shown at daily [ tag ]-[ label ] cloud since they are common and trivial events, but should be shown in monthly [ tag ]-[ label ] cloud since it occupy so much time in this month, it is not important for daily scope, but important in monthly scope.
4. 07:45 Working on { corenet } ,, front-end: Use { Fetch } API to do first fetch request to back-end.
5. 08:25 Cooking, figuring out correct way to use { key } in { Vue }.
6. 09:10 Eating, watching video.
7. 10:30 { Vue } ,, can't get { key }: It seems no way to get key (which assigned to v-bind:key="..."). I just want to make sure I do it right, so this is why I want to print out the key, but I couldn't, it is not a big deal though.
8. 10:50 Understand { Vue } ,, { $refs }, listening to music: I'm digging into rabbit hole again, I might never going to use $refs in near future, and still I invest so much time on this.
9. 12:10 Working on { corenet } ,, front-end: Use { Fetch } API to do first fetch request to back-end.
10. 14:05 Prepare to figure out how to make pagination buttons later: { Corenet } ,, I have to figure out how to use Bootstrap <b-pagination-nav> later.
11. 14:06 Listening to music.
12. 14:27 Taking shower.
13. 15:05 Figure out how to use Bootstrap ,, <b-pagination-nav>.
14. 16:00 Take a nap.
15. 16:50 Buying drinks.
16. 17:05 Figure out how to make Bootstrap ,, <b-pagination-nav> works with current route.
17. 18:20 { lahSale } minor color changes.
18. 18:30 Wasting time on reflecting.
19. 18:42 Keep working on { corenet } ,, pagination and route.
20. 19:20 Reviewing { Vue } ,, { scoped slot }.
21. 19:25 Misc: Thinking about making a [ "messenger" ]-{ modal } just like what Woody did.
22. 19:35 Watching video.
23. 21:10 { Corenet } ,, Making a [ "messenger" ]-{ modal }: Just like what Woody did, to handle general pop out messages.
24. 22:50 Preparing ingredient.
25. 23:00 { Corenet } ,, making { postManager }: Main [ interface ]-[ component ] to to manage single post.
26. 23:30 Cooking.

2019-06-11

{ Corenet }

Front-end

Music composition

{ Vue }

{ Bootstrap }

{ TWICE } dealing with { Sana } kissing everybody: Link.
( Music ) Sad feeling collection:
1. ( Music ) Goblin - Original Soundtrack - Round And Round (Never Far Away Full Ver.): Instrumental, With vocal. Very sad. I don't care about where it comes, but the Keywords of finding the source is - South Korean television series, Guardian, The Lonely and Great God, Goblin.
2. ( Music ) Blackpink - Don't Know What To Do - dance: Link, instrumental. Very sad.
3. ( Music ) Daughter - Youth: Link. Very sad.
( Music composition ) ( Re-arrange ) ( Remix ) { Apocalypse }:
1. About: A bit noisy and messy, but very creative and varied.
2. ( Music composition ) { Apocalypse } remix - { Twice } - What Is Love?: Link.
3. ( Music composition ) { Apocalypse } remix - { Twice } - Dance The Night Away - A Ver.: Link.
4. ( Music composition ) { Apocalypse } remix - { Twice } - Dance The Night Away - B Ver.: Link.
5. ( Music composition ) { Apocalypse } remix - { Blackpink } - Don't Know What To Do: Link.
( Music ) { Nigel Stanford } - Science Vs. Music:
1. ( Music ) { Nigel Stanford } - { Cymatics } - Science Vs. Music: Link. The music style is kind of my type.
2. ( Music ) { Nigel Stanford } - One Hundred Hunters: Link. The music style is kind of my type.
3. ( Music ) { Nigel Stanford } - Entropy - from Solar Echoes: Link.
4. ( Music ) { Nigel Stanford } - Icarus (Automatic Mix) - feat. Elizaveta: Link.
5. ( Music ) { Nigel Stanford } - Automatica - Robots Vs. Music: Link. Powerful, varied, but not my type, too much strength and tough, I like soft and implicit thing more.
( Music composition ) { NiceChord 好和弦 } - 一次搞懂，在家做音樂需要的基本配備: Link.
( Music ) ( TWICE ) - YES or YES - Almost official instrumental: Link.
( Vue ) { v-html } directive - render given html literal to real dom:
1. About: See docs. Updates the element’s innerHTML.
2. Notice ,, Vue will not compiled those content: Note that the contents are inserted as plain HTML - they will not be compiled as Vue templates.
3. Notice ,, scoped style don't work on it: And there is some solution, you can either use /deep/ selector, or use <style> tag without scoped, or use extra <style> tag without scoped (so now you have 2 <style> tag on the component template file), or use global style sheet. See v-html doesn't work with scoped CSS.
4. { v-text } and { v-html } directive: Link. the later one use triple curly brackets {{{ myHTML }}} for shorthand.
By time:
1. 00:05 Eating.
2. 01:15 Sleep.
3. 09:25 Wake up.
4. 09:33 Uploading blog.
5. 09:38 Watching video: { The Dodo } - Finding another new friend for a sad dog.
6. 10:30 { Corenet } ,, making { postManager }: Main [ interface ]-[ component ] to to manage single post.
7. 12:45 Cooking: { Corenet } ,, making { postManager } ,, finished Fetch part, not yet rendered it on page.
8. 13:20 Eating, listening to music.
9. 15:20 { Corenet } ,, making { postManager }: { Fetch }, and rendered it on page.
10. 16:25 Bathroom.
11. 16:38 { Corenet } ,, making { postManager }: From "read mode" go into "edit mode".
12. 18:15 Take a nap.
13. 18:45 Eating fruit, brushing teeth.
14. 18:55 { Corenet } ,, making { postManager }: From "read mode" go into "edit mode".
15. 20:00 Out of internet: The place I'm living has bad internet stability, the connection speed is not the problem, but is is not stable, ofen unpredictably offline.
16. 20:10 Understanding { vue } ,, { v-html } directive.
17. 20:30 { Corenet } ,, making { postManager }: "edit mode".
18. 21:05 Cooking.
19. 23:25 { Corenet } ,, making { postManager }: "edit mode". Dealing with date and time picker.

2019-06-12

{ Corenet }

Front-end

Back-end

Programming { Methodology }

Methodology ,, { SOLID } principle

HTML { input types }

{ Date picker }

{ Time picker }

{ lahSale }

{ Accessibility }

( Music ) { Hans Zimmer } - { Now We Are Free } - movie Gladiator soundtrack: Link. Beautiful things will not last long, always.
( Music ) { Hans Zimmer } - { Time } - movie Inception soundtrack: Link. Time is always elapsing, and we can't [ hold ]-[ control ] it. Only we can do is live in now.
( Music ) { Thomas Bergersen } - { Colors of Love } - album Sun: Link.
( Music ) { Tobu } - Sound of Goodbye: Link.
( Music ) ( cover ) { DooPiano } - BLACKPINK - Forever Young: Link.
( Music ) ( cover ) { 2COLOR } covers - violin & flute:
1. ( Music ) { 2COLOR } cover - Way Back Home - violin & flute: Link. Natural and fluent performance.
2. ( Music ) { 2COLOR } cover - GFRIEND - Sunrise: Link.
3. ( Music ) { 2COLOR } cover - Alex & Sierra - Little Do You Know: Link. Even such plain and "boring" song source, could be interpreted nicely. The bigger form is just correct, so don't need too much extra detail to be nice.
4. ( Music ) { 2COLOR } cover - iKON - GOODBYE ROAD: Link. Even such plain and "boring" song source, could be interpreted to such many dimension and varied.
5. ( Music ) { 2COLOR } cover - TWICE - YES or YES: Link.
6. ( Music ) { 2COLOR } cover - Days Without Tears - Mr.Sunshine: Link.
( Music ) { SUNMI } - Siren:
1. Official MV: Link.
2. First Nuclo Remix: Link.
3. In empty arena effect: Link.
( Programming ) ( Methodology ) Writing Code You Won't Hate Tomorrow:
1. Link: Link.
2. ??:?? { SOLID } principle: See tomorrow's log.
3. 08:35 Only one thing is consistent, that is "everything always changing": Link. How do you deal with things always changing? - Prepare your code to be replaced, code will be replaced constantly, you need to make sure your code easy to be replaced.
4. 16:57 Only one indentation: Link. The purpose is not about the indentation, but to force you to keep the method small, so it will be much easy to read, comprehend, debug. This is also single responsibility.
5. 18:55 Avoid using { else }: Link. Making the control flow sequential, not tree-like.
6. 20:08 Use object to wrap primative value: Link. A some example is like date object, request object, they can catch wrong date format, wrong request method and options for you.
7. 22:59 Keep your classes small: Link. 10 methods max in a class, 10 lines max for each method.
( Webdev ) { input } elements: Link. An abundant list to show many input types. // Also see Attributes common to all input types section.
( Webdev ) { input } ,, { type="date" }: Link.
( Webdev ) { input } ,, { type="time" }: Link. Also see Handling browser support section.
( Webdev ) { input } ,, Additional attributes ,, { maxlength },{ minlength },{ pattern }: See text input for example (though not limited only to type="text"). The pattern attribute is what I care about here, it accept a regular expression pattern.
( Webdev ) ( Browser ) Date picker and { Safari }: According to MDN, Safari will treat <input type="time"> as <input type="text"> (degrades gracefully), and { Bootstrap }-{ vue } docs also said --{ Regardless of input type, the value is always returned as a string representation. }--, so I think it is fine to implement html native picker (<input type="date"> or <input type="time">), and Safari will treat them as text input, so Safari user can type someting like 2019-06-12 directly. // But you have to specify { pattern } attribute to make it works well.
( Webdev ) The <datalist> element: Link. The HTML <datalist> element contains a set of <option> elements that represent the values available for other controls. // Simular to <select> but can search data list in time.
( Bootstrap ) What does { .form-group } do in Boostrap?: Docs, --{ By default it only applies margin-bottom, but it picks up additional styles in .form-inline as needed. Use it with <fieldset>s, <div>s, or nearly any other element. }-- .
( Bootstrap ) Should I put multiple { input } inside { .form-group }?: In this docs example, you see the "City", "State", "Zip", they seems to be in same line, but they are not achieved with putting altogether in one .form-group, but in one .row (.form-row are almost identical to .row except have no "gutter") and multiple .form-group. So always put only one input (or other atomic form input element) in one .form-group.
( Java ) What is relationship between { JVM },{ JRE },{ JDK },{ OpenJDK },{ Oracle Java }?: Link. Java and Debian.
( Accessibility ) Web Accessibility evaluation tool: NCC ,, 無障礙網路空間服務網 ,, 無障礙網頁測試與協助工具簡介, 下載單機版檢測工具Freego 2.0, { WAVE } Web Accessibility evaluation tool.
By time:
1. 00:01 Learning { html input types },{ date input },{ time input },[ cross browser solution ].
2. 01:35 Sleep: Insomnia for an hour and more. Don't know why can't sleep well.
3. 10:55 Wake up.
4. 11:10 Uploading blog.
5. 11:15 Laundry, bathroom, misc.
6. 11:37 { Corenet } ,, { postManager }: "edit mode". Dealing with date and time picker.
7. 12:00 Laundry, cooking, listening to music.
8. 12:35 Eating, listening to music.
9. 13:35 { Corenet } ,, { postManager }: "edit mode". Dealing with date and time picker ; styling.
10. 15:05 Eating fruit, listening to music, brushing teeth.
11. 15:35 Grocery.
12. 15:55 Listening to music
13. 16:05 { Corenet } ,, { postManager }: Style tweaking. Too bad I'm wasting time tweaking style here, but I can't help I just want to fix it when it looks non-intuitive.
14. 17:25 Take a nap.
15. 17:50 { Corenet } ,, back-end ,, write PUT logic: This is the first PUT logic I wrote in { corenet }. I'm doing very slow.
16. 19:35 Bathroom.
17. 19:45 { lahSale } ,, understanding { accessibility } in web development: Woody messaged me a tool and a entry site to understand { accessibility } in web development.
18. 20:?? Installing Web Accessibility evaluation tool: Failed to install Freego 2 by NCC. I'm going to email them through handicap-free@mail.cisanet.org.tw.
19. 21:45 Cooking.
20. 22:05 Eating, learning "SOLID" [ principle ]-[ methodology ] of programming.

2019-06-13

Methodology ,, { SOLID } principle

{ Javascript }

Front-end

( Programming ) ( Methodology ) "SOLID" principle - quality series by { Severin Perez }:
1. About: { Severin Perez } wrote about series of articles about "SOLID" principle. Good quality, because 1. It have good and detailed example. 2. It tells "why" we do these things, the whole context, the before, the after, instead of just giving the definition about the principles.
2. { Severin Perez } - { /tags/principles/ }: Link.
3. Writing Flexible Code with the Single Responsibility Principle: Link.
4. Maintainable Code and the Open-Closed Principle (Javascript example): Link.
5. Making the Most of Polymorphism with the Liskov Substitution Principle: Link.
6. Avoiding Interface Pollution with the Interface Segregation Principle: Link.
7. Effective Program Structuring with the Dependency Inversion Principle: Link. --{ In his paper on the DIP, Robert C. Martin enumerates the primary characteristics of poorly-designed software as follows: it is rigid, meaning that it is hard to change due to the cascading effects of changes in one place into another; it is fragile, meaning that changes result in unexpected breakage; and, it is immobile, in that you cannot reuse entities due to their entanglement with one another. }--.
( Programming ) ( Methodology ) "SOLID" principle:
1. S.O.L.I.D The first 5 principles of Object Oriented Design with JavaScript: Link. Useful article, especially because it is for JavaScript reader. // This article use prototype a lot (and Object.create() and Object.assign()), so I learned these a lot too.
2. The Definition of a "Bad Design": Link. --{ 1. It is hard to change because every change affects too many other parts of the system. (Rigidity) 2. When you make a change, unexpected parts of the system break. (Fragility) 3. It is hard to reuse in another application because it cannot be disentangled from the current application. (Immobility). }--.
3. Open–closed principle: "software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification". // --{ When a single change to a program results in a cascade of changes to dependent modules, that program exhibits the undesirable attributes that we have come to associate with “bad” design. The program becomes fragile, rigid, unpredictable and unreusable. The open- closed principle attacks this in a very straightforward way. It says that you should design modules that never change. When requirements change, you extend the behavior of such modules by adding new code, not by changing old code that already works. }--. // An javascript example is this, the example code is too complex, maybe not prefect and maybe not worth to read again. But the general idea is the same, when he want to generate a question/answer form with multiple question/answer, he know that he is going to have different answer <input> type (choice, input, ...), and maybe more in the future, so instead write the render/view/dom-operation logic and "switch" statement directly inside the "view()" function, he wrap those "lable" info, and render/view/dom-operation logic inside the returned object of "choiceQuestionCreator()" and "inputQuestionCreator()".
4. Dependency inversion principle: Dependency inversion principle with JavaScript example, Example: the “Copy” program (copy(), readKeyboard(), writePrinter()). // --{ 1. High level modules should not depend upon low level modules. Both should depend upon abstractions (an "Interface", or duck typing in Javascript). 2. Abstractions should not depend upon details. Details should depend upon abstractions. }--. // Here says --{ Dependency Injection and Inversion of Controls also mean the same thing. }--.
( JavaScript ) Does JavaScript have the "Interface" type? How to implement { Interface } in JS?: Link. Unlike other major OOP language, No. But JavaScript uses what's called duck typing (see Dependency inversion principle with JavaScript example for example). --{ (If it walks like a duck, and quacks like a duck, as far as JS cares, it's a duck.) If your object has quack(), walk(), and fly() methods, code can use it wherever it expects an object that can walk, quack, and fly, without requiring the implementation of some "Duckable" interface. The interface is exactly the set of functions that the code uses (and the return values from those functions), and with duck typing, you get that for free. }--.
( Javascript ) How to get the name of an object's type: Stackoverflow, very comprehensive answer, MDN ,, { instanceof() }. // Conclusion - Use instanceof(), when you can avoid using thing.constructor.name. // I'm thinking this - In traditional when I use functions, I always output (return) string, or object (with many fields that consists of key-value pair), and I always input (function argument) string, or object too. This might sounds ok in simple or trivial works, but when the same arguments with similar "attributes" need to use again and again, and it need to do validation, this is when things starts to get messy, I don't know if I have to do validation on output side, input side, or both? And if I have to do at both side, now I got so much duplicated code. // Now I'm thinking about passing specific class instance for output (return value) or input (function argument), between functions, so for example I will have a color class, which will contain properties, like hue, brightness, chroma, also contain methods, like hue rotation, and auto validation when changing property. So now I can apply this color instance, on both input and output side, they will do the same validation across all over the places that passing this data.
( Javascript ) { Object.create() }: MDN. --{ The Object.create() method creates a new object, using an existing object as the prototype of the newly created object. }--. // This is related to the article S.O.L.I.D The first 5 principles of Object Oriented Design with JavaScript, so go read it if you forget where it comes from.
Iceland's Tourism Revolution: Link. This guy (or team?) really like Airplane that much!
( Music ) ( Piano ) Ru's Piano Ru味春捲:
1. 超時空之鑰「風の憧憬 / Yearnings of Wind: Link.
2. 魔力寶貝Cross Gate「法蘭城BGM」: Link.
3. Your Lie in April OST「Again」| 四月は君の嘘: Link.
( Art ) 配色, 對比，低彩度: Link。
By time:
1. 01:25 Organizing blog.
2. 01:30 Watching video.
3. 01:45 Sleep.
4. 09:50 Wake up.
5. 10:00 Uploading blog.
6. 10:15 Listening to music, preparing ingredient.
7. 10:40 Learning "SOLID" [ principle ]-[ methodology ] of programming.
8. 11:30 Cooking.
9. 11:50 Eating, learning "SOLID" [ principle ]-[ methodology ] of programming.
10. 12:?? Deep learning on "SOLID" [ principle ]-[ methodology ] of programming: I tried to find as much usful resources as possible, but unfortunately I didn't, instead I only find very little resources using Javascript as example and also deep enough.
11. 17:20 Email for troubleshooting - failed to installing Web Accessibility evaluation tool: Failed to install Freego 2 by NCC. Email them through handicap-free@mail.cisanet.org.tw.
12. 17:45 Watching video.
13. 18:25 Taking shower, listening to music.
14. 19:05 Cooking.
15. 19:35 Eating.
16. 20:37 Misc.
17. 21:30 Learning Javascript basics.
18. 20:40 Misc.
19. 21:50 Sleep: Too sleepy.

2019-06-14

Javascript

Javascript - { Composition } over { Inheritance }

{ Javascript }-{ Prototype }-{ Prototypal }

Javascript ,, { factory function }

{ Functional Programming }-{ Paradigm }

Javascript ,, { class } "sugar"

Javascript ,, { constructor function }

( Javascript ) Object { Composition } over Class { Inheritance }:
1. Object { Composition } over Class { Inheritance } - video by { Fun Fun Function }: Link. Very good example.
2. 3 Different Kinds of Prototypal Inheritance - ES6+ Edition - Eric Elliott: Link.
3. Also see { Factory Functions } in JavaScript: Video by Fun Fun Function.
4. Don't need to use { class },{ new },{ this }, at all: Above [ resources ],[ people ] suggest that we totally don't need to use these thing in Javascript, at all. We only use things like Factory Function, Object.assign(), closure (so we don't nee this), also thinking like functional programming.
5. Related to Closure: Factory Function is related to closure, so we don't nee this.
6. { Self } keyword: At this Composition article, I found the using of self keyword. Not sure what is does, but it seems not important (you can use thiz, that, _this, me if you want ...) because it will overwrite (shadowing) the global { Window.self } variable, if inner function's own self is declared with var self. (The Window.self read-only property returns the window itself),.
( Javascript ) Factory Functions vs Constructor Functions vs Classes: Link, also see The Two Pillars of JavaScript ,, Part 1: How to Escape the 7th Circle of Hell (many point of former link come from this one). // Conclusion - This article did do a deep comparison between using these 3 practice - class { ... }, smth.prototype.smth = ..., and factory function, to implement an object that hold properties, methods, prototype properties, and prototype methods. Both autohr suggest don't use class keyword, constructor function, but factory function (return Object.create(objThatYouWantToBecomePrototype)). (In JavaScript, any function can create new objects. When it’s not a constructor function, it’s called a factory function).
( Javascript ) Understanding { Prototype } basic concept and how it works: Link. The graph is very informative! This is quality resouces for people totoally don't know what Javascript Prototype is, and what to know the underlying concept, how it works. // Other resources on network is either hard to understand, or useless, or not comprehensive (scattered).
( Javascript ) Prototype, video example and show in browser console: Link.
( Javascript ) Class 的繼承 - ECMAScript 6 入門: Link. Detailed, quality, but the Class keyword might not be helpful for me now, I need to learn more about Prototype. The sidebar have [ more ]-[ rich ] contents though.
( Javascript ) Higher-Order Function, First-Class Function: Higher-Order Function. So the Higher-Order Function is function that accept another function as arguments (callbacks), or return another function as return value. Not special in Javascript since we use it everyday. The more interesting point is, this is the core underlying concept of how functional programming works. And this make me recall the Open-closed principle of SOLID principle.
( Javascript ) The "0.1 + 0.2 !== 0.3" pitfall: Google search results. Two best solution - 1. use math.js and [ get rid ]-[ forget ] of those low level problems and focus back on the main goal. 2. The quicker, simpler, also-reliable way is simply use parseFloat((0.1 + 0.2).toFixed(12)) (12 is a suggested but not mandatory number by people since it is good enough to handles most use cases) // Also see toPrecision() vs toFixed().
( Javascript ) The problem of Inheritance and Class in other language - HTML5DevConf: Doug Crockford "Which Way Is Forward" for JavaScript: Time point. Why Prototypal Inheritance.
( Atom editor ) ( troubleshooting ) Atom scrolls even when not focused: Link, imwheel. Fixed after installing and running imwheel. { keywords: mouse focus tab alt scroll scrolling event focus jump move switch imwheel wheel }.
By time:
1. 05:50 Wake up.
2. 06:00 Uploading blog.
3. 06:05 Learning Javascript basics: JavaScript Factory Functions vs Constructor Functions vs Classes.
4. 06:10 Fixing { Atom editor } scrolling problem: Also organizing bash_aliases_main.
5. 07:20 Misc.
6. 07:30 Learning Javascript basics: JavaScript Factory Functions vs Constructor Functions vs Classes ; JavaScript { Prototype }.
7. 08:40 Cooking..
8. 09:10 Eating, watching video, learning Javascript.
9. 09:50 Learning Javascript, Higher-Order Function, First-Class Function.
10. 10:40 Take a nap: Sleepy.
11. 11:30 Grocery. Sleepy.
12. 11:55 Watching video: 塑膠垃圾，回收處理技術，富國賣塑膠垃圾給窮國，掩埋派與焚化派, Everything About Grain Bins (Farmers are Geniuses) - Smarter Every Day 。
13. 12:40 Learning Javascript basics: JavaScript { Prototype }.
14. 13:10 Learning Javascript basics: JavaScript Factory Functions vs Constructor Functions vs Classes.
15. 14:25 Learning Javascript basics: Reading article The Two Pillars of JavaScript ,, Part 1: How to Escape the 7th Circle of Hell, understanding the javascript "0.1 + 0.2 !== 0.3" pitfall.
16. 16:10 Grocery.
17. 16:20 Understanding { Prototypal } vs { OOP }, the totally different [ methodology ]-[ mindset ] between Javascript and other OOP language.
18. 17:50 Watching video.
19. 18:40 Understanding { Prototypal } vs { OOP }, the totally different [ methodology ]-[ mindset ] between Javascript and other OOP language.
20. 21:35 Preparing ingredient.
21. 21:40 Keep learning { Prototype }.
22. 22:15 Cooking.
23. 22:40 Eating, learning Object { Composition } vs Class { Inheritance }.

2019-06-15

Javascript

Javascript - { Composition } over { Inheritance }

Methodology ,, { SOLID } principle

{ Functional Programming }

( Methodology ) Why use private method?: I think the ultimately goal is to decrease coupling between 2 object. If object B depends on object A, object B is going to use some of object A's public method, but object A should make public method as less as possible and set it to private, the reason of this is - --{ Consider how the coupling of two entities affects their respective maintainability. The more a given entity knows about how another one is implemented, the more we can say that they are coupled. Therefore, if one of the two entities is changed, then the other must be changed too. }--. As such, we should reveal as less detail as possible between 2 objects, this will force to decrease coupling.
( Javascript ) ( "this" keyword ) Removing JavaScript’s “this” keyword makes it a better language. Here’s why.: Link. Multiple sources state that don't need to use this at all, use closure instead. // --{ JavaScript is both a functional programming language and a prototype-based language. If we get rid of this, we are left with JavaScript as a functional programming language. That is even better. }--.
( Functinal Programming ) "Update as you copy" practice, and deep clone with nested object: Link,, section “Update as you copy” gets worse with nested objects.
( Javascript ) What is most recommended way to loop through an array?: Link. I think it's .forEach(), you can use array.every() or array.some() if you want to exit the iteration before it fully ends. // The differences between array.forEach(), array.every(), array.some(), is - 1. How to break the array. 2. The return value (not that inside callback). So basically the behavior of array.every() is similar to AND operator, while array.some() is similar to OR operator.
( Javascript ) Why is using "for...in" with array iteration a bad idea?: Link.
( Music ) 張懸 - 我想你要走了: Link.
( Music ) { DooPiano } cover - { Twice } - Likey: Link.
( Music ) Tarzan -Son Of Man (Phil Collins): Link.
( Music ) ( Electronic ) Jim Yosef - Firefly: Link.
( Music ) ( Electronic ) Elektronomia - Sky High: Link.
By time:
1. 00:42 Brushing teeth, misc.
2. 01:05 Watching video.
3. 01:15 Misc.
4. 01:20 Sleep.
5. 09:50 Wake up.
6. 09:51 Uploading blog.
7. 10:00 Email for troubleshooting - failed to installing Web Accessibility evaluation tool: Failed to install Freego 2 by NCC. Email them through handicap-free@mail.cisanet.org.tw.
8. 10:30 Bathroom.
9. 10:50 Reading { SOLID } principle from some article: Could not focus, messy mind.
10. 11:20 Cooking.
11. 11:32 Keep reading { SOLID } principle.
12. 15:20 Keep reading { Composition over Inheritance }-{ methodology }.
13. 16:10 Buying drinks, cookies.
14. 16:20 Misc.
15. 16:25 Watching video.
16. 17:35 Listening to music, reading Javascript articles: Not very focus. // SOLID ,, Interface Segregation Principle.
17. 18:45 Listening to music, reading Javascript articles: Composition over Inheritance.
18. ??:?? [ Testing ]-[ experiment with ] the { Javascript }-{ Composition }, writing my own testing code: To prove it can works, before I applying them somewhere in the future.
19. 23:00 Cooking.
20. 23:30 Eating.

2019-06-16

Javascript

{ Function Composition }

{ Object Composition }

{ Javascript }-{ Object Concatenation }

( Programming ) What is { Function Composition } and { Object Composition }?: Link. // Why write a concise and dense code? It is not harder to read, but in fact easier to read, and reduce the bug? // --{ Class inheritance is just one kind of composite object construction ... Favor object composition over class inheritance }--, --{ inheriting all properties from an ancestor in a class hierarchy, causes a large variety of well-known problems ... The tight coupling problem, The fragile base class problem, The inflexible hierarchy problem, The duplication by necessity problem, The gorilla/banana problem ... }--. // --{ The most common form of object composition in JavaScript is known as object concatenation (aka mixin composition). }--.
( Programming ) ( Book ) { Robert C. Martin } - { Clean Code }: Link. Found at article by Severin Perez.
( Javascript ) { Inheritance } problem, and { Composition } example - Michael Ries: Link. Very good article with clearly explanation, it shows the problem of classical inheritance, and the Javascript { Composition } practice (example code). // --{ The Problems of Classical Inheritance ... These problems are so common that there are names for them. Option 1 is known as the duplication by necessity problem. Option 2 is called the Gorilla / Banana problem. }--. // Don't use `new` and `this`. // --{ Note that we could have many functions on the object returned by canCast(), perhaps one for each spell, but it’s more future-safe to have only one. }--.
{ Javascript }-{ Composition } testing note: Successfully have ways to keep and update the state that was already inside closure of "can-do..." methods. It's very simple. // First, appending new state properties to other old ones, use Object.assign(oldState, {newStateProp1: val1}, {newStateProp2: val2});, the old state properties will be updated (overwritten if necessary), but the refefence will not [ break ]-[ lost ] (if you don't do any state = {...} thing.). (Notice, you don't need the return value of Object.assign() here, since it write the oldState on the fly). // Second, appending new "can-do..." methods to other old ones, use Object.assign(oldCanDoMethodsCollection, newCanDoMethod1(oldState), newCanDoMethod2(oldState)). // You can see we only put everyting in [ one state ]-[ one closure ]-[ one reference ]. If we want to [ update ]-[ append ] something, we don't create the new one, but always use Object.assign() to achieve it, the reference will not [ break ]-[ lost ], and everything will be in one (not more) place. // Notice the deep clone pitfall of Object.assign().
( Javascript ) 3 Different Kinds of Prototypal Inheritance - by Eric Elliott: Link. [ Good ]-[ quality ] resource to reference, but I think I don't need to know { Inheritance } or { Prototype } anymore, I didn't read it at all.
( Music ) { DooPiano } cover - { TWICE } - YES or YES: Link. Very clean, relaxing, still dynamic and creative.
By time:
1. 00:40 Sleep.
2. 08:50 Wake up.
3. 08:55 Uploading blog.
4. 09:05 Bathroom.
5. 09:15 Fixing { github found 3 vulnerabilities on treegb/treegbBlog's } problem: So to update hexo, use npm update (this will not update next theme). To update next theme, use git pull under next theme directory, then resolve the merge conflict (because you generally will overwrote custom config onto theme default beforehand), then git add -A ; git commit -m '...'.
6. 10:22 Preparing ingredient.
7. 10:30 Reading article { Reflections on Clean Code }: Link
8. 11:00 Cooking, [ testing ]-[ experiment with ] the { Javascript }-{ Composition }.
9. 11:30 Eating, [ testing ]-[ experiment with ] the { Javascript }-{ Composition }: The [ testing ]-[ experiment ] makes me leaned a lot, because if I don't do [ testing ]-[ experiment ] before leaning more { Javascript }-{ Composition } articles, I won't know the real problem I will faced, and the key I need to be careful about, so I won't really "understand" it.
10. 12:00 Reading articles about { Javascript }-{ Composition }.
11. 16:25 Finally figure out how to merge 2 closure (inside variable) together", cooking.
12. 16:55 Eating.
13. 17:20 [ Testing ]-[ experiment with ] the { Javascript }-{ Composition }.
14. 18:20 Take a nap.
15. 18:55 Wake up, watching video, taking shower, grocery.
16. 20:21: Watching video: Link.
17. 21:25: [ Testing ]-[ experiment with ] the { Javascript }-{ Composition }: Successfully have ways to keep and update the state that was already inside closure of "can-do..." methods.
18. 22:45: Watching video.
19. 22:55: Reading Javascript article.
20. 23:55: Watching video: TWICE - LIKEY - Part Changed Ver.

2019-06-17

{ Function Composition }

{ Functional Programming }

{ Design pattern }-{ Javascript }

{ Javascript }-{ data type }

Javascript

( Functional Programming ) { Function Composition } For Every Day Use:
1. Link: Link.
2. About: Explain why we use { Function Composition } in Functional Programming. And making some examples.
3. Why function { Currying }?: Function Currying helps you easy to make a long [ pipe ]-[ compose ], because when all function you use have only one argument, and one return (simple), it will become more easy to [ pipe ]-[ compose ] . --{ Function composition requires you to write your functions in a composable way. This means your functions must have 1 input and 1 output. Functions with multiple inputs must be curried. }--.
4. Helps code reusable: --{ You will achieve the highest level of code reuse with function composition. Making our code reusable should always be one of our goals. }--.
5. The { compose() } and { pipe() } function: The compose() and the pipe() functions the article used, is actually the custom function by author, and he also teach you how to simply do it yourself with .reduceRight() and .reduce().
Article - { JavaScript Design Patterns } - by Soumyajit Pathak:
1. Conclusion: Go read book Addy Osmani’s { Learn JavaScript Design Patterns } instead. // GOF seems not very useful for me (at least right now), many of these pattern are design to deal with classic OOP language, since Javascript is more advantage for functional programming, it seems not related and not helpful. But they wisdom of how these [ people ],[ pattern ] deal with classic OOP, is something I leaned more.
2. Link: Link.
3. About { GOF } and Addy Osmani’s { Learn JavaScript Design Patterns }: --{ In this article, we will mainly talk about design patterns from an object-oriented point of view and in the context of their usability in modern JavaScript. That is why many classic patterns from GoF (Gang of Four) may be omitted and some modern patterns from sources like Addy Osmani’s Learn JavaScript Design Patterns will be included. }--.
4. About { OReilly }-[ Addy Osmani's Learning JavaScript Design Patterns ]-[ 2012 ]: See content at 2019-06-07.
5. Singleton Pattern: Mongoose (Node.js ODM library for MongoDB) utilizes the singleton pattern, there is need only one instance for a class. Maybe this is anti pattern in most case.
6. Mediator Pattern: Also see Wikipedia. When I first saw the example in the article, I don't get why we need so highly coupled code. Then later I got it, those airplane are getting data from other airplanes, they need to highly interactive with each other, so without Mediator Pattern this will be even more coupled.
7. Observer Pattern: Maybe not useful for Javascript, some people said in Javascript you use Functional Programming ways to do things, you use Callback function instead.
8. State Pattern: Hmm ... this article use Traffic Light as example, but ... I never seen traffic light have sequence of green, red, yellow, green, red, yellow ... . // This pattern might [ be useful ]-[ have more value ] when different state have very different behavior?
{ Coding Tech } - Understanding CSS Custom Properties: Link. // Change the value, not the varialbe, see 16:03 (this is wrong), 16:13 (this is right). // 16:50 Custom property for responsive design.
( Javascript ) { NaN } data type: Link. The only way to check if something is NaN, is to use Number.isNaN(), there is no other way to do this! (don't even use isNaN()). The quirks again, never successfully remember it after few weeks.
( Javascript ) Truthy and and Falsey: --{ JavaScript has 6 falsey values: undefined, null, 0, NaN, "" (the empty string) and false. All other values are truthy (include nagative numbers!) }--.
( Javascript ) What is the "symbol" primitive data type?: Link. Prevent accidentally property name conflicts between different methods that shared same piece of object.
( Music ): Andreas Waldetoft - Leaving Shore - game { Hearts of Iron II }: Link.
( Music ) { DooPiano } cover - { TWICE } - YES or YES: Link. Very clean, relaxing, still dynamic and creative.
( 自然語言 ) { 柴知道 } - 为什么牛肉叫 beef 而不是 cowmeat？: Link. 規範語言 (典範英語) 違反語言自然發展，自然演變的特性。 --{ 它們或許不規範，不簡潔，不高級，但是正是語言蓬勃生命力的所在。 }--.
By time:
1. 00:20 Sleep.
2. 08:55 Wake up.
3. 09:00 Uploading blog.
4. 09:05 Watching video.
5. 09:35 Reading article about { Function Composition }.
6. 10:50 Cooking.
7. 11:10 Eating, leaning, watching video.
8. 12:20 Reading { JavaScript Design Patterns }: Link.
9. 14:10 Grocery, buy drinks: Sleepy.
10. 14:30 Keep reading { JavaScript Design Patterns }.
11. 14:50 Take a nap: Sleepy.
12. 15:15 Keep reading { JavaScript Design Patterns }.
13. 17:05 Watching video.
14. 19:10 Watching video { Understanding CSS Custom Properties }.
15. 19:30 Preparing ingredient.
16. 19:35 Reading book { OReilly }-{ Head first javascript }: Understand caveats of Types in Javascript.
17. 21:00 Cooking, keep reading book { OReilly }-{ Head first javascript }.
18. 21:45 Eating, keep reading book { OReilly }-{ Head first javascript }.
19. 22:25 { lahSale } ,, help checking online site ,, if it looking properly as localhost.
20. 23:15 Misc.
21. 23:20 Watching video: { 公共電視有話好說 } - 200萬+1港人怒吼！林鄭道歉修例暫緩, 港府為何讓步？北京顧忌什麼？.

2019-06-18

{ Corenet }

{ Functional Programming }

Javascript ,, { getter }, { setter }

Seeing bigger picture and the "form"

{ Functional Programming } basics - part 1 ~ part 6:
1. Part 1 - replace for loop with recursion: Link. According to principle of { Functional Programming }, there is "good" reason to do this, that is - always try to pursue Immutability of initial variables. Once a variables is set (assigned), it should be constant and never changed, we only do [ runtime ]-[ danamic ] value changes and keep passing it in and out between functions, but not changing the declared variable itself. // --{ Functional Languages cannot eliminate Side Effects, they can only confine them. Since programs have to interface to the real world, some parts of every program must be impure. The goal is to minimize the amount of impure code and segregate it from the rest of our program. }--.
2. Problem that { Functional Programming } can solves while { OOP } can't solves: Why Programmers Need Limits ,, read only these 3 sections - Complexity, Reusability, Global Mutable State. // --{ ... making all data structures immutable, i.e. once a variable has a value it can never change ... This doesn’t mean that state cannot change. It just means that to do so you have to pass the current state into a function which produces a new state. }--.
( Drawing ) ( Shading ) 為什麼雞蛋的側邊反而是光影最暗的地方？: Link. 真好的解釋，因為雞蛋那個地方的 polygon 主光跟反射光都幾乎沒有接觸到，而是平行擦過。// 這些知識跟商業攝影也有關係。
( Art ) ( Drawing ) Artist { Wlop }: Link. What I leaned again - always focus on bigger form first, then details later (missing detail is also totally fine), never reversed.
( Music ) { TWICE } - The Best Thing I Ever Did: Link. At first I'm feeling like the melody is kind of boring, plain, lack of creative, but after some time it becomes a more relaxed background music that suit for studying and focusing.
( Javascript ) { Function Expression } vs { Function Declaration }? What are the different use case?: My conclusion - there is just some minor differences, expecially the "undefined" problem of Function Expression (if the invoked line is putting before declared line), but there is no any major advantage using var = function () {...} (Function Expression), actully, 2 of them are functioning the same. I think this is just the personal [ taste ]-[ preference ]-[ style ], but I prefer Function Declaration more because it is much more readable, the code looks just more clean and simple. // References - What is the advantage of assigning a function to a var?, What is the differences between 2?.
( Javascript ) { getter }, { setter } and { closure }:
1. Use it to solve [ break ]-[ reference lost ] problem: I found this trick, I can use { getter } to prevent the [ break ]-[ reference lost ] of an object which one of it's property value is a object reference. For example, if I have a object objWithClosure { foo: bar, changeBar () { bar = "Break!" }, getBar () { return bar; } } which it's surrounding closure has one variable var bar = {a: "aa", b: "bb"}, now you execute objWithClosure.changeBar(), then if you use objWithClosure.getBar() you will get the right result, but if you use objWithClosure.foo you will get the wrong (old) result! To solve this problem, instead using foo: bar, you can use get foo () { return bar; } (which is actually setting the getter here), since the getter will also always "lock" to the closure varialbes, it will give you correct anwer instead of [ break ]-[ reference lost ].
2. When should I use { getter },{ setter }?:
  1. I think they are just as same as other methods inside an object. But the biggest benefits (for now I can come up for) is:
  2. .It solves the "[ break ]-[ reference lost ] of closure variables" problem.
  3. .You don't have to type extra brackets "()":, you use something like obj.prop.innerProp (getter), obj.prop.innerProp = "My new value" (setter), instead of obj.prop.getInnerProp() and obj.prop.setInnerProp("My new value"). It just makes the code looks more clean, thought it is doing the same thing for you.
  4. .You are not allowed to change the value: If you don't set the setter.
  5. Also see: Object.defineProperty().
By time:
1. 00:35 Sleep.
2. 09:00 Wake up.
3. 09:10 Uploading blog.
4. 09:13 Reply Woody.
5. 09:15 Misc.
6. 09:30 Watching video.
7. 10:15 Cooking.
8. 11:00 Eating: Learning Javascript ,, { Function Expression } vs { Function Declaration }.
9. 12:15 { Corenet } ,, refactoring: Remove all class keyword.
10. 13:15 Take a nap.
11. 13:40 Wake up, watching video: { 看电影了没 } - 美国穷人的教育困境，纪录片 - { 等待超人 }.
12. 14:15 { Corenet } ,, refactoring: Remove all class keyword. Use pure function and closure to achieve "object" and "state".
13. 17:55 Grocery, misc: Finished { Corenet } ,, refactoring.
14. 18:35 Cooking, watching video, misc.
15. 19:10 Eating, watching video: Twice Disrespecting Nayeon / "You never treated me like an Unnie! ", Nayeon being protective Unnie.
16. 21:45 Brushing teeth..
17. 21:55 { Corenet } ,, PUT logic..

2019-06-19

{ Functional Programming }

{ Functional Programming } ,, "Side effects"

{ Functional Programming } ,, "Immutability"

{ Corenet }

Javascript

Music theory

Music composition

( Functional Programming ) ( Book ) Professor { Frisby } - { Mostly Adequate Guide to Functional Programming }:
1. Online reading link: 中文線上版, 英文線上版.
2. Chapter 3, What is "pure" function: Link. Why Immutability is so crucial in Functional Programming?
3. Chapter 4, { Currying } and { Curry }-[ helper function ]: Link. The { Curry }-[ helper function ] convert normal function with multiple arguments into "Curry style function". You can write you own one (it's easy to get one from stackoverflow, or google it), or simple use lodash ,, var curry = require('lodash/curry');. // { Currying } is useful for cases like callback funciton that need more extra environment variables (by closure), since you can't have multiple arguments for these callback functions (because the signature is fixed for methods like array.map, array.filter ...), you have to create a closure to put those environment variables beforehand.
4. Chapter 5, { Pointfree }: Link. // --{ Pointfree 模式指的是永遠不必說出你的資料, function 不必提及要操作的資料是什麼樣的。}--. // "Point-free style — aims to reduce some of the visual clutter by removing unnecessary parameter-argument mapping.". // I Still don't understand this. // --{ 不過請注意，pointfree 就像一把雙刃劍，有時會混淆視聽。並不是所有的 functional 程式碼都為 pointfree，不過這沒關係。可以使用他的時候就使用，不能使用的時候就用普通的 function。 }--. So I think it is ok to not to use Pointfree.
( Functional Programming ) { Coding Tech } - understand Functional Programming from basics in ES6:
1. Link: Link.
2. 23:45 { Object.freeze() }: Link. This solved what I don't understand long time ago, that where can I store and modify the final state? The state must be stored (and modified) in somewhere! I must able to change value in some variable! Yeah, finally I got it, Functional Programming is not 100% no state, it is like you can have state, but just keep it as little as possible, and especially don't use state inside most core function (and never mutate your arguments inside these functions!), only use state and do state operation in outer function that mostly deal with I/O operations.
3. 32:45 { Partial } function, that doing something simliar to closure: Link.
4. 35:42 { Currying }: Link. Improving version of { Partial } function?
5. 37:47 "Piecing" it together - some more practical examples of FP: Link.
6. 42:19 { Function Composition }: Link.
7. 51:30 { Recursion } ,, don't worry about itterating 100000 times breaks the Call Stack: Link. ES6 have something called "Tail Call Optimization". And honestly, I think most people don't need to worry about those rare use cases too.
8. 52:12 Another way to write { Recursion } - No Call Stack accumulating: Link. I'm not focus (and care) about the optimization, I'm focus about the different way to write { Recursion }.
9. 56:08 Suggesting the same book too - Professor { Frisby } - { Mostly Adequate Guide to Functional Programming }: Link.
( Functional Programming ) Make a custom function that convert uncurried function to curried one: Link ,, Ömer Kaşdarma's answer ,, that piece of javascript code, dense, but complex logic, works, but don't know how it works.
( Music theory ) A Beginner's Guide to Music Theory: Link. Fundamental knowledge!
( Music theory ) Music Theory Distilled - Part 1: Melody: Link. More advanced than above one. Only watch part of it.
( Music theory ) Music Theory Distilled - Part 2: Harmony: Link. More advanced than above one. Not watched yet. // --{ Whenever you are trying to understand a piece of music, keep in mind, that the rules are broken all the time, they are only hints, so the music may do things that your theory does not predict or understand, never let theory become a constraint on your expression. }--.
( Music composition ) How to make an Orchestral film score music: Link. Informative! Because the workflow looks much more intuitive from creators perspective (compare to some videos), and the software interface is designed intuitive, even for outsider.
( Music composition ) ( Application ) Tuning the volumn of each note: Link. Wow, cool, this natural and fine tuning hugely reduce the robotic feeling of software, makes them more like playing with physical keywoboards.
( Music theory ) How to Imitate a Whole Lot of Hollywood Film Music In Four Easy Steps: Link. I don't even want to lean it, just feeling cool.
By time:
1. 00:01 Reading article about { Functional Programming }.
2. 01:15 Sleep.
3. 08:05 Wake up.
4. 08:06 Uploading blog.
5. 08:20 Surfing net.
6. 08:35 Watching video: { 公共電視有話好說 } - [ 尼特族 ]-[ NEET ]-[ 啃老族 ].
7. 09:35 Learning { Funtional Programming }: I don't get any benifits we get of using Currying. // 第 4 章：Curry（柯里化）, --{ 這裡示範的是一種「pre-load（預先載入）」的能力，透過傳遞一至兩個參數，就能得到一個記住這些參數的新 function。 }--.
8. 11:25 Take a nap.
9. 13:00 Wake up, buying drinks and snack.
10. 13:20 Watching video.
11. 14:00 Watchihng video of { Funtional Programming }.
12. 14:30 Watchihng video of cats: Distraction. Defending our Bird Nest from the Neighbor’s Cats.
13. 14:38 Keep watchihng video of { Funtional Programming }.
14. 16:35 Brushing teeth.
15. 16:45 Learning { Funtional Programming } ,, { Currying },{ Compose }.
16. 18:25 Preparing ingredient.
17. 18:30 Misc.
18. 19:10 Cooking, watching video.
19. 19:35 Eating, watching video: Mostly about Music Composition and Music Theory.
20. 22:15 Reading article about javascript ecosystem fundamental knowledge: Like npm, ES6 module, common.js, require.js webpack.

2019-06-20

Javascript

Front-end ecosystem

Node.js

{ Npm }

{ CommonJs } module

{ ES module }

{ Webpack }

{ Transpile }

{ Babel }

{ Vue.js }

{ Corenet }

( Javascript ) ( Front-end ) Javascript ecosystem fundamental knowledge - Alex Tzeng, 曾苔眠:
1. Link: JavaScript - JS 生態系及週邊工具整理系列.
2. About: 系列文。讓我大幅的了解整個生態系統，和 bigger picture。 我一開始只是想知道 common.js 是什麼東西，結果發現愈挖愈多東西，於是想要趁機 [ 補充一下自己常識的不足 ],[ 增加自己的視野 ] ,, 關於 Front-end 的整個生態系統。 // Including Npm, ES6 module, Common.js, require.js, Webpack, Babel, Vue.js ... . // This article series were published around 2017-12, are current enough.
3. 系列文 - 打造 Messenger Extension - Day 4 - Vue.js 基本介紹 + 優缺點: Link. Mentioned about Youtuber - Fun Fun Function, this is the main reaosn why I keep this li because it is the evidence of Fun Fun Function been suggested by multiple sources. // Compare the differences between Vue [ style ]-[ philosophy ] and react style.
4. 系列文 - 你所不知道的 JavaScript 模組化歷史，NPM & Module : Link. script loader 的誕生 (是過渡時期的暫時解決方案)。
5. 系列文 - 歡迎來到大分叉時代 - AMD 與 CommonJS 的發展 : Link. --{ 基本上 Webpack 的概念很有趣，他是這樣想的 - 「在我實作瀏覽器版本的 CommonJS 模組時，可不可以一起支援 npm 上的套件，這樣我就可以使用 npm 來整理我的函式庫了」 - 這一舉動簡直是驚為天人 ... }--. // How CommonJS loading module is sync, not async like ES module in front-end.
6. 系列文 - 前端也需要編譯？Transpile、Compile、Minify、Uglify 基本介紹: Link. Webpack 跟 transpile 是有關係的。// 好像會跟 Babel 也有關？ // 好像也會編譯 Front-end framework 的語法 (Vue specific syntax)？
7. 系列文 - Webpack 入門教學，零設定: Link. Webpack 跟 transpile, require() (可以使用模組) (CommonJS) 有什麼關係？
8. 系列文 - Webpack - module、bundle 和安裝 : Link. 不用看，只是在講什麼是 "module bundle"，and Webpack [ generated ]-[ transpiled ] bundle.js file.
9. 系列文 - 使用 webpack.config.js 來設定 webpack ! : Link. 看看就好，不用真的學，用到再學，因為 vue-cli (?) 已經把這些事情自動化了 (？)
10. 系列文 - webpack.config.js - 設定 module 來編譯不同類型的檔案 : Link. 原來 webpack 在做的事情是這樣的概念! // 什麼是 loader? (css-loader, sass-loader, style-loader, vue-loader, react-loader, babel-loader ...). // --{ webpack 不只打包 JavaScript，而是連同 React, Vue, CSS, Babel 都可以透過 webpack 來編譯 }--.
11. 系列文 - 不只是瀏覽器！JavaScript 征服世界的第一步 - Node.js (Day 8): Link. 什麼是 Javascript runtime (實作)? (我的理解是 ECMAScript 的 implementation)。Node.js 跟 SpiderMonkey？
12. 系列文 - 什麼是 Browserlist？設定 Autoprefixer、Stylelint 來支援你想要的任何瀏覽器！: Link. 什麼是 Autoprefixer? 自動為 CSS 裡面的 rules 加上 prefix, 比如使用 display: grid; 以後，Autoprefixer 會自動另外增加 display: -ms-grid; (給 IE 11 看的).
( Javascript ) ( Front-end ) Relation between CommonJS, AMD and RequireJS?: Link. Conclusion - Very complex and I don't want to know the detail, basically you use module.exports = ... and requrie(...) in back-end (common.js, will load with "sync"). For front-end, you can use ES6 module (will load with "async"), but for vue.js framework, you use like back-end does.
( Javascript ) ( Front-end ) All about using ES6 (ES) module:
1. Link: Link. Great article!
2. Syntax of { export } and { import }: Link1, link2.
3. Conclusion: Not mature yet, use bundle instead (bundler like Webpack.js). And if you are using Vue.js you don't need to do this manually.
4. Problem ,, many CDN still don' support loading with ES module way: lodash ,, --{ Popular libraries are starting to be published as ES modules now, however they’re still targeting bundlers and not direct imports. }--.
5. Preloading ES Modules: rel="modulepreload" (Preloading ES Modules) helps you to reduce the go back and forth network request amount when your ES6 module have nested dependency, but this is still not mature and still have long way to go. Also see All about Preloading ES Modules.
( Javascript) Data type - { Map } vs { Object } - What and when?: Link.
( Javascript ) ( Back-end ) ( Node.js ) The Node Knowledge Challenge - Learning the Node.js Runtime: Not very useful, forget about this article. // Link, old link (backup only). // --{ Before you bury yourself in packages, learn the Node.js runtime itself. I believe the majority of developers learn Node the wrong way. Most tutorials, books, and courses about Node focus on the Node ecosystem – not the Node runtime itself. They focus on teaching what can be done with all the packages available for you when you work with Node, like Express and Socket.IO, rather than teaching the capabilities of the Node runtime itself. }--. // Test yourself with those questions to see what you still miss for understanding Node.js.
( Npm ) kik, left-pad, and npm incident: The point of view from NPM. // The point of view from Azer. // The point of view from Kik (their lawyer email to Azer): --{ We don't mean to be a dick about it, but it's a registered Trademark in most countries around the world and if you actually release an open source project called kik, our trademark lawyers are going to be banging on your door and taking down your accounts and stuff like that — and we'd have no choice but to do all that because you have to enforce trademarks or you lose them. Can we not come to some sort of a compromise to get you to change the name without involving lawyers? Is there something we could do for you in compensation to get you to change the name? }--. // About Npm and Azer, in their own perspective and viewpoint, actually they are both doing right. While Kik is just a company and only consider about it's own benefits.
By time:
1. 00:01 Uploading blog.
2. 00:15 Reading article about Node.js: The Node Knowledge Challenge - Learning the Node.js Runtime.
3. 01:45 Reading article about Javascript Module, { Webpack }.
4. 03:00 Watching video.
5. 03:30 Sleep.
6. 04:00 Wake up: Insomnia.
7. 04:01 Misc.
8. 06:10 Sleep again.
9. 14:45 Wake up, preparing ingredient.
10. 14:53 Watching video, cooking, eating.
11. 16:05 Watching video { Promises - Part 8 of Functional Programming in JavaScript }: Link. Not helpful, I thought this video were going to provide me some caveats I need to know when using Promise in Functional Programming.
12. 17:00 Reading article about { nmp }-{ left-pad } incident.
13. 18:40 Reading articles ,, "Javascript ecosystem fundamental knowledge" series.
14. 21:25 Taking shower, cooking.
15. 22:17 Eating, watching video: So sleepy, don't want to do any work.

2019-06-21

{ Corenet }

Debugging in { Vue.js }

Date and time - { ISO 8601 }

Tired, low energy

Wasting time

Boring

( Programming ) 10 Programming side projects to boost your resume: Link. Maybe is a useful article, for giving advice to people who want to build side project. // There might be more useful article here, like The 5 hurdles of hirability. // And my thought is, if you look from the "results" perspective, most side project people build, is pretty boring and reinventing the wheel (todo list apps, twitter bot ...), but if you look at "middle process" perspective, during the process of solving problem could be fun (if the problem to be solved is not too challenging, or to simple). So maybe I have to change my altitude, learn to make the fun (or deceive myself?) during the process of solving problem. This Self balancing robot should be fun to make. And even more, seeking problem to be solved intended like Where can I find programming puzzles and challenges?, might be fun for some people like to challenge themselves.
( Vue.js ) Debugging in { Vue.js }:
1. My conclusion: No, you can't get the line number where error thrown, but you can [ reasoning ]-[ guessing ] manually, until you gradually have clue where the bug comes from. Yeah this sucks, but this is how people deal with the debugging currently. // Although you can't know the error line number, but sometimes you can at least know the component name.
2. Problem overview: This bugs me again and again! I always want to know how but still I don't find any tutorials! How the hell can I get the line number where error occurs in javascript in vue? The default error messages in web console is useless, since you only see line number of app.js, not the real Vue component's line number since Webpack transpiled everything already.
3. Debugging in VS Code: Link. Conclusion - All of the method mentioned here, is for [ people ]-[ cases ] to guess where the actual bug is hidden (actively), not for [ people ]-[ cases ] to know where the error thrown ,, line number is located (passively). // All these methods are all realated to getting the state, or setting breakpoint. // Tools including Vue Devtools firefox plugin, debugger statement.
4. Getting more specific information about runtime errors? (error line number) Link. --{ Sourcemaps are notoriously tricky ... About the second point, the actual error code, that’s not that easy, because the template is converted into a render function, and mapping an Error in that Javascript function to a line in the template is not really possible. }--, sigh ... so what is the point of source map?
5. Are error messages normally this useless or are sourcemaps not working?: Link. Yeah, source map are pretty useless. So it seems I found many people instead of trying to fix the bug from the hinting of line number from web console, they use some guesses like this case ... works, but very unintuitive and painful.
{ ISO 8601 } - { Moment.js } - date and time:
1. ISO 8601: ISO 8601. The ISO 8601 page shows what is the meaning of 14:30:05Z and 22:30:05+08:00. // So I think 2019-06-21T08:22:43.317Z = 2019-06-21T16:22:43.317+08:00 = 2019-06-21T02:22:43.317-06:00, they all means the same [ time ]-[ moment ] on the earth though they have different local time and time zone! It doesn't matter where you located (country), at that moment the England time is always 2019-06-21 08:22:43.
2. Moment.js Documentation: Moment.js Documentation.
3. Convert object to { ISO 8601 } string: The Moment.js use moment().format(moment.defaultFormat) (or no argument inside .format()) to convert moment object to ISO 8601 string, while native javascript Date object use (new Date()).toISOString() to convert Date object to ISO 8601 string.
4. Submit date time from front-end to back-end: This is my plan - in front-end you use MomentJs object, when submit you convert it to ISO 8601 (string), then when back-end received it it converted to MomentJs object and also do validation. And finally before it saved into MongoDb it converted to Javascript native Date object (maybe this step could be omitted, if MongoDb could also accept MomentJs object as input).
{ Fun Fun Function } Why separating files into html, css, javascript, is not "Separation of concerns"?: Link. Also, "long function are bad" is not always true, you should split your function by considering "Separation of concerns", not how long it is.
How Air Traffic Control Works - { Wendover Productions }: Link.
By time:
1. 00:15 Sleep.
2. 07:50 Wake up.
3. 07:57 Uploading blog.
4. 08:10 Watching video, misc: Low energy, can't do anything. // 台灣禁止巴拉刈 (農藥)， { Twice } related, Dog on Remote Island Near Belize is Rescued and Brought Home | The Dodo.
5. 10:14 Setting up testing environment: Now I instead of using single html file to do all javascript testing, I build a dummy, reusable Vue project for testing purpose. The reason of this is it allows me to install npm modules. With single html file it is hard to do this.
6. 11:15 Figuring out how to debug in vue: This bugs me again and again!
7. 11:55 Take a nap: Too tired, sleepy.
8. 12:40 Wake up, buying drinks and snacks.
9. 12:55 Keep figuring out how to debug in vue:
10. 14:20 { Corenet } ,, PUT logic..
11. 14:55 Bathroom..
12. 15:05 Testing date and time related logic.
13. ??:?? { Corenet } ,, date and time related logic: From input to backend.
14. 17:22 Watching video, wasting a lot of time: Twice, Kids Jump On Moving Trucks To Steal To Feed Families, Deadly School Rivalry Behind Clashes At Bangkok's MBK, Is Aung San Suu Kyi A Fading Icon?, Risky Jobs: The Lift Fixer.

2019-06-22

{ Stoicism }

柯文哲

Simplicity - dealing with complexity elephant

Newbie can join many open source project

People, lives

{ Front-end } and { back-end }

What is consider a terrible API?

{ PATCH } vs { PUT } method

"State" always causing "side effect"

{ Corenet }

( 柯文哲 ) ( Stoicism ) 20190615 陽明大學畢業典禮 - 人都會死，所以世俗的成功與失敗，不過是你生命中的一部分:
1. 09:00: Link. --{ 你會想通一件事情，人最後都會死掉 ... 只有人死而平等這句話才是對的 ... 不管 ... 人，最後都會死掉，你想通這件事情，不管你一生中是成功還是失敗 ... 都是生命中的一部分 ... 會讓你有非常強的抗壓性 ... 讓我們對不確定的事情有很強的忍受性 ... }--.
2. 12:00: Link. --{ 我常常看到什麼叫做 ... 一家歡樂一家愁 ... 器官交換 }--.
3. 20:44: Link. --{ 所以，人事無常，悲歡離合，生離死別，看淡人生。 }--.
Simplicity - dealing with complexity elephant - { Rich Hickey }:
1. Link: Link.
2. 02:30 Simplicity means reduce interleaving, not cardinality: Link.
{ FreeCodeCamp } - How I went from being a contributor to an Open Source project maintainer: Link. Newbie can join many open source project. Don't work in isolation, this article gives you some hint to lead you from being a lone software developer, to contributor to collaboration with online open source community, of any github project. Though the project in this article might not be very useful (and practical), but it is fun (it seems) to collaborating together. --{ The main idea is to have fun and build something collectively. }--.
The book that changed my social life - book in 1936: Link. The book is How to win friends and influential people - 1936. I'm not interested in the book, I'm interested but this point that might could be general applied for socializing - --{ lesson one: It's all about the other person. }--.
{ Fun Fun Function } - Depression can kill people (people will kill themselves): Link. --{ I am very aware that depression is a deadly disease, it is not uncommon that a depression kills you ... we as a culture over trivialize the problem of feeling unhappy at work ... }--.
( Inspiration ) ( Touching ) Sleep-Deprived Dog Has A Nightmare Every Night: Link.
( REST API ) ( Back-end ) What is consider a terrible API? - Fixing with { Backend In the Frontend } architecture: Link. I think the Backend In the Frontend is using the SOLID principle ,, dependency inversion principle, it is basically an huge interface.
( REST API ) { PATCH } vs { PUT } method: Link. It's important to note that PUT is used to replace the entire resource, it doesn't do partial updates like what PATCH does! // My conclusion is, you don't need to use PATCH in the most of the case, you thought it is more efficient, but the truth is it will makes the logic more complex! Just update the entire same data to database, make the system more simple in bigger picture, even it is a bit more "wasteful". // But the bigger reason is related to the state. According to here, with PATCH, you have some side effect just like what Functional Programming says about OOP, you have problem that comes from having different state, because PATCH is for providing an instruction to change a resource.
( Front-end ) ( Back-end) How to avoid business logic (validation) duplication?: Link.
( Functional programming ) How do you compose JavaScript functions with multiple parameters?: Link. Though the 2 example this article given ,, I still not yet encounter this kind of problem (redundant lines of code), but I start to understand why people using Functional Programming always bring out these topics - currying, function composition, again and again.
( JSON ) How big is "too big" for JSON?: Link. Don't need to consider the JSON size limit, in practical usage there is no limit, the browser will crash first (if that JSON file is absurdly huge) before you reach the limit.
( Javascript ) { Generator function } and { yield } keyword: Link1 (Fun Fun Function), link2 (Fun Fun Function). // Use Async/Await 99% of the time over Generators. So forget about Generator function, you don't need to use it in most cases. It is just the Javascript ,, developing history ,,legacy.
By time:
1. 00:25 Sleep.
2. 07:40 Wake up.
3. 07:44 Uploading blog.
4. 08:00 Misc: Reflecting, preparing ingredient, cooking, eating. // Life is such a big paradox, when you thought you found the rule of life and philosophy, you don't, it always changing. And your [ perspective ]-[ interpretation ] always changing back and forth too. Something feel like meaningful, could become meaningless in next month, something feel like fun, could become boring in next month. And one more month it changes again ... .
5. 09:50 Reading articles about open source collaboration, understanding { Generator function }: Not really important stuff.
6. 10:45 Take a nap.
7. 11:55 Buying drinks, fruit.
8. 12:10 Watching video.
9. 12:55 Watching video { Simplicity Matters }-{ Rich Hickey }, reading some articles.
10. 14:30 Watching video: Twice.
11. 14:37 Understanding { PATCH } vs { PUT } method: This is related to (and will hugely change how I design) the architecture of { Corenet }. I got a valuable lesson that I shouldn't use PATCH method, but use PUT method instead. Glad I know this just before I was going to write the code using PATCH way.
12. 17:00 Cooking.
13. 17:20 Eating, watching video.
14. 20:40 { Corenet }: Moslty not pushing forward. I once again stuck into writing some unimportant code again, related to how to structure the config data. So now I will give up making my "object" ,, property private, I just make them naked, keep it as simeple as possible. I give up using Setter and Getter, because they increase the complexity and duplication of code, and I don't really see the value it can prevent the error since that are too rare to happened in this moment.
15. 23:15 Watching video.
16. 23:55 Sleep.

2019-06-23

{ Hallucination }-[ Point of view ]

{ Corenet }

( Thought ) ( Hallucination ) ( Stoicism ) [ Point of view ]-[ perspective ] - optimistic or pessimistic? - good or bad? - meaningful or meaningless?:
1. About { Hallucination }-{ Stoicism }-{ Point of view }: I recently come up with the [ idea ]-[ thought ] that, Eveything surrounding us in our life -
  1. Is not inherently good or bad.
  2. Have no any meaning (meaningless), anything is just physically functioning in the universe, but they have no any meaning.
  3. The good or bad, meaningful or meaningless, all depends our Point of View, how we interpret it.
2. { 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.
3. Story - Is the glass of water Half Empty or Half Full?:
  1. Half full or half empty? - children’s story/parable: Link. Even a little girl with cancer she is being super optimistic.
  2. Do you only see the cost? or value?: Link.
4. ( 柯文哲 ) ( Stoicism ) 20190615 陽明大學畢業典禮 - 人都會死，所以世俗的成功與失敗，不過是你生命中的一部分:
  1. 09:00: Link. --{ 你會想通一件事情，人最後都會死掉 ... 只有人死而平等這句話才是對的 ... 不管 ... 人，最後都會死掉，你想通這件事情，不管你一生中是成功還是失敗 ... 都是生命中的一部分 ... 會讓你有非常強的抗壓性 ... 讓我們對不確定的事情有很強的忍受性 ... }--.
  2. 12:00: Link. --{ 我常常看到什麼叫做 ... 一家歡樂一家愁 ... 器官交換 }--.
  3. 20:44: Link. --{ 所以，人事無常，悲歡離合，生離死別，看淡人生。 }--.
5. ( Inspiration ) 創意的三大要素 - { 抖抖村 }:
  1. Conclusion: 藝術家，或更廣泛來說，很有創意的人，在某種程度上都是對現實做某種程度的扭曲，修改，加上自己主觀的解讀，表現出 ((只屬於)) 自己世界裡看到的視角。
  2. Link, and content: Link. 1. 大量吸收知識識 (基於現實) 2. 發散思考 (新東西) 3. 收斂思考 (有價值的東西). // 繪畫學習的三個階段 - 1. 兒童般的亂畫 (全發散思考) 2. 系統規範的繪畫 (全收斂思考) 3. 突破規範的 "童貞" (發散 + 收斂)。
6. { Twice } - all members having high degree of Imagination, { Hallucination }, Optimism: Link.
7. Albert Einstein quote - "Imagination is more important than knowledge": People having some discussion and debate here.
( Music ) { TWICE } - Headphones: Link. Pure rhythm, very little melody.
( Music ) { TWICE } - Jelly jelly: Link. Pure rhythm, very little melody.
( Music ) { TWICE } - Wake Me Up: Link. Pure rhythm, very little melody.
( HTTP ) Difference between { Accept } and { Content-Type } HTTP headers: Link.
( HTTP ) Common Header type - request and response: Link. Throw away info.
By time:
1. 08:05 Wake up.
2. 08:10 Uploading blog, fixing keyboard.
3. 08:40 Thinking about { Hallucination }-[ Point of view ].
4. 10:15 Cooking, eating, watching video.
5. 12:20 { Corenet }: Still very unsure and can't decide how to perfectly set up a dead simple javascript object that contains property (states) and methods (operate those states), even I already spent so much time on this. I don't want to use this keyword, and this brings me some cost I have to paid with this decision.
6. 13:10 Taking nap: Sleepy and not productive.
7. 13:50 Wake up, watching video.
8. 13:56 { Corenet }: Finished [ changing ]-[ applying ] all the javascript object to follow the new convention, that don't use this keywords, but pure closure.
9. 16:17 Eating red beans, watching video.
10. 16:43 Taking shower.
11. 17:17 Watching video. { Fun Fun Function } - Top developer habits - Perseverance. --{ Programming is a marathon, not a sprint. }--, --{ You can't be this person with low productivity for a long time and then a burst of productivity at the end of project, you need to be this person that has a medium level of productivity all the time. }--.
12. 17:50: Grocery, buying drinks: Sleepy.
13. 18:15: { Corenet }: PUT logic, both front-end and back-end. // Still sleepy at first, don't know why, low productivity. But later become much more focused and have much more clear mind.
14. 21:15 Cooking, { corenet }.
15. 21:45 Eating, watching video.
16. 23:05 { Corenet }: PUT logic, both front-end and back-end. Starts to think about how to write PUT logic for model that update parts of data.

2019-06-24

{ Corenet }

{ JYP }-{ Park Jin young }

{ Twice }

Intimate relationship

[ Personality ]-[ real ]-[ true ]-[ honest ]-[ consistent ]-[ open ]-[ frank ]-[ plain ]

Intimate relationship:
1. { Twice } - A Story of Yogurt Aloe by Momo & Sana - "Selfish Momo": Link. My posture is very similar to this dog.
2. { Twice } - The best of SaMo (sana & momo) - japan gay line: Link.
3. { Twice } - Times When Momo Was Too Cute: Link.
4. { Twice } - Twice as a gay drama (mostly Saida, Samo, Dahmo): Link.
{ Twice } 1st tour - every member is crying on stage: Link.
( Music ) { Twice } - Knock knock: Link.
( Music ) Mashup of { TWICE } - Fancy, TT, Likey, LOA, DTNA, Yes Or Yes...: Link.
( Music ) Mashup of { TWICE } - HAPPY HAPPY, What Is Love?, Heart Shaker: Link.
( Music ) { JYP }-{ Park Jin young }:
1. { JYP } - Don't Leave Me: Link, link2, audio. The background: --{ He said this at a korean show. "I failed every audition because of my outer appearance." Said JYP. He continued, "I auditioned with 'Don't Leave Me' a song I composed myself and Lee Soo Man hyung let out a heavy sigh as soon as he saw my face." JYP then explained, "However, Lee Soo Man hyung called me out again asking me to sell my track 'Dont Leave Me' to him but i refused. That was the saddest audition ever in my entire lifetime." }--. --{ He wanted to become a trainee in SM Ent but was rejected. Now he's the CEO of JYP Ent. }---.
2. { JYP } - "Still Alive": Link.
3. { JYP } - Honey - covered by a girl: Link. --{ This girl is 15, she never had singing lessons or guitar lessons and do you know what she said after the judged asked her if she knows harmonics, "No, but it sounds cool." }--.
By time:
1. 00:01 Update blog.
2. 00:10 Watching video.
3. 00:30 Sleep.
4. 08:40 Wake up.
5. 08:50 Watching video.
6. 10:50 { Corenet }-{ back-end }: PUT logic for model that update parts of data.
7. 11:45 Cooking, eating, watching video.
8. 14:00 { Corenet }-{ back-end }: PUT logic for model that update parts of data.
9. 16:36 Watching video, eating tangerine: Mostly about Twice again.
10. 18:30 { Corenet }: PUT logic, accross back-end including controller and model, and front-end.
11. 20:55 Preparing ingredient, cooking, understanding { CORS }.
12. 21:50 Eating, watching video.
13. 23:55 Sleep.

2019-06-25

{ Corenet }

HTTP - { CORS }

Unit Test vs Integration Test

( Music composition ) You don't need to learn music theory first before you can write a piece: Link. You can just placing notes by only using ears, this still works.
( Music theory ) { JYP } - Honey - covered by a girl: Link. --{ This girl is 15, she never had singing lessons or guitar lessons and do you know what she said after the judged asked her if she knows harmonics, "No, but it sounds cool." }--.
( Javascript ) 3 ways to create an object that holding states and methods: Link,, section 1. Block scoping, 2. Function scoping, 3. "this" keyword.
( Javascript ) Getters/Setters. Evil. Period: Link. (You can see why OOP is better than Imperative paradigm in this article, but you still need to know why functional programming is better than OOP). // This is not javascript specific, but it doesn't matters. // Maybe the stance of this article is not always right, but the main point of this article is --{ A Ball and A Dog }--, --{ true object-oriented programming, objects are living creatures, like you and me. They are living organisms, with their own behavior, properties and a life cycle. }--, I think the main point is, treating and using object like an individual that holding active state and methods, don't threat them like a state holder.
{ Twice } - 'What is Love?' MV Movie References Side-by-side Comparison: Link. Not very important, but a bit interesting story.
{ Fun Fun Function } - Unit tests vs. Integration tests: Link. 13:13 downside of unit test (they do not test the { contract }), 18:00 downside of integration test (more expensive, can't tell you where the problem is, can't simulate errors (like in unit test can test what should be true and what should be false), harder to write).
{ Fun Fun Function } - How to do mocking for Unit tests: Link. Inspiring, since I never see the real code myself before, even the code in this video is just a simple example. So after watching this video, I found there is really not magic here, the idea is simple, just mock the [ environment ]-[ dependencies ], and starts to test the target unit.
{ Fun Fun Function } - Settings are evil - combinatorial explosion of test cases: Link.
By time:
1. 08:10 Wake up.
2. 08:18 Uploading blog: reflecting about I only working on { Corenet } about 5.5 hours yesterday ... that was bad efficiency ... Maybe increase the time for this today.
3. 08:40 Watching video.
4. 09:20 Cooking, understading { CORS }.
5. 10:00 Eating, watching video, bathroom.
6. 10:50 Understading { CORS }, { let } vs { var }: Including "simple request, and "not-so-simple requests" (formally called { preflight request }), and both are { CORS } request. // Correctly setting CORS for my express.js (cors package ,, readme). // { let }, so I don't see any reason to use var anymore, but at the same time, I don't feel like I need to use const too.
7. 13:25 Buying drinks, grocery.
8. 13:45 Watching video.
9. 15:35 { Corenet }: PUT logic, accross back-end including controller and model, and front-end. // Testing and learning getter and setter again.
10. 18:05 Misc.
11. 18:25 Cooking, coding.
12. 19:05 Eating, watching video.
13. 21:00 Watching video about unit test.
14. 22:10 { Corenet }: PUT logic, accross back-end including controller and model, and front-end. // Fixing bugs.
15. 22:50 Brushing teeth, watching video.
16. 23:15 { Corenet }: PUT logic of post done. // Starting to think about POST logic of post now.
17. 23:58 Uploading blog.

2019-06-26

{ Corenet }

{ Dependency Injection } ,, custom "dependency manager"

( Stoicism ) Always living in "now" - TedTalks: Link. Don't focus on those thing we can't control.
Twice - Tzuyu personality have been erased after the "flag controversy" incident: How can personality of a person been erased just by a single incident. // Video of Tzuyu before flag controversy. // --{ twice tzuyu has the saddest injury the mental injury that pain will never be erased ... flag controversy about Tzuyu holding her National Flag (Taiwan') ... apology video ... kinda ruined her confidence and personality. She was quirky, lively, outspoken, talkative before that incident. Now she almost dropped all character ... Yeah when I started liking Twice and became a Once, I didn't understand why she was so... empty. But after knowing about this I think I understand the amount of harshness she had to go through and just kind of broke a bit. }--.
Twice - Wake Me Up - instrumental: Link.
( Animal ) Quick brown fox jumps over the lazy dog: Link.
天使女孩／全身黑痣: Link.
( Music ) { ThePianoGuys } - Avatar in Real Life! - The Piano Guys in Disney World: Link.
( Music )【女性が歌う】ひまわりの約束/秦基博 "STAND BY ME ドラえもん"主題歌（Full Covered by コバソロ & 春茶）: Link.
Meet The Strongest J-pop Girl Idol | ASIAN BOSS: Link. Interesting, but unread.
( Programming ) Dependency Injection - custom dependency manager: These resources I read give me some idea, maybe I can write my own custom dependency manager (dead simple), it will be a global object (DI), and almost inside of every functions from big to small will solely rely this global object (DI) to fetch dependencies they want. This global object (DI) is essentially a big interface, the dependencies stores in a "map" that the key is function's name and the value is function's real path, so if for example I want to rename the function name, I can only change the value, and keep the key untouched, so all it's dependent [ won't break ]-[ don't need to update ]. // And about the DI itself, I will pass it to function argument (for every function) so those function using DI won't need to know where it comes from, so if the path of DI changes, nothing breaks.
( Programming ) Dependency Injection - When is it not appropriate to use the dependency injection pattern?: Link. --{ SOMETHING, SOMEWHERE, must have knowledge of the dependent, the dependency interface ... DI tends to place all that knowledge at a very high level ... }--.
{ Fun Fun Function } - Dependency Injection helps unit testing: Link. But I still have so much question, if I have to feed all dependencies inside function's argument, then the number of dependencies keep adding up from bottom to top, finally the toppest level function will have to include [ so much ]-[ all ] dependencies?
Software development - Why company always rewrite a new software product, instead of improving old one? - { Fun Fun Function }: Why software needs to dies over times. Because the complexity is huge, adding a new feature is much more easy then removing an old feature, so the complexity of software overtime inevitably grows. Rewrite is easier, faster.
( Webdev ) { URL } API: Link. After doing a little searching, I found the best way to manipulate url is still using native simple { URL } API, and do other manipulation [ manually ]-[ myself ], like "join" and "split" (like myURLObj.pathname.split("/").filter(itm => itm !== "")).
By time:
1. 00:10 Watching video:
2. 00:50 Sleep.
3. 09:05 Wake up.
4. 09:10 Watching video: Doing research on { Twice } ,, { Tzuyu } ,, "flag controversy" incident
5. 10:25 Grocery, cooking.
6. 11:00 Eating, watching video.
7. 11:50 { Corenet }: Front-end ,, "new post" related work.
8. 13:00 Watching video.
9. 13:30 Taking a nap.
10. 14:00 Watching video.
11. 14:30 { Corenet }: Front-end ,, "new post" related work.
12. 16:20 Eating fruit, watching video.
13. 18:25 Brushing teeth.
14. 18:35 { Corenet }: Front-end ,, "new post" related work.
15. 20:15 Cooking, eating, watching video:
16. 21:45 Understanding more about { Dependency Injection }: Though not directly gain something, but seems comes out some indirectly idea of making my code base more manageable.
17. 23:05 Thinking about { Dependency Injection }, eating fruit, watching video.

2019-06-27

{ Corenet }

External and internal motivation

{ Contemporary/modern dance }-{ 現代舞 }

( Psychology ) { Cognitive Evaluation Theory } - External and internal [ motivation ]-[ incentive ] system:
1. { Fun Fun Function } Losing motivation: Link. External and internal incentive - need to feel competent and also need to feel everything is in my control.
2. Theory theory suggests that there are actually two motivation systems: Link. --{ Extrinsic Motivators ... Pay, promotion, feedback, working conditions — things that come from a person’s environment, controlled by others. }--, --{ A boss who is always dangling this reward or that stick will turn off the intrinsically motivated people. }--.
3. 興趣沒有目的地 - 曾博恩 - 做鋼鐵人模型 - 路人問你這個要賣多少? - 我做完後就直接把他踢到牆角去了: Link.
4. ( Contemporary/modern dance ) ( 現代舞 ) Momo & Mina - falling for ‘Dangerous Love’ - { Mnet }: Link. // --{ ... show us one of the darkest meaning of love ... }--. // --{ I guess this dance is the tragedy of an abusive relationship in Korea years ago. A guy was madly in love with a girl and he locked her in a room. That's why Momo pushed Mina into the box. The girl contacted the police for help, and it was even all over the news, but no one did anything to help her. Eventually the girl died due to starvation and abuses. At the end of the dance a bunch of people came out covering their eyes pretending they cant see anything, that symbolizes the neglect of the society towards this incident. While the paint of their faces symbolizes the sin and responsibility on each of them. Yes indeed, Momo ( the guy) is the murderer in this case. Yet the dance wants to convey the message that the society indirectly killed the girl and should bear responsibility as well. }--. // --{ A MM it's about an abusive relationship Momo is the toxic lover who wants mina all to her self and she locked her tell mina got sick of it and committed suicide or you can say Momo killed her and Than Momo goes back into the world as if she did nothing and the blindfolded people are the public who over looks this kind of relationships and didn't stand for the women's right they sow what's happening but didn't help nor cared , some people are saying it represents a real story of a couple in Korea where the girl really committed suicide in the end , my explanation was so bad obviously. }--.
5. ( Music ) TWICE - Candy Pop: Link. Highly loose and unpredictable. No main melody.
6. ( Javascript ) Object - { Object.entries() }: Proper way to loop through JS objects. Related to Object.keys() and Object.values().
7. { Fun Fun Function } Is Programming Art? - We need way more types of programmer, from various fields: Link.
8. ( Javascript ) Array - "3f" - { .forEach() },{ .filter() },{ .find() }: Related to { .find() }. Also see { .some() }, { .every() }, { .includes() }.
By time:
1. 00:05 Uploading blog.
2. 00:15 Watching video.
3. 00:35 Sleep.
4. 08:40 Wake up.
5. 08:45 Reading articles, cooking.
6. 10:20 Eating, watching video.
7. 11:00 Brushing teeth.
8. 11:10 { Corenet }: "new post" related work.
9. 15:30 Watching video.
10. 15:50 Taking shower.
11. 16:30 Grocery, misc.
12. 16:45 Watching video.
13. 19:05 { Corenet }: Finished "new post" related work.
14. 21:30 Watching video: TWICE "Move (Taemin)" cover dance practice.
15. 23:10 { Corenet }: Makes "messenger" have "dialog" functionality, so it not only show messages, but accept different types of input, user will be prompt to make decision in some cases.

2019-06-28

Portfolio and Resume

{ Corenet }

Prefer more straightforward code

Drawing ,, { posture }

( Music ) TWICE - Nayeon - Only Longing Grows - cover:
1. About: A nostalgic song that makes you want to cry without any reason.
2. Live with here mom: Link.
3. Audio: Link.
4. Audio ,, empty arena + rain sound effect: Link.
5. Better skills used doesn't always means better: This version ,, singer has better skills, but just feel like losing something compare to Nayeon's thus "not better". Many times simpler is just better.
( Programming ) { Fun Fun Function } - The 3 stages of growing as a programmer: Link. So, writing your code to be reusable, higly abstract and general, extensible, elegant, concise, comes with a [ trade off ]-[ cost ], if you can't get more value back later when you are making this decision, then you are actually losing more and it don't worth it. In almost every cases, is is better to write a dead simple straightforward code that is more readable, instead of elegant and smart code. They key is, knowing when to write like this (smart code) and when not to. // The 3rd stage of mindset is like this: --{ move fast, break things, revise, fix, and get shit done }--.
( Drawing ) { 抖抖村 } 如何畫人體動態 - { posture }: Link.
( Intimate relationship ) 180429 TWICE - Sana touching Momo's cheek - fancam - 4K: Link.
( Music ) TWICE Stage Compilation - 2h:15min: Link.
( Javascript ) ( Promise ) Resolve javascript Promise outside function scope: Link. Cool! Useful! I just want a promise object get resolved when I click a button. And way before the button get clicked, that promise object already get retuned to some other async function but still "pending". // If you want to build a factory function for this, use this code pattern (the bottom code snippet), nothing new from first link ,, answers, but just this is cleaner than the answer that using class to achieve it (Deferred Pattern).
( Javascript ) { Promise.resolve() },{ Promise.reject() }: Instead of use the promise constructor for things like if(someCondition), you can write like this too - let p = Promise[(someCondition) ? "resolve" : "reject"]();, this is more concise (but just preference). Also see { Promise.resolve() }.
( Full-stack ) Server-Sent Events: Link. --{ Server-Sent Events are real-time events emitted by the server and received by the browser. They’re similar to WebSockets in that they happen in real time, but they’re very much a one-way communication method from the server. }--, --{ These events are similar to ordinary JavaScript events that occur in the browser — like click events — except we can control the name of the event and the data associated with it. }--.
( Node.js ) Some little tips you could learn when developing with node.js: Link.
By time:
1. 00:35 Watching video.
2. 00:50 Sleep.
3. 09:10 Wake up.
4. 09:13 Uploading blog.
5. 09:20 Bathroom.
6. 09:37 Watching video.
7. 11:00 { Corenet }: Makes "messenger" have "dialog" functionality.
8. 13:10 Cooking, { Corenet }: Finished the "messenger".
9. 13:45 Eating, watching video: TWICE makes MV Commentary of Dance The Night Away themselves, Momo dance version of "Dance The Night Away".
10. 16:00 Reading article.
11. 16:35 Take a nap.
12. 17:00 { Corenet }: "delete post" related work.
13. 18:10 Bathroom.
14. 18:17 { Corenet }: Finished "delete post" related work.
15. 19:00 Watching video.
16. 19:40 Start to [ thinking ]-[ planning ] about Portfolio.
17. 21:20 Cooking, [ thinking ]-[ planning ] about Portfolio.
18. 21:55 Eating, watching video.
19. 23:35 Sleep.

2019-06-29

Portfolio and Resume

[ Art ]-[ graphic design ]

( Music ) TWICE - Nayeon - Only Longing Grows - cover:
1. About: A nostalgic song that makes you want to cry without any reason.
2. Live with here mom: Link.
3. Audio: Link.
4. Audio ,, empty arena + rain sound effect: Link.
5. Better skills used doesn't always means better: This version ,, singer has better skills, but just feel like losing something compare to Nayeon's thus "not better". Many times simpler is just better.
( Art ) [ 藝術 ]-[ 設計 ] 的本質還是一樣: [ 藝術 ]-[ 設計 ] 的本質還是一樣 - 想辦法玩出 [ 非預期 ]-[ 動 ] 的效果。效果是什麼不重要，有沒有意義不重要，只要是 [ 非預期 ]-[ 動 ] 就會看起來很特別。 [ 藝術 ]-[ 設計 ] 的本質就是一直在玩 "色" 而已 (不是指顏色的色)。// 很多時候會故意 "花時間" 去 突顯 "根本不重要" 的元素 (目的不在那個元素，而是要產生 [ 非預期 ]-[ 動 ] 的效果)，像這個衣服上的 "R"，那個 ._ R _. 就是一個例子，你可以放 Rain, Cloud, Wind, 然後讓每個字首用顏色更突顯出來 .... 。像這個也是一樣，在旋轉一疊的紙，看起來就不一樣。但是有意義嗎？沒有。是重點嗎？不是。但是有動嗎？有，所以有趣。我今天看到太多太多網頁，全部都是本質上在玩這樣東西，其實把那些效果去除掉，剩下的內容其實也沒有比較特別的地方。
歸納出，構成好看的網頁的幾個關鍵要素: 歸納出，構成好看的網頁的幾個關鍵要素 (按照重要性) - 豐富的資訊 (資料)，好看的圖片及視覺設計，正確的排版 (以及創意的排版方式)，動畫。
( Environment ) { 台客劇場 } 挑戰夏天不開冷氣: Link. 看底下留言。
By time:
1. 07:45 Wake up.
2. 07:55 Uploading blog.
3. 08:10 Cooking, eating.
4. 09:45 [ Thinking ]-[ planning ] about Portfolio.
5. 10:30 Watching video.
6. 10:45 [ Thinking ]-[ planning ] about Portfolio: Making simple drawing and wireframe.
7. 14:40 Watching video.
8. 14:50 Grocery.
9. 15:10 Taking shower.
10. 15:45 Watching video.
11. 17: 40 [ Thinking ]-[ planning ] about Portfolio: Doing reasearch online, seeing advice of people.
12. 21:10 Cooking, eating, watching video.
13. 23:15 Sleep.

2019-06-30

Portfolio and Resume

Twice anecdotes of some members: Link.
Twice, vlive: Link.
By time:
1. 07:25 Wake up.
2. 07:33 Uploading blog.
3. 08:23 Cooking, reading article about Portfolio.
4. 08:57 Eating, reading article about Portfolio: Doing research what to put inside Portfolio, to have correct direction, and to save time later.
5. 11:40 Brushing teeth.
6. 11:50 Laundry, grocery.
7. 12:15 Watching video.
8. 13:10 Reading article about Portfolio: Doing research what to put inside Portfolio, to have correct direction, and to save time later.
9. 14:10 Designing Portfolio site:
10. 18:30 Cooking, keep working.
11. 19:10 Eating, keep thinking: I'm working damn slow on graphic design. I should see and reference more works from others, before I have the sense to do my own creation.
12. 19:45 Watching video.
13. 22:15 Sleep.