班会第 51 期

[ufologist]

• 技术

  • 面向未来的 CSS Variable

    /* 定义变量 */
    /* 应用范围, 类似于普通编程语言中的变量作用域 */
    :root {
        --contentFontSize: 28px;
    }
    /* 覆盖变量 */
    p {
        --contentFontSize: 20px;
    }
    
    /* 使用变量 */
    p {
        font-size: var(--contentFontSize); /* 20px */
    }
    button {
        font-size: var(--contentFontSize); /* 28px */
    }

  • Excuse me？这个前端面试在搞事！

    for (var i = 0; i < 5; i++) {
      setTimeout(function() {
        console.log(i);
      }, 1000 * i);
    }
    
    for (var i = 0; i < 5; i++) {
      (function(i) {
        setTimeout(function() {
          console.log(i);
        }, i * 1000);
      })(i);
    }
    
    for (var i = 0; i < 5; i++) {
      (function() {
        setTimeout(function() {
          console.log(i);
        }, i * 1000);
      })(i);
    }
    
    for (var i = 0; i < 5; i++) {
      setTimeout((function(i) {
        console.log(i);
      })(i), i * 1000);
    }
    
    setTimeout(function() {
      console.log(5)
    }, 0);
    new Promise(function executor(resolve) {
      console.log(1);
      for( var i=0 ; i<10000 ; i++ ) {
        i == 9999 && resolve();
      }
      console.log(2);
    }).then(function() {
      console.log(4);
    });
    console.log(3);

  • 写给前端的甩锅指南

    调接口出了问题, 前端如何能够快速的定位问题呢? 到底是前端的问题, 还是后端的问题, 又或者是浏览器的问题?

    我经常看见前端工程师的招聘贴上会有这么一个要求：了解一门后台语言，有后台开发经验者优先。很多人可能心里嘀咕：这是准备拿我当全栈去用啊。先不说这个算不算全栈，就说这个要求具体指什么。其实它指的是对于 web 开发流程的熟悉，你需要理解一个 ajax post 请求最后如何变成一条数据库记录的。流程其实很复杂，本文就说一个重点，前后端信息交互的信使，http 请求。

    对于一个前端来说，了解下 http 协议很有用。只有你了解发出去的包是什么，你才会有这个胆量说这个锅前端不背，浏览器也不背。

    其实 http 里面最难理解的就是各种头，如果要一个个去记住实在太难，但是其实他们也是为了解决各种问题的, 如缓存相关, 安全相关, 认证相关, 跨域相关

  • Gif在web上的优化

    我们不得不面对一个问题，就是gif太大，像上面的图片，大概有 11.4mb
    替代方法

    • 使用html5 video, 替换掉gif采用mp4或者webm格式的视频，使用自动播放和循环，这样让人会有gif的样子
    • 有损压缩gif(gifsicle, giflossy)

  • 浏览器亚像素渲染与小数位的取舍

    • 百分比数值只需保留3位小数即可
    • 在兼容IE8、IE9的情况下，无法避免1像素的差距，因此百分比宽度或背景定位时，需能兼容1像素的误差范围

• 产品

  • 程序员找工作黑名单，换工作和当技术合伙人需谨慎啊

    厂商黑名单

    首先，每一个程序猿，每一个公司都有黑点，但是如果把黑点放大了，黑名单就没存在的意义了