Vim安装Markdown预览插件markdown-preview.vim

https://github.com/iamcco/markdown-preview.vim

阅读全文

记一次Hexo博客的莫名其妙错误

今天莫名其妙的把Node升级到v10.15.3,之前都版本都是8.几来的,然后碰巧提交了hexo,然后发现CSS样式显示异常,查看网站源码定位是因为找不到相应的CSS文件,然后手动提交了CSS代码,发现效果比之前都好看了一点点,但是整体效果还是很丑。

阅读全文

Git-Commit插件

作者:leohxj
链接:https://zhuanlan.zhihu.com/p/34223150
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

阅读全文

Git本地服务器搭建及使用详解


Git本地服务器搭建及使用

Git是一款免费、开源的分布式版本控制系统。众所周知的Github便是基于Git的开源代码库以及版本控制系统,由于其远程托管服务仅对开源免费,所以搭建本地Git服务器也是个较好的选择,本文将对此进行详细讲解。(推荐一家提供私有源代码免费托管的网站:Bitbucket,目前支持一个项目5个成员)

搭建环境:

服务器:intel i5 / 8g内存 / 64位操作系统  Ubuntu 15.04

PC: intel i5 / 8g内存 / 64位操作系统  Windows 7 旗舰版

第一部分:Git的基本操作

初始化操作
    $ git config -global user.name <name> #设置提交者名字
    $ git config -global user.email <email> #设置提交者邮箱
    $ git config -global core.editor <editor> #设置默认文本编辑器
    $ git config -global merge.tool <tool> #设置解决合并冲突时差异分析工具
    $ git config -list #检查已有的配置信息
创建新版本库
    $ git clone <url> #克隆远程版本库
    $ git init #初始化本地版本库
修改和提交
    $ git add . #添加所有改动过的文件
    $ git add <file> #添加指定的文件
    $ git mv <old> <new> #文件重命名
    $ git rm <file> #删除文件
    $ git rm -cached <file> #停止跟踪文件但不删除
    $ git commit -m <file> #提交指定文件
    $ git commit -m “commit message” #提交所有更新过的文件
    $ git commit -amend #修改最后一次提交
    $ git commit -C HEAD -a -amend #增补提交(不会产生新的提交历史纪录)
查看提交历史
    $ git log #查看提交历史
    $ git log -p <file> #查看指定文件的提交历史
    $ git blame <file> #以列表方式查看指定文件的提交历史
    $ gitk #查看当前分支历史纪录
    $ gitk <branch> #查看某分支历史纪录
    $ gitk --all #查看所有分支历史纪录
    $ git branch -v #每个分支最后的提交
    $ git status #查看当前状态
    $ git diff #查看变更内容
撤消操作
    $ git reset -hard HEAD #撤消工作目录中所有未提交文件的修改内容
    $ git checkout HEAD <file1> <file2> #撤消指定的未提交文件的修改内容
    $ git checkout HEAD. #撤消所有文件
    $ git revert <commit> #撤消指定的提交
分支与标签
    $ git branch #显示所有本地分支
    $ git checkout <branch/tagname> #切换到指定分支或标签
    $ git branch <new-branch> #创建新分支
    $ git branch -d <branch> #删除本地分支
    $ git tag #列出所有本地标签
    $ git tag <tagname> #基于最新提交创建标签
    $ git tag -d <tagname> #删除标签
合并与衍合
    $ git merge <branch> #合并指定分支到当前分支
    $ git rebase <branch> #衍合指定分支到当前分支
远程操作
    $ git remote -v #查看远程版本库信息
    $ git remote show <remote> #查看指定远程版本库信息
    $ git remote add <remote> <url> #添加远程版本库
    $ git fetch <remote> #从远程库获取代码
    $ git pull <remote> <branch> #下载代码及快速合并
    $ git push <remote> <branch> #上传代码及快速合并
    $ git push <remote> : <branch>/<tagname> #删除远程分支或标签
    $ git push -tags #上传所有标签

附:参考

中文版权威教程Git Pro

简明使用指导

第二部分:搭建C/S架构Git服务器

一、搭建步骤

Git支持本地(local)、ssh、git和http(s)这四种协议进行传输,本部分将基于ssh协议搭建(此协议不利于开源,适合公司团队使用)。

本文操作大部分在Ubuntu服务器端完成。

1、我们在服务器端新增加一个用户(本文为gitadmin)用于管理git仓库:

Ubuntu下启动终端,键入命令:
$ sudo useradd -m gitadmin   --首次执行sudo命令需要按提示输入管理员密码
$ sudo passwd gitadmin       --设置用户gitadmin密码

将gitadmin设置为管理员用户,方法很多,这里用通过修改sudoers文件实现:

$ sudo vim /etc/sudoers

接下来进到vim编辑器,键入i进入插入模式,找到下面这行并添加gitadmin:

# User privilege specification
root ALL=(ALL:ALL)  ALL
gitadmin  ALL=(ALL:ALL)  ALL

键盘esc退出插入模式,输入冒号(:),光标出现在底端,输入wq回车退出。
$ su gitadmin                   --输入刚刚设置的密码切换到gitadmin用户

2、安装配置ssh服务

$ sudo apt-get install openssh-server openssh-client

按提示输入管理员密码,同意[Y],安装完毕。OpenSSH为自由软件,是ssh的开源实现。

$ sudo vim /etc/ssh/sshd_config

找到下面几行,去掉前面"#"注释,并设置:

StrictModes  no --在用户名和其公钥文件名不匹配时将通过验证

RSAAuthentication yes   --使用纯的RSA认证
PubkeyAuthentication yes    --允许Public Key AuthorizedKeysFile     %h/.ssh/authorized_keys

上面这个配置是设定免密码登陆的账号公钥存储路径

ps:如果是小团队,把每个人的公钥收集起来放到/home/git/.ssh/authorized_keys文件里问题不大;如果团队较大或是有权限要求,这种方式就很不灵活了,这时可以用Gitosis来管理公钥,我将在后文介绍。

接着重启ssh服务

$ sudo service ssh restart   或是   $ sudo /etc/init.d/ssh restart

ssh服务器到这里安装配置完毕。

出于安全考虑,可以在本教程配置完毕后设置gitadmin用户不允许登录shell,可通过 用vim打开编辑/etc/passwd文件并找到下面的一行(自行创建的用户名):

gitadmin:x:1001:1001:,,,:/home/gitadmin:/bin/bash

改为:

gitadmin:x:1001:1001:,,,:/home/gitadmin:/usr/bin/git-shell

这样,gitadmin用户可以正常通过ssh使用git,但无法登录shell,因为我们为gitadmin 用户指定的git-shell每次一登录就自动退出

3、安装配置git服务器

$ sudo apt-get install git git-core   --安装git服务器

$ sudo mkdir /home/gitadmin/repositories    --创建git仓库存储目录

$ sudo chown gitadmin:gitadmin /home/gitadmin/repositories  --设定所有者

$ sudo chmod 755 /home/gitadmin/repositories   --设置仓库访问权限

接下来初始化全局设置

$ git config --global user.name “gitadmin”

$ git config --global user.email “gitadmin@server”

@后的server为本机IP,可用ifconfig查看

4、基本的git服务器(without gitosis)

这里是git本地服务器最基本的实现,不使用下文讲解的gitosis进行管理,适合人数较 少并且没有权限管理要求的小团队。

PC客户端:

首先安装git客户端(参见后文方法)

配置无密码登陆需拷贝pc端公钥至/home/git/.ssh/authorized_keys,在git.bash下:

$ ssh-keygen -t rsa       --生成本机密钥,公钥默认在~/.ssh/id_rsa.pub

$ ssh-copy-id gitadmin@host   --上传公钥,远程主机host为服务器IP

若不用以上命令,用下面这条命令则清楚地解释了公钥的保存过程:

$ ssh gitadmin@host 'mkdir -p .ssh && cat >> .ssh/authorized_keys' < ~/.ssh/id_rsa.pub

Ubuntu服务器端:

你可以在服务器端自行创建仓库,先选定一个目录作为Git仓库,假定是/srv/sample.git, 在/srv目录下输入命令:

$ sudo git init --bare sample.git

$ sudo chown -R gitadmin:gitadmin sample.git --把owner改为gitadmin

这样Git就会创建一个裸仓库,裸仓库没有工作区,因为服务器上的Git仓库纯粹是为 了共享,所以不让用户直接登录到服务器上去改工作区,并且服务器上的Git仓库通常 都以.git结尾。

至此,最基本的git本地服务器已经搭建完毕,可以通过git clone命令克隆远程仓库在各自电脑上运行了。

5、安装配置gitosis

简单地说,Gitosis 就是一套用来管理 authorized_keys文件和实现简单连接限制的脚本。有趣的是,用来添加用户和设定权限的并非通过网页程序,而只是管理一个特殊的 Git 仓库。你只需要在这个特殊仓库内做好相应的设定,然后推送到服务器上,Gitosis 就会随之改变运行策略。

创建管理员公钥和私钥:

在默认用户的主目录路径下,运行以下命令,按照提示创建(可直接回车略过) $ ssh-keygen -t rsa

