Skip to content

Latest commit

 

History

History
2877 lines (2288 loc) · 122 KB

dev-ing.md

File metadata and controls

2877 lines (2288 loc) · 122 KB
Raw
title tags created modified
dev-ing
dev
2022-05-24 17:52:58 UTC
2022-05-24 17:53:08 UTC

dev-ing

guide

  • 分析核心需求和问题，拆分问题，梳理任务、子任务，排期开发

金瑶 邀请您加入【金瑶的个人会议室】 点击链接直接加入腾讯会议： https://meeting.tencent.com/p/9606972663 #腾讯会议：960-697-2663

dev-summary

dev-review

# delete all node_modules folders recursively
rm package-lock.json && find . -name 'node_modules' -type d -prune -exec rm -rf '{}' + && find . -name 'dist' -type d -prune -exec rm -rf '{}' + && find . -name '.next' -type d -prune -exec rm -rf '{}' +

find . -name 'node_modules' -type d -prune -exec rm -rf '{}' + 

# 格式化当前包，注意在子文件夹执行命令也会从package.json目录开始格式化整个包
prettier --write '**/*.{js,jsx,ts,tsx,json}' --ignore-unknown
eslint --ext .js,.ts,.tsx --quiet --fix . 

# npm i
  DEBUG=* npm i --no-audit --loglevel silly
DEBUG=* npm i --legacy-peer-deps --no-audit --loglevel=silly
DEBUG=* npm i --legacy-peer-deps --no-audit --loglevel=silly --registry=https://registry.npmmirror.com

npm --registry=https://registry.npmmirror.com install   axios
yarn add axios --registry=https://registry.npmjs.org/  
pnpm install --registry=https://registry.npmmirror.com  

export https_proxy=http://127.0.0.1:7890;export http_proxy=http://127.0.0.1:7890;export all_proxy=socks5://127.0.0.1:7890

$$('[contenteditable]')

flatpak run com.discordaspp.Discord --proxy-server="socks5://127.0.0.1:7897"
betterdiscordctl -i flatpak install

npx create-strapi@rc strapi5-play-202408 --use-npm --quickstart --ts --skip-cloud

npx create-strapi@latest --ts --use-npm --no-git-init  --example --skip-cloud --skip-db    --quickstart ./emptyFolder

stt.message.channel().send('uResetTask')
stt.message.channel().send('uCmdK', 'script.mjs',1,1,'write a quick sort algorithm')

  • dev-goals 不能在产品中检验的技术不玩，注意产品化

    • rich-editor: text/block, vanillajs
    • pivot-table: editable
    • collaboration, local-first database
    • flowchart/whiteboard/pdf/annotation/comment
    • 事项--截止日期(0730+休整)--重要性(hml/s1-s3)
    • apps-wiki-knowledge-base--0904
    • dashboard/webapp-template--0901
    • ui: ariakit, zag/ark, radix-ui, mantine
    • apps: cms+crdt

  • deep into lib/fwk 书籍原理与代码实践要分开, 寻找深入debug的状态

    • 学习巩固: 实践练习 > 源码/示例 > 文档/论坛 > 社交分享
    • 不要从一个想法开始，而是从一个真正的问题开始
    • src-code, issues, pr, forks, extensions/alternatives
    • storage, sync/partial, conflicts, concistency
    • 直接根据具体框架或产品搜索解决方案如airtable-database，不必拘泥于通用方案如event-sourcing/eav，在产品讨论中常有细节和ideas
    • 解决方案在npm/docker也可以搜到，且更准确; 多关注包管理器上的最新的包
    • github package.json 也能搜索示例
    • 拆分核心内容和周边功能
      • split git-src and issues/pr/wiki, split txt/docx/xlsx and api
      • 将更多精力投入 core content 的创作，以及格式兼容、平台兼容、产品集成
    • 不必执着于vanillajs，常用模式早晚会抽象出工具库或框架，如reactive/effect/ajax/undo

dev-2024-方向+方法+时间

  • 👉🏻 output: 代码产出、产品落地、生态积累

  • log2024 表格编辑、版本协作、cms

    • 01-pouchdb-idb-rspack, ethercalc-ot
    • 02-hexo-ssg, strapi-v5, realworld-fe-react
    • 03-realworld-be-sequelize/knex, airtable-like

  • cms 功能融合及模块化

    • outline, strapi, undb, nocobase, 将undb的多维表格加入strapi-admin
    • business-features, 盈利支持自身
    • 不必执着于engine如db/excel-dataflow, 产品的形式大多cms

  • slate-wangeditor

    • model, view, sync, collab
    • slate-docs-examples
    • general-editing-backend: ActionText, cms-payload

  • eg-pivot-views/focalboard

    • table view
    • kanban view
    • 结合tanstack-table的pivot和ospreadsheet的edit/architecture

  • eg-tanstack-table-v8

    • 方便接入已有的外部数据源
    • 内存数据: nedb, blinkdb
    • 流式数据: linvodb, tingodb; 可参考kappa架构
    • 支持内存和持久化: tupledb, tinybase, tiddlywiki

  • db-sync/collab

    • db+crdt的参考: piratedb, evolu, triplitdb, mithic
      • 不必执着于基于indexeddb的实现，只是作为一种持久化的方式
    • base: level/rocksdb/foundationdb, hypercore, ipfs, kappa-db
    • sqlite: rust_sqlite, extension
    • pouchdb: doc-db, incremental view
    • crsqlite, hypermerge: crdt + db
    • triplitdb: crdt + tupledb + eav
    • fireproof: ipld, live-sync, replication, branching-prolly-tree
    • tinybase: reactive
    • kappa + lsm => kdtree/r-tree
    • 基于oplog的研发方向, 架构设计时考虑放在数据库层解决还是应用层解决
      • 实现db，还是sourcing based framework
      • 基于log能提升write性能，基于materialized-view能提升read性能
      • 基于oplog实现partial-sync
    • pijul: crdt + vcs

  • long-term-support

    • cms, airtable, lowcode

  • techstacks-to

    • async/generator, stream, buffer, binary, scheduler, arrow
    • 样式片段也可在线尝试: codepen, w3schools.com

  • separate storage compute example

    • Lovefield uses a plug-in architecture for data stores. All data stores implement lf.BackStore interface so that query engine can be decoupled from actual storage technology.

  • cache/stream for web storage

    • 参考 tanstack-query, falcor, localforage

  • 🤔 支持切换内存和异步数据源的示例

    • tanstack-table external data; ag-grid server-side row model
    • abstract-level, localforage
    • tupledb, tinybase
    • tiddlywiki, react-admin
    • service worker, falcor

  • collab-sync, partial-sync

    • string-crdt: ? list-crdt
    • logux: sqlite-persistor, lww-with-hlc
    • verdant/lo-fi: hlc + websocket, no-merkle
    • harika: hlc + sqlite + absurd-sql, no-merkle
    • jaredly/local-first: hlc + rga
    • evolu: hlc + merkle + worker
    • automerge: hypermerge
    • remoteStorage: google-drive、网盘、七牛对象存储
    • 使用hlc: idbsidesync, verdant, harika
    • 结合hlc+crdt: idbsidesync, evolu, rga-crdt
    • 结合hlc+db: piratedb, tinybase, kappa-db-stream, linvodb
    • hypercore: partial-sync

  • undo/redo与branching可拆分实现

    • undo与versioning/history基于persistent data structure
    • branching与merge可在应用层实现
    • 多个branching可通过structural sharing共享数据结构

  • sqlite-web

    • evolu(hlc+worker)
    • absurd-sql-ts: read ArrayBuffer
    • kikko

  • ui: headless-architecture

    • state + action: 参考autocomplete、search-ui

  • headless组件是否表明react将view与logic耦合在一起封装为component的思路是错误的?

    • 与view视图无关的component本身就是个简单的函数或eventemitter-pattern

  • 若slate-model层采用扁平化Node(扁平化的思路可参考event-sourcing/orm/tinybase)

    • 如何保持path和key同步，参考 getKeysToPathsTable, getByKey实现上基于getByPath
    • 优化方向可参考tree的crud及协作
    • 协作时还应该考虑 json patch + last-write-win
    • Node定义采用ast, 如 unist
    • lww的字符串改为针对crdt优化的类型

  • flat-data-model的示例

    • frontend/in-memory database，如rxdb/pouchdb/tupledb
    • 还可以参考indexeddb相关示例，如dexie
    • sqlite-react: vlcn-orm
    • ast如何扁平化
    • 参考案例: tree、react-admin

  • 内容的存储与更新如何与数据库集成

    • 编辑器内容自动保存一般通过在onChange方法中执行saveToDB
      • 也可以在onChange方法中创建内存db、更新索引，通过索引提高计算效率
      • 应该避免维护2份数据
    • 将编辑器的计算密集部分的数据模型不使用普通json对象，而直接用类似数据库模型的设计
    • 为了性能，尽量不要直接读写持久化数据源，要使用缓存object pool

  • functional-codebase: slate, tanstack-table, feathersjs

  • why use es6 class

    • 运行时类型检查，instanceof
    • 既包含类型定义，又包含逻辑工具方法
      • 注意class有时也采用先定义interface再实现，此时ts type也合理了
      • 但应用层业务代码一般不需要定义单独interface
    • 方便调试，可直接log到对象及方法，函数里面的闭包变量更新难以定位
      • 也可提前将需要调试的属性或方法添加到闭包暴露的对象或window上
      • 闭包实现的私有属性更安全

  • dev-xp-editor

    • 不仅要保持编辑器内容和视图同步，还要保持选区和内容同步
    • 编辑器外部相关面板的协同产品较少，如评论

  • dev-later

    • crdt tutorials
    • 默认 last-write-win, 出现冲突时，提示用户选择版本
    • 离屏渲染, keep-alive
    • 分层渲染
    • 测试文档系统未登录的流程和mock

