Gyrate's blog | Just for simple life

Mar 4th

一路向南

1 条评论 152 次查看南沙, 骑行继续阅读

话说上周在阿野家附近的单车俱乐部花重金招购了坐骑YukonPro，这周末就很激动地要把它骑回南沙。全程约65公里，下午一点半从黄埔区政府出发六点半到达南沙资讯科技园，虽然时速13公里算不上什么光彩的数字，不过至少活着到达目的地，还是十分欣慰的。

与上次广州到珠海的惨烈之旅相比，这一路的骑行还算顺风顺水。首先是天气不错，全程阴天有微风，能见度高，水分散失不严重，中途我们才补给了一次水和一次食物；接着是感谢靠谱的google地图指引我们这些路痴前行，虽然在亭角疏忽大意错行了一小段路，但我们很快就发现了问题并及时调整过来；第三个主要因素当然是装备，有给力的坐骑在手，行车轻盈如飞，很是欣爽。

此次骑行途中，我骤然萌生了许多关于路途与方向的感慨。比如人生不过尔尔，独自行路孤单，谁不盼望有朋友一路陪伴；一旦迷失了方向，失去了对自己的准确定位，对前途会很自然地感到困惑迷茫，失去信心；坚强的精神力量都是在绝境中锻造出来的，有目标有追求才能战神逆境，从而超越自我。

当然，这些道理谁都懂，但不见得每个人都能做到。知与行是两回事，每个人心中都有自己的太阳，懂得生活的人才会跨出脚步去追逐那个太阳。2012年的春天正在颓去寒冬的裹藏显露希望的本质，一年之计在于春，希望我的朋友们制定好自己的方向和计划，在这已经开启的起跑路线上绽放精彩，抒写若干年后的故事。与其给传奇以岁月，不如给岁月以传奇。

1 条评论 152 次查看南沙, 骑行继续阅读

Feb 9th

跨iframe的DOM操作

评论暂缺 224 次查看 iframe, 跨域, 顶部窗口继续阅读

今天在调试一个项目系统的浏览器兼容性的时候，发现[系统提示窗]功能在Chrome和IE6下死活不肯正常执行。其工作原理是这样的，在大框架中主体区域其实是个iframe(如图frameUI1所示)，点击iframe内[返回]按钮时，在iframe内生成遮罩层和弹出窗，然后分别将其append到frame顶部窗口——即大框架中，并对弹出窗内所有交互组件(按钮等)进行鼠标事件监听。

图frameUI1: iframe和组件结构

图frameUI2: 弹出窗口示意图

在对Chrome和IE6做单独调试时发现，如果将iframe所指向页面单独打开，按上文的步骤执行是完全没有问题的，看来问题出在iframe对顶部窗口(也有可能是父窗口)进行的DOM操作上。二话不说先看看Chrome的出错报告。

Unsafe JavaScript attempt to access frame with URL BigLayout.html from frame with URL iframe.html. Domains, protocols and ports must match.

意思是说，iframe.html页面企图用javascript对BigLayout.html(其父页面)进行操作不符合安全机制，域名、协议、接口必须匹配。从安全角度来说这么做无可厚非，可是Chrome在处理这个问题方式上貌似有点脑残，我所有文件都是本地文件，你却用跨域访问的标准做把关，很明显执行不了。网上搜了一下发现大家普遍遇到过这个问题，只要把文件部署到服务器上，Chrome的异常就自行解决了。

IE6的错误提示相当简单，直接报哪一行哪个字符开始产生错误，错误描述是“不支持该属性或方法”，经过调试发现其出错原因大致相同，IE6不允许子iframe随意篡改父窗口，即如果在子窗口iframe里创建了一个DOM元素后将其插入到父窗口或顶部窗口，IE6必报错。网上求助了一把发现了解决之道——在iframe上执行js代码让父窗口创建一个DOM元素，之后iframe就可以对该DOM元素为所欲为，这种情况IE6是默许的。

var _win=this.top.document.createElement("div");//顶部窗口创建DOM
//var _win=document.createElement("div");//如果换成该句，IE6则会报错
this.top.document.body.appendChild(_win);

评论暂缺 224 次查看 iframe, 跨域, 顶部窗口继续阅读

Jan 18th

项目前端开发阶段性总结

评论暂缺 197 次查看前端开发, 正则式继续阅读

近一个月的工作是协助开发团队进行一卡通管理系统开发，我从原型设计跟进到页面重构，整个过程运用到了界面元素组件化、骨架和风格分离等思想，使得前端资源变得灵活易用，目的在于实现最大程度的代码复用性。

点击进入系统组件demo页

在进行css代码规划时，有意识地将css文件进行分离:把reset代码和可公用的类定义如.fl{float:left;}放在base.css；将系统主题和组件的框架代码放在default.css文件中；将设计界面风格的css代码单独分离到skin${N}.css文件。

将css风格代码分离的好处是在不影响界面框架的情况下将界面的整体风格置换，其分离过程是这样的：1.在default.css里编写所有组件css，此时框架代码和风格代码是在一起的；2.完成基础组件编写后，将default.css中涉及颜色和背景等风格元素的css代码（标准检出对象时边框border、文字颜色color、背景background和所有css3新增属性）检出，放置到skin${N}.css文件。

