Jerry Bendy 发布于 09月07, 2016

【分享】手机淘宝的flexible设计与实现

看到小黑的文章关于webapp中的文字单位的一些捣腾感觉很赞。尤其是,他提到了手机淘宝的meta,所以觉得要讲讲我们这方面的一些实践。手机淘宝从2014年中开始,全面推行flexible设计。什么叫flexible呢?其实flexible就是responsive的低端形态和基础。对我们来说,最直观的感受就是,在超宽屏幕上,网页显示不会两边留白。以前pc时代大家经常讲的流体布局,其实就是一种flexibledesign。只不过,流体的表述角度是实现,flexible的表述角度是结果,为了跟高大上的responsive保持一致,我们这里使用了flexible这个说法。讨论方案之前,需要先了解三个关键概念:单位英寸像素...

阅读全文 »

Jerry Bendy 发布于 08月30, 2016

【译】十个可以使用 ES6 代替的 Lodash 特性

Lodash应该算是目前在npm上被依赖的最多的包了吧,但是如果你使用ES6,也许你不再需要它。在这篇文章中,我们将尝试使用一些ES6的新特性来解决几种常见的问题。1.Map,Filter,Reduce这些方法使转换数据变得轻而易举,而且非常通用。我们可以使用ES6的箭头函数语法,帮助我们用更简短的方式代替Lodash的语法。_.map([1,2,3],function(n){returnn*3;});//[3,6,9]_.reduce([1,2,3],function(total,n){returntotal+n;},0);//6_.filter([1,2,3],function(n){returnn<=...

阅读全文 »

Jerry Bendy 发布于 08月30, 2016

【译】React on ES6+

本文由冰翼博客翻译自babelJs.io原文作者:StevenLuscher(Github)在重新设计InstagramWeb的最近一年里,我们享受到很多使用ES6+新特性写React组件的好处。下面我整理了一些可以方便写React应用语言特性,相信这会使工作变得更轻松愉快。类迄今为止我想在写组件时最能直观看到的变化就是ES6+类的使用。关于ES6的类定义语言可参考这里。现在,我们可以写一个继承自React.Component的类来取代React.createClass的写法。classPhotoextendsReact.Component{render(){return<imgalt={this.prop...

阅读全文 »

Jerry Bendy 发布于 08月29, 2016

6 种方法在 React 中绑定 javascript 的 this 关键字(ES6/ES7)

Javascript中的this关键字对很多JS开发者来说都是令人疑惑、头痛东西,很多时候往往搞不清楚某个this究竟指的是谁,尤其是在多层回调嵌套的情况下,OHGOD!!It’strivialforsomeothercodetorebindthecontextofthefunctionyou’reworkingwith―usingthenewkeywordandsomeofthemethodsthatarebuiltontoFuncton.prototype.Thisintroducesanentireclassofconfusingscenariosandoftenyou’llseecallbackdrive...

阅读全文 »

Jerry Bendy 发布于 08月10, 2016

CSS 限制文本的行数 —— -webkit-line-clamp 简介

在写网页的时候经常会有需要限制某段文字不能超过多少行的需求, 尤其是在列表中。例如一般标题不应该超过一行、图文混排的区域文本一般不应超过图片的高度(如 5 行)等。关于只限制一行, 多出来部分显示成省略号的方式可以参考 {% post_link css-text-overflow CSS使行内多出的文字显示成省略号 %}。 这里的主题是 -webkit-line-clamp, 可以限制文本为指定的行数, 超出部分显示为省略号。先看下效果:-webkit-line-clamp 目前仍然是一个不规范的属性, 它并没有出现在 CSS 规范草案中。作用是限制一个块级元素显示的文本行数。为了实现此效果还需要和其它的 CSS...

阅读全文 »

Jerry Bendy 发布于 07月30, 2016

【分享】ES6 你可能不知道的事 - 基础篇

序ES6,或许应该叫ES2015(2015年6月正式发布),对于大多数前端同学都不陌生。首先这篇文章不是工具书,不会去过多谈概念,而是想聊聊关于每个特性你可能不知道的事,希望能为各位同学正确使用ES6,提供一些指导。对于ES6,有些同学已经在项目中有过深入使用了,有些则刚刚开始认识他,但不论你是属于哪一类,相信这篇文章都有适合你的部分。针对文章中的问题或不同意见,欢迎随时拍砖、指正。正文Let+Const这个大概是开始了解ES6后,我们第一个感觉自己完全明白并兴致勃勃的开始使用的特性。以如下方式使用的同学请举下手?//定义常量constREG_GET_INPUT=/^\d{1,3}$/;//定义配置项letcon...

阅读全文 »

Jerry Bendy 发布于 07月24, 2016

hexo 在遇到 “{{” 符号时出现解析报错

最近在更新一篇文章后,无论是hexog生成,还是hexos预览都会报解析错误,大致如下,后面还有很长的信息,就不贴了:FATALSomething'swrong.Maybeyoucanfindthesolutionhere:http://hexo.io/docs/troubleshooting.htmlTemplaterendererror:(unknownpath)[Line25,Column85]unexpectedtoken:.而把那篇文章移除后一切又是正常的。从错误上来看基本可以判断是模板解析错误,从unexpectedtoken:.又看不出来具体是哪里出错,一直找不到原因。今天查找资料发现有人遇到和我类...

阅读全文 »

Jerry Bendy 发布于 07月03, 2016

【分享】如何部署软件 - 让你团队的部署像地狱一样无聊且毫无压力

作者ZachHolman本文为Coding用户协作翻译,转载请注明来源。如果你对本文的翻译有建议,欢迎提交PullRequest。让我们来聊聊部署无论你何时对自己的代码库做出改动,总会伴随着要破坏一些东西的风险。没有人喜欢宕机,没有人喜欢暴躁的用户,也没有人喜欢生气的经理,所以部署新代码到生产环境变成颇具压力的一个环节。你完全没必要对它有压力,我将在这里重复一遍又一遍这句话:你的部署应该尽可能单调、直接、毫无压力。部署新功能到生产环境中应该像在HackerNews开始一场关于用spaces还是tabs的口水战一样简单。它应该足够简单到让新员工理解,它应该为防止错误而生,它应该在第一个最终用户看到新代码前被很好地测...

阅读全文 »

Jerry Bendy 发布于 05月28, 2016

博客更换域名到 icewing.cc 并启用HTTP/2

一直有对博客进行改版的想法。从2013年最开始搭建时候使用的Wordpress博客到现在的hexo静态博客,中间也有过自行开发的版本,但没有使用多久。之前自行开发的版本是使用CodeIgniter框架,力求做的简单。可能是受wordpress影响太深吧,现在想想当初开发的“简单”的版本也还是太过于复杂了,很多功能都是可以抛弃不要的。自己设计的主题也不再符合现在“极简”的审美观念。主要说下现在吧。几个月前从wordpress迁移到hexo,并且不得不丢弃了所有的评论数据改为使用Disqus。博客使用NexT主题,并把所有内容生成静态文件。刚开始是部署在自己服务器上,后来改为同时部署到CodingPages和阿里云虚...

阅读全文 »