需求描述 由于我所在的业务是资讯内容类业务,因而在业务中会经常碰到如下场景:有一个内容列表,列表中需要按照一定的规则插入广告。除了获取广告数据,广告展现和点击后需要有打点上报逻辑。正常来说我们会这么写: import React from 'react'; export default class extends React.Component { state = {newsData: [], adData: …

阅读全文 →

2019-11-26
Featured Image

前言 这篇文章是多年前在 SegmentFault 上的一个回答,原问题是问如何使用 Canvas 实现一个下图类似的圆环选择器,点击后会出现对应的日期。虽然已经有 Canvas 的答案了,不过当时正好在学习 SVG 就顺手自己实现了一下。我感觉对大家去理解 SVG 的贝塞尔曲线会有一定的帮助,所以重新整理了下发出来。另外感兴趣的同学还可以去原问题上看一下,除了标准答案 Canvas 的实现以及我写的 SVG 实现之外,还有使用 DIV…

阅读全文 →

2019-10-08
Featured Image

说到视频字幕格式,一般大家都会想到 .srt, .ass 之类大家比较常用的格式。而现在说到 Web 字幕格式,大家第一反应肯定都是 WebVTT。我们知道在<video>或者<audio> 标签中要加载字幕的话,需要使用 <track> 标签将字幕文件嵌入进来。而在 track 的文档中我们会发现其实还有一种 Web 字幕格式,那就是本文的主角 TTML。 The tracks are forma…

阅读全文 →

2019-10-05
Featured Image

前言 最近 W3C 在日本福冈举办 TPAC 2019 大会,我和公司的几个小伙伴有机会一起去参加,顺便领略了下日本的风景以及乡土人情。具体每日的见闻游记可见之前的几篇文章: 日本福冈行-Day 1 日本福冈行-Day 2 日本福冈行-Day 3 日本福刚行-Day 4 日本福冈行-Day 5 总体来说福冈给我的印象就是环境很好,地方很小,人很友好,非常适合来旅游。

阅读全文 →

2019-09-24

今天是最后一天在日本啦。最近是 iPhone 11 新品发售,本来我是没想要买的,但是昨天晚上博文和我说在日本买会便宜将近2000块钱,我就有点心动了。头疼的是博文大晚上一直在那里纠结要买256G还是512G,一边说自己现在 256G 也只用了不到一半,一边说那是因为开了 iCloud 照片优化省下来的以及最新的三摄像头肯定照片大小会比之前的大,还觉得可能 512G 的会更赚一点,俨然是一副数码小白的样子。从12点30自己一个人在床上嘀…

阅读全文 →

2019-09-21

今天是 TPAC 的最后一天,上午没有什么特别想听的,下午有中文兴趣小组的会议,这个当然是要去听一下的。文力走了之后我和博文住了一间,不幸的是他晚上睡觉也打呼噜,不过幸运的事是我好像安稳睡着了。早上因为之前没和他定好时间起床,我起的比较早不敢吵醒他就等了许久,等了一个多少时,实在是等不住了就起来洗漱了。然后又等了一个多小时,实在是等不住了就把他叫醒问下他的房卡在哪我先去吃饭去了。因为我要把我的房卡拿走的话屋里头就没电了。吃完饭回来发现他…

阅读全文 →

2019-09-20

昨天晚上没有睡好,文力桑好像没枕到枕头所以半夜开始打呼噜。我被逼的带了耳塞发现效果还不是很好,就刷了几个小时的手机,将近6点多才睡着。7点多想着要听8点30的 SVG WG 会议,就赶紧和文力下去吃了早饭,时间关系早饭也是草草的结束了。 去了 SVG WG 会议室,发现人真的很少,大概8个人吧,后来陆陆续续的又来了两三个人。因为主要人都没来所以等了半个多小时,中间一个日本的老大爷和另外一个老外聊起来推广他最近做的一些基于 SVG 的地理…

阅读全文 →

2019-09-19

本来想早上早点起来去海边沙滩看看的,结果还是败给了懒觉睡到了七点半。洗漱后去吃了酒店的早饭,服务员会把每个人带到座位上而不是随便坐感觉服务还是挺周到的。吃的种类比较多,不过早上我还是喜欢喝个粥。不足的是油条炸的太硬了,泡了好久才泡软。 注:酒店和风日式早餐 当然我还是没忘记我是来参会的,早饭完后就去参会了。上午的应该是统一的会,不过语速都比较快只听了个大概(其实是没听懂)。有一个是说如何让 W3C 的规范更加可持续化的,还有一个是说之…

阅读全文 →

2019-09-18

这几天来福冈参加 W3C TPAC 2019 的会议,从17日到21日。今天大早上8点多的飞机,所以早上5点多就需要起来了,所以睡觉一直都不是很踏实,醒了好几回。到机场打登机牌还找了好久,一直记得之前国内的自助打登机牌了,原来国际的需要走托运那块办。我们是从大连转机,到大连的飞机上有好多中英双语特别6的人,有老人小孩,超羡慕的说。

阅读全文 →

2019-09-17

什么是目录遍历 第一次接触到目录遍历漏洞还是在 ThinkJS 2 的时候。代码如下图,目的是当用户访问的 URL 是静态资源的时候返回静态资源的地址。其中 pathname 就是用户访问的 URL 中的路径,我们发现代码中只是简单的解码之后就在22行将其与资源目录做了拼接,这就是非常明显的目录遍历漏洞了。 为什么这么说呢?假设用户访问的 URL 是 http://xxx.com/../../../xxx.jpg 的话最终返回的文件…

阅读全文 →

2019-08-24
Featured Image