Cafe Blogs

两年前买了个八位堂的手柄，用到现在摇杆时不时会出现漂移问题了，所幸官方有提供校准方案；

但因为我自己经常忘记，所以还是在这里记录一下，不用去反复问客服。

首先，同时按下：「LB」 「RB」 「+」 「-」 四个按键

长按约十秒后，开机按键指示灯快速闪烁，操纵摇杆顺时针3圈，连续按压扳机键

再次按下：「LB」 「RB」 「+」 「-」 四个按键，随后松手，即可完成。

最近好几个月原生的 CSS 写的越来越少了，主要写的都是 SCSS 和 LESS，就算有写 CSS 也基本是用 SCSS 先写一遍后期修改时再动 CSS。
今天接手了一个老项目，需要写点样式，写着写着就发现一个很奇怪的事情。

div {
  position: relative;
  width: 886px;
  height: 438px;
  /* .... */
  color: #FFFFFF;
  span {
    position: relative;
    z-index: 10;
    color: #848484;
  }
}

正常来说上面的写法其实是错的，但没想到浏览器居然正确识别了，当时我写了三次才反应过来，我写的应该是 CSS 才对呀。原生 CSS 也支持 SCSS 那种嵌套语法啦？特意搜了一下，果然。

MDN Web文档 - CSS嵌套，人家在2023年就支持了，我居然现在才知道，真是孤陋寡闻了我。

(顺便查了一下兼容性，caniuse - CSS Nesting ，基本只有23年后的浏览器支持，我这老项目是不合适的了)

如何将单个数值转换成数组

如：5 ---> [1, 2, 3, 4, 5]

// Array.from
const number = 5;
const numArr = Array.from({ length: number }, (_, i) => i+1);

// 运算符展开
const number = 5;
const numberArr = [...Array(number).keys()].map(x => x+1);

// 兼容旧浏览器
const number = 5;
const numberArr = Array(number).fill().map((_, idx) => idx + 1);

以上几种方法都算是一种花活（语法糖？感觉还算不上），他们甚至可能在性能上比不过传统 for 循环或者 while 循环。但至少看起来比较简洁，甚至可以直接封装成简单方法。

最近遇到一个问题，我重装了电脑，顺便也安装了 nodejs 的版本，但是有一个经常使用的工具很久没更新了，理论上它只支持到了 node14 版本，但我原先的电脑上， node16 和 node18 版本上使用都是正常的，唯独我现在的 node20 版本上会报错。（最诡异的是，我朋友电脑 node20 使用这个工具也不会报错）。issues 上也有人提了同样的问题，但作者已经很久没管了，大概是弃坑了。
这个工具虽然我用得不多，但是用到时一般又是挺重要的，所以必须要处理。

我的猜测是：这个工具需要编译，且必须使用 node14 版本环境下编译，编译后就可以在任意环境下允许了。我目前的项目已经不少是依赖高版本 node 了，所以现在只需要有个快速切换 node 版本的工具就可以了。

这个我用到的是 windows 平台下的 nvm 工具。
仓库链接：https://github.com/coreybutler/nvm-windows

# 安装好后记得配置一下 path 环境变量
nvm -v # 查看版本

nvm list available # 查看可用版本

nvm install 14.19.1 # 安装指定版本

nvm list # 查看已安装版本

nvm use 14.19.1 # 切换到指定版本

nvm uninstall 14.19.1 # 卸载指定版本

最近给 CPU 升了一下级，换成了5700x3d （B450主板，最高支持5000系锐龙），玩了几天对比起原先的 3100 确实有质的飞跃。就我最近玩的鸣潮来说吧，已经可以无压力稳定1440P60帧了，解锁帧率限制，日常120，激烈战斗场景也能有90。

其实游戏倒是次要的，主要是这U也有8核16线程，现在后台挂好几个项目和应用都能应付了。

没有选择上位 5800x3d 是基于钱包和我个人需求考虑的，我的核心诉求是多核多线程，用来对付我逐渐变多的后台应用和项目（电脑常年两三个IDE，MAA，模拟器，Steam，小红车，代理以及各类工具挂着）。58x3d 只在频率上比 57x3d 高，性能对比上大概是 5% 左右的差距，但 57x3d 价格更便宜，考虑到性价比感觉还是买 57x3d。

（更主要的是，当时58x3d已经没有多少正常渠道售卖的散片了）

比较可惜的就是目前的 x3d 会降低核心频率，从 5700 的 4.6GHz 降到了 4.1GHz，降幅还是不小的。不过虽然降低了频率当时换来了更大的缓存，对于游戏这类对缓存敏感的程序非常有帮助。

有个非常简单的需求，主要是换一下页面的配色，但是样式中有部分图片资源是设计出的，不想重新用PS改又想用简单的方法直接替换（后续可能还得继续换）

找了一下资料，发现 CSS 中的 filter 可以实现这个功能。

/* 这里可以直接把 #000000 的文字 转换成 #f2c6ff 的文字 */
text {
    font-size: 16px;
    color: #000000;
    filter: invert(83%) sepia(36%) 
            saturate(681%) hue-rotate(204deg) 
            brightness(98%) contrast(106%);
}

这里有个简单的在线换色工具，张鑫旭大佬写的，挺好用的：https://www.zhangxinxu.com/sp/filter.html

这东西只适合处理简单的小图片或者文字，复杂的图片建议用 SVG 或者找设计师出图。

识别不同的 UA 环境

const UA = window.navigator.userAgent.toLowerCase()

// Android
const isAndroid = /android/.test(UA)

// IOS
const isIOS = /iphone|ipad|ipod|ios/.test(UA)

// 浏览器环境
const inBrowser = typeof window !== 'undefined'

// IE
const isIE = /msie|trident/.test(UA)

// Edge
const isEdge = UA.indexOf('edge/') > 0

// Chrome
const isChrome = /chrome\/\d+/.test(UA) && !isEdge

// 微信
const isWeChat = /micromessenger/.test(UA)

// 移动端
const isMobile = 'ontouchstart' in window

微信小程序 Promise 化

function promisify(fn) {
  return function (options) {
    return new Promise((resolve, reject) => {
      fn(
        Object.assign({}, options, {
          success: resolve,
          fail: reject
        })
      )
    })
  }
}

// 例 获取系统信息
promisify(wx.getSystemInfo)
  .then((res) => {
    console.log('success', res)
  })
  .catch((err) => {
    console.log('fail', err)
  })