糖伴西红柿

糖伴西红柿

四体不勤 五谷不分 厌恶争执 不善言说 文不能测字 武不能防身 instagram: <a href="http://instagram.com/gaowhen">@gaowhen</a> twitter: <a href="http://twitter.com/gaowhen">@gaowhen</a>

JS the Hardcore: 执行上下文(Execution Context)

先看个例子: console.log(a) console.log(foo()) var a = 'hello world' function foo() { console.log('foo') } 估计大部分人早就对这种问题了如指掌了,输出结果也是脱口而出: undefined 'foo' 请解释一下原因? 这不就是常说的 Hoisting 吗? 代码在执行的时候,其实是这个样子的: function foo() { console.log('foo') } var a console.log(a) console.log(foo()) a = 'hello world' 是的,这样解释也可以,但是不够准确。如果仅仅理解到这个层面,而不把这里面涉及到的「执行上下文」(Execution Context,

jslint to eslint

因为最近开始在项目里面使用 es2015,所以之前代码验证 gulp-lint 中使用的 jslint 已经不符合要求了。 于是组里的程序员鼓励师兼前端工程师小姑娘 丹丹 就把 jslint 替换成了 eslint。 以下是她的一些记录。 eslint 是为 javascript 和 jsx而生的可插拔式代码检查工具。 0. eslint 的哲学 1 在 eslint 中,一切都是可插拔的,规则之间相互独立 2 每条规则非零为开启,零为关闭 3 eslint 不倾向于任何一种代码风格,默认关闭所有设定,被捆绑的规则都是具有普遍性的 1 如何使用? 1.1 方法一:直接使用 eslint 的 npm 包 文档参考 1 npm install

gulp

\[Task Master\] gulp-lint

初衷 从事前端开发这个职业几年之后,我已经彻底从一个完美主义者变成实用主义者。但是对于代码风格的要求,却越来越强烈。 在一个「用户体验」已经用滥的圈子,也有很多 web 开发者或真心或虚伪得说要一个「有非常好的用户体验」的产品。但是你看看他们的代码,可读性极差都不算什么严重问题,有的甚至像几个不同性格的分身写出来的。在我看来,写代码也是在做「产品」,只不过不同于直接面向用户的产品。但是,如果这点意识都没有,我很难相信他们能做出什么体验良好的产品来。 在我看来,良好的代码风格就像好的木工做壁橱时,放在靠墙那侧的那块好板子。同时,我不相信人可以一直对自己有高要求,因为我自己有时候也很懈怠,总想着「以后再说」,可是 “Wait” has almost always meant ‘Never’。我也不相信所有人都会追求好的事物。所以,我更相信工具。 实现 首先需要创建 .git/hooks/pre-commit 并且使用 chmod +x 确保它是可执行的。

Chrome

Chrome extension 升级到 manifest version 2 的问题

最近在折腾一个 chrome extension, 虽然之前也折腾过,但是了解很浅,这次就顺带系统地了解了下。开始的时候一切都很顺利,对一个前端工程师来说,学习的成本并不是很高。 问题 在某天 chrome 提示升级的时候,就果断升级了(当前版本为 Version 21.0.1180.57)。升级之后,发现在 extensions 页面,有个提示: There were warnings when trying to install this extension: Support for manifest version 1 is being phased out. Please upgrade to version 2. 一开始并没有想到这个版本号的升级会有多大问题,因为至少看起来并没有特别多的改动。

jquery

jQuery data() tmpl() 的一个小坑

工作中经常用 jQuery 的 data() 和 tmpl() 搭配使用,很方便。不过最近遇到一个很隐蔽的问题。 使用 data() 和 tmpl() 时,类似于 6.0 这种小数点后为零的数据都是显示为 6 这种类型的。jQuery 用了也有挺长一段时间了,这个问题之前还真得从来没有注意到。 一开始仅仅怀疑是 jQuery 的 data() 方法对字符串做了处理。测试了一下确实如此。后来发现不仅是 data() 方法, jQuery template 的 tmpl() 对字符串同样也做了处理。 看 demo ,一个是取的 #bd 上事先存好的 data-*,一个是直接给 tmpl() 传入假数据。 ![](//www.qianduan.net/img/

HTML5

HTML5 中 div section article 的区别

刚刚开始接触 HTML5 时,对它的标签很不适应,甚至一度有点反感。尤其是对 div、section、article 这几个标签,实在弄不清楚应该使用在什么场合下。 div HTML Spec: “The div element has no special meaning at all.” 这个标签是我们见得最多、用得最多的一个标签。本身没有任何语义,用作布局以及样式化或脚本的钩子(hook)。 section HTML Spec: “The section element represents a generic section of a document or application. A section, in this context, is a

css

CSS Sprites:鱼翅还是三鹿?

原文:CSS Sprites: Useful Technique, or Potential Nuisance? 译文:CSS Sprites:鱼翅还是三鹿? 无处不在的 CSS sptites - 为数不多的几个可以直接跳过”流行”这个过程,而可以马上并且牢牢地跻身于最佳 CSS 实践之中的几个技术之一。虽然它真正流行是在 A List Apart 解释并认可这个技术之后,但是早在 2003 年 7 月份,Peter Stanicek 就已经开始谈论它了。 目前大多数的开发人员对这个技术都有相当地掌握,也有很多关于它的教程和文章。几乎所有的文章中都宣称设计师和开发人员都应该使用 CSS sprite 来减少 HTTP 请求数,并且节省一些流量。这个技术被大量网站使用,包括使用了大型 sprite 的 Amazon . 但是这些被广泛热议的好处真的是值得的吗?设计师们是否在没有全面考虑到所有情况的情况下,

css

在 Mozilla UI 中书写高效率 CSS

原文地址:Writing Efficient CSS for use in the Mozilla UI 以下文档描述了应用在 Mozilla UI 中优化 CSS 文件的规则。第一部分是对于 Mozilla 样式系统分类规则的一般性讨论。在了解这个系统的基础上,后续部分包含了一些指南,书写可以利用这个样式系统实践优点的样式的指南。 样式系统如何分类规则 样式系统把规则分为四大类。理解这些类是很重要的,因为对于规则的匹配来说他们是首先要考虑的。之后的段落中会使用“主选择符”这个说法。主选择符是指选择符最右边的部分(最终要匹配的那个元素,而不是它的祖先元素)。例如,在以下规则中: a img, div > p, h1 + [title] {} 主选择符是 “img”, “p”, 和 “[title]”。 ID 规则 ID 选择符作为主选择符的规则。

css

清除浮动新说

起源: .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-table; } /* Hides from IE-mac */ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */ 说明: *对大多数符合标准的浏览器应用第一个声明块,目的是创建一个隐形的 内容为空的块来为目标元素清除浮动。 *第二条为clearfix应用 inline-table 显示属性,仅仅针对IE/Mac。 *利用 * / 对 IE/Mac 隐藏一些规则: height:1% 用来触发

