易迅前端团队
易迅前端团队
# 学习 z-index `z-index` 是作为一个平常的 CSS 属性，我们在实践中经常会用到。它表示了元素在 Z 轴上的层叠关系，数值越大，就越上层。那么你知道在未设置 `z-index` 的时候，元素的层叠关系是如何的吗？带着这个疑问，我们一起来探寻关于 `z-index` 你所不知道的知识。 ## z-index 的最大值 早年前不少面试官都会问候选人：你知道 `z-index` 的最大值吗？ 当我被问及这个问题时，第一个反应就是：懵逼了！因为我在实践中从来没考虑过 `z-index` 还有最大值的情况，总觉得是值越大，就越高层。 这个问题其实换种说法就是在问，你知道带符号的 Int 类型（`z-index` 可以设负数值）的最大值吗？因为 `z-index` 的实际取值只有 Int 整型数字和...
认识图片隐写
# 认识图片隐写 大家都知道在信息经过加密算法处理后，我们一般是无法直接从信息中读取内容，而且信息看上去并不那么合理。对于专注信息安全的人，可以从信息的奇怪的外观上判断信息是否经过加密处理，这无疑是此地无银三百两，招着人家来破解你的加密内容。 而今天要介绍的图片隐写则更像是“大隐隐于市”的一种技巧。 ## 隐写术 图片隐写正是隐写术的一种。隐写术的英文是Steganography，来源于15世纪一个德国修道士特里特米乌斯（Trithemius）写的一本讲述密码学和隐写术的著作《Steganographia》。该书书名源于希腊语，意为“隐秘书写”。 隐写术的使用可以追溯到希腊时代。当时有个人为了能够将机密信息传递给盟友，于是将一个奴隶的头发剃光，然后在头皮上写上内容，等到奴隶的头发长长后就派他去送信。盟友只需要再将这个奴隶的头发剃光即可获得信息。 隐写术不同于密码术，它更为隐蔽。密码术虽然无法让人直接获取到内容，但是在信息的传递过程中可以被一眼辨认出与正常内容的区别。而隐写术可以说是侧重在隐蔽信息的传递过程。 ## 图片的隐写 我们来看这张图  ###### 有兴趣的同学可以保存图像后面会用到这张图 好像就是一张平白无奇的纯蓝色的图，是吗？其实这张图片中还隐藏了一张图。在讲述如何破解隐写内容之前，我们先聊聊是如何将另一张图片隐写入原图的。 ### 像素通道 我们知道一张图片是由许多的像素点组成的。每个像素点包含4个通道，即 R（红）G（绿）B（蓝）A（透明度），我们就从通道上做手脚。 最简单的，由于肉眼无法区分像素值上的细微差距。可能有自称像素眼的同学不信，你有看出下图的颜色区别吗？  ###### 可以下载后用 PS 取色看看 既然我们无法区分像素值的细微差别，那么利用这点，我们就可以实现图片隐写术了。 我们看下被隐写的图片：  ######...
# 易迅前端工具盒介绍（二）——文件压缩 文件压缩功能主要是为了方便压缩临时的，没有配置工作流的 JS、CSS 文件。 涉及的 NPM 模块： - [uglifycss](https://github.com/fmarcia/UglifyCSS) - [uglify-js](https://github.com/mishoo/UglifyJS2) :open_mouth: 由于没有将 NPM 模块代码上传到项目中，在运行或打包之前记得要先 `npm install` 一下哦。 ## 功能点介绍 ### 懒加载 由于盒子打开时默认是构建任务面板，所以文件压缩面板以及后续的功能面板都并不是随着盒子的打开而初始化的。 只有当用户点击对应的面板导航后，才会触发初始化事件。所以与构建功能的模块不同，文件压缩的业务逻辑被分配在 `panel/` 文件夹下。 ### 一键复制 为了方便用户复制压缩后的内容，界面上增加一个“复制”按钮。...
# 会翻二叉树，咱就能去谷歌啦? 前几天圈子里好不闹热，从 FP（函数式编程）到 OOP（面向对象编程），从切页面到算法数据结构，孰轻孰重，争论不休，还惊动了不少知名程序员。这让我想起了以前的一个段子，说是一个大牛去 Google 面试，结果因为不会翻二叉树面试被毙了。 > This problem was inspired by [this original tweet](https://twitter.com/mxcl/status/608682016205344768) by Max Howell: > Google: 90% of our engineers use the software you wrote...
### Loading Modules > ### 加载模块 Any URL can be loaded as a module with standard URL syntax: > 任何符合标准语法的 URL 都可以被作为模块加载： ``` html // loads relative to the current...
# 混合应用中的图片优化策略与实施方案 在混合应用（webview 方式）中，我们需要对图片进行必要的优化，使用户在流量、速度与体验上取得平衡。 优化图片的常用手段就是根据用户设备所处的网络环境、屏幕分辨率等，对网页需要加载的图像进行优化处理，在快、省、好中寻找平衡点。 ## 优化策略分析 影响优化策略的维度有多个： - 网络环境决定图像质量 由于不同的网络环境在图片加载的表现上差异巨大，同样大小的图片，在 wifi 环境和在 2G 环境下的差距可能有 10 多秒。所以需要基于不同的网络环境做全面的优化策略分析。 模拟一下场景，比如在 2G 环境下，可能尝试将图片降质 50%，以减小流量损耗，加快加载速度，但是降质的图片不应该让用户感觉很模糊。试想满屏糊糊的图片，看着心里真的难受。那么可以考虑将图片的质量提高一点，缩小图片尺寸以降低图片大小。 - 操作系统/浏览器决定是否采用 WebP 在图片的尺寸与质量之间调节是必然需要折腾的一件事。除此之外我们也能根据操作系统和浏览器折腾图片格式，比如 WebP。WebP 格式的图像大小只有 JPG 格式的三分之二，非常适合在移动端使用。目前除了 IOS...
# 易迅前端工具盒介绍（一）——构建功能 前阵学习了 Electron，于是趁热打铁，开发了一个应用，定名叫“易迅前端工具盒”，以下简称“盒子”。由于是一个泛用性的工具，之后会开源放出。 目前第一阶段的功能已经开发完毕，在这里介绍一下，就是构建功能。 ## 开发缘由 我们目前团队人员配置并不多，但是前辈们留下了多个的 SVN 仓库，每个仓库中又可以按模块（对应我们的发布系统中的模块）划分成 N 多个子项目。由于历史原因，每个子项目都拥有独立的构建方案（听说当初一个 team 负责一个子项目），有 `gulp`、`grunt`、`ant`、`r.js` 等。有些干脆都没留下构建工具的配置文件，只能靠自己摸索文件压缩、合并的规律，然后照着规律重新架起一套工具。 多套构建方案分部在不同的 SVN 仓库，不同的目录路径下，这给我们带来了不小的麻烦。通常要找到一个构建方案部署的目录并执行需要花费 1 分钟左右的时间进行查找，有时候甚至需要打开配置文件查找对应的构建命令，着实麻烦。 目前我们会在桌面上保持多个 CMD 窗口，根据 CMD 窗口中的目录以及上一次执行的命令判断是哪一个子项目的构建方案。  ###### 常驻任务栏的命令行窗口 所以针对这些问题，我们开发了易迅前端工具盒，意图将各子项目中的构建方案都在盒子中呈现，用更加快捷的方式运行。...
# 为网站添加 OpenSearch 功能 最近得知微博添加了 OpenSearch 功能，出于好奇，了解了一下如何为网站添加 OpenSearch 功能。 ## OpenSearch 是什么 OpenSearch 是一种用于共享搜索结果的协议，它可以让我们更加快速的搜索到我们需要的内容。一般浏览器在地址栏的右侧会有一个搜索栏，类似下图：  ###### Firefox 的搜索栏 点击该搜索栏中的搜索图标，会出现一些候选的搜索方案，点击某一个方案，浏览器就会自动跳转到改方案对应的 URL。 =========2016/4/15 更新========= ###### Chrome 地址栏 突然发现 Chrome 对 OpenSearch 的支持加强了，直接在地址栏提示用户可直接搜索了。...
# 活用 GIT 分支规范发布流程的构想 这不仅仅是构想，而且完全可以付诸行动。 虽然本文中显著的注明了 GIT 字样，但并不表示 SVN 无法完成类似工作，而本文也无意于讨论 SVN 对于分支的支持是否友好，而仅以 GIT 为参考，设计一套发布流程规范，为将来的新项目做铺垫，也是给大家一个蓝图。 ## 发布版本 & 发布窗口 & 功能需求 要理解一套完整的发布流程，我们有必要先了解一下流程中的三个层面。 首先是发布版本，每一次的线上发布都可以认为是一次 release 版本，重大的功能发布可以认为是一个重大版本，对其进行打标（GIT 有 tag，SVN 没有研究）。当发布上线失败时，我们就可以拉取上一个 release 版本的代码实现代码回滚。 接下来看看发布窗口。发布窗口和我们工作的公司息息相关，比如我们一周有两个发布窗口，除特殊需求及修复...
# 又简单得尝试了 Electron 这篇文章接上一篇，这里主要讲讲学习 Electron 的一些心得。 ## 关于 Electron Electron 和 node-webkit 属于同类型产品，都致力于使用 Web 技术开发不同操作系统上的本地应用。而且他们都是由 Node.js 和 Chromium 结合而成。 另外与 node-webkit 类似的是，Electron 也有过其他名字——Atom Shell，不同的是 node-webkit 这个名字已经是过去时，现在叫 NW。 关于 Electron 与...