话说,之前在一次code view时, 被技术老大指出几个命名比较怪异的地方,发现是语义不够明确,造成大家理解上的误差,看来得重视命名的规范,提高下团队的协作能力,下面是从网上搜集到的一些css命名规范的基础上,自己归纳了下

 
头:header   
容器:container
内容:content
主内容:contentMain   
尾:footer   
导航:nav 
主导航:mainNav  
侧栏:sidebar 
栏目:column   
页面外围控制整体布局宽度:wrapper   
左右中:left right center   
登录条:loginbar   
标志:logo   
广告:banner   
页面主体:main   
热点:hot   
新闻:news 
下载:download   
子导航:subnav   
菜单:menu   
子菜单:submenu   
搜索:search   
友情链接:friendlink   
页脚:footer   
版权:copyright   
滚动:scroll   
内容:content 
标签页:tab 
文章列表:list 
提示信息:msg 
小技巧:tips 
栏目标题:title 
加入:joinus 
指南:guild 
服务:service 
注册:regsiter 
状态态:status 
投票:vote 
合作伙伴:partner 
网站信息:siteInfo
信誉:siteInfoCredits
法律声明:siteInfoLegal
编辑评论:editorReview
最新产品:newRelease
缩略图:screenshot
常见问题:faqs
关键字:keyword
博客:blog
论坛:forum
 
 
注释的写法 
 
/* Footer */ 
内容区 
/* End Footer */ 
 
id的命名 
容器: container 
页头:header 
内容:content/container 
页面主体:main 
页尾:footer 
导航:nav 
侧栏:sidebar 
栏目:column 
页面外围控制整体布局宽度:wrapper 
左右中:left right center 
 
 
id的命名 
 
页面结构 
 
容器: container 
页头:header 
内容:content/container 
页面主体:main 
页尾:footer 
导航:nav 
侧栏:sidebar 
栏目:column 
页面外围控制整体布局宽度:wrapper 
左右中:left right center 
 
导航 
 
导航:nav 
主导航:mainbav 
子导航:subnav 
顶导航:topnav 
边导航:sidebar 
左导航:leftsidebar 
右导航:rightsidebar 
菜单:menu 
子菜单:submenu 
标题: title 
摘要: summary 
 
功能 
标志:logo 
广告:banner 
登陆:login 
登录条:loginbar 
注册:regsiter 
搜索:search 
搜索输入框:searchInput
搜索输出:searchOutput
搜索结果:searchResults
功能区:shop 
标题:title 
加入:joinus 
状态:status 
按钮:btn 
滚动:scroll 
标签页:tab 
文章列表:list 
提示信息:msg 
当前的: current 
小技巧:tips 
图标: icon 
注释:note 
指南:guild 
服务:service 
热点:hot 
新闻:news 
下载:download 
投票:vote 
合作伙伴:partner 
友情链接:link 
版权:copyright 
商标:branding
商标log: brandingLogo
 
class的命名 
 
