班会第 60 期 #73

ufologist · 2017-05-15T12:27:47Z

技术
- iphone - :active pseudo-class doesn't work in mobile safari
  
  iOS 上 CSS 的 :active 样式没有效果, 可以简单地在 body 上做一个空的 touchstart 事件监听, 例如: <body ontouchstart>
  
  或者使用 FastClick 来处理 touchstart 事件监听
  
  Enable CSS active pseudo styles in Mobile Safari – Alex Gibson
- eleme/element-react
  
  Element UI 推出 React 版了
- styled-components
  Use the best bits of ES6 and CSS to style your apps without stress
```
import React from 'react';
import styled from 'styled-components';

// Create a <Title> react component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// Create a <Wrapper> react component that renders a <section> with
// some padding and a papayawhip background
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;


export default () => {
  // Render these styled components like normal react components. They will pass on all props and work
  // like normal react components – except they're styled!
  return (
    <Wrapper>
      <Title>Hello World, this is my first styled component!</Title>
    </Wrapper>
  );
}
```
- Framework7 Vue
  原来 Framework7 已经有 Vue 和 React 版了
  
  App Framework
  
  iOS and Android Apps with HTML & JavaScript - develop, build and deploy - free and open source!
  - Creation of a lightweight and well-organized project folder
  - Design
  - Develop
  - Test
  - Build
  - Deploy
  - Backup
- Sizzy
  
  A tool for developing responsive websites crazy-fast
- Easy Mock
  
  一个可视化，并且能快速生成模拟数据的服务。以项目管理的方式组织 Mock List，能帮助我们更好的管理 Mock 数据，不怕丢失
  
  Easy Mock 支持同步 Swagger 文档
- 微信扫一扫登录内部实现原理
  https://login.weixin.qq.com/l/obsbQ-Dzag==
  - 浏览器获得一个唯一的、临时的UUID
  - 通过长连接等待客户端扫描带有此UUID的二维码后，从长连接中获得客户端上报给服务器的帐号信息进行展示
  - 并在客户端点击确认后，获得服务器授信的令牌，进行随后的信息交互过程
- 快来看看Google出品的Protocol Buffer，别只会用Json和XML了
  
  Protocol Buffer 是 Google出品的一种轻量 & 高效的结构化数据存储格式，性能比 Json、XML 真的强！太！多！
  
  应用场景: 传输数据量大 & 网络环境不稳定的数据存储、RPC 数据交换的需求场景, 如即时IM （QQ、微信）的需求场景
- 前端框架大作战！ @px0078
  
  听歌的同时把前端框架全学会了, 真是个机智的少年
产品
- Atlassian Design
  Use Atlassian's end-to-end design language to create straightforward and beautiful experiences.
  - Brand
    
    Foundations, including personality, writing style, color, and type.
  - Marketing
    
    How color, type, and illustration are used in marketing.
  - Product
    
    Foundations, components, and patterns for building applications.
  AtlasKit is Atlassian's official UI library, built according to the Atlassian Design Guidelines(ADG)