ICDYCT / I Can Do, You Can Too

In the previous post, we found suitable code to display different types of content. Some are large chunks of text, displayed using textarea; some are images, displayed using img. But what kind of code structure should we use? I've thought about it and plan to do this: 1. Wrap different display methods as different functions and put them in main.js. For example: function buildValueTxt(longUrl) {} function buildValueImg(longUrl) {} function buildValueTxtarea(longUrl) {} 2. Set a function variable, and assign it to different functions in different index.html files, for example: In the short link's index.html buildValueItemFunc = buildValueTxt In Pastebin's index.html buildValueItemFunc = buildValueTxtarea In the image hosting's index.html buildValueItemFunc = buildValueImg 3. In main.js, use the same code logic: // Long url information Long url child.appendChild(buildValueItemFunc(longUrl))

上一篇, 我们找到了合适的代码来显示不同类型的内容. 有的是大段文字, 用textarea来显示; 有的是图片, 用img来显示. 但是我们使用一个怎样的代码结构呢? 我想了一下准备这样: 1. 把不同的显示方式包装为不同的函数, 放到 main.js 中. 如: function buildValueTxt(longUrl) {} function buildValueImg(longUrl) {} function buildValueTxtarea(longUrl) {} 2. 设置一个函数变量, 在不同的 index.html 中, 赋值为不同的函数, 如: 在短链的 index.html 中 buildValueItemFunc = buildValueTxt 在 Pastebin 的 index.html 中 buildValueItemFunc = buildValueTxtarea 在图床的 index.html 中 buildValueItemFunc = buildValueImg 3. 在 main.js 中, 使用同样的代码逻辑: // 长链接信息 Long url child.appendChild(buildValueItemFunc(longUrl))

Among the Short Link System, Web Notepad System, and Image Hosting System, the requirements for displaying the list of saved data are different. The Notepad System should display the value using a multi-line text box. As shown below: The Image Hosting System should display the value in the form of an image. As shown below: The Short Link System uses the original display method. Just display the entire value as text. The code is already written. The functionality is correct as well.  The current question is, how to design the code structure reasonably, so that the configuration items in worker.js can control the display method of the list. The configuration item for setting the system is in worker.js. At most, there is one more item, which controls which index.html to load. But the function of implementing the list display is in main.js.  The file main.js is on Github. It is specified to load in the index.html file. If the content of main.js is moved out and put into index.html, and the...

在 短链系统, 网络记事本系统, 图床系统 中, 已保存数据的列表的显示方式 需求是不同的. 记事本系统, 应该用一个多行文本框来显示 value. 如下: 图床系统, 应该以图片的形式显示 value. 如下: 短链系统就是原来的显示方式. 以文本形式显示全部value即可. 代码已经有了. 功能也是对的.  现在问题是, 怎么合理的设计代码结构, 让 worker.js 里面的配置项可以控制列表的显示方式. 设置什么系统的配置项是在 worker.js 里面. 最多还有一项, 控制加载哪个 index.html 但是实现列表显示的功能在 main.js 里面.  main.js 这个文件在 Github 上. 在 index.html 文件里面指定加载. 如果把 main.js 的文件内容搬出来放到 index.html, 然后不同的系统使用不同的 index.html , 小改一下 JS 代码的逻辑, 实现显示效果的差异.  这样是能够实现效果没错, 但 main.js 里面大段相同的代码要复制到每个 index.html 里面, 太不优雅了.  如果以后, 相同部分的代码需要修改, 那就是霰弹枪伤, 要打开这么多个index.html一个一个的改, 如果改错了, 漏掉了, 就有问题了. - To Be Continued

Requirements In the previous step we implemented the core functionality of the image hosting service , saving and retrieving data. But to convert images to Base64 data, you have to open another page , that's too... So we "borrow" this page into our own image hosting operation page. Approach Create a card (a class in Bootstrap). "Borrow" the functionality from the left-side page. Then create a "Next" button, used to sync the data in the new card to the original elements. Practice I won't go into the code details. They're all trivial bits and pieces. The only thing worth mentioning is that the borrowed page uses the Bulma CSS framework . After some thought, I decided to keep using Bootstrap in my project. For a better input file component, I switched to Bootstrap V5 (previously was using v4). Then the modal showing operation results had some issues. I consulted GPT, and combined with Bootstrap's official documentation , I found that some attr...

