190501 ( Log table ) 2019-05

Short: -

List

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

2019-05

{ Stoicism }

Virtue

Understand what's in your control and what's not

Understand what changes and what doesn't

[ Toughness ]-[ resilience ]

Live inside "the zone"

Live in "now"

Purpose of life

Sensibility

Rationality

Volunteering

Exercising

{ 深蹲 }

{ Plank }

核心肌群

{ 下交叉綜合症 (症候群) }

{ 臀肌 }

{ 髖屈肌 }

Lower back muscle

{ Kpop }

{ JYP Entertainment}

{ Twice }

Efficiency can be extremely different

Book { The one thing }

{ Marginal utility } of doing everything

Book

{ LoveAndHappiness } project

{ lahSale }

{ Woody }

{ Front-end }

{ Vue.js }

{ SASS } and { SCSS }

{ CSS 的模組化 }

{ Bootstrap }

{ Font-awesome }

{ JQuery }

{ Lodash }

{ Git }

{ Accessibility }

{ Back-end }

{ Node.js }

{ Express.js }

{ MongoDB }

{ MVC } design pattern

{ Node.js } module

{ Node.js } ,, error handling

{ REST API }

{ HTTP status code }

Wasting time

Playing { game }-{ Zero-k }

( Music ) { TWICE } - Heart Shaker - acoustic remix: Link.
( Music ) { TWICE } - What is Love?: Link.
By time:
1. 190501:
  1. Learning and testing { svg-pan-zoom } library.
  2. How to add custom Javascript in { Hexo }: Give up, not worth the time, { Hexo } docs sucks.
2. 190502:
  1. Learning { Express.js }: Is backend.
3. 190503:
  1. Exercising: The last time I did this was few years ago.
  2. Try to understand Vegan diet.
  3. Searching about "intermittent blurred vision": Searching about what is the cause of "intermittent blurred vision".
  4. Learning { Express.js }: Is backend.
  5. Try to understand Vegan diet.
  6. Talking with { Woody }: For volunteering.
4. 190504:
  1. Exercising: This is the 2nd time I did this after few years without exercising.
  2. Understand project { LoveAndHappiness }: Try to understand the structure of project { LoveAndHappiness }, with the help from Woody from phone.
5. 190505:
  1. Exercising: This is the 3nd time I did this after few years without exercising.
  2. Do I really need little sensation stimulation?: I'm thinking about do I really need any form of entertainment? Can I have a life totally without any entertainment and those little sensation stimulation? What is the life looks like if most of time I don't have (need) those things?
  3. Understand structure of { LoveAndHappiness }: Hard to guess, the front-end is not finished yet, so it is hard to guess what is the meaning of those API data.
  4. 12:30 Learning { Express.js }.
6. 190506:
  1. Exercising: This is the 4nd time I did this after few years without exercising.
  2. ( Git ) Don't know how to { git pull } from { LoveAndHappiness }: After few hours of struggling, woody solved my problem with 3 lines of commands.
7. 190507:
  1. Exercising: Brutal HIIT ladder workout - 20 minute HIIT workout at home. The routine is as same as yesterday, but i make it less intense for myself, I can't fully follow the routine yet.
  2. { Git }: Lean many basics [ things ]-[ operation ].
  3. ( CSS ) { SCSS } 物件導向模組設計 (1): Link.
8. 190508:
  1. ( CSS ) CSS 方法論與 Atomic CSS: Link. Useful.
  2. Working on { LoveAndHappiness } ,, styling.
  3. Troubleshooting.
9. 190509:
  1. Working on { LoveAndHappiness } ,, color scheme: Figure out new different information dimension not related to color (font-size, font-style, letter-spacing ...).
  2. Watching video about filming and { Twice }: TWICE TV "What is Love?" EP.09, TWICE TV "Pocari Sweat in Thailand".
10. 190510:
  1. Upper body exercising:
  2. Understanding { Bootstrap }:
  3. Understand HTML { form }.
11. 190511:
  1. Working on { lahSale } ,, styling.
  2. Understanding { Bootstrap }: The strength of { Bootstrap } is, you don't need to waste any time on desigining, you do nothing.
  3. ( CSS ) How to make "sticky footer", in five Ways: Link. I prefer flex-box version and grid version most.
  4. ( CSS ) Child inside parent with min-height: 100% not inheriting height: Link. Add height: 1px; to fix this "bug". But it don't adapt to child size, which is useless.
12. 190512:
  1. Find date picker input module which has good accessibility support: Found { eureka2/ab-datepicker } which are good at accessibility.
  2. Working on { lahSale }: Styling using Bootstrap and Font-awesome. Tomorrow is the user feedback stage of the sale system, so this need to be done.
13. 190513:
  1. ( Javascript ) { Object Destructuring }, { Array Destructuring }, { Spread syntax }, { reduce() }, { map() }, { filter() }.
  2. Accessibility.
  3. { lahSale } ,, apply "sticky footer".
14. 190514:
  1. ( Philosophy ) { udn.com } - 林斯諺／什麼是 "高級藝術"？什麼是 "低級藝術"？: Link. What is "High level art" and "low level art"? My conclusion - both Sensibility and Rationality are 2 pillar of humanity and form the purpose of life, none is more important than other.
  2. ( Philosophy ) { udn.com } - 廖育廷／要活出生命意義，是自己爽就好，還是有客觀標準？: Link. Is purpose of life is decide by totally personal satisfaction? Or by totally serving others?
  3. ( Philosophy ) { udn.com } - 廖育廷／過程比結果重要？人生的意義在於過程？: Link.
  4. ( Vue ) { Slot }: Link. Including named slots and scoped slots.
  5. ( Accessibility ) Some html attibutes ... .
15. 190515:
  1. ( Philosophy ) { Stoicism }.
  2. Reading book.
16. 190516:
  1. Wasting time.
  2. { lahSale }.
17. 190517:
  1. Wasting time.
  2. ( Philosophy ) Stoicism 101 - Massimo Pigliucci.
  3. ( Book ) Staring at the sun - Overcoming the terror of death - by Irvin D. Yalom: Found at { UDN } - 《凝視太陽》：過一個「克服死亡恐懼」的充實人生. // Library Genesis.
  4. ( Database ) The Problem with MongoDB - relationship, normalization, duplication, constraint: Link.
18. 190518:
  1. ( Health ) { 下交叉綜合症 (症候群) } - 骨盆前傾 - 需訓練 { 腹肌 } 和 { 臀肌 }: Link. Very useful and clear illustration! 反而不是要訓練 { 下背 } 和 { 髖屈肌 }，因為 { 下背 } 和 { 髖屈肌 } 要多做 [ 拉伸 ]-[ 舒展 ]。
  2. { 骨盆前傾 }.
  3. { MongoDB }.
  4. {Back-end } - { Traversy media }.
19. 190519:
  1. ( Back-end ) ( MVC design pattern ).
20. 190520:
  1. ( Kpop ) JYP ,, The 3 Most Important Things JYP Looks For In His Artists, And They’re Not Talent: Link. 1. Honesty. 2. Sincerity. 3. Humility
  2. ( MVC design pattern ) What is the model lifetime in MVC application?: Link. I'm not sure ... .
21. 190521:
  1. { 看电影了没 } - 为什么我们害怕衰老？戛纳金棕榈 { 爱 }.
  2. ( Node.js ) Are Node.js modules singletons? - "Module Caching".
22. 190522:
  1. Learning back-end, { Http status code },{ request method},[ practicing write a simple CRUD using MVC and Mongoose ].
23. 190523:
  1. { TWICE } - Ordering Ice Cream in English in Switzerland: Link. Beautiful moments always not last long, this is how natrual works.
  2. { Function arguments signature } good practice ; { Async function } ; { try ... catch block } ; { Mongoose }.
  3. { PTSTalk 公視 } - 拔除大腦 ARM致命一擊！華為慘遭KO: Link.
24. 190524:
  1. ( Architecture ) Stateful vs Stateless Web Services: ... .
  2. ( Http ) ( REST API ) Richardson Maturity Model - 3 level of REST: ... .
  3. ( Http ) REST - updating multiple resources with one request - is it standard or to be avoided?: ... .
  4. Finished nested schema ,, POST part: Finished [ testing code ]-{ Mongoose }-{ CRUD } ,, nested schema ,, POST part.
25. 190525:
  1. ( Http ) { Cookie }: ... .
  2. ( Back-end ) ( Express.js ) { Traversy Media } - Node.js & Express From Scratch. [ Link ]-[ part 9]-[ user registration ]. Not read et. This series take you down deep regarding how you can buid a authentication system, in practical standard. Brad guide you how you correctly store the password into database, before hashing.
  3. ( Http ) { Cookie },{ Authentication }.
26. 190526:
  1. ( Javascript ) ( Library ) { Lodash },{ JQuery }.
  2. Working on { lahSale } component ,, { scrollspy }-{ sticky nav bar }: Not done yet, start to understanding { JQuery }.
27. 190527:
  1. Working on { lahSale }: Style update with woody, fixing { scrollspy } bug.
  2. ( JQuery ) { jQuery() } method: ... .
  3. ( JQuery ) { jQuery } object (returned by { jQuery() } method): ... .
28. 190528:
  1. Fixing { scrollspy }.
  2. ( Javascript ) { Events }.
  3. ( Javascript ) Optimize JavaScript execution performance: ... .
  4. ( Javascript ) Tools ,, { debugger }-{ breakpoint } and { performance monitor }. ... .
  5. { Vue ,, lifecycle }: ... .
29. 190529:
  1. ( Music ) Thomas Bergersen - Colors of Love - { Sun }: Link.
  2. Finally around finished all testing and research about back-end!: Now I done the [ testing code ]-{ Mongoose }-{ CRUD } ,, all methods (4), { Traversy Media } { Mongoose } and { Express,js } tutorial. Now I have enough base to build my CMS!
30. 190530:
  1. { mongodb.com } - 6 Rules of Thumb for MongoDB Schema Design: ... Related to { Document-oriented database }-{ Data Modeling }
  2. Playing { game }-{ Zero-k }, eating: It have been quite some time I did this last time.
31. 190531:
  1. Playing { game }-{ Zero-k }: Playing game all day long, non-stoped, even passed midnight.

2019-05-01

( Music ) { TWICE } - Heart Shaker - acoustic remix: Link.
( Music ) { TWICE } - What is Love?: Link.
( Music ) { TWICE } - What is Love? - instrumental: Link. Suit for study.

2019-05-02

( Database ) { MySQL } (RDBMS) vs { MongoDB } (Document-oriented) detailed comparison: Link. Including the MongoDB ,, un-Structured Query Language, integrity model - A C I D vs B A S E. // The most advantage of MongoDB I think is, dynamic schema, this can cope with unpredictable future. I'm tired of my code keep breaking continuous.
( Video ) { 看电影了没 } - { 罗伦佐的油 } - 孩子，求你别死！真实事件改编: Link.
{ Express.js } crash course - { Traversy Media }:
1. 3 type of architecture At 01:00:54, Brad mentioned about there is 3 different type of architecture youo can use Express to build, 1. server: API ; client: front-end framwork like Vue.js. 2. Complete server side app (server randered template) (express-handlebars? EJS (Embedded JavaScript templating)?). 3. Simply serving static web page (html) under specific directory.
2. 07:56, 25:19 Middleware function At Link1, link2. They can alter content inside request and response object.
3. 11:18 { process.env.PORT }: At Link.
4. 37:23 Use { router }: At Link.
5. 43:24 Loading extra body parser feature for { express }: At Link.
{ Express.js } - API reference: Link.
( Application ) { httpie } - A CLI, cURL-like tool for humans: Link. This tool is for testing backend (such as API), you can lanuch a testing resquest to your target server with a url, and get the response. You can do diverse of things such us - use different request methods (GET, POST, PUT, DELETE), different content type (application/json, form data), you can download a jpg image ... . // Example - http --pretty all 'https://dog.ceo/api/breeds/image/random' | less.

2019-05-03

( Node.js ) { Traversy Media } - { Node.js } crash course:
1. Link: Link.
2. 15:18 [ re-generate ]-[ re-create] the whole { node_modules } after delete it: Link. You don't need to back up the whole node_modules directory, you can just use npm install and brings those dependencies (rely on package.json) back.
3. 20:41 { __dirname } and { __filename }: Link. The variable value will be the file location where the __filename and __dirname is used.
4. 22:36 { path } module: Link. The path.join() is useful to deal with those dirty prefixing and suffixing / characters of the given arguments, in other words, you don't nee don't need to remove them, path.join() will handle those things automatically. // Notice, you can even pass argument like ../../, it will travel back to upper level of directories.
5. 22:36 { fs } module: Link. File system operation, like append text to a file, rename a directory ... .
6. 42:16 { url } module: Link. Can get query parameters, domain name ... .
7. 46:54 { event } module: Link. Including how to emit an custom event, and define the custom callback (or class) for that event.
8. 56:17 { http } module: Link. Can handle http request and response. When your application becomes more complex, you definitely want to use some framework like express.js.
9. 01:24:51 Deploy back-end to { Heroku }: Link.

2019-05-04

( Vue.js ) vue-router 常用用法: Link.
( Node.js ) Get project root from a running node.js application: Link. There is several methods, each of them have pros and cons.
( Kpop ) { TWICE TV } - { YES or YES } - EP.06: Link.

2019-05-05

Do I really need little sensation stimulation?

Exercising

Toughness

Back-end

{ Express.js }

{ LoveAndHappiness }

{ Git }

{ Bootstrap }

