PostCSS及其常用插件介绍

前几天,PostCSS 6.0 分布了。

PostCSS 处理了很多你不必处理的乏味工作。它很巧妙的不同于预处理器,提供了可选的且更简洁的编程语言,来编译成 CSS,如 Sass、Less 与 Stylus。得出这个结论的部分原因是:

  • 它的名字。PostCSS 既能在预处理器将源代码编译成 CSS 之前也能在其之后对文件执行操作。
  • PostCSS 能替代你的预处理器。现在有很多插件实现了一些设计,如变量、 嵌套、mixins 以及 extends。

然而,虽然你可以构建自己的预处理器,但除非你想限制功能并加快编译速度,你没有别的该这么做的理由。就我个人而言,为增强 CSS,我使用 Sass,再加以 PostCSS 辅佐。没什么波澜,可能是对于大多数前端使用者来说没什么大的影响,因为通常大家都是使用其插件。

CSS 预处理器 和 CSS 后处理器

在说 PostCSS 之前,先了解一下 pre-processor 。
继续阅读

实例解析防抖动(Debouncing)和节流阀(Throttling)

有兴趣可以先看看这3篇系列文章:

防抖(Debounce)和节流(throttle)都是用来控制某个函数在一定时间内执行多少次的技巧,两者相似而又不同。

当我们给 DOM 绑定事件的时候,加了防抖和节流的函数变得特别有用。为什么呢?因为我们在事件和函数执行之间加了一个控制层。记住,我们是无法控制 DOM 事件触发频率的。
继续阅读

比较escape、encodeURI、encodeURIComponent

估计很多前端工程师并不清楚escape,encodeURI, encodeURIComponent的区别,也不知道什么时候该用哪个方法,以及这些方法为什么要被用到,下面我主要来阐述一下这三个方法的区别以及用法。

escape 方法:

 escape() 方法生成新的由十六进制转义序列替换的字符串。escape 函数是全局对象的属性. 特色字符如: @*_+-./ 被排除在外。字符的16进制格式值,当该值小于等于0xFF时,用一个2位转移序列: %xx 表示。大于的话则使用4位序列:%uxxxx 表示。

该特性已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性。

看看例子吧:

escape('abc123');     // "abc123"
escape('äöü');        // "%E4%F6%FC"
escape('ć');          // "%u0107"

// special characters
escape('@*_+-./');    // "@*_+-./"

escape('~!@#$%^&*(){}[]=:/,;?+\'"\\')  
//%7E%21@%23%24%25%5E%26*%28%29%7B%7D%5B%5D%3D%3A/%2C%3B%3F+%27%22%5C

encode 方法:

encodeURI() 是对统一资源标识符(URI)进行编码的方法。它使用1到4个转义序列来表示每个字符的UTF-8编码(只有由两个代理字符区组成的字符才用四个转义字符编码)。 继续阅读

2017前端开发者必学清单

前端生态系统高速发展,我们把时间花费在尝试新技术并在网上讨论它们。我并非指不该如此,但也许我们可以放缓脚步,去多关注下那些变化不大的东西。这些东西能很大程度改善工作质量,提升工作价值,帮我们去理解新的工具。

这篇文章里有我自己过往的经验也有新年的计划,同时也希望能收到你们的反馈。

学习如何编写可读的代码

我们大多数的工作不是写新代码,而是维护既有的代码。这也就意味着你读代码的时间要远多于写码的时间,因而你需要为你下一位维护代码的同事来优化代码,而非为解释器来优化。

我推荐大家阅读这几本很棒的书,由薄到厚,按下面顺序来阅读:

继续阅读

一个健壮且可扩展的 CSS 架构所需的8个简单规则

这是一份清单,里面列出了在我多年的专业 Web 开发期间,在复杂的大型 Web 项目中学习到的有关管理 CSS 的事项。我多次被人问起这些东西,所以写一份文档记录下来听起来是个不错的主意。

我已经尽力尝试用简短的语言去解释它们了,然而这篇文章本质上还是长文慎入:

  1. 总是类名优先
  2. 组件代码放在一起
  3. 使用一致的类命名空间
  4. 维护命名空间和文件名之间的严格映射
  5. 避免组件外的样式泄露
  6. 避免组件内的样式泄露
  7. 遵守组件边界
  8. 松散地整合外部样式

介绍

