0%

It’s relatively simple to manage projects on GitHub by oneself, but collaborating and contributing to open source projects is quite interesting. Here, I’llc write my experience in contributing to open source projects, such as inshellisense.

https://static.1991421.cn/2024/2024-03-17-144331.png

Taking the project inshellisense as an example:

  1. Fork the open source project, microsoft/inshellisense => alanhg/inshellisense

  2. Create a new branch, such as fix/file-template, and start development

    • If there are UTs, update them to ensure the tests pass.
    • Here, we do not use the main branch directly because the main branch is used to synchronize project updates to avoid new commits in the original project during development.
    • At the same time, creating a new branch can also better utilize the branch name to indicate whether the changes are a feature or a fix, etc.
  3. Push to the upstream, i.e., alanhg/inshellisense

  4. If the open source project microsoft/inshellisense has updates, pull the updates with Sync fork

  5. Rebase the branch fix/file-template with the main branch to ensure it is up to date

  6. Push again to the upstream alanhg/inshellisense

  7. Initiate a Pull Request, describe the changes in detail, and wait for it to be merged

    • If there are any issues during PR review, actively provide feedback and resolve them
  8. Celebrate 🎉 upon successful merge

  9. You can delete the branch fix/file-template, switch to the main branch, and if you have more contributions to make, repeat the process from step 5

Copilot CLI is now in public beta. I hadn’t played with it before, but now I’ve tried it out. Here’s how to use it and my thoughts.

Current version of CLI version 0.5.4-beta (2024-01-04)

Requirements

Like GitHub Copilot, it requires a paid subscription.

Installation

1
2
3
4
5
6
7
8
9
10
11
# Install GitHub CLI
brew install gh

# Update GitHub CLI
brew upgrade gh

# Log in to GitHub
gh auth login

# Install copilot
gh extension install github/gh-copilot

Once installed as above, it can be used normally.

Usage

The functionality of the CLI is currently quite simple:

  1. Explain command

    1
    gh copilot explain "git push"
  2. Suggest command

    1
    gh copilot suggest "install git"

Currently, it’s not possible to set prompt words, so the return results will be in English, but the command prompt words can be described in Chinese, as the underlying OpenAI supports multiple languages.

https://static.1991421.cn/2024/2024-02-08-231521.jpeg

That’s all for the CLI functionality for now, just these. Looking forward to more updates from the CLI, such as supporting system prompt words, or supporting chatting instead of being restricted to commands?

The blog still sticks to the Hexo technology stack. Here I mark the plugins I use

https://static.1991421.cn/2024/2024-02-08-112340.jpeg

Note: The configuration file is _config.yml

hexo-algoliasearch

Article search, free quota is sufficient

1
2
3
4
5
6
7
8
9
10
11
12
13
# https://github.com/LouisBarranqueiro/hexo-algoliasearch
algolia:
appId:
applicationID:
apiKey:
adminApiKey:
chunkSize: 5000
indexName: my_blog
fields:
- content:strip:truncate,0,200
- title
- permalink
- tags

hexo-excerpt

Automatic excerpt

1
2
3
4
5
6
# https://github.com/chekun/hexo-excerpt
excerpt:
depth: 5
excerpt_excludes: ['img']
more_excludes: []
hideWholePostExcerpts: true

hexo-generator-archive

Archive page generation

1
2
3
4
5
6
7
8
# https://github.com/hexojs/hexo-generator-archive
archive_generator:
enabled: true
per_page: 10
yearly: true
monthly: false
daily: false
order_by: -date

hexo-generator-feed

Generate feed.xml subscription link, serves RSS

1
2
3
4
5
6
7
8
9
# https://github.com/hexojs/hexo-generator-feed
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '

hexo-generator-sitemap

Generate site xml, useful for SEO

1
2
3
4
#Generate sitemap.
# https://github.com/hexojs/hexo-generator-sitemap
sitemap:
path: sitemap.xml

hexo-generator-tag

Generate TAG tag pages

1
2
3
4
# https://github.com/hexojs/hexo-generator-tag
tag_generator:
per_page: 10
order_by: -date

hexo-symbols-count-time

Article statistics generation, such as word count, approximate reading time, etc.

1
2
3
4
5
6
7
8
9
# @see https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true
exclude_codeblock: false
awl: 2
wpm: 300

hexo-theme-next

Site theme, I prefer theme-next, mainly because the configuration is also rich

1
2
# https://github.com/next-theme/hexo-theme-next
theme: next

In Conclusion

