- 博客(358)
- 收藏
- 关注
RSS订阅原创 MediaHub中的卡片实现进展汇报
今天刚从家赶到北京，北京和内蒙的温度差别真的太大了。给大家简单汇报一下目前MediaHub的进展：上节卡片需求我们分析了gamma中卡片的设计，经过几天的开发以及前期的积累，开发进度超预期，功能基本上已经开发完成，还剩2个功能需要开发，整体效果如下：在开发过程中核心技术点总结一下：1.卡片布局实现MediaHub 采用 chakra-ui 作为 UI 组件库，不得不说这个组件库是我用过最好用的，整...
2024-08-04 22:57:10
521
原创 Gamma复刻之卡片重要交互分析
从2023年开始陆陆续续花了很多业余时间，复刻了Gamma这款产品，给它起来一个新的名字MediaHub。Gamma的伟大之处在于它能够把文档、PPT（简单版）、网页融为一体，让你能够写出漂亮的文档，这样可以把文档也能用来演示，在很多场景就不用专门来做个PPT了。MediaHub整体效果图（功能仅仅简单实现，技术方案跑通而已）：MediaHub一个非常重要的设计是卡片，把你想表达的内容放到一个卡片...
2024-07-27 20:48:26
327
原创 使用Docker在Mac上部署OnlyOffice，预览编辑word、excel、ppt非常好
前端编辑word、ppt文档，开源免费方案并没有找到合适的，像wps、石墨文档都是自研的方案。实现过程中wps采用的svg方案，而石墨文档采用的是canvas，它们均是自己来实现编辑器，不依赖浏览器提供的编辑器（contenteditable）。在实现过程中，其实可以参考一些开源方案，比如OnlyOffice。端午节的时候在mac上使用docker部署了OnlyOffice，体验了一下，无论是对o...
2024-06-18 08:55:46
720
原创 39k的Quill编辑器，5年后起死回生，发布了2.0，了不起
很早之前，我写过一篇文章 quill已死，谨慎使用，现在看来它复活了。正如作者所说，开源最大的障碍是可持续性，尤其是编辑器这种项目，有永远改不完的bug，需要投入巨大的精力。Quill能够活过来，我猜最重要的原因是它背靠一个盈利的公司Slab。Slab这家公司是Quill的作者创办的，公司的核心产品就是文档编辑，把公司需求与社区结合起来能够保证Quill持续迭代，开源的好处也能够让业界帮你找出编辑...
2024-04-19 08:22:22
1214
原创 wangeditor与deaftjs的停止维护，2024编辑器该如何做技术选型（一）
wangeditor暂停维护的声明：wangeditor是国内开发者开发的编辑器，用户也挺多，但是由于作者时间关系，暂停维护。deaft的弃坑的声明：draft是Facebook开源的，但是也弃坑了，说明设计的时候存在很大的问题，不然也不会从一个坑跳到另一个坑。那么2024年编辑器该如何进行技术选型？编辑器这条路太卷了，开源编辑器有十几个，但是每个都会有一些问题，如果想做深入开发，做成类似飞书这种...
2024-04-12 08:55:15
1050
原创 飞书裁员，有看机会的大佬吗？
网上看到的消息，大概率是真的，飞书各个方向的裁员情况：视频会议(VC)：前端60%，服务端40%，云文档(CCM): 前端跟服务端都裁50%，即时通信工具（IM）:iOS端25%，PC端45%，安卓端（因为和鸿蒙兼容）不裁员，平台研发：20%，主端套件产品经理：60%邮件（Mail）研发90%用户研究：100%，全线撸掉飞书和我目前所在的团队做的事情比较匹配。我所在的部门属于百度文库，目前主要...
2024-04-08 22:49:13
225
原创 编辑器的一些碎碎念
做编辑器将近2年时间，越深入发现坑越多，社区中也没有比较好的资料，基本都是非常浅的资料，比如如何接入、API介绍之类的。前端编辑器开源的非常多，至少有10+ 个，不过目前知名的主要有Slate、ProseMirror、Quill、Lexical，但是当你深入这些编辑器总会遇到一些问题。因为我一直使用Quill，就聊一些Quill的问题吧。Quill在Safari浏览器上表现的非常糟糕，但是业务场景...
2024-03-05 09:29:12
1200
2
原创 Quill编辑器在Safari浏览器中的一个坑
最近使用 Quill 时在Safari下遇到一个坑，内容输入后，在某些浏览器版本无法删除。这个坑有2个”特色“：第一：打开调试面板后，该问题自动消失这让调试起来非常困难，只能通过把日志信息写入到DOM中进行调试。还有一种手段，观察有问题和无问题的DOM结构，找出差异点。第二：使用React来渲染编辑器，该问题也不会存在我有一个编辑器demo使用的是React，使用了Quill最新的SDK，在这个项...
2023-06-17 10:26:08
273
原创 体验了一把ChatGPT4
不得不说ChatGPT对我的学习效率有极大的提升，它就像一位老师，不管有什么问题，都可以得到很好的答案。但是前段时间gpt3.5账号被封了，最近搞了个gpt4。市面上目前好像没啥可以白嫖的账号，基本都是免费使用几次，然后需要付费才能使用。使用gpt4能做哪些有用的事情呢？一、翻译对于有些英文文档，可能只能理解90%的内容，剩下的内容只能靠翻译软件，但是翻译软件翻译出来的内容有时候非常差。相比于翻译...
2023-04-09 13:08:30
2261
原创 条件渲染
组件经常需要根据不同条件显示不同内容。在React中，你可以使用类似于if语句、&&和?:运算符的JavaScript语法有条件地呈现JSX。你将学到：如何根据条件返回不同的JSX如何有条件地包含或排除一段JSX在React代码库中常见的条件语法快捷方式有条件地返回JSX假设你有一个PackingList组件，渲染多个项目，这些项目可以标记为已打包或未打包：functionIte...
2023-04-05 21:23:58
553
原创 使用JSX编写标记
JSX是JavaScript的语法扩展，它允许你在JavaScript文件中编写类似HTML的标记。虽然还有其他编写组件的方式，但大多数React开发者都喜欢JSX的简洁性，大多数代码库也使用它。你将学到：为什么React将标记和渲染逻辑混合在一起JSX与HTML的区别如何使用JSX显示信息JSX：将标记放入JavaScript中Web是由HTML、CSS和JavaScript构建的。多年来，We...
2023-03-29 07:20:01
277
原创 导入和导出组件
组件的魔力在于它们的可重用性：你可以创建由其他组件组成的组件。但是，随着你嵌套越来越多的组件，将它们拆分到不同的文件中非常有意义。这样可以让你保持文件易于扫描，并在更多地方重用组件。你将学到：什么是根组件文件如何导入和导出组件何时使用默认和命名导入和导出如何从一个文件中导入和导出多个组件如何将组件拆分为多个文件1.根组件文件在“你的第一个组件”中，创建了一个名为“Profile”的组件和一个呈现它...
2023-03-28 07:23:50
360
原创 React学习笔记
平时使用React比较少，但是最近在搞Lexical编辑器，不得不系统学习一遍React。最近React官方文档进行了升级，体验变得更好了。打算从官方文档开始学习，每天发一篇官方文档的翻译，用一个月的业余时间系统学一遍。言归正传你的第一个UI组件组件是React的核心概念之一，它们是构建用户界面(UI)的基础，这使它们成为开始学习React的理想起点！你将学习以下内容：什么是组件组件在React应...
2023-03-27 07:09:51
228
原创 React Or Vue
前端生态不得不说非常强大，不断有新的框架出现，总的来说前端正变得越来越好。随着框架的不断出现，技术选型也是一件很头疼的事情。最近在研究编辑器相关的知识，编辑器有很多开源库，比较出名的有 Slate 和 Lexical，它俩的目标都是做编辑器框架，以满足更复杂的编辑场景，类似飞书、语雀这种场景。Slate开源有6年之久，基于 react 实现；Lexical 最近由facebook开源，虽然不管 ...
2022-11-19 11:54:50
231
原创 石墨文档编辑器用的是开源库吗？
石墨文档是一款非常优秀的在线编辑器，在做编辑器的时候，发现石墨文档用的是 Quill，不过肯定是在 Quill 的基础上进行了二次开发，对源码进行了大量的修改。那我们简单聊聊 Quill，以及我在做在线编辑遇到的一些坑。Quill 是一款开源的编辑器，star32k，目前已经处于停止维护的状态，能满足 90% 的编辑场景需求，支持公式、图片、文本等常用编辑功能，但官方并没...
2022-06-19 15:54:01
3310
原创 正式成为 ECharts Committer
ECharts是前端非常知名的图表库，最初由百度开源，2018年已捐赠给Apache 基金会孵化， GitHub 截图如下：那么什么是 ECharts Committer？简单概括为：表示项目社区对你的贡献有充分的认可获得对项目的“写权限”，表示项目社区对你的信任获得 xxx@apache.org 邮箱，表示对你开源的贡献我想成为EChartsCommitter ...
2022-05-29 10:41:25
189
原创 关于研究自动埋点的一个新发现
前段时间做过一个小调研：你还在手动埋点？手动跑数据？，后面就一直关注这个方面的知识，各家的方案都不同。数据统计这件事情，大厂99%都是自研，也不会使用第三方服务。数据统计这件事情不只是前端的事情，而且要涉及到后端，核心需要做两件事情：第一，前端需要上报数据；第二，后端能够把数据保存好，能够快速获取数据；当需要分析数据的时候，能够快速地通过平台直接查看，每次做需求的时候，能...
2022-05-04 11:11:29
229
原创 FE 项目 1.4k star 了
19年开始写前端，不到3年时间，这期间能够帮助我快速成长的关键点是「积累」与「自律」。说到「积累」，FE（下图）这个项目是最好的说明，记录了我从开始学前端到现在所学到、用到的所有知识。对每个不熟悉的知识点，都会进行一次全面的学习和总结。其中最重要的一点是对基础知识的掌握，不要太依赖于开源库。对于经验不足的前端来说，最大的挑战是「基础薄弱」和「项目经验不足」，这点其实可以看...
2022-04-16 11:18:58
254
原创 推荐章老师新书《代码的艺术》
前段时间看到章老师的新书《代码的艺术》出版了，一直想给大家推荐一下，太忙，没顾上。今天给大家推荐一下。对与写大型项目来说，我们需要关注代码的质量，前期需要考虑到后续业务发展时的各种场景，做好系统设计。团队内部难免会有人才的流失，很多重要的项目到最后就没人懂了，在不了解整个系统的时候，对代码进行修改，这样会导致项目越来越难维护，bug不断，往往改了一个 bug，引出 n 个...
2022-04-01 08:37:06
244
原创 2022接下来要做的事情
早晨本来起来打篮球锻炼身体，正好下雨，那就把年度规划写完吧。我每年都会有有一次重要的规划，去年一年完成的不错，也得到了相应的回报。目前大环境不太好，开始提前步入35岁后的焦虑，有了焦虑后开始想35岁以后的事情，早点做准备，别到35岁的时候，突然被裁，还不知道为啥，找工作四处碰壁。2022 我主要做下面这几件事情：第一：编辑器编辑器对于前端是最有挑战的事情之一，难度非常高，...
2022-03-30 08:13:52
183
原创 编辑器实现越来越"卷"
编辑器据说是前端中的一个深坑，我们看看有多深。第一代编辑器，起初编辑器的实现方式是由 contenteditable 和 document.execCommand 这两个东西实现的。con...
2022-02-27 17:46:56
263
原创 quill已死，谨慎使用
大家好，很长时间没更新文章了，前段时间比较忙，接下来这段时间又能踏实搞点技术，学点东西了。编辑器quill 发布将近10年，现在已经不维护了：所以你在做编辑器时，切记不要选它了！！！你可能...
2022-02-26 18:02:48
5211
4
原创 Vue 将切换默认版本为 vue3
Vue将在2022年2月7日将默认版本切换为 vue3，这意味着 vue3 的时代来了，在 vue 官方修改之前，我们需要检查下我们的项目。升级前我们需要注意点什么？1、检查一下自己项...
2022-01-21 22:28:00
2533
原创 你还在手动埋点？手动跑数据？
是的，我们还是手动埋点，手动跑数据！！！但是这不是一个好现象，每次开发需求时，最痛苦的就是加埋点了与跑数据了。我们的流程是这样的：前端手动埋点 ->上报后端-> 需求上线 ...
2022-01-19 08:48:54
655
原创 你知道VSCode用的编辑器是什么吗？
VSCode 是我每天都在使用的代码编辑器，非常好用。说实话，以前我知道 VSCode 是开源，但是不知道 VSCode 最重要的组成部分编辑器，竟然是一个单独的项目，而且开源，采用的是 ...
2022-01-16 21:38:49
3007
原创 开源作者丢了个炸弹，记colors.js与faker.js事件
这几天出现的这件事情对我感触颇深：1、faker.js库删除2、colors.js 中「作者恶意」加入了恶意的代码colors.js 加入死循环colors.js 是一个可以在控制台输出...
2022-01-11 09:25:46
1233
原创 推荐一个学习Vue3的项目
上周日看了一个开源项目 PPTist，实现了一个在线PPT编辑与预览功能，当然与Office 中的PPT相差还比较多，不过已经非常优秀了，而且整个UI效果做的很好。比很多线上项目做的都好。...
2021-12-10 09:03:46
1120
原创 最近做了痔疮、肛裂手术，痛不痛？
本文可能会引起不适，可以选择休息的时间阅读，写本文的目的希望更多的朋友能够重视健康。今年8月份的时候，出现了肛裂，主要的症状是????出血，便后很疼，有时候疼痛会持续一上午（疼痛指数⭐⭐⭐⭐）。...
2021-11-27 21:52:36
789
原创 Safari难道是下一个IE？兼容性这么“差”
最近被 Safari “玩”了一把，为了适配它，做了不少的工作。Safari 在Canvas 上确实留了一手，让我们不得不妨，不过正因为有了Safari 的限制才能够让我的程序更优，占用...
2021-10-31 20:42:53
1854
原创 留意 drawImage 的坑，Canvas教程大升级
前段时间写了一篇文章容易被 drawImage 搞晕坑1：在 Safari 浏览器中没有任何报错信息，但是图片渲染不出来；解决方案：出现这个问题的原因，网上说是 Safari 的 bug，...
2021-10-26 08:45:14
575
原创 简看 Canvas 源码，突发奇想
最近都在和 Canvas 打交道，前端使用 Canvas 的方式真的太简单了，你简单调用几个 API 就能够给你绘制你想要的内容，比如文本、图片、视频。但是有些 API 摸不准会不会影响性...
2021-10-17 22:40:37
901
原创 扩充了前端解决方案宝贝
在转前端过程中，我写了 300 多篇文章，通过不断的输入到输出，让我快速弯道超车：也写了很多 demo，它们在一定程度上能帮我更深入理解一些知识，我都把它放到了我的 GitHub 上：我平...
2021-09-27 08:25:56
124
原创 vite 在服务器启动时如何常驻？Shell 设置代理；nvm 管理 node
最近在做一个项目，用的是 vite，本地开发没啥问题，但是如果想把该项目在开发机上启动，如果以常驻的方式启动后即使 shell 关闭后，页面也可以正常访问。我用的是 pm2 对 node ...
2021-09-14 08:44:19
1323
2
原创 容易被 drawImage 搞晕
Canvas 使用 drawImage 进行绘图，但是这个 API 并不是那么“好用”，我也踩了一些坑，今天彻底搞懂它。首先看下它的定义：输入源定义：type HTMLOrSVGImage...
2021-09-13 08:15:12
287
原创 Fabric 助力可视化，效率提升100倍
最近被一个问题困扰着：使用 Canvas 绘制的文本，如何实现文本选中复制功能。类似这种效果，被选中的文字高亮：如果使用 HTML 渲染文本，浏览器会自动支持文本选择，无需开发者处理，而「...
2021-09-07 08:39:33
702
原创 玉伯直播推荐的 3 本书、聊到的一些内容
最近好长时间没发文章了，主要是因为最近在做新一代排版引擎的实现，目前大部分功能已经实现，不过有些地方实现的不是很好，没有达到我心中的预期。后面如果有机会和大家聊聊如果设计一个易扩展、易集成...
2021-09-04 15:20:05
234
原创 在 web 中做 PPT 是什么体验
这篇文章是昨天的，今天补发一次，看过的小伙伴不用看了。能不能把 Keynote、Office 制作 PPT 的功能搬到 Web 中实现？这些开源作者们正在做这件事情，挺有意思。1、PPTi...
2021-08-25 08:26:25
345
原创 用 web 实现 PPT 功能都有哪些库
能不能把 Keynote、Office 制作 PPT 的功能搬到 Web 中实现？这些开源作者们正在做这件事情，挺有意思。1、PPTist看到这个库有点震惊到，这个效果太棒了！一个基于 V...
2021-08-24 08:32:16
1644
原创 把数学学好才能画好图形
哎，本来挺相信微信后台文章自动保存功能的，结果前几天写了一篇文章没保存，郁闷！言归正传Canvas 可以利用这几种方式绘制图形：1、使用 lineTo 画直线；2、使用 rect 画矩形...
2021-08-18 08:27:28
142
原创 可视化 demo 助你一臂之力
可视化对前端来说属于一个重要的方向，毕竟它「能够把繁杂的数据表现的通俗易懂」，而且还能够「做出一些特效」，比如一些动画效果。其实腾讯文档，微信读书在 web 方向都用到了 canvas 进...
2021-08-15 21:59:05
238
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人