(1)颜色:使用颜色的名称或者16进制代码,如 
.red { color: red; } 
.f60 { color: #f60; } 
.ff8600 { color: #ff8600; } 
 
(2)字体大小,直接使用"font+字体大小"作为名称,如 
.font12px { font-size: 12px; } 
.font9pt {font-size: 9pt; } 
 
(3)对齐样式,使用对齐目标的英文名称,如 
 
.left { float:left; } 
.bottom { float:bottom; } 
 
(4)标题栏样式,使用"类别+功能"的方式命名,如 
.barnews { } 
.barproduct { } 
 
注意事项 
 
1.一律小写; 
2.尽量用英文; 
3.不加中杠和下划线; 
4.尽量不缩写,除非一看就明白的单词. 
主要的 master.css 
模块 module.css 
基本共用 base.css 
布局,版面 layout.css 
主题 themes.css 
专栏 columns.css 
文字 font.css 
表单 forms.css 
补丁 mend.css 
打印 print.css
 
 
参考:
 
 
posted @ 2012-04-28 12:45 龙猫大叔 阅读(4) 评论(0) 编辑

雪球网(xueqiu.com),是一家股票信息网站,给投资者提供跨市场、跨品种的数据查询、新闻订阅和互动交流服务,目前覆盖A股、港股、美股市场。 不久前,InfoQ中文站通过电子邮件对雪球网的技术团队进行了专访,以下是访谈内容。

InfoQ:请各位简单介绍下自己的技术经历和现在在雪球网承担的技术工作职责?

雪球网:王栋(@蘑菇树),从最早的 ASP 时代开始做电子商务网站,到后来用 Java 做企业系统,然后创业做互联网失败进入外企,后整个中国部门被裁员,最终重新回到国内的创业互联网公司。除了早期在微软平台下的一年,后来的开发就一直集中在 Linux 和 Java 的平台,也有使用过 Ruby On Rails / PHP 的经验,还做过 Android 相关的一些移动产品。现在雪球负责整个技术团队的各项工作。

钟广凯(@gkzhong),以前在网易担任技术组长,主要负责财经相关系统开发工作,曾负责网易微博架构设计,主要专注于高性能和分布式存储方向。在雪球负责系统架构设计和核心代码开发。

孟祥宇(@蒙懵猛孟),毕业之后在一家公司做 Drupal 相关的开发工作,php 和前端都写过一些。2011年初来到雪球做前端工程师,现在负责雪球的前端架构。

InfoQ能否介绍下现在雪球网的技术团队构成?

雪球网:雪球的技术团队不算很大,有十多个人,大概可以按照职责分为前端、后端、架构三种角色。

  • 前端:负责所有和用户有交互的产品,包括 WEB以及手机客户端
  • 后端:负责各种业务 API 的开发,以及服务器端其他系统的开发
  • 架构:负责设计实现关键系统的架构,服务器维护以及开发过程管理,团队建设

InfoQ能否说明一下雪球网的技术和架构发展过程?

雪球网:最早的雪球是以 imeigu.com 的一个子项目存在的,当时没有足够的技术人员,所以采用了外包的方式进行第一个版本的开发,我们当时有一名架构师进行系统的功能设计以及验收。当时的架构是基于 Spring 的一种典型 MVC 架构:展现层使用 JSP,控制层使用 Spring,Model 层使用自己开发的一个基于 SQL 的映射框架,在需要使用缓存的地方采用了内嵌 BDB 的方式。后来因为业务量的增大,我们决定使用多 WEB 实例进行分流,这时就不能再使用内嵌 BDB 的方式了,我们直接选择 Redis 作为我们的中心缓存系统。这时 1.0 版本已经基本完成。

2.0 版本的开发,决定增加对手机客户端的支持,但又不希望单独于 JSP 又做出一套逻辑来,另外正好我们的前端架构师孟祥宇对 Node.js 有一些了解,并且觉得很适合(具体原因参考下边的回答),所以我们决定把展现层单独剥离出来用 Node.js 实现,而后端只提供标准的 API 接口,这样不管是 WEB 还是手机客户端就可以使用同样的接口进行开发。去年11月,2.0 版本上线的时候,我们已经完全实现了这个目标。

目前我们正在进行 3.0 的开发,这个阶段的目标是整合、统一分散的 API,抽象出一些公用性的基础性的模块和系统形成独立的技术产品(中间件)满足未来大访问量、扩展的需要。

InfoQ对于雪球网自己特定的业务,处理起来最大的技术难点是什么?这些难点是怎么克服的?

雪球网:我们的产品是基于 Follow 关系的交流平台,所以用户关注的信息分发一定是最重要的需要处理的问题,既需要即时的分发到关注的用户,也需要考虑到系统容量的限制。因为这几年类似系统的普及,以及大量的社区分享,使得我们实现这样的系统难度大大降低了。

实现上我们使用 Redis 作为我们的缓存服务器,采用以缓存为中心推拉结合的方法来更新用户的 Timeline,具体的做法是:当一个用户发布一条信息时,这条消息进入队列等待被处理,处理时先找到所有关注这个用户的所有用户,然后去看这些用户的缓存中是否存在 Timeline,如果存在就把消息推送过去(Redis 支持 List / Set 元素级别的操作),如果不存在就不推送,等到相应的用户上线的时候通过他关注的好友发送过的消息重新生成 Timeline 并且缓存下来,并且等到一定时间后用户的 Timeline 会过期掉。这样做的好处是不会把所有用户的 Timeline 都放入内存,只会存放一些比较活跃用户的数据有效的降低了内存的使用,同时还保留了推送机制,保证用户能机制收到关注的消息。

对于 Redis 的使用,我们的策略是多主从实例分片。也就是说每一组 Redis 都是一主一从,主服务器不持久化(Redis 早期版本持久化有性能问题),从服务器复制并且进行持久化(方便快速恢复数据),有多组这样的组合来避免一定时期的未来数据量增大后需要重新分片的问题。

InfoQ当初为什么要选择使用Node.js来做前端工作?

雪球网对于熟悉了 JavaScript 的前端工程师们来说,Node.js 最大的好处就是可以用相同的语言进行服务器端编程。这是我们最初选择 Node.js 的一个主要原因。我们的后端是用 Java 做的,前端工程师对 JSP 不熟悉,要多花一些精力去学习,而且在工作的时候和后端耦合度相对高。如果可以用 JavaScript 来渲染页面,前端工程师就可以有更大的空间,后端工程师也不用再和善变的页面打交道了。

使用 Node.js 来渲染前端页面,通过 API 获取后端数据,前后端分离通过标准的API进行交互,让整个系统架构更加清晰。而且因为都是 JavaScript,很多地方的服务器端代码和浏览器内代码甚至可以做到复用。前端想要对页面进行重构优化的时候也不再需要打扰后端工程师,大家都可以更专注于自己的事情。

前端工程师拥有了 Node.js 之后也可以写一些优化工作流程的工具,比如我们现在用 Node.js 搭建了测试环境、代理服务器、静态文件自动部署脚本,让前端团队的开发过程更加自动高效。

另外,Node.js社区发展非常迅速,贡献了很多质量很高的框架模块,比如我们正在使用的 web 框架 express 等。

InfoQ请问为什么仍要选择Java来处理后端的工作?

雪球网:最初选择用 Java 的原因一定是因为团队中的成员的 Java 背景,更熟悉 Java 平台的优点缺点以及最佳实践。现在再反过来找一下优点,可以从以下的方面说明:

  • 熟悉 Java 的工程师很多,我们很容易找到需要的人,很多年以来 Java 都一直位居 TIOBE 的首位
  • Java 平台的性能已经的到多年的验证
  • Java 平台上众多的第三方产品、类库无所不有
  • 基于 JVM 的动态/函数式语言也给了 Java 平台良好的扩展性

现在如果说用 Java / JSP 来开发网站,那显然太过于重量过于繁琐了,肯定不如 RoR / PHP 等动态脚本语言灵活快速。由于我们前端已经完全剥离,而 Java 只作为后端接口/中间件的实现语言,可以提供更好的稳定性、扩展性。

InfoQ雪球网的技术架构中使用了哪些云服务?为什么要选择这些服务?使用效果如何?

雪球网:我们使用过一段时间某个厂商的云托管服务,不过还不是很成熟,完全没法做到 AWS 式的全自主弹性服务,所以最终我们还是选择了自己托管服务器的方式。

图片存储我们现在正在使用又拍云存储(upyun.com)的服务,因为我们的图片量不是特别大,单独去维护一套图片/文件服务器并且还要考虑到 CDN 这对我们这个团队来说代价太高了,upyun 的编程维护接口也还算方便,图片显示速度也不错,解决了我们的一个不小的问题,值得推荐。

InfoQ雪球网目前最需要哪些方面的技术人才?

雪球网:坦白的说我们的团队经验还不是那么丰富,所以很希望各种资深的开发工程师、架构师、数据挖掘工程师加入我们。我们也认为对于工程师来说,好奇心、兴趣、踏实、责任感、主动、具有分享精神都是我们非常期待看到的。

关于雪球财经

雪球财经是一家奉行价值投资理念的互联网金融信息服务公司。公司旗下的投资交流平台雪球 xueqiu.com,给投资者提供跨市场、跨品种的数据查询、新闻订阅和互动交流服务,目前已覆盖A股、港股、美股市场。 雪球财经旗下还拥有服务中国美股投资者的 i美股imeigu.com。雪球财经还发布反映中国概念股整体市场状况的中国概念股指数。

-------------------------

这是InfoQ对我们公司技术团队的专访,原帖地址在:http://www.infoq.com/cn/news/2012/04/interview-xueqiu-using-nodejs 

 

 

posted @ 2012-04-13 19:04 龙猫大叔 阅读(27) 评论(0) 编辑
实现目标:一行内多个行内元素,对其中一个行内元素限定宽度,溢出后剪裁。
 
实现思路:
display:inline-block    指定元素为具有宽高属性的行内元素
max-width:60px         指定最高宽度
white-space:nowrap   规定元素中的文本不折行
overflow:hidden         规定元素溢出后隐藏
text-overflow:ellipsis   规定溢出文本现实省略号。
 
实现代码:
 
max-width: 60px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: inline-block;
 
总结:在ie7+、chrome、Firefox浏览器中,可以使用(公司运营网站不用支持e6,所以,ie6不做兼容了)
 
posted @ 2012-04-13 18:50 龙猫大叔 阅读(7) 评论(0) 编辑
最近,项目中,要实现输入框和文本框默认文字提示的功能,想到了之前使用了一个jquery的插件,jQuery Watermark,它实现了类似placeholder的功能,而且跨浏览器,兼容ie6+。
 
posted @ 2012-04-08 22:40 龙猫大叔 阅读(65) 评论(0) 编辑

今天,在前端团队,针对我自己做的项目,做一个code view,体会如下

  1. 人尽量的少,保证高效率,时间在一个小时左右,集中精力。
  2. 想好自己的话题,可以提前做一个简单的presentation。
  3. 对会议中提到的每一个问题,做个笔记。,
  4. 参与的成员能先看下要评审的代码,多提问,多参与
  5. code view是一个项目保证质量的重要手段,也是团队成员之间互相了解、增进认识的重要机会,需要好好准备,好好参与,好好总结,好好执行。
posted @ 2012-04-01 15:10 龙猫大叔 阅读(8) 评论(0) 编辑
今天在前端团队,要在一个presentation,想起了使用deckJS插件,它使用了html5,需要在chrome等现代浏览器上浏览。
 

http://imakewebthings.com/deck.js/

 

posted @ 2012-03-28 21:36 龙猫大叔 阅读(17) 评论(0) 编辑
摘要: 最近,这段时间,总是很忙碌,原本计划的十点钟,看一个小时的书,经常事情打扰或延误,想起了利用sina app engine,写一个小程序,每天晚上10点,都给自己发一个邮件,提醒自己,要看书啦 简单的php代码:<?php$mail = new SaeMail();$ret = $mail->quickSend( '接受邮件地址' , '这是一个测试哦' , '龙猫大叔,快去看书啦!' , '发送邮件地址' , '密码' , 'smtp.163.com' , 25 ); // 指定smt阅读全文
posted @ 2012-03-18 22:22 龙猫大叔 阅读(11) 评论(0) 编辑
摘要: 最近,项目中用到nodejs,经常在访问后台API服务器时,需要并行发送请求,试过用callback嵌套循环,但访问时间是由几个请求时间的总和,在请求数量很多的时候,时间会很长,经我们技术经理推荐,用到了nodejs的一个模块,eventProxy ,是nodejs社区很活跃的@朴灵开发的,将串行请求改成并行请求,减少响应时间,很明显的提高了效率,实例代码:var EventProxy = require("eventproxy.js").EventProxy;var proxy = new EventProxy();var render = function (templ阅读全文
posted @ 2012-03-17 22:27 龙猫大叔 阅读(45) 评论(0) 编辑
摘要: 今天,项目中master分支将nodejs的版本从0.4升级到了0.6,相应的,我所在开发分支,也需要做下升级,在运行git pull命令时,出现了如下错误“error: The following untracked working tree files would be overwritten by checkout - git”google搜了下,发现在stackoverflow上面,有人也遇到了这种问题,是由于运行的gitpull命令会使一些文件失去git跟踪记录,解决的一个方案,就是将这些文件删除。运行命令:git clean -d -fx "",问题解决了,we阅读全文
posted @ 2012-03-09 17:12 龙猫大叔 阅读(22) 评论(0) 编辑
摘要: 详解如何在ubuntu上安装nodejs折腾了两天晚上,终于把nodejs在unbuntu装好了,此间各种坎坷,记录于此,造福后来人。第一步:安装依赖包1. 安装python 2.6版或者更高(ubuntu默认都已安装,可以在terminal中使用 pyhton -v 命令查看python版本)。2. 安装其他依赖包:sudo apt-get install g++ curl libssl-dev apache2-utils3. 安装git工具:sudo apt-get install git-core第二步:获取源码git clone git://github.com/joyent/node阅读全文
posted @ 2012-03-09 14:28 龙猫大叔 阅读(60) 评论(0) 编辑