shiddong / shiddong.github.io Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 493 KB

HTML 49.61% CSS 15.82% JavaScript 34.57%

shiddong.github.io's Introduction

Hi there 👋

社区主页

知乎

擅长:

shiddong.github.io's People

Contributors

Watchers

shiddong.github.io's Issues

参考资料

上面已经非常全面了，看懂就差不多熟悉了怎么使用

使用两步验证之后，在命令行使用personal access token

今天在命令行上使用 git 时，需要验证权限，但输入个人账号名称和密码，一直提示错误。
现查找原因如下：

在使用了两步验证之后，在命令行中输入的不再是账户密码，而是单独设置的 personal access token.

具体设置在 Developer settings：

具体流程在： Creating a personal access token for the command line

Chrome 升级后tab样式还原成老版的

Chrome版本升级后，tab样式变化比较大，还是适应老版的，可以做一下调整：

地址栏：chrome://flags/
搜索 UI Layout for the browser's top chrome
将default --> normal
重启浏览器

概念

对于任何一个项目而言，本地测试都不可能做到100%覆盖，而且，我们也不能保证用户能按照我们的预期进行操作，其实，用户才是最好的测试者，但是我们不能奢求每个用户遇到问题时候都会主动向我们反馈。

故而，我们需要在项目出现异常时主动对其进行收集上报，分析原因和影响后制定下一步解决方案。所以，我们需要一款成熟的异常监控系统来协助我们。

Sentry 翻译过来就是“哨兵”。
通常我们所说的 Sentry 是指 Sentry 的后端服务，由 Django 编写。8.0 版本使用了 React.js 构建前端 UI。使用 Sentry 前还需要在自己的应用中配置 Sentry 的 SDK —— 通常在各语言的包管理工具中叫做 Raven
(Raven.js - Sentry SDK for JavaScript)

地址：
官网： https://sentry.io
文档： https://docs.sentry.io/clients/javascript/install/
git仓库： https://github.com/getsentry/sentry
社区除了git issue外还可以关注 https://forum.sentry.io/

创建账号

###注册
Sign up for an account

创建项目

前端项目部署

1.Installation

npm install

常用的安装方式是 npm package: raven-js

npm install --save-dev raven-js

使用ES2015 (ES6)的 import 方式

import Raven from 'raven-js';
Raven
    .config('https://<key>@sentry.io/<project>')
    .install();

2.Configuration

Raven
    // configure Raven.js with Sentry DSN(Data Source Name).
    // At this point, Raven is ready to capture any uncaught exception.
    .config("https://<key>@sentry.io/<project>", {
           // Optional settings
           // Raven.config() can optionally be passed an additional argument for extra configuration
     })
    .install()

3.Usage

4.可视化展示

setTimeout(() => {
    throw new Error("this is a test error...")
  }, 4e3)

然后刷新页面触发，这时可以通过chrome调试工具查看上报异常的网络请求。

然后，在sentry.io中就可以看到 Unresolved Issues:

点进去后就能看到更多的错误信息还有用户信息，包括浏览器、版本、ip等

主动捕获异常

通过上面的操作我们已经能成功监控到前端中的错误、异常，但是还不能捕捉到异步操作、接口请求中的错误，比如接口返回404、500等信息，此时我们可以通过raven.caputureException()进行主动上报。

Switch组件异常

今天遇到一个问题，antd的Switch组件，在onChange事件调用数据加载时，会变得卡住。

待查找问题原因。

ORM和数据持久化

As good object-oriented developers got tired of this repetitive work,
their typical tendency towards enlightened laziness started
to manifest itself in the creation of tools to help automate
the process.

When working with relational databases,
the culmination of such efforts were object/relational mapping tools.

—— James Elliott

ORM

对象关系映射（Object Relation Mapping，简称ORM，或O/RM，或O/R mapping），用于在关系型数据库和业务实体对象之间作一个映射。从效果上说，它其实是创建了一个可在编程语言里使用的“虚拟对象数据库”。说白了就是把关系型数据库封装成业务实体对象，这样，我们在具体的操作业务对象的时候，就不需要再去和复杂的SQL语句打交道，只需简单的操作对象的属性和方法。

