前端入门简单，真正精通却不那么容易

就css来说，会使用css做页面布局也只是第一步，css远比想象中的要强大。

js很多效果都可以利用css各种属性和伪元素，制作出来，而且比起js还要方便快速

这是一个菜单按钮的效果，成为焦点后会变成一把叉，在焦点移除后会还原会菜单形状
这时就可以配合js做状态管理写出一个完整的下拉菜单或者侧拉菜单了
之后也会使用在我的vue2.0项目中，如果爷您有兴趣可以移步到项目地址处视察视察，如果爷开心了就加个星

具体的效果是这样的

1
2
3
4
5
6
7
8

button#btn.b-menu
// pug语法里的'#'和'.'同css里一样'#'为id，'.'为class
label(for="btn") click
// 除了id与class以外的属性要如上面的形式写在括号里
    
// 这里扩展出来就是
// <button id="btn" class="b-menu"></button>
// <label for="btn">click</label>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

// stylus是css的预编译器的一种，简化了css的写法，结构更加清晰
// 这里就不过多的陈述了，有疑问可以下方留言询问
 
// 先去除button的默认样式
button
  border none
  outline none
  box-shadow none
  background none
  color currentColor
  padding 0
  cursor pointer
 
// 关键的部分开始了
.b-menu
  width 25px
  height 25px
  position relative
  &:before, // before是第一横杆，after是第二个横杆
  &:after // stylus里的&表示承接上文的意思,这里也就等同于.b-menu:after
    content ' '
    position absolute // 使用绝对定位到目标位置
    background-color #fff
    display block
    width 100%
    height 3px
    left 0
    top 11px
    border-radius 3px
    transition all .5s
    transform-origin 50% 50% // 设置变换中心点，这个很重要，直接影响到后面的效果
  &:before
    transform translateY(-6px) // 第一个横杆向上偏移，这里使用transform而不使用top属性是为了方便后面的使用
  &:after
    box-shadow 0 6px 0 0 #fff
  &:focus:before // 通过focus获取焦点，来触发起伪元素的变化
    transform rotateZ(45deg) translateY(0)
  &:focus:after
    box-shadow 0 0 0 0 #fff
    transform rotateZ(135deg) translateY(0)

这里是switch button演示地址

开关效果又比之前那个复杂，switch的原理其实就是checkbox，
因为input是单标签，所以无法使用伪元素，这里就用到了label

核心使用

• 属性：transform, background-size, border-radius, border-width, transition, cubic-bezier
• 标签：label
• 伪元素：:before, :after

代码如下：
html

1
2
3

input(id="switch",type="checkbox").b-switchBtn
label(for="switch").b-switchLabel
// label标签利用for属性与相应id的input标签绑定，从而达到点击label就是点击input的效果

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

button,
input
  border none
  outline none
  box-shadow none
  background none
  color currentColor
  padding 0
  cursor pointer
  
.b-switchLabel
  position relative
  display inline-block
  width 60px
  height 25px
  input
    display none
  &:before, // before 作为白条
  &:after // after 作为水滴状开关
    content ' '
    display block
    position absolute
  &:before
    width 100%
    height 4px
    background-color #fff
    left 0
    top 50%
    border-radius 5px
    transform translateY(-50%)
  &:after
    background-image url('http://upload-images.jianshu.io/upload_images/2005796-fcc62a13bd69f679.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240')
    // 因为css不好写出漂亮的水滴效果，所以这里取巧用了图片
    background-size cover // 利用这个属性缩放原来太大的图片
    height 25px
    width 25px
    left 23%
    top 51%
    border-radius 25px
    transform-origin center center // 老套路，定下变换中心点
    transform translate(-50%, -50%) // 矫正left和top的偏移
    background-clip border-box // 利用border-box属性值来使背景图片在border上也能显示
    background-position 50% 50%
    border-style solid
    border-color transparent // 设置透明border有助于背景的显示
    border-width 0 3px 0 0
    transition all .5s cubic-bezier(0.4, -0.95, 0.4, 1.8) // 设置贝塞尔曲线以达到Duang的效果
.b-switchBtn
  display none
  &:checked~.b-switchLabel // 设置开关在被选中时改变状态，配合transition就动了起来
    &:after
      left 78%
      border-width 0 0 0 3px

有疑问的或者有建议的可以在下方留言

于日常的项目中，小型项目还好，css即使没怎么规划也不至于特别的乱，但一旦项目里css有一定的基数时，css就会显得混乱起来。
于是。。。（以下是案例，可以直接跳至[正文]有关css命名的部分）

可能就遇到了这种情况:

情况1.

哎呀！这个地方布局有点问题，我改一下，于是看到了一堆css选择器，当你想要修改某个class时又害怕会影响到其他在使用这个class的组件，于是就很尴尬的又写了一个class加在上面。

情况2.

css命名冲突，你将要命名的class命已经被使用，更惨的是其他意思相近的命名单词也被使用了，这下就词穷了🤕

情况3.

毫无意义的命名：(写的时候class的意思只有自己和上帝知道，现在只有上帝知道了🙆🏻)

1
2
3

.abc {
    width: 200px;
}

