第二周了！

让别人连上你的手机热点就能给他共享VPN网络

VPN 热点 - Google Play 上的应用

又一个远程桌面的选择 Parsec

缓解信息焦虑

上周的提到了自己卖掉了 DEVONthink 这款软件，当时记录这么一段关于信息焦虑的想法：

在今天读到 GeekPlux 的文章 我获取信息的方法 2022 版 中也有很相似的想法：

1. Read it Later 是伪需求，稍后读里面的文章基本是 Read it Never

2. 收集信息不如把信息内化成自己的认知

3. 学会利用搜索引擎

Laracasts 的 Logo 动画是如何实现的？

通过开发者工具分析是用的 Keyshape 这个 Mac 软件，导出 SVG 动画（并实现了一个 JS 动画库）。

这种方案基本没有什么代码上面的工作量。看一个 DEMO

GA 的替代品 Plausible

给网站添加一个访问分析的工具

类似的工具还有

• umami

• Splitbee – Your all-in-one analytics and conversion platform

• Self-hosted website analytics | Ackee

Game

最近发现好多人在玩 Dread Hunger 这个游戏 你要不看看 😀

JavaScript 分组排序

// 原数据
const list = [
  { eeid: 'bottom_bar_click', param_id: 'param2' },
  { eeid: 'top_shop_btn_click', param_id: 'param2' },
  { eeid: 'top_shop_btn_click', param_id: 'param1' },
  { eeid: 'bottom_bar_click', param_id: 'param1' },
];
// 期望
// const list = [
//   { eeid: 'bottom_bar_click', param_id: 'param1' },
//   { eeid: 'bottom_bar_click', param_id: 'param2' },
//   { eeid: 'top_shop_btn_click', param_id: 'param1' },
//   { eeid: 'top_shop_btn_click', param_id: 'param2' },
//   ...n个
// ];

const events = [
  { id: 'bottom_bar_click' },
  { id: 'top_shop_btn_click' },
];

const eventfindIndex = (id) => {
  return events.findIndex((item) => item.id === id);
};

const result = list.sort((a, b) => {
  return (
    eventfindIndex(a.eeid) - eventfindIndex(b.eeid) ||
    a.param_id.match(/\d+/g) - b.param_id.match(/\d+/g)
  );
});

console.log(result);

起因是最近工作上有个埋点数据管理的需求，需要把客户端埋点上报的数据结合文档整合到管理后台以供查阅（具体细节展开查看👀）

通常客户端上报的数据大概是这样的：

project_id: 1, // 客户端所表示的项目ID
uuid: "10",  // 用户ID
eid: 1, // 事件ID
eeid: "bottom_bar_click", // 二级事件ID (可选)
param1: "",
param2: "",
param3: "",
param4: "",
param5: "",
param6: "",
param7: "",
param8: "",
param9: "",
param10: "",
param11: "",
...

埋点接口是个通用接口这意味着 param1~n 会根据 project_id、eid、eeid 的不同代表各种含义，例如：

• eid=1 情况下 param1 含义是平台类型 (Facebook=1 Google=2 Apple=3)

• eid=2 情况下 param1 含义是书籍ID

但是管理后台的 Table 显示的表头、内容如果显示这种格式，查看的时候是很耗费心力成本的，所以期望显示的格式应该是这样：

[
  { eid: 1, eeid: "", uuid: "10", param1: "1", param2: "d10" },
  { eid: 1, eeid: "", uuid: "10", param1: "2", param2: "d10" },
]

一级事件	用户ID	平台类型	设备ID
第三方账号绑定	10	Feedback	d10
第三方账号绑定	10	Google	d10

eid=2 & eeid=book_click

[ 
	{ eid: 2, eeid: "book_click", uuid: "10", param1: "b10", param2: "1" },
  { eid: 2, eeid: "book_click", uuid: "10", param1: "b10", param2: "2" },
]

一级事件	二级事件	用户ID	书籍ID	书籍类型
通用点击事件	书籍点击	10	b10	科学
通用点击事件	书籍点击	10	b10	互联网

这样一来就需要有一个页面去管理这些表头、内容值的文本翻译配置：

// 配置列表
[
	{
		eid: 1,
		eeid: 'book_click',
		param_id: 'param1',
    param_name: '书籍ID',
		param_name_en: 'Book ID',
		param_values: []
	},
	{
		eid: 1,
		eeid: 'book_click',
		param_id: 'param2',
    param_name: '书籍类型',
		param_name_en: 'Book type',
		param_values: [
		  { vid: '1', name: '科学', name_en: 'Tech' },
	    { vid: '1', name: '互联网', name_en: 'Internet' },
	  ]
	},
]

二级事件	参数ID	参数描述	参数值	参数值描述
书籍点击	param1	书籍ID
书籍点击	param2	书籍类型	1	科学
>>展开项>>			2	互联网

按照目前的 Table 来看，如果 二级事件、param1~n 按顺序添加的话是没问题的，但如果后面添加的数据不按照顺序的话就会变成这样：

二级事件	参数ID	参数描述	参数值	参数值描述
书籍点击	param1	书籍ID
书籍点击	param2	书籍类型	1	科学
>>展开项>>			2	互联网
书籍 XX	param11
书籍点击	param11
书籍点击	param5

而这种情况就需要处理数组的排序，让数据先通过二级事件的顺序分组，然后再去排序 param1~n