在使用 Webstorm 写 es6、node 的时候，会出现没有语法提示甚至是产生波浪线，例如常用的 require, import

不仅是内置函数语法，不仅是 js，在一些第三方 npm 库（比如 element-ui），在 vue/html 等上也被黄色背景色标上“未知标签名”的语法提示

既影响美观，又不支持代码候选补全，实在对不起 WebStorm 前端开发利器的称号。
解决方法

设置 Webstorm js 语法支持到 es6（或根据需要选择）

打开 : Preferences | Languages & Frameworks | JavaScript
将 JavaScript Language version 更改为项目所需要的版本,

下载 node 语法库

方法 1: 推荐

2022-04-20发表2023-04-20更新前端 / Css

布局方案

代练通的一个活动背景画背景方案

http://www.dailiantong.com/activity/halloween.aspx

2022-04-14发表2023-04-20更新前端 / Css

从浏览器的渲染原理讲CSS性能

Smallni | 2011.09.13 | 前端Tips
3
平时我们几乎每天都在和浏览器打交道，写出来的页面很有可能在不同的浏览器下显示的不一样。苦逼的前端攻城师们为了兼容各个浏览器而不断地去测试和调试，还在脑子中记下各种遇到的BUG及解决方案，而我们好像并没有去主动地关注和了解下浏览器的工作原理。如果我们对此做一点了解，我想在项目过程中就可以根据它有效的避免一些问题以及对页面性能做出相应的改进。今天我们主要根据浏览器的渲染原理对CSS的书写性能做一点改进（当然还有JS本篇文章暂不考虑，后面的文章会做介绍），下面让我们一起来揭开浏览器的渲染原理这一神秘的面纱吧：
最终决定浏览器表现出来的页面效果的差异是：渲染引擎 Rendering Engine（也叫做排版引擎），也就是我们通常所说的“浏览器内核”，负责解析网页语法（如HTML、JavaScript）并渲染、展示网页。相同的代码在不同的浏览器呈现出来的效果不一样，那么就很有可能是不同的浏览器内核导致的。
我们来看一下加载页面时浏览器的具体工作流程（图一）：

（图一）
1、解析HTML以重建DOM树（Parsing HTML to construct the DOM tree ）：渲染引擎开始解析HTML文档，转换树中的标签到DOM节点，它被称为“内容树”。
2、构建渲染树（Render tree construction）：解析CSS（包括外部CSS文件和样式元素），根据CSS选择器计算出节点的样式，创建另一个树 —- 渲染树。
3、布局渲染树（Layout of the render tree）: 从根节点递归调用，计算每一个元素的大小、位置等，给每个节点所应该出现在屏幕上的精确坐标。
4、绘制渲染树（Painting the render tree） : 遍历渲染树，每个节点将使用UI后端层来绘制。
主要的流程就是：构建一个dom树，页面要显示的各元素都会创建到这个dom树当中，每当一个新元素加入到这个dom树当中，浏览器便会通过css引擎查遍css样式表，找到符合该元素的样式规则应用到这个元素上。
注意了：css引擎查找样式表，对每条规则都按从右到左的顺序去匹配。看如下规则：

2022-04-14发表2023-04-20更新前端 / Javascript

[转] 前端跨域整理

前言

原文地址：前端跨域总结
博主博客地址：Damonare的个人博客
相信每一个前端er对于跨域这两个字都不会陌生，在实际项目中应用也是比较多的。但跨域方法的多种多样实在让人目不暇接。老规矩，碰到这种情况，就只能自己总结一篇博客，作为记录。

2022-04-14发表2023-04-20更新前端 / 其他

[转] ESLint 使用入门

原文地址:ESLint 使用入门
ESLint 是一个开源的JavaScript验证工具，相比JSLint，ESLint具有可配置性。其他跟JSLint 的不同之处：

ESLint 使用 Esprima 来进行 javascript 解析
ESLint 使用 AST 来修改代码模式
ESLint 是完全可插的，每个单个的规则都是一个插件，用户可以在运行时增加更多的插件

在团队协作中，为避免低级 Bug、产出风格统一的代码，会预先制定编码规范。使用 Lint 工具和代码风格检测工具，则可以辅助编码规范执行，有效控制代码质量。
在以前的项目中，我们选择 JSHint 和 JSCS 结合使用，WebStorm 等开发环境已经支持这些工具，使用起来很顺手。然而，最近使用 React JSX 语法时，却遇到了问题：JSHint 不支持 JSX 语法。虽然有 JSXHint 这样的 JSHint 衍生工具，但个人并不喜欢这样的实现方式：不是以插件的形式实现，而是重新重新包装了一个工具。Nicholas C. Zakas 也不喜欢，所以有了 ESLint。
原来选择 JSHint 的时候，也对比过 ESLint，基于 ESLint 在速度上比 JSHint 要慢一些，最终使用了 JSHint。现在需要 JSX 支持了，才发现 ESLint 的设计理念更符合实际需求。

2022-04-14发表2023-04-20更新前端 / Html

html5 - meta

:charset

字符编码

2022-04-14发表2023-04-20更新前端 / 其他 / nvm

[转] nvm：安装、切换不同 Node.js 版本的管理器

nvm 是 Node.js 的版本管理器 (version manager)，可在同一台主機上安裝多個版本的 Node.js 環境，因為不同專案可能會使用不同的 Node.js 版本，那就需要透過一個版本管理器來切換不同的 Node.js 版本。

2022-04-14发表2023-04-20更新前端 / Html

html实体 HTML Codes

Again, nothing to do with ASCII really, but has been requested by a number of you out there. To get special characters to show on an HTML web page, special HTML codes can be used (ascii code or word) and are interpretted by the web browser. These HTML codes are otherwise referred to as html entities, html characters or html symbols.

再一次,没有整理ASCII的欲望了,但是还有一系列你需要的东西,为了在html网页上显示特殊字符,可以使用特殊的html代码在浏览器中显示特殊的字符,这些字符可以表现为html实体,html字符或者html符号

2022-04-14发表2023-04-20更新前端 / Html

HTML5元素属性

html 5 元素和 html4.01 的区别, 在我的文档中我会使用不同的颜色来值定
      新版本的颜色会使用绿色

      老版本的颜色使用橙黄色

      html代码使用淡蓝色

      自己添加的代码使用紫色标注,便于调试和对比错误的地方

通用属性(Global Attributes)
       accesskey
           指定一个快捷键来激活或者设置目标点
          class
           指定一个或者多个样式名称
          contenteditable
                    指定元素的内容是否能够被编辑
          contextmenu
                    指定一个元素的右键菜单
          dir
           指定文本的方向
          draggable
                    指定元素是否可以被拖动
          dropzone
                    Specifies whether the dragged data is copied, moved, or linked, when dropped
          hidden
                    Specifies that an element is not yet, or is no longer, relevant
          id
                    Specifies a unique id for an element
          lang
                    Specifies the language of the element’s content
          spellcheck
                    Specifies whether the element is to have its spelling and grammar checked or not
          style
                    Specifies an inline CSS style for an element
          tabindex
                    Specifies the tabbing order of an element
          title
                    Specifies extra information about an element