190701 ( Log table ) 2019-07

Short: -

List

2019-07: Section.
2019-07-01: Section.
2019-07-02: Section.
2019-07-03: Section.
2019-07-04: Section.
2019-07-05: Section.
2019-07-06: Section.
2019-07-07: Section.
2019-07-08: Section.
2019-07-09: Section.
2019-07-10: Section.
2019-07-11: Section.
2019-07-12: Section.
2019-07-13: Section.
2019-07-14: Section.
2019-07-15: Section.
2019-07-16: Section.
2019-07-17: Section.
2019-07-18: Section.
2019-07-19: Section.
2019-07-20: Section.
2019-07-21: Section.
2019-07-22: Section.
2019-07-xx: Section.

2019-07

{ Stoicism }

{ Virtue }

[ Higly focused ]-[ nothing matters ]-[ now ] [ mindset ]-[ zone ]

Humble

Vegan ,, diet

[ Vegan diet ]-[ 多樣，少量，頻繁 ]

Nutritional Supplement

Exercising

{ Twice }

[ Art ]-[ graphic design ]

Portfolio and Resume

[ Job application ]-[ finding job ]

{ 圍棋人科技股份有限公司 }-{ Goer }

Job interview

台灣主要求職 [ 網站 ]-[ 資源 ]-[ 平台 ]

E-commerce

Project { Doggo }

Html

SVG

{ Sass }

{ CSS Variable }

{ HSL } color

{ RWD }

{ Vue }

{ Vue Loader }

{ Vue } ,, assets path

{ Vue } ,, { CSS Modules }

{ Webpack } ,, { resolve alias }

{ GSAP }-[ animation ]

{ 104 }

{ 1111 }

{ github }-{ f2etw/jobs }

{ Linkin }

{ www.cakeresume.com }

By time:
1. 190701:
  1. Portfolio and Resume: Designing Resume site. Header finished.
2. 190702:
  1. Portfolio and Resume: Designing Resume site. // Title, horizontal line, finished. // Sticky footer finished. // Making Vue component that served for different type of SVG.
3. 190703:
  1. Portfolio and Resume: Designing Resume site. // Section heading SVG component. Using HSL color. // Restructure my color system, to support each value of HSL too along with HEX value, so I can tune the "S" part and "L" part for individual use case. // Spend a lot of time on thinking and testing since I many new things I never did it myself before, though I know it.
  2. Learning { CSS Variable } and { Sass } and testing them: Spend a lot of time on testing, since I never do these thing myself before, though I know it.
4. 190704:
  1. Portfolio and Resume: Designing Resume site. // Resume page Mainly completed, the RWD structure is working good, and the info is mainly completed.
  2. Thinking about the RWD thing: After the experience of the first page (Resume page), now I know when page shrink to the mobile screen, it can be tricky since the structure can changes dramastically sometimes. So I better rethink carefully before dive into the second page (Portfolio page).
5. 190705:
  1. Portfolio and Resume: Designing Resume site. // Portfolio page. First section's structure, structure is half finish, but still have long way to go. Writing data logic so the data is seperate from template.
  2. { Vue Loader }, assets path , { CSS Modules } in vue.
6. 190706:
  1. Portfolio and Resume: Designing Resume site. // Portfolio page. First section's (info of my projects) finished, now RWD working from desktop to mobile. The mobile version is hard to deal with since I brute forced using position: absolute to to make deeply nested elements break to outside root element. // Image auto slideshow is working, data logic is on process.
7. 190707:
  1. Portfolio and Resume: Designing Resume site. // Portfolio page. First section's Modal and data logic.
  2. Found my phone battery inflate because of constantly charging.
8. 190708:
  1. Portfolio and Resume: Designing Resume site. // Finished Portfolio page. Doing some small tweaks everywhere.
  2. Sass: Starts to understand the real use case of Sass, not just saving variables and making some template, but making the complex code more manageable.
9. 190709:
  1. ( Stoicism ) { TedTalks } - "Everything happens for a reason"? It's a lie - Cancer Phase IV - Kate Bowler.
  2. Portfolio and Resume: Designing Resume site. // Finished About me page. Doing some small tweaks everywhere. // Start to filling real [ data ]-[ information ]. Spent some time thinking about the content. Taking screenshots of 3 projects.
  3. Dealing with assets path problem - { resolve alias }.
10. 190710:
  1. ( Webdev ) ( Graphic design ) ( RWD ) www.siteinspire.com - web design inspiration.
  2. Portfolio and Resume: Git push and deploy. // Dealing with Route problem. Github ,, gh-pages, don't work with vue-router. I have to make some [ bad-smells ]-[ ugly ] workaround. // Doing Resume PDF version.
11. 190711:
  1. ( Vegan ) 台灣素食營養學會 ,, I got a lot information about Vegan diet and Nutritional Supplement from here. Reliable source.
  2. ( Vegan ) Ultimate strategy for Vegan diet is still - "多樣，少量，頻繁": This single [ rule ]-[ good practice ] emerges more and more stronger, after I gathered so much information from different time, different types, different sources, that is - 多樣，少量，頻繁。
  3. Outdoor: Buying Nutritional Supplement including Vitamin B complex (維生素 B 群), Iron, DHA, 葉黃素 (totally around NT$850). Buying phone battery (old one is inflated due to constantly in charging) (NT$700). Having haircut (NT$100).
  4. Grocery: 綜合堅果，五穀麥片，小麥胚芽。原來全聯也有賣 B 群 (含 B12, B6) 跟 DHA。
12. 190712:
  1. Searching and applying jobs [ from ],[ on ] { 104 },{ 1111 },{ github }-{ f2etw/jobs }: Totally applied 17 jobs today, decent.
  2. Found [ my resume site ] ,, big display problme on real phone and Chrome: I found my resume site can't work on my smart phone and Chrome responsive view, when I was doing some radome checking. Still don't know why, but it's lucky to find this in the first place.
13. 190713:
  1. Troubleshooting and fixed [ my resume site ] ,, display on mobile phone ,, problem.
  2. Project { Doggo }: Working on header ,, nav ,, mobile menu. // Graphic Design new Doggo logo. // Dealing with font works. // Thinking about making an intro-animation.
14. 190714:
  1. Learninng { GSAP }-[ animation ].
  2. Project { Doggo }: About page ,, animation ,, building basic structure and working on positioning.
15. 190715:
  1. Watching video about jobs and portfolio.
  2. My resume site: Updating footer icon, finding and fixing misc problems. Fixing jquery scrolling position ,, incorrect, problem.
16. 190716:
  1. My first job interview - 千蓬股份有限公司 (豪亮燈飾): Homepage, 1111，related to graphic design, product photography, related.
  2. Filling basic info in { www.cakeresume.com }: And searching job on this platform.
  3. Project { Doggo }: Dog breeds silhouette. Convert jpg to svg.
17. 190717:
  1. 2nd job interview - 富欣實業股份有限公司: Homepage, 104. 網頁前端. From 104. IOT related. So now I starts to have image, overview, on what is IOT.
  2. Finding job: Yourator, CakeResume.
  3. ( Job ) 加入新創公司前，新鮮人應該問的七個問題: Link.
18. 190718:
  1. Today's job application sent amount: 104: 14. CakeResume: 9.
19. 190719:
  1. 台灣主要求職 [ 網站 ]-[ 資源 ]-[ 平台 ].
  2. E-commerce.
  3. Today's job application sent amount: 104: 55.
20. 190720:
  1. Working on [ portfolio ]-{ interview version ]: The printed version, so I can bring the [ photos ]-[ papers ] on interview.
  2. Reading articles: About the interview ,, timing, real [ process ]-[ workflow ] of HR in background, how long you get an offer, how to reply when you get an offer, PPT and portfolio to bring to interview, misc ... .
21. 190721:
  1. Outdoor and go print out [ portfolio ]-{ interview version ] images: 19 images, A4 paper size, NT$285.
  2. Understanding transportation system in Taipei: { 大台北公車 },{ 5284 } website.

2019-07-01

