兄弟团队开发了一个针对手机网页的前端 console 调试面板，并将其开源了，一个非常有用的开发调试工具。项目地址：https://github.com/WechatFE/vConsole。不多介绍，以下内容直接 copy 了项目的 README.md简介vConsole 是一个网页前端调试面板，专为手机 web 页面量身设计，帮助开发者更为便捷地进行开发调试工作。手机预览http://wechatfe.github.io/vconsole/demo.html使用方法1.下载模块checkout 文件dist/vconsole.min.js到本地。2.引入模块(1) 如果未使用 AMD/CMD 规范，可直接在 HTML 中引入 vConsole 模块：<script src="path/to/vconsole.min.js"></script>(2) 如果使用了 AMD/CMD 规范，可在 module 内使用require()引入模块：var vConsole = require('path/to/vconsole.min.js');3.打印 log 日志(1) 与 PC 端打印 log 一致，可直接使用console.log()等方法直接打印日志：console.log('Hello World');未加载 vConsole 模块时，console.lo ...继续阅读 (109)

兄弟团队开发了一个针对手机网页的前端 console 调试面板，并将其开源了，一个非常有用的开发调试工具。项目地址：https://github.com/WechatFE/vConsole。不多介绍，以下内容直接 copy 了项目的 README.md简介vConsole 是一个网页前端调试面板，专为手机 web 页面量身设计，帮助开发者更为便捷地进行开发调试工作。手机预览http://wechatfe.github.io/vconsole/demo.html使用方法1.下载模块checkout 文件dist/vconsole.min.js到本地。2.引入模块(1) 如果未使用 AMD/CMD 规范，可直接在 HTML 中引入 vConsole 模块：(2) 如果使用了 AMD/CMD 规范，可在 module 内使用require()引入模块：var vConsole = require('path/to/vconsole.min.js');3.打印 log 日志(1) 与 PC 端打印 log 一致，可直接使用console.log()等方法直接打印日志：console.log('Hello World');未加载 vConsole 模块时，console.log()会直接打印到原生控制台中；加载 vConsole 后，日志会打印到页面前端+原生控制台。(2) 支持 4 种不同 ...继续阅读 (4)

组内小伙伴 jf 去Feday广州站的分享，有蛮多干货，都是微信 web app 开发者们关注的一些问题。不做过多介绍，没有去现场听得朋友可以下载ppt来看。感兴趣的朋友也可以下载广州站的所有ppt，以及关注接下来的 Feday 日程。 ...继续阅读 (26)

我们从QQ浏览器团队得到消息，X5已经完成升级到Blink的开发工作，最近已经开始下发到客户端中，而X5内核的更新是热更新，也就是说不需要用户更新微信客户端，在良好的网络环境下(比如WiFi)会在后台静默更新。根据我们拿到的版本，X5用的Blink版本是Chrome 37。虽然我们也愤怒为什么不给升级到Chrome 49的版本。。。但。。。【此处省略10000字】全部的放量升级会在4月初完成，可能现在已经有读者的X5已经升级到了Blink。Android下web app的开发就像客户端开发一样痛苦，因为Android的版本和设备的碎片化问题，加上国内特殊的用户和设备环境，复杂程度要比iOS大的多。如果没有一个统一的webview，我们会面临很多问题：可能还有超多用户再用Android 2.3版本，比如微信用户中有3%用户使用Android 2.3及以下版本——是Windows Phone的用户量的6倍Android 4.2的用户其实不少，因为两年前买小米的用户，基本不会升级ROM即便新款手机都使用较高的Android版本了，比如Android 4.4.*+，但每个手机厂商都是定制的ROM，所以他们使用的Chrome/webkit版本也都不一样，甚至还会定制出自己的bug所以从好的方面来说，X5可以抹平webview的差异，减少开发成本。好在我对比了下Chrome 37与最新的49版 ...继续阅读 (108)

自从WeUI开源后，已经收到 7000 多 star ，将近 2000 的 fork，我们在欣喜之余，也收到了蛮多有价值的意见与建议，其中之一就是将设计稿开源——好吧，其实设计稿叫『开放下载』更合适一些。那我们今天开放了基于 WeUI 0.4 版本的设计稿 sketch 文件，感兴趣的朋友可以去关注一下。嗯，不要问我 psd 文件，这个不一定有~~项目地址：https://github.com/weui/weui-sketch有问题可以在项目 repo 提 issue 或者这里留言。 ...继续阅读 (26)

