你好!

我是螺丝!

一名具备心理学、认知神经科学、教育学背景、设计技能的网络前端开发工程师。

亮点

  • 我具有和认知神经科学、心理学、编程与设计相关的综合背景,这让我能够更好的理解来自团队中不同角色的需求,并更有效率的完成它们。
  • 我不仅接受过系统的教师职业技能训练,同时还具有数据科学、神经科学、心理学等相当综合的专业背景,这能为学生提供一个宽广的视角。
  • 我善于令事物易于理解,比如设计直观的交互界面,撰写易于理解和实践的文档。同时我也有主持技术工作坊和相当多的公共演讲的经验。

项目经历

科研相关

ezTrigger System

一套多设备复杂实管理框架系统。

Node.jsElectronAHK

ezTrigger System 是一套基于 TCP Socket 的多设备实验管理系统。它能够帮助研究者将多台被试机和实验设备连接至同一局域网进行管理。该系统提供了统一的通信协议和API接口,从而避免了学习多种硬件接口的成本和改变实验设备的切换成本。

我负责设计了该系统的通信协议,并实现了服务端框架(使用 Node.js)和客户端框架(使用 Electron)。此外,我还为 LABNIRS系统和PsychoPy设计了适配器(使用 AHK 和 Python)。

目前,该系统已成功应用于6个实验研究项目中。

brainSpy

批量将 MNI 坐标转换为 AAL/BA 脑区标签。

Python

这是一个受到 label4MRI 启发的高效标记程序。在脑区标记的工作中,将大量的脑区坐标转换为相应的标签是一项繁琐的任务。目前缺乏高效的转换工具来快速将 MNI 坐标转换为脑区标签。为解决这个问题, BrainSpy 提供了一种快速且灵活的标签转换方法。

我设计了BrainSpy的基本架构,并创建了一个私有格式的存储结构图谱,这样可以减少使用Python打包输出的程序的尺寸。

网络开发

好棒科技

一个专注教育游戏化的内容生产团队。

ReactTypeScriptElectronPIXI.js

由前一家公司经过财务重组后建立的新公司,专注教育游戏化的内容生产公司。

这家公司是在前一家公司进行财务重组后成立的新公司,专注于教育游戏化内容的生产。我在这家公司担任架构设计师和技术指导者的角色。

在这个过程中,我们对微前端架构进行了重新整理,并使用了不同的微前端解决方案来应对不同类型的任务。为了解决跨域通信的性能和类型安全问题,我们还重新调整了通信机制,显著提升了应用在低性能平台下的流畅性,从而提高了整体性能和用户体验。

在性能优化方面,我们通过重新设计了任务调度机制,有效地解决了 iOS 平台下 WebGL 发热的问题和其他移动平台的掉帧问题。此外,通过重新设计资源管理架构,并结合数据标签和积分机制,我们成功地应对了国际化和多平台多版本分发所带来的工程复杂性。

通过使用数据建模技术,我将 GFXBench 平台的各个显卡数据进行了关联,成功构建了一个能够同时利用所有测评结果的标准化数据集。这个综合数据集包含了更多型号的显卡数据,为客户端的性能优化策略提供了更为可靠的数据基础。

进一步的,我独立负责了内容管理和分发平台的产品设计、界面设计和开发工作。通过采用简洁、一致的设计系统,我成功地提升了内容管理的效率,改善了内容管理的体验。通过适当的架构设计,成功解决了多内容、多平台产品部署的问题,并通过增加自动化流程,显著简化了产品上线的复杂度。

最后,我推动了该项目内部基建的开源化工作。为了确保开发者能够更好地理解和使用我们的技术,我撰写了上百页的架构设计文档和 API 使用文档。这些文档详细描述了项目的整体结构、关键组件的功能和接口规范,以及最佳实践和示例代码。通过提供清晰而详尽的文档,我帮助团队成员更好地理解项目,提高了开发效率,减少了沟通和学习成本。 这些文档也为未来的团队成员和外部开发者提供了宝贵的参考资料,促进了项目的可持续发展和协作。

基本操作 Playground

一个由回形针团队出品的内容付费平台。

ReactTypeScriptPIXI.jsThree.jsCanvas / WebGLGo

一个由回形针团队打造的内容付费平台托管了高质量的视频和文章内容。我们发布的第一套视频节目《一个人工智能的诞生》创新地将游戏元素融入了视频内容,引起了广泛的社会关注和讨论。

在工程方面,我负责该网站核心业务逻辑的开发,并将 JavaScript 工程重构为 TypeScript 工程,显著提升了项目工程的可维护性。作为开发团队的一员,我也承担了大量的探索性工作,例如提供交互程序开发的最佳实践,并设计并开发了项目基础设施中的核心API。此外,我参与了工程规范的制定,确保整个团队在开发过程中保持一致的标准。

在性能与内存使用优化方面我也发挥了积极的作用。例如,针对机器学习过程的演示任务,我设计了一个数据生成及获取模型,帮助页面渲染达到了满帧率的目标。为了优化移动端应用的贴图内存占用,我设计并实现了一个受到许多 WebGL 开发者青睐的在线贴图转换工具,其易用性备受赞赏。

此外,在项目推进过程中,我充分发挥了自己在设计领域的经验。例如,我参与了交互视频中交互节点的开发和动效设计。通过积极与设计和内容团队沟通,我在视觉和工程之间找到了平衡,实现了卓越的用户体验。通过理解设计师的意图和范式,我还开发了一些内部工具,用于实现更加复杂的动画效果。

除了前端开发工作之外,我还承担了更多的职责,比如开发了内测平台的网关并参与了一部分的运维工作;同时参与了 Telegram 平台的社区运营工作。

