Extension：浏览器插件快速开发工具

2024/05/10

前端爱好者周刊 (Github: shfshanyue/weekly)，每周记录关于前端的开源工具、优秀文章、重大库版本发布记录等等，周刊中优秀文章会在公众号全栈成长之路逐一推送。每周一发布，订阅平台如下，欢迎订阅。

小技巧

在 Google Chrome 开发者工具可以通过 cmd + p 打开命令菜单，快速搜索并执行各种操作。

文章推荐

一、面向开发者的免费服务清单

free-for.dev 提供了一个广泛的为开发者和开源项目作者设计的免费服务清单。

包括了各种服务提供商提供的免费等级，但要找到所有这些服务需要花时间并做出明智的决策。

此清单覆盖了软件即服务（SaaS）、平台即服务（PaaS）、基础架构即服务（IaaS）等，特别有利于基础设施开发者（如系统管理员、DevOps实践者等）。

开源与库

一、 Puck：创建 ReactJS 网页的可视化编辑器

Puck 是一款模块化、开源的 React.js 可视化编辑器。

你可以使用 Puck 兼容所有 React.js 环境，构建自定义的拖拽体验，包括自己的应用和 React 组件。

Puck 采用 MIT 许可，适用于内部系统和商业应用。

import { Puck } from "@measured/puck";
import "@measured/puck/puck.css";

// Create Puck component config
const config = {
  components: {
    HeadingBlock: {
      fields: {
        children: {
          type: "text",
        },
      },
      render: ({ children }) => {
        return <h1>{children}</h1>;
      },
    },
  },
};

// Describe the initial data
const initialData = {
  content: [],
  root: {},
};

// Save the data to your database
const save = (data) => {};

// Render Puck editor
export function Editor() {
  return <Puck config={config} data={initialData} onPublish={save} />;
}