Attack on Life ⚔️

iTerm2下实现点击文件唤起IDE

发表于 2022-03-04 更新于 2025-01-08 本文字数： 1.4k 阅读时长 ≈ 2 分钟

本文是作者对iTerm2下实现点击文件唤起IDE的介绍，包括iTerm2下实现点击文件唤起IDE的优势、实现细节、相关资料等，这些步骤可以帮助作者提高iTerm2下实现点击文件唤起IDE的效率。

终端下光标移动到文件路径上，⌘+click可以触发执行某个命令，比如点击一个项目文件夹，触发WebStorm，但是有时我希望不同的文件类型，触发不同的动作，这样就需要自定义脚本进行拓展。

解决方案

实现方案如下，因为个人Shell渣渣，为了方便，实际打开IDElogic使用JS编写，只是在shell中执行nodejs

阅读全文 »

React中的ref

发表于 2022-03-01 更新于 2025-01-08 本文字数： 2.8k 阅读时长 ≈ 5 分钟

本文是作者对React中的ref的介绍，包括React中的ref的优势、实现细节、相关资料等，这些步骤可以帮助作者提高React中的ref的效率。

React中ref还是很常用的，它使父组件具备操作子组件/原生DOM的能力，比如控制一个modal组件弹窗显示等等。但使用上有时会遇到一个不注意的坑，这里梳理下。

ref挂载元素成功后，并不会触发组件重新渲染

有时会将useEffect依赖中增加ref或者ref.current，但实际上当ref中引用的组件被挂载后，ref.current虽然已经保存了实例引用，但组件并不会触发重新渲染，更别说effect重新执行了，因此遇到此类需求需要修改方案来解决，方法如下

ref的使用，可以直接ref对象赋值，也可以callback，两种方式本身作用是一致的，唯一区别是如果想在挂载时执行一些动作，可以使用callback，举个🌰

function App() {
  const pElRef = useRef<any>();
  const [refresh, setRefresh] = useState(0);
  useEffect(() => {
    console.log('render?');
  }, [refresh]);

  const onAttached = useCallback((ref) => {
    if (refresh === 0) {
      setRefresh(refresh + 1);
    }
    pElRef.current = ref;
  }, [refresh]);
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo"/>
        <p ref={onAttached}>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

如上，增加state参refresh，在挂载成功时修改从而做到重新渲染。

HOC下的ref传递

使用组件时有几个参数是特殊的，比如key，又或者是ref。它们并非属于props，react下会进行特殊处理，比如在HOC下，就需要注意。

阅读全文 »

关闭恼人的微信网址拦截

发表于 2022-02-27 更新于 2025-01-08 本文字数： 2.6k 阅读时长 ≈ 4 分钟

本文介绍关于关闭恼人的微信网址拦截，包括使用场景、实现细节等，以提高关于关闭恼人的微信网址拦截的效率。

在微信中打开一些网页时总会出现以下拦截提醒，遇到这种情况时必须点击继续访问。技术人不忍这种流氓事，于是着手从技术上解决这个体验问题。

Tampermonkey浏览器插件

首先想到的是这个方案，解决步骤如下

Chrome浏览器下安装插件Tampermonkey（油猴）

插件中增加如下脚本，该脚本我已已经开源，不想了解具体实现的直接安装即可。

// ==UserScript==
// @name         Redirect URL
// @namespace    https://1991421.cn
// @version      0.1
// @description  解决恼人的网页拦截，比如微信打开链接
// @author       Alan He
// @match        https://weixin110.qq.com/cgi-bin/mmspamsupport-bin/newredirectconfirmcgi*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// @run-at document-end
// ==/UserScript==

(function() {
    'use strict';
     function htmlDecode(input) {
        var doc = new DOMParser().parseFromString(input, 'text/html');
        return doc.documentElement.textContent;
      }

    if(window.location.href.match(/^https:\/\/weixin110.qq.com\/cgi-bin\/mmspamsupport-bin\/newredirectconfirmcgi/)){
      window.location.href=htmlDecode(cgiData.url);
    }
})();

如上操作后，当访问拦截被拦截，也会快速跳转到目标网页。

阅读全文 »

组件库文档搭建-Storybook

发表于 2022-02-25 更新于 2025-01-08 本文字数： 1.6k 阅读时长 ≈ 3 分钟

本文介绍关于组件库文档搭建-Storybook，包括使用场景、实现细节等，以提高关于组件库文档搭建-Storybook的效率。

最近参与组件库开发，为更好的推广使用组件库，需要搭建下文档。调研了几款组件库文档框架，务实的选择了storybook，因为其流行且满足诉求。

框架简单，但还是踩了些坑，这里mark下。

使用

# 初始化
$ npx sb init

# 热启动，即可WEB浏览
$ npm run storybook

阅读全文 »

群晖Chrome下载插件只支持HTTPS

发表于 2022-02-19 更新于 2025-01-08 本文字数： 469 阅读时长 ≈ 1 分钟

本文介绍关于群晖Chrome下载插件只支持HTTPS，包括使用场景、实现细节等，以提高关于群晖Chrome下载插件只支持HTTPS的效率。

最近NAS Download Manager (for Synology)插件更新后发现只支持HTTPS地址，但是我的NAS下载服务目前仅支持HTTP，因此考虑在客户端解决该问题。

解决方案- whistle

whistle可以代理HTTPS请求，自行签发证书，因此可以解决。

配置whistle及Chrome插件，确保可以拦截请求

步骤如下，具体可查看whistle官方文档
1. whistle开启HTTPS
2. rootCA证书安装且信任
3. 安装插件比如SwitchyOmega，解决Chrome走whistle代理
增加并开启rule，解决HTTPS到HTTP的转换，使whistle代理后，最终还是发起http请求
1
2
# NAS服务链接
/https(://110.100.176.222:50098.+)/ http$1

如上配置后，将地址贴到下载插件下，即可正常联通使用。

阅读全文 »

0%