1. overflow scroll的问题，

这次我想做一个手机端上方导航的滚动条。我便定义了个固定宽度的容器，然后设置了一个overflow-x:scroll的属性。

后来这个滚动条仔安卓手机上是完全没问题的，但是iOS上是有问题的。

搜索了一下stackoverflow的帖子，上面说iOS上的safari是没有滚动条的，所以 scroll是没用的，会无法滚动，用了auto便可以了。

这一点就让我非常疑惑，像mdn这样的文档里肯定会说，overflow里面的不同属性是干什么的，但是像浏览器中不一样的细节真是让人叫苦，因为用iOS Safari的设备十分多，也不会有本书或者官方的参考告诉大家 overflow scroll这个属性其实是没用的。这也是书上不足的地方，一定要实践才会走过的弯路

2. 用js取css，css中的字符串会被safari处理

我在网页中做了一个lightbox的组件。当点击画面中的一些容器，会展示一张图的原图。

原容器中写了这样的css

background-image: url(“path/to/image”);

为了格式统一，我都设定了url的括号中有引号

lightbox本身只有一个容器，里面有个img标签，当点击画面中容器后，显示lightbox并且把img标签的src置为path/to/image

所以我就找到这个元素用jquery想取出url，用正则表达式取里面的内容。

var matchobj = $el.css(“background-image”).match(/^url\(\”(.*)\”\)$/);

var matchurl = matchobj[1];

在chrome浏览器中这样写是没问题的，但是在safari浏览器中会报错，无法取一个null对象的下标为1的内容。

我alert了一下$el.css(“background-image”)，才发现在Safari 浏览器中渲染时，字符串被修改了。得出的字符串是url(path/to/image)，引号被删除了。

虽然修改正则表达式也能解决，但我觉得用正则来match css中的字符串不是一个好方式，所以就新定义了个属性，data-lightbox=”path/to/url”，在js中通过attr去取，这样可以避免字符串进行处理的问题，而且应该更加快速一点。

计划既然定了，就应该更认真地面对，这次与神秘友人一起制定的计划，双方互相知道互相监督，会更有一些羞耻心和好胜心，所以我会时常地更新周报，刷新一下自己计划完成的进展。

首先第一部分，讲讲自己的职业生涯。

这周也是中规中矩地在做一些需求，稍微熟悉了一下backbone做单页应用的方式，虽然完成了需求，但还是让我们的组长先写了boilerplate，一开始有一个坑，用nodejs把backbone的代码require进来是比较复杂的，总会有一个错误信息，主要原因就是backbone.$ i not a function，最后还是查了stackoverflow有个帖子，说了还需要依赖一个backbone jquery之类的库，后来觉得太庞大了，就直接靠script标签在html文档里直接引入了。

对于一些框架，我目前都是知其然而不知其所以然，比如对比不同框架的优劣，能做到的事情都很难判断。遇到问题自己解决的能力还比较差，在之后的工作中还是要想办法解决这些问题，提升一点独立解决问题的能力。

另外说一句：啊，独立项目我好想做一个消除游戏啊

然后讲讲自己的素养养成计划。

这周读了一本书《呼兰河传》里面讲了清民国时期的小镇的生活，讲述了封建时代农村人民的质朴，也描绘了一些由于封建迷信造成的惨剧，总的来说，是一部还不错的书。但是呢，我会觉得这样的书并不会给我留下太多的东西，可能我还是以一种较为功利的心态去阅读的吧，总想着看一部什么书之后我能增长些什么知识，学会一些人生的经验，所以我可能也不会特意看一本书，就去写关于这本书的一些东西。不过我觉得也可以慢慢地品味文学本身，来消磨一些时光，顺便也想想如何在写作中学会使用一些文学的技巧。

生活小品也是创作了一期，画工并没有什么进步，目前画得比较粗糙也比较慢，觉得可以做下一期前看一些教程先决定一下作画的方法。创意上我自认为还不错，当我完成足够多的生活小品后，我能不能给自己办个小展览呢？找出一个最喜欢的作品做成家里的挂画。

