在很久之前我就说过同样的话，表达过我觉得做为前端工程师而言设计素养的重要性，今天我想聊天为什么我有这种观点¶泛化的设计实际上生活中设计是中无处不在的，大到建筑工程、工业设计，小到网页设计、产品设计。我认为设计的本质就是理解你（或者你的用户）内心想法的一个过程，在完成了一个物件的物理功能后，你需要考虑它的适用场景及多数用户的实用需求我在北京呆了很多年，你要问我对北京的印象是什么颜色，我会毫不犹豫的告诉你「蓝色」。有的人会认为是雾霾的灰色、有的人会认为是天安门的红色。为什么我的印象是蓝色呢，因为在北京无论你去哪儿都会选择公共交通，所有的交通标识牌都是蓝背景加白前景色，环路上的路标、地铁标、普通道路的路标，到处都会有蓝色的标识牌。使用蓝色的好处在于标识性强，尤其对我这种视觉异常的人特别友好。但是却缺乏美感，因为要照顾大多数人的体验我也常去西安，你要问我对西安的印象是什么颜色，我也会告诉你是「暗红」。西安的地铁标识牌就是这种暗红，我也不太确定这种颜色准确的叫法，赤红或者朱红？总之这种颜色和西安这个城市的调性很搭。无论是古城门上的各种架梁、门柱、瓦石的着色，还是现代的地铁标识颜色，到处都有暗红色的设计。西安地铁标的设计虽然说是和整个城市的气质具有一致性，但是识别性很差，尤其城市里面绿化比较好，树木多的时候绿色和这种红色标识交错在一起是很难分辨的从这个例子中我们可以了解到，其实设计并不是那种只 ...继续阅读 (9)

单看这篇文章的标题可能会有点言重，但是我更愿意记录下来给自己当做警钟。同时这也不是一篇聊历史的文章¶起因为什么会谈到这个话题，是因为最近新闻实在太多，无论是「金马奖台独」、「俞敏洪关于堕落的演讲」还是「D&G;辱华」。每一次舆论的风口浪尖上总是会有一些公众号站出来表达立场，我并不打算聊这三件事情中的任何一件，我想聊聊我对于公众号的一些反醒及看法事实上最开始公众号流行的时候，我也会跟风转发一些高赞文章。比如当年咪蒙写的《致贱人：我凭什么要帮你》。当我看完这篇文章时第一感觉就是：太解气、太过瘾了，浑身上下产生了一种从心理到生理上的一种爽快感现在想起来当时的感觉应该和吸鸦片没有什么两样，但当我回过头来再看这件事情的时候我会觉得这文章无论对于我自己还是观众来说都没有半点益处。就像文章里面提到的那种伸手党，你帮了他他还觉得理所应当的人，这种人在现实生活中总会存在，不会因为转了这篇文章而消失、更不会因为你骂他两句他就幡然醒悟。所以我觉得与其痛述现实与之争长短，不如静下心来，多看书学习，用提高自己的方式拉开与它们的距离然后我也想分析下这类的文章为什么能受到很多人的追捧（下面的分析并不针对指定公众号）¶人个的情绪宣泄虽然公众号名曰「公众」，但是我认为个人公众号是挺私人的东西。大多数人发的内容都是和自身经历相关的，不具有事实客观性，大家都在聊自己的观点比较会写文章的那类公众号发展一段时间，会有很多粉 ...继续阅读 (13)

最近由于工作内容需要特地了解了一下国外在线购物网站的一些特点，过程中发现一些比较有意思的地方，记录下来同时聊聊我的感受我很少上国外购物网站买东西。毕竟做为个人来讲跨境消费是非常不方便的。但是我会通过信用卡购买一些服务类的产品，像虚拟服务器、域名、正版软件等。大概算是有一点国外网站的消费经历我研究了美国 TOP 10 的线上购物网站，类型上大概分三种：¶综合类像 Amazon, Ebay 这种属于综合类的线上购物网站，大部分的人会上这样的网站购物，因为商品种类齐全，覆盖面广。而且这类网站通常都是电商的先驱，用户早就行成了消费习惯。所以它们能占市场的很大份额¶垂直类一般是某个特定商品分类领域，或者比较小众的网站。例如：Newegg - 消费电子、Esty - 手工艺、Sears - 工具/器具、ModCloth - 非主流女装、Rockler - 木工五金。这类网站的特点就是目标用户比较小众，网站的设计风格也非常个性化。newegg 是数码极客风，Esty 是小清新路线，Sears 是实用主义，ModCloth 是潮流与时尚，Rockler 是匠人。每个网站都有它特定的气质。Rockler 比较有代表性，在国内很难想像有买五金制品的网站，在 Rockler 甚至可以买到木头原材料，估计是因为国外人工成本高，很多家庭常用的东西都是自己做，所以才存在这种小众类目购物网站¶渠道类这个分类可能 ...继续阅读 (8)