社会语言课题组网站

一个用心设计的、基于 Material Design 系统的网站。

ReactWebpackExpressIISPhotoshopIllustrator

利用 React、Webpack 等现代化的前端技术栈,及 Express 框架所设计的课题组网站,本站利用了服务端渲染技术对全站加载速度及 SEO 进行优化,同时通过一些特殊的技术手段实现了 IIS 上的静态 gzip 内容压缩从而提升了客户端的加载速度。

本人完成了该项目的全部前端、后端编程工作,以及大多数的文案、翻译及摄影工作。

Axiom Design System

尝试将 Material Design 系统与 Fluent Design System 进行融合的实验性项目。

Web ComponentsReact

一项正在进行中的实验性项目,尝试构建高效、符合直觉的设计系统及有关的 Web Component 组件。

作为该项目组的成员之一,我利用最新的 Web 技术成功实现了 Fluent Design System 的几个复杂核心视觉效果,如高光组件、亚克力材质、按钮倾斜动效以及常见的复合阴影容器。通过精确还原设计系统的所有细节,我们为在 Electron 平台和浏览器中准确还原 Web 体验提供了可能性。

其中的光效组件(Reveal Highlight)不仅实现了光效本身,还将扩展出了圆角、切角、内凹角这三种新的形状效果。通过采用了性能更好的 Canvas API,并进行了精细的多层贴图缓存处理,它的性能达到了了理想的 60fps 帧率,目前为性能最佳实现之一。

另外复合阴影容器则通过线性回归对 Fluent Design 的阴影系统进行建模,实现了任意深度的阴影效果。相较于传统的几个档位实现,这套 API 为设计工作提供了更大的灵活性。

设计相关

萌卡主页设计

开源游戏王卡牌社区的一期、二期网站首页设计。

CSSJavaScriptPhotoshopIllustrator

萌卡 YGOPro 是一个运营九年的开源、免费的游戏王卡牌社区。在该项目中,我负责主导了萌卡社区网站第一版和第二版的首页设计,并完成了相应的 CSS 源代码编写工作。

这两套前端设计经过数年的线上使用,成功为众多游戏王玩家提供了服务。

开放 PPT 计划

一系列遵循 CC-BY 4.0 协议开放的幻灯片设计资源。

PowerpointIllustratorPhotoshopAudacity

PPT 的缩略图

开放 PPT 计划是一个以 CC-BY 4.0 协议开放的免费 PPT 资源分享计划。该项目的主要目标不仅是分享PPT 设计模版,更注重于分享 PPT 内容的拆解和思路的整理,以及通过视觉设计技巧和动效技巧引导听众关注焦点。

在本项目中,我分享的所有 PPT 资源都来自我近几年所做的文献报告和公开演讲。我独立完成了这些资源的视觉设计和内容设计,确保它们的质量和独特性。这些资源遵循 CC-BY 4.0 协议,允许他人自由使用、共享和修改。

教育与心理学

R 工作坊

一个和 R 有关的小型工作坊。

RPowerpoint

一个小型的 R 工作坊,其目的是帮助听众在最短的时间内了解和 R 有关的最基本知识,并且学会利用 ggplot2 进行绘图。

我编写了整个工作坊需要的教程代码、讲义、课件,并在这一工作坊中担任讲师。

远古课堂

一组和心理健康教育有关的实验性课程设计。

Node.jsElectronReactWebSocket

远古课堂是一个包含两门实验性教育课程的项目,通过尝试不同的实验性技术,旨在探索重塑传统课程结构的可能性。这两个课程的设计以现代技术为基础,提供了全新的学习体验。

团体咨询技术课程:在这个课程中,我设计了一套利用团体咨询技术的教学方法,旨在引导学生发现自己和其他人的优势与长处。通过使用现代技术,我们重新构思了传统的课程结构,为学生提供了一种更加互动和参与式的学习体验。作为项目的核心,我开发了一款手机应用、课件和服务器程序,这些工具在授课过程中起到了关键的作用。

手机媒介课程:第二个课程以学生的手机为媒介,旨在带领他们一起探索潜在的兴趣和爱好。通过与学生的手机装置,我们创造了一个互动的学习环境,让学生能够更好地理解和发展自己的兴趣领域。在这个项目中,我负责设计并开发了相应的手机应用、课件和服务器程序,这些工具对于课程的顺利进行起到了至关重要的作用。

通过我的设计和开发工作,这两个课程得以成功实施,为学生提供了与传统课堂完全不同的学习体验。我的工作涵盖了手机应用程序的开发、课件设计和服务器程序的搭建,确保了项目的顺利进行和学生的积极参与。

WordChallenge R

单词背诵管理系统。

R

利用 R 语言实现的、帮助应试用户管理生词学习的系统,这套系统可以自动生成纸质版的汉—英及英—汉词表、词汇测验试卷,自动标注考纲外词汇及重复出现的词汇。

我设计了这套系统、撰写了部署文档。

Project Bota

基于 VR 技术的沙盘游戏治疗产品。

JavaScriptBlenderIllustratorUnity

Project Bota 是一套利用虚拟现实(VR)技术和沙盘游戏技术进行心理咨询的解决方案。该项目获得了2015年「互联网+」大学生创新创业竞赛省级金奖和2016年「创青春」大学生创新创业竞赛省级金奖以及国家级银奖。

在这个项目中,我担任主要发起人和领导者的角色,并参与了多个方面的工作,包括商业计划书的撰写、校对、VI(视觉识别)设计、印刷品平面设计以及3D模型的构建。我的职责涵盖了项目的项目规划、组织管理和设计实施。