月度摄影 — 2024年8月 ~慢慢拍照，静静生活~

想法与思考 — 2024.08.28

在本文中，我将通过三个案例来深入到 Solid 源码中解析 Signal 响应式的原理，并通过图例的方式展示给大家。

Solid 之旅 —— Signal 响应式原理

pnpm monorepo 联调方案

在本文中，我们将深入探讨如何有效地利用 sourcemap 进行 Solid 源码的调试，并探索一些通用的调试技巧，这些技巧同样适用于其他现代 JavaScript 框架。

Solid 之旅 —— 调试源码篇（其他框架也适用）

月度摄影 — 2024年7月 ~慢慢拍照，静静生活~

Solid 框架巧妙地融合了 React 和 Vue 的优点，为开发者提供了一个强大而灵活的工具集，以构建高性能和高度响应的前端应用。

Solid 之旅

月度摄影 — 2024年6月 ~慢慢拍照，静静生活~每日一张

想法与思考 — 2024.06.28

想法与思考 — 2024.06.25

日常摄影 — 2024.06.04

日常摄影 — 2024.06.03

Vlog — 骑行 ”淀山湖“ 🤡

日常摄影 — 2024.06.02

日常摄影 — 2024.06.01

月度摄影 — 2024年5月 ~慢慢拍照，静静生活~每日一张

想法与思考 — 2024.05.31

日常摄影 — 2024.05.31

日常摄影 — 2024.05.30

日常摄影 — 2024.05.29

想法与思考 — 2024.05.28

日常摄影 — 2024.05.28

日常摄影 — 2024.05.27

日常摄影 — 2024.05.26

日常摄影 — 2024.05.25

日常摄影 — 2024.05.24

日常摄影 — 2024.05.23

日常摄影 — 2024.05.22

日常摄影 — 2024.05.21

日常摄影 — 2024.05.20

日常摄影 — 2024.05.19

日常摄影 — 2024.05.18

想法与思考 — 2024.05.17

日常摄影 — 2024.05.17

想法与思考 — 2024.05.16

日常摄影 — 2024.05.16

想法与思考 — 2024.05.15

日常摄影 — 2024.05.15

日常摄影 — 2024.05.14

日常摄影 — 2024.05.13

日常摄影 — 2024.05.12

日常摄影 — 2024.05.11

泰安之旅

青岛之旅

每日摄影 — 2024.04.18

技巧摄影 — 双重曝光

骑行 出发 → 苏州

东平国家森林公园

骑行 出发 → 崇明岛

💙张杰演唱会💙 ^_^

人生第一辆公路车 — 来自大佬的馈赠

使用 Monaco 编辑器的一些总结

日常摄影 —— 2024.03.07

日常摄影 —— 2024.03.06

Array.prototype.with(index, value) 方法会返回对其调用的数组的副本，并将 index 设置为您提供的新 value

使用 Array.prototype.with 更新不可变数组

通过三个星期的学习，大致已经对低代码有了初步的了解了
从一开始的未知，到后面了解学习到的一些概念，如materials、setter、setting、canvas、vm等等内容

TurboLC-Web 小小部署一波

在 Monorepo 中对代码进行规范，使用的工具包括 husky、lint-staged、biome，通过专门建立一个lint包来实现此功能

在 Monorepo 中对代码进行规范(husky + lint-staged)

总结一下最近在公司做需求遇到的一些问题

前端实现PDF预览的几种选择（pdfjs-dist、react-pdf、pdf-viewer）

ECharts — 通过ColorPicker控制ECharts图表的渐变色

ECharts — 柱状图相关功能点（柱状样式、顶部装饰、提示框及动画） ^_^

美图一张 ^_^

ECharts — 饼图相关功能点（内环、外环、环形间隔、环形文字、轮播动画）

CheatSheet 一款可以实时显示当前应用的所有快捷键，非常好用！只需要在应用里按一次快捷键(默认 F2)，它就会弹出一个窗口，列出当前应用的所有快捷键列表，包括快捷键组合使用方法等等。这给我使用快捷键带来了极大的便利，可以随时查看忘记的快捷键，不需要频繁搜索查询了。

这款跨平台快捷键显示软件，我用起来超顺手！

GitFlow 工作流（GitFlow Workflow） 是一个 Git 工作流程，可帮助持续进行软件开发和实施 DevOps 实践。它最初由 Vincent Driessen 在 nive 上发行并广受欢迎。Gitflow 工作流定义了围绕项目发行版设计的严格分支模型。这为管理较大的项目提供了一个强大的框架。

