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

6 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的正式版进行开发,Chrome在更新到27后,发现SCSS的debug info就怎么也不显示,我刚开始还以为是更新后默认恢复了开启的试验选项,各种把 启用开发者工具实验Support for Sass 开了又关,关了又开,怎么也木有效果,浏览器都重装了一次也没来把调试信息唤回来~~~你跑那里去了啊~~~亲。

花了整整半天,终于找到这个的解决办法:http://snugug.com/musings/debugging-sass-source-maps
原来Chrome27+只支持Source Maps,你说咋也不向下兼容一下,怎么解决呢:

 

怎么解决呢?

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

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

imgSprite:可用性与性能优化

5 Comments

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

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

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

帝企鹅满月记

12 Comments

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

我和“TA”的第一次

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

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

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

继续阅读:帝企鹅满月记

微观数据(Microdata)的数据模型

2 Comments

本文是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

  1.  
  2. <section>
  3. <h1>Mark Pilgrim</h1>
  4.  
  5. <img src="http://www.example.com/photo.jpg" alt="[me smiling]"/>
  6.  
  7. <a href="http://diveintomark.org/">weblog</a>
  8. </section>
  9.  

微观数据模型是以名称/值形式一一对应成组的结构。一个微观数据的特性名(就像这个例子中的name,photo,url)始终存在于一个申明的HTML元素中。相应的属性值取至于该元素的DOM。对大多数HTML元素来说,属性值仅仅是该元素的文本内容,但是也有少数例外。

微观特性值来至哪里
元素 特性值
<meta> content 属性
  • <audio>
  • <embed>
  • <iframe>
  • <img>
  • <source>
  • <video>
src属性
  • <a>
  • <area>
  • <link>
href 属性
<object> data 属性
<time> datetime 属性
all other elements 文本内容

继续阅读:微观数据(Microdata)的数据模型

<<PREV NEXT>>
/24
/24
目录
阅读设置

书本模式 传统模式

开启 关闭

开启 关闭