班会第 19 期 - Githubissues

技术
- 22个必备的CSS小技巧
- 类似Photoshop的混合模式 mix-blend-mode
- 渐变边框
- z-index 的过渡
- currentColor 当前的颜色
- object-fit 类似 background-size
- 单选框和复选框的样式
```
// Unicode编码在CSS和HTML中的写法是不一样的
// 在CSS中它是一个以反斜杠为开始的十六进制数, 例如: \2713
// 在HTML中它可以是十进制的，例如: &#10003; 也可以用十六进制: &#x2713;
HTML -> &#10003;
HTML -> &#x2713;
CSS  -> content: "\2713";
JS   -> console.log(0x002713);
JS   -> '✓'.charCodeAt(0).toString(16);
JS   -> console.log('\u2713');
```
- CSS中的计数器
```
counter-reset: counterName;
counter-increment: counterName ±num;
content: counter(counterName, list-style-type);
```
- 不使用图片的“汉堡”图标 box-shadow/background gradient/UTF-8(直接使用标准符号：Unicode: U+2630, HTML: &#9776)
- @supports
```
/*You can check prefixes*/
@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {
    section {
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        float: none;
    }
}
```
- 父子元素的 visibility
- position: sticky
- 新的尺寸单位(vw, vh)
```
width: 1vw; /* 浏览器窗口宽度的1% */
```
- 文字被选中时的效果 ::selection {}
- 元素内滚动 -webkit-overflow-scrolling: touch
- unicode classes
```
/* 但这其实是用来搞笑的，千万不要在大型项目中使用，因为不是所有的电脑都支持Unicode符号 */
.★ {
    /**/
}
```
- 子元素(padding/margin)的百分比是相对于父元素的宽度
```
.parent {
    height: 400px;
    width: 200px;
}
.child {
    width: 80%;          /* parentWidth  * 90% */
    height: 50%;         /* parentHeight * 50% */
    padding-top: 10%;    /* parentWidth  * 25% */
    padding-left: 20%;   /* parentWidth  * 25% */
    margin-top: 10%;     /* parentWidth  * 25% */
    margin-left: 20%;    /* parentWidth  * 25% */
}
```
- 火狐浏览器的按钮边距
```
button::-moz-focus-inner,  
input[type="reset"]::-moz-focus-inner,  
input[type="button"]::-moz-focus-inner,  
input[type="submit"]::-moz-focus-inner {  
    border: none;
    padding:0;
}
```
- color + border = border-color 定义了一个元素的文字颜色，意味着这个元素的边框颜色也被定义了
```
input[type="text"] {  
    color: red;
    border: 1px solid;
}
```
- Create React apps with no build configuration
```
npm install -g create-react-app
create-react-app hello-world
npm start
npm run build
```
- 微信开发--iframe中使用微信api
微信 JSSDK API 是不能在iframe中进行签名认证的

微信限制了api的调用,不能在iframe中进行api的签名认证,只能在主页面中使用. 所以解决方法就是在父页面实现微信api的签名认证,然后iframe里利用
```
window.parent.wx.xxx;
window.top.wx.xxx;
```
- 微信中的阿里(淘宝天猫支付宝)
- 阿里屏蔽微信内访问淘宝天猫的技术，被突破了
- 微信端支付宝支付，iframe改造，解决微信中无法使用支付宝付款和弹出“长按地址在浏览器中打开”
关键至于通过iframe避开屏蔽
```
<iframe src="https://item.taobao.com/item.htm?id=534848052763" width="100%" height="100%" style="position: absolute;left: 0;top: 0;z-index: 1;width: 100%;height: 100%;border: none;"></iframe>
```
BUT~~ 亲测微信 6.2 还可以使用这个黑魔法, 最新版的微信上这个魔法已经失效了!!!, 所以还是放弃吧少年~
- URL详解与URL编码
scheme://host[:port#]/path/.../[;url-params][?query-string][#anchor]
```
function parseURL(url) {
    var a =  document.createElement('a');
    a.href = url;
    return {
        source: url,
        protocol: a.protocol.replace(':',''),
        host: a.hostname,
        port: a.port,
        path: a.pathname.replace(/^([^/])/,'/$1'),
        query: a.search,
        params: (function(){
            var ret = {},
                seg = a.search.replace(/^\?/,'').split('&'),
                len = seg.length, i = 0, s;
            for (;i<len;i++) {
                if (!seg[i]) { continue; }
                s = seg[i].split('=');
                ret[s[0]] = s[1];
            }
            return ret;
        })(),
        hash: a.hash.replace('#',''),
        relative: (a.href.match(/tps?:\/[^/]+(.+)/) || [,''])[1],
        file: (a.pathname.match(/([^/?#]+)$/i) || [,''])[1],
        segments: a.pathname.replace(/^\//,'').split('/')
    };
}

var myURL = parseURL('http://a.com:8080/dir/index.html?id=2&m=h#top');

myURL.source;   // = 'http://a.com:8080/dir/index.html?id=2&m=h#top'
myURL.protocol; // = 'http'
myURL.host;     // = 'a.com'
myURL.port;     // = '8080'
myURL.path;     // = '/dir/index.html'
myURL.query;    // = '?id=2&m=h'
myURL.params;   // = { id: 2, m: h }
myURL.hash;     // = 'top'
myURL.file;     // = 'index.html'
myURL.segments; // = ['dir', 'index.html']
```
用 encodeURIComponent() 的作用是对 URL 中的参数进行编码
```
var param = "http://www.b.com?t=123&s=456"; // 要被编码的参数
URL = "http://www.a.com?foo=" + encodeURIComponent(param);
```
- jQuery 3.0 的新特性
- 使用 requestAnimationFrame 处理动画
- escapeSelector 转义包含特殊意义的字符串
```
$('.abc\\.def')
```
- 支持SVG的类操作方法
- 简易的 show/hide/toggle 逻辑, 将只为inline styles服务，不再为computed styles效力了
```
// in 3.0 we have -
/*case #1*/ $("<div/>").show().appendTo("body")[0].style.display; // ""
/*case #2*/ $("<div/>").hide().appendTo("body")[0].style.display; // "none"

// Whereas before, in 2.x, we had -
/*case #2*/ $("<div/>").show().appendTo("body")[0].style.display; // "block"
/*case #2*/ $("<div/>").hide().appendTo("body")[0].style.display; // "none"
```
- .width() 和 .height() 支持小数
- CodePush
CodePush is a cloud service that enables Cordova and React Native developers to deploy mobile app updates directly to their users’ devices. It works by acting as a central repository that developers can publish certain updates to (e.g. JS, HTML, CSS and image changes), and that apps can query for updates from (using our provided client SDKs).
- 微服务选型之Modern Node.js
1) 被误解的Node.js：除了性能，都是病？
- 单线程，会死？
  - Everything runs in parallel except your code
  - 小集群：单台服务器上多个实例, pm2模块，绝大部分的产品环境部署都使用pm2的
