动态插入外部样式表

DOM HTML 事件 异步 CSS innerHTML

相比于动态插入外部脚本, 动态插入外部样式表(<link rel="stylesheet">)的行为简单很多: 只要插入到当前 DOM 树时,浏览器总会异步地立即下载并应用该样式表, 被从 DOM 树移除时样式消失并立即触发重绘。

内联样式表(这里指<style>标签)除了不需要去下载之外,其他行为与外部样式表相同。 因此下文略过对内联样式表的讨论。

Raspberry Pi 3 的 GPIO 串口配置

Raspberry GPIO UART

Raspberry Pi 开源硬件提供了 GPIO (General Purpose Input/Output) 接口, 但 Raspberry Pi 3 新增的蓝牙支持占用了原 GPIO 使用的 UART(PL011), 让 GPIO 14/15 引脚转而使用 Mini UART,因此对于不使用蓝牙的用户降低了 GPIO 的吞吐量。 为了使 GPIO 继续使用 UART 协议以及设置对应设备(/etc/ttyAMA0)权限笔者话费了不少功夫, 于是将串口配置过程记录在此。

如果你不是在使用 GPIO(比如连接 Arduino、传感器等等)引脚,本文基本与你无关。

CORS 跨域中的 preflight 请求

跨域 CORS AJAX HTTP XHR

我们知道借助Access-Control-Allow-Origin响应头字段可以允许跨域 AJAX, 对于非简单请求,CORS 机制跨域会首先进行 preflight(一个 OPTIONS 请求), 该请求成功后才会发送真正的请求。 这一设计旨在确保服务器对 CORS 标准知情,以保护不支持 CORS 的旧服务器。

Flowchart_showing_Simple_and_Preflight_XHR

Wikipedia: https://upload.wikimedia.org/wikipedia/commons/c/ca/Flowchart_showing_Simple_and_Preflight_XHR.svg

CORS 跨域发送 Cookie

AJAX Cookie XHR CORS 跨域

在 Web 页面中可以随意地载入跨域的图片、视频、样式等资源, 但 AJAX 请求通常会被浏览器应用同源安全策略,禁止获取跨域数据,以及限制发送跨域请求。 虽然有多种方法利用资源标签进行跨域,但能够进行的数据交互非常有限。 在 2014 年 W3C 发布了 CORS Recommendation 来允许更方便的跨域资源共享。 默认情况下浏览器对跨域请求不会携带 Cookie,但鉴于 Cookie 在身份验证等方面的重要性, CORS 推荐使用额外的响应头字段来允许跨域发送 Cookie。

Electron 中的 IPC

Github IPC Node.js 事件 Electron

Electron是 Github 为了打造一款纯 JavaScript 开发的代码编辑器而编写的 JavaScript 跨平台桌面应用框架。 Electron 中的 Node.js 是一个后台进程的运行时(注意不是 Web 服务器), 使用 Chromium (其实是libchromiumcontent库)作为用户接口。 碉堡了有木有!

其中后台进程(Main Process)与渲染进程(Render Process) 之间的通信便需要借助于 Electron 提供的 IPC 机制 (该机制需要跨平台,可能是通过libuv这样的跨平台 IO 库实现的)。 在这样的架构中 IPC API 会在开发中经常用到,本文介绍这些 API 的使用场景。

使用 rem 提供一致的字体大小

CSS Chrome 字体 font-size

猴子都知道在 Web 页面中可以用 px (1/100英寸) 来做字体或宽高的单位, 虽然 px 的字面含义是像素但它早已不是指物理像素,而是跨操作系统的、跨浏览器的长度单位。 比如在 2x 像素密度的Ritina 屏上 1px 会自动占据两倍的长度。

pt 常被用于打印字体,为 1/72 英寸,类似的还有in, cm, mm, pc。 这类绝对像素因渲染不一致且无法被 UA 缩放而 很少在 Web 中应用。当然浏览器并没有那么笨,下文有对此更详细的讨论。

而 px 的问题在于我们想让整个页面字体变大一些的时候需要更改所有的字体。 于是我们开始使用相对于父元素的像素单位em, 在标签嵌套时这样层级的继承(compounding problem)会令人相当困惑。 为此建议使用rem作为像素单位,该像素单位只相对于根元素<html>。 这样一来问题的关键便是控制根元素的字体大小

导航: 上一页 下一页

🔝