css

Firefox Bug: inline/inline-block的间隙

首先要说明的是,这个标题有点标题党的意思,这个 bug 也存在于 IE8 下,在 IE6 和 IE7 下正常。之前写过两篇关于 IE bug 的文章,这里特意用了 Firefox bug 作为标题,是为了给自己找点心里安慰,省得总是埋怨 IE :)。关于 inline-block,可以参考之前的一篇文章 跨浏览器的inline-block这个 bug 是“痛在远方”同学碰到的,确实很诡异啊,貌似对标准支持越好的浏览器才会有这个问题。如下图:在 Firefox 下,inline/inline-block 的元素直接会有莫名的几像素(貌似是6px)的空隙。这个 bug 比较难发现,因为为了美观,一般的这种设计,inline/inline-block 的元素直接都会有一定的间距,

bug

IE bug: 1像素的dotted/dashed边框

最近的一个页面中碰到的,本来想用 border 来模拟设计图的虚线效果,但是很明显 border 效果不如设计图来的好看。顺便研究了下 dashed 和 dotted 的区别。 首先,从字面上来理解,dashed 和 dotted 都是指“虚线”,他们的不同在于: dashed:来自 dash(破折号),由 dash 组成的虚线 dotted:来自 dot (点),由 dot 组成的虚线,也称点线 这里多说几句废话,其实参看下 demo,就能从视觉上获得更直观的感受了。 下面再说说相关的 bug 吧,当然了,这些 bug 再一次只是光荣地出现在了 IE 下,此处涉及到 IE6

bug

IE bug: 消失的绝对定位元素

IE 一如既往地带来问题。真的,我觉得 IE 坚持自己的一套无所谓,不支持或者不完全支持标准也无所谓。但是,IE6 IE7 IE8 这三个版本都有各自不同的表现,实在是太让人难受了。 前两天碰到了这个奇怪的问题: 绝对定位的元素,紧邻着两个浮动元素。Firefox 中一切正常,IE6 中绝对定位元素消失了。本文来自前端观察,转载请以链接形式注明出处。 解决方法:只要别让绝对定位元素紧邻浮动元素就可以了。比如可以在绝对定位元素后面加个空元素。当然,这个空元素是毫无意义的,但是,在 IE 面前,又能怎么样呢? 经过实验,我发现,只要浮动元素的宽度不填满父元素,绝对定位元素就能正常显示,一旦浮动元素的宽度填满父元素,绝对定位元素就会消失。而且,看来,父元素宽度是这种情况发生的临界点。本文来自前端观察,转载请以链接形式注明出处。 另外,这个 demo 里面也存在 IE6 的另一个经典 bug