面向对象的开发方法是当今企业级应用开发环境中的主流开发方法，关系数据库是企业级应用环境中永久存放数据的主流数据存储系统。对象和关系数据是业务实体的两种表现形式，业务实体在内存中表现为对象，在数据库中表现为关系数据。内存中的对象之间存在关联和继承关系，而在数据库中，关系数据无法直接表达多对多关联和继承关系。因此，对象-关系映射(ORM)系统一般以中间件的形式存在，主要实现程序对象到关系数据库数据的映射。

数据持久化

概念

数据持久化就是将内存中的数据模型转换为存储模型,以及将存储模型转换为内存中的数据模型的统称. 数据模型可以是任何数据结构或对象模型,存储模型可以是关系模型、XML、二进制流等。

狭义的理解，持久化仅仅是指把对象数据永久保存在数据库中，数据在计算机中一般由两个存储地，内存为暂存，数据库可以理解为永存；广义的理解，持久化包括和数据库相关的各种操作，封装了数据访问细节，为大部分业务逻辑提供面向对象的API。

数据持久化对象的基本操作

保存、更新、删除、查询等。

使用数据持久化的好处

松散耦合，程序代码重用性强，使持久化不依赖于底层数据库和上层业务逻辑实现，更换数据库时只需修改配置文件而不用修改代码。
业务逻辑代码可读性强，在代码中不会有大量的SQL语言，提高程序的可读性。
持久化技术可以自动优化，以减少对数据库的访问量，提高程序运行效率。

扩展阅读

理解ORM和数据持久化

环境搭建

zsh

安装配置oh-my-zsh

nginx proxy_pass指令

在配置高防测试工具时，碰到一堆关于nginx配置的坑。

背景

要将形如 localhost:80/api/bgpip?name=123&city=shanghai proxy到 https://bgpip.api.qcloud.com/v2/index.php?name=123&city=shanghai

最后的解决方式：

location /api/bgpip {
        proxy_pass https://bgpip.api.qcloud.com/v2/index.php;
}

或
location /api/bgpip/ {
        proxy_pass https://bgpip.api.qcloud.com/v2/index.php;
}

中间使用了如下的配置，都不正确，会出现404.

location /api/bgpip {
        rewrite ^/api/bgpip(.*)$ /v2/index/php;
        proxy_pass https://bgpip.api.qcloud.com;
}

或

location /api/bgpip {
        rewrite ^/api/bgpip(.*)$ /v2/index/php;
        proxy_pass https://bgpip;
}

upstream bgpip {
        server bgpip.api.qcloud.com max_fails=5;
}

proxy_pass 指令

这个指令用来设置被代理的服务器端口、套接字以及URL：

可以使用域名(IP地址)和端口来指定被代理的服务器

proxy_pass http://localhost:8000/uri;

也可以使用Unix套接字来指定被代理的服务器

proxy_pass unix:/path/to/backend.socket;

请求转给后端服务器的URI部分，是取自nginx代理服务器的location后面的URI路径部分。
例如，

location /name/ {
         proxy_pass    http://192.168.1.2;
}

如上，访问 /name/test/test.html 将反向代理访问 http://192.168.1.2/test/test.html，将 /name 去掉了，不需要再 rewrite，上面的错误主要就在这。

另外

在启动和删除nginx 进程时，

sudo nginx

pgrep -l nginx    // 根据进程名称查询进程ID
sudo pkill nginx    // 根据进程名称杀死进程

Synthetic Event Warning

问题场景

Warning: This synthetic event is reused for performance reasons. 
If you're seeing this, you're accessing the property `nativeEvent` on a released/nullified synthetic event. 
This is set to null. If you must keep the original synthetic event around, use event.persist(). 
See https://fb.me/react-event-pooling for more information.

Fix

我们的modal封装方式是：添加一个modal，就返回一个对象，包含一个promise，就是这个modal的生命周期。modal组件的store：

let doResolve
let doReject