默认生成2048位,如果需要提高安全级别,也可以通过下面的命令

$ ssh-keygen -t rsa -b 4096

公钥和私钥默认会保存在~/.ssh目录下,如下所示:

id_rsa id_rsa_pub(公钥) known_hosts

安装gitosis:

安装python的setup tool

$sudo apt-get install python-setuptools

获取并安装gitosis

$ cd /tmp --切换到缓存目录下载安装包,在关机时会被系统自动清理

$ git clone https://github.com/tv42/gitosis.git --下载安装包

$ cd gitosis

$ sudo python setup.py install --到此gitosis安装完成

配置gitosis:

gitosis会默认将git仓库放在gitadmin主目录下,并自动管理authorized_keys文件 :

$ cp ~/.ssh/id_rsa.pub /tmp --拷贝出管理员公钥

向gitosis添加公钥并初始化:

$ sudo -H -u gitadmin gitosis-init < /tmp/id_rsa.pub

Initialized empty Git repository in /home/gitadmin/repositories/gitosis-admin.git/

Reinitialized existing Git repository in /home/gitadmin/repositories/gitosis-admin.git/

这样该公钥的拥有者gitadmin就能修改用于配置Gitosis的那个特殊Git仓库了。接 下来,需要手工对该仓库中的post-update 脚本加上可执行权限:

$ sudo chmod 755 /home/gitadmin/repositories/gitosis-admin.git/hooks/post-update

到此为止git服务器端的搭建结束,管理员为gitadmin。

6、仓库管理员信息:

现在在终端下进到用户主目录,克隆Gitosis的控制仓库:

$ git clone gitadmin@server:gitosis-admin.git

当前目录下将得到一个名为 gitosis-admin 的工作目录,主要由两部分组成:

$ cd gitosis-admin

$ find .

./gitosis.conf

./keydir

./keydir/gitadmin.pub

gitosis.conf 文件是用来设置用户、仓库和权限的控制文件。keydir 目录则是保存所有 具有访问权限用户公钥的地方(每人一个)。在 keydir 里的文件名(如我gitadmin.pub) 应该跟你的不一样,Gitosis会自动从使用 gitosis-init 脚本导入的公钥尾部描述中获取 该名字。用编辑器 gitosis.conf 文件的内容,只包含与刚刚克隆的 gitosis-admin 相关 的信息:

$ cat gitosis.conf

[gitosis]

[group gitosis-admin]

members = gitadmin

writable = gitosis-admin

它显示用户 gitadmin是唯一能管理 gitosis-admin 项目的人。

二、测试用例

PC客户端下:

1、安装git客户端

访问git官网,下载安装包(许多Windows上的git服务都以msysgit作为支撑支撑软件,建议读者安装):

下载后按默认配置安装完毕,会出现git.bash命令行工具:

1、接下来的pc端工作在git.bash命令行内完成:

测试能否ssh登录远程主机:

$ cd ~

$ ssh gitadmin@host --远程登录

由于无法确认远程host主机的真实性,shell会告诉你它的公钥指纹让你确认,键入yes:

Are you sure you want to continue connecting (yes/no)?  yes

输入远程主机gitadmin的密码,正常情况下这里就能够登录成功,显示gitadmin用户

$ exit --退出远程登录

配置免密码登陆:

$ ssh-keygen -t rsa       --生成本机密钥,公钥默认在~/.ssh/id_rsa.pub

未使用gitosis情况下执行:

$ ssh-copy-id gitadmin@host   --上传公钥,远程主机host为服务器IP

使用gitosis管理公钥则执行:

$ scp ~/.ssh/id_rsa.pub gitadmin@host:/tmp --远程拷贝公钥至服务器临时目录

2、可视化工具

在安装官方git的同时,它也给我们提供了gitk 和 git-gui两种可视化工具:

gitk 是一个历史记录的图形化查看器。

cd 到一个Git仓库,然后键入:

$ gitk [git log options]

git-gui 则主要是一个用来制作提交的工具:

$ git gui

注意:

本部分末参考链接里有官网推荐的Git图形化客户端(github上还有更多选择),更亲近不熟悉命令行的使用者。由于这一部分的选择较多,但究其实现原理还是一样的,所以这里就不做延伸。请使用者参考本文或搜索自行选择的客户端相应教程进行配置。

Ubuntu服务器端下:

1、管理gitosis

$ cd ~

$ git clone gitadmin@host:/home/gitadmin/gitosis-admin.git

$ cd gitosis-admin/

接下来各个用户按照前面安装配置gitosis时提到的办法生成各自的ssh公钥文件后, scp上传到服务器/tmp 目录下,也可由服务器管理员手动取得,并最终重命名为各用户 名后拷贝到keydir目录下,就能实现使用git协同作业了。

2、gitosis.conf文件讲解:

[gitosis]

[group gitosis-admin]

writable = gitosis-admin

members = a@server1

[group developers]

writable = helloworld

members = a@server1 b@server2

[group test]

readonly = helloworld

members = c@server3

这个配置文件表达了如下含义:gitosis-admin组成员有a,该组对gitosis-admin仓库 有读写权限; developers组有a,b两个成员,该组对helloworld仓库有读写权限; test 组有c一个成员,对helloworld仓库有只读权限。当然目前这些配置文件的修改只是 在你的本地,你必须推送到gitserver上才能真正生效。

操作方法:

加入新文件、提交并推送到git服务器:

$ git add . --添加命令,这里的点’.’表示当前目录

$ git commit -am "add helloworld project and users" --提交,并描述此次行为

$ git remote add origin ssh://gitadmin@host:helloworld.git

添加远程主机

$ git push origin master --推送到服务器master分支

这里介绍远程主机URL修改方法,需要进到待修改仓库目录下:

方法一:先删除$ git remote rm origin 再添加$ git remote add origin URL

方法二:$ git remote set-url origin URL

方法三:进入.git目录下修改config文件

3、演示操作

现在我们来添加一个新项目。为此我们要建立一个名为mobile的新段落,在其中罗列 手机开发团队的开发者,以及他们拥有写权限的项目。由于 'gitadmin' 是系统中的唯 一用户,我们把他设为唯一用户,并允许他读写名为 iphone_project 的新项目:

[group mobile]

members = gitadmin

writable = iphone_project

修改完之后,提交 gitosis-admin 里的改动,并推送到服务器使其生效:

选择目录创建裸仓(本步骤可省略,我们不用事先到服务器上手工创建该项目的裸仓库, Gitosis会在第一次遇到推送时自动创建):

$ mkdir iphone_project.git

$ sudo git init --bare iphone_project.git

$ sudo chown -R gitadmin:gitadmin iphone_project.git

添加新工程并提交用户组:

$ git commit -am 'add iphone_project and mobile group'

在新工程 iphone_project 首次推送数据到服务器前,得先设定该服务器地址为远程 仓库,注意使用gitosis可以不用指明完整路径,只需要一个冒号加项目名字即可, Gitosis会自动帮你映射到实际位置:

$ git remote add origin gitadmin@host:iphone_project.git

推送到服务器:

$ git push origin master

要和朋友们在一个项目上协同工作,就得重新添加他们的公钥。不过这次不用在服务器 上一个一个手工添加到 ~/.ssh/authorized_keys 文件末端,而只需管理 keydir 目录中的 公钥文件(文件的命名由 gitosis.conf 中用户的标识名决定),并修改gitosis.conf , 最后用前面的方法推送到服务器配置生效。

现在我们为 John,Josie 和 Jessica 添加公钥:

$ cp /tmp/id_rsa.john.pub keydir/john.pub

$ cp /tmp/id_rsa.josie.pub keydir/josie.pub

$ cp /tmp/id_rsa.jessica.pub keydir/jessica.pub

然后把他们都加进 'mobile' 团队,让他们对 iphone_project 具有读写权限:

[group mobile]

members = scott john josie jessica

writable = iphone_project

如果你提交并推送这个修改,四个用户将同时具有该项目的读写权限。

Gitosis 也具有简单的访问控制功能。如果想让John只有读权限,可以这样做:

[group mobile]

members = scott josie jessica

writable = iphone_project

[group mobile_readonly]

members = john

readonly = iphone_project

现在 John 可以克隆和获取更新,但 Gitosis 不会允许他向项目推送任何内容。像这 样的组可以随意创建,多少不限,每个都可以包含若干不同的用户和项目。甚至还可以 指定某个组为成员之一(在组名前加上 @前缀),自动继承该组的成员:

[group mobile_committers]

members = scott josie jessica

[group mobile]

members   = @mobile_committers

writable  = iphone_project

[group mobile_another]

members   = @mobile_committers john

writable  = another_iphone_project

如果遇到意外问题,试试看把 loglevel=DEBUG 加到 [gitosis] 的段落,即把日志设置为调试级别,记录更详细的运行信息。如果一不小心搞错了配置,失去了推送权限,也可以手工修改服务器上的 /home/git/.gitosis.conf 文件,因为Gitosis 实际是从该文件读取信息的。它在得到推送数据时,会把新的 gitosis.conf 存到该路径上。所以如果你手工编辑该文件的话,它会一直保持到下次向gitosis-admin 推送新版本的配置内容为止。