Portfolio and Resume

Exercising

{ Vue }

( K-pop ) Confessions Of A Former K-pop Idol (ft. Crayon Pop) | ASIAN BOSS: Link.
{ Kevin Powell } - Create a responsive navigation with no JS!: Link.
( Vue ) { @click.native } - solve { router-link } interception issue: Link.
( Vue ) { @click } - passing argument and event at the same time to callback: Link (search for $event). --{ Sometimes we also need to access the original DOM event in an inline statement handler. You can pass it into a method using the special $event variable ... }--.
( Javascript ) event.preventDefault() 與 event.stopPropagation() 的差異: Link.
( Vue ) Event Modifiers (事件修飾符): Link.
( Vue ) How to set a unique html ID for each component?: Link. // Use v-bind:for="myId" and v-bind:id="myId".
Google font free service: Google font free service, solves a lot of headache, since chinese font font file size is big (15 MB), google doing these things automatically in the background, and will only make download when necessary so the bandwidth it used is very small, and you just simply need to use this { @import url(...) } code to make it works. // Useage: Use it like { font-family: 'Noto Sans TC', sans-serif; }.
By time:
1. 06:25 Wake up.
2. 06:30 Uploading blog.
3. 06:43 Exercising at home: Brutal HIIT ladder workout - 20 minute HIIT workout at home~~, and plank~~.
4. 07:02: Break.
5. 07:05: Taking shower.
6. 07:35 Designing Resume site: Wireframe. Finished.
7. 10:30 Cooking, start working on coding.
8. 11:10 Eating, watching video.
9. 11:50 Designing Resume site: Wireframe finished, start working on coding. Setting up Vue environment.
10. 13:13 Watching video.
11. 13:33 Designing Resume site: Header finished.
12. 18:20 Cooking.
13. 18:57 Eating.
14. 20:05 Bathroom.
15. 20:15 Testing font: Using google font free service.
16. 20:55 Designing Resume site.
17. 21:37 Eating fruit, watching video, brushing teeth.
18. 22:30 Sleep.

2019-07-02

Portfolio and Resume

SVG

Html

( SVG ) CSS effect vs SVG effect, which is more flexible?: Link. // --{ Q: One question, do you do all those animations by coding or using any apps? I don't even know an app that generating SVG animations. }--, --{ A: (Sara Soueidan) I usually hand-code the animations. Libraries like GSAP and Snap.svg make animating SVGs much simpler and are easy to understand and learn. }--.
Using css to make shapes: Link. --{ “People end up making graphics with CSS [instead of SVG], because for many use cases, it offers them more flexibility. Which is absurd.”— fantasai (@fantasai) January 31, 2015 }--.
{ SvgOmg }-{ SVGO }-[ SVG optimizer ]: Clean up, and optimize SVG with optimizer like SvgOmg ([ SVGO ]-[ github ]-[ nodejs ]) or svgomg online.
( SASS ) Differences between { Mixin } and { extend }: Link. Not quite understand, because not sure the real use cases.
By time:
1. 06:40 Wake up.
2. 06:47 Uploading blog.
3. 06:53 Reading articles about SVG.
4. 07:35 Designing Resume site: Svg component, to wrap SVG image inside.
5. 10:20 Cooking, keep working.
6. 10:55 Eating.
7. 11:40 Testing SVG optimizer.
8. 12:40 Designing Resume site: Svg component, to wrap SVG image inside.
9. 14:10 Bathroom, eating apple, brushing teeth.
10. 14:35 Learning { SASS }.
11. 15:02 Designing Resume site: Svg component, to wrap SVG image inside.
12. 15:13 Take a nap.
13. 15:40 Designing Resume site: Sticky Footer.
14. 17:30 Designing Resume site: Resume page ,, title, the svg image.
15. 19:15 Cooking.
16. 19:47 Eating, watching video, brushing teeth.
17. 20:50 Designing Resume site: Resume page ,, title, horizontal line, finished.
18. 22:20 Watching video.
19. 22:35 Sleep.

2019-07-03

Portfolio and Resume

{ CSS Variable }

Website "theme" by { CSS Variable }

{ HSL } color

{ Sass } ,, numbers and units

{ Sass } ,, { Interpolation }

( CSS ) CSS Variable - Everything you need to know about CSS Variables - { freecodecamp }: Link. See the section Be Careful While Building Single Tokens, I have this question comes out before, so you can't use --myVar: 100;, then margin: var(--myVar)px;, you have to always use --myVar: 100; then margin: calc(var(--myVar) * 1px);. // Also see the section JavaScript, Simply put, you can access CSS variables — both get and set — from JavaScript.
( CSS ) How CSS Variable could play important rule in website Themes: Link. See the section Themes, he collect all variable part intended together into the :root{ ... }, so if he want a new "theme", he can change the site looking in no time.
( CSS ) CSS Variable and HSL color: Link. The more interesting thing is not HSL part, but CSS Variable part. See those answers below, they are helpful. // --{ If a property contains one or more var() functions, and those functions are syntactically valid, the entire property’s grammar must be assumed to be valid at parse time. It is only syntax-checked at computed-value time, after var() functions have been substituted. }--.
{ Sass } ,, numbers and units Link. // --{ It’s almost always a bad idea to use interpolation with numbers. Interpolation returns unquoted strings that can’t be used for any further math, and it avoids Sass’s built-in safeguards to ensure that units are used correctly. }--, --{ Sass has powerful unit arithmetic that you can use instead. For example, instead of writing #{$width}px, write $width * 1px — or better yet, declare the $width variable in terms of px to begin with. }--. // --{ You can convert between decimals and percentages using unit arithmetic. $percentage / 100% will return the corresponding decimal, and $decimal * 100% will return the corresponding percentage. }--.
{ Sass } ,, { Interpolation }: Link.
( Color theory ) 色彩空間中的 HSL、HSV、HSB 有什麼區別？: Link. Conclusion: Currently don't think about HSV(= HSB), since HTML and CSS use HSL exclusive (it seems). The concept of HSV(= HSB) is that, it is abstraction and simplified version of HSL, thus some people might think it is "more intuitive", but at the same time, it don't reflect the real world of color, HSL does reflect the real world of color, if you turn a color really bright, it shoud have little satuation, this is reasonable and understandable.
By time:
1. 06:25 Wake up.
2. 06:32 Uploading blog.
3. 06:42 Misc.
4. 06:45 Designing Resume site: Resume page ,, fixing issus, refactoring.
5. 07:08 Designing Resume site: Resume page ,, section heading visual design redesign.
6. 08:10 Designing Resume site: Resume page ,, section heading SVG component.
7. 11:10 Grocery.
8. 11:37 Cooking, understand HSV vs HSL: I'm planning to restructure my color system, to support each value of HSL too along with HEX value, so I can tune the "S" part and "L" part for individual use case.
9. 12:25 Eating, watching video.
10. 13:00 Take a nap.
11. 13:25 Testing HSL color with Css Variables.
12. 15:00 Eating fruit.
13. 15:10 Keep learning Css Variables: Theming with Css Varialbe.
14. 15:30 Testing { Sass } { Interpolation }.
15. 16:00 Designing Resume site: Resume page ,, section heading SVG component. Using HSL color.
16. 19:20 Cooking.
17. 19:40 Eating, watching video.
18. 20:40 Testing { vue } ,, { slot }.
19. 21:50 Eating apple, brushing teeth, watching video.
20. 22:30 Sleep.

2019-07-04

Portfolio and Resume

{ RWD }

Exercising