马上要到双十一大促了，无论你喜不喜欢，各种广告、短信都扑面而来。当大部分广告都在高呼打折、特价买买买的时候，大家似乎都忘记了自己想要买什么了。提到广告首先让我印象深刻的是 youtube 视频网站的广告。youtube 的广告一般大概两分钟，每次看到新广告总能让人感觉特别惊喜，同样的视频网站，国内的优酷、腾迅视频却很少让人记住。于是我做了个简单的分析，总结出来我认为 youtube 广告更棒的几个原因：观看 youtube 需要视频需要科学上网，没法观看的可以关注公众号 肆零玖陆 对应有文章更新¶广告质量高这个是毋庸置疑的，无论大众的审美如何，人们天生喜欢看到美的东西，能传递思想形成共鸣东西。即使广告也不例外，好广告最基础的一点就是要让用户看完之后知道你传达的信息是什么，似有似无、估做深沉的广告毫无意义。如果你是个程序员并且经常上 youtube 的话，你一定会看过 Wix 这个广告。它是一个网站，使用它可以让你快速的制作属于自己的网页、博客等。我们来欣赏一下 Wix 的广告：这个广告无论从内容传达、产品特点、动感音效还是品牌效应都一应俱全，看完之后不仅印象深刻，而且即使你不怎么懂英文也知道 wix 是用来做什么的。广告一开始就开门见山告诉你：「With Wix you can create professional website that looks stunning, Jus ...继续阅读 (37)

很多从事 IT 互联网公司工作的人（尤其是程序员）会常常提到「技术驱动与技术重视」的问题，大部分人在面临职业选择的时候也优先选择那些所谓的「技术驱动」型的公司。因为在这种公司里面技术氛围好，对自己的职业发展有帮助。这种想法肯定是无可厚非的。本文试着从大环境与自我两方面聊一下这个话题首先。在大家聊到这个话题时往往都出奇一致的认为国内没有技术驱动型公司。因为大众对技术的认识很少，很多人对于程序员的第一印象是「修电脑」。当然你可能会觉得「不会呀，我周围都是一些非常专业的同事，我也在一家很重视技术的公司工作，我的工作内容大家都认可」，这么认为当然也是对的，但是我想说是的大众的意识问题。为什么大家会有这种「偏见」，在我看来根本原因就是一种普世的价值观对于偏才的误解。因为大众喜欢看到一个十全十美的东西。儒家的思想提倡自我的实现，君子应该如何如何…，君子应该是上知天闻下知地理，既洞明学问，又练达人情。但事实上并非如此。诸葛亮就是一个很好的例子，大众认可的是他小说中的角色，一个样样精通的人，政治、军事、管理各个领域都很精通，但事实上诸葛亮除了人长得帅气，有政治才能以外并没有别的什么长处大家喜欢全才而不是偏才，这也是《论语》中讲「君子不器」的道理。就是说君子不能像固定的器具/东西一样只有一个功能。上学的时候老师会告诉你不能偏科，学校会要求你德智体美劳全面发展。这是一种美好的愿望，但是真的有几个人会成 ...继续阅读 (9)

前几天听说《生活大爆炸》将于 2019 年 5 月完成终结季（12季），一时间让我想起上大学那会刚开始看这部美剧的。起初是因为大学生活确实过的没意思，也是无意中在腾讯视频上点进去的。刚开始我是从第二季开始看的，后来大学毕业参加工作后就很少看了，一方面工作后确实时间少，一方面看大爆炸时间长了也会有一些审美疲劳，感觉里面的内容不再那么有意思。说到有意思这又让我忽然想起来另外一部同样题材的情景喜剧（英剧）《The IT crowed》，这是一部给我留下深刻印象的英国喜剧。讲的是一个公司里的 IT 部门两个技术极客和一个女经理之间发生的一些有趣的事情如果你同时看过这两部剧的话你会发现他们之间有很大的差别，美式幽默和英式的幽默完全不是一个风格。英式幽默特别夸张、无理头，甚至讽刺、搞怪。他会用一些你很难想象的非常夸张的表现手法，比如在第一季中的「火焰屏保」一本正经的胡说八道，却让人笑到抽还有灭火器着火。我从来没见过甚至听过有比灭火器着火更离谱且搞笑的事情了吧这还不算，镜头一转「Made in Britain - 英国制造」，这算是把自己国家完整的黑了一把其实了解英国文化的人应该会懂，英国人特别喜欢讽刺，即使自己国家的东西也可以拿来嘲讽娱乐。剧中这种讽刺还有很多，比如0118 999 881 999 119 725这居然是一个电话号码！没错，而且还是紧急服务电话**，**有没有搞错，紧急服务哎。 ...继续阅读 (9)