用gif图片来做loading的时代已经过去了，它显得太low了，而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足。这已经成为一种趋势。这里收集了几十个用html5和css3实现的loading效果，以供学习参考。01. CSS Rainbow LoaderDemoDownload02. Single element Slack loaderDemoDownload03. Pure CSS3 loaderDemoDownload04. CSS Cog loaderDemoDownload05. VSCO – CSS loaderDemoDownload06. Cube CSS LoaderDemoDownload07. CSS LoaderDemoDownload08. Tumblr-style cog loadersDemoDownload09. CSS Weather LoaderDemoDownload10. Chrome Cast CSS LoaderDemoDownload11. CSS3 LoadersDemoDownload12. Android 4.4 Kitkat loaderDemoDownload13. CSS loaders kitDemoDownload14. CSS creative loadingDemoDownload ...继续阅读 (15)

兄弟团队内测已久的微信网页开发者工具终于在今天的微信公开课Pro大会上发布了，喜大普奔。这个工具有主要有3个功能：使用真实用户身份，调试微信网页授权。校验页面的 JSSDK 权限，以及模拟大部分 SDK 的输入和输出。利用集成的 Chrome DevTools 和基本的移动调试模块，协助开发。具体的使用方法和下载地址请访问：https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.htmlX5怎么办嗯，更头疼的是Android版微信内网页的调试，因为它的内核是QQ浏览器的X5内核，那，QQ浏览器那边也出了个X5专用的调试工具，不过前提是你要先安装最新版的QQ浏览器，QQ浏览器团队还专门开发了一个网站，来介绍如何进行X5页面的调试：http://blog.qqbrowser.cc/具体我就不说了，冤有头债有主，x5的问题去找QQ浏览器吧，请不要在这里留言反馈，谢谢！ ...继续阅读 (20)

前端的一大特色就是喜欢折腾，就像这几天轰动前端界热门话题《关于『真阿当』对目前流行前端技术的批判，大家有什么看法？》一样。这不，发现DNSpod可以通过Lets Encrypt的验证之后，立马更换到他们家的证书了。然而Lets Encrypt加的自动安装的脚本还是略麻烦，于是就用了 xdtianyu 写的Lets-encrypt自动化脚本，一键生成证书了。而且，用这个脚本的另一个好处是可以设置自动更新证书，毕竟Lets Encrypt的默认有效期只有3个月。简单步骤，直接引用Lets-encrypt的说明：下载到本地wget https://raw.githubusercontent.com/xdtianyu/scripts/master/lets-encrypt/letsencrypt.conf wget https://raw.githubusercontent.com/xdtianyu/scripts/master/lets-encrypt/letsencrypt.sh chmod +x letsencrypt.sh配置文件只需要修改 DOMAINKEY DOMAINDIR DOMAINS 为你自己的信息ACCOUNT_KEY="letsencrypt-account.key" DOMAIN_KEY="example.com.key" DOMAIN_DIR=" ...继续阅读 (33)

