豪翔天下

使用hardhat部署智能合约

发表于 2022-03-21 更新于 2022-09-06 分类于 eth Disqus：

能够非常方便地编写、测试并部署智能合约到以太坊
内置了Hardhat Network，不用部署到真是的以太坊网络也能进行测试

安装配置

npm install -g hardhat
npx hardhat	# 直接初始化项目，会生成一个hardhat.config.js配置文件，选最长的那个最全面了

# 也可以在现有项目中初始化
npm install --save hardhat
npm install --save-dev @nomiclabs/hardhat-ethers ethers @nomiclabs/hardhat-waffle ethereum-waffle chai	# 安装一些测试需要用到的依赖
npx hardhat	# 初始化hardhat项目，可以选择只生成配置文件

阅读全文 »

Geth 搭建私链 private blockchain

发表于 2022-03-18 更新于 2022-08-04 分类于 eth Disqus：

Go Ethereum

对于RPC端口，如果实在得暴露到公网，其实也没啥，注意不要在network里面创建账户，即使有也要把私钥放到其他地方物理隔离，当然换端口以及防火墙也是基本操作。也可以在nginx层添加一个HTTP basic Auth认证。网上很多黑客一直在扫30303和8545端口

安装配置

# macos
brew tap ethereum/ethereum
brew install ethereum

# ubuntu
sudo apt-get update
sudo apt-get install software-properties-common
sudo add-apt-repository -y ppa:ethereum/ethereum
sudo apt-get update
sudo apt-get install -y ethereum
curl -LSs https://raw.githubusercontent.com/gochain/web3/master/install.sh | sh	# 安装web3 CLI

常用命令

直接在节点上创建的账号会生成一个json文件存储在data/keystore下

geth --datadir ./data account list	# 列出当前所有的account
geth --datadir ./data console	# 进入console

# console控制台命令
personal.newAccount('password')	# 创建账号
personal.unlockAccount('0x111')	# 解锁账号d

eth.accounts	# 获取当前节点所有的账户信息
eth.getBalance(eth.accounts[0])		# 获取某个账户的balance
user1 = eth.accounts[1]	# 在当前console为账户设置别名

admin.nodeInfo	# 获取当前节点信息
admin.peers	# 获取peer节点信息
net.peerCount	# 获取节点数量
eth.blockNumber	# 查看当前区块数量
eth.getBlock(eth.blockNumber - 1) # 获取指定块的详情，包括hash、difficulty, totalDifficulty(直到当前区块的所有difficulty的和)
eth.getTransactionCount('0x0000000')	# 获取指定账户的transaction nonce值
eth.pendingTransactions	# 获取当前所有pending的transaction
eth.coinbase	# 获取当前的矿工

web3 account extract --keyfile data/keystore/UTC--2022-03-16T02-29-14.506737237Z--XXXXXXXX --password XXXXXXXX # 获取在当前网络上创建的账户的私钥

txpool.status # 查看当前pending和queued的transaction的状态
txpool.content.queued
txpool.inspect.queued	# 查看queued的transaction的gas price

阅读全文 »

ffmpeg 使用手册

发表于 2022-02-08 Disqus：

安装配置

1
2
3

apt install ffmpeg -y 

ffmpeg -version	# 查看当前版本

常用命令

# 转换视频格式
ffmpeg -i video.mp4 video.avi

# 提取视频的音频
ffmpeg -i input.mp4 -vn output.mp3

# 移除视频中的音频
ffmpeg -i input.mp4 -an output.mp4

# 从视频截取任意一帧图片
ffmpeg -i test.asf -y -f image2 -ss 00:01:00 -vframes 1 test1.jpg

# 去除视频水印，简单地模糊一下，其中x和y是左上角的像素坐标，w表示宽度，h表示高度
ffmpeg -i 1.flv -filter_complex "delogo=x=1017:y=21:w=246:h=44" 2.flv

阅读全文 »

2021年总结以及2022年的计划

发表于 2022-02-08 Disqus：

丑牛过了，接下来就是寅虎了，希望今年虎虎生威。

2021总结

按规矩先梳理一下2021年的计划，2021年的计划居然基本上都完成了，真想给自己一个棒棒哒

阅读全文 »

Tailwind 开发手册

发表于 2021-11-16 更新于 2022-12-30 分类于 nodejs Disqus：