事实上在讲清楚这个问题之前，必须知道一个所有人都无法拒绝的常识，即：对大多数人来说 iOS 绝对比 Android 好用。本文试着从使用者的角度出发谈谈自己对两个手机端操作系统的理解与认识¶iOS 为何好用决定一个操作系统好用与否的原因有很多，系统的功能健全、用户体验、稳定性、应用程序及其周边生态等。iOS 操作系统从本质上讲是一个闭源、高度统一且集中式的操作系统，这个集中可以理解为中心化的。回顾 iOS 发展历你会感觉这种高度集中的程度甚至达到了「集权」的程度，苹果对自己的操作系统有着几乎所有的控制权，这就使得 iOS 系统无论是 UI 交互、设计风格还是应用生态都天然的具备了近乎完美的一致性。当你手里拿着最新款的 iPhone 的时候你会觉得她简直就是一件艺术品。深层次上这就使得苹果的产品在审美上可以主动的影响用户，而不是被动的接受用户的反馈大家都知道 iOS 的生态好，但是到底好在哪里？我认为好在两方面其一应用生态，一个应用从前期的设计、中期的开发、后期的运营苹果都提供了很多解决方案。设计时有HIG，开发时有 Xcode 集成开发环境，运营商业化的时候有应用内购买、Apple Pay、Searchads 等一系列的解决方案，所以我们看到很多独立开发者做的应用都非常优秀甚至超过了某些商业公司。细心的话你会发现上面提到的这些似乎在 Android 平台也有一些影子。但实际上差别还 ...继续阅读 (5)

§说明原作者译者注授权开始背景Socket API 概览TCP Sockets打印客户端和服务端打印程序服务端打印程序客户端运行打印程序的客户端和服务端查看socket状态通信的流程分解处理多个连接多连接的客户端和服务端多连接的服务端多连接的客户端运行多连接的客户端和服务端应用程序客户端和服务端应用的协议头发送应用程序消息应用程序类消息入口点服务端主程序服务端消息类客户端主程序客户端消息类消息类的包装运行应用程序的客户端和服务端故障排除pinnetstatwindowsWireshark引用Python 文档错误信息socket地址族使用主机名阻塞调用关闭连接字节序结论¶说明本书翻译自realpython网站上的文章教程Socket Programming in Python (Guide)，由于原文很长，所以整理成了 Gitbook 方便阅读。你可以去首页下载PDF/Mobi/ePub格式文件或者在线阅读¶原作者Nathan Jennings 是 Real Python 教程团队的一员，他在很早之前就使用 C 语言开始了自己的编程生涯，但是最终发现了 Python，从 Web 应用和网络数据收集到网络安全，他喜欢任何 Pythonic 的东西 —— realpython¶译者注译者是一名前端工程师，平常会写很多的 JavaScript。但是当我使用 JavaScript 很长一段 ...继续阅读 (12)

§主要功能特性安装macOSLinuxWindows 及其它开发版Python 版本使用例子HTTP 方法请求 URLQuerystring 参数localhost 的 URL 缩写自定义默认的方案请求项字符转义规则JSON默认行为明确的 JSON非字符串的 JSON 域表单普通的表单文件上传表单HTTP 头默认的请求头空头和重新设置默认头授权验证Basic 授权Digest 授权密码提示.netrc授权插件HTTP 重定向按 header 头中的 location 字段值跳转显示中间的跳转响应限制重定向最大次数代理环境变量SocksHTTPS服务器 SSL 证书验证自定义 CA 包客户端 SSL 证书SSL 版本服务器名称指示SNI(Server Name Indication)输出参数哪部分的 HTTP 请求内容应该打印出来查看中间的请求/响应条件化的 body 内容下载重定向输入从一个文件中取请求数据命令行输出颜色和格式化二进制数据重定向输出下载模式下载文件的文件名下载的同时 piping恢复下载其它注意事项流式响应禁用缓冲示例会话具名会话匿名会话只读会话配置配置文件路径可配置的参数取消之前指定的参数脚本最佳实践元信息接口设计用户支持相关项目依赖HTTPie 的朋友贡献变更日志插图许可证作者HTTPie 是一个命令行 HTTP 客户端。目标是让 CLI 与 Web servi ...继续阅读 (13)

§安装配置依赖定义一个代码片段定义格式最小化的一个代码片段可视选择区的内容为占位符代码片段的参数内容解释器shell 代码vimscript 代码python 代码占位符选择自定义上下文常见用法行内连续展开使用正则代码片段使用 python 解释器 + VISUAL 模式实现代码注释功能¶安装Ultisnips插件安装分两部分，一个是 ultisnips 插件本身，另外一个是代码片段仓库。一般来说把默认的代码片段仓库下载下来按需修改后上传到自己的 github 即可。如果你和我一样也使用 vim-plug 来管理插件的话，添加下面的代码到你的 vimrc 中保存刷新即可Plug'SirVer/ultisnips'# 你自己的代码仓库 git 地址 Plug'keelii/vim-snippets'上面的示例中所有的代码片段都存放在插件安装目录下面的vim-snippets/UltiSnips中，文件命名格式为ft.snippets,ft就是 vim 中的filetype，其中有个all.snippets是唯一一个所有文件都适用的代码片段¶配置快捷键设置，我一般使用 tab 来触发代码片段补全，且不使用 YCM（官方文档表示使用YCM的话就不能使用tab补全）letg:UltiSnipsExpandTrigger=""" 使用 tab 切换下一个触发点，shit+tab 上一个触发点 ...继续阅读 (11)

