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

Flash iframe 视频 HTML5

来一篇水文,整理一下国内各大视频网站的视频嵌入方式,或许有一点用处。 爱奇艺、优酷、搜狐视频、腾讯视频、酷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 组件化 HTML5

Web Components 是 WHATWG 和 W3C 正在尝试的 Web 组件化方案,为组件化的 Web 前端开发提供浏览器级别的支持。

Web Components 是一系列 Web 技术的集合,主要包括 Shadow DOM、Custom Elements、HTML Import、HTML Template。 这些技术标准大多处于草案阶段,下文中会给出具体的兼容性现状, 以及现有的一些替代方案。

在 Vim 中执行 Shell 命令

Vim-Practice Shell Tmux Vim 进程 快捷键

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

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

Vim 中的变量类型与作用域

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

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

TL;DR

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

获取 DOM 内容的 API 接口

DOM HTML jQuery innerHTML textContent 重排

Web 开发者可能会使用 jQuery .html().text() 方法来设置 DOM 内容,但他们的实现仍然依赖于 DOM API。 本文来梳理一下这些用来获取 DOM 内容的 DOM 属性(attribute), 比较它们的区别:innerHTML, outerHTML, innerText, outerText, text, textContent, 以及 jQuery 中.html().text()的实现。

PWA 初探:基本特性与标准现状

Android Chrome PWA 缓存 Service-Worker

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 的用户体验。按 Google 官方的解释 PWA 具有这些特性:Reliable, Fast, Engaging。

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 innerHTML

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

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

导航: 上一页 下一页

🔝