基本上是我现在开发新旧项目的必备工具了

安装配置

基础

配置文件tailwind.config.js

如果项目之前已经有大量的存在的css，为了防止冲突可以使用prefix去防止覆盖，对于负数的属性，prefix仍然需要写在最前面，例如tw--mt-10

module.exports = {
  important: false,	// 是否在所有生成的样式加上!important，不推荐这么做
  prefix: 'tw-',	// 添加一个前缀，
  purge: [	// 指定需要从哪些文件中查找我们需要使用的class(这样可以只编译出我们有使用的class)
    '../views/site/*.php'
  ],
  darkMode: false, // or 'media' or 'class'，默认选项
  theme: {
    fontFamily: {	// 直接替换默认字体
      'sans': 'Roboto, sans-serif',
      'serif': 'Roboto, sans-serif',
      'mono': 'Roboto, sans-serif',
      'display': 'Roboto, sans-serif',
      'body': 'Roboto, sans-serif'
    },
    extend: {	// 可以添加一些自定义的样式，或者覆盖之前的样式，在官方文档每一个样式页面下面多有个性化的说明
      backgroundImage: {
        'my-bg': "url('/')"	// 甚至可以这样定义一个背景图片类
        main: 'linear-gradient(225deg, #BD7AE3 0%, #8461C9 100%)'
      },
      boxShadow: {
      	'md-all': '4px 4px 6px -1px rgba(0, 0, 0, 0.1), -2px 2px 4px -1px rgba(0, 0, 0, 0.06)'	// 四周阴影
      }
      height: {
      	'full-vw': '100vw'
    	},
    	minWidth: {
        '36': '9rem'
      },
      spacing: {
        80: '20rem',
        '38': '9.5rem',
        '120': '30rem',
        '128': '32rem',
        '144': '36rem',
        '160': '40rem',
        172: 44rem,
        '192': '48rem',
        '232': '58rem',
        240: '60rem',
        272: '68rem',
        280: '70rem',
        288: '72rem',
        '320': '80rem',
      },
			width: {
        232: '58rem'
      },
    	zIndex: {
        '-10': '-10',
      }
    },
  },
  variants: {
    extend: {
      borderRadius: ['hover']	// 给rounded添加hover效果
    },
  },
  plugins: [],
  corePlugins: {
    preflight: false,	// 添加这个配置可以让tailwind不覆盖默认的基础元素的样式，例如html、body、h1等https://tailwindcss.com/docs/preflight
  }
}

阅读全文 »

Yii2 开发手册

发表于 2021-11-15 更新于 2022-09-16 分类于 php Disqus：

安装与配置

常用命令

yii serve 0.0.0.0 --port=8888	# 指定端口，指定host

# 缓存，缓存的文件在frontend/runtime/cache和backend/runtime/cache下面
yii cache 	# li
yii cache/flush-schema db	# 清除db缓存

常用配置

# index.php
defined('YII_DEBUG') or define('YII_DEBUG', true);	# 打开debug模式

# common/config/main-local.php
'db' => [	# 数据库配置
  'class' => 'yii\db\Connection',
  'dsn' => 'mysql:host=localhost;dbname=password',
  'username' => 'username',
  'password' => 'password',
  'charset' => 'utf8',
  'enableSchemaCache' => true,
  'schemaCacheDuration' => 86400,
  'schemaCache' => 'cache',
]
  
// backend/config/main-local.php
$config = [
  'components' => [
    'request' => [
      'enableCsrfValidation' => false,	// 可以全局关闭csrf验证
    ]
  ]
]

阅读全文 »

Klipfolio 手册

发表于 2021-10-20 更新于 2022-11-15 分类于 system Disqus：

这是一个不怎么好用的工具

Data Sources数据源

可以来自系统中已定义好的第三方服务，也可以直接来自于文件上传、API接口、SQL查询、FTP上传、Email附件
可以自定义时间去刷新(1h - 24h)，但是如果是文件上传这种是不能自动刷新的
可以支持参数，但是必须依赖于klip变量，例如，可以写成https://haofly.net/{props.pageName}，这里的pageName就是klip的变量，如果是第一次访问一个之前没有请求过的参数，那么可能会比较慢，后续的定时刷新也是可以起作用的，刷新的会把所有请求过的参数都请求一遍
由于数据源的接口请求超时时间是80s，对于数据量大的，我们可以创建email形式的数据源，定时往指定的邮箱发送附件即可
数据源的大小默认最大是10MB，通过付费计划可以升级到15MB，但是更大就不行了，并且modelled data也不能超过这个限制，所以要想join几张大表，可以在klip面板使用ARRAY(表1, 表2)，或者LOOKUP来查找需要的mapping数据。明明是我自己研究出来的方法，发现官网有文档的: Managing your data source size

