Devin Ding (丁德文)

Devin Ding (丁德文)

Frontend Developer

最近阅读

  1. https://juejin.cn/post/7492640608206487562 （SSE服务器推送，客户端监听场景)
  2. Todo ( 接口文档工具）
  3. react有着成熟的生态：生态不是指那些已经成熟的组件库，而是指在做那些小众领域的需求时 有成熟的解决方案 之前做作流程引擎时 Vue 框架的流程引擎库我用的是阿里的 g5 vue 结果是文档缺失 功能太小 甚至有 bug；反观 React 框架 React flow 非常成熟
  4. https://www.javaguides.net/2025/03/5-microservices-design-patterns-you-should-know.html （微服务设计模式后端)
  5. 7 React Patterns That Made Me a Better Front-End Developer (react)
  6. 7 JavaScript Hacks That Will Make Your Code Cleaner and Faster
  7. How to do a code review + weekly/前沿技术/142.精读《如何做好 CodeReview》.md at master · ascoders/weekly
  8. 线上故障应急处理：4 年多 on call 经验总结 有一个简单易行的办法，可以快速提升自己对业务或者技术细节的熟悉程度。比如说周末拿出一张大白纸，什么都不看，在白纸上开始画自己业务系统的运作流程，尽可能详尽的画出自己理解的每一处细节，这时候肯定觉得平时难以入眼的代码和文档变得魅力十足。因为在一开始练习的过程中，肯定充满了不确定，有很强的欲望再去看一看代码和文档，来补充自己不确定的细节。最后，这个办法也可以应用在深入学习核心组件的代码上，数据结构是核心组件的骨架，那运行流程就是核心组件的血液，我们可以通过在白纸上回忆填充，来不断增加对项目代码的理解程度，我当初学习 NGINX 的时候，就是不断的在白纸上一次次尝试自己画出 NGINX 的核心数据结构和各种场景的运行流程，其实还是蛮开心的，不过我现在好像遗忘了好多。这个技巧的原理，是强迫自己站在设计者和实现者的角度去思考问题，这样才能更深入的理解本质。
  9. 在 Docker 沙箱中运行 MCP Server
  10. The problem(s) with image accessibility （讲最好alt 定义宽高减少偏移等）
  11. An Introduction to JavaScript Bundler Rspack AppSignal Blog (rust 构建的打包工具/性能更好）
  12. Polishing your typography with line height units (css：lh 的使用场景：就是文本的高度 line-height: 不包含padding的） lh 是为了”跟着文字大小动态调整布局”，不是为了做死版的、像素对齐的设计稿
  13. Mastering default values in JavaScript with the nullish coalescing (??) operator - Matt Smith 当 ?? 排除 null 或 undefined； || 排除空值（空字符串/0/false/null/undefined)
  14. https://jsdev.space/mutation-observer-dom-tracking-guide/ 监控第三方程序何时完成渲染等 mutationObserver
  15. https://www.bennadel.com/blog/4783-comparing-undefined-values-with-optional-chaining-in-javascript.htm?ref=dailydev 讲述了 undefined 永远不会与（非 null undefined的值） 软等于，会返回false
  16. https://www.trevorlasn.com/blog/symbols-in-javascript Symbols
  17. http://clientserver.dev/p/war-story-the-hardest-bug-i-ever 讲述了 如何排查问题：二分查找缩小问题范围
  18. https://baipin.pw/tech-study/distinctdns.html cdn 内陆与海外区分下内容 https://www.17ce.com/ (查看国内地区）
  19. https://github.com/ruanyf/weekly/blob/master/docs/issue-347.md
  20. 新 app 如何冷启动：除了工具属性外，还需要网络属性（网络效应）
  21. 冷启动是创业公司的头号难题。做出产品不难，找到用户才难：靠网络效应
  22. 第五点，只要（一个细分市场的）用户网络达到2万人，就能自己不断变大，最终覆盖整个市场
  23. Input Source Pro 方便切换输入法 done
  24. https://blog.logrocket.com/choosing-best-access-control-model-frontend/ 解释了rbac
  25. What are you, as the user, allowed to do? 作为用户，你被允许做什么？
  26. On the frontend, access control isn’t about security. Enhance user experience. UI 交互主要
  27. Role-based && Attributes-based && Access control list && Policy-based access control (后端）
  28. The frontend isn’t your fortress, it’s your storefront. Use access control to guide users, not guard the gates.
  29. https://heydonworks.com/article/the-cite-element/?ref=dailydev css ->讲述 blockquote引用，cite引用来源
  30. Css: https://emilkowal.ski/ui/good-vs-great-animations 讲述了什么动画是好动画，需要一个过渡的有时候，很多时候不是瞬变的
  31. Css 动画： https://emilkowal.ski/ui/great-animations#great-animations-are-fast
  32. Snappy animations feel responsive and connected to user’s actions 该场景最佳的动画 ease-out
  33. Great animations have a purpose
  34. A good tip here is to never animate keyboard initiated actions. 因为操作太频繁了，动画耗时会给用户很慢的感觉
  35. stick to transform and opacity, you should be fine. 使用硬件处理
  36. https://piccalil.li/blog/javascript-when-is-this/ js this指向问题
  37. https://www.deepintodev.com/blog/how-promises-work-in-javascript done promise —> 内部还有其他的文章
  38. https://2ality.com/2025/04/stringification-javascript.html 字符串转化：面试常有的题
  39. https://blog.logrocket.com/how-to-use-the-tailwind-typography-plugin/ 在开发非标订单的时候使用上了 @tailwindcss/typography，用于美化 HTML 或者 MD格式文档（设置class=”prose”即可)
  40. https://www.trevorlasn.com/blog/error-iserror-javascript 使用 Error.isError() 判断是否错误，比instanceof 更好
  41. https://blog.logrocket.com/javascript-date-format/ 日期格式化，以及库的使用
  42. UTC 是指 协调世界时（Coordinated Universal Time），是一种全球统一的时间标准，常用于编程中处理时间的标准化与跨时区问题：
  43. UTC 是全球通用的标准时间，不随地区变化 比如：北京时间（CST） = UTC +8 小时；纽约时间（EST） = UTC -5 小时（夏令时可能是 -4）
  44. 时区：是相对于 UTC 的偏移
  45. 时间戳：绝对值，不会因为你在哪个国家、用哪个时区而变化 自 1970 年 1 月 1 日 00:00:00 UTC 到某个时间点所经过的 毫秒数
  46. https://www.sarasoueidan.com/blog/css-carousels-accessibility/ 轮播图 todo
  47. https://github.blog/ai-and-ml/github-copilot/github-for-beginners-building-a-react-app-with-github-copilot/ GitHub 官方出品的 Copilot 教程，带你从 0 到 1 搭建 React 应用。
  48. https://eslint.org/blog/2025/05/eslint-html-plugin/ 了解到了 eslint 不仅仅针对 js文件，可以对html静态文件检查：项目中存在大量 .html 文件（mpa多页面）或者是 ejs 模板等，vue文件不需要
  49. https://playfulprogramming.com/collections/art-of-accessibility. 如何学习现代框架 –课程
  50. https://css-generators.com/svg-to-css svg –> css
  51. https://mayank.co/notes/popover-vs-dialog/ 组件使用:解释两者定位的好文，帮你理清 Web 组件边界
  52. https://www.freecodecamp.org/news/how-javascript-lint-rules-work-and-why-abstract-syntax-trees-matter/ 处理内容：讲述了Ast内部实现机制
  53. https://developer.chrome.com/docs/devtools/javascript?hl=zh-tw source 面板的使用 todo
  54. 可以梳理下如何检查查找错误的能力：快速排查线上问题
  55. 可以通过source中click事件确认到该元素在代码中的位置，然后直接进行操作修改–事件監聽器中斷點
  56. https://zhaoluting.gitbooks.io/chrome/content/panel/sources.html 资源参考
  57. https://blog.appsignal.com/2025/05/07/migrating-a-javascript-project-from-prettier-and-eslint-to-biomejs.html Biome 是下一代的 Prettier + ESLint 替代品：
    • 简化前端工具链
    • 提升运行性能；
    • 减少配置负担；
    • 解决历史工具之间的重复、冲突、运行慢等问题。
  58. https://frontendmasters.com/blog/the-simplest-way-to-deploy/#8-make-a-new-projects-on-netlify
  59. 使用 netlify 快速部署自己的个人网页
  60. 可以使用 github 提供的 page 进行 静态部署
  61. https://overreacted.io/progressive-json/ progress json
  62. 了解到json格式加载时需要全部加载完成后才能执行；
  63. 改用执行流式JSON加载，可能存在数据字段缺失的情况，所以使用场景也少
  64. 改进方式：由 depth-first 改为 breadth-first，加载慢的使用 Promise 处理（使用占位符处理） 如果你对这方面感兴趣，建议深入了解：
    • React Server Components（RSC）
    • GraphQL @defer/@stream
    • HTTP Streaming（尤其是 Transfer-Encoding: chunked）
    • WebSocket/SSE 数据更新机制

https://www.liquidweb.com/blog/what-is-a-progressive-jpeg/ progress jpeg（fussy–>crisp) 只有 JPEG 格式支持“基线（Baseline）”和“渐进式（Progressive）”显示方式；PNG、WebP、AVIF 等不支持这两种编码形式。 figma的设计图没有渐进式的导出，需要进行其他工具进行处理

  1. https://thenewstack.io/when-to-use-progressive-web-apps-and-when-to-go-native/ PWA应用:渐进式网页应用–简单来说，PWA 是一种用现代Web技术（HTML, CSS, JS）做成的网页应用 PWA 也存在局限性。PWA 无法像原生应用那样深度地利用特定平台的 API（例如蓝牙、NFC 或生物识别身份验证
  2. Css https://evilmartians.com/chronicles/exploring-the-oklch-ecosystem-and-its-tools 介绍各种ui网站处理 https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl | 介绍如何使用 讲述了出了 rgb hex外的一种颜色 oklch:新的 CSS Color 4 规范添加了新的 oklch() 符号来声明颜色 https://oklch.com/#0.6658,0.1562,241.38,100 oklch 转化器 （真有必要使用吗） 或者脚本转化： npx convert-to-oklch ./src/*/.css 将 CSS 中的颜色从传统的 hex（十六进制） 格式（如 #ff0000）转化为现代的 OKLCH 颜色空间格式（如 oklch(62.92% 0.257 29.23)），确实是近年来前端开发中越来越推荐的做法，背后有明确的优点（AI有具体介绍： https://evilmartians.com/events/3-reasons-to-switch-to-oklch-wey-wey 为何转 oklch
    • 根据人类视觉模型设计的颜色空间设计：颜色亮度对比度等、线性调节亮度不突兀 /* 不自然渐变（RGB） */ background: linear-gradient(to right, #ff0000, #00ff00);

/* 更自然渐变（OKLCH） */ background: linear-gradient(to right, oklch(62% 0.3 30), oklch(62% 0.3 150));

  1. https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl#how-oklch-works Step 2: Maintaining OKLCH with Stylelint Stylelint 是一款样式检查工具，可用于查找常见错误并推广最佳实践。它类似于 ESLint，但适用于 CSS、SASS 或 CSS-in-JS。

  2. https://jsdev.space/complete-monorepo-guide/ monorepo 实践 项目迁移（单仓库多项目管理）
  3. https://blog.logrocket.com/dev/cursor-css/ cursor: 可拖拽：cursor: move 指针光标内容等：以及对角线、右边缘拖拽等, 禁止交互，还有类似： grab grabing – 带有抓取/抓取光标的可滚动画廊 I recommend you always pair cursor styles with other indicators:
    • Use aria-disabled=”true” alongside cursor: not-allowed for disabled elements
    • Include role attributes where appropriate (e.g., role=”button” for clickable divs)
    • Add aria-label or aria-describedby to provide context for complex interactions
  4. VSCode 使用 Jetbrains Mono 字体VSCode 开发者工具配置 Jetbrains Mono 字体， - 掘金
  5. useState (nuxt hooks) 可以实现 服务端与客户端共享数据信息：如何实现的呢？待定
  6. 6/23 阅读：https://lirantal.com/blog/cors-samesite-csrf-3-dimensions-cookie-authentication/ 清晰梳理前端安全认证的底层机制与边界问题
  7. Cloudflare 使用教程 todo
  8. https://imjanehsieh.com/cloudflare-teaching/
  9. https://medium.com/chouhsiang/30%E5%A4%A9%E6%90%9E%E6%87%82cloudflare-4-dns-6344ebb70b02 (教学使用）
  10. https://jsdev.space/solid-design-principles/ solid原则：实现更高质量、更易维护的代码架构
  11. Css safe属性 https://css-tip.com/safe-align/ 针对某些 center end属性，内容大于盒子时，滚动无法查看左边内容，加 safe 就不会有这个问题
  12. https://css-tip.com/broken-image/ 对于加载失败图片自定义样式，而不仅仅是alt 文本 （🐮） 通过img:after设置

img { position: relative; } /* we use ::after because Firefox is already using ::before */img:after { content: “We failed to load the image of \A’” attr(alt) “‘\A 😞” / “ “; position: absolute; inset: 0; display: grid; place-items: center; text-align: center; background: #eee; border: 2px dashed; font: bold 1.6em/1.5 system-ui; white-space: pre-wrap; color: #E80E0D; }

  1. https://www.freecodecamp.org/news/how-vue-composables-work/ vue hooks的机制：通过代码示例深刻理解组合式 API 的优势
  2. https://biomejs.dev/blog/biome-v2/。统一格式化、lint、编译器三合一的 Biome 正式发布 2.0，大幅优化性能与语法支持。
  3. https://blog.logrocket.com/frontend-devs-heres-how-to-get-the-most-out-of-cursor/
  4. 介绍了下 cursor 的基本使用，学到了一些内容的：比如@xx
  5. Cursor Tab 提供智能自动完成功能。Mac 用户可以高亮显示代码，按下 Command + K 组合键，然后让它执行任何操作

  6. Custom rules with .cursorrules 使用自定义的要求：比如测试驱动开发的写法等

  7. https://www.mendix.com/blog/asynchronous-vs-synchronous-programming/ Async & sync 异步与同步的区别：介绍了异步是多任务编程，比如请求数据信息等，不依赖其他任务，是相互独立的，同步则是依赖上一次的任务结果的，需要一件件来处理

  8. 阿里云 & AWS 服务器部署 学习（掌握基础的部署思路以及能力）（7-1/ 7-30）todo
  9. https://www.conventionalcommits.org/en/v1.0.0/
  10. html2canvas 存在问题：https://html2canvas.cn/html2canvas-features.html 了解不支持的css属性值
  11. 拉取不了api测试环境数据：export https_proxy=http://127.0.0.1:7890 http_proxy=http://127.0.0.1:7890 all_proxy=socks5://127.0.0.1:7890 —》 发现使用whistle不行，因为监听的是8899.。。 了解系统代理，以及whistle是如何代理，以及浏览器拦截请求如何解决 todo

Whistle界面可以访问。现在让我检查系统的代理设置，看看是否正确配置了HTTP和HTTPS代理。 networksetup -getwebproxy Wi-Fi && echo ‘—’ && networksetup -getsecurewebproxy Wi-Fi

我发现问题了！系统代理设置指向的是端口7890，但Whistle运行在端口8899。这就是为什么Whistle无法捕获流量的原因。让我修正代理设置 networksetup -setwebproxy Wi-Fi 127.0.0.1 8899 && networksetup -setsecurewebproxy Wi-Fi 127.0.0.1 8899

  1. CSS 如何模拟模糊玻璃 UI: https://css-tricks.com/getting-clarity-on-apples-liquid-glass/
  2. 正则表达式：https://jsdev.space/howto/regex-guide-frontend/
  3. 网络加速相关知识点：https://jsdev.space/await-fetch-slow/
  4. 用 CSS 设置最佳阅读行长与文本适配容器：排版也有 UX 细节值得打磨

对于段落等内容有一定作用：可响应式适配不同设备宽度

  1. https://blog.logrocket.com/next-js-real-time-video-streaming-hls-js-alternatives/ 可借鉴下作者介绍
  2. 博客：https://blacksheepcode.com/about 借鉴下
  3. https://www.debugbear.com/blog/nuxt-ssr-performance 让 Nuxt 页面加载飞起来 https://www.debugbear.com/blog/optimize-nuxt-performance#incremental-static-regeneration
  4. https://www.nico.fyi/blog/how-to-test-react-server-component 如何测试 React 服务器组件
  5. https://playfulprogramming.com/posts/react-history-through-code react 历史
  6. https://playfulprogramming.com/posts/layered-react-structure 分层 react 结构
  7. js函数默认参数小技巧：https://allthingssmitty.com/2025/06/29/default-parameters-your-code-just-got-smarter/
  8. https://juejin.cn/post/7524548909530005540 2025年上半年都学了什么 参考下
  9. https://juejin.cn/post/7506365655387078683#heading-6 h5 秒开思路（优化思路）
  10. 浏览器开发者工具调试器高级技巧 浏览器 DevTools(又称开发者工具) 为 Web 开发者提供了强大的开发功能。它们 - 掘金 开发调试技巧：
  11. 打开开发者工具：1. Fn + F12 2. option + command + i
  12. Http 状态码熟悉： https://www.siteground.com/kb/http-status-codes-explained/#2xx-status-codes-%e2%80%93-success
  13. https://juejin.cn/post/7537606213686263854 技术人员做业务层面时，需要多思考，团队改动等等
  14. https://tenten.co/learning/cursor-tips/ 学习 cursor 编程基础使用：開發 AI 應用的工程師 Command K（Control K）：精確的代碼編輯 Command L：基於聊天的代碼迭代
  15. https://github.com/PatrickJS/awesome-cursorrules cursor rules https://cursor.directory/ cursor prompt https://www.explainthis.io/zh-hant/ai/cursor-guide/2-1-prompt-basics 教学 https://www.explainthis.io/zh-hant/ai/cursor-guide/2-5-context-features 还可以对 commit 进行code review, 还介绍了js 代码风格参考 推薦一個重要的前提，是團隊要有一份風格指南 (Style Guide)。風格指南能確保程式碼的一致性，舉例來說，Airbnb 提供的開源 JavaScript 風格指南，在 GitHub 上獲得超過 10 萬顆星，明確規範了撰寫 JavaScript 的風格。Google 也公開了多種程式語言 (如 C++、Go、JavaScript、Java 等) 的風格指南，供開發者參考 Cursor 中常用的快捷鍵
    • @file：引用整個檔案作為上下文。
    • @code：引用特定程式碼段落（避免過多無關內容）。
    • @git：引用 Git 記錄（如 commit、PR diff），方便 Code Review。
    • @docs：引用技術文件（如 Next.js 官方文件），避免模型使用過時資訊。
    • @web：讓 Cursor 先進行網路搜尋，再根據最新內容回答（適用於無官方文件的新技術） 除了 ASCII 圖表，我們更推薦使用 Mermaid 這類繪圖工具。可以在 Cursor 中進一步輸入提示詞：「請基於這段內容生成 Mermaid 圖 发现还可以生成commit信息（太牛了，之前一直困惑 命名）
  16. 要有意識地去衡量，新的技術選擇最終是否帶給用戶價值，而不是為了用新技術而用。
  17. https://www.explainthis.io/zh-hant/career/first-principle 第一性原理思考（所謂第一性原理思考，是要從本質拆解，而不是直接類比或模仿。） & 个性与共性
  18. 引發驚人的爆炸力！ Elon Musk 知識軍火庫中最強殺傷力的武器 : 「第一性原理」（ First Principle ) 讲的不错，认知与时间曲线，同时还介绍了知道不知道四象限
  19. https://www.explainthis.io/zh-hans/swe/why-use-monorepo 为何要使用monorepo
  20. https://css-tricks.com/what-you-need-to-know-about-css-color-interpolation/ 背景色过渡。。。
  21. https://styled-components.com/docs/basics#motivation react中css in js；
  22. https://blog.logrocket.com/frontend-chatbots-rag-langchain/ ai 的前端机器人
  23. https://www.telerik.com/blogs/vue-basics-mastering-vue-lifecycle-hooks vue3生命周期理解
  24. https://juejin.cn/post/7524111809085014016 脚本插件自己写写
  25. https://juejin.cn/post/7547515500453380136 前端部署，又有新花样？
  26. https://juejin.cn/post/7521160007854866467 苹果官网优化
  27. https://developer.chrome.com/docs/web-platform/view-transitions/cross-document?hl=zh-cn 同源跨文档视图转化：全新的网页过渡动画机制，它能在「页面切换」时实现丝滑的动画过渡（而且几乎不需要前端框架）
    • 在 MPA（多页面应用）（每次点击链接都重新加载 HTML）中，这种动画过去是做不到的，因为页面会整页刷新 感觉更多用于 MPA; spa动画切换 document.startViewTransition(() => { document.body.classList.toggle(‘dark’) })
  28. https://developer.chrome.com/docs/web-platform/view-transitions/same-document?hl=zh-cn 适用于单页应用的同文档视图转换：比较常用的就是淡化淡出效果，以及视图转化ui变化控制
  29. https://developer.mozilla.org/en-US/blog/view-transitions-beginner-guide/ 教学视频
  30. https://developer.chrome.com/docs/web-platform/virtual-keyboard?hl=zh-cn 控制系统键盘 遮挡问题 扩展–》 安全虚拟键盘
  31. https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getDisplayMedia 提示用户去选择和授权捕获展示的内容或部分内容（如一个窗口）–》飞书共享屏幕就是利用到这功能
  32. https://frontendmasters.com/blog/numbers-that-fall-scroll-driven-animations-sibling-index/ 利用滚动驱动动画创造数字坠落效果： 👉 Scroll-driven Animations（CSS层方案） 👉 IntersectionObserver（JS层方案） 方程豹–钛7 背景色变化：https://sarcadass.github.io/granim.js/ 库
  33. https://scroll-driven-animations.style/ css动画可视化工具
  34. https://vitalii4reva.com/visual-js-event-loop/。事件循环可视化工具
  35. https://www.sitepoint.com/tailwind-css-in-react-and-nextjs/ 从零搭建 React + Next.js + Tailwind 项目
  36. https://blog.webf.zone/why-next-js-falls-short-on-software-engineering-d3575614bd08 react 软件层面缺陷，讲的相当有水平
  37. https://blog.webf.zone/contemporary-front-end-architectures-fb5b500b0231 当代前端架构
  38. https://blog.logrocket.com/react-useeffectevent/ 非响应式与响应式
  39. https://blog.logrocket.com/css-line-clamp/ 多行后接省略号：css属性控制（不同浏览器要做下区分）
  40. https://blog.logrocket.com/7-custom-react-hooks/ 第三方自定义hooks npm包（常见hooks)，并讲解了如何学习它，新建仓库进行操作
  41. Ai 不是 agi，仍旧是一个 tool
  42. https://www.youtube.com/watch?v=d10qxIXgLbg 介绍了 前端调试工具（如何使用）
  43. 什么是微前端？项目中的机票+酒店就是微前端场景 微前端架构的一种实现方式（路径代理型微前端） （不算完全意义上微前端，无法共享：主、子应用之间共享状态较难（如登录态、主题色）
    • 主应用（Next.js）加载子应用（Nuxt）打包后的资源；
    • 使用 single-spa、qiankun 或自定义加载器动态挂载；
    • 主应用控制全局路由和生命周期。 🟢 优点：
    • 页面切换流畅；
    • 共享状态容易；
    • 可以实现更深层的集成（例如组件级别的共享）。 🔴 缺点：
    • 架构复杂；
    • 不同框架间（React ↔ Vue）集成成本高。