三、参考

SSH原理与应用

官网手册<pro git>,参看服务器部分

Git服务器Gitosis安装设置

Git的可视化客户端(GUI Client)

第三部分:搭建B/S架构Git服务器

一、搭建步骤

本部分将讲解如何基于浏览器访问Git服务器,虽然 GitWeb 相当简单,但眼下有一些更现代,功能更全的Git服务器,其中有几个开源的解决方案可供人们选择安装。GitLab是其中最出名的一个,我将使用它作为示例并讨论其安装和使用。这比GitWeb要复杂的多并且需要更多的维护,但它是一个功能更为健全的方案。

1、安装gitlab:

GitLab是一个数据库支持的开源web应用,可通过Web界面进行访问公开的或者私人项目。它是一个拥有Github类似的功能、实现了自托管的Git项目仓库。所以相比于其他git服务器,它的安装过程涉及到更多的东西。幸运的是,这个过程有非常详细的文档说明和支持,而且在Bitnami(一个产生的开源软件的项目)可以获取一键安装包:

在Ubuntu服务器端打开Bitnami,由于我的是64位操作系统,选择第一个进行下载。(本教程基于gitlab 8.7.4-0)完成之后在终端下用cd命令进入其所在目录:

$ sudo chmod +x bitnami-gitlab-8.7.3-0-linux-installer.run --修改权限,文件名以自己为准

$ sudo ./bitnami-gitlab-7.4.3-0-linux-installer.run --以管理员权限执行安装

接下来将出现如下安装界面(此前服务器需要安装SSH server),整个过程基本点击Next就可以完成安装:

注意这里的小叉代表勾选

设置你自己的邮箱、登录名、密码,这将在之后的网页端作为管理员账户登录信息

如果你的默认端口80, 3306有占用,则需要修改或者解除占用。我的80端口由于之前安装过Apache而被占用,所以我将之卸载。(此一键安装包已经内置了Apache2)

这里提供一条卸载命令:$ sudo apt-get autoremove [application or package-name]

用户在网页端注册的时候需要对所填邮箱进行验证,所以这里的mail support建议勾选上,邮箱验证没通过是无法登录gitlab的。当然如果你在此并没有勾选或者注册后没有收到验证邮件也不要紧,在管理员登录网页端后,在全局设置界面可以方便的通过所有待验证用户。接下来一路Next直至Finish,Gitlab的安装到此完成,之后会有帮助窗口出现,有兴趣可以看看。

注意,在安装的目录下有个文件:ctlscript.sh,通过./ctlscript.sh可以关闭和启动gitlab服务器:(具体见README文件)

$ sudo /opt/gitlab-8.7.3-0/ctlscript.sh [start/stop/restart]

gitlab在安装目录下有一个GUI管理控制台,启动命令:

$ sudo /opt/gitlab-8.7.3-0/manager-linux-x64.run

2、用户管理:

管理员登录:

接下来咱们打开Ubuntu的浏览器,在地址栏输入localhost/将打开gitlab登录页面,输入注册时设置的邮箱(或者登录名)以及密码,进入gitlab。

注意:这里的地址也可以输入安装过程中提示的本地IP,我的是127.0.1.1;如果在局域网内其他电脑上,则在地址栏输入服务器IP。(Ubuntu命令行下ifconfig可以得到本地IP)

新用户注册:

在客户端电脑打开浏览器,在地址栏输入局域网服务器IP进入登录/注册页面:

 

 

 

 

 

 

 

 

邮箱验证(如果没收到邮件继续参照下方操作)

回到刚刚登录的服务器端的浏览器管理员页面,点击右上角的全局设置(下图中的扳手)

点击左侧面板的Users

刚刚在PC端注册的新用户developer01出现在这里,点击用户名:

就能在接下来的页面对其手动进行验证,点击Confirm user,此验证栏将消失,代表新用户developer01已经通过验证,注册成功。此时的PC端再次登录就可以进入Gitlab啦!

二、测试用例

经过以上的操作,希望大家对Gitlab页面布局有一定的熟悉,接下来我将讲解在各种环境下如何部署项目代码仓库并进行基本操作。

Gitlab的管理员页面中,在左侧的面板下可以非常便捷地创建用户、用户组、新工程,并进行管理,还集成了各类事件消息。在为新工程添加用户时可以设置其权限,添加后同样可以在左侧面板的Members选项面对其进行管理。

比如我在管理员端创建了mobiledevelopers用户组,并在该组下创建了新工程mobile_dev,并添加了用户developer01,而此时的developer01并没有办法对此项目仓库进行Git操作,提示需要添加SSH秘钥:

参考前文生成的我们需要的ssh公钥,其储存路径为~/.ssh/id_rsa.pub(用户主目录下.ssh/文件夹的id_rsa.pub),找到并用任意文本编辑器(推荐Notepad++)打开,复制其全部内容(Ctrl+A、Ctrl+C),返回浏览器页面点击add an SSH key :

将公钥粘贴(Ctrl+V)至key栏,下边的Title在点击时将自动填充,最后Add key添加成功,到此用户developer01对此项目仓库将具备管理员赋予的权限。

Web页面:

进入项目,点击左侧面板Files选项,可进行文件的编辑、上传,文件夹的上传,创建新分支和标签(管理员)等行为。

例:创建一个新文本文件filetest01:

提交后叫在左侧的Merge Requests将出现此合并请求。

命令行:

新建Git项目

Git global setup(Git全局设置):

$ git config --global user.name "name"

$ git config --global user.email "name@email.com"

Create Repository(创建仓库)

$ mkdir common-util

$ cd common-util

$ git init

添加并提交文件:

$ touch README

$ git add README

$ git commit -m 'first commit'

$ git remote add origin git@server:devteam/common-util.git

$ git push -u origin master

添加已存在Git项目:

$ cd existing_git_repo
$ git remote add origin git@server:devteam/common-util.git
$ git push -u origin master

到此可正常进行git操作,具体请参看第一部分。

客户端:

本教程介绍的客户端均为Windows环境下。

SourceTree

使用SourceTree软件进行代码开发的管理,客户端免费支持windows和苹果系统,下载地址:http://www.sourcetreeapp.com/。

安装过程中需要认证用户,在FQ环境下访问Atlassian注册账户后继续安装,之后会下载一些依赖,完成后可选择跳过初始设置。

这里对SSH key登录进行讲解:

1、生成SSH keys:点击工具--创建SSH秘钥--点击Generate--点击Save public key和save private key,保存好公钥和私钥

2、Gitlab 配置SSH keys:浏览器打开Gitlab登录自己的账户,按前面提到的方法添加公钥SSH keys。

3、客户端导入私钥:回到source tree的工具,点击“选项”,选择上次生成的SSH秘钥,点击“确定”即可添加成功。

4、SSH助手配置:点击“启动SSH助手”,点击“Add Key”,选择之前导出的私钥,添加成功后,查看公钥跟Gitlab网页添加的相同,则说明配置成功。

Eclipse中使用git--Egit:

EGit是Eclipse上的Git插件,官方内容参看:http://wiki.eclipse.org/EGit

EGIT使用教程http://my.oschina.net/doloop/blog/221800

Git Bash+EGit在项目中配合使用最常用方法:

http://blog.csdn.net/hongshan50/article/details/22582049

Visual Studio 中使用git:

官方教程:https://www.visualstudio.com/en-us/get-started/code/gitquickstart

三、参考

gitlab的用户使用手册

Bitnami GitLab Wiki

GitLab版本管理

gitlab多人协同工作

 

 

PS:

  最近入职新的团队,需要搭建Git服务器,这就有了这篇博文,希望能对读者有所帮助。

  今天是5-2-0,祝还单着的程序猿们(包括我)都找到自己的lovely girl!

阅读全文

Mac、Linux、树莓派 · Sunny-Ngrok说明文档


Ngrok Mac、Linux、树莓派使用教程

1、下载客户端

根据自己的操作系统去下载对应的 客户端

2、启动隧道

Mac、Linux、树莓派的使用方式是一样的。Windows才会不一样。但是它们的启动方式都是通过隧道id启动,隧道id可以在隧道管理的列表里面获得。这里以映射http服务为例。

Mac、Linux、树莓派

 ./sunny clientid 隧道id 

启动多个隧道

 ./sunny clientid 隧道id,隧道id 

要想后台运行可以使用 setsid 命令

 setsid ./sunny clientid 隧道id & 

阅读全文

Sunny-Ngrok http前置域名使用方法


Sunny-Ngrok http使

时间:2017-02-22 01:33栏目:Sunny-Ngrok浏览:200028赞:325踩:115字体:

.

以下为本篇文章全部内容:

使用Sunny-Ngrok赠送的免费域名进行http服务映射

1、首先在本站注册成为会员

2、开通隧道