如果要在dashboard上手动请求刷新data sources，可以直接data sources的请求刷新接口:

// 使用html component做一个刷新按钮，然后手动POST接口
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('POST', 'https://app.klipfolio.com/datasources/ajax_refresh_datasource', true);
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlHttp.send('di=&dsid=' + data source的id); // 这里加上di表示直接等待它完成，如果不加则是把它放入了刷新队列里面去

阅读全文 »

axios网络请求

发表于 2021-09-23 更新于 2023-05-22 分类于 javascript Disqus：

基本请求

// 基本请求方式
axios({
  method: 'post',
  url: '/user/123',
  headers: {},
  params: {},
  data: {}, // POST的data
  timeout: 0, 	// 超时时间，默认为0，表示不超时
  responseType: 'json',	// 默认接收JSON格式的响应
  maxRedirects: 5, // 默认重试次数为5
  onUploadProgress: function (progressEvent) {}, // 上传前执行
  onDownloadProgress: function (progressEvent) {},	// 下载前执行
  validateStatus: function (status) {
    return status >= 200 && status < 500	// 定义哪些http状态不会抛错
  }
})
  .then((rersponse: AxiosResponse) => {})
	.catch((error: AxiosError) => {
  	console.log(error.response.status)	// 获取返回状态码
  	console.log(error.message)	// 获取错误信息
    console.log(JSON.parse(error.request.response).message)	// 另外一种错误相应的格式
  	console.log(`${error.config.baseURL}${error.config.url}`) // 获取请求的URL
	})

// 创建一个可复用的client
const client = axios.create({
  baseURL: '',
  headers: {}
})

Axios跨域请求

axios.get('/user', {
  withCredentials: true,	// 跨域请求带上认证信息
  params: {}
}).then(...).catch(...)

阅读全文 »

Material UI / MUI手册

发表于 2021-08-10 更新于 2022-07-20 分类于 Javascript Disqus：

样式使用css-in-js风格，得单独学一套
官方中文文档
从5.x开始material-ui更名为mui了，网上搜到不要奇怪
官方没有react-native 相关的UI插件，可以使用react-native-paper来代替，它也是遵循material design的

组件

动态调用组件的方式

const components = {
  a: AComponent,
  b: BComponent
}

const MyComponent = components['a']
return <MyComponent />	// 调用的时候必须大写

Inputs

Data Display 数据展示

Icons 图标

我们可以用SvgIcon来封装自己的图标，如果有自己的图标并且数量多且用的地方多，最好用这个来封装每一个svg，就能让他们统一起来
还有种借助webpack的svgr进行封装的方式可以让svg仍然以svg的形式存在，但是没有试过，先就不写了

封装只需要这样做即可:

function HomeIcon(props) {
  return (
    <SvgIcon {...props} 
      aria-label="home"	<!--语意话-->
      viewBox="0 0 36.997 35.901"<!--通常我们从设计得到的svg不是统一24的尺寸，通常有自己的尺寸，需要将该viewBox写到这里，否则可能会缺少一部分-->
    >	
      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />	<!--这一块是svg的内容(svg tag的内容部分)-->
    </SvgIcon>
  );
}

实用起来就方便得多了

注意如果svg的color修改不成功，可能是因为svg中某些样式直接写在了path的fill属性中，可以直接在path元素上面加上fill={props.color || "white"}

<HomeIcon
	fontSize={"large"}	// fontSize=2.1875rem/35px，还可选small
  style={{ fontSize: 40 }}
  
  color="paimary"	// paimary, secondary, action, disabled
  style={{ color: green[500] }}
  
/>

遇到一个很奇怪的问题，所有的tooltip都只固定在页面的左上角，而不是元素的上方，结果发现是有程序员给所有div添加了width: 100%;height:100%的属性，我去

