在上一篇博客中，我向大家介绍了Electron以及Electron开发环境的部署，在这篇博客中，我将向大家介绍简单Electron应用的开发过程。 Electron程序的入口 程序入口往往是初学者在学习前的第一个疑问：这个程序是怎么跑起来的？由于Electron是Node的runtime，所以它的入口是在package.json中的main进行定义的。接触过Node的读者对此会非常熟悉，对于接触过Chrome程序开发的读者可以把package.json简单理解成manifest.json。无论是package.json还是manifest.json，它们都是一个程序信息的描述文件，里面声明了程序的名称、简介、版本等信息。 比如下面是一个简单的例子： { "name": "My Electron App", "version": "1.0.0", "main": "app.js" } 上例中定义了程序的名称为“My Electron App”，版本为“1.0.0”，入口脚本是“app.js”，这样当用户运行这个程序时，app.js就会被执行。 一个简单的Electron应用 接下来编写一个非常简单的程序，在package.json同目录下新建一个app.js文件，并写入以下内容： var...
Electron是什么 Electron是一款利用Web技术开发跨平台桌面应用的框架，它的前身是Atom Shell。从它前身的名字可以看出，Electron的诞生，离不开GitHub开源编辑器Atom的发布。 Electron和NW.js（前身是Node-Webkit）有很多相似的地方，两者都是利用NodeJS和Webkit渲染器解释JavaScript和渲染HTML，使Web技术应用于桌面应用，但两者又有所不同。Electron的工作方式更接近于Node.js运行环境（“Electron works more like the Node.js runtime”），而NW.js更像是将一系列网页打包起来运行在本地的网站。 有哪些应用是用Electron开发的 在Electron官方页面上罗列了数十款利用Electron开发的应用，其中比较知名的应用有Atom、Slack、VSCode和WordPress.com等。 开始部署Electron开发环境 安装Node.js Electron开发环境依赖于Node.js，所以需要先安装Node.js。这里有一篇指导文章可以帮助你在不同平台下安装Node.js已经npm包管理器。 Node.js安装完毕之后运行 node -v 来查看安装是否成功，如果安装成功，你会看到node的版本号。网络上很多教程的截图中会显示版本号是0开头的，而你所安装的node很可能是4开头的，不必担心，由于历史问题，node从0这个大版本直接飞跃到了4这个大版本，你看到这个诡异的版本号并不是你做错了什么。 如果你的网络环境比较复杂，无法正常使用npm包管理器（大陆的网络环境通常都比较复杂），可以使用淘宝提供的npm镜像，之后将所有npm指令都替换为cnpm指令即可。...
去年我发布Hooloo以来，Sneezry.com一直使用它作为博客系统，Sneezry.cn作为Sneezry.com国内镜像，使用的也是Hooloo，但Hooloo功能的简化让我觉得用起来还是有些不舒服，尤其是无法被Google正常索引，一直让我很困扰。
不久之前我发布了MoteDown，这是一个管理Jekyll站点的软件，虽然目前我只发布了Egg内测版，但在实际使用中我已经深深地爱上了它，所以我利用周末将Sneezry.com重新迁移到了Jekyll上，同时删除了大部分之前的博文（太水了，不忍直视），不过这些博文依然可以通过archives.sneezry.com阅读。
目前Sneezry.cn对Sneezry.com的镜像还没有部署，所以依然是Hooloo，在几天之后会进行同步，届时Sneezry.com和Sneezry.cn的内容会再次保持一致。
还有一个值得庆幸的是，我的博客的feed终于又可以正常使用了 =)
不久之后MoteDown就会与大家见面，还希望到时候大家多多提出宝贵意见 =D
在去年2月，我发布了一篇博客，基于Github的前端轻量级博客系统，这个系统被我命名为Hooloo，同时也发布到了V2EX社区，也得到了不错的反馈。 编写Hooloo的初衷是希望能帮助不想在电脑上配置开发环境的用户同样能使用GitHub Pages撰写博客，出于这一点考虑，Hooloo在设计上使用了最少的配置，实现了博客网站的基础功能。这是必须妥协的地方，配置简单、使用简单，那么功能上就必定大打折扣。没错，Hooloo是一个轻得不能再轻的博客系统，轻到只提供一个博客列表和博客内容，其他的都是在Theme中hard code的。 虽然Hooloo是这么简陋，但在我发布之时还是引发的很多人的热烈讨论，这是我意想不到的，甚至有些人也用Hooloo的思路开发了自己的博客系统。我意识到，使用GitHub Pages写博客不应该是极客们的特权，即使作为开发者，我真的应该为写博客在个人电脑上安装一整套开发环境吗？ 这些天我重新思考了这个问题，同时也觉得是时候对Hooloo说Goodbye了。多数人相信使用Jekyll写博客的优势是Git，也有些人认为是Geek，但我觉得我们不应如此吝啬，Jekyll是个超赞的东西，不应该让它成为小众的玩物。 但似乎Jekyll打出现以来就和开发者们脱离不开关系，它是设计处处透着Geek范，我曾经将Jekyll安利给我的朋友们，但当他们看到官方文档里大段大段的代码和命令就望而却步了，这不是他们的错，毕竟他们不以coding为生。 今天我向大家宣布我在过去一周里开发的新项目——MoteDown，我相信它不仅能让更多抵触代码和命令行的人拥抱Jekyll，同时我也相信，对于很多可以熟练使用Jekyll CLI，可以轻松配置Jekyll开发环境的人也能更方便地使用Jekyll。 MoteDown是一个Jekyll博客管理软件，它可以方便快捷地帮你管理多个Jekyll Site。MoteDown在设计上充分参考了Windows Live Writer，尽量让没有接触过Jekyll的人将精力放在内容上，而不是网站本身上。 MoteDown自带了一个Markdown编辑器，也可以方便地预览Markdown编译后的样式。得益于GitHub强大的API，MoteDown脱离Git客户端，使用RESTful API即可对文章进行版本控制，这对没有接触过Git的人是一个不错的消息。 由于我只在业余时间开发了一周，MoteDown还只能算是一个雏形，很多功能都还没来得及实现，但现在的版本带给我的博客体验已经足够出色了，所以在今天我迫不及待地写了这篇文章与大家分享。 MoteDown在未来一段时间里会发布4个版本：Egg，Caterpillar，Pupa和Butterfly，其中Egg会在非常有限的人群中提供测试，Caterpiller会在一部分人群中提供测试，Pupa会公开测试，Butterfly会是一个功能相对完善、性能相对稳定的正式版本。 当然，能听到你的想法，是我最盼望的事情 :)...
相信很多人都有自己的独立博客，拥有自己富有个性的域名，甚至很多人还为自己的博客配置了 SSL 增加安全性防止页面被 ISP 劫持，那么大家想过发布自己的播客吗？其实发布播客并没有想象中的难，我与 Rebornix 和 SNK 老师就在这几天发布了我们自己的博客——三人行，下面我就来和大家一起分享一下我们发布播客的整个过程，带领大家一步一步发布自己的播客！ 我们来发布自己的播客吧！ 提到发布自己的播客，不得不谈一谈我们当初发布播客的初衷。9 月末的一个下午，Rebornix 与我和 SNK 说，我们一起做播客吧！Wow，我们可没有什么播音的经验，这也是大部分人做播客的一个顾虑，不敢将自己的声音发给别人听。不过自媒体播客的优点也在这里，播主无需专业的播音知识，只要有干货就会有听众，即使没有多少听众，单纯做成一件事也是非常有成就感的，所以这点顾虑并没有过多影响我们的计划。Rebornix 的想法也很简单，我们只想做我们自己的播客而已，仅此而已。所以如果你也想做一个自己的播客，那么请记住，播客是为自己做的，不要有太多的负担 :-D 选择一个有趣的域名 我承认，一个网站的价值在内容上，但一个好域名可以为你的网站加不少分，更重要的是，会让你更容易投入进去。我们在做播客前，着实费了好大的力气起名字找域名。如果你的预算充足，fm 域名是个非常好的选择，如果你的资金不够充裕，也可以考虑...
这是一篇迟到的文章，足足迟到了一个月，所以我对于自己的拖延症已经放弃治疗了……那么除了前几天找工作和黏豆包的离开，还有什么事情占用了我写博客的宝贵时间呢？奥特兰山谷！那个夺得荣誉的地方！为了联盟！ 好了好了，看得出你们一脸鄙夷，我承认我都去打魔兽了……希望今天在国庆节尾巴翻然悔悟的我能得到大家的原谅（据说只要不睡就还算假期）。 扯了两句皮，回到我们今天的正题，延时加载图片。为什么要延时加载图片？产品展示网页通常会包含很多图片，但一般情况下也不会有太大问题，因为这些图片都不算太大，如果用户网络较好，是不会出现糟糕的体验。那么有没有包含很多超大图片的网页呢？有，比如苹果的 iPhone 介绍页面。这些网页为了体现出高清漂亮的产品照片，包含了大量的大尺寸图片，这些图片不夸张地说下载下来都可以直接做壁纸用。那么这样的网页在加载时会出现什么问题呢？想来大家都有体会，曾经苹果的页面中图片加载得十分糟糕，用户经常能看到加载一半的图片，更糟糕的是，这些图片还没有被完全加载完毕就被另一张加载一半的图片代替了——比如那些华丽的轮播图。 不过大家有没有发现，苹果现在的网站不会再出现这个问题了，整张网页从打开到最后加载完备，整个过程犹如牛奶般丝滑…… 这是什么 magic tech ？先卖个关子，为什么我会研究起这个问题？因为我目前实习的公司也遇到了这个问题……我们的首页也包含了很多图片，切换起来也有苹果曾经遇到的问题，但是人家苹果改进了呀，所以本着见贤思齐的原则，我把苹果的页面加载过程彻彻底底研究了一遍。 总的来说，网页中加载图片有两种方法，一是直接用 img 标签引用，二是设置背景图片。早期的浏览器（IE8 及以前）加载资源的顺序是顺序加载，即在 DOM 前面引用的资源会被优先加载，这也是目前很多书籍推荐将 script 紧贴 body 标签闭合之前的原因，这样能够...
当鸟哥在微信里告诉我不用去美团了的时候，我知道今天是我的幸运日。 我从 2008 年开始吉林大学读电子专业，一读就读到了现在。直到 2013 年我刚刚攻读微电子学硕士时，依然一门心思地要在 IC 界混出一片天地，我的导师也非常看好我，在我刚刚进入实验室时就和我讨论直博的事情，那时的我决心将毕生的经历投入到电子行业。硕士生涯第一年很快就过去了，而在这一年里我唯一的成果就是写了一本讲解 Chrome 扩展开发的书，我知道我的心并不在电子上。 2014 年 8 月，我顶着巨大的压力和导师聊了聊我自己的人生规划——也许电子行业不适合我，我不想继续攻读博士了。这个决定的背后有太多的苦涩——导师和父母都被我深深地伤了心，但我知道，自己的路必须自己来选。 2015 年 6 月，在我改变研究方向的 10 个月之后，我完成了计算机视觉方面的基础研究，用...
事情的起因是博主负责的项目需要一个精美的滑块供用户调整图片大小，当然HTML5有现成的range控件博主是清楚的，但如果前端攻城狮如果做起来都那么惬意怎么会成为濒危物种呢？没错，兼容性，我们要兼容性，作为一个有情怀公司的员工，我们不会像某付宝那样放弃1%的用户！不会！ 那么多了不说，直接上博主第一版的代码（仅做实例使用，与博主所负责项目的真实代码与外观不同）： See the Pen aOrOjZ by Li Zhe (@Sneezry) on CodePen. 是不是很难用！那个滑块根本不跟着鼠标走啊，十分地卡顿！这不是一个有情怀的公司应该做出来的东西！为了避免有些初入前端的同学看不太懂上面的代码，我来简单带着大家分析一下。HTML和CSS就不说了，我们直接来看看JS的逻辑。 首先滑块控制把手scrollHandle监听了mousedown事件，这样当用户鼠标在滑块上按下后就看着监视鼠标的活动情况。mouseup和mouseout事件都绑定在了更大的scroll元素是为了避免用户鼠标移动速度过快移出scrollHandle元素导致事件捕捉失败。 博主在写完代码之后感觉逻辑完美得无懈可击，甚至专门设计了一个区域更大的scroll元素来提高事件捕捉的可靠性，可是事实呢！事实让博主甚是崩溃啊！怎么回事！ 为了确定问题所在，博主将监听事件的结果输出到控制台，结果发现，当用户鼠标移出scrollHanlde时，scroll的mouseout事件被触发了，但随后立刻又触发了scroll的mouseover事件！这让博主一度认为是浏览器的Bug——没事你在那mouseout、mouseover的干啥！但最后证明其实是博主术业不精，对此博主深表愧疚，所以博主事后将W3C上Level 3 DOM Events从头到尾看了一遍。 我相信，对DOM...
在页面排版中，我们经常需要将一些块元素塞进一行里，但是块元素默认都是自己独占一行的，要让它们委屈共用一行需要做些额外的工作。总的来说，有两种方法可以实现这一目的：一个是为块元素添加float浮动属性，另一个是将块元素display显示属性改完inline-block。那么两个方法如何选择呢？我们来看一下W3C对float属性的解释： If you look in a typical magazine you’ll see images illustrating the articles, with the text flowing around them....