饭食钢
饭食钢
i write the resource file in coffeescript, but it compiles my resource file into .js ``` config.resources = { path: options.path, defaultLocale: options.defaultLocale, extension: '.json', placeholder: /\{(.*?)\}/ }; ``` could...
React学习资源
## React [官网](https://facebook.github.io/react/docs/getting-started.html) [官网中文翻译](http://reactjs.cn/react/docs/getting-started.html) 注意：中文翻译站点更新有点滞后 [React组件/元素/实例 by Dan Abramov](https://facebook.github.io/react/blog/2015/12/18/react-components-elements-and-instances.html) **必读** [Presentational and Container Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.sy3zxqx40) **必读** [componentWillReceiveProps的一个误区](https://facebook.github.io/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html) **必读** [Airbnb的JSX编写规范](https://github.com/airbnb/javascript/tree/master/react) [百度的React规范](https://segmentfault.com/a/1190000004628682) ## Redux [官网](http://redux.js.org/index.html) [官网中文翻译](http://camsong.github.io/redux-in-chinese/index.html) ## Webpack [基于 Webpack 和 ES6 打造...
## Chrome DevTools 监控性能 Chrome DevTools 必不可少，基本的技能必须要会。 [https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/) ## Web Fundamentals https://developers.google.com/web/fundamentals/performance/why-performance-matters/ ## Performance audits https://web.dev/lighthouse-performance
默认忽略文件名大小写，这样在 Mac 下 build 没问题，到了服务器（Linux）上 build 出错。 看了下项目的 .git/config 文件 [core] 配置 ```bash [core] repositoryformatversion = 0 filemode = true bare = false logallrefupdates = true ignorecase = true precomposeunicode...
## 分支 创建并切换到分支 dev ``` git checkout -b dev ``` 等同于 ``` git branch dev git checkout dev ```
[原文链接](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html) 网页布局（layout）是CSS的一个重点应用。  布局的传统解决方案，基于[盒状模型](https://developer.mozilla.org/en-US/docs/Web/CSS/box_model)，依赖 [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display)属性 + [position](https://developer.mozilla.org/en-US/docs/Web/CSS/position)属性 + [float](https://developer.mozilla.org/en-US/docs/Web/CSS/float)属性。它对于那些特殊布局非常不方便，比如，[垂直居中](https://css-tricks.com/centering-css-complete-guide/)就不容易实现。  2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。  Flex布局将成为未来布局的首选方案。本文介绍它的语法，[下一篇文章](http://www.ruanyifeng.com/blog/2015/07/flex-examples.html)给出常见布局的Flex写法。 以下内容主要参考了下面两篇文章：[A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 和 [A Visual Guide to CSS3 Flexbox Properties](https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties)。 ## 一、Flex布局是什么？ Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。...
├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected]...
Unicode定义的空格符号如下： [\u0020\u00A0\u1680\u180E\u2002-\u200D\u202F\u205F\u2060\u3000\uFEFF] 以下几种空格可以重点留意： - \u0020为普通半角空格 - \u00A0为不换行的空格，对应HTML的 (No-Break Space) - \u200B为零宽空格（Zero Width Space） - \uFEFF为零宽不换行空格（Zero Width No-Break Space） 其中\u2060为Unicode 3.2新增。 在移除字符串首尾空白时，我们看看TJ的[trim](https://www.npmjs.com/package/trim): ``` js function trim(str){ return str.replace(/^\s*|\s*$/g, ''); } ``` 别看这个库如此简单，但是每天的下载量达到1W+。先不说其它方面的BUG，就正则来说问题就不少。...
# Redux三分钟入门 ## 什么是Redux？ 对于前端页面，从数据层面来说，无非就是一系列的状态组合。 在传统的前端开发中，尤其是jQuery横行的年代，状态管理相关的理念一直没有什么起色。 自Flux横空出世以来，各种解决方案层出不穷，百花齐放，Redux也是在这种环境下诞生的。 如何描述Redux呢？ 简而言之，它就是一个状态容器，里面存储了整个应用的所有状态。 > Redux的核心思想就是要提供**_可预测**_的状态管理，这对日益膨胀的大型应用来说尤其重要。 原谅我有一点标题党，因为对于从来没有听说过Redux的人来说，三分钟入门可能真的不够。 ## 预备知识 Redux中有三个基本概念非常重要：store / reducer / action。 Store顾名思义就是状态容器，Redux使用**_createStore**_这个API来创建一个全局的状态容器。这里有一点比较重要的就是： > Redux应用只能有一个单一的Store 我们暂时不用深究Redux为何如此设计。 Reducer是一个纯函数，它的职责就是用来更新状态容器中的状态，**_这也是Redux中更新状态的唯一途径**_。 Action是一个普通JavaScript对象，它是把数据从应用传递到状态容器的载体。 将action传递到store中很简单，使用store.dispatch(action)就可以了。 > 为了区分不同的数据来源，我们一般约定每个action都必须要有一个type字段。 这样我们的reducer函数就能根据这个type字段来决定如何修改状态容器。 掌握了上面的一些基本概念以后，我们就可以进入正题了，先上一段代码：...
程序员的强迫症
编程追求效率，却也讲究习惯。习惯改变之难，还真不能说`那就不是个事儿`，在技术圈子尤甚。 当然，JavaScript这个圈子也不例外，比如这些： - [JavaScript语句后面应该加分号吗？](http://www.zhihu.com/question/20298345) - [eval is evil?](http://www.nczonline.net/blog/2013/06/25/eval-isnt-evil-just-misunderstood/) - [== or ===?](http://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/) - ... 上面的话题，个个是G点，分分钟引发高潮。就犹如`Vim和Emacs`、`Windows和Linux`等话题，一旦开篇随之而来的就是引经据典、长篇大论、你死我活、百态尽出。 作为有格调的程序员，我们应追求效率。而非沉浸于无谓的争论，无端的争论往往因为恪守习惯，不善变通。 就上面的话题进行争论，或许还有些"技术主义情怀"。但是下面的这些纯感性的**习惯**呢？不妨先看看： - 缩进用tab还是用空格，你喜欢哪一种? - tab等于两个还是四个空格，你喜欢哪一种？ - 对象的键值是紧凑连接，还是在冒号后加一个空格，你喜欢哪一种？ - 变量声明，单行还是多行，你又喜欢哪一种？ - 单行代码块的花括号，加还是不加？ - ... 这种**习惯**多如牛毛，以至“知音”着实难寻，因为实在是众口难调、各有所爱。也难怪**Web...