§简介优点安装使用用 vim 打开文件切换当前工作目录切换 git 分支shell 命令行补全配置核心命令 FZF_DEFAULT_COMMAND界面展示 FZF_DEFAULT_OPTS触发命令行补全 FZF_COMPLETION_TRIGGERVIM fzf 插件安装插件结语¶简介Fuzzy finder是一款使用 GO 语言编写的交互式的 Unix 命令行工具。可以用来查找任何列表内容，文件、Git 分支、进程等。所有的命令行工具可以生成列表输出的都可以再通过管道 pipe 到 fzf 上进行搜索和查找¶优点GO 语言编写，编译完生成可执行文件没有任何依赖搜索/查找速度飞快功能全面/可视化界面体验很棒周边插件丰富 (vim, tmux, fuzzy auto-completion)¶安装以 macOS 为例子，直接使用 homebrew 安装即可brewinstallfzf# 如果要使用内置的快捷键绑定和命令行自动完成功能的话可以按需安装$(brew--prefix)/opt/fzf/install¶使用命令行下执行fzf即可展示当前目录下所有文件列表，可以用键盘上下键或者鼠标点出来选择或许你会觉得这个查找提示看起来挺漂亮的，但是并没有什么卵用，因为查找出来就没有然后了。其实这也是 Fuzzy finder 最核心的地方，他只是一个通用的下拉查找功能，自己本身并不关心你用它来 ...继续阅读 (15)

使用 jQuery ajax 方法调用异步接口时 data 参数默认会被添加转码encodeURIComponent，如下：$.ajax({url:'http://your.domain.com/action',dataType:'jsonp',data:{spaces:'a b',other:'&'}})上面的代码会向http://your.domain.com/action?spaces=a+b&other;=%26发送 get 请求，奇怪的是参数中的&被正确转码成%26，但是被转成了+而不是%20看看正确的转码结果长啥样encodeURIComponent('&')// => "%26"encodeURIComponent(' ')// => "%20"既然 data 参数里面的 key,value 都要被 encodeURIComponent，那么出现这种情况只能去查 jQuery 源代码了。jQuery 会调用 $.param 方法来编码 data 参数，大概在jQuery-1.7.2的(7736)行：param:function(a,traditional){// ...}else{// If traditional, encode the "old" way (the way 1.3.2 or older// did it), otherwise encode par ...继续阅读 (20)

切 host 对于平常开发来说再正常不过了，可是「切 host 难」的问题一直没解决，因为手动修改 host 文件会有很多（系统dns、浏览器）缓存问题。经常听到xx说「我这是好的呀，你 host 有问题吧...」在 windows 下我一直使用 fiddler 来切换 host，很多人可能不知道这个功能。他的实现本质就是实用代理映射来实现 host 切换。这样的欢最大的优点就是无延迟，秒切 host这个体验就非常赞，而且是系统级别的，也就是说别的浏览器里面也适用（前提是浏览器代理设置为系统）然后由于最近切换到 mac 开发环境，发现 mac 下面的解决方案都不是很完美，或者说不适合我的要求。无外乎以下几种：¶物理修改 host 文件像 iHosts, Switchhosts 这类，但据我所知这种方法都有延迟¶抓包工具代理切 host比如 mac 下的 Wireshark、Charles，这些工具据说很强大，可是我自己用不惯，而且我是需求也很小，杀鸡焉用牛刀。fiddler for mac 虽然也能跑起来，但是体验太差了，界面卡的要死¶浏览器插件代理切 host像 Chrome 下的 Chrome-host-switch、 Switch host plus 等，试用了下效果很理想。美中不足的是体验不好，只有标签没有分组，把标签当分组切的人很蛋疼简单看了下 switch host p ...继续阅读 (14)

