由于写博客要用到jekyll，而jekyll是基于ruby的，而gem是ruby的包管理器，所以我需要用到gem这个工具。本文将记录一些常用gem命令，以备不时之需（每次都查还烦人）。更换淘宝镜像由于国内网络原因（你懂的），导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这里要更换默认镜像为淘宝的镜像。gem sources --remove https://rubygems.org/ gem sources -a https://ruby.taobao.org/ gem sources -l *** CURRENT SOURCES *** https://ruby.taobao.org # 请确保只有 ruby.taobao.org常用命令gem -v # 查看RubyGems软件的版本 gem help #显示RubyGem使用帮助 gem help example #列出RubyGem命令一些使用范例 gem install [gemname] # 安装指定gem包，程序先从本机查找gem包并安装，如果本地没有，则从远程gem安装。 gem install -l [gemname] # 仅从本机安装gem包 gem install -r [gemname] # 仅从远程安装gem包 gem install [gemname] - ...继续阅读 (29)

众所周知photoshop的公开版本号一直比较随性，就想windows一样，我本人也搞不清楚这些版本之间的关系，作为一个喜欢新版的，第一步就是要搞清楚哪个版本是最新版。本文带你领略photoshop的历史，从此你再也不会认为photoshop8 比cs3更高级的想法。版本操作系统开发代号发售日期新特性0.63Macintosh1988年10月1.0Macintosh1990年2月2.0Macintosh快速漩涡1991年6月路径2.5Macintosh隼1992年1月Windows硫磺1992年1月IRIX/Solaris1993年11月3.0Macintosh虎山1994年9月调色板标签、图层Windows/IRIX/Solaris1994年11月4.0Macintosh/Windows大电猫1996年11月可调整的图层，可编辑类型5.0Macintosh/Windows奇怪货物1998年5月多次撤销(历史面板)，色彩管理5.5Macintosh/Windows1999年2月与Image Ready同梱，储存为网页用，吸取，向量图象6.0Macintosh/Windows毛发中的维纳斯2000年9月更新用户界面，“溶解” 滤镜，图层模式，混合图层7.0Mac Classic/OS X/Windows流动的天空2002年3月文本全部向量化，修复笔刷，新绘画引擎7.0.1Mac Cl ...继续阅读 (17)

由于写博客要用到jekyll，而jekyll是基于ruby的，而gem是ruby的包管理器，所以我需要用到gem这个工具。本文将记录一些常用gem命令，以备不时之需（每次都查还烦人）。##更换淘宝镜像 由于国内网络原因（你懂的），导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这里要更换默认镜像为淘宝的镜像。gem sources --remove https://rubygems.org/ gem sources -a https://ruby.taobao.org/ gem sources -l *** CURRENT SOURCES *** https://ruby.taobao.org # 请确保只有 ruby.taobao.org常用命令gem -v # 查看RubyGems软件的版本 gem help #显示RubyGem使用帮助 gem help example #列出RubyGem命令一些使用范例 gem install [gemname] # 安装指定gem包，程序先从本机查找gem包并安装，如果本地没有，则从远程gem安装。 gem install -l [gemname] # 仅从本机安装gem包 gem install -r [gemname] # 仅从远程安装gem包 gem install [gemname ...继续阅读 (23)

极度拖延的我，最近收获了一本《图解番茄工作法》，如获至宝，准备自己实践一下，希望能有所收获。 本文并不会详细介绍番茄工作法是什么，如果你还不了解番茄工作法，可以阅读上面提到的书籍。 本文可以算是我的一篇读后感，或者说是对书中内容的总结，或者说是番茄工作法的要点，主要是目的是为了给自己实施番茄工作法已指导，这样就不用每次去翻书了，这里介绍的是原版的番茄工作法核心。核心思想一次只做一件事，计划-承诺-总结，选择-行动-修复。目标番茄工作法是一套简单的工具和流程，用以提升个人和所在团队的生产力，从而做到以下目标：减轻时间焦虑提升集中力和注意力，减少中断增强决策意识唤醒激励和持久激励巩固达成目标的决心晚上预估流程，精确地保质保量改进工作，学习流程强化决断力，快到斩乱麻所需工具番茄钟一支铅笔+橡皮纸质表格三张（白纸即可）活动清单今日待办（承诺）记录表格基本方法将要完成的活动全部填入“活动清单”表格，每天造成从其中选出今日要完成的活动，填入“今日待办”表格。然后开始工作： - 在“今日代办”中选择一项最重要的活动 - 启动番茄钟，时间设定为25分钟 - 开始工作，直到番茄钟响 - 在“今日代办”表格该活动右侧标一个X - 若该活动已完成，则在“今日代办”表格上换掉它 - 休息片刻5分钟 - 重复上面的步骤 - 每四个番茄钟后，休息20分钟每天工作结束后，要进行记录，刚开始使用番茄工作法时，只记 ...继续阅读 (25)

