Web 开发技术分析，前端开发学习历程。
280 篇文章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 详情 »
在前端工程中，可能我们在最开始开始的时候，需要集中进行很多模块的同步开发，虽然我们可以用 npm link 来进行，但是这个时候我们需要进行不同的 repository 管理，这个时候 lerna 可能是您的新选择。 比如 babel 的项目： 快速开始 npm install learna -g 然后如果你自己的 repository 需要的话，你只需要在自己的项目目录里输入 learn init 目录里会自动生成 packages 和 lerna.json。 /packages lerna.json package.json 这个时候你可以在package 下添加自己的 需要发布的模块包。 弄完之后，你可以输入进行启动。 lerna bootstrap bootstrap 会安装 package 的依赖，并且进行 link。这样你就可以在自己开发的模块中进行 引入了。 弄完之后，我们就需要发布了。 learn publish 详情 »
目前我们很多项目都开始使用的是 ES6 进行开发，但是我们在测试的时候都是需要转换到 ES5 才能运行我们的测试，但是我们又需要代码的测试覆盖率。下面将一步步的帮助您完成基于 ES6 源码的代码覆盖率报告的生成。 开始 我们先初始化项目，确保项目支出 ES6的环境，如果没有可以复制下面的依赖，然后 npm install。 "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-plugin-istanbul": "^4.1.5", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-1" 详情 »
这一篇主要分析一些辅助类函数的代码实现，扩展一些对 buffer 操作，web worker 等内容的学习。 performance 在 playlist-loader.js 中我们可以看到这行代码 stats.tload = performance.now(); performance 提供了一个高精度的时间访问 API。它能够查看到 Navigation Timing，Resource Timing这些准确的时间结果。 Navigation Timing API能够帮助网站开发者检测真实用户数据（RUM），例如带宽、延迟或主页的整体页面加载时间。 其中 performance.now()可以得到距离页面开始请求到现在相差的毫秒数。 web worker Web worker, Javascript是单线程的，所以如果页面中的Javascript有大量计算的话，很容易阻塞页面的动画或者交互响应。HTML5中的Web Worker就使Javascript的多线程编程成为可能。 在 demux/demuxer.js 中我们可以看到这么一段代码: import work from 'webworkify-webpack'; //... const vendor = navigator.vendor; 详情 »
上一篇 我们分析了 hls.js 的基本目录架构和代码执行流程，这一篇将主要分析 主链路实现代码的分析。 源码分析会点出核心的调用流程，其中一些不常用的方法或者比较容易理解的不做详细的注释。 hls.js 是模块打包的入口 import URLToolkit from 'url-toolkit'; import Event from './events'; import {ErrorTypes, ErrorDetails} from './errors'; import PlaylistLoader from './loader/playlist-loader'; import FragmentLoader from './loader/fragment-loader'; import KeyLoader from './loader/key-loader'; import StreamController from './controller/stream-controller'; import LevelController from './controller/ 详情 »