使用 seajs 的过程中偶尔会发现 require 进来的模块甚至都没有加载。查看源代码之后发现 seajs 是通过正则表达式匹配出了模块 factory 中的 require 路径正常情况下，下面这个模块里面 require 的外部模块会解析出依赖GLOBAL_ROOT/base/cookie和GLOBAL_ROOT/base/utilsdefine('moduleName',function(){vara=require('GLOBAL_ROOT/base/cookie')varb=require('GLOBAL_ROOT/base/utils')// 正常情况 a 应该是个对象，console.log(a)})但是如果 cookie 模块加载失败，a 就会返回 null 这时候再调 a 上面的方法就会报错。当 seajs 内部解析依赖时发生了错误时就会出现这种情况，由于我们使用的是比较老的 seajs 版本（2.2.0），去查看源代码发现 parseDependencies 方法使用了一个正则表达式varREQUIRE_RE=/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'|\/\*[\S\s]*?\*\/|\/(?:\\\/|[^\/\r\n])+\/(?=[^\/])|\/\/.*|\.\s*require|(?:^|[^$])\brequire\s*\ ...继续阅读 (9)

本文来自于我自己配置两台 macOS 开发环境的过程，主要记录一些常用的配置技巧¶系统设置¶更改计算机名称macOS 默认的计算机名称「xx的xx」，我一般会把这个名字改成英文，在命令行中看起来会漂亮一点。修改系统设置-共享-电脑名称即可¶触控板设置轻点触控板为鼠标点击设置三指拖动¶Finder开启新 Fidder 窗口时打开桌面执行搜索时搜索当前文件夹显示所有文件扩展名¶其它系统偏好设置-键盘-输入法-自动切换到文稿输入法应用切换的时候会保持原来的输入法不变桌面空白处右键-排序方式-贴紧网格右键整理图标的时候就会按网格排列¶开发环境设置¶安装 Command line tools方便后续编译安装其它应用xcode-select--install¶安装 brew一般命令行的工具，或者开发环境包都用brew来安装。GUI 的应用直接去网站下载安装包即可，App Store 我一般用来购买安装一些收费软件打开命令行执行下面的命令来安装 brew/usr/bin/ruby-e"$(curl-fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)"使用下面的命令替换 brew 源为中科大镜像# 替换brew.git:cd"$(brew--repo)"gitremote set-url origin htt ...继续阅读 (10)

由于最近全面切换工作环境到 Mac 上，快捷键基本上成了适应期的最大问题传统意义上像Ctrl, Alt, Shift, Win, Option, Command都属于修饰键，只能和其它键配合使用才可以（Ctrl+c,Ctrl+v），单独敲击并没有效果但是 Win 键在 Windows 中被赋予了更多的功能，下面这几个系统级别的快捷键用起来是非常方便的：Win + E⇒ 打开资源管理器Win + D⇒ 显示桌面Win + L⇒ 锁定计算机之前使用过 Windows 和 Ubuntu gnome，特别方便的一点就是 super(Win) 键不仅可以做为修饰键和其它键组合使用，而且还可以响应单独的点击事件，Windows 中点击 Win 键会全局呼出开始菜单方便我们查找/打开应用。这样的话单独点击相当于可以少按一个按键，切找应用什么的非常快Mac 中我通常使用 Spotlight 来快速切换程序。用惯了 Mac 的人会觉得 command 键位非常舒服好按（键位原因），这时候我希望尽可能把常用的键组织到 command 上又不影响原来的组合键，比如我有下面两个最常使用的快捷键：⌘⇒ 呼出 Spotlight⌘ + Space⇒ 切换输入法然而 Mac 系统中并不允许我们这么做 🤔，于是我使用了一个改键器Karabiner😎我的配置方法是使用Complex Modifications因为它 ...继续阅读 (9)

通常我们在用 JavaScript 操作 DOM 元素的时候会往 DOM 上临时添加一些参数，用来记住一些状态，或者从后端取参数值等一般通过在 HTML 标签上添加自定义属性来实现，但是这样会不可避免的访问 DOM，性能上并不好。如果你使用 jQuery 的话建议使用$el.data()方法来取元素上data-*的值，比如：$('#demo').attr('data-key')$('#demo').data('key')// 第一次访问 DOM，以后从缓存取这两个方法的区别在于 attr 每次都会直接访问 DOM 元素，而 data 方法会缓存第一次的查找，后续调用不需要访问 DOM很明显建议使用后者，但是在低版本的 jQuery中默认会对 data 方法取到的值进行粗暴的强制数据类型转换「parseFloat」。看下面代码字符串数字科学计数法八进制数字$('#demo0').data('key')// "abc"$('#demo1').data('key')// 123$('#demo2').data('key')// Infinity$('#demo3').data('key')// 83后面两种显然出错了，就是因为 jQuery 对属性值进行了强制 parseFloat 操作。这种转换是方便了使用者，如果是数字的话我们取到这个值进行计算什么的就不用再转数据类型了，但是一不小心 ...继续阅读 (11)

¶安装环境Windows 7 SP1 企业版Sublime text 3 Build 3162Node.js v6.9.5Yarn 0.23.2 (可用 npm 代替)¶安装 ESLint到你的项目根目录生成一个 package.json 文件，如果没有使用yarn init -y来自动生成ESLint 默认的 parser 是 esprima，如果你需要检查 Babel 转义的 JSX 等文件那可以选择安装babel-eslintyarninit-yyarnglobaladdeslint使用 sublime text 3 配置 eslint 来做代码检查¶安装 Sublime text 3 插件¶安装 Sublime​Linter 和 SublimeLinter-contrib-eslintSublime​Linter是一个代码检查框架插件，功能非常强大，支持各种语言的检查。但是它本身并没有代码检查的功能，需要借助 ESLint 这样的特定语言检查支持。我们只需要使用对应的Sublime​Linter-contrib-eslint插件即可在 Sublime text 中Ctrl + Shift + p > Package Control:Install Package里面搜索关键词linter，注意别选成了 SummitLinter。然后再搜索eslint找到 SublimeLi ...继续阅读 (8)

由于博客主题使用了 Google fonts PT Serif 字体，国内只能通过中科大的代理来使用 Google fonts 字体。然而最近发现其速度不稳定，响应时间有时候甚至超过 600ms。刚好因为自己有vultr 的 VPS(带小尾巴)就自己动手搭了个来用VPS 环境如下：Ubuntu 14.04Nginx 1.12.0 (最新版各别配置与之前不一样)Openssl 1.0.2j (新版 Nginx 开启 http2 需要的最低 openssl 版本)¶重新编译安装 Nginx如果之前编译安装没开启相关模块的话需要重新编译，大概参数如下：./configure--prefix=/usr/local/nginx --with-http_ssl_module --with-openssl=/usr/local/ssl --with-http_v2_module --with-http_sub_module编译完没有出错的话就make && make install就 OK 了¶配置 Nginx 反代¶基本配置upstream google { server fonts.googleapis.com:80; } upstream gstatic { server fonts.gstatic.com:80; } proxy_temp_path /your/pa ...继续阅读 (12)

¶关系代数运算符集合运算符运算符含义英文$∪$并Union$−$差Difference$∩$交Intersection$×$笛卡尔积Cartesian Product比较运算符运算符含义$>$大于$≥$大于等于$<$小于$≤$小于等于$=$等于$≠$不等于专门的关系运算符运算符含义英文$σ$选择Selection$π$投影Projection$⋈$链接Join$÷$除Division逻辑运算符运算符含义$∧$与$∨$或$¬$非¶5 种基本的关系代数运算¶并（Union）关系 R 与 S 具有相同的关系模式，即 R 与 S 的元数相同（结构相同），R 与 S 的并是属于 R或属于 S 的元组构成的集合，记作 R ∪ S，定义如下：$$R∪S=\{t|t∈R∨t∈S\}$$¶差（Difference）关系 R 与 S 具有相同的关系模式，关系 R 与 S 的差是属于 R且不属于 S 的元组构成的集合，记作 R − S，定义如下：$$R−S=\{t|t∈R∧t∉S\}$$¶广义笛卡尔积（Extended Cartesian Product）两个无数分别为 n 目和 m 目的关系 R 和 S 的 笛卡尔积是一个 (n+m) 列的元组的集合。组的前 n 列是关系 R 的一个元组，后 m 列是关系 S 的一个元组，记作 R × S，定义如下：$$R×S={t|t=<(t^n,t^m)∧t^n∈ ...继续阅读 (13)

§问题描述确定规则解决方法缩小问题规模调整思路优化体验算法复杂度¶问题描述这个问题来源于选择商品属性的场景。比如我们买衣服、鞋子这类物件，一般都需要我们选择合适的颜色、尺码等属性先了解一下 sku 的学术概念吧最小库存管理单元（Stock Keeping Unit, SKU）是一个会计学名词，定义为库存管理中的最小可用单元，例如纺织品中一个SKU通常表示规格、颜色、款式，而在连锁零售门店中有时称单品为一个SKU。最小库存管理单元可以区分不同商品销售的最小单元，是科学管理商品的采购、销售、物流和财务管理以及POS和MIS系统的数据统计的需求，通常对应一个管理信息系统的编码。 —— form wikipedia最小存货单位简单的结合上面的实例来说： sku 就是你上购物网站买到的最终商品，对应的上图中已选择的属性是：颜色黑色- 尺码37我先看看后端数据结构一般是这样的，一个线性数组，每个元素是一个描述当前 sku 的 map，比如：[{"颜色":"红","尺码":"大","型号":"A","skuId":"3158054"},{"颜色":"白","尺码":"中","型号":"B","skuId":"3133859"},{"颜色":"蓝","尺码":"小","型号":"C","skuId":"3516833"}]前端展示的时候显然需要 group 一下，按不同的属性分组，目的就是让用户按 ...继续阅读 (12)

TrimPath是一款轻量级的前端 JavaScript 模板引擎，语法类似FreeMarker,Velocity，主要用于方便地渲染 json 数据more¶语法 Syntax¶表达式 Expressions表达式和修饰符（其它模板语言中叫做过滤器 filter）中间用|分割且不能有空格${expr} ${expr|modifier} ${expr|modifier1:arg1,arg2|modifier2:arg1,arg2|...|modifierN:arg1,arg2}¶语句 Statements¶控制流 Control Flow{if testExpr} {elseif testExpr} {else} {/if}¶循环 Loops{for varName in listExpr} {/for} {for varName in listExpr} ...循环主体... {forelse} ...当 listExpr 是 null 或者 length 为 0 ... {/for}¶变量声明 Variable Declarations变量声明语句用花括号{}括起来，不需要关闭。类似 JavaScript 中的赋值语句{var varName} {var varName = varInitExpr}¶宏声明 Macro Declarations ...继续阅读 (9)

§为什么需要一个前端监控系统需要监控系统解决的问题技术选型NodeJSPhantomJS架构设计架构概览架构简述解决方案前台规则录入常规监控高级监控可用性监控主动错误上报页面脚本执行错误监控页面主动上报后端页面抓取服务规则队列生成器类消息队列的实现长时持续处理器长时持续处理实现APIPhantomJS 服务报警系统如何根据报警定位到具体页面？何时出发报警？部署总结与展望本文首发于infoQ及「前端之巅」微信公众号（微信群直播记录），感谢 infoQ 前端之巅尾尾同学对文章的整理和校对、微信群直播的组织策划。「前端之巅」是个非常棒的前端知识分享平台，想了解最前沿的前端知识资讯果断关注吧more¶为什么需要一个前端监控系统通常在一个大型的 Web 项目中有很多监控，比如后端的服务 API 监控，接口存活、调用、延迟等监控，这些一般都用来监控后台接口数据层面的信息。而且对于大型网站系统来说，从后端服务到前台展示会有很多层：内网 VIP、CDN 等。但是这些监控并不能准确地反应用户看到的前端页面状态，比如：页面第三方系统数据调用失败，模块加载异常，数据不正确，空白开天窗等。这时候就需要从前端 DOM 展示的角度去分析和收集用户真正看到的东西，从而检测出页面是否出现异常问题¶需要监控系统解决的问题页面通常出现以下问题时需要使用邮件、短信通知相关人员修复问题状态码返回错误（50x, 40x）无 ...继续阅读 (11)

¶原由自从新博客建立以来一直用Octopress这个博客框架来搭建静态文章页面。漂亮的默认主题、方便的发布到 github page 等功能吸引了我但就在最近因为家里的用 Macbook，刚好升级到了新版的 Sierria，杯具的是之前安装的 Octopress bundle 都失效了。调试了很久还没把环境搭建好，再加上之前发现 Octopress 的 Markdown 解析器老报错，于是就决定要更换一个配置安装简单点的博客生成器了more在参考了这个网站上的各种生成器后staticgen，果断选择了 Hugo。没有什么特殊原因，下载安装试用一下就明白了。Hugo 由于是 Go 语言写的，所以你只需要下载好官方给的二进制可执行文件就可以了，再也不用安装各种依赖，然后各种换源什么的乱折腾了。这一点就足以让我转入 Hugo¶主题由于自己还是比较喜欢 Octopress 默认的这套主题，所以在读过 Hugo 开发文档后，在严格尊重原主题的原则下修改了部分增强样式，制做了一个适配 Hugo 的 Octopress 主题。虽然 Hugo 官方有一个适配 Octopress 的主题hugo-octopress但是对原主题改动太多，我并不喜欢¶迁移¶文章Octopress 使用的文章描述头是 yaml 格式的，需要转换成 Hugo 的 toml，自己手动写了个NodeJS 脚本来完成这个工作，基 ...继续阅读 (10)

Macbook 电源用的时候久了，接口里面的几个针脚弹性变差，有时候接通电源然而灯不能亮在网上搜索了下发现一个好方法：接电源那头是突出金属的，稍微打磨下去一点就可以了，亲测有效PS: 如果没有打磨工具可以直接找个空地面磨，有条件的话磨完再用砂纸抛光下就可以了来两张图片看看more  ...继续阅读 (8)

¶JavaScript、浏览器、事件之间的关系JavaScript 程序采用了异步事件驱动编程（Event-driven programming）模型，维基百科对它的解释是：事件驱动程序设计（英语：Event-driven programming）是一种电脑程序设计模型。这种模型的程序运行流程是由用户的动作（如鼠标的按键，键盘的按键动作）或者是由其他程序的消息来决定的。相对于批处理程序设计（batch programming）而言，程序运行的流程是由程序员来决定。批量的程序设计在初级程序设计教学课程上是一种方式。然而，事件驱动程序设计这种设计模型是在交互程序（Interactive program）的情况下孕育而生的more简页言之，在 web 前端编程里面 JavaScript 通过浏览器提供的事件模型 API 和用户交互，接收用户的输入由于用户的行为是不确定的，也就是说不知道用户什么时候发生点击、滚动这些动作。这种场景是传统的同步编程模型没法解决的，因为你不可能等用户操作完了才执行后面的代码比如我们在 Python 里面调用接收用户输入的方法raw_input()后终端就会一直等待用户的输入，直到输入完成才会执行后面的代码逻辑。但是在下面这段 NodeJS 代码中，接收用户输入的方法process.stdin.read是在一个事件中调用的。后面的代码不会被阻塞（blocked） ...继续阅读 (8)

每个 Window 对象有一个 document 属性引用了 Document 对象。Document 对象表示窗口的内容，它是一个巨大的 API 中的核心对象，叫做文档对象模型（Document Obejct Model, DOM），用来展示和操作文档内容more¶DOM 概览HTML 或 XML 文档的嵌套元素在 DOM 中以「树」的形式展示。HTML 文档的树装结构包含表示 HTML 标签或元素（如 body, p）和表示文本字符串的节点，也可能包含表示 HTML 注释的节点Simple DocumentHeadingThis is aparagraph置换成 DOM 树表示+------------+ | Document | +-----+------+ | +-----+------+ || +-----+------+ | +--------------------+--------------------+ | ...继续阅读 (8)

§简介前端的发展历程混沌时期初见端倪拨云见日单品页前端模块的结构与划分概览按什么维度划分模块整体核心模块模块内部结构前端技能树HTMLDOM 节点数同步渲染还是异步加载外链静态资源使用双协议的 URL删除元素默认属性给脚本控制元素加上类钩子CSS样式分类雪碧图适当使用 DataURI关于兼容性JavaScript入口脚本事件处理模型一些典型的性能优化点前端工程化原由现状选择程序、设计、产品总结¶简介详情页也叫做单品页，域名以「item.jd.com/skuid.html」为格式的页面。是负责展示京东商品 SKU 的落地页。主要任务是展示和商品相关的信息，如：价格、促销、库存、推荐，从而引导用户进入购买流程。同时单品页有很多版本。一般分为两类。一类我们通常看到的「通用类目详情页」—— 所有类目都可以使用，一类是不经常看到的「垂直属性详情页」—— 一些有特殊属性的商品集合more首先。由于详情页大量（sku上亿）、高并发（日 pv 约 5000 万）等特性，在很长的一段时间里，单品页面都是后端程序生成静态页面使用 CDN 来解决大量、高并发的问题其次。单品页涉及的「三方」系统特别多，比如：促销、库存、合约、秒杀、预售、推荐、IM、店铺、评价社区。而单品页的主要任务就是展示这些系统的信息，并且适当的处理他们之间的冲突关系，而这些系统的接口一般都使用 异步 Ajax 来完成，因为 其一 C ...继续阅读 (6)

本章介绍 Window 对象的属性和方法¶计时器setTimeout() 和 setInterval() 可以用来注册指定时间之后调用的函数，不同的是 setInterval 会在指定毫秒数的间隔里重复调用。它们都返回一个值，这个值可以传递给 clearInterval/clearTimeout，用于取消后续函数的调用more由于历史原因（通常不建议这么做），setTimeout 和 setInterval 的第一个参数可以作为字符串传入。如果是字符串，当到达指定时间时相当于执行 eval 字符串内容// 4 秒后显示 logvart1=setTimeout(function(){console.log('show after 4s');},4000);functionfn(){console.log('show every 1s');}setTimeout('fn()',1000);¶浏览器定位和导航Window 对象的 location 属性引用的是 Location 对象，它表示窗口中当前显示的文档 URL。并且定义了方法来使窗口载入新的文档Document 对象上的 location 属性也引用到 Location 对象：window.location=document.locationDocument 对象也有一个 URL 属性，是文档首次载入后保存的该文档的 URL 静 ...继续阅读 (12)

¶客户端的 JavaScriptWindow 对象是所有客户端 JavaScript 特性和 API 的主要接入点。它表示 Web 浏览器的一个窗口或者窗体，并且可以用标识符 window 来引用它。Window 对象定义了一些属性，比如:more// 页面跳转window.location='http://www.oreilly.com/';// 页面圣诞框alert('Hello World')setTimeout(function(){alert('Hello later World')},1000)window 对象也是全局对象。可以省略「window.」来调用上面的方法。这意味着 windows 对象牌作用域链的顶部，它的属性和方法实际上是全局变量和全局函数。window 对象有一个引用自己的属性，叫做 window。如果需要引用窗口对象本身可以用这个属性，但是如果只想要引用全局窗口对象的属性，通常并不需要用 windowwindows 对象还定义了很多其他重要的属性、方法和构造函数。其中最重要的一个属性是 document，它引用 Document 对象，后者表示显示在窗口中的文档。document 对象有一些重要方法，比如 getElementById() 获取一个 DOM 元素，它返回一个 Element 对象也有其他重要属性和方法，比如，给元素绑定点击事件 onc ...继续阅读 (5)