Yang

Dev Explorer Weekly.029

0 views
2 mins

Meta SEO inspector

SEO 检查员,一款 Chrome 浏览器插件 META SEO inspector 轻松检查网页中的元数据,发现问题并获得修复建议。

该扩展主要针对需要验证其网站HTML以遵循Webmasters’ Google指南的Web开发人员,但也适用于对通常不可见但可能揭示有趣站点属性的任何页面内容感兴趣的人。 image.png

Shiki 式

Shiki 一个美丽而强大的语法高亮器 image.png

Producthunt 2023 金猫奖

Hall of Fame - Golden Kitty Awards Winners | Product Hunt image.png

UIColors

一个用于快速生成 [[TailWindCSS]] 主题色的网站 image.png

Keep Screen On

Keep Screen On - A page to prevent your device from sleeping

一个有意思的网站,这个网站只有一个按钮,打开按钮(如下图)并保持网站所在浏览器tab,就能阻止屏幕熄屏,对PC、Mac、Android、iOS 均有效 实现上,如果浏览器支持 Wake Lock API ,网站会调用 navigator.wakeLock.request(“screen”) 来请求屏幕唤醒,这样能一直保持不熄屏 如果不支持该API,网站会在后台播放一个无声的短视频来模拟用户活动,从而防止屏幕休眠。来源@卡颂

这个网站使用的是 NoSleep.js: Prevent display sleep and enable wake lock in any Android or iOS web browser. 这个包 image.png

Github Action Graphs

一种更快、更简单的方式,可以在几分钟内可视化创建和执行工作流程,而无需使用YAML。该应用是一个 [[VSCode]] 的扩展插件,可以直接在 [[VSCode]] 中使用

传送门:Actionforge

image.png

Fuse.js

GitHub - krisk/Fuse: Lightweight fuzzy-search, in JavaScript Fuse.js 是一个使用 JavaScript 编写的功能强大、轻量级、零依赖性轻量级模糊搜索库。Fuse.js 支持所有兼容 ES5 的浏览器(不支持 IE8 及以下版本)。 image.png

Astro VTBot

[[Astro]] View Transitions 效果集合,项目包含许多 [[Astro]] 使用 [[View Transitions API|View Transitions]]事件实现各种效果的示例,而且还提供了一些可重用的组件。最重要的是包含一份作者学习和处理[[View Transitions API]]时的笔记,笔记记录了一些使用方法和技巧,想学习 [[View Transitions API]] 的会有很大帮助。 仓库: GitHub - martrapp/astro-vtbot: The 👜 Bag of Tricks ✨ for Astro’s View Transitions. ⭐️ Please star to support this work! 演示站点:Bag of Tricks for Astro’s View Transitions | vtbot 笔记:Jotter | vtbot image.png

Tailwind Loading Skeletons

粘贴您的 HTML 代码,此工具将生成 Tailwind 等效项,用于为您的 UI 生成动画“加载骨架”。 来源:Web Tools Weekly | A Weekly Newsletter for Front-end Developers image.png

1000+ Themes for shadcn/ui

一个生成器和目录,可让您探索 shadcn/ui 的 10,000 多个主题。您可以随机化 UI 颜色、保存调色板、切换深色模式以及将标记复制为 CSS 变量。 来源:Web Tools Weekly | A Weekly Newsletter for Front-end Developers image.png

Tailwind button

Tailwind CSS button collection - Click-to-copy integration 使用 Tailwind 构建的按钮单击和悬停效果库,可以轻松复制/粘贴到现有的 Tailwind 项目中。

image.png