Done
- Work 7 hours
- EnergyClub - Compare Price function
- CSS with placeholder animation
- How React deal with the form and get the value of it
- how routes works
- EnergyClub - Compare Price function
- Pair Learning (1 hour)
- Meditation (15mins)
- Podcast (30天認(rèn)知訓(xùn)練營(yíng))
Thoughts
-
Why I like to miss something?
What happened? When I have done placeholder implementation, I show it to Leander and let him know that I refer to some of the articles, and his feedback is to notice one sentence from article `> First things first: this is not a ”Best practice” implementation in any way, shape or form. It works in recent versions of some browsers — most notably Chrome/Opera and Safari/WebKit. It fails miserably in Firefox.Thoughts: I have barely tested it. Be warned.` I didn't notice that sentence and just implement it. I think it would be gain some bad influence in the future as I may do something, but the direction is not right, I need to notice it ahead instead
Action: taking care of all article, not harsh to run the code, understand what the talk about it first. 30天認(rèn)知訓(xùn)練營(yíng) 1- 查理芒格的人生開(kāi)關(guān)(To be continued)
人類的25個(gè)心理傾向识颊，思維定式：
1. 激勵(lì)： 用利益而不是道理來(lái)說(shuō)服人
2. 愛(ài): 人們渴望愛(ài)與被愛(ài)，因此對(duì)所愛(ài)者的缺點(diǎn)熟視無(wú)睹藕咏，聽(tīng)從其意志浙值，偏愛(ài)其所愛(ài)
3. 恨: 人們?yōu)榇藷o(wú)視所仇恨者的優(yōu)點(diǎn)
4. 討厭不確定性: 人們不愿意陷入懷疑和不確定狀態(tài)之中霉颠，總是想立即作出決定。它與困惑和壓力有關(guān)，困惑和壓力越大躲舌，人們?cè)较氡M快擺脫懷疑
5. 一致性: 人們討厭前后不一，總想前后協(xié)調(diào)起來(lái)性雄。這使得習(xí)慣至關(guān)重要
6. 好奇: 好奇害死貓
7. 公平: 己所不欲勿施于人
8. 妒嫉：兄弟姐妹之間的嫉妒更甚于陌生人之間
9. 投桃報(bào)李没卸，以牙還牙： 有可能會(huì)：給你小恩小惠，你油然而生感激秒旋，于是掉進(jìn)陷阱
10. 近朱者赤： 人們喜歡俊男美女约计，就會(huì)連帶對(duì)廣告宣傳的產(chǎn)品有好印象
11. 否認(rèn)現(xiàn)實(shí)：人們會(huì)拒絕承認(rèn)現(xiàn)實(shí)，如果它太令人痛苦
12.過(guò)度重視自己：人們總是認(rèn)為自己擁有的東西更好迁筛，喜歡與自己相似的人. 偉大人物則相反煤蚌，他們經(jīng)常清掃房間，斷舍離细卧。
13. 過(guò)度自信：過(guò)度自信的人還往往會(huì)高估自己對(duì)其他人的判斷能力尉桩，結(jié)果就是在面試上花了過(guò)多時(shí)間，其實(shí)把這些時(shí)間用在簡(jiǎn)歷上更有效贪庙。**怎么才能解毒蜘犁？** 少想自己這個(gè)人，多想概率這件事止邮，
14. 厭惡損失
15. 尋找認(rèn)同: 比如在集體中普通人能夠?qū)λ耸┮圆豢上胂蟮谋┝?16. 對(duì)標(biāo): 溫水煮青蛙这橙，因?yàn)槊恳豢潭贾桓弦豢瘫茸嘁ぃX(jué)得沒(méi)啥變化，直到沸騰屈扎。我們作判斷總是長(zhǎng)于找對(duì)標(biāo)作比較埃唯，也就是相對(duì)視角，非常不擅長(zhǎng)于絕對(duì)視角
17. 重視易得的東西 : 近距離戀愛(ài)成功率高
18. 服從權(quán)威
19. 萬(wàn)事有理由
20. 總開(kāi)關(guān)鹰晨，組合開(kāi)關(guān)
對(duì)于25個(gè)開(kāi)關(guān)的解藥
解藥不外乎這些：
第一墨叛，隨時(shí)對(duì)照25個(gè)開(kāi)關(guān)檢查自己的決策。知道就是得到并村，比茫然懵懂好很多巍实。
第二，下判斷作決定前哩牍，最好要有冷靜期棚潦，避免沖動(dòng)。
第三膝昆，要算概率丸边，可以使決策更穩(wěn)妥。
第四荚孵，找對(duì)參照系妹窖。
第五，與前后不一這件事和解收叶，自相矛盾沒(méi)什么了不起的骄呼。
第六，永遠(yuǎn)直面真相判没，不管這有多么難蜓萄。
《論語(yǔ)》說(shuō)，夫子有四絕：毋意澄峰，毋必嫉沽，毋固，毋我俏竞。就是說(shuō)夫子四不為绸硕，不想當(dāng)然，不強(qiáng)求魂毁，不固執(zhí)玻佩，也不宥于自己。
《中庸》也留下了十六字心傳：人心惟危漱牵，道心惟微夺蛇，惟精惟一，允執(zhí)厥中酣胀。
- Poor Charlie's Almanack
- 30天認(rèn)知訓(xùn)練營(yíng) 3- 什么樣的人能不被命運(yùn)無(wú)常所傷害（斯多葛哲學(xué)的生活藝術(shù)）
Learned
-
Development: CSS
- element + element: (ex: div + p) Selects all <p> elements that are placed immediately after <div> elements , more reference css selector
- Redirect with Form（React ways）
constructor(props) { super(props); this.state = { isGoing: true, numberOfGuests: 2 }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleInputChange(event) { const target = event.target; const value = target.value; const name = target.name; this.setState({ [name]: value }); } onSubmit(event) { event.preventDefault(); this.props.onFormSubmit(this.state) } -
How to make a placeholder animation
- position: relative/absolute
- placeholder-show
- placeholder-show + label
- &:not(:placeholder-shown) + label,
- opacity(0 or 1)
- transition(transition: all 0.2s;)
- transform( transform: translate(0, 25px) scale(1.5);)
&__field { position: relative; label { position: absolute; background: white; top:5px; letter-spacing: 0.05em; padding: 0px 5px; margin: 0px 20px; color: $brand-primary; font-size: 11px; transition: all 0.2s; } input { height: 42px; min-width: 600px; margin: 10px; border-color: $brand-primary; &::placeholder { color: $brand-primary; opacity: 0; } &:placeholder-shown { opacity: 1; } &:placeholder-shown + label { cursor: text; max-width: 66.66%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform-origin: left bottom; transform: translate(0, 25px) scale(1.5); } &:not(:placeholder-shown) + label, &:focus + label { transform: translate(0, 0) scale(1); cursor: pointer; } }
-
ReactJS -- Virtual DOM:
- recursion
function createElement(tag, attrs, ...children) { return { tag, attrs, children } } // 將上文定義的createElement方法放到對(duì)象React中 const React = { createElement } function render( vnode, container ) { // console.log(vnode) // 當(dāng)vnode為字符串時(shí)刁赦，渲染結(jié)果是一段文本 if ( typeof vnode === 'string' ) { const textNode = document.createTextNode( vnode ); return container.appendChild( textNode ); } const dom = document.createElement( vnode.tag ); // console.log(dom) if ( vnode.attrs ) { Object.keys( vnode.attrs ).forEach( key => { const value = vnode.attrs[ key ]; setAttribute( dom, key, value ); // 設(shè)置屬性 } ); } vnode.children.forEach( child => render( child, dom ) ); // 遞歸渲染子節(jié)點(diǎn) return container.appendChild( dom ); // 將渲染結(jié)果掛載到真正的DOM上 } function setAttribute( dom, name, value ) { // 如果屬性名是className，則改回class if ( name === 'className' ) name = 'class'; // 如果屬性名是onXXX闻镶，則是一個(gè)事件監(jiān)聽(tīng)方法 // if ( /on\w+/.test( name ) ) { // name = name.toLowerCase(); // dom[ name ] = value || ''; // // 如果屬性名是style甚脉，則更新style對(duì)象 // } else if ( name === 'style' ) { //... // // 普通屬性則直接更新屬性 // ... } const ReactDOM = { render: ( vnode, container ) => { container.innerHTML = ''; return render( vnode, container ); } } function tick() { const element = ( <div> <h1>Hello, world!</h1> <h2>It is {new Date().toLocaleTimeString()}.</h2> </div> ); ReactDOM.render( element, document.getElementById( 'root' ) ); } setInterval( tick, 1000 );
* **English**
* Navel [ /'nevl/] 肚臍；中央铆农；中心點(diǎn)
