Sun

现象 -------------------- 在某些浏览器上(具体有哪些未做全面测试), 页面会出现一个 "!" 符合, 然后又消失了. 重现这个 bug 的手机为: **iPhone 6 Plus iOS 8.3** 浏览器的 UA 信息为: **Mozilla/5.0 (iPhone; CPU iPhone OS 8_3 like Mac OS X) AppleWebKit/600.1.4 (KHTML,...

NodeJS 写的 csv 文件 Excel 打开是乱码

3

在使用 Node.js 写一个包含中文内容的 csv 文件时, 用 UltraEdit 打开是正常的, 没有乱码. 但使用 Microsoft Excel 打开时, 就是一坨乱码.  真是郁闷, 肯定是掉坑里面了, 让我们查查资料看看, 想必碰到这个问题的人不止我一个. - [NodeJS CSV导出文件名和内容乱码解决](http://imziv.com/blog/article/read.htm?id=55) > ``` javascript > // 解决excel打开内容乱码 > var...

## 大致步骤 * 需求: 确定要找什么 * 初筛: "大海捞针"初筛出一批主流的 * 权衡: 从多个方面来权衡可靠性 * 对比: 根据实际情况做对比, 选出最合适的一个做为首选 ## 详细步骤 * 以功能(需要解决的问题)来确定要寻找的开源库的关键词 * 最关键问题是弄清楚你要找什么, 关键词有哪些, 例如: qrcode * 以关键词作为搜索词, 筛选出一批开源库, 确定主流的开源库有哪些, 看看别人都在用什么 *...

获取微信头像的 base64 数据

1

## 应用场景 * 前端生成一张图片, 一般是基于页面的内容(DOM)生成一张用于分享的海报形式的图片(例如通过 `html2canvas`) * 特殊在于分享的图片要包含微信用户的头像(图片位于 `thirdwx.qlogo.cn` 域名, 没有转存到自己的域名下) * 微信用户的头像图片相当于页面是**跨域**的 ## 原理 想要获取图片的 `base64` 数据, 我们大概都知道, 需要将图片绘制到 `canvas` 上, 再通过 `toDataURL` 方法拿到 `DataURL` 数据, 即 `base64` 的图片数据...

视频直播的技术原理和实现思路方案整理

4

包括原理篇/思路篇/实践篇/方案篇/前端篇/总结 ## 原理篇 * [何李石：七牛直播云服务技术详解](http://blog.qiniu.com/archives/6186) > **直播模型及其实现** > > 一个通用的直播模型一般包括三个模块：主播方、服务器端和播放端。 > >  > > 首先是主播方，它是产生视频流的源头，由一系列流程组成：第一，通过一定的设备来采集数据；第二，将采集的这些视频进行一系列的处理，比如水印、美颜和特效滤镜等处理；第三，将处理后的结果视频编码压缩成可观看可传输的视频流；第四，分发推流，即将压缩后的视频流通过网络通道传输出去。 > > 其次是播放端，播放端功能有两个层面，第一个层面是关键性的需求；另一层面是业务层面的。先看第一个层面，它涉及到一些非常关键的指标，比如秒开，在很多场景当中都有这样的要求，然后是对于一些重要内容的版权保护。为了达到更好的效果，我们还需要配合服务端做智能解析，这在某些场景下也是关键性需求。再来看第二个层面也即业务层面的功能，对于一个社交直播产品来说，在播放端，观众希望能够实时的看到主播端推过来的视频流，并且和主播以及其他观众产生一定的互动，因此它可能包含一些像点赞、聊天和弹幕这样的功能，以及礼物这样更高级的道具。 > > 直播服务器端提供的最核心功能是收集主播端的视频推流，并将其放大后推送给所有观众端。除了这个核心功能，还有很多运营级别的诉求，比如鉴权认证，视频连线和实时转码，自动鉴黄，多屏合一，以及云端录制存储等功能。另外，对于一个主播端推出的视频流，中间需要经过一些环节才能到达播放端，因此对中间环节的质量进行监控，以及根据这些监控来进行智能调度，也是非常重要的诉求。 > > 实际上无论是主播端还是播放端，他们的诉求都不会仅仅是拍摄视频和播放视频这么简单。在这个核心诉求被满足之后，还有很多关键诉求需要被满足。比如，对于一个消费级的直播产品来说，除了这三大模块之外，还需要实现一个业务服务端来进行推流和播放控制，以及所有用户状态的维持。如此，就构成了一个消费级可用的直播产品。 ## 思路篇 * [从0到1打造直播 App](http://mp.weixin.qq.com/s?__biz=MzA3NTYzODYzMg==&mid=2653578065&idx=1&sn=1da088b11c797d2be7b5f7afb8f056bb&chksm=84b3b156b3c438401715dc40f7791010b11050983a67fa533a4b559cb67ea6d0ce1996970481&scene=4#wechat_redirect)...

移动端页面的调试技巧

3

Q: 如果在移动端(APP)中发现一个页面有问题, 我们该如何定位问题呢? A: [Fiddler](https://www.telerik.com/fiddler)(抓包) + [weinre](http://people.apache.org/~pmuellr/weinre/docs/latest/ "remote debugger")(调试 CSS 样式) + [vConsole](https://github.com/Tencent/vConsole)(调试 JS 逻辑) A: [Mobile Debug](https://www.mobiledebug.com/) 一站式解决你的所有移动端远程调试烦恼(代理抓包/请求劫持/网页调试) ## 调试要点 * 替换线上文件为本地文件 * 使用 Fiddler 抓取 APP 中的 HTTP(S)...

iOS 上传拍照图片由于有方向性, 会造成显示时图片的方向不对, 需要旋转一下 前端解决这个问题的思路 * 读取图片的 EXIF 信息(图片的元数据), 获取到方向 * 根据方向对图片进行旋转 具体的实现库 * [Exif.js](https://github.com/exif-js/exif-js "reading EXIF meta data from image files") * [exif2css](https://github.com/Sobesednik/exif2css "Convert exif orientation to CSS transform")...

班会第 1 期

9

今天, 我们的学前班成立了. 各位学前班的同学们, 很高兴能和大家一起聊聊前端, 聊聊技术, 聊聊产品. 我们的班会时间定为: **每周五下午(16:00 - 16:30)**, 欢迎大家踊跃分享发表意(tu)见(cao). ---- - 技术 - [2015前端生态发展回顾](https://github.com/kuitos/kuitos.github.io/issues/32) - [致我们终将组件化的Web](http://www.alloyteam.com/2015/11/we-will-be-componentized-web-long-text/) - [前端Talk月刊 ](https://github.com/icepy/_posts/labels/%E5%89%8D%E7%AB%AFTalk%E6%9C%88%E5%88%8A) - [微信 Web App 开发最佳实践@FEDAY](http://feday.fequan.com/%E5%BE%AE%E4%BF%A1%20Web%20App%20%E5%BC%80%E5%8F%91%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5-%E6%B1%9F%E5%89%91%E9%94%8B.pdf) - [像 Sublime Text...

班会第 2 期

2

- 技术 - [AngularJS中scope基于原型链的继承](http://pinkyjie.com/2015/02/07/prototypal-inheritance-of-scope-in-angularjs/) > A "child scope" (prototypically) inherits properties from its parent scope. - [用$scope还是用controller as](http://pinkyjie.com/2015/02/09/controller-as-vs-scope/) - [抛开 React 学习 React](http://qianduan.guru/2016/03/27/Learning-React-Without-Using-React-Part1/) > * 更新整个应用的 state > * 更新...

班会第 60 期

2

* 技术 - [iphone - :active pseudo-class doesn't work in mobile safari](http://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari) > iOS 上 CSS 的 `:active` 样式没有效果, 可以简单地在 body 上做一个空的 touchstart 事件监听, 例如: `` > > 或者使用 [FastClick](https://github.com/ftlabs/fastclick)...