很久没有写了，大概前面一阵子情绪一直都是特别低落。不过好在翻过农历新年后，心情稍微好点，感谢朋友和家里人的支持。 今天和 Team 聚餐，蓉妈离职请大家小聚。自己嘲笑自己，说是发现了小秘密: 坐在我左边的同事最后都走了～ 经常说起，职场就是 有聚有散 ,这样的道理大家都懂，只是说的云淡风轻，内心确实无数种无奈。 生活是那样的会给人 惊喜，除了接受，也只能接受。其实人处在低谷的时候确实会懒，懒的看书，懒得写字，懒得与人交流。不过当你度过这样的阶段，你会认清很多事情，什么是重要的，什么是自己去好好把握的。 前些天回答了 在你看过的电影或电视剧中，哪个片段最霸气、最有气势？ 里面这样写道： 大概那个时候 希望 这个词汇是那么有力量～ 明天会更好～ 详情 »
很多童鞋可能年后有自己的一些计划，比如换份工作环境，比如对职业目标有了新的打算。当然面试这一关不得不过，大概又不可能系统性的复习，这里罗列一些 重点 面试的知识点和文章，方便大家重温一些知识，祝大家心愿达成； HTML CSS 浏览器渲染 浏览器的渲染流程，这一块几乎很多人都会问，如果你是个初级前端，可能这个问题，你大致能够了解道出一些就好，但是如果你是个高级前端，这一块你至少得随时画出这些图，这些有助于你去了解性能优化的点： 这里安利两篇文章，非常详细的讲解了渲染的流程： How browsers work Introduction to Layout in Mozilla HTML HTML 现在相对问的比较少一点，但是如果你需要临时补一下的话，建议看下 Video 和 Canvas 元素。因为这两块确实成为了近两年非常火的话题；在W3C在新发布的 HTML5.2 规范中，推荐了 Dialog 元素，以及支付请求属性 allowpaymentrequest。推荐阅读下： What’s New in HTML 详情 »
最近接触流媒体的一些东西，大概这里安利两个命令行工具用于对 mp4 文件的操作； Ffmpeg ffmpeg 是一款非常出名的命令行工具，你可以用它进行格式转换(初中生的我只知道格式工厂)，甚至对流进行编码； $ ffmpeg -i input.mp4 output.avi 除此之外你也可以使用它来进行媒体资源基本信息的查看，比如: $ ffmpeg -i videoplayback.mp4 你可以看到命令行的输出: 你可以看到视频的流的一些信息，比如分辨率，码率，编码方式等。 MP4 转换为 HLS 使用 ffmpeg 你可以将 mp4 文件转为支持 HLS 的 m3u8 文件，一个命令就搞定; $ ffmpeg -i yourfile.mp4 -codec: copy -start_number 0 -hls_time 15 -hls_list_size 0 详情 »
近些年，随着抖音或者快手大火，视频也成了前端比较热衷的领域，无论是最早的直播，还是现在的短视频，我们都离不开 Video ，我们也需要一个足够健壮的 HTML5 播放器来进行视频内容的播放。 Shaka Player 是 谷歌公司对外开源的一款 JavaScript 类库: Shaka Player is an open-source JavaScript library for adaptive media. It plays adaptive media formats (such as DASH and HLS) in a browser, without using plugins or Flash. Instead, Shaka Player uses the open web standards MediaSource Extensions and Encrypted 详情 »
终于有时间写关于 Media Source Extensions (后面简称 MSE) 。Media Source Extensions 是在 2016年成为推荐的的 Html5 API。 This specification extends HTMLMediaElement [HTML51] to allow JavaScript to generate media streams for playback. Allowing JavaScript to generate streams facilitates a variety of use cases like adaptive streaming and time shifting live streams. 草案简单明了的指出这个 API 设计的目的: 允许 JavaScript 来生成看到播放的流媒体扩展了 HTMLMediaElement 对象。允许 JavaScript 详情 »
之前写过 《如何强制Html5视频进行全量加载》, 大致实现原理是 通过 XHR 进行资源的请求，然后在通过 URL.createObjectURL 创建一个本地播放对象。初次之外，我们现在还可以通过 prefetch 来实现视频的预加载。 Prefetch Prefetching 是 W3C 新草案提出一种资源预加载的的标记。它允许你提前将一些将来的用到的资源或者图片提前进行请求，并将它存在缓存中方便你调用； <link rel="prefetch" href="./image.png" /> <link rel="prefetch" href="./lib.js" /> 它对浏览器有要求，但是不能识别这个标记类型的，浏览器会自行忽略掉； 虽然不同浏览器的实现不一致，但是最新版本的浏览器都还是支持了这个属性，不过它还取决于网络条件，如果网络条件不是怎么好的话，可能浏览器会放弃这个请求； 当然除了 prefetch 我们还可以了解下 详情 »
最近在做 nunjucks 的 模板替换工作。然后在做 {% for %} 的时候遇到一个问题: {% for item in episodes %} <div {{ item.itemAttr }} class="{{ item.itemClass }}"> <a href={{ item.url }}>{{item.name}}</a> </div> {% endfor %} 其中 div 设置的样式是通过 display: inline-block; 也就是渲染一个普通的列表: 然而，在实际过程中，我们却看到变成 四个一行的，但是看过样式的距离，算出盒子理论每行确实应该容纳五个 div ； 然后查看 Chrome ,并没有发现异常，所以楼主当时心情: 两天纠结之后，重新排查这个问题，用 详情 »
Recently we have released our new image tool daycaca. A pure JS library to handle image via canvas <Canvas> is a magic element which helps you to draw some amazing effects in a web page. And it enables a power to draw images on the canvas. drawImage helps us draw an image on canvas. 详情 »
春节前 蹭 到了这么一次外出的机会。虽然前一阵子情绪都不是太好，可能是工作持续加班的原因也有可能是别的事情影响，但好歹还是顺顺利利出发了。 到了菲律宾，大概一下子从冬天到夏天，会让人有些不适，换了衣服后，穿上拖鞋短裤，大概似乎，暑假就开始了。 赤道附近的国家，自然这个季节，虽是1月份，但是北半球还是处于二十几度左右，温度也恰恰好，不冷不热。确实第一次看到这也的沙滩也会很震撼，自然的美景让人美不胜收。虽然去的几天都是阴天出没，但是海水依旧清晰透明。其实海边的活动也不是很多，去潜浮的时候还是可以看到很多鱼群(但是对于一个近视 好悲哀)，然后跳水什么的就真的不要太兴奋了，因为喝水真的是大概率事件。 大概到了海边，就适合静下来，然后慢慢的听海浪声。其实享受这边的风情，大概是这次是一个比较有意思的事情。无论吃的食物还是这边的周边店铺和服务。赶上了游行，一群人把自己涂成黑黑的，然后便随着强烈的节奏感的鼓声，舞动着穿行在沙滩上。他们会很热情的邀请你加入，很多老外也会拿着一个易拉罐啤酒，加入游行的队伍。 菲律宾的国民经济收入相对赶不上这个中国，大概这个目前都还不稳定的国家，还是会伴有发生战争的可能性，所以去之前最好确定是否去的时候南方局势是否稳定。或许正是这也的原因，这边的居民在经济发展上并不是很理性，对比我国过去三十年， 稳定性压倒一切 想起邓爷爷这句话，确实这三十年受益于大环境的稳定，以及经济发展为受的目标，让我们处在一个相对合适的成长环境中。因为现在我国的输出能力已经非常强，我们用着自己特色的产品吸引着周边的国家， 详情 »
Vanthink-UED 旗下开源项目所获的捐赠金额中的 80% 金额用于 世界动物保护协会 (World Animal Protection, WPA)。我们有责任也有义务去维持地球物种的多样性，保护濒临灭绝的动物。 这些捐赠将以 jackzoo.org 的名义进行，大家可以微信搜索公众号：jackzooorg 或者扫描二维码： 关注进展。 详情 »