Hexo is currently still in an active state
The main focus of blog maintenance is still content, Hexo is still sufficient for now

Fig is a tool designed to improve efficiency and collaboration in command line usage. It offers a range of features. Recently, due to work requirements, I gained a relatively comprehensive understanding of Fig, so I’m marking it down here.

Supported Platforms

  1. Currently only supports Mac

  2. Linux is still in development, see the specific status at

Other Features Beyond Completion

  1. Dotfiles
  2. Scripts

Principle of Completion

  1. Traditional command completion is installed on the target machine, and many command-line tools either lack completion support or support it in a fragmented way. Fig chooses to solve this on the client side. For example, after installing Fig, it essentially loads predefined specifications on the client, prompting users to further select corresponding command options. After pressing enter, it writes back to the original terminal, thus solving the problem of difficult command input for users. Therefore, the advantage of this solution is speed, although it also consumes a certain amount of performance and space, as the more commands a user has, the more commands need to be loaded.
  2. Fig can display completion GUI across terminals
    1. The GUI itself is built with front-end JS/HTML/CSS
    2. Terminal interaction is achieved through a combination of Shell function hooks, Accessibility positioning, and front-end completion display, etc.

Resources of Fig

Fig is not just an App, it has contributed a set of resources over the years

  1. Completion Specifications

    The standards loaded in the App come from here, and with the power of the GitHub community, they are continuously updated. If you want to create a completion tool, then the specifications here can be directly used, as the Fig App is also a user of this set of specifications

    https://github.com/withfig/autocomplete

  2. Completion Specification Scaffold

    https://github.com/withfig/autocomplete-tools

    For example, if you want to contribute to the specifications or debug them, you can use the official completion tools.

  3. Command Manual

    If you want to know which commands Fig includes, you can check here

    https://fig.io/manual

Fig Next

On 08/28/2023, Fig was acquired by Amazon, which demonstrates the value of Fig.

Currently, downloading Fig from the official website, the DMG has been changed to CodeWhisperer [the product name launched after Amazon’s acquisition]. If you are still accustomed to the previous UI, it is recommended to install via brew, which still retains Fig.

https://fig.io/blog/post/fig-joins-aws

Products Implemented Using Fig Completion Specifications

  1. warp
  2. inshellisense

In Conclusion

Fig is an App, among which the most important feature is command completion. The most valuable aspect of Fig is not the App itself, but the establishment of a complete set of completion specification protocols. With the power of the community, it has also contributed 500+ command completion specifications. If we talk about subcommands, there are currently 28k. Therefore, it’s fantastic.

  1. https://fig.io/blog
  2. https://github.com/withfig

因为开发Web IDE,了解到code-server。使用了有一段时间了,这里总结下code-server使用/定制遇到的一些问题

介绍

code-server即Web版Visual Studio Code。本身code-server的架构中也是将vsc作为子模块开发的,因此很多feat也都兼容。如果你需要一款强大+与vsc几乎一致的开发体验,那么code-server非常合适。

Code-Server背后的技术

  1. code-server是node程序,但最后安装包里也内置了node,因此安装时不需要手动再安装node环境

  2. code-server本身项目也依赖了code即visual studio code。因此也就知道了vsc也是个node,但性能确实还不错

  3. code-server中的编辑器部分即monaco editor,终端部分即xterm.js。是不是都很熟悉,😊。

浏览器支持列表

按照官方人员所说,现代化的这些浏览器均支持,具体版本目前还没明确,但从技术栈来说用到了service worker.

  • Chrome, Firefox,Safari, Edge

不过现如今,ie退出了历史舞台,Edge也跟Chrome对齐,service worker这块不是问题了。

安装

  1. 使用官方一键安装脚本
1
2
# 支持指定版本安装
curl -fsSL https://code-server.dev/install.sh | sh -s -- --version=4.7.1

官方文档见:https://coder.com/docs/code-server/latest/install

问题是国内网络问题,如果安装不顺利,走2

  1. 使用离线安装包进行安装,注意服务器架构不同,选择不同的包

https://github.com/coder/code-server/releases

分发包区别

1
2
3
linux-amd64 表示 64 位 x86 架构(通常称为“PC”或“台式机”)。
linux-arm64 表示 64 位 ARM 架构(通常用于服务器、移动设备和嵌入式系统)。
linux-armv7l 表示 32 位 ARM 架构(通常用于较旧的 Raspberry Pi 或类似设备)。