在上图中表单信息解释:

    隧道名称:可以随便填写,只是为了使用者在往后之后这个隧道是干嘛的

    前置域名:服务器免费赠送的域名,请不要带上后缀,如果要sunny.ngrok.cc 只需要填写 sunny 即可 ,千万不要填写成sunny.ngrok.cc否则域名会是sunny.ngrok.cc.ngrok.cc

    本地端口:可以为同一个局域网内任意一台机器进行映射,只需要填对ip和端口就行,例如:192.168.1.1:80

    http验证用户名:非必填项,在需要的时候填写,否则可以不填

    http验证密码:非必填项,在需要的时候填写,否则可以不填

3、在需要映射的机器建立web服务

    如果没有启动web服务将会看到下图提示

    

4、下载客户端

    

    根据自己的操作系统需求下载相对于版本

5、启动映射服务

    Linux或者Mac系统下启动,需要进入到客户端的目录执行以下命令,通过隧道管理找到隧道id,然后执行

  1. ./sunny clientid 隧道id

   

    

    看到这样则是成功启动一条隧道,启动多条隧道把多条隧道id使用英文逗号隔开就可以了。例如:

  1.   ./sunny clientid c7fb2defb4081919,3e23d14f040b2b12

    上面命令就可以启动多条隧道了

6、访问服务

    然后通过启动成功界面上的链接访问网站如果显示是内网搭建的web服务里面的内容就说明成功了


看完本文还不懂?那么你就来看视频教程吧。视频地址:http://video.tudou.com/v/XMjYzNTIwNTE3Ng==.html


听说点赞是一种美德        

阅读全文

一个前端的2018总结,2019展望


技术胖
2019年01月14日阅读 17127

一个前端的2018总结,2019展望 | 掘金年度征文

2018年总结:

我是技术胖,我来参加征文了,其实我在2018年年底时,写过一篇总结文章了,看来是写早了。

开篇改版大江大河里的一句话:

作一个程序员12年了,我一直把技术当成理想,这理想是我心里的光,我愿意做一个失志前行的逐梦人,穷山距海,不可阻挡。不尽狂澜走沧海,一拳天与压潮头。我赶上了IT最好的时代,我不想辜负这个时代。胖子,继续加油。

2018年已经过去15天了,这是让人神往和欣喜的一年。既然是写给别人看的,就要有价值,所以本文不会唧唧歪歪说自己的收获,而是给别人带来了一些帮助的总结。

在这一年里,我录制了160多集视频。视频一年播放量260万(都是免费的,当然播放量高)我帮助了200多位前端爱好者走上了工作岗位(跟我反馈的,我相信还有没反馈的),帮助13位小伙伴走进了BAT这样的一线大厂(当然他们能进入,是自己的努力,我只是提供了些视频和内推机会)。

我在这一年里也遭到了很多利益熏心的教育机构的指责和唾骂:不专业,没水平,英语发音不准,有大阴谋....无所谓,因为相信善人有善报。

还有值得说的是,就在写这篇文章的时候,我刚出院不到10个小时,这次生病我经历了很多第一次:第一次接受抢救,第一次手术,第一次一晚上作四次胃镜(每次都生不如死,很痛苦),第一次感受有那么多医生在为我的生命而努力(价格也是不菲),第一次跟老婆嘱咐后世(把自己支付宝,微信里的小金库都转给了老婆)并简单写了一份遗嘱。

所以劝诫所有的程序小伙伴多注意身体,多运动,身体才是我们写代码的本钱。

我的288集免费视频

我把2018年所有我录制的视频发布到这里,希望可以帮助大家(其实之前发了,但是掘金的领导说让我重新写,才能参加活动)。在上次发的基础上,我又增加了20多集的Flutter实例视频。希望大家给我一个赞和评论。视频持续更新,每周三集免费视频教程。

我不是讲师,我还在一线写代码,视频都是晚上下班后和早上4点30起来录制的。站在代码一线,才知道程序员最需要的知识。

Flutter免费视频教程

  1. 课程说明,有用的废话: jspang.com/post/flutte…

  2. 认识一下Flutter : jspang.com/post/flutte…

  3. Flutter开发环境搭建Windows版: jspang.com/post/flutte…

  4. 安装AVD虚拟机 Flutter跑起来 :jspang.com/post/flutte…

  5. VSCode下如何玩转Flutter :jspang.com/post/flutte…

  6. 写一个HelloWorld程序: jspang.com/post/flutte…

  7. Text Widget 文本组件的使用:jspang.com/post/flutte…

  8. Container容器组件的使用1:jspang.com/post/flutte…

  9. Container容器组件的使用2:jspang.com/post/flutte…

  10. Image图片组件的使用: jspang.com/post/flutte…

  11. ListView 列表组件简介: jspang.com/post/flutte…

  12. 横向列表的使用:jspang.com/post/flutte…

  13. 动态列表的使用:jspang.com/post/flutte…

  14. GridView网格列表组件: jspang.com/post/flutte…

  15. 水平布局Row的使用:jspang.com/post/flutte…

  16. 垂直布局Column组件:jspang.com/post/flutte…

  17. Stack层叠布局: jspang.com/post/flutte…

  18. Stack的Positioned属性:jspang.com/post/flutte…

  19. 卡片组件布局:jspang.com/post/flutte…

  20. 一般页面导航和返回:jspang.com/post/flutte…

  21. 导航参数的传递和接收(1):jspang.com/post/flutte…

  22. 导航参数的传递和接收(2):jspang.com/post/flutte…

  23. 页面跳转并返回数据:jspang.com/post/flutte…

  24. 静态资源和项目图片的处理:jspang.com/post/flutte…

  25. Flutter客户端打包:jspang.com/post/flutte…

  26. 底部导航栏制作-1:jspang.com/post/flutte…

  27. 底部导航栏制作-2:jspang.com/post/flutte…

  28. 不规则底部工具栏制作-1:jspang.com/post/flutte…

  29. 不规则底部工具栏制作-2:jspang.com/post/flutte…

  30. 酷炫的路由动画-1:jspang.com/post/flutte…

  31. 酷炫的路由动画-2:jspang.com/post/flutte…

  32. 毛玻璃效果制作:jspang.com/post/flutte…

  33. 保持页面状态:jspang.com/post/flutte…

  34. 保持页面状态-2:jspang.com/post/flutte…

  35. 一个不简单的搜索条-1:jspang.com/post/flutte…

  36. 一个不简单的搜索条-2:jspang.com/post/flutte…

  37. 流式布局 模拟添加照片效果:jspang.com/post/flutte…

  38. 展开闭合案例:jspang.com/post/flutte…

  39. 展开闭合列表案例:jspang.com/post/flutte…

  40. 贝塞尔曲线切割:jspang.com/post/flutte…

  41. 打开应用的闪屏动画案例:jspang.com/post/flutte…

  42. 右滑返回上一页案例:jspang.com/post/flutte…

  43. ToolTip控件实例:jspang.com/post/flutte…

  44. Draggable控件实例:jspang.com/post/flutte…

Nginx免费视频教程

  1. 初识Nginx和环境准备:jspang.com/post/nginx.…

  2. Nginx的快速搭建:jspang.com/post/nginx.…

  3. Nginx基本配置文件详讲:jspang.com/post/nginx.…

  4. Nginx服务启动、停止、重启:jspang.com/post/nginx.…

  5. 自定义错误页和访问设置:jspang.com/post/nginx.…

  6. Nginx访问权限详讲:jspang.com/post/nginx.…

  7. Nginx设置虚拟主机:jspang.com/post/nginx.…

  8. Nginx使用域名设置虚拟主机:jspang.com/post/nginx.…

  9. Nginx反向代理的设置:jspang.com/post/nginx.…

  10. Nginx适配PC或移动设备:jspang.com/post/nginx.…

  11. Nginx的Gzip压缩配置:jspang.com/post/nginx.…

TypeScript免费视频教程

  1. 初识TypeScript:jspang.com/post/typesc…

  2. 开发环境的安装: jspang.com/post/typesc…

  3. 变量类型的那些事:jspang.com/post/typesc…

  4. TypeScript的函数:jspang.com/post/typesc…

  5. 三种函数的定义方式:jspang.com/post/typesc…

  6. 函数中变量的作用域:jspang.com/post/typesc…

  7. 引用类型-数组:jspang.com/post/typesc…

  8. 引用类型-字符串:jspang.com/post/typesc…

  9. 引用类型-日期对象:jspang.com/post/typesc…

  10. 引用类型-正则表达式:jspang.com/post/typesc…

  11. 面向对象编程-类的声明和使用:jspang.com/post/typesc…

  12. 面向对象编程-修饰符:jspang.com/post/typesc…

  13. 面向对象编程-继承和重写:jspang.com/post/typesc…

  14. 面向对象编程-接口:jspang.com/post/typesc…

  15. 面向对象编程-命名空间:jspang.com/post/typesc…

