IWER is a developing tool for webXR. I am doing a school project, which uses webXR to make a campus tour. I used MeshLa...

I want to make a rolling dice, I found it very hard to add physics on the mesh, turns out I have to tie the imported mes...

I wanted to use my 2D graphic homework to combine my digital graphic homework. The game link is here. My idea is to load...

tRPC is a RPC framework for TypeScript. A lot people compare it with graphql. After using it, I found out that they are ...

Sometimes we need a HTTPs server to develop a web app, surely using mkcert can generate a local certificate. But by usin...

执行以下命令 另外，如果不成功，可以尝试重新安装 react-native-cli 并重复上面命令。 ...

vectary可以把 2D 的 SVG 渲染成 3D，但是免费版导出的图片是有水印的，导出模型的功能也是收费的（但是我发现可以从 network 中扒\*.obj文件，是，我知道这很 low🤣） ...

貌似有两周没怎么更新博客了哈，因为这几天白天就是冲浪游泳晒太阳，晚上就是写代码（啊~惬意），写了一个踏浪 App，用来查看大陆东南沿岸的冲浪浪点情况。 踏浪小程序码 为什么选择小程序 就国内来说，如果是放到 web 这个纯开放平台上，...

既然在浏览器中也可以计算多维数组，拿浏览器做深度学习也可以理解了。Google 给浏览器中设计了 tensorflow.js，跟 python 下面的 tensorflow 是同一套 API。又有一群人在 tensorflow 的基础上封装...

WebRTC 是一个我在大学时期就关注的技术了，然而由于时间过早，很多技术细节都还在草案上就暂时罢休。今年年初，全世界都进入在家办公状态，视频会议工具被推到风口浪尖，webRTC 技术又一次被推到小高潮，于是便有了这个实现以及这篇文章。 ...

Flutter 是一个号称面向全平台的框架，既然立了 flag，早晚要去摘的。除了 iOS 和 Android，beta 版本的 flutter 还支持 web 网页以及 mac 桌面端，alpha（master 分支）版本还提供 Wind...

这是一个写得一头沮丧的文章，可能是期待值比较高吧，所以任何一个想用 Flutter 写 wearOS 的朋友都要注意一点，他能写，但可能没那么好。这篇文章本来想参考Flutter: Building Wear OS app，因为wear这个...

好的动画会使 UI 更加直观，是应用更加精致，并提高用户体验。Flutter 的动画使简单动画和复杂动画的实现变得容易。Flutter SDK 所遵守的 Material 设计语言包含了标准的动态效果，你可以简单地自定义它们并应用于你的应用...

我要死了，这个系列怎么这么长。 许多应用都有多个页面来展示不同信息。比方说，你可能在页面展示一个产品的图片，当用户点击时打开这个产品的详情。 在 Android，新的页面叫做 Activities。在 iOS 新的页面叫 ViewCon...

在 Flutter 中，你应该使用部件去描述针对于现有状态和配置的界面。 部件是由许多很小或者单一目的的部件组成。比如Container部件就包括几个相关布局、绘制、定位和定型组件，像是LimitedBox、ConstrainedBox、...

如何创建一个 Flutter 应用 创建一个 React Native，可以在终端中使用create-react-native-typescript-app，或者expo-cli。 使用 Flutter 创建应用，可以采用以下两种方式。...

这是一篇翻译，原文来自于官方文档，当然，里面夹带私货，哈哈。 从 JavaScript 到 Dart 就像 React Native，Flutter 也是用响应式界面。但是 React Native 是链接原生环境，而 flutter ...

这是细化了解 threejs 的第二篇，第一篇 在网格上渲染 这里有一点类似于使用多个场景，设想如果想要做一个类似于水晶球的设计，水晶球有一个 scene1，水晶球自己又在另一个 scene0 里面，这里就需要使用 renderTarg...