By time:
1. 06:45 Wake up.
2. 06:50 Uploading blog.
3. 07:00 Bathroom.
4. 07:11 Testing 2 layer of slot instead just one: Testing if I can nested slots. So the test works, I can have 3 component - parent, a componentWithSlot1, a componentWithSlot2, then in the parent component I can put (inserting into slot) my final data inside componentWithSlot2 inside componentWithSlot1 inside parent. So the data will be rendered first (I guess), then componentWithSlot1, then componentWithSlot2, then parent.
5. 07:50 Designing Resume site: Resume page ,, section content, using nested (2 layer) { Vue }-{ slot} to try best to reduce the duplication of code.
6. 09:00 Exercising at home: Brutal HIIT ladder workout - 20 minute HIIT workout at home.
7. 09:20 Taking a break.
8. 09:23 Taking a shower.
9. 09:55 Cooking, keep working on Resume site.
10. 10:40 Eating, watching video.
11. 11:15 Designing Resume site: Resume page ,, section content.
12. 12:15 Brushing teeth.
13. 12:22 Designing Resume site.
14. 12:42 Take a nap.
15. 13:05 Designing Resume site: Finished layout.
16. 15:17 Eating apple, brushing teeth.
17. 15:30 Designing Resume site: Now I start to filling the information and the svg thumbnail image. Mainly completed, the RWD structure is working good, and the info is mainly completed.
18. 19:40 Cooking.
19. 20:12 Eating, watching video.
20. 21:10 Thinking about the RWD thing: After the experience of the first page (Resume page), now I know when page shrink to the mobile screen, it can be tricky since the structure can changes dramastically sometimes. So I better rethink carefully before dive into the second page (Portfolio page).
21. 21:45 Watching video.
22. 21:20 Sleep.

2019-07-05

Portfolio and Resume

{ Vue Loader }

{ Vue } ,, assets path

{ Vue } ,, { CSS Modules }

( Vue ) { Vue Loader }: Link. Also see Single-File Component (SFC).
( Vue ) Asset URL Handling: Link.
( Vue ) vue background-image use assets path?: Link, link2, 在Vue中使用sass及sass圖片路徑問題 . Finally found the solution by using that require() thing!! Since using require(...) might related to Webpack stuff, you load the path as "module way", and the system (webpack?) behind get the real path automatically for you. So now you can set style ,, background-image: url(...) like this - 'background-image': "url('" + require("@/assets/logo.png") + "')" or 'background-image': "url('" + require("../assets/logo.png") + "')".
( Vue ) Binding Inline Styles - Object Syntax: Link. I forget this again, reviewing. So what you could put inside v-bind:style="..." is an object!.
{ Vue } ,, { CSS Modules }: Link Doc. --{ Every new Vue.js application created by vue-cli comes with two great built-in solutions: Scoped CSS and CSS Modules. Both of them have some pros and cons. }--. // --{ ... Moreover, because all classes are available through the $style object we can now pass them however deep we want using props, making it super easy to use a class in any place of the child component ... }--.
By time:
1. 06:32 Wake up.
2. 06:38 Uploading blog.
3. 06:50 Designing Resume site: Portfolio page. Planning th e structure.
4. 10:30 Cooking.
5. 11:05 Eating, watching video.
6. 12:30 Take a nap.
7. 13:00 Designing Resume site: Portfolio page. Working on first section's structure, structure is half finish, but still have long way to go.
8. 16:15 Grocery, eating fruit, Misc.
9. 16:55 Learning { Vue Loader }.
10. 17:43 Searching { vue } ,, css background-image ,, how to set it to correct assets path, problem: Problem solved, keep working.
11. 19:35 Cooking, keep working: Writing data logic so the data is seperate from template.
12. 20:10 Eating, watching video.
13. 21:25 Misc.
14. 22:40 Sleep.

2019-07-06

Portfolio and Resume

By time:
1. 06:50 Wake up.
2. 06:55 Uploading blog.
3. 07:05 Bathroom.
4. 07:15 Designing Resume site: Portfolio page. Dealing with background-image, background-position and background-size.
5. 08:57 Cooking, keep working.
6. 09:45 Eating, watching video.
7. 10:20 Designing Resume site: Working on RWD for mobile screen issue.
8. 13:30 Eating apple, watching video.
9. 14:00 Designing Resume site: Working on RWD for mobile screen issue
10. 16:10 Take a nap.
11. 16:35 Designing Resume site: Portfolio page. First section's data logic so the data is seperate from template.
12. 19:50 Cooking, keep working.
13. 20:25 Eating, watching video.
14. 22:10 Sleep.

2019-07-07

Portfolio and Resume

Battery

By time:
1. 06:15 Wake up.
2. 06:22 Uploading blog.
3. 06:30 Bathroom.
4. 06:43 Sending message to mom, misc.
5. 07:30 Designing Resume site: Modal and data logic.
6. 08:35 Cooking.
7. 09:15 Eating, watching video.
8. 09:40 Found my phone battery inflate because of constantly charging: I always keep it plug in to usb to charge it, and I just curious why my phone is not flat at back side. When I open the back cover, it suprised me that the battery is inflate like crazy. And I found that it says "keeping it long time charging will risk to have explosion hazard" OMG, I don't know this.
9. 09:50 Designing Resume site: Modal ,, styling.
10. 12:37 Eating apple, watching video, brushing teeth.
11. 12:57 Designing Resume site: Modal ,, styling.
12. 14:33 Take a nap.
13. 15:00 Designing Resume site: Modal ,, data logic.
14. 19:25 Cooking, keep working.
15. 20:05 Eating, watching viceo.
16. 21:30 Taking shower.
17. 22:05 Sleep.

2019-07-08

Portfolio and Resume

{ Sass }

( Color theory ) Adobe color wheel: Link. Analogous, Monochromatic, complementary, Compound ... .
{ Sass } ,, HSL function: Link.
{ Sass } ,, { @mixin } ,, { @content }: Link.
( Sass ) This is the real value of using Sass - reduce the [ repetitive ]-[ duplicate ] [ code ]-[ workflow ]: Link.
{ Sass } ,, Using multiple conditions (AND, OR, NOT) in { if } statement: Link.
{ Sass } ,, powerful of { @function } - keep concatenating onto same variable: Link, see first answer, so you can concatenate like $val: #{$val}, #{$i}px #{$i}px #{$color};.
{ Sass } ,, when is the use case of { @extend }? And why using { placeholder selectors } (%): Link.
By time:
1. 06:10 Wake up, misc.
2. 06:23 Uploading blog.
3. 06:30 Misc.
4. 06:36 Designing Resume site: Modal ,, style.
5. 08:10 Understanding and testing { line-height } and { vertical-align }.
6. 09:22 Designing Resume site: Modal ,, style.
7. 09:50 Designing Resume site: Modal ,, data logic. Finished.
8. 11:00 Testing Jquery and { vue }-{ refs }: And apply scroll effect onto Resume site.
9. 12:20 Grocery, cooking.
10. 13:20 Eating, watching video.
11. 14:40 Take a nap.
12. 15:05 Designing Resume site: Portfolio page, second section ,, designing svg shape.
13. 17:30 Designing Resume site: Portfolio page, second section ,, making button onclick then jump to external link.
14. 18:30 Misc.
15. 18:40 Designing Resume site: Portfolio page, misc visual tweaks, testing Sass.
16. 20:35 Cooking.
17. 21:10 Eating, learning { Sass }.
18. 21:37 Brushing teeth.
19. 21:46 Learning { Sass }.
20. 22:57 Misc.
21. 23:55 Sleep.

2019-07-09

{ Stoicism }

Portfolio and Resume

{ Webpack } ,, { resolve alias }

{ Webpack }

{ Vue }

