bits & serif

April 14, 2013

Workflow in Tmux

Tmux的状态栏,一些小技巧,当然还有主题...

Tmuxinator(https://github.com/aziz/tmuxinator)是个可以减少重复操作的东西,能够让人create and manage tmux sessions easily。如果你每次开发的一连串动作是先打开一个window键入vim,然后又打开另外一个跑server和log的window,还有其它的东西,这些不是很麻烦么。不要再重复了,让tmuxinator来做这些事,DRY!

April 10, 2013

动态CSS语言

Less、SASS、stylus都是动态的CSS语言,给CSS带来了很多的语言特性,比如变量、复用的css片段、带argument变量的mixin、适当的嵌套,当然还有一些其它的特性。不过有些需要注意的地方,写的时候可以稍微考虑下。

April 09, 2013

Google HTML/CSS Style Guide

浏览了一下,之前好像也有看过,摘取自己觉得需要注意的和与自己做的不一样的风格笔记下,使用那些可取的。

General

  • Protocol: script和css中的url使用这种风格url(//www.img.com/img.png)<script src="//abc.com/m.js">,这样对于http和https都会自动识别
  • Indention: css和html使用2个空格的indention(俺准备吧css从4个改成两个
  • 大小写: css的十六进止颜色直和html中的元素名都使用小写,比如color: #00a0d1<span></span>

html相关

  • DTD: 使用<!DOCTYPE html>
  • 图片设置供fallback的alt值,不要将作为内容的图片用css显示
  • 除了特殊意义的字符(比如比较危险的<和&)和一些不可见的字符,不要使用entity reference
  • google建议有些html5定义可以省略的tags是可以省略的(这点很违直觉,从开始接触html就被告知tag都要关闭好,不过仔细想想现在的html模板系统所做的简化,比如haml、jade这种也就不会觉得太激进了
  • 不用再在link和script里面写type了,比如no more type="text/css"(除非你想要使用其它的type
  • 每个block、list、table元素后留一空行,内部都往内缩进
  • tags的attribute用双引号

css相关

  • id和class的命名需要注意,可以在这里看看
  • 避免过度修饰的selector,比如ul#example(这么会有效率问题的,对于css规则浏览器是从后往前过滤的
  • 0后面不要加单位(no more margin: 0px; ,-1到1之间的值不要加开头的0
  • better with no hacks!(可以考虑modernizer
  • css属性的书写顺序: 整体上按字母排列,涉及到vendor-specific时先将其忽略,然后内部再按-moz-、-webkit-的首字母排
  • 一条css规则上应用的每一个selector都从新行开始
  • url()里面不用引号!' is better than "

贴这个连接主要是测试一下模板的外链评论在首页的显示样式。有时候看到好文章可能还希望记下笔记或者评论一番,所以在blog中加入这样一种类型的post,在post的metadata里面添加type: referrefer_url: urlrefer_domain: www.domain.com就可以了。

Anyway,*How To Ask Questions The Smart Way* (中文版)是一篇很早看过的文章(其实也不早,俺真正频繁接触互联网也是大学时候的事了),聪明地去问问题既能使需要被回答的问题快速高效地解决,也能够节约别人的时间。比如我现在碰到的问题也暂时不会是特别尖端的东西,也许我可以自己先好好分析一下,得不出结论的话或许90%以上的问题都在网上会有相应的解决办法,所以我可以googleit(也许找到合适的关键词也是一种技能,但google到合适的答案之后一定自己要搞清楚,这样下次再遇到相同的问题不用机械地重复这个步骤),实在搜不到结果一定要准备好充足的信息再去提问(比如在栈爆网)。

好吧,上面的东西都是拿来添字数的,就是想看看首页显示的样式怎么样。。。

新篇