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

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

回顾这一年，我的成长是显著的。如今，我已经能够专门负责前端大屏低代码模块的工作。从最初的迷茫新人，到现在能够独立承担责任，这个过程中我经历了许多，也学习了许多，成长了许多。

我的2024年度总结：工作的第一年

通过本文，我们学习如何实现一个具有拖拽、缩放和定位功能的简易画布。

实现一个简易的可拖拽缩放画布

Signal 机制的核心是使用函数而非直接返回值来管理数据，通过 read 和 set 函数分别获取和设置值，并维护订阅者列表以实现数据变更时的自动更新。 这需要将读取函数设计为函数而非直接返回信号值，以便追踪和管理订阅者，从而实现高效的UI更新。

理解 Signal 是如何工作的

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

通过这篇文章，主要了解两个方面：
• Solid 的组件编译
• Solid 是如何实现 Signal 的插入和细颗粒度更新的？

Solid 之旅 —— 组件编译 & 如何实现细颗粒度更新的

今天我们来聊一聊HTML中一个较少被提及的标签：<template>。虽然它在页面加载时不可见，但在现代Web框架中却扮演着重要的角色，比如Vue、Svelte和Solid等。

探索HTML中的<template>标签

Cursor 是一款集成了 AI 技术的代码编辑器，作为广受欢迎的 VS Code 的一个衍生版本，它不仅继承了 VS Code 的强大功能，还全面融入了 AI 功能，从而极大地简化了开发工作流。

为什么 Cursor 这么受欢迎？说说我这几个月的使用感受

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

这篇文章将主要深入解析组件内部props的原理，为什么结构后会导致响应式丢失？

Solid 之旅 —— 为什么 props 被解构后会导致响应式丢失

百度地图的基本使用，简单介绍一下一些基本内容，本文着重关于在 Marker 标注和点聚合这一块。

百度地图的使用（Mark、Cluster…）

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

对于 React Scheduler，它通过将任务切片并异步执行，避免了阻塞浏览器的主线程。
很多人其实都看到过类似的文章了，甚至说去手写调度器，都写的很不错，所以本文将从一个新的角度探讨 React Scheduler，揭示它是如何利用几个简单的 API 实现这一壮举的。

解析 React Scheduler 原理，Solid 竟也在使用！

想法与思考 — 2024.09.17

月度摄影 — 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

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

JinSo

交流频道

加入我们的社群讨论分享