因为最近开始在项目里面使用 es2015，所以之前代码验证gulp-lint中使用的 jslint 已经不符合要求了。于是组里的程序员鼓励师兼前端工程师小姑娘丹丹就把 jslint 替换成了 eslint。以下是她的一些记录。eslint 是为 javascript 和 jsx而生的可插拔式代码检查工具。0. eslint 的哲学1 在 eslint 中，一切都是可插拔的，规则之间相互独立2 每条规则非零为开启，零为关闭3 eslint 不倾向于任何一种代码风格，默认关闭所有设定，被捆绑的规则都是具有普遍性的1 如何使用？1.1 方法一：直接使用 eslint 的 npm 包文档参考1npm install -g eslint必须全局安装2eslint —init这个方法执行后，会问你几个问题，然后自动生成一个 .eslintrc 文件3 检测文件：eslint xxx.js1.2 方法二：使用 gulp-eslint文档参考1 装起 gulp-eslint2 在 gulpfile.js 中调用eslintvar gulp = require('gulp'),     eslint = require('gulp-eslint'); gulp.task('lint', function () {     return gulp.src(['js/**/*.js'])   ...继续阅读 (153)

SPDY的时代就一直想要折腾下，主要是被运营商劫持的太恶心了。而避免被运营商劫持的最佳方案就是部署https。SPDY还没有大规模使用，HTTP2就来了，于是就开始等nginx支持。然后最近一直被热姐BS：你怎么还没有搞https啊？这个家伙无聊的搞了个网站叫https://youqu.us，用上了免费的国产SSL证书，于是各种得瑟~~好吧，了解了下时机已经成熟，于是就开始部署。SSL证书SSL证书免费的收费的各种各样，看的头大，于是决定尝试使用Let's Encrypt的免费证书，最近很火的一些知名互联网企业包括google、mozilla、思科等联合支持的服务。昨天晚上申请，今天早上就通过了。于是按照他们的介绍来自动化部署，开始还挺顺利的，到最后域名验证不通过。。。搜索了下是因为DNS的问题，我用DNSpod的服务，然后貌似hichina、cloudxns的DNS也都会有问题，换DNS的话。。。太麻烦，放弃。既然部署https/2的目的就是防止被运营商劫持，那么买最便宜的comodo private SSL证书就够用了。安装证书什么的很简单，网上一搜一大把，就不多介绍了。Ghost本身Ghost并不需要怎么配置的，因为我是用了Nginx做代理，所以只需要Nginx去监听443端口就可以了。嗯，配置需要简单改一点，url那里加上urlssl就可以了：... product ...继续阅读 (25)

几个同事把微信里面web app的UI，按照设计规范给梳理了一遍，并将之开源了出来。主要是希望给到第三方开发者一些UI和前端编码方面的指引和参考，目前已加入以下组件：buttoncelldialogtoastarticleicon项目地址https://github.com/weui/weui手机预览：这里不多说，详细的使用方法和组件可以移步到github去了解。如果有任何疑问或者建议，可以在这里留言或者在项目中发起issues ...继续阅读 (20)

团队里的几个小伙子把微信里面web app的UI，按照设计规范给梳理了一遍，并将之开源了出来。主要是希望给到第三方开发者一些UI和前端编码方面的指引和参考。目前已加入以下组件：buttoncelldialogtoastarticleicon项目地址https://github.com/weui/weui手机预览：这里不多说，详细的使用方法和组件可以移步到github去了解。如果有任何疑问或者建议，可以在这里留言或者在项目中发起issues ...继续阅读 (36)

因为没钱付服务器年费，所以一直都是月付，然后每个月服务器商会发来短信告诉我要缴费了。但是这个月没有收到短信，然后最近忙成狗了也没有怎么看邮箱，于是就把这事儿给忘了。直到今天同事说你网站打不开了啊，上去一看，过期太久给自动删除了。影响管理员说数据真的删除了！于是就真的找不回来了，旧文章还有，把之前的wordpress重新搞了一遍ghost，然后先丢上来跑吧，内容细节过一段有空了再梳理。最近的文章从feedly找回了一部分，但是图片没有了！所以估计rss会更新，打扰大家了这样的教训每年都会有，这次总算是发生到前端观察头上了 ...继续阅读 (28)

因为没钱付服务器年费，所以一直都是月付，然后每个月服务器商会发来短信告诉我要缴费了。但是这个月没有收到短信，然后最近忙成狗了也没有怎么看邮箱，于是就把这事儿给忘了。直到今天同事说你网站打不开了啊，上去一看，过期太久给自动删除了。影响管理员说数据真的删除了！于是就真的找不回来了，旧文章还有，把之前的wordpress重新搞了一遍ghost，然后先丢上来跑吧，内容细节过一段有空了再梳理。最近的文章从feedly找回了一部分，但是图片没有了！所以估计rss会更新，打扰大家了这样的教训每年都会有，这次总算是发生到前端观察头上了 ...继续阅读 (22)

遇到一个bug，发现chrome在初始化页面的时候，会错误的渲染rem单位，导致字体过大。比如：正常的应该是这样的：原因是，为了使用rem单位，我们常常将 html 的font-size设置为62.5%，这样会比较方便计算。通常浏览器的默认字号是16px，这个是chrome的。如此算来，16*62.5%=10px，这样就很方便我们使用rem单位计算各种font-size了。所以通常现在的css reset部分会有这样的设置：html { font-size: 62.5%; /* 62.5% of 1em (16px) = 10px = 1rem*/ } body { font: 16px/1.618 Arial, Sans-serif; /* Pixel Fallback */ font-size: 1.6rem; /* Font-sizing with rem unit */ }但是问题是chrome在某个地方除了个bug，忽略了html的设置。于是在初始化页面的时候，出现了上面字体过大的情况，本来应该渲染成16px的字体，被渲染成了16*1.6=25.6px大小了。但是刷新页面之后就正常了这个bug从chrome 31版本就出现了，到现在的chrome 42，依然存在—— chromi ...继续阅读 (66)

前言：这是之前为团队微信账号写的一篇文章，同步过来。叫 Guidelines 其实有些托大了，只是站在前人的肩膀上，梳理一些移动端文字排版的简单参考。百度在 2014 年第三季度财报中表示，其移动端的流量已经超过 PC，微信中每天有超过 2 亿人阅读超过20亿次图文消息，这些都说明越来越多的人已经习惯于手机上阅读有价值的内容了。那么作为读者，你花多少时间认真阅读一篇文章？作为内容发布者，你是否对文章的阅读量和转化率感到满意呢？根据诺曼集团的用户调研，我们可以得到用户在网页上阅读时的一些行为习惯：用户平均最多只阅读一篇文章的 28%，其实通常只有 20%；17% 的读者会在 4 秒内关掉一篇文章，超过 10 分钟的只有不到 4%，说明大部分用户并没有认真读；读者阅读一篇文章的内容通常在 30 到 1250 个字之间，超过 1250 个字就很少有人能读完；人们一分钟能读 250 个字左右，但屏幕上通常是扫描式阅读，4.4 秒钟就能读 100 个字，也就是说，阅读比例大概只有 18%；读者是如此浮躁，那么我们该怎么做呢？针对用户阅读的习惯和手机屏幕的特征，我们整理出一些移动端的文章可读性指引，希望能够帮你提高文章的阅读体验，从而提高文章的阅读量和转化率：去除装饰，聚焦在内容；精简，简化标题、段落和内容，相对于印刷的内容，精简掉一半的文字；每段只表达一个观点；使用清晰的排版结构，比如：标题 ...继续阅读 (31)

常常被人问及微信中使用的X5内核的问题，其实我也不是很清楚，只知道它是基于android 4.2的webkit，版本号是webkit 534。今天正好从X5团队拿到了一份问题汇总，梳理下发出来，给各位开发者以参考——不排除明天会删除这篇文章的可能。1.Android WebView常见问题及解决方案汇总：http://blog.csdn.net/t12x3456/article/details/137697312.请问各位碰到过X5浏览器内，局部滑动使用iscroll卡顿的问题么？回答：是使用 iscroll.js 这个JS去滚动么？如果只是为了产生滚动，建议使用 overflow 属性来，目前有一种滚动优化在线上版本效率不是太好，通过JS去改变CSS的属性产生滚动3.调用：-webkit-filter: blur(10px);filter: blur(10px);在Android下 背景图没有blur掉，只是被单纯的放大而已回答：-webkit-filter目前还不支持，可以先用图片替换的方式 后续版本会支持这个属性4.shadowBlur是阴影效果吧，我们是想实现图片毛玻璃回答：http://blog.csdn.net/jia20003/article/details/9195915这个有用么5.LBS相关，定位频繁失败第一步，首先确认定位失败是个别站点原因还是所有站点定位都失 ...继续阅读 (41)

intro即使明明知道现在已经有非常多的静态博客生成器了，最近我还是造了一个轮子。一方面自己用来学习 python ，另一方面我仅用过的hexo并不能满足我的需求。因为我写文章的频率很低，所以每次我都忘了命令行命令，都要去查文档；此外，每次在命令行中新建了文章之后，在一堆文件里面找到那个新文件着实有些繁琐。stack后端虽然其实可以不用数据库的，但是为了了解一些相关的东西，我选择了轻量的sqlite。因为工作中也用到flask，再加上nodejs中的express和flask同源，所以选择了flask。more前端的编辑器是利用code mirrordropzone仿的ghost的markdown编辑器。因为不愿意写 UI，也因为yue.css确实不错，样式方面除了调整了下字体顺序，全部交给了yue.css。如你所见，甚至markdown编辑器的样式，以及各种 button 的样式我都没写。借用同事的一句话，「这是一个前端写后端，后端写前端的项目」。more名字就很俗套地用了夏天出生的Mr. Summer的名字，谢谢他和他的妈妈，连多年悲观主义者的我现在都是乐观主义者了。因为觉得可以这个项目可以作为一些新东西的试验田，所以应该会持续维护下去。目前已经有远去澳洲的马爷的两个 pr，期待更多的 pr 。项目地址：https://github.com/gaowhen/summer ...继续阅读 (26)

余果出了新书，《web全栈工程师的自我修养》，推荐一下：这不是一本关于全栈技术细节的书，主要讲的是方法论 所以即便跳出『全栈工程师』这个限制，你依然能够从中学到不少东西，嗯，还是方法论 人的成长过程其实就是自我价值的实现过程，如何实现特别是在优秀团队中实现自己的价值增长，这也是需要一些方法论 鱼与渔，你希望得到的是哪个？ 余果是当年同批进入腾讯的毕业生中，成长最快也是最『成功』的同事之一 这本书有我第一次为书籍写的推荐语 :P 不放购书链接了，各大网上书店有售～～ ...继续阅读 (50)

余果出了新书，《web全栈工程师的自我修养》，推荐一下：这不是一本关于全栈技术细节的书，主要讲的是方法论 所以即便跳出『全栈工程师』这个限制，你依然能够从中学到不少东西，嗯，还是方法论 人的成长过程其实就是自我价值的实现过程，如何实现特别是在优秀团队中实现自己的价值增长，这也是需要一些方法论 鱼与渔，你希望得到的是哪个？ 余果是当年同批进入腾讯的毕业生中，成长最快也是最『成功』的同事之一 这本书有我第一次为书籍写的推荐语 :P 不放购书链接了，各大网上书店有售～～ ...继续阅读 (17)

最近在做手机页面时，遇到数字输入的键盘的问题，之前的做法只是一刀切的使用type="tel"，不过一直觉得九宫格的电话号码键盘上的英文字母太碍事了。于是想要尝试其它的实现方案，最终的结论却令人沮丧。不过也趁机详细了解了下pattern这个属性。type="tel"和type="number"的区别这里还是先那么先交代一下最初遇到的问题。其实无论是tel还是number都不是完美的：type="tel"优点是iOS和Android的键盘表现都差不多缺点是那些字母好多余，虽然我没有强迫症但还是感觉怪怪的啊。type="number"优点是Android下实现的一个真正的数字键盘缺点一：iOS下不是九宫格键盘，输入不方便缺点二：旧版Android（包括微信所用的X5内核）在输入框后面会有超级鸡肋的小尾巴，好在Android 4.4.4以后给去掉了。不过对于缺点二，我们可以用webkit私有的伪元素给fix掉：input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }patt ...继续阅读 (27)

最近在做手机页面时，遇到数字输入的键盘的问题，之前的做法只是一刀切的使用type="tel"，不过一直觉得九宫格的电话号码键盘上的英文字母太碍事了。于是想要尝试其它的实现方案，最终的结论却令人沮丧。不过也趁机详细了解了下pattern这个属性。type="tel"和type="number"的区别这里还是先那么先交代一下最初遇到的问题。其实无论是tel还是number都不是完美的：type="tel"优点是iOS和Android的键盘表现都差不多缺点是那些字母好多余，虽然我没有强迫症但还是感觉怪怪的啊。type="number"优点是Android下实现的一个真正的数字键盘缺点一：iOS下不是九宫格键盘，输入不方便缺点二：旧版Android（包括微信所用的X5内核）在输入框后面会有超级鸡肋的小尾巴，好在Android 4.4.4以后给去掉了。不过对于缺点二，我们可以用webkit私有的伪元素给fix掉：input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }patt ...继续阅读 (10)

