视野修炼-技术周刊第45期

简介: 🔥强烈推荐1. Sass 支持直接在浏览器中编译Sass Playground与Web IDE等场景不再依赖服务器来编译Sass。使用方式也非常的简单,使用 script module,仅需2行代码即可使用。

🔥强烈推荐

1. Sass 支持直接在浏览器中编译

Sass Playground与Web IDE等场景不再依赖服务器来编译Sass。

使用方式也非常的简单,使用 script module,仅需2行代码即可使用。

<script type="module">
    // 导入sass
    const sass = await import('https://jspm.dev/sass');
    // 编译sass
    const r = sass.compileString(`
    body{
        color: red;
        h1 {
            color: #663399
        }
    }`);
    // 打印编译后的css
    console.log(r.css);
</script>

当然除了直接在HTML中导入也支持现代的构建工具(Vite,Webpack,Esbuild etc.)

我这里准备了一个 Sass demo

image.png

2. pnpm 替代 npm-run-all的用法

在开发npm包的时候避免不了要运行多个npm命令,最传统的做法如下:

{
  "scripts": {
    "build": "npm run build:esm && npm run build:cjs",
    "build:esm": "echo build esm",
    "build:cjs": "echo build cjs"
  }
}

这样的话会串行运行2个指令,如果要运行更多,就需要写更多的 && Command,不是太优雅

此时可以引入 npm-run-all 来简化指令的书写

其提供了两种执行指令的方式 并行run-p, 串行run-s

{
  "scripts": {
    "build": "run-p build:esm build:cjs"
  }
}

pnpm run 也提供了类似的功能,使用方式如下,支持 run 后面跟正则表达式

{
  "scripts": {
    "build": "pnpm run /^build:/"
  }
}

🔧开源工具&技术资讯

3. 模拟旗帜飘扬效果-Cool

支持使用自定义的图片替换旗帜的内容

image.png

4. Bun 1.0 正式版定于9月7日发布

image.png

image.png

5. react1s

点击页面元素跳转到编辑器

image.png

这个和之前的 locatorjs 功能类似

🤖AI工具&资讯

6. AI  Commits工具

使用ChatGPT驱动的AI工具,可以自动生成commit message 并提交。

首先是一个 VS Code 插件 vscode-i-dont-care-about-commit-message

直接F1调出命令面板,输入 AI Git 即可。

image.png

另一个是 CLI 工具 aicommits

使用方式也比较简单

aic
# or
aic -t conventional

image.png

7. Google Bard 支持中文了

image.png

体验了一下效果感觉只有 GPT3 的样子

       image.png                                      

相关文章
|
6月前
|
人工智能 JavaScript 安全
视野修炼-技术周刊第52期
🔥强烈推荐 1. 极速图片压缩器 软件特色 具有超快的压缩速度 支持压缩 GB 级别的超大体积的图片 支持 7 种图片格式 支持原始图片预览 支持【鼠标拖拽】【点击选择】【ctrl + v 粘贴】 等多种方式添加图片 支持添加文件夹,可自动解析文件夹内所有符合要求的图片 实时显示压缩进度 完全在本地执行压缩,有无网络均可,不上传图片,充分保证隐私安全
|
6月前
|
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 了 😄
|
6月前
|
人工智能 前端开发 小程序
视野修炼-技术周刊第58期
🔥强烈推荐 1. LocalSend - 开源的跨平台文件传送软件 不需要互联网连接,依靠共享 Wifi 分享文件。
|
6月前
|
资源调度 Rust 前端开发
视野修炼-技术周刊第59期
🔥强烈推荐 1. Yarn 4.0 正式发布,性能大幅提升! 10.23 日,Yarn 4.x 发布。 新的官网如下 看上去档次高了
|
6月前
|
JavaScript 前端开发 API
视野修炼-技术周刊第55期
1. disable-devtool - 一行代码禁用 devTool 如题可以用来防止网站被开发者工具调试,打开开发者工具后,页面会自动重定向到指定的页面
|
6月前
|
人工智能 JavaScript 开发工具
视野修炼-技术周刊第39期
🔥强烈推荐 1. Transformers.js - 浏览器直接运行AI模型 "抱抱脸"🤗 近期推出了 JS 版SDK,至此可以使用 Node.js 和 浏览器运行提供的AI模型了,大大降低了使用门槛 下面看一下官方示例,在浏览器里的运行效果 只需要在 index.html 加入以下代码 html复制代码
|
6月前
|
前端开发 JavaScript 安全
视野修炼-技术周刊第40期
🔥强烈推荐 1. 从浏览器到 Node.js 环境,一文彻底搞懂前端沙箱 文章摘要: 本文介绍了什么是前端沙箱,以及通过浏览器和Node.js环境来实现前端沙箱的原理和方法。同时还对代码注入的安全问题、with关键字、eval()和Function方法等进行了详细的讲解,最后也提到了Node.js建立安全的隔离沙箱的难点和解决方案。 文章总结: 本文深入浅出地介绍了前端沙箱的概念和实现方式,同时还详细讲解了相关的安全问题和注意事项。通过学习本文,读者可以更好地了解前端沙箱的重要性及其应用场景,同时也可以提高代码安全性。
|
6月前
|
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 团队合作开发一些共享的底层工具和功能
|
6月前
|
数据可视化 前端开发 JavaScript
视野修炼-技术周刊第60期
🔥强烈推荐 1. 通义灵码
|
6月前
|
Web App开发 人工智能 JavaScript
视野修炼-技术周刊第47期
🔥强烈推荐 1. Arc 浏览器!!! 同事本周强烈推荐的一个 Chrome浏览器替代品,基于 Chromium 开发,支持直接从Chrome浏览器导入插件和收藏夹内容,实现无缝的切换,甚至连Cookie(登录状态)都能导入!! 笔者从昨天开始使用,目前体验非常不错(仅有Mac版本)。