Git Flow 的简单使用

在 Deno 中 使用 npm 包

实现物体的关键帧动画和骨骼动画

ThreeJS — KeyFrameAnimation & Bone

ThreeJS — 通过 Ray & Label  来做一个点击物体高亮并提示信息

ThreeJS — Sprite & EffectComposer

ThreeJS — Shadow

对于简单的立方体、球体等模型，你可以通过three.js的几何体相关API快速实现，不过复杂的模型，比如一辆轿车、一栋房子、一个仓库，一般需要通过3D建模软件来实现。

ThreeJS — 外部模型

BR材质，所谓PBR就是，基于物理的渲染(physically-based rendering)

ThreeJS — PBR

网格模型Mesh其实就一个一个三角形(面)拼接构成。使用网格模型Mesh渲染几何体geometry，就是几何体所有顶点坐标三个为一组，构成一个三角形，多组顶点构成多个三角形，就可以用来模拟表示物体的表面。

ThreeJS — BufferGeometry

Three.js是一款基于原生WebGL封装通用Web 3D引擎，在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域基本上都有three.js的身影。

ThreeJS — 入门

通过React Native体验一遍从环境搭建到开发，到最后的打包运行

React Native 从0到1

Electron 从0到1

实现一个小型打包工具

常见面试手写题

一个基于 WebRTC 实现的视频会议的全栈开发项目，支持音频，视频，共享屏幕，消息发送的方式来进行交互。同时项目是基于TypeScript的全栈开发，并使用 pnpm monorepo 进行项目管理

TurboMeet：一个基于WebRTC实现的视频会议全栈开发项目

Mediasoup 由应用层和数据处理层组成。应用层是通过 Node.js 实现的；数据处理层由 C++ 语言实现，包括 DTLS 协议实现、ICE 协议实现、SRTP/SRTCP 协议实现、路由转发等。

Mediasoup 的使用

关于流媒体的一些知识点的总结

流媒体相关知识

WebRTC 简单功能使用

该项目主要是一个仿 Mac 的系统，全部使用的 TypeScript 书写，使用
了一些前端的新技术，实现的功能包括顶部状态栏，App 的使用，如 Terminal、
TurboChat 等其他应用

TurboMac 项目

使用cluster集群并采用Round-Robin负载均衡策略来调度多进程

Node Cluster 集群

跟着极客兔兔做7Days的framework练习 https://geektutu.com/post/gee.html

Go-Framework by geektutu

• 当页面滚动时，懒加载图片或其他内容。
• 实现“可无限滚动”网站，也就是当用户滚动网页时直接加载更多内容，无需翻页。
• 对某些元素进行埋点曝光
• 滚动到相应区域来执行相应动画或其他任务。

图片懒加载 — IntersectionObserver

• 学会如何制作 https 的自签名证书
• 学会使用 socket.io 来实现客户端与信令服务器的通信
• 了解并实现一个 WebRTC + 信令服务器自动建立连接的音视频实时通话

WebRTC 实时音视频 1v1

粘贴图片到网页

p-limit 用于实现并发控制，限制同时进行的异步操作数量。通常用于处理前端代码中的异步逻辑，可以控制并发的数量，避免一次性进行太多的异步操作导致性能问题。

手写 p-limit —— 实现并发控制

第一优势：跨平台，由于 Docker 的镜像能够提供除了系统内核之外完成的运行环境，所以能在任何系统中都能提供一致的运行环境，这样就不需要考虑不同系统中间兼容性的问题，也就不存在虚拟机在各系统中间的配置不同的情况。
第二优势：就是借助于跨平台的特性，Docker 可以将很多配置复杂的服务端中间件打包成基础镜像提供给开发使用。这样无疑能够大大降低配置成本，开发只需要知道常规的 Docker 相关的命令或者直接运行提供的容器编排脚本就可以搭建出需要使用的服务端环境。同时公共的镜像仓库上已经有很多这种基础镜像，例如 Mysql、Redis、Node 等等，按需提取即可。
第三优势：这点对于运维同学比较好操作，Docker 能提供快速迁移以及配合 k8s，能够快速的伸缩副本，减少运维的工作成本与负担。

Docker 基本使用