Vue2.x免费视频教程

  1. 走起我的Vue2.0:jspang.com/post/vue2-1…

  2. v-if v-else v-show 指令:jspang.com/post/vue2-1…

  3. v-for指令 :解决模板循环问题:jspang.com/post/vue2-1…

  4. v-text & v-html:jspang.com/post/vue2-1…

  5. v-on:绑定事件监听器:jspang.com/post/vue2-1…

  6. v-model指令:jspang.com/post/vue2-1…

  7. v-bind 指令:jspang.com/post/vue2-1…

  8. 其他内部指令(v-pre & v-cloak & v-once):jspang.com/post/vue2-1…

  9. Vue.directive 自定义指令:jspang.com/post/vue2-2…

  10. Vue.extend构造器的延伸:jspang.com/post/vue2-2…

  11. Vue.set全局操作:jspang.com/post/vue2-2…

  12. Vue的生命周期(钩子函数):jspang.com/post/vue2-2…

  13. Template 制作模版:jspang.com/post/vue2-2…

  14. Component 初识组件:jspang.com/post/vue2-2…

  15. Component 组件props 属性设置:jspang.com/post/vue2-2…

  16. Component 父子组件关系:jspang.com/post/vue2-2…

  17. Component 标签:jspang.com/post/vue2-2…

  18. propsData Option 全局扩展的数据传递:jspang.com/post/vue2-3…

  19. computed Option 计算选项:jspang.com/post/vue2-3…

  20. Methods Option 方法选项:jspang.com/post/vue2-3…

  21. Watch 选项 监控数据:jspang.com/post/vue2-3…

  22. Mixins 混入选项操作:jspang.com/post/vue2-3…

  23. Extends Option 扩展选项:jspang.com/post/vue2-3…

  24. 实例入门-实例属性: jspang.com/post/vue2-4…

  25. 实例方法:jspang.com/post/vue2-4…

  26. 实例事件:jspang.com/post/vue2-4…

  27. 内置组件 -slot讲解:jspang.com/post/vue2-4…

Vue-cli 免费视频教程

  1. Vue-cli,开始吧骚年:jspang.com/post/vue-cl…

  2. Vue-cli项目结构讲解:jspang.com/post/vue-cl…

  3. 解读Vue-cli的模板: jspang.com/post/vue-cl…

Vue-router免费视频教程

  1. Vue-router入门:jspang.com/post/vue-ro…

  2. vue-router配置子路由:jspang.com/post/vue-ro…

  3. vue-router如何参数传递:jspang.com/post/vue-ro…

  4. 单页面多路由区域操作:jspang.com/post/vue-ro…

  5. vue-router 利用url传递参数:jspang.com/post/vue-ro…

  6. vue-router 的重定向-redirect:jspang.com/post/vue-ro…

  7. alias别名的使用: jspang.com/post/vue-ro…

  8. 路由的过渡动画:jspang.com/post/vue-ro…

  9. mode的设置和404页面的处理:jspang.com/post/vue-ro…

  10. 路由中的钩子:jspang.com/post/vue-ro…

vuex免费视频教程

  1. 初出茅庐 来个小Demo:jspang.com/post/vuex.h…

  2. state访问状态对象:jspang.com/post/vuex.h…

  3. Mutations修改状态:jspang.com/post/vuex.h…

  4. getters计算过滤操作:jspang.com/post/vuex.h…

  5. actions异步修改状态:jspang.com/post/vuex.h…

  6. module模块组:jspang.com/post/vuex.h…

Vue免费实战视频-快餐店收银系统

  1. Mockplus把我们的想法画出来:jspang.com/post/vuedem…

  2. Vue-cli搭建开发环境:jspang.com/post/vuedem…

  3. 搞定项目图标Iconfont:jspang.com/post/vuedem…

  4. 编写独立的侧边栏导航组件 : jspang.com/post/vuedem…

  5. 开启Element封印:jspang.com/post/vuedem…

  6. 利用Element快速布局(1):jspang.com/post/vuedem…

  7. 利用Element快速布局(2):jspang.com/post/vuedem…

  8. Axios从远程读取数据: jspang.com/post/vuedem…

  9. 订单模块制作 核心功能-1:jspang.com/post/vuedem…

  10. 订单模块制作 核心功能-2:jspang.com/post/vuedem…

  11. 项目打包和上线:jspang.com/post/vuedem…

WEEX免费视频教程

  1. 课程介绍: jspang.com/post/weex.h…

  2. 开发环境安装(1):jspang.com/post/weex.h…

  3. 开发环境安装(2):jspang.com/post/weex.h…

  4. weex常用命令和热更新:jspang.com/post/weex.h…

  5. Android Studio 开发设置:jspang.com/post/weex.h…

  6. weex和vue的爱恨情仇:jspang.com/post/weex.h…

  7. 自定义组件和Text组件:jspang.com/post/weex.h…

  8. Input组件和初识内建模块:jspang.com/post/weex.h…

  9. Image和video组件:jspang.com/post/weex.h…

  10. 一起作个列表出来:jspang.com/post/weex.h…

  11. 从后端服务器上获取数据:jspang.com/post/weex.h…

  12. 作轮播图片效果:jspang.com/post/weex.h…

  13. a组件和web组件:jspang.com/post/weex.h…

  14. 通用事件和动画: jspang.com/post/weex.h…

  15. 教会你自学weex:jspang.com/post/weex.h…

  16. Navigator和webview模块:jspang.com/post/weex.h…

  17. vue-router的使用: jspang.com/post/weex.h…

Nuxt.js免费视频教程 开启SSR渲染

  1. 课程介绍:jspang.com/post/Nuxt.j…

  2. Nuxt环境搭建和Hello World:jspang.com/post/Nuxt.j…

  3. Nuxt目录结构详讲:jspang.com/post/Nuxt.j…

  4. Nuxt常用配置项: jspang.com/post/Nuxt.j…

  5. Nuxt的路由配置和参数传递:jspang.com/post/Nuxt.j…

  6. Nuxt的动态路由和参数校验:jspang.com/post/Nuxt.j…

  7. Nuxt的路由动画效果:jspang.com/post/Nuxt.j…

  8. Nuxt的默认模版和默认布局:jspang.com/post/Nuxt.j…

  9. Nuxt的错误页面和个性meta设置:jspang.com/post/Nuxt.j…

  10. asyncData方法获取数据:jspang.com/post/Nuxt.j…

  11. Nuxt的路由动画效果:jspang.com/post/Nuxt.j…

React免费视频教程-入门和组件

  1. React课程介绍:jspang.com/post/react.…

  2. 环境搭建和HelloWorld程序:jspang.com/post/react.…

  3. 初识JSX语法:jspang.com/post/react.…

  4. 进阶JSX语法:jspang.com/post/react.…

  5. React组件:state成员:jspang.com/post/react.…

  6. React组件:props和render成员:jspang.com/post/react.…

  7. React组件:生命周期:jspang.com/post/react.…

  8. React组件小实例-必做练习:jspang.com/post/react.…

  9. React组件:this.props.children:jspang.com/post/react.…

  10. React组件:props属性验证:jspang.com/post/react.…

  11. React组件:获取真实DOM节点:jspang.com/post/react.…

React免费视频教程-表单的应用

  1. 表单的事件响应和bind复用 : jspang.com/post/react-…

  2. React表单name复用:jspang.com/post/react-…

  3. React表单-可控组件:jspang.com/post/react-…

  4. React表单-不可控组件:jspang.com/post/react-…

React项目构建和路由 免费视频教程

  1. 构建:create-react-app 快速脚手架 : jspang.com/post/react-…

  2. 构建:generator-react-webpack: jspang.com/post/react-…

  3. 构建:webpack一步一步构建01:jspang.com/post/react-…

  4. 构建:webpack一步一步构建02:jspang.com/post/react-…

  5. 路由:Hello React路由:jspang.com/post/react-…

  6. 路由:NavLink中常用选项:jspang.com/post/react-…

  7. 路由:404设置和跳转设置:jspang.com/post/react-…

  8. 路由:通过路由传值的方法:jspang.com/post/react-…

  9. 路由:Router中的属性和路由模式:jspang.com/post/react-…

  10. 路由:prompt用法讲解:jspang.com/post/react-…

Koa2免费视频教程

  1. Koa开发环境搭建:jspang.com/post/koa2.h…

  2. async/await的使用方法:jspang.com/post/koa2.h…

  3. Get请求的接收:jspang.com/post/koa2.h…

  4. POST请求如何接收(1):jspang.com/post/koa2.h…

  5. POST请求如何接收(2):jspang.com/post/koa2.h…

  6. koa-bodyparser中间件:jspang.com/post/koa2.h…

  7. Koa2原生路由实现:jspang.com/post/koa2.h…

  8. Koa-router中间件(1)入门:jspang.com/post/koa2.h…

  9. Koa-router中间件(2)层级:jspang.com/post/koa2.h…

  10. Koa-router中间件(3)参数:jspang.com/post/koa2.h…

  11. Koa2中使用cookie :jspang.com/post/koa2.h…

  12. Koa2的模板初识(ejs):jspang.com/post/koa2.h…

  13. koa-static静态资源中间件:jspang.com/post/koa2.h…

