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

阅读全文 »

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<=...

阅读全文 »

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

阅读全文 »

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

阅读全文 »

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

阅读全文 »

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

阅读全文 »

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

阅读全文 »

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

阅读全文 »

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

阅读全文 »

JetBrains 家族开发的一系列 IDE 目前被越来越多的人所使用，包括 PHPStorm、WebStorm、IntelliJ IDEA等。

今天就以 PHPStorm 为例，说下如何在 PHPStorm 中快速插入当前时间。方法可对 JetBrains 家族的所有 IDE 通用，并且可定制为快速插入任意模板内容。

阅读全文 »