const promise = new Promise<IResult>((res, rej) => {
      doResolve = (result: IResult) => {
            res(result)
            this.remove(id)
      }
      doReject = err => {
            rej(err)
            this.remove(id)
      }
       ...

return {
      promise,
      resolve: doResolve,
      reject: doReject
}

CommonModalFooter组件的模板，在关闭/取消时点击Button，执行传入组件的 onCancel 事件。

<Button
    size="l"
    onClick={props.onCancel}
    disabled={props.loading || props.disabledCancel}
>
    {cancelText}
</Button>

使用该组件，在取消操作之后，执行 reject，modal关闭，

<CommonModalFooter
    onCancel={this.props.reject}
    onOk={this.onOk}
    loading={this.isSubmitting}
/>

所以现在出现这一堆warning的原因是：

点击之后执行 onClick，会将 SyntheticEvent 传入 onCancel，当将 Modal 的 props.reject 默认为 onCancel 方法时，就会将 event 以异步方式传出;
另一方面，SyntheticEvent 对象是通过合并得到的，这意味着在事件回调被调用后，SyntheticEvent 对象将被重用并且所有属性都将被取消。这是出于性能原因。因此，无法以异步方式访问该事件。

所以我们要杜绝将 SyntheticEvent 作为默认参数传出，修改方式：

<Button
    size="l"
    onClick={() => props.onCancel()}    //  这样就不会把 event 传到 onCancel / props.reject
    disabled={props.loading || props.disabledCancel}
>
    {cancelText}
</Button>

其他一些情况下，如果我们需要传出 event 的某些内容，最好是将该内容赋值出来，然后以异步方式传出。

const val = event.target.value

另外，试了一下 event.persist() 解决掉警告，但是导致了 Chrome 挂掉。

Refer:

Study 代码构建、发布

Travis CI

2018年书单

期望：

检验：
————— 待检验 —————
<未完成内容>
<超越期望的内容>

Study Database

Redis

Redis 命令参考 http://redisdoc.com

本文档是 Redis Command Reference 和 Redis Documentation 的中文翻译版，阅读这个文档可以帮助你了解 Redis 命令的具体使用方法，并学会如何使用 Redis 的事务、持久化、复制、Sentinel、集群等功能。

Redis 实战在线书籍
Redis 设计与实现在线书籍

以上几本书或网站的作者都是黄健宏

Study Frontend - ES6/React/Webpack

阮一峰系列：

ES6 语法：教程
Babel：教程
React：教程，示例库
Webpack：教程
React 项目脚手架：代码库
Flex 布局：教程，示例
CSS Modules：教程，示例库
React-Router：教程，示例库
Flux 架构：教程，示例库
Redux 架构：教程一、教程二、教程三
Mocha 测试框架：教程，示例库
Istanbul 覆盖率框架：教程
React 单元测试：教程，示例库

React.js 小书

React.js 小书
React.js 小书练习题

React Router

REACT TRAINING / REACT ROUTER 英文版react-router练习
React Training Github
React Router 中文文档 GitBook

MobX

MobX 中文文档(与官网文档保持同步) GitBook
mobx源码解读司徒正美

ES6

Zakas - Understanding ECMAScript 6 GitBook 翻译，英文版

TypeScript

中文官网手册指南
Handbook（中文版）GitBook

他人优秀的博客文章

youngwind/blog

jekyll QA

Q1 使用 RubyGems 安装时出现镜像问题

国内的 RubyGems 镜像的管理工作由 Ruby China 负责，以前替换为taobao的镜像也不行了。

gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
gem sources -l

确保只有 gems.ruby-china.com 就可以

同时，请尽可能用比较新的 RubyGems 版本，建议 2.6.x 以上。

sudo gem update --system # 这里需要翻墙
gem -v

Q2 使用 RubyGems 安装时出现 SSL 证书错误

安装 rvm

查看最高支持的版本，目前支持的最高版本是 2.4

 rvm list known  // 查找类似 [ruby-]2.4[.1] 的地方.

这样就可以彻底解决了，现在重新安装就不会出现问题：

gem install jekyll bundler

Git相关的问题

1. 如何将一个已有的PR拉到本地

git fetch <upstream> pull/<592>/head:<local-branch>
// pull PR <592> from remote <upstream> to newly-created <local-branch> 
// fetch到未创建的branch，会新创建一个分支，否则会被rejected

2. 如何向别人的PR里提交代码（协作）

$ git remote -v
origin  [email protected]:someone/xxx-apps.git (fetch)
origin  [email protected]:someone/xxx-apps.git (push)
upstream    [email protected]:other/xxx-apps.git (fetch)
upstream    [email protected]:other/xxx-apps.git (push)

先将一个现有的PR拉到本地分支（app_quota）

$ git fetch upstream pull/938/head:app_quota

本地代码更改，加一个新的commit

$ git commit . -m 'improve quotas api'

为了能够push到PR owner的branch，需要增加相应的remote

$ git remote add xxxxxx [email protected]:xxxxxx/xxx-apps.git

push到PR owner的branch

$ git push -f xxxxxx app_quota

代码review，merge...

Sentry 本地搭建前端监控系统

准备工作

安装docker

官方提供了两种部署方案

docker
python
出于操作方便的考虑，我选择了docker。这种方法需要先安装docker和docker-compose。

mac版docker下载地址: https://download.docker.com/mac/stable/Docker.dmg

安装docker-compose

这一步mac可以略过，因为mac安装的的dmg文件已经集成了docker、docker-compose和docker虚拟机。

Compose是用于定义和运行复杂Docker应用的工具。你可以在一个文件中定义一个多容器的应用，然后使用一条命令来启动你的应用，然后所有相关的操作都会被自动完成。

通过curl从github上获取最新的版本。这个命令需要使用sudo -i切换到root用户。

curl -L https://github.com/docker/compose/releases/download/1.9.0/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose
chmod +x /usr/local/bin/docker-compose

执行完成后通过exit退出root用户。
可以通过docker-compose --version查看版本号并确定是否安装成功。

至此，准备工作就完成了。

搭建 Sentry

从github上可以获取最新的sentry

git clone https://github.com/getsentry/onpremise.git

获取到本地之后，就可以根据README.md的 Up and Running 开始着手搭建。

There may need to be modifications to the included docker-compose.yml file to accommodate your needs or your environment. These instructions are a guideline for what you should generally do.

mkdir -p data/{sentry,postgres} - Make our local database and sentry config directories.
This directory is bind-mounted with postgres so you don't lose state!

docker-compose run --rm web config generate-secret-key - Generate a secret key.
Add it to docker-compose.yml in base as SENTRY_SECRET_KEY.
这个步骤会比较耗时，最后会生成一串字符即secretkey，将其复制进docker-compose.yml文件的base 中作为 SENTRY_SECRET_KEY变量，文件中已经给出了它的位置。

docker-compose run --rm web upgrade - Build the database.
Use the interactive prompts to create a user account.
其间会提示创建superuser，用户名是一个邮箱，这个邮箱今后会收到sentry相关的消息，口令可以随便设置，只要自己记得住就可以了。

docker-compose up -d - Lift all services (detached/background mode).

Access your instance at localhost:9000!
下面就可以直接访问 localhost:9000, 使用刚刚创建的 superuser 的邮箱和口令就可以登入。

Note that as long as you have your database bind-mounted, you should
be fine stopping and removing the containers without worry.

上传 sourcemap

sentry-cli login

创建一个release

sentry-cli releases -o 团队名称 -p 项目名称 new release名称

上传：

Study Golang

最佳·实践

https://tour.golang.org/ (从头到尾做一遍）
https://golang.org/doc/code.html
https://golang.org/doc/effective_go.html

https://gobyexample.com/ (把这个写一遍）

Golang语言

Golang标准库文档官网
Go语言圣经（中文版）GitBook
《Go web 编程》
雨痕 Go 学习笔记

其他推荐文章

Go语言实战笔记博客

Gin

Go语言web框架 gin 基本使用地址
Gin的基本语法地址

Study Vim

vimtutor 练习(中文版)
命令：vimtutor zhCN

<div> cannot appear as a descendant of <p>

问题：
在使用React时，报出下列warning：

Warning: validateDOMnesting(...): <div> cannot appear as a descendant of <p>. 

See ... SomeComponent > p > ... > SomeOtherComponent > ReactTooltip > div.

示例：

<p>
   <div>...</div>
</p>

W3C 9.3.1 Paragraphs: the P element

即在 <p> 标签内部只能包含行内标签