如果你正在开发前端应用,那么最后你肯定需要关心样式方面的问题。尽管开发前端应用的技术水平持续增长,CSS 仍然是给 Web 应用赋予样式的唯一方式(而且最近,在某些情况下,原生应用也一样)。目前在市面上有两大类样式解决方案,即:

  • CSS 预编译器,已经存在很长时间了(如 SASSLESS 及其他)
  • CSS-in-JS 库,一个相对较新的样式解决方案(如 free-style 和很多其他的

两种方法间的抉择不在本文过多赘述,并且像往常一样,它们都有各自的支持者和反对者。说完这些,在下面的内容里,我将会专注于第一种方法,所以如果你选择了后者,那么这篇文章可能就没什么吸引力了。

主要目标

但更具体地说,怎样才能被称为健壮且可扩展呢? 继续阅读

React还是Vue:你该如何选择?

2016年React巩固了它作为前端框架之王的地位,这一年中可以看到它在Web端和移动端的快速成长,同时稳稳领先于它的主要竞争对手Angular。

但是2016对Vue来说也是同样令人印象深刻的一年,它发布了Vue 2.0版本并且在JavaScript社区引起了巨大反响,GitHub上多出的25000颗star就是最好的证明。

React和Vue的适用范围无疑是很相似的:同样是基于组件的轻量级框架,同样专注于用户界面的视图层。同样可以用在简单的项目中,也同样可以使用全家桶扩展为复杂的应用程序。

因为,很多Web开发者想知道他们应该使用哪个框架。是其中一个明显优于另一个?还是他们有各自的优点和坑?或者他们基本就是一个样?

两个框架 两个拥护者

在本文中,我想用一次公平,彻底的对比来回答上面的疑问。但是唯一的问题是我是一个Vue粉丝,完全不够客观。今年我在项目中重度使用Vue,在Medium上大加赞赏,甚至还发布了Udemy课程

为了平衡我的偏见,我叫上了我的朋友Alexis Mangin,他是一个很牛的JavaScript开发者,同时也是一个React铁粉。他同样沉浸于React中,经常在Web端和移动端的项目中使用。 继续阅读

降低样式计算的范围和复杂度

添加或移除一个DOM元素、修改元素属性和样式类、应用动画效果等操作,都会引起DOM结构的改变,从而导致浏览器需要重新计算每个元素的样式、对页面或其一部分重新布局(多数情况下)。这就是所谓的样式计算。

TL;DR

  • 降低样式选择器的复杂度;使用基于class的方式,比如BEM。
  • 减少需要执行样式计算的元素的个数。

计算样式的第一步是创建一套匹配的样式选择器,浏览器就是靠它们来对一个元素应用样式的。

第二步是根据匹配的样式选择器来获取对应的具体样式规则,计算出最终具体有哪些样式是要应用在DOM元素上的。在Blink(Chrome和Opera的渲染引擎)中,至少从现在来看,以上两步在时间消耗上是差不多的。 继续阅读

优化JavaScript的执行效率

页面里的动画效果大多是通过JavaScript触发的。有些是直接修改DOM元素样式属性而产生的,有些则是由数据计算而产生的,比如搜索或排序。错误的执行时机和太长的时间消耗,是常见的导致JavaScript性能低下的原因。你需要尽量减少这两方面对你的JavaScript代码带来的执行性能的影响。

TL;DR

  • 对于动画效果的实现,避免使用setTimeout或setInterval,请使用requestAnimationFrame。
  • 把耗时长的JavaScript代码放到Web Workers中去做。
  • 把DOM元素的更新划分为多个小任务,分别在多个frame中去完成。
  • 使用Chrome DevTools的Timeline和JavaScript Profiler来分析JavaScript的性能。

继续阅读

浏览器的渲染性能

用户都 希望他们访问的web应用是可交互且运行流畅的。因此,作为web开发者,你也要在这方面多花点功夫。你所做的页面,不但要能被快速加载,还要能流畅运行:页面的滚动要快速响应手指的动作,动画和交互效果更要如丝般顺滑。

User interacting with a website.

要想编写高性能的web站点或应用,你需要充分了解浏览器是如何处理HTML/JavaScript/CSS的,从而确保你写的代码(或引用的第三方代码)是尽可能高效的。

60fps和设备刷新率

当今大多数设备的屏幕刷新率都是 60次/秒 。因此,如果在页面中有一个动画或渐变效果,或者用户正在滑动页面,那么浏览器渲染动画或页面的每一帧的速率,也需要跟设备屏幕的刷新率保持一致。

也就是说,浏览器对每一帧画面的渲染工作需要在16毫秒(1秒 / 60 = 16.66毫秒)之内完成。但实际上,在渲染某一帧画面的同时,浏览器还有一些额外的工作要做(比如渲染队列的管理,渲染线程与其他线程之间的切换等等)。因此单纯的渲染工作,一般需要控制在10毫秒之内完成,才能达到流畅的视觉效果。如果超过了这个时间限度,页面的渲染就会出现卡顿效果,也就是常说的jank,它是很糟糕的用户体验。 继续阅读

你必须收藏的Github技巧

选择完master branch之后,master自动变成了网站。master所有的提交会自动更新到网站。

精准分享关键代码

比如你有一个文件里的某一行代码写得非常酷炫或者关键,想分享一下。

可以在url后面加上

#L行号
比如,点击下面这个url:

https://github.com/AlloyTeam/AlloyTouch/blob/master/alloy_touch.js#L240

你便会跳到alloy_touch.js的第240行。

那么问题来了?如果我是一段代码,即多行代码想分享呢?也很简单:url后面加上
#L开始行号-L结束行号
比如,AlloyTouch的运动缓动和逆向缓动函数如下面代码段所示:
https://github.com/AlloyTeam/AlloyTouch/blob/master/alloy_touch.js#L39-L45

其实也不用记忆你直接在网址后面操作,github自动会帮你生成url。比如你点击39行,url变成了
https://github.com/AlloyTeam/AlloyTouch/blob/master/alloy_touch.js#L39
再按住shift点击45行,url变成了
https://github.com/AlloyTeam/AlloyTouch/blob/master/alloy_touch.js#L39-L45
然后你这个url就可以复制分享出去了,点击这个url的人自动会跳到39行,并且39-45行高亮。

继续阅读