记录下最近几天的事，终于 Dell 的维修把我电脑的风扇修好了，不过感觉 inspiron 的风扇设计有 bug，新风扇估计也撑不了多久，但愿只是我多疑了。另外通过神奇的某宝，我将我手上的小米平板二升级了内存和硬盘，考虑到 8GB 内存对于...

CSS gradient generator ...

今天用了半天的时间把 observable HQ 上面的 Learn D3 学习了一遍，这是纯笔记版。 不过今天真的是爽到了，没错，我终于找到了以前学习 D3 没动力的原因了，那么厚的一本书，基本上就是把 D3 gallery 抄了一遍。...

学习机器学习的时候用上 python 的 Jupyter notebook 是真好用，曾经就想，如果 JavaScript 也有一个就好了，没错ObservableHQ就是基于 D3.js 的数据可视化笔记本。 官方的入门讲的很详细，接下...

虽然维多利亚的秘密没有了，但是 CSS 的秘密还是可以考虑考虑的，这本书是 2015 年出版的，相比于现在，显然里面的很多属性已经可以做到多平台兼容了，当然里面还没有涉及 grid 布局，强烈推荐 wesbos 的 grid 课程，虽然看完...

使用 VSCode 开发 Rust 的我，最难过的一刻就是打开编辑器时的 RLS 检查，可以看做它是一个用来检查代码语法的后台程序，在 RLS 的 issue 里面有很多人吐槽他初始化的速度实在是太慢了，然而大佬的回复都是说他们不需要使用这...

我觉得必须要介绍一下 svelte 这个框架，确切的说是 svelte v3，这应该是继 riotjs、typescript 和 rust 之后又一个能给我眼前一亮的感觉的产品了。 关于 Svelte 不得不提到他的作者 Rich Ha...

先把刀放下，我知道，现在已经有 n 种 CSS 的解决方案，而且基本上没有一个用着顺心的。 我记得曾有一段时间，好像是使用 YUI 那会儿，CSS 的 class 往往会命名成布局规则，比如希望一个 div 有 10 像素的留白，就给他添...

使用 threejs 开发 webGL 应用应该是几乎每个前端工程师想要做的事儿，然而虽然对比于原生 WebGL 开发来说，threejs 已经做了很多，但是相对于现代的一些前端框架。threejs 还稍显不足。针对这些不足，微软开发了Ba...

最近在忙活让网站使用 Cypress 做测试，之前使用苹果电脑以及 Linux 下面用起来还不错，这次在 Windows 下面碰壁比较多（其实我国的网络也有一部分功劳），所以在这里记录一下。 尝试使用 WSL（失败） WSL 可以使用 ...

Docker engine 如下是官网的安装过程，首先移出 Ubuntu 原有的 docker（如果有的话） 安装相关依赖 增加 docker 的安装源 开始安装（我的架构是 x86\_64） Docker compose 安装...

最近在重构我部署在 GitHub pages 的博客，本来不想添加评论系统的，但是手贱，非想要加一个。 尝试了 disqus（一个在国内无法使用的评论系统），貌似page.url中不能使用中文字符...这就尴尬了，突然想起来以前看 hac...

很久以前就想迁移了，但是一直没下手，原因很简单，就是 ruby 不太熟悉，而使用 node 工具链比较趁手。 当然了，Gatsby 的主题对比 Jekyll 就少太多了，没关系，大不了自己设计（又是一个大坑）。 Gatsby 官网的 t...

这是一篇翻译，原文，这可能是第一篇系统讲解 rustwasm 的文章了。 这本书适合谁？ 这本书适合任何对快速编译 Rust 和 Webassembly 感兴趣的人，相关的代码已经发布在网上。你应该已经了解一些 Rust 的知识，对 J...

今年年初的时候，我整理了一下前端测试现状，有一项就是 mutation test。本文将会讲一下如何给 typescript 项目添加 mutation test。 Stryker-mutator 首先，为项目安装 stryker 全家...