<Tooltip
  leaveDelay={200000}	// 显示时长，调试的时候可以把这个增大
  placement={"top"}
  interactive // 交互式，当鼠标移动到弹出框上时不会因为leaveDelay时间到了而关闭，如果没有它，弹出框将不能被点击，鼠标的点击事件都是下层元素的
  title={	// 自定义弹出框内容
    <React.Fragment>
      <Typography color="inherit">Tooltip with HTML</Typography>
      <em>{"And here's"}</em> <b>{'some'}</b> <u>{'amazing content'}</u>.{' '}
      {"It's very engaging. Right?"}
    </React.Fragment>
  }
  >
  <Button>
    <Avatar src={avatar} />
  </Button>
</Tooltip>

Typography 文字

fontWeight/fontSize这些都不能直接设置，只能外面套一层Box

<Typography 
  component="h4" // 使用component能让他直接变成h4元素
  color="inherit" align="center" paragraph>
  Content
</Typography>

Feedback

Surfaces

Accordion/Expand手风琴

可以伸缩展开的手风琴效果

const [expanded, setExpanded] = useState(false)

<Accordion
	defaultExpanded={false}	// 默认是否展开
  onChange={() => setExpanded(!expanded)}
  elevation={0}>	// evevation参数可以不显示子元素外层的border
  <AccordionSummary
    expandIcon={expanded ? <FaMinus /> : <FaPlus />}	// 可以通过事件来使用不同的icon
    aria-controls="panel1a-content"
    id="panel1a-header"
    >
    <Typography>Accordion 1</Typography>
  </AccordionSummary>
  <AccordionDetails>
    <Typography>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
      malesuada lacus ex, sit amet blandit leo lobortis eget.
    </Typography>
  </AccordionDetails>
</Accordion>

accordionSummary: {
  flexDirection: 'row-reverse'	// 添加这个css类可以让icon显示在左侧
}

Link链接

1
2
3

<Link component="button" color="inherit" underline="always">
  This is a button
</Link>

Layout 布局

Box 分组

非常实用的一个组件，类似于bootstrap中的utilities，可以非常方便地通过props来设置样式

这就是material-ui中的System 系统，不过system系统包含一些非常实用的内联样式，不过这玩意儿不是每个元素上都可以直接加的，只有自带的Box组件可以直接加，所以一般是直接在外面包围一层Box，当然如果想要修改子元素的样式，可以用clone方法

// 这样在实际生成的DOM元素中就不会有一个多的Box层了，而是直接将样式附加到了子元素上
// 当clone不work的时候，可以尝试调换Box组件和被clone的组件的引入顺序
<Box color="text.primary" clone>
  <Button />
</Box>

支持的所有的属性(其中不包含的常用的属性包括background-image/background-position)

<Box 
  component="span"	// box默认是一个div元素，也可以通过这个属性置顶其为特定的元素
  
  // Borders边框
  border={1}
  borderRadius={"50%"}	// border-radius
  borderColor="primary.main" // secondary.main, error.main, grey.500, text.primary
  
  // Color/Palette 颜色
  bgcolor="primary.main"
  bgcolor="secondary.main"
  bgcolor="text.primary"	// 黑色
  
  // Display 位置
  position={'fixed'}
  bottom={0}
  
  // Flexbox
  display="flex"
  flexDirection="row"
  flexWrap="nowrap"
  justifyContent="center"
  justifyContent="space-between"
  alignContent="flex-start"
  alignContent="flex-end"
  
  // Sizing 大小
  width={1/4}
  width={300}
  width="75%"
  width={1}	// 100%
  
  // Spacing 间距
  p={2}
  pt={3}
  px={1}
  py={4}
  
  // Typography 文字，对于Typography如果改不了内部的样式，那么直接把标签去掉，直接<Bod>文字</Box>
  textAlign="left"	// text-align，可选left、center、right
  fontWeight="fontWeightLight" // font-weight，可选fontWeightLight、fontWeightRegular、fontWeightMedium、fontWeightBold或者直接数字{500}
  fontSize="fontSize"	// font-size，可选fontSize，其他元素的size：h6.fontSize，或者直接数字{16}
  fontStyle="normal" // font-style，可选normal、italic、poblique
  fontFamily="fontFamily" // font-family
  letterSpacing={6} // letter-space
  lineHeight={10}	// line-height
  
  minWidth="10"
  maxWidth="80"
