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://www.h5jun.com/post/how-to-write-better-js-code.html http://taobaofed.org/blog/2017/01/05/writing-readable-code/ »

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 »

Gulp

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

HOW TO PLAY WITH AMAZEUI-TOUCH

全文的目的是达成使用amazeui-touch进行项目开发,并且以我这个前端菜鸟所见所学来归纳整理。文章不对详细内容做讲解。 环境安装与前期准备 我的基础环境: Win10 ATOM : GitHub出的开源的编辑器 CMDER : http://cmder.net/ 命令行工具, windows下一个炒鸡好用的神器。 Node.js : https://nodejs.org/en/ 官网直接下载最新版安装即可 基本的配置需求: webpack: https://webpack.github. »

chrome调试实践

恩恩,来扩展扩展chrome的开发技能。 http://www.ibm.com/developerworks/cn/web/1410wangcychromejs/ https://developers.google.com/web/tools/chrome-devtools/?hl=en 谷歌的一套开发环境与配置的推荐与chrome的高级使用 内容 Security:HTTPS Elements Sources Network »

一些小问题

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

config ATOM & support JSX

此文完成ATOM的React.js开发环境配置,包括对js jsx代码高亮、代码规范、格式化、还有一些自动闭合和提示的东西。 主要的流行的插件: 这下面几个插件是目前下载量很高的。 React language-babel atom-beautify linter: eslint 经过实际的测试和考量,发布解决方案: 只使用: react插件:https://orktes.github.io/atom-react/ linter + linter-eslint react做代码高亮和一些提示, »