最近在看 getify 的You-Dont-Know-JS，第二版里面相对于第一版增加了很多个人认为比较硬核的东西。第二版貌似对 var 关键字进行了洗白，就目前来看还是比较争议的，毕竟这几年来我基本上已经用 let 完全替代 var 了。...

从 chocolatey 可以直接安装 flutter。 运行成功后可以运行flutter doctor检查环境是否完备，比如我会有X Android license status unknown.报错，可以运行以下命令检查详情。 发现...

最近我一直在实践 rust 相关的内容，本来想写一篇类似于scrapy 的文章，后来发现内容有点多，仅仅一篇文章兜不住，干脆写一个系列好了。 使用 Rust 的工具 rustup 使用 chocolatey 安装，安装好以后只是处理好...

这其实不是一篇总结文档，而是一个笔记，基于NodeJs && JS testing best practise。 比较有趣的是，Stryker Mutator这个工具，可以用来做 mutation testing，简单说，一般测试工具只能...

mock localStorage jsdom里面的localStorage是不能通过赋值覆盖的，但是有一个hack就是利用Object.defineProperty。 setTimeout 有的时候需要让测试代码以为自己已经跑了一会...

...

Web UI Security matters Read 51 penetration test and Front-End-Checklist first. Reverse tab nabbing CRITICALITY: An at...

首先，我绝对反对线上和本地环境有这种不同配置，但是如果代理是必选项的时候，选择工程化的配置要比每个人维护一套更有效。 需要在webpack.dev.server.config中增加setProxy文件 这样，每个请求localhost/...

视频地址： An actual XSS on google.com by Masato Kinugawa.&#x20; 简单的背景 首先正常浏览器在控制台执行以下代码是会弹窗的，也就是说如果一个输入框输入了\<img src="" on...

感谢宇神赠票了~大会很多内容收获很多，待我稍加整理发出来。 ...

已经工作快半年了，做个小记录，jest测试的时候偶尔会报lodash exceeds the max of 500KB错误。 查了很多配置，应该是coverage哪里的问题，在coveragePathIgnorePatterns里面忽略\...

今天小伙伴出于安全考虑把Webpack从v3升级到v4（太可怕了直接一个大版本更新），结果导致我们node上面引用的umd包竟然就挂了，报错内容是 window is undefined. 搜了下Stack Overflow，果然很多人也...

Grid Layout CSS Grid Garden CSS Grid Garden Flexbox Layout CSS Flexbox Froggy CSS Flexbox Froggy ...

用过postman做集成测试的话，有个prescript功能很不错，就是在执行发送请求之前要执行的脚本。 我曾经以为这个prescript是直接运行的一个js脚本，执行完之后发送请求。但是貌似postman里面处理异步逻辑与v8有所不同。...

...

这个实现是同步实现，其实最好改成异步实现。 另外关于time.startOf('month')竟然传递的是引用，简单说time改变之后这个值还会变，所以要clone一下。 另外， 用moment获取到的unix时间戳是秒级别的，而默认j...

哎呀，这个话题，其实挺简单的，但是仔细想起来，URL的请求参数如下，如果要写数组怎么办？ 其实无非是解析这个字符串，但是由于没有标准方案，所以大家的处理方法五花八门。我遇到过的方式如下 数组标识 或者 这种做法，jquery时代很多...

渲染服务化，egg.js北斗 最早同机部署，利用热更新，减少node发布频率。 使用node做页面渲染，渲染好的html给java层，最终分发还是给java。 资源争抢，linux cgroup，但是没实现。 静态资源分发系统，使用...

大概今年开始，chrome在linux里面就没办法正常看输入框，到了8月更惨，vscode和atom都完蛋了，完全看不到输入法的面板（也许我得考虑英文输入了）。 其实是个hidpi的问题，chromium对输入光标的位置处理和linux处...

...

...

...

最近工作发现小伙伴都不喜欢用prettier，原因是格式化后的代码其实和之前约定的eslint有出入。 其实安装prettier-eslint之后，你的prettier就不会将代码改成违反eslint规则的样子，在vscode配置中，打开...

