TONG-H
Timeline
notes_jp

.postDetail strong { color: #0a95ff ; background: rgb(10 149 255 / 10%); padding: 0px 2px; border-radius: 3px; font-size: 88% } .postDetail em { background: #44ff0a1f; color: #3de708; } blockquote { border-left: 1px solid #d6d6d6 !important; border: 1px solid #d6d6d6; border-radius: 4px; background-color: rgb(245 245 245 / 95%) !important; ...

305.5k2023-11-172024-12-07
i18n-plan 前端多语言方案

想要给大家介绍一个 i18n 插件,写这个插件的起源也是因为项目中对 i18n 的需求,这个插件覆盖了我们项目中遇到的大部分 i18n 需求,说不定也能覆盖你的,try 一 try 不后悔 集成 ChatGPT 和 YouDao,自动翻译功能开箱即用 如果对你有用,可以给个 star 吗 i18n-plan i18n-plan中文/English i18n-plan 是一个简单的 i18n Javascript 插件,支持基于 Node.js 和浏览器的 App,并且应该适用于所有 Javascript 框架。 i18n-plan 能做什么 生成和更新本地语言资源,只需执行一个命令即可 提供导出和导入功能以便高效地管理本地语言资源。可以将本地语言资源导出为 .xls 文件,也可以通过导入 .xls 文件对本地语言资源进行更新。此功能可以让团队协作管理本地语言资源 目前已...

92.3k2023-06-062024-05-24
(译)使用 GPT 基于个人文档建立聊天机器人的逐步教程

原文地址:A step-by-step guide to building a chatbot based on your own documents with GPT 原文作者:Guodong (Troy) Zhao 译文出自:掘金翻译计划 本文永久链接:https://github.com/itcodes/gold-miner/blob/master/article/2023/A-step-by-step-guide-to-building-a-chatbot-based-on-your-own-documents-with-GPT.md 译者:tong-h 校对者: 与 ChatGPT 聊天是有趣且丰富的,过去一段时间我一直在与它闲聊并探索新的想法。但这些都是比较随机的用例,新奇感很快就减弱,尤其是当你意识到它可以产生幻觉的时候。 我们如何以更高效的方式使用它?随着 Ope...

72.2k2023-03-272023-03-30
(译) 全面刨析 CSS-in-JS

原文地址:A Thorough Analysis of CSS-in-JS 原文作者:Andrei Pfeiffer 译文出自:掘金翻译计划 本文永久链接:https://github.com/xitu/gold-miner/blob/master/article/2022/a-thorough-analysis-of-css-in-js.md 译者:tong-h 校对者: 全面刨析 CSS-in-JS比选择一个 JavaScript 框架更有挑战的是什么呢?你猜对了:选择一个 CSS-in-JS 方案。为什么?因为现在已经有 50 个以上的库,而且每个库都有独一无二的特色。 我们测试了 10 个不同的库(排列没有特定的顺序):Styled JSX,styled-components,Emotion,Treat,TypeStyle,Fela,Stitches,JSS,Goober...

174.8k2022-11-272023-03-19
Service Worker 缓存静态资源

最近有用到 Service Worker 和 CacheStorage 做离线缓存, 一方面是因为项目资源包着实大, 另一方面也是因为之前没有用缓存, 这也是需要的优化。相比起 Http 缓存或者 manifest 文件管理缓存(如果还有其他缓存方法, 欢迎提出来讨论!), Service Worker 完全由前端维护, 让前端对资源拥有了更大的控制权, 能自由的对资源进行增删改, 另一方面也是因为自己没用过。也碰到了一些问题, 查阅了一些资料, 希望对你有帮助。 Service Worker附上 MDN 文档 ,还有一个 Demo 除了 MDN, Google 的文档也是很有帮助的 Service Worker 的特点 是一个浏览器与网络之间的拦截器, 通过 Service Worker 你可以拦截任何网络请求 必须在 Https 下运行, 但 localhost 作为开发...

71.7k2022-07-092024-02-09
(译)使用 Stream 构建高性能的 Node.js 应用

原文地址:Use Streams to Build High-Performing Node.js Applications 原文作者:Deepal Jayasekara 译文出自:掘金翻译计划 本文永久链接:https://github.com/xitu/gold-miner/blob/master/article/2022/use-streams-to-build-high-performing-nodejs-applications.md 译者:tong-h 校对者:CarlosChen zaviertang 使用 Stream 构建高性能的 Node.js 应用当你在键盘上输入字符,从磁盘读取文件或在网上下载文件时,一股信息流(bits)在流经不同的设备和应用。 如果你学会处理这些字节流,你将能构建高性能且有价值的应用。例如,试想一下当你在 YouTube 观看视频时,你...

123.1k2022-03-252022-11-24
(译)CSS 是魔法, 是时候试试 3D 了

原文地址:Effects of Too Much Lazy Loading on Web Performance 原文作者:Yasas Sri Wickramasinghe 译文出自:掘金翻译计划 本文永久链接:https://github.com/xitu/gold-miner/blob/master/article/2022/effects-of-too-much-lazy-loading-on-web-performance.md 译者:tong-h 校对者:Isildur46 xionglong58 过度使用懒加载对 Web 性能的影响 如今为了提升应用性能,懒加载被广泛使用于 Web 应用中。它帮助开发者减少网站加载时间,节省流量以及提升用户体验。 但懒加载的过度使用会给应用性能带来负面影响。所以在这篇文章中,我会详述懒加载对性能的影响,来帮助你理解应该何时使用它。 什...

61.8k2022-03-142022-06-26
(译)双向绑定会使你的 React 代码更棒

原文地址:Two-way binding will make your React code better 原文作者:Mikhail Boutylin 译文出自:掘金翻译计划 本文永久链接:https://github.com/xitu/gold-miner/blob/master/article/2022/.md 译者:tong-h 校对者:nia3y 双向绑定会使你的 React 代码更棒 双向绑定可以让两个实体间保持同步,比如:应用程序的数据层和视图层。React 提供了开箱即用的单向绑定的 api,开箱即用。当我们想要修改 state 时,我们需要显式的调用更新回调: 1234567const UserName = ({ name, onChange }) => { return <input onChange={onC...

38962022-01-272022-02-23
SVG 路径动画

简单百搭普普通通平平无奇 SVG 路径动画优化网站效果, 如何实现一个 SVG 进度条动画以及虚线走马灯动画 我习惯于使用 canvas 来做一些动画效果,数据展示或者图片处理之类的。SVG 和 Canvas 的功能类似,但应用场景又完全不同,各有各的特点。最近有用到一些 SVG,补补~~~ Canvas 和 SVG 的区别 canvas 以像素点为单位,而 SVG 是矢量图形,即放大图像不会失真,不依赖分辨率,对于 ui 同学来说大概就是 photoshop 与 illustrator 的区别了。 canvas 依赖分辨率,适合图片处理,可以做一些图片裁剪合成之类的功能。 SVG 放大不失真的图形展示当然很好,但矢量图之所以不会失真是因为保存了图形的线条和图块,所以渲染速度会和图形的复杂度成正比,这也表示 svg 非常适合用来绘制扁平化的图像,比如常用的 icon 或者扁平风格的...

41.2k2021-12-132022-05-13
notes_graphic

three.jsPBRanti-aliasing 反锯齿multi-sample anti-aliasing 多重采样, this is a build-in WebGL method, depending on GPU render1234const renderer = new WebGLRenderer({ antialias: true, // turn on anti-aliasing, to blur the edges of square pixels. }); renderer.physicallyCorrectLights = true; // camera two types of camera perspective projection 透视投影, the area in between the Near Clipping P...

35552021-11-172024-02-09