前端广度了解记录

[jerryni]

定义

比较新的技术, 可能现在还用不到, 稍微了解下

跨平台桌面应用

可以用js html css写

http://electron.atom.io/

文本编辑器

http://codemirror.net/

WebP

一种新的图片压缩格式

https://developers.google.com/speed/webp/?hl=en
https://developers.google.com/speed/webp/docs/precompiled

macport: http://distfiles.macports.org/MacPorts/

export PATH=/opt/local/bin:/opt/local/sbin:$PATH

cwebp images/10.jpg -o images/10.webp

tree-shaking

excluding unused exports from bundles

去掉软件集里没用的导出(exports default xxx)

• 原理是基于es6的静态化模块加载的机制(在编译时就完成模块加载)

http://www.2ality.com/2015/12/webpack-tree-shaking.html
https://www.zhihu.com/question/41922432/answer/93346223

chrome55 可以直接调试node.js了

https://blog.hospodarets.com/nodejs-debugging-in-chrome-devtools

google PWA

https://developers.google.com/web/progressive-web-apps/

• Reliable 可靠性，没网络也能显示内容
• Fast/Engaging 体验更流畅，更像本地app

esprima js语法解析器

可以把js语法转化成ast，依靠这个可以实现类似jshint的功能

在线演示地址：
http://esprima.org/demo/parse.html

css BEM标准 是啥

http://getbem.com/introduction/

Block

Standalone entity that is meaningful on its own. 拥有独立含义的实例
Example: header, container, menu, checkbox, input

Element

A part of a block that has no standalone meaning and is semantically tied to its block. 作为Block的一部分，并没有独立含义，但是有一定语义化
Example: menu item, list item, checkbox caption, header title

Modifier

A flag on a block or element. Use them to change appearance or behavior. 是Block或者Element的一个标记，用来标识状态或者行为
Example: disabled, highlighted, checked, fixed, size big, color yellow

git hook 是啥

可以在你commit之前进行一些自定义的命令，比如 npm run precommit

比较好用的工具husky
只需要在package.json里加配置就行：

// Edit package.json
{
  "scripts": {
    "precommit": "npm test",
    "prepush": "npm test",
    "...": "..."
  }
}

chrome 59 新特性

可查看js, css代码使用覆盖率

其他更新：

• 可以block某个特定请求
• 可以截屏：从上到下完整的网页
• 调试的时候，直接跳过async await
• 统一了command menu(cmd + shift + p)

查看更多

[jerryni]

css in js 之 styled-components

• 兼容React和ReactNative，说明可以很好的跨平台使用

  styled-components is compatible with both React (for web) and ReactNative – meaning it's the perfect choice even for truly universal apps! See the documentation about ReactNative for more information.

• 可在js脚本中写css样式绑定到react的组件上，生成带样式的组件

  It removes the mapping between components and styles. This means that when you're defining your styles, you're actually creating a normal React component, that has your styles attached to it.

• 基本语法说明：styled-components里提供一系列html标签方法如styled.h1，通过传入css样式作为参数，可以生成一个react component

hello world

// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
	font-size: 1.5em;
	text-align: center;
	color: palevioletred;
`;

// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
	padding: 4em;
	background: papayawhip;
`;

// Use Title and Wrapper like any other React component – except they're styled!
render(
	<Wrapper>
		<Title>
			Hello World, this is my first styled component!
		</Title>
	</Wrapper>
);

效果图：

more about hello world

other: https://www.styled-components.com/