( Stoicism ) { TedTalks } - "Everything happens for a reason"? It's a lie - Cancer Phase IV - Kate Bowler: Link. You dont't control, most things is out of your control. Only thing you can control is virture. Always try to hold the optimism in the pessimism.
( Vue ) ( Webpack ) How to config Webpack in a Vue project?: Link. configureWebpack is one of the options of vue.config.js config file, so we use configureWebpack to do all the config of Webpack, instead of configuring "lower level" Webpack config file directly.
( Webpack ) { resolve.alias } - how does "@/..." works and be config?: Link1, link2. // vue-cli3 設定 webpack resolve alias (簡單易懂，試過了的確可以正常運作)，照做，把 vue.config.js 裡面增加一個 webpack 專用的 option (object): chainWebpack: (config) => { config.resolve.alias .set('@', resolve('src')) .set('@myThinggg',resolve('src/assets/any/custom/path/you/want')); }，然後你就可以在 Vue component 裡面使用 <img src="@myThinggg/thatTargetImageFile.jpg"> (注意是 "@")，以及 background-image: url("~@myThinggg/thatTargetImageFile.jpg"); (注意是 "~@")。關於那個 "~" symbol，好像是在 sass 裡面都要這樣寫，包括引用其它 sass file。但奇怪，我之前都沒有加這個還是可以用，不知道為什麼。
( Vue ) ( Vue-cli ) { vue inspect > config.js }: Found from here, you can found a bunch of webpack config (including resolve alias settings) used by current vue project.
{ Vue } ,, when to put image in { assets } or { static} directory? - What does it related to webpack?: Link.
( Vue ) Dealing with assets path problem again - sass - { resolve alias }:
1. The "~@" alias: Related to <style lang="sass"> block, not template or script block. // For the backgroud-image url path, I found I can't use url('@/assets/myImg.png') or url('~/assets/myImg.png'), but using url('~@/assets/myImg.png') works, I don't know why, found at here and here ,, answer of Estus Flask ,, comment of Consta Gorgan (--{ When using vue-cli v3+ you should use ~@ to reference src folder. E.g.: $font-path: '~@/assets/fonts/'; }--). // And here says --{ 特別注意：如果在scss中使用@別名則需要加 "~" 號，比如在src目錄下有一個var.scss文件，其他文件引用時則需寫成 @import "~@/var.scss";，（scss中加了 "~@" 就不會報錯了）}--, and here also says --{ 在css中使用要加上一個 **~** }--.
2. About { webpack },{ file-loader },{ url-loader }: I search a lot regarding this "path can't resolved issue", and though I still don't know the correct practice (though using ~@/... works), I think the direction is toward { webpack },{ file-loader },{ url-loader }, especially webpack, people mentioned it a lot regarding to solve this problem. This might be nothing to do with Vue, or Sass it self, since I fonud this Nuxt article ,, section Nuxt 如何編譯靜態資源？, it mentioned: --{ 放在 assets 資料夾下的檔案，引用前先經過 Webpack 編譯更精確點講「透過 vue-loader 以及副檔名對應的 loader」編譯 ; Vue File 經 vue-loader 拆出 <template>、<script>、<style>，交由對應 loader 進一步處理 ; 樣式經過 css-loader ; 照片、其他檔案經過 file-loader、url-loader 處理。 }--
By time:
1. 08:05 Wake up.
2. 08:14 Bathroom.
3. 08:30 Uploading blog.
4. 08:40 Designing Resume site: A bit refactoring css, using Sass @mixin to condense linear-gradient code.
5. 09:10 Designing Resume site: About me page.
6. 09:23 Dealing with assets path problem - { resolve alias }: Though spending much time on learning webpack stuff, but this is still a "must do" investment, if I don't lean it, this problem will just come back again and again in the future.
7. 12:12 Cooking, keep working.
8. 13:00 Eating.
9. 14:16 Taking a nap.
10. 14:41 Reading article (story) about jobs.
11. 15:15 Designing Resume site: About me page.
12. 15:48 Designing Resume site: Start to filling real [ data ]-[ information ]. Spent some time thinking about the content. Taking screenshots of 3 projects.
13. 20:30 Cooking, working.
14. 21:40 Eating, watching video.
15. 23:05 Sleep.

2019-07-10

Portfolio and Resume

Deploy

Graphic design

RWD

{ Twice }

{ LibreOffice Writer }

( Webdev ) ( Graphic design ) ( RWD ) www.siteinspire.com - web design inspiration: Link (found from 10 Places to Look for Website Design Inspiration). This site gave me so much good inspiration, and [ complex ],[ mature ] responsive web design stuff. Is really a quality mine. // Some site using [ good ]-[ unique ] graphic design, while still keeping the complex RWD working great.
( Graphic design ) ( Twice ) Unboxing Twice { TWICEcoaster: Lane 2 } album: Link.
( Music ) { Twice } - { FANCY } - black man cover: Link.
LibreOffice Writer - (52) - Introduction to Tables: Link. Informative series. // Use frame to make nested table, and set both frame and table using relative units, so frame can fits 100% width/height of it's perent, and table can fit 100% width of frame.
( Git ) Redirects on GitHub Pages: Link. --{ For the security of our users, GitHub Pages does not support customer server configuration files such as .htaccess or .conf }--. Yeah, so vue-router will fail if user enter the deep url themselves, but if user don't enter the deep url themselves, vue-router will works properly.
By time:
1. 07:20 Wake up.
2. 07:25 Uploading blog.
3. 07:35 Studying from some real RWD site as inspiration: [ Learning ],[ seeing ] [ real ],[ complex ],[ mature ] RWD site from www.siteinspire.com.
4. 08:50 Bathroom.
5. 09:02 Dealing with favicon: Cache problem. .ico vs .png.
6. 09:35 Portfolio and Resume: Git push and deploy. // Dealing with Route problem. Github ,, gh-pages, don't work with vue-router. I have to make some [ bad-smells ]-[ ugly ] workaround.
7. 12:35 Grocery.
8. 12:55 Cooking, learning Libre office.
9. 13:43 Eating, watching video.
10. 14:50 Taking nap.
11. 15:15 Watching video.
12. 15:45 Learning and testing Libre office.
13. 17:20 Portfolio and Resume: Doing Resume PDF version. Finished.
14. 20:30 Cooking, reading article about vue: How to make Vue let user download a pdf file by a link (static assets)?
15. 21:12 Eating, watching video: Mostly about Twice.
16. 23:30 Sleep.

2019-07-11

Vegan ,, diet

[ Vegan diet ]-[ 多樣，少量，頻繁 ]

Nutritional Supplement

{ Npm } update

