本文作者@千古壹号。

前言

老板的手机收到一个红包，为什么红包没居中？

如何让一个子元素在父容器里水平垂直居中？这个问题必考，在实战开发中，也应用得非常多。

你也许能顺手写出好几种实现方法。但大部分人的写法不够规范，经不起千锤百炼。换句话说：这些人也就面试的时候夸夸其谈，但真的上战场的时候，他们不敢这么写，也不知道怎么写最靠谱。

这篇文章中，我们来列出几种常见的写法，最终你会明白，哪种写法是最优雅的。

当然，我还会拿出实际应用中的真实场景来举例，让你感受一下标准垂直居中的魅力。

作者：沐童

前述

Nginx 对于大多数开发者来说不算陌生，企业团队用它来搭建请求网关，我们私下用它 “科学上网”（价值观警告）。但对于前端 er 来说，平日里开发大多时候都只是专注于业务，根本不需要也没机会涉及到 Nginx 这一块的内容，也就导致我们也对它的了解少之甚少。随着 serverless 孕育普及，越来越多的人相信，不需要掌握任何运维知识，也能简单快速地实现自己的技术 idea。

然而事实上并不是这样的，Node 的兴起让前端工程师开始涉足后端领域，我们可以独立维护一些 BFF 服务，即使这只是一些简单的应用，也需要你掌握一定的运维技巧。另一方面，在快速变革的软件开发体系下，不同职责之间的部分边界变得越来越模糊，DevOps 理念的深入，也让我们不得不把目光投向应用运维，开始思考在新体系下如何构建一体化工程。所以，懂得一些简单易用的 Nginx 技巧，对于前端开发者来说，是非常必要的。

所谓 “技多不压身”，在你还在思考学不学的时候，有些人已经学完了。

原文地址：https://css-tricks.com/an-explanation-of-how-the-intersection-observer-watches/
原文作者：Travis Almand
翻译：刘辉

有很多精彩的文章探讨了如何使用Intersection Observer API，包括Phil Hawksworth，Preethi和Mateusz Rybczonek等。 我这篇文章将讲一些不一样的东西。 我在今年早些时候有幸向达拉斯VueJS聚会介绍了VueJS过渡组件，我在CSS-Tricks的第一篇文章就是以此为基础的。 在演讲的问答环节中，有人问我基于滚动事件触发过渡怎么样 - 我说当然可以，但是一些听众建议我了解一下Intersection Observer。

这让我开始思考。我对Intersection Observer有基本的了解，并且能够用其完成简单的示例。 我是否知道它的工作原理而不仅仅是使用它？它到底为我们开发人员提供了什么？ 作为一个资深开发者，我如何向新手甚至不知道它存在的开发者解释它的工作原理？

作者：深山蚂蚁

本文主要内容如下：

• 五段代码深入剖析 Promise 的注册微任务和代码执行过程
• 分析 Promise/A+ 与 webkit（ chrome 和 safari 内核） 的 Promise 的实现差异
• 巩固一下，出道题

Promise 大伙太熟悉了，不过这里不讲大伙都知道的表面简单知识，而是一起来深入剖析 Promise 的注册微任务和执行的完整过程。能正确的使用 Promise 且能做到知其然知其所以然~

我们通常学习 Promise 都是基于 Promises/A+ 的实现。但是我不得不告诉你，本文还将分析该 js 实现和 webkit 的 Promise 的实现差异。具体到代码运行上的差异。

本文整体思路采取 代码例子 + 剖析讲解 的方式来解读，做到人人能懂，人人能理解的目的。

毫不夸张，如果全部读懂本文，那么 Promise 的注册和执行过程都将所向披靡，深入你的骨髓，你就是 Promise 大神！

作者：龙朝忠

随着三星Galaxy Fold和华为Mate X的发布，前端同学将面临一个新的任务：折叠屏的适。折叠屏虽距离普及可能还有很长一段路，大多数公司还未将折叠屏列入适配的范围，但是提前研究下折叠屏的适配还是极好的。

折叠屏手机概况

华为Mate X

• 原文地址：https://alligator.io/js/v8-engine/
• 翻译：马雪琴

V8 是谷歌用于编译 JavaScript 的引擎，Firefox 同样也有一个，叫 SpiderMonkey，它和 V8 有一些不同，但总体颇为相似。我们将在本篇文章中讨论 V8。

V8 引擎的一些基础点：

• 用 C++ 语言实现，使用在 Chrome 浏览器和 Node.js 中（以及最新版的 Microsoft Edge）
• 遵循 ECMA-262 标准

本文作者@千古壹号。

前言

我周围的码农当中，有很多是技术大神，却常常被字体这种简单的东西所困扰。

这篇文章，我们来讲一讲关于字体的常识。这些常识所涉及到的问题，有很强的可操作性，都是在实际业务中真实遇到的，都是需要开发同学和产品经理、设计师不断重复沟通的。

字体真的只是“系统默认，无从解释”这么简单吗？是产品被忽悠？还是开发在敷衍？二者之间的博弈究竟谁能胜出？学会本文，你就能胜出。

作者：吴冠禧

0 前言

晓强哥在他的上篇文章里介绍了 Javascript 抽象语法树里面「提到获得抽象语法树的过程为：代码 => 词法分析 => 语法分析 => AST」，抱着深究技术细节的目的，我决定研究这里的词法分析和语法分析，写一个简单的四则运算表达式转换成AST的方法，于是就有了下面的内容。

1 人类和计算机对于表达式的看法是不同的

人类习惯 a + b 这种表达叫做「中序表达式」，优点是比较简单直观，缺点是要用一堆括号来确定优先级 (a + b) * (c + d)。

这里说简单直观是相对人类的思维结构来说的，对计算机而言中序表达式是非常复杂的结构。

为了计算机计算方便，我们需要将中序表达式转换成树形结构，也就是「抽象语法树AST」。

作者：深山蚂蚁

AST 解析器工作中经常用到，Vue.js中的VNode就是如此！
其实如果有需要将 非结构化数据转 换成 结构化对象用 来分析、处理、渲染的场景，我们都可以用此思想做转换。

如何解析成 AST ？

我们知道 HTML 源码只是一个文本数据，尽管它里面包含复杂的含义和嵌套节点逻辑，但是对于浏览器，Babel 或者 Vue 来说，输入的就是一个长字符串，显然，纯粹的一个字符串是表示不出来啥含义，那么就需要转换成结构化的数据，能够清晰的表达每一节点是干嘛的。字符串的处理，自然而然就是强大的正则表达式了。

原文地址：https://css-tricks.com/an-explanation-of-how-the-intersection-observer-watches/
原文作者：Travis Almand
翻译：刘辉

有几篇精彩的文章探讨了如何使用Intersection Observer API，包括Phil Hawksworth，Preethi和Mateusz Rybczonek等。 我这篇文章将讲一些不一样的东西。 我在今年早些时候有幸向达拉斯VueJS聚会介绍了VueJS过渡组件，我在CSS-Tricks的第一篇文章就是以此为基础的。 在演讲的问答环节中，有人问我基于滚动事件触发过渡怎么样 - 我说当然可以，但是一些听众建议我了解一下Intersection Observer。

这让我开始思考。我对Intersection Observer有基本的了解，并且能够用其完成简单的示例。 我是否知道它的工作原理而不仅仅是使用它？它到底为我们开发人员提供了什么？ 作为一个资深开发者，我如何向新手甚至不知道它存在的开发者解释它的工作原理？