ing

  • not-yet

    • elmesque-editor, 基于immutable思想实现的编辑器大多采用redux/elm风格
    • branching/versioned-doc
    • pouchdb + kappa-crdt + eav => pouchdb-crdt-eav
    • todo remove hashId在编辑器model中有什么作用
    • 做完tailwind-table就面试

  • dev-to 提炼核心需求+产出工作流，不能在产品中检验的技术不玩

    • headless-comp: sidebar
    • replace forceUpdate with useSyncExternalStore
    • slate-docs-examples
    • dnd-kit preset-tree
      • 参考react-sortable-tree
    • noseditor-docs
    • unit-tests
      • test in firefox
    • drag
      • rewrite dndkit by use-gesture
      • dnd-kit tree performance
        • 自定义冲突解决
        • 拖拽指示线
      • 拖拽到页面顶部或底部时，自动滚动
      • 拖拽时原布局不变，只显示预期位置的指示线
      • 支持向左拖动更新层级
      • 支持方向键向左更新层级
    • toolbar
      • dropdown 组件样式、active值
      • 工具条按钮处理跨选区的情况
      • 当前 block type 指示与转换
      • 点击按钮时保存选区，逻辑+视觉
      • 高亮当前光标对应的格式按钮
      • 字体大小、颜色
      • 按钮按功能分组
    • image
      • 上传图片时，默认图片原大小
      • upload by drag-drop
      • paste
      • upload by filePicker
    • table to tanstack
      • 删除表格
      • 删除行时，若只有一行，则应该删除表格
      • 隐藏浏览器selection
      • 优化model
      • copy from word
    • list
      • rename todoList to checkboxList
    • scss to linaria
      • list-item
    • callout 高亮块
    • keyboard-shortcuts
    • copy-paste
      • images
    • 去掉依赖
      • plate-serializer
      • zustand
    • emoji
    • embeds
      • video
      • iframe
      • notion
      • apitable
    • formats
      • 清除格式
    • link
      • 粘贴图片url时提示显示为图片
    • 高亮块
    • 格式刷
    • 斜杠菜单
    • resume with noseditor
    • editor-features-playground
      • rewrite lexical for slate
      • with devtools

  • dev-to-collab

    • 🐛 每次刷新页面，空白行会多一行
      • 每次刷新，observeDeep会执行
    • 🐛 yOffset out of bounds
      • 位置：getSlatePath > yOffsetToSlateOffsets
      • 复现方法，在一个浏览器输入，在另一个浏览器全选+删除

  • dev-later

    • realworld - test
    • 悬浮工具条
    • merge-cells 逻辑优化
    • cell-floating-menu 右上角
    • list
      • 第一个列表项无法向左拖实现提升到父级
        • 列表项A的兄弟项B无法拖到A的位置，即无法替换A，B会自动变成A的子级
      • 列表折叠图标在item内容多行时，会竖直居中
      • 将无序列表项拖进数字列表项时，数字列表项会增加？数字编号或自动变动
      • 数字列表跟在符号列表后时，数字不会从0开始，需要在前面插入一个空行
      • 列表组件设置面板，设置折叠、可拖动
      • 拖拽时，不相关的列表项也会抖动
      • checkboxList完成后可选变灰
      • bulletList支持emoji
    • initialDataLong示例，无法删除首行列表项
    • drag
      • paragraph的drag handle有时无法选中
    • collab
      • ✨ 2个编辑器同一页面协同的示例未完成
      • cursor光标位置经常对不上
    • streaming infinite-list/tree

  • Scrum Poker Online - Free Tool for Planning Poker

dev-10

  • yaoo-proj

    • codemirror-devtools

  • frontend

    • think卡片打开文件，滚动到文件的行数
    • 🎨 计划画布展示、修改及对话
    • 付费订阅和积分扣减
    • ai控制台前端
    • 前端未控制member/owner的按钮、路由访问权限

  • editor

    • tab自动补全
    • 通过minimap快速定位diff视图位置
    • readonly属性不生效

  • diffView

    • 关闭diff后也支持显示打字动画
    • 流式更新的文档内容，需要流式更新diff-view
    • 隐藏绿色部分后，红色部分是否显示行号，打字太快了，不用看行号

  • paas

    • openFile处理异常 File does not exist
    • agent新建文件后文件树未显示
    • 显示部分隐藏文件，如 .gitignore

  • cde

    • 重写驾驶舱侧边栏的header，让置顶卡片位置水平居中
    • changed-files-list
    • cde页面无法区分自己和其他用户
    • 快照文件编辑器的提示条

  • agent

    • 系统token达到上限后，不能再制定计划，但现有计划也无法显示
    • 计划终止后，如何清理action，需要agent提供api
    • 跟随模式似乎不需要高亮边框

  • animation

    • time machine show/hide
    • action bar working/replaying

  • time-machine

    • 追加step
    • 回放模式点击第一个action，然后点击播放，没有播放
    • 终止后未执行的action在进度条仍然显示，状态是cancelled
    • 关闭machine再打开时，会强制再次打开editor
    • 时光机终止后，驾驶舱如何反馈，终止状态如何清理
    • 🚨 在action执行rerun后，时光机回放模式取快照的逻辑需要根据action的快照次数确定
    • 终止需要二次确认
    • live模式下暂停时支持终止
    • machine组件unmount要手动清理时光机的定时器

  • 未执行的时光机

    • 状态会变成pause
    • actions和plan在刷新页面后会丢失、重置

  • 回放模式

    • .pnpm-store文件夹应该默认隐藏，被ignore的文件不要显示，不要出现在changedFiles
      • 文件树打不开.pnpm-store文件夹
    • 最后一个action播放时进度条未显示loading
    • .gitignore文件无法显示，需要在ideServer放开
    • 第一个action有时会转起来
    • 只读编辑器光标改为禁用箭头
    • 回放时高亮对应面板边框
    • diff效果有时显示不出来
    • 新增文件未显示A图标，显示的是M

  • root thread

    • 体验和反馈很差
    • 初始化环境计划执行完后，create pr时必须在前端打开terminal，否则 Got an error from agent event, Failed to find the prompt when use ctrl+c command

  • 🚧 cmdk实现计划

    • [-] 工具条或快捷键唤起、隐藏
    • 输入提示词，agent返回时显示diff
    • undo: cmd+z回到diff
    • [-] 部分stop/cancel， 注意agent返回内容的时机
    • 部分accept
    • followup
    • diff工具条
    • agent写代码时的输入框显示动画边框
    • 悬浮输入框
    • explain an elegant word in one sentence
      • rename to an elegant variable name
      • implement quick sort algorithm and add 2 test cases
    • bugs
      • 🚨 disable cmdk in readonly and diff-view
      • 🚨 只在需要时显示diff视图开关
      • 等待ai返回结果时，禁止send，允许esc键取消输入框和丢弃ai返回结果
      • 若在ai写代码时或写完后但未accept时刷新页面，是否会丢失状态数据
      • sdk如何不使用sleep来获取chunk返回完成时的数据
      • replace initial lines on ai responses
      • diff anime gray bg
      • disable cmd+k in diff-view(cursor支持多次cmdk唤起多个输入框)
      • if input box is visible, cursor cannot be put in editor
    • 🤼🏻 dev-discuss
      • 🤔 agent返回chunkMsg的时机是确定的吗，测试是在ok消息后等6s才返回chunkMsg且chunkMsg会在1s(或2s)内快速流式返回完
        • 为了让sdk编辑器及时获取更新内容，需要sleep大于6s才能开始打字动画
      • 👾 对同一选区第一次cmdk后reject, 第二次cmdk会保留第一次的修改
        • 就算第一次reject了点击光标到其他位置再将光标回到原位置，cmdk也会返回对旧内容的修改
      • cmdk后直接编辑，是否立即更新文档，特别是多人协作的场景是否支持diff-view协作
        • 用户ua在cmdk后显示doc2(与原文档doc1进行diff)，编辑在doc2；用户ub仍显示和编辑doc1
        • cursor支持直接编辑最新doc2
        • 用户ua在cmdk后未accept时，若用户ub删除了选区行，那么内容如何变化，输入框显示在哪里
      • 大多数cmdk的变更块只有1个，此时diff-view的实现可采用简化版实现单红单绿
        • 若cmdk的变更块超过1个，上下布局的diff-view方便确定范围，agent返回不是多个范围
      • 在undo时恢复编辑器内容之外的数据，如cmdk的输入框的内容，思路是将自定义stateField的数据也加入history
      • message chunk stop
        • 多人cmdk的返回代码会冲突吗
      • more
        • 输入框与editor绑定，这样能支持多editor
        • 输入框内容很多时，是否支持换行 => 不换行
        • 💡 悬浮状态的指令输入框实现时应该使用单独的dom，这样可以减少reflow, 还可以解决输入框因文档长导致输入框元素未被viewport渲染时不能作为sticky元素
        • 指令输入框与diff-view无关，在diff下触发cmdk会聚焦到输入框会提示关闭diff
      • impl
        • input出现后且发送prompt到ai前，若用户光标位置变化然后再发送prompt到ai，生成代码的位置仍在原选区的位置且在input输入框之下
      • 🌰 cursor的cmdk实现细节
        • cmdk后先修改绿色代码再accept后再修改，连续undo的表现是，先正常undo，然后undo到diff-view，然后保持在diff-view下undo，然后undo到原代码和输入框
        • 多次cmdk后连续undo，能恢复上一次cmdk的提示词prompt
        • 📌 cursor的指令输入框不能被del键删掉, cmdk后按backspace时输入框会显示在上一行之上
        • cursor的空行会显示cmd+k/l的指令提示
        • cmdk后，用户点击accept后，cmd+z会恢复diff-view；用户点击reject后，cmd+z会恢复diff-view吗(cursor会)

  • cmdk-undo的难点

    • 如何确定undo显示diff的条件，若用stateField,
      • diff恢复后再次消失前的编辑也要支持undo
    • 输入指令内容prompt的存储和还原，不在编辑器的内容中，是保存在编辑器state之外还是之中
      • 可以将prompt内容保存在编辑器外(因为不需要reactivity)，prompt id保存在编辑器的state

  • not-yet

    • cmdk整体功能
    • 时光机获取快照使用uuid
    • ai写代码打字效果的时机优化和样式优化
    • 支持撤销ai写的代码
    • tab-key; chat-apply; aiCannotCreateThread
    • 防抖: cmdk， chat
    • 驾驶舱action列表支持打开文件
      • 打开已删除的文件未实现
      • 点击actionBar打开文件时，文件树对应文件会被选中
      • 在文件树ui创建文件夹和命令行mkdir创建文件夹的permission不同
    • 驾驶舱聊天后直接apply代码到编辑器
    • regenerate plan/task/action
    • zustandx如何在一个store里面使用另一个store的值, 或重新架构store的内容
    • 演示之前测试cpu、内存
    • 私有项目的导入
    • 多标签打开同一个cde，文件树的头像会显示2个

100

  • dev-log
    • ?
  • dev-to
    • ?
stt.message.channel().send('uCmdK', 'README.md', 2, 2, 'explain an elegant word in one sentence')

1008

dev-09-cursorai-cmdk-pm-&-cm-block-widget-&-promise-socket-&-cm-undo-yet

0930

  • 昨天：
  1. 将cmdk undo的实现方案从transactionFilter迁移到invertedEffects, 能更准确的确定diff显示隐藏的时机
  • 今天：
  1. 继续实现基于invertedEffects的undo/redo, 测试普通模式下的undo/redo不受影响
  2. undo时恢复对应的提示词

0927

  • ideServer-events
    • previous: followingAgentUser, followingFocusComponent, editorScroll, unFollowingAgentUser

昨天：

  • 排查测试反馈的文件树不显示action创建文件的bug
  • cmdk的undo实现完善 今天：
  • 测试undo并提pr

0926

  • 在paas的文件树创建文件时，ideServer会返回fileTree事件和fileOp事件数据用来更新文件树
    • FileTree组件会根据fileOp数据更新文件列表视图
["fileTree", { "eventName": "fileTree", "agentUesrId": "shell", "playgroundId": "711049437866319872", "dockerId": "711049437891485696", "data": { "action": "CREATE", "files": [{ "type": "FILE", "name": "aa3.js" }], "result": true }, "timestamp": 1727354351292 }]

0923

  • 🤔 如何让一个clacky thread的playground里面的多个用户都能够在vscode打开cde的文件

    • 需要有一个thread是否已添加ssh密钥的api让前端直接获取
    • 👥💡 讨论后不需要后端添加api或新开发，前端若能在刷新页面后能展示ssh-key，就已添加

  • team-to

    • 确定本次迭代的最后一天及demoday是周五还是放假前最后一天9月30号
      • 27号

0919