依赖项注入、装饰器、异常过滤器、管道、保护和拦截器，都同样适用于微服务。Nest 会尽可能地抽象化实现细节，以便相同的组件可以跨基于 HTTP 的平台，WebSocket 和微服务运行。本节特别讨论 Nest 的微服务方面。 在 Nest 中，微服务基本上是一个使用与 HTTP 不同的传输层的应用程序。

NestJS 学习 —— 微服务 Microservice

本文档中其他地方讨论的大多数概念，如依赖注入、装饰器、异常过滤器、管道、守卫和拦截器，都同样适用于网关。只要有可能，Nest将抽象实现细节，以便相同的组件可以跨基于 http 的平台、WebSockets 和微服务运行。本节将介绍 WebSockets 在 Nest 中的应用。

NestJS 学习 —— 网关 Gateway

了解Nest的基本概念
- Controller
- Provider
- Module
- Middleware
- Exception & Filter
- Pipe
- Guard
- Intercept

NestJS 学习 —— 基本概念

Nest (NestJS) 是一个用于构建高效、可扩展的 Node.js 服务器端应用程序的开发框架。它利用JavaScript 的渐进增强的能力，使用并完全支持 TypeScript （仍然允许开发者使用纯 JavaScript 进行开发），并结合了 OOP （面向对象编程）、FP （函数式编程）和 FRP （函数响应式编程）。
在底层，Nest 构建在强大的 HTTP 服务器框架上，例如 Express （默认），并且还可以通过配置从而使用 Fastify ！
Nest 在这些常见的 Node.js 框架 (Express/Fastify) 之上提高了一个抽象级别，但仍然向开发者直接暴露了底层框架的 API。这使得开发者可以自由地使用适用于底层平台的无数的第三方模块。

NestJS 学习 —— 入门

基于装饰器我们能够快速优雅的复用逻辑，提供注释一般的解释说明效果，以及对业务代码进行能力增强。
IoC的全称为 Inversion of Control，意为控制反转，它是OOP中的一种原则（虽然不在n大设计模式中，但实际上IoC也属于一种设计模式），它可以很好的解耦代码。

NestJS 学习 —— IoC & TS装饰器

数据结构与算法 —— 技巧

生活 —— 南京红山动物园

NextAuth.js 是 Next.js 应用程序的完整开源身份验证解决方案，专门为 Next.js 设计，NextAuth 的特点：
1. 灵活且易于使用，支持 OAuth1.0 OAuth2.0 和 OpenId 链接；
2. 灵活数据管理，可以不使用数据库，也可以选择使用 MySQL, MariaDB, Postgres, SQL Server, MongoDB 以及 SQLite。
3. 默认安全，默认 Cookie 机制，可开启 JSON Web Token；
4. NextAuth 推进无密码的登录机制
5. 支持 serverless 部署

NextAuth

tRPC 是一个基于 TypeScript 的远程过程调用框架，旨在简化客户端与服务端之间的通信过程，并提供高效的类型安全。它允许您使用类似本地函数调用的方式来调用远程函数，同时自动处理序列化和反序列化、错误处理和通信协议等底层细节。
Zod 是一个以 TypeScript 为首的模式声明和验证库 ，弥补了 TypeScript 无法在运行时进行校验的问题

tRPC & Zod

框架原理 —— mini-react

原文链接：https://const_white.gitee.io/gitee-blog/blog/vue/mini-vue

框架原理 —— mini-vue

Daily

English

Tools

Life

Algorithms

DevOps

Project

Photography

Cycling

Travel

Tour

Thinking

Vlog

Comments

Planning

Monthly

ServiceWork

JavaScript

ServiceWork 缓存

password

icon

date

type

Edited

slug

status

Created

title

summary

表格

React

前端技术实现文件预览（word、excel、pdf、图片、文本）

Next-generation Node.js and TypeScript ORM
Prisma unlocks a new level of developer experience when working with databases thanks to its intuitive data model, automated migrations, type-safety & auto-completion.

文档类型	npm包
pdf	`pdfjs-dist`
docx	`docx-preview`
xlsx	`exceljs`、`handsontable`、`@handsontable/react`
gif, jpg, jpeg, bmp, tiff, tif, png, svg	自身
txt, md 等文本格式	自身

Buffer的获取

请求

本地

文件处理

Docx

PDF

Excel

Image

Text

文件

参考链接：

JinSo

交流频道

加入我们的社群讨论分享