再谈移动 Web 上的吸底布局

吸底布局也就是固定在页面底部,无论页面本身滚动到哪了。其最佳实现方式是使用 position:fixed,然而对于移动端来讲坑要多得多。

如果仅仅是吸顶的话,也就是对 fixed 的支持,也存在悲惨的过去,比如 Android 2.x 只有在特定的 viewport 设置下才会生效,iOS 在 8 以前要么不支持要么带有明显的漂移 bug。现在好多了,较新的版本都能很好地支持。

Read More

Gitbook 插件的问题

Gitbook 是一个工具,可以将你的 Markdown 文档转换为 HTML、PDF 电子书,也是一个平台,你可以将电子书分享到上面去。不过严格来讲将 Markdown 发布为 HTML 没有任何技术含量,解析 Markdown 格式的工具不计其数。原始的 Markdown 语法非常简陋,在写书的时候,难免会用到一些图表、公式之类的,这种 Markdown 通过扩展也不在话下。

```[type]
[content]
```

type 处是这段代码的解析类型,常用的有各种语言语法以及 flowchatsequence 等扩展类型,这些扩展类型都需要引入运行时解析的js脚本。

Read More

同构场景下的复杂前端构建

提到 Web 前端工程化,构建,或者称为“编译”,是其中最重要的构成部分。由于出道比较晚,我在毕业后的第一家公司就职时就不得不掌握一定的构建知识和技能。当时我们使用的构建工具,使用 python 语言编写,主要能对 JavaScript 进行 AMD 规范的合并和压缩,对 CSS 进行合并压缩,以及增添各种时间戳。由于工具没有扩展功能,因此构建流程的固定的,如有必要,需要对工具进行升级,柔韧性并不好,好在当时的业务复杂度也并不高。

Read More

从 margin-bottom 到 writing-mode

一个有趣的事实是,不论 margin 还是 padding,都可以设置百分比值:

1
2
3
4
.content {
margin: 5%;
padding: 10%;
}

直观上来讲,margin-leftmargin-rightpadding-leftpadding-right 是相对于包含框的宽度,而 margin-topmargin-bottompadding-toppadding-bottom 相对于包含框的高度。然而根据 CSS 规范,这8个值一般都是相对于包含框的宽度,究其原因还是排版的习惯需要所致。

Read More

有序 BigPipe

纪念此猫

概念

BigPipe 的原理是使用 HTTP/1.1chunk 能力分片多线程加载页面的不同部分,以降低白屏/首屏时间。由于 HTML 文档(document)是一篇纯文本,文本的内容直接决定了最终页面的展现形态和功能,因此虽然服务端可以采用多线程加载数据和输出页面片段,但在浏览器端这些片段必须保证是有序排列。于是,JavaScript 脚本担负起了这个职责,它将 HTML 片段字符串渲染成为 DOM。

Read More

Redux 的黑魔法

相信很多人接触 Redux 时都会被它奇怪的 API 搞得云里雾里。这里不再冗述 Flux 架构的思想,实现 Flux 的工具有很多,它们只是在实现这种编程模式,并不会有太复杂的逻辑。事实也是这样,Redux 的 API 非常少,但并不一定容易理解。

Read More