我用三个月时间仿造了一个稿定设计2022年中总结

丰富的线上&线下活动,深入探索云世界

做任务,得社区积分和周边

最真实的开发者用云体验

让每位学生受益于普惠算力

让创作激发创新

资深技术专家手把手带教

遇见技术追梦人

技术交流,直击现场

海量开发者使用工具、手册,免费下载

极速、全面、稳定、安全的开源镜像

开发手册、白皮书、案例集等实战精华

为开发者定制的Chrome浏览器插件

这时候可能有细心的小伙伴发现了,不是重构项目吗?怎么看起来像是重写了?好吧,我自始至终都没见过旧版“在线PS”的源码,后来我才了解到,旧项目原本是老板五年前扒的别人生产环境代码来上线的,这可真是五线谱上瞧不见马——就你马离谱了呀。

开发中遇到的问题已经数不清有多少了,但最大的问题还是莫过于图片的生成方案,想想在客户端一顿操作,以为自己画了只虎,结果下载一看却是只猫,那不是白搞了?

为了弥补设计部产能不足的问题,领导示意我从网上采集些模板和素材过来,让设计可以在里面挑选/调整之后快速扩充模板数量:

采集的资源会默认为“未激活”状态,由设计部门去修改和判断停启用。一开始边测试边录入数据,每天入库几十个模板,老板嫌速度太慢,我干脆就化身无情的模板搬运工,用公司电脑不舍昼夜地挂机了两天,最终入库将近3万个模板,把设计部几年的工作量都给安排了(这里偷偷说下,其实我也采集了稿定的,但是不敢给公司用,只敢把小厂的偷来稿定的只给自己消遣和研究,分析数据的时候也能学到不少东西)

PS:目前公司后台的未审核模板数还剩下2万个:

但设计部最近又经历了一波人员变动,如今产能是更加不足了。。

关于Node服务的部署,也是困难重重,首先是运维方面非常不认同NodeJs,说漏洞非常多,听到我要使用node+chrome的方案时更是强烈滴反对,说linux浏览器以前就用过,十分不稳定,还会搞崩服务器等等。但我寻思着自己1核1G小主机都不会崩,公司的服务器怕什么呢?于是还是坚持了自己的方案(前面说了纯Web绘制咱也真做不出来啊)。

运维这边则给了一个内网端口,由后端php再写一个接口调用,并且加了个url回调,当我截图任务完毕时再调用它,通知php去拿到图片。这样可以在url加串md5解决一个鉴权问题,关键外网也不能直接访问到Node服务(运维放下了手中的刀)。而前端下载则只能不停轮询php的接口,轮询到有结果时才拿到下载地址,比较的呆。

由于我们的项目并不针对C端用户,所以比起覆盖各行业场景的模板需求,垂直领域海报的模板下沉更有意义,这当然离不开设计部的添砖加瓦,此时将平面设计师做好的psd上传到后台解析成可交互模板就很有必要。这块涉及到很多东西,包括各种字体特效、文本多行拆分样式、图片蒙层解析、分组多页面等功能——我都是没有实现的,只做到了基本够用的程度,所以也写了一些PSD设计规范给设计部,以免设计师辛苦做了图传上来却显示了个寂寞。

这块和稿定设计比起来就是班门弄斧了,稿定没有任何规范,因为99%的psd文件它都能近乎完美的解析,文件是上传到服务端解析的,不知道具体怎么实现,反正可以支持解析很大的文件,而我是在前端浏览器解析完再上传的,遇到超过200M的psd文件基本上页面就卡死在那摆烂了。

由于自己是整个项目的owner,UI和产品介入后我开始有两套代码,一套是给公司开发的,另一套是自己的实验田,有些功能自己做了觉得可以,就git检出比较代码手动迁移到公司项目里,比如当产品告诉我他想加一个二维码功能的时候,我已经开发完一版了,直接截图给他,于是产品原型也不画直接用截图给我提了个需求单。

尝试了不少有趣的功能,但其实折腾多了,有点“面向谷歌浏览器开发”的感觉,因为浏览器之间的差异很难抹平,做到完美兼容对我来说几乎不可能,所以有很多都没上线,怕出什么bug,又有些实验性质的东西,就只是自己玩。