Do I really need little sensation stimulation?: I'm thinking about do I really need any form of entertainment? Can I have a life totally without any entertainment and those little sensation stimulation? What is the life looks like if most of time I don't have (need) those things?
( http ) { PUT } vs. { POST } in { REST }:
1. Link: Link.
2. Methods can use same url: In REST, you use the same URL, but interact with it using different methods. The method used to access the resource defines the actual type of operation.
3. About "safe" and "idempotent": Link.
( Http ) Authentication with header ,, { x-auth-token }: 29:05.
Github ,, { pull request }:
1. About pull requests - doc: Link.
2. Creating a pull request: Link.
3. How to do a GitHub pull request - Stackoverflow: Link.
4. { Base } repository, { Fork } (forked) ({ head }) repository, { origin } and { upstream } - Stackoverflow: Link.
{ Bootstrap }:
1. bootcss.com: Link.
2. Bootstrap 4 Tutorial: Link.
3. Bootstrap 4 Get Started: Link.
( CSS ) { overflow-wrap }: Link. Use overflow-wrap instead of old word-wrap (though they do the same thing). And about word-break, I don't know where it should be used, no reaserch it yet and I still don't need it.
( Social movement ) 這是動蕩的時代，也是說故事的時代（上）：「好故事」成為一盞明燈，指引改革之路: Link.
( Social movement ) 這是動蕩的時代，也是說故事的時代（下）：「好故事」能跨越差異，成為社會運動的立基: Link. Unread.
( NPO ) ( Fundraising ) 10 大最有效的線上募款工具、6 個互聯網時代不可不知的關鍵字／2018 全球 NGO 技術應用調查: Link. Unread.
By time:
1. 06:40 Wake up.
2. 06:50 Go exercising: This is the 3rd time I did this after few years without exercising.
3. 07:40 Cooking, eating, reading, thinking.
4. 09:30 Thinking about do I really need entertainment?: I'm thinking about do I really need any form of entertainment? Can I have a life totally without any entertainment and sensation satisfaction? What is the life looks like if most of time I don't have (need) those things?
5. 10:00 Designing keyword cloud: I will abort putting the Concept Map in my blog, but use "keyword cloud" instead. So now every day information will have these 3 dimension: 1. Basic infomation structure. 2. Time (of log) 3. Importance scale.
6. 12:00 Taking nap.
7. 12:30 Learning { Express.js }.
8. 14:40 Serching { PUT } vs. { POST }.
9. 15:00 Searching back-end big [ direction ]-[ roadmap ]: I mostly rely on trusty resources like Traversy Media now. I'm planning to dive into his tutorial in the near future.
10. 15:35 Watching video ,, TWICE TV "What is Love?" EP.03: Link.
11. 15:55 Understand structure of { LoveAndHappiness }: Hard to guess, the front-end is not finished yet, so it is hard to guess what is the meaning of those API data.
12. 17:10 Talk to { Woody }.
13. 17:30 Github ,, { pull request }, understanding and setting up.
14. 19:00 { LoveAndHappiness } ,, researching the base css file: I tried to do little modification first, before I do bigger one. I want to start from beautify the header first.
15. 19:50 Understanding { Bootstrap } ,, basic.
16. 20:50 Cooking and eating.
17. 21:30 Watching video ,, TWICE TV "What is Love?" EP.01: Link.
18. 22:30 Sleep.

2019-05-06

Exercising

Toughness

Back-end

{ Express.js }

{ LoveAndHappiness }

{ git }