( Vegan ) 台灣素食營養學會: Link. --{ 國內少數由醫學角度探討素食的非營利團體。集結各大醫院、大學...等多位有志推廣素食的醫療人員、專家學者，透過講座、食譜、文章，教育民眾正確的素食營養知識。 }--. // 常見問題 (的所有文章)。
( Vegan ) Ultimate strategy for Vegan diet is still: This single [ rule ]-[ good practice ] emerges more and more stronger, after I gathered so much information from different time, different types, different sources, that is - 多樣，少量，頻繁。
( Vegan ) 為何不能只依賴 "營養補充品"?: 台灣素食營養協會: --{ 或許有人會疑惑，那麼好的維生素,從食物取得太麻煩,為何不吃大量的營養補充品攝取? 這是因為光是維他命 E 就有 alpha、beta、gamma、delta 各種形態,市售補充劑、營養品卻只提供 alpha 維他命E,大量地補充市售維他命 E,反而會有致癌的風險。這也是為什麼食物才是取得維他命的最佳方法! .避免服用銅，鐵營養補品: 雖然我們需要微量的鐵來運輸氧氣到腦部,銅在許多酵素反應中也占了重要的地位,但是過多的鐵與銅,就像長期暴露在空氣中的金屬一樣會生鏽, 這就是氧化反應。研究員發現失智老鼠的腦裡含有較高的銅與鐵。預防攝取過多銅與鐵的方式,就是注意看補充劑的標示,避免購買與食用含有銅與鐵的營養補充劑。 }--.
( Vegan ) 藻類為不可靠的 B12 來源，目前唯一只能靠 "營養補充品": Link. 台灣素食營養協會: --{ 可是在衛生署公布的《素食飲食指標手冊》第六頁，針對素食者補充維生素B12建議：「依據國人膳食營養素參考攝取量建議，維生素B12每日攝取量為2.4微克。建議可藉由藻類（如：海帶、紫菜）增加維生素B12的來源 }--, --{ 至今除了台灣，沒有任何一個國家的學界或官方版敢如此建議素食者依靠藻類來攝取維生素B12！ }--. 不錯，敢質疑，只追求真相。// --{ 真正可靠的維生素B12 – 純素者請攝取B12補充劑或添加劑! 現在許多早餐穀類和飲品都有添加維生素B12 ...}-- // --{ 補充劑的需求量其實很少，但重點是要少量多次，因為如果一次整顆吃下去，吸收率不高。 }-- (少量，多樣，頻繁).
( Vegan ) 營養與失智症預防: Link (Below link for PDF file). // --{ 堅果類才是王道 }--, --{ 魚油或是 DHA 補充劑所帶來的效果是有限的 ... 建議每天從堅果類攝取 omega-3,來提升好的膽固醇 (HDL) 預防高血脂與肥胖,也能供給身體維他命 E,預防失智症。每天吃一把堅果或是喝一杯堅果漿,就能滿足一天的需求。}--. // --{ 雖然我們需要微量的鐵來運輸氧氣到腦部,銅在許多酵素反應中也占了重要的地位,但是過多的鐵與銅,就像長期暴露在空氣中的金屬一樣會生鏽, 這就是氧化反應。 }--. // --{ 抗失智黃金組合 - "葉酸、維他命 B6 與 B12" ... 含有豐富葉酸的植物包括米豆、扁豆、綠豆、雪蓮子豆與花豆。含有豐富維他命 B6 的食物是葵瓜子、芝麻、開心果、酪梨與香蕉。}--.
( Vegan ) Omega-6 與 Omega-3 的比例要平衡，並不是完全不吃Omega-6喔！: Link.
( Vegan ) 如何避免缺鐵?: Link. --{ 為什麼有些女性，臉色蒼白，時常頭暈，精神不佳，容易疲倦? 答案可能是缺乏鐵質! 人體紅血球中的血紅素，負責攜帶氧氣到全身各個細胞 ... }--. // --{ 飲食中包含高鐵食物來源如: 紅莧菜、紫菜、莧菜、紅鳳菜、川七，花生、皇帝豆、花生、芝麻、南瓜子、紅豆等。 }--.
( Diet ) 葉黃素可以從哪些天然食物取得？: Link. 一天吃一碟菠菜，可以補充葉黃素 (菠菜的根部是紅色的)。// "全球最大保健騙子" (葉黃素)。底下留言大概是自己洗的: --{ 商品感受 2019-04-18 15:02:11 會員陳** (2019/6/28) 舆过去其他家同樣《葉黄素》使用後相較，確實令人眼神散發有神、光亮、工作行動更加有活力。 }--，世界上就是有這種騙子，成功都是靠廣告和行銷出來的，而不是建立在有價值的東西上。
( Diet ) 奇異果的營養價值: Link.
{ Npm } ,, update - All about update - update the major version problem: Link1, link2, link3 (is detailed). // Conclusion - npm in default will respect package.json's semver (semantic versioning, i.e. major, minor, patch). If dependencies inside package.json written like this - "fooPkg": "^3.1.2", then it will never be update by npm to 4.x.x. // If you want to force it to update the major version, you can npm install -g npm-check-updates first, then use ncu -u command to update the package.json list first so those dependencies will have major version leap (but ncu don't care about the real package inside node_modules), then use npm install to update the real package inside node_modules. // Notice, npm and ncu works separately, so npm will [ still ]-[ always ] follow the package.json rules and won't update the major version (if dependencies prefix with ^) in any time.
By time:
1. 07:35 Wake up.
2. 07:42 Uploading blog.
3. 07:55 Update npm project, leaning { ncu } (npm-check-updates).
4. 09:05 Watching video.
5. 09:11 Searching about battery vendor.
6. 09:55 Misc, searching information about Vegan diet and Nutritional Supplement: The time spending totolly worth it! Take care of health is more important and have higher priority than finishing resume first.
7. 12:45 Grocery: 綜合堅果，五穀麥片，小麥胚芽。原來全聯也有賣 B 群 (含 B12, B6) 跟 DHA。
8. 13:20 Cooking, searching.
9. 13:54 Eating, watching video.
10. 15:05 Taking shower, misc.
11. 15:55 Outdoor: Buying Nutritional Supplement including Vitamin B complex (維生素 B 群), Iron, DHA, 葉黃素 (totally around NT$850). Buying phone battery (old one is inflated due to constantly in charging) (NT$700). Having haircut (NT$100).
12. 20:17 Back, cooking.
13. 20:55 Eating, reading news.
14. 22:52 Sleep.

2019-07-12

Portfolio and Resume

Job application

{ 104 }

{ 1111 }

{ github }-{ f2etw/jobs }

{ Linkin }

{ cakeresume }

[ Honest ]-[ truth ]-[ fact ]

{ Twice }

( Music ) Twice - You in my heart / Having you: Link.
( Music ) Twice - Look at me: Link.
( Music ) Twice - Girls like us: Link.
( Music ) Twice - Wake me up: Link.
Untrusty - 碧波庭國際有限公司 - [ 按摩器 ]-[ 玻璃杯 ]-[ 真空 ]:
1. About: Found from 104 人力銀行. After [ carefully ]-[ seriously ] doing some research, I agree the "預防乳癌" part, but I don't agree with others (many points). So I think they are not trusty, though my skill sets fits most of their required - 前端工程師 / 全端工程師 javascript - --{ 1. 熟悉 vue.js 2. bootstrap / jquery 3. git version control 4. 會用 nodejs webpack npm 5. 應徵全端須有 nodjs 後端 framekwork 經驗如 express 6. 初級/中階工程師需求 7. 有 github 的作品優先考慮 }--, and also I have Industrial Design background. // Though I don't have strong evidence to prove them wrong, thus I will not say they are exaggerate the benifits products offers, but we have to be extra careful when it comes to something like { Theranos }-{ Elizabeth Holmes } ,, the Edison machine.
2. Website: Link.
3. 碧波庭顧客問答影片 Q&A - 市場部經理: Link.
4. { pansci } - { 泛科學 } - 破解豐胸迷思：豐胸霜按摩加青木瓜可以從 A 到 D 嗎?: Link.
5. 負離子真的有什麼好處嗎？: Link.
By time:
1. 07:00 Wake up.
2. 07:03 Uploading blog.
3. 07:25 Bathroom.
4. 07:35 Watching video: 患上腦腫瘤的女孩因為TWICE而獲得勇氣。
5. 07:50 Eating Nutritional Supplement, and do some calculation: So in average, if I take 4 types of them, I have to spend NT$700 per month.
6. 08:00 Portfolio and Resume: 上 1111 人力銀行註冊資料.
7. 08:50 Preparing ingredients.
8. 09:08 Portfolio and Resume: 1111 人力銀行註冊資料. Finished.
9. 09:15 Found [ my resume site ] ,, big display problme on real phone and Chrome: I found my resume site can't work on my smart phone and Chrome responsive view, when I was doing some radome checking. Still don't know why, but it's lucky to find this in the first place.
10. 09:23 Portfolio and Resume: 1111 人力銀行註冊資料. Finished.
11. 09:55 Cooking, start searching jobs.
12. 10:35 Eating, start searching jobs.
13. 10:50 Start searching jobs: On 1111 and 104.
14. 11:40 Misc.
15. 12:15 Searching jobs: On 1111 and 104.
16. 13:57 Eating fruit, watching video.
17. 14:25 Searching jobs: On 104. 1111 don't have much opportunity while 104 have bunchs of them.
18. 15:55 Eating the rest food in my pot, watching video, buying drinks: Sleepy.
19. 16:35 Searching jobs: On 104.
20. 19:50 Searching jobs: On { github }-{ f2etw/jobs }, using searching term is:issue is:open updated:>2019-06-10 label:"[F] Vue.js". // 104 opportunity is exhausted, now I start to find other resources (job listing site).
21. 21:10 Total amont of today's job applications: Totally applied 17 jobs today, decent.
22. 21:11 Grocery.
23. 21:40 reflecting.
24. 21:55 Watching video.
25. 23:59 Sleep.

2019-07-13

[ Higly focused ]-[ nothing matters ]-[ now ] [ mindset ]-[ zone ]

Exercising

Portfolio and Resume

