一个前端研发视角下的ChatGPT使用体验

简介

本文内容由VsCode-ChatGPT辅助生成。

ChatGPT的发布引来了一轮新的浪潮，对各个行业均有所冲击。互联网上目前已存在大量对话案例，但普遍深度不够，且场景不够聚焦。

本文主要从以下几个方面，从微观到宏观的将一些日常开发者所面对的工作交由ChatGPT来处理以期洞察ChatGPT在哪些方面能提升研发体验，为研发提效。

1. 代码注释/解释：给业务代码添加注释、解释开源项目代码、解释复杂算法、解释开源项目方案。
2. 代码生成：根据研发者提出的细节需求生成一些符合预期的业务代码或者代码片段。
3. 方案生成：根据研发者提出的宏观需求做技术调研并生成方案。
4. 代替面试：代替人工面试。
5. 开放性问题：应对一些日常工作生活中的开放性问题。

细分领域预警，长篇幅预警，本文专注于前端研发领域，且使用了较多案例，包含大量代码，针对特定案例可先看小结再基于兴趣决定是否详细查看分析过程。

考虑到篇幅因素，注册及安装教程不再赘述。

背景

上文局域网自定义域名介绍了如何基于dnsmasq服务去管理局域网过多的服务与对应的IP和端口的问题。

本文记录一种基于Nginx的域名解析与内网穿透方案。用于解决如何更优雅的将家庭网络服务向公网提供的问题。

G2源码解析之代码组织结构

版本：V5.0.0-beta.10

背景

G2源码阅读系列文章的前置任务，学习优秀开源框架、熟悉代码组织结构，了解核心模块。

版本：V5.3.3

背景

本文浅析ECharts的事件系统是如何工作的，点击一个series之后，ECharts是如何执行的回调方法，非series元素是否可以设置事件，事件回调又是如何做性能优化的。

版本：V5.3.3

背景

ECharts作为一个配置的图表引擎，同时默认的渲染器又是Canvas。如果想要对ECharts的某个图元做一些自定义的编辑，如果ECharts并有没开发配置项、或者配置项的粒度不够，这时候就会变的比较困难。本文尝试探寻有没有方式可以拾取ECharts的图元，拾取之后是否有一定的方式可以针对图元做特定的编辑。

简介

Vue Playground支持选择不同的Vue版本，实时编码并实时预览。本文主要介绍其如何实现选择不同的Vue版本。

简介

Vue Playground支持选择不同的Vue版本，实时编码并实时预览。本文主要介绍其如何实现实时编码和预览。

局域网自定义域名

背景

由于家庭网络环境日渐复杂，服务器上跑的工程项目越来越多。人工强行基于IP+端口的方式来记忆各个服务着实有些费劲。本文简单介绍一下折腾自定义域名的过程。

拓扑

一个并不完整的家庭网路拓扑

正向代理与反向代理

背景

很自然的知道访问Google需要的代理是正向代理，通常情况下Nginx做的Web服务代理是反向代理。但到底什么是正向代理，什么是反向代理一直没有一个特别明确的感知。这里做个简单的整理。

图文解释

SVG后处理

背景

SVG规范中有关于style的定义，支持方式为HTML的Style。但在一些非浏览器环境下，对于Style的支持性并不好普遍常见于PPT,Sketch等场景。本文介绍了一种简单的方式来对SVG进行后处理以对PPT,Sketch等场景进行适配。同时介绍几种简单具体场景。

NPM Package

svg-visitor:基于访问者模式来遍历SVG元素。

原理

受 AST Visitor的启发这里设计了一个svg-visitor，来根据标签类型访问标签，并对标签元素进行处理。