前言 被石老板喷的有点久（Flutter系列水文📒一直没更新），这次接上一篇文章接着水一把… 很多从前端转Flutter的同学都会有个疑问：Flutter有没有类似Chrome Inspector的东西？？？ 答案是：有！很相似但也不完全一样！ 本期就给大家介绍笔者认为最好用的 —— DevTools 要原因如下 🚀 ： DevTools本身是Flutter官方推荐的一个调试工具。 DevTools是用Flutter编写的，极具特色 🖼 。 非常全面的调试功能，可以满足大小、方面不同的优化需求 ⚙️。 DevTools 先来一段官网的介绍：   DevTools is a suite o...

在升级到jenkins 2.479.1之后，出现了jenkins无法启动的问题，也查不到具体的报错信息很迷茫毫无头绪。经过一番排查结合猜测终于修复。 由于安装的这个jenkins版本比较老，最新的jenkins不再支持jdk11,将jdk 升级到21之后依旧无法启动。关键是没有生成什么报错信息。这个大概率不是在jenkins 启动过程中引发的异常，所以推断问题出是在启动脚本上。 查找启动脚本的位置 执行 systemctl status jenkins 可以看的加载的启动脚本位置是 /etc/init.d/jenkins 阅读启动脚本，在58行左右可以看到 # Which Java versi...

背景 由于我们经常会用到antd 风格的UI设计，而小程序开发我们更倾向taro实现，但是官方的ant-mobile并没有适配taro。所以我们考虑自己实现一个antd风格并且能适配taro的组件库。 设计目标 按照目标计划，我们同时构建出umd,es,cjs三种format。但是umd和es，cjs的构建产物是不一样的。umd中，我们需要一个js和一个css文件。而es和cjs我们考虑到按需加载的要求，需要遵循babel-plugin-import的加载策略，对文件结构是要要求的。 以es格式为例，组件文件下需要有个style文件夹，babel-plugin-import插件会在使用组件的时...

weapp是一款声称“重塑小程序开发体验”的开源框架，由于项目作者刚刚发布，使用的人数不是很多，我来看看到底怎么回事。 项目地址：github：[https://github.com/weapp-vite/weapp-vite](https://github.com/weapp-vite/weapp-vite)。 首先我们按照官方文档的快速开始教程，直接在控制台创建一个集成了常规前端工程配置项目模板（tailwindcss，sass，ts）。 npx weapp-vite create my-app，然后执行pnpm i 安装依赖包，得到以下结构： 参照package.json中的script...

在taro 官方文档中有对应的使用linaria作为css-in-js方案的文档 https://taro-docs.jd.com/docs/next/css-in-js 但是文档相对落后了，该文档试用与linaria 5.x，linaria已经升级到6.x,那么我需要对其进行相应的调整。 主要是将部分原来 linaria的包改成 wyw-in-js $ pnpm i @linaria/core @linaria/react @wyw-in-js/babel-preset @wyw-in-js/webpack-loader babel.config.js: module.exports = {...

背景 我们经常会遇到在上传头像的时候，需要对头像进行裁剪的需求，antd 官方推荐了https://github.com/nanxiaobei/antd-img-crop 和 https://github.com/sekoyo/react-image-crop ，虽然这两个组件也能满足一般的需求，但是我们从自身需求出发，希望有更可控的解决方案，并且希望后面通用的解决方案可以用在我们vue的组件库中，那么这种完全基于react的方案就不是很适用，这时候cropperjs这种不依赖react或vue等框架的组件库就成为了一个比较好的选择。 cropperjs github https://gith...

在鸿蒙Next中，想要实现渐变文本可使用2种方式 使用Canvas绘制 使用linearGradient与blendMode结合 以下提供2种方法的实现样例代码 一、Canvas绘制 Canvas(this.context) .onReady(() => { let str = '这是一段渐变颜色的文字' let size = this.context.measureText(str) let linearGradient = this.context.createLinearGradient(0, 0, size.width, size.height) linearGradient.addC...

原理 当我们使用 certbot 申请通配符证书时，需要手动添加 TXT 记录。每个 certbot 申请的证书有效期为 3 个月，虽然 certbot 提供了自动续期命令，但是当我们把自动续期命令配置为定时任务时，我们无法手动添加新的 TXT 记录用于 certbot 验证。 好在 certbot 提供了一个 hook，可以编写一个 Shell 脚本。在续期的时候让脚本调用 DNS 服务商的 API 接口动态添加 TXT 记录，验证完成后再删除此记录。 参考Github项目certbot-dns-aliyun 1、准备工作 一个阿里云的域名，要求备案 阿里云的ACCESS_KEY_ID和AC...

对于打印可定制样式的出货单这种需求，我们可以使用 [https://www.npmjs.com/package/react-to-print](https://www.npmjs.com/package/react-to-print) 这个库来实现。 该库会打印出被创建的React组件，支持css样式的创建。 首先我们引入这个库 npm install --save react-to-print 使用方法非常简单，传入一个触发按钮Icon，再把要打印的组件传入进去就好了，我们使用ref.current传递。其他api可以参考官方文档。 import ReactToPrint from 'rea...

我对 monorepo 的一些思考 我对 monorepo 的一些思考 前言 它的由来 技术选型 管理工具 语言与打包 调试工具 测试框架 代码规范与质量控制 本地引用与发包替换 发包流程 Github 相关配置 部署 使用手册 功能特性总结 如何使用？ 清除默认的包(可选) 模板包介绍 packages apps 更新包的依赖 配置自动发包 1. 在 Github 进行 PR 和发包 2. 在 npm 发包 内置脚本 配置同步方式 参数 总结 前言 最近在自己的新项目中，使用了 monorepo-template 模板，并不断地做了不少改进。 在此，我想借此机会分享一下这个模板的演变过程，以...