最近换工作到了一家对测试要求比较高的公司，相比以前仅仅完成Appnium完全匹配不同，这里要求使用jest自动化测试覆盖率达到80%+，此处应有jest cheat sheet。 工作过程中有很多需要读配置文件的地方，做法是在本地对应位置...

创建项目 使用 npm/angle ECS(Entity-Component-System) 不懂百度。 组件库 https://aframe.io/aframe-registry/ 博客 https://aframe.io/...

照往常，我会新建一个input事件然后dispatch一下，今天在instagram上面试验失败了。原因是React16 内部定义了descriptor拦截了value. ...

最近被猎头催的实在不行了（真的，感觉他们更担心我找不到工作），于是我写了份简历给他们。当然了，既然最后要的是PDF，这种机会不试试新的CSS布局还真说不过去。 \##　实现圣杯布局 提到CSS布局，自然想到了圣杯，一行header，中间...

pixiJS 的 l-system 实现 ...

Server 端 client 同时要在 nuxt 配置中增加 apollo 的配置项 ...

https://fettblog.eu/gulp-4-parallel-and-series/ 如链接所说，为实现并行操作，原来的 已经改为 而如果想串行执行的话可以用gulp.series ...

代码在 https://github.com/gongbaodd/MeteorTodoAPP 这里做一下简单记录。 把冰箱门打开 打开 app 文件夹，可以看到 meteor 项目了，官网有各个文件夹的说明， 在此不赘述。 可以在 l...

改变画布为横版 File - Document Properties - LandScape 旋转对象 慢速度点击两次 多选 使用 shift 和 鼠标左键 小试牛刀 ...

直到前几天，我需要做一个简单的3D动画时候，我才意识到其实我还没有用CSS做过3D动画。 很多人其实认为只要写下 但最终效果并不是三维的旋转，原因是它的父元素必须是一个有深度的盒子。 如果是希望旋转180度后不展示背面可以添加 b...

logo 大概看了下去年的博客，我大概在五月初，对lego的第一次上线做了总结，那么现在大概就是lego的一周岁生日了。 lego 的定义 lego云图 支付lego平台是一个支持多维度线上配置的web组件化前后端同构渲染平台，覆盖...

https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers ...

you can find the code in http://gongbushang.com:3000/gongbushang/graphql\_starter ...

最近工作很忙、还要雅思考试、还感冒了，真是心力俱疲。 lena 但是这些都是打不到我的！！！！ ...

代码地址 展示雪碧图 容器 Container 图形 Graphics 遮罩 Mask 动画 Ticker 文字 动态图 交互 自适应 datGUI 上色 HSV、HSL色彩空间 混合模式 blend 材质 te...