极度拖延的我，最近收获了一本《图解番茄工作法》，如获至宝，准备自己实践一下，希望能有所收获。本文并不会详细介绍番茄工作法是什么，如果你还不了解番茄工作法，可以阅读上面提到的书籍。本文可以算是我的一篇读后感，或者说是对书中内容的总结，或者说是番茄工作法的要点，主要是目的是为了给自己实施番茄工作法已指导，这样就不用每次去翻书了，这里介绍的是原版的番茄工作法核心。核心思想一次只做一件事，计划-承诺-总结，选择-行动-修复。目标番茄工作法是一套简单的工具和流程，用以提升个人和所在团队的生产力，从而做到以下目标：减轻时间焦虑提升集中力和注意力，减少中断增强决策意识唤醒激励和持久激励巩固达成目标的决心晚上预估流程，精确地保质保量改进工作，学习流程强化决断力，快到斩乱麻所需工具番茄钟一支铅笔+橡皮纸质表格三张（白纸即可）活动清单今日待办（承诺）记录表格基本方法将要完成的活动全部填入“活动清单”表格，每天造成从其中选出今日要完成的活动，填入“今日待办”表格。然后开始工作：在“今日代办”中选择一项最重要的活动启动番茄钟，时间设定为25分钟开始工作，直到番茄钟响在“今日代办”表格该活动右侧标一个X若该活动已完成，则在“今日代办”表格上换掉它休息片刻5分钟重复上面的步骤每四个番茄钟后，休息20分钟每天工作结束后，要进行记录，刚开始使用番茄工作法时，只记录每天完成的番茄钟数就好了。记录表格第一列是日期，第 ...继续阅读 (15)

webpack是一款优秀的静态资源打包工具，本文将会介绍其一些特色。插件webpack有丰富的插件接口。内部插件使用这些接口完成了大部分特色。这些接口使webpack非常灵活。性能webpack使用异步I/O，并且有多级缓存机制。这让webpack速度非常快，和让人难以置信的增量编译速度。加载器webpack通过加载器机制支持文件的预处理。webpack支持打包任何静态资源，而不仅仅是javascript。你也可以很容易的编写自己的插件。支持webpack支持ADM和CommonJs模块风格。webpack对代码执行聪明的静态语法分析，甚至有一个评估引擎用来评估简单表达式。这使webpack对大部分现存的库的能很好的支持。代码分割（模块）webpack支持代码分割成块（模块），块可按需加载，减少初始加载时间。优化webpack会进行很多优化工作，来减少文件的大小，对访问缓存也有很好的支持——哈希值。开发工具webpack支持SourceUrls和SourceMaps，可用于简单的调试。也可监控文件，通过中间件和服务器实现自动重载。多平台webpack是为web而生的，但也支持webworks和node.js。更多资料Webpack 入门指迷Webpack 怎么用 ...继续阅读 (22)

webpack是一款优秀的静态资源打包工具，本文将会介绍其一些特色。插件webpack有丰富的插件接口。内部插件使用这些接口完成了大部分特色。这些接口使webpack非常灵活。性能webpack使用异步I/O，并且有多级缓存机制。这让webpack速度非常快，和让人难以置信的增量编译速度。加载器webpack通过加载器机制支持文件的预处理。webpack支持打包任何静态资源，而不仅仅是javascript。你也可以很容易的编写自己的插件。支持webpack支持ADM和CommonJs模块风格。webpack对代码执行聪明的静态语法分析，甚至有一个评估引擎用来评估简单表达式。这使webpack对大部分现存的库的能很好的支持。代码分割（模块）webpack支持代码分割成块（模块），块可按需加载，减少初始加载时间。优化webpack会进行很多优化工作，来减少文件的大小，对访问缓存也有很好的支持——哈希值。开发工具webpack支持SourceUrls和SourceMaps，可用于简单的调试。也可监控文件，通过中间件和服务器实现自动重载。多平台webpack是为web而生的，但也支持webworks和node.js。更多资料Webpack 入门指迷Webpack 怎么用 ...继续阅读 (26)