想象一下，当你在一个网站上递交你的简历后，你会像珐琅彩瓷一样被各个公司竞相拍卖，确定到合适的「买主」之后，专车把你送到面试的地点；入职当天，你会收到精心准备的小礼物，通过试用期后，你还会收到 3000 元的奖金奖励！程序员粘永把简历挂在网站后不久，就接到一个 HR的电话，「太快了」，不到一周，他就得到了心仪已久的公司 Strikingly 的面试机会，顺利入职。啧啧，听上去像是广告一样。但这是个真实的故事，这个网站叫100offer。在星巴克初次见面，100offer 创始人贾智凡向我介绍：我们在做这样一件事——帮中高端程序员高效地选一份更好的工作。「4万名程序员，2600家互联网公司，参加拍卖的程序员90%至少拿到一个offer，平均每人可收到12个靠谱面试机会。」这是100offer 上线8个月交出的成绩，不久前他们拿到了2000万人民币A轮融资。牛人用「拍卖方式」来选工作，有什么合理性？相比于迷茫又急于找到工作的应届生，进入职场多年的中高端人才的选择则非常慎重——有着明确的薪资提升与发展空间的需求，所以猎头和朋友推荐是过去的常用途径。然而凭借猎头和人脉圈，提供的选择机会终究是有限的，中高端人才找工作很容易，但「选」到满意的工作实属不易。「拍卖」，则提供了独特的价值：一次申请，匿名挑选2600家公司，总有很多猎头和人脉圈无法触及的「惊喜」机会；与此同时相比于「广告密集、色彩缤纷 ...继续阅读 (11)

