怪异空格引发的血案
在整理博客的过程中发现博客内有部分地方没有对齐。于是赶紧打开devtool看下。结果发现了神秘而怪异的现象。明明没有打空格的地方,却出现了实体 真的是着了魔般,怎么都干不掉。
第一反应是css出了问题,于是打开devtool试着调试css。结果,怎么搞都没办法。仔细去看HTML,发现出现了两个 。
可是我很清楚,这地方源码里面没有空格啊。于是想到自己的网页是经过ob content输出的,是不是php处理上出了什么问题,然后去翻开插件看,可是怎么读代码,都觉得应该不是这个问题。
于是又去看下网页源代码,怪异的事情发生了,明明网页源代码里面没有 啊。
难道是\t的问题?于是把源码中的这个地方删掉重新换行,结果,仍然还是这个问题。直到我开启了vscode的空格显示功能,才发现了异样。
你仔细看<img>前面的空格,发现这两个空格的宽度感觉很奇怪。于是删掉,自己打了两个空格,问题解决了。
正常的空格[ ],奇怪的空格[ ],请查看源码和在devtool中查看。
原来这两个空格是全角空格,也就是中文格式下的特殊字符。但是,这个空格在键盘上是打不出来的,要通过特殊的输入方式才能打出来,这是怎么产生的呢?我不可能写代码的时候,还这样去特意打两个全角空格吧。最后,看来是在不同的系统切换,不同的环境下,切换编辑时,留下的问题。
一个可能摧毁微信的二维码
今天群里红了一个二维码,扫这个二维码之后,手机就会出现自动重启的极端情况。经过测试,只有iphone上的微信会出现这样的问题,而安卓微信则幸免于难。
瞬间这个二维码就在朋友圈儿红了,比如有人说这是个体验新产品的入口啦,有人说这是个幸运的抽奖啦,有人说这是个领红包的口令啦,等等,于是就开始有人试了,从此,两人恩断义绝,再无瓜葛……
作为有志向的程序员,当然要一探究竟了。先解码二维码,然后去看对应网页的源代码,于是呼撸,原来就是非常简单的嵌套黑洞。点击这里可以看源码的真正出处,放心,点进去没影响。
这是苹果给自己挖的坑。iOS用的网页排版引擎WebKit有个弱点,而这个引擎是苹果要求,所有app所有浏览器必须用的。只要在CSS的Backdrop-filter里嵌入大量元素,比如<div>标签,就可以耗尽设备的所有资源,造成内核错误(Kernel Panic) 。后果就是,关闭操作系统并重启,以避免设备受到伤害。只要在iOS上渲染了HTML,这15行代码就有效。
看完源代码,你懂了吗?
ng-scroll
angular没有自带ng-scroll,只能自己写个directive来代替:
module.exports = ['$parse', ($parse) => { 'ngInject' return { restrict: 'A', link: (scope, element, attrs) => { element.on('scroll', () => { let scripts = attrs.ngScroll let parse = $parse(scripts) parse(scope) scope.$apply() }) } } }]
之前在谈体验的时候,更喜欢react,因为它更接近元编程,而vue则是在follow一套规则的前提下,像摆弄器件一样去组装出一个东西。但是经过一年多回头来看,虽然react更多体现在思想层面的先进,但在快速实现应用的需求中,vue更胜一筹。如果现在让我去选择,我会毫不犹豫的马上拿起vue开始撸,虽然让我写react也完全没问题。
顺带吐槽,苹果自带的中文输入法,联想能力真的弱到爆炸,错别字一堆一堆的!!
给博客改了字体,在mac上显示瘦瘦的,怎么说呢,其实现在这个字体也挺不怎么合我之意,有点太细了,不稳重。但是默认的字体实在是有点不能接受,要是有特别是中文字体,挺难求的,而且还要免费,也是……
前端录制麦克风音频
在前端去录制麦克风音频,听起来好简单啊,但是后来发现是个大坑。这个问题要分解:
- 麦克风
- 音频
- 录制
获取麦克风输入比较简单,用webrtc的接口getUserMedia就可以实现了,但是怎么录制?getUserMedia得到的是stream,stream不是buffer,也不分chunks,所以你想要把stream转换为buffer,没办法,必须还得靠高级api。MediaRecorder本来可以用,但是safari不兼容,内心MMP。录制视频用canvas一帧一帧保存起来就行了,但是录制音频……最后找来找去,AudioContext这个api可以用,但是safari只有在11.2版本之后才支持webkitAudioContext,所以,只有用这货才能实现。
总结,在支持MediaRecorder的系统中使用MediaRecorder录制,在iOS中,最多兼容到使用webkitAudioContext去实现,有一个包可以用,就是audio-recorder-polyfill,想法真不错,赞一个。
比如我明明正常输入的一句话,在某些 Windows 下会看到句子里出现类似+号的奇怪字符。
自己的Win 8.1 和 公司的 Win 10下会看到,但有的读者说他们并没有看到,所以也不知道是什么机制了。
我是今天休假了,要对自己好一点,哈哈哈