解决karma 在travis 找不到CHROME_BIN的问题

今日用npm test在 /travis-ci中运行时,找不到CHROME_BIN。自己用的karma + Jasmine测试模块功能。 在代码传上去的时候于是乎看了这样的错误: ERROR [launcher]: Cannot start Chrome Can not find the binary google-chrome Please set env variable CHROME_BIN 当然这种问题肯定前人也遇到过,所以解决起来思路很重要,我大概就是还是不动karam的配置修改.travis.yml,文件,添加几句脚本即可。 - export CHROME_BIN=chromium-browser - export DISPLAY=:99.0 - sh -e /etc/init.d/xvfb start 其实你还可以通过修改karam.conf.js中的broswers这个选项来实现,比如你可以修改至 phantomjs. 当然修改后你就可以看到build 详情 »

查看详情

聊聊算法【一】

其实算法对于很多前端,或者更小范围的工程师,比如(非班科出身)的我,而言,其实还算一个很难的挑战。 最早接触算法还算是大一下期学习C++(好蛋疼的日子,全班挂的差不多,感觉学习外语一样)。接触了一些基本的算法,比如找闰年啊,排序等。但是由于专业不在这个方向,后面就再无接触了。大四要找工作的时候,发掘得开始恶补了,于是乎也买了本数据结构与算法(c语言)的,也看的模模糊糊,但是数据结构却开始了解的相对深刻一点。后来的工作其实验证了算法和数据结构对于解决问题的帮助还是很大的。所以无论是出于应试目的,还是工作所需,对基础的算法和数据结构一定要有所理解和深入。一定是受益匪浅的。 自己最近开始重温算法,也把代码放到JavaScript-Algorithm-Learning.自己也算督促自己把最基本的算法有所理解并实现吧。 前端需要掌握的基本的内容大致有:树,排序,图论算法,贪婪算法等。 详情 »

希拉里VS特朗普第一场总统辩论直播地址

美国东部时间9月26日晚9点即北京时间9月27日早上9点,希拉里和特朗普第一场总统辩论将在纽约亨普斯特德(Hempstead)的霍夫斯特拉大学(Hofstra Uniersity)进行。据估计,这一场辩论有望成为美国政治史上观众规模最大的一次,观看人数可能会过亿。 直播地址: USA Today Youtube twitter 围观:DebateNight 详情 »

查看详情

[译]Medium 是如何优化图片加载的

Medium 是全球非常知名的阅读平台,允许用户多人协作,并将自己的内容发布到平台上,让更多人知道自己所要表达的信息。 之前写过一篇关于Pinterest如何处理图片预加载的文章,有兴趣的可以点击这里 阅读。今天我们主要分析下Medium在图片预加载有哪些值得大家学习的地方。 先来观察下效果吧: 其实我们可以看到在在那些文章中的图片,我们可以看到起初是一张非常小的并且模糊的图片,随后渐变成我们预期的大图。总之Po主是蛮喜欢这样的效果的。 如果你打开控制台去观察网络请求,就可以看到请求了一张小图然后加载了一张比较大的图片。 具体流程 渲染一个展示图片的 div ,然后将他的padding-bottom设置成百分比,从而与图片长宽比一致。这样做可以避免在图片渲染的时候引起上下跳动的影响。这种加载也被称作intrinsic placeholders 加载一个较小的图片。他们大约会请求一张缩略的jpeg图(eg:20%),实际上这是直接在代码中写了 img标签的,浏览器会正常请求; 一旦图片加载了,它们会开始绘制一个canvas标签,图片的数据会传递给自定义的blur函数,这个函数与StackBlur有点相似,但不完全,这个同时,网络开始请求大图。 大图加载完毕后,于是区域便展示大图,而canvas则会隐藏掉。 我们会使用transition从而让整个效果变得更加流畅。 基本结构 基本的html结构如下: <figure> <div> <div/> <!-- this 详情 »

微日记-20160920