也简单做了一下后台的模板与素材管理:

项目到这里介绍的也就差不多了,总之就是一个不停摸索又不停折腾的过程。其实互联网行业里大部分的产品我感觉都挺饱和的了,很难讲什么真正的创新,都是缝合一下就出来个产品,再按实际需求去做功能点。而像遇到这种非常规类型的项目,技术主导就显得尤为重要,一般的产品专员很难发挥效果,技术能力既决定了产品的上限,同时也是一道难以逾越的壁垒。我在做这个项目经常想的一类问题就是:稿定这个功能到底是怎么做到的?当然偶尔也会想摆烂,那会和同事开玩笑说我是一个人的下水道对标百人前端的天花板,但是每当做出来新功能时,多少还是有些小兴奋,人在巨大落差感面前,也总会不断激起前进的欲望吧。

一开始搭建过Vue2组件库、Vue3组件库,由于公司的前端项目基本都是使用Vue2技术栈的,所以我在4人前端小组里推过我做的这个组件库,当时我考虑的重点是怎么用起来舒服,所以编写了自动化脚本代替一些操作,而且我认为公共组件库就是给大家用的,使用文档很重要,所以组件文档也是要做到能根据代码和注释自动生成,降低开发成本。

我的组件库是基于monorepo模式并由lerna进行管理的,组件deploy会直接发到官网上面去,所以当然也有准备要部署私有npm的(是的我们公司项目都是淘宝镜像梭哈),但是碍于要去和运维申请服务器资源,可能还需要处理权限账号之类的对接,而且很奇葩的是我Gitlab连创建仓库的权限都没有,觉得限制太多懒得去搞了。

公司项目太多,分支管理也有点混乱,经常需要来回横跳切换,发布有的是CI/CD,有的是本地编译后提交dist目录,觉得麻烦,写了个自动化脚本,通过交互式配置任务来自动处理提交发布,还有判断任务执行风险、代码冲突检测机制、任务热重启、自动跳转到pr合并等功能,个人觉得挺酷,但是我们公司操作Git都是“小乌龟”起手(php应该很熟悉),不像我喜欢用命令行。

