Node11 Webstorm下调试Node
在代码中打断点的方式和在chrome中是相同的，需要完成一些配置即可
首先点击菜单栏中的run→edit configuration
然后新建一个配置名，大部分都应该默认配置好的，没有配置好按照下图配置就行，需要注意的是Node parameters配置为--harmony来启用一些Node的新特性
还可以配置应用的环境变量：
配置完成之后，点击run里面的Run koa2就可...
Node02 NPM
说明
npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等），npm已经在Node.js安装的时候顺带装好了、
安装插件
npm install <name> [-g] [--save-dev]；
例子：
npm install gulp-less --save-dev
通过-g来控制是否全...
Node03 package.json
1 概述
每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。pm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。
命令提示符执行npm install，则会根据package.json下载所有需要的包，npm install --production...
webpack01 简介
什么是webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用
与gulp/grunt的区别
Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得...
webpack02 优化第三方库的打包性能
在引入第三方的库之后使用webpack打包时，默认会将这些第三方的库重新打包，但是实际上需要重新打包的只有业务代码，这些第三方库是完全不用重新打包的，所以需要对这个过程进行优化。
1 externals
Webpack可以配置externals来将依赖的库指向全局变量，从而不再打包这个库，比如对于React：
import React from 'react';
如果你在Webpa...
webpack03 模块热重载（hot-reload）
安装webpack-dev-server
npm install webpack-dev-server --save-dev
在webpack.config.js中进行配置
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
host: 'localhost',
compress: true,
port...
webpack04 resolve
resolve是webpack的配置项中一个比较重要的属性，主要用来配置模块如何解析。
例如在ES2015中调用import 'lodash'，resolve能够对webpack查找lodash的方式进行修改
resolve.alias
创建import或者require的别名，来确保模块引入更简单，最常见的就是用@来代替scr目录：
module.exports = {
re...
webpack05 多入口文件页面打包配置
大多数情况，我们使用webpack打包单页面应用，有的时候也会遇到多页面的项目
单入口配置
一般情况下的配置模板如下：
module.exports = {
entry: {},
output: {},
module: {},
plugins: [],
devServer: {}
}
entry：配置入口文件的地址，可以是单一入口，也可以是多入口；
outpu...
Git17 webstorm中git中文乱码
用着webstorm+git bash，用着好好看，突然发现git的提交记录中的中文全都变成乱码或者十六进制编码的样子了：
<E6><B7><BB>
咋地了？
估计是前一阵子给webstorm化妆，装了个materialUI的插件搞的，在网上找了教程，解决问题：
修改git配置
在git命令下，分别输入：
文件提交编码格式
git co...
JS中图片的处理与合成（生成水印）
以美图的图片处理为例子，学习JS中对图片的处理。处理图片时需要使用canvas
1 图片的跨域
使用canvas处理图片，首先需要加载图片，如果是在线图片需要针对图片进行跨域的处理。具体的处理方法是：
在图片服务器上设置跨域头，并且在前端加载图片之前将<img>标签的crossOrigin设置为*
这样做的原因是：
尽管不通过CORS就可以在画布中使用图片，但是这会...
知乎live笔记01-《怎样成为年薪50万的程序员》
花钱买了几个知乎live，做了一些笔记。
我发现知乎live这个东西，对于一些概念性的、非技术性、工程型的东西来说，是一种很好的学习手段。它主要是通过主讲人的语音，辅以文字、图表以及一些连接完成主讲人的知识传播，同时在live开放期间参与者可以实时提问，与主讲人互动。这种形式更多的是给人一些方向性的提示和启发（也许是和我参与的主题多是工程类有关），帮助参与者找到解决问题的思路，而非解决实际的问题...
IDE02 Webstorm基础配置
基础配置
首先导入几个配置文件
settings
inspection conf（自定义标签及属性）
code style conf（代码风格）
主题
下载的主题放到 C:\Users\Administrator\.WebStorm2017.1\config\colors\ 文件夹下，然后在 File > Setting > Editor > Colors&amp...
css知识点整理（一）
1.ID命名，应该根据“元素是什么”来命名，不是“元素的外观如何”
如：头header 尾footer 导航nav 侧栏sidebar 栏目column 页面外围控制整体布局宽度wrapper 左中右left center right 登录条login bar 标志logo 广告banner 页面主体main 热点hot 新闻news 下载download 子导航subnav 菜单menu 子菜...
css-滑动门由浅入深
滑动门，简单介绍下，这个技术用到div和css就可以完成不需要JavaScript，操作起来更简单
也很实用，通常用在导航背景，根据内部文本自适应大小可以随意改变大小
再说下精灵图（sprite）：因为网页上有可能有很多小的图片用来做效果，页面上每一张图片都会需要向服务器请求一次，服务器压力很大。把小图集合在一张大图上，将来用到的时候，一次性把小图全都拿过来，这样就会减轻服务器的压力。
两个...
css知识点整理（二）
CSS三大特性—— 继承、 优先级和层叠。
继承：即子类元素继承父类的样式;
优先级：是指不同类别样式的权重比较;
层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。
选择器
1.常用的：
类型选择器（又名元素选择器）：寻找特定类型的元素如段落，标签元素
后代选择器：寻找特定元素或元素组的后代，后代选择器由其他两选择器之间的空格表示
2.ID选择器 #+名称，
类选择器 ....
一个完整的网页（详一）
效果：
简单分析：分成以下部分来整理
顶部导航（通栏）
搜索
主导航
商机市场
建筑材料
建筑材料列表大盒子
儿童安全座椅
儿童安全座椅列表
工艺艺术品
友情链接
页脚
------------------------------------------------------------------------------------------------...
css知识点整理（三）
可视化格式模型
三个重要的css概念：浮动，定位，盒模型，形成css的基本布局
一.盒模型
1.内边距，是为了内容和背景区分开。外边距，是为了控制元素之间的间隔
2.outline属性和border属性不同，outline作为轮廓不影响元素的大小或定位
3.初始化 *{margin:0;
padding:0;
}
4.width不是一成不变的，当想达到100px宽，已知每个边有...
今日推荐
周排行