content.json

{"meta":{"title":"Beanlee","subtitle":"Blog","description":"Mac Javascript","author":"Bean Lee","url":"http://beanlee.com"},"pages":[{"title":"About","date":"2016-06-30T10:15:41.000Z","updated":"2016-07-01T03:07:50.000Z","comments":false,"path":"about/index.html","permalink":"http://beanlee.com/about/index.html","excerpt":"","keywords":null,"text":"关于我目前博主就职于 JDC（京东用户体验与设计中心）任前端工程师，担任过 Java 服务端工程师 About MeAbout Me Page WeiboWeibo InstgramBeanlee Links 山药蛋 三木的知乎专栏","raw":null,"content":null},{"title":"all-archives","date":"2016-05-30T06:39:13.000Z","updated":"2016-05-30T06:39:13.000Z","comments":false,"path":"all-archives/index.html","permalink":"http://beanlee.com/all-archives/index.html","excerpt":"","keywords":null,"text":"","raw":null,"content":null},{"title":"all-tags","date":"2016-05-30T06:38:48.000Z","updated":"2016-05-30T06:38:48.000Z","comments":false,"path":"all-tags/index.html","permalink":"http://beanlee.com/all-tags/index.html","excerpt":"","keywords":null,"text":"","raw":null,"content":null},{"title":"Bean Lab","date":"2016-05-30T09:35:33.000Z","updated":"2016-05-30T09:35:33.000Z","comments":false,"path":"beanlab/index.html","permalink":"http://beanlee.com/beanlab/index.html","excerpt":"","keywords":null,"text":"UPDATE 2016-05-30Bean 已经成功在2015年9月转岗JDC（京东用户设计与体验中心）专职做前端客户端的工作！希望这个实验室后面会有更多的体验demo出来。 2015-05-30 17:34:04 Gift for my girlfriend2015年情人节送给女朋友的礼物，同时也感谢FlowerProject的作者 Heart 2015-06-10 00:25:04 Bean 对前端和移动客户端很感兴趣，目前虽然还是的服务端的Java工程师，2014年7月也挤破头皮从传统软件业公司转到了互联网公司，暂时还在努力适应新环境，加班不见得减少但比以前更加坚定要抽时间做自己喜欢感兴趣的事，而这里就将成为 Bean 的实验室，在这里我会分享自己的阶段成果demo，也希望能够跟更多人分享和学习，让我们共同努力，为曾经吹过的牛逼奋斗！ 2014-08-17 17:57:57","raw":null,"content":null},{"title":"Links","date":"2015-06-12T18:41:14.000Z","updated":"2016-06-24T09:31:48.000Z","comments":true,"path":"links/index.html","permalink":"http://beanlee.com/links/index.html","excerpt":"","keywords":null,"text":"山药蛋 三木的知乎专栏","raw":null,"content":null},{"title":"all-categories","date":"2016-05-30T06:38:09.000Z","updated":"2016-05-30T06:38:09.000Z","comments":false,"path":"all-categories/index.html","permalink":"http://beanlee.com/all-categories/index.html","excerpt":"","keywords":null,"text":"","raw":null,"content":null}],"posts":[{"title":"【译】NPM vs Bower vs Browserify vs Gulp vs Grunt vs Webpack","slug":"NPM-vs-Bower-vs-Browserify-vs-Gulp-vs-Grunt-vs-Webpack","date":"2016-06-17T06:35:33.000Z","updated":"2016-06-20T09:10:02.000Z","comments":true,"path":"2016/06/17/NPM-vs-Bower-vs-Browserify-vs-Gulp-vs-Grunt-vs-Webpack/","link":"","permalink":"http://beanlee.com/2016/06/17/NPM-vs-Bower-vs-Browserify-vs-Gulp-vs-Grunt-vs-Webpack/","excerpt":"这是一篇在 Stack overflow 看到的一篇问题和回答，对于自己有一些解惑","keywords":null,"text":"这是一篇在 Stack overflow 看到的一篇问题和回答，对于自己有一些解惑 Source Link 作者问题 描述：我正在试着总结关于最流行的 Javascript 包管理器，打包器和任务执行器的知识。如果有错误请纠正我。 npm & bower 是包管理工具。他们只是将依赖文件下载，并不知道在下载这些文件的基础上如何编译项目。他们知道的是在获取所有依赖之后去调用 webpack/gulp/grunt 。 bower 很像 npm ，但是编译依赖树不在行（不像 npm 那样递归着进行）。意味着 npm 获取每一依赖（可能获取几次相同的文件），然而 bower 期望你手动去包含子依赖。有时候 bower 和 npm 可以一起被使用，分别作用前端和后端（在前端每一mb都很重要）。 glup 和 gulp 是任务运行器，目的是将能够被自动化的所有事任务自动化执行。（比如编译css/sass，处理图片，打包还有最小化混淆代码）。 grunt vs gulp （就像maven vs gradle 或是 配置 vs 编码）。Grunt 是基于分离独立的任务配置的，每一个任务开始／处理／关闭文件。Gulp 需要少量代码，并且基于 node streams，那允许它编译链（w/o重复打开相同文件）而且执行很快。 webpack (webpack-dev-server) 对于我来说，它是任务执行器随着变化热加载，那些允许你忘记关于所有js/css的监视器。 npm/bower+plugin 可以替代任务运行器。他们的能力经常交叉因此如果你需要使用 gulp/grunt 在 npm+plugin 之上时存在着不同的潜在影响。但是任务运行器处理复杂任务定义的更好（比如 “在每一个编译打包，从ES6转义成ES5，在所有浏览器仿真器上运行，制作镜像还有通过ftp部署到dropbox”）。 browserify 允许为浏览器打包node模块。browserify vs node's require 就像 AMD vs CommonJS Questions 什么是 webpack 和 webpack-dev-server ？官方文档说它是模块打包器，但对于我而言，它知识任务运行工具。有什么不同？ 你在哪里用到 browserify ？我们能不能和 node／ES6 一样做？ 你什么时候在 npm + plugins 基础上使用 gulp/grunt ？ Beat AnswerWebpack 和 Browerify 做了很多相同的工作，比如用于在一个浏览器环境钟打包你的模块。这个模块就是一个 Node 特征，它不在浏览器中存在，并且 ES6 中的 import 还没有在任何浏览器中实现，这就是为什么需要被打包。但是，他们在很多方式上是有区别的，Webpack 默认提供很多工具（比如代码拆分），Browerify 只能在下载插件之后才能做这些，但是使用这两种都能实现相似的效果。它取决于个人习惯（我常使用 Webpack ）。Webpack 不是一个任务运行器，它只是你通过CLI或任务运行器直接运行文件的一个中间过程器。 Webpack-dev-server 提供类似于 Browser-sync - 它是一个你可以将你的 app 部署的服务，并且验证你的前端开发进程直接通过 dev-server 自动刷新浏览器或者在没有热部署的情况下传播变化（比如 React components）。 我为了项目的完整和简单的任务编写已经使用Gulp，但是我后来发现我既不需要Gulp也不需要Grunt。所有我需要的都可以使用npm组合脚本去运行第三方工具利用它们的 API 完成。在Gulp，Grunt和npm script之间选择取决于你的需要、JS 经验和你工作时的开发经验。 当然Gulp中的任务是易读的，甚至与JS不是很相似，它还是引用和学习另一个工具，并且我个人倾向于缩小我的依赖并且保持简单。另外一面，使用npm组合脚本和运行文件（配置和执行Webpack文件中函数）替代这些任务是更具有挑战性的。但是重要的是他们三个的结果是相同的。 举例说我建议你看一看 react starter project ，它可以向你很好的展示npm组合脚本，Webpack和browser-sync。即使你可以处理你的源文件，如果你愿意，你可以使用Gulp或者Grunt运行你的开发服务，我更喜欢第一个选项。","raw":null,"content":null,"categories":[{"name":"译文计划","slug":"译文计划","permalink":"http://beanlee.com/categories/译文计划/"}],"tags":[{"name":"Javascript","slug":"Javascript","permalink":"http://beanlee.com/tags/Javascript/"},{"name":"Front-End","slug":"Front-End","permalink":"http://beanlee.com/tags/Front-End/"},{"name":"翻译","slug":"翻译","permalink":"http://beanlee.com/tags/翻译/"}]},{"title":"Simple HTTP Server on OSX","slug":"Simple-HTTP-Server-on-OSX","date":"2016-05-31T06:18:32.000Z","updated":"2016-06-01T06:54:13.000Z","comments":true,"path":"2016/05/31/Simple-HTTP-Server-on-OSX/","link":"","permalink":"http://beanlee.com/2016/05/31/Simple-HTTP-Server-on-OSX/","excerpt":"","keywords":null,"text":"很多项目在开发前期或者仅有 HTML/CSS/JS 文件，本地想要预览效果而不希望本地启动 Apache 或者 Nginx 难免有些麻烦，Mac OSX 其实内置Python，通过下面两条命令就可以快速启动一个简单 HTTP 服务。 12$cd path/project/folder$python -m SimpleHTTPServer 8080 Tada, thus you have got a HTTP server which port is 8080. 1control + c // stop it","raw":null,"content":null,"categories":[],"tags":[{"name":"Mac","slug":"Mac","permalink":"http://beanlee.com/tags/Mac/"}]},{"title":"【译】I know how to program, but I don't know what to program","slug":"WANQU-Program-Beginning","date":"2016-05-19T14:10:01.000Z","updated":"2016-06-22T05:27:25.000Z","comments":true,"path":"2016/05/19/WANQU-Program-Beginning/","link":"","permalink":"http://beanlee.com/2016/05/19/WANQU-Program-Beginning/","excerpt":"湾区简评：这是很多初学编程的人，尤其是通过大学里的编程课学习写程序的人面临的问题。除了刷编程竞赛题、做课后编程题外，写程序能做什么？文章给的建议我赞同：先尝试去写自己也会用到的自动化的小工具。如果顺序反过来，已经知道要做什么了（比如做网站、做某个具体功能的app、做某个有实际用途的工具），再去学编程，会不会效果更好？","keywords":null,"text":"湾区简评：这是很多初学编程的人，尤其是通过大学里的编程课学习写程序的人面临的问题。除了刷编程竞赛题、做课后编程题外，写程序能做什么？文章给的建议我赞同：先尝试去写自己也会用到的自动化的小工具。如果顺序反过来，已经知道要做什么了（比如做网站、做某个具体功能的app、做某个有实际用途的工具），再去学编程，会不会效果更好？ 【译】我知道如何编程，但是我不知道拿来干什么原文链接 当我面对刚入门的开发者时总有一个重复的主题。他们已经把他们的时间投入到学习一门或者两门编程语言的基础上，并且他们轻松地完成一些编程练习，但是他们不知道怎么接受他们已经学习的东西。通常来说，就像“我知道如何编程，但是我不知道编写什么程序”。标志性的回答是“完成一些编程挑战”，“给开源项目贡献代码”或者是“做一款游戏”。 完成编程挑战有益于脑力练习，但是它们却在人们学习如何创建一个新程序上的帮助很少。给开源项目贡献代码是一个提高的方式。你可能会学习到一个真实项目是如何架构的，并且在编程语言方面提升你的技巧，但是不会学习到很多的关于一个项目整个生命环的内容。某些项目非常复杂，这可能会对新手来说是非常恐怖的事。编写一款游戏是另一个提高的方式。游戏是有趣的！我以前曾开始用 QBASIC 编写游戏。然而发生了同样的困境。“我想要做一个游戏，但是我不知道做什么游戏”。 教导音乐系学生跟编程一样，我已经意识到在音乐系学生中存在同样的模式。“我知道全部的和弦，并且我弹奏很熟练，但是我不知道怎么样写一首歌曲。”在音乐中，我们确实有一个很好的解答。在学习创作中有一个途径。音乐家通常不仅仅从一开始就写自己的音乐。有些音乐家永远不会向拼凑音乐和花掉一生时间演奏他人音乐的方向发展。在编程的世界，态度有一点不同。 在软件社区有一个规则是“不要重复发明轮子”。当一个成熟稳定的选择存在时，如果你重写一个库通常是不被赞成的。虽然这对于一般人来说是一个好的规则，但新手不应该害怕重复发明轮子。当为了学习或者练习完成时，发明轮子是可以的！它是学习中一个重要的部分。比如，编写你自己版本的 ls，mv，wget 或者 cowsay 命令。如果你想要走游戏路线那可以克隆 Pong，Tetris 或者 Space Invaders 游戏。它们不需要全部相同的特点或者精确复制，但是你可以带着你的目标和空白的计划开始编程，你要把游戏实现出来。 pong blockrain.js & Hextris spaceinvaders & space-tweet 在你写程序之前不要有’必须有个最佳的 idea 才开始动手’这种念头。我见到过在音乐家中有相同的心态。在他们第一次尝试时就努力创造一个高水平，这花费他们全部的精力投入到一首乐曲中。长远的是你将会写出很多很多乐曲，不仅仅是这一首。你完成的第一支乐曲可能不好，你很可能抛弃它。这没什么。在你第一次尝试时，不要试着想要写出最好的章节。你需要学习谱曲的过程。在你写好程序之前你将会编写出糟糕的程序。迈过它，征服它，获取经验你就能开始在需求上自由创作发挥。 我们告诉人们用“Hello , world”做开端。因为这是他们行程的一个点，完成这个以为这征服了一个基础原理。你就理解了如何编译，如何运行，如何调用一个函数并且给它传递参数。编写一份已经存在软件的克隆版本是另外一个大的进步，跟 hello world 同等重要。当你完成它时，你已经克服了很多挑战。你已经发现哪里开始，如何计划，怎么组织，如何处理 bug ，给它一个人为的处理，并且打包最后它就成为一个可用的版本。即使你编写一个简单程序的克隆版本，你也能学习到全部过程。 你可能会好奇如何克隆已经存在的项目，它将帮助你产生一些新想法。比如像音乐，它需要创新。演奏他人的乐曲怎么做才能帮助你谱写自己的乐谱呢？你必须首先理解其他人。你必须去了解他们如何创作的，还有他们使用了什么模式。当你做完这些足够时间你就开始着眼以后，并且你已经有丰富的知识用来总结。你将从不同地方学习到的小部分音节组合在一起，并且重复一些你了解的模式。你可能改进，组合，或者完全打破你学习到的这些模式。就像他们所说的，你需要了解规则目的是用来突破他们。在编程过程中我们也有通用的模式比如 MVC 。这是一个稳定的被接受的编写软件的模式。在音乐中，我们也有通用的模式。比如 I-V-vi-IV。当然它不是唯一的一个，但它是已知很好的一个模式。 总而言之，这是经验和创新的一个组合。创新是一部分人们经常在编程过程中被忽略的但他非常重要。你曾留意过有多少程序员也同样是作曲家吗？乐曲包含很多技术上分析，架构，模式尽管很多人认为他是一个纯粹的创作行为。编程是经常被看成技术性的动作尽管它多数是创作性的行为。你可以在复制其他项目过程中培养创新性。伴随着你逐渐完成他们，你将会发现你有了自己新的想法去改进程序，抑或是一个新的带有些许个性的特点被添加进去。它将会为新项目启发思路。创新随时会出现，但是你需要先学习如何把它首先谱写成歌曲。 总有一天，你将会发现你将能够为所有事编程。你可以让任务自动化并且处理问题熟练。当你面对将会使你没有时间应对的诸多事情时，你处理起来也会没有问题的。你也将有能力随时解决问题。“哦，这有一个100个Sheet的表格需要被格式化，拆分成文件，转成一个 CSV 文件？马上就解决！”不要耽误时间去尝试做未来最好的事。编写一些你将会使用到的东西。其他项目的点子也会随之而来。 你们中有多少人已经处于你想象的“我不知道写什么程序？”这种的状态？你是怎么解决它的？如果处于这种状态你有什么建议？ 原文链接 湾区日报推荐 豆子简评：对自己有一些启发，现在转职专门做前端相关的工作时间不长，从 J2EE SQL … 到 HTML CSS Javascript NodeJS … 。虽然可以达到基本熟悉一门新的编程语言可以花费不长的时间这样一个状态，但是一直没有找到很好的办法在接触到一个新技术或框架时，短时间地拿着这些“新工具”去做事，其中原因很类似于“I Know how to program, but I don’t know what to program.”，先造一些自己能用得上的轮子吧，在自己的 Lab 页多更新。","raw":null,"content":null,"categories":[{"name":"译文计划","slug":"译文计划","permalink":"http://beanlee.com/categories/译文计划/"}],"tags":[{"name":"翻译","slug":"翻译","permalink":"http://beanlee.com/tags/翻译/"},{"name":"英语学习","slug":"英语学习","permalink":"http://beanlee.com/tags/英语学习/"}]},{"title":"Notes Of 360 Front-End Lesson","slug":"Notes-Of-360FE-Lesson","date":"2015-11-22T15:32:19.000Z","updated":"2016-06-20T03:43:11.000Z","comments":true,"path":"2015/11/22/Notes-Of-360FE-Lesson/","link":"","permalink":"http://beanlee.com/2015/11/22/Notes-Of-360FE-Lesson/","excerpt":"360前端训练营笔记","keywords":null,"text":"360前端训练营笔记 360前端训练营课堂笔记 － 奇舞团与Facebook畅聊大前端HTTP/2 深入浅出 屈光宇 Ququ老师 JerryQu 的小站 Before HTTP/2应用层协议，基于TCPHTTP 0.9 没有请求头，GETHTTP 1.0 增加请求／响应头，可以响应media，content-type，refere来源HTTP 1.1 支持持久连接，keep-alive，支持传输编码，content-length，请求范围range（断点续传），cache-control,expiresSPDY协议截止2015 统计：页面大小和连接数，同一个页面多域名TCP一个连接对应一个请求keep-alive、管道pipelining（合并请求）、域名散列（多域名增加并发连接数）、协议开销、合并请求（改写Ajax，雪碧图、cssjs合并、cssjs内联、图片和音频内联base64、阻塞渲染，样式内联（多用于移动端，感知缓存） input标签type＝text是默认值H2O，can I use、cleartext协商，HTTPS，mozilla免费证书，全球已经开通HTTPS网站占63% chrome在非HTTPS禁用关于设备使用的API，ALPNHTTP／2-enabled，net-internals/#http2、Wireshark优化，TLS，非对称加密，证书减少层级，ECC证书（很小，但是兼容性问题，vista才开始支持，移动端可以考虑）HSTS，强制HTTPS、TLS安全清单SSL HTTP/2 优化 优化：减少DNS查询，减少域名、启用预读，减少重定向，使用CDN，压缩（PNGout，pngcrush）、HTTP缓存不需要：域名散列，资源合并，资源内联 最佳实践 对HTTP/2优化的域名散列，多域名指向同一IP感知缓存资源内联或者通过 server－push，cookie 标记内联过资源 server-push基于node的node-http2 Google QUIC协议，基于UDP协议 Why React Matters? 為什麼 React 牛？ Facebook 黄士旗 Predictable/Immutable React Native For iOS & Android ImmutableJS ES6/ES7 Node Project, ThinkJS 如何使用ES6/ES7开发NodeJS项目 李成银 ThinkJS 作者 @360齐舞团 callback、promise，async functions babel javascript compile 更多特性，class，Arrows，enhanced object literals，template 性能问题，class，generators 自动更新，fs.watch（重启node服务），chokidar，nodemonitor；问题，无法保存临时数据 解决方案，热更新，依赖文件更新 require.cache，解决依赖和缓存，重写require方法 ThinkJS解决方案ThinkJS","raw":null,"content":null,"categories":[{"name":"Note","slug":"Note","permalink":"http://beanlee.com/categories/Note/"}],"tags":[{"name":"Javascript","slug":"Javascript","permalink":"http://beanlee.com/tags/Javascript/"},{"name":"Front-End","slug":"Front-End","permalink":"http://beanlee.com/tags/Front-End/"},{"name":"ReractJS","slug":"ReractJS","permalink":"http://beanlee.com/tags/ReractJS/"},{"name":"NodeJS","slug":"NodeJS","permalink":"http://beanlee.com/tags/NodeJS/"}]},{"title":"July And August","slug":"Jul-And-Aug","date":"2015-07-26T07:02:20.000Z","updated":"2016-05-30T08:41:37.000Z","comments":true,"path":"2015/07/26/Jul-And-Aug/","link":"","permalink":"http://beanlee.com/2015/07/26/Jul-And-Aug/","excerpt":"糟糕的七月，幸运的八月","keywords":null,"text":"糟糕的七月，幸运的八月 七下八上","raw":null,"content":null,"categories":[],"tags":[{"name":"life","slug":"life","permalink":"http://beanlee.com/tags/life/"}]},{"title":"Try My Best","slug":"Try-My-Best","date":"2015-07-19T08:47:21.000Z","updated":"2016-06-20T03:43:01.000Z","comments":true,"path":"2015/07/19/Try-My-Best/","link":"","permalink":"http://beanlee.com/2015/07/19/Try-My-Best/","excerpt":"Be who you are and say what you feel, because those who mind don’t matter and those who matter don’t mind. – Bernard Baruch","keywords":null,"text":"Be who you are and say what you feel, because those who mind don’t matter and those who matter don’t mind. – Bernard Baruch 机遇 Opportunity这里先要对我拒绝过公司道一声抱歉，也对原公司对我有知遇之恩的前 BOSS 说一声“感谢对我的认可，感谢能够再次给我机会，只可惜‘回归’现在不是我想做的事”。 很幸运的是，高中同学的前同事所在公司有一个岗位空缺，通过多方面的了解和考虑，这是一次非常好的机会。 周四我会参加复试，这家公司之前只在关注移动互联新闻中无意中扫过，由于一直没有在工作中投入到移动互联中，所以也从来没有认真关注过，有一些因缘的是，一起在北京奋斗的同学无意中提醒，如果想转职前端相关。 准备 Prepare整个7月，我都在为寻找新机会而准备（中间抽空和女朋友一起去了一趟厦门短期旅行），早在一年前来到 JD 之前就有朋友跟我说过，要想好为什么跳槽，对于自己而言，为什么要寻找新机会？ 是否是自己感兴趣想做的？或者说能不能在这份新工作找到乐趣？想清楚要做什么？ 在这份新工作有多大的上升空间？ 能否满足薪资收入预期？ 为了在这次面试，我特别针对这家工作做了很多准备工作，因为电话面之后，有一个 on-site 面试，需要提前在线限时完成三个算法题，于是翻出以前的书恶补了一些算法和数据结构相关的知识，虽然如此还是没有在答题当天表现出让自己满意的水平，还好把题目记下来自己私下里再做一次。 因为是外企，工作语言是英语，因此专门准备口语！Practice! Practice! Practice! 在 Glassdoor, Quora 等等网站查询关于这个公司的信息以及面试经验，在linkedin、V2EX、知乎、微博SNS上搜索他们员工和相关信息。 尽力 Try最近一周我已经在充分调整自己，包括公司目前工作进度控制，近期的作息调整，希望能够有一个非常好的状态来参加复试，临阵磨枪一直不是我中意做事的方式，虽然做了很多准备，但更多的还是需要平时的积累、经验以及临场发挥，希望能够有个好结果！如果面试通过，一定要仔细整理一份面经。 最好的休息，就是重新燃起生活的激情！ 其他 Others目前公司在做一件事，有一个经验分享：网站在支持 http 和 https 双协议，页面开发过程中有一处 tips 如果静态文件没有单独放在其他服务器上，这种问题可以直接使用相对路径解决。 12<img src=\"//url/abc/bcd\"><script src=\"//url/mnb/xxx.js\" type=\"text/javascript\" charset=\"utf-8\" async defer></script> 在链接中不必写 https:// 或 http:// Javascript 中也可以通过 document 来获取当前页面的协议document.location.protocol 如果一定要在页面写绝对路径包括协议头可以这样写1var hp = (\"https:\" == document.location.protocol ? \"https://\" : \"http:\"); 访问速度优化策略几个关键步骤：请求优化、压缩合并、无状态域名（减少cookie传输）、上传静态服务器如 CDN（推模式响应慢，主动拉模型更新响应快） 2015下半年读书单（暂定） 技术方向 Javascript 高级程序设计 你不知道的 Javascript（上卷） CSS 权威指南 Javascript 设计模式 非技术方向 从0到1 羊毛战记 天才在左，疯子在右 断舍离","raw":null,"content":null,"categories":[{"name":"blog","slug":"blog","permalink":"http://beanlee.com/categories/blog/"}],"tags":[{"name":"life","slug":"life","permalink":"http://beanlee.com/tags/life/"}]},{"title":"Questions Of Front-End","slug":"Question-Of-Front-End","date":"2015-06-27T00:32:19.000Z","updated":"2016-06-20T03:42:41.000Z","comments":true,"path":"2015/06/27/Question-Of-Front-End/","link":"","permalink":"http://beanlee.com/2015/06/27/Question-Of-Front-End/","excerpt":"前端问题总结整理，持续更新和学习，找到想做的就加油做个行动派吧！","keywords":null,"text":"前端问题总结整理，持续更新和学习，找到想做的就加油做个行动派吧！ 千万不要为了当前不好而跳槽，一定是要因为将来会更好而跳槽！ HTML 盒子模型margin - border - padding - content - padding - border - margin上下两个元素之间会有margin合并问题 块级元素和行内元素区别http://blog.csdn.net/chen_zw/article/details/8713205http://segmentfault.com/a/1190000000654770 CSS 实现一个叉号有几种实现方式1.切图 2.先用一个span画一个长方形，圆角，然后使用transform倾斜 3.CSS3中使用Webfont 4.伪类 1TODO 代码实现 CSS常用选择器ID、类、伪类、父子选择器等等 Javascript 原型链 prototypeMDN 实现的本质是重新原型对象。 原生ajax写法XMLHttpRequest, XMLHttpResponse 事件模型和事件传播机制问题浏览器中事件可以分为三种：鼠标事件；键盘事件；HTML事件；捕获和冒泡的顺序在不同浏览器中不同，IE下事件流采用的是冒泡，基于DOM标准兼容浏览器通常采用先捕获后冒泡方式。 addEventListener() & removeEventListener()所有 DOM 节点都包含这两个方法，都接受三个参数：要处理的事件名，作为事件处理程序的函数，一个布尔值。最后这个参数布尔值，true表示在捕获时调用事件处理函数，false表示在冒泡时调用时间处理函数。 1234var btn = document.getElementById(\"myBtn\");btn.addEventListener(\"click\", function(){ alert(\"click\");}, flase); 跨域 JSONP 实现原理原理：回调函数JSONP 由两部分组成：回调函数和数据。 For Example:123456function handleResponse(response) { alert(\"You're at IP \" + response.ip + \", which is in \" + response.city);}var script = document.createElement(\"script\");script.src = \"http://freegeoip.net/json/?callback=handleResponse\";document.body.insertBefore(script, document.body.fisrtChild); <script>中defer和asyc区别和加载顺序 asyc: 异步脚本虽然立即下载脚本，不应该方案页面中其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本有效。不能保证按照指定的先后顺序执行，建议异步脚本不要在加载期间修改 DOM。 defer: 延迟脚本可以延迟到文档完全被解析和显示之后再执行。只针对外部脚本有效。在现实当中，延迟脚本不一定按照顺序执行，不一定会在 DOMContentLoaded 事件触发前执行，因此最好只包含一个延迟脚本 闭包：指有权访问另一个函数作用域中的变量和函数。 作用域：当代码在一个环境执行时，会创建变量对象的一个作用域。理解：类似 Java 的成员变量 123456789101112131415var color = \"blue\";function changeColor() { var anotherColor = \"red\"; function swapColor() { var tempColor = anotherColor; anotherColor = color; color = tempColor; // 这里可以访问 color, anotherColor 和 tempColor } // 这里可以访问 color, anotherColor swapColor();}// 这里只能访问 colorchangeColor();","raw":null,"content":null,"categories":[{"name":"Note","slug":"Note","permalink":"http://beanlee.com/categories/Note/"}],"tags":[{"name":"Javascript","slug":"Javascript","permalink":"http://beanlee.com/tags/Javascript/"},{"name":"Front-End","slug":"Front-End","permalink":"http://beanlee.com/tags/Front-End/"},{"name":"HTML","slug":"HTML","permalink":"http://beanlee.com/tags/HTML/"},{"name":"CSS","slug":"CSS","permalink":"http://beanlee.com/tags/CSS/"}]},{"title":"OSC源创回年终盛典","slug":"OSC-Party","date":"2014-11-25T21:25:50.000Z","updated":"2016-06-20T03:42:45.000Z","comments":true,"path":"2014/11/26/OSC-Party/","link":"","permalink":"http://beanlee.com/2014/11/26/OSC-Party/","excerpt":"开源中国2014年终盛典大会参会笔记","keywords":null,"text":"开源中国2014年终盛典大会参会笔记 OSC源创会年终盛典开源中国的志向 - 马越Git，Sonar，Team……JFinal互联网之子-施瓦茨，一切皆开源，要参与其中；年轻人，OSCer“我们就是梦想！”；感谢阿里巴巴、华为贡献开源的力量 RDS 阿里云 数据通道挑战与实现 褚霸功能 高可用/屏蔽后端变化/安全、数据路由，冷热数据区分、数据操作，分库分表、支持多种数据后端，MySQL MSSQL 约束 普通PC服务器、高可用、规模/可横向拓展、可运维可控 可用性 LVS商业版 SLBv3流量层 —- Proxy负载均衡 —- Master 流量层：VIP漂移保证用户不要切换DNS，session同步解决单机down机影响 Proxy层：Erlang VM作为中间件、支持热升级，不用切分流量 DB层：主备结构、跨机房/跨机架、主备同步/异步复制减少延迟、数据安全 性能：RT、吞吐量、QPS、短链接性能 剖析开源技术趋势&华为开源现状 趋势：互联网化、平台级、推动硬件电信系统等发展、社区运营公司化、标准化 华为开源者能力中心，鼓励、支持 使用策略和原则：参考自行实现，架构解耦、社区同源减少维护成本 云计算专场开源分布式对象存储 OpenStack Swift - 李明宇microwiseOpenStack : A cloud operation systemIt’s a group system. 11 projects so huge, but the biggest user use 3.5 projects . Install in CentOS 7.OpenStack Swift: RESTfull Web API 直接从存储提供REST服务，解决访问无业务的文件的需求Architecture of Swift: 图见CSDN Proxy Server接收请求 – Controller 通过hash等算法保证请求均匀分布 – 存储层Story Policy: 可配置存储，比如保存位置，可靠性OpenStack & DockerReading: OpenStack 云计算实战手册，OpenStack 企业云Proxy Server 不存在单节点问题，proxy无状态 CoreOS 与容器管理","raw":null,"content":null,"categories":[{"name":"Note","slug":"Note","permalink":"http://beanlee.com/categories/Note/"}],"tags":[{"name":"note","slug":"note","permalink":"http://beanlee.com/tags/note/"}]},{"title":"科学上网之VPN推荐系列","slug":"How-To-Connect-Internet-With-VPN","date":"2014-06-27T16:00:01.000Z","updated":"2016-06-20T03:39:50.000Z","comments":true,"path":"2014/06/28/How-To-Connect-Internet-With-VPN/","link":"","permalink":"http://beanlee.com/2014/06/28/How-To-Connect-Internet-With-VPN/","excerpt":"“工欲善其事，必先利其器” 今天笔者来和大家一起分享，最近查阅资料整理后的一些关于VPN的那点事儿。","keywords":null,"text":"“工欲善其事，必先利其器” 今天笔者来和大家一起分享，最近查阅资料整理后的一些关于VPN的那点事儿。 刚刚加班到家，整理一下这篇最近在查阅资料关于VPN的一些内容，以及一些付费VPN的简单介绍。 什么是VPNVPN 可以通过特殊的加密通讯协议，在连接 Internet 上位于不同地方的两个或多个企业内部网之间建立一条专有的通讯线路；就好比是架设了一条专线，但它并不需要真正的去铺设光缆之类的物理线路；就像去电信局申请专线，但是不用给铺设线路的费用，也不用购买路由器等硬件设备。 VPN 技术原是路由器的重要技术之一，在交换机、防火墙设备或各大操作系统里也都支持 VPN 功能，VPN 的核心就是利用公共网络建立虚拟私有网。 通俗的说，如果你想不被别人探查到你的 IP 地址，如果你想访问大量原本无法登录的国外网站，如果你想更安全进行数据传输，请使用 VPN。 PPTP和L2TP区别最常见最流行的 VPN 协议包含 PPTP 协议和 L2TP/IPSec 协议。如果你希望设置简单，对通信安全没有太大的要求，那么你配置 PPTP 连接即可；如果你的网络里 PPTP 协议未被允许，或者希望数据通信更安全的话，就推荐设置 L2TP/IPSec 连接。在设置上，步骤基本一致，只是 L2TP/IPSec 协议需要输入共享密钥。 PPTP（Point to Point Tunneling Protocol）点对点隧道协议：是一种主要用于 VPN 的数据链路层网络协议，PPTP 的协议规范本身并未描述加密或身份验证的特性。 L2TP（Layer Two Tunneling Protocol) 第二层隧道协议：是一种数据链路层隧道协议，通常用于虚拟专用网。L2TP 协议自身不对传输的数据进行加密，但是可以和加密协议搭配使用，从而实现数据的加密传输。经常与 L2TP 协议搭配的加密协议是 IPsec，当这两个协议搭配使用时，通常合称 L2TP/IPsec。 优点 科学上网 配置方便，配置好以后，直接连接，就可以使用 安全，一把双刃剑，因为VPN连接，我们的数据包都是通过中间服务器转发，VPN提供了很多种加密的方式，这样就可以很好地保护我们的隐私，隐藏IP等。 缺点 受GFW干扰较大，由于使用UDP技术，连接可能受干扰 比较依赖本地的网络环境 ISP网络的可能会阻止VPN的连接，导致连不上或者速度慢 VPN是保持连接，不是特别灵活，要断要连在使用过程中难免有麻烦 安全，不能排除我们的数据包被中间服务器抓包或者截取的可能。 选择VPN前面一些“科普”的文字给大家码好字之后，下面笔者在选购VPN的时候主要关注一下几点，在这里和各位分享一下，可能与各位不同，欢迎读者朋友讨论吐槽！ 稳定性：这是我比较重视一点，所以放在第一个，VPN的连接速度以及连接的稳定性，直接影响到使用者的感受，之所以找付费版VPN，最重要的就是想享受稳定的连接，不希望遇到经常掉线重连，或者经常不得不被动地切换多个连接。 终端支持：我的需求是希望支持Mac、iPhone、iPad至少三台终端同时连接，这样在多端就可以无缝享受网络。 连接速度（上行/下行）：不知道读者朋友有没有跟笔者一样的感受，网络慢得时候电脑也会有慢得错觉。当然了，“慢”一定有很多原因，也可能是错觉，但是连接VPN后同样拥有普通连接相同或者不会降低很多的网络速度，是非常重要的一点，也同样是申请VPN退款的原因之一。 价格（按量付费/按时付费）以及支付方式：按时 or 按量，这个取决于使用者的需求，如果像笔者一样是新手或者换种说法是首次希望通过付费VPN的方式“科学上网”，偶尔登录Google查阅资料，而且不用刷Twitter，暂时没有部署在国外服务器上的网站需要维护的话，可以选择价位不高且流量不大的服务；支付方式也被我放在这里，国内的很多朋友可能没有双币信用卡，Paypal付款难免有些麻烦，查了好几个VPN的服务商都已经支持支付宝付款了，还是很方便的。 配置难易度、客服响应速度： 隐私安全：毕竟我们在通过VPN连接时，本地的数据包是发送到远方服务器再跳转的，这期间是否会被抓包，窃取资料就是一个值得考虑的问题，笔者建议不用在VPN连接时使用网银等，即使VPN已经声明了数据信息已经加密，要保持警惕，保护隐私。 服务器地点：这点可能目前阶段不是笔者比较在意的一点，无论VPN服务商提供的是美国、日本、加拿大、台湾等何地的服务器，对于笔者来说不是特别重要，只要可以达到稳定的连接就可以。但是对于一些对服务地有强烈需求的朋友来说，比如一些游戏玩家，PS4和XBOX必须要连接当地的服务才能玩，这时服务器所在的地点就成了比较重要的考虑因素之一了。 付费VPN收集很幸运在微博上认识一位朋友聆听潇湘雨，请教了一些知识，也很感谢他推荐了几个付费VPN给我，包括我自己查阅的资料在下面罗列一下，具体服务需要等各位用户先自己试用，稍后再提供我的使用报告： 熊猫翻滚 顾名思义，熊猫天朝特产，朋友推荐说智能分流做的很好，就是国内和国外的网站可以自动区分，这样连接VPN的同时国内网站的访问速度影响有效降低。 云梯 在V2EX社区看到有人推荐过，也注册了一下，同学有需求想下载Google Android文档和源码，于是就买了这家的服务，速度还是很快的，支持3天内退款。 曲径 官网介绍是为了国外音乐类流量服务，有一些大V也在各自的推文中有介绍，想必也积累了一些人气，服务应该做的还是不错的，要不然也不会这么多人推荐。可月付或者季付、限流量，其【冬月】套餐比较适合多终端的用户。 轻云 资费比较合理，支持的设备较多，同时允许7台设备在线。 YesVPN 包月10RMB，包年100RMB 鲨鱼VPN Google搜索 付费VPN 关键字 : ) VPN FOR FREE Chrome插件 - 红杏 浏览器上的插件，使用者仅仅通过安装Chrome浏览器插件，使用邮箱注册用户，就可以直接访问Google、Facebook和Twitter了。简单使用，缺点非VIP版服务器不是特别稳定，笔者在最近3天的使用过程中有一天下午基本无法使用，服务断断续续。当然也可以购买VIP版，笔者还没有购买体验就不便在这里细说，如果仅限浏览器翻墙，查看网页或者单线程下载一些小文件的话，这颗“红杏”是个不错的选择。 文章还没写完，今天红杏免费版就挂了，但是红杏VIP版还是很受欢迎的。 Google搜索 免费VPN 关键字即可 : ) 补充在完成这篇Blog的过程中，查阅的信息逐渐像水滴波纹一样散开，信息量过大，越来越害怕，觉得这里需要做功课的东西还是太多，有些不敢写了，因此标题也是改了又改，缩小范围。后面补补课再给各位带来其他科学上网的方式。 因为目前对科学上网需求不是那么强烈，因此在写完这篇Blog后，我觉得先买一个熊猫翻滚之学术熊猫试用一个月（这其中也有微博朋友极力推荐的因素）。 其他科学上网收集如下，以后有机会在研究跟大家分享： eurekavpt ShadowSocks PowerConnect && 官方 Twitter 会不定时放出邀请码 ….","raw":null,"content":null,"categories":[{"name":"blog","slug":"blog","permalink":"http://beanlee.com/categories/blog/"}],"tags":[{"name":"VPN","slug":"VPN","permalink":"http://beanlee.com/tags/VPN/"},{"name":"Share","slug":"Share","permalink":"http://beanlee.com/tags/Share/"}]},{"title":"Mac Tool","slug":"Mac-Tool-Series-1","date":"2014-06-18T16:00:01.000Z","updated":"2016-05-17T13:06:22.000Z","comments":true,"path":"2014/06/19/Mac-Tool-Series-1/","link":"","permalink":"http://beanlee.com/2014/06/19/Mac-Tool-Series-1/","excerpt":"推荐的两款软件，它们有助于我提高效率，因此来完成这篇推介文。Dash 一款用来集成快速查阅文档；CheatSheet 一款用来提示快捷键。","keywords":null,"text":"推荐的两款软件，它们有助于我提高效率，因此来完成这篇推介文。Dash 一款用来集成快速查阅文档；CheatSheet 一款用来提示快捷键。 Dash相信日常工作或者做个人开发的朋友，浏览器的收藏夹中一定有一个文件夹，里面收藏了n个技术类的在线文档以及各种代码片段，Dash就是这样一款专注于提供各类API文档和收藏代码片段的工具。 值得推荐 推荐点1-内容丰富具备丰富的Docsets，并且都是提供官方原版材料。 推荐点2-快速查询Dash提供快速的查询，这其中包括多文档的联合查询，以及在某一个Docset中查询，查询流畅度很好。 图片TODO 缺点售价昂贵，目前Dash Full Version要RMB128，在淘宝上购买是个不错的选择；如果可以忍受偶尔查询等待8s时间出结果，可以使用免费版；一些SDK和API受限于系统，只提供链接，如Objective-C等，值得高兴的是Swift可以直接查询很下载查阅。 CheatSheet这是一款可以显示当前应用所有快捷键列表的软件，使用者只需要按住Command就能见识到他的强大之处。在笔者还没有Mac的时候，关注小众软件的时候看到他的推荐，于是就在CheatSheet官网下载收藏了这款可以提高效率的软件。PS.顾名思义快捷键是可以帮助使用者提高效率，善用、习惯快捷键，以及调整自己数字的快捷键可以更有效的提高自己的效率，这无疑也是帮助我们自己提高的方式之一。","raw":null,"content":null,"categories":[{"name":"blog","slug":"blog","permalink":"http://beanlee.com/categories/blog/"}],"tags":[{"name":"Mac","slug":"Mac","permalink":"http://beanlee.com/tags/Mac/"},{"name":"Tool","slug":"Tool","permalink":"http://beanlee.com/tags/Tool/"}]},{"title":"Swift Study 1","slug":"Study-Swift-1","date":"2014-06-07T16:00:01.000Z","updated":"2016-05-17T13:06:18.000Z","comments":true,"path":"2014/06/08/Study-Swift-1/","link":"","permalink":"http://beanlee.com/2014/06/08/Study-Swift-1/","excerpt":"Swift is an important chance to find coding passion back to me. So Do Not Lose It! Come on!","keywords":null,"text":"Swift is an important chance to find coding passion back to me. So Do Not Lose It! Come on! Swift 学习笔记 一从2014-06-09开始每日更新，督促自己学习坚持，一周为一篇周期，加油！ 材料收集官方iBook版 IDE Xcode 6 Beta Hello World1println(\"Hello World!\") 2014-06-09记录学习常量(let)、变量(var)定义的方法，字符串参数传递()，Swift类型推导 var numValue = 123, strValue = “abc”，数组和字典定义方式等等。 函数的定义func，如:123func hello(name: String, day: String) -> String { return \"Hello \\(name), Today is \\(day) !\"} 可变参数的函数定义，如：123456789func sumOf(numbers: Int...) -> Int { var sum = 0 for number in numbers { sum += number } return sum}sumOf()sumOf(42, 597, 12)” 正在看极客学院的 Weather App 的教学视频，看来需要恶补的一些交互还有很多，加油！ 2014-06-10记录看完做Weather App的Demo视频，熟悉一个可以解析JSON的工具API NSJSONSerialization 重新回头继续看文档，最近加班和参加Interview，阅读的时间少了，要坚持看！ GitBook 中文版Swift文档 控制流使用if和switch来进行条件操作，使用for-in、for、while和do-while来进行循环。包裹条件和循环变量括号可以省略，但是语句体的大括号是必须的。 在类型后面加一个问号来标记这个变量的值是可选的。12345678var optionalString: String? = \"Hello\"optionalString == nilvar optionalName: String? = \"John Appleseed\"var greeting = \"Hello!\"if let name = optionalName { greeting = \"Hello, \\(name)\"} if的条件如果是 nil 就是false。 switch case中一定要有default否则编译会报错，因为进入这个条件操作可能会没有出口。 循环中使用 .. 创建的范围不包含上界，如果想包含的话需要使用 … ，如（0…10 表达从0开始到10，且包括10；0..10 则表单从0开始到10但不包括10） 函数与闭包前面在视频里面看到了函数的定义方法，这里通过文档再整理一下。 使用func来声明一个函数，使用名字和参数来调用函数。使用->来指定函数返回值。1234func greet(name: String, day: String) -> String { return \"Hello \\(name), today is \\(day).\"}greet(\"Bob\", \"Tuesday\") 2014-06-11枚举、闭包实践。 今天公司足球赛，太累就暂时依照视频教程做了个读取天气的demo，明天继续！ 2014-06-15遇上公司加班延误了三天，世界杯开幕熬夜看比赛又导致晚上需要稍微早一点睡，最近学习计划有些延后，今天反省一下！Swift学习今天暂缓停一下，整理了一下个人Resume，同时在这期间了解Mac一个很有用的软件Dash（汇集SDK文档和Sheets快速查询查看工具），推荐给在Mac环境下做开发的各位朋友！ to be continue…","raw":null,"content":null,"categories":[{"name":"blog","slug":"blog","permalink":"http://beanlee.com/categories/blog/"}],"tags":[{"name":"Apple","slug":"Apple","permalink":"http://beanlee.com/tags/Apple/"},{"name":"Swift","slug":"Swift","permalink":"http://beanlee.com/tags/Swift/"}]},{"title":"Java基础集合类复习","slug":"Java-Collection-Review","date":"2014-06-05T16:00:01.000Z","updated":"2016-06-20T03:39:27.000Z","comments":true,"path":"2014/06/06/Java-Collection-Review/","link":"","permalink":"http://beanlee.com/2014/06/06/Java-Collection-Review/","excerpt":"Java基础集合类的问题简单整理","keywords":null,"text":"Java基础集合类的问题简单整理 JAVA基础集合类Review##JAVA集合类分类 Collection：通常是一组有一定规律的独立元素。List必须按照特定的顺序持有这些元素，而Set则不能保存重复的元素。 Map：一组以“键－－值”（key-value）形式出现的pairs。 Collection InterfaceCollection是最基本的集合接口，它下面的实现类包括List(LinkedList, ArrayList,Vector)、Set等。 List接口是有序的Collection，每一个元素都能够被用户使用索引来访问，类似Java中的数组。与Set不同，List允许存在相同的元素。 LinkedList:它是有序的允许元素为null，并且提供额外的get，remove，insert方法来操作LinkedList的首或尾部，类似链表的结构，可以用来实现堆栈（Stack）、队列（Queue）或者双向队列（Deque），它是不同步的。 ArrayList:它的内部实现机制实际上使用的是Object数组，且一个大小可变，但是每一个ArrayList在初始化时都有一个容量，外部看这个容量是可以根据元素的添加自动增加。当容量不够时，系统就会创建一个更大的数组（1.5倍左右）并且把老的数组完全拷贝到新的数组中，同时老数组就自动进入GC待处理状态，等待垃圾回收。 相比LinkedList，ArrayList中的get(index)的方法速度较快，效率高。 Vector:线程同步的ArrayList，当一个线程开始迭代Vector时，另一个线程来添加、删除等改变Vector时，就会抛出ConcurrentModificationException。 Stack:继承自Vector，从名字可以看出堆栈，它实现了一个后进先出的堆栈。 Set接口是一种不允许重复的Collection，即任意的两个元素e1和e2都有e1.equals(e2)=false，Set最多有一个null元素。这其中equals方法就是依靠元素的hashCode来判断是否相等，有时可以通过重写一些对象的HashCode方法来改变判断相等的判断逻辑。 Map Interface HashTable HashTable集成Map接口，实现了一个key-value映射的哈希表。任何非空（non-null）的对象都可以作为key或value。HashTable是线程同步的。 不了解的知识点：Hashtable通过initial capacity和load factor两个参数调整性能。通常缺省的load factor 0.75较好地实现了时间和空间的均衡。增大load factor可以节省空间但相应的查找时间将增大，这会影响像get和put这样的操作。 hashCode和equals方法是否重写相关： HashMap HashMap和Hashtable类似，不同之处在于HashMap是非同步的，并且允许null，即null value和null key。，但是将HashMap视为Collection时（values()方法可返回Collection），其迭代子操作时间开销和HashMap 的容量成比例。因此，如果迭代操作的性能相当重要的话，不要将HashMap的初始化容量设得过高，或者load factor过低。 WeakHashMap WeakHashMap是一种改进的HashMap，它对key实行“弱引用”，如果一个key不再被外部所引用，那么该key可以被GC回收。实际开发中还没有用过，可以尝试用一下。 总结 List集合是有序集合，集合中的元素可以重复，访问集合中的元素可以根据元素的索引来访问。 Set集合是无序集合，集合中的元素不可以重复，访问集合中的元素只能根据元素本身来访问（也是不能集合里元素不允许重复的原因）。 Map集合中保存Key-value对形式的元素，访问时只能根据每项元素的key来访问其value。 如果涉及到堆栈，队列等操作，应该考虑用List，对于需要快速插入，删除元素，应该使用LinkedList，如果需要快速随机访问元素，应该使用ArrayList。 如果程序在单线程环境中，或者访问仅仅在一个线程中进行，考虑非同步的类，其效率较高，如果多个线程可能同时操作一个类，应该使用同步的类。要特别注意对哈希表的操作，作为key的对象要正确复写equals和hashCode方法。 尽量返回接口而非实际的类型，如返回List而非ArrayList，这样如果以后需要将ArrayList换成LinkedList时，客户端代码不用改变。这就是针对抽象编程。 参考柳志超Blog中一篇文章《Java集合类》","raw":null,"content":null,"categories":[{"name":"blog","slug":"blog","permalink":"http://beanlee.com/categories/blog/"}],"tags":[{"name":"总结","slug":"总结","permalink":"http://beanlee.com/tags/总结/"},{"name":"Java","slug":"Java","permalink":"http://beanlee.com/tags/Java/"}]},{"title":"有设计感的数码产品才能打动人心","slug":"Misfit-Shine","date":"2014-04-11T16:00:01.000Z","updated":"2016-06-20T06:45:40.000Z","comments":true,"path":"2014/04/12/Misfit-Shine/","link":"","permalink":"http://beanlee.com/2014/04/12/Misfit-Shine/","excerpt":"夏日来袭，笔者对比了几款运动手环，最终入手Misfit Shine带来开箱图文和简单对比分享","keywords":null,"text":"夏日来袭，笔者对比了几款运动手环，最终入手Misfit Shine带来开箱图文和简单对比分享 运动快乐笔者很喜爱有氧运动，偏爱足球和跑步，小时候就经常抱着足球跟着一帮小伙伴去虽然满是尘土的足球场。（PS.这里吐槽一下，很多人吐槽国足，国内的足球氛围不浓，连基础设备完善的足球场都很少，尤其是在二三线城市） 先来和各位分享一下当时购买这款运动手环的初衷，应该说早在2012年的Google Glass在全球兴起了穿戴式数码设备的热潮，诸多厂商都在各自的领域跟进，这其中运动检测类的运动手环，种类颇为丰富。笔者一直是个夜跑爱好者，期初对此并没有太大需求也就没有关注。直到时隔2年后，无意间在网络中看到百度旗下公司也有一款运动手环，即将发布的新闻才再次被勾起兴趣，通过网络搜索一些资料查阅了解，越发感觉穿戴式数码产品对生活的重要性越来越大，因此决定购入，以此激励自己加强运动，运动最快乐！ 简单介绍根据Shine的名字自行Google :) 三款手环简单对比笔者的数码硬件消费级别，尚处于“屌丝”级别，包括每次买很多数码电子产品都要经过一段时间研究和对比，纠结过才会购买，这款也同样不例外。这里只简单说明一下三种智能手环的差异。 Jawbone UP Fitbit Flex Misfit Shine Some Pics Shine优缺点优点 科技感、设计感十足，硬币大小戴在手上非常酷，通过几天的使用测试，运动记忆比较精准，包括睡眠模式中记录深度睡眠的时长，相对比较准确。 在2013年获得红点设计奖，小小的运动检测器，戴的时间长了存在感非常小，不会影响正常生活，在收集资料的过程中，笔者看到很多网上的朋友甚至丢了好几天，想起来同步运动信息的时候才发现找不到的情况。（这也可能变相的算是一种缺点吧:P） Shine没有具象的显示器或者曲面屏幕，而且采用防水设计材质非常好的金属，用激光蚀刻的小孔伴随着小小的LED，轻拍两下，显示目前完成了当天既定目标的百分比，和很酷的点数时间，初看有些摸不到头脑但笔者使用几天下来基本习惯快速时间时间；轻拍三下，就可以自动切换运动模式，比如跑步、游泳、足球等。 缺点 缺少其他手环中比较方便实用的智能唤醒闹钟，通过在手腕上的轻微震动达到闹钟作用的功能，相信不少上班族的朋友每天清晨都偶尔会被刺耳的闹铃叫醒，非常不爽！PS.如果想永远不再想听一首歌，那就把它设置成闹钟吧！ 与手机App同步没有实现真正的自动同步，由于新鲜感，笔者会每天多次拿起手机点开Shine的App点击同步，相信以后频率会下降，目前每天早上打开App看自己前一天晚上深度睡眠时间倒是一件非常有意思的事。 App的SNS特性，相比国内相似运动类App略差，但换个思路，也许Shine团队是为了人们更加关注运动，他们比较和互动不应该喧宾夺主也说不定。 The EndMisfit Shine对于笔者来说是个很好的选择，我可以接受它的全部优缺点，并且在使用过程中会把自己的意见和体验结果通过邮件的方式反馈给Misfit的团队。（天晓得我的邮件中的英文他们能不能看懂或者根本被忽视掉也说不定） 原本想在这篇写完之前可以戴着Shine踢球，看看记录是什么样的，碰巧本周没有机会","raw":null,"content":null,"categories":[{"name":"blog","slug":"blog","permalink":"http://beanlee.com/categories/blog/"}],"tags":[{"name":"数码","slug":"数码","permalink":"http://beanlee.com/tags/数码/"},{"name":"digital","slug":"digital","permalink":"http://beanlee.com/tags/digital/"}]},{"title":"书摘随笔","slug":"Read-The-Book-Of-Zhihu","date":"2014-03-19T16:00:01.000Z","updated":"2016-06-20T03:41:47.000Z","comments":true,"path":"2014/03/20/Read-The-Book-Of-Zhihu/","link":"","permalink":"http://beanlee.com/2014/03/20/Read-The-Book-Of-Zhihu/","excerpt":"读《创业时，我们在知乎聊什么》书摘随笔一 最小化可行产品 汪华说，你一开始的所有计划其实只是对用户和市场的假定而已，小团队的钱和资源也都有限，必须先快速地找个办法验证方向。 所以产品的第一个版本的目的，是验证用户需求和反馈，而不是做一个完美无缺、功能丰富的版本。第一版应该集中于开发出产品的核心功能和核心需求，也就是那个用户。","keywords":null,"text":"读《创业时，我们在知乎聊什么》书摘随笔一 最小化可行产品 汪华说，你一开始的所有计划其实只是对用户和市场的假定而已，小团队的钱和资源也都有限，必须先快速地找个办法验证方向。 所以产品的第一个版本的目的，是验证用户需求和反馈，而不是做一个完美无缺、功能丰富的版本。第一版应该集中于开发出产品的核心功能和核心需求，也就是那个用户。 建议： 1、尽量地使用现成的代码框架、末班、开源项目、API，使用现成的工具，哪怕不是100%符合需要，有了用户量之后再重构。 2、第一版可以简单解决，部分可用静态页面或者人工干预。 3、在完成功能的过程中考虑后续版本的可升级性，但不要过分专注，否则会影响进度。 4、找到所有相似、相关、上下游产品重新学习。 5、如果是互联网产品想清楚需要验证什么用户行为和数据，并在产品中跟踪收集，不要盲目收集。 6、界面简洁，保证核心功能在主要位置，且一键访问无歧义最好。 7、专注80%精力在核心功能上，核心要完美，其余部分可以后完善，否则顾此失彼。 8、快速、稳定，很多东西不是一定必须，能砍则砍。 9、重视用户反馈，建立社区或者有效沟通平台。 10、外围也不可忽视，类似门户网站等尽量有新意。 11、如果专职严格进度，日毕日清，不为严重问题拖延。","raw":null,"content":null,"categories":[{"name":"blog","slug":"blog","permalink":"http://beanlee.com/categories/blog/"}],"tags":[{"name":"reading","slug":"reading","permalink":"http://beanlee.com/tags/reading/"}]},{"title":"微博等SNS@功能探索技术验证总结","slug":"The-Summary-of-At","date":"2014-01-09T16:00:01.000Z","updated":"2016-05-30T08:40:04.000Z","comments":true,"path":"2014/01/10/The-Summary-of-At/","link":"","permalink":"http://beanlee.com/2014/01/10/The-Summary-of-At/","excerpt":"公司阶段技术预言项，推特微博等@人员功能，断断续续3-4天时间，做了一些总结在Blog中和大家分享","keywords":null,"text":"公司阶段技术预言项，推特微博等@人员功能，断断续续3-4天时间，做了一些总结在Blog中和大家分享 功能对比","raw":null,"content":null,"categories":[{"name":"blog","slug":"blog","permalink":"http://beanlee.com/categories/blog/"}],"tags":[{"name":"分享","slug":"分享","permalink":"http://beanlee.com/tags/分享/"},{"name":"总结","slug":"总结","permalink":"http://beanlee.com/tags/总结/"}]},{"title":"程序员都是理想主义者","slug":"Eassy-Programmer","date":"2013-12-04T16:00:01.000Z","updated":"2014-08-16T02:37:48.000Z","comments":true,"path":"2013/12/05/Eassy-Programmer/","link":"","permalink":"http://beanlee.com/2013/12/05/Eassy-Programmer/","excerpt":"","keywords":null,"text":"今天看到微博上转发的一篇长博文中写到一段话很有感触。 “每个夜晚来临的时候，孤独总在我左右，在我苍白的笑容背后，有多少落寞和哀愁面对日益发达的，极具诱惑力的夜生活，少有人能置之开外。但就有那么一群人，即使黑幕高垂还栖守在工作之位，面对夜晚的繁荣和喧嚣视若无睹”。是的，他们就是程序员，一群成天编写代码的程序员，难怪有人感叹程序员是被流行和时髦给遗忘的部落“ “或许，每一个属于程序员的夜晚，都是沉静的夜。但是每一个程序员都是理想主义者，内心的沉静是一股强大的力量，支持着我们坚定第一点一点地去改变这个世界” 你我共勉！","raw":null,"content":null,"categories":[{"name":"blog","slug":"blog","permalink":"http://beanlee.com/categories/blog/"}],"tags":[{"name":"生活","slug":"生活","permalink":"http://beanlee.com/tags/生活/"},{"name":"文字","slug":"文字","permalink":"http://beanlee.com/tags/文字/"}]},{"title":"英雄再见","slug":"Finished-the-book","date":"2013-12-03T16:00:01.000Z","updated":"2016-06-20T03:41:32.000Z","comments":true,"path":"2013/12/04/Finished-the-book/","link":"","permalink":"http://beanlee.com/2013/12/04/Finished-the-book/","excerpt":"《獵命師傳奇》最终章完结断断续续地在地铁上读完了这本九把刀的长篇《獵命師傳奇》，说来初识九把刀还是在看过《那些年，我们一起追的女孩儿》这部电影来的，当时只是觉得这些年台湾电影成长的很快，这位有趣自大的导演第一部电影长篇就拍的如此热血，导演本人也一定非常有趣，带着疑问和好奇，我开始在网上查阅九把刀。","keywords":null,"text":"《獵命師傳奇》最终章完结断断续续地在地铁上读完了这本九把刀的长篇《獵命師傳奇》，说来初识九把刀还是在看过《那些年，我们一起追的女孩儿》这部电影来的，当时只是觉得这些年台湾电影成长的很快，这位有趣自大的导演第一部电影长篇就拍的如此热血，导演本人也一定非常有趣，带着疑问和好奇，我开始在网上查阅九把刀。 这是一个有趣的作家，在大陆很多人还在看盗版书或是用手机下载看免费网络小说的时候，这个人联合出版社出资定制了一个iOS上的应用“真·九把刀全集”来免费为读者提供他的书籍和小说。我还记得app一打开，一段5s的视频，九把刀说着：“打魔兽要钱，玩电动要钱，泡妹妹要钱，看真正的九把刀小说，不要钱！”且不说迎合了很多大陆同胞“偏爱”免费的“习惯”，说实在的，我也是这样，当意识到这个App免费就立马下载，但作为软件开发者，深知开发同胞的辛苦，小开发制作的软件还是尽量保持限免活动或者购买的方式在使用，否则还陷在网上搜来质量良莠不齐的盗版书，再拷贝到kindle中来读的境地。 啰嗦了几句，简单说说，看完这部魔幻小说的感受，九把刀的热血从头贯穿至结尾，乌拉拉与乌霆奸兄弟情谊让人热血沸腾，剧情不错，文字画面感很强，推荐各位在读《獵命師傳奇》之前一定先去看短篇《卧底》，九把刀在最终章完结的时候说过，正事因为9年写《卧底》这部短篇才构思出来，吸血鬼英雄与命运掌控者猎命师，命格等等等等独立且完整的一个热血世界。 第二十章是猎命师的首部曲完结，整整9年的连载，9年的时光对于任何一个人来说，之间经历过的事都是弥足珍贵的“宝藏”，作者在连载小说的几年间，经历了母亲患病、女朋友分手、服兵役、忠犬去世、交新女朋友等等，都没有过多地打扰或中断他，这种毅力也是我最喜欢他的地方，虽然他的文字有时有些无厘头，但是他的这部小说，尤其是小说里的男主角乌拉拉总是给我一种积极的态度，每天挤在地铁却也能感受到这样的能量。 “正能量”这个词，我总觉得社会上用的越多越失去它真正的意义！ 不废话太多，这部热血的小说，推荐大家闲暇时看一看，和豆先生一起期待后续的剧情！ 另外看新闻说，九把刀的第二部同名小说改编电影《少林寺第八铜人》也在紧锣密鼓地拍摄中，非常期待早日上映！","raw":null,"content":null,"categories":[{"name":"blog","slug":"blog","permalink":"http://beanlee.com/categories/blog/"}],"tags":[{"name":"reading","slug":"reading","permalink":"http://beanlee.com/tags/reading/"}]},{"title":"开篇","slug":"First-Blog","date":"2013-11-27T16:00:01.000Z","updated":"2015-07-22T07:33:33.000Z","comments":true,"path":"2013/11/28/First-Blog/","link":"","permalink":"http://beanlee.com/2013/11/28/First-Blog/","excerpt":"","keywords":null,"text":"欢迎阅读豆子先生的Blog自介绍开篇 Bean Blog What这是一个独立的Blog，基于Github Pages + Jekyll，托管在Git服务器上，编写语言是Mardown，图床待定，网盘待定。 Update 2015 目前基于 Hexo 搭建，图床临时使用微博做载体。 Who作者About me常常自称豆子先生，目标成为海贼王，啊！不对，是成为架构师的攻城狮一枚。 关于写Blog没有任何经验，文字功底不深，但有一腔热血和语言想记录下来。 目前的工作，是做一些J2EE的WEB 系统开发，自然个人最熟悉的开发语言是Java，同时也对Python, Groovy, Javascript等脚本语言有一些研究和实际应用； WhenBlog创建于2013年11月27日凌晨1:00 Why豆子先生年初制定2013年个人计划中的一项：搭建独立的个人Blog。希望这个基于Github Pages + Jekyll下搭建的Blog能够坚持维护下去，虽然目前还是雏形，还需要继续学习逐渐完善。建立Blog的初衷很简单，就是想记录豆子先生日常生活中工作、学习、生活中的一些积累和感悟。 下个月找时间把个人搭建这个blog过程写一篇小教程，把整个过程，包括Blog选型，对比，搭建过程，遇到的问题，查询的资料和文档等等经验，分享给想通过GitHub Pages快速搭建Blog朋友。 How经常关注各类新技术，热衷于尝试新鲜事物和新技术，收集各类有意思的软件，自从年初MacBook Pro with Retina成为主力机之后近期逐渐追加关注Mac下的各类有趣的软件，也希望有兴趣开发出有趣的App，所以今后可能在Blog中写一些软件试用的推荐小文； 关注各类数码产品，半个发烧玩家！ 这个Blog中也会记录一些个人从之前零散记录的内容，后续也会整理总结的一些技术相关的内容，欢迎大家关注订阅RSS和拍砖留言。","raw":null,"content":null,"categories":[{"name":"blog","slug":"blog","permalink":"http://beanlee.com/categories/blog/"}],"tags":[]}]}