#优质博文 #前端 #状态管理 #jotai
Jotai Tips
作者是三个状态管理库 Zustand、Jotai、Valtio 和 React Server Components 框架 Waku 的维护者。

AI 摘要：这篇文章汇集了多个关于使用 Jotai 状态管理库的技巧。主要内容包括：如何创建表现类似原始类型的原子（atoms）、在 atom 中提前 return、处理 Promise 值、在 React 之外获取/设置 atom 值、优化 React 渲染、具有本地存储的 atom 等。文章通过简明的提示形式，为开发者提供了如何在不同场景下有效使用 Jotai 的方法，旨在帮助开发者更灵活地管理 React 应用的状态。

via DAISHI KATO'S BLOG twitter @dai_shi

Daishi Kato's blog

Jotai Tips

Introduction I’ve been sharing tips about Jotai on Twitter, calling them “Jotai tips.” As tweets tend to get lost over time, I thought it would be good to have all these tips in one place.
So, here we go.
Tip 1: Primitive-like atoms Jotai tips: Primitive…

#优质博文 #DNS #计网 #分流
我有特别的 Surge 配置和使用技巧

AI 摘要：本文介绍了作者个性化的 Surge 配置方法和技巧，以应对复杂的网络需求和提升 Surge 的功能使用。作者详细解释了 DNS 解析的策略，特别是如何使用 Fake IP 和域名规则避免 DNS 污染。此外，文中还提供了广泛的规则和规则集，用于流量分流、广告拦截、隐私保护以及钓鱼和诈骗域名拦截。作者还特别维护了一些针对特定应用如搜狗输入法的规则，以及提供了广泛的域名和 IP 规则集，适用于各种网络环境和需求，包括对广告和追踪的严格拦截，同时保留了对核心服务如 Telegram 和流媒体服务的支持。整体上，文章提供了一个高度定制的 Surge 配置框架，旨在提升网络效率和用户的数据隐私安全。

via Sukka

Sukka's Blog

我有特别的 Surge 配置和使用技巧 | Sukka's Blog

我使用 Surge Mac 作为网络核心有一段时间了。虽然 Surge 官方提供了一份「中国区用户推荐最小配置」，但是为了发挥 Surge 全部潜力的话、彻底值回 Surge 的售价、实现我的复杂需求，我添加了许多自定义的配置。

#前端 #资源推荐 #动画 #tools #交互体验
Barba.js 是一个小巧（经过最小化和压缩后仅 7kb ）且易于使用的库，可帮助您在网站页面之间创建流畅、平滑的过渡。 它能让你的网站像 SPA（单页面应用程序）一样运行，帮助减少页面之间的延迟，最大限度地减少浏览器的 HTTP 请求，增强用户的网络体验，使得网站能够拥有更具视觉冲击力和个性化的浏览体验。

官网的展示效果非常惊艳！

via Frontend Focus

barba.js

Create badass, fluid and smooth transition between your website's pages.

#优质博文 #资源推荐 #前端 #rss
12 Useful JavaScript Newsletters
已经全部订阅了，rss真是个好东西喵

AI 摘要：这篇文章列举了12个非常有用的 JavaScript 新闻简报，为软件工程师、安全专家和 JavaScript 应用开发者提供了极佳的资源。其中包括 JavaScript Weekly、Jscrambler Newsletter、JavaScript Kicks、Node.js Weekly 等，每个新闻简报都有其独特的重点，如客户端安全、最新的JS框架更新、React 和 Vue 的使用技巧等。这些新闻简报不仅涵盖教程、新闻、工具和工作机会，还包括代码挑战、实用技巧和行业动态。总的来说，这些简报为保持 JavaScript 知识的最新性提供了宝贵资源。

via jscrambler

Jscrambler

12 JavaScript Newsletters to Subscribe: The List You Need

12 JavaScript newsletters to get smarter about the JS ecosystem. Subscribe if you are a security professional or a JavaScript-based app developer.

#优质博文 #前端 #react #css #rsc
CSS in React Server

AI 摘要：本文探讨了 React Server Components (RSC) 对现有 CSS-in-JS 库，特别是 styled-components 和Emotion 的兼容性挑战。由于 RSC 在服务器端执行，而不传输到浏览器，这与依赖客户端生命周期的 CSS-in-JS 库形成了冲突。文章分析了如 Linaria 和 Pigment CSS 这类零运行时 CSS-in-JS 库如何在编译时处理样式，提供了与 RSC 兼容的替代方案。这些库避免了运行时处理，改为在部署前的构建步骤中处理 CSS，从而与 RSC 集成。

「但是你不能不打几个鸡蛋就做一个煎蛋。RSC 是对 React 工作方式的根本性改变，我们一直在使用的一些库和工具已经打乱了。😅」笑死我了

via Josh W Comeau

Joshwcomeau

CSS in React Server Components • Josh W. Comeau