余果出了新书，《web全栈工程师的自我修养》，推荐一下：这不是一本关于全栈技术细节的书，主要讲的是方法论所以即便跳出『全栈工程师』这个限制，你依然能够从中学到不少东西，嗯，还是方法论人的成长过程其实就是自我价值的实现过程，如何实现特别是在优秀团队中实现自己的价值增长，这也是需要一些方法论鱼与渔，你希望得到的是哪个？余果是当年同批进入腾讯的毕业生中，成长最快也是最『成功』的同事之一这本书有我第一次为书籍写的推荐语 :P不放购书链接了，各大网上书店有售～～ ...继续阅读 (13)

最近遇到微信图文消息被联通劫持的事情，着实被震惊到了。但其实平时也有用户反馈中国移动劫持的事情，从反馈的量来说，在手机端，联通和移动劫持的最多，在PC端劫持最疯狂的电信，在手机端倒是『安分』好多。具体是怎么劫持的呢？为了防止被劫持，微信给图文消息全量了https——图文消息都是内容类的，所以这里也没必要给一个『保护用户隐私安全』的理由。iOS中safari/webview允许https执行http的资源，比如js。而chrome会将此类资源block掉。运营商劫持了非https页面的某个js，这个js的角色是公用组件，在https页面中也有用到。于是https的页面也变相被劫持了！解决方案：全网https全网https全网https嗯，其实可以顺便部署http/2的，一步到位了。https虽然不是绝对安全，但运营商要想劫持也不是这么简单的事情，但为了防止劫持而花大力气去部署https，可能不少人觉得不值吧，但牵涉到『用户体验』和『用户隐私保护』，我认为做任何事情都是值得的。另外，其实发现现在运营商花了大力气来搞劫持，不过只是推送你的流量套餐信息，竟然不是强插广告！太TM用心良苦了！ ...继续阅读 (32)

