原创文章按主题编册
前端框架(React、Vue、Mithril、Angular)
最近有21个想法(探索全部135个想法)
11月18日
星期一
3.1分钟

我的书桌多图预警

我的书桌我的书单

没有刻意地收拾,呈现我的书桌在平时最真实的状态。凌乱而拥挤的温馨。

11月15日
星期五
8.1分钟

使用Animate设计LOGO动画

时间轴洋葱皮流体笔刷adobe animate ccanimate设计动态图标

我深知设计灵感这点事不能靠催的,庆幸我不是专业的设计师。Adobe在年前对其全系软件更新到2020版本。新鲜感外加一点刺激总能激发出我无限的灵感,为了不浪费这来之不易的灵感,我为自己的个站设计了几枚动态图标。

11月6日
星期三
1.2分钟

写给自己的第3封信

30前的帅华老树深根嫩枝丫

给亲爱的我。

10月30日
星期三
8.9分钟

Canvas实现标注多边形与图像切割

标注多边形canvas图像切割

我又重新实现了一版依赖Airglass.js库的基于Canvas技术的功能包括多边形区域标注以及图像切割的实验项目,这篇想法记录开发过程。

10月29日
星期二
0.6分钟

写给自己的第2封信

30前的帅华我了解你

给亲爱的我。

10月25日
星期五
18.5分钟

生命游戏开发记录

生命游戏元胞自动机airglass.js最佳实践

完善Airglass.js的继承机制,增加了extend方法,优化了Renderable和Effect两个基础可渲染类。采用常见规则借助Airglass.js实现出了生命游戏,与网络上其他版本不同的是,我使用了彩色格子。进一步加深了我对面向对象编程思维的理解与应用熟练度。

10月23日
星期三
2.8分钟

写给自己的第1封信

写给30岁前的帅华

给亲爱的我。

10月17日
星期四
6.7分钟

Airglass.js现已支持关键帧动画

关键帧动画Airglass.js开发笔记

Airglass.js最近的更新中支持了关键帧动画,这依赖于canvas离屏渲染技术。开发者可以从序列图创建关键帧,也可以拷贝其他可渲染组件的关键帧,这适用于希望呈现相同效果的组件,以节省不必要的内存开销。我还在探索关键帧渲染与直接渲染之间的平衡点。

10月6日
星期日
16.3分钟

探索JS原型链规律性可视化

javascript核心参考JavaScript原型链

我曾经用Illustrator绘制过JavaScript原型链可视化信息图,也曾在最近用iPad手绘过一副JavaScript原型链的涂鸦。如今我借助Airglass.js开发的NodeLink可视化组件动态演示JS核心参考中各值之间的信息传递与关联关系。

10月4日
星期五
6.9分钟

定制地图与雷达波动效

airglass.js最佳实践

地图是FUI界面中常出现的组件之一。我希望Airglass.js能处理好地图渲染,以及地图中丰富多样的动效,所以尝试用Airglass.js完成一个关于地图的最佳实践。在探索的中后期,我将Three.js纳入解决方案与Airglass.js来一次混搭。

9月23日
星期一
15.7分钟

节点关系可视化

airglass.jsnodelinkairglass最佳实践

经过了一周断断续续的探索,Airglass.js的第二个组件NodeLink终于大功告成。这期间我从Dribbble和Behance等设计网站借鉴了不少创意灵感,以及Blender操作界面给我的启发。在开始下一个组件的开发之前,我想通过这篇想法简单谈谈NodeLink组件。

9月12日
星期四
11.5分钟

标注多边形区域工具

airglass.js多边形标注颜色canvas编辑多边形区域airglass开发笔记

我用airglass.js初步完成了第一个最佳实践:创建和编辑多边形标注区域。做Demo的同时完善Airglass.js。我给渲染器类新增了击中检测实例方法,还增加了链式调用提升开发效率。同时新增多边形Polygon类,它是继矩形圆形后Airglass.js出现的第3个基本形状。接下来是对Demo无止境优化的漫漫长路。

