wǒ_is神仙

jQuery Transition

Tags: CSS3, Transition, Transform, jQuery, Underscore

没错,这又是一款jQuery插件~

先来看看它的语法:

.transition( properties [, duration] [, easing] [, delay] [, complete] )
// Or
.transition( properties, options )

使用方法跟jQuery的.animate()是差不多的,很容易上手吧~源码在GitHub上,点右上角前往~

本插件使用了Underscore的一些function,所以,如果你的项目中已经使用了它,那么请下载:

否则:

温馨提示:

  1. 默认动画是放进列队的,但可以通过传入参数queue: false取消之;
  2. 动画是可以通过.stop()方法使之停止的,具体看jQuery的文档
  3. complete回调内的this是指向当前DOM的;
  4. 可以使用全局方法$.fx.off = true关掉所有动画;
  5. 没有对CSS3 Transition的steps做fallback处理;
  6. fallback只是说在不支持CSS3 Transition的浏览器中自动降级使用jQuery的.animate(),如果它不支持的话,比如CSS3 Transform、Color等,那还是没有动画效果的;
  7. 想知道CSS3 Transition支持哪些CSS属性,看这里;想知道.animate()支持哪些CSS属性,看这里

没什么要说的了,有问题请留言,下面直接上Demo。

jQuery Utilities vs Underscore

Tags: jQuery, Underscore

抛开其他因素,只简单比较下各方法本身。能力有限,可能会有偏颇,望不吝赐教~

jQuery版本是1.7.2,Underscore版本是1.3.1。

$.each() vs _.each()

两者都是用于遍历,使用方法也基本一样,不同之处是index和value的顺序不一样:
jQuery:$.each(list, function(index, value) {})
Underscore:_.each(list, function(value, index) {})

后者优先使用了ECMAScript 5的原生forEach方法,性能上也就优于前者。

$.extend() vs _.extend()

功能类似,但前者支持深度合并,看例子:

var obj1 = {
  name: 'wǒ_is神仙',
  site: {
    blog: 'http://MrZhang.me',
    engine: 'GitHub + Octopress'
  }
},
obj2 = {
  site: {
    weibo: 'http://weibo.com/jsw0528'
  }
};

console.log( _.extend({}, obj1, obj2) );
//=> { name: 'wǒ_is神仙', site: { weibo: 'http://weibo.com/jsw0528' } }

console.log( $.extend({}, obj1, obj2) );
//=> { name: 'wǒ_is神仙', site: { weibo: 'http://weibo.com/jsw0528' } }

// 深度合并
console.log( $.extend(true, {}, obj1, obj2) );
//=> { name: 'wǒ_is神仙', site: { blog: 'http://MrZhang.me', engine: 'GitHub + Octopress', weibo: 'http://weibo.com/jsw0528' } }

Blog = GitHub + Octopress

Tags: GitHub, Octopress

最近有些同学让我分享我的博客主题,其实主题早已经放在GitHub上了。下面索性基于我Fork的Octopress,讲一下如何使用Octopress在GitHub上建博客。

先来看看我的版本和原始版本的主要不同之处:

2012-04-13: 允许单篇文章独立引用CSS和JS,具体文件内容变动见commit 0aa27bb05fcdbf
  1. .rvmrc
    改成使用我机子上装的Ruby版本(1.9.3),Octopress最低要求是1.9.2。
  2. Gemfile
    把源改成ruby.taobao.org,去掉部分gem的版本号限制,咱都用最新的。
  3. Rakefile
    用haml替换markdown(这个根据自己喜好来,只要是被支持的),时间改成东八区的,降低主题对custom目录的依赖。
  4. _config.yml
    这里都是一些定制化的配置信息,比如日期格式、永久链接、新浪微博等。
  5. plugins/sh_js.rb
    [新增] 代码高亮插件,具体介绍看:Using SHJS for Jekyll
  6. plugins/tag_generator.rb
    [新增] 其实Jekyll是支持Tag的,只不过Octopress目前没有官方插件支持,所以我自己搞了个,支持中文。
  7. .themes/blog/
    [新增] 这个就是我博客的主题了。