0917

  • Fatal error in, line 0 -- Fatal JavaScript invalid size error 171211145 - Stack Overflow
    • There could be several reasons why the error occurs.
    • Node version. Ask friends what version they are on, and try to use the same
    • Broken node_modules. Delete the node_modules directory and run npm install (or yarn install or pnpm install)
    • Broken git. Delete the local project directory and clone it again. Remember to save all your changes (i.e. git branch -b stage && git add . && git commit -m "stage changes" && git push -u origin stage)
    • One cure for all diseases - restart your computer

0915

0913

  • Got an error from agent event, Failed to find the prompt when use ctrl +c command

昨日：

  • 修复develop/staging新环境相关的问题
  • 处理cmd+k的diff视图的undo/redo，包括初次生成和用户accept后 (60%)
  • 整理了一下cmd+k相关的extension

今日：

  • 处理cmd+k与agent通信与状态，测试cmd+k主流程
  • 继续处理undo/redo

0912

昨日：

  • 修复developer环境下ideServer连接相关问题
  • cmd+k的undo (40%)

今日：

  • 修复新环境下现有功能的问题
  • cmd+k的undo/redo

0911

昨日：

  • 继续实现cmd+k，处理agent的返回，并渲染diff视图
  • 排查clacky在新环境下部分功能不work的问题

今日：

  • 继续处理clacky在新环境下部分功能不work的问题
  • 实现cmd+k的undo

0910

  • 刚我排查了点击时光机已执行成功的action打开编辑器一直显示骨架屏未显示diff视图的问题
    • 原因是staging.app.clackyai.com环境下queryCustomizeFrameData没有返回快照数据，staging.app.clacky.ai环境下能正常返回快照数据因而不存在这个问题
    • 明天需要检查下ideServer的部署，我之后会在前端补充打开文件时的异常处理

昨天：

  • 解决cmd+k指令输入框无法获取focus的问题
  • 处理agent的返回，并渲染diff视图 (40%)

今天：

  • 实现并测试cmd+k主流程的逻辑，并提交pr
  • 开始实现部分accept

0909

上周：

  • 修复时光机的播放控制，暂停和恢复
  • 修复时光机进度条和驾驶舱action状态的一致性
  • 基本实现了cmd+k快捷键的唤起隐藏

本周：

  • 交付cmd+k的主要功能和打字效果，尽量对齐cursor的cmd+k的体验
  • action的rerun
  • 实现diff工具条

今日：

  • 交付cmd+k的主要功能，并提pr

0907

  • 昨日： 1、讨论了cmd+k和diff工具条的需求细节，确认了clacky cmd+k与cursor的差异 2、探索嵌入到代码中间的卡片元素的实现方式
  • 今日： 1、实现cmd+k输入框的唤起与隐藏 2、输入指令后，先显示静态版diff-view

0906

  • taskState的append状态

    • 追加步骤时，agent后端自动设置append状态
    • 进入回放模式，从哪个action开始播放
      • 默认最后一个追加的

  • dev-log

    • 改进cde的功能与体验，修复时光机状态变化时底部action和驾驶舱action状态不一致的问题
    • 讨论了agent工作时打字动画优化的方案，以后会转向动态更新编辑器的配置而不是强制刷新文件
    • 尝试cmd+k的弹窗实现，探索 paas和agent通信的架构

  • dev-to

    • 需要和agent、产品、设计确认cmd+k及diff工具条的功能细节和交互细节
    • 如何让paas和agent通信
// uRemakeFile request parameters, 'uRemakeFile'
{
  prompt,
  filePath,
  // { lines, offset }, lines是1-based行号如[4,5]/[4,4], offset是光标位置
  selectedRange,
  // meta可包含用于生成代码的其他信息如代码注释/当前行变量或方法的声明或引用
  meta = {},
  selectedContent = '',
  isFollowUp,
  // isRegenerate
}
// uRemakeFile response
{
  filePath: '',
  remakeContent: '',
  // alternatives: []
}

// uStopRemakingFile request
{
  filePath: '',
}
// uStopRemakingFile response
{
  stopped: true
}

0905

  • agent工作时的diff动画问题
    • 有时写字的文件会错乱，action依次是a3/a4, 先写a4，再写a3，不能稳定复现
    • 会意外打开.gitignore文件

0904

  • Error: onCancelTask error, "Can't trigger event cancel_task from state PAUSE_STATE!"

0903

// dialog和tooltip的trigger顺序
<Dialog.Root>
  <Tooltip.Root>
    <Tooltip.Trigger asChild>
      <Dialog.Trigger asChild>
        <MyButton>Open dialog</MyButton>
      </Dialog.Trigger>
    </Tooltip.Trigger>
    <Tooltip.Portal>…</Tooltip.Portal>
  </Tooltip.Root>

  <Dialog.Portal>...</Dialog.Portal>
</Dialog.Root>
// resourceMonitoring
{
  "memoryCurrent": 370,
  "memoryMax": 1024,
  "cpuPercent": 0.22
}

0902

  • dev-log

    • 交付了时光机的主要功能和ui设计稿还原
    • 设计了cmd+k的主要状态和实现流程

  • dev-to

    • 本周前2天，修复agent和clacky前端的状态，agent工作时没有预留打字动画的时间，agent暂停后action状态的改变
    • 本周后3天，实现cmd+k的主要功能，唤起和accept/reject
    • .gitignore 文件在文件树无法显示

  • 👥 aws创业论坛分享

    • ai产品: coding大概3个，视频几个
    • ai ppt及操作word/excel的效果很好
    • 业内融资，cursor的A轮60m，codeium的C轮0.12b
    • 大厂不容易垄断，大厂会与私有agent绑定，代码privacy问题

dev-08-diff-view-with-animation-&-codemirror-typewriter-&-stepped-progressbar

0830

  • dev-log

    • 实现diff-view显示快照文件时编辑器显示不可编辑的提示条

  • dev-to

    • 使用hack修复时光机的暂停继续问题

  • 时光机暂停event时不需要参数

    • 时光机恢复时，旧的数据不会更新

  • dev-to-demo

    • editor: typewriter
    • 时光机回放模式
    • paas的断线恢复问题
    • paas激活的时机要修改
    • LSP补全
    • cde的 push/commit/pr
    • cde的 分享、邀请、进入权限
    • cde设置页面
    • cde环境变量、中间件
    • userStatusUpdated
    • paas异常处理
    • 删除废弃的代码
    • 带着issue进入cde
    • 异常toast弹窗, 异常处理

  • 跟随模式

    • followUser时会自动打开console面板
    • ai工作时自动打开面板状态
    • 同一个用户在不同浏览器打开同一个playground的cde时，用户头像显示几个
    • 刷新完页面恢复面板显示隐藏状态
    • ai头像的位置顺序, 按进入room的顺序
    • 文件树 keydown事件传到了编辑器
    • 浏览器panel滚动禁用
    • 修复文件树无法创建文件和文件夹的问题
    • 测试跟随ai
    • 发送readfile指令或切换文件，渲染editor失败
    • /playground路由页面不需要知道issue信息

  • 时光机

    • 打字机效果
    • 上下布局diff视图
    • 播放控制逻辑，op的内容和时机
    • 回放模式支持编辑，内容和光标选区的变化
    • 处理打开已删除文件、新增文件

0829

  • dev-log
    • 实现了时光机的terminate，review并且合并了时光机主要功能的pr，时光机可以开始测试
  • dev-to
    • 解决paas的openFile处理异常 File does not exist
    • 实现diff-view显示快照文件时编辑器显示不可编辑的提示条
    • 开始设计cmd+k功能的状态和逻辑

0828

  • dev-log
    • action bar点击时显示三角形指针
  • dev-to
    • 测试时光机的new/delete-file， terminate

0827

  • dev-log
    • 驾驶舱置顶卡片还原设计稿
  • dev-to
    • 测试时光机的live/playback模式的播放控制和动画播放逻辑

0826

  • 计划终止后

    • 未执行的action是否会丢失，因为默认进入playback模式且无法回到live模式
    • 如何彻底删除actions

  • ✨ 用户介入action的实现思路

    • 确认需求: 只要最后一个action有介入，同一文件都会介入
    • 思路1: agent修改内容后也插入自定义帧fAfterAgent，查询快照action的fAfterAgent与最新内容做比较
    • 思路2: 查询path对应的op，计算op执行compose后是否变化

  • 置顶卡片

    • 执行完成后立即进入playback模式，是否显示还置顶卡片，该显示什么action

  • dev-log

    • 修复了diff视图的只读编辑器的功能，时光机进度条还原设计稿

  • dev-to

    • 驾驶舱置顶卡片还原设计稿， 测试时光机的live/playback模式的播放控制和动画播放逻辑

  • 🔡 code-review-layout

    • 设计系统更新后，cde的颜色如header/gutter更新了嘛
    • bg-background 的亮暗色有吗，比如圆点
    • primary-sidebar-container 的实现变成什么样了
    • mainEditor expandable需要改名maximizable
    • 切换terminal和console时，不能rerender

0825

  • action进度条的动画
    • live模式working可以循环loading
    • playback模式动画只放一遍，类似播放视频

0822

0821

  • 在setInterval中更新操作行号，那么自动滚动到dom需要在下次渲染前触发，不能在setInterval触发
# fileTreeIgnore
.git/;.1024.nix;.1024feature*;.nfs*;*.dll;*.swp;.paas-unit-*;core.*;.breakpoints;.idea/;.vscode/;node_modules/

  • Can a number returned by setTimeout() in javascript be negative? - Stack Overflow

    • The returned timeoutID is a positive integer value which identifies the timer created by the call to setTimeout(). This value can be passed to clearTimeout() to cancel the timeout.
    • The returned intervalID is a numeric, non-zero value which identifies the timer created by the call to setInterval(); this value can be passed to clearInterval() to cancel the interval.

  • Is calling setTimeout with a negative delay ok? - Stack Overflow

    • the specification requires that there is a minimum timeout.
    • If you provide something less than this (HTML5 spec says 4ms) then the browser will just ignore your delay and use the minimum.
    • So negatives should be fine, since it'll just be less than the minimum.

0820

  • dev-log
    • 本次cycle的需求评审
    • 隐藏diffView中的绿色部分，探索动画的实现方式
  • dev-to
    • 初步实现diff视图的打字机效果

0819

  • dev-log

    • 时光机基本的播放控制

  • dev-to

    • 进一步测试 播放控制、追加步骤
    • 动态diff
    • cmd+k
    • 时光机还原设计稿
    • undo/redo

  • 🔡 requirements-review-v20240819

  • 代码工具条的出现场景

    • 光标在diffView里面就出现
    • 光标在非diffView代码块需要选中代码才出现，只有edit和chat

  • action的修改操作

    • 只支持删除不支持添加，不支持细粒度修改
    • 每修改一个action都发送消息给agent，不是修改完后一起发送

  • 代码索引的功能和交互

    • thread全局的索引进度

  • cmd+k

    • 重做代码块，参数是action的id
    • 只在第一个变更代码块出现
    • 选中代码后出现edit+chat悬浮工具条，选中后cmd+k直接出现聊天窗口

  • self-debug/auto-detect

    • agent自动检测terminal的异常信息
    • 代码异常，先由agent捕获并处理异常，再由前端显示suggest卡片

  • 追加步骤

    • 从追加的第一个action开始执行
    • 时光机回放从追加的步骤开始播放
    • 第4次plan由agent返回拒绝执行

  • 制定计划过程中，用户触发auto-detect-debug，不会触发新计划

