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天认知训练营)
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天认知训练营 1- 查理芒格的人生开关(To be continued)
人类的25个心理倾向,思维定式:
1. 激励: 用利益而不是道理来说服人
2. 爱: 人们渴望爱与被爱,因此对所爱者的缺点熟视无睹,听从其意志,偏爱其所爱
3. 恨: 人们为此无视所仇恨者的优点
4. 讨厌不确定性: 人们不愿意陷入怀疑和不确定状态之中,总是想立即作出决定。它与困惑和压力有关,困惑和压力越大,人们越想尽快摆脱怀疑
5. 一致性: 人们讨厌前后不一,总想前后协调起来。这使得习惯至关重要
6. 好奇: 好奇害死猫
7. 公平: 己所不欲勿施于人
8. 妒嫉:兄弟姐妹之间的嫉妒更甚于陌生人之间
9. 投桃报李,以牙还牙: 有可能会:给你小恩小惠,你油然而生感激,于是掉进陷阱
10. 近朱者赤: 人们喜欢俊男美女,就会连带对广告宣传的产品有好印象
11. 否认现实:人们会拒绝承认现实,如果它太令人痛苦
12.过度重视自己:人们总是认为自己拥有的东西更好,喜欢与自己相似的人. 伟大人物则相反,他们经常清扫房间,断舍离。
13. 过度自信:过度自信的人还往往会高估自己对其他人的判断能力,结果就是在面试上花了过多时间,其实把这些时间用在简历上更有效。**怎么才能解毒?** 少想自己这个人,多想概率这件事,
14. 厌恶损失
15. 寻找认同: 比如在集体中普通人能够对他人施以不可想象的暴力
16. 对标: 温水煮青蛙,因为每一刻都只跟上一刻比,觉得没啥变化,直到沸腾。我们作判断总是长于找对标作比较,也就是相对视角,非常不擅长于绝对视角
17. 重视易得的东西 : 近距离恋爱成功率高
18. 服从权威
19. 万事有理由
20. 总开关,组合开关
对于25个开关的解药
解药不外乎这些:
第一,随时对照25个开关检查自己的决策。知道就是得到,比茫然懵懂好很多。
第二,下判断作决定前,最好要有冷静期,避免冲动。
第三,要算概率,可以使决策更稳妥。
第四,找对参照系。
第五,与前后不一这件事和解,自相矛盾没什么了不起的。
第六,永远直面真相,不管这有多么难。
《论语》说,夫子有四绝:毋意,毋必,毋固,毋我。就是说夫子四不为,不想当然,不强求,不固执,也不宥于自己。
《中庸》也留下了十六字心传:人心惟危,道心惟微,惟精惟一,允执厥中。
- Poor Charlie's Almanack
- 30天认知训练营 3- 什么样的人能不被命运无常所伤害(斯多葛哲学的生活艺术)
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方法放到对象React中 const React = { createElement } function render( vnode, container ) { // console.log(vnode) // 当vnode为字符串时,渲染结果是一段文本 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 ); // 设置属性 } ); } vnode.children.forEach( child => render( child, dom ) ); // 递归渲染子节点 return container.appendChild( dom ); // 将渲染结果挂载到真正的DOM上 } function setAttribute( dom, name, value ) { // 如果属性名是className,则改回class if ( name === 'className' ) name = 'class'; // 如果属性名是onXXX,则是一个事件监听方法 // if ( /on\w+/.test( name ) ) { // name = name.toLowerCase(); // dom[ name ] = value || ''; // // 如果属性名是style,则更新style对象 // } 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/] 肚脐;中央;中心点
网友评论