其他前端：一脸懵逼

针对上面的问题，于是就在命名上开始做出改变，然而却😟

情况4.

过于语义化的命名（这里举个略微夸张且有些不恰当的栗子🌰）

1
2
3
4
5
6
7
8
9
10
11
12

.navigation-width-full-line{
    width: 100%;
    height: 50px;
}
``` 
这样是把意义描述清楚了，但是命名却是过长了
#### 情况5. 
有语义却不够直接简洁的命名    
```css
.navigation-responsive{
    flex: 1 1 10%;
}

这样无形中增加了记忆成本

命名规范 BEM

BEM是我很喜欢的一个命名规范
命名规则简单直接又不至于混乱
BEM的意思就是块（block）、元素（element）、修饰符（modifier）

1
2
3

.block {} // 顶级命名，代表了一类元素块或者一个模块
.block__element {} // 次级命名(使用两个英文下划线连接，后跟随次级名称，表示次级元素或属性)
.block--modifier {} // 状态命名(使用两个英文中划线连接，后跟随修饰符或状态名)

这样的写法可以的好处是可以避免css的嵌套，可以加快css渲染时的速度
栗子🌰

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<!-- 旧版命名 -->
<div class="person">
    <div class="head"></div>
    <div class="body"></div>
    <div class="foot"></div>
</div>
<div class="pug">
    <div class="head"></div>
    <div class="body"></div>
    <div class="foot"></div>
</div>
<style>
    // css选择时需要两个class
    .person .head {
        width: 100px;
    }
</styles>

<!-- BEM命名 -->
<div class="person">
    <div class="person__head"></div>
    <div class="person__body"></div>
    <div class="person__foot"></div>
</div>
<div class="pug">
    <div class="pug__head"></div>
    <div class="pug__body"></div>
    <div class="pug__foot"></div>
</div>
<style>
    // css选择时只要一个class
    .person__head {
        width: 100px;
    }
</styles>

BEM+emmet

相信很多同学有用过emmet,其前身就是大名鼎鼎的Zen coding
想了解的同学可以google一下emmet
而emmet对于BEM命名规范其实是有一套快速生成标签的规则的
发个栗子🌰
在emmet下这段代码

1

form.search-form>input.-username+input.-password[type=password]+button.-submit--active|bem

按下Tab后会生成

1
2
3
4

<form class="search-form">
    <input type="text" class="search-form__username">
    <input type="password" class="search-form__password">
<button id="J_Submit" class="search-form__submit--active"></button> <form>

如果仔细看第一段代码与第二段之间的区别就可以看出其中的奥义：

• 首个元素的class选择器会被作为BEM规则的头，后面的每一个以.-开头子元素编译后的class属性都将以这个头为开头
• 子元素可以以.-开头来代替父元素的class名，省去了重复书写的麻烦(即：.-username被编译成了.search-form__username)
• 子元素可以跟上--加修饰符来编译(即：.-submit--active被编译成了.search-form__submit--active)

这是一种快速生成标签的形式，方便的没话说
而有一部分同学已经不再直接写html标签了，而是使用了模板引擎了
我用的是pug（也就是之前的jade，现在已经更名为pug了）
模板引擎的好处是使整个结构看起来更加清晰有条理，也加快了编写页面的速度，
在使用模板引擎后就不在需要emmet了
but！
虽然不需要了，但是emmet的那种化繁为简的精神是可以继续存在滴，我特别喜欢这样的语法，
于是就开始了尝试在css命名上做研究

以下是我vue2.0Demo项目内有关css命名的部分

一开始看可能会有点懵逼，但是当看完以下6个小点再回头看之前的案例就会明白了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

/**
 * css命名使用 BEM+emmet 风格作为命名规范
 * 
 * 约定[分类名称][属性|组件名称]与[属性名]使用小写
 * 约定[描述]与[状态]使用首字母大写
 * [eg]:
 *  .[分类名称]-[属性|组件名称][描述]--[属性值|状态]
 *    => .l-flexV--c
 *    => .b-base--Active
 * 
 *  1.约定 [分类名称] 缩写:
 *    • .layout => .l- (布局部分)
 *    • .utils => .u- (工具部分)
 *    • .button => .b- (按钮部分)
 *    
 *  2.约定通用 [属性] 缩写:(以emmet联想风格为缩写)
 *    • width => w
 *    • height => h
 *    • color => c
 *    • background => bg
 *    • margin => m
 *    • padding => p
 *    • border => bd
 *    
 *  3.约定通用 [组件名称]:(这里不使用缩写，
 *    因为组件名可以自定义，缩写易混淆，会增加记忆成本)
 *    • flex => flex (这里所指的是弹性盒子)
 *    
 *  4.约定通用 [描述] 缩写:(以大写)
 *    • horizontal => H
 *    • vertical => V
 *    • normal => N
 *    
 *  5.约定通用 [属性值] 缩写:(以属性前缀 '--' + emmet联想风格为缩写)
 *    • center => --c
 *    • middle => --m
 *    • space-around => --sa
 *    
 *  6.约定通用 [状态] 缩写:(以属性前缀 '--' + 状态首字母大写，
 *    这里不使用缩写，因为状态名可以自定义，缩写易混淆，会增加记忆成本)
 *    • active => --Active
 */