( CSS ) ( SASS ) { @mixin } "function": Link.
( Cloud database ) What is { Firestore }-{ firebase }?: Link.
( Back-end ) { Traversy Media } - { MEAN } stack front To back:
1. 05:00 Dependency for back-end project: Link. It includes - express, mongoose, bcryptjs, cors, jsonwebtoken, body-parser, passport, passport-jwt. And finally Brad use npm install to install those non-exists dependencies, list in package.json, at once.
2. 09:14 Install { nodemon } globally: Link.
3. 18:09 Set static directory for { Angular }-[ public files ]: Link.
( Git ) How to add remote repo, and how to change from default lable name "origin" to different one?: git remote add myCustomLableName https://github.com/fooUser/barProject. This will define https://github.com/fooUser/barProject as myCustomLableName.
( Git ) How to merge from different repository label (instead of default "origin"):
1. .{ git remote add myCustomLableName https://github.com/fooUser/barProject }.
2. .{ git fetch myCustomLableName }.
3. .{ git merge myCustomLableName/master }: Change master to the branch you want to merge.
4. .Weirdly, I still saw this kind of usage - { git pull https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git BRANCH_NAME }: In link.
( Video ) 以平權與安全之名：穆斯林面紗禁令合理嗎？｜國際大風吹｜EP52: Link.
By time:
1. 06:40 Wake up.
2. 06:40 ~ 07:20 Go exercising: This is the 4th time I did this after few years without exercising.
3. 07:30 Upload blog.
4. 07:45 Watching video ,, May 3rd 2019 (1)文贵在做平板称时的视频做得不标准，希望战友们不要秀文贵这样的做共28分钟:Link.
5. 07:52 Taking shower.
6. 08:10 Watching video ,, 2019年4月29日：台湾．香港．将是灭共的重要之地……谷畜生侮骂一亿河南同胞必须受惩罚！:Link.
7. 08:25 Learning { Bootstrap } ,, basic: To typography.
8. 08:55 Cooking.
9. 09:15 Learning { Bootstrap } ,, basic: To colors.
10. 09:50 ~ 10:00 Brushing teeth.
11. 10:05 Learning { Bootstrap } ,, basic: To buttons.
12. 10:15 Keyboard problem: "k" key doesn't works all other key works smoothly, restarting PC doesn't works, change usb cable doesn't works, change to differnt usb socket doesn't works. The problem might not be hardware problem but software, the key mechanical function is not the problem (not "short" at there). After re-plug the usb plug to another socket few times it still don't works, but the last time I tried it, it works smoothly, very wierd problem. Last time this problem happened on "m" key.
13. 10:25 Learning { Bootstrap } ,, basic: To alert.
14. 11:00 Clean up useless file.
15. 11:35 ~ ?? Learning { Bootstrap } ,, basic: To navs.
16. 12:00 ~ ?? Learning { SASS }.
17. 12:15 ~ 12:25 Learning { Bootstrap } ,, basic: I'm feeling too much to learn, too deep to dive into this rabbit hole, I should hold back at this moment.
18. 12:25 ~ 13:30 Misc: Taking nap, doing laundry.
19. 13:30 Watching video.
20. 14:00 Understanding { MEAN } stack.
21. 15:15 Thinking about aborting the idea of using web-based file manager in my CMS: Web-based file manager, such as elfinder, only makes the system design more complex, bad for user experience (myself). I should design like this - front-end call back-end (Express.js), then use core module of { Express.js } which can invoke shell command, to open { Nautilus } file manager directly. And no need to use { webdev } at all.
22. 16:20 Watching video: 柴知道 - 如何做一只寄生虫？第二集.
23. 16:30 Understanding { MEAN } stack.
24. 16:50 Buying food.
25. 17:20 Understanding { MEAN } stack.
26. 18:00 ~ ?? Cooking and eating.
27. 19:00 Watching video.
28. 19:30 Don't know how to { git pull } from { LoveAndHappiness }: After few hours of struggling, woody solved my problem with 3 lines of commands.
29. 23:20 Sleep.

2019-05-07

Exercising

Toughness

Clean the room

{ git }

{ LoveAndHappiness }

{ SASS } and { SCSS }

{ CSS 的模組化 }

{ Marginal utility } of doing everything

{ Git }:
1. ( Git ) help.github.com: Link. Help center
2. ( Git ) { Git } 遠程操作詳解: Link. Good graphs and easy to understand content (still comprehensive) for beginners, solve a lot misconception for new users.
3. ( Git ) { git merge } problem ,, shows "Already up-to-date" even it is not?: Problem solved, { git } just behave like this natually. You don't have to do anything about this. See link1, link2. --{ ... it means that the branch you’re trying to merge is a parent of your current branch. Congratulations, that’s the easiest merge you’ll ever do. }--.
4. Git Doc - addressing merge conflict:
  1. Link: Link. Include those topics:
  2. .About merge conflicts: Link. Including auto merge as possible ; what cause a conflict ; Merge pull request button.
  3. .Resolving a merge conflict on GitHub: Link. Including conflict editor.
  4. .Resolving a merge conflict using the command line and text editor: Link. Including using git status to list all files that is affected by the merge conflict ; search for <<<<<<< string pattern to jump to the conflict line directly.
5. ( Git ) { git merge } two local branches: Link.
6. ( Git ) { git remote ... }:
  1. ( Git ) { git remote show origin }.
  2. ( Git ) { git remote -v }: Show remote repo alias. You can define alias name yourself.
  3. ( Git ) { git remote add myCustomAliasName thatLongRemoteRepoUrl }. Also see [ Doc ]-[ Adding a remote ]. After this, you just need to use git fetch myCustomAliasName and git push myCustomAliasName instead of that long url everytime.
7. Doc - Fetching a remote: Link. Include - git clone ; git fetch ; git merge ; git pull.
8. ( Git ) What does { origin } means: Link. It is a [ alias ]-[ shorthand ] of the actual long url, so instead of typing and remembering that long url, you know can just use that short alias. Of course you can define alias by command like git remote add myCustomAliasName https://github.com/fooUser/barProject, after this, you just need to use git fetch myCustomAliasName and git push myCustomAliasName instead of that long url everytime. // Also see man git remote. // Also see { Refs } (references).
9. ( Git ) What is { Refs } (references) : Link. Not fully understand.
10. ( Git ) { git branch -a }, { git branch -vv }.
11. ( Git ) { git add -A } and what is { Stage } means: Mentioned in this link. It is useful in case such as, when you checkout to other branch and checkout back, you lost the new modified content if you didn't use git add -A before doing first checkout.
12. ( Git ) { git add -A } vs { git add . }: Link.
13. ( Git ) { git branch -m }: Link, found from top answer.
14. ( Git ) { git branch -t }: Link, found from top answer. So git branch -m master bunchofhacks will make a new local branch named master that "tracks" the origin (or upstream) master:
15. ( Git ) { git reset --hard }: Link, found from top answer.
16. ( Git ) Pulling via Rebase: Link. --{ The --rebase option can be used to ensure a linear history by preventing unnecessary merge commits. }--. Also see those graphs, they are nice.
17. ( Git ) { git pull x x --allow-unrelated-histories }: Link.
18. ( Git ) { git push } problem ,, "Updates were rejected because the remote contains work that you do not have locally": Link. See the graphs, it explain the concept nicely with easy way. So there are 2 ways to solve this, pull first (and resolve conflicts), then push ; use git push -f (cautious on this!).
( CSS ) Sass/SCSS 簡明入門教學: Link. Easy to understand, still comprehensive.
( CSS ) About { Sass } ,, ampersand (&): Link.
( CSS ) { @mixin } vs { @extend }: Link ,, section 8. Also see placeholder selector.
( CSS ) { #{} }-[ string interpolation ]: Link1, link2 (@each part).
( CSS ) { SCSS } 物件導向模組設計 (1): Link.
( CSS ) CSS - 模組化 - methodology - OOCSS、SMACSS、BEM、CSS Modules、CSS in JS: Link.
By time:
1. 08:23 Wake up.
2. 08:40 Exercising at home because raining outside: Brutal HIIT Ladder Workout - 20 Minute HIIT Workout at Home. Very exhausted when I done this, I'm a little trembling. I barely finish it completely, pause in the middle several times, out of breath all the time. Much harder than I thought.
3. 09:05 ~ 11:25 Watching video, cleaning room, cooking:
  1. M觀點 - #23 - 美中貿易戰川普為何亮出王牌殺手？25% 的關稅到底會對中國經濟造成多大的打擊？: Link.
  2. 郭文貴 - 3rd May 2019 (3) 3rd may 2019 (2)2017年的5月3号和2018年的5月3号都发生了哪些重大事件，文贵与大家分享一些过去没有讲过的事情。: Link.
  3. 郭文貴 - May 6, 2019文贵直播谈谈，为什么川普总统要突然间的停掉，中美贸易协定共产党必须还回属于14亿中国人民的一切财富一切权力！: Link.
4. 09:20 ~ 09:30 Upload blog.
5. 11:30 Learning { git } ,, addressing merge conflict.
6. 13:40 Still found git merge not working properly: So, now even I modified the content of README.md file, when I merge, it still didn't do conflict resolve, it shows the message Already up-to-date.
7. 16:00 Sleeping: { Git } problem Already up-to-date not solved yet, frustrated.
8. 16:40 Keep learning { git }: Problem solved, { git } just behave like this natually.
9. 16:41 Clean up { git } resources (final orginizing).
10. 18:10 ~ ?? Learning { SASS }**[ object oriented ]**[ principle ]**[ mudule ].
11. 18:30 ~ 18:50 Cooking.
12. 18:50 Learning { SASS } vs { SCSS }: SCSS seems to be enhanced version of SASS. See www.sassmeister.com (found from Kevin Powell's video) to [ test ]-[ generate ]-[ compile ] SASS and SCSS in live.
13. 19:10 Learning { SCSS }.
14. 20:40 ~ 21:00 Talking with another engineer 廣x of { LoveAndHappiness }: And woody, through group voice chat on Line. I think I will need to start to write css tomorrow, and push and pull frequently. Take it as a sepereate project, don't neee to always think too much to comply to previous styling (some root config and style), just make it up as soon as possible.
15. 21:15 Learning { SCSS }.
16. 21:30 Update backend-end: From woody.
17. 21:40 Learning { CSS } methodology.
18. 21:50 Brushing teeth.
19. 22:00 Watching video: TWICE TV "What is Love?" EP.06.

2019-05-08

Exercising

Toughness

{ LoveAndHappiness }

{ Sass }

{ Bootstrap }

{ Vue }

Troubleshooting

( CSS ) CSS 方法論與 Atomic CSS: Link. Useful.
( CSS ) CSS - 模組化 - methodology - OOCSS、SMACSS、BEM、CSS Modules、CSS in JS: Link.
( CSS ) Scss directive: Link. Including { if, else, for, each, while }.
( CSS ) Sass Variable in CSS calc() function don't work?: Link. Use Interpolate. So you can use margin: $foo, but you can't use margin: calc(1em + $foo) you have to use margin: calc(1em + #{$foo}) instead.
( CSS ) ( Vue ) Why even { scoped } is ued, parent component selector will overwrite child component selector?: Link. The root element of every component is an exception. A child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS.
( CSS ) ( Vue ) { Deep } selector: How do I use /deep/ or >>> in Vue.js?. In parent comonent ,, scoped style, you can use deep selector to select child component ,, element, this will works.
( Sass ) ( Vue ) How to import a { Sass } file into every vue component in an app: Link. npm i node-sass sass-loader first, then config the vue.config.js.
( NPM ) About { --save } option and derivatives family: Link1 Link2. { --save-prod ; --save-dev ; --save-optional ; --save-exact ; --save-bundle ... }.
( Music ) { Twice } - { Likey }: Link.
By time:
1. 06:40 Wake up.
2. 06:50 Exercising: Brutal HIIT ladder workout - 20 minute HIIT workout at home. The routine is as same as yesterday, but i make it less intense for myself, I can't fully follow the routine yet.
3. 07:15: Watching video.
4. 07:23: Taking shower.
5. 07:48 ~ 08:00 Uploading blog.
6. 08:00 Misc.
7. 08:25 Learning CSS - 模組化 - methodology.
8. 09:10 Preparing ingredients and cooking.
9. 09:50 Learning SCSS directive.
10. 10:00 Eating: TWICE 何為彩彩向日葵-名井南Michaeng(MinaX彩瑛). Funny.
11. 10:20 Brushing teeth.
12. 10:30 Understanding { LoveAndHappiness } structure: Understanding LoveAndHappiness structure before I can start to design CSS.
13. 10:35 Working on { LoveAndHappiness }: header.vue ,, CSS.
14. 11:00 Thinking about CSS ,, using global scope or local scope, for vue component: CSS ,, maybe I will used global CSS for 10% of amount, local CSS (Vue ,, scoped attribue) for 90% of amount. So I can have some few central config, while mostly higly decoupled.
15. 11:15 Working on { LoveAndHappiness }: header.vue ,, CSS.
16. 12:30 Dealing with bootstrap problem: Bootstrap in { LoveAndHappiness } is not working as expect, I build a [ new ]-[ clean ]-[ dummy ] environment to do testing.
17. 12:55 Take a nap: Problem unsolved.
18. 13:30 Watching video: TWICE Michaeng小劇場(MinaX彩瑛).
19. 13:35 Dealing with { bootstrap } installation problem: Building a [ new ]-[ clean ]-[ dummy ] environment to do testing.
20. 13:45 Dealing with { Sass } installation problem: Try to install Sass into testing vue project.
21. 14:45 Dealing with { bootstrap } problem in { LoveAndHappiness }: Bootstrap in LoveAndHappiness ,, some bootstrap style is overwrited by elsewhere, try to find the reason.
22. 15:05 Give up that problem, keep going on: I is probably because the global { sass } (custom) overwrite the bootstrap settins (default).
23. 15:30 { LoveAndHappiness } ,, problem ,, bootstrap not working as expect: My local testing project ,, the break point breaks at incorrect viewport width. // The problem disappeared itself don't know why, might be firefox responsive design mode own problem when zooming with Ctrl + scroll wheel.
24. 16:00 keep working on { LoveAndHappiness }.
25. 16:40 Brushing teeth.
26. 16:50 keep working on { LoveAndHappiness }.
27. 19:00 { LoveAndHappiness } ,, solving { CSS } problem: Don't know why selector [data-v-e5cb3380] is generated by Vue, it overwrite my CSS even mine have a bit higher priority. // Solved, it is because when selector is put inside <style scoped>, Vue automatically issue a new unique data attibute for those html elements those selector concerned. But in [ my ]-[ this ] case, I'm writing selector inside <style> instead of <style scoped>, so Vue will not do this, then those selector [ become less aggressive ]-[ having less priority], then cause the "bug".
28. 19:40 keep working on { LoveAndHappiness }.
29. 20:00 ~ ?? Preparing ingredients, cooking, eating.
30. 21:15 ~ ?? keep working on { LoveAndHappiness }.
31. 22:30 Brushing teeth.
32. 22:40 Reflect.
33. 22:48 Watching video.
34. 23:00 Sleep.

2019-05-09

{ LoveAndHappiness }

{ Bootstrap }

{ CSS } design

By time:
1. 07:10 Wake up: A bit ache and tired, don't want to excercise.
2. 07:20 Upload blog.
3. 07:40 Modify blog ,, CSS: Change all h2 to position: sticky, and change the structure of many responding posts. // Wow, cost so much time on this style changing.
4. 09:30 Cooking, eating, misc.
5. 10:35 keep working on { LoveAndHappiness }.
6. 11:10 Brushing teeth.
7. 11:20 keep working on { LoveAndHappiness }.
8. 11:55 Relax, misc.
9. 11:30 keep working on { LoveAndHappiness }.
10. 14:10 Working on { LoveAndHappiness } ,, color scheme: Now the site already pick #FF9300 and #B51212 for main tone, the information dimension of color is "full", can't add more color (hue) inside it. Now have to figure out new different information dimension not related to color (font-size, font-style, letter-spacing ...).
11. 15:40 Misc.
12. 16:30 Take a nap.
13. 17:05 Watching video.
14. 17:10 keep working on { LoveAndHappiness }: Styling buttons.
15. 20:55 Cooking.
16. 21:50 Tracking issue of { LoveAndHappiness }: Bootstrap style been overwrite by Sass.
17. 21:55 Watching video: TWICE TV "What is Love?" EP.09, TWICE TV "Pocari Sweat in Thailand".
18. 22:45 Sleep.
: Link.

2019-05-10

Upper body exercising

{ LoveAndHappiness }

{ Bootstrap }

Upper body exercising:
1. "Static plank": Link. Not moving. Holding bridge-like posture. Endurance of back and maybe other muscle.
2. "Pike" push up: Link. Palm and foot are much closer.
3. "Staggered" push up and use knees: Link1, link2. Also see the girl, she use knees to touch the ground so the hand endure less weight, good method.
4. "Dolphin" push up: Link. Your head move forwward and backward from hands.
5. "Supine" push up: Link. Totally reverse your body, hips face the ground, then push up with your elbow instead of palm.
6. "Skydiver" push up: Link. This can train the endurance of the back muscle, nice.
7. "Bench dips" push up: Link, also see tricep dip that do on ground. Rely on a bed, or bench, then hip face to the bed and push up. Place your feet forward or backward to control the weight.
8. "Sky crunch": Link.
9. "Crisscross crunch": Link.
HTML { form }:
1. How to put two submit buttons in one form, and get different key value pair?: Link. See second answer.
2. Submit form using a button outside the <form> tag: Link.
Bootstrap grid examples: Link. Few example to demonstrating flexible mixing usage of different screen level.
Bootstrap 3.4 docs: Link. Notice! Some feature are not support or changing in new version (4.x), like .form-horizontal.
Bootstrap 4.3 docs: Link.
( Bootstrap ) Is it invalid to use [ multiple ],[ nested ] bootstrap containers?: Link1, lin2. You can have multiple .container and this is quite often, but you can't (can, but not good practice) have nested .container. Also see Bootstrap { .no-gutters } example, no container used example.
Bootstrap { .no-gutters } example, no container used: Link.
Bootstrap text alignment (such as { text-sm-right}): Link.
Bootstrap 4 { col-xs-* } not working?: Link.
By time:
1. 06:50 ~ 06:50 Wake up.
2. 07:17 Exercising at home: At first try to go outside for jogging, but my calf still feeling ache when I step outside of door, then I go back.
3. 07:37 Find upper body exercising video:
4. 08:20 Upload blog.
5. 08:35 { LoveAndHappiness }: Dealing with Bootstrap low efficiency again, don't know how to handle it, if I'm not familiar with Bootstrap, or I will need some customization instead of complete follow default Bootstrap theme, then I will need to pay way higher cost to deal with many special cases, totally not worth it at all, hand crafting is much easier, manageable, predictable, faster in this case.
6. 10:35 Grocery, cooking.
7. 11:30 Eating, config { Atom } editor for soft tabs: Woody 發現我的編輯器用 space 而不是 tab 做縮排，所以我找出這幾天改過的檔案，把 space 換成 tab，然後 LF (linux 換行) 換成 CRLF (windows 換行)。
8. 13:10 Brushing teeth.
9. 13:20 Understanding { Bootstrap } and forms.
10. 14:55 Take a nap.
11. 15:30 Watching video: TWICE TV "FANCY" EP.03.
12. 15:45 Keep understanding { Bootstrap } and forms.
13. 16:35 Finally realized: Finally realized .form-horizontal is old version "syntax" and no longer support by bootstrap 4.x.
14. 19:40 Bootstrap problem again: offset-sm-1 don't works as expect.
15. 21:40 Having conversation with { Woody }: About problem of Bootstrap defaults keep been overwrited ; front-end and back-end design in big picture (not this project) ; Token and API ; stateless ; learning some javascript example and good practice from current project ,, code base ; relational database schema designing ... .
16. 21:50 Cooking.
17. 22:20 Eating and muse.
18. 22:50 Bushing teeth.
19. 23:00 Watching video: TWICE TV "FANCY" EP.04.
20. 23:30 Sleep.

2019-05-11

{ Bootstrap }

{ lahSale }

{ Sticky footer }

( Music ) ( Live ) TWICE - Sleep tight good night, 20171206: Link.
( CSS ) How to make "sticky footer", in five Ways: Link. I prefer flex-box version and grid version most.
( CSS ) Viewport vs Percentage Units: Link. Use vh over % for height , use % over vw for width.
( CSS ) Child inside parent with min-height: 100% not inheriting height: Link. Add height: 1px; to fix this "bug". But it don't adapt to child size, which is useless.
By time:
1. 07:30 Wake up.
2. 07:50 Upload blog.
3. 08:00 Working on { LoveAndHappiness }: Can't found seperate project lahSale.
4. 08:50 Cooking.
5. 09:10 Eating, watching video, brushing teeth: She's Danni - Weekly Vlog 40｜我的第一次冲浪体验🏄｜复仇者联盟｜台球练习
6. 09:55 Working on { lahSale }, which is subset of { LoveAndHappiness }: { lahSale } is subset of { LoveAndHappiness }, the sale part. I tried to set the style directory and path right, keep changing config, refactoring ... And when I finally can make a pull request to base repo, I found 2 repo without fork relationship, is not allowed to do this, so I have to do the fork again, and migrate the modified file one by one to the forked one ... So time consuming because I don't want to make anything wrong.
7. 13:00 Eatting apple and brushing teeth.
8. 13:25 Keep working on { lahSale }: Refactoring main global style sheet file.
9. 14:20 Thinking how to make "sticky footer".
10. 14:50 Taking a nap.
11. 15:20 Watching video: Link.
12. 15:40 Thinking how to make "sticky footer".
13. 18:50 Still can't solve "sticky footer" problem, give up right now: Will fix it in future.
14. 18:51 Apply bootstrap style on site: Very fast, almost no need to do anything.
15. 20:00 { lahSale } ,, Push to github.
16. 20:10 Cooking and eating, and thinking: Sit back and watching what woody did so far, he build the entire and complex sales system in such a short period of time. Amazing. What I leaned is the efficiency can be push to this kind of degree.
17. 21:20 Watching video: TWICE - SLEEP TIGHT GOOD NIGHT, 20171206.
18. 23:59 Sleep: Too late, bad old habit again.

2019-05-12

Exercising

Lower back muscle

核心肌群

{ 深蹲 }

[ Exercising ]-{ Plank }

{ 超負荷 } 與 { 超補償 }

Back-end

{ lahSale }

{ Font-awesome }

( Exercising ) 如何鍛鍊 "下" 背 (lower back muscle):
1. 如何鍛鍊強壯的 "下" 背 - 床上做: Link1, link2, link3.
2. 5分鐘強化腰部 - 站立做 - 遠離腰背痛 - 蹲膝，一腿往後伸，手舉: Link. His website.
3. 單腳，彎腰，加雙手提啞鈴 - 站立做: Link.
4. 腹外斜肌訓練 - side plank (or bridge) - 床上做: Link.
5. 核心肌群 - 女生: Link.
6. 核心肌群 - 女生2: Link. 深蹲，上下台階，跳繩，貓式 (這個更好?)，躺床抬腿。不確定這些知識正不正確，但鍛鍊核心肌群很重要，常常聽到。
7. Plank: So my conclusion is, planks can be grouped to these 3 types - face down, face up, side.
8. 仰臥起坐對你的背部不好？: Link.
( Exercising ) 了解 { 超負荷 } 與 { 超補償 }: Link.
( Vue.js ) { created() } vs { mounted() }: { created() } is before dom-rendering, { mounted() } is after.
Install { font-awesome } on { vue.js }: To install v5, need npm package { @fortawesome } (v5), not font-awsome (v4 only).
( Bootstrap ) What is class=“mb-0” in Bootstrap 4?: Link.
By time:
1. 07:50 Wake up.
2. 08:15 Exercising at home.
3. 08:40 Watching video about exercising.
4. 11:55 Take a nap.
5. 12:25 Upload blog and tweaking keyword cloud scale size.
6. 13:00 Find html5 date picker input module.
7. 13:30 Found why { eureka2/ab-datepicker } date picker don't work properly: Found { eureka2/ab-datepicker } which are good at accessibility. But however I tried, I still can't found the [ reason ]-[ problem ] the button not work properly (glitchy) on my machine. After speding one hour go through every possibility, I finally found they mentioned they are using Bootstrap 3 instead of 4, in the not easily seen area. And I have to use extra option markup: 'bootstrap4', and install font-awesome to load it properly.
8. 14:40 Searching about how to load external javascript into { Vue.js }: For { eureka2/ab-datepicker }.
9. 15:50 Misc.
10. 16:20 Cooking.
11. 16:50 Understanding { font-awesome }.
12. 17:00 Brushing teeth.
13. 17:10 Understanding { font-awesome }.
14. 18:00 Try to install new { font-awesome } version: V4 to v5, need npm package { @fortawesome } (v5), not font-awsome (v4 only).
15. 19:15 Keep working on { lahSale }: Styling using Bootstrap and Font-awesome. Tomorrow is the user feedback stage of the sale system, so this need to be done.
16. 22:10 Cooking..
17. 22:30 Eating and watching video: TWICE - "FANCY" Dance Cover | Ellen and Brian, 【今周刊】從學渣到學霸台灣英語教父的成妖之路, 袁腾飞聊996：是兄弟就来加班？加你妹！.
18. 23:59 Sleeping..

2019-05-13

Back-end

{ Express.js }

{ lahSale }

{ Accessibility }

( excercise ) 在家健身的【兩樣神器】4天練全身: Link. I just want to keep that muscle distribution figure.
( Javascript ) { Object Destructuring } and { Array Destructuring }: Link1, link2, MDN. See MDN.
( Javascript ) { Spread syntax }: Link.
( Javascript ) { reduce() }, { map() }, and { filter() }: Link. reducer = (accumulator, currentValue) => accumulator + currentValue;.
( Javascript ) Why doesn't .includes() work with .classList?: Link.
( Accessibility ) - Accessibility features in Firefox - Make Firefox and web content work for all users: Link.
( Accessibility ) - An overview of accessible web applications and widgets: Link.
( Accessibility ) - w3c - Using ARIA: Link.
By time:
1. 08:30 Wake up.
2. 08:40 Upload blog.
3. 08:55 Bathroom. I put "上大號" to google translate and what it give me is "Upper size" ... ok, google translate ...
4. 09:05 Watching video: Useful and useless stuff.
5. 09:35 Learning Javascript: Object Destructuring and Array Destructuring.
6. 10:25 Misc, grocery.
7. 11:00 Cooking, learning Javascript.
8. 11:00 Eating, learning Javascript.
9. 12:00 Brushing teeth.
10. 12:10 Solving "sticky footer" problem: Solved in my sandbox, now I can apply this to lahSale.
11. 12:40 Watching video.: Reasons twice sana deserves happiness and success
12. 13:00 { lahSale } ,, apply "sticky footer".
13. 14:15 { lahSale } ,, change footer style.
14. 15:15 Take a nap.
15. 15:40 Watching video: 台灣基進 - 再見了！中國】中天為何變這樣？中國「宣傳工具」根本不是媒體？.
16. 16:00 Understand { css grid} ,, { auto-fill or auto-fit }.
17. 16:00 { lahSale } ,, change footer style.
18. 19:00 Cooking and eating.
19. 19:50 Brushing teeth.
20. 20:00 Watching video.
21. 20:30 Group chat with { Woody }.
22. 21:20 Misc.
23. 21:25 { lahSale } ,, change footer style.
24. 21:55 Learning about { Aria } and accessibility: Confusing, can't find helpful information.
25. 22:35 Watching video: 【一席】李一諾：比爾·蓋茨怎麼花錢.
26. 22:50 Sleep: 【一席】李一諾：比爾·蓋茨怎麼花錢.

2019-05-14

Purpose of life

"High art" and "low art"?

Sensibility

Rationality

{ lahSale }

{ Vue ,, slot }

{ Accessibility }

( Philosophy ) { udn.com } - 林斯諺／什麼是 "高級藝術"？什麼是 "低級藝術"？: Link. What is "High level art" and "low level art"? My conclusion - both Sensibility and Rationality are 2 pillar of humanity and form the purpose of life, none is more important than other.

( Philosophy ) { udn.com } - 廖育廷／要活出生命意義，是自己爽就好，還是有客觀標準？: Link. Is purpose of life is decide by totally personal satisfaction? Or by totally serving others?

( Philosophy ) { udn.com } - 廖育廷／過程比結果重要？人生的意義在於過程？: Link.

( Philosophy ) { udn.com } - 廖育廷／人生有沒有意義？還是充滿反面意義？ - 對社會負貢獻: Link.

( Documentary ) CBC Docs - After growing up in a violent family, a blind martial arts teacher finds independence | Night Strike: Link.

( 中美貿易戰 ) 北京600億報復美再列3250億！ - 公共電視 - 有話好說: Link.

( Vue ) { Slot }: Link. Including named slots and scoped slots.

( Accessibility ) Some html attibutes:

{ role }: Link.
{ aria-* }.
{ aria-label }: where and when to use aria-label?. It mentions, when screen reader read that element (tag), only aria-label will be read, the text between that element (tag) will not be read.

( Documentary ) { CBC Docs } - This is Meagan Duhamel & Eric Radford’s last chance to win an Olympic gold - Beyond the Limits: Link.

( Philosophy ) { udn.com } - 林至浩／愛是什麼？愛是一種情感嗎？: Link.

By time:
1. 07:40 Wake up.
2. 07:45 Try to go exercising: I feel ache of my waist and lower back on the way to the lake. When I walk to lake and just having few steps, I was feeling I'm not going to do this because this might cause more injury. Then I walk back.
3. 08:15 Exercising at home: Mostly Plank. I want to focus on my lower back and core muscles.
4. 08 40 Upload blog.
5. 09:00 Cooking, eating, reading: W3c - Using ARIA.
6. 09:40 Brushing teeth.
7. 09:50 Reading { Accessibility beginners guide }: Link.
8. 10:30 Taking a nap: Too sleepy, low efficiency. Still can't get good resources for understand just basic aria attribute. Might use grep to grep the source code with pattern aria to learn something later.
9. 10:03 Watching video.
10. 10:07 Trying to do { aria } and { role }attributes.
11. 11:25 Trying to testing how { base.scss } effect { bootstrap } styling: I make 2 different enviroments, before migrating sale and after migrating sale, and see how bootstrap works, when I add diffent elements, such as nav.
12. 12:00 Change Few icon font on { lahSale }.
13. 12:50 Understand { slot } in { vue }.
14. 13:25 Cooking.
15. 13:58 Eating, watching video, brushing teeth.
16. 14:35 Changing { message.vue } of { lahSale }.
17. 15:35 Misc: Doing nothing.
18. 16:35 Reading book { Brave new world - revisited }: Long time no reading. I just make skimming on the rest of this book I have not finished yet. I found I get enough concept of Brave new world so I don't need to have too too detail reading.
19. 17:10 Grocery: I even buying drinks, long time no do this, I have totally no idea why I'm doing this.
20. 17:40 Casually roaming on web: Including watching videos, and reading articles.
21. 22:50 Reading book { The One Thing }: It has been a long time since last time I read this book.
22. 23:00 Watching video.
23. 23:10 Exercising: Trainning lower back, reverse plank.
24. 23:15 Sleep.

2019-05-15

{ Stoicism }

Virtue

Understand what you can/can't controls

Understand what won't/will changes

Book

Exercising

( Philosophy ) { Stoicism } - { Pursuit of Wonder } - The Art of Not Caring: Link. The main idea of Stoicism from this video is, we don't rely on external [ materials ]-[ content ] to make us gain happiness (substitute), because these thing can change all the time, they are not predictable, stable, eternal, our expectation go up and down if we rely on those external [ materials ]-[ content ]. In other words, Stoicism is about knowing what we can't control and what we can, the internal is what we can control, i.e. our mind, [ attitue ],[ angle ] when [ looking ],[ facing ] bad things. Stoicism is about don't rely on external [ materials ]-[ content ] to gain happiness (substitute), by living stoic, we can be calm, peace, happiness without those temporary things, too.
( Philosophy ) { Stoicism } as a philosophy for an ordinary life - Massimo Pigliucci - { TEDxAthens }:
1. Link: Link.
2. Core 2 pillars of Stoicism: virtue (Ethics, courage, wisdom ...) and knowing what you can and you can't control.
3. Famous [ people ]-[ model ]: Marcus Aurelius.
( Philosophy ) { Stoicism } - Marcus Aurelius - lecture by professor Michael Sugrue: Link.
~~( Philosophy ) { Stoicism } - Marcus Aurelius - How to Live A Good Life:~~ Link. I think this video didn't sufficiently convey the core concept of Stoic. I think 2 pillars of Stoicism is: virtue (ethics ; courage ; wisdom ...) and knowing what you can and you can't control (living in "now" ; Stoic Optimism, the concept of you don't care if the result is good or bad in the future, even you know it is bad and it will never be changed, you still be optimistic toward the current [ situation ]-[ difficulty ].).
( Book ) { TED-Ed } - { Crime and Punishment } (罪與罰): Link.
( Book ) { Suzanne's Diary for Nicholas } (蘇珊日記): Link. --{ 其中有個非經常典的指引是：「想像人生是一場同時必須耍著五顆球的雜技，這五顆球分別為工作（work）、家庭（family）、健康（health）、朋友（friends），和尊嚴（spirit）。你必須讓這五顆球都保持在半空中不能掉下。但有一天，你會突然明白，工作這顆球是橡膠做的，掉到地上，它還是會彈起來，但是另外四顆球，家庭、健康、朋友、氣節都是玻璃做的，任何一顆球掉了，就會破了一角、甚至粉碎，無法復原。一旦真正明白了這五顆球的啟示，就會學習去平衡你的生命。」 }--. // 蘇珊日記書評，和劇情大綱.
( Video ) { Ruby Granger } - Productive and Aesthetic Study With Me / Study Day (with timestamps): Link.
( News ) Sudan protests and possible revolution: Link.
( Book ) Guns, Germs, and Steel: Link. I don't need to read this.
By time:
1. 01:25 Insomnia: Can't sleep, don't know why, maybe too excited.
2. 01:26 Update blog.
3. 01:40 Watching video: 台灣基進 - 中國資訊滲透戰 - 假新聞, TWICE "FANCY" M/V.
4. 02:05 Reading book { The One Thing }.
5. 02:45 Misc.
6. 03:40 Go to bed again:
7. 10:45 Wake up.
8. 10:46 Prepare ingredients.
9. 11:00 Exercising: { FitnessBlender} - Brutal HIIT Ladder Workout - 20 Minute HIIT Workout at Home, face-up plank, and side plank.
10. 11:30 Relax.
11. 11:35 Cooking.
12. 11:55 Watching video.
13. 13:35 Reading book { The One Thing }.
14. 14:50 Taking nap.
15. 15:50 Watching video.
16. 16:00 Taking shower.
17. 16:30 Watching video.
18. 16:55 Reading book { The One Thing }: --{ What is the "one thing" you can do such that by doing it everything else will be easier or unnecessary? Ask this question to every "ball" you handles - your spiritual life ; physical health ; personal life ; relationship ; job. }-- // --{ People do not decide their futures, they decide their habits and their habits decide their futures. }-- // --{ 3 layer of iceberg from bottom to top - purpose, priority, productivity. What you see (productivity) is determined by what you don't (priority and purpose) }--.
19. 18:25 Misc.
20. 19:30 Cooking.
21. 20:00 Watching video: Mostly about Stoicism.
22. 22:40 Sleep.

2019-05-16

Exercising

Wasting time

{ lahSale }

By time:
1. 06:45 Wake up.
2. 06:55 Go exercising.
3. 07:50 Take a shower.
4. 08:15 Prepare ingredients.
5. 08:25 Upload blog.
6. 08:35 Cooking: Reading code update from woody.
7. 09:05 Eating: Reading code update from woody.
8. 09:25 Brushing teeth.
9. 09:33 Bathroom.
10. 09:47 { lahSale }: Re-define spacing (length) variables, little visual tweaking about spacing (length) related elements, desiging message.vue status code visual presentation.
11. 12:30 Learning how to use recursive { slots } in { vue }: Recursive slots, and passing props to child component which use slots.
12. 13:30 Take a nap.
13. 14:00 Watching video: 館長做人很講信用。
14. 14:30 Keep working on { lahSale } ,, { slot } part: In the end, Woody help me to insert the component into slot.
15. 18:00 Finished status code component.
16. 18:01 Prepare ingredients.
17. 18:15 Misc: Mostly wasting time.
18. 19:40 Eating, watching video: Mostly wasting time.
19. 22:00 Sleep.

2019-05-17

{ Stoicism }

Virtue

Peace, clam, current

Wasting time

Jump to higher "energy level"

Back-end

{ Express.js }

{ MongoDB }

About I'm keep wasting time these days: Literally. I can't reach "energy level" high enough to learning an focusing on my main project now (my CMS). I keep wasting time for few days already, don't want to study neiter entertainment, I was stuck at the middle and doing nothing literally. // And later, I intended to take a deep "crouch" for a while, then try again to jump to "higher energy level" to see if I can penetrate the current situation, the "reluctance", then "painful" felling. It works, my focus back in just very short time, I can highly focus now and keep moving. // This happened everytime when I was switching from a old project to a new project.
( Book ) Staring at the sun - Overcoming the terror of death - by Irvin D. Yalom: Found at { UDN } - 《凝視太陽》：過一個「克服死亡恐懼」的充實人生. // Library Genesis.
( Philosophy ) Stoicism 101 - Massimo Pigliucci:
1. Link: Link.
2. 00:51 Questions to which you'll begin to find an answer by the end of this talk: Link. Overview of this lecture.
3. 12:15 "Garden system" as metaphor: Link. --{ The protective fense is the **logic**, the nuturing ground is the **physics**, the precious fruits is the **ethics** }--.
4. 21:21 Virture including these elements: Link. Wisdom, courage, justice, temperance.
5. 29:03 About knowing what you control and what you don't: Link. --{ One thing Epictetus keep saying is, never think everything you have is your stuff, think of it as is you borrowed from universe, so when you lose it, well, you didn't lose it because it wasn't yours, you just give it back to universe, you enjoy it for many decades and you were lucky to do so. }--, so basically, nothing will be eternal, nothing you can cotrol, except virtue, the only thing you can control and can keeps, when you look back before you die.
6. 34:00 The stoicism did not seek to supress emotion: Link. What stoicism thought is you need to transform the emotion. --{ ... they are clam because out of knowledge and out of cultivating positive emotions, not out of suppressing emotions. }--.
7. 36:39 Stoicism ,, spiritual [ practice ]-[ exercising ]: Link.
( Philosophy ) 我的6項「斯多葛提示」 - Stoicism 101: Link.
( Music ) { Twice } - one in a million: Link.
( Webdev ) { Traversy Media } - Learn the { MERN } Stack:
1. Express API & MongoDB:
  1. Link: Link.
  2. 13:30 Create "Models" file and setting schema: Link. Define fields of documents and schema?
  3. 26:47 The completed "Models" file: Link.
  4. Keyword: req.params.id, res.json(), res.status, Item.find(), Item.findById(), newItem.save(), item.remove().
2. Client Setup & Reactstrap:
  1. Link: Link.
  2. 01:27 { React } is inside { client } directory and has it's own { package.json }: Link.
  3. 02:39 Use { proxy } instead of full url: Link. Not quite understand this part.
  4. 05:44 { npm start --prefix client }: Link. This will make npm (back-end part), go into the client directory, then run npm start.
3. Prepare & Deploy:
  1. Link: Link.
  2. 04:39 Set front-end ,, { client/build }, as "static folder" inside back-end ,, index.js: Link. Oh! This is how I deploy my front-end with back-end, so now I only need one server instead of 2 (front-end and back-end served on same server, same domain name, same port).
  3. 06:26 { .path.resolve() }: Link. Don't know the purpose yet.
( Database ) The Problem with MongoDB - relationship, normalization, duplication, constraint: Link.
( Database ) Why You Should Never Use MongoDB?: Link. Worth reading.
( Database) MongoDB { JOIN } equivalence to SQL: Link. aggregate() and $lookup.
( Database ) { Traversy Media } - { MongoDB } in 30 minutes:
1. Link: Link.
2. 16:47 Use { $set } to keep the rest properties of a document: Link.
3. 18:10 Use { $inc } to do increment of a property: Link.
4. 19:12 Use { $unset } to remove a property: Link.
5. 20:06 { upsert: true } will insert a new document if it doesn't exists: Link.
6. 21:35 { $rename } will change the property **name**: Link.
7. 23:05 { .remove() } and { justOne: true }: Link.
8. 25:17 { .find() } and { $or }: Link.
9. 26:22 { .find() } and { $lt }: Link.
10. 27:24 { .find() } and "deep search": Link. Notice, you have to use a pair of quote ("") in some MongoDB client.
11. 28:17 { .find() } and search inside an array: Link.
12. 28:35 { .sort() }: Link.
13. 31:33 { .forEach(callback) } and { print() }: Link.
( Webdev ) { Traversy Media } - { MEAN } Stack - making authentication and login system: Link. I only read a little. when I need to do authentication then I should lean the remain.
By time:
1. 06:40 Wake up: Should wake up at 06:20.
2. 06:50 Upload blog.
3. 07:00 Watching video.
4. 07:45 Reading articles: 《天工，諸神，機械人》：追求永生不死的內在缺陷，就在凡人英雄神話裡 (not understanding).
5. 08:45 Eating, watching video.
6. 09:20 Reading articles: 別人眼中的缺點，卻是斯多噶哲學從一開始就吸引我的特質 (too far to me).
7. 09:30 Wasting time: Literally. I can't reach energy level hight enough to learning an focusing on my main project now. I keep wasting time for few days already.
8. 10:00 Take a nap.
9. 10:37 Learning { Express.js }: Reach energy level hight enough, and stick with it. Link.
10. 11:25 Buying drinks and junk foods.
11. 11:37 Watching video { Stoicism 101 } and exercise (body): Link.
12. 14:35 Watching video ,, useless stuff: { She's Danni } - Weekly Vlog 41 - 學日語.
13. 14:40 Watching article ,, Technical Details on the Recent Firefox Add-on Outage: Link.
14. 15:05 Learning { Express API & MongoDB }.
15. 15:15 Brushing teeth.
16. 15:25 Keep learning { Express API & MongoDB }.
17. 15:29 Watching youtube: Distracting again.
18. 15:31 Keep learning { Express API & MongoDB }.
19. 15:50 Bathroom.
20. 15:56 Keep learning { Express API & MongoDB }.
21. 16:30 Keep learning - { Traversy Media } - { MERN } stack - client setup.
22. 17:10 Keep learning - { Traversy Media } - { MERN } stack - fast forwarding few videos.
23. 17:35 Dancing with music.
24. 17:50 Download multiple { Traversy Media } video at onece: Because it is more easy to fast forward through vlc player.
25. 17:55 Watching video: Mostly useless stuff, like { Twice } 1, { Twice } 2, { Twice } 3.
26. 19:23 Keep learning - { Traversy Media } - { MERN } stack - fast forwarding few videos.
27. 20:00 Looking London Underground map vs Taipei Metro map ,, color usage: Observing the Inforgraphic design.
28. 20:18 Keep learning - { Traversy Media } - { MERN } stack - fast forwarding few videos.
29. 20:20 Brushing teeth.
30. 20:30 Learning - { Traversy Media } - { MongoDB } in 30 minutes.
31. 21:50 Searching with keyword "don't use mongodb": I will use it anyway, just finding some other viewpoint.
32. 22:30 Misc.
33. 22:42 Watcing video: Useless stuff.
34. 23:20 Sleep.

2019-05-18

Exercising

{ 下交叉綜合症 (症候群) }

{ 臀肌 }

{ 髖屈肌 }

Back-end

{ Express.js }

{ MongoDB }

{ Twice }

( Music ) { Twice } - one in a million: Link.
( Health ) { 下交叉綜合症 (症候群) } - 骨盆前傾 - 需訓練 { 腹肌 } 和 { 臀肌 }: Link. Very useful and clear illustration! 反而不是要訓練 { 下背 } 和 { 髖屈肌 }，因為 { 下背 } 和 { 髖屈肌 } 要多做 [ 拉伸 ]-[ 舒展 ]。
( Health ) 骨盆前傾並不能說明是不自然的 (也許某些人天生就這樣): Link. --{ 有些理論往往會以「X 拉 Y 導致 Z（一般指疼痛）」，像是：「您坐太多，因此髖屈肌群會變緊繃，將骨盆拉往前傾的角度，導致腰椎前凸的幅度增加，帶來背部疼痛」，但在科學上站的住腳嗎？各種疼痛，從下背疼痛、腹股溝疼痛和髖關節疼痛都指責是「不起眼的骨盆前傾」所造成？ }--.
( Health ) 如何解決骨盆前傾 - 訓練 { 臀肌 } 和 { 髖屈肌 } - 弓箭步和啞鈴: Link. 原來 { 臀肌 } 和 { 髖屈肌 } 是在前後對稱的位置上的，只是一個是在前，一個在後。
( Health ) 弓箭步: Link1, link2.
( Health ) [ 髖屈肌 ],[ 骼腰肌 ] 拉伸，弓箭步: Link. --{ 長期的坐式生活，有可能會有髖屈肌緊繃的問題，當然也有可能也有髖屈肌無力的問題 }--. 注意，弓箭步的目的是伸展髖部，不是伸展腰椎，不要讓脊椎弧度過大，這樣對伸展髖部反而沒有效果而且反而是加大脊椎弧度！
( Health ) 停止伸展您的髖屈肌，強化它！: Link. 標題應該改為 "如何訓練你的髖屈肌"。不過我的 [ 久坐 ]-{ 骨盆前傾 } 問題是要訓練 { 臀肌 }，而不是 { 髖屈肌 }。
( Health ) ( Not as important as others ) 腰痠背痛老是治不好？醫師也在做的「鍛鍊保健法」擺脫下背痛！:
1. Link: Link.
2. 13:26 骨盆前傾: Link.
3. 14:46 { 下交叉綜合症 (症候群) } - 骨盆前傾, 核心肌肉無力, 臀大肌無力的示意圖 : Link. 所以多深蹲，多做 plank?
{ She's Danni } - 铛姐采访电影导演: Link.
{ Twice } - { Mina }: Link1, link2.
( Webdev ) ( Full stack ) { Traversy media } - Full Stack Vue.js, Express & MongoDB:
1. About: This series is very quick but complete demonstrate about to set up the simple architecture from front-end to back-end to { MongoDB }. Useful ((only)) when you have no idea how to set up full stack in the first time.
2. Part 1 - Express API:
  1. Link: Link.
  2. 04:00 Install dependency for this project: Link.
  3. 16:16 Add { async } keyword before ES6 function: Link.
  4. 22:40 { mongodb.ObjectID() }: Link.
3. Part 2 - Vue Frontend:
  1. Link: Link.
  2. 12:08 Convention - { localhost/api/posts }: Link. Learn that convention, that is good practice, you design your api url like this, then under this (same) { api/posts }, you can have 4 methods - GET, POST, PUT, DELETE. Now everything is organized and easy to understand.
4. Part 3 - Prepare & Deploy:
  1. Link: Link.
  2. 04:16 Setting { proxy } and { dist } directory: Link.
  3. 08:40 { Route } handling and { static directory } (static assets): Link. Notice, the order of that /.*/ matters, it can't be placed before '/api/posts' since it will be "adopted" first.
( Database ) SQL to MongoDB mapping chart: Link. For example, somethign like SELECT is equivalence to .find().
( Database ) Install MongoDB on Debian (v3.2): Link. There is 2 options, either install MongoDB community version, or Debian own MongoDB packages, I choose latter one since it is more brainless to install, but it is very outdated (released at 2015).
By time:
1. 08:20 Wake up: Fall asleep a bit late last night.
2. 08:30 Upload blog, listen to music, misc.
3. 08:55 Exercising at home: { FitnessBlender } - Brutal HIIT Ladder Workout - 20 Minute HIIT Workout at Home, and plank.
4. 09:20 Watching video and taking shower: Video about 下背痛， related to { 下交叉綜合症 (症候群) }.
5. 10:10 Research about { 下交叉綜合症 (症候群) } and 骨盆前傾.
6. 12:00 Grocery, cooking, eating.
7. 13:10 Learning how to improve { 下交叉綜合症 (症候群) } and strengthen { 腹肌 } 和 { 臀肌 }: To solve [ 久坐 ]-{ 骨盆前傾 } problem. // These few hours of time spending totally worth it, understanding the concept of body structure, understand the source of specific body problem, understand where to correctly enforce the exercising, is pretty important for health and long run, much more important than studying other things first. This will pay off in the long run I believe.
8. 14:05 Watching video ,, mostly useless stuff: Finally finished the research. // "Useless" video such as { Twice } - { Mina }.
9. 15:15 Learning - { Traversy media } - Full Stack Vue.js, Express & MongoDB.
10. 15:30 Misc: Distracted, doing other stuff.
11. 15:45 Keep learning - { Traversy media } - Full Stack Vue.js, Express & MongoDB.
12. 17:30 Take a break, eating, watching video.
13. 17:53 Reading article { Why You Should Never Use MongoDB }: Same article (lazy link) as yesterday.
14. 19:07 Watching video: "Useless" stuff like TZUYU TV "KimTZUYU".
15. 19:32 Setup { MongoDB }: Installing MongoDB.
16. 20:45 Practicing { MongoDB }: Through MongoDB In 30 Minutes (lazy link).
17. 22:10 Cooking, watchin video: TWICE play STATUES and Sana's [TAXI] dance punishment.

2019-05-19

Stay up late

{ Twice }

Back-end

{ MVC } design pattern

{ Controller }

{ Routes }

{ Model }

{ REST API }

{ Express.js }

( Music ) { Twice } - one in a million - instrumental:
1. Version TJ Karaoke: Link.
2. Unknown version: Link.
( Twice ) ( Jyp ) Maknae line and Jyp singing shy,shy,shy part: Link. What a father with soft heart!
{ 館長 } 苦苓今天打電話來! 館長想說算了，但律師心疼館長堅持走法律途徑。館長:請問大家我該怎麼辦?: Link.
( Back-end ) ( MVC design pattern ) { MDN } - { controller },{ model },{ route }: MDN - Express 教學 4: 路由與控制器. Very helpful demostration of { controller },{ model } (of { MVC } pattern) and other things.
( Back-end ) ( MVC design pattern ) { Model } - Model per database table is bad idea?: Link. --{ ... It is known as a anemic model and considered an anti-pattern ... If you restrict your models to a single table, where do you put the code (behaviour) that needs to deal with data and behaviour from multiple tables? }--, --{ In general you should create your models not per table or per controller but per business object. Sometimes it maybe a 1:1 relationship with your tables structure or with your controllers, but not necessary. }--, --{ ... you will want to create your models per business object - the problems that the business is trying to solve should drive how you create the model classes. }--.
( Express.js ) Redirect a { route }: Link.
( Javascript ) Why we don't define methods inside { constructor function }?: Link1, Methods within Constructor vs Prototype in javascript. This article claims, we should use Person.prototype.getFullName = function (...) {...}; (outside constructor function), instead of this.getFullName = function (...) {...} (directly inside constructor function), this is because this cost less memory usage. But I don't care, putting 2 things in different places looks more sloppy and error prone, I will not adapt that prototype practice. If necessary, I will even use Class (syntax sugar) or TypeScript totally.
( Http ) REST API basic - { Traversy Media }: 07:47 Endpoints and request methods, 09:47 common Authentication practice.
( Back-end ) Good practice of naming route rules: Link. This is also related to REST API. // This is also related to model (of database [ table ]-[ collections ]).
( Express.js ) Use "virtual prefix" for your static URLs, rather than having the files added to the base URL: Link.
By time:
1. 01:20 Sleep: Stay up late again, bad habbit. Mostly watching video about { Twice }.
2. 09:15 Wake up.
3. 09:20 Upload blog.
4. 09:25 Bathroom.
5. 09:30 Upload blog.
6. 09:40 Listen to music: Mostly { Twice }.
7. 10:05 Eating, watching video.
8. 10:35 Practicing - { Traversy media } - Full Stack Vue.js, Express & MongoDB: As same as yesterday.
9. 10:55 Brushing teeth.
10. 11:05 Thinking about { back-end } config good practice: As well as learning javascript Constructor Function.
11. 12:20 Practicing - { Traversy media } - Full Stack Vue.js, Express & MongoDB: Loading extra body parser feature for { express }, you don't need to use { app.use(require('bodyParser').json()) } anymore.
12. 13:15 Listening to music and dancing: TWICE - one in a million.
13. 13:32 Understand { mongoose }-{ ODM }: From MDN - Express 教學 3: 使用資料庫 ( Mongoose)
14. 14:05 Found keyword { controller }: At MDN - Express 教學 4: 路由與控制器. Very important concept, one pillar of { MVC } pattern, I don't very clearly understand { controller } before, this is good chance to learn it.
15. 14:15 Take a nap..
16. 14:50 Go buy drinks..
17. 15:10 Watching video: Mostly realated to Twice. Link.
18. 16:15 Read articles about { mongoose }: Conclusion - So after reading some articles and some suggestions, I choose not to use Mongoose, the main reason is learning Mongoose need more time, also it need constant time to review and remember it, when my project is small and don't need complex database model, it don't worth it, I don't have time to learn and maintain new thing. I decide to build validation myself, it will be more plain stupid but also easier to understand, especially for maintenance.
19. 17:00 Dancing with music.
20. 17:20 Reading article related to { controller }.
21. 18:30 Reading article related to { model },{ business object },{ database table }.
22. 19:30 Cooking, eating, understading { REST API } basics.
23. 20:30 Watching video: Mostly realated to Twice.

2019-05-20

{ JYP Entertainment}

Back-end

{ MVC } design pattern

{ Express.js }

{ Mongoose }

( Kpop ) Park Jin Young, Living as a musician rather than Chairman: Link.
( Kpop ) JYP, Is there a company that spends 2 billion dollars on meals?: Link.
( Kpop ) JYP ,, The 3 Most Important Things JYP Looks For In His Artists, And They’re Not Talent: Link. 1. Honesty. 2. Sincerity. 3. Humility
( Kpop ) JYP 本人談 JYP 2.0，公司組織架構異動，管理方式異動: Link.
( Kpop ) 當TWICE與JYP一起直播時綜藝魂大爆發: Link.
( Express.js ) Module Scope: Link. Ok, so use var instead of let is totally fine, since each module in Express.js are isolated in Scope with each other.
( MVC design pattern ) What is the model lifetime in MVC application?: Link. I'm not sure ... .
By time:
1. 01:40 Sleep: Stay up late again, bad habbit. Mostly watching video about { Twice }.
2. 09:50 Wake up.
3. 10:00 Upload blog.
4. 10:25 Watching video, cooking, eating: Mostly about JYP entertainment.
5. 12:15 Figure out how to connect to { MongoDB } in { Express.js }: Thinking about should I use Mongoose again.
6. 12:35 Learning about { ORM }: { ORM }.
7. 12:49 Decide to use { Mongoose } again: Only because of rich resources (documnent, tutorials ...), community support.
8. 12:55 Take a nap.
9. 12:27 Wake up, watching video.
10. 12:35 Learning { Mongoose }.
11. 14:15 Grocery, laundry, learning { Mongoose }.
12. 15:27 Eating fruit, listening music, dance, brushing teeth.
13. 15:47 Finding source of problem why Mongodb data don't persist, but vanish after leaving shell: Err ... I thought db will show all database, and I thought previous database and collections were missing. I have to use show dbs instead.
14. 16:15 Learning { Mongoose }.
15. 17:40 Thinking about { MVC } [ class ]-[ instance ] lifespan problem.
16. 19:20 Cooking, learn { MVC } by doing and practicing.
17. 19:50 Eating, watching video.
18. 22:20 Sleep.

2019-05-21

Exercising

{ Twice }

Back-end

{ Express.js }

{ Node.js } module

{ Node.js } ,, error handling

{ 看电影了没 } - 为什么我们害怕衰老？戛纳金棕榈 { 爱 }: Link. 美好的事情不會長久，這才是自然的常態。
( 柯文哲 ) 20190517 雜學青講堂 - [ 非認知能力 ],[ 理解到失敗是生命中的一部分 ]: Timeline 1, timeline 2. 美好的事情不會長久，這才是自然的常態。
Promotion Clip - J.Y. Park - hammer dance: Link.
( Node.js ) Are Node.js modules singletons? - "Module Caching": Link. By this article, I learned Module Caching - an important concept of how node.js modules behaive, see Module Caching section of the link, --{ Every call to require(‘foo’) will get exactly the same object returned, if it would resolve to the same file. }--. // This article also talks about "Circular module dependency", "Module Caching" will works as long as the version is the same.
( Node.js ) Circular module dependency: Link ,, section "Circular module dependency".
( Node.js ) Does { require() } and { module.exports } with different [ position ]-[ order ] affects the results?: Link ,, section "Circular module dependency". Yes, node.js make it works synchronous, not asynchronous, so if you put some code after module.exports, it will works later.
( Node.js ) { ES6 },{ node.js } are loaded Synchronously or Asynchronously?:
1. { ES6 },{ node.js } modules and are loaded Synchronously or Asynchronously?: Link. --{ ES6 module loaders will be asynchronous while node.js module loaders are synchronous. }--.
2. Freecodecamp - exports, module.exports, and synchronous loading of modules: Link. --{ We cannot change the exports object asynchronously. We can’t, for example, do the following in any module ... }--.
3. You can not delay { module.exports } in node.js: Link.
( Node.js ) Export Module in Node.js: Link.
( Node.js ) 從資料夾載入modules: Link, see last section.
( Express.js ) All about middleware: Link.
( Http ) What header and body content you should put for { 201 } response?: Link.
( Express.js ) User defined error handling callback function: Link1, link2.
The 80/20 Guide to Express Error Handling: Link. Conclusion ,, I haven't fully read the article, but the most easy way to do [ error handling ]-[ error handler ] is, define a special middleware with 4 arguments, and put it at the end of index.js, and all error will come to here, like app.use(function(error, req, res, next) { ... });.
By time:
1. 06:50 Wake up.
2. 07:05 Exercising at home: { FitnessBlender } - Brutal HIIT Ladder Workout - 20 Minute HIIT Workout at Home, and plank.
3. 07:30 Taking break:
4. 07:40 Upload blog.
5. 07:45 Learn { MVC } by doing and practicing.
6. 08:40 Finally I can fetch data from { Mongoose }!: After having long trial-and-error (from yesterday), I finally figure out right architecture and right syntax to fetch the real data from mongodb through mongoose ODM. THe progress is so slow because it use different (and a bit complex) system (object things) to accomplish the interaction with DB, and the syntax is specific to mongoose only. But the biggest reason is, I don't find a suitable [ resources ]-[ tutorial ] to lead me, I only use Traversy Media video and few other blogs, and reading a little official doc of mongoose. This waste a lot of time since having good resources will save a lot of time wasting and more efficient.
7. 08:53 Cooking, eating.
8. 10:35 Testing and understanding { node.js } ,, { module.exports }: To my surprise, require() same module module A, in 2 other different module module B, C, will causing B and C using same reference of A.
9. 10:50 Understanding { node.js } ,, { module }: Module Caching.
10. 11:35 Watching video: Sleepy. Link.
11. 12:00 Understanding { node.js } ,, { module }: Module Caching things and Circular Dependency.
12. 13:00 Take a nap.
13. 13:30 Wake up, watching video.
14. 13:55 Understanding { node.js } ,, { module } ,, synchronous loading.
15. 15:00 Solved architecture problem: My { Node.js }-{ MVC }-{ practing code }, will put { controller } and { model } into individual { node module }, and { model } will be instantiate once when someone { require() } it, the second { require() } will get same instance reference but not a new instance, so { mongoose } will not complain. In other words, { model } ,, lifespan, is infinite and as same as node.js, while { controller } ,, lifespan, is as long as one request cycle.
16. 15:50 Cooking, eating, watching video.
17. 17:25 keep doing { Node.js }-{ MVC }-{ practing code }.
18. 17:35 Bathroom.
19. 17:50 keep doing { Node.js }-{ MVC }-{ practing code }.
20. 19:10 Eating fruit, watching video.
21. 19:40 { Express.js } ,, dealing with error handling.
22. 21:30 { Express.js } ,, my error handling working now.
23. 21:31 Cooking, eating, watching video.
24. 22:55 Sleep.

2019-05-22

Exercising

{ Twice }

Back-end

{ REST API }

{ HTTP status code }

{ Mongoose }

{ Idempotent }

{ Express.js }

( Music ) Thomas Bergersen - Colors of Love - Sun: Link.
( Youtube channel ) MoMo JJang 모모짱: Link. It's not keep updating.
( Twice ) Sana Cute & Silliness - Twice in Switzerland: Link.
( Twice ) Sixteen EP1 - Sana performance cut: Link.
( Twice ) Twice Evil Maknae Chou Tzu: Link.
( Mongoose ) Model.save(): Link,, section "Saving refs". This link itself is not important, I just want to note down the example of putting callback function and another inner .save() inside outer .save().
( Http ) What is the proper REST response code for a valid request but an empty data? - 404 vs 204?: Link1, link2. My conclusion - I will use 404, 2 biggest reason is 1. This seems to more obey to the standard. 2. With 404, you can put response body, but with 204 you can't, you have to use 200 instead.
( Http ) HTTP status code for update and delete?: Link. So both 200, 204, 202 is acceptable, I prefer 200 more and put extra information in response body ,, json.
Idempotent methods vs safe methods: Link.
By time:
1. 07:00 Wake up.
2. 07:10 Upload blog.
3. 07:25 Watching video.
4. 08:00 Watching video.
5. 08:33 Cooking, take deeper leaning with { mongoose }: What I did in last 2 days, when I was learning { mongoose }, is by taking shortcut, , watching video, frequently googleing, trail-and-error myself, but for this case (learning { mongoose }), it is less efficient, than learning it systematically (like reading book, docs), since it is a bit like big knowledge system, and coupled together, I can't learn it piece by piece. Now I'm going to read the official docs.
6. 09:00 eating, reading { mongoose } Docs, brushing teeth.
7. 09:30 Take deeper leaning with { mongoose }.
8. 10:15 { Mongoose } ,, figure out (seraching) how to "find then delete".
9. 10:50 Watching video: Sleepy.
10. 12:00 { Mongoose } ,, figure out the { signature } of { callback } function that passed into those CRUD operation methods.
11. 12:18 Eating fruit, watching video: Sleepy.
12. 12:30 { Mongoose } ,, figure out the { signature } of { callback } function that passed into those CRUD operation methods.
13. 14:10 Found { res.send() },{ next() },{ resolve() },{ reject() } don't { return }: Found { Express.js } ,, { res.send() },{ next() }, and { Promise } ,, { resolve() },{ reject() }, they all don't return immediately after executed, so I have to put a return behind them to make sure places using these method will interrupted properly.
14. 14:15 Testing if back-end and database handles async, resolve, and reject correctly.
15. 14:35 Exercising at home: { FitnessBlender } - Brutal HIIT Ladder Workout - 20 Minute HIIT Workout at Home and plank.
16. 15:05 Taking shower.
17. 15:35 Watching video.
18. 15:55 Learning about right { HTTP status code }: Use 404 or 204 if a resources (like post id) is not found?
19. 17:05 Keep doing back-end ,, { CRUD }: Update and Delete part of Mongoose.
20. 17:18 Cooking.
21. 17:43 Eating, watching video.
22. 19:40 Keep doing back-end ,, { CRUD }: Update and Delete part of Mongoose.
23. 20:45 Understand { idempotent } in { HTTP method }.
24. 21:10 Keep doing back-end ,, { CRUD }: Update and Delete part of Mongoose.
25. 21:40 { CRUD } ,, Delete, finished: Finished [ testing code ]-{ Mongoose }-{ CRUD } ,, { Create },{ Read },{ Delete } methods, now still remain { Update } part.
26. 21:45 Search for "rest api use query string or not": Querystring in REST Resource url. My conclusion - I will stick with query string, since url standard might be changed at any time, and if it changes, it breaks a lots of things, that is what I don't like.
27. 21:50 Misc.
28. 22:03 Watching video.
29. 22:43 Sleep.

2019-05-23

Back-end

{ Twice }

{ Express.js }

{ Function arguments signature } good practice

{ Async function }

{ try ... catch block }

{ Mongoose }

( Music ) { Twice } - Sleep tight good night - 20171206 - live: Link.
{ TWICE } - Ordering Ice Cream in English in Switzerland: Link. Beautiful moments always not last long, this is how natrual works.
( Music ) ( Dance ) ( JYP ) Honey - 20160415: Link.
( Twice ) { Ohh-ahh } live singing: Link1 link2.
( Javascript ) { async function } ,, deal with { reject } with { try ... catch } block: Link.
{ try ... catch block } can be looped ; async function:
1. { try ... catch block } can be looped: See link, I'm not sure how to describe this, but looking at this code, the { try ... catch block } is nested inside { for } loop, and guess what? This iteration will loop more than once! So I misunderstood how { try ... catch block } works, I thought if logic flow goes inside { catch } block, it will automatically jump to more even outer another { try ... catch block } somewhere, but this is not true, it will keep flowing like normal flow [ after ]-[ below ] first { catch } block. Unless you put { throw ... } in the inner { catch } block, the code flow will not jump to outer { try ... catch block }!.
2. { Await } keyword and { reject }: Also, until now I realize, you have to always put { try ... catch block } outside the { await }, because when { await } get { reject } (instead of { resolve }), the logic flow will jumpt directly to that { try ... catch block }, and if you don't have { try ... catch block } in that function, the { exception } will keep "bubble up" to parents function to try to "be catched", it still not, it will be "naked" in global scoped and causing error.
3. How to throw an { reject } in an { async function }: Since async function will handle Promise in the background, you don't need to find way to "return a reject", but you use the most traditional way - throw an exception - just use { throw ... } and it will create a Promise { reject } in the background (for example it will pass it to the parent function ,, the { await } location).
( Webdev ) { Sitepoint } - A Beginner’s Guide to Webpack: Link. Very quality, easy to grasp, story like, deep enough, article for beginners like me! Very good. If you want to Webpack from basic, follow the steps and download that practicing code from github, and build the bundle from testing source code yourself.
HTTP status code after successfully POST? - 201 vs 303?: Link. Use 201, but append "Refresh" in header, so client will still know to refresh. Because though POST-Redirect-GET (PRG) is good [ pattern ]-[ solution ], it is not fit in RESTful. So the balanced solution is use 201, but add "Refresh" in header.
{ PTSTalk 公視 } - 拔除大腦 ARM致命一擊！華為慘遭KO: Link.
By time:
1. 07:10 Wake up: Over sleep for 20 minutes, should wake up at around 06:50. Feel sleepy.
2. 07:15 Upload blog.
3. 07:30 Preparing ingredients.
4. 07:35 Keep doing [ testing code ]-{ Mongoose }-{ CRUD } ,, { Update }.
5. 08:10 Finished [ testing code ]-{ Mongoose }-{ CRUD } ,, all methods (4).
6. 08:11 Cooking.
7. 08:45 Eating, keep doing [ testing code ].
8. 09:05 Learning { Mongoose }.
9. 09:25 Found some answer is not possible to be "Googled", but have to understand systematically: This is an example, when I try to understand the { Mongodb } returned value (for example after updating), I get { ok: 1, nModified: 1, n: 1 }. But since I don't know what those { fields } mean, I kept trying many times to google it with different kind of keyword like "mongodb 'ok' field update". And to one point I realizing this not going to work, I just can't find any useful information except some scatterd one. Then I tried another approach, I found the answer is in the [ manual ]-[ docs ] ,, command update ,, --{ The returned document shows that the command found and updated a single document. See Output for details. }--.
10. 09:35 Brushing teeth.
11. 09:45 Watching video.
12. 10:30 Take a nap: Sleepy.
13. 10:50 Watching video.
14. 11:03 Understanding { Mongoose } return value ,, field ,, { ok },{ n },{ nModified }: { Mongoose } API DOCS is not completed, I always can't find the whole story, for example there is no options documented anywhere, this is why I spend [ so much times ]-[ few days ] just on trial-and-error, this should not happens if DOCS is complete enough.
15. 12:30 Learning javascript function arguments signature best practice, and object Destructuring on function arguments..
16. 13:35 Reading article { A Beginner’s Guide to Webpack }..
17. 14:05 Grocery..
18. 14:50 Cooking..
19. 15:10 Testing javascript ,, { async function }: Because I see { Traversy medai }-{ Brad } write like this, so now I'm sure that client.db('vue_express').collection('post') is not a Promise, and because it is inside an async function, and also invoked by another async function, so that client.db(...) don't need to return immediately, which I never seen this before. // I thought we have always return a pending Promise immediately, but we don't need to, since a async function always implicitly return a Promise to [ "who" ]-[ "where" ] invoke it, even it is blocked by itself await code inside!, so we don't need to do this explicitly.
20. 18:25 Eating apple, misc.
21. 18:50 Testing { Mongoose } ,, nested schema. Try to understand "nested schema" vs { subdocuments }:
22. 20:00 Misc.
23. 20:33 Cooking.
24. 21:05 Eating, learning { 201 Created or POST-Redirect-GET after POST }.
25. 21:30 Brushing teeth.
26. 21:40 Understand what is "payload" in HTTP.
27. 21:55 Watchig video.
28. 23:05 Sleep.
: Link.

2019-05-24

Back-end

{ Http }

{ Express.js }

{ Mongoose }

{ Javascript }

( SAAS ) Cat API: Link. Haha, I thought Dog API is surprising enough.
( Http ) ( REST API ) Format URI by try to make resource URI hierarchy-like: Link. See section 5, GET /users/123/posts/1.
( Architecture ) Stateful vs Stateless Web Services: Link. I know I shouldn't deign server with Stateful already, but I keep need recalling these concept or I will forget. So maybe I should put state in client side? State, ultimately have to store in somewhere right? But can't find any information about something like "designing state on client". So I assume it is implemented by something like { cookie } or { web storage }. Also front-end framwork like { Vue.js } hold states already.
( Http ) ( REST API ) Richardson Maturity Model - 3 level of REST: Link. Till the level 2 is the basics everyone already [ followed ]-[ doing so ].
( Http ) REST - updating multiple resources with one request - is it standard or to be avoided?:
1. See question from here: Link.
2. See answer and suggestions from here: Link. Someone said it is doable but not suggested (it can have complex issue like how you deal with some actions failed? And the status code?), but some suggested that this can improve efficiency a lot and REST is not always align with real [ scenario ]-[ case ] in [ business ]-[ real word ].
3. See [ implementation ]-[ practice standard ] from here: Link. Microsoft docs.
( Http ) Are post requests secure without SSL?: Link.
( Javascript ) How do I remove a property from a JavaScript object?: Link. Use delete.
( Javascript ) How do I test for an empty JavaScript object?: Link.
( Javascript ) Reserved words in JavaScript: Link. You got to know a bit about this, using some word (example for varialble) will causing problem. So I guess this is why [ my ]-[ this ] code don't work as expect - var person = {name: 'Alice'}; var name = true ? person : "stranger"; console.log(name);, it should print {name: 'Alice'} but it print [object Object] instead. Cost me about 2 hours to find out the reason.
( Mongoose ) Schema [ property ]-[ field ] [ name ]-[ key ] conflicts, my custom key conflict with Mongoose reversed key:
1. Problem: See Issues#1760, issues#528, and you will see how stupid the design was, Mongoose assume that people will never use property name like "type", "required", "options", "default", "save" in their { collection }? And if you use it, it will conflict with some Moogoose special property name. But anyway, it seems till now we don't have solution about this, If we tried to use it, Moogoose will complain about "xxx can not be used as property name".
2. Solution: Link. If your custom property name is conflict with Mongoose reversed one, such as "type", you can use like this - type: {type: String}. This will solve the problem (I've not test it yet). Mongoose API has bad document quality, it doesn't mention such critical thing like this.
By time:
1. 07:15 Wake up.
2. 07:24 Upload blog.
3. 07:30 Understand what is "payload" in HTTP: --{ You go to a restaurant and order food. Now the waiter is a web service. you tell the waiter to take your order - e.g mac and cheese. the web service aka waiter take the order to the kitchen a.k.a service end point aka server - so the payload here is “1 order of mac and cheese”. ; on Return the server responds to you request —- the Payload is the food in the plate that the waiter get you when you get food.}--. Good metaphor.
4. 08:05 Searching for REST API good practice.
5. 08:45 Cooking, learning REST API good practice.
6. 09:15 Eating, learning REST API good practice.
7. 09:30 Brushing teeth.
8. 09:40 Learning REST API good practice.
9. 10:20 Searching about "http multiple request or one request for multiple resources".
10. 11:30 Misc.
11. 11:50 Eating apple, brushing teeth.
12. 12:05 [ Testing code ]-{ Mongoose }-{ CRUD } ,, testing nested schema.
13. 13:35 Cooking, misc.
14. 14:16 Eating, reading, keep working on code.
15. 14:35 [ Testing code ]-{ Mongoose }-{ CRUD } ,, testing nested schema.
16. 17:30 Found a wierd unexpected problem in Javascript: Don't know why if I use ternary operator not inside a function it don't work as expect.
17. 20:30 Finished nested schema ,, POST part: Finished [ testing code ]-{ Mongoose }-{ CRUD } ,, nested schema ,, POST part.
18. 20:35 Grocery, cooking, misc.
19. 21:15 Watching ,, { Traversy Media } - Node.js & Express From Scratch, eating.
20. 22:00 Misc, chatting with mom.
21. 23:00 Watching video.
22. 23:20 Sleep.

2019-05-25

Exercising

Back-end

{ Express.js }

{ Cookie }

{ Authentication }

{ lahSale }

{ Cookie }

{ Twice }

{ Vue.js }

( Http ) { Cookie }: Web cookie, including { authentication cookies }. // --{ Although cookies are usually set by the web server, they can also be set by the client using a scripting language such as JavaScript (unless the cookie's HttpOnly flag is set). }--. // JSON Web Tokens: --{ Unlike cookies, which are automatically attached to each HTTP request by the browser, JWTs must be explicitly attached to each HTTP request by the web application. }--. // Differences between cookies and localStorage: --{ Cookies are mainly be read in server-side, whereas local storage can only be read by the client-side. }--.
( Vue.js ) { Scoped slot }: To review, just look at this link ,, that [ yellow ]-[ overview ]-[ graph ].
( Back-end ) ( Express.js ) { Traversy Media } - Node.js & Express From Scratch. [ Link ]-[ part 9]-[ user registration ]. Not read et. This series take you down deep regarding how you can buid a authentication system, in practical standard. Brad guide you how you correctly store the password into database, before hashing.
( Back-end ) ( Express.js ) { express-validator }-{ middleware }: Docs, { Traversy Media } Brad example.
Blood type: 血型,到底是幹嘛的?, 血型性格學說.
By time:
1. 07:30 Wake up.
2. 07:36 Upload blog.
3. 07:46 Preparing ingredients.
4. 07:55 Take a look about { lahSale }.
5. 08:25 Cooking, reading code of { lahSale }.
6. 09:00 Eating, reading code of { lahSale }, brushing teeth.
7. 09:22 [ Testing ]-[ learning ] { Vue.js }-{ slot }-{ scope }.
8. 09:45 Learn nothing from Vue docs for { scoped slot }: Why most docs are always so unfriendly, lack of example, lack of steps, lack of background story, lack of viewpoint from newcomers, hard to understand? I always have to cross reference different resources (mostly second hand, not first hand) to understand many things. // Now I need to go to find blogs teaching about { scoped slot }, this is much efficient, less time wasting, I waste a lot of time dealing with { scoped slot }, mostly not on understanding { scoped slot } itself, but on understanding that incomplete vue docs.
9. 10:40 Found why { Vue }-{ scoped slot } not working: I found why my code keep not working, it's typo again ... such a waste of time, I always have this stupid mistake, and those typo mistake always cost me hours to "debug".
10. 10:50 Go back to { lahSale }.
11. 12:40 { lahSale } ,, working on making table cell item vertical align.
12. 13:00 { lahSale } ,, send { Pull Request } to Woody.
13. 13:05 Grocery.
14. 13:25 Exercising: Brutal HIIT ladder workout - 20 minute HIIT workout at home, and plank.
15. 13:52 Taking a break.
16. 13:55 Taking shower.
17. 14:25 Cooking.
18. 14:40 Watching ,, { Traversy Media } - Node.js & Express From Scratch.
19. 14:55 Eating, understanding { cookie }: Web cookie, including { authentication cookies }.
20. 16:00 Watching ,, { Traversy Media } - Node.js & Express From Scratch.
21. 16:30 Eating apple, watching video about { Twice } TV shows.
22. 19:25 Cooking.
23. 19:40 Watching video, eating.
24. 20:30 Working on { lahSale }: Talking with Woody, Woody said something more to change.
25. 22:30 Watching video.
26. 22:45 Listening to music.
27. 22:50 Sleep.

2019-05-26

{ Twice }

{ lahSale }

{ JQuery }

{ Bootstrap }

Making { scrollspy }

( Twice ) Switzerland Schilthorn - scared looking meambers walking on the high montains: Link.
( Javascript ) ( Library ) { Lodash }: Lodash - 10 javascript utility functions that you should probably stop rewriting, lodash.com/docs.
( JQuery ) You might not need jQuery: Link. This article make 1-to-1 comparison about many methods that jquery syntax corresponding to native javascript syntax. Still worth to talk a quick [ glance ]-[ review ] if you need to find some tool (that using jQuery will be much faster).
( JQuery ) Common positioning related method: .offset() (.top, ,left), .scrollTop(), .height(), .outerHeight(), .innerHeight() ... .
( JQuery ) An introduction to jQuery with some examples: Link.
( JQuery ) { Selectors }: Link
( JQuery ) { :eq() Selector }: Link. So if you want to get specific index of a elements set, you have to use jQuery specific pseudo-selector like this.
( JQuery ) Loop through elements with the same class: Link. Use .each(callbackFunc(idx, item)). // Notice the differences between obj and $(this), so in that callback function, you can use like - elm.style.backgroundColor = "teal";, or $(elm).css("background-color", "teal");, if you want change all matched elements with teal background color.
( JQuery ) { this } vs { $(this) }: Link. --{ if this is a reference to a DOM element, the difference between this and $(this) is that the first is just the reference, the second adds the jQuery library to the reference. }--.
By time:
1. 06:55 Wake up.
2. 07:10 Upload blog.
3. 07:17 Bathroom.
4. 07:25 Misc.
5. 07:30 Testing { Bootstrap } ,, { scrollspy }-{ sticky nav bar }.
6. 08:27 Cooking.
7. 09:05 Eating, watching video, surf the web: Why Is Adobe Flash Dying? They come up with another thing called Adobe Air, but maybe it is not useful too.
8. 10:05 Dealing with problem of { Bootstrap } ,, { scrollspy }: { Scrollspy } need to add class on { body }, otherwise you have to use workaround, but this workaround is bad because it generate 2 scroll bar, and the behavior of when will any of them scrolling is unpredictable.
9. 10:05 Dealing with problem of { Bootstrap } ,, { scrollspy }: Trying other solution without bootstrap, using { r3plica }-{ scrollspy } code.
10. 11:20 Eating apple, brushing teeth.
11. 11:35 Figure out how to load module in { Vue.js }: Building external modules in VueJS
12. 12:30 Understanding Javascript library { Lodash }.
13. 12:55 Figure out how to load module in { Vue.js }.
14. 13:00 Learning { module.exports }.
15. 13:10 Try to implement { r3plica }-{ scrollspy } into { lahSale }.
16. 14:50 Reading source code of { r3plica }-{ scrollspy }: However I tried, it don't work. The module and plugin seems to [ extend ]-[ register ] into { jQuery }-[ main instance ] sucessfully, but it somehow still don't work.
17. 15:00 Cooking: Problem still unsolved yet, but I think I roughly come out the solution now, when I am cooking, by making a child component, sub-nav block, that is reusable, and don't need to pollute parent component environment.
18. 15:15 Watching video, eating.
19. 16:33 Build testing html file to test { JQuery } about scrolling operation.
20. 21:30 Finished testing html file about { scrollspy }: Now I can implemented it into { vue }.
21. 21:31 Working on { lahSale }: Apply custom { scrollspy }-{ sticky nav bar } on { lahSale }.
22. 22:00 Cooking, eating, thinking the code: Almost fixed all bug, now only style need to improved.
23. 23:10 Watching video.
24. 23:30 Sleep.

2019-05-27

Exercising

{ JQuery }

Javascript { Events }

{ lahSale }

Making { scrollspy }

( JQuery ) { jQuery() } method: Link. This core method can not only get DOM, but also add DOM.
( JQuery ) { jQuery } object (returned by { jQuery() } method): Link. // --{ Since jQuery methods often use CSS selectors to match elements from a document, the set of elements in a jQuery object is often called a set of "matched elements" or "selected elements". }-- // --{ Note that a jQuery object is not actually a Javascript Array object, so it does not have all the methods of a true Array object such as join(). }--. // --{ A jQuery object may also be empty if a selector doesn't select any elements ... It is not an error; any further methods called on that jQuery object simply have no effect since they have no elements to act upon. }--.
( JQuery ) Convert jQuery object to JavaScript native object: Link. Simply use .get(index) (docs) will convert JQuery "selected elements" to javascript native object that is representation of DOM.
( JQuery ) How to break out of jQuery each Loop: Link.
( Javascript ) { e.preventDefault() } Event Method: Javascript, { jQuery.click((e) => {e.preventDefault;}); }.
( Javascript ) { getters },{ setters }: Link. Also see this code, see how other people using { getters },{ setters } and how they write beautiful code.
( Javascript ) All { Event } type: Link.
( Javascript ) Checking if an element is visible (display) or not: Link, JQuery method. Use .offsetHeight, this is the only hack and tricks that you can know if parent element is set to display: none, so { .display },{ .visibility } will not work.
Why we have to use { v-for }-{ key } in { vue }: Link ,, see "key" section.
By time:
1. 07:40 Wake up.
2. 07:50 Upload blog.
3. 13:25 Exercising at home: Brutal HIIT ladder workout - 20 minute HIIT workout at home, and plank.
4. 08:30 Taking a break.
5. 08:35 Taking shower.
6. 09:00 Misc.
7. 09:05 Working on { lahSale }-{ scrollspy }: Working on { lahSale }-{ scrollspy }-{ sticky nav bar } component.
8. 09:35 Testing { jQuery }.
9. 09:55 Cooking.
10. 10:25 Eating, watching video, eating fruit, brushing teeth.
11. 11:10 [ Testing ],[ learning ] { jQuery }.
12. 11:?? Working on { lahSale }-{ scrollspy }: Working on { lahSale }-{ scrollspy }-{ sticky nav bar } component.
13. 13:15 { lahSale }-{ scrollspy } component completed: Now I can apply this Vue component it to multiple pages.
14. 13:25 Understanding { v-for }-{ key } in { vue }.
15. 13:25 Understanding { v-for }-{ key } in { vue }.
16. 13:35 Reading source code of { r3plica }-{ scrollspy }: Just want to see if I can find useful thing to learn about JQUery.
17. 13:45 Working on { lahSale }-{ scrollspy }: More problem found.
18. 14:50 Cooking.
19. 15:13 Eating, understanding { javascript }-{ CustomEvent }: Link. Not helpful for the problem I'm dealing with.
20. 15:37 Understanding { javascript }-{ getters },{ setters }: Link.
21. 16:30 Eating fruit, watching video, brushing teeth: Still no way to solve the problem that { lahSale }-{ scrollspy } offsetHeight value is not correct when switching tabs.
22. 17:00 Working on { lahSale }-{ scrollspy }: Brute forced it out with setInterval().
23. 18:30 Finished { lahSale }-{ scrollspy }.
24. 18:31 Working on { lahSale }-{ scrollspy }: Changed many places, but mostly minor change. All related to html structure, html class, and styling.
25. 21:15 Grocery, cooking.
26. 22:00 Eating.
27. 22:12 Brushing teeth.
28. 22:20 Muse.
29. 22:40 Watching video: Mostly about Twice.
30. 23:10 Sleep.

2019-05-28

Back-end

{ Express.js }

{ lahSale }

Javascript { Events }

{ Vue ,, lifecycle }

( Twice ) Tzuyu has no money to buy Chaeng a B'day Gift: Link.
( Music ) { Twice } - Sleep tight good night,: Link.
{ 看电影了没 } - 同一个家庭出来的孩子，为什么贫富差距这么大？: Link.
( 公共電視 - 有話好說 ) 同婚新人小銘＆小玄厭世姬＆簡莉穎尊重差異多元平權責任與承諾同志幸福路上: Link.
( Javascript ) ( Webdev ) Get started with Chrome devtools ,, debugger: Link. Very important basic tools to know, since it will save a lot of unnecessary time waste using console.log to debug.
( Javascript ) How to develop high performance onScroll event?: Link.
( Javascript ) Optimize JavaScript execution performance - { developers.google } : Link. Including .requestAnimationFrame() and Web Workers.
( Javascript ) { .requestAnimationFrame() }: Link. --{ 使用window.requestAnimationFrame()有一個很大的好處是瀏覽器可以幫我們做最佳化，瀏覽器可以綜合考量讓Javascript所產生的動畫和CSS transition或SVG SMIL一次一起刷新，甚至在動畫頁面處於不可見時，停止動畫以節省系統資源和電源的耗用。 }--.
( Javascript ) What is { Web worker } - "multi thread": Web Worker 經驗分享(一), Web Worker 經驗分享(二). 白話淺顯易懂。但至少目前為止我絕對不需要鑽這麼深的東西。
( Javascript ) How ,, make mouse pointer onto a div, page's scroll bar disable scrolling: Link. e.preventDefault().
( Javascript ) { removeEventListener() }: Link. Can remove specific event type used on specific callback function , that used to be use by addEventListener().
{ Vue ,, lifecycle }: Link1 (more basic), link2 (more advanced). Still don't know what this is. Realated to hook, included created(), mounted(), beforeDestroy(), destroyed() ... .
( Vue ) Computed properties should be based only on Vue reactive data. Otherwise, it just won’t work: Link ,, section Thinking that non-reactive data will be reactive. Other sections are not helpful to me.
( Library ) { Axios } vs { Fetch API }: Link. Ok, so now I'm sure I don't need to use { Axios }, { Fetch API } is good enough for my use case.
By time:
1. 07:20 Wake up.
2. 07:35 Bathroom, preparing ingredients.
3. 07:55 Upload blog.
4. 08:03 Misc, reading articles, cooking.
5. 08:35 Eating, wasting time, understanding { Axios }.
6. 09:15 Watching video, getting news, learning how to find first hand source: Mostly relaxing.
7. 12:10 Understanding how to develop high performance onScroll event.
8. 12:20 Understanding { .requestAnimationFrame() } and javascript performance.
9. 14:10 Learn how to use { Chrome } debugger.
10. 15:10 [ Learn how to use ],[ playing ] { Firefox } { performance monitor }: Related to optimize onScroll event.
11. 15:45 Grocery, cooking, watching video.
12. 16:20 Eating, brushing teeth, reading article about { vue }: How not to Vue.
13. 18:00 { lahSale } ,, fixing "stray" { setInterval } and { scroll event }: After reading How not to Vue, it prompt me I haven't destroy the events I used on scrollspy component.
14. 19:30 Watching video.
15. 20:00 Talking with Woody.
16. 20:40 Zone out.
17. 20:50 { lahSale } ,, minor change, style update with woody.
18. 22:33 Cooking , working on { lahSale } ,, header.
19. 23:05 Eating.
20. 23:20 Brushing teeth.
21. 23:30 Watching video: How Tzuyu loves and caring for her Unnies.
22. 23:55 Sleep.

2019-05-29

{ Mongoose }

{ lahSale }

{ Bootstrap }

( Music ) Thomas Bergersen - Colors of Love - { Sun }: Link.
( Vegetarian ) { M觀點 } - 比爾蓋茲也投資的 Beyond Meat 到底是何方神聖？為什麼能夠超越 Uber 成為 2019 年最成功的 IPO？: Link.
( Dog ) ( Touching ) { The Dodo } This Senior Pit Bull Is Proof That Love Can Heal Anything: Link.
( Database ) My current feeling about { Mongoose }: Now I start to learn more and more thing about Mongoose. It is such a complex thing to learn, not because it is hard but it is [ weird ],[ have many quirk rules and trait to know ],[ always works differently than first expectation ]. I thought MonogDB + Mongoose will be easier to learn than MySQL (and this is why I choose to use it with my Node.js backend), but it seems I'm wrong, it spends me more time to learn. And the complexity and "always works differently than first expectation" makes me feel like I'm going to forget everything after few months. Things "works differently than user's expectation", or require too much rules to remember, is generally a worse system and bad design. It surprised me that in default Mongoose don't do schema validation on update, but only on create, what?
( AI ) { Two Minute Papers } - This Robot Throws Objects with Amazing Precision: Link.
By time:
1. 07:55 Wake up.
2. 08:10 Upload blog.
3. 08:22 Checking if there is leading whitespace in { lahSale } files.
4. 08:38 Message Woody.
5. 08:45 Prepare ingredients.
6. 08:50 Messaging with Woody.
7. 09:00 Working on { lahSale } ,, { Bootstrap }-[ main navbar ]: 1. Main navbar add dropdown options 2. Main navbar add mobile menu (collapse feature).
8. 10:05 Cooking.
9. 10:25 Eating, reflecting, eating fruit: Wasting time on reflecting, I should always live in "now" instead.
10. 11:00 Watching video, brushing teeth: OpenAI Five Beats World Champion DOTA2 Team 2-0, This is How Google’s Phone Enhances Your Photos.
11. 12:10 Listening to music: Try to [ remove ]-[ distract ] previous focus.
12. 12:30 [ Testing code ]-{ Mongoose }-{ CRUD } ,, nested schema ,, POST part.
13. 15:15 [ Testing code ]-{ Mongoose }-{ CRUD } ,, nested schema ,, POST part ,, Route finished, others not.
14. 15:16 Cooking, dancing with music.
15. 15:44 Eating, watching video: Mostly related to Twice.
16. 17:10 Brushing teeth.
17. 17:15 Misc.
18. 17:38 Take a nap.
19. 18:15 [ Testing code ]-{ Mongoose }-{ CRUD } ,, nested schema ,, POST and PUT part.
20. 22:15 Brushing teeth.
21. 22:25 [ Testing code ]-{ Mongoose }-{ CRUD } ,, nested schema ,, PUT part.
22. 23:20 Finally around finished all testing and research about back-end!: Now I done the [ testing code ]-{ Mongoose }-{ CRUD } ,, all methods (4), { Traversy Media } { Mongoose } and { Express,js } tutorial. Now I have enough base to build my CMS!
23. 23:21 Watching video.

2019-05-30

Back-end

{ Express.js }

{ MongoDB }

{ Document-oriented database }-{ Data Modeling }

{ mongodb.com } - 6 Rules of Thumb for MongoDB Schema Design:
1. About: Informative! It shows the real [ advantage ]-[ potential ] of MongoDB compare to Relational Database - very flexible to modeling your database structure relationship to fit either One-to-Few, One-to-Many, One-to-Squillions, case. This is where Document-Oriented Database shine, it adapts to real word cases, and very efficient if properly designed.
2. Part1: Part1. One-to-Few, One-to-Many, One-to-Squillions, case. See Model Tree Structures with Parent References (corresponding to One-to-Squillions case in this article), Model Tree Structures with Child References (corresponding to One-to-Many case in this article).
3. Part2: Part2. Two-Way Referencing for optimization. Denormalizing for optimization. --{ Denormalization allows you to avoid some application-level joins, at the expense of having more complex and expensive updates. Denormalizing one or more fields makes sense if those fields are read much more often than they are updated. }--. // Projection.
4. Part3: Part3. Recap, and simple rules to follow every time you are designing your schema.
By time:
1. 00:20 Sleep.
2. 08:25 Wake up.
3. 08:30 Upload blog.
4. 08:35 Planning the structure and functionality of my CMS.
5. 09:47 Cooking, eating, learning { Mongoose } { Index },{ Unique Index }.
6. 11:52 Misc.
7. 13:05 Take a nap.
8. 13:30 Taking shower
9. 14:00 Learing { MongoDB }-{ Data Modeling }: Eye opening!
10. 16:20 Grocery.
11. 16:35 Cooking.
12. 16:55 Watching video, eating.
13. 16:55 Playing { game }-{ Zero-k }, eating: It have been quite some time I did this last time.

2019-05-31

Playing { game }-{ Zero-k }

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, it have been quite some time I did this last time.
3. 11:20 Wake up.
4. 11:35 Playing { game }-{ Zero-k }.
5. 11:45 Bathroom, thinking about "log table" design of my blog and next CMS: No need to create another record type called "log", along with "post", because it doesn't benifits much.
6. 13:00 Cooking and eating.
7. 13:01 Playing { game }-{ Zero-k }: Playing game all day long, non-stoped, even passed midnight.