我过去就是一个键盘!!!

Front-End

前端的东西,太多太杂,就放这一块。

React source code

问题: 组件生命周期是何时绑定,如何被调用 合成事件流程 代码实现 响应原生事件再到内部合成事件的流程? immutable 的使用 理解与最佳实践 https://www.zhihu.com/question/28016223 实现原理: 与深拷贝的区别 微小的性能优化 red ... »

lw at | Front-End |

移动端方案【Doing】

标签: TODO 前端 本文针对目前的移动端方案做基本的研究。包括: 技术栈,兼容性,优劣势,市场情况,周边生态。 当然其中也会涉及如: Vue, React 等的相互比较。 待完成!!!目前只有对每种方案都做具体实践,完成一定程度的应用编写才能体会到优劣。 移动端 web 发展 ... »

lw at | Front-End |

inline formatting context

算是再一次的回顾吧。 CSS 内联格式化上下文与层叠上下文 line-box 每一行是由一个或多个行内元素(HTML标签元素或匿名内联元素文本内容)组成,专业术语称为行盒(line-box). 而 line-box 的高度由 不是由单一元素决定。 line-box 说明: < ... »

lw at | Front-End, css |

JSON Schema

JSON Schema is a vocabulary that allows you to annotate and validate JSON documents. 说人话就是: JSON Schema 定义了如何基于 JSON 格式描述 JSON 数据结构的规范,进而提供数 ... »

lw at | Front-End |

JS Run & V8 Run

此文是关于 JS 从代码到执行整个过程的窥探 和 了解 V8 引擎的相关细节。 under the hood 下面是 V8 5.8 版本及以前的东西: V8 WIKI 算是对 V8 的原理的概述吧 问题 事件如何响应: 浏览器 UI click 到 JS 引擎处理?? 如何进行。 ... »

lw at | Front-End |

300ms

遇到了诡异的 IOS 9.2 点击出现延迟。 目前手动测试: amazeui bootstrap uikit 点击都会出现延迟的状态! 目前原因未知。 https://webkit.org/blog/5610/more-responsive-tapping-on-ios/ htt ... »

lw at | Front-End |

BGC GFC IFC ETC

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

lw at | Front-End |

像素 & 1px

说明 像数 为影像显示的基本单位。 https://www.wikiwand.com/zh-sg/像素 CSS像素(CSS pixels) 浏览器使用的抽象单位,用来精确度量网页上的内容。 eg:平时经常 ... »

lw at | Front-End, css |

Set a breakpoint

说到程序的调试,我都是直接在代码里打 console,以前觉得没有什么的,觉得都是个人习惯吧,可是最近由于一个功能添加的模块太多了,代码也不是自己写的,完全是处于黑盒的状态。另外也感觉自己的效率实在是有些低,需要增强些。 所有想到了断点调试,自然就用起来了,也是越用越顺手,感觉很 ... »

lw at | Front-End |

Electron 渲染进程之间的通信

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

lw at | Front-End, electron |

API 设计与思考

API 设计 http://taobaofed.org/blog/2017/02/16/a-guide-to-api-design/ 很好。 https://medium.com/javascript-scene/elements-of-javascript-style-caa8 ... »

lw at | Front-End, API, 架构 |

margin重叠和 BFC

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

lw at | Front-End, css |

两份很有量的分享

看了这两个 PDF 感觉很有启发的样子。 http://www.thegitc.com/ppt2016bj/05前端技术专场-曾海平-饿了么.pdf ELEMENT 的前端构建过程 http://www.thegitc.com/ppt2016bj/04前端技术专场-陈成.pd ... »

lw at | Front-End |

HTML 基础回顾

对于 HTML 在浏览器渲染时,容错能力很强,所以我们在开发时也基本忽略了元素和元素之间的关系。想到这里得原因主要是自己对元素嵌套这一块模糊了。 HTML5 标准 说实话,这个标准真得是懒的读啊,当然造成这个原因是感觉花的时间不值。要是少玩点游戏就好了。 在 HTML5 里对于元 ... »

lw at | Front-End |

Shadow DOM

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

lw at | Front-End |

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

就没有认真实践过 Chrome 的很多东西,所以很有必要实践下,尤其最近调试工具的需求越来越大。文中出现的在很多文章中也出现,因为都是看文档来的。但大部分是集中于 console、elements、network;我需要对性能比较详细的分析,所以需要认真看下性能分析方面的内容,代 ... »

lw at | Front-End |

Gulp

使用gulp进行基础的任务也是热心应手,但主要也是插件生态的完善,大量开发者的贡献。 那么其中 gulp 运行的原理,过程,怎么读取文件、写文件,反正是基于 Node ,所以对于了解 Node 也是有极大好处的。 vinyl 文件对象, buffer, stream流; 这些都是 ... »

lw at | Front-End |

HOW TO PLAY WITH AMAZEUI-TOUCH

全文的目的是达成使用amazeui-touch进行项目开发,并且以我这个前端菜鸟所见所学来归纳整理。文章不对详细内容做讲解。 环境安装与前期准备 我的基础环境: Win10 ATOM : GitHub出的开源的编辑器 CMDER : http://cmder.net/ 命令行工 ... »

lw at | Front-End |

chrome调试实践

恩恩,来扩展扩展chrome的开发技能。 http://www.ibm.com/developerworks/cn/web/1410_wangcy_chromejs/ https://developers.google.com/web/tools/chrome-devtools/ ... »

lw at | Front-End |

一些小问题

http://www.ruanyifeng.com/blog/2014/06/git_remote.html 用于创建gh-pages,分支的问题. http://www.worldhello.net/gotgit/08-git-misc/040-eol.html http:/ ... »

lw at | Front-End |

config ATOM & support JSX

此文完成ATOM的React.js开发环境配置,包括对js jsx代码高亮、代码规范、格式化、还有一些自动闭合和提示的东西。 主要的流行的插件: 这下面几个插件是目前下载量很高的。 React language-babel atom-beautify linter: eslin ... »

lw at | Front-End, 工具-库-框架 |

DOM操作与性能优化

我们总是在强调DOM操作是很慢的,尽量避免过多的去操作DOM,所以React的virtual DOM出现很是改变前端的整个想法吧。但是其中的原理呢?此文就此做一探讨。 DOM即Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修 ... »

lw at | javascript, Front-End |

ES2015 module system

理解整个ES2015的模块系统和加载机制。 基础语法 语法部分,阮一峰的书讲的很清楚,然而语法并不是重要的地方: import export article 深入浅出: http://www.infoq.com/cn/articles/es6-in-depth-modules ... »

lw at | javascript, Front-End |

webpack进阶

熟悉webpack的所有特性,并清楚基本的配置。 github里有太多可以利用的东西了: https://github.com/ruanyf/webpack-demos √ https://github.com/petehunt/webpack-howto/blob/maste ... »

lw at | Front-End, 工具-库-框架 |

advanced React

react从基础到深入,简单的使用react,到深入使用react,详细每一个模块,到一些模块的原理实现。也是作为chatroom项目的文章。若果要开发一个较大的应用,那么FLUX这类就是必须讲的了。 虽然作为一个菜鸟,要有一个大牛的精神,要以大牛的身份要求自己。因为自己的随性, ... »

lw at | javascript, Front-End, 工具-库-框架 |