9月10日
星期二
5.4分钟

Airglass.js开发笔记:最佳实践前奏

airglass.js最佳实践Airglass开发笔记

我把Glass的集合称作舞台。理论上每一个舞台中Glass的数量是无上限的。我并不推荐一个舞台上有超过3个Glass。最理想的情况是,顶层Glass用来捕获外部事件与放置可交互元素,下层Glass用来放置数据驱动型的元素。

9月9日
星期一
2.8分钟

Airglass.js开发笔记:订阅

订阅canvas合成事件airglass的故事

Airglass有层叠玻璃的概念,为此我创建了Glass类,并让Renderer类继承Renderer。Glass类实现了处理原生与非原生的合成事件的订阅与退订功能。每一层渲染器都可以订阅其他任何渲染器发生的事件。最顶层的渲染器用来捕获和发布外部原生事件,就像最上层玻璃能感知光线穿过,层层传递给下层玻璃。

9月8日
星期日
5.5分钟

Airglass.js开发笔记:监听

canvas虚拟事件委托JS类的继承airglass的故事

Airglass要做的是FUI/HUD风格UI组件库。用户界面自然少不了对界面交互的支持。利用事件委托的方式,canvas将监听到的鼠标和触摸事件派发给canvas中绘制的虚拟元素。我甚至让开发者能够订阅虚拟元素触发的各种定制化事件。从而实现用户操作canvas画布上虚拟UI的可能。

9月6日
星期五
2.4分钟

Airglass.js开发笔记:起步

typescript构建类库设计继承类webpack构建类库airglass.js开发笔记

Airglass是我在2017年的夏天想要启动的独立项目——基于Canvas技术开发一款支撑FUI/HUD视觉风格用户界面的基于面向对象思想与方便扩展组件的基础组件库。从本篇开始我会一边开发Airglass.js一边详解开发过程。

9月5日
星期四
10.7分钟

FabricJS创建继承类应用变换矩阵

fabricjs创建继承类fabricjs变换矩阵

Fabricjs提供创建继承类的主要目的是让开发者根据需要在现有类如Rect/Image的基础上自行扩展其父类的功能。矩阵变换在Fabricjs中有重要应用,比如点击位置从相对于canvas的坐标到相对于虚拟元素的矩阵变换,再如多个虚拟元素之间绑定变换关系。

9月1日
星期日
5.3分钟

ml5js助力前端玩转机器学习

ml5js机器学习ml5js神经网络图像识别

ml5js获取服务器上已经训练好的模型,调用ml5js提供的API即可在Web前端玩转典型机器学习案例,ml5js官方提供的机器学习案例类型有图像、声音和文本三个类别,我将体验过程记录下来。

8月30日
星期五
6.3分钟

交互式命令快速选择并构建前端项目

交互式命令行交互式CLINode命令行交互式构建前端项目

文接上篇。我通过将项目源代码与构建代码分离的方法,解决了我托管在GitHub上的多个项目因存在构建代码相似和各项目NPM依赖更新频繁且重复的问题。本篇我将进一步在有多个前端项目的开发场景中使用交互式命令行——能够快速选择项目并构建项目。

8月28日
星期三
8.8分钟

Github项目NPM依赖存在安全漏洞

github依赖包隐患npm依赖风险源代码与构建代码分离

下午邮箱收到一连串GitHub推送的警告信息,说因为NPM依赖包版本存在安全漏洞。又由于牵扯项目太多,上次出现这一问题我是挨个项目升级NPM依赖包。于是换了一种解决思路。

8月26日
星期一
9.2分钟

探索Web前端获取音视频流录制视频

html5录视频前端录视频前端获取音视频流

最近整理我的一些独立项目,考虑用音视频的形式记录感想,起初在用Mac系统自带的录屏软件,后来计划能不能用web前端技术开发一款在线录制音视频的工具,小有成果,先用文字形式记录下来。

陈帅华 - 探索技术艺术与国学之美