在完成分离过程1的时候，default.css文件已经达到成百上千行的规模，如果仅仅依靠人眼识别进行检出分离，那代价太大了，首先耗时间，其次出错率高。于是我选择了使用正则表达式进行css代码的分离，首先将css文件全部代码格式化以降低正则式的复杂度，接着查找出以[border][color][background]关键词为开头的css代码行将其替换为空字符串，然后将空的样式定义（比如.l_in_err {}）替换为空字符，保留下来的css文件作为框架代码default.css；用同样的方法将非[border][color][background]关键词为开头的css代码清除，保留下来的css便作为风格代码skin${N}.css。

(^\s*b.+;$)|(^\s*color.+;$)
//匹配任何*（0或0以上）个空格开头，紧接b或c，并以;结尾的字符串
//如border，background

^..+\s\{\n\}
//匹配类似这种空样式
//.l_in_err {
//}

该项目的全部页面由系统开发人员（程序员）在前端人员的培训下，自动调用组件库进行创建，开发人员们只需调用组件和进行反馈，不直接对css文件进行修改，避免不规范的css代码导致各种浏览器兼容问题的出现。

前端开发一期工作告一段落，接下来的计划是新增组件、Js扩展原有组件功能、为系统常用功能如表单验证等编写Js库。

评论暂缺 197 次查看前端开发, 正则式继续阅读

Jan 9th

用spritecow化烦为简

评论暂缺 223 次查看 css, sprite 继续阅读

做前端的如果不知道啥是雪碧那肯定凹凸曼了，雪碧图的目的是尽量减少HTTP请求的次数已达到更好的web体验。将网页图片进行雪碧的最大缺点就是坐标定位，这是一项耗时间又没啥成就感的工作，幸而继CSS Gaga后又有外国人研究出新的雪碧工具。

Spritecow将JavaScript，Canvas和一些数学逻辑算法融合在一起，目前功能比较简单，但优点是轻量，无安装，何时何地都可以用，为用户提供了一个好用的CSS生成工具。

评论暂缺 223 次查看 css, sprite 继续阅读

Dec 20th

为我们的团队招聘另一名UI设计师

评论暂缺 305 次查看 UI设计, 招聘继续阅读

原文地址：Hiring: We’re looking for another UI designer to join our team Jason F. May 24

设计理念
我们坚信一个伟大的软件公司离不开伟大的设计。我们崇尚清晰流畅的用户体验，文字的使用恰到好处，代码组织良好且干净整洁，关注细节，令界面交互保持完美。你也必须有相同的信仰。

你将做什么
37signals的设计师通常须应对不同的工作内容。你可能要为Basecamp的一个现有功能提色，或者为Highrise的一个全新功能做UI设计；你可能对Backpack做一个改造，或者从根本上重新构思Campfire的一些UI设计；你有机会参与到一个全新产品或者一个新营销网站的设计；你也可能会被要求做出一些前所未有过的东西。

除了拥有绝佳的视觉品味和才能，你所编写HTML/CSS代码结构必须合理；掌握Javascript或Rail技能者优先，但这不是必须的；要求具备优秀的写作技能。

创造行业性产品
在37signals，你将参与开发能够为人们解决日常工作的产品，你的付出会影响百万用户。你将和行业中的部分最优秀的设计师、程序员、开发者和客服协同工作。虽然我们的团队已经站在行业顶端，但我们希望因为你的存在，它将变得更加卓越。

解决实际问题
我们制定项目通常是为了解决实际问题。作为37signal的设计师，你的工作就是让我们的用户的问题能够得到解决，也只有这样，你的设计才会被我们所肯定。

扮演领导者的角色
在37signals，设计师们主导团队。每个开发团队由三个人组成——两名开发工程师和一名设计。设计师兼任项目经理。除了设计界面/元素，你还必须让你的团队保持专注，时刻提醒团队的成员，什么才是最重要的。

什么是我们所关注的
我们关注的不是某类设计风格，我们看重的是设计理念和品位层次。仅仅简单是不够的——条理清晰才是重点。想象一下用户在屏幕上怎么理解你的东西，他们想要什么，什么容易触动他们，什么会使他们感到挫败。你应该知道，合理的设计将使一切变得与众不同。

你热衷于寻找更好的方法去解决问题，即使是在一个项目中。为了让一个更好的想法或实施得到发挥，你不惜砍掉一些不必要的东西。37signals的项目以编写代码为开始，项目原型会不断做修改，我们从中获得反馈并调整我们的开发。鉴于在代码方面需要比较扎实的功底，我们要求你的设计/代码必须能灵活应对各种反馈。

你也要热爱文案
你懂的，文案其实也是一种设计。文案的文字必须和像素一样精确。糟糕的文字只会让优秀的视觉设计变得跟它一样糟糕，因此，你必须像关注产品中文字的视觉设计一样关注每一句话的用法。

芝加哥，或任何地方
我们公开招聘最优秀的人才，没有任何地域限制。如果你在芝加哥最好（我们会在办公室里为你提供开放性的工作台），即使不在这边也无所谓——我们公司有超过半数的员工分布在世界各地。当然，如果你有意愿搬来芝加哥，我们也欢迎。

如何应聘
发送你的作品，或者任何可以让你看起来更加犀利的东西到 jointheteam@37signals.com，邮件主题要求包含[UI设计]。

你从哪个学校毕业，或者你还没毕业，都不要紧；这是你的第一份或者第五份工作也不要紧。我们所看重的，是你的工作能力是否优秀，你如何提升自己，还有你所接触的任何事物。

如果我们觉得你可能合适我们的岗位，我们将会通知你进行下一步应聘流程。

应聘时限
本岗位招聘截止到2011年6月6日，我们期待你的来信。