Google I/O 2019 Web 前端内容总结

Web 新产品 / 新技术

  • web.dev
    • https://web.dev
    • 一个可以用来学习框架、性能、各种 Web 技术的地方
    • 还有实战 Codelab
    • 正在进行多国翻译
  • Lighthouse Performance Budgets
  • PWA Desktop
    • PWA现在可以各大桌面平台系统中安装了
  • Trusted Web Activity
    • https://developers.google.com/web/updates/2019/02/using-twa
    • Chrome Custom Tab 的升级版,不再显示标题栏
    • 一个常见的使用场景是在已有的App中去使用PWA来打包家族应用并打造原生体验
    • 在网页中可以使用schema url来与App通信
    • App可以在网址后附上参数给网页发送数据
  • Perception Toolkit
    • https://web.dev/perception-toolkit
    • 一个工具包使用Shape Detection API去扫描条码或者获取实物信息
    • 从网站的 meta 信息展示相关卡片
    • 提供了WebAssembly版以向下兼容
  • Puppeteer with Firefox
    • 可以使用Firefox进行自动化了
    • npm i puppeteer-firefox

群晖 NAS 打造自动电视录像服务器

什么是录像服务器

录像服务器就是指将电脑接上电视天线,把电视节目自动录制下来并保存在硬盘上。在日本许多电视机都会自带录制功能,指定节目之后每周录制相同时间段的节目,或者指定条件,自动录制符合条件的节目。这次我们就要来尝试在NAS上搭建这么一个录制服务器。

为什么我们要搭建这样的服务器

既然电视机已经有了这样的功能,为什么还需要额外搭建这样的服务器呢。
电视机确实已经很强大,但我们也有串流需求,在家,在外边,在笔记本上随时随地都想收看录制的电视节目的话,只有一个电视机和收看设备的话很难做到。
搭建了这个服务器之后,我们还能实现在手机在电脑实时观看电视直播功能,画质当然与电视台一致。

为什么要放在NAS上

还不是为了拯救我那24小时开机的NAS但却只用来同步文件的电老虎吗

心灵盟友 Buddy Complex 圣地巡礼

黄金周里因为自己喜欢的画手太太画了渡瀬青葉,所以又把一年前抛弃的 Buddy Complex 捡起来看了一下,意外的发现还挺好看的。全部看完后昨天圣地巡礼了一下。

这个动画也只有第一集是现实中出现的场景,后边都是未来在天上在船上并没有日本的景色。

千葉県習志野市

通学路のカーブ
通学路のカーブ

通学路のカーブ

非常遗憾自行车店好像在翻新,去年在Google Map上貌似还有的样子


推特 Account Activity API 使用体验

前几天使用了一下推特的 Account Activity API,这个 API 支持注册一个 webhook,用于接受授权账户的实时活动(推特文,事件,设置)。

包括以下内容:

  • 推特内容
  • at 提醒
  • 回复
  • 转发
  • 带评论转发
  • 点赞
  • 发出的私信和接收到的私信
  • 关注
  • 拉黑
  • 屏蔽
  • 阅读回执

在试用的过程中,碰到了一些问题,做一个整理。

再见 2017

忙完这一阵,回过神来已经是2018年的4月了,才有空开始补一些之前没有干完的事情,比如写这一篇2017年的总结。

仔细想想还真的是2017年经历了太多太多事情,很多事情甚至自己都没有想到,感觉自己非常幸运,总的来说是一个很开心的一年。

Vue + TypeScript 尝鲜体验

适用 Vue.version < 2.5 && Vue.version >= 2.2

其实我个人一开始很讨厌 TypeScript 这个东西,就是因为讨厌 Java 的啰里巴嗦,突然在我眼前出现了 Javascript,便爱上了这门语言。

但现在的我稍稍又觉得这样的东西其实还行,只使用类型系统也并没有完全限制 Javascript 本身的灵活性,并且他帮助我不会犯一些低级错误,而且还能配合 Visual Studio Code 的提示,我觉得这个还是很不错的,最近忙起来的时候,甚至经常把两个输入框的 value 直接进行比较了,于是就想尝试一下 TypeScript。

用户登录状态 验证权限的时代变迁

Cookie

直接在Cookie中存信息可谓是上古时代的操作了,在服务器还没有那么便宜的情况下,好多网站选择将用户的登录信息存在cookie中,他们把用户名或者用户id转换并签名之后,直接存入Cookie,如果有其他需要的信息,也是如此操作

转换或签名可以是加盐md5,也可以是使用secret的双向加密

用户第二次访问网站的时候,代码中对这段信息进行验证,看看是否是正确的签名的

2017 你的名字 东京 圣地巡礼

BD 出了一个月,略忙再加上 VCB 也没有出 rip,前天 rip 刚出于是赶紧下载了来做整理啦

靠着仅有的印象和网上的一些经验攻略,把东京几乎所有的场景都拍到了吧(大概)


第一次交换身体瀧去学校查手机地图
第一次交换身体瀧去学校查手机地图

新宿站


瀧去学校路上
瀧去学校路上

新宿站前路

探索 Service Worker “生命周期”

最近讨论 PWA 的好多啊,PWA 中有个非常重要的角色是 Service Worker 。刚写这篇文章的时候粗心一看,把现在发的 Working Draft 的发布时间以为就是 Service Worker 的发布时间,被棕神挑刺啦。spec 仓库的第一个 commit 是 2013 年 2 月 7 日,W3C 发第一个 Service Worker 的 public working draft 是 2014 年 5 月 8 日,第一个实现 Service Worker 的是 Chrome 40 (2015 年 1 月 21 日)

加载失败,请尝试使用下方导航