飞彦 发布于 10月08, 2019

使用 SVG 实现圆环日期选择器

前言

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

阅读全文 »

飞彦 发布于 10月06, 2019

TTML—让 W3C 获得艾美奖的字幕规范

logo

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

The tracks are formatted in [WebVTT format][3] (.vtt files) — Web Video Text Tracks or [Timed Text Markup Language][4] (TTML).
via: [\<track>: The Embed Text Track element][5]

阅读全文 »

lizheming 发布于 09月24, 2019

日本福冈行之游后感

前言

最近 W3C 在日本福冈举办 TPAC 2019 大会,我和公司的几个小伙伴有机会一起去参加,顺便领略了下日本的风景以及乡土人情。具体每日的见闻游记可见之前的几篇文章:

总体来说福冈给我的印象就是环境很好,地方很小,人很友好,非常适合来旅游。

阅读全文 »

lizheming 发布于 09月21, 2019

日本福冈行-Day 5

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


注:苹果点排队中

阅读全文 »

lizheming 发布于 09月20, 2019

日本福刚行-Day 4

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


注:福冈博物馆打卡

阅读全文 »

lizheming 发布于 09月19, 2019

日本福冈行-Day 3

昨天晚上没有睡好,文力桑好像没枕到枕头所以半夜开始打呼噜。我被逼的带了耳塞发现效果还不是很好,就刷了几个小时的手机,将近6点多才睡着。7点多想着要听8点30的 SVG WG 会议,就赶紧和文力下去吃了早饭,时间关系早饭也是草草的结束了。

去了 SVG WG 会议室,发现人真的很少,大概8个人吧,后来陆陆续续的又来了两三个人。因为主要人都没来所以等了半个多小时,中间一个日本的老大爷和另外一个老外聊起来推广他最近做的一些基于 SVG 的地理信息可视化相关的东西,比如针对最近日本的台风天气做的一些处理,点多性能好操作方便等等。人来齐了之后发现速记员还挺帅的,全场唯一的女性是 SVG 中大佬的大佬!还过来和我打了声招呼说了了下好像以前没见过我,我和她说了下我只是因为感兴趣所以过来听听。

会议开始后发现大家讨论的内容我完全听不懂,包括 SVG 的测试以及之前的一些 issue 等等。即使是跟着 IRC 速记内容看,也只能是理解这句话他在说什么,不明白他们具体在讨论的内容。强撑了近一个小时之后因为文力要赶飞机了所以最后和他一块出来了。

酒店旁边发现的野生小喵
注:酒店旁边发现的四只野生小猫

阅读全文 »

lizheming 发布于 09月18, 2019

日本福冈行-Day 2

本来想早上早点起来去海边沙滩看看的,结果还是败给了懒觉睡到了七点半。洗漱后去吃了酒店的早饭,服务员会把每个人带到座位上而不是随便坐感觉服务还是挺周到的。吃的种类比较多,不过早上我还是喜欢喝个粥。不足的是油条炸的太硬了,泡了好久才泡软。

日式早饭
注:酒店和风日式早餐

当然我还是没忘记我是来参会的,早饭完后就去参会了。上午的应该是统一的会,不过语速都比较快只听了个大概(其实是没听懂)。有一个是说如何让 W3C 的规范更加可持续化的,还有一个是说之前 W3C 和 MDN 联合推出的针对开发者的调查报告的结果。

中国驻福冈领事馆
注:中华人民共和国驻福冈领事馆

阅读全文 »

lizheming 发布于 09月17, 2019

日本福冈行-Day 1

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

Welcome to Fukuoka!

阅读全文 »

飞彦 发布于 08月24, 2019

Web 安全漏洞之目录遍历

什么是目录遍历

第一次接触到目录遍历漏洞还是在 ThinkJS 2 的时候。代码如下图,目的是当用户访问的 URL 是静态资源的时候返回静态资源的地址。其中 pathname 就是用户访问的 URL 中的路径,我们发现代码中只是简单的解码之后就在22行将其与资源目录做了拼接,这就是非常明显的目录遍历漏洞了。

阅读全文 »

飞彦 发布于 08月05, 2019

What's New in JavaScript

前几天 Google IO 上 V8 团队为我们分享了[《What's New in JavaScript》][1]主题,分享的语速很慢推荐大家可以都去听听就当锻炼下听力了。看完之后我整理了一个文字版帮助大家快速了解分享内容,嘉宾主要是分享了以下几点:

  1. JS 解析快了 2 倍
  2. async 执行快了 11 倍
  3. 平均减少了 20% 的内存使用
  4. class fileds 可以直接在 class 中初始化变量不用写在 constructor 里
  5. 私有变量前缀
  6. string.matchAll 用来做正则多次匹配
  7. numeric seperator 允许我们在写数字的时候使用 _ 作为分隔符提高可读性
  8. bigint 新的大数字类型支持
  9. Intl.NumberFormat 本地化格式化数字显示
  10. Array.prototype.flat(), Array.prototype.flatMap() 多层数组打平方法
  11. Object.entries() 和 Object.fromEntries() 快速对对象进行数组操作
  12. globalThis 无环境依赖的全局 this 支持
  13. Array.prototype.sort() 的排序结果稳定输出
  14. Intl.RelativeTimeFormat(), Intl.DateTimeFormat() 本地化显示时间
  15. Intl.ListFormat() 本地化显示多个名词列表
  16. Intl.locale() 提供某一本地化语言的各种常量查询
  17. 顶级 await 无需写 async 的支持
  18. Promise.allSettled() 和 Promise.any() 的增加丰富 Promise 场景
  19. WeakRef 类型用来做部分变量弱引用减少内存泄露

阅读全文 »