Project { Doggo }

( Twice ) { Losttime } - [ Higly focused ]-[ nothing matters ]-[ now ] [ mindset ]-[ zone ]: EP4, EP5, EP8, EP9.
( Music ) ( Electronic ) Unknown title - { Twice } passing airport: Link.
( Music ) ( cover ) { Yiruma } - { River Flows In You }
1. About: I'm pretty bored about some non-creative [ pieces ]-[ cover ] showing again and again on the [ internet ]-[ searching results ]. I always found some new and creative piece while I tried to searched with "re-arranged" or "instrumental" or "orchestral" version. Even if these derived version are not composed properly, they are still much more better then a boring identical cover that don't produce any creativity..
2. WTF is River Flows In You?: Link. --{ ... but it's a horrible starting point for pianists, yet it seemed to sweep up a whole generation of people. It sounds deceptively simple so it ended up being something people jumped on as an entry point. I've heard it overplayed so much ... }--.
3. Orchestral Winter Version: Link. Samples by EWQL Symphonic Orchestra, Native Instruments Kontakt and Tonehammer.
4. Arranged by Larry Moore: Link.
( Life ) { The Dodo } - Wild Dolphin Knew Exactly How To Ask People For Help: Link.
( Life ) { The Dodo } - Boating Dog Sees Dolphin: Link.
( Sass ) { scale-color } is more natural than basic color function like { desaturate },{ darken }: Link.
By time:
1. 07:30 Wake up.
2. 07:40 Bathroom.
3. 07:50 Uploading blog.
4. 08:15 Troubleshooting why [ my resume site ] ,, big display problme on real phone and Chrome: I found my resume site can't work on my smart phone and Chrome responsive view, when I was doing some radome checking. Still don't know why, but it's lucky to find this in the first place.
5. 09:10 Troubleshooting [ my resume site ] ,, "PDF download link not working on Chrome responsive view" problem: See Solution of problem "Resource interpreted as Document but transferred with MIME type application": Link.
6. 09:50 Planning, misc.
7. 10:10 Exercising at home: Brutal HIIT ladder workout - 20 minute HIIT workout at home, and plank.
8. 10:45 Taking break.
9. 10:50 Taking shower, preparing ingredients, cooking, misc.
10. 11:45 Thinking about updating { Doggo } code ,, how to start.
11. 11:55 Eating, watching video.
12. 13:20 Taking a nap.
13. 13:43 Buying drinks.
14. 13:57 Watching video.
15. 15:25 Updating { Doggo } code: Designing doggo new logo with inkscape.
16. 16:27 Updating { Doggo } code: Dealing with font works. Installing google font.
17. 17:40 Cooking green bean, dancing with music, misc.
18. 17:55 Project { Doggo }: Tweaking css ,, font, others.
19. 19:45 Eating green bean, watching video.
20. 21:05 Project { Doggo }: Keep working on header ,, nav ,, mobile menu. Finished. Start working on implementing Doggo logo.
21. 23:47 Cooking, eating.

2019-07-14

Portfolio and Resume

Project { Doggo }

{ GSAP }-[ animation ]

{ Vue }-[ Component Names ]-[ Style Guide ]

( Music ) Twice - MOVE (TAEMIN) Cover: Link.
( Music ) Twice - Like a fool: Link.
{ The Dodo } - Otter Wants To Play With Dogs: Link.
{ GSAP } installation - { npm } - { Vue }: { npm } usage and { import }, Vue.js and GSAP equal hot animations (including using $refs).
( GSAP ) Getting Started with GSAP: Link. Including the basics of TweenMax, { CSSPlugin }, { AttrPlugin } (and using { AttrPlugin } for doing simple svg "morph" effect), BezierPlugin, TweenMax.to(), TweenMax.from(), easing (ease, transition timing function), delay, TweenMax.staggerFrom() (staggered introduce multiple targets), TweenMax.to() on multiple targets, onComplete callback function (after a TweenMax.to() animation finished).
( GSAP ) "Jump Start" slides: Link. // Including tweenFromTo(), relative values (like { left: "+=100px" }), TimelineLight, control playback ,, methods group (restart, reverse, timeScale ...), Labels (Add labels to a timeline for easy and intuitive navigating positions (currentLabel(), getLabelAfter(), getLabelsArray() ...) (label can also mixing with relative values), so you don't have to play the whole animation from start everytime you save the code file, when developing, you can start from a lable (customed?), this save a lot of time).
( GSAP ) { TimelineLite }: Link. When to Use a Timeline: --{ To control a group of animations as a whole ... progressively build so that timing adjustments to earlier animations automatically affect later ones, greatly simplifying experimentation and maintenance ...To do any kind of complex choreographing ... }--. // Also see TimelineMax.
( GSAP ) Making { reply() } (control playback) work with windows scrolling position: Example.
( Vue ) Component Names - Style Guide: Component Names, Style Guide. // Conclusion: The working solution is use like this: iLike_thisClassName, iLike_thisComponentFileName.vue, ILikeThisComponentName, import ILikeThisComponentName from iLike_thisComponentFileName.vue, components: { ILikeThisComponentName, }, <i-like-this-component-name></i-like-this-component-name>.
By time:
1. 00:43 Sleep: Stay up late again. Bad old habit.
2. 09:05 Wake up.
3. 09:06 Uploading blog.
4. 09:20 Bathroom.
5. 09:30 Watching video.
6. 10:00 Learning { GSAP }-{ GreenSock Animation Platform }: Browsing their homepage, understanding the overview.
7. 11:10 Learning { GSAP }-{ GreenSock Animation Platform }: Install gsap package with npm, do testing, keep learning.
8. 13:37 Take a nap.
9. 14:05 Grocery, preparing ingredients, cooking, keep working.
10. 15:30 Eating, watching video, listening to music.
11. 17:06 Project { Doggo }: About page ,, animation ,, building basic structure and working on positioning.
12. 21:05 Watching video, eating, brushing teeth.
13. 22:25 Project { Doggo }: Commit. Keep planning on animation stuff. // Leaning { Vue }-[ Component Names ]-[ Style Guide ].
14. 23:55 Watching video.

2019-07-15

{ Stoicism }

{ Virtue }

Portfolio and Resume

Project { Doggo }

Capitalism