示例代码 CMYK用于打印, RGB用于显示屏, 然而二者都不能直观的展示颜色, 于是有了 HSL 和 HSV 坐标系. 简介 今天看看HSL和HSV转化RGB, 维基地址. HSL与HSV H 指的是 hue 色相 \[0-36...

Qunar的很多图片都是用iconfont实现的, 我们有一套类似于fontawesome网站的yicon, 然而当初构建的时候,对于使用iconfont还是svg是很受争议的. 其结果自然iconfont胜出,而那时我见识到了svg对于...

项目地址 http://gongbushang.com:3000/gongbushang/animateCSSplayground 结合 animate.css 结合 preact-router ...

Webpack仅仅实现前端热更新要比前后端同构简单得多, sourceMap 是必须加的, 用来判断哪些文件更新. ...

在 setting 里面选择格式, 如 PixiJS, 然后点击 Publish Sprite Sheet 会生成对应的 png 和 json ...

本来想写热启动, 算了, 其实就是刷新了, 实事求是点好. 去年我单位所有项目进入前后端同构的状态, 主要的工具是 NestJS 和 React, 但还没有做过热启动, 反正开始重写主页了, 顺带着做一下. NestJS 自动刷新 N...

去年逛IT邦看到了关于Kotlin的铁人赛，30个安卓demo．毕竟不是我的原创，这里贴上原地址 https://ithelp.ithome.com.tw/users/20107329/ironman/1286 再贴上我的代码地址 h...

代码地址 两年前我曾写了一个篇 Esprima静态分析js代码, 当时的目的是为了检查一个js文件对某些函数的调用数计数来确定这个函数是不是可删的. 自从用了typescript, 这种方法自然就不需要使用了, 但是如果我想获取 typ...

https://github.com/jeromeetienne/AR.js/ ...

参考自 轻松从Js文件生成UML类图 使用说明 vscode 安装 plantUML 插件, 编写 \*.puml 文件的时候执行 Alt + D 可以预览绘制的流程图. \*.puml 文件格式说明 plantUML的解析以 @s...

读<构建同构的JavaScript应用>有感 这本书简单介绍了并实现了前后端js应用方案(Hapj.js) 我更喜欢书后半部分各个公司对前后端同构的优化. React React的后端渲染存在性能瓶颈(这个我在现实使用时也考虑过...

查看PPT Part I : Type System JavaScript 是一种很爽的语言 作为一款动态语言，比如你可以执行以下代码而不用担心报错。 但是，如果遇到了下面这种情况，就算是灾难了。 所以我们写代码的时候，都会加注释...

最近一直没有更新博客，其实脑子里面已经装了很多东西了，略微分享一下。 精美PPT~（花了十多分钟呢 前提 2017年前端看起来是风平浪静的，其实不然，今年WASM终于定稿了，那意味着用任何语言编译web应用得到了官方支持。由于采纳的是...

公司的私有源从CNPM改成AchiFactory了，为的是更好的管理docker、maven、PyPI和npm，结果我在迁移的时候出现了问题。 npm install的时候一直报 module achifactory not found ...

懒得写了，mark一下 ...

都来看啊，都来看啊 关键字： riotjs, riotcontrol, SSR, 组件化开发, 前后端同构 ...

换个坑继续趟 回顾一下为什么用Riot 1\. 对ES5最友好的组件化MVP框架 吐槽一下现在的前端，gulp + webpack + rollup +　babel + ... 用gcc的同学都看哭了好么 riot.js虽然官网上给...

封装完成但还没有上传npm QunarSniff中间件 QunarLogin中间件 TagCore，Control，Store fetch（用于合并请求，基于node-fetch） hysdk、QConfig-client-nod...

如果你已经了解过前后端同构的话，你一定知道如下的方案 那你看的文档应该都转发自同一个人。 这种做法很有局限性 你引用的module必须是umd打包的 你引用的module必须不存在二进制包 这回你知道为啥react要用全家桶了吧？...

Qxf其实是express下的一堆中间件的集合，所以其实我在介绍express的BigPipe实现。 简单的来说，当一个html开始下载的同时浏览器就开始渲染html了（而不是等html下载完成再渲染）。 所以，返回给用户的页面可以一...

上文说过，借助extTextPlugin可以把多个组件的css抽取成一个css，但webpack做的只是简单的文件拼接。处理css的地方要交给postcss。 cssnext cssnext使用caniuse.com的数据判断css需要...

tree-shaking（树摇） es6 module里面详述了树摇的的实现，但是webpack1始终没能实现，后来rollup实现了，于是大量框架转用rollup，去年webpack2发布，带来的就是这个tree-shaking功能。 ...

类型化声明 接口 class语法糖 装饰器 类似于@tag,@mixin的东西， 这个有点复杂，只说在class前面的装饰器吧, 是用来处理对象原型的函数， 会在构造函数执行结束后执行 Object解构 一个更好的mixin ...

2015年我开始从事前端工作，开始公司正在用QApp作为前端SPA框架， 可是在我看来QApp比较笨重(130+KB)，另外还需要引入kami做组件(100+KB)，一直想找一个轻一点的框架代替，最后选择了riot.js(76KB)来代替这...

回顾一下 去年三月，我分享了一个用riotjs开发前端的方案，既然已经有一年的时间了，就先回顾一下。 这套方案出自2015年，之前一直使用的是公司的QApp解决方案，后来发现使用上存在问题， 并在试图寻找一套可行的替代方案。 组件化方...

或许篇文章写得有些晚了，如果这篇文章是写koa的话，估计受欢迎程度会很高。 最近正巧有一个前后同构的项目，其实是利用node作渲染层。至于为什么用node作渲染层就不做详述了，节约后端资源，释放前端约束，可能方案并不是通用的，正好我的项目...

组件化开发算是老生常谈了，最早听说这个理论，我还在大学，写着那些被后端称为模板的东西。所以当时的开发就是写成一堆\*p（php、jsp 等）片段然后 include 到一起。 为什么要做组件化 为什么要做组件化呢？因为它是什么神奇的算法...

如图 ...

什么是单元测试 指对软件中的最小可测试单元进行检查和验证。 老代码 新代码 这里需要对输入(navigator.userAgent) 进行处理来查看函数的 输出(scheme1,scheme2,scheme3,schemeXX,ht...

BUTTONS DATE:2012/09/26 按钮 文字内容 字号 14pt 字体 PreludeWGL 粗体 斜体 颜色 #4b4b4b 圆括号 字号 30pt 字体 PreludeWGL Bold 颜色 #4b4...

https://mp.weixin.qq.com/s?\_\_biz=MzI4MzM5ODM1Nw==\&mid=2247483658\&idx=1\&sn=33c68d3f615fab291c57213d1ee9712f\&scene=1...

前言 本报告不是针对哪个框架，单独说哪个框架好，撕逼的出门右拐微博谢谢 最近迷上了组件化开发，感觉这是一种非常高效率的开发模式（说模式有点不对）。于是我第一时间找到了这仨库来做比较，下面请听我细细道来。 本报告拢共扯了这些蛋 三个库...

需要一个工具 Commitizen 在工程目录里面使用 angular 的 message 格式 以后写 commit 的时候不用git commit改用git cz ...

最近一直在搞 riot，想弄一个单测，正好官网提供了 karma 组件，搞起来吧 安装 配置 运行 ...

360 真是一个良心企业，这样不用翻墙就能看 API 了 manifest.json background.js 判断 url 并添加 page action popup 里面获取本页 url ...

在如下目录里面添加 tag.js 和 es6.js ...

...

...

...

这几天公司里面的 QA 资源紧张，手上压了 4 个分支还没有发布， 干脆腾出时间研究研究 fekit 的 extension，最好能贡献点代码。 Fekit 是去哪儿网的前端部署及开发工具，相比于 gulp、grunt 等工具 ，Feki...

代码在https://github.com/gongbaodd/myExperinments/tree/ionic\_todo 一直想写一个app，但是懒得设计，看到ionic官方有个guide而且没有中文版，所以写一个。 在head中添...

上一周得流感，再加上react-native只支持iOS，头脑一热，除了研究了ionic，还看了nativescript。感觉吧，nativescript比起QML之类的语言，最大的优点就是不必再去学习一门新的语言，因为它不是js的超集，而...

前一阵子react-native很火，甚是嫉妒啊，目前只支持iOS。。。T\_T 不必要一直追求native，（虽然我还是试验了nativescript），在安卓上面还是可以尝试写写hybrid应用。 安装ionic，安装android-...

Renderer setClearColor Others Scene Camera Geometry Cube Plane Sphere ...

（一）基本之基本 这些是嚼the Packt book "Learning Threejs"出来的一些干货，捡了些觉得可学的代码放到我的myExpirements下面的learning-in-threejs分支里面了。 1\. 简单实现...

接收三个参数，selector,context,rootjQuery 默认的$()传的值实际上考虑了很多种情况，下面是返回值 false,undefined,null node节点 "body" 字符串，单独标签\<tag>\</...