不是图书控的我，鬼迷心窍的一心想做一本更加真实的网络书
从来没有试过冰糖橙子的我，神魂颠倒的取了诡异的博客名
断断续续，拖拖延延的做很久，墨迹了个半成品
总而言之2011，冰糖橙子将会更加努力
如果你是一个 React 开发人员，我相信你一定已经很熟悉了 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中高对比模式。
高对比度模式下网页的背景根据选择变为对应的颜色，并且所有的背景图片都不会显示出来。虽然雪碧图的原则是合并非功能性的修饰图片，但是对于一些特殊的例如导航条，包括一些模拟按钮，我们通常的做法都合并了起来。这样的处理办法会造成少部分人的大麻烦，严重损害了视障用户的体验。下图为高对比与普通模式下的对比，页面中模块的标题完全不可见。
本文是Dive Into HTML5 第11章的一个小节，作者是 Google 的软件工程师 Mark Pilgrim。Dive Into HTML5是一本非常系统的讲解HTML5的一本书，相信能让你对microdata数据模型有一定的认识。这是我第一次的翻译，凭借拙劣的英文水平，所以翻译水平有限，若有不准确之处欢迎各位同学指正。
上一节：什么是微观数据
——————————以下为翻译的全文——————————
要自定义微观数据很简单。首先，你需要一个命名空间，他只是一个URL。这个URL命名空间实际上指向一个正在运作网页，尽管这并不是严格的要求。比方说我们想要创建一个描述一个人的微观数据词汇表，如果我拥有data-vocabulary.org这个域名，我会使用http://data-vocabulary.org/Person这个URL地址作我的微观数据词汇的命名空间。选择一个在你控制下的域名，这是一个简单的创建全局唯一的标识符的方法。
在这个Person词汇表中，我需要定义一些命名的属性。让我们从这个三个基本属性开始。
• name（您的名字）
• photo（链接到你的图片）
• url（与你相关的网站比如博客或者Google profile）
其中一些特性是URL，其他的纯文本，无论是那一种形式都会将自身与HTML标签的组成形式联系起来。假设你有一个个人资料页面或者“关于”页面。你的名字作为一个标题，一个<h1>元素。你的照片会是一个<img alt=”” />元素，因为你希望人们看到图片。任何的链接到你的资料页面的网址被作为链接，因为你希望人们可以点击他们。在讨论的微观数据模型之前，我们先把全部的个人资料信息被包裹在 元素中以把他与页面的其他元素分离开，像这样
↶ It’s all about me
Mark Pilgrim
![[me smiling]](http://www.example.com/photo.jpg)
weblog
微观数据模型是以名称/值形式一一对应成组的结构。一个微观数据的特性名（就像这个例子中的name，photo，url）始终存在于一个申明的HTML元素中。相应的属性值取至于该元素的DOM。对大多数HTML元素来说,属性值仅仅是该元素的文本内容，但是也有少数例外。
| 元素 | 特性值 |
|---|---|
<meta> |
content 属性 |
|
src属性 |
|
href 属性 |
<object> |
data 属性 |
<time> |
datetime 属性 |
| all other elements | 文本内容 |