(2020年4月)独立设计+研发,甘特图部分用Canvas技术渲染,实现甘特图实时编辑,所见即所得。它能在需要跟踪项目进度的PC Web端OA系统上直接复用。支持鼠标拖拽直接创建任务和修改起止日期,支持从云端直接导入JSON格式数据初始化渲染甘特图,支持导出高清甘特图供下载打印。甘特图在各行业涉及需要跟踪项目进度的场景中需求极高,值得我将该作品作为产品继续研发使其功能更易用,用户体验更好。

甘特图在线编辑工具截图演示

(2019年9月)独立研发,纯Canvas技术渲染实现。该作品用信息可视化手段梳理了从JavaScript的“null”值到浏览器宿主环境“window”对象的引用关系,顺理成章的概括了JavaScript语言所有内置核心构造函数。总览整幅作品,你会惊喜地发现流动中的线条即是原型链的方向。该作品适用于大屏展示与JS教学演示。

JavaScript原型链可视化截图演示

(2020年6月)独立设计+研发,擅长原生JS开发的我首次采用ReactJS前端框架开发该作品。一次读书偶然的放空,我把“叶子”和“历史”联系了起来:历史由无数人与事构成,大树由无数枝干与叶子组成,叶子爬满树枝构成一棵遮阴挡雨的大树,人或继承或创造有价值的事组成我们灿烂的文明史。鼠标左右拖拽视图变换岁月,认识处于相同或不同时代的优秀历史名人和他们创造的历史价值。

历史的叶子作品截图演示

(2019年9月)独立开发。基于web端3D可视化库ThreeJS实现。于geojson.io在线定制化绘制石家庄主要道路地图及地铁站。用折线表现纵横交错的街道、用放射动画标注地铁站坐标。目前可视化了石家庄地铁1号线和地铁3号线,陆续增加新建地铁线。本地地铁趣味玩法策划中,中国高铁可视化作品策划中。

石家庄地铁分布可视化作品截图演示

(2018年12月)独立设计+研发。人工标注区域由Canvas技术渲染,实现绘制多边形标注线、裁剪图像区域功能。OCR字符图像识别是机器学习领域一个应用广泛的分支。提升机器学习算法识别图像的准确率就需准备大量图像训练集供算法“学习”。该在线图像标注工具助力快速标注图像,支持导出包含了标注区域图像像素、尺寸、多边形点坐标的JSON格式数据。将标注好的数据上传至服务器存储,供算法训练使用。

在线图像标注工具截图演示

(2020年2月)独立设计+研发。纯Canvas技术渲染。伏羲作先天八卦图,文王从八卦推演出周易六十四卦。六十四卦每一卦由六个爻组成,下三爻组成内卦,上三爻组成外卦,由下及上与爻辞一一对应。该作品操作方法:第一次点击八卦图随机产生内卦,第二次点击随机产生外卦,内卦+外卦得到周易中某一卦象。

趣学《周易》作品截图演示

(2019年10月)独立实现,纯Canvas技术渲染。每一个格子就像一个单细胞,每个激活的单细胞受周围8个单细胞的影响,或生或死。简单的游戏规则,竟可以产生复杂有趣的效果,理论上存在无数种进化可能。初始化时随机激活格子。玩家可以清空所有格子,暂停进化,然后自定义想要激活的格子,点击开始以观看“细胞的进化”。

康威生命游戏作品截图演示

(2016年12月)独立设计+研发。所见即所得,于极坐标地图之上实时编辑雷达排布坐标。亦可切换不同主题地图皮肤。

