柚子青年。

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

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

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

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

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

起因

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

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

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

阅读全文
柚子青年。
2022-12-05
Formily入门文档,了解formily是什么、快速创建一个简单表单,增加校验规则以及自定义校验正则。
本教程只基于Formily SchemaForm的使用,Demo展示 codesandbox

Formily是什么

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

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

阅读全文
柚子青年。
2022-12-05
在使用 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-12-05
为什么 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-12-05
使用特殊字体时,字体包过大解决方法。

安装 font-spider

npm install font-spider

index.html

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

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

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

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-12-05
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');
阅读全文