Humphry
Humphry
> 这是一篇写于2013年的旧文，近日将修缮 > 又及，这里有一个[提要ppt](http://alvarto.github.io/Slideshow-webapp/) 在手机端网页开发的特定阶段，需要查看手机端的界面、交互与体验。2011年时，开发时有很大麻烦： - 相应的静态文件在测试服务器上，没有上线，需要绑定hosts 而手机端直接绑定hosts是需要越狱/root的 - 有的手机浏览器根本不认hosts文件，如uc - 手机端的调试工具匮乏 断点调试、查看变量、查看样式等都很困难 - 在电脑端改变UA和屏幕大小，并不能简单的模拟手机端的情形。比如触摸的事件处理 在2012年后，一些成型的方案已经出现，本文将他们整理出来，并画出了相关架构。涉及： - 绑定hosts - 使用chrome、safari、firefox、UC浏览器的远程调试 - 使用weinre构建调试服务器 ## hosts绑定 hosts绑定有两种方案： - root手机，修改手机端hosts文件，连接网页服务器。 - 使用代理，连接代理服务器，修改代理服务器的hosts文件以连接网页服务器。 方案1如下图：...
前端中的变换矩阵
在一票教你如何制作立方体的教程之后，在张鑫旭生动的类比讲解[1](http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/) [2](http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/)之后，我还想重提一次前端中的变换矩阵——它被挖掘得远远不够。 本文里，让我们从[W3C标准](http://www.w3.org/TR/css3-transforms/)和浏览器等新角度来重新理解变换矩阵。 # 变换矩阵的综合应用 在开始前，我们不妨看[动画库bouncejs](http://bouncejs.com/)来热身一下。 一个动画如果要给人带来愉悦、动人甚至是惊艳的感觉，它首先要足够贴近我们的经验，否则我们理解不了动画过程；其次，它还要有充沛的细节，否则会显得单调乏味。 bouncejs这个库就同时做到了这两点。  我们知道CSS3中的时间函数其实是非常残缺的，它最复杂也不过是生成一个有四个参数的三次贝塞尔曲线，还远远不够我们对于动画细腻程度的追求。如果细窥bouncejs的实现，我们会发现它用到了线性的时间函数，而在keyframes中表达动画细节，用到了一大堆matrix3d： ``` css @keyframes animation{ /* ... */ 21.32% { transform: matrix3d(2.196, 0, 0, 0, 0, 2.069, 0, 0, 0, 0,...
本文选译自：[W3C Working Group Note: HTML5 Differences from HTML4](http://www.w3.org/TR/html5-diff/)。 解释一下W3C Working Group Note，作为“工作组笔记” 发布，意味着它是一个草稿版文档，可能被其它文档更新、替换或废弃。但由于翻译时草稿只发布了不到二十天，本文有很好的时效性。也作为比较性质的文献，比起HTML5的标准它更容易理解，可以让人快速地理解HTML5的变化轮廓。 # 关于本翻译： 原文所有指涉HTML5的地方用的要么是无定语的"HTML"，要么是“新的HTML”，为了避免和HTML4的混淆，均写作HTML5； 由于缺乏一目了然的译名，原文中的User Agent统一简写为UA； 由于原文的章节划分非常合理，第五节的属性均为Property，此外其它的章节均是Attribute，因此本文不在翻译上区分它们，均译作“属性”； Application统一简写为App； 为避免混淆，第四节即文档模型章节部分，分类名均保留英文名不翻译。 第五节中IDL(Interface Definition Language)相关内容由于没有标准翻译，概念legacy caller、 Stringifiers、 setter、getter、creator、deleter等均保留原文 #1. 简介 ##...
> http://alvarto.github.io/VisualNumeric64/ 本文来自对http://javascript-puzzlers.herokuapp.com/ 相关的精度问题的探索，并尝试着以一个数轴链接一些关于Number，关于数字表示的知识点。欢迎帮忙捉虫、补充。 ## 从题目开始 > What is the result of this expression? (or multiple ones) > > var end = Math.pow(2, 53); > var START = end -...
对于当今出现的一些CSS垂直居中的方案，这篇文章将会系统地审视它们，从实用角度进行评估。 不罗嗦，先上图：  --- ## 考量需求及难度 为避免混淆，本文中所说的`父容器`和`子容器`都不是相对的，而对应着如下文档结构里面的`.outer`和`.inner`容器： ``` html ... ... ``` 我们从如下角度来评估： - 父容器/子容器的高度是否可变 - 是否需要手工计算 - 子元素溢出时父元素是截断、被撑高还是保留滚动条 - 当然，还有兼容性 #### 高度相关 代码 效果 height:100px; 定高 height:auto 不定高，自适应于自身的content-box height:50%...
### Component Table ### Reproduction link [https://riddle.alibaba-inc.com/riddles/45980b7e](https://riddle.alibaba-inc.com/riddles/45980b7e) ### Steps to reproduce 1. 勾选首屏幕的任意一项 2. 往下滚动一屏，勾选第二项 3. 可以看到 rowSelection.onChange 和 rowSelection.onSelect 回调里的首参数和第二参数个数不一致 
当前 ExpressionSetter 有很多遗留问题，相比 VariableSetter，它的展现面积小，可扩展性低。  它仅仅作为 MixedSetter 内包含 ArraySetter 和 ObjectSetter 时的一个 fallback 使用。这部分适配逻辑见 MixedSetter： ```tsx const hasComplexSetter = formattedSetters.filter((item) => ['ArraySetter', 'ObjectSetter'].includes(item.setter), ).length; return formattedSetters.map((item) => { if (item.setter...
 