( Twice ) Dahyun, Chaeyoung and Tzuyu’s healing tour to Ganghwado Island Part.1 - 2019.05.26: Link.
( Job ) Why I won't work a developer job anymore - { Joshua Fluke }: Link. --{ You are a [ expendable ]-[ disposable ] [ resource ]-[ product ], you are a profit margin decrease, for most company. }--.
{ Joshua Fluke } - Some Junior developer portfolios: Link. // This one ,, first project, looking nice.
By time:
1. 00:10 Sleep.
2. 08:20 Wake up.
3. 08:23 Uploading blog.
4. 08:30 Misc.
5. 08:35 Watching video about jobs and portfolio.
6. 12:05 Reading mails related to job.
7. 12:55 Updating Portfolio site footer icon, finding and fixing misc problems.
8. 16:50 Preparing ingredients, misc.
9. 17:05 Portfolio site ,, fixing jquery scrolling position ,, incorrect, problem.
10. 17:43 Cooking.
11. 18:16 Eating, watching video, taking shower, misc.
12. 20:20 Portfolio site ,, fixing jquery scrolling position ,, incorrect, problem.
13. 21:05 Keep working, doing laundry: Fixed jquery scrolling position ,, incorrect, problem. The cause is, I set html, body { height: 100% } previously, for sticky footer (and set #app { min-height: 100% }). But it causes the jquery("footer").offset().top; malfunction. Now I unset it, and use #app { min-height: 100vh }, an everything works normally again.
14. 21:40 Finding dog breeds silhouette, doing laundry, brushing teeth.
15. 22:16 Picking dog breeds silhouette: Testing Inkscape and Krita.
16. 22:40 Watching video.
17. 23:45 Sleep.

2019-07-16

First job interview

Portfolio and Resume

Project { Doggo }

{ www.cakeresume.com }

My first job interview - 千蓬股份有限公司 (豪亮燈飾): Homepage, 1111，related to graphic design, product photography, related.
( Bus ) 5043 - 動態公車資訊: 去程和返程不知道是要按哪個按鈕。反正左邊的 往中壢車站 是整個路徑順時針繞，對應到 時刻表 的左邊。右邊的 往中壢車站 是整個路徑逆時針繞，對應到 時刻表 的右邊。
( Image manipulation ) { ImageMagick } ,, { mogrify } and { convert }: Link. // Example command to enlarge an image is like: convert ./9.jpg -resize 400% ./9_out.png.
By time:
1. 07:54 Wake up.
2. 07:56 Uploading blog.
3. 08:15 Bathroom.
4. 08:24 Messaging with mom and Woody.
5. 08:44 Preparing for job interview ,, Misc. Misc like the bus route, map, timming, information, testing viewing same webpage on smartphone, clothes, leather shoes, beard ... .
6. 10:30 Project { Doggo }: Dog breeds silhouette. Convert jpg to svg.
7. 11:50 Reading email.
8. 12:05 Grocery, cooking, keep working.
9. 13:07 Eating. Take a look of { www.cakeresume.com }.
10. 13:32 Try to use { www.cakeresume.com }.
11. 14:05 Leaving home.
12. 16:00 My first job interview: 千蓬股份有限公司 (豪亮燈飾)，
13. 17:55 Back home, misc.
14. 18:05 Reading mail, misc, eating fruit.
15. 18:30 Filling basic info in { www.cakeresume.com }: And searching job on this platform.
16. 20:00 Cooking.
17. 20:20 Eating, watching video.
18. 21:05 Grocery.
19. 21:40 Sleep.

2019-07-17

Finding job

2nd job interview

[ Job ]-{ cakeresume }

[ Job ]-{ yourator }

{ 新創 }-[ job ]

{ 誰來晚餐 } - 七年的賭注 - Give543 贈物網: { 誰來晚餐 }, { Give543 贈物網 }-{ yourator }, Give543 贈物網官網.
{ 誰來晚餐 } - 唐鳳 - 燒賣後媽我的女兒和我們的心事: Link.
2nd job interview - 富欣實業股份有限公司: Homepage, 104. 網頁前端. From 104. IOT related. So now I starts to have image, overview, on what is IOT.
Today job application sent amount: Yourator: 11. CakeResume: 3. // Bad idea, I shouldn't apply those startups jobs, they are not fit for my current position.
( Job ) 加入新創公司前，新鮮人應該問的七個問題: Link.
{ Yourator } - 應徵新創前必看 - 新創求職 FAQ: Link.
( Javascript ) { Sitepoint } - Event Bubbling, Event Capture, Event Propagation: Link, link2 (this article is hard to read and understand, so you only need to see that figure in the middle).
( Javascript ) What is Event Delegation?: Link. It is just a practical use of Event Bubbling.
By time:
1. 05:40 Wake up.
2. 05:45 Uploading blog.
3. 05:55 Reading mail.
4. 05:58 Buying food, printing resume.
5. 06:17 Searching interview common questions.
6. 07:50 Leaving home for job interview.
7. 13:25 Back to home from job interview.
8. 13:26 Preparing ingredients, misc.
9. 13:44 [ Learning ],[ reviewing ] Javascript prototype.
10. 13:57 Cooking, finding job on { cakeresume }.
11. 14:23 Eating ,finding job on { cakeresume }.
12. 14:46 Finding job on { cakeresume } and { yourator }.
13. 17:30 Misc.
14. 17:50 Eating fruit, taking break.
15. 18:00 Finding job on { cakeresume } and { yourator }.
16. 21:05 Cooking.
17. 21:32 Eating.
18. 23:30 Sleep.

2019-07-18

Finding job

{ 誰來晚餐 } - 唐鳳 - 燒賣後媽我的女兒和我們的心事: Link.
Today's job application sent amount: 104: 14. CakeResume: 9.
8個理由！不要加入新創公司 - 商業週刊: Link.
( Scam ) 命理師預言成真？唐綺陽、江伯樂：郭台銘選總統 - 民眾的科學素養扯到不行: Link.
( ?? ) 雨揚科技股份有限公司 - 雨揚珍品: Link.
By time:
1. 07:43 Wake up.
2. 07:50 Uploading blog, bathroom, misc.
3. 08:15 Finding job on { 104 }.
4. 09:30 Eating apple.
5. 09:40 Finding job on { 104 }.
6. 09:50 Reading articles about Startups.
7. 10:10 Finding job on { CakeResume }.
8. 10:47 Preparing ingredients, taking a break.
9. 10:55 Finding job on { 1111 }.
10. 11:55 Cooking, keep working.
11. 12:17 Eating, watching video.
12. 13:30 Taking nap.
13. 13:48 Watching video.
14. 14:06 Misc, replying mail, get 2 job interview at Taipei.
15. 15:30 Misc, eating apple.
16. 15:45 Filling Word file that is required before an interview.
17. 16:28 Reading article.
18. 16:36 Finding job on { 1111 }.
19. 16:48 Finding job on { 104 }.
20. 18:25 Misc, grocery.
21. 19:15 Preparing ingredients.
22. 19:25 Cooking, keep working.
23. 20:07 Eating, watching video.
24. 21:35 Taking shower.

2019-07-19

Finding job

台灣主要求職 [ 網站 ]-[ 資源 ]-[ 平台 ]

E-commerce

Exercising

( Job ) 台灣主要求職 [ 網站 ]-[ 資源 ]-[ 平台 ]，詳細介紹: Link. // 104, 1111, 518, yes123, Linkedin, Yourator, Wanted, Meet.jobs, CakeResume, Facebook 徵才工具, Indeed (全球最大的職缺搜尋引擎), Google 職缺搜尋功能 (2019年3月剛開放)。 // 104 最大最完善，工作機會最多，1111 次之，518 工作相對少的多，不過可以找到很多特殊的工作內容。
( Job ) 投出履歷數量:面試機會數量:找到一份工作: Link. --{ 至於已經或曾經找到「頭路」的新鮮人，大概需要花多少心力，才有可能爭取到一份正職工作呢？調查則發現；平均要投過19.6封履歷，才會獲得一家企業的面試機會，與去年的20封差不多；同時得再面試5.5家公司，才能真正找到一份工作，也相當於去年的5.2家。依此換算下來，新鮮人如果想得到一次錄取機會，大約要投遞108封履歷表。 }--.
E-commerce: 電子商務是什麼？創業開店前一定要知道的成功關鍵, 電商平台的種類.
Today's job application sent amount: 104: 55.
By time:
1. 06:15 Wake up.
2. 06:20 Uploading blog.
3. 06:30 Bathroom.
4. 06:40 Misc, reading articles.
5. 08:00 Finding job on { 104 }.
6. 10:35 Eating fruit, misc, thinking about the interview.
7. 11:30 Finding job on { 104 }.
8. 12:18 Take a nap.
9. 12:48 Finding job on { 104 }.
10. 14:23 Cooking.
11. 14:50 Eating, reading articles: About E-commerce.
12. 17:40 Take a nap: Feeling sleepy.
13. 18:00 Reading articles: About E-commerce.
14. 18:20 Finding job on { 104 }.
15. 21:20 Reading articles.
16. 22:06 Exercising at home: Brutal HIIT ladder workout - 20 minute HIIT workout at home~~, and plank~~.
17. 22:27 Taking a break.
18. 22:31 Taking shower.
19. 22:55 Brushing teeth, listening to music.
20. 23:15 Sleep.

2019-07-20

Job

Portfolio and Resume

( Front-end ) ( Job ) 如何成為前端工程師，當你不是相關科系、不會任何程式語言: Link. Including 達到進入業界的最低門檻, efficiency.
( Story ) ( Front-end ) ( Job ) 經濟系畢業，無經驗轉職前端工程師: Link1, link2.
寫給社會新鮮人 - 面試結果多久才會通知？: Link.
面試 - 作品集 - 筆電 - 書面印刷:
1. 後端工程師面試必看，我該準備什麼作品集？: Link. 雖然在講後端，但是前端也可以參考。這其實跟 "我的 side project 到底要做什麼" 是一樣的內容。
2. 紙本呈現: Link. --{ 如果是工程師，帶筆電demo當然是最好的方式，但其他專業的面試用的作品集則可以考慮紙本呈現，印一至兩份，在面試時交遞給面試官。這份面試時用的履歷與作品集，會是最精簡的版本，畢竟面試官不會花時間在你面前詳細閱讀 ... }--.
3. 作品集可以印成紙本，作品挑一個最好的就可以了: Link.
By time:
1. 07:20 Wake up.
2. 07:25 Uploading blog.
3. 07:33 Bathroom.
4. 07:40 Reading articles: About the interview ,, timing, real [ process ]-[ workflow ] of HR in background, how long you get an offer, how to reply when you get an offer, misc ... .
5. 10:00 Reading articles: PPT and portfolio to bring to interview, misc.
6. 11:15 Preparing ingredients, cooking, reading articles about interview.
7. 11:45 Eating, reading articles about interview.
8. 12:15 Reading articles about interview.
9. 13:43 Misc.
10. 14:22 Taking nap.
11. 14:45 Waking up, misc.
12. 15:23 Working on [ portfolio ]-{ interview version ].
13. 21:00 Eating.
14. 21:20 Keep working.
15. 22:10 Cooking, keep working.
16. 22:40 Eating, watching video.
17. 23:40 Sleep.

2019-07-21

Job

Portfolio and Resume

Transportation

公共電視有話好說 - 英國金融時報：國台辦直接指示旺中！: Link.
( Application ) { sitepoint.com } - 5 of the Best Free HTML5 Presentation Systems: Link.
( Application ) { reveal.js } - The HTML [ presentation ]-[ slide shows ] Framework: Link.
{ Reveal.js } + { slides.com }: Link.
( Transportation ) { 大台北公車 },{ 5284 } website: Link.
By time:
1. 07:46 Wake up.
2. 07:54 Bathroom.
3. 08:04 Uploading blog.
4. 08:10 Misc.
5. 08:15 Watching video.
6. 08:35 Working on [ portfolio ]-{ interview version ].
7. 09:55 Outdoor and go print out [ portfolio ]-{ interview version ] images: 19 images, A4 paper size, NT$285.
8. 11:10 Back home, preparing ingredients.
9. 11:25 Messaging with Mom and Woody.
10. 12:40 Cooking.
11. 13:00 Eating, watching video.
12. 14:06 Take a nap.
13. 14:30 Watching video.
14. 15:00 Check printed [ portfolio ]-{ interview version ] images.
15. 15:12 Thinking about using [ presentation ]-[ slide shows ]: As the interview tomorrow they kindly offer me to use their computer, so I can bring my usb there. Then I'm thinking about how to present my jpg image. Later I think I will use "html slide shows" such as reveal.js.
16. 15:45 Learning { reveal.js }-[ presentation ]-[ slide shows ].
17. 16:10 Doing { reveal.js }-[ presentation ]-[ slide shows ]: And copy it into USB stick and upload to Google Drive, for tomorrow interview.
18. 17:50 Finding the company location of interview.
19. 18:10 Eating green beans, misc.
20. 18:27 Finding the company location of interview: Understanding 大台北公車 website, 5284 website.
21. 20:00 Having conversation with Woody about my interview: To speed up learning process and have more systematic learning and learning routine, I can go purchase some online course like Udemy.com, Lynda.com. Woody told me that the basic threshold for get a front-end job is not as high as I think, there might be some javascript test (interviewer just want to know the current level of interviewee), but unlike back-end jobs, there is no question like algorithm stuff.
22. 21:00 Writing blog.
23. 21:13 Misc.
24. 21:18 Taking shower.
25. 21:50 Cooking, planning [ interview ]-[ transportation ].
26. 22:18 Eating, understanding { 圍棋練功房 }.
27. 23:00 Brushing teeth, watching video.
28. 23:20 Sleep.

2019-07-22

Interview

Job

Humble

{ 圍棋人科技股份有限公司 }-{ Goer }

Got offer

{ 圍棋人科技股份有限公司 }-{ Goer }
1. My thought: Be humble, be [ contentment ]-[ fulfillment ].
2. Job interview - 圍棋人科技股份有限公司: Homepage, yourator. 主力產品「圍棋練功房」是一個基於AI開發的圍棋補習班的全方位輔助方案內容包含：e化教學、AI對戰陪練、遊戲化機制、智慧題庫、電子作業、真人即時對弈、棋力成長軌跡、棋院管理後台等等。產品2018年5月上線至今，在兩岸三地已經有超過300間棋院採用，月付費會員數萬人（模式為B2B2C）。總部設立在台北，主要負責產品開發與新技術研發、全球市場戰略佈局；廣州也有設立辦公室，負責中國運營與業務推廣。
3. Address: 台北市中山區長春路152號3樓 (松江南京站8號出口).
4. 上班車資 (單程): 公車 5042: 28 ; 火車中壢到台北 51 ; 捷運 (含轉路線): 16 + 16 ; 共約 111 ; 來回一趟: 222.
5. 上班時間 (單程): 公車 5042: 估 40 分 ; 火車中壢到台北: 估 55 分 ; 捷運 (含轉路線): 估 35 分 ; 步行到公司樓下: 估 5 分 ; 共約 135 分 (2h15m) ; 來回一趟共約: 270 分 (4h30m).
6. { Jack Yeh }: Link.
Job interview - 科萊博瑞科技有限公司: Homepage, cakeresume. This interview was canceled as soon as I'm sure I got the job in { 圍棋人科技股份有限公司 }-{ Goer }.
Job interview - 快樂電視_快樂科技股份有限公司 (interview of tomorrow): Homepage, 104. This interview was canceled as soon as I'm sure I got the job in { 圍棋人科技股份有限公司 }-{ Goer }.
By time:
1. 07:25 Wake up.
2. 07:26 Uploading blog.
3. 07:32 Bathroom.
4. 07:50 Leaving home for interview.
5. 11:00 Interview of { 圍棋人科技股份有限公司 }-{ Goer }.
6. 13:50 Finished the interview of { 圍棋人科技股份有限公司 }-{ Goer }.
7. 15:00 Leaving { 圍棋人科技股份有限公司 }-{ Goer } and back toward home.
8. 15:25 Train departing.
9. 16:30 Train arriving: Delayed, due to a person had health issue on train.
10. 16:?? Canceling the 5th interview too: I'd canceled the 4th already when I was informed I get the offer in { 圍棋人科技股份有限公司 }-{ Goer }, but no time to cancel the 5th too. Now I finished the rest, canceling the 5th too.
11. 17:40 Back home, wasting time on [ muse ]-[ reflecting ].
12. 18:30 Misc, messaging with mom, uploading blog: I'm wasting time on so much unimportant tiny things, can't focusing.
13. 20:27 Cooking, messaging with mom, wasting time on [ muse ]-[ reflecting ].
14. 20:50 Eating, wasting time on [ muse ]-[ reflecting ].
15. 21:05 Taking shower, brushing teeth.
16. 21:42 Thinking of javascript: Including let inside for block and setTimeout() ; 3 arguments of array.filter(), array.map(), array.find() ,, callback ; 4 arguments of array.reduce() ,, callback.
17. 22:05 Sleep.

2019-07-23

First day of working at { 圍棋人科技股份有限公司 }-{ Goer }

By time:
1. 06:05 Wake up.
2. 06:15 Get on the bus.

2019-07-xx

Portfolio and Resume

Finding job

{ GSAP }

Exercising

{ Corenet }

Front-end

Back-end

{ LoveAndHappiness }

{ lahSale }

By time:
1. ?? Wake up.
2. ?? Go exercising.
3. ?? Uploading blog.
4. ?? Cooking.
5. ?? Eating.
: Link.