- 异步（callbackhell）太恶心？
  - 同步代码
  - callback hell
  - Promise/A+
  - generators/yield
  - async/await
- 接入层？
  - 很多公司用Node.js做接入层，比如阿里系的天猫和淘宝，后端大量的C/C++和Java，前端用Node.js一点点替换PHP，据说如果都替换完成，可以每年服务器上节省电费700百万（不知真假）
  - 所谓的接入层就API层以前的（前端 + httpserver-by-node），然后Node去调用API服务，返回给前端。Node的作用就是控制器，从API取数据，然后返回给渲染层。
2) 现代的Node.js：构建微服务利器
- 小而美: 保持模块足够小（内聚），模块应该只做一件事！
- 同步的Node.js
- 善用npm，实现3化（模块化、最小化、服务化）
- 微服务选型
- 大搜车NodeJS日志规范化与分析监控
- ELK 日志分析3剑客，是 Elasticsearch + logstash + kibana 的简称
- filebeta 日志收割机
- logstash 日志中转站
- Kibana 强大的日志可视化面板
ELKstack 中文指南在实时数据检索和分析场合，三者通常是配合共用
- 给你的Node.js项目部署HTTPS
SSL For Free 申请免费的SSL证书（三个月免费，在到期之前sslforfree会发邮件通知你来更换证书）
- 课多周刊
- 前端开发面试题
- 如何在页面上实现一个圆形的可点击区域？
- Amazon主页的左上角有一个商品分类浏览的下拉菜单没有延迟，而且子菜单也不会在不应该的时候消失。它是怎样做到这一点的呢？
产品
- 动效实战派｜做交互动效你一定要知道“这三点”
好的动效应能聚焦用户的注意，能展示界面中各元素是如何组织连接呈现，也能暗示或直接体现出各元素的功能性。动效设计的先行者谷歌为我们定义了好的动效设计的目的：
- 引导用户在视图间有效聚焦
- 暗示户完成一个手势操作后，将要触发的效果
- 展现不同元素之间的层级和空间关系
- 缓解用户的等待，让应用处理数据（如抓取内容或读取新视图）
- 突出个性化，新鲜感，愉悦感
- 设计师如何制作舒适动感的MG动画
MG全称是Motion Graphic运动图形

更贴近现实生活的运动

加速度 | 弹性 | 延迟（惯性）| 随机层次感（细节）| 运动修饰 | 具有特色的转场
- 企业经营离不开这三个概念
做企业有三个教科书一样的概念，就是产品领先，客户贴近和运营卓越。一般的企业守住一个优势，然后其他两个做到60分以上，这个企业就已经相当优秀了。

比如，餐饮业，米其林餐厅是行业领先；海底捞是客户贴近；麦当劳是运营卓越。

f2e-journey / xueqianban

班会第 19 期 #21