></Box>

阅读全文 »

Google Cloud 相关服务

发表于 2021-07-23 更新于 2023-02-21 分类于 frontend Disqus：

Install the Google Cloud CLI: google cloud cli工具安装方式

Cloud Function

不同配置的价格表
最大超时时间只能设置为540s=9min，实在不行可以用Cloud Tasks 队列，或者在时间快完的时候直接再调用一下url参数组织一下
其他限制: 常用的会有未压缩HTTP请求或响应的大小为10 MB
为了减少函数的执行时间，我们需要尽量提升程序的启动时间，默认都是冷启动的，但是如果间隔时间很小，谷歌可能并没有销毁，这个间隔是谷歌自己控制的，并且是不一定的，所以你会发现如果启动时间长的函数，有时候处理得快有时候处理得慢。当然，谷歌也提供付费服务保证至少有几个实例在运行，如果不想用，还可以自己弄个定时任务去定时请求一次，不过当然那也算运行时间呀。

1	req.headers['x-forwarded-for'] \|\| req.connection.remoteAddress \|\| req.headers['fastly-client-ip'] // 可以通过这种方式获取客户端IP地址

Cloud Scheduler

定时任务
配置说明：
- Max retry attempts: 失败重试的次数
- Max retry duration: 失败后的最长重试时间，看次数和时间哪个先到就停止
- Min/Max backoff duration: 两次重复间隔最短/最长时间
- Attempt deadline config：验证一个请求是否成功的最长等待时间，如果超过这个时间会显示失败，并得到一个UNKNOWN的错误
居然遇到了trigger两次的bug，就一个任务在一个时间点居然trigger了两次，别人也遇到过https://stackoverflow.com/questions/71594174/cloud-scheduler-invokes-cloud-function-more-than-once-during-schedule，可能不能用http来trigger cloud function了

Cloud Tasks

任务队列，官方文档用起来非常简单实用，可用于多消费者，或者减少第三方接口的并发速率限制
速率控制(队列使用令牌桶来控制任务执行速率，每个命令的队列都有一个用于存储令牌的存储分区，应用每执行一个任务，就会从桶中移除一个令牌，会按照max_dispatches_per_second速率不断向令牌桶中补充填充新令牌)
- Max dispatches: 每秒钟任务分配的速率，每秒将任务分配给多少个worker
- Max concurrent dispatches: 并发执行的数量，同时运行的任务的最大数量
重试控制：
- MAX ATTEMPTS：任务可以尝试的最大次数，包括第一次尝试，-1表示不限制?，但是不能设置为0，所以如果说只想执行一次，应该是设置为1
- MAX INTERVAL：重试尝试之间的最短等待时间
一些限制
- 任务大小上限：100KB(超过会报错task size too large)
- 队列执行速率：每个队列每秒500次任务调度
- 人物的最大倒计时/ETA：30天
- 可以批量添加的最大任务数：100个
- 在一项事务中可以添加的最大任务数：5个
- 默认的最大任务队列数：100个

官方文档给的例子是发送一个字符串，但是如果要发送json格式的payload，可以这样做：

const task = {
  httpRequest: {
    httpMethod: 'POST',
    url: `${config.baseUrl}?${searchParams.toString()}`,
    body: Buffer.from(JSON.stringify(params)).toString('base64'),
    headers: {
      'Content-Type': 'application/json',
    },
  },
};

const request = { parent: this.queue, task };
await client.createTask(request);

// 在接口这边不用做其他处理，就像平常的json请求那样即可
app.post('/endpoint', (req, res) => {
  const {foo} = req.body;
  console.log(foo); // "bar"
  res.send('ok');
});

The queue cannot be created because a queue with this name existed too recently: 队列删除7天后才能创建同名的队列

阅读全文 »

安装配置

Go Ethereum

安装配置

常用命令

安装配置

常用命令

2021总结

安装配置

基础

配置文件tailwind.config.js

安装与配置

常用命令

常用配置

Data Sources数据源

基本请求

Axios跨域请求

组件

Inputs

Data Display 数据展示

Icons 图标

Tooltip 提示

Typography 文字

Feedback

Surfaces

Navigation 导航栏

Bottom Navigation 底部导航栏

Link链接

Layout 布局

Box 分组

Cloud Function

Cloud Scheduler

Cloud Tasks