天气晴。 入秋了,已经渐渐凉了很多。早起汽车,感觉明显的多。中午时不时的会热。 最近开始准备Interview了,觉得需要重复读读《JavaScript程序设计》,书本才是重要的知识点,而且重复读总能收获到一些什么。终于买了传说中的易筋经《unix编程艺术》,不过我觉得十有八九看不懂。 话说回来,真的很感谢HJ童鞋的帮助,算是一点小小的点拨吧。 详情 »

创业日记-20160918

天气晴。 今后一段时间可能不太会更新了,心累。暂且放松一段时间吧😄 详情 »

创业日记-20160915

天气晴。 今日中秋。聚少离多,在外的人都如此,从求学开始几乎,都没怎么和家人一起过个中秋,很少见到定水15的月亮。从某人那里听过最多的一句话,子欲养而亲不待。 今日看笑傲江湖,发觉小说里最有趣的一章节,令狐冲被锁在太湖湖底的时候,金庸先生对令狐冲的内心描绘特别细腻,自言自语的,交织着希望与失望。从发现现在的处境的绝望,大骂梅庄四人,但是想起向大哥,又觉得有希望了。但是又会臆想,向大哥也出事,想起任盈盈时候,内心又是一喜,想起小师妹,又变的无比失望 😄😄😄,确实有趣。忽然想起初二暑假,被马蜂蛰晕了,躺在床上,觉得自己日子不长了,一一的回忆了现有的朋友,并把自己最想对他们说的话都想好了。好在,万事幸运,那次我还是从鬼门关中回来了。 详情 »

创业日记-20160913

补补昨天的。 夜晚release,还是出现一些流程性漏洞。晚上和某pm闲谈的时候,发觉文理生交流还是有点点出入😂😂😂: 。 你跟我说那么多条件说明干么?好奇怪。一个特别简单的时间问题,总是会给人一种好复杂的条件,这个可能算是我们产品的一些通病吧。 晚上和刚回京的谢老板聊了会,更多的是关于产品和计划,所谓人各有命,志在何方? 详情 »

查看详情

前端神器 Adobe Brackets 使用心得

提及编辑器,可能类似与语言之争,什么vim才是最好的编辑器等等。其实自己用的顺手熟练才好,毕竟作为一门工具,效率第一,而且现在总多的编辑中,你所需要的常规功能都已经具备了。 Adobe Brackets 是Adobe公司推出的一款编辑器,可谓名门之后。或许还在几年前,有的朋友也还用着他家的Dreamwearver写完了自己的第一个网页。 而Brackets相对Adobe Dreamweaver,我们将它定义为一款编辑器,它身上完全看不出Dreamweaver那样繁重的功能,而它诞生的目的就是: With focused visual tools and preprocessor support, Brackets is a modern text editor that makes it easy to design in the browser. It's crafted from the ground up for web designers and front-end developers. 简而言之,就是提升开发效率,让开发者少走一些路, 详情 »

Vue-Core-Image-Upload 一款Vue轻量级的图片裁剪上传插件

[项目地址](https://github.com/Vanthink-UED/vue-core-image-upload) 最近把jquery.core.image.upload迁到了vue的版本。当然Angular的版本还在写。 改的过程中,有的时候还在纠结要不要写个状态去维护对一些值的操作。后来到测试的时候才发现,各有优势吧。Vue目前交给了移动组的同事再弄,自己只参与了这次插件的改写,毕竟jQuery版本是自己维护的。有趣的是,发现代码量相对jquery少了很多,比如移动和拖拽,以前是依赖jquery.ui新的版本完全脱离这些,但是目前还是将其独立封装成一了一个类,但是写法还并非Vue的写法,因此后期可能还会有些变动吧。参数这些没有太多变化,还是和jquery的那个版本的功能保持一致。当然目前测试还没有添加进去。需要后面更新。 使用 npm i vue-core-image-upload --save Code Example (ES6) import VueCoreImageUpload from './vue.core.image.upload.vue'; new Vue({ el: '#app', components: { 'vue-core-image-upload': VueCoreImageUpload }, data: 详情 »