0815

  • 优化了打开文件的逻辑

0814

  • 插入自定义帧并搜索
// 自定义帧的内容
{
  path: 'src/index.ts',
  content: 'export const vv = 11',
  actionType: 'delete_file',
  // 存储时数据来源于打开文件时file事件的响应内容， 用来获取追加步骤场景下的文件快照，
  fileTime: 1723635429480
}
// task_steps
[{
    "id": "1",
    "title": "Set the run_command in the .1024 configuration file",
    "task_actions": [{
      "id": "1-1",
      "title": "Set run_command with HOST and PORT",
      "action": "modify_file",
      "path": ".1024",
      "target": "",
      "status": "inited",
      "detailed_requirement": "The run_command in the .1024 file should be set to HOST=0.0.0.0 PORT=8080 npm run dev. This ensures that the web service runs on the correct host and port.",
      "result": ""
    }]
  },
  {
    "id": "2",
    "title": "Install necessary dependencies",
    "task_actions": [{
      "id": "2-1",
      "title": "Run npm install to install project dependencies",
      "action": "run_command",
      "path": "",
      "target": "npm install",
      "status": "inited",
      "detailed_requirement": "",
      "result": ""
    }]
  }
]

0813

  • cde设计稿背景色
    • header是 #18181B
    • panel是 #27272A bg-background-subtle
    • machine是 background: linear-gradient(270deg, #18181B 0%, #27272A 50%, #18181B 100%);
  • tailwind
    • bg-background #09090b
  • machine
    • border-radius: 12px 12px 0 0

0812

0811

  • 💬🎨 <u>: The Unarticulated Annotation (Underline) element - HTML: HyperText Markup Language | MDN

    • To underline text, you should instead apply a style that includes the CSS text-decoration property set to underline
    • the original HTML Underline (<u>) element was deprecated in HTML 4; however, <u> was restored in HTML 5 with a new, semantic, meaning: to mark text as having some form of non-textual annotation applied.
    • Valid use cases for the <u> element include annotating spelling errors, applying a proper name mark to denote proper names in Chinese text, and other forms of annotation.
    • You should not use <u> to underline text for presentation purposes, or to denote titles of books.

  • Zed is not opening _202403

    • try to give permission to your user to the folder ~/.cache/zed
    • sudo chmod 700 ~/.cache/zed

0809

  • dev-log

    • 从message-store的状态渲染时光机进度条

  • dev-to

    • 时光机执行打开文件

  • 测试集成-dev-to

    • 前端未控制member/owner的按钮、路由访问权限
    • agent生成thread名称限制长度
    • think流程支持stop，设计稿有设计
    • 在驾驶舱的plan文件列表打开文件，think/plan, 聊天时的
    • think卡片打开文件，滚动到文件的行数
    • 聊天搜索 未实现
    • 驾驶舱还原设计稿
    • agent计划只给到文件名，暂时没做到方法粒度
    • 追加步骤的上限控制
    • 驾驶舱里面的think流程与外面有不同，补充表单
    • 插入代码块到文件中，未实现
    • 引用历史聊天的内容，未实现
    • 引用terminal的异常信息
    • 聊天上传图片未上传，暂时先关闭
    • 聊天点赞，先隐藏
    • 重新生成内容， 前端再调一次
    • 计划agent和聊天agent不是一个
    • ❓ 执行计划时，其他人能看到进度吗
    • 终止二次确认前ai还会继续执行
    • ai执行计划后，用户将文件删了，action显示异常
    • 取消置顶的按钮，待确认，人工可以取消置顶吗
      • 暂停时切换action，置顶也要变
    • 回放时，也会置顶卡片
    • 任务执行时，多人的暂停与恢复
    • 人工删除ai需要的文件，ai会执行异常，整个计划失败
    • ai修改后的文件，人工再修改，然后撤销人工修改，进度条从绿色变成黄色吗？
    • 执行过程中澄清补充需求，暂时不做
    • 回放模式可以删除文件吗？ 待确认。 确认修改文件
    • 回放模式取消diff时，直接展示最新代码

时光机执行与回放的细节确认

  • diff视图显示的场景
    • ✅ 计划首次执行或回放时，首次执行action时显示动画
    • ✖️ 计划执行或回放时，切换已执行完action的文件不显示动画
    • ✖️ 当前文件执行完后，上下滚动不显示动画
    • ❓ 暂停状态下

0808

  • 自由对话code-review
    • create pr的task和其他task如创建thread的流程有结构设计和ui设计吗
    • 分析需求时需求规模的获取有方案了吗

0807

  • ai-coding的动画编码效果

0806

0805

  • dev-log

    • 调研及研发diffView

  • dev-to

    • 交付diffView, cmd+k的代码生成部分, 对接agent的播放控制

  • 需求评审

  • 时光机进度条点击到中间位置，会自动吸附到进度条小节的开始位置

    • 第一期只做点击，不做拖拽

  • 终止计划后，ai的变更文件列表暂时不做，暂时使用文件变更列表

  • agent侧使用goal/detail, 业务侧使用issue/desc

0802

  • demoDay240802
    • 自动跟随ai工作

0801

  • How to set background color on terminal · xtermjs/xterm.js

    • term.setOption('theme', { background: '#fdf6e3' });

  • Release 5.0.0 · xtermjs/xterm.js

    • The deprecated getOption and setOption APIs have been removed in favor of options assignment
    • term.options.scrollback = 1000;
    • term.options.theme = { background: '#ccc' } 注意这里更新是replace而不是merge

  • dev-log

    • 讨论了diffView接入使用场景的状态数据流，以及产品细节
    • 修改paas的编辑器，增加了diffView相关api

  • dev-to

    • 实现与agent无关的上下布局的diff编辑器

dev-07-dockview-ephemeral-panel-&-init-thread-playground-&-paas-custom-frame

0731

  • paas的事件监听，缺少 resourceMonitoring

0730

  • dev-log
    • 确认回放的实现细节
    • 尝试添加自定义帧的事件到ideServer

0729

  • idepaas提供了打字机效果的参考实现

    • 1024code的ai编辑几乎都使用paas的能力

  • dev-log

    • nbdime diff
    • idepaas的打字机效果实现, 支持一次性将ai的修改全撤销
    • 合并了迁移paas的pr，提供了本地调试的文档放在clacky仓库，迁移测试不充分，有问题反馈

  • dev-to

    • 交付上下布局的diff视图，暂时可能是只读版，编辑相关的问题看能处理到什么程度
    • 探索一个可支撑业务的前端持久化数据结构

0728

  • ai分析任务描述用plan，ai分析任务的结果用task

0726

  • diff数据流
    • agent > ideServer > paas-sdk > fe
    • diff接口: 输入新的全文，渲染上下格式的diff视图

0725

0724

  • dev-log
    • 尝试修复跟随模式下切换文件渲染编辑器异常的问题
  • dev-to
    • 继续修复这个问题
    • ai邀请跟随

0723

0722

  • 需求分解

    • 游客也是member，游客是member的一种身份
    • 游客也走clerk用户系统

  • agent是每个用户一个，还是每个playground一个

    • 目前是一个playground一个agent

  • dev-log

    • 修复了跟随模式用户异常的问题
    • 与后端和agent联调发送issue

  • dev-to

    • 先修复演示反馈的明显问题
    • LSP补全
    • 时光机

demo-feedback0714

  • 操作流程：

    1. 访问官网
    2. 展示 [进入控制台] 按钮 -> 点击后有登录进入dashboard ，没登录进入登录页
    3. 登录后 -> 进入Workspace - project列表页面 （不应进入个人中心）
    4. 仓库连接 -> 创建项目 -> 初始化环境（项目支持Next）
    5. 进入 CDE （运行、Terminal、Console、浏览器、文件树 OK）
    6. 驾驶舱：自由对话 OK
    7. 提出需求 -> 需求分析 -> 制定计划 -> AI 执行计划写入代码
    8. 创建Thread - 连接Issue - 设置Thread名称和分支（默认代入初始值）

  • 问题 及 未完成功能：

    1. 连接仓库 - 报500问题
    2. 项目列表 - 假数据（项目类型、协同者、Thread数量）
    3. 初始化环境：仅支持Next项目
    4. CDE假数据（协同者、邀请、Thread状态、CPU、内存）
    5. CDE 窗口布局问题
    6. 驾驶舱 - 内部滚动
    7. plan 内容和格式
    8. Thread已执行计划后， 无法继续执行下一计划（追加步骤应能继续启动任务）
    9. Thread中返回Dashboard 报500
    10. agent IDE server 连接问题
    11. GIthub 仓库授权 限制数量 ???
    12. 多人协同
    13. 视角跟随
    14. 执行计划中 - AI 流式输出
    15. 推分支
    16. 需求识别：确认issue是否可行
    17. diff
    18. command + K

公测就绪条件（草稿）

  • 产品故事就绪范围

    • 连接并获取 issue 详情
    • 基于issue生成计划与canvas预览
    • NextJS项目初始化过程清晰、可用
    • CDE 环境文件树、编辑器、shell 及浏览器，运行正常
    • 时光机过程100%顺畅，主动跟随 AI 工作
    • 中断工作时，Cmd+K
    • 结束工作后，直接修改代码、Cmd+K
    • 生成 commit 或 PR

  • 其他不强求

    • 布局灵活性（窗口拖拽、开关等）
    • 计划 canvas 调整
    • 多用户协作协同（邀请用户协作、分享链接等）
    • 自由会话质量和能力（快捷指令、RAG配置等）

  • 质量要求

    • NextJS 限制、清晰的需求描述（人类直接可理解，没有歧义）的前提下：
      • S需求一次性成功率达到 70%，不成功的修改步骤不超过 30%
      • M需求一次性成功率达到 30%，不成功的修改步骤不超过 50%
    • 内测匿名反馈（含内外部、最后20个投票）
      • 获得平均 7 分以上评价
      • 50% 的用户能有效提出 aha moment
    • 主流程无P0、P1级别问题

  • 前端开发任务

    • cde基础功能， browser/terminal
    • 时光机计划
    • 环境配置
    • 提交pr
    • cmd+k, 自动补全
    • 快捷键
    • cde loading
    • 基础交互、首次加载

0719

  • 第二个thread创建后, 是否要调用 api通知clacky后端

    • 是的

  • dev-log

    • 与后端联调获取threadIssue的api，简单实现了发送issue给agent，缺少测试ui
    • 修复cde-tools拖拽的问题、移除空白区域

  • dev-to

    • 配合演示修复问题
    • 测试跟随ai

  • dev-done-cde布局开发

    • 紧急: 拖动改变浏览器宽度时，布局会混乱
      • console/terminal的内容高度有时异常，有时布局混乱的原因是shell的宽度高度过大
    • 难点: 隐藏侧边栏的头部
    • 难点: disable tab页拖动，有时不work有时work
    • 驾驶舱添加滚动css， SecondarySidebarContainer overflow-auto
    • run前端项目才需要打开浏览器，其他项目不需要，前端项目执行时上方是editor+browser下方是console
    • cde-tools需要点2次才生效
    • editor默认提示文本 删除
    • cde tools 最小高度
    • later: 布局持久化和刷新页面恢复

0718

  • dev-log
    • disable cde布局的大部分拖拽问题
    • 切换console/shell
  • dev-to
    • 开始时光机的回放模式
    • terminal组件 重复渲染和无法使用
    • cde-tools状态联动
    • CDE Tools 不用支持拖
    • CDE Tools 下方空白
    • 编辑器有时候出不来
    • 获取thread对应的issue，提供给agent

0717

0716

  • dev-log
    • cde页面基本的异常处理
    • 跟随其他用户测试通过
  • dev-to
    • 测试跟随ai的功能

0715

  • node.js - try/catch blocks with async/await - Stack Overflow

    • Due to the fact that every async function is technically a promise
    • You can add catches to functions when calling them with await
    • No need for try catch, as all promises errors are handled, and you have no code errors, you can omit that in the parent

  • dev-log

    • code review cde页面内的组件和逻辑的pr
    • 添加跟随模式相关状态

0714

  • dev-log

    • 重构cde初始化流程到paas-api, 重构cde页面的状态管理技术栈并迁移现有组件
    • 目前cde基本可以运行项目代码，我的测试以前端项目为主
    • cde面板优化交互
    • cde初始化的准备repo和激活paas 2个loading状态

  • dev-done

    • 将tenantCode代码放在state, 放在环境变量
    • playgroundId可能取旧值, 通过reset+当前组件的useState解决
    • repo隔一段时间会自动失活
    • cde初始化迁移到paas-api
    • dynamic add panel for plans/steps

  • 有时thread无法打开文件, 临时方案是ready后才渲染

    • 可能是上个页面的组件及状态未清空导致
    • 原因是cm-editor-dom的container渲染多次, 且dom值不一样，setContainer
    • 解决方法是，限制cm-editor-dom的更新

0712

  • dev-to
    • 迁移组件和状态
    • 增加loading页面

0711

  • 👥👥 sharing-how-to-use-ai-agent-in-work

    • Dify自动流程
    • rpa
    • 使用场景: 测试用例， 技术文档， 产品介绍

  • dev-log

    • cde面板去掉一些暂时没用的button，存储了各个面板的宽度
    • 实现了简单的添加新tab页面的api

  • dev-to

    • 将paas相关状态再整理下，今天先提交一版pr

  • 支持添加新tab页，如settings/hotkeys/search/plugin-details/preview-web/problems-or-warnings

    • 添加的通常是临时页面，不需要alwaysVisible
    • 思路1，先让使用方注册comp1，再根据DefaultPanel组件中的type渲染comp1
      • 优点是不需要改动comp1，方便接入
      • 缺点是使用分2步，且注册的位置不好选，一般放在顶层组件的props
    • 思路2，直接将comp1放在state中，comp1无法rerender更新，除非做成纯展示组件
      • 优点是使用只有1步，setState({comp1: ()=><Comp1 />, props} ) 立即work
      • 缺点是comp放入state不是最佳实践，comp1的内部的全局state要单独处理(在多实例的场景，思路1也存在此问题)

0710

  • reactjs - Is it a good idea to store components in state? - Stack Overflow

    • I would not recommend it. But not for the reason that those instances would somehow add too much size to the state (which I don't think they would).
    • The strongest argument in my opinion is: the instantiated components are stale; their properties will only have those values that were assigned when they were instantiated.

  • dev-log

    • code review并调整了重构cde初始化的pr
    • 将cde tools面板布局组件的实现调整了下，又提取了一些state

  • dev-to

    • cde-tools面板宽度持久化到localStorage
    • 重构paas初始化的逻辑，提取paas相关状态并注册事件

0705

0704

  • Migrate to @xterm org on npm · xtermjs/xterm.js _

    • Publish 5.4 to new scope

  • 根据thread状态优化cde启动速度

    • 每次打开cde都会重新import，要实现skip
    • 若是empty，则需要import仓库
    • 若是initialized，则直接创建playgroundId
    • 若是inProgress, 则直接创建ticket

  • dev-log

    • 重构了workbench布局相关的状态
    • 更新了cde的初始化逻辑到最新api，但最后一步请求ide-server url失败
    • cde-tools分屏面板添加

  • dev-to

    • 分别优化第一个thread/普通thread的cde初始化逻辑
    • cde-tools面板按钮隐藏及调整

  • 如何获取clerk的cookie，传到header的Authorization

  • What is the shortest function for reading a cookie by name in JavaScript? - Stack Overflow

    • await cookieStore.get('cookieName');
    • It's 2022, everything except Internet Explorer supports the URLSearchParams API (^1) and String.prototype.replaceAll API (^2), so we can horribly (ab)use them
const cookies = new URLSearchParams(document.cookie.replaceAll('&', '%26').replaceAll('; ', '&'));
cookies.get('cookie name'); // returns undefined if not set, string otherwise

const getCookieValue = (name) => (
  document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)')?.pop() || ''
)

0703

  • dev-log
    • 熟悉codemirror的文档和源码， 探索切换diff视图的插件化实现方式
  • dev-to
    • 静态版diff视图编辑器

0702

  • dev-log
    • 尝试复用paas编辑器的插件和逻辑，实现一个最小的diff编辑器组件，思路可行，但不符合产品需求
  • dev-to
    • 将最小diff编辑器完善下，尝试将diff逻辑抽象为codemirror插件

0701

  • dev-log
    • 上周重构cde状态管理与对接agent
    • 熟悉了codemirror官方diff示例的原理，尝试从视图层提取出编辑op
  • dev-to
    • 最小可用版的时光机播放和回放
    • 完善agent相关的制定计划/执行计划的实现细节

dev-06-dockview-floating-&-progressbar-animation-&-trpc-thread-id-&-zustand-socketio

0630

  • dev-log
    • 重构cde-state，对接agent通信
  • dev-to
    • 先mock时光机的编辑op，再对接agent的编辑

0628

  • React Custom Hooks fetch data globally and share across components? - Stack Overflow

    • Whenever you use a custom hook, there will be separate instances of the hook within your App and they won't share the data unless you are using context API within them

  • dev-log

    • cde state的 get/set/socket通信 的架构及代码实现
    • 优化了事件注册的设计

  • dev-to

    • 新增api: 获取回放所需的operations，获取变更文件列表，fileChangeLogs的变更列表无法区别修改删除

0627

  • 👥👥 sharing-how-to-get-rich-slowly 💰
  • 美股的优势
    • 持续几十年的增长
    • 最好的公司
    • 监管体系
    • 每年的淘汰率
    • 非美国不需要资本税，国内印花税
  • 二级市场
    • 上市 nasdaq， s&p
  • 股票走势案例
    • Nvidia在23年gpt发布后持续走高
  • 临近期货交割时，利润会很大
    • 币安新币种有机会， old money进场后机会就变少
  • 期权非线性市场
  • 期权公式 c+k = p+f
    • 公式不成立时，就是赚钱的机会
    • 期权内幕交易在股价变动结束后才会体现，更隐蔽
  • 赌财报
    • 传统行业的波动更少
  • 交易习惯：观察周四周五的收盘价，周一买入
  • 基金是把资产交给别人打理
    • 美国国债基金比较稳健，但需要探索发现
  • 不必盯着暂时的热股，多年的涨势和趋势更有参考性
  • trading和invest不同
    • 开奶茶店的收益也是有的

0626

  • state与socket的初始化逻辑

    • state的set方法需要socket，不可以delay
    • ✅ socket的初始化需要state的set方法，但可以delay

    • 结论: 先初始化socket，再初始化state，然后注册state更新事件到socket.on

  • dev-log

    • cde的状态重构

  • dev-to

    • 将部分现有状态提升到全局
    • 时光机回放模式的状态在全局的存储

0625

type Prefix < P extends string, S extends string > = `${P}${S}`;

type Prefix < K > = K extends string ? `on${K}` : K;

0624

  • cde状态设计

  • 时光机的用户编辑, 每个action对应的文件是否一定不同，是否存在多个action对应同一个文件

    • 追加步骤的action可能会与前面的action对应同一文件，对于此场景，前面action对应的文件默认不可编辑，点击时跳到最新文件进行编辑

  • 测试cde

// 获取变更文件列表数据的api
// stt.dao.get.playgroundInfo().fileChangeLogs
// stt.dao.store.getState().playgroundInfo.fileChangeLogs
// 🐛 不包含修改的内容/行号，被删除的文件不包含在返回的数组
['README.md', 'package.json', 'src/app.tsx']
  • 前端cde的研发功能拆分
    • cde的初始化流程优化
    • 制定计划、执行计划: 时光会产生新action吗机回放
    • ai对话
    • pr提交

0621

0620

  • 导入仓库进度问题

    • 等github-repo导入完了，后端才返回结果

  • dev-log

    • 导入github仓库的逻辑更新到了新的api，但还ui上还不work

  • dev-to

    • run按钮运行前需要激活
    • 明天需要演示驾驶舱交互功能的话，今晚就将mock的制定计划数据、执行计划集成下

0619

0618

  • 👥👥 sharing-ai金融需求
    • 需求在业务各方传递时会丢失上下文
    • all-in-one的知识库产品，会保存上下文，减少重复工作
    • all-in-one的产品存在权限问题，还涉及利益问题、信息隔离，市场上的公司大多都自己给自己建立了信息隔离
    • 解决方法之一是内容转化，如将figma的图像转换为文字
    • 信息浓缩，类似figma/jira这样的抽象，大模型就可以理解，类似人的理解过程
    • ai会话的历史会保存，甚至ai能模拟公司中的人(根据记录、日志)
    • 产品、研发、销售一起积累数据，解决问题更快； 非研发也可以积累数据
    • 先尝试新技术，方便成熟时上手
    • 对ai的需求: ai能不能将需求直接生成代码
    • 💰 通义千问做了私有化部署，但chatgpt没做私有化部署； 客户会短暂采购私有版本，当效果匹配得上商用版时就会加大采购范围
    • 敏感数据的隐私安全问题
      • 敏感数据清洗过吗
      • 可以通过私有化部署解决信息隔离的问题，开源模型效果差一点
      • 通用场景、特定场景的问题，定制的模型

0617

<!-- Since 4th of july 2022, Tailwind added an ad-hoc approach to target specific elements.  -->
<div class="[&>*]:text-gray-200 [&>*:hover]:text-blue-500">...</div>

<!-- Since 19th of december 2023, Tailwind added child selectors -->
<div class="*:text-gray-200 hover:*:text-blue-500">...</div>

0616

0614

0613

  • dev-log

    • 整理了执行计划的代码，在ui层mock计划op做了简单实现，提交了pr

  • dev-to

    • 尝试将执行计划的op转换到paas中对编辑器的操作

  • 每周分享-大数据中台 /黄茂俊/20240613

    • 从你的经历中，处理过的大数据的数据量有多大tb级别，文本、二进制数据
    • 运营商的书仓，pb级别的数据，日常的日志是1-2tb
      • 数据源较复杂，使用了第三方工具和平台
      • 还有些excel文件，使用python解析入库
    • 数据清理的工作量大
      • 主动对接和采集几百家停车场的数据，提供api和文档
      • 对不同业务域建模

0612

// 简单无分段的进度条动画效果

.grad {
  width: 10rem;
  height: 4rem;
  color: #fff;
  background: linear-gradient(to right, red, blue);
  background: linear-gradient(to left, #3F3F46 50%, #047857 50%);
  background-size: 200% 100%;
  background-position: right;
  transition: background-position 200ms ease-in-out;
}

.grad:hover {
  background-position: left
}

0611

  • 制定计划、执行计划

    • ai-server
    • 制定计划agent与执行计划agent不是同一个角色
    • 驾驶舱聊天数据持久化
    • cde中回放数据持久化

  • diffView

    • 模型
    • 视图
    • 选区光标

  • dev-log

    • cde新布局的发布

  • dev-to

    • 继续完善cde的布局和交互逻辑
    • 根据linear的任务拆分，推进clacky的发布，主要包括 制定计划、diffView的逻辑、驾驶舱ai对话的ui(不包括逻辑)

0608

0606

0605

  • dev-log
    • 事件风暴 制定计划、时光机
  • dev-to
    • 调整cde的交互

0603

  • dev-log
    • 优化cde
  • dev-to
    • mock执行计划的前端数据
    • 登陆 > 授权仓库 > 导入仓库数据 > 创建thread > 初始化环境

0602

0601

  • unicode - Text encoding in ID3v2.3 tags - Stack Overflow
    • for the text encoding code:
    • 00 – ISO-8859-1 (ASCII).
    • 01 – UCS-2 (UTF-16 encoded Unicode with BOM), in ID3v2.2 and ID3v2.3.
    • 02 – UTF-16BE encoded Unicode without BOM, in ID3v2.4.
    • 03 – UTF-8 encoded Unicode, in ID3v2.4.

dev-05-codemirror-docs-&-cde-pm-&-replay-&-dockview-views

0531

  • cde整体布局

    • 左侧可隐藏
    • 中间可max
    • 右侧可浮动

  • 获取文件树数据的websocket事件名是 syncPlaygroundInfo

    • fileRootId
    • fileRootPath
    • fileTree

0530

  • cde标签页结构(从上到下)

    • header: icon、title、pin、close；new-tab、max
    • breadcum
    • editor

  • dev-log

    • 参与了制定计划、执行计划、时光机回放、cde编辑器细节的需求评审，优化了cde的界面交互

  • dev-to

    • 测试github仓库的数据的拉取和编辑保存

0529

  • dev-to
    • 在sdk仓库新建分支开发clacky功能，保留合并到main分支的可能
    • 在clacky业务侧实现cde的分屏交互

0528

  • 为什么需要 RAG？

    • 私有数据只能用 RAG
    • 动态上下文构建：不同 task 看到不同的内容
    • long context 为什么还需要 RAG？ 始终需要从外界获取信息

  • 难以提出通用方案

    • 推荐系统可以自我闭环
    • 但 RAG 是基于文本的概率选择

0527

  • 待确认

    • 对于clacky新产品, ide-server的数据库和api的部署和1024/showmebug是分开的吗
    • 获取github仓库数据的api和sdk的逻辑

  • dev-log

    • 参与了2个需求评审, thread创建流程和cde主要界面交互
    • 优化了cde的初始化为懒加载

  • dev-to

    • 还原cde界面交互的细节
    • 导入github仓库的流程

0526

  • dev-log
    • 升级了paas-sdk的状态管理zustood，暂时不改变
    • cde演示demo
  • dev-to
    • 现在sdk的实现方式过于随意, 拆分为 editor/workbench/extension 三部分
    • sdk的api设计，参考vscode/theia，设计workbench界面布局的api

0524

  • dev-log
    • 修改sdk的CodeEditor组件，支持多标签页
  • dev-to
    • 驾驶舱、制订计划ui还原
    • 继续完善cde的功能，完善任务执行和回放的ui交互逻辑

0523

  • Tasks — Airflow Documentation

  • The possible states for a Task Instance are:

    • none: The Task has not yet been queued for execution (its dependencies are not yet met)
    • scheduled: The scheduler has determined the Task’s dependencies are met and it should run
    • queued: The task has been assigned to an Executor and is awaiting a worker
    • running: The task is running on a worker (or on a local/synchronous executor)
    • success: The task finished running without errors
    • restarting: The task was externally requested to restart when it was running
    • failed: The task had an error during execution and failed to run
    • skipped: The task was skipped due to branching, LatestOnly, or similar.
    • upstream_failed: An upstream task failed and the Trigger Rule says we needed it
    • up_for_retry: The task failed, but has retry attempts left and will be rescheduled.
    • up_for_reschedule: The task is a Sensor that is in reschedule mode
    • deferred: The task has been deferred to a trigger
    • removed: The task has vanished from the DAG since the run started

  • dev-log

    • repo初始化逻辑
    • 修改sdk的CodeEditor组件，支持多标签页
    • 回放逻辑有了新的修改思路

  • dev-to

    • 继续完善cde的功能，完善任务执行和回放的ui交互逻辑

  • css - Center a position:fixed element - Stack Overflow

    • if your div has a dynamic/undefined width and/or height, then instead of the margin, set the transform to the negative half of the div's relative width and height.

0522

  • 前端权限开发——设计到实践（保姆级） - 掘金

  • Differences between GitHub Apps and OAuth apps - GitHub Docs

    • In general, GitHub Apps are preferred to OAuth apps because they use fine-grained permissions, give more control over which repositories the app can access, and use short-lived tokens.
    • app 强在权限管理，OAuth 强在功能齐全
    • Similar to OAuth apps, GitHub Apps can still use OAuth 2.0 and generate a type of OAuth token (called a user access token) and take actions on behalf of a user.
    • However, GitHub Apps can also act independently of a user. This is beneficial for automations that do not require user input.
    • GitHub Apps have built-in, centralized webhooks. GitHub Apps can receive webhook events for all repositories and organizations the app can access. Conversely, OAuth apps must configure webhooks individually for each repository and organization.

  • dev-log

    • 和产品和设计确认cde的交互细节，确定了多标签页的技术方案和修改paas-sdk的思路，但为了支持回放暂时disable多标签

  • dev-to

    • 多标签页分三阶段实现: 阶段B多标签但不支持回放，阶段C多标签且支持回放

0521

  • cde多标签页的功能写在webapp好，还是写在sdk好

    • 写在webapp，优点是实现简单，缺点是可复用性低
    • 写在sdk，缺点是切换标签页的回放没实现，但可后期实现

  • 用文件树拖文件到编辑器的场景

    • 多用于演示

  • zustood有些用法不合理，比如初始化2次

0520

  • dev-log
    • 修改paas的时光机的播放逻辑，支持修改编辑文件
    • 是否支持每个用户仅回放自己的操作
  • dev-to
    • 本周目标: 时光机可用版，cde集成

0516

  • dev-log
    • paas的录制和回放的实现，与时光机结合的方式
  • dev-to
    • 执行和暂停

0514

0513

# sdk-local
https://develop.1024paas.com/demo/api/v1/tickets?playgroundId=661625642386874368&specialNameFromQueue=king
# sdk-online
https://www.1024paas.com/demo/api/v1/tickets?playgroundId=661631957259927552

# 🐛 一直提示校验失败，且此api只在文档中提到，业务中并未使用
https://develop.1024paas.com/api/v1/sdk/environments

0511

# 1024paas init log 日志
https://develop.1024paas.com passDomain from demo
Start to init SDK,with version:0.9.211
{paasDomain: 'https://develop.1024paas.com'}

closeLspServer: null null
[messageLinstener][addMessageListener]0-1
[messageLinstener][addErrorListener]0-1
[messageLinstener][addMessageListener]1-2

findAvailableAgentUser: 63ba7a74-e3d4-4efd-9558-0fdd47a2d3ea
Start to get ticket: M3w2NjA5ODIzODczNzg5MDUw

[canVisit]
[messageLinstener][addMessageListener]2-3
[messageLinstener][addMessageListener]3-4
[messageLinstener][addMessageListener]4-5
[Editor]freezeCode:false,showHiddenCode:true
[messageLinstener][addMessageListener]9-10

Reciver ticket:  
{
  "status": "success",
  "data": {
    "url": "ws://localhost:3012",
    "userId": "659227293847281664",
    "socketParser": ""
  }
}

findAvailableAgentUser:  true 63ba7a74-e3d4-4efd-9558-0fdd47a2d3ea

🔁 Start to connect WS  ws://localhost:3012

>>>registerVisiblityChangeEvent
Connect  WS  successfully

[canVisit] undefined

移除message监听
[messageLinstener][removeMessageListener]12

payload:  {debugSupport: false}

{terminalUpdate: true}

[canVisit] 
[messageLinstener][trigger]followingFocusComponentUpdate-12
# 运行js项目
{ consoleUpdate: true }
[canVisit] RUNNING
[messageLinstener][removeMessageListener] 11[messageLinstener][addMessageListener] 11 - 12 { consoleUpdate: true }
[canVisit] RUNNING[OutputBrowser] reload: https: //5afbc1d37ef0fb2b7257947fee0a9571-app.develop.1024paas.com
[messageLinstener][trigger]message-12
hello world!
{
  "paasDomain": "https://develop.1024paas.com",
  "tenantId": "3",
  "ticket": "M3w2NjA5ODIzOD=",
  "defaultLspLang": [
    "html",
    "css",
    "less",
    "sass"
  ],
  "openLspDiagnostic": true,
  "showModifyIcon": true,
  "focusEditorPosition": "BOTTOM",
  "isSplitCode": true,
  "isInsertCrdt": true,
  "isLegacyMarkdownMath": false,
  "userInfo": {
    "username": "king",
    "avatarUrl": "https://ui-avatars.com/api/?background=3A3C40&color=fff&rounded=true&uppercase=true&bold=true&length=1&name=king"
  },
  "xtermStyle": {},
  "enableSentry": false,
  "isOpenDebugMode": false,
  "defaultOpenFiles": [
    "README.md",
    "CHANGELOG.md"
  ],
  "specialFileHighlight": [{
      "fileName": "paas_test",
      "languageType": "typescript"
    },
    {
      "fileName": ".java.answer",
      "languageType": "java"
    },
    {
      "fileName": "paas_test.java.answer",
      "languageType": "yaml"
    }
  ],
  "recordBrowser": false,
  "persistenceWebData": false,
  "customFileTreeAction": false,
  "contextMenu": [
    [{
        "text": {
          "ZH": "剪切",
          "EN": "Cut"
        },
        "shortcutKey": "Ctrl/Cmd+X",
        "actionName": "cut",
        "className": "contextmenu-cut",
        "textClassName": "d42 dao42__icon--create",
        "shortcutClassName": ""
      },
      {
        "text": {
          "ZH": "复制",
          "EN": "Copy"
        },
        "shortcutKey": "Ctrl/Cmd+C",
        "actionName": "copy"
      },
      {
        "text": {
          "ZH": "粘贴",
          "EN": "Paste"
        },
        "shortcutKey": "Ctrl/Cmd+V",
        "actionName": "paste"
      }
    ],
    [{
        "text": {
          "ZH": "撤销",
          "EN": "Undo"
        },
        "shortcutKey": "Ctrl/Cmd+Z",
        "actionName": "undo"
      },
      {
        "text": {
          "ZH": "注释代码",
          "EN": "Comment Block"
        },
        "shortcutKey": "Mod-/",
        "actionShortcutKey": "Mod-/"
      },
      {
        "text": {
          "ZH": "全选",
          "EN": "Select All"
        },
        "shortcutKey": "Ctrl/Cmd+A",
        "actionName": "selectAll"
      },
      {
        "text": {
          "ZH": "选中整行",
          "EN": "Select Line"
        },
        "shortcutKey": "Ctrl/Cmd+R",
        "actionName": "selectLine"
      },
      {
        "text": {
          "ZH": "格式化代码",
          "EN": "Format Document"
        },
        "shortcutKey": "Mod-Alt-f",
        "actionShortcutKey": "Mod-Alt-f"
      },
      {
        "text": {
          "ZH": "插入代码(自定义快捷键)",
          "EN": "Insert Code"
        },
        "shortcutKey": "Mod-j",
        "actionShortcutKey": "Mod-j"
      }
    ]
  ],
  "aiCodeMenu": [
    [{
        "text": {
          "ZH": "清空内容",
          "EN": "Cut"
        },
        "actionName": "remove",
        "shortcutClassName": "",
        "withCodeFlag": true
      },
      {
        "text": {
          "ZH": "复制代码",
          "EN": "Copy"
        },
        "shortcutKey": "Ctrl/Cmd+C",
        "actionName": "copy"
      },
      {
        "text": {
          "ZH": "取消标识",
          "EN": "Paste"
        },
        "shortcutKey": "Ctrl/Cmd+V",
        "actionName": "removeFlag"
      }
    ],
    [{
        "text": {
          "ZH": "解释代码",
          "EN": "Cut(Custom)"
        },
        "shortcutKey": "Ctrl/Cmd+X"
      },
      {
        "text": {
          "ZH": "生成代码",
          "EN": "Cut(Custom)"
        },
        "shortcutKey": "Ctrl/Cmd+X"
      },
      {
        "text": {
          "ZH": "交换代码",
          "EN": "Cut(Custom)"
        },
        "shortcutKey": "Ctrl/Cmd+X"
      }
    ]
  ],
  "editorBlankContent": "\n      <div class=\"blank_container\"\n      <div class=\"item\">\n        <div class=\"item-title\">Show All Commands</div>\n        <div class=\"item-shortCut\">\n          <div class=\"item-shortCut-item\">⇧1</div>\n          <div class=\"item-shortCut-item\">⌘</div>\n          <div class=\"item-shortCut-item\">P</div>\n        </div>\n      </div>\n    </div>\n    <div class=\"blank_container\"\n      <div class=\"item\">\n        <div class=\"item-title\">Open File or Folder</div>\n        <div class=\"item-shortCut\">\n          <div class=\"item-shortCut-item\">⌘</div>\n          <div class=\"item-shortCut-item\">O</div>\n        </div>\n      </div>\n\n    </div>\n  <div class=\"blank_container\"\n    <div class=\"item\">\n      <div class=\"item-title\">Open Recent</div>\n      <div class=\"item-shortCut\">\n        <div class=\"item-shortCut-item\">⌃</div>\n        <div class=\"item-shortCut-item\">R</div>\n      </div>\n    </div>\n </div>\n<div class=\"blank_container\"\n  <div class=\"item\">\n    <div class=\"item-title\">New Untitled Text File</div>\n    <div class=\"item-shortCut\">\n      <div class=\"item-shortCut-item\">⌘</div>\n      <div class=\"item-shortCut-item\">N</div>\n    </div>\n  </div>\n</div>\n<div class=\"blank_container\"\n<div class=\"item\">\n  <div class=\"item-title\">Show All Commands</div>\n  <div class=\"item-shortCut\">\n    <div class=\"item-shortCut-item\">⇧</div>\n    <div class=\"item-shortCut-item\">⌘</div>\n    <div class=\"item-shortCut-item\">P</div>\n  </div>\n</div>\n</div>\n<div class=\"blank_container\"\n</div>\n      ",
  "globalConfig": {
    "fontSize": "16px"
  }
}

  • dev-log

    • 迁移了编辑器的部分功能，但paas的预览功能需要一个后端

  • dev-to

    • 将paas的server也迁移过来?

  • What is RPA (Robotic Process Automation)? | Microsoft Power Automate

    • How robotic process automation streamlines business processes
    • By using RPA tools as part of a larger business process automation strategy, software “robots” can easily be configured to trigger responses, manipulate data, and communicate with other digital systems
    • When exploring RPA as a workflow automation solution, it’s helpful to consider the two different categories—attended and unattended automation—before deciding which is right for your organization.

0510

sudo gedit /etc/sysctl.conf
fs.inotify.max_user_watches=524288
sudo sysctl -p
  • dev-log
    • 熟悉了1024code的整体架构
    • 熟悉编辑器的插件
  • dev-to
    • 1024code的代码如何复用到新产品中

0509

0508

console.log(';; ajax-req ', config.url, isBackendURL(config.url), JSON.stringify(Token), window);

console.log(';; ajax-res ', path, JSON.stringify(error));

0505

  • Resolve error: Can't resolve '@datalking/codemirror-react'
    • 方法是移除package.json中的exports字段

0502

dev-04-strapi-preview-versions-&-yjs-quill-codebase

0423

0421

0419

type OptionalExceptFor<T, TRequired extends keyof T> = Partial<T> & Pick<T, TRequired>

// F - the fields that should be made optional
export type PartialPick<T, F extends keyof T> = Omit<T, F> & Partial<Pick<T, F>>;

// make some properties required 
type RequiredPick<T, F extends keyof T> = Omit<T, F> & Required<Pick<T, F>>;

0418

0417

class ClassA {
  field1: any;
}

const SomeClassAsA = diContainer.get('SomeClass') as ClassA;

class ClassB extends ClassA {} // works
class ClassB extends SomeClassAsA {} // error: Type ClassA is not a constructor function type

const SomeClassAsA = diContainer.get('SomeClass') as typeof ClassA; // ✅
  • How to assert a type of an HTMLElement in TypeScript? - Stack Overflow
    • Do not type cast. Never. Use type guards if ((e instanceof HTMLScriptElement)) ;
    • Rather than using a type assertion, type guard, or any to work around the issue, a more elegant solution would be to use generics to indicate the type of element you're selecting.
    • Unfortunately, getElementsByName is not generic, but querySelector and querySelectorAll are. (querySelector and querySelectorAll are also far more flexible, and so might be preferable in most cases.)

0416

  • Prohibition against prefixing interfaces with "I"

    • I-prefix violates encapsulation principle. Let's assume you get some black-box. You get some type reference that allows you to interact with that box. You should not care if it is an interface or a class. You just use its interface part (I from SOLID principle). Demanding to know what is it (interface, specific implementation or abstract class) is a violation of encapsulation.
    • Conformance. When in Rome principle. Major ts-based frameworks like Angular discorage using I prefix for interfaces. Rxjs also do not use I prefix.
    • I think thats because in TypeScript the interface is not just an pure object interface but it can be used to define interface to ctors, call signatures, indexable objects and maybe more I can't imaigine right now

  • Confused about the Interface and Class coding guidelines for TypeScript - Stack Overflow

    • Protection from bad naming: you should not not define an ICar interface and an associated Car class. Car is an abstraction and it should be the one used for the contract. Implementations should have descriptive, distinctive names e.g. SportsCar, SuvCar, HollowCar.
    • If not, maybe the Java style of SomeThing (interface) with SomeThingImpl (implementation) then by all means use that.
    • I personally quite like the idea of turning a noun into an adjective by adding the -able suffix. It sounds very impropper, but I love it!

  • Width of stroke in an SVG icon - User Experience Stack Exchange

    • I'd like to use the "material" icons. Their design guidelines say, for outlined icons, To maintain legibility, the recommended stroke weight is 2dp for most icons. 2dp outlined icons remain readable across sizes and applications.

  • Icon Sizes and why SVG is not the Solution – Part 3/3 – SGrottel.de

    • we should go the extra mile also optimizing the graphics for exactly those sizes we aim for: 16×16, 24×24, 32×32, 48×48, and 64×64, traditionally.
    • 16×16 is very very small, and as written above looses it’s importance in the age of high resolution displays. Similar to the abstraction from a logo to and icon, as written in my first article of this series, many icons simplify and remove details when they go down from 32×32 pixel sized versions to the 16×16 pixel sized versions
    • the second reason are the in between sizes, infamously the 24×24 pixels. It’s a scaling factor of 1.5x from the 16×16 version. Any line might end up again in between pixels and blurry if you just scale up.
    • Personally, I usually try to design icons at 32×32 pixels. The 64×64 pixel and 256×256 pixel versions are then automatic upscales

0415

0414

{
  resolve: {
    fallback: {
      'react/jsx-runtime': 'react/jsx-runtime.js',
      'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js',
    },
  }
}

0411

  • Is there any difference between a GUID and a UUID? - Stack Overflow
    • The simple answer is: no difference, they are the same thing.
    • For most practical purposes, treat them as 16 byte (128 bits) values that are used as a unique identifier. In Microsoft-speak they are called GUIDs, but call them UUIDs when not using Microsoft-speak.
    • GUID is Microsoft's implementation of the UUID standard.
    • RFC 4122 itself states that UUIDs "are also known as GUIDs". All this suggests that "GUID", while originally referring to a variant of UUID used by Microsoft, has become simply an alternative name for UUID…
    • One difference between GUID in SQL Server and UUID in PostgreSQL is letter case; SQL Server outputs upper while PostgreSQL outputs lower.

0407

0406

// Number.prototype.toLocaleString()
3500. toLocaleString() // Uncaught SyntaxError: Invalid or unexpected token
3500..toLocaleString() // 3,500

0405

const MyPortaledModal = () => createPortal(<MyModalDialog />, document.body)

const MyPage = () => {
  const [shouldShowModal, setShouldShowModal] = useState(false);

  const toggleModal = () => setShowModal(prevValue => !prevValue)

  return (
    <div>
      <button onClick={toggleModal}>Click me</button>
      {shouldShowModal && <MyPortaledModal/>}
    </div>
  )
}

0404

0403

// react-router v6
import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

const refreshPage = () => {
  navigate(0);
}

0402

JSON.stringify(NaN) === JSON.stringify(null)
// => true

JSON.stringify(Infinity) === JSON.stringify(null)
// => true

dev-03-realworld-react-sequelize-knex-&-strapi-version-history

0324

import * as TOML from 'https://jspm.dev/@ltd/[email protected]';

0323

import * as ts from "typescript";

function compile(fileNames: string[], options: ts.CompilerOptions): void {
  let program = ts.createProgram(fileNames, options);
  let emitResult = program.emit();
  }

0322

0319

0318

  • ReferenceError: Cannot access x before initialization _202008

    • 由 react-refresh webpack热加载插件导致的异常
    • To be clear, this is not a problem that only exists on our side - it is a limitation of HMR of Webpack (or potentially any other bundlers that creates a module graph).
    • When a graph needs to be created and there exists cyclic references, the order of which node is created first can be nondeterministic, which means while your app could work in production, it will not work in development with HMR enabled.
    • Generally, I think the Webpack maintainers hold a similar stance as I do - cyclic dependencies are bad.you should try eliminate them

  • This is really an unexpected meeting. We have seen the same problem and come out with a way to solve it In Rspack.

    • The problem is caused by eagerly accessing some un-initialized variables declared by const. The accessing is done due to the react-refresh need to access each export of modules. By making accessing laziness, we solved the problem

  • run-p: command not found - Stack Overflow

    • npm i npm-run-all --save-dev

  • 2024 年，该如何写一个全面兼容的 NPM 库 - 静かな森

0317

  • Assignment (=) - JavaScript | MDN
    • The assignment (=) operator is used to assign a value to a variable or property.
    • 💡 The assignment expression itself has a value, which is the assigned value. This allows multiple assignments to be chained in order to assign a single value to multiple variables

0316

0313

0312

0310

SELECT * FROM user
WHERE id::text = '33bb9554-c616-42e6-a9c6-88d3bba4221c' 
  OR uid = '33bb9554-c616-42e6-a9c6-88d3bba4221c';

0309

0307

0305

// 在 src/types.ts 添加自定义覆盖类型
declare namespace Express {
   export interface Request {
      tenant?: string
   }
}

dev-02-airtable-db-dash-&-hexo-eg-&-strapi-eg

0228

import { Navigate, type RouteProps } from 'react-router-dom'; 

export function PrivateRoute({ children }: RouteProps) {
  const isLoggedIn = checkUser() // check cookie or local storage etc
  return (
     isLoggedIn
        ? children
        : <Navigate to="/sign-in"/>
  );
}

// <Route path="/" element={ <PrivateRoute> <AdminPage /> </PrivateRoute> } />

0225

  • Attach Authorization header for all axios requests - Stack Overflow

    • I have explained the two most common approaches.
    • you can use axios interceptors to intercept any requests and add authorization headers.
      • config.headers.Authorization = token;
    • there is a mechanism available which allows you to set default header which will be sent with every request you make.
      • axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    • A minor gotcha: You will have to set default headers for each instance of Axios in your application separately if you are following second method. This took me a while to figure out
    • Sometimes you get a case where some of the requests made with axios are pointed to endpoints that do not accept authorization headers. Thus, alternative way to set authorization header only on allowed domain is as in the example below

  • never store token in localStorage

    • the most secure way would be that server sets cookie with token. Important thing - cookie should have attributes "httpOnly" and "secure". And axios should not worry about token, because that cookie would be attached to request header.
    • The other approach (which usually is used by third party auth libraries, for example MSAL) - to store in session storage (and not in local storage). In this case would be necessary to define Authorization header as in Your example.

  • A neat little trick with JavaScript's indexOf() - DEV Community

    • The Bitwise NOT-Operator ~ It flips all bits of a number
    • 按位非 num 等价于 -num -1, 只有num为-1时为0(falsy)，其余值的num都为truthy
    • Unless one will reuse the index in other places, I like to recommend includes instead of indexOf. I think it's more readable.
var arr = [1, 2, 3, 'foo'];

// old way
if (arr.indexOf('foo') > -1) {
  console.log('"foo" is in "arr"!');
}

// new way
if (~arr.indexOf('foo')) {
  console.log('"foo" is in "arr"!');
}

0224

0206

0205

  • 💡🔁 postgresql将docker数据库迁移到本地数据库 /#devlog

    • pg_dump支持连接到remote后再dump，导出sql格式是最通用的，还可以手动修改
    • remote的pg可能启用了插件，此时要先在本地启用插件如uuid
    • 对着error一个个处理，可能github-issues已经说明了
    • dbeaver的tools-dump导出后，不能通过tools-restore恢复，是已知的bug

  • su: Authentication failure

    • 使用 sudo su - postgres

  • postgresql - COPY FROM STDIN does not work in liquibase - Stack Overflow

    • Mixing the COPY statement and the data in the same file only works in psql scripts.
    • You should use INSERT statements in your script. If you want to load a pg_dump with the JDBC driver, use pg_dump --inserts (but expect slower performance).

  • pg_restore: [archiver] input file appears to be a text format dump. Please use psql. · dbeaver/dbeaver

    • pg_restore can't import plain SQL files. Its a job for psql. Also it is possible to run SQL dump as script in DBeaver.

  • pg_restore: error: could not execute query: ERROR: function public.uuid_generate_v4() does not exist

  • How to deal with : Function uuid_generate_v4() does not exist on PostgreSQL - DEV Community

    • CREATE EXTENSION IF NOT EXISTS "uuid-ossp";

  • How to backup and restore a PostgreSQL database via DBeaver - Databases - Pyramid Analytics Community Forum

  • postgresql 9.5 - Can't backup db: libpq.so.5: cannot open shared object file: No such file or directory - Stack Overflow

    • Make sure you are not using the flatpak version, I had the same problem with this version, if you are using it, uninstall and download the .deb package and install from there.

  • DBeaver Documentation - backup

    • When performing a Global PostgreSQL database Backup, the entire database is dumped, including roles and tablespaces.
    • This differs from standard backup procedures where only specific schemas and their contents can be selected.
    • Additionally, multiple databases can be chosen for backup at once in the global method.

  • 🐘 PostgreSQL的模式、表、空间、用户间的关系 - 掘金

  • 一个数据库包含一个或多个已命名的模式schema，模式又包含表table。

    • 模式还可以包含其它对象， 包括数据类型、函数、操作符等。同一个对象名可以在不同的模式里使用而不会导致冲突； 比如，herschema和myschema都可以包含一个名为mytable的表。

  • 和数据库不同，模式不是严格分离的：只要有权限，一个用户可以访问他所连接的数据库中的任意模式中的对象。

  • 需要模式的原因有好多：

    • 允许多个用户使用一个数据库而不会干扰其它用户。
    • 把数据库对象组织成逻辑组，让它们更便于管理。
    • 第三方的应用可以放在不同的模式中，这样它们就不会和其它对象的名字冲突。

  • 模式类似于操作系统层次的目录，只不过模式不能嵌套。

  • 模式(schema)是对数据库(database)逻辑分割。

    • 在数据库创建的同时，就已经默认为数据库创建了一个模式--public，这也是该数据库的默认模式。所有为此数据库创建的对象(表、函数、试图、索引、序列等)都是创建在这个模式中的
    • 一个数据库至少有一个模式，所有数据库内部的对象(object)是被创建于模式的。用户登录到系统，连接到一个数据库后，是通过该数据库的search_path来寻找schema的搜索顺序，可以通过命令SHOW search_path；
    • 官方建议是这样的：在管理员创建一个具体数据库后，应该为所有可以连接到该数据库的用户分别创建一个与用户名相同的模式，然后，将search_path设置为$user，即默认的模式是与用户名相同的模式。

  • 表空间是实际的数据存储的地方。

    • 一个数据库schema可能存在于多个表空间，相似地，一个表空间也可以为多个schema服务。
    • 通过使用表空间，管理员可以控制磁盘的布局。表空间的最常用的作用是优化性能，例如，一个最常用的索引可以建立在非常快的硬盘上，而不太常用的表可以建立在便宜的硬盘上，比如用来存储用于进行归档文件的表。

  • 默认的数据库所有者是当前创建数据库的角色，默认的表空间是系统的默认表空间pg_default。

    • 在PostgreSQL中，数据的创建是通过克隆数据库模板来实现的，这与SQL SERVER是同样的机制。由于CREATE DATABASE dbname并没有指明数据库模板，所以系统将默认克隆template1数据库，得到新的数据库dbname。(By default, the new database will be created by cloning the standard system database template1)
    • template1数据库的默认表空间是pg_default，这个表空间是在数据库初始化时创建的，所以所有template1中的对象将被同步克隆到新的数据库中。
    • 在PostgreSQL中，表空间是一个目录，里面存储的是它所包含的数据库的各种物理文件。

  • 表空间是一个存储区域，在一个表空间中可以存储多个数据库，尽管PostgreSQL不建议这么做，但我们这么做完全可行。

    • 一个数据库并不知直接存储表结构等对象的，而是在数据库中逻辑创建了至少一个模式，在模式中创建了表等对象，将不同的模式指派该不同的角色，可以实现权限分离，又可以通过授权，实现模式间对象的共享，public模式可以存储大家都需要访问的对象。

  • 表空间用于定义数据库对象在物理存储设备上的位置，不特定于某个单独的数据库。

    • 数据库是数据库对象的物理集合，而schema则是数据库内部用于组织管理数据库对象的逻辑集合，schema名字空间之下则是各种应用程序会接触到的对象，比如表、索引、数据类型、函数、操作符等。

0202

dev-01-pouchdb-idb-rspack-rebuilt-&-ethercalc-ot-&-joplin-note

0131

# linux
export NODE_OPTIONS=--openssl-legacy-provider
# win
set NODE_OPTIONS=--openssl-legacy-provider

npm start

0117

import { createRequire } from 'node:module';
const require = createRequire(
  import.meta.url);

const countryTable = require('./data/countries.json');
import { RequestInfo, RequestInit, Response } from 'node-fetch'

const _importDynamic = new Function('modulePath', 'return import(modulePath)')

export const nodeFetch = async function (url: URL | RequestInfo, init?: RequestInit): Promise<Response> {
  const { default: fetch } = await _importDynamic('node-fetch')
  return fetch(url, init)
}
import Module from "node:module";
const require = Module.createRequire(
  import.meta.url);

0116

  • shell中冒号 : 用途说明 - nowgood - 博客园

    • 在Linux系统中，冒号(:)常用来做路径的分隔符（PATH），数据字段的分隔符（/etc/passwd）等。
    • 其实，冒号(:)在Bash中也是一个内建命令，它啥也不做，是个空命令、只起到占一个位置的作用
    • No effect; the command does nothing beyond expanding arguments and performing any specified redirections. A zero exit code is returned.
    • 没有想好或完成相应的代码，这时就可以用: 来做占位符
    • 单行注释 : your comment # your comment
    • 清空文件file的内容 : >file
    • 默认参数 : ${VAR:=DEFAULT}

  • bash - Explanation of colon operator in : ${foo=value} - Stack Overflow

    • it also returns the assigned value
    • if you simply executed ${SOMETHING='value'}, then your shell would try to invoke the command value. This might or might not do something unwanted;
    • the no-op :, which evaluates its argument and then throws it away, rather than executing it.

0112

0111

  • babel plugin 的 loose 模式是什么

    • 开启：会生成更贴近 ES5 风格的代码
    • 关闭：会生成尽可能严格遵循 ES next 语法的代码
    • 优点：代码更易读，在一些浏览器上可能兼容性更好，运行更快
    • 缺点：当你想切换回 native ES 语法时，这个过程可能会出现不兼容的情况，因为你的代码使用了编译后的不严格的代码，存在风险
    • 所以大部分情况下，不建议开启 loose 模式

  • 详解利用webpack的splitChunk拆分打包文件 - 掘金

    • splitChunks的配置项都是作用于cacheGroup上的，也就是cacheGroups缓存组可以继承和覆盖来自 splitChunks.* 的任何选项

  • webpack 拆包：关于 splitChunks 的几个重点属性解析 - 掘金

    • 对于异步导入，splitChunks 分离出 chunks 形成单独文件来重用，而对于同步导入的相同模块没有处理，这就是 chunks: 'async' 的默认行为
    • initial 与 async 的区别：同步导入的模块也会被选中分离出来。
    • 在 initial 设置下，就算导入的是同一个模块，但是同步导入和异步导入是不能复用的。
    • 把 chunks 设置为 all，不管是同步导入还是异步导入，m3.js 都分离并重用了。

  • webpack and yarn magic against duplicates in bundles

0110

0104

0103