需求 上一步我们已经实现了图床的核心功能 , 保存和读取数据. 但是为了把图片转换为Base64数据, 还要 另外开一个页面 , 这也太... 所以我们把这个页面"借鉴"到自己图床的操作页面上. 思路 建一个 card (Bootstrap里的class). 把 左边页面中的功能 "借鉴"过来. 再建一个 "Next" 按钮, 用于把新card里面的数据同步到原有的元素中. 实践 代码的细节就不讲了. 都是一些细细碎碎. 唯一有点的可说的价值的就是, 被借鉴的网页是使用 Bulma 的CSS框架 的. 我考虑了一下, 我的项目里还是继续使用 Bootstrap. 为了更好的 input file组件, 我转为使用 Bootstrap V5 (之前使用的是v4). 然后显示操作结果的弹窗就有一些异常了. 请教了一下GPT, 再结合  Bootstrap的官方文档 , 里面有一些属性的名字有变化. 新建了一个“主题”，theme/imghost ======== 完 Github: https://github.com/crazypeace/url-Shorten-Worker/ 演示站: https://imghost.crazypeace.workers.dev/imghostimghost

Requirements Posting on NodeSeek requires you to bring your own image hosting. We have already implemented a simple KV database . So, by the same principle, isn't image hosting just the same thing? You send the system a path, and the system returns the image data to you. Approach I designed to store the image's base64 data in KV. Because this way you can manage it directly in the KV backend; when the human eye reads the backend data, there won't be any weird characters; and it's more convenient to copy-paste and transfer between different systems. The downside is that the data size will increase, by 33%. Practice First, convert the image to base64 using other websites, such as  https://oktools.net/image2base64 A gif image like this gets the following large chunk of base64 data. On the basis of pastebin, we use these base64 data as the value, and set 233.gif as the key. After saving, we can retrieve these base64 data through 233.gif, like this: Asking GPT for help, we ge...

需求 在 NodeSeek 上发贴, 是要自备图床的. 我们已经实现了单纯的KV数据库 . 那么, 同样的原理, 图床不就是一样的事情吗? 发给系统一个path, 系统还给你一个图片的数据. 思路 我设计在KV中保存图片的base64数据. 因为这样可以在KV的后台中直接管理; 人眼阅读后台数据时, 不会有奇怪的字符; 在复制粘贴, 不同的系统之间复制转移, 会比较方便. 坏处是, 数据量会变大, 变大 33%. 实践 图片转base64先利用其它网站实现, 如  https://oktools.net/image2base64 这样一个gif图片 得到下面这一大段base64数据. 我们在pastebin的基础上, 使用这些base64数据当作value, 设置233.gif当作key. 保存之后, 我们可以通过233.gif再获取这些base64数据, 像这样: 求助 GPT, 得到下面这段代码来把 base64 数据转化为一个图片返回给http请求. 把这段代码的函数添加到worker.js function base64ToBlob(base64String) {   var parts = base64String.split(';base64,');   var contentType = parts[0].split(':')[1];   var raw = atob(parts[1]);   var rawLength = raw.length;   var uInt8Array = new Uint8Array(rawLength);   for (var i = 0; i < rawLength; ++i) {     uInt8Array[i] = raw.charCodeAt(i);   }   return new Blob([uInt8Array], { type: contentType }); } 然后在返回http请求之前, 多处理这么一步, 就行了. 效果如下: ======== 完 把代码整理漂亮一点, 再上传. 用一个配置项设置系统的类型. Github:  https://github.com/craz...