MongoDB免费视频教程

  1. 认识和安装MongoDB:jspang.com/post/mongod…

  2. Mongo基本命令-1:jspang.com/post/mongod…

  3. Mongo基本命令-2:jspang.com/post/mongod…

  4. 用js文件写mongo命令:jspang.com/post/mongod…

  5. 批量插入的正确方法:jspang.com/post/mongod…

  6. 修改:Update常见错误:jspang.com/post/mongod…

  7. 修改:初识update修改器:jspang.com/post/mongod…

  8. 修改:update数组修改器jspang.com/post/mongod…

  9. 修改:状态返回与安全:jspang.com/post/mongod…

  10. 查询:find的不等修饰符:jspang.com/post/mongod…

  11. 查询:find的多条件查询:jspang.com/post/mongod…

  12. 查询:find的数组查询:jspang.com/post/mongod…

  13. 查询:find的参数使用方法:jspang.com/post/mongod…

  14. 查询:find如何在js文本中使用:jspang.com/post/mongod…

  15. 索引:构造百万级数据:jspang.com/post/mongod…

  16. 索引:索引入门:jspang.com/post/mongod…

  17. 索引:复合索引:jspang.com/post/mongod…

  18. 索引:全文索引:jspang.com/post/mongod…

  19. 管理:用户的创建、删除与修改:jspang.com/post/mongod…

  20. 管理:备份和还原:jspang.com/post/mongod…

  21. 管理:图形界面管理(完结):jspang.com/post/mongod…

ES6免费视频教程

  1. ES6的开发环境搭建:jspang.com/post/es6.ht…

  2. 新的声明方式:jspang.com/post/es6.ht…

  3. 变量的解构赋值:jspang.com/post/es6.ht…

  4. 扩展运算符和rest运算符:jspang.com/post/es6.ht…

  5. 字符串模版:jspang.com/post/es6.ht…

  6. ES6数字操作:jspang.com/post/es6.ht…

  7. ES6中新增的数组知识(1):jspang.com/post/es6.ht…

  8. ES6中新增的数组知识(2):jspang.com/post/es6.ht…

  9. ES6中的箭头函数和扩展:jspang.com/post/es6.ht…

  10. ES6中的函数和数组补漏:jspang.com/post/es6.ht…

  11. ES6中对象:jspang.com/post/es6.ht…

  12. Symbol在对象中的作用:jspang.com/post/es6.ht…

  13. Set和WeakSet数据结构:jspang.com/post/es6.ht…

  14. map数据结构:jspang.com/post/es6.ht…

  15. 用Proxy进行预处理:jspang.com/post/es6.ht…

  16. promise对象的使用:jspang.com/post/es6.ht…

  17. class类的使用:jspang.com/post/es6.ht…

  18. 模块化操作:jspang.com/post/es6.ht…

CocosCreator从基础到实战

  1. 简介和HelloWorld:jspang.com/post/cocosC…

  2. 软件界面介绍和跳动的小球:jspang.com/post/cocosC…

  3. Scene介绍和基本操作:jspang.com/post/cocosC…

  4. 玩家输入事件监听: jspang.com/post/cocosC…

  5. Prefab和计时器:jspang.com/post/cocosC…

  6. 实战-游戏简介和项目分析:jspang.com/post/cocosC…

  7. 实战-UI界面布局:jspang.com/post/cocosC…

  8. 实战-主角的动作监听和跳动:jspang.com/post/cocosC…

  9. 实战-随机生成地刺:jspang.com/post/cocosC…

  10. 实战-点击生成地刺和移动:jspang.com/post/cocosC…

  11. 实战-碰撞检测:jspang.com/post/cocosC…

  12. 实战-倒计时和分数增加:jspang.com/post/cocosC…

  13. 实战-欢迎界面代码编写:jspang.com/post/cocosC…

  14. 实战-添加音效:jspang.com/post/cocosC…

  15. 实战-发布游戏:jspang.com/post/cocosC…

Fabricjs 免费视频教程

  1. 初识简单而且强大的Fabric.js库: http://jspang.com/post/fabricjs.html#toc-e13

  2. 在Canvas上画简单的图形:jspang.com/post/fabric…

  3. 在Canvas上插入图片并设置旋转属性:jspang.com/post/fabric…

  4. Fabric.js用路径画不规则图形:jspang.com/post/fabric…

  5. Fabric.js的动画设置:jspang.com/post/fabric…

  6. Fabric.js的图像过滤器:jspang.com/post/fabric…

  7. Fabric.js的颜色模式和相互转换:jspang.com/post/fabric…

  8. Fabric.js的渐变填充:jspang.com/post/fabric…

  9. Fabric.js的文本设置:jspang.com/post/fabric…

  10. Fabric.js的事件系统:jspang.com/post/fabric…

CSS3免费视频

  1. 嫁汉嫁汉穿衣吃饭:jspang.com/post/CSS3.h…

  2. CSS3新特性简介和浏览器支持情况:jspang.com/post/CSS3.h…

  3. CSS3伪类选择器1:jspang.com/post/CSS3.h…

  4. CSS3伪类选择器2结构伪类选择器:jspang.com/post/CSS3.h…

  5. CSS3伪元素:jspang.com/post/CSS3.h…

  6. CSS3用border-radius画圆形:jspang.com/post/CSS3.h…

  7. CSS3画三角形和对话框:jspang.com/post/CSS3.h…

  8. CSS3画菱形和平行四边形:jspang.com/post/CSS3.h…

  9. CSS3画菱形和平行四边形:jspang.com/post/CSS3.h…

  10. CSS3 画五角星和六角星:jspang.com/post/CSS3.h…

  11. CSS3画心形和蛋形:jspang.com/post/CSS3.h…

  12. CSS3画太极阴阳图:jspang.com/post/CSS3.h…

  13. CSS3制作透明背景层:jspang.com/post/CSS3.h…

  14. CSS3的颜色模式(1):jspang.com/post/CSS3.h…

  15. CSS3的颜色模式(2)-实例仿天猫商品展示效果:jspang.com/post/CSS3.h…

  16. CSS3线性渐变:jspang.com/post/CSS3.h…

  17. CSS3径向渐变 radial-gradient:jspang.com/post/CSS3.h…

  18. CSS3重复性渐变:jspang.com/post/CSS3.h…

  19. CSS3盒子阴影效果box-shadow:jspang.com/post/CSS3.h…

  20. CSS3制作缓慢变长的方形(transition特效):jspang.com/post/CSS3.h…

  21. CSS3过渡的timing-function属性详解:jspang.com/post/CSS3.h…

  22. CSS3仿天猫专题过渡效果实例:jspang.com/post/CSS3.h…

  23. CSS3仿天猫类别过渡效果制作:jspang.com/post/CSS3.h…

  24. CSS3动画中的@keyframes关键帧讲解:jspang.com/post/CSS3.h…

  25. CSS3动画animation复合属性讲解:jspang.com/post/CSS3.h…

  26. CSS3动画综合实例制作-内容加载loading动画实现:jspang.com/post/CSS3.h…

  27. CSS3 Loading动画效果实例2:jspang.com/post/CSS3.h…

  28. CSS3制作发光字,立体字,苹果字体:jspang.com/post/CSS3.h…

  29. CSS3 用text-overflow解决文字排版问题:jspang.com/post/CSS3.h…

  30. CSS3 新的字体单位rem-大结局:jspang.com/post/CSS3.h…

2019年展望

2018年出现了很多新技术,特别是Flutter的出现,我个人觉的每个前端小伙伴都应该学习一下。

2019年我努力保持每周更新三集免费视频,但是为了维持博客服务器费用和像买个苹果的笔记本,也会出一套收费视频。

我2019年的计划:

  1. 重新翻看一遍犀牛JS神书,巩固JS基础知识。
  2. 开始学写日程笔记,每天一页那种。
  3. 锻炼身体,减轻体重到180斤。
  4. 每周录制3集视频教程。
  5. 学习服务器知识,向全栈继续进发。
  6. 重构自己的博客网站。
  7. 还清房贷,并带着全家出去旅游一次。

其实每年的展望都很难达成,但是总是要立一下,万一实现了那。

最后希望

希望小伙伴们都能给一个赞,留一个言,万一我获得第一名了那。写这篇文章就是想获得个奖品,特别是印着掘金logo的东西。钱我舍了,虚荣心总该满足一下吧。288集前端视频,换你一个赞和留言不过分吧。

阅读全文

成为一个有目标的学习者


成为一个有目标的学习者