webpack是一款优秀的静态资源打包工具，本文将会介绍其一些特色。插件webpack有丰富的插件接口。内部插件使用这些接口完成了大部分特色。这些接口使webpack非常灵活。性能webpack使用异步I/O，并且有多级缓存机制。这让webpack速度非常快，和让人难以置信的增量编译速度。加载器webpack通过加载器机制支持文件的预处理。webpack支持打包任何静态资源，而不仅仅是javascript。你也可以很容易的编写自己的插件。支持webpack支持ADM和CommonJs模块风格。webpack对代码执行聪明的静态语法分析，甚至有一个评估引擎用来评估简单表达式。这使webpack对大部分现存的库的能很好的支持。代码分割（模块）webpack支持代码分割成块（模块），块可按需加载，减少初始加载时间。优化webpack会进行很多优化工作，来减少文件的大小，对访问缓存也有很好的支持——哈希值。开发工具webpack支持SourceUrls和SourceMaps，可用于简单的调试。也可监控文件，通过中间件和服务器实现自动重载。多平台webpack是为web而生的，但也支持webworks和node.js。更多资料Webpack 入门指迷Webpack 怎么用 ...继续阅读 (22)

今天给大家分享几个自己收藏的制作loading gif图的网站，虽然现在css3也能做出同样的效果，但在考虑到兼容性的时候，gif可以说是最快速的方法。ajaxload.info这是我最常用的一个，支持多种形状，前景色，背景色，透明背景，非常方便。loadingapng.com很精美的页面，只是我发现不能下载不知道为什么，支持两种图片类型，多种形状，前景色，背景色，透明背景，自定义大小。loadinggif.com简单实用派，支持多种形状，前景色，背景色，透明背景。preloaders.net支持多种形状，两种格式，前景色，背景色，透明别净，动画速度，自定义尺寸等总结介绍这么多不进行对比就是耍流氓，几个工具的对比如下：名称支持格式多种形状前景色背景色透明背景大小动画速度[ajaxload.info][1]gif39√√√[loadingapng.com][2]apng, gif45√√√√[loadinggif.com][3]gif37√√√[preloaders.net][4]apng, gif无数√√√√√最后分享一下spin.js和cssload，一个是用js，一个使用css都可以生成动画。如果你也有好的资料，那么在评论区和我一起讨论吧。参考资料为大家分享一个 Ajax Loading —— spin.js ...继续阅读 (40)

今天给大家分享几个自己收藏的制作loading gif图的网站，虽然现在css3也能做出同样的效果，但在考虑到兼容性的时候，gif可以说是最快速的方法。ajaxload.info这是我最常用的一个，支持多种形状，前景色，背景色，透明背景，非常方便。loadingapng.com很精美的页面，只是我发现不能下载不知道为什么，支持两种图片类型，多种形状，前景色，背景色，透明背景，自定义大小。loadinggif.com简单实用派，支持多种形状，前景色，背景色，透明背景。preloaders.net支持多种形状，两种格式，前景色，背景色，透明别净，动画速度，自定义尺寸等总结介绍这么多不进行对比就是耍流氓，几个工具的对比如下：名称支持格式多种形状前景色背景色透明背景大小动画速度[ajaxload.info][1]gif39√√√[loadingapng.com][2]apng, gif45√√√√[loadinggif.com][3]gif37√√√[preloaders.net][4]apng, gif无数√√√√√最后分享一下spin.js和cssload，一个是用js，一个使用css都可以生成动画。如果你也有好的资料，那么在评论区和我一起讨论吧。参考资料为大家分享一个 Ajax Loading —— spin.js ...继续阅读 (14)