最近遇到微信图文消息被联通劫持的事情，着实被震惊到了。但其实平时也有用户反馈中国移动劫持的事情，从反馈的量来说，在手机端，联通和移动劫持的最多，在PC端劫持最疯狂的电信，在手机端倒是『安分』好多。具体是怎么劫持的呢？为了防止被劫持，微信给图文消息全量了https——图文消息都是内容类的，所以这里也没必要给一个『保护用户隐私安全』的理由。iOS中safari/webview允许https执行http的资源，比如js。而chrome会将此类资源block掉。运营商劫持了非https页面的某个js，这个js的角色是公用组件，在https页面中也有用到。于是https的页面也变相被劫持了！解决方案：全网https全网https全网https嗯，其实可以顺便部署http/2的，一步到位了。https虽然不是绝对安全，但运营商要想劫持也不是这么简单的事情，但为了防止劫持而花大力气去部署https，可能不少人觉得不值吧，但牵涉到『用户体验』和『用户隐私保护』，我认为做任何事情都是值得的。另外，其实发现现在运营商花了大力气来搞劫持，不过只是推送你的流量套餐信息，竟然不是强插广告！太TM用心良苦了！ ...继续阅读 (28)

最近遇到微信图文消息被联通劫持的事情，着实被震惊到了。但其实平时也有用户反馈中国移动劫持的事情，从反馈的量来说，在手机端，联通和移动劫持的最多，在PC端劫持最疯狂的电信，在手机端倒是『安分』好多。具体是怎么劫持的呢？为了防止被劫持，微信给图文消息全量了https——图文消息都是内容类的，所以这里也没必要给一个『保护用户隐私安全』的理由。iOS中safari/webview允许https执行http的资源，比如js。而chrome会将此类资源block掉。运营商劫持了非https页面的某个js，这个js的角色是公用组件，在https页面中也有用到。于是https的页面也变相被劫持了！解决方案：全网https全网https全网https嗯，其实可以顺便部署http/2的，一步到位了。https虽然不是绝对安全，但运营商要想劫持也不是这么简单的事情，但为了防止劫持而花大力气去部署https，可能不少人觉得不值吧，但牵涉到『用户体验』和『用户隐私保护』，我认为做任何事情都是值得的。另外，其实发现现在运营商花了大力气来搞劫持，不过只是推送你的流量套餐信息，竟然不是强插广告！太TM用心良苦了！ ...继续阅读 (42)

