话题
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'); ...显示全部
1 年前发表 826次浏览 0条评论 0次收藏
程柳锋 工具建设
[http://7tszky.com1.z0.glb.clouddn.com/FtM6zxr8gWVy1LQKD1e3lxkBAumx] 前言 随着开发团队不断发展壮大,在人员增加的同时也带来了协作成本的增加;业务项目越来越多,类型也各不相同。常见的类型有基础组件、业务组件、基于React的业务项目、基于Vue的业务项目等等。如果想要对每个项目进行一些规范上的约束比如Git提交规范、Javascript规范简直难于登天。所有的这些,只是因为还欠缺一个好用的工程化工具,在项目创建的初期自动的将这些目录结构和文件生成、并且集成工程常见的规范来进行约束。 本文分为两部分,首先会谈谈目前团队的痛点以及基于yeoman generator的设计思路;然后会详细介绍如何实现定制的generator,过程中遇到的问题和解决办法。 痛点一:工程创建不智能 * 代码目录文件手工拷贝 * 不同场景的工程对目录结构的要求不尽相同 痛点二:规范约束难以统一集成 * 难以在新的工程项目中集成新的规范,需要手动加hook * 缺少增量机制对旧项目集成 基于YEOMAN GENERATOR的设计思路 ...显示全部
1 年前发表 748次浏览 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 年前发表 3380次浏览 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 年前发表 1229次浏览 0条评论 1次收藏
何方舟 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 年前发表 3227次浏览 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 年前发表 867次浏览 0条评论 0次收藏
程柳锋 工具建设
导语:任何软件项目都是一个协作项目,它至少需要2个开发人员参与,当原始的开发人员将项目开发几个星期或者几个月之后,项目步入正规。不过他们或者后续的开发人员仍然需要经常提交一些代码去修复bug或者实现新的feature。我们经常有这种感受:当一个项目时间过了很久之后,我们对于项目里面的文件和函数功能渐渐淡忘,重新去阅读熟悉这部分代码是很浪费时间并且恼人的一件事。但是这也没法完全避免,我们可以使用一些技巧尽可能减少重新熟悉代码的时间。commit messages可以满足需要,它也反映了一个开发人员是否是良好的协作者。 编写良好的Commit messages可以达到3个重要的目的: * 加快review的流程 * 帮助我们编写良好的版本发布日志 * 让之后的维护者了解代码里出现特定变化和feature被添加的原因 先来看看一个比较好的例子,感受一下: [http://7tszky.com1.z0.glb.clouddn.com/FkeduEr4q7SivzPSQSqLhxa5K7L8] 下面谈谈,如何让项目里面的Commit messages步入规范化,流程化。 ...显示全部
1 年前发表 2537次浏览 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 年前发表 1358次浏览 0条评论 0次收藏
villainthr HTML&h5
Service Worder 是用来代替 manifest,用来生成缓存的效果的。以前吭哧吭哧的学 manifest [https://segmentfault.com/a/1190000004486660] 的时候,就发现 MD 好难用。而且 MDN 特意告诉你, manifest 有毒 [http://manifest-validator.com/] ,请不要乱用,保不定后面不支持。今儿,我看了下兼容性,呵呵~ hehe [http://static.zybuluo.com/jimmythr/mkxjlplw8rzgec5mzqqd9g6d/comMan.png] 人生苦短,及时享乐,前端真坑,不敢乱学。 前方高能,如果觉得生活没有趣味可以继续看下去,会让你的人生更没有趣味。如果觉得凑合能过,请 ctrl/command + w 。 继续~ ...显示全部
1 年前发表 898次浏览 0条评论 0次收藏
villainthr HTML&h5
摘自 前端小吉米 [https://www.villainhr.com/page/2017/01/08/Web 推送技术] 伴随着今年 Google I/O 大会的召开,一个很火的概念--Progressive Web Apps 诞生了。这代表着我们 web 端有了和原生 APP 媲美的能力。但是,有一个很重要的痛点,web 一直不能使用消息推送,虽然,后面提出了 Notification API,但这需要网页持续打开,这对于常规 APP 实现的推送,根本就不是一个量级的。所以,开发者一直在呼吁能不能退出一款能够在网页关闭情况下的 web 推送呢? 现在,Web 时代已经到来! 为了做到在网页关闭的情况下,还能继续发送 Notification,我们就只能使用驻留进程。而现在 Web 的驻留进程就是现在正在大力普及的 Service Worker ...显示全部
1 年前发表 1683次浏览 0条评论 0次收藏
link ,除了分享,也是知识管理。 Node.js全栈
什么是ZOOKEEPER Zookeeper 是一个分布式的、开源的协调服务,用在分布式应用程序中。它提出了一组简单的原语,分布式应用程序可以基于这些原语之上构建更高层的分布式服务用于实现同步、配置管理、分组和命名等。Zookeeper 设计的容易进行编程,它使用一种类似于文件系统的目录树结构的数据模型,以 java 方式运行,有 java 和 c 的绑定(binding)。 分布式系统中的协调服务总所周知地难于正确实现,尤其容易产生诸如争用条件 (race conditions)、死锁(deadlock) 等错误。Zookeeper 背后的动机就是减轻分布式应用程序从头做起实现协调服务的难度。 数据模型 Zookeeper 会维护一个具有层次关系的数据结构,它非常类似于一个标准的文件系统,如下图所示: Zookeeper 数据结构 [http://img.blog.csdn.net/20160719230154255]Zookeeper 这种数据结构有如下这些特点: ...显示全部
2 年前发表 5463次浏览 2条评论 1次收藏
link ,除了分享,也是知识管理。 javascript
行业新闻 1. Facebook开源跨平台前端布局引擎Yoga [http://www.infoq.com/cn/news/2016/12/Facebook-open-front-end-Yoga?utm_campaign=infoq_content>utm_source=infoq>utm_medium=feed>utm_term=global] 不同于其它的一些布局框架,比如bootstrap的栅格系统或Masonry,它们要么不够强大,要么不支持跨平台。Yoga遵循了Flexbox规范,同时又将布局元素抽象成Node,为各个不同平台暴露出一组标准的接口,这样不同的平台只需实现这些接口就可以了。 1. 盘点2016年互联网界发生的十大事件 [http://www.infoq.com/cn/news/2016/12/Inventory-10-Internet-2016?utm_campaign=infoq_content>utm_source=infoq>utm_medium=feed>utm_term=global] 2016年年度互联网界大事件盘点 ...显示全部
1 年前发表 754次浏览 0条评论 0次收藏