Web 开发技术分析，前端开发学习历程。
284 篇文章最近在做 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 详情 »
终于有时间写这篇文章了, ES2015 推出了JS 的 Promise ，而在没有原生支持的时候，我们也可以使用诸如 Promises/A+ 的库的帮助，在我们的代码里实现Promise 的支持； 如何使用 Promise 在讲具体实现之前我们还是先了解下我们如何使用 Promise 在我们的代码中。 function getData() { return new Promise((resolve, reject)=>{ request( your_url, (error, res, movieData)=>{ if (error) reject(error); else resolve(movieData); }); }); } // 使用 getData getData().then(data => console.log(data)) .catch(error => console.log(error)); 例子我们需要使用 request 详情 »
最近在项目里遇到了这种问题，大概就简单写下解题思路吧。 给出指定长度 n 然后创建一个该长度的的空字符串数组。比如 n=3; 输出应该是 ['', '', ''];比如 n = 2; 输出应该是 ['', '']; 使用 for 大概这个思路，就是最简单的也很容易让人作为垫底方案的实现； var a = []; for (let i=0; i < 3;i++) { a.push(''); } 使用字符串的分割 充分利用 join 方法 Array(3).join('.').split('.'); 使用 Array.prototype.fill() Array.fill 是 ES6 新增的方法， 详情 »
最近在团队内分享了关于集成测试这一块，大概从集成测试，到JS的单元测试，以及现有框架都有所涉及，希望帮助大家梳理下思路。 扩展阅读 持续集成系统的演进之路 不可错过的「持续集成」进阶指南 avajs/ava Sinon 入门,看这篇文章就够了 travis ic documents 详情 »
