前端开发经验札记

最后更新:2014年5月1日1:57:33

作者: 徐迅 (清风迅来 XX)

真正从事Web前端开发有一年多了,而接触前端最早可以追溯至小学时候电脑课上的网页制作,那个时候还在使用Front Page(我才不会说那个时候自己设计的网页巨丑…);后来一直到大学才“重拾旧业”:大二曾帮老师做过课程介绍网站,使用的仍然是DreamWeaver,并开始搭建 xuxun.me ;大三拥抱notepad++和zen-coding,开始折腾JavaEE的项目;大四毕业设计又回归PHP,偶尔接触了Python;工作以后爱上sublime text 2、less和coffee script,在C#坑中渐行渐远。

希望这篇文章能一直更新下去吧.

加油XX,奔跑在大前端之路上吧!

一、前端语言基础

(一)HTML

     1 标签语义化:使用合适标签,少使用无语义标签
     2 使用 <!DOCTYPE html> 既可以向前兼容,又体现了你网站的高大上!
     3

(二)CSS

     1 选择一款合适的CSS预处理语言(个人比较喜欢Less),大大提升CSS编写效率
     2 通用的样式提取成 .class 或者 less 中的 mixin() {} 更佳
     3 多使用限定度高的选择器, 例如 > + , 尽量避免后代选择器过度使用
     4 多用组合少用继承,减少耦合
     5 选择器权重222原则(XX自创……): 选择器权重不超过222,即最多2个id,2个class和2个tag……
     6 CSS伪类是个神器,例如使用:hover、:after等伪类可以替代JS实现不少效果

(三)JavaScript

     1 JS我是渣.

二、前端框架基础

(一) Bootstrap

     1 Bootstrap 的less 代码质量好,价值高,推荐学习

(二)JQuery Mobile

     1 深坑,慎入

三、前端杂七杂八

     1 适当了解浏览器的渲染机制,避免代码性能过低
     2 替换 .class 优于 替换 <xx style=”xx:xx;” ></xx>
     3 图片记得压缩, jpegtran 是个不错的jpg图片无损压缩工具

四、前端各种坑爹

1 IE 7 不支持 console.log ,因为 IE7 根本没有 console ,所以当你使用 IE 7 运行有 console.log 的页面你会悲剧..
2

 

徐迅 / 清风迅来

XX   / Dalston Xu

Google

解决Swiper中translate3d导致字体模糊

2014年4月11日0:34:17

今天公司的设计师sama跟我说,官网旧机回收首页上有个UI问题,说是用户晒单那部分的字体模糊,如下图所示:

translate3d导致字体模糊
translate3d导致字体模糊