第三，靠谱度～

本周运动的目标勉强达到了，感觉还不错，有长时间的走路，也有两次比平时更加长的游泳锻炼，可以多多训练。

拒绝邋遢，卫生状况的话，屋子还算没有太乱，及格分吧。

猴年已过，迎来了鸡年。没有太多的过年气氛，从初一开始后就几乎没怎么沉醉于过年，只是把过年当作是一个普通的假日。我的这一年觉得过得特别开心，迈出了很多第一步，脚步有些颤有些不稳，但我觉得还是迈向着一个不错的轨道。

过年时与一个特别的友人聊天，友人说想要定一个新年计划，我是一个跟风狗，不太爱计划什么，但是看到别人定个计划，总觉得自己也不想输，也要屁颠屁颠地定个计划，并与友人之间下一个赌注，互相监督。在此我想要把我的计划列在这里，让友人和读者（可能并没有）见证一下。如果完不成，可以针对未完成的项目进行惩罚：如 体罚 打扫卫生 做饭 写应用 写网站 暖床等等（具体还没有太多想好）。

我决定我的计划从三个不同的方面开始：

第一个方面是提升我在职业生涯上的水平，2016年我才刚刚转身，现在觉得还有特别多自己认为不靠谱的地方，觉得自己做的工作呢，可能也是很容易被替代的，让我自己觉得有些羞愧。

第二个方面是让自己成为更酷的人，追寻一点人生爱好，2016年我正在渐渐地从不酷的人渐渐脱出，开始成为自己，看出了一些可喜的征兆，当然一切都还不够。

第三个方面是提升自己的靠谱程度，从各种方面吧，今年准备做点小小的努力。

以下就是我的计划的markdown：

# 计划
> 愿这个计划能指引我们的生活，使我们成为更好的人。

## 职业身涯
—
– 工作 deadline: 鸡年年末
– [ ] 主导hold住一个项目 or 合作hold住两个以上项目
– [ ] 让自己有脸吹一年的效率改进

—

– 文档教程类 deadline: 3月31日
– [ ] nodejs官方文档
– [ ] react官方文档

—

– 维护2个项目 deadline: 半年一个
– [ ] 一个实用项目
– [ ] 一个娱乐项目

## 成为更酷的人
—
– 数位板创作
– [ ] 日常小品 0/30
– [ ] 挑战目标: 一个系列漫画
—
– 读书
– [ ] 有趣的书 读下来分享 0/20
—
– 博客
– [ ] 双周发 0/25
—
– 配音或者电台节目
– [ ] 挑战：0/1

## 可靠！
—
– 学车 deadline: 年末
– [ ] 学车

—
– 健身 deadline: 年末
– [ ] 保证每周进行2次40分钟以上的健身 0/100

—
– 拒绝邋遢
– [ ] 整理好屋子，每周按时清扫

同时，友人想要早睡早起，我也跟着风地早睡早起了。。。算是我的一个附加任务吧，加了个油。我要每周update在博客上。友人看到请留言共勉，谢谢。

0x00 引入视频

我们的客户经常会问我们需要加视频，之前并没有用html5做过视频的内容，所以练习了那么一下下。具体的文档呢，可以通过mdn查看。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

html5中的视频，可以通过一个video 标签来引入

<video  src="your_video_url" preload="" autoplay="autoplay" loop="loop" controls="controls"></video>

用这个引入视频后，在电脑上比较正常的浏览器，只要不是上古时代的，基本都可以播放。

并且根据属性填写，

autoplay支持自动播放

loop支持循环播放

controls表示支持下方出现panel可以控制视频播放暂停空降。

0x01 查看效果

电脑上不出所料的是好的。

在安卓的微信上出现了一个蛋疼的问题，视频的z-index永远是最高的，会遮盖住webapp中的工具栏，无论如何调整dom中元素的z-index，都没用，永远在最上。

