视野修炼-技术周刊第33期(1)

简介: 🔥强烈推荐1 phind 开发者专属的搜索引擎Tip: 需要“魔法”才能访问

🔥强烈推荐

1 phind 开发者专属的搜索引擎

Tip: 需要“魔法”才能访问

image.png

试用了一下还是不错的,会自动总结检索文章中的内容,并把内容来源都详细列举了出来(比baidu的开发者搜索强不少)

下面看2个案例

① 实现毛玻璃效果

 image.png

 image.png

② 查看端口占用情况

 image.png

2 magicast - 优雅的AST操作工具

antfu 大佬参与的又一佳作

基于 recastbabel 实现,允许以编程方式修改 JavaScriptTypeScript 的源代码,操作AST更加优雅

来看看官方示例

config.js:

export default {
  foo: ["a"],
};

 修改源码,往foo里插入一个值b

import { loadFile, writeFile } from "magicast";
const mod = await loadFile("config.js");
// 就像常规的对象插值一样
mod.exports.default.foo.push("b");
await writeFile(mod);

更新后的 config.js:

export default {
  foo: ["a", "b"],
};

这种库可以用到一些需要修改源码的插件中,或者自动化重构代码的场景(需要操作AST)

3 Warp - 21世纪的终端工具

最近被安利的一个Terminal工具(还是挺好用,但目前只支持Mac)

打开速度非常的快(完全基于Rust构建,不参杂WEB技术)

我们先看看官网

 image.png

再看看有哪些 "开箱即用的特色功能"

① 编辑体验

 image.png

支持鼠标在任意位置操作,也可通过快捷键 快速的跳转与内容选取

② 搜索与补全

 image.png

支持内容搜索,开箱即用的命令补全与纠错

③ AI加持

 image.png

image.png

每日免费100次的 chatGPT 提问

了解更多功能推荐去看官网的介绍视频

🔧开源&技术资料

4 vue-reuse-template - 允许模板里定义可重用的模板

antfu 的又一花活,类似于使用 defineComponent 直接定义组件

大概用法如下

<script setup>
import { createReusableTemplate} from 'vue-reuse-template'
const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
</script>
<template>
  <DefineTemplate v-slot="{ data, msg, anything }">
    <div>{{ data }} passed from usage</div>
  </DefineTemplate>
  <ReuseTemplate :data="data" msg="The first usage" />
  <ReuseTemplate :data="anotherData" msg="The second usage" />
  <ReuseTemplate v-bind="{ data: something, msg: 'The third' }" />
</template>

目前这个能力已被集成到 VueUse v10 里

5 深度使用html2canvas的经验总结

"本文主要关注 html2canvas 的前端生成方案,作者把在其中学习到的思路和踩坑经验和大家分享下,帮助大家上线顺利,享受美好的周末"

6 Node.js事件循环可视化指南

 image.png

视野修炼-技术周刊第33期(2):https://developer.aliyun.com/article/1395134

相关文章
|
7月前
|
Web App开发 人工智能 JSON
视野修炼-技术周刊第54期
🔥强烈推荐 1. Node.js 16 EOL EOL(end of life) 2023 年 9 月 11 日,Node.js 16 将停止维护,推荐大家切换到 Node.js 18 使用(EOL 2025-04-30) 官推下面很多都在推荐 Bun 了 😄
|
7月前
|
存储 人工智能 前端开发
视野修炼-技术周刊第61期
🔥强烈推荐 1. 2023年🧑‍💻工程师的 Mac 工具箱 Arc - 浏览器, Warp - 终端, Raycast - 启动器,Orbstack - 容器,Setapp - 软件订阅,CleanShotX - 截屏,OBS - 录屏推流,Gifox - Gif图制作, 1Password - 密码管理器,Bartender - 菜单栏管理,Downie - 视频下载,IINA / Infuse - 视频播放器,iRightMouse - 鼠标右键增强,PopClip / Bob - 鼠标工具 Arc 和 Warp 目前笔者一直在用,其它的看着也还不错,按使用场景可以试试 作者:粥里
|
7月前
|
JavaScript 前端开发 API
视野修炼-技术周刊第55期
1. disable-devtool - 一行代码禁用 devTool 如题可以用来防止网站被开发者工具调试,打开开发者工具后,页面会自动重定向到指定的页面
|
7月前
|
前端开发 JavaScript 安全
视野修炼-技术周刊第40期
🔥强烈推荐 1. 从浏览器到 Node.js 环境,一文彻底搞懂前端沙箱 文章摘要: 本文介绍了什么是前端沙箱,以及通过浏览器和Node.js环境来实现前端沙箱的原理和方法。同时还对代码注入的安全问题、with关键字、eval()和Function方法等进行了详细的讲解,最后也提到了Node.js建立安全的隔离沙箱的难点和解决方案。 文章总结: 本文深入浅出地介绍了前端沙箱的概念和实现方式,同时还详细讲解了相关的安全问题和注意事项。通过学习本文,读者可以更好地了解前端沙箱的重要性及其应用场景,同时也可以提高代码安全性。
|
7月前
|
人工智能 缓存 资源调度
视野修炼-技术周刊第41期
🔥强烈推荐 1. 使用纯CSS实现噪点效果 张鑫旭大佬的文章,在简单介绍了canvas和svg的实现之后,详细介绍了CSS版本的实现 如下所示代码也比较简单
视野修炼-技术周刊第41期
|
7月前
|
Web App开发 人工智能 Rust
视野修炼-技术周刊第56期
🔥强烈推荐 1. Vite 的现状与未来展望 10 月 5 日 - 6 日,ViteConf 2023 在线举行,尤大发表了题为《The State of Vite》 的演讲,有如下几个值得关注的点: Vite 5.0 目前处于测试阶段(beta):停止支持已经 EOL 的 Node.js 版本;推荐使用ESM 🔥 Rolldown(使用 Rust 开发的 Rollup 替代品):Vite 团队正在研发 Rolldown,同时与 Rspack 团队合作开发一些共享的底层工具和功能
|
7月前
|
人工智能 Rust JavaScript
视野修炼-技术周刊第62期
🔥强烈推荐 1. Vite5.0 发布! 11 月 16 日,Vite 5.0 正式发布 该版本主要关注API优化,去除过时功能,并解决一些长期存在的问题。 使用了Rollup 4,这在构建性能方面有了很大的提升。 对Node.js的支持进行了调整,现在需要使用Node.js 18+版本。 2. Bubble - README 小组件 该仓库收集各种可以放在 GitHub Profile 和 Readme 上面的小组件。
|
7月前
|
Web App开发 人工智能 前端开发
视野修炼-技术周刊第64期
🔥强烈推荐 1. VueDraggablePlus - 祖师爷推荐拖拽库 支持 Vue2 和 Vue3 的拖拽组件库。祖师爷力荐🔥
|
7月前
|
前端开发 算法 数据库
视野修炼-技术周刊第48期
🔥强烈推荐 1. 美团前端研发框架Rome实践和演进趋势 团队出品的技术沙龙,研发框架部分整理成文章了
|
7月前
|
人工智能 IDE 开发工具
视野修炼-技术周刊第45期
🔥强烈推荐 1. Sass 支持直接在浏览器中编译 Sass Playground与Web IDE等场景不再依赖服务器来编译Sass。 使用方式也非常的简单,使用 script module,仅需2行代码即可使用。