首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
V2EX  ›  分享创造

TTL - Tiny Todo List 一个自用 todolist 诞生记

  •  
  •   onvno · 62 天前 · 2610 次点击
    这是一个创建于 62 天前的主题,其中的信息可能已经有所发展或是发生改变。

    商店地址:tiny todo list

    Github:tiny-todo-list

    业余写了款基于 Chrome 的轻量任务清单扩展 - ttl (tiny todo list),写来原因有一二:

    • 一是 Chrome 上基本没找到一款完全符合自己心意的简洁 todolist
    • 二是正在看的 Svelte 框架文档简洁,总觉得需要试一试是否可用好用

    因为相信看这篇的大多数都是开发,所以除了介绍对清单 todolist 的理解,另外就是适当穿插一些开发使用到的框架和 API 接口介绍。

    为什么选用 Svelte

    这是个有趣的事情,因为前端虽然一直在小步快跑,但近几年国内主流的开发应该是在 Vue,React 中切换,变的是一次次版本升级带来的用法差异,不变的是这几款框架基本已经确定了自己的江湖地位,就像在前端编译构建阶段,Webpack 已经是无人撼动的地位,偏偏有个愣头青搞起了 rollup。嗤之以鼻的人说这是蜉蝣撼大树,不安分的人会心生几分敬意,少年有种勇者斗恶龙的气概,而正是这个愣头青又盘算起了前端框架,就是这个 Svelte,已经到了 v3 版本,简单介绍下:

    1. 从新手文档来说,Svelte 说第二,可能没有敢说第一的。没有纯文本的教育小白,直接上手就是交互式示例操作。末了,还不忘提供很多示例,供你选择参考理解。
    2. 从新手上手来说,看过文档基本可以确认这就是最回归前端写法的一个框架了,入手的难度要小于我前边说到的几个。
    3. 从生态来说,确实不够完善,连一套完整的组件库都没有。这就是说如果想要在大型项目中使用,考虑长期开发效率和维护要三思。当然你作为开发,本着济世救人,为开源世界贡献光和热,那就上手搞吧。

    虽说生态如此,但后发总比先来的有优势是铁板的事情,毕竟从模板语法上能看到学习了不少 Vue 的长处,同时干掉了虚拟 DOM,没有中间商赚差价,开发直接燥起来。

    相关文档:Svelte 官方文档

    关于 Chrome 扩展开发

    Chrome 扩展单纯说前端开发又不能完全涵盖,可以说是一个前端练手微项目的绝佳机会。为什么算是微项目:

    1. 支持popupbackground之前类似前后台的交互 - 可以看做是前后端请求
    2. 支持直接跨域接口访问 - 可以任性使用任何公共 API
    3. 免费提供 100kb 同步 - 无需自己实现登陆注册体系从而实现用户级存储
    4. 支持各种浏览器调用

    如果想了解下这个小身材却有大内容的开发,英文又不一定那么好,那么墙裂推介这个非官方的开发者文档,而如果你恰巧对说明性文档不感兴趣,可以看看我写过的一篇问答式入门文档写个 Markdown 插件,讲讲 Chrome 扩展开发

    一个遗留问题

    有了前边提到的原因一二,和上手练练新框架的想法,就开始上手做了。但还是要说一个做之前就考虑的问题。

    先前开发SPS时,使用了 Chrome 为每一款扩展提供了 100kb 的同步功能。这是个神奇的 100kb, 有了这 100kb 存储,可以做到无需单独账号登陆系统,就可以同步更新。但当你想在 100kb 范围内存储一批数据时,又会遇到一个问题:每一个对象存储不能超过 8kb,也就是说给了你自由,又给了你套了层枷锁,终究没办法翩翩起舞。这也是 SPS 限制存储 40 首(甚至有些情况不到 40 首 bug )的原因。

    怎么办,如何在不注册登录(表层原因是不想存储任何用户数据,不作恶,深层原因是还需要自己做数据存储,麻烦),又能让用户肆意存储。有了问题,就考虑这么一个免费的存储空间,嗯,Github issue 看好你哟。所以简单测试下,bingo,就用它了。

    相关 API 文档:

    功能需求

    说到功能需求,不得不说说我所用到的一些 todolist.作为开发和工具爱好者,对工具有些执念: 希望它能简单。这一点偏偏 todoist 做的是重了又重,太多没用的总搞得不是很得劲,有时候还会遇到登陆不上的问题,麻烦。

    在找到一款Simple To-Do List简单有好用的扩展后,深度使用还是发现了几处致命问题:

    • Chrome 单条数据存储,导致超过一定条数无法创建
    • 批量删除功能过于强大,容易误操作
    • 无法对任务增加描述

    查看了下作者更新时间是多年前了,所以理想的简约不简单还是有那么一些距离,就梳理下自己的需求:

    进行中的任务需要能够支持不同状态

    常规 todolist 只能展示完成 /未完成两个状态,有时候在任务完成前,没有看到任务进展会有一种挫败感心理

    TTL 做了什么:

    • TTL 支持通过进度条控制(展示)目前任务进度
    • 支持任务完成不足 1/3, 超过 1/3 不足 2/3,超过 2/3 会使用不同字体颜色 /粗细展示
    • 拖拽到最大即自动存储到complete条目中
    • 删除后会自动存储到forgotten条目中

    需要支持清单任务描述

    Simple To-Do List简单极致到只能创建任务,却不能对任务做一些基本描述

    TTL 做了什么

    • TTL 支持创建时添加
    • TTL 支持双击进行编辑

    需要支持强迫症模式

    创建一定数量任务如未完成,则限制创建新任务

    TTL 做了什么

    • TTL 支持设置最大任务数,默认 100 条

    需要支持遗忘模式

    因为经常会遇到创建任务后,但又根本不重要,结果一直躺在任务列表,怎么办。

    TTL 做了什么 长时间未更新的任务直接进入回收站(Forgotten)

    • TTL 支持自动回收,默认 365 天

    TTL 的缺陷

    • 支持导出备份,却还不支持导入
    • 功能使用缺乏说明文档
    • 没有使用chrome.storage同步,这样遇到多台 PC 的情况,没办法做到信息同步
    • 使用交互细节仍存在问题

    TTL 功能演示

    第 1 条附言  ·  61 天前

    第 2 条附言  ·  61 天前

    第 3 条附言  ·  56 天前
    根据留言 v0.1.0 存在滚动条显示问题,因手边没有 window 和低版本 chrome,没法直接复现,临时发布了一个预览版在 github,可以下载本地安装帮忙测试反馈下: https://github.com/onvno/tiny-todo-list/releases/tag/v0.1.1
    18 回复  |  直到 2019-10-18 00:03:35 +08:00
        1
    admc   61 天前
    前排留名,写的很棒啊大佬,这就去体验下
        2
    onvno   61 天前
    @admc 感谢支持,写篇文字就是记录下,缺陷也比较明显
        3
    dakb   61 天前
    svelte 是第一次听说,楼主厉害
        4
    androidBrant   61 天前
    这个进度条有意思
        5
    onvno   60 天前 via iPhone
    @dakb 就是稍微小众点的框架,不过 Github 也有 2 万多 Star 了,可以玩玩
        6
    inntechy   60 天前   ♥ 1
    windows 下,列表右侧会有滚动条,导致宽度不够,下方也出现滚动条。。
        7
    inntechy   60 天前
    然后由于这个滚动条,导致进度条无法一次性拖到最右,还是蛮影响体验的
        8
    inntechy   60 天前
    用 mac 试了一下,77.0.3865.90 ,同样有滚动条。不知道为什么楼主的演示里没有。
        9
    onvno   59 天前 via iPhone
    @inntechy 感谢 bug 反馈,这几天在外,回来升级后会进行回复
        10
    onvno   59 天前 via iPhone
    @inntechy 嗯,我这里是 mac 的,window 会单独处理下
        11
    sumonian   58 天前
    商城上下载不下来 这是啥情况 能够在 git 上提供一下下载吗
        12
    onvno   58 天前 via iPhone
    @sumonian 直接克隆仓库,安装依赖后,npm run build 下就可以了
        13
    sumonian   57 天前
    @onvno 试了一下 报错 Error: Cannot find module 'rollup-plugin-svelte' 我对于这方面不是很了解 只是想用一个这个东西 所以最好能够帮忙打包一下 或者 告诉我这个错误该怎么处理
        14
    onvno   57 天前 via iPhone
    @sumonian 使用 npm install 安装下依赖就可以,等团建回来往仓库传一份 build 过的
        15
    onvno   56 天前
    @sumonian 仓库已经上传,下载 zip 压缩包即可: https://github.com/onvno/tiny-todo-list/releases/tag/v0.1.1
        16
    onvno   56 天前
    @inntechy 没有复现,不过描述右侧滚动条应该是 overflow 默认显示的问题,手边暂时没有 window,在仓库上传了一份 0.1.1 预览版,麻烦下载本地测试一下,多谢。下载 zip 压缩包拖到本地的扩展列表即可
    P.S:回复发布地址结果被告知外链不能多次回复发,所以麻烦看下上条回复中的链接地址
        17
    inntechy   54 天前   ♥ 1
    @onvno v0.1.1 我这里测试正常
        18
    onvno   54 天前
    @inntechy 收到,我上传下 chrome 商店,一天左右会自动更新
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1076 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 26ms · UTC 18:48 · PVG 02:48 · LAX 10:48 · JFK 13:48
    ♥ Do have faith in what you're doing.