The original author of Url-Shorten-Worker designed it to support different themes from the start. It works by loading different index.html files. By default it's empty, which means it loads the default index.html from the Repo root directory. We create a new directory under theme called pastebin, then copy an index.html into it, and make some modifications based on that. Since this is for use as an online notepad PasteBin, the value often involves large blocks of text, so I changed it to a textarea element. The final result is as follows, ======== End Github:  https://github.com/crazypeace/Url-Shorten-Worker Demo:  https://pastebin.icdyct.cloudns.asia/tieludasiliqiuweiyue  

Url-Shorten-Worker 原作者本来就设计了可以支持不同的主题. 其实就是加载不同的index.html 默认是空, 也就是加载默认的 Repo 根目录下的 index.html 我们在 theme 下新建一个目录, pastebin, 再把 index.html 复制一份进来, 以此为基础做一些修改. 因为如果是当网络记事本PasteBin使用的话, value常常遇到大段文字的情况, 所以我修改为 textarea 元素. 最终效果如下, ======== 完 Github:  https://github.com/crazypeace/Url-Shorten-Worker 演示站:  https://pastebin.icdyct.cloudns.asia/tieludasiliqiuweiyue  

Requirement When both visit_count and load_kv are enabled, the result will be displayed as follows. Comments also mentioned the hope to hide it. Approach When qryall assembles the returned data, skip data ending with '-count'. ======== End Github:  https://github.com/crazypeace/Url-Shorten-Worker Demo:  https://1way.eu.org/bodongshouqulveweifengci   You can view the visit count, but you cannot see the query result of -count

需求 当 visit_count 和 load_kv 同时打开的时候, 会显示出这样的结果. 评论也提到希望隐藏. 思路 在 qryall 拼凑返回数据时, 跳过 '-count' 结尾的数据. ======== 完 Github:  https://github.com/crazypeace/Url-Shorten-Worker 演示站:  https://1way.eu.org/bodongshouqulveweifengci   你能查看访问次数, 但是看不到 -count 的查询结果

Requirement I believe everyone has already used many online notepad applications, such as:  https://gist.github.com/ https://pastebin.ubuntu.com/ Actually, I've had this idea for a long time. A short link service is essentially about inputting a Key and returning a Value. It just does one more step, treating the Value as the target URL and automatically redirecting to it. So what if we don't do the redirect? We simply display the Value corresponding to the Key, and that would be a simple online notepad.

需求 相信大家已经用过很多网络记事本的应用了. 比如:  https://gist.github.com/ https://pastebin.ubuntu.com/ 其实我很早就有这样的想法. 短链服务本质上就是输入一个Key, 返回一个Value. 只不过多做了一步, 把Value当作目标网址, 自动跳转. 那么如果我们不做跳转呢? 仅仅是显示Key对应的Value, 那么就是一个简单的网络记事本了.

Requirement 饮食健康 2024年1月2日 GMT+8 03:52:00 希望能添加从cloudflare查询以往添加的短链接的功能，不然如果清除了浏览器缓存或在另一台电脑上想要查询和管理短链接的话必须登录cloudflare才行，比较麻烦。 我一开始设计这个短链系统的时候, 是作为可以和熟悉的人共同使用的, 所以我使用浏览器的localStorage的好处是, 每个人都只看到自己添加过的短链. 不会互相干扰, 我后来添加了删除短链的功能, 你也不会误删别人的短链. 但是, 既然有人特别提出来了, 那么我再想想, 如果这个系统是只给我自己一个人用呢, 那么这个读取KV的需求是合理的.

需求 饮食健康 2024年1月2日 GMT+8 03:52:00 希望能添加从cloudflare查询以往添加的短链接的功能，不然如果清除了浏览器缓存或在另一台电脑上想要查询和管理短链接的话必须登录cloudflare才行，比较麻烦。 我一开始设计这个短链系统的时候, 是作为可以和熟悉的人共同使用的, 所以我使用浏览器的localStorage的好处是, 每个人都只看到自己添加过的短链. 不会互相干扰, 我后来添加了删除短链的功能, 你也不会误删别人的短链. 但是, 既然有人特别提出来了, 那么我再想想, 如果这个系统是只给我自己一个人用呢, 那么这个读取KV的需求是合理的.