background

CSS背景全攻略

原文链接:Backgrounds In CSS: Everything You Need To Know 译文链接:css 背景全攻略 转载请保留版权以及链接 —————————————————————————————— 背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一。这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachment 等的属性,也会介绍一些有关背景(background)的常用技巧,以及 css3 中的 背景(background)(包含4个新的背景(background)属性)。 css2 中的背景(background) 概述 CSS2 中有5个主要的背景(background)属性,它们是: background-color: 指定填充背景的颜色。 background-image: 引用图片作为背景。 background-position: 指定元素背景图片的位置。 background-repeat:

css

关于浮动的前世今生

原文:[all about floats](http://css-tricks.com/all-about-floats/) 译文:[关于浮动的前世今生](http://www.qianduan.net/about-float.html) 版权所有,转载请注明出处,多谢!!- - - - - - ## 什么是浮动? 浮动是 css 的定位属性。我们可以看一下印刷设计来了解它的起源和作用。印刷布局中,文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。 这是一个例子: 在排版软件里面,存放文字的盒子可以被设置为允许图文混排,或者无视它。无视图文混排将会允许文字出现在图片的上面,就像它甚至不会在那里一样。这就是图片是否是页面流的一部分的区别。网页设计与此非常类似。 在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。浮动的元素仍然是网页流的一部分。这与使用绝对定位的页面元素相比是一个明显的不同。绝对定位的页面元素被从网页流里面移除了,就像印刷布局里面的文本框被设置为无视页面环绕一样。绝对定位的元素不会影响其它元素,其它元素也不会影响它,

css

IE下img多余5像素空白

[IE下img多余5像素空白](http://www.qianduan.net/img-excess-ofe-5-pixel.html) 版权所有,转载请注明出处,多谢! - - - - - - 嗯,开场先胡扯几句不相关地感言。最近的工作让我有了很多实践的机会,同时也让我收获颇丰。在群里聊天的时候也提到过,所有的学习过程,最好是理论-实践-再理论-再实践。。。的一个循环往复的过程。这里说的理论是个比较宽泛地概念,其中包括书本理论,也包括对实践地总结。只有理论没有实践,往往造成眼高手低,想得好,做得差;只一味地实践却不通过理论地学习和总结,看起来好像忙忙碌碌,到头来会两手空空。 最近地实践中,越来越觉得 li 元素中包含 a img 元素的时候会比较麻烦,需要注意,当然,问题还是一如既往的出现在 IE 下。以下为其中一例:

CSS 盒模型

整理自:[The CSS Box Model](http://css-tricks.com/the-css-box-model/)中文:[CSS 盒模型](http://www.qianduan.net/css-box-model.html) 版权所有,转载请注明出处,多谢! # CSS 盒模型 **网页设计中的每个元素都是长方形的盒子。**盒子的尺寸是怎样精确计算的,请看下图: 如果是 Firebug 用户的话(基本和前端有关的都会用到 Firebug 吧 – 糖伴西红柿),就会很熟悉下面的图表了。 这个图表很好地展示了作用于页面上任意盒子的数值。 注意以上两个例子中,margin 都是白色的。Margin 比较特别,它不会影响盒子本身的大小,但是它会 影响和盒子有关的其他内容,因此 margin 是盒模型的一个重要的组成部分。 盒子本身的大小是这样计算的: **Width**width + padding-left

css

CSS Position

1. position:static 所有元素的默认定位都是:position:static,这意味着元素没有被定位,而且在文档中出现在它应该在的位置。 一般来说,不用指定 position:static,除非想要覆盖之前设置的定位。 div-1 { position:static; } 2. position:relative 如果设定 position:relative,就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素。【意思是元素实际上依然占据文档中的原有位置,只是视觉上相对于它在文档中的原有位置移动了】 div-1 { position:relative; top:20px; left:-40px; } 3. position:absolute 当指定 position:absolute 时,元素就脱离了文档【即在文档中已经不占据位置了】,可以准确的按照设置的 top,bottom,

haslayout

haslayout综合

要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清除的概念。大多 IE 下的显示错误,就是源于 haslayout。 什么是 haslayout ? haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性,属性值可以为true或false。当一个元素的 hasLayout 属性值为true时,我们说这个元素有一个布局(layout) 当一个元素有一个布局时,它负责对自己和可能的子孙元素进行尺寸计算和定位。简单来说,这意味着这个元素需要花更多的代价来维护自身和里面的内容,而不是依赖于祖先元素来完成这些工作。因此,一些元素默认会有一个布局。当我们说一个元素“拥有layout”或“得到layout”,或者说一个元素“has layout” 的时候,我们的意思是指它的微软专有属性

Firefox和IE之间7个JavaScript的差异

尽管 JavaScript 历史上使用冗长而令人生厌的代码块来标的特定浏览器的时期已经结束了,但是偶尔使用一些简单的代码块和对象检测来确保一些代码在用户机器上正常工作依然是必要的。 这篇文章中,我会略述一下 Internet Explorer 和 Firefox 在 JavaScript 语法上不同的 7 个方面。 1. CSS “float” 属性 获取给定对象的特定 CSS 属性的基本语法是 object.style 属性,而且有连字符的属性要用骆驼命名法来代替。例如,获取一个 ID 为 “header” 的 div 的 background-color 属性,我们要用如下语法: document.getElementById("header").style.borderBottom= "1px solid #ccc"; 但是由于

定义列表: DL DT DD

定义列表和其他类型的列表稍有不同,它由两部分组成:名称和定义。DT 指定名称,为内联元素。DD 指定定义,为块级元素。 标准属性 id, class, title, style, dir, lang, xml:lang 事件属性 onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup 示例: 标题内容1内容2 dl —— define list——定义列表 dt —— define list title —— 用于生成定义列表中各列表项的标题,重复使用可以定义多个列表项的标题。注意:其中不能包含 hx 元素。 dd —— define list define —— 用于生成定义列表各列表项的说明文字段,

javascript

JavaScript的私有成员

对象 Javascript 根本上是和对象相关的。数组是对象。函数是对象。对象是对象。那什么是对象呢?对象是名-值对的集合。名是字符串,值可以是字符串,数字,布尔值或者对象(包括数组和函数)。通常对象是像哈希表一样执行地,这样便于值地快速检索。 如果值是函数,我们可以认为这是一个方法。当一个对象地方法被调用的时候,this 变量就设置为这个对象。方法就可以通过 this 变量来访问实例变量。 对象可以由用来初始化对象的构造函数生成。构造函数提供了其他语言中类所提供的特性,包括静态变量和方法。 公共 对象的成员全部是公共成员。任何函数都可以访问、修改或者删除这些成员,或者增加新成员。有两种向新对象中添加成员的方法: 在构造函数中添加 这个技术通常用于初始化公共实例变量。使用构造函数的 this 变量向对象中添加成员。 function Container(param){ this.member = param; } 这样,如果我们创建一个新对象: var myContainer = new Container('abc')

conditional

条件CSS的高级用法

介绍 条件CSS(Conditional-CSS)的开发源于在多数浏览器上修正 CSS 渲染 bug 的需求,以确保尽量多的用户看到正确的网站设计。核心思想建立在 Internet Explorer 上发现的条件注释方法,并扩展到包含其他的浏览器,而且将条件声明内联到 CSS 定义里面。 条件CSS(Conditional-CSS)并不仅仅对用户使用的浏览器感兴趣,而是对用户浏览器使用的渲染引擎更感兴趣。这就是条件(Conditional-CSS)使用 ‘Geckko’ 而非广为所知的 Firefox 作为它浏览器条件之一的原因。同样地, ‘Webkit’ 代替了 Safari。这使得其他使用同样渲染引擎地浏览器接受到那些同样地定位 CSS。这个规则地一个例外是使用了 IE(而不是 ‘Trident’),因为这是使用的 IE 的条件注释,而 ‘Trident’ 并不怎么为人所知。同样地,对于 Opera,因为只有 Opera 使用

conditional-css

条件CSS的使用

介绍 毫无疑问,任何一个试图使用 CSS 的网页设计师和开发人员都会发现不同的浏览器要求 不同的样式声明。这些烦恼归咎于各浏览器及其各版本不同程度的 CSS 执行的完整性。 条件 CSS 是这个问题的一个解决方案,采用的是 Internet Explorer 的条件注释语法的思想, 并把它内联到 CSS 声明之中。 基本用法 条件 CSS 主要用于指出一个特别的 CSS 声明是不是应该用于一个特别的浏览器。当然你不希望经常这么做,但是当你需要针对一个浏览器的时候,它会非常有用。可以在U4EA支持列表里看到,大部分的浏览器都支持这种方式。 任意 CSS 声明或者块都可以添加条件声明前缀,这些前缀有3种基本类型: [if {!} browser] [if {!} browser version] [if {!} condition browser version] ! – 声明的否定 (例 NOT) – 可选 browser – 声明针对的浏览器 ‘IE’