由于当时也在学习怎么写vue的cli插件,就把这个工具写成了cliPlugin,不知道是不是这个原因,发布到npm后竟然有不少的自然下载量,直到目前已经有20k+download数据,不知道别人用着怎么样,反正我基本没在公司项目里使用(因为提交规范原理是拦截githooks,但是我们多数前端代码是没有独立仓库的,都放在了php仓库的目录下。。

职业道路要早做准备、多做打算,能力增长有快有慢,可能目标感才更能决定成败。技术不必急于求成,都是可以慢慢学的,但环境可能不会变好,或许努力去到更好的环境,才更能加速你的成长。

要做的事情还有太多。就先说到这里吧,保持思考,保持学习,平常心。

THE END
1.探索稿定设计:快速抠图的操作步骤与技巧指南在当今这个信息爆炸的时代,图像处理技术逐渐成为了许多人日常工作的必备技能。无论你是设计师、社交媒体运营人员,还是只是想为自己的照片增添一些创意,抠图的能力都显得尤为重要。而今天,我们要介绍的正是如何使用稿定设计这一工具,快速高效地完成抠图任务。以下内容将为你提供一个详细的指南,希望能对你有所帮助。 https://www.9200.cn/177984.html
2.稿定设计网页版怎么用?稿定设计网页版怎么用? 曾老师 11-14 01:59标题:稿定设计网页版——轻松上手,设计无忧 亲爱的设计爱好者们,你是否也渴望拥有一份属于自己的设计作品,却因为缺乏专业软件而望而却步?别担心,稿定设计网页版来帮你实现设计梦想!下面,就让我来为你详细介绍如何使用稿定设计网页版,让你的设计之路更轻松。 一、新手https://localsite.baidu.com/article-detail.html?articleId=30960135&ucid=PHfzrjnLPWf&categoryLv1=%E6%95%99%E8%82%B2%E5%9F%B9%E8%AE%AD&ch=54&srcid=10004
3.做海报?公众号封面图?logo?词云?试试这几个设计网站,用过的都说稿定设计-做图做视频必备_在线设计神器_海量版权素材模板?www.gaoding.com 创客贴 创客贴是一款多平台(Web、Mobile、Mac 、Windows)极简图形编辑和平面设计工具, 包括创客贴网页版、 iPhone、iPad、桌面版 等。从功能使用上分,创客贴有个人版和团队协作版,提供图片素材和设计模板,通过简单的拖拉拽操作就可以设计出https://blog.csdn.net/weixin_39967405/article/details/111585440
4.在线PSPS软件网页版,ps在线图片处理工具photopea稿定设计PS是一款专业精简的在线ps图片处理软件,免下载、免安装,直接在浏览器打开网页版就可随时随地用它修正,调整和美化您的图片。https://ps.gaoding.com/
5.网页版稿定设计怎么导出PSd3d溜溜设计问答平台为广大设计师们提供各种网页版稿定设计怎么导出PSd问题解答,3d溜溜素材问答平台汇聚全球各地的设计师、名师名司、设计爱好者等设计灵感和经验,迅速为您解决网页版稿定设计怎么导出PSd的困惑。https://www.3d66.com/answers_relation/relation_3226597.html
6.稿定设计app如何进行使用呢软件的使用教程介绍但是对于刚下载的用户却不知道怎么去使用这款软件了,只知道这款软件好,以下就是给新手用户们所带来的软件的使用方法介绍,让我们一起去看看如何进行操作吧。 稿定设计app下载2022最新版安卓 类型:其他软件 大小: 138.95MB 语言:简体中文 评分: 查看详情 稿定设计app软件的使用教程介绍 1、稿定设计是一款网页版https://www.shubang.net/news/3834.html
7.稿定设计2024免费版下载稿定设计app免费版是一款功能强大的图片和视频编辑软件。用户可以使用它来快速制作各种精美的图片或视频,并适用于多种场景,如朋友圈、新媒体、电商、电子贺卡、动态海报、公众号首图等。除了使用模板,用户还可以自己创作,并使用大量的图片和视频素材进行编辑。该软件中还提供了丰富的模板、画笔、标签、水印等功能,帮助用http://www.winwin7.com/azapp/98123.html
8.在线PS软件Photoshop网页版稿定设计在线PS软件 Photoshop网页版介绍 在线PS软件,一款在线PS图片(照片)处理软件工具/PS在线图片编辑器,相当于Photoshop网页版(当然不是官方的),ps精简版,绿色免安装,免下载,直接在浏览器打开就可用它修正,调整和美化图像,Photoshop该有的功能都有,而且免费,不过使用的时候需要登录。 https://www.ahhhhfs.com/28289/
9.稿定设计app免费版下载稿定设计官方下载安装稿定设计是一个多场景终端在线设计平台,可以在网页、电脑客户端、手机端等使用,海量优质模版根据不同使用场景和尺寸需求提供优质解决方案,汇聚有创意的内容和设计工具,是一个一体化的设计在线平台,让你轻松搞定创意需求,随时随地创作,让设计变得更加简单。稿定设计合集提供稿定设计手机版、稿定设计电脑版等不同的版本给http://www.downcc.com/k/gaoding/
10.稿定设计app稿定设计app安卓免费版下载稿定设计app是天天向商改名升级而成,软件拥有酷炫视频,海报模板,批量水印,视频剪辑,拼图拼视频等诸多功能,觉得不错的朋友欢迎前来下载使用。 软件特色 稿定设计(天天向商)是时下热门的一款兼顾小视频制作与图片制作的全面型工具APP, 不需要复杂的操作就能帮你一键生成创意小视频、快速制作精美图片海报,助你引爆微信、https://m.zhuayoukong.com/soft/11096.html
11.稿定设计app最新版下载稿定设计5.0.2安卓最新版app下载稿定设计app最新版是一款非常好用的图片编辑工具软件,这里面有超多的小工具可以使用,可以对图片进行一定的编辑个修改,每次在进行编辑的时候都可以获取记录,在下次的时候可以接着进行图片的编辑,用户还可以把编辑的工具放在手机桌面,在使用起来的时候更加的方便。 稿定设计app最新版怎么用 1、进入软件中,就可以选择想要https://app.ali213.net/android/614917.html
12.在线PSPS软件网页版,ps在线图片处理工具photopea稿定设计PS是一款专业精简的在线ps图片处理软件,免下载、免安装,直接在浏览器打开网页版就可随时随地用它修正,调整和美化您的图片。 在线PS软件网页版-Photopea:一站式设计工具 概述 欢迎访问,您的一站式设计工具。我们提供强劲的在线PS软件,以及多种实用的图片处理工具,满足您的设计需求。无需下载,随时随地https://www.baobaocun.com/thread-695166-1-1.html
13.稿定设计助理PS插件欢迎您使用稿定设计助理!稿定设计助理是一款多场景商业视觉在线设计平台,由厦门稿定股份有限公司及其关联公司(以下称“我们”、“平台”或“稿定设计助理”)运营。我们非常重视您的隐私和个人信息保护,并依据《中华人民共和国网络安全法》、《个人信息保护法》及相关法律法规制定了《稿定设计助理隐私政策》(“本政策”)作https://pszhuli.com/team/privacy
14.搞定设计怎么使用公众号首图模板?搞定设计使用公号首图模板教程搞定设计怎么使用公众号首图模板呢?今天小编就给大家介绍具体的操作流程,感兴趣的小伙伴一起来学习吧。 稿定设计 v5.2.0 安卓手机版 类型:图片拍照 大小:157MB 语言:简体中文 时间:2024-06-20 查看详情 搞定设计使用公号首图模板教程 1、打开稿定设计,进入模板分类,找到上方的图片选项。 https://www.jb51.net/softjc/825090.html
15.稿定设计怎么使用稿定设计使用方法1.在搜索引擎搜索:稿定设计或者稿定;2.进入官网后点击进入稿定抠图,上传图片3.使用蓝色笔刷,画在想要保留的部分 使用红色笔刷,画在想要去除的部分4.加个背景色,效果更清晰 当背景显示时,表明图片当前为透明背景。5.秒出图,出完图就可以直接保存到本地就可以 ENDhttps://m.liqucn.com/article/22736.wml
16.稿定设计电脑版下载稿定设计官方版免费下载安装v1.3.11稿定设计电脑版是一款非常专业的设计软件,提供众多的设计模板以及丰富的编辑功能,即使非专业人士也可以设计出好看的作品,满足用户日常工作所需。软件打破传统的工具和技术限制,可以根据不同场景不同尺寸来创建海量优秀的模板素材,满足中小型企业、自媒体、学生、电商运营、个体运营等不同人群的需求,简单、使用。功能非常强https://www.32r.com/soft/60067.html
17.稿定设计app官方最新版下载稿定设计下载安卓版v4.21.1稿定设计app是一款图片编辑制作软件,软件提供了海量的模板在线选择,为你的灵感增添了许多方向,能够帮助用户快速生成平面海报等。享有最特色的海报制作以及音频处理功能,具有最特色的小窗口工具编辑,使用简单方便。感兴趣的朋友快来下载吧! 稿定设计软件介绍 稿定设计,全网累计下载超3亿人次 ·作图神器—只需替换图文,就能http://www.kkx.net/az/57866.html
18.稿定设计做图做视频必备在线设计神器稿定设计网页制作 个性化网页制作 傻瓜式网页制作、发布,永久保存 稿定设计隐私政策 稿定设计非常重视用户的隐私和个人信息保护。请您仔细阅读本隐私政策并确定了解稿定(厦门)科技有限公司(以下称“我们”、“平台”或“稿定设计”)对您个人信息的获取使用规则。阅读过程中,如您有任何疑问,可联系我们的客服(0592-5023308https://www.xiaolizhijia.com/3725.html
19.稿定设计干什么用的?让用户可在线轻松完成公告设计,实现更快更有效的信息传递。据统计,每月有20W+的用户通过钉钉使用稿定https://www.zhihu.com/question/367272646/answer/2419647450