2015-2019年各月想法的出现频率:
实验/创作/独立设计开发
FUI风格核心组件库 - Airglass.js
硬件编程、Arduino
生活自有“道”理
在这里分享创意
视觉设计、用户体验
陈帅华的微信二维码
新旅程...
6月
2019年
离职 · 石家庄青青子衿(石家庄佳诚子公司)
公司暂停所在部门项目研发。后被调职至子公司,认清理想与周遭差距,遂申请离职。
12月
2017年
入职 · 石家庄佳诚
11月
2017年
离职 · 中科院信息工程研究所
体制内作派。无成长性与归属感可言。结合职业规划,深思熟虑后申请离职。
10月
2016年
入职 · 中科院信息工程研究所
9月
2016年
北京德鲁安(智慧寺院网)· 实习结束
因个人无法接受宗教盈利模式,实习3个月后未提交转正申请,实习结束后选择离开。
6月
2016年
毕业 · 河北传媒学院(本)
新媒体与信息网络专业,顺利毕业,获得文学学士学位。
5月
2016年
北京德鲁安(智慧寺院网)· 实习
感恩在这里遇到一位对我的UI设计能力赞赏有加的技术总监,在编程方面也催着我成长。
5月
2016年
北京互动百科网 · 实习结束
发现自己的兴趣不在做运营,从此坚定做一名程序员的决心。
2月
2016年
北京互动百科网 · 实习
内容编辑和新媒体平台运营。
9月
2012年
入学 · 河北传媒学院(本)
新媒体与信息网络专业
9月
2009年
石家庄市第二十五中学 · 高中
9月
2006年
石家庄市第二十五中学 · 初中
9月
2002年
石家庄市东苑小学 · 小学
三年级起于石家庄入读。
11月
1993年
我出生了
河北省邯郸某个小村庄。

yizhibaozi · 10月13日留言 · 去围观

悄悄评论。。

陈帅华 · 10月9日留言 · 去围观

系统升级到macOS Catalina后,终端默认使用zsh shell,虽然之前没有听说过这个命令行工具,不过需要认识新的配置文件.zshrc,默认的每启动一个命令行都会执行这个配置文件。所以source .bash_profile需要每次启动新命令行工具后自动执行一次。

jannylz · 9月11日留言 · 去围观

请问在线体验入口在哪里?可否标注矩形框,可以拖拽类型的

yizhibaozi · 8月28日留言 · 去围观

动起来哈哈

陈帅华 · 8月28日留言 · 去围观

学起来了

陈帅华 · 8月27日留言 · 去围观

避而不谈的是真相,需细细琢磨。
悬而未决的是争议,需从长计议。

陈帅华 · 8月27日留言 · 去围观

1. 你是知道什么是对什么是错?!
2. 你知道能决定你的行动的只有你自己?!
3. 你知道大多数人对你的一切的态度是冷漠,充其量抱着看热闹的心态?!

陈帅华 · 8月15日留言 · 去围观

Blender2.8变化蛮大的
[项目] 在线音/视频流录制工具
[项目] 在线音/视频流录制工具 (1幅)
[项目] Web Audio模块连接
[项目] Web Audio模块连接 (1幅)
[项目] 在线图像取色/配色工具
[项目] 在线图像取色/配色工具 (1幅)
[项目] 中国传统二十四节气
[项目] 中国传统二十四节气 (3幅)
新版个站博客体验设计
新版个站博客体验设计 (1幅)
[图解]Deno
[图解]Deno (1幅)
[脑图]规划
[脑图]规划 (3幅)
[图解]JavaScript
[图解]JavaScript (2幅)
[图解]Mithril
[图解]Mithril (6幅)
[图解]企业项目管理可视化方案
[图解]企业项目管理可视化方案 (4幅)
旧站shuaihua.cc四季概念
旧站shuaihua.cc四季概念 (4幅)
十二生肖&文章标签对应关系
十二生肖&文章标签对应关系 (3幅)