Lichen Dai
no matter what the text is, do fitText(), it's will fit to 100% width automatticly
> 以前看nodejs只是看看API没有具体看这些细节，把别人的package.json拿来抄一抄，看字段也知道留下name、version、private、dependencies就好了，能方便地npm install部署就可以了，也没去深究。现在想在用起来在架构上面就遇到了很多问题。包括文件结构、管理、部署、重启…… > 昨天想先了解一下YO、GRUNT、Bower这一套东西正好看到了package.json的devDependencies字段。找到这个文档看，看着看着就看成了中文，也给大家送送福利。这样大家看起来就快多了。 > 有什么问题希望大家快快拍砖。 # package.json(5)[网页版](http://mujiang.info/translation/npmjs/files/package.json.html) ## 简介 本文档有所有package.json中必要的配置。它必须是真正的json，而不是js对象。 本文档中描述的很多行为都受`npm-config(7)`的影响。 ## 默认值 npm会根据包内容设置一些默认值。 - `"scripts": {"start": "node server.js"}` 如果包的根目录有`server.js`文件，npm会默认将`start`命令设置为`node server.js`。 - `"scripts":{"preinstall": "node-waf clean || true; node-waf...
每一次有新同学加入，除了讲代码，还有一个必须要说得就是图片的格式选择和压缩。 看之前请回答几个问题： 1. 你知道jpg、gif、png的区别吗？ 2. 你知道png有8位、24位、32位吗？ 3. ie6透明问题只能用滤镜这类的方法来解决吗？ 4. 你知道png8可以有半透明（alpha通道）吗？ 如果你对上面的问题有否定的回答，那么我确定这篇文章值得你一看。 ## 图片格式的选择 根据需求选择合适的图片格式是每一个前端工程师的义务。一般会要求美术同学给到原始的图片或psd，然后前端再进行格式转化和压缩。 为什么不让美术同学直接给到压缩好的图片呢？主要有两个考虑。 1. 降低沟通成本 2. 技术问题让技术解决 下面先简单地介绍一下各种格式的图片，随手写来，不准确的地方欢迎拍砖，我会一一回复、改正。 #### jpg jpg(jpeg)是一种**有损压缩**的图片具体的解释见：http://zh.wikipedia.org/wiki/JPEG > 什么叫**有损压缩**？有损压缩就是为了将图片压缩到更小，利用人眼观察图片的特点改变某些丢弃掉一些人眼不易察觉的原始颜色信息，而这个是不可逆的。 这种压缩方式优点很明显 - 压缩比高（可调） - 颜色丰富...
技术需要整理
这段时间陷入了迷茫，感觉前端技术积累太少、太浅。 偶然在GDG Devfest上遇到米宗神，聊了很久，发现很可能是总结太少的问题。因为我们发现很多问题我都处理过，但我没有意识到这些地方的重要性，只是当成一般的坑填掉就走了，别人问起也不拿这些问题来说。所以，我决定遵从他的建议，整理代码开始写博客了。 送别粽神后，我思考了很久，要总结些什么？怎么总结？ 我一直是一个不太善于言辞的人，提笔忘字。去年一时蛋疼建了一个 http://niuble.com/ 没怎么发文，也没怎么维护，更没怎么开发。导致一切都一塌糊涂，虽然说聊胜于无，但是对于我来说无更胜于傻逼。所以现在在某些地方写blog地址的时候就直接写 http://ericathy.us/ 了——一个结婚纪念网站。 现在我重新申请了一个域名 http://mujiang.info/ - 木匠手记。我曾解释过： > 我叫欢乐木匠艾瑞克，是因为我觉得现在做的前端就像原先的木匠一样 —— 手艺人、有艺术气息、有工程能力、能制造出直接与人交互的产品。他们能用木头制造各种实用的工具、用具、玩具；他们不断改良自己的工具、提高自己的工艺、培养自己的修养以更低的成本制造出更丰富、更实用、更美丽的产品…… 然而同一时期，有其他几位木匠。或许不是那么正派，有一些跨界的木匠。他们提炼了工序、技艺，发明了机器…… 我不要做会被机器取代的木匠！这不一定要发明机器，但一定要比机器更高明。 所以我要开始写木匠手记了，我决定从以下几个方面走： - 整理github上面发布的项目，把漏洞、bug、不严谨的地方找出来，好好改。 - 把以前的项目review，整理出有意思的部分，抽离出来。 - 每周至少整理一次工作、生活心得。应该有好几个部分，web技术、团队管理/开发流程、产品理解、其他。 立帖为证！ PS: 木匠手记页面构思中，在此之前都会写在这里。
### 今天分享一个很常见的东西——图片轮播。 虽然说这是一个很常见的东西，但真要论起来，其实有很多地方可以优化。 比如[淘宝首页](http://www.taobao.com/)的图片轮播，如果一个顾客的鼠标像我这样傻逼得晃过去晃过来，被他经过的轮播就“停止”了。 注意鼠标移动的轨迹和轮播的大图片，如果用户在轮播周期内反复_经过_轮播元素，图片轮播就会“永远”停止。而下方的图片已经经过了几次轮播了。  而同样的事情如果发生在[心动游戏](http://www.xd.com)的官网上会，这不会有任何不符合预期的行为发生，鼠标悬停轮播停止，鼠标离开不影响轮播进程。 **注意鼠标移动的轨迹和轮播的大图片**  引题结束，希望能引起你的兴趣，如若不然你应该不会看到这行字。。。或者下行字。。。 这个是我12年刚进入心动时写的，需求很简单——图片轮播、右下角链接。 为了实现这个需求，代码也可以很简单： 1. 定义$.fn.xdMarquee，写成jquery扩展 2. 函数中下载图片，并插入DOM 3. 定义start、next、clear来控制轮播 4. 定义右下角指示器click事件 5. 开始轮播 源代码： https://github.com/ericdum/mujiang.info/blob/master/share/marquee.js 捡重要的代码看： ``` javascript function marquee(data, options){...
刚才收到服务器报警，MySQL连接数量剧增。查了一下日志，发现了一条极为简单地查询，但却耗费了14秒左右的查询时间。 ``` sql SELECT ... FROM ... WHERE `user_id` = 000 AND `app` = "xxx" ORDER BY `time` LIMIT 1; ``` 看了一下这个表的索引，这里user_id、app、time分别有一个索引。由于这个表的可搜索字段非常多，所以这些索引都是只有一层的。 用EXPLAIN解释一下发现这条查询没有使用我们期望的user_id来作为索引，而使用了time。rows为443万。 ``` +----+-------------+--------+-------+------------------------+------------+---------+------+---------+-------------+ | id | select_type |...
# 看AngularJS文档需要注意的一些关键点 我们这些英语不好的人，看英文文档最容易忽略的就是大段大段的文字。转而去看示例代码和代码解释，更有甚者是直接去看API文档、看源码。但是这样要把一个框架的结构和使用方式看懂是很有难度的，就像盲人摸像，如果不把整个大象全身摸完，是无法正确理解这头象的。 同时“没有万能的东西”这句话也能用在框架上，任何一个东西都有他特定的应用场景和思路。所以选择并使用一个东西的时候一定要关注作者的设计思路是不是和你预期的一致，也就是，你是不是作者的典型用户。如果是，这个优秀的框架一定能把你服务得很好；如果不是，换一个，或者试着改变自己的思路。 Angular尤其是一个颠覆传统web应用开发模式的框架，所以尤其需要关注，甚至是直接学习他的思路。 这篇文章就是把[Developer Guide](http://docs.angularjs.org/guide/)中的部分我觉得重要的信息摘选出来翻译。大多都不包含代码和具体用法，因为那些实例我们都很熟。 ## 概念 [Conceptual Overview](http://docs.angularjs.org/guide/concepts) 这是在创建第一个app之前就应该理解的Angular的概念。 | 概念 | 定义 | | --- | --- | | Template | 使用了额外标记的HTML | | Directives |...
升级了10.10的同学上述的3个应用前都会打上一个X。  强行打开会弹出提示说不支持。 解决方案来了： 1. 到百度云盘下载http://pan.baidu.com/s/1hqh4O9u 对应的包解压。 2. 首先在应用文件夹找到它们的图标，然后点右键，选择“Show Package Content”，自行翻译。  1. 打开Contents文件夹 2. 备份info.plist和version.plist文件，如打包：  3. 复制解压出来的plist文件，覆盖刚才的文件  4. 弹出的提示中选replace  5. 然后就可以完美地得到解开的应用了  6. 双击，enjoy
浏览器阻塞探究
上周发现虾米音乐的js都放在head里面，心想不是会卡进程么？和虾米音乐的同学聊了之后发现他们认为这个网站功能和js密切相关，所以不希望让用户看到不可用的页面。 根据产品选择技术可能无可厚非，其他优化方案这里不谈，我就想看看卡渲染进程到底是怎么卡的。 所以有了以下思路， 1. 在head中，用while去无限循环跑3秒。 2. 进入body，输出 3. 再用同样的方式跑3秒，输出 4. 外调一个3秒网络延时的js，同时执行其他js 5. 同时外调一个5秒、10秒网络延时的js，同时执行其他js 期望： 1. 无限循环js卡住进程导致白屏 2. 上一步结束后输出 3. body中的无限循环再次卡住进程，证明head、body无异 4. 网络进程依次加载js、执行js 5. 总执行时间3+3+3+5+10 = 24秒 循环代码： ``` javascript var...
I got following messages: ``` 2015-08-07 19:02:48.986 [rtmp:915oJr3K] connected 2015-08-07 19:02:49.025 [rtmp:receive] unknown (not implemented) AMF command: _checkbw 2015-08-07 19:02:49.036 [rtmp] publish: stream=TEST publishingType=live 2015-08-07 19:02:49.059 [stream:TEST] video data error:...