话题
villainthr HTML&h5
SVG 全称是 Scalable Vector Graphics,即,矢量图。在 Web 中使用 SVG 可以解决位图放大失真的问题。首先,不要把 SVG 和 CSS,Canvas,HTML 搞混。他们之间并没有你中有我,我中有你的关系。SVG 是通过 XML 的形式写在 HTML 文档中的。 如何书写 开篇说过,SVG 就是一个 XML。看一下代码吧: <svgx="0px"y="0px"width="450px"height="100px"viewBox="0 0 450 100"><rectx="10"y="5"fill="white"stroke="black"width="90"height="90"/><circlefill="white"stroke="black"cx="170"cy="50"r="45"/><polygonfill="white"stroke="black"points="279,5 294,35 328,40 303,62 ...显示全部
9 个月前发表 530次浏览 2条评论 0次收藏
villainthr HTML&h5
Web 进制操作是一个比较底层的话题,因为平常做业务的时候根本用不到太多,或者说,根本用不到。 老铁,没毛病 那什么情况会用到呢? * canvas * websocket * file * fetch * webgl * ... 上面只是列了部分内容。现在比较流行的就是音视频的处理,怎么说呢? 如果,有涉及直播的话,那么这应该就是一个非常!非常!非常!重要的一块内容。我这里就不废话了,先主要看一下里面的基础内容。 整体架构 首先,一开始我们是怎么接触到底层的 bit 流呢? 记住:只有一个对象我们可以搞到 bit 流 --> ArrayBuffer 这很似曾相识,例如在 fetch 使用中,我们可以通过 res.arrayBuffer(); 来直接获取 ArrayBuffer 对象。websocket 中,监听 message ,返回来的 event.data 也是 arraybuffer。 let socket = new WebSocket('ws://127.0.0.1:8080'); socket.binaryType = 'arraybuffer'; ...显示全部
9 个月前发表 567次浏览 0条评论 0次收藏
王少飞 HTML&h5
启用硬件加速 1 在chrome的地址栏中输入 chrome://settings/ 回车 [http://shaofei.wang/content/images/2017/04/QQ--20170408192029.png] 2 滚动页面到地步,点击 ==显示高级设置== [http://shaofei.wang/content/images/2017/04/QQ--20170408192219.png] 3 再次滚动到页面地步,找到 ==使用硬件加速模式== [http://shaofei.wang/content/images/2017/04/QQ--20170408192255.png] 开启GUP硬件加速 1 在chrome的地址栏中输入 chrome://flags/#disable-accelerated-video-decode 找到==硬件加速的视频解码==,点击==启用== [http://shaofei.wang/content/images/2017/04/QQ--20170408192649.png] 完成上面两步后重启浏览器。 ...显示全部
9 个月前发表 1328次浏览 0条评论 0次收藏
villainthr HTML&h5
市面上现在流行两种沙箱模式,一种是使用iframe,还有一种是直接在页面上使用new Function + eval进行执行. 殊途同归,主要还是防止一些Hacker们 吃饱了没事干,收别人钱来 Hack 你的网站. 一般情况, 我们的代码量有60%业务+40%安全. 剩下的就看天意了. 接下来,我们来一步一步分析,如果做到在前端的沙箱.文末 看俺有没有心情放一个彩蛋吧. 直接嵌套 这种方式说起来并不是什么特别好的点子,因为需要花费比较多的精力在安全性上. EVAL执行 最简单的方式,就是使用eval进行代码的执行 eval('console.log("a simple script");'); 但,如果你是直接这么使用的话, congraduations... do die... 因为,eval 的特性是如果当前域里面没有,则会向上遍历.一直到最顶层的global scope 比如window.以及,他还可以访问closure内的变量.看demo: functionAuth(username) { var password = "trustno1"; ...显示全部
10 个月前发表 646次浏览 0条评论 0次收藏
villainthr HTML&h5
该库是应对当前 Google 提出的 PWA 概念而写的。以链式 API 来完成 PWA 相关的操作。 npm [https://img.shields.io/badge/npm-web--pwa-blue.svg] [https://www.npmjs.com/package/web-pwa] git [https://img.shields.io/badge/git-web--pwa-blue.svg] [https://github.com/JimmyVV/web-pwa] 安装 npm install web-pwa // 或者使用 yarn yarn add web-pwa DEMO 首先说明一下,我们要完成的目标: * 注册 sw * 添加 app.js 的缓存 * 实现推送,并在用户点击后关闭,然后聚焦当前页面 整个代码如下: import SW,{Notify,WebCaches} from'web-pwa'; window.onload = function(){ SW.register('sw.js'); ...显示全部
10 个月前发表 708次浏览 0条评论 0次收藏
程柳锋 工具建设
[http://7tszky.com1.z0.glb.clouddn.com/FtM6zxr8gWVy1LQKD1e3lxkBAumx] 前言 随着开发团队不断发展壮大,在人员增加的同时也带来了协作成本的增加;业务项目越来越多,类型也各不相同。常见的类型有基础组件、业务组件、基于React的业务项目、基于Vue的业务项目等等。如果想要对每个项目进行一些规范上的约束比如Git提交规范、Javascript规范简直难于登天。所有的这些,只是因为还欠缺一个好用的工程化工具,在项目创建的初期自动的将这些目录结构和文件生成、并且集成工程常见的规范来进行约束。 本文分为两部分,首先会谈谈目前团队的痛点以及基于yeoman generator的设计思路;然后会详细介绍如何实现定制的generator,过程中遇到的问题和解决办法。 痛点一:工程创建不智能 * 代码目录文件手工拷贝 * 不同场景的工程对目录结构的要求不尽相同 痛点二:规范约束难以统一集成 * 难以在新的工程项目中集成新的规范,需要手动加hook * 缺少增量机制对旧项目集成 基于YEOMAN GENERATOR的设计思路 ...显示全部
10 个月前发表 618次浏览 0条评论 0次收藏
程柳锋 工具建设
目的 * 统一团队Git commit日志标准,便于后续代码review,版本发布以及日志自动化生成等等。 * 统一团队的Git工作流,包括分支使用、tag规范、issue等 GIT COMMIT日志参考案例 * angular [https://github.com/angular/angular] * commit-message-test-project [https://github.com/cpselvis/commit-message-test-project] * babel-plugin-istanbul [https://github.com/istanbuljs/babel-plugin-istanbul] * conventional-changelog [https://github.com/conventional-changelog/conventional-changelog] 总体方案 ...显示全部
1 年前发表 2324次浏览 0条评论 0次收藏
helinjiang javascript
我们即将讨论的是如何在前端项目中引入自动化测试。虽然文章聚焦的是前端项目,但实际上讨论的内容也适合 Node 端应用。 [http://7tszky.com1.z0.glb.clouddn.com/Fq-4isCzf_KhoK0MnIPwb9eD8wOq] 这是本系列文章的第一章,主要内容是对前端自动化测试有一个初步的了解。适合入门学习。 1. 引入自动化测试的必要性 好处很多,包括减少错误、提高效率等,尤其是前端项目越来越庞大且多人维护时,前端自动化测试就会显得尤其重要。 代价也有,毕竟需要额外的学习成本。但在你的项目中加入测试,也许没你想象的那么困难。 2. BDD VS TDD 说起测试,需要先说一下主流的测试类型,包括 BDD 和 TDD,有点枯燥,但有必要有个简单的了解,因为会影响选择如何测试的策略。 * TDD(Testing Driven Developement,测试驱动开发),强调的是一种开发方式,以测试来驱动整个项目,即先根据接口完成测试编写,然后在完成功能时要不断通过测试,最终目的是通过所有测试。 * BDD(Bebavior Driven ...显示全部
1 年前发表 970次浏览 0条评论 0次收藏
何方舟 Node.js全栈
现象 之前有发现,录播 node 有异常关闭的情况。 我们在1月3日有一次发布,而1月5日凌晨突然挂掉。 分析服务器内存曲线。 [http://7tszky.com1.z0.glb.clouddn.com/Fjt-p7ngh-64NuGK8Of5cv-Q7cTw] 对应的详细内存[http://7tszky.com1.z0.glb.clouddn.com/FnAziHxLwRyqnrVvLKqQ0cDo367H] 可以发现服务器内存达到最大值 8G 后就挂掉了,根据发布后内存有明显的上升趋势,且 GC 回收不明显, 初步判定是由于内存泄露导致。 内存分析 我们使用 heapdump 这个库来帮助我们查看内存变量的情况。临时创建一个创建快照的请求地址。 server.route({ method: ['GET', 'POST'], path: '/now.qq.com/p', handler: function (request, reply) { ...显示全部
1 年前发表 673次浏览 0条评论 0次收藏
王少飞 javascript
在做业务时我们用react+redux框架,其中redux的reducers是用的纯函数。这里什么是纯函数?为什么要用纯函数?纯函数的好处是什么?接下来的我们一起研究下。 redux强调reducers一定要是纯函数[http://7tszky.com1.z0.glb.clouddn.com/Fv8Fmer6v0TwE13LwPzb2gHgV26z] 什么是纯函数 满足以上两条的函数成为纯函数: * 在相同的输入值时,需产生相同的输出。函数的输出和输入值以外的其他隐藏信息或状态无关,也和由I/O设备产生的外部输出无关 * 不能有语义上可观察的函数副作用,诸如“触发事件”,使输出设备输出,或更改输出值以外物件的内容等 -------------------------------------------------------------------------------- [http://7tszky.com1.z0.glb.clouddn.com/FiGG7SaMUz2C7UWCiZM_Kimf9IIw] 图一 ...显示全部
1 年前发表 710次浏览 0条评论 0次收藏
程柳锋 工具建设
导语:任何软件项目都是一个协作项目,它至少需要2个开发人员参与,当原始的开发人员将项目开发几个星期或者几个月之后,项目步入正规。不过他们或者后续的开发人员仍然需要经常提交一些代码去修复bug或者实现新的feature。我们经常有这种感受:当一个项目时间过了很久之后,我们对于项目里面的文件和函数功能渐渐淡忘,重新去阅读熟悉这部分代码是很浪费时间并且恼人的一件事。但是这也没法完全避免,我们可以使用一些技巧尽可能减少重新熟悉代码的时间。commit messages可以满足需要,它也反映了一个开发人员是否是良好的协作者。 编写良好的Commit messages可以达到3个重要的目的: * 加快review的流程 * 帮助我们编写良好的版本发布日志 * 让之后的维护者了解代码里出现特定变化和feature被添加的原因 先来看看一个比较好的例子,感受一下: [http://7tszky.com1.z0.glb.clouddn.com/FkeduEr4q7SivzPSQSqLhxa5K7L8] 下面谈谈,如何让项目里面的Commit messages步入规范化,流程化。 ...显示全部
1 年前发表 2224次浏览 0条评论 0次收藏
villainthr HTML&h5
摘自: villainhr [https://www.villainhr.com/page/2017/02/20/WebRTC 直播时代] WebRTC 全称为: Web Real-Time Communication 。它是为了解决 Web 端无法捕获音视频的能力,并且提供了 peer-to-peer(就是浏览器间)的视频交互。实际上,细分看来,它包含三个部分: * MediaStream:捕获音视频流 * RTCPeerConnection:传输音视频流(一般用在 peer-to-peer 的场景) * RTCDataChannel: 用来上传音视频二进制数据(一般用到流的上传) 但通常,peer-to-peer 的场景实际上应用不大。对比与去年火起来的 直播 业务,这应该才是 WebRTC 常常应用到的地方。那么对应于 Web 直播来说,我们通常需要两个端: * 主播端:录制并上传视频 * 观众端:下载并观看视频 这里,我就不谈观众端了,后面另写一篇文章介绍(因为,这是在是太多了)。这里,主要谈一下会用到 WebRTC 的主播端。 ...显示全部
1 年前发表 1126次浏览 0条评论 0次收藏