柚子青年。

柚子青年。
2022-08-14
因为币安这个APP除了买币一无是处,所以我自己动手开发了这款Chrome拓展工具。既能看行情,还能查看收益、管理资产。

实话实说,币安除了能买币其他一无是处,收益之类的做的更烂。所以我只能自己动手了

一位不愿意透露姓名的朋友表示,确实很烂实话实说

我只是一个刚入行的小韭菜,听说币圈的同志们抄币还要做 Excel ,所以分享出来。希望可以帮助大家管理自己资产(工具还在初级阶段,行情只是第一个模块,有什么建议可以在本网站给我留言😉)

阅读全文
柚子青年。
2022-08-14
纯前端解析APNG动画格式图片,生成ZIP打包下载所有帧图片。

起因

某天晚上我在某牙看直播时,发现他们新推了一个表情包还挺逗,大概是这样的

如果你看到这段字说明你的浏览器不支持

于是我突发奇想做一个表情包,这样的

拆分APNG帧动画以及生成ZIP下载

由于PS不支持APNG的帧动画拆分,所以我只能自己动手了 👨‍💻

阅读全文
柚子青年。
2022-08-14
Docker + jenkins 的前端自动化

安装 Docker jenkins

docker run -d -u root  --privileged=true  --name jenkins -p 8080:8080 -p 50000:50000 -v /opt/jenkins:/var/jenkins_home -v /etc/localtime:/etc/localtime docker.io/jenkins/jenkins
  • -d 后台运行镜像
  • -p 8080:8080  将镜像的8080端口映射到服务器的80端口
  • -p 50000:50000  将镜像的50000端口映射到服务器的50000端口
  • -v /opt/jenkins:/var/jenkins_home  /var/jenkins_home目录为jenkins工作目录,我们将硬盘上的一个目录挂载到这个位置,方便后续更新镜像后继续使用原来的工作目录。
  • -v /etc/localtime:/etc/localtime  让容器使用和服务器同样的时间设置。
  • --name jenkins 给容器起一个别名

访问jenkins

阅读全文
柚子青年。
2022-08-14
Formily入门文档,了解formily是什么、快速创建一个简单表单,增加校验规则以及自定义校验正则。

本教程只基于Formily SchemaForm的使用,Demo展示 codesandbox

Formily是什么

Formily 是阿里巴巴开源的一个表单框架,致力于解决所有中后台表单场景。目前只有React版本,支持Antd和next UI组件库。[查看详情]

Formily有自己的状态管理,内部也有自己的生命周期,在渲染的时候也做到了最小更新,所以即使你是大型表单性能也不会很差。

阅读全文
柚子青年。
2022-08-14
在使用 Editor.md 的过程中遇到的图片上传问题

Editor.md 是一个很好用的 markdown 编辑器,在使用过程中遇到一个图片上传的问题。

插件原方法是使用了一个 Form 来提交图片资源,我在这个基础上添加了一个 upload 方法,用来上传图片资源。储存图片使用的是阿里云的OSS。

源代码

var dialogContent = ((settings.imageUpload) ?    "<form action='" + action + "' target='" + iframeName + "' method='post' enctype='multipart/form-data' class='" + classPrefix + "form'>" :    "<div class='" + classPrefix + "form'>") +    ((settings.imageUpload) ? "<iframe name='" + iframeName + "' id='" + iframeName + "' guid='" + guid + "'></iframe>" : "") +    "<label>" + imageLang.url + "</label>" +    "<input type='text' data-url />" + (function () {        return (settings.imageUpload) ? "<div class='" + classPrefix + "file-input'>" +            "<input type='file' name='" + classPrefix + "image-file' accept='image/*' />" +            "<input type='submit' value='" + imageLang.uploadButton + "' />" +            "</div>" : "";    })() +    "<br/>" +    "<label>" + imageLang.alt + "</label>" +    "<input type='text' value='" + selection + "' data-alt />" +    "<br/>" +    "<label>" + imageLang.link + "</label>" +    "<input type='text' value='http://' data-link />" +    "<br/>" +    ((settings.imageUpload) ? "</form>" : "</div>");
阅读全文
柚子青年。
2022-08-14
记录常用工具

修改npm镜像地址