我一个好朋友,他在一家国内较大借贷平台做前端工程师,每天五点起床,早早的到公司,开始读一些经典的前端类的书籍。起的这么早的动力是觉得自己还没能够掌握前端的很多细节,真正在做开发的时候,依然会忘记之前看到过的东西,总是下意识的告诉自己:『可能我还处在入门水平』。
长此以往,起的越来越早,中午同事休息联机玩儿手游的时候,也不放过时间去看书,压力也随之变大。开始否认自己在转行前端之前的时光,感觉都被浪费掉了似的,越是如此,越是无法挣脱,逐步的走到死胡同中,彷徨,痛苦。
他很痛苦,希望我能提些自己的看法。
我想,很多人都曾有过这种时光。就好比高考前的各种模拟试题一样,总有一种人,喜欢在做模拟试题前,把整本书都先过一遍。这样真的有意义吗?我认为回报是很小的。因为你定了一个有些迂回和逃避性质的目标。当入门阶段已经走过以后,你没有必要再从头开始,这是一个会浪费时间、消耗体力的目标,只会让你丧失学习的动力,因为你不再会有比第一次学会更强的正向反馈了,当你耗费大量时间和体力过了一遍以后,依然无所得,这是多么令人挫败的一个过程啊。
那问题来了,一旦入门后,如何得到一个更有激励性质的正反馈呢?
依然是定一个目标,定一个你从未尝试或达到过的目标,让新的目标去刺激你的多巴胺和肾上腺素,让你对某一个东西、技术产生持续的亢奋,从而无形中成为终生学习者。
对于技术人来说,新的目标可以是做一个解决自己生活中遇到问题的小产品,努力做到 1000 日活,做一个开源项目,努力得到 1000 个 Star,做一个小工具,努力赚到 1000 人民币,做一个小社群,努力拥有 1000 个注册用户,或者开一篇博客,写一个公众号,努力做到 1000 阅读。
这些都是可以成为刺激你的下一个源泉。很多很能折腾的人,总是在持续不断的折腾,就是因为他们总是在不断的接收正反馈,他们在不断的认可自己的过程中。
不要因为别人说一本书好,或是一篇文章,一类技术好,就去学它,其实根本没有必要,因为你学它的动力其实是伪动力学有所用才是可能持续学习的动力,主观的坚持不是可持续的真正动力。
我其实一直是很不主张去读其他人的技术文章,至少大多数技术文章都是对你无益的,读的越多,你越是会产生彷徨和焦虑,感觉自己没有成长,缺少自信。缺少自信的表现是你会恐惧未来遇到的新问题,你还是得大量依赖搜索引擎去读几百篇博客去解决一个问题,你没有自己真正的独立思考,你只解决了一个眼前问题,你没有办法套用到千千万万个问题上,你无法亢奋自己的神经,而产生持续的学习和研究欲望。
大量读别人的文章,其实你也无法得到一个独立解决问题的方法论,你会滋生思想的懒惰,很多美好的事物和机会,也会和你擦身而过。
有的时候,读其他人的技术文章也会让自己产生一种诡异的满足感,你会感到我貌似很多东西都会,只是有些不熟罢了,真的如此吗?
举个自己的例子,我当初在准备炒股票前,在雪球上读了很多文章,还专门把牛人们分成了一组,感觉自己差不多了,随即开户砸钱进去,但直到真正开始操盘的时候,这种我已经学会了的错觉,让我赔了不少。有时候就跟你看了一百篇某个技术点的技术文章,真的开始写的时候,什么也想不起来,又得打开一篇,照猫画虎做完,却发现崩溃了。WTF。其实你并没有学会。
我主张你去看原始的资料,主张你去读系统的书籍,主张你去研究官方或是优秀项目的源码。这些都是一手资料和优质 Demo。这才是真正的方法论,Google 是不会给你带来安全感的
而且很多复杂的东西,其实很难用一篇博客文章写清楚。越是清楚其中逻辑和原理的人,反而越是很少写技术文章,一来因为这些技术人感觉还有很多东西要研究,复杂问题写起来总是长篇大论,依赖知识也非常多,写起来麻烦。二来,研究到这些复杂东西的人,往往已经掌握了方法论,也不需要读这些文章,非要写一篇文章的话,只用只言片语提及思路,便够了。
如果你在入门阶段,你读什么都可以,如果你想要有些突破,就按上面三条方法来吧,一定让你有所收获,如果你想有更大的突破,那就先给自己定个从未达到过的目标。
最后,花些时间娱乐,不要总是那么紧张,生活也是很大的一门学问。
正如 文明VI 中提到的一句名言:
那些没时间娱乐的人,他们的时间会花在生病上。——约翰 沃纳梅克

阅读全文

ieaseMusic-一款炫酷的网易云第三方客户端


网易云音乐第三方
TypeNameLatest commit messageCommit time
NeteaseCloudMusicApi @ 5b8b2e3Update unlike api4 days ago
binClean commits7 months ago
commonCache music source4 days ago
configFix build bug6 days ago
resourceUpdate README.md6 months ago
screenshotsUpdate user screenshot3 months ago
serverClean log2 days ago
srcLog in with weibo2 days ago
submodulesDownload flac #373#373, QQ 音乐曲库失效4 days ago
.babelrcMigrate to react-router v47 months ago
.codeclimate.ymlRelease v1.3.14 months ago
.editorconfigChange editor config7 months ago
.eslintignoreClean project7 months ago
.eslintrc.jsonUpdate deps11 days ago
.gitignoreUpdate .gitignore3 days ago
.gitmodules移除随机UAa year ago
.travis.ymlUpdate README.md6 months ago
AUTHORS.mdUpdate author list5 days ago
LICENSEMIT LICENSEa year ago
README.mdRelease v1.3.413 hours ago
azure-pipelines.ymlUpdate azure-pipelines.yml for Azure Pipelines3 days ago
main.jsClean log4 days ago
package.jsonRelease v1.3.413 hours ago

README.md

ieaseMusic

Elegant NeteaseMusic desktop app, Rock with NeteaseMusic

Built by Electron, React, MobX, JSS

APIBinaryify/NeteaseCloudMusicApi 提供。

Preview

Feature

  • 很帅

  • 非常帅

  • JSS Theme support

  • OSX Friendly

  • Cross Platform

  • Keyboard support

  • Desktop notifications

  • Modern UI design

  • High quality music(FLAC)

  • Track your listen to Last.fm

  • Fix dead music link #3(QQ music, Xiami music, Kugou music, Kuwo music, MiGu music, Biadu music all in one)

  • Share music to Facebook, Twitter, Google+, WeChat

  • WeChat scan to log in

  • Download music

  • Alfred 3 workflow(alfred-ieasemusic), required v1.2.6+

Install

Download the last version on the website or below.

Mac(10.9+)

Download the .dmg file, Or use homebrew:

brew cask install ieasemusic

Linux

Download the .deb file for 'Debian / Ubuntu':

$ sudo dpkg -i ieaseMusic-1.3.4-linux-amd64.deb

Download the .rpm file for 'Centos/RHEL':

$ sudo yum localinstall ieaseMusic-1.3.4-linux-x86_64.rpm

Download the .Appimage file for other distribution:

$ chmod u+x iease-music-1.3.4-x86_64.AppImage$ ./iease-music-1.3.4-x86_64.AppImage

Archlinux pacman install:

$ pacman -S iease-music

or

$ pacman -S iease-music-git

Screenshots

Development

git submodule initgit submodule update --remote --merge$ npm install$ npm run dev

UNBLOCK

修改/etc/hosts添加

158.199.142.239 music.163.com163.171.98.219  p1.music.126.net163.171.98.219  p3.music.126.net163.171.98.219  p4.music.126.net202.122.146.83  m10.music.126.net

上面是日本反代节点fengjueming/unblock-NetEaseMusic

新加坡节点(本屌太穷有需要还是尽量用上面的节点吧)

52.221.201.48 music.163.com

关于优化IP地址,p开头的是图片CDN服务器,m开头的是音乐资源CDN服务器。可以通过

ping ws.acgvideo.com

来寻找最优的音乐资源CDN服务器。通过

ping cdnetworks.com

来寻找最优的图片资源CDN服务器。

Keyboard shortcuts

DescriptionKeys
暂停/播放Space
上一曲Left
下一曲Right
音量加Up
音量减Down
喜欢歌曲Cmd L
播放历史记录Cmd 0 ... 9
搜索Cmd F
显示下载歌曲Shift Cmd D
跳转首页Shift Cmd H
查看榜单Shift Cmd T
所有歌单Shift Cmd P
我的电台Shift Cmd F
菜单Shift Cmd L
播放列表Cmd P
偏好设置Cmd ,
偏好设置鼠标右键

