公司：古茗
古茗是中国大陆连锁调饮品牌，由王云安等人于2010年在浙江省台州温岭市创立。该品牌主打三、四线城市市场，是浙江加盟店数量最多的茶饮品牌。至2021年，全国门店数量已经突破5000家，分布在全国18个省市、139座城市。现由浙江古茗科技有限公司运营，总部在浙江省温岭市大溪镇。口号是“每天一杯喝不腻”。
小程序用户登录：安全性与用户体验的平衡
在移动互联网时代，移动应用作为连接用户和服务的桥梁，扮演着至关重要的角色。
老项目的外链太多？我是这么处理的
本文介绍了笔者在做业务项目迁移的时候，处理外链逻辑以及对项目内的页面出入参和跳转场景进行统一化治理的思路，希望能给同样被历史项目和技术债折磨的同学们提供一些可行性建议
formily原来是这样解决这些表单难题
古茗在中后台的场景中大量的使用 formily 来解决问题。
古茗是如何将小程序编译速度提升3倍的
随着业务的发展，小程序的代码量也在飞速膨胀，古茗最大的 B 端小程序页面已经超过 260+，dev 模式下 dist 目录近 35M，性能稍差的设备从 『代码改动 - Taro 热更新 - 小程序IDE build - 页面reload』这个过程超过 13s；而这个过程在日常需求开发时每天可能重复上百次，这会极大的降低开发效率。
钉钉小程序实现签名板
为了对门店做规范管理，会进行巡店且输出巡店报告，此时就需要有一个老板签名的功能，证明老板认可且了解当前结果。由于我们巡店用到的是钉钉小程序，所以下面将会为大家展示如何在小程序中实现一个签名板功能。
小程序主包体积的优化方案与技术实现
在使用Taro开发偏大型小程序应用过程中，我们可能经常会遇到这么个问题：小程序的主包体积超过了2M，没办法发布。针对这个问题，本文讲一讲我在业务中经常使用到的4种优化手段。
JSPDF + html2canvas A4分页截断
最近在业务上遇到了一个问题是要将页面打印输出成pdf文件，通过点击一个按钮，就能够将页面写在一个pdf上，并下载下来，需要保证pdf的内容具有很好的可读性。
经评估要实现这个需求，一种可行的方案是将HTML页面转为PDF，并实现下载。通过技术调研，最终的方案确定为通过html2canvas + jspdf这两个库来实现，通过使用html2canvas提供的方法，将页面元素转为base64图片流，然后将其插入jspdf插件中，实现保存并下载pdf。
html2canvas + jspdf方案是前端实现页面打印的一种常用方案，但是在实践过程中，遇到的最大问题就是分页截断的问题：当页面元素超过一页A4纸的时候，连续的页面就会因为分页而导致内容被截断，进而影响了pdf的可读性。
古茗是如何做前端数据中心的
古茗的前端数据中心包含了前端监控、性能、日志、埋点等能力，还支持错误分析、埋点分析报表等功能 不仅支持小程序、web 还支持客户端 flutter、服务端 nodejs 等。由于我们有不少的 nodejs 应用，所以 nodejs 的监控也是必不可少的。
你一定要知道的「React组件」两种调用方式
使用React框架的开发过程中，我们常常会使用两种方式调用组件：一种是组件式，另一种是函数式，但是这两种用法究竟有何不同？
中后台业务开发（一）「表单原理」
在中后台的业务开发中，表单必不可少，合理的借用表单组件的设计模式来组织自己的代码结构是我们需要上的第一课。
手摸手教运营小姐姐搭建一个表单
团队开发了一个表单搭建平台，通过可视化搭建和配置，解决了运营人员频繁找开发配置表单的问题。平台自研，选择自研的原因是为了满足内部业务需求和定制化功能。平台使用formily + 组件库对表单进行渲染，并将表单配置转化为jsonSchema。布局属性主要用于配置FormItem的props属性，例如标题、输入类型等。通过通信管道实现主站和编辑器的解耦和表单样式的一致性。
前端开发者需要了解的「设计体系」
设计体系的目的是为了实现产品的目标，而设计体系中的内容都应该为此进行优化。团队在设计时需要根据一系列原则来判断如何实现产品目标，这样可以保持团队的一致性和凝聚力。界面设计通过模式来表达设计意图，功能性模式支持用户的行为和操作，感知性模式关注产品给人的直观感受。无论在保护品牌还是满足业务需求时，我们都要意识到新的需求可能需要定制化的模式和一次性的调整，以避免削弱品牌性。
门店智能设备间「通信」原理
古茗门店的后厨放着有很多设备，功能不一样，类型不一样，而且通信机制也不一样。
像最基本的前端和服务端通信，我们需要定义各种接口去实现我们的业务功能，然后依赖http服务进行通信。但是当两台设备需要通信时，我们必须以物理方式或无线方式将它们连接起来，接着再去通信。
我们经常使用的通信方式有：串口通信（USB、CAN）、蓝牙通信、TCP通信。虽然通信方式各种各样，但是原理上基本一致。
作为通信中最为复杂，但也是最被人所熟知的网络通信，这里先大概讲解一下网络通信的原理，那么再讲其他通信方式时也就很好理解了。
「前端添加水印」你真的了解全面吗？
古茗公司通过使用canvas + 伪类的方式实现了页面水印。他们通过设置position: absolute来实现定位，并使用display: block、top: 0、left: 0、height: 100%、width: 100%等属性来覆盖整个页面。通过设置background-image和background-repeat来添加水印图像，并通过pointer-events: none来禁用水印的交互。这样可以在特定区域增加水印，保护内部资料的安全，并且防止盗取和泄露。
一文了解Webpack中Tapable事件机制
Webpack 是前端工程化常用的静态模块打包工具。在合适的时机通过 Webpack 提供的 API 改变输出结果，使 Webpack 可以执行更广泛的任务，拥有更强的构建能力。
Webpack 的插件机制本质上是一种事件流的机制，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是Tapable，Webpack中最核心的负责编译的Compiler和负责创建bundles的Compilation都是Tapable的实例。
古茗打印机技术的演进
不要在碰到一些小票打印出来模糊的时候说没墨了，他根本没有墨！核心在纸，这就是为什么我们点外卖或者堂食给到我们的小票用指甲划一下就能变黑。