班会第 10 期

[ufologist]

• 技术

  • 如何写出一个好的 Web 页面

  • dropload 移动端下拉刷新、上拉加载更多插件

  • 前端的变革

    发布

    前端工程师开始有真正意义上的“发布”，我之前跟团队同学开玩笑说，在这之前，前端连搞出线上故障的能力都没有——不要以为这是好事，没风险意味着没价值。

    分离与同构

    手机淘宝目前的一个核心能力有关——API网关，通俗点说，就是所有的服务端提供API，而且通过统一的出口提供出来。这个便利条件，促成了一个前所未有的前端开发模式：前端开发纯静态页面，跟客户端调用同一套服务端API。

    性能

    一切没有线上监控的性能优化都是耍流氓。

  • 移动端适配专题

    • 移动端页面适配方案

      • 固定高度，宽度自适应
      • 固定宽度，viewport缩放
      • rem做宽度，viewport缩放

    • 移动前端开发之viewport的深入理解

      在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。

      ppk把移动设备上的viewport分为layout viewport 、 visual viewport 和 ideal viewport 三类，其中的ideal viewport是最适合移动设备的viewport，ideal viewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px)，那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。ideal viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户

      • layout viewport
      • visual viewport
      • ideal viewport(理想的 viewport)

      利用meta标签对viewport进行控制, 把当前的viewport宽度设置为 ideal viewport 的宽度

      <meta name="viewport" content="width=device-width, initial-scale=1">

      关于 initial-scale 缩放

      visual viewport宽度 = ideal viewport宽度  / 当前缩放值
               当前缩放值 = ideal viewport宽度  / visual viewport宽度
      

    • 移动端适配问题

      

      淘宝网触屏版为什么rem跟px混用？有什么好处？为什么不都用rem?

      rem用于随屏幕伸缩的尺寸。px用于正文文字大小、细边框等不宜随屏幕伸缩的尺寸。

      考虑到字体的点阵信息，一般文字尺寸多会采用 16px 20px 24px等值，若以rem指定文字尺寸，会产生诸如21px，19px这样的值，会导致字形难看，毛刺，甚至黑块，故大部分文字应该以px设置。

      一般标题类文字，可能也有要求随屏幕缩放，且考虑到这类文字一般都比较大，超过30px的话，也可以用rem设置字体。

      移动端适配等式: 设备宽度/设计稿宽度 = 某个元素某一距离实际值/该元素在设计稿的值

      例子:
      一个5s宽度320/设计稿宽度640 = 一个元素的高度未知/设计稿上它的高度为20
      可以推出它的实际高度为10，通常我们使用rem作为等式前的值，但是因为太小无法作为html根字体大小使用，所以适当放大，通常为了方便计算，放大100倍，即为:

      document.documentElement.fontSize = document.documentElement.clientWidth / 640 (或实际设计稿宽度) * 100
      

      那么此时在设计稿上量的的某一距离，比如43px，就等于0.43rem。

      至于文字，我们通常不用rem，因为由于不同的rem计算方式会产生很多奇怪的大小，使得文字出现糊掉或者模糊的情况，通常我们使用媒体查询事先设置好body的字体大小，这样来确保文字的正常显示。即为:rem处理适配距离的问题，em处理文字大小问题。

  • css动画的steps

    steps是设置的每一步动画的跳跃步数，而不是整个动画的跳跃步数。举个例子：

    @-webkit-keyframes ani{
       0%{...}
       50%{...}
       100%{...}
    }
    .xxx:hover{
       -webkit-animation:ani 2s steps(10);
    }

    上面的代码指的是0%~50%之间有10个跳跃，50%~100%之间有10个跳跃。而不是0%~100%之间有10个跳跃。

  • Zepto事件委托的小坑

  • Chrome 监听 console 打开

    var re = /x/;
    var i = 0;
    console.log(re);
    re.toString = function () {
      return '第 ' + (++i) + ' 次打开控制台';
    };

  • transform下的fixed布局失效问题

    <div style="transform:translateZ(0);">
        <img src="/img/fixed/1.png" style="position:fixed;top: 0;">
    </div>

    CSS3 transform对普通元素的N多渲染影响

  • G2

    一个由纯 javascript 编写、强大的语义化图表生成工具，它提供了一整套图形语法，可以让用户通过简单的语法搭建出无数种图表，并且集成了大量的统计工具，支持多种坐标系绘制，可以让用户自由得定制图表，是为大数据时代而准备的强大的可视化工具。

  • 如何解决使用了 Framework7 后图片无法长按保存的问题

  • 听《七周七并发模型》作者Paul 讲：编程语言演变对开发者的意义

    我们当今所使用的很多语言，都是在90年代中期的时候所发明出来。所以在90年代中期的时候发生了什么大事件呢？它是如何进一步改变了整个编程界，答案就是网络。

    语言的流行度和三点有关：第一个是客户端网页编程，第二个是函数式编程，第三个是并发和并行的编程。

    我认为首先，最好的应对方式就是去学习新的编程语言！

    第二个建议是再去学习另外一个新的编程语言。

    第三，我们要学习函数式编程。

    最后，去学习并发并行的编程。

  • LeanCloud 与阿里云到底有什么区别？

    个人感觉几乎开发中需要使用的服务器产品，阿里云应该都提供了。这些产品更偏向于较底层的服务，用户要想使用起来需要具备一定的能力。

    为什么我们每次做一个产品都要反反复复地开发这些差不多一样的逻辑呢？比如账号系统、数据存储、短信验证、邮件验证、推送服务甚至是即时聊天，有没有办法让这些东西拿来就用，让自己能够最快速地投入开发呢？当然有办法，这就是 LeanCloud 所做的事情。

  • 程序员进阶宝典

    • 初级软件开发工程师，他们考虑的是“怎么做”
    • 中级软件开发工程师，他们考虑的是“为什么”
    • 高级软件开发工程师，他们考虑的是“是什么”

• 产品

  • 什么是好的互联网产品

    产品好不好，其实没有一个统一的标准，因为产品类型不同，评价产品好坏的标准就不同。目前的互联网产品，大概可以分成运营驱动型、体验驱动型、技术驱动型和资源驱动型这四类

  • 「拒绝传统」看Facebook以三大法宝化茧成蝶：人才吸引，工程师文化和项目开发流程

    Facebook项目开发流程和工程师的绩效管理机制

    • Facebook的工程师文化是怎样的

      如果你有什么想法，有创新的、古灵精怪的各种想法都可以，马上去做！

    • Facebook团队组成：设计师、产品经理和工程师

      自己没有分清优先级，去做一些比较简单或者自己喜欢，或者是觉得自己能做的事情，而不是做最有影响力的事情

      特别你是在一个上升期的互联网公司的话，给你任务的速度很多时候是超过你的处理速度的。所以这个时候，你在接到一个被分配的任务或者一个email要求你干什么的时候，你不是要马上可以做，而是要强迫自己停顿下，分清现在这个任务的优先级，然后分配好开始时间，之后再开始做。

      那些垃圾任务有着一种诱惑；诱惑着没有定力的人一直去做，一直去做，感觉自己特别有成就感，特别“忙碌和充实”。所以要小心！

    • Facebook是怎样利用OKR进行人才管理的？

    • 师夷长技以制夷：对中国互联网公司有什么启示？

  • AntV

    • 数据图表

      图表的作用，是帮助我们更好地看懂数据。选择什么图表，需要回答的首要问题是 「我有什么数据，需要用图表做什么」 ， 而不是 「图表长成什么样」

      

    • 设计规范

      基于大量可视化案例，沉淀了一套优雅的设计规范