国内主要视频网站的嵌入方式

Flash iframe 视频播放

来一篇水文,整理一下国内各大视频网站的视频嵌入方式,或许有一点用处。 爱奇艺、优酷、搜狐视频、腾讯视频、酷6、土豆、乐视。 这些视频站绝大多数都采用 Flash 的方式播放,很多也提供了 iframe 的播放方式。

根据最新标准应当使用 <object>,可以添加 <embed> 作为Fallback。

但目前正在逐步地支持 HTML5 的原生 <video> 标签,这需要大量的开发工作。 因为 <video> 会被绝大多数国内手机浏览器劫持产生各种出乎意料的渲染结果, 只有 iOS 可以完美地使用 <video>

2.5.6 Apps that browse the web must use the appropriate WebKit framework and WebKit Javascript. – App Store Review Guidelines

继续阅读

Web Components 可用性调研

ShadowDom CustomElement 兼容性 模块化 组件化

Web 开放的本质在某种程度上导致其在面向对象、软件工程方面的改进进展缓慢, 而 Web Component 正在尝试将基于组件的软件开发方法应用到 Web 前端的开发中。 使我们可以创建可复用的 UI 组件,并以组件化的方式进行 Web 开发。 Web Components 是一系列 Web 技术的集合,主要包括 Shadow DOM、 CSS Scoping/Encapsulation、 HTML Import、 HTML Template。 这些技术标准大多处于草案阶段,下文中会给出具体的兼容性现状, 以及现有的一些替代方案。

在 Github 等社区和绝大多数互联网公司,从未停止过对前端组件化的尝试。 这些尝试产生了大量的各式各样的组件化技术,它们在解决的问题粒度、 提倡的架构设计、编译和处理的时机等方面各有不同:

  • 从预编译时进行处理的 ES6 模块,到运行时异步加载的 AMD 模块;
  • 从简单的 RoR 简单的服务器端 MVC 设计,到 AngularJS/Vue.js 的前端 MVVM;
  • 从 LESS 等单个语言的预编译工具,到 webpack 这样的全站打包工具。

但基于这些技术的组件化仍然依赖于规范层面的约束,无法保证彻底的组件化。 举例来说,即使是完全 AMD 化的前端组件,也无法保证它能够立即移植到其他环境中。 Web 难以组件化的原因有很多,但最为重要的几个原因是: JavaScript 缺乏模块化标准、CSS 的全局作用域、缺乏组件解析/加载的基础设施等。

顾名思义,Web Components 的主要特性便是提供具有良好封装的、良好互操作性的 Web 组件。 除了标准统一之外,还提供了较为底层的组件化能力:组件可以有独立的 DOM、CSS 的作用域、组件引入机制。

继续阅读

在 Vim 中执行 Shell 命令

Shell Tmux Vim 进程 快捷键

刚开始使用终端和 Vim 工作时,桌面上总是铺满了执行各种任务的终端窗口,任务切换极其困难。 尤其在使用 Vim 编辑文件时每次想执行一些 Shell 命令就会新开一个窗口。 虽然搭建终端工作环境的终极方式是终端复用,但有一些更加轻巧的办法可以在 Vim 中快速执行 Shell 命令。

比如 :!cmd Vim 命令和 :sh Vim 命令,以及 Ctrl+Z Shell 快捷键。 除此之外还可以使用 benmills/vimux 来在 Vim 中操作 Tmux, 这可以达到类似 IDE 的效果:按下编译快捷键打开命令窗格并开始编译, 编译过程中 Vim 不会失去焦点,编译成功后自动关闭命令窗格。

继续阅读

Vim 中的变量类型与作用域

Vim 作用域 寄存器 环境变量 变量

有没有想查看一个 vim 变量的值却无从下手? 有没有被 Vim 变量作用域前缀搞晕? 有没有在 Vim 脚本中不知如何变量赋值? 本文梳理了 Vim 变量的赋值、取值与打印,以及在脚本中如何使用变量及其作用域。

TL;DR

  • 在命令模式、Ex 模式或 Vim 脚本中都可以操作变量。
  • 使用 let, echo, unlet 进行赋值输出和销毁,Vim 选项还可用 set 来操作。
  • $前缀表示环境变量、@前缀表示寄存器变量、&表示 Vim 选项。
  • 使用 b:,g:,l:,t: 等前缀可以限制变量的作用域。
继续阅读

PWA 初探

Android Chrome PWA 缓存

PWA(Progressive Web Apps)是 Google 最近在提的一种 Web App 形态 (或者如 Wikipedia 所称的“软件开发方法”)。 Harttle 能找到的关于 PWA 最早的一篇文章是 2015年6月 Alex Russell 的一篇博客: Progressive apps escaping tabs without losing our soul让 Web App 从标签页跳出来,同时保持 Web 的灵魂。 如 Alex 所述,PWA 意图让 Web 在保留其本质(开放平台、易于访问、可索引)的同时, 在离线、交互、通知等方面达到类似 App 的用户体验。

Progressive Web Apps use modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, maintaining the web’s low friction at every moment. – Google PWA Tutorials

继续阅读

在 DOM 中动态插入并执行脚本

DOM HTML JavaScript jQuery

在 HTML 中脚本以 <script> 来标记,通过设置其内容或src属性执行内联脚本或外部脚本。 本文讨论动态地插入脚本标签时浏览器对它的解析、下载和执行行为。 动态插入脚本的场景可能包括使用 AJAX 获取脚本并动态执行(多用于性能优化), 以及运行时决定执行页面模板中的某段脚本(多用于单页异步)。

动态执行脚本还有其他方式,比如evalnew Function,这些不在本文的讨论范围。

继续阅读