最近使用React+Ant Design进行一个网站开发，这个客户的网站有个特点，按钮特别的多。Ant Design 的 Type 有很多种，如下： primary | ghost | dashed | link | text | default 这几个Type分别对应了不同的Button样式和状态，每次遇这种情况都要去找Antd的API查看，有点低效，于是想找一种快捷的方式，大约看了一下VScode的Snippets里带了Choice这种功能，正好满足我的需求。 先添加一个Snippet 自定义snippet的方法可以参考： …
阅读更多
在之前的文章《开发一个基于uni-app的imgcook DSL》中开发了一个团队使用的uni-app的DSL，基本可以凑合使用了。前几天在团队内做了个imgcook小分享，这里也记录一下使用imgcook辅助前端开发的过程。
阅读更多
最近看到了阿里的前端智能化的实践：imgcook 由设计稿一键智能生成代码的大厨，由设计稿直接生成前端代码，试用了一下，比zeplin和蓝湖做的更进一步，可以直接集成到项目开发的过程中。但发现一个问题，imgcook官方支持的DSL并不多，我们团队是使用Uni-app做跨端开发的，希望能将设计稿直接生成符合uni-app的代码，但官方没有，找了一个其他开发者贡献的，也没有找到合适的，于是自己动手写(组装)了一个。
阅读更多
Git目前是毫无争议的项目版本管理的王者，而前端的项目大了之后我们通常需要利用一些Git Hooks来保证项目的质量。包括但不限于： eslint tslint 单元测试 E2E测试 style lint commit lint others checks 有的同学可能要说，没有这些项目质量也会很好，是的，一般这么说的，要么项目小，要么团队人少。如果你的项目人数>30，又是多分支开发的话，就会大概率需要这玩意。 初识Husky 原生的Git Hooks写法比较麻烦，Husky 做了比较好的封装。截止本文发布之 …
阅读更多
使用pm2在本地启动了2个项目，2个项目都是使用了3000的端口，发现2个项目都启起来了。这是什么黑科技啊？ 定位一下3000端口 先定位了一下3000端口的占用情况。 lsof -i tcp:3000 结果： 是73333 看一下pm2 pm2 ls PID并不是73333 什么关系 使用下面命令 ps -ef | grep 95706 ps -ef | grep 95656 原来是 PID 和 PPID， 所以就明了了：父进程进行端口监听，然后分发给子进程进行处理。 思考 那2个项目中的API路径一样怎么办？
阅读更多
pm2 设置环境变量有2种方法。 方法一 NODE_ENV=XXXXX pm2 XXXX 方法二 使用一个单独的配置文件，可以参考官网 https://pm2.keymetrics.io/docs/usage/environment/ 如： pm2 start ecosystem.config.js --env production 设置不生效 尝试了上述2种方法发现都不行，最近找到解决方案。如果实例已经建立了，即在 pm2 ls 中可以看到，那先需要运行 pm2 delete YOUR_INSTANCE 把原来删除才可 …
阅读更多最近MacOS系统更新，顺便把XCode的版本也进行了升级，但升级之后出现了错误： [RCTModuleMethod.mm:376] Unknown argument type '__attribute__' in method -[RCTLinkingManager getInitialURL:reject:]. Extend RCTConvert to support this type. 解决方案 参考这 …
阅读更多
在前端开发中给一个 div 添加边框，一般是使用border属性。 如下： <div class="box"> </div> CSS .box { background: blue; width: 100px; height: 100px; border: 3px solid red; } 效果图： 使用box-shadow实现 使用box-shadow也可以实现类似效果。 box-shadow: 0 1px 0 0 red; /* Border bottom */ …
阅读更多Moment.js 是前端中一个非常强大的处理日期时间的库。有多强大？以致于每次引用它的时候都要考虑一下到底是不是需要一个这么重的库引用进来。而最近一个项目中用到了多语言的日期格式，需要将日期格式化成当地的日期显示格式，比如日本的金耀日、月耀日等等。 开始直接使用了Moment.js的locale函数 moment.locale('ja'); 结果不行，还是显示的中文的日期，后面在github上找到一个解决方案 import "moment/locale/ja" …
阅读更多