TODO:

  • Home
  • Playlist
  • Top
  • My FM
  • User
  • Artist
  • Album
  • Search
  • Login
  • Pllylist subscribe
  • Follow
  • Flac high quality audio
  • Fix dead music link(#3)
  • Scrobble to Last.fm
  • Comment(Read only)
  • Lyrics
  • Auto update
  • Alfred supports
  • Download manager
  • Wechat QR code login
  • Weibo QR code login
  • Resize window(New UI)

参考列表

License

还是 MIT 吧,懒得改了

阅读全文

YBlog - Learn Vim Progressively


Learn Vim Progressively

tl;dr*: You want to teach yourself vim (the best text editor known to human kind) in the fastest way possible. This is my way of doing it. You start by learning the minimal to survive, then you integrate all the tricks slowly.

Vim the Six Billion Dollar editor

Better, Stronger, Faster.

Learn vim and it will be your last text editor. There isn’t any better text editor that I know of. It is hard to learn, but incredible to use.

I suggest you teach yourself Vim in 4 steps:

  1. Survive
  2. Feel comfortable
  3. Feel Better, Stronger, Faster
  4. Use superpowers of vim

By the end of this journey, you’ll become a vim superstar.

But before we start, just a warning. Learning vim will be painful at first. It will take time. It will be a lot like playing a musical instrument. Don’t expect to be more efficient with vim than with another editor in less than 3 days. In fact it will certainly take 2 weeks instead of 3 days.

1 ". "1st Level – Survive

  1. Install vim
  2. Launch vim
  3. DO NOTHING! Read.

In a standard editor, typing on the keyboard is enough to write something and see it on the screen. Not this time. Vim is in Normal mode. Let’s go to Insert mode. Type the letter i.

You should feel a bit better. You can type letters like in a standard editor. To get back to Normal mode just press the ESC key.

You now know how to switch between Insert and Normal mode. And now, here are the commands that you need in order to survive in Normal mode:

  • -iInsert mode. Type ESC to return to Normal mode.
  • -x → Delete the char under the cursor
  • -:wq → Save and Quit (:w save, :q quit)
  • -dd → Delete (and copy) the current line
  • -p → Paste

Recommended:

  • -hjkl (highly recommended but not mandatory) → basic cursor move (←↓↑→). Hint: j looks like a down arrow.
  • -:help <command> → Show help about <command>. You can use :help without a <command> to get general help.

Only 5 commands. That is all you need to get started. Once these command start to become natural (maybe after a day or so), you should move on to level 2.

But first, just a little remark about Normal mode. In standard editors, to copy you have to use the Ctrl key (Ctrl-c generally). In fact, when you press Ctrl, it is as if all of your keys change meaning. Using vim in normal mode is a bit like having the editor automatically press the Ctrl key for you.

A last word about notations:

  • -instead of writing Ctrl-λ, I’ll write <C-λ>.
  • -commands starting with : end with <enter>. For example, when I write :q, I mean :q<enter>.

2 ". "2nd Level – Feel comfortable

You know the commands required for survival. It’s time to learn a few more commands. These are my suggestions:

  1. Insert mode variations:

    • -a → insert after the cursor
    • -o → insert a new line after the current one
    • -O → insert a new line before the current one
    • -cw → replace from the cursor to the end of the word
  2. Basic moves

    • -0 → go to the first column
    • -^ → go to the first non-blank character of the line
    • -$ → go to the end of line
    • -g_ → go to the last non-blank character of line
    • -/pattern → search for pattern
  3. Copy/Paste

    • -P → paste before, remember p is paste after current position.
    • -yy → copy the current line, easier but equivalent to ddP
  4. Undo/Redo

    • -u → undo
    • -<C-r> → redo
  5. Load/Save/Quit/Change File (Buffer)

    • -:e <path/to/file> → open
    • -:w → save
    • -:saveas <path/to/file> → save to <path/to/file>
    • -:x, ZZ or :wq → save and quit (:x only save if necessary)
    • -:q! → quit without saving, also: :qa! to quit even if there are modified hidden buffers.
    • -:bn (resp. :bp) → show next (resp. previous) file (buffer)

Take the time to learn all of these command. Once done, you should be able to do every thing you are able to do in other editors. You may still feel a bit awkward. But follow me to the next level and you’ll see why vim is worth the extra work.

3 ". "3rd Level – Better. Stronger. Faster.

Congratulation for reaching this far! Now we can start with the interesting stuff. At level 3, we’ll only talk about commands which are compatible with the old vi editor.

1 "." counter(niv03) ". "Better

Let’s look at how vim could help you to repeat yourself:

  1. . → (dot) will repeat the last command,
  2. N<command> → will repeat the command N times.

Some examples, open a file and type:

  • -2dd → will delete 2 lines
  • -3p → will paste the text 3 times
  • -100idesu [ESC] → will write “desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu”
  • -. → Just after the last command will write again the 100 “desu”.
  • -3. → Will write 3 “desu” (and not 300, how clever).

2 "." counter(niv03) ". "Stronger

Knowing how to move efficiently with vim is very important. Don’t skip this section.

  1. NG → Go to line N
  2. gg → shortcut for 1G - go to the start of the file
  3. G → Go to last line
  4. Word moves:

    1. w → go to the start of the following word,
    2. e → go to the end of this word.

    By default, words are composed of letters and the underscore character. Let’s call a WORD a group of letter separated by blank characters. If you want to consider WORDS, then just use uppercase characters:

    1. W → go to the start of the following WORD,
    2. E → go to the end of this WORD.

Now let’s talk about very efficient moves:

  • -% : Go to the corresponding (, {, [.
  • -* (resp. #) : go to next (resp. previous) occurrence of the word under the cursor

Believe me, the last three commands are gold.

3 "." counter(niv03) ". "Faster

Remember about the importance of vi moves? Here is the reason. Most commands can be used using the following general format:

<start position><command><end position>

For example : 0y$ means

  • -0 → go to the beginning of this line
  • -y → yank from here
  • -$ → up to the end of this line

We also can do things like ye, yank from here to the end of the word. But also y2/foo yank up to the second occurrence of “foo”.

But what was true for y (yank), is also true for d (delete), v (visual select), gU (uppercase), gu (lowercase), etc…

4 ". "4th Level – Vim Superpowers

With all preceding commands you should be comfortable using vim. But now, here are the killer features. Some of these features were the reason I started to use vim.

1 "." counter(niv03) ". "Move on current line: 0 ^ $ g_ f F t T , ;

  • -0 → go to column 0
  • -^ → go to first character on the line
  • -$ → go to the last column
  • -g_ → go to the last character on the line
  • -fa → go to next occurrence of the letter a on the line. , (resp. ;) will find the next (resp. previous) occurrence.
  • -t, → go to just before the character ,.
  • -3fa → find the 3rd occurrence of a on this line.
  • -F and T → like f and t but backward.

A useful tip is: dt" → remove everything until the ".

2 "." counter(niv03) ". "Zone selection <action>a<object> or <action>i<object>

These command can only be used after an operator in visual mode. But they are very powerful. Their main pattern is:

<action>a<object> and <action>i<object>

Where action can be any action, for example, d (delete), y (yank), v (select in visual mode). The object can be: w a word, W a WORD (extended word), s a sentence, p a paragraph. But also, natural character such as ", ', ), }, ].

Suppose the cursor is on the first o of (map (+) ("foo")).

  • -vi" → will select foo.
  • -va" → will select "foo".
  • -vi) → will select "foo".
  • -va) → will select ("foo").
  • -v2i) → will select map (+) ("foo")
  • -v2a) → will select (map (+) ("foo"))

3 "." counter(niv03) ". "Select rectangular blocks: <C-v>.

Rectangular blocks are very useful for commenting many lines of code. Typically: 0<C-v><C-d>I-- [ESC]

  • -^ → go to the first non-blank character of the line
  • -<C-v> → Start block selection
  • -<C-d> → move down (could also be jjj or %, etc…)
  • -I-- [ESC] → write -- to comment each line

Note: in Windows you might have to use <C-q> instead of <C-v> if your clipboard is not empty.

4 "." counter(niv03) ". "Completion: <C-n> and <C-p>.

In Insert mode, just type the start of a word, then type <C-p>, magic…

5 "." counter(niv03) ". "Macros : qa do something q, @a, @@

qa record your actions in the register a. Then @a will replay the macro saved into the register a as if you typed it. @@ is a shortcut to replay the last executed macro.

Example

On a line containing only the number 1, type this:

  • -qaYp<C-a>q
    • -qa start recording.
    • -Yp duplicate this line.
    • -<C-a> increment the number.
    • -q stop recording.
  • -@a → write 2 under the 1
  • -@@ → write 3 under the 2
  • -Now do 100@@ will create a list of increasing numbers until 103.

6 "." counter(niv03) ". "Visual selection: v,V,<C-v>

We saw an example with <C-v>. There is also v and V. Once the selection has been made, you can:

  • -J → join all the lines together.
  • -< (resp. >) → indent to the left (resp. to the right).
  • -= → auto indent

Add something at the end of all visually selected lines:

  • -<C-v>
  • -go to desired line (jjj or <C-d> or /pattern or % etc…)
  • -$ go to the end of the line
  • -A, write text, ESC.

7 "." counter(niv03) ". "Splits: :split and vsplit.

These are the most important commands, but you should look at :help split.

  • -:split → create a split (:vsplit create a vertical split)
  • -<C-w><dir> : where dir is any of hjkl or ←↓↑→ to change the split.
  • -<C-w>_ (resp. <C-w>|) : maximise the size of the split (resp. vertical split)
  • -<C-w>+ (resp. <C-w>-) : Grow (resp. shrink) split

5 ". "Conclusion

That was 90% of the commands I use every day. I suggest that you learn no more than one or two new commands per day. After two to three weeks you’ll start to feel the power of vim in your hands.

Learning Vim is more a matter of training than plain memorization. Fortunately vim comes with some very good tools and excellent documentation. Run vimtutor until you are familiar with most basic commands. Also, you should read this page carefully: :help usr_02.txt.

Then, you will learn about !, folds, registers, plugins and many other features. Learn vim like you’d learn piano and all should be fine.

If you liked this article, there is a follow up: Vim as IDE

Published on 2011-08-25

ADA:DdzFFzCqrhtAvdkmATx5Fm8NPJViDy85ZBw13p4XcNzVzvQg8e3vWLXq23JQWFxPEXK6Kvhaxxe7oJt4VMYHxpA2vtCFiP8fziohN6Yp

阅读全文

本站总访问量

Fork me on GitHub