cosine - 前端人の日常频道

#前端 #优质博文 #javascript #性能优化 Optimizing Javascript for fun and for profit antfu 推荐 - 「关于使用JavaScript进行微优化的非常酷的交互式博客文章，作者romgrk」 AI 摘要：这篇文章总结了多种优化 JavaScript 性能的技巧。首先强调了避免不必要的工作，如使用 memoization、懒加载等技术。接着讨论了避免字符串比较、优化对象结构以保持代码效率、减少数组和对象方法的使用、避免间接引用、优化内存访问以减…

#博客更新
优化 JavaScript 的乐趣和好处【译文】
是我写的这篇文章的翻译，挺用心的ww

Hexo博客链接 🔗 https://ysx.cosine.ren/optimizing-javascript-translate
xLog链接 🔗 https://x.cosine.ren/optimizing-javascript-translate
RSS订阅 📢 https://x.cosine.ren/feed/xml

#前端 #优质博文 #javascript #性能优化
Optimizing Javascript for fun and for profit
antfu 推荐 - 「关于使用JavaScript进行微优化的非常酷的交互式博客文章，作者romgrk」

AI 摘要：这篇文章总结了多种优化 JavaScript 性能的技巧。首先强调了避免不必要的工作，如使用 memoization、懒加载等技术。接着讨论了避免字符串比较、优化对象结构以保持代码效率、减少数组和对象方法的使用、避免间接引用、优化内存访问以减少缓存未命中，以及减少大对象的使用等方法。文章也提到了 eval 的合理使用和字符串操作的优化。这些技巧旨在提高代码运行速度，但作者也提醒读者，在追求性能优化时，应先进行基准测试，以确保所做的优化是有效且必要的。

via romgrk

#碎碎念 #趣站 #webGL
提前体验小米 su7 神里绫华冰系痛车（x）真牛啊
https://gamemcu.com/su7/

【让所有人都能上手体验小米SU7！-哔哩哔哩】 https://b23.tv/ohd8fix

Gamemcu

su7

xiaomi su7 made by gamemcu

#优质博文 #前端 #工程化 #ws #websocket
站点的实时人数是如何实现的？

AI 摘要：这篇文章介绍了如何实现网站实时在线人数的功能，包括当前正在阅读某篇文章的人数。作者选择了 WebSocket技术，使用 Socket.IO （WebSocket 的上层封装） 进行实现。实时人数统计基于 WebSocket 连接数，但为避免重复计数（同一用户打开多个页面），采用了在客户端生成唯一 SessionId 的方法，并将其存储在 LocalStorage 中。服务端则通过传递的 SessionId 进行去重，确保在线人数的准确性。此外，文章还详细讨论了如何利用 Socket.IO 的 Room 功能实现文章实时阅读人数的统计和读者阅读进度的实时展示。所有实现代码均已开源。

via innei

cn.innei.ren

站点的实时人数是如何实现的？

经常光顾我站的读者应该都看到过我站底部有显示当前在线的人数。在不久之前我还为其增加了显示当前正在阅读具体哪篇文章的人数排行，并且在具体的某篇文章左侧增加时间线，用于展示当前所有正在阅读此文章的读者阅读进度。 如果你看过我站的开源项目的话大概知道此站是由 Mix Space 驱动的，既然已经需要

#优质博文 #course #前端 #动画
Amazing Button Click Animation With Framer Motion's New Animation Sequences

无意中发现的挺好的交互式 framer-motion 教程，介绍了如何使用Framer Motion的新序列动画功能创建点击按钮时的精彩动画效果。从构建一个基础按钮开始，逐步添加动画，包括让按钮上的文字逐个上移，以及添加星星飞溅效果。通过使用Framer Motion的useAnimate()钩子和动画序列，可以实现复杂的动画效果，如文字逐个动画和按钮的弹跳效果。

www.frontend.fyi

Amazing Button Click Animation With Framer Motion's New Animation Sequences – Frontend.FYI

#tools #资源推荐 #npm
补充：群友写的 izon 可以看一个 GitHub 仓库有哪些仓库依赖它，也可以作为一种选择指标

GitHub

GitHub - hyoban/izon: Find a GitHub repository's dependents.

Find a GitHub repository's dependents. Contribute to hyoban/izon development by creating an account on GitHub.

#优质博文 #前端 #tools #资源推荐 #npm
7 Tools to Choose the Right NPM Package

摘要：这篇文章介绍了7个免费工具，帮助开发者比较并选择最适合项目的NPM包。这些工具包括：

