Skip to content

视野修炼第86期 | CSS 马里奥

欢迎来到第 86 期的【视野修炼 - 技术周刊】,下面是本期的精选内容简介

​也推荐大家关注一下最后的推荐内容(周刊的主要内容来源渠道)

下面开始本期内容的介绍ღ( ´・ᴗ・` )比心

🔥强烈推荐

1. TTSMaker - 在线语音合成工具

本周被安利的工具,可用于给视频生成配音。

试了一下,效果挺好的,能找到很多短视频常用的配音(小美小帅)。

速度很快,完全免费,可商用!

2. js 读取文件速度对比

作者的测试用例:重复读取同一个文件 50,000 次。文件相对较小(略大于一千字节)。

emm,笔者最近也在做博客的构建优化,印象中都是推荐用 fs.promise 而不是 readFileSync,感觉也可以测试一下这块 🤔,看看哪种方式最优。

Bun 确实快得飞起。

3. 仅使用 CSS 实现的一个马里奥小游戏

只能说非常 🐂 🍺 。

🔧开源工具&技术资讯

4. widget-qrcode - 二维码生成组件

基于 web component 实现,使用比较简单。

html
<widget-qrcode value="[二维码内容]"></widget-qrcode>

5. 使用 npm 分发的开源字体合集

当然也有6-7款中文的字体,

6. jessquery - jQuery 的轻量级平替方案

更小的尺寸,更简单的进行 DOM 操作,与 jQuery 类似的体验,TypeScript 支持。

7. Bau.js - 极小的响应式 WEB 框架

无 JSX、无template、五虚拟 DOM、CSS-in-JS。

可以看一下使用 Demo。

emm,书写上可能还是没有 Vue/React 这么舒服,难受了开发者 !

📚 教程&文章

8. 只使用 span 可以做些什么?

挑了3个比较实用的例子

tableClick 自增动态时间展示

9. 5个提升网站访问性能的技巧

  1. 使用静态 HTML:考虑 SSG 生成页面,按需使用 SSR;
  2. 图像优化:优先使用 webpavif
  3. 使用系统字体:无需额外网络下载,无页面闪烁问题;
  4. 移除阻塞渲染的资源:非首屏需要的静态资源;
  5. 少用js:尽可能使用 css 替代动画。

🤖AI工具&资讯

10. ollama - 本地运行大模型

一键运行 llama3

sh
ollama run llama3

简单体验了一下翻译,效果还可以。

支持 REST API 调用,也可以配合一些图形化工具调用,比如 chatbox。

笔者电脑是 Mac mini M1 2020款,跑起来还是挺流畅的。

⭐️强力推荐关注