记录一些常用的系统或者软件命令
kill port
linux
1 | 查看端口占用 |
windows
1 | 查看端口占用 |
CSS 伪元素技巧
伪元素技巧
在 CSS 伪元素基本用法一文中讲述了伪元素的基础功能，本章学习一些进阶功能，看看伪元素能实现哪些方便好用的功能。
清除浮动
如果一个元素内部的子元素全部都是浮动的话，那么这个元素会出现高度塌陷，这个时候就需要清除浮动。高度塌陷的负面作用主要有：不能正确显示背景，边框不能撑开，margin 和 padding 不能正确显示。
假设有代码如下：
more >>CSS 伪元素基本用法
伪元素
CSS 中可以利用伪元素给 DOM 元素添加特殊的样式。比如说，我们可以通过 :before 在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
CSS3 规范中要求使用双冒号(::)添加伪元素，用以区分伪元素和伪类，比如 ::before 是伪元素，:hover 是伪类。但是大部分伪元素依然支持单冒号的形式，::before 写成 :before 也可以，为了向后兼容，一般推荐使用单冒号的形式。
支持单双冒号的伪元素有： :before/::before，:after/::after，:first-letter/::first-letter，:first-line/::first-line。
仅支持双冒号的伪元素有： ::selection，::placeholder，::backdrop。
HTML meta 标签
引言
最近做的一个关于电影的网站 IMDB Top250，想对其进行 SEO 优化，用到 meta 信息的时候，很多知识都是 『似乎』、『好像』、『可能』 的感觉，回想自己一直没有系统的学习过 meta 相关的知识，这些东西虽然简单，但是很多时候能发挥出意想不到的效果，尤其对于 SEO 有非常重要的作用。
meta 简介
meta 标签位于文档的头部，可提供有关页面的元信息（meta-information）。 meta 标签本身不包含任何内容，通过其属性定义了与文档相关联的内容。
meta 标签一共有五个属性值： charset、content、http-equiv、name、scheme。 其中 http-equiv 和 name
必须与 content 配合组成键值对使用， charset 为 HTML5 属性， scheme 属性 HTML5 不支持。
迁移 github pages 到 coding.net
解决 webpack 打包后 z-index 重新计算的问题
背景
与 PC 端共同开发一个页面，页面由 PC 端提供，内部 iframe 则由我们前端提供。开发时候遇到了一个问题，webpack 打包后 css 的 z-index 值与原始值不符，导致 iframe 里面的 toast 被外面 z-index 较小的 dialog 覆盖。更改 toast 的 z-index，发现没起作用，页面上的 z-index 依然是之前的值，而不是 css 中赋予的值。给 z-index 加上 !important 后依然无效，查资料发现是 OptimizeCssAssetsPlugin 调用 cssProcessor cssnano 对 z-index 进行了重新计算导致的。
这本来是 webpack 插件的一个善举（让 z-index 数值更加合理），但是具体情况来看，这里显然不需要这个 “善举”。
more >>Linux 文件权限
linux 文件属性
linux 中用户相对于文件有三种身份：owner、group、others，每种身份各有 read、write、execute 三种权限。
使用 ls -l 命令可以查看与文件权限相关的信息：
1 | ls -l |
其中第一个字符表示文件类型：d 表示文件为一个目录，- 表示文件为普通文件，l 表示链接， b 表示设备文件。
接下来的字符中，以三个为一组，且均为 r(read)、 w(write)、 x(execute) 三个参数的组合，首先三个字符表示文件所有者权限，后面三个字符表示用户组权限，最后三个表示其他人对文件的权限。这三个权限的位置不会改变，如果没有权限，就会出现减号[ - ]。
后面的字段分别代表：硬链接个数，所有者，所在组，文件或者目录大小，最后访问/修改时间，文件或者目录名。
more >>ES2016 和 ES2017 学习
ES6 发布之后，TC-39 小组每年发布一次 ECMAScript 语言新特性，这个 repository tc39/ecma262 中记录着最新版的提议。新版本的 ECMAScript 使用年份来表示版本，所以 ES6 被称为 ES2015， ES7 被称为 ES2016，所以标准起见，以后我们也称之为 ES2016 和 ES2017。
ECMAScript 2016
ES2016 只有两个新特性
- Array.prototype.includes
- 求冥运算(Exponentiation Operator)
vue2 组件通信——使用 dispatch 和 broadcast
最近在使用 Element 过程中发现组件通信大量使用 dispatch 和 broadcast 两个方法，之前在 vue2 组件通信 也提到过 vue2 中取消了 $dispatch 和 $broadcast 两个重要的事件，而 Element 重新实现了这两个函数。
代码地址放在 element-ui/lib/mixins/emitter
图片懒加载的几种实现方式
懒加载
Lazyload 可以加快网页访问速度，减少请求，实现思路就是判断图片元素是否可见来决定是否加载图片。当图片位于浏览器视口 (viewport) 中时，动态设置 <img> 标签的 src 属性，浏览器会根据 src 属性发送请求加载图片。
懒加载实现
首先不设置 src 属性，将图片真正的 url 放在另外一个属性 data-src 中，在图片即将进入浏览器可视区域之前，将 url 取出放到 src 中。
懒加载的关键是如何判断图片处于浏览器可视范围内，通常有三种方法：
more >>service worker 使用
service worker 简介
service worker 的功能和特性可以总结为以下几点：
- service worker 是一个独立 worker 线程，独立于当前网页进程，有自己独立的 worker context
- service worker 的线程能力基于 webworker 而生，通过 postMessage 和 onMessage 进行线程之间的通信；缓存机制是依赖 cache API 实现的。service worker = webworker + cache API
- 一旦被 install 之后，就永远存在，除非被 uninstall；需要的时候可以直接唤醒，不需要的时候自动睡眠
- 可以可编程拦截代理请求( https 请求)和缓存文件，缓存的文件直接可以被网页进程取到（包括网络离线状态）
- 离线内容开发者可控；能向客户端推送消息；不能直接操作 dom
- 必须在 https 环境下才能工作，当然 localhost 或者 127.0.0.1 也是 ok 的
- service worker 是异步的，内部通过 Promise 实现， localStorage 是同步的，因此 service worker 内不许用使用 loaclStorage
- 依赖 HTML5 fetch API 和 Promise
hexo 支持 emoji
添加方法
很简单，换一个 markdown 引擎，然后再增加 emoji 插件即可。😊
1 | npm un hexo-renderer-marked --save |
据说 hexo-renderer-markdown-it 的速度要比 Hexo 原装插件要快，而且功能更多：
more >>