我用三个月时间仿造了一个稿定设计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.稿定设计稿定设计素材设计免费试用评价“稿定设计”是稿定(厦门)科技有限公司推出的一款在线设计工具,属于平面设计类别。其主要用途是为用户提供高质量的图片、海报、名片、PPT等设计素材和模板,以及各种设计效果和滤镜,帮助用户快速制作出精美的设计作品。 该产品提供了丰富的设计元素和模板库,涵盖了各种https://www.jingxuanxing.com/space/396/
2.稿定设计安卓版稿定设计5.13.1下载「热点日历」 实时更新的节日营销设计模板能迅速适应主题,提高宣传效果,节省时间并激发创意。 ==稿定设计,满足生活所需的完美解决方案== 「自媒体用图」丰富的爆款模板,涵盖文章配图、热点追踪、节日海报与宣传图,轻松应对各种创作需求,出稿不求人 「商家用图」新品上线、成交图、朋友圈晒图、营销海报,与话术一应俱https://app.zol.com.cn/android/179235.html
3.AI创意工具集合:稿定AI,绘图嘲一键生成稿定AI还配备了一个丰富的创意素材库,包含了各种矢量图形、纹理、字体等设计元素这些素材不仅质量高、种类全,而且全部经过AI优化处理,确保用户在使用时能够获得最佳效果无论是平面设计、UI设计还是插画创作,用户都能在这里找到所需的素材。 ### 三、稿定AI的应用场景 #https://www.aixzzs.com/list/70454.html
4.稿定设计app免费版下载稿定设计免费版厂商联系方式:官方微博:稿定设计_天天向商 https://weibo.com/u/5572305763 官方网站:http://www.ttxsapp.com 官方微信:txsapp001 邮箱:help@ttxsapp.com 稿定设计app,一般又称天天向商微商版,稿定设计天天向商,稿定设计在线制作app,稿定ai,稿定ai设计。 ·稿定设计,累计下载超4亿人次·只需改字换图,即可快https://m.liqucn.com/article/530882.wml
5.UI设计全解析:职责技能与效率工具UI设计师将创意和概念具体化为界面设计。他们运用色彩、排版、图标、按钮等设计元素,合理规划页面布局,确保用户界面的可读性和易用性。即时设计集成了UI设计师所需的强大功能,如矢量图形编辑、蒙版图形工具、钢笔工具、自动布局、组件变体、智能原型动画等,是一款高效的在线协同UI设计工具。 https://zhuanlan.zhihu.com/p/9406093696
6.稿定设计是干什么用的理想股票技术论坛稿定设计是一种专业的设计软件,通过使用此软件,用户能够进行各种设计任务,包括平面设计、UI设计、插画设计等。其功能丰富,界面友好,操作简单,适用于设计师和非设计师。它的特点在于快速、高效、灵活,能够满足用户不同的设计需求。使用稿定设计,用户可以节省时间和精https://www.55188.com/tag-4843796.html
7.广告文案人值得收藏的35个实用网站在线海报设计网站 创客贴 一款简单易用的线上图形设计神器,功能十分强大,涵盖了新媒体营销多个场景。 网址:www.chuangkit.com canva 同样是简单拖拽操作,一张图就完成了,自家小程序和APP也有,直接手机出图。 网址:www.canva.cn 稿定设计 专为电商运营者、新媒体运营人员和作图爱好者打造的在线智能化平面设计工具。https://www.haoad123.com/article/2592.html
8.稿定AI简介及官网稿定AI是什么功能收费常见问题稿定AI是干什么用的? 稿定AI是稿定设计推出的集合了多种AI设计工具的在线平台,它可以帮助用户轻松实现高质量、高效率的设计创作,节省时间成本。 如何下载稿定AI生成或编辑后的图片? 下载前,请先确认您是否已经登录账号,并且是否有足够数量或规格(清晰度)可用下载次数(免费版用户每天5次免费下载次数;付费版用户每天50https://www.aieva.cn/sites/946.html
9.推荐8个超好用的在线做图网站!不能分分钟出点海报、封面图、创意图什么的 还怎么昂首挺胸在办公室里混 不会PS没关系,不会做图可不行 所以今天老贼再给大家推荐一波好用平台 不仅能帮你省掉不少时间 还能帮你漂漂亮亮麻利儿地干完事 01.稿定设计 稿定设计是一款专为电商运营者、新媒体运营人员和修图爱好者打造的在线智能化平面设计工具。 https://www.niaogebiji.com/article-513019-1.html
10.稿定设计助理PS插件稿定设计助理PS插件,一款基于PS软件开发的、提供一系列高效设计工具的设计插件,开启高效设计,帮助设计师轻松解决繁琐臃肿的PS设计工作量,是广大设计师的必备PS设计神器https://www.pszhuli.com/
11.一文稿定丨教学设计教学模式学情分析教学策略教学内容本文内容包括教学设计的概述、教学设计的理论基础、国际教学设计的研究热点、教学设计的模式、教学设计过程的要素之学习需要分析、教学设计过程的要素之学习内容分析、教学设计过程的要素之学习者分析、教学设计过程的要素之教学目标的确定、教学设计过程的要素之教学策略的选择与制定、教学设计过程的要素之教学评价的设计。 https://ygjyy.lcedu.cn/index.php?r=space/school/theme/content/view&id=908076
12.稿定设计和包图网哪个好有什么区别优缺点稿定设计和包图网对比页面从功能、价格、点评为您详细介绍了稿定设计和包图网哪个好,好用,区别,对比,优缺点,便于您更好的了解产品。https://www.36dianping.com/vs/cnvw.html
13.稿定设计官网版下载稿定设计5.0.2官网最新版下载稿定设计官网版是一款非常好用的图片处理和排版工具软件,这里有超多的功能可以使用,可以帮助你进行图片和视频的创作,进入软件的大厅中就可以看到很多的功能,一键就可以轻松的进行操作,在创作的时候可以获得软件提供的帮助,就可以轻松的使用软件,还在等什么,赶紧来使用吧。 稿定设计官网版怎么用 1、在进行图片编辑的时候https://app.ali213.net/aznew/614907.html
14.稿定设计app如何进行使用呢软件的使用教程介绍稿定设计app如何进行使用呢?相信很多用户都是听别人说的,才去下载这款软件的是不是,因为这款软件的操作方法非常的简单,而且里面还有丰富的设计素材随便使用。但是对于刚下载的用户却不知道怎么去使用这款软件了,只知道这款软件好,以下就是给新手用户们所带来的软件的使用方法介绍,让我们一起去看看如何进行操作吧。 https://www.shubang.net/news/3834.html
15.稿定设计怎么免费去水印稿定设计去水印免vip[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-voqsnJS6-1647763342873)(https://cdn.jsdelivr.net/gh/Qikaile/piccdn@main/img/Snipaste_2022-03-20_15-13-49.jpg)] 下面图片时我无会员导出的无水印稿定设计,感觉还是有点怪怪的。https://blog.csdn.net/qq_39010320/article/details/123615017
16.稿定设计终身vip免费版在这篇长篇博客文章中,我们将深入探讨关于稿定设计终身vip免费版的内容。 什么是稿定设计终身vip免费版? 稿定设计终身vip免费版是一种高级设计工具,提供专业级的设计功能和功能。 为什么选择稿定设计终身vip免费版? 使用稿定设计终身vip免费版,您将享受以下好处: https://tool.a5.cn/article/show/71918.html
17.我在稿定设计上利用背景和小素材作了个封面,没有版权问题,现在我想如果小说是出版售卖的,就属于盈利了 https://www.66law.cn/question/39981510.aspx
18.稿定设计软件实用技巧大揭秘:100个实际设计技巧深度解析稿定设计软件是一款广泛应用于平面设计、UI设计、电商设计等领域的设计工具。它以其简单易用、功能强大等特点,深受设计师们的喜爱。本文将深入解析100个实际设计技巧,帮助设计师们更好地掌握稿定设计软件的使用,提升设计效率与质量。 二、技巧解析 1. 快速选择工具:利用“选择”工具,可以快速选取图像中的元素,提高选区https://www.sousou.com/bk/231222.html
19.稿定设计怎么样?稿定设计如何收费?常见7大问题本篇为在线平面设计软件排行、在线PS工具集锦榜单,主要有以下7个部分: 1、稿定设计是什么? 2、稿定设计公司实力怎么样? 3、稿定设计有哪些功能? 4、稿定设计如何收费? 5、稿定设计有哪些客户? 6、稿定设计的产品评价如何? 7、和稿定设计类似产品有哪些? https://www.saasruanjian.com/article/1520
20.如何用稿定APP做简单的海报设计?稿定APP的基本操作一、常用海报设计的APP介绍 二、稿定APP的基本操作 下面就对这两部分进行介绍 一、常用海报设计的软件介绍 制作海报必须要用到的设备有手机或者电脑,那手机可用的APP主要有稿定和可画 如果追求作图功能多、效率高就可以用电脑。可画和稿定都有电脑网页版,功能比手机版更丰富,调节也更方便 https://www.wandongli.com/news_detail.html?id=26566