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

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

在重新设计 Instagram Web 的最近一年里，我们享受到很多使用 ES6+ 新特性写 React 组件的好处。下面我整理了一些可以方便写 React 应用语言特性，相信这会使工作变得更轻松愉快。 类迄今为止我想在写组件时最能直观看到的变化就是 ES6+ 类的使用。关于 ES6 的类定义语言可 参考这里。现在，我们可以写一个继承自 React.Component 的类来取代 React.createClass 的写法。 12345class Photo extends React.Component { render() { return <img al ...

Javascript 中的 this 关键字对很多 JS 开发者来说都是令人疑惑、头痛东西，很多时候往往搞不清楚某个 this 究竟指的是谁，尤其是在多层回调嵌套的情况下，OH GOD!! It’s trivial for some other code to rebind the context of the function you’re working with―using the new keyword and some of the methods that are built onto Functon.prototype. This introduces an entire cla ...

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

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

最近在更新一篇文章后，无论是 hexo g 生成，还是 hexo s 预览都会报解析错误， 大致如下，后面还有很长的信息，就不贴了： 123FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.htmlTemplate render error: (unknown path) [Line 25, Column 85] unexpected token: . 而把那篇文章移除后一切又是正常的。从错误上来看基本可以判断是模板解析错误，从 une ...

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

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

Laravel 5 中提供了一种通过.env文件定义环境变量的方式，根据官方文档的说明应该在不同的环境下使用不同的.env文件，并且此文件不应该提交到版本控制中去。如此设定自然是为了方便不同的环境或者多名开发人员完全可以使用自已的.env环境变量。 但是官方文档中对于如何自定义.env文件中的环境变量却提的很少。文档中只提及了在需要自定义环境变量时最好是在.env.example文件中写一份变量的定义，以方便其他开发人员配置。 下面就以我的“遭遇”来讲下 Laravel 5 中如何自定义环境变量。 （内容比较啰嗦，可直接跳到最后环境变量的正确用法部分） 问题因为我需要路由里面根据不同的二级域名 ...

一、 基础二、 独立作用域三、 独立作用域和函数参数四、 transclude与restrict五、 link函数六、 使用控制器七、 Creating a Unique Value Directive using $asyncValidators 在上一篇文章中我演示了如何创建一个唯一值校验的指令来确定一个 email 地址是否已经被使用过。在 AngularJS 1.3+ 以上的版本中增加了许多新的特性可以使指令的代码变得更加整洁并且更易于使用。在这篇文章中，我将会更新之前的代码，尝试一下新的特性。下面展示的代码是 Customer Manager Standard 中的一部分，你可 ...

一、 基础二、 独立作用域三、 独立作用域和函数参数四、 transclude与restrict五、 link函数六、 使用控制器七、 Creating a Unique Value Directive using $asyncValidators 在这个 AngularJS 指令系列的文章中你已经了解到一些指令的关键部分，但还没有任何指令与控制器绑定相关的内容。控制器在 AngularJS 中的典型用途就是把路由和视图联系在一起，在指令中也是如此。事实上，在指令中使用控制器通常会使代码看起来更简洁，并且更易于维护。当然，指令中的控制器是可选的，如果你喜欢用简单的方式创建指令，你会发现控 ...

一、 基础二、 独立作用域三、 独立作用域和函数参数四、 transclude与restrict五、 link函数六、 使用控制器七、 Creating a Unique Value Directive using $asyncValidators 敬请期待

一、 基础二、 独立作用域三、 独立作用域和函数参数四、 transclude与restrict五、 link函数六、 使用控制器七、 Creating a Unique Value Directive using $asyncValidators 在这个系列的第三节中，我们介绍了怎样定义函数独立作用域属性并且传递参数给函数。这一节我将讲解关于指令的包含（transclude）与限制（restrict）。 restrict （约束）指令在HTML里可以被定义为元素、属性、CSS类或者注释。那么你将如何限制你的自定义指令可以使用哪种方式？ 为了限制一个指令可以如何以及在哪里被使用，你可以用 ...