去查了下腾讯官方的信息

而且腾讯在上面的独立播放器中也会加入一些私货。。。播放器也会推腾讯自己的广告。。。

还有一个比较普遍的问题是video标签中设置成autoplay时，在手机端不会自动播放，当然这点很正常，可以防止手机上偷跑流量。

0x03 解决方式

安卓的微信上浏览器只能用play函数控制播放，这样会打开一个全屏的播放器。所以在微信端可以判断一下隐藏video标签，显示一个视频的缩略图。点击缩略图调用这个play函数就可以了。千万不能都显示。

http://faconparfums.heidianer.com/products/TIGEDELUMIRE/

可以参考以上的页面，代码可以如下

if (isWeixin()) {
 } else {
 $(".video-wrapper").removeClass('small--hidden');
 $(".img").addClass('small--hidden');
 }
 $(".img, img").on('click', function(){$("video")[0].play();});

公司的产品是一个建站工具，可以用它搭建电商网站，自然建站工具里面会出现很多的表单。我们都知道表单验证后，一般来说输入要校验，输出要编码，来维持数据的合法性。

现在我们的产品会读取用户的输入，将其作为一个javascript的字符串的变量的一部分，例如我们的代码中就会出现这样的代码段：

<script>
var data = "userinput";
</script>


其中userinput是一个用户输入的字符串，初想觉得只要将字符串得到合适的转义，例如”转为\”，直接将用户输入转为一个字符串即可。

• 问题现象

然而，发生了意外，当我输入一些字符串进去时发现页面异常了，控制台也报出了很多错误。排查原因，发现是因为字符串中有</script>。可以输入载荷</script><script>alert(1);</script>造成页面存储型xss。

到如今，这个问题已经和转不转义没有关系了，甚至和javascript也关系不大，而在于浏览器的html引擎在读取到字符串中的</script>，直接闭合了script标签，没有继续读下去将其作为一个字符串。

• </script>为什么那么特殊？

初看觉得不可思议，但是仔细想想是非常合理的，浏览器读取了一串html，会要将已知的javascript代码读取出来用javascript引擎做处理，就要提取所有script标签，因此</script>标签解析的优先级非常高，根本等不到javascript引擎去分析整个字符串。

• 解决方法

有趣的是，这问题只出现于html中，所以我们用script标签引用外部文件时，不会出现问题，字符串中可以包含有 </script>这样的字符串。

但我们需要动态地写字符串在这个html中，所以不能引用外部文件。最终我们选择的方案是将用户输入先做一层base64编码，然后在script标签中执行base64解码函数，还原出用户输入字符串，这样就可以避免硬写包含</script>字符串，但字符串的值又可以含有</script>不会使标签内容被截断。

还有一个坑就是，不要转成JSON字符串，出现中文有可能出现不支持的情况，不要问我怎么知道的。

今天我决定来讲讲一些具体的问题。上班到了第二个月，感觉工作压力和强度也不算很大，但是遇到了很多“名为经验”的小知识和小习惯。

今天讲的故事是这样的，我现在有一个页面，想做一个渐渐浮现起来的全局菜单，

• 菜单浮现前的css属性为


z-index: -1;
overflow:scroll; //因为菜单可能内容会多，这样可以滚屏下去找
opacity: 0;


• 点击菜单按钮后，更新的css属性为


z-index: 999;//一个很高的值，覆盖所有
opacity: 1; //可以添加个transition，有种渐渐浮现的效果。


• html结构大致是这样


<div class="menu"></div>
<div class="main"></div>


问题来了，突然发现，在android上一切正常，而在iOS上出现了页面无法滚动的问题，或者觉得滚得很不顺。（我没有iPhone。。。别人发现的）

我探索了好久才发现可能跟菜单有关系，因为我先滑动一下屏幕，页面没有动静，但是点开菜单，里面的内容却是已经滑动过的了。