后台运行

  1. 手动添加到服务

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    cat > /usr/lib/systemd/system/code-server.service << EOF
    [Unit]
    Description=code-server
    After=network.target

    [Service]
    Type=exec
    Environment=HOME=/root
    ExecStart=/usr/bin/code-server
    Restart=always
    EOF


    systemctl start code-server

    缺点是必须具备root权限,因为要添加到系统启动服务中

  2. supervisor

​ 需要安装该程序,程序依赖python2环境,好处是不要求必须是root用户权限

  1. &后台运行

    直接运行code-server

登录认证

$HOME/.config/code-server/config.yaml

拓展Extensions

  1. 安装方式多样,直接离线安装即拓展放在目标路径下即可,也可以访问code-server web时直接商店检索安装

code-server –help

code-server命令启动服务外,也可以进行一些操作

1
2
3
4
5
6
7
# 列出所有命令属性
code-server --help

# 列出已安装extension
code-server --list-extensions

...

常见问题

默认打开某个文件夹

URL配置folder参数即可

1
http://127.0.0.1:8080/?folder=/Users/xxx

动态打开行列号

code-server cli有-r参数支持 -r filename:row:column.

相关社区讨论coder/code-server#5801

语言切换

当安装了语言包后,web里可以切换显示语言,同时也可以直接通过配置文件设置缺省语言,当然前提是对应语言包也已安装

1
2
3
cat << EOF >  $ROOT_PATH/.local/share/User/argv.json
{"locale": "zh-cn"}
EOF

除了该办法外,还有个方式是code-server --locale=zh-cn

命令直接参数传入,坏处就是直接覆盖了原设置语言,不建议走该方式。

端口转发

实际使用中注意到code-server下启动web, code-server本身会做端口转发,这个也是个设置项

1
2
// 启用后,将检测到新的正在运行的进程,并自动转发其侦听的端口。禁用此设置将不会阻止转发所有端口。即使禁用,扩展将仍然能够导致端口被转发,并且打开某些 URL 仍将导致端口被转发。
"remote.autoForwardPorts": true,

microsoft/vscode#108346

心跳

注意到code-server会定期向服务器发送心跳以确保连接的稳定性,避免断开连接。默认情况下,心跳间隔是5秒。

主页面

比如code-server-4.8.3-2-linux-amd64/lib/vscode/out/vs/code/browser/workbench/workbench.html

CDN

code-server本身并不支持cdn配置,但可以通过直接改写workbench.html解决,因为所有的静态资源入口均在这里。直接将所有静态资源的URL改为CDN资源地址即可。前提是程序包中所有静态资源都已经托管到CDN

code-server在访问时,真正的动态内容主要是通过2条websocket请求和很少的几个http请求

定制化

code-server本身并没有多少定制化

  1. 通过配置文件
  2. logo等信息只能通过改源码解决
  3. extension可以增加ide功能和一定程度ui改变,比如底部状态栏,左菜单,这点与本地vsc一致

写在最后

如果是考虑搭建web ide,可以试试code-server

相关文档

This year, I’ve updated my collection of software and hardware tools. Here’s a summary.

Ezviz C6C Home Camera

Purchased in January 2023 for 233 CNY, including a 32G SD card. After a disappointing experience with a Xiaomi camera, I found the Ezviz to be satisfying, despite its software shortcomings.

image

Interested? Check it out on JD, https://item.jd.com/100029466747.html

Niu Electric Scooter

Acquired in July 2023 for 5699 CNY, MQiL city edition. I’m very pleased with its overall performance, including the ability to use my Apple Watch/iPhone to turn it on/off, not to mention its good looks.

Dyson Vacuum Cleaner v8

Purchased in September 2023 from JD for 1989 CNY. Despite being a budget option, the v8 performs well, offering strong suction and versatility as a handheld vacuum for sofas, mattresses, etc.

Logitech Mouse M720

Bought in September 2023 from JD for 169 CNY. I appreciate its multi-device connectivity, which is convenient for someone with two Macs like me.

Loctek Electric Sit-Stand Desk E5-N

Acquired in September 2023 from JD for 2071 CNY. It features 4 height settings plus memory function. I enjoy the option to stand while gaming or working, finding it refreshing compared to sitting for long periods.

AirTag

Purchased in June 2023 from JD for 178 CNY. Especially useful for locating keys via Siri/Find My, thanks to its beeping sound.

AirPods 3

Acquired in May 2023 from JD for 1196 CNY. As a loyal Apple user, I’ve upgraded from versions 1 and 2 to 3.

Bull magsafe Power Bank 10000MA

