美文网首页
2018-05-09

2018-05-09

作者: carmenliu | 来源:发表于2018-05-10 18:27 被阅读0次

    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个开关检查自己的决策。知道就是得到,比茫然懵懂好很多。
    第二,下判断作决定前,最好要有冷静期,避免冲动。
    第三,要算概率,可以使决策更稳妥。
    第四,找对参照系。
    第五,与前后不一这件事和解,自相矛盾没什么了不起的。
    第六,永远直面真相,不管这有多么难。
    
    《论语》说,夫子有四绝:毋意,毋必,毋固,毋我。就是说夫子四不为,不想当然,不强求,不固执,也不宥于自己。
    《中庸》也留下了十六字心传:人心惟危,道心惟微,惟精惟一,允执厥中。
    

    Learned

    • Development: CSS

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

    相关文章

      网友评论

          本文标题:2018-05-09

          本文链接:https://www.haomeiwen.com/subject/krwgrftx.html