冰糖橙子ariesjia

如果你是一个 React 开发人员，我相信你一定已经很熟悉了 React Hooks 了。我们今天先简单的回顾一下。

什么是 React Hooks ？

通过 React Hooks 可以编写组件时在不使用 Class 的情况下使用 State，生命周期等等， 可以使组件更加简洁，便于重用逻辑

按照惯例我们还是先上这个熟悉的计数器 demo

import React from "react"

class Counter extends React.Component {
  constructor(props) {
    super(props)
    this.state  = {
      count: 0
    }
  }

  increment = () => {
    this.setState(prevState => ({count: prevState.count + 1}))
  }

  decrement = () => {
    this.setState(prevState => ({count: prevState.count - 1}))
  }

  render() {
    return ()
  }
}

最近体验了github上非常火爆的synth框架 , 这是一款node.js为API开发设计框架，特别适合现在的前后端分离项目，大概有下面几个特点

1. 非常非常快速创建api，不需要自己定义路由，用synth你只需要创建文件夹

2. 能够在页面加载时，预加载数据

3. 提供了全套 新建项目,开发,发布 全周期工具，包括代码架子，自动watch，发布压缩合并，改名等等。

在api设计方面他依靠文件目录结构,非常的直观简单。synthApi会自动扫描resources下得所有js或coffee文件,自动生成与文件路径匹配的express路由,如果你需要定义api: api/topic,则按以下路径创建文件

| resources
　　　| topic 
　　　　　　| xxx.(js|coffee)

同理如果定义api: api/topic/comment，文件路径如下

| resources
　　　| topic
　　　　　　| comment
　　　　　　　　　| xxx.(js|coffee) 

api也非常简单，在对应js中实现规则命名的方法即可，方法命名规则 exports.[HTTP方法名(get,put,delete,post)][动作名(可选)]

只有方法名等于get，put，delete，会要求带id，其他的任何方法(例如：getTopics,putAnything…)都不接收path中的id，如果你需要使用可以通过query中传入。

get : exports.get eg : /api/topic/1

put : exports.put eg : /api/topic/1

delete : exports.delete eg : /api/topic/1

post : exports.post eg : /api/topic

get : exports.getTopics eg : /api/topic

delete : exports.deleteXXXXX eg : /api/topic?id=1

更多的教程，文档可以参考官网

我自己尝试synth + avos cloud做了一个demo，代码：https://github.com/ariesjia/synth-demo ，地址：http://synthjs.herokuapp.com

个人认为synth其实是一个聚合，组合了express ，gulp，bower等，提供更加快速，便捷，标准的开发实践。
目前synth还出于非正式版，还是有一些缺陷，比如deploy的脚本无法自定义，需要添加额外的task只能修改框架代码,但是总的来说是相当不错，有兴趣的朋友赶紧来体验这个小清新的框架。

WEBP是什么呢？
WEBP 是google推出的意图改变web图片JPG、PNG、GIF三分天下局势的一种图片格式。它不仅支持无损或有损压缩、alpha通道，还支持动画演示。在同画质的情况下，webp格式图片占用体积相较于jpg图片大约减少40%，相较于无损png图片大约减少30%。具不完全统计，互联网流量中60%都产生于图片，如果能用上webp格式，网站的访问速度将会大大提升。

兼容及使用

目前，移动端Android4.0以上、PC端chorme 10+（14 ~ 16 有渲染bug）、opera 11+ 、safri均支持webp格式图片。firefox曾经拒绝支持webp，今年也重启了关于webp第二次讨论https://bugzilla.mozilla.org/show_bug.cgi?id=856375 ( 第一次讨论:地址 )，大家可以关注到里面的进度，safri也开始支持webm，相信webp也会在不久的将来得到支持，好的东西始终是会被大家接纳的。

目前要实现全浏览器兼容，虽然可以引入flash，但引入成本太高而且转为flash之后图片不能再操作，缺少灵活性，同时又会占用过多的CPU。因此，目前可行的解决方法只能是同时提供两套图片。

1.服务端方式服务端就只能通过UA信息来判断 可参考:https://github.com/igrigorik/webp-detect ，针对不同浏览器提供不同文件。

Chrome在更新到27后，之前的SCSS的debug info就不显示，刚开始还以为是更新后默认恢复了开启的试验选项，各种把 启用开发者工具实验 和 Support for Sass 开了又关，关了又开，怎么也木有效果。

终于找到这个的解决办法：http://snugug.com/musings/debugging-sass-source-maps

原来Chrome27+只支持Source Maps，Source Map是一个JSON文件，而它包含了代码转换前后的位置信息：

1.确保开启除了原有的Support for Sass 再开启Enable source maps

我们通常在做可用性无障碍优化的时候，都把我们的目标对象假定为使用屏幕阅读器的视残人士。往往忽视了在介于视力正常与视残人士之间的视障者，视障者是指视觉功能受到一定程度的损害，以致无法达到正常视力，因而到影响日常生活。windows平台为了满足视障用户的需求，提供了高对比模式，它会通过使用对比鲜明的色彩才提高阅读性。以下是win7提供的4中高对比模式。

高对比度模式下网页的背景根据选择变为对应的颜色，并且所有的背景图片都不会显示出来。虽然雪碧图的原则是合并非功能性的修饰图片，但是对于一些特殊的例如导航条，包括一些模拟按钮，我们通常的做法都合并了起来。这样的处理办法会造成少部分人的大麻烦，严重损害了视障用户的体验。下图为高对比与普通模式下的对比，页面中模块的标题完全不可见。

这是我今天收到公司邮件的标题，Time flies，晃眼之间距离7月7号到腾讯入职实习到今日刚好整整的一个月的时间，这一个月以来清晰的感受到由学生到职业人的转变，逐渐的熟悉身边的环境，适应身边的许多改变。

我和“TA”的第一次

还没有来报道之前，经常会看到群里早来报道的同学说，这里可以穿拖鞋上班。第一天来腾讯大厦一楼报道时候，很惊奇的发现大部分的同学都是穿着拖鞋短裤来上班了，有的MM带着羽毛球拍，这种自由的氛围自由的文化着实让我感觉很温馨。这是我直面这家公司的第一印象。

对于产品同学满脑子的奇思妙想非常的佩服，“年轻而活跃“，这是我直面这家公司的第二印象。

接下来接触公司在对待用户的态度，我更加认同了这家公司的使命，价值观。我感觉我是爱上了“TA”。