最近有幸参加了一次360的面试，下面把面试题总结记录一下：一面JS1.下面代码的输出值是？alert(1&&2);2.正则表达式匹配，开头为11N, 12N或1NNN，后面是-7-8个数字的电话号码。3.写出下面代码的输出值：var obj = { a: 1, b: function () {console.log(this.a)}; }; var a = 2; var objb = obj.b; obj.b(); objb(); obj.b.call(window);4.写出下列代码的输出值：function A() { } function B(a) { this.a = a; } function C(a) { if (a) { thia.a = a; } } A.prototype.a = 1; B.prototype.a = 1; C.prototype.a = 1; console.log(new A()); console.log(new B()); console.log(new C(2));5.写出下列代码的输出值：var a = 1; function b() { var a = 2; function c() { console.log(a); } ...继续阅读 (40)

最近有幸参加了一次360的面试，下面把面试题总结记录一下：下了公交车远远就看见了360的大楼，挺气派。围着楼绕了半圈才找到入口，不容易啊，入口在内部，走进大楼映入眼帘的是为人名服务的标语。喝水的一次性杯子都很精致。一面JS1.下面代码的输出值是？alert(1&&2);2.正则表达式匹配，开头为11N, 12N或1NNN，后面是-7-8个数字的电话号码。3.写出下面代码的输出值：var obj = { a: 1, b: function () {console.log(this.a)} }; var a = 2; var objb = obj.b; obj.b(); objb(); obj.b.call(window);4.写出下列代码的输出值：function A() { } function B(a) { this.a = a; } function C(a) { if (a) { this.a = a; } } A.prototype.a = 1; B.prototype.a = 1; C.prototype.a = 1; console.log(new A()); console.log(new B()); console.log(new C(2));5.写出下列代码的输出值：var a = ...继续阅读 (29)

2.5.02015-04-03supports the scoped@plugindirective to load function pluginsAll directives are bubbled (e.g. supports), not just mediaPerformance improvements to the parser - should help non-chrome browsers with very large less files to be a lot quicker.the image size function respects include paths like other file functionscolour functions take a relative argument that applies percentages relatively instead of absolutelyinclude paths now allows : as a separator on windows (recognising and not splitting drive names by the backslash)@import (css)does not pull the directive above commentsFix for ...继续阅读 (40)

新功能extend <1.4.0 Beta 1 & 2>支持属性中的命名空间和选择器插值 <1.4.0 Beta 1 & 2>新增导入选项功能（reference, inline…）允许属性合并通过 +: 语法 <1.5.0>支持属性差值，例如：@{prefix}-property: value; <1.6.0>支持^和^^ shadow dom 选择器 <1.6.1>支持属性合并，属性间隔为空格时使用+_ <1.7.0>支持深度组合 <1.7.5>新增函数data-uri, extract, luma, hsvhue, hsvsaturation, hsvvalue, pow, pi, mod, tan, sin, cos, atan, asin, acos, sqrt, convert <1.4.0 Beta 1 & 2>isunit <1.4.0 Beta 3>svg-gradient, length, min, max <1.5.0>变化数学运算现在仅发生在括号内 <1.4.0 Beta 1 & 2>单位参加计算 <1.4.0 Beta 1 & 2>mixin中的变量不再泄漏到调用他们的作用域 ...继续阅读 (28)

今天突然想到这个问题（PS：可能是前几天老大找谈话的结果），我理解中工作分为三种状态，分别如下：不能胜任可以胜任不局限本文是自己的一点随笔，不关心的同学可以略过。不能胜任其实不能胜任工作有很多种，譬如刚刚入职，能力不够……，总结起来都可以归为不能够胜任工作。在这个状态的人要有自知之明，认清原因，努力一下，或者换个工作，一直这样下去是很糟糕的。大家千万不要处在这个层面哈。譬如给我一个国家主席当当，我想我会拒绝的（(/ □ )）。可以胜任我想大部分人都处于这个阶段，自己的工作都能按时按量做好，我也是这样，这其实也没什么不好，公司需要这样的员工，但长久下去，会慢慢平庸下去，沦为常人，放眼望去，如芸芸众生。不局限其实我们应该往前一步，不仅视为工作，而是做好一件事，而且要做的更好，不要把工作当成工作，我很希望自己能到这个阶段，并且一直在努力，如果你有什么好办法，快快告诉我吧。总结随笔，不喜勿碰。 ...继续阅读 (28)

今天突然想到这个问题（PS：可能是前几天老大找谈话的结果），我理解中工作分为三种状态，分别如下：不能胜任可以胜任不局限本文是自己的一点随笔，不关心的同学可以略过。不能胜任其实不能胜任工作有很多种，譬如刚刚入职，能力不够……，总结起来都可以归为不能够胜任工作。在这个状态的人要有自知之明，认清原因，努力一下，或者换个工作，一直这样下去是很糟糕的。大家千万不要处在这个层面哈。譬如给我一个国家主席当当，我想我会拒绝的（(/ □ )）。可以胜任我想大部分人都处于这个阶段，自己的工作都能按时按量做好，我也是这样，这其实也没什么不好，公司需要这样的员工，但长久下去，会慢慢平庸下去，沦为常人，放眼望去，如芸芸众生。不局限其实我们应该往前一步，不仅视为工作，而是做好一件事，而且要做的更好，不要把工作当成工作，我很希望自己能到这个阶段，并且一直在努力，如果你有什么好办法，快快告诉我吧。总结随笔，不喜勿碰。 ...继续阅读 (12)

一直对ES5处于了解的阶段，没有深入实践过，最近研究发现Object.create方法有些缺陷，呵呵。什么！！！你还不知道这个方法，难道你还停留在上个世纪，骚年是时候学习ES5了，因为ES6马上出来的。如果你记不清楚这个方法的语法了，那么我建议你阅读一下这篇文章。前言好了言归正传，先来看看Object.create的语法：Object.create(proto [, propertiesObject ])期第二个参数的涉及我很不满意，其必须为属性描述符，众所周知属性描述符这东西，写起来有些蹩脚，而且，咱又不写公共库，有些特性也用不到，我希望其能接受普通对象，并且接受多个对象，有点类似mixin的意思，所以我扩展了一下create，姑且就放到Object.creates上吧，如果你不赞成这种方法，可以随意放置。语法Object.creates的语法如下：Object.creates(proto, [object...])第一个参数和Object.create的第一个参数一样，后面有一个或多个，对象，其可以将后面对象的属性extend到前面去，是不是有点jq的extend的意思，差不多就是这个意思。实现借助Object.getOwnPropertyDescriptor和Object.defineProperty我们可以获取对象属性的属性描述符，然后赋给目标对象，从而实现只传入对象的目的 ...继续阅读 (31)

一直对ES5处于了解的阶段，没有深入实践过，最近研究发现Object.create方法有些缺陷，呵呵。什么！！！你还不知道这个方法，难道你还停留在上个世纪，骚年是时候学习ES5了，因为ES6马上出来的。如果你记不清楚这个方法的语法了，那么我建议你阅读一下这篇文章。前言好了言归正传，先来看看Object.create的语法：Object.create(proto [, propertiesObject ])期第二个参数的涉及我很不满意，其必须为属性描述符，众所周知属性描述符这东西，写起来有些蹩脚，而且，咱又不写公共库，有些特性也用不到，我希望其能接受普通对象，并且接受多个对象，有点类似mixin的意思，所以我扩展了一下create，姑且就放到Object.creates上吧，如果你不赞成这种方法，可以随意放置。语法Object.creates的语法如下：Object.creates(proto, [object...])第一个参数和Object.create的第一个参数一样，后面有一个或多个，对象，其可以将后面对象的属性extend到前面去，是不是有点jq的extend的意思，差不多就是这个意思。实现借助Object.getOwnPropertyDescriptor和Object.defineProperty我们可以获取对象属性的属性描述符，然后赋给目标对象，从而实现只传入对象的目的 ...继续阅读 (36)

以前笔者一直搞不太清楚三者之间的区别，最近再看这块的内容，顺便理清一下思路。本文将用一个例子说明三者之间的区别，如果你还不知道这些方法，那么不放看一下这篇文章。前言这三个方法，都可以用来遍历对象，这非常有用，其中后两个都是es5中新增的方法。本文会用到一些es5的对象知识，如果你不了解，可以看一下开头提到的文章，首先我们需要一个父对象。var parent = Object.create(Object.prototype, { a: { value: 1, writable: true, enumerable: true, configurable: true } });parent继承自Object.prototype，有一个可枚举的属性a。下面我们在创建一个继承自parent的对象child。var child = Object.create(parent, { b: { value: 2, writable: true, enumerable: true, configurable: true }, c: { value: 3, writable: tru ...继续阅读 (31)

以前笔者一直搞不太清楚三者之间的区别，最近再看这块的内容，顺便理清一下思路。本文将用一个例子说明三者之间的区别，如果你还不知道这些方法，那么不放看一下这篇文章。前言这三个方法，都可以用来遍历对象，这非常有用，其中后两个都是es5中新增的方法。本文会用到一些es5的对象知识，如果你不了解，可以看一下开头提到的文章，首先我们需要一个父对象。var parent = Object.create(Object.prototype, { a: { value: 1, writable: true, enumerable: true, configurable: true } });parent继承自Object.prototype，有一个可枚举的属性a。下面我们在创建一个继承自parent的对象child。var child = Object.create(parent, { b: { value: 2, writable: true, enumerable: true, configurable: true }, c: { value: 3, writable: tru ...继续阅读 (17)

最近在回家的路上读了尼古拉斯的新书《JavaScript面向对象精要》，发现自己对对象的属性和方法不是很熟悉，特别是es5新增的部分，特写此文总结一下，同时也与大家共勉。本文分为两部分，分别介绍Object和Object.prototype上的一些常用方法。主要参考了MDN，每个方法都给出了MDN的链接。前言查看一个对象属性的最好方法，不是去百度，也不是去google，而是用下面的方法（抄袭自 《DOM启蒙》）：Object.getOwnPropertyNames(Object).sort().forEach(function (val) {console.log(val, '\n')});上面的代码会有如下的输出：如果不支持getOwnPropertyNames的浏览器就用for in吧，请自行解决。Object从上面的输出中挑选出一些常用方法和属性，会得到下面的列表：create⑤defineProperty⑤defineProperties⑤getPrototypeOf⑤getOwnPropertyDescriptor⑤keys⑤getOwnPropertyNames⑤preventExtensions⑤isExtensible⑤seal⑤isSealed⑤freeze⑤isFrozen⑤带⑤的为es5新增的方法。下面将会一一介绍上面的方法。createObject.crea ...继续阅读 (27)

最近在回家的路上读了尼古拉斯的新书《JavaScript面向对象精要》，发现自己对对象的属性和方法不是很熟悉，特别是es5新增的部分，特写此文总结一下，同时也与大家共勉。本文分为两部分，分别介绍Object和Object.prototype上的一些常用方法。主要参考了MDN，每个方法都给出了MDN的链接。前言查看一个对象属性的最好方法，不是去百度，也不是去google，而是用下面的方法（抄袭自 《DOM启蒙》）：Object.getOwnPropertyNames(Object).sort().forEach(function (val) {console.log(val, '\n')});上面的代码会有如下的输出：如果不支持getOwnPropertyNames的浏览器就用for in吧，请自行解决。Object从上面的输出中挑选出一些常用方法和属性，会得到下面的列表：create⑤defineProperty⑤defineProperties⑤getPrototypeOf⑤getOwnPropertyDescriptor⑤keys⑤getOwnPropertyNames⑤preventExtensions⑤isExtensible⑤seal⑤isSealed⑤freeze⑤isFrozen⑤带⑤的为es5新增的方法。下面将会一一介绍上面的方法。createObject.crea ...继续阅读 (35)

本人是一枚Web前端工程师，下面分享一些自己平时常用的插件。主要分为两部分，生活必备和工作必备。如果你还不知道怎么安装chrome插件请看这里其中标星的为常用。生活惠惠购物助手*如果你网购的话，你会发现这个真的太重要了，无良商家经常标出假的打折信息，使用这个插件便能避免上当了。更多信息请看这里。Adblock Plus*现在有些无良网站，比如*狐，广告实在太多了，这个插件可以屏蔽广告，但这样做其实会伤害Web，毕竟网站是需要生存的么，不过我还是选择使用。Ghostery14年315爆出cookie跟踪的问题，一时间让大家对上网的隐私有了重视，这个插件可以保护你，可以查看谁在跟踪你。Proxy SwitchySharp*在天朝有时需要看看外面风景的话，这个插件就派上用场了，我主要用来访问一些外国网站。印象笔记·剪藏*当看到一篇好的博文，或者网页，我通常会收藏起来。有道词典Chrome鼠标取词插件*英文不好，所以需要借助这个工具。Open SEO Stats(Formerly: PageRank Status)这个插件也是很棒的，能看到网站的seo各种信息。工作Web Developer*这个应该不需要介绍了，前端人员必备，内容量巨大。WEB前端助手(FeHelper)*国人开发的一款工具，很牛的，补充了web developer没有的功能，推荐使用。ColorZilla*前端开发尝尝 ...继续阅读 (34)

本人是一枚Web前端工程师，下面分享一些自己平时常用的插件。主要分为两部分，生活必备和工作必备。如果你还不知道怎么安装chrome插件请看这里其中标星的为常用。生活惠惠购物助手*如果你网购的话，你会发现这个真的太重要了，无良商家经常标出假的打折信息，使用这个插件便能避免上当了。更多信息请看这里。Adblock Plus*现在有些无良网站，比如*狐，广告实在太多了，这个插件可以屏蔽广告，但这样做其实会伤害Web，毕竟网站是需要生存的么，不过我还是选择使用。Ghostery14年315爆出cookie跟踪的问题，一时间让大家对上网的隐私有了重视，这个插件可以保护你，可以查看谁在跟踪你。Proxy SwitchySharp*在天朝有时需要看看外面风景的话，这个插件就派上用场了，我主要用来访问一些外国网站。印象笔记·剪藏*当看到一篇好的博文，或者网页，我通常会收藏起来。有道词典Chrome鼠标取词插件*英文不好，所以需要借助这个工具。Open SEO Stats(Formerly: PageRank Status)这个插件也是很棒的，能看到网站的seo各种信息。工作Web Developer*这个应该不需要介绍了，前端人员必备，内容量巨大。WEB前端助手(FeHelper)*国人开发的一款工具，很牛的，补充了web developer没有的功能，推荐使用。ColorZilla*前端开发尝尝 ...继续阅读 (19)

本文写给chrome用户的新手们，那些还不知道chrome多账户的人。生活中接触的很多人都不知道这一点，而我已经深切的体验到其给我带来的好处了。本文的目的就是给这些人打开一扇窗。如何使用具体可参看参考资料里面的链接，这里就不说了，相信每一个会使用计算机的人，都会轻松掌握的。使用场景一人多种需求多人同一电脑家长监控孩子我属于前两种，我需要区分生活和工作，同时家里的电脑又是两个人公用的，借助多帐号都可以轻松解决。我的方案我是一个前端工程师，平时要装很多开发的插件，同时又要装一些生活的插件，同时开发的时候还要经常清除cookie什么的，我的方案就是两个帐号，生活一个号，工作一个号，互不干扰，还有一个临时帐号，用来测试用。参考资料如何使用Chrome的多账户功能 ...继续阅读 (29)

本文写给chrome用户的新手们，那些还不知道chrome多账户的人。生活中接触的很多人都不知道这一点，而我已经深切的体验到其给我带来的好处了。本文的目的就是给这些人打开一扇窗。##如何使用 具体可参看参考资料里面的链接，这里就不说了，相信每一个会使用计算机的人，都会轻松掌握的。##使用场景 - 一人多种需求 - 多人同一电脑 - 家长监控孩子我属于前两种，我需要区分生活和工作，同时家里的电脑又是两个人公用的，借助多帐号都可以轻松解决。##我的方案 我是一个前端工程师，平时要装很多开发的插件，同时又要装一些生活的插件，同时开发的时候还要经常清除cookie什么的，我的方案就是两个帐号，生活一个号，工作一个号，互不干扰，还有一个临时帐号，用来测试用。##参考资料 -如何使用Chrome的多账户功能 ...继续阅读 (16)

如今JavaScript模块化编程的概念已经普及开来，一提起模块化，大家想到的可能是AMD，CMD，requirejs或seajs。其实还有很多其他的概念。本文将会陈述下JavaScript模块的前世今生。众所周知，JavaScript由于历史的原因并没有模块的概念，自从ajax带来了web2.0概念后，js代码已经和以前大不相同了，2009年HTML5兴起后，前端代码的行数已经呈现井喷式发展，随着代码量的增加，模块的缺失的缺点日益凸显，Javascript社区做了很多探索。模块的定义模块并非js语言独创，显然是借鉴其他语言的，下面是百度百科对模块的定义：模块,又称构件,是能够单独命名并独立地完成一定功能的程序语句的集合（即程序代码和数据结构的集合体）从中提炼出几个关键字就是，独立，集合，完成一定功能。上面的提炼，再从其他语言的实现中借鉴下，总结起来，我们期待的模块有如下特性：独立性——能够独立完成一个功能，不受外部环境的影响完整性——完成一个特定功能集合性——一组语句的集合依赖性——可以依赖已经存在的模块被依赖——可以被其他模块依赖其实我们想要的就是一个独立的模块，并能引用依赖，及被依赖。C语言的库和头文件（include），java的包（import）。这在其他语言中都是原生支持的特性，在js中却是没有的。原始写法如果仅从定义入手，那么一个函数即可成为一个模块（独立，集合，完成 ...继续阅读 (45)

如今JavaScript模块化编程的概念已经普及开来，一提起模块化，大家想到的可能是AMD，CMD，requirejs或seajs。其实还有很多其他的概念。本文将会陈述下JavaScript模块的前世今生。众所周知，JavaScript由于历史的原因并没有模块的概念，自从ajax带来了web2.0概念后，js代码已经和以前大不相同了，2009年HTML5兴起后，前端代码的行数已经呈现井喷式发展，随着代码量的增加，模块的缺失的缺点日益凸显，Javascript社区做了很多探索。##模块的定义 模块并非js语言独创，显然是借鉴其他语言的，下面是百度百科对模块的定义：模块,又称构件,是能够单独命名并独立地完成一定功能的程序语句的集合（即程序代码和数据结构的集合体）从中提炼出几个关键字就是，独立，集合，完成一定功能。上面的提炼，再从其他语言的实现中借鉴下，总结起来，我们期待的模块有如下特性：独立性——能够独立完成一个功能，不受外部环境的影响完整性——完成一个特定功能集合性——一组语句的集合依赖性——可以依赖已经存在的模块被依赖——可以被其他模块依赖其实我们想要的就是一个独立的模块，并能引用依赖，及被依赖。C语言的库和头文件（include），java的包（import）。这在其他语言中都是原生支持的特性，在js中却是没有的。##原始写法 如果仅从定义入手，那么一个函数即可成为一个模块（独立 ...继续阅读 (17)

时间从不停留，在我写下文字的间隙又溜走一些，回首2014可以用几个关键字来总结，意外，纠结，欢乐，痛苦。下面从工作和个人两方面回忆下一年来的点滴。工作14年最大的两件事就是离开金山和入职百度了，艾玛，换工作换的太快了。怀旧金山2013年最后一天，我来到了金山，从此称呼自己为金山人，这是我的第一家比较大型的互联网公司，入职时是紧张的，激动的，看到指纹打卡，瞬间觉得好高大上的感觉。接下来的工作亦是兢兢业业，顺利通过了试用期，便有一些懈怠，在这里终于有了正规的开发流程，美工，后端，编辑和我，环环相扣。在金山的第一个任务就是麻辣江湖的新春专题，也许是太紧张，也许是基础不够扎实，第一个任务就卡壳了，不会做啊，最后在@旭姐的帮助下顺利完成了第一个任务，在次深深的感谢旭姐在金山的日子里，对我的照顾。接下来陆续做了一些游戏的专题活动，主要包括反恐行动，麻辣江湖和狐狸三国。反恐行动-金牌联赛反恐行动-推广系统麻辣江湖-着陆页注：刚刚发现狐狸三国已经停服了，看着自己做的东西死了，最悲哀的事情莫过于此。生活就这样继续了，做专题做到想吐，后来在移动化的浪潮下做了反恐行动和狐狸三国的移动端官网，第一次做手机端的东西。后来在@伟哥自媒体的主张下，开始尝试做些自己的东西，做了几款小游戏。上古宝典正义联盟再后来我就离开金山了，命运总是充满了反讥，入职6个月后，7.25号我离开了金山。最后写下些感谢的祝福，也是希望 ...继续阅读 (25)

时间从不停留，在我写下文字的间隙又溜走一些，回首2014可以用几个关键字来总结，意外，纠结，欢乐，痛苦。下面从工作和个人两方面回忆下一年来的点滴。##工作14年最大的两件事就是离开金山和入职百度了，艾玛，换工作换的太快了。###怀旧金山2013年最后一天，我来到了金山，从此称呼自己为金山人，这是我的第一家比较大型的互联网公司，入职时是紧张的，激动的，看到指纹打卡，瞬间觉得好高大上的感觉。接下来的工作亦是兢兢业业，顺利通过了试用期，便有一些懈怠，在这里终于有了正规的开发流程，美工，后端，编辑和我，环环相扣。在金山的第一个任务就是麻辣江湖的新春专题，也许是太紧张，也许是基础不够扎实，第一个任务就卡壳了，不会做啊，最后在@旭姐的帮助下顺利完成了第一个任务，在次深深的感谢旭姐在金山的日子里，对我的照顾。接下来陆续做了一些游戏的专题活动，主要包括反恐行动，麻辣江湖和狐狸三国。反恐行动-金牌联赛反恐行动-推广系统麻辣江湖-着陆页注：刚刚发现狐狸三国已经停服了，看着自己做的东西死了，最悲哀的事情莫过于此。生活就这样继续了，做专题做到想吐，后来在移动化的浪潮下做了反恐行动和狐狸三国的移动端官网，第一次做手机端的东西。后来在@伟哥自媒体的主张下，开始尝试做些自己的东西，做了几款小游戏。上古宝典正义联盟再后来我就离开金山了，命运总是充满了反讥，入职6个月后，7.25号我离开了金山。最后写下些感谢的祝福 ...继续阅读 (18)