因为是一边写vue2.0-demo项目一边写文字，所以以上是暂定的部分，后续有更新会及时在这里更新

本文章系列：vue2.0一起在懵逼的海洋里越陷越深 (http://leenty.com/tags/vuejs/)

就在今年的10月份，Vue2.0发布啦，来懵逼的海洋里一起下沉吧！

前段阵子都没有发随笔，一方面要准备一场考试，另一方面是在研究vue2.0，又一方面一时也不知道写点什么好。
（而其实最大的方面是自己找到了偷懒不写随笔的理由了。。。）

@周星星和江南另外三大才子有佳句流传：
山下一群鹅，嘘声赶落河.
下河捉鹅医肚饿，吃完回家玩…
呃…玩vue2.0 咳咳咳咳

先看看vue2.0多了哪些好玩的

• virtual-DOM（据说不是普通的Virtual-DOM）
• Templates || JSX || Hyperscript(现在，你可以选择你喜欢的编写模式进行开发了)
• 流式服务端渲染（这个听起来很厉害，后面一起研究）
• 其他（各种性能优化，更多想象发挥空间，更多可能）

伴随着vue2.0的更新，vue生态链的其他组件也跟着进行了更新

• vue-router
• vue-resource
• vue-cli

好，进入正题

先贴个地址，我的vue2.0的demo
这个demo使用vue-cli快速生成还发环境
加入vue-router做前端路由
加入vue-resource做ajax
加入vuex做状态管理
demo里目前使用hash模式
具体的会在接下来一一介绍

具体细节

好的，现在打开你的终端，开始开车啦！🚌

• 安装vue-cli

  1	npm install -g vue-cli

• 创建vue项目
  语法：

  1	vue init <template-name> <project-name>

这里我选择使用webpack来创建（可以参考git入门级-在github创建项目）

1

vue init webpack app

之后vue-cli就会询问Project name，你可以输入你的工程名，或者直接回车就会默认使用之前的名称
之后还会有一系列询问，你可以一路回车下来，这样就创建好了一个
大概会是这样子

• 安装依赖

  1

  npm i

当完成这一步步骤后就可以使用命令启动vue应用了

1

npm run dev

• 接下来就安装其他需要的组件，vue-router,vue-resource,vuex

  1	npm install vue-router vue-resource vuex --save

到这一步，vue项目的骨架已经好了。

vim从懵懂入坑到生无可恋

曾经，作为一名前端，也许不用太多在意去刻意的玩bash/shell什么的，毕竟之前的前端不会涉及这方面的需求。

随着node的流行，随着git的流行，各种模块管理器、任务管理器、打包工具的盛行，前端渐渐的也开始接触命令行一类的东西。
在使用git处理文件冲突的时候，如果不是用GUI的话，那么就需要使用vim打开冲突的文件进行解决了。

vim有3种模式，但常见的也只有两种，即Insert模式和Normal模式
其中

• Insert模式是我们正常的可以输入文本的状态
• Normal模式是输入命令的状态

  模式切换

  进入Insert模式：
• 按下I键,即：在当前字符前插入文本
• 按下shift+I,即：在当前行前插入文本
• 按下A键,即：在当前字符后追加文本
• 按下shift+A,即：在当前行后追加文本
  进入Normal模式(退出Insert模式)：
• 按下esc键

  快捷键

  vim的快捷键基本是在Normal模式下才起作用(废话！Insert模式输快捷键就是输入文本)

光标操作

起因

最近家里访问github速度越来越慢，今天已经是异常的慢了，于是开始寻找解决的办法
遇到打不开的网站，本能的搬起‘梯子‘去翻墙，问题就这么解决了。。。
不对啊！我去！
github什么时候需要翻墙访问啦？

so

我开始寻找不翻墙的方法。
先看这张图

发现其实github.com的响应速度并不慢，而真正拖慢速度的是assets-cdn.github.com（其中pending的部分）
这基本是由dns污染所导致，所以只要通过host映射到一个畅通的IP上就会变的好起来。
进入一个dns域名检测的网站，在其中查询assets-cdn.github.com
会搜出一个dns列表，选择其中TTL值最小的一个IP，复制出来
命令行工具打开你的hosts文件（这里以macOS为例,如果你使用windows的git命令行工具，操作就是差不多的）

1

sudo vim /etc/hosts

在hosts文件最下方添加刚刚复制出来的IP

1

151.101.xxx.xxx assets-cdn.github.com

具体vim操作步骤：

1. 按下shift + g跳至页尾
2. 按下o创建新的一行
3. 按下ctrl/command + v 粘贴刚刚复制的IP
4. 而后打个空格
5. 接着输入assets-cdn.github.com
6. 按下esc退出编辑模式
7. 输入:wq保存退出
   如此就大功告成了。
   如果还不会用vim，也可以用其他编辑器打开做修改。
   保存之后，就可以尝试再次访问github了，多刷几遍就能进去。
   如果还是进不去可以输入命令sudo dscacheutil -flushcache更新dns缓存，这样就可以进入了。