300ms

遇到了诡异的 IOS 9.2 点击出现延迟。 目前手动测试: amazeui bootstrap uikit 点击都会出现延迟的状态! 目前原因未知。 https://webkit.org/blog/5610/more-responsive-tapping-on-ios/ https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away »

BGC GFC IFC ETC

几个概念,与相关需要挖掘细节的地方。另外再来几个布局的实例。 格式化上下文 和 盒子 算是 CSS 里最细节的概念了。 CSS2.1 规范中的 IFC(Inline Formatting Contexts)与 BFC(Block Formatting Contexts) CSS3 新增规范,GFC(GridLayout Formatting »

像素 & 1px

说明 像数 为影像显示的基本单位。 https://www.wikiwand.com/zh-sg/%E5%83%8F%E7%B4%A0 CSS像素(CSS pixels) 浏览器使用的抽象单位,用来精确度量网页上的内容。 eg:平时经常写的width:100px;height:100px; 都是与设备无关的。 设备独立像素 »

Set a breakpoint

说到程序的调试,我都是直接在代码里打 console,以前觉得没有什么的,觉得都是个人习惯吧,可是最近由于一个功能添加的模块太多了,代码也不是自己写的,完全是处于黑盒的状态。另外也感觉自己的效率实在是有些低,需要增强些。 所有想到了断点调试,自然就用起来了,也是越用越顺手,感觉很舒服,整个代码的流程清晰于视野中啊。真的是谁用谁知道啊。那么这里也就总结下进行断点调试中的爽与不爽。 How to set a breakpoint 基本的使用: Event Listener Breakpoints »

Electron 渲染进程之间的通信

对于 主进程和渲染进程之间的通信,使用 IPC 是很方便的。但是渲染进程之间呢? 哈哈,我这个码农看来又踩到一个坑了。 方案一: 使用全局共享属性: // In the main process. global.sharedObject = { someProperty: 'default value' } // In page 1. require('electron').remote.getGlobal( »

inline formatting context

CSS 内联格式化上下文与层叠上下文 line-box 每一行是由一个或多个行内元素(HTML标签元素或匿名内联元素文本内容)组成,专业术语称为行盒(line-box). 而 line-box 的高度由 不是由单一元素决定。 line-box 说明: <p> Good design will be better. <span class="a" »

API 设计与思考

API 设计 http://taobaofed.org/blog/2017/02/16/a-guide-to-api-design/ 很好。 https://medium.com/javascript-scene/elements-of-javascript-style-caa8821cb99f 此文内容丰富[英] https://www.slideshare.net/DenisRadin/jshtml-in-aircraft-and-shipbuilding-industries-or-airspace-is-closer-than-you-may-think NASA 的代码规范指南 »

margin重叠和 BFC

有些东西回过头来再看,都会有不同的理解,当然这是因为当初没有理解清楚,哈哈。 对于上下 margin 重叠: 先给出解决方案: 在开发的时候尽量用同一方向的margin,比如都设置为top或者bottom 为元素设置浮动、inline-block或者absolute 来消除 margin 重叠。 BFC 不是使得 margin 不重叠的方法,毕竟 overflow 也会触发 BFC, 但是子元素依然重叠, 只是设置了 overflow »

HTML 基础回顾

对于 HTML 在浏览器渲染时,容错能力很强,所以我们在开发时也基本忽略了元素和元素之间的关系。想到这里得原因主要是自己对元素嵌套这一块模糊了。 HTML5 标准 说实话,这个标准真得是懒的读啊,当然造成这个原因是感觉花的时间不值。要是少玩点游戏就好了。 在 HTML5 里对于元素有定义【 Element definitions】。包括以下6部分内容: Categories: A list of categories to which the »

Shadow DOM

这个简单了解下吧,也不清楚会怎么发展。与之 相关需要了解的: Web_Components、<content>、<template> https://developer.mozilla.org/en-US/docs/Web/WebComponents/ShadowDOM https://aotu.io/notes/2016/ »

Chrome DevTools 官方文档实践 --持续更新

就没有认真实践过 Chrome 的很多东西,所以很有必要实践下,尤其最近调试工具的需求越来越大。文中出现的在很多文章中也出现,因为都是看文档来的。但大部分是集中于 console、elements、network;我需要对性能比较详细的分析,所以需要认真看下性能分析方面的内容,代码不仅仅是能跑就可以了。 文中也只会记录我不常用的,不知道的一些东西。 Chrome DevTools Device Mode 设备模式,直接忽略了 Console 这个就没有哪次不用的。 以抽屉形式打开 console »