├── README.md ├── doc └── FHS-Filesystem Hierarchy Standard.pdf └── src ├── browserAPIs.html ├── css-animation-worklet ├── demo1.helloworld │ ├── index.html │ └── my_aw.js ├── demo2 │ ├── index.html │ └── my_aw.js └── demo3.scroll │ ├── index.html │ └── my_aw.js ├── css-layout-api ├── README.md └── demo1.masonry │ ├── index.html │ └── my_layout_masonry.js ├── css-paint-api ├── README.md ├── index.html └── my_paint_worklet.js └── devtools └── console.html /README.md: -------------------------------------------------------------------------------- 1 | # Blog 2 | 3 | ## W3C 相关 4 | ### A11Y 5 | - 基础 6 | - [无障碍 Web](https://github.com/anjia/blog/issues/60)：初识 7 | - [如何测试网站的可访问性 ](https://github.com/anjia/blog/issues/62)：测试 8 | - [【译】移动App的可访问性陷阱和测试方法](https://github.com/anjia/blog/issues/68)：移动端注意事项 9 | - ARIA 10 | - [【译】揭开 ARIA 的神秘面纱](https://github.com/anjia/blog/issues/61) 11 | - [ARIA 实践指南（1）](https://github.com/anjia/blog/issues/72) 12 | 13 | > [更多 a11y ...](https://github.com/anjia/blog/issues?q=is%3Aissue+is%3Aopen+label%3Aa11y) 14 | 15 | ### CSS 规范 16 | - 技术文章，从规范的角度解读 17 | - [《中国第五届 CSS 大会》参会总结](https://github.com/anjia/blog/issues/58) 18 | - [看图理解 perspective 和 preserve-3d](https://github.com/anjia/blog/issues/56) 19 | - [逻辑属性和逻辑值](https://github.com/anjia/blog/issues/55) 20 | - [CSS 是怎样确定图像大小的？](https://github.com/anjia/blog/issues/44) 21 | - [深入理解 CSS linear-gradient](https://github.com/anjia/blog/issues/35) 22 | - [TPAC 2018 参会总结](https://github.com/anjia/blog/issues/28) 23 | - [CSS Houdini](https://github.com/anjia/blog/issues/23) 24 | - [CSS 的原生嵌套](https://github.com/anjia/blog/issues/1) 25 | - CSS 规范，[more...](https://github.com/anjia/blog/labels/w3c) 26 | - [如何理解和阅读 CSS 规范](https://github.com/anjia/blog/issues/17) 27 | - [描述规范的术语](https://github.com/anjia/blog/issues/18) 28 | - [有趣的观点](https://github.com/anjia/blog/issues/29) 29 | - [理解 CSS 的相关术语](https://github.com/anjia/blog/issues/32) 30 | - [W3C & CSS 动态](https://github.com/anjia/blog/issues/19) 31 | - CSS 使用，[more...](https://github.com/anjia/blog/labels/css) 32 | - [CSS Animation Worklet](https://github.com/anjia/blog/issues/24) 33 | - [CSS Layout API](https://github.com/anjia/blog/issues/26) 34 | - [CSS Painting API](https://github.com/anjia/blog/issues/21) 35 | 36 | ## 未分类 37 | 38 | - Vue 相关，[more...](https://github.com/anjia/blog/labels/Vue) 39 | - JS 相关，[more...](https://github.com/anjia/blog/labels/JS) 40 | - 网络相关，[more...](https://github.com/anjia/blog/labels/%E7%BD%91%E7%BB%9C) 41 | - [Quantum 相关](https://github.com/anjia/blog/labels/servo) 42 | - [Servo 的设计架构](https://github.com/anjia/blog/issues/3) 43 | - [Quantum 初探](https://github.com/anjia/blog/issues/2) 44 | 45 | > [查看更多](https://github.com/anjia/blog/issues)，2018-至今 46 | 47 | - [BFC](http://anjia.github.io/2015/11/24/css_bfc/) 48 | - [URL 编码](http://anjia.github.io/2015/04/15/jsURIEncode/) 49 | - [URL 回车后发生了什么？](http://anjia.github.io/2014/08/13/webUrl/) 50 | - [JS 的模块化编程](http://anjia.github.io/2015/05/15/js_module_1_basic/) 51 | - [JS 中的计时器](http://anjia.github.io/2015/04/18/js_timer/) 52 | - [hover 后弹框](http://anjia.github.io/2015/01/30/code_hover_pop/) 53 | - [【译】我们盲目地奔跑在语义化的道路上](http://www.cnblogs.com/figure79/p/3506350.html) 54 | 55 | > [查看更多](http://anjia.github.io/)，2014-2016 56 | 57 | ## 技术分享 58 | ### 2019 年 59 | - [带着"无障碍"的思维来编码](https://ppt.baomitu.com/d/998901aa) 60 | - CSS，你好：[（上）](https://ppt.baomitu.com/d/244f638f)、[（下）](https://ppt.baomitu.com/d/5525a6ad)、[一起来玩吧~！](https://ppt.baomitu.com/d/2d74c96f#/) 61 | 62 | ### 2018 年及以前 63 | - [CSS 规范导读](https://ppt.baomitu.com/d/f85bba76) 64 | - [W3C TPAC 2018 参会总结](https://ppt.baomitu.com/d/1b67dba3) 65 | - [优化首屏渲染](https://ppt.baomitu.com/d/b07ccafd#/1) 66 | - [PWA 技术揭秘](https://ppt.baomitu.com/d/569cf4e7#/1) 67 | - [前端组件化之 Angular](https://ppt.baomitu.com/d/b825c5a2) 68 | - [Mobile Debugging](https://ppt.baomitu.com/d/70c89f08) 69 | 70 | > [更多在线分享](https://ppt.baomitu.com/u/an-jia) 71 | 72 | ## 关于我 73 | 74 | 我是安佳，360 搜索事业部的一名前端开发工程师。 75 | -------------------------------------------------------------------------------- /doc/FHS-Filesystem Hierarchy Standard.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anjia/blog/a641d15020fcc832a7e86cf55969666ae73d45d9/doc/FHS-Filesystem Hierarchy Standard.pdf -------------------------------------------------------------------------------- /src/browserAPIs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 浏览器 APIs 8 | 9 | 10 | 《浏览器 API 一览表》 11 | 314 | 315 | 316 | -------------------------------------------------------------------------------- /src/css-animation-worklet/demo1.helloworld/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animation Worklet 之 HelloWorld 8 | 14 | 15 | 16 |
17 | 18 | 52 | 53 | -------------------------------------------------------------------------------- /src/css-animation-worklet/demo1.helloworld/my_aw.js: -------------------------------------------------------------------------------- 1 | registerAnimator('hellworld', class { 2 | animate(currentTime, effect) { 3 | effect.localTime = currentTime; 4 | } 5 | }); -------------------------------------------------------------------------------- /src/css-animation-worklet/demo2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animation Worklet 8 | 14 | 15 | 16 |
17 |
18 | 19 | 74 | 75 | -------------------------------------------------------------------------------- /src/css-animation-worklet/demo2/my_aw.js: -------------------------------------------------------------------------------- 1 | registerAnimator('sin', class { 2 | constructor(options = {}) { 3 | this.maxOut = options.maxOut || 3000; 4 | } 5 | animate(currentTime, effect) { 6 | let minIn = -1, maxIn = 1, 7 | minOut = 0, maxOut = this.maxOut; // 映射到时间范围[minOut, maxOut] 8 | let v = Math.sin(currentTime * 2 * Math.PI / maxOut); 9 | 10 | effect.localTime = (v - minIn)/(maxIn - minIn) * (maxOut - minOut) + minOut; 11 | } 12 | }); -------------------------------------------------------------------------------- /src/css-animation-worklet/demo3.scroll/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | scroll-driven 8 | 20 | 21 | 22 |
23 |
超长内容，滚我吧。
超长内容，滚我吧。
超长内容，滚我吧。
超长内容，滚我吧。
超长内容，滚我吧。
超长内容，滚我吧。
超长内容，滚我吧。
超长内容，滚我吧。
超长内容，滚我吧。
超长内容，滚我吧。
超长内容，滚我吧。
超长内容，滚我吧。
超长内容，滚我吧。
超长内容，滚我吧。
超长内容，滚我吧。
超长内容，滚我吧。
超长内容，滚我吧。
超长内容，滚我吧。
超长内容，滚我吧。
超长内容，滚我吧。
超长内容，滚我吧。
超长内容，滚我吧。
超长内容，滚我吧。
超长内容，滚我吧。
超长内容，滚我吧。
超长内容，滚我吧。
超长内容，滚我吧。
超长内容，滚我吧。
24 | 25 | 61 | 62 | -------------------------------------------------------------------------------- /src/css-animation-worklet/demo3.scroll/my_aw.js: -------------------------------------------------------------------------------- 1 | registerAnimator('scrollDriven', class { 2 | animate(currentTime = 0, effect) { 3 | effect.localTime = currentTime; 4 | } 5 | }); -------------------------------------------------------------------------------- /src/css-layout-api/README.md: -------------------------------------------------------------------------------- 1 | 这是 [CSS Layout API](https://github.com/anjia/blog/issues/26) 里例子的源码。 2 | 3 | 注意： 4 | - 要在 localhost 和 HTTPS 下运行此文件夹下的 index.html 5 | - 要在支持 Layout 的浏览器中执行，eg. Chrome Canary -------------------------------------------------------------------------------- /src/css-layout-api/demo1.masonry/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Layout API - Masonry（砌砖） 8 | 24 | 25 | 26 | 27 | 28 | 40 | 41 | 47 | 48 | -------------------------------------------------------------------------------- /src/css-layout-api/demo1.masonry/my_layout_masonry.js: -------------------------------------------------------------------------------- 1 | registerLayout('masonry', class { 2 | static get inputProperties() { 3 | return [ '--padding', '--columns' ]; 4 | } 5 | 6 | *intrinsicSizes() { /* TODO */ } 7 | 8 | /** 9 | * 渲染引擎，在浏览器的layou 阶段时的回调 10 | * @param children 要执行layout元素的子元素列表 11 | * @param edges 在 logical coordinate system 里的 borders, scrollbar 和 padding 的大小 12 | * @param constraints 生成的片段应该满足的条件，该对象里提前计算了当前layout的一些属性。 13 | * eg. inline-size (width), block-size (height) 14 | * @param styleMap 当前layout的只读style 15 | */ 16 | *layout(children, edges, constraints, styleMap) { 17 | // 1. 确定当前layout的内部大小, width 18 | const inlineSize = constraints.fixedInlineSize; 19 | 20 | const padding = parseInt(styleMap.get('--padding').toString()); 21 | const columnValue = styleMap.get('--columns').toString(); 22 | 23 | let columns = parseInt(columnValue); 24 | if (columnValue == 'auto' || !columns) { 25 | columns = Math.ceil(inlineSize / 350); // 默认每个宽350px 26 | } 27 | 28 | const childInlineSize = (inlineSize - ((columns + 1) * padding)) / columns; 29 | const childFragments = yield children.map((child) => { 30 | // 2. 对子节点进行布局，根据 columns 31 | return child.layoutNextFragment({fixedInlineSize: childInlineSize}); // 第一个参数是给子元素的“constraints” 32 | }); 33 | 34 | // 3. 算出'auto'块的大小。就能知道子元素的最大 height 35 | let autoBlockSize = 0; 36 | const columnOffsets = Array(columns).fill(0); 37 | for (let childFragment of childFragments) { 38 | const min = columnOffsets.reduce((acc, val, idx) => { 39 | if (!acc || val < acc.val) { 40 | return {idx, val}; 41 | } 42 | 43 | return acc; 44 | }, {val: +Infinity, idx: -1}); 45 | 46 | // 设置相对于父元素的 offset（再其它的属性都是只读的） 47 | childFragment.inlineOffset = padding + (childInlineSize + padding) * min.idx; 48 | childFragment.blockOffset = padding + min.val; 49 | 50 | columnOffsets[min.idx] = childFragment.blockOffset + childFragment.blockSize; 51 | autoBlockSize = Math.max(autoBlockSize, columnOffsets[min.idx] + padding); 52 | } 53 | 54 | // 4. 返回 fragment 55 | return {autoBlockSize, childFragments}; 56 | } 57 | }); -------------------------------------------------------------------------------- /src/css-paint-api/README.md: -------------------------------------------------------------------------------- 1 | 这是 [CSS Painting API](https://github.com/anjia/blog/issues/21#issuecomment-426648156) 里实战示例的源码。 2 | 3 | 注意：需要在 localhost 和 HTTPS 下运行此文件夹下的 index.html -------------------------------------------------------------------------------- /src/css-paint-api/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Paint API 8 | 22 | 23 | 24 | 25 |
26 | 27 | 38 | 39 | -------------------------------------------------------------------------------- /src/css-paint-api/my_paint_worklet.js: -------------------------------------------------------------------------------- 1 | class CheckerboardPainter { 2 | // inputProperties 返回一个 paint() 可以访问的 CSS 属性列表 3 | static get inputProperties() { 4 | return ['--checkerboard-spacing', '--checkerboard-size']; 5 | } 6 | 7 | paint(ctx, geom, properties) { 8 | // Paint worklet 使用 CSS Typed OM 来取输入参数的值 9 | const size = parseInt(properties.get('--checkerboard-size').toString()) || 30; 10 | const spacing = parseInt(properties.get('--checkerboard-spacing').toString()) || 10; 11 | const colors = ['red', 'green', 'blue']; 12 | for(let y = 0; y < geom.height/size; y++) { 13 | for(let x = 0; x < geom.width/size; x++) { 14 | ctx.fillStyle = colors[(x + y) % colors.length]; 15 | ctx.beginPath(); 16 | ctx.rect(x*(size + spacing), y*(size + spacing), size, size); 17 | ctx.fill(); 18 | } 19 | } 20 | } 21 | } 22 | registerPaint('checkerboard', CheckerboardPainter); -------------------------------------------------------------------------------- /src/devtools/console.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DevTools Console 8 | 9 | 10 | 11 | 82 | 83 | 84 | --------------------------------------------------------------------------------