Giter Club home page Giter Club logo

dev-skills's Introduction

Hi, my name is Eryou Hao.

I'm a front-end developer from China.

My Project

  • Gridea - 🌐 A full-featured Blog tool providing writing, hosting, and custom domain x 💡 A lightweight thought box

My open-source projects

Get in touch

dev-skills's People

Contributors

eryouhao avatar

Watchers

 avatar  avatar

dev-skills's Issues

Gridea Markdown Example

Markdown是一种轻量级标记语言,创始人为约翰·格鲁伯(英语:John Gruber)。它允许人们“使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档”。

<!-- more -->

> 此篇仅为测试渲染效果,非教程

## 标题
### 三级标题显示

## 普通段落
金樽清酒斗十千, 玉盘珍羞直万钱。停杯投箸不能食, 拔剑四顾心茫然。欲渡黄河冰塞川, 将登太行雪满山。闲来垂钓碧溪上, 忽复乘舟梦日边。行路难,行路难, 多歧路,今安在?长风破浪会有时, 直挂云帆济沧海。

## 有序列表
1. 第一项内容
2. 第二项内容
3. 第三项内容,带`code`文本

## 无序列表
- 第一项内容
- 第二项内容
- 第三项内容,带 `code`文本

## 其他内容
这是去往[Gridea 主页链接](https://gridea.dev),这是一个行内代码`console.log('Hello World')`,这是**强调文本**,这是*斜体文本*,这是~~删除文本~~,下面是分割线

---
下面是图片:

![图片描述](https://images.unsplash.com/photo-1563362375-684f5a29d125?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60)

另一张设置宽高(200x120)的图片:

![设置固定宽高的图片,200 x 120](https://images.unsplash.com/photo-1563373262-1e074f7c30a0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1300&q=80 =200x120)

## 块代码
(使用时需移除前面的 \ )
\```javascript
function sayHello() {
	console.log("Hello Wolrd");
}
\```

## 表格
| 一个普通标题 | 一个普通标题 | 一个普通标题 |
| ------ | ------ | ------ |
| 短文本 | 中等文本 | 稍微长一点的文本 |
| 稍微长一点的文本 | 短文本 | 中等文本 |

| 左对齐标题 | 右对齐标题 | 居中对齐标题 |
| :------| ------: | :------: |
| 短文本 | 中等文本 | 稍微长一点的文本 |
| 稍微长一点的文本 | 短文本 | 中等文本 |

## 任务列表

- [x] 第一项任务
- [ ] 第二项任务
- [ ] 第三项任务
- [x] 第四项任务

## 加强功能

- KaTeX 行内公式$\sqrt{3x-1}+(1+x)^2$
- KaTeX 块级公式
$$\begin{array}{c}

\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
= \frac{4\pi}{c}\vec{\mathbf{j}}    \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\

\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\

\nabla \cdot \vec{\mathbf{B}} & = 0

\end{array}$$

- 高亮文本示例==高亮文本==
- 29^th^
- 下面是缩略语示例 
*[HTML]: Hyper Text Markup Language
The HTML specification

- 下面是 footnote 示例

Here is a footnote reference,[^1] and another.[^longnote]

[^1]: Here is the footnote.

[^longnote]: Here's one with multiple blocks.

文章内目录示例:

@[TOC]


Node Server nodemon添加lint支持

# nodemon hot reload
npm install nodemon --save-dev

# https://standardjs.com/
npm install standard --save-dev

# pretty error info
npm install snazzy --save-dev

package.json:

"scripts": {
    "lint": "standard --verbose | snazzy",
    "dev": "NODE_ENV=localhost nodemon server.js --exec \"npm run lint && node\"",
  },
"devDependencies": {
    "nodemon": "^1.12.0",
    "snazzy": "^7.0.0",
    "standard": "^10.0.3"
  }

同理,可以添加eslint进行自定义配置

git 关联多个远程仓库

1.关联远程仓库一

git remote add origin https://github.com/EryouHao/git-all.git

2.关联远程仓库二

git remote add other https://coding.net/EryouHao/git-all.git

3.从某一个远程仓库的某一个分支进行pull

git pull origin master

4.推送到两个不同名的仓库

git config alias.pushall '!git push origin master && git push all master'
git pushall

MR & PR templates

## Description
A few sentences describing the overall goals of `merge request`

## List of General Components affected

## Status
- [ ] Ready for Review

## Types of changes
- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to change)

## Non Functional Requirement
- [ ] Follows the code style of this project.
- [ ] Tests Cover Changes
- [ ] All new and existing tests passed.
- [ ] Documentation

效果

Description

A few sentences describing the overall goals of merge request

List of General Components affected

Status

  • Ready for Review

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Non Functional Requirement

  • Follows the code style of this project.
  • Tests Cover Changes
  • All new and existing tests passed.
  • Documentation

Fork 仓库同步原仓库

首先 将你 fork 的仓库拉到本地进行日常开发,然后:

  • 执行下面命令,你会看到当前所关联的远程仓库
> git remote -v
origin	[email protected]:YOUR_USERNAME/YOUR_FORK.git (fetch)
origin	[email protected]:YOUR_USERNAME/YOUR_FORK.git (push)
  • 执行下面命令,添加 主 repo 为上游代码库
> git remote add upstream https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git
  • 再次查看远程关联是否更新了
> git remote -v
origin	[email protected]:YOUR_USERNAME/YOUR_FORK.git (fetch)
origin	[email protected]:YOUR_USERNAME/YOUR_FORK.git (push)
upstream [email protected]:YOUR_ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git (fetch)
upstream [email protected]:YOUR_ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git (push)
  • 抓取原仓库更新
> git fetch upstream
  • 合并远程的 master 分支
> git rebase upstream/master
或
> git merge upstream/master
  • 推送到自己的 fork 仓库
> git push

ssh key 操作姿势

1.生成ssh key 注:$ 表示命令行
$ ssh-keygen -t rsa -C "[email protected]"

进入生成文件位置:$ cd ~/.ssh

2.一台主机,多个ssh key

生成第二个ssh key

$ ssh-keygen -t rsa -C "[email protected]" -f ~/.ssh/second

3.添加配置文件:
~/.ssh/目录下新建config文件。

# github
Host github.com
HostName github.com
User git
Identityfile ~/.ssh/id_rsa

# 某一台服务器 119.xx.xxx.x 命名为hello,则连接时直接`ssh hello`即可。(若是从其他地方拷贝的pem文件,当心有文件有权限问题,`chmod 600`修改权限即可)
Host 119.xx.xxx.x
HostName hello
User git
IdentityFile ~/.ssh/second

4.测试连接
$ ssh -T [email protected]

Modern CSS Reset

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Sass 文件组织方式

sass/
|
|– abstracts/
|   |– _variables.scss    # Sass Variables
|   |– _functions.scss    # Sass Functions
|   |– _mixins.scss       # Sass Mixins
|   |– _placeholders.scss # Sass Placeholders
|
|– base/
|   |– _reset.scss        # Reset/normalize
|   |– _typography.scss   # Typography rules
|   …                     # Etc.
|
|– components/
|   |– _buttons.scss      # Buttons
|   |– _carousel.scss     # Carousel
|   |– _cover.scss        # Cover
|   |– _dropdown.scss     # Dropdown
|   …                     # Etc.
|
|– layout/
|   |– _navigation.scss   # Navigation
|   |– _grid.scss         # Grid system
|   |– _header.scss       # Header
|   |– _footer.scss       # Footer
|   |– _sidebar.scss      # Sidebar
|   |– _forms.scss        # Forms
|   …                     # Etc.
|
|– pages/
|   |– _home.scss         # Home specific styles
|   |– _contact.scss      # Contact specific styles
|   …                     # Etc.
|
|– themes/
|   |– _theme.scss        # Default theme
|   |– _admin.scss        # Admin theme
|   …                     # Etc.
|
|– vendors/
|   |– _bootstrap.scss    # Bootstrap
|   |– _jquery-ui.scss    # jQuery UI
|   …                     # Etc.
|
`– main.scss              # Main Sass file

Nginx配置指北之gzip

无论是前端还是后端,在部署项目时,时常免不了用到Nginx,小项目也时常做个反向代理啥的。今天就简单直接,聊一下其中的一个点——gzip。如有错误,欢迎指正。

一般服务器端常用的是 UbuntuCentOSLinux 等。自己若没有服务器,可在本地把玩一下。

mac 安装

mac下可直接用brew安装,若未安装brew可先行安装

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew install nginx

默认配置

安装完成后会看到命令行含有以下信息,可以看到 nginx.conf所在路径,这正是我们要找的配置文件。同时含有端口信息,当启动Nginx时,可以直接访问http://localhost:8080,当看到下图所示页面,即安装启动成功。

docroot: /usr/local/var/www
default config: /usr/local/etc/nginx/nginx.conf
port:8080

image

几个常用命令

启动:nginx
重新热启动:nginx -s reload
关闭:nginx -s stop
测试语法:nginx -t

gizp配置:

gzip 相关配置可放在 http{}server{}location{} 层级,若不同层级有重复设置优先级为 location{} > server{} > http{}

  1. 开启 gzip压缩
    gzip on;
  2. gzip http 版本
    gzip_http_version 1.0;
  3. 禁止IE6进行gzip压缩(当然现在已经基本没有人使用IE6了)
    gzip_disable "MSIE [1-6]";
  4. 压缩级别(1~9,一般为平衡文件大小和CPU使用,5是常用值,当然跟实际机器的情况有关)
    gzip_comp_level 5;
  5. 最小压缩临界值(默认的是20字节)
    gzip_min_length 20;
  6. 压缩通过代理链接的客户端数据
    gzip_proxied any;
  7. 采用http协议版本 默认是1.1 ,对于1.0的请求不会压缩,如果设置成1.0,表示http1.0以上 的版本都会压缩。(如果使用了proxy_pass 进行反向代理,那么nginx和后端的 upstream server之间默认是用 HTTP/1.0协议通信的。)
    gzip_http_version 1.0;
  8. 代理缓存压缩和原始版本资源,避免客户端因Accept-Encoding不支持gzip而发生错误的现象(现在一般都采用gzip)
    gzip_vary on;
  9. 压缩文件类型(默认总是压缩 text/html类型,其中特别说明的是application/javascript和text/javascript最好都加上,若页面script标签的type不同则有可能发生部分js文件不会压缩,默认type为application/javascript)
    gzip_types application/atom+xml application/javascript application/json application/rss+xml application/vnd.ms-fontobject application/x-font-ttf application/x-web-app-manifest+json application/xhtml+xml application/xml font/opentype image/svg+xml image/x-icon text/css text/plain text/javascript text/x-component;
  10. 如果有已经压缩的(.gz)或者提供静态文件服务,可以设置为on。如果不是这样,最好设置为off,因为这会造成额外的I/O开销。一个比较好的处理方式是放在location{}或server{}级别单独处理。
    gzip_static on;
  11. 压缩结果数据流存储所用空间,下面表示以8k为单位,按照原始数据大小以8k为单位的16倍申请内存。默认值是申请跟原始数据相同大小的内存空间去存储gzip压缩结果。
    gzip_buffers 16 8k;

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.