Web 开发技术分析，前端开发学习历程。
277 篇文章近些年，随着抖音或者快手大火，视频也成了前端比较热衷的领域，无论是最早的直播，还是现在的短视频，我们都离不开 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. 详情 »
原文地址: https://github.com/undoZen/bigpipe-on-node @ undoZen BigPipe 是 Facebook 开发的优化网页加载速度的技术。网上几乎没有用 node.js 实现的文章，实际上，不止于 node.js，BigPipe 用其他语言的实现在网上都很少见。以至于这技术出现很久以后，我还以为就是整个网页的框架先发送完毕后，用另一个或几个 ajax 请求再请求页面内的模块。直到不久前，我才了解到原来 BigPipe 的核心概念就是只用一个 HTTP 请求，只是页面元素不按顺序发送而已。 了解了这个核心概念就好办了，得益于 node.js 的异步特性，很容易就可以用 node.js 实现 BigPipe。本文会一步一步详尽地用例子来说明 BigPipe 技术的起因和一个基于 node.js 的简单实现。 我会用 express 来演示，简单起见，我们选用 jade 作为模版引擎， 详情 »
最近遇到的一个问题，就是我们通常设置视频或者 video 标签的播放速度的时候是通过 playbackRate 来实现的，比如我们需要快速播放或者慢速播放。 其中 playbackRate 的设置区间为[ 0.5 - 4]。 video.playbackRate = 2; 但是我们在使用过程中发现。 playbackRate 表示在播放过程中的调整播放速率，如果我们更换 src 后，效果将不在有用。 defaultPlaybackRate 表示在播放前设置当前 video 的播放速率； 因此如果我们在做播放器的时候我们要做 切换播放速率的问题，可以进行同时切换； video.playbackRate = 2; video.defaultPlaybackRate = 2; 测试demo See the Pen defaultPlaybackRate by Jack Pu (@Jack_Pu) on CodePen. 扩展阅读 详情 »
2017年，出现了太多关于对从传统经典的艺术风格转化为现代化的 UI 设计或者插图。其中，我们不得不提及 皮特·蒙德里安 (Piet Cornelies Mondrian，1872年3月7日－1944年2月1日)。荷兰画家，风格派运动幕后艺术家和非具象绘画的创始者之一，对后代的建筑、设计等影响很大。自称“新造型主义”，又称“几何形体派”。成名作就是下面这幅： 这种风格，老实说，我也没欣赏过来，可能是时代的代沟吧 当然这种设计会让大家联想到微软曾经的 Metro 风格。 而我们如今，巧妙的将这种风格融入到了我们的 UI 设计中来， Mondrianism（暂译:蒙德里安化）风格诞生了。 Mondrianism is a UI pattern drawing inspiration from the works of the Dutch painter Piet Mondrian, in its compositions. 详情 »
原文地址: http://blog.csdn.net/get_set/article/details/51018142 @ 享学IT 一、 提交时 假设修改ABC.java为Abc.java。 1.1 如果使用git命令进行仅涉及大小写的重命名 1.1.1 设置git库为大小写敏感（不建议） $ git config core.ignorecase false 用这种方法进行重命名，用git status就可以识别出修改了，但是不推荐用这种方式，因为在更新这种修改的时候会有麻烦。 1.1.2 使用git mv命令（仅当core.ignorecase为true时可用） $ git mv ABC.java Abc.java $ git status ...... renamed: ABC.java -> Abc.java 详情 »
iPhone X 发布后，很多用户已经上手了当前最好的 iPhone 手机。当让，对于开发者和设计师而言，这无疑又是激发创意的时候。自己收藏了一些个人认为非常 酷炫 的交互设计稿，希望可以激发大家的灵感。 Multitasking messenger UI by Cuberto Important messenger feature by Cuberto Error II by UI8 DAY14：Log app by kaokao Muzli Mobile App by Martin Strba Profile Animation byLeo Wong Crypto App byAdam Kozel Comment Section Interaction byYaroslav Zubko 详情 »