(PS:以上原先是#666的字体颜色,为了使效果更明显于是我改成#000,原先在浏览器上比这个更模糊的画面木有截取下来= =)

嗯,这是使用了 swiper 插件,导致了文字出现了模糊。(不过在firefox、IE中倒是好的!)

于是乎我就开始找问题原因之所在咯,第一个想到是不是字号大小不一致,结果我查看了下一切都正常都是12px,特地调大还是会有模糊。

接着我想到的就是去swiper的官网上看看它的API上有木有相关的方法。

结果还真有一个:手册上有一个参数名是: useCSS3Transforms ,默认为true的,改成 false即可。

但是如果真的这么快就可以解决这个问题的话,我就用不着大费周折写这篇文章了吧……

所以结果是虽然修复了字体模糊问题,但是带来了另一个大问题.. chrome下每次滚动竟然4个一起滚了(原先每次移动1个项的)… orz ..!

于是没办法,只好在保持使用 css3 transform 的 translate3d 的情况下,继续寻找解决方案了。

在stackoverflow上,我也找到相关技术的话题讨论: http://stackoverflow.com/questions/8024061/webkit-blurry-text-with-css-scale-translate3d

网上有说是使用:     -webkit-font-smoothing: subpixel-antialiased; 这个的

也有说使用  -webkit-perspective: 1000; 这个的…

当然结果也都是木有用……

我甚至在 github 上面swiper官方的issue中找到了相关问题: https://github.com/nolimits4web/Swiper/issues/45 但问题是作者似乎木有给出有效解决方案=-=

倒是解释了下为何使用 translate3d,说是这样可以强制浏览器使用GPU来渲染,可以大大提高页面的性能,尤其是移动端(但会在一定程度上降低质量…正如API文档中所写的)

好吧,最终,又是经由API文档中另外一个参数的启发:

 roundLengths
Set to true and Swiper will round width/height values, may be useful if you have rounding errors (like 833.48px width) in responsive swiper.

于是就想是不是因为外围容器它的 translate3d 属性有小数的原因。

然后我就去看了下,结果还真是如此! 哦也!

我发现当 translate3d 属性中只要出现小数,那么容器中的文字就会有一定程度的模糊,当该属性为 *.5 时,模糊的现象最严重。

translate3d的值出现小数时会导致文字模糊
translate3d的值出现小数时会导致文字模糊

当这个值为整数的时候就木有模糊现象了!

于是就决定更新容器宽度,使之能被4整除!

这样就解决该问题了…

translate3d的值改为整数以后文字就不模糊了
translate3d的值改为整数以后文字就不模糊了

SO,现在看起来舒服多了吧~

另外: IE11 下,在 dulplicate的slide中,用户的微博头像会错位… 这个问题有点坑。。倒是IE10等都是好的..

XuXun 清风迅来

2014年4月11日0:09:01

【MDN翻译】响应式Web设计

最后更新:2014年4月3日1:32:48

Contributor:清风迅来

原文链接:https://developer.mozilla.org/en-US/docs/Web_Development/Responsive_Web_design

 

随着越来越多的用户使用移动设备来浏览网站和应用,Web设计人员和开发人员需要确保他们的作品在移动设备上同样能正常运作,并且看上去和在传统台式电脑上一样好。 著名设计师 Luke Wroblewski 主张 “移动优先” 设计而不是为桌面端设计完之后再考虑移动端。 无论您将移动设备作为主要目标来设计或作为额外目标,您都可以借助强大的CSS来保证同样的内容从手机到宽屏高分辨率显示器上,实现跨全部硬件平台访问和适应。

这种方法被称为“响应式 Web 设计”。它的一些策略包括::

  • 流式布局: 按照浏览器视窗的百分比来设定所有容器的宽度,从而使容器在浏览器窗口大小变化时自动缩放。
  • 媒体查询: 基于显示设备的物理特性(例如:尺寸、分辨率、宽高比、颜色位深等)来调用不同的样式表。
  • 流式图片: 设置图像所占宽度至多为设备的最大宽度。

Firefox Marketplace 的最低需求

如果您提交一个应用到 Firefox OS 或 Firefox for Android 上的Firefox Marketplace,那么这个应用必须响应不同的手机屏幕尺寸和屏幕像素密度。请记住屏幕最小尺寸为 320 * 480 像素。另一个常见的错误是未识别屏幕像素密度,以至于没有相应地调整字体大小和触摸目标。欲了解更多信息, 请参阅 Marketplace 审查准则

相关资源

概述

技术文档

工具

样例

译注:这篇响应式设计的概述简单地介绍了一些响应式策略,又疑似顺便为Firefox Marketplace 做了个小广告..
之后提及的一些资料,其中的pointer media query 似乎有点意思,这个是根据不同的物理指针(pointer)的精度作为media query的查询条件,比方说鼠标就是fine,表示精度很高,普通的触屏设备比如pad啊mobile啊之类就是coarse,不具备任何指针的就是none(似乎很少见诶)……
不过呢,好像这货CSS 4 才支持哦….

【MDN翻译】Web 标准

最后更新:2014年4月2日0:32:24
Contributor:清风迅来(XuXun)
Web标准 Web标准经过精心设计,旨在让广大用户享有最佳的上网体验,同时也确保在网上发布的文件经久不衰。由这些标准设计、构建的网站简化并降低了开发成本,同时又可以让更多人访问,并适应更多的上网设备。随着传统桌面浏览器的进化、新型互联网设备进入市场,经由这些准则开发的网站将继续正常运作。

参考文章

将应用从IE浏览器迁移到Mozilla浏览器
是否在迁移针对IE浏览器定制的应用到Mozilla浏览器时遇到了麻烦?本文涵盖了迁移应用到开源的基于Mozilla的浏览器的过程中相关的常见问题。
在您的网页中应用Web标准
本文概述了如何升级你的网页从而使之遵循 W3C Web标准。
为什么选择符合标准而不是私有实现?
应用通常是跨多个开发小组设计的,因此在开发过程中需要一个通用标准。
Web标准的商业价值
本文探讨了遵守Web标准、丢弃私有标记和技术是如何帮助一家公司实现其商业目标的。

查看全部…

社区

  • 浏览 Mozilla 论坛…

 

工具

查看全部…

Examples

CSS, DHTML, HTML, Web 开发, XHTML, XML

The Web Standards Project

 

后注:

第一次尝试在MDN上贡献翻译文,自己英文也很久没啃了.. 翻译技巧啥的估计也都还给老师了,这篇小短文就花了我快1个多小时时间呐。。好拙计。。
总之自己好好努力…好好学习天天向上吧~

清风迅来 (XuXun)
Dalston Xu

2014年4月2日0:37:31