漆黑菌的博客

也许面向工资编程才是先进生产力的发展方向...

vue-cli5+vue3整合monaco-editor和monaco-yaml

demo项目地址 https://github.com/DarknessChaser/vue3-monaco-editor-demo 一些踩坑总结 神奇的网络问题 配代理+有点耐心。npm i执行翻车很正常，心态要好。 注意版本信息 源代码和npm版本的差异 其实现在monaco-editor和monaco-yaml main分支上都已经有官方demo了，是很棒的参考。但是需要注意的...

本文章由 漆黑菌 于 2022年03月10日 发布

科学使用Sourcetree和Gitlab

起因 Sourcetree使用HTTPS访问公司Gitlab的时候总是无法正确验证token。经过实验是因为公司Gitlab禁止账号密码登录（GitHub 2021年年底应该也禁用了），因此需要使用SSH方式。 设置 Sourcetree SSH访问支持两种模式，一种是OpenSSH，另一种是PuTTY。建议使用OpenSSH，因为右下角不会单独开一个SSH工具的图标。参考文章如何在 Wi...

本文章由 漆黑菌 于 2022年02月23日 发布

一些也许有用的解决node内存不足的方法

也许的问题 有的时候是因为依赖有问题，需要升级or降级。但是也可以先设置一下看看是不是真的只是内存不够用。ps: vue-cli在我的机器上默认使用的内存是2G。 验证是否设置成功 在node中运行 console.log(v8.getHeapStatistics().heap_size_limit/(1024*1024)); 设置方法 使用环境变量，跟系统有关，Linux系列e...

本文章由 漆黑菌 于 2022年01月24日 发布

web端常见editor和terminal解决方案

editor Ace (editor) npm的ace-builds@1.4.12 357.5kB 97.9kB 爹是AWS，主要产品是AWS Cloud9，更新有保障。 开源许可证是BSD New，可以二次打包商用。 基础使用JavaScript上色功能+主题+联想+worker 372kb（editor基础）+78kb（显示联想的语言基础支持） + 20kb（JavaScript支持）...

本文章由 漆黑菌 于 2021年09月29日 发布

前端git提交时只eslint检查增量修改

需求背景 现在在维护的代码已经写了很久了，一开始的时候可能并没有严格按照eslint去写，而且已有代码量也很大。在新增lint检查后，每次提交前如果进行全量检查那么就有点浪费时间了，而且还很有可能因为历史代码报错提交不上去。所以最好只检查已改动的代码，一点一点慢慢来。 参考文章 lint-staged官方文档https://github.com/okonet/lint-staged hu...

本文章由 漆黑菌 于 2021年09月01日 发布

前端使用buildx构建docker多架构镜像

需求背景 docker支持一个镜像tag对应多个架构镜像，并根据对应环境自动拉取。构建方式大概有两种，一种是传统方式，先分别构建不同架构的镜像，然后再聚合成一个。还有一个是通过buildx工具（对环境有较新要求）直接构建一个多架构镜像。buildx直接内置了模拟器在一台机器上就能构建多种架构的镜像，并自动聚合。 本次为了后面构建方便选择了使用buildx方式，这样就不用手动聚合了。 参考...

本文章由 漆黑菌 于 2021年08月06日 发布

小探web worker与任务分片

demo 渲染大量随机不重复颜色div测试 思路 JS只有单线程，当执行大量任务时可能阻塞渲染线程 web worker提供了额外线程能力，可以把较为复杂的计算任务丢给worker线程去做，（现在Monaco-editor就会把语义分析任务丢给worker） requestIdleCallback接口提供了闲时执行的能力 把复杂任务串行化，使之可以中断。这样就可以把浏览器...

本文章由 漆黑菌 于 2021年07月28日 发布

小探min-height与min-width

起因 某次周会分享的时候，同事介绍了aspect-ratio属性。有个很好玩的现象，当设置了aspect-ratio和min-height:0的时候和只设置了aspect-ratio的时候，虽然浏览器里min-height的显示都是0，但是表现会很不相同。详情可见参考文档1。第一种设置的时候，子元素超过比例限制会撑大父元素。但是第二种不会。 参考文档 https://drafts.c...

本文章由 漆黑菌 于 2021年06月28日 发布

键盘支持总结

tabindex -1 只能通过js或鼠标focus 0 键盘tab，js和鼠标都能focus 当tabindex≥1的时候，按tab时会按照数字从小到大切换。但是0是排在其他数字之后的。比如有0、1、2、3，那么顺序是1-2-3-0 给svg图标组件添加类似button的行为 button可以被tab选中，选中后键盘输入enter或空格都会触发click效果。disabl...

本文章由 漆黑菌 于 2021年06月16日 发布

小探 flex 渲染机制

起因 在新dao-table组件中使用了flex布局，对td设置类似flex: 1 1 0的属性可以让子元素等分空间。直到后面给th和td添加了不同的padding，然后th和td就对不齐了。 flex-basis 与 width flex-basis在flex中类似普通布局中的width，在flex中设置width是不会直接生效的。看上去给flex元素设置width会影响元素尺寸，很多时...

本文章由 漆黑菌 于 2021年06月01日 发布

FEATURED TAGS
helloworld Linux 记录生活 微信 JavaScript tomcat 开机启动 免费CDN VPS nginx 科学使用 网络工程 代理 vue webpack css 面试总结 npm 移动端 docker Windows checkbox vue-cli monaco-editor vue3 vue2 qiankun vue2.6 vue2.7 vue $slots vue $scopedSlots
关于我

人生梦想之一是和叶绿体整合，这样就可以不吃饭了。

✉️ 还没想好用哪个邮箱……

FRIENDS