You can’t make an omelette without cracking a few eggs, and when the core React team unveiled their vision for the future of React, some of my favourite libraries got scrambled 😅. In this blog post, we’re going to explore the compatibility issues between…

#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 296 期）：xz 后门的作者 Jia Tan 是谁？

1. 如何将 Caddy 作为反向代理（英文） 📓 一篇初学者教程，介绍如何用 Caddy 架设反向代理服务器，它的设置比 nginx 简单，而且自动生成和更新 HTTPS 证书。 【本篇文章介绍的挺多的，其实直接看 caddy 的官网文档也比 nginx 简单多了】
2. Suno AI 🧰 Suno AI 是一个"文生音乐"的服务。网友的这个工具帮助你生成它的提示词，可以调整各种细节。（@Lcorinst 投稿）#AI
3. 3DP.ing 🧰 一个 3D 打印模型的搜索引擎，特点是使用图片搜索。（@wangasa 投稿）
4. 1000UserGuide 📓 该网站整理了300多个免费推广渠道，包括网站、论坛、网址导航、产品目录等，帮助独立开发者推广产品。（@naxiaoduo 投稿） #独立开发
5. DashPress 🧰 一个开源工具，只需执行一个命令，就会自动分析数据库结构，生成管理后台，号称不用写代码。
6. OneUptime 一个开源的服务可用性检查工具，记录服务的健康状态，如果发现服务下线，立刻发送通知，可以替代 StatusPage.io。
7. 如何生成键盘输入统计看板（英文） 📓 本文介绍使用一个 Python 脚本，统计用户在当前计算机按下了什么键。（@tisonkun 投稿）

Suno

Suno | AI Music

Create stunning original music for free in seconds using AI. Make your own masterpieces, share with friends, and discover music from artists worldwide.

#优质博文 #前端 #debug #javascript
专业前端都这么使用console?

AI 摘要：本文主要介绍了 JavaScript 中 console 对象的高级用法，以提高前端开发调试效率。首先，介绍了 console.time() 和 console.timeEnd() 用于计算代码块的执行时间。接着，通过 console.profile() 和 console.profileEnd() 分析复杂逻辑的性能瓶颈。此外， console.count() 用于追踪特定代码块或函数的执行次数，而 console.trace() 帮助开发者理解代码执行流程，通过输出调用堆栈。 console.table() 则以表格形式清晰展示对象或数组数据。 console.group() 和 console.groupEnd() 允许开发者将输出信息进行分组，以便更好地组织和理解。最后，文中还讨论了 console.log() 的进阶用法，如支持自定义CSS样式输出和格式化输出内容，这些占位符的使用能使输出信息更加结构化和清晰。这些高级用法不仅仅限于调试，还可以在性能分析和代码优化中发挥重要作用。

via 微信公众号 JS每日一题

微信公众平台

专业前端都这么使用console?

console对于前端人员来讲肯定都不陌生，相信大部分开发者都会使用console来进行调试，但它能做的绝不

#前端 #优质博文
利用 SharedWorker 实现跨页面单例 WebSocket

AI 摘要：这篇文章介绍了如何在 Next.js 项目中使用 SharedWorker 和 WebSocket 创建跨页面的单例连接。作者首先探讨了 WebSocket 连接可能给服务器带来的压力，并提出了通过 SharedWorker 共享 WebSocket 实例以减轻这种压力的解决方案。文中详细讲解了 SharedWorker 的基本使用方法，并展示了如何将 WebSocket 连接的代码迁移到 SharedWorker 中，以及如何在页面间共享这个 WebSocket 实例。最后，作者还提供了详细的代码示例，包括如何在 Next.js 中实现和使用这种模式。

via innei

cn.innei.ren

利好 SharedWorker 实现跨页面单例 WebSocket

在之前的文章中，我详细的介绍了站点的实时人数是如何实现的？，在方案中，我留下了一个悬念，如何使用 SharedWorker 在页面之间共享 Socket 实例，实现跨页面单例 WebSocket。 动机 探索这个问题的背景是无意间在知乎看到了 WebSocket 的一个问题，其中有回答提到 We

#前端 #优质博文 #css #svg
不一样的SVG！SVG在 CSS 中的应用

AI 摘要：本文介绍了SVG在CSS中应用的高级技巧，尤其是如何实现自适应尺寸和渐变边框。文章首先指出SVG通常通过软件生成，并展示了如何在Figma中创建渐变边框。随后，作者发现直接导出的SVG无法自适应尺寸，因此提出了将SVG尺寸和坐标值设置为百分比的解决方案。为了解决圆角描边显示不完整的问题，提出使用CSS的calc函数调整SVG的尺寸和位置。最后，展示了将改造后的SVG直接应用于HTML和CSS中，实现自适应尺寸和虚线渐变圆角边框动画的效果。

via 公众号 前端侦探

微信公众平台

不一样的SVG！SVG在 CSS 中的应用

介绍一些你可能没用过的SVG小技巧。SVG 渐变边框在 CSS 中的应用