2018-05-09

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
• 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- 什么样的人能不被命运无常所伤害（斯多葛哲学的生活艺术）
  • A Guide to the Good Life: The Ancient Art of Stoic Joy

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/]  肚脐；中央；中心点