后来将点击按钮前的菜单的overflow属性先设置成hidden，等到浮现后才打开scroll，果然没有了这个问题。

出现这个问题是因为我想当然以为scroll这个动作会在鼠标区域中的z-index最高的部分先进行，结果iOS中可能是从文档顺序较前或者较高的位置进行触发的，所以先触发了z-index较低位置的事件。

所以除了z-index和滚动需要警惕之外，还有一点是，最好就是尽就避免用z-index做这个效果，不出现的内容就把高度宽度降到0，这样就算是overflow:scroll的一个元素，鼠标或者接触点发生scroll的位置根本不会影响到这个元素。

上述的问题真实存在，原因纯属猜测，没有经过仔细求证，敬请指正。

说实话，当初想转行当前端工程师，主要是受到了点朋友圈某技术网红的影响，也想改变点技术男比较不通人情，对于艺术感一无所知的印象。在这个时代，包装自己、为自己创建一个个人品牌、让人觉得自己是有趣的人是一件至关重要的事情。

来到了新公司一个多月，感觉很新鲜，老板比较逗什么都要吐槽；CTO做事感觉极端靠谱；也有几个极客个性鲜明；妹子们很漂亮也很有才气。值得一提的是，我们这个组织是一个热爱分享、热爱趣味的组织，似乎CTO就是一个博客爱好者，很多人也有着自己的微信公众号。越来越觉得，如何表达，和如何写作的重要性——它能让一个人变酷。

这个月来的工作，感觉能给自己打个及格分，我是公司唯一一个交大毕业的，感觉自己对于这份工作来说是合格的，但没有配得上一个交大人应有的水准，这一直困扰着我。希望一年后我能够成为一个独当一面的工程师，拥有着自己创建一个美好的产品的能力，对于现在css还是没太玩熟的我挑战也很大，希望我的出力能使公司走得更远些。

一直觉得自己还是没有达到预期，还有不断拖延的毛病，好在我换工作这件事今年是正常进行了，变成有趣、酷的人这件事还是需要加紧。啊，谁来救救我文章的水准啊。。。怎么形成品牌啊摔！

很久没有更新博客了，我的转职计划终于迎来了曙光，在原来的岗位混了2个月后领导终于放走了我，告别了自己过去3年失败的职业生涯，换了个方向，重新开始。我选择去做前端工程师，可能是觉得可以将工程和艺术联系在一起，提高自己的审美。之前自己只做toy project，现在发现有一个屏幕太小还没发用，哈哈哈，给大家看看另一个没想到你是这样的月饼

最近因为闲散的时间，书也是读了不少。看了点css和js的基础书，也看了一些闲书。

过了些时间，以前面试遇到的有些问题也领悟了该怎么做：比如上述的那个toy project，设计图的按钮是一个正方形大小的圆角矩形图片（带有特殊的阴影不能直接使用css），拉长了，就成了椭圆形。然后当时我就用ps重新做了图＝ ＝但是发现css的背景图片有划分9宫格的功能borderimage-slice可以用作统一按钮风格。

看闲书真是看了不少，估计今年也是我一个阅读的高峰了，毕竟在公司已经闲了很长一段时间了，每天读读书听听音乐。我比较喜欢纸质书，翻起来有书的感觉，还可以肆意地用笔在旁边写点东西。电子书，总有种看不下去的感觉。然后我还养成了买书不一定读的习惯，现在还有二十多本存货，哈哈哈。品味上，我各种书都挺喜欢，但是最好能简短一点，更喜欢理性、科技一点的书；有些书比如讲心理的社科类图书，描述比较让人困，我就不是太喜欢。

突然觉得以前浪费了很多时间，可能一年也看不了几本书，时间或许都在微博上耗费了，25岁才开始职业生涯，或许也有点晚，已经不是一个能成为“天才少年”的年纪。也希望自己以后能抓紧时间，变得更有趣，尝试到更多的东西，成为更好的人吧。