Purchased in November 2023 from Pinduoduo for 130 CNY. I prefer its texture and the convenience of wireless charging, which eliminates the hassle of searching for charging cables.

https://static.1991421.cn/2023/2023-12-04-220104.jpeg

ASICS GT2000 12

Bought in October 2023 from JD for 519 CNY. This is my fourth pair of the ASICS GT 2000 series. Despite some changes in design affecting breathability, the comfort level is impressive.

ChatGPT Plus

$20/month, but truly valuable for experiencing new GPT features. A great deal compared to API usage-based billing.

GitHub Copilot

$10/month, an incredibly handy coding assistant, even useful for writing markdown documents.

Netflix

Currently sharing an account for 40 CNY/quarter, a worthwhile investment for easy access to series and films without the hassle of searching for resources.

While implementing terminal search highlights with xterm.js, it’s essential to determine if the terminal is currently in vi editor mode. Research indicates that xterm.buffer.active.type can be utilized for this purpose.

Upon examining the corresponding type definitions, only two values, normal and alternate, are found. The origin of the term “alternate” led to further investigation, revealing its roots in the terminal’s alternate screen concept. This article aims to provide a comprehensive overview.

Alternate Screen Image

Alternate Screen - A Backup Screen

  1. This translation adheres to Apple’s terminology, referring to xshell as the terminal replacement screen.
  2. The alternate screen serves as a temporary interactive input screen, which must eventually revert back. For instance, in VI mode, although the screen’s display area remains unchanged, activating the alternate screen saves the original screen content, which is restored upon exiting.
  3. Hence, the concept of normal/alternate in xterm is not original but rather a fundamental design of the terminal, encompassing both normal and backup modes.

Conclusion

xterm.js represents just one implementation of xterm. To fully grasp xterm.js, it’s beneficial to explore various designs of the xterm terminal emulator.

Recently, when using an open source tool, I found a tool called tmux. Then I found that Tmux is quite popular, the repo star has 20K+, and my commonly used iTerm2 is also integrated with tmux. Based on this, it is necessary to understand tmux and clarify the usage scenarios.

Since the current use is still shallow, please point out if any mistakes

Concept

Start with the concept and understand its function.

tmux is a terminal multiplexer. It lets you switch easily between several programs in one terminal, detach them (they keep running in the background) and reattach them to a different terminal.

  1. Personal understanding is that tmux saves the terminal session on-site. For example, SSH is connected to a VPS, vi edits a file, directly closes the session, and then reopens the connection, you will find that the state is lost, you need to re-enter the target path and reopen it edit. With tmux, you can save this session, re-access the target machine, load the previously saved session, and everything will be restored as before.
  2. The reason why tmux can save sessions is because after tmux is installed on the target server, a separate service will be started for on-site saving.

Tmux Installation

Understand the above principles, you can understand that tmux is not necessarily installed locally, but installed on the machine that needs to save the session.

The installation commands in common operating system environments are as follows

1
2
3
4
5
# macOS
brew install tmux

# centos
yum install tmux
Read more »

Now many site services have a 2FA mechanism, and services such as login or online payment need to send a text message. Enter the verification code after receiving the text message.

In response to this mechanism, the iPhone supports automatic extraction, which can be filled by clicking, while on the Mac, only Safari has a similar experience. If you use other apps such as Chrome, you will lose this experience. In order to solve this deficiency, a workflow is developed here to optimize the experience.

Download Link:Click Here

Effect

As above, wait for dozens of seconds after sending the message, when the text message is received, enter 2fa to evoke the workflow, select the verification code item, and press Enter to copy to clipboard
board, ⌘ + v fills the target input box.

Notice

  1. There are differences in the validity period of different verification codes, so workflow provides the option to set the validity period. By default, the SMS verification code received within 10 minutes is queried.

  2. In order to read text messages on Mac, Alfred needs to have disk access permissions

    Read more »

The Alfred sdk has been packaged before. The way to use it is to manually install the package in the specific workflow js, and then require the corresponding module. The commonly used script filter construction, screening, and quicklook have encapsulated fn, which is easy to use. But there is no CLI support yet. In order to further improve efficiency, the development of CLI can be driven out. Mark it here for a little experience.

Solve pain points

  1. Use the CLI to automatically install the Alfred SDK package
  2. Generate default or specified JS files, and module loading is also built-in at the code level, which does not need to be written manually.

In this way, you only need npx @stacker/alfred-utils init , and then open index.js to write for business.

Read more »