这里我们收集了一些超酷的基于SVG的动画效果，给大家一些参考。这些动画有的使用了SVG动画，也有是使用CSS做基本动画，用JS做更丰富的效果。Border AnimationbySean McCaffery纯CSS，文字边框环绕，hover时触发。Elastic SVG SidebarbyNikolay Talanov侧边栏拉出时的弹性效果。用于材料设计『Material Design』的应用的概念设计。Pull Down to RefreshbyNikolay Talanov一个下拉刷新效果。Animated Gradient on TextbyPatrick Young渐变文字的动画效果。Heart AnimationbyNikolay Talanov变换用CSS实现，嗯，一个心形的实现过程动画。Let’s Travelbyjjperezaguinaga一个描述城市和旅游目的地的动画。部分使用CSS动画完成。Menu toggle animationbyTamino Martinius一个汉堡包图标的变形动画Animated InfographicbySdrasSarah Drasner做的一个牛逼动画，基于GSAP timeline。Rain-Bros don’t like JSbycihadturhanClockbyMohamad Mohebifar ...继续阅读 (43)

intro即使明明知道现在已经有非常多的静态博客生成器了，最近我还是造了一个轮子。一方面自己用来学习 python ，另一方面我仅用过的hexo并不能满足我的需求。因为我写文章的频率很低，所以每次我都忘了命令行命令，都要去查文档；此外，每次在命令行中新建了文章之后，在一堆文件里面找到那个新文件着实有些繁琐。stack后端虽然其实可以不用数据库的，但是为了了解一些相关的东西，我选择了轻量的sqlite。因为工作中也用到flask，再加上nodejs中的express和flask同源，所以选择了flask。more前端的编辑器是利用code mirrordropzone仿的ghost的markdown编辑器。因为不愿意写 UI，也因为yue.css确实不错，样式方面除了调整了下字体顺序，全部交给了yue.css。如你所见，甚至markdown编辑器的样式，以及各种 button 的样式我都没写。借用同事的一句话，「这是一个前端写后端，后端写前端的项目」。more名字就很俗套地用了夏天出生的Mr. Summer的名字，谢谢他和他的妈妈，连多年悲观主义者的我现在都是乐观主义者了。因为觉得可以这个项目可以作为一些新东西的试验田，所以应该会持续维护下去。目前已经有远去澳洲的马爷的两个 pr，期待更多的 pr 。项目地址：https://github.com/gaowhen/summerLive ...继续阅读 (22)

微软表示新版的浏览器Edge(spartan)不会再增加新的私有属性，同时移除了部分-ms-属性，但很多标准在没有支持到之前，会使用webkit的api。Edge开发工程师Jacob Rossi列出了一份Edge所支持的webkit api列表。图片来源CSS CorewebkitBackgroundwebkitBackgroundAttachmentwebkitBackgroundClipwebkitBackgroundColorwebkitBackgroundImagewebkitBackgroundOriginwebkitBackgroundPositionwebkitBackgroundPositionXwebkitBackgroundPositionYwebkitBackgroundRepeatwebkitBackgroundSizewebkitBorderBottomLeftRadiuswebkitBorderBottomRightRadiuswebkitBorderImagewebkitBorderImageOutsetwebkitBorderImageRepeatwebkitBorderImageSlicewebkitBorderImageSourcewebkitBorderImageWidthwebkitBorderRadiuswebkitBorderTopLef ...继续阅读 (66)