锤子前端

Now vibe coding, so learning hammer FE ?

锤子前端

  4. 锤子前端

    #开源 一个有意思的项目，让你了解css不同颜色的名字

    #开源 一个有意思的项目，让你了解css不同颜色的名字。

    https://github.com/scriptype/sorted-colors
    GitHub
    GitHub - scriptype/sorted-colors: A tool to sort the named CSS colors in a way that it shows related colors together
    GitHub - scriptype/sorted-colors: A tool to sort the named CSS colors in a way that it shows related colors together
    A tool to sort the named CSS colors in a way that it shows related colors together - scriptype/sorted-colors

    开源

  5. 锤子前端

    #文章 《关于认知负荷（心智负担）的思考》值得置顶和收藏的文章，无关乎语言，值得细细品读

    #文章 《关于认知负荷（心智负担）的思考》值得置顶和收藏的文章，无关乎语言，值得细细品读。

    https://minds.md/zakirullin/cognitive
    minds.md
    Cognitive load is what matters
    There are so many buzzwords and best practices out there, but let's focus on something more fundamental. What matters is the amount of confusion developers feel when going through the code.

    文章

  8. 锤子前端

    #React #文章 「你可能不需要 next.js」讲述了ComfyDeploy团队从Next.js迁移到纯React的原因和过程

    #React #文章 「你可能不需要 next.js」讲述了ComfyDeploy团队从Next.js迁移到纯React的原因和过程。迁移后，构建时间显著减少，开发体验得到改善，团队成员更加满意。文章分析了迁移的原因、过程、结果和权衡，最终得出结论，对于他们的产品来说，使用更少的Next.js意味着更快的开发速度和更高的团队满意度。
    Comfydeploy
    You don't need Next JS - Comfy Deploy
    The best platform to run and deploy ComfyUI to your teams

    React文章

  9. 锤子前端

    #文章 #React 高分段国际化处理方式？「通过自动化在 React 中搭建国际化的脚手架」文章详细介绍了如何使用ts-morph库来解析、导航和操作抽象语法树（AST），并分别展示了如何为使用react-i18next和react-intl库的React代码库实现自动化脚本

    #文章 #React 高分段国际化处理方式？「通过自动化在 React 中搭建国际化的脚手架」文章详细介绍了如何使用ts-morph库来解析、导航和操作抽象语法树（AST），并分别展示了如何为使用react-i18next和react-intl库的React代码库实现自动化脚本。这些脚本可以自动查找硬编码的字符串，并将其替换为带有生成键和默认翻译值的翻译函数。

    https://lingual.dev/blog/automating-your-react-internationalization/
    Lingual
    Scaffolding your internatlization in React with automation
    Bootstrapping your internationalization by automatically transforming your code

    文章React

  10. 锤子前端

    #React #文章 本文详细介绍了构建下拉菜单（dropdown）组件的过程，包括其触发器、关闭机制、定位和焦点陷阱等关键技术细节

    #React #文章 本文详细介绍了构建下拉菜单（dropdown）组件的过程，包括其触发器、关闭机制、定位和焦点陷阱等关键技术细节。文章强调了理解下拉组件的内部机制的重要性，并提供了基于React的代码示例和设计模式，以帮助开发者构建功能齐全、可访问性强的下拉菜单。

    https://reshaped.so/blog/building-a-dropdown
    Reshaped
    Building a dropdown - Reshaped
    Building a dropdown - Reshaped
    In this article, we'll go through the high-level expectations when building dropdowns and explore several rabbit-holes, explaining their challenges and potential solutions.

    React文章

  12. 锤子前端

    #网页工具 美化截图，美化代码截图

    #网页工具 美化截图，美化代码截图。

    1. https://postspark.app/ 多种平台社媒图片导出，只能下载。
    2. https://chalk.ist/ 美化代码，可以直接复制。
    PostSpark
    Screenshot Editor & Beautifier – PostSpark
    Screenshot Editor & Beautifier – PostSpark
    Free online screenshot editor with no signup and no watermark. Add backgrounds, browser frames, text, arrows, and blur, then export as PNG, JPG, or MP4.

    网页工具

  16. 锤子前端

    #React #文章 深入探讨了Vite的构建过程中如何实现modulePreload优化，包括transform钩子、resolveId/load钩子、renderChunk钩子和generateBundle钩子的作用

    #React #文章 深入探讨了Vite的构建过程中如何实现modulePreload优化，包括transform钩子、resolveId/load钩子、renderChunk钩子和generateBundle钩子的作用。
    背景：携程商旅大前端团队将部分框架从Next.js迁移至Remix，并在Remix 2.0版本中进行了大量升级，包括构建工具和新功能。

    https://mp.weixin.qq.com/s/viEuEA9ew9xImEa5bWYWxw
    Weixin Official Accounts Platform
    干货 | 携程商旅在 Remix 模块预加载中的探索与优化实践
    高效的服务端渲染和数据加载机制，显著提升应用性能和用户体验。

    React文章

  19. 锤子前端

    #文章 在浏览器接收到网页的第一个字节之前发生的事件，以及如何优化这些事件来加快网页加载速度

    #文章 在浏览器接收到网页的第一个字节之前发生的事件，以及如何优化这些事件来加快网页加载速度。这些事件包括浏览器缓存检查、DNS查询、与服务器建立连接、TLS/SSL握手、发送请求以及接收响应。

    https://blog.sentry.io/how-to-make-your-web-page-faster-before-it-even-loads/
    Sentry Blog
    How to make your web page faster before it even loads
    How to make your web page faster before it even loads
    Understand what happens before your web page loads to optimize your web page for better performance. Learn more about how to make your web page faster here.

    文章