# 临时使用npm --registry https://registry.npm.taobao.org install express# 校验npm config get registry# 持久修改npm config set registry https://registry.npm.taobao.org# 校验npm info express# 还原默认npm config set registry https://registry.npmjs.org/

TS配置alias别名

解决TS编译别名报错,vscode错误提示。

阅读全文
柚子青年。
2022-08-14
记录常用 Git 命令、易错误操

//获取远端仓库一切变更
git fetch

git fetch origin

// 拉取分支
git checkout -b feature/xxx origin/feature/xxx

// 同步远端主库变更
git merge origin master

// 删除某个分支
git branch -D feature/xxx

阅读全文
柚子青年。
2022-08-14
如何在服务器上安装一个自己的Gitlab?

安装启动 Debian/Ubuntu 用户

  • 首先信任 GitLab 的 GPG 公钥:

    $ curl https://packages.gitlab.com/gpg.key 2> /dev/null | sudo apt-key add - &>/dev/null
  • Debian/Ubuntu 版本 Ubuntu 18.04 LTS 其他参考 [清华大学开源镜像网站教程] ,复制下面内容写入 /etc/apt/sources.list.d/gitlab-ce.list

    deb https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/ubuntu bionic main
  • 安装 gitlab-ce

    $ sudo apt-get update$ sudo apt-get install gitlab-ce
  • 修改 external_url 配置

    $ vim /etc/gitlab/gitlab.rbexternal_url '[个人gitlab地址]'
  • 重置配置

    $ sudo gitlab-ctl reconfigure
  • 其他指令

    // 查询gitlab 进程$ ps -ef|grep gitlab// 停止gitlab$ sudo gitlab-ctl stop// 启动 gitlab$ sudo gitlab-ctl start// 修改 gitlab nginx 配置$ vim /var/opt/gitlab/nginx/conf/gitlab-http.conf
阅读全文
柚子青年。
2022-08-14
为什么 Hooks 内 removeEventListener 会失效?

起因

当我在 Hooks 内使用 addEventListener 监听 scroll 事件时,然后使用 removeEventListener 移除监听发现移除失效。

const scroll = () => {    useEffect(() => {        document.addEventListener("scroll", scrollCallback);    }, []);    const scrollCallback = (e) => {        console.log(e)    }    const clearScroll = () => {        document.removeEventListener("scroll", scrollCallback);    }    return <button onClick={clearScroll}>Clean</button>;}

这是一个在初始化完成后会在 document 添加一个 scroll 事件监听,点击按钮之后会清除监听事件。

阅读全文
柚子青年。
2022-08-14
使用特殊字体时,字体包过大解决方法。

安装 font-spider

npm install font-spider

index.html

<div class="content">0123456789</div>
阅读全文
柚子青年。
2022-08-14
有时候只是想要一个简单的轮播图效果,一些开源库总是很大,如何写一个最轻量的轮播图。

轮播图的几个关键点:翻页按钮,分页器,悬停静止,无限轮播,清理动画叠加。

文中使用了构造函数的方式把所有细节解构去耦合,欢迎大家点评

html

<div class="swiper swiper1">    <div class="wrapper">        <div class="slider">1</div>        <div class="slider">2</div>        <div class="slider">3</div>        <div class="slider">4</div>        <div class="slider">5</div>    </div>    <div class="btn">        <span class="prev"><</span>        <span class="next">></span>    </div></div>
阅读全文
柚子青年。
2022-08-14
node小工具,用于xlsx和json互转

xlsx 转 json

const fs = require('fs');const xlsx2json = require('xlsx2json');xlsx2json(    './文档.xlsx', // url    {        dataStartingRow: 3,  // 第几行开始        mapping: {    // 解析 key value            'key1': 'A',            'key2': 'B',        }    }).then(jsonArray => {  // 输出数组  格式自行log    fs.writeFileSync('./文档.json', JSON.stringify(jsonArray));});

json 转 xlsx

const fs = require('fs');const json2xls = require('json2xls');const json = require("./json");let jsonArr = [];for (let jsonKey in json) {    jsonArr.push({        "A": json[jsonKey].cn, // A 内容        "B": json[jsonKey].en, // B 内容    });}fs.writeFileSync('./data.xlsx', json2xls(jsonArr), 'binary');
阅读全文