OK,现在让我们正式开始。

寻找靠谱前端

Tags: 招聘, F2E

职位名称:前端工程师

工作内容:负责B/S应用项目的前端实现及性能优化。

任职资格:

  1. 熟练编写结构良好、各浏览器兼容的CSS,语义化、符合W3C标准的HTML;
  2. 能够借助jQuery实现页面交互效果;
  3. 最好了解一门后端语言,如C#;
  4. 积极进取,关注前端动态,愿意并渴望通过各种途径提升自己的代码修养;
  5. 逻辑分析能力强,有良好的团队合作精神。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

职位名称:高级前端工程师

工作内容:

  1. 负责 医道网 的前端代码实现及性能优化。
  2. 新技术的研究和创新。

任职资格:

  1. 熟练编写结构良好、各浏览器兼容的CSS,语义化、符合W3C标准的HTML;
  2. 熟练编写高性能的JavaScript,能够借助优秀工具(如jQuery、Underscore、SeaJS等)提高开发效率;
  3. 了解HTML5和CSS3,能够并乐于把它们优雅降级地运用在实际项目中;
  4. 注重用户体验,喜欢不断地重构,对可访问性有所了解;
  5. 积极进取,关注前端动态,愿意并渴望通过各种途径提升自己的代码修养;
  6. 逻辑分析能力强,有良好的团队合作精神。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

如果遇到个会写代码的妹纸就赶紧娶了吧。
1、长年专业的训练让她们能够理性思考,相信没有事件触发,暴怒的代码是不会运行的;
2、她总是在思考自己在哪里出错了。遇事先从自己找原因;
3、她坚信,世界是由懒人推进的,正因为有偷懒的想法,人类的科技才会发展。(via @管轶栋
你见过在fix bug跑通test case后会摆动左右两只剪刀手喊yeah的萝莉码婆吗?
This is it。。。。
你想吃码婆豆腐吗?
Join eDoctor。。。。(via @有个梨UGlee

http://weibo.com/xy4mm

有兴趣的同学请发简历或技术博客地址到邮箱:i@mrzhang.me,也可至新浪微博与我交流(地址见左上角)。

Using SHJS for Jekyll

Tags: Octopress, Plugin, Ruby

我不想用Octopress自带的代码高亮插件,所以自己写了个插件,借助 SHJS 实现代码高亮。由于Haml的缩进问题,不得以把每行代码都用code标签包了下~

使用方法:{% sh [:lang] %} Your Codes Here {% endsh %}[:lang]可以省略,默认是:js

插件代码如下:

# To highlight source code in an HTML document using SHJS for Jekyll
# (c) wǒ_is神仙 | http://MrZhang.me | MIT Licensed.

require "cgi"

module Jekyll

  class SHJS < Liquid::Block

    def initialize(tag_name, markup, tokens)
      @lang = "js"
      if markup =~ /\s*:(\w+)/i
        @lang = $1
      end
      @lang = format_lang @lang
      super
    end

    def render(context)
      source = "<pre class='sh_#{ @lang }'>"
      code = CGI.escapeHTML super.lstrip.rstrip
      code.lines.each do |line|
        source += "<code>#{ line }</code>"
      end
      source += "</pre>"
    end

    def format_lang(lang)
      return "javascript" if lang == "js"
      return "ruby" if lang == "ru"
      lang
    end

  end

end

Liquid::Template.register_tag("sh", Jekyll::SHJS)

Hello World

停博两年多了,打算节后重新拾起。

WP什么的弱爆了,现在直接上Octopress。挂GitHub上还免费,哈哈~其实这才是关键,哈哈~而且这里有我熟悉的Haml、Scss、Ruby。。。

主题还没完工,明天没时间的话只能节后再搞了~

后天回老家~大家春节快乐~