Vim 基本命令入门

_ _20180628165722
最近在学习 Linux,前面的基础知识学习了一下,进入了 Vim 的学习环节。感觉这个编辑器还是可以的,有特色,鼠标都不用,蛮炫酷。对于基本
的使用来讲还是很方便的。下面是一些我的学习笔记,大致就是一些常用的命令吧。这个博客就是使用 Vim 写的一个 Markdown 文档,就当是给自己练练手,加深学习的印象了。

前端工程师使用 Deepin 笔记

_ _20180704114914

笔者是一枚前端开发,在学习 Linux 的时候碰到了一个问题 —— 怎么练手?因为自己电脑上面装的是 Windows 系统,所以学习 Linux 的时候没办法进行练习,而敲指令是学习 Linux 最高效的途径,这就需要我装一个 Linux 虚拟机或者双系统了。最开始的时候我用 VMWare 的虚拟机装了个 Ubuntu,后来觉得 Linux 好像确实好用,虚拟机又太耗资源,再加上我的 Windows 越来越卡顿,我决定装一个双系统。

在 Deepin 中搭建 GitLab

入职半个月了,一直在接受业务知识以及企业文化知识的培训,下周终于要开始上岗入手项目了。由于公司使用自己搭建的 GitLab 服务作为项目版本控制器,所以我决定学习一下 GitLab,由于这货跟 GitHub 都是基于 Git,所以代码管理方面没有啥区别,主要学习的是 GitLab 服务的搭建。

一、安装步骤

输入一下命令更新源,然后安装依赖 openssh-serverca-certificates

1
2
$ sudo apt-get update
$ sudo apt-get install -y openssh-server ca-certificates

如果需要邮箱提醒服务,还需要安装 postfix,当然你也可以安装其他邮件服务。

浅谈 JavaScript 中的继承模式

最近在读一本设计模式的书,书中的开头部分就讲了一下 JavaScript 中的继承,阅读之后写下了这篇博客作为笔记。毕竟好记性不如烂笔头。

JavaScript 是一门面向对象的语言,但是 ES6 之前 JavaScript 是没有类这个概念的。即使 ES6 引入了 class,也只是基于 JavaScript 已有的原型继承模式的一个语法糖,并没有为 JavaScript 引入新的面向对象的继承模型。

但是 JavaScript 是一门非常灵活的语言,为了实现类和继承,JavaScript Developers 已经把原型玩出了花,下面介绍一下 JavaScript 中的继承模式。

JavaScript 中已有的继承模式包括以下六种:

  • 类式继承
  • 构造函数式继承
  • 组合式继承
  • 原型式继承
  • 寄生式继承
  • 寄生组合式继承

基于 Webpack 4 搭建 Vue 开发环境

自从工作之后,就已经很久没有写过博客了。时间被分割得比较碎,积累了一段时间的学习成果,才写下了这篇博客。

之前有写过 Webpack4 的文章,但是都比较偏入门,唯一的一篇实战篇 —— 基于Webpack搭建React开发环境,也是比较简单的,没有涉及到 CSS 抽取,第三方库打包等功能,这篇文章相对而言比较深入。但由于作者水平有限,难免存在谬误之处,欢迎大家指正。

还有没入门的童鞋可以参考我之前的文章:

一、初始化项目

在命令行中敲入如下命令:

1
$ mkdir Webpack-Vue && cd Webpack-Vue && npm init -y

Useful CSS Snippets

CSS

看了 30 Seconds CSS,有了许多收获,所以写下了这篇文章,算是收藏一些代码小片段,留作后用。

一、手写 Loading 动画

(1)弹性加载动画

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
.bounce-loading {
width: 20rem;
height: 10rem;
background-color:aqua;
display: flex;
justify-content: center;
align-items: center;
}
.bounce-loading > div {
width: 1rem;
height: 1rem;
border-radius: 0.5rem;
background-color:blueviolet;
margin: 0 0.5rem;
animation: bounce 1s infinite alternate;
}
@keyframes bounce {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(2rem);
opacity: 0.1;
}
}
.bounce-loading > div:nth-child(2) {
animation-delay: 0.2s;
}
.bounce-loading > div:nth-child(3) {
animation-delay: 0.4s;
}

HTML 代码如下:

1
2
3
4
5
<div class="bounce-loading">
<div></div>
<div></div>
<div></div>
</div>

效果如下:

img