极坐标地图编辑作品截图演示
发布与安装Github Packages
记录发布和安装GitHub Package。
使用GitHub Actions跨仓库发布Packages
准备两个仓库,A仓库用作管理源代码的提交信息,B仓库用来管理构建后的目标代码的版本。向A仓库提交更改后借助GitHub Actions自动触发构建过程,并自动将构建好的代码提交到B仓库。向B仓库提交更改后同样依靠GitHub Actions的能力自动发布一个GitHub Package。在这其中借助于GitHub社区丰富的Actions插件,实现诸如自动跨仓库部署、更新Package版本号。
有趣有料的个站
推荐一些有趣的个人网站。
我读《格鲁夫给经理人的第一课》
美国英特尔创始人安迪·格鲁夫亲授,管理世界第一流公司的经验,各行各业都适用管理理念。
C1驾考之科目四
世上无捷径,若有,一定是慢的。捷径像谎言,最终一个谎言接着一个谎言圆另一个谎言,自欺欺人罢了。
项目管理平台开发记录
从作品开发阶段到代码编译打包再到发布配置,我计划把我每个独立作品的开发流放到云端管理。在线代码编辑器或者功能强大的集成开发环境能够支撑云端开发过程,自动脚本执行支撑云端代码编译打包等,实时预览能力和一切皆可配置提升该平台灵活度。作品是小而美的理想化雏形,它包含全部核心但不算完美,项目是理性克制下的完善和有计划的推动进度的过程。独立作品变成项目的过程,就是从心动到喜欢再到爱的转变。初期有这样一个设想,该平台前端部分主要基于VueJS框架开发,后端使用NodeJS+Express+MySQL技术栈。
Linux运维常用命令
网站服务器运行在阿里云的Linux系统上。需要维护Linux系统时,会遇到忘记了某个命令怎么写的情况。这篇文章总结我在维护自己服务器时经常用到的Linux命令。
Blender建模3D虚拟书架
截止到这篇文章发布,我已经在自己的个站发布了9篇记录读书心得的想法,而这才刚刚开始。我有创作虚拟书架这一独立作品的设想,一来因为我真实的小书桌已经快要满了,二来因为我希望自己读过的书单和写过的心得能以视觉化的方式呈现。我没在一开始就思考我的虚拟书架最终会做成什么样子,而是做一步想一步,每一步都有结果,逐渐成熟,但不会结束。
C1驾考之科目三
C1科目三路考,考前上车检查,上车准备,起步,路口右转,直线行驶,变更车道,超车,掉头,通过路口,加减档,人行横道,学校区域,会车,公交站牌,路口左转,靠边停车。
我读《人间失格》
太宰,你简直太丧了,读你的文字我也跟着不快乐了,也因此发现了自己拥有比你可贵的东西,我比你可幸福多了。你以为自杀有多勇敢有多浪漫有多无畏?不!我当然知道这世界有多不值得爱,也因此才有了那么多可爱的事和人。听说人在濒死的一瞬有强烈的求生念,你有多次濒死体验,却依旧在死亡的边缘疯狂试探,你终于最后还是死了。
iMovie和语音备忘录制视频教程
截屏、iMovie和语音备忘录都是macOS自带的免费软件。虽然iMovie剪辑软件免费,但功能相比Adobe家的Premiere也不差。iMac虽然自带收音能力,但我后来发现收录的环境音太过于嘈杂,所以我准备了一根带录音功能的耳机线。用截屏软件录制屏幕,同时用语音备忘录录制声音,然后用iMovie将视频和声音整合在一起剪辑,最后直接导出剪辑完成的视频。
HomeBrew安装与配置
HomeBrew是mac操作系统和Linux系统上流行的包管理工具。虽然HomeBrew所维护的软件包用起来非常简单非常爽,但很多开发者常常在安装和用HomeBrew下载软件的过程中多是由于网络的限制无法享受这种便利。这篇不是HomeBrew官方文档的布道者,而是帮助开发者更顺畅的使用HomeBrew下载心意的软件包。
telnet与主机端口建立TCP连接
用Telnet与我网站的80端口建立TCP连接,通过HTTP协议所规范的请求头格式获取响应消息。telnet是一个能帮助你清楚地了解HTTP协议是如何规范客户端与服务端消息发送与接受过程的工具。我在翻阅《HTTP权威指南》时知道了这个有趣的工具,并且我使用HomeBrew在mac上安装了telnet。
Deno学习手记
我记着Deno官方网站里那只可爱的小恐龙。我想到了三件事:恐龙在地球称霸了很长一段时期。突然的一场大雨既代表了糟糕的运气或某种巨大的压力,又同时预示着雨过天晴后的彩虹。这是一只小恐龙,寓意着成长中和未来的无限可能。
C1驾考之科目二
2020年7月27日我在石家庄燕赵驾校小路考考试场完成了C1科目二考试,考试成绩合格。一句话总结经验:扎实的技术基础 + 平稳的好心态 + 一点点好运气。在平时苦练科目二的五项基本功:倒车入库、侧方停车、曲线行驶、直角转弯和坡道定点停车起步。考试前一天休息充足考试当天心态平稳:轻松、自信、思路清晰。运气因素包括考试当天的天气情况,以及考试车的车况(如考试车的离合器是否好用、挂档是否好用等)等因素。
我读《皮囊》
细数我这段时间看过的书,我总是挑选那些和我处于不同时代的作家写的书来读。对于那些和我处于同一时代的作家写的书,我总是非常谨慎的挑选。因为对于已经去世的作者,他的一生荣辱过往和思想品格已然定格。而对于那些仍在塑造他们自己的历史的作家来说,没人能保证他们往后会不会做出与他们早期思想相背道而驰的事情来,甚至后来连他们自己都无奈。我最近读的两本书便是这样的。之所以会读《你当像鸟飞往你的山》,是因为书名和书中讨论的内容吸引我。而《皮囊》,我是从后来因抄袭登上澎湃新闻的某位老师那里听说的,因书名而对这本书产生好奇,抱着以为内容和《变形记》一样有着怪诞离奇的故事去读这本书,仅此而已。
我读《你当像鸟飞往你的山》
这本书在2018年出版。这本书是塔拉的处女座。塔拉自己在书中提起,在写这本书时她29岁。全书共分三个部分,给我印象最深刻的是第一部分,可以用匪夷所思和触目惊心来形容塔拉的家庭,第二三部分讲述塔拉从17岁自学考入杨百翰大学一直到成为博士的过程中如何调和自己的选择与原生家庭的牵绊之间矛盾关系,并完成蜕变的过程。不幸和万幸,绝望和希望,不断交替。
[译] Using Models and Templates
您可以以编程方式构建节点和链接图。但是GoJS提供了一种以更具声明性的方式构建图的方法。您仅需要提供图表和自动复制到图中的零件实例(即模板)所需的节点和链接数据(即模型)。这些模板可以通过节点和链接数据的属性进行参数化。
[译] Building Parts with GraphObjects
您可以用传统的原生JavaScript代码构造Node或其他类型的Part。GoJS还提供了一种更具声明性的构建部件方式,与原生代码的构建方式相比具有一些优势。本篇将讨论可用于构建节点的基本对象类型。本篇通过显式创建和添加节点和链接来构建图表。后续篇章将展示如何使用模型而不是使用此类代码来构建图表。
[译] Introduction to GoJS Diagramming Components
这世界有那么多美好的事物,如果不去发现,就会错过。GoJS是能在现代浏览器中轻松创建交互式图表的JavaScript库。GoJS支持图形化模版和数据绑定,即将模型数据绑定到图形化对象的属性上。开发者只需保存和恢复数据,那些简单的对象存储着你需要的属性。许多预定义的工具和命令实现了所有图表所需要的标准行为。只需设置属性就能定制外观和行为。
NodeJS开发微信公号
NodeJS实战
前端工具&框架
图解JavaScript
个站运维
数据可视化
翻译计划
设计与动画
读书计划
硬件编程
笔友留言
JiaDing,2020年11月9日留言《Blender建模3D虚拟书架》
谢谢
Void777,2020年9月28日留言《我的个站研发日志》
站长大大好,非常感谢你高质量的文章。想请教下本站主要用到的技术栈,有采用什么框架来搭建吗?求指教
WenZhang,2020年9月15日留言《Ruff入门指南》
你好 Ruff套件出了么 我想买来玩玩
jannylz,2019年9月12日留言《在线图像标注工具》
请问在线体验入口在哪里?可否标注矩形框,可以拖拽类型的
陈帅华动态先知道,请关注一个教程。
一个教程微信个人订阅号