zyczyc70
获得徽章 1
- #青训营笔记创作活动#
2月20日 day8
今日学习
PDF
pdf的预览需要使用PDFJS这个插件,通过将文件流解析写到canvas上实现预览效果
前端实现docx、pdf格式文件在线预览docx
docx的实现需要使用docx-preview插件pdf的放大和缩小
pdf文件渲染后如果不能调整大小会因为源文件的大小和文件内容，出现模糊的问题,所以进行缩放渲染是有必要的不支持的文件提示处理
在这个文件中，目前只支持docx和pdf的预览，如果出现了不支持的文件，需要增加一个提示处理，告知用户 例如如下的文件提示收起展开评论点赞 - #青训营笔记创作活动#
2月23日 day7
今日学习
Kafka 和传统的消息系统(也称作消息中间件)都具备系统解耦、冗余存储、流量削峰、缓冲、异步通信、扩展性、可恢复性等功能。与此同时，Kafka 还提供了大多数消息系统难以实现的消息顺序性保障及回溯消费的功能。Kafka 不仅为每个流行的流式处理框架提供了可靠的数据来源，还提供了一个完整的流式处理类库，比如窗口、连接、变换和聚合等各类操作。展开评论点赞 - #青训营笔记创作活动#
2月19日 day7
今日学习
通过将文字设置为透明，原本 div 的背景就显现出来了，而文字以外的区域全部被裁剪了，这就是 background-clip: text 的作用。
因此，对于上述效果，我们只需要实现一个从透明到渐变色到透明的渐变背景即可，随着鼠标的滚动移动背景的 background-position 即可！
有了上面的铺垫，我们很容易的实现上述的苹果官网的文字效果
这里核心的就是借助了 linear-gradient(-4deg, transparent, transparent 25%, #ffb6ff, #b344ff,transparent 75%, transparent) 这个渐变背景，实现一个从透明到渐变色到透明的渐变背景，配合了 background-clip: text。
再利用动画，控制背景的 background-position，这样一个文字渐现再渐隐的文字动画就实现了展开评论点赞 - #青训营笔记创作活动#
2月17日 day6
今日学习
Tapable是一个类似于 Node.js 中的 EventEmitter 的库，但它更专注于自定义事件的触发和处理。通过 Tapable 我们可以注册自定义事件，然后在适当的时机去执行自定义事件。对同步钩子来说， tap 方法是唯一注册事件的方法，通过 call 方法触发同步钩子的执行。
对异步钩子来说，可以通过 tap、tapAsync、tapPromise三种方式来注册，通过对应的 callAsync、promise 这两种方式来触发注册的函数。
同时异步钩子中还可以分为两类：
异步串行钩子( AsyncSeries )：可以被串联（连续按照顺序调用）执行的异步钩子函数。
异步并行钩子( AsyncParallel )：可以被并联（并发调用）执行的异步钩子函数。展开评论点赞 - #青训营笔记创作活动#
2月16日 day5
今日学习
一般来说，前端并不存储太多数据，大部分时候都需要从后端服务器那获取数据。
于是前后端之间需要通过TCP协议去建立连接，然后在TCP的基础上传输数据。
而TCP是基于数据流的协议，传输数据时，并不会为每个消息加入数据边界，直接使用裸的TCP进行数据传输会有"粘包"问题。
因此需要用特地的协议格式去对数据进行解析。于是在此基础上设计了HTTP协议。详细的内容可以看我之前写的《既然有HTTP协议，为什么还要有RPC》。
比如，我想要看某个商品的具体信息，其实就是前端发的HTTP请求中传入商品的id，后端返回的HTTP响应中返回商品的价格，商店名，发货地址的信息等。展开评论点赞 - #青训营笔记创作活动#
2月7日 day10
今日学习
Vite项目屏幕适配的两种方案
rem是什么？rem是指相对于根元素的字体大小的单位，在日常开发过程中我们通常把根元素（html/body）的字体设置为10px,方便于我们计算（此时子元素的1rem就相当于10px）。
在CSS3中，我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放，指的是“缩小”和“放大”的意思。
transform: scaleX(x); / 沿x轴方向缩放/
transform: scaleY(y); / 沿y轴方向缩放/
transform: scale(); / 同时沿x轴和y轴缩放/展开评论点赞 - #青训营笔记创作活动#
2月4日 day9
今日学习
TinyPNG使用智能的「有损压缩技术」来减少WEBP、JPEG和PNG文件的文件大小。通过选择性地减少图像中的「颜色数量」，使用更少的字节来存储数据。这种效果几乎是看不见的，但在文件大小上有非常大的差别。
使用过TinyPng的都知道，它的压缩效果非常好，体积大幅度降低且显示效果几乎没有区别( 👀 看不出区别）。因此，选择其作为压缩工具，是一个不错的选择。展开评论点赞 - #青训营笔记创作活动#
1月20日 day8
今日学习
Esbuild 相关的介绍和实践，Esbuild 是由 Figma 的 CTO 「Evan Wallace」基于 Golang 开发的一款打包工具，相比传统的打包工具，主打性能优势，在构建速度上可以快 10~100 倍。采用 Go 语言开发，相比于 单线程 + JIT 性质的解释型语言，一方面可以充分利用多线程打包，并且线程之间共享内容，而 JS 如果使用多线程还需要有线程通信(postMessage)的开销。展开评论点赞 - #青训营笔记创作活动#
1月19日 day7
今日学习
WebRTC 从实战到未来
学会如何使用 WebRTC 的一些 API
学会如何分享屏幕，录制屏幕
学会如何通过 WebRTC 实现拍照
学会如何实现视频虚拟背景
搭建一个 1v1 的 WebRTC 实时音视频通话
WebRTC (Web Real-Time Communications) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC 包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。展开评论点赞