视野修炼-技术周刊第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                                      

相关文章
|
5月前
|
资源调度 Rust 前端开发
视野修炼-技术周刊第59期
🔥强烈推荐 1. Yarn 4.0 正式发布,性能大幅提升! 10.23 日,Yarn 4.x 发布。 新的官网如下 看上去档次高了
|
5月前
|
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 了 😄
|
5月前
|
文字识别 安全 前端开发
视野修炼-技术周刊第57期
🔥强烈推荐 1. Rspress - 基于 Rspack 的高性能静态站点生成器 由 ByteDance Web Infra 团队孵化的一款静态站点生成器,使用 Rspack 进行构建,基于 React 框架进行渲染,支持 MDX 内容开发,主打高性能、简单易用和定制性强。
|
5月前
|
Rust 自然语言处理 前端开发
视野修炼-技术周刊第66期
🔥强烈推荐 1. Oxlint 正式发布 Oxlint 是一个 JavaScript linter,旨在捕获错误或无用的代码,默认情况下不需要任何配置 基于 Rust 实现,速度极快(比 ESLint 快 50-100 倍) 下面是使用示例,项目里直接执行如下的指令即可。
|
5月前
|
存储 人工智能 前端开发
视野修炼-技术周刊第61期
🔥强烈推荐 1. 2023年🧑‍💻工程师的 Mac 工具箱 Arc - 浏览器, Warp - 终端, Raycast - 启动器,Orbstack - 容器,Setapp - 软件订阅,CleanShotX - 截屏,OBS - 录屏推流,Gifox - Gif图制作, 1Password - 密码管理器,Bartender - 菜单栏管理,Downie - 视频下载,IINA / Infuse - 视频播放器,iRightMouse - 鼠标右键增强,PopClip / Bob - 鼠标工具 Arc 和 Warp 目前笔者一直在用,其它的看着也还不错,按使用场景可以试试 作者:粥里
|
5月前
|
JavaScript 前端开发 API
视野修炼-技术周刊第55期
1. disable-devtool - 一行代码禁用 devTool 如题可以用来防止网站被开发者工具调试,打开开发者工具后,页面会自动重定向到指定的页面
|
5月前
|
前端开发 程序员 数据库
视野修炼-技术周刊第26期
🔥强烈推荐 1. 一个程序员决定写代码到60岁 “人物采访总结”,讲了一位阿里大牛的成长历程(做数据库的),再过几年就60了,仍在一线编码 推荐大家阅读一下,大佬的路虽不可以复制,但部分经验可以借鉴 🙊
|
5月前
|
前端开发 JavaScript 容器
视野修炼-技术周刊第23期
🔥强烈推荐 1. 看完 Svelte 纪录片才知道它为什么在国外比国内火 文章作者总结了一下 Svelte 纪录片 里的内容,个人感觉有许多描述很精彩的地方 为啥叫Svelte:在 npm 上找个别人没注册过的包实在是太难了😢 他说他想用 LEAN、ZIPPY、FAST、ELEGANT 组成一个单词,于是就组成了 Svelte:
|
5月前
|
人工智能 缓存 资源调度
视野修炼-技术周刊第41期
🔥强烈推荐 1. 使用纯CSS实现噪点效果 张鑫旭大佬的文章,在简单介绍了canvas和svg的实现之后,详细介绍了CSS版本的实现 如下所示代码也比较简单
视野修炼-技术周刊第41期
|
5月前
|
数据可视化 前端开发 JavaScript
视野修炼-技术周刊第60期
🔥强烈推荐 1. 通义灵码