区块链技术指南

https://yeasy.gitbook.io/blockchain_guide/01_history/ledger_history

拖拽:snapping-demo

移动:

撤销、重做:

吸附:

https://juejin.cn/post/6908502083075325959#heading-14

https://juejin.cn/post/6900710763657166855?utm_source=gold_browser_extension

nginx 相关

fastdom

https://www.zhihu.com/search?type=content&q=fastdom

requestAnimationFrame polyfill

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

(function() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||    // Webkit中此取消方法的名字变了
                                      window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
            var id = window.setTimeout(function() {
                callback(currTime + timeToCall);
            }, timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
    }
    if (!window.cancelAnimationFrame) {
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
    }
}());

Mac

为什么是 Mac?

首先对于刚刚接触MAC的小伙伴，会有一段适应期，当你真正熟悉它、了解它你就会发现他的简单优雅。

熟悉 Mac

你可以通过下面这篇文章对 Mac OS X 有一个基础的了解。 Mac使用技巧

Mac OS 下开发环境配置

你可以按照 Mac OS X 配置指南 | Mac OS X Setup Guide 这篇文章来配置你的开发环境。

当然如果你觉得他太长，我们帮你列出了在前端开发中必不可缺的一些软件：

安装 Xcode

Xcode 是由苹果公司开发，运行在 Mac OS 上的集成开发工具（IDE），我们需要提前安装他避免后续安装其他软件造成的一些问题。Mac OS 下安装 Xcode

安装 HomeBrew (需要提前安装 Xcode)

Homebrew是一款Mac OS平台下的软件包管理工具，拥有安装、卸载、更新、查看、搜索等很多实用的功能。简单的一条指令，就可以实现包管理，而不用你关心各种依赖和文件路径的情况. Mac OS 下安装homebrew

• 解决 HomeBrew 安装速度慢的问题
• 解决 Homebrew 443 Connection refused

1
2

udo vim /etc/hosts
151.101.108.133  raw.githubusercontent.com

安装 VSCode

我们通常使用 VSCode 进行开发。Mac OS 下安装 VS Studio Code

安装 Git

没有用过 Git? 还好意思说自己是程序员？ Mac OS 下安装 Git

安装 nvm

我们的前端业务项目依赖不同的 Node 版本，为了以后的开发体验建议直接安装 nvm。 Mac OS 下安装 nvm

什么是视口

视口(viewport)代表当前可见的计算机图形区域。在 Web 浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的 UI， 菜单栏等——即指你正在浏览的文档的那一部分。

• 在尺寸较大的设备中，在这些设备上，应用显示区域不一定是全屏的，viewport 是浏览器窗口的大小。
• 在大多数移动设备中，浏览器是全屏的，viewport 是整个屏幕的大小。
• 在全屏模式下，viewport 是设备屏幕的范围，窗口是浏览器窗口，浏览器窗口大小小于或等于视口的大小，并且文档是这个网站，文档的大小可比 viewport 长或宽。

概括地说，viewport 基本上是当前文档的可见部分。

使用 js 获取 视口的宽高：

1
2
3

document.docuemntElement.clientWidth     // 视口宽度
document.docuemntElement.clientHeight    // 视口高度

布局视口 (layout viewport)

innerHeight 和 innerWidth 所组成的区域通常被认为是布局视口(layout viewport) 。浏览器的框架不被认为是 viewport 的一部分.

视觉视口

移动设备的视口

参考文档：

1. MDN:视口概念

2. JavaScript中的各种宽高属性

3. Use rem for Global Sizing; Use em for Local Sizing

4. 利用视口单位实现适配布局

5. viewports 解析

6. flexible 深度解读

7. 再聊移动端页面的适配—– vw vh

8. 再谈 Retina 下 1px 的解决方案

9. PostCSS-modules: 让CSS变得更强大

bundleless

vite

snowpack

