公司:古茗
古茗是中国大陆连锁调饮品牌,由王云安等人于2010年在浙江省台州温岭市创立。该品牌主打三、四线城市市场,是浙江加盟店数量最多的茶饮品牌。至2021年,全国门店数量已经突破5000家,分布在全国18个省市、139座城市。现由浙江古茗科技有限公司运营,总部在浙江省温岭市大溪镇。口号是“每天一杯喝不腻”。
如何实现视频旋转缩放
原本我们预览视频仅仅是简单的video标签实现就可以满足业务的需求了,但是某一天,产品说:”业务的视频是用手机拍的,方向不一定是正的,还有视频的宽高太小了看不清,所以希望我们能让视频做到旋转跳跃(不是)旋转+按比例缩小放大“。此时我的内心OS:你***是《舞娘》听多了吧。不过吐槽归吐槽,既然需求合理该做还是得做啊。
C端增长业务中的动效探索
在增长营销业务中,有各种玩法的环节,对于一个做增长的前端来说,动画是一个很难绕过的话题。对于我来说,不愿意花这么长时间到一个投入大,产出不确定的工作中,因为往往这类需求都是在你没有防备的时候突然出现,然后开始倒排需求。
那么抛开排期不谈,在一个正常的工作流程中,如何实现个酷炫的动效呢?首先,设计和交互要描述出他想要的动画,前端要评估是否能实现动画,接着前端去实现动画,最后设计还要验收走查动画是否达到他的标准。
想到这,我已经汗流浃背了。功能都来不及开发了,我还管什么动画呢。在古茗的C端团队早期,我们也是经历过这种刀耕火种的时代的,在小程序里用 canvas 纯手写动画,还得解决小程序里各种奇奇怪怪的兼容问题。
为了提升效率,为了优化用户体验,为了更好的团队协作,为了每天按时下班,我们就开始想办法了。
编译拦截?我来助你!
在开发工作中,我们经常会遇到各种各样的问题和挑战,而这些问题往往不是孤立存在的,它们可能是由一系列复杂的因素相互作用的结果。正如本文所描述的dayjs本地化配置问题,它不仅仅是一个简单的编码错误,而是涉及到了协作规范以及工程架构等多个层面。
一个专业且可信赖的前端工程师需要具备的不仅仅是编码能力,更重要的是要有预见性的思维和系统性的解决问题的能力。需要能够从宏观的角度去审视问题,预见可能的风险,并采取有效的措施来预防和解决这些问题。
看完你就懂了-移动端蓝牙开发
像我们使用的蓝牙耳机听歌,这就是使用的是经典蓝牙协议,像我们使用手机去解锁门锁,和连接手环等这些则使用的是低功耗蓝牙。本篇文章会介绍低功耗蓝牙的一些特点和在移动端开发的一些注意事项。
如何为上传文件取一个唯一的文件名
古茗内部有一个 CDN 文件上传平台,用户在平台上传文件时,会将文件上传至阿里云 OSS 对象存储,并将 OSS 链接转换成 CDN 链接返回给用户,即可通过 CDN 链接访问到文件资源。我们对 CDN 文件的缓存策略是持久化强缓存(Cache-Control: public, max-age=31536000),这就要求所有上传文件的文件名都是唯一的,否则就有文件被覆盖的风险。有哪些方式可以保证文件名全局唯一?
组件复用方式探索
在页面开发过程中,发现两个小程序的工程目录下都有大量相同的全局components,每次修改都需要同时修改两个项目的组件代码,因此想要将这部分抽离出来。最常见的方式是抽离成npm包进行复用,但是无意间看到了这篇文章,于是想到是否可以使用远程组件的方式来进行复用。
古茗门店电子屏的设计与改进
各位熟知的在门店中除了电子菜单屏,还有电视机作为广告位来展示宣传视频,限时营销商品等等,在上一期中基于电子菜单的诉求,产生了自定义建站、定制化通用物料的等等需求,于是产出了后台建站设计方案与页面渲染的技术方案。
在后续的电视机业务中整体的流程还是十分相似,但由于实际业务不同,原有逻辑也会存在着多态。所以在做电视机业务中,只是将电子菜单的代码拷贝出了一份,在原有逻辑基础上修修补补,最终产出出了一份针对电视机业务的代码。
解释「解释解析器」
不知道大家有没有想过一个问题:"我们编写的JS代码只是一些字符串,它是怎么被机器执行的?",下面我们带着这个问题进入文章。
JavaScript 模块化演进历程
回顾 JavaScript 的发展历程,从最初的简单浏览器脚本语言,到如今构建互联网应用程序的现代编程语言,模块化技术在这一演变中发挥了关键作用。本篇文章将从 JavaScript 的模块化探索及模块化规范的持续演进两部分,回顾 JavaScript 模块化的演进历程。
关于请求这件小事
在日常开发过程中,经常与服务器进行交互。但其实,看似简单的请求,也有一些可以思考的点。大家都知道,浏览器是有并发限制的,最大并发数量是6-8个。那么,引出我们的第一个问题,针对一些相似请求,怎么合并请求?
古茗埋点测试实践
在前端页面的开发过程中,埋点不仅是获取用户行为数据的关键途径之一,也是产品优化和决策制定的重要依据。随着埋点需求的逐渐增多,保证埋点的正确性和完整性是我们需要解决的一个问题。
转 C 端后,我在古茗做的第一个需求
用微信、支付宝和抖音扫描门店展示的同一个二维码进入不同的页面,具体来说,支付宝和抖音端进入点单小程序的点单页,并定位到二维码所绑定的门店,微信端则进入二码合一页面。二码合一名称的由来是,将原来的点餐码和社群码统一成一个二维码,微信扫描之后进入二码合一页面,在该页面判断用户是否加过社群,根据结果在界面上展示不同的内容。
宣传物料定制化场景的实现与落地
门店宣传物料是指门店在日常营运时所需的包含且不局限于(宣传单页、横幅、贴纸、海报等)。在营销策略中我们较为熟知千人千面,当然宣传物料也是如此,我们需要满足不同店铺的营销、宣传需求来做宣传物料的定制化方案。
钉钉H5微应用实现桌面快捷方式
在我们公司的很多内部应用,都以钉钉为宿主环境。因此打开一个应用的里的某个功能,都至少要经过钉钉->从聊天切换到应用列表->打开应用->打开次级页面或功能,这样层层菜单区寻找。因此基于提高效率、方便使用的出发点,我们希望能够像微信小程序一样,借助于生成桌面快捷方式解决这个问题。
透析CDN技术架构
CDN(全称 Content Delivery Network),经常被我们使用在前端资源处理中,例如:图片、视频、音频、html等静态资源。当遇到加载性能问题的时候,需要提效,会优先想到使用CDN进行加速资源 处理。
你可能不知道的一些前端调试小技巧!
在日常工作中,我们难免会碰到各式各样的线上问题,而有些问题可能因为不同环境下的数据、构建产物不同等原因导致在本地或者测试环境不易复现,如果公司内没有比较完善的线上错误监控和日志分析平台,不妨尝试下以下的调试方法,也许就能帮助你解决线上的“疑难杂症”。