<style> .transformer-react-render { border: 1px dashed #959da5; border-radius: 5px; display: block; } </style> ## 效果一瞥 使用 [snap-fade-away](https://github.com/imcutt

## 问题 在书写 markdown 文本的时候，为了追求好的体验，需要在 markdown 预览页面中，高亮且定位在正在编辑的节点上，如图 <img src="https://i.loli.net/2018/10/28/5bd58a95c6b7d.gif" alt="" width="700" height="415" /> 很显然，这个问题需要转换成两颗树（抽象语法树）的差异对比，

## 前言 16 年在 SF 中发布了文章 ["探究SegumentFault Markdown编辑器"](https://segmentfault.com/a/1190000006260582)，目的是仿 SF 线上书写 Markdown 文档的体验：**高亮定位修改节点** 在上述文章中的工具已经不再维护（😢代码写太乱），而且是在浏览器中书写 markdown 文本。 于是现在使用全

## 起因 作为前端工程师，日常开发离不开 psd 文件。 但是日常开发的一个小弹窗页面，它的 psd 居然需要 **30+Mb**，所以经常得定期清理 psd... 对于我一个 PS 小菜鸡来说，用 PSD 无非只是需要用来度量元素大小（元素间距），查看属性等简单的功能。 ## 思考，对比 相对比于 sketch，sketch 具有 [sketch-measure](https://g

目前前端开发都推崇一致组件化的开发思想，即看到业务页面之后，先不着急写页面；而是先观察，把一些具有共性的UI控件包装成组件（如 React/Vue/Web Component）。这样做的好处不言而喻，提供组件复用率，团队开发效率提升明显。 既然组件化的思想这么重要，那么对于某个组件单元，它本身是不依赖外部环境（如外部静态资源）的；同时它内部也需要有它自己的单元测试、文档，甚至包含 DEMO

今天给大家介绍一个轻量但神奇的国际化库[tiny-i18n](https://github.com/imcuttle/tiny-i18n) 在我们的项目日益庞大的情况下，国际化的字典愈变愈大，国际化文本的维护是一个问题； 有时候修改一个字段，查找就花费了很大的时间功夫。 这个时候 tiny-i18n 中的 [@tiny-i18n/react-live](https://github.co

使用 Mac 的同学需要先安装 [brew](https://brew.sh/)， 然后使用 brew 安装 [asciinema](https://github.com/asciinema/asciinema) 即可 brew install asciinema # 开始录制屏幕，数据放在 local.json 中 asciinema rec local.

突发奇想地想把自己的一些比较有意思的个人项目做个较为详尽的归纳。 接触编程是在大一(2013年)学习C语言 ## 开源中国 https://www.oschina.net/code/list_by_user?id=2347565 ### 学生成绩管理软件（链表） ### huffman ### *网型结构的可视化及其可视化插入边 ### 大创 + 订票系统 ### 八数码(ai)

## 抛出问题 - 情景A 小明在网上查找资料时（如百度百科、wiki），觉得网页上的一些话（错误或是重点）需要记录下来，于是使用截图的方式记录下来。 截图虽然比较方便，但是不方便还原及随后的查阅。 - 情景B 小红和小蓝想对网上的一篇文章一起讨论学习。于是他们事先各自完成自己的任务，最后把总结文章互相分享出来。 上面的情景有统一问题是：需要共享自己在同一个网页上的数据。 其实类似的问

[walli](https://github.com/imcuttle/walli)一个可管理不可变的数据校验库 ### 什么时候需要用到 walli 书写工具包的时候，需要校对用户输入参数的（复杂数据结构）配置, 类似于webpack中的配置校对 和 react中的 prop types ### 简单栗子 如定义一个person的数据结构 - typescript 定义 ```