随着 iOS 13 暗黑模式的发布，前端又要开始忙适配了。那么有没有一劳永逸的方法呢？当然是有的，往下看：

最近起的Vue新项目中用到了typescript和axios，并且axios中使用了响应拦截器：

1
2
3
4
5
6
7
8

service.interceptors.response.use(
  (response: AxiosResponse) => {
    return response.data;
  },
  (error: any) => {
    return Promise.reject(error);
  }
)

但是调用时发现返回值仍然是AxiosResponse<any>，这就导致如果在then里做一些关于res的判断时ts会报错：

1
2
3
4
5
6
7

this.$fetch
  .get(url, params)
  .then((res) => {
    if (res.someKey === 0) { // Property 'someKey' does not exist on type 'AxiosResponse<any>'
      // do something
    }
  })

经过一番Google后，终于找到了解决办法：新建一个shims-ajax.d.ts（不一定非要是这个名，任意的*.d.ts都可以）文件，重新声明axios模块，然后在调用时加上泛型，如下：

提炼函数

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

function printOwing(invoice) {
  printBanner();
  let outstanding = calculateOutstanding();
  //print details
  console.log(`name: ${invoice.customer}`);
  console.log(`amount: ${outstanding}`);
}

// 重构后
function printOwing(invoice) {
  printBanner();
  let outstanding = calculateOutstanding();
  printDetails(outstanding);
  function printDetails(outstanding) {
    console.log(`name: ${invoice.customer}`);
    console.log(`amount: ${outstanding}`);
  }
}

影响flex元素占据空间的因素有三个：flex-grow、flex-shrink、flex-basis，下面一一分析。

flex-basis

flex-basis指定了flex元素在主轴方向上的初始大小。默认值为auto，大小为元素的宽度/高度。如果设置了具体值，则占用的空间为设定的值（覆盖设置的width），但是受限于min-width和max-width。当设置为0时，空间大小也为元素的宽度/高度。

demo：

See the Pen
NoWpRj by abcdGJJ (@abcdGJJ)
on CodePen.

本文翻译自30-seconds-of-code，可以理解为高阶函数片段。原作者说是30s内就可以理解，而我每一个都看了几分钟。

Adapter

ary

创建一个最多接受n个参数的函数，多余的参数将被忽略。

使用Array.prototype.slice(0,n)和扩展运算符（...），调用提供的函数发fn，并且最多有n个参数。

1
2
3
4

const ary = (fn, n) => (...args) => fn(...args.slice(0, n));
// EXAMPLES
const firstTwoMax = ary(Math.max, 2);
[[2, 6, 'a'], [8, 4, 6], [10]].map(x => firstTwoMax(...x)); // [6, 8, 10]

本文翻译自thedaviddias总结的Front-End-Performance-Checklist

HTML

• 压缩HTML: 生产环境上的HTML代码应该是压缩的，注释、空格、新行需要被移除。

  原因：

  移除不必要的空格、注释和新行可以减少html的文件大小并且加快你的网站加载时间，减少了用户的下载流量。

  做法：

  大多数开发框架都有压缩网页的插件。你可以使用一系列的NPM模块来自动为你完成这项工作。

  • HTML minifier | Minify Code
  • Online HTML Compressor
  • Experimenting with HTML minifier — Perfection Kills

最近在开发百度的百度小程序，进行联调的时候发现只有手机百度APP的https请求不能被抓包，其他应用的https请求都可以被抓包，而且证书也安装正确。一开始怀疑是手百APP的问题，以为APP里面对https证书做了限制，但是和手百的人沟通后发现并没有做限制。后来在搜索这个问题的时候，无意间看见相关搜索中有这么一个词：Android7.0 无法进行https抓包，这才知道原来是Android系统的限制。

在Android7.0及以上的系统中，每个应用可以定义自己的可信CA集。默认情况下，应用只会信任系统预装的CA证书，而不会信任用户安装的CA证书。通过Charles安装的证书恰恰正属于用户安装的CA证书，因此会被视作不安全的证书。

目前来说，web攻防主要分为3部分：XSS、CSRF、SQL注入。

XSS分类

XSS攻击可以分为以下三类：

1. 反射型跨站攻击：指的是将用户输入的数据通过URL的形式直接或未经过完善的安全过滤就在浏览器中输出，会导致输出的数据中存在可被浏览器执行的代码数据。涉及浏览器-服务器交互。

2. 存储型跨站攻击：指的是Web应用将用户输入的数据信息未经处理直接存入数据库中，当页面进行数据库的查询展示时，会把攻击的代码直接在页面中输出展示。只要用户访问带有XSS攻击脚本的网页时，就会触发攻击效果，具有较强的稳定性。涉及浏览器-服务器-数据库交互。

3. DOM型跨站攻击：严格来说，基于DOM的XSS攻击并非按照“数据书否保存在服务器端”来划分，其从效果上来说也算是反射性XSS。但是这种XSS实现方法比较特殊，利用JavaScript的DOM节点编程可以改变HTML代码这个原理来形成的XSS攻击。一般攻击时需要对具体的DOM结构进行分析，构造攻击语句难度较大，较为少见。涉及浏览器-服务器交互。

toLocaleString介绍

toLocaleString用于将对象根据语言的不同转换成某种语言环境下的字符串，同时也可以根据传入的参数来判断具体的表现形式。本文主要介绍Number和Date类型的toLocaleString方法

Number.prototype.toLocaleString

首先谈一个面试中经常会被问道的问题：如何对数字进行千位符格式化？一般人可能想到的做法是换成字符数组循环手动插入,或者使用正则的方法。其实知道了toLocaleString完全可以不需要这么做，一行代码就能搞定。

1
2

const num = 1122333444455551
num.toLocaleString() //1,122,333,444,455,551

前言

2018年1月份Letsencrypt可以申请泛域名证书，这让我们部署多域名、多站点https省了很多功夫，终于可以不用维护多个域名的https证书。笔者以acme.sh为例，手把手教你配置https证书~

本教程适用于centos 6.x的linux服务器

acme.sh

acme.sh是国人开发的基于ACME协议的shell脚本，有了它可以很方便的从Letsencrypt生成免费的证书