如何测试 React Hooks ?

No Comments>>

如果你是一个 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 ()
  }
}

继续阅读:如何测试 React Hooks ?

synth — 为 RESTful API 而生的node框架

2 Comments

最近体验了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)][动作名(可选)]

只有方法名等于getputdelete,会要求带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只能修改框架代码,但是总的来说是相当不错,有兴趣的朋友赶紧来体验这个小清新的框架。

继续阅读:synth — 为 RESTful API 而生的node框架

WEBP

2 Comments

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 ,针对不同浏览器提供不同文件。

继续阅读:WEBP

chrome 27+ 的 SCSS调试

No Comments>>

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

继续阅读:chrome 27+ 的 SCSS调试

imgSprite:可用性与性能优化

4 Comments

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

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

继续阅读:imgSprite:可用性与性能优化

帝企鹅满月记

7 Comments

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

我和“TA”的第一次

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

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

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

继续阅读:帝企鹅满月记

阅读设置

书本模式 传统模式

开启 关闭

开启 关闭