在本地开发的情况下会发出大量的网络请求，也叫做瀑布网络请求，本地开发时因为加载的本地文件，所以速度很快，配合 HMR 速度很快，实现编辑立刻生效等待时间很短。

但是如果在生产环境下，过多请求对于页面来说就不大好了。

特别是 HTTP1.1，浏览器都会有并行下载的上限，大部分是5个左右，所以如果你有60个依赖性要下载，就需要等好长一点。 虽然说 HTTP2 在某些程度上可以改进这些问题，但如果需要下载的资源太多依旧没有什么办法。

bundleless 在实际开发中的一些问题

1. 部分模块没有提供 ESModule 包。
2. 生态不够健全，工具链不够完善。

router 的简单实现

https://juejin.im/post/6844903890278694919

开发过程中需要安装很多工具链配并且进行各种配置辅助我们的开发，当我跳槽或者换电脑时就需要花费很多时间在这个上面；所以在这里把他们记录下来，避免去其他搜索网站上去搜索各种安装教程。

安装 VSCODE

(2020-08-26 可用）

下载地址： https://code.visualstudio.com/Download

安装 Homebrew

(2020-08-26 可用）

Homebrew是一款Mac OS平台下的软件包管理工具，拥有安装、卸载、更新、查看、搜索等很多实用的功能。简单的一条指令，就可以实现包管理，而不用你关心各种依赖和文件路径的情况

安装前需要配置翻墙代理 （如流中联系 IT， 按照教程配置代理即可），配置完成后在 terminal 中输入以下命令：

1

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

解决 Homebrew 安装时速度慢的问题

安装 git

(2020-08-26 可用）

你可以通过以下几种方式来安装：

• 通过 Homebrew 安装

在 terminal 中输入如下命令

1

brew install git

• 直接在官网安装二进制包

下载地址： https://sourceforge.net/projects/git-osx-installer/

检查是否安装成功

1

git --version

安装 nvm

(2020-08-26 可用）

• 使用 Homebrew 安装

在终端输入命令

1

brew install nvm

安装完成之后需要进行配置：将以下命令复制到终端执行

1

echo "source $(brew --prefix nvm)/nvm.sh" >> .bash_profile

执行命令

1

. ~/.bash_profile

• 使用 curl 命令安装

1

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

解决 Homebrew 443 Connection refused 的方法

修改本机 hosts

1
2
3

sudo vim /etc/hosts
 
151.101.108.133  raw.githubusercontent.com

icode 平台遇到的问题

1. clone 代码 clone 代码代码提示 Authentication failed

• 解决：terminal 提示让用户输入的密码并不是自己的密码。icode 平台需要自己设置一个密码， 修改密码 ， clone 后输入这个密码就可以了。

抓包工具

charles

破解及基本使用
进阶使用方法

旅游电商专用词汇

1. 什么是 OTA ？

1

Online Travel Agency 在线旅行社

网络广告术语

1. CPC

1
2
3
4
5
6
7

CPC计费收入

=ad-click*acp=广告点击次数*平均点击价格

=ad-show*ctr2*acp=广告展示次数*每次展示点击数*平均点击价格

=refresh*asr*asn*ctr2*acp=刷新次数*每次刷新出现广告概率*每次刷新广告条数*每次展示点击数*平均点击价格

2. ACP

1

Average Click Price 平均点击价格总消费/总点

3. CPS

1

Cost Per Sales的方法是通过实际的销售量进行收费的，更适合购物类APP进行推广，但是需要精确的流量进行数据统计转换，很多软件都通过此类方式成功推广。

4. CTR

1

CTR（Click-Through-Rate）即点击通过率，是互联网广告常用的术语，指网络广告（图片广告/文字广告/关键词广告/排名广告/视频广告等）的点击到达率，即该广告的实际点击次数（严格的来说，可以是到达目标页面的数量）除以广告的展现量（Show content）。

6. CPT

1

每时间段成本。CPT是一种以时间来计费的广告，国内很多的网站都是按照“一个星期多少钱”这种固定收费模式来收费。