我与 SF 五周年活动页的那点事儿
前言
好久没有写博客了,其实有很多收获都值得写一写,今天就先从5周年活动页面开始吧
活动页面地址:https://segmentfault.com/five-years
现在弹幕只能看不能发,因为是一个时效性很强的活动,发弹幕的功能在上线一周后就关闭了。
复盘
先简单总结一下,这次需求提的比较晚,又赶上端午节,为了能准时上线,所以端午休假的最后一天在家工作了大概半天的时间,然后5月31号又搞了一天,终于赶在5月31号晚上胜利上线了,因为上线比较匆忙,也在一些地方出了问题,从中暴露出的一些问题很值得自己注意。
几个要点
作为一个临时活动页面,这个页面和 SF 的主站是剥离开的,所以主站的各种『基础建筑』比如转化 ES6 的 bebal、全局的安全性设计之类的都不能借用,在开发上要有所注意。
活动页需要弹幕功能,时间上已经不允许自己开发一套了,所以随便在 Github 上找了个库:https://github.com/chiruom/jquery.danmu.js,用的时候察觉到在设置弹幕循环方面有个 bug,也顺手改掉了。
在样式方面,花了个来回拐弯的时间轴,想到的实现方法是多话几个 div
,然后用 border-top-right-radius
这样的属性来设置拐角,稍微计算一下就行了。
值得写一下的东西
这个需求写完后,有些小东西值得稍加记录
- 一个属性
pointer-event:none;
当取值为 none 的时候,一方面自身的鼠标事件不会生效,另一方面因为被该元素遮挡住而不能生效的鼠标事件就能继续生效。
之前比较少用到这个属性,这次才接触到,挺好玩的。
- 安全问题
说来惭愧,作为技术类网站的开发者,对于安全性问题没有警惕起来却是很丢人。因为主站有全局的安全策略,所以在开发活动页的时候下意识忽视了防御 XSS 攻击等问题,反思一下,前端防御 XSS 攻击可能不是最合适的,但是对于该学习的知识还是不能忽略的。
名人名言学习:我向来是不惮以最坏的恶意来推测开发者的[滑稽]。————鲁迅
今儿就先写到这吧,下班回家。