Introduction

A collection of 6 posts
跨平台桌面应用开发新选择 Tauri 2.0
Introduction

跨平台桌面应用开发新选择 Tauri 2.0

Tauri 2.0 在 2024/10/02 官方正式发布了 Tauri 2.0 的稳定版本,这给我们构建跨平台桌面应用提供了新的选择。首先我们先了解一下 Tauri 是什么? 借用官方的话来说: Tauri 是用于为所有主流桌面(macOS、linux、windows)和移动(iOS、Android)平台构建微小二快速的二进制文件的框架。开发人员可以使用任何编译为 HTML、JavaScript 和 CSS 的前端框架来构建他们的应用,并且也可以在需要时使用 Rust、Swift 和 Kotlin 等语言来实现后端逻辑。总结一下 Tauri 是可以使用 Web 技术构建跨平台桌面应用,同时提供对系统本地资源访问能力的框架,没错,这介绍很容易想到另一个也是很好用的框架 Electron。Tauri 的优势在于轻量,性能,
5 min read
SVGO 压缩 SVG 后不能正常缩放
Bug

SVGO 压缩 SVG 后不能正常缩放

前情提要 在前端开发过程中,SVG 图标(可缩放矢量图形)被广泛使用,因为它们具有可伸缩性、清晰的显示效果以及较小的文件大小。使用 SVG 作为图标有很多优势,尤其是在响应式设计和高分辨率屏幕上的表现。 但是,SVG 图标的制作过程也有很多不便之处。一千个读者就有一千个哈姆雷特,一千个制作者绘制同一个图标也可能会有一千个不同的版本。尽管 SVG 本身已经足够小了,但是在很多矢量编辑器/软件中,导出来的 SVG 文件会有很多其他冗余信息(当然这里面制作者和导出软件可能都会有问题)。 为了解决这些问题,我们需要一个工具来压缩 SVG 图标,使其更小、更清晰、更易于管理。所以选择了 SVGO 对图片进行压缩并且使用 SVGR 将 SVG 代码转换为 React Component 。 你可以在这尝试进行 svg 的压缩与转化。 * svgo playground * svgr playground ps:
3 min read
基于 Lexical 的富文本输入框
Demo

基于 Lexical 的富文本输入框

这次先放 demo 富文本输入框 最近都在写后台项目,在项目中使用 富文本输入框 的频率很高。也使用过蛮多富文本编辑器,比如 tinymce, quill, jodit 等等。 因为一些特殊的业务需求,比如图片/视频的上传改成从后台库中选择图片,支持 youtube 视频嵌入等等,又不希望使用付费商业版,所以决定二次开发一个开源的高度自定义的富文本编辑器。在调研/使用了多个项目之后决定使用 lexical 开发。 Lexical Lexical 是一个开源的富文本编辑器框架,由 Facebook 开发,旨在提供灵活和可扩展的文本编辑体验。最主要的优势在于 Lexical 的开发者体验一流。不需要过多与 DOM 的交互,通过声明性的 API 和插件就可以快速实现想要的功能。 在开始之前强烈建议先阅读完整的官方文档 ,后面的内容会从实践出发,不会过多介绍相关概念。 依赖安装 npm install --save lexical @lexical/
9 min read
世界地图插件
Demo

世界地图插件

开个新系列,主要写些不知道有什么用的功能 Demo,反正就是突然想做个试试。 像素点地图 一些简单的需求: * [ ] 渲染显示世界地图 * [ ] 能够缩放 / 移动地图 * [ ] 在地图上添加标点 * [ ] 地图添加高亮某块区域的交互 实现 绘制地图 本来企图用 three 实现 3D 地图,最后还是使用 canvas 绘制 2D 地图。 * 定义像素点结构 interface Node { x: number; y: number; isHighLight?: boolean; } * canvas 绘制地图 const canvasRef = useRef<HTMLCanvasElement>(null); const [data, setData] = useImmer(worldData); useEffect(() => { const canvas
7 min read
Remix-路由驱动的前端开发模型
Introduction

Remix-路由驱动的前端开发模型

Remix 是什么 Remix 是一个面向 React 开发者的现代化全栈框架,它提供了一种新的方法来构建 web 应用程序。Remix 的核心理念是将前端和后端代码统一在一个项目中,并且通过路由和路由参数来管理页面和数据的加载。 Remix 的特点 1. 允许或者说是鼓励全栈框架,将前后端代码整合到一个项目。 2. 路由和路由参数来管理页面和数据的加载,使得页面之间的跳转和数据传递更简单直观。 3. 提供了多种钩子。 4. 内置缓存。 创建 Remix 项目 以下内容均基于 v2 版本,旧版本内容不会提及。更多信息可以查阅 官方文档。 创建一个简单的 Remix 模板项目 npx create-remix@latest --template remix-run/indie-stack blog-tutorial // remix.config.js module.exports = { future: { v2_
10 min read
GraphQL 一种更灵活的 API 解决方案
Introduction

GraphQL 一种更灵活的 API 解决方案

简单介绍 GraphQL 是一种用于 API 的查询语言和运行时环境,由 Facebook 开发并于2015年公开发布。它旨在提供一个更高效、强大且灵活的替代方案,用于客户端和服务器之间的数据交互。与传统的 RESTful API 不同,精确的数据查询,允许仅获取所需的数据等都是 GraphQL 的优势。 GraphQL 的优势 GraphQL 的优势主要在于精确的数据查询,允许仅获取所需的数据,从而节省带宽和资源,这将通过一个例子来理解。 GraphQL 服务是通过定义类型和字段,为每种类型上的每个字段提供函数来创建的。查询用户的 GraphQL 服务可能长这样: type Query { me: User } type User { id: ID! name: String! } GraphQL 服务在运行时主要由两部分组成,Query Language 和 Engine,后端定义了类型和字段,客户端一样需要通过
6 min read