前端 – 山维空间

在 Pug 模板中使用变量

如何在 Pug 里，把变量注入父模板。

我厂使用 Pug 作为 HTML 的预编译工具，写久了发现回不去了……Pug 写起来很高效，看久了习惯了阅读效率也很高，读了读文档，发现还有很丰富的可编程特性。于是我决定抛弃 Handlebars，以后都用 Pug 写模板了。

这次我厂官网改版，我就用 Pug 替换了 Handlebars，于是 build 脚本一下少了几十行，非常爽。其实我早就想这样做，不过卡在一个点：使用变量。

在 Pug 里可以这样使用变量：

- var name = 'meathill'

h1 hello #{ name }

以上代码将输出 <h1>hello meathill</h1>。这种用法比较简单，不过在 extends模板的时候，把变量放到哪里就不知道了，官方文档也语焉不详，我反复试了很多次无果，最终还是靠搜索找到了答案，原来要这样：

// Layout.pug
html
  block vars
    p 注意，这个 block 是重点，它出现在前面，用来注入变量
  head
    title #{ title } | My site
  body
    block content

// page.pug
extends Layout

block vars
  - var title = 'A blog'
  
block content
  h1 Blog title
  p blog content

关于“大漠”的一点不好的记忆

关于大漠的一点不好的记忆。不过当年没搞清楚到底是哪个。发生了最近的事情，我觉得可能是这个……

我这个人不爱交际，在行业里一直是个小透明。

不过我当年也曾想试着改变一下自己，所以找了个前端交流群加了进去。具体的群名字忘记了，总之是“大漠”创建的群。

然后发现这个群真TM恶心。群主大漠有几个小弟，一副高高在上颐指气使的样子，对群里成员吆五喝六随意攻击，不仅对发问者提出各种限制，对回答者也提出各种限制。群主也是一副老子对你们这些废柴施恩，还不快快对我歌功颂德的气势。（具体做法记不清了，好多年了。）

然后我就受不了啦。如果前端圈子都这个吊样子，那我不交际也不要紧。于是吐槽两句自己退群了。

退了之后，想说这个大漠是谁啊，怎么这么差劲，然后搜了一下，发现叫这个名字的好多，无法确定是哪个，我也懒得跑回去确认。

发生了最近的事情后，我举得按人品和气度，有可能是这个……

准备搞一场专题直播

准备在 SegmentFault 搞一场专题直播，标题是《jQuery, Backbone, Vue》，计划通过对比老中青三代框架开发的差异，带领大家理解前端发展的趋势，接触更好的未来。https://segmentfault.com/l/1500000008694676 求关注，求购买。

准备在 SegmentFault 搞一场专题直播，标题是《jQuery, Backbone, Vue》，计划通过对比老中青三代框架开发的差异，带领大家理解前端发展的趋势，接触更好的未来。

直播地址：https://segmentfault.com/l/1500000008694676
幻灯片地址：https://meathill-lecture.github.io/jquery-backbone-vue/
范例代码仓库：https://github.com/meathill-lecture/jquery-backbone-vue

求关注，求购买。

一个超级诡异的 iOS Safari `position: fixed` 失效问题

iOS Safari 下，`input readonly` 仍然可以获得输入焦点，此时页面交互大部分正常，但 `position:fixed` 会受影响。

今天前同事李某找我咨询 Hybrid 开发的问题，想起来大前天搞这个问题搞了一天，赶紧记下来，省得忘记。

先说需求。东家让我做个日历组件，在手机 Web 上用。组件的样式是这样的，很多地方都可以见到，比如南航国航的客户端。

看起来并不复杂，事实上也是，基本上顺顺利利的开发完成，准备交付。这里有个伏笔，开发中我按老习惯，使用桌面 Chrome，和实际生产环境不太一样。不过我自然要去真机上测试，结果一测问题就出来了。

因为组件需要全屏展示，所以我设置了如下的CSS：

.date-picker {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color: white;
  z-index:1024;
}

同时，对原本的 <input name="date">，我给它加上 readonly，避免弹出虚拟键盘。理论上，这样的就可以了。但实测时，不滚屏的时候，组件弹出时尺寸是准确的，盖满全屏；然则一旦滚屏，组件就会占据从页面最上方到当前最下面这截位置。大约相当于 position:absolte;top:0 的效果。

如图，可以看到组件占据了全屏，但实际是从页面最上面开始的，定位有问题。用桌面 Safari 调试也可以看出来它的高度是 968，远大于正常的 667。

这很诡异，上下左右全为0，是上古巨兽 IE6 都支持的做法。iOS Safari 虽然 Bug 多多，不应该连这个都有毛病啊。以 ios safari position fixed 为关键词 Google 之，结果 iOS Safari 历史不清白，当年 iPhone 刚出的时候的确有定位问题，于是虽有满屏的结果，但都不适用。

然后我想到找其它库，比如 Bootstrap，它的 Modal 组件也是类似的效果。但是怎么测都正常，于是我只好一个样式一个样式修改，仍然没有结果。

时间慢慢流逝，转眼已经凌晨2点了，就在我几欲放弃之际，突然发现，虽然组件弹出的时候定位有问题，但只要我点掉下面的完成，定位就会立刻恢复正常。

注意，就是那个“完成”。

问题至此已经明朗：在 iOS Safari 里，即使 <input> 设置了 readonly，它仍然可以获取输入焦点。获取输入焦点之后，虽然没有弹出虚拟键盘，但仍然是待输入状态。

此时页面各种交互都是正常工作的，比如点击、滚屏。唯独 position:fixed 定位有问题。点击“完成”离开输入状态，Safari 自动刷新页面元素，定位就正常了。

于是我在组件弹出后，自动 input.blur()，使其失去焦点，组件的尺寸便正常无误了。

总结

移动端 Web 开发总有各种各样稀奇古怪的问题。有些好解决，有些不好解决，比如这个问题，很难定位：

历史不清白，搜也搜不到
组件要求全屏，需要避免虚拟键盘，所以会改变默认行为
其它情况下都是好的

我能想到的方案，就是想办法，用所有能用的工具，排除掉所有其它问题，最终还是能搞出来的。

FontAwesome 通过组合创建新图标

复合使用 FontAwesome 图标，创建符合需求的新图标。比如把“图片（fa-picture-o)”和“加（fa-plus-circle)”叠到一起，就可以创造”新增图片“的图标。

FontAwesome 提供了很多好看的图标，使用 WebFont 嵌入页面更是简单又好用，所以我基本上一直用它。不过有时候还是觉得不太够用，这就需要复合使用多个图标。

下面是个例子，我在图标的右下角增加一个圆形加号，表示增加、创建。

See the Pen add icon by Meathill (@meathill) on CodePen.

这里有两个选择：

FontAwesome 提供了一个堆叠图标的样式：fa-stack，可以堆叠任意多的图标。
因为它实际上只占用了 :before，所以也可以使用 :after 来容纳新增的图标。如果只需要两个图标，这个方式更简单。

Bootstrap 4 发布 alpha 6

Bootstrap 4 发布 alpha 6 版本，在之前的基础上彻底拥抱 Flexbox，并对若干 class 和组件进行了升级。

这两天直播写 Meart 有点上瘾，博客好久没更了，公更私更都没更。刷推看到这则公告，小更一下吧。
图文无关，马上又要去台湾了，翻出来一张台湾公安局的照片阵楼。

Bootsrap 团队宣布 Bootstrap 4 推出 alpha 6 版本

如题。Bootstrap 4 alpha 已经是第六个版本了，我最近一直在用 alpha 5，感觉没有太大问题。

这次更新主要包含三个部分：

1. 拥抱 Flexbox

这个版本放弃了 IE9，从而可以彻底拥抱 Flexbox（之前的版本中，Grid 多半使用 display:table 和 float 实现，如果要启用 Flexbox，需要单独引用一个 bootstrap-flex.css）。

根据 CanIuse 显示，目前除了 IE 系列，大部分浏览器均已全面支持 Flexbox。

这次修改之后，绝大部分组件均已全面转向 Flexbox。

2. 加强布局和显示样式

增加了一批用于调整布局和显示的 class，这样从 Bootstrap 3 迁移也会方便一些。

这块儿我暂时没用到，没啥可说的。

3. 提升 Grid 布局

增加了更多的可控样式，可以调整 Grid 布局中的边距。

4. 升级导航栏

之前的版本中，导航栏还是个半成品，现在虽然不敢说是“完成版”，单也差不多了。

这个用途可能比较大，不过还没研究。

下次再发布就是 beta 版了，感觉离正式推出不远了。

Staticfile.org 搜索仓库还没更新，文件已经更新了。

感谢原作者和贡献者的努力，让我们得以用上越来越好用的开源框架，节省大量时间和精力，可以集中于更有产出的事情。

原文：Bootstrap 4 Alpha 6

很有意思的 CSS 类名

Emotionally Complicated Class Names https://css-tricks.com/emotionally-complicated-class-names/amp/

Compass + cleancss 导致的灵异小问题

:blank伪类尚未被Chrome支持，会导致整条规则被忽略。

问题不大，不过很诡异。代码如下：

SASS:

.some-class
  display: none

.other-class:blank
  display: none

HTML:

<div class="some-class">...</div>

理论上说，这样这个div应该不显示。在本项目中，它的确没显示；但是在另外一个将本项目作为依赖的项目中，它却显示出来了。

经检查，本地开发和部署时，直接使用 compass compile 生成CSS，compass 配置中，设置输出模式（output_style）为 compressed，结果是这样的：

.some-class{display:none}.other-class:blank{display:none}

而在作为依赖时，用到的则是 grunt-contrib-cssmin 处理过的CSS，刚才那句就被压缩成

.some-class,.other-class:blank{display:none}

:blank伪类尚未被Chrome中支持，于是整条规则都被忽略，导致div显示出来。

啊，前端的轮子啊

学习新技术还是不要太激进，保持基础的了解即可。但是不关注也是不行的。

时势造英雄。

IT科技几十年来诞生过不少概念，但直接拿来就能作为宣传材料的不多，HTML5算一个。借助智能手机、微信微博快速普及带来的平台优势，HTML5快速成长，接连攻陷投资界、创业界、广告界，现在说起H5，在我的圈子里几乎无人不知无人不晓。

资金充裕，整个行业自然地位上升，财务上升；继而自然从业者增加；继而就会出产大量的产品。而作为前端从业人员，最大的感觉就是：轮子真TM多啊……这不，我前几天计划学习一下近来出现的各种新技术，今天正好看到Bable最新入门The Complete Guide to ES6 with Babel 6，正好我写xgame-api的时候饱受node不能完全支持ES6之苦，马上坐正准备好好看。

然后就看到：

Keeping up to date

Here’s a little story: while writing these guides, I learned that the require hook in babel-core used by Gulp and Mocha is already set to be deprecated.

跟上变化

讲个段子：就在我写这套入门的时候，babel-core里的require钩子，就是Gulp和Mocha使用的那个，被标记为“弃用”

Babel6是24天之前发布的，这套文章是上周写的，核心API已经发生变化了。这让我不禁去想，紧跟业界潮流的成本会不会太高了？ES6的确提供了不少语法糖，以及终于像样的模块管理。如果现在就开始使用ES6，不仅可以提前享受到这一切，到标准真正到来的时候，可以省去升级的时间。

不过这里面之考虑了标准变化，没有考虑需求变化和产品变化。如果是抽象性很强的代码，比如某种算法库，或者某个功能组件，那么从开发之日起，遇到的变化可能不会太多太大。但如果是业务代码，就不得不遭遇各种各样的修改和变化，于是功能稳定便于维护就更加重要。紧跟潮流，意味着必须付出多余的精力去应对各种不稳定导致的节外生枝，一不小心，业务逻辑就要延期交付鸟。

又有个切身例子。Tiger Prawn（后面简称TP）立项的时候，模块管理无论是AMD还是CMD还是sea.js都难以让人满意，所以我就用了最简单的直接引用和命名空间。前几日用Browserify感觉不错，赶上TP遇到个问题，就寻思着重构下。结果努力一天之后，架构变化还是太复杂，遂放弃。次日修正实际问题只花了半天。生产中，还是优秀的架构设计更重要，毕竟开发和维护效率至上；追新追潮流几乎都可以算是作死的行为。

那么什么时候学习新技术呢？程序员都应该做业余项目，不是私活，而是根据一些平日里瞎想出来的需求，用一些新技术去实现，即使实现不了，也能够实地演练各种新技术。这样，有朝一日新技术成熟了，就可以很快应用到新产品中。

分类：前端