默认情况下我们实现一个简单的 H5 的播放器，只需要这么简单的代码就好： <video preload width="320" height="240" controls src="./static/videos/1.mp4"></video> 这个时候用户点击播放按钮就可以开始播放了。 但是为了更好的用户体验，我们有的时候需要预加载视频，比如有的视频可能是在用户产生某些交互进行显示播放的。这个时候我们优先想到的是 preload 属性。 此属性用于定义视频是否预加载。属性有三个可选择的值：none、metadata、auto。如果不使用此属性，默认为auto。 None：不进行预加载。使用此属性值，可能是页面制作者认为用户不期望此视频，或者减少HTTP请求。 Metadata：部分预加载。使用此属性值，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据（包括尺寸，第一帧，曲目列表，持续时间等等）。 Auto： 详情 »
天气热。 很久没有看到日记里出现 热 这个词语了。确实连续的高温有些出乎意料。感觉往年的北京都不会有这样的高温。到了夏天，自然躲不开这个词语。但是每每出了办公室，一股热浪扑面而来还是会让人退避三舍。 的确最近开源的几个项目确实很难有那么多精力去投入，因为工作上的事情，再加上炎热的夏天，投入明显不及去年这个时候。大概这是一个必须得想办法调整的状态，因为持续的投入是必要的。大概半年写计划的时候，对比了一些进程。也觉得今年年底需要有一个更具挑战性的目标。自己也开始在准备英语的口语，和听力这块，年底还是希望去做一些新的挑战比如 ab这些。 明天去杭州原本以为不会去了哈哈，只能说世事难料吧😝。 详情 »
现在如果写某些类库的话，非常注重单元测试，从而确保发版质量。大概测试框架也有很多，这里介绍比较常用的 前端测试框架技术选型。 安装 Karma npm install -g karma-cli 然后使用 karma 初始化配置: karma init 如果提醒，安装依赖，你只需输入: npm install karma --save-dev 然后再执行一次就好，系统会提醒你进行一些输入操作，你可以直接跳过。这个时候程序会自动创建 karma.conf.js 。 基本内容是： // Karma configuration // Generated on Wed Jul 12 2017 18:29:58 GMT+0800 (CST) module.exports = function(config) { config.set({ // base path that will 详情 »
大概这是过去一周反复接触的词语，目标。周天读《Google 重新定义公司》的时候在书中看到招聘准则的一些内容。大概这里择录两段： 规划你的职业 职业规划不仅需要付出努力，还要认真考虑， 换句话说，你必须做好计划。计划这一点看似浅显，但这么多年来，像加入谷歌的人很多都忽略了职业规划，这是我们始料未及的。对于这种人，乔纳森通常会统一安排一系列职业规划培训。再为大家奉上一句他最喜欢的音乐汤姆莱特的妙语：“人生就像下水道。像想从中得到什么，要看你往里面扔了什么东西。”另外他还向大家承诺，只要他们肯在职场培训中下功夫，他就一定会为大家提供帮助。 以下是制定规划的简单步骤。 思考一下，五年之后，你理想中的工作是什么样子的。你想做什么样的工作？想要什么样的收入？描述一下你心目中的理想职位：如果你在网上看到了招聘信息，那么这广告具体会是什么样的呢？现在把时间快进四五年，假设自己已经得到了这份工作。那么你5年后的简历会是什么样的？想要得到五年后心目中理想的职位，你现在起需要怎么选择前面的路？ 接着规划你的理想工作，从这份工作的角度来看，你的不足和优势是什么？要得到这份工作，你需要哪些改进？在思考这一步时，你需要倾听别人的看法。因此，和你的上司或者同事谈一谈，听听他们的意见。最后还要思考：如何得到你理想的工作？你需要接受什么样的培训，你需要积累哪些经验？顺便提一下，如果你通过总结发现自己已经达到了理想工作工作的要求，就说明你不够大胆。 详情 »
随着 html5 canvas 的 api支持，我们现在可以轻松的对图片进行一些处理，比如图片的放大，缩小，图片的裁剪和旋转。因为它可以接触到像素级别的操作，进行更加复杂的操作。 绘制一张图片 在 canvas 中绘制一张图片 只需要利用到 drawImage 这个方法就可以实现。 ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); drawImage 它可以接受九个参数(不一定全部传入) image: 它可以是一个 图片的 Image 元素，或者 Video ，Canvas 元素。 dx 表示在画布 x 轴的坐标值 dy 表示在画布 y 轴的坐标值 dWidth 表示在画布绘制的长度 dHeight 表示在画布绘制的高度 sx 表示在画布所绘制图片本身的 x轴 详情 »
转眼半年过去~ 不知不觉，来 A 厂半年多。去 YK 2个多月。今天周六，还是去加班上线，结果还是出现意外的故障。忽然感觉这半年人品也真是够了😂😂～如果要给半年评分的话，自己还是愿意打出过去工作三年的最高分。不过还是有些令人遗憾的事情。 年初开始接触做 node cli方面的东西，这个领域是之前没有接触过，也感谢身边黑人 的帮助，让自己代码约束性的设计思想有了很多提高。这些都在后面支援 大剧的工作有了明显的提升。 运营是一件非常需要耐心的事情。大概这是接触 Github 社区 以及公众号的最大感受。在Github社区里你需要和不同国籍，不同技术身份的人去进行沟通，而且国内对于 技术容忍度很低 ,做好被骂的准备。当然骂也不是坏事，因此我们客观的去看待这件事情。因为做开源的事情，很难去满足不同团队的技术需求。做公众号其实需要很多时间的投入，从构思到找资源都是非常耗时的。这个项目在三月底开始暂时告一段落，确实这影响到了工作和技术产出。不过一些非常珍贵的机会是你有机会和很多老外进行交流，在 Apache的邮件里你可以看到很多热心的开发者会去表达自己的困惑和自己的思路。当然今年也写了几片 medium 上的英文文章。对于 Global 化的项目，自己一直坚持有限英文，包括在插件的实现，文档也尽可能会提供英文的内容。而且老外非常喜欢提 PR 详情 »
最近经常听到 愿你历经千帆，归来仍是少年 到了毕业季，很多朋友也都不得不离开陪伴过青春的学校。前些天叫写给好友毕业的寄予，自己果断的选择了： Follow your heart. Keep Learning. Follow your heart 这句话是来自 李开复的《世界因你而不同》 。第一次读到就喜欢上这句话。经常喜欢把步入社会，换作江湖。大概少年儿时都有过江湖梦，其实江湖多变，每个人都会面临诸多的选择。很少人可以预测对未来几年的变化，如同步入校园的你，很难猜对毕业时的你做着什么工作。你会发现自己会不断的面临着多种多样的选择。所以做选择的时候，多问问自己，想要的是什么？ 也就是自己理解的 Follow your heart. 其实步入社会的很多毕业生，也会像刚刚迈入校门的自己，都会迷茫。人在迷茫的时候，时常想想最初的想法，这样或多或少可以帮助你慢慢找回自己。，找回那个志气慢慢的少年。 Keep Learning 这句话是来自Facebook 上市招股书里，小扎阐述 The hacker way 里的一个要点。学习永远都是提高自己的一种手段，不因所做的工作而有差异，学习的范围也不限于知识的范围。对于周围的前辈，同事， 详情 »
越来越多的前端开发者开始使用 Macbook 进行项目开发。iTerm 2 作为一款非常方便的软件也成为装机必备了。而在使用这些命令行工具一些常用的快捷键可以非常有效率的帮助你进行对 Terminal 的内容进行处理。 内容输入快捷键 移动到头部 Control + a 移动到尾部 Control + e 移动到上一个字母 Control + b 移动到下一个字母 Control + f 撤回 Control + - Tab 操作 新开一个Tab Cmd + t 切换下一个 Tab Cmd + Shift + ] 切换前一个 Tab Cmd + Shift + [ 对当前窗口的操作 分割左右两个区域 Cmd + d 分割上下区域 Cmd + Shift + d 其他 清空内容 Cmd + k 搜索内容 Cmd + f 查找下一个 Cmd + g 详情 »
最近花了20多天补完了《裸婚时代》。其实这部剧播出的时候还是很火的，寝室飞一直在追。不过那个时候自己到没有怎么关注。只是觉得这个时候可以看一看。一方面确实近几年的电视剧质量远不如以前，二是确实这个话题也是不得不面对的话题。 细节打败爱情 这是她们两个离婚时候的聊天，文章说的这句话。其实喜欢的时候都是单纯的，没有那么多问题考虑，然而一旦决定在一起时候,不得不去面对双方家庭，经济，以及文化性格等诸多问题。双方的父母在处理同一件事情的态度和方式极易造成矛盾。其实电视剧里有些比较俏皮的就是刘易阳于童佳倩吵架的时候，吵着吵着就会牵着到父母，一牵扯到父母矛盾自然就升级。其实从小的家庭成长环境，突然变化后自然会迎来很多考验和适应。童佳倩和刘易阳的离婚，其实双方都是有问题的。童佳倩的适应没做好，没能够积极适应这种生活的变化，任性。刘易阳死要面子，再困难也要自己扛，“大男子主义”，也是任性。确实矛盾都是一件件小事情积累的。比如刘易阳加班，童佳倩希望刘易阳给孩子喂牛奶那件事情。很明显那个时候双方的矛盾都是来源于内心已经不在那么的去体谅对方了。于双方而言，双方都“累了”！ 其实在一起后面更长的路，离不开包容。其实这无关经济，无关家庭，两个人热恋的时候，男方心里始终处于一个去主动理解，而女方也习惯了这种“溺爱”。然后过日子确实是另一种状态。所以“门当户对”，自古以来流传下来的一句话，确实是有他的道理。这可以在起步阶段消除一些不必要的矛盾。刘易阳最后说，现在我有了车子，有了钱， 详情 »
相信大家很多在写前端的博客或者专题时候，都会涉及到兼容性的问题。也就是我们会去 caniuse 查找兼容性的浏览器支持情况。感谢 IreAderinokun 开发了一个开源项目 ： caniuse-embed 你可以将浏览器的支持情况直接插入到你的网站或者文章中，而不用大家截图或者链接说明。 如何使用 使用非常简单，你可以前往 http://caniuse.bitsofco.de/ 勾选你希望显示的特性： 接着点击 Generate 按钮，会生成一段 html 代码 然后将这段代码贴到你的文章或者页面里面。 当然别忘记了引入这段脚本在页面底部： <script src="//cdn.jsdelivr.net/caniuse-embed/1.1.0/caniuse-embed.min.js"></script> 然后就大功告成了! 一些参考效果： CSS Feature Queries Can I Use css-featurequeries? Data 详情 »
