作者：刘辉

最近笔者把一个中等规模的 Koa2 项目迁移到 TypeScript，和大家分享一下 TypeScript 实践中的经验和技巧。

原项目基于 Koa2，MySQL，sequelize，request，接口加页面总计 100 左右。迁移后项目基于 Midway，MySQL，sequelize-typescript，axios。

本项目使用 TypeScript3.7，TypeScript 配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

"compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "incremental": true,
    "inlineSourceMap": true,
    "module": "commonjs",
    "newLine": "lf",
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true,
    "outDir": "dist",
    "pretty": true,
    "skipLibCheck": true,
    "strict": true,
    "strictPropertyInitialization": false,
    "stripInternal": true,
    "target": "ES2017"
}

本文分为两部分，第一部分是处理 any 的实践，第二部分是构建类型系统的实践。

作者：龙朝忠

京东微信购物首页（以下简称微信首页）曾经作为微信购物一级入口（目前替换为京喜小程序）一直对性能有着极高的要求，本文将介绍微信首页的一些优化经验。

一般来说产品是按以下方式进行迭代的，我认为循环的起点应该是「收集用户反馈」，我们对页面的优化依据和目标一个重要来源就是用户的反馈，因此说网页优化我们先从网页监控开始聊起。

作者：帅哥红

前言

在平日的工作中前端 badjs 是一个比较常见的问题， badjs 除了我们自身业务 js 脚本里比较明显的报错外还有依赖其他资源的一些报错，对于自身业务 js 里出现的错误很容易进行定位并修复，但对于依赖资源的错误即常见的 script error （外部 js、接口错误）定位就没那么容易了。

前端开发的工作除了完成日常的业务特性外还有一项重要的工作就是线上页面质量的运营（其中 badjs 监控及异常分析是工作内容的重要部分），本文主要讲述 script error 采集、定位、统计以及分析的的一些方法及思路，希望对大家在分析定位问题时有一定的帮助。

原文地址：https://alistapart.com/article/responsible-javascript-part-3/
原文作者：Jeremy Wagner
译者：龚亮
声明：本翻译仅做学习交流使用，转载请注明来源

针对网站上存在的 JavaScript 问题，你已经尝试了所有可能解决它的​方法。比如，尽可能地依赖 Web 平台，避免使用 Babel ，使用较小的框架替代方案，对应用程序代码做极致化精简。然而，速度还是不够快。当网站无法像设计师和开发人员所期望的那样发挥作用时，不可避免得让我们反思：
“我们没有做到什么?” “我们写的代码能做什么?” “我们架构的哪些部分没有达到预期?”
相当一部分性能问题源于我们自己的代码，然而把责任全部归咎于我们自己会赤裸裸地忽略一个事实：相当大一部分性能问题是由外部因素导致的。

• 原文地址：https://alistapart.com/article/responsible-javascript-part-2/
• 原文作者：Jeremy Wagner
• 译者：马雪琴
• 声明：本翻译仅做学习交流使用，转载请注明来源

你和开发团队的成员热情游说老板同意对公司的老网站进行全面的重构，你们的请求被管理层甚至是最高管理层都听到了，他们同意了。高兴之余，你和团队开始与设计、IA 等团队一起工作。没过多久，你们就写出了新代码。

重构工作一开始非常简单，就是到处安装 npm，这其实就是在快速安装生产依赖项，就像一个大学生在做桶支架，而不关心第二天早上的情况一样。

然后，你就启动了。

与大多数豪饮的后果不同，痛苦并不是第二天早上就开始的。但是……几个月后，产品所有者和中层管理人员开始感到恶心和头痛，他们想知道为什么产品推出以来，转化率和收入都下降了。然后事情会恶化到极点，CTO 周末从度假小屋回来，质问为什么网站加载速度如此之慢——如果它真的加载过。

重构时每个人都很开心，重构后没有人快乐了。欢迎来到你的第一个 “JavaScript 宿醉”。

原文地址：https://alistapart.com/article/responsible-javascript-part-1/
原文作者：Jeremy Wagner
译者：刘辉
声明：本翻译仅做学习交流使用，转载请注明来源

从统计数据上看，JavaScript是性能的关键。以现在的趋势，中等大小的页面很快就会至少发送 400 KB 的 JavaScript，而这仅仅是传输时的大小，并且还是压缩后的。

不幸的是，虽然减少资源传输时间是整个性能的重要组成部分，但是压缩并不会影响浏览器处理整个脚本所需的时间。如果服务器发送了 400 KB 的压缩 JavaScript，则解压缩后浏览器需要处理的实际大小超过 1 MB。如何应对这些繁重的工作负载，取决于设备本身。 关于各种设备如何处理大批量JavaScript的文章很多，但事实是，在不同的设备之间，即使是微不足道的处理时间也会有相差很大差距。

作者：陈晓强
声明：原创文章，转载请注明来源

前言

如果你有一个 Node.js 项目，并想使用 TypeScript 进行改造，那本文对你或许会有帮助。TypeScript 越来越火，本文不讲为什么要使用 TypeScript，也不讲基本概念。本文讲的是如何将一个旧的 Node.js 项目使用 TypeScript 进行改造，包括目录结构调整、TypeScript-ESLint 配置、tsconfig 配置、调试、常见错误处理等。由于篇幅有限，Node.js 项目能集成的技术也是五花八门，未覆盖到的场景还请见谅。

本文作者@千古壹号。

前言

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

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

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

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

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

作者：沐童

前述

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有基本的了解，并且能够用其完成简单的示例。 我是否知道它的工作原理而不仅仅是使用它？它到底为我们开发人员提供了什么？ 作为一个资深开发者，我如何向新手甚至不知道它存在的开发者解释它的工作原理？