1. 前言

本文要介绍的Tauri，一个多语言工具链，可使用小型和快速的二进制文件构建安全的原生应用。官网地址：https://tauri.app/.

1. 前言

关于如何对 Tauri 项目进行打包和发布, 在 Tauri 的官方网站实际上只做了基本的介绍. 而且由于 Tauri 或者说是 Rust 对跨平台编译以及打包支持得不是很好.

所以到底如何在 Github.com 以外得平台进行编译打包, 讲得不够详细. 本人希望搜索到能对这方面有所补充的博客文章, 但是也没有找到. 包括一些英文方面的资料以及视频教程都不理想。 网上关于 Tauri 的 devops 自动化编译打包部署方面都是照本宣科, 按照官方的介绍使用 github action 进行配置. 而这些内容对于企业开发或者非开源项目来说帮助非常有限.

1. 前言

Tauri 定位为一个为所有主要桌面平台构建微小、速度极快的二进制文件的框架。开发人员可以集成任何可编译为 HTML、JS 和 CSS 的前端框架来构建用户界面。应用程序的后端是一个 Rust 二进制文件，具有前端可以与之交互的 API。

1. 前言

原文: Why should we use pnpm?

Author: Zoltan Kochan

译者：philoenglish.com 团队

关键字： pnpm, npm, yarn

pnpm是 Node.js 的替代包管理器。它是 npm 的直接替代品，但速度更快、效率更高。

多快？快3倍！请参阅此处的基准。

为什么效率更高？当您安装软件包时，我们将其保存在您计算机上的全局存储中，然后我们从中创建硬链接而不是复制。对于模块的每个版本，磁盘上仅保留一个副本。例如，当使用npm或yarn时，如果您有100个使用lodash的包，则磁盘上将有100个lodash副本。Pnpm 可以让您节省千兆字节的磁盘空间！

1. 前言

今天使用npm create tauri-app时候发现npm不是简单的创建一个nodejs工程, 其还做了很多特定于tauri相关的操作, 顿时感到这个命令不单纯, 这个命令可能还能干很多活, 迅速燃起了研究的兴趣, 于是写下了这篇文章.

1. 前言

Tauri 是一个应用程序构建工具包，可让您使用 Web 技术为所有主要桌面操作系统构建软件。核心库是用 Rust 编写的，用户界面几乎可以使用任何前端框架编写。它包括一个可选的、tree-shakeable JavaScript API用于舒适地访问底层操作系统、一个具有签名和验证的桌面二进制捆绑器、一个让您的用户保持最新版本的安全更新程序、一个可扩展的插件系统以及支持与操作系统整合，例如通知和应用程序托盘。

Tauri 使用简单且易于扩展。对于 Rust 编程语言的新手，Tauri 提供了一个舒适的学习环境，将与您一起成长。安装 Rust 后，创建您的第一个应用程序只需运行create-tauri-app. 但如果您希望保持 100% Rust 的安全性和舒适性，那么您根本不必使用 Node.js。

我们为注重安全、尊重隐私和具有环保意识的软件工程社区构建 Tauri

Tauri的设计哲学: 我们为注重安全、尊重隐私和具有环保意识的软件工程社区构建Tauri.

1. 前言

SVG 是一种 XML 语言，类似 XHTML，可以用来绘制矢量图形，英文全称是Scalable Vector Graphics 可缩放矢量图, 是W3C的一项建议. 基于像素的图像, 如果被放大会看到明显的失真, 而svg是基于形状描述的, svg图像无论放大多少倍都不会失真.

1. 前言

Storage API 是 Google Chrome 提供的一个内置 API，用于在插件中存储和访问数据。它提供了四种存储方式：本地存储（Local Storage）,同步存储（Sync Storage）,会话存储(storage.session), 受管存储(storage.managed)。本地存储用于在本地计算机上存储数据，而同步存储则将数据存储在用户的 Google 账号中，并在不同设备间同步。这使得插件能够在不同环境中保持一致的数据状态，为用户提供更好的体验。

1. 前言

chrome extensions官方文档

2. 初识Chrome插件

2.1. 什么是Chrome插件, 他能干什么?

Chrome插件是为chrome浏览器添加功能的小程序, chrome插件可以获取网页内容并可以操作网页内容, 如爬取网页数据(网络爬虫), 自动点击(定时点击或刷新), 修改网页内容(如更改网页文字或图片)等.

1. 前言

Tailwind 是一个基于 Atomic/Utility-First 规范 CSS 框架，提供了基础的工具类 utility classes（如：内边距 padding、字体 text 和 font、动画 transition 等预设类），能直接在脚本标记语言中组合起来，构建出您想要的设计。

Tailwind CSS 优点

• 可定制化程度极高
• 减少为 class 取名字的苦恼。
• 响应式设计
  Tailwind CSS 遵循移动优先的设计模式，断点系统很灵活。比如实现一个媒体查询，要求根据不同的屏幕宽度实现不同的图片宽度。传统写法如下
• CSS 体积大幅降低

1. 前言

百度统计是全球领先的中文网站流量分析平台，帮助企业收集网站访问数据，提供流量趋势、来源分析、转化跟踪、页面热力图、访问流等多种统计分析服务，同时与百度搜索、百度推广、云服务无缝结合，为网站的精细化运营决策提供数据支持，进而有效提高企业的投资回报率。

1. 前言

升级应用程序或者框架是软件生命周期中非常重要的一项活动. 因为其有风险性, 很多人不愿意去做, 久而久之随着技术债务的积累变成了一件不能去做的事情.

在我的职业生涯中见到过很大这样逐渐失去生命活力的系统, 这里就不具体举例了, 以免引起不必要的争论, 明白的人自然明白.

1. 前言

在 Angular Material v15 中，许多组件已基于官方的 Web Material Design Components (MDC) 进行了重构。 以下导入的组件已被重构：

• 1. 前言
• 2. 创建 Angular 项目
• 3. 安装 Tailwind CSS
• 4. 配置您的 html 模板路径
• 5. 将 Tailwind 指令添加到您的 CSS 中
• 6. 构建 Angular
• 7. 开始在您的项目中使用 Tailwind
• 8. 插件和配置设置
  • 8.1. 语法支持
  • 8.2. IntelliSense for VS Code
  • 8.3. 自动 class 排序
    • 8.3.1. 安装 prettier-plugin-tailwindcss
• 9. Angular 系列文章
• 10. 参考文档

1. 前言

本文主要讲述如何在 Angular 项目中设置 Tailwind CSS。

1. 前言

根据flex-layout官方宣告, @angular/flex-layout当前(2023-06-25)处于deprecated状态. 替代方案为Tailwind或者Angular CDK.

具体原因参考官方的anoucement - Medium post
和github上的讨论

建议新项目使用其他css library, 旧项目考虑移植到其他css library.

以下是我从flex-layout的一些实践.