1. GitHub/GitHub Insights 提供包的受欢迎程度和维护情况的指标
2. BundlePhobia 估计包的性能影响，提供了有趣的指标，如 Bundle size （缩小和缩小+Gzip）和 Download time （3G和4G）。
3. NPM Trends 展示NPM包的下载趋势和GitHub统计数据，可同时比较很多个包
4. NPM Compare 提供更详细的多个包比较，如 Version Average ， Maintainers 的数量， Open issues 的数量和 Monthly Downloads 的数量，最后给出总分。
5. Moiva 结合多个数据源（NPM，Github，Snyk，BundlePhobia）的比较工具
6. Snyk Advisor 测量包的健康状况，从 Popularity, Maintenance, Security, Community 四个维度
7. Openbase 提供包的综合评价，此外，Openbase 提供了替代建议包和相关的教程视频。(但是这个工具没了，悲，可以用 kandi 替代)

这些工具的数据可以结合使用，以全面评估每个包的健康状况

via Medium Alexis Regnaud

Medium

7 Tools to Choose the Right NPM Package

A list of 7 free tools that will help you compare and choose the best NPM package for your project.

#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 294 期）：崖门海战的感想

1. Web 组件如何适配 JS 框架（英文） 📓 Web 组件是浏览器原生的组件格式，本文介绍怎么将这种格式用于各种 JS 前端框架。
2. CSS 的悬挂标点属性（英文） 📓 如果标点正好在行首或行尾，是否要跟上下文对齐？这就要用到 CSS 的 hanging-punctuation 属性。 #css #小知识
3. Frogmouth 🧰 命令行的 Markdown 阅读器。
4. SSH3 🧰 使用 QUIC + TLS 重新实现的 SSH 加密登陆工具，支持 UDP 端口转发。
5. X-Hiring 🧰 每日自动抓取于 V2EX 和电鸭社区的招聘信息，使用 Google AI 提取摘要。（@hehehai 投稿）
6. pear-rec 🧰 一个在线的 GIF 编辑工具，也可以对 MP4 视频进行解析导入。（@027xiguapi 投稿）
7. Vmail.dev 🧰 使用 Cloudflare email worker 实现的临时邮箱服务，可以自己部署。（@yesmore 投稿）
8. VidHub 🧰 苹果设备的视频播放器，可以管理和播放本地、网盘、NAS、Cloud Drive 来源的视频。（@julycamera 投稿）
9. KanjiVG 🧰 这个项目提供汉字的 SVG 文件下载，可以显示笔划动画。
10. DesignSystemHunt.com 🧰 这个网站收集各种设计系统（design system），已经有130多个。

「有一段时间，我使用 Gentoo（一个需要自己从头编译源码的 Linux 发行版）。当我的宿舍在寒冷的冬夜里太冷时，我就会在它上面重新编译 Open Office。

-- Hacker News 读者」 😀

Jakelazaroff

Web Components Eliminate JavaScript Framework Lock-in | jakelazaroff.com

Web components can dramatically loosen the coupling of JavaScript frameworks. To prove it, we're going to do something kinda crazy: build an app where every single component is written in a different JavaScript framework.

#优质博文 #前端 #css #小知识
CSS initial-letter属性，嗯……也就这样吧

AI 摘要：这篇文章向我们展示了CSS initial-letter 属性的功能和用法。initial-letter 属性主要用于设置首字母可以占据的文本行数，以改善首字母放大时的多行排版。这个属性支持 1~2 个大于 0 的数值，如果只设置了一个值，那么第二个值会默认等于第一个值。（例如 initial-letter:3 等同于 initial-letter:3 3，也就是占据3行下沉3行）然而， initial-letter 属性有一些限制：它只能应用在 ::first-letter 伪元素中，在中文环境下并没有太大的实用性，支持的 CSS 属性也相对有限，无法满足精确定位的需求。因此，作者认为这个属性的实用价值有限，前端开发者了解基本知识即可。

via zhangxinxu

#css #前端 #demo #小知识 #codepen

CSS Tip 📖

Use CSS shape-outside to wrap text around shapes

.column--left .shape {
  float: right;
  shape-outside: circle(100px at 100% 50%));
}

jhey 分享了使用CSS shape-outside 属性来围绕形状包裹文本的技巧。通过在两列布局中为每一列设置一个半圆形状，可以实现复杂的文本环绕效果。此方法要求手动分割内容到列中，不支持与 column-count 属性协同工作。尽管有这样的限制，但这种方法适用于某些登陆页等场景，是2024年中浮动布局(float layout)的一个罕见但有效的应用案例。

Origin Post | Codepen

#前端 #资源推荐 #tools #vscode #tailwind #css

vscode 插件推荐：Tailwind CSS ClassName Highlight

vscode插件，高亮有效的 Tailwind 类名（下划线），可以跟非 tailwind 区分开来

Github 地址

#资源推荐 #tools #AI #在线工具
AIRemover 免费 AI 图片背景在线清除工具

AI 摘要： AIRemover 是一款完全免费的在线AI背景去除工具，能够通过智能AI技术模型快速清除图片中不需要的背景。这个工具自动识别前景和背景，无需手动干预，仅需上传图片即可。目前，它能够快速识别人物、商品和动物三种类型的照片，处理完成后用户可以查看前后对比，并下载 PNG 格式的结果图片，而且使用这个工具不需要注册或登录​

via Boss设计

www.bgremove.club

bgremove.club - This website is for sale! - bgremove Resources and Information.

This website is for sale! bgremove.club is your first and best source for all of the information you’re looking for. From general topics to more of what you would expect to find here, bgremove.club has it all. We hope you find what you are searching for!

#优质博文 #前端 #工程化
2024 年，该如何写一个全面兼容的 NPM 库

AI 摘要：这篇文章介绍了如何创建一个全面兼容的 NPM 库，包括 ESM/CJS 格式、不同版本的 Node.js，以及TypeScript 的兼容。作者通过实例展示了从初始化项目、选择打包工具（Vite），到解决特定技术挑战，如保留 "use client" 指令、生成类型定义文件 .d.ts ，以及在 package.json 中配置不同导出格式的过程。此外，还讨论了如何通过使用 rollup-plugin-preserve-directives 和 vite-plugin-dts 插件解决打包和类型声明的问题，以及如何针对旧版本 Node.js 处理非索引导出的兼容性问题。

via innei

innei.in

2024 年，该如何写一个全面兼容的 NPM 库

最近，把 rc-modal 做成了一个库。写代码倒是不难，无非就是把原本的代码封装抽象一下。倒是发包，和作为使用者如何使用这个包难住了。 首先，我们知道现在一个 npm 包如果不做 Pure ESM 的话，你需要考虑兼容 CJS/ESM，node 老版本和新版本（吃不吃 package.json

#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 293 期）：一周是一年的2%

1. VS Code 的垂直 Tab 页（英文） 📓 本文介绍如何在 VS Code 编辑器里面，放置一个垂直的边栏，进行标签切换。
2. LapisCV 🧰 基于 Obsidian / Typora 编辑器的 Markdown 简历模板，可以导出 PDF 文件。（@YiNNx 投稿）
3. git-diff-view 🧰 一个 React/Vue 组件，用来显示 git diff 的结果，类似于 GitHub 的样式。
4. AI 时间线 🧰 一个有意思的网站，输入一个关键词，自动生成该词的时间线，上图是输入"github"的生成结果，它的代码仓库在 GitHub。（@zhugezifang 投稿） #趣站
5. Earthworm 🧰 一个开源的 Web 程序，通过连词造句的方式，经过不断重复练习英语，线上体验。（@cuixiaorui 投稿）#趣站
6. Riffusion 🧰 一个免费的 AI 工具，给出一段提示，它会生成相应的歌曲，并且是带有歌词、人声演唱的。 #AI
7. TypeScript 互动教程📓 通过一个个小练习，讲授 TypeScript 语法。#typescript
8. IP 信息查询合集 📓 这个仓库收集可以查询 IP 信息的免费网站。

Weberdominik

Vertical tabs in Visual Studio Code

With vertical tabs it's possible to have an overview over much more open files. Here's how to get it in VS Code.

#优质博文 #前端 #css #tailwind
unocss 究竟比 tailwindcss 快多少？

AI 摘要：文章主要对比了 unocss 和 tailwindcss 两种原子化 CSS 引擎的性能。unocss 的快速性能主要归因于其不需要解析 CSS 抽象语法树，直接通过正则表达式从内容中提取 token 生成样式。根据官方最新的测试结果，unocss 的速度比 tailwindcss 快 3.7 倍。但是当为两者增加解析 CSS 抽象语法树的负重后，作为 vite 插件使用的 unocss 的速度是 tailwindcss 的 2.52 倍。文章强调，最终采用哪种技术取决于项目需求和技术生态。期待 unocss 和 tailwindcss 它们之间相互卷起来。

via 掘金 icebreaker

juejin.cn

unocss 究竟比 tailwindcss 快多少？ - 掘金

unocss 究竟比 tailwindcss 快多少？ 前言 我们知道 unocss 很快，也许是目前最快的原子化 